/* ============================================================
   Vendedor Online (IA) — página pública, estética propia y más "tech"
   que el panel interno a propósito (audiencia distinta: un visitante
   del futuro sitio web, no el staff). Reusa los tokens de marca
   (--brand/--accent de style.css) sobre un fondo oscuro con degradé.
   Sin librerías externas — todo CSS/SVG a mano, mismo criterio que el
   resto del proyecto.
   ============================================================ */
:root{
  --vo-bg-1:#081814;
  --vo-bg-2:#0B2620;
  --vo-accent:#2FA88E;
  --vo-accent-soft:rgba(47,168,142,.18);
  --vo-glow:rgba(47,168,142,.55);
  --vo-ink:#EAF6F1;
  --vo-ink-soft:#9FC2B6;
  --vo-panel:rgba(255,255,255,.045);
  --vo-panel-line:rgba(255,255,255,.09);
  --vo-user-bubble:#173F37;
}
@media(prefers-color-scheme: light){ /* la página es siempre oscura a propósito, look "producto" */ }

body.vo-body{
  margin:0;
  min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--vo-ink);
  background:
    radial-gradient(60vw 60vw at 85% -10%, rgba(47,168,142,.22), transparent 60%),
    radial-gradient(50vw 50vw at -10% 110%, rgba(27,94,86,.28), transparent 60%),
    linear-gradient(160deg, var(--vo-bg-1), var(--vo-bg-2));
  background-attachment:fixed;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.vo-header{width:100%;max-width:900px;padding:22px 20px 6px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.vo-brand{font-weight:800;letter-spacing:-.5px;font-size:19px;}
.vo-brand span{color:var(--vo-accent);}
.vo-tagline{font-size:12px;color:var(--vo-ink-soft);text-transform:uppercase;letter-spacing:.08em;margin-top:2px;}
.vo-back{color:var(--vo-ink-soft);text-decoration:none;font-size:13px;border:1px solid var(--vo-panel-line);padding:8px 13px;border-radius:20px;transition:border-color .15s,color .15s;white-space:nowrap;}
.vo-back:hover{color:var(--vo-ink);border-color:var(--vo-accent);}
.vo-btn-atras{background:var(--vo-panel);border:1px solid var(--vo-panel-line);color:var(--vo-ink);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:border-color .15s,color .15s;}
.vo-btn-atras:hover{border-color:var(--vo-accent);color:var(--vo-accent);}

.vo-shell{width:100%;max-width:900px;padding:18px 20px 32px;display:flex;flex-direction:column;gap:18px;flex:1;}

/* ---------- Avatar ---------- */
.vo-avatar-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 0 4px;}
.vo-avatar{
  position:relative;width:112px;height:112px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%, #2FA88E, #0E5A4D 70%);
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 10px 40px rgba(47,168,142,.35);
}
.vo-avatar::before{
  content:'';position:absolute;inset:-14px;border-radius:50%;
  border:1.5px solid var(--vo-accent);opacity:.35;
  animation:vo-pulse-ring 2.6s ease-out infinite;
}
.vo-avatar::after{
  content:'';position:absolute;inset:-26px;border-radius:50%;
  border:1px solid var(--vo-accent);opacity:.18;
  animation:vo-pulse-ring 2.6s ease-out .5s infinite;
}
@keyframes vo-pulse-ring{0%{transform:scale(.85);opacity:.5;}100%{transform:scale(1.25);opacity:0;}}
.vo-avatar svg{width:56px;height:56px;color:#EAFBF5;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));}
.vo-avatar.hablando{animation:vo-avatar-habla 1s ease-in-out infinite;}
@keyframes vo-avatar-habla{0%,100%{transform:scale(1);}50%{transform:scale(1.035);}}
.vo-avatar-nombre{font-weight:700;font-size:15.5px;}
.vo-avatar-estado{font-size:12px;color:var(--vo-ink-soft);display:flex;align-items:center;gap:6px;}
.vo-punto-vivo{width:7px;height:7px;border-radius:50%;background:var(--vo-accent);box-shadow:0 0 8px var(--vo-glow);animation:vo-parpadeo 1.8s ease-in-out infinite;}
@keyframes vo-parpadeo{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ---------- Sugerencias rápidas ---------- */
.vo-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:0 6px;}
.vo-chip{background:var(--vo-panel);border:1px solid var(--vo-panel-line);color:var(--vo-ink);font-size:12.5px;padding:8px 14px;border-radius:20px;cursor:pointer;transition:background .15s,border-color .15s;}
.vo-chip:hover{background:var(--vo-accent-soft);border-color:var(--vo-accent);}

/* ---------- Chat ---------- */
.vo-chat-panel{background:var(--vo-panel);border:1px solid var(--vo-panel-line);border-radius:20px;backdrop-filter:blur(6px);display:flex;flex-direction:column;flex:1;min-height:340px;overflow:hidden;}
.vo-mensajes{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;max-height:52vh;}
.vo-msg{max-width:82%;padding:11px 15px;border-radius:16px;font-size:14.5px;line-height:1.5;animation:vo-fade-in .25s ease-out;white-space:pre-wrap;}
@keyframes vo-fade-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.vo-msg-asistente{align-self:flex-start;background:rgba(255,255,255,.06);border:1px solid var(--vo-panel-line);border-bottom-left-radius:5px;}
.vo-msg-usuario{align-self:flex-end;background:var(--vo-user-bubble);border:1px solid rgba(47,168,142,.35);border-bottom-right-radius:5px;}
.vo-msg-lead{align-self:center;background:var(--vo-accent-soft);border:1px solid var(--vo-accent);color:var(--vo-ink);font-size:12.5px;padding:8px 16px;border-radius:20px;}
.vo-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 16px;}
.vo-typing span{width:6px;height:6px;border-radius:50%;background:var(--vo-ink-soft);animation:vo-typing-bounce 1.2s infinite;}
.vo-typing span:nth-child(2){animation-delay:.15s;}
.vo-typing span:nth-child(3){animation-delay:.3s;}
@keyframes vo-typing-bounce{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-4px);opacity:1;}}

.vo-input-row{display:flex;gap:8px;padding:14px;border-top:1px solid var(--vo-panel-line);}
.vo-input-row input[type="text"]{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--vo-panel-line);color:var(--vo-ink);border-radius:24px;padding:12px 18px;font-size:14.5px;min-height:44px;}
.vo-input-row input[type="text"]::placeholder{color:var(--vo-ink-soft);}
.vo-input-row input[type="text"]:focus{outline:none;border-color:var(--vo-accent);}
.vo-btn-enviar,.vo-btn-mute{border:none;border-radius:50%;width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s,background .15s;}
.vo-btn-enviar{background:var(--vo-accent);color:#06211B;}
.vo-btn-enviar:hover{transform:scale(1.05);}
.vo-btn-enviar:disabled{opacity:.5;cursor:wait;transform:none;}
.vo-btn-mute{background:rgba(255,255,255,.06);border:1px solid var(--vo-panel-line);color:var(--vo-ink-soft);}
.vo-btn-mute.activo{color:var(--vo-accent);border-color:var(--vo-accent);}
.vo-btn-mic{background:rgba(255,255,255,.06);border:1px solid var(--vo-panel-line);color:var(--vo-ink-soft);border-radius:50%;width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s,background .15s,border-color .15s;}
.vo-btn-mic.escuchando{color:#fff;background:#C0392B;border-color:#C0392B;animation:vo-mic-pulso 1.1s ease-in-out infinite;}
@keyframes vo-mic-pulso{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.5);}50%{box-shadow:0 0 0 8px rgba(192,57,43,0);}}

/* ---------- Afiches (planes / clínicas) ---------- */
.vo-poster{align-self:stretch;background:rgba(255,255,255,.04);border:1px solid var(--vo-panel-line);border-radius:16px;padding:14px 16px 16px;animation:vo-fade-in .3s ease-out;}
.vo-poster-titulo{font-weight:700;font-size:13.5px;margin-bottom:10px;}
.vo-poster-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
.vo-poster-vacio{font-size:12.5px;color:var(--vo-ink-soft);margin:0;}
.vo-poster-card{background:rgba(255,255,255,.05);border:1px solid var(--vo-panel-line);border-radius:12px;padding:12px 14px;}
.vo-poster-card-nombre{font-weight:700;font-size:13.5px;margin-bottom:6px;}
.vo-poster-card-precio{color:var(--vo-accent);font-weight:800;font-size:17px;margin-bottom:6px;}
.vo-poster-card-precio small{color:var(--vo-ink-soft);font-weight:500;font-size:11px;}
.vo-poster-card-linea{font-size:12px;color:var(--vo-ink-soft);line-height:1.5;}
.vo-poster-card-link{display:inline-block;margin-top:8px;color:var(--vo-accent);font-size:12px;text-decoration:none;font-weight:600;}
.vo-poster-card-link:hover{text-decoration:underline;}

.vo-footer{max-width:900px;width:100%;padding:0 20px 26px;text-align:center;font-size:11.5px;color:var(--vo-ink-soft);line-height:1.6;}
.vo-footer a{color:var(--vo-accent);}

@media(max-width:640px){
  .vo-mensajes{max-height:48vh;}
  .vo-msg{max-width:90%;}
}