/* theme-switcher.css */
/* ============================
Botones de cambio de tema
============================ */
.theme-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.theme-buttons button {
    background: var(--theme-toggle-bg, transparent);
    border: 1px solid var(--theme-toggle-border, rgba(0,0,0,0.1));
    border-radius: 50%;
    padding: 6px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.theme-buttons button:hover {
    transform: scale(1.1);
}

.theme-buttons button.active {
    background: var(--theme-toggle-active-bg, rgba(0,0,0,0.1));
    color: var(--theme-toggle-active-color, var(--font-color));
}

.theme-buttons img {
    width: 18px;
    height: 18px;
    display: block;
}


/* ======================================================
THEME OVERRIDES: Día 🌞 / Noche 🌙 / Auto 🌓
====================================================== */

/* AUTO (según sistema) → simplemente no aplica nada */
:root[data-theme="auto"] {
    color-scheme: light dark;
}

/* ======================================================
MODO DÍA
====================================================== */
:root[data-theme="light"] {
    color-scheme: light;
    --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;
    --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);
    --icon-settings: url('/weather/static/images/icons/settings.svg');
    --icon-city: url('/weather/static/images/icons/location_city.svg');
    --icon-github: url('/weather/static/images/icons/github.svg');
    --icon-rain-drop: url('/weather/static/images/icons/rain-drop.svg');
    --icon-rain-drop-empty: url('/weather/static/images/icons/rain-drop-empty.svg');
    --icon-pws: url('/weather/static/images/icons/pws.svg');
    --icon-time: url('/weather/static/images/icons/time.svg');
    --icon-arrow-back: url('/weather/static/images/icons/arrow-back.svg');
    --icon-arrow-forward: url('/weather/static/images/icons/arrow-forward.svg');
    --icon-arrow-dropdown-blue: url('/weather/static/images/icons/arrow_drop_down-blue.svg');
    --icon-info: url('/weather/static/images/icons/info.svg');
    --icon-plus: url('/weather/static/images/icons/plus.svg');
    --icon-minus: url('/weather/static/images/icons/minus.svg');
    --icon-arrow-right-blue: url('/weather/./static/images/icons/arrow-right-blue.svg');
    --icon-tornado: url('/weather/static/images/icons/tornado.svg');
    --icon-tropical-storm: url('/weather/static/images/icons/tropical-storm.svg');
    --icon-hurricane: url('/weather/static/images/icons/hurricane.svg');
    --icon-strong-storms: url('/weather/static/images/icons/strong-storms.svg');
    --icon-thunderstorms: url('/weather/static/images/icons/thunderstorms.svg');
    --icon-rain-snow: url('/weather/static/images/icons/rain-snow.svg');
    --icon-rain-sleet: url('/weather/static/images/icons/rain-sleet.svg');
    --icon-wintry-mix: url('/weather/static/images/icons/wintry-mix.svg');
    --icon-freezing-drizzle: url('/weather/static/images/icons/freezing-drizzle.svg');
    --icon-drizzle: url('/weather/static/images/icons/drizzle.svg');
    --icon-freezing-rain: url('/weather/static/images/icons/freezing-rain.svg');
    --icon-showers: url('/weather/static/images/icons/showers.svg');
    --icon-rain: url('/weather/static/images/icons/rain.svg');
    --icon-flurries: url('/weather/static/images/icons/flurries.svg');
    --icon-snow-showers: url('/weather/static/images/icons/snow-showers.svg');
    --icon-blowing-drifting-snow: url('/weather/static/images/icons/blowing-drifting-snow.svg');
    --icon-snow: url('/weather/static/images/icons/snow.svg');
    --icon-hail: url('/weather/static/images/icons/hail.svg');
    --icon-sleet: url('/weather/static/images/icons/sleet.svg');
    --icon-blowing-dust-sandstorm: url('/weather/static/images/icons/blowing-dust-sandstorm.svg');
    --icon-foggy: url('/weather/static/images/icons/foggy.svg');
    --icon-haze: url('/weather/static/images/icons/haze.svg');
    --icon-smoke: url('/weather/static/images/icons/smoke.svg');
    --icon-breezy: url('/weather/static/images/icons/breezy.svg');
    --icon-windy: url('/weather/static/images/icons/windy.svg');
    --icon-frigid-ice-crystals: url('/weather/static/images/icons/frigid-ice-crystals.svg');
    --icon-cloudy: url('/weather/static/images/icons/cloudy.svg');
    --icon-mostly-cloudy-night: url('/weather/static/images/icons/mostly-cloudy-night.svg');
    --icon-mostly-cloudy-day: url('/weather/static/images/icons/mostly-cloudy-day.svg');
    --icon-partly-cloudy-night: url('/weather/static/images/icons/partly-cloudy-night.svg');
    --icon-partly-cloudy-day: url('/weather/static/images/icons/partly-cloudy-day.svg');
    --icon-clear-night: url('/weather/static/images/icons/clear-night.svg');
    --icon-sunny-day: url('/weather/static/images/icons/sunny-day.svg');
    --icon-fair-mostly-clear-night: url('/weather/static/images/icons/fair-mostly-clear-night.svg');
    --icon-fair-mostly-sunny-day: url('/weather/static/images/icons/fair-mostly-sunny-day.svg');
    --icon-mixed-rain-and-hail: url('/weather/static/images/icons/mixed-rain-and-hail.svg');
    --icon-hot-day: url('/weather/static/images/icons/hot-day.svg');
    --icon-isolated-thunderstorms-day: url('/weather/static/images/icons/isolated-thunderstorms-day.svg');
    --icon-scattered-thunderstorms-day: url('/weather/static/images/icons/scattered-thunderstorms-day.svg');
    --icon-scattered-showers-day: url('/weather/static/images/icons/scattered-showers-day.svg');
    --icon-heavy-rain: url('/weather/static/images/icons/heavy-rain.svg');
    --icon-scattered-snow-showers-day: url('/weather/static/images/icons/scattered-snow-showers-day.svg');
    --icon-heavy-snow: url('/weather/static/images/icons/heavy-snow.svg');
    --icon-blizzard: url('/weather/static/images/icons/blizzard.svg');
    --icon-not-available: url('/weather/static/images/icons/not-available.svg');
    --icon-scattered-showers-night: url('/weather/static/images/icons/scattered-showers-night.svg');
    --icon-scattered-snow-showers-night: url('/weather/static/images/icons/scattered-snow-showers-night.svg');
    --icon-scattered-thunderstorms-night: url('/weather/static/images/icons/scattered-thunderstorms-night.svg');
    --icon-thermometer: url('/weather/static/images/icons/thermometer.svg');
    --icon-chevron-right: url('/weather/static/images/icons/chevron-right.svg');
    --icon-sunrise: url('/weather/static/images/icons/sunrise.svg');
    --icon-sunset: url('/weather/static/images/icons/sunset.svg');
    --mask-gauge: url('/weather/static/images/masks/gauge.svg');
    --mask-thermometer: url('/weather/static/images/masks/thermometer.svg');
    --image-wind-bg: url('/weather/static/images/widgets/wind-bg.svg');
    --image-wind-arrow-tip: url('/weather/static/images/widgets/wind-arrow-tip.svg');
    --image-dew-point-bg: url('/weather/static/images/widgets/dewpoint-bg.svg');
    --image-dew-point-empty-bg: url('/weather/static/images/widgets/dewpoint-empty-bg.svg');
    --image-temp-arrow-tip: url('/weather/static/images/widgets/temp-arrow-tip.svg');
    --image-pressure-bg: url('/weather/static/images/widgets/pressure-bg.svg');
    --icon-weather-underground-logo: url('/weather/static/images/icons/weather-underground-logo.svg');
    --icon-copyright: url('/weather/static/images/icons/copyright-light.svg');
    --image-background-moon-card: url('/weather/static/images/backgrounds/stars1.png');
    --icon-espacioprofundo: url('/weather/static/images/icons/espacioprofundo-day.png');
}

/* ======================================================
MODO NOCHE
====================================================== */
:root[data-theme="dark"] {
    color-scheme: dark;
    --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);
    --icon-settings: url('/weather/static/images/icons/settings-dark.svg');
    --icon-city: url('/weather/static/images/icons/city-dark.svg');
    --icon-github: url('/weather/static/images/icons/github-dark.svg');
    --icon-clear-night: url('/weather/static/images/icons/clear-night.svg');
    --icon-breezy: url('/weather/static/images/icons/breezy.svg');
    --icon-cloudy: url('/weather/static/images/icons/cloudy.svg');
    --icon-sunrise: url('/weather/static/images/icons/sunrise.svg');
    --icon-pws: url('/weather/static/images/icons/pws-dark.svg');
    --icon-time: url('/weather/static/images/icons/time-dark.svg');
    --icon-arrow-back: url('/weather/static/images/icons/arrow-back-dark.svg');
    --icon-arrow-forward: url('/weather/static/images/icons/arrow-forward-dark.svg');
    --icon-info: url('/weather/static/images/icons/info-dark.svg');
    --icon-thermometer: url('/weather/static/images/icons/thermometer-dark.svg');
    --icon-chevron-right: url('/weather/static/images/icons/chevron-right-dark.svg');
    --icon-plus: url('/weather/static/images/icons/plus-dark.svg');
    --icon-minus: url('/weather/static/images/icons/minus-dark.svg');
    --image-wind-bg: url('/weather/static/images/widgets/wind-bg-dark.svg');
    --image-wind-arrow-tip: url('/weather/static/images/widgets/wind-arrow-tip-dark.svg');
    --icon-copyright: url('/weather/static/images/icons/copyright-dark.svg');
    --image-pressure-bg: url('/weather/static/images/widgets/pressure-bg-dark.svg');
    --icon-espacioprofundo: url('/weather/static/images/icons/espacioprofundo-night.png');
}

/* ===============================================
Invertir iconos en modo oscuro
=============================================== */

/* Por defecto (modo claro o auto) */
:root[data-theme="light"] .theme-buttons img,
:root[data-theme="auto"] .theme-buttons img {
    filter: invert(0);
}

/* En modo oscuro */
:root[data-theme="dark"] .theme-buttons img {
    filter: invert(1) brightness(1.2);
}