/* ============================================================
   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);
  /* Qué está reproduciendo una pantalla, no su salud: la medición BedMatch.
     Morado porque loop (marca) y miniclip (ok) ya estaban tomados por otra
     pregunta. Único par de color que nace en la Etapa 1 de la consola. */
  --color-medicion: #6b3fb5;
  --color-medicion-soft: #f1ebfb;

  /* --- 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" */
  /* 40 — la cifra de una tarjeta KPI de la consola. Es más chica que
     --text-stat porque en la fila de cinco tarjetas de los bocetos «1,187 /
     1,240» y «Buen Fin v3» caben en UN renglón; con 48 se parten en dos. */
  --text-kpi: 2.5rem;
  --weight-regular: 400;
  --weight-medium: 500;  /* GT America Medium: titulares y botones */
  /* Interlínea de los titulares (h1–h4). Es token y no un número suelto
     porque la comparten HQ y la tienda: escrita a mano en cada archivo, 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 */
  /* Esquina moderada de la consola: campos y controles de filtro, NO píldora.
     `.btn` conserva --radius-pill; esto es solo para .input--pastilla y
     .select--pastilla. */
  --radius-control: 14px;
  --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 del iPad que se usan de pie, a un brazo */
  --icono-ancho: 20px; /* iconos dibujados en CSS: al tamaño de los del header */
  --icono-trazo: 2px;  /* grosor de sus líneas */
}

/* ============================================================
   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;
  /* La tarjeta de amanecer es blanco translúcido: el morado sólido del día
     se ve como un bloque opaco encima. Se traslucienta igual que el resto
     de la superficie. */
  --color-medicion: #6b3fb5;
  --color-medicion-soft: rgba(107, 63, 181, 0.16);
}

/* 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;
  --color-medicion: #a98ae6;
  --color-medicion-soft: rgba(169, 138, 230, 0.18);
}

/* Noche: el estado natural de la red en guardia.
   Afinado el 22 sep sobre los 7 bocetos de la consola (medido con cuentagotas;
   ver docs/decisiones/2026-09-22-contraste-consola.md). Solo 4 tokens tocados
   —bg-sky, color-bg, color-bg-2, color-line—, el resto de night se queda: los
   tres semánticos (ok/warn/danger) son de marca, ya usados en el iPad y el
   correo, y no se mueven por un boceto de dirección visual. */
[data-theme="night"] {
  --bg-sky: linear-gradient(180deg, #101a33 0%, #0a0f24 100%);
  --color-ink: #ebf0fa;
  --color-ink-2: #8fa8cc;
  --color-ink-3: #5f7396;
  /* Superficie de tarjeta y de tabla, medida en el boceto. */
  --color-bg: #161d34;
  /* ⚠️ Cambia de SENTIDO: el boceto usa la superficie hundida (input, .cmdk,
     encabezado de tabla) más CLARA que la tarjeta, no más oscura como hoy.
     Revisado: .card--soft, .btn--quiet, .viewtoggle y .badge--off siguen
     legibles con este valor (ver documento de decisión). */
  --color-bg-2: #1a2032;
  /* Borde medido, menos azul que el actual. */
  --color-line: #282f44;
  --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);
  --color-medicion: #ae8eea;
  --color-medicion-soft: rgba(174, 142, 234, 0.16);
  --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;
  /* La barra superior sigue el tema solo de noche: la spec decidió respetar
     el token (negro fijo en los otros tres momentos, "como luuna.mx") y dejar
     esto como la única línea que hay que borrar si no convence. */
  --topbar-bg: #14233d;
}