/* graficos_ficha.css — gráficos 16 (mezcla de procedimientos) y 19 (concentración en el tiempo) de las fichas (EST-G,
 * app/graficos_ficha.py). Procedimientos: la paleta categórica validada de «El río del dinero» (c1..c6 en el orden del
 * anillo, ΔE CVD ≥ 15 entre vecinos) y gris para «no consta»; nunca un color de juicio. Concentración: el primero en el
 * acento, los cuatro en gris. Dos composiciones por gráfico (escritorio 760 y móvil 358): se enseña una, no se encoge. */
.gf { --gp-c1: #2388c3; --gp-c2: #229666; --gp-c3: #7276c9; --gp-c4: #778b27; --gp-c5: #1090a1; --gp-c6: #9c7c07; --gp-neutro: #8f949c; }
:root[data-tema="oscuro"] .gf { --gp-c1: #3b9bd7; --gp-c2: #3ca977; --gp-c3: #8488dd; --gp-c4: #899d3c; --gp-c5: #09a4b8; --gp-c6: #b08e21; --gp-neutro: #6f7888; }
.gp-menor { fill: var(--gp-c1); } .gp-abierto { fill: var(--gp-c2); } .gp-acuerdo_marco { fill: var(--gp-c3); } .gp-negociado_sp { fill: var(--gp-c4); }
.gp-restringido { fill: var(--gp-c5); } .gp-otros { fill: var(--gp-c6); } .gp-no_consta { fill: var(--gp-neutro); }
.gf-svg { display: block; max-width: 100%; height: auto; font-family: var(--fuente-sans); overflow: visible; }
.gf-movil { display: none; }
.gf-svg text { fill: var(--color-texto-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.gf-svg .gf-dato { fill: var(--color-texto); font-weight: 600; }
.gf-svg .gf-rejilla { stroke: var(--color-borde); stroke-opacity: 0.7; shape-rendering: crispEdges; }
.gf-svg .gf-base { stroke: var(--color-borde-fuerte); shape-rendering: crispEdges; }
.gf-svg .gf-zona { fill: transparent; }
.gf-svg .gf-anio:hover .gf-zona { fill: var(--color-acento-suave); fill-opacity: 0.6; }
.gc-uno, .gf-leyenda .gc-uno { fill: none; stroke: var(--color-acento); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.gc-cuatro, .gf-leyenda .gc-cuatro { fill: none; stroke: var(--color-texto-3); stroke-width: 1.5; stroke-linejoin: round; stroke-opacity: 0.8; }
.gc-uno-p { fill: var(--color-acento); stroke: var(--color-fondo); stroke-width: 1.5; }
.gc-cuatro-p { fill: var(--color-fondo); stroke: var(--color-texto-3); stroke-width: 1.5; }
.gf-lectura { margin: 0 0 var(--sp-2); font-size: var(--fs-14); line-height: 1.5; color: var(--color-texto); max-width: 80ch; }
/* Unidad: botones de opción que enseñan su SVG (sin JavaScript) */
.gf-u { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.gf-mandos { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0 0 var(--sp-2); padding: 2px; border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-pildora); background: var(--color-superficie); }
.gf-mando-rot { padding: 0 10px 0 8px; font-size: var(--rotulo-tam, 0.75rem); font-weight: var(--rotulo-peso, 600); letter-spacing: var(--rotulo-espaciado, 0.06em); text-transform: uppercase; color: var(--color-texto-2); }
.gf-mandos label { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: var(--radio-pildora); font-size: var(--fs-14); color: var(--color-texto-2); cursor: pointer; }
.gf-mandos label:hover { color: var(--color-acento); }
@media (pointer: coarse) { .gf-mandos label { min-height: 40px; } }
.gf-lienzo { display: none; }
/* EST-DENS: a la vista, la versión baja; «Ampliar» abre en el sitio la grande con todo (y la baja se esconde) */
.gf-compacto { display: block; }
.gf:has(.gf-mas[open]) .gf-compacto, .gf:has(.gf-mas[open]) > .gf-leyenda { display: none; }
.gf-mas { margin-top: var(--sp-1); }
.gf-mas > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: var(--fs-14); font-weight: var(--peso-medio); color: var(--color-acento); list-style: none; }
.gf-mas > summary::-webkit-details-marker { display: none; }
.gf-mas > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.gf-mas[open] > summary::before { transform: rotate(45deg); }
.gf-mas[open] > summary { font-size: 0; } .gf-mas[open] > summary::after { content: "Reducir"; font-size: var(--fs-14); }
.gf-mas-sub { font-weight: 400; color: var(--color-texto-2); }
@media (pointer: coarse) { .gf-mas > summary { min-height: 40px; } }
.gc-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); }
.gc-cifra { margin: 0; flex: 1 1 22rem; font-size: var(--fs-14); line-height: 1.45; color: var(--color-texto); max-width: 60ch; }
.gc-cifra b { font-family: var(--fuente-cifra, var(--fuente-sans)); font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--fs-17, 1.0625rem); color: var(--color-acento); }
.gc-mini { display: block; flex: 0 0 auto; }
.gf-lienzo.gf-solo { display: block; }
.gf-u[value="pct"]:checked ~ .gf-lienzos [data-u="pct"], .gf-u[value="n"]:checked ~ .gf-lienzos [data-u="n"], .gf-u[value="eur"]:checked ~ .gf-lienzos [data-u="eur"] { display: block; }
.gf-u[value="pct"]:checked ~ .gf-mandos label[for$="-pct"], .gf-u[value="n"]:checked ~ .gf-mandos label[for$="-n"], .gf-u[value="eur"]:checked ~ .gf-mandos label[for$="-eur"] { background: var(--color-acento); color: var(--color-sobre-acento); }
.gf-u:focus-visible ~ .gf-mandos { outline: 2px solid var(--foco-color); outline-offset: 2px; }
.gf-leyenda { display: flex; flex-wrap: wrap; gap: 6px var(--sp-5); margin: var(--sp-2) 0 0; padding: 0; list-style: none; font-size: var(--fs-13); color: var(--color-texto-2); }
.gf-leyenda li { display: inline-flex; align-items: center; gap: 8px; }
.gf-leyenda svg { width: 12px; height: 12px; } .gf-leyenda svg[viewBox="0 0 18 10"] { width: 18px; height: 10px; }
.gf-fijo { margin: var(--sp-2) 0 0; padding: 2px 0 2px var(--sp-3); border-left: 2px solid var(--color-acento); font-size: var(--fs-13); line-height: 1.5; color: var(--color-texto-2); max-width: 100ch; }
.gf-fijo b { color: var(--color-texto); }
.gf-acc a { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--fs-14); }
.gf-tabla-marco { max-height: 360px; overflow: auto; }
.gf-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
.gf-tabla caption { text-align: left; padding: 6px 0; color: var(--color-texto-2); }
.gf-tabla th, .gf-tabla td { padding: 5px 8px; border-bottom: 1px solid var(--color-borde); text-align: right; white-space: nowrap; }
.gf-tabla th:first-child { text-align: left; padding-left: 0; }
.gf-tabla thead th { position: sticky; top: 0; background: var(--color-fondo); font-weight: 600; color: var(--color-texto-2); }
.gf-sub { color: var(--color-texto-3); font-size: 0.92em; }
@media (max-width: 760px) {
  .gf-escritorio { display: none; } .gf-movil { display: block; }
  .gf-svg text { font-size: 14px; }
  .gf-leyenda, .gf-fijo { font-size: var(--fs-14); }
}
.gf-svg a:focus-visible { outline: none; }
.gf-svg a:focus-visible .gf-zona { fill: var(--color-acento-suave); stroke: var(--foco-color); stroke-width: 2; }

/* Los huecos de los tres fragmentos de la ficha, del alto de lo que llega (medido con los datos publicados, 3-nov: G46470738, P5030300G y A81948077): sin ellos
   la ficha saltaba al llegar cada uno (CLS de 0,09 a 0,11) */
.fragmento-cargando.gf-hueco-serie { min-height: 265px; }
.fragmento-cargando.gf-hueco-proc { min-height: 264px; }
.fragmento-cargando.gf-hueco-conc { min-height: 81px; }
.gf-hueco-conc .esqueleto-bloque { display: none; }   /* el hueco del 19 es bajo: solo «Cargando…» */
@media (max-width: 640px) {
    .fragmento-cargando.gf-hueco-serie { min-height: 405px; }
    .fragmento-cargando.gf-hueco-proc { min-height: 370px; }
    .fragmento-cargando.gf-hueco-conc { min-height: 161px; }
}