/* Atención Cliente Web de IA Gandia - ventana compacta de conversación
   Estilo de ventana de mensajería, con identidad propia: ni Telegram ni WhatsApp.
   Escritorio: a media altura a la derecha. Móvil: abajo a la derecha, en pequeño (crece al escribir).
   Sin cookies, sin almacenamiento local y sin recursos externos. */

/* Reseteo: la web tiene reglas propias para section, header, button o textarea
   que si no se anulan se cuelan dentro de la ventana (pasaba con el relleno del section). */
.ia-asistente-panel, .ia-asistente-panel *, .ia-asistente-btn, .ia-asistente-btn *, .ia-aviso, .ia-aviso * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  float: none;
  text-transform: none;
  letter-spacing: normal;
  max-width: none;
  min-width: 0;
  min-height: 0;
  list-style: none;
}
.ia-asistente-panel, .ia-asistente-btn, .ia-aviso { padding: 0; }
.ia-asistente-panel { max-width: calc(100vw - 28px); }

.ia-asistente-btn {
  position: fixed;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 8px;
  border-radius: 999px 0 0 999px;
  background: var(--tinta, #10233A);
  color: #fff;
  font: 600 14.5px/1 inherit;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,35,58,.10), 0 14px 30px -18px rgba(16,35,58,.55);
  transition: padding-right .18s ease;
}
.ia-asistente-btn[data-oculto="si"] { display: none; }
.ia-asistente-btn:hover { padding-right: 21px; }
.ia-asistente-btn:focus-visible { outline: 3px solid var(--mandarina, #F5450F); outline-offset: 2px; }
.ia-btn-cara { width: 34px; height: 34px; border-radius: 50%; background: #fff; object-fit: cover; flex: none; }
.ia-punto { width: 8px; height: 8px; border-radius: 50%; background: #7BE2A8; margin-left: 2px; }

@media (min-width: 900px) {
  .ia-asistente-btn { top: 50%; right: 0; transform: translateY(-50%); }
}
@media (max-width: 899px) {
  .ia-asistente-btn { right: 14px; bottom: 14px; border-radius: 999px; }
}

/* ---------- la ventana ---------- */
.ia-asistente-panel {
  position: fixed;
  z-index: 2147483001;
  display: none;
  flex-direction: column;
  width: 332px;
  max-width: calc(100vw - 28px);
  height: 442px;
  max-height: calc(100vh - 44px);
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(16,35,58,.14);
  box-shadow: 0 2px 6px rgba(16,35,58,.08), 0 28px 54px -28px rgba(16,35,58,.5);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-50%) translateX(12px) scale(.98);
  transition: opacity .18s ease, transform .2s ease;
}
.ia-asistente-panel[data-abierto="si"] { display: flex; opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
.ia-asistente-panel[data-aviso="si"] { animation: ia-latido .5s ease 2; }
@keyframes ia-latido {
  0%, 100% { box-shadow: 0 2px 6px rgba(16,35,58,.08), 0 28px 54px -28px rgba(16,35,58,.5); }
  50% { box-shadow: 0 0 0 7px rgba(245,69,15,.20), 0 28px 54px -28px rgba(16,35,58,.5); }
}
@media (min-width: 900px) {
  .ia-asistente-panel { top: 50%; right: 16px; }
}
/* cabecera tipo app de mensajería */
.ia-asistente-cab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 12px;
  background: var(--tinta, #10233A);
  color: #fff;
  flex: none;
}
.ia-cara { width: 38px; height: 38px; border-radius: 50%; background: #fff; object-fit: cover; flex: none; }
.ia-marca { font-size: 14.5px; font-weight: 700; line-height: 1.15; }
.ia-estado { font-size: 11px; color: rgba(255,255,255,.7); margin-top: 1px; }
.ia-minimizar {
  margin-left: auto; background: transparent; border: 0; color: rgba(255,255,255,.85);
  width: 30px; height: 30px; border-radius: 50%; font-size: 19px; line-height: 1; cursor: pointer;
}
.ia-minimizar:hover { background: rgba(255,255,255,.14); color: #fff; }
.ia-minimizar:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.ia-asistente-hilo {
  flex: 1; overflow-y: auto; padding: 12px 11px 4px;
  display: flex; flex-direction: column; gap: 7px;
  background: var(--papel, #F6F3EA);
}
/* `flex: none` NO es opcional en los mensajes: el reseteo de arriba deja `min-height: 0` en todos los
   hijos del panel, así que cuando la conversación llena el hilo, el flex APLASTA las burbujas en vertical
   (medido el 27-sep-2026 en la web viva: burbuja de 35 px con un texto de 106 px) y el texto se sale del
   cuadro y se monta sobre la burbuja siguiente. Con `flex: none` cada burbuja conserva su altura natural y
   es el hilo —que ya lleva `overflow-y: auto`— el que se desplaza. Se comprueba burbuja a burbuja con
   `scrollHeight > clientHeight`, que tiene que dar 0 en todas. */
.ia-msg { flex: none; max-width: 85%; padding: 8px 11px; border-radius: 13px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.ia-msg-bot { align-self: flex-start; background: #fff; color: var(--tinta, #10233A); border: 1px solid rgba(16,35,58,.10); border-bottom-left-radius: 5px; }
.ia-msg-yo { align-self: flex-end; background: var(--tinta, #10233A); color: #fff; border-bottom-right-radius: 5px; }
.ia-msg-aviso { align-self: flex-start; background: rgba(245,69,15,.09); border: 1px dashed rgba(245,69,15,.45); color: var(--mandarina-profunda, #B8320A); font-size: 13px; }
.ia-hora { font-size: 10px; color: var(--piedra, #6B655A); opacity: .75; margin-top: 3px; }

.ia-escribiendo { flex: none; align-self: flex-start; background: #fff; border: 1px solid rgba(16,35,58,.10); border-radius: 13px; border-bottom-left-radius: 5px; padding: 9px 12px; display: flex; gap: 3px; }
.ia-escribiendo i { width: 6px; height: 6px; border-radius: 50%; background: var(--piedra, #6B655A); opacity: .55; animation: ia-punto 1.1s infinite; }
.ia-escribiendo i:nth-child(2) { animation-delay: .16s; }
.ia-escribiendo i:nth-child(3) { animation-delay: .32s; }
@keyframes ia-punto { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: .9; } }

.ia-asistente-pie { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-top: 1px solid rgba(16,35,58,.10); background: #fff; flex: none; }
.ia-asistente-pie textarea {
  flex: 1; resize: none; min-height: 38px; max-height: 96px; padding: 9px 13px;
  border: 1px solid rgba(16,35,58,.16); border-radius: 19px; background: var(--papel, #F6F3EA);
  font: 14px/1.35 inherit; color: var(--tinta, #10233A);
}
.ia-asistente-pie textarea:focus { outline: 2px solid var(--mandarina, #F5450F); outline-offset: 1px; background: #fff; }
.ia-enviar {
  width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%;
  background: var(--mandarina, #F5450F); color: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.ia-enviar svg { width: 18px; height: 18px; }
.ia-enviar:disabled { opacity: .5; cursor: default; }
.ia-enviar:focus-visible { outline: 3px solid var(--tinta, #10233A); outline-offset: 2px; }
.ia-nota { padding: 6px 12px 9px; font-size: 10.5px; color: var(--piedra, #6B655A); background: #fff; flex: none; }

/* ---------- móvil ----------
   Este bloque va DESPUÉS de las reglas de arriba a propósito: estar dentro de una @media NO da
   prioridad (las media queries no suman especificidad), así que si se coloca antes, las reglas
   base —que son igual de específicas y van más abajo— lo anulan y en el móvil se aplican las
   medidas de escritorio dentro de la ventana pequeña: la burbuja se sale del hilo y el texto del
   campo ("Escribe tu pregunta…") queda cortado. Comprobado el 24-sep-2026: con el bloque arriba,
   el campo disponía de 130 px para un texto de 131,5 px y el hilo recortaba 10 px del saludo. */
@media (max-width: 899px) {
  /* Tamaño pequeño por defecto (como la ventana de escritorio, en pequeño):
     alineada a la derecha y anclada abajo —borde inferior a 88 px de la base, el mismo sitio
     donde queda la franja al minimizarse (18 px por encima del botón de WhatsApp)— para dejar
     despejada la parte superior de la página. Al pulsar para escribir, crece. (4-oct-2026) */
  .ia-asistente-panel {
    left: auto; right: 10px; top: auto; bottom: 88px;
    /* El mínimo de 220 px es para pantallas estrechas (320-379 px): por debajo de ese ancho el
       campo se queda sin sitio y el texto de ayuda ("Escribe tu pregunta…", 131,5 px) se corta.
       Medido: el campo dispone de panel − 81 px. En pantallas de 380 px o más manda el 58vw de
       siempre y no cambia nada. */
    width: clamp(220px, 58vw, 232px);
    height: min(38vh, 286px);
    transform: scale(.99);
  }
  .ia-asistente-panel[data-abierto="si"] { transform: scale(1); }
  .ia-asistente-panel .ia-estado, .ia-asistente-panel .ia-nota { display: none; }
  .ia-asistente-cab { padding: 7px 7px 7px 9px; gap: 8px; }
  .ia-cara { width: 30px; height: 30px; }
  .ia-marca { font-size: 13px; }
  .ia-minimizar { width: 26px; height: 26px; font-size: 17px; }
  .ia-asistente-hilo { padding: 8px 8px 3px; gap: 6px; }
  .ia-msg { font-size: 12.5px; max-width: 93%; padding: 7px 9px; }
  .ia-asistente-pie { padding: 7px 8px; gap: 6px; }
  .ia-asistente-pie textarea { min-height: 33px; font-size: 13px; padding: 7px 11px; }
  .ia-enviar { width: 33px; height: 33px; }

  /* Al pulsar para escribir se pone al tamaño grande */
  .ia-asistente-panel[data-tamano="grande"] {
    right: 12px; bottom: 12px; top: auto;
    width: min(340px, calc(100vw - 24px));
    height: min(66vh, 470px);
    transform: translateY(0) scale(1);
  }
  .ia-asistente-panel[data-tamano="grande"] .ia-estado { display: block; }
  .ia-asistente-panel[data-tamano="grande"] .ia-nota { display: block; }
  .ia-asistente-panel[data-tamano="grande"] .ia-cara { width: 38px; height: 38px; }
  .ia-asistente-panel[data-tamano="grande"] .ia-marca { font-size: 14.5px; }
  .ia-asistente-panel[data-tamano="grande"] .ia-msg { font-size: 13.5px; }
  .ia-asistente-panel[data-tamano="grande"] .ia-asistente-pie textarea { min-height: 38px; font-size: 14px; }
}

/* burbuja de aviso en móvil (no abre la ventana entera) */
.ia-aviso {
  position: fixed; z-index: 2147482999; right: 14px; bottom: 72px; max-width: 68vw;
  padding: 10px 12px; border-radius: 13px 13px 5px 13px; background: #fff;
  border: 1px solid rgba(16,35,58,.14);
  box-shadow: 0 12px 28px -18px rgba(16,35,58,.6);
  font-size: 13.5px; color: var(--tinta, #10233A); display: none; animation: ia-sube .3s ease;
}
.ia-aviso[data-visible="si"] { display: block; }
.ia-aviso b { color: var(--mandarina-profunda, #B8320A); }
@keyframes ia-sube { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 900px) { .ia-aviso { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .ia-asistente-btn, .ia-asistente-panel, .ia-aviso, .ia-escribiendo i { transition: none !important; animation: none !important; }
}