/* ============================================================
   Design tokens del prototipo ElevaTech.
   Fuente unica de verdad de todo valor visual.
   Este archivo NUNCA conoce los datos ni el DOM.
   ============================================================ */

:root,
[data-theme="light"] {
  /* --- Tipografia --- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;

  --text-large-title-size: 34px;  --text-large-title-lh: 41px;
  --text-title1-size: 28px;       --text-title1-lh: 34px;
  --text-title2-size: 22px;       --text-title2-lh: 28px;
  --text-title3-size: 20px;       --text-title3-lh: 25px;
  --text-headline-size: 17px;     --text-headline-lh: 22px;
  --text-body-size: 17px;         --text-body-lh: 22px;
  --text-callout-size: 16px;      --text-callout-lh: 21px;
  --text-subhead-size: 15px;      --text-subhead-lh: 20px;
  --text-footnote-size: 13px;     --text-footnote-lh: 18px;
  --text-caption1-size: 12px;     --text-caption1-lh: 16px;
  --text-caption2-size: 11px;     --text-caption2-lh: 13px;

  /* --- Espaciado (base 4) --- */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-8: 32px; --space-12: 48px;

  /* --- Radios --- */
  --radius-xs: 8px; --radius-sm: 10px; --radius-md: 12px;
  --radius-lg: 16px; --radius-xl: 20px; --radius-full: 999px;

  /* --- Movimiento --- */
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 350ms;

  /* --- Colores de sistema iOS (claro) --- */
  --ios-blue: #007AFF;   --ios-green: #34C759;  --ios-indigo: #5856D6;
  --ios-orange: #FF9500; --ios-red: #FF3B30;    --ios-teal: #30B0C7;
  --ios-yellow: #FFCC00; --ios-purple: #AF52DE; --ios-pink: #FF2D55;
  --ios-gray: #8E8E93;

  /* --- Paleta de SERIES de graficos (rulings 128 y 131) ---
     Los tonos crudos de iOS NO sirven tal cual para una serie: contra la
     superficie de la tarjeta (--bg-grupo) tres de ellos no llegan al piso NO
     TEXTUAL de 3:1 en tema claro —medido: --ios-orange 2.20, --ios-green 2.22,
     --ios-teal 2.57— y ahi el color ES el portador de la identidad: relleno de
     la barra apilada, relleno de la torta y trazo de la linea de cumplimiento.
     Un relleno en degradado debajo de una linea seria excusable; estos tres no.
     La paleta cruda de iOS NO se toca: es la referencia que muestra la guia de
     estilo y lo que el ruling 71 anoto ("nueve de los diez no llevan texto
     blanco"), asi que retocarla volveria mentira esa anotacion.
     Estos siete roles son EXACTAMENTE los del mapa de dashboard.js, derivados de
     su equivalente iOS y oscurecidos hasta pasar con margen. Medido contra
     --bg-grupo (blanco aca): #0064D2 5.59, #A65200 5.49, #4B45CC 6.95,
     #17798A 5.07, #C7362C 5.26, #1F7A34 5.40, #767676 4.54 — minimo 4.54.
     Y en HEX DE 6 DIGITOS a proposito: el degradado de la linea de cumplimiento
     compone el alfa del color, y el formato viejo (concatenar '55' al valor) con
     un token que no fuera hex fallaba (medido: `addColorStop` lanza SyntaxError,
     o sea el relleno no se dibuja; ver `degrado()` en dashboard.js). */
  --serie-preventivo:  #0064D2;
  --serie-correctivo:  #A65200;
  --serie-instalacion: #4B45CC;
  --serie-inspeccion:  #17798A;
  --serie-emergencia:  #C7362C;
  --serie-ok:          #1F7A34;
  --serie-meta:        #767676;

  /* --- Fondos, rellenos y labels (modelo iOS) --- */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F2F2F7;
  /* SUPERFICIES SEMANTICAS. Los roles de --bg-primary/--bg-secondary se
     INVIERTEN entre temas, asi que usarlos directamente para "pagina" y "grupo"
     produce los dos defectos que midio la Tarea 5: en claro, .field-group caia
     en --bg-secondary, que es el MISMO color que la pagina, y los campos
     quedaban gris sobre gris; en oscuro, .card y .list-group caian en
     --bg-primary (negro) sobre una pagina #1C1C1E, o sea invertidos respecto de
     iOS. Estos dos tokens dicen la intencion y no el valor. */
  --bg-pagina: #F2F2F7;
  --bg-grupo: #FFFFFF;
  --fill-quaternary: rgba(120, 120, 128, 0.12);
  --separator: rgba(60, 60, 67, 0.12);
  --label: rgba(0, 0, 0, 1);
  /* Apple usa (60,60,67) al 60%. Compuesto sobre blanco eso da 3.44:1 y NO
     alcanza AA; sobre bg-secondary da 3.29:1. Con base negra pura al 60% da
     5.74:1 sobre blanco y 5.54:1 sobre bg-secondary. Medido, no estimado. */
  --label-secondary: rgba(0, 0, 0, 0.6);
  /* --label-tertiary es un token NO TEXTUAL. Al 30% de alfa compone 1.72:1
     sobre blanco: sirve para hairlines, chevrons, iconos decorativos y
     estados deshabilitados, nunca para texto. El tercer nivel de texto usa
     --label-secondary. Ver la restriccion global correspondiente. */
  --label-tertiary: rgba(60, 60, 67, 0.3);

  /* --- Acento partido en tres roles (ver spec 1.3) ---
     --accent      : color de sistema, para iconos, bordes e indicadores (umbral 3:1)
     --accent-fill : superficie rellena que LLEVA TEXTO ENCIMA (umbral 4.5:1 con blanco)
     --accent-text : texto e iconos de acento sobre fondo normal (umbral 4.5:1)
     Los valores de fill y text se ajustan hasta que CHECK.contraste() reporte cero. */
  /* --accent es el color "vivo" del sistema para iconos, bordes e indicadores,
     y su umbral es 3:1. El teal de iOS (#30B0C7) mide 2.57 sobre blanco y 2.31
     sobre bg-secondary: INCUMPLE. #1F8A9C mide 4.06 y 3.64, con margen sobre
     ambos fondos. Medido, no estimado. */
  --accent: #1F8A9C;
  --accent-fill: #00707F;
  --accent-text: #00636F;
  --accent-tint: rgba(31, 138, 156, 0.15);
  --on-accent: #FFFFFF;

  /* --destructive-fill: superficie rellena que lleva texto BLANCO encima, con el
     mismo patron de tres roles que el acento. El rojo de iOS incumple: #FF3B30
     mide 3.55 con blanco y el del tema oscuro #FF453A mide 3.41. #C7362C mide
     5.26 con blanco y ademas conserva contraste no textual de 3.99 contra negro
     y 3.23 contra #1C1C1E. Un solo valor sirve en AMBOS temas: ningun rojo mas
     vivo puede llevar texto blanco a 4.5:1. Medido, no estimado. */
  --destructive-fill: #C7362C;
  --on-destructive: #FFFFFF;

  /* --control-checked-fill: el relleno (y el borde) del estado MARCADO de
     checkbox y radio. Es el UNICO token del sistema que a proposito NO se
     sobrescribe en tema oscuro, y su razon de ser es justamente esa
     ESTABILIDAD, no un descuido: aca el par que importa es DOBLE —el relleno
     contra la superficie de atras, y el check BLANCO contra el relleno— y un
     valor por tema no puede satisfacer los dos con los tokens que ya existen.
     MEDIDO: #1F8A9C da 4.06 contra blanco, 4.19 contra la card oscura
     (#1C1C1E) y 4.06 con el check blanco encima: los TRES pares por encima del
     piso de 3:1. Las alternativas NO sirven y las dos estan medidas:
     `--accent-fill` en oscuro es #0A6E7D y mide 2.87 contra la card oscura (es
     el defecto que este token cierra), y `--accent` resuelve a #40C8E0 en
     oscuro, donde el check BLANCO encima mide 1.99:1 — usarlo habria dejado el
     check invisible justo en el tema con el problema. */
  --control-checked-fill: #1F8A9C;

  /* --control-border: el BORDE de un control desmarcado es su unica senal
     visual, asi que es no textual y necesita 3:1 (WCAG 1.4.11). --label-tertiary
     compone 1.72 sobre blanco, 1.71 sobre bg-secondary y 1.12 sobre negro:
     incumple en las tres. El gris de iOS #8E8E93 tambien incumple sobre
     bg-secondary (2.92). #767676 pasa en las cuatro superficies — 4.54 sobre
     blanco, 4.07 sobre bg-secondary, 4.62 sobre negro, 3.75 sobre #1C1C1E —
     asi que un solo valor sirve en ambos temas. Medido, no estimado. */
  --control-border: #767676;
  /* Anillo de error. Sombra decorativa: el significado lo lleva el texto, que si
     pasa. Existe como token para que conmute con el tema en vez de quedar
     hardcodeado. */
  --error-tint: rgba(255, 59, 48, 0.18);

  /* --- Colores de texto accesibles (AA sobre --bg-primary) --- */
  /* Los CUATRO se corrigieron al medir el fondo COMPUESTO de su badge (la tinta
     al 18% sobre la superficie donde el badge vive de verdad), que es el caso
     mas ajustado del sistema. La Tarea 4 midio los cuatro ahi: los cinco badges
     de la muestra cuelgan de la pagina, o sea de bg-secondary, y no de un card.
     blue  #0064D2 daba 4.42 y red #C7362C daba 4.13 en ese fondo: por debajo de
     4.5. green #1F7A34 daba 4.23 y orange #A65200 daba 4.30: tambien por debajo,
     aunque el brief los daba por buenos porque citaba sus valores sobre
     superficie PLANA (5.40/4.84 y 5.49/4.92), no sobre la tinta del badge.
     El Paso 7 del brief autoriza oscurecer el token del badge que falle. Los
     valores corregidos llevan margen en vez de quedar al borde, y el tema oscuro
     pasa en los cuatro y no se toca. */
  --text-blue: #005BBB;
  --text-green: #1C6E2F;
  --text-orange: #994B00;
  --text-red: #B32E24;

  /* --- Vidrio --- */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-blur: blur(20px) saturate(180%);

  /* --- Sombras (sutiles: iOS es plano) --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);

  /* --- Metricas del shell --- */
  --tabbar-h: 49px;
  --navbar-h: 56px;
  --sidebar-w: 260px;
  --sidebar-rail-w: 76px;
}

[data-theme="dark"] {
  --ios-blue: #0A84FF;   --ios-green: #30D158;  --ios-indigo: #5E5CE6;
  --ios-orange: #FF9F0A; --ios-red: #FF453A;    --ios-teal: #40C8E0;
  --ios-yellow: #FFD60A; --ios-purple: #BF5AF2; --ios-pink: #FF375F;
  --ios-gray: #98989D;

  /* Paleta de series en oscuro. Aca los tonos de iOS SI pasan el 3:1 contra
     --bg-grupo (#1C1C1E) —es el hallazgo del ruling 128— pero igual se declaran
     como paleta PROPIA: el rol "serie de un grafico" no depende de que el valor
     de referencia coincida hoy, y dos de ellos (#5E5CE6 indigo 3.36 y #FF453A
     rojo 4.99) quedaban al borde, asi que se eligen tonos con margen.
     Medido contra --bg-grupo: #0A84FF 4.66, #FF9F0A 8.28, #8E8AF0 5.71,
     #40C8E0 8.55, #FF6F63 6.24, #30D158 8.42, #98989D 5.93 — minimo 4.66. */
  --serie-preventivo:  #0A84FF;
  --serie-correctivo:  #FF9F0A;
  --serie-instalacion: #8E8AF0;
  --serie-inspeccion:  #40C8E0;
  --serie-emergencia:  #FF6F63;
  --serie-ok:          #30D158;
  --serie-meta:        #98989D;

  --bg-primary: #000000;
  --bg-secondary: #1C1C1E;
  /* Los roles se invierten: en oscuro la pagina es negra y el grupo es #1C1C1E. */
  --bg-pagina: #000000;
  --bg-grupo: #1C1C1E;
  --fill-quaternary: rgba(120, 120, 128, 0.24);
  --separator: rgba(84, 84, 88, 0.6);
  --label: rgba(255, 255, 255, 1);
  /* Sobre negro, (235,235,245) al 60% compone 6.36:1: se mantiene el valor de
     Apple. El control esta en el tema claro, no aca. */
  --label-secondary: rgba(235, 235, 245, 0.6);
  --label-tertiary: rgba(235, 235, 245, 0.3);

  --accent: var(--ios-teal);
  --accent-fill: #0A6E7D;
  --accent-text: #7FDCEC;
  --accent-tint: rgba(64, 200, 224, 0.22);
  --on-accent: #FFFFFF;

  --text-blue: #409CFF;
  --text-green: #5CD97A;
  --text-orange: #FFB340;
  --text-red: #FF7B70;

  --glass-bg: rgba(28, 28, 30, 0.72);
  /* El anillo de error conmuta con el tema; el resto de los tokens nuevos
     (--destructive-fill, --on-destructive, --control-border) sirve igual en los
     dos temas y por eso vive solo en el bloque claro. */
  --error-tint: rgba(255, 69, 58, 0.28);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* Movimiento reducido. El bloque de arriba NO tiene una regla de
   `prefers-color-scheme`: el tema inicial del sistema se lee en `temaInicial()`
   (`assets/app.js`), que consulta la preferencia y deja el conmutador del usuario
   por encima. Aca solo vive lo que es CSS puro. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}