/**
 * Archivo: theme-tt.css
 * Proyecto: Teletristadio
 * Versión: TT-THEME-TT-2026.08.16-01
 * Fecha de versión: 2026-08-16
 *
 * Funciones principales:
 * - Define exclusivamente las dos paletas cromáticas de Teletristadio.
 * - Utiliza el tema oscuro como configuración predeterminada.
 * - Aplica el tema claro cuando html contiene data-theme="light".
 * - Mantiene el fondo de la cabecera independiente del fondo general.
 * - Define el color de la sombra de la cabecera para cada tema.
 *
 * Cambios de esta versión:
 * - Actualizado el fondo de cabecera del modo oscuro a #0a2133.
 * - Actualizado el fondo de cabecera del modo claro a #0d3147.
 * - Incorporada la variable --header-shadow-color.
 * - Definida una sombra amarilla para la cabecera en modo oscuro.
 * - Definida una sombra negra para la cabecera en modo claro.
 * - Conservadas sin cambios las restantes variables de ambos temas.
 */

/* ========================================================================== 
   MODO OSCURO
   - Tema predeterminado de Teletristadio.
   - También se aplica cuando html contiene data-theme="dark".
   ========================================================================== */
:root,
:root[data-theme="dark"] {
    color-scheme: dark;

    /* --- Colores principales --- */
    --primary-blue: #0066ff;
    --primary-white: #ffffff;
    --accent-orange: #ff6600;

    /* --- Fondos --- */
    --bg-dark: #0a0f1c;
    --bg-card: #1a2332;
    --header-background: #0a2133;

    /* --- Textos generales --- */
    --text-light: #e8f4ff;
    --text-gray: #a3b8d1;

    /* --- Textos por componente --- */
    --header-title-color: #fbb741;
    --card-title-color: var(--primary-white);
    --card-subtitle-color: var(--primary-white);

    /* --- Bordes y efectos --- */
    --border-blue: var(--primary-blue);
    --card-border-color: #f1d27a;
    --grid-horizontal-line-color: rgba(0, 102, 255, 0.15);
    --grid-vertical-line-color: rgba(0, 102, 255, 0.15);
    --image-shine-color: rgba(255, 255, 255, 0.1);
    --header-shadow-color: rgba(226, 209, 26, 0.55);

    /* --- Iconos de interfaz y botón de cambio de tema --- */
    --ui-icon-color: #fbb741;
    --theme-toggle-background: transparent;
    --theme-toggle-border-color: var(--ui-icon-color);
    --theme-toggle-icon-color: var(--ui-icon-color);
}

/* ========================================================================== 
   MODO CLARO
   - Se aplica cuando html contiene data-theme="light".
   ========================================================================== */
:root[data-theme="light"] {
    color-scheme: light;

    /* --- Colores principales --- */
    --primary-blue: #2474ec;
    --primary-white: #ffffff;
    --accent-orange: #2474ec;

    /* --- Fondos --- */
    --bg-dark: #f7f9fc;
    --bg-card: #ffffff;
    --header-background: #0d3147;

    /* --- Textos generales --- */
    --text-light: #18202b;
    --text-gray: #526881;

    /* --- Textos por componente --- */
    --header-title-color: #fbb741;
    --card-title-color: #111827;
    --card-subtitle-color: #263244;

    /* --- Bordes y efectos --- */
    --border-blue: #0066ff;
    --card-border-color: #a9e9ff;
    --grid-horizontal-line-color: transparent;
    --grid-vertical-line-color: transparent;
    --image-shine-color: rgba(255, 255, 255, 0.1);
    --header-shadow-color: rgba(0, 0, 0, 0.55);

    /* --- Iconos de interfaz y botón de cambio de tema --- */
    --ui-icon-color: #2474ec;
    --theme-toggle-background: transparent;
    --theme-toggle-border-color: var(--ui-icon-color);
    --theme-toggle-icon-color: var(--ui-icon-color);
}