/* Sistema visual del chat del búnker HECHOS.
 *
 * Cero color propio acá: todo sale de las variables de marca que trae
 * `/marca/tokens.css` (assets/marca/tokens.css, tema claro/oscuro incluido).
 * Este archivo sólo define layout, tipografía aplicada y los pocos alias que
 * `sn-charts.css` necesita para seguir el tema del chat (--surface/--rule/
 * --ink/--muted/--rule-soft, ver ese archivo).
 */

:root {
  --surface: var(--superficie);
  --rule: var(--borde);
  --rule-soft: var(--borde);
  --ink: var(--texto);
  --muted: var(--texto-suave);
  /* Lo que se ve de un bloque de datos plegado (#19 / F4): alcanza para
   * reconocer de qué es —encabezado y primeras filas— sin que UNA respuesta
   * con informe se lleve dieciséis pantallas de pulgar. Los tokens de marca no
   * se tocan: este vive acá, que es donde vive el layout del chat. */
  --asomo-de-bloque: 220px;
}

* {
  box-sizing: border-box;
}

/* `hidden` es el interruptor que usa todo el JS del chat para mostrar y
 * esconder secciones. Sin esta regla cualquier `display` propio (la hoja del UA
 * pone `display: none` con MENOS especificidad que un `#id`) le gana al
 * atributo y la sección se queda a la vista: es el bug por el que el login no
 * desaparecía después de entrar. No se puede pisar desde ningún otro selector. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
}

h1, h2, h3, .bloque-cifra-valor, button {
  font-family: var(--fuente-marca);
  font-weight: var(--peso-marca);
}

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 8px 12px;
  background: var(--marca);
  color: var(--boton-texto);
}

.marca-cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

.marca-cabecera .logo {
  height: 28px;
  width: auto;
}

.sub {
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.85;
}

.cabecera-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}

/* ── Menú de cuenta (PA-19.6 (C)) ──────────────────────────────────
 * El teléfono es el caso base: cuenta, panel, salir y tema entran en UN control
 * y el panel se abre EN EL FLUJO del `<header>`, nunca flotando encima. Un
 * desplegable absoluto se sale de la caja del `<header>` y eso es exactamente
 * lo que U4 prohibe. */
header:has(.menu-cuenta[open]) .cabecera-acciones {
  flex: 1 0 100%;
}

.menu-cuenta-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--alto-tactil);
  min-width: var(--alto-tactil);
  padding: 0 14px;
  border-radius: var(--radio-boton);
  background: var(--boton-fondo);
  color: var(--boton-texto);
  font-family: var(--fuente-marca);
  font-weight: var(--peso-marca);
  letter-spacing: var(--tracking-boton);
  cursor: pointer;
  list-style: none;
}

.menu-cuenta-boton::-webkit-details-marker {
  display: none;
}

.menu-cuenta-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
}

.usuario-nombre {
  font-size: 0.85rem;
}

/* U3: un `summary` abre y cierra, o sea que es un control, y sin esto medía 16
 * px de alto (`estilos.css` los estilaba sin `min-height`). El relleno va en
 * `padding-block` y no en `display:flex` para no perder el triángulo de
 * despliegue, que es la única señal de que el bloque se puede abrir. */
summary {
  min-height: var(--alto-tactil);
  padding-block: 12px;
}

button {
  cursor: pointer;
  border: none;
  border-radius: var(--radio-boton);
  min-height: var(--alto-tactil);
  padding: 0 16px;
  background: var(--boton-fondo);
  color: var(--boton-texto);
  letter-spacing: var(--tracking-boton);
}

button:hover {
  background: var(--boton-fondo-hover);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

/* ── Login ────────────────────────────────────────────────────────────── */

#vista-login {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#login-formulario {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  padding: 24px;
}

#login-formulario label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
}

#login-formulario input {
  min-height: var(--alto-tactil);
  border: 1px solid var(--borde);
  border-radius: var(--radio-input);
  padding: 0 12px;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
}

/* ── Chat ─────────────────────────────────────────────────────────────── */

#vista-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#hilo {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bienvenida {
  color: var(--texto-suave);
}

.turno {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 100%;
}

.turno.usuario {
  align-self: flex-end;
}

.turno.usuario .burbuja {
  background: var(--burbuja-usuario);
  color: var(--burbuja-usuario-texto);
  border-radius: var(--radio-tarjeta);
  padding: 10px 16px;
}

.turno.asistente .burbuja {
  color: var(--texto);
}

.trabajando {
  color: var(--texto-suave);
  font-size: 0.85rem;
}

.rechazo {
  color: var(--acento);
}

.consulta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tile);
  padding: 10px 12px;
  overflow-x: auto;
  font-family: var(--fuente-mono);
  font-size: 0.8rem;
}

.detalle-proceso {
  font-size: 0.8rem;
  color: var(--texto-suave);
}

/* El proceso del turno vive plegado: la conversación es lo que se lee de corrido. */
.datos-crudos,
.detalle-tecnico {
  margin-top: 10px;
}

.datos-crudos > summary,
.detalle-tecnico > summary {
  cursor: pointer;
  color: var(--texto-suave);
  font-size: 0.85rem;
}

.detalle-tecnico > * + * {
  margin-top: 8px;
}

#composer {
  border-top: 1px solid var(--borde);
  padding: 12px 16px;
}

.fila-entrada {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

/* «Subir archivo» vive acá, al lado del campo de escribir: adjuntar es parte de
 * preguntar (PA-19.6 (C)). El margen va en los hijos y no en la fila para que
 * quien no tiene el permiso no pague un renglón vacío. */
.fila-adjuntos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.fila-adjuntos > * {
  margin-top: 8px;
}

#entrada {
  flex: 1;
  resize: none;
  min-height: var(--alto-tactil);
  max-height: 200px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-input);
  padding: 10px 14px;
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--fuente-texto);
}

/* ── Bloques (cifra / tabla / lista / gráfico) ───────────────────────────
 * Los colores de serie los aplica `sn/sn-charts.js` leyendo --serie-1..5 de
 * tokens.css directamente; acá sólo va la tipografía y el marco.
 */

.bloque {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  padding: 16px 18px;
  margin: 0;
}

.bloque-titulo {
  margin: 0 0 8px;
}

.bloque-cifra-valor {
  font-size: 2rem;
  margin: 0;
  color: var(--marca);
}

.tabla-wrap {
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.85rem;
}

th, td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--borde);
  text-align: left;
}

.exportar-csv {
  margin-top: 10px;
  background: transparent;
  color: var(--marca);
  border: 1px solid var(--borde);
}

.meta {
  color: var(--texto-suave);
  font-size: 0.8rem;
}

/* ── Tablas legibles (markdown del hilo y bloque `tabla`) ────────────────── */

.tabla-wrap {
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio-tile);
}

th {
  background: var(--marca);
  color: var(--superficie);
  position: sticky;
  top: 0;
  white-space: nowrap;
}

tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--borde) 25%, transparent);
}

tbody tr:hover {
  background: color-mix(in srgb, var(--acento) 12%, transparent);
}

th.ordenable {
  cursor: pointer;
  user-select: none;
}

th.ordenable::after {
  content: " ↕";
  opacity: 0.5;
}

th[aria-sort="ascending"]::after {
  content: " ↑";
  opacity: 1;
}

th[aria-sort="descending"]::after {
  content: " ↓";
  opacity: 1;
}

.celda-numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

tr.fila-con-enlace {
  cursor: pointer;
}

.celda-enlace a,
.tabla-md a {
  color: var(--acento);
}

/* ── Controles de un bloque ──────────────────────────────────────────────── */

.bloque-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.tabla-buscar {
  flex: 1;
  min-width: 0;
  min-height: var(--alto-tactil);
  padding: 6px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-boton);
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
}

.bloque-ampliar,
.tabla-mas,
.tabla-menos,
.exportar-csv {
  min-height: var(--alto-tactil);
  padding: 6px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-boton);
  background: transparent;
  color: var(--marca);
  letter-spacing: var(--tracking-boton);
  cursor: pointer;
}

.bloque-ampliar:hover,
.tabla-mas:hover,
.tabla-menos:hover,
.exportar-csv:hover {
  background: color-mix(in srgb, var(--acento) 12%, transparent);
}

.tabla-paginacion {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* ── Próximos pasos (#22): mobile-first, apilados en columna para que cada
 * botón ocupe el ancho disponible y no haya que apuntar entre dos chips
 * angostos pegados. `button` ya trae `min-height: var(--alto-tactil)`. */
.bloque-pasos-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bloque-paso {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-boton);
  background: transparent;
  color: var(--marca);
  text-align: left;
  letter-spacing: var(--tracking-boton);
  cursor: pointer;
}

.bloque-paso:hover {
  background: color-mix(in srgb, var(--acento) 12%, transparent);
}

@media (min-width: 769px) {
  .bloque-pasos-lista {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .bloque-paso {
    width: auto;
  }
}

/* ── Tarjeta de cifra ────────────────────────────────────────────────────── */

.bloque-cifra-valor {
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1;
}

.bloque-cifra-comparacion {
  margin: 6px 0 0;
  font-weight: 600;
}

.bloque-cifra-comparacion.positiva {
  color: var(--sentimiento-positivo);
}

.bloque-cifra-comparacion.negativa {
  color: var(--sentimiento-negativo);
}

/* ── Modal (Ampliar, login) ──────────────────────────────────────────────── */

.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: color-mix(in srgb, var(--hechos-navy) 70%, transparent);
}

.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  background: var(--superficie);
  color: var(--texto);
  border-radius: 0;
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.35);
}

.modal-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--borde);
}

.modal-titulo {
  margin: 0;
  font-size: 1.1rem;
}

.modal-cerrar {
  min-width: var(--alto-tactil);
  min-height: var(--alto-tactil);
  border: none;
  border-radius: var(--radio-boton);
  background: transparent;
  color: var(--texto);
  font-size: 1.1rem;
  cursor: pointer;
}

.modal-cuerpo {
  overflow: auto;
  padding: 16px 18px;
}

.modal-cuerpo #vista-login {
  padding: 0;
}

.tabla-ampliada {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.grafico-ampliado {
  min-height: 50vh;
}

/* ── Cabecera: subir archivo, panel ──────────────────────────────────────── */

.panel-enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alto-tactil);
  min-width: var(--alto-tactil);
  padding: 0 10px;
  color: var(--boton-texto);
  font-size: 0.85rem;
  text-decoration: none;
}

.panel-enlace:hover {
  text-decoration: underline;
}

.subir-archivo {
  font-size: 0.85rem;
}

.archivo-estado {
  font-size: 0.8rem;
  color: var(--boton-texto);
  opacity: 0.9;
}

/* ── #29: aviso de conexión (@s7a/@s7b) ──────────────────────────────────
 * Reemplaza al viejo texto permanente con el mail o "sin sesión": sólo
 * ocupa lugar cuando hay algo mal, y nunca en el centro de la cabecera —
 * vive en `.marca-cabecera`, al lado del logo, nunca solo en medio. */
.aviso-estado {
  color: var(--boton-texto);
}

/* ── #29: controles de UN toque de la cabecera (celular) ─────────────────
 * `.alternar-historial` y `.nueva-conversacion-cabecera` sólo existen bajo
 * los 900px: en escritorio la barra lateral ya está fija y su propio
 * «+ Nueva conversación» alcanza. */
.alternar-historial,
.nueva-conversacion-cabecera {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alto-tactil);
  min-width: var(--alto-tactil);
  padding: 0;
  flex: 0 0 auto;
}

/* ── #29: avatar del menú de cuenta (@s4a) ───────────────────────────────
 * Reemplaza el glifo de tema que vivía en `.menu-cuenta-boton`: ahora es
 * sólo identidad, un círculo con la inicial. */
.avatar-inicial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--boton-texto);
  color: var(--marca);
  font-size: 0.85rem;
  font-weight: 700;
}

.usuario-rol-area {
  font-size: 0.8rem;
  opacity: 0.85;
  width: 100%;
}

/* ── #29: selector de tema, tres opciones (@s4c) ─────────────────────────
 * Ya no es un botón que cicla: cada opción es su propio control, con el
 * estado marcado por `aria-pressed` (sin color propio acá: el resaltado
 * sale de `--boton-fondo-hover`, que ya existe en tokens de marca). */
.tema-selector {
  display: flex;
  gap: 4px;
  width: 100%;
}

.tema-opcion {
  flex: 1 1 auto;
  min-height: var(--alto-tactil);
  padding: 0 8px;
  font-size: 0.8rem;
  background: transparent;
  border: 1px solid var(--boton-texto);
}

.tema-opcion[aria-pressed="true"] {
  background: var(--boton-fondo-hover);
}

/* ── #29: «Salir» separado del resto del panel (@s4d) ────────────────────
 * Es el último control: la línea de arriba es lo único que hace falta para
 * que se lea como aparte, sin tocar el orden que ya lo garantiza. Acotado al
 * panel del menú de cuenta: el `#salir` del embed (D11.4) no vive ahí y no
 * tiene por qué heredar este separador. */
.menu-cuenta-panel .salir {
  margin-top: 4px;
  border-top: 1px solid var(--boton-texto);
  padding-top: 12px;
  width: 100%;
}

/* ── Historial de conversaciones (#26, agrupado desde #29) ───────────────
 * Mobile-first: una columna, sin ancho fijo — cada fila se estira a lo que
 * haya, nunca provoca scroll lateral (movil_primero, U4). */
.historial-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.historial-grupo + .historial-grupo {
  margin-top: 16px;
}

.historial-grupo-titulo {
  margin: 0 0 8px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
}

.historial-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.historial-item--activa .historial-abrir {
  font-weight: 700;
  color: var(--marca);
}

.historial-abrir {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.historial-borrar {
  flex: 0 0 auto;
  font-size: 0.85rem;
}

.historial-vacio {
  opacity: 0.85;
  font-size: 0.9rem;
}

/* ── #29: panel de historial — barra lateral / panel deslizable ──────────
 *
 * Mobile-first (base = celular): el `<aside>` vive superpuesto, fuera de la
 * pantalla hasta que se abre. `.cuerpo` lo saca del flujo (`position:
 * relative` para anclar el panel absoluto) sin que el contenido principal
 * pierda su ancho.
 */
.cuerpo {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}

.contenido-principal {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.panel-historial {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 90;
  width: min(85vw, 320px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.15s ease;
}

.panel-historial--abierto {
  transform: translateX(0);
}

.panel-historial-cabecera {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nueva-conversacion-panel {
  flex: 1 1 auto;
  text-align: left;
}

.colapsar-panel-historial {
  flex: 0 0 auto;
  min-width: var(--alto-tactil);
}

.lista-historial-contenedor {
  flex: 1;
  overflow-y: auto;
}

/* ── Escritorio (≥900px): la barra lateral queda fija y siempre a la vista.
 * `.alternar-historial` y `.nueva-conversacion-cabecera` ya no hacen falta:
 * el panel está ahí, con su propio «+ Nueva conversación». */
@media (min-width: 900px) {
  .alternar-historial,
  .nueva-conversacion-cabecera {
    display: none;
  }

  .panel-historial {
    position: static;
    inset: auto;
    width: 280px;
    flex: 0 0 280px;
    transform: none;
    transition: none;
    border-right: 1px solid var(--borde);
  }

  .panel-historial--colapsado {
    flex-basis: 0;
    width: 0;
    padding: 12px 0;
    overflow: hidden;
  }

  .panel-historial--colapsado .panel-historial-cabecera > *:not(.colapsar-panel-historial),
  .panel-historial--colapsado .lista-historial-contenedor {
    display: none;
  }
}

/* ── Bienvenida: preguntas de ejemplo tocables (#29 @s6, agrupadas #27) ───
 * Mismo patrón que los próximos pasos de #22: apiladas en columna en
 * celular, cada botón ocupa el ancho disponible. */
.bienvenida-grupo + .bienvenida-grupo {
  margin-top: 16px;
}

/* Mismo tamaño que `.historial-grupo-titulo`: ya está sobre el piso
 * tipográfico de 12 px de `movil_primero.feature`, no hace falta otro. */
.bienvenida-grupo-titulo {
  margin: 12px 0 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
}

.bienvenida-ejemplos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.bienvenida-ejemplo {
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  background: transparent;
  color: var(--marca);
  border: 1px solid var(--borde);
}

.bienvenida-ejemplo:hover {
  background: color-mix(in srgb, var(--acento) 12%, transparent);
}

@media (min-width: 769px) {
  .bienvenida-ejemplos {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .bienvenida-ejemplo {
    width: auto;
  }
}

/* ── Feedback, enseñanza y "volver a consultar" al pie de un turno ──────── */

.feedback,
.aprendizaje {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.feedback-positivo,
.feedback-negativo {
  min-height: auto;
  padding: 4px 10px;
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--borde);
}

.feedback-comentario {
  display: flex;
  gap: 8px;
  width: 100%;
}

.feedback-comentario textarea {
  flex: 1;
  min-height: 60px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-input);
  padding: 8px 10px;
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--fuente-texto);
}

.guardar-regla,
.guardar-aprendizaje,
.volver-a-consultar {
  min-height: auto;
  padding: 4px 12px;
  font-size: 0.8rem;
  background: transparent;
  color: var(--marca);
  border: 1px solid var(--borde);
}

.form-aprendizaje {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tile);
  padding: 12px 14px;
}

.form-aprendizaje label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
}

.form-aprendizaje input,
.form-aprendizaje select,
.form-aprendizaje textarea {
  border: 1px solid var(--borde);
  border-radius: var(--radio-input);
  padding: 8px 10px;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
}

.form-aprendizaje textarea {
  min-height: 100px;
}

/* ── Panel admin (admin.html) ────────────────────────────────────────────── */

#panel-contenido {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tab-vista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel-reglas form {
  display: flex;
  gap: 8px;
}

.panel-reglas input {
  flex: 1;
  min-height: var(--alto-tactil);
  border: 1px solid var(--borde);
  border-radius: var(--radio-input);
  padding: 0 12px;
  background: var(--superficie);
  color: var(--texto);
}

.panel-reglas ul,
.panel-feedback ul,
.panel-propuestas ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.panel-reglas li,
.panel-feedback li,
.panel-propuestas li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tile);
  padding: 10px 12px;
}

/* ── Mobile-first: la base es el teléfono, el breakpoint AGREGA ───────────
 * Acá vivía el único `@media` de este archivo, un `max-width: 400px` con el
 * comentario «el chat tiene que andar a 400px de ancho»: o sea, el teléfono
 * escrito como la CORRECCIÓN de un diseño de escritorio. Dado vuelta (D19.3),
 * los valores de pantalla chica pasaron a la base —están arriba, con su
 * regla— y lo que queda acá es lo que el escritorio AGREGA cuando hay ancho:
 * más aire, el límite de largo de renglón y el modal como ventana.
 */
@media (min-width: 401px) {
  header {
    padding: 12px 16px;
  }

  #hilo {
    padding: 16px;
  }

  /* 68ch es el largo de renglón que se lee cómodo; en un teléfono no entra y
   * el turno ocupa todo el ancho. */
  .turno {
    max-width: min(100%, 68ch);
  }

  .fila-entrada {
    gap: 8px;
  }

  .modal-fondo {
    padding: 16px;
  }

  .modal {
    width: min(100%, 960px);
    height: auto;
    max-height: 92vh;
    border-radius: var(--radio-tarjeta);
  }
}

/* ── Tarjeta del informe (#17) ───────────────────────────────────────────── */
.informe {
  margin: .8rem 0;
  border: 1px solid var(--linea, #dce7ec);
  border-radius: 10px;
  overflow: hidden;
  background: var(--superficie, #fff);
}
.informe-cabecera {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .8rem;
  font-size: .85rem;
  font-weight: 600;
}
.informe-peso { color: var(--apagado, #617581); font-weight: 500; }
.informe-acciones { display: flex; gap: .5rem; padding: 0 .8rem .6rem; }
.informe-accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alto-tactil);
  min-width: var(--alto-tactil);
  padding: .35rem .8rem;
  border: 1px solid var(--linea, #dce7ec);
  border-radius: 6px;
  font-size: .85rem;
  text-decoration: none;
  color: inherit;
}
.informe-accion:hover { background: var(--superficie-suave, #f4f8fa); }
/* La vista previa no es interactiva: es para reconocer el informe de un vistazo. */
.informe-preview {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
  border-top: 1px solid var(--linea, #dce7ec);
  background: #fff;
}

/* ── Escritorio: el menú de cuenta se despliega solo ─────────────────────────
 * Mobile-first: la base es el teléfono (menú agrupado) y este breakpoint
 * AGREGA — con ancho de sobra los cuatro controles vuelven a estar a un toque,
 * sin menú de por medio. `::details-content` es lo único que destapa el
 * subárbol de un `<details>` cerrado: el navegador lo salta con
 * `content-visibility`, no con `display`. */
@media (min-width: 1024px) {
  .menu-cuenta > summary {
    display: none;
  }

  .menu-cuenta::details-content {
    content-visibility: visible;
    block-size: auto;
  }

  .menu-cuenta-panel {
    padding-top: 0;
  }
}

/* ── Bloques plegados con asomo (PA-19.5) ──────────────────────────────
 * El título y las notas del bloque quedan SIEMPRE fuera del cuerpo plegado: la
 * cobertura, los faltantes y las advertencias no se esconden nunca (A4). */
.bloque-cuerpo {
  max-height: var(--asomo-de-bloque);
  overflow: hidden;
}

.bloque--desplegado > .bloque-cuerpo {
  max-height: none;
  overflow: visible;
}

.bloque-desplegar {
  width: 100%;
  margin-top: 10px;
  background: transparent;
  color: var(--marca);
  border: 1px solid var(--borde);
}

/* Con ancho de sobra no hace falta plegar nada: el breakpoint AGREGA la vista
 * completa, no corrige una decisión de teléfono. */
@media (min-width: 769px) {
  .bloque-cuerpo {
    max-height: none;
    overflow: visible;
  }

  .bloque-desplegar {
    display: none;
  }
}