/* ============================================================
   Tokens de diseño — identidad Luuna (extraída de luuna.mx, ago 2026)
   Única fuente de verdad: TODO color, espacio, radio o tamaño de texto
   de la plataforma pasa por aquí. Cero números mágicos en componentes.
   ============================================================ */
:root {
  /* --- Marca (valores reales del sitio de Luuna) --- */
  --color-brand: #0047bb;        /* azul Luuna: acciones primarias */
  --color-brand-dark: #003590;   /* hover/estado presionado */
  --color-brand-navy: #123d76;   /* énfasis profundo, franjas */
  --color-brand-soft: #edefff;   /* fondos suaves de marca, chips */
  --color-accent: #a93700;       /* terracota Luuna: alertas, peligro */
  --color-accent-soft: #ffede8;  /* fondo suave del acento */

  /* --- Tinta y superficies (tema DÍA = base; ver momentos abajo) --- */
  --color-ink: #000000;          /* texto principal */
  --color-ink-2: #4d4d4d;        /* texto secundario */
  --color-ink-3: #97979b;        /* texto terciario, deshabilitado */
  --color-bg: #ffffff;           /* fondo de página */
  --color-bg-2: #f1f2f2;         /* fondo alterno, el gris del sitio */
  --color-line: #ededed;         /* bordes suaves */
  --color-line-2: #d9d8d6;       /* bordes visibles */
  color-scheme: light;

  /* --- Estados de flota (semánticos) --- */
  --color-ok: #1a7f4b;           /* en línea, saludable */
  --color-ok-soft: #e7f4ed;
  --color-warn: #b76e00;         /* atención: desincronizado, caliente */
  --color-warn-soft: #fdf2e0;
  --color-danger: var(--color-accent);      /* offline, error */
  --color-danger-soft: var(--color-accent-soft);

  /* --- Tipografía (GT America del CDN de Luuna; fallbacks afines) --- */
  --font-sans: "GT America", Inter, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --text-xs: 0.75rem;    /* 12 — etiquetas, metadatos */
  --text-s: 0.875rem;    /* 14 — texto denso, tablas */
  --text-m: 1rem;        /* 16 — cuerpo */
  --text-l: 1.25rem;     /* 20 — subtítulos */
  --text-xl: 1.5rem;     /* 24 — títulos de sección */
  --text-2xl: 2rem;      /* 32 — títulos de página */
  --text-stat: 3rem;     /* 48 — números de tablero, estilo "+1M" */
  --weight-regular: 400;
  --weight-medium: 500;  /* GT America Medium: titulares y botones */
  /* Interlínea de los titulares (h1–h4). Es token porque no solo compone
     texto: de ella cuelga el centro óptico de la primera línea del shell del
     iPad, donde se alinean el título, la identidad y la hamburguesa. Cambiarla
     aquí mueve las tres cosas juntas; escrita a mano en dos archivos, se
     desincronizan en silencio. */
  --leading-title: 1.15;

  /* --- Espaciado (escala de 4) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* --- Forma (luuna.mx: esquinas generosas, botones píldora) --- */
  --radius-s: 8px;
  --radius-m: 16px;      /* tarjetas */
  --radius-pill: 999px;  /* botones y chips */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-pop: 0 8px 24px rgba(18, 61, 118, 0.12);

  /* El cielo del día: blanco pleno, como luuna.mx. Los otros momentos
     redefinen el suyo abajo. */
  --bg-sky: var(--color-bg);

  /* --- La barra superior: negra en los cuatro momentos, como luuna.mx --- */
  --topbar-bg: #000000;
  --topbar-ink: #ffffff;
  --topbar-ink-2: rgba(255, 255, 255, 0.6);
  --topbar-well: rgba(255, 255, 255, 0.12);

  /* --- Táctil (vistas del vendedor en iPad) --- */
  --tap: 44px;
  --tap-xl: 62px;      /* controles de la barra del iPad: se usa de pie, a un brazo */
  --fab: 71px;         /* botón flotante grande (lo usa el aire inferior del lateral) */
  --lateral: 260px;    /* ancho del menú lateral del catálogo */
  --icono-ancho: 20px; /* iconos dibujados en CSS: al tamaño de los del header */
  --icono-trazo: 2px;  /* grosor de sus líneas */

  /* --- Movimiento --- */
  /* El lateral al abrir y cerrar. UNA sola definición porque son dos
     propiedades en dos elementos distintos las que tienen que verse como un
     solo gesto: el ancho de la rejilla (.shell) y el viaje de la hamburguesa
     (.burger, que cruza de la izquierda al borde del menú mientras se vuelve
     X). Con la duración escrita a mano en cada lugar, basta que alguien afine
     una para que el icono llegue antes o después que el panel. */
  --motion-lateral: 200ms ease-out;
}

/* ============================================================
   Los CUATRO MOMENTOS del día — herencia de la app de la cama:
   la interfaz no tiene "claro y oscuro", tiene amanecer (5–9),
   día (9–18), atardecer (18–21) y noche (21–5). El atributo
   data-theme lo pone theme_controller.js (automático por horario,
   por sistema, o manual). El día es el tema base de :root.
   ============================================================ */

/* Amanecer: el azul se abre y entra calor por abajo (cielo de la app de la cama). */
[data-theme="dawn"] {
  --bg-sky: linear-gradient(180deg, #6b82b8 0%, #c2bdcc 45%, #f7d4b3 100%);
  --color-ink: #172b52;
  --color-ink-2: #47597a;
  --color-ink-3: #7c8aa8;
  --color-bg: rgba(255, 255, 255, 0.82);
  --color-bg-2: rgba(255, 255, 255, 0.45);
  --color-line: rgba(255, 255, 255, 0.55);
  --color-line-2: rgba(255, 255, 255, 0.75);
  --shadow-card: 0 1px 3px rgba(23, 43, 82, 0.10);
  color-scheme: light;
}

/* Atardecer: cae la luz y el ámbar se asoma en el horizonte. */
[data-theme="dusk"] {
  --bg-sky: linear-gradient(180deg, #212f66 0%, #4a4773 50%, #8c5c57 100%);
  --color-ink: #f5f5ff;
  --color-ink-2: #b8bfde;
  --color-ink-3: #8b91b5;
  --color-bg: rgba(36, 46, 82, 0.72);
  --color-bg-2: rgba(20, 26, 50, 0.55);
  --color-line: rgba(255, 255, 255, 0.14);
  --color-line-2: rgba(255, 255, 255, 0.24);
  --color-brand: #6d95f0;
  --color-brand-dark: #8fb0f5;
  --color-brand-soft: rgba(109, 149, 240, 0.18);
  --color-ok: #4cbd84;
  --color-ok-soft: rgba(76, 189, 132, 0.16);
  --color-warn: #e9a13b;
  --color-warn-soft: rgba(233, 161, 59, 0.16);
  --color-accent: #ff8f5e;
  --color-accent-soft: rgba(255, 143, 94, 0.16);
  --color-danger: #ff8f5e;
  --color-danger-soft: rgba(255, 143, 94, 0.16);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

/* Noche: el estado natural de la red en guardia. */
[data-theme="night"] {
  --bg-sky: linear-gradient(180deg, #141f3d 0%, #0a0f24 100%);
  --color-ink: #ebf0fa;
  --color-ink-2: #8fa8cc;
  --color-ink-3: #5f7396;
  --color-bg: #14213b;
  --color-bg-2: #0d1730;
  --color-line: #21365a;
  --color-line-2: #2d4674;
  --color-brand: #5b8bef;
  --color-brand-dark: #82a8f4;
  --color-brand-soft: rgba(91, 139, 239, 0.16);
  --color-ok: #3fae74;
  --color-ok-soft: rgba(63, 174, 116, 0.14);
  --color-warn: #d68a16;
  --color-warn-soft: rgba(214, 138, 22, 0.14);
  --color-accent: #ff8f5e;
  --color-accent-soft: rgba(255, 143, 94, 0.14);
  --color-danger: #ff8f5e;
  --color-danger-soft: rgba(255, 143, 94, 0.14);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}