/* preceptoros.org · lo propio del chat instalador.
   Hoja aparte y no dentro de base.css por el limite de 10 KB: base.css estaba
   a 47 bytes del suyo y seguir recortando comentarios para meter componentes
   es empeorar el fichero para salvar un numero. Se separa por lo que es —
   tokens y esqueleto en base, componentes donde se usan. */

/* El badge del cerebro: dice QUE contesta. Apagado en tenue, vivo en jardin. */
.brain{font-size:.72rem;color:var(--tenue);margin:.5rem 0 0;
  display:inline-block;padding:.15rem .5rem;border:1px solid var(--line,var(--bronce));
  border-radius:calc(var(--radius) - 8px);background:var(--glass)}
.brain.live{color:var(--jardin);border-color:var(--jardin)}

/* --- «Despertando cerebro»: el estado de espera, sin una linea de JS -------
   state.js escribe `data-fase` en #brain y se va. Todo lo de abajo --el
   anillo que gira, su parada y el texto en tres idiomas-- lo pinta el
   navegador solo. El anillo es un `conic-gradient` recortado por una mascara
   radial: un solo pseudo-elemento, cero imagenes, cero peticiones.

   `.brain.live` NO sirve de enganche aunque sea la clase que suena: ya
   significa «un turno volvio vivo», y el `paint()` de state.js reescribe
   `className` en cada evento, asi que el anillo seguiria girando despues de
   la respuesta. Medido antes de escribir esto. */
@keyframes brain-gira{to{transform:rotate(1turn)}}
#brain[data-fase="pensando"]::before{
  content:"";display:inline-block;width:.72em;height:.72em;
  margin-right:.4em;vertical-align:-.1em;border-radius:50%;
  background:conic-gradient(from 0turn,transparent 0 30%,currentColor);
  -webkit-mask:radial-gradient(closest-side,transparent 58%,#000 60%);
  mask:radial-gradient(closest-side,transparent 58%,#000 60%);
  animation:brain-gira 1s linear infinite}

/* Quien pide quietud recibe el MISMO aviso, quieto: el anillo se queda parado
   y el texto sigue estando. Un estado que solo existe si se mueve no es un
   estado, es un adorno -- y quien lo apaga se quedaria sin saber que pasa. */
@media (prefers-reduced-motion:reduce){
  #brain[data-fase="pensando"]::before{animation:none}}

/* El texto sale del `lang` del documento, que ya esta puesto en las tres
   portadas. Es la UNICA copy de la web que no vive en el bloque #i18n, y se
   hace a sabiendas: meterla ahi obligaria a JavaScript a escribirla, que es
   justo lo que esta mision prohibe. Queda anotado como deuda. */
html[lang="es"] #brain[data-fase="pensando"]::after{content:" · Despertando cerebro..."}
html[lang="en"] #brain[data-fase="pensando"]::after{content:" · Waking up brain..."}
html[lang="fr"] #brain[data-fase="pensando"]::after{content:" · Réveil du cerveau..."}

/* La franja de prueba. La web sirve a dos publicos: quien llega de GitHub o
   LinkedIn y quiere saber en cinco segundos si esto es serio, y quien viene a
   instalarlo. Esta linea es para el primero y no estorba al segundo — cifras
   MEDIDAS hoy, no adjetivos, y el codigo a un clic. */
.proof{font-size:.72rem;color:var(--tenue);margin:0 0 1.2rem;line-height:1.7}
.proof b{color:var(--violeta-texto);font-variant-numeric:tabular-nums}

/* El microfono, recuperado de la app. El dibujo es el mismo; el fichero pesa
   8 KB en vez de 147 —la web mide y publica su propio peso, asi que un asset
   gordo tiene coste declarado—. Apagado significa apagado: si el navegador no
   dicta en el aparato, el boton no invita a pulsarlo. */
button.mic,button.enviar{display:inline-flex;align-items:center;gap:.45rem}
button.mic{color:var(--violeta-texto);border-color:var(--bronce)}
button.mic.oyendo{color:#fff;background:var(--violeta);border-color:var(--violeta)}
button.mic:disabled{opacity:.45;cursor:not-allowed}
button.enviar svg{margin-right:.1rem}
@media (hover:hover) and (pointer:fine){
  button.mic:hover:not(:disabled){background:var(--violeta);color:#fff;border-color:var(--violeta)}
}
.voice-nota{font-size:.72rem;margin:.35rem 0 0}

/* --- corregir esta respuesta ------------------------------------------- */
/* El boton es LEVE a proposito: corregir no compite con enviar. Aparece
   pegado a la respuesta que corrige, no en una barra aparte, porque una
   correccion sin su turno delante es un texto suelto sin nada que arreglar. */
.corregir{margin:.25rem 0 .6rem;font-size:.72rem;opacity:.75}
.corregir:hover,.corregir:focus-visible{opacity:1}
.corregir-caja{display:flex;flex-direction:column;gap:.4rem;
  margin:0 0 .9rem;padding:.6rem;border:1px solid var(--bronce);
  border-radius:var(--radius);background:var(--panel-bg)}
.corregir-caja .tenue{margin:0;font-size:.72rem}

/* --- el panel grande: escribir y hablar en la misma fila ---------------- */
/* Enviar y el microfono son la misma decision --«mando este turno»-- y por
   eso van juntos. El microfono estaba en una fila propia debajo del boton, y
   en el telefono quedaba fuera de la primera pantalla: existia y no se veia. */
.chat-acciones{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin:.5rem 0 0}
.chat-acciones #voice{margin:0}
/* La terminal es lo alto del panel; el campo, lo justo para escribir. */
#dialogo{overflow-y:auto;max-height:52vh}
/* Con el teclado abierto, la zona de herramientas se retira: en un telefono
   el teclado se come media pantalla y lo que tapa es la conversacion. Lo
   decide `visualViewport` en chat-router.js, que es quien sabe cuanto queda
   visible de verdad. */
#chat.con-teclado #herramientas{display:none}

/* El nombre del modelo es EL dato de este badge: va en negrita y la etiqueta
   que lo precede no, para que se lea el que antes que el rotulo. */
.brain b{font-weight:700}