/**
 * Sistema de temas - Light/Dark
 * Sistema de Enlaces v3.0
 * 
 * Define las variables CSS para los temas claro y oscuro
 * 
 * PALETA DE COLORES:
 * - Azul Turquesa (#0084a5): Navbar, Footer (color-action-primary)
 * - Azul (#42648e): Botón primary (color-primary)
 * - Verde (#1c7484): Botón success (color-success)
 * - Púrpura (#894fa0): Botón alternative + Iconos de inputs (color-alternative, color-icon-input)
 * - Dorado (#e8b622): Iconos genéricos (color-icon-generic)
 * - Amarillo (#ffc107): Botón warning (color-warning)
 * 
 * SISTEMA DUAL DE ICONOS:
 * - var(--icon-highlight): Iconos genéricos (navbar, logos, decorativos) → Dorado
 * - var(--input-icon-color): Iconos en inputs/formularios → Púrpura
 */

/* ============================================
   TEMA CLARO (por defecto)
   ============================================ */
:root {
    /* Identificador del tema */
    --theme-name: 'light';

    --color-header-footer: #006984;
    /* Azul turquesa - Navbar y Footer */

    /* Fondos - Blanco 85% + Verde 15% (#084a52) */
    --bg-body: #dae4e5;
    /* Fondo general con tinte verde suave */
    --bg-card: #ffffff;
    /* Tarjetas blanco puro (sin color) */
    --bg-input: #ffffff;
    /* Inputs blanco puro */
    --bg-hover: #cfdcdd;
    /* Hover un poco más oscuro con verde */

    /* Textos */
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --text-muted: #95a5a6;
    --text-inverse: #ffffff;

    /* Bordes y sombras */
    --border-color: #c5d3d4;
    /* Borde con tinte verde suave */
    --border-light: #d5e0e1;
    /* Borde claro con tinte verde */
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15);

    /* Estados de inputs */
    --input-bg: #ffffff;
    --input-border: #bcc9ca;
    /* Borde de input con tinte verde */
    --input-focus-border: #0084a5;
    --input-disabled-bg: #e4eded;

    /* Color principal del sistema (azul turquesa) */
    --color-action-primary: #0084a5;
    --color-action-hover: #006d89;

    /* Color secundario (púrpura) - para acentos */
    --color-accent: #894fa0;
    --color-accent-hover: #7a3f8f;

    /* Color de iconos en inputs (púrpura) */
    --input-icon-color: #894fa0;

    /* Color de iconos destacados genéricos (dorado) */
    --icon-highlight: #e8b622;
    --icon-highlight-hover: #d4a31f;

    /* Navbar - COLOR SÓLIDO */
    --navbar-bg: #0084a5;
    --navbar-text: #ffffff;
    --navbar-hover-bg: rgba(255, 255, 255, 0.1);

    /* Footer - mismo color que navbar */
    --footer-bg: #0084a5;
    --footer-text: #ffffff;

    /* Sidebar */
    --sidebar-bg: #ffffff;
    /* Sidebar blanco puro (como tarjeta) */
    --sidebar-text: #2c3e50;
    --sidebar-icon: #7f8c8d;
    --sidebar-hover-bg: #f0f7fa;
    --sidebar-active-bg: #e6f2f7;
    --sidebar-active-border: #0084a5;

    /* Dropdown */
    --dropdown-bg: #ffffff;
    --dropdown-hover-bg: #f0f7fa;
    --dropdown-active-bg: #e6f2f7;

    /* Hover general */
    --hover-bg: rgba(0, 132, 165, 0.1);
}

/* ============================================
   TEMA OSCURO
   ============================================ */
[data-theme="dark"] {
    /* Identificador del tema */
    --theme-name: 'dark';

    --color-header-footer: #0084a5;
    /* Verde-azul oscuro - Navbar y Footer (mejor contraste en dark) */

    /* Fondos - Negro 85% + Verde 15% (#084a52) */
    --bg-body: #010b0c;
    /* Fondo general con tinte verde suave */
    --bg-card: #0f1518;
    /* Tarjetas oscuro puro (sin verde) */
    --bg-input: #0a0f10;
    /* Inputs oscuro */
    --bg-hover: #1a2527;
    /* Hover un poco más claro con verde */

    /* Textos */
    --text-primary: #eaeaea;
    --text-secondary: #a0a0a0;
    --text-muted: #6c757d;
    --text-inverse: #1a1a2e;

    /* Bordes y sombras */
    --border-color: #1f2d2f;
    /* Borde oscuro con tinte verde */
    --border-light: #2a393b;
    /* Borde claro con tinte verde */
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.6);

    /* Estados de inputs */
    --input-bg: #0a0f10;
    --input-border: #2a393b;
    /* Borde de input con tinte verde */
    --input-focus-border: #1aa3cc;
    --input-disabled-bg: #1a2527;

    /* Color principal del sistema (azul turquesa más claro para contraste) */
    --color-action-primary: #1aa3cc;
    --color-action-hover: #1cb9e6;

    /* Color secundario (púrpura más claro) */
    --color-accent: #a77bb5;
    --color-accent-hover: #b591c9;

    /* Color de iconos en inputs (púrpura más claro para tema oscuro) */
    --input-icon-color: #a77bb5;

    /* Color de iconos destacados genéricos (dorado más brillante) */
    --icon-highlight: #f5c842;
    --icon-highlight-hover: #ffd95e;

    /* Navbar - COLOR SÓLIDO azul oscuro */
    --navbar-bg: #084a52;
    /* Verde oscuro del sistema */
    --navbar-text: #eaeaea;
    --navbar-hover-bg: rgba(255, 255, 255, 0.1);

    /* Footer - mismo tono que navbar */
    --footer-bg: #084a52;
    /* Verde oscuro del sistema */
    --footer-text: #eaeaea;

    /* Sidebar */
    --sidebar-bg: #0f1518;
    /* Sidebar oscuro puro (como tarjeta, sin verde) */
    --sidebar-text: #eaeaea;
    --sidebar-icon: #a0a0a0;
    --sidebar-hover-bg: #1a2527;
    --sidebar-active-bg: #243033;
    --sidebar-active-border: #1aa3cc;

    /* Dropdown */
    --dropdown-bg: #0f1518;
    /* Dropdown oscuro puro (sin verde) */
    --dropdown-hover-bg: #1a2527;
    --dropdown-active-bg: #243033;

    /* Hover general */
    --hover-bg: rgba(26, 163, 204, 0.15);
}

/* ============================================
   ANIMACIONES DE TRANSICIÓN
   ============================================ */
* {
    transition: background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Evitar transiciones en elementos que no lo necesitan */
*:where(img, video, iframe, canvas, svg, path) {
    transition: none;
}

/* ============================================
   BOTÓN DE CAMBIO DE TEMA
   ============================================ */
.theme-toggle {
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

.theme-toggle i {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.theme-toggle:hover i {
    transform: rotate(20deg);
}

/* Animación al cambiar de tema */
@keyframes themeChange {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

body.theme-changing {
    animation: themeChange 0.4s ease-in-out;
}