/* 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:anywhere}
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%}
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)}

/* la barra */
.barra{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--rule);font-size:13px;color:var(--muted)}
.barra .ajuste{display:inline-flex;gap:4px;align-items:center}
.barra select{padding:4px 6px;border-radius:8px;border:1px solid var(--rule);background:var(--panel);max-width:40vw}
.barra .tiempo{font-variant-numeric:tabular-nums}
.barra .guardado{flex-basis:100%;font-size:11px}
.barra .sincronia{flex-basis:100%;font-size:11px;overflow-wrap:anywhere}
.barra .sincronia .error{color:var(--warn)}
.barra .sincronia .rechazados summary{cursor:pointer;color:var(--warn)}
.barra .sincronia .rechazados ul{margin:4px 0;padding-left:18px}
.barra .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}
.animado .pv.nivel-2,.animado .pv.nivel-3,.animado .nucleo:not(:has(>.rejilla-completa)){padding:clamp(10px,4%,36px)} /* el marco pintado tiene su grosor: el contenido queda dentro (a pantalla completa, el marco es una capa de la rejilla y el centro no cambia) */
.animado .pv.nivel-3 .pv-pie{margin-bottom:2%}
.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}
.pv .pieza-marco,.pv.nivel-2 .pieza-marco,.nucleo .pieza-marco,.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:anywhere;min-width:0}
.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}
.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:anywhere;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}

/* 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);pointer-events:none}
.aro.anclado .aro-centro>*{display:none}
.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{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.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} .aro:not(.anclado) .hueco .mas{padding:0 5px}
.hueco.apagado .sitio{opacity:.45;background:var(--panel);border-style:dashed}
.hueco .mas{flex:none;border:0;border-left:1px solid var(--c,var(--rule));border-radius:0;background:transparent;color:inherit;font-size:11px;min-height:0;min-width:0;padding:0 7px}
.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 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}
.formulario .campo label{font-size:14px}
.formulario .campo .tipo{font-family:var(--mono)}
.formulario .campo.falta input{border-color:var(--warn)}
.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}

/* 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} .barra select{max-width:36vw}}
@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 .barra{padding:6px 0;flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
.carta-matriz .barra .guardado,.carta-matriz .barra .sincronia{flex:0 1 auto;flex-basis:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.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}
.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{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}
.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%;border-collapse:collapse;font-size:12px}
.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:anywhere}
.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}
/* 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)}
.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)}
/* 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}
.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)}
.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{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{background:color-mix(in oklab,var(--bg) 40%,transparent);box-shadow:none}
.animado .rejilla-completa .rejilla-matriz>.hijo.vacia{background:color-mix(in oklab,var(--bg) 30%,transparent)}
.animado .rejilla-completa .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{background:color-mix(in oklab,color-mix(in oklab,var(--c,var(--rule)) 18%,var(--bg)) 72%,transparent)}
.animado .rejilla-completa .posicion{background:color-mix(in oklab,var(--bg) 62%,transparent)}
.animado .rejilla-completa .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{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{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{background:rgba(255,255,255,.25);color:inherit}
.animado .rejilla-completa .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{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{background:linear-gradient(rgba(255,255,255,.14),rgba(0,0,0,.25));color:var(--cielo-tinta)}
/* 2 · la etapa del elemento pulsado: en la cruceta, dentro de la tarjeta central detrás del nombre y la cifra (la
   tarjeta mide lo mismo; 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;inset:8%;z-index:-1;width:84%;height:84%;object-fit:contain;opacity:.38}
.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, en el hueco entre celdas (nunca dentro de una): por la forma; esperar en bucle, actuar
   con lo nuevo; hasta que Lottie pinta (o si no carga), su dibujo quieto */
.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[data-forma="cruceta"]>.capa-personaje{left:50%;bottom:0}
.rejilla-completa[data-forma="escalera"]>.capa-personaje{left:0;transform:none}
.rejilla-completa[data-forma="conversacion"]>.capa-personaje{left:auto;right:0;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}
.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 interruptor de la barra: 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): la barra en una
   fila compacta, 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}
  /* la barra: una sola fila de 36 px; los rótulos «soy» y «ejemplo» van en el propio desplegable, «hoy», «guardado» y la
     sincronía (si no hay error) ocultos; si aun así no cabe, la propia barra se desliza (no la página) */
  .barra,.carta-matriz .barra{flex-wrap:nowrap;gap:0 6px;padding:2px 0;font-size:12px;min-height:36px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none}
  .barra::-webkit-scrollbar{display:none}
  .barra>*{flex:none}
  .barra .ajuste{font-size:0;gap:0}
  .barra select{font-size:12px;min-height:32px;max-width:26vw;padding:2px 4px}
  .barra button{min-height:32px;padding:2px 8px;font-size:12px}
  .barra .interruptor button{padding:2px 8px}
  .barra .tiempo,.barra .guardado{display:none}
  .barra .sincronia:not(:has(.error,.rechazados)){display:none}
  .barra .sincronia{flex:0 1 auto;font-size:11px}
  .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}
  .hueco .mas{min-width:32px}
  .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}
  .animado .pv.nivel-2,.animado .pv.nivel-3,.animado .nucleo:not(:has(>.rejilla-completa)){padding:clamp(4px,1.5%,10px)} /* el marco pintado, más fino */
  .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}
  .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}

}