/* Mapa «Renta por sección censal» (Mapbox). Iframe para el CMS de El Confidencial.
   Diseño: Figma «Margaret-2026» (grids: body caja normal 662 px en escritorio, ancho completo en móvil;
   escala tipográfica de gráficos; 04. Controles interactivos; 05. Leyendas) y el gráfico de salarios revisado
   por Diseño (datos.elconfidencial.com/salarios_vs_precios_trimestral). Escritorio a partir de 560 px. */

@font-face{font-family:"Confi Sans";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/ConfiSans-400-Regular.woff2) format("woff2")}
@font-face{font-family:"Confi Sans";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/ConfiSans-500-Medium.woff2) format("woff2")}
@font-face{font-family:"Confi Sans";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/ConfiSans-700-Bold.woff2) format("woff2")}

:root{
  --texto:#121212;       /* neutral/900 */
  --texto-2:#737373;     /* neutral/400 */
  --borde:#BFC7CE;       /* acero frío: bordes de botones, inputs, zoom y ficha */
  --hover:#D4D4D4;       /* neutral/200 */
  --mate:#EFEFEF;        /* sin datos */
  --blanco:#FFFFFF;
  --azul:#0F2124;        /* azul marca */
  --ambar:#CC7A4B;
  --fuente:"Confi Sans",Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--blanco)}
body{color:var(--texto);font-family:var(--fuente);font-size:15px;container-type:inline-size}
button:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}

/* Sin max-width: el iframe ocupa la caja normal (662 px) en escritorio y todo el ancho en móvil */
.graf{width:100%;padding:10px 0 14px;display:flex;flex-direction:column;gap:24px;font-variant-numeric:tabular-nums}

/* Cabecera */
.g-tit{margin:0;font-size:22px;line-height:1.2;font-weight:700;text-wrap:balance}
.g-desc{margin:0;font-size:18px;line-height:1.4;min-height:2.8em}

/* Filtros / toggle: mismo ancho a lo ancho del gráfico, activo en negro */
.botones{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.botones button{font:500 15px/1.3 var(--fuente);height:40px;padding:0 8px;border:1px solid var(--borde);border-radius:2px;background:var(--blanco);color:var(--texto);cursor:pointer;transition:border-color .15s}
.botones button:hover:not([aria-pressed="true"]){border-color:var(--texto-2)}
.botones button[aria-pressed="true"]{background:var(--texto);border-color:var(--texto);color:var(--blanco);cursor:default}

/* Leyenda de rango escalonada (Margaret 05 · Familia 2): barra por tramos + valores de corte + extremos */
/* Leyenda vertical dentro del mapa (Margaret 05 · type=vertical): caja #F6F6F6, barra de 8 px a la derecha,
   máximo arriba. Escalonada en 8 tramos con el valor de cada corte a la izquierda. */
.ley-v{position:absolute;right:8px;bottom:28px;z-index:2;height:200px;background:rgba(246,246,246,.92);border-radius:2px;padding:8px;display:flex;gap:6px;pointer-events:none}
.ley-v__etqs{display:flex;flex-direction:column;justify-content:space-between}
.ley-v__etq{font-size:12px;line-height:1.3;text-align:right;white-space:nowrap}
.ley-v__etq strong{display:block;font-weight:700}
.ley-v__flechas{position:relative;width:6px}
.ley-v__flecha{position:absolute;left:0;opacity:.8}
.ley-v__flecha--arriba{top:2px;fill:var(--azul)}
.ley-v__flecha--abajo{bottom:2px;fill:#805134}
.ley-v__barra{width:8px}

/* Variante móvil: leyenda horizontal encima del mapa. Barra de menos a más; debajo, «Más pobre» a la izquierda y
   «Más rico» a la derecha, con las flechas de 2023 giradas hacia cada extremo */
.ley-v.ley-h{position:relative;right:auto;bottom:auto;height:auto;background:none;padding:0;flex-direction:column;gap:4px}
.ley-h .ley-v__barra{order:-1;width:100%;height:8px}
.ley-h .ley-v__etqs{order:1;flex-direction:row-reverse;justify-content:space-between}   /* «Más pobre» a la izquierda */
.ley-h .ley-v__etq{font-size:13px}
.ley-h .ley-v__etq strong{display:inline}
.ley-h .ley-v__min{text-align:left}
/* Flechas en su propia línea, entre la barra y las etiquetas: ← sobre «Más pobre» y → sobre «Más rico» (giradas 90º;
   cada SVG mide 6 × 25 y, girado, ocupa 25 × 6 alrededor de su centro) */
.ley-h .ley-v__flechas{order:0;position:relative;width:auto;height:8px}
.ley-h .ley-v__flecha{top:-8.5px;bottom:auto;transform:rotate(90deg)}
.ley-h .ley-v__flecha--abajo{left:9.5px}
.ley-h .ley-v__flecha--arriba{left:auto;right:9.5px}

/* Mapa */
#mapa{width:100%;height:600px;position:relative}

/* Pie */
.g-pie{margin:0;font-size:13px;line-height:1.3;color:var(--texto-2);text-align:right}
.g-pie strong{font-weight:700;color:var(--texto)}

/* --- Controles de Mapbox. Zoom: control estándar de Mapbox (grupo blanco de 29 px, esquinas de 4 px y sombra
   suave), como en el mapa de las viviendas (elconfidencial.com, 1-7-2026), pero con las esquinas de 2 px de
   Margaret y el mismo borde que el buscador (1 px acero frío, sin sombra). Tamaño y hover, los de Mapbox. Buscador con lupa (Margaret 04). --- */
.mapboxgl-ctrl.mapboxgl-ctrl-group{border-radius:2px;box-shadow:none;border:1px solid var(--borde)}   /* mismo borde que el buscador, sin sombra */
.mapboxgl-ctrl-group button+button{border-top:1px solid var(--borde)}
.mapboxgl-ctrl-group button:first-child,.mapboxgl-ctrl-group button:first-child:focus{border-radius:2px 2px 0 0}
.mapboxgl-ctrl-group button:last-child,.mapboxgl-ctrl-group button:last-child:focus{border-radius:0 0 2px 2px}
.mapboxgl-ctrl-geocoder{font-family:var(--fuente);width:240px;min-width:240px;max-width:240px;height:32px;border:1px solid var(--borde);border-radius:2px;box-shadow:none;background:var(--blanco)}
.mapboxgl-ctrl-geocoder--input{font:400 13px var(--fuente) !important;height:30px;padding:0 36px 0 12px !important;color:var(--texto)}
.ctrl-canarias button{font:400 13px var(--fuente);color:var(--texto);height:32px;padding:0 12px;background:var(--blanco);border:1px solid var(--borde);border-radius:2px;cursor:pointer}
.mapboxgl-ctrl.ctrl-canarias button:not(:disabled):hover{background-color:#F2F2F2}
/* Hover como el de los botones de zoom: Mapbox pone negro al 5 % transparente sobre su fondo blanco; aquí el botón no
   tiene grupo blanco detrás, así que se usa el resultado opaco (#F2F2F2) y con más especificidad que la regla de Mapbox */
.mapboxgl-ctrl-geocoder--input::placeholder{color:var(--texto-2);opacity:1}
.mapboxgl-ctrl-geocoder--icon-search{left:auto;right:9px;top:7px;width:16px;height:16px;fill:var(--texto)}
.mapboxgl-ctrl-geocoder--button{right:30px;top:4px;background:transparent}
.mapboxgl-ctrl-geocoder--icon-loading{right:32px;top:6px}
.mapboxgl-ctrl-geocoder .suggestions{border-radius:2px;box-shadow:none;border:1px solid var(--borde);font-size:14px;top:calc(100% + 4px)}
.mapboxgl-ctrl-geocoder .suggestions>.active>a,.mapboxgl-ctrl-geocoder .suggestions>li>a:hover{background:var(--mate)}
/* Buscador arriba a la derecha y, debajo, el zoom alineado a la derecha (como en 2023) */
.mapboxgl-ctrl-top-right{display:flex;flex-direction:column;align-items:flex-end}
.mapboxgl-ctrl-top-right .mapboxgl-ctrl{margin:8px 8px 0 0}

/* --- Ficha (popup), como en el mapa de las viviendas: blanca, sin borde, sombra difusa, 220 px y textos pequeños --- */
.mapboxgl-popup{font-family:var(--fuente);max-width:220px !important;z-index:1000}
.mapboxgl-popup-content{box-sizing:border-box;width:220px;background:#fff;filter:drop-shadow(0 1px 4px rgba(0,0,0,.15));box-shadow:none;border-radius:0;padding:8px;pointer-events:none}
.mapboxgl-popup-tip{display:none}

.widget__header{padding-bottom:5px;margin-bottom:8px;border-bottom:1px dotted rgba(0,0,0,.4);font-size:12px;line-height:1.4}
.widget__title{font-weight:700;color:#000}
.widget__subtitle{font-weight:400;color:rgba(0,0,0,.5)}
.tooltip_square{display:inline-block;width:8px;height:8px;margin-right:4px;vertical-align:middle}
.widget__value--nodata{font-size:11px;font-weight:500;line-height:1.3;color:rgba(0,0,0,.55)}

.bloque{display:flex;flex-direction:column;gap:2px;margin-top:6px}
/* Etiqueta y valor en la misma línea, el valor a la derecha (como las filas de percentiles) */
.bloque--fila{flex-direction:row;justify-content:space-between;align-items:baseline;gap:8px}
.bloque:first-child{margin-top:0}
.bloque__etq{font-size:11px;font-weight:500;line-height:1.3;color:rgba(0,0,0,.55)}
.bloque__valor{font-size:12px;font-weight:700;line-height:1.3;color:#000}
.bloque--par{gap:1px}
.bloque__sub{display:flex;justify-content:space-between;gap:8px;padding-left:4px;font-size:11px;font-weight:500;line-height:1.35;color:#000}
.bloque__sub strong{font-size:12px;font-weight:700}
.bloque__frase{font-size:11px;font-weight:500;line-height:1.35;color:#000}
.bloque__frase strong{font-weight:700}

/* Evolución en la ficha */
.bloque__evolucion{margin-top:4px}
.lineChartSVG{display:block;overflow:visible}
.lineChartSVG path{fill:none;stroke:#101010;stroke-width:1.5px;stroke-linejoin:round}
.lineChartSVG circle{fill:#101010}
.chart__labels{display:flex;justify-content:space-between;font-size:11px;font-style:italic;font-weight:500;line-height:1.3;color:rgba(0,0,0,.55);margin-top:2px}

/* Percentiles en la ficha: barras finas de 3 px (oscura sobre gris claro) y textos en cursiva */
.perc{margin-top:8px}
.perc__cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.perc__cab .bloque__valor{font-size:11px;font-style:italic;font-weight:500}
.perc__barra{position:relative;height:3px;background:#ccc;margin-top:4px}
.perc__valor{position:absolute;left:0;top:0;bottom:0;background:#101010}
.perc__mediana{position:absolute;left:50%;top:-3px;width:1px;height:9px;background:#000}
.perc__ext{display:flex;justify-content:space-between;font-size:10px;font-style:italic;line-height:1.3;color:rgba(0,0,0,.55);margin-top:3px}

/* Móvil: 4 px de margen lateral, botones de 48 px, controles de mapa LG (40 px) */
@container (max-width:559px){
  .graf{padding:10px 4px 14px;gap:16px}
  .botones button{height:48px}
  #mapa{height:480px}
  .ley-v{height:164px}
  .ley-v__etq{font-size:11px}
  .mapboxgl-ctrl-geocoder{height:40px;width:calc(100cqw - 8px - 16px);min-width:0;max-width:none}
  .mapboxgl-ctrl-geocoder--input{height:38px;font-size:16px !important}
  .ctrl-canarias button{height:40px;font-size:15px}
  .mapboxgl-ctrl-geocoder--icon-search{top:11px}
  .mapboxgl-ctrl-geocoder--button{top:8px}
}
/* Pautas de Diseño (19-10-2026), solo móvil: misma escala que en escritorio y nunca menos de 13 px.
   Leyenda 15, ficha 14 (título) / 13 (filas), botones 14 por debajo de 420 px y 13 por debajo de 380 */
@container (max-width:559px){
  .ley-h .ley-v__etq{font-size:15px}
  .mapboxgl-popup{max-width:240px !important}
  .mapboxgl-popup-content{width:240px}
  .widget__header{font-size:14px}
  .widget__value--nodata,.bloque__etq,.bloque__valor,.bloque__sub,.bloque__sub strong,.bloque__frase,
  .chart__labels,.perc__cab .bloque__valor,.perc__ext{font-size:13px}
}
@container (max-width:419px){
  .botones button{font-size:14px;padding:0 4px}
}
@container (max-width:379px){
  .botones button{font-size:13px}
}