/* Demo del agente de WhatsApp para inmobiliarias (Stack Soluciones). Tipografías alojadas en el sitio. */
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 600;font-display:swap;src:url("../../assets/fonts/figtree-latin.woff2") format("woff2")}

:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  --font:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bg:oklch(0.968 0.005 270);--card:#fff;--tx:oklch(0.22 0.02 270);--muted:oklch(0.48 0.018 270);--line:oklch(0.925 0.006 270);--soft:oklch(0.95 0.006 270);
  --bot:oklch(0.56 0.2 285);--bot-ink:oklch(0.4 0.16 285);--bot-tint:oklch(0.962 0.028 285);
  --hum:oklch(0.56 0.13 162);--hum-ink:oklch(0.38 0.09 162);--hum-tint:oklch(0.962 0.03 162);
  --warn:oklch(0.62 0.17 55);--warn-tint:oklch(0.965 0.04 75);
  --wa-bg:#E9E2D8;--wa-in:#FFFFFF;--wa-out:#D9FDD3;--wa-tx:#111B21;--wa-meta:#5E6F78;--wa-head:#12302F;--wa-bar:#F0F2F5;--wa-input:#FFFFFF}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:oklch(0.2 0.012 270);--card:oklch(0.25 0.014 270);--tx:oklch(0.95 0.005 270);--muted:oklch(0.74 0.015 270);--line:oklch(0.32 0.014 270);--soft:oklch(0.29 0.014 270);
  --bot-ink:oklch(0.82 0.1 285);--bot-tint:oklch(0.31 0.06 285);--hum-ink:oklch(0.82 0.09 162);--hum-tint:oklch(0.3 0.05 162);--warn-tint:oklch(0.32 0.06 60);
  --wa-bg:#0B141A;--wa-in:#202C33;--wa-out:#005C4B;--wa-tx:#E9EDEF;--wa-meta:#8696A0;--wa-bar:#1F2C33;--wa-input:#2A3942}}
:root[data-theme="dark"]{--bg:oklch(0.2 0.012 270);--card:oklch(0.25 0.014 270);--tx:oklch(0.95 0.005 270);--muted:oklch(0.74 0.015 270);--line:oklch(0.32 0.014 270);--soft:oklch(0.29 0.014 270);
  --bot-ink:oklch(0.82 0.1 285);--bot-tint:oklch(0.31 0.06 285);--hum-ink:oklch(0.82 0.09 162);--hum-tint:oklch(0.3 0.05 162);--warn-tint:oklch(0.32 0.06 60);
  --wa-bg:#0B141A;--wa-in:#202C33;--wa-out:#005C4B;--wa-tx:#E9EDEF;--wa-meta:#8696A0;--wa-bar:#1F2C33;--wa-input:#2A3942}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--tx);font-family:var(--font);font-size:15px;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;touch-action:manipulation}
a{touch-action:manipulation}
.shell{height:100%;display:flex;flex-direction:column;max-width:1180px;margin:0 auto}
.top{display:flex;align-items:center;gap:10px;padding:10px 14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;flex:1;min-width:0}
.brand svg{width:30px;height:auto;flex:none}
.brand small{display:block;font-weight:400;color:var(--muted);font-size:.8rem}
.volver{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--tx);font-weight:600;font-size:.88rem;text-decoration:none;border-radius:8px}
@media (hover:hover) and (pointer:fine){.volver:hover{text-decoration:underline;text-underline-offset:4px}}
.reset{border:1px solid var(--line);background:var(--card);color:var(--tx);border-radius:99px;padding:0 14px;min-height:44px;font-size:.82rem;cursor:pointer}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 12px 8px;padding:4px;background:var(--soft);border-radius:12px}
.tab{border:0;background:transparent;color:var(--muted);padding:0 6px;min-height:44px;border-radius:9px;font-weight:600;font-size:.88rem;cursor:pointer;position:relative}
.tab[aria-selected="true"]{background:var(--card);color:var(--tx);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tab .badge{position:absolute;top:6px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--bot);display:none}
.tab.new .badge{display:block}
.views{flex:1;min-height:0;display:grid;grid-template-columns:1fr;gap:12px;padding:0 12px 12px}
.view{min-height:0;display:none}
.view.on{display:flex}
@media (min-width:920px){.tabs{display:none}.views{grid-template-columns:minmax(0,430px) minmax(0,1fr)}.view{display:flex}}
/* ---------- chat del cliente ---------- */
.wa{flex:1;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--wa-bg);min-height:0;border:1px solid var(--line)}
.wa header{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--wa-head);color:#fff}
.av{width:40px;height:40px;border-radius:50%;background:#2F5E58;display:grid;place-content:center;font-weight:700;flex:none}
.who{flex:1;min-width:0}.who b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.who span{font-size:.8rem;color:#A9C6BF}
#log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:12px 10px 6px;display:flex;flex-direction:column;gap:6px}
.msg{max-width:86%;padding:7px 10px 19px;border-radius:10px;position:relative;line-height:1.38;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--wa-tx);box-shadow:0 1px .5px rgba(0,0,0,.13);animation:in .18s ease-out}
.msg.in{align-self:flex-start;background:var(--wa-in);border-top-left-radius:3px}
.msg.out{align-self:flex-end;background:var(--wa-out);border-top-right-radius:3px}
.msg .from{display:block;font-size:.78rem;font-weight:600;color:var(--hum-ink);margin-bottom:2px}
.msg time{position:absolute;right:9px;bottom:3px;font-size:.68rem;color:var(--wa-meta)}
.sys{align-self:center;background:var(--wa-in);color:var(--wa-meta);font-size:.78rem;padding:5px 10px;border-radius:8px;text-align:center;max-width:90%}
.typing{align-self:flex-start;background:var(--wa-in);border-radius:10px;border-top-left-radius:3px;padding:12px 14px;display:flex;gap:5px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--wa-meta);animation:dot 1.1s 3}.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,80%,100%{opacity:.25;transform:none}40%{opacity:1;transform:translateY(-3px)}}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:2px 10px 8px}
.chip{border:1px solid #BFD0CB;background:var(--wa-in);color:var(--wa-tx);border-radius:99px;padding:0 14px;min-height:44px;font-size:.9rem;cursor:pointer;transition:transform 160ms cubic-bezier(0.22,1,0.36,1)}
.chip:active{transform:scale(0.97)}
.bar{display:flex;gap:8px;align-items:center;padding:8px;background:var(--wa-bar)}
.bar input{flex:1;min-width:0;border:0;border-radius:22px;padding:11px 15px;background:var(--wa-input);color:var(--wa-tx);font:inherit;font-size:16px}
.send{width:46px;height:46px;border-radius:50%;border:0;background:#12302F;color:#fff;display:grid;place-content:center;cursor:pointer;flex:none}
.send svg{width:20px;height:20px}
/* ---------- panel del equipo ---------- */
.panel{flex:1;display:flex;flex-direction:column;gap:12px;overflow-y:auto;min-height:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px}
.conv{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.conv .name{flex:1;min-width:160px}.conv .name b{display:block;font-size:1.05rem}.conv .name span{color:var(--muted);font-size:.85rem}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;font-size:.82rem;font-weight:500}
.pill.bot{background:var(--bot-tint);color:var(--bot-ink)}.pill.hum{background:var(--hum-tint);color:var(--hum-ink)}
.pill.bot::before,.pill.hum::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.take{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:99px;padding:0 16px;min-height:44px;background:var(--tx);color:var(--bg);font-weight:600;cursor:pointer;transition:transform 160ms cubic-bezier(0.22,1,0.36,1)}
.take:active:not([disabled]){transform:scale(0.97)}
.take[disabled]{opacity:.45;cursor:default}
.fh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.fh h2{margin:0;font-size:1.05rem}
.state{font-size:.82rem;font-weight:600;color:var(--bot-ink)}
.state.ok{background:var(--bot);color:#fff;padding:5px 11px;border-radius:99px}
.segs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:12px}
.segs i{height:5px;border-radius:99px;background:var(--soft);transition:background .4s}
.segs i.on{background:var(--bot)}
.field{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--soft);margin-bottom:6px;transition:background .5s}
.field .ck{width:20px;height:20px;border-radius:50%;flex:none;margin-top:1px;border:2px solid var(--line);display:grid;place-content:center}
.field.done .ck{background:var(--bot);border-color:var(--bot)}
.field.done .ck::after{content:"";width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);margin-top:-2px}
.field span{display:block;font-size:.8rem;color:var(--muted)}.field b{font-weight:500}
.field.flash{background:var(--bot-tint)}
.seller{display:flex;align-items:center;gap:10px;margin-top:12px}.seller[hidden]{display:none}
.seller .sav{width:30px;height:30px;border-radius:50%;background:var(--hum);color:#fff;display:grid;place-content:center;font-size:.75rem;font-weight:700}
.muted{color:var(--muted);font-size:.88rem;margin:0}
.notes{margin:10px 0 0;padding:0;list-style:none}
.notes li{font-size:.88rem;padding:8px 10px;border-radius:10px;background:var(--warn-tint);margin-top:6px}
.alerts{display:flex;flex-direction:column;gap:10px}
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;background:var(--hum-tint);color:var(--hum-ink);animation:in .25s ease-out}
.alert.warn{background:var(--warn-tint);color:var(--tx)}
.alert svg{width:20px;height:20px;flex:none;margin-top:1px}
.alert b{display:block;margin-bottom:2px}
.cta{background:#12302F;color:#fff;border-radius:18px;padding:16px;border:0}
.cta .lg{display:flex;align-items:center;gap:10px;font-weight:600;margin-bottom:6px}.cta .lg svg{width:34px;height:auto}
.cta p{margin:0 0 12px;color:#C9DAD5;line-height:1.45}
.cta a{display:inline-flex;align-items:center;min-height:44px;background:#F0A030;color:#12302F;text-decoration:none;font-weight:700;padding:0 16px;border-radius:99px}
.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 14px);transform:translate(-50%,-30px);background:var(--tx);color:var(--bg);padding:10px 16px;border-radius:99px;font-size:.88rem;font-weight:600;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;z-index:5;max-width:92vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.chip:focus-visible,.send:focus-visible,.tab:focus-visible,.take:focus-visible,.reset:focus-visible,.volver:focus-visible,.cta a:focus-visible,.bar input:focus-visible{outline:3px solid #F0A030;outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}