/* ============================================================
   Widget de chat público + botón "volver arriba"

   Todo el CSS de este widget vive AQUÍ, en un único fichero. Antes estaba
   repartido y duplicado entre styles.css, tech-blue-theme.css y
   tech-blue-hotfix.css, en varias capas de parches sucesivos (Fase 10.8,
   10.8.1, 10.8.4, 10.8.5...) que fueron ganando o perdiendo la cascada según el
   orden de cada fichero — eso fue lo que hizo casi imposible saber qué regla
   ganaba en cada caso al depurar el layout móvil. Se ha consolidado todo aquí y
   se han eliminado esas capas de los otros tres ficheros.

   Cualquier cambio futuro al chat o al botón de volver arriba se hace en ESTE
   fichero, en ningún otro.
   ============================================================ */

:root{
  --fab-size: 46px;
  --fab-gap: 14px;
  --fab-gradient: linear-gradient(135deg,#0B7BFF,#22D3EE);
}

/* ---------- Botón "volver arriba" ---------- */
.back-to-top{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:70;
  width:var(--fab-size);
  height:var(--fab-size);
  min-width:var(--fab-size);
  min-height:var(--fab-size);
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:0;
  background:var(--fab-gradient);
  color:#fff;
  font-size:24px;
  font-weight:900;
  line-height:1;
  box-shadow:0 12px 28px rgba(0,132,255,.26);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.back-to-top.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.back-to-top:hover{
  transform:translateY(-2px);
}

/* ---------- Burbuja flotante del chat ---------- */
.public-faq-bot{
  position:fixed;
  right:86px;
  bottom:22px;
  z-index:95;
  font-family:Manrope,system-ui,-apple-system,Segoe UI,sans-serif;
}
.faq-bot-toggle{
  position:relative;
  width:var(--fab-size);
  height:var(--fab-size);
  min-width:var(--fab-size);
  min-height:var(--fab-size);
  padding:0;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
  background:var(--fab-gradient);
  box-shadow:0 12px 28px rgba(0,132,255,.26);
  transition:transform .2s ease, box-shadow .2s ease;
}
.faq-bot-toggle:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(0,132,255,.34);
}
.faq-bot-icon{
  display:grid;
  place-items:center;
  width:var(--fab-size);
  height:var(--fab-size);
}
.faq-bot-icon img{
  width:24px;
  height:24px;
  filter:brightness(0) invert(1);
}
.faq-bot-dot{
  position:absolute;
  top:4px;
  right:4px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#22c55e;
  border:2px solid #fff;
}

/* ---------- Panel del chat ---------- */
.faq-bot-panel{
  position:absolute;
  right:0;
  bottom:calc(var(--fab-size) + 16px);
  width:min(390px, calc(100vw - 32px));
  max-height:min(640px, calc(100vh - 120px));
  display:none;
  overflow:hidden;
  border-radius:28px;
  background:#fff;
  border:1px solid rgba(125,178,230,.42);
  box-shadow:0 28px 80px rgba(3,20,46,.26);
}
.public-faq-bot.is-open .faq-bot-panel{
  display:flex;
  flex-direction:column;
}
.faq-bot-header{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px;
  background:linear-gradient(135deg,#061027,#0b2c62 58%,#006be6);
  color:#fff;
}
.faq-bot-header > div{
  min-width:0;
}
.faq-bot-header strong,
.faq-bot-header span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.faq-bot-header strong{
  font-size:16px;
  font-weight:900;
}
.faq-bot-header span{
  margin-top:2px;
  font-size:12px;
  color:rgba(255,255,255,.76);
}
.faq-bot-header button{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:22px;
  cursor:pointer;
}
.faq-bot-messages{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  background:linear-gradient(180deg,#f8fbff,#eef7ff);
}
.faq-msg{
  max-width:88%;
  border-radius:18px;
  padding:12px 14px;
  box-shadow:0 10px 24px rgba(6,16,39,.06);
}
.faq-msg p{
  margin:0;
  font-size:14px;
  line-height:1.5;
}
.faq-msg-cta{
  margin-top:10px;
}
.faq-msg-ai{
  align-self:flex-start;
  background:#fff;
  border:1px solid #dbeafe;
  color:#10233f;
}
.faq-msg-user{
  align-self:flex-end;
  background:linear-gradient(135deg,#0075ff,#00a8ff);
  color:#fff;
}
.faq-quick-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.faq-quick-actions button{
  border:1px solid #bfdbfe;
  border-radius:999px;
  padding:8px 10px;
  background:#fff;
  color:#0b4ea2;
  font:800 12px/1 Manrope,sans-serif;
  cursor:pointer;
}
.faq-quick-actions button:hover{
  background:#eaf5ff;
  border-color:#0b7bff;
}
.faq-bot-form{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  padding:14px;
  border-top:1px solid #dbeafe;
  background:#fff;
}
.faq-bot-form input{
  width:100%;
  min-width:0;
  height:44px;
  border:1px solid #cfe2f7;
  border-radius:999px;
  padding:0 14px;
  /* 16px, no 14px: por debajo de 16px, iOS Safari hace zoom automático al
     enfocar el campo (para que el texto se lea mejor), y ese zoom agranda toda
     la pantalla — es la causa real de que "todo se hiciera más grande" al
     tocar el campo, no un fallo de ancho del panel. */
  font:600 16px Manrope,sans-serif;
  outline:none;
}
.faq-bot-form input:focus{
  border-color:#0b7bff;
  box-shadow:0 0 0 4px rgba(11,123,255,.12);
}
.faq-bot-form button{
  border:0;
  border-radius:999px;
  padding:0 15px;
  background:#061027;
  color:#fff;
  font:900 13px Manrope,sans-serif;
  cursor:pointer;
}
.faq-bot-note{
  flex:0 0 auto;
  margin:0;
  padding:0 16px 14px;
  color:#64748b;
  background:#fff;
  font-size:11px;
  text-align:center;
}

/* Ninguno de los dos FABs tapa el aviso de cookies mientras siga sin decisión
   (ambos son fixed en la esquina inferior derecha, el aviso también es fixed y
   puede llegar a coincidir ahí en móvil). Vuelven a aparecer en cuanto se
   cierra. :has() tiene soporte universal en navegadores actuales, incluido
   Safari iOS desde la 15.4. */
body:has(.cookies:not([hidden])) .public-faq-bot,
body:has(.cookies:not([hidden])) .back-to-top{
  display:none;
}

/* ---------- Móvil (≤720px) ---------- */
@media(max-width:720px){
  /* El icono del chat va justo encima de "volver arriba" — mismo right que él,
     no al lado. Así nunca depende de si el otro botón está visible o no. */
  .public-faq-bot{
    right:22px;
    bottom:calc(22px + var(--fab-size) + var(--fab-gap));
  }

  /* Ventana del chat a pantalla completa, tipo app de mensajería. Se usa
     inset:0 SIN width/height explícitos (nada de 100vw ni 100dvh): así el
     tamaño lo determinan los cuatro bordes del propio "fixed", sin arrastrar
     el hueco que mete 100vw cuando el navegador reserva ancho para su barra de
     scroll (la causa real del hueco a la derecha y el scroll horizontal). Y
     position:fixed ya sigue el viewport visual real en iOS moderno, así que se
     reajusta solo cuando aparece el teclado, sin necesitar dvh. El layout
     interno (cabecera fija arriba, conversación con scroll propio, campo fijo
     abajo) ya lo resuelve el flex-direction:column de arriba. */
  .public-faq-bot.is-open .faq-bot-panel{
    position:fixed;
    inset:0;
    width:auto;
    height:auto;
    max-height:none;
    border-radius:0;
  }

  /* Sugerencias apiladas en vertical, a todo el ancho — botones normales, no
     pastillas que puedan comprimirse. */
  .faq-quick-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .faq-quick-actions button{
    width:100%;
    text-align:left;
    border-radius:14px;
    padding:12px 14px;
  }
}