/* «Dónde vive la población de cada tramo de renta» (D3). Iframe para el CMS de El Confidencial.
   Estética del gráfico de salarios revisado por Diseño y Figma Margaret-2026 (body caja normal 662 px).
   Escritorio a partir de 560 px de ancho; por debajo, móvil. */
@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;
  --texto-2:#737373;
  --borde:#BFC7CE;
  --resto:#D2D8DD;      /* comunidades no destacadas */
  --banda:#F9F9F9;
  --blanco:#FFFFFF;
  --ambar:#CC7A4B;
  --fuente:"Confi Sans",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin: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}

.graf{padding:10px 0 14px;display:flex;flex-direction:column;gap:24px;font-variant-numeric:tabular-nums}
.g-cab{display:flex;flex-direction:column;gap:12px}
.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}

/* Leyenda: comunidades destacadas (pulsables) */
.leyenda{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0;padding:0;list-style:none;font-size:15px;line-height:1.4}
.leyenda li{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;transition:opacity .15s}
.leyenda li i{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none}
.leyenda li.apagada{opacity:.35}
.leyenda li.resto{cursor:default}

/* Gráfico */
.lienzo{position:relative}
.lienzo svg{display:block;width:100%;overflow:visible}
.lienzo text{font-family:var(--fuente)}
.fila-tit{font-size:15px;font-weight:700;fill:var(--texto)}
.fila-tot{font-size:14px;fill:var(--texto-2)}
.banda{fill:var(--banda)}
.eje text{font-size:13px;fill:var(--texto-2)}
.eje .domain{display:none}
.eje .tick line{stroke:var(--borde);stroke-dasharray:2 2}
.eje-base{stroke:var(--texto-2);stroke-width:1}   /* línea base de cada eje */
.seg{cursor:pointer;transition:opacity .15s}
.seg.apagado{opacity:.15}
.seg.resto{stroke:#BFC7CE;stroke-width:.5}   /* comunidades del resto: mismo gris, separadas */
.etq-seg{font-size:13px;font-style:italic;fill:var(--texto);opacity:.8;pointer-events:none}
.punto{stroke:var(--blanco);stroke-width:1;cursor:pointer;transition:opacity .15s}
.punto.resto{stroke:#99A2AB;stroke-width:.6}
.punto.apagado{opacity:.15}
.etq{font-size:13px;font-weight:500;fill:var(--texto);paint-order:stroke;stroke:var(--blanco);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.etq .v{font-weight:400;fill:var(--texto-2)}

/* Ficha */
.tip{position:absolute;pointer-events:none;width:200px;background:var(--blanco);border:1px solid var(--borde);border-radius:2px;padding:8px 8px 10px;z-index:2}
.tip .t{font-size:14px;line-height:1.3;font-weight:700;padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid var(--borde)}
.tip .t span{font-weight:400;color:var(--texto-2)}
.tip .v{font-size:14px;line-height:1.3;font-weight:700}
.tip .e{font-size:13px;line-height:1.35;color:var(--texto-2);margin-top:4px}

/* Nota y fuente */
.g-pieblock{display:flex;flex-direction:column;gap:16px}
.g-nota{margin:0 0 0 auto;max-width:440px;font-size:13px;line-height:1.3;color:var(--texto-2);font-style:italic;text-align:right}
.g-nota strong{font-weight:700}
.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)}

/* Móvil */
@container (max-width:559px){
  .graf{padding:10px 4px 14px;gap:16px}
  .g-desc{font-size:16px}
  .leyenda{font-size:14px;gap:6px 12px}
  .g-nota{max-width:300px}
}