/* Gráfico de barras «El salario medio real en los países de la OCDE». Iframe para el CMS de El Confidencial.
   Diseño: Figma «Infografía 2026-27», página «Datos», frames D-salarios-ocde (662) y M-salarios-ocde (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;        /* media de la OCDE */
  --ambar:#CC7A4B;       /* España */
  --acero-frio:#BFC7CE;  /* resto de países, rejilla, bordes */
  --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:4px}
.leyenda i{display:inline-block;width:8px;height:8px}
.c-esp{background:var(--ambar)}
.c-ocde{background:var(--azul)}
.c-resto{background:var(--acero-frio)}

/* Año inicial: tres botones del mismo ancho a lo ancho del gráfico; activo en negro */
.g-ctrl{display:flex;flex-direction:column;gap:8px}
.ctrl-etq{font-size:15px;line-height:1.3;font-weight:700}
.atajos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.atajos button{font:500 15px/1.3 var(--fuente);height:40px;padding:0 8px;border:1px solid var(--acero-frio);border-radius:2px;background:var(--blanco);color:var(--texto);cursor:pointer;transition:border-color .15s}
.atajos button:hover:not([aria-pressed="true"]){border-color:var(--texto-2)}
.atajos button[aria-pressed="true"]{background:var(--texto);border-color:var(--texto);color:var(--blanco)}

/* Barras */
.lienzo{position:relative}
.lienzo svg{display:block;width:100%;overflow:visible}
.lienzo text{font-family:var(--fuente)}
.eje text{font-size:13px;fill:var(--texto-2)}
.eje .domain{display:none}
.eje .tick line{stroke:var(--acero-frio);stroke-dasharray:2 2}
.cero{stroke:var(--texto);stroke-width:1}
.barra{fill:var(--acero-frio)}
.barra.esp{fill:var(--ambar)}
.barra.ocde{fill:var(--azul)}
.nombre{font-size:14px;fill:var(--texto)}
.nombre.dest{font-weight:700}

/* Ficha al pasar el ratón o tocar una fila */
.tip{position:absolute;pointer-events:none;width:182px;background:var(--blanco);border:1px solid var(--acero-frio);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(--acero-frio)}
.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}

.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 y botones de 48 px */
@container (max-width:559px){
  .graf{padding:10px 4px 14px}
  .atajos button{height:48px}
  .nombre{font-size:13px}
}

/* 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){
  .atajos button{font-size:14px;padding:0 4px}
}
@container (max-width:379px){
  .atajos button{font-size:13px}
}