/* Tokens del sistema visual — los de la especificación de la agencia.
 *
 * Los valores no son una interpretación: salen del prototipo que Agustina ya
 * aprobó (sección 12 del documento). El azul de marca, las dos tipografías,
 * las pills suaves y el modo oscuro son requisito funcional, no decoración.
 * Ya se rechazaron entregas que funcionaban perfecto por tener «estética de
 * sistema de hace 20 años», y el motivo no es capricho: una herramienta fea
 * no se usa, y una herramienta que no se usa no resuelve nada.
 *
 * **Una sola familia: Inter** (decisión de Agustina, 27/08/2026, comparando
 * seis combinaciones en pantalla). Reemplaza al par Sora + Inter del prototipo
 * original. El motivo: en una herramienta que se mira ocho horas por día, la
 * letra con personalidad cansa —se ve la tipografía antes que el dato—. Inter
 * es la de Linear y la más cercana a la de Apple, que es la referencia de la
 * casa. El código de pieza se distingue por tamaño y peso, no por familia.
 *
 * Se sirve desde nuestro servidor, nunca desde fonts.googleapis.com: la app
 * corre en red privada, no debe depender de internet ni filtrar tráfico del
 * equipo hacia afuera. Licencia y procedencia verificadas en
 * static/fuentes/LICENCIAS.md.
 */

@font-face {
  font-family: 'Inter';
  src: url("../fuentes/inter-variable.260c81a4759b.woff2") format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Sora y Outfit ya no se declaran: sin `@font-face` el navegador no los baja
 * aunque los archivos sigan en el disco. Se conservan en `static/fuentes/`
 * con su licencia por si alguna vez se vuelve atrás. */

:root {
  color-scheme: light dark;

  /* --- Marca ----------------------------------------------------------- *
   * El azul Napole. `--primary-text` es una variante apenas más oscura para
   * texto y enlaces, donde el de relleno no llega al contraste AA. */
  --primary:        #2B2BF2;
  --primary-hover:  #2222c9;
  --primary-text:   #2323cc;
  --primary-soft:   #ecebff;
  --secondary:      #6E6EFF;
  --accent:         #2B2BF2;

  /* --- Superficies ----------------------------------------------------- */
  --bg:             #f5f5f7;
  --surface:        #ffffff;
  --surface-alt:    #fafafc;
  --border:         #ececef;
  --border-strong:  #d8d8dd;

  /* --- Texto ----------------------------------------------------------- */
  --text:           #1d1d1f;
  --text-muted:     #86868b;
  --text-faint:     #a1a1a6;

  /* --- Estados: pills suaves ------------------------------------------- *
   * Fondo claro y texto saturado, nunca bloques de color plano. Un tablero
   * con doce estados en color pleno es ilegible a los tres segundos. */
  --ok:             #1f7a4d;
  --ok-bg:          #e3f5eb;
  --warn:           #bf6a00;
  --warn-bg:        #fff0d9;
  --danger:         #d70015;
  --danger-bg:      #ffe5e3;
  --edit:           #2323cc;
  --edit-bg:        #ecebff;
  --prog:           #6b3fce;
  --prog-bg:        #efe9fb;
  --blocked:        #86868b;
  --blocked-bg:     #f0f0f3;

  /* --- Semáforo de urgencia -------------------------------------------- */
  --urgente-vencido: #ff453a;
  --urgente-hoy:     #ff9f0a;
  --urgente-en-fecha:#e0e0e5;

  /* Los tintes de fila. Tiñen, no pintan: la fila tiene que seguir leyéndose
   * como fila y el color solo dice a qué montón pertenece. */
  --tinte-vencido: rgba(255, 69, 58, .07);
  --tinte-hoy:     rgba(255, 159, 10, .09);
  --tinte-cliente: rgba(215, 106, 0, .05);

  /* --- Tipo de pieza ---------------------------------------------------- *
   * Un color por letra, para reconocerla en la parrilla sin leer. */
  --tipo-reel:      #1d1d1f;
  --tipo-carrusel:  var(--primary);
  --tipo-historia:  #30b06e;

  /* Los tokens de arriba se nombraron como se habla; la base de datos guarda
     los códigos `estatico` y `story`. El alias evita tener que traducir el
     código a mano en cada template. */
  --tipo-estatico:  var(--tipo-carrusel);
  --tipo-story:     var(--tipo-historia);

  /* --- Geometría ------------------------------------------------------- */
  --radius:         16px;
  --radius-sm:      8px;

  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  /* El escalón de 20px faltaba y su ausencia rompía en silencio: `padding:
     var(--space-5)` con el token inexistente hace que el navegador descarte la
     declaración entera, y la tarjeta queda sin aire sin que nada avise. */
  --space-5:        20px;
  --space-6:        24px;
  --space-8:        32px;
  --space-12:       48px;

  /* Radio de las tarjetas grandes: portada, avisos y cuentas. */
  --radio-tarjeta:  16px;

  /* --- Tipografía ------------------------------------------------------ */
  /* Una sola familia para todo el sistema (decisión de Agustina, 27/08/2026).
   *
   * Antes eran dos: Sora para títulos y códigos, Inter para la interfaz. Sora
   * es geométrica y ancha, y en una herramienta que se mira ocho horas por día
   * la letra con personalidad cansa: se ve la tipografía antes que el dato.
   * Inter es la de Linear y la más cercana a la de Apple, que es la referencia
   * de la casa.
   *
   * El título y el código igual se distinguen: por tamaño, peso y espaciado
   * —ver `.codigo-pieza` abajo—, que es más barato que una segunda familia y
   * no obliga a bajar otro archivo. */
  --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-titulos: 'Inter', system-ui, -apple-system, sans-serif;

  --texto-titulo:   24px;
  --texto-seccion:  18px;
  --texto-cuerpo:   15px;
  /* Base 13 px: es la densidad que pide una tabla de noventa piezas. */
  --texto-fila:     13px;
  --texto-etiqueta: 12px;

  /* --- Elevación ------------------------------------------------------- */
  --sombra-sm: 0 1px 2px rgba(29, 29, 31, .06);
  --sombra:    0 4px 12px rgba(29, 29, 31, .08);
  --sombra-lg: 0 12px 32px rgba(29, 29, 31, .14);

  --foco: 0 0 0 3px rgba(43, 43, 242, .35);

  /* Un color por estado del canon. Estaban repetidos a mano en cada componente
     (el punto, el chip del calendario, la pastilla de la tarjeta) y se iban
     desincronizando: el mismo estado salía violeta en un lado y gris en otro. */
  --estado-no_iniciado:    #b0b0b8;
  --estado-planificado:    #7a7aff;
  --estado-guionado:       #5a5aff;
  --estado-grabado:        #30b06e;
  --estado-modificar:      #bf6a00;
  --estado-edicion:        #2B2BF2;
  --estado-disenado:       #b06ece;
  --estado-enviar_cliente: #e08a2c;
  --estado-enviado_cliente:#d76a00;
  --estado-aprobado:       #1f7a4d;
  --estado-programado:     #6b3fce;
  --estado-publicado:      #1d1d1f;
  --estado-sin_publicar:   #d70015;

}

/* --------------------------------------------------------------------------
 * Modo oscuro
 *
 * Obligatorio, no opcional. Media parte del equipo trabaja de noche y la
 * dirección revisa desde el celular en la cama; una pantalla blanca a esa
 * hora es motivo real para no abrir la app.
 *
 * Sigue la preferencia del sistema y se puede forzar con `data-tema` en el
 * <html>, para quien quiera lo contrario de lo que dice su sistema
 * operativo.
 * ------------------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    --primary:        #6E6EFF;
    --primary-hover:  #8484ff;
    --primary-text:   #9d9dff;
    --primary-soft:   #22233a;
    --secondary:      #6E6EFF;
    --accent:         #6E6EFF;

    --bg:             #0f1012;
    --surface:        #1b1c1f;
    --surface-alt:    #232428;
    --border:         #2a2b30;
    --border-strong:  #3a3b42;

    --text:           #f4f5f7;
    --text-muted:     #9a9ba2;
    --text-faint:     #7c7d85;

    --ok:             #5fd39b;
    --ok-bg:          #12301f;
    --warn:           #f0a94a;
    --warn-bg:        #33230c;
    --danger:         #ff6b63;
    --danger-bg:      #3a1512;
    --edit:           #9d9dff;
    --edit-bg:        #22233a;
    --prog:           #b79bf0;
    --prog-bg:        #241c38;
    --blocked:        #9a9ba2;
    --blocked-bg:     #24252a;

    --urgente-en-fecha: #3a3b42;
    --tinte-vencido: rgba(255, 107, 99, .10);
    --tinte-hoy:     rgba(240, 169, 74, .10);
    --tinte-cliente: rgba(240, 169, 74, .05);

    --tipo-reel:      #f4f5f7;

    --sombra-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra:    0 4px 12px rgba(0, 0, 0, .45);
    --sombra-lg: 0 12px 32px rgba(0, 0, 0, .55);

    --foco: 0 0 0 3px rgba(110, 110, 255, .45);
  }
}

/* Forzado a oscuro desde la interfaz, ignorando el sistema. */
:root[data-tema='oscuro'] {
  --primary:        #6E6EFF;
  --primary-hover:  #8484ff;
  --primary-text:   #9d9dff;
  --primary-soft:   #22233a;
  --secondary:      #6E6EFF;
  --accent:         #6E6EFF;

  --bg:             #0f1012;
  --surface:        #1b1c1f;
  --surface-alt:    #232428;
  --border:         #2a2b30;
  --border-strong:  #3a3b42;

  --text:           #f4f5f7;
  --text-muted:     #9a9ba2;
  --text-faint:     #7c7d85;

  --ok:             #5fd39b;
  --ok-bg:          #12301f;
  --warn:           #f0a94a;
  --warn-bg:        #33230c;
  --danger:         #ff6b63;
  --danger-bg:      #3a1512;
  --edit:           #9d9dff;
  --edit-bg:        #22233a;
  --prog:           #b79bf0;
  --prog-bg:        #241c38;
  --blocked:        #9a9ba2;
  --blocked-bg:     #24252a;

  --urgente-en-fecha: #3a3b42;
  --tinte-vencido: rgba(255, 107, 99, .10);
  --tinte-hoy:     rgba(240, 169, 74, .10);
  --tinte-cliente: rgba(240, 169, 74, .05);
  --tipo-reel:      #f4f5f7;

  --sombra-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra:    0 4px 12px rgba(0, 0, 0, .45);
  --sombra-lg: 0 12px 32px rgba(0, 0, 0, .55);

  --foco: 0 0 0 3px rgba(110, 110, 255, .45);
}

/* Títulos, códigos y números. Se declara acá y no en cada componente para que
 * ninguna pantalla nueva se olvide. */
h1, h2, h3,
.codigo-pieza,
.numero {
  font-family: var(--fuente-titulos);
  letter-spacing: -.015em;
}

/* El código es la llave con la que habla el equipo —«¿cómo viene la R0091?»—
 * así que tiene que encontrarse antes que el resto de la fila. Con una sola
 * familia eso se consigue con tres cosas:
 *
 *   - un punto más grande que el texto de la fila, para que sobresalga;
 *   - más peso, sin llegar a negrita, que ensuciaría una columna entera;
 *   - cifras tabulares, que es lo que hace que noventa códigos se alineen en
 *     columna en vez de bailar.
 *
 * Va con `em` y no con píxeles fijos: en la parrilla y en el calendario la
 * fila es más chica, y el código tiene que achicarse con ella. */
.codigo-pieza {
  font-variant-numeric: tabular-nums;
  font-size: 1.12em;
  font-weight: 640;
  letter-spacing: -.02em;
}