/* ==========================================================================
   VARIABLES.CSS
   --------------------------------------------------------------------------
   Aquí guardamos TODOS los colores, fuentes y medidas del proyecto en forma
   de "variables CSS" (también llamadas "custom properties" o "design
   tokens"). Es el ÚNICO archivo que debe tocarse para cambiar la marca.

   REGLA DE ORO DEL PROYECTO: ningún otro archivo (.css, .js o .html) debe
   escribir un color directamente (por ejemplo "#E20A13"). Todos los demás
   archivos usan var(--nombre-de-la-variable). Así, si el color de marca
   cambia otra vez en el futuro, se edita en un solo lugar y toda la
   aplicación se actualiza sola — nadie tiene que ir componente por
   componente buscando colores sueltos.
   ========================================================================== */

:root {

  /* ============================================================
     1. IDENTIDAD VISUAL CORPORATIVA (oficial, definida por SB Talee)
     ------------------------------------------------------------
     Estas 4 variables son la fuente de verdad de la marca. TODO lo
     demás en este archivo (colores de botones, fondos, textos, etc.)
     se construye A PARTIR de estas 4 — nunca se inventa un color
     nuevo por fuera de ellas.
     ============================================================ */
  --color-primary: #91281F;
  --color-secondary: #E20A13;
  --color-gray: #929191;
  --color-white: #FFFFFF;

  /* ============================================================
     2. ROLES DE COLOR (qué variable de marca usa cada parte de la UI)
     ------------------------------------------------------------
     Esta capa "traduce" los 4 colores de marca a roles concretos de
     la interfaz (botón principal, fondo del menú, texto secundario,
     etc.). Si en el futuro el rol de un color cambia (por ejemplo,
     que los botones pasen a usar el secundario en vez del primario),
     solo se edita AQUÍ, no en los componentes.
     ============================================================ */
  --color-primario: var(--color-primary);           /* Botones principales, sidebar, acentos de marca */
  --color-primario-oscuro: #6E1E17;                  /* Variante oscura del primario, para hover/activo (mismo tono, más oscuro) */
  --color-secundario: var(--color-secondary);        /* Acciones destacadas, enlaces activos, alertas críticas */
  --color-advertencia: #D98E04;                      /* Ámbar: alerta de nivel medio (color FUNCIONAL universal, no de marca) */
  --color-critico: var(--color-secondary);           /* Alertas críticas reutilizan el rojo secundario de marca */
  --color-exito: #3B8B5A;                            /* Verde: estado positivo (color FUNCIONAL universal, no de marca) */
  --color-naranja: #E27C00;                          /* Naranja: nivel de alerta intermedio entre advertencia y crítico (color FUNCIONAL universal, no de marca) */

  /* ---------- COLORES DE ESTADO DEL MAPA PRODUCTIVO ---------- */
  /* Estos 4 son colores de ESTADO tipo semáforo (universales, no de
     marca), definidos por el documento del proyecto. El único que sí
     coincide con la marca es "mantenimiento", que reutiliza el rojo
     secundario en vez de inventar un rojo nuevo. */
  --estado-disponible: #2196F3;       /* Azul    = Disponible            */
  --estado-produccion: #4CAF50;       /* Verde   = En producción         */
  --estado-proximo: #FFC107;          /* Amarillo= Próximo a recolección */
  --estado-mantenimiento: var(--color-secondary); /* Rojo = Mantenimiento */

  /* ---------- FONDOS Y SUPERFICIES ---------- */
  --fondo-general: #FBF6F5;             /* Fondo de toda la página: tinte cálido sutil derivado del rojo de marca (--color-primary), no gris neutro */
  --fondo-tarjeta: var(--color-white);  /* Fondo de tarjetas KPI y paneles */
  --fondo-sidebar: var(--color-primary); /* Fondo del menú lateral: color primario de marca */

  /* ---------- TEXTOS ---------- */
  --texto-principal: #262626;           /* Texto oscuro para títulos y contenido principal */
  --texto-secundario: var(--color-gray); /* Gris de marca: descripciones, textos de apoyo */
  --texto-claro: var(--color-white);    /* Texto blanco, para usar sobre fondos oscuros */

  /* ---------- BORDES Y SOMBRAS ---------- */
  --borde-suave: #E5E5E5;
  --radio-borde: 10px;                       /* Redondeo estándar de tarjetas */
  --sombra-tarjeta: 0 1px 3px rgba(0,0,0,0.08);

  /* ---------- COLORES DE APOYO PARA COMPONENTES (derivados) ---------- */
  /* En vez de escribir un color suelto en cada componente (tablas,
     tooltips, tarjetas de estado), lo centralizamos aquí una sola vez
     y cada componente referencia estas variables. */
  --superficie-clara: #F1F1F1;              /* Fondo neutro claro (etiquetas inactivas, permisos apagados) */
  --superficie-info-clara: #E3F2FD;         /* Fondo claro para etiquetas de estado "disponible" (azul) */
  --superficie-exito-clara: #E8F5E9;        /* Fondo claro para etiquetas de éxito/activo */
  --superficie-advertencia-clara: #FFF8E1;  /* Fondo claro para avisos de solo lectura */
  --texto-advertencia: #8A6D00;             /* Texto sobre fondo de advertencia clara */
  --superficie-error-clara: #FCEBEB;        /* Fondo claro para mensajes de error */
  --superficie-naranja-clara: #FDECD8;      /* Fondo claro para etiquetas de estado naranja (vigencia excedida) */
  --color-secundario-claro: #F1A3AC;        /* Tono claro del rojo secundario, para diferenciar series en gráficos */
  --color-primario-tinte-hover: rgba(145, 40, 31, 0.08); /* Tinte muy sutil del primario, solo para estados hover */
  --linea-grafico-suave: #EEF0EA;           /* Líneas de cuadrícula en los gráficos de Chart.js */
  --texto-desactivado: #C0C0C0;             /* Texto de acciones no permitidas (matriz de permisos) */

  /* ============================================================
     ACENTOS DE IDENTIDAD POR MÓDULO (NO son colores corporativos)
     ------------------------------------------------------------
     El rojo de marca (--color-primary/--color-secondary) sigue
     siendo el único color en botones, pestaña activa y sidebar en
     TODA la aplicación — eso no cambia en ningún módulo.

     Estos 2 acentos son una capa aparte, puramente decorativa, para
     que Módulo Núcleos (cultivo/vivero) y Cuarto Frío (cadena de
     frío) se sientan como 2 ambientes distintos al navegar entre
     ellos. Se usan SOLO en detalles como íconos de sección y bordes
     decorativos — nunca en botones ni en nada que dé una acción.
     ============================================================ */
  --acento-nucleos: #4B6043;         /* Verde tierra apagado: cultivo, vivero */
  --acento-nucleos-claro: #EDF1E9;   /* Tinte muy claro, para fondos de badges */
  --acento-cuartofrio: #2E5266;      /* Azul acero frío: cadena de frío */
  --acento-cuartofrio-claro: #EAF2F6; /* Tinte muy claro, para fondos de badges */

  /* Terminal PWA (frontend/movil/) — mismo criterio: decorativo, nunca en
     botones. "Sin Raíz" cruza Núcleos+Cuarto Frío y "Con Raíz" es
     Enraizamiento, así que no reutilizan los 2 acentos de arriba. */
  --acento-sinraiz: #8A6D2E;         /* Ámbar tierra: cosecha/almacenamiento en cuarto frío */
  --acento-sinraiz-claro: #F5EFE1;
  --acento-conraiz: #2E7D4F;         /* Verde raíz: todo el ciclo de Enraizamiento */
  --acento-conraiz-claro: #E7F3EC;

  /* ---------- TIPOGRAFÍA ---------- */
  /* "Space Grotesk" para títulos y números grandes: da un look técnico/moderno */
  --fuente-titulos: 'Space Grotesk', sans-serif;
  /* "Inter" para texto normal y tablas: muy legible en pantallas con datos */
  --fuente-texto: 'Inter', sans-serif;

  /* ---------- MEDIDAS DE LAYOUT ---------- */
  --ancho-sidebar: 240px;
  --ancho-sidebar-colapsado: 72px;
  --alto-topbar: 64px;
  --espaciado-md: 16px;
  --espaciado-lg: 24px;
}