/* ══════════════════════════════════════════════════════════════════════════
   Habita360 · lo propio de esta pieza
   ══════════════════════════════════════════════════════════════════════════
   Encima del Design OS (ds/). Aquí solo hay maquetación y las pocas piezas que
   el sistema no trae (gráfico, filas de tiempos y de sectores, reparto de suelo).
   Todo color, radio, sombra, duración y curva es var(--ct-*). Lo que el sistema
   no tiene está apuntado en FALTAN-TOKENS.md.
   ══════════════════════════════════════════════════════════════════════════ */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.hb { margin: 0; background: var(--ct-fondo-alterno); }

/* ── Armazón: en estrecho, mapa arriba y ficha debajo; en ancho, lado a lado ── */
.hb-app { display: grid; grid-template-columns: minmax(0, 1fr); }
.hb-mapa { position: relative; height: 68vh; height: 68dvh; min-height: 460px; }
.hb-panel { min-width: 0; min-height: 0; outline: 0; }

@media (min-width: 1024px) {
  html, .hb { height: 100%; overflow: hidden; }
  .hb-app { grid-template-columns: minmax(0, 1fr) clamp(420px, 36vw, var(--ct-medida-hoja)); height: 100vh; height: 100dvh; }
  .hb-mapa { height: 100%; min-height: 0; }
  .hb-panel { overflow-y: auto; overscroll-behavior: contain; border-inline-start: 1px solid var(--ct-borde); }
}

/* Municipio sin datos: no hay mapa que enseñar y el aviso se centra en la página. */
.hb--sin-datos .hb-app { display: block; height: auto; }
.hb--sin-datos .hb-mapa { display: none; }
.hb--sin-datos .hb-panel { max-width: var(--ct-medida-hoja); margin-inline: auto; border: 0; overflow: visible; }
.hb--sin-datos .hb-cierre { display: none; }

/* ── Sobre el mapa ─────────────────────────────────────────────────────── */
.hb-demo { flex: 0 0 auto; }
/* en estrecho el kit recoge el nombre del producto de la tarjeta del título: lo lleva esta etiqueta */
.hb-demo__corto { display: none; }
.hb-mapa[data-ct-mapa-ancho="estrecho"] .hb-demo__corto { display: inline; }
.hb-mapa[data-ct-mapa-ancho="estrecho"] .hb-demo__largo { display: none; }
.hb-cuenta { font-weight: var(--ct-peso-texto-medio); opacity: var(--ct-opacidad-panel); }

.hb-legal,
.hb-lectura {
  position: absolute;
  margin: 0;
  font-family: var(--ct-fuente-texto);
  font-size: var(--ct-tipo-interfaz-nota);
  line-height: 1.35;
  pointer-events: none;
}
.hb-legal {
  z-index: 1;
  left: var(--ct-espacio-interfaz-3);
  bottom: var(--ct-espacio-interfaz-3);
  max-width: calc(100% - var(--ct-espacio-12));
  padding: var(--ct-espacio-interfaz-1) var(--ct-espacio-interfaz-4);
}
.hb-lectura {
  z-index: 2;
  left: var(--ct-espacio-interfaz-3);
  bottom: calc(var(--ct-espacio-interfaz-3) + var(--ct-espacio-7));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ct-espacio-interfaz-1) var(--ct-espacio-interfaz-3);
  max-width: min(420px, calc(100% - 2 * var(--ct-espacio-interfaz-3)));
  padding: var(--ct-espacio-interfaz-3) var(--ct-espacio-interfaz-4);
  font-size: var(--ct-tipo-interfaz-chip);
}
.hb-lectura[hidden] { display: none; }
.hb-lectura b { font-weight: var(--ct-peso-texto-fuerte); }
/* con la ficha de un lugar abierta, la lectura y el aviso legal le dejan el sitio */
.hb-mapa[data-ct-mapa-ficha] .hb-lectura,
.hb-mapa[data-ct-mapa-ficha] .hb-legal { visibility: hidden; }

/* ── Niveles: pestañas pegadas arriba de la ficha ──────────────────────── */
.hb-panel__niveles {
  position: sticky;
  top: 0;
  z-index: var(--ct-z-barra);
  padding: var(--ct-espacio-interfaz-4) var(--ct-espacio-interfaz-5);
  border-bottom: 1px solid var(--ct-linea);
  background: var(--ct-fondo-alterno);
}
.hb-panel__niveles[hidden] { display: none; }
.hb-panel__niveles .ct-pestanas { flex-wrap: nowrap; }
.hb-panel__niveles .ct-pestana { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.hb-pestana {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  min-height: var(--ct-toque-accion);
  padding: var(--ct-espacio-interfaz-3) var(--ct-espacio-interfaz-4);
  text-align: start;
  line-height: 1.25;
}
.hb-pestana__n {
  font-size: var(--ct-tipo-interfaz-etiqueta);
  font-weight: var(--ct-peso-texto-fuerte);
  letter-spacing: var(--ct-tipo-interfaz-tracking-etiqueta);
  text-transform: uppercase;
}
.hb-pestana__t { font-size: var(--ct-tipo-interfaz-boton); font-weight: var(--ct-peso-texto-fuerte); }

/* ── Vistas ────────────────────────────────────────────────────────────── */
.hb-vista,
.hb-cierre {
  display: grid;
  gap: var(--ct-espacio-interfaz-6);
  padding: var(--ct-espacio-interfaz-6) var(--ct-espacio-interfaz-5);
}
.hb-vista[hidden] { display: none; }
.hb-vista:focus-visible { outline: 0; }
.hb-cierre { padding-top: 0; padding-bottom: var(--ct-espacio-7); }

.hb-portada { display: grid; gap: var(--ct-espacio-interfaz-3); }
.hb-portada h2 { font-size: var(--ct-tipo-interfaz-titulo); letter-spacing: var(--ct-tipo-titulo-2-tracking); line-height: 1.05; text-wrap: balance; }
.hb-entradilla { margin: 0; max-width: 60ch; color: var(--ct-texto-suave); font-size: var(--ct-tipo-cuerpo-tamano); }

.hb-apartado { display: grid; gap: var(--ct-espacio-interfaz-4); }
.hb-apartado > h3,
.hb-fuentes > h3 { font-size: var(--ct-tipo-interfaz-hoja); line-height: 1.2; letter-spacing: 0; }

.hb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }

.hb-punto {
  flex: 0 0 auto;
  width: var(--ct-espacio-interfaz-3);
  height: var(--ct-espacio-interfaz-3);
  border-radius: 50%;
  background: var(--hb-cat, var(--ct-texto-tenue));
}
.hb-barra {
  display: block;
  height: var(--ct-espacio-interfaz-1);
  margin-top: var(--ct-espacio-interfaz-2);
  border-radius: var(--ct-radio-pildora);
  background: var(--ct-fondo-arena);
  overflow: hidden;
}
.hb-barra > i { display: block; width: var(--valor, 0%); height: 100%; border-radius: inherit; background: var(--ct-primario); }

/* ── Contexto del Observatorio ICVT ─────────────────────────────────────── */
.hb-indicadores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ct-espacio-interfaz-5) var(--ct-espacio-interfaz-5); margin: 0; }
.hb-indicadores > div { display: grid; align-content: start; gap: var(--ct-espacio-interfaz-1); min-width: 0; }
.hb-indicadores dt { color: var(--ct-texto-suave); font-size: var(--ct-tipo-interfaz-chip); line-height: 1.3; }
.hb-indicadores dd { margin: 0; font-variant-numeric: tabular-nums; }
.hb-indicadores dd b { font-family: var(--ct-fuente-titular); font-size: var(--ct-tipo-interfaz-cifra); font-weight: var(--ct-peso-titular); line-height: 1.1; }
.hb-indicadores dd small { display: block; color: var(--ct-texto-suave); font-size: var(--ct-tipo-interfaz-nota); }
.hb-subtitulo { font-family: var(--ct-fuente-texto); font-size: var(--ct-tipo-interfaz-chip); font-weight: var(--ct-peso-texto-fuerte); letter-spacing: var(--ct-tipo-interfaz-tracking-etiqueta); text-transform: uppercase; color: var(--ct-texto-suave); }
.hb-areas { display: grid; gap: var(--ct-espacio-interfaz-3); margin: 0; padding: 0; list-style: none; }
.hb-areas > li { display: grid; grid-template-columns: minmax(8ch, 30%) minmax(0, 1fr); align-items: start; gap: var(--ct-espacio-interfaz-4); }
.hb-areas__nombre { padding-top: var(--ct-espacio-interfaz-1); font-weight: var(--ct-peso-texto-fuerte); }
.hb-areas__lista { display: flex; flex-wrap: wrap; gap: var(--ct-espacio-interfaz-2); }
.hb-ficha { padding: var(--ct-espacio-interfaz-1) var(--ct-espacio-interfaz-3); border-radius: var(--ct-radio-pildora); background: var(--ct-primario-suave); color: var(--ct-texto); font-size: var(--ct-tipo-interfaz-chip); }

/* ── Índice de Calidad de Vida Territorial ──────────────────────────────── */
.hb-nota-icvt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--ct-espacio-interfaz-5); }
.hb-nota-icvt p { margin: 0; }
.hb-nota-icvt__cifra { font-family: var(--ct-fuente-titular); font-size: var(--ct-tipo-titulo-1-tamano); font-weight: var(--ct-peso-titular); font-variant-numeric: tabular-nums; line-height: 1; color: var(--ct-primario-texto); white-space: nowrap; }
.hb-nota-icvt__cifra small { font-family: var(--ct-fuente-texto); font-size: var(--ct-tipo-interfaz-chip); font-weight: var(--ct-peso-texto-medio); color: var(--ct-texto-suave); }
.hb-nota-icvt__texto { color: var(--ct-texto-suave); }
.hb-nota-icvt__texto b { color: var(--ct-texto); }
.hb-comparadas { display: grid; gap: var(--ct-espacio-interfaz-4); margin: 0; padding: 0; list-style: none; }
.hb-comparadas > li { display: grid; grid-template-columns: minmax(11ch, 30%) minmax(0, 1fr) auto; align-items: center; gap: var(--ct-espacio-interfaz-4); }
.hb-comparadas__nombre { font-weight: var(--ct-peso-texto-fuerte); }
.hb-comparadas__barras { display: grid; gap: 2px; }
.hb-comparadas__propia, .hb-comparadas__media { display: block; width: var(--valor, 100%); height: var(--ct-espacio-interfaz-3); border-radius: var(--ct-radio-pildora); }
.hb-comparadas__propia { background: var(--ct-primario); }
.hb-comparadas__media { height: var(--ct-espacio-interfaz-1); background: var(--ct-texto-tenue); }
.hb-comparadas__cifra { min-width: 8ch; text-align: end; font-variant-numeric: tabular-nums; }
.hb-comparadas__cifra small { margin-inline-start: var(--ct-espacio-interfaz-2); color: var(--ct-texto-suave); font-size: var(--ct-tipo-interfaz-nota); }
.hb-leyenda { display: flex; flex-wrap: wrap; gap: var(--ct-espacio-interfaz-2) var(--ct-espacio-interfaz-5); margin: 0; color: var(--ct-texto-suave); font-size: var(--ct-tipo-interfaz-nota); }
.hb-leyenda span { display: inline-flex; align-items: center; gap: var(--ct-espacio-interfaz-2); }
.hb-leyenda i { width: var(--ct-espacio-interfaz-6); }

/* ── Gráfico del padrón ────────────────────────────────────────────────── */
.hb-grafico { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.hb-grafico__rejilla { stroke: var(--ct-linea); stroke-width: 1; }
.hb-grafico__eje { fill: var(--ct-texto-suave); font-family: var(--ct-fuente-texto); font-size: var(--ct-tipo-interfaz-nota); font-variant-numeric: tabular-nums; }
.hb-grafico__area { fill: var(--ct-primario); fill-opacity: .12; }
.hb-grafico__linea { fill: none; stroke: var(--ct-primario); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.hb-grafico__linea--hueco { stroke-dasharray: 2 5; }
.hb-grafico__punto { fill: var(--ct-primario); }
.hb-grafico__punto--hueco { fill: var(--ct-superficie); stroke: var(--ct-primario); stroke-width: 2; }
.hb-grafico__guia { stroke: var(--ct-texto-suave); stroke-width: 1; stroke-dasharray: 2 3; }
.hb-lectura-grafico { color: var(--ct-texto-suave); font-size: var(--ct-tipo-interfaz-chip); font-variant-numeric: tabular-nums; }
.hb-lectura-grafico b { color: var(--ct-texto); font-size: var(--ct-tipo-interfaz-cuerpo); }

/* ── Listas pulsables: tiempos, servicios propios y sectores ───────────── */
.hb-tiempos, .hb-lista, .hb-sectores, .hb-clases, .hb-oportunidades, .hb-niveles { margin: 0; padding: 0; list-style: none; }
.hb-sectores, .hb-oportunidades { display: grid; gap: var(--ct-espacio-interfaz-3); }

.hb-tiempo, .hb-fila, .hb-sector {
  display: grid;
  align-items: center;
  gap: var(--ct-espacio-interfaz-4);
  width: 100%;
  min-height: var(--ct-toque-minimo);
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
}
.hb-tiempo, .hb-fila {
  padding: var(--ct-espacio-interfaz-3) var(--ct-espacio-interfaz-2);
  border-bottom: 1px solid var(--ct-linea);
  border-radius: 0;
}
.hb-tiempos > li:last-child > *,
.hb-lista > li:last-child > * { border-bottom: 0; }
.hb-tiempo { grid-template-columns: auto minmax(0, 1fr) auto; }
.hb-fila { grid-template-columns: auto minmax(0, 1fr) auto; }
.hb-fila small { display: block; color: var(--ct-texto-suave); font-size: var(--ct-tipo-interfaz-chip); }
.hb-fila .ct-icono { color: var(--ct-texto-suave); }
.hb-tiempo__nombre { min-width: 0; }
.hb-tiempo__km { margin-inline-start: var(--ct-espacio-interfaz-3); color: var(--ct-texto-suave); font-size: var(--ct-tipo-interfaz-chip); font-variant-numeric: tabular-nums; }
.hb-tiempo__min, .hb-sector__viv {
  font-family: var(--ct-fuente-titular);
  font-size: var(--ct-tipo-interfaz-cifra);
  font-weight: var(--ct-peso-titular);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.hb-tiempo__min small, .hb-sector__viv small { font-family: var(--ct-fuente-texto); font-size: var(--ct-tipo-interfaz-chip); font-weight: var(--ct-peso-texto-medio); color: var(--ct-texto-suave); }

.hb-sector {
  grid-template-columns: minmax(6ch, auto) minmax(0, 1fr) auto;
  padding: var(--ct-espacio-interfaz-3) var(--ct-espacio-interfaz-4);
  border: 1px solid var(--ct-borde);
  border-radius: var(--ct-radio-fila);
  background: var(--ct-superficie);
}
.hb-sector__codigo { font-weight: var(--ct-peso-texto-fuerte); font-variant-numeric: tabular-nums; }
.hb-sector__meta { min-width: 0; color: var(--ct-texto-suave); font-size: var(--ct-tipo-interfaz-chip); }

button.hb-tiempo, button.hb-fila, button.hb-sector {
  cursor: pointer;
  transition: background-color var(--ct-dur-rapida) var(--ct-curva-estado), border-color var(--ct-dur-rapida) var(--ct-curva-estado);
}
@media (hover: hover) {
  button.hb-tiempo:hover, button.hb-fila:hover { background: var(--ct-primario-suave); }
  button.hb-sector:hover { border-color: var(--ct-primario); }
}
button.hb-tiempo[aria-pressed="true"], button.hb-fila[aria-pressed="true"] { background: var(--ct-primario-suave); }
button.hb-sector[aria-pressed="true"] { border-color: var(--ct-primario-relleno); background: var(--ct-primario-suave); }
.hb-tiempo:focus-visible, .hb-fila:focus-visible, .hb-sector:focus-visible {
  outline: var(--ct-foco-grosor) solid var(--ct-foco);
  outline-offset: var(--ct-foco-separacion);
}

/* ── Nivel 2: cifra de portada, datos del plan y reparto del suelo ─────── */
.hb-cifra { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--ct-espacio-interfaz-3) var(--ct-espacio-interfaz-5); }
.hb-cifra p { margin: 0; }
.hb-cifra__numero {
  font-family: var(--ct-fuente-titular);
  font-size: calc(var(--ct-tipo-titulo-1-tamano) * 1.5);
  font-weight: var(--ct-peso-titular);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ct-tipo-titulo-1-tracking);
  line-height: .9;
  color: var(--ct-primario-texto);
}
.hb-cifra__texto { font-family: var(--ct-fuente-titular); font-size: var(--ct-tipo-interfaz-linea); font-weight: var(--ct-peso-titular-suave); line-height: 1.2; }
.hb-cifra__golpe { grid-column: 1 / -1; }

.hb-datos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ct-espacio-interfaz-2) var(--ct-espacio-interfaz-5); margin: 0; }
.hb-datos dt { color: var(--ct-texto-suave); }
.hb-datos dd { margin: 0; font-weight: var(--ct-peso-texto-medio); }

.hb-reparto { display: flex; gap: 2px; height: var(--ct-espacio-2); border-radius: var(--ct-radio-pildora); overflow: hidden; }
.hb-reparto > span { flex: 0 0 auto; width: var(--valor); min-width: var(--ct-espacio-interfaz-1); background: var(--hb-cat); }
.hb-reparto > span:last-child { flex: 1 1 auto; }
.hb-clases > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(5ch, auto);
  align-items: center;
  gap: var(--ct-espacio-interfaz-4);
  padding: var(--ct-espacio-interfaz-2) 0;
  border-bottom: 1px solid var(--ct-linea);
  font-variant-numeric: tabular-nums;
}
.hb-clases > li:last-child { border-bottom: 0; }
.hb-clases__ha { font-weight: var(--ct-peso-texto-fuerte); }
.hb-clases__pct { color: var(--ct-texto-suave); text-align: end; }

/* ── Oportunidades, pasos previos y niveles del servicio ───────────────── */
.hb-oportunidad {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--ct-espacio-interfaz-4);
  padding: var(--ct-espacio-interfaz-5);
  border: 1px solid var(--ct-borde);
  border-radius: var(--ct-radio-tarjeta);
  background: var(--ct-superficie);
  box-shadow: var(--ct-sombra-suave);
}
.hb-oportunidad__icono {
  display: grid;
  place-items: center;
  width: var(--ct-toque-minimo);
  height: var(--ct-toque-minimo);
  border-radius: var(--ct-radio-fila);
  background: var(--ct-primario-suave);
  color: var(--ct-primario-texto);
}
.hb-oportunidad h4 { font-size: var(--ct-tipo-interfaz-linea); line-height: 1.25; letter-spacing: 0; }
.hb-oportunidad p { margin: var(--ct-espacio-interfaz-1) 0 0; color: var(--ct-texto-suave); }
.hb-oportunidad .ct-boton { margin-top: var(--ct-espacio-interfaz-4); }
.hb-oportunidad .hb-oportunidad__fuente { margin-top: var(--ct-espacio-interfaz-3); font-size: var(--ct-tipo-interfaz-chip); }
.hb-oportunidad__nivel { display: block; margin-bottom: var(--ct-espacio-interfaz-1); color: var(--ct-primario-texto); font-size: var(--ct-tipo-interfaz-etiqueta); font-weight: var(--ct-peso-texto-fuerte); letter-spacing: var(--ct-tipo-interfaz-tracking-etiqueta); text-transform: uppercase; }

.hb-pasos { display: grid; gap: var(--ct-espacio-interfaz-1); margin: var(--ct-espacio-interfaz-3) 0 0; padding-inline-start: var(--ct-espacio-interfaz-6); }
.hb-pasos li::marker { font-weight: var(--ct-peso-texto-fuerte); }

.hb-niveles { display: grid; gap: var(--ct-espacio-interfaz-3); }
.hb-niveles li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--ct-espacio-interfaz-4); }
.hb-nivel {
  display: inline-grid;
  place-items: center;
  min-width: var(--ct-espacio-7);
  padding: var(--ct-espacio-interfaz-1) var(--ct-espacio-interfaz-3);
  border-radius: var(--ct-radio-fila);
  background: var(--ct-fondo-arena);
  font-size: var(--ct-tipo-interfaz-nota);
  font-weight: var(--ct-peso-texto-fuerte);
  letter-spacing: var(--ct-tipo-interfaz-tracking-etiqueta);
}

/* ── Cierre: llamada sobre la superficie verde, fuentes y firma ────────── */
.hb-llamada {
  display: grid;
  gap: var(--ct-espacio-interfaz-3);
  padding: var(--ct-espacio-interfaz-6) var(--ct-espacio-interfaz-6) var(--ct-espacio-interfaz-6);
  border-radius: var(--ct-radio-hoja);
  overflow: hidden;
}
.hb-llamada h3 { font-size: var(--ct-tipo-interfaz-subtitulo); line-height: 1.15; text-wrap: balance; }
.hb-llamada p { margin: 0; max-width: 46ch; }
/* el botón baja a la franja clara de la superficie: ahí no puede ir texto suelto */
.hb-llamada .ct-botones { margin-top: var(--ct-espacio-interfaz-5); }

.hb-fuentes { display: grid; gap: var(--ct-espacio-interfaz-3); color: var(--ct-texto-suave); font-size: var(--ct-tipo-interfaz-chip); }
.hb-fuentes > h3 { color: var(--ct-texto); }
.hb-fuentes ul { display: grid; gap: var(--ct-espacio-interfaz-1); margin: 0; padding-inline-start: var(--ct-espacio-interfaz-5); }
.hb-fuentes p { margin: 0; }
.hb-firma { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ct-espacio-interfaz-3) var(--ct-espacio-interfaz-5); padding-top: var(--ct-espacio-interfaz-5); border-top: 1px solid var(--ct-linea); color: var(--ct-texto-suave); font-size: var(--ct-tipo-interfaz-chip); }
.hb-firma p { margin: 0; }

@media (max-width: 420px) {
  .hb-cifra__numero { font-size: var(--ct-tipo-titulo-1-tamano); }
  .hb-tiempo__km { display: block; margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  button.hb-tiempo, button.hb-fila, button.hb-sector { transition: none; }
}