/* Hoja de /ui/, trozo 02 — su index enlaza los trozos en orden, y la cascada depende de él. */
/* ---- F17 2B: adjuntos (adjuntos.js) --------------------------------------------------------- */
/* El módulo lo monta comandos.js, que es COMPARTIDO: si estas clases no se visten aquí, la
   terminal enseña el menú del «+» y las fichas del cajón en el tipo por defecto del navegador —el
   defecto que F16 pagó con la vista de Acciones en Times New Roman—. Traje de terminal: monoespacio,
   denso, sin radios grandes; el estado se dice con la palabra y con una marca de 2px a la
   izquierda, nunca con un relleno de color. */
.adj { position: relative; flex: 0 0 auto; align-self: flex-end; }
.adjuntar { width: 30px; height: 30px; background: transparent; color: var(--tinta-suave);
  border: 1px solid transparent; border-radius: 4px; cursor: pointer; font: 18px/1 var(--mono); }
.adjuntar:hover { background: var(--fondo-alzado); color: var(--tinta); border-color: var(--linea); }
.adjuntar[aria-expanded="true"] { color: var(--acento); border-color: var(--acento); }
.adj-menu { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 21; min-width: 240px;
  padding: 4px; background: var(--fondo-alzado); border: 1px solid var(--linea); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.adj-menu[hidden] { display: none; }
.adj-opcion { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--tinta); cursor: pointer;
  padding: 6px 9px; border-radius: 4px; font: 13px/1.5 var(--mono); }
.adj-op-nombre { font-weight: 700; white-space: nowrap; }
.adj-op-desc { flex: 1; min-width: 0; color: var(--tinta-suave); font-size: 12px; }
.adj-opcion:hover:not(:disabled) { background: var(--fondo); }
.adj-opcion:disabled { color: var(--tinta-apagada); cursor: default; }
.adj-entradas { display: contents; }
.adj-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); border: 0; opacity: 0; pointer-events: none; }

.soltar { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center;
  justify-content: center; padding: 24px; pointer-events: none; background: rgba(11, 13, 16, .82); }
.soltar[hidden] { display: none; }
.soltar-caja { max-width: 52ch; padding: 20px 26px; text-align: center; background: var(--fondo-alzado);
  color: var(--tinta); border: 2px dashed var(--acento); border-radius: 6px; font-size: 13px; }

/* «Se ve rara» = esta pantalla no puede juzgarla; ese es el color de «no se pudo comprobar». Va
   en su propio atributo y después de los estados: subirla no la deja de ser sospechosa. */

/* Adjuntos en cola (F17), con la estética de consola de esta presentación: el estado se marca
   con un carril a la izquierda, nunca tiñendo la ficha. */
.adj-cola { display: flex; flex-wrap: wrap; gap: 8px; max-width: 980px; margin: 0 auto 6px; }
.adj-cola[hidden] { display: none; }
.adj-ficha {
  position: relative; display: flex; align-items: center; gap: 8px;
  background: var(--fondo-alzado); border: 1px solid var(--linea);
  border-left: 3px solid var(--tinta-apagada); border-radius: 6px;
  padding: 5px 8px; max-width: 320px; overflow: hidden;
}
.adj-ficha.subiendo { border-left-color: var(--acento); }
.adj-ficha.con-error { border-left-color: var(--mal); }
.adj-ficha-cuerpo { display: flex; flex-direction: column; min-width: 0; }
.adj-nombre { font-size: 12.5px; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adj-sub { font-size: 11px; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adj-ficha.con-error .adj-sub { color: #ffb4ab; white-space: normal; }
.adj-rara { font-size: 11px; color: var(--desconocido); white-space: normal; }   /* la juzga el servidor, no esta pantalla */
.adj-quitar {
  flex: 0 0 auto; border: 0; background: transparent; color: var(--tinta-suave);
  cursor: pointer; font-size: 12px; line-height: 1; padding: 4px 6px; border-radius: 4px;
  min-width: 28px; min-height: 28px;
}
.adj-quitar:hover { background: var(--linea); color: var(--tinta); }

/* ---- rueda de progreso de una subida (F17) ----------------------------------------------------
   El texto «subiendo…» quieto durante veinte segundos no distingue una subida lenta de una
   colgada: el operador lo dijo con esas palabras. Esto SÍ mide — la fracción sale de
   `upload.onprogress`, no de un temporizador.
   Dos formas, porque son dos hechos distintos: con arco cuando se sabe cuánto va, y girando sin
   arco cuando el navegador no lo publica. Fingir un porcentaje sería peor que no darlo. */
.adj-anillo { width: 18px; height: 18px; flex: 0 0 auto; }
.adj-anillo-pista,
.adj-anillo-arco { fill: none; stroke-width: 2; }
.adj-anillo-pista { stroke: var(--linea, rgba(127,127,127,.28)); }
.adj-anillo-arco {
  stroke: var(--acento, #4f8cff);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset .18s linear;   /* el salto entre eventos, suavizado */
}
.adj-anillo[data-indeterminado] { animation: adj-girar 1s linear infinite; }
.adj-anillo[data-indeterminado] .adj-anillo-arco { transition: none; }
@keyframes adj-girar { to { transform: rotate(360deg); } }
/* Quien pide menos movimiento no recibe una rueda girando: se queda quieta y el texto sigue
   diciendo la fase. La información no depende de la animación. */
@media (prefers-reduced-motion: reduce) {
  .adj-anillo[data-indeterminado] { animation: none; }
  .adj-anillo-arco { transition: none; }
}

/* ---- F18 — piezas compartidas con /app/, en el traje de la terminal ---------------------------
   El hero y el turno en vivo los emiten sesion.js/comandos.js para las DOS presentaciones. Aquí
   se visten de terminal: sin tarjetas elevadas ni latidos — texto, borde y color. */
.hero { display: flex; flex-direction: column; gap: 8px; margin: 24px 0; }
.hero-marca { display: none; }                   /* la terminal no lleva marca dibujada */
.hero-pregunta { font-weight: 700; }
.hero-sub { opacity: .75; }
.hero-tarjetas { display: flex; flex-direction: column; gap: 4px; }
.hero-tarjeta {
  display: flex; gap: 8px; align-items: baseline;
  background: transparent; border: 0; padding: 2px 0;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.hero-tarjeta:hover .hero-titulo { text-decoration: underline; }
.hero-ic { display: none; }
.hero-detalle { opacity: .65; }
.vivo-actividad { opacity: .75; font-style: italic; }
.vivo-actividad.mal { opacity: 1; color: var(--mal, #c0392b); font-style: normal; }
.vivo-pie { opacity: .65; margin-top: 6px; }

/* F18 — atención ≠ error: la degradación declarada va en su propio traje, no en rojo. */
.aviso.atencion { color: var(--alerta, #b8860b); font-style: normal; }
.tiempo:has(.turno.humano) .hero { display: none; }

/* F18 — tablas y regla del markdown, en el traje de la terminal. */
.md-tabla-caja { overflow-x: auto; margin: 8px 0; }
.md-tabla { border-collapse: collapse; }
.md-tabla th, .md-tabla td { border: 1px solid var(--linea, rgba(127,127,127,.35)); padding: 2px 8px; text-align: left; }
.md-tabla th { font-weight: 700; }
.md-regla { border: 0; border-top: 1px solid var(--linea, rgba(127,127,127,.35)); margin: 12px 0; }

/* F18 — el saldo en la franja de la terminal: primera fila entera, sin color inventado. */
.dato:first-child { flex-basis: 100%; }

/* F20 — las tres piezas nuevas también en la terminal: los módulos son COMPARTIDOS, así que una
   pieza que solo tenga estilo en /app/ sale sin forma aquí. Sobria a propósito; el adorno es de
   la otra presentación. */
.vivo-rastro { border: 1px solid var(--linea); border-radius: 6px; margin-bottom: 10px; }
.vivo-rastro-cab { padding: 8px 10px; font-size: 12px; color: var(--tinta-apagada); cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.vivo-rastro-lista { border-top: 1px solid var(--linea); padding: 6px 0; }
.vivo-rastro-item { display: flex; align-items: center; gap: 8px; padding: 3px 10px; font-family: var(--mono); font-size: 11px; }
.vivo-rastro-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--bien); flex: none; }
.vivo-rastro-item.fallo .vivo-rastro-punto { background: var(--mal); }
.vivo-rastro-cola { margin-left: auto; color: var(--tinta-apagada); }
.volver-abajo { position: absolute; left: 50%; transform: translateX(-50%); bottom: 88px; z-index: 6;
  min-height: 44px; padding: 0 14px; border: 1px solid var(--borde); border-radius: 999px;
  background: var(--elevada); color: var(--tinta-suave); font-size: 12px; cursor: pointer; }
.volver-abajo[hidden] { display: none; }
.reintentar-turno { margin-top: 8px; }

/* F20 — el menú del «+» y el razonamiento, también aquí. Los módulos son COMPARTIDOS: una clase
   que solo tenga estilo en /app/ sale cruda en la terminal. Sobrio a propósito; el adorno es de
   la otra presentación. */
.adj-menu { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 30; min-width: 240px;
  padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--elevada);
  border: 1px solid var(--borde); border-radius: 8px; }
.adj-menu[hidden] { display: none; }
.adj-opcion { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px;
  padding: 6px 10px; border: 0; background: transparent; color: var(--tinta); border-radius: 6px;
  cursor: pointer; text-align: left; font: inherit; }
.adj-opcion:hover:not(:disabled) { background: var(--hundida); }
.adj-opcion:disabled { opacity: .5; cursor: not-allowed; }
.adj-op-ic { width: 18px; height: 18px; flex: none; color: var(--tinta-apagada); }
.adj-op-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.adj-op-nombre { font-size: 13px; }
.adj-op-desc { font-size: 11px; color: var(--tinta-apagada); }
.vivo-razonamiento { border-top: 1px solid var(--linea); padding: 10px 12px; display: flex;
  flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
.vivo-razonamiento p { margin: 0; font-size: 12px; font-style: italic; color: var(--tinta-apagada);
  border-left: 1px solid var(--linea); padding-left: 10px; }

/* F20 — acuse, separador de día, editar y buscar: también aquí, que los módulos son compartidos. */
.acuse { position: fixed; left: 50%; bottom: 90px; z-index: 90; transform: translate(-50%, 10px);
  padding: 10px 16px; background: var(--tinta); color: var(--fondo); border-radius: 999px;
  font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.acuse.puesto { opacity: 1; transform: translate(-50%, 0); }
.acuse.yendose { opacity: 0; }
.dia-sep { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: 11px;
  color: var(--tinta-apagada); }
.dia-sep::before, .dia-sep::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.turno-editar { width: 26px; height: 26px; padding: 0; display: inline-grid; place-items: center;
  border: 0; background: transparent; color: var(--tinta-apagada); border-radius: 4px; cursor: pointer; }
.turno-editar svg { width: 14px; height: 14px; }
.busca-hilo { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 25;
  display: flex; align-items: center; gap: 8px; width: min(520px, calc(100% - 24px)); padding: 6px;
  background: var(--elevada); border: 1px solid var(--borde); border-radius: 999px; }
.busca-hilo[hidden] { display: none; }
.busca-hilo-campo { flex: 1; min-width: 0; min-height: 36px; padding: 0 10px; border: 0;
  background: transparent; color: var(--tinta); font-size: 16px; }
.busca-hilo-campo:focus { outline: none; }
.busca-hilo-cuenta { font-size: 11px; color: var(--tinta-apagada); white-space: nowrap; }
.busca-hilo-btn { width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--tinta-apagada); border-radius: 4px; cursor: pointer; }
::highlight(busca-hilo) { background: var(--acento-tenue); color: var(--tinta); }

/* 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; }