/* preceptoros.org · cabezal, chat protagonista y panel Modelos.
   Se apoya en los tokens de base.css: aqui no nace ni un color ni un radio.

   TRES REGLAS HEREDADAS
   ---------------------
   1. El respaldo OPACO se declara ANTES del cristal: sin backdrop-filter el
      panel tiene que quedar solido y legible. El gate lo comprueba por orden
      de aparicion, no de palabra.
   2. Los radios salen de --radius. Un circulo (50%) no es una esquina.
   3. El violeta es el UNICO acento de actividad. Si brilla, esta vivo. */

/* --- el cabezal --------------------------------------------------------- */
#cabezal{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  background:var(--marmol-claro);border:1px solid var(--bronce);
  border-radius:var(--radius);padding:.7rem .9rem;margin-bottom:1rem;
  box-shadow:var(--depth)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  #cabezal,#chat,#panel-modelos{background:var(--glass-solid);
    -webkit-backdrop-filter:blur(16px) saturate(180%);
    backdrop-filter:blur(16px) saturate(180%)}
}
#cabezal .marca{flex:1;min-width:11rem}
#cabezal h1{font-size:1.05rem;margin:0 0 .35rem}

/* El boton de entrar es un BOTONCITO arriba a la derecha. `auth.js` lo pinta
   con la clase de boton normal y en un telefono salia a todo lo ancho,
   comiendose la pantalla que el chat necesita. Se ve asi en el Doogee, no en
   un viewport emulado: ahi cabia. */
#cabezal #identity{margin-left:auto;align-self:flex-start;flex:0 0 auto}
#cabezal #identity button{font-size:.7rem;padding:.28rem .6rem;
  letter-spacing:.04em;white-space:nowrap}
#cabezal #identity .yo{font-size:.74rem}

/* La cabeza del Preceptor. El ojo lo pone el router segun el companero
   activo: es con quien hablas, dicho sin una palabra. */
#cabeza{width:52px;height:52px;flex:0 0 52px;background-repeat:no-repeat;
  background-position:center;background-size:cover;
  border:2px solid var(--bronce);border-radius:50%}

#cab-nav{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.cab-boton{font:inherit;font-size:.74rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  color:#fff;background:var(--violeta);border:1px solid var(--violeta);
  border-radius:var(--radius);padding:.32rem .7rem;
  transition:transform .16s var(--spring)}
.cab-boton:hover,.cab-boton:focus-visible{transform:translateY(-1px)}
.cab-boton:focus-visible{outline:2px solid var(--violeta-texto);outline-offset:2px}
.cab-boton[aria-expanded="true"]{background:var(--violeta-texto);
  border-color:var(--violeta-texto)}
/* «Empieza aquí» es la unica llamada roja de la pagina, y usa --sol, que es
   el acento calido del canon y ya viene medido. Blanco encima da 5,34:1
   --comprobado-- sin inventar un token nuevo. Si algun dia se quiere un rojo
   de verdad, se firma un token; no se cuela aqui un hexadecimal suelto. */
.cab-boton.empezar{background:var(--sol);border-color:var(--sol)}
.cab-boton.idioma{background:var(--tinta);border-color:var(--tinta)}
.cab-leve{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--violeta-texto);text-decoration:none;padding:.3rem .35rem}
.cab-leve:hover{text-decoration:underline}
.cab-ident{display:inline-flex;gap:.3rem;margin-inline:auto}

/* En un telefono el cabezal no puede comerse la pantalla: medido en el
   Doogee (360 CSS px) ocupaba el 40 % del alto en tres filas de botones, y
   el chat --que es lo que se vino a usar-- empezaba casi fuera de vista. */
@media (max-width:1023px){
  /* El rail de companeros flota sobre la pagina y se comia el borde derecho
     del chat y del panel de herramientas. Medido en el Doogee: el texto
     salia cortado a media palabra. */
  #hub-layout{padding-right:4.2rem}
  /* El CABEZAL tambien pasa por debajo del rail de companeros, y hasta hoy
     solo #hub-layout reservaba ese hueco. Medido en el Doogee: COMUNIDAD
     partido por la mitad y el icono de LinkedIn escondido tras las esferas.
     La reserva va en el atajo y no en una linea suelta despues: un
     `padding-right` colocado ANTES de este atajo lo pierde entero. */
  #cabezal{padding:.5rem 4.6rem .5rem .6rem;gap:.5rem}
  /* El pie es una CAJA con borde, asi que reserva por fuera (margen) y no por
     dentro: con padding el borde derecho seguiria corriendo por debajo del
     rail de companeros aunque el texto no lo hiciera. */
  .honest-footer{margin-right:4.2rem}
  #cabezal h1{font-size:.95rem;margin:0 0 .25rem}
  #cabeza{width:40px;height:40px;flex-basis:40px}
  .cab-boton{font-size:.66rem;padding:.26rem .5rem;letter-spacing:.06em}
  .cab-leve{font-size:.64rem;padding:.2rem .25rem}
  #cab-nav{gap:.25rem;margin-top:.1rem}
  /* La identidad baja a su propia fila. `movil.css` ya lo pedia con
     `.identity{flex:1 0 100%}`, pero esta hoja carga despues y su
     `#cabezal #identity{flex:0 0 auto}` ganaba por especificidad: dos ids
     contra una clase. El cabezal SIEMPRE tuvo `flex-wrap:wrap` -- lo que no
     tenia era nada que pudiera envolverse. Se repite aqui con la misma
     especificidad que la regla de escritorio y ganando por orden, que es lo
     que un `!important` habria tapado sin explicar. */
  /* `order` y no un cambio de marcado: en el telefono el boton de entrar va
     DEBAJO de la navegacion --es lo ultimo que se hace, no lo primero-- y en
     el PC sigue arriba a la derecha. Una sola estructura, dos lecturas. */
  #cabezal #identity{flex:1 0 100%;margin-left:0;align-self:stretch;order:3}
  #cab-nav{order:2}
  /* Centrados no: pegados a la marca. Con el rail comiendo 4,6rem, `auto` a
     los dos lados los empujaba contra el borde y el segundo se salia. */
  .cab-ident{margin-inline:0 auto}
  #cabezal #identity button{width:100%}
}

/* --- la maqueta: chat protagonista, panel a la derecha ------------------ */
#hub-layout{position:relative}
#chat{margin:0}
.chat-quien{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.chat-quien img{width:44px;height:44px;flex:0 0 44px;border-radius:50%}
.chat-nombre{font-weight:700}
.chat-aviso{font-size:.82rem;color:var(--bronce-hondo);margin:0 0 .6rem}
/* La navegacion ocupa su PROPIA fila y va centrada. En la misma linea que la
   marca y el boton de entrar empujaba la identidad a una tercera fila en el
   telefono. Cuatro enlaces centrados caben en una sola. */
#cab-nav{flex:1 0 100%;justify-content:center;margin-top:.15rem}
/* GitHub y LinkedIn arriba y en el centro, entre la marca y el boton de
   entrar. `margin-inline:auto` los centra en el hueco que sobra sin sacarlos
   del flujo, asi que al envolverse en el telefono no se quedan flotando. */
.cab-marca{display:inline-flex;align-items:center;padding:.3rem;
  color:var(--violeta-texto);border-radius:var(--radius)}
.cab-marca:hover,.cab-marca:focus-visible{color:var(--violeta)}
.cab-marca svg{display:block}