/* Hoja base de /app/, trozo 09 — su index enlaza los trozos en orden, y la cascada depende de él. */
/* ==================================================================================================
   F20 · LA BARRA SUPERIOR — tres zonas, como se navega cualquier aplicación.

   Antes: un ☰ flotando sobre el hilo. La pantalla no decía en qué conversación estabas, y el
   título vivía DENTRO del hilo, así que al bajar a leer desaparecía — justo cuando más falta
   hace saber dónde estás.

   Ahora: guía · centro · salida. El centro es la única zona que crece; las otras dos son
   blancos táctiles de 44 fijos, así que el título nunca los desplaza por largo que sea.
   ================================================================================================== */
.barra-sup {
  display: grid;
  grid-template-columns: var(--alto-tactil) minmax(0, 1fr) var(--alto-tactil);
  align-items: center;
  gap: var(--e2);
  flex: none;
  padding: var(--e2);
  min-height: 56px;
  background: var(--fondo);
  border-bottom: var(--filete) solid var(--linea);
  position: relative; z-index: 3;
}
.barra-sup[hidden] { display: none; }
.barra-sup-centro { min-width: 0; text-align: center; display: flex; flex-direction: column; gap: 1px; }
.barra-sup-titulo {
  font: 600 var(--t-md)/1.3 var(--prosa); color: var(--tinta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra-sup-sub {
  font: 400 var(--t-2xs)/1.3 var(--prosa); color: var(--tinta-apagada);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barra-sup-sub:empty { display: none; }

/* El botón de icono de la barra. Sin borde propio: la barra ES el contenedor, y un botón con
   caja dentro de otra caja añade un nivel de jerarquía que aquí no significa nada. */
.icb {
  width: var(--alto-tactil); height: var(--alto-tactil);
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--tinta-apagada);
  border-radius: var(--r-control); cursor: pointer;
  transition: background var(--dur-pop) var(--curva-salida), color var(--dur-pop) var(--curva-salida);
}
.icb:hover { background: var(--hundida); color: var(--tinta); }
.icb .ic { width: 20px; height: 20px; }

/* Con la barra superior, la cabecera del hilo entera sobra: título Y meta decían exactamente lo
   mismo que la barra, una encima de la otra. La primera versión de esta regla escondía solo el
   título y dejó la meta repetida dos veces en pantalla — se vio al desplegar, no al leer. Lo que
   la barra ya dice, el hilo no lo repite. */
.hilo-cab { display: none; }

/* -- EL RIEL, con conversaciones. Guardar la barra dejaba cuatro iconos y ninguna forma de
      cambiar de conversación: para saltar a otra había que volver a abrirla. Ahora las
      recientes viven ahí como iniciales, con la actual marcada. */
.riel-conv {
  position: relative;
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: var(--filete) solid var(--linea); border-radius: var(--r-menudo);
  background: var(--superficie); color: var(--tinta-apagada);
  font: 600 var(--t-2xs)/1 var(--prosa); cursor: pointer;
  transition: border-color var(--dur-pop) var(--curva-salida), color var(--dur-pop) var(--curva-salida);
}
/* Se ve de 34 y se toca a 44: el riel es estrecho y engordar el dibujo lo llenaría de cajas. */
.riel-conv::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: var(--alto-tactil); height: var(--alto-tactil);
}
.riel-conv:hover { border-color: var(--borde); color: var(--tinta); }
.riel-conv[aria-current="true"] {
  background: var(--tinta); color: var(--fondo); border-color: var(--tinta);
}
.riel-raya { width: 22px; height: var(--filete); background: var(--linea); margin: var(--e2) auto; flex: none; }

/* ==================================================================================================
   F20 · LAS TRES PIEZAS QUE FALTABAN
   ================================================================================================== */

/* -- EL RASTRO. Plegado: una respuesta no empieza con su maquinaria delante. Pero PERSISTE, que es
      todo el punto — la línea de actividad se sobrescribe con el evento siguiente y al acabar el
      turno no quedaba ni rastro de qué herramientas corrieron. */
.vivo-rastro {
  border: var(--filete) solid var(--linea); border-radius: var(--r-tarjeta);
  background: var(--superficie); overflow: hidden; margin-bottom: var(--e3);
}
.vivo-rastro-cab {
  display: flex; align-items: center; gap: var(--e2);
  min-height: var(--alto-tactil); padding: 0 var(--e3);
  font: 400 var(--t-sm)/1 var(--prosa); color: var(--tinta-apagada);
  cursor: pointer; list-style: none;
}
.vivo-rastro-cab::-webkit-details-marker { display: none; }
.vivo-rastro-cab::before {
  content: ""; width: 12px; height: 12px; flex: none;
  background: currentColor; mask: var(--mask-galon) center / contain no-repeat;
  -webkit-mask: var(--mask-galon) center / contain no-repeat;
  transition: transform var(--dur-pop) var(--curva-salida);
}
.vivo-rastro[open] .vivo-rastro-cab::before { transform: rotate(90deg); }
.vivo-rastro-cab:hover { background: var(--hundida); color: var(--tinta); }
.vivo-rastro-lista { border-top: var(--filete) solid var(--linea); padding: var(--e2) 0; }
.vivo-rastro-item {
  display: flex; align-items: center; gap: var(--e2);
  min-height: 30px; padding: 0 var(--e3);
  font: 400 var(--t-xs)/1 var(--mono); color: var(--tinta-suave);
}
.vivo-rastro-punto {
  width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--bien);
}
.vivo-rastro-item.fallo .vivo-rastro-punto { background: var(--mal); }
.vivo-rastro-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* «Sin cierre» NO es «terminó bien»: una herramienta que arrancó y de la que nunca llegó el
   cierre se dice, no se da por buena. */
.vivo-rastro-cola { margin-left: auto; color: var(--tinta-apagada); font-family: var(--prosa); }

/* -- VOLVER ABAJO. La otra mitad de dejar de arrastrar el hilo: si el repintado ya no baja solo,
      hace falta la forma de volver, o la corrección cambia un estorbo por otro. */
.volver-abajo {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--e7) + var(--e6)); z-index: 6;
  display: inline-flex; align-items: center; gap: var(--e1);
  min-height: var(--alto-tactil); padding: 0 var(--e4);
  border: var(--filete) solid var(--borde-flotante); border-radius: var(--r-chip);
  background: var(--elevada); color: var(--tinta-suave);
  font: 600 var(--t-xs)/1 var(--prosa); cursor: pointer;
  box-shadow: var(--sombra-2);
}
.volver-abajo:hover { color: var(--tinta); }
.volver-abajo[hidden] { display: none; }

/* -- REINTENTAR. Va DENTRO del aviso del fallo, que es donde se lee el motivo. */
.reintentar-turno { margin-top: var(--e2); }

/* -- EL COPIAR EN MODO GLIFO. Estaba solo dentro de Guardia, y el operador tiene puesta «Sala de
      control»: en su teléfono el <svg> salía sin tamaño —un círculo vacío donde debía haber un
      icono—. Un botón que en cuatro de los cinco trajes no dibuja nada no es un detalle del
      traje: es el estilo base que faltaba. Va aquí, y cada dirección lo viste encima si quiere. */
.turno-copiar.solo-icono {
  width: 28px; height: 28px; padding: 0;
  display: inline-grid; place-items: center;
  border-radius: var(--r-menudo);
  line-height: 0;
}
.turno-copiar.solo-icono svg { width: 15px; height: 15px; display: block; }
.turno-copiar.solo-icono.copiado { color: var(--bien); }
/* Con el fallo vuelve la palabra, y entonces deja de ser cuadrado: no hay glifo para «no se pudo
   copiar» que se entienda sin leerlo. */
.turno-copiar.solo-icono:not(:has(svg)) { width: auto; padding: 2px var(--e2); line-height: 1; }

/* -- BUSCAR DENTRO DE LA CONVERSACIÓN. Barra flotante bajo la cabecera, no un panel: buscar es
      un modo pasajero y no debe reorganizar la pantalla. El resaltado usa ::highlight, que el
      navegador pinta sin tocar el DOM — envolver las coincidencias en <mark> reescribiría el
      árbol del mensaje y se llevaría por delante el markdown ya pintado. */
.busca-hilo {
  position: absolute; top: var(--e2); left: 50%; transform: translateX(-50%); z-index: 25;
  display: flex; align-items: center; gap: var(--e2);
  width: min(560px, calc(100% - var(--e5)));
  padding: var(--e2);
  background: var(--elevada);
  border: var(--filete) solid var(--borde-flotante);
  border-radius: var(--r-chip);
  box-shadow: var(--sombra-2);
}
.busca-hilo[hidden] { display: none; }
.busca-hilo-campo {
  flex: 1; min-width: 0; min-height: 36px;
  padding: 0 var(--e3);
  border: 0; background: transparent; color: var(--tinta);
  font: 400 16px/1 var(--prosa);
}
.busca-hilo-campo:focus { outline: none; }
.busca-hilo-cuenta {
  font: 400 var(--t-2xs)/1 var(--prosa); color: var(--tinta-apagada);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.busca-hilo-btn {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--tinta-apagada);
  border-radius: var(--r-menudo); cursor: pointer;
  font: 400 var(--t-sm)/1 var(--prosa);
  position: relative;
}
.busca-hilo-btn::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: var(--alto-tactil); height: var(--alto-tactil);
}
.busca-hilo-btn:hover { background: var(--hundida); color: var(--tinta); }
::highlight(busca-hilo) { background: var(--acento-tenue); color: var(--tinta); }

/* -- EL ACUSE. Abajo y centrado: encima del cajón, que es donde ya está mirando quien acaba de
      actuar, y sin tapar el hilo. Se desvanece solo. */
.acuse {
  position: fixed; left: 50%; bottom: calc(var(--e8) + var(--e6)); z-index: 90;
  transform: translate(-50%, 12px);
  max-width: min(440px, calc(100vw - var(--e6)));
  padding: var(--e3) var(--e5);
  background: var(--tinta); color: var(--fondo);
  border-radius: var(--r-chip);
  font: 500 var(--t-sm)/1.4 var(--prosa);
  box-shadow: var(--sombra-2);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-entrada) var(--curva-salida), transform var(--dur-entrada) var(--curva-salida);
}
.acuse.puesto { opacity: 1; transform: translate(-50%, 0); }
.acuse.yendose { opacity: 0; transform: translate(-50%, -6px); }

/* -- EL SEPARADOR DE DÍA. Una regla con la fecha encima, centrada. Solo aparece cuando el día
      CAMBIA: uno por día, no uno por mensaje, y nunca al principio del hilo — encabezar una
      conversación con «Hoy» no informa de un cambio. */
.dia-sep {
  display: flex; align-items: center; gap: var(--e3);
  margin: var(--e3) 0;
  color: var(--tinta-apagada);
  font: 500 var(--t-2xs)/1 var(--prosa);
}
.dia-sep::before, .dia-sep::after {
  content: ''; flex: 1; height: var(--filete); background: var(--linea);
}

/* -- EDITAR. Mismo tamaño y peso que el copiar: son dos acciones del mismo rango sobre el mismo
      turno, y darle a una más presencia que a la otra diría que una importa más. */
.turno-editar {
  width: 28px; height: 28px; padding: 0;
  display: inline-grid; place-items: center;
  border: 0; background: transparent; color: var(--tinta-apagada);
  border-radius: var(--r-menudo); cursor: pointer; line-height: 0;
  opacity: .55; transition: opacity var(--dur-pop) var(--curva-salida), background var(--dur-pop) var(--curva-salida);
  position: relative;
}
.turno-editar::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: var(--alto-tactil); height: var(--alto-tactil);
}
.turno-editar svg { width: 15px; height: 15px; display: block; }
.turno-editar:hover, .turno-editar:focus-visible { opacity: 1; background: var(--hundida); color: var(--tinta); }
@media (min-width: 48em) {
  .turno-editar { opacity: 0; }
  .turno:hover .turno-editar, .turno-editar:focus-visible { opacity: 1; }
}
@media (hover: none), (pointer: coarse) { .turno-editar { opacity: 1; } }

/* El turno humano gana una cuarta columna: copiar y editar comparten el hueco de la izquierda. */
.turno.humano { grid-template-columns: auto auto auto minmax(0, 1fr); }
.turno.humano .turno-editar { grid-area: 1 / 1; justify-self: start; }
.turno.humano .turno-copiar { grid-area: 1 / 2; justify-self: start; }
.turno.humano .rol          { grid-area: 1 / 3; justify-self: end; }
.turno.humano .turno-hora   { grid-area: 1 / 4; justify-self: end; }
.turno.humano .cuerpo       { grid-area: 2 / 1 / auto / -1; justify-self: end; }

/* ==================================================================================================
   F20 · CUATRO REGLAS QUE LAS GUÍAS DAN POR SABIDAS Y ESTA PANTALLA NO CUMPLÍA
   ================================================================================================== */

/* -- 1 · LA MEDIDA DE LÍNEA. El hilo mide 780 px y la prosa 16.5: salen ~88 caracteres por
      renglón. La recomendación clásica —y la que repiten las guías de Apple y las de UX— es
      65-75: por encima, el ojo pierde el principio del renglón siguiente y hay que releer. El
      CONTENEDOR se queda en 780 (las tablas y el código lo necesitan); lo que se acota es el
      TEXTO, que es lo que se lee seguido. */
.turno.hermes .cuerpo > p,
.turno.hermes .cuerpo > ul,
.turno.hermes .cuerpo > ol,
.turno.hermes .cuerpo > blockquote,
.turno.sistema .cuerpo { max-width: 70ch; }

/* -- 2 · SCROLL SUAVE. Saltar de golpe al fondo no dice de dónde vienes; recorrerlo, sí. Va en el
      hilo y no en el documento, porque es el único sitio donde el salto tiene significado. */
.principal { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .principal { scroll-behavior: auto; } }

/* -- 3 · SALTAR AL CONTENIDO. Con la barra abierta hay una veintena de conversaciones antes del
      primer mensaje: quien navega con teclado las recorre TODAS en cada carga. El enlace vive
      fuera de la pantalla hasta que recibe el foco, que es la única forma de que no estorbe a
      quien no lo necesita y esté ahí para quien sí. */
.saltar {
  position: absolute; left: var(--e3); top: var(--e3); z-index: 100;
  transform: translateY(-200%);
  padding: var(--e2) var(--e4);
  background: var(--elevada); color: var(--tinta);
  border: var(--filete) solid var(--acento); border-radius: var(--r-control);
  font: 600 var(--t-sm)/1 var(--prosa); text-decoration: none;
  transition: transform var(--dur-entrada) var(--curva-salida);
}
.saltar:focus-visible { transform: translateY(0); }

/* ==================================================================================================
   F20 · EL MENÚ DEL «+» Y EL RAZONAMIENTO GUARDADO
   En la capa BASE, no en la de trajes: «Automático» no pone data-tema, y una pieza que solo
   existe con traje puesto es la lección que costó tres rondas.
   ================================================================================================== */

/* -- EL MENÚ. Era una lista de tres botones de texto pegados al borde. Ahora es una hoja flotante
      con icono, nombre y una línea que dice qué hace cada uno — la diferencia entre elegir y
      adivinar. Sale hacia ARRIBA porque el «+» vive abajo: un menú que se abriera hacia abajo
      quedaría fuera de la pantalla en un teléfono. */
.adj-menu {
  position: absolute; bottom: calc(100% + var(--e2)); left: 0; z-index: 30;
  min-width: 264px; max-width: min(320px, calc(100vw - var(--e5)));
  padding: var(--e2);
  display: flex; flex-direction: column; gap: 2px;
  background: var(--elevada);
  border: var(--filete) solid var(--borde-flotante);
  border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-2);
}
.adj-menu[hidden] { display: none; }

.adj-opcion {
  display: flex; align-items: center; gap: var(--e3);
  width: 100%; min-height: var(--alto-tactil);
  padding: var(--e2) var(--e3);
  border: 0; background: transparent; color: var(--tinta);
  border-radius: var(--r-control); cursor: pointer; text-align: left;
  font: inherit;
  transition: background var(--dur-pop) var(--curva-salida);
}
.adj-opcion:hover:not(:disabled) { background: var(--hundida); }
.adj-opcion:disabled { opacity: .5; cursor: not-allowed; }
.adj-op-ic { width: 20px; height: 20px; flex: none; color: var(--tinta-apagada); }
.adj-opcion:hover:not(:disabled) .adj-op-ic { color: var(--acento); }
.adj-op-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.adj-op-nombre { font: 500 var(--t-md)/1.3 var(--prosa); color: var(--tinta); }
.adj-op-desc {
  font: 400 var(--t-2xs)/1.35 var(--prosa); color: var(--tinta-apagada);
  overflow: hidden; text-overflow: ellipsis;
}

/* -- EL RAZONAMIENTO, dentro del rastro. Sangrado y en cursiva: se lee como una nota al margen,
      que es lo que es — no es lo que Hermes te dijo, es lo que se dijo a sí mismo mientras lo
      averiguaba. La distinción importa aquí más que en un chat cualquiera: en esta consola, lo
      que el agente AFIRMA y lo que SUPONE no pueden verse igual. */
.vivo-razonamiento {
  border-top: var(--filete) solid var(--linea);
  padding: var(--e3) var(--e4) var(--e3) var(--e4);
  display: flex; flex-direction: column; gap: var(--e2);
  max-height: 320px; overflow-y: auto;
}
.vivo-razonamiento p {
  margin: 0;
  font: 400 var(--t-sm)/var(--lh-sm) var(--prosa);
  font-style: italic;
  color: var(--tinta-apagada);
  border-left: var(--filete) solid var(--linea);
  padding-left: var(--e3);
}