/* Asistente — mismo lenguaje visual del sitio (teal, papel, sombras suaves).
   La geometría de los flotantes se declara UNA vez: si el alto del botón se
   escribe en el botón y el del panel aparte, el panel termina tapando el botón
   y no se puede cerrar. */
:root {
  --bot-abajo: 1.25rem;
  --bot-alto: 3rem;
  --bot-sep: .75rem;
  --bot-wa: 3.5rem;                 /* el redondo de WhatsApp que ya existe */
  --bot-fab-abajo: calc(var(--bot-abajo) + var(--bot-wa) + var(--bot-sep));
  --bot-pan-abajo: calc(var(--bot-fab-abajo) + var(--bot-alto) + var(--bot-sep));
}
@media (min-width: 1024px) { :root { --bot-abajo: 2rem; } }

.bot-fab {
  position: fixed; right: 1.25rem; bottom: var(--bot-fab-abajo); z-index: 71;
  height: var(--bot-alto); padding: 0 1.15rem; border: 0; border-radius: 999px;
  display: inline-flex; align-items: center; gap: .6rem; cursor: pointer;
  background: var(--deep, #0C2B2A); color: #fff; font: 600 .86rem/1 inherit;
  box-shadow: 0 16px 40px -12px rgba(11, 42, 41, .5);
  opacity: 0; transform: translateY(1rem); pointer-events: none;
  transition: opacity .4s var(--ease, ease), transform .4s var(--ease, ease);
}
.bot-fab.vis { opacity: 1; transform: none; pointer-events: auto; }
.bot-fab:hover { transform: scale(1.04); }
.bot-fab:focus-visible { outline: 2px solid var(--teal-bright, #4FB1AF); outline-offset: 3px; }
@media (min-width: 1024px) { .bot-fab { right: 2rem; } }

/* Un par de latidos al aparecer y se queda quieto. */
.bot-ping::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  animation: botPing 2.6s ease-out .4s 2;
}
@keyframes botPing {
  0% { box-shadow: 0 0 0 0 rgba(18, 128, 125, .5); }
  70% { box-shadow: 0 0 0 16px rgba(18, 128, 125, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 128, 125, 0); }
}
@media (prefers-reduced-motion: reduce) { .bot-ping::after { animation: none; } }

.bot-pan {
  position: fixed; z-index: 72; right: 1rem; left: 1rem; bottom: var(--bot-pan-abajo);
  max-height: min(70svh, calc(100svh - var(--bot-pan-abajo) - 1rem));
  display: flex; flex-direction: column;
  background: var(--paper, #fff); color: var(--text, #16302F);
  border-radius: 14px; border: 1px solid var(--line, rgba(18, 128, 125, .14));
  box-shadow: 0 28px 70px -20px rgba(11, 42, 41, .5);
  /* `clip` y no `hidden`: `hidden` convierte la caja en contenedor de scroll y se
     come la rueda del ratón, así que la página deja de desplazarse con el cursor
     encima del chat. */
  overflow: clip;
  opacity: 0; transform: translateY(.75rem); pointer-events: none;
  transition: opacity .3s var(--ease, ease), transform .3s var(--ease, ease);
}
.bot-pan.on { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 640px) { .bot-pan { left: auto; width: 380px; } }
@media (min-width: 1024px) { .bot-pan { right: 2rem; } }

.bot-head { display: flex; align-items: flex-start; gap: .75rem; padding: .9rem 1.1rem; background: var(--deep, #0C2B2A); color: #fff; }
.bot-head strong { display: block; font-size: .95rem; }
.bot-head span { display: block; font-size: .78rem; opacity: .7; margin-top: .1rem; }
.bot-x { margin: -.2rem -.35rem 0 0; width: 2.1rem; height: 2.1rem; flex: none; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .7); cursor: pointer; }
.bot-x:hover { color: #fff; background: rgba(255, 255, 255, .1); }

.bot-msgs { flex: 1; overflow-y: auto; overscroll-behavior-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.bot-row { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.bot-yo { align-items: flex-end; }
.bot-b { margin: 0; max-width: 86%; padding: .6rem .8rem; border-radius: 10px; font-size: .9rem; line-height: 1.55; white-space: pre-line; }
.bot-bot .bot-b { background: var(--mist, #E9F4F3); }
.bot-yo .bot-b { background: var(--deep, #0C2B2A); color: #fff; }
.bot-ops { display: flex; flex-wrap: wrap; gap: .4rem; }
.bot-chip { border: 1px solid var(--line, rgba(18, 128, 125, .14)); background: #fff; border-radius: 999px; padding: .35rem .7rem; font: inherit; font-size: .78rem; line-height: 1.25; text-align: left; color: inherit; cursor: pointer; }
.bot-chip:hover { color: var(--teal, #12807D); border-color: var(--teal, #12807D); }
.bot-act { border: 0; background: var(--teal, #12807D); color: #fff; border-radius: 999px; padding: .4rem .8rem; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.bot-act:hover { background: var(--teal-deep, #0B5A57); }
.bot-link { font-size: .78rem; color: var(--teal, #12807D); text-decoration: none; }
.bot-link:hover { text-decoration: underline; }

.bot-form { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border-top: 1px solid var(--line, rgba(18, 128, 125, .14)); }
.bot-form input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: .9rem; color: inherit; outline: none; }
.bot-form button { width: 2.1rem; height: 2.1rem; flex: none; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--mist2, #DCEEED); color: var(--deep, #0C2B2A); cursor: pointer; }
.bot-form button:hover { background: var(--teal, #12807D); color: #fff; }
.bot-aviso { margin: 0; padding: 0 .9rem .7rem; font-size: .7rem; color: var(--mute, #5C716F); }