/* Hoja base de /app/, trozo 10 — su index enlaza los trozos en orden, y la cascada depende de él. */
/* ==================================================================================================
   F20 · MOVIMIENTO CON MUELLE

   La HIG lo dice en una línea —«springs over duration curves for interactive elements»— y la
   diferencia se nota: una curva de duración llega y se para; un muelle se pasa un poco y vuelve,
   que es como se mueve algo que tiene peso. En una interfaz donde casi todo es texto, ese peso
   es lo único que hace que las piezas parezcan objetos y no capas apareciendo.

   Cuatro momentos, y ninguno decorativo:
     1. el mensaje que acabas de escribir SE COLOCA en su sitio;
     2. el pensamiento del agente SE REVELA línea a línea;
     3. cuando empieza a escribir, la señal CAMBIA de forma, no solo de texto;
     4. la barra lateral se abre y se cierra a la velocidad de un gesto, no de una transición.
   ================================================================================================== */

/* El muelle. Sobrepasa un 6 % y vuelve: suficiente para que se lea como peso, poco para que no
   parezca un rebote de juguete. */
:root {
  --muelle: linear(0, .006, .026, .058, .104, .164, .24, .332, .441, .567, .71, .87, 1.02, 1.06, 1.05, 1.03, 1.01, 1, 1);
  --dur-muelle: 420ms;
  --dur-revela: 260ms;
}

/* -- 1 · EL MENSAJE SE COLOCA. Sube desde donde está el cajón y se asienta. No es un fundido:
      el mensaje VIENE de abajo, que es de donde viene de verdad, y esa continuidad es lo que
      hace que se entienda que lo que escribiste es lo que aparece. */
@keyframes turno-se-coloca {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.turno.humano.nace {
  animation: turno-se-coloca var(--dur-muelle) var(--muelle) both;
  transform-origin: bottom right;
}
/* La respuesta entra distinto: no viene de ningún sitio, aparece donde está. */
@keyframes turno-aparece {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.turno.hermes.nace { animation: turno-aparece var(--dur-revela) var(--curva-salida) both; }

/* -- 2 · EL PENSAMIENTO SE REVELA. Cada frase nueva entra por debajo con una máscara, como una
      línea de teleprompter. La máscara —y no un fundido— es lo que da la sensación de que el
      texto ESTABA y se descubre, en vez de materializarse. */
@keyframes pensamiento-revela {
  from { opacity: 0; transform: translateY(6px); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
.vivo-actividad.revela { animation: pensamiento-revela var(--dur-revela) var(--curva-salida) both; }
.vivo-actividad.pensamiento { font-style: italic; color: var(--tinta-apagada); }

/* -- 3 · EL ESTADO CAMBIA DE FORMA, no solo de texto. Pensando = un punto que respira.
      Escribiendo = tres puntos en cascada. Se distinguen de reojo, sin leer, que es el punto:
      quien está esperando no está leyendo la línea de estado, la está mirando. */
.vivo-actividad.esperando::before { animation: latido 1.15s ease-in-out infinite; }
.vivo-actividad.escribiendo::before {
  width: auto; height: auto; border-radius: 0; background: transparent;
  content: '•••';
  font-size: 10px; letter-spacing: 2px; line-height: 1;
  color: var(--acento);
  animation: escribiendo-cascada 1.1s ease-in-out infinite;
}
@keyframes escribiendo-cascada {
  0%, 100% { opacity: .3; }
  50%      { opacity: 1; }
}

/* -- 4 · LA BARRA, a velocidad de gesto. 220 ms con una curva de entrada se percibe como
      arrastre porque el movimiento empieza lento; con muelle y 260 arranca de golpe y frena al
      final, que es lo que hace un panel al que has dado un empujón. */
@media (prefers-reduced-motion: no-preference) {
  .lateral { transition: transform 260ms var(--muelle); }
}
/* Mientras el dedo la arrastra NO hay transición: la barra tiene que ir pegada al dedo, y una
   transición de 260 ms sobre cada movimiento la deja siempre un paso por detrás — es justo lo
   que hace que un arrastre se sienta pastoso. */
.lateral.arrastrando { transition: none; will-change: transform; }

/* -- La regla que la HIG pone encima de todas: quien pide calma no recibe nada que se mueva, y
      la información NUNCA depende de la animación — el texto de al lado siempre la lleva. */
@media (prefers-reduced-motion: reduce) {
  .turno.humano.nace, .turno.hermes.nace, .vivo-actividad.revela { animation: none; }
  .vivo-actividad.escribiendo::before, .vivo-actividad.esperando::before { animation: none; }
  .lateral { transition: none; }
}

/* ==================================================================================================
   F20 · FLUIDEZ Y TACTO EN EL TELÉFONO

   Cuatro cosas que el operador notó usándolo, no leyéndolo: el teclado saltaba solo, iOS hacía
   zoom al tocar el cajón, el pie del cajón estorbaba, y «a veces las animaciones van trabadas».
   Las tres primeras son de una línea cada una. La cuarta tenía tres causas de verdad.
   ================================================================================================== */

/* -- 1 · iOS HACE ZOOM AL ENFOCAR UN CAMPO DE MENOS DE 16px. No es un ajuste del usuario ni se
      puede desactivar con `maximum-scale` sin romperle el zoom a quien lo necesita para leer —
      eso es quitarle una herramienta de accesibilidad a todo el mundo para arreglar un síntoma.
      La causa es el tamaño de letra, y la letra es lo que se corrige: 16 px en todo campo donde
      se teclee. La interfaz sigue en 13.5; solo los campos suben. */
#entrada-texto,
.buscar-conv,
.conv-editar,
.entrada input,
.confirmar input[type="text"],
.inv-buscar,
#paleta-buscar {
  font-size: 16px;
}

/* -- 2 · EL PIE DEL CAJÓN. «/ comandos · ⌘K paleta · Enter envía · Esc detiene…» era una chuleta
      permanente para atajos que se aprenden una vez. En el teléfono, además, ninguno de esos
      atajos existe: no hay ⌘K ni Esc. Ocupaba dos líneas debajo del sitio donde se escribe.

      El selector de modelo NO se va con él —es un control, no una chuleta— y se recoloca dentro
      de la píldora, que es donde se decide con qué se manda el mensaje. */
/* Se retira la CHULETA, no el pie: el selector de modelo vive aquí dentro y es un control, no
   una ayuda que se aprende una vez. Ocultar el pie entero se lo habría llevado con él — lo vi
   antes de desplegarlo, pero solo porque fui a mirar dónde estaba el selector. */
.cajon-pie { display: none; }

/* -- 3 · FLUIDEZ, causa por causa.

      (a) LOS TURNOS DE FUERA DE PANTALLA. Un hilo de cincuenta mensajes se maquetaba entero en
          cada cambio de tamaño, en cada apertura de la barra y en cada crecida del cajón —
          también los cuarenta que no se ven. `content-visibility` le dice al navegador que se
          salte lo que está fuera del recuadro, y `contain-intrinsic-size` le da una altura
          estimada para que la barra de desplazamiento no dé saltos. Es la causa gorda: el coste
          de maquetar deja de crecer con la longitud de la conversación.

      (b) CADA TURNO SE MAQUETA SOLO. `contain: layout` corta la propagación: cambiar la altura
          de un turno —el markdown que termina de llegar, una tarjeta que se despliega— deja de
          obligar a recalcular sus hermanos.

      (c) LA BARRA ANIMABA `margin-left`, que es una propiedad de MAQUETA: cada cuadro de esos
          220 ms recalculaba la posición del hilo entero. Se anima `transform`, que el compositor
          resuelve sin volver a maquetar, y el hueco lo cierra la columna sin transición — el ojo
          sigue a la barra que se va, no al borde que se ajusta. */
/* F20 — SIN `content-visibility`. Lo puse por fluidez y se llevó por delante algo peor que la
   lentitud: `content-visibility: auto` aplica `contain: paint` mientras el elemento está fuera
   del recuadro, y con una altura estimada que se queda corta RECORTA el contenido. El operador
   lo fotografió — la línea del pensamiento salía cortada por la mitad, tapada.
   La excepción de `:last-child` no bastaba porque el turno vivo no siempre es el último.

   Una interfaz que va un poco más lenta se aguanta; una que esconde lo que el agente está
   pensando, no. Se queda `contain: layout`, que aísla la maqueta de cada turno sin recortar
   nada — es la mitad de la ganancia y ninguno del riesgo. */
.turno { contain: layout; }

/* ==================================================================================================
   F20 · PUNTERO SIN HOVER — el hueco que no se veía porque no se puede ver desde un escritorio.
   La hoja tenía cinco consultas de medio y NINGUNA de puntero. Todo lo que se revela al pasar el
   ratón —el copiar del turno, los botones de renombrar y borrar de cada conversación— vive en
   `:hover`, y en un teléfono `:hover` no se dispara nunca. No es que se vieran mal: es que eran
   controles que ocupaban sitio, se podían pulsar sin querer y no se veían jamás.

   Se destapan. No es una preferencia estética: un control invisible que responde al toque es peor
   que un control que no está.
   ================================================================================================== */
@media (hover: none), (pointer: coarse) {
  .turno-copiar { opacity: 1; }
  .conv-acciones { opacity: 1; }
  .conv .conv-btn { opacity: 1; }
  .md-bloque .md-copiar { opacity: 1; }
}

/* ==================================================================================================
   10 · MOVIMIENTO REDUCIDO — requisito, no extra. Quien pidió calma no recibe nada que se mueva, y
   la información NUNCA depende de la animación: el texto de al lado siempre la lleva.
   ================================================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
  .vivo-actividad::before { animation: none; }
  .lateral, .hero-tarjeta, .nav-item, .conv, .buscar-envoltura, .btn-lateral, .turno-copiar,
  .conv-acciones, button.primario.redondo, .adjuntar, .cajon-linea, .riel-btn { transition: none; }
}

/* ==================================================================================================
   11 · PIEZAS RECUPERADAS TRAS EL REENSAMBLADO A MOBILE FIRST.
   Al partir la hoja para reescribir el armazón se quedaron fuera tres bloques que vivían mezclados
   con las capas viejas: el aviso de ATENCIÓN, las tablas del markdown y la regla horizontal. No lo
   vio ninguna revisión — lo cazó el verificador del design system cruzando las clases que el
   marcado usa contra las que la hoja viste. Es la segunda vez que un reensamblado se lleva algo
   por delante (la primera fue la franja), y por eso ese verificador existe.
   ================================================================================================== */
/* ---- aviso de ATENCIÓN (F18) — degradación declarada, no fallo -------------------------------
   El modo reducido salía vestido de error (.aviso.mal, rojo) y el operador leyó «tu mensaje
   falló» donde decía «este panel tiene menos herramientas». Son cosas distintas y visten
   distinto: ámbar de --alerta, sin el fondo tintado que el error reserva para sí. */
.aviso.atencion {
  color: var(--alerta);
  border-left: var(--carril) solid var(--alerta);
  padding-left: var(--e3);
}

/* ---- tablas y regla del markdown (F18) --------------------------------------------------------
   Hermes resume archivos y estados en tablas constantemente; hasta ahora salían como sopa de
   barras. La caja pone el scroll: una tabla ancha se desplaza dentro de su caja, no rompe la
   columna del hilo. */
.md-tabla-caja { overflow-x: auto; margin: var(--e3) 0; }
.md-tabla {
  border-collapse: collapse;
  font-size: var(--t-sm); line-height: var(--lh-sm);
  min-width: 50%;
}
.md-tabla th, .md-tabla td {
  border: var(--filete) solid var(--linea);
  padding: var(--e1) var(--e3);
  text-align: left; vertical-align: top;
}
.md-tabla th {
  font-weight: 600; color: var(--tinta);
  background: var(--hundida);
}
.md-tabla td { color: var(--tinta-suave); }
.md-tabla tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--hundida) 40%, transparent); }
.md-regla { border: 0; border-top: var(--filete) solid var(--linea); margin: var(--e4) 0; }

/* F30 — el enlace de una descarga del panel se ve como lo que es. No abre pestaña: baja el
   archivo sin salir del chat (ver `esDescargaDelPanel` en markdown.js). La flecha lo dice antes
   de tocarlo, que es la mitad del arreglo: el operador tocó uno creyendo que era una página y se
   quedó mirando una pestaña en blanco. */
.md-descarga::before { content: "\2193\00a0"; font-weight: 700; }
.md-descarga[data-bajando="1"] { opacity: .65; pointer-events: none; }