/* ============================================
   AURA: panel lateral de chat y voz (js/aura.js).
   El ancho del panel y el del empuje de la página tienen que ser iguales.
   ============================================ */
.au-panel [hidden] { display: none !important; }

.au-panel {
  --au-azul: #1C7BBE;
  --au-noche: #12324A;
  --au-tinta: #1A2F44;
  --au-gris: #5B6B7A;
  --au-fondo: #F3F6F9;
  --au-tinte: #EAF3FB;
  position: fixed; inset: 0; z-index: 1100;
  display: flex; flex-direction: column;
  height: 100dvh;
  background: #fff; color: var(--au-tinta);
  font-family: 'Figtree', system-ui, sans-serif;
  transform: translateX(100%); visibility: hidden;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), visibility .28s;
}
.au-panel.is-open { transform: none; visibility: visible; }

@media (min-width: 861px) {
  .au-panel { left: auto; width: 440px; box-shadow: -24px 0 60px -20px rgba(7, 36, 68, .35); }
  .au-hbtn.au-only-cel { display: none; }
}
@media (max-width: 860px) {
  .au-hbtn.au-only-compu { display: none; }
}
/* Compu grande: el panel no tapa, empuja la página */
@media (min-width: 1280px) {
  body { transition: padding-right .28s cubic-bezier(.22, 1, .36, 1); }
  html[data-aura-panel="abierto"] body { padding-right: 440px; }
  html[data-aura-panel="abierto"] .au-panel { box-shadow: none; border-left: 1px solid rgba(26, 47, 68, .1); }
}

/* Con el panel abierto no hacen falta los botones flotantes */
body.aura-open .fbar, body.aura-open .au-launch, body.aura-open .wa-float,
body.lead-modal-open .au-launch { opacity: 0; translate: 0 16px; pointer-events: none; }

/* ---------- Encabezado ---------- */
.au-head {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--au-azul), var(--au-noche));
  color: #fff;
}
.au-avatar {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .15);
}
.au-spark { width: 22px; height: 22px; fill: #7DD3FC; }
.au-who { flex: 1; min-width: 0; }
.au-name { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.1; letter-spacing: .02em; color: #fff; }
.au-sub { margin: 4px 0 0; font-size: 12.5px; line-height: 1.2; color: rgba(255, 255, 255, .78); }
.au-hbtn {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: rgba(255, 255, 255, .88); cursor: pointer;
  transition: background-color .2s ease;
}
.au-hbtn:hover { background: rgba(255, 255, 255, .15); }
.au-hbtn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.au-ic { width: 20px; height: 20px; flex: none; }
.au-ic-lg { width: 28px; height: 28px; }

/* ---------- Pestañas ---------- */
.au-tabs { display: flex; gap: 4px; flex: none; padding: 8px 12px; background: #fff; border-bottom: 1px solid rgba(26, 47, 68, .08); }
.au-tab {
  position: relative; flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--au-gris);
  font: 600 14.5px/1 'Figtree', system-ui, sans-serif; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.au-tab .au-ic { width: 16px; height: 16px; }
.au-tab:hover { background: var(--au-fondo); }
.au-tab.is-on { background: var(--au-azul); color: #fff; }
.au-tab:focus-visible { outline: 2px solid var(--au-azul); outline-offset: 2px; }
.au-tab-dot { position: absolute; top: 6px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px #fff; }

/* ---------- Conversación ---------- */
.au-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.au-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--au-fondo); padding: 20px 16px; }
.au-inner { display: flex; flex-direction: column; gap: 12px; }
.au-msg { display: flex; }
.au-msg-user { justify-content: flex-end; }
.au-bubble {
  max-width: 88%; padding: 11px 16px; border-radius: 18px;
  font-size: 16px; line-height: 1.5; text-wrap: pretty; overflow-wrap: anywhere;
}
.au-msg-agent .au-bubble { background: #fff; color: var(--au-tinta); border-top-left-radius: 6px; box-shadow: 0 0 0 1px rgba(26, 47, 68, .07); }
.au-msg-user .au-bubble { background: var(--au-azul); color: #fff; border-top-right-radius: 6px; }
.au-bubble a { color: var(--au-azul); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.au-bubble strong { font-weight: 700; }
.au-in .au-bubble { animation: au-in .6s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes au-in { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }

.au-dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.au-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(26, 47, 68, .45); animation: au-dot 1.2s ease-in-out infinite; }
.au-dots i:nth-child(2) { animation-delay: .15s; }
.au-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes au-dot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.au-status { margin-left: 10px; font-size: 14px; color: var(--au-gris); }
.au-status:empty { display: none; }

.au-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.au-chips button {
  padding: 10px 16px; border: 0; border-radius: 16px;
  background: var(--au-tinte); color: var(--au-noche);
  font: 600 15px/1.25 'Figtree', system-ui, sans-serif; text-align: left; cursor: pointer;
  transition: background-color .2s ease;
}
.au-chips button:hover { background: #D8EAF8; }
.au-chips button:focus-visible { outline: 2px solid var(--au-azul); outline-offset: 2px; }

.au-err { padding: 10px 14px; border-radius: 14px; background: var(--au-tinte); color: var(--au-tinta); font-size: 15px; }
.au-err button { padding: 0; border: 0; background: none; color: var(--au-azul); font: 700 15px 'Figtree', system-ui, sans-serif; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ---------- Caja de escribir ---------- */
.au-form { flex: none; padding: 12px 12px 8px; background: #fff; border-top: 1px solid rgba(26, 47, 68, .08); }
.au-file {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px; padding: 6px 8px 6px 14px; border-radius: 12px;
  background: var(--au-tinte); color: var(--au-noche); font-size: 14px; font-weight: 600;
}
.au-file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-file button { display: grid; place-items: center; width: 30px; height: 30px; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.au-file .au-ic { width: 16px; height: 16px; }
.au-box { padding: 10px 10px 8px 14px; border-radius: 20px; background: var(--au-fondo); }
.au-box:focus-within { box-shadow: 0 0 0 2px var(--au-azul); background: #fff; }
.au-box textarea {
  display: block; width: 100%; max-height: 140px; padding: 2px 0 8px; border: 0; outline: 0; resize: none;
  background: transparent; color: var(--au-tinta);
  font: 400 16px/1.4 'Figtree', system-ui, sans-serif;
}
.au-box textarea::placeholder { color: var(--au-gris); }
.au-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.au-attach {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px 8px 8px; border: 0; border-radius: 999px;
  background: transparent; color: var(--au-azul);
  font: 700 14.5px/1 'Figtree', system-ui, sans-serif; cursor: pointer;
  transition: background-color .2s ease;
}
.au-attach:hover { background: var(--au-tinte); }
.au-attach:focus-visible { outline: 2px solid var(--au-azul); }
.au-attach .au-ic { width: 18px; height: 18px; }
.au-send {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--au-azul); color: #fff; cursor: pointer;
  transition: background-color .2s ease;
}
.au-send:hover:not(:disabled) { background: #16659E; }
.au-send:disabled { background: rgba(26, 47, 68, .15); cursor: not-allowed; }
.au-send:focus-visible { outline: 2px solid var(--au-noche); outline-offset: 2px; }
.au-note { margin: 8px 4px 0; font-size: 12.5px; line-height: 1.35; color: var(--au-gris); }

/* ---------- Voz ---------- */
.au-voz { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--au-fondo); text-align: center; }
.au-voz-mid { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; padding: 28px 24px; overflow: hidden; }
.au-voz-label { min-height: 28px; margin: 0; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--au-tinta); text-wrap: balance; }
.au-voz-foot { padding: 8px 24px 14px; }
.au-voz-foot p { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--au-gris); }
.au-voz-link { padding: 4px; border: 0; background: none; color: var(--au-azul); font: 600 15px/1.3 'Figtree', system-ui, sans-serif; text-underline-offset: 4px; cursor: pointer; }
.au-voz-link:hover { text-decoration: underline; }

.au-orb {
  position: relative; flex: none; display: block;
  width: min(250px, 36dvh); height: min(250px, 36dvh);
  padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
}
.au-orb:disabled { cursor: wait; }
.au-orb:focus-visible { outline: 3px solid var(--au-azul); outline-offset: 8px; }
.au-orb::before {
  content: ""; position: absolute; inset: -30px; border-radius: 50%; filter: blur(22px);
  background: radial-gradient(circle, rgba(125, 211, 252, .5) 0%, rgba(52, 211, 153, .18) 45%, transparent 70%);
}
.au-orb-body {
  position: absolute; inset: 8px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 34%, #7DD3FC 0%, #1C7BBE 60%, #16659E 100%);
  box-shadow: inset 0 0 50px rgba(18, 50, 74, .22);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.au-orb-body::before {
  content: ""; position: absolute; inset: -30%; filter: blur(26px);
  background: conic-gradient(from 0deg, #1C7BBE, #7DD3FC, #5EEAD4, #5BB4F0, #2B6CC4, #1C7BBE);
  opacity: .9;
}
.au-orb-body::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 42%);
}
.au-orb-mic {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 12px 28px -8px rgba(18, 50, 74, .5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: scale .25s ease;
}
.au-orb:hover .au-orb-mic { scale: 1.08; }
.au-orb-wave { position: absolute; inset: 8px; border-radius: 50%; border: 2px solid rgba(91, 180, 240, .8); opacity: 0; pointer-events: none; }
.au-orb.is-speaking .au-orb-body { transform: scale(1.05); }

/* ---------- Pie ---------- */
.au-powered {
  flex: none; display: block; padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(26, 47, 68, .08); background: #fff;
  color: var(--au-gris); font-size: 12px; line-height: 1.3; text-align: center; text-decoration: none;
  transition: color .2s ease;
}
.au-powered b { font-weight: 600; }
.au-powered:hover { color: var(--au-tinta); }

/* ---------- Botón flotante ---------- */
.au-ico { position: relative; display: inline-flex; flex: none; }
.au-live { position: absolute; top: -4px; right: -5px; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px #0E2A40; }
.au-live::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #34d399; opacity: .75; }

@property --au-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.au-launch {
  --au-a: 0deg;
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  display: inline-flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 22px; border: 2.5px solid transparent; border-radius: 999px;
  background:
    linear-gradient(135deg, #0E2A40, #163F62) padding-box,
    conic-gradient(from var(--au-a), #7DD3FC, #34D399, #FFFFFF, #5BB4F0, #7DD3FC) border-box;
  box-shadow: 0 0 22px rgba(125, 211, 252, .55), 0 0 56px rgba(52, 211, 153, .22), 0 14px 30px -14px rgba(8, 30, 52, .8);
  color: #fff; font: 700 15.5px/1 'Figtree', system-ui, sans-serif; cursor: pointer;
  transition: opacity .3s ease, translate .3s ease, box-shadow .25s ease;
}
.au-launch:hover { box-shadow: 0 0 30px rgba(125, 211, 252, .75), 0 0 72px rgba(52, 211, 153, .32), 0 14px 30px -14px rgba(8, 30, 52, .8); }
@media (max-width: 860px) { .au-launch { bottom: 84px; right: 12px; } }

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-anim) .au-live::before { animation: au-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
  @keyframes au-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

  html:not(.no-anim) .au-launch { animation: au-ring 4s linear infinite; }
  @keyframes au-ring { to { --au-a: 360deg; } }

  html:not(.no-anim) .au-orb-body::before { animation: au-spin 16s linear infinite; }
  html:not(.no-anim) .au-orb.is-connecting .au-orb-body::before { animation-duration: 5s; }
  html:not(.no-anim) .au-orb.is-active .au-orb-body::before { animation-duration: 8s; }
  html:not(.no-anim) .au-orb.is-speaking .au-orb-body::before { animation-duration: 3s; }
  @keyframes au-spin { to { transform: rotate(360deg); } }

  html:not(.no-anim) .au-orb.is-active .au-orb-wave { animation: au-wave 3.6s cubic-bezier(.33, 0, .2, 1) infinite; }
  html:not(.no-anim) .au-orb.is-active .au-orb-wave2 { animation-delay: 1.8s; }
  @keyframes au-wave { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.3); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .au-panel, body, .au-in .au-bubble { transition: none; animation: none; }
  .au-dots i { animation: none; opacity: .6; }
}

/* ---------- Botón de modo noche (2026-11-07) ----------
   Abajo a la derecha del cuadro de la conversación, flotando; en Voz, abajo a la derecha de la esfera */
.au-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.au-stage .au-scroll { padding-bottom: 60px; }
.au-voz-mid { position: relative; }
.au-theme {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: space-between;
  width: 64px; height: 34px; padding: 0 9px; border: 0; border-radius: 999px;
  background: #fff; color: #E8A317; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(26, 47, 68, .1), 0 8px 20px -10px rgba(18, 50, 74, .45);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.au-theme svg { position: relative; z-index: 1; width: 16px; height: 16px; }
.au-theme-luna { color: #7C8DA0; }
.au-theme-knob { position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #FFF4D6; transition: translate .25s cubic-bezier(.22, 1, .36, 1), background-color .25s ease; }
.au-theme:hover { box-shadow: 0 0 0 1.5px #7DD3FC, 0 8px 20px -10px rgba(18, 50, 74, .45); }
.au-theme:focus-visible { outline: 2px solid var(--au-azul); outline-offset: 2px; }

/* Modo noche: fondos azul noche y textos claros. El encabezado queda igual */
.au-panel.au-dark {
  --au-tinta: #E6EEF5;
  --au-gris: #9AABBC;
  --au-fondo: #0D1B28;
  --au-tinte: #1B3349;
  background: #12222F;
}
.au-dark .au-tabs, .au-dark .au-form, .au-dark .au-powered { background: #12222F; border-color: rgba(255, 255, 255, .08); }
.au-dark .au-tab-dot { box-shadow: 0 0 0 2px #12222F; }
.au-dark .au-msg-agent .au-bubble { background: #1A2D3D; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.au-dark .au-bubble a, .au-dark .au-attach, .au-dark .au-voz-link, .au-dark .au-err button { color: #7DD3FC; }
.au-dark .au-chips button { color: #DCEBF7; }
.au-dark .au-chips button:hover { background: #24425C; }
.au-dark .au-theme { background: #1A2D3D; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 20px -10px rgba(0, 0, 0, .6); }
.au-dark .au-dots i { background: rgba(230, 238, 245, .55); }
.au-dark .au-file { color: #DCEBF7; }
.au-dark .au-box:focus-within { background: #0D1B28; box-shadow: 0 0 0 2px #5BB4F0; }
.au-dark .au-send:disabled { background: rgba(255, 255, 255, .12); }
.au-dark .au-powered:hover { color: #fff; }
.au-dark .au-theme-knob { translate: 30px 0; background: #2B4660; }
.au-dark .au-theme-sol { color: #7C8DA0; }
.au-dark .au-theme-luna { color: #FDE68A; }
@media (prefers-reduced-motion: reduce) { .au-theme-knob { transition: none; } }
