/* /static/css/colors.css */
:root {
    --bg-color: rgb(255, 255, 255);
    --color-font: 30, 32, 35;
    --font-color: rgb(30, 32, 35);
    --color-secondary-font: rgb(105, 105, 105);
    --link-color: rgb(0, 111, 158);
    --black-or-white: 0, 0, 0;
    --white: rgb(255, 255, 255);
    --white-raw: 255, 255, 255;
    --gray80: rgb(210, 210, 210);
    --gray60: rgb(180, 180, 180);
    --gray40: rgb(120, 120, 120);
    --gray20: rgb(90, 90, 90);
    --white20: rgb(243, 215, 214);
    --white40: rgb(231, 174, 173);
    --white60: rgb(220, 134, 133);
    --white80: rgb(208, 93, 92);
    --red: rgb(196, 53, 51);
    --red-raw: 196, 53, 51;
    --red20: rgb(205, 71, 55);
    --red40: rgb(213, 89, 59);
    --red60: rgb(222, 106, 64);
    --red80: rgb(230, 124, 68);
    --orange: rgb(239, 142, 72);
    --orange-raw: 239, 142, 72;
    --orange20: rgb(240, 151, 73);
    --orange40: rgb(241, 160, 75);
    --orange60: rgb(243, 170, 76);
    --orange80: rgb(244, 179, 78);
    --yellow: rgb(245, 188, 79);
    --yellow-raw: 245, 188, 79;
    --yellow20: rgb(217, 182, 80);
    --yellow40: rgb(190, 176, 81);
    --yellow60: rgb(162, 169, 81);
    --yellow80: rgb(135, 163, 82);
    --green: rgb(107, 157, 83);
    --green-raw: 107, 157, 83;
    --green20: rgb(101, 159, 109);
    --green40: rgb(96, 161, 136);
    --green60: rgb(90, 163, 162);
    --green80: rgb(85, 165, 189);
    --lightblue: rgb(79, 167, 215);
    --lightblue-raw: 79, 167, 215;
    --lightblue20: rgb(70, 150, 206);
    --lightblue40: rgb(61, 133, 196);
    --lightblue60: rgb(51, 116, 187);
    --lightblue80: rgb(42, 99, 177);
    --darkblue: rgb(33, 82, 168);
    --darkblue-raw: 33, 82, 168;
    --darkblue20: rgb(59, 83, 166);
    --darkblue40: rgb(84, 85, 163);
    --darkblue60: rgb(110, 86, 161);
    --darkblue80: rgb(135, 88, 158);
    --purple: rgb(161, 89, 156);
    --purple-raw: 161, 89, 156;
    --purple20: rgb(129, 71, 125);
    --purple40: rgb(97, 53, 94);
    --purple60: rgb(64, 36, 62);
    --purple80: rgb(32, 18, 31);
    --black: rgb(0, 0, 0);
    --black-raw: 0, 0, 0;
    --nav-menu-bg-color: rgb(247, 247, 247);
    --nav-menu-bg-color-hover: rgb(255, 255, 255);
    --nav-menu-font-color: rgba(0, 0, 0, 0.87);
    --nav-menu-font-color-hover: rgb(0, 0, 0);
    --nav-menu-item-border-color: rgb(255, 255, 255);
    --search-bg-color: rgb(231, 231, 231);
    --search-focus-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    --action-bar-location-hover-color: rgba(0, 0, 0, .05);
    --action-bar-border-color: rgba(0, 0, 0, .05);
    --page-nav-bg-color: rgb(247, 247, 247);
    --page-nav-border-color: rgb(215, 215, 215);
    --input-bg-color: rgb(247, 247, 247);
    --input-border-color: rgb(163, 163, 163);
    --blue-button-highlight: rgb(0, 143, 191);
    --color-box-bg: rgb(242, 242, 242);
    --color-box-alternate-bg: rgba(0, 0, 0, .1);
    --color-box-title-bg: rgba(0, 0, 0, .1);
    --color-box-border: rgba(0, 0, 0, .1);
    --footer-bg-color: rgb(30, 32, 35);
    --footer-font-color: rgb(255, 255, 255);
    --footer-border-color: rgba(255, 255, 255, .05);
    --map-bg-color: rgb(203, 210, 211);
    --map-border-color: rgb(0, 0, 0, .1);
    --map-controls-title-bg-color: rgb(247, 247, 247);
    --map-controls-label-font-color: rgb(68, 68, 68);
    --map-controls-border-color: rgba(0, 0, 0, .1);
    --switch-bg-color: #ccc;
    --switch-cirlce-color: #fff;
    --widget-empty: #e2e8f0;
    --sun-moon-forecast-bg-color: rgba(0, 0, 0, 0.05);
    --sun-moon-forecast-border-color: rgba(0, 0, 0, 0.2);
    --dashboard-widget-border-color: rgba(0, 0, 0, .1);
    --dashboard-widget-box-shadow-color: rgba(0, 0, 0, .1);
    --humidity-comfortable-color: var(--green-raw);
    --humidity-humid-color: var(--lightblue-raw);
    --humidity-dry-color: var(--red-raw);
    --dashboard-body-border-color: rgba(0, 0, 0, .05);
    --chart-light-color: #fff;
    --chart-dark-color:#e9ecef;
    /* Variables para el selector de tema */
    --theme-toggle-bg: rgba(0,0,0,0.04);
    --theme-toggle-border: rgba(0,0,0,0.08);
    --theme-toggle-color: var(--tt-color);
    --theme-toggle-active-bg: var(--lightblue);
    --theme-toggle-active-color: var(--white);
    --theme-toggle-radius: 10px;
    --theme-toggle-padding: 6px;
    --theme-toggle-gap: 6px;
    --theme-toggle-icon-size: 18px;
    --moon_sunlight: rgb(255, 255, 220);
    --moon_shadow: rgb(24,24,24);
    --moon_surround: rgb(230,230,230);
    /* Variables de Diseño Observatorio (Modo Claro) */
    --obs-bg-dark: rgb(250, 250, 250); /* Fondo casi blanco */
    --obs-neon-light: rgb(0, 150, 136); /* Verde oscuro/cian para texto en modo claro */
    --obs-neon-shadow: 0, 150, 136;
    --obs-accent-light: rgb(255, 140, 0); /* Naranja oscuro */
    --obs-description-bg: rgba(0, 0, 0, 0.03);
    --obs-close-color: rgb(200, 0, 100);
    --button: rgb(220, 220, 220);
    --button-hover: rgb(170, 170, 170);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: rgb(30, 32, 35);
        --color-font: 255, 255, 255;
        --font-color: rgb(255, 255, 255);
        --color-secondary-font: rgb(195, 195, 195);
        --black-or-white: 255, 255, 255;
        --link-color: rgb(200, 200, 255);
        --nav-menu-bg-color: rgb(51, 51, 52);
        --nav-menu-bg-color-hover: rgb(76, 76, 76);
        --nav-menu-font-color: rgb(231, 231, 231);
        --nav-menu-font-color-hover: rgb(255, 255, 255);
        --nav-menu-item-border-color: rgb(30, 32, 35);
        --search-focus-box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
        --action-bar-location-hover-color: rgba(255, 255, 255, .05);
        --action-bar-border-color: rgba(255, 255, 255, .05);
        --page-nav-bg-color: rgb(51, 51, 52);
        --page-nav-border-color: rgb(76, 76, 76);
        --input-bg-color: rgb(51, 51, 52);
        --input-border-color: rgb(76, 76, 76);
        --color-box-bg: rgb(41, 43, 46);
        --color-box-alternate-bg: rgba(255, 255, 255, .1);
        --color-box-title-bg: rgba(255, 255, 255, .1);
        --color-box-border: rgba(255, 255, 255, .1);
        --map-bg-color: rgb(52, 51, 50);
        --map-border-color: rgb(255, 255, 255, .1);
        --map-controls-label-font-color: rgb(247, 247, 247);
        --switch-bg-color: #333;
        --switch-cirlce-color: #666;
        --sun-moon-forecast-bg-color: rgba(255, 255, 255, 0.07);
        --sun-moon-forecast-border-color: rgba(255, 255, 255, 0.15);
        --dashboard-widget-border-color: rgba(255, 255, 255, .1);
        --dashboard-widget-box-shadow-color: rgba(255, 255, 255, .1);
        --widget-empty: rgb(83, 84, 87);
        --dashboard-body-border-color: rgba(255, 255, 255, .05);
        --chart-light-color: #f8f9fa;
        --chart-dark-color:#e9ecef;
        --theme-toggle-bg: rgba(255,255,255,0.03);
        --theme-toggle-border: rgba(255,255,255,0.06);
        --theme-toggle-color: var(--font-color);
        --theme-toggle-active-bg: var(--lightblue-40, var(--lightblue));
        --theme-toggle-active-color: var(--black);
        /* Variables de Diseño Observatorio (Modo Oscuro) */
        --obs-bg-dark: rgb(1, 4, 28); /* Fondo muy oscuro, casi negro-azul */
        --obs-neon-light: rgb(0, 255, 192); /* Verde Neón brillante para texto */
        --obs-neon-shadow: 0, 255, 192;
        --obs-accent-light: rgb(255, 192, 0); /* Amarillo/Naranja brillante para énfasis */
        --obs-description-bg: rgba(255, 255, 255, 0.05); /* Fondo ligeramente transparente */
        --obs-close-color: rgb(255, 0, 112);
        --button: rgb(50,50,50);
        --button-hover: rgb(100, 100, 100);

    }
}

.color-white {
    color:var(--white)
}

.color-white20 {
    color:var(--white20)
}

.color-white40 {
    color:var(--white40)
}

.color-white60 {
    color:var(--white60)
}

.color-white80 {
    color:var(--white80)
}

.color-red {
    color:var(--red)
}

.color-red20 {
    color:var(--red20)
}

.color-red40 {
    color:var(--red40)
}

.color-red60 {
    color:var(--red60)
}

.color-red80 {
    color:var(--red80)
}

.color-orange {
    color:var(--orange)
}

.color-orange20 {
    color:var(--orange20)
}

.color-orange40 {
    color:var(--orange40)
}

.color-orange60 {
    color:var(--orange60)
}

.color-orange80 {
    color:var(--orange80)
}

.color-yellow {
    color:var(--yellow)
}

.color-yellow20 {
    color:var(--yellow20)
}

.color-yellow40 {
    color:var(--yellow40)
}

.color-yellow60 {
    color:var(--yellow60)
}

.color-yellow80 {
    color:var(--yellow80)
}

.color-green {
    color:var(--green)
}

.color-green20 {
    color:var(--green20)
}

.color-green40 {
    color:var(--green40)
}

.color-green60 {
    color:var(--green60)
}

.color-green80 {
    color:var(--green80)
}

.color-lightblue {
    color:var(--lightblue)
}

.color-lightblue20 {
    color:var(--lightblue20)
}

.color-lightblue40 {
    color:var(--lightblue40)
}

.color-lightblue60 {
    color:var(--lightblue60)
}

.color-lightblue80 {
    color:var(--lightblue80)
}

.color-darkblue {
    color:var(--darkblue)
}

.color-darkblue20 {
    color:var(--darkblue20)
}

.color-darkblue40 {
    color:var(--darkblue40)
}

.color-darkblue60 {
    color:var(--darkblue60)
}

.color-darkblue80 {
    color:var(--darkblue80)
}

.color-purple {
    color:var(--purple)
}

.color-purple20 {
    color:var(--purple20)
}

.color-purple40 {
    color:var(--purple40)
}

.color-purple60 {
    color:var(--purple60)
}

.color-purple80 {
    color:var(--purple80)
}

.color-black {
    color:var(--black)
}

.bg-color-white {
    background-color:var(--white)
}

.bg-color-white20 {
    background-color:var(--white20)
}

.bg-color-white40 {
    background-color:var(--white40)
}

.bg-color-white60 {
    background-color:var(--white60)
}

.bg-color-white80 {
    background-color:var(--white80)
}

.bg-color-red {
    background-color:var(--red)
}

.bg-color-red20 {
    background-color:var(--red20)
}

.bg-color-red40 {
    background-color:var(--red40)
}

.bg-color-red60 {
    background-color:var(--red60)
}

.bg-color-red80 {
    background-color:var(--red80)
}

.bg-color-orange {
    background-color:var(--orange)
}

.bg-color-orange20 {
    background-color:var(--orange20)
}

.bg-color-orange40 {
    background-color:var(--orange40)
}

.bg-color-orange60 {
    background-color:var(--orange60)
}

.bg-color-orange80 {
    background-color:var(--orange80)
}

.bg-color-yellow {
    background-color:var(--yellow)
}

.bg-color-yellow20 {
    background-color:var(--yellow20)
}

.bg-color-yellow40 {
    background-color:var(--yellow40)
}

.bg-color-yellow60 {
    background-color:var(--yellow60)
}

.bg-color-yellow80 {
    background-color:var(--yellow80)
}

.bg-color-green {
    background-color:var(--green)
}

.bg-color-green20 {
    background-color:var(--green20)
}

.bg-color-green40 {
    background-color:var(--green40)
}

.bg-color-green60 {
    background-color:var(--green60)
}

.bg-color-green80 {
    background-color:var(--green80)
}

.bg-color-lightblue {
    background-color:var(--lightblue)
}

.bg-color-lightblue20 {
    background-color:var(--lightblue20)
}

.bg-color-lightblue40 {
    background-color:var(--lightblue40)
}

.bg-color-lightblue60 {
    background-color:var(--lightblue60)
}

.bg-color-lightblue80 {
    background-color:var(--lightblue80)
}

.bg-color-darkblue {
    background-color:var(--darkblue)
}

.bg-color-darkblue20 {
    background-color:var(--darkblue20)
}

.bg-color-darkblue40 {
    background-color:var(--darkblue40)
}

.bg-color-darkblue60 {
    background-color:var(--darkblue60)
}

.bg-color-darkblue80 {
    background-color:var(--darkblue80)
}

.bg-color-purple {
    background-color:var(--purple)
}

.bg-color-purple20 {
    background-color:var(--purple20)
}

.bg-color-purple40 {
    background-color:var(--purple40)
}

.bg-color-purple60 {
    background-color:var(--purple60)
}

.bg-color-purple80 {
    background-color:var(--purple80)
}

.bg-color-black {
    background-color: var(--black)
}