/* «¿Cómo va el reparto de escaños en cada provincia?» (iframe del Observatorio 29N).
   Diseño 6-nov (Figma elecciones-29N › 03-sondeos › D-05-provincias / M-05-provincias-cuadrado / tooltip · 05-provincias):
   cartograma con un cuadrado por escaño en la posición de cada provincia; sólidos = escaño muy probable, rayados = en disputa.
   Escritorio a partir de 560 px (lienzo de 1152, se escala); por debajo, móvil (lienzo de 432, se escala). Los textos no se escalan.

   ===== AJUSTES DE DISEÑO: colores, tipografía y tamaños, aquí; posiciones y geometría, al principio de script.js ===== */
@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;
  --rejilla:#BFC7CE;
  --blanco:#FFFFFF;
  /* Colores de partido (los del widget de sondeos 29N; territoriales, los de Datos) */
  --pp:#00A1F6; --psoe:#FF0000; --vox:#4FA23A; --fa:#C2306A; --podemos:#692772; --salf:#7A5C3E;
  --erc:#FAB43E; --junts:#9DE2DE; --bildu:#ADBD22; --pnv:#4E6B40; --bng:#A7DAFD; --cc:#FFD706; --aa:#4FE8A6; --gbai:#3C9D9B; --otros:#BFBDB2;
  --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}

/* Espacios en múltiplos de 8 */
.graf{position:relative;max-width:1152px;margin:0 auto;padding:8px 0 16px;display:flex;flex-direction:column;gap:32px;font-variant-numeric:tabular-nums}
.g-cab{display:flex;flex-direction:column;gap:8px}
.g-tit{margin:0;font-size:22px;line-height:1.2;font-weight:700;text-wrap:balance}
.g-desc{margin:0;max-width:662px;font-size:18px;line-height:1.4;color:var(--texto)}
.g-grafico{display:flex;flex-direction:column;gap:24px}

/* Leyenda: cuadrado de 12, 8 hasta el texto, 16 entre ítems */
.leyenda{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:15px;line-height:21px}
.leyenda span{display:inline-flex;align-items:center;gap:8px}
.leyenda .esc{display:block;width:12px;height:12px;background:var(--texto-2)}
.leyenda .esc.disp{background:repeating-linear-gradient(135deg,var(--texto-2) 0 1.4px,transparent 1.4px 3.5px);box-shadow:inset 0 0 0 1px var(--texto-2)}

/* Cartograma: lienzo con las coordenadas del diseño, escalado al ancho disponible */
.mapa{position:relative}
.lienzo{position:absolute;left:0;top:0;transform-origin:0 0}
.prov{position:absolute;cursor:pointer}
.prov-nom{position:absolute;left:0;white-space:nowrap;font-size:14px;line-height:18px;color:var(--texto)}
.esc-rej{position:absolute;left:0;display:grid}
.esc-rej i{display:block}
.prov.activa .esc-rej{outline:1px solid var(--texto);outline-offset:2px}
.canarias{position:absolute;border:1px solid var(--borde)}
.callout{position:absolute;width:182px;font-size:17px;line-height:1.4}
.callout b{display:block;font-weight:700;line-height:1.3;margin-bottom:4px}
.callout-flecha{position:absolute;overflow:visible}
.callout-flecha path{fill:none;stroke:var(--texto);stroke-width:1}
.estado{margin:0;padding:24px 0;text-align:center;color:var(--texto-2)}
.estado[hidden]{display:none}

/* Ficha (tooltip de pautas): 280, padding 8/8/12/8, filas de partido con tira de resultados */
.tip{position:absolute;z-index:5;pointer-events:none;width:280px;background:var(--blanco);border:1px solid var(--borde);border-radius:2px;padding:8px 8px 12px;display:flex;flex-direction:column;gap:8px}
.tip[hidden]{display:none}
.tp-cab{display:flex;align-items:baseline;gap:8px}
.tp-cab b{font-size:14px;line-height:18px}
.tp-cab span,.tp-gris{font-size:13px;line-height:17px;color:var(--texto-2)}
.tp-fil{height:1px;background:var(--borde)}
.tp-fila{display:flex;flex-direction:column;gap:2px}
.tp-l1{display:flex;justify-content:space-between;align-items:center}
.tp-etq{display:inline-flex;align-items:center;gap:4px;font-size:13px;line-height:17px;color:var(--texto-2)}
.tp-sq{display:block;width:8px;height:8px}
.tp-l2{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tp-cifra{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}
.tp-cifra b{font-size:14px;line-height:18px}
.tp-tira{flex:none;display:block}
.tp-tira .eje{fill:var(--borde)}
.tp-tira .media{fill:var(--blanco);stroke:var(--texto);stroke-width:1.5}
.tp-nota{margin:0;font-size:13px;line-height:1.3;font-style:italic;color:var(--texto-2);text-align:right}

/* Pie */
.g-pieblock{display:flex;flex-direction:column;gap:16px}
.g-nota{margin:0 0 0 auto;max-width:580px;font-size:13px;line-height:1.3;color:var(--texto-2);font-style:italic;text-align:right}
.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)}
.junto{white-space:nowrap}

/* Móvil: 4 px de margen lateral, tamaños de móvil, nombres abreviados en cursiva gris */
@container (max-width:559px){
  .graf{padding:8px 4px 16px}
  .g-tit{font-size:24px}
  .g-desc{font-size:20px}
  .leyenda{font-size:16px;line-height:22px}
  .prov-nom{font-size:13px;line-height:17px;font-style:italic;color:var(--texto-2)}
  .g-nota{max-width:300px;font-size:14px}
  .g-pie{font-size:14px}
}