/* ============================================================
   CHAT ASISTENTE · plugin p26-chat
   Autónomo: no depende del theme. Hereda sus colores si existen
   (--c-accent, --c-surface…) y si no usa los valores de respaldo.
   Los colores elegidos en Chat asistente → Apariencia llegan como
   estilo en línea sobre #chat y ganan a todo lo de aquí.
   ============================================================ */

.chat{
  --p26c-accent:     var(--c-accent, #DDFC59);
  --p26c-accent-ink: var(--c-accent-ink, #032C30);
  --p26c-bg:         var(--c-bg-deep, #012427);
  --p26c-surface:    var(--c-surface, #022B2F);
  --p26c-surface-2:  var(--c-surface-2, #12383C);
  --p26c-line:       var(--c-line, #12484C);
  --p26c-text:       var(--c-text, #E8F1EF);
  --p26c-white:      var(--c-white, #FFFFFF);
  --p26c-muted:      var(--c-muted, #B3C6C5);
  --p26c-dim:        var(--c-dim, #7E9C9D);
  --p26c-e-out:      var(--e-out, cubic-bezier(.22,.61,.36,1));
  --p26c-e-soft:     var(--e-soft, cubic-bezier(.4,0,.2,1));
  --p26c-t-fast:     var(--t-fast, .22s);
  --p26c-t-med:      var(--t-med, .38s);
  font-family:inherit; color:var(--p26c-text); line-height:1.5;
}

/* Reinicio mínimo con :where() para no ganar especificidad: cualquier regla
   de abajo lo pisa sin pelearse. */
:where(.chat) *, :where(.chat) *::before, :where(.chat) *::after{ box-sizing:border-box; }
:where(.chat) p{ margin:0; }
:where(.chat) button{
  font:inherit; color:inherit; background:none; border:0; padding:0; margin:0;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
:where(.chat) svg{ display:block; }
.chat__oculto{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.chat{ position:fixed; left:24px; bottom:24px; z-index:75; }

/* ---------- Botón flotante ---------- */
.chat__fab{
  position:relative;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--p26c-accent); color:var(--p26c-accent-ink);
  box-shadow:0 10px 30px rgba(0,0,0,.38);
  transition:transform var(--p26c-t-med) var(--p26c-e-out), filter var(--p26c-t-fast);
}
.chat__fab:hover{ transform:translateY(-3px) scale(1.05); filter:brightness(1.1); }
.chat__fab svg{ width:26px; height:26px; }
/* La X aparece cuando el panel está abierto */
.chat__fab .chat__ico-cerrar{ display:none; }
.chat.is-open .chat__fab .chat__ico-abrir{ display:none; }
.chat.is-open .chat__fab .chat__ico-cerrar{ display:block; }

/* Anillo de aviso, se detiene en cuanto se abre por primera vez */
.chat__fab::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--p26c-accent); opacity:.6;
  animation:chat-ring 2.4s var(--p26c-e-out) infinite;
}
.chat.is-seen .chat__fab::after{ animation:none; opacity:0; }
@keyframes chat-ring{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(1.75); opacity:0; }
}

.chat__badge{
  position:absolute; top:-2px; right:-2px;
  min-width:19px; height:19px; padding:0 5px; border-radius:10px;
  background:#FF6B6B; color:#fff;
  font-size:11px; font-weight:600; line-height:19px; text-align:center;
}
.chat.is-seen .chat__badge{ display:none; }

/* ---------- Panel ---------- */
.chat__panel{
  position:absolute; left:0; bottom:74px;
  width:min(370px, calc(100vw - 48px));
  max-height:min(560px, calc(100vh - 140px));
  display:flex; flex-direction:column;
  background:var(--p26c-bg);
  border:1px solid var(--p26c-line); border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.98);
  transform-origin:left bottom;
  transition:opacity var(--p26c-t-med) var(--p26c-e-soft),
             transform var(--p26c-t-med) var(--p26c-e-out),
             visibility var(--p26c-t-med);
}
.chat.is-open .chat__panel{ opacity:1; visibility:visible; transform:none; }

.chat__head{
  display:flex; align-items:center; gap:12px;
  padding:16px 16px 14px;
  border-bottom:1px solid var(--p26c-line);
  background:var(--p26c-surface-2);
  flex:none;
}
.chat__avatar{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--p26c-accent); color:var(--p26c-accent-ink);
}
.chat__avatar svg{ width:19px; height:19px; }
.chat__name{ font-size:14.5px; font-weight:600; }
.chat__status{ font-size:12px; color:var(--p26c-muted); display:flex; align-items:center; gap:6px; margin-top:2px; }
.chat__status i{ width:7px; height:7px; border-radius:50%; background:#3DDC84; flex:none; }
.chat__close{
  margin-left:auto; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; color:var(--p26c-muted);
  transition:background var(--p26c-t-fast), color var(--p26c-t-fast);
}
.chat__close:hover{ background:rgba(255,255,255,.07); color:var(--p26c-white); }
.chat__close svg{ width:16px; height:16px; }

/* ---------- Conversación ---------- */
.chat__body{
  flex:1; min-height:0; overflow-y:auto;
  padding:18px 16px; display:flex; flex-direction:column; gap:10px;
  scrollbar-width:thin; scrollbar-color:var(--p26c-line) transparent;
}
.chat__body::-webkit-scrollbar{ width:6px; }
.chat__body::-webkit-scrollbar-thumb{ background:var(--p26c-line); border-radius:3px; }

.chat__msg{
  max-width:82%; padding:11px 14px; font-size:14px; line-height:1.5;
  border-radius:14px;
  animation:chat-in .32s var(--p26c-e-out) both;
}
.chat__msg--bot{
  align-self:flex-start;
  background:var(--p26c-surface); border:1px solid var(--p26c-line);
  color:var(--p26c-text); border-bottom-left-radius:5px;
}
.chat__msg--yo{
  align-self:flex-end;
  background:var(--p26c-accent); color:var(--p26c-accent-ink);
  border-bottom-right-radius:5px; font-weight:500;
}
.chat__msg a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.chat__hora{ font-size:10.5px; color:var(--p26c-dim); align-self:flex-start; margin-top:-4px; }
.chat__msg--yo + .chat__hora{ align-self:flex-end; }
@keyframes chat-in{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:none; }
}

/* Puntos de "escribiendo" */
.chat__typing{ align-self:flex-start; display:flex; gap:4px; padding:13px 14px;
  background:var(--p26c-surface); border:1px solid var(--p26c-line);
  border-radius:14px; border-bottom-left-radius:5px; }
.chat__typing span{
  width:6px; height:6px; border-radius:50%; background:var(--p26c-dim);
  animation:chat-dot 1.1s infinite;
}
.chat__typing span:nth-child(2){ animation-delay:.15s; }
.chat__typing span:nth-child(3){ animation-delay:.3s; }
@keyframes chat-dot{
  0%,60%,100%{ transform:translateY(0); opacity:.45; }
  30%{ transform:translateY(-4px); opacity:1; }
}

/* ---------- Opciones rápidas ---------- */
.chat__opts{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:0 16px 14px; flex:none;
}
.chat__opts:empty{ display:none; }
.chat__opt{
  padding:9px 13px; border-radius:20px;
  border:1px solid var(--p26c-accent); color:var(--p26c-accent);
  font-size:13px; line-height:1;
  transition:background var(--p26c-t-fast), color var(--p26c-t-fast);
}
.chat__opt:hover{ background:var(--p26c-accent); color:var(--p26c-accent-ink); }

/* ---------- Campo de escritura ---------- */
.chat__form{
  display:flex; align-items:center; gap:8px;
  padding:12px 14px; border-top:1px solid var(--p26c-line);
  background:var(--p26c-surface-2); flex:none;
}
.chat__form input{
  flex:1; min-width:0; padding:11px 13px;
  font:inherit; font-size:14px; color:var(--p26c-white);
  background:var(--p26c-bg);
  border:1px solid var(--p26c-line); border-radius:10px;
  transition:border-color var(--p26c-t-fast);
}
.chat__form input::placeholder{ color:#5C7B7C; }
.chat__form input:focus{ outline:none; border-color:var(--p26c-accent); }
.chat__form input:disabled{ opacity:.55; cursor:not-allowed; }
.chat__enviar{
  width:40px; height:40px; border-radius:10px; flex:none;
  display:grid; place-items:center;
  background:var(--p26c-accent); color:var(--p26c-accent-ink);
  transition:filter var(--p26c-t-fast), opacity var(--p26c-t-fast);
}
.chat__enviar:hover:not(:disabled){ filter:brightness(1.1); }
.chat__enviar:disabled{ opacity:.4; cursor:not-allowed; }
.chat__enviar svg{ width:17px; height:17px; }

/* ---------- Móvil ---------- */
@media (max-width:600px){
  .chat{ left:16px; bottom:16px; right:16px; }
  .chat__panel{
    width:auto; right:0;
    max-height:min(72vh, calc(100vh - 120px));
  }
  .chat__fab{ width:52px; height:52px; }
}

@media (prefers-reduced-motion:reduce){
  .chat__fab::after{ animation:none; }
  .chat__msg{ animation:none; }
}

/* ---------- Variantes de los ajustes ---------- */
.chat--derecha{ left:auto; right:24px; }
.chat--derecha .chat__panel{ left:auto; right:0; transform-origin:right bottom; }
.chat--derecha .chat__fab{ margin-left:auto; }
.chat--sin-anillo .chat__fab::after{ display:none; }
@media (max-width:600px){
  .chat--derecha{ left:16px; right:16px; }
  .chat--sin-movil{ display:none; }
}

/* ---------- Verificación (Turnstile) ---------- */
.chat__captcha{ width:100%; display:flex; flex-direction:column; gap:8px; }
.chat__captcha p{ font-size:12.5px; color:var(--p26c-muted); }
.chat__captcha > div:empty{ display:none; }

/* ---------- Línea de estado en modo admin ----------
   Para quien administra, ahí no pone «En línea» sino qué modelo contestó
   (o si la respuesta salió de la lógica). Es información de depuración, así
   que va en pequeño y en el color de acento. */
.chat--admin .chat__status{ color:var(--p26c-accent); font-size:11px; line-height:1.35; }
.chat--admin .chat__status i{ background:var(--p26c-accent); }
.chat--admin .chat__head > div:nth-child(2){ min-width:0; }

/* El SVG de marca es cuadrado y con aire propio: un poco más grande que el
   icono de trazo al que sustituye para que pese lo mismo ópticamente. */
.chat__fab .chat__ico-abrir svg{ width:34px; height:34px; }
.chat__avatar svg{ width:26px; height:26px; }

/* ---------- Pedido de cotización ---------- */
.chat__lead{ flex:none; padding:0 16px 14px; }
.chat__lead[hidden]{ display:none; }
.chat__lead-cta[hidden]{ display:none; }
.chat__lead-cta{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 14px; border-radius:12px;
  background:var(--p26c-accent); color:var(--p26c-accent-ink);
  font-size:14px; font-weight:600;
  transition:filter var(--p26c-t-fast), transform var(--p26c-t-fast);
  animation:chat-in .32s var(--p26c-e-out) both;
}
.chat__lead-cta:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.chat__lead-cta svg{ width:16px; height:16px; }
.chat__lead-form[hidden]{ display:none; }
.chat__lead-form{ display:grid; gap:8px; animation:chat-in .32s var(--p26c-e-out) both; }
.chat__lead-tit{ font-size:13px; color:var(--p26c-text); font-weight:600; }
.chat__lead-form input, .chat__lead-form textarea{
  width:100%; padding:10px 12px; font:inherit; font-size:14px;
  color:var(--p26c-white); background:var(--p26c-bg);
  border:1px solid var(--p26c-line); border-radius:10px; resize:vertical;
}
.chat__lead-form input::placeholder, .chat__lead-form textarea::placeholder{ color:#5C7B7C; }
.chat__lead-form input:focus, .chat__lead-form textarea:focus{ outline:none; border-color:var(--p26c-accent); }
.chat__lead-enviar{
  padding:11px 14px; border-radius:10px; font-size:14px; font-weight:600;
  background:var(--p26c-accent); color:var(--p26c-accent-ink);
  transition:filter var(--p26c-t-fast);
}
.chat__lead-enviar:hover:not(:disabled){ filter:brightness(1.1); }
.chat__lead-enviar:disabled{ opacity:.5; cursor:not-allowed; }
.chat__lead-error{ font-size:12.5px; color:#FF8F8F; }
.chat__lead-error[hidden]{ display:none; }
/* Trampa para bots: fuera de la vista, pero no con display:none, que algunos
   robots detectan. */
.chat__trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* Intención clara de cerrar: el botón se hace notar una vez. */
.chat__lead-cta.is-listo{ animation:chat-in .32s var(--p26c-e-out) both, chat-latido 1.1s var(--p26c-e-out) 2; }
@keyframes chat-latido{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(221,252,89,.45); }
  50%{ transform:scale(1.03); box-shadow:0 0 0 10px rgba(221,252,89,0); }
}
@media (prefers-reduced-motion:reduce){ .chat__lead-cta.is-listo{ animation:none; } }

/* Puntos de «esperando turno» dentro del mensaje de la cola. */
.chat__cola{ display:inline-flex; gap:4px; margin-left:8px; vertical-align:middle; }
.chat__cola i{ width:5px; height:5px; border-radius:50%; background:var(--p26c-accent); animation:chat-dot 1.1s infinite; }
.chat__cola i:nth-child(2){ animation-delay:.15s; }
.chat__cola i:nth-child(3){ animation-delay:.3s; }