/* ====================================================================
   COLORES (modo claro y modo oscuro)
   Todo el sitio usa estas variables: al cambiar de modo, cambian solas
   ==================================================================== */

:root {
    --bg-principal: #F3F3F3;
    --bg-card: #FFFFFF;
    --bg-hover: #F6F6F6;
    --bg-menu-hover: #EAEAEA;
    --border-color: #E5E5E5;
    --text-primary: #1A1A1A;
    --text-secondary: #737373;
    --accent-color: #0067C0;
    --text-fin-semana: #C42B1C;
    --estado-vigente-texto: #0E700E;
    --estado-por-vencer-texto: #8A5300;
    --estado-vencido-texto: #C42B1C;
}

body.modo-oscuro {
    --bg-principal: #202020;
    --bg-card: #2B2B2B;
    --bg-hover: #323232;
    --bg-menu-hover: #2D2D2D;
    --border-color: #3c3c3c;
    --text-primary: #FFFFFF;
    --text-secondary: #bcbcbc;
    --accent-color: #4CC2FF;
    --text-fin-semana: #FF99A4;
    --estado-vigente-texto: #6CCB5F;
    --estado-por-vencer-texto: #FCE100;
    --estado-vencido-texto: #FF99A4;
}

/* ====================================================================
   ESTRUCTURA GENERAL
   Menú lateral a la izquierda, contenido principal a la derecha
   ==================================================================== */

body {
    display: flex;
    height: 100vh;
    margin: 0;
    background-color: var(--bg-principal);
    font-family: "Segoe UI", sans-serif;
}

/* Los input y button no heredan la fuente por defecto: se la pedimos */
input,
button {
    font-family: inherit;
}

.LATERAL {
    width: 300px;
    padding: 20px;
}

.PRINCIPAL {
    flex: 1;
    min-width: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Íconos negros: en modo oscuro se invierten a blancos */
body.modo-oscuro .ACORDEON-ICONO,
body.modo-oscuro .DESPLEGABLE-ICONO {
    filter: invert(1);
}

/* ====================================================================
   BARRA DE SCROLL
   ==================================================================== */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    margin: 4px 0;
}

::-webkit-scrollbar-thumb {
    background: #6e6e6e;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #8a8a8a;
}