/* ============================================================
   historico.css — paleta alineada con meteobezana.css
   Mismos colores, misma tipografía, mismo glassmorphism
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

   :root {
       /* ── Fondos (meteobezana dark) ── */
       --bg-deep:    #0d1117;
       --bg-base:    #0d1117;
       --bg-mid:     #161b22;
       --bg-surface: #161b22;
       --bg-card:    rgba(28,33,40,0.75);
   
       /* ── Accent azul (meteobezana dark: --blue: #58a6ff) ── */
       --indigo-50:  #0d2044;
       --indigo-100: #0d2044;
       --indigo-200: #93c5fd;
       --indigo-300: #60a5fa;
       --indigo-400: #58a6ff;
       --indigo-500: #3b82f6;
       --indigo-600: #2563eb;
   
       --violet-300: #c4b5fd;
       --violet-400: #a78bfa;
       --violet-500: #8b5cf6;
   
       --cyan-300: #67e8f9;
       --cyan-400: #22d3ee;
       --cyan-500: #06b6d4;
   
       --blue-100: #0d2044;
       --blue-200: #93c5fd;
       --blue-300: #60a5fa;
       --blue-400: #58a6ff;
       --blue-500: #3b82f6;
       --cold:     #22d3ee;
   
       /* ── Texto (meteobezana dark) ── */
       --text-primary:   #e6edf3;
       --text-secondary: #c9d1d9;
       --text-muted:     #8b949e;
       --text-disabled:  #6e7681;
   
       /* ── Semánticos ── */
       --warm:           #f85149;
       --warm-bg:        hsla(3,90%,64%,0.12);
       --warm-border:    hsla(3,90%,64%,0.28);
   
       --cold-bg:        hsla(188,94%,48%,0.10);
       --cold-border:    hsla(188,94%,48%,0.28);
   
       --warning:        #e3b341;
       --warning-bg:     hsla(43,75%,56%,0.12);
       --warning-border: hsla(43,75%,56%,0.28);
   
       --success:        #3fb950;
       --success-bg:     hsla(134,61%,41%,0.12);
       --success-border: hsla(134,61%,41%,0.28);
   
       --teal:           #3fb950;
       --teal-bg:        hsla(134,61%,41%,0.10);
       --teal-border:    hsla(134,61%,41%,0.24);
   
       /* ── Superficies glass (meteobezana dark) ── */
       --glass-xs: rgba(255,255,255,0.02);
       --glass-sm: rgba(255,255,255,0.04);
       --glass-md: rgba(255,255,255,0.07);
       --glass-lg: rgba(255,255,255,0.11);
       --glass-xl: rgba(255,255,255,0.16);
       --glass-low: rgba(255,255,255,0.04);
       --glass-high: rgba(255,255,255,0.14);
   
       /* ── Bordes ── */
       --border-white-sm: rgba(255,255,255,0.08);
       --border-white-md: rgba(255,255,255,0.12);
       --border-blue-sm:  rgba(88,166,255,0.20);
       --border-blue-md:  rgba(88,166,255,0.38);
       --border-blue-lg:  rgba(88,166,255,0.62);
       --border-blue:     rgba(88,166,255,0.25);
       --border-blue-strong: rgba(88,166,255,0.55);
   
       /* ── Sombras ── */
       --shadow-sm: 0 2px 8px rgba(0,0,0,0.40);
       --shadow-md: 0 6px 20px rgba(0,0,0,0.55);
       --shadow-lg: 0 16px 48px rgba(0,0,0,0.70);
   
       /* ── Radios ── */
       --r-xs: 6px;
       --r-sm: 8px;
       --r-md: 12px;
       --r-lg: 16px;
       --r-xl: 22px;
       --r-2xl: 28px;
   
       /* ── Transiciones ── */
       --t-fast: all 0.15s cubic-bezier(0.4,0,0.2,1);
       --t-std:  all 0.22s cubic-bezier(0.4,0,0.2,1);
       --t-slow: all 0.35s cubic-bezier(0.4,0,0.2,1);
   
       /* ── Gradients ── */
       --grad-primary: linear-gradient(135deg, #58a6ff 0%, #22d3ee 100%);
       --grad-warm:    linear-gradient(135deg, #f85149 0%, #e3b341 100%);
       --grad-surface: linear-gradient(160deg, #0d1117 0%, #161b22 50%, #0d1117 100%);
   }
   
   @media (prefers-contrast: more) {
       :root {
           --text-primary:    #ffffff;
           --text-secondary:  #e8eaff;
           --text-muted:      #b0b8e8;
           --border-blue-sm:  hsla(234,80%,65%,0.55);
           --border-white-sm: hsla(230,60%,80%,0.28);
           --glass-md:        hsla(230,40%,60%,0.22);
           --bg-base:         #080a14;
           --bg-mid:          #0d0f20;
       }
   }
   
   @media (prefers-reduced-motion: reduce) {
       *, *::before, *::after {
           animation-duration: 0.01ms !important;
           transition-duration: 0.01ms !important;
       }
   }
   
   * {
       box-sizing: border-box;
   }
   
   /* Mantener background y lectura, pero usar flujo normal para que el header quede arriba */
           body {
       margin: 0;
       padding: 0;
       font-family: 'Inter', system-ui, -apple-system, sans-serif;
       background: var(--grad-surface);
       background-attachment: fixed;
       min-height: 100vh;
       color: var(--text-primary);
       text-shadow: none;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       font-size: 15px;
       line-height: 1.6;
   }
   
   /* Centrar el contenido principal y separar del header */
           .container {
       max-width: 1200px;
       width: 100%;
       padding: 20px;
       margin: 18px auto;
   }
   
   .widget {
       background: linear-gradient(160deg,
           hsla(234,40%,14%,0.95) 0%,
           hsla(240,38%,11%,0.98) 100%);
       backdrop-filter: blur(32px) saturate(1.4);
       -webkit-backdrop-filter: blur(32px) saturate(1.4);
       border: 1px solid var(--border-blue-sm);
       border-radius: var(--r-2xl);
       padding: 32px;
       box-shadow: var(--shadow-lg);
       /* Subtle inner glow */
       outline: 1px solid hsla(234,60%,60%,0.06);
       outline-offset: -1px;
   }
   
   h1 {
       margin-bottom: 30px;
       font-size: 28px;
       font-weight: 700;
       letter-spacing: -0.025em;
       font-feature-settings: "ss03" 1, "cv01" 1;
       background: linear-gradient(130deg, #f0f2ff 0%, var(--indigo-200) 50%, var(--cyan-300) 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       line-height: 1.15;
   }
   
   .info-box {
       background: linear-gradient(135deg, hsla(213,71%,53%,0.12), hsla(213,71%,53%,0.10));
       border-radius: var(--r-lg);
       padding: 20px;
       margin-bottom: 30px;
       font-size: 14px;
       line-height: 1.7;
       border-left: 4px solid var(--border-blue-lg);
       box-shadow: var(--shadow-sm);
   }
   
   .info-box strong {
       font-size: 16px;
       display: block;
       margin-bottom: 8px;
       color: var(--blue-300);
       font-weight: 700;
   }
   
   .info-box .info-highlight {
       background: var(--glass-lg);
       padding: 12px;
       border-radius: var(--r-sm);
       margin-top: 12px;
       font-size: 13px;
   }
   
   .info-box ul {
       margin: 10px 0;
       padding-left: 20px;
   }
   
   .info-box li {
       margin: 6px 0;
   }
   
   .controls {
       margin-bottom: 30px;
   }
   
   .control-label {
       font-weight: 600;
       opacity: 0.9;
       margin-bottom: 12px;
       display: block;
   }
   
   .pill-group {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
   }
   
   .pill-btn {
       background: var(--glass-sm);
       border: 1px solid var(--border-blue-sm);
       color: var(--text-secondary);
       padding: 8px 16px;
       border-radius: 999px;
       cursor: pointer;
       transition: var(--t-std);
       font-size: 13.5px;
       font-weight: 500;
       letter-spacing: 0.01em;
       user-select: none;
   }
   
   .pill-btn:hover {
       background: hsla(234,70%,65%,0.18);
       border-color: var(--border-blue-md);
       color: var(--text-primary);
       transform: translateY(-1px);
   }
   
   .pill-btn.active {
       background: linear-gradient(135deg,
           hsla(234,70%,65%,0.28) 0%,
           hsla(188,94%,48%,0.16) 100%);
       color: var(--indigo-200);
       font-weight: 600;
       border-color: var(--border-blue-lg);
       box-shadow: 0 0 0 1px hsla(234,70%,65%,0.15) inset,
                   0 2px 8px rgba(100,113,245,0.20);
   }
   
   .var-group {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       justify-content: center;
   }
   
   .var-btn {
       background: var(--glass-md);
       border: 1px solid var(--border-blue-sm);
       color: var(--text-primary);
       padding: 14px 24px;
       border-radius: var(--r-lg);
       cursor: pointer;
       transition: var(--t-std);
       font-size: 16px;
       font-weight: 500;
       min-width: 180px;
       text-align: center;
   }
   
   .var-btn:hover {
       background: hsla(213,71%,53%,0.18);
       transform: translateY(-2px);
       box-shadow: var(--shadow-sm);
   }
   
   .var-btn.active {
       background: hsla(213,71%,53%,0.26);
       color: var(--blue-300);
       font-weight: 700;
       border-color: var(--border-blue-lg);
   }
   
   .stats {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
       gap: 6px;
       margin-bottom: 16px;
       align-items: start;
   }
   
   @media (min-width: 768px) {
               .stats {
                   grid-template-columns: repeat(4, 1fr);
               }
           }
   
   @media (min-width: 1200px) {
               .stats {
                   grid-template-columns: repeat(6, 1fr);
               }
           }
   
   /* Accordion de estadísticas */
           .stats-accordion,
           .info-accordion {
       background: var(--glass-sm);
       border: 1px solid var(--border-white-sm);
       border-radius: var(--r-lg);
       margin-bottom: 14px;
       overflow: hidden;
       transition: var(--t-fast);
   }
   
   .stats-accordion:hover,
   .info-accordion:hover {
       border-color: var(--border-blue-sm);
   }
   
   .info-accordion .info-box {
       background: transparent;
       border: none;
       box-shadow: none;
       border-left: none;
       padding: 0;
       margin: 0;
   }
   
   .accordion-header {
       padding: 14px 18px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: space-between;
       transition: var(--t-fast);
       user-select: none;
       font-weight: 600;
       font-size: 14.5px;
       color: var(--text-secondary);
       letter-spacing: 0.01em;
   }
   
   .accordion-header:hover {
       background: var(--glass-md);
       color: var(--text-primary);
   }
   
   .stats-accordion.open > .accordion-header,
   .info-accordion.open > .accordion-header {
       color: var(--text-primary);
       border-bottom: 1px solid var(--border-white-sm);
   }
   
   .accordion-icon {
       transition: transform 0.3s;
       margin-left: auto;
   }
   
   .stats-accordion.open .accordion-icon,
           .info-accordion.open .accordion-icon {
       transform: rotate(180deg);
   }
   
   .accordion-content {
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.3s ease-out;
   }
   
   .stats-accordion.open .accordion-content,
           .info-accordion.open .accordion-content {
       max-height: 8000px;
       padding: 16px;
       transition: max-height 0.5s ease-in;
   }
   
   .stat-card {
       background: var(--glass-sm);
       border-radius: var(--r-md);
       padding: 11px 12px 10px;
       text-align: center;
       transition: var(--t-fast);
       border: 1px solid var(--border-white-sm);
       position: relative;
       overflow: hidden;
   }
   
   .stat-card::before {
       content: '';
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg,
           hsla(234,70%,70%,0.04) 0%,
           transparent 60%);
       pointer-events: none;
   }
   
   .stat-card:hover {
       background: var(--glass-md);
       border-color: var(--border-blue-sm);
       transform: translateY(-1px);
       box-shadow: var(--shadow-sm);
   }
   
   .stat-label {
       font-size: 10px;
       color: var(--text-muted);
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 3px;
       line-height: 1.2;
       text-transform: uppercase;
       letter-spacing: 0.05em;
       font-weight: 600;
   }
   
   .stat-value {
       font-size: 18px;
       font-weight: 700;
       margin: 5px 0 3px;
       letter-spacing: -0.02em;
       color: var(--text-primary);
   }
   
   .stat-indicator {
       display: inline-block;
       font-size: 9px;
       opacity: 0.85;
       margin-top: 2px;
       font-weight: 600;
       background: var(--glass-md);
       padding: 1px 6px;
       border-radius: 99px;
   }
   
   /* Sección de encabezados de estadísticas */
           .stats-section-header {
       grid-column: 1 / -1;
       background: transparent;
       padding: 8px 4px 4px;
       margin-top: 12px;
       margin-bottom: 6px;
       font-weight: 600;
       font-size: 10px;
       text-transform: uppercase;
       letter-spacing: 0.09em;
       color: var(--text-muted);
       display: flex;
       align-items: center;
       gap: 6px;
       border-bottom: 1px solid var(--border-white-sm);
       padding-bottom: 6px;
   }
   
   .stats-section-header:first-child { margin-top: 0; }
   
   .stats-section-header:first-child {
       margin-top: 0;
   }
   
   .stats-section-header .material-symbols-outlined {
       font-size: 14px;
   }
   
   /* Stat cards con colores específicos */
           .stat-highlight-blue {
       background: var(--cold-bg) !important;
       border-left: 2px solid var(--cold-border);
   }
   
   .stat-highlight-blue:hover {
       background: hsla(199,91%,64%,0.18) !important;
   }
   
   .stat-highlight-red {
       background: var(--warm-bg) !important;
       border-left: 2px solid var(--warm-border);
   }
   
   .stat-highlight-red:hover {
       background: hsla(0,100%,65%,0.20) !important;
   }
   
   .stat-highlight-orange {
       background: hsla(14,100%,65%,0.10) !important;
       border-left: 2px solid hsla(14,100%,65%,0.35);
   }
   
   .stat-highlight-orange:hover {
       background: hsla(14,100%,65%,0.18) !important;
   }
   
   .stat-highlight-yellow {
       background: var(--warning-bg) !important;
       border-left: 2px solid var(--warning-border);
   }
   
   .stat-highlight-yellow:hover {
       background: hsla(45,100%,58%,0.18) !important;
   }
   
   table {
       width: 100%;
       border-collapse: collapse;
       background: var(--glass-lg);
       border-radius: var(--r-md);
       overflow: hidden;
   }
   
   th, td {
       padding: 12px;
       text-align: center;
       border-bottom: 1px solid var(--border-white-md);
   }
   
   th {
       background: hsla(234,60%,55%,0.14);
       cursor: pointer;
       transition: var(--t-fast);
       user-select: none;
       color: var(--indigo-200);
       font-weight: 600;
       font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 0.06em;
       padding: 10px 12px;
   }
   
   th:hover {
       background: hsla(234,60%,55%,0.22);
       color: var(--indigo-100);
   }
   
   tr:hover td {
       background: hsla(234,40%,60%,0.07);
   }
   
   td {
       font-size: 13.5px;
       color: var(--text-secondary);
       padding: 10px 12px;
   }
   
   tr:last-child td { border-bottom: none; }
   
   .current-var {
       text-align: center;
       font-size: 22px;
       margin: 20px 0 10px;
       font-weight: 700;
       color: #ffffff;
       opacity: 1;
   }
   
   .footer {
       text-align: center;
       margin-top: 30px;
       opacity: 0.8;
       font-size: 14px;
   }
   
   .footer a {
       color: var(--blue-400);
       text-decoration: none;
       font-weight: 600;
   }
   
   @media (max-width:768px) { .pill-group { justify-content:center; } }
   
   .table-wrapper {
       overflow-x: auto;
       max-width: 100%;
       border-radius: var(--r-md);
       background: var(--glass-md);
   }
   
   .table-wrapper table {
       min-width: 100%;
       width: auto;
   }
   
   @media (max-width: 768px) {
               .table-wrapper {
                   -webkit-overflow-scrolling: touch;
               }
               
               .table-wrapper table {
                   min-width: 800px;
               }
               
               th, td {
                   white-space: nowrap;
               }
           }
   
   #loading {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(7,8,15,0.80);
       backdrop-filter: blur(8px);
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 1000;
   }
   
   #loading.hidden {
       display: none;
   }
   
   .spinner {
       border: 3px solid hsla(234,70%,65%,0.20);
       border-top: 3px solid var(--indigo-300);
       border-right: 3px solid var(--cyan-400);
       border-radius: 50%;
       width: 42px;
       height: 42px;
       animation: spin 0.8s cubic-bezier(0.5,0,0.5,1) infinite;
       box-shadow: 0 0 20px hsla(234,70%,65%,0.30);
   }
   
   @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
   
   .select-all-btn {
       background: var(--glass-sm);
       color: var(--text-muted);
       border: 1px solid var(--border-white-sm);
       padding: 5px 12px;
       border-radius: var(--r-xs);
       cursor: pointer;
       margin-bottom: 8px;
       margin-right: 6px;
       transition: var(--t-fast);
       font-weight: 500;
       font-size: 12px;
       letter-spacing: 0.01em;
   }
   
   .select-all-btn:hover {
       background: var(--glass-md);
       border-color: var(--border-blue-sm);
       color: var(--text-secondary);
   }
   
   .export-buttons {
       display: flex;
       gap: 12px;
       justify-content: center;
       margin: 20px 0;
       flex-wrap: wrap;
   }
   
   .export-btn {
       display: inline-flex;
       align-items: center;
       gap: 7px;
       background: var(--glass-sm);
       color: var(--text-secondary);
       border: 1px solid var(--border-white-sm);
       padding: 9px 18px;
       border-radius: var(--r-md);
       cursor: pointer;
       font-weight: 500;
       transition: var(--t-std);
       font-size: 13px;
       letter-spacing: 0.01em;
   }
   
   .export-btn:hover {
       background: var(--glass-md);
       color: var(--text-primary);
       border-color: var(--border-blue-sm);
       transform: translateY(-2px);
       box-shadow: var(--shadow-sm);
   }
   
   .climogram-btn {
       background: var(--warm-bg);
       border-color: var(--warm-border);
   }
   
   .climogram-btn:hover {
       background: hsla(0,100%,65%,0.20);
   }
   
   #chart-container {
       margin-top: 24px;
       background: var(--glass-xs);
       border: 1px solid var(--border-white-sm);
       border-radius: var(--r-lg);
       padding: 24px;
       box-shadow: var(--shadow-md);
       position: relative;
   }
   
   /* Current Weather Widget Styles */
           .header-with-widget {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 16px;
       margin-bottom: 8px;
       flex-wrap: wrap;
       padding: 8px 0;
       min-height: auto;
   }
   
   .header-with-widget h1 {
       margin: 0;
       flex: 1;
       min-width: 0;
       line-height: 1.2;
       font-size: 1.875rem;
       font-weight: 600;
   }
   
   .current-weather-widget {
       background: var(--glass-lg);
       backdrop-filter: blur(20px);
       border: 1px solid var(--border-blue-sm);
       border-radius: var(--r-lg);
       padding: 10px 14px;
       box-shadow: var(--shadow-md);
       flex-shrink: 0;
       min-width: 0;
       max-width: 280px;
       width: 100%;
       transition: var(--t-std);
   }
   
   .current-weather-widget:hover {
       background: var(--glass-xl);
       border-color: var(--border-white-md);
       transform: translateY(-2px);
       box-shadow: var(--shadow-md);
   }
   
   .current-weather-loading {
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 12px;
       height: 100%;
   }
   
   /* Layout compacto: icono | temp+location + detalles en fila */
           .current-weather-content {
   display: flex;
               gap: 10px;
               align-items: center;
   }
   
   .current-weather-icon {
       font-size: 48px;
       line-height: 1;
       flex-shrink: 0;
       color: var(--blue-300);
   }
   
   .current-weather-data {
       flex: 1;
       min-width: 0;
   }
   
   .current-weather-main {
       margin-bottom: 4px;
       display: flex;
       align-items: center;
       gap: 8px;
   }
   
   .current-weather-temp {
       font-size: 24px;
       font-weight: 700;
       line-height: 1;
       margin-bottom: 3px;
   }
   
   .current-weather-location {
       display: flex;
       align-items: center;
       gap: 4px;
       font-size: 14px;
       opacity: 0.9;
   }
   
   .current-weather-location a {
   color: var(--blue-300);
               text-decoration: none;
               display: flex;
               align-items: center;
               gap: 3px;
               transition: opacity 0.2s;
   }
   
   .current-weather-location a .material-symbols-outlined {
   font-size: 13px !important;
   }
   
   .current-weather-location a:hover {
   opacity: 0.8;
   }
   
   .station-info-btn {
       background: none;
       border: none;
       border-radius: 50%;
       width: 22px;
       height: 22px;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: all 0.2s;
       padding: 0;
       color: var(--text-secondary);
   }
   
   .station-info-btn:hover {
   background: hsla(0,0%,100%,0.30);
               transform: scale(1.05);
   }
   
   .station-info-btn .material-symbols-outlined {
   font-size: 13px;
   }
   
   /* Detalles en fila horizontal compacta */
           .current-weather-details {
   display: flex;
               flex-wrap: wrap;
               gap: 3px 10px;
   }
   
   .weather-detail {
       display: flex;
       align-items: center;
       gap: 4px;
       font-size: 12px;
       white-space: nowrap;
   }
   
   .weather-detail .material-symbols-outlined {
   font-size: 14px !important;
               opacity: 0.8;
   }
   
   .current-weather-error {
       display: flex;
       align-items: center;
       gap: 8px;
       justify-content: center;
       padding: 20px;
       opacity: 0.88;
       color: var(--text-muted);
   }
   
   .current-weather-error .material-symbols-outlined {
   font-size: 24px;
   }
   
   @media (max-width: 600px) {
               .header-with-widget {
                   flex-direction: column;
                   align-items: stretch;
               }
               
               .header-with-widget h1 {
                   text-align: center;
                   min-width: auto;
               }
               
               .current-weather-widget {
                   min-width: auto;
               }
               
               .current-weather-content {
                   flex-direction: column;
                   text-align: center;
               }
               
               .current-weather-details {
                   grid-template-columns: 1fr;
               }
               
               .weather-detail {
                   justify-content: center;
               }
           }
   
   .chart-header {
   display: flex;
               justify-content: space-between;
               align-items: center;
               margin-bottom: 16px;
               flex-wrap: wrap;
               gap: 10px;
   }
   
   .chart-title {
   font-size: 18px;
               font-weight: 600;
               opacity: 0.95;
   }
   
   .chart-controls {
   display: flex;
               gap: 6px;
               align-items: center;
   }
   
   /* Separador visual entre grupos de botones */
           .chart-controls-sep {
   width: 1px;
               height: 24px;
               background: var(--glass-xl);
               margin: 0 2px;
   }
   
   /* En escritorio los controles flotan sobre el gráfico */
           .chart-float {
   position: absolute;
               top: 10px;
               right: 10px;
               z-index: 10;
   }
   
   .chart-btn {
       background: var(--glass-sm);
       backdrop-filter: blur(12px);
       border: 1px solid var(--border-white-sm);
       color: var(--text-muted);
       padding: 7px;
       border-radius: var(--r-sm);
       cursor: pointer;
       transition: var(--t-fast);
       width: 34px;
       height: 34px;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
   }
   
   .chart-btn:hover {
       background: var(--glass-md);
       border-color: var(--border-blue-sm);
       color: var(--text-primary);
       transform: scale(1.06);
   }
   
   .chart-btn.active {
       background: linear-gradient(135deg, hsla(234,70%,65%,0.30), hsla(188,94%,48%,0.18));
       border-color: var(--border-blue-md);
       color: var(--indigo-200);
       box-shadow: 0 0 12px hsla(234,70%,65%,0.25);
   }
   
   @media (max-width: 768px) {
               #chart-container {
                   /* deja espacio arriba para la barra de controles */
                   padding-top: 12px;
               }
   
               /* Quitar posición absoluta en móvil */
               .chart-float {
                   position: static;
                   top: auto;
                   right: auto;
               }
   
               /* El header pasa a columna: título arriba, controles abajo */
               .chart-header {
                   flex-direction: column;
                   align-items: stretch;
                   gap: 10px;
                   margin-bottom: 12px;
               }
   
               .chart-title {
                   font-size: 15px;
                   text-align: center;
               }
   
               /* Barra de botones: centrada, con fondo visible */
               .chart-controls {
                   justify-content: center;
                   flex-wrap: wrap;
                   gap: 6px;
                   background: rgba(0,0,0,0.25);
                   border-radius: 12px;
                   padding: 8px 10px;
               }
   
               /* Botones más grandes y con etiqueta en móvil */
               .chart-btn {
                   width: auto;
                   height: 38px;
                   padding: 0 12px;
                   border-radius: 10px;
                   gap: 5px;
                   font-size: 12px;
                   background: var(--glass-md);
                   border-color: var(--glass-xl);
               }
   
               /* Mostrar etiqueta de texto junto al icono en móvil */
               .chart-btn .icon-chart {
                   font-size: 18px !important;
               }
   
               /* Etiquetas de texto en móvil */
               .chart-btn[id="btn-line"]::after    { content: "Línea"; font-size: 11px; margin-left: 3px; }
               .chart-btn[id="btn-bar"]::after     { content: "Barras"; font-size: 11px; margin-left: 3px; }
               .chart-btn[id="btn-anomaly"]::after { content: "Anomalía"; font-size: 11px; margin-left: 3px; }
   
               .chart-controls-sep {
                   display: none;
               }
           }
   
   @media (max-width: 480px) {
               .chart-btn {
                   padding: 0 9px;
                   height: 36px;
               }
               .chart-btn[id="btn-line"]::after    { content: ""; }
               .chart-btn[id="btn-bar"]::after     { content: ""; }
               .chart-btn[id="btn-anomaly"]::after { content: ""; }
               .chart-btn {
                   width: 40px;
               }
           }
   
   .debug-btn {
   position: fixed;
               bottom: 20px;
               right: 20px;
               background: rgba(255,100,100,0.3);
               border: 1px solid hsla(0,0%,100%,0.30);
               color: white;
               padding: 10px 16px;
               border-radius: 8px;
               cursor: pointer;
               font-size: 12px;
               transition: all 0.2s;
               z-index: 1000;
   }
   
   .debug-btn:hover {
   background: rgba(255,100,100,0.5);
               transform: scale(1.05);
   }
   
   canvas {
   max-height: 500px !important; 
               width: 100% !important;
   }
   
   .data-quality-indicator {
   display: inline-block;
               padding: 2px 7px;
               border-radius: 99px;
               font-size: 9px;
               font-weight: 600;
               margin-top: 3px;
   }
   
   .quality-high {
   background: var(--success-bg); color: var(--success);
   }
   
   .quality-medium {
   background: var(--warning-bg); color: var(--warning);
   }
   
   .quality-low {
   background: var(--warm-bg); color: var(--warm);
   }
   
   @media (max-width: 768px) {
               .container { padding: 12px; }
               .widget { padding: 20px 16px; border-radius: 20px; }
               h1 { font-size: 20px; margin-bottom: 20px; }
               h1 .material-symbols-outlined { font-size: 28px !important; margin-right: 8px !important; }
               
               .info-box { 
                   padding: 16px; 
                   margin-bottom: 20px; 
                   font-size: 13px;
                   line-height: 1.6;
               }
               
               .controls { margin-bottom: 20px; }
               
               .control-label { 
                   font-size: 14px; 
                   margin-bottom: 10px;
               }
               
               .pill-group { gap: 6px; }
               
               .pill-btn {
                   padding: 8px 14px;
                   font-size: 13px;
               }
               
               .var-btn {
                   padding: 12px 16px;
                   font-size: 14px;
                   min-width: 140px;
                   flex: 1 1 calc(50% - 6px);
               }
               
               .stats {
                   grid-template-columns: repeat(3, 1fr);
                   gap: 5px;
                   margin-bottom: 14px;
               }
               
               .stats-accordion,
               .info-accordion {
                   border-radius: 12px;
                   margin-bottom: 16px;
               }
               
               .accordion-header {
                   padding: 13px 16px;
                   font-size: 14px;
               }
               
               .stats-accordion.open .accordion-content,
               .info-accordion.open .accordion-content {
                   padding: 12px;
               }
               
               .stat-card {
                   border-radius: 8px;
                   padding: 8px 8px 6px;
               }
               
               .stat-label {
                   font-size: 10px;
               }
               
               .stat-value {
                   font-size: 15px;
                   margin: 3px 0 2px;
               }
               
               .stat-indicator {
                   font-size: 9px;
               }
               
               .stats-section-header {
                   padding: 10px 14px;
                   font-size: 13px;
                   gap: 8px;
                   margin-top: 12px;
                   margin-bottom: 6px;
               }
               
               .stats-section-header .material-symbols-outlined {
                   font-size: 18px;
               }
               
               .select-all-btn {
                   padding: 6px 12px;
                   font-size: 12px;
               }
               
               .export-btn {
                   padding: 8px 16px;
                   font-size: 13px;
               }
               
               
               .chart-title {
                   font-size: 16px;
               }
               
               .current-var {
                   font-size: 18px;
                   margin: 16px 0 8px;
               }
           }
   
   /* chart mobile rules handled in chart-header block above */
           
           /* =================================
              STATION READINGS MODAL
              ================================= */
           .weather-modal {
   display: none;
               position: fixed;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               z-index: 10000;
               align-items: center;
               justify-content: center;
   }
   
   .weather-modal[style*="display: flex"] {
   display: flex !important;
   }
   
   .weather-modal-overlay {
   position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               background: rgba(0, 0, 0, 0.5);
               backdrop-filter: blur(4px);
   }
   
   .weather-modal-content {
   position: relative;
               background: linear-gradient(160deg, rgba(12,14,26,0.98) 0%, rgba(15,17,30,0.99) 100%);
               border: 1px solid var(--border-blue-sm);
               border-radius: 24px;
               max-width: 600px;
               width: 90%;
               max-height: 85vh;
               overflow-y: auto;
               box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
               border: 1px solid var(--glass-xl);
   }
   
   .station-readings-modal-content {
   max-width: 700px;
   }
   
   .weather-modal-close {
   position: absolute;
               top: 16px;
               right: 16px;
               background: var(--glass-xl);
               border: 1px solid hsla(0,0%,100%,0.30);
               border-radius: 50%;
               width: 36px;
               height: 36px;
               display: flex;
               align-items: center;
               justify-content: center;
               cursor: pointer;
               transition: all 0.2s;
               padding: 0;
               color: var(--blue-300);
               z-index: 1;
   }
   
   .weather-modal-close:hover {
   background: hsla(0,0%,100%,0.30);
               transform: scale(1.05);
   }
   
   .station-readings-header {
   padding: 24px 24px 16px;
               border-bottom: 1px solid var(--glass-xl);
               display: flex;
               align-items: center;
               justify-content: space-between;
   }
   
   .station-readings-header-left {
   display: flex;
               align-items: center;
               gap: 12px;
   }
   
   .station-readings-header h2 {
   margin: 0;
               font-size: 24px;
               font-weight: 700;
   }
   
   .station-readings-body {
   padding: 24px;
   }
   
   .station-readings-loading {
   display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
               padding: 40px 20px;
               gap: 16px;
   }
   
   .station-readings-loading p {
   margin: 0;
               opacity: 0.9;
   }
   
   /* Tabs */
           .readings-tabs {
   display: flex;
               gap: 8px;
               margin-bottom: 20px;
               border-bottom: 2px solid var(--glass-md);
               padding-bottom: 8px;
               flex-wrap: wrap;
   }
   
   .readings-tab {
   background: var(--glass-md);
               border: 1px solid var(--glass-xl);
               color: var(--blue-300);
               padding: 10px 20px;
               border-radius: 8px 8px 0 0;
               cursor: pointer;
               transition: all 0.2s;
               font-size: 14px;
               font-weight: 500;
   }
   
   .readings-tab:hover {
   background: var(--glass-high);
   }
   
   .readings-tab.active {
   background: hsla(0,0%,100%,0.25);
               border-bottom-color: transparent;
               font-weight: 600;
   }
   
   .readings-content {
   display: none;
   }
   
   .readings-content.active {
   display: block;
   }
   
   .readings-timestamp {
   display: flex;
               align-items: center;
               gap: 8px;
               padding: 12px;
               background: var(--glass-md);
               border-radius: 8px;
               margin-bottom: 16px;
               font-size: 13px;
   }
   
   .readings-timestamp .material-symbols-outlined {
   font-size: 18px;
   }
   
   .readings-grid {
   display: grid;
               grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
               gap: 12px;
   }
   
   .reading-card {
   background: var(--glass-md);
               border-radius: 12px;
               padding: 16px;
               border: 1px solid var(--border-white-md);
               transition: all 0.2s;
   }
   
   .reading-card:hover {
   background: var(--glass-high);
               transform: translateY(-2px);
   }
   
   .reading-card-header {
   display: flex;
               align-items: center;
               gap: 8px;
               margin-bottom: 12px;
   }
   
   .reading-card-icon {
   width: 32px;
               height: 32px;
               background: var(--glass-md);
               border-radius: 8px;
               display: flex;
               align-items: center;
               justify-content: center;
   }
   
   .reading-card-icon .material-symbols-outlined {
   font-size: 20px;
   }
   
   .reading-card-title {
   font-size: 13px;
               font-weight: 500;
               opacity: 0.9;
   }
   
   .reading-card-value {
   font-size: 28px;
               font-weight: 700;
               margin-bottom: 4px;
   }
   
   .reading-card-unit {
   font-size: 14px;
               opacity: 0.8;
               margin-left: 4px;
   }
   
   .reading-card-time {
   display: flex;
               align-items: center;
               gap: 4px;
               font-size: 11px;
               opacity: 0.88;
               margin-top: 8px;
   }
   
   .reading-card-time .material-symbols-outlined {
   font-size: 14px;
   }
   
   /* Combined cards (max/min) */
           .reading-card-combined .reading-card-values {
   display: grid;
               grid-template-columns: 1fr 1fr;
               gap: 12px;
               margin-top: 8px;
   }
   
   .reading-card-value-item {
   text-align: center;
   }
   
   .reading-card-value-label {
   font-size: 11px;
               opacity: 0.88;
               margin-bottom: 4px;
   }
   
   .reading-card-combined .reading-card-value {
   font-size: 24px;
   }
   
   .readings-error {
   text-align: center;
               padding: 40px 20px;
   }
   
   .readings-error .material-symbols-outlined {
   font-size: 48px;
               opacity: 0.5;
               margin-bottom: 16px;
   }
   
   .readings-error h3 {
   margin: 0 0 8px 0;
               font-size: 18px;
   }
   
   .readings-error p {
   margin: 4px 0;
               opacity: 0.8;
   }
   
   .station-info-section {
   background: var(--glass-md);
               border-radius: 16px;
               padding: 16px;
               margin-top: 16px;
               border: 1px solid var(--border-white-md);
   }
   
   .station-info-section h3 {
   margin: 0 0 12px 0;
               font-size: 16px;
               font-weight: 600;
               display: flex;
               align-items: center;
               gap: 8px;
   }
   
   .station-info-section p {
   margin: 8px 0;
               font-size: 14px;
               line-height: 1.6;
               opacity: 0.95;
   }
   
   @media (max-width: 600px) {
               .station-readings-grid {
                   grid-template-columns: 1fr;
                   gap: 12px;
               }
               
               .station-readings-header {
                   padding: 20px 20px 12px;
               }
               
               .station-readings-body {
                   padding: 20px;
               }
           }
   
   /* ── Anomalía respecto a la media ── */
           .anomaly-grid {
   display: grid;
               grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
               gap: 10px;
               padding: 4px 0;
   }
   
   .anomaly-card {
   background: hsla(0,0%,100%,0.07);
               border: 1px solid hsla(213,71%,53%,0.18);
               border-radius: 14px;
               padding: 14px 16px;
               display: flex;
               flex-direction: column;
               gap: 8px;
   }
   
   .anomaly-card-header {
   display: flex;
               justify-content: space-between;
               align-items: baseline;
               font-size: 13px;
               opacity: 0.85;
   }
   
   .anomaly-card-year {
   font-weight: 700;
               font-size: 15px;
               color: var(--blue-200);
   }
   
   .anomaly-value {
   font-size: 22px;
               font-weight: 700;
               line-height: 1;
   }
   
   .anomaly-value.positive {
   color: var(--warm);
   }
   
   .anomaly-value.negative {
   color: var(--cold);
   }
   
   .anomaly-value.neutral {
   color: var(--text-primary);
   }
   
   .anomaly-bar-track {
   height: 6px;
               background: var(--glass-md);
               border-radius: 99px;
               overflow: hidden;
               position: relative;
   }
   
   .anomaly-bar-fill {
   height: 100%;
               border-radius: 99px;
               transition: width 0.4s ease;
               position: absolute;
   }
   
   .anomaly-bar-fill.positive {
   background: linear-gradient(90deg, rgba(255,138,128,0.4), var(--warm)); right: 50%;
   }
   
   .anomaly-bar-fill.negative {
   background: linear-gradient(90deg, var(--cold), rgba(128,216,255,0.4)); left: 50%;
   }
   
   .anomaly-bar-center {
   position: absolute;
               left: 50%;
               top: -1px;
               width: 2px;
               height: 8px;
               background: hsla(0,0%,100%,0.50);
               border-radius: 1px;
   }
   
   .anomaly-subtitle {
   font-size: 12px;
               opacity: 0.85;
   }
   
   .anomaly-legend {
   display: flex;
               gap: 20px;
               font-size: 12px;
               opacity: 0.88;
               margin-bottom: 12px;
               align-items: center;
               flex-wrap: wrap;
   }
   
   .anomaly-legend-dot {
   width: 10px; height: 10px;
               border-radius: 50%;
               display: inline-block;
               margin-right: 4px;
   }
   
   /* ── Ranking de años ── */
           .ranking-table-wrapper {
   overflow-x: auto;
               border-radius: 12px;
   }
   
   .ranking-table {
   width: 100%;
               border-collapse: collapse;
               font-size: 14px;
   }
   
   .ranking-table th {
   background: hsla(213,71%,53%,0.18);
               padding: 10px 14px;
               text-align: left;
               font-weight: 600;
               color: var(--blue-200);
               cursor: pointer;
               user-select: none;
               white-space: nowrap;
               border-bottom: 1px solid hsla(213,71%,53%,0.22);
               transition: background 0.2s;
   }
   
   .ranking-table th:hover {
   background: var(--border-blue-sm);
   }
   
   .ranking-table th.sorted-asc::after {
   content: ' ↑'; opacity: 0.8;
   }
   
   .ranking-table th.sorted-desc::after {
   content: ' ↓'; opacity: 0.8;
   }
   
   .ranking-table td {
   padding: 9px 14px;
               border-bottom: 1px solid var(--glass-sm);
               color: var(--text-primary);
               white-space: nowrap;
   }
   
   .ranking-table tr:last-child td {
   border-bottom: none;
   }
   
   .ranking-table tr:hover td {
   background: var(--glass-sm);
   }
   
   .rank-badge {
   display: inline-flex;
               align-items: center;
               justify-content: center;
               width: 26px; height: 26px;
               border-radius: 50%;
               font-weight: 700;
               font-size: 12px;
   }
   
   .rank-1 {
   background: rgba(255,215,0,0.25);  color: #ffd700; border: 1px solid rgba(255,215,0,0.5);
   }
   
   .rank-2 {
   background: rgba(192,192,192,0.2); color: #c0c0c0; border: 1px solid rgba(192,192,192,0.4);
   }
   
   .rank-3 {
   background: rgba(205,127,50,0.2);  color: #cd7f32; border: 1px solid rgba(205,127,50,0.4);
   }
   
   .rank-n {
   background: var(--border-white-sm); color: var(--blue-300); border: 1px solid var(--border-white-md);
   }
   
   .ranking-bar-cell {
   min-width: 120px;
   }
   
   .ranking-bar-track {
   height: 5px;
               background: var(--glass-md);
               border-radius: 99px;
               overflow: hidden;
   }
   
   .ranking-bar-fill {
   height: 100%;
               border-radius: 99px;
               background: linear-gradient(90deg, var(--border-blue-md), var(--blue-400));
               transition: width 0.4s ease;
   }
   
   /* ── Boxplot ── */
           .boxplot-wrap {
   overflow-x: auto;
               padding-bottom: 8px;
   }
   
   .boxplot-svg {
   display: block;
   }
   
   .boxplot-tooltip {
   position: fixed;
               background: rgba(10,20,35,0.95);
               border: 1px solid var(--border-blue-md);
               border-radius: 10px;
               padding: 10px 14px;
               font-size: 13px;
               color: var(--text-primary);
               pointer-events: none;
               z-index: 9999;
               display: none;
               line-height: 1.7;
               backdrop-filter: blur(8px);
               min-width: 160px;
   }
   
   .boxplot-tooltip strong {
   color: var(--blue-200);
   }
   
   .boxplot-legend {
   display: flex;
               gap: 20px;
               font-size: 12px;
               opacity: 0.88;
               margin-top: 10px;
               flex-wrap: wrap;
               align-items: center;
   }
   
   .boxplot-legend-item {
   display: flex;
               align-items: center;
               gap: 6px;
   }
   
   /* ── Índice de aridez ── */
           .aridity-grid {
   display: grid;
               grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
               gap: 10px;
               margin-bottom: 16px;
   }
   
   .aridity-card {
   background: hsla(0,0%,100%,0.07);
               border: 1px solid hsla(213,71%,53%,0.18);
               border-radius: 14px;
               padding: 14px 16px;
               display: flex;
               flex-direction: column;
               gap: 8px;
   }
   
   .aridity-card-month {
   font-weight: 700;
               font-size: 14px;
               color: var(--blue-200);
               display: flex;
               justify-content: space-between;
               align-items: center;
   }
   
   .aridity-badge {
   font-size: 11px;
               font-weight: 600;
               padding: 2px 8px;
               border-radius: 99px;
               letter-spacing: 0.3px;
   }
   
   .aridity-hyperarid {
   background: rgba(255,100,80,0.25);  color: var(--warm); border: 1px solid rgba(255,100,80,0.4);
   }
   
   .aridity-arid {
   background: rgba(255,160,60,0.25);  color: #ffb74d; border: 1px solid rgba(255,160,60,0.4);
   }
   
   .aridity-semiarid {
   background: rgba(255,210,80,0.2);   color: var(--warning); border: 1px solid rgba(255,210,80,0.35);
   }
   
   .aridity-subhumid {
   background: rgba(160,230,140,0.2);  color: #aed581; border: 1px solid rgba(160,230,140,0.35);
   }
   
   .aridity-humid {
   background: rgba(100,200,180,0.2);  color: var(--teal); border: 1px solid rgba(100,200,180,0.35);
   }
   
   .aridity-perhumid {
   background: hsla(213,71%,53%,0.22);  color: var(--cold); border: 1px solid hsla(213,71%,53%,0.38);
   }
   
   .aridity-value {
   font-size: 26px;
               font-weight: 700;
               line-height: 1;
               color: var(--text-primary);
   }
   
   .aridity-formula {
   font-size: 11px;
               opacity: 0.82;
   }
   
   .aridity-bar-track {
   height: 6px;
               background: var(--glass-md);
               border-radius: 99px;
               overflow: hidden;
   }
   
   .aridity-bar-fill {
   height: 100%;
               border-radius: 99px;
               transition: width 0.4s ease;
   }
   
   .aridity-annual-box {
   background: hsla(213,71%,53%,0.10);
               border: 1px solid var(--border-blue);
               border-radius: 14px;
               padding: 16px 20px;
               margin-bottom: 16px;
               display: flex;
               flex-wrap: wrap;
               gap: 20px;
               align-items: center;
   }
   
   .aridity-annual-value {
   font-size: 36px;
               font-weight: 700;
               color: var(--blue-200);
               line-height: 1;
   }
   
   .aridity-annual-label {
   font-size: 13px;
               opacity: 0.9;
               margin-top: 4px;
   }
   
   .aridity-scale {
   display: flex;
               gap: 6px;
               flex-wrap: wrap;
               margin-bottom: 16px;
               font-size: 11px;
   }
   
   .aridity-scale-item {
   padding: 3px 10px;
               border-radius: 99px;
               font-weight: 600;
   }
   
   .aridity-info {
   font-size: 12px;
               opacity: 0.82;
               margin-bottom: 12px;
               line-height: 1.6;
   }
   
   /* ── Diagram fullscreen modal ── */
           .diagram-fullscreen-content {
   max-width: 96vw;
               width: 96vw;
               max-height: 92vh;
               overflow-y: auto;
               padding: 0;
   }
   
   .diagram-fullscreen-header {
   display: flex;
               align-items: center;
               justify-content: space-between;
               padding: 18px 24px 14px;
               border-bottom: 1px solid hsla(213,71%,53%,0.22);
               position: sticky;
               top: 0;
               background: linear-gradient(135deg, rgba(10,22,40,0.98), rgba(15,32,68,0.98));
               z-index: 2;
               backdrop-filter: blur(10px);
   }
   
   .diagram-fullscreen-title {
   font-size: 17px;
               font-weight: 700;
               color: var(--blue-200);
               display: flex;
               align-items: center;
               gap: 10px;
   }
   
   .diagram-fullscreen-body {
   padding: 24px;
   }
   
   .diagram-fullscreen-body .boxplot-wrap svg {
   width: 100% !important;
               height: auto !important;
   }
   
   .diagram-fullscreen-body .aridity-grid {
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
   }
   
   /* Botón expandir en accordion header */
           .accordion-expand-btn {
   background: hsla(213,71%,53%,0.12);
               border: 1px solid var(--border-blue);
               color: var(--blue-400);
               width: 30px;
               height: 30px;
               border-radius: 8px;
               display: flex;
               align-items: center;
               justify-content: center;
               cursor: pointer;
               transition: all 0.2s;
               flex-shrink: 0;
               margin-right: 6px;
   }
   
   .accordion-expand-btn:hover {
       background: hsla(213,71%,53%,0.26);
       transform: scale(1.08);
       color: var(--text-primary);
   }
   
   .accordion-expand-btn .material-symbols-outlined {
   font-size: 17px;
   }
   
   /* Aurora animated glow overlay */
           body::before {
   content: '';
               position: fixed;
               top: -50%;
               left: -50%;
               width: 200%;
               height: 200%;
               background: 
                   radial-gradient(ellipse at 20% 50%, hsla(213,71%,53%,0.12) 0%, transparent 50%),
                   radial-gradient(ellipse at 80% 20%, hsla(213,71%,53%,0.10) 0%, transparent 50%),
                   radial-gradient(ellipse at 60% 80%, rgba(196,181,253,0.08) 0%, transparent 50%);
               pointer-events: none;
               z-index: 0;
               animation: auroraShift 12s ease-in-out infinite alternate;
   }
   
   .container {
   position: relative; z-index: 1;
   }
   
   @keyframes auroraShift {
               0%   { transform: translate(0,0) scale(1); }
               50%  { transform: translate(3%,2%) scale(1.03); }
               100% { transform: translate(-2%,4%) scale(1.01); }
           }
   
   /* ═══════════════════════════════════════════════════════════════════════════
      CLASES DE UTILIDAD — reemplazan todos los estilos inline del HTML/JS
      ═══════════════════════════════════════════════════════════════════════════ */
   
   /* ── Visibilidad ─────────────────────────────────────────────────────────── */
   .hidden {
   display: none !important;
   }
   
   /* ── Iconos ──────────────────────────────────────────────────────────────── */
   .icon-heading {
   font-size: 32px;
       vertical-align: middle;
       margin-right: 12px;
   }
   
   .icon-inline {
   vertical-align: middle;
       margin-right: 8px;
   }
   
   .icon-btn {
   vertical-align: middle;
       font-size: 18px;
       margin-right: 6px;
   }
   
   .icon-chart {
   font-size: 18px;
   }
   
   .icon-sm {
   font-size: 16px; vertical-align: middle;
   }
   
   /* ── Espaciado de grupos de control ──────────────────────────────────────── */
   .ctrl-group {
   margin-top: 16px;
   }
   
   .ctrl-group-lg {
   margin-top: 18px;
   }
   
   .ctrl-group-sm {
   margin-top: 12px;
   }
   
   /* ── Nota bajo presets estacionales ──────────────────────────────────────── */
   .season-note {
   font-size: 12px;
       opacity: 0.9;
       margin-bottom: 8px;
       line-height: 1.4;
   }
   
   /* ── pill-group con margen inferior ─────────────────────────────────────── */
   .pill-group-mb {
   margin-bottom: 8px;
   }
   
   /* ── Info-box prosa ──────────────────────────────────────────────────────── */
   .info-intro {
   margin: 10px 0;
   }
   
   .info-list {
   margin: 8px 0;
   }
   
   .info-note {
   margin-top: 12px; font-size: 13px; opacity: 0.9;
   }
   
   /* ── Cabecera del selector de variables ──────────────────────────────────── */
   .var-ctrl-header {
   display: flex;
       align-items: center;
       gap: 10px;
       flex-wrap: wrap;
       margin-bottom: 8px;
   }
   
   .var-ctrl-header .control-label {
   margin: 0;
   }
   
   /* ── Accordion: contenedor de botones (expandir + chevron) ───────────────── */
   .accordion-actions {
   display: flex;
       align-items: center;
       gap: 6px;
       flex-shrink: 0;
       margin-left: auto;
   }
   
   .accordion-actions .accordion-icon {
   margin-left: 0;
   }
   
   .accordion-header-actions {
   display: flex;
       align-items: center;
       gap: 6px;
       flex-shrink: 0;
   }
   
   /* ── Tabla multivariable ─────────────────────────────────────────────────── */
   .col-year {
   min-width: 56px;
   }
   
   .col-variable {
   min-width: 160px;
   }
   
   .col-resumen {
   opacity: 0.8;
   }
   
   .multivar-year-td {
   font-weight: 700;
       vertical-align: middle;
       text-align: center;
       font-size: 15px;
       border-right: 2px solid var(--border-white-md);
   }
   
   .multivar-var-td {
   font-size: 13px;
       font-weight: 600;
       white-space: nowrap;
       border-right: 1px solid var(--border-white-sm);
   }
   
   .multivar-unit {
   opacity: 0.82;
       font-weight: 400;
       margin-left: 3px;
   }
   
   .multivar-resumen-td {
   font-size: 12px;
   }
   
   .multivar-resumen-td b {
   font-weight: 700;
   }
   
   .resumen-label {
   opacity: 0.55;
       font-size: 10px;
       margin-left: 2px;
   }
   
   .multivar-sep td {
   height: 4px;
       padding: 0 !important;
       border: none !important;
       background: var(--glass-xs);
   }
   
   /* Colores de acento por variable (índice 0–7, mismo orden que variableOrder) */
   .var-accent-0 {
   color: rgba(255,107,107,0.95);
   }
   
   .var-accent-1 {
   color: rgba(78,205,196,0.95);
   }
   
   .var-accent-2 {
   color: rgba(69,183,209,0.95);
   }
   
   .var-accent-3 {
   color: rgba(255,160,122,0.95);
   }
   
   .var-accent-4 {
   color: rgba(152,216,200,0.95);
   }
   
   .var-accent-5 {
   color: rgba(247,220,111,0.95);
   }
   
   .var-accent-6 {
   color: rgba(187,143,206,0.95);
   }
   
   .var-accent-7 {
   color: rgba(133,193,226,0.95);
   }
   
   /* ── Mensajes vacíos / informativos ─────────────────────────────────────── */
   .table-empty {
   grid-column: 1 / -1;
       text-align: center;
       padding: 40px;
       color: rgba(255,255,255,0.7);
   }
   
   .table-empty--sm {
   grid-column: 1 / -1;
       text-align: center;
       padding: 20px;
       color: hsla(0,0%,100%,0.60);
       font-size: 13px;
   }
   
   /* ── Estadísticas: porcentajes pequeños ─────────────────────────────────── */
   .pct {
   font-size: 14px;
       opacity: 0.8;
   }
   
   /* ── Boxplot: leyenda atenuada / colores de tooltip ─────────────────────── */
   .legend-muted {
   opacity: 0.82;
   }
   
   .color-mean {
   color: var(--warning);
   }
   
   .color-outlier {
   color: var(--warm);
   }
   
   /* ── Ranking / anomalía: texto atenuado ─────────────────────────────────── */
   .muted {
   opacity: 0.8;
   }
   
   /* ── Anomaly legend dots ─────────────────────────────────────────────────── */
   .anomaly-dot-pos {
   background: var(--warm);
   }
   
   .anomaly-dot-neg {
   background: var(--cold);
   }
   
   /* ── Aridity: badge anual más grande ────────────────────────────────────── */
   .aridity-badge-lg {
   font-size: 14px;
       padding: 6px 16px;
   }
   
   /* ── Widget de clima: error-text y error-detail ─────────────────────────── */
   .error-text {
   font-size: 12px;
       opacity: 0.88;
       margin-top: 8px;
   }
   
   .error-detail {
   font-size: 12px;
       opacity: 0.88;
       margin-top: 8px;
   }
   
   /* ── Notificación de rotación (antes inline + <style> dinámico en JS) ────── */
   .rotate-hint {
   position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       background: rgba(255, 159, 64, 0.95);
       color: white;
       padding: 24px 32px;
       border-radius: 16px;
       font-size: 16px;
       font-weight: 600;
       z-index: 10000;
       box-shadow: 0 8px 24px rgba(0,0,0,0.3);
       text-align: center;
       max-width: 280px;
       animation: slideInRotate 0.3s ease-out;
   }
   
   .rotate-hint-icon {
   font-size: 48px;
       display: block;
       margin-bottom: 12px;
   }
   
   .rotate-hint-out {
   animation: slideInRotate 0.3s ease-out reverse;
   }
   
   @keyframes slideInRotate {
       from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
       to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
   }
   
   /* ── Boxplot: cursor pointer (CSS en vez de inline) ─────────────────────── */
   .boxplot-box,
   .boxplot-hover-zone {
   cursor: pointer;
   }
   
   /* ── Spinning (spinner de carga) ────────────────────────────────────────── */
   .spinning {
   animation: spin 1s linear infinite;
   }
   
   /* ═══════════════════════════════════════════════════════════════════════
      MÓDULOS NUEVOS: Récords · Heatmap · Comparador · Walter-Lieth
      ═══════════════════════════════════════════════════════════════════════ */
   
   /* ── Récords ─────────────────────────────────────────────────────────── */
   .rec-top {
   display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 18px;
       margin-bottom: 20px;
   }
   
   @media (max-width:580px) { .rec-top { grid-template-columns:1fr; } }
   
   .rec-col {
   background:var(--glass-low); border-radius:14px; padding:14px 16px;
   }
   
   .rec-col-title {
   font-size:12px; font-weight:700; opacity:0.88; margin-bottom:10px; letter-spacing:.03em;
   }
   
   .rec-row {
   display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--glass-sm);
   }
   
   .rec-row:last-child {
   border-bottom:none;
   }
   
   .rec-rank {
   font-size:12px; font-weight:700; min-width:34px; display:flex; align-items:center; gap:2px;
   }
   
   .rec-label {
   flex:1; font-size:13px; opacity:.85;
   }
   
   .rec-value {
   font-weight:700; font-size:14px;
   }
   
   .rec-section-title {
   font-size:12px; font-weight:700; opacity:.65; margin:6px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--glass-md); letter-spacing:.03em;
   }
   
   .rec-months-grid {
   display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px;
   }
   
   .rec-month-card {
   background:var(--glass-low); border:1px solid hsla(213,71%,53%,0.14); border-radius:12px; padding:9px 11px;
   }
   
   .rec-month-name {
   font-weight:700; font-size:12px; color:var(--blue-200); margin-bottom:5px;
   }
   
   .rec-month-row {
   display:flex; align-items:center; gap:4px; font-size:11px; margin:3px 0;
   }
   
   .rec-month-val {
   font-weight:700; font-size:12px;
   }
   
   .rec-month-val.warm {
   color:var(--warm);
   }
   
   .rec-month-val.cold {
   color:var(--cold);
   }
   
   .rec-month-year {
   font-size:10px; opacity:.55; margin-left:auto;
   }
   
   /* ── Heatmap ─────────────────────────────────────────────────────────── */
   .hm-subtitle {
   font-size:12px; opacity:.6; margin-bottom:10px; line-height:1.5;
   }
   
   .hm-table-wrap {
   overflow-x:auto;
   }
   
   .hm-table {
   border-collapse:separate; border-spacing:2px; background:transparent; min-width:640px;
   }
   
   .hm-table th {
   background:hsla(213,71%,53%,0.18); font-size:11px; padding:5px 3px; cursor:default;
   }
   
   .hm-table th:hover {
   background:hsla(213,71%,53%,0.26);
   }
   
   .hm-year-th {
   min-width:46px;
   }
   
   .hm-year-td {
   font-weight:700; font-size:12px; text-align:center; color:var(--blue-200); background:var(--glass-low); border-radius:4px; padding:4px 6px;
   }
   
   .hm-cell {
   font-size:11px; font-weight:600; padding:5px 4px; text-align:center; border-radius:4px; border:none; transition:transform .15s,box-shadow .15s; cursor:default; min-width:38px;
   }
   
   .hm-cell:hover {
   transform:scale(1.2); box-shadow:0 3px 10px rgba(0,0,0,.45); position:relative; z-index:2;
   }
   
   .hm-empty {
   background:var(--glass-sm)!important; color:hsla(0,0%,100%,0.30)!important;
   }
   
   .hm-mean-row .hm-year-td {
   color:var(--blue-300); font-style:italic;
   }
   
   .hm-mean-cell {
   outline:2px solid rgba(255,255,255,0.22); outline-offset:-1px;
   }
   
   .hm-legend {
   display:flex; align-items:center; gap:10px; margin-top:10px; font-size:11px; opacity:.7;
   }
   
   .hm-legend-bar {
   flex:1; display:flex; height:10px; border-radius:5px; overflow:hidden; border:1px solid hsla(0,0%,100%,0.12); max-width:280px;
   }
   
   .hm-legend-lbl {
   white-space:nowrap;
   }
   
   /* ── Comparador ──────────────────────────────────────────────────────── */
   .comp-selectors {
   display:flex; gap:18px; margin-bottom:14px; flex-wrap:wrap; align-items:center; font-size:13px;
   }
   
   .comp-selectors label {
   display:flex; align-items:center; gap:7px;
   }
   
   .comp-select {
   background:hsla(0,0%,100%,0.12); border:1px solid var(--border-blue); color:var(--text-primary); padding:5px 11px; border-radius:8px; font-size:13px; cursor:pointer; outline:none;
   }
   
   .comp-select:hover {
   border-color:var(--border-blue-strong);
   }
   
   .comp-select option {
   background:#0a1a34;
   }
   
   .comp-table-wrap {
   overflow-x:auto; margin-bottom:14px;
   }
   
   .comp-table {
   width:100%; border-collapse:collapse; font-size:13px;
   }
   
   .comp-table th {
   background:hsla(213,71%,53%,0.18); padding:9px 11px; font-weight:600; color:var(--blue-200); border-bottom:1px solid hsla(213,71%,53%,0.22); white-space:nowrap;
   }
   
   .comp-table td {
   padding:7px 11px; border-bottom:1px solid var(--glass-sm);
   }
   
   .comp-table tr:hover td {
   background:var(--glass-xs);
   }
   
   .comp-month {
   font-weight:600; color:var(--blue-300);
   }
   
   .cA {
   color:var(--blue-400); font-weight:600;
   }
   
   .cB {
   color:var(--warm); font-weight:600;
   }
   
   .comp-diff {
   font-weight:700;
   }
   
   .comp-diff-pos {
   color:var(--warm);
   }
   
   .comp-diff-neg {
   color:var(--cold);
   }
   
   .comp-diff-neu {
   color:rgba(255,255,255,.55);
   }
   
   .comp-bar-cell {
   min-width:90px;
   }
   
   .comp-bar-track {
   height:6px; background:var(--border-white-sm); border-radius:99px; overflow:hidden; position:relative;
   }
   
   .comp-bar-center {
   position:absolute; left:50%; top:-1px; width:2px; height:8px; background:rgba(255,255,255,.3); border-radius:1px;
   }
   
   .comp-bar-fill {
   height:100%; border-radius:99px; position:absolute; transition:width .3s ease;
   }
   
   .comp-bar-pos {
   background:linear-gradient(90deg,rgba(255,138,128,.35),var(--warm)); right:50%;
   }
   
   .comp-bar-neg {
   background:linear-gradient(90deg,var(--cold),rgba(128,216,255,.35)); left:50%;
   }
   
   .comp-bar-neu {
   background:rgba(255,255,255,.25); left:50%;
   }
   
   .comp-summary {
   background:hsla(0,0%,100%,0.07)!important;
   }
   
   .comp-summary td {
   border-top:1px solid rgba(255,255,255,.14); border-bottom:none;
   }
   
   .comp-chart {
   background:var(--glass-sm); border-radius:12px; padding:10px; overflow-x:auto;
   }
   
   /* ── Walter-Lieth ────────────────────────────────────────────────────── */
   .wl-wrap {
   overflow-x:auto;
   }
   
   .wl-svg {
   display:block; min-width:420px;
   }
   
   .climo-wrap {
   overflow-x: auto;
   }
   
   .climo-note {
   font-size: 12px;
       opacity: 0.82;
       margin-bottom: 10px;
       padding: 8px 12px;
       background: var(--glass-sm);
       border-radius: 8px;
       line-height: 1.5;
   }
   
   .climo-download {
   margin: 12px 0 4px;
   }
   
   .wl-note {
   font-size: 12px;
       opacity: 0.82;
       margin-bottom: 10px;
       padding: 8px 12px;
       background: var(--glass-sm);
       border-radius: 8px;
       line-height: 1.5;
   }
   
   .wl-info-grid {
   display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:9px; margin-top:16px;
   }
   
   .wl-card {
   background:hsla(0,0%,100%,0.07); border:1px solid hsla(213,71%,53%,0.18); border-radius:12px; padding:11px 13px;
   }
   
   .wl-card-label {
   font-size:11px; opacity:.6; margin-bottom:4px; line-height:1.3;
   }
   
   .wl-card-value {
   font-size:15px; font-weight:700; color:var(--blue-200);
   }
   
   /* ── Otros récords históricos ──────────────────────────────────────── */
   .other-records-intro {
   font-size: 12px;
       opacity: 0.85;
       margin-bottom: 14px;
       padding: 0 2px;
   }
   
   .other-records-grid {
   display: grid;
       grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
       gap: 12px;
   }
   
   .other-rec-card {
   background: var(--glass-sm);
       border: 1px solid var(--glass-md);
       border-radius: 10px;
       padding: 12px 14px;
       display: flex;
       flex-direction: column;
       gap: 4px;
   }
   
   .other-rec-label {
   font-size: 11px;
       opacity: 0.88;
       font-weight: 600;
       line-height: 1.3;
       display: flex;
       flex-direction: column;
       gap: 2px;
   }
   
   .other-rec-note {
   font-size: 10px;
       font-weight: 400;
       opacity: 0.88;
   }
   
   .other-rec-value {
   font-size: 18px;
       font-weight: 700;
       margin-top: 4px;
   }
   
   .other-rec-value.warm {
   color: var(--warm);
   }
   
   .other-rec-value.cold {
   color: var(--cold);
   }
   
   .other-rec-date {
   font-size: 11px;
       opacity: 0.55;
       margin-top: 2px;
   }
   
   @media (max-width: 768px) {
   
       /* Tabla principal: columna de variable más estrecha */
       .col-variable { min-width: 120px; }
       .col-year     { min-width: 44px; }
       .multivar-var-td { font-size: 12px; }
   
       /* Ranking: ocultar barra en móvil pequeño si no cabe */
       .ranking-bar-cell { min-width: 70px; }
       .ranking-table-wrapper { overflow-x: auto; }
   
       /* Anomalía: 1 columna */
       .anomaly-grid { grid-template-columns: 1fr; }
   
       /* Récords: ajuste de etiquetas */
       .rec-label { font-size: 12px; }
       .rec-value { font-size: 13px; }
   
       /* Heatmap: garantizar scroll horizontal */
       .hm-table-wrap { -webkit-overflow-scrolling: touch; }
   
       /* Comparador: tabla scrollable */
       .comp-table-wrap { -webkit-overflow-scrolling: touch; }
       .comp-table { font-size: 12px; }
       .comp-table th, .comp-table td { padding: 6px 8px; }
       .comp-bar-cell { min-width: 60px; }
   
       /* Climograma: scroll horizontal */
       .climo-wrap { -webkit-overflow-scrolling: touch; }
   
       /* Walter-Lieth */
       .wl-info-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
   
       /* Otros récords */
       .other-records-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
   
       /* Boxplot legend */
       .boxplot-legend { gap: 12px; font-size: 11px; }
   
       /* Aridez: 2 columnas */
       .aridity-grid { grid-template-columns: repeat(2, 1fr); }
   
       /* Accordion actions */
       .accordion-actions, .accordion-header-actions { gap: 6px; }
   }
   
   @media (max-width: 480px) {
   
       /* Header */
       h1 { font-size: 17px !important; }
   
       /* Controles: botones seleccionar todos más pequeños */
       .select-all-btn { padding: 6px 10px; font-size: 12px; }
   
       /* Pills de años y meses */
       .pill-btn { padding: 6px 10px; font-size: 12px; }
   
       /* Variables: 1 columna */
       .var-btn { flex: 1 1 100%; min-width: unset; }
   
       /* Stats: 2 columnas en móvil muy estrecho */
       .stats { grid-template-columns: repeat(2, 1fr); gap: 4px; }
       .stat-value { font-size: 14px; }
   
       /* Tabla principal: permitir scroll y compactar */
       .table-wrapper table { min-width: 480px; font-size: 12px; }
       th, td { padding: 7px 6px !important; font-size: 12px; }
   
       /* Multivar tabla */
       .multivar-var-td { font-size: 11px; }
       .col-variable { min-width: 100px; }
   
       /* Ranking */
       .ranking-bar-cell { display: none; }
   
       /* Anomalía */
       .anomaly-value { font-size: 18px; }
   
       /* Récords por mes: 2 columnas */
       .rec-months-grid { grid-template-columns: repeat(2, 1fr); }
   
       /* Récords top: 1 columna ya cubierta por ≤580px */
   
       /* Aridity: 1 columna */
       .aridity-grid { grid-template-columns: 1fr; }
   
       /* Comparador selectors: columna */
       .comp-selectors { flex-direction: column; gap: 10px; }
   
       /* Walter-Lieth info grid: 2 col */
       .wl-info-grid { grid-template-columns: repeat(2, 1fr); }
   
       /* Otros récords: 2 col */
       .other-records-grid { grid-template-columns: repeat(2, 1fr); }
       .other-rec-value { font-size: 16px; }
   
       /* Modal: casi pantalla completa */
       .weather-modal-content { width: 96%; border-radius: 16px; }
   
       /* Boxplot */
       .boxplot-legend { flex-direction: column; gap: 6px; align-items: flex-start; }
   
       /* Climograma: nota */
       .climo-note { font-size: 11px; }
   
       /* Acordeón header más compacto */
       .accordion-header { font-size: 13px; padding: 12px 14px; }
   
       /* Widget padding reducido */
       .widget { padding: 16px 12px; }
       .container { padding: 8px; margin: 8px auto; }
       #chart-container { padding: 14px; }
   
       /* Tabla: reducir padding de celdas */
       .stats-accordion.open .accordion-content,
       .info-accordion.open .accordion-content { padding: 12px; }
   
       /* Current weather widget: ancho completo en móvil pequeño */
       .current-weather-widget { max-width: 100%; }
   }
   
   @media (max-width: 768px) {
   
       /* ── Wrapper del bloque de control en móvil ─────────────────────── */
       .mobile-dropdown-block {
           margin-bottom: 12px;
       }
   
       /* ── Botón del desplegable (cabecera) ───────────────────────────── */
       .mobile-dropdown-trigger {
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: space-between;
           background: hsla(0,0%,100%,0.12);
           border: 1px solid hsla(213,71%,53%,0.38);
           border-radius: 14px;
           padding: 13px 16px;
           cursor: pointer;
           color: var(--text-primary);
           font-size: 14px;
           font-weight: 600;
           transition: background 0.2s, border-color 0.2s;
           text-align: left;
           gap: 10px;
       }
   
       .mobile-dropdown-trigger:hover {
           background: hsla(0,0%,100%,0.18);
           border-color: var(--border-blue-lg);
       }
   
       .mobile-dropdown-trigger.open {
           border-radius: 14px 14px 0 0;
           border-bottom-color: transparent;
           background: hsla(213,71%,53%,0.18);
       }
   
       .mobile-dropdown-trigger .mdt-left {
           display: flex;
           align-items: center;
           gap: 8px;
           flex: 1;
           min-width: 0;
       }
   
       .mobile-dropdown-trigger .mdt-label {
           font-weight: 600;
           white-space: nowrap;
       }
   
       .mobile-dropdown-trigger .mdt-summary {
           font-size: 12px;
           font-weight: 400;
           opacity: 0.88;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
           max-width: 160px;
       }
   
       .mobile-dropdown-trigger .mdt-chevron {
           font-size: 20px;
           transition: transform 0.3s;
           flex-shrink: 0;
           color: var(--blue-400);
       }
   
       .mobile-dropdown-trigger.open .mdt-chevron {
           transform: rotate(180deg);
       }
   
       /* ── Panel desplegable ──────────────────────────────────────────── */
       .mobile-dropdown-panel {
           display: none;
           background: hsla(0,0%,100%,0.07);
           border: 1px solid hsla(213,71%,53%,0.38);
           border-top: none;
           border-radius: 0 0 14px 14px;
           padding: 12px;
           gap: 8px;
           flex-direction: column;
       }
   
       .mobile-dropdown-panel.open {
           display: flex;
       }
   
       /* ── Barra de acciones (seleccionar / deseleccionar todo) ───────── */
       .mobile-dropdown-actions {
           display: flex;
           gap: 6px;
           flex-wrap: wrap;
           padding-bottom: 8px;
           border-bottom: 1px solid var(--glass-md);
       }
   
       .mobile-dropdown-actions .select-all-btn {
           flex: 1;
           text-align: center;
           font-size: 12px;
           padding: 6px 10px;
           margin: 0;
       }
   
       /* ── Grid de opciones (pills dentro del panel) ──────────────────── */
       .mobile-dropdown-options {
           display: flex;
           flex-wrap: wrap;
           gap: 6px;
       }
   
       /* Pills dentro del panel: mismo aspecto que fuera */
       .mobile-dropdown-options .pill-btn {
           font-size: 13px;
           padding: 8px 14px;
       }
   
       /* Variables: 2 columnas */
       .mobile-dropdown-options.var-options .var-btn {
           flex: 1 1 calc(50% - 4px);
           min-width: unset;
           font-size: 13px;
           padding: 10px 10px;
       }
   
       /* Presets estacionales: fila horizontal */
       .mobile-dropdown-options.season-options {
           flex-wrap: wrap;
       }
   
       .mobile-dropdown-options.season-options .pill-btn {
           flex: 1 1 auto;
       }
   
       /* ── Nota estacional dentro del panel ───────────────────────────── */
       .mobile-season-note {
           font-size: 11px;
           opacity: 0.85;
           line-height: 1.4;
           padding: 4px 2px 0;
       }
   
       /* ── Ocultar controles originales en móvil ──────────────────────── */
       .desktop-only-controls {
           display: none !important;
       }
   
       /* ── Mostrar controles móvil (ocultos en escritorio) ────────────── */
       .mobile-only-controls {
           display: block !important;
       }
   }
   
   @media (min-width: 769px) {
       .mobile-only-controls {
           display: none !important;
       }
       .desktop-only-controls {
           display: block !important;
       }
   }
   
   /* ═══════════════════════════════════════════════════════════
      ESTILOS DE COMPONENTES (antes inline en HTML)
      ═══════════════════════════════════════════════════════════ */
   
   /* ─── MANN-KENDALL ─────────────────────────────────────── */
   .mk-grid {
   display: grid;
       grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
       gap: 10px;
       margin: 14px 0 6px;
   }
   
   .mk-card {
   background: hsla(0,0%,100%,0.07);
       border: 1px solid hsla(213,71%,53%,0.22);
       border-radius: 14px;
       padding: 12px 14px;
   }
   
   .mk-card-label {
   font-size: 11px;
       opacity: 0.85;
       text-transform: uppercase;
       letter-spacing: .05em;
       margin-bottom: 4px;
   }
   
   .mk-card-value {
   font-size: 20px;
       font-weight: 700;
       color: var(--blue-300);
   }
   
   .mk-card-value.mk-rising {
   color: var(--warm);
   }
   
   .mk-card-value.mk-falling {
   color: var(--cold);
   }
   
   .mk-card-value.mk-neutral {
   color: rgba(255,255,255,0.55);
   }
   
   .mk-card-sub {
   font-size: 11px;
       margin-top: 4px;
       opacity: 0.7;
   }
   
   .mk-sig-yes {
   color: var(--blue-300); font-weight: 600;
   }
   
   .mk-sig-no {
   color: rgba(255,255,255,0.45);
   }
   
   .mk-monthly-grid {
   display: grid;
       grid-template-columns: repeat(6, 1fr);
       gap: 6px;
       margin-top: 10px;
   }
   
   .mk-month-cell {
   background: var(--glass-sm);
       border: 1px solid hsla(213,71%,53%,0.18);
       border-radius: 10px;
       padding: 8px 4px;
       text-align: center;
   }
   
   .mk-month-name {
   font-size: 10px;
       opacity: 0.8;
       margin-bottom: 3px;
   }
   
   .mk-month-val {
   font-size: 13px;
       font-weight: 700;
   }
   
   .mk-month-unit {
   font-size: 9px;
       opacity: 0.55;
       margin-top: 1px;
   }
   
   .mk-section-title {
   font-size: 12px;
       font-weight: 600;
       opacity: 0.75;
       text-transform: uppercase;
       letter-spacing: .06em;
       margin: 14px 0 6px;
       display: flex;
       align-items: center;
       gap: 6px;
   }
   
   .mk-section-title::after {
   content: '';
       flex: 1;
       height: 1px;
       background: hsla(213,71%,53%,0.22);
   }
   
   /* ─── PERCENTILES EXTENDIDOS ───────────────────────────── */
   .pct-band-wrap {
   margin: 10px 0;
   }
   
   .pct-row {
   display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 7px;
   }
   
   .pct-lbl {
   width: 32px;
       font-size: 11px;
       opacity: 0.85;
       text-align: right;
       flex-shrink: 0;
   }
   
   .pct-bar-outer {
   flex: 1;
       height: 7px;
       background: var(--glass-md);
       border-radius: 4px;
       overflow: hidden;
   }
   
   .pct-bar-fill {
   height: 100%;
       border-radius: 4px;
       background: linear-gradient(90deg, var(--border-blue-md), var(--blue-400));
       transition: width .5s ease;
   }
   
   .pct-bar-fill.pct-median {
   background: linear-gradient(90deg, var(--border-blue-md), var(--blue-300));
   }
   
   .pct-val-lbl {
   width: 68px;
       font-size: 11px;
       font-weight: 600;
       text-align: right;
       flex-shrink: 0;
       color: var(--blue-400);
   }
   
   .pct-dist-grid {
   display: grid;
       grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
       gap: 8px;
       margin-top: 14px;
   }
   
   .pct-dist-card {
   background: var(--glass-sm);
       border: 1px solid hsla(213,71%,53%,0.18);
       border-radius: 12px;
       padding: 10px 12px;
   }
   
   .pct-dist-label {
   font-size: 10px; opacity: 0.8; text-transform: uppercase; letter-spacing:.05em; margin-bottom: 4px;
   }
   
   .pct-dist-value {
   font-size: 16px; font-weight: 700; color: var(--blue-400);
   }
   
   .pct-dist-desc {
   font-size: 10px; opacity: 0.8; margin-top: 3px;
   }
   
   /* ─── ETCCDI ────────────────────────────────────────────── */
   .etccdi-info {
   font-size: 12px;
       opacity: 0.85;
       margin: 8px 0 12px;
       line-height: 1.6;
   }
   
   .etccdi-grid {
   display: grid;
       grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
       gap: 8px;
   }
   
   .etccdi-card {
   background: hsla(0,0%,100%,0.07);
       border: 1px solid hsla(213,71%,53%,0.22);
       border-radius: 14px;
       padding: 12px 12px 10px;
   }
   
   .etccdi-code {
   font-size: 14px;
       font-weight: 700;
       color: var(--blue-400);
       margin-bottom: 2px;
   }
   
   .etccdi-name {
   font-size: 10px;
       opacity: 0.8;
       line-height: 1.35;
       margin-bottom: 8px;
   }
   
   .etccdi-val {
   font-size: 20px;
       font-weight: 700;
   }
   
   .etccdi-val.warm {
   color: var(--warm);
   }
   
   .etccdi-val.cold {
   color: var(--cold);
   }
   
   .etccdi-val.rain {
   color: var(--blue-400);
   }
   
   .etccdi-val.neutral {
   color: var(--blue-300);
   }
   
   /* ─── CORRELACIÓN ───────────────────────────────────────── */
   .corr-info {
   font-size: 12px;
       opacity: 0.85;
       margin: 8px 0 12px;
   }
   
   .corr-matrix-wrap {
   overflow-x: auto; -webkit-overflow-scrolling: touch;
   }
   
   .corr-matrix {
   border-collapse: collapse;
       font-size: 11px;
       min-width: 340px;
   }
   
   .corr-matrix th {
   padding: 4px 6px;
       font-size: 10px;
       font-weight: 600;
       opacity: 0.7;
       text-align: center;
       white-space: nowrap;
       border: none;
   }
   
   .corr-matrix .row-lbl {
   text-align: right;
       padding-right: 8px;
       font-size: 10px;
       font-weight: 600;
       opacity: 0.7;
       white-space: nowrap;
   }
   
   .corr-matrix td.corr-cell {
   padding: 2px;
   }
   
   .corr-inner {
   width: 48px; height: 36px;
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 11px;
       font-weight: 600;
       cursor: default;
       transition: outline .1s;
   }
   
   .corr-inner:hover {
   outline: 2px solid hsla(0,0%,100%,0.50);
   }
   
   .corr-highlights {
   margin-top: 12px;
       font-size: 12px;
       opacity: 0.75;
       line-height: 2;
   }
   
   .corr-hi-item {
   margin-right: 16px;
   }
   
   .corr-hi-pos {
   color: var(--warm); font-weight: 600;
   }
   
   .corr-hi-neg {
   color: var(--cold); font-weight: 600;
   }
   
   /* ─── CARTEL EXPLICATIVO CORRELACIÓN ───────────────────── */
   .corr-explainer {
   background: hsla(213,71%,53%,0.08);
       border: 1px solid hsla(213,71%,53%,0.22);
       border-radius: 12px;
       margin-bottom: 14px;
       overflow: hidden;
   }
   
   .corr-explainer-header {
   display: flex;
       align-items: center;
       gap: 7px;
       padding: 10px 14px;
       cursor: pointer;
       font-size: 12px;
       font-weight: 600;
       color: var(--blue-300);
       user-select: none;
       transition: background .15s;
   }
   
   .corr-explainer-header:hover {
   background: hsla(213,71%,53%,0.08);
   }
   
   .corr-explainer-chevron {
   margin-left: auto; font-size: 18px; color: hsla(213,71%,53%,0.30); transition: transform .25s;
   }
   
   .corr-explainer.open .corr-explainer-chevron {
   transform: rotate(180deg);
   }
   
   .corr-explainer-body {
   display: none; padding: 0 14px 14px;
   }
   
   .corr-explainer.open .corr-explainer-body {
   display: block;
   }
   
   .corr-scale-wrap {
   margin: 0 0 12px;
   }
   
   .corr-scale-bar {
   display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-bottom: 3px;
   }
   
   .corr-scale-labels {
   display: flex; justify-content: space-between;
       font-size: 10px; opacity: 0.6; margin-bottom: 2px;
   }
   
   .corr-scale-desc {
   display: flex; justify-content: space-between;
       font-size: 10px; font-weight: 600;
   }
   
   .corr-legend-table {
   width: 100%; border-collapse: collapse;
       font-size: 11px; margin-top: 10px;
   }
   
   .corr-legend-table th {
   text-align: left; padding: 4px 8px;
       font-size: 10px; font-weight: 600;
       opacity: 0.6; text-transform: uppercase; letter-spacing: .04em;
       border-bottom: 1px solid hsla(213,71%,53%,0.18);
   }
   
   .corr-legend-table td {
   padding: 5px 8px;
       border-bottom: 1px solid var(--glass-sm);
       opacity: 0.85;
       vertical-align: middle;
   }
   
   .corr-badge {
   display: inline-block;
       padding: 2px 8px; border-radius: 10px;
       font-size: 10px; font-weight: 600;
       color: #fff;
   }
   
   @media (max-width: 600px) {
       .corr-legend-table td:last-child { display: none; }
   }
   
   /* ─── ÍNDICES CLIMÁTICOS ────────────────────────────────── */
   .ci-pair-grid {
   display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 10px;
       margin: 12px 0;
   }
   
   .ci-hero {
   background: hsla(213,71%,53%,0.10);
       border: 1px solid var(--border-blue);
       border-radius: 16px;
       padding: 16px;
   }
   
   .ci-hero-label {
   font-size: 11px;
       font-weight: 600;
       color: var(--blue-400);
       text-transform: uppercase;
       letter-spacing: .06em;
       margin-bottom: 6px;
   }
   
   .ci-hero-val {
   font-size: 36px;
       font-weight: 700;
       color: var(--blue-400);
       line-height: 1;
       margin-bottom: 4px;
   }
   
   .ci-hero-badge {
   display: inline-block;
       padding: 3px 10px;
       border-radius: 20px;
       font-size: 11px;
       font-weight: 600;
       background: hsla(213,71%,53%,0.22);
       color: var(--blue-400);
       margin-bottom: 6px;
   }
   
   .ci-hero-sub {
   font-size: 11px; opacity: 0.8;
   }
   
   .ci-hero.green {
   background: hsla(213,71%,53%,0.10);
       border-color: var(--border-blue-sm);
   }
   
   .ci-hero.green .ci-hero-label,
   .ci-hero.green .ci-hero-val,
   .ci-hero.green .ci-hero-badge {
   color: var(--blue-300);
   }
   
   .ci-hero.green .ci-hero-badge {
   background: hsla(213,71%,53%,0.22);
   }
   
   .ci-detail-grid {
   display: grid;
       grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
       gap: 8px;
   }
   
   .ci-detail-card {
   background: var(--glass-sm);
       border: 1px solid hsla(213,71%,53%,0.18);
       border-radius: 12px;
       padding: 10px 12px;
   }
   
   .ci-detail-label {
   font-size: 10px; opacity: 0.8; text-transform: uppercase; letter-spacing:.05em; margin-bottom: 4px;
   }
   
   .ci-detail-value {
   font-size: 16px; font-weight: 700; color: var(--blue-400);
   }
   
   .ci-detail-sub {
   font-size: 10px; opacity: 0.55; margin-top: 3px;
   }
   
   .ci-koppen-badge {
   display: inline-flex;
       align-items: center;
       gap: 6px;
       background: hsla(213,71%,53%,0.18);
       border: 1px solid hsla(213,71%,53%,0.38);
       border-radius: 20px;
       padding: 5px 14px;
       font-size: 13px;
       font-weight: 600;
       color: var(--blue-300);
       margin-top: 6px;
   }
   
   @media (max-width: 600px) {
       .mk-monthly-grid { grid-template-columns: repeat(4, 1fr); }
       .ci-pair-grid    { grid-template-columns: 1fr; }
       .etccdi-grid     { grid-template-columns: repeat(2, 1fr); }
   }
   
   /* ── Glosario wiki ── */
   .wiki-accordion {
   margin: 0 0 14px;
   }
   
   .wiki-header {
   display: flex; align-items: center; justify-content: space-between;
   padding: 11px 16px; cursor: pointer; border-radius: 10px;
   background: hsla(213,71%,53%,0.08);
   border: 1px solid hsla(213,71%,53%,0.18);
   transition: background .2s;
   user-select: none;
   }
   
   .wiki-header:hover {
   background: hsla(213,71%,53%,0.14);
   }
   
   .wiki-header-left {
   display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px; color:var(--blue-200);
   }
   
   .wiki-header .accordion-icon {
   transition: transform .25s; color: hsla(213,71%,53%,0.30); font-size:20px;
   }
   
   .wiki-accordion.open .wiki-header .accordion-icon {
   transform: rotate(180deg);
   }
   
   .wiki-body {
   display:none; padding: 14px 4px 4px;
   }
   
   .wiki-accordion.open .wiki-body {
   display:block;
   }
   
   .wiki-search-wrap {
   margin-bottom:12px; position:relative;
   }
   
   .wiki-search {
   width: 100%; box-sizing:border-box;
   padding: 8px 12px 8px 34px;
   background: var(--glass-sm);
   border: 1px solid hsla(213,71%,53%,0.22);
   border-radius: 8px; color: #fff; font-size: 13px;
   outline: none;
   }
   
   .wiki-search::placeholder {
   color: hsla(0,0%,100%,0.35);
   }
   
   .wiki-search-icon {
   position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:16px; color:rgba(196,245,255,0.45);
   }
   
   .wiki-cats {
   display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px;
   }
   
   .wiki-cat-btn {
   padding: 4px 11px; border-radius: 20px; border: 1px solid hsla(213,71%,53%,0.22);
   background: var(--glass-sm); color: hsla(0,0%,100%,0.60);
   font-size: 11px; cursor:pointer; transition: all .15s;
   }
   
   .wiki-cat-btn:hover, .wiki-cat-btn.active {
   background: hsla(213,71%,53%,0.18); color:var(--blue-200);
   border-color: var(--border-blue-md);
   }
   
   .wiki-grid {
   display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:10px;
   }
   
   .wiki-card {
   background: var(--glass-sm);
   border: 1px solid hsla(213,71%,53%,0.12);
   border-radius: 12px; padding: 13px 15px;
   transition: border-color .2s, background .2s;
   }
   
   .wiki-card:hover {
   background: hsla(213,71%,53%,0.08); border-color: var(--border-blue-sm);
   }
   
   .wiki-card-head {
   display:flex; align-items:center; gap:8px; margin-bottom:6px;
   }
   
   .wiki-card-icon {
   font-size:18px;
   }
   
   .wiki-card-name {
   font-weight:700; font-size:13px; color:var(--blue-200);
   }
   
   .wiki-card-formula {
   font-family: monospace; font-size:11px;
   color: rgba(255,210,80,0.85);
   background: rgba(255,210,80,0.08);
   border-radius:5px; padding: 3px 7px;
   margin-bottom:7px; display:inline-block;
   }
   
   .wiki-card-desc {
   font-size:12px; color:rgba(255,255,255,0.65); line-height:1.55;
   }
   
   .wiki-card-uso {
   margin-top:9px; padding:8px 10px;
   background: hsla(213,71%,53%,0.08);
   border-left: 2px solid var(--border-blue-md);
   border-radius: 0 6px 6px 0;
   font-size:11.5px; color:rgba(196,245,255,0.8); line-height:1.55;
   }
   
   .wiki-card-uso-label {
   font-size:10px; font-weight:700; letter-spacing:.5px;
   color:var(--border-blue-lg); text-transform:uppercase; margin-bottom:3px;
   }
   
   .wiki-card-tag {
   display:inline-block; margin-top:7px;
   font-size:10px; padding:2px 7px; border-radius:10px;
   font-weight:600; letter-spacing:.3px;
   }
   
   .wiki-tag-indices {
   background:hsla(213,71%,53%,0.18); color:var(--blue-400);
   }
   
   .wiki-tag-stats {
   background:hsla(213,71%,53%,0.18); color:var(--blue-300);
   }
   
   .wiki-tag-clima {
   background:rgba(255,195,50,0.15);  color:var(--warning);
   }
   
   .wiki-tag-viento {
   background:rgba(255,138,128,0.15); color:var(--warm);
   }
   
   .wiki-no-results {
   text-align:center; color:hsla(0,0%,100%,0.35); font-size:13px; padding:24px 0;
   }
   
   @media (max-width:600px) {
   .wiki-grid { grid-template-columns: 1fr; }
   }
   
   /* ─── BOTÓN AÑO ACTUAL VS HISTÓRICO ─────────────────────── */
   .quicksel-bar {
   display: flex; gap: 8px; flex-wrap: wrap;
       margin: 10px 0 10px;
       padding-bottom: 10px;
       border-bottom: 1px solid hsla(213,71%,53%,0.12);
   }
   
   .quicksel-btn {
       display: inline-flex;
       align-items: center;
       gap: 5px;
       padding: 5px 12px;
       border-radius: 20px;
       border: none;
       background: hsla(213,71%,53%,0.14);
       color: var(--blue-300);
       font-size: 11px;
       font-weight: 600;
       cursor: pointer;
       transition: background .15s, color .15s;
       letter-spacing: .03em;
   }
   
   .quicksel-btn:hover {
       background: hsla(213,71%,53%,0.26);
       color: #fff;
   }
   
   .quicksel-btn .material-symbols-outlined {
       font-size: 15px;
   }
   
   /* ─── BOTÓN COMPARTIR URL ────────────────────────────────── */
   .share-bar {
       display: flex;
       align-items: center;
       gap: 8px;
       margin: 8px 0 0;
   }
   
   .share-btn {
       display: inline-flex;
       align-items: center;
       gap: 5px;
       padding: 5px 13px;
       border-radius: 20px;
       border: none;
       background: rgba(255,210,80,0.13);
       color: var(--warning);
       font-size: 11px;
       font-weight: 600;
       cursor: pointer;
       transition: background .15s;
       letter-spacing: .03em;
   }
   
   .share-btn:hover {
       background: rgba(255,210,80,0.26);
   }
   
   .share-btn .material-symbols-outlined {
       font-size: 15px;
   }
   
   .share-toast {
       display: none;
       font-size: 11px;
       color: hsla(0,0%,100%,0.60);
       animation: fadeInOut 2s forwards;
   }
   
   @keyframes fadeInOut {
       0%   { opacity: 0; }
       15%  { opacity: 1; }
       75%  { opacity: 1; }
       100% { opacity: 0; }
   }
   
   /* ─── ROSA DE VIENTOS ────────────────────────────────────── */
   .windrose-wrap {
       display: flex;
       flex-wrap: wrap;
       gap: 20px;
       align-items: flex-start;
       justify-content: center;
   }
   
   .windrose-svg-wrap {
       flex: 0 0 auto;
   }
   
   .windrose-legend {
       flex: 1 1 180px;
       font-size: 12px;
   }
   
   .windrose-legend-title {
       font-size: 11px;
       font-weight: 700;
       opacity: 0.6;
       text-transform: uppercase;
       letter-spacing: .05em;
       margin-bottom: 8px;
   }
   
   .windrose-legend-item {
       display: flex;
       align-items: center;
       gap: 8px;
       margin-bottom: 5px;
   }
   
   .windrose-legend-dot {
       width: 10px;
       height: 10px;
       border-radius: 50%;
       flex-shrink: 0;
   }
   
   .windrose-note {
       font-size: 11px;
       opacity: 0.5;
       margin-top: 12px;
       line-height: 1.5;
   }
   
   .windrose-month-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
       gap: 8px;
       margin-top: 12px;
   }
   
   .windrose-month-card {
       background: var(--glass-xs);
       border: 1px solid hsla(213,71%,53%,0.12);
       border-radius: var(--r-sm);
       padding: 6px 8px;
       text-align: center;
   }
   
   .windrose-month-name {
       font-size: 10px;
       font-weight: 700;
       opacity: 0.7;
       letter-spacing: .04em;
       margin-bottom: 3px;
   }
   
   .windrose-month-dir {
       font-size: 13px;
       font-weight: 700;
       color: var(--blue-300);
   }
   
   .windrose-month-freq {
       font-size: 10px;
       opacity: 0.5;
   }
   
   /* ─── RESUMEN INTELIGENTE ────────────────────────────────── */
   .smart-summary {
       background: linear-gradient(135deg,
           hsla(213,71%,53%,0.08) 0%,
           rgba(80,160,255,0.04) 100%);
       border: 1px solid hsla(213,71%,53%,0.18);
       border-radius: 14px;
       padding: 14px 18px;
       margin: 10px 0 14px;
       position: relative;
       overflow: hidden;
   }
   
   .smart-summary::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 3px;
       height: 100%;
       background: linear-gradient(180deg, var(--blue-400), var(--cold) 50%, var(--blue-300));
       border-radius: 3px 0 0 3px;
   }
   
   .smart-summary-header {
       display: flex;
       align-items: center;
       gap: 7px;
       font-size: 11px;
       font-weight: 700;
       color: rgba(168,216,255,0.7);
       text-transform: uppercase;
       letter-spacing: .06em;
       margin-bottom: 9px;
   }
   
   .smart-summary-header .material-symbols-outlined {
       font-size: 15px;
   }
   
   .smart-summary-text {
       font-size: 13px;
       line-height: 1.75;
       color: var(--text-secondary);
   }
   
   .smart-summary-text strong {
       color: var(--blue-300);
       font-weight: 600;
   }
   
   .smart-summary-text .ss-hot {
       color: var(--warm);
       font-weight: 600;
   }
   
   .smart-summary-text .ss-cold {
       color: var(--cold);
       font-weight: 600;
   }
   
   .smart-summary-text .ss-wet {
       color: var(--cold);
       font-weight: 600;
   }
   
   .smart-summary-text .ss-dry {
       color: var(--warning);
       font-weight: 600;
   }
   
   .smart-summary-text .ss-wind {
       color: #b0bec5;
       font-weight: 600;
   }
   
   .smart-summary-text .ss-up {
       color: var(--warm);
   }
   
   .smart-summary-text .ss-down {
       color: var(--cold);
   }
   
   .smart-summary-loading {
       font-size: 12px;
       opacity: 0.45;
       font-style: italic;
   }
   
   /* ─── ONBOARDING BANNER ──────────────────────────────────── */
   .onboarding-banner {
       display: flex;
       align-items: center;
       gap: 14px;
       background: linear-gradient(135deg, hsla(213,71%,53%,0.10) 0%, rgba(80,160,255,0.06) 100%);
       border: 1px solid var(--border-blue-sm);
       border-radius: 14px;
       padding: 14px 18px;
       margin-bottom: 16px;
       animation: fadeInDown .4s ease;
   }
   
   @keyframes fadeInDown {
       from { opacity: 0; transform: translateY(-8px); }
       to   { opacity: 1; transform: translateY(0); }
   }
   
   .onboarding-banner .ob-icon {
       font-size: 28px;
       color: var(--blue-400);
       flex-shrink: 0;
   }
   
   .onboarding-banner .ob-text {
       font-size: 13px;
       color: var(--text-secondary);
       flex: 1;
   }
   
   .onboarding-banner .ob-steps {
       display: flex;
       gap: 6px;
       align-items: center;
       flex-wrap: wrap;
       margin-top: 6px;
   }
   
   .onboarding-banner .ob-step {
       display: inline-flex;
       align-items: center;
       gap: 4px;
       background: hsla(213,71%,53%,0.18);
       border: 1px solid var(--border-blue-sm);
       border-radius: 20px;
       padding: 3px 10px;
       font-size: 12px;
       font-weight: 600;
       color: var(--blue-300);
   }
   
   .onboarding-banner .ob-step .material-symbols-outlined {
       font-size: 14px;
   }
   
   .onboarding-banner .ob-arrow {
       color: var(--border-blue-md);
       font-size: 14px;
   }
   
   .onboarding-banner {
       position: relative;
       z-index: 10;
   }
   
   .onboarding-banner .ob-close {
       background: none;
       border: none;
       cursor: pointer;
       color: hsla(0,0%,100%,0.50);
       font-size: 20px;
       padding: 6px;
       flex-shrink: 0;
       transition: color .15s;
       position: relative;
       z-index: 100;
       line-height: 1;
       display: flex;
       align-items: center;
       pointer-events: all;
   }
   
   .onboarding-banner .ob-close:hover {
       color: #fff;
   }
   
   .onboarding-banner .ob-close .material-symbols-outlined {
       font-size: 20px;
       pointer-events: none;
   }
   
   /* ─── QUICKSEL ACTIVE STATE ──────────────────────────────── */
   .quicksel-btn.active {
       background: hsla(213,71%,53%,0.3) !important;
       color: #fff !important;
       box-shadow: 0 0 0 1.5px var(--border-blue-lg);
   }
   
   /* ─── ACCORDION NEW-DATA DOT ─────────────────────────────── */
   .accordion-new-dot {
       display: inline-block;
       width: 8px;
       height: 8px;
       background: var(--blue-400);
       border-radius: 50%;
       margin-left: 6px;
       vertical-align: middle;
       box-shadow: 0 0 5px var(--blue-400);
       animation: pulse-dot 1.8s ease-in-out infinite;
       flex-shrink: 0;
   }
   
   @keyframes pulse-dot {
       0%, 100% { opacity: 1; transform: scale(1); }
       50%       { opacity: .5; transform: scale(1.4); }
   }
   
   /* ─── BACK TO TOP BUTTON ─────────────────────────────────── */
   var(--blue-200)k-to-top {
   position: fixed; bottom: 24px; right: 22px; z-index: 900;
       width: 44px; height: 44px; border-radius: 50%;
       background: hsla(213,71%,53%,0.22);
       border: 1.5px solid var(--border-blue-md);
       color: var(--blue-300); cursor: pointer;
       display: flex; align-items: center; justify-content: center;
       box-shadow: 0 4px 16px rgba(0,0,0,0.35);
       transition: opacity .3s, transform .3s, background .2s;
       opacity: 0; pointer-events: none;
   }
   
   var(--blue-200)k-to-top.visible {
   opacity: 1; pointer-events: auto;
   }
   
   var(--blue-200)k-to-top:hover {
   background: hsla(213,71%,53%,0.38);
       transform: translateY(-3px);
   }
   
   var(--blue-200)k-to-top .material-symbols-outlined {
   font-size: 22px;
   }
   
   /* ─── TABLE CSV EXPORT BUTTON ────────────────────────────── */
   .table-csv-btn {
       display: inline-flex;
       align-items: center;
       gap: 5px;
       padding: 5px 12px;
       border-radius: 20px;
       border: none;
       background: rgba(100,210,100,0.13);
       color: var(--success);
       font-size: 11px;
       font-weight: 600;
       cursor: pointer;
       transition: background .15s;
       letter-spacing: .03em;
       margin-left: 8px;
   }
   
   .table-csv-btn:hover {
       background: rgba(100,210,100,0.26);
       color: #fff;
   }
   
   .table-csv-btn .material-symbols-outlined {
       font-size: 15px;
   }
   
   /* ─── WIKI AT BOTTOM ─────────────────────────────────────── */
   .wiki-section-footer {
       margin-top: 24px;
       border-top: 1px solid hsla(213,71%,53%,0.12);
       padding-top: 18px;
   }
   
   @media (max-width: 768px) {
       .desktop-only-controls { display: none !important; }
       .mobile-only-controls  { display: block !important; }
   }
   
   @media (min-width: 769px) {
       .mobile-only-controls  { display: none !important; }
       .desktop-only-controls { display: block !important; }
   }
   
   /* ═══════════════════════════════════════════════════════════
      VARIABILIDAD INTERANUAL + AÑOS ATÍPICOS
      ═══════════════════════════════════════════════════════════ */
   
   /* ── Shared ── */
   .var-intro {
       font-size: 12px;
       opacity: 0.8;
       margin: 6px 0 14px;
       line-height: 1.6;
   }
   
   .var-section-title {
       font-size: 13px;
       font-weight: 700;
       letter-spacing: .03em;
       color: var(--text-secondary);
       margin: 16px 0 8px;
       display: flex;
       align-items: center;
       gap: 6px;
   }
   
   .var-chart-wrap {
       background: var(--glass-xs);
       border: 1px solid hsla(0,0%,100%,0.07);
       border-radius: 10px;
       padding: 10px 14px 6px;
       overflow: hidden;
   }
   
   .var-hint {
       font-size: 11px;
       opacity: 0.6;
       margin: 6px 0 0;
       line-height: 1.6;
   }
   
   .var-legend-row {
       display: flex;
       flex-wrap: wrap;
       gap: 14px;
       margin: 8px 0 0;
       font-size: 11px;
       opacity: 0.75;
   }
   
   .var-legend-item {
       display: flex;
       align-items: center;
       gap: 5px;
   }
   
   .var-legend-dot {
       width: 10px;
       height: 10px;
       border-radius: 50%;
       display: inline-block;
       flex-shrink: 0;
   }
   
   /* ── Variability KPI grid ── */
   .var-kpi-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
       gap: 10px;
       margin: 14px 0;
   }
   
   .var-kpi {
       background: var(--glass-sm);
       border: 1px solid hsla(0,0%,100%,0.09);
       border-radius: 10px;
       padding: 12px 14px;
   }
   
   .var-kpi--highlight {
       border-color: var(--warning-border);
       background: var(--warning-bg);
   }
   
   .var-kpi-label {
       font-size: 11px;
       opacity: 0.7;
       margin-bottom: 4px;
       font-weight: 500;
   }
   
   .var-kpi-value {
       font-size: 20px;
       font-weight: 700;
       line-height: 1.2;
       color: var(--blue-100);
   }
   
   .var-kpi-sub {
       font-size: 10px;
       opacity: 0.55;
       margin-top: 3px;
   }
   
   /* ── Outliers KPI row ── */
   .out-kpi-row {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
       gap: 10px;
       margin: 12px 0 16px;
   }
   
   .out-kpi {
       background: var(--glass-sm);
       border: 1px solid hsla(0,0%,100%,0.09);
       border-radius: 10px;
       padding: 12px 12px 10px;
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
       gap: 2px;
   }
   
   .out-kpi--extreme {
       background: var(--warm-bg);
       border-color: var(--warm-border);
   }
   
   .out-kpi--mild {
       background: var(--warning-bg);
       border-color: var(--warning-border);
   }
   
   .out-kpi-icon .material-symbols-outlined {
       font-size: 22px;
       opacity: 0.55;
       margin-bottom: 2px;
   }
   
   .out-kpi--extreme .out-kpi-icon .material-symbols-outlined {
       color: var(--warm);
       opacity: 1;
   }
   
   .out-kpi--mild    .out-kpi-icon .material-symbols-outlined {
       color: var(--warning);
       opacity: 1;
   }
   
   .out-kpi-val {
       font-size: 24px;
       font-weight: 700;
       line-height: 1.1;
       color: var(--blue-100);
   }
   
   .out-kpi-lbl {
       font-size: 11px;
       opacity: 0.65;
       line-height: 1.4;
   }
   
   /* ── Outlier detail cards ── */
   .out-cards {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
       gap: 10px;
       margin-top: 8px;
   }
   
   .out-card {
       background: var(--glass-sm);
       border: 1px solid hsla(0,0%,100%,0.09);
       border-radius: 10px;
       padding: 12px 14px;
       display: flex;
       flex-direction: column;
       gap: 3px;
   }
   
   .out-card-year {
       font-size: 16px;
       font-weight: 700;
       display: flex;
       align-items: center;
       gap: 5px;
       margin-bottom: 2px;
   }
   
   .out-card-val {
       font-size: 20px;
       font-weight: 700;
       color: var(--blue-100);
   }
   
   .out-card-z {
       font-size: 12px;
       opacity: 0.7;
       font-family: monospace;
   }
   
   .out-card-delta {
       font-size: 11px;
       opacity: 0.6;
       margin-bottom: 4px;
   }
   
   .out-badge {
       display: inline-block;
       padding: 2px 8px;
       border-radius: 20px;
       font-size: 10px;
       font-weight: 600;
       letter-spacing: .03em;
       align-self: flex-start;
   }
   
   .out-badge--extreme {
       background: rgba(255,107,107,0.18);
       color: var(--warm);
       border: 1px solid var(--warm-border);
   }
   
   .out-badge--mild {
       background: var(--warning-bg);
       color: var(--warning);
       border: 1px solid var(--warning-border);
   }
   
   .out-no-outliers {
       display: flex;
       align-items: center;
       gap: 8px;
       color: var(--teal);
       font-size: 13px;
       background: var(--teal-bg);
       border: 1px solid var(--teal-border);
       border-radius: 10px;
       padding: 12px 16px;
       margin-top: 8px;
   }
   
   @media (max-width: 600px) {
       .var-kpi-grid   { grid-template-columns: 1fr 1fr; }
       .out-kpi-row    { grid-template-columns: 1fr 1fr; }
       .out-cards      { grid-template-columns: 1fr; }
   }
   
   /* ── Bloque "¿Qué significa esto?" ── */
   .plain-explain {
       margin-top: 20px;
       background: linear-gradient(135deg, hsla(213,71%,53%,0.08) 0%, var(--warning-bg) 100%);
       border: 1px solid hsla(213,71%,53%,0.18);
       border-radius: var(--r-md);
       overflow: hidden;
   }
   
   .plain-explain-header {
       display: flex;
       align-items: center;
       gap: 8px;
       padding: 11px 16px;
       background: hsla(213,71%,53%,0.10);
       border-bottom: 1px solid hsla(213,71%,53%,0.12);
       font-size: 13px;
       font-weight: 700;
       color: var(--blue-300);
       letter-spacing: .02em;
   }
   
   .plain-explain-header .material-symbols-outlined {
       font-size: 18px;
       color: var(--warning);
   }
   
   .plain-explain-body {
       padding: 14px 18px 12px;
       display: flex;
       flex-direction: column;
       gap: 8px;
   }
   
   .plain-explain-body p {
       margin: 0;
       font-size: 13px;
       line-height: 1.7;
       color: var(--text-secondary);
   }
   
   .plain-explain-body strong {
       color: var(--blue-100);
   }
   
   .plain-explain-tip {
       font-size: 12px !important;
       opacity: 0.65;
       border-top: 1px solid hsla(0,0%,100%,0.07);
       padding-top: 8px !important;
       margin-top: 4px !important;
   }
   
   @media (min-width: 768px) {
       .stats {
           grid-template-columns: repeat(4, 1fr);
       }
   }
   
   @media (min-width: 1200px) {
       .stats {
           grid-template-columns: repeat(6, 1fr);
       }
   }
   
   @media (max-width: 768px) {
       .table-wrapper {
           -webkit-overflow-scrolling: touch;
       }
       
       .table-wrapper table {
           min-width: 800px;
       }
       
       th, td {
           white-space: nowrap;
       }
   }
   
   .current-weather-loading .spinning {
   animation: spin 1s linear infinite;
   }
   
   .current-weather-content {
   display: flex;
       align-items: center;
       gap: 12px;
   }
   
   .current-weather-details {
   display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 4px;
       font-size: 12px;
   }
   
   /* Mobile Controls — base styles (layout, colors, typography) */
   .mobile-dropdown-block {
       margin-bottom: 12px;
   }
   
   .mobile-dropdown-trigger {
       width: 100%;
       background: var(--glass-md);
       border: 1px solid var(--border-blue-sm);
       border-radius: var(--r-sm);
       padding: 12px 16px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       cursor: pointer;
       transition: var(--t-fast);
   }
   
   .mobile-dropdown-trigger:hover {
       background: var(--glass-lg);
   }
   
   .mdt-left {
       display: flex;
       align-items: center;
       gap: 8px;
   }
   
   .mdt-label {
       font-weight: 600;
   }
   
   .mdt-summary {
       opacity: 0.7;
       font-size: 13px;
       margin-left: 8px;
   }
   
   .mdt-chevron {
       transition: transform 0.3s;
   }
   
   /* Chevron rota cuando el trigger está abierto */
   .mobile-dropdown-trigger.open .mdt-chevron {
       transform: rotate(180deg);
   }
   
   /* Panel: mecanismo open/close usando display (mismo que el @media interno) */
   .mobile-dropdown-panel {
       display: none;
       background: var(--glass-sm);
       border: 1px solid var(--border-blue-sm);
       border-top: none;
       border-radius: 0 0 var(--r-sm) var(--r-sm);
       padding: 12px 16px;
       flex-direction: column;
       gap: 8px;
   }
   
   .mobile-dropdown-panel.open {
       display: flex;
   }
   
   .mobile-dropdown-actions {
       display: flex;
       gap: 8px;
       margin: 12px 0;
   }
   
   .mobile-dropdown-options {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       margin-bottom: 16px;
   }
   
   .mobile-season-note {
       font-size: 11px;
       opacity: 0.6;
       margin: 8px 0;
   }
   
   /* Accordion Actions (para botones adicionales y flecha) */
   .accordion-actions {
   display: flex;
       align-items: center;
       gap: 8px;
   }
   
   .accordion-expand-btn {
   background: none;
       border: none;
       cursor: pointer;
       color: var(--text-secondary);
       transition: color var(--t-fast);
   }
   
   /* Quick Select Bar */
   .quicksel-bar {
   display: flex;
       align-items: center;
       gap: 8px;
       margin-bottom: 12px;
       flex-wrap: wrap;
   }
   
   /* ─── BACK TO TOP BUTTON ─────────────────────────────────── */
   #back-to-top {
       position: fixed; bottom: 24px; right: 22px; z-index: 900;
       width: 40px; height: 40px; border-radius: 50%;
       background: linear-gradient(135deg, hsla(234,70%,65%,0.25), hsla(188,94%,48%,0.15));
       border: 1px solid var(--border-blue-md);
       color: var(--indigo-200); cursor: pointer;
       display: flex; align-items: center; justify-content: center;
       box-shadow: 0 4px 20px rgba(100,113,245,0.30);
       transition: opacity 0.25s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1), background 0.2s;
       opacity: 0; pointer-events: none;
       backdrop-filter: blur(12px);
   }
   
   #back-to-top.visible {
       opacity: 1; pointer-events: auto;
   }
   
   #back-to-top:hover {
       background: linear-gradient(135deg, hsla(234,70%,65%,0.40), hsla(188,94%,48%,0.28));
       transform: translateY(-4px) scale(1.08);
       box-shadow: 0 8px 28px rgba(100,113,245,0.45);
   }
   
   #back-to-top .material-symbols-outlined {
   font-size: 22px;
   }
   
   /* ═══════════════════════════════════════════════════════════════════════
      2026 DESIGN SYSTEM — OVERRIDES & UX IMPROVEMENTS
      Paleta: Deep Space + Indigo Frost + Cyan Electric
      ═══════════════════════════════════════════════════════════════════════ */
   
   /* ── Global reset de color para legibilidad máxima ────────────────── */
   body, button, input, select, textarea {
       color: var(--text-primary);
   }
   
   /* ── Scrollbar estilizada ─────────────────────────────────────────── */
   ::-webkit-scrollbar { width: 6px; height: 6px; }
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb {
       background: hsla(234,60%,65%,0.25);
       border-radius: 99px;
   }
   ::-webkit-scrollbar-thumb:hover {
       background: hsla(234,60%,65%,0.45);
   }
   
   /* ── Focus visible accesible ──────────────────────────────────────── */
   :focus-visible {
       outline: 2px solid var(--indigo-400);
       outline-offset: 3px;
       border-radius: var(--r-xs);
   }
   
   /* ── Selección de texto ───────────────────────────────────────────── */
   ::selection {
       background: hsla(234,70%,65%,0.35);
       color: var(--indigo-100);
   }
   
   /* ── Control label mejorado ───────────────────────────────────────── */
   .control-label {
       font-weight: 600;
       font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 0.08em;
       color: var(--text-muted);
       margin-bottom: 10px;
       display: flex;
       align-items: center;
       gap: 5px;
   }
   
   /* ── Var-btn mejorado ─────────────────────────────────────────────── */
   .var-btn {
       background: var(--glass-sm);
       border: 1px solid var(--border-white-sm);
       color: var(--text-secondary);
       padding: 9px 18px;
       border-radius: var(--r-md);
       cursor: pointer;
       transition: var(--t-std);
       font-size: 13.5px;
       font-weight: 500;
       letter-spacing: 0.01em;
       white-space: nowrap;
   }
   
   .var-btn:hover {
       background: var(--glass-md);
       border-color: var(--border-blue-sm);
       color: var(--text-primary);
       transform: translateY(-1px);
       box-shadow: var(--shadow-sm);
   }
   
   .var-btn.active {
       background: linear-gradient(135deg,
           hsla(234,70%,65%,0.26) 0%,
           hsla(188,94%,48%,0.14) 100%);
       color: var(--indigo-200);
       font-weight: 600;
       border-color: var(--border-blue-lg);
       box-shadow: 0 0 0 1px hsla(234,70%,65%,0.12) inset,
                   0 3px 12px rgba(100,113,245,0.22);
   }
   
   /* ── Var category grouping ────────────────────────────────────────── */
   .var-cat-group { width: 100%; }
   
   .var-cat-label {
       display: flex;
       align-items: center;
       gap: 5px;
       font-size: 10px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.09em;
       color: var(--text-disabled);
       margin-bottom: 6px;
       padding-left: 2px;
   }
   
   .var-cat-label .material-symbols-outlined { font-size: 13px !important; }
   
   .var-cat-pills {
       display: flex;
       flex-wrap: wrap;
       gap: 6px;
       margin-bottom: 14px;
   }
   
   /* ── Stat highlights mejorados ────────────────────────────────────── */
   .stat-highlight-blue {
       background: hsla(188,94%,48%,0.10) !important;
       border-left: 2px solid hsla(188,94%,48%,0.45) !important;
   }
   
   .stat-highlight-blue .stat-value { color: var(--cyan-300); }
   
   .stat-highlight-red {
       background: hsla(0,98%,72%,0.09) !important;
       border-left: 2px solid hsla(0,98%,72%,0.38) !important;
   }
   
   .stat-highlight-red .stat-value { color: #fca5a5; }
   
   .stat-highlight-orange {
       background: hsla(25,100%,65%,0.09) !important;
       border-left: 2px solid hsla(25,100%,65%,0.35) !important;
   }
   
   .stat-highlight-yellow {
       background: hsla(43,96%,56%,0.09) !important;
       border-left: 2px solid hsla(43,96%,56%,0.35) !important;
   }
   
   .stat-highlight-yellow .stat-value { color: var(--warning); }
   
   /* ── Delta badges ─────────────────────────────────────────────────── */
   .stat-delta {
       display: inline-flex;
       align-items: center;
       gap: 2px;
       font-size: 10px;
       font-weight: 600;
       padding: 2px 7px;
       border-radius: 99px;
       margin-top: 4px;
       letter-spacing: 0.01em;
   }
   
   .stat-delta .material-symbols-outlined { font-size: 10px !important; }
   
   .delta-up   { background: hsla(0,80%,65%,0.15); color: #fca5a5; border: 1px solid hsla(0,80%,65%,0.25); }
   .delta-down { background: hsla(188,94%,48%,0.12); color: var(--cyan-300); border: 1px solid hsla(188,94%,48%,0.22); }
   .delta-up-precip   { background: hsla(188,94%,48%,0.12); color: var(--cyan-300); border: 1px solid hsla(188,94%,48%,0.22); }
   .delta-down-precip { background: hsla(43,96%,56%,0.12); color: var(--warning); border: 1px solid hsla(43,96%,56%,0.22); }
   
   .stat-hist-ref {
       font-size: 9.5px;
       color: var(--text-disabled);
       margin-top: 3px;
   }
   
   /* ── Stats stat-card featured ─────────────────────────────────────── */
   .stat-card--featured {
       background: hsla(234,70%,65%,0.10) !important;
       border-color: var(--border-blue-md) !important;
   }
   
   /* ── Stats section ────────────────────────────────────────────────── */
   .stats {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
       gap: 8px;
       margin-bottom: 16px;
   }
   
   @media (min-width: 768px)  { .stats { grid-template-columns: repeat(4, 1fr); } }
   @media (min-width: 1200px) { .stats { grid-template-columns: repeat(6, 1fr); } }
   
   /* ── Stat indicator pill ──────────────────────────────────────────── */
   .stat-indicator {
       display: inline-block;
       font-size: 9px;
       font-weight: 600;
       color: var(--text-muted);
       background: var(--glass-sm);
       border: 1px solid var(--border-white-sm);
       padding: 1px 6px;
       border-radius: 99px;
       margin-top: 3px;
       letter-spacing: 0.03em;
   }
   
   /* ── Chart stats bar ──────────────────────────────────────────────── */
   .chart-stats-bar {
       display: flex;
       flex-wrap: wrap;
       gap: 6px;
       margin: 8px 0 14px;
   }
   
   .chart-stat-badge {
       display: inline-flex;
       align-items: center;
       gap: 4px;
       font-size: 11px;
       font-weight: 600;
       padding: 4px 10px;
       border-radius: 99px;
       letter-spacing: 0.01em;
   }
   
   .chart-stat-badge .material-symbols-outlined { font-size: 12px !important; }
   .chart-stat-badge--max { background: hsla(0,80%,65%,0.12); color: #fca5a5; border: 1px solid hsla(0,80%,65%,0.22); }
   .chart-stat-badge--min { background: hsla(188,94%,48%,0.10); color: var(--cyan-300); border: 1px solid hsla(188,94%,48%,0.20); }
   .chart-stat-badge--avg { background: var(--glass-sm); color: var(--text-muted); border: 1px solid var(--border-white-sm); }
   
   /* ── Chart title ──────────────────────────────────────────────────── */
   .chart-title, #chart-main-title {
       font-size: 15px;
       font-weight: 600;
       color: var(--text-secondary);
       letter-spacing: -0.01em;
       font-feature-settings: "ss03" 1;
   }
   
   /* ── Table cell color coding ──────────────────────────────────────── */
   td.cell-hot-3  { background: hsla(0,90%,65%,0.28) !important; color: #fecaca; }
   td.cell-hot-2  { background: hsla(15,90%,65%,0.18) !important; color: #fed7aa; }
   td.cell-hot-1  { background: hsla(30,80%,60%,0.10) !important; }
   td.cell-cold-1 { background: hsla(188,80%,55%,0.10) !important; }
   td.cell-cold-2 { background: hsla(210,80%,60%,0.18) !important; color: #bae6fd; }
   td.cell-cold-3 { background: hsla(220,80%,65%,0.28) !important; color: #93c5fd; }
   td.cell-rain-3 { background: hsla(234,70%,65%,0.24) !important; color: var(--indigo-200); }
   td.cell-rain-2 { background: hsla(234,70%,65%,0.14) !important; }
   td.cell-rain-1 { background: hsla(234,70%,65%,0.07) !important; }
   
   /* ── Footer mejorado ──────────────────────────────────────────────── */
   .footer {
       text-align: center;
       margin-top: 32px;
       padding-top: 20px;
       border-top: 1px solid var(--border-white-sm);
       font-size: 12.5px;
       color: var(--text-disabled);
   }
   
   .footer a {
       color: var(--indigo-300);
       text-decoration: none;
       font-weight: 600;
       transition: color 0.15s;
   }
   
   .footer a:hover { color: var(--indigo-200); }
   
   /* ── Export buttons variantes ─────────────────────────────────────── */
   .export-btn--csv   { border-color: hsla(234,70%,65%,0.28); }
   .export-btn--csv:hover   { background: hsla(234,70%,65%,0.12); border-color: var(--border-blue-md); }
   .export-btn--excel { border-color: hsla(160,84%,39%,0.30); }
   .export-btn--excel:hover { background: hsla(160,84%,39%,0.12); border-color: hsla(160,84%,39%,0.50); color: var(--success); }
   .export-btn--pdf   { border-color: hsla(0,80%,65%,0.28); }
   .export-btn--pdf:hover   { background: hsla(0,80%,65%,0.10); border-color: hsla(0,80%,65%,0.45); }
   
   /* ── Icon inline dentro de texto ─────────────────────────────────── */
   .icon-inline, .icon-sm, .icon-btn, .icon-heading, .icon-chart {
       font-size: 18px !important;
       vertical-align: middle;
   }
   .icon-sm  { font-size: 15px !important; }
   .icon-btn { font-size: 16px !important; }
   
   /* ── Table wrapper ─────────────────────────────────────────────────── */
   .table-wrapper {
       border-radius: var(--r-md);
       overflow: hidden;
       border: 1px solid var(--border-white-sm);
   }
   
   table {
       border-collapse: collapse;
       background: transparent;
   }
   
   th, td { border-bottom: 1px solid var(--border-white-sm); }
   
   tfoot td {
       background: hsla(234,60%,55%,0.10);
       color: var(--indigo-200);
       font-weight: 600;
       border-top: 1px solid var(--border-blue-sm);
   }
   
   /* ── Smart presets bar ────────────────────────────────────────────── */
   .smart-presets-bar {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 6px;
       padding: 10px 0 4px;
       margin-bottom: 6px;
       border-top: 1px solid var(--border-white-sm);
   }
   
   .smart-presets-label {
       font-size: 10px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.08em;
       color: var(--text-disabled);
       display: flex;
       align-items: center;
       gap: 4px;
       white-space: nowrap;
   }
   
   .smart-preset-btn {
       display: inline-flex;
       align-items: center;
       gap: 4px;
       background: var(--glass-xs);
       border: 1px solid var(--border-white-sm);
       color: var(--text-muted);
       padding: 5px 11px;
       border-radius: 99px;
       cursor: pointer;
       font-size: 12px;
       font-weight: 500;
       transition: var(--t-fast);
       white-space: nowrap;
   }
   
   .smart-preset-btn .material-symbols-outlined { font-size: 13px !important; }
   
   .smart-preset-btn:hover {
       background: var(--glass-md);
       border-color: var(--border-blue-sm);
       color: var(--text-primary);
       transform: translateY(-1px);
   }
   
   .smart-preset-btn.active {
       background: linear-gradient(135deg, hsla(234,70%,65%,0.24), hsla(188,94%,48%,0.14));
       border-color: var(--border-blue-md);
       color: var(--indigo-200);
   }
   
   /* ── Onboarding banner ────────────────────────────────────────────── */
   .onboarding-banner {
       background: linear-gradient(135deg,
           hsla(234,70%,65%,0.10) 0%,
           hsla(188,94%,48%,0.07) 100%);
       border: 1px solid var(--border-blue-sm);
   }
   
   /* ── Quicksel buttons ─────────────────────────────────────────────── */
   .quicksel-btn {
       display: inline-flex;
       align-items: center;
       gap: 5px;
       background: var(--glass-sm);
       border: 1px solid var(--border-white-sm);
       color: var(--text-secondary);
       padding: 6px 14px;
       border-radius: 99px;
       cursor: pointer;
       font-size: 12.5px;
       font-weight: 500;
       transition: var(--t-fast);
   }
   
   .quicksel-btn:hover {
       background: var(--glass-md);
       border-color: var(--border-blue-sm);
       color: var(--text-primary);
       transform: translateY(-1px);
   }
   
   .quicksel-btn.active {
       background: hsla(234,70%,65%,0.18);
       border-color: var(--border-blue-md);
       color: var(--indigo-200);
   }
   
   /* ── Share button ─────────────────────────────────────────────────── */
   .share-btn {
       display: inline-flex;
       align-items: center;
       gap: 5px;
       background: var(--glass-sm);
       border: 1px solid var(--border-white-sm);
       color: var(--text-muted);
       padding: 6px 14px;
       border-radius: 99px;
       cursor: pointer;
       font-size: 12.5px;
       font-weight: 500;
       transition: var(--t-fast);
   }
   
   .share-btn:hover {
       background: var(--glass-md);
       border-color: var(--border-blue-sm);
       color: var(--text-primary);
       transform: translateY(-1px);
   }
   
   /* ── WMO badge ────────────────────────────────────────────────────── */
   .wmo-badge {
       display: flex;
       align-items: center;
       gap: 8px;
       padding: 10px 14px;
       border-radius: var(--r-md);
       margin-bottom: 12px;
       font-size: 12.5px;
       font-weight: 500;
       flex-wrap: wrap;
       grid-column: 1 / -1;
   }
   
   .wmo-badge .material-symbols-outlined { font-size: 17px !important; }
   .wmo-hot  { background: hsla(0,80%,65%,0.10); border: 1px solid hsla(0,80%,65%,0.25); color: #fca5a5; }
   .wmo-cold { background: hsla(188,94%,48%,0.09); border: 1px solid hsla(188,94%,48%,0.24); color: var(--cyan-300); }
   .wmo-wet  { background: hsla(234,70%,65%,0.10); border: 1px solid var(--border-blue-sm); color: var(--indigo-200); }
   .wmo-dry  { background: hsla(43,96%,56%,0.10); border: 1px solid hsla(43,96%,56%,0.25); color: var(--warning); }
   
   /* ── SPI badge ────────────────────────────────────────────────────── */
   .spi-badge, .dq-badge {
       display: inline-flex;
       align-items: center;
       gap: 4px;
       padding: 3px 9px;
       border-radius: 99px;
       font-size: 11px;
       font-weight: 600;
   }
   
   .spi-wet    { background: hsla(188,94%,48%,0.10); border: 1px solid hsla(188,94%,48%,0.22); color: var(--cyan-300); }
   .spi-dry    { background: hsla(43,96%,56%,0.10); border: 1px solid hsla(43,96%,56%,0.22); color: var(--warning); }
   .spi-normal { background: hsla(160,84%,39%,0.10); border: 1px solid hsla(160,84%,39%,0.22); color: var(--success); }
   .dq-validated { background: hsla(160,84%,39%,0.10); border: 1px solid hsla(160,84%,39%,0.22); color: var(--success); }
   .dq-estimated { background: hsla(43,96%,56%,0.10); border: 1px solid hsla(43,96%,56%,0.22); color: var(--warning); }
   
   /* ── Smart summary ────────────────────────────────────────────────── */
   .smart-summary {
       background: linear-gradient(135deg,
           hsla(234,60%,14%,0.70) 0%,
           hsla(188,60%,10%,0.60) 100%);
       border: 1px solid var(--border-blue-sm);
       border-radius: var(--r-lg);
   }
   
   .smart-summary-header {
       color: var(--indigo-200);
   }
   
   .ss-hot   { color: #fca5a5; }
   .ss-cold  { color: var(--cyan-300); }
   .ss-wet   { color: var(--indigo-300); }
   .ss-dry   { color: var(--warning); }
   .ss-wind  { color: var(--teal); }
   .ss-up    { color: #fca5a5; }
   .ss-down  { color: var(--cyan-300); }
   
   /* ── Rank badge ───────────────────────────────────────────────────── */
   .ss-rank-badge {
       display: inline-flex;
       align-items: center;
       gap: 4px;
       background: hsla(43,96%,56%,0.12);
       border: 1px solid hsla(43,96%,56%,0.25);
       color: var(--warning);
       padding: 3px 9px;
       border-radius: 99px;
       font-size: 11.5px;
       font-weight: 600;
   }
   
   /* ── Mobile dropdown improvements ────────────────────────────────── */
   .mobile-dropdown-trigger {
       background: var(--glass-sm);
       border: 1px solid var(--border-white-sm);
       border-radius: var(--r-md);
       color: var(--text-secondary);
       transition: var(--t-fast);
   }
   
   .mobile-dropdown-trigger:hover,
   .mobile-dropdown-trigger.open {
       background: var(--glass-md);
       border-color: var(--border-blue-sm);
       color: var(--text-primary);
   }
   
   .mobile-dropdown-panel {
       background: var(--glass-sm);
       border: 1px solid var(--border-blue-sm);
       border-top: none;
   }
   
   /* ── Readings tab (modal) ─────────────────────────────────────────── */
   .readings-tab {
       background: var(--glass-sm);
       border: 1px solid var(--border-white-sm);
       color: var(--text-muted);
       font-size: 13px;
       transition: var(--t-fast);
   }
   
   .readings-tab:hover {
       background: var(--glass-md);
       color: var(--text-primary);
   }
   
   .readings-tab.active {
       background: hsla(234,70%,65%,0.18);
       border-color: var(--border-blue-md);
       color: var(--indigo-200);
       font-weight: 600;
   }
   
   /* ── Reading cards ────────────────────────────────────────────────── */
   .reading-card {
       background: var(--glass-sm);
       border: 1px solid var(--border-white-sm);
       border-radius: var(--r-md);
       transition: var(--t-fast);
   }
   
   .reading-card:hover {
       background: var(--glass-md);
       border-color: var(--border-blue-sm);
       transform: translateY(-2px);
       box-shadow: var(--shadow-sm);
   }
   
   .reading-card-value { color: var(--text-primary); }
   .reading-card-unit  { color: var(--text-muted); font-size: 0.75em; }
   
   /* ── Wiki / Glosario ──────────────────────────────────────────────── */
   .wiki-accordion {
       background: var(--glass-xs);
       border: 1px solid var(--border-white-sm);
       transition: border-color var(--t-fast);
   }
   
   .wiki-accordion.open { border-color: var(--border-blue-sm); }
   
   .wiki-card {
       background: var(--glass-sm);
       border: 1px solid var(--border-white-sm);
       border-radius: var(--r-md);
       transition: var(--t-fast);
   }
   
   .wiki-card:hover {
       background: var(--glass-md);
       border-color: var(--border-blue-sm);
   }
   
   .wiki-cat-btn {
       background: var(--glass-sm);
       border: 1px solid var(--border-white-sm);
       color: var(--text-muted);
       border-radius: 99px;
       padding: 4px 12px;
       font-size: 12px;
       font-weight: 500;
       cursor: pointer;
       transition: var(--t-fast);
   }
   
   .wiki-cat-btn:hover {
       background: var(--glass-md);
       color: var(--text-primary);
   }
   
   .wiki-cat-btn.active {
       background: hsla(234,70%,65%,0.18);
       border-color: var(--border-blue-md);
       color: var(--indigo-200);
       font-weight: 600;
   }
   
   /* ── Records section ──────────────────────────────────────────────── */
   .rec-month-card {
       background: var(--glass-sm);
       border: 1px solid var(--border-white-sm);
       border-radius: var(--r-md);
       transition: var(--t-fast);
   }
   
   .rec-month-card:hover {
       background: var(--glass-md);
       border-color: var(--border-blue-sm);
   }
   
   .rec-month-val.warm { color: #fca5a5; }
   .rec-month-val.cold { color: var(--cyan-300); }
   
   /* ── Heatmap table ────────────────────────────────────────────────── */
   .hm-table th { color: var(--indigo-200); }
   .hm-cell { font-size: 12px; font-weight: 500; }
   
   /* ── Anomaly cards ────────────────────────────────────────────────── */
   .anomaly-card {
       background: var(--glass-sm);
       border: 1px solid var(--border-white-sm);
       border-radius: var(--r-md);
       transition: var(--t-fast);
   }
   
   .anomaly-value.positive { color: #fca5a5; }
   .anomaly-value.negative { color: var(--cyan-300); }
   .anomaly-value.neutral  { color: var(--text-muted); }
   
   .anomaly-bar-fill.positive { background: linear-gradient(90deg, hsla(0,80%,65%,0.18), hsla(0,80%,65%,0.45)); }
   .anomaly-bar-fill.negative { background: linear-gradient(90deg, hsla(188,94%,48%,0.18), hsla(188,94%,48%,0.45)); }
   .anomaly-bar-fill.neutral  { background: var(--glass-md); }
   
   /* ── Ranking ──────────────────────────────────────────────────────── */
   .rank-badge.rank-1 { background: hsla(43,96%,56%,0.20); color: #fbbf24; border: 1px solid hsla(43,96%,56%,0.35); border-radius: 99px; padding: 2px 8px; }
   .rank-badge.rank-2 { background: hsla(220,10%,70%,0.15); color: #cbd5e1; border: 1px solid hsla(220,10%,70%,0.25); border-radius: 99px; padding: 2px 8px; }
   .rank-badge.rank-3 { background: hsla(25,80%,55%,0.15); color: #fb923c; border: 1px solid hsla(25,80%,55%,0.28); border-radius: 99px; padding: 2px 8px; }
   .rank-badge.rank-n { background: var(--glass-sm); color: var(--text-muted); border-radius: 99px; padding: 2px 8px; }
   
   /* ── Boxplot styles ───────────────────────────────────────────────── */
   .boxplot-legend-item { color: var(--text-secondary); font-size: 12px; }
   
   /* ── Aridity scale ────────────────────────────────────────────────── */
   .aridity-hyperarid { background: hsla(0,80%,60%,0.18); color: #fca5a5; border-color: hsla(0,80%,60%,0.30); }
   .aridity-arid      { background: hsla(25,80%,60%,0.15); color: #fdba74; border-color: hsla(25,80%,60%,0.28); }
   .aridity-semiarid  { background: hsla(43,80%,60%,0.14); color: #fcd34d; border-color: hsla(43,80%,60%,0.26); }
   .aridity-subhumid  { background: hsla(90,60%,55%,0.12); color: #86efac; border-color: hsla(90,60%,55%,0.24); }
   .aridity-humid     { background: hsla(160,70%,45%,0.12); color: var(--success); border-color: hsla(160,70%,45%,0.26); }
   .aridity-perhumid  { background: hsla(188,80%,45%,0.12); color: var(--cyan-300); border-color: hsla(188,80%,45%,0.26); }
   
   /* ── Mobile responsive final pass ────────────────────────────────── */
   @media (max-width: 768px) {
       .container { padding: 12px; }
       .widget { padding: 18px 14px; border-radius: 20px; }
       h1 { font-size: 21px; margin-bottom: 16px; }
       .smart-presets-label { display: none; }
       .smart-preset-btn { font-size: 11px; padding: 4px 9px; }
       .stat-card { padding: 9px 9px 8px; }
       .stat-value { font-size: 16px; }
       .accordion-header { padding: 12px 14px; font-size: 13.5px; }
       .stats { gap: 6px; }
       .chart-stat-badge { font-size: 10px; padding: 3px 8px; }
   }
   
   @media (max-width: 480px) {
       .stats { grid-template-columns: repeat(2, 1fr); }
       .export-buttons { gap: 8px; }
       .export-btn { font-size: 12px; padding: 7px 12px; }
       .smart-presets-bar { gap: 4px; }
   }
   
   /* ── Accent line en top del widget ────────────────────────────────── */
   .widget::before {
       content: '';
       position: absolute;
       top: 0;
       left: 10%;
       right: 10%;
       height: 1px;
       background: linear-gradient(90deg,
           transparent 0%,
           hsla(234,70%,65%,0.50) 30%,
           hsla(188,94%,48%,0.50) 70%,
           transparent 100%);
       border-radius: 1px;
   }
   
   .widget { position: relative; }
   
   /* ── Canvas de fondo ─────────────────────────────────────────────── */
   #clima-canvas {
       position: fixed;
       top: 0; left: 0;
       width: 100%; height: 100%;
       pointer-events: none;
       z-index: 0;
       opacity: 0.30;
   }
   
   .container { position: relative; z-index: 1; }
   
   /* ── Pct label ────────────────────────────────────────────────────── */
   .pct { font-size: 10px; opacity: 0.65; font-weight: 400; }
   
   /* ── Muted text ───────────────────────────────────────────────────── */
   .muted { color: var(--text-muted); }