/* ==== Sofía · Asesor IA — v0.3.0 (diseño premium) ==== */
:root{
	--sofia-color:#0F6E56; --sofia-l:#2a8f74; --sofia-d:#0a5744;
	--sofia-soft:rgba(15,110,86,.10); --sofia-tint:rgba(15,110,86,.16); --sofia-glow:rgba(15,110,86,.35);
	--sofia-font:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
#sofia-root,#sofia-root *{box-sizing:border-box}

/* ---------- dock (contenedor fijo del launcher) ---------- */
.sofia-dock{position:fixed;left:16px;right:16px;bottom:16px;z-index:99998;max-width:400px;margin:0 auto;
	display:flex;flex-direction:column;align-items:stretch;gap:14px;pointer-events:none}
.sofia-dock>*{pointer-events:auto}
#sofia-root.sofia-pos-derecha .sofia-dock,
#sofia-root.sofia-pos-derecha .sofia-panel{left:auto;right:16px;margin:0}
#sofia-root.sofia-pos-izquierda .sofia-dock,
#sofia-root.sofia-pos-izquierda .sofia-panel{right:auto;left:16px;margin:0}
@media(max-width:480px){
	#sofia-root .sofia-dock,#sofia-root .sofia-panel{left:10px !important;right:10px !important;margin:0 auto !important}
}

/* ---------- burbuja teaser (mensaje que invita, aparece sola) ---------- */
.sofia-teaser{position:relative;align-self:flex-start;max-width:88%;display:none;
	background:#fff;border-radius:18px 18px 18px 4px;padding:12px 34px 12px 14px;
	box-shadow:0 10px 30px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.06);
	font-family:var(--sofia-font);font-size:13.8px;line-height:1.4;color:#1f2937;cursor:pointer;
	border:1px solid rgba(0,0,0,.04)}
.sofia-teaser.show{display:block;animation:sofiaPop .45s cubic-bezier(.2,.9,.3,1.3)}
.sofia-teaser.hide{animation:sofiaPopOut .25s ease forwards}
@keyframes sofiaPop{0%{opacity:0;transform:translateY(10px) scale(.9)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sofiaPopOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}
.sofia-teaser b{color:var(--sofia-d);font-weight:700}
.sofia-teaser .sofia-teaser-txt{transition:opacity .35s ease}
.sofia-teaser .sofia-teaser-txt.fade{opacity:0}
.sofia-teaser .sofia-teaser-x{position:absolute;top:6px;right:8px;width:20px;height:20px;border-radius:50%;
	background:#f0f1f3;color:#9aa0a6;display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;font-weight:600}
.sofia-teaser .sofia-teaser-x:hover{background:#e4e6e9}

/* ---------- barra flotante (launcher) ---------- */
.sofia-bar{position:relative;width:100%;overflow:visible;
	background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
	border:1px solid rgba(0,0,0,.05);border-radius:22px;
	box-shadow:0 12px 36px rgba(0,0,0,.15),0 2px 8px rgba(0,0,0,.06);
	display:flex;align-items:center;gap:13px;padding:12px 14px;cursor:pointer;
	font-family:var(--sofia-font);transition:transform .25s ease,box-shadow .25s ease}
.sofia-bar:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(0,0,0,.2),0 0 0 5px var(--sofia-soft)}
/* avatar que ASOMA por encima de la barra */
.sofia-bar .sofia-ava{position:relative;width:62px;height:62px;border-radius:50%;flex:0 0 auto;overflow:visible;
	margin-top:-26px;margin-bottom:-8px;
	background:linear-gradient(135deg,var(--sofia-l),var(--sofia-d));
	border:3px solid #fff;box-shadow:0 8px 20px var(--sofia-glow);
	display:flex;align-items:center;justify-content:center;animation:sofiaBob 3.2s ease-in-out infinite}
.sofia-bar .sofia-ava svg{width:30px;height:30px;fill:#fff}
.sofia-bar .sofia-ava img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.sofia-bar .sofia-ava .dot{position:absolute;bottom:2px;right:2px;width:14px;height:14px;border-radius:50%;
	background:#2ecc71;border:2.5px solid #fff;box-shadow:0 0 0 0 rgba(46,204,113,.6);animation:sofiaPulse 2s infinite}
@keyframes sofiaBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes sofiaPulse{0%{box-shadow:0 0 0 0 rgba(46,204,113,.6)}70%{box-shadow:0 0 0 7px rgba(46,204,113,0)}100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}}
.sofia-bar .sofia-txt{min-width:0;flex:1}
.sofia-bar .sofia-name{font-size:15px;font-weight:700;color:#1a1a1a;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}
.sofia-bar .sofia-name i{width:7px;height:7px;border-radius:50%;background:#2ecc71;box-shadow:0 0 6px #2ecc71}
.sofia-bar .sofia-sub{font-size:12.8px;color:#6b7280;margin:3px 0 0;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sofia-bar .sofia-go{margin-left:auto;width:40px;height:40px;border-radius:50%;flex:0 0 auto;
	background:linear-gradient(135deg,var(--sofia-l),var(--sofia-d));display:flex;align-items:center;justify-content:center;
	box-shadow:0 5px 14px var(--sofia-glow);transition:transform .2s}
.sofia-bar:hover .sofia-go{transform:scale(1.08) rotate(-8deg)}
.sofia-bar .sofia-go svg{width:19px;height:19px;fill:#fff}

/* ---------- panel de chat ---------- */
.sofia-panel{position:fixed;z-index:99999;left:16px;right:16px;bottom:16px;margin:0 auto;max-width:400px;
	height:78vh;max-height:660px;background:#fff;border-radius:26px;overflow:hidden;display:none;flex-direction:column;
	box-shadow:0 30px 80px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.12);border:1px solid rgba(0,0,0,.05);
	font-family:var(--sofia-font);transform-origin:bottom center}
.sofia-panel.open{display:flex;animation:sofiaIn .46s cubic-bezier(.2,.9,.25,1.15)}
.sofia-panel.closing{animation:sofiaOut .28s ease forwards}
@keyframes sofiaIn{0%{opacity:0;transform:translateY(26px) scale(.95)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sofiaOut{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(22px) scale(.96)}}

/* header con profundidad + degradado que respira */
.sofia-head{position:relative;color:#fff;padding:20px 18px 30px;display:flex;align-items:center;gap:13px;
	background:linear-gradient(120deg,var(--sofia-l),var(--sofia-color),var(--sofia-d));background-size:220% 220%;
	animation:sofiaBreathe 10s ease infinite;overflow:hidden}
.sofia-head::before{content:"";position:absolute;top:-40%;right:-10%;width:180px;height:180px;border-radius:50%;
	background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);pointer-events:none}
@keyframes sofiaBreathe{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.sofia-head .sofia-ava{width:46px;height:46px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.2);
	display:flex;align-items:center;justify-content:center;border:2.5px solid rgba(255,255,255,.6);flex:0 0 auto;z-index:1}
.sofia-head .sofia-ava svg{width:24px;height:24px;fill:#fff}
.sofia-head .sofia-ava img{width:100%;height:100%;object-fit:cover}
.sofia-head .h-txt{flex:1;min-width:0;z-index:1}
.sofia-head b{font-size:16.5px;display:block;letter-spacing:-.2px}
.sofia-head small{font-size:11.8px;opacity:.92;display:flex;align-items:center;gap:6px;margin-top:2px}
.sofia-head small::before{content:"";width:7px;height:7px;border-radius:50%;background:#7CFFB2;box-shadow:0 0 6px #7CFFB2;animation:sofiaPulse 2s infinite}
.sofia-head .sofia-close{margin-left:auto;cursor:pointer;width:34px;height:34px;border-radius:50%;z-index:1;
	background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;flex:0 0 auto}
.sofia-head .sofia-close:hover{background:rgba(255,255,255,.32);transform:scale(1.08)}
.sofia-head .sofia-close svg{width:17px;height:17px;fill:#fff}

/* cuerpo: sube sobre el header con esquina curva (look premium) */
.sofia-body{flex:1;overflow-y:auto;padding:18px 14px 14px;margin-top:-18px;border-radius:22px 22px 0 0;position:relative;z-index:2;
	background:linear-gradient(180deg,#fbfcfd,#f3f5f7);display:flex;flex-direction:column;gap:10px}
.sofia-body::-webkit-scrollbar{width:6px}
.sofia-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:3px}
.sofia-msg{max-width:84%;padding:12px 15px;font-size:14.8px;line-height:1.5;border-radius:20px;white-space:pre-wrap;word-wrap:break-word;
	animation:sofiaMsgIn .32s ease;box-shadow:0 3px 10px rgba(0,0,0,.05)}
@keyframes sofiaMsgIn{0%{opacity:0;transform:translateY(7px)}100%{opacity:1;transform:translateY(0)}}
.sofia-msg.bot{align-self:flex-start;background:#fff;border-bottom-left-radius:6px;color:#1f2937}
.sofia-msg.user{align-self:flex-end;color:#fff;border-bottom-right-radius:6px;background:linear-gradient(135deg,var(--sofia-l),var(--sofia-d))}
.sofia-typing{align-self:flex-start;background:#fff;border-radius:20px;border-bottom-left-radius:6px;padding:13px 16px;display:flex;gap:5px;box-shadow:0 3px 10px rgba(0,0,0,.05)}
.sofia-typing span{width:8px;height:8px;border-radius:50%;background:var(--sofia-color);opacity:.4;animation:sofiaDot 1.2s infinite}
.sofia-typing span:nth-child(2){animation-delay:.2s}.sofia-typing span:nth-child(3){animation-delay:.4s}
@keyframes sofiaDot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* preguntas sugeridas (chips) — invitan a preguntar del curso */
.sofia-chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 14px 12px;background:transparent}
.sofia-chips.top{padding-top:4px}
.sofia-chip{font-size:13px;padding:9px 14px;border:1.5px solid var(--sofia-tint);color:var(--sofia-d);
	background:#fff;border-radius:22px;cursor:pointer;font-weight:600;transition:all .18s;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.sofia-chip:hover{background:var(--sofia-soft);border-color:var(--sofia-color);transform:translateY(-1px)}

/* input */
.sofia-input{display:flex;align-items:center;gap:7px;padding:11px;border-top:1px solid #eef0f2;background:#fff}
.sofia-input .sofia-ico{cursor:pointer;width:40px;height:40px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--sofia-soft);transition:all .18s}
.sofia-input .sofia-ico:hover{background:var(--sofia-tint);transform:scale(1.06)}
.sofia-input .sofia-ico svg{width:20px;height:20px;fill:var(--sofia-color)}
.sofia-input input[type=text]{flex:1;min-width:0;border:1.5px solid #e8eaed;border-radius:24px;padding:12px 16px;font-size:14.8px;outline:none;transition:border .18s,background .18s;background:#f8f9fa}
.sofia-input input[type=text]:focus{border-color:var(--sofia-color);background:#fff}
.sofia-input .sofia-send{width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;flex:0 0 auto;
	background:linear-gradient(135deg,var(--sofia-l),var(--sofia-d));display:flex;align-items:center;justify-content:center;
	box-shadow:0 5px 14px var(--sofia-glow);transition:transform .18s}
.sofia-input .sofia-send:hover{transform:scale(1.08)}
.sofia-input .sofia-send svg{width:18px;height:18px;fill:#fff}

/* barra de grabación de audio */
.sofia-rec{display:none;align-items:center;gap:11px;padding:13px 15px;border-top:1px solid #eef0f2;background:#fff}
.sofia-rec.on{display:flex;animation:sofiaMsgIn .25s ease}
.sofia-rec-dot{width:11px;height:11px;border-radius:50%;background:#e0245e;flex:0 0 auto;animation:sofiaRecBlink 1s infinite}
@keyframes sofiaRecBlink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(224,36,94,.5)}50%{opacity:.5;box-shadow:0 0 0 5px rgba(224,36,94,0)}}
.sofia-rec-wave{flex:1;display:flex;align-items:center;gap:3px;height:24px}
.sofia-rec-wave i{flex:1;background:var(--sofia-color);border-radius:3px;opacity:.7;animation:sofiaWave 1s ease-in-out infinite}
.sofia-rec-wave i:nth-child(2){animation-delay:.1s}.sofia-rec-wave i:nth-child(3){animation-delay:.2s}
.sofia-rec-wave i:nth-child(4){animation-delay:.3s}.sofia-rec-wave i:nth-child(5){animation-delay:.4s}
.sofia-rec-wave i:nth-child(6){animation-delay:.15s}.sofia-rec-wave i:nth-child(7){animation-delay:.35s}
@keyframes sofiaWave{0%,100%{height:6px}50%{height:22px}}
.sofia-rec-time{font-size:13px;font-weight:700;color:#e0245e;font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:38px}
.sofia-rec button{width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;flex:0 0 auto;display:flex;align-items:center;justify-content:center;transition:transform .18s}
.sofia-rec button:hover{transform:scale(1.08)}
.sofia-rec .sofia-rec-cancel{background:#f0f1f3}
.sofia-rec .sofia-rec-cancel svg{width:18px;height:18px;fill:#e0245e}
.sofia-rec .sofia-rec-send{background:linear-gradient(135deg,var(--sofia-l),var(--sofia-d));box-shadow:0 4px 12px var(--sofia-glow)}
.sofia-rec .sofia-rec-send svg{width:17px;height:17px;fill:#fff}

/* móvil */
@media(max-width:480px){
	.sofia-bar .sofia-ava{width:66px;height:66px;margin-top:-28px}
	.sofia-bar .sofia-name{font-size:16px}
	.sofia-bar .sofia-sub{font-size:13.5px}
	.sofia-teaser{font-size:14.5px}
	.sofia-panel{height:82vh;border-radius:24px}
	.sofia-msg{font-size:15.8px}
	.sofia-head b{font-size:17.5px}
	.sofia-input input[type=text]{font-size:16px}
}

/* ---------- bloque de invitación (shortcode + producto) ---------- */
.sofia-cta{font-family:var(--sofia-font);cursor:pointer;margin:18px 0}
.sofia-cta.card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:20px;
	background:linear-gradient(135deg,var(--sofia-soft),rgba(255,255,255,.4));border:1.5px solid var(--sofia-tint);
	box-shadow:0 6px 22px rgba(0,0,0,.06);transition:transform .22s,box-shadow .22s;max-width:540px}
.sofia-cta.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px var(--sofia-glow)}
.sofia-cta .sofia-cta-ava{width:54px;height:54px;border-radius:50%;flex:0 0 auto;overflow:hidden;
	background:linear-gradient(135deg,var(--sofia-l),var(--sofia-d));display:flex;align-items:center;justify-content:center;
	box-shadow:0 5px 14px var(--sofia-glow)}
.sofia-cta .sofia-cta-ava svg{width:27px;height:27px;fill:#fff}
.sofia-cta .sofia-cta-ava img{width:100%;height:100%;object-fit:cover}
.sofia-cta .sofia-cta-txt{flex:1;min-width:0}
.sofia-cta .sofia-cta-txt b{display:block;font-size:16px;color:#1a1a1a;letter-spacing:-.2px;line-height:1.3}
.sofia-cta .sofia-cta-txt span{display:block;font-size:13.5px;color:#5a6270;margin-top:3px}
.sofia-cta .sofia-cta-btn{flex:0 0 auto;background:linear-gradient(135deg,var(--sofia-l),var(--sofia-d));color:#fff;
	border-radius:24px;padding:11px 20px;font-size:14px;font-weight:700;box-shadow:0 5px 16px var(--sofia-glow);
	display:inline-flex;align-items:center;gap:7px}
.sofia-cta .sofia-cta-btn svg{width:15px;height:15px;fill:#fff}
.sofia-cta.boton{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--sofia-l),var(--sofia-d));
	color:#fff;border-radius:26px;padding:13px 24px;font-size:15px;font-weight:700;box-shadow:0 6px 18px var(--sofia-glow);transition:transform .2s;border:none}
.sofia-cta.boton:hover{transform:translateY(-2px) scale(1.02)}
.sofia-cta.boton svg{width:18px;height:18px;fill:#fff}
.sofia-cta.banner{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;
	background:linear-gradient(135deg,var(--sofia-l),var(--sofia-d));color:#fff;border-radius:16px;padding:16px 20px;
	font-size:15.5px;font-weight:700;box-shadow:0 6px 20px var(--sofia-glow);transition:transform .2s}
.sofia-cta.banner:hover{transform:translateY(-2px)}
.sofia-cta.banner svg{width:20px;height:20px;fill:#fff}
@media(max-width:480px){
	.sofia-cta.card{flex-wrap:wrap}
	.sofia-cta.card .sofia-cta-btn{width:100%;justify-content:center;margin-top:4px}
}