/* La carta, versión 1: sobrio, móvil primero. Apilada (las franjas: la cruz arriba, el centro, la X abajo) cuando la
   pantalla es más alta que ancha; matriz 3×3 (la X en las esquinas, la cruz en los lados, el 0 en el centro) cuando
   no. Los tamaños de VG: hueco comprimido 48 px, tarjeta 160 px, bloque lo que le toca de pantalla. Hover solo donde
   hay puntero. Sin imágenes en sobrio: formas y texto. */
:root{
  --bg:#faf7f1; --fg:#1f1b16; --muted:#6b6257; --rule:#e2d9cc; --panel:#f1ebe0; --panel2:#e8e0d2;
  --accent:#7a4b1f; --accent-fg:#ffffff; --ok:#1b5e3a; --warn:#8a3f00; --warnbg:#f8e1cc;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --mono:ui-monospace,Menlo,Consolas,monospace;
  --hueco:48px; --tarjeta:160px; --radio:10px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#15130f; --fg:#ece6dc; --muted:#a39888; --rule:#312b24; --panel:#1e1a15; --panel2:#2a241c;
  --accent:#d9a46a; --accent-fg:#15130f; --ok:#9ad6b2; --warn:#f0b27a; --warnbg:#3a2412; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#15130f; --fg:#ece6dc; --muted:#a39888; --rule:#312b24; --panel:#1e1a15; --panel2:#2a241c;
  --accent:#d9a46a; --accent-fg:#15130f; --ok:#9ad6b2; --warn:#f0b27a; --warnbg:#3a2412; color-scheme:dark}
/* El color de cada punto de vista: una pincelada, también en sobrio. Los diez colores no están aquí: salen de la
   época (epoch.9.5.4) y la carta los pone como --pv-0 … --pv-9 al arrancar (carta/dom.js variablesDeColor). Cada
   carta lleva el de SU punto de vista (data-pv, data-centro, data-roseton), a cualquier profundidad: el borde en el
   color mezclado con la línea (más suave que las letras), el fondo con una tonalidad ligera, las letras intactas. */
:root{--tinte-borde:55%; --tinte-fondo:8%}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--tinte-borde:62%; --tinte-fondo:13%}}
:root[data-theme="dark"]{--tinte-borde:62%; --tinte-fondo:13%}
[data-pv="0"],[data-centro="0"],[data-roseton="0"],[data-color="0"]{--c:var(--pv-0)}
[data-pv="1"],[data-centro="1"],[data-roseton="1"],[data-color="1"]{--c:var(--pv-1)}
[data-pv="2"],[data-centro="2"],[data-roseton="2"],[data-color="2"]{--c:var(--pv-2)}
[data-pv="3"],[data-centro="3"],[data-roseton="3"],[data-color="3"]{--c:var(--pv-3)}
[data-pv="4"],[data-centro="4"],[data-roseton="4"],[data-color="4"]{--c:var(--pv-4)}
[data-pv="5"],[data-centro="5"],[data-roseton="5"],[data-color="5"]{--c:var(--pv-5)}
[data-pv="6"],[data-centro="6"],[data-roseton="6"],[data-color="6"]{--c:var(--pv-6)}
[data-pv="7"],[data-centro="7"],[data-roseton="7"],[data-color="7"]{--c:var(--pv-7)}
[data-pv="8"],[data-centro="8"],[data-roseton="8"],[data-color="8"]{--c:var(--pv-8)}
[data-pv="9"],[data-centro="9"],[data-roseton="9"],[data-color="9"]{--c:var(--pv-9)}
/* el blanco y el casi negro de la paleta (0 y 5) se mezclan con el gris para verse en el tema donde no contrastan */
:root{--neutro:var(--muted)}
.pv[data-pv],.nucleo[data-centro],.ocupante-ref[data-pv],.roseton[data-roseton],.pv[data-pv] .comprimido{
  --borde:color-mix(in oklab,var(--c,var(--rule)) var(--tinte-borde),var(--rule));
  --fondo:color-mix(in oklab,var(--c,var(--rule)) var(--tinte-fondo),var(--panel))}
[data-pv="0"],[data-centro="0"],[data-roseton="0"],[data-color="0"]{--c:color-mix(in oklab,var(--pv-0) 40%,var(--neutro))}
[data-pv="5"],[data-centro="5"],[data-roseton="5"],[data-color="5"]{--c:color-mix(in oklab,var(--pv-5) 70%,var(--neutro))}
.pv:not(.nivel-1)[data-pv],.nucleo[data-centro],.ocupante-ref[data-pv],.roseton[data-roseton],.pv[data-pv] .comprimido{border-color:var(--borde)}
.pv:not(.nivel-1)[data-pv],.nucleo[data-centro],.roseton[data-roseton],.pv[data-pv] .comprimido{background:var(--fondo)}
.ocupante-ref[data-pv]{background:color-mix(in oklab,var(--c,var(--rule)) var(--tinte-fondo),var(--panel2))}
.ocupantes.anidados{margin:4px 0 0 10px;padding-left:6px;border-left:2px solid color-mix(in oklab,var(--c,var(--rule)) 40%,transparent)}
@supports not (color:color-mix(in oklab,red,blue)){ /* sin color-mix: las mezclas salen de --pv-N-rgb (calculado al arrancar) con alfa */
  [data-pv],[data-centro],[data-roseton]{--borde:var(--rule);--fondo:var(--panel)}
  [data-pv="0"],[data-centro="0"],[data-roseton="0"]{--c:var(--muted)}
  .pv[data-pv],.nucleo[data-centro],.ocupante-ref[data-pv],.roseton[data-roseton],.pv[data-pv] .comprimido{border-color:var(--rule)}
  [data-pv="0"],[data-centro="0"],[data-roseton="0"]{--rgb:var(--pv-0-rgb,128 128 128)}
  [data-pv="1"],[data-centro="1"],[data-roseton="1"]{--rgb:var(--pv-1-rgb,128 128 128)}
  [data-pv="2"],[data-centro="2"],[data-roseton="2"]{--rgb:var(--pv-2-rgb,128 128 128)}
  [data-pv="3"],[data-centro="3"],[data-roseton="3"]{--rgb:var(--pv-3-rgb,128 128 128)}
  [data-pv="4"],[data-centro="4"],[data-roseton="4"]{--rgb:var(--pv-4-rgb,128 128 128)}
  [data-pv="5"],[data-centro="5"],[data-roseton="5"]{--rgb:var(--pv-5-rgb,128 128 128)}
  [data-pv="6"],[data-centro="6"],[data-roseton="6"]{--rgb:var(--pv-6-rgb,128 128 128)}
  [data-pv="7"],[data-centro="7"],[data-roseton="7"]{--rgb:var(--pv-7-rgb,128 128 128)}
  [data-pv="8"],[data-centro="8"],[data-roseton="8"]{--rgb:var(--pv-8-rgb,128 128 128)}
  [data-pv="9"],[data-centro="9"],[data-roseton="9"]{--rgb:var(--pv-9-rgb,128 128 128)}
  .pv:not(.nivel-1)[data-pv],.nucleo[data-centro],.ocupante-ref[data-pv],.roseton[data-roseton],.pv[data-pv] .comprimido{border-color:rgb(var(--rgb) / .55)}
  .pv:not(.nivel-1)[data-pv],.nucleo[data-centro],.roseton[data-roseton],.pv[data-pv] .comprimido{background:linear-gradient(rgb(var(--rgb) / .08),rgb(var(--rgb) / .08)),var(--panel)}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.4;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:env(safe-area-inset-bottom,0px);overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;min-height:32px;border-radius:8px;border:1px solid var(--rule);background:var(--panel);padding:4px 10px;max-width:100%;overflow-wrap:break-word;hyphens:auto}
button:disabled{opacity:.5;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (hover:hover){button:hover:not(:disabled){border-color:var(--accent)} .pv.nivel-1:hover .comprimido{border-color:var(--accent)} .ocupante-ref:hover{border-color:var(--accent)}}
input{padding:6px 8px;border-radius:8px;border:1px solid var(--rule);background:var(--bg);min-width:0;width:100%}
.configuracion select{padding:6px 8px;border-radius:8px;border:1px solid var(--rule);background:var(--bg);min-width:0;width:100%} /* el modelo (#4): una lista, como los campos de texto */
small{color:var(--muted)}
.enlace{border:0;background:var(--panel2);color:var(--accent);font-family:var(--mono);font-size:13px;padding:1px 6px;min-height:0}
.nada{color:var(--muted)}
.aviso{background:var(--warnbg);color:var(--warn);padding:8px 10px;border-radius:8px;font-size:14px;margin:8px 0}
.exito{background:var(--panel2);color:var(--ok);padding:8px 10px;border-radius:8px;font-size:14px;margin:8px 0}
.motivos{margin:6px 0;padding-left:18px;color:var(--warn);font-size:14px}
.numero{font-family:var(--mono);color:var(--muted);font-size:12px}
.quien{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* las opciones del 0 de mi alta (antes, la barra): dentro de la cruceta del sitio, en las posiciones del 0; lo común de los controles */
.sitio-controles{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:13px;color:var(--muted);min-width:0}
.sitio-controles .ajuste{display:inline-flex;gap:4px;align-items:center;min-width:0}
.sitio-controles select{padding:4px 6px;border-radius:8px;border:1px solid var(--rule);background:var(--panel);max-width:100%;min-height:32px}
.sitio-controles .tiempo{font-variant-numeric:tabular-nums}
.sitio-controles button{min-height:32px}
.sitio-controles .guardado{flex-basis:100%;font-size:11px}
.sitio-controles .sincronia{flex-basis:100%;font-size:11px;overflow-wrap:anywhere}
.sitio-controles .sincronia .error{color:var(--warn)}
.sitio-controles .sincronia .rechazados summary{cursor:pointer;color:var(--warn)}
.sitio-controles .sincronia .rechazados ul{margin:4px 0;padding-left:18px}
.sitio-controles .sincronia code{font-family:var(--mono)}

/* la escena */
.escena{position:relative;margin:10px 0;min-width:0}
.carta-apilada .escena{display:flex;flex-direction:column;gap:10px}
.franja{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:4px 0;min-width:0;scrollbar-width:thin}
.franja>.pv{scroll-snap-align:start;flex:0 0 auto}
.franja>.pv.nivel-3{flex:1 0 100%}

/* un PV lateral */
.pv{display:flex;flex-direction:column;gap:6px;border:1px solid var(--rule);border-radius:var(--radio);background:var(--panel);padding:6px;min-width:0;text-align:left;transition:flex-basis .15s ease,width .15s ease}
.pv.nivel-1{padding:0;border:0;background:transparent;align-items:center;justify-content:center}
.comprimido{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:var(--hueco);height:var(--hueco);border:1px solid var(--rule);border-radius:var(--radio);background:var(--panel);cursor:pointer;position:relative;overflow:hidden}
.comprimido .numero{position:absolute;top:2px;left:5px;font-size:10px}
.comprimido .dato{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.comprimido .dato small{font-size:10px;font-weight:400}
.comprimido .pieza{width:70%;height:70%}
.pv.nivel-2{width:var(--tarjeta);min-height:var(--tarjeta);cursor:pointer}
.carta-matriz .pv.nivel-2{width:auto}
.pv.nivel-3{width:100%;cursor:default}
.pv-cabeza{display:flex;gap:6px;align-items:baseline;font-size:13px;min-width:0}
.pv-cabeza .etiqueta{font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-cabeza .dato{font-variant-numeric:tabular-nums;color:var(--muted)}
.pv-pie{display:flex;gap:8px;align-items:center;font-size:12px;min-width:0;margin-top:auto}
.pv-pie .ayuda{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv.nivel-2 .pv-pie .ayuda{display:none}
.pv .pieza-imagen,.pv .pieza-lottie{width:min(100%,var(--tarjeta));aspect-ratio:1/1;display:block;align-self:center}
.pv.nivel-2 .pieza-imagen,.pv.nivel-2 .pieza-lottie{width:72px}
.forma{display:inline-block;width:12px;height:12px;border:1px solid var(--muted);border-radius:2px;vertical-align:middle}
.forma-punto{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.forma-rectangulo{width:18px;height:12px;background:var(--panel2)}
.forma-texto{width:auto;height:auto;border:0;border-bottom:2px solid var(--muted);min-width:14px}
.pieza-lottie.sin-lottie{background:var(--panel2);border-radius:8px}

/* el animado entero (etapa 5): el escenario de un PV (fondo, etapa, personaje, efectos) y su marco */
.pv,.nucleo{position:relative;isolation:isolate}
.escenario{position:relative;width:min(100%,var(--tarjeta));aspect-ratio:1/1;align-self:center;overflow:hidden;border-radius:8px}
.pv.nivel-3 .escenario,.nucleo.abierto .escenario{width:min(100%,calc(var(--tarjeta) * 2))}
.pv.nivel-2 .escenario{width:72px}
.escenario .pieza{position:absolute;inset:0;width:100%;height:100%;margin:0;object-fit:contain}
.escenario .pieza-fondo{z-index:0;object-fit:cover}
.escenario .pieza-etapa{z-index:1;transition:opacity .4s ease}
.escenario .pieza-personaje{z-index:2;inset:auto 4% 4% auto;width:42%;height:42%}
.pv.nivel-2 .escenario .pieza-personaje{display:none}
.escenario .pieza-efecto{z-index:3;pointer-events:none}
.escenario .pieza-efecto.acabado{display:none}
.escenario.consumida .pieza-etapa,.escenario.consumida .pieza-personaje{opacity:0}
.comprimido .pieza-marco{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:fill;pointer-events:none;z-index:4;margin:0;align-self:auto}
.comprimido .pieza-etapa{width:70%;height:70%}
.comprimido .escenario{position:absolute;inset:0;width:100%;height:100%;border-radius:0;pointer-events:none}
.pieza-elemento{width:20px;height:20px;object-fit:contain;vertical-align:middle;margin-right:4px}
.ocupante-ref .pieza-elemento{grid-row:span 2;width:28px;height:28px;margin:0}
.ocupante-ref:has(.pieza-elemento) .texto,.ocupante-ref:has(.pieza-elemento) .quien{grid-column:2}
.nucleo .representacion{position:relative}
.nucleo .representacion .escenario{position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto;pointer-events:none}
.hueco .pieza-imagen{width:24px;height:24px;object-fit:contain}

/* ocupantes */
.ocupantes{list-style:none;margin:0;padding:0;display:grid;gap:4px;min-width:0}
.ocupantes.disposicion-matrix{grid-template-columns:repeat(3,minmax(0,1fr))}
.ocupantes li{min-width:0}
.ocupante{display:block;font-size:14px;overflow-wrap:break-word;hyphens:auto;min-width:0} /* repaso beta #7: se parte entre sílabas (lang=es), no a mitad de palabra; anywhere solo donde no cabe de otro modo */
.ocupante-ref{display:grid;grid-template-columns:auto 1fr;gap:2px 6px;align-items:center;text-align:left;width:100%;padding:6px 8px;border:1px solid var(--rule);background:var(--panel2);border-radius:8px;color:var(--accent)}
.ocupante-ref .texto{grid-column:2;font-weight:500}
.ocupante-ref .quien{grid-column:2}
.ocupante-ref .rep-mini{grid-row:span 2;width:32px;height:32px;object-fit:contain}
.ocupante-ref:not(:has(.rep-mini)) .texto,.ocupante-ref:not(:has(.rep-mini)) .quien{grid-column:1 / -1}
.ocupante-decupla{display:flex;flex-wrap:wrap;gap:4px}
.ocupante-decupla .hoja{background:var(--panel2);border-radius:6px;padding:1px 6px;font-size:13px}
.cargar-mas button{width:100%;font-size:13px}
.pv.nivel-2 .ocupantes{font-size:13px;max-height:calc(var(--tarjeta) - 56px);overflow:hidden}

/* la guía del PV9 (solo lectura): a lo ancho de su franja o de su bloque */
.franja>.pv:has(.guia){flex:1 0 100%;width:auto;order:-1}
.guia{display:flex;flex-direction:column;gap:6px;width:100%;flex-basis:100%;margin-top:8px;padding:8px;border:1px solid var(--rule);border-radius:var(--radio);background:var(--bg);font-size:14px;min-width:0}
.guia-cabeza{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.guia-cabeza h4{margin:0;font-size:13px;color:var(--muted);font-weight:600}
.guia-cabeza .ayuda{flex:1 1 12ch}
.guia-historial{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:min(40vh,320px);overflow:auto}
.guia-historial li{white-space:pre-wrap;overflow-wrap:anywhere;padding:6px 8px;border-radius:8px;background:var(--panel2)}
.guia-historial .guia-yo{background:var(--panel);border:1px solid var(--rule)}
.guia-historial li b{font-size:11px;color:var(--muted);font-weight:500;margin-right:6px}
.guia-historial .guia-pensando{background:none;color:var(--muted);font-style:italic}
.guia-rapidas{display:flex;flex-wrap:wrap;gap:6px}
.guia-form{display:flex;gap:6px}
.guia-form button{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.guia-ajustes{border:1px solid var(--rule);border-radius:8px;margin:8px 0;padding:6px 10px}
/* el diario y el camino */
.diario h4,.camino h4{margin:6px 0 2px;font-size:12px;color:var(--muted);font-weight:500}
.diario ol,.camino ol{margin:0;padding-left:16px;font-size:12px;display:grid;gap:3px}
.diario time{font-family:var(--mono);color:var(--muted)}
.diario small{display:block;overflow-wrap:anywhere}
.camino .paso{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;padding:3px 0}
.camino .paso.hecho{color:var(--muted);text-decoration:line-through}
.camino .paso.espera .marca{color:var(--warn);font-style:italic}
/* encargo «datos3»: previsualizar un paso (no escribe) y lo que daría */
.camino .paso .previsualizar{font-size:12px;padding:1px 8px;border:1px dashed var(--rule);border-radius:999px;background:transparent;color:var(--fg)}
.camino .paso .previa{flex-basis:100%;font-size:12px;color:var(--muted)}
.camino .paso .previa.no-pasa{color:var(--warn)}
.camino .fuente{font-family:var(--mono);color:var(--muted);font-size:11px}
.camino .niveles{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px}
.camino .seguir{margin-top:6px;background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}

/* el centro */
.nucleo{position:relative;border:1px solid var(--accent);border-radius:var(--radio);background:var(--panel);padding:10px;display:grid;gap:8px;min-width:0}
.carta-apilada .nucleo{order:0}
.carta-apilada .franja-cruz{order:-1}
.carta-apilada .franja-x{order:1}
.nucleo-cabeza{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);min-width:0}
.nucleo-cabeza .etiqueta{font-weight:600;color:var(--fg)}
.nucleo-cabeza .madurez{background:var(--panel2);border-radius:999px;padding:1px 8px}
.nucleo-cabeza .quien{flex:1;text-align:right}
.voltear,.volver{min-height:32px;min-width:32px;border-radius:50%;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
.representacion{margin:0;font-size:1.4rem;font-weight:600;overflow-wrap:break-word;hyphens:auto;text-wrap:balance;line-height:1.25}
.representacion .rep-imagen{max-width:100%;max-height:50vh;display:block;border-radius:8px}
.nucleo.tamano-1 .representacion{font-size:1.1rem}
.campos{margin:0;display:grid;gap:6px}
.campo{display:grid;gap:2px;min-width:0}
.campo dt label,.campo .etiqueta-0{font-size:12px;color:var(--muted)}
.campo dd{margin:0}
.campo-input{font-size:14px}
.campo-0 .campo-input,.campo-5 .campo-input{font-size:13px}
.leido{display:grid;gap:4px}
.leido-boton{justify-self:start;font-size:12px;font-family:var(--mono);background:transparent;color:var(--muted)}
.leido-boton[aria-pressed="true"]{background:var(--panel2);border-color:var(--accent);color:var(--accent)}
.leido-texto{margin:0;padding:8px 10px;background:var(--bg);border:1px solid var(--rule);border-radius:8px;font-family:var(--mono);font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;max-height:40vh;overflow:auto}
.reverso .tipo,.reverso .ancla,.abierto .ayuda{margin:0;font-size:13px;color:var(--muted)}
.pasos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted)}
.pasos b{color:var(--fg);font-weight:500}

/* los rosetones: diez (uno por PV, el 0 y el 5 en el centro de cada grupo). Apilado, dos tiras pegadas arriba y abajo
   de la pantalla (arriba el tetraedro de la X: 1 2 0 3 4; abajo la cruz: 6 7 5 8 9); en la matriz, una barra fija */
.rosetones{display:flex;gap:6px;justify-content:center;align-items:flex-start;margin:0;padding:6px 0;overflow-x:auto;scrollbar-width:none}
.rosetones::-webkit-scrollbar{display:none}
.rosetones-arriba{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--rule)}
.rosetones-abajo{position:sticky;bottom:0;z-index:5;background:var(--bg);border-top:1px solid var(--rule);padding-bottom:max(6px,env(safe-area-inset-bottom,0px))}
.roseton{flex:0 0 auto;width:var(--hueco);height:var(--hueco);padding:2px;border-radius:50%;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;position:relative;line-height:1;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.roseton .numero{position:absolute;top:4px;left:50%;transform:translateX(-50%);font-size:9px}
.roseton.grupo-nucleo{width:40px;height:40px;align-self:center}
.roseton.nivel-2{width:var(--tarjeta);height:auto;min-height:var(--hueco);border-radius:var(--radio);font-weight:400;align-items:stretch;text-align:left;padding:6px 8px;gap:4px;align-self:flex-start}
.roseton.nivel-2 .numero{position:static;transform:none}
.roseton.nivel-2 .dato{font-weight:600}
.roseton ul{margin:0;padding-left:14px;font-size:12px}

/* todo lo que tiene un registro detrás es pulsable: un clic entra y mantenerlo abre el aro (sin el menú ni la selección del móvil) */
.carta :is(.ocupante,.hijo,.fila-cabeza,.cuenta,.estrella,.centro-flotante,.pv-cabeza,.campo>dt,.campo .etiqueta-0){-webkit-touch-callout:none;user-select:none}
.carta :is(.hijo,.campo>dt,.campo .etiqueta-0,.ocupante-hoja,.ocupante-decupla){cursor:pointer}

/* el aro: ocho sitios en la matriz 3 × 3 (sin centro) alrededor del elemento. Por defecto, centrado en la pantalla (móvil apilado); en Mapped,
   la app lo ancla al elemento con position:fixed (left, top y las medidas del centro, en línea: carta/app.js, situarAro) */
.aro-fondo{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.aro-fondo.anclado{display:block;padding:0}
.formulario-fondo{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.aro{--sitio-ancho:148px;--sitio-alto:36px;--hueco:6px;--centro-ancho:120px;--centro-alto:64px;position:relative;display:grid;gap:var(--hueco);grid-template-columns:var(--sitio-ancho) var(--centro-ancho) var(--sitio-ancho);grid-template-rows:var(--sitio-alto) var(--centro-alto) var(--sitio-alto);max-width:100%}
.aro.anclado{position:fixed;margin:0}
.aro:not(.anclado){--sitio-ancho:min(112px,29vw);--centro-ancho:min(112px,29vw)} /* centrado (móvil apilado): los tres cuartos de la anchura de la ventana */
.aro ul{display:contents;list-style:none;margin:0;padding:0}
.aro-centro{grid-area:2 / 2;position:relative;z-index:0;margin:0;padding:4px;display:grid;gap:4px;place-items:center;text-align:center;font-size:13px;overflow:hidden;overflow-wrap:anywhere;border-radius:10px;background:var(--bg);border:1px solid var(--rule);box-shadow:0 6px 24px rgba(0,0,0,.25)}
.aro.anclado .aro-centro{background:transparent;box-shadow:none;border:2px dashed var(--accent)}
.aro.anclado .aro-centro>*{display:none}
.aro-centro{cursor:pointer;-webkit-touch-callout:none;user-select:none} /* un clic entra en el elemento; mantenerlo, editarlo */
/* el centro en edición: el input con su valor; la lista del 0 debajo y la del 5 (su reverso) encima, por encima de los sitios */
.aro.editando .aro-centro,.aro.anclado.editando .aro-centro{z-index:4;overflow:visible;cursor:auto;background:var(--bg);border-style:solid;box-shadow:0 6px 24px rgba(0,0,0,.3)}
.aro.editando .aro-centro>b{display:none}
.aro.anclado.editando .aro-centro>.aro-edicion,.aro-edicion{display:block;position:relative;width:100%;align-self:center}
.aro-edicion .campo-input{width:100%;box-sizing:border-box;user-select:text}
.aro-edicion .opciones{position:absolute;left:0;min-width:100%;width:max-content;max-width:min(60vw,320px);max-height:min(40vh,240px);overflow:auto;margin:0;padding:4px;list-style:none;display:grid;gap:2px;background:var(--bg);border:2px solid var(--accent);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.3);z-index:5}
.aro-edicion .opciones-abajo{top:calc(100% + 4px)}
.aro-edicion .opciones-arriba{bottom:calc(100% + 4px)}
.aro-edicion .opcion,.hueco .otras .opcion{font-size:12px;width:100%;text-align:left;min-height:30px}
.aro .opcion{background:color-mix(in oklab,var(--accent) 10%,var(--bg))}
.hueco{position:relative;min-width:0;z-index:1}
.hueco.desplegado{z-index:3}
.hueco[data-fila="1"]{align-self:center;height:var(--sitio-alto)} /* 6 y 7: a la altura de su chip, en el medio del elemento */
.hueco[data-columna="1"]{justify-self:center;width:min(100%,176px)} /* 8 y 9: centrados sobre y bajo el elemento */
.hueco[data-fila="0"]{grid-row:1} .hueco[data-fila="1"]{grid-row:2} .hueco[data-fila="2"]{grid-row:3}
.hueco[data-columna="0"]{grid-column:1} .hueco[data-columna="1"]{grid-column:2} .hueco[data-columna="2"]{grid-column:3}
.hueco .sitio{display:flex;align-items:stretch;height:100%;box-sizing:border-box;border:2px solid var(--c,var(--rule));border-radius:999px;background:var(--panel);color:var(--fg);overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.2)}
@supports (color:color-mix(in oklab,red,blue)){.hueco .sitio{background:color-mix(in oklab,var(--c,var(--panel)) 42%,var(--bg))}}
.hueco .accion{flex:1;min-width:0;display:flex;align-items:center;gap:5px;border:0;border-radius:0;background:transparent;color:inherit;font-size:12px;line-height:1.1;padding:0 8px 0 4px;min-height:0;text-align:left}
.hueco .accion .nombre{min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:break-word;hyphens:auto} /* repaso #16: hasta dos líneas y, si no cabe, elipsis; el title lleva el nombre entero */
.hueco .accion small{color:inherit;opacity:.75;font-size:10px}
.hueco .numero{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--c,var(--rule));color:var(--bg);font-size:11px;font-weight:700}
.hueco .pieza{flex:none;width:18px;height:18px}
.hueco .accion.por-defecto:hover,.hueco .accion.por-defecto:focus-visible{background:color-mix(in oklab,var(--c,var(--accent)) 30%,transparent)}
.aro:not(.anclado) .hueco .pieza{display:none}
/* el aro centrado (móvil): sitios de 112 px; sin la cifra y con menos relleno caben palabras enteras (repaso beta #16) */
.aro:not(.anclado) .hueco .accion{font-size:11px;gap:3px;padding:0 5px 0 3px}
.aro:not(.anclado) .hueco .cuantas{display:none}
.aro:not(.anclado) .hueco .numero{width:18px;height:18px;font-size:10px}
.hueco.apagado .sitio{opacity:.45;background:var(--panel);border-style:dashed}
/* cuántas cosas despliega el clic mantenido (las demás acciones y los valores): solo una cifra, no un botón */
.hueco .cuantas{flex:none;margin-left:auto;padding:0 2px;font-size:10px;opacity:.7}
.hueco[data-con-lista] .sitio{-webkit-touch-callout:none;user-select:none}
.hueco .accion.vacia .nombre{opacity:.75}
.hueco .otras{position:absolute;top:calc(100% + 4px);left:0;min-width:100%;width:max-content;max-width:60vw;margin:0;padding:4px;display:grid;gap:2px;background:var(--bg);border:2px solid var(--c,var(--rule));border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.3)}
.hueco[data-fila="2"] .otras{top:auto;bottom:calc(100% + 4px)}
.hueco[data-columna="2"] .otras{left:auto;right:0}
.hueco .otras-titulo{font-size:10px;color:var(--muted);padding:0 4px 2px}
.hueco .otras{max-height:min(50vh,320px);overflow:auto}
.hueco .otras-valores{margin-top:4px;border-top:1px solid var(--rule);padding-top:4px}
.hueco .otras button{font-size:12px;width:100%;text-align:left;min-height:30px}
.cerrar{min-width:32px;border-radius:50%;padding:0}

/* los formularios */
.formulario{background:var(--bg);border:1px solid var(--rule);border-radius:12px;padding:14px;width:min(92vw,480px);max-height:92vh;overflow:auto;display:grid;gap:10px}
.formulario header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.formulario h2{margin:0;font-size:1.1rem;text-wrap:balance}
.formulario .campo label{font-size:14px}
.formulario .campo .tipo{font-family:var(--mono)}
.formulario .campo.falta input{border-color:var(--warn)}
.formulario .param-opciones{width:100%;min-height:32px}
.formulario .param-opciones+input:not([hidden]){margin-top:4px}
.formulario input[hidden]{display:none}
.formulario .ayuda{font-size:12px;overflow-wrap:anywhere}
.formulario .ayuda code{font-size:11px}
.formulario details.btml{font-size:12px;color:var(--muted,inherit)}
.formulario details.btml summary{cursor:pointer}
.formulario details.btml code{font-size:11px;overflow-wrap:anywhere}
.formulario footer button{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);width:100%;min-height:44px}
/* Ejecutar desde el 4 (VG 12-11, decisión 7 de #49): lo exigido en T, la denominación y el botón que cambia con el rango */
.ejecucion-t{display:flex;flex-direction:column;gap:4px;margin:8px 0;padding:8px 10px;border:1px solid var(--rule);border-radius:6px;background:var(--panel)}
.ejecucion-t h3{margin:0;font-size:13px}
.ejecucion-t .exigido{list-style:none;margin:0;padding:0;font-size:12px;display:flex;flex-direction:column;gap:2px}
.ejecucion-t .denominacion{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px}
.ejecucion-t .denominacion select{min-height:32px}
.ejecucion-t .piezas{font-variant-numeric:tabular-nums}
.ejecucion-t .aviso{flex-basis:100%;color:var(--muted)}
button.ejecutar{position:relative;cursor:pointer}
button.ejecutar.boton-apagado,.formulario footer button.ejecutar.boton-apagado{background:var(--panel2);color:var(--muted);border:1px dashed var(--muted)}
button.ejecutar.boton-marcado,.formulario footer button.ejecutar.boton-marcado{background:var(--accent);color:var(--accent-fg);border:2px solid var(--fg)}
button.ejecutar.boton-efectos,.formulario footer button.ejecutar.boton-efectos{background:var(--accent);color:var(--accent-fg);border:2px solid var(--fg);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
button.ejecutar .capa-ejecutar{position:absolute;inset:-4px;border-radius:inherit;border:2px solid var(--accent);animation:ejecutar-pulso 1.6s ease-out infinite}
@keyframes ejecutar-pulso{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.06)}}
@media (prefers-reduced-motion: reduce){button.ejecutar .capa-ejecutar{animation:none;opacity:.6}}

/* mi cuenta: la pantalla de arranque (sola, sin eje) y los diálogos de crear, restaurar y la copia de seguridad */
.arranque-pantalla{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px 0}
.arranque-pantalla .formulario{width:min(100%,480px)}
.arranque .opciones{display:grid;gap:8px}
.arranque .opciones button{min-height:44px;width:100%}
.arranque .opciones .principal{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.cuentas-lista{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cuentas-lista button{width:100%;min-height:40px;text-align:left}
.arranque select{padding:6px 8px;border-radius:8px;border:1px solid var(--rule);background:var(--bg);width:100%}
.arranque .volver-arranque{font-size:13px}
.arranque input[type="file"]{padding:6px 0;border:0;background:transparent}
.copia .aviso{margin:0}

@media (max-width:480px){body{font-size:15px} .representacion{font-size:1.2rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* opinar: el conmutador, la cajita y el elemento marcado */
.opinar-boton[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.opinar-menu{display:inline-flex;flex-wrap:wrap;gap:4px}
.opinar-menu button{font-size:12px;min-height:28px;padding:2px 8px}
html.opinando #carta{cursor:crosshair}
html.opinando #carta *{cursor:crosshair}
.opinar-marcado{outline:3px solid var(--accent)!important;outline-offset:2px}
.opinar-caja{position:fixed;z-index:60;background:var(--bg);color:var(--fg);border:2px solid var(--accent);border-radius:var(--radio);padding:10px;box-shadow:0 8px 28px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:8px;max-width:calc(100vw - 16px)}
.opinar-caja.opinar-abajo{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom,0px));width:auto}
.opinar-contexto{margin:0;font-family:var(--mono);font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.opinar-caja textarea{font:inherit;width:100%;padding:6px 8px;border-radius:8px;border:1px solid var(--rule);background:var(--bg);color:var(--fg);resize:vertical;min-height:64px}
.opinar-botones{display:flex;gap:8px;justify-content:flex-end}
.opinar-guardar{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.opinar-aviso{position:fixed;z-index:70;left:50%;transform:translateX(-50%);bottom:16px;background:var(--panel2);color:var(--fg);border:1px solid var(--accent);border-radius:8px;padding:6px 12px;font-size:13px;max-width:calc(100vw - 32px)}
.roseton.grupo-nucleo{font-size:12px}
.roseton.grupo-nucleo .numero{top:2px;font-size:8px}

/* la salida externa del PV9: exportar, importar, propuestas, y las opiniones ancladas */
.guia-externa{display:flex;flex-wrap:wrap;gap:6px}
.propuestas h5{margin:6px 0 2px;font-size:12px;color:var(--muted);font-weight:500}
.propuestas ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.propuestas li,.camino .paso.propuesta{flex-wrap:wrap;gap:4px 8px;align-items:baseline;padding:6px 8px;border:1px solid var(--rule);border-radius:8px;background:var(--panel)}
.camino .paso.propuesta{display:flex}
.propuestas .invalida,.camino .paso.propuesta.invalida{border-color:var(--warn);background:var(--warnbg)}
.propuesta .porque,.propuesta .motivo,.propuesta .motivos{flex:1 1 100%;font-size:12px;overflow-wrap:anywhere}
.propuesta .motivo,.propuesta .motivos{color:var(--warn)}
.propuesta-botones{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
.propuesta-nombre{font-weight:600}
.opiniones h4{margin:6px 0 2px;font-size:12px;color:var(--muted);font-weight:500}
.opiniones ol{margin:0;padding-left:16px;font-size:12px;display:grid;gap:3px}
.opiniones time{font-family:var(--mono);color:var(--muted)}
.opiniones small{display:block;overflow-wrap:anywhere;color:var(--muted)}

/* Mapped (VG, 10-11): en el ordenador la carta ocupa la ventana entera y no se desborda nunca, ni en vertical ni en
   horizontal; se avanza hacia adentro y por tamaño. Cada PV va en su caja, que el árbol trae en fracciones de la
   pantalla (carta/carta.js repartir); aquí solo se pinta. Los pasos y sus fracciones son de la época (epoch.8.6). */
html.mapped,html.mapped body{height:100%;overflow:hidden}
html.mapped body{padding:0}
.carta-matriz{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding:0 12px}
.carta-matriz>*{flex:none}
.carta-matriz>.aviso,.carta-matriz>.exito{margin:4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.carta-matriz .escena{flex:1 1 auto;min-height:0;margin:6px 0 8px;overflow:hidden}
.mapa{position:absolute;inset:0;overflow:hidden}
.mapa-celdas{position:absolute;inset:30px} /* el anillo de fuera: los rosetones (y, a pantalla completa, las flechas a los vecinos) */
.mapa-celdas>.celda{position:absolute;padding:3px;overflow:hidden;transition:left .2s ease,top .2s ease,width .2s ease,height .2s ease}
.mapa-celdas>.celda>.pv,.mapa-celdas>.celda>.nucleo{width:100%;height:100%;min-height:0;overflow:hidden}
.mapa .pv.nivel-2,.mapa .pv.nivel-3{width:100%;cursor:pointer}
.mapa .pv .ocupantes{min-height:0;overflow:hidden}
.mapa .pv.nivel-2 .ocupantes{max-height:none}
/* repaso beta #6: los mandos ocupan su propia franja abajo (no tapan lo de dentro); lo largo se corta con elipsis (el title lleva el texto entero) y el camino del 9 se desplaza dentro de su tarjeta */
.mapa:not(.completa) .mapa-celdas>.celda>.pv:is(.nivel-2,.nivel-3){padding-bottom:30px}
.mapa:not(.completa) .pv:is(.nivel-2,.nivel-3) .ocupantes.disposicion-matrix{grid-template-columns:repeat(auto-fit,minmax(min(100%,110px),1fr))} /* en una tarjeta estrecha, dos columnas antes que tres que parten las palabras */
.mapa:not(.completa) .pv:is(.nivel-2,.nivel-3) .ocupante-ref .texto{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.mapa:not(.completa) .pv.nivel-2 .camino{flex:1 1 0;min-height:0;overflow:auto}
.mapa:not(.completa) .mapa-celdas>.celda>.pv-9.nivel-3{overflow-y:auto}
.mapa:not(.completa) .mapa-celdas>.celda>.pv-9.nivel-3>*{flex:none}
.camino-comun{margin:0 0 4px;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.mapa .pv .pv-pie{display:none}
.mapa .pv .escenario{max-height:40%;width:auto;aspect-ratio:1/1}
.mapa .nucleo{align-content:start}
.mapa .nucleo .campos{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:4px 10px}
.mapa .nucleo .representacion{font-size:1.25rem}
.mapa .guia-historial{max-height:30%}
.mapa .ocupantes .pagina{display:flex;align-items:center;justify-content:center;gap:8px}
.mapa .ocupantes .pagina button{min-height:24px;padding:0 10px}
/* los mandos de cada PV: en la esquina (o el lado) que mira al centro; el asa, para arrastrar desde ahí */
.mandos{position:absolute;z-index:4;display:flex;gap:2px;align-items:center;opacity:.55;transition:opacity .15s ease}
.celda:hover .mandos,.mandos:focus-within{opacity:1}
.mandos{bottom:5px} /* siempre abajo, en el lado que mira al centro: arriba taparían la cabecera */
.mandos.columna-0{right:5px} .mandos.columna-2{left:5px} .mandos.columna-1{left:50%;transform:translateX(-50%)}
.mandos .tamano{min-height:0;width:22px;height:22px;padding:0;border-radius:50%;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center;background:var(--bg)}
.asa{display:inline-block;width:16px;height:16px;border-radius:4px;border:2px solid var(--muted);background:var(--bg);touch-action:none}
.mandos.fila-0.columna-0 .asa,.mandos.fila-2.columna-2 .asa{cursor:nwse-resize}
.mandos.fila-0.columna-2 .asa,.mandos.fila-2.columna-0 .asa{cursor:nesw-resize}
.mandos.fila-1 .asa{cursor:ew-resize}
.mandos.columna-1 .asa{cursor:ns-resize}
/* los puntitos del foco: los diez PV; tocar uno amplía todos. Cuánto llena cada uno, la fracción de su paso */
.puntos{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.punto{--lleno:0;min-height:0;width:22px;height:22px;padding:0;border-radius:50%;font-size:10px;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  border:2px solid color-mix(in oklab,var(--c,var(--rule)) 70%,var(--rule));background:color-mix(in oklab,var(--c,var(--rule)) calc(var(--lleno) * 100%),var(--panel))}
.punto.centro{width:16px;height:16px;font-size:8px}
.punto[aria-disabled="true"]{cursor:default}
.todos-menos{min-height:0;width:22px;height:22px;padding:0;border-radius:50%;line-height:1}
/* la medida de cada carta: pequeña, en su fila de arriba */
.medida{font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.medida small{font-size:10px}
.nucleo-cabeza .madurez.medida{font-size:11px;padding:0 6px}
.pv-cabeza .medida{margin-left:auto}
/* los rosetones de mi foco: cada uno en su esquina o lateral, por encima de los bloques, muy comprimidos */
.rosetones-mapa{position:absolute;inset:0;display:block;margin:0;padding:0;pointer-events:none;overflow:visible;z-index:6}
.rosetones-mapa .roseton{position:absolute;pointer-events:auto;width:28px;height:28px;font-size:12px;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.rosetones-mapa .roseton .numero{top:2px;font-size:7px}
.rosetones-mapa .roseton.sitio-centro{width:22px;height:22px;font-size:10px}
.rosetones-mapa .sitio-f0{top:0} .rosetones-mapa .sitio-f2{bottom:0} .rosetones-mapa .sitio-f1{top:50%;transform:translateY(-50%)}
.rosetones-mapa .sitio-c0{left:0} .rosetones-mapa .sitio-c2{right:0} .rosetones-mapa .sitio-c1{left:50%;transform:translateX(-50%)}
.rosetones-mapa .sitio-f0.sitio-centro{top:3px;margin-left:34px} .rosetones-mapa .sitio-f2.sitio-centro{bottom:3px;margin-left:34px}
.rosetones-mapa .roseton.nivel-2{width:var(--tarjeta);height:auto;z-index:7}
/* un PV a pantalla completa: flechas a los vecinos en su sitio de la geometría, el 0 y el 5 en el centro, «volver» */
.vecinos{position:absolute;inset:0;pointer-events:none;z-index:5}
.vecino{position:absolute;pointer-events:auto;min-height:0;height:28px;min-width:28px;padding:0 8px;border-radius:999px;font-weight:600;font-size:13px;
  border:2px solid color-mix(in oklab,var(--c,var(--rule)) 65%,var(--rule));background:color-mix(in oklab,var(--c,var(--rule)) 14%,var(--panel))}
.vecino.fila-0{top:0} .vecino.fila-2{bottom:0} .vecino.fila-1{top:50%;transform:translateY(-50%)}
.vecino.columna-0{left:0} .vecino.columna-2{right:0} .vecino.columna-1{left:50%;transform:translateX(-50%)}
.vecinos-centro{position:absolute;left:calc(50% + 62px);bottom:1px;transform:translateX(-50%);display:flex;gap:6px;pointer-events:auto}
.vecinos-centro .vecino{position:static;transform:none;height:26px;min-width:26px;font-size:11px}
.volver.volver-claro{border-radius:999px;padding:2px 14px;font-size:14px;min-width:0;background:var(--accent);color:var(--accent-fg);border-color:var(--accent);margin-left:auto}
.mapa.completa .ocupantes.disposicion-matrix{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
/* la rejilla de un mundo (epoch.8.7) en su forma sobria (VG, mockup del segundo nivel v3): hijos con el color de su PV,
   o bandas; sin scroll de página (solo las listas dentro de su caja tienen el suyo) */
.nucleo.abierto:has(.rejilla-completa){display:flex;flex-direction:column;gap:4px}
.nucleo.abierto:has(.rejilla-completa) .escenario,.nucleo.abierto:has(.rejilla-completa)>.ayuda{display:none}
.rejilla{display:flex;flex-direction:column;gap:4px;min-height:0;min-width:0;flex:1}
/* Los ganchos del animado: el mundo es un contenedor posicionado y aislado, para que las capas (el fondo detrás, el
   marco alrededor) entren después como hijos absolutos sin mover ni medir nada distinto; los huecos entre hijos salen
   de --hueco (un estilo de datos puede cambiarlo). Nada de esto viene de datos: cssSeguro no deja pasar position. */
.rejilla-completa{position:relative;isolation:isolate;--hueco:6px}
.rejilla-cabeza{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.rejilla-cabeza .subir{min-height:24px;padding:0 10px;border-radius:999px}
.rejilla-celdas{flex:1;min-height:0;display:grid;gap:3px;grid-template-columns:repeat(var(--columnas),minmax(0,1fr));grid-template-rows:repeat(var(--filas),minmax(0,1fr))}
.rejilla-bandas{flex:1;min-height:0;display:grid;gap:3px;grid-template-rows:repeat(var(--filas),minmax(0,1fr))}
.rejilla-completa .rejilla-celdas,.rejilla-completa .rejilla-bandas{gap:var(--hueco)}
/* un hijo: su cabeza (dígito, nombre, cifra) y su cuerpo */
.rejilla-celda{position:relative;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;border:1px solid color-mix(in oklab,var(--c,var(--rule)) var(--tinte-borde),var(--rule));border-radius:6px;background:color-mix(in oklab,var(--c,var(--rule)) var(--tinte-fondo),transparent)}
.rejilla-celda.vacia{background:color-mix(in oklab,var(--c,var(--rule)) 2%,transparent);border-style:dashed}
.hijo-cabeza{display:flex;align-items:baseline;gap:6px;min-width:0;padding:4px 8px;font-size:13px;border-bottom:1px solid color-mix(in oklab,var(--c,var(--rule)) 25%,transparent)}
.hijo-cabeza .numero,.flotante-cabeza .numero,.siguiente-hijo .numero,.fila-cabeza .numero{font-family:var(--sans);font-variant-numeric:tabular-nums} /* repaso beta #19: «0», no «e» */
.hijo-cabeza .numero{flex:none;font-size:10px;line-height:1.5;padding:0 5px;border-radius:4px;background:color-mix(in oklab,var(--c,var(--rule)) 30%,transparent)}
.hijo-nombre{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hijo-cifra{flex:none;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
.hijo-cuerpo{position:relative;flex:1;min-height:0;min-width:0;overflow:auto;padding:4px 8px}
.hijo.vacia{border-bottom-width:1px}
.hijo[data-vacio] .hijo-cabeza{border-bottom:0}
/* Lo derivado del libro en una celda (encargo «lecturas»): una marca discreta, sin cambiar la forma; bajar por el dígito de la celda; la dirección en la cabecera */
.hijo .derivado{opacity:.85;font-style:italic}
.hijo .derivado.heredado{opacity:.65}
.hijo .derivado.arriba{font-style:normal}
.hijo .derivado>td,.hijo li.derivado{box-shadow:inset 2px 0 0 color-mix(in oklab,var(--c,var(--rule)) 45%,transparent)}
.hijo>.bajar{position:absolute;right:4px;bottom:4px;padding:0 6px;font-size:12px;line-height:18px;border:1px solid color-mix(in oklab,var(--c,var(--rule)) 40%,transparent);border-radius:9px;background:var(--panel2);color:var(--muted);cursor:pointer}
.direccion-rejilla{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}
.hijo[data-vacio] .hijo-nombre{font-weight:400;color:var(--muted)}
.hijo[data-vacio] .hijo-cuerpo{display:flex;align-items:center;justify-content:center;text-align:center}
.hijo-vacio{font-size:11px;font-style:italic;color:var(--muted)}
.hijo-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-width:0}
.hijo-lista li{display:flex;align-items:center;gap:4px;min-width:0}
.hijo-cuerpo .ocupante{font-size:12px;padding:2px 4px;border-radius:5px;min-width:0}
.hijo-cuerpo .ocupante-ref{display:inline-flex;gap:6px;align-items:baseline;width:auto;max-width:100%;min-height:0;padding:2px 6px;border:0;text-align:left}
.hijo-cuerpo .ocupante-ref .texto{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hijo-cuerpo .ocupante-ref .quien{font-size:10px;color:var(--muted)}
.hijo-cuerpo .ocupante-decupla{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-start}
.hijo-cuerpo .ocupante-decupla .hoja{padding:1px 5px;border-radius:4px;background:color-mix(in oklab,var(--c,var(--rule)) 18%,transparent)}
.hijo-cuerpo .celda-abrir{flex:none;min-height:0;min-width:0;width:20px;height:20px;padding:0;font-size:12px;line-height:1;border-radius:999px}
/* la cruceta (el 1): las cuatro esquinas, cada una su tarjeta con su tabla, y el pulsado como tarjeta central flotante
   encima del cruce (en torno al 20 % del lado menor); las esquinas dejan su lado del centro libre para ella */
.rejilla-cruceta{position:relative;container-type:size;--flotante-ancho:clamp(200px,20cqw,400px);--flotante-alto:clamp(130px,22cqh,260px)}
.rejilla-cruceta>.hijo[data-columna="0"] .hijo-cuerpo{padding-right:calc(var(--flotante-ancho) / 2 + 8px)}
.rejilla-cruceta>.hijo[data-columna="1"] .hijo-cuerpo{padding-left:calc(var(--flotante-ancho) / 2 + 8px)}
.rejilla-cruceta>.hijo[data-fila="1"][data-columna="0"] .hijo-cabeza{padding-right:calc(var(--flotante-ancho) / 2 + 8px)}
.rejilla-cruceta>.hijo[data-fila="1"][data-columna="1"] .hijo-cabeza{padding-left:calc(var(--flotante-ancho) / 2 + 8px)}
.hijo-tabla{width:100%;max-width:100%;border-collapse:collapse;font-size:12px}
/* Repaso beta #3/#4: el texto de una fila parte (no ensancha la tabla) y la tabla cabe siempre en su celda. */
.hijo-tabla td{min-width:0;overflow-wrap:anywhere}
.hijo-tabla .ocupante-ref{flex-wrap:wrap}
.hijo-tabla .ocupante-ref .texto{white-space:normal;overflow:visible;text-overflow:clip}
.hijo-tabla td{padding:3px 6px;border-bottom:1px solid color-mix(in oklab,var(--c,var(--rule)) 22%,var(--rule));vertical-align:middle}
.hijo-tabla td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.hijo-tabla td[colspan]{text-align:left}
.centro-flotante{position:absolute;inset:0;margin:auto;width:var(--flotante-ancho);height:max-content;max-height:var(--flotante-alto);perspective:900px}
.flotante-giro{display:grid;height:100%;transform-style:preserve-3d;transition:transform 300ms ease-out}
.centro-flotante.girada .flotante-giro{transform:rotateY(180deg)}
.flotante-cara{grid-area:1 / 1;min-height:var(--flotante-alto);max-height:var(--flotante-alto);overflow:auto;display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:10px;border:2px solid color-mix(in oklab,var(--c,var(--rule)) 60%,var(--fg));background:color-mix(in oklab,var(--c,var(--rule)) 10%,var(--bg));box-shadow:0 6px 20px rgba(0,0,0,.18);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flotante-cara.cara-5{transform:rotateY(180deg)}
.flotante-cabeza{display:flex;align-items:center;gap:6px;font-size:12px}
.flotante-cabeza .numero{font-size:10px;padding:0 5px;border-radius:4px;background:color-mix(in oklab,var(--c,var(--rule)) 30%,transparent)}
.flotante-cabeza .etiqueta{flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flotante-cabeza .cara-n{color:var(--muted);font-size:10px;border:1px solid var(--rule);border-radius:999px;padding:0 6px}
.flotante-cabeza .girar{min-height:0;width:24px;height:24px;padding:0;border-radius:50%;line-height:1}
.flotante-nombre{margin:auto 0 0;font-size:16px;font-weight:700;text-align:center;overflow-wrap:break-word;hyphens:auto;text-wrap:balance}
.flotante-cifra{margin:0 0 auto;text-align:center;font-variant-numeric:tabular-nums}
.flotante-cifra b{font-size:30px;line-height:1.1}
.flotante-cifra small{font-size:14px;color:var(--muted)}
.flotante-cifra span{display:block;font-size:11px;color:var(--muted)}
.flotante-barra{display:block;height:5px;border-radius:3px;background:color-mix(in oklab,var(--c,var(--rule)) 18%,var(--rule));overflow:hidden}
.flotante-barra>span{display:block;height:100%;width:calc(var(--lleno,0) * 100%);background:color-mix(in oklab,var(--c,var(--accent)) 80%,var(--fg))}
.cara-5 .tipo,.cara-5 .ancla{margin:0;font-size:12px}
.cara-5 .ancla .enlace{min-height:0;padding:0 4px}
.cara-5 .pasos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 10px;font-size:11px}
@media (prefers-reduced-motion: reduce){.flotante-giro{transition:none}}
/* la escalera (el 2, nivel 1): cinco peldaños de arriba abajo, cada uno un escalón más adentro */
.rejilla-escalera>.hijo{margin-left:calc(var(--peldano,0) * 3.5%);border-left-width:4px}
.rejilla-escalera .hijo-lista{flex-direction:row;flex-wrap:wrap;gap:4px 10px}
/* las columnas (el 2, nivel ≥ 2): una por hijo, con el nivel siguiente dentro */
.siguiente{margin-top:8px;padding-top:4px;border-top:1px solid color-mix(in oklab,var(--c,var(--rule)) 30%,var(--rule))}
.siguiente-titulo{margin:0 0 2px;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.siguiente-texto{display:block;font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.siguiente-hijos{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:1px}
.siguiente-hijo{display:flex;align-items:baseline;gap:6px;font-size:12px;padding:2px 0 2px 6px;border-left:3px solid color-mix(in oklab,var(--c,var(--rule)) 70%,transparent);min-width:0}
.siguiente-hijo .numero{font-size:10px;padding:0 4px;border-radius:4px;background:color-mix(in oklab,var(--c,var(--rule)) 30%,transparent)}
.siguiente-nombre{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.siguiente-hijo.vacia{opacity:.6}
.siguiente-hijo.vacia .hijo-vacio{font-size:10px}
.siguiente-cifra{font-variant-numeric:tabular-nums;color:var(--muted)}
/* la conversación (el 3, nivel ≥ 2): una columna; cada hijo con mensajes crece, los vacíos se quedan en una línea */
.rejilla-conversacion{display:flex;flex-direction:column}
.rejilla-conversacion>.hijo{flex:1 1 0}
.rejilla-conversacion>.hijo.vacia{flex:0 0 auto;flex-direction:row;align-items:center}
.rejilla-conversacion>.hijo.vacia .hijo-cuerpo{flex:none;padding:2px 8px}
.conversacion{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.conversacion .mensaje{display:flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:min(46rem,92%);padding:6px 10px;border-radius:12px 12px 12px 4px;border:1px solid color-mix(in oklab,var(--c,var(--rule)) 35%,var(--rule));background:var(--bg);font-size:13px}
.conversacion .mensaje .texto{white-space:normal}
/* lo que el núcleo mide de cada hijo (encargo «datos», issue #11): umbral y votos en el 2, precio en el 3, estado del paquete */
.hijo-pie{flex:none;display:flex;flex-direction:column;gap:3px;padding:3px 8px 5px;border-top:1px solid color-mix(in oklab,var(--c,var(--rule)) 18%,transparent);font-size:11px;color:var(--muted)}
.hijo-medida,.hijo-precio{margin:0;overflow-wrap:anywhere}
.hijo-precio b{color:var(--fg);font-weight:600}
.hijo-barra{display:block;height:6px;border-radius:3px;border:1px solid color-mix(in oklab,var(--c,var(--accent)) 60%,var(--rule));background:transparent;overflow:hidden}
.hijo-barra>span{display:block;height:100%;width:calc(var(--lleno,0) * 100%);background:color-mix(in oklab,var(--c,var(--accent)) 80%,var(--fg))}
.hijo-barra[data-pasa]>span{background:color-mix(in oklab,var(--c,var(--accent)) 55%,var(--fg))}
/* lo que el núcleo mide de cada hijo del 1 (encargo «datos2», issue #11): coste, disponible sobre capacidad, lo que entra y sale */
.hijo-coste,.hijo-capacidad{margin:0;overflow-wrap:anywhere}
.hijo-coste{color:var(--fg)}
.hijo-barra[data-de="capacidad"]>span{background:color-mix(in oklab,var(--ok) 75%,var(--fg))}
.hijo-barra[data-agotada]{border-style:dashed}
.hijo-flujo{width:100%;border-collapse:collapse;font-size:10px;table-layout:fixed}
.hijo-flujo th,.hijo-flujo td{padding:0 3px;text-align:right;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hijo-flujo th[scope="row"],.hijo-flujo thead th:first-child{text-align:left;width:55%}
.hijo-flujo thead th{color:var(--muted);border-bottom:1px solid var(--rule)}
.hijo-flujo td{color:var(--fg);font-variant-numeric:tabular-nums}
.hijo-flujo .hijo-flujo-mas td{text-align:left;color:var(--muted)}
.rejilla-cruceta>.hijo[data-columna="0"] .hijo-pie{padding-right:calc(var(--flotante-ancho) / 2 + 8px)}
.rejilla-cruceta>.hijo[data-columna="1"] .hijo-pie{padding-left:calc(var(--flotante-ancho) / 2 + 8px)}
.conversacion .mensaje .paquete{font-size:10px;padding:0 6px;border-radius:999px;border:1px solid color-mix(in oklab,var(--c,var(--rule)) 45%,var(--rule));color:var(--muted)}
.conversacion .mensaje .paquete[data-estado="pendiente"]{border-style:dashed;color:var(--fg)}
.conversacion .mensaje .paquete[data-estado="perdonado"]{text-decoration:line-through}
/* la matriz (el 4): los ejes nombrados, la diagonal marcada; cada celda con ocupante, una estación con su estado */
.rejilla-matriz{grid-template-columns:minmax(6.5rem,auto) repeat(var(--columnas),minmax(0,1fr));grid-template-rows:auto repeat(var(--filas),minmax(0,1fr))}
.rejilla-completa .rejilla-matriz{gap:calc(var(--hueco) / 2)}
.matriz-esquina,.matriz-eje{display:flex;align-items:center;gap:4px;min-width:0;font-size:11px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.matriz-eje b{font-size:10px;padding:0 4px;border-radius:4px;background:color-mix(in oklab,var(--c,var(--rule)) 30%,transparent);color:var(--fg)}
.matriz-columna{justify-content:center;padding:2px 0;border-bottom:3px solid color-mix(in oklab,var(--c,var(--rule)) 60%,transparent)}
/* repaso beta #8: la cabecera parte en hasta tres líneas (el title lleva el nombre entero) */
.rejilla-matriz .matriz-columna{white-space:normal;text-overflow:clip;overflow-wrap:anywhere;line-height:1.15;max-height:3.6em;text-align:left;align-items:flex-start}
.rejilla-matriz .matriz-columna b{flex:none}
.matriz-fila{justify-content:flex-end;padding-right:6px}
.rejilla-matriz>.hijo{border-radius:4px}
.rejilla-matriz>.hijo.vacia{background:transparent;border-color:var(--rule)}
.rejilla-matriz>.hijo.diagonal{border-style:solid;border-width:2px;border-color:color-mix(in oklab,var(--c,var(--rule)) 40%,var(--rule))}
.rejilla-matriz .hijo-nombre:empty{display:none}
.rejilla-matriz .hijo-cifra{position:absolute;top:1px;right:4px;font-size:9px;font-weight:600}
.rejilla-matriz .hijo-cuerpo{display:flex;align-items:center;justify-content:center;padding:2px}
.rejilla-matriz>.estacion{--estado:var(--c,var(--rule));border-style:solid;border-color:color-mix(in oklab,var(--estado) 70%,var(--fg));background:color-mix(in oklab,var(--estado) 30%,var(--bg));font-weight:600}
.rejilla-matriz>.estacion[data-estado="propuesta"]{--estado:#c9a227}
.rejilla-matriz>.estacion[data-estado="ejecutada"]{--estado:var(--ok)}
.rejilla-matriz>.estacion[data-estado="ejecutada"]::after{content:'✓';position:absolute;right:3px;bottom:2px;width:16px;height:16px;border-radius:50%;border:2px solid var(--ok);color:var(--ok);font-size:10px;line-height:12px;text-align:center;transform:rotate(-12deg)}
/* la estación intermedia y la celda como lista de ejecuciones, cada una con su estación; la fila aparte de lo que no
   tiene celda (encargo «datos2», issue #11) */
.rejilla-matriz>.estacion[data-estado="autorizada"]{--estado:#3f7fbf}
.rejilla-matriz .ejecuciones{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;width:100%;min-width:0;font-weight:400}
.ejecucion{--estado:var(--c,var(--rule));position:relative;display:flex;align-items:center;gap:3px;min-width:0;padding:0 16px 0 3px;border:1px solid color-mix(in oklab,var(--estado) 70%,var(--fg));border-radius:3px;background:color-mix(in oklab,var(--estado) 25%,var(--bg));font-size:10px;line-height:1.3}
.ejecucion[data-estado="propuesta"]{--estado:#c9a227;border-style:dashed}
.ejecucion[data-estado="autorizada"]{--estado:#3f7fbf}
.ejecucion[data-estado="ejecutada"]{--estado:var(--ok)}
.ejecucion[data-estado="ejecutada"]::after{content:'✓';position:absolute;right:1px;top:50%;width:11px;height:11px;margin-top:-6px;border-radius:50%;border:1.5px solid var(--ok);color:var(--ok);font-size:8px;line-height:9px;text-align:center;transform:rotate(-12deg)}
.ejecucion .ocupante{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;font-size:10px;padding:0;min-height:0;border:0;background:transparent} /* repaso #8: dos líneas, no una */
.ejecucion .ocupante .texto{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.ejecucion .estacion-nombre{flex:none;font-size:9px;color:var(--muted)}
.verificado{flex:none;font-size:9px;color:var(--ok);opacity:.8;white-space:nowrap;letter-spacing:.02em}
.verificado-linea{margin:2px 0}
.pendiente-sello{flex:none;font-size:9px;color:var(--warn);opacity:.8;white-space:nowrap;letter-spacing:.02em}
.pendiente-segundo-factor{flex:none;font-size:9px;color:var(--warn);opacity:.9;white-space:nowrap;letter-spacing:.02em;font-weight:600}
.aviso-segundo-factor{margin:6px 0 0;padding:4px 6px;border-left:3px solid var(--warn);font-size:12px;color:var(--warn)}
.segundo-factor-actuales{margin:4px 0;padding-left:18px;font-size:12px}
.ejecucion .quien,.ejecucion .celda-abrir{display:none}
.rejilla-matriz .hijo-cuerpo:has(>.ejecuciones){align-items:flex-start;justify-content:flex-start;overflow:hidden}
.ejecucion-mas{font-size:9px;color:var(--muted);text-align:center}
.matriz-sin-posicion{flex:none;display:flex;align-items:center;gap:6px;min-width:0;padding-top:4px;border-top:1px dashed var(--rule);font-size:11px;color:var(--muted);overflow:hidden}
.matriz-sin-posicion .matriz-eje{flex:none}
/* La matriz del 4 por oficios y ejecución (encargo «el4»): la escalera marcada con su peldaño; la celda que se abre */
.rejilla-matriz.por-oficios .matriz-columna,.rejilla-matriz.por-oficios .matriz-fila{font-size:10px;line-height:1.15}
.rejilla-matriz>.hijo.diagonal[data-peldano]{border-color:color-mix(in oklab,#c9a227 70%,var(--rule))}
.rejilla-matriz .hijo-nombre:has(>.matriz-escalon){position:absolute;left:3px;top:1px;display:block}
.matriz-escalon{font-size:9px;font-weight:700;color:color-mix(in oklab,#c9a227 80%,var(--fg));letter-spacing:.02em}
.rejilla-matriz>.hijo[data-celda-matriz]{cursor:pointer}
.rejilla-matriz>.hijo[data-celda-matriz]:hover{box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--estado,var(--rule)) 70%,var(--fg))}
.rejilla-matriz>.hijo.abierta{box-shadow:inset 0 0 0 3px var(--fg)}
.matriz-abierta{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:min(30rem,86%);max-height:80%;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:2px solid var(--borde);border-radius:8px;background:var(--panel);box-shadow:0 10px 32px rgba(0,0,0,.28)}
.matriz-abierta-cabeza{display:flex;align-items:baseline;gap:8px}
.matriz-abierta-cabeza>b{flex:1;min-width:0}
.matriz-abierta-cabeza .cerrar{flex:none}
.ejecuciones.abiertas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ejecuciones.abiertas>.ejecucion{display:flex;align-items:center;gap:8px;padding:3px 22px 3px 6px;border:1px solid color-mix(in oklab,var(--estado,var(--rule)) 70%,var(--fg));border-radius:4px;background:color-mix(in oklab,var(--estado,var(--rule)) 22%,var(--bg))}
.ejecuciones.abiertas .estacion-nombre{margin-left:auto;font-size:11px;color:var(--muted)}
.matriz-abierta .celda-valor{margin:0;font-size:12px;font-variant-numeric:tabular-nums}
.matriz-abierta .celda-ejecutar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:4px;border-top:1px solid var(--rule)}
.matriz-abierta .celda-ejecutar small{color:var(--muted)}
.matriz-abierta .celda-ejecutar button{min-height:32px;padding:2px 10px;border-radius:4px}
/* El rango (encargo «el4»): en el cielo del 8, el del foco; en el camino del 9, las posiciones que deja disponibles */
.cielo-rango{font-weight:700}
.posicion.disponible{border-style:solid;opacity:1}
.posicion.no-disponible{opacity:.42}
.posicion.actual{box-shadow:inset 0 0 0 3px color-mix(in oklab,var(--c,var(--rule)) 70%,var(--fg))}
.camino-aqui{font-weight:700}
.camino-rango{font-weight:600}
/* Arrastrar al centro = foco (#23, solo Mapped): el centro bajo lo que se arrastra */
.carta-matriz [data-centro].soltar-aqui{outline:3px dashed var(--fg);outline-offset:-6px}
.ejecuciones.en-fila{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;flex-wrap:nowrap;gap:4px;min-width:0;overflow:hidden}
.ejecuciones.en-fila .ejecucion{flex:0 1 auto;max-width:12rem;padding-right:3px}
/* las franjas (el 6 y el 7): franjas verticales por escala y cuatro hilos horizontales que las atraviesan */
.rejilla-franjas{--ancho-hilo:7.5rem;--cabeza-franja:2.4rem;flex:1;min-height:0;display:grid;row-gap:0}
.rejilla-completa .rejilla-franjas{column-gap:var(--hueco);row-gap:0}
.franja-tiempo{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border:1px solid color-mix(in oklab,var(--c,var(--rule)) 28%,var(--rule));border-radius:6px;background:color-mix(in oklab,var(--c,var(--rule)) 4%,transparent)}
.franja-tiempo.ahora{background:color-mix(in oklab,var(--c,var(--rule)) 14%,transparent);border-color:color-mix(in oklab,var(--c,var(--rule)) 55%,var(--rule))}
.franja-tiempo.vacia{border-style:solid}
.franja-tiempo .hijo-cabeza{height:var(--cabeza-franja);align-items:center;border-bottom:1px solid color-mix(in oklab,var(--c,var(--rule)) 25%,transparent)}
.hilo{display:flex;align-items:center;min-width:0;pointer-events:none}
.hilo-nombre{flex:0 0 var(--ancho-hilo);min-width:0;padding:0 6px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto}
.hilo-nombre b{font-size:10px;padding:0 5px;border-radius:4px;background:color-mix(in oklab,var(--c,var(--rule)) 35%,transparent)}
.hilo::after{content:'';flex:1;height:3px;margin-left:var(--hueco,6px);border-radius:2px;background:color-mix(in oklab,var(--c,var(--rule)) 75%,transparent)}
.cruce{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:4px;min-width:0;min-height:0;overflow:hidden;padding:2px}
.cuenta{display:inline-flex;align-items:center;gap:5px;max-width:100%;min-height:0;padding:2px 8px 2px 3px;border-radius:999px;border:1px solid color-mix(in oklab,var(--c,var(--rule)) 60%,var(--rule));background:var(--bg);color:var(--fg);font-size:11px}
.cuenta-bola{flex:none;width:12px;height:12px;border-radius:50%;background:var(--c,var(--muted))}
.cuenta-texto{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cuenta-texto small{color:var(--muted)}
.cuenta.supuesta{border-style:dashed}
/* la cuenta rara (VG 12-11, #42: sus tres relojes, libro, Nostr y Bitcoin, van fuera de orden) y la cuenta con estado del futuro;
   la del hilo hacia arriba en el 6 (#45), con el borde a trazos */
.cuenta.cuenta-arriba{border-style:dashed}
.cuenta.cuenta-rara{border-color:var(--warn);border-width:2px;box-shadow:inset 0 0 0 1px var(--warnbg)}
.cuenta-estado{color:var(--muted);font-style:italic}
.cuenta[data-estado="bloqueado"] .cuenta-bola{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--c,var(--muted))}
.cuenta[data-estado="previsto"] .cuenta-bola{background:transparent;border:2px solid var(--c,var(--muted))}
.cuenta:is([data-estado="caducado"],[data-estado="liberado"]) .cuenta-texto{text-decoration:line-through;color:var(--muted)}
.cuenta-mayor{justify-content:center;min-width:32px;height:32px;padding:0 8px;font-size:14px;font-weight:700;background:color-mix(in oklab,var(--c,var(--rule)) 30%,var(--bg))}
/* el cielo (el 8): las diez cajas nivel.grado en dos filas; la estrella brilla por el nivel, el grado añade borde (2) o halo (3) */
.cielo-panel{margin:0;font-size:12px;color:var(--muted)}
/* encargo «datos3»: la cohorte (su selector) y la base; sin base escrita, el cielo con el borde discontinuo */
.cielo-panel .cohortes{display:inline-flex;gap:4px;flex-wrap:wrap;vertical-align:middle}
.cielo-panel .cohorte{padding:1px 8px;border:1px solid var(--rule);border-radius:999px;background:var(--bg);color:var(--fg);font-size:12px}
.cielo-panel .cohorte.actual{border-color:var(--fg);font-weight:700}
.cielo-panel .cielo-base{font-style:italic}
.rejilla-cielo.sin-base{outline:2px dashed color-mix(in oklab,var(--cielo-tinta) 55%,transparent);outline-offset:-4px}
.estrella.foco .estrella-forma{outline:2px solid var(--cielo-tinta,#fff);outline-offset:1px}
.estrella.foco .texto{font-weight:700}
.rejilla-cielo{grid-template-columns:repeat(var(--columnas),minmax(0,1fr));padding:var(--hueco,6px);border-radius:8px;background:color-mix(in oklab,var(--pv-8,#17396f) 80%,#000);--cielo-tinta:#eef2ff}
.caja-cielo{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:6px;color:var(--cielo-tinta)}
.caja-cielo .hijo-cabeza{border-bottom-color:rgba(255,255,255,.12)}
.caja-cielo .hijo-cifra,.rejilla-cielo .hijo-vacio{color:inherit;opacity:.75}
.caja-cielo .rotulo{font-size:17px;margin-right:2px}
.caja-cielo.vacia{opacity:.5;border-style:dashed}
.caja-cielo.foco{box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.caja-cielo .hijo-cuerpo{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;align-items:center;gap:10px;text-align:center}
.cielo-foco{font-size:12px;font-weight:600}
.estrella{display:inline-flex;flex-direction:column;align-items:center;gap:2px;max-width:9rem;min-height:0;padding:2px;border:0;background:transparent;color:inherit;font-size:11px}
.estrella-forma{display:inline-flex;align-items:center;justify-content:center;width:1.7em;height:1.7em;border-radius:50%;line-height:1;font-size:calc(14px + var(--nivel,0) * 3px);opacity:calc(.32 + var(--nivel,0) * .136)}
.caja-cielo[data-grado="2"] .estrella-forma{box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.caja-cielo[data-grado="3"] .estrella-forma{box-shadow:0 0 0 2px rgba(255,255,255,.55),0 0 16px 6px rgba(255,236,190,.35)}
/* el camino (el 9): primero las diez posiciones para situarse; debajo, los pasos del camino y la guía, plegables */
.rejilla[data-forma="camino"]{display:flex;flex-direction:column}
.camino-madurez{margin:0;font-size:12px;color:var(--muted)}
.rejilla-posiciones{grid-template-columns:repeat(var(--columnas),minmax(0,1fr))}
.rejilla-completa .rejilla-posiciones{flex:0 0 36%}
.posicion{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border:1px solid color-mix(in oklab,var(--c,var(--rule)) 45%,var(--rule));border-radius:6px;background:color-mix(in oklab,var(--c,var(--rule)) 8%,transparent)}
.posicion .rotulo{font-size:22px;margin-right:4px}
.posicion.vacia{border-style:dashed;background:transparent}
.posicion.vacia .hijo-nombre,.posicion.vacia .rotulo{color:var(--muted);font-weight:500}
.posicion .hijo-cabeza{border-bottom:0;align-items:baseline}
.camino-mensajes{flex:1;min-height:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,28rem),1fr));gap:var(--hueco,6px);overflow:auto;align-items:start}
.plegable{min-width:0;padding:4px 8px;border:1px solid var(--rule);border-radius:6px;background:var(--panel)}
.plegable>summary{cursor:pointer;font-size:13px;font-weight:600}
.plegable .camino,.plegable .guia{margin-top:4px}
/* una banda de una forma sin pintor propio y lo que no tiene banda */
.rejilla-banda{min-width:0;min-height:0;overflow:hidden}
.rejilla-bandas>.rejilla-banda:not(.franja-tiempo):not(.caja-cielo):not(.posicion){display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:8px;align-items:start;border:1px solid var(--rule);border-radius:6px;padding:2px 6px}
.rejilla-banda.vacia:not(.franja-tiempo):not(.caja-cielo):not(.posicion){opacity:.55;border-style:dashed}
.rejilla-banda .banda-nombre{font-size:12px;font-weight:600;color:var(--muted)}
.rejilla-banda .banda-cuerpo{display:flex;flex-wrap:wrap;gap:4px;min-width:0;overflow:hidden}
.rejilla-banda .mas-banda{align-self:center;color:var(--muted)}
.rejilla-sin{display:flex;flex-wrap:wrap;gap:4px;max-height:2.2rem;overflow:hidden;font-size:11px;opacity:.7}
.rejilla-sin .ocupante{width:auto;max-width:16rem;font-size:11px;padding:2px 6px}
.rejilla-paginas{display:flex;justify-content:center;margin:0}
.rejilla-paginas .pagina{display:flex;align-items:center;gap:8px}
/* El animado a pantalla completa (VG, 11-11): «el animado es el sobrio añadiéndole las imágenes animadas y los fondos».
   Un solo DOM: la rejilla sobria de arriba, intacta, y encima y debajo nodos .capa, todos absolutos (no ocupan sitio:
   nada se mueve ni cambia de medida; test/animado-capas.test.js). De abajo arriba: el fondo del mundo; las celdas del
   sobrio, translúcidas; el dibujo del mundo dentro de cada hijo; la etapa en la tarjeta central (o en la cabecera); el
   personaje en el hueco entre celdas; los efectos de lo nuevo; el marco. Solo colores, fondos y sombras cambian en lo
   del sobrio (nunca bordes, rellenos, tamaños ni huecos). */
.capa{pointer-events:none}
.capa .pieza,.capa.pieza{margin:0}
/* 1 · el fondo del mundo: el dibujo centrado en su cuadrado, a toda la superficie sin deformarse (cover), atenuado */
.rejilla-completa>.capa-fondo{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:.36;border-radius:8px;filter:saturate(.9)}
.animado .rejilla-completa .rejilla-celda,.animado .mapa .pv .rejilla-celda{background:color-mix(in oklab,color-mix(in oklab,var(--c,var(--rule)) 10%,var(--bg)) 72%,transparent);box-shadow:0 2px 10px rgba(0,0,0,.12)}
.animado .rejilla-completa .rejilla-celda.vacia,.animado .mapa .pv .rejilla-celda.vacia{background:color-mix(in oklab,var(--bg) 40%,transparent);box-shadow:none}
.animado .rejilla-completa .rejilla-matriz>.hijo.vacia,.animado .mapa .pv .rejilla-matriz>.hijo.vacia{background:color-mix(in oklab,var(--bg) 30%,transparent)}
.animado .rejilla-completa .franja-tiempo,.animado .mapa .pv .franja-tiempo{background:color-mix(in oklab,color-mix(in oklab,var(--c,var(--rule)) 6%,var(--bg)) 55%,transparent)}
.animado .rejilla-completa .franja-tiempo.ahora,.animado .mapa .pv .franja-tiempo.ahora{background:color-mix(in oklab,color-mix(in oklab,var(--c,var(--rule)) 18%,var(--bg)) 72%,transparent)}
.animado .rejilla-completa .posicion,.animado .mapa .pv .posicion{background:color-mix(in oklab,var(--bg) 62%,transparent)}
.animado .rejilla-completa .rejilla-cielo,.animado .mapa .pv .rejilla-cielo{background:color-mix(in oklab,color-mix(in oklab,var(--pv-8,#17396f) 80%,#000) 70%,transparent)}
.animado .rejilla-completa .plegable,.animado .rejilla-completa .camino-madurez,.animado .rejilla-completa .cielo-panel{background:color-mix(in oklab,var(--panel) 86%,transparent);border-radius:6px}
/* 3 · el dibujo del mundo dentro de cada hijo, detrás de su texto: el del hijo (tienda, parterre, estanque…) al pie,
   uno por ocupante (mercancía, flor, paquete…) delante, el sello de lo hecho en la esquina; escala con la cifra del
   hijo (--total: 0,6 con poco, 1,4 con cinco o más) sin cambiar la celda */
.animado .rejilla-completa .hijo,.animado .mapa .pv .rejilla .hijo{isolation:isolate}
.capa-dibujo{position:absolute;inset:0;z-index:-1;overflow:hidden;container-type:size;--escala:clamp(.6,calc(.6 + var(--total,0) * .16),1.4);--alto-hijo:min(92cqh,calc(62cqh * var(--escala)))}
.capa-dibujo .dibujo-hijo{position:absolute;left:50%;bottom:0;width:auto;height:var(--alto-hijo);max-width:96cqw;aspect-ratio:1/1;object-fit:contain;transform:translateX(-50%);opacity:.92}
.capa-dibujo .dibujo-ocupantes{position:absolute;left:4cqw;right:4cqw;bottom:3cqh;display:flex;flex-wrap:wrap-reverse;justify-content:center;align-items:flex-end;gap:2px;height:calc(30cqh * var(--escala));overflow:hidden}
.capa-dibujo .dibujo-ocupante{height:100%;max-height:72px;width:auto;aspect-ratio:1/1;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.capa-dibujo.sin-hijo .dibujo-ocupantes{top:0;bottom:0;align-items:center;align-content:center;height:auto}
.capa-dibujo.sin-hijo .dibujo-ocupante{height:calc(52cqh * var(--escala))}
.capa-dibujo .dibujo-hecho{position:absolute;right:3cqw;top:6cqh;width:42cqw;max-width:64px;height:auto;aspect-ratio:1/1;object-fit:contain;transform:rotate(-12deg)}
/* un hijo apaisado (la escalera, las bandas anchas): el dibujo del hijo a la derecha, más alto, y sus ocupantes delante de él, en fila */
@container (min-aspect-ratio: 5/2){
  .capa-dibujo{--alto-hijo:min(100cqh,calc(84cqh * var(--escala)))}
  .capa-dibujo .dibujo-hijo{left:auto;right:3cqw;transform:none}
  .capa-dibujo .dibujo-ocupantes{left:auto;right:calc(4cqw + var(--alto-hijo));justify-content:flex-end;flex-wrap:nowrap;height:calc(50cqh * var(--escala))}
}
.rejilla-cruceta>.hijo[data-columna="0"] .capa-dibujo{right:calc(var(--flotante-ancho) / 2 + 8px)}
.rejilla-cruceta>.hijo[data-columna="1"] .capa-dibujo{left:calc(var(--flotante-ancho) / 2 + 8px)}
.rejilla-matriz .capa-dibujo.sin-hijo .dibujo-ocupantes{justify-content:flex-end;padding-right:4cqw}
.rejilla-matriz .capa-dibujo.sin-hijo .dibujo-ocupante{height:82cqh;max-height:none;opacity:.9}
.rejilla-cielo .capa-dibujo .dibujo-hijo{bottom:auto;top:50%;transform:translate(-50%,-50%);opacity:.75}
.rejilla-cielo .caja-cielo.vacia .capa-dibujo .dibujo-hijo{opacity:.9}
/* los ocupantes de las bandas llevan su dibujo en su propia forma: la cuenta del 6 y el 7 en su bola, la estrella del 8 */
.animado .rejilla-completa .cuenta-bola:has(.capa-ocupante){position:relative;background:transparent}
.cuenta-bola>.capa-ocupante{position:absolute;left:50%;top:50%;width:30px;height:30px;max-width:none;object-fit:contain;transform:translate(-50%,-50%)}
.animado .rejilla-completa .estrella-forma:has(.capa-ocupante){position:relative;color:transparent}
.estrella-forma>.capa-ocupante{position:absolute;inset:-25%;width:150%;height:150%;object-fit:contain}
/* el nombre y la cifra de cada hijo, vestidos de cartel del mundo (solo color, fondo y sombra: la cabeza mide lo mismo) */
.animado .rejilla-completa .hijo-cabeza,.animado .mapa .pv .rejilla .hijo-cabeza{background:linear-gradient(color-mix(in oklab,var(--c,var(--accent)) 82%,#fff),color-mix(in oklab,var(--c,var(--accent)) 82%,#2a1a0c));color:#fffaf0;border-bottom-color:rgba(0,0,0,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 0 rgba(0,0,0,.15);text-shadow:0 1px 1px rgba(0,0,0,.45)}
.animado .rejilla-completa .hijo-cabeza .numero,.animado .mapa .pv .rejilla .hijo-cabeza .numero{background:rgba(255,255,255,.25);color:inherit}
.animado .rejilla-completa .hijo-cabeza .hijo-cifra:not(:empty),.animado .mapa .pv .rejilla .hijo-cabeza .hijo-cifra:not(:empty){color:#2a1a0c;background:#fff4d8;border-radius:999px;box-shadow:0 0 0 3px #fff4d8,0 0 0 4px rgba(0,0,0,.3);text-shadow:none}
.animado .rejilla-completa .hijo[data-vacio] .hijo-cabeza,.animado .rejilla-completa .vacia>.hijo-cabeza,.animado .mapa .pv .rejilla .hijo[data-vacio] .hijo-cabeza,.animado .mapa .pv .rejilla .vacia>.hijo-cabeza{background:color-mix(in oklab,var(--c,var(--rule)) 14%,var(--bg));color:var(--muted);text-shadow:none;box-shadow:none}
.animado .rejilla-completa .caja-cielo .hijo-cabeza,.animado .mapa .pv .rejilla .caja-cielo .hijo-cabeza{background:linear-gradient(rgba(255,255,255,.14),rgba(0,0,0,.25));color:var(--cielo-tinta)}
/* 2 · la etapa del elemento pulsado (o su arte propio, #25): en la cruceta, en la esquina de abajo a la derecha de la
   tarjeta central, junto a la cifra y no detrás del nombre (#8: detrás lo ensuciaba); la tarjeta mide lo mismo y en la
   cara 5 no se ve. En las demás formas, pequeña en la cabecera, junto al nombre */
.animado .rejilla-completa .flotante-cara.cara-0{position:relative;isolation:isolate}
.flotante-cara>.capa-etapa{position:absolute;right:8px;bottom:16px;z-index:-1;width:min(24%,52px);height:auto;max-height:40%;aspect-ratio:1/1;object-fit:contain;opacity:.9}
.animado .nucleo.abierto>.nucleo-cabeza .quien{position:relative}
.capa-etapa-cabeza{position:absolute;left:0;top:50%;width:34px;height:34px;object-fit:contain;transform:translateY(-50%)}
/* 4 · el personaje del mundo, fuera de las celdas: por la forma; esperar en bucle, actuar con lo nuevo; hasta que
   Lottie pinta (o si no carga), su dibujo quieto. Donde el hueco entre celdas (--hueco, 6 px) es menor que la figura
   (#8: pisaba los bordes en la rejilla, la conversación, la matriz…), va al margen exterior de la rejilla: de pie sobre
   el marco, asomando en la cabecera del centro, o en la columna de los ejes de la matriz */
.rejilla-completa>.capa-personaje{--personaje:clamp(64px,11vmin,124px);position:absolute;z-index:2;width:var(--personaje);height:var(--personaje);left:calc(100% * (var(--columnas) - 1) / var(--columnas));bottom:0;transform:translateX(-50%)}
.capa-personaje .pieza{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.3))}
.capa-personaje .respaldo{display:none}
.capa-personaje:has(.sin-lottie) .respaldo,.capa-personaje:has(.pieza-lottie:empty) .respaldo{display:block}
.capa-personaje .sin-lottie{display:none}
.rejilla-completa:is([data-forma="cruceta"],[data-forma="escalera"],[data-forma="columnas"],[data-forma="rejilla"],[data-forma="conversacion"])>.capa-personaje{--personaje:clamp(44px,7vmin,56px);z-index:5;left:50%;bottom:calc(100% - var(--sobre-cabeza,0px));transform:translateX(-50%)}
.rejilla-completa:has(>.rejilla-cabeza)>.capa-personaje{--sobre-cabeza:20px}
.rejilla-completa[data-forma="matriz"]>.capa-personaje{--personaje:clamp(44px,7vmin,56px);left:10px;bottom:14px;transform:none}
.rejilla-completa[data-forma="franjas"]>.capa-personaje{bottom:0;transform:none}
.rejilla-completa[data-forma="franjas"]>.capa-personaje[data-hoy="fin"]{left:auto;right:0}
.rejilla-completa[data-forma="franjas"]>.capa-personaje[data-hoy="inicio"]{left:7.5rem}
.rejilla-completa[data-forma="cielo"]>.capa-personaje{left:50%;bottom:0}
.rejilla-completa[data-forma="camino"]>.capa-personaje{left:auto;right:0;bottom:auto;top:36%;transform:translateY(-50%)}
/* 5 · los efectos de lo nuevo, encima del hijo al que toca (o del centro del mundo), una vez y sin caja */
.capa-efectos{position:absolute;inset:0;z-index:3;display:grid;place-items:center}
.capa-efectos .pieza{grid-area:1 / 1;width:min(100%,180px);height:min(100%,180px);object-fit:contain}
.capa-efectos .pieza-efecto.acabado,.capa-efectos .sin-lottie{display:none}
.rejilla-completa>.capa-efectos-centro{inset:20%}
@media (prefers-reduced-motion: reduce){.capa-efectos{display:none}}
/* 6 · el marco del mundo alrededor de la rejilla, en el margen del centro (sin tapar lo de dentro). El dibujo del marco
   es un cuadrado y no se deforma: cada esquina enseña su esquina (88 de 512, antes de la barra de título que llevan
   algunos) y una línea del color del mundo las une por donde pasan sus trazos (a 36 de 512 del borde). */
.rejilla-completa>.capa-marco{--esquina:22px;--dibujo:calc(var(--esquina) * 512 / 88);position:absolute;inset:-10px;z-index:4}
/* con cabecera («nivel 1 de 4», ↑ subir), el marco empieza debajo de ella: no la pisa (#8) */
.rejilla-completa>.rejilla-cabeza~.capa-marco{top:12px}
.rejilla-completa:has(>.capa-marco) .matriz-esquina{padding-left:8px} /* el rótulo de los ejes de la matriz, dentro del marco (la caja mide lo mismo) */
.capa-marco::before{content:'';position:absolute;inset:calc(var(--esquina) * 36 / 88 - 1.5px);border:3px solid color-mix(in oklab,var(--c,var(--accent)) 72%,#172333);border-radius:8px}
.marco-esquina{position:absolute;width:var(--esquina);height:var(--esquina);overflow:hidden}
.marco-esquina>img{position:absolute;width:var(--dibujo);height:var(--dibujo);max-width:none;margin:0}
.marco-esquina.arriba-izquierda{left:0;top:0} .marco-esquina.arriba-izquierda>img{left:0;top:0}
.marco-esquina.arriba-derecha{right:0;top:0} .marco-esquina.arriba-derecha>img{right:0;top:0}
.marco-esquina.abajo-izquierda{left:0;bottom:0} .marco-esquina.abajo-izquierda>img{left:0;bottom:0}
.marco-esquina.abajo-derecha{right:0;bottom:0} .marco-esquina.abajo-derecha>img{right:0;bottom:0}
/* El animado en los bloques y las tarjetas de Mapped, y en el centro (VG, 11-11, #16: «se ve súper cutre» con el marco
   flotando como una figura encima del contenido). Como a pantalla completa: el sobrio intacto y encima y debajo capas
   absolutas (nada cambia de sitio ni de medida). El fondo del mundo atenuado detrás de todo; la etapa pequeña en la
   cabecera, a la derecha del nombre; el dibujo del mundo en cada hijo (más tenue: el bloque es pequeño y se lee
   encima) o, en una lista, junto a cada ocupante; y el marco abrazando el borde: la traza de sus esquinas a 4 px del
   borde (lo de fuera lo recorta la caja) y la línea del color del mundo entre ellas. Sin personaje. */
.pv>.capa-fondo{position:absolute;inset:0;z-index:-1;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;object-position:50% 50%;opacity:.3;border-radius:inherit;filter:saturate(.9)}
.animado .mapa .pv-cabeza .etiqueta:has(>.capa-etapa-pv){position:relative;min-width:0;overflow-x:clip;overflow-y:visible}
.pv-cabeza .capa-etapa-pv{position:absolute;right:0;top:50%;width:26px;height:26px;max-width:none;aspect-ratio:1/1;object-fit:contain;transform:translateY(-50%);z-index:-1}
.mapa .pv .capa-dibujo .dibujo-hijo{opacity:.45}
.mapa .pv .capa-dibujo .dibujo-ocupante{opacity:.6}
.animado .mapa .pv .ocupante:has(>.capa-elemento){position:relative;isolation:isolate}
.ocupante>.capa-elemento{position:absolute;right:2px;top:50%;width:20px;height:20px;max-width:none;aspect-ratio:1/1;object-fit:contain;transform:translateY(-50%);z-index:-1;opacity:.6}
.pv>.capa-marco,.nucleo>.capa-marco{--esquina:18px;--dibujo:calc(var(--esquina) * 512 / 88);position:absolute;inset:calc(4px - var(--esquina) * 36 / 88);z-index:4}
.pv>.capa-marco::before,.nucleo>.capa-marco::before{border-width:2px;inset:calc(var(--esquina) * 36 / 88 - 1px)}
.pv.nivel-2>.capa-marco{--esquina:14px}
/* el interruptor del 5 del 0 de mi alta: sobrio o animado */
.interruptor{display:inline-flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden;flex:none}
.interruptor button{border:0;border-radius:0;min-height:28px;padding:2px 10px;background:transparent;font-size:13px}
.interruptor button[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg)}
/* el formulario de una acción: lo opcional, tras «más» */
.formulario .mas-parametros{display:grid;gap:10px}
.formulario .mas-parametros summary{cursor:pointer;color:var(--accent);font-size:14px}

/* El móvil apaisado (VG, 11-11): al girar el móvil la carta es Mapped (la época decide por la proporción) y todo cabe en la
   pantalla, sin scroll de página y legible. Solo CSS por el alto y la orientación (nada cambia en el DOM): los rosetones y los mandos como objetivos táctiles de 32 px, las formas de la pantalla completa con letra
   más pequeña. Las medidas en píxeles que usa el árbol (hueco, tarjeta, línea) las manda app.js por el tamaño de la ventana
   (carta.js medidasDePantalla); aquí van las que repinta el CSS. Los controles que van dentro de una lista y no pueden
   crecer sin comerse sus filas (el mando de tamaño, el asa, «↗», los enlaces) crecen su zona de toque con ::after. */
@media (orientation:landscape) and (max-height:500px){
  :root{--hueco:36px;--tarjeta:110px}
  .carta-matriz{padding:0 8px}
  .carta-matriz .escena{margin:2px 0 4px}
  /* el personaje de cada sitio, objetivo táctil de 32 px (sin barra de arriba: la escena es la ventana entera) */
  .sitio-interrogante{width:32px;height:32px;min-height:32px}
  .carta-matriz>.aviso,.carta-matriz>.exito{margin:2px 0;padding:3px 8px;font-size:12px}
  /* los rosetones: 32 px, y el anillo de fuera, de 34 */
  .mapa-celdas{inset:34px}
  .rosetones-mapa .roseton,.rosetones-mapa .roseton.sitio-centro{width:32px;height:32px;font-size:12px}
  .rosetones-mapa .sitio-f0.sitio-centro{top:0;margin-left:38px} .rosetones-mapa .sitio-f2.sitio-centro{bottom:0;margin-left:38px}
  /* los mandos del foco y de cada PV */
  .punto,.punto.centro,.todos-menos{width:32px;height:32px;min-height:32px;font-size:11px}
  .puntos{gap:4px}
  .vecino{height:32px;min-width:32px;font-size:12px}
  .vecinos-centro{left:calc(50% + 58px)}
  .vecinos-centro .vecino{height:32px;min-width:32px;font-size:12px}
  .flotante-cabeza .girar,.mandos .tamano,.celda-abrir,.hijo-cuerpo .celda-abrir,.asa,.enlace,.hijo-cuerpo .ocupante-ref,.rejilla-cabeza .subir,.mapa .ocupantes .pagina button{position:relative}
  .rejilla-cabeza .subir,.mapa .ocupantes .pagina button,.flotante-cabeza .girar,.volver.volver-claro{min-height:32px;min-width:32px}
  .flotante-cabeza .girar{width:32px;height:32px}
  .mandos .tamano{width:24px;height:24px}
  .asa{width:20px;height:20px}
  .ocupante.cuenta,.ocupante.estrella{position:relative}
  .plegable>summary{display:flex;align-items:center;min-height:32px}
  .mandos .tamano::after,.asa::after,.celda-abrir::after,.hijo-cuerpo .celda-abrir::after,.enlace::after,.hijo-cuerpo .ocupante-ref::after,.ocupante.cuenta::after,.ocupante.estrella::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:32px;transform:translateY(-50%)}
  /* el foco y los PV: letra y márgenes más cortos; la guía (alta de 440 px) no cabe en una celda de la matriz, se ve a pantalla completa */
  .mapa .nucleo{padding:4px 8px;gap:4px}
  .mapa .nucleo .representacion{font-size:1.05rem;margin:0}
  .mapa .nucleo .campos{gap:2px 8px}
  .mapa .nucleo .campo label,.mapa .nucleo .campo-0 .etiqueta-0{font-size:11px}
  .mapa .nucleo .campo-input,.mapa .nucleo input{padding:2px 6px;font-size:12px;min-height:32px}
  .mapa .nucleo .leido-boton{min-height:32px}
  .mapa-celdas>.celda{container-type:size;padding:2px}
  .mapa-celdas>.celda .pv-cabeza{font-size:12px}
  .mapa:not(.completa) .celda .guia{display:none}
  /* el foco a toda la pantalla (la pantalla inicial): dos columnas, a la izquierda su cabeza, sus diez puntitos y su nombre, a la derecha su campo y los diez campos */
  @container (min-width:560px) and (min-height:170px){
    .nucleo.anverso{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-auto-flow:row;align-content:start;column-gap:12px}
    .nucleo.anverso>.nucleo-cabeza{grid-column:1;grid-row:1}
    .nucleo.anverso>.puntos{grid-column:1;grid-row:2}
    .nucleo.anverso>.representacion{grid-column:1;grid-row:3}
    .nucleo.anverso>.leido{grid-column:1;grid-row:4;justify-self:start}
    .nucleo.anverso>.campo-0{grid-column:2;grid-row:1}
    .nucleo.anverso>.campos{grid-column:2;grid-row:2 / span 3;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start}
  }
  /* el centro de la matriz 3 × 3 (una celda baja: hasta 150 px): su cabeza (dar la vuelta) y los puntitos, en filas; si es más baja que
     dos filas, una sola que se desliza */
  @container (max-height:150px){
    .nucleo.anverso{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;padding:2px 4px}
    .nucleo.anverso .etiqueta,.nucleo.anverso .quien,.nucleo.anverso .madurez,.nucleo.anverso .representacion,.nucleo.anverso .campo-0,.nucleo.anverso .campos,.nucleo.anverso .leido-boton,.nucleo.anverso .leido{display:none}
    .nucleo.anverso>.nucleo-cabeza{flex:none}
    .nucleo.anverso .voltear{width:32px;height:32px;min-height:32px}
    .nucleo.anverso>.puntos{flex:1 1 auto;min-width:0;gap:2px}
    .nucleo.anverso>.puntos>*{flex:none}
  }
  @container (max-height:100px){
    .nucleo.anverso>.puntos{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
    .nucleo.anverso>.puntos::-webkit-scrollbar{display:none}
  }
  /* los mandos de tamaño de cada PV, arriba a la derecha (en la cabeza, donde no tapan lo que se lee); la medida se ve a pantalla completa */
  .mandos,.mandos.columna-0,.mandos.columna-2,.mandos.columna-1{top:2px;bottom:auto;left:auto;right:4px;transform:none}
  .mapa-celdas>.celda .pv-cabeza .medida{display:none}
  /* el marco de los bloques, más pequeño; en una celda muy baja, solo la línea del color del mundo */
  .pv>.capa-marco,.nucleo>.capa-marco{--esquina:13px}
  .pv-cabeza .capa-etapa-pv{width:22px;height:22px}
  @container (max-height:90px){.pv>.capa-marco .marco-esquina,.nucleo>.capa-marco .marco-esquina{display:none}}
  .mapa-celdas>.celda .pv-cabeza{padding-right:76px}
  /* la pantalla completa de un PV: cabeza y nivel más cortos; lo que aun así no cabe (la guía del 9) se desliza dentro de la tarjeta, no la página */
  .mapa .nucleo.abierto{gap:2px}
  .mapa .nucleo.abierto[data-centro="9"]{overflow-y:auto;overscroll-behavior:contain}
  .rejilla-cabeza{font-size:11px;line-height:1.1;gap:6px}
  .rejilla-cabeza .subir{min-height:32px}
  .rejilla{gap:2px}
  /* la escalera (el 2): cada peldaño en una sola línea, su cabeza a la izquierda y lo que lleva a la derecha, para que se lea cada uno */
  .rejilla-escalera>.hijo{flex-direction:row;align-items:stretch}
  .rejilla-escalera>.hijo>.hijo-cabeza{flex:0 0 auto;max-width:46%;border-bottom:0}
  .rejilla-escalera>.hijo>.hijo-cuerpo{flex:1 1 auto;display:flex;align-items:center;overflow:hidden;padding:0 6px}
  .rejilla-escalera .hijo-lista{flex-wrap:nowrap;gap:0 8px;min-width:0}
  /* la tarjeta flotante de la cruceta */
  .flotante-cara{padding:4px 8px;gap:2px}
  .flotante-nombre{font-size:14px}
  .flotante-cifra b{font-size:22px}
  .flotante-cifra small{font-size:12px}
  .rejilla-cruceta{--flotante-alto:clamp(110px,26cqh,260px)}
  .hijo-cabeza{padding:2px 6px;font-size:12px}
  .hijo-cuerpo{padding:2px 6px}
  .hijo-tabla{font-size:11px}
  .hijo-tabla td{padding:2px 4px}

}

/* Sequenced, el móvil en vertical (VG, 11-11): una sola columna. Arriba de la columna, el personaje del 0 (VG, 12-11, #38:
   sustituye a la barra de una línea y su menú); la tarjeta del foco con una fila por PV, cada una un acordeón que abre debajo
   el segundo nivel del PV (la rejilla de su mundo, en una columna si no cabe a lo ancho); el hilo como scroll, el
   pasado encima de la tarjeta y el futuro debajo; abajo, fija, la fila de los diez dígitos en su color. Mapped y el
   móvil apaisado no cambian. */
.carta-apilada{padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
.secuencia,.secuencia-ahora{display:flex;flex-direction:column;gap:10px;min-width:0}
.cero-columna{position:sticky;top:0;z-index:8;display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 0;background:var(--bg);border-bottom:1px solid var(--rule);font-size:13px;color:var(--muted)}
.cero-columna .sitio-interrogante{width:32px;height:32px;min-height:32px}
/* la tarjeta y el futuro llenan al menos la pantalla bajo el personaje del 0: así la tarjeta sube hasta arriba y el pasado queda encima, fuera */
.secuencia-ahora{min-height:calc(100vh - 56px);min-height:calc(100svh - 56px)}
/* las filas de la tarjeta: la cabeza abre y cierra; el campo escribe; abierta, el PV debajo, a lo ancho */
.filas{list-style:none;margin:0;padding:0;display:grid;gap:2px;min-width:0}
.fila{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:2px 6px;align-items:center;min-width:0;padding:2px 0 2px 6px;border-left:3px solid color-mix(in oklab,var(--c,var(--rule)) 70%,var(--rule))}
.fila:not(:has(>.campo-input))>.fila-cabeza{grid-column:1 / -1}
.fila-cabeza{display:flex;align-items:center;gap:6px;min-width:0;min-height:32px;padding:2px 4px;border:0;background:transparent;text-align:left;font-size:13px;color:var(--fg)}
.fila-cabeza .numero{flex:none;font-size:10px;padding:0 5px;border-radius:4px;background:color-mix(in oklab,var(--c,var(--rule)) 30%,transparent);color:var(--fg)}
.fila-cabeza{flex-wrap:wrap}
.fila-cabeza .etiqueta{flex:1 1 0;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* repaso beta #25: la medida (ciclo 1/5, cuota 9/10) pasa a su línea, bajo la etiqueta, en vez de comérsela */
.fila-cabeza .medida{flex:1 0 100%;order:5;padding-left:26px;font-size:10px;color:var(--muted);line-height:1.1}
.fila-cabeza .fila-marca{order:2}
.fila-marca{flex:none;color:var(--muted);font-size:12px}
.fila.abierta{background:color-mix(in oklab,var(--c,var(--rule)) 5%,transparent);border-radius:0 6px 6px 0}
.fila.abierta>.fila-cabeza .fila-marca{color:var(--fg)}
.fila .campo-input{font-size:13px;min-height:32px}
.fila-contenido{grid-column:1 / -1;min-width:0;padding:2px 4px 6px 0}
.fila-contenido>.pv{width:100%;padding:6px;cursor:default}
.fila-contenido .pv-pie .ayuda{white-space:normal}
.vacio-pv{margin:0;padding:6px 8px;border:1px dashed color-mix(in oklab,var(--c,var(--rule)) 45%,var(--rule));border-radius:6px;text-align:center}
.vacio-pv .hijo-vacio,.hilo-vacio .hijo-vacio{font-size:12px}
/* la rejilla del mundo dentro de la fila: en el flujo de la página (crece con lo que lleva), sin flotar nada */
.rejilla-apilada{flex:none;--hueco:4px}
.rejilla-apilada .rejilla-celdas,.rejilla-apilada .rejilla-bandas{flex:none;grid-template-rows:none;grid-auto-rows:auto;gap:4px}
.rejilla-apilada .rejilla-celda,.rejilla-apilada .rejilla-banda{overflow:visible}
.rejilla-apilada .hijo-cuerpo{overflow:visible;padding:4px 8px 6px}
.rejilla-apilada .hijo[data-vacio] .hijo-cuerpo{justify-content:flex-start;text-align:left}
.rejilla-apilada .rejilla-cruceta{container-type:normal}
.rejilla-apilada .rejilla-cruceta>.hijo[data-fila][data-columna] .hijo-cuerpo,.rejilla-apilada .rejilla-cruceta>.hijo[data-fila][data-columna] .hijo-cabeza{padding-left:8px;padding-right:8px}
.rejilla-apilada .rejilla-escalera>.hijo{margin-left:calc(var(--peldano,0) * 2%)}
.rejilla-apilada .rejilla-conversacion>.hijo{flex:none}
.rejilla-apilada .centro-flotante{position:static;width:auto;height:auto;max-height:none;margin:0 0 4px;perspective:none}
.rejilla-apilada .flotante-cara{min-height:0;max-height:none;box-shadow:none;padding:6px 10px}
.rejilla-apilada .centro-flotante:not(.girada) .cara-5,.rejilla-apilada .centro-flotante.girada .cara-0{visibility:hidden}
.rejilla-apilada .flotante-nombre{margin:0;font-size:15px}
.rejilla-apilada .flotante-cifra{margin:0}
.rejilla-apilada .flotante-cifra b{font-size:22px}
.rejilla-apilada .rejilla-cielo .hijo-cabeza,.rejilla-apilada .rejilla-posiciones .hijo-cabeza{padding:2px 4px;font-size:11px;flex-wrap:wrap}
.rejilla-apilada .rejilla-cielo .hijo-nombre,.rejilla-apilada .rejilla-posiciones .hijo-nombre{white-space:normal;overflow-wrap:break-word}
.rejilla-apilada .caja-cielo .rotulo,.rejilla-apilada .posicion .rotulo{font-size:14px}
.rejilla-apilada .rejilla-cielo .hijo-cuerpo,.rejilla-apilada .rejilla-posiciones .hijo-cuerpo{padding:2px 4px;gap:4px}
.rejilla-apilada .rejilla-cielo .hijo-vacio,.rejilla-apilada .rejilla-posiciones .hijo-vacio{font-size:10px;overflow-wrap:anywhere}
.rejilla-apilada.en-columna .rejilla-cielo,.rejilla-apilada.en-columna .rejilla-posiciones{grid-template-columns:minmax(0,1fr)}
.rejilla-apilada.en-columna .caja-cielo,.rejilla-apilada.en-columna .posicion{flex-direction:row;align-items:stretch}
.rejilla-apilada.en-columna .caja-cielo>.hijo-cabeza,.rejilla-apilada.en-columna .posicion>.hijo-cabeza{flex:0 0 42%;border-bottom:0;border-right:1px solid color-mix(in oklab,var(--c,var(--rule)) 25%,transparent)}
.rejilla-apilada.en-columna .caja-cielo>.hijo-cuerpo,.rejilla-apilada.en-columna .posicion>.hijo-cuerpo{justify-content:flex-start;text-align:left}
.rejilla-matriz-columna.vacia{display:block;padding:6px 8px;border:1px dashed var(--rule);border-radius:6px}
.rejilla-matriz-columna .hijo-nombre{white-space:normal}
/* el hilo: el pasado encima de la tarjeta (lo más cercano, abajo, junto a ella) y el futuro debajo */
.zona-hilo{width:100%;padding:6px;cursor:default}
.zona-hilo .hilo-cabeza{gap:8px}
.zona-hilo .hilo-cabeza small{flex:none}
.hilo-cartas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;min-width:0}
.hilo-carta{min-width:0}
.hilo-entrada{padding:6px 8px;border:1px solid var(--rule);border-radius:8px;background:var(--panel2);font-size:12px}
.hilo-entrada time{font-family:var(--mono);color:var(--muted)}
.hilo-entrada small{display:block;overflow-wrap:anywhere}
.hilo-vacio{padding:4px 2px}
/* la fila de los diez dígitos, fina y fija abajo */
.digitos{position:fixed;left:0;right:0;bottom:0;z-index:8;display:flex;justify-content:center;gap:2px;padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--rule)}
.digito{flex:1 1 0;min-width:0;max-width:44px;height:32px;min-height:32px;padding:0;border-radius:8px;font-family:var(--mono);font-size:14px;font-weight:600;border-color:color-mix(in oklab,var(--c,var(--rule)) 70%,var(--rule));background:color-mix(in oklab,var(--c,var(--rule)) 26%,var(--panel))}
/* Sequenced en animado (VG, 11-11, #7: «menos sobrecargado, pero algo»): el sobrio intacto y, encima y debajo, capas
   absolutas (nada cambia de sitio ni de medida). En cada fila abierta, el fondo del mundo muy atenuado detrás de lo que
   se lee, la etapa pequeña junto al nombre de la fila y el dibujo del mundo en cada hijo (o junto a cada ocupante de una
   lista, también en el hilo); sin muñequitos ni movimientos. La tarjeta del foco lleva su marco solo como borde. */
.fila-contenido>.pv>.capa-fondo{opacity:.18}
/* El fondo del mundo no va detrás del texto de una caja alta (en una fila abierta de Sequenced, en cualquier bloque más alto que ancho): a 2,4× enseñaba un trozo
   de la escena (un cuadro pálido) bajo las letras. Solo una banda arriba, la de la cabecera y un poco más, con su degradado a transparente; el resto, el fondo de la tarjeta. */
.fila-contenido>.pv>.capa-fondo{bottom:auto;height:112px;object-position:50% 0;-webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent);mask-image:linear-gradient(to bottom,#000 45%,transparent)}
@container (max-aspect-ratio:1/1){.mapa .pv>.capa-fondo{bottom:auto;height:112px;object-position:50% 0;-webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent);mask-image:linear-gradient(to bottom,#000 45%,transparent)}}
.fila-cabeza .etiqueta:has(>.capa-etapa-fila){position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible}
.fila-cabeza .capa-etapa-fila{position:absolute;right:0;top:50%;width:28px;height:28px;max-width:none;aspect-ratio:1/1;object-fit:contain;transform:translateY(-50%);z-index:-1}
.animado .fila-contenido .rejilla .hijo{isolation:isolate}
.animado .fila-contenido .rejilla-celda{background:color-mix(in oklab,color-mix(in oklab,var(--c,var(--rule)) 10%,var(--bg)) 78%,transparent)}
.animado .fila-contenido .rejilla-celda.vacia{background:color-mix(in oklab,var(--bg) 50%,transparent)}
/* El dibujo del hijo en una fila abierta no va grande detrás del texto (el cuerpo de la tienda se leía como un cuadro bajo las letras): una figura pequeña en la esquina inferior derecha de la celda, como el icono de un ocupante. */
.fila-contenido .rejilla-apilada .capa-dibujo .dibujo-hijo{left:auto;right:6px;top:auto;bottom:4px;transform:none;width:auto;height:min(72px,var(--alto-hijo));max-width:none;opacity:.9;pointer-events:none}
.fila-contenido .capa-dibujo .dibujo-ocupante{opacity:.55}
.rejilla-apilada .rejilla-cruceta>.hijo .capa-dibujo{left:0;right:0}
.animado .secuencia .ocupante:has(>.capa-elemento){position:relative;isolation:isolate}

/* El anverso del PV0 (issues #21, #24): arriba la representación del foco y debajo un solo input; el HTML adjunto, en su
   iframe aislado (sandbox sin scripts: la carta no toca su contenido), con su propio scroll dentro */
.nucleo .representacion.con-aislada{font-size:inherit;font-weight:normal;min-width:0}
.rep-aislada{display:block;width:100%;height:min(70vh,640px);border:0;border-radius:8px;background:white;color-scheme:light}
.rep-aislada.rep-pendiente{display:grid;place-items:center;height:120px;font-size:13px;color:var(--muted);border:1px dashed var(--rule);background:transparent}
.rep-pendiente{color:var(--muted)}
.campo-unico .campo-input{width:100%;box-sizing:border-box}
/* Sequenced: la cabecera de la tarjeta con altura acotada (el iframe lleva su scroll) */
.carta-apilada .nucleo.anverso .rep-aislada{height:min(46vh,420px)}
/* Mapped: el iframe ocupa el centro; con él, una sola columna (sin los dos lados del foco a toda pantalla) */
.mapa .nucleo.anverso:has(>.con-aislada){grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto;height:100%;box-sizing:border-box}
.mapa .nucleo.anverso:has(>.con-aislada)>*{grid-column:1;grid-row:auto}
.mapa .nucleo.anverso>.con-aislada{height:100%;min-height:0}
.mapa .nucleo.anverso .rep-aislada{height:100%;min-height:100px}
@container (min-width:560px) and (min-height:170px){
  .nucleo.anverso:has(>.con-aislada){grid-template-columns:minmax(0,1fr)}
  .nucleo.anverso:has(>.con-aislada)>*{grid-column:1;grid-row:auto}
}
/* un hueco donde se puede crear un elemento (mantenerlo pulsado: issue #22) */
[data-hueco-pv]:not(.rejilla){cursor:copy}
/* el aro sobre un hueco: solo el centro, un poco más ancho, con su input nuevo */
.aro.aro-nuevo{--centro-ancho:min(240px,70vw);--centro-alto:72px}
.aro.anclado.aro-nuevo{--centro-ancho:240px} /* repaso #17: en el ancla, un número (min() no se puede leer en app.js situarAro: el centro salía de 14px) */
.aro.aro-nuevo .aro-centro{grid-area:2 / 1 / 3 / 4;justify-self:center;width:var(--centro-ancho);padding:8px}
.aro.aro-nuevo .aro-centro>b{display:block;font-size:12px;color:var(--muted)}
.aro.anclado.aro-nuevo .aro-centro>b{display:block}
/* el 3 por tema (encargo pv3, VG 12-11): cada caja, sus personas con el marcador del canal de R (doy, recibo); el botón
   que cicla y el interrogante del sitio en la cabeza; arrastrar una persona a otra caja la reclasifica */
.caja-tres .hijo-cabeza{align-items:center;flex-wrap:wrap;row-gap:2px} /* repaso beta #6: en una caja estrecha el botón y el «?» bajan de línea en vez de comerse el nombre */
.caja-tres .hijo-nombre{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filtro-caja{flex:none;font-size:11px;min-height:22px;padding:0 8px;border-radius:999px;border:1px solid color-mix(in oklab,var(--c,var(--rule)) 45%,var(--rule));background:var(--bg);color:inherit;cursor:pointer}
.filtro-caja[data-filtro="doy"]{border-color:var(--c,var(--accent));font-weight:700}
.filtro-caja[data-filtro="recibo"]{border-style:dashed;font-weight:700}
.sitio-interrogante{flex:none;width:22px;height:22px;min-height:22px;padding:0;border-radius:50%;border:1px solid color-mix(in oklab,var(--c,var(--accent)) 60%,var(--rule));background:color-mix(in oklab,var(--c,var(--accent)) 12%,var(--bg));color:inherit;font-weight:700;font-size:12px;line-height:1;cursor:pointer}
.rejilla-cabeza .sitio-interrogante{margin-left:4px}
.sitio-interrogante{position:relative}
.sitio-interrogante.sitio-centro{margin-left:auto;margin-right:6px}
.pv-cabeza .sitio-interrogante,.hijo-cabeza .sitio-interrogante{margin-left:6px}
/* el muñeco del sitio (animado): una capa sobre el mismo botón, cubre el «?» y no recibe el ratón; el clic es del botón */
.animado .sitio-interrogante{width:30px;height:30px;min-height:30px}
.capa-sitio{position:absolute;inset:-2px;display:block;border-radius:50%;background:var(--bg);box-shadow:0 0 0 1px color-mix(in oklab,var(--c,var(--accent)) 60%,var(--rule));overflow:hidden}
.sitio-interrogante .capa-sitio .pieza-sitio{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);aspect-ratio:auto;margin:0;align-self:auto;object-fit:contain}
.capa-personaje[data-sitio]{pointer-events:auto;cursor:pointer}
/* Sequenced: el interrogante de cada fila, sobre su cabeza (que es un botón y no admite otro dentro) */
.fila:has(>.sitio-fila){grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto}
.fila>.fila-cabeza,.fila>.campo-input,.fila>.sitio-fila{grid-row:1}
.fila>.fila-cabeza{grid-column:1}
.fila>.campo-input{grid-column:2}
.fila>.sitio-fila{grid-column:3;justify-self:end}
.fila:has(>.sitio-fila):not(:has(>.campo-input))>.fila-cabeza{grid-column:1 / 3}
.caja-tres .personas{list-style:none;margin:0;padding:4px;display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start}
.persona{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:28px;padding:2px 8px;border-radius:999px;border:1px solid color-mix(in oklab,var(--c,var(--rule)) 40%,var(--rule));background:var(--bg);color:inherit;font-size:12px;cursor:grab;touch-action:none;user-select:none;-webkit-touch-callout:none}
.persona .texto{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.persona .marcador{display:inline-flex;gap:3px;flex:none}
.persona .marcador small{font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;line-height:16px;min-width:16px;padding:0 4px;border-radius:999px;text-align:center}
.persona .marcador .doy{background:color-mix(in oklab,var(--c,var(--accent)) 30%,var(--bg))}
.persona .marcador .doy::before{content:"↑"}
.persona .marcador .recibo{border:1px solid color-mix(in oklab,var(--c,var(--accent)) 50%,var(--rule))}
.persona .marcador .recibo::before{content:"↓"}
.persona.arrastrando{cursor:grabbing;opacity:.55;outline:2px dashed var(--accent)}
.hijo-minimo{margin:0}
.persona-rejilla{font-weight:600}
/* la cruceta del propio nodo de un sitio (el personaje del sitio, #38): sus diez posiciones en la geometría de la cruz */
.sitio-fondo{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.sitio-cruceta[data-sitio-general]{width:min(94vw,860px)}
.sitio-cruceta{background:var(--bg);border:1px solid var(--rule);border-radius:12px;padding:12px;width:min(92vw,720px);max-height:92vh;overflow:auto;display:grid;gap:10px}
.sitio-cruceta header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sitio-cruceta h2{margin:0;font-size:16px;display:flex;align-items:center;gap:8px}
.sitio-icono{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:color-mix(in oklab,var(--accent) 18%,var(--bg));border:1px solid var(--accent);font-size:13px}
.sitio-posiciones{list-style:none;margin:0;padding:0;display:grid;gap:6px;grid-template-columns:repeat(3,minmax(0,1fr))}
.sitio-celda{grid-row:var(--fila);grid-column:var(--columna);display:grid;gap:6px;min-width:0;align-content:start}
.sitio-posicion{display:grid;gap:3px;align-content:start;min-width:0;padding:6px 8px;border-radius:8px;border:1px solid color-mix(in oklab,var(--c,var(--rule)) 45%,var(--rule));background:color-mix(in oklab,var(--c,var(--rule)) 8%,var(--bg));font-size:12px}
.sitio-posicion .numero{font-size:10px;font-weight:700;justify-self:start;padding:0 5px;border-radius:4px;background:color-mix(in oklab,var(--c,var(--rule)) 30%,transparent)}
.sitio-posicion .nombre{font-weight:600}
.sitio-posicion .valor{color:var(--muted);overflow-wrap:anywhere}
.sitio-posicion .accion{font-size:11px;min-height:26px;justify-self:start}
/* tocar la celda es configurar esa posición (VG 14-11, #85): el botón cubre toda la celda; sin valor, «sin configurar» */
.sitio-posicion.tocable{position:relative;cursor:pointer}
.sitio-posicion.tocable:hover,.sitio-posicion.tocable:focus-within{border-color:var(--c,var(--accent));background:color-mix(in oklab,var(--c,var(--rule)) 16%,var(--bg))}
.sitio-tocar{display:grid;gap:3px;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;min-width:0;min-height:0}
.sitio-tocar::after{content:'';position:absolute;inset:0}
.sitio-posicion .valor.sin-configurar{font-style:italic;opacity:.75}
.configuracion h2 .numero{font-size:11px;font-weight:700;padding:1px 6px;border-radius:4px;background:color-mix(in oklab,var(--rule) 50%,transparent);vertical-align:middle}
@media (max-width:520px){.sitio-posiciones{grid-template-columns:1fr}.sitio-celda{grid-row:auto;grid-column:auto}}