/* =========================================================
   1. VARIABLES GLOBALES (TEMA REDMEDICAVLOG OFICIAL)
   ========================================================= */
:root {
    /* --- PALETA DE COLORES OFICIAL --- */
    
    /* Fondo Header (Azul Marino Profundo) */
    --sys-bg-header: #0f172a; 
    
    /* Azul Vibrante (Botones, Enlaces, Iconos activos) */
    --sys-primary: #0ea5e9;   /* Sky Blue */
    --sys-primary-hover: #0284c7; 
    
    /* Rojo/Rosa Institucional (Logo, Acentos fuertes) */
    --sys-accent: #f43f5e;    /* Rose */
    
    /* Verde (Etiquetas, Completado) */
    --sys-success: #22c55e;
    
    /* Fondos y Textos */
    --sys-bg-body: #f8fafc;   /* Gris muy claro de fondo general */
    --sys-bg-panel: #ffffff;  /* Blanco puro para tarjetas */
    --sys-bg-hover: #f1f5f9;  /* Gris claro para hover */
    
    --sys-text-main: #1e293b; /* Gris oscuro para texto principal */
    --sys-text-muted: #64748b;/* Gris medio para subtítulos */
    --sys-text-inverse: #ffffff; /* Texto blanco sobre fondos oscuros */
    
    --sys-border: #e2e8f0;    /* Bordes sutiles */
    
    /* Dimensiones */
    --header-height: 60px;
    --sidebar-width: 260px;
}
/* TEMA OSCURO (Opcional, ajustado a tonos nocturnos de la marca) */
[data-theme="dark"] {
    --sys-bg-header: #020617;
    --sys-bg-body: #0f172a;
    --sys-bg-panel: #1e293b;
    --sys-bg-hover: #334155;
    
    --sys-text-main: #f8fafc;
    --sys-text-muted: #94a3b8;
    
    --sys-border: #334155;
    --sys-primary: #38bdf8; /* Un azul más brillante para modo oscuro */
    --sys-accent: #fb7185;
}
/* --- RESET GLOBAL (CRÍTICO PARA EVITAR DESBORDAMIENTOS) --- */
*, *::before, *::after {
    box-sizing: border-box;
}

body { 
    margin: 0; 
    font-family: 'Roboto', sans-serif; 
    background: var(--sys-bg-body); 
    color: var(--sys-text-main);
    height: 100vh; 
    overflow: hidden; 
    transition: background 0.3s, color 0.3s;
}

/* =========================================================
   2. LAYOUT PRINCIPAL (ESTRUCTURA GRID)
   ========================================================= */

/* Contenedor Maestro: Sidebar Fija + Contenido Fluido */
.app-container {
    display: grid;
    /* La columna 1 es una variable que cambiaremos con JS */
    grid-template-columns: var(--sidebar-width) 1fr; 
    height: 100vh;
    overflow: hidden;
    background: var(--sys-bg-body);
    transition: grid-template-columns 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* CLASE NUEVA: Cuando el sidebar está cerrado, el grid cambia */
.app-container.grid-collapsed {
    grid-template-columns: var(--sidebar-collapsed) 1fr;
}

/* SIDEBAR (PC) */
.sidebar {
    background: var(--sys-bg-panel);
    border-right: 1px solid var(--sys-border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    z-index: 100;
    position: relative;
    overflow: hidden;
    /* width: 100%;  <-- Ocupa el ancho que le de el Grid */
}

/* Estado Colapsado (PC) */
.sidebar.collapsed {
    width: var(--sidebar-collapsed) !important;
}
/* Ocultar textos cuando está colapsado */
.sidebar.collapsed .logo-text,
.sidebar.collapsed .nav-text {
    opacity: 0;
    pointer-events: none;
    display: none; /* Asegura que desaparezcan del flujo */
}
.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 0;
}
.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 15px 0;
}
.sidebar.collapsed .sidebar-logo {
    margin: 0;
}

/* Elementos Internos Sidebar */
.sidebar-header {
    padding: 0 20px; 
    display: flex; align-items: center; gap: 12px;
    height: 70px; 
    border-bottom: 1px solid var(--sys-border); 
    white-space: nowrap;
}
.sidebar-logo { width: 32px; height: 32px; object-fit: contain; filter: var(--sys-logo-filter); }
.logo-text { font-weight: 700; color: var(--sys-accent); font-size: 1.1em; }

.sidebar-nav {
    flex-grow: 1; 
    overflow-y: auto; 
    padding: 20px 10px;
    display: flex; flex-direction: column;
}

.nav-item {
    padding: 12px 20px; 
    cursor: pointer; 
    color: var(--sys-text-muted); 
    display: flex; align-items: center; gap: 15px;
    border-radius: 8px;
    transition: all 0.2s; 
    white-space: nowrap;
    margin-bottom: 5px;
}
.nav-item:hover { background: var(--sys-bg-hover); color: var(--sys-accent); }
.nav-item.active { background: var(--sys-bg-header); color: var(--sys-accent); font-weight: 500; }

.sidebar-footer {
    padding: 15px; 
    border-top: 1px solid var(--sys-border);
    display: flex; justify-content: center; align-items: center;
    background: var(--sys-bg-panel);
}

.toggle-btn { 
    width: 36px; height: 36px; border-radius: 50%; 
    border: 1px solid var(--sys-border); background: transparent; color: var(--sys-text-muted);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
}
.toggle-btn:hover { border-color: var(--sys-accent); color: var(--sys-accent); }
.sidebar.collapsed .toggle-btn i { transform: rotate(180deg); }


/* --- CONTENIDO PRINCIPAL --- */
.content {
    background: var(--sys-bg-body);
    padding: 30px;
    overflow-y: auto;
    overflow-x: hidden; /* Evita scroll horizontal global indeseado */
    position: relative;
    width: 100%;
    min-width: 0; /* Truco vital para CSS Grid + Tablas */
}

/* Clases de Utilidad para Módulos (SPA) */
.module { display: none; animation: fadeIn 0.3s ease-out; }
.module.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.top-bar { margin-bottom: 30px; }
.top-bar h1 { margin: 0; color: var(--sys-text-main); }
.top-bar p { color: var(--sys-text-muted); margin: 5px 0 0 0; }


/* =========================================================
   3. COMPONENTES DE UI (Botones, Cards, Forms)
   ========================================================= */

.btn-primary { 
    background: var(--sys-accent); color: var(--sys-text-inverse); border: none; 
    padding: 12px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; 
    width: 100%; transition: 0.3s; 
}
.btn-primary:hover { background: var(--sys-accent-hover); transform: translateY(-1px); }

/* --- DASHBOARD CARDS --- */
.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.dash-card {
    background: var(--sys-bg-panel);
    border: 1px solid var(--sys-border);
    border-radius: 12px;
    padding: 20px;
    display: flex; align-items: center; gap: 15px;
    box-shadow: var(--sys-shadow);
    transition: transform 0.3s, border-color 0.3s;
    cursor: pointer; position: relative; overflow: hidden;
}
.dash-card:hover { transform: translateY(-5px); border-color: var(--sys-accent); }
.dash-card:active { transform: scale(0.98); }

.card-icon {
    width: 50px; height: 50px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4em; flex-shrink: 0;
}
.card-info h3 { margin: 0; font-size: 0.9em; color: var(--sys-text-muted); text-transform: uppercase; }
.card-info p { margin: 5px 0 0 0; font-size: 1.6em; font-weight: 800; color: var(--sys-text-main); }
.card-info p.small-text { font-size: 1em; font-weight: 600; color: var(--sys-accent); }

/* Paneles Genéricos */
.today-panel, .today-panel-full, .history-panel, .config-panel, .calendar-container { 
    background: var(--sys-bg-panel); padding: 25px; border-radius: 12px; 
    box-shadow: var(--sys-shadow); border: 1px solid var(--sys-border);
}
.today-panel h2, .today-panel-full h2 { 
    margin-top: 0; color: var(--sys-text-main); border-bottom: 1px solid var(--sys-border); padding-bottom: 15px; margin-bottom: 20px;
}

/* Lista de Tareas */
.task-item { 
    background: var(--sys-bg-panel); border: 1px solid var(--sys-border); 
    display: flex; align-items: center; gap: 15px; padding: 15px; border-radius: 8px; margin-bottom: 10px;
}
.task-item:hover { background: var(--sys-bg-hover); }
.task-check { accent-color: var(--sys-accent); }
.task-details h4 { color: var(--sys-text-main); margin: 0; }
.task-details span { background: var(--sys-bg-header); color: var(--sys-text-muted); padding: 2px 6px; border-radius: 4px; font-size: 0.8em; }

/* --- FORMULARIOS --- */
.form-group { margin-bottom: 25px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 10px; color: var(--sys-text-main); font-size: 0.95em; }

input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="datetime-local"] {
    width: 100%; padding: 12px 15px;
    background-color: var(--sys-bg-input);
    border: 1px solid var(--sys-border); border-radius: 8px;
    font-family: 'Roboto', sans-serif; color: var(--sys-text-main); font-size: 1em;
    outline: none; transition: 0.3s;
}
input:focus { border-color: var(--sys-accent); box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.1); }

/* Selector de Días */
.days-selector { display: flex; gap: 8px; justify-content: space-between; }
.days-selector label {
    width: 38px; height: 38px;
    background: var(--sys-bg-hover); border: 1px solid var(--sys-border);
    color: var(--sys-text-muted); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 0.85em; font-weight: 500; transition: 0.2s;
}
.days-selector label:hover { transform: translateY(-2px); border-color: var(--sys-accent); color: var(--sys-accent); }
.days-selector label:has(input:checked) {
    background-color: var(--sys-accent); color: var(--sys-text-inverse);
    border-color: var(--sys-accent); transform: scale(1.1);
}
.days-selector input { display: none; }

/* Selector de País */
.styled-input-group {
    display: flex; align-items: center;
    border: 1px solid var(--sys-border); background: var(--sys-bg-input);
    border-radius: 6px; position: relative; padding: 2px;
}
.country-selector {
    display: flex; align-items: center; padding: 8px 10px;
    background: var(--sys-bg-panel); border-right: 1px solid var(--sys-border);
    border-radius: 4px 0 0 4px; cursor: pointer; transition: background 0.2s;
}
.country-selector:hover { background: var(--sys-bg-hover); }
.styled-input-group input { border: none !important; box-shadow: none !important; }

.country-options-list {
    display: none; position: absolute; top: 100%; left: 0;
    width: 250px; max-height: 200px; overflow-y: auto;
    background: var(--sys-bg-panel); border: 1px solid var(--sys-border);
    border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 100; margin-top: 5px;
}
.country-options-list.show { display: block; }
.country-option { padding: 8px 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.9em; color: var(--sys-text-main); }
.country-option:hover { background: var(--sys-accent); color: white; }


/* =========================================================
   4. MODULOS ESPECÍFICOS
   ========================================================= */

/* --- SCHEDULE (Horario) --- */
.schedule-layout {
    display: flex; flex-direction: row; gap: 20px;
    height: calc(100vh - 140px); min-height: 500px; overflow: hidden;
}
.config-panel { width: 280px; min-width: 280px; overflow-y: auto; display: flex; flex-direction: column; }
.calendar-container { flex-grow: 1; display: flex; flex-direction: column; position: relative; }
#calendar { flex-grow: 1; height: 100%; width: 100%; }

/* FullCalendar Styles */
.fc {
    --fc-page-bg-color: var(--sys-bg-panel);
    --fc-neutral-bg-color: var(--sys-bg-hover);
    --fc-border-color: var(--sys-border);
    --fc-button-bg-color: var(--sys-accent);
    --fc-button-border-color: var(--sys-accent);
    --fc-button-hover-bg-color: var(--sys-accent-hover);
    --fc-event-bg-color: var(--sys-accent);
    --fc-event-border-color: var(--sys-accent);
}
.fc-col-header-cell-cushion, .fc-timegrid-slot-label-cushion { color: var(--sys-text-main) !important; text-decoration: none !important; }
.fc-theme-standard td, .fc-theme-standard th { border-color: var(--sys-border) !important; }
.fc-bg-event { background: var(--sys-bg-header) !important; opacity: 0.5 !important; }

/* --- PROGRESS (Progreso) --- */
.progress-toolbar { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.search-box { flex-grow: 1; position: relative; min-width: 250px; }
.search-box i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--sys-text-muted); }
.search-box input { padding-left: 45px; }

.filter-tabs { flex-shrink: 0; display: flex; background: var(--sys-bg-input); border-radius: 50px; padding: 4px; border: 1px solid var(--sys-border); }
.filter-btn { background: transparent; border: none; padding: 8px 20px; border-radius: 50px; color: var(--sys-text-muted); cursor: pointer; font-weight: 500; transition: 0.3s; }
.filter-btn.active { background: var(--sys-bg-panel); color: var(--sys-accent); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

.main-progress-container { margin-bottom: 30px; padding: 20px; background: var(--sys-bg-panel); border-radius: 12px; border: 1px solid var(--sys-border); }
.progress-labels { display: flex; justify-content: space-between; margin-bottom: 10px; font-weight: bold; }
.progress-bar-large { height: 12px; background: var(--sys-bg-hover); border-radius: 6px; overflow: hidden; }
.progress-bar-large .fill { height: 100%; background: var(--sys-accent); width: 0%; transition: width 1s ease; }

.syllabus-list-container { background: var(--sys-bg-panel); border-radius: 12px; border: 1px solid var(--sys-border); max-height: 60vh; overflow-y: auto; }
.syllabus-item { display: flex; align-items: center; gap: 15px; padding: 15px 20px; border-bottom: 1px solid var(--sys-border); }
.syllabus-item:hover { background: var(--sys-bg-hover); }

/* Checkbox Personalizado */
.check-container { position: relative; width: 24px; height: 24px; flex-shrink: 0; }
.custom-check { width: 100%; height: 100%; border: 2px solid var(--sys-border); border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.check-input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.check-input:checked + .custom-check { background: var(--sys-accent); border-color: var(--sys-accent); color: white; }
.check-input:checked + .custom-check::after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.8em; }

.item-date { display: flex; flex-direction: column; align-items: center; width: 60px; flex-shrink: 0; background: var(--sys-bg-hover); padding: 5px; border-radius: 6px; }
.item-date .day { font-size: 0.8em; font-weight: bold; color: var(--sys-text-muted); }
.item-date .num { font-size: 1.1em; font-weight: bold; color: var(--sys-text-main); }
.item-info { flex-grow: 1; }
.item-info h4 { margin: 0; font-size: 1em; color: var(--sys-text-main); }
.status-badge { font-size: 0.75em; padding: 4px 10px; border-radius: 20px; font-weight: bold; }
.badge-today { background: #dbeafe; color: #1e40af; }
.badge-overdue { background: #fee2e2; color: #991b1b; }
.badge-completed { background: #dcfce7; color: #166534; }

/* --- APARIENCIA (Temas) --- */
.themes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.theme-card { background: var(--sys-bg-panel); border: 2px solid var(--sys-border); border-radius: 12px; padding: 20px; cursor: pointer; text-align: center; position: relative; }
.theme-card:hover { transform: translateY(-3px); border-color: var(--sys-accent); }
.theme-card.active { border-color: var(--sys-accent); background: var(--sys-bg-hover); }
.theme-card.active::after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 10px; right: 10px; color: var(--sys-accent); }
.color-preview { display: flex; justify-content: center; gap: 5px; margin-bottom: 15px; }
.cp-dot { width: 25px; height: 25px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); }

/* --- ADMIN --- */
.admin-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.admin-table th { text-align: left; padding: 12px; background: var(--sys-bg-hover); color: var(--sys-text-muted); border-bottom: 2px solid var(--sys-border); }
.admin-table td { padding: 12px; border-bottom: 1px solid var(--sys-border); color: var(--sys-text-main); }
.admin-table tr:hover { background: var(--sys-bg-hover); }

/* --- ESTILO PERFIL CORREGIDO --- */
.profile-card {
    max-width: 600px; 
    /* Quitamos margin: 0 auto para que no se centre, lo dejamos a la izquierda */
    margin: 20px 0; 
    background: var(--sys-bg-panel); 
    padding: 30px; 
    border-radius: 12px; 
    border: 1px solid var(--sys-border); 
    box-shadow: var(--sys-shadow);
}

/* =========================================================
   5. OVERLAYS Y MODALES
   ========================================================= */

/* Login Overlay */
.login-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); z-index: 9999;
    display: flex; justify-content: center; align-items: center;
}
.login-box { 
    background: var(--sys-bg-panel); padding: 40px; border-radius: 12px; text-align: center; width: 300px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.5); border: 1px solid var(--sys-border);
}
.login-logo { width: 80px; margin-bottom: 20px; filter: var(--sys-logo-filter); }

/* Modal Universal */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); z-index: 10000;
    display: flex; justify-content: center; align-items: center;
    backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }

.modal-box {
    background: var(--sys-bg-panel); width: 90%; max-width: 400px;
    padding: 30px; border-radius: 16px; text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4); border: 1px solid var(--sys-border);
    transform: scale(0.9); transition: transform 0.3s;
}
.modal-overlay.open .modal-box { transform: scale(1); }

.modal-icon { font-size: 3.5em; margin-bottom: 15px; }
.modal-actions { display: flex; gap: 12px; justify-content: center; }
.btn-modal { padding: 10px 24px; border-radius: 8px; cursor: pointer; font-weight: bold; border: none; flex: 1; }
.btn-confirm { background: var(--sys-accent); color: var(--sys-text-inverse); }
.btn-cancel { background: transparent; color: var(--sys-text-muted); border: 1px solid var(--sys-border); }

/* Tipos de Modal */
.modal-type-success .modal-icon { color: #22c55e; }
.modal-type-error .modal-icon { color: #ef4444; }
.modal-type-warning .modal-icon { color: #f59e0b; }
.modal-type-info .modal-icon { color: var(--sys-accent); }

/* Toasts */
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 99999; display: flex; flex-direction: column; gap: 10px; }
.toast {
    background: var(--sys-bg-panel); color: var(--sys-text-main);
    padding: 15px 20px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: flex; align-items: center; gap: 12px; border-left: 5px solid var(--sys-accent);
    transform: translateX(120%); transition: transform 0.3s;
}
.toast.show { transform: translateX(0); }
.toast-success { border-left-color: #16a34a; } .toast-success i { color: #16a34a; }
.toast-error { border-left-color: #dc2626; } .toast-error i { color: #dc2626; }


/* =========================================================
   6. RESPONSIVE (MÓVIL Y TABLET)
   ========================================================= */

/* Elementos solo visibles en móvil */
.mobile-menu-btn, .mobile-overlay { display: none; }

@media (max-width: 768px) {
    
    /* 1. AJUSTES GLOBALES PARA CHROME MOBILE (Altura Dinámica) */
    body { 
        height: 100dvh; /* Ignora la barra de navegación del navegador */
        min-height: -webkit-fill-available;
    }

    .app-container {
        /* ¡IMPORTANTE! Una sola columna en móvil */
        grid-template-columns: 1fr !important; 
        height: 100dvh;
    }

    /* 2. SIDEBAR FLOTANTE (Con Z-Index alto para corregir el bloqueo) */
    .sidebar {
        position: fixed;
        left: -280px;
        top: 0; bottom: 0;
        width: 260px;
        z-index: 2000 !important; /* Capa máxima para estar sobre el overlay */
        transition: left 0.3s ease;
        box-shadow: 4px 0 15px rgba(0,0,0,0.2);
        display: flex; flex-direction: column;
    }

    /* Clase para mostrar sidebar */
    .sidebar.mobile-open { left: 0; }
    
    /* Espacio extra abajo para que la barra de Chrome no tape "Cerrar Sesión" */
    .sidebar-nav { padding-bottom: 60px; }


    /* 3. CONTENIDO PRINCIPAL */
    .content {
        padding: 70px 15px 20px 15px; /* Espacio arriba para el botón hamburguesa */
    }

    /* 4. BOTÓN HAMBURGUESA */
    .mobile-menu-btn {
        display: block !important;
        position: fixed; top: 15px; left: 15px; z-index: 1001;
        background: var(--sys-accent); color: white;
        border: none; padding: 10px 12px; border-radius: 8px; font-size: 1.2rem;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }

    /* 5. OVERLAY MÓVIL */
    .mobile-overlay {
        display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5); z-index: 999; opacity: 0; transition: opacity 0.3s;
    }
    .mobile-overlay.show { display: block; opacity: 1; }


    /* 6. AJUSTES DE MÓDULOS ESPECÍFICOS */
    
    /* Horario: Forzar altura para que aparezca el calendario */
    .schedule-layout { 
        flex-direction: column; 
        height: auto !important; 
        overflow: visible; 
    }
    .config-panel { width: 100%; margin-bottom: 20px; }
    .calendar-container { 
        height: 600px !important; /* Altura forzada */
        display: block; 
    }
    .fc-header-toolbar { flex-direction: column; gap: 10px; }
    
    /* Dashboard y Perfil */
    .dashboard-cards { grid-template-columns: 1fr; }
    .profile-card { margin: 0 auto; width: 100%; }

    /* Tablas responsivas */
    table { display: block; width: 100%; overflow-x: auto; }
}

/* =========================================================
   7. TEMAS PERSONALIZADOS
   ========================================================= */
[data-theme="clinico"] {
    --sys-bg-body: #f1f5f9; --sys-bg-panel: #ffffff; --sys-bg-input: #ffffff; --sys-bg-hover: #f8fafc; --sys-bg-header: #e2e8f0;
    --sys-text-main: #0f172a; --sys-text-muted: #64748b; --sys-text-inverse: #ffffff;
    --sys-border: #cbd5e1; --sys-accent: #1b3a66; --sys-accent-hover: #162b47;
    --sys-logo-filter: brightness(0) saturate(100%) invert(13%) sepia(30%) saturate(3296%) hue-rotate(202deg) brightness(94%) contrast(92%);
}
[data-theme="noche"] {
    --sys-bg-body: #000000; --sys-bg-panel: #0a0a0a; --sys-bg-input: #1a1a1a; --sys-bg-hover: #1e1e1e; --sys-bg-header: #000000;
    --sys-text-main: #f8fafc; --sys-text-muted: #94a3b8; --sys-text-inverse: #ffffff;
    --sys-border: #262626; --sys-accent: #6366f1; --sys-accent-hover: #4f46e5;
    --sys-logo-filter: brightness(0) saturate(100%) invert(43%) sepia(85%) saturate(3000%) hue-rotate(225deg) brightness(101%) contrast(93%);
}
[data-theme="bosque"] {
    --sys-bg-body: #f0fdf4; --sys-bg-panel: #ffffff; --sys-bg-input: #dcfce7; --sys-bg-hover: #dcfce7; --sys-bg-header: #bbf7d0;
    --sys-text-main: #14532d; --sys-text-muted: #166534; --sys-text-inverse: #ffffff;
    --sys-border: #86efac; --sys-accent: #16a34a; --sys-accent-hover: #15803d; 
    --sys-logo-filter: brightness(0) saturate(100%) invert(48%) sepia(74%) saturate(2256%) hue-rotate(126deg) brightness(93%) contrast(92%);
}
[data-theme="cyber"] {
    --sys-bg-body: #000000; --sys-bg-panel: #111111; --sys-bg-input: #000000; --sys-bg-hover: #222222; --sys-bg-header: #000000;
    --sys-text-main: #00ff41; --sys-text-muted: #008f11; --sys-text-inverse: #000000;
    --sys-border: #333333; --sys-accent: #00ff41; --sys-accent-hover: #00cc33;
    --sys-logo-filter: brightness(0) saturate(100%) invert(73%) sepia(96%) saturate(1966%) hue-rotate(86deg) brightness(109%) contrast(106%);
}
[data-theme="lavanda"] {
    --sys-bg-body: #faf5ff; --sys-bg-panel: #ffffff; --sys-bg-input: #f3e8ff; --sys-bg-hover: #f3e8ff; --sys-bg-header: #e9d5ff;
    --sys-text-main: #4c1d95; --sys-text-muted: #7e22ce; --sys-text-inverse: #ffffff;
    --sys-border: #d8b4fe; --sys-accent: #9333ea; --sys-accent-hover: #7e22ce; 
    --sys-logo-filter: brightness(0) saturate(100%) invert(26%) sepia(74%) saturate(3088%) hue-rotate(263deg) brightness(96%) contrast(96%);
}
/* =========================================================
   8. PARRILLA SEMANAL (Custom Grid)
   ========================================================= */

/* Contenedor principal de la parrilla */
.grid-header, .weekly-grid {
    display: grid;
    /* Columna Hora (40px) + 7 Columnas de días iguales */
    grid-template-columns: 40px repeat(7, 1fr); 
    width: 100%;
}

/* Encabezado (Lu, Ma, Mi...) */
.grid-header {
    background: var(--sys-bg-hover);
    border-bottom: 1px solid var(--sys-border);
    font-weight: bold;
    text-align: center;
    padding-right: 5px; /* Compensar scrollbar */
}

.grid-header div {
    padding: 10px 2px;
    font-size: 0.9em;
    color: var(--sys-text-muted);
}

.time-header-cell {
    border-right: 1px solid var(--sys-border);
    background: var(--sys-bg-panel);
}

/* Área con Scroll vertical para las horas */
.grid-body-scroll {
    flex-grow: 1;
    overflow-y: auto; /* Scroll vertical si no cabe todo */
    overflow-x: hidden;
    position: relative;
    height: 500px; /* Altura base */
}

/* Celdas de la parrilla */
.grid-cell {
    border-bottom: 1px solid var(--sys-border);
    border-right: 1px solid var(--sys-border);
    height: 35px; /* Altura cómoda para el dedo */
    cursor: pointer;
    background: var(--sys-bg-panel);
    transition: background 0.1s;
    touch-action: manipulation; /* Mejora respuesta táctil */
}

/* Columna de Hora (Izquierda) */
.time-label {
    font-size: 0.75em;
    color: var(--sys-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--sys-border);
    border-bottom: 1px solid var(--sys-border);
    background: var(--sys-bg-hover);
    position: sticky;
    left: 0;
}

/* --- ESTADO SELECCIONADO (PINTADO) --- */
.grid-cell.selected {
    background-color: var(--sys-accent) !important;
    border-color: var(--sys-accent);
}

/* Ajustes para Móvil (Optimización Táctil) */
@media (max-width: 768px) {
    .calendar-container {
        height: 65vh !important; /* Usar buena parte de la pantalla */
    }
    .grid-body-scroll {
        height: 100%;
    }
    .grid-header div {
        font-size: 0.8em; /* Texto un poco más chico para que quepa */
    }
    .time-label {
        font-size: 0.7em;
    }
    /* Quitamos bordes externos para limpieza */
    .weekly-grid { border: none; }
}
/* --- CORRECCIÓN DE Z-INDEX PARA MODALES --- */

/* Asegurar que SweetAlert (la confirmación de eliminar) esté SIEMPRE al frente */
.swal2-container {
    z-index: 99999 !important;
}

/* Tu modal personalizado debe estar por debajo del SweetAlert */
.modal-overlay {
    z-index: 1050; /* Valor estándar de Bootstrap */
    background: rgba(0, 0, 0, 0.5); /* Fondo oscuro semitransparente */
}
/* --- PANEL DE NOTIFICACIONES (DASHBOARD) --- */
.notification-banner {
    background: linear-gradient(135deg, #6366f1, #8b5cf6); /* Gradiente moderno */
    color: white;
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 25px; /* Espacio antes de la lista de tareas */
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    animation: fadeIn 0.5s ease-in-out;
}

.notify-icon {
    font-size: 1.5rem;
    background: rgba(255,255,255,0.2);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.notify-content {
    flex-grow: 1;
}

.notify-content h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.notify-content p {
    margin: 0;
    opacity: 0.95;
    font-size: 0.95rem;
}

.btn-notify {
    background: white;
    color: #6366f1;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-notify:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    color: #4f46e5;
}

/* Ajuste para móviles */
@media (max-width: 600px) {
    .notification-banner {
        flex-direction: column;
        text-align: center;
    }
    .btn-notify {
        width: 100%;
        text-align: center;
    }
}
/* --- ESTILOS DEL MODAL Y BOTONES --- */

.modal-footer {
    display: flex;
    justify-content: space-between; /* Eliminar a la izquierda, Acciones a la derecha */
    align-items: center;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

.modal-btn-group {
    display: flex;
    gap: 10px;
}

.btn-modal {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Botón Guardar (Color Principal/Accent) */
.btn-save {
    background-color: var(--sys-accent, #f43f5e);
    color: white;
}
.btn-save:hover {
    filter: brightness(0.9);
    transform: translateY(-1px);
}

/* Botón Cancelar (Gris neutro) */
.btn-cancel {
    background-color: #f1f5f9;
    color: #64748b;
}
.btn-cancel:hover {
    background-color: #e2e8f0;
    color: #475569;
}

/* Botón Eliminar (Rojo alerta) */
.btn-delete {
    background-color: #fee2e2;
    color: #dc2626;
}
.btn-delete:hover {
    background-color: #fecaca;
    color: #b91c1c;
}