/* ============================================================
   VARIABLES DE TEMA (CLARO Y OSCURO)
   ============================================================ */

/* === TEMA OSCURO (por defecto) === */
:root {
    /* Colores de fondo */
    --bg-primary: #020617;
    --bg-secondary: #0F172A;
    --bg-tertiary: #0b1224;
    --bg-card: #0F172A;
    --bg-input: #0b1224;
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-sidebar: #0F1729;
    --bg-sidebar-logo: #020617;
    --bg-overlay: rgba(0, 0, 0, 0.6);
    
    /* Colores de texto */
    --text-primary: #ffffff;
    --text-secondary: #e5e7eb;
    --text-muted: #94a3b8;
    --text-gray: #6b7280;
    --text-gray-400: #94a3b8;
    --text-gray-500: #6b7280;
    --text-gray-600: #4b5563;
    
    /* Bordes */
    --border-color: rgba(255, 255, 255, 0.1);
    --border-light: rgba(255, 255, 255, 0.05);
    --border-slate: #1e293b;
    
    /* Sombras */
    --shadow-color: rgba(0, 0, 0, 0.5);
    --shadow-modal: rgba(0, 0, 0, 0.7);
    
    /* Scrollbar */
    --scrollbar-track: #0F172A;
    --scrollbar-thumb: #1e293b;
    
    /* Botones */
    --btn-hover-bg: rgba(255, 255, 255, 0.1);
}

/* === TEMA CLARO === */
[data-theme="light"] {
    /* Colores de fondo */
    --bg-primary: #f1f5f9;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8fafc;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: rgba(0, 0, 0, 0.05);
    --bg-sidebar: #ffffff;
    --bg-sidebar-logo: #f8fafc;
    --bg-overlay: rgba(0, 0, 0, 0.4);
    
    /* Colores de texto */
    --text-primary: #0f172a;
    --text-secondary: #1e293b;
    --text-muted: #64748b;
    --text-gray: #94a3b8;
    --text-gray-400: #64748b;
    --text-gray-500: #94a3b8;
    --text-gray-600: #475569;
    
    /* Bordes */
    --border-color: rgba(0, 0, 0, 0.1);
    --border-light: rgba(0, 0, 0, 0.05);
    --border-slate: #e2e8f0;
    
    /* Sombras */
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-modal: rgba(0, 0, 0, 0.3);
    
    /* Scrollbar */
    --scrollbar-track: #f1f5f9;
    --scrollbar-thumb: #cbd5e1;
    
    /* Botones */
    --btn-hover-bg: rgba(0, 0, 0, 0.05);
}

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

/* Excluir elementos que no deben tener transición */
#calculadora-flotante, 
#perfil-modal,
#evento-modal,
#ver-evento-modal,
#recordatorio-modal,
#toast-container,
.fc,
.install-toast {
    transition: none !important;
}

/* ============================================================
   APLICAR VARIABLES AL SIDEBAR
   ============================================================ */

/* Sidebar principal */
#sidebar {
    background-color: var(--bg-sidebar) !important;
    border-color: var(--border-slate) !important;
}

/* Logo del sidebar */
#sidebar .bg-\[\#020617\] {
    background-color: var(--bg-sidebar-logo) !important;
}
#sidebar .border-white\/15 {
    border-color: var(--border-color) !important;
}

/* Items de navegación */
#sidebar .hover\:bg-white\/5:hover {
    background-color: var(--bg-hover) !important;
}
#sidebar .text-gray-400 {
    color: var(--text-gray-400) !important;
}
#sidebar .hover\:text-white:hover {
    color: var(--text-primary) !important;
}
#sidebar .text-white {
    color: var(--text-primary) !important;
}
#sidebar .text-gray-500 {
    color: var(--text-gray-500) !important;
}
#sidebar .text-gray-300 {
    color: var(--text-secondary) !important;
}

/* Submenú activo */
#sidebar .bg-green-600\/20 {
    background-color: rgba(34, 197, 94, 0.2) !important;
}
#sidebar .text-green-400 {
    color: #34d399 !important;
}

/* Footer del sidebar */
#sidebar .border-t {
    border-color: var(--border-slate) !important;
}
#sidebar .bg-white\/5 {
    background-color: var(--bg-hover) !important;
}
#sidebar .text-\[\#11px\] {
    color: var(--text-gray-400) !important;
}
#sidebar .hover\:text-gray-300:hover {
    color: var(--text-secondary) !important;
}
#sidebar .hover\:text-green-400:hover {
    color: #34d399 !important;
}
#sidebar .text-gray-400.hover\:text-white:hover {
    color: var(--text-primary) !important;
}
#sidebar .hover\:bg-white\/10:hover {
    background-color: var(--btn-hover-bg) !important;
}

/* Overlay del sidebar */
#sidebar-overlay {
    background-color: var(--bg-overlay) !important;
}

/* ============================================================
   APLICAR VARIABLES AL MODAL DE PERFIL
   ============================================================ */
#perfil-modal .bg-\[\#0b1224\] {
    background-color: var(--bg-tertiary) !important;
}
#perfil-modal .border-white\/10 {
    border-color: var(--border-color) !important;
}
#perfil-modal .text-white {
    color: var(--text-primary) !important;
}
#perfil-modal .text-gray-400 {
    color: var(--text-gray-400) !important;
}
#perfil-modal .hover\:bg-white\/10:hover {
    background-color: var(--btn-hover-bg) !important;
}
#perfil-modal .bg-\[\#0b1224\].border-white\/10 {
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
}
#perfil-modal .border-2.border-\[\#0b1224\] {
    border-color: var(--bg-tertiary) !important;
}
#perfil-modal .text-gray-500 {
    color: var(--text-gray-500) !important;
}
#perfil-modal .text-gray-600 {
    color: var(--text-gray-600) !important;
}
#perfil-modal .bg-black\/70 {
    background-color: var(--bg-overlay) !important;
}
#perfil-modal .shadow-2xl {
    box-shadow: 0 25px 50px -12px var(--shadow-modal) !important;
}
#perfil-modal .border-b {
    border-color: var(--border-color) !important;
}

/* ============================================================
   APLICAR VARIABLES A LA CALCULADORA
   ============================================================ */
#calculadora-flotante {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 20px 60px var(--shadow-modal) !important;
}
#calculadora-flotante .bg-\[\#131c31\] {
    background-color: var(--bg-secondary) !important;
}
#calculadora-flotante .bg-\[\#0b1224\] {
    background-color: var(--bg-input) !important;
}
#calculadora-flotante .border-white\/5 {
    border-color: var(--border-light) !important;
}
#calculadora-flotante .text-white {
    color: var(--text-primary) !important;
}
#calculadora-flotante .text-gray-400 {
    color: var(--text-gray-400) !important;
}
#calculadora-flotante .hover\:bg-white\/10:hover {
    background-color: var(--btn-hover-bg) !important;
}
#calculadora-flotante .text-emerald-400 {
    color: #34d399 !important;
}

/* Botones de la calculadora en tema claro */
[data-theme="light"] .btn-calc-numero {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}
[data-theme="light"] .btn-calc-numero:hover {
    background: #cbd5e1 !important;
}
[data-theme="light"] .btn-calc-limpiar {
    background: #ef4444 !important;
    color: #ffffff !important;
}
[data-theme="light"] .btn-calc-borrar {
    background: #6b7280 !important;
    color: #ffffff !important;
}
[data-theme="light"] .btn-calc-operador {
    background: #f59e0b !important;
    color: #ffffff !important;
}
[data-theme="light"] .btn-calc-igual {
    background: #10b981 !important;
    color: #ffffff !important;
}

/* ============================================================
   APLICAR VARIABLES A LA VISTA PRINCIPAL
   ============================================================ */
body, .bg-\[\#020617\] {
    background-color: var(--bg-primary) !important;
}
.bg-\[\#0F172A\] {
    background-color: var(--bg-card) !important;
}
.bg-\[\#0b1224\] {
    background-color: var(--bg-tertiary) !important;
}
.bg-white\/5 {
    background-color: var(--bg-hover) !important;
}
.bg-white\/10 {
    background-color: var(--bg-hover) !important;
}
.border-white\/10, .border-white\/15, .border-white\/20 {
    border-color: var(--border-color) !important;
}
.border-white\/5 {
    border-color: var(--border-light) !important;
}

/* Textos globales */
.text-white {
    color: var(--text-primary) !important;
}
.text-gray-400, .text-gray-500, .text-muted {
    color: var(--text-muted) !important;
}
.text-gray-300, .text-gray-200 {
    color: var(--text-secondary) !important;
}
.text-gray-600 {
    color: var(--text-gray-600) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ============================================================
   TOAST DE INSTALACIÓN PWA
   ============================================================ */
.install-toast {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
.install-toast .toast-title {
    color: var(--text-primary) !important;
}
.install-toast .toast-message {
    color: var(--text-muted) !important;
}
.install-toast .btn-dismiss {
    color: var(--text-gray-400) !important;
}
.install-toast .btn-dismiss:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* ============================================================
   TEMA CLARO - AJUSTES ESPECÍFICOS
   ============================================================ */
[data-theme="light"] .fc {
    color: #1e293b !important;
}
[data-theme="light"] .fc .fc-toolbar-title {
    color: #0f172a !important;
}
[data-theme="light"] .fc .fc-daygrid-day {
    background: #ffffff !important;
}
[data-theme="light"] .fc .fc-daygrid-day.fc-day-today {
    background: rgba(59, 130, 246, 0.08) !important;
}
[data-theme="light"] .fc .fc-daygrid-day-number {
    color: #1e293b !important;
}
[data-theme="light"] .fc .fc-col-header-cell-cushion {
    color: #475569 !important;
}
[data-theme="light"] .fc-theme-standard .fc-scrollgrid,
[data-theme="light"] .fc-theme-standard td,
[data-theme="light"] .fc-theme-standard th {
    border-color: #e2e8f0 !important;
}
[data-theme="light"] .bg-\[\#1e2638\],
[data-theme="light"] .bg-\[\#283149\] {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}
[data-theme="light"] .bg-\[\#1e2638\]:hover,
[data-theme="light"] .bg-\[\#283149\]:hover {
    background-color: #cbd5e1 !important;
}
[data-theme="light"] .bg-red-600\/20 {
    background-color: rgba(239, 68, 68, 0.1) !important;
}
[data-theme="light"] .bg-green-600\/20 {
    background-color: rgba(34, 197, 94, 0.1) !important;
}
[data-theme="light"] .bg-blue-600\/20 {
    background-color: rgba(59, 130, 246, 0.1) !important;
}
[data-theme="light"] .bg-yellow-600\/20 {
    background-color: rgba(234, 179, 8, 0.1) !important;
}