:root {
    /* DARK THEME (default) */
    --bg: #0b0f14;
    --bg-gradient-color: #122336;
    --panel: #121a22;
    --panel-rgb: 18, 26, 34;
    --topbar-bg: rgba(11, 15, 20, .85);
    --sidebar-inset-shadow: inset 0 0 40px rgba(0, 0, 0, 0.2);
    --card: #161e27;
    --surface-raised: #1e2936;
    --row-hover: #1f272f;
    --row-hover-dim: #1c242c;
    --dow-bg: #1a242f;
    --text: #e7eef6;
    --text-strong: #ffffff;
    --muted: #9fb2c5;
    --border: rgba(255, 255, 255, 0.08);
    --tint-rgb: 255, 255, 255;

    --primary: #4ea1ff;
    --primary-rgb: 78, 161, 255;
    --danger: #ff5c7a;
    --danger-rgb: 255, 92, 122;
    --ok: #29d391;
    --ok-rgb: 41, 211, 145;
    --warning: #ffb86c;
    --warning-rgb: 255, 184, 108;
    --info: #ffcc00;
    --info-rgb: 255, 204, 0;

    --well-bg: rgba(0, 0, 0, 0.3);
    --well-bg-strong: rgba(0, 0, 0, 0.5);
    --date-icon-filter: invert(1);

    /* PME dimension colors used as TEXT (headings). Same as the vivid brand
       color in dark theme; darkened per-hue in light theme for contrast. */
    --dim-text-liderazgo: #009fe3;
    --dim-text-pedagogica: #d6006e;
    --dim-text-convivencia: #f5c200;
    --dim-text-recursos: #38a846;

    --form-fade-shadow: 0 -15px 25px -10px rgba(0, 0, 0, 0.8);

    --radius: 14px;
    --shadow: 0 12px 30px rgba(0, 0, 0, .4);
}

:root[data-theme="light"] {
    --bg: #eef1f6;
    --bg-gradient-color: #dbe6f5;
    --panel: #ffffff;
    --panel-rgb: 255, 255, 255;
    --topbar-bg: rgba(255, 255, 255, .85);
    --sidebar-inset-shadow: none;
    --card: #ffffff;
    --surface-raised: #ffffff;
    --row-hover: #eef2f7;
    --row-hover-dim: #e6ebf2;
    --dow-bg: #eef2f7;
    --text: #1c2733;
    --text-strong: #0b0f14;
    --muted: #5b6b7c;
    --border: rgba(0, 0, 0, 0.1);
    --tint-rgb: 0, 0, 0;

    --primary: #2971c9;
    --primary-rgb: 41, 113, 201;
    --danger: #d63958;
    --danger-rgb: 214, 57, 88;
    --ok: #1f9968;
    --ok-rgb: 31, 153, 104;
    --warning: #c17d17;
    --warning-rgb: 193, 125, 23;
    --info: #a67c00;
    --info-rgb: 166, 124, 0;

    --well-bg: rgba(0, 0, 0, 0.04);
    --well-bg-strong: rgba(0, 0, 0, 0.07);
    --date-icon-filter: none;

    --dim-text-liderazgo: #0a6fa3;
    --dim-text-pedagogica: #a3005a;
    --dim-text-convivencia: #b08c00;
    --dim-text-recursos: #2b7a3a;

    --form-fade-shadow: 0 -15px 25px -10px rgba(20, 30, 45, 0.15);

    --shadow: 0 12px 30px rgba(20, 30, 45, .12);
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    background: radial-gradient(1200px 700px at 20% 0%, var(--bg-gradient-color) 0%, var(--bg) 60%);
    color: var(--text);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: background 0.2s ease, color 0.2s ease;
}

/* SCROLLBARS MODERN */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(var(--tint-rgb), 0.05);
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--tint-rgb), 0.15);
    border-radius: 5px;
    border: 2px solid var(--panel);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--tint-rgb), 0.3);
}

::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0);
}

@media print {

    /* Force background colors */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}