/* MosLab · demos auto-testeables · estilos genéricos v3 · Modo B editorial light (paleta del documento de ejemplos de Jiménez). */
:root{--bg:#FFFFFF;--paper:#FAFAF7;--paper-cool:#F4F8FA;--ink:#0F1620;--muted:#475569;--faint:#94A3B8;--teal:#0A7A92;--teal-2:#0E5E70;--teal-3:#08384A;--cyan:#53DDFC;--violet:#7C3AED;--accent:#10B981;--accent-deep:#047857;--warn:#C75B41;--amber:#B7791F;--line:#E2E8F0;--line-strong:#CBD5E1;--shadow:0 2px 8px rgba(15,22,32,.06);--shadow-md:0 12px 40px rgba(15,22,32,.10);--mono:'JetBrains Mono',ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--teal)}
button{font-family:inherit;cursor:pointer}
.bar{height:4px;background:linear-gradient(90deg,#53DDFC 0%,#6F8BFF 50%,#7C3AED 100%)}
.top{max-width:1180px;margin:0 auto;padding:16px 16px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.top img{height:26px;display:block}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);border:1px solid rgba(10,122,146,.35);border-radius:999px;padding:5px 11px;white-space:nowrap;background:none;text-decoration:none;font-weight:700}
.tag.btn-tag:hover{background:rgba(10,122,146,.08)}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px 32px}
/* hero */
.hero{position:relative;border-radius:14px;overflow:hidden;padding:22px 24px 18px;border:1px solid var(--line);background:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.96) 48%,rgba(255,255,255,.55) 100%),var(--hero-img) center/cover no-repeat;margin-bottom:14px}
.hero .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:8px}
.hero h1{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:30px;line-height:1.1;letter-spacing:-.01em;margin:0 0 8px;max-width:640px}
.hero h1 em{font-style:italic;color:var(--teal)}
.hero p{margin:0;color:var(--muted);font-size:14.5px;max-width:600px}
.hero .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{font-size:12px;color:var(--muted);border:1px solid var(--line-strong);border-radius:999px;padding:4px 10px;background:rgba(255,255,255,.85)}
.chip.lead{border-color:var(--teal);color:var(--teal);font-weight:600}
/* layout */
.grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:14px;align-items:start}
.col{min-width:0}
.card{background:#fff;border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow)}
.card h2{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:19px;margin:0;line-height:1.2}
.card h2 em{font-style:italic;color:var(--teal)}
.card .hd{padding:12px 16px 10px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--paper);border-radius:14px 14px 0 0}
.card .hd small{color:var(--faint);font-size:12px}
/* progreso */
.progress{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);overflow:auto;background:var(--paper);border-radius:14px 14px 0 0}
.pstep{flex:1;min-width:120px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:7px 9px;background:#fff;color:var(--muted);font-size:12px;text-align:left;line-height:1.2}
.pstep b{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--line);color:var(--muted);font-size:11px;flex:none;font-family:var(--mono)}
.pstep.active{border-color:var(--teal);color:var(--ink)}
.pstep.active b{background:var(--teal);color:#fff}
.pstep.done{color:var(--ink)}
.pstep.done b{background:var(--accent);color:#fff}
.pstep:hover{border-color:var(--line-strong)}
/* chat */
.chat{display:flex;flex-direction:column;height:620px}
.msgs{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;background:#fff}
.msg{max-width:86%;padding:10px 13px;border-radius:14px;font-size:14.5px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.msg.bot{align-self:flex-start;background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.user{align-self:flex-end;background:var(--teal);color:#fff;border-bottom-right-radius:4px}
.msg.sys{align-self:center;background:var(--paper-cool);color:var(--muted);font-size:12.5px;border:1px dashed var(--line-strong);max-width:95%}
.msg.file{align-self:flex-end;background:#fff;border:1px solid var(--teal);color:var(--teal-3);font-size:13px}
.typing{align-self:flex-start;color:var(--faint);font-size:13px;padding:6px 13px}
.typing span{display:inline-block;width:6px;height:6px;border-radius:999px;background:var(--faint);margin-right:3px;animation:b 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes b{0%,80%,100%{opacity:.3}40%{opacity:1}}
/* compositor: guía + sugerencias + entrada */
#composer{border-top:1px solid var(--line);background:var(--paper);border-radius:0 0 14px 14px}
.chips{padding:8px 14px 2px}
.chips .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:6px}
.chips .row{display:flex;gap:6px;flex-wrap:wrap}
.chipbtn{border:1px solid var(--line-strong);background:#fff;color:var(--ink);border-radius:999px;padding:7px 12px;font-size:13px;line-height:1.25;text-align:left;transition:border-color .15s,background .15s}
.chipbtn:hover{border-color:var(--teal);color:var(--teal)}
.chipbtn.primary{background:var(--teal);color:#fff;border-color:var(--teal);font-weight:600}
.chipbtn.primary:hover{background:var(--teal-2);color:#fff}
.chipbtn.ghost{background:transparent;color:var(--muted);border-color:var(--line)}
.chipbtn:disabled{opacity:.5;cursor:default}
.input{display:flex;gap:8px;padding:10px 14px 12px}
.input textarea{flex:1;resize:none;height:48px;background:#fff;border:1px solid var(--line-strong);border-radius:10px;color:var(--ink);padding:12px 14px;font-size:16px;font-family:inherit}
.input textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(10,122,146,.12)}
.input button{width:48px;border-radius:10px;border:0;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center}
.input button:hover{background:var(--teal-2)}
.input .attach{background:#fff;color:var(--muted);border:1px solid var(--line-strong)}
.input .attach:hover{background:var(--paper-cool)}
/* tarjeta de guía (recorrido) */
.coach{margin:10px 14px 4px;background:#fff;border:1px solid var(--teal);border-left:4px solid var(--teal);border-radius:10px;padding:12px 14px 12px;box-shadow:var(--shadow);animation:in .25s ease}
.coach.wait{border-color:var(--line-strong);border-left-color:var(--amber)}
.coach .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:5px;display:flex;justify-content:space-between;gap:10px}
.coach .k a{color:var(--faint);text-decoration:none;font-weight:500;letter-spacing:0;text-transform:none;font-family:'Inter',sans-serif;font-size:12px}
.coach h4{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:19px;margin:0 0 5px;line-height:1.2;color:var(--teal-3)}
.coach p{margin:0;font-size:14px;color:var(--ink);line-height:1.45}
.coach .row{display:flex;gap:8px;margin-top:10px;align-items:center;flex-wrap:wrap}
.coach .hint{font-size:12.5px;color:var(--muted);margin-top:7px}
.coach .hint.warn{color:var(--warn)}
#coach-panel{margin:0 0 12px}
/* panel */
.panel .body{padding:12px 16px 14px}
.tabs{display:flex;gap:2px;padding:8px 12px 0;border-bottom:1px solid var(--line)}
.tab{border:0;background:transparent;color:var(--muted);font-size:12.5px;padding:8px 10px;border-bottom:2px solid transparent;border-radius:0;margin-bottom:-1px}
.tab.active{color:var(--teal-3);border-bottom-color:var(--teal);font-weight:600}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:12px}
.kpi{padding:10px 12px;border-right:1px solid var(--line);background:#fff}
.kpi:last-child{border-right:0}
.kpi b{display:block;font-family:'Newsreader',Georgia,serif;font-size:24px;font-weight:600;line-height:1.05;color:var(--teal-3)}
.kpi span{font-size:11px;color:var(--muted);display:block;margin-top:3px;line-height:1.3}
.sub{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:14px 0 8px;display:flex;justify-content:space-between;align-items:center}
.feed{display:flex;flex-direction:column;gap:8px;max-height:460px;overflow:auto;padding-right:2px}
.feed.focus{max-height:none}
.ev{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;grid-template-columns:34px 1fr;gap:10px;animation:in .3s ease}
.ev .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(10,122,146,.1);color:var(--teal)}
.ev.aviso .ic{background:rgba(199,91,65,.12);color:var(--warn)}.ev.senal .ic,.ev.propuesta .ic,.ev.campana .ic{background:rgba(124,58,237,.1);color:var(--violet)}
.ev.cita .ic,.ev.documento .ic,.ev.lead .ic{background:rgba(16,185,129,.12);color:var(--accent-deep)}.ev.panel .ic{background:rgba(183,121,31,.12);color:var(--amber)}.ev.dia .ic{background:var(--paper);color:var(--muted)}
.ev.new{border-color:var(--teal);box-shadow:0 0 0 3px rgba(10,122,146,.08)}
@keyframes in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ev .ti{font-size:13.5px;font-weight:600;line-height:1.3;color:var(--teal-3)}
.ev .de{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.ev .to{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:5px}
.feed.focus .ev .ti{font-size:15px}.feed.focus .ev .de{font-size:13.5px;color:var(--ink)}
.empty{color:var(--muted);font-size:13px;padding:10px 0;line-height:1.5}
table.mini{width:100%;border-collapse:collapse;font-size:12.5px}
table.mini th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:700;padding:6px 6px;border-bottom:1px solid var(--line);background:var(--paper)}
table.mini td{padding:7px 6px;border-bottom:1px solid var(--line);vertical-align:top}
table.mini tr.me td{background:rgba(10,122,146,.06)}
.st{display:inline-block;font-family:var(--mono);font-size:10.5px;padding:2px 8px;border-radius:999px;white-space:nowrap;font-weight:700}
.st.completo{background:rgba(16,185,129,.12);color:var(--accent-deep)}.st.pendiente{background:rgba(183,121,31,.12);color:var(--amber)}.st.llamar{background:rgba(199,91,65,.12);color:var(--warn)}.st.mano{background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.btn{border:1px solid var(--line-strong);background:#fff;color:var(--ink);border-radius:9px;padding:9px 14px;font-size:13.5px;font-weight:600;text-align:left;line-height:1.3;text-decoration:none;transition:background .15s,border-color .15s}
.btn:hover{border-color:var(--teal);color:var(--teal)}
.btn.primary{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn.primary:hover{background:var(--teal-2);color:#fff}
.btn.ghost{background:transparent;color:var(--muted);border-color:transparent}
.btn.ghost:hover{color:var(--teal);border-color:transparent}
.btn.small{padding:6px 10px;font-size:12.5px}
.note{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.45}
/* zona activa del recorrido */
.tour-target{box-shadow:0 0 0 3px rgba(10,122,146,.25),var(--shadow-md);border-color:var(--teal)!important}
/* modales (bienvenida, final) */
.overlay{position:fixed;inset:0;background:rgba(15,22,32,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 26px 22px;max-width:540px;width:100%;box-shadow:var(--shadow-md)}
.modal .eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:8px}
.modal h3{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:26px;margin:0 0 8px;line-height:1.15;letter-spacing:-.01em}
.modal h3 em{font-style:italic;color:var(--teal)}
.modal p{color:var(--muted);font-size:14.5px;margin:0 0 10px;line-height:1.5}
.modal ol{margin:12px 0 14px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.modal ol li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink)}
.modal ol li b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:var(--teal);color:#fff;font-size:11px;flex:none;font-family:var(--mono)}
.modal ol li.ok b{background:var(--accent)}
.modal label{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px}
.modal input{width:100%;background:#fff;border:1px solid var(--line-strong);border-radius:9px;color:var(--ink);padding:10px 12px;font-size:15px}
.modal input:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(10,122,146,.12)}
.modal .row{display:flex;gap:8px;margin-top:16px;justify-content:flex-end;flex-wrap:wrap}
.foot{max-width:1180px;margin:0 auto;padding:10px 16px 28px;color:var(--faint);font-size:12px}
@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .chat{height:auto;min-height:0}
  .msgs{max-height:48vh;min-height:260px}
  .hero h1{font-size:24px}
  .hero p{font-size:13.5px}
  .tag{display:none}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpi:nth-child(2){border-right:0}.kpi:nth-child(1),.kpi:nth-child(2){border-bottom:1px solid var(--line)}
  .feed{max-height:none}
  .pstep{min-width:0;font-size:11px}
  .pstep span{display:none}
}