:root{--ink:#15171C;--ink2:#2A2D35;--mut:#555B66;--mut2:#5F6570;--line:#E3E5E9;--bg:#F5F6F8;--acc:#C2410C;--acc2:#9A3412;--ok:#0F7B5F;--okbg:#EAF7F2;--blue:#1D4ED8;--bluebg:#E6EEFF;--amb:#8A4F00;--ambbg:#FFF1DB;--red:#B42318;--redbg:#FDECEA;--chat:#F1EFEA;--out:#FDE3D2}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--acc)}
#app{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:#fff;position:relative}
.top{background:var(--ink);color:#fff;padding:14px 12px 12px 18px;position:sticky;top:0;z-index:5}
.top .row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.top small{color:#C9CDD4;font-size:12px}
.top h1{margin:0;font-size:22px;font-weight:700}
.iconbtn{width:44px;height:44px;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;border-radius:22px;cursor:pointer;color:inherit;text-decoration:none}
.chips{display:flex;gap:8px;overflow-x:auto;padding:10px 0 2px;scrollbar-width:none}
.chip{flex:none;height:34px;padding:0 14px;border-radius:17px;border:0;background:var(--ink2);color:#fff;font-size:14px;cursor:pointer}
.chip.on{background:#fff;color:var(--ink);font-weight:600}
.search{display:flex;align-items:center;gap:8px;background:var(--ink2);border-radius:12px;padding:0 12px;height:42px;margin-top:10px}
.search input{flex:1;background:transparent;border:0;color:#fff;outline:none;font-size:15px}
.banner{margin:10px 12px 0;padding:12px 14px;border-radius:12px;background:var(--ambbg);color:#6B3D00;display:flex;gap:10px;align-items:center;text-decoration:none;font-size:14px}
.list{flex:1;padding-bottom:84px}
.item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid #F0F1F3;text-decoration:none;color:var(--ink)}
.av{flex:none;width:46px;height:46px;border-radius:23px;color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center}
.grow{flex:1;min-width:0}
.l1{display:flex;justify-content:space-between;gap:8px}
.name{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{font-size:14px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px}
.tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:#EEEFF2;color:#3A3F48}
.t-nuevo{background:#EEEFF2;color:#3A3F48}.t-interesado{background:var(--bluebg);color:var(--blue)}.t-sin_dinero{background:var(--ambbg);color:var(--amb)}.t-no_responde{background:#EEEFF2;color:var(--mut)}.t-cerrado{background:var(--ok);color:#fff}
.warn{font-size:12px;font-weight:600;color:var(--red)}.soft{font-size:12px;color:var(--mut2)}
.fab{position:fixed;bottom:76px;right:max(16px,calc(50% - 264px));height:54px;padding:0 20px;border-radius:27px;background:var(--acc);color:#fff;border:0;font-weight:600;font-size:16px;display:flex;align-items:center;gap:8px;box-shadow:0 6px 18px rgba(21,23,28,.2);text-decoration:none;z-index:6}
nav.tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:560px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-top:1px solid var(--line);background:#fff;z-index:7;padding-bottom:env(safe-area-inset-bottom)}
nav.tabs a{height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--mut2);font-size:12px}
nav.tabs a.on{color:var(--ink);font-weight:700}
.page{padding:16px 16px 100px;display:flex;flex-direction:column;gap:16px}
label.f{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#3A3F48}
.in{height:48px;border:1px solid #C9CDD4;border-radius:12px;padding:0 14px;font-size:16px;background:#fff;width:100%}
textarea.in{height:auto;padding:12px 14px;resize:vertical}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.opt{min-height:46px;border-radius:12px;border:1px solid #C9CDD4;background:#fff;font-size:14px;cursor:pointer;padding:6px}
.opt.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.btn{height:52px;border-radius:14px;border:0;background:var(--acc);color:#fff;font-weight:600;font-size:16px;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn.sec{background:#fff;color:var(--ink);border:1px solid #C9CDD4}
.btn.ok{background:var(--ok)}
.btn:disabled{opacity:.6}
.legend{font-size:13px;font-weight:600;color:#3A3F48;margin-bottom:8px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.err{color:var(--red);font-size:14px}
/* Chat */
.chathead{background:var(--ink);color:#fff;padding:10px 10px 10px 4px;display:flex;align-items:center;gap:6px;position:sticky;top:0;z-index:5}
.datos{background:#fff;border-bottom:1px solid var(--line);padding:12px 14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dato{background:var(--bg);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.dato span{font-size:11px;color:var(--mut2)}.dato b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dato.falta{background:#fff;border:1.5px dashed var(--acc)}.dato.falta span{color:var(--acc2);font-weight:600}
.dato select,.dato input{border:0;padding:0;background:transparent;font-size:14px;font-weight:600;outline:none;width:100%}
.chat{flex:1;background:var(--chat);padding:14px 12px 12px;display:flex;flex-direction:column;gap:8px}
.ev{align-self:center;font-size:12px;color:#3A3F48;background:#fff;padding:5px 10px;border-radius:8px;text-align:center;max-width:90%}
.ev.red{color:var(--red);background:var(--redbg);font-weight:600}
.ev.okk{color:#fff;background:var(--ok);font-weight:600}
.estados{background:var(--chat);padding:0 12px 8px;display:flex;gap:8px;overflow-x:auto}
.qr{background:var(--chat);padding:0 12px 8px;display:flex;gap:8px;overflow-x:auto}
.qr button,.estados button{flex:none;height:36px;padding:0 12px;border-radius:18px;border:1px solid #C9CDD4;background:#fff;font-size:13px;cursor:pointer}
.estados button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.bar{background:var(--chat);padding:0 8px 14px;display:flex;gap:6px;align-items:flex-end;position:sticky;bottom:0}
.bar .box{flex:1;background:#fff;border-radius:24px;display:flex;align-items:center;padding:4px 6px 4px 14px;min-height:48px}
.bar textarea{flex:1;border:0;outline:none;resize:none;font-size:16px;background:transparent;max-height:120px}
.send{flex:none;width:48px;height:48px;border-radius:24px;border:0;background:var(--ok);display:flex;align-items:center;justify-content:center;cursor:pointer}
/* Hoja inferior */
.sheet-bg{position:fixed;inset:0;background:rgba(21,23,28,.55);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:#fff;border-radius:22px 22px 0 0;width:100%;max-width:560px;padding:10px 20px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px;max-height:92dvh;overflow:auto}
.grab{align-self:center;width:40px;height:5px;border-radius:3px;background:#C9CDD4}
/* Panel */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--mut);font-size:12px;font-weight:600;padding:8px 6px;border-bottom:1px solid var(--line)}
td{padding:10px 6px;border-bottom:1px solid #EEEFF2}
td.n,th.n{text-align:right}
.scroll{overflow-x:auto}
.barra{height:10px;border-radius:5px;background:#EEEFF2;overflow:hidden}.barra i{display:block;height:10px;border-radius:5px}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}.kpi span{font-size:12px;color:var(--mut)}.kpi b{display:block;font-size:24px}
#toast{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:50;max-width:90%}
#toast.show{opacity:1}
.empty{padding:40px 24px;text-align:center;color:var(--mut)}
.login{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:24px;gap:16px;background:#fff}
.login h1{margin:0;font-size:26px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}