/* ============================================================================
   EL LATERAL PLEGABLE · el aspecto común, v2 (16 oct 2026)
   ============================================================================
   Va con assets/lateral.js (la cabecera de ese archivo explica la regla y
   cómo se monta). Es la ESPECIFICACIÓN DEL MENÚ LATERAL V2 de /muestra
   («Maquetación 7 · Menú lateral v2», pedida por el CEO el 16 oct 2026) hecha pieza:
   los mismos nombres (.lat-plegar, .lat-titulo, .lat-fila, .lat-logo…), las
   mismas medidas y el mismo comportamiento. La usan el dashboard del bot
   (bot-dashboard/) y el panel (panel/), que la reciben copiada al publicarse
   (scripts/comun-bot.mjs, scripts/comun-panel.mjs): el original es éste.

   LO QUE PONE CADA SITIO, en su CSS: el ancho de la columna (entero 248,
   riel 72) y sus filas, títulos y lo que va dentro del pie. Lo que se ve
   igual en todos, aquí: con la clase `lat` en la raíz, también el fondo, el
   filo, la cabeza (`.lat-cabeza`), el pie (`.lat-pie`) y dónde cae la
   pestaña, los del home (assets/marco.css; CEO, 20 oct 2026: todo menú
   lateral hereda del home).

   LAS SECCIONES SIGUEN AL HOME (COO, 19 oct 2026): cabecera estática, todas
   las filas a la vista, la activa con la raya amarilla a todo el alto y la ▸.
   Es lo que ya hacen `.lat-titulo` y `.lat-fila` (iguales a `.marco-titulo` y
   `.marco-entrada` de assets/marco.css); para agrupar, `LATERAL.secciones()`.

   MEDIDAS (de la especificación):
     · fila 40, con 8 de margen y 18 de relleno: el icono (20) cae SIEMPRE en
       x 26–46, centro 36 = centro del riel. Plegar no mueve ningún icono.
     · título de sección 32 (+ 16 de aire), sin número; plegado, una raya
       de 24 centrada con el mismo alto.
     · la pestaña «/» de 28 × 36, en el filo derecho, visible en los dos modos.

   Las clases de modo (`lateral-entero`, `lateral-riel`) las pone lateral.js
   en el <html>, pero aquí se leen en CUALQUIER antepasado.
   ========================================================================== */

/* ---------- LA RAÍZ, LA CABEZA Y EL PIE DEL HOME (`.lat`, 20 oct 2026) ----------
   Decisión del CEO (20 oct 2026): todo menú lateral hereda del home de la web
   (assets/marco.css: `.marco-lateral`, `.marco-cabeza`, `.marco-base`).
   Opcional por sitio: solo con la clase `lat` en la raíz (la llevan el panel
   y el dashboard; un sitio que pinte su propio fondo o borde no la pone, para
   no heredar un filo doble).
     · el fondo, el degradado --surface → --ink, y el filo derecho de 1 px
       (abierto encima lo cambia la regla de `.desplegado`, más abajo);
     · la cabeza de 88 (72 en pantallas de ≤ 900 de alto): el imagotipo de
       152 a 24 del borde y, plegado, el isotipo de 40 centrado en el riel
       (x 16–56); la pestaña «/» en su filo (62 desde arriba, 50 en bajas);
     · el pie, anclado abajo, opaco y con el filete de arriba; lo que va
       dentro lo pone cada sitio. Una `.lat-fila` del pie cae en la misma
       columna que las de la lista (el margen lo pone el pie). */
.lat{background:linear-gradient(180deg, var(--surface) 0%, var(--ink) 70%);box-shadow:inset -1px 0 0 var(--line);--lat-pestana-top:3.875rem}
.lat-cabeza{position:relative;flex:none;height:5.5rem;display:flex;align-items:center}
.lat-cabeza .lat-logo{display:flex;width:100%;height:100%;--lat-isotipo-x:1rem}
.lat-cabeza .lat-logo:focus-visible{outline:2px solid var(--yellow);outline-offset:-4px}
.lat .lat-pie{flex:none;display:flex;flex-direction:column;gap:.5rem;padding:.75rem .5rem 1rem;
  background:var(--ink);box-shadow:inset 0 1px 0 var(--line), inset -1px 0 0 var(--line)}
.lat .lat-pie .lat-fila{margin-inline:0}
.lateral-riel .lat.desplegado .lat-pie{box-shadow:inset 0 1px 0 var(--line), inset -1px 0 0 var(--yellow-bajo)}
@media (max-height:900px){
  .lat{--lat-pestana-top:3.125rem}
  .lat-cabeza{height:4.5rem}
}

/* ---------- LA PESTAÑA DE PLEGAR « / » ----------
   Siempre en el mismo sitio y siempre visible (también plegado: el riel ya
   no se despliega al pasar el cursor, así que es la forma de abrirlo con el
   ratón). Chip de 28 × 36, bisel compacto de 7 y su aro (31–36 px de alto). En móvil no hay lateral:
   sin pestaña (el <html> no lleva ninguna de las dos clases). */
.lat-plegar{
  position:absolute;top:var(--lat-pestana-top, 1rem);right:-.875rem;z-index:3;
  display:none;align-items:center;justify-content:center;width:1.75rem;height:2.25rem;padding:0;
  border:0;cursor:pointer;color:var(--texto-2);background:var(--surface-2);
  clip-path:var(--bevel-compacto);--filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
  transition:color .15s ease;
}
.lateral-entero .lat-plegar,.lateral-riel .lat-plegar{display:flex}
.lat-plegar:hover{color:var(--yellow);--filo-color:var(--yellow-bajo)}
.lat-plegar:focus-visible{outline:none;color:var(--texto-1);--filo-color:var(--yellow)}
.lat-plegar:active{transform:scale(.92)}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  /* `--filo-borde:transparent` ya lo pone componentes.css, una vez. */
  .lat-plegar::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-compacto);background:var(--filo-color)}
  .lat-plegar:focus-visible::after{clip-path:var(--filo-foco-compacto)}
}
.lat-plegar svg{width:1rem;height:1rem;display:block;
  transition:transform .38s var(--mov-rebote)}
/* « entero (plegar) → » plegado (desplegar); abierto encima, otra vez «. */
.lateral-riel .plegable:not(.desplegado) .lat-plegar svg{transform:rotate(180deg)}
.lat-plegar:hover svg{translate:-1px 0}
.lateral-riel .plegable:not(.desplegado) .lat-plegar:hover svg{translate:1px 0}

/* ---------- LA CABEZA: el imagotipo que brilla y el isotipo que guiña ----------
   Sin el salto de antes. Al pasar el cursor (o el dedo), un radial crema y
   amarillo sigue al puntero recortado con la forma del imagotipo (`mask`
   con el mismo PNG, que está al lado de esta hoja en los tres sitios) y un
   halo suave detrás. Plegado, el isotipo de 40 (isotipo-guino.svg, en
   línea), que guiña al pasar o tocarlo y de vez en cuando. El cambio solo
   ocurre si el sitio tiene el lateral a la vista (`lateral-visible`, lo
   pone lateral.js): en una pantalla sin lateral, el imagotipo se queda. */
/* LA MEDIDA DEL IMAGOTIPO DE LA CABEZA, UNA SOLA PARA LOS DOS SITIOS (v2 de
   la especificación): 152 de ancho (alto en proporción) y a 24 del borde
   izquierdo de la pantalla. Dentro de `.lat-cabeza` (el panel, el dashboard
   y el muestrario) cae ahí sin más; una marca que hiciera de cabeza desde
   otra barra pondría en `--lat-borde` el relleno que esa barra tiene a la
   izquierda: nadie vuelve a escribir su propio tamaño.
   Solo con el lateral a la vista; sin él (móvil) cada barra deja su logo
   pequeño. */
:root{--lat-logo-w:9.5rem;--lat-logo-x:1.5rem}
html.lateral-visible .lat-imagotipo{flex:none;margin-left:calc(var(--lat-logo-x) - var(--lat-borde, 0px))}
html.lateral-visible .lat-imagotipo img{width:var(--lat-logo-w);height:auto}
.lat-logo{position:relative;display:inline-flex;align-items:center;isolation:isolate}
.lat-imagotipo{position:relative;display:block;transition:opacity .18s ease}
.lat-imagotipo img{display:block}
.lat-brillo,.lat-halo{position:absolute;pointer-events:none;opacity:0;transition:opacity .3s ease}
.lat-brillo{inset:0;
  -webkit-mask:url(logo.png) 0 0/100% 100% no-repeat;mask:url(logo.png) 0 0/100% 100% no-repeat;
  background:radial-gradient(circle 2.75rem at var(--bx,-9rem) var(--by,-9rem), var(--texto-1), var(--yellow-alto) 35%, transparent 75%)}
.lat-halo{inset:-1.25rem;z-index:-1;
  background:radial-gradient(circle 3.5rem at calc(var(--bx,-9rem) + 1.25rem) calc(var(--by,-9rem) + 1.25rem), rgba(255,198,33,.16), transparent 70%)}
.lat-logo.brilla .lat-brillo,.lat-logo.brilla .lat-halo{opacity:1}
.lat-isotipo{position:absolute;left:var(--lat-isotipo-x, 0);top:50%;width:2.5rem;height:2.5rem;margin-top:-1.25rem;
  color:var(--yellow);opacity:0;pointer-events:none;transition:opacity .18s ease}
.lat-isotipo svg{width:100%;height:100%;display:block}
.lat-isotipo .guino-cuerpo{fill:currentColor}
.lat-isotipo .guino-ojo{transform-box:fill-box;transform-origin:50% 55%}
@keyframes lat-guino{0%,100%{transform:scaleY(1)} 38%,58%{transform:scaleY(.06)}}
.lat-isotipo.guina .guino-ojo{animation:lat-guino .34s ease-in-out}
/* Lo que acompañe al imagotipo (`.lat-logo-extra`) se va con él. */
.lat-logo-extra{transition:opacity .18s ease}
.lateral-riel.lateral-visible .lat-imagotipo,
.lateral-riel.lateral-visible .lat-logo-extra{opacity:0;pointer-events:none}
.lateral-riel.lateral-visible .lat-isotipo{opacity:1;pointer-events:auto}
.lateral-riel.lateral-visible .lat-halo,.lateral-riel.lateral-visible .lat-brillo{opacity:0}

/* ---------- LA LISTA ---------- */
.lat-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.lat-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.125rem}

/* EL TÍTULO DE SECCIÓN (CEO, 21 oct 2026; antes, E a 24 y luego Poppins a
   12): Poppins 600 en versal a 10,35 px (.646875rem; CEO, 21 oct 2026: un 15 % más que los 9 de antes, que no se leían; antes, un 25 % menos que los 12 de
   antes; el corte tipográfico manda, < 24 px es Poppins), con el tracking un
   poco más abierto (.08em) para que se lea tan pequeño. COLORES
   INTERCAMBIADOS (CEO, 21 oct 2026, aprobado): el título lleva el color que
   llevaban las filas (--texto-2, más blanco) y las filas el tenue que
   llevaba él (--texto-3). Un filete lo cierra a la derecha. Plegado se
   queda en una raya de 24 centrada (x 24–48), con el mismo alto: nada se
   mueve. */
.lat-titulo{position:relative;display:flex;align-items:center;gap:.75rem;height:2rem;margin:0;padding:0 1rem 0 1.625rem;white-space:nowrap;overflow:hidden;
  font-family:var(--fuente-titular);font-weight:var(--peso-titular);font-size:var(--tipo-rotulo);letter-spacing:calc(var(--tracking-titular) + .03em);line-height:var(--interlinea-titular);
  text-transform:uppercase;color:var(--texto-2)}
.lat-titulo::after{content:'';flex:1 1 auto;height:1px;background:var(--line);transition:opacity .18s ease var(--lat-retraso, 0s)}
.lat-titulo::before{content:'';position:absolute;left:1.5rem;top:50%;width:1.5rem;height:1px;background:var(--line);opacity:0;transition:opacity .18s ease}
.lat-titulo-t{transition:opacity .18s ease var(--lat-retraso, 0s)}
.lateral-riel .plegable:not(.desplegado) .lat-titulo-t,
.lateral-riel .plegable:not(.desplegado) .lat-titulo::after{opacity:0}
.lateral-riel .plegable:not(.desplegado) .lat-titulo::before{opacity:1}
/* CONTRAER (COO con el CEO, 27 oct 2026): el botón cubre toda la cabecera;
   la flecha va tras el filete y gira al cerrar. En el riel no se contrae. */
.lat-titulo-b{all:unset;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;
  /* `all:unset` borra también lo de «nada interactivo se selecciona» (componentes.css): se repone. */
  -webkit-user-select:none;user-select:none;caret-color:transparent}
.lat-titulo-b::before{content:'';position:absolute;inset:0}
.lat-titulo-b:focus-visible::before{outline:2px solid var(--yellow);outline-offset:-2px}
.lat-titulo{padding-right:2.75rem}
.lat-titulo-flecha{position:absolute;right:1rem;top:50%;width:14px;height:14px;margin-top:-7px;color:var(--texto-3);pointer-events:none;transition:transform .18s ease,opacity .18s ease var(--lat-retraso, 0s)}
.lat-titulo-b:hover ~ .lat-titulo-flecha,.lat-titulo-b:focus-visible ~ .lat-titulo-flecha{color:var(--texto-1)}
.lat-titulo-b:hover .lat-titulo-t{color:var(--texto-1)}
.es-cerrada .lat-titulo-flecha{transform:rotate(-90deg)}
.es-cerrada>.lat-lista{display:none}
.lateral-riel .plegable:not(.desplegado) .lat-titulo-flecha{opacity:0}
.lateral-riel .plegable:not(.desplegado) .lat-titulo-b{pointer-events:none}
.lateral-riel .plegable:not(.desplegado) .es-cerrada>.lat-lista{display:flex}

/* LAS SECCIONES, COMO EL HOME (19 oct 2026, COO; `LATERAL.secciones()`,
   opcional). El criterio es el del lateral de la web (assets/marco.css:
   `.marco-seccion` / `.marco-titulo`) y por eso es la MISMA regla: las
   secciones se contraen con su cabecera (`.lat-titulo`, arriba; COO con el
   CEO, 27 oct 2026) y empiezan abiertas; las sueltas, sin cabecera. 16 px
   de aire sobre cada sección (CEO, 21 oct 2026; antes 12); la primera pegada a la lista. En el riel de
   72 px la cabecera es la raya de 24 de arriba, con el mismo alto: nada se
   mueve entre modos, como en la web. */
.lat-seccion{margin-top:1rem}
.lat-nav>.lat-seccion:first-child{margin-top:0}
/* PANTALLAS BAJAS, como la web: por debajo de 900 de alto los títulos se
   aprietan; si aun así no cabe, la lista se desplaza dentro y un fundido
   abajo avisa (`.con-mas`, lo pone lateral.js). Las filas no bajan de 40. */
@media (max-height:900px){
  .lateral-entero .lat-seccion,.lateral-riel .lat-seccion{margin-top:.5rem}
  .lateral-entero .lat-titulo,.lateral-riel .lat-titulo{height:1.75rem}
}
.lat-nav.con-mas{
  -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 3rem), transparent);
          mask-image:linear-gradient(180deg, #000 calc(100% - 3rem), transparent);
}

/* LA FILA: icono · nombre · (sello) · marca. El nombre, en Poppins y en
   minúscula, en el nivel tenue (--texto-3, 5,5:1 como mínimo; colores
   intercambiados con el título, CEO, 21 oct 2026); al pasar y activa,
   --texto-1. Nunca se parte: nowrap, y el riel la recorta. */
.lat-fila{
  position:relative;display:flex;align-items:center;gap:.75rem;
  height:2.5rem;margin:0 .5rem;padding:0 .75rem 0 1.125rem;overflow:hidden;white-space:nowrap;
  font-size:var(--tipo-descripcion);font-weight:500;line-height:1;letter-spacing:0;text-transform:none;
  color:var(--texto-3);text-decoration:none;
  clip-path:var(--bevel-sm);
  transition:color .15s ease, background-color .15s ease;
}
.lat-fila .lat-ico{position:relative;flex:none;display:block;width:1.25rem;height:1.25rem;min-width:0;color:var(--texto-3);
  transition:color .15s ease, transform .25s var(--mov-rebote)}
.lat-fila .lat-ico svg{width:100%;height:100%;display:block}
.lat-nombre{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:clip;line-height:1.4;transition:opacity .18s ease var(--lat-retraso, 0s)}
.lat-sello{flex:none;transition:opacity .18s ease var(--lat-retraso, 0s)}
.lat-fila:hover{color:var(--texto-1);background-color:rgba(242,232,220,.05)}
/* Próximamente: apagada, sin píldora; la etiqueta amarilla lo dice al pasar. */
.lat-fila.es-pronto,.lat-fila.es-pronto:hover{color:var(--texto-3);background-color:transparent;opacity:var(--opacidad-apagado,.45);cursor:default}
.lat-fila.es-pronto:hover .lat-ico{color:var(--texto-3)}
.lat-fila.es-pronto:active{transform:none}
.lat-fila:hover .lat-ico{color:var(--yellow)}
.lat-fila:active{transform:scale(.98)}
.lat-fila:focus-visible{outline:none}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .lat-fila:focus-visible::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-foco-sm);background:var(--yellow)}
}
/* LA ACTIVA, A TODO EL ALTO: el lomo amarillo de 3 px de arriba abajo,
   cortado por el chaflán de la marca (es el mismo recorte de la fila), y un
   degradado que se apaga hacia la derecha. La marca de consola (▸)
   parpadea en su sitio, al final, sin pisar el nombre. */
.lat-fila[aria-current="page"]{color:var(--texto-1);
  background:linear-gradient(90deg, var(--yellow) 0 3px, rgba(255,198,33,.2) 3px, rgba(255,198,33,.06) 65%, rgba(255,198,33,0))}
.lat-fila[aria-current="page"] .lat-ico{color:var(--yellow)}
.lat-marca{flex:none;display:block;width:.4rem;height:.6rem;background:var(--yellow);clip-path:polygon(0 0,100% 50%,0 100%);opacity:0}
/* Solo la activa guarda el sitio de la marca: así un nombre con sello
   («Recompensas · PRONTO») cabe entero en las demás. */
.lat-fila:not([aria-current="page"]) .lat-marca{display:none}
.lat-fila[aria-current="page"] .lat-marca{opacity:1;animation:lat-parpadeo 1s steps(2, jump-none) infinite}
@keyframes lat-parpadeo{0%{opacity:1}100%{opacity:.15}}

/* ---------- EL RIEL PLEGADO ----------
   El nombre, el sello, la marca y lo de `.plegable-etq` se apagan (no se
   quitan: el lector de pantalla los lee y la etiqueta amarilla enseña el
   nombre al pasar o enfocar, `data-etiqueta-cuando`). */
.plegable{--lat-retraso:.12s}   /* un poco menos que el ancho (220–280 ms): a esa altura ya casi está */
.plegable .plegable-etq{transition:opacity .18s ease var(--lat-retraso, 0s)}
.lateral-riel .plegable:not(.desplegado) .plegable-etq,
.lateral-riel .plegable:not(.desplegado) .lat-nombre,
.lateral-riel .plegable:not(.desplegado) .lat-sello,
.lateral-riel .plegable:not(.desplegado) .lat-marca{opacity:0;animation:none;transition:none}
/* EL TEXTO ESPERA (17 oct 2026, pedido del COO): al abrir, los nombres, los
   títulos y el resto del texto del lateral no salen hasta que el ancho casi ha
   terminado, y entonces aparecen enteros, con un fundido (`--lat-retraso`);
   antes se destapaban «palabra por palabra» y se reacomodaban mientras
   crecía. Al cerrar se esconden al instante (el riel no lleva transición).
   Es la misma regla que en la web (assets/marco.css). */
.lateral-riel .plegable:not(.desplegado) .lat-titulo-t,
.lateral-riel .plegable:not(.desplegado) .lat-titulo::after{opacity:0;transition:none}
/* Mientras la página vuelve a su sitio (lateral.js, FLIP): lo transformado
   puede asomar por la derecha y no debe dar una barra. */
html.lateral-vuelo{overflow-x:hidden}
/* Abierto encima (entre 960 y 1151, con la pestaña o «[»): el filo
   amarillo bajo a la derecha, como en la web: flota sobre la página. */
.lateral-riel .plegable.desplegado{box-shadow:inset -1px 0 0 var(--yellow-bajo), 12px 0 32px rgba(0,0,0,.35)}

/* ---------- EL PREMIO ----------
   Al plegar, el símbolo del lateral entra girando como una trufa que rueda a
   su sitio; al desplegar, da el salto de la marca. */
@keyframes plegable-asoma{
  0%{scale:.35;rotate:-140deg}
  60%{scale:1.15;rotate:14deg}
  100%{scale:1;rotate:0deg}
}
@keyframes plegable-salto{
  0%{translate:0 0;rotate:0deg}
  35%{translate:0 -5px;rotate:-4deg}
  70%{translate:0 1px;rotate:2deg}
  100%{translate:0 0;rotate:0deg}
}
.saluda-riel{animation:plegable-asoma .55s var(--mov-rebote)}
.saluda-entero{animation:plegable-salto .42s var(--mov-rebote)}

@media (prefers-reduced-motion: reduce){
  .lat-plegar svg,.lat-nombre,.lat-sello,.lat-titulo-t,.lat-titulo::after,.lat-titulo::before,.lat-titulo-flecha,
  .lat-isotipo,.lat-imagotipo,.lat-logo-extra,.plegable .plegable-etq{transition:none}
  .lat-fila[aria-current="page"] .lat-marca{animation:none}
  .lat-isotipo.guina .guino-ojo{animation:none}
  .lat-fila:active,.lat-plegar:active{transform:none}
  .lat-brillo,.lat-halo{display:none}
  .saluda-riel,.saluda-entero{animation:none!important}
}

/* ============================================================================
   EL DOCK DEL MÓVIL · el de la web, en Administración y el Dashboard
   ============================================================================
   CEO, 21 oct 2026 («Sí, siempre, todo»): por debajo del corte del móvil,
   el panel y el dashboard llevan LA MISMA barra inferior que la web. Esto es
   una COPIA de assets/marco.css («2 · MÓVIL»: .marco-dock, .marco-hoja,
   .marco-ficha), con las mismas medidas, tokens y movimiento; solo cambian
   los nombres (`lat-` en vez de `marco-`, porque el muestrario carga las dos
   hojas a la vez). Si se toca el dock de la web, se toca aquí en el mismo
   commit. Lo pinta `LATERAL.dock()` (assets/lateral.js), que pone en el
   <html> `con-dock` mientras haya casillas y `lat-hoja-abierta` con la hoja.

   EL DOCK FLOTA: --dock-alto es la barra, --dock-margen el aire que la separa
   de los bordes, y --dock-h lo que ocupa DESDE EL SUELO con su aire de arriba
   incluido (lo leen el `padding` del body y quien se ponga encima: la barra
   de guardar del Dashboard, los avisos, los botones flotantes de la Bóveda). */
html{--dock-h:0px}
/* LA ESCALA DEL DOCK ES LA DE LA WEB (`escala-compacta`, marca.css): el
   panel no la lleva, así que `.lat-movil` está en la lista de esa regla (sin
   copia aquí, como `.barra` en panel.css). En el Dashboard, que sí la lleva,
   no cambia nada. */
.lat-movil{display:contents}
.lat-dock,.lat-hoja{display:none}
@media (max-width:959.98px){
  html.con-dock{
    --dock-alto:4.25rem;--dock-margen:.5rem;
    --dock-h:calc(var(--dock-alto) + var(--dock-margen) * 2 + env(safe-area-inset-bottom, 0px));
  }
  html.con-dock body{padding-bottom:var(--dock-h)}
  html.con-dock .lat-dock{display:grid}
  html.con-dock .lat-hoja{display:block}
  html.con-dock .lat-hoja[hidden]{display:none}
}
/* Con la hoja abierta la página no se desplaza por debajo. */
html.lat-hoja-abierta,html.lat-hoja-abierta body{overflow:hidden}

/* EL DOCK: una `.caja` (capa doble: el contorno da la vuelta entera,
   chaflanes incluidos) con el relleno de --surface, opaco, y el filo en
   --yellow-bajo (COO, 19 oct 2026): el dock y su hoja son una sola pieza
   flotante. Pegado al margen de seguridad del iPhone (`bottom`), con su aire
   en `margin-bottom`. Cada casilla mide al menos su etiqueta (max-content) y
   el resto se reparte; `--dock-n` es el número de casillas (lateral.js). */
.lat-dock{
  position:fixed;left:var(--dock-margen);right:var(--dock-margen);z-index:75;
  bottom:env(safe-area-inset-bottom, 0px);margin-bottom:var(--dock-margen);
  height:var(--dock-alto);padding:0 .25rem;
  grid-template-columns:repeat(var(--dock-n, 6),minmax(max-content,1fr));
  --caja-fondo:var(--surface);--filo-color:var(--yellow-bajo);
  --dock-pildora:2rem;--dock-pildora-top:.55rem;--dock-ico:1.375rem;
}
/* Con una hoja abierta, el dock queda por encima de su velo: sigue a mano. */
html.lat-hoja-abierta .lat-dock{z-index:131}
/* LA CASILLA: el icono a una altura fija y la etiqueta debajo. Toda la
   casilla es la zona táctil (≥ 56 × 68). */
.lat-dock-item{
  position:relative;z-index:1;min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.3rem;
  padding:calc(var(--dock-pildora-top) + (var(--dock-pildora) - var(--dock-ico)) / 2) .125rem 0;
  background:none;border:0;cursor:pointer;color:var(--texto-3);text-decoration:none;
  font:inherit;-webkit-tap-highlight-color:transparent;
  transition:color .2s ease, transform .15s ease;
}
/* LA ETIQUETA en Poppins 600 (corte tipográfico), en versal, al 85 % de
   --tipo-rotulo (~11,5 px): la misma excepción que `.marco-dock-etq`, seis
   destinos en 344 px no caben a 13,5 (COO, 27 oct 2026). */
.lat-dock-etq{
  display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--fuente-titular);font-weight:var(--peso-titular);font-size:calc(var(--tipo-rotulo) * .85);
  letter-spacing:0;line-height:var(--interlinea-titular);text-transform:uppercase;
}
.lat-dock-ico{width:1.25rem;height:1.25rem;flex:none;display:block}
.lat-dock-item .lat-dock-ico{width:var(--dock-ico);height:var(--dock-ico);transition:transform .25s var(--mov-rebote)}
@media (hover:hover){ .lat-dock-item:hover{color:var(--texto-1)} }
/* LA CASILLA VIVA (la de la página, su sección o la hoja abierta): icono y
   etiqueta en amarillo, con la raya encima (el cursor). */
.lat-dock-item.es-activo{color:var(--yellow)}
.lat-dock-item.es-activo .lat-dock-avatar{box-shadow:0 0 0 1.5px var(--yellow)}
.lat-dock-item:active{transform:scale(.92)}
.lat-dock-item:active .lat-dock-ico{transform:translateY(-1px)}
.lat-dock-item:focus-visible{outline:none}
/* EL FOCO: el aro amarillo de 2 px alrededor de la casilla (con su bisel). */
.lat-dock-item:focus-visible::after{
  content:'';position:absolute;inset:.25rem .125rem;pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--yellow);
}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .lat-dock-item:focus-visible::after{box-shadow:none;background:var(--yellow);clip-path:var(--filo-foco-compacto)}
}
/* EL CURSOR ES LA RAYA: 1,5 rem × 3 px de amarillo pegada al borde de arriba
   de la casilla viva, que se desliza con el rebote de la marca. */
.lat-dock-cursor{
  position:absolute;z-index:2;top:2px;left:0;
  width:1.5rem;height:3px;margin-left:-.75rem;border-radius:0 0 2px 2px;
  background:var(--yellow);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.lat-dock-cursor.visible{opacity:1}
.lat-dock-cursor.listo{transition:opacity .2s ease, transform .38s var(--mov-rebote)}
/* El avatar sustituye al icono de la cuenta cuando hay retrato. Sin foto, la
   inicial en su círculo (como el avatar de cada sitio). */
.lat-dock-avatar{width:var(--dock-ico);height:var(--dock-ico);border-radius:50%;display:block;object-fit:cover;flex:none;
  box-shadow:0 0 0 1.5px currentColor}
.lat-dock-avatar.es-inicial{display:grid;place-items:center;background:var(--surface-2);color:var(--texto-1);
  font-family:var(--fuente-titular);font-weight:var(--peso-titular);font-size:var(--tipo-rotulo);line-height:1}
@keyframes lat-pulso{0%{transform:scale(1)}40%{transform:scale(.82) rotate(-8deg)}100%{transform:scale(1)}}
.lat-dock-item.pulsada .lat-dock-ico,.lat-ficha.pulsada > svg{animation:lat-pulso .38s var(--mov-rebote)}

/* LA HOJA: flota encima del dock, con su mismo aire a los lados, y enseña
   solo lo que se pidió. Detrás, un velo que cierra al tocarlo. */
.lat-hoja{position:fixed;inset:0;z-index:130}
.lat-hoja-velo{position:absolute;inset:0;background:rgba(23,17,13,.72);opacity:0;transition:opacity .26s ease}
.lat-hoja.abierta .lat-hoja-velo{opacity:1}
/* CAPA DOBLE, como `.caja`: el fondo es el filo y el `::before` pone el
   relleno 1 px por dentro (la raya da la vuelta entera, chaflanes incluidos). */
.lat-hoja-panel{
  position:absolute;left:var(--dock-margen);right:var(--dock-margen);bottom:var(--dock-h);
  display:flex;flex-direction:column;max-height:calc(100svh - var(--dock-h) - 5rem);
  isolation:isolate;background:var(--yellow-bajo);clip-path:var(--bevel);
  opacity:0;transform:translateY(1.5rem);transform-origin:50% 100%;
  transition:transform .32s var(--mov-rebote), opacity .2s ease;
}
.lat-hoja-panel::before{
  content:'';position:absolute;inset:1px;z-index:-1;background:var(--surface);clip-path:var(--bevel);
}
.lat-hoja.abierta .lat-hoja-panel{opacity:1;transform:none}
.lat-hoja-panel:focus{outline:none}
.lat-hoja-panel.arrastrando{transition:none}
.lat-hoja-asa{
  flex:none;position:relative;display:flex;align-items:center;justify-content:space-between;
  padding:.85rem .5rem .35rem 1rem;touch-action:none;cursor:grab;
}
.lat-hoja-tirador{position:absolute;left:50%;top:.4rem;width:2.5rem;height:3px;margin-left:-1.25rem;background:var(--line)}
/* EL TÍTULO es el rótulo de la sección, con su número en la E. */
.lat-hoja-titulo{
  margin:0;font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--texto-2);
}
.lat-hoja-titulo > span{display:flex;align-items:baseline;gap:.6rem}
.lat-hoja-cerrar{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;background:none;border:0;cursor:pointer;color:var(--texto-2);
}
.lat-hoja-cerrar:hover{color:var(--texto-1)}
.lat-hoja-cerrar:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.lat-hoja-cuerpo{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:.25rem 1rem 1rem;
}
.lat-hoja-grupo{display:flex;flex-direction:column;gap:1rem}
.lat-hoja-grupo[hidden]{display:none}
/* EL RÓTULO de cada sección dentro de «Más» («04 SISTEMA»): el numeral en
   amarillo, el nombre a --tipo-rotulo (el `.marco-rotulo` de la web). */
.lat-rotulo{
  display:flex;align-items:baseline;gap:.6rem;white-space:nowrap;margin:0;padding:0 0 .55rem;
  font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--texto-3);
}
.lat-num{
  font-family:var(--fuente-titular);font-weight:var(--peso-titular);font-size:var(--tipo-entradilla);font-variant-numeric:tabular-nums;
  letter-spacing:0;line-height:1;color:var(--yellow);min-width:1.25rem;
}
.lat-fichas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
/* `.lat-ficha-ancha`: la fila entera en las dos columnas (nombre largo o la
   que se quedaría sola). Con tres columnas (≥ 600) vuelve a su casilla. */
.lat-ficha-ancha{grid-column:1/-1}
@media (min-width:600px){
  .lat-fichas{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lat-ficha-ancha{grid-column:auto}
}
/* LA FICHA de la hoja: un chip (≥44 px de alto, el bisel de 9 y su aro). */
.lat-ficha{
  position:relative;display:flex;align-items:center;gap:.6rem;min-height:3rem;padding:.4rem .75rem;
  font-size:var(--tipo-descripcion);font-weight:500;line-height:1.25;text-decoration:none;
  color:var(--texto-2);background:rgba(242,232,220,.04);
  clip-path:var(--bevel-sm);--filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
  -webkit-tap-highlight-color:transparent;transition:background .15s ease, color .15s ease;
}
.lat-ficha > svg{width:1.25rem;height:1.25rem;flex:none;display:block;color:var(--texto-3)}
.lat-ficha-etq{min-width:0}
.lat-ficha:active{background:var(--surface-2);transform:scale(.97)}
.lat-ficha[aria-current="page"]{color:var(--texto-1);--filo-color:var(--yellow)}
.lat-ficha[aria-current="page"] > svg{color:var(--yellow)}
.lat-ficha:focus-visible{outline:none;--filo-color:var(--yellow)}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .lat-ficha::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-sm);background:var(--filo-color)}
  .lat-ficha:focus-visible::after{clip-path:var(--filo-foco-sm)}
}
/* Lo que aún no existe: apagado y sin enlace (CEO, 21 oct 2026), como la
   fila del lateral. */
.lat-ficha.es-pronto{--ficha-op:var(--opacidad-apagado,.45);opacity:var(--ficha-op);cursor:default}
.lat-ficha.es-pronto:active{background:rgba(242,232,220,.04);transform:none}
/* LA ENTRADA: las fichas suben escalonadas cada vez que se abre una hoja. */
/* Termina en --ficha-op: lo apagado (.es-pronto) se queda con su opacidad. */
@keyframes lat-ficha-entra{from{opacity:0;translate:0 .6rem}to{opacity:var(--ficha-op,1);translate:0 0}}
.lat-hoja-panel.entra .lat-ficha,
.lat-hoja-panel.entra .lat-hoja-cuenta .cuenta-item{
  animation:lat-ficha-entra .34s var(--mov-rebote) both;animation-delay:calc(var(--i, 0) * 35ms + 40ms);
}
/* LA HOJA DE LA CUENTA: no hay nada que desplegar, la hoja ya es el menú (como
   la de la web). El botón de cada `.cuenta` que llega aquí se esconde y su
   menú queda a la vista (lateral.js le quita el `hidden` mientras la hoja
   está abierta), quieto y en su caja. Encima, la cabecera: el retrato y el
   nombre del botón, quietos (copia de `.marco-hoja .mc-cabecera`); con ella,
   el `.cuenta-nombre` del menú sobra. Lo de dentro (retrato, nombre) lo mide
   cada sitio, como su chip del pie. */
.lat-hoja-cuenta{display:flex;flex-direction:column;gap:1rem}
.lat-hoja-cuenta .cuenta{display:block;position:relative;width:auto;margin:0}
.lat-hoja-cuenta .cuenta > :not(.cuenta-menu):not(.lat-hoja-cabecera){display:none}
.lat-hoja-cabecera{
  position:relative;display:flex;align-items:center;gap:.625rem;width:100%;min-height:3.5rem;margin-bottom:.5rem;
  padding:.375rem .625rem .375rem .375rem;background:rgba(242,232,220,.04);cursor:default;
  font-size:var(--tipo-descripcion);font-weight:600;letter-spacing:0;text-transform:none;color:var(--texto-1);text-align:left;
  white-space:nowrap;overflow:hidden;
  clip-path:var(--bevel-sm);--filo-color:var(--line);
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .lat-hoja-cabecera::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-sm);background:var(--filo-color)}
}
.lat-hoja-cabecera ~ .cuenta-menu > .cuenta-nombre{display:none}
.lat-hoja-cuenta .cuenta-menu{
  position:relative;inset:auto;min-width:0;width:auto;max-height:none;margin:0;
}

/* ---------- LA CABECERA DELGADA (CEO, 22 oct 2026; LATERAL.cabecera) ----------
   Copia de `.marco-cab` (assets/marco.css, «4b»): 48 de alto (--cab-alto, de
   marca.css), el fondo de la página opaco y la línea de abajo; el icono en
   amarillo y el nombre en Poppins 600 versal (el corte tipográfico: menos de
   24 px). Cada sitio la coloca en su rejilla y dice dónde se pega
   (--lat-cab-arriba: lo que haya fijo encima, la franja de la demo); por
   debajo de su lateral abierto encima (z 20). En el móvil no se pinta: la
   barra de arriba de cada sitio hace de cabecera y se esconde igual
   (`.oculta`, que también lleva esa barra). --cab-vista es lo que tapa
   ahora la banda: 48 mientras se ve y 0 escondida o sin banda (móvil, una
   pantalla sin lateral); lo suma lo que se pega arriba (`.pegado`, las
   cabeceras de las tablas). */
html{--cab-vista:0px}
@media (min-width:960px){ html:not(.cab-oculta):has(.lat-cab:not([hidden])){--cab-vista:var(--cab-alto)} }
.lat-cab{
  position:sticky;top:var(--lat-cab-arriba, 0px);z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;min-width:0;
  height:var(--cab-alto);padding:0 1.5rem;
  background:var(--ink);box-shadow:inset 0 -1px 0 var(--line);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.lat-cab[hidden]{display:none}
.lat-cab.oculta{transform:translateY(-100%)}
.lat-cab-pag{display:flex;align-items:center;gap:.6rem;min-width:0;
  font-family:var(--fuente-titular);font-weight:var(--peso-titular);font-size:.875rem;  /* fijo: la escala compacta del Dashboard no la cambia */
  letter-spacing:var(--tracking-titular);text-transform:uppercase;color:var(--texto-1);white-space:nowrap;text-decoration:none}
.lat-cab-nombre{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lat-cab-ico{display:flex;flex:none;width:1.25rem;height:1.25rem;color:var(--yellow)}
.lat-cab-ico > *,.lat-cab-ico svg{width:100% !important;height:100% !important;display:block}  /* el icono del módulo trae su tamaño */
.lat-cab-pag[href]:hover{color:var(--yellow)}
.lat-cab-pag:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.lat-cab-acciones{display:flex;align-items:center;gap:.5rem;flex:none;min-width:0}
.lat-cab-acciones[hidden]{display:none}
@media (max-width:959.98px){ .lat-cab{display:none} }
@media print{ .lat-cab{display:none} }

@media (prefers-reduced-motion: reduce){
  .lat-cab{transition:none}
  .lat-hoja-panel,.lat-hoja-velo,.lat-dock-cursor.listo{transition:none}
  .lat-hoja-panel.entra .lat-ficha,.lat-hoja-panel.entra .lat-hoja-cuenta .cuenta-item{animation:none}
  .lat-dock-item.pulsada .lat-dock-ico,.lat-ficha.pulsada > svg{animation:none!important}
  .lat-dock-item:active,.lat-ficha:active{transform:none}
}
@media print{ .lat-movil{display:none!important} html.con-dock body{padding-bottom:0} }