/* ==========================================================================
   Corporación ARAEL — Gestión Porcina
   css/variables.css
   ÚNICO lugar donde se definen los colores y medidas de la identidad visual.
   Para cambiar la paleta, edita solo la sección "1. PALETA BASE".

   El tema se controla con el atributo en <html>:
     <html data-tema="claro">   → modo claro
     <html data-tema="oscuro">  → modo nocturno
   Sin atributo, se usa la preferencia del sistema operativo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PALETA BASE (no cambia entre temas)
   -------------------------------------------------------------------------- */
:root {
  /* Azul corporativo (principal) */
  --azul-950: #04122e;
  --azul-900: #061a3d;
  --azul-800: #082455;
  --azul-700: #0b2f6b;
  --azul-600: #1246a0;
  --azul-500: #1f5fd1;
  --azul-400: #4a86f0;
  --azul-300: #8db3f6;
  --azul-100: #e6eefb;
  --azul-50:  #f2f6fd;

  /* Dorado metálico (solo acentos) */
  --dorado-300: #e6c766;
  --dorado-400: #d9b44a;
  --dorado-500: #c9a03a;
  --dorado-600: #a8812a;
  --dorado-700: #8a6a1c;
  --dorado-metalico: linear-gradient(135deg, #e6c766 0%, #c9a03a 50%, #a8812a 100%);

  /* Grises neutros */
  --gris-50:  #f5f7fa;
  --gris-100: #eef1f6;
  --gris-200: #dde2ea;
  --gris-300: #c3cad6;
  --gris-400: #98a3b8;
  --gris-500: #6b7589;
  --gris-700: #3a4254;
  --gris-900: #151a26;

  /* Negro azulado y gris oscuro (modo nocturno) */
  --noche-950: #070b14;
  --noche-900: #0a101c;
  --noche-800: #0d1424;
  --noche-700: #121a2e;
  --noche-600: #1a2440;
  --noche-500: #25304a;

  /* Medidas y tipografía (iguales en ambos temas) */
  --radio-sm: 6px;
  --radio-md: 10px;
  --radio-lg: 14px;
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-5: 24px;
  --espacio-6: 32px;
  --ancho-sidebar: 260px;
  --alto-topbar: 60px;
  --fuente: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --transicion: 180ms ease;
}

/* --------------------------------------------------------------------------
   2. TEMA CLARO (por defecto)
   -------------------------------------------------------------------------- */
:root,
:root[data-tema="claro"] {
  color-scheme: light;

  /* Superficies */
  --fondo-app:        var(--gris-50);
  --fondo-panel:      #ffffff;
  --fondo-tarjeta:    #ffffff;
  --fondo-elevado:    #ffffff;
  --fondo-hover:      var(--azul-50);

  /* Navegación (siempre azul corporativo) */
  --nav-fondo:        var(--azul-800);
  --nav-fondo-hover:  var(--azul-700);
  --nav-fondo-activo: var(--azul-600);
  --nav-texto:        #ffffff;
  --nav-texto-suave:  var(--azul-300);
  --nav-acento:       var(--dorado-400);

  /* Texto */
  --texto:            var(--gris-900);
  --texto-suave:      var(--gris-500);
  --texto-inverso:    #ffffff;
  --texto-acento:     var(--dorado-700);   /* dorado legible sobre blanco */

  /* Color principal y acento */
  --primario:         var(--azul-700);
  --primario-hover:   var(--azul-600);
  --primario-suave:   var(--azul-100);
  --acento:           var(--dorado-500);
  --acento-hover:     var(--dorado-600);
  --acento-suave:     #f8f0d8;

  /* Bordes y formularios */
  --borde:            var(--gris-200);
  --borde-fuerte:     var(--gris-300);
  --campo-fondo:      #ffffff;
  --campo-borde:      var(--gris-300);
  --campo-foco:       var(--azul-500);
  --campo-placeholder: var(--gris-400);

  /* Estados */
  --exito:            #1e8e5a;
  --exito-suave:      #e3f5ec;
  --advertencia:      #b7791f;
  --advertencia-suave:#fbf0dc;
  --peligro:          #c53030;
  --peligro-suave:    #fbe6e6;
  --info:             var(--azul-500);
  --info-suave:       var(--azul-100);

  /* Tablas */
  --tabla-encabezado: var(--gris-100);
  --tabla-fila-alt:   var(--gris-50);
  --tabla-fila-hover: var(--azul-50);

  /* Sombras */
  --sombra-sm: 0 1px 2px rgba(6, 26, 61, 0.06);
  --sombra-md: 0 4px 14px rgba(6, 26, 61, 0.08);
  --sombra-lg: 0 12px 32px rgba(6, 26, 61, 0.14);

  /* Gráficos (paleta corporativa) */
  --grafico-1: var(--azul-700);
  --grafico-2: var(--dorado-500);
  --grafico-3: var(--azul-400);
  --grafico-4: var(--gris-500);
  --grafico-5: var(--dorado-700);
  --grafico-6: var(--azul-300);
  --grafico-rejilla: var(--gris-200);
}

/* --------------------------------------------------------------------------
   3. TEMA NOCTURNO
   Se aplica si el atributo es "oscuro", o si no hay atributo y el sistema
   del usuario prefiere modo oscuro.
   -------------------------------------------------------------------------- */
:root[data-tema="oscuro"] {
  color-scheme: dark;

  --fondo-app:        var(--noche-950);
  --fondo-panel:      var(--noche-800);
  --fondo-tarjeta:    var(--noche-700);
  --fondo-elevado:    var(--noche-600);
  --fondo-hover:      var(--noche-600);

  --nav-fondo:        var(--azul-950);
  --nav-fondo-hover:  var(--azul-900);
  --nav-fondo-activo: var(--azul-800);
  --nav-texto:        #e8ecf4;
  --nav-texto-suave:  var(--gris-400);
  --nav-acento:       var(--dorado-400);

  --texto:            #e8ecf4;
  --texto-suave:      var(--gris-400);
  --texto-inverso:    var(--noche-950);
  --texto-acento:     var(--dorado-400);

  --primario:         var(--azul-500);
  --primario-hover:   var(--azul-400);
  --primario-suave:   rgba(74, 134, 240, 0.16);
  --acento:           var(--dorado-400);
  --acento-hover:     var(--dorado-300);
  --acento-suave:     rgba(217, 180, 74, 0.14);

  --borde:            var(--noche-500);
  --borde-fuerte:     #33415f;
  --campo-fondo:      var(--noche-800);
  --campo-borde:      #33415f;
  --campo-foco:       var(--azul-400);
  --campo-placeholder: var(--gris-500);

  --exito:            #3fbf86;
  --exito-suave:      rgba(63, 191, 134, 0.14);
  --advertencia:      #e0a63a;
  --advertencia-suave:rgba(224, 166, 58, 0.14);
  --peligro:          #f06a6a;
  --peligro-suave:    rgba(240, 106, 106, 0.14);
  --info:             var(--azul-400);
  --info-suave:       rgba(74, 134, 240, 0.16);

  --tabla-encabezado: var(--noche-600);
  --tabla-fila-alt:   var(--noche-800);
  --tabla-fila-hover: var(--noche-600);

  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  --sombra-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

  --grafico-1: var(--azul-400);
  --grafico-2: var(--dorado-400);
  --grafico-3: var(--azul-300);
  --grafico-4: var(--gris-400);
  --grafico-5: var(--dorado-600);
  --grafico-6: var(--azul-600);
  --grafico-rejilla: var(--noche-500);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    color-scheme: dark;

    --fondo-app:        var(--noche-950);
    --fondo-panel:      var(--noche-800);
    --fondo-tarjeta:    var(--noche-700);
    --fondo-elevado:    var(--noche-600);
    --fondo-hover:      var(--noche-600);

    --nav-fondo:        var(--azul-950);
    --nav-fondo-hover:  var(--azul-900);
    --nav-fondo-activo: var(--azul-800);
    --nav-texto:        #e8ecf4;
    --nav-texto-suave:  var(--gris-400);
    --nav-acento:       var(--dorado-400);

    --texto:            #e8ecf4;
    --texto-suave:      var(--gris-400);
    --texto-inverso:    var(--noche-950);
    --texto-acento:     var(--dorado-400);

    --primario:         var(--azul-500);
    --primario-hover:   var(--azul-400);
    --primario-suave:   rgba(74, 134, 240, 0.16);
    --acento:           var(--dorado-400);
    --acento-hover:     var(--dorado-300);
    --acento-suave:     rgba(217, 180, 74, 0.14);

    --borde:            var(--noche-500);
    --borde-fuerte:     #33415f;
    --campo-fondo:      var(--noche-800);
    --campo-borde:      #33415f;
    --campo-foco:       var(--azul-400);
    --campo-placeholder: var(--gris-500);

    --exito:            #3fbf86;
    --exito-suave:      rgba(63, 191, 134, 0.14);
    --advertencia:      #e0a63a;
    --advertencia-suave:rgba(224, 166, 58, 0.14);
    --peligro:          #f06a6a;
    --peligro-suave:    rgba(240, 106, 106, 0.14);
    --info:             var(--azul-400);
    --info-suave:       rgba(74, 134, 240, 0.16);

    --tabla-encabezado: var(--noche-600);
    --tabla-fila-alt:   var(--noche-800);
    --tabla-fila-hover: var(--noche-600);

    --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-md: 0 4px 14px rgba(0, 0, 0, 0.45);
    --sombra-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

    --grafico-1: var(--azul-400);
    --grafico-2: var(--dorado-400);
    --grafico-3: var(--azul-300);
    --grafico-4: var(--gris-400);
    --grafico-5: var(--dorado-600);
    --grafico-6: var(--azul-600);
    --grafico-rejilla: var(--noche-500);
  }
}