/* ============================================================
   Theme System - CSS Custom Properties
   Dark theme (default) + Light theme
   meteorologia.com.ar
   ============================================================ */

/* Dark theme (default) */
:root,
[data-theme="dark"] {
    --bg: #0f1923;
    --bg-alt: #141e2a;
    --bg-card: #1a2634;
    --bg-header: #162029;
    --card-hover: #1e2d3e;
    --card-border: #2a3a4d;
    --card-border-hover: #4fc3f7;
    --accent: #4fc3f7;
    --accent-hover: #81d4fa;
    --accent2: #81d4fa;
    --accent-glow: rgba(79, 195, 247, 0.15);
    --accent-dim: rgba(79, 195, 247, 0.12);
    --text: #e0e6ed;
    --text-dim: #8899aa;
    --text-muted: #566676;
    --green: #66bb6a;
    --yellow: #ffa726;
    --orange: #ffa726;
    --gray: #546e7a;
    --red: #ef5350;
    --purple: #ab47bc;
    --temp-color: #ff7043;
    --wind-color: #4fc3f7;
    --rain-color: #42a5f5;
    --pressure-color: #ab47bc;
    --uv-color: #ffee58;
    --solar-color: #ffa726;
    --border: #263545;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-heavy: rgba(0, 0, 0, 0.4);
    --radius: 12px;
    --radius-sm: 8px;
    --transition: 0.2s ease;
    --header-gradient-start: #0d1520;
    --header-gradient-mid: #162638;
    --header-gradient-end: #0d1520;
    --header-stats-bg: rgba(26, 38, 52, 0.7);
    --table-header-bg: rgba(79, 195, 247, 0.1);
    --table-row-hover: rgba(79, 195, 247, 0.05);
    --attribution-bg: rgba(15, 25, 35, 0.8);
    --card-hw-bg: rgba(79, 195, 247, 0.08);
    --cta-gradient-start: rgba(79, 195, 247, 0.1);
    --cta-gradient-end: rgba(79, 195, 247, 0.05);
    --btn-primary-text: #0f1923;
    --btn-primary-shadow: rgba(79, 195, 247, 0.3);
    --spinner-border: #2a3a4d;
    --date-input-scheme: dark;
    --map-filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(1.2) saturate(0.4);
    --leaflet-filter: brightness(0.8) contrast(1.1) saturate(0.9);
    /* registrar.php specific */
    --error-bg: #2d1a1a;
    --error-border: #5c2a2a;
    --error-text: #ff7b7b;
    --success-bg: #1a2d1a;
    --success-border: #2a5c2a;
    --success-text: #7bff7b;
    --info-bg: #1a2234;
    --info-border: #2a4a6d;
    --info-text: #7bb8ff;
    --placeholder: #556677;
    --spinner-inner: rgba(15, 25, 35, 0.3);
    --spinner-top: #0f1923;
    /* Chart grid */
    --chart-grid: rgba(38, 53, 69, 0.5);
    --chart-tick: #566676;
}

/* Light theme */
[data-theme="light"] {
    --bg: #f0f4f8;
    --bg-alt: #e8ecf0;
    --bg-card: #ffffff;
    --bg-header: #ffffff;
    --card-hover: #f5f7fa;
    --card-border: #d4dbe3;
    --card-border-hover: #0288d1;
    --accent: #0288d1;
    --accent-hover: #0277bd;
    --accent2: #039be5;
    --accent-glow: rgba(2, 136, 209, 0.12);
    --accent-dim: rgba(2, 136, 209, 0.08);
    --text: #1a2a3a;
    --text-dim: #546e7a;
    --text-muted: #90a4ae;
    --green: #43a047;
    --yellow: #f57c00;
    --orange: #f57c00;
    --gray: #78909c;
    --red: #e53935;
    --purple: #8e24aa;
    --temp-color: #e64a19;
    --wind-color: #0288d1;
    --rain-color: #1565c0;
    --pressure-color: #8e24aa;
    --uv-color: #f9a825;
    --solar-color: #ef6c00;
    --border: #d4dbe3;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    --shadow-color: rgba(0, 0, 0, 0.08);
    --shadow-heavy: rgba(0, 0, 0, 0.12);
    --radius: 12px;
    --radius-sm: 8px;
    --transition: 0.2s ease;
    --header-gradient-start: #e8ecf0;
    --header-gradient-mid: #f0f4f8;
    --header-gradient-end: #e8ecf0;
    --header-stats-bg: rgba(255, 255, 255, 0.8);
    --table-header-bg: rgba(2, 136, 209, 0.08);
    --table-row-hover: rgba(2, 136, 209, 0.04);
    --attribution-bg: rgba(255, 255, 255, 0.9);
    --card-hw-bg: rgba(2, 136, 209, 0.06);
    --cta-gradient-start: rgba(2, 136, 209, 0.06);
    --cta-gradient-end: rgba(2, 136, 209, 0.02);
    --btn-primary-text: #ffffff;
    --btn-primary-shadow: rgba(2, 136, 209, 0.3);
    --spinner-border: #d4dbe3;
    --date-input-scheme: light;
    --map-filter: none;
    --leaflet-filter: none;
    /* registrar.php specific */
    --error-bg: #fef2f2;
    --error-border: #fca5a5;
    --error-text: #dc2626;
    --success-bg: #f0fdf4;
    --success-border: #86efac;
    --success-text: #16a34a;
    --info-bg: #eff6ff;
    --info-border: #93c5fd;
    --info-text: #2563eb;
    --placeholder: #9ca3af;
    --spinner-inner: rgba(255, 255, 255, 0.3);
    --spinner-top: #ffffff;
    /* Chart grid */
    --chart-grid: rgba(0, 0, 0, 0.08);
    --chart-tick: #78909c;
}

/* ============================================================
   Theme Toggle Button
   ============================================================ */

.theme-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--card-border);
    background: var(--bg-card);
    color: var(--accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    z-index: 10000;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 4px 12px var(--shadow-color);
    padding: 0;
    line-height: 1;
}

.theme-toggle:hover {
    transform: scale(1.1);
    border-color: var(--accent);
    box-shadow: 0 6px 20px var(--shadow-color);
}

/* ============================================================
   Smooth Transitions for Theme Switch
   ============================================================ */

body,
body .site-header,
body .site-footer,
body .header,
body .card,
body .chart-card,
body .form-card,
body .info-section,
body .cta-section,
body .filter-search input,
body .filter-select select,
body .summary-table,
body .data-table,
body .btn,
body .date-controls,
body .view-toggle,
body .date-input,
body .success-card {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Exclude chart canvas and map from transitions */
canvas,
.leaflet-container,
.leaflet-container * {
    transition: none !important;
}