/* ============================================================================
   EL LATERAL PLEGABLE · el aspecto común (16 oct 2026)
   ============================================================================
   Va con assets/lateral.js (la cabecera de ese archivo explica la regla y
   cómo se monta). Aquí está lo que se ve igual en todos los sitios y es
   copia del lateral de la web (assets/marco.css): el botón de plegar, su
   flecha, el premio, y cómo se apaga lo que no cabe en el riel. Las medidas
   de la columna (entera y riel) son de cada sitio, en su CSS.

   Las clases de modo las pone lateral.js en el <html> (`lateral-entero`,
   `lateral-riel`), pero aquí se leen en CUALQUIER antepasado: así la demo
   viva del muestrario (/muestra, «12 · Menú lateral plegable») usa estas
   mismas reglas dentro de una caja, sin tocar la página.
   ========================================================================== */

/* ---------- EL BOTÓN DE PLEGAR ----------
   Un chip de 32 (bisel de 9 y su aro, que solo se enciende al pasar o con
   el foco) con el lateral dibujado: la caja de la marca, su columna y una
   flecha que apunta hacia donde va. En el riel plegado se apaga como los
   nombres y aparece al desplegarse encima; el foco del teclado lo
   despliega antes de llegar a él. */
.plegable-boton{
  position:relative;flex:none;
  display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;
  background:none;border:0;cursor:pointer;color:var(--texto-3);
  clip-path:var(--bevel-sm);--filo-color:transparent;
  box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
  transition:color .15s ease, background .15s ease, opacity .18s ease;
}
.plegable-boton:hover{color:var(--yellow);background:rgba(242,232,220,.06);--filo-color:var(--line)}
.plegable-boton:active{transform:scale(.92)}
.plegable-boton:focus-visible{outline:none;color:var(--texto-1);--filo-color:var(--yellow)}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  /* `--filo-borde:transparent` ya lo pone componentes.css, una vez. */
  .plegable-boton::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-sm);background:var(--filo-color)}
  .plegable-boton:focus-visible::after{clip-path:var(--filo-foco-sm)}
}
.plegable-ico{
  width:1.125rem;height:1.125rem;display:block;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
/* La flecha: «‹» con el lateral entero (plegar), «›» plegado (desplegar).
   Da la vuelta con el rebote de la marca. */
.plegable-flecha{transform-box:fill-box;transform-origin:50% 50%;transition:transform .38s var(--mov-rebote)}
.lateral-riel .plegable-flecha{transform:rotate(180deg)}
.plegable-boton:hover .plegable-flecha{translate:-1px 0}
.lateral-riel .plegable-boton:hover .plegable-flecha{translate:1px 0}

/* Por debajo de 1152 el lateral no se puede fijar abierto: sin botón (y
   lateral.js apaga también la tecla). */
@media (max-width:1151px){ .plegable-boton{display:none} }

/* ---------- EL RIEL PLEGADO ----------
   Lo de `.plegable-etq` se apaga (no se quita: el lector de pantalla lo
   sigue leyendo y el foco lo alcanza, y al llegar despliega); el botón,
   igual, hasta que el riel se abre encima. */
.plegable .plegable-etq{transition:opacity .18s ease}
.lateral-riel .plegable:not(.desplegado) .plegable-etq{opacity:0}
.lateral-riel .plegable:not(.desplegado) .plegable-boton{opacity:0;pointer-events:none}
/* El riel abierto encima lleva el filo amarillo bajo a la derecha, como en
   la web: se lee como algo que flota sobre la página. */
.lateral-riel .plegable.desplegado{box-shadow:inset -1px 0 0 var(--yellow-bajo)}

/* ---------- EL PREMIO ----------
   Al plegar, el símbolo entra girando como una trufa que rueda a su sitio;
   al desplegar, da el salto del logo de la web. */
@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){
  .plegable-flecha,.plegable .plegable-etq{transition:none}
  .plegable-boton:active{transform:none}
  .saluda-riel,.saluda-entero{animation:none!important}
}