/* «Mapa» de Concejales y contratistas (FAM-2), ya dentro del sistema visual (sistema-visual.css: .cab, .cf, .gf, .td, .mandos): aquí
   solo lo propio del 3D (sobre el motor y los estilos del grafo de E7, grafo3d.css) y del bloque de la ficha del ayuntamiento.
   Colores: los tokens --g3-* (cambian con el tema); el color es tipo de sociedad o comunidad, nunca juicio. */

/* ── Página ── */
.sv .cjm-vistas a { min-width: 64px; justify-content: center; }
.sv .cjm-pagina .linea-aviso span { color: var(--color-texto-3); }
.sv .cjm-pagina .cf { margin-bottom: var(--sp-5); }

/* ── Mandos en una fila (en el móvil se apilan) ── */
.sv .cjm-mandos { margin: 0; column-gap: var(--sp-4); }
.sv .cjm-m-buscar { position: relative; width: 176px; min-width: 0; }
.sv .cjm-m-buscar .campo { width: 100%; }
.sv .cjm-m-buscar > span label { color: inherit; }
.g3-sugerencias li b { display: block; font-weight: var(--peso-medio); }
.g3-sugerencias li span { display: block; color: var(--color-texto-3); font-size: var(--fs-13); }
.g3-sugerencias li.cjm-sin { cursor: default; color: var(--color-texto-3); }
.sv .cjm-anios-fila { display: inline-flex; gap: 6px; align-items: center; max-width: 100%; }
.sv .cjm-reproducir { display: inline-grid; place-items: center; width: 36px; padding: 0; cursor: pointer; }
.sv .cjm-reproducir svg { width: 14px; height: 14px; fill: currentColor; }
.sv .cjm-reproducir[aria-pressed="true"] { background: var(--color-acento); color: var(--color-sobre-acento); border-color: var(--color-acento); }
.sv .cjm-volver { align-self: flex-end; cursor: pointer; }
.sv [data-cjm-anios-mando][hidden], .sv .cjm-volver[hidden] { display: none; }
@media (pointer: coarse) { .sv .cjm-reproducir { width: var(--toque); } }

/* ── El lienzo es el 3D: la escena y su panel. La regla general del lienzo (svg al 100 %) no va con los iconos del motor.
   CJM-SV-ALTO: alto de gráfico principal (D4: 360-480 px; en el móvil 360, no 300: hay que poder girarlo con el dedo) ── */
.sv .cjm-gf { --alto: 480px; }
.sv .cjm-gf .gf-lienzo .g3-boton svg { display: inline-block; width: 16px; height: 16px; }
.sv .cjm-gf .gf-lienzo .cjm-reproducir svg { width: 14px; height: 14px; }
.cjm-escena { height: 480px; }
/* la ayuda («arrastra para girar…»), arriba: abajo choca con la barra cuando el panel va al lado */
.sv .cjm-gf .g3-ayuda { top: var(--sp-3); bottom: auto; right: var(--sp-3); }
.sv .cjm-marco { margin-top: 0; }
/* el panel va en el marco: en pantallas anchas, una columna a la derecha de la escena (no tapa el grafo); entre medias, sobre la
   escena como en el grafo de E7; en el móvil, debajo */
.cjm-marco { position: relative; }
@media (min-width: 1100px) {
  .cjm-marco { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-4); align-items: start; }
  .cjm-marco .cjm-panel { position: static; transform: none; visibility: visible; width: auto; max-width: none; max-height: 480px; }
}
.cjm-panel { top: var(--sp-3); bottom: auto; max-height: calc(100% - 24px); }
.cjm-panel h3 { margin-right: 0; font-size: var(--fs-grafico, 17px); }
.cjm-panel p { margin: var(--sp-3) 0 0; font-size: var(--fs-14); line-height: 1.55; color: var(--color-texto); }
.cjm-panel .cjm-nota { color: var(--color-texto-2); font-size: var(--fs-13); }
.cjm-panel .cjm-cifra b { font-size: var(--fs-22); font-variant-numeric: tabular-nums; color: var(--color-texto-fuerte); }
.cjm-panel .cjm-rot { padding-left: 10px; border-left: 2px solid var(--g3-vidrio-linea); color: var(--color-texto-2); }
.cjm-panel .cjm-linea b { font-weight: var(--peso-fuerte); }
.cjm-panel .cjm-lectura { padding-left: 12px; border-left: 2px solid var(--color-aviso-adorno, var(--g3-vidrio-linea)); color: var(--color-texto); }
.cjm-panel .cjm-pares, .cjm-panel .cjm-apellidos { color: var(--color-texto); }
.cjm-panel .cjm-apellidos span { color: var(--color-texto-2); }
.cjm-panel ul.cjm-cifras { margin: var(--sp-3) 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: var(--fs-14); }
.cjm-panel ul.cjm-cifras b { font-variant-numeric: tabular-nums; color: var(--color-texto-fuerte); }
.cjm-panel a { color: var(--color-acento); }
/* leyenda del pie (.gf-leyenda): tipos que filtran y, aparte, lo que no se pulsa (líneas, tamaño) */
.sv .cjm-gf .gf-leyenda .punto { border-radius: 50%; }
.sv .cjm-gf .gf-leyenda li.cjm-ley-nota { color: var(--color-texto-3); }
.cjm-l { display: inline-block; width: 18px; height: 0; margin: 0 6px 3px 0; vertical-align: middle; border-top: 2px solid var(--g3-c1); }
.cjm-l-cargo { border-top: 2px dashed var(--g3-neutro); }
.cjm-l-soc { border-top: 1px solid var(--g3-neutro); }
/* etiquetas sobre la escena */
.cjm-etq-ayto { font-weight: var(--peso-fuerte); font-size: 14px; border: 1.5px solid var(--g3-sel); }
.cjm-etq-concejal { font-size: 13px; padding: 2px 8px; color: var(--color-texto-2); }
.cjm-etq-prov { background: transparent; border-color: transparent; color: var(--color-texto-2); font-size: 13px; font-weight: var(--peso-medio); padding: 0; }
.cjm-tip { max-width: 280px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; color: var(--color-texto); }
.cjm-tip b { display: block; font-size: 14px; color: var(--color-texto-fuerte); }
.cjm-tip span { color: var(--color-texto-2); }
/* sin WebGL: la escena se reduce al aviso y la lista de «Datos» lo dice todo */
.cjm-sin-webgl .cjm-escena { height: auto; min-height: 120px; }
.cjm-sin-webgl .g3-barra, .cjm-sin-webgl .g3-ayuda { display: none; }
.cjm-sin-webgl .g3-cargando { position: static; }
.sv .cjm-sin-webgl .cjm-gf { --alto: 120px; }

/* ── La lista equivalente (tabla densa) ── */
.sv .cjm-td .cjm-rel-celda { white-space: normal; padding-top: 6px; padding-bottom: 6px; line-height: 1.4; }
.sv .cjm-rel { display: block; font-size: var(--fs-nota); line-height: 1.45; }
.sv .cjm-rel + .cjm-rel { margin-top: 2px; }
.sv .cjm-lista > .nota { margin: 0 0 var(--sp-2); }
.sv .cjm-lectura-lista { margin-top: var(--sp-3); max-width: var(--lectura); }
.sv .cjm-vacio { color: var(--color-texto-2); }

/* ── El bloque de la ficha del ayuntamiento: dibujo radial en SVG (≤ 200 px). Sus colores, aquí (la ficha no carga grafo3d.css) ── */
.cjm-ficha { --cjm-mun: #2388c3; --cjm-pub: #1090a1; --cjm-priv: #a166ae; --cjm-con: #a1a5ab; --cjm-ayto: #1f4068; --cjm-linea: #7b8290; }
:root[data-tema="oscuro"] .cjm-ficha { --cjm-mun: #3b9bd7; --cjm-pub: #09a4b8; --cjm-priv: #b478c2; --cjm-con: #5f6b7d; --cjm-ayto: #f7f5f0; --cjm-linea: #7d8aa3; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .cjm-ficha { --cjm-mun: #3b9bd7; --cjm-pub: #09a4b8; --cjm-priv: #b478c2; --cjm-con: #5f6b7d; --cjm-ayto: #f7f5f0; --cjm-linea: #7d8aa3; } }
.sv.cjm-ficha { margin: var(--sp-8) 0; padding-top: var(--sp-5); border-top: 1px solid var(--color-borde-fuerte); scroll-margin-top: 80px; }
.sv .cjm-gf-ficha { --alto: 160px; }
/* CJM-SV-FUNDIDA: la ficha fundida carga también graficos_ficha.css, cuyos .gf-* globales (los gráficos de ficha de antes) chocan
   con los del sistema: .gf-lienzo { display: none } escondía el dibujo, y .gf-lectura y .gf-leyenda traían su ancho y su margen */
.sv.cjm-ficha .gf-lienzo { display: block; }
.sv.cjm-ficha .gf-lectura { max-width: none; margin-bottom: 0; font-size: inherit; line-height: inherit; color: inherit; }
.sv.cjm-ficha .gf-leyenda { margin: 0; }
.sv .cjm-gf-ficha .gf-lienzo .cjm-svg { width: auto; max-width: 100%; height: 160px; }
/* el bloque es él mismo .sv (la ficha aún no es una página del sistema): selectores .sv.cjm-ficha */
.sv.cjm-ficha .sec-cab { grid-template-columns: minmax(0, 1fr) auto; }
.sv.cjm-ficha .sec-cab .chip { grid-column: 2; grid-row: 1; }
.sv.cjm-ficha .sec-sub { grid-column: 1 / -1; }
.sv.cjm-ficha .gf-leyenda .punto { border-radius: 50%; }
.sv.cjm-ficha .punto.k-mun { background: var(--cjm-mun); } .sv.cjm-ficha .punto.k-pub { background: var(--cjm-pub); }
.sv.cjm-ficha .punto.k-priv { background: var(--cjm-priv); } .sv.cjm-ficha .punto.k-con { background: var(--cjm-con); }
.cjm-svg line { stroke: var(--cjm-linea); stroke-width: 1; opacity: 0.6; }
.cjm-svg line.cjm-l-adjudicacion { stroke: var(--cjm-mun); stroke-width: 1.6; opacity: 0.8; }
.cjm-svg line.cjm-l-cargo { stroke-dasharray: 3 3; }
.cjm-svg .cjm-n-ayto { fill: var(--cjm-ayto); }
.cjm-svg .cjm-n-mun { fill: var(--cjm-mun); }
.cjm-svg .cjm-n-pub { fill: var(--cjm-pub); }
.cjm-svg .cjm-n-priv { fill: var(--cjm-priv); }
.cjm-svg .cjm-n-con { fill: var(--cjm-con); }

@media (max-width: 767px) {
  /* mandos compactos: mandato y comunidad en una fila; el buscador (y «Todos los ayuntamientos») en otra; los años, en una fila que desliza */
  .sv .cjm-mandos { gap: var(--sp-3); }
  .sv .cjm-mandos > .mando { flex: 1 1 140px; }
  .sv .cjm-mandos > div.mando:first-of-type { flex: 0 0 auto; } .sv .cjm-mandos [data-cjm-mandato] { padding: 0 8px; }
  .sv .cjm-mandos select.campo { width: 100%; }
  .sv .cjm-mandos > .cjm-m-buscar { flex: 1 1 180px; width: auto; }
  .sv .cjm-mandos > [data-cjm-anios-mando] { flex: 1 1 100%; }
  .sv .cjm-anios-fila { width: 100%; } .sv .cjm-anios-fila .seg { flex: 1 1 auto; min-width: 0; }
  .sv .cjm-volver { flex: 0 0 auto; }
  .cjm-escena { height: 360px; min-height: 0; max-height: none; }
  .sv .cjm-gf { --alto: 360px; }
  .cjm-panel { position: static; transform: none; visibility: visible; width: auto; max-width: none; max-height: none; margin: var(--sp-3) var(--margen-der, 16px) 0 var(--margen-izq, 16px);
    border-radius: 14px; padding: var(--sp-5) var(--sp-4); background: var(--color-superficie); box-shadow: none; }
}