/* preceptoros.org · las hojas que DESLIZAN y la lista de companeros.
   Se partio de `widget.css` cuando esa llego a 10.118 B de un tope de 10.240:
   la doctrina del Agora manda partir, no recortar, porque los comentarios de
   estos ficheros son su razonamiento. `widget.css` se queda con el cabezal y
   el chat; aqui viven los paneles. */

/* LAS CINCO CAPAS · por que NO hay un `capas.css`.
   Se escribio, y se deshizo el mismo dia. Medido: una hoja mas cuesta ~48 B de
   etiqueta en cada portada Y una entrada en la lista de precache de `sw.js`,
   que estaba a 17 B de su techo de 10.240 -- con la entrada se puso en 10.244.
   Dejarla fuera del precache habria sido peor que no tener el fichero: la
   pagina sin red se habria quedado sin maqueta.
   Asi que las reglas van a su casa natural, que ademas es el criterio con el
   que ya se partio `chat-router.js`: por asunto, no por tamano. La Capa 3 ES
   el panel y vive aqui; la esfera y los atajos son chat y viven en `chat.css`.
   Los NUMEROS de la escala siguen en `canon.css`, que es el anexo de tokens. */

/* --- Capa 3 · el desplegable de companeros ------------------------------
   ESPEJO DEL MVP: un desplegable violeta anclado al cabezal, no una columna.
   Revoca el rail derecho permanente -- firmado el 2026-09-05, la web se apila
   con las mismas cinco capas que la app y con su misma estetica.

   Se gana el hueco de 4,6rem que la pagina ENTERA reservaba contra el borde,
   abierto o no: un rail plegado ocupa, un desplegable no. La reserva se va con
   el y el centro toma todo el ancho -- mono panel.

   `transform` y no `height`; `transform-origin: top left` lo hace crecer del
   canto y no del centro, que se lee como acordeon. `position:static` en la zona
   lo ancla al CABEZAL, no al boton. Los dos mandos comparten mueble; la cola
   (`.panel-desliza`) se queda a la derecha. */
.lateral-zona{position:static;display:contents}
.lateral-boton{flex:none;display:inline-flex;align-items:center;
  justify-content:center;width:40px;height:40px;padding:0;font:inherit;
  cursor:pointer;color:var(--violeta-texto);background:transparent;
  border:1px solid var(--bronce);border-radius:999px}
.lateral-boton svg{width:1.25em;height:1.25em}
.lateral-boton:focus-visible{outline:2px solid var(--violeta);outline-offset:2px}
.lateral-boton[aria-expanded="true"]{color:#fff;background:var(--violeta);
  border-color:var(--violeta)}
#panel-modelos,#panel-ajustes{position:absolute;left:.7rem;top:calc(100% - .1rem);
  z-index:var(--capa-3-lateral);width:min(20rem,calc(100vw - 1.4rem));
  max-height:min(70vh,32rem);overflow:auto;padding:.6rem;
  border-radius:var(--radius);background:var(--violeta);color:#fff;
  box-shadow:0 12px 32px rgba(36,26,53,.34);
  transform-origin:top left;transform:scaleY(1);opacity:1;
  transition:transform .18s ease-out,opacity .18s ease-out}
/* CERRADO NO OCUPA NADA. `scaleY(0)` lo repliega contra el canto, y
   `visibility` le quita el foco: a escala cero sigue siendo tabulable, y quien
   navega con teclado caeria dentro de algo que no ve. */
#panel-modelos.cerrado,#panel-ajustes.cerrado{transform:scaleY(0);opacity:0;
  visibility:hidden}
/* La rueda cuelga del canto de SU boton. */
#panel-ajustes{left:3.9rem;width:min(14rem,calc(100vw - 4.6rem))}
.ajuste-idioma{display:block;width:100%;text-align:left;font:inherit;
  font-size:.82rem;font-weight:600;color:#fff;text-decoration:none;
  cursor:pointer;padding:.45rem .6rem;min-height:40px;
  background:transparent;border:0;border-radius:var(--radius)}
.ajuste-idioma:hover,.ajuste-idioma:focus-visible{background:rgba(255,255,255,.16)}
.ajuste-idioma[aria-current]{background:rgba(255,255,255,.24)}
.ajuste-piel{display:flex;gap:.4rem}
.ajuste-piel .ajuste-idioma{text-align:center}
/* Sobre violeta, los rotulos de las tarjetas son blancos: el marmol claro que
   traian venia de vivir sobre marmol. */
#panel-modelos .panel-titulo,#panel-modelos .modelo-nombre{color:#fff}
#panel-modelos .panel-rotulo,#panel-modelos .modelo-spec{color:rgba(255,255,255,.82)}
#panel-modelos .modelo{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28);
  color:#fff}
#panel-modelos .modelo-real.no-sirve{color:rgba(255,255,255,.70)}

/* --- las hojas que se deslizan, a la derecha ---------------------------- */
.panel-desliza{position:fixed;top:0;right:0;bottom:0;
  width:min(24rem,92vw);z-index:20;overflow:auto;padding:1rem .9rem;
  transition:transform .35s ease,width .35s ease;
  background:var(--marmol-claro);
  /* El canto por donde SALE: un filo de luz del canon (--edge) y el borde de
     bronce. Se pidio unirlo a su origen "en color degradado"; el canon
     prohibe gradientes CSS, asi que el desvanecido lo hace la SOMBRA --que
     el canon ya usa en --depth-- y el filo marca la costura. Es lo mismo a
     la vista y no rompe la regla. */
  border-left:3px solid var(--bronce);
  box-shadow:-1px 0 0 var(--edge), -18px 0 40px rgba(30,24,38,.22);
  transform:translateX(0);transition:transform .35s ease}
.panel-desliza.cerrado{transform:translateX(101%)}
.modelo-inicial{display:grid;place-items:center;width:56px;height:56px;
  border-radius:50%;background:var(--tinta);color:var(--marmol);
  font-weight:700;font-size:1.1rem;grid-row:1/span 3}
.panel-cerrar{position:absolute;top:.6rem;right:.7rem;font:inherit;
  font-size:1.1rem;line-height:1;cursor:pointer;color:var(--tinta);
  background:none;border:1px solid var(--bronce);border-radius:var(--radius);
  padding:.1rem .45rem}
.panel-titulo{font-size:1rem;margin:0 0 .3rem}
/* El rotulo de honestidad es pequeno y NO desaparece nunca. */
.panel-rotulo{font-size:.74rem;color:var(--bronce-hondo);margin:0 0 .8rem}

.modelos{display:flex;flex-direction:column;gap:.55rem}
.modelo{display:grid;grid-template-columns:56px 1fr;gap:.6rem;
  align-items:center;text-align:left;font:inherit;color:var(--tinta);cursor:pointer;
  /* --marmol-claro y no --marmol: `--jardin` viene medido en base.css como
     4,66:1, y esa medida vale sobre el marmol CLARO. Sobre --marmol da 4,38
     -- medido en el navegador. Se corrige el fondo, que es donde estaba el
     error, en vez de inventar un verde nuevo fuera del canon. */
  background:var(--marmol-claro);border:1px solid var(--bronce);
  border-radius:var(--radius);padding:.7rem .5rem;
  transition:transform .16s var(--spring),box-shadow .16s ease}
.modelo:hover,.modelo:focus-visible{transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(30,24,38,.18)}
.modelo:focus-visible{outline:2px solid var(--violeta);outline-offset:2px}
.modelo img{width:56px;height:56px;display:block;grid-row:1/span 3}
.modelo-nombre{font-weight:700;font-size:.88rem;grid-column:2}
.modelo-spec{font-size:.78rem;color:var(--tenue);line-height:1.4;grid-column:2}
.modelo-real{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;
  grid-column:2}
.modelo-real.sirve{color:var(--jardin);font-weight:700}
.modelo-real.no-sirve{color:var(--bronce-hondo)}

/* El esqueleto reserva el sitio de la tarjeta real para que la rejilla no
   salte cuando llegan los datos. */
/* 5,4rem: la altura MEDIDA de la fila real. Un esqueleto que reserva otra
   cosa hace saltar la lista cuando llegan los datos. */
.modelo.esqueleto{cursor:default;pointer-events:none;min-height:5.4rem}
.hueso{background:rgba(120,98,76,.16);border-radius:calc(var(--radius) - 10px);
  height:.7rem;width:80%;animation:respira 1.6s ease-in-out infinite}
.hueso.esfera{width:56px;height:56px;border-radius:50%;grid-row:1/span 3}
.hueso.corto{width:55%}
@keyframes respira{50%{background:rgba(120,98,76,.30)}}

/* --- la cola de firma --------------------------------------------------- */
.cola-pieza{background:var(--marmol-claro);border:1px solid var(--bronce);
  border-radius:var(--radius);padding:.85rem .95rem;margin:0 0 .7rem}
.cola-origen{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bronce-hondo)}
.cola-resumen{font-weight:700;margin:.2rem 0}
.cola-cuerpo{font-size:.86rem;color:var(--tenue);margin:0 0 .6rem}
.cola-nota{font-size:.78rem;color:var(--tenue)}

/* --- panel de herramientas ---------------------------------------------- */
#herramientas{margin-top:.9rem}
#herramientas .panel-titulo{font-size:.9rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bronce-hondo);margin:0 0 .6rem}
#herramientas .fila{margin:.4rem 0}

/* --- PC: la ventana se estira y el chat NO se pierde --------------------- */
@media (min-width:1024px){
  /* `main` viene limitado a 46rem por base.css, que es la medida de una
     columna de lectura. Con el panel docked eso dejaba el chat en 360 px --
     tan estrecho como la propia columna de modelos. En PC la ventana se
     estira; el chat sigue teniendo su medida de lectura por dentro. */
  main{max-width:min(1400px,96vw)}
  /* EL RAIL YA NO ENTRA EN LA REJILLA, Y ESA ES LA CORRECCION.
     Firmado por el Soberano el 2026-09-03.

     Hasta hoy, en escritorio el panel pasaba a `position:static` y vivia como
     segunda columna DENTRO de `#hub-layout`, que esta dentro de `<main>`, que
     va despues del cabezal y antes del pie. Un hijo no puede ser mas alto que
     su padre: el rail empezaba bajo el cabezal y terminaba sobre el pie, y
     ningun ajuste de margen podia arreglarlo porque el problema no era el
     margen, era el arbol. Se quedaba cortado por arriba y por abajo.

     Ahora conserva en todos los anchos el `position:fixed; top:0; bottom:0`
     que ya tenia en el movil, asi que es una columna ininterrumpida de borde a
     borde del viewport. El hueco lo reserva `body` una sola vez -- ver
     `widget.css` -- en vez de que se lo reserve cada contenedor por su cuenta.

     Lo que se pierde es la columna acoplada de 360 px. Era deliberada y su
     motivo era bueno --que el chat no saltara de ancho al plegar el panel--,
     pero el rail plegado mide siempre lo mismo y el hueco es global, asi que
     el ancho del chat sigue sin moverse. */
  #hub-layout{display:block}
  #chat{min-height:calc(100vh - 22rem)}
  #dialogo{min-height:8rem}
}

@media (prefers-reduced-motion:reduce){
  #panel-modelos,.modelo,.cab-boton,.hueso{transition:none;animation:none}
  .modelo:hover,.cab-boton:hover{transform:none}
}