/* Hoja de estilos.
   Sin recursos externos: ni fuentes descargadas, ni frameworks. La politica de
   contenido lo prohibe y ademas es una decision de privacidad: la pagina no pide
   nada a terceros.

   Direccion visual: calida y sobria, apoyada en la tipografia y el espacio, sin
   adornos religiosos. Se lee mejor un texto largo con buen interlineado y medida
   corta que con decoracion. */

:root {
  /* Declara que la pagina tiene los dos temas. Sin esto, el navegador sigue pintando en
     claro lo que decide el (barra de desplazamiento, relleno nativo del campo, color del
     marcador de posicion) aunque la pagina se vea en oscuro. */
  color-scheme: light dark;

  --fondo: #faf7f2;
  --superficie: #ffffff;
  --borde: #e4ddd2;
  /* BORDE DEL CAMPO, distinto del borde decorativo de arriba.
     El cuadro donde se escribe es blanco sobre un fondo crema casi igual (1.07:1) y su
     borde era #e4ddd2 (1.26:1). El criterio 1.4.11 pide 3:1 para la informacion visual que
     identifica un control: quien tenga baja vision no veia donde escribir.
     Este valor da 3.50:1 contra el fondo y 4.16:1 contra la tarjeta blanca, que es la
     adyacencia que importa cuando el compositor flota encima de una burbuja.
     Se comprueba con scripts/calcular-borde-cuadro.py y con `npm run accesibilidad`. */
  --borde-campo: #8a837b;
  --tinta: #2b2723;
  /* 7.26:1 sobre el fondo y 7.72:1 sobre las tarjetas, era 5.59:1.
     La guia pide 7:1 para el texto menudo (dark-mode.md › Dark Mode colors), y casi todo
     el texto secundario de esta pagina es menudo: pies, licencias, notas y el estado. */
  --tinta-suave: #5a5148;
  --acento: #7a5c3e;
  --acento-suave: #f3ece2;
  --aviso: #8a5a2b;
  --error: #8c2f2f;
  --radio: 14px;
  --medida: 62ch;
  /* Alto del compositor flotante, para que el desplazamiento no deje la respuesta debajo.
     Es una variable y no un numero suelto porque lo usan dos reglas y tienen que coincidir. */
  --alto-compositor: 8.5rem;
}

/* Contraste aumentado, cuando el sistema lo pide. Faltaba: habia respuesta para el
   movimiento y para el tema oscuro, pero no para esto. */
@media (prefers-contrast: more) {
  :root {
    --borde: #a89a86;
    --borde-campo: #5a5148;
    --tinta-suave: #443d36;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #1b1917;
    --superficie: #232019;
    --borde: #3a352d;
    /* 3.52:1 sobre el fondo oscuro. El borde decorativo no cambia de umbral. */
    --borde-campo: #756f65;
    --tinta: #f0ebe3;
    /* 9.38:1 sobre el fondo y 8.5:1 sobre las tarjetas, era 7.31:1 y 6.77:1. */
    --tinta-suave: #c8bcab;
    --acento: #d8b98c;
    --acento-suave: #2c2720;
    --aviso: #e0b072;
    --error: #f0a0a0;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.65;
}

.saltar {
  position: absolute;
  left: -9999px;
}
.saltar:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--superficie);
  border: 2px solid var(--acento);
  border-radius: 8px;
}

.cabecera,
main,
.pie {
  width: min(100% - 2rem, var(--medida));
  margin-inline: auto;
}

.cabecera {
  padding: 2.5rem 0 1rem;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.subtitulo {
  margin: 0;
  color: var(--tinta-suave);
  text-wrap: pretty;
}

.aviso {
  width: min(100% - 2rem, var(--medida));
  margin: 1.5rem auto 0;
  padding: 1rem 1.25rem;
  background: var(--acento-suave);
  border: 1px solid var(--borde);
  /* El relleno del aviso sobre el fondo da 1.10:1 y su borde 1.15:1: la caja apenas
     existia. Es el bloque que mas importa de la primera pantalla —el que declara que esto
     es una simulacion— y era el que menos peso tenia.
     Se le da el mismo gesto que ya usa el panel de pasajes, en vez de inventar otro. */
  border-left: 3px solid var(--acento);
  border-radius: var(--radio);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
}
.aviso p {
  margin: 0 0 0.75rem;
}

.boton-secundario {
  font: inherit;
  padding: 0.4rem 0.9rem;
  background: transparent;
  color: var(--tinta);
  border: 1px solid var(--borde);
  border-radius: 999px;
  cursor: pointer;
}
.boton-secundario:hover {
  border-color: var(--acento);
}

.conversacion {
  padding: 1.5rem 0 1rem;
}

.hilo {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mensaje {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* EL ARREGLO DEL FALLO MAS GRAVE DE LA PAGINA.
     El compositor es `position: sticky` y flota sobre la conversacion. El script desplaza
     cada mensaje nuevo con `block: 'end'`, que alinea su borde inferior con el del viewport
     —justo dentro de la franja que ocupa el compositor— asi que LA RESPUESTA SE ESCRIBIA
     DEBAJO DEL CUADRO DE ESCRITURA. Y no una vez: el desplazamiento se repetia en CADA
     fragmento de texto que llegaba.
     `scroll-margin-bottom` mueve el destino del desplazamiento hacia arriba, asi que el
     mensaje queda entero por encima del compositor. Se ve en la captura del cliente: bajo
     la tarjeta solo asomaba una franja de texto cortado. */
  scroll-margin-bottom: var(--alto-compositor);
}

/* Quien habla. Antes esto se transmitia SOLO por el color del relleno (1.07:1 entre la
   burbuja del asistente y el fondo, 1.10:1 la del visitante) y por la alineacion, que un
   lector de pantalla no recibe. accessibility.md › Vision: "Convey information with more
   than color alone." Ahora hay una etiqueta, que resuelve lo visual y lo semantico. */
.quien {
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.82rem;
  color: var(--tinta-suave);
}
.mensaje.visitante .quien {
  text-align: end;
}

.burbuja {
  padding: 1rem 1.15rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.mensaje.visitante {
  align-self: flex-end;
  max-width: 85%;
}
.mensaje.visitante .burbuja {
  background: var(--acento-suave);
  border-color: transparent;
}

.mensaje.crisis .burbuja {
  border-color: var(--aviso);
  border-width: 2px;
  /* La respuesta mas importante del producto —la unica que dice "no te voy a dar un
     versiculo para tapar esto"— se presentaba igual que cualquier otra. Un filete del
     mismo gesto que usa el pasaje, y el cuerpo un punto mas grande, bastan para que se
     lea de un vistazo sin anadir ningun elemento nuevo. */
  border-left: 3px solid var(--aviso);
  font-size: 1.0625rem;
}

.prosa p {
  margin: 0 0 0.75rem;
}
.prosa p:last-child {
  margin-bottom: 0;
}

/* EL CURSOR DE ESCRITURA.
   Es lo que convierte el texto que va apareciendo en "alguien esta escribiendo" y no en "la
   pagina carga a trozos". Es un solo caracter, y por eso vale la pena.
   Parpadea despacio a proposito: un parpadeo rapido llama la atencion sobre el cursor en vez
   de sobre el texto. */
.prosa.escribiendo::after {
  content: "";
  display: inline-block;
  width: 0.06em;
  height: 1em;
  margin-inline-start: 0.08em;
  vertical-align: -0.12em;
  background: var(--acento);
  animation: parpadeo 1.1s steps(1, end) infinite;
}

@keyframes parpadeo {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0.15;
  }
}

/* Y CON "REDUCIR MOVIMIENTO" NO HAY CURSOR NI PARPADEO, y el texto llega entero de una vez
   (de eso se encarga el script). Una animacion que no se puede desactivar es justo lo que la
   guia marca como problema. */
@media (prefers-reduced-motion: reduce) {
  .prosa.escribiendo::after {
    display: none;
  }
}

.prosa .error {
  color: var(--error);
}

.nota-degradado {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--borde);
  color: var(--tinta-suave);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
}

/* Panel de pasajes: es la unica forma de que el visitante pueda comprobar lo que
   se le dice, asi que no se esconde en un menu lejano. */
.pasajes {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
}
/* Red de seguridad: aunque el script ya quita el bloque de pasajes del mensaje del
   visitante, aqui queda tapado por si alguna vez se cuela. Un desplegable VACIO con su
   triangulo es peor que no tener desplegable: promete algo que no hay. */
.mensaje.visitante .pasajes {
  display: none;
}

.pasajes summary {
  cursor: pointer;
  padding: 0.55rem 0;
  color: var(--acento);
  /* `display: list-item` ES LO QUE DIBUJA EL TRIANGULO. Al ponerlo en `inline-flex` para
     darle area tactil, el `::marker` desaparecia y el desplegable dejaba de parecerlo.
     Esta es la unica puerta para comprobar una cita, asi que tiene que verse que se abre.
     Al ocupar todo el ancho de la columna, ademas, el area tactil es comoda. */
  display: list-item;
  list-style-position: outside;
  min-height: 44px;
}
.pasajes summary:hover {
  text-decoration: underline;
}

.lista-pasajes {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.pasaje {
  padding: 0.75rem 0.9rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: 8px;
}

.pasaje-referencia {
  margin: 0 0 0.35rem;
  font-weight: 600;
  color: var(--acento);
  /* LA REFERENCIA, EN VERSALITAS.
     Es lo que convierte el pasaje en una CITA y no en un parrafo mas: la referencia deja de
     competir con el texto y pasa a ser una etiqueta. Es la recomendacion de la auditoria de
     diseño, y sobrevive a cualquier cambio de paleta, que es justo lo que le faltaba a esta
     pagina: identidad que no dependa de los colores. */
  font-variant-caps: all-small-caps;
  font-size: 1.05em;
  letter-spacing: 0.06em;
}

.pasaje-texto {
  margin: 0;
  font-family: ui-serif, Georgia, serif;
  line-height: 1.55;
  text-wrap: pretty;
  /* SANGRIA FRANCESA: la primera linea entra y las siguientes se alinean a la izquierda.
     Asi el texto se lee como una cita que continua, y no como un bloque cualquiera. */
  padding-inline-start: 1.15rem;
  text-indent: -1.15rem;
}

/* Panel del original. Es lo que justifica haber cargado MACULA: no solo el texto,
   sino el lema y la morfologia de cada palabra. */
.ver-original {
  margin-top: 0.6rem;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.25rem 0.7rem;
  background: transparent;
  color: var(--acento);
  border: 1px solid var(--borde);
  border-radius: 999px;
  cursor: pointer;
}
.ver-original:hover {
  border-color: var(--acento);
}

.original {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--borde);
}

.original-edicion {
  margin: 0 0 0.5rem;
  color: var(--tinta-suave);
  font-size: 0.78rem;
  text-transform: none;
}

.original-texto {
  margin: 0 0 0.7rem;
  padding: 0.6rem 0.7rem;
  background: var(--acento-suave);
  border-radius: 8px;
  font-size: 1.15rem;
  line-height: 1.9;
  text-align: start;
}

.original-nota {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 0.85rem;
  line-height: 1.5;
}

.interlineal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.interlineal-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0.45rem;
  border-radius: 6px;
  background: var(--fondo);
}

.interlineal-forma {
  font-size: 1.05rem;
  font-weight: 600;
  unicode-bidi: plaintext;
}

.interlineal-transliteracion {
  color: var(--tinta-suave);
  font-style: italic;
  font-size: 0.82rem;
}

.interlineal-detalle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
  margin-inline-start: auto;
  font-size: 0.78rem;
}

.interlineal-glosa {
  padding: 0.1rem 0.45rem;
  background: var(--superficie);
  border-radius: 999px;
}

.interlineal-morfologia {
  color: var(--tinta-suave);
  cursor: help;
}

.original-licencia {
  margin: 0.6rem 0 0;
  color: var(--tinta-suave);
  font-size: 0.72rem;
  line-height: 1.4;
}

.estado {
  min-height: 1.5rem;
  padding-top: 0.75rem;
  color: var(--tinta-suave);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
}

/* La etiqueta del campo, VISIBLE. Sustituye a un texto oculto que solo existia para el
   lector de pantalla y a un marcador de posicion de tres lineas que ademas desaparecia en
   cuanto se empezaba a escribir, dejando el campo sin nombre justo cuando hacia falta. */
.etiqueta-campo {
  display: block;
  margin-bottom: 0.3rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.82rem;
  color: var(--tinta-suave);
}

/* La fila del campo y el boton. Antes estas reglas estaban en `.formulario`, que ahora es
   una columna con la etiqueta arriba. */
.formulario-fila {
  display: flex;
  /* SIN `flex-wrap`, con el tamaño de texto del navegador al 200 % el boton "Preguntar"
     se comia la fila y al campo le quedaban unos 90 px: seis letras por linea.
     typography.md › Supporting Dynamic Type: "consider using a stacked layout where text
     appears above secondary items". Con esto el boton baja solo cuando no cabe. */
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
}

.formulario {
  padding: 0.75rem;
  background: var(--superficie);
  /* El borde del campo es el FUNCIONAL, no el decorativo: tiene que verse. */
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  position: sticky;
  bottom: 1rem;
  /* El compositor es blanco y las burbujas del asistente tambien: al flotar encima se
     separaban 1.00:1, y por eso el texto tapado no se leia como TAPADO sino como cortado.
     layout.md › Visual hierarchy: "use a scroll edge effect to visually elevate controls
     above content". Una sombra dice "esto esta por encima" sin dibujar una caja dura. */
  box-shadow:
    0 2px 14px rgba(43, 39, 35, 0.1),
    0 1px 3px rgba(43, 39, 35, 0.06);
}

.formulario textarea {
  /* `1 1 60%`: a tamaño normal sigue cabiendo en la misma fila que el boton; cuando el
     texto crece mucho, el boton salta abajo y el campo se queda el ancho entero. */
  flex: 1 1 60%;
  min-width: 0;
  font: inherit;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  color: var(--tinta);
  background: transparent;
  border: none;
  resize: none;
  padding: 0.35rem 0;
  min-height: 2.5rem;
  max-height: 160px;
}
/* El color del marcador de posicion lo decidia el navegador, y en tema oscuro seguia
   pintandolo en claro. Fijarlo es una linea y deja de estar fuera de control. */
.formulario textarea::placeholder {
  color: var(--tinta-suave);
  opacity: 1;
}
.formulario textarea:focus {
  outline: none;
}
.formulario:focus-within {
  border-color: var(--acento);
  /* El anillo de foco ya lo pone :focus-visible, pero el campo lo necesita aunque el foco
     llegue al cuadro de texto: es el unico indicador de que se puede escribir. */
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.formulario button {
  font: inherit;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.95rem;
  padding: 0.6rem 1.2rem;
  background: var(--acento);
  color: var(--fondo);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.formulario button:disabled {
  opacity: 0.5;
  cursor: progress;
}

.sugerencias {
  padding: 1.5rem 0 3rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
}
.sugerencias-titulo {
  margin: 0 0 0.6rem;
  color: var(--tinta-suave);
}
.sugerencias ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.sugerencia {
  font: inherit;
  padding: 0.45rem 0.85rem;
  background: var(--superficie);
  color: var(--tinta);
  border: 1px solid var(--borde);
  border-radius: 999px;
  cursor: pointer;
}
.sugerencia:hover {
  border-color: var(--acento);
  color: var(--acento);
}

.pie {
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--borde);
  color: var(--tinta-suave);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.55;
}
.pie a {
  color: var(--acento);
}
.pie-aviso {
  margin-top: 0.5rem;
}

/* El aviso de la cookie. */
.pie-cookie {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--borde);
}

/* La via de contacto, al mismo nivel visual que el resto del pie. */
.pie-feedback {
  margin-top: 0.75rem;
}

/* Volver a preguntar, cuando la respuesta no llego o no paso la comprobacion.
   generative-ai.md › Outputs: "Make it easy for people to refine or revert generated
   results". Antes, cuando algo fallaba, la pagina lo contaba y no ofrecia salida: la unica
   recuperacion era volver a escribir la pregunta a mano. */
.repetir {
  margin-top: 0.75rem;
}

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sin-javascript {
  margin: 1rem 0;
  padding: 1rem 1.25rem;
  background: var(--acento-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--tinta);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Objetivos tactiles.
   WCAG 2.2 pide 24x24 px como minimo (criterio 2.5.8). Los botones pequenos de la
   pagina se quedaban justos, asi que se les da una altura minima comoda: en un
   telefono, un boton de 20 px de alto se falla al pulsar.

   AHORA SON 44 px Y NO 24, y el motivo es la audiencia: la guia de Apple pide 44x44 pt
   por defecto en movil (accessibility.md › Mobility) y esta pagina la usa gente mayor y
   poco acostumbrada a la tecnologia. Cumplir WCAG no es lo mismo que ser comodo con el
   pulgar, y la propia guia dice que "el espacio entre controles importa tanto como el
   tamaño".

   OJO: `.pasajes summary` YA NO ESTA EN ESTA LISTA. Estaba, con `display: inline-flex`, y
   eso le borro el triangulo de despliegue al `<summary>` (el `::marker` solo se dibuja con
   `display: list-item`). Se quedo una etiqueta marron suelta que no parecia pulsable, y
   ese desplegable es el UNICO camino para comprobar una cita: el fallo mas caro de la
   pagina, y lo introdujo esta misma regla. Ahora tiene la suya, mas abajo. */
.boton-secundario,
.sugerencia,
.ver-original {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}