/* =====================================================================
   Monitor Ambiental y Fenómeno El Niño — Nariño
   Estilos MINIMALISTAS del front.

   Filosofía (aclaración del usuario): los shortcodes NO imponen chrome
   propio — sin bordes, sin sombras, sin franjas de color, sin fondo — para
   fundirse con la página anfitriona. Todo se controla con variables CSS
   `--man-*` que el módulo de Apariencia (admin) o los atributos del
   shortcode pueden ajustar. Solo los colores semánticos del clima
   (semáforo, escala del mapa, fase ENSO) son fijos por ser técnicos.

   Paleta institucional (referencia): verde #10A13B · amarillo #FFD500 ·
   azul profundo #003087 · tipografía Hind Madurai.
   ===================================================================== */

/* Contenedor de todo shortcode. Hereda de la página por defecto. */
.man {
  background: var(--man-fondo, transparent);
  color: var(--man-texto, inherit);
  font-family: var(--man-tipografia, inherit);
  border: var(--man-borde, none);
  border-radius: var(--man-borde-radio, 0);
  box-shadow: var(--man-sombra, none);
  max-width: var(--man-ancho-max, 100%);
  padding: var(--man-espaciado, 0);
  box-sizing: border-box;
  line-height: 1.5;
}
.man * { box-sizing: border-box; }

/* Tipografía interna mínima, sin imponer tamaños grandes. */
.man-titulo { font-weight: 600; margin: 0 0 .4em; }
.man-valores { margin: .3em 0; }
.man-analisis { font-size: .95em; margin: .6em 0 0; }
.man-fuentes { font-size: .75em; color: var(--man-mute, #6b7280); margin: .7em 0 0; }

/* Estado de carga (skeleton) discreto, sin caja. */
.man-skeleton { color: var(--man-mute, #6b7280); font-size: .9em; padding: .6em 0; }

/* Estado de error con reintento. */
.man-error { color: #c62828; font-size: .92em; margin: 0 0 .4em; }
.man-error p { margin: 0 0 .4em; }

/* Botón / control. Único elemento con borde sutil (afordancia de control). */
.man-btn {
  display: inline-block;
  cursor: pointer;
  font: inherit;
  font-size: .9em;
  line-height: 1.2;
  padding: .45em .9em;
  border: 1px solid var(--man-borde-color, #d8dbe0);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.man-btn:hover { border-color: var(--man-acento, #10A13B); }
.man-btn--primario {
  background: var(--man-acento, #10A13B);
  border-color: var(--man-acento, #10A13B);
  color: #fff;
}
.man-btn:disabled { opacity: .55; cursor: default; }

/* Chip de nivel / fase (color semántico). */
.man-chip {
  display: inline-block;
  padding: .12em .6em;
  border-radius: 999px;
  color: #fff;
  font-size: .82em;
  font-weight: 600;
}

/* --- [man_estado] --- */
.man-estado__cuerpo { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.man-estado__info { flex: 1 1 220px; min-width: 220px; }
.man-gauge { width: 260px; max-width: 100%; height: auto; display: block; }
.man--compacto .man-estado__cuerpo { gap: 10px; }

/* --- [man_pronostico] --- */
.man-grafico { width: 100%; height: auto; display: block; }

/* --- [man_mapa] --- */
.man-mapa { position: relative; }
.man-mapa__lienzo {
  width: 100%;
  min-height: 420px;
  height: 60vh;
  border-radius: var(--man-borde-radio, 0);
}
.man-mapa__panel { margin-top: 10px; font-size: .95em; }
.man-mapa__panel p { margin: .25em 0; }

/* --- [man_globo] --- */
.man-globo { position: relative; overflow: hidden; border-radius: var(--man-borde-radio, 10px); }
.man-globo__lienzo { width: 100%; height: 95vh; min-height: 380px; }

/* --- Selector de municipio ([man_pronostico_select] / [man_hidrico_select]) --- */
.man-muni-wrap { display: flex; flex-direction: column; gap: .6rem; }
.man-muni-select-label { font-size: .85rem; color: #4a5568; display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.man-muni-select { font: inherit; font-size: .9rem; padding: .4em .7em; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #1a1f2c; cursor: pointer; max-width: 320px; }
.man-muni-select:focus-visible { outline: 2px solid #10A13B; outline-offset: 1px; }

/* --- [man_estaciones] (IDEAM/FEWS) --- */
.man-estaciones__mapa { width: 100%; min-height: 280px; border-radius: var(--man-borde-radio, 8px); overflow: hidden; z-index: 0; }
.man-estaciones__info { margin-top: .8rem; }
.man-estaciones__nombre { font-weight: 700; margin: 0 0 .2rem; }
.man-estaciones__meta { font-size: .82rem; color: #4a5568; margin: 0 0 .3rem; }
.man-estaciones__nivel { font-size: .85rem; margin: 0 0 .4rem; }
.man-estaciones__serie-titulo { font-size: .8rem; color: #4a5568; margin: .4rem 0 .2rem; font-weight: 600; }
.man-estaciones__serie svg { max-width: 100%; height: auto; }

/* --- [man_seccion] párrafo de presentación bajo el título --- */
.man-seccion-intro { max-width: var(--man-ancho-max, 100%); }
.man-seccion-intro__p { margin: 0; line-height: 1.65; color: var(--man-texto, inherit); text-align: justify; }

/* Toolbar flotante semitransparente sobre el globo. */
.man-globo__controles {
  position: absolute; top: 10px; left: 10px; right: 10px; z-index: 4;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.man-globo__btn {
  font: inherit; font-size: 12px; line-height: 1.2; cursor: pointer;
  padding: .4em .7em; border-radius: 8px;
  background: rgba(12, 22, 38, .42); color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background .15s ease, border-color .15s ease;
}
.man-globo__btn:hover { background: rgba(12, 22, 38, .62); border-color: rgba(255, 255, 255, .5); }
.man-globo__btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* Cintillo de datos clave (pie del globo). */
.man-globo__cintillo {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: .45em .8em; border-radius: 8px; font-size: 12.5px; color: #eaf2fb;
  background: rgba(12, 22, 38, .5); border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.man-globo__cintillo strong { color: #fff; }
.man-globo__sep { opacity: .5; }
.man-globo__cintillo-resumen { flex: 1 1 100%; color: #c9d6e6; font-size: 11.5px; }

/* Drawers (¿cómo se genera? / históricos) — panel lateral sobre el globo. */
.man-globo__drawer {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 6;
  width: min(360px, 86%); display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .97); color: #1a1f2c;
  border-left: 1px solid #e2e8f0; box-shadow: -8px 0 24px rgba(15, 23, 42, .22);
}
.man-globo__drawer[hidden] { display: none; }
.man-globo__drawer-cab { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #e5e7eb; }
.man-globo__drawer-x { font-size: 18px; line-height: 1; background: none; border: 0; cursor: pointer; color: #6b7280; }
.man-globo__drawer-cuerpo { padding: 12px 14px; overflow: auto; font-size: 13px; }
.man-globo__mec-intro { color: #50575e; margin: 0 0 .6em; }
.man-globo__pasos { margin: 0; padding-left: 1.2em; }
.man-globo__pasos li { margin: .5em 0; line-height: 1.45; }
.man-globo__paso-tit { color: #003087; }
.man-globo__eps { display: flex; flex-direction: column; gap: 8px; }
.man-globo__ep { display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; font: inherit; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.man-globo__ep:hover { border-color: #10A13B; background: #fafafa; }
.man-globo__ep:focus-visible { outline: 2px solid #10A13B; outline-offset: 2px; }
.man-globo__ep.is-activo { border-color: #10A13B; box-shadow: 0 0 0 2px rgba(16, 161, 59, .22); background: #f5fbf6; }
.man-globo__ep-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.man-globo__ep-periodo { font-size: 13.5px; font-weight: 700; color: #1a1f2c; }
.man-globo__ep-badge { flex-shrink: 0; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px; background: #eef2f7; color: #50575e; }
.man-globo__ep-badge--muy_fuerte { background: #fdecea; color: #c62828; }
.man-globo__ep-badge--fuerte { background: #fff1e6; color: #ef6c00; }
.man-globo__ep-badge--moderado { background: #fff8e1; color: #b8860b; }
.man-globo__ep-badge--debil { background: #e8f5e9; color: #2e7d32; }
.man-globo__ep-meta { font-size: 12px; color: #50575e; }
.man-globo__ep-meta strong { color: #c62828; }
.man-globo__ep-ctx { font-size: 11.5px; line-height: 1.4; color: #50575e; }
.man-globo__ep-narino { font-size: 11.5px; line-height: 1.4; color: #1a1f2c; }
.man-globo__ep-narino em { font-style: normal; font-weight: 700; color: #003087; }
.man-globo__ep-cta { font-size: 11px; font-weight: 700; color: #10A13B; margin-top: 2px; }
.man-globo__ep-fuente { margin: 8px 0 0; font-size: 10.5px; color: #90969f; }

@media (prefers-reduced-motion: reduce) { .man-globo__btn { transition: none; } }

/* --- [man_timeline] (barra estilo mockup) --- */
.man-timeline--barra {
  background: #fff; color: #1a1f2c;
  border: 1px solid #e5e7eb; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 31, 44, .05), 0 4px 12px rgba(16, 31, 44, .04);
  padding: .65rem 1rem .75rem;
  display: flex; flex-direction: column; gap: .6rem;
}
/* Fila superior: leyenda (izquierda) · título + chip · controles (derecha). */
.man-timeline__barra-top { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem; }
.man-timeline__identidad { display: flex; align-items: center; gap: .6rem; min-width: 0; flex-wrap: wrap; }
.man-timeline__logo { height: 34px; width: auto; max-width: 200px; display: block; object-fit: contain; }
.man-timeline__separador { width: 1px; height: 24px; background: #e5e7eb; }
.man-timeline__titulo { font-weight: 600; font-size: .95rem; color: #1a1f2c; white-space: nowrap; }
.man-timeline__estado-chip { display: inline-block; padding: .28rem .7rem; border-radius: 999px; font-weight: 600; font-size: .72rem; background: #FFD500; color: #1a1f2c; }
.man-timeline__controles { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: flex-end; }
/* Botones minimalistas: planos, sin borde ni círculo; el play es el único acento. */
.man-timeline__btn {
  min-width: 30px; height: 30px; border-radius: 6px; padding: 0 .25rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; line-height: 1;
  border: none; background: transparent; color: #4a5568;
  transition: background .15s, color .15s, transform .1s;
}
.man-timeline__btn:hover { background: rgba(16, 161, 59, .1); color: #10A13B; }
.man-timeline__btn:active { transform: translateY(1px); }
.man-timeline__btn:focus-visible { outline: 2px solid #10A13B; outline-offset: 2px; }
.man-timeline__btn--play { width: 32px; height: 32px; border-radius: 50%; background: #10A13B; color: #fff; font-size: .8rem; }
.man-timeline__btn--play:hover { background: #0a7d2c; color: #fff; }
.man-timeline__velocidad { display: inline-flex; align-items: center; gap: .4em; font-size: .8rem; color: #4a5568; }
.man-timeline__velocidad select { font: inherit; font-size: .82rem; padding: .3em .55em; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #1a1f2c; cursor: pointer; }
.man-timeline__capas { position: relative; font-size: .8rem; }
.man-timeline__capas-summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .7rem; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #1a1f2c; }
.man-timeline__capas-summary::-webkit-details-marker { display: none; }
.man-timeline__capas-summary:hover { border-color: #10A13B; }
.man-timeline__capas[open] .man-timeline__capas-summary { border-color: #10A13B; color: #10A13B; }
.man-timeline__capas-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 240px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 6px 18px rgba(16, 31, 44, .15); padding: .5rem; display: flex; flex-direction: column; gap: .2rem; }
.man-timeline__capas-opcion { display: flex; align-items: flex-start; gap: .5rem; padding: .35rem .45rem; border-radius: 6px; cursor: pointer; font-size: .78rem; color: #1a1f2c; }
.man-timeline__capas-opcion:hover { background: #fafafa; }
.man-timeline__capas-opcion input { margin: 0; margin-top: .15rem; accent-color: #10A13B; cursor: pointer; }
.man-timeline__capas-opcion em { font-style: normal; color: #4a5568; font-size: .72rem; }
.man-timeline__slider { position: relative; padding: 0 .4rem; }
.man-timeline__divisor { position: absolute; top: 0; bottom: 26px; width: 0; border-left: 1px dashed #ef6c00; z-index: 3; pointer-events: none; }
.man-timeline__divisor::after { content: 'observado / proyectado'; position: absolute; top: -11px; transform: translateX(-50%); background: #fff; font-size: .6rem; color: #ef6c00; padding: 0 .35rem; border-radius: 999px; border: 1px solid #ef6c00; white-space: nowrap; font-weight: 600; }
/* Franja "mapa de calor": el JS pinta el degradado real del ONI mes a mes. */
.man-timeline__heat { position: absolute; left: .4rem; right: .4rem; top: 8px; height: 8px; border-radius: 4px; z-index: 1; pointer-events: none; background: #e5e7eb; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.man-timeline__rango { position: relative; z-index: 2; width: 100%; height: 24px; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background: transparent; }
/* Track transparente: deja ver la franja heatmap (dato real) por debajo. */
.man-timeline__rango::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: transparent; }
.man-timeline__rango::-moz-range-track { height: 8px; border-radius: 4px; background: transparent; }
.man-timeline__rango::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; margin-top: -6px; background: #fff; border: 3px solid #10A13B; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); cursor: pointer; }
.man-timeline__rango::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #10A13B; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); cursor: pointer; }
.man-timeline__marcas { list-style: none; margin: .25rem 0 0; padding: 0 .4rem; display: grid; gap: 1px; }
.man-timeline__marca { font-size: .66rem; text-align: center; color: #4a5568; padding: 2px 0; cursor: pointer; white-space: nowrap; overflow: hidden; transition: color .15s ease; }
.man-timeline__marca.es-proy { font-style: italic; color: #ef6c00; }
.man-timeline__marca:hover { color: #10A13B; }
.man-timeline__marca:focus-visible { outline: 2px solid #10A13B; outline-offset: 1px; border-radius: 3px; }
.man-timeline__marca.activo { font-weight: 700; color: #10A13B; }
.man-timeline__leyenda { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; margin: 0; padding: 0; font-size: .74rem; color: #4a5568; flex-shrink: 0; }
.man-timeline__heat-leyenda { display: inline-block; width: 38px; height: 8px; border-radius: 4px; vertical-align: middle; margin-right: .35rem; background: linear-gradient(to right, #1d4ed8, #5aa9e6, #eef3e8, #f59e0b, #b91c1c); }
.man-timeline__leyenda-item { display: inline-flex; align-items: center; gap: .35rem; }
.man-timeline__pip { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.man-timeline__pip--obs { background: #2e7d32; }
.man-timeline__pip--proy { background: #fff; border: 1.5px dashed #ef6c00; }

/* Responsive: a ≤640px la barra se apila (sin scroll horizontal). */
@media (max-width: 640px) {
  .man-timeline__barra-top { gap: .5rem .7rem; }
  .man-timeline__controles { margin-left: 0; width: 100%; justify-content: flex-start; }
  .man-timeline__velocidad { margin-left: auto; }
  .man-filtro { width: 100%; }
  .man-filtro__select { max-width: 100%; }
}
.man, .man-g, .man-filtro, .man-panel, .man-timeline { max-width: 100%; }
.man-g__chart svg, .man-estadisticas__lienzo svg, .man-grafico { max-width: 100%; }

/* Tooltip de municipio sobre el globo. */
.man-globo__tip {
  position: absolute; z-index: 20; pointer-events: none;
  min-width: 150px; max-width: 240px;
  background: #fff; color: #1a1f2c; border: 1px solid #e2e8f0; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(15,23,42,.18); padding: 8px 10px; font-size: 12px;
  transform: translate(-50%, calc(-100% - 12px));
}
.man-globo__tip strong { display: block; margin-bottom: 3px; font-size: 13px; }
.man-globo__tip .tt-nivel { display: inline-block; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-bottom: 3px; }
.man-globo__tip .tt-linea { display: block; color: #50575e; line-height: 1.45; }
.man-globo__tip .tt-linea b { color: #1a1f2c; }
.man-globo__tip .tt-pico { color: #b45309; margin-top: 2px; }
.man-globo__tip .tt-hist { color: #6b7280; }
.man-globo__tip .tt-meta { display: block; margin-top: 4px; font-size: 10px; color: #9aa0aa; }

/* --- [man_filtro] / [man_panel] (composables) --- */
.man-filtro { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.man-filtro__label { display: inline-flex; align-items: center; gap: .4em; font-size: .85em; color: var(--man-mute, #6b7280); }
.man-filtro__select {
  font: inherit; font-size: .9em; padding: .3em .6em;
  border: 1px solid var(--man-borde-color, #d8dbe0); border-radius: 6px;
  background: transparent; color: inherit; cursor: pointer;
}
.man-filtro__mes { font-weight: 600; color: var(--man-texto, inherit); }
.man-filtro__pista { width: 100%; min-width: 160px; position: relative; padding-top: .2em; }
.man-panel__cuerpo .man-titulo { font-size: 1.05em; }
.man-panel__dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: .6em 0 0; font-size: .9em; }
.man-panel__dl dt { color: var(--man-mute, #6b7280); }
.man-panel__dl dd { margin: 0; }

/* --- [man_pronostico] tooltip por día --- */
.man-pronostico__cuerpo { position: relative; }
.man-pronostico__tip {
  position: absolute; z-index: 15; pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
  background: #fff; color: #1a1f2c; border: 1px solid #e2e8f0; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .16); padding: 6px 9px; font-size: 12px; white-space: nowrap;
}
.man-pronostico__tip strong { display: block; margin-bottom: 2px; }
.man-pronostico__tip span { display: block; color: #50575e; }

/* --- [man_datos] --- */
.man-datos__titulo { font-weight: 600; margin: 0 0 .5em; }
.man-datos__acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.man-datos__licencia { font-size: .75em; color: var(--man-mute, #6b7280); margin: .7em 0 0; }

/* --- [man_historico] --- */
.man-cards { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.man-card-item { flex: 1 1 220px; min-width: 200px; }
.man-card-item .man-titulo { margin-bottom: .2em; }
.man-mute-line { font-size: .85em; color: var(--man-mute, #6b7280); margin: .3em 0 0; }

/* --- [man_mar] / [man_hidrico] --- */
.man-mar__cuerpo .man-grafico,
.man-hidrico__cuerpo .man-grafico { margin: .4em 0; }
.man-mar__nivel { font-size: .9em; font-weight: 600; color: var(--man-texto, #1a1f2c); margin: .2em 0 .1em; }

/* --- [man_estado_api] tabla --- */
.man-tabla { width: 100%; border-collapse: collapse; font-size: .92em; }
.man-tabla th, .man-tabla td { text-align: left; padding: .4em .6em; border-bottom: 1px solid var(--man-borde-color, #e5e7eb); }
.man-tabla th { font-weight: 600; color: var(--man-mute, #6b7280); font-size: .85em; }
.man-pip { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* --- [man_prediccion] --- */
.man-prediccion__chips { display: flex; gap: 14px; flex-wrap: wrap; margin: .2em 0 .8em; }
.man-prediccion__chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 1 auto;
}
.man-prediccion__chip-rotulo { font-size: .72em; color: var(--man-mute, #6b7280); text-transform: uppercase; letter-spacing: .03em; }
.man-prediccion__chip strong { font-size: 1.15em; }
.man-prediccion__chip .man-chip { align-self: flex-start; margin-top: 2px; }
.man-prediccion__grafico { width: 100%; height: auto; display: block; margin: .2em 0 .4em; }

.man-prediccion__prob { margin: .8em 0 .2em; }
.man-prediccion__prob-titulo { font-size: .82em; font-weight: 600; color: var(--man-mute, #6b7280); margin: 0 0 .4em; }
.man-prediccion__prob-fila { display: flex; align-items: center; gap: 10px; margin: .25em 0; font-size: .85em; }
.man-prediccion__prob-rotulo { flex: 0 0 84px; color: var(--man-mute, #6b7280); }
.man-prediccion__barra {
  flex: 1 1 auto;
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  min-width: 120px;
  background: var(--man-borde-color, #eef0f3);
}
.man-prediccion__barra-seg { height: 100%; }
.man-prediccion__prob-dom { flex: 0 0 auto; font-size: .82em; }

/* Ficha técnica de la predicción (metodología para investigadores). */
.man-prediccion__ficha { margin: .7em 0 0; font-size: .85em; }
.man-prediccion__ficha > summary { cursor: pointer; font-weight: 600; color: var(--man-mute, #6b7280); }
.man-prediccion__ficha-cuerpo { margin-top: .5em; color: var(--man-mute, #6b7280); }
.man-prediccion__ficha-cuerpo p { margin: .3em 0; line-height: 1.45; }
.man-prediccion__ficha-cuerpo strong { color: var(--man-texto, #1a1f2c); }
.man-prediccion__ficha-h { font-weight: 600; margin-top: .5em !important; }
.man-prediccion__ficha-cuerpo ul { margin: .2em 0 .5em 1.1em; padding: 0; }
.man-prediccion__ficha-cuerpo li { margin: .15em 0; }
.man-prediccion__ficha-nat { font-style: italic; }

/* --- [man_estadisticas] (D3plus) --- */
.man-estadisticas__lienzo { width: 100%; }
.man-estadisticas__lienzo svg { max-width: 100%; height: auto; }
.man-estadisticas__titulo { margin-bottom: .4em; }

/* --- [man_animacion] (Anime.js) --- */
.man-animacion__escena { width: 100%; }
.man-animacion__svg { width: 100%; height: auto; display: block; border-radius: var(--man-borde-radio, 8px); }
.man-animacion__svg .ani-warm,
.man-animacion__svg .ani-cold,
.man-animacion__svg .ani-winds,
.man-animacion__svg .ani-conv { transform-box: fill-box; }
.man-animacion__controles { display: flex; gap: 8px; flex-wrap: wrap; margin: .6em 0 .2em; }
.man-animacion__narracion { min-height: 2.4em; }

/* Accesibilidad: contenido solo para lectores de pantalla (no visible). */
.man-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Tooltips: nunca exceden el ancho del viewport (móvil). */
.man-globo__tip, .man-pronostico__tip { max-width: min(240px, 86vw); }

/* Móviles muy estrechos (≤400px): evita el solape de las marcas de mes
   mostrando una de cada dos (la activa siempre se ve). El globo conserva su
   altura por requisito de diseño. */
@media (max-width: 400px) {
  .man-timeline__marca { font-size: .62rem; }
  .man-timeline__marca:not(.activo):nth-child(even) { visibility: hidden; }
  .man-pronostico__tip { white-space: normal; }
}

/* Accesibilidad: respeta reduced motion (el globo ya limita su carga). */
@media (prefers-reduced-motion: reduce) {
  .man-btn { transition: none; }
  .man-timeline__heat { transition: none; }
}