/* P421 — Victoria Widget Fortune 500 */
@keyframes v421-breathe {
  0%, 100% { transform: scale(0.96); }
  50% { transform: scale(1.04); }
}
@keyframes v421-pulse-ring {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}
@keyframes v421-typing {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}
@keyframes v421-orb-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#v421-root { --v421-blue: #1e3a8a; --v421-blue-b: #2563eb; --v421-gold: #d4af37; --v421-bg: #f7f9fc; font-family: "Inter", -apple-system, sans-serif; }

#v421-fab {
  position: fixed; bottom: 24px; right: 24px; width: 72px; height: 72px; border-radius: 50%;
  border: none; cursor: pointer; z-index: 99990;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #d4af37 100%);
  box-shadow: 0 12px 32px rgba(30,58,138,0.32), 0 4px 12px rgba(212,175,55,0.16);
  color: #fff; font-size: 32px; font-weight: 700;
  animation: v421-breathe 3s ease-in-out infinite;
  transition: transform 200ms cubic-bezier(0.16,1,0.3,1), box-shadow 200ms;
}
#v421-fab:hover { transform: scale(1.08); }
#v421-fab .v421-dot {
  position: absolute; bottom: 8px; right: 8px; width: 12px; height: 12px;
  border-radius: 50%; background: #10b981; border: 2px solid #fff;
}
#v421-fab.processing .v421-dot { background: #f59e0b; }
#v421-fab.error .v421-dot { background: #ef4444; }

#v421-panel {
  position: fixed; bottom: 108px; right: 24px; width: 420px; max-width: calc(100vw - 32px);
  height: 640px; max-height: calc(100vh - 120px);
  background: #fff; border-radius: 20px; z-index: 99989;
  box-shadow: 0 24px 48px rgba(10,14,26,0.16);
  display: none; flex-direction: column; overflow: hidden;
  border: 1px solid #eef1f6;
}
#v421-panel.open { display: flex; }

.v421-header {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-bottom: 1px solid #eef1f6; min-height: 72px;
}
.v421-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #1e3a8a, #d4af37);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 22px;
}
.v421-header h2 { margin: 0; font-size: 18px; font-weight: 600; color: #1a1f36; }
.v421-header small { color: #718096; font-size: 13px; }
.v421-online { color: #10b981; font-size: 12px; }
.v421-header-actions { margin-left: auto; display: flex; gap: 8px; }
.v421-header-actions button { background: none; border: none; font-size: 20px; cursor: pointer; color: #4a5568; }

.v421-tabs { display: flex; gap: 4px; padding: 8px 12px; background: #fafbfc; }
.v421-tabs button {
  flex: 1; border: none; background: transparent; padding: 8px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: #718096; cursor: pointer;
}
.v421-tabs button.active { background: #fff; color: #1e3a8a; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

.v421-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  background: linear-gradient(180deg, #fff 0%, #eff6ff 100%);
}
.v421-msg { max-width: 85%; margin-bottom: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.45; }
.v421-msg.bot {
  background: #fff; border-radius: 16px 16px 16px 4px;
  box-shadow: 0 2px 8px rgba(10,14,26,0.06); color: #1a1f36;
}
.v421-msg.user {
  margin-left: auto; background: #1e3a8a; color: #fff;
  border-radius: 16px 16px 4px 16px;
}
.v421-ts { font-size: 10px; color: #a0aec0; margin-top: 4px; }
.v421-typing { display: flex; gap: 4px; padding: 8px 12px; }
.v421-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: #2563eb;
  animation: v421-typing 1.2s infinite;
}
.v421-typing span:nth-child(2) { animation-delay: 0.15s; }
.v421-typing span:nth-child(3) { animation-delay: 0.3s; }

.v421-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
.v421-chips button {
  border: 1px solid #dbeafe; background: #fff; border-radius: 999px;
  padding: 6px 12px; font-size: 12px; cursor: pointer; color: #1e3a8a;
}

.v421-voice-zone { display: none; flex-direction: column; align-items: center; padding: 20px; }
.v421-voice-zone.active { display: flex; }
.v421-speak-btn {
  width: 88px; height: 88px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #fff; font-size: 28px;
  box-shadow: 0 8px 24px rgba(30,58,138,0.25);
  transition: transform 200ms;
}
.v421-speak-btn.active { background: linear-gradient(135deg, #2563eb, #60a5fa); animation: v421-breathe 2s infinite; }
.v421-voice-hint { margin-top: 12px; font-size: 13px; color: #718096; text-align: center; }

.v421-footer { padding: 12px; border-top: 1px solid #eef1f6; display: flex; gap: 8px; }
.v421-footer textarea {
  flex: 1; border: 1px solid #eef1f6; border-radius: 12px; padding: 10px 12px;
  resize: none; font-family: inherit; font-size: 14px;
}
.v421-send {
  background: linear-gradient(135deg, #d4af37, #f5b942); border: none; border-radius: 12px;
  padding: 0 18px; font-weight: 700; cursor: pointer; color: #0a0e1a;
}

#v421-overlay {
  display: none; position: fixed; inset: 0; z-index: 99999;
  background: radial-gradient(circle at 50% 40%, #eff6ff 0%, #fff 70%);
  flex-direction: column; align-items: center; justify-content: center;
}
#v421-overlay.open { display: flex; }
.v421-exit {
  position: absolute; top: 20px; right: 20px; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid #eef1f6; background: #fff; cursor: pointer; font-size: 20px;
}
.v421-orb-wrap { width: 320px; height: 320px; position: relative; display: grid; place-items: center; }
.v421-orb {
  width: 200px; height: 200px; border-radius: 50%;
  background: linear-gradient(135deg, #1e3a8a, #60a5fa, #d4af37);
  filter: blur(0.5px);
  box-shadow: 0 0 60px rgba(37,99,235,0.35);
  animation: v421-breathe 2s ease-in-out infinite;
  transition: background 400ms, box-shadow 400ms;
}
.v421-orb-ring {
  position: absolute; inset: 20px; border-radius: 50%;
  border: 2px solid rgba(37,99,235,0.2);
  animation: v421-pulse-ring 2s ease-out infinite;
}
.v421-orb.escuchando { background: linear-gradient(135deg, #2563eb, #3b82f6); box-shadow: 0 0 80px rgba(37,99,235,0.5); }
.v421-orb.pensando { background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 0 60px rgba(99,102,241,0.4); }
.v421-orb.hablando { background: linear-gradient(135deg, #d4af37, #2563eb); box-shadow: 0 0 70px rgba(212,175,55,0.45); }
.v421-orb-status { margin-top: 24px; font-size: 18px; font-weight: 600; color: #1e3a8a; text-align: center; max-width: 90%; }
.v421-karaoke { margin-top: 12px; font-size: 15px; color: #4a5568; text-align: center; max-width: 480px; }
.v421-karaoke .on { color: #1e3a8a; font-weight: 600; }

@media (max-width: 768px) {
  #v421-panel.open { inset: 0; width: 100%; height: 100%; max-height: 100%; bottom: 0; right: 0; border-radius: 0; }
  #v421-fab { bottom: 16px; right: 16px; }
}

/* ═══ FLOTA «cada quien en lo suyo» · P3651, coherencia (19/10/2026 5:36 p.m., hora Colombia) ═══
   Medido a 375 px en /tienda (visitante): el chat abierto quedaba de 343 px pegado a la izquierda (el max-width de
   escritorio, calc(100vw - 32px), seguía mandando), con una franja de la página y el botón de las galletas asomando
   a la derecha; y la pestaña «Conversación» se partía en «Conversa / ción». Ahora, en el celular, el chat ocupa la
   pantalla entera y las pestañas no parten palabras (en los celulares angostos cada pestaña mide lo que su palabra). */
@media (max-width: 768px) {
  #v421-panel.open { max-width: 100%; }
}
.v421-tabs button { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
@media (max-width: 400px) {
  .v421-tabs button { flex: 1 1 auto; }
}

/* ═══ P1363: el perro SOLO en PNG (sin caja azul ni huella) y jamás tapa ═══ */
#victoria-fab{background:transparent !important;box-shadow:none !important;
  border-radius:50% !important;animation:none !important}
#victoria-fab img{border-radius:50% !important;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
#victoria-fab::before,#victoria-fab::after{display:none !important}
#victoria-fab > *:not(img){display:none !important}
/* con el panel abierto el perro descansa: ya está en el header del chat */
#victoria-fab[aria-expanded="true"]{display:none !important}

/* ═══ P1364: burbujas premium LEGIBLES (la pregunta azul no se leía) ═══ */
.victoria-msg.user,.v421-msg.user{
  background:linear-gradient(145deg,#2563eb,#1e3a8a) !important;
  color:#ffffff !important;text-shadow:0 1px 2px rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 6px 16px rgba(30,58,138,.4), inset 0 1px 0 rgba(255,255,255,.22) !important;
  border-radius:16px 16px 4px 16px !important;font-weight:600 !important}
.victoria-msg.user *{color:#ffffff !important}
.victoria-msg.user small,.victoria-msg.user time,.victoria-msg.user .hora{
  color:rgba(255,255,255,.78) !important;text-shadow:none}
.victoria-msg.bot{background:#ffffff !important;border:1px solid #e6ebf4 !important;
  color:#0f172a !important;box-shadow:0 4px 14px rgba(15,23,42,.09) !important;
  border-radius:16px 16px 16px 4px !important}

/* ═══ P1364: PROHIBIDO TAPAR — con el panel abierto el perro se aparta SIEMPRE,
   sin importar cómo se abrió (CSS :has, cero dependencia del clic) ═══ */
body:has(#victoria-panel.open) #victoria-fab{display:none !important}

/* ═══ P1366: los IDs REALES del widget v2 son v421-* (los fixes P1363/P1364
   apuntaban al widget v1 neutralizado) — perro SOLO PNG y JAMAS tapa ═══ */
#v421-fab{background:transparent !important;box-shadow:none !important;
  border-radius:50% !important;animation:none !important}
#v421-fab img{border-radius:50% !important;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
#v421-fab .v421-dot{display:none !important} /* la "huella" verde fuera */
#v421-fab::before,#v421-fab::after{display:none !important}
/* con el panel abierto el perro descansa — por atributo Y por :has (doble candado) */
#v421-fab[aria-expanded="true"]{display:none !important}
body:has(#v421-panel.open) #v421-fab{display:none !important}

/* ═══ P1367: el perro de la IA VIVO — flota suave, jamás desaparece cerrado ═══ */
@keyframes vt67flota{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
#v421-fab{animation:vt67flota 3.2s ease-in-out infinite !important}
#v421-fab:hover{animation-play-state:paused !important;transform:scale(1.08)}
@media(prefers-reduced-motion:reduce){#v421-fab{animation:none !important}}

/* ═══ P4184 (2) (6-nov-2026, 2:01 p.m.): el botón «Descargar el recibo» que dejó el «sí» (dorado: plata; 44 px) ═══ */
.v421-msg.bot.v421-recibo{background:none;box-shadow:none;padding:0}
.v421-descarga{display:inline-flex;align-items:center;gap:8px;min-height:44px;box-sizing:border-box;padding:10px 18px;
  border-radius:14px;background:linear-gradient(145deg,#b45309,#92400e);color:#fff;-webkit-text-fill-color:#fff;
  font-weight:800;font-size:15px;text-decoration:none;box-shadow:0 6px 18px rgba(146,64,14,.30);cursor:pointer}
.v421-descarga:focus-visible{outline:3px solid #1e3a8a;outline-offset:2px}

/* ═══ P4202 (7-nov-2026, 9:29 a.m. en adelante): la factura A LA VISTA en el chat del equipo — la imagen a todo color
   arriba (la cabeza del papel, a lo ancho; tocarla la descarga), y sus botones: JPG (dorado), PDF (azul) y Compartir
   (verde). La pieza la arma oye.js (Q3839.piezaRecibo, prefijo v421-); aquí solo su estilo. ═══ */
.v421-recibo-pieza{display:flex;flex-wrap:wrap;gap:8px;max-width:100%}
.v421-recibo-pieza .v421-descarga{flex:1 1 160px;justify-content:center}
.v421-recibo-ver{flex:1 1 100%;display:block;border-radius:14px;overflow:hidden;line-height:0;background:#fff;
  border:1px solid #e2e8f0;box-shadow:0 6px 16px -10px rgba(15,23,42,.35)}
.v421-recibo-img{display:block;width:100%;height:auto;max-height:240px;object-fit:cover;object-position:top center}
.v421-recibo-ver:focus-visible{outline:3px solid #1e3a8a;outline-offset:2px}
.v421-descarga-pdf{background:linear-gradient(145deg,#2563eb,#1e3a8a);box-shadow:0 6px 18px rgba(30,58,138,.28)}
.v421-compartir{border:0;font-family:inherit;background:linear-gradient(145deg,#15803d,#166534);
  box-shadow:0 6px 18px rgba(22,101,52,.28)}
.v421-recibo-ver[hidden],.v421-compartir[hidden]{display:none}