/* Gráfico «Salarios frente a precios» (D3). Iframe para el CMS de El Confidencial.
   Diseño: Figma «Infografía 2026-27», página «Datos», frames D-salarios-precios (662) y M-salarios-precios (440).
   Escritorio a partir de 560 px de ancho; por debajo, móvil. Separaciones en múltiplos de 8. */
@font-face{font-family:"Confi Sans";font-weight:400;font-style:normal;font-display:swap;src:url(ConfiSans-400-Regular.woff2) format("woff2")}
@font-face{font-family:"Confi Sans";font-weight:500;font-style:normal;font-display:swap;src:url(ConfiSans-500-Medium.woff2) format("woff2")}
@font-face{font-family:"Confi Sans";font-weight:700;font-style:normal;font-display:swap;src:url(ConfiSans-700-Bold.woff2) format("woff2")}

:root{
  --azul:#0F2124;        /* salario medio */
  --ambar:#CC7A4B;       /* serie de precios elegida */
  --acero:#99A2AB;       /* línea de base 100 */
  --borde:#BFC7CE;       /* rejilla, bordes de botones y ficha */
  --banda:#F9F9F9;       /* fondo desde la llegada de Pedro Sánchez */
  --texto:#121212;
  --texto-2:#737373;
  --blanco:#FFFFFF;
  --fuente:"Confi Sans",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{background:var(--blanco)}
body{margin:0;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:32px;font-variant-numeric:tabular-nums}

/* Cabecera: título, entradilla y leyenda */
.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{display:flex;flex-wrap:wrap;gap:8px 16px;margin:4px 0 0;padding:0;list-style:none;font-size:15px;line-height:1.4}
.leyenda li{display:flex;align-items:center;gap:8px}
.leyenda i{display:inline-block;width:16px;height:0;border-top:2px solid}
.leyenda .l-sal i{border-color:var(--azul)}
.leyenda .l-otro i{border-color:var(--ambar)}

/* Botones: todos del mismo ancho a lo ancho del gráfico; activo en negro */
.g-ctrl{display:flex;flex-direction:column;gap:8px}
.g-ctrl-etq{font-size:15px;line-height:1.3;font-weight:700}
.botones{display:grid;grid-template-columns:repeat(5,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)}

.g-resumen{margin:0;font-size:16px;line-height:1.4;min-height:1.4em}
.g-resumen strong{font-weight:700}
.g-resumen .c-sal{color:var(--azul)}
.g-resumen .c-otro{color:#A9603A} /* ámbar oscurecido para texto: contraste suficiente sobre blanco */

/* Gráfico */
.lienzo{position:relative}
.lienzo svg{display:block;width:100%;overflow:visible}
.lienzo text{font-family:var(--fuente)}
.banda{fill:var(--banda)}
.eje text{font-size:13px;fill:var(--texto-2)}
.eje .domain{display:none}
.eje-y .tick line{stroke:var(--borde);stroke-dasharray:2 2}
.eje-x .tick line{stroke:var(--texto-2)}
.eje-x .domain{display:block;stroke:var(--texto-2)}
.rejilla-x line{stroke:var(--borde);stroke-dasharray:2 2}
.base100{stroke:var(--acero);stroke-width:1}
.marca line{stroke:var(--texto);stroke-width:1}
.marca text{font-size:13px;font-weight:700;font-style:italic;fill:var(--texto)}
.linea{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.linea-sal{stroke:var(--azul)}
.linea-otro{stroke:var(--ambar)}

/* Ficha al pasar el ratón o tocar */
.tip{position:absolute;pointer-events:none;width:182px;background:var(--blanco);border:1px solid var(--borde);border-radius:2px;padding:8px 8px 12px;z-index:2}
.tip .t{font-size:14px;line-height:1.3;font-weight:700;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--borde)}
.tip .r{display:flex;flex-direction:column;gap:2px}
.tip .r+.r{margin-top:8px}
.tip .e{display:flex;align-items:center;gap:4px;font-size:13px;line-height:1.3;color:var(--texto-2)}
.tip .e i{display:inline-block;width:8px;height:8px;flex:none}
.tip .v{font-size:14px;line-height:1.3;font-weight:700}

/* Nota y fuente */
.g-pieblock{display:flex;flex-direction:column;gap:16px}
.g-nota{margin:0 0 0 auto;max-width:400px;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: 4 px de margen lateral, botones de 48 px en dos filas (3 + 2) a todo el ancho */
@container (max-width:559px){
  .graf{padding:10px 4px 14px}
  .botones{grid-template-columns:repeat(6,1fr)}
  .botones button{height:48px;grid-column:span 2}
  .botones button:nth-child(n+4){grid-column:span 3}
  .g-nota{max-width:300px}
}

/* Móviles estrechos (menos de 420 px): botones a 14 px y con menos margen para que el texto no salte de línea */
@container (max-width:419px){
  .botones button{font-size:14px;padding:0 4px}
}
@container (max-width:379px){
  .botones button{font-size:13px}
}