/* WhatAWeather — tema oscuro genérico para páginas secundarias.
 * Se activa con html[data-theme="dark"] (toggle en la cabecera canónica waw-header).
 * Overrides deliberadamente amplios: cubre las dos familias de plantillas
 * (herramientas y ciudades) y las herramientas nuevas por convención de clases. */

html[data-theme="dark"] { color-scheme: dark; }

html[data-theme="dark"] body {
  background: #0b1220 !important;
  color: #cbd5e1 !important;
}

/* Tipografía */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] strong, html[data-theme="dark"] b,
html[data-theme="dark"] th { color: #f1f5f9 !important; }
html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] td,
html[data-theme="dark"] label, html[data-theme="dark"] small { color: #b6c2d4; }
html[data-theme="dark"] a { color: #7dd3fc; }

/* Contenedores claros habituales (paneles, tarjetas, pasos, bloques SEO...) */
html[data-theme="dark"] .panel, html[data-theme="dark"] .card,
html[data-theme="dark"] [class*="-card"], html[data-theme="dark"] [class*="card-"],
html[data-theme="dark"] .step, html[data-theme="dark"] .box,
html[data-theme="dark"] .seo-block, html[data-theme="dark"] .seo-text,
html[data-theme="dark"] .faq, html[data-theme="dark"] .now-card,
html[data-theme="dark"] .kpi, html[data-theme="dark"] .hours-wrap,
html[data-theme="dark"] .now-icon, html[data-theme="dark"] [class*="-wrap"],
html[data-theme="dark"] [class*="panel"] {
  background-color: #0f172a !important;
  background-image: none !important;
  border-color: rgba(148,163,184,.16) !important;
  color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
}
/* Valores destacados de las tarjetas meteo (temperatura grande, condición, KPIs) */
html[data-theme="dark"] .now-temp, html[data-theme="dark"] .now-cond,
html[data-theme="dark"] [class*="temp"], html[data-theme="dark"] [class*="value"],
html[data-theme="dark"] [class*="big"], html[data-theme="dark"] .score {
  color: #f1f5f9 !important;
}

/* Los canvas de Chart.js dibujan ejes gris oscuro: dales un lienzo claro tenue para mantener contraste */
html[data-theme="dark"] .hours-wrap canvas, html[data-theme="dark"] [class*="chart"] canvas {
  background: #e8eef7 !important; border-radius: 10px;
}

/* Fondos suaves (#f6f9fc y similares) usados como secciones alternas */
html[data-theme="dark"] .bg-light, html[data-theme="dark"] .alt,
html[data-theme="dark"] .hour-grid > *, html[data-theme="dark"] .chip,
html[data-theme="dark"] .city-chip, html[data-theme="dark"] .tag {
  background-color: #101b30 !important;
  border-color: rgba(148,163,184,.16) !important;
  color: #cbd5e1 !important;
}

/* Formularios */
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  background-color: #0f172a !important;
  border-color: rgba(148,163,184,.25) !important;
  color: #e2e8f0 !important;
}
html[data-theme="dark"] input::placeholder { color: #64748b; }

/* Tablas */
html[data-theme="dark"] table { background: transparent; }
html[data-theme="dark"] tr, html[data-theme="dark"] td, html[data-theme="dark"] th {
  border-color: rgba(148,163,184,.14) !important;
  background-color: transparent;
}
html[data-theme="dark"] thead, html[data-theme="dark"] thead tr, html[data-theme="dark"] thead th {
  background-color: #101b30 !important;
}

/* Desplegables de sugerencias, tooltips y menús flotantes */
html[data-theme="dark"] .suggest, html[data-theme="dark"] [class*="suggest"],
html[data-theme="dark"] [class*="dropdown"], html[data-theme="dark"] [class*="tooltip"] {
  background-color: #0f172a !important;
  border-color: rgba(148,163,184,.25) !important;
  color: #e2e8f0;
}
html[data-theme="dark"] .suggest button { color: #e2e8f0 !important; border-color: rgba(148,163,184,.1) !important; }
html[data-theme="dark"] .suggest button:hover { background: #16233c !important; }

/* Pie de página y migas */
html[data-theme="dark"] footer, html[data-theme="dark"] footer.site {
  background-color: #0b1220 !important;
  border-color: rgba(148,163,184,.14) !important;
  color: #94a3b8 !important;
}
html[data-theme="dark"] .breadcrumb, html[data-theme="dark"] .crumbs { color: #64748b; }

/* Cabecera canónica */
html[data-theme="dark"] .waw-header {
  background: rgba(11,18,32,.9) !important;
  border-bottom-color: rgba(148,163,184,.14) !important;
}
html[data-theme="dark"] .waw-logo, html[data-theme="dark"] .waw-nav > a,
html[data-theme="dark"] .waw-dd > a { color: #e2e8f0 !important; }
html[data-theme="dark"] .waw-dd-m, html[data-theme="dark"] .waw-mobile {
  background: #0f172a !important; border-color: rgba(148,163,184,.2) !important;
}
html[data-theme="dark"] .waw-dd-m a, html[data-theme="dark"] .waw-mobile a { color: #e2e8f0 !important; }
html[data-theme="dark"] .waw-dd-m a:hover { background: rgba(56,189,248,.12) !important; color: #7dd3fc !important; }
html[data-theme="dark"] .waw-lang { background: #101b30; border-color: rgba(148,163,184,.25) !important; }
html[data-theme="dark"] .waw-lang a { color: #94a3b8; }
html[data-theme="dark"] .waw-lang a.on { background: #e2e8f0; color: #0b1220; }
html[data-theme="dark"] .waw-burger { background: #101b30; border-color: rgba(148,163,184,.25) !important; }
html[data-theme="dark"] .waw-burger svg { stroke: #e2e8f0; }
html[data-theme="dark"] .waw-theme { background: #101b30; border-color: rgba(148,163,184,.25) !important; color: #e2e8f0; }

/* Los héroes con degradado de color se conservan tal cual (ya funcionan sobre oscuro).
 * Anuncios: fondo transparente para no dejar cajas blancas vacías. */
html[data-theme="dark"] .ad-slot { background: transparent !important; border-color: rgba(148,163,184,.14) !important; }