/* ============================================================
   variables.css — Lokal
   Tokens de diseño: colores, sombras y temas
   ============================================================ */

/* ── TEMA BASE (verde / bosque) ── */
:root {
  --verde:        #1B4332;
  --verde-claro:  #2D6A4F;
  --tierra:       #52B788;
  --crema:        #F5E6C8;
  --crema-oscura: #E8D5A3;
  --cafe:         #2C1A00;
  --blanco:       #FDF6E3;
  --gris:         #6B7280;
  --sombra:       0 4px 24px rgba(27, 67, 50, 0.15);
  --tarjeta:      #ffffff;
}

/* ── TEMA: Petróleo ── */
[data-tema="petroleo"] {
  --verde:        #0A4D5C;
  --verde-claro:  #0E6D82;
  --tierra:       #00B4D8;
  --crema:        #E8F7FA;
  --crema-oscura: #CCEdf5;
  --cafe:         #0A2D38;
  --blanco:       #F4FBFD;
  --gris:         #4A7A8A;
  --sombra:       0 4px 24px rgba(10, 77, 92, 0.15);
  --tarjeta:      #ffffff;
}

/* ── TEMA: Pizarra ── */
[data-tema="pizarra"] {
  --verde:        #1A4A44;
  --verde-claro:  #22635C;
  --tierra:       #2AB5A8;
  --crema:        #E8FAF8;
  --crema-oscura: #C6EEEB;
  --cafe:         #0D2926;
  --blanco:       #F3FDFC;
  --gris:         #4A7A75;
  --sombra:       0 4px 24px rgba(26, 74, 68, 0.15);
  --tarjeta:      #ffffff;
}

/* ── TEMA: Cobalto ── */
[data-tema="cobalto"] {
  --verde:        #1A2E7A;
  --verde-claro:  #253DA0;
  --tierra:       #4C6EF5;
  --crema:        #EEF2FF;
  --crema-oscura: #D5DCFF;
  --cafe:         #0D1A4A;
  --blanco:       #F5F7FF;
  --gris:         #5A6AB5;
  --sombra:       0 4px 24px rgba(26, 46, 122, 0.15);
  --tarjeta:      #ffffff;
}

/* ── TEMA: Bosque Oscuro ── */
[data-tema="bosque-oscuro"] {
  --verde:        #0F2419;
  --verde-claro:  #639922;
  --tierra:       #97C459;
  --crema:        #EAF3DE;
  --crema-oscura: #D0E8BB;
  --cafe:         #0A1A0D;
  --blanco:       #F4FBED;
  --gris:         #5A7A4A;
  --sombra:       0 4px 24px rgba(15, 36, 25, 0.18);
  --tarjeta:      #ffffff;
}

/* ── TEMA: Casi Negro (Modo Noche) ── */
[data-tema="casi-negro"] {
  --verde:        #0B131F;          /* Header y secciones oscuras */
  --verde-claro:  #1E293B;          /* Paneles intermedios: slate-800 */
  --tierra:       #38BDF8;          /* Azul cielo brillante para acentos */
  --crema:        #1E293B;          /* Fondos de inputs/selects: slate-800 */
  --crema-oscura: #334155;          /* Bordes y hovers: slate-700 */
  --cafe:         #F1F5F9;          /* Texto principal claro: slate-100 */
  --blanco:       #0F172A;          /* Fondo del body: slate-900 */
  --gris:         #94A3B8;          /* Texto secundario/deshabilitado: slate-400 */
  --sombra:       0 10px 30px rgba(0, 0, 0, 0.4);
  --tarjeta:      #1E293B;          /* Fondo de tarjetas y modales: slate-800 */
}

/* Ajuste de logo/hero para tema casi-negro */
[data-tema="casi-negro"] .logo span,
[data-tema="casi-negro"] .hero h1 em,
[data-tema="casi-negro"] .admin-logo span {
  color: #74C69D;
}