/*
 * tokens.css — Design system de GestiDeCA (OT-3)
 *
 * SOLO variables en :root. Es el ÚNICO fichero de public/assets/css/ donde puede
 * haber colores literales (#hex, rgb(), hsl()); bin/check_estilos.sh lo vigila.
 * Formato: una variable por línea, con su descripción en un comentario. La guía viva
 * (/{ADMIN_PATH}/estilos) lee este fichero: los grupos se marcan con "@grupo".
 * Contrastes: docs/DISENO.md (todos los pares texto/fondo cumplen WCAG AA).
 */
:root {
  /* @grupo Marca */
  --c-marca: #42A58D; /* Verde DeCA. Decorativo: franja, iconos, acentos. Nunca fondo de texto pequeño */
  --c-marca-rgb: 66, 165, 141; /* --c-marca en componentes RGB */
  --c-marca-fuerte: #2E8070; /* Botón primario y fondos con texto blanco encima (4,73:1) */
  --c-marca-fuerte-rgb: 46, 128, 112; /* --c-marca-fuerte en componentes RGB */
  --c-marca-fuerte-hover: #23685B; /* Botón primario al pasar el ratón */
  --c-marca-fuerte-activo: #1B5047; /* Botón primario pulsado */
  --c-marca-suave: #E3F2EE; /* Fondo suave de marca: elemento activo del menú, avisos de marca */
  --c-enlace: #276C5F; /* Enlaces de texto sobre cualquier fondo claro (>= 5,3:1) */
  --c-enlace-rgb: 39, 108, 95; /* --c-enlace en componentes RGB */
  --c-enlace-hover: #1B5047; /* Enlace al pasar el ratón */
  --c-enlace-hover-rgb: 27, 80, 71; /* --c-enlace-hover en componentes RGB */

  /* @grupo Plataforma (panel de admin) */
  --c-plataforma: #3949AB; /* Acento del panel de plataforma: nunca se confunde con un panel de cliente */
  --c-plataforma-oscuro: #2C3A8C; /* Barra superior del panel de plataforma (texto blanco) */
  --c-plataforma-suave: #E8EAF6; /* Elemento activo del menú del panel de plataforma */

  /* @grupo Neutros */
  --c-fondo: #F4F6F7; /* Fondo de página */
  --c-fondo-rgb: 244, 246, 247; /* --c-fondo en componentes RGB */
  --c-superficie: #FFFFFF; /* Tarjetas, barras, formularios */
  --c-superficie-rgb: 255, 255, 255; /* --c-superficie en componentes RGB */
  --c-superficie-alt: #EEF2F3; /* Cabecera de tablas, filas al pasar el ratón */
  --c-borde: #D3DADE; /* Separadores y bordes decorativos */
  --c-borde-control: #7B8790; /* Borde de campos y botones secundarios (>= 3:1, WCAG 1.4.11) */
  --c-texto: #1D2A31; /* Texto principal */
  --c-texto-rgb: 29, 42, 49; /* --c-texto en componentes RGB */
  --c-texto-suave: #52606A; /* Texto secundario: ayudas, pies, metadatos */
  --c-texto-suave-rgb: 82, 96, 106; /* --c-texto-suave en componentes RGB */
  --c-texto-inverso: #FFFFFF; /* Texto sobre fondos oscuros */
  --c-neutro: #3E4A52; /* Texto de estados neutros (borrador, cancelada) */
  --c-neutro-fondo: #E4E9EC; /* Fondo de estados neutros */
  --c-velo: rgba(29, 42, 49, 0.5); /* Fondo oscurecido detrás de modales y del menú móvil */

  /* @grupo Estados */
  --c-exito: #1B7342; /* Texto e iconos de éxito */
  --c-exito-rgb: 27, 115, 66; /* --c-exito en componentes RGB */
  --c-exito-fondo: #E6F4EC; /* Fondo de alertas y badges de éxito */
  --c-aviso: #7A4300; /* Texto e iconos de aviso */
  --c-aviso-rgb: 122, 67, 0; /* --c-aviso en componentes RGB */
  --c-aviso-fondo: #FFF3D6; /* Fondo de alertas y badges de aviso */
  --c-error: #B3261E; /* Texto, iconos y botón de peligro (texto blanco encima: 6,53:1) */
  --c-error-rgb: 179, 38, 30; /* --c-error en componentes RGB */
  --c-error-hover: #931F18; /* Botón de peligro al pasar el ratón */
  --c-error-fondo: #FCEBEA; /* Fondo de alertas y badges de error */
  --c-info: #1F5C99; /* Texto e iconos informativos */
  --c-info-rgb: 31, 92, 153; /* --c-info en componentes RGB */
  --c-info-fondo: #E7F0FA; /* Fondo de alertas y badges informativos */
  --c-foco: #1A5FB4; /* Contorno de foco del teclado (>= 3:1 sobre fondo y superficie) */
  --c-firma-tinta: #14203C; /* Trazo de la firma táctil (lo lee firma.js) */

  /* @grupo Semáforo */
  --c-semaforo-verde: #1B7342; /* Documento al día (texto blanco) */
  --c-semaforo-ambar: #F2B01E; /* Caduca en 30 días o menos (texto oscuro) */
  --c-semaforo-ambar-texto: #1D2A31; /* Texto sobre el ámbar */
  --c-semaforo-rojo: #B3261E; /* Documento vencido (texto blanco) */

  /* @grupo Ediciones */
  --c-lite: #5A6872; /* Badge de la edición LITE (texto blanco) */
  --c-pro: #5B3B9E; /* Badge de la edición PRO (texto blanco) */

  /* @grupo Tipografía */
  --f-familia: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif; /* Pila de sistema: sin descargas */
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Códigos, secretos, matrículas */
  --t-xs: 0.75rem; /* 12 px: notas mínimas (no para texto importante) */
  --t-sm: 0.875rem; /* 14 px: ayudas, pies, badges */
  --t-base: 1rem; /* 16 px: texto normal y campos (evita el zoom de iOS) */
  --t-lg: 1.125rem; /* 18 px: texto destacado */
  --t-xl: 1.25rem; /* 20 px: subtítulos, texto de cabina */
  --t-2xl: 1.5rem; /* 24 px: título de página en móvil */
  --t-3xl: 1.875rem; /* 30 px: título de página en escritorio */
  --t-4xl: 2.25rem; /* 36 px: cifras grandes de cabina */
  --p-normal: 400; /* Peso normal */
  --p-medio: 500; /* Peso medio */
  --p-semi: 600; /* Etiquetas, botones, menú */
  --p-negrita: 700; /* Títulos */
  --lh-ajustado: 1.2; /* Títulos */
  --lh-normal: 1.5; /* Texto */
  --lh-amplio: 1.7; /* Párrafos largos */

  /* @grupo Espaciado (escala de 4 px) */
  --e-0: 0; /* Sin espacio */
  --e-1: 0.25rem; /* 4 px */
  --e-2: 0.5rem; /* 8 px */
  --e-3: 0.75rem; /* 12 px */
  --e-4: 1rem; /* 16 px */
  --e-5: 1.25rem; /* 20 px */
  --e-6: 1.5rem; /* 24 px */
  --e-8: 2rem; /* 32 px */
  --e-10: 2.5rem; /* 40 px */
  --e-12: 3rem; /* 48 px */
  --e-16: 4rem; /* 64 px */

  /* @grupo Radios */
  --r-sm: 0.25rem; /* 4 px: badges */
  --r-md: 0.5rem; /* 8 px: botones y campos */
  --r-lg: 0.75rem; /* 12 px: tarjetas y modales */
  --r-pill: 50rem; /* Píldora */

  /* @grupo Bordes */
  --b-fino: 1px; /* Bordes normales */
  --b-grueso: 2px; /* Bordes de casillas del PIN y énfasis */
  --b-acento: 4px; /* Franja de marca y marca del menú activo */

  /* @grupo Sombras */
  --s-1: 0 1px 2px rgba(29, 42, 49, 0.08); /* Tarjetas */
  --s-2: 0 4px 12px rgba(29, 42, 49, 0.12); /* Elementos flotantes */
  --s-3: 0 12px 32px rgba(29, 42, 49, 0.18); /* Modales */

  /* @grupo Foco */
  --foco-ancho: 3px; /* Grosor del contorno de foco */
  --foco-separacion: 2px; /* Separación entre el elemento y el contorno */

  /* @grupo Capas (z-index) */
  --z-cabecera: 1030; /* Barra superior fija */
  --z-offcanvas: 1045; /* Menú lateral en móvil */
  --z-modal: 1055; /* Modales */
  --z-aviso: 1090; /* Avisos flotantes */

  /* @grupo Movimiento */
  --transicion: 150ms ease-in-out; /* Transiciones de color y sombra */

  /* @grupo Táctil */
  --tactil-min: 44px; /* Zona de toque mínima de cualquier control */
  --tactil-cabina: 64px; /* Zona de toque mínima en el modo conductor */

  /* @grupo Medidas de layout */
  --ancho-acceso: 26rem; /* Tarjeta de las pantallas de login */
  --ancho-lectura: 45rem; /* Ancho máximo de texto legible (página pública) */
  --ancho-contenido: 75rem; /* Ancho máximo del contenido de los paneles */
  --ancho-menu: 16rem; /* Menú lateral en escritorio */
  --alto-cabecera: 4rem; /* Barra superior */
  --alto-icono-vacio: 3rem; /* Icono de los estados vacíos */
  --casilla-pin: 3rem; /* Ancho de cada casilla del PIN */
  --casilla-pin-cabina: 3.25rem; /* Ancho de cada casilla del PIN en cabina */
  --icono-logo: 2rem; /* Logotipo en barras y login */
  --alto-firma: 13rem; /* Recuadro de la firma táctil con el móvil en vertical */
  --alto-firma-horizontal: 9rem; /* Recuadro de la firma táctil con el móvil en horizontal */
  --qr-ficha: 11rem; /* QR en la ficha del DeCA */
  --qr-pantalla: 30rem; /* QR a pantalla completa («Mostrar QR» de la cabina) */
  --alto-resultados: 18rem; /* Lista de resultados del selector con búsqueda */
}