/* ==========================================================================
 *  Monnubis · Estilos propios (se cargan DESPUÉS de tailwind.css)
 *  --------------------------------------------------------------------------
 *  Sólo lo que Tailwind no cubre: clases de dominio (colores de aviso, ICA y
 *  polen), tipografía del contenido editorial (Markdown del CMS) y detalles de
 *  impresión. No se redefinen primitivas de maquetación de Tailwind.
 * ========================================================================== */

/* --- Colores de dominio aplicados dinámicamente por el enlazador -------- */
/* Los añade `core.js` con `data-class-from`: la clave del valor se convierte
   en la clase `v-<valor>`. Se enumeran todos los valores posibles para que el
   purgado de Tailwind no los elimine. */

/* Niveles de aviso AEMET */
.v-none                        { background-color: #64748b; color: #fff; }
.v-verde                       { background-color: #3ea34a; color: #fff; }
.v-amarillo                    { background-color: #f5c518; color: #1f2937; }
.v-naranja                     { background-color: #f08a24; color: #1f2937; }
.v-rojo                        { background-color: #d63b2f; color: #fff; }

/* Categorías del índice de calidad del aire (colores oficiales MITECO) */
.v-1, .v-buena                          { background-color: #38a2ce; color: #fff; }
.v-2, .v-razonablemente-buena           { background-color: #32a15e; color: #fff; }
.v-3, .v-regular                        { background-color: #f1e549; color: #1f2937; }
.v-4, .v-desfavorable                   { background-color: #c83441; color: #fff; }
.v-5, .v-muy-desfavorable               { background-color: #6e161d; color: #fff; }
.v-6, .v-extremadamente-desfavorable    { background-color: #a25ba4; color: #fff; }

/* Índice UV */
.v-uv-bajo       { background-color: #63d47f; color: #1f2937; }
.v-uv-moderado   { background-color: #f5c518; color: #1f2937; }
.v-uv-alto       { background-color: #f08a24; color: #1f2937; }
.v-uv-muy-alto   { background-color: #d63b2f; color: #fff; }
.v-uv-extremo    { background-color: #8e3b8e; color: #fff; }

/* Niveles de polen */
.v-bajo        { background-color: #63d47f; color: #1f2937; }
.v-moderado    { background-color: #f5c518; color: #1f2937; }
.v-alto        { background-color: #f08a24; color: #1f2937; }
.v-muy-alto    { background-color: #d63b2f; color: #fff; }

/* Severidad de las alertas propias de la estación */
.v-info        { background-color: #4fb3f7; color: #1f2937; }
.v-aviso       { background-color: #f5c518; color: #1f2937; }
.v-importante  { background-color: #f08a24; color: #1f2937; }
.v-critico     { background-color: #d63b2f; color: #fff; }
.v-sin-dato    { background-color: var(--c-surface-3); color: rgb(var(--c-ink-soft)); }

/* --- Colores de las series de los gráficos (leyenda del motor) ---------- */
.chart-legend-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 9999px; }

/* --- Contenido editorial (Markdown del CMS) ---------------------------- */
/* Las plantillas aplican variantes arbitrarias de Tailwind; esto refuerza el
   resultado para el HTML que llega ya renderizado desde el servidor. */
.prose-monnubis { max-width: 70ch; }
.prose-monnubis h2 { font-size: 1.25rem; font-weight: 700; margin-top: 1.75em; margin-bottom: 0.5em; }
.prose-monnubis h3 { font-size: 1.05rem; font-weight: 700; margin-top: 1.4em; margin-bottom: 0.4em; }
.prose-monnubis p  { margin-bottom: 0.9em; line-height: 1.7; }
.prose-monnubis ul { list-style: disc; margin: 0.75em 0 1em 1.25rem; }
.prose-monnubis ol { list-style: decimal; margin: 0.75em 0 1em 1.5rem; }
.prose-monnubis li { margin-bottom: 0.35em; line-height: 1.65; }
.prose-monnubis a  { color: rgb(var(--c-brand-600)); text-decoration: underline; text-underline-offset: 2px; }
.prose-monnubis strong { font-weight: 700; }
.prose-monnubis blockquote {
  border-left: 3px solid rgb(var(--c-brand-400));
  background-color: rgb(var(--c-brand-50));
  color: rgb(var(--c-brand-900));
  padding: 0.75rem 1rem;
  border-radius: 0 0.5rem 0.5rem 0;
  margin: 1em 0;
}
[data-theme="dark"] .prose-monnubis blockquote {
  background-color: rgb(var(--c-brand-900) / 0.35);
  color: rgb(var(--c-brand-100));
}
.prose-monnubis table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.9em; }
.prose-monnubis th {
  text-align: left; font-weight: 700; padding: 0.5rem 0.6rem;
  border-bottom: 2px solid rgb(var(--c-line)); background-color: rgb(var(--c-surface-3));
}
.prose-monnubis td { padding: 0.45rem 0.6rem; border-bottom: 1px solid rgb(var(--c-line)); }
.prose-monnubis code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
  background-color: rgb(var(--c-surface-3));
  padding: 0.1em 0.35em;
  border-radius: 0.3rem;
}
.prose-monnubis hr { border: 0; border-top: 1px solid rgb(var(--c-line)); margin: 1.75em 0; }

/* --- Radar ------------------------------------------------------------- */
[data-radar] { touch-action: none; cursor: grab; }
[data-radar]:active { cursor: grabbing; }
[data-radar] canvas { display: block; width: 100%; height: 100%; }

/* --- Indicadores de estado -------------------------------------------- */
.is-stale { opacity: 0.65; }
.dot-live { box-shadow: 0 0 0 3px rgb(62 163 74 / 0.18); }

/* --- Impresión: el portal debe poder imprimirse como parte del día ----- */
@media print {
  header, footer, #consent-banner, [data-radar-controls], #toast-area, .no-print { display: none !important; }
  .card { border: 1px solid #ccc !important; box-shadow: none !important; }
  .chart canvas, [data-radar] canvas { max-height: 240px; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; }
}

/* --- Reducción de movimiento ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  [data-radar] { cursor: default; }
  .animate-spin-slow, .animate-pulse-soft { animation: none !important; }
}

/* --- Menú superior: barra plana, sin iconos ----------------------------- */
/* Se descartaron las fichas ovaladas: parecían botones y cargaban la cabecera.
   Se vuelve al patrón sobrio de pestañas —texto, subrayado en la activa y un
   fondo apenas insinuado al pasar el ratón—, que es lo que se espera de una
   barra de secciones. Se ancla en `#main-nav` para ganar en especificidad a las
   clases `.tab` de Tailwind sin depender del orden de las hojas. */
#main-nav .tabs { gap: 0.125rem; padding: 0.25rem 0 0; }
#main-nav .tab {
  border-bottom-width: 2px;
  border-color: transparent;
  border-radius: 0;
  padding: 0.5rem 0.75rem 0.55rem;
  font-weight: 500;
  letter-spacing: 0;
  background-color: transparent;
  color: rgb(var(--c-ink-soft));
}
#main-nav .tab:hover {
  background-color: rgb(var(--c-surface-3) / 0.55);
  border-bottom-color: rgb(var(--c-line));
  color: rgb(var(--c-ink));
}
#main-nav .tab[aria-current='page'] {
  background-color: transparent;
  border-bottom-color: rgb(var(--c-brand-600));
  color: rgb(var(--c-brand-700));
  font-weight: 600;
}
#main-nav .tab:focus-visible {
  outline: 2px solid rgb(var(--c-brand-500));
  outline-offset: -2px;
}