/* ===========================================================================
   Burbuja de conversacion — Revista Capitalia
   ---------------------------------------------------------------------------
   Archivo aparte de capitalia.css a proposito. La hoja principal define el
   sistema visual del medio y se rehace entera en cada rediseno; la burbuja es
   una pieza que puede apagarse desde config.py sin tocar nada mas. Mezclarlas
   obligaria a editar la hoja del sitio para quitar una funcion.

   Usa las mismas fichas de diseno (--rojo, --tinta, --serif, --sans-cnd) que
   declara capitalia.css en :root, asi que no repite ningun color ni ninguna
   fuente. Si manana cambia el rojo del medio, cambia el de la burbuja.

   REVERSION: poner BURBUJA_ACTIVA = False en config.py. Para quitarla del
   todo, borrar este archivo y la linea del <link> en base.html.
   =========================================================================== */

/* --- 1. Lo oculto, oculto ------------------------------------------------- */

/* El atributo `hidden` del HTML vale display:none, pero lo pone el navegador
   con la especificidad mas baja que existe, asi que cualquier regla nuestra
   con `display: flex` se lo lleva por delante. Sin estas dos lineas el panel
   se veia abierto de entrada, encima del articulo, y el boton quedaba detras:
   el HTML decia hidden y el CSS lo estaba ignorando.
   Con !important porque es justo lo que !important es para: una regla que no
   debe poder perder nunca. */
.burbuja[hidden],
.burbuja-panel[hidden] { display: none !important; }

/* --- 2. Medidas propias --------------------------------------------------- */

.burbuja {
  /* El margen es el mismo arriba y a los lados en pantalla grande, y se
     reduce en telefono, donde cada pixel del borde cuenta. */
  --burbuja-margen: 20px;
  /* Ancho deseado, pero nunca mas de lo que quepa: en una ventana angosta de
     escritorio (o un movil en horizontal) 384px fijos se salian por el lado. */
  --burbuja-ancho: min(384px, calc(100vw - var(--burbuja-margen) * 2));
  --burbuja-alto: 560px;
  --burbuja-radio: 14px;
  /* Alto util de la ventana. `dvh` es el alto que de verdad se ve: en Safari de
     iPhone `vh` incluye la barra de direcciones aunque este ocupando pantalla,
     asi que con `vh` el panel quedaba cortado por abajo y el boton de enviar
     no se alcanzaba. La primera linea es el respaldo para navegadores viejos
     que no entienden dvh; la segunda gana donde si se entiende. */
  --burbuja-ventana: 100vh;
  --burbuja-ventana: 100dvh;
  --burbuja-sombra: 0 4px 24px rgba(12, 12, 12, 0.14),
                    0 1px 3px rgba(12, 12, 12, 0.10);

  position: fixed;
  /* Se suma el area segura para que el boton no quede debajo de la barra de
     gestos del iPhone ni del borde curvo en horizontal. En cualquier otro
     equipo estos valores son cero y no cambian nada. */
  right: calc(var(--burbuja-margen) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--burbuja-margen) + env(safe-area-inset-bottom, 0px));
  /* Por encima de la cabecera del sitio, que es sticky, pero sin recurrir a
     un numero absurdo: 60 deja sitio de sobra por debajo si algun dia entra
     un aviso de galletas o una barra de suscripcion. */
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--sans);
}

/* --- 3. El boton ---------------------------------------------------------- */

.burbuja-boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px 11px 15px;
  border: 0;
  border-radius: 999px;
  background: var(--rojo);
  color: #fff;
  font-family: var(--sans-cnd);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: var(--burbuja-sombra);
  /* La transicion es corta a proposito. Un boton que tarda en responder al
     raton se siente lento, y la velocidad es justo el argumento de esta
     pieza. */
  transition: background 0.14s ease, transform 0.14s ease;
}

/* El :hover de este boton vive en la seccion de equipos tactiles, envuelto en
   una consulta que exige raton. Puesto aqui suelto, el navegador de un
   telefono lo aplica al tocar y lo deja pegado: el boton se quedaba oscuro
   despues de cerrar el panel, como si estuviera trabado. */
.burbuja-boton:active { transform: translateY(1px); }

.burbuja-boton:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

.burbuja-boton-icono { display: inline-flex; }

/* El nombre dibujado dentro del boton cerrado.

   22px es el limite medido: por debajo de ahi la cursiva amarilla empieza a
   cerrarse sobre si misma y "alo" se lee como una mancha. A 22px el nombre
   ocupa 80px de ancho y el boton entero queda en unos 120 x 48, practicamente
   la misma huella que tenia con el texto "Preguntar".

   REVERSION: quitar esta regla y el <img> de _burbuja.html devuelve el boton
   al texto plano; nada mas depende de esto. */
.burbuja-boton-marca {
  display: block;
  height: 22px;
  width: auto;
}

/* Con el panel abierto el boton sobra y estorba: ocupa la esquina y repite una
   accion que ya esta hecha. */
.burbuja[data-abierta] .burbuja-boton { display: none; }

/* --- 4. El panel ---------------------------------------------------------- */

.burbuja-panel {
  display: flex;
  flex-direction: column;
  width: var(--burbuja-ancho);
  /* max-height y no height: en una pantalla baja el panel se encoge en vez de
     salirse por arriba. */
  max-height: min(var(--burbuja-alto), calc(var(--burbuja-ventana) - var(--burbuja-margen) * 2));
  background: var(--papel);
  border: 1px solid var(--caja-borde);
  border-radius: var(--burbuja-radio);
  box-shadow: var(--burbuja-sombra);
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .burbuja-panel { animation: burbuja-entra 0.16s ease-out; }
  @keyframes burbuja-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

.burbuja-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px 12px;
  background: var(--rojo);
  color: #fff;
}

/* El nombre dibujado, en la cabecera del panel.

   POR QUE SE FIJA EL ALTO Y NO EL ANCHO
   El logotipo es un dibujo, no texto: si se le fija el ancho y la caja se
   estrecha, el alto lo sigue y las letras se vuelven ilegibles sin avisar. Al
   fijar el alto, la pieza mantiene siempre el mismo tamano de letra y solo
   varia cuanto ocupa a lo ancho, que es lo que se puede permitir. Medido: a
   30px de alto ocupa 109px de ancho, y la cabecera tiene 384 - 28 de margen
   interior - 34 del boton de cerrar = 322px disponibles. Sobra de largo.

   `display: block` porque una imagen en linea arrastra el espacio bajo la
   linea base y descuadra el margen de abajo de la cabecera. */
.burbuja-marca {
  display: block;
  height: 30px;
  width: auto;
}

.burbuja-titulo {
  margin: 5px 0 0;
  font-family: var(--serif);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.25;
  color: #fff;
  opacity: 0.92;
}

.burbuja-cerrar {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 5px;
  margin: -3px -3px 0 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  opacity: 0.85;
}

.burbuja-cerrar:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); }
.burbuja-cerrar:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* --- El nombre que le puso el lector -------------------------------------- */

/* POR QUE ESTA REGLA EXISTE Y NO SE PUEDE BORRAR.
   El navegador oculta un elemento con el atributo `hidden` con una regla de su
   hoja por defecto, que es la mas debil de todas: cualquier `display` que
   escribamos nosotros la vence. Los tres elementos de abajo llevan display
   propio, asi que sin esto el atributo `hidden` no los esconde.
   Se detecto midiendo: al bautizarlo se veian el logotipo Y el apodo a la vez,
   uno debajo del otro, o sea la cabecera diciendo dos nombres del mismo
   interlocutor. */
.burbuja-marca[hidden],
.burbuja-apodo[hidden],
.burbuja-bautizar[hidden],
.burbuja-fila-nombre[hidden] { display: none; }

/* Los dos botones de la derecha, en fila.
   Sin este contenedor el `justify-content: space-between` de la cabecera
   repartiria el hueco entre tres cosas y el boton de bautizar quedaria flotando
   en la mitad, lejos del de cerrar y sin relacion visible con el. */
.burbuja-cabeza-botones {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 2px;
}

/* Hereda la forma del boton de cerrar a proposito: son dos acciones del mismo
   rango, en el mismo sitio, y darles apariencias distintas sugeriria que una
   pesa mas que la otra. Se dibuja mas apagado porque cerrar se usa siempre y
   bautizar una vez en la vida. */
.burbuja-bautizar {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 5px;
  margin: -3px 0 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  opacity: 0.6;
}

.burbuja-bautizar:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); }
.burbuja-bautizar:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* El apodo, cuando reemplaza al logotipo.

   NO USA LA CURSIVA DE LA MARCA. La Yellowtail es el nombre "Salomon" dibujado
   como pieza de marca; escribir "Beto" con esa letra fingiria que el apodo del
   lector es parte del logotipo del medio. Va en la serif del sitio, que es la
   voz editorial y no la de marca.

   El alto se iguala al del logotipo (30px de dibujo) con line-height, para que
   la cabecera no cambie de altura al bautizarlo y el titulo de abajo no salte.

   Nombres de hasta 40 caracteres caben: medido en la cabecera de 384px quedan
   322px utiles, y 40 caracteres de esta serif a 1.35rem ocupan mas. Por eso el
   ellipsis: se prefiere un nombre cortado con puntos a una cabecera de dos
   lineas que empuja el hilo hacia abajo. */
.burbuja-apodo {
  display: block;
  max-width: 100%;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 30px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* La fila para escribir el nombre. Va entre la cabecera y el hilo, con el
   fondo del papel y una linea abajo para que se lea como una gaveta que se
   abrio y no como parte del primer mensaje. */
.burbuja-fila-nombre {
  padding: 10px 14px 8px;
  background: var(--papel, #f4f1ea);
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}

.burbuja-fila-nombre .burbuja-nota { margin: 6px 0 0; }

/* La etiqueta SI se ve aqui, al contrario que la del campo de preguntas.
   Alla esta escondida para lectores de pantalla porque el placeholder ya dice
   "Escriba su pregunta" y el panel entero es evidente. Aqui no: un campo con la
   palabra "Salomon" en gris no explica que se le puede cambiar el nombre, y sin
   la pregunta escrita el lector no sabe que esta llenando. */
.burbuja-fila-nombre .burbuja-etiqueta {
  position: static;
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 6px;
  clip: auto;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--tinta, #1a1a1a);
}

/* `min-width: 0` porque dentro de un flex un input no se encoge por debajo de
   su ancho por defecto y desbordaria la fila en pantallas angostas.

   SIN BORDE NI CONTORNO PROPIOS, A PROPOSITO.
   La caja que se ve alrededor la dibuja .burbuja-linea, igual que en el campo
   de preguntas, y esa caja ya se enciende cuando algo de adentro tiene el foco.
   Medido en la revision: con borde propio se veian DOS marcos rojos
   concentricos, el de la linea y el del campo, que parecia un error de
   montaje. */
.burbuja-campo-nombre {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 2px;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--tinta, #1a1a1a);
}

/* El sitio pinta un contorno rojo a todo lo que reciba el foco. Aqui sobra:
   la caja de .burbuja-linea ya se enciende, y medido en la revision se veian
   dos marcos rojos, uno redondeado y otro de esquinas rectas, uno dentro del
   otro. Se apaga solo en este campo. */
.burbuja-campo-nombre:focus,
.burbuja-campo-nombre:focus-visible { outline: none; box-shadow: none; }

/* --- 5. El hilo ----------------------------------------------------------- */

.burbuja-hilo {
  flex: 1 1 auto;
  min-height: 0;          /* sin esto flex no deja que el hijo haga scroll */
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Serif en el hilo: lo que se lee aqui es prosa, igual que un articulo. El
     sans queda para la interfaz. */
  font-family: var(--serif);
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--tinta);
  overscroll-behavior: contain;
}

.burbuja-bienvenida-texto {
  margin: 0 0 11px;
  color: var(--tinta-suave);
  font-size: 0.9rem;
}

.burbuja-sugerencias {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.burbuja-sugerencias button {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--caja-borde);
  border-radius: 8px;
  background: var(--caja);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 0.87rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.burbuja-sugerencias button:hover {
  border-color: var(--gris);
  background: #fff;
}

.burbuja-sugerencias button:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 1px;
}

/* --- 6. Los turnos -------------------------------------------------------- */

.burbuja-turno { max-width: 100%; }

.burbuja-turno-lector {
  align-self: flex-end;
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px 12px 3px 12px;
  background: var(--caja);
  border: 1px solid var(--caja-borde);
  font-size: 0.9rem;
  /* La pregunta del lector puede traer una palabra larguisima pegada. Sin
     esto el panel se ensancha y rompe la esquina. */
  overflow-wrap: break-word;
}

.burbuja-turno-medio { align-self: flex-start; width: 100%; }

.burbuja-turno-medio p { margin: 0 0 0.6em; }
.burbuja-turno-medio p:last-child { margin-bottom: 0; }

.burbuja-turno-medio strong { font-weight: 600; }

/* El cursor de escritura. Es la senal de que la respuesta esta llegando: se
   ve desde los 0,5 segundos, mucho antes de que el texto este completo. */
.burbuja-cursor {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 1px;
  vertical-align: -0.12em;
  background: var(--rojo);
}

@media (prefers-reduced-motion: no-preference) {
  .burbuja-cursor { animation: burbuja-late 1s step-end infinite; }
  @keyframes burbuja-late { 50% { opacity: 0; } }
}

/* Los tres puntos de la espera, antes del primer pedazo de texto. */
.burbuja-espera {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px 0;
}

.burbuja-espera span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gris);
}

/* El rotulo de la espera larga, al lado de los puntos. Lo pone burbuja.js
   despues de 1,8 segundos sin respuesta -- ver ESPERA_ROTULO alli. Solo
   aparece en las preguntas de analisis, que son las que tardan. */
.burbuja-pensando {
  margin-left: 7px;
  font-size: 0.78rem;
  /* NO usa var(--gris). Ese gris es #758d99, y sobre el blanco del panel da
     una relacion de contraste de 3,48 a 1. Para texto de este tamano -- 12,5
     px calculados -- la norma WCAG AA pide 4,5 a 1, asi que no pasaba. Este
     tono da 5,68 a 1. Calculado con la formula de luminancia relativa, no a
     ojo. Los puntos siguen con var(--gris): son una forma, no texto, y a las
     formas la norma les pide 3 a 1. */
  color: #556a73;
  /* display en linea pero sin la cursiva ni el tamano que algunos navegadores
     le ponen por defecto al <small>. */
  font-style: normal;
  /* El rotulo no debe partirse en dos lineas ni empujar los puntos. */
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  /* Entra con un desvanecido corto. Sin esto el texto salta de golpe a los
     1,8 segundos y se lee como un error, no como un aviso. */
  .burbuja-pensando { animation: burbuja-rotulo 0.45s ease-out; }
  @keyframes burbuja-rotulo {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .burbuja-espera span { animation: burbuja-punto 1.1s ease-in-out infinite; }
  .burbuja-espera span:nth-child(2) { animation-delay: 0.16s; }
  .burbuja-espera span:nth-child(3) { animation-delay: 0.32s; }
  @keyframes burbuja-punto {
    0%, 70%, 100% { opacity: 0.3; transform: translateY(0); }
    35%           { opacity: 1;   transform: translateY(-3px); }
  }
}

/* --- 7. Citas y avisos ---------------------------------------------------- */

/* Los enlaces a las notas. Van al final de la respuesta, con la regla roja
   fina a la izquierda que el sitio usa para marcar lo que viene del archivo. */
.burbuja-citas {
  margin: 10px 0 0;
  padding: 8px 0 0 10px;
  border-top: var(--regla-fina);
  border-left: 2px solid var(--rojo);
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.burbuja-citas-titulo {
  margin: 0;
  font-family: var(--sans-cnd);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}

.burbuja-cita {
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--gris-claro);
  align-self: flex-start;
}

.burbuja-cita:hover { color: var(--rojo); border-bottom-color: var(--rojo); }

/* Los avisos: cupo agotado, pregunta muy larga, fallo de red. Tono distinto
   del de una respuesta, para que no se confundan con lo que dice el medio. */
.burbuja-aviso {
  align-self: stretch;
  padding: 9px 11px;
  border: 1px solid var(--caja-borde);
  border-left: 2px solid var(--gris);
  border-radius: 0 8px 8px 0;
  background: var(--caja);
  font-family: var(--sans);
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--tinta-suave);
}

/* --- 8. El formulario ----------------------------------------------------- */

.burbuja-fotos-unicas { position: relative; display: inline-flex; flex: 0 0 auto; }
.burbuja-fotos-opciones {
  position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 20;
  min-width: 170px; padding: 6px; border: 1px solid #d4d0c8;
  border-radius: 10px; background: #fff; color: #242424;
  box-shadow: 0 4px 18px #0002;
}
.burbuja-fotos-opciones[hidden] { display: none !important; }
.burbuja-fotos-opciones button {
  display: block; width: 100%; min-height: 44px; padding: 8px 12px;
  border: 0; background: transparent; color: inherit; text-align: left;
  font: inherit; cursor: pointer;
}
.burbuja-fotos-opciones button[hidden] { display: none !important; }
.burbuja-fotos-opciones button:hover,
.burbuja-fotos-opciones button:focus-visible { background: #f0eee9; outline: 2px solid #aaa; }
.burbuja-cita { overflow-wrap: anywhere; }
.burbuja-formulario {
  flex: 0 0 auto;
  padding: 10px 12px 11px;
  border-top: var(--regla-fina);
  background: var(--papel);
}

/* La etiqueta existe para el lector de pantalla; en pantalla la caja ya se
   entiende sola y un rotulo encima solo gasta alto. */
.burbuja-etiqueta {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.burbuja-linea {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 6px 6px 10px;
  border: 1px solid var(--gris-claro);
  border-radius: 10px;
  background: var(--papel);
  transition: border-color 0.14s ease;
}

.burbuja-linea:focus-within { border-color: var(--rojo); }

.burbuja-campo {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 4px 0;
  background: transparent;
  color: var(--tinta);
  font-family: var(--serif);
  /* 16px exactos, y no menos, a proposito. Safari de iPhone hace zoom sobre
     cualquier campo de texto cuya letra mida menos de 16px: el lector tocaba
     el campo y la pagina entera se ampliaba sola, dejando el sitio corrido y
     con barra horizontal. No hay forma de desactivar ese zoom sin prohibir
     tambien el zoom con los dedos, que es un problema de accesibilidad. La
     unica salida correcta es que la letra mida 16px. Se escribe en px y no en
     rem porque el umbral de Safari son 16 pixeles reales: si el lector tiene
     la letra del navegador mas pequena, 1rem seria menos de 16px y el zoom
     volveria. */
  font-size: 16px;
  line-height: 1.4;
  resize: none;
  /* El alto lo ajusta el JS segun lo que se escriba, hasta este tope. Mas
     alla, la caja hace scroll en vez de comerse el hilo. */
  max-height: 96px;
  overflow-y: auto;
}

.burbuja-campo:focus { outline: 0; }
.burbuja-campo::placeholder { color: var(--gris); }

.burbuja-enviar {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 7px;
  border: 0;
  border-radius: 8px;
  background: var(--rojo);
  color: #fff;
  cursor: pointer;
  transition: background 0.14s ease;
}

.burbuja-enviar:hover:not(:disabled) { background: var(--rojo-oscuro); }
.burbuja-enviar:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

.burbuja-enviar:disabled {
  background: var(--gris-claro);
  cursor: default;
}

/* --- 8b. El microfono ------------------------------------------------------

   Icono y etiqueta visibles en una fila propia, sin estrechar el texto.
   Los permisos y cupos de voz siguen resolviendose en el servidor.

   REVERSION: borre esta seccion. El boton hereda el estilo neutro del panel y
   se sigue viendo aceptable. */

.burbuja-microfono {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--gris-claro);
  border-radius: 8px;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  font: 600 14px/1.3 var(--sans);
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}

.burbuja-voz-entrada { margin-top: 10px; }
.burbuja-voz-entrada .burbuja-microfono { width: 100%; }
.burbuja-microfono svg { flex: 0 0 auto; }
.burbuja-voz-ayuda {
  margin: 6px 0 0;
  font: 400 12px/1.4 var(--sans);
  color: var(--tinta-suave);
}

.burbuja-microfono:hover:not(:disabled) {
  border-color: var(--rojo);
  color: var(--rojo);
}

.burbuja-microfono:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}

.burbuja-microfono:disabled {
  color: var(--gris-claro);
  cursor: default;
}

/* Escuchando. El punto amarillo es el mismo amarillo de la marca, y es el unico
   sitio del panel donde late algo: si late en dos lugares el lector no sabe
   cual mirar.

   El latido se anula para quien pidio menos movimiento en su sistema. En ese
   caso el boton se queda encendido fijo, que sigue diciendo lo mismo -- que el
   microfono esta abierto -- sin moverse. */
.burbuja-microfono[data-oyendo] {
  /* El amarillo va escrito y no como variable: el sitio no tiene --amarillo,
     y el unico parecido, --dato-amarillo (#ebb434), es OTRO amarillo, mas
     naranja, que se usa en los tableros de datos. El de Salomon es #f2c200 y
     tiene que ser el mismo de su logotipo. */
  border-color: #f2c200;
  background: #f2c200;
  color: var(--tinta);
}

@media (prefers-reduced-motion: no-preference) {
  .burbuja-microfono[data-oyendo] { animation: burbuja-latido 1.5s ease-in-out infinite; }
}

@keyframes burbuja-latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 194, 0, 0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(242, 194, 0, 0); }
}

/* Conectando: entre el toque y el primer audio pasan uno o dos segundos. Sin
   senal el lector toca otra vez y abre una segunda sala, que le cuesta cupo. */
.burbuja-microfono[data-conectando] {
  border-color: var(--gris-claro);
  color: var(--gris);
  cursor: progress;
}

/* CON QUE VOZ QUIERE QUE LE HABLEN.

   Deliberadamente callado: mismo tamano y mismo gris que la nota legal, sin
   fondo ni marco. Es una preferencia, no una decision que haya que tomar para
   usar la burbuja, y un control vistoso aqui competiria con el campo de
   escribir, que es lo principal.

   El fieldset viene con borde, margen y relleno propios del navegador y hay
   que apagarlos los tres, o abre un marco alrededor.

   REVERSION: si se quita el fieldset de _burbuja.html, estas reglas quedan sin
   uso y se pueden borrar. Nada mas las usa. */
.burbuja-voz-genero {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 8px 2px 0;
  padding: 0;
  border: 0;
  font-family: var(--sans);
  font-size: 0.71rem;
  line-height: 1.35;
  color: var(--gris);
}

/* float en el legend y no display, porque Chrome no aplica display a un legend
   dentro de un fieldset flex y la etiqueta se sale de la fila. */
.burbuja-voz-genero legend {
  float: left;
  padding: 0;
  margin-right: 10px;
}

.burbuja-voz-genero label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

/* 13 px y no el tamano de fabrica: al lado de un texto de 0,71 rem un radio de
   tamano normal se ve enorme. accent-color lo pinta del amarillo de Salomon al
   marcarlo, que es la unica senal de color que necesita. */
.burbuja-voz-genero input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: #f2c200;
  cursor: pointer;
}

.burbuja-nota {
  margin: 7px 2px 0;
  font-family: var(--sans);
  font-size: 0.71rem;
  line-height: 1.35;
  color: var(--gris);
}

/* --- 9. Telefono ---------------------------------------------------------- */

/* Por debajo de 480 px el panel se lleva la pantalla completa. Media pantalla
   con el teclado abierto no deja leer nada. */
@media (max-width: 30rem) {
  .burbuja {
    --burbuja-margen: 12px;
    --burbuja-ancho: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: stretch;
  }

  /* El boton si respeta el area segura; el panel abierto ocupa todo y maneja
     su propio margen interior. */
  .burbuja:not([data-abierta]) {
    bottom: calc(env(safe-area-inset-bottom, 0px));
  }

  .burbuja-boton {
    align-self: flex-end;
    margin: 0 var(--burbuja-margen) var(--burbuja-margen) 0;
  }

  .burbuja[data-abierta] { top: 0; }

  .burbuja-panel {
    width: 100%;
    max-height: none;
    /* Con `height: 100%` el panel media lo que mide su contenedor, y en Safari
       de iPhone eso incluia la franja de la barra de direcciones: el
       formulario quedaba debajo del borde de la pantalla. `dvh` mide lo que
       de verdad se ve y se reajusta cuando la barra se esconde al bajar. */
    height: var(--burbuja-ventana);
    /* En telefono el panel toca los bordes, asi que las esquinas de abajo
       redondeadas dejarian ver el sitio por debajo. */
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .burbuja-hilo { font-size: 1rem; }

  /* iOS mete su barra de gestos justo donde va el boton de enviar. */
  .burbuja-formulario {
    padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
  }
}

/* --- 10. Pantallas bajas y horizontal ------------------------------------- */

/* Un telefono acostado mide poco de alto: 844 x 390 se convierte en 390 de
   alto util, y con el teclado abierto queda en unos 200. La regla de arriba
   solo mira el ancho, asi que un telefono en horizontal caia en el modo de
   escritorio y le tocaba un panel de 560px que no cabia. Aqui se manda por
   alto, no por ancho. */
@media (max-height: 30rem) {
  .burbuja {
    --burbuja-margen: 8px;
    --burbuja-alto: calc(var(--burbuja-ventana) - 16px);
  }

  /* Con tan poco alto, la cabecera y el aviso legal se comen la lectura. Se
     aprietan sin quitarlos: el aviso legal no es opcional. */
  .burbuja-cabeza { padding: 8px 12px 7px; }
  /* Con el telefono acostado la cabecera se aprieta, y el logotipo tiene que
     bajar con ella o se come el alto que le queda a la lectura. */
  .burbuja-marca { height: 24px; }
  .burbuja-titulo { font-size: 0.78rem; margin-top: 3px; }
  .burbuja-hilo { padding: 10px 12px; gap: 9px; }
  .burbuja-campo { max-height: 56px; }
}

/* --- 11. Equipos tactiles -------------------------------------------------- */

/* La distincion que importa no es el tamano de la pantalla sino el dedo. Un
   iPad de 1024px de ancho entra por el camino de escritorio, y ahi un area de
   toque de 32px es demasiado pequena para acertarle. Se mide el puntero, no
   los pixeles. */
@media (pointer: coarse) {
  .burbuja-cerrar { padding: 8px; margin: -6px -6px -6px 0; }
  /* El apodo baja con el logotipo: alla arriba el logotipo pasa de 30 a 24px
     de alto y si el texto se quedara en 30 la cabecera cambiaria de altura al
     bautizarlo, justo en la pantalla donde menos sobra espacio. */
  .burbuja-apodo { font-size: 1.15rem; line-height: 24px; }
  .burbuja-bautizar { padding: 8px; margin: -6px 0 -6px 0; }
  .burbuja-fila-nombre { padding: 9px 12px 7px; }
  .burbuja-enviar { padding: 10px; }
  .burbuja-sugerencia { padding: 9px 12px; }
  /* Los enlaces de cita se tocan con el dedo, no se apuntan con el raton. */
  .burbuja-cita { padding: 3px 0; }
}

/* Sin raton no hay estado de "encima": dejarlo puesto hace que el boton se
   quede iluminado despues de tocarlo, como si estuviera trabado. */
@media (hover: hover) and (pointer: fine) {
  .burbuja-boton:hover { background: var(--rojo-oscuro); }
}

/* --- 12. Impresion --------------------------------------------------------- */

/* Un lector que imprime un articulo no quiere un boton rojo encima del
   texto. */
@media print {
  .burbuja { display: none !important; }
}

/* --- 13. La escena de voz ---------------------------------------------------

   La pantalla que tapa la burbuja mientras el lector habla con Salomon.
   Aparecio el 17 de septiembre de 2026. Antes, hablar solo se veia en el color
   del microfono, y eso no alcanzaba: quien no noto el cambio de color no sabia
   si lo estaban oyendo.

   POR QUE TAPA EL PANEL EN VEZ DE REEMPLAZARLO
   Va en position:absolute dentro de .burbuja-panel, que es position:fixed. Asi
   hereda gratis el tamano, la posicion, el radio de las esquinas y el
   comportamiento en telefono -- donde el panel ya ocupa la pantalla completa.
   El hilo escrito no se borra: sigue debajo, intacto, y vuelve a estar ahi
   cuando el lector cuelga.

   LOS COLORES ESTAN AL REVES QUE EN LA BURBUJA
   Fondo tinta y letra papel, no papel con letra tinta. Es deliberado: el cambio
   de claro a oscuro le dice al lector que entro a otro modo antes de que lea
   una sola palabra, igual que el telefono se pone oscuro en una llamada.

   REVERSION: borrar esta seccion y el bloque de la escena en _burbuja.html.
   --------------------------------------------------------------------------- */

.burbuja-escena[hidden] { display: none !important; }

.burbuja-escena {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 28px 24px 24px;
  /* Tres capas, no un color plano. El halo rojo detras del orbe da la
     sensacion de que la luz sale de la esfera; la rejilla de 22px se ve apenas
     y es lo que hace que la pantalla se lea como instrumento y no como fondo
     de color. Van en background y no en pseudoelementos para que el
     border-radius:inherit las recorte solo. */
  background:
    radial-gradient(circle at 50% 34%, rgba(216, 30, 5, 0.16) 0%, rgba(216, 30, 5, 0) 58%),
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 22px 100%,
    linear-gradient(#12141a 0%, #0c0d11 100%);
  border-radius: inherit;
  font-family: var(--sans);
  text-align: center;
  /* El fondo entra con una transicion corta para que no parezca un corte de
     imagen. Se respeta prefers-reduced-motion mas abajo. */
  animation: burbuja-escena-entra 0.22s ease-out both;
}

@keyframes burbuja-escena-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- 13a. El orbe ----------------------------------------------------------

   Un nucleo y tres anillos. El nucleo crece con la voz del LECTOR; los anillos
   salen hacia afuera cuando habla SALOMON. Son dos movimientos distintos a
   proposito: asi se ve quien tiene la palabra sin leer nada.

   La escala la escribe burbuja-voz.js en la variable --burbuja-nivel, medida
   con un analizador sobre el audio real. Aqui solo se decide como se ve.
   --------------------------------------------------------------------------- */

.burbuja-escena-orbe {
  position: relative;
  width: 168px;
  height: 168px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

/* EL LIENZO DEL ESPECTRO.

   Se sale del orbe con inset negativo en PORCENTAJE, no en pixeles, para que
   siga al orbe cuando se encoge en telefono sin necesitar otra regla. -46% de
   168px son 77px por lado: el lienzo mide 322px y los rayos caben enteros.

   Va DEBAJO del nucleo y del aro (z-index 0 contra 1 y 2) porque el aro es el
   dato -- el cupo -- y el espectro es la voz: si un rayo fuerte tapara el aro,
   taparia lo unico de esa pantalla que el lector necesita leer.

   pointer-events none porque el lienzo cubre parte del panel y sin esto se
   comeria los toques que van a los botones de abajo. */
.burbuja-escena-lienzo {
  position: absolute;
  /* MEDIDO, NO SUPUESTO. La primera version usaba inset:-46% con width:auto,
     confiando en que la caja se estiraria entre los cuatro lados. No lo hace:
     el orbe es un grid con place-items:center, y eso le pone place-self:center
     a los hijos absolutos, que entonces se quedan en su tamaño intrinseco --
     un canvas sin medidas mide 300x150 -- y se centran. Medido el 17 de
     septiembre de 2026: la caja salia 300x150, rectangular, y el dibujo
     circular quedaba aplastado y descentrado.
     Por eso las medidas van explicitas. 192% de 168px son 322px. */
  top: -46%;
  left: -46%;
  width: 192%;
  height: 192%;
  z-index: 0;
  pointer-events: none;
}

.burbuja-escena-nucleo {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  /* El brillo esta arriba a la izquierda y la sombra abajo a la derecha, que es
     como cae la luz en el resto de la revista. El inset blanco de una linea es
     el reflejo del borde: sin el, la esfera se ve pegada al fondo. */
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 38% 32%, #ff7b60 0%, #e42a0c 46%, #8e1203 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.45),
    inset 0 -10px 18px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 14px 44px rgba(216, 30, 5, 0.38);
  /* --burbuja-nivel va de 0 a 1 y lo escribe el JS en cada cuadro. El 0.18 es
     cuanto crece el orbe a volumen maximo: medido a ojo sobre voz normal,
     mas que eso se ve aparatoso y menos no se nota. */
  transform: scale(calc(1 + var(--burbuja-nivel, 0) * 0.18));
  transition: transform 0.08s linear;
}

/* Respirar. Solo cuando nadie habla, para que el orbe no parezca congelado
   mientras Salomon piensa. Se apaga en cuanto hay voz, mas abajo. */
@media (prefers-reduced-motion: no-preference) {
  .burbuja-escena-nucleo { animation: burbuja-escena-respira 3.4s ease-in-out infinite; }
}

/* La respiracion mueve solo el resplandor de fuera. Las dos sombras interiores
   se repiten identicas en los dos fotogramas porque box-shadow se anima como
   lista completa: si se omiten, el reflejo del borde desaparece a mitad del
   ciclo y la esfera se aplana. */
@keyframes burbuja-escena-respira {
  0%, 100% {
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.45),
      inset 0 -10px 18px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(255, 255, 255, 0.07),
      0 12px 38px rgba(216, 30, 5, 0.28);
  }
  50% {
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.45),
      inset 0 -10px 18px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(255, 255, 255, 0.12),
      0 16px 52px rgba(216, 30, 5, 0.52);
  }
}

/* --- El aro del cupo ------------------------------------------------------ */

.burbuja-escena-aro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* -90 grados para que el arco arranque arriba y no a la derecha, que es donde
     empieza un circulo de SVG por defecto. */
  transform: rotate(-90deg);
  pointer-events: none;
}

.burbuja-escena-aro-pista,
.burbuja-escena-aro-cupo,
.burbuja-escena-aro-busca { fill: none; stroke-linecap: round; }

.burbuja-escena-aro-pista {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 2;
}

.burbuja-escena-aro-cupo {
  stroke: #f2c200;
  stroke-width: 2.5;
  /* 496.4 es la vuelta completa (2 x pi x 79). El JS mueve el offset. Empieza
     escondido del todo para que no se vea un aro entero un instante antes de
     que el servidor diga cuantos minutos concedio. */
  stroke-dasharray: 495.6;
  stroke-dashoffset: 495.6;
  transition: stroke-dashoffset 0.9s linear, stroke 0.3s ease;
  /* El navegador mide la vuelta en 495,6 y no en los 496,4 de la formula: el
     trazo de 2,5 corre por el centro del borde. Con el numero de la formula el
     aro no cerraba del todo y quedaba una muesca arriba. */
}

/* En el ultimo minuto el aro se pone rojo, igual que el reloj. Un solo cambio
   de color en dos sitios a la vez es mas facil de notar que dos avisos. */
.burbuja-escena-aro-cupo[data-poco] { stroke: #ff4a2e; }

/* El arco que busca. 40 de trazo sobre 496 de vuelta es un octavo de circulo:
   suficiente para verse girar, poco para confundirse con el cupo. */
.burbuja-escena-aro-busca {
  stroke: rgba(242, 194, 0, 0.85);
  stroke-width: 2.5;
  stroke-dasharray: 40 455.6;
  opacity: 0;
  transform-origin: 84px 84px;
}

@media (prefers-reduced-motion: no-preference) {
  .burbuja-escena[data-fase="conectando"] .burbuja-escena-aro-busca {
    opacity: 1;
    animation: burbuja-escena-busca 1.1s linear infinite;
  }
}

@keyframes burbuja-escena-busca {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- La etiqueta de modo -------------------------------------------------- */

.burbuja-escena-marca {
  margin: 22px 0 0;
  font-family: var(--sans-cnd);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

/* Un punto delante que toma el color de quien habla. Es el unico sitio de la
   escena donde el turno se dice sin depender del tamano del orbe. */
.burbuja-escena-marca::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.12em;
}

.burbuja-escena[data-quien="lector"]  .burbuja-escena-marca { color: #f2c200; }
.burbuja-escena[data-quien="salomon"] .burbuja-escena-marca { color: #ff6a52; }
.burbuja-escena[data-silencio]        .burbuja-escena-marca { color: rgba(255, 255, 255, 0.30); }

.burbuja-escena-onda {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Blanco calido, NO amarillo. Los anillos eran amarillos para verse contra el
     rojo del orbe, pero al añadir el aro de cupo -- que tambien es amarillo --
     los dos se confundian y no se distinguia el medidor de las ondas. Se vio en
     la lamina de estados del 17 de septiembre de 2026. Ahora el amarillo
     significa una sola cosa en la escena: el tiempo que le queda. */
  border: 2px solid rgba(255, 248, 236, 0.80);
  opacity: 0;
  pointer-events: none;
}

/* Los anillos solo existen cuando Salomon habla. El escalonado de 0.6s hace
   que salgan uno tras otro y no los tres pegados. */
@media (prefers-reduced-motion: no-preference) {
  .burbuja-escena[data-quien="salomon"] .burbuja-escena-onda {
    animation: burbuja-escena-onda 1.8s ease-out infinite;
  }
  .burbuja-escena[data-quien="salomon"] .burbuja-escena-onda:nth-child(2) { animation-delay: 0.6s; }
  .burbuja-escena[data-quien="salomon"] .burbuja-escena-onda:nth-child(3) { animation-delay: 1.2s; }
  .burbuja-escena[data-quien="salomon"] .burbuja-escena-nucleo { animation: none; }
  .burbuja-escena[data-quien="lector"]  .burbuja-escena-nucleo { animation: none; }
}

/* Arranca en 0.66, que es justo el borde del nucleo (96 de 168 = 0,57), para
   que el anillo se vea salir DE la bola y no atravesarla. Y termina en 1.34,
   pasado el marco del orbe, porque un anillo que se apaga antes del borde
   parece que choco con algo. El orbe tiene sitio: el padding de la escena y el
   margen del texto dejan espacio de sobra. */
@keyframes burbuja-escena-onda {
  0%   { transform: scale(0.66); opacity: 0.85; }
  70%  { opacity: 0.30; }
  100% { transform: scale(1.34); opacity: 0; }
}

/* Cuando habla el lector, el nucleo se vuelve amarillo por dentro. El amarillo
   es el color de la marca de Salomon y aqui significa "su turno". */
.burbuja-escena[data-quien="lector"] .burbuja-escena-nucleo {
  background: radial-gradient(circle at 34% 30%, #ffe48a 0%, #f2c200 48%, #c79c00 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10),
              0 10px 34px rgba(242, 194, 0, 0.34);
}

/* Conectando: el orbe se apaga a gris y late despacio. Todavia no hay nadie al
   otro lado y el color rojo prometeria una conversacion que no empezo. */
/* El animation:none no es adorno y se descubrio midiendo. La regla de la
   respiracion pinta box-shadow en cada cuadro, asi que un box-shadow:none
   suelto pierde: el orbe salia gris con halo rojo, prometiendo una
   conversacion que todavia no existia. */
.burbuja-escena[data-fase="conectando"] .burbuja-escena-nucleo {
  background: radial-gradient(circle at 34% 30%, #6b6f76 0%, #45484e 60%, #2c2f34 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
  /* Un latido gris, no la respiracion roja. Revisando la captura el orbe salia
     completamente quieto, y quieto se lee como roto justo en el momento en que
     el lector esta esperando. Late en opacidad para que se vea que algo esta
     pasando sin prometer que ya hay alguien al otro lado. */
  animation: burbuja-escena-espera 1.4s ease-in-out infinite !important;
}

@keyframes burbuja-escena-espera {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.9; }
}

/* ---- MIENTRAS SALOMON TRABAJA -------------------------------------------

   El atributo lo pone burbuja-voz.js al recibir el aviso del agente, y lo
   quita al recibir el cierre. Existe porque una pregunta que obliga a buscar
   en internet tarda 15,7 segundos en soltar la primera palabra -- medido en
   produccion el 23 de septiembre de 2026 -- y en ese hueco la llamada no daba
   ninguna senal de vida.

   Son DOS senales a la vez y a proposito. El texto dice que esta pasando, para
   quien lee; el orbe late, para quien tiene la vista en el orbe y no en el
   texto, que es donde esta puesta la atencion durante una llamada.

   REVERSION: borre este bloque. El rotulo sigue apareciendo en el texto, solo
   pierde el latido y el matiz de color. */
.burbuja-escena[data-trabajando] .burbuja-escena-estado {
  /* Un hueso mas apagado que el #f4f1ea normal, para que el rotulo se lea
     como un estado de paso y no como una respuesta. Sobre el fondo oscuro de
     la escena (#1b1d21) este tono da 9,8 a 1 de contraste, muy por encima del
     4,5 que pide la norma WCAG AA. Calculado con la formula de luminancia
     relativa, no elegido a ojo. */
  color: #d8d2c4;
}

/* El orbe late en gris mientras trabaja, igual que cuando conecta. Se reusa el
   keyframe de arriba en vez de escribir otro: es la misma idea -- algo esta
   pasando y todavia no hay voz -- y tenerlo dos veces solo daria dos sitios
   donde cambiar el ritmo. */
@media (prefers-reduced-motion: no-preference) {
  .burbuja-escena[data-trabajando] .burbuja-escena-nucleo {
    animation: burbuja-escena-espera 1.4s ease-in-out infinite;
  }
}

/* Microfono cerrado por el lector: el orbe pierde el color. La sala sigue
   abierta, y eso lo dice el texto de estado. */
.burbuja-escena[data-silencio] .burbuja-escena-nucleo {
  background: radial-gradient(circle at 34% 30%, #6b6f76 0%, #45484e 60%, #2c2f34 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: none;
  /* Aqui SI se queda quieto, y es distinto del caso de arriba: conectando es
     esperar, y silencio es una decision tomada. Un orbe latiendo diria que algo
     sigue pasando con su microfono, cuando lo que pasa es que esta cerrado. */
  animation: none !important;
  opacity: 0.75;
}

/* Con el microfono cerrado no salen anillos aunque Salomon siga hablando: el
   orbe apagado y unos anillos vivos serian dos mensajes contrarios. */
.burbuja-escena[data-silencio] .burbuja-escena-onda { animation: none !important; opacity: 0; }

/* --- 12b. Los textos ------------------------------------------------------- */

.burbuja-escena-estado {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.3;
  color: #f4f1ea;
  min-height: 1.3em;
}

.burbuja-escena-reloj[hidden] { display: none !important; }

.burbuja-escena-reloj {
  margin: 8px 0 0;
  font-size: 12px;
  font-family: var(--sans-cnd);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  /* tabular-nums fija el ancho de cada cifra. Sin esto el reloj tiembla cada
     segundo, porque el 1 es mas angosto que el 8 y la linea entera se recoloca
     una vez por segundo durante seis minutos. */
  font-variant-numeric: tabular-nums;
  color: rgba(244, 241, 234, 0.46);
}

/* El ultimo minuto en amarillo. No es alarma: es aviso de que conviene
   redondear la idea antes de que la sala se cierre sola. */
.burbuja-escena-reloj[data-poco] { color: #ff6a52; }

.burbuja-escena-pie {
  margin: 22px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(244, 241, 234, 0.42);
  max-width: 24em;
}

/* --- 13c. Los mandos ------------------------------------------------------- */

.burbuja-escena-mandos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 30px;
}

.burbuja-escena-mandos button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: #f4f1ea;
  /* Vidrio, no relleno plano. El degradado de arriba a abajo mas el inset
     blanco imitan una pieza con canto, que es lo que separa un boton de un
     circulo de color. El backdrop-filter recoge el halo rojo del fondo, asi
     que los mandos se tinen solos segun donde caigan sobre la escena. */
  background: linear-gradient(rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045));
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.1s ease;
}

/* Los tres mandos pequenos miden igual. Colgar es el unico que rompe la
   escala, y esa diferencia es la que lo hace encontrable sin leer. La camara
   se suma aqui el 20-09-2026 y no trae medida propia a proposito: un cuarto
   boton con tamano distinto convertiria la fila en cuatro cosas sueltas. */
.burbuja-escena-silencio,
.burbuja-escena-camara,
.burbuja-escena-escribir { width: 48px; height: 48px; }

/* Mientras la foto sube. Sin esto, tocar dos veces manda la misma foto dos
   veces y Salomon la comenta dos veces. */
.burbuja-escena-camara[disabled] {
  opacity: 0.45;
  cursor: default;
}

.burbuja-escena-mandos button:hover {
  background: linear-gradient(rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.09));
  border-color: rgba(255, 255, 255, 0.22);
}
.burbuja-escena-mandos button:active { transform: translateY(1px); }

.burbuja-escena-mandos button:focus-visible {
  outline: 2px solid #f2c200;
  outline-offset: 2px;
}

/* Colgar: mas grande y el unico rojo lleno. Es lo que se busca con prisa. */
.burbuja-escena-colgar {
  width: 62px;
  height: 62px;
  background: linear-gradient(#f0350f, #b81904) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30),
              0 8px 22px rgba(216, 30, 5, 0.42);
  color: #fff;
}

.burbuja-escena-colgar:hover { background: #b81904 !important; border-color: #b81904 !important; }

/* El tachon del microfono solo se dibuja cuando esta cerrado. Dejarlo siempre
   visible diria lo contrario de lo que pasa. */
.burbuja-escena-tachon,
.burbuja-escena-tachon-borde { opacity: 0; transition: opacity 0.14s ease; }

/* El reborde va del color del BOTON, no del icono: su trabajo es abrir un hueco
   en la capsula rellena para que la diagonal se distinga. Si fuera currentColor
   seria una raya gorda y taparia el microfono entero. El valor es el fondo del
   boton silenciado ya mezclado: amarillo al 18% sobre el oscuro de la escena.
   Va escrito plano porque un rgba translucido dejaria ver la capsula debajo, y
   entonces no abriria hueco ninguno. */
.burbuja-escena-tachon-borde { stroke: #262319; }

.burbuja-escena[data-silencio] .burbuja-escena-tachon,
.burbuja-escena[data-silencio] .burbuja-escena-tachon-borde { opacity: 1; }

.burbuja-escena[data-silencio] .burbuja-escena-silencio {
  background: rgba(242, 194, 0, 0.18);
  border-color: rgba(242, 194, 0, 0.55);
  color: #f2c200;
}

/* VOZ POR TURNOS (BURBUJA_VOZ_PULSAR). Dos botones en forma de pastilla; sin la
   bandera no existen en la pagina. */
[data-voz-pulsar] .burbuja-escena-mandos { flex-wrap: wrap; }
.burbuja-escena-mandos .burbuja-escena-turnos,
.burbuja-escena-mandos .burbuja-escena-pulsar {
  border-radius: 24px;
  min-height: 48px;
  padding: 0 18px;
  font: inherit;
  font-size: 14px;
}
.burbuja-escena-mandos .burbuja-escena-turnos[aria-pressed="true"] {
  background: rgba(242, 194, 0, 0.18);
  border-color: rgba(242, 194, 0, 0.55);
  color: #f2c200;
}
.burbuja-escena-mandos .burbuja-escena-pulsar {
  flex-basis: 100%;
  max-width: 320px;
  min-height: 64px;
  font-size: 16px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.burbuja-escena-mandos .burbuja-escena-pulsar[hidden] { display: none; }
.burbuja-escena-mandos .burbuja-escena-pulsar[data-hablando] {
  background: rgba(227, 18, 11, 0.35);
  border-color: rgba(227, 18, 11, 0.8);
  transform: scale(0.98);
}

/* --- 12d. En telefono ------------------------------------------------------

   El panel ya ocupa la pantalla completa ahi, asi que la escena no necesita
   reglas de posicion. Solo se encoge el orbe, porque 168px en una pantalla
   angosta empuja los mandos fuera de la vista.
   --------------------------------------------------------------------------- */

@media (max-width: 480px), (pointer: coarse) {
  .burbuja-escena { padding: 20px 18px 18px; }
  .burbuja-escena-orbe { width: 148px; height: 148px; }
  .burbuja-escena-nucleo { width: 84px; height: 84px; }
  .burbuja-escena-estado { font-size: 18px; margin-top: 8px; }
  .burbuja-escena-marca { margin-top: 18px; }
  .burbuja-escena-mandos { gap: 16px; margin-top: 26px; }
}

/* Pantallas muy bajas -- telefono en horizontal, o teclado abierto. Se
   sacrifica el orbe antes que los mandos: sin botones la llamada no se puede
   terminar, y eso si es un problema. */
@media (max-height: 420px) {
  .burbuja-escena-orbe { width: 96px; height: 96px; }
  .burbuja-escena-nucleo { width: 58px; height: 58px; }
  .burbuja-escena-estado { font-size: 16px; margin-top: 6px; }
  .burbuja-escena-marca { margin-top: 12px; font-size: 10px; }
  .burbuja-escena-mandos { margin-top: 16px; }
  .burbuja-escena-pie { display: none; }
}

/* LOS ANILLOS DE PULSO SE APAGAN CUANDO DIBUJA EL ESPECTRO.

   Los tres anillos existian para decir "hay sonido". El espectro dice lo
   mismo y con mucho mas detalle, asi que juntos solo se estorban: medido en
   pantalla, los anillos blancos cruzan por encima de los rayos y ensucian la
   lectura. Se apagan en cuanto hay un medidor vivo -- eso lo marca el atributo
   data-espectro, que pone burbuja-voz.js -- y vuelven si no hay medidor, que
   es el caso del telefono sin permiso de microfono.

   MEDIDO: la primera version puso esta regla ANTES de las de los anillos y no
   surtio efecto -- las de abajo, de igual especificidad, ganaban por orden, y
   ademas la animacion segui viva. Va al final del archivo y con !important en
   los dos valores, igual que la regla de silencio de la linea 1180.

   REVERSION: borrar este bloque y los anillos vuelven a convivir con el
   espectro, sin romper nada mas. */
.burbuja-escena[data-espectro] .burbuja-escena-onda {
  opacity: 0 !important;
  animation: none !important;
}

/* --- 13g. LA LLAMADA CON EL HILO A LA VISTA --------------------------------

   QUE PROBLEMA RESUELVE. La escena de voz se pintaba con inset:0 sobre el
   panel entero, asi que durante la llamada el lector no veia nada mas que el
   orbe. El hilo seguia vivo debajo -- lo hablado ya se escribia ahi, ver
   escribirLoHablado en burbuja-voz.js -- pero tapado. Y una grafica no se
   puede oir: si Salomon dibujaba durante la llamada, el dibujo no tenia donde
   aparecer.

   COMO SE RESUELVE. No se construye un chat nuevo dentro del modal. Se deja
   de tapar el que ya existe: con la clase burbuja-hablando en el panel, la
   escena sale del apilado absoluto y pasa a ser una franja mas del panel, por
   encima del hilo. El hilo y el formulario recuperan su sitio y su scroll sin
   una sola regla nueva, porque el panel siempre fue un flex en columna.

   EL ORBE SE ENCOGE, NO SE ESCONDE. Es la senal de que la llamada sigue viva
   y de quien tiene la palabra. Se queda en 64px, que es el tamano al que el
   espectro todavia se lee y no se come la mitad del panel.

   REVERSION: borre este bloque entero. La escena vuelve a cubrir el panel y
   el boton de escribir cuelga, como antes del 22-09-2026.
   --------------------------------------------------------------------------- */

/* EL ORDEN. La escena es el ULTIMO hijo del panel en el HTML, porque cuando
   flota encima con inset:0 tiene que ir al final para quedar arriba en el
   apilado sin pelear con z-index. Al volverse una franja normal eso la dejaba
   debajo del formulario, al pie de todo. Se recoloca con order en vez de
   mover el HTML: mover el div rompe el apilado de la escena grande, que es el
   montaje principal. Numeros negativos para la cabecera y el nombre, de modo
   que el hilo, el aviso, el adjunto y el formulario se queden en 0 y sigan en
   el orden del documento. */
.burbuja-panel.burbuja-hablando .burbuja-cabeza { order: -3; }
.burbuja-panel.burbuja-hablando .burbuja-fila-nombre { order: -2; }

/* Durante la llamada el selector de hombre/mujer sobra: ya se esta hablando,
   y cambiarlo a mitad de conversacion no surte efecto hasta la siguiente.
   Ocupaba una linea entera entre el campo y el pie. */
.burbuja-panel.burbuja-hablando .burbuja-voz-genero { display: none; }

.burbuja-panel.burbuja-hablando .burbuja-escena {
  order: -1;
  position: static;
  inset: auto;
  flex: 0 0 auto;
  /* El borde inferior separa la franja del hilo. Sin el, el degradado oscuro
     y el papel del hilo se tocan y parece un corte de imagen. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  padding: 12px 16px 12px;
  /* En franja los elementos van en fila: orbe a la izquierda, lo que dice en
     el medio, mandos a la derecha. En vertical no cabria nada. */
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  text-align: left;
}

/* EL ORBE EN 48, NO EN 64. MEDIDO, no elegido a ojo.
   El panel mide 384px. Con orbe de 64, cuatro botones de 38 y los espacios,
   al texto del medio le quedaban 84px: "Salomon responde" salia cortado como
   "Salomon res...". Bajando el orbe a 48 y los botones a 34 el hueco pasa a
   138px y la frase entra entera. */
.burbuja-panel.burbuja-hablando .burbuja-escena-orbe {
  width: 48px;
  height: 48px;
}

.burbuja-panel.burbuja-hablando .burbuja-escena-nucleo {
  width: 30px;
  height: 30px;
}

/* El texto de en medio se agrupa en una columna propia que se estira para
   empujar los mandos contra el borde derecho. */
.burbuja-panel.burbuja-hablando .burbuja-escena-dicho {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

/* La marca dice "SALOMON" en versalitas, y el nombre ya esta en la cabecera
   del panel, dos centimetros mas arriba. En la escena grande hace falta porque
   ahi no se ve la cabecera; en la franja es repetir. Quitandola, el estado --
   que es el dato util: quien tiene la palabra -- deja de salir cortado. */
.burbuja-panel.burbuja-hablando .burbuja-escena-marca { display: none; }

.burbuja-panel.burbuja-hablando .burbuja-escena-estado {
  margin: 0;
  font-size: 13.5px;
  /* Una sola linea. Si el estado crece, la franja saltaria de alto y el hilo
     se moveria debajo mientras se lee. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* El reloj entero en una linea. En la escena grande se parte en dos -- la cifra
   y la palabra "restantes" debajo -- y ahi se lee bien porque hay sitio de
   sobra; en la franja quedaba como dos renglones en versalitas que empujaban la
   altura. Se le quita el espaciado de letras, que es lo que lo hacia no caber. */
.burbuja-panel.burbuja-hablando .burbuja-escena-reloj {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.burbuja-panel.burbuja-hablando .burbuja-escena-mandos {
  margin: 0;
  gap: 6px;
  flex: 0 0 auto;
}

/* 34px de lado. Por debajo de 32 un dedo falla el boton de colgar, que es
   justamente el que nunca puede fallar. */
.burbuja-panel.burbuja-hablando .burbuja-escena-mandos button {
  width: 34px;
  height: 34px;
}

.burbuja-panel.burbuja-hablando .burbuja-escena-mandos button svg {
  width: 16px;
  height: 16px;
}

/* El pie legal y el aro del cupo no caben en la franja. El aviso de que no se
   guarda la grabacion ya lo leyo el lector en la escena grande, antes de
   pasar a esta; no se le esta ocultando nada que no haya visto. */
.burbuja-panel.burbuja-hablando .burbuja-escena-pie { display: none; }

/* En telefono la franja se aprieta un poco mas: el panel es toda la pantalla
   y cada pixel que gana la franja se lo quita al hilo. */
@media (max-width: 480px), (pointer: coarse) {
  .burbuja-panel.burbuja-hablando .burbuja-escena {
    padding: 10px 12px;
    gap: 10px;
  }
  .burbuja-panel.burbuja-hablando .burbuja-escena-orbe { width: 44px; height: 44px; }
  .burbuja-panel.burbuja-hablando .burbuja-escena-nucleo { width: 27px; height: 27px; }
  .burbuja-panel.burbuja-hablando .burbuja-escena-estado { font-size: 12.5px; }
  .burbuja-panel.burbuja-hablando .burbuja-escena-mandos { gap: 5px; }
  /* En telefono NO se bajan de 34: aqui se toca con el dedo, no con el raton. */
  .burbuja-panel.burbuja-hablando .burbuja-escena-mandos button {
    width: 34px;
    height: 34px;
  }
}

/* LA GRAFICA DENTRO DE LA LLAMADA.

   La caja la define el bloque .burbuja-grafica, mas abajo; aqui solo se
   resuelve una diferencia de sitio. En el chat escrito la figura se cuelga del
   TURNO, y el turno es un bloque normal. En la llamada se cuelga del HILO, y
   el hilo es un flex en columna: sin flex-shrink:0 el navegador aplasta la
   figura a dos pixeles de alto para que quepan los turnos de texto. MEDIDO en
   la captura del 22-09-2026, donde el dibujo salia como una raya.

   REVERSION: va con el bloque 13g. */
/* LA FOTO QUE EL LECTOR TOMA DURANTE LA LLAMADA.

   Agregado el 22-09-2026. La pinta pintarFotoDelLector en burbuja-voz.js.

   Las fotos de chat y voz ocupan el ancho completo del hilo, sin un tope de
   altura que reduzca etiquetas o documentos verticales a miniaturas. El hilo
   conserva el desplazamiento para recorrer la imagen sin recortarla.

   flex-shrink 0 por lo mismo que la grafica: el hilo es un flex en columna y
   sin esto el navegador aplasta la figura para que quepan los turnos de texto.

   REVERSION: borre este bloque y el de arriba queda como estaba. */
.burbuja-hilo > .burbuja-foto-hablada {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  /* Mismos valores que .burbuja-grafica, a proposito: las dos cosas que
     aparecen en el hilo de la llamada deben verse como la misma familia. */
  margin: 10px 0 14px;
  padding: 0;
  border: 1px solid #e3e5e8;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  line-height: 0;          /* sin esto queda una franja bajo la imagen */
}

.burbuja-hilo > .burbuja-foto-hablada img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.burbuja-hilo > .burbuja-foto-hablada figcaption {
  padding: 7px 9px 8px;
  border-top: 1px solid #e3e5e8;
  font-size: 12.5px;
  line-height: 1.4;
  opacity: 0.72;
}

.burbuja-hilo > .burbuja-grafica {
  flex: 0 0 auto;
  margin-top: 2px;
}

/* --- 14. El campo del correo dentro del hilo -------------------------------

   POR QUE EXISTE ESTE BLOQUE
   Agregado el 17 de septiembre de 2026. El aviso "la voz es para suscriptores,
   dejeme su correo" no tenia donde dejarlo: el unico formulario de acceso del
   sitio esta al pie de un articulo, oculto por defecto, y no existe en la
   portada. El campo se pinta ahora dentro del hilo, pegado al aviso que lo
   pide.

   SE PARECE AL AVISO, NO A LA CONVERSACION. Misma caja gris, mismo borde
   izquierdo: el lector tiene que leerlo como continuacion del aviso de arriba,
   no como un mensaje de Salomon. Por eso el borde superior se pega al del
   aviso con un margen negativo.

   LOS 16px DEL CAMPO SON OBLIGATORIOS, no una preferencia. Safari de iPhone
   amplia la pagina entera sobre cualquier campo de texto con letra menor a 16
   pixeles reales, y no hay forma de apagarlo sin prohibir tambien el zoom con
   los dedos. Va en px y no en rem por lo mismo que en .burbuja-campo: el
   umbral son pixeles, no ems.

   REVERSION: borre esta seccion. El formulario sigue funcionando, se ve crudo. */

/* SE CORRIGIO, Y ESTABA MAL MEDIDO. El primer intento solo puso -12px en el
   formulario, con el argumento de que 12px es el hueco del hilo. Medido en el
   navegador el 17 de septiembre de 2026, entre el aviso y el formulario
   quedaban 13,4 pixeles, no cero: el aviso es un <p> y arrastra su margen
   inferior de 1em, y flex no colapsa margenes. Los dos elementos se veian
   separados, que es justo lo contrario de lo que este bloque pretende.
   Hay que apagar ese margen, y solo en el aviso que precede al formulario:
   los demas avisos del hilo lo necesitan. */
.burbuja-hilo .burbuja-aviso:has(+ .burbuja-correo) {
  margin-bottom: 0;
  /* La esquina redondeada de abajo sobra cuando hay algo pegado debajo. */
  border-bottom-right-radius: 0;
}

.burbuja-correo {
  align-self: stretch;
  /* Cierra el hueco de 12px que .burbuja-hilo pone entre sus hijos (gap).
     El margen del <p> de arriba lo apaga la regla anterior. */
  margin-top: -12px;
  padding: 11px;
  /* El borde de arriba se conserva a proposito. Cuando el formulario queda
     pegado al aviso hace de linea divisoria, y cuando :has() no existe --
     navegadores anteriores a 2023 -- el formulario sigue siendo una caja
     cerrada en vez de una caja abierta por arriba. Se ve bien de las dos
     maneras, que es la unica forma de no depender de :has(). */
  border: 1px solid var(--caja-borde);
  border-left: 2px solid var(--gris);
  border-radius: 0 0 8px 0;
  background: var(--caja);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.burbuja-correo input {
  flex: 1 1 150px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--caja-borde);
  border-radius: 8px;
  background: #fff;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;     /* ver la nota de arriba: no bajar de 16 */
  line-height: 1.3;
}

.burbuja-correo input:focus,
.burbuja-correo input:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 1px;
}

.burbuja-correo input:disabled {
  background: var(--caja);
  color: var(--tinta-suave);
}

.burbuja-correo button {
  flex: 0 0 auto;
  padding: 9px 13px;
  border: 0;
  border-radius: 8px;
  background: var(--rojo);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s ease;
}

.burbuja-correo button:hover:not(:disabled) { background: var(--rojo-oscuro); }
.burbuja-correo button:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.burbuja-correo button:disabled { background: var(--gris-claro); cursor: default; }

/* La respuesta ocupa toda la fila, debajo del campo y del boton. Sin el 100%
   se metia en el hueco que sobrara a la derecha del boton y salia partida en
   columna de dos letras. */
.burbuja-correo-dice {
  flex: 1 1 100%;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--tinta-suave);
}

.burbuja-correo-dice:empty { display: none; }

/* SE BORRO .burbuja-correo-truco, Y CON MOTIVO. Vestia el aviso que le pedia
   al lector abrir el enlace en este mismo navegador y, si lo tocaba dentro de
   la aplicacion de correo, copiar la direccion y pegarla. Ese aviso salio del
   JavaScript el 17 de septiembre de 2026 al cambiar el enlace por un codigo
   de seis digitos que se escribe aqui mismo: el lector no sale de la pagina,
   asi que la precaucion que explicaba ya no existe. La regla se quita en vez
   de dejarla huerfana para que nadie la reviva sin leer esto.

   REVERSION: si se volviera al enlace, esta era la regla:
     .burbuja-correo-truco { display: inline-block; margin-top: 4px;
                             color: var(--gris); }

   ---------------------------------------------------------------------------
   15 - EL CODIGO DE SEIS DIGITOS
   ---------------------------------------------------------------------------
   Hereda casi todo de .burbuja-correo: es el mismo formulario con otro campo.
   Solo cambia lo que tiene que cambiar. */

/* Pegado al formulario del correo que queda arriba, para que los dos pasos se
   lean como una sola caja y no como dos cosas sin relacion. El margen
   negativo cierra el hueco de 12px del hilo, igual que hace el primero. */
.burbuja-codigo {
  margin-top: -12px;
  border-radius: 0 0 8px 0;
}

/* El campo del numero no se comporta como el del correo: no crece para
   llenar la fila. Seis digitos ocupan lo que ocupan, y un campo de 300
   pixeles para seis cifras se lee como si faltara algo por escribir. */
.burbuja-codigo input {
  flex: 0 0 auto;
  width: 7.2em;
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 19px;      /* por encima de 16: es lo que el lector mira */
  letter-spacing: 0.18em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* El numero llega del correo partido en dos mitades -- "482 913" -- y el
   marcador tiene que sugerir la misma forma sin competir con lo escrito. */
.burbuja-codigo input::placeholder {
  color: var(--gris-claro);
  letter-spacing: 0.18em;
}

/* Cuando el lector entra, el formulario deja de ser un formulario: no tiene
   sentido que el campo y el boton sigan invitando a escribir un numero que ya
   se gasto. Se desvanecen y queda solo la frase de que ya lo reconocemos. */
.burbuja-codigo[data-entrado] input,
.burbuja-codigo[data-entrado] button {
  display: none;
}

.burbuja-codigo[data-entrado] {
  border-left-color: var(--rojo);
}

.burbuja-codigo[data-entrado] .burbuja-correo-dice {
  color: var(--tinta);
  font-weight: 600;
}

/* EL AVISO DE SUSCRIPCION. Ver plantillas/_burbuja.html para por que existe.

   SE LLAMA burbuja-suscribase Y NO burbuja-aviso, que era el nombre obvio.
   La clase burbuja-aviso ya estaba tomada: es la que usan los mensajes que
   aparecen DENTRO del hilo (errores, avisos de la voz, ver burbuja.js 213 y
   burbuja-voz.js 58). Al llamar igual a este bloque, el fondo amarillo se le
   aplicaba tambien a todos esos mensajes, que no tienen nada que ver.
   Detectado el 18-09-2026 antes de desplegar, revisando el CSS construido.

   Va pegado arriba del formulario y queda visible toda la conversacion. El
   fondo amarillo muy claro es el mismo gesto que usa el sitio para las notas
   al pie: se lee como una aclaracion del medio y no como un anuncio.

   El texto es de 12 pixeles, un paso por debajo del cuerpo del chat. Al mismo
   tamano competia con la respuesta de Salomon, que es lo que el lector vino a
   leer.

   REVERSION: borrar este bloque completo. */
.burbuja-suscribase {
  margin: 0 0 8px;
  padding: 8px 12px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.45;
  color: var(--tinta-suave);
  background: rgba(242, 194, 0, 0.14);
  border-left: 2px solid #f2c200;   /* el amarillo de Salomon */
  border-radius: 3px;
}

.burbuja-suscribase a {
  color: var(--rojo);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 30, 5, 0.35);
  white-space: nowrap;
}

.burbuja-suscribase a:hover,
.burbuja-suscribase a:focus-visible {
  border-bottom-color: var(--rojo);
}

/* EL BOTON DE SUBIR IMAGEN, y la vista previa de lo que se escogio.
   Decision del dueno, 18-09-2026. Ver plantillas/_burbuja.html.

   El clip copia exactamente la forma del microfono -- mismo tamano, mismo
   borde, mismo radio -- porque son dos hermanos en la misma linea. Cualquier
   diferencia entre ellos se lee como que uno de los dos esta en otro estado.

   REVERSION: borrar este bloque completo. */
/* Copiado literal de .burbuja-microfono, propiedad por propiedad: mismo
   padding de 6px, mismo borde de 1px en --gris-claro, mismo radio de 8px y
   el mismo color --tinta. No se escribio "parecido" a ojo. */
.burbuja-clip {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 6px;
  border: 1px solid var(--gris-claro);
  border-radius: 8px;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}

.burbuja-clip:hover,
.burbuja-clip:focus-visible {
  color: var(--rojo);
  border-color: var(--rojo);
}

/* LA VISTA PREVIA. Va sobre el formulario, en una linea propia.

   El alto de la miniatura esta fijo en 44px y el ancho es automatico: asi una
   captura de pantalla vertical y una factura horizontal ocupan la misma altura
   y la linea no salta de alto segun lo que el lector escoja. */
/* ESTA REGLA ES OBLIGATORIA Y NO ES DECORACION.
   El atributo hidden del HTML funciona porque el navegador trae de fabrica
   [hidden] { display: none }. Cualquier regla propia que ponga display gana,
   porque una clase pesa mas que un selector de atributo. Sin esta linea la
   caja de la vista previa se veia SIEMPRE, vacia, con su boton de quitar
   flotando encima del formulario. Se encontro mirando la vista previa
   publicada el 18-09-2026, no leyendo el codigo. */
.burbuja-adjunto[hidden] {
  display: none;
}

.burbuja-adjunto {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  padding: 7px 9px;
  background: rgba(0, 0, 0, .04);
  border: 1px solid var(--gris-claro);
  border-radius: 6px;
}

.burbuja-adjunto-vista {
  flex: 0 0 auto;
  height: 44px;
  width: auto;
  max-width: 76px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--papel);
}

/* El nombre del archivo puede ser larguisimo. min-width:0 es obligatorio:
   sin el, un hijo de flex no se deja encoger por debajo de su contenido y el
   text-overflow no llega a aplicarse nunca -- se desborda la caja en vez de
   recortarse. */
.burbuja-adjunto-dice {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--gris);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.burbuja-adjunto-quitar {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--gris);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.burbuja-adjunto-quitar:hover,
.burbuja-adjunto-quitar:focus-visible {
  color: var(--rojo);
  background: rgba(216, 30, 5, .1);
}

/* LA IMAGEN YA ENVIADA, dentro del hilo.

   El turno del lector es una burbuja alineada a la derecha con padding
   pensado para texto. Con una imagen dentro, ese padding la deja flotando en
   un marco de color; se reduce y se deja que la foto llegue al borde. */
.burbuja-turno-imagen {
  flex: 0 0 auto;
  align-self: stretch;
  box-sizing: border-box;
  padding: 4px;
  width: 100%;
  max-width: 100%;
}

.burbuja-turno-foto {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  border-radius: 4px;
  background: var(--papel);
  cursor: zoom-in;
}

.burbuja-foto-acciones { display:flex; flex-wrap:wrap; gap:8px; padding:8px 4px; }
.burbuja-foto-acciones button, .burbuja-foto-barra button {
  font:inherit; font-size:14px; padding:10px 14px; min-height:44px;
  border:1px solid #aaa; border-radius:6px; background:#fff; color:#151515; cursor:pointer;
}
.burbuja-foto-visor {
  position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none;
  margin:0; padding:0; border:0; background:#17191c; color:#fff;
}
.burbuja-foto-visor[open] { display:flex; flex-direction:column; }
.burbuja-foto-visor::backdrop { background:rgba(0,0,0,.8); }
.burbuja-foto-barra { display:flex; justify-content:space-between; gap:12px; padding:12px; flex-shrink:0; }
.burbuja-foto-zona { flex:1; overflow:auto; min-height:0; padding:12px; touch-action:pan-x pan-y pinch-zoom; }
.burbuja-foto-zona img { display:block; width:100%; height:100%; object-fit:contain; margin:auto; }
.burbuja-foto-zona.con-zoom img { width:200%; height:auto; max-width:none; object-fit:initial; }

.burbuja-turno-pie {
  padding: 6px 6px 3px;
  font-size: 13px;
  line-height: 1.4;
}

/* LO QUE SE DIJO EN VOZ, DENTRO DEL HILO ESCRITO.
   Agregado el 19-09-2026 por pedido del dueno: la escena de voz se queda, pero
   el hilo se llena detras mientras se habla. Lo pinta la funcion
   escribirLoHablado de burbuja-voz.js.

   POR QUE ESTO ES SOLO UN AGREGADO Y NO UN ESTILO NUEVO
   Los turnos hablados ya traen las clases del chat escrito
   (burbuja-turno-lector o burbuja-turno-medio), asi que heredan color, ancho,
   esquinas e interlineado. Aqui solo se marca la diferencia: que eso se dijo.
   Si se borra este bloque, lo hablado sigue apareciendo en el hilo, nada mas
   que indistinguible de lo escrito.

   EL AMARILLO VA ESCRITO Y NO COMO VARIABLE
   El sitio no define --amarillo; ya lo advierte el comentario de la linea 670
   de este mismo archivo. #f2c200 habria funcionado por el
   valor de respaldo, pero deja escrito un nombre que no existe y el proximo
   que lo lea va a buscarlo. Se pone el color directo, como en el resto.

   POR QUE NO SE USA UN ICONO DE MICROFONO
   Habria que meter un svg por turno. La barra lateral cuesta una linea, se lee
   igual y no depende de que cargue nada.

   REVERSION: borrar este bloque. Para apagar la funcion entera,
   BURBUJA_VOZ_HILO=0. */
.burbuja-turno-hablado {
  position: relative;
}

/* La barra al costado del que habla: a la derecha en el turno del lector,
   a la izquierda en el de Salomon, siguiendo de que lado esta cada uno. */
.burbuja-turno-hablado[data-hablado="salomon"] {
  padding-left: 10px;
  border-left: 2px solid #f2c200;
}

.burbuja-turno-hablado[data-hablado="lector"] {
  border-right: 2px solid #f2c200;
}

/* LO QUE TODAVIA SE ESTA DICIENDO VA MAS TENUE.
   Esto no es decoracion: el reconocedor de voz corrige palabras sobre la
   marcha, asi que una frase sin cerrar puede cambiar en pantalla. Mostrarla
   igual que una frase firme haria dudar al lector de lo que ya leyo. Al
   cerrarse la frase se le quita el atributo y toma el color normal. */
.burbuja-turno-hablado[data-en-curso] {
  opacity: 0.62;
}

/* La transicion hace que firmar la frase se vea como que se asienta, en vez
   de un salto de color. Se respeta a quien pidio menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .burbuja-turno-hablado {
    transition: opacity 0.18s ease-out;
  }
}

/* --- La grafica dentro del hilo -------------------------------------------
   Va en un <figure> propio, hermano del mensaje, y no dentro de la burbuja
   gris: una burbuja de chat tiene un ancho pensado para texto y el dibujo
   necesita todo el panel. El borde suave la separa del texto sin gritar.

   El SVG lleva width="100%" y viewBox, asi que se adapta solo. Aqui solo se
   le da el marco y el aire.

   REVERSION: borre este bloque y la rama 'grafica' de estaticos/burbuja.js. */
.burbuja-grafica {
  margin: 10px 0 14px;
  padding: 0;
  border: 1px solid #e3e5e8;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  line-height: 0;          /* sin esto queda una franja bajo el svg */
}

.burbuja-grafica svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   EL LETRERO DE SALOMON PREMIUM -- 23-09-2026
   Tarjeta al final de un analisis tecnico para quien no paga Salomon
   Premium. Usa el rojo de la marca en el filo y el boton, igual que el resto
   de llamados del sitio; el fondo apenas tenido para separarlo de la
   respuesta sin gritar. Vale en el chat y en el hilo de la llamada.
   REVERSION: borrar este bloque y la plantilla data-burbuja-letrero.
   ========================================================================== */
.burbuja-letrero {
  margin: 12px 0 4px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(128, 128, 128, 0.28);
  border-left: 3px solid #d7140c;
  border-radius: 10px;
  background: rgba(215, 20, 12, 0.05);
  font-size: 14px;
  line-height: 1.45;
}
.burbuja-letrero p { margin: 0 0 8px; }
.burbuja-letrero .burbuja-letrero-titulo { font-size: 15px; font-weight: 700; }
.burbuja-letrero ul { margin: 0 0 10px; padding: 0 0 0 18px; }
.burbuja-letrero li { margin: 0 0 4px; }
.burbuja-letrero .burbuja-letrero-precio { font-size: 13px; opacity: 0.8; }
.burbuja-letrero .burbuja-letrero-boton {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  background: #d7140c;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.burbuja-letrero .burbuja-letrero-boton:hover,
.burbuja-letrero .burbuja-letrero-boton:focus-visible { background: #a90f09; color: #fff; }
/* Cuantas graficas gratis le quedan al lector, dentro del letrero. */
.burbuja-letrero .burbuja-letrero-cupo {
  font-weight: 600;
  margin: 0.2rem 0 0.4rem;
}
.burbuja-sesion {
  flex: 0 0 auto;
  padding: 6px 16px;
  font-size: 11px;
  line-height: 1.4;
  color: #555;
  border-top: 1px solid #e5e5e5;
}
.burbuja-sesion button {
  display: inline;
  margin: 0 0 0 5px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.burbuja-sesion button:disabled { opacity: .5; cursor: default; }
/* Texto legible y selección explícita de la foto para preguntas posteriores. */
.burbuja-foto-lectura { margin-top: 12px; text-align: left; }
.burbuja-foto-lectura summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.burbuja-foto-lectura p { font-size: 12px; line-height: 1.5; }
.burbuja-foto-lectura pre {
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  max-height: 260px; overflow-y: auto; font: inherit; font-size: 13px;
  text-align: left; padding: 10px; background: rgba(0,0,0,.05); border-radius: 6px;
}
.burbuja-foto-contexto {
  display: block; width: 100%; min-height: 44px; margin-top: 10px;
  padding: 9px 12px; border: 1px solid currentColor; border-radius: 6px;
  font: inherit; font-size: 13px; line-height: 1.4; cursor: pointer;
  color: inherit; background: transparent; white-space: normal;
}
.burbuja-foto-contexto[aria-pressed="true"] { font-weight: 700; border-width: 2px; }
.burbuja-foto-contexto:focus-visible,
.burbuja-foto-lectura summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.burbuja-respuesta-herramientas { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.burbuja-copiar-respuesta {
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; min-width:92px; padding:8px 10px;
  border:1px solid transparent; border-radius:8px;
  background:transparent; color:#56616a;
  font:500 13px/1.25 var(--sans-cnd,system-ui,sans-serif);
  cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none;
}
@media (hover:hover) and (pointer:fine) {
  .burbuja-copiar-respuesta:hover { background:#f1f3f4; color:#252b30; }
}
.burbuja-copiar-respuesta:active { background:#e7ebee; }
.burbuja-copiar-respuesta:focus-visible { outline:2px solid var(--rojo,#bc231b); outline-offset:2px; }
.burbuja-copiar-icono { position:relative; display:block; width:18px; height:18px; flex:0 0 18px; }
.burbuja-copiar-icono::before,
.burbuja-copiar-icono::after { content:""; position:absolute; width:10px; height:12px; border:1.5px solid currentColor; border-radius:2px; }
.burbuja-copiar-icono::before { left:1px; top:1px; border-right:0; border-bottom:0; }
.burbuja-copiar-icono::after { left:5px; top:5px; background:inherit; }
.burbuja-copiar-respuesta.is-copied { color:#236340; background:#eef6f0; }
.burbuja-copiar-respuesta.is-copied .burbuja-copiar-icono::before { display:none; }
.burbuja-copiar-respuesta.is-copied .burbuja-copiar-icono::after {
  width:6px; height:11px; left:6px; top:1px; border:0;
  border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
  border-radius:0; transform:rotate(45deg);
}
.burbuja-respuesta-herramientas [role="status"] { font:400 12px/1.5 var(--sans-cnd,system-ui,sans-serif); }
.burbuja-copiar-respuesta.is-copied ~ [role="status"] {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}
@media (prefers-reduced-motion:no-preference) {
  .burbuja-copiar-respuesta { transition:background-color .15s ease,color .15s ease; }
}
.burbuja-turno-medio { user-select:text; -webkit-user-select:text; }

/* Identidad compartida de bienvenida; no cambia el montaje de llamada. */
.salo-welcome{--salo-accent:#b52e35;--salo-action-text:#fff;max-width:650px;margin:0 auto;padding:24px 4px 16px;text-align:center;font-family:var(--sans,var(--body,system-ui,sans-serif));color:var(--tinta,var(--ink,#252523))}
.salo-welcome--market{--salo-accent:#f2c200;--salo-action-text:#28251d}
.salo-welcome--salud{--salo-accent:#23704c}
.salo-welcome-logo{display:block;width:48px;height:57px;object-fit:contain;margin:0 auto 20px}
.salo-welcome .salo-welcome-section{font:700 12px/1.5 var(--sans,var(--body,system-ui,sans-serif));letter-spacing:.1em;color:var(--tinta-suave,var(--muted,#67675f));margin:0 0 12px}
.salo-welcome h2{font:500 clamp(22px,3vw,30px)/1.25 var(--sans,var(--body,system-ui,sans-serif));margin:0 0 16px;letter-spacing:-.025em}
.salo-welcome .salo-welcome-promise{font-size:16px;font-weight:700;line-height:1.6;margin:0 auto 12px;max-width:36ch;color:inherit}
.salo-welcome .salo-welcome-description{font-size:15px;line-height:1.65;max-width:52ch;margin:0 auto 16px;color:var(--tinta-suave,var(--muted,#67675f))}
.salo-welcome .burbuja-bienvenida-texto,.salo-welcome .salo-welcome-personal{font-size:14px;line-height:1.6;color:var(--tinta-suave,var(--muted,#67675f));margin:0 auto 20px;max-width:54ch}
.salo-welcome .salo-welcome-prompts{list-style:none;padding:0;display:grid;gap:8px;max-width:490px;margin:0 auto}
.salo-welcome .salo-welcome-prompts button{position:relative;width:100%;display:block;min-height:44px;border:1px solid var(--caja-borde,var(--line,#ddd));border-radius:9px;background:var(--caja,var(--paper,transparent));color:inherit;text-align:left;padding:12px 32px 12px 14px;font:400 14px/1.45 var(--sans,var(--body,system-ui,sans-serif));cursor:pointer;appearance:none;-webkit-appearance:none}
.salo-welcome .salo-welcome-prompts button:after{content:'↗';position:absolute;right:12px;top:12px;color:var(--tinta-suave,var(--muted,#67675f))}
.salo-welcome .salo-welcome-prompts button:focus-visible{outline:2px solid var(--salo-accent);outline-offset:3px}
.salo-welcome .salo-welcome-note{font-size:12px;line-height:1.5;color:var(--tinta-suave,var(--muted,#67675f));max-width:54ch;margin:16px auto 0}
.burbuja[data-contexto-voz="market"] .burbuja-enviar{background:#f2c200;color:#28251d;border-color:#f2c200}
@media(max-width:600px){.salo-welcome{padding-top:16px}.salo-welcome-logo{width:42px;height:50px;margin-bottom:16px}.salo-welcome h2{font-size:24px}}

/* Mobile shell v2: visible with an existing conversation too.
   Keep all original controls/handlers; never recreate or discard the thread. */
.salo-mobile-mark,.salo-mobile-name{display:none}
@media(max-width:700px){
  .burbuja{
    --salo-mobile-accent:#b52e35;
    --salo-mobile-on-accent:#fff;
    --salo-mobile-paper:var(--papel,#fff);
    --salo-mobile-ink:var(--tinta,#252523);
    --salo-mobile-line:var(--caja-borde,#ddd);
    --salo-mobile-gap:8px;
    --salo-mobile-pad:12px;
    --burbuja-ancho:100%;
    left:0;right:0;bottom:0;align-items:stretch;
  }
  .burbuja[data-contexto-voz="market"]{
    --salo-mobile-accent:#f2c200;--salo-mobile-on-accent:#28251d;
  }
  .burbuja[data-abierta]{top:0}
  .burbuja .burbuja-panel{
    width:100%;height:var(--burbuja-ventana);max-height:none;
    border:0;border-radius:0;
  }
  .burbuja .burbuja-panel .burbuja-cabeza{
    background:var(--salo-mobile-paper);color:var(--salo-mobile-ink);
    border-top:3px solid var(--salo-mobile-accent);
    border-bottom:1px solid var(--salo-mobile-line);
    padding:var(--salo-mobile-pad) 16px;
  }
  .burbuja .burbuja-cabeza>div:first-child{
    display:flex;align-items:center;gap:var(--salo-mobile-pad);min-width:0;
  }
  .burbuja .burbuja-cabeza .burbuja-marca,
  .burbuja .burbuja-cabeza .burbuja-titulo{display:none}
  .burbuja .salo-mobile-mark{display:block;width:34px;height:40px;flex:none}
  .burbuja .salo-mobile-name{display:block;font:600 18px/1.3 var(--sans,sans-serif)}
  .burbuja .salo-mobile-name small{display:block;font-size:12px;font-weight:400;margin-top:4px}
  .burbuja .burbuja-panel .burbuja-cabeza button{
    color:var(--salo-mobile-ink);min-width:44px;min-height:44px;
  }
  .burbuja .burbuja-cabeza [data-burbuja-apodo]:not([hidden])~.burbuja-titulo{display:none}
  .burbuja .burbuja-cabeza>div:has([data-burbuja-apodo]:not([hidden])) .salo-mobile-name{display:none}
  .burbuja .burbuja-cabeza [data-burbuja-apodo]:not([hidden]){color:var(--salo-mobile-ink);font-size:18px}
  .burbuja .burbuja-hilo{min-height:0;padding:16px;font:16px/1.6 var(--sans,sans-serif)}
  .burbuja .salo-welcome{padding:24px 0 16px}
  .burbuja .salo-welcome-logo{width:48px;height:57px}
  .burbuja .burbuja-formulario{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    gap:var(--salo-mobile-gap);align-items:center;
    margin:var(--salo-mobile-gap) var(--salo-mobile-pad) max(12px,env(safe-area-inset-bottom));
    padding:var(--salo-mobile-pad);
    border:1px solid var(--salo-mobile-line);border-radius:20px;
    background:var(--salo-mobile-paper);
  }
  .burbuja .burbuja-formulario>.burbuja-linea,
  .burbuja .burbuja-formulario>.burbuja-voz-entrada{display:contents}
  .burbuja .burbuja-campo{
    grid-column:1/-1;grid-row:1;min-height:64px;width:100%;
    font:16px/1.5 var(--sans,sans-serif);padding:8px 4px;
  }
  .burbuja .burbuja-fotos-unicas{grid-column:1;grid-row:2}
  .burbuja .burbuja-clip{
    display:inline-flex;align-items:center;gap:6px;
    min-width:44px;width:auto;min-height:44px;padding:8px;border:0;
  }
  .burbuja .burbuja-clip:after{content:"Foto";font:500 14px var(--sans,sans-serif)}
  .burbuja .burbuja-formulario .burbuja-enviar{
    grid-column:3;grid-row:2;width:auto;min-width:44px;height:44px;border-radius:12px;
    display:inline-flex;align-items:center;gap:6px;padding:8px;
    background:var(--salo-mobile-accent);color:var(--salo-mobile-on-accent);
  }
  .burbuja .burbuja-formulario .burbuja-enviar:after{content:"Enviar";font:600 14px var(--sans,sans-serif)}
  .burbuja .burbuja-voz-entrada .burbuja-microfono{
    grid-column:2;grid-row:2;width:100%;min-width:0;min-height:44px;
    padding:8px 4px;margin:0;border:0;background:transparent;
    font:500 14px var(--sans,sans-serif);gap:6px;justify-content:center;
  }
  .burbuja .burbuja-voz-ayuda,.burbuja .burbuja-voz-genero,.burbuja .burbuja-formulario>.burbuja-nota{
    grid-column:1/-1;font-size:12px;line-height:1.4;margin:0;
  }
  .burbuja .burbuja-sesion{font-size:12px;padding:8px 16px}
  .burbuja .burbuja-suscribase{font-size:12px;padding:8px 16px}
  .burbuja .burbuja-fotos-opciones{
    bottom:calc(100% + 8px);top:auto;left:0;right:auto;
    max-width:calc(100vw - 48px);
  }
  .burbuja .burbuja-formulario[hidden],
  .burbuja .burbuja-formulario [hidden]{display:none!important}
}
@media(max-width:360px){
  .burbuja .burbuja-formulario .burbuja-enviar:after{display:none}
}
@media(max-width:700px) and (max-height:500px){
  .burbuja .burbuja-formulario{max-height:55dvh;overflow-y:auto}
  .burbuja .burbuja-campo{min-height:44px}
}

/* Principal responsive repair: bounded viewport, stable input and voice bar. */
@media(prefers-color-scheme:dark) {
  .burbuja[data-salomon-principal] {
    --papel:#1b1b1b; --tinta:#efefed; --tinta-suave:#c8c8c4;
    --caja:#292b2e; --caja-borde:#505050; --gris:#b5b7bb; --gris-claro:#505050;
  }
  .burbuja[data-salomon-principal] .burbuja-sesion { color:#c8c8c4; border-color:#505050; }
  .burbuja[data-salomon-principal] .burbuja-suscribase { background:#343021; color:#efefed; }
  .burbuja[data-salomon-principal] .burbuja-suscribase a { color:#ff9b9f; }
  .burbuja[data-salomon-principal] .burbuja-fotos-opciones { background:#292b2e; color:#efefed; }
  .burbuja[data-salomon-principal] .burbuja-sugerencias button:hover { background:#383a3d; }
}
.burbuja[data-salomon-principal] .burbuja-panel { min-width:0; min-height:0; }
.burbuja[data-salomon-principal] .burbuja-hilo > * { flex-shrink:0; min-width:0; max-width:100%; }
.burbuja[data-salomon-principal] .burbuja-hilo { overflow-x:hidden; overflow-wrap:anywhere; }
.burbuja[data-salomon-principal] .burbuja-hilo pre { max-width:100%; overflow:auto; white-space:pre; }
.burbuja[data-salomon-principal] .burbuja-cabeza { flex-shrink:0; }
.burbuja[data-salomon-principal] .salo-chat-options {
  grid-column:1/-1; font:12px/1.4 var(--sans,sans-serif);
  max-height:min(180px,calc(var(--burbuja-ventana,100dvh)*.3)); overflow-y:auto;
}
.burbuja[data-salomon-principal] .salo-chat-options > summary {
  cursor:pointer; min-height:32px; display:flex; align-items:center; color:var(--tinta-suave);
}
.burbuja[data-salomon-principal] .salo-chat-options > summary::before { content:"+"; margin-right:8px; }
.burbuja[data-salomon-principal] .salo-chat-options[open] > summary::before { content:"−"; }
.burbuja[data-salomon-principal] .salo-chat-options > summary:focus-visible { outline:2px solid var(--rojo); outline-offset:-2px; }
@media(min-width:701px) {
  .burbuja[data-salomon-principal] {
    --burbuja-ancho:min(520px,calc(100vw - 40px));
    --burbuja-alto:780px;
  }
}
@media(max-width:700px) {
  .burbuja[data-salomon-principal][data-abierta] {
    top:var(--burbuja-top,0px); bottom:auto;
    height:var(--burbuja-ventana); max-height:var(--burbuja-ventana);
  }
  .burbuja[data-salomon-principal] .burbuja-panel { flex:1; min-height:0; max-height:100%; }
  .burbuja[data-salomon-principal] .burbuja-cabeza {
    padding-top:max(8px,env(safe-area-inset-top)); padding-bottom:8px; gap:4px;
  }
  .burbuja[data-salomon-principal] .burbuja-cabeza>div:first-child { gap:8px; }
  .burbuja[data-salomon-principal] .salo-mobile-name { font-size:16px; }
  .burbuja[data-salomon-principal] .burbuja-formulario { padding:8px; margin-top:4px; margin-bottom:max(8px,env(safe-area-inset-bottom)); }
  .burbuja[data-salomon-principal] .burbuja-campo { min-height:44px; max-height:80px; }
  .burbuja[data-salomon-principal] .burbuja-voz-ayuda { display:none; }
  .burbuja[data-salomon-principal] .salo-chat-options > summary { min-height:44px; }
  .burbuja[data-salomon-principal] .burbuja-hablando .burbuja-escena { flex-shrink:0; flex-wrap:wrap; gap:8px; }
  .burbuja[data-salomon-principal] .burbuja-hablando .burbuja-escena-mandos button {
    width:44px; height:44px; min-width:44px; min-height:44px;
  }
  .burbuja[data-salomon-principal][data-ventana-corta] .salo-mobile-name small,
  .burbuja[data-salomon-principal][data-ventana-corta] .salo-connections summary small { display:none; }
  .burbuja[data-salomon-principal][data-ventana-corta] .burbuja-suscribase { display:none; }
  .burbuja[data-salomon-principal][data-ventana-corta] .burbuja-formulario { max-height:none; overflow:visible; }
}

/* MOVIL: FRANJA Y PANTALLA COMPLETA (18-10-2026). En la franja los botones de turnos no caben
   (se apretaban a 34px y el texto se partia en tres lineas): ahi se ocultan; el modo por turnos
   vive en la escena a pantalla completa. Los iconos de la franja suben a 44px con trazo de 22px
   en pantallas tactiles. En pantalla completa la fila de conexiones no debe asomar sobre la escena.
   REVERSION: borre este bloque. */
.burbuja-panel.burbuja-hablando .burbuja-escena-turnos,
.burbuja-panel.burbuja-hablando .burbuja-escena-pulsar { display: none !important; }
.burbuja-panel:not(.burbuja-hablando):has(.burbuja-escena:not([hidden])) .salo-connections { visibility: hidden; }
@media (pointer: coarse) {
  .burbuja-panel.burbuja-hablando .burbuja-escena-mandos { gap: 8px; }
  .burbuja-panel.burbuja-hablando .burbuja-escena-mandos button { width: 44px; height: 44px; }
  .burbuja-panel.burbuja-hablando .burbuja-escena-mandos button svg { width: 22px; height: 22px; }
}

/* =============================================================================
   CHAT ESTILO CHATGPT  (flag BURBUJA_CHAT_WA, antes estilo WhatsApp; el dueno pidio
   cambiarlo el 19-10-2026 para que resulte familiar). La respuesta de Salomon va
   como texto libre sin burbuja, lo del lector en una burbuja gris a la derecha,
   y la caja es una pildora gris con adjuntar a la izquierda y un boton negro
   redondo a la derecha: onda de voz con la caja vacia, flecha hacia arriba con
   texto. Todo va bajo [data-chat-wa]. REVERSION: BURBUJA_CHAT_WA=0 o borrar este bloque.
   ========================================================================== */
.burbuja .burbuja-panel[data-chat-wa] .burbuja-hilo {
  background: #fff;
  color: #0d0d0d;
  font: 16px/1.6 var(--sans, system-ui, sans-serif);
  padding: 16px 14px;
  gap: 18px;
}
.burbuja .burbuja-panel[data-chat-wa] .burbuja-turno-lector,
.burbuja .burbuja-panel[data-chat-wa] .burbuja-turno-medio {
  position: relative;
  border: 0;
  box-shadow: none;
  font-size: 16px;
  overflow-wrap: anywhere;
  user-select: text;
  -webkit-user-select: text;
}
.burbuja .burbuja-panel[data-chat-wa] .burbuja-turno-lector {
  align-self: flex-end;
  max-width: 82%;
  padding: 10px 16px;
  background: #f4f4f4;
  border-radius: 20px;
}
.burbuja .burbuja-panel[data-chat-wa] .burbuja-turno-medio {
  align-self: stretch;
  max-width: 100%;
  width: auto;
  padding: 0 2px;
  background: transparent;
  border-radius: 0;
}
.burbuja .burbuja-panel[data-chat-wa] .burbuja-turno-hablado[data-hablado] {
  border-left: 0; border-right: 0;
}
.burbuja .burbuja-panel[data-chat-wa] .burbuja-turno-lector p { margin: 0; }
.burbuja .burbuja-panel[data-chat-wa] .burbuja-campo::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.burbuja .burbuja-panel[data-chat-wa] .burbuja-turno-medio p { margin: 0 0 0.8em; }
.burbuja .burbuja-panel[data-chat-wa] .burbuja-turno-medio p:last-child { margin-bottom: 0; }
.burbuja .burbuja-panel[data-chat-wa] .burbuja-hilo > .burbuja-foto-hablada,
.burbuja .burbuja-panel[data-chat-wa] .burbuja-hilo > .burbuja-grafica {
  background: #fff; border-radius: 14px;
}

/* La caja de escribir: una sola pildora gris. */
.burbuja .burbuja-panel[data-chat-wa] .burbuja-formulario {
  display: block;
  margin: 0;
  padding: 8px 12px max(12px, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background: #fff;
}
.burbuja .burbuja-panel[data-chat-wa] .burbuja-formulario > .burbuja-linea {
  display: flex !important;
  align-items: flex-end;
  gap: 4px;
  padding: 4px;
  border: 0;
  border-radius: 28px;
  background: #f4f4f4;
}
.burbuja .burbuja-panel[data-chat-wa] .burbuja-formulario > .burbuja-voz-entrada { display: none; }
.burbuja .burbuja-panel[data-chat-wa] .burbuja-campo {
  order: 2;
  flex: 1 1 auto;
  width: auto;
  min-height: 44px;
  max-height: 140px;
  padding: 11px 6px;
  border: 0;
  background: transparent;
  font: 16px/1.4 var(--sans, system-ui, sans-serif);
  grid-column: auto; grid-row: auto;
}
.burbuja .burbuja-panel[data-chat-wa] .burbuja-fotos-unicas { order: 1; grid-column: auto; grid-row: auto; align-self: flex-end; }
.burbuja .burbuja-panel[data-chat-wa] .burbuja-clip {
  width: 44px; min-width: 44px; height: 44px; min-height: 44px;
  padding: 0; border: 0; border-radius: 50%;
  justify-content: center; align-items: center;
  color: #0d0d0d; background: transparent;
}
.burbuja .burbuja-panel[data-chat-wa] .burbuja-clip:after { content: none; }
.burbuja .burbuja-panel[data-chat-wa] .burbuja-clip:hover,
.burbuja .burbuja-panel[data-chat-wa] .burbuja-clip:focus-visible { background: rgba(0, 0, 0, 0.07); color: #0d0d0d; }

.burbuja .burbuja-panel[data-chat-wa] .burbuja-formulario .burbuja-enviar,
.burbuja .burbuja-panel[data-chat-wa] .burbuja-wa-mic {
  order: 3;
  flex: 0 0 auto;
  width: 44px; min-width: 44px; height: 44px; min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #0d0d0d; color: #fff;
  grid-column: auto; grid-row: auto;
}
.burbuja .burbuja-panel[data-chat-wa] .burbuja-formulario .burbuja-enviar:after { content: none; }
.burbuja .burbuja-panel[data-chat-wa] .burbuja-formulario .burbuja-enviar:hover:not(:disabled) { background: #333; }
.burbuja .burbuja-panel[data-chat-wa] .burbuja-formulario .burbuja-enviar:disabled { background: #d4d4d4; }
.burbuja .burbuja-panel[data-chat-wa] .burbuja-formulario .burbuja-enviar svg { width: 20px; height: 20px; }
.burbuja .burbuja-panel[data-chat-wa] .burbuja-wa-mic {
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  cursor: pointer;
}
.burbuja .burbuja-panel[data-chat-wa] .burbuja-wa-mic[data-hablando] {
  background: #e3120b;
  transform: scale(1.12);
  box-shadow: 0 0 0 7px rgba(227, 18, 11, 0.18);
}
.burbuja .burbuja-panel[data-chat-wa] .burbuja-wa-mic[data-llamada="conectando"] { opacity: 0.6; }
.burbuja .burbuja-panel[data-chat-wa] .burbuja-wa-mic { display: none; }
.burbuja .burbuja-panel[data-chat-wa] .burbuja-linea[data-vacio="si"] .burbuja-wa-mic { display: inline-flex; }
.burbuja .burbuja-panel[data-chat-wa] .burbuja-linea[data-vacio="si"] .burbuja-enviar { display: none; }
.burbuja .burbuja-panel[data-chat-wa].burbuja-hablando .salo-connections { display: none; }
.burbuja .burbuja-panel[data-chat-wa] .burbuja-sesion { background: #fff; }

/* En la franja de la llamada: encabezado delgado, sin texto de estado a un
   lado, y los mandos caben en 270 px de ancho. */
.burbuja .burbuja-panel[data-chat-wa].burbuja-hablando .burbuja-escena { padding: 6px 10px; gap: 8px; flex-wrap: nowrap; }
.burbuja .burbuja-panel[data-chat-wa].burbuja-hablando .burbuja-escena-dicho { min-width: 0; flex: 1 1 auto; }
.burbuja .burbuja-panel[data-chat-wa].burbuja-hablando .burbuja-escena-estado { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.burbuja .burbuja-panel[data-chat-wa].burbuja-hablando .burbuja-escena-mandos { flex: 0 0 auto; gap: 6px; margin: 0; }
.burbuja .burbuja-panel[data-chat-wa].burbuja-hablando .burbuja-escena-mandos button { width: 40px; height: 40px; min-height: 0; padding: 0; }
.burbuja .burbuja-panel[data-chat-wa].burbuja-hablando .burbuja-escena-silencio { display: none; }

/* Pantalla completa de voz en teléfono angosto: la barra de mantener pulsado no
   repite el título, los mandos pasan a otra línea en vez de pisarse, y
   mantener pulsado no selecciona texto del pie ni abre «Copiar». */
.burbuja-escena { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (max-width: 400px) {
  .burbuja-panel:not(.burbuja-hablando) .burbuja-escena-mandos { flex-wrap: wrap; gap: 10px; }
  .burbuja-panel:not(.burbuja-hablando) .burbuja-escena-mandos .burbuja-escena-turnos { min-height: 40px; padding: 0 14px; font-size: 13px; }
  .burbuja-panel:not(.burbuja-hablando) .burbuja-escena-mandos .burbuja-escena-pulsar { min-height: 56px; max-width: 100%; width: 100%; }
  .burbuja-panel:not(.burbuja-hablando) .burbuja-escena-mandos button:not(.burbuja-escena-turnos):not(.burbuja-escena-pulsar) { width: 48px; height: 48px; padding: 0; }
  .burbuja-panel:not(.burbuja-hablando) .burbuja-escena-mandos .burbuja-clip:after { content: none; }
}

/* Pedido del dueno, 19-10-2026: se quita de la vista el lapiz para cambiar el nombre
   y la fila «¿Cómo quiere llamarme?». El resto de la logica de nombre no se toca.
   REVERSION: borrar este bloque. */
.burbuja-bautizar, .burbuja-fila-nombre { display: none !important; }


/* --- 13h. MODAL DE VOZ FUTURISTA: red neuronal y tipografia ------------------

   Aprobado por el dueño el 20-10-2026 tras una vista previa. Cambia solo la
   piel: los atributos, los mandos y la logica de la escena no se tocan.

   - La esfera roja maciza pasa a ser un resplandor suave DETRAS de la red que
     dibuja burbuja-voz.js en el lienzo. El resplandor conserva el color de
     quien habla (brasa, amarillo, gris) y el latido de conectando.
   - Tipografia: Sora ligera para la frase y Martian Mono para las etiquetas.
     Se sirven desde el propio sitio (la politica de seguridad solo admite
     fuentes propias); pesan unos 55 KB entre las tres.
   - El aro del cupo se queda completo y sin reloj, como estaba.

   REVERSION: borrar este bloque y los tres .woff2 de voz-*; el JS anterior
   esta en el commit previo. */
@font-face { font-family: 'Sora'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('voz-sora-300.woff2') format('woff2'); }
@font-face { font-family: 'Martian Mono'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('voz-martian-400.woff2') format('woff2'); }
@font-face { font-family: 'Martian Mono'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('voz-martian-500.woff2') format('woff2'); }

.burbuja-escena {
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 106, 43, 0.10) 0%, rgba(216, 30, 5, 0) 58%),
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 22px 100%,
    linear-gradient(#0b0c11 0%, #05060a 100%);
}

.burbuja-escena .burbuja-escena-nucleo {
  width: 76%;
  height: 76%;
  background: radial-gradient(circle, rgba(255, 130, 55, 0.34) 0%, rgba(224, 35, 10, 0.16) 46%, rgba(224, 35, 10, 0) 72%) !important;
  box-shadow: none !important;
}
.burbuja-escena[data-quien="lector"] .burbuja-escena-nucleo {
  background: radial-gradient(circle, rgba(255, 214, 70, 0.32) 0%, rgba(242, 194, 0, 0.14) 46%, rgba(242, 194, 0, 0) 72%) !important;
}
.burbuja-escena[data-fase="conectando"] .burbuja-escena-nucleo,
.burbuja-escena[data-silencio] .burbuja-escena-nucleo {
  background: radial-gradient(circle, rgba(190, 192, 200, 0.22) 0%, rgba(120, 124, 132, 0.10) 46%, rgba(120, 124, 132, 0) 72%) !important;
}

.burbuja-escena-marca {
  font-family: 'Martian Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
}
.burbuja-escena-estado {
  font-family: 'Sora', var(--sans);
  font-weight: 300;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.burbuja-escena-reloj { font-family: 'Martian Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 0.12em; }
@media (max-width: 480px), (pointer: coarse) { .burbuja-escena-estado { font-size: 22px; } }
@media (max-height: 420px) { .burbuja-escena-estado { font-size: 16px; } }