/* Asistente AINIA — estilos del frontal.
 *
 * Seis reglas que se han seguido a propósito:
 *
 * 1. **Todo cuelga de `.ainia-`.** Un plugin de chat que suelta reglas sobre
 *    `button` o `input` rompe el formulario de otra persona a los dos días.
 * 2. **Todo color y toda medida es una variable**, y las variables las escribe
 *    PHP desde los ajustes. Aquí no hay ni un valor de marca escrito a mano;
 *    los que aparecen tras la coma son solo el respaldo por si falta la
 *    variable.
 * 3. **La tipografía se hereda.** `--ainia-fuente` vale `inherit` salvo que
 *    alguien ponga otra cosa: así el asistente se parece a la web sin tener
 *    que averiguar qué fuente usa.
 * 4. **Esquinas rectas y líneas finas.** El formulario de ainia.com usa campos
 *    rectangulares con un borde de 1 px. Un chat de burbujas muy redondeadas
 *    sobre una web angulosa se lee como una pieza pegada de otro sitio.
 * 5. **`!important` en los colores de superficie y en el tamaño del texto.**
 *    Aparece porque el tema pintaba el botón flotante de rosa y el título con
 *    tamaño de titular de página: tiene reglas globales para `button` y `h2`
 *    que ganaban. Un widget incrustado en la web de otro no puede ganar por
 *    especificidad contra un tema que no conoce.
 * 6. **En móvil el panel ocupa la pantalla y nada más.** Con `dvh`, no `vh`:
 *    en un móvil `100vh` cuenta la barra del navegador que tapa el final, y lo
 *    que se pierde por abajo es justo la caja de escribir.
 */

.ainia-lanzadera {
  position: fixed;
  bottom: var(--ainia-margen-inferior, 20px);
  z-index: 99999;
  font-family: var(--ainia-fuente, inherit);
  font-size: var(--ainia-texto, 15px);
  line-height: 1.5;
}
.ainia-derecha { right: var(--ainia-margen-lateral, 20px); }
.ainia-izquierda { left: var(--ainia-margen-lateral, 20px); }

.ainia-boton {
  width: var(--ainia-lanzadera-tamano, 58px);
  height: var(--ainia-lanzadera-tamano, 58px);
  border: 0;
  padding: 0;
  border-radius: var(--ainia-radio-boton, 0);
  background: var(--ainia-lanzadera-fondo, #df4000) !important;
  color: var(--ainia-lanzadera-texto, #fff) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
  transition: transform .15s ease;
}
/* Con texto deja de ser un cuadrado y se convierte en pastilla. */
.ainia-boton.ainia-con-texto {
  width: auto;
  padding: 0 18px;
  font-weight: 600;
  font-size: 14px;
}
.ainia-boton svg { width: 45%; height: 45%; min-width: 20px; min-height: 20px; }
.ainia-boton.ainia-con-texto svg { width: 22px; height: 22px; }
.ainia-icono-propio {
  width: 55%; height: 55%; object-fit: contain; display: block;
}
/* Mismo motivo que en la cabecera: el tema pinta `:focus` y `:active` y el
 * color se quedaba pegado tras el clic. */
.ainia-boton:hover,
.ainia-boton:focus,
.ainia-boton:active {
  background: var(--ainia-lanzadera-fondo, #df4000) !important;
  color: var(--ainia-lanzadera-texto, #fff) !important;
}
.ainia-boton:hover { transform: scale(1.06); }
.ainia-boton:focus-visible {
  outline: 3px solid var(--ainia-lanzadera-fondo, #df4000);
  outline-offset: 3px;
}

/* --- Defensa contra el tema ----------------------------------------------
 *
 * El título del chat salía **enorme** porque el tema da a `h2` un tamaño de
 * titular de página. Dos medidas, y las dos hacen falta: el título deja de ser
 * un encabezado —no lo necesita, el panel ya se anuncia con `aria-label`— y el
 * tamaño va forzado.
 */
.ainia-panel,
.ainia-panel * { box-sizing: border-box; }

.ainia-panel .ainia-titulo,
.ainia-panel .ainia-subtitulo {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ainia-panel .ainia-titulo {
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
}
.ainia-panel .ainia-subtitulo {
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  opacity: .92;
}
.ainia-panel .ainia-fuentes-titulo {
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
  color: #6b7177 !important;
}
.ainia-panel .ainia-msj p,
.ainia-panel .ainia-msj li {
  font-size: var(--ainia-texto, 15px) !important;
  line-height: 1.55 !important;
}
.ainia-panel .ainia-fuentes li,
.ainia-panel .ainia-fuentes a {
  font-size: 13px !important; line-height: 1.45 !important;
}
.ainia-panel button,
.ainia-panel input,
.ainia-panel textarea,
.ainia-panel select {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
}
.ainia-panel button { min-height: 0 !important; }

/* --- El panel ----------------------------------------------------------- */

.ainia-panel {
  position: absolute;
  bottom: calc(var(--ainia-lanzadera-tamano, 58px) + 16px);
  width: var(--ainia-ancho, 392px);
  max-width: calc(100vw - 32px);
  height: var(--ainia-alto, 560px);
  max-height: calc(100vh - 120px);
  background: #fff;
  color: #1d2327;
  border: 1px solid var(--ainia-borde, #d9dcdf);
  border-radius: var(--ainia-radio, 0);
  box-shadow: 0 8px 34px rgba(0, 0, 0, .20);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ainia-derecha .ainia-panel { right: 0; }
.ainia-izquierda .ainia-panel { left: 0; }
.ainia-panel[hidden] { display: none; }

.ainia-lanzadera .ainia-panel.ainia-grande {
  width: var(--ainia-ancho-grande, 940px);
  max-width: calc(100vw - 40px);
  height: var(--ainia-alto-grande, 880px);
  max-height: calc(100vh - 110px);
}
.ainia-grande .ainia-hilo { padding: 24px 28px; gap: 16px; }
.ainia-grande .ainia-msj { max-width: 74%; }
.ainia-grande .ainia-formulario { padding: 20px 22px; }
.ainia-grande .ainia-pie { padding: 14px 20px; }
.ainia-grande .ainia-cabecera { padding: 16px 22px; }

/* Incrustado con el atajo: ni flotante ni fijo, un bloque más de la página. */
.ainia-incrustado {
  font-family: var(--ainia-fuente, inherit);
  font-size: var(--ainia-texto, 15px);
  line-height: 1.5;
}
.ainia-incrustado .ainia-panel {
  position: static;
  width: 100%;
  max-width: none;
  height: var(--ainia-alto-incrustado, 520px);
  max-height: none;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .10);
}

.ainia-cabecera {
  background: var(--ainia-cabecera-fondo, #df4000) !important;
  color: var(--ainia-cabecera-texto, #fff) !important;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
/* El bloque del título puede encogerse; los botones no. Sin `min-width: 0` un
 * hijo de flex no baja de su contenido y la cabecera se parte en dos líneas. */
.ainia-cabecera > div:first-child { min-width: 0; flex: 1 1 auto; }
.ainia-cabecera .ainia-acciones {
  margin-left: auto; display: flex; gap: 2px; flex: 0 0 auto;
}
.ainia-cabecera button {
  background: transparent !important;
  border: 0;
  color: inherit !important;
  cursor: pointer;
  padding: 6px;
  border-radius: 0;
  font-size: 12px;
  opacity: .95;
}
/* Al pasar por encima: fondo blanco y el icono del color de la cabecera. Sin
 * el `!important` mandaba el `button:hover` del tema y salía rosa — el mismo
 * problema que tuvo el botón flotante, en otro sitio. Y con un blanco sólido
 * en vez de un blanco translúcido, porque translúcido sobre el naranja da un
 * salmón que no es de la marca. */
.ainia-cabecera button:hover,
.ainia-cabecera button:focus,
.ainia-cabecera button:focus-visible,
.ainia-cabecera button:active {
  opacity: 1;
  background: #fff !important;
  color: var(--ainia-cabecera-fondo, #df4000) !important;
}
/* `:focus` y `:active` van aquí a propósito. El rosa que se veía no era del
 * `hover`: era el estilo de **pulsado y con el foco puesto** del tema, que se
 * queda pegado después de hacer clic. Cubrir solo `hover` deja el botón rosa
 * justo cuando más se mira, que es cuando lo acabas de pulsar. */
.ainia-cabecera button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.ainia-cabecera .ainia-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; line-height: 1;
}

/* --- Los mensajes ------------------------------------------------------- */

.ainia-hilo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  background: var(--ainia-hilo-fondo, #f7f8f9);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overscroll-behavior: contain;
}

.ainia-msj { max-width: 86%; }
.ainia-msj p { margin: 0 0 8px; }
.ainia-msj p:last-child { margin-bottom: 0; }

.ainia-de-usuario {
  align-self: flex-end;
  background: var(--ainia-usuario-fondo, #df4000) !important;
  color: var(--ainia-usuario-texto, #fff) !important;
  padding: 10px 14px;
  border-radius: var(--ainia-radio, 0);
}
.ainia-de-asistente {
  align-self: flex-start;
  background: #fff !important;
  color: #1d2327 !important;
  padding: 12px 14px;
  border-radius: var(--ainia-radio, 0);
  border: 1px solid var(--ainia-borde, #d9dcdf);
}

/* --- Citas y avisos ------------------------------------------------------
 * Las citas son la mitad del producto: sin página que enseñar, la respuesta
 * no vale. Por eso van siempre visibles y no escondidas tras un desplegable.
 */
.ainia-fuentes {
  margin-top: 10px; border-top: 1px solid #eceff1; padding-top: 8px;
}
.ainia-fuentes ol { margin: 0; padding: 0 0 0 18px; }
.ainia-fuentes li { margin-bottom: 3px; }
.ainia-fuentes a {
  color: var(--ainia-enlace, #df4000) !important; text-decoration: underline;
}

.ainia-etiqueta {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #eceff1;
  color: #5f6a72;
  border-radius: 0;
  padding: 1px 5px;
  margin-left: 5px;
  vertical-align: 1px;
}

.ainia-aviso {
  margin-top: 8px;
  font-size: 12.5px;
  color: #6b5b1f;
  background: #fdf6e3;
  border-left: 3px solid #e0b93a;
  padding: 7px 10px;
  border-radius: 0;
}

/* --- El formulario ------------------------------------------------------- */

.ainia-formulario {
  align-self: stretch;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--ainia-borde, #d9dcdf);
  border-radius: var(--ainia-radio, 0);
  padding: 16px;
}
.ainia-formulario label {
  display: block; font-size: 12.5px; font-weight: 600; margin: 9px 0 3px;
}
.ainia-formulario input[type="text"],
.ainia-formulario input[type="email"],
.ainia-formulario input[type="tel"],
.ainia-formulario textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 9px 12px;
  border: 1px solid var(--ainia-borde, #d9dcdf) !important;
  border-radius: var(--ainia-radio-campo, 0) !important;
  background: #fff !important;
  color: #1d2327 !important;
}
.ainia-formulario textarea { min-height: 74px; resize: vertical; }
.ainia-panel .ainia-obligatorio { color: #d63638; margin-left: 2px; }
/* Con `.ainia-formulario label` a secas ganaría la negrita de las etiquetas y
 * el consentimiento saldría en negrita, que parece un aviso legal gritado. */
.ainia-formulario .ainia-consentimiento {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 12px 0 4px;
  font-size: 12.5px;
  font-weight: 400;
}
.ainia-formulario .ainia-consentimiento input { margin-top: 3px; flex: 0 0 auto; }
.ainia-enviar {
  margin-top: 12px;
  width: 100%;
  border: 0;
  border-radius: var(--ainia-radio-boton, 0);
  padding: 12px 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: var(--ainia-boton-fondo, #df4000) !important;
  color: var(--ainia-boton-texto, #fff) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}
.ainia-enviar[disabled] { opacity: .55; cursor: default; }
.ainia-fallo { color: #b32d2e; font-size: 12.5px; margin-top: 8px; }

/* --- Barra de escritura -------------------------------------------------- */

.ainia-pie {
  border-top: 1px solid var(--ainia-borde, #d9dcdf);
  background: #fff;
  padding: 10px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex: 0 0 auto;
}
.ainia-pie textarea {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  /* 16 px o más: por debajo, Safari en iPhone hace zoom al enfocar el campo y
   * la página se queda descolocada. Es el motivo, no una preferencia. */
  font-size: 16px;
  border: 1px solid var(--ainia-borde, #d9dcdf) !important;
  border-radius: var(--ainia-radio-campo, 0) !important;
  padding: 10px 12px;
  resize: none;
  max-height: 110px;
  background: #fff !important;
  color: #1d2327 !important;
}
.ainia-pie textarea:focus {
  outline: 2px solid var(--ainia-boton-fondo, #df4000); outline-offset: -1px;
}
.ainia-pie button {
  border: 0;
  border-radius: var(--ainia-radio-boton, 0);
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  cursor: pointer;
  background: var(--ainia-boton-fondo, #df4000) !important;
  color: var(--ainia-boton-texto, #fff) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ainia-pie button:hover,
.ainia-pie button:focus,
.ainia-pie button:active,
.ainia-enviar:hover,
.ainia-enviar:focus,
.ainia-enviar:active {
  background: var(--ainia-boton-fondo, #df4000) !important;
  color: var(--ainia-boton-texto, #fff) !important;
  filter: brightness(.94);
}
.ainia-pie button[disabled] { opacity: .5; cursor: default; }

.ainia-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ainia-sugerencias button {
  font: inherit;
  font-size: 12.5px;
  background: #fff !important;
  border: 1px solid var(--ainia-borde, #d9dcdf);
  color: var(--ainia-enlace, #df4000) !important;
  border-radius: var(--ainia-radio-boton, 0);
  padding: 7px 11px;
  cursor: pointer;
  text-align: left;
}
.ainia-sugerencias button:hover {
  background: var(--ainia-boton-fondo, #df4000) !important;
  color: var(--ainia-boton-texto, #fff) !important;
  border-color: var(--ainia-boton-fondo, #df4000);
}

/* Los tres puntos de «buscando». Se paran si el sistema pide menos
 * movimiento: una animación infinita puede marear de verdad a alguien. */
.ainia-puntos span {
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 3px;
  border-radius: 50%;
  background: #9aa2a8;
  animation: ainia-latido 1.1s infinite ease-in-out;
}
.ainia-puntos span:nth-child(2) { animation-delay: .16s; }
.ainia-puntos span:nth-child(3) { animation-delay: .32s; }
@keyframes ainia-latido {
  0%, 80%, 100% { opacity: .3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .ainia-puntos span { animation: none; opacity: .6; }
  .ainia-boton { transition: none; }
}

.ainia-diagnostico {
  font-size: 11.5px;
  color: #6b7177;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  margin-top: 8px;
  border-top: 1px dashed #d8dcdf;
  padding-top: 6px;
  word-break: break-word;
}

/* --- Móvil ---------------------------------------------------------------
 *
 * Esto se reescribió tras probarlo en un teléfono de verdad: el panel se salía
 * por los lados, los botones de la cabecera quedaban fuera de la pantalla y no
 * había forma de cerrarlo. Tres causas, y las tres están arregladas aquí:
 *
 * 1. **El modo grande seguía aplicándose.** `.ainia-lanzadera
 *    .ainia-panel.ainia-grande` gana por especificidad a `.ainia-panel`, así
 *    que un ancho de 940 px sobrevivía dentro de la consulta de medios. Por
 *    eso abajo se repite el selector completo en vez de escribir solo
 *    `.ainia-panel`. Es el fallo: una consulta de medios **no** gana por estar
 *    más abajo si el selector de dentro es más flojo.
 * 2. **El corte estaba en 480 px.** Muchos móviles declaran más, y en
 *    horizontal casi todos. Ahora es 782 px, el mismo que usa WordPress.
 * 3. **`100vh` cuenta la barra del navegador.** Lo que se salía por abajo era
 *    justo la caja de escribir. `dvh` mide lo que de verdad se ve, con `vh`
 *    detrás como respaldo para navegadores viejos.
 */
@media (max-width: 782px) {
  .ainia-lanzadera .ainia-panel,
  .ainia-lanzadera .ainia-panel.ainia-grande {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  /* La franja de la cabecera se aparta de la muesca y del reloj. */
  .ainia-cabecera {
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
  }
  .ainia-pie {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .ainia-grande .ainia-hilo,
  .ainia-hilo { padding: 14px; }
  .ainia-grande .ainia-msj,
  .ainia-msj { max-width: 92%; }
  /* Agrandar no significa nada cuando ya ocupa la pantalla entera. */
  .ainia-cabecera .ainia-agrandar { display: none; }
  /* Y el botón flotante estorba por encima del panel abierto. */
  .ainia-lanzadera.ainia-abierta .ainia-boton { display: none; }
  .ainia-sugerencias button { font-size: 13px; }
}