/* ===========================================================================
   VENTANA DEL ASISTENTE  ·  #sectionAsistente
   ---------------------------------------------------------------------------
   El chat a pantalla completa. Es la puerta de entrada de la app, así que esta
   hoja va como <link> ESTÁTICO en el <head>, no por cargarCss(): bajarla
   perezosamente daría un parpadeo de chat sin estilo en cada arranque de
   sesión.

   Archivo propio y no dentro de ises-app.css por los tres motivos de
   css/gastos.css: esa hoja ya son 113 KB, es el archivo con más tráfico de
   merge del repo, y un archivo nuevo no puede tener conflictos.

   TRES REGLAS DEL TEMA QUE AQUÍ SE RESPETAN:

   - CERO box-shadow COMO PROFUNDIDAD. La profundidad es borde de 1px más
     superficie. El diseño de origen tampoco tenía ninguna salvo en el aviso
     flotante, que aquí se resuelve con borde. El único box-shadow de la hoja
     es var(--ring), que NO es una sombra: es como el tema dibuja el foco.
   - backdrop-filter SOLO en superficies grandes (cabecera, composer, overlay).
     Prohibido en burbujas, filas de tabla y chips: se repiten decenas de veces
     sobre un canvas animado y cada una obliga a recomponer.
   - CERO !important. El presupuesto de cuatro ya está gastado en ises-app.css;
     `#sectionAsistente .clase` gana por especificidad y este <link> va después.

   Los valores del diseño (#070707, #0d0d0d, #4d9dff, #3ddc84…) NO se copian
   crudos: se mapean a los tokens del tema para que la ventana envejezca con la
   app y no contra ella.
   =========================================================================== */

/* --- 1. Tokens propios ---------------------------------------------------- */

/* En :root y no en #sectionAsistente. El buscador de secciones cuelga del
   <body> (tiene que hacerlo para poder taparlo todo), así que si los tokens
   vivieran dentro de la sección, ahí fuera serían var() sin valor: los radios
   caían a 0 y los bordes al color del texto. Llevan prefijo --asv-, así que
   estar en :root no le pisa nada a nadie. */
:root {
  /* Ancho de la columna de conversación. El diseño de escritorio la centra;
     por encima de esto el texto deja de ser cómodo de leer. */
  --asv-col: 810px;

  /* Esquinas al gusto de iOS: generosas y en escalón claro. Cuanto más grande
     la superficie, más redonda — una tarjeta con el mismo radio que un botón
     se ve dura. */
  --asv-r-xs: 8px;    /* paloma, pastillas diminutas */
  --asv-r-sm: 12px;   /* botones e iconos */
  --asv-r: 14px;      /* campos, chips */
  --asv-r-md: 18px;   /* tarjetas y bloques */
  --asv-r-lg: 22px;   /* composer, tarjetas de inicio */
  --asv-r-xl: 28px;   /* superficies grandes */
}

/* Los azules van en `body` y NO en `:root`, aunque el resto de los tokens sí.
   La diferencia importa porque una custom property se resuelve DONDE se
   declara: puestos en `:root` se computan sobre <html>, y ahí `.theme-ises`
   —que vive en el <body>— todavía no existe. El resultado era que
   `--accent-surface` se congelaba en el valor de styles.css anterior al tema
   y `--i-azul-claro` ni siquiera estaba definido.

   En modo oscuro nunca se notó: los dos azules de fondo son casi el mismo
   #0e15xx. El modo claro lo destapó, con la marca del asistente pintada de
   azul marino en mitad de una app blanca.

   Declararlos en `body` no rompe el motivo por el que el resto está en
   `:root` (el buscador de secciones cuelga del <body>, no de <html>). */
body {
  /* Azul de acento en sus tres papeles: texto, superficie y borde. */
  --asv-azul: var(--i-azul-claro, var(--accent));
  --asv-azul-sup: var(--accent-surface);
  --asv-azul-sup-2: var(--accent-surface);  /* pie clicable y hover de tarjeta */
  --asv-azul-brd: var(--accent-line);
  --asv-azul-brd-fuerte: var(--accent);
}

/* El matiz que se pierde al pasar de valores fijos a tokens: en oscuro el
   segundo azul era MÁS oscuro que el primero (un hover que se hunde) y los
   bordes eran el acento translúcido. Se recupera aquí, y así cada tema lo
   resuelve con su propia paleta en vez de con dos hex escritos a mano. */
body.theme-ises:not(.tema-claro) {
  --asv-azul-sup-2: color-mix(in srgb, var(--accent-surface) 78%, #000000);
  --asv-azul-brd: color-mix(in srgb, var(--accent) 28%, transparent);
  --asv-azul-brd-fuerte: color-mix(in srgb, var(--accent) 42%, transparent);
}
body.theme-ises.tema-claro {
  --asv-azul-sup-2: color-mix(in srgb, var(--accent-surface) 82%, var(--accent));
  --asv-azul-brd: color-mix(in srgb, var(--accent) 26%, transparent);
  --asv-azul-brd-fuerte: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* --- 2. Armazón de altura completa ---------------------------------------
   Ninguna otra sección es de altura fija: .content hace scroll y .section es
   un bloque que crece. El chat necesita lo contrario — la lista de mensajes
   con SU propio scroll y el composer clavado abajo — así que el cambio se
   acota con una clase en <body> y no toca a las otras trece secciones. */

/* En ESCRITORIO el armazón ya está clavado a la ventana (styles.css:150,
   height:100dvh + overflow:hidden) y no hay nada que arreglar.

   En TELÉFONO no: ahí pasa a `height:auto; min-height:100dvh` en columna
   (styles.css:2118), porque las trece secciones de formularios y tablas tienen
   que poder crecer y que la página entera haga scroll. El chat necesita lo
   contrario — quedarse clavado para que el composer no se vaya hacia abajo —,
   así que la altura se vuelve a fijar AQUÍ, solo mientras se está dentro de la
   sección, y ninguna otra se entera.

   100dvh y no 100vh: con vh, la barra del navegador móvil deja el composer
   debajo de ella (mismo motivo que ya documenta ises-app.css). */
body.seccion-asistente,
body.seccion-asistente .app-shell {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/* Y .main necesita altura definida para que .content, que es su hijo flex:1,
   tenga contra qué encogerse. Sin esto el pie se va fuera de la pantalla. */
body.seccion-asistente .main {
  height: 100dvh;
  min-height: 0;
}

body.seccion-asistente .content {
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

/* Dentro de la ventana el botón flotante sobra: ya estás en el asistente. Se
   oculta con CSS y no con JS para que no parpadee al entrar. Al salir a
   cualquier otra sección reaparece solo. */
body.seccion-asistente .asistente-wrap {
  display: none;
}

/* Los dos logos pasaron de <span>/<img> a <button> para poder llevar al
   Asistente con teclado, no solo con el ratón. Aquí se les quita el aspecto de
   botón del navegador: siguen viéndose exactamente igual que antes, y lo único
   que cambia es que ahora se pueden enfocar y pulsar con Enter. */
.rail-logo-btn,
button.ises-nav-logo {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.rail-logo-btn {
  display: block;
  line-height: 0;
}

#sectionAsistente.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  max-width: none;
  padding: 0;
  /* Sin la animación de entrada de las demás secciones: es lo primero que se ve
     al abrir la app y un deslizamiento ahí es ruido, no bienvenida. De paso se
     evita el transform que esa animación deja puesto (termina con `both`), que
     convierte a la sección en contenedor de bloque para todo lo que lleve
     dentro un position: fixed. */
  animation: none;
}

.asv {
  position: relative;   /* ancla del overlay y del aviso: ver el comentario
                           del HTML sobre el transform de .section.active */
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* --- 3. Cabecera ---------------------------------------------------------- */

/* SIN banda: ni fondo propio, ni desenfoque, ni línea de abajo.
   La cabecera y el pie llevaban los tres, y sobre una pantalla que por lo demás
   está vacía eso partía la ventana en tres franjas de lado a lado — se veía el
   corte justo donde no hay nada que separar. La conversación ya se distingue
   sola: va centrada en su columna, y el composer tiene su propio borde. */
.asv-cabecera {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
}

.asv-cabecera-izq,
.asv-cabecera-der {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.asv-titulos {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* El ☰ está en los dos tamaños. Antes en escritorio lo sustituía un botón
   ancho de "Ir a… ⌘K" que, junto con las bandas, era lo que sobrecargaba una
   pantalla que debería estar tranquila. Un icono a la izquierda dice lo mismo,
   es el mismo gesto en teléfono y en escritorio, y el atajo sigue siendo Ctrl+K
   (o escribir "/" en el cuadro). */
#sectionAsistente .asv-menu { display: grid; }

.asv-marca {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--asv-r);
  background: var(--asv-azul-sup);
  border: 1px solid var(--asv-azul-brd);
  color: var(--asv-azul);
}

.asv-marca svg { width: 17px; height: 17px; }

.asv-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--i-txt-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* "datos en vivo": la promesa de que las cifras salen de la base y no de la
   memoria del modelo. El punto late despacio; es el único elemento de la
   pantalla que se mueve solo. */
.asv-pastilla-vivo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: var(--i-verde-sup-2);
  border: 1px solid var(--i-verde-line-2);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.asv-pastilla-vivo::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: asvLatido 2.4s ease-in-out infinite;
}

@keyframes asvLatido {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.28; }
}

/* --- 4. Botones de la cabecera -------------------------------------------- */

.asv-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--asv-r-sm);
  border: 1px solid var(--i-brd-10);
  background: var(--i-sup-1);
  color: var(--i-txt-2);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.asv-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

.asv-btn:hover {
  background: var(--i-sup-3);
  border-color: var(--i-brd-16);
  color: var(--i-txt-1);
}

.asv-btn-primario {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.asv-btn-primario:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-ink);
}

.asv-kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: var(--asv-r-xs);
  background: var(--i-sup-3);
  border: 1px solid var(--i-brd-09);
  color: var(--i-txt-5);
}

.asv-btn-primario .asv-kbd { background: rgba(0, 0, 0, 0.22); border-color: transparent; color: inherit; }

.asv-btn-icono {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--asv-r-sm);
  border: 1px solid var(--i-brd-10);
  background: var(--i-sup-1);
  color: var(--i-txt-3);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.asv-btn-icono svg { width: 16px; height: 16px; }

.asv-btn-icono:hover { background: var(--i-sup-3); color: var(--i-txt-1); }

/* El interruptor de voz enseña un icono u otro según su estado. */
.asv-btn-icono .asv-voz-on  { display: none; }
.asv-btn-icono .asv-voz-off { display: block; }
.asv-btn-icono[aria-pressed="true"] .asv-voz-on  { display: block; }
.asv-btn-icono[aria-pressed="true"] .asv-voz-off { display: none; }

.asv-btn-icono[aria-pressed="true"] {
  background: var(--asv-azul-sup);
  border-color: var(--asv-azul-brd);
  color: var(--asv-azul);
}

/* Mientras suena la voz. */
.asv-btn-icono.hablando { border-color: var(--asv-azul-brd-fuerte); }
.asv-btn-icono.hablando svg { animation: asvLatido 1.1s ease-in-out infinite; }

/* --- 5. Cuerpo y columna -------------------------------------------------- */

.asv-cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* --- 6. Inicio ------------------------------------------------------------ */

.asv-inicio {
  max-width: var(--asv-col);
  margin: 0 auto;
  padding: 48px 22px 32px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.asv-bienvenida {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.asv-marca-grande {
  width: 52px;
  height: 52px;
  border-radius: var(--asv-r-lg);
}

.asv-marca-grande svg { width: 26px; height: 26px; }

.asv-saludo {
  margin: 0;
  font-family: var(--font-display);
  /* Se queda muy por debajo del techo de display: es un saludo, no un titular
     de campaña, y compite con una rejilla de opciones justo debajo. */
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--i-txt-1);
  text-wrap: balance;
}

.asv-sub {
  margin: 0;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--i-txt-3);
  text-wrap: pretty;
}

/* Rejilla 2x2 en escritorio. */
.asv-sugerencias {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.asv-sug {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 78px;
  padding: 14px 16px;
  border-radius: var(--asv-r-md);
  border: 1px solid var(--i-brd-09);
  background: var(--i-glass-bg);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.asv-sug:hover {
  border-color: var(--asv-azul-brd-fuerte);
  background: var(--asv-azul-sup-2);
  transform: translateY(-1px);
}

.asv-sug-et {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--asv-azul);
}

.asv-sug-tx {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--i-txt-2);
}

/* --- 7. Hilo de conversación ---------------------------------------------- */

.asv-hilo {
  max-width: var(--asv-col);
  margin: 0 auto;
  padding: 24px 22px 8px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.asv-turno { display: flex; flex-direction: column; gap: 12px; }

/* Pregunta del usuario: a la derecha, en la superficie de acento. */
.asv-msg-usuario {
  align-self: flex-end;
  max-width: 84%;
  padding: 11px 14px;
  border-radius: var(--asv-r-md) var(--asv-r-md) var(--asv-r-xs) var(--asv-r-md);
  background: var(--asv-azul-sup);
  border: 1px solid var(--asv-azul-brd);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--i-txt-1);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.asv-firma {
  display: flex;
  align-items: center;
  gap: 9px;
}

.asv-firma-icono {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--asv-r-xs);
  background: var(--asv-azul-sup);
  border: 1px solid var(--asv-azul-brd);
  color: var(--asv-azul);
}

.asv-firma-icono svg { width: 12px; height: 12px; }

.asv-firma-txt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--i-txt-5);
}

.asv-msg-bot {
  font-size: 14px;
  line-height: 1.65;
  color: var(--i-txt-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Las cifras dentro del párrafo van en monoespaciada: aquí el mono no es
   disfraz de "técnico", es que un importe se lee y se compara mejor con cifras
   de ancho fijo. Lo marca escribirConCifras() en js/asistente-ventana.js.

   El color se queda en el tono de texto fuerte, sin verde ni rojo: quién es
   bueno y quién es malo lo dice el SERVIDOR en la tarjeta de cifras (`tono`),
   y pintar de verde un importe del párrafo por nuestra cuenta sería inventar
   ese juicio a base de buscar cadenas. */
.asv-cifra {
  font-family: var(--font-mono);
  font-size: 0.94em;
  color: var(--i-txt-1);
}

.asv-msg-accion,
.asv-msg-error {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 13px;
  border-radius: var(--asv-r);
  font-size: 13px;
  line-height: 1.5;
}

.asv-msg-accion {
  background: var(--i-verde-sup-2);
  border: 1px solid var(--i-verde-line-2);
  color: var(--i-txt-2);
}

.asv-msg-error {
  background: var(--danger-surface);
  border: 1px solid var(--danger-line);
  /* Era #ffb4ae: un rojo aclarado para leerse sobre negro. Sobre la superficie
     clara de aviso desaparecia. El token sirve en los dos temas. */
  color: var(--danger);
}

.asv-msg-accion svg,
.asv-msg-error svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }
.asv-msg-accion svg { color: var(--green); }
.asv-msg-error svg  { color: var(--danger); }

.asv-enlace { color: var(--asv-azul); text-decoration: none; }
.asv-enlace:hover { text-decoration: underline; }

/* --- 8. Indicador de trabajo ---------------------------------------------- */

.asv-pensando {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--i-txt-4);
}

.asv-pensando-puntos { display: inline-flex; gap: 3px; }

.asv-pensando-puntos i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--asv-azul);
  animation: asvPunto 1.1s ease-in-out infinite;
}

.asv-pensando-puntos i:nth-child(2) { animation-delay: 0.15s; }
.asv-pensando-puntos i:nth-child(3) { animation-delay: 0.3s; }

@keyframes asvPunto {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-2px); }
}

/* --- 9. Bloque: tabla de partidas ----------------------------------------- */

.asv-bloque {
  border: 1px solid var(--i-brd-09);
  border-radius: var(--asv-r-md);
  background: var(--i-glass-bg);
  overflow: hidden;
}

.asv-bloque-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--i-brd-07);
}

.asv-bloque-tit {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.asv-bloque-et {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--i-txt-5);
}

.asv-bloque-sub {
  font-size: 13px;
  color: var(--i-txt-2);
}

.asv-partida {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  border-top: 1px solid var(--i-brd-07);
}

.asv-partida:first-child { border-top: 0; }

.asv-partida-nom {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.asv-partida-eq {
  font-size: 13px;
  color: var(--i-txt-1);
  overflow-wrap: anywhere;
}

.asv-partida-nota {
  font-size: 11.5px;
  color: var(--i-txt-4);
  overflow-wrap: anywhere;
}

.asv-partida-cant,
.asv-partida-precio {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.asv-partida-cant { font-size: 11.5px; color: var(--i-txt-4); }
.asv-partida-precio { font-size: 12.5px; color: var(--i-txt-1); }

.asv-bloque-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 15px;
  background: var(--i-sup-2);
  border-top: 1px solid var(--i-brd-07);
}

.asv-bloque-total {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
}

/* --- 10. Bloque: tarjeta de cifras ---------------------------------------- */

/* Tira de columnas con separadores verticales, como el diseño de escritorio. */
.asv-cifras {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.asv-cifra-celda {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  border-left: 1px solid var(--i-brd-07);
  min-width: 0;
}

.asv-cifra-celda:first-child { border-left: 0; }

.asv-cifra-et {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--i-txt-5);
}

.asv-cifra-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--i-txt-1);
  overflow-wrap: anywhere;
}

.asv-cifra-val.tono-verde { color: var(--green); }
.asv-cifra-val.tono-ambar { color: var(--amber); }
.asv-cifra-val.tono-rojo  { color: var(--danger); }

/* El botón a la sección. En el marcado va al final de la tarjeta; en
   escritorio la rejilla lo sube a la esquina de la cabecera, y en teléfono se
   queda donde está, como barra de ancho completo. Un solo nodo para las dos
   formas. */
.asv-bloque-cifras {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "cab    accion"
    "cifras cifras";
  align-items: center;
}

.asv-bloque-cifras .asv-bloque-cab { grid-area: cab; border-bottom: 0; }
.asv-bloque-cifras .asv-cifras { grid-area: cifras; border-top: 1px solid var(--i-brd-07); }

.asv-bloque-accion {
  grid-area: accion;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  margin-right: 15px;
  padding: 0 12px;
  border-radius: var(--asv-r-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.asv-bloque-accion:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.asv-bloque-accion svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* --- 11. Chips ------------------------------------------------------------ */

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

.asv-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 13px;
  border-radius: var(--asv-r-sm);
  border: 1px solid var(--i-brd-10);
  background: var(--i-sup-1);
  color: var(--i-txt-2);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.asv-chip:hover {
  background: var(--i-sup-3);
  border-color: var(--i-brd-16);
  color: var(--i-txt-1);
}

.asv-chip svg { width: 13px; height: 13px; opacity: 0.75; }

.asv-chip-primario {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.asv-chip-primario:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-ink);
}

/* --- 12. Acciones del mensaje --------------------------------------------- */

.asv-acciones {
  display: flex;
  align-items: center;
  gap: 4px;
  /* Discretas hasta que el cursor entra al turno: son utilidades, no parte de
     la respuesta. En táctil no hay hover, así que ahí se quedan visibles. */
  opacity: 0;
  transition: opacity 0.16s ease;
}

.asv-turno:hover .asv-acciones,
.asv-acciones:focus-within { opacity: 1; }

@media (hover: none) {
  .asv-acciones { opacity: 1; }
}

.asv-accion-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--asv-r-xs);
  border: 0;
  background: transparent;
  color: var(--i-txt-5);
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.asv-accion-btn:hover { background: var(--i-sup-2); color: var(--i-txt-2); }
.asv-accion-btn svg { width: 13px; height: 13px; }

/* --- 13. Composer --------------------------------------------------------- */

/* Sin banda, por lo mismo que la cabecera. */
.asv-pie {
  flex: 0 0 auto;
  padding: 12px 22px 16px;
}

.asv-composer {
  max-width: var(--asv-col);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 13px 10px;
  border-radius: var(--asv-r-lg);
  border: 1px solid var(--i-brd-14);
  background: var(--i-sup-1);
  transition: border-color 0.16s ease;
}

.asv-composer:focus-within { border-color: var(--asv-azul-brd-fuerte); }

/* --- 13 bis. Fichas elegidas ---------------------------------------------
   Lo que el usuario tocó en las tarjetas. Va dentro del composer, encima del
   cuadro, porque es el recibo de sobre qué va a contestar el asistente. */

.asv-elegidos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.asv-elegido {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px 4px 4px 10px;
  border-radius: 999px;
  background: var(--asv-azul-sup);
  border: 1px solid var(--asv-azul-brd);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--asv-azul);
}

.asv-elegido-tx {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asv-elegido-x {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.asv-elegido-x:hover { background: rgba(100, 169, 255, 0.18); }
.asv-elegido-x svg { width: 10px; height: 10px; }

#asvEntrada {
  width: 100%;
  min-width: 0;
  min-height: 24px;
  max-height: 160px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--i-txt-1);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  padding: 0;
}

#asvEntrada::placeholder { color: var(--i-txt-5); }

.asv-composer-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.asv-composer-izq { display: flex; align-items: center; gap: 7px; }

.asv-contexto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 11px;
  border-radius: var(--asv-r-sm);
  border: 1px solid var(--i-brd-10);
  background: var(--i-sup-2);
  color: var(--i-txt-2);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.asv-contexto:hover { background: var(--i-sup-3); border-color: var(--i-brd-16); }
.asv-contexto svg { width: 13px; height: 13px; color: var(--i-txt-5); }

.asv-enviar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: var(--asv-r-sm);
  border: 1px solid transparent;
  background: var(--i-sup-3);
  color: var(--i-txt-5);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.asv-enviar svg { width: 17px; height: 17px; }

/* Se enciende en cuanto hay algo que mandar: es la señal de "ya puedes". */
.asv-enviar:not(:disabled) {
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}

.asv-enviar:not(:disabled):hover { background: var(--accent-hover); }
.asv-enviar:disabled { cursor: default; }

.asv-aviso-legal {
  max-width: var(--asv-col);
  margin: 9px auto 0;
  text-align: center;
  font-size: 11px;
  /* --i-txt-4 y no el gris más apagado del diseño: sobre negro aquel se queda
     en 3.4:1 y este es un aviso legal que tiene que poder leerse. */
  color: var(--i-txt-4);
}

/* --- 14. Barra de dictado ------------------------------------------------- */

.asv-voz-estado {
  max-width: var(--asv-col);
  margin: 0 auto 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border-radius: var(--asv-r);
  background: var(--danger-surface);
  border: 1px solid var(--danger-line);
  font-size: 12.5px;
  color: var(--i-txt-2);
}

.asv-punto-rec {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--danger);
  animation: asvLatido 1.2s ease-in-out infinite;
}

.asv-voz-txt { min-width: 0; overflow-wrap: anywhere; }

.asv-mic.escuchando {
  background: var(--danger-surface);
  border-color: var(--danger-line);
  color: var(--danger);
}

/* --- 16. Aviso flotante --------------------------------------------------- */

.asv-aviso {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 118px;
  z-index: 30;
  max-width: var(--asv-col);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: var(--asv-r-md);
  /* El diseño lo levantaba con una sombra grande; el tema no usa ninguna, así
     que aquí la separación la hace el borde de acento más el desenfoque. */
  border: 1px solid var(--asv-azul-brd-fuerte);
  background: var(--asv-azul-sup-2);
  -webkit-backdrop-filter: var(--i-glass-blur);
  backdrop-filter: var(--i-glass-blur);
  animation: asvSube 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes asvSube {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.asv-aviso-txt { flex: 1; min-width: 0; font-size: 13px; color: var(--asv-azul); }

.asv-aviso-cerrar {
  border: 0;
  background: transparent;
  color: var(--asv-azul);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--asv-r-xs);
}

.asv-aviso-cerrar:hover { background: rgba(100, 169, 255, 0.12); }

/* --- 17. Foco -------------------------------------------------------------
   El tema lo tiene decidido desde hace tiempo: "el foco es un borde azul, no
   un halo" (ises-app.css). Aquí se respeta y no se inventa nada aparte — un
   contorno grueso y separado del elemento, como el que había antes, se comía
   la esquina del cuadro de escribir y no se parecía a nada del resto de la
   app. */

#sectionAsistente :focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* El cuadro de escribir NO lleva anillo propio: su contenedor entero ya se
   ilumina con :focus-within. Dos marcas para el mismo foco es ruido, y además
   la de dentro tapaba la de fuera. */
#asvEntrada:focus,
#asvEntrada:focus-visible {
  outline: none;
  box-shadow: none;
}

/* --- 18. Teléfono --------------------------------------------------------
   El umbral es el mismo de todo el tema (759/760). El diseño móvil colapsa la
   cabecera de tres botones a dos iconos, apila la tarjeta de cifras y manda
   los chips a una tira con scroll. */

@media (max-width: 759px) {
  /* El dock de abajo y las pastillas de arriba se escondían AQUÍ, solo dentro
     del asistente, porque en un teléfono el dock se comía 74 px justo donde va
     el cuadro de escribir. Ese arreglo local se volvió global: ahora el dock no
     existe en teléfono en NINGUNA sección y la navegación es siempre el ☰ (ver
     el bloque 17 de css/ises-app.css). Las dos reglas que había aquí se
     borraron por redundantes. */

  /* Aquí había tres reglas que subían el selector de fondo (Gradiente ·
     Metaballs · Estático) a la esquina de la cabecera, porque dentro del
     asistente su franja propia de 70 px dejaba la cuarta sugerencia debajo del
     cuadro de escribir. Ya no hacen falta: ese selector se mudó al panel de
     apariencia hace tiempo y la .statusbar se quedó sin un solo hijo que
     pintar, así que el bloque 17 del tema la deja a padding cero en todas las
     secciones y la franja no existe en ninguna. */

  /* Cabecera en dos columnas: [título centrado] [＋].

     EL ☰ DE AQUÍ SE VA. Antes era la única salida del Asistente, porque en
     esta sección el dock de abajo se escondía. Ahora el ☰ vive en la cabecera
     de la app, veinte píxeles más arriba y en todas las secciones: tener los
     dos era el mismo icono dos veces, uno encima del otro.

     No se pone en `display: none` sino en `visibility: hidden`: sigue ocupando
     su celda de 38px y es lo que mantiene el título centrado de verdad frente
     al ＋ de la derecha. Oculto así tampoco lo anuncia el lector de pantalla ni
     recibe el tabulador, así que no queda un botón fantasma.

     En ESCRITORIO se queda: allí no hay ☰ en la cabecera (está el riel), y este
     es el que abre el menú. */
  .asv-cabecera {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    padding: 10px 14px;
    gap: 10px;
  }

  #sectionAsistente .asv-menu {
    visibility: hidden;
    pointer-events: none;
  }

  /* La marca de la izquierda cede su sitio al hueco del ☰. */
  .asv-marca { display: none; }

  .asv-cabecera-izq,
  .asv-cabecera-der { display: contents; }

  /* Título y su línea verde, apilados y centrados. */
  .asv-titulos {
    flex-direction: column;
    align-items: center;
    gap: 1px;
    text-align: center;
  }

  .asv-titulo { font-size: 14.5px; max-width: 100%; }

  /* La pastilla pierde su cápsula y se queda en la línea verde de debajo. */
  .asv-pastilla-vivo {
    background: none;
    border: 0;
    padding: 0;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Y "Nueva conversación" se queda en su ＋. */
  .asv-btn-txt { display: none; }
  .asv-kbd { display: none; }
  .asv-btn { padding: 0; width: 38px; justify-content: center; }
  #asvNueva { justify-self: end; }

  .asv-inicio { padding: 30px 16px 24px; gap: 26px; }
  .asv-marca-grande { width: 46px; height: 46px; }
  .asv-marca-grande svg { width: 23px; height: 23px; }
  .asv-sub { font-size: 13px; }

  /* Una columna: en 375px dos tarjetas dejan la pregunta en cinco renglones. */
  .asv-sugerencias { grid-template-columns: minmax(0, 1fr); }
  .asv-sug { min-height: 62px; padding: 12px 14px; }

  .asv-hilo { padding: 18px 16px 8px; gap: 18px; }
  .asv-msg-usuario { max-width: 88%; }

  /* Las cifras se apilan: tres columnas en 375px dejan "$1,168.62" partido. */
  .asv-cifras { grid-auto-flow: row; grid-auto-columns: auto; }
  .asv-cifra-celda {
    border-left: 0;
    border-top: 1px solid var(--i-brd-07);
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 15px;
  }
  .asv-cifra-celda:first-child { border-top: 0; }
  .asv-cifra-val { font-size: 17px; }

  /* El botón deja de ser una pastilla en la esquina y pasa a ser la barra del
     pie, de ancho completo: es lo que se aprobó y además es lo único cómodo de
     tocar con el pulgar. */
  .asv-bloque-cifras { display: flex; flex-direction: column; }

  .asv-bloque-accion {
    margin: 0;
    height: auto;
    min-height: 50px;
    padding: 12px 15px;
    justify-content: space-between;
    border: 0;
    border-top: 1px solid var(--asv-azul-brd);
    border-radius: 0;
    background: var(--asv-azul-sup-2);
    color: var(--i-txt-2);
  }

  .asv-bloque-accion:hover { background: var(--asv-azul-sup); border-color: var(--asv-azul-brd); }
  .asv-bloque-accion svg { color: var(--asv-azul); }

  /* Tira horizontal, como el diseño móvil. */
  .asv-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .asv-chips::-webkit-scrollbar { display: none; }
  .asv-chip { flex: 0 0 auto; min-height: 40px; }

  /* Sin hover en táctil, las acciones del mensaje serían inalcanzables si se
     quedaran; se ocultan y el chat gana el ancho. */
  .asv-acciones { display: none; }

  /* Sin dock debajo, el composer solo tiene que respetar el borde seguro del
     teléfono (la barra de gestos). */
  .asv-pie { padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .asv-aviso { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }

  .asv-aviso { left: 14px; right: 14px; }
}

/* --- 19. Menos movimiento ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .asv-pastilla-vivo::before,
  .asv-punto-rec,
  .asv-pensando-puntos i,
  .asv-btn-icono.hablando svg { animation: none; }

  .asv-aviso { animation: none; }

  .asv-sug:hover { transform: none; }
}