/* Modo embed — el tablero se muestra dentro de un <iframe> en un sitio ajeno (abc.gob.ar).
   Se activa agregando ?embed=1 a la URL del iframe. Objetivo: que abc pueda embeber el
   tablero como hoy embebe el Tableau, sin duplicar chrome, con una toolbar de affordances
   igual que la de Tableau (pantalla completa + salir al sitio completo).
   Lógica: embed-mode.js. Spec: state/specs/2026-08-25-rediseno-tableros-chartjs.md.

   Dos affordances DISTINTOS (pedido explícito 2026-08-27):
   - ⤢  Pantalla completa  → Fullscreen API real, NO navega (requiere allow="fullscreen" en el iframe).
   - ↗  Ver en el sitio     → abre la versión standalone en una pestaña nueva (escapa del iframe). */

/* Dentro de abc el portal ya pone su propio header/nav → el mock del prototipo sobra.
   header entero (h1 + .bajada + .lib) porque la página host de abc.gob.ar YA tiene su
   propio <h1> con el nombre del tablero — repetirlo infla el alto vertical sin agregar
   información (spec 2026-08-29-vista-embebida-criterios.md §1.HOW). */
html.embed .nav-abc,
html.embed header,
html.embed .lib { display: none !important; }

/* Sin el gradiente pesado de portada: dentro de un iframe queda más limpio y liviano. */
html.embed body { background: #fff; }
html.embed .hoja:first-of-type { padding-top: var(--ck-sp-3, 12px); }

/* Toolbar de affordances — abajo a la derecha (Cambio 2: top→bottom).
   Oculta por defecto; embed-mode.js la inyecta y html.embed la muestra. */
.embed-toolbar {
  position: fixed; bottom: 10px; right: 12px; z-index: 9999;
  display: none; align-items: center; gap: 6px;
}
html.embed .embed-toolbar { display: inline-flex; }

.embed-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--ck-fuente, system-ui, sans-serif);
  font-size: .82rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  color: #fff; background: var(--ck-accion, #2b3ce0);
  border: none; padding: 7px 11px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  transition: filter .12s ease, transform .12s ease;
}
.embed-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.embed-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.embed-btn .ico { font-size: 1rem; line-height: 1; }

/* Ambos botones icon-only (Cambio 2: salir también icon-only como el de fullscreen) */
.embed-btn--fs,
.embed-btn--sitio { padding: 7px 9px; }

/* Tooltip "Ver en el sitio" (Cambio 2): aparece encima del botón al hover/primer-tap */
.embed-tooltip {
  position: absolute; bottom: calc(100% + 6px); right: 0;
  background: rgba(0,0,0,.75); color: #fff;
  font-size: .72rem; padding: 4px 8px; border-radius: 4px;
  white-space: nowrap; pointer-events: none;
}

/* ── "Personalizar" (layout-configurable): no tiene sentido en un iframe ──── */
html.embed [id^="btnPersonalizar-"] { display: none !important; }

/* ── Controles colapsados detrás de un botón + popover flotante (spec §1.HOW/§4.2-3) ──
   embed-mode.js envuelve .barra-control en .embed-controles-wrap e inserta el botón
   .embed-controles-btn delante. Colapsado por defecto: .barra-control pasa de flujo
   normal (sticky, empuja layout) a position:absolute (flota, no reflow) y oculta hasta
   que se abre. Mismo criterio anti-desborde que .rp-dropdown (abre hacia la izquierda /
   se ajusta al viewport, ver media query abajo). */
.embed-controles-wrap { position: relative; }
html.embed .embed-controles-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ck-fuente, system-ui, sans-serif);
  font-size: .82rem; font-weight: 600; color: var(--ck-tinta, #1a1a1a);
  background: var(--ck-papel, #fff); border: 1px solid var(--ck-borde, #d8dde3);
  border-radius: var(--ck-r-pill, 999px); padding: 7px 12px; cursor: pointer;
  box-shadow: var(--ck-sh-1, 0 1px 3px rgba(0,0,0,.08));
  margin-bottom: var(--ck-sp-2, 8px);
}
html.embed .embed-controles-btn:hover { background: var(--ck-lienzo, #f4f6f8); }
html.embed .embed-controles-btn:focus-visible { outline: 3px solid var(--ck-accion, #2b3ce0); outline-offset: 2px; }
html.embed .embed-controles-btn .ico { font-size: 1rem; line-height: 1; }
html.embed .embed-controles-btn[aria-expanded="true"] { background: var(--ck-lienzo, #f4f6f8); }

/* .barra-control pasa a popover: oculto hasta .embed-abierta, flota sin empujar layout.
   top: calc(100% + 4px), NO top: 0 (obs. Julián 2026-09-04 §5, reproducido con Playwright):
   con top:0 el popover abierto TAPABA al propio botón ⚙ (ambos en x24,y12 — medido
   elementFromPoint sobre el centro del botón = .grupo-control del popover), así que el
   segundo click caía dentro del popover, el handler de click-afuera lo ignoraba (está
   dentro del wrap) y no había forma visible de cerrarlo. Debajo del botón, el toggle
   abre/cierra siempre; click-afuera y Escape siguen funcionando igual. */
html.embed .embed-controles-wrap > .barra-control {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
  display: none; flex-direction: column; align-items: stretch;
  width: max-content; max-width: min(92vw, 520px);
  margin-bottom: 0;
}
html.embed .embed-controles-wrap > .barra-control.embed-abierta { display: flex; }
html.embed .embed-controles-wrap > .barra-control .grupo-control { flex-wrap: wrap; }

@media (max-width: 640px) {
  /* En mobile no hay espacio para flotar a la izquierda del botón sin desbordar
     el borde derecho — mismo problema que .rp-dropdown, mismo fix (anclar al ancho
     disponible en vez de al max-content del contenido). */
  html.embed .embed-controles-wrap > .barra-control {
    left: 0; right: 0; width: auto; max-width: none;
  }
}

/* ── Sidebar de indicadores T3 colapsado: solo íconos, nunca texto cortado (spec §3/§4.5) ──
   .sidebar-content tiene min-width:186px (definido en el <style> propio de T3) — eso es lo
   que hoy gana sobre el width:34px de .colapsado y deja el texto visualmente cortado.
   Acá no hay CSS-only que oculte SOLO el texto sin ocultar el ícono a la vez si ambos viven
   en el mismo nodo de texto — por eso pintarSidebar() (tablero-3-indicadores-chartjs.html)
   ahora emite dos <span> separados: .ind-abbr (sigla, 2-3 letras) y .ind-nombre-full (nombre
   completo) — acá alternamos cuál se ve según .colapsado. */
/* Desktop/tablet (>760px, coexiste con el sidebar vertical plegable existente).
   A ≤760px el sidebar cambia a strip horizontal (bloque siguiente) — ahí NO aplica
   este layout de ícono-centrado porque .sidebar-content pierde el ancho fijo. */
@media (min-width:761px){
  .sidebar-indicadores.colapsado { min-width: 0; }
  .sidebar-indicadores.colapsado .sidebar-content { min-width: 0; width: 34px; overflow: hidden; }
  .sidebar-indicadores.colapsado h2,
  .sidebar-indicadores.colapsado .ind-nombre-full,
  .sidebar-indicadores.colapsado .marca-sin-dato { display: none; }
  .sidebar-indicadores:not(.colapsado) .ind-abbr { display: none; }
  .sidebar-indicadores.colapsado .indicador-btn {
    display: flex; align-items: center; justify-content: center;
    padding: var(--ck-sp-2) 0; text-align: center;
  }
  .sidebar-indicadores.colapsado .ind-abbr {
    font-size: .68rem; font-weight: 700; letter-spacing: .01em;
  }
  .sidebar-indicadores.colapsado .ind-fila { gap: 0; }
  .sidebar-indicadores.colapsado .def-btn { display: none; }
}

/* ── Sidebar indicadores en embed mobile: strip horizontal scrolleable ────────
   En viewport ≤760px el sidebar se apila sobre el gráfico — en embed, eso
   entierra el gráfico debajo de 10 botones antes de que empiece el contenido.
   Fix: reorientar el sidebar-content a fila horizontal con overflow-x:auto.
   Los botones ℹ️ de definición se ocultan (no tienen espacio en el strip).
   Íconos en vez de nombre completo (mismo criterio que desktop): además de prolijo,
   ACHICA el ancho total de la fila — es lo que corrige el overflow horizontal real
   (medido con Playwright: NAV llegaba a 1413px de ancho a 390px de viewport porque
   ningún ancestro de #listaIndicadores tenía min-width:0 / width acotado — un flex
   item sin overflow propio se dimensiona al max-content de sus hijos en vez de
   respetar el contenedor, y el overflow-x:auto de #listaIndicadores solo puede
   "contener" el desborde si sus ancestros no crecen primero para evitarlo). */
@media (max-width:760px){
  /* .franja-indicador es display:flex (base rule, para el split sidebar+gráfico de
     desktop) con align-items:flex-start — en flex COLUMN (activado acá mismo por la
     regla ya existente .franja-indicador{flex-direction:column}), align-items controla
     el eje horizontal: flex-start = cada item se dimensiona a su max-content en vez de
     ocupar el ancho del contenedor. Por eso .tarjeta (que envuelve el chart con
     .ck-chart-scroll > min-width:480px) también se salía del viewport — mismo bug de
     fondo que el sidebar, mismo fix: forzar el ancho del contenedor en vez de dejar que
     el hijo más ancho decida por todos. */
  html.embed .franja-indicador{align-items:stretch}
  html.embed .sidebar-indicadores h2{display:none}
  html.embed .sidebar-indicadores,
  html.embed .sidebar-content{width:100%;max-width:100%;min-width:0}
  html.embed #listaIndicadores{
    display:flex;flex-direction:row;flex-wrap:nowrap;
    overflow-x:auto;max-width:100%;gap:var(--ck-sp-2);padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
  }
  html.embed .ind-fila{flex-shrink:0}
  html.embed .indicador-btn{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    white-space:nowrap;padding:var(--ck-sp-2) var(--ck-sp-2);min-width:44px;text-align:center;
  }
  html.embed .ind-nombre-full,
  html.embed .marca-sin-dato{display:none}
  html.embed .ind-abbr{display:block;font-size:.68rem;font-weight:700;letter-spacing:.01em}
  html.embed .def-btn{display:none}
}

/* ── regionPicker dropdown: abrir hacia la izquierda para no desbordar el borde derecho ── */
.rp-dropdown{right:0;left:auto}

/* ── T2: botón "ver serie completa / ver menos años" (reducción de densidad mobile,
   spec §2.1/§4.9). Visibilidad la controla el JS (atributo hidden) — este bloque solo
   pone la forma, coherente con .embed-controles-btn.
   :not([hidden]) — bug real cazado en la pasada de blindaje de margen (2026-08-29 T9):
   `.embed-rango-toggle{display:inline-flex}` empataba en especificidad con la regla
   UA `[hidden]{display:none}` (ambas 0-1-0) y ganaba por orden de fuente (esta hoja
   carga después) — el botón quedaba VISIBLE (26px de alto+margen) en desktop aunque
   JS pusiera btn.hidden=true, robando margen real al presupuesto de altura de T2. */
.embed-rango-toggle:not([hidden]){
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--ck-fuente,system-ui,sans-serif);font-size:.78rem;font-weight:600;
  color:var(--ck-accion,#2b3ce0);background:var(--ck-lienzo,#f4f6f8);
  border:1px solid var(--ck-borde,#d8dde3);border-radius:var(--ck-r-pill,999px);
  padding:6px 12px;cursor:pointer;margin-bottom:var(--ck-sp-3,12px);
}
.embed-rango-toggle:hover{background:var(--ck-borde,#d8dde3)}
.embed-rango-toggle:focus-visible{outline:3px solid var(--ck-accion,#2b3ce0);outline-offset:2px}

/* ── §7 spec 2026-08-29: recorte de chrome adicional (footer + aire de página) ────────────
   .hoja-pie (footer + sello + CTA "Ver fuente y metodología") es redundante en embed: la
   página host de abc.gob.ar YA pone su propio footer institucional alrededor del iframe —
   confirmado igual que el <h1> del header (§1.HOW). No se toca fuera de embed. */
html.embed .hoja-pie { display: none !important; }

/* padding-bottom de main.hoja es var(--ck-sp-8,64px) por defecto — aire pensado para página
   standalone. Dentro de un iframe ya acotado a la altura del Tableau no hace falta tanto;
   se reduce a la mitad (ck-sp-5=24px) en vez de eliminarlo del todo, para que el último
   bloque de datos no quede pegado al borde del iframe. Selector con más especificidad que
   `.hoja` (html.embed + main + .hoja) gana sin necesitar !important. */
html.embed main.hoja { padding-bottom: var(--ck-sp-3, 12px); }

/* ── Callouts aviso-relevamiento (T1: avisoRegionAnual/avisoDistritoAnual) — spec §7 ──────
   Comunican una limitación REAL del dato (Región/Distrito no siguen al selector de
   Relevamiento — quedaron fijos de una carga anterior) — NO son redundantes con la página
   host, así que NO se ocultan. Se compactan al ícono ⓘ ya existente (.callout .marca) con
   el texto disponible en un popover flotante al hover/focus/tap — mismo patrón sin-reflow
   que .embed-controles-wrap. Toggle de click/teclado lo agrega embed-mode.js
   (montarAvisosEmbed) SOLO en embed — el markup/JS no corre en standalone. */
html.embed .aviso-relevamiento {
  position: relative;
  display: inline-flex;
  width: auto;
  padding: 0;
  margin: 0 0 var(--ck-sp-3, 12px);
  background: transparent;
  border: none;
}
html.embed .aviso-relevamiento .marca { cursor: help; }
html.embed .aviso-relevamiento .marca:focus-visible {
  outline: 3px solid var(--ck-accion, #2b3ce0); outline-offset: 2px;
}
html.embed .aviso-relevamiento > div {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 210;
  width: max-content; max-width: min(92vw, 340px);
  background: var(--ck-papel, #fff); border: 1px solid var(--ck-borde, #d8dde3);
  border-radius: var(--ck-r-caja, 8px); padding: var(--ck-sp-3, 12px);
  box-shadow: var(--ck-sh-1, 0 1px 3px rgba(0,0,0,.08));
  font-size: var(--ck-fs-caption, .8rem); color: var(--ck-suave, #55606b);
  display: none;
}
html.embed .aviso-relevamiento:hover > div,
html.embed .aviso-relevamiento.embed-abierto > div { display: block; }
/* Ícono mudado a la línea del título (obs. Julián 2026-09-04 §4, data-embed-junto-titulo):
   dentro de .franja-cab no debe empujar la baseline ni dejar margen de fila propia. */
html.embed .franja-cab .aviso-relevamiento { margin: 0; align-self: center; }

/* ── Fullscreen real (Cambio 3, REEMPLAZADO 2026-08-31): el ajuste de alto de chart al
   entrar en fullscreen se calcula ahora en JS (embed-mode.js → ajustarAltoFullscreen()),
   no acá. La regla vieja (`html.is-fullscreen .chart-wrap, .ck-chart { height: calc(100vh
   - 220px) !important }`) era dead code para T2 (sus clases reales son .grafico-wrap/
   .mini-chart-wrap, nunca matcheaban esos selectores) y sobre-agresiva para T3 (crecía a
   860/548px sin descontar el chrome fijo que sigue en pantalla — toolbar, popover, tabs,
   cabecera, texto — desbordando +162px/+60px, ver spec 2026-08-31-objetivos-consolidados-
   tableros-iframe.md §3). Un `calc()` con constante fija no podía servir para "dar más
   aire" (T2, hoy no crecía nada) y "recortar sobra" (T3, crecía de más) a la vez con el
   mismo offset — el chrome real difiere por tablero/tab. El reemplazo mide el delta real
   (main.hoja bottom vs. html.clientHeight, mismo método de la spec 29/8) y lo aplica al
   chart visible de mayor alto de la vista/tab activa — un solo mecanismo que agranda o
   recorta según haga falta, sin selector especial por tablero. */

/* ── Scroll horizontal para gráficos densos (aplica siempre, no solo en embed) ──────────────
   Patrón Chart.js: el wrapper OUTER hace overflow-x: auto; el INNER (grafico-wrap / chart-wrap)
   tiene un min-width que le impide aplastarse bajo ~480px. Chart.js dimensiona al INNER,
   que a viewport estrecho es más ancho que la pantalla → el outer scrollea.
   En desktop (820px+) el inner nunca desborda → no hay scrollbar. */
.ck-chart-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 520px) {
  .ck-chart-scroll > .grafico-wrap,
  .ck-chart-scroll > .chart-wrap,
  .ck-chart-scroll > .ck-chart {
    min-width: 480px;
  }
}

/* ── Tabs para grupos de bloques secundarios en embed (T2: Sexo/Predios/Modalidades;
   T3: Proceso y sobreedad/Trayectoria Distrito) — spec §8.2, decisión de Julián
   T2-V1/T3-V3. embed-mode.js (montarTabsEmbed) inyecta la barra e togglea
   .embed-tab-oculto en cada bloque — sin ese JS (o fuera de embed) los bloques quedan
   en su disposición original (grid en T2, franjas apiladas en T3), nada se pierde. */
html.embed .embed-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--ck-borde, #d8dde3);
  margin-bottom: var(--ck-sp-3, 12px);
}
html.embed .embed-tab-btn {
  flex: 1; font-family: var(--ck-fuente, system-ui, sans-serif);
  font-size: .8rem; font-weight: 700; color: var(--ck-suave, #55606b);
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 9px 6px; cursor: pointer;
}
html.embed .embed-tab-btn[aria-selected="true"] {
  color: var(--ck-accion, #2b3ce0); border-bottom-color: var(--ck-accion, #2b3ce0);
}
html.embed .embed-tab-btn:focus-visible { outline: 3px solid var(--ck-accion, #2b3ce0); outline-offset: -2px; }
html.embed .embed-tab-oculto { display: none !important; }

/* T2: la grilla de 3 paneles secundarios pasa de grid a bloque único bajo las tabs
   (con 2 de los 3 ocultos, mantener el grid desperdiciaría el ancho igual). */
html.embed .grilla-secundarios { display: block; margin-bottom: var(--ck-sp-4, 16px); }

/* ── T3 embed: tarjeta principal recortada (spec §8.2, decisión T3-V3) ──────────────
   Cabecera a 1 línea: título + bajada fluyen como un mismo párrafo en vez de 2-3
   líneas apiladas con margen propio. OJO: subt-ind acá es una oración completa de
   definición del indicador (no el placeholder corto del picker) — se deja fluir y
   wrapear en vez de forzar 1 sola línea visual a costa de truncar el texto real. */
html.embed .cab-tarjeta { margin-bottom: var(--ck-sp-2, 8px); }
html.embed .titulo-ind { display: inline; font-size: 1rem; }
html.embed .subt-ind { display: inline; font-size: .76rem; margin: 0 0 0 6px; }
/* fecha-dato es metadata de extracción (redundante con el contexto de la página host,
   mismo criterio que el footer/sello ya ocultado en §7) — no es el dato del indicador. */
html.embed .fecha-dato { display: none; }

/* Controles de eje (Desde/Hasta/Escala completa/Rango real) detrás de "Vista avanzada"
   — mismo criterio que .barra-control §1.HOW: no desaparecen, dejan de ocupar espacio
   permanente. body.avanzada ya lo controla #bAvanzada (ahora vive dentro del popover
   de .embed-controles-wrap) — acá solo se ata .control-eje al mismo interruptor. */
html.embed .control-eje { display: none; }
html.embed body.avanzada .control-eje { display: flex; }

/* ── T2/T3 embed, Ronda 2 (spec §8.2, diagnóstico Fable 2026-08-29 ~15:30) ──────────────────
   La implementación anterior portó los tabs pero se quedó a mitad de camino: el picker T2-V1/
   T3-V3 también especificaba chart principal más bajo + chrome compacto, y eso no se aplicó.
   "Chart sin reducir" en la decisión de Julián para T2 significaba "sin recortar AÑOS de la
   serie" (14 años se mantienen), no "sin achicar el alto del área de ploteo" — Chart.js ya usa
   maintainAspectRatio:false en todo el kit, así que bajar el alto del contenedor CSS no pierde
   ningún año, solo cambia la proporción visual. */

/* T2 — panel principal: chart 380→~216px, cabecera a 1 línea, callout con "ver más". */
html.embed .grafico-wrap { height: 216px; }

html.embed .panel-grafico .panel-cab { margin-bottom: var(--ck-sp-2, 8px); align-items: center; }
html.embed .panel-grafico .panel-cab > div:first-child {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
}
html.embed .panel-grafico .panel-cab h2 { font-size: 1rem; margin: 0; }
/* El subtítulo describe CÓMO leer el chart ("barras apiladas... misma lectura que el original")
   — es copy de UI, no un dato: se repite igual en el callout de lectura de abajo y en el propio
   chart. Se oculta acá (no en standalone) para que la cabecera entre en 1 línea real junto al
   segmentado Apiladas/Líneas — a 824px de ancho, título+subtítulo completos (~840px) ya
   desbordaban la fila y forzaban un wrap a 2 niveles aunque el subtítulo estuviera en inline. */
html.embed .panel-grafico .panel-cab .subt { display: none; }
html.embed .panel-grafico .panel-cab-der { gap: 4px; }
/* Scopeado a .panel-grafico (T2, exclusivo de tablero-2) — OJO: ".callout" sola matchearía
   también el callout del eje de T3 (.callout.aviso-relevamiento), que ya tiene su propio
   tratamiento de padding:0/margin en la regla genérica .aviso-relevamiento de más arriba;
   pisarla acá con la misma especificidad (html.embed + 1 clase) rompía ese popover por orden
   de fuente — bug real cazado en esta misma pasada, ver medición panel principal T3. */
html.embed .panel-grafico .callout { margin-top: var(--ck-sp-3, 12px); padding: var(--ck-sp-3, 12px); }
html.embed #lecturaSerie.ck-clamp-corto { -webkit-line-clamp: 1; }

/* fila de cifras clave (Total/Estatal/Privado): a ~258px de tarjeta el valor grande
   (--ck-fs-h3, 25px) + el delta forzaban un wrap a 2 líneas (78px de alto solo esa fila) —
   se achica el tipo para que entren en 1 línea. Ningún dato se pierde, solo se lee más chico. */
html.embed .fila-cifras .cifra { padding: var(--ck-sp-2, 8px) var(--ck-sp-3, 12px); }
html.embed .fila-cifras .cifra .val { font-size: 1.05rem; }
html.embed .fila-cifras .cifra .val small { font-size: .68rem; }

/* paneles secundarios (Sexo/Predios/Modalidades — 1 visible a la vez detrás de las tabs, spec
   §8.2): mismo criterio "sin recortar dato, más bajo" que el chart principal — 2 barras no
   necesitan 140px de alto para leerse. */
html.embed .mini-chart-wrap { height: 85px; }
html.embed .panel-secundario { padding: var(--ck-sp-3, 12px); gap: var(--ck-sp-1, 4px); }

/* 3er panel secundario ("Por nivel y modalidad", data-cat="escuelas") no tiene mini-chart:
   es una tabla (table.ck-datos, max-height:220px/overflow-y:auto en la hoja de estilos
   propia de T2, fuera de embed) — quedó afuera del recorte de .mini-chart-wrap de arriba
   porque no es ese selector, y medía 959.7px de main.hoja al abrir esa tab (spec §9 pasada
   2026-08-29, criterio 4: "mismo tratamiento de altura reducida que el mini-chart de los
   otros 2 paneles"). Mismo alto que .mini-chart-wrap (85px) para que las 3 tabs pesen
   parecido; el dato completo sigue accesible con el scroll interno de la tabla (no se
   pierden filas, solo se ve menos de entrada — mismo criterio que el resto del recorte). */
html.embed .panel-secundario[data-cat="escuelas"] table.ck-datos { max-height: 85px; }

/* "ver más" genérico (embed-mode.js: montarVerMasEmbed, expuesto en window.EmbedMode) — clampea
   un párrafo a 2 líneas por defecto con un botón toggle sin popover (a diferencia de
   .aviso-relevamiento, acá el contenido SIGUE en el flujo normal al expandir — es lectura, no
   un aviso de límite de dato). Usado por T2 (#lecturaSerie) y por T3 (nota de Proceso, ver
   tablero-3-indicadores-chartjs.html → pintarProceso()). */
html.embed .ck-clamp-corto {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html.embed .ck-clamp-abierto { display: block; -webkit-line-clamp: unset; overflow: visible; }
html.embed .ck-vermas-btn {
  display: inline-block; margin: 2px 0 0; font-size: .74rem; font-weight: 600;
  color: var(--ck-accion, #2b3ce0); background: none; border: none; padding: 0;
  cursor: pointer; font-family: inherit; text-decoration: underline;
}

/* T3 — sección "Proceso": cabecera compacta (el h2 de la franja es redundante cuando la franja
   ya está tabbeada — montarTabsEmbed pone data-embed-tabbed="1" en cada franja incluida en un
   set de tabs, y el label del tab botón ya dice "Proceso y sobreedad", mismo criterio que
   ocultar el <h1> del tablero completo en §1.HOW). */
html.embed [data-embed-tabbed] > .franja-cab h2 { display: none; }
html.embed [data-embed-tabbed] > .franja-cab { margin-bottom: var(--ck-sp-2, 8px); }
html.embed [data-embed-tabbed] > .franja-cab .sub-franja { font-size: .72rem; margin: 0; }

/* leyenda de Proceso (4 series apilables + 2 líneas = 6 chips): en vez de envolver a 2 filas
   (44px), 1 fila con scroll horizontal si hace falta — mismo patrón de strip que el sidebar de
   indicadores en mobile (colapsado ≠ inaccesible, ningún chip se recorta a la mitad). */
html.embed [data-bloque="proceso"] .ck-leyenda.ck-fila {
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  gap: var(--ck-sp-3, 12px); padding-bottom: 2px;
}
html.embed [data-bloque="proceso"] .ck-leyenda.ck-fila li { flex-shrink: 0; }

/* nota+procedencia de Proceso: mismo mecanismo ícono+popover que .aviso-relevamiento (T1/tarjeta
   principal de T3) — pintarProceso() envuelve el <p class="nota"> con la clase aviso-relevamiento
   y anida #procedenciaProceso adentro, así ambos quedan detrás del mismo click, sin reflow. El
   CSS del popover (position/display/hover) ya es genérico, definido más arriba en este archivo. */
html.embed [data-bloque="proceso"] .tarjeta { padding: var(--ck-sp-4, 16px); }

/* Aire entre secciones: sp-5 (24px) es presupuesto de página standalone: en embed, con varios
   bloques apilados dentro del presupuesto de altura del iframe, se tensa a sp-3 (12px). Lista
   explícita de T2/T3 (nunca los data-bloque de T1: provincia/region/distrito/dispersion — ya
   cerrados en la ronda anterior, no se tocan acá). */
html.embed [data-bloque="cifras"],
html.embed [data-bloque="grafico"],
html.embed [data-bloque="secundarios"],
html.embed [data-bloque="proceso"],
html.embed [data-bloque="trayectoria-distrito"] {
  margin-bottom: var(--ck-sp-3, 12px);
}

/* ── T1 embed: patrón V3 (spec §6.1/§8/§8.1) — número grande + mini-barra horizontal
   en vez de anillo/donut, elegido por Julián entre 4 variantes del picker
   (mock-abc-gob/variantes-t1-compacto.html). SOLO T1: los ids/clases de acá
   (#grillaProvincia, .tarjeta-compacta, .icono-mini, .cab, .cifra-grande, .sub-cifra,
   .sin-dato, .v3-*) son exclusivos de tablero-1-unidades-matricula-cargos.html —
   verificado que NO existen en T2/T3 antes de escribir esto sin prefijo de id, así
   que esto no puede pisar la reducción de densidad de T2 ni el sidebar de T3.
   Standalone (sin html.embed) no se toca: sigue con anillos Chart.js + leyenda. */

/* Provincia (franja con donuts hoy): se oculta el chrome del anillo/leyenda/título
   largo y se muestra .v3-tarjeta, que pintarProvincia()/renderV3() ya inyectan en el
   DOM (mismo dato de RESUMEN, sin fuente duplicada) — así sigue sincronizada con
   Relevamiento/Sector sin tocar la lógica de datos. */
/* .ck-grilla (chart-kit.css) usa minmax(250px,1fr): a los ~822px del iframe eso da
   3 columnas, no 4 — las 4 tarjetas de Provincia quedaban en 2 filas (3+1), duplicando
   el alto de la franja. V3 en el picker usa 4 columnas fijas (v3-grid); acá se replica
   solo para #grillaProvincia (id exclusivo de T1 — .ck-grilla no se usa hoy en T2/T3,
   verificado, así que este override no puede afectarlos aunque cambiara). */
/* Ancho fijo de 4 columnas SOLO en el rango de ancho del iframe real (>760px, mismo
   breakpoint que ya reusa el resto de esta hoja para mobile, spec §2.1) — a ≤760px
   se deja caer al auto-fit/minmax(250px,1fr) de base, que ya apila a 1-2 columnas.
   Sin este guard, 4 columnas fijas en 390px de mobile desbordaban horizontalmente
   (171px de scrollWidth de más, detectado con Playwright). */
@media (min-width: 761px) {
  html.embed #grillaProvincia {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ck-sp-2, 8px);
  }
}
html.embed #grillaProvincia .tarjeta {
  padding: 10px 12px 12px;
  gap: 3px;
}
html.embed #grillaProvincia .icono-caja {
  display: none;
}
/* Chrome del anillo oculto SOLO mientras el usuario no pidió una forma de gráfico explícita
   (obs. Julián 2026-09-04 §6): con body.vista-tortas (selector "Indicadores: Tortas") las
   tarjetas vuelven a mostrar título+canvas+leyenda — antes los pies se creaban en wraps con
   display:none y "Tortas" parecía no hacer nada en embed (medido: wraps 0×0, charts "pie"
   vivos). "Anillos" sigue mostrando V3 (la elección de la spec §6.1 para embed no cambia). */
html.embed body:not(.vista-tortas) #grillaProvincia .cuerpo-estandar,
html.embed body:not(.vista-tortas) #grillaProvincia .ck-donut-wrap,
html.embed body:not(.vista-tortas) #grillaProvincia .ck-leyenda,
html.embed body:not(.vista-tortas) #grillaProvincia .no-relevado,
html.embed body:not(.vista-tortas) #grillaProvincia .cifra-total-relevamiento {
  display: none;
}
html.embed body.vista-tortas #grillaProvincia .v3-tarjeta { display: none; }
html.embed body.vista-tortas #grillaProvincia .cuerpo-estandar .subt-ind,
html.embed body.vista-tortas #grillaProvincia .cuerpo-estandar .fecha-dato { display: none; } /* compacto: solo el título */
/* Sin el ícono grande, la cabecera queda solo con el ⓘ — se achica y se pega
   arriba a la derecha en vez de dejar el hueco que dejaba el ícono. */
html.embed #grillaProvincia .cab-tarjeta {
  position: absolute; top: 8px; right: 8px; margin: 0;
}
html.embed #grillaProvincia .info-pop summary {
  width: 20px; height: 20px; font-size: 11px;
}
html.embed #grillaProvincia .info-pop .globo { top: 24px; }

.v3-tarjeta { display: none; flex-direction: column; gap: 3px; }
html.embed .v3-tarjeta { display: flex; }
.v3-top { display: flex; align-items: center; gap: 8px; padding-right: 22px; }
.v3-icon { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; }
.v3-icon svg { width: 20px; height: 20px; display: block; }
.v3-label { font-size: .72rem; font-weight: 700; color: var(--ck-suave); }
.v3-num { font-size: 1.48rem; font-weight: 800; letter-spacing: -.02em; margin-top: 3px;
  font-variant-numeric: tabular-nums; color: var(--ck-tinta); }
.v3-bar { height: 6px; border-radius: 999px; overflow: hidden; margin-top: 5px; display: flex; }
.v3-bar-fill { height: 100%; }
.v3-caption { font-size: .66rem; color: var(--ck-tenue); margin-top: 2px; }
.v3-spacer { height: 6px; margin-top: 5px; }
.v3-nodato { font-size: .72rem; color: var(--ck-tenue); font-style: italic; }

/* Región/Distrito ya usan .tarjeta-compacta (sin donut) — se les aplica la misma
   escala tipográfica/densidad de V3 para que las 3 franjas se vean como un mismo
   sistema, y se saca el chip de fondo del ícono (Ley 6 del destilado maestro,
   restraint — mismo criterio que llevó a elegir V3 sobre el anillo en Provincia).
   No hay barra de proporción acá: Región/Distrito NO tienen desglose Estatal/Privado
   en los datos (datos-t2-t3/totales-por-{region,distrito}.json solo trae
   unidades_servicio/matricula + "prop_..._pba"/"prop_..._region" — proporción sobre
   el padre territorial, no split de gestión) — inventar una barra ahí sugeriría un
   dato que no existe. Se mantiene el texto de "% del total PBA"/"% de la región" que
   ya rendían tarjetaRegionHtml()/actualizarDistrito(), solo más compacto. */
html.embed .tarjeta-compacta {
  padding: 10px 12px 12px;
  gap: 3px;
}
html.embed .icono-mini {
  width: 20px; height: 20px; background: transparent; border-radius: 0;
}
html.embed .icono-mini svg { width: 20px; height: 20px; }
html.embed .tarjeta-compacta .cab strong {
  font-size: .72rem; font-weight: 700; color: var(--ck-suave);
}
html.embed .tarjeta-compacta .cifra-grande { font-size: 1.48rem; margin-top: 3px; }
html.embed .tarjeta-compacta .sub-cifra,
html.embed .tarjeta-compacta .sin-dato { font-size: .66rem; margin-top: 2px; }

/* ── Experimento 2026-09-02: variante switcher T3 "fuente-datos-mono" ────────────────────
   Pedido: probar en vivo el efecto de una fuente EXCLUSIVA para datos (IBM Plex Mono),
   separada de la fuente de headings/body (--ck-fuente) — mismo criterio verificado en
   todosobrelamora.vercel.app (research: visual-design/research/estetica-institucional-
   moderna.md §2 Palanca 1; catálogo: visual-design/referentes/catalogo-referentes.md §5.3).
   Mecanismo: chart-kit.css define --ck-fuente-datos con fallback a --ck-fuente (cero cambio
   visual por defecto, en T1/T2/T3 sin esta variante) — acá se pisa el valor SOLO bajo
   html[data-variante="fuente-datos-mono"] (mismo patrón de token-override-por-atributo que
   usa el switcher de acento en embed-mode.js, pero puramente CSS, sin JS de por medio: la
   variante ya deja el atributo puesto por marcarVariante() antes de cualquier render).
   Alcance (doctrina: mono SOLO en datos, NUNCA en headings/prosa):
     - table.ck-datos td (cifras de tabla) y .ck-leyenda strong (valor destacado de leyenda)
       → ya activados por chart-kit.css, acá solo se resuelve el valor real de la variable.
     - Labels de eje de Chart.js (canvas, no CSS) → fuera de alcance de esta hoja; T3 los
       resuelve aparte con Chart.defaults.font.family, ver comentario en
       tablero-3-indicadores-chartjs.html (bloque final de <script>).
     - table.ck-datos th (encabezados de columna) NO se toca a propósito: son etiquetas de
       columna, no cifras — mismo criterio "mono solo en datos, no en labels" del referente,
       leído estricto (nav/kicker/eyebrow tampoco son mono en el original, solo cifras). */
html[data-variante="fuente-datos-mono"] {
  --ck-fuente-datos: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}