/* EST-DENS (3-nov): la serif, solo en el H1 de la página; los títulos del panel, las cifras y la entradilla, con los tokens --fuente-seccion/-cifra/-entradilla (Inter). */
/* grafo3d.css — /cumplimiento/proveedores-compartidos (E7, de la maqueta F11g con su pasada estética F11g-est del 22-oct-2026):
 * grafo 3D de órganos por proveedores compartidos.
 * Tokens de la casa (estilo/css/tokens.css). La casa no tiene modo oscuro: aquí se propone uno redefiniendo los MISMOS tokens.
 * El lienzo 3D tiene su propio cielo (--g3-cielo-1..3, centro → borde) y su niebla (--g3-niebla), también en claro: gris perla,
 * nunca blanco plano. Paleta de grupos (--g3-c1..c8): 8 tonos OKLCH de luminancia igual por modo (L 0,60 claro / 0,66 oscuro,
 * croma 0,125), sin rojo, ámbar ni verde de semáforo, ordenados para que los vecinos del anillo se distingan en protanopía y
 * deuteranopía (ΔE ≥ 15,2 entre vecinos; validate_palette.js: AUDITORIA §6). Vidrio esmerilado (--g3-vidrio) con alfa 0,80 para
 * que el texto cumpla AA aunque detrás pase el núcleo más brillante; sin vidrio (calidad media/baja), alfa 0,92.
 */
:root {
  --g3-lienzo: #e4e3df;
  --g3-cielo-1: #f6f5f1; --g3-cielo-2: #e3e2de; --g3-cielo-3: #c6c7c5; --g3-niebla: #dcdbd7;
  --g3-neutro: #7b8290;           /* tubos entre grupos */
  --g3-neutro-nodo: #a1a5ab;      /* órganos de grupos pequeños */
  --g3-c1: #2388c3; --g3-c2: #229666; --g3-c3: #7276c9; --g3-c4: #778b27;
  --g3-c5: #1090a1; --g3-c6: #9c7c07; --g3-c7: #a166ae; --g3-c8: #be6343;
  --g3-sel: #1f4068;
  --g3-vidrio: rgba(250, 249, 246, 0.80); --g3-vidrio-solido: rgba(250, 249, 246, 0.94);
  --g3-vidrio-borde: rgba(255, 255, 255, 0.85); --g3-vidrio-linea: rgba(31, 64, 104, 0.12);
  --g3-vidrio-sombra: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(31, 40, 60, 0.10);
  --g3-etq-fondo: rgba(250, 249, 246, 0.82); --g3-etq-borde: rgba(31, 64, 104, 0.16);
  --g3-velo: var(--g3-vidrio);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --color-fondo: #0f141b; --color-fondo-calido: #121821; --color-fondo-hundido: #18202a; --color-superficie: #141b24;
    --color-texto: #ece9e2; --color-texto-fuerte: #f7f5f0; --color-texto-2: #bdb8ad; --color-texto-3: #a7a296;
    --color-adorno: #5a6270; --color-borde: #263040; --color-borde-fuerte: #3a4556; --color-borde-control: #6f7a8a;
    --color-acento: #9cbfe8; --color-acento-hover: #bcd4f0; --color-acento-suave: #1a2737; --color-acento-borde: #33496a;
    --color-sobre-acento: #0f141b; --foco-color: #9cbfe8; --color-resalte: #4a4317;
    --g3-lienzo: #0d1424; --g3-cielo-1: #1b2945; --g3-cielo-2: #0c1426; --g3-cielo-3: #03060c; --g3-niebla: #0a1120;
    --g3-neutro: #7d8aa3; --g3-neutro-nodo: #5f6b7d; --g3-sel: #f7f5f0;
    --g3-c1: #3b9bd7; --g3-c2: #3ca977; --g3-c3: #8488dd; --g3-c4: #899d3c;
    --g3-c5: #09a4b8; --g3-c6: #b08e21; --g3-c7: #b478c2; --g3-c8: #d27555;
    --g3-vidrio: rgba(13, 20, 36, 0.80); --g3-vidrio-solido: rgba(13, 20, 36, 0.93);
    --g3-vidrio-borde: rgba(255, 255, 255, 0.10); --g3-vidrio-linea: rgba(255, 255, 255, 0.08);
    --g3-vidrio-sombra: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
    --g3-etq-fondo: rgba(10, 16, 30, 0.78); --g3-etq-borde: rgba(255, 255, 255, 0.14);
  }
}
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --color-fondo: #0f141b; --color-fondo-calido: #121821; --color-fondo-hundido: #18202a; --color-superficie: #141b24;
  --color-texto: #ece9e2; --color-texto-fuerte: #f7f5f0; --color-texto-2: #bdb8ad; --color-texto-3: #a7a296;
  --color-adorno: #5a6270; --color-borde: #263040; --color-borde-fuerte: #3a4556; --color-borde-control: #6f7a8a;
  --color-acento: #9cbfe8; --color-acento-hover: #bcd4f0; --color-acento-suave: #1a2737; --color-acento-borde: #33496a;
  --color-sobre-acento: #0f141b; --foco-color: #9cbfe8; --color-resalte: #4a4317;
  --g3-lienzo: #0d1424; --g3-cielo-1: #1b2945; --g3-cielo-2: #0c1426; --g3-cielo-3: #03060c; --g3-niebla: #0a1120;
  --g3-neutro: #7d8aa3; --g3-neutro-nodo: #5f6b7d; --g3-sel: #f7f5f0;
  --g3-c1: #3b9bd7; --g3-c2: #3ca977; --g3-c3: #8488dd; --g3-c4: #899d3c;
  --g3-c5: #09a4b8; --g3-c6: #b08e21; --g3-c7: #b478c2; --g3-c8: #d27555;
  --g3-vidrio: rgba(13, 20, 36, 0.80); --g3-vidrio-solido: rgba(13, 20, 36, 0.93);
  --g3-vidrio-borde: rgba(255, 255, 255, 0.10); --g3-vidrio-linea: rgba(255, 255, 255, 0.08);
  --g3-vidrio-sombra: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
  --g3-etq-fondo: rgba(10, 16, 30, 0.78); --g3-etq-borde: rgba(255, 255, 255, 0.14);
}
body { background: var(--color-fondo); color: var(--color-texto); }
/* El logo lleva colores fijos en el SVG: en oscuro, la palabra y el «.com» pasan a los tokens de texto */
:root[data-tema="oscuro"] .marca-logo path[fill="#1a1a1a"] { fill: var(--color-texto-fuerte); }
:root[data-tema="oscuro"] .marca-logo path[fill="#595959"] { fill: var(--color-texto-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .marca-logo path[fill="#1a1a1a"] { fill: var(--color-texto-fuerte); }
  :root:not([data-tema="claro"]) .marca-logo path[fill="#595959"] { fill: var(--color-texto-2); }
}
:root[data-tema="oscuro"] .cabecera-sitio, :root[data-tema="oscuro"] .pie-sitio { background: var(--color-fondo-calido); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .cabecera-sitio, :root:not([data-tema="claro"]) .pie-sitio { background: var(--color-fondo-calido); } }

/* ── Herramientas (filtros en una fila sobre el lienzo) ─────────────────────────────────────────────── */
.g3-herr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-6); align-items: end; }
.g3-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.g3-campo > span, .g3-campo legend { font-size: var(--rotulo-tam); font-weight: var(--rotulo-peso); letter-spacing: var(--rotulo-espaciado); text-transform: uppercase; color: var(--color-texto-2); padding: 0; }
.g3-campo select, .g3-campo input[type="search"] { height: 40px; width: 100%; padding: 0 var(--sp-3); border: 1px solid var(--color-borde-control); border-radius: var(--radio-m); background: var(--color-superficie); color: var(--color-texto); font: inherit; font-size: var(--fs-14); }
.g3-campo select:focus-visible, .g3-campo input:focus-visible { outline: 2px solid var(--foco-color); outline-offset: 1px; }
.g3-c-comunidad { grid-column: span 3; } .g3-c-mercado { grid-column: span 3; } .g3-c-tipo { grid-column: span 3; } .g3-c-buscar { grid-column: span 3; position: relative; }
.g3-c-nivel { grid-column: span 7; } .g3-c-anio { grid-column: span 5; }
fieldset.g3-campo { border: 0; margin: 0; padding: 0; min-width: 0; }
.g3-seg { display: flex; flex-wrap: wrap; border: 1px solid var(--color-borde-control); border-radius: var(--radio-m); overflow: hidden; background: var(--color-superficie); }
.g3-seg button { flex: 1 1 auto; min-height: 40px; padding: 4px var(--sp-3); border: 0; border-left: 1px solid var(--color-borde); background: transparent; color: var(--color-texto); font: inherit; font-size: var(--fs-14); cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.g3-seg button:first-child { border-left: 0; }
.g3-seg button small { color: var(--color-texto-3); font-size: var(--fs-13); margin-left: 4px; }
.g3-seg button[aria-pressed="true"] { background: var(--color-acento); color: var(--color-sobre-acento); }
.g3-seg button[aria-pressed="true"] small { color: inherit; opacity: 0.85; }
.g3-seg button:focus-visible { outline: 2px solid var(--foco-color); outline-offset: -3px; }
.g3-seg button[disabled] { color: var(--color-texto-3); cursor: not-allowed; }
.g3-sugerencias { position: absolute; z-index: 30; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px 0; list-style: none; background: var(--color-superficie); border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-m); box-shadow: var(--sombra-2); max-height: 320px; overflow: auto; }
.g3-sugerencias li { padding: 8px var(--sp-3); cursor: pointer; font-size: var(--fs-14); line-height: 1.35; }
.g3-sugerencias li small { display: block; color: var(--color-texto-3); font-size: var(--fs-13); }
.g3-sugerencias li[aria-selected="true"], .g3-sugerencias li:hover { background: var(--color-acento-suave); }
.g3-sugerencias li.vacio { cursor: default; color: var(--color-texto-3); }

/* ── Línea de estado ─────────────────────────────────────────────────────────────────────────────────── */
.g3-estado { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-5); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--color-borde); font-size: var(--fs-14); color: var(--color-texto-2); font-variant-numeric: tabular-nums; }
.g3-estado b { color: var(--color-texto-fuerte); font-weight: var(--peso-fuerte); }
.g3-estado-quitar { border: 0; background: none; padding: 0; color: var(--color-acento); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }

/* ── Escena ───────────────────────────────────────────────────────────────────────────────────────────── */
.g3-marco { position: relative; margin-top: var(--sp-3); overflow-x: clip; isolation: isolate; }   /* la ficha escondida a la derecha no ensancha la página */
.g3-escena { position: relative; height: clamp(560px, 78vh, 820px); background: radial-gradient(120% 90% at 50% 40%, var(--g3-cielo-1), var(--g3-cielo-2) 55%, var(--g3-cielo-3));
  border: 1px solid var(--g3-vidrio-linea); border-radius: 14px; overflow: hidden; isolation: isolate; }
/* sombra del marco fuera del lienzo (en un pseudo del marco: no entra en la composición de cada cuadro del WebGL) */
.g3-marco::before { content: ""; position: absolute; left: 2%; right: 2%; bottom: -18px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 30, 50, 0.18), transparent); z-index: -1; pointer-events: none; }
.g3-escena:fullscreen { border-radius: 0; height: 100vh; }
.g3-lienzo { position: absolute; inset: 0; }
.g3-lienzo canvas { display: block; outline: none; }
.g3-cargando { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; background: radial-gradient(120% 90% at 50% 40%, var(--g3-cielo-1), var(--g3-cielo-2) 55%, var(--g3-cielo-3));
  color: var(--color-texto-2); font-size: var(--fs-16); text-align: center; padding: var(--sp-6); transition: opacity 0.3s; }
.g3-cargando[hidden] { display: none; }
.g3-cargando b { display: block; font-family: var(--fuente-seccion); font-weight: var(--peso-inter); font-size: calc(var(--fs-28) * var(--inter-k) + var(--inter-b)); color: var(--color-texto-fuerte); margin-bottom: 6px; }

/* Vidrio esmerilado: leyenda, ficha, barra, ayuda y globos. Con calidad media/baja (o sin soporte) pasa a velo casi opaco: el
   desenfoque de fondo lo rehace el compositor en cada cuadro y en una GPU débil cuesta (medido en AUDITORIA §4) */
.g3-vidrio, .g3-leyenda, .g3-panel, .g3-barra .g3-boton, .g3-ayuda, .scene-tooltip {
  background: var(--g3-vidrio); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--g3-vidrio-borde); box-shadow: var(--g3-vidrio-sombra); }
.g3-sin-vidrio .g3-leyenda, .g3-sin-vidrio .g3-panel, .g3-sin-vidrio .g3-barra .g3-boton, .g3-sin-vidrio .g3-ayuda, .g3-sin-vidrio .scene-tooltip {
  background: var(--g3-vidrio-solido); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* E7 (3-nov, fps en el móvil): en el móvil sin vidrio, los paneles opacos y sin sombra (el compositor ya no mezcla cada cuadro
   del lienzo con ellos: medido con la CPU ×4, el panel y la leyenda translúcidos costaban 5 fps) */
@media (max-width: 760px) {
  .g3-sin-vidrio .g3-leyenda, .g3-sin-vidrio .g3-panel, .g3-sin-vidrio .g3-barra .g3-boton, .g3-sin-vidrio .g3-ayuda { background: var(--color-superficie); box-shadow: none; }
  /* cada capa encima del lienzo en su propia capa del compositor: se rasteriza una vez y no se repinta con cada cuadro del WebGL */
  .g3-panel, .g3-leyenda, .g3-barra, .g3-queveo { will-change: transform; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .g3-leyenda, .g3-panel, .g3-barra .g3-boton, .g3-ayuda, .scene-tooltip { background: var(--g3-vidrio-solido); } }

/* Leyenda flotante */
.g3-leyenda { position: absolute; z-index: 6; top: var(--sp-4); left: var(--sp-4); width: 316px; max-height: calc(100% - 104px); overflow: auto; padding: var(--sp-4) var(--sp-3) var(--sp-3);
  border-radius: 12px; font-size: var(--fs-13); line-height: 1.35; scrollbar-width: thin; }
.g3-leyenda h3 { display: flex; justify-content: space-between; align-items: center; margin: 0 4px 8px; font-size: var(--rotulo-tam); font-weight: var(--rotulo-peso); letter-spacing: var(--rotulo-espaciado); text-transform: uppercase; color: var(--color-texto-2); }
.g3-leyenda ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.g3-grupo { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: start; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; color: var(--color-texto); font: inherit; text-align: left; cursor: pointer; min-height: 40px;
  transition: background-color 0.15s, opacity 0.2s; }
.g3-grupo:hover { background: var(--g3-vidrio-linea); }
.g3-grupo[aria-pressed="true"] { background: var(--color-acento-suave); box-shadow: inset 2px 0 0 var(--color-acento); }
.g3-grupo:focus-visible { outline: 2px solid var(--foco-color); outline-offset: -2px; }
.g3-grupo i { width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; box-shadow: 0 0 0 2px var(--g3-vidrio-solido), 0 0 10px 1px currentColor; }
.g3-grupo span small { display: block; color: var(--color-texto-3); font-size: 13px; margin-top: 1px; }
.g3-grupo em { font-style: normal; color: var(--color-texto-2); font-variant-numeric: tabular-nums; }
.g3-grupo.apagado { opacity: 0.55; }
.g3-leyenda-pie { margin: 8px 4px 0; padding-top: 8px; border-top: 1px solid var(--g3-vidrio-linea); color: var(--color-texto-2); font-size: 13px; line-height: 1.45; }
.g3-leyenda-plegar { display: inline-flex; align-items: center; min-height: 32px; padding: 0 8px; border: 0; border-radius: 999px; background: none; color: var(--color-acento); font: inherit; font-size: 13px; font-weight: var(--peso-medio); text-transform: none; letter-spacing: 0; cursor: pointer; }
.g3-leyenda-plegar:hover { background: var(--g3-vidrio-linea); }
.g3-leyenda-plegar:focus-visible { outline: 2px solid var(--foco-color); }
.g3-leyenda.plegada { width: auto; padding: 6px 8px 6px 14px; border-radius: 999px; }
.g3-leyenda.plegada ul, .g3-leyenda.plegada .g3-leyenda-pie { display: none; }
.g3-leyenda.plegada h3 { margin: 0; gap: 10px; }

/* Barra de la escena: botones redondos de vidrio, iconos finos */
.g3-barra { position: absolute; z-index: 6; left: var(--sp-4); bottom: var(--sp-4); display: flex; gap: 8px; flex-wrap: wrap; }
.g3-boton { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1px solid var(--color-borde-fuerte); border-radius: 999px; background: var(--color-superficie); color: var(--color-texto); font: inherit; font-size: var(--fs-14); cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.1s; }
.g3-boton:hover { border-color: var(--color-acento); }
.g3-boton:active { transform: scale(0.97); }
.g3-boton[hidden] { display: none; }
.g3-boton:focus-visible { outline: 2px solid var(--foco-color); outline-offset: 2px; }
.g3-boton[aria-pressed="true"] { background: var(--color-acento); color: var(--color-sobre-acento); border-color: var(--color-acento); }
.g3-boton[disabled] { opacity: 0.5; cursor: not-allowed; }
.g3-boton svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.g3-barra .g3-boton { color: var(--color-texto); }
.g3-barra .g3-boton[aria-pressed="true"] { background: var(--color-acento); color: var(--color-sobre-acento); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.g3-ayuda { position: absolute; z-index: 6; right: var(--sp-4); bottom: var(--sp-4); margin: 0; padding: 8px 14px; border-radius: 999px; color: var(--color-texto-2); font-size: 13px; pointer-events: none; }

/* «Qué estoy viendo»: migas del nivel, frase fija y acciones del nivel */
.g3-queveo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--sp-5); align-items: start; margin-top: var(--sp-5); }
.g3-migas { grid-column: 1 / -1; }
.g3-migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; font-size: var(--fs-14); }
.g3-migas li { display: inline-flex; align-items: center; }
.g3-migas li + li::before { content: "›"; margin: 0 8px; color: var(--color-texto-3); }
.g3-migas button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 2px; border: 0; background: none; color: var(--color-acento); font: inherit; font-weight: var(--peso-medio); cursor: pointer; text-decoration: underline; text-decoration-color: var(--color-acento-borde); text-underline-offset: 3px; }
.g3-migas button[aria-current="true"], .g3-migas span[aria-current] { color: var(--color-texto-fuerte); text-decoration: none; font-weight: var(--peso-fuerte); cursor: default; }
.g3-migas button:focus-visible { outline: 2px solid var(--foco-color); outline-offset: 2px; }
.g3-migas i { width: 10px; height: 10px; border-radius: 50%; }
.g3-queveo-texto { margin: 0; max-width: 92ch; font-family: var(--fuente-entradilla); font-size: 1rem; line-height: 1.5; color: var(--color-texto); }
.g3-acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* Etiquetas de nombres sobre el lienzo (posición por graph2ScreenCoords): píldora semitransparente con borde fino */
.g3-etiquetas { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; transition: opacity 0.5s ease; }
.g3-etiquetas.naciendo { opacity: 0; transition: none; }
/* cada etiqueta es su propia capa (will-change): moverla no repinta nada; sin sombras difusas sobre el lienzo (el compositor las
   rehace en cada cuadro: medido, de 37 a 55 fps en SwiftShader con 8 etiquetas) */
.g3-etq { position: absolute; left: 0; top: 0; padding: 3px 10px; border-radius: 999px; background: var(--g3-etq-fondo); color: var(--color-texto-fuerte); font-size: 13px; line-height: 1.3; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid var(--g3-etq-borde); will-change: transform; contain: layout paint style; }
.g3-etq.grupo { max-width: 230px; padding: 5px 12px 6px; border-radius: 10px; white-space: normal; text-align: center; font-size: 13px; line-height: 1.25; }
.g3-etq.grupo b { display: flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--fuente-sans); font-weight: 600; font-size: 15px; line-height: 1.15; color: var(--color-texto-fuerte); }
.g3-etq.grupo b i { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.g3-etq.grupo small { display: block; margin-top: 3px; color: var(--color-texto-2); font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.g3-marco.con-ficha .g3-ayuda { display: none; }
.g3-etq.sel { max-width: 360px; font-weight: var(--peso-fuerte); font-size: 14px; padding: 4px 12px; border: 1.5px solid var(--g3-sel); }

/* Globo (3d-force-graph y el del mapa completo) */
/* con dos clases gana a la hoja que inyecta el motor (.float-tooltip-kap, una clase), sin forzar nada */
.g3-escena .scene-tooltip, .g3-escena .float-tooltip-kap { padding: 10px 12px; max-width: 300px; border-radius: 10px; color: var(--color-texto); font: 13px/1.45 var(--fuente-sans); }
.scene-tooltip b { display: block; font-family: var(--fuente-sans); font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--color-texto-fuerte); margin-bottom: 2px; }
.scene-tooltip span { color: var(--color-texto-2); }
.g3-tip { position: absolute; z-index: 7; left: 0; top: 0; pointer-events: none; }
.g3-tip[hidden] { display: none; }

/* ── Panel de la ficha (vidrio, a la derecha; en el móvil, hoja desde abajo) ─────────────────────────────── */
.g3-panel { position: absolute; z-index: 8; top: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); width: 384px; max-width: calc(100% - 24px); overflow: auto; padding: var(--sp-6) var(--sp-5) var(--sp-6);
  border-radius: 14px; transform: translateX(calc(100% + 24px)); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.35s; visibility: hidden; scrollbar-width: thin; }
.g3-panel.abierto { transform: none; visibility: visible; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { .g3-panel, .g3-panel.abierto, .g3-boton, .g3-grupo, .g3-etiquetas { transition: none; } .g3-boton:active { transform: none; } }
.g3-asa { display: none; }
.g3-panel-cerrar { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--color-texto-2); cursor: pointer; }
.g3-panel-cerrar:hover { background: var(--g3-vidrio-linea); color: var(--color-texto-fuerte); }
.g3-panel-cerrar:focus-visible { outline: 2px solid var(--foco-color); }
.g3-panel-cerrar svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.g3-rotulo { margin: 0 44px 8px 0; font-size: var(--rotulo-tam); font-weight: var(--rotulo-peso); letter-spacing: var(--rotulo-espaciado); text-transform: uppercase; color: var(--color-texto-2); }
.g3-panel h3 { margin: 0 44px 0 0; font-family: var(--fuente-seccion); font-weight: var(--peso-inter); font-size: calc(1.875rem * var(--inter-k) + var(--inter-b)); line-height: 1.1; color: var(--color-texto-fuerte); overflow-wrap: anywhere; }
.g3-panel-grupo { display: flex; align-items: center; gap: 8px; margin: var(--sp-3) 0 0; font-size: var(--fs-14); color: var(--color-texto-2); }
.g3-panel-grupo i { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.g3-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-4); margin: var(--sp-5) 0 0; padding: var(--sp-4) 0; border-top: 1px solid var(--g3-vidrio-linea); border-bottom: 1px solid var(--g3-vidrio-linea); }
.g3-cifras div { min-width: 0; }
.g3-cifras dt { font-size: var(--fs-13); color: var(--color-texto-2); line-height: 1.3; }
.g3-cifras dd { margin: 4px 0 0; font-family: var(--fuente-cifra); font-weight: var(--peso-inter); font-size: calc(var(--fs-28) * var(--inter-k) + var(--inter-b)); line-height: 1.05; color: var(--color-texto-fuerte); font-variant-numeric: tabular-nums; }
.g3-anios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: end; height: 64px; margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.g3-anios li { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; font-size: 13px; color: var(--color-texto-2); text-align: center; font-variant-numeric: tabular-nums; }
.g3-anios li i { display: block; min-height: 2px; margin-bottom: 4px; background: var(--color-acento); border-radius: 4px 4px 0 0; }
.g3-anios li.act i { background: var(--color-texto-fuerte); }
.g3-p { margin: var(--sp-4) 0 0; font-size: var(--fs-14); line-height: 1.6; color: var(--color-texto); }
.g3-p b { font-weight: var(--peso-fuerte); }
.g3-h4 { margin: var(--sp-6) 0 var(--sp-2); font-size: var(--rotulo-tam); font-weight: var(--rotulo-peso); letter-spacing: var(--rotulo-espaciado); text-transform: uppercase; color: var(--color-texto-2); }
.g3-vecinos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--g3-vidrio-linea); }
.g3-vecinos li { border-bottom: 1px solid var(--g3-vidrio-linea); }
.g3-vecinos button { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 4px 10px; width: 100%; padding: 10px 6px; border: 0; border-radius: 6px; background: none; color: var(--color-texto); font: inherit; font-size: var(--fs-14); text-align: left; cursor: pointer; min-height: 44px; }
.g3-vecinos button:hover { background: var(--g3-vidrio-linea); }
.g3-vecinos button:focus-visible { outline: 2px solid var(--foco-color); outline-offset: -2px; }
.g3-vecinos i { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; }
.g3-vecinos b { font-weight: var(--peso-medio); line-height: 1.35; }
.g3-vecinos em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--color-texto-fuerte); font-weight: var(--peso-fuerte); }
.g3-vecinos small { grid-column: 2 / 4; color: var(--color-texto-3); font-size: var(--fs-13); line-height: 1.4; }
.g3-mas { margin-top: var(--sp-3); }
.g3-enlace { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: var(--sp-4); color: var(--color-acento); font-weight: var(--peso-medio); }
.g3-enlace svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.g3-nota-panel { margin: var(--sp-3) 0 0; font-size: var(--fs-13); line-height: 1.5; color: var(--color-texto-3); }

/* ── Lista equivalente ──────────────────────────────────────────────────────────────────────────────── */
.g3-lista-herr { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: end; margin-top: var(--sp-4); }
.g3-lista-herr .g3-campo { width: min(420px, 100%); }
.g3-tabla-marco { margin-top: var(--sp-3); overflow-x: auto; }
.g3-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.g3-tabla caption { text-align: left; padding: 0 0 var(--sp-2); color: var(--color-texto-2); font-size: var(--fs-13); }
.g3-tabla thead th { text-align: left; font-size: var(--rotulo-tam); font-weight: var(--rotulo-peso); letter-spacing: var(--rotulo-espaciado); text-transform: uppercase; color: var(--color-texto-2); padding: 8px 10px 8px 0; border-bottom: 1px solid var(--color-borde-fuerte); }
.g3-tabla tbody th { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--color-borde); vertical-align: top; line-height: 1.45; font-size: var(--fs-14); }
.g3-tabla td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--color-borde); vertical-align: top; line-height: 1.45; }
.g3-tabla td.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.g3-tabla th.num { text-align: right; }
.g3-tabla .g3-org { border: 0; padding: 0; background: none; color: var(--color-acento); font: inherit; font-weight: var(--peso-medio); text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--color-acento-borde); text-underline-offset: 3px; min-height: 24px; }
.g3-tabla .g3-org:focus-visible { outline: 2px solid var(--foco-color); outline-offset: 2px; }
.g3-tabla i.g3-pt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.g3-tabla .sec { color: var(--color-texto-2); font-size: var(--fs-13); }
.g3-pag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); font-size: var(--fs-14); color: var(--color-texto-2); }

/* ── Cómo leerlo ─────────────────────────────────────────────────────────────────────────────────────── */
.g3-leer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-8); margin-top: var(--sp-5); }
.g3-leer h3 { margin: 0 0 6px; font-family: var(--fuente-seccion); font-weight: var(--peso-inter); font-size: calc(var(--fs-22) * var(--inter-k) + var(--inter-b)); color: var(--color-texto-fuerte); }
.g3-leer p { margin: 0; font-size: var(--fs-14); line-height: 1.6; color: var(--color-texto); }
.g3-sinwebgl { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; padding: var(--sp-6); text-align: center; background: var(--g3-lienzo); color: var(--color-texto); }

/* ── Móvil: lienzo a pantalla completa (de borde a borde), leyenda y ficha como hojas que suben desde abajo ─────────── */
@media (max-width: 900px) {
  .g3-c-comunidad, .g3-c-mercado, .g3-c-tipo, .g3-c-buscar { grid-column: span 6; }
  .g3-c-nivel, .g3-c-anio { grid-column: span 12; }
  .g3-leer { grid-template-columns: minmax(0, 1fr); }
}
.g3-masfiltros { display: none; }
@media (max-width: 760px) {
  .g3-herr { gap: var(--sp-3); }
  .g3-queveo { grid-template-columns: minmax(0, 1fr); }
  .g3-acciones { justify-content: flex-start; }
  .g3-queveo-texto { font-size: var(--fs-16); }
  .g3-etq.grupo { max-width: 180px; padding: 5px 10px 6px; } .g3-etq.grupo b { font-size: 16px; }
  .g3-masfiltros { display: inline-flex; grid-column: span 12; justify-content: center; width: auto; }
  .g3-masfiltros[aria-expanded="true"] { background: var(--color-acento-suave); }
  .g3-herr:not(.abierta) .g3-c-mercado, .g3-herr:not(.abierta) .g3-c-tipo, .g3-herr:not(.abierta) .g3-c-nivel, .g3-herr:not(.abierta) .g3-c-anio { display: none; }
  .g3-c-comunidad, .g3-c-buscar { grid-column: span 12; }
  .g3-c-mercado, .g3-c-tipo { grid-column: span 6; }
  .g3-marco { margin-left: calc(-1 * var(--margen-izq)); margin-right: calc(-1 * var(--margen-der)); }
  .g3-escena { height: calc(100svh - 56px); min-height: 520px; max-height: 900px; border-radius: 0; border-left: 0; border-right: 0; }
  /* leyenda: píldora abajo; desplegada, hoja con asa */
  .g3-leyenda { top: auto; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); width: auto; max-height: 56%; padding: var(--sp-3) var(--sp-3) var(--sp-2); border-radius: 18px; }
  .g3-leyenda.plegada { left: var(--sp-3); right: auto; padding: 4px 6px 4px 16px; }
  .g3-leyenda h3 { margin: 0; }
  .g3-leyenda:not(.plegada) h3 { margin-bottom: 6px; }
  .g3-leyenda-plegar { min-height: 40px; font-size: 14px; }
  .g3-ayuda { display: none; }
  /* barra: columna de botones redondos arriba a la derecha */
  .g3-barra { left: auto; right: var(--sp-3); top: var(--sp-3); bottom: auto; flex-direction: column; }
  .g3-barra .g3-boton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .g3-barra .g3-boton { width: 44px; justify-content: center; padding: 0; min-height: 44px; }
  /* ficha: hoja desde abajo sobre el lienzo (el mapa se desplaza hacia el hueco de arriba: centra()) */
  .g3-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 60%; padding: var(--sp-6) var(--sp-4) var(--sp-6); border-radius: 20px 20px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0; transform: translateY(105%); }
  .g3-panel.abierto { transform: none; }
  .g3-asa { display: block; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 999px; background: var(--color-borde-fuerte); }
  .g3-marco.con-ficha .g3-leyenda { display: none; }
  .g3-panel h3 { font-size: 1.5rem; }
  .g3-seg button { padding: 4px 8px; }
  .g3-cifras dd { font-size: var(--fs-22); }
  .g3-tabla .col-tipo { display: none; }
}
/* lo que la maqueta F11g llevaba en línea (sin estilos en línea: test_fase2_diseno) */
.g3-seccion-mapa { margin-top: var(--sp-6); }
.g3-rotulo { font-size: var(--rotulo-tam); font-weight: var(--rotulo-peso); letter-spacing: var(--rotulo-espaciado); text-transform: uppercase; color: var(--color-texto-2); }
.g3-tabla th.g3-th-organo { font-weight: inherit; text-align: left; }