/* Calidad del Aire Canarias - front styles */
.cac-wrap{
  --cac-bg: #ffffff;
  --cac-surface: #ffffff;
  --cac-surface-2: #f5f7fb;
  --cac-text: #111827;
  --cac-muted: #6b7280;
  --cac-border: rgba(17,24,39,.12);
  --cac-shadow: 0 10px 25px rgba(0,0,0,.06);
  --cac-radius: 18px;
  --cac-radius-sm: 14px;
  --cac-accent: #0ea5e9;
  --cac-line: currentColor;
  --cac-area: rgba(14,165,233,.12);
  --cac-good: #16a34a;
  --cac-fair: #84cc16;
  --cac-moderate: #eab308;
  --cac-poor: #f97316;
  --cac-verypoor: #ef4444;
  --cac-extreme: #7c3aed;
  --cac-unknown: #64748b;

  color: var(--cac-text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

@media (prefers-color-scheme: dark){
  .cac-wrap.cac-theme-auto{
    --cac-bg:#0b1220;
    --cac-surface:#0f172a;
    --cac-surface-2:#0b1220;
    --cac-text:#e5e7eb;
    --cac-muted:#9ca3af;
    --cac-border: rgba(255,255,255,.10);
    --cac-shadow: 0 12px 35px rgba(0,0,0,.35);
    --cac-area: rgba(14,165,233,.18);
  }
}
.cac-wrap.cac-theme-dark{
  --cac-bg:#0b1220;
  --cac-surface:#0f172a;
  --cac-surface-2:#0b1220;
  --cac-text:#e5e7eb;
  --cac-muted:#9ca3af;
  --cac-border: rgba(255,255,255,.10);
  --cac-shadow: 0 12px 35px rgba(0,0,0,.35);
  --cac-area: rgba(14,165,233,.18);
}
.cac-wrap.cac-theme-light{
  --cac-bg:#ffffff;
  --cac-surface:#ffffff;
  --cac-surface-2:#f5f7fb;
}

.cac-wrap{
  background: var(--cac-bg);
  border: 1px solid var(--cac-border);
  border-radius: var(--cac-radius);
  padding: 18px;
  box-shadow: var(--cac-shadow);
  max-width: 1200px;
  margin: 18px auto;
}

.cac-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding: 6px 4px 14px;
  border-bottom: 1px solid var(--cac-border);
  margin-bottom: 16px;
}
.cac-title h2{
  margin:0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  /* Force correct contrast even if the theme overrides H2 styles */
  color: var(--cac-text) !important;
}
.cac-sub{
  margin-top: 8px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.cac-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--cac-surface-2);
  border: 1px solid var(--cac-border);
  font-size: 12px;
  color: var(--cac-muted);
}
.cac-meta{
  font-size: 12px;
  color: var(--cac-muted);
}

.cac-refresh{
  appearance:none;
  border:1px solid var(--cac-border);
  background: var(--cac-surface);
  color: var(--cac-text);
  padding: 10px 12px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.cac-refresh svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
  opacity: .9;
}
.cac-refresh:hover{ transform: translateY(-1px); }
.cac-refresh:active{ transform: translateY(0); }

.cac-grid{
  display:grid;
  gap:14px;
}
.cac-mode-grid .cac-grid{
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 980px){
  .cac-mode-grid .cac-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .cac-mode-grid .cac-grid{ grid-template-columns: 1fr; }
}
.cac-mode-list .cac-grid{
  grid-template-columns: 1fr;
}

.cac-card{
  background: var(--cac-surface);
  border: 1px solid var(--cac-border);
  border-radius: var(--cac-radius);
  overflow:hidden;
  position:relative;
}
.cac-card::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height: 4px;
  background: var(--cac-unknown);
}
.cac-band-good::before{ background: var(--cac-good); }
.cac-band-fair::before{ background: var(--cac-fair); }
.cac-band-moderate::before{ background: var(--cac-moderate); }
.cac-band-poor::before{ background: var(--cac-poor); }
.cac-band-verypoor::before{ background: var(--cac-verypoor); }
.cac-band-extreme::before{ background: var(--cac-extreme); }
.cac-band-unknown::before{ background: var(--cac-unknown); }

.cac-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding: 14px 14px 10px;
}
.cac-island-name{
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 16px;
  line-height:1.1;
}
.cac-island-sub{
  margin-top: 5px;
  font-size: 12px;
  color: var(--cac-muted);
}
.cac-island-link{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(14,165,233,.45);
}
.cac-island-link:hover{
  border-bottom-color: rgba(14,165,233,.9);
}

.cac-aqi{
  text-align:right;
  min-width: 92px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--cac-border);
  background: var(--cac-surface-2);
}
.cac-aqi-value{
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.cac-aqi-label{
  font-size: 12px;
  color: var(--cac-muted);
  margin-top: 2px;
}

.cac-mid{
  padding: 0 14px 12px;
}
.cac-spark{
  margin: 8px 0 10px;
  color: var(--cac-accent);
}
.cac-sparkline{ width:100%; height:auto; display:block; }
.cac-spark-line{ fill:none; stroke: var(--cac-line); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:.95; }
.cac-spark-area{ fill: var(--cac-area); opacity: 1; }

.cac-quick{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 8px;
}
.cac-chip{
  display:flex;
  gap:6px;
  align-items:baseline;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--cac-border);
  background: var(--cac-surface);
}
.cac-chip-k{ font-size: 11px; color: var(--cac-muted); }
.cac-chip-v{ font-size: 13px; font-weight: 800; }
.cac-chip-u{ font-size: 11px; color: var(--cac-muted); }

.cac-mini-meta{
  margin-top: 10px;
  font-size: 12px;
  color: var(--cac-text);
}
.cac-muted{ color: var(--cac-muted); }
.cac-dot{ margin: 0 6px; opacity: .6; }

.cac-toggle{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border: none;
  border-top: 1px solid var(--cac-border);
  background: var(--cac-surface);
  color: var(--cac-text);
  cursor:pointer;
}
.cac-toggle svg{
  width: 22px; height:22px;
  fill: currentColor;
  opacity: .8;
  transition: transform .16s ease;
}
.cac-toggle[aria-expanded="true"] svg{
  transform: rotate(180deg);
}
.cac-details{
  padding: 14px;
  background: var(--cac-surface-2);
  border-top: 1px solid var(--cac-border);
}
.cac-advice{
  padding: 12px;
  border-radius: 14px;
  background: rgba(14,165,233,.09);
  border: 1px solid rgba(14,165,233,.22);
  font-size: 13px;
  line-height: 1.35;
}
.cac-metrics{
  margin-top: 12px;
  display:grid;
  gap:10px;
}
.cac-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--cac-border);
  background: var(--cac-surface);
}
.cac-row-name{ font-weight: 800; font-size: 13px; }
.cac-row-hint{ margin-top: 3px; font-size: 11px; color: var(--cac-muted); }
.cac-row-r{ text-align:right; display:flex; gap:6px; align-items:baseline; }
.cac-row-val{ font-weight: 900; font-size: 14px; }
.cac-row-unit{ font-size: 11px; color: var(--cac-muted); }

.cac-note{
  margin-top: 12px;
  font-size: 11px;
  color: var(--cac-muted);
}

.cac-card-error{ border-color: rgba(239,68,68,.35); }
.cac-error-msg{
  padding: 10px 14px 14px;
  color: #ef4444;
  font-size: 13px;
}

.cac-footnote{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--cac-border);
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:space-between;
  font-size: 12px;
  color: var(--cac-muted);
}
.cac-footnote a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.cac-compact .cac-spark{ display:none; }
.cac-compact .cac-quick{ margin-top: 2px; }
.cac-compact .cac-chip{ padding: 6px 9px; }