:root{--navy:#0c1a35;--blue:#1a3480;--violet:#0d7377;--vl:#0d9488;--vdim:rgba(13,148,136,0.08);--cream:#fafaf7;--white:#fff;--ink:#0f172a;--muted:#64748b;--light:#f1f5f9;--brd:#e2e8f0;--brd2:#cbd5e1;--green:#059669;--gbg:#ecfdf5;--red:#dc2626;--rbg:#fef2f2;--amber:#d97706;--abg:#fffbeb;--orange:#ea580c;--teal:#0d9488;--tbg:#f0fdfa;--sidebar-w:256px;--bot-nav:0px}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Sora',sans-serif;background:var(--cream);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:rgba(13,148,136,0.15);color:var(--ink)}

/* ═══ ANIMATIONS ═══ */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(5,150,105,0.4)}50%{box-shadow:0 0 0 8px rgba(5,150,105,0)}}
@keyframes shimmer{from{background-position:-200% 0}to{background-position:200% 0}}
.anim-up{animation:slideUp 0.5s ease both}
.anim-up-1{animation-delay:0.05s}.anim-up-2{animation-delay:0.1s}.anim-up-3{animation-delay:0.15s}.anim-up-4{animation-delay:0.2s}.anim-up-5{animation-delay:0.25s}

/* ═══ LOGIN ═══ */
.login{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;background:var(--navy);position:relative;overflow:hidden}
.login::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(13,115,119,0.3),transparent 60%),radial-gradient(ellipse 50% 50% at 80% 80%,rgba(26,52,128,0.3),transparent 50%)}
.login::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.015) 1px,transparent 1px);background-size:56px 56px}
.lcard{position:relative;z-index:2;background:var(--white);border-radius:32px;padding:56px 52px;width:560px;max-width:92vw;box-shadow:0 40px 100px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.04);text-align:center;animation:scaleIn 0.5s ease}
.lnav{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:32px}
.lm{width:40px;height:40px;background:linear-gradient(135deg,var(--blue),var(--vl));border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;color:white;box-shadow:0 4px 14px rgba(13,115,119,0.3);flex-shrink:0}
.ltxt{font-size:18px;font-weight:800;letter-spacing:-0.4px}
.ldiv{width:1.5px;height:22px;background:var(--brd);margin:0 8px}
.llbl{font-size:13px;font-weight:700;color:var(--vl)}
.ltitle{font-family:'Instrument Serif',serif;font-size:38px;color:var(--ink);margin-bottom:8px;letter-spacing:-1px;line-height:1.15}
.ltitle em{font-style:italic;color:var(--vl)}
.lsub{font-size:14px;color:var(--muted);margin-bottom:28px;line-height:1.6}
.lfield{margin-bottom:20px;text-align:left}
.lfl{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:8px;display:block}
.linput{width:100%;background:var(--light);border:1.5px solid var(--brd);border-radius:14px;padding:15px 20px;font-family:'Sora',sans-serif;font-size:20px;color:var(--ink);outline:none;text-align:center;letter-spacing:8px;font-weight:800;transition:all 0.2s}
.linput:focus{border-color:var(--vl);background:#fff;box-shadow:0 0 0 4px var(--vdim)}
.linput::placeholder{letter-spacing:3px;font-weight:400;color:#cbd5e1;font-size:16px}
.lbtn{width:100%;background:linear-gradient(135deg,var(--blue),var(--vl));color:white;border:none;border-radius:14px;padding:15px;font-size:15px;font-weight:800;cursor:pointer;font-family:'Sora',sans-serif;box-shadow:0 6px 20px rgba(13,115,119,0.3);transition:all 0.2s}
.lbtn:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(13,115,119,0.4)}
.lbtn:active{transform:translateY(0);box-shadow:0 4px 12px rgba(13,115,119,0.25)}
.lhint{font-size:12px;color:var(--muted);margin-top:16px}
.lhint code{background:var(--light);padding:3px 12px;border-radius:7px;font-family:monospace;font-size:12px;font-weight:700;color:var(--vl)}
.lerr{display:none;background:var(--rbg);border:1px solid #fca5a5;border-radius:10px;padding:10px 14px;font-size:11px;color:var(--red);font-weight:600;margin-top:10px;animation:slideDown 0.3s ease}

/* ═══ INTRO ═══ */
/* see redesigned intro below */
.intro-card{background:var(--white);border-radius:28px;padding:48px 44px;width:500px;max-width:90vw;text-align:center;box-shadow:0 32px 80px rgba(0,0,0,0.25);animation:slideUp 0.4s ease}
.intro-icon{font-size:44px;margin-bottom:14px}
.intro-title{font-family:'Instrument Serif',serif;font-size:30px;color:var(--ink);margin-bottom:8px;letter-spacing:-0.5px}
.intro-title em{font-style:italic;color:var(--vl)}
.intro-desc{font-size:13px;color:var(--muted);line-height:1.8;margin-bottom:24px}
.intro-desc strong{color:var(--ink);font-weight:700}
.intro-features{display:grid;grid-template-columns:1fr 1fr;gap:7px;text-align:left;margin-bottom:24px}
.intro-feat{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--ink);padding:7px 11px;background:var(--light);border-radius:10px}
.intro-feat-dot{width:5px;height:5px;border-radius:50%;background:var(--vl);flex-shrink:0}
.intro-btn{background:linear-gradient(135deg,var(--blue),var(--vl));color:white;border:none;border-radius:14px;padding:15px 32px;font-size:14px;font-weight:800;cursor:pointer;font-family:'Sora',sans-serif;transition:all 0.2s;box-shadow:0 6px 20px rgba(13,115,119,0.25);display:block;width:100%}
.intro-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(13,115,119,0.35)}

/* ═══ APP SHELL ═══ */
.app{display:none;min-height:100vh;min-height:100dvh}.app.active{display:flex}

/* ═══ SIDEBAR (Desktop) ═══ */
.sidebar{width:var(--sidebar-w);background:var(--navy);min-height:100vh;position:fixed;top:0;left:0;z-index:100;display:flex;flex-direction:column;overflow:hidden}
.sh{padding:18px 20px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,0.06);min-height:60px}
.sh-mark{width:32px;height:32px;background:linear-gradient(135deg,var(--blue),var(--vl));border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:white;flex-shrink:0;box-shadow:0 2px 8px rgba(13,115,119,0.3)}
.sh-brand{white-space:nowrap;overflow:hidden}
.sh-name{font-size:14px;font-weight:800;color:white;letter-spacing:-0.3px}
.sh-sub{font-size:9px;color:rgba(255,255,255,0.28);font-weight:600;margin-top:1px}
.snav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.si{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:10px;cursor:pointer;transition:all 0.15s;position:relative;min-height:42px;border:1px solid transparent}
.si:hover{background:rgba(255,255,255,0.06)}
.si.active{background:rgba(13,148,136,0.18);border-color:rgba(13,148,136,0.2)}
.si.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:16px;background:var(--vl);border-radius:0 3px 3px 0}
.si-icon{flex-shrink:0}
.si-icon svg{stroke:white}
.si.active .si-icon{box-shadow:0 0 0 2px rgba(13,148,136,0.3)}
.si-label{font-size:11.5px;font-weight:600;color:rgba(255,255,255,0.45);white-space:nowrap;overflow:hidden}
.si.active .si-label{color:white;font-weight:700}
.si:hover .si-label{color:rgba(255,255,255,0.8)}
.si-badge{margin-left:auto;background:var(--red);color:white;font-size:9px;font-weight:800;padding:2px 7px;border-radius:99px;flex-shrink:0;min-width:18px;text-align:center}
.sdiv{height:1px;background:rgba(255,255,255,0.05);margin:6px 13px}
.sfooter{padding:12px 10px;border-top:1px solid rgba(255,255,255,0.06)}
.scompany{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05)}
.scompany-av{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#059669,#34d399);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:white;flex-shrink:0}
.scompany-name{font-size:11px;font-weight:700;color:white}
.scompany-role{font-size:9px;color:rgba(255,255,255,0.3);font-weight:600}
.si.addon{opacity:0.35;cursor:default}
.si.addon:hover{background:none}
.si.addon .si-label{font-style:italic}

/* ═══ MAIN AREA ═══ */
.main{margin-left:var(--sidebar-w);flex:1;min-height:100vh;transition:margin-left 0.25s}
.topbar{position:sticky;top:0;z-index:50;background:rgba(250,250,247,0.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--brd);display:flex;align-items:center;justify-content:space-between;padding:0 36px;height:52px}
.topbar-title{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-0.3px}
.topbar-right{display:flex;align-items:center;gap:8px}
.topbar-tour{display:flex;align-items:center;gap:5px;padding:6px 13px;border-radius:8px;border:1.5px solid rgba(13,148,136,0.25);background:var(--vdim);font-size:10px;font-weight:700;color:var(--vl);cursor:pointer;font-family:'Sora',sans-serif;transition:all 0.15s}
.topbar-tour:hover{background:rgba(13,148,136,0.12);border-color:var(--vl)}
.topbar-exit{font-size:10px;color:var(--muted);cursor:pointer;padding:6px 13px;border:1.5px solid var(--brd);border-radius:8px;background:var(--white);font-family:'Sora',sans-serif;font-weight:600;transition:all 0.15s}
.topbar-exit:hover{border-color:var(--red);color:var(--red);background:var(--rbg)}
.content{padding:24px 36px 36px}
.module-page{display:none}.module-page.active{display:block}

/* ═══ MOBILE BOTTOM NAV ═══ */
.bot-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--white);border-top:1px solid var(--brd);padding:6px 8px calc(env(safe-area-inset-bottom, 0px) + 6px);box-shadow:0 -4px 20px rgba(0,0,0,0.06)}
.bot-nav-inner{display:flex;justify-content:space-around;align-items:center}
.bn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px;border-radius:10px;cursor:pointer;transition:all 0.15s;flex:1;position:relative;border:none;background:none;font-family:'Sora',sans-serif}
.bn-icon{font-size:18px;line-height:1}
.bn-label{font-size:8px;font-weight:700;color:var(--muted);letter-spacing:0.2px}
.bn.active .bn-label{color:var(--vl);font-weight:800}
.bn.active::after{content:'';position:absolute;top:2px;left:50%;transform:translateX(-50%);width:16px;height:2.5px;background:var(--vl);border-radius:2px}
.bn-badge{position:absolute;top:2px;right:50%;margin-right:-16px;background:var(--red);color:white;font-size:8px;font-weight:800;min-width:14px;height:14px;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 3px}

/* ═══ TOAST ═══ */
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--ink);color:white;padding:12px 22px;border-radius:12px;font-size:12px;font-weight:700;font-family:'Sora',sans-serif;z-index:9000;transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1),opacity 0.3s;box-shadow:0 8px 24px rgba(0,0,0,0.2);display:flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer;opacity:0;pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.toast-icon{font-size:14px;font-weight:900}

/* ═══ SHARED: WELCOME ═══ */
.pwelcome{background:linear-gradient(135deg,var(--navy) 0%,var(--blue) 55%,#2d4aa8 100%);border-radius:18px;padding:28px 32px;margin-bottom:14px;position:relative;overflow:hidden}
.pwelcome::before{content:'';position:absolute;top:-80px;right:-40px;width:240px;height:240px;border-radius:50%;background:rgba(13,148,136,0.1)}
.pwelcome::after{content:'';position:absolute;bottom:-60px;left:30%;width:180px;height:180px;border-radius:50%;background:rgba(26,52,128,0.2)}
.pwt{font-family:'Instrument Serif',serif;font-size:26px;color:white;position:relative;z-index:2;letter-spacing:-0.5px}
.pwt em{font-style:italic;color:#5eead4}
.pws{font-size:12px;color:rgba(255,255,255,0.4);margin-top:4px;position:relative;z-index:2}
.pw-date{position:absolute;top:20px;right:20px;z-index:2;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:5px 12px;font-size:10px;font-weight:700;color:rgba(255,255,255,0.55)}

/* ═══ SHARED: TASA BCV ═══ */
.tasa{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--white);border:1.5px solid var(--brd);border-radius:12px;margin-bottom:20px;flex-wrap:wrap}
.tasa-flag{width:26px;height:17px;border-radius:3px;overflow:hidden;flex-shrink:0;position:relative;border:1px solid rgba(0,0,0,0.06)}
.tasa-flag-y{position:absolute;top:0;left:0;right:0;height:33.3%;background:#ffcd00}
.tasa-flag-b{position:absolute;top:33.3%;left:0;right:0;height:33.4%;background:#003893}
.tasa-flag-r{position:absolute;bottom:0;left:0;right:0;height:33.3%;background:#cf142b}
.tasa-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted)}
.tasa-val{font-size:13px;font-weight:800;color:var(--ink)}
.tasa-trend{font-size:9px;font-weight:700;padding:2px 7px;border-radius:99px;background:var(--rbg);color:var(--red)}
.tasa-sp{flex:1}.tasa-src{font-size:9px;color:var(--brd2)}

/* ═══ SHARED: ACTION BAR ═══ */
.act-bar{display:flex;align-items:center;gap:7px;margin-bottom:20px;flex-wrap:wrap}
.act-btn{padding:9px 16px;border-radius:10px;font-size:11px;font-weight:700;cursor:pointer;font-family:'Sora',sans-serif;border:1.5px solid var(--brd);background:var(--white);color:var(--ink);transition:all 0.15s;display:flex;align-items:center;gap:5px;white-space:nowrap}
.act-btn:hover{border-color:var(--vl);color:var(--vl);background:var(--vdim)}
.act-btn:active{transform:scale(0.97)}
.act-btn.primary{border-color:rgba(13,148,136,0.2);color:var(--vl);background:var(--vdim)}
.act-btn.green{border-color:rgba(5,150,105,0.2);color:var(--green);background:var(--gbg)}
.act-btn.blue{border-color:rgba(59,130,246,0.2);color:#3b82f6;background:#eff6ff}
.act-btn.income{border-color:rgba(5,150,105,0.2);color:var(--green);background:var(--gbg)}
.act-btn.expense{border-color:rgba(220,38,38,0.15);color:var(--red);background:var(--rbg)}
.act-btn-plus{font-weight:900;font-size:13px}
.act-sp{flex:1}
.act-date{font-size:10px;color:var(--muted);font-weight:600}

/* ═══ SHARED: KPIs ═══ */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.kpi{background:var(--white);border:1.5px solid var(--brd);border-radius:14px;padding:18px 20px;position:relative;overflow:hidden;transition:all 0.2s}
.kpi:hover{border-color:rgba(13,148,136,0.1);box-shadow:0 2px 12px rgba(0,0,0,0.03)}
.kpi::after{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.kpi:nth-child(1)::after{background:linear-gradient(90deg,var(--green),#34d399)}
.kpi:nth-child(2)::after{background:linear-gradient(90deg,var(--red),#f87171)}
.kpi:nth-child(3)::after{background:linear-gradient(90deg,var(--amber),#fbbf24)}
.kpi:nth-child(4)::after{background:linear-gradient(90deg,var(--vl),#5eead4)}
.kpi-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--muted);margin-bottom:6px}
.kpi-val{font-size:24px;font-weight:800;letter-spacing:-0.5px}
.kpi-val.red{color:var(--red)}.kpi-val.green{color:var(--green)}.kpi-val.amber{color:var(--amber)}.kpi-val.purple{color:var(--vl)}.kpi-val.teal{color:var(--teal)}
.kpi-meta{font-size:10px;color:var(--muted);margin-top:3px;font-weight:600}
.kpi-trend{font-size:10px;font-weight:700;margin-top:3px}
.kpi-trend.up{color:var(--green)}.kpi-trend.down{color:var(--red)}

/* ═══ SHARED: PANELS ═══ */
/* ═══ POS / VENTA RÁPIDA ═══ */
.inv-tabs{display:flex;gap:4px;margin-bottom:16px;background:var(--light);border-radius:10px;padding:3px}
.inv-tab{flex:1;padding:8px 14px;border-radius:8px;font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;text-align:center;transition:all 0.15s;border:none;background:none;font-family:'Sora',sans-serif}
.inv-tab.active{background:var(--white);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,0.06)}
.inv-tab:hover:not(.active){color:var(--ink)}
.inv-view{display:none}.inv-view.active{display:block}
.pos-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media(max-width:768px){.pos-grid{grid-template-columns:1fr}}
@media(min-width:1200px){.pos-grid{gap:24px}}
.pos-products{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:1100px){.pos-products{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.pos-products{grid-template-columns:repeat(2,1fr)}}
.pos-item{background:var(--white);border:1.5px solid var(--brd);border-radius:12px;padding:10px;text-align:center;cursor:pointer;transition:all 0.15s;position:relative}
.pos-item:hover{border-color:rgba(13,148,136,0.2);box-shadow:0 2px 8px rgba(0,0,0,0.04)}
.pos-item:active{transform:scale(0.97)}
.pos-item.added{border-color:var(--green);background:var(--gbg)}
.pos-item-code{font-size:7px;font-weight:700;color:var(--muted);font-family:monospace;margin-bottom:3px}
.pos-item-name{font-size:10px;font-weight:700;color:var(--ink);margin-bottom:2px}
.pos-item-price{font-size:12px;font-weight:800;color:var(--vl)}
.pos-item-stock{font-size:8px;color:var(--muted);margin-top:2px}
.pos-item-barcode{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:6px;padding-top:6px;border-top:1px solid var(--light)}
.pos-item-bars{display:flex;gap:1px;height:20px;align-items:flex-end}
.pos-item-bars span{background:var(--ink);border-radius:0.5px}
.pos-scan{display:flex;align-items:center;gap:8px;background:var(--vdim);border:1.5px solid rgba(13,148,136,0.12);border-radius:10px;padding:10px 14px;margin-bottom:12px;cursor:pointer;transition:all 0.15s}
.pos-scan:hover{background:rgba(13,148,136,0.08);border-color:var(--vl)}
.pos-scan-text{font-size:11px;font-weight:700;color:var(--vl)}
.pos-scan-sub{font-size:9px;color:var(--muted)}
.pos-cart{background:var(--white);border:1.5px solid var(--brd);border-radius:16px;position:sticky;top:60px;display:flex;flex-direction:column}
.pos-cart-header{padding:14px 18px;border-bottom:1px solid var(--brd);display:flex;align-items:center;justify-content:space-between;background:var(--light);border-radius:16px 16px 0 0}
.pos-cart-title{font-size:13px;font-weight:800}
.pos-cart-count{font-size:9px;font-weight:700;color:var(--vl);background:var(--vdim);padding:3px 10px;border-radius:99px}
.pos-cart-body{padding:10px 18px;min-height:80px;max-height:220px;overflow-y:auto;flex:1}
.pos-cart-empty{text-align:center;padding:28px 0;font-size:11px;color:var(--muted)}
.pos-cart-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--light)}
.pos-cart-item:last-child{border-bottom:none}
.pos-ci-name{font-size:11px;font-weight:700;flex:1;min-width:0}
.pos-ci-qty{display:flex;align-items:center;gap:4px}
.pos-ci-btn{width:24px;height:24px;border-radius:6px;border:1.5px solid var(--brd);background:var(--white);font-size:13px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;font-family:'Sora',sans-serif;color:var(--ink)}
.pos-ci-btn:hover{border-color:var(--vl);color:var(--vl);background:var(--vdim)}
.pos-ci-num{font-size:13px;font-weight:800;min-width:18px;text-align:center}
.pos-ci-price{font-size:12px;font-weight:800;color:var(--ink);min-width:44px;text-align:right}
.pos-cart-footer{padding:14px 18px;border-top:1.5px solid var(--brd);background:var(--light);border-radius:0 0 16px 16px}
.pos-total-row{display:flex;justify-content:space-between;margin-bottom:4px;font-size:11px}
.pos-total-label{color:var(--muted);font-weight:600}
.pos-total-val{font-weight:800}
.pos-grand-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;margin:4px 0 8px;border-top:1.5px solid var(--brd)}
.pos-grand-label{font-size:13px;font-weight:800;color:var(--ink)}
.pos-grand{font-size:22px;font-weight:900;color:var(--ink)}
.pos-pay-method{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:10px}
.pos-pay-opt{padding:7px 4px;border-radius:7px;border:1.5px solid var(--brd);background:var(--white);font-family:'Sora',sans-serif;font-size:9px;font-weight:700;color:var(--muted);cursor:pointer;text-align:center;transition:all 0.12s}
.pos-pay-opt:hover{border-color:var(--vl);color:var(--vl)}
.pos-pay-opt.active{border-color:var(--vl);background:var(--vdim);color:var(--vl)}
.pos-complete-btn{width:100%;padding:12px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--vl));color:white;font-family:'Sora',sans-serif;font-size:12px;font-weight:800;cursor:pointer;transition:all 0.15s;box-shadow:0 4px 12px rgba(13,115,119,0.2)}
.pos-complete-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(13,115,119,0.3)}
.pos-complete-btn:disabled{opacity:0.4;pointer-events:none}
.cartera-list{display:flex;flex-direction:column;gap:6px}
.cartera-card{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:10px;border:1px solid var(--light);cursor:pointer;transition:all 0.15s;gap:10px}
.cartera-card:hover{background:var(--vdim);border-color:rgba(13,148,136,0.12)}
.cartera-card:active{transform:scale(0.99)}
.cartera-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.cartera-right{text-align:right;flex-shrink:0}
.ppanel{background:var(--white);border:1.5px solid var(--brd);border-radius:16px;overflow:hidden;margin-bottom:20px;transition:box-shadow 0.2s}
.ppanel:hover{box-shadow:0 2px 12px rgba(0,0,0,0.02)}
.pph{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--brd)}
.ppt{font-size:13px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:6px}
.ppbadge{font-size:9px;font-weight:800;color:var(--white);background:var(--vl);padding:2px 9px;border-radius:99px}
.ppdate{font-size:10px;font-weight:600;color:var(--muted)}
.ppb{font-size:9px;font-weight:700;color:var(--vl);padding:3px 9px;border-radius:99px;background:var(--vdim)}
.ppbody{padding:18px 20px}
.pgrid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:20px}
.pgrid-half{grid-template-columns:1fr 1fr !important}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:20px}

/* ═══ BRANDING BAR ═══ */
.brand-bar{display:none;align-items:center;gap:8px;padding:10px 20px;background:var(--navy)}
.brand-bar-mark{width:24px;height:24px;background:linear-gradient(135deg,var(--blue),var(--vl));border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 6px rgba(13,115,119,0.25)}
.brand-bar-mark svg{width:12px;height:12px}
.brand-bar-text{font-size:10px;color:rgba(255,255,255,0.4);font-weight:600;letter-spacing:0.3px}
.brand-bar-text strong{color:rgba(255,255,255,0.85);font-weight:800}

/* ═══ SHARED: VERIFY ═══ */
.verify-row{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--light);transition:all 0.3s}
.verify-row:last-child{border-bottom:none}
.verify-row.verified{background:var(--gbg);opacity:0.5}
.verify-row.rejected{background:var(--rbg);opacity:0.3}
.verify-avatar{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:white;flex-shrink:0}
.verify-info{flex:1;min-width:0}
.verify-name{font-size:12px;font-weight:700;color:var(--ink)}
.verify-id{font-weight:500;color:var(--muted);font-size:10px}
.verify-detail{font-size:10px;color:var(--muted);margin-top:2px}
.verify-time{font-size:9px;color:var(--brd2);white-space:nowrap;margin-right:4px}
.verify-actions{display:flex;gap:5px}
.verify-btn{padding:5px 12px;border-radius:7px;font-size:10px;font-weight:700;cursor:pointer;font-family:'Sora',sans-serif;border:1.5px solid;transition:all 0.15s}
.verify-btn:active{transform:scale(0.95)}
.verify-btn.accept{border-color:rgba(5,150,105,0.3);color:var(--green);background:var(--gbg)}
.verify-btn.accept:hover{background:#d1fae5;border-color:var(--green)}
.verify-btn.reject{border-color: red;color:var(--red);background-color: #f6cfcf !important;}
.verify-btn.reject:hover{border-color:var(--red);color:var(--red);background-color: #f8c3c3 !important;}
.verify-btn.done{pointer-events:none;font-weight:800}

/* ═══ SHARED: TABLE ═══ */
.ar-table{width:100%;border-collapse:collapse;font-size:12px}
.ar-table th{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--muted);padding:9px 14px;text-align:left;background:var(--light)}
.ar-table td{padding:11px 14px;border-bottom:1px solid #f1f5f9;font-size:12px;vertical-align:middle}
.ar-table tbody tr{cursor:pointer;transition:background 0.15s}
.ar-table tbody tr:hover{background:var(--vdim)}
.client-name{font-weight:700;color:var(--ink);font-size:12px}.client-sub{font-size:10px;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;font-size:9px;font-weight:700}
.badge .dot{width:4px;height:4px;border-radius:50%;background:currentColor}
.badge.overdue{background:var(--rbg);color:var(--red)}.badge.partial{background:var(--abg);color:var(--amber)}.badge.paid{background:var(--gbg);color:var(--green)}
.amount{font-weight:800}.amount.red{color:var(--red)}.amount.green{color:var(--green)}.amount.amber{color:var(--amber)}
.mini-bar{height:4px;background:var(--light);border-radius:99px;width:70px;overflow:hidden}.mini-bar-fill{height:100%;border-radius:99px}
.pct-text{font-size:9px;color:var(--muted);margin-top:1px}
.table-action{padding:4px 12px;border-radius:6px;font-size:10px;font-weight:700;cursor:pointer;font-family:'Sora',sans-serif;border:1.5px solid var(--brd);background:var(--white);color:var(--ink);transition:all 0.15s}
.table-action:hover{border-color:var(--vl);color:var(--vl);background:var(--vdim)}
.table-action:active{transform:scale(0.95)}

/* ═══ SHARED: INSIGHTS ═══ */
.insight{display:flex;align-items:flex-start;gap:9px;padding:11px 14px;border-radius:11px;font-size:11px;color:var(--ink);line-height:1.55;margin-top:10px}
.insight strong{font-weight:700}
.insight.warn{background:var(--abg);border:1px solid #fde68a}
.insight.violet{background:var(--vdim);border:1px solid rgba(13,148,136,0.12)}
.insight.amber{background:var(--abg);border:1px solid #fde68a}
.insight.red{background:var(--rbg);border:1px solid #fca5a5}
.insight-icon{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;flex-shrink:0}
.insight-icon.violet{background:rgba(13,148,136,0.15);color:var(--vl)}
.insight-icon.amber{background:rgba(217,119,6,0.15);color:var(--amber)}
.insight-icon.red{background:rgba(220,38,38,0.15);color:var(--red)}

/* ═══ SHARED: AGING ═══ */
.aging-row{margin-bottom:12px}.aging-row:last-child{margin-bottom:0}
.aging-top{display:flex;justify-content:space-between;margin-bottom:3px}
.aging-name{font-size:11px;font-weight:600;color:var(--ink)}.aging-amt{font-size:11px;font-weight:800}
.aging-bar{height:5px;background:var(--light);border-radius:99px;overflow:hidden}.aging-fill{height:100%;border-radius:99px;transition:width 0.8s ease}

/* ═══ SHARED: CHARTS ═══ */
.chart-bars{display:flex;gap:8px;height:220px;padding:24px 0 0 20px;position:relative}
.chart-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.chart-bar-wrap{display:flex;gap:3px;align-items:flex-end;width:100%;flex:1;justify-content:center}
.chart-bar{border-radius:6px 6px 2px 2px;min-height:6px;transition:height 0.6s ease;cursor:pointer;position:relative}
.chart-bar-wrap .chart-bar.income,.chart-bar-wrap .chart-bar.expense{width:44%}

.chart-label{padding-top:4px;flex-shrink:0}
.chart-bar:hover{filter:brightness(1.1)}
.chart-bar::after{content:attr(data-val);position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:800;color:var(--ink);opacity:0;transition:opacity 0.15s;white-space:nowrap}
.chart-bar:hover::after{opacity:1}
.chart-bar.income{background:linear-gradient(180deg,var(--green),#34d399)}.chart-bar.expense{background:linear-gradient(180deg,#ef4444,#fca5a5)}
.chart-bar.primary{background:linear-gradient(180deg,var(--vl),var(--blue));width:80%}
.chart-label{font-size:9px;font-weight:600;color:var(--muted);height:14px}
.chart-legend{display:flex;gap:16px;margin-top:10px}
.chart-legend-item{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:var(--muted)}
.chart-legend-dot{width:8px;height:8px;border-radius:3px}
.breakeven-line{position:absolute;left:0;right:0;height:1.5px;background:var(--amber);z-index:2}
.breakeven-line::after{content:'PE';position:absolute;right:-4px;top:-9px;font-size:7px;font-weight:800;color:var(--amber)}
.breakeven-tag{font-size:9px;font-weight:700;color:var(--amber);margin-bottom:8px;display:flex;align-items:center;gap:5px}
.breakeven-tag-line{width:16px;height:1.5px;background:var(--amber)}

/* ═══ SHARED: CANALES ═══ */
.canal-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--light)}.canal-row:last-child{border-bottom:none}
.canal-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:white;flex-shrink:0}
.canal-icon.zelle{background:#0891b2}.canal-icon.banco{background:#059669}.canal-icon.movil{background:#d97706}.canal-icon.efectivo{background:#64748b}
.canal-info{flex:1;min-width:0}.canal-name{font-size:12px;font-weight:700;color:var(--ink)}.canal-sub{font-size:9px;color:var(--muted);margin-top:1px}
.canal-bar-bg{height:4px;background:var(--light);border-radius:99px;margin-top:5px;overflow:hidden}.canal-fill{height:100%;border-radius:99px;transition:width 0.8s ease}
.canal-amount{font-size:12px;font-weight:800;color:var(--ink);flex-shrink:0}.canal-pct{font-size:10px;font-weight:700;color:var(--muted);flex-shrink:0;min-width:30px;text-align:right}

/* ═══ SHARED: GASTOS ═══ */
.gasto-row{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--light)}.gasto-row:last-child{border-bottom:none}
.gasto-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.gasto-dot.fijo{background:var(--vl)}.gasto-dot.variable{background:var(--amber)}
.gasto-name{flex:1;font-size:11px;font-weight:600;color:var(--ink)}
.gasto-type{font-size:8px;font-weight:700;padding:2px 7px;border-radius:99px}.gasto-type.fijo{background:var(--vdim);color:var(--vl)}.gasto-type.var{background:var(--abg);color:var(--amber)}
.gasto-amount{font-size:11px;font-weight:800;color:var(--ink);min-width:55px;text-align:right}.gasto-pct{font-size:9px;font-weight:700;color:var(--muted);min-width:30px;text-align:right}

/* ═══ SHARED: HEALTH ═══ */
.health-card{border-radius:14px;padding:16px;display:flex;align-items:center;gap:12px;border:1.5px solid;margin-bottom:20px}
.health-card.good{background:var(--gbg);border-color:rgba(5,150,105,0.2)}
.health-indicator{width:12px;height:12px;border-radius:50%;flex-shrink:0;animation:pulse 2s infinite}
.health-card.good .health-indicator{background:var(--green)}
.health-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted)}.health-status{font-size:15px;font-weight:800;color:var(--green)}

/* ═══ FEED, ALERTS, MEMBERS, STOCK, REMINDERS, PULSE ═══ */
.feed-item{display:flex;align-items:flex-start;gap:12px;padding:12px 20px;border-bottom:1px solid var(--light);transition:background 0.15s}.feed-item:last-child{border-bottom:none}.feed-item:hover{background:rgba(13,148,136,0.02)}
.feed-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feed-icon .ico{}
.feed-text{flex:1}.feed-main{font-size:12px;color:var(--ink);line-height:1.45}.feed-main strong{font-weight:700}
.feed-time{font-size:10px;color:var(--muted);margin-top:2px}
.feed-module{font-size:8px;font-weight:700;padding:3px 7px;border-radius:99px;flex-shrink:0;margin-top:2px}
.feed-module.cobrar{background:#fef3c7;color:#92400e}.feed-module.inventario{background:#dbeafe;color:#1e40af}.feed-module.financiero{background:#ccfbf1;color:#0d7377}
.alert-card{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:12px;margin-bottom:8px}.alert-card:last-child{margin-bottom:0}
.alert-card.warning{background:var(--abg);border:1px solid #fde68a}.alert-card.danger{background:var(--rbg);border:1px solid #fca5a5}.alert-card.info{background:#eff6ff;border:1px solid #93c5fd}
.alert-title{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:2px}.alert-desc{font-size:11px;color:var(--muted);line-height:1.45}
.member-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--light)}.member-row:last-child{border-bottom:none}
.member-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.member-info{flex:1}
.member-name{font-size:12px;font-weight:700}.member-count{font-size:10px;color:var(--muted)}
.member-bar-bg{height:6px;background:var(--light);border-radius:99px;margin-top:5px;overflow:hidden}.member-bar-fill{height:100%;border-radius:99px;transition:width 0.8s ease}
.member-pct{font-size:12px;font-weight:800;min-width:36px;text-align:right}
.stock-item{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--light);transition:background 0.15s;border-radius:6px;margin:0 -6px;padding-left:6px;padding-right:6px}.stock-item:last-child{border-bottom:none}
.stock-item[onclick]:hover{background:var(--vdim)}
.stock-info{flex:1;min-width:0;overflow:hidden}.stock-name{font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stock-cat{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stock-right{display:flex;align-items:center;gap:8px;flex-shrink:0;min-width:90px;justify-content:flex-end}
.stock-qty{font-size:16px;font-weight:900;text-align:right;min-width:28px}.stock-qty.crit{color:var(--red)}.stock-qty.warn{color:var(--amber)}.stock-qty.ok{color:var(--green)}
.stock-unit{font-size:8px;color:var(--muted);text-align:right;min-width:18px}
.stock-badge{font-size:8px;font-weight:700;padding:3px 8px;border-radius:99px;white-space:nowrap;min-width:44px;text-align:center}
.stock-badge.crit{background:var(--rbg);color:var(--red)}.stock-badge.warn{background:var(--abg);color:var(--amber)}.stock-badge.ok{background:var(--gbg);color:var(--green)}
.reminder-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--light)}.reminder-row:last-child{border-bottom:none}
.reminder-urgency{width:3px;height:32px;border-radius:3px;flex-shrink:0}.reminder-urgency.urgente{background:var(--red)}.reminder-urgency.sugerido{background:var(--amber)}.reminder-urgency.amable{background:#3b82f6}
.reminder-info{flex:1}.reminder-client{font-size:11px;font-weight:700;color:var(--ink)}.reminder-reason{font-size:10px;color:var(--muted);line-height:1.45;margin-top:1px}
.reminder-btn{padding:5px 12px;border-radius:7px;border:none;font-family:'Sora',sans-serif;font-size:9px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all 0.15s;white-space:nowrap}
.reminder-btn:active{transform:scale(0.95)}
.reminder-btn.wa{background:#dcfce7;color:#16a34a}.reminder-btn.wa:hover{background:#bbf7d0}
.reminder-btn.done{background:#d1fae5;color:#166534;pointer-events:none}
.pulse-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pulse-title{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--vl);animation:blink 2s infinite}
.pulse-date{font-size:9px;color:var(--muted)}
.pulse-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--light);font-size:11px}.pulse-row:last-child{border-bottom:none}
.pulse-label{color:var(--muted);font-weight:600}.pulse-val{font-weight:800}.pulse-val.up{color:var(--green)}.pulse-val.down{color:var(--red)}.pulse-val.neutral{color:var(--ink)}

/* ═══ PAYLINK ═══ */
.paylink-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.paylink-info h3{font-family:'Instrument Serif',serif;font-size:20px;letter-spacing:-0.3px;margin-bottom:8px}.paylink-info h3 em{font-style:italic;color:var(--vl)}
.paylink-info p{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.paylink-url-row{display:flex;align-items:center;gap:6px;margin-bottom:14px}
.paylink-url{flex:1;background:var(--light);border:1.5px solid var(--brd);border-radius:9px;padding:9px 12px;font-family:monospace;font-size:11px;color:var(--vl);font-weight:700}
.paylink-copy{padding:9px 16px;border-radius:9px;border:1.5px solid var(--vl);background:var(--vdim);font-family:'Sora',sans-serif;font-size:10px;font-weight:700;color:var(--vl);cursor:pointer;transition:all 0.15s}
.paylink-copy:hover{background:rgba(13,148,136,0.12)}
.paylink-steps{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.paylink-step{display:flex;align-items:flex-start;gap:8px;font-size:11px;color:var(--muted);line-height:1.45}
.paylink-step-num{width:20px;height:20px;border-radius:6px;background:var(--vdim);color:var(--vl);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;flex-shrink:0}
.paylink-browser{background:var(--light);border-radius:12px;overflow:hidden;border:1.5px solid var(--brd)}
.paylink-browser-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--white);border-bottom:1px solid var(--brd)}
.paylink-browser-dots{display:flex;gap:4px}.paylink-browser-dots span{width:7px;height:7px;border-radius:50%}
.paylink-browser-url{font-family:monospace;font-size:9px;color:var(--muted);flex:1;text-align:center}
.paylink-browser-body{padding:18px 16px;text-align:center}
.paylink-form-title{font-family:'Instrument Serif',serif;font-size:16px;margin:8px 0 3px}.paylink-form-title em{font-style:italic;color:var(--vl)}
.paylink-form-sub{font-size:10px;color:var(--muted);margin-bottom:12px}
.paylink-form-fields{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.paylink-form-field{background:var(--white);border:1.5px solid var(--brd);border-radius:7px;padding:8px 10px;font-size:10px;color:var(--brd2);text-align:left}

/* ═══ LOCKED / ADD-ON TEASERS ═══ */
.addon-teaser{position:relative;border:1.5px dashed rgba(13,148,136,0.25);border-radius:16px;padding:20px;background:linear-gradient(135deg,rgba(13,148,136,0.03),rgba(13,148,136,0.06));overflow:hidden;transition:all 0.2s}
.addon-teaser:hover{border-color:rgba(13,148,136,0.4);box-shadow:0 4px 16px rgba(13,148,136,0.06)}
.addon-teaser-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.addon-teaser-icon{font-size:20px}
.addon-teaser-title{font-size:13px;font-weight:800;color:var(--ink)}
.addon-teaser-tag{font-size:8px;font-weight:700;color:var(--vl);background:var(--vdim);padding:2px 8px;border-radius:99px;margin-left:auto}
.addon-teaser-desc{font-size:11px;color:var(--muted);line-height:1.5;margin-bottom:12px}
.addon-teaser-features{display:flex;flex-wrap:wrap;gap:6px}
.addon-teaser-feat{font-size:9px;font-weight:600;color:var(--vl);background:rgba(13,148,136,0.06);padding:4px 10px;border-radius:99px;border:1px solid rgba(13,148,136,0.1)}

/* ═══ DEMO FOOTER ═══ */
.demo-footer{background:var(--navy);padding:16px 36px;display:flex;align-items:center;justify-content:space-between;border-radius:16px;margin:32px 0 0}
.demo-footer-title{font-size:12px;font-weight:800;color:white;margin-bottom:1px}
.demo-footer-sub{font-size:9px;color:rgba(255,255,255,0.35)}
.demo-footer-powered{font-size:8px;color:rgba(255,255,255,0.2);margin-top:4px;font-weight:600;letter-spacing:0.3px}
.demo-footer-powered strong{color:rgba(255,255,255,0.45);font-weight:800}
.demo-footer-cta{background:linear-gradient(135deg,var(--vl),#5eead4);color:white;text-decoration:none;padding:9px 22px;border-radius:10px;font-size:11px;font-weight:800;transition:all 0.2s;box-shadow:0 4px 12px rgba(13,148,136,0.3);font-family:'Sora',sans-serif}
.demo-footer-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(13,148,136,0.4)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1100px){
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .pgrid,.pgrid-half,.grid-2{grid-template-columns:1fr !important}
  .grid-3{grid-template-columns:1fr 1fr !important}
  .paylink-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  :root{--bot-nav:64px}
  .sidebar{display:none}
  .main{margin-left:0}
  .bot-nav{display:block}
  .topbar{padding:0 16px;height:48px}
  .topbar-title{font-size:13px}
  .topbar-tour{font-size:9px;padding:5px 10px}
  .content{padding:16px 16px calc(var(--bot-nav) + 24px)}
  .demo-footer{padding:14px 16px;border-radius:12px;margin:24px 0 0}
  .demo-footer-sub{display:none}
  .demo-footer-title{font-size:11px}
  .demo-footer-cta{padding:8px 16px;font-size:10px}
  .kpi-row{grid-template-columns:1fr 1fr;gap:8px}
  .kpi{padding:14px 16px}
  .kpi-val{font-size:20px}
  .pwelcome{padding:22px 20px;border-radius:14px}
  .pwt{font-size:22px}
  .pw-date{display:none}
  .ppanel{border-radius:14px}
  .pph{padding:12px 16px}
  .ppbody{padding:14px 16px}
  .act-bar{gap:5px}.act-btn{padding:7px 10px;font-size:10px}
  .act-date{display:none}
  .verify-row{padding:10px 16px;gap:8px;flex-wrap:wrap}
  .verify-time{display:none}
  .verify-actions{width:100%;margin-top:4px;justify-content:flex-end}
  .ar-table{font-size:11px}.ar-table th{padding:7px 10px;font-size:8px}.ar-table td{padding:9px 10px}
  .feed-item{padding:10px 16px;gap:10px}
  .chart-bars{height:200px}
  .grid-3{grid-template-columns:1fr !important}
  .pgrid,.pgrid-half,.grid-2{grid-template-columns:1fr !important}
  .brand-bar{display:flex}
  .stock-item{gap:8px}
  .stock-info{min-width:0}
  .stock-right{min-width:80px;gap:6px}
  .stock-ico{width:30px;height:30px;font-size:9px;border-radius:8px}
  .gasto-row{flex-wrap:wrap;gap:4px}
  .canal-row{flex-wrap:wrap;gap:6px}
  .lcard{padding:36px 24px;border-radius:24px}.ltitle{font-size:28px}.lsub{font-size:13px}
  .intro-card{padding:36px 28px}.intro-title{font-size:26px}
  .reminder-row{flex-wrap:wrap}.reminder-btn{margin-left:auto}
  .paylink-grid{grid-template-columns:1fr}.paylink-browser{display:none}
}
@media(max-width:400px){
  .kpi-row{grid-template-columns:1fr}
  .act-bar{flex-direction:column;align-items:stretch}
  .act-sp{display:none}
  .intro-features{grid-template-columns:1fr}
}

/* ═══ INTRO OVERLAY (redesigned) ═══ */
.intro-overlay{position:fixed;inset:0;background:rgba(12,26,53,0.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeIn 0.4s}
.intro-card{background:var(--white);border-radius:28px;padding:52px 48px;width:580px;max-width:92vw;text-align:center;box-shadow:0 40px 100px rgba(0,0,0,0.3);animation:slideUp 0.5s ease}
.intro-badge{display:inline-flex;align-items:center;gap:6px;background:var(--vdim);border:1px solid rgba(13,148,136,0.15);border-radius:99px;padding:5px 14px;font-size:9px;font-weight:700;color:var(--vl);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:16px}
.intro-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--vl);animation:pulse 2s infinite}
.intro-icon{font-size:48px;margin-bottom:12px}
.intro-title{font-family:'Instrument Serif',serif;font-size:34px;color:var(--ink);margin-bottom:6px;letter-spacing:-0.5px;line-height:1.15}
.intro-title em{font-style:italic;color:var(--vl)}
.intro-subtitle{font-size:13px;font-weight:700;color:var(--vl);margin-bottom:16px}
.intro-desc{font-size:13px;color:var(--muted);line-height:1.7;margin-bottom:24px;max-width:440px;margin-left:auto;margin-right:auto}
.intro-desc strong{color:var(--ink);font-weight:700}
.intro-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:28px}
.intro-stat{background:var(--light);border-radius:12px;padding:12px 8px}
.intro-stat-val{font-size:18px;font-weight:900;color:var(--ink)}
.intro-stat-label{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted);margin-top:2px}
.intro-modules{display:grid;grid-template-columns:1fr 1fr;gap:7px;text-align:left;margin-bottom:28px}
.intro-mod{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;color:var(--ink);padding:9px 12px;background:var(--light);border-radius:10px;border:1px solid var(--brd)}
.intro-mod-icon{font-size:14px}
.intro-btn{background:linear-gradient(135deg,var(--blue),var(--vl));color:white;border:none;border-radius:14px;padding:16px 32px;font-size:14px;font-weight:800;cursor:pointer;font-family:'Sora',sans-serif;transition:all 0.2s;box-shadow:0 6px 24px rgba(13,115,119,0.3);display:block;width:100%}
.intro-btn:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(13,115,119,0.4)}
.intro-btn:active{transform:translateY(0)}
.intro-skip{font-size:12px;color:var(--ink);margin-top:12px;cursor:pointer;font-weight:700;background:none;border:1.5px solid var(--brd);font-family:'Sora',sans-serif;transition:all 0.15s;padding:12px 24px;border-radius:12px;display:block;width:100%;text-align:center}
.intro-skip:hover{border-color:var(--vl);color:var(--vl);background:var(--vdim)}

/* ═══ TOUR SYSTEM ═══ */
.tour-overlay{position:fixed;inset:0;z-index:8000;pointer-events:none;transition:opacity 0.3s}
.tour-overlay.active{pointer-events:auto}
.tour-backdrop{position:fixed;inset:0;background:rgba(12,26,53,0.55);transition:opacity 0.3s;opacity:0}
.tour-overlay.active .tour-backdrop{opacity:1}
.tour-spotlight{position:fixed;border-radius:16px;box-shadow:0 0 0 9999px rgba(12,26,53,0.55);z-index:8001;transition:all 0.45s cubic-bezier(0.4,0,0.2,1);pointer-events:none}
.tour-tooltip{position:fixed;z-index:8002;background:var(--white);border-radius:18px;padding:24px 28px;width:360px;max-width:85vw;box-shadow:0 20px 60px rgba(0,0,0,0.25),0 0 0 1px rgba(0,0,0,0.04);animation:scaleIn 0.35s ease;pointer-events:auto}
.tour-tooltip::before{content:'';position:absolute;width:12px;height:12px;background:var(--white);border-radius:2px;transform:rotate(45deg)}
.tour-tooltip.arrow-top::before{top:-6px;left:32px}
.tour-tooltip.arrow-bottom::before{bottom:-6px;left:32px}
.tour-tooltip.arrow-left::before{left:-6px;top:24px}
.tour-tooltip.arrow-right::before{right:-6px;top:24px}
.tour-step-badge{display:inline-flex;align-items:center;gap:4px;background:var(--vdim);border-radius:99px;padding:3px 10px;font-size:9px;font-weight:800;color:var(--vl);margin-bottom:8px}
.tour-title{font-family:'Instrument Serif',serif;font-size:20px;color:var(--ink);margin-bottom:5px;letter-spacing:-0.3px}
.tour-title em{font-style:italic;color:var(--vl)}
.tour-desc{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:16px}
.tour-desc strong{color:var(--ink);font-weight:700}
.tour-actions{display:flex;align-items:center;justify-content:space-between}
.tour-prev{padding:8px 16px;border-radius:8px;border:1.5px solid var(--brd);background:var(--white);font-family:'Sora',sans-serif;font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;transition:all 0.15s}
.tour-prev:hover{border-color:var(--vl);color:var(--vl)}
.tour-next{padding:8px 20px;border-radius:8px;border:none;background:linear-gradient(135deg,var(--blue),var(--vl));color:white;font-family:'Sora',sans-serif;font-size:11px;font-weight:800;cursor:pointer;transition:all 0.15s;box-shadow:0 4px 12px rgba(13,115,119,0.25)}
.tour-next:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(13,115,119,0.35)}
.tour-next:active{transform:translateY(0)}
.tour-dots{display:flex;gap:5px;align-items:center}
.tour-dot{width:6px;height:6px;border-radius:50%;background:var(--brd);transition:all 0.2s}
.tour-dot.active{background:var(--vl);width:18px;border-radius:3px}
.tour-close{position:absolute;top:12px;right:14px;width:24px;height:24px;border-radius:6px;border:none;background:var(--light);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:'Sora',sans-serif;transition:all 0.15s}
.tour-close:hover{background:var(--rbg);color:var(--red)}
@media(max-width:768px){
  .tour-tooltip{width:300px;padding:20px 22px;border-radius:14px}
  .tour-title{font-size:18px}
  .intro-card{padding:36px 24px;border-radius:22px}
  .intro-title{font-size:26px}
  .intro-stats{grid-template-columns:repeat(2,1fr)}
  .intro-modules{grid-template-columns:1fr}
  .intro-desc{font-size:12px}
}

/* ═══ ICON SYSTEM (SVG) ═══ */
.ico{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}
.ico svg{width:14px;height:14px}
.ico.sm{width:20px;height:20px;border-radius:5px}.ico.sm svg{width:10px;height:10px}
.ico.lg{width:34px;height:34px;border-radius:9px}.ico.lg svg{width:18px;height:18px}
.ico.panel{background:linear-gradient(135deg,var(--blue),var(--vl))}
.ico.cobrar{background:linear-gradient(135deg,#d97706,#f59e0b)}
.ico.inv{background:linear-gradient(135deg,#0d9488,#34d399)}
.ico.fin{background:linear-gradient(135deg,#0d9488,#5eead4)}
.ico.portal{background:#64748b}.ico.wa{background:#16a34a}
.ico.ok{background:var(--green)}.ico.warn{background:var(--amber)}.ico.danger{background:var(--red)}.ico.info{background:#3b82f6}
.ico.pago{background:#059669}.ico.stock{background:#0d9488}
.stock-ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:white;flex-shrink:0;background:linear-gradient(135deg,var(--blue),var(--vl))}
.bn-ico{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--light);line-height:1;margin:0 auto}
.bn-ico svg{width:13px;height:13px}
.bn.active .bn-ico{color:var(--vl);background:var(--vdim)}

/* ═══ MODALS ═══ */
.modal-overlay{position:fixed;inset:0;background:rgba(12,26,53,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9500;display:none;align-items:center;justify-content:center;animation:fadeIn 0.25s}
.modal-overlay.show{display:flex}
.modal{background:var(--white);border-radius:24px;padding:0;width:580px;max-width:92vw;max-height:90vh;overflow-y:auto;box-shadow:0 32px 80px rgba(0,0,0,0.25);animation:slideUp 0.35s ease}
.modal-header{padding:24px 28px 16px;border-bottom:1px solid var(--brd);position:sticky;top:0;background:var(--white);border-radius:24px 24px 0 0;z-index:2}
.modal-header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.modal-title{font-family:'Instrument Serif',serif;font-size:22px;color:var(--ink);letter-spacing:-0.3px}
.modal-title em{font-style:italic;color:var(--vl)}
.modal-close{width:28px;height:28px;border-radius:8px;border:none;background:var(--light);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:'Sora',sans-serif;transition:all 0.15s}
.modal-close:hover{background:var(--rbg);color:var(--red)}
.modal-sub{font-size:11px;color:var(--muted)}
.modal-body{padding:20px 28px 28px}
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--muted);margin-bottom:6px}
.form-input{width:100%;background:var(--light);border:1.5px solid var(--brd);border-radius:10px;padding:11px 14px;font-family:'Sora',sans-serif;font-size:13px;color:var(--ink);outline:none;transition:all 0.2s}
.form-input:focus{border-color:var(--vl);background:var(--white);box-shadow:0 0 0 3px var(--vdim)}
.form-input::placeholder{color:var(--brd2)}
select.form-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
textarea.form-input{resize:vertical;min-height:70px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.form-divider{height:1px;background:var(--brd);margin:20px 0}
.form-section-title{font-size:11px;font-weight:800;color:var(--ink);margin-bottom:12px;display:flex;align-items:center;gap:6px}
.form-section-title span{font-size:14px}
.modal-submit{width:100%;padding:14px;border:none;border-radius:12px;font-family:'Sora',sans-serif;font-size:13px;font-weight:800;cursor:pointer;transition:all 0.2s;margin-top:8px}
.modal-submit.primary{background:linear-gradient(135deg,var(--blue),var(--vl));color:white;box-shadow:0 4px 16px rgba(13,115,119,0.25)}
.modal-submit.primary:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(13,115,119,0.35)}
.modal-submit.green{background:linear-gradient(135deg,#059669,#34d399);color:white;box-shadow:0 4px 16px rgba(5,150,105,0.25)}
.modal-submit.green:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(5,150,105,0.35)}
.modal-submit.income{background:linear-gradient(135deg,#059669,#34d399);color:white;box-shadow:0 4px 16px rgba(5,150,105,0.25)}
.modal-submit.expense{background:linear-gradient(135deg,#dc2626,#f87171);color:white;box-shadow:0 4px 16px rgba(220,38,38,0.2)}
.modal-submit:active{transform:translateY(0) scale(0.99)}
.form-hint{font-size:10px;color:var(--muted);margin-top:4px;font-style:italic}
@media(max-width:768px){
  .modal{border-radius:20px 20px 0 0;max-height:85vh;margin-top:auto;align-self:flex-end;width:100%;max-width:100%}
  .modal-header{padding:20px 20px 12px;border-radius:20px 20px 0 0}
  .modal-body{padding:16px 20px 24px}
  .form-row{grid-template-columns:1fr}
  .modal-title{font-size:20px}
  .form-row-3{grid-template-columns:1fr}
}

/* ═══ MEMBER DIRECTORY ═══ */
.dir-search{display:flex;gap:8px;margin-bottom:16px}
.dir-search-input{flex:1;background:var(--light);border:1.5px solid var(--brd);border-radius:10px;padding:10px 14px;font-family:'Sora',sans-serif;font-size:12px;color:var(--ink);outline:none;transition:all 0.2s}
.dir-search-input:focus{border-color:var(--vl);background:var(--white);box-shadow:0 0 0 3px var(--vdim)}
.dir-search-input::placeholder{color:var(--brd2)}
.dir-add-btn{padding:10px 16px;border-radius:10px;border:none;background:linear-gradient(135deg,var(--blue),var(--vl));color:white;font-family:'Sora',sans-serif;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap;transition:all 0.15s}
.dir-add-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(13,115,119,0.25)}
.dir-filters{display:flex;gap:5px;margin-bottom:16px;flex-wrap:wrap}
.dir-filter{padding:5px 12px;border-radius:99px;border:1.5px solid var(--brd);background:var(--white);font-family:'Sora',sans-serif;font-size:10px;font-weight:700;color:var(--muted);cursor:pointer;transition:all 0.15s}
.dir-filter.active{border-color:var(--vl);color:var(--vl);background:var(--vdim)}
.dir-filter:hover{border-color:var(--vl);color:var(--vl)}
.mc{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--light);cursor:pointer;transition:background 0.15s;border-radius:8px;margin:0 -8px;padding-left:8px;padding-right:8px}
.mc:last-child{border-bottom:none}
.mc:hover{background:var(--vdim)}
.mc-av{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:white;flex-shrink:0}
.mc-info{flex:1;min-width:0}
.mc-name{font-size:12px;font-weight:700;color:var(--ink)}
.mc-meta{font-size:10px;color:var(--muted);margin-top:1px}
.mc-right{text-align:right;flex-shrink:0}
.mc-status{font-size:9px;font-weight:700;padding:3px 8px;border-radius:99px;display:inline-block}
.mc-status.ok{background:var(--gbg);color:var(--green)}.mc-status.warn{background:var(--abg);color:var(--amber)}.mc-status.overdue{background:var(--rbg);color:var(--red)}
.mc-amount{font-size:10px;font-weight:700;margin-top:2px}
.mc-amount.owed{color:var(--red)}.mc-amount.clear{color:var(--green)}
.mc-arrow{color:var(--brd2);font-size:14px;margin-left:4px}
.detail-header{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--brd)}
.detail-av{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:white;flex-shrink:0}
.detail-name{font-size:16px;font-weight:800;color:var(--ink)}.detail-id{font-size:11px;color:var(--muted)}
.detail-actions{margin-left:auto;display:flex;gap:6px}
.detail-btn{padding:6px 14px;border-radius:8px;border:1.5px solid;font-family:'Sora',sans-serif;font-size:10px;font-weight:700;cursor:pointer;transition:all 0.15s}
.detail-btn.edit{border-color:var(--brd);color:var(--ink);background:var(--white)}
.detail-btn.edit:hover{border-color:var(--vl);color:var(--vl)}
.detail-btn.delete{border-color:rgba(220,38,38,0.2);color:var(--red);background:var(--rbg)}
.detail-btn.delete:hover{border-color:var(--red);background:#fecaca}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.detail-field{background:var(--light);border-radius:10px;padding:10px 14px}
.detail-field-label{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted);margin-bottom:3px}
.detail-field-val{font-size:12px;font-weight:700;color:var(--ink)}
.detail-section{font-size:11px;font-weight:800;color:var(--ink);margin:16px 0 10px;padding-top:16px;border-top:1px solid var(--brd)}
.detail-history{display:flex;flex-direction:column;gap:6px}
.detail-tx{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--light);border-radius:8px;font-size:11px}
.detail-tx-date{color:var(--muted);min-width:60px}.detail-tx-desc{flex:1;color:var(--ink);font-weight:600}.detail-tx-amt{font-weight:800}
.detail-tx-amt.paid{color:var(--green)}.detail-tx-amt.pending{color:var(--red)}
.detail-btn.activate:hover {
  background: rgba(5,150,105,0.1);
}

.pos-item-oos {
  opacity: 0.45;
  cursor: not-allowed !important;
  position: relative;
}
.pos-item-oos:hover {
  border-color: var(--brd) !important;
  box-shadow: none !important;
}
.pos-item-oos:active {
  transform: none !important;
}
.pos-item-oos .pos-item-name {
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1.5px;
}
.pos-item-oos .pos-item-price {
  text-decoration: line-through;
  text-decoration-color: var(--muted);
  color: var(--muted);
}
/* Hide Mercado rate everywhere */
[id*="mercado"], [id*="rate-mercado"] { display: none !important; }
#tasa-mercado-cobrar, #tasa-mercado-inv, #tasa-mercado-fin { display: none !important; }
/* Hide Mercado labels and their parent containers */
span:has(+ [id*="tasa-mercado"]) { display: none !important; }
/* Hide dividers before Mercado sections */
div:has(+ div:has([id*="tasa-mercado"])) > div[style*="width: 1px"] { display: none !important; }
/* Hide the entire Mercado rate display group */
div:has(> [id*="tasa-mercado"]) { display: none !important; }
/* Hide Mercado in tasa bar - target the container div with Mercado label */
.mercado-rate-section { display: none !important; }