/* =========================================================
 * Saona Agent Panel — Design Tokens
 * Sistema único: light / dark + escalas de spacing, radius,
 * shadow, motion y typography.
 *
 * Activación dark mode:
 *   <html data-theme="dark">  → forzado
 *   <html data-theme="light"> → forzado
 *   sin atributo o "system"   → respeta @media prefers-color-scheme
 * ========================================================= */

:root {
  /* ═══ LA MARCA SAONA (restyling, 2026-10-20) ══════════════════════════════
   *
   * La guía de diseño (`GUIA.md` + `tokens.json` del equipo de diseño, con el
   * visto bueno de Victor) manda sobre todo lo de aquí. Dos azules y un
   * crema; el ocre, SOLO para lo pendiente.
   *
   *   · azul Saona `#7A97AB`: el primario (botón principal, lo activo). Nunca
   *     es texto en claro (2,8:1 sobre crema); encima, siempre azul noche.
   *   · azul noche `#152B4E`: el texto en claro y el fondo en oscuro.
   *   · crema `#F7F4EF`: el fondo en claro y el texto en oscuro.
   *   · ocre `#E3A63F`: «sin leer», «Confirmar» y el borde de lo que espera
   *     una acción. Encima, siempre azul noche (6,6:1); nunca blanco.
   *
   * Los nombres de la guía (`--fondo`, `--superficie`, `--texto`…) son los de
   * verdad. Los `--color-*` de antes se quedan como alias para no reescribir
   * mil reglas, y apuntan aquí: cambiar un color de la marca es cambiarlo en
   * este bloque y en el de noche.
   */

  /* ── Los colores de la marca (oficiales) ── */
  --azul-saona: #7a97ab;
  --azul-noche: #152b4e;
  --crema:      #f7f4ef;
  --blanco:     #ffffff;
  --ocre:       #e3a63f;

  /* ── Los papeles (guía; los derivados están pendientes de visto bueno) ── */
  --fondo:                var(--crema);
  --superficie:           var(--blanco);
  --texto:                var(--azul-noche);
  --texto-secundario:     #4b5d78;
  --primario:             var(--azul-saona);
  --texto-sobre-primario: var(--azul-noche);
  --enlace:               #2f5873;
  --borde:                #d9e2e9;
  --borde-control:        #4b5d78;
  --aviso:                var(--ocre);
  --texto-sobre-aviso:    var(--azul-noche);

  /* Derivados de la casa para lo que la guía no nombra (PROPUESTA, pendiente
     de diseño): una superficie apagada para zonas y vías, el tinte suave del
     primario para lo elegido, y el primario para texto cuando el fondo es
     claro (el `enlace`, que sí pasa AA). */
  --superficie-suave:     #edf1f4;
  --primario-suave:       #e3eaf0;
  --primario-texto:       var(--enlace);
  --primario-hover:       #6b889c;
  /* El fondo de lo que toca a una franquicia (Tareas del equipo, 2026-11-06).
     Malva y no azul ni ocre: el azul suave ya es «lo elegido» y el ocre, «lo
     pendiente». AA medido: texto 11,6:1, secundario 5,5:1, rojo 6,2:1 y
     ámbar 5,8:1. */
  --tinte-franquicia:     #ece6f3;
  --sombra-tinta:         21 43 78;   /* azul noche en r g b, para las sombras */

  /* El menú lateral y la cabecera del móvil: azul noche con texto crema en
     los dos temas (guía). De noche, un punto más hondo que el fondo para que
     se siga viendo dónde acaba. */
  --menu-fondo:      var(--azul-noche);
  --menu-hover:      #1e3a64;
  --menu-borde:      #2c4a74;
  --menu-texto:      var(--crema);
  --menu-secundario: #a9bccb;

  /* Compatibilidad: el tono de lo que antes era «pizarra» y «papel», que aún
     usan algunas reglas con hsl(var(--pizarra-h) …). Ahora es el azul noche y
     el crema: lo que quede así sale en la familia de la marca, no en verde. */
  --pizarra-h: 217; --pizarra-s: 57%;
  --papel-h: 37;    --papel-s: 35%;
  --ambar-h: 37;    --ambar-s: 74%;
  --marca-h: 217;   --acento-h: 205; --acento-s: 22%;

  --brand-50:  #eef2f6;
  --brand-100: #dde5ee;
  --brand-200: #bccada;
  --brand-300: #8ea4bd;
  --brand-400: #5d7698;
  --brand-500: #3a5478;
  --brand-600: #253f66;
  --brand-700: var(--azul-noche);
  --brand-800: #0f2140;
  --brand-900: #0b1830;

  /* El «ámbar» de antes es el ocre de la marca, y su texto es azul noche.
     `--ambar-texto` era ámbar tostado para texto sobre papel: el ocre no se
     lee como texto (2,0:1 sobre crema), así que pasa a ser el tono de AVISO
     de estado (abajo), no el de lo pendiente. */
  --ambar:       var(--ocre);
  --ambar-texto: var(--color-warning-fg);
  --ambar-suave: var(--color-warning-soft);

  /* ── Superficies (alias) ── */
  --color-bg:               var(--fondo);
  --color-bg-elevated:      var(--superficie);
  --color-surface:          var(--superficie);
  --color-surface-strong:   var(--superficie);
  --color-surface-muted:    var(--superficie-suave);
  --color-fg:               var(--texto);
  --color-fg-secondary:     var(--texto-secundario);
  --color-fg-tertiary:      var(--texto-secundario);
  --color-fg-muted:         var(--texto-secundario);
  --color-fg-inverse:       var(--crema);
  --color-border:           var(--borde);
  --color-border-strong:    var(--borde-control);
  --color-border-soft:      var(--borde);

  /* `--color-accent` se usa sobre todo como COLOR DE TEXTO e icono (119
     reglas): por eso es el `enlace` y no el azul Saona, que como texto no
     pasa. El botón principal usa `--primario` directamente. */
  --color-accent:           var(--primario-texto);
  --color-accent-hover:     #24475e;
  --color-accent-soft:      var(--primario-suave);
  --color-accent-softer:    #f0f4f7;
  --color-accent-fg:        var(--crema);

  /* ── Estado ──
   * Mantienen su significado (Victor): rojo lo que quema, verde lo resuelto,
   * azul lo que informa, y un aviso de estado en ocre tostado. PROPUESTA
   * pendiente de diseño, con contraste AA medido en los dos temas (texto
   * `-fg` sobre su `-soft` y sobre la superficie). El ocre puro NO es un
   * estado: es lo pendiente (`--aviso`).
   */
  --color-success:          #2f6b56;
  --color-success-soft:     #e2efe9;
  --color-success-fg:       #245544;
  --color-warning:          #8f5f14;
  --color-warning-soft:     #faf0de;
  --color-warning-fg:       #7a5010;
  --color-danger:           #b3372d;
  --color-danger-soft:      #fbe8e5;
  --color-danger-fg:        #9a2c23;
  --color-info:             var(--enlace);
  --color-info-soft:        var(--primario-suave);
  --color-info-fg:          #2a4f68;

  --sla-safe:    var(--color-success);
  --sla-warn:    var(--color-warning);
  --sla-breach:  var(--color-danger);

  --mesh-1: transparent;
  --mesh-2: transparent;
  --mesh-3: transparent;
  --mesh-4: transparent;

  --accent-purple: var(--brand-600);
  --accent-teal:   var(--brand-500);

  /* ── Spacing (4px base) ── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  40px;
  --space-10: 48px;
  --space-12: 64px;

  /* ── Radius ── */
  /* La guía: 8 en campos y chips, 16 en tarjetas y burbujas, píldora en los
     botones. Los nombres de antes se quedan y caen en esos tres. */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 16px;
  --radius-2xl: 16px;
  --radius-3xl: 16px;
  --radius-pill: 999px;
  --radius-campo: 8px;
  --radius-tarjeta: 16px;

  /* ── Shadows ── */
  /* Sombras con matiz navy y un filo de luz en el borde superior: eso es lo
     que separa una tarjeta del papel sin que parezca pegada con photoshop. */
  /* Sombras en azul noche, cortas: las tarjetas van con borde (guía). */
  --shadow-1: 0 1px 2px rgb(var(--sombra-tinta) / 0.06);
  --shadow-2: 0 1px 2px rgb(var(--sombra-tinta) / 0.06), 0 6px 16px -6px rgb(var(--sombra-tinta) / 0.14);
  --shadow-3: 0 4px 12px rgb(var(--sombra-tinta) / 0.10), 0 20px 48px -16px rgb(var(--sombra-tinta) / 0.24);
  --shadow-glow: 0 0 0 3px rgb(122 151 171 / 0.35);
  --shadow-pop: 0 12px 40px -16px rgb(var(--sombra-tinta) / 0.45);

  /* ── Tipografía (guía) ──
   * Epicene Text SOLO en titulares (32/38 saludo, 24/30 título de pantalla,
   * 19/26 secciones y tarjetas), siempre a 400. ABC Social para todo lo demás:
   * Book 400 para leer y Medium 500 para lo que se pulsa. No hay más pesos:
   * los nombres viejos (`semibold`, `bold`, `black`) caen en Medium.
   *
   * Las dos son de pago y sus `.woff2` aún no están (`app/static/fonts/`, ver
   * fuentes.css): mientras, se ven con las de reserva de la guía, Georgia y
   * Helvetica Neue / Arial. Cuando lleguen, basta con copiarlos ahí.
   */
  --font-sans: "ABC Social", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Epicene Text", "Epicene Display", Georgia, "Times New Roman", serif;
  --font-serif: var(--font-display);
  /* Las referencias y las horas ya no van en monoespaciada (la guía: ABC
     Social para todo lo que no es titular). Se quedan alineadas con cifras
     tabulares donde se comparan. */
  --font-mono: var(--font-sans);
  --font-codigo: ui-monospace, "SF Mono", Menlo, monospace;
  /* La escala de la guía: leyenda 12, cuerpo pequeño y etiqueta 14, cuerpo y
     botón 16, subtítulo 19, título 24, saludo 32. Ninguna por debajo de 12. */
  --text-2xs: 12px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base: 16px;
  --text-md:  16px;
  --text-lg:  16px;
  --text-xl:  19px;
  --text-2xl: 24px;
  --text-3xl: 24px;
  --text-4xl: 32px;
  --leading-cuerpo: 24px;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 500;
  --weight-bold:     500;
  --weight-black:    500;
  --tracking-tight:  -0.01em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;

  /* ── Motion ── */
  --duration-fast:  120ms;
  --duration-base:  180ms;
  --duration-slow:  280ms;
  --duration-slower: 420ms;
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ── Z-index scale ── */
  --z-base:        1;
  --z-sticky:      10;
  --z-mobile-bar:  30;
  --z-backdrop:    40;
  --z-sidebar:     50;
  --z-modal:       60;
  --z-toast:       70;
  --z-tooltip:     80;
  --z-progress:    90;

  /* Sidebar size */
  --sidebar-width: 256px;

  /* ── Zona de toque ───────────────────────────────────────────────────────
   *
   * 44 px es el mínimo de la guía de Apple y de la de Material, y no es una
   * opinión de diseño: por debajo, la yema tapa el control y el dedo falla.
   * Media Saona entra por el móvil y muchos con guantes de cocina puestos.
   *
   * `--toque-raton` es el mínimo del ESCRITORIO para lo que no es un control
   * de formulario —el menú lateral, los chips, las pestañas—: allí apunta un
   * ratón, y 44 px en cada fila del menú echan las últimas entradas fuera de
   * la pantalla. Los `input`, los `select` y los botones de acción llevan los
   * 44 en los dos sitios: un ratón tampoco es preciso, y el que rellena un
   * formulario de alta lo hace con prisa.
   */
  --toque-min: 44px;
  --toque-raton: 40px;
}

/* ── Noche (forzada por el atributo) ──
 * La guía: superficie #1E3A64 y texto crema. El fondo, el mismo azul hondo
 * que la cabecera y el menú (Victor, 2026-10-20: el azul noche de fondo no
 * le gustaba); lo que separa la cabecera y el menú del contenido es el borde
 * `--menu-borde`. */
html[data-theme="dark"] {
  --fondo:                #0f2140;
  --superficie:           #1e3a64;
  --texto:                var(--crema);
  --texto-secundario:     #a9bccb;
  --primario:             var(--azul-saona);
  --texto-sobre-primario: var(--azul-noche);
  --enlace:               #a9bccb;
  --borde:                #2c4a74;
  --borde-control:        var(--azul-saona);
  --superficie-suave:     #172f54;
  --primario-suave:       #24476f;
  --primario-hover:       #8ca6b8;
  --tinte-franquicia:     #3a3566;   /* AA: crema 10,2:1, secundario 5,7:1, rojo 6,4:1, ámbar 7,1:1 */
  --sombra-tinta:         4 12 26;
  --menu-fondo:           #0f2140;
  --menu-borde:           #33547e;   /* la línea que separa menú y cabecera del fondo, que es del mismo azul */

  --color-fg-inverse:     var(--azul-noche);
  --color-accent:         var(--enlace);
  --color-accent-hover:   #c6d4df;
  --color-accent-softer:  #1b3760;
  --color-accent-fg:      var(--azul-noche);

  --brand-50:             #1a345a;
  --brand-100:            #24476f;
  --ambar-texto:          var(--color-warning-fg);
  --ambar-suave:          var(--color-warning-soft);

  --color-success:        #6fbf9c;
  --color-success-soft:   #1d4a4a;
  --color-success-fg:     #9fd8be;
  --color-warning:        #dcb069;
  --color-warning-soft:   #3f3a33;
  --color-warning-fg:     #f0c98a;
  --color-danger:         #f08a7e;
  --color-danger-soft:    #4a2f45;
  --color-danger-fg:      #f6b3aa;
  --color-info:           #a9bccb;
  --color-info-soft:      #24476f;
  --color-info-fg:        #c6d4df;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-3: 0 8px 28px rgba(0, 0, 0, 0.40);
  --shadow-glow: 0 0 0 3px rgb(122 151 171 / 0.45);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.50);
}

/* ── Noche automática (sin atributo o «sistema») ── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    --fondo:                #0f2140;
    --superficie:           #1e3a64;
    --texto:                var(--crema);
    --texto-secundario:     #a9bccb;
    --primario:             var(--azul-saona);
    --texto-sobre-primario: var(--azul-noche);
    --enlace:               #a9bccb;
    --borde:                #2c4a74;
    --borde-control:        var(--azul-saona);
    --superficie-suave:     #172f54;
    --primario-suave:       #24476f;
    --primario-hover:       #8ca6b8;
    --tinte-franquicia:     #3a3566;
    --sombra-tinta:         4 12 26;
    --menu-fondo:           #0f2140;
    --menu-borde:           #33547e;   /* la línea que separa menú y cabecera del fondo, que es del mismo azul */

    --color-fg-inverse:     var(--azul-noche);
    --color-accent:         var(--enlace);
    --color-accent-hover:   #c6d4df;
    --color-accent-softer:  #1b3760;
    --color-accent-fg:      var(--azul-noche);

    --brand-50:             #1a345a;
    --brand-100:            #24476f;
    --ambar-texto:          var(--color-warning-fg);
    --ambar-suave:          var(--color-warning-soft);

    --color-success:        #6fbf9c;
    --color-success-soft:   #1d4a4a;
    --color-success-fg:     #9fd8be;
    --color-warning:        #dcb069;
    --color-warning-soft:   #3f3a33;
    --color-warning-fg:     #f0c98a;
    --color-danger:         #f08a7e;
    --color-danger-soft:    #4a2f45;
    --color-danger-fg:      #f6b3aa;
    --color-info:           #a9bccb;
    --color-info-soft:      #24476f;
    --color-info-fg:        #c6d4df;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-2: 0 1px 3px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-3: 0 8px 28px rgba(0, 0, 0, 0.40);
    --shadow-glow: 0 0 0 3px rgb(122 151 171 / 0.45);
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.50);
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ═══ Movimiento ═══════════════════════════════════════════════════════════
 *
 * La regla: se mueve lo que aparece y lo que responde al dedo. Nada se mueve
 * solo, en bucle, ni pide atención sin motivo.
 */
:root {
  --curva-entrada: cubic-bezier(0.22, 1, 0.36, 1);   /* frena al llegar */
  --curva-suave:   cubic-bezier(0.4, 0, 0.2, 1);
  --entrada: 0.55s;
}

/* Entrada escalonada: las cosas suben un poco al aparecer, en orden. */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.aparece { animation: aparecer var(--entrada) var(--curva-entrada) both; }
.aparece-1 { animation-delay: 60ms; }
.aparece-2 { animation-delay: 120ms; }
.aparece-3 { animation-delay: 180ms; }
.aparece-4 { animation-delay: 240ms; }
.aparece-5 { animation-delay: 300ms; }

/* Las barras se pintan de izquierda a derecha en vez de estar ya pintadas.
   Es lo que convierte un dato en algo que ha pasado delante de ti. */
@keyframes pintar-barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Los trazos se dibujan. Mismo recurso que el latido de pulso. */
@keyframes dibujar-trazo { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .aparece { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}