/* ============================================================================
   TEMAS — Gestión Gama
   ----------------------------------------------------------------------------
   Este archivo define TODAS las variables de color del sistema, en sus dos
   temas: oscuro (por defecto) y claro. Ninguna otra hoja de estilos debe
   declarar colores literales; todas deben consumir estas variables.

   El tema activo se controla con el atributo data-tema del elemento <html>:
       <html data-tema="oscuro">   → tema oscuro (por defecto)
       <html data-tema="claro">    → tema claro

   Se carga desde base.html, antes que cualquier otra hoja, para que esté
   disponible en todas las pantallas y también en el fondo global.

   Requisito asociado: RNF-10 (interfaz con modo oscuro activable).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   TEMA OSCURO (por defecto)

   Se declara en :root además de en [data-tema="oscuro"] para que los colores
   funcionen incluso si el atributo data-tema falta por algún motivo.
   --------------------------------------------------------------------------- */
:root,
[data-tema="oscuro"] {
   /* ---- Fondo general de la página ---- */
   --pagina-bg: #050505;

   /* ---- Tarjeta / contenedor de formularios ---- */
   --card-bg: linear-gradient(145deg, #0f0f0f 0%, #080808 50%, #0a0a0a 100%);
   --card-border: rgba(212, 168, 75, 0.15);
   --card-sombra: 0 30px 80px -20px rgba(0, 0, 0, 0.8);

   /* ---- Color de acento (dorado) ----
   Se usa en bordes de foco, iconos activos, enlaces y títulos. */
   --acento: #d4a84b;
   --acento-rgb: 212, 168, 75;
   --acento-oscuro: #b8922f;

   /* ---- Botón principal ----
   En oscuro el botón es dorado con texto negro. */
   --btn-bg: linear-gradient(135deg, #d4a84b 0%, #b8922f 100%);
   --btn-texto: #000000;
   --btn-sombra-hover: 0 10px 30px rgba(212, 168, 75, 0.4);

   /* ---- Título con degradado ---- */
   --titulo-desde: #ffffff;
   --titulo-hasta: #999999;

   /* ---- Campos de entrada ---- */
   --input-bg: linear-gradient(135deg, rgba(10, 22, 40, 0.8) 0%, rgba(7, 18, 34, 0.9) 100%);
   --input-border: #1a2d47;
   --input-border-hover: #2a4a70;
   --input-texto: #ffffff;
   --input-placeholder: #3a4a5a;

   /* ---- Cuadro del icono dentro de cada campo ---- */
   --icono-bg: linear-gradient(135deg, rgba(30, 58, 95, 0.7) 0%, rgba(20, 40, 70, 0.5) 100%);
   --icono-bg-activo: #0a0a0a;
   --icono-border: rgba(74, 158, 255, 0.2);
   --icono-color: #00d4ff;

   /* ---- Textos secundarios (labels, ayudas, separadores) ---- */
   --texto-secundario: #6b7280;

   /* ---- Líneas divisorias ---- */
   --linea: rgba(255, 255, 255, 0.1);

   /* ---- Iconos de proveedores externos (Google) ---- */
   --icono-social: #ffffff;

   /* ---- Mensajes de error ---- */
   --error-texto: #ff9b9b;
   --error-bg: rgba(255, 80, 80, 0.08);
   --error-border: rgba(255, 80, 80, 0.35);

   /* ---- Mensajes de éxito ---- */
   --exito-texto: #4ade80;
   --exito-bg: rgba(74, 222, 128, 0.08);
   --exito-border: rgba(74, 222, 128, 0.45);

   /* ---- Fondo global animado ---- */
   --fondo-base: #050505;
   --fondo-vineta: #000000;
   --fondo-grilla-primaria: rgba(3, 233, 244, 0.1);
   --fondo-grilla-secundaria: rgba(217, 3, 244, 0.05);

   /* ---- Sidebar ---- */
   --sidebar-ancho: 230px;
   --sidebar-ancho-min: 62px;

   /* ---- Acciones de tabla ---- */
   --accion-editar: #4a9eff;
   --accion-editar-borde: rgba(74, 158, 255, 0.45);
   --accion-editar-fondo: rgba(74, 158, 255, 0.12);
   --accion-eliminar: #ff5c5c;
   --accion-eliminar-borde: rgba(255, 92, 92, 0.45);
   --accion-eliminar-fondo: rgba(255, 92, 92, 0.12);

   /* ---- Pantalla de carga ---- */
   --cargando-fondo: rgba(5, 5, 5, 0.82);
   /* Color plano de la tarjeta. Hace falta aparte de --card-bg porque la
   ranura del tornillo se dibuja en SVG, y los degradados no sirven ahí. */
   --card-bg-solido: #0a0a0a;

   /* ---- Notificaciones ---- */
   --notif-aviso: #a855f7;

   --modal-fondo: rgba(5, 5, 5, 0.7);

   --accion-fraccionar: #d4a84b;
   --accion-fraccionar-borde: rgba(212, 168, 75, 0.45);
   --accion-fraccionar-fondo: rgba(212, 168, 75, 0.12);

   --estado-exitosa: #4ade80;

   --accion-activar: #4ade80;
   --accion-activar-borde: rgba(74, 222, 128, 0.4);
   --accion-activar-fondo: rgba(74, 222, 128, 0.12);

   --tag-empaquetado: #00d4ff;
   --tag-fraccionado: #d4a84b;
}

/* ---------------------------------------------------------------------------
   TEMA CLARO

   Mismo diseño, colores adaptados. Dos ajustes que no son una simple
   inversión y vale la pena entender:

   1. El dorado #d4a84b es prácticamente ilegible sobre fondo claro, así que
      el acento pasa a un bronce oscuro (#8a5e14). Mantiene la misma familia
      cromática pero con contraste suficiente.

   2. Como el botón pasa a ser bronce oscuro, su texto cambia de negro a
      blanco. Por eso --btn-texto es una variable y no un valor fijo.
   --------------------------------------------------------------------------- */
[data-tema="claro"] {
   --pagina-bg: #f4f1ea;

   --card-bg: linear-gradient(145deg, #ffffff 0%, #f8f6f1 50%, #fcfbf8 100%);
   --card-border: rgba(138, 94, 20, 0.25);
   --card-sombra: 0 30px 80px -20px rgba(0, 0, 0, 0.18);

   --acento: #8a5e14;
   --acento-rgb: 138, 94, 20;
   --acento-oscuro: #6d4a10;

   --btn-bg: linear-gradient(135deg, #8a5e14 0%, #6d4a10 100%);
   --btn-texto: #ffffff;
   --btn-sombra-hover: 0 10px 30px rgba(138, 94, 20, 0.35);

   --titulo-desde: #2b2b2b;
   --titulo-hasta: #7a7a7a;

   --input-bg: linear-gradient(135deg, rgba(232, 238, 245, 0.9) 0%, rgba(220, 229, 240, 0.95) 100%);
   --input-border: #c3cfdd;
   --input-border-hover: #9fb3c8;
   --input-texto: #1f2937;
   --input-placeholder: #94a3b8;

   --icono-bg: linear-gradient(135deg, rgba(206, 222, 240, 0.9) 0%, rgba(192, 212, 234, 0.7) 100%);
   --icono-bg-activo: #ffffff;
   --icono-border: rgba(74, 158, 255, 0.35);
   --icono-color: #0b6b85;

   --texto-secundario: #64748b;

   --linea: rgba(0, 0, 0, 0.12);

   --icono-social: #334155;

   --error-texto: #8f1d1d;
   --error-bg: rgba(180, 30, 30, 0.07);
   --error-border: rgba(180, 30, 30, 0.3);

   --exito-texto: #16803d;
   --exito-bg: rgba(22, 128, 61, 0.08);
   --exito-border: rgba(22, 128, 61, 0.4);

   /* ---- Fondo global animado ---- */
   --fondo-base: #f4f1ea;
   --fondo-vineta: rgba(0, 0, 0, 0.12);
   --fondo-grilla-primaria: rgba(3, 140, 150, 0.16);
   --fondo-grilla-secundaria: rgba(150, 3, 170, 0.07);

   /* ---- Acciones de tabla ---- */
   --accion-editar: #1d6fd0;
   --accion-editar-borde: rgba(29, 111, 208, 0.45);
   --accion-editar-fondo: rgba(29, 111, 208, 0.1);
   --accion-eliminar: #c22c2c;
   --accion-eliminar-borde: rgba(194, 44, 44, 0.45);
   --accion-eliminar-fondo: rgba(194, 44, 44, 0.1);

   /* ---- Pantalla de carga ---- */
   --cargando-fondo: rgba(244, 241, 234, 0.88);
   --card-bg-solido: #ffffff;

   /* ---- Notificaciones ---- */
   --notif-aviso: #7c3aed;

   --modal-fondo: rgba(244, 241, 234, 0.75);

   --accion-fraccionar: #8a5e14;
   --accion-fraccionar-borde: rgba(138, 94, 20, 0.45);
   --accion-fraccionar-fondo: rgba(138, 94, 20, 0.1);

   --estado-exitosa: #16803d;

   --accion-activar: #16803d;
   --accion-activar-borde: rgba(22, 128, 61, 0.4);
   --accion-activar-fondo: rgba(22, 128, 61, 0.1);

   --tag-empaquetado: #0b6b85;
   --tag-fraccionado: #8a5e14;
}

/* ---------------------------------------------------------------------------
   TRANSICIÓN AL CAMBIAR DE TEMA

   Suaviza el cambio de colores para que no sea un salto brusco. Se limita a
   las propiedades de color: incluir "all" causaría que también se animen
   transforms y tamaños, generando saltos visuales indeseados.
   --------------------------------------------------------------------------- */
body,
body * {
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        fill 0.25s ease;
}

/* Respeta la preferencia del sistema de reducir animaciones */
@media (prefers-reduced-motion: reduce) {
    body,
    body * {
        transition: none;
    }
}