/*
================================================================================
Sistema: Ecovía Comechingones (Smart City & Tourism)
Creador y Desarrollador: Silvio Deandrea
Copyright: © 2026 Silvio Deandrea. Todos los derechos reservados.
Licencia: Propiedad Privada - Producto Protegido por Derechos de Autor.
================================================================================
F81 — Design System Premium · COMPONENTES.

Cada componente de este archivo tiene su trazabilidad a `actualizar/1.png` en
docs/ACTUALIZAR_UI_PREMIUM_REFERENCIAS.md §4. Reglas del canon:
  · un solo color de acción fuerte por pantalla (naranja), el resto neutro;
  · radios grandes (10/16/24/32), sombras difusas y bajas;
  · filtros como TARJETAS, no como chips grises;
  · display serif para títulos y números; sans para el resto;
  · tabular-nums en KPIs, montos y relojes.
Depende de `ecovia-tokens.css`. No pisa clases existentes del repo.
*/

/* ========================================================================== */
/* 1. Botones, inputs y controles                                              */
/* ========================================================================== */

.eco-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--eco-s2);
  padding: 10px var(--eco-s4);
  border: 1px solid transparent;
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface);
  color: var(--eco-ink);
  font: inherit;
  font-size: var(--eco-fs-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--eco-t) var(--eco-ease),
              border-color var(--eco-t) var(--eco-ease),
              transform var(--eco-t-fast) var(--eco-ease),
              box-shadow var(--eco-t) var(--eco-ease);
}
.eco-btn:focus-visible { outline: 2px solid var(--eco-teal-2); outline-offset: 2px; }
.eco-btn:active { transform: translateY(1px); }
.eco-btn[disabled], .eco-btn[aria-disabled='true'] {
  opacity: .55; cursor: not-allowed; transform: none;
}

/* El único acento fuerte de la pantalla. */
.eco-btn--primary { background: var(--eco-orange); color: #fff; box-shadow: var(--eco-shadow-sm); }
.eco-btn--primary:hover { background: var(--eco-orange-2); }
.eco-btn--teal { background: var(--eco-teal); color: #fff; }
.eco-btn--teal:hover { background: var(--eco-teal-2); }
.eco-btn--danger { background: var(--eco-red-2); color: #fff; }
.eco-btn--outline { border-color: var(--eco-border-strong); background: var(--eco-surface); }
.eco-btn--outline:hover { background: var(--eco-surface-soft); }
.eco-btn--ghost { background: transparent; color: var(--eco-muted); }
.eco-btn--ghost:hover { background: rgba(15, 23, 42, .05); color: var(--eco-ink); }
.eco-btn--pill { border-radius: var(--eco-radius-pill); }
.eco-btn--sm { padding: 6px var(--eco-s3); font-size: var(--eco-fs-sm); }
.eco-btn--lg { padding: 14px var(--eco-s5); font-size: var(--eco-fs-md); }
.eco-btn--block { width: 100%; }

.eco-input,
.eco-select,
.eco-textarea {
  width: 100%;
  padding: 10px var(--eco-s3);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface);
  color: var(--eco-ink);
  font: inherit;
  font-size: var(--eco-fs-base);
  transition: border-color var(--eco-t) var(--eco-ease), box-shadow var(--eco-t) var(--eco-ease);
}
.eco-input:focus,
.eco-select:focus,
.eco-textarea:focus {
  outline: none;
  border-color: var(--eco-teal-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--eco-teal-2) 22%, transparent);
}
.eco-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--eco-fs-sm);
  font-weight: 600;
  color: var(--eco-ink-2);
}
.eco-hint { font-size: var(--eco-fs-xs); color: var(--eco-muted); }

/* SearchBoxPremium — lupa a izquierda (y opcional a derecha, como el canon). */
.eco-search { position: relative; flex: 1 1 260px; min-width: 0; }
.eco-search__icon {
  position: absolute;
  top: 50%; left: var(--eco-s3);
  transform: translateY(-50%);
  color: var(--eco-muted-2);
  pointer-events: none;
  display: flex;
}
.eco-search__input {
  width: 100%;
  padding: 11px var(--eco-s6) 11px calc(var(--eco-s6) + 4px);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-pill);
  background: var(--eco-surface);
  font: inherit;
  font-size: var(--eco-fs-base);
  color: var(--eco-ink);
}
.eco-search__input:focus {
  outline: none;
  border-color: var(--eco-teal-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--eco-teal-2) 20%, transparent);
}
.eco-search__go {
  position: absolute;
  top: 50%; right: 6px;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 0;
  border-radius: var(--eco-radius-pill);
  background: transparent;
  color: var(--eco-teal);
  cursor: pointer;
}
.eco-search__go:hover { background: var(--eco-surface-soft); }

/* LanguageSwitcher — segmento con píldora rellena para el activo. */
.eco-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-pill);
  background: var(--eco-surface);
}
.eco-lang__btn {
  padding: 6px var(--eco-s4);
  border: 0;
  border-radius: var(--eco-radius-pill);
  background: transparent;
  color: var(--eco-muted);
  font: inherit;
  font-size: var(--eco-fs-sm);
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background var(--eco-t) var(--eco-ease), color var(--eco-t) var(--eco-ease);
}
.eco-lang__btn:hover { color: var(--eco-ink); }
.eco-lang__btn[aria-pressed='true'],
.eco-lang__btn.is-active { background: var(--eco-teal); color: #fff; }

/* ========================================================================== */
/* 2. Superficies: Card / ChartCard / secciones                                */
/* ========================================================================== */

.eco-card {
  position: relative;
  padding: var(--eco-s4);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface);
  box-shadow: var(--eco-shadow-sm);
}
.eco-card--flat { box-shadow: none; }
.eco-card--pad-lg { padding: var(--eco-s5); }
.eco-card--soft { background: var(--eco-surface-soft); }

/* Card oscura de contexto (el "Clima actual" del canon). */
.eco-card--teal {
  border-color: transparent;
  background: linear-gradient(160deg, #0e6b62 0%, #0a4f4a 100%);
  color: #fff;
}
.eco-card--teal .eco-card__title { color: #fff; }
.eco-card--navy {
  border-color: transparent;
  background: linear-gradient(160deg, var(--eco-navy-2) 0%, var(--eco-navy) 100%);
  color: #fff;
}

.eco-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eco-s3);
  margin-bottom: var(--eco-s3);
}
.eco-card__title {
  margin: 0;
  font-size: var(--eco-fs-md);
  font-weight: 700;
  color: var(--eco-ink);
  line-height: 1.2;
}
.eco-card__sub { margin: 2px 0 0; font-size: var(--eco-fs-sm); color: var(--eco-muted); }
.eco-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--eco-fs-sm);
  font-weight: 600;
  color: var(--eco-muted);
  text-decoration: none;
  white-space: nowrap;
}
.eco-card__link:hover { color: var(--eco-teal); }
.eco-card--teal .eco-card__link,
.eco-card--navy .eco-card__link { color: rgba(255, 255, 255, .8); }
.eco-card--teal .eco-card__link:hover,
.eco-card--navy .eco-card__link:hover { color: #fff; }
/* Sobre superficie oscura el título heredaba `--eco-ink` y quedaba ilegible
   (defecto detectado en Emergencias: la tarjeta "Botón SOS" no se leía). */
.eco-card--teal .eco-card__title,
.eco-card--navy .eco-card__title { color: #fff; }
.eco-card--teal .eco-card__sub,
.eco-card--navy .eco-card__sub { color: rgba(255, 255, 255, .76); }
.eco-card__foot {
  margin-top: var(--eco-s3);
  padding-top: var(--eco-s3);
  border-top: 1px solid var(--eco-border);
}
.eco-card--teal .eco-card__foot,
.eco-card--navy .eco-card__foot { border-top-color: rgba(255, 255, 255, .16); }

/* ChartCardPremium — el gráfico va en SVG propio, sin librerías (costo cero). */
.eco-chartcard__canvas {
  width: 100%;
  height: 220px;
  display: block;
  overflow: visible;
}
.eco-chartcard__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eco-s3);
  margin-top: var(--eco-s3);
  font-size: var(--eco-fs-xs);
  color: var(--eco-muted);
}
.eco-chartcard__legend i {
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 6px;
  border-radius: 3px;
  background: currentColor;
  vertical-align: -1px;
}

/* ========================================================================== */
/* 3. FilterCards — el reemplazo de los chips planos                           */
/* ========================================================================== */

.eco-filtercards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--eco-s3);
  padding: 0 var(--eco-s6) var(--eco-s4);
}
.eco-filtercard {
  display: flex;
  align-items: center;
  gap: var(--eco-s2);
  padding: var(--eco-s3);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface);
  box-shadow: var(--eco-shadow-sm);
  color: var(--eco-ink);
  text-align: left;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  transition: transform var(--eco-t) var(--eco-ease),
              box-shadow var(--eco-t) var(--eco-ease),
              border-color var(--eco-t) var(--eco-ease);
}
.eco-filtercard:hover { transform: translateY(-2px); box-shadow: var(--eco-shadow-md); }
.eco-filtercard:focus-visible { outline: 2px solid var(--eco-teal-2); outline-offset: 2px; }
.eco-filtercard[aria-pressed='true'],
.eco-filtercard.is-active {
  border-color: color-mix(in srgb, var(--eco-fc, var(--eco-teal)) 55%, transparent);
  box-shadow: var(--eco-shadow-md);
}
.eco-filtercard__icon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--eco-radius-sm);
  background: var(--eco-fc, var(--eco-teal));
  color: #fff;
}
.eco-filtercard__body { min-width: 0; }
.eco-filtercard__title {
  display: block;
  font-size: var(--eco-fs-sm);
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: break-word;
}
.eco-filtercard__state { display: block; font-size: var(--eco-fs-xs); color: var(--eco-muted); }

/* Paletas por categoría (canon del mapa vivo). */
.eco-fc--teal   { --eco-fc: var(--eco-teal); }
.eco-fc--orange { --eco-fc: var(--eco-orange); }
.eco-fc--blue   { --eco-fc: var(--eco-blue); }
.eco-fc--purple { --eco-fc: var(--eco-purple); }
.eco-fc--pink   { --eco-fc: var(--eco-pink); }
.eco-fc--aqua   { --eco-fc: var(--eco-aqua); }
.eco-fc--gold   { --eco-fc: var(--eco-gold); }
.eco-fc--green  { --eco-fc: var(--eco-green); }
.eco-fc--red    { --eco-fc: var(--eco-red-2); }
.eco-fc--navy   { --eco-fc: var(--eco-navy-2); }

/* ========================================================================== */
/* 4. FilterBarPremium                                                         */
/* ========================================================================== */

.eco-filterbar {
  display: flex;
  align-items: center;
  gap: var(--eco-s3);
  flex-wrap: wrap;
  padding: 0 var(--eco-s6) var(--eco-s4);
}
.eco-filterbar__group {
  display: flex;
  align-items: center;
  gap: var(--eco-s2);
  flex-wrap: wrap;
}
.eco-filterbar__label {
  font-size: var(--eco-fs-sm);
  font-weight: 600;
  color: var(--eco-muted);
  white-space: nowrap;
}
.eco-filterbar .eco-select {
  width: auto;
  min-width: 150px;
  border-radius: var(--eco-radius-md);
}

/* ========================================================================== */
/* 5. KPIs                                                                     */
/* ========================================================================== */

.eco-kpigrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--eco-s3);
}
.eco-kpi {
  display: block;
  padding: var(--eco-s4);
  border: 1px solid var(--eco-border);
  border-left: 4px solid var(--eco-kpi-accent, var(--eco-teal));
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface);
  box-shadow: var(--eco-shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform var(--eco-t) var(--eco-ease), box-shadow var(--eco-t) var(--eco-ease);
}
a.eco-kpi:hover { transform: translateY(-2px); box-shadow: var(--eco-shadow-md); }
a.eco-kpi:focus-visible { outline: 2px solid var(--eco-teal-2); outline-offset: 2px; }
.eco-kpi__label {
  font-size: var(--eco-fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--eco-muted);
}
.eco-kpi__valor {
  margin-top: 6px;
  font-family: var(--eco-font-display);
  font-size: var(--eco-fs-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--eco-ink);
  font-variant-numeric: tabular-nums;
}
.eco-kpi__valor small { font-size: var(--eco-fs-md); font-weight: 600; color: var(--eco-muted); }
.eco-kpi__foot {
  margin-top: var(--eco-s2);
  display: flex;
  align-items: center;
  gap: var(--eco-s2);
  font-size: var(--eco-fs-xs);
  color: var(--eco-muted);
}
.eco-kpi--ok     { --eco-kpi-accent: var(--eco-ok); }
.eco-kpi--warn   { --eco-kpi-accent: var(--eco-warn); }
.eco-kpi--danger { --eco-kpi-accent: var(--eco-danger); }
.eco-kpi--info   { --eco-kpi-accent: var(--eco-info); }
.eco-kpi--neutral{ --eco-kpi-accent: var(--eco-muted-2); }

/* KPI de proyector (Panel del Intendente / TV): ≥40px. */
.eco-kpi--xl .eco-kpi__valor { font-size: var(--eco-fs-3xl); }

/* MetricTrend — delta % vs período anterior (dato del backend, nunca inventado). */
.eco-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--eco-radius-pill);
  font-size: var(--eco-fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--eco-neutral-bg);
  color: var(--eco-neutral-fg);
}
.eco-trend--up   { background: var(--eco-ok-bg);     color: var(--eco-ok-fg); }
.eco-trend--down { background: var(--eco-danger-bg); color: var(--eco-danger-fg); }
.eco-trend--flat { background: var(--eco-neutral-bg); color: var(--eco-neutral-fg); }

/* ========================================================================== */
/* 6. StatusPill / PriorityBadge / SlaBadge                                    */
/* ========================================================================== */

.eco-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--eco-radius-pill);
  font-size: var(--eco-fs-xs);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--eco-neutral-bg);
  color: var(--eco-neutral-fg);
}
.eco-pill--ok      { background: var(--eco-ok-bg);      color: var(--eco-ok-fg); }
.eco-pill--warn    { background: var(--eco-warn-bg);    color: var(--eco-warn-fg); }
.eco-pill--danger  { background: var(--eco-danger-bg);  color: var(--eco-danger-fg); }
.eco-pill--info    { background: var(--eco-info-bg);    color: var(--eco-info-fg); }
.eco-pill--pending { background: var(--eco-pend-bg);    color: var(--eco-pend-fg); }
.eco-pill--neutral { background: var(--eco-neutral-bg); color: var(--eco-neutral-fg); }
.eco-pill__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
/* Estado crítico: color + texto + pulso (nunca solo color — regla a11y). */
.eco-pill--pulse .eco-pill__dot { animation: eco-pulse 1.6s var(--eco-ease) infinite; }
@keyframes eco-pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .35; transform: scale(1.35); }
}

.eco-sla {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 92px;
}
.eco-sla__label {
  display: flex;
  justify-content: space-between;
  gap: var(--eco-s2);
  font-size: var(--eco-fs-xs);
  font-weight: 700;
  color: var(--eco-muted);
  font-variant-numeric: tabular-nums;
}
.eco-sla__bar {
  /* `display:block` explícito: el componente se arma con <span> y, fuera de un
     contenedor flex, un span inline ignora alto y ancho (la barra quedaba en 0). */
  display: block;
  height: 6px;
  border-radius: var(--eco-radius-pill);
  background: var(--eco-neutral-bg);
  overflow: hidden;
}
.eco-sla__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--eco-ok);
  transition: width var(--eco-t-slow) var(--eco-ease);
}
.eco-sla--warn   .eco-sla__fill { background: var(--eco-warn); }
.eco-sla--danger .eco-sla__fill { background: var(--eco-danger); }
.eco-sla--danger .eco-sla__label { color: var(--eco-danger-fg); }

/* ========================================================================== */
/* 7. MapCardPremium + leyenda flotante                                        */
/* ========================================================================== */

.eco-mapcard {
  position: relative;
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface);
  box-shadow: var(--eco-shadow-sm);
  overflow: hidden;
}
.eco-mapcard__map {
  width: 100%;
  height: clamp(360px, 56vh, 620px);
  background: var(--eco-surface-soft);
}
.eco-mapcard--tall .eco-mapcard__map { height: clamp(420px, 66vh, 760px); }

/* Controles en cápsula blanca flotante (arriba a la izquierda, como el canon). */
.eco-mapctl {
  position: absolute;
  top: var(--eco-s3);
  left: var(--eco-s3);
  z-index: 400;                      /* por encima de los panes de Leaflet */
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eco-mapctl__group {
  display: flex;
  flex-direction: column;
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface);
  box-shadow: var(--eco-shadow-md);
  overflow: hidden;
}
.eco-mapctl__btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0;
  background: transparent;
  color: var(--eco-ink-2);
  font-size: var(--eco-fs-md);
  cursor: pointer;
}
.eco-mapctl__btn + .eco-mapctl__btn { border-top: 1px solid var(--eco-border); }
.eco-mapctl__btn:hover { background: var(--eco-surface-soft); }

/* Leyenda flotante: encima del mapa, abajo a la izquierda. */
.eco-legend {
  position: absolute;
  left: var(--eco-s4);
  bottom: var(--eco-s4);
  z-index: 400;
  display: flex;
  align-items: center;
  gap: var(--eco-s3);
  flex-wrap: wrap;
  max-width: calc(100% - 178px);   /* deja libre el botón "Ver leyenda" */
  padding: 8px var(--eco-s4);
  border-radius: var(--eco-radius-pill);
  background: color-mix(in srgb, var(--eco-surface) 94%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: var(--eco-shadow-md);
}
.eco-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--eco-fs-xs);
  font-weight: 600;
  color: var(--eco-ink-2);
  white-space: nowrap;
}
.eco-legend__dot {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--eco-fc, var(--eco-teal));
  color: #fff;
}
.eco-legend--hidden { display: none; }
.eco-mapcard__cta {
  position: absolute;
  right: var(--eco-s4);
  bottom: var(--eco-s4);
  z-index: 400;
  box-shadow: var(--eco-shadow-md);
}

/* ========================================================================== */
/* 8. Riel: clima, "qué hacer hoy", agenda                                     */
/* ========================================================================== */

.eco-weather { display: flex; align-items: center; gap: var(--eco-s4); }
.eco-weather__icon { flex: 0 0 auto; font-size: 44px; line-height: 1; }
.eco-weather__temp {
  font-family: var(--eco-font-display);
  font-size: var(--eco-fs-3xl);
  font-weight: 700;
  line-height: .95;
  font-variant-numeric: tabular-nums;
}
.eco-weather__temp sup { font-size: var(--eco-fs-lg); vertical-align: super; }
.eco-weather__desc { margin-top: 2px; font-size: var(--eco-fs-base); opacity: .88; }
.eco-weather__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--eco-s2);
}
.eco-weather__metric { min-width: 0; }
.eco-weather__metric b {
  display: block;
  font-size: var(--eco-fs-xs);
  font-weight: 600;
  opacity: .72;
}
.eco-weather__metric span {
  font-size: var(--eco-fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.eco-weather__metric + .eco-weather__metric {
  padding-left: var(--eco-s2);
  border-left: 1px solid rgba(255, 255, 255, .18);
}

/* Feature card: foto hero + chip + título + bajada + bookmark + dots. */
.eco-feature { padding: 0; overflow: hidden; }
.eco-feature__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--eco-surface-soft);
  overflow: hidden;
}
.eco-feature__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.eco-feature__chip {
  position: absolute;
  left: var(--eco-s3);
  bottom: var(--eco-s3);
  padding: 3px 9px;
  border-radius: var(--eco-radius-sm);
  background: color-mix(in srgb, var(--eco-surface) 92%, transparent);
  font-size: var(--eco-fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--eco-teal);
}
.eco-feature__body { padding: var(--eco-s3) var(--eco-s4) var(--eco-s4); }
.eco-feature__title {
  margin: 0;
  font-size: var(--eco-fs-md);
  font-weight: 700;
  line-height: 1.2;
  color: var(--eco-ink);
}
.eco-feature__sub { margin: 4px 0 0; font-size: var(--eco-fs-sm); color: var(--eco-muted); }
.eco-bookmark {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 0;
  border-radius: var(--eco-radius-sm);
  background: transparent;
  color: var(--eco-muted);
  cursor: pointer;
}
.eco-bookmark:hover { background: var(--eco-surface-soft); color: var(--eco-teal); }
.eco-bookmark[aria-pressed='true'] { color: var(--eco-teal); }

.eco-dots { display: flex; justify-content: center; gap: 6px; padding-bottom: var(--eco-s3); }
.eco-dots__dot {
  width: 7px; height: 7px;
  border: 0;
  border-radius: 50%;
  background: var(--eco-border-strong);
  padding: 0;
  cursor: pointer;
}
.eco-dots__dot[aria-current='true'] { background: var(--eco-teal); width: 18px; border-radius: 4px; }

/* AgendaListPremium — bloque de fecha + contenido + acción. */
.eco-agenda { display: flex; flex-direction: column; }
.eco-agenda__item {
  display: flex;
  align-items: center;
  gap: var(--eco-s3);
  padding: var(--eco-s3) 0;
  color: inherit;
  text-decoration: none;
}
.eco-agenda__item + .eco-agenda__item { border-top: 1px solid var(--eco-border); }
.eco-datechip {
  flex: 0 0 auto;
  width: 46px;
  text-align: center;
  line-height: 1.05;
}
.eco-datechip__dow {
  display: block;
  font-size: var(--eco-fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--eco-rose);
}
.eco-datechip__day {
  display: block;
  font-family: var(--eco-font-display);
  font-size: var(--eco-fs-lg);
  font-weight: 700;
  color: var(--eco-ink);
  font-variant-numeric: tabular-nums;
}
.eco-datechip__mon {
  display: block;
  font-size: var(--eco-fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--eco-muted);
}
.eco-agenda__body { flex: 1 1 auto; min-width: 0; }
.eco-agenda__title {
  display: block;
  font-size: var(--eco-fs-sm);
  font-weight: 700;
  color: var(--eco-ink);
  line-height: 1.25;
}
.eco-agenda__meta { display: block; font-size: var(--eco-fs-xs); color: var(--eco-muted); }
.eco-agenda__icon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--eco-radius-sm);
  background: var(--eco-surface-soft);
  color: var(--eco-teal);
}

/* ========================================================================== */
/* 9. Carrusel de destacados                                                   */
/* ========================================================================== */

.eco-carousel { position: relative; }
.eco-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: var(--eco-s3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: var(--eco-s2);
}
.eco-carousel__track > * { scroll-snap-align: start; }
.eco-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--eco-border);
  border-radius: 50%;
  background: var(--eco-surface);
  box-shadow: var(--eco-shadow-md);
  color: var(--eco-ink-2);
  cursor: pointer;
}
.eco-carousel__nav--prev { left: calc(var(--eco-s4) * -1); }
.eco-carousel__nav--next { right: calc(var(--eco-s4) * -1); }

.eco-placecard {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface);
  box-shadow: var(--eco-shadow-sm);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform var(--eco-t) var(--eco-ease), box-shadow var(--eco-t) var(--eco-ease);
}
.eco-placecard:hover { transform: translateY(-2px); box-shadow: var(--eco-shadow-md); }
.eco-placecard__media {
  aspect-ratio: 16 / 10;
  background: var(--eco-surface-soft);
  overflow: hidden;
  position: relative;
}
.eco-placecard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eco-placecard__body {
  display: flex;
  align-items: flex-start;
  gap: var(--eco-s2);
  padding: var(--eco-s3);
  flex: 1 1 auto;
}
.eco-placecard__cat {
  font-size: var(--eco-fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--eco-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.eco-placecard__title {
  margin: 3px 0 0;
  font-size: var(--eco-fs-base);
  font-weight: 700;
  line-height: 1.2;
  color: var(--eco-ink);
}
.eco-placecard__meta {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  font-size: var(--eco-fs-xs);
  line-height: 1.45;
  color: var(--eco-muted);
}
/* En una grilla, todas las tarjetas miden lo mismo (no escalones). */
.eco-grid > .eco-placecard { height: 100%; }

/* Placeholder vectorial de sierras: cuando el backend no trae `foto_url`.
   Nunca una foto inventada (fuera de alcance §8 de la auditoría). */
.eco-photo-fallback {
  /* Paleta parametrizada: una grilla de placeholders con el mismo dibujo pero
     distinta hora del día se lee como un set intencional, no como un error. */
  --pf-sky-1: #cfe6df;
  --pf-sky-2: #e8f1ec;
  --pf-sun: rgba(242, 165, 26, .55);
  --pf-cerro-1: #4a8f7c;
  --pf-cerro-2: #2f6f60;
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 76% 22%, var(--pf-sun) 0 14px, transparent 15px),
    linear-gradient(160deg, var(--pf-sky-1) 0%, var(--pf-sky-2) 100%);
  position: relative;
  display: grid;
  place-items: end start;
}
.eco-photo-fallback::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  background:
    linear-gradient(to top right, transparent 48%, var(--pf-cerro-1) 49%) left / 52% 100% no-repeat,
    linear-gradient(to top left,  transparent 44%, var(--pf-cerro-2) 45%) right / 62% 100% no-repeat;
  opacity: .9;
}
/* Horas del día — se eligen por índice, nunca al azar (render estable). */
.eco-photo-fallback--atardecer {
  --pf-sky-1: #f7d9bd; --pf-sky-2: #fdefe2; --pf-sun: rgba(233, 110, 60, .5);
  --pf-cerro-1: #a3736c; --pf-cerro-2: #6c4a55;
}
.eco-photo-fallback--sierra {
  --pf-sky-1: #d8e3f2; --pf-sky-2: #eef3fb; --pf-sun: rgba(120, 160, 220, .45);
  --pf-cerro-1: #5c7f96; --pf-cerro-2: #3a5a72;
}
.eco-photo-fallback--monte {
  --pf-sky-1: #e6e9cf; --pf-sky-2: #f4f6e6; --pf-sun: rgba(200, 180, 60, .5);
  --pf-cerro-1: #7a8f4a; --pf-cerro-2: #4f6b35;
}
.eco-photo-fallback--noche {
  --pf-sky-1: #2b3f52; --pf-sky-2: #47607a; --pf-sun: rgba(235, 240, 250, .55);
  --pf-cerro-1: #21384a; --pf-cerro-2: #16283a;
}
/* Monograma/rótulo sobre el placeholder (evita el "vacío" de la grilla). */
.eco-photo-fallback__tag {
  position: relative;
  z-index: 1;
  margin: 10px;
  padding: 2px 8px;
  border-radius: var(--eco-radius-pill);
  background: rgba(255, 255, 255, .82);
  color: var(--eco-teal-deep);
  font-size: var(--eco-fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ========================================================================== */
/* 10. DataTablePremium                                                        */
/* ========================================================================== */

.eco-tablewrap {
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface);
  box-shadow: var(--eco-shadow-sm);
  overflow-x: auto;
}
.eco-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--eco-fs-sm);
}
.eco-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--eco-s3) var(--eco-s4);
  background: var(--eco-surface-soft);
  color: var(--eco-muted);
  font-size: var(--eco-fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.eco-table td {
  padding: var(--eco-s3) var(--eco-s4);
  border-top: 1px solid var(--eco-border);
  color: var(--eco-ink-2);
  vertical-align: middle;
}
.eco-table tbody tr:hover td { background: var(--eco-surface-soft); }
.eco-table td.eco-num,
.eco-table th.eco-num { text-align: right; font-variant-numeric: tabular-nums; }
.eco-table__id { font-weight: 700; color: var(--eco-ink); white-space: nowrap; }

/* ========================================================================== */
/* 11. TimelinePremium / ActivityFeed                                          */
/* ========================================================================== */

.eco-timeline { position: relative; padding-left: var(--eco-s5); }
.eco-timeline::before {
  content: '';
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--eco-border);
}
.eco-timeline__item { position: relative; padding: 0 0 var(--eco-s4); }
.eco-timeline__item::before {
  content: '';
  position: absolute;
  left: calc(var(--eco-s5) * -1 + 2px);
  top: 5px;
  width: 12px; height: 12px;
  border: 2px solid var(--eco-surface);
  border-radius: 50%;
  background: var(--eco-tl, var(--eco-teal));
  box-shadow: 0 0 0 2px var(--eco-tl, var(--eco-teal));
}
.eco-timeline__item--ok     { --eco-tl: var(--eco-ok); }
.eco-timeline__item--warn   { --eco-tl: var(--eco-warn); }
.eco-timeline__item--danger { --eco-tl: var(--eco-danger); }
.eco-timeline__when { font-size: var(--eco-fs-xs); color: var(--eco-muted); font-variant-numeric: tabular-nums; }
.eco-timeline__title { font-size: var(--eco-fs-sm); font-weight: 700; color: var(--eco-ink); }
.eco-timeline__desc { font-size: var(--eco-fs-sm); color: var(--eco-muted); }

.eco-feed { display: flex; flex-direction: column; }
.eco-feed__item {
  display: flex;
  gap: var(--eco-s3);
  padding: var(--eco-s3) 0;
  align-items: flex-start;
}
.eco-feed__item + .eco-feed__item { border-top: 1px solid var(--eco-border); }
.eco-feed__icon {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--eco-radius-sm);
  background: var(--eco-surface-soft);
  color: var(--eco-teal);
}
.eco-feed__body { min-width: 0; flex: 1 1 auto; }
.eco-feed__title { display: block; font-size: var(--eco-fs-sm); font-weight: 600; color: var(--eco-ink-2); }
.eco-feed__when { font-size: var(--eco-fs-xs); color: var(--eco-muted); font-variant-numeric: tabular-nums; }

/* ========================================================================== */
/* 12. EmptyState / Skeleton                                                   */
/* ========================================================================== */

.eco-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--eco-s3);
  padding: var(--eco-s7) var(--eco-s5);
  text-align: center;
  border: 1px dashed var(--eco-border-strong);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface);
}
.eco-empty__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: var(--eco-radius-pill);
  background: var(--eco-surface-soft);
  color: var(--eco-teal);
  font-size: 26px;
}
.eco-empty__title { margin: 0; font-size: var(--eco-fs-md); font-weight: 700; color: var(--eco-ink); }
.eco-empty__text { margin: 0; max-width: 46ch; font-size: var(--eco-fs-sm); color: var(--eco-muted); }

.eco-skel {
  border-radius: var(--eco-radius-sm);
  background: linear-gradient(90deg,
      var(--eco-surface-soft) 25%,
      color-mix(in srgb, var(--eco-surface-soft) 60%, #fff) 37%,
      var(--eco-surface-soft) 63%);
  background-size: 400% 100%;
  animation: eco-shimmer 1.4s ease-in-out infinite;
}
.eco-skel--line { height: 12px; margin-bottom: 8px; }
.eco-skel--title { height: 20px; width: 55%; margin-bottom: 12px; }
.eco-skel--block { height: 120px; }
@keyframes eco-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ========================================================================== */
/* 13. Toast / Modal / ConfirmDialog                                           */
/* ========================================================================== */

.eco-toasts {
  position: fixed;
  right: var(--eco-s4);
  bottom: var(--eco-s4);
  z-index: var(--eco-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--eco-s2);
  max-width: min(380px, calc(100vw - var(--eco-s6)));
}
.eco-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--eco-s3);
  padding: var(--eco-s3) var(--eco-s4);
  border: 1px solid var(--eco-border);
  border-left: 4px solid var(--eco-toast-accent, var(--eco-teal));
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface);
  box-shadow: var(--eco-shadow-md);
  animation: eco-toast-in var(--eco-t-slow) var(--eco-ease);
}
.eco-toast--ok     { --eco-toast-accent: var(--eco-ok); }
.eco-toast--warn   { --eco-toast-accent: var(--eco-warn); }
.eco-toast--danger { --eco-toast-accent: var(--eco-danger); }
.eco-toast__title { font-size: var(--eco-fs-sm); font-weight: 700; color: var(--eco-ink); }
.eco-toast__text  { font-size: var(--eco-fs-sm); color: var(--eco-muted); }
@keyframes eco-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.eco-modal {
  position: fixed;
  inset: 0;
  z-index: var(--eco-z-modal);
  display: grid;
  place-items: center;
  padding: var(--eco-s4);
  background: rgba(7, 28, 38, .55);
}
.eco-modal__box {
  width: min(560px, 100%);
  max-height: min(86vh, 760px);
  overflow-y: auto;
  padding: var(--eco-s5);
  border-radius: var(--eco-radius-lg);
  background: var(--eco-surface);
  box-shadow: var(--eco-shadow-lg);
}
.eco-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--eco-s3);
  margin-bottom: var(--eco-s3);
}
.eco-modal__title {
  margin: 0;
  font-family: var(--eco-font-display);
  font-size: var(--eco-fs-lg);
  font-weight: 700;
  color: var(--eco-ink);
}
.eco-modal__close {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--eco-radius-sm);
  background: transparent;
  color: var(--eco-muted);
  font-size: var(--eco-fs-md);
  cursor: pointer;
}
.eco-modal__close:hover { background: var(--eco-surface-soft); color: var(--eco-ink); }
.eco-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--eco-s2);
  margin-top: var(--eco-s5);
}

/* ========================================================================== */
/* 14. FloatingSOSButton — seguridad de vida (regla dura #9)                    */
/* ========================================================================== */

.eco-sos {
  position: fixed;
  right: var(--eco-s5);
  bottom: var(--eco-s5);
  z-index: var(--eco-z-fab);
  display: grid;
  place-items: center;
  gap: 0;
  width: 84px; height: 84px;
  padding: 6px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: linear-gradient(150deg, var(--eco-rose) 0%, var(--eco-red-2) 100%);
  color: #fff;
  font: inherit;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 10px 26px rgba(220, 38, 38, .38);
  cursor: pointer;
  transition: transform var(--eco-t) var(--eco-ease), box-shadow var(--eco-t) var(--eco-ease);
}
.eco-sos:hover { transform: scale(1.04); box-shadow: 0 14px 34px rgba(220, 38, 38, .46); }
.eco-sos:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.eco-sos__icon { display: flex; line-height: 1; }
.eco-sos__label { font-size: 16px; font-weight: 800; letter-spacing: .04em; line-height: 1; }
.eco-sos__sub {
  max-width: 100%;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  opacity: .92;
}

/* ========================================================================== */
/* 15. DemoModeBanner                                                          */
/* ========================================================================== */

.eco-demobanner {
  display: flex;
  align-items: center;
  gap: var(--eco-s3);
  padding: 8px var(--eco-s5);
  background: var(--eco-warn-bg);
  color: var(--eco-warn-fg);
  font-size: var(--eco-fs-sm);
  font-weight: 600;
}
.eco-demobanner__tag {
  padding: 2px 8px;
  border-radius: var(--eco-radius-pill);
  background: var(--eco-warn);
  color: #fff;
  font-size: var(--eco-fs-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ========================================================================== */
/* 16. Tema oscuro: correcciones puntuales sobre superficies claras            */
/* ========================================================================== */

[data-eco-theme='dark'] .eco-btn { background: var(--eco-surface); color: var(--eco-ink); }
[data-eco-theme='dark'] .eco-btn--ghost { background: transparent; color: var(--eco-muted); }
[data-eco-theme='dark'] .eco-btn--ghost:hover { background: rgba(255, 255, 255, .07); color: var(--eco-ink); }
[data-eco-theme='dark'] .eco-table th { background: var(--eco-surface-soft); }
[data-eco-theme='dark'] .eco-legend { background: color-mix(in srgb, var(--eco-surface) 92%, transparent); }
[data-eco-theme='dark'] .eco-feature__chip { background: color-mix(in srgb, var(--eco-surface) 90%, transparent); color: var(--eco-lime); }
[data-eco-theme='dark'] .eco-empty { background: var(--eco-surface); }

@media (prefers-reduced-motion: reduce) {
  .eco-skel, .eco-pill--pulse .eco-pill__dot, .eco-toast { animation: none !important; }
  .eco-filtercard:hover, .eco-placecard:hover, a.eco-kpi:hover, .eco-sos:hover { transform: none; }
}

/* ========================================================================== */
/* 17. Tabs horizontales (4.png Comerciante, 7.png Vista 360°)                 */
/* ========================================================================== */

.eco-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--eco-radius-pill);
  background: var(--eco-surface-soft);
  border: 1px solid var(--eco-border);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.eco-tabs::-webkit-scrollbar { display: none; }
.eco-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--eco-radius-pill);
  background: transparent;
  color: var(--eco-muted);
  font: inherit;
  font-size: var(--eco-fs-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--eco-t-fast) var(--eco-ease), color var(--eco-t-fast) var(--eco-ease);
}
.eco-tab:hover { color: var(--eco-ink); background: rgba(15, 23, 42, .05); }
.eco-tab[aria-selected='true'],
.eco-tab.is-active {
  background: var(--eco-surface);
  color: var(--eco-teal-deep);
  box-shadow: var(--eco-shadow-sm);
}
.eco-tab__badge {
  padding: 1px 7px;
  border-radius: var(--eco-radius-pill);
  background: var(--eco-neutral-bg, rgba(15, 23, 42, .07));
  color: inherit;
  font-size: var(--eco-fs-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* Variante subrayada: para cabeceras de ficha, donde la píldora pesa demasiado. */
.eco-tabs--underline {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--eco-border);
  border-radius: 0;
  padding: 0;
  gap: var(--eco-s4);
}
.eco-tabs--underline .eco-tab {
  border-radius: 0;
  padding: 10px 2px;
  border-bottom: 2px solid transparent;
}
.eco-tabs--underline .eco-tab[aria-selected='true'],
.eco-tabs--underline .eco-tab.is-active {
  background: transparent;
  box-shadow: none;
  border-bottom-color: var(--eco-teal);
  color: var(--eco-teal-deep);
}

/* ========================================================================== */
/* 18. HeroEditorial (6.png) — hero con foto/textura + tarjeta flotante        */
/* ========================================================================== */

.eco-heroed {
  position: relative;
  border-radius: var(--eco-radius-lg);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--eco-navy) 0%, var(--eco-teal-deep) 100%);
  isolation: isolate;
}
.eco-heroed__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.eco-heroed__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.eco-heroed__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* F81/F — con foto real el velo se afina hacia la derecha: el texto vive en el
     lado oscuro y el paisaje se ve. */
  background: linear-gradient(105deg, rgba(7, 28, 38, .90) 0%, rgba(7, 28, 38, .62) 46%, rgba(7, 28, 38, .20) 100%);
}
.eco-heroed__body {
  position: relative;
  z-index: 1;
  padding: var(--eco-s7) var(--eco-s6);
  max-width: 720px;
}
.eco-heroed--alto .eco-heroed__body { padding-block: calc(var(--eco-s7) + var(--eco-s5)); }
.eco-heroed__eyebrow {
  margin: 0;
  font-size: var(--eco-fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--eco-lime);
  font-weight: 700;
}
.eco-heroed__title {
  margin: 10px 0 0;
  font-family: var(--eco-font-display);
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.01em;
}
.eco-heroed__sub {
  margin: 12px 0 0;
  font-size: var(--eco-fs-lg);
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  max-width: 60ch;
}
.eco-heroed__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eco-s3);
  margin-top: var(--eco-s5);
}
/* Tarjeta flotante de resumen (dato duro sobre la foto). */
.eco-heroed__panel {
  position: absolute;
  right: var(--eco-s5);
  bottom: var(--eco-s5);
  z-index: 2;
  min-width: 220px;
  padding: var(--eco-s4);
  border-radius: var(--eco-radius-md);
  background: color-mix(in srgb, var(--eco-surface) 94%, transparent);
  color: var(--eco-ink);
  box-shadow: var(--eco-shadow-lg);
  backdrop-filter: blur(6px);
}
.eco-heroed__panel-label {
  display: block;
  font-size: var(--eco-fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--eco-muted);
  font-weight: 700;
}
.eco-heroed__panel-valor {
  display: block;
  margin-top: 4px;
  font-family: var(--eco-font-display);
  font-size: var(--eco-fs-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--eco-teal-deep);
}

/* ========================================================================== */
/* 19. SectionHead + pie institucional (piezas editoriales de portal público)  */
/* ========================================================================== */

.eco-sectionhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--eco-s4);
  margin-bottom: var(--eco-s3);
}
.eco-sectionhead__text { min-width: 0; }
.eco-sectionhead__title {
  margin: 0;
  font-family: var(--eco-font-display);
  font-size: var(--eco-fs-xl);
  font-weight: 700;
  line-height: 1.15;
  color: var(--eco-ink);
}
.eco-sectionhead__sub {
  margin: 4px 0 0;
  font-size: var(--eco-fs-sm);
  color: var(--eco-muted);
}
.eco-sectionhead__link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--eco-fs-sm);
  font-weight: 600;
  color: var(--eco-teal-deep);
  text-decoration: none;
}
.eco-sectionhead__link:hover { text-decoration: underline; }

.eco-footer {
  border-top: 1px solid var(--eco-border);
  padding: var(--eco-s6) var(--eco-s6) var(--eco-s7);
  color: var(--eco-muted);
  font-size: var(--eco-fs-sm);
}
.eco-footer__cols {
  display: grid;
  gap: var(--eco-s5);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.eco-footer__title {
  margin: 0 0 8px;
  font-size: var(--eco-fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--eco-ink-2);
  font-weight: 700;
}
.eco-footer a { color: inherit; text-decoration: none; display: block; padding: 3px 0; }
.eco-footer a:hover { color: var(--eco-teal-deep); text-decoration: underline; }
.eco-footer__legal {
  margin-top: var(--eco-s5);
  padding-top: var(--eco-s4);
  border-top: 1px solid var(--eco-border);
  font-size: var(--eco-fs-xs);
}

/* ========================================================================== */
/* 20. KPI de marca (3.png) — ícono grande semitransparente de fondo           */
/* ========================================================================== */

.eco-kpi--marca {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--eco-teal-deep) 0%, var(--eco-green) 100%);
  border-color: transparent;
  color: #fff;
}
.eco-kpi--marca .eco-kpi__valor,
.eco-kpi--marca .eco-kpi__label { color: #fff; }
.eco-kpi--marca .eco-kpi__foot { color: rgba(255, 255, 255, .78); }
.eco-kpi__marca-icon {
  position: absolute;
  right: -10px;
  bottom: -14px;
  color: rgba(255, 255, 255, .16);
  pointer-events: none;
}
.eco-kpi__marca-icon svg { width: 96px; height: 96px; }

/* Sparkline dentro del KPI (4.png). */
.eco-kpi__spark {
  display: block;
  width: 100%;
  height: 34px;
  margin-top: 6px;
  overflow: visible;
}
.eco-kpi__spark path { fill: none; stroke: var(--eco-teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eco-kpi__spark .eco-spark__area { fill: color-mix(in srgb, var(--eco-teal) 16%, transparent); stroke: none; }
.eco-kpi__spark .eco-spark__dot { fill: var(--eco-orange); stroke: #fff; stroke-width: 2; }

/* ========================================================================== */
/* 21. FunnelChart (4.png) — embudo de conversión                              */
/* ========================================================================== */

.eco-funnel { display: flex; flex-direction: column; gap: var(--eco-s3); }
.eco-funnel__paso { min-width: 0; }
.eco-funnel__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--eco-s3);
  margin-bottom: 4px;
}
.eco-funnel__label {
  font-size: var(--eco-fs-sm);
  font-weight: 600;
  color: var(--eco-ink-2);
  min-width: 0;
  overflow-wrap: anywhere;
}
.eco-funnel__valor {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--eco-ink);
  font-size: var(--eco-fs-sm);
}
.eco-funnel__pct {
  margin-left: 6px;
  font-weight: 600;
  color: var(--eco-muted);
}
.eco-funnel__track {
  height: 14px;
  border-radius: var(--eco-radius-pill);
  background: var(--eco-surface-soft);
  overflow: hidden;
}
.eco-funnel__bar {
  height: 100%;
  border-radius: var(--eco-radius-pill);
  min-width: 6px;
}

/* ========================================================================== */
/* 22. Donut (5.png) y Gauge semicircular (10.png)                             */
/* ========================================================================== */

.eco-donut { display: flex; align-items: center; gap: var(--eco-s4); flex-wrap: wrap; }
.eco-donut__svg { flex: 0 0 auto; }
.eco-donut__track { fill: none; stroke: var(--eco-border-strong); stroke-width: 14; }
.eco-donut__seg { fill: none; stroke-width: 14; stroke-linecap: butt; }
.eco-donut__center {
  font-family: var(--eco-font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  fill: var(--eco-ink);
}
.eco-donut__centersub { fill: var(--eco-muted); font-size: 10px; }
.eco-donut__legend { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.eco-donut__li { display: flex; align-items: center; gap: 8px; font-size: var(--eco-fs-sm); color: var(--eco-ink-2); }
.eco-donut__dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.eco-donut__num { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }

.eco-gauge { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.eco-gauge__track { fill: none; stroke: var(--eco-border-strong); stroke-width: 16; stroke-linecap: round; }
.eco-gauge__fill { fill: none; stroke-width: 16; stroke-linecap: round; }
.eco-gauge__valor {
  font-family: var(--eco-font-display);
  font-size: var(--eco-fs-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--eco-ink);
  margin-top: -26px;
}
.eco-gauge__label {
  font-size: var(--eco-fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--eco-muted);
  font-weight: 700;
}

/* ========================================================================== */
/* 23. CarnetCard (3.png) — credencial verde con QR                            */
/* ========================================================================== */

.eco-carnet {
  position: relative;
  display: flex;
  gap: var(--eco-s4);
  align-items: center;
  padding: var(--eco-s5);
  border-radius: var(--eco-radius-lg);
  background: linear-gradient(135deg, var(--eco-teal-deep) 0%, var(--eco-green) 100%);
  color: #fff;
  overflow: hidden;
  box-shadow: var(--eco-shadow-md);
}
.eco-carnet__body { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; }
.eco-carnet__eyebrow {
  margin: 0;
  font-size: var(--eco-fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  font-weight: 700;
}
.eco-carnet__nombre {
  margin: 6px 0 0;
  font-family: var(--eco-font-display);
  font-size: var(--eco-fs-xl);
  font-weight: 700;
  line-height: 1.1;
}
.eco-carnet__meta { margin: 6px 0 0; font-size: var(--eco-fs-sm); color: rgba(255, 255, 255, .82); }
.eco-carnet__datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eco-s4);
  margin-top: var(--eco-s4);
}
.eco-carnet__dato { min-width: 0; }
.eco-carnet__dato b {
  display: block;
  font-size: var(--eco-fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  font-weight: 700;
}
.eco-carnet__dato span { font-size: var(--eco-fs-base); font-weight: 600; font-variant-numeric: tabular-nums; }
.eco-carnet__qr {
  flex: 0 0 auto;
  width: 116px;
  height: 116px;
  padding: 8px;
  border-radius: var(--eco-radius-md);
  background: #fff;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}
.eco-carnet__qr img,
.eco-carnet__qr svg { width: 100%; height: 100%; object-fit: contain; }

/* ========================================================================== */
/* 24. StatusBar inferior (10.png COE, 11.png Sistema)                         */
/* ========================================================================== */

.eco-statusbar {
  display: flex;
  align-items: center;
  gap: var(--eco-s5);
  flex-wrap: wrap;
  padding: 10px var(--eco-s5);
  border-top: 1px solid var(--eco-border);
  background: var(--eco-surface);
  font-size: var(--eco-fs-xs);
  color: var(--eco-muted);
}
.eco-statusbar--fija {
  position: sticky;
  bottom: 0;
  z-index: 5;
}
.eco-statusbar__item { display: inline-flex; align-items: center; gap: 6px; }
.eco-statusbar__item b {
  color: var(--eco-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.eco-statusbar__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--eco-ok);
  flex: 0 0 auto;
}
.eco-statusbar__dot--warn { background: var(--eco-warn); }
.eco-statusbar__dot--danger { background: var(--eco-danger); }

/* Correcciones de tema oscuro para lo agregado arriba. */
[data-eco-theme='dark'] .eco-tabs { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .10); }
[data-eco-theme='dark'] .eco-tab[aria-selected='true'],
[data-eco-theme='dark'] .eco-tab.is-active { background: var(--eco-surface); color: var(--eco-lime); }
[data-eco-theme='dark'] .eco-tab:hover { background: rgba(255, 255, 255, .08); }
[data-eco-theme='dark'] .eco-heroed__panel { background: color-mix(in srgb, var(--eco-surface) 90%, transparent); }
[data-eco-theme='dark'] .eco-statusbar { background: var(--eco-surface); border-color: rgba(255, 255, 255, .10); }
[data-eco-theme='dark'] .eco-sectionhead__link { color: var(--eco-lime); }

/* Botones sobre superficie oscura: el fantasma gris del tema claro desaparece. */
.eco-heroed .eco-btn--ghost,
.eco-hero .eco-btn--ghost,
.eco-carnet .eco-btn--ghost,
.eco-card--navy .eco-btn--ghost,
.eco-card--teal .eco-btn--ghost {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
}
.eco-heroed .eco-btn--ghost:hover,
.eco-hero .eco-btn--ghost:hover,
.eco-carnet .eco-btn--ghost:hover,
.eco-card--navy .eco-btn--ghost:hover,
.eco-card--teal .eco-btn--ghost:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* PlaceCard horizontal: para listas largas (atractivos de un pueblo), donde la
   grilla de fotos grandes se vuelve repetitiva. */
.eco-placecard--h { flex-direction: row; align-items: stretch; }
.eco-placecard--h .eco-placecard__media {
  flex: 0 0 116px;
  aspect-ratio: auto;
  min-height: 100%;
}
.eco-placecard--h .eco-placecard__body { align-items: flex-start; }
.eco-placecard--h .eco-placecard__meta { -webkit-line-clamp: 2; }

/* ========================================================================== */
/* 25. Banner publicitario (F20B.2) — con rótulo honesto de "Publicidad"       */
/* ========================================================================== */

.eco-banners { display: flex; flex-direction: column; gap: var(--eco-s3); }
.eco-banner {
  display: block;
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface);
  box-shadow: var(--eco-shadow-sm);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--eco-t) var(--eco-ease);
}
a.eco-banner:hover { box-shadow: var(--eco-shadow-md); }
.eco-banner__media { display: block; max-height: 150px; overflow: hidden; background: var(--eco-surface-soft); }
.eco-banner__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eco-banner__body { padding: var(--eco-s3); }
.eco-banner__tag {
  display: inline-block;
  margin-bottom: 6px;
  padding: 1px 7px;
  border-radius: var(--eco-radius-pill);
  background: var(--eco-surface-soft);
  border: 1px solid var(--eco-border);
  color: var(--eco-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.eco-banner__title { margin: 0; font-size: var(--eco-fs-base); font-weight: 700; color: var(--eco-ink); line-height: 1.25; }
.eco-banner__desc { margin: 4px 0 0; font-size: var(--eco-fs-sm); color: var(--eco-muted); }

/* Complementos de C.3 (Portal Turismo). */
.eco-card--pad-sm { padding: var(--eco-s3); }
.eco-item__precio { margin: 8px 0 0; font-size: var(--eco-fs-base); color: var(--eco-ink); }
.eco-item__precio s { color: var(--eco-muted); font-size: var(--eco-fs-sm); margin-right: 6px; }
.eco-item__precio b { color: var(--eco-teal-deep); font-weight: 800; font-variant-numeric: tabular-nums; }
/* Teléfono de emergencia dentro de la tarjeta (tipografía tabular, alto contraste). */
.eco-emerg__tel {
  display: block;
  margin-top: 6px;
  font-size: var(--eco-fs-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--eco-ink);
}

/* Ficha de evento de la Agenda (C.3): bloque de fecha + cuerpo + acciones. */
.eco-evento { display: flex; gap: var(--eco-s4); align-items: flex-start; }
/* F81/F — miniatura del evento. Es ilustrativa (los eventos no tienen foto
   propia en el backend) y lo dice encima de la imagen. */
.eco-evento__media {
  position: relative;
  flex: 0 0 auto;
  width: 148px; height: 108px;
  border-radius: var(--eco-radius-md);
  overflow: hidden;
  background: var(--eco-surface-soft);
}
.eco-evento__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eco-evento__ilustrativa {
  position: absolute; left: 6px; bottom: 6px;
  padding: 1px 7px;
  border-radius: var(--eco-radius-pill);
  background: rgba(7, 28, 38, .74);
  color: #fff;
  font-size: 10px;
  letter-spacing: .04em;
}
@media (max-width: 560px) { .eco-evento__media { display: none; } }
.eco-evento--destacado { border-color: var(--eco-gold); box-shadow: 0 0 0 1px var(--eco-gold) inset, var(--eco-shadow-sm); }
.eco-evento__body { flex: 1 1 auto; min-width: 0; }
.eco-evento__titulo {
  margin: 0;
  font-family: var(--eco-font-display);
  font-size: var(--eco-fs-lg);
  font-weight: 700;
  line-height: 1.2;
  color: var(--eco-ink);
}
.eco-evento__meta { margin: 4px 0 0; font-size: var(--eco-fs-sm); color: var(--eco-muted); }
.eco-evento__desc { margin: 8px 0 0; font-size: var(--eco-fs-sm); color: var(--eco-ink-2); line-height: 1.5; }
.eco-btn.is-disabled, .eco-btn:disabled { opacity: .6; pointer-events: none; }

/* ========================================================================== */
/* 26. Pasaporte del turista (F18/F78) — insignias, sellos y canjes            */
/* ========================================================================== */

.eco-insignia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--eco-s4) var(--eco-s3);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface);
  text-align: center;
}
.eco-insignia__icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--eco-surface-soft);
  color: var(--eco-muted-2);
  font-size: 24px;
}
.eco-insignia__nombre { font-size: var(--eco-fs-sm); font-weight: 700; color: var(--eco-muted); }
.eco-insignia__desc { font-size: var(--eco-fs-xs); color: var(--eco-muted-2); line-height: 1.35; }
.eco-insignia--ganada {
  border-color: color-mix(in srgb, var(--eco-gold) 55%, transparent);
  background: color-mix(in srgb, var(--eco-gold) 10%, var(--eco-surface));
}
.eco-insignia--ganada .eco-insignia__icon {
  background: color-mix(in srgb, var(--eco-gold) 22%, transparent);
  color: var(--eco-gold);
}
.eco-insignia--ganada .eco-insignia__nombre { color: var(--eco-ink); }
.eco-insignia--ganada .eco-insignia__desc { color: var(--eco-ink-2); }

.eco-sello {
  display: flex;
  align-items: center;
  gap: var(--eco-s3);
  padding: var(--eco-s3);
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface);
}
.eco-sello__icon {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--eco-radius-sm);
  background: var(--eco-surface-soft);
  color: var(--eco-teal-deep);
}
.eco-sello__tipo { display: block; font-size: var(--eco-fs-xs); color: var(--eco-muted); text-transform: capitalize; }
.eco-sello__creditos { display: block; font-weight: 800; color: var(--eco-green); font-variant-numeric: tabular-nums; }

/* Barra de progreso genérica (nivel del pasaporte, cupos, avance de trámite). */
.eco-progress {
  height: 10px;
  width: 100%;
  border-radius: var(--eco-radius-pill);
  background: var(--eco-border-strong);
  overflow: hidden;
}
.eco-progress__fill { height: 100%; border-radius: var(--eco-radius-pill); background: var(--eco-teal); }

.eco-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800;
  letter-spacing: .18em;
  font-size: var(--eco-fs-lg);
  color: var(--eco-ink);
  word-break: break-all;
}

/* F81/F — chip sobre la foto de una PlaceCard ("Habilitado", "Imagen ilustrativa"). */
.eco-placecard__tag {
  position: absolute;
  left: 8px; bottom: 8px;
  padding: 2px 8px;
  border-radius: var(--eco-radius-pill);
  background: rgba(7, 28, 38, .74);
  color: #fff;
  font-size: 11px;
  letter-spacing: .03em;
}

/* F81/F — rótulo "Imagen ilustrativa" en la tarjeta destacada (arriba a la derecha,
   para no chocar con el chip de categoría que va abajo a la izquierda). */
.eco-feature__tag {
  position: absolute;
  right: var(--eco-s3);
  top: var(--eco-s3);
  padding: 2px 8px;
  border-radius: var(--eco-radius-pill);
  background: rgba(7, 28, 38, .74);
  color: #fff;
  font-size: 11px;
}