/* ===========================================================================
   TOKENS.CSS — el único sistema de diseño de la plataforma.
   Diseño v1, sesión 15, 19/08/2026. Ver DISENO.md para el porqué de cada
   cosa y el catálogo de componentes que consume estos tokens.

   REGLA: los colores viven SOLO aquí. Cambiar de marca o repintar un
   semántico es cambiar líneas de este fichero, nunca buscar-y-reemplazar en
   media docena de CSS de módulo.

   Se carga desde CADA plantilla _marco.html (y desde base.html), siempre
   como la PRIMERA hoja de estilo — antes que estilo.css y que el CSS propio
   de cada módulo.

   FASE A (esta entrega): los valores de aquí son una fotografía exacta de
   lo que ya está pintado hoy en cada módulo — cargar este fichero no cambia
   ni un píxel todavía. Lo que cambia, fase a fase, es que cada CSS de
   módulo deja de llevar sus propios hexadecimales y empieza a leer estas
   variables (sección 8 del encargo). Hasta que le toque el turno a un
   módulo, sus ficheros .css de hoy siguen mandando donde definan lo mismo
   dos veces (la cascada last-wins ya lo garantiza sin que nadie se rompa).
   =========================================================================== */

:root {
  /* -------------------------------------------------------------------
     MARCA — extraída del logo real (estaticos/logos/caravana.jpg y
     caravana_icono.png, bajados de https://desguacecaravana.com el
     19/08/2026 porque no había ningún logo propio en estaticos/logos/
     todavía). #002060 es el azul marino dominante del logotipo
     "LA CARAVANA" — muestreado por conteo de píxeles directamente sobre
     el PNG del icono (fondo plano de la insignia, sin compresión JPEG de
     por medio, 36.6% de los píxeles de color), confirmado contra el
     wordmark JPEG (mismo azul, repartido en dos cubos vecinos por ruido
     de compresión que promedian a ~#002064). Decisión de Fran 20/08/2026
     tras comparar A) el azul de la web actual (#002362) y B) este azul
     del logo lado a lado en comparacion_color.html: elige B. NO es el
     mismo azul que la web pública usa de fondo en algunos títulos
     (#6ec1e4, un cian claro) — ese es un color de plantilla de
     Elementor/WordPress sin relación con el logo, se descarta.
     ------------------------------------------------------------------- */
  --marca:         #002060;
  --marca-suave:   #d7dce6; /* tinte claro del marca, para fondos/bordes discretos */
  --marca-fondo:   #eef0f4; /* fondo muy claro, tipo "seleccionado" */

  /* Alias de compatibilidad: el nombre --acero ya se usaba en panel.css
     para (casi) este mismo azul. Se mantiene apuntando a --marca durante
     la migración por fases -- panel.css sigue teniendo su propia
     definición de --acero hasta la fase D, y esa la pisa (cascada
     last-wins); en cuanto se retire de panel.css, este alias pasa a
     mandar sin tocar una plantilla. */
  --acero:         var(--marca);
  --acero-fondo:   var(--marca-fondo);
  --acero-linea:   var(--marca-suave);

  /* -------------------------------------------------------------------
     ACCIÓN — botón primario, enlaces, foco. Hasta el 29/09/2026 era el
     naranja #c8471f (hover #a83916). Decisión de Fran (29/09/2026, tras
     verlo pantalla por pantalla en una vista previa): toda la plataforma
     en AZUL, el azul acero del panel de Ventas. Marca (#002060) sigue
     siendo la identidad (cabecera, menú); acción = este azul. Los tintes
     de foco/selección que iban en rgba(200,71,31,x) pasan a
     rgba(29,78,124,x) en cada hoja. Ver DISENO.md sección 1.1.
     ------------------------------------------------------------------- */
  --acento:        #1d4e7c;
  --acento-hover:  #17405f;
  --acento-fondo:  #eef3f8;  /* tinte claro del azul de acción: fondo de los filtros */
  --acento-linea:  #cfdeeb;  /* borde de los filtros y del selector de periodo */

  /* -------------------------------------------------------------------
     TINTA Y NEUTROS (de estilo.css, sin cambios)
     ------------------------------------------------------------------- */
  --tinta:         #17181c;
  --tinta-suave:   #5c6069;
  --tinta-tenue:   #8d95a1; /* == --panel-tenue de panel.css */
  --linea:         #e2e4e8;
  --fondo:         #f6f7f9;
  --blanco:        #ffffff;

  /* -------------------------------------------------------------------
     SEMÁNTICOS — hoy repetidos con pequeñas variaciones en mecanico.css,
     embalaje.css, informes.css y panel.css (positivo/negativo cambian
     unos hex entre panel.css y el resto; ver la tabla de DISENO.md).
     Aquí se fija UN valor canónico, el que ya usa la mayoría de sitios
     (mecánico + embalaje + informes). panel.css se realinea en la fase D.
     Nunca solo color: cada estado semántico también lleva su propio
     icono/relleno/borde en los componentes de DISENO.md (daltonismo).
     ------------------------------------------------------------------- */
  --positivo:       #157347;
  --positivo-fondo: #e7f5ee;
  --positivo-linea: #bfe3cf;

  --negativo:       #b3261e;
  --negativo-fondo: #fbe9e8;
  --negativo-linea: #eec4bf;

  --aviso:          #8a5b00;
  --aviso-fondo:    #fdf6e6;
  --aviso-linea:    #eddcb4;

  --info:           #2f6fb3;
  --info-fondo:     #eef0f3;
  --info-linea:     #cfdeeb;

  /* Alias de error de estilo.css (login) -- mismo semántico "negativo",
     nombre distinto por historia. Se deja apuntando al canónico; el color
     visible en el login no cambia (--error-* de estilo.css sigue
     definiendo sus propios hex hasta que le toque fase). */
  --error-fondo:   var(--negativo-fondo);
  --error-borde:   var(--negativo-linea);
  --error-texto:   var(--negativo);

  /* -------------------------------------------------------------------
     TIPOGRAFÍA — pila de sistema, sin fuentes web (regla de la casa).
     ------------------------------------------------------------------- */
  --tipo-sistema: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --tipo-cifras:  ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;

  --texto-trabajo: 18px; /* tamaño mínimo de texto en pantallas de taller/embalaje */

  /* -------------------------------------------------------------------
     TAMAÑOS DE INTERACCIÓN
     ------------------------------------------------------------------- */
  --alto-boton:          44px; /* botones de gestión (informes, admin, ventas) */
  --alto-boton-trabajo:  56px; /* botones de taller/embalaje -- a una mano, sin apuntar */
  --alto-campo:          46px; /* inputs/selects de filtros y formularios de gestión */

  /* -------------------------------------------------------------------
     RADIOS Y ESPACIADO
     ------------------------------------------------------------------- */
  --radio-sm: 6px;   /* chips, badges */
  --radio-md: 10px;  /* botones, campos, tarjetas pequeñas */
  --radio-lg: 14px;  /* tarjetas grandes, paneles, bloques */
  --radio-pill: 20px; /* etiquetas redondeadas de estado */

  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-5: 24px;
  --espacio-6: 32px;

  /* -------------------------------------------------------------------
     ANCHOS DE CONTENEDOR
     ------------------------------------------------------------------- */
  --ancho-formulario: 860px;        /* fichas, formularios -- sin cambios */
  --ancho-tablas: min(1600px, 100%); /* pantallas de tabla en escritorio: informes, listados admin, tablero embalaje */

  /* -------------------------------------------------------------------
     MOVIMIENTO — transiciones cortas, nada que anime layout (presupuesto
     de rendimiento, sección 6 del encargo).
     ------------------------------------------------------------------- */
  --duracion-transicion: 150ms;
}

/* ===========================================================================
   BREAKPOINTS ÚNICOS DE TODA LA APP (documentados aquí, CSS custom
   properties no se pueden usar dentro de @media -- estos dos números son
   el contrato, cópialos literales donde haga falta un @media):

     720px  -- tablet / cambio de tabla a tarjeta-fila
     1024px -- escritorio / aparece el menú lateral del shell GESTIÓN

   Mobile-first: el CSS sin @media es el de móvil por defecto; los
   @media (min-width: ...) SOLO añaden, nunca quitan ni invierten.
   =========================================================================== */