/* =========================================================================
   REDFUNE · pages/observatorio.css — solo observatorio.html (prefijo ob-)
   Usa el contrato de clases de styles.css (§4 de DISENO.md): .page-head,
   .kicker, .trust-panel, .table-wrap/.data-table, .bars, .cem-note,
   .doc-note, .cta-card, .page-grid. No las redefine; aquí solo va el
   espaciado y lo propio de la página (cifras, filetes de sección, controles),
   siempre acotado a los contenedores de esta página (#obs…, .ob-…).
   ========================================================================= */

/* ---------- Cabecera ---------- */
.ob-head{margin-bottom:var(--s-7)}
.ob-head .t-lead{max-width:40rem}
.ob-head .t-lead strong{white-space:nowrap}          /* «3.700 €» y «desde 1.850 €» no se parten */

/* ---------- Cifras: franja bajo filete de tinta, sin cajas ---------- */
.ob-figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
@media (min-width:1024px){.ob-figures{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6)}}
.ob-figure{container-type:inline-size;min-width:0;padding-top:var(--s-3);border-top:1px solid var(--ink)}
/* 15cqi (no 13): a 390 px la cifra queda en ~25 px y «desde 1.850 €» sigue cabiendo en su columna (≈90 %) */
.ob-figure-num{margin:0;font-family:var(--f-serif);font-weight:500;line-height:1.05;letter-spacing:0;color:var(--cipres);
  white-space:nowrap;font-variant-numeric:tabular-nums lining-nums;
  font-size:1.625rem;font-size:min(2.25rem,15cqi)}
.ob-figure-label{margin:var(--s-2) 0 0;font-size:1rem;line-height:1.45;color:var(--ink-2)}

/* Origen de los datos: nota de confianza a medida de lectura */
.ob-source{margin-top:var(--s-6);max-width:var(--doc)}

/* ---------- Titulares de sección: filete fino en tinta ---------- */
.ob-h{margin:var(--s-7) 0 var(--s-4);padding-top:var(--s-4);border-top:0}
@media (min-width:1024px){.ob-h{margin-top:var(--s-8)}}

/* ---------- Bloques de datos (tablas y gráficos) ---------- */
.ob-block{min-width:0}
.ob-note{margin:var(--s-3) 0 0;max-width:var(--doc)}
.ob-note--tight{margin-top:var(--s-1)}
.obs-count{margin:var(--s-3) 0 0}

/* Buscador + zona */
.obs-controls{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--s-4) var(--s-5);align-items:end;
  max-width:var(--doc);margin-bottom:var(--s-5)}
@media (max-width:700px){.obs-controls{grid-template-columns:minmax(0,1fr)}}

/* ---------- Tablas ---------- */
/* Tabla ordenable: la cabecera activa ya va en ciprés (F); hover discreto */
#obsTable th[data-sort]:hover{color:var(--cipres)}
#obsTable th[data-sort]:hover .sort-icon{color:var(--cipres)}
/* En la columna activa ya hay un espacio de texto antes del glifo ▲/▼: sin margen extra el hueco iguala al de ⇅ */
#obsTable th[aria-sort] .sort-icon{margin-left:0}
/* Foco de teclado de las cabeceras ordenables: patrón GOV.UK en styles.css (.data-table th[role=button]) */
/* La zona (columna fija en móvil) no se parte: «Álava (Vitoria)», «Vizcaya (Bilbao)» */
#obsTable td:first-child{white-space:nowrap}

/* Columnas de entierro: el icono ⓘ cuelga en el margen derecho de la celda, así los importes
   con y sin nota (y el «—») quedan alineados por la derecha. 1.25em = icono (1em) + espacio previo. */
#obsTable :is(th,td):nth-child(4),
#obsLocalTable :is(th,td):nth-child(n+5){padding-right:calc(.6rem + 1.25em)}
.ob-block .data-table td .cem-note{margin-right:-1.25em}

/* Bordes separados, columna fija de móvil, thead fijo bajo la cabecera fija: styles.css (§4.18, §4.19) */

@media (max-width:899px){
  /* Localidades en móvil: cabeceras numéricas en dos líneas y localidad con anchura mínima,
     para que al menos una columna de precio quede a la vista sin desplazar la tabla */
  #obsLocalTable thead th{white-space:normal;text-wrap:balance}
  #obsLocalTable td:nth-child(2)>strong{display:inline-block;min-width:7.5rem;vertical-align:top}   /* sube el min-content de la columna (width/min-width en td no lo hacen) */
}

/* §8.3: ▲ ▼ ⓘ recortados (siguen en innerText) por la regla .glyph de styles.css */

/* ---------- Gráficos de barras ---------- */
.ob-block>.bars:first-child{margin-top:0}
#obsRanking>.bars,#obsConceptos>.bars,#obsRanking>.ob-note,#obsConceptos>.ob-note{max-width:var(--doc)}
/* Ranking: todas son tarifas RedFune; el semáforo (is-amber / is-clay) se neutraliza (la lógica de cls no se toca) */
#obsRanking .bar-fill.is-amber,#obsRanking .bar-fill.is-clay{background:var(--cipres-l)}
@media (forced-colors:active){#obsRanking .bar-fill.is-amber,#obsRanking .bar-fill.is-clay{background:CanvasText}}

/* Ranking de 36 zonas desde 640 px: gráfico de una línea por zona (zona | barra | importe),
   filas con filete fino como las tablas de arriba. Mismo marcado de .bars; solo cambia la colocación. */
@media (min-width:640px){
  #obsRanking>.bars{gap:0;border-top:1px solid var(--rule)}
  #obsRanking .bar-row{display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr) 7.5rem;align-items:center;
    column-gap:var(--s-4);padding:.4rem 0;border-bottom:1px solid var(--rule)}
  #obsRanking .bar-label{display:contents}
  #obsRanking .bar-label::after{content:none}
  #obsRanking .bar-label>span{grid-area:1/1}
  #obsRanking .bar-label>strong{grid-area:1/3;text-align:right}
  #obsRanking .bar-track{grid-area:1/2}
}

/* Desde 1024 px los gráficos ocupan los 2/3 de la retícula y su nota pasa al margen derecho,
   en la misma columna que la tarjeta final (.ob-closing usa .page-grid) */
@media (min-width:1024px){
  #obsRanking,#obsConceptos{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);column-gap:var(--s-8);align-items:start}
  #obsRanking>.bars,#obsConceptos>.bars{max-width:none}
  #obsRanking>.ob-note,#obsConceptos>.ob-note{margin:0;padding-top:var(--s-3);border-top:1px solid var(--rule)}
}

/* ---------- Cierre: metodología (2/3) + siguiente paso (1/3) ---------- */
.ob-closing{margin-top:var(--s-7)}
@media (min-width:1024px){.ob-closing{margin-top:var(--s-8)}}
.ob-closing>.doc-note{margin-top:0}
.ob-method>p{margin:0}
.ob-method>p+p{margin-top:var(--s-3)}
.ob-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
.ob-actions>.btn{margin-top:0}
@media (max-width:639px),(min-width:1024px){.ob-actions>.btn{flex:1 1 100%}}

/* ---------- Mapa de precios por zona (assets/js/mapa-precios.js) ----------
   Mapa de teselas: una tesela por provincia o isla, en una cuadrícula de 11 × 9 que aproxima la
   geografía; Canarias, desplazada en un recuadro. Escala de grafito:
   más claro = más barato, más oscuro = más caro. Texto oscuro en 1-2 y blanco
   en 3-5 (contraste mínimo 4,6:1). La leyenda y la lectura conservan los importes. */
#obsMapa{--map-1:#D9D9D9;--map-2:#B2B2B2;--map-3:#757575;--map-4:#4B4B4B;--map-5:#242424}
.ob-map-lead{max-width:var(--doc);margin:0 0 var(--s-5);color:var(--ink-2)}

/* Orden en el DOM: leyenda, mapa, lectura. En móvil van apiladas; desde 1024 el mapa ocupa los 2/3
   y leyenda + lectura pasan al margen derecho, como las notas del ranking */
.ob-map{display:grid;gap:var(--s-5);grid-template-areas:"legend" "fig" "read"}
.ob-map>*{min-width:0}
.ob-map-legend{grid-area:legend}
.ob-map-fig{grid-area:fig}
.ob-map-read{grid-area:read;max-width:var(--measure);padding-top:var(--s-3);border-top:1px solid var(--rule)}
@media (min-width:1024px){
  .ob-map{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:var(--s-8);row-gap:var(--s-6);
    grid-template-areas:"fig legend" "fig read";align-items:start}
  .ob-map-legend{padding-top:var(--s-3);border-top:1px solid var(--rule)}
}

/* Leyenda: muestra cuadrada + importe; de claro a oscuro (dos columnas en móvil, lista en el margen) */
.ob-legend-title{margin:0 0 var(--s-3);font-size:1rem;font-weight:600;line-height:1.3}
.ob-legend-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,max-content);
  grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:var(--s-2) var(--s-6);font-size:.9375rem;line-height:1.3;
  font-variant-numeric:tabular-nums lining-nums}
.ob-legend-list>li{display:flex;align-items:center;gap:var(--s-2);white-space:nowrap}
@media (min-width:1024px){.ob-legend-list{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}}
@media (max-width:359px){.ob-legend-list{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}}
.ob-sw{flex:none;width:1.25rem;height:1.25rem}
.ob-sw.is-none{border:1px solid var(--rule)}            /* la muestra suelta necesita borde; la tesela ya lleva su abreviatura */

/* Teselas: botones cuadrados con 2 px de papel entre ellas (sin bordes); posiciones en style (grid-area) */
.ob-tiles{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:2px;max-width:46rem}
.ob-tile{container-type:inline-size;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;aspect-ratio:1;min-width:0;margin:0;padding:0;border:0;border-radius:0;
  font:600 .9375rem/1.1 var(--f-sans);color:var(--ink);text-align:center;cursor:pointer;
  font-variant-numeric:tabular-nums lining-nums;-webkit-tap-highlight-color:transparent}
.ob-tile-k{letter-spacing:0;font-size:min(.9375rem,42cqi)}
.ob-tile.is-3 .ob-tile-k{font-size:min(.8125rem,35cqi)}
@container (min-width:3.5rem){.ob-tile.is-3 .ob-tile-k{font-size:1rem}}
.ob-tile-v{display:none;font-weight:500}
/* Solo hay sitio para el importe (con aire a los lados) cuando la tesela mide ≥56 px (escritorio y tableta); en móvil, al tocar */
@container (min-width:3.5rem){.ob-tile-v{display:block}.ob-tile-k{font-size:1rem}}

#obsMapa .is-c1{background:var(--map-1)}
#obsMapa .is-c2{background:var(--map-2)}
#obsMapa .is-c3{background:var(--map-3)}
#obsMapa .is-c4{background:var(--map-4)}
#obsMapa .is-c5{background:var(--map-5)}
.ob-tile.is-c3,.ob-tile.is-c4,.ob-tile.is-c5{color:#fff}
#obsMapa .is-ask{background:var(--paper);border:2px solid var(--cipres)}
.ob-tile.is-ask{color:var(--cipres)}
#obsMapa .is-none{background:var(--paper-2)}
.ob-tile.is-none{color:var(--ink-3);font-weight:500}
/* Ceuta y Melilla: un poco más abajo, separadas del litoral andaluz */
.ob-tile.is-low{margin-top:40%}

/* Estados: borde de tinta por fuera (sobre el hueco de papel) y anillo interior claro para que se vea
   también sobre las teselas oscuras. Encima = 2 px; seleccionada = 3 px; foco = tinta + gris claro */
.ob-tile:hover,.ob-tile.is-zone{z-index:1;outline:2px solid var(--ink);outline-offset:0}
.ob-tile[aria-pressed="true"]{z-index:2;outline:3px solid var(--ink);outline-offset:0;box-shadow:inset 0 0 0 2px var(--sheet)}
.ob-tile:focus-visible{z-index:3;outline:3px solid var(--ink);outline-offset:0;box-shadow:inset 0 0 0 3px var(--focus)}

/* Recuadro de Canarias: sus teselas miden lo mismo que las de la península (el margen negativo
   compensa el relleno y el filete) */
.ob-inset{position:relative;align-self:start;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;
  margin:-5px;padding:4px;border:1px solid var(--rule-ui)}
.ob-inset-cap{position:absolute;left:-1px;bottom:100%;margin:0 0 var(--s-1);font-size:.9375rem;line-height:1.2;color:var(--ink-2);white-space:nowrap}

/* Etiqueta flotante junto a la tesela activa: hoja blanca con filete de tinta, sin sombra.
   Posición (left/top) en style: la calcula mapa-precios.js */
.ob-map-fig{position:relative}
.ob-tip{position:absolute;z-index:5;display:grid;max-width:14rem;padding:.35rem .6rem;background:var(--sheet);border:1px solid var(--ink);
  border-radius:var(--radius-sm);pointer-events:none;font-size:.9375rem;line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.ob-tip[hidden]{display:none}
.ob-tip-n{color:var(--ink-2)}
.ob-tip-v{color:var(--ink);font-weight:600}

/* Lectura de la zona activa */
.ob-read-name{margin:0;font-family:var(--f-serif);font-weight:600;font-size:1.3125rem;line-height:1.25;color:var(--ink)}
.ob-read-sub{font-family:var(--f-sans);font-weight:400;font-size:.9375rem;color:var(--ink-2)}
.ob-read-num{margin:var(--s-2) 0 0;font-family:var(--f-serif);font-weight:500;font-size:2.25rem;line-height:1.05;letter-spacing:0;
  color:var(--cipres);white-space:nowrap}
.ob-read-lbl{margin:var(--s-1) 0 0;font-size:1rem;color:var(--ink-2)}
.ob-read-ledger{margin-top:0;font-size:1rem}
.ob-read-num+.ob-read-lbl+.ob-read-ledger{margin-top:var(--s-3)}
.ob-read-go{min-height:44px;margin-top:var(--s-2);text-align:left}
.ob-read-state{margin:var(--s-2) 0 0}
.ob-read-hint{margin:var(--s-4) 0 0;font-size:.9375rem;line-height:1.5;color:var(--ink-2)}

/* Alto contraste: se conserva la escala (es el dato) y cada tesela lleva borde del sistema */
@media (forced-colors:active){
  .ob-tile,.ob-sw{forced-color-adjust:none;border:1px solid CanvasText}
  .ob-tile[aria-pressed="true"],.ob-tile:focus-visible{outline-color:Highlight}
}