/* Asistente de chat de la tienda (kernel): FAB flotante + panel + modo conversación.
   Era un <style> inline del partial `_chatbot_widget.html` (11 KB en cada vista, sin
   caché); desde 2026-10-18 es este estático con hash. Las clases son `.sfbot*`. */
.sfbot{position:fixed;right:1.3rem;bottom:1.3rem;z-index:9990;font-family:inherit}
.sfbot-fab{width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;color:#fff;font-size:1.5rem;
  background:linear-gradient(135deg,#7c3aed,#4f46e5);box-shadow:0 12px 30px -10px rgba(79,70,229,.7);
  transition:transform .18s ease,filter .18s ease;animation:sfbotPulse 3.2s ease-in-out infinite}
.sfbot-fab:hover{transform:translateY(-2px) scale(1.04);filter:brightness(1.06)}
@keyframes sfbotPulse{0%,100%{box-shadow:0 12px 30px -10px rgba(79,70,229,.7),0 0 0 0 rgba(124,58,237,.45)}
  50%{box-shadow:0 12px 30px -10px rgba(79,70,229,.7),0 0 0 14px rgba(124,58,237,0)}}
.sfbot-panel{position:absolute;right:0;bottom:74px;width:min(92vw,380px);height:min(70vh,560px);
  display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:#fff;
  border:1px solid rgba(148,163,184,.25);box-shadow:0 24px 60px -18px rgba(15,23,42,.45);
  animation:sfbotIn .26s cubic-bezier(.21,1.02,.73,1) both}
@keyframes sfbotIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.sfbot-panel[hidden]{display:none}
.sfbot-head{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;color:#fff;
  background:linear-gradient(135deg,#6d28d9,#4f46e5)}
.sfbot-orb{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:1rem;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35)}
.sfbot-head__t{flex:1;line-height:1.15;font-size:.92rem}
.sfbot-head__t strong{display:block;font-weight:800}
.sfbot-status{font-size:.7rem;opacity:.9}.sfbot-status i{font-size:.5rem;color:#86efac;margin-right:.25rem}
.sfbot-iconbtn{width:32px;height:32px;border-radius:9px;border:none;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.15);transition:background .15s}
.sfbot-iconbtn:hover{background:rgba(255,255,255,.28)}
.sfbot-iconbtn.sfbot-on{background:#fff;color:#6d28d9}
.sfbot-iconbtn.sfbot-listening{background:#e11d48;animation:sfbotRec 1.1s ease-in-out infinite}
@keyframes sfbotRec{0%,100%{box-shadow:0 0 0 0 rgba(225,29,72,.5)}50%{box-shadow:0 0 0 7px rgba(225,29,72,0)}}
.sfbot-log{flex:1;overflow-y:auto;padding:1rem;background:#f8fafc}
.sfbot-empty{text-align:center;color:#64748b;font-size:.86rem;padding:.6rem}
.sfbot-empty[hidden]{display:none}
.sfbot-empty__o{width:56px;height:56px;margin:0 auto .6rem;border-radius:16px;display:grid;place-items:center;font-size:1.4rem;color:#fff;
  background:linear-gradient(135deg,#7c3aed,#4f46e5)}
.sfbot-chips{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:.7rem}
.sfbot-chip{cursor:pointer;font-size:.78rem;font-weight:600;padding:.4rem .7rem;border-radius:12px;color:#4338ca;
  background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.25);transition:all .15s}
.sfbot-chip:hover{background:rgba(99,102,241,.2)}
.sfbot-row{display:flex;gap:.5rem;margin-bottom:.7rem;animation:sfbotR .28s ease both}
.sfbot-row--user{flex-direction:row-reverse}
@keyframes sfbotR{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sfbot-av{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:.72rem}
.sfbot-av--ai{color:#fff;background:linear-gradient(135deg,#7c3aed,#4f46e5)}
.sfbot-av--user{color:#475569;background:#e2e8f0}
.sfbot-bubble{max-width:80%;padding:.6rem .8rem;border-radius:14px;font-size:.86rem;line-height:1.45;white-space:normal}
.sfbot-bubble--user{border-top-right-radius:5px;color:#fff;background:linear-gradient(135deg,#7c3aed,#4f46e5)}
.sfbot-bubble--ai{border-top-left-radius:5px;color:#1e293b;background:#fff;border:1px solid rgba(148,163,184,.25)}
.sfbot-bubble--err{color:#e11d48;background:#fff1f2;border-color:#fecdd3}
.sfbot-bubble--ai strong{color:#4338ca}
.sfbot-bubble--ai a{color:#4f46e5;text-decoration:underline;font-weight:600}
.sfbot-bubble--ai ul{margin:.3rem 0 .3rem 1rem;list-style:disc}
.sfbot-bubble--ai .h{font-weight:800;margin:.3rem 0}
.sfbot-typing span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#8b5cf6;margin-right:3px;animation:sfbotB 1.2s infinite}
.sfbot-typing span:nth-child(2){animation-delay:.18s}.sfbot-typing span:nth-child(3){animation-delay:.36s}
@keyframes sfbotB{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
.sfbot-form{display:flex;align-items:center;gap:.4rem;padding:.6rem;border-top:1px solid rgba(148,163,184,.2);background:#fff}
.sfbot-mic{background:#f1f5f9;color:#64748b}
.sfbot-mic:hover{background:#e2e8f0;color:#7c3aed}
.sfbot-input{flex:1;border:1px solid rgba(148,163,184,.4);border-radius:12px;padding:.55rem .8rem;font-size:.86rem;color:#1e293b;outline:none}
.sfbot-input:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.2)}
.sfbot-send{flex:none;width:40px;height:40px;border-radius:12px;border:none;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,#7c3aed,#4f46e5);transition:filter .15s,transform .15s}
.sfbot-send:hover{filter:brightness(1.07);transform:translateY(-1px)}
.sfbot-send:disabled,.sfbot-input:disabled{opacity:.55}
.dark .sfbot-panel{background:#0f172a;border-color:rgba(51,65,85,.7)}
.dark .sfbot-log{background:#020617}
.dark .sfbot-bubble--ai{background:#1e293b;color:#e2e8f0;border-color:rgba(51,65,85,.7)}
.dark .sfbot-bubble--ai strong{color:#c7d2fe}
.dark .sfbot-form{background:#0f172a;border-top-color:rgba(51,65,85,.6)}
.dark .sfbot-input{background:#020617;color:#f1f5f9;border-color:rgba(71,85,105,.7)}
.dark .sfbot-mic{background:#1e293b;color:#94a3b8}
.dark .sfbot-av--user{background:#334155;color:#cbd5e1}

/* === Modo conversación por voz — IX/UI/UX: estados live (Escuchando /
   Pensando / Hablando) con orb pulsante + ecualizador animado === */
.sfbot-status{display:inline-flex;align-items:center;gap:.34rem}
.sfbot-dot{width:.5rem;height:.5rem;border-radius:50%;background:#86efac;flex:none}
.sfbot--listening .sfbot-dot,.sfbot--speaking .sfbot-dot,.sfbot--thinking .sfbot-dot{display:none}
.sfbot-eq{display:none;align-items:flex-end;gap:2px;height:13px}
.sfbot--listening .sfbot-eq,.sfbot--speaking .sfbot-eq{display:inline-flex}
.sfbot-eq span{width:3px;height:4px;border-radius:2px;background:#fff;display:block;animation:sfbotEq .9s ease-in-out infinite}
.sfbot-eq span:nth-child(2){animation-delay:.15s}.sfbot-eq span:nth-child(3){animation-delay:.3s}.sfbot-eq span:nth-child(4){animation-delay:.45s}
.sfbot--speaking .sfbot-eq span{animation-duration:.55s;background:#ddd6fe}
@keyframes sfbotEq{0%,100%{height:4px}50%{height:13px}}
.sfbot--voice .sfbot-orb{background:rgba(255,255,255,.32);animation:sfbotRec 1.6s ease-in-out infinite}
.sfbot--listening .sfbot-orb{animation:sfbotRec 1.05s ease-in-out infinite}
.sfbot-iconbtn.sfbot-on{box-shadow:0 0 0 3px rgba(255,255,255,.4) inset}
/* CTA prominente "Hablar por voz" en el estado vacío */
.sfbot-voicecta{display:inline-flex;align-items:center;gap:.5rem;margin-top:.9rem;cursor:pointer;
  font-size:.82rem;font-weight:700;color:#fff;padding:.5rem .95rem;border-radius:999px;border:none;
  background:linear-gradient(135deg,#7c3aed,#4f46e5);box-shadow:0 10px 22px -10px rgba(79,70,229,.8);
  transition:transform .15s,filter .15s}
.sfbot-voicecta[hidden]{display:none}
.sfbot-voicecta:hover{transform:translateY(-1px);filter:brightness(1.07)}
.sfbot-voicecta__pulse{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.22);animation:sfbotRec 1.5s ease-in-out infinite}
.sfbot-listenbar{display:none;align-items:center;justify-content:center;gap:.5rem;
  padding:.55rem;font-size:.8rem;font-weight:600;color:#6d28d9;background:rgba(124,58,237,.08);
  border-top:1px solid rgba(148,163,184,.2)}
.sfbot--voice .sfbot-listenbar{display:flex}
.sfbot--voice .sfbot-form{display:none}
.dark .sfbot-listenbar{color:#c7d2fe;background:rgba(124,58,237,.18);border-top-color:rgba(51,65,85,.6)}
.sfbot-listenbar__mic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#7c3aed,#4f46e5);cursor:pointer;border:none;flex:none}
.sfbot--listening .sfbot-listenbar__mic{animation:sfbotRec 1.05s ease-in-out infinite}
.sfbot-listenbar__exit{cursor:pointer;border:none;background:transparent;color:inherit;font-weight:700;text-decoration:underline}

/* === Mobile (<=768px): FAB abajo-izquierda (lejos del mini-cart de la
   derecha), elevado sobre la barra sticky add-to-cart cuando existe, con
   safe-area iOS; el panel pasa a bottom-sheet full-width. === */
@media (max-width:768px){
  .sfbot{right:auto;left:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));
    transition:transform .22s ease,opacity .22s ease}
  /* Discreto: mientras se lee hacia abajo el lanzador se esconde (no tapa el texto
     ni los íconos del pie) y vuelve apenas se sube, al llegar arriba o al tocarlo con
     el teclado. Con el panel abierto nunca se esconde. */
  .sfbot.sfbot--oculto{transform:translateY(calc(100% + 2rem));opacity:0;pointer-events:none}
  .sfbot[data-sticky-bar]{bottom:calc(5.25rem + env(safe-area-inset-bottom,0px))}
  .sfbot-fab{width:54px;height:54px;font-size:1.35rem}
  .sfbot-panel{position:fixed;left:0;right:0;bottom:0;top:auto;
    width:100%;height:min(85vh,640px);max-height:85vh;border-radius:20px 20px 0 0}
  .sfbot-form{padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px))}
}
@media (max-width:768px) and (orientation:landscape){
  .sfbot-panel{height:92vh;max-height:92vh}
}

/* === Premium IX/UX: turno claro (refuerza el half-duplex / no-bidireccional).
   El rail de voz se tiñe según QUIÉN tiene la palabra → el cliente entiende de un
   vistazo cuándo le toca hablar (verde) y cuándo escuchar al asistente (violeta). === */
.sfbot-listenbar{transition:background .25s ease,color .2s ease}
.sfbot--listening .sfbot-listenbar{background:rgba(16,185,129,.12);color:#047857}
.sfbot--speaking  .sfbot-listenbar{background:rgba(124,58,237,.12);color:#6d28d9}
.sfbot--thinking  .sfbot-listenbar{background:rgba(245,158,11,.13);color:#b45309}
.dark .sfbot--listening .sfbot-listenbar{background:rgba(16,185,129,.20);color:#6ee7b7}
.dark .sfbot--speaking  .sfbot-listenbar{background:rgba(124,58,237,.24);color:#c7d2fe}
.dark .sfbot--thinking  .sfbot-listenbar{background:rgba(245,158,11,.20);color:#fcd34d}
/* Foco visible para teclado (a11y enterprise) — anillo claro en botones/links. */
.sfbot :focus-visible{outline:2px solid #a78bfa;outline-offset:2px;border-radius:10px}

/* Dark mode pareado (S25): el panel sigue el tema de la tienda. */
.dark .sfbot-panel{background:#0f172a;border-color:rgba(51,65,85,.7)}
.dark .sfbot-log{background:#0b1220}
.dark .sfbot-empty{color:#94a3b8}
.dark .sfbot-bubble--ai{background:#1e293b;color:#e2e8f0;border-color:rgba(51,65,85,.8)}
.dark .sfbot-bubble--ai strong{color:#a5b4fc}
.dark .sfbot-bubble--ai a{color:#a5b4fc}
.dark .sfbot-bubble--err{color:#fda4af;background:#3f1d2b;border-color:#9f1239}
.dark .sfbot-av--user{color:#cbd5e1;background:#334155}
.dark .sfbot-form{background:#0f172a;border-top-color:rgba(51,65,85,.7)}
.dark .sfbot-input{background:#1e293b;color:#e2e8f0;border-color:rgba(51,65,85,.8)}
.dark .sfbot-input::placeholder{color:#64748b}
.dark .sfbot-mic{background:#1e293b;color:#94a3b8}
.dark .sfbot-chip{color:#c7d2fe;background:rgba(99,102,241,.18);border-color:rgba(99,102,241,.4)}

/* Accesibilidad: respeta prefers-reduced-motion — sin pulsos ni animaciones para
   usuarios sensibles al movimiento (hallmark enterprise/a11y). */
@media (prefers-reduced-motion: reduce){
  .sfbot,.sfbot-fab,.sfbot-iconbtn.sfbot-listening,.sfbot--voice .sfbot-orb,
  .sfbot--listening .sfbot-orb,.sfbot-eq span,.sfbot-typing span,.sfbot-row,
  .sfbot-voicecta__pulse,.sfbot-listenbar__mic,.sfbot-panel,.sfbot-dot{
    animation:none!important;transition:none!important}
}