@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#182230;--muted:#758196;--line:#e7eaf1;--paper:#fff;--canvas:#f7f8fc;--purple:#6848d8;--purple-dark:#5436bd;--lav:#f0edff;--green:#168b66;--shadow:0 12px 34px rgba(26,35,55,.055);--radius:20px;--dock-h:76px}*{box-sizing:border-box}html{min-height:100%;background:var(--canvas);scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--ink);background:var(--canvas);font:14px/1.5 'DM Sans',Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{color:inherit;cursor:pointer}.symbol-library{position:absolute;width:0;height:0;overflow:hidden}.app-frame{min-height:100vh}.side-panel{position:fixed;inset:0 auto 0 0;width:258px;padding:25px 18px 16px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:5}.brand{display:flex;align-items:center;gap:12px;padding:1px 8px 34px;color:inherit;text-decoration:none}.brand-mark{width:40px;height:40px;border-radius:14px;background:linear-gradient(145deg,#795de2,#5837c5);color:#fff;display:grid;place-items:center;font:800 19px Manrope,sans-serif;box-shadow:0 6px 14px #6848d82b}.brand strong,.brand small,.side-bottom strong,.side-bottom small{display:block}.brand strong{font:800 16px Manrope,sans-serif;letter-spacing:-.4px}.brand small{margin-top:2px;color:#9aa2b1;font-size:8px;font-weight:700;letter-spacing:1.35px}.side-caption,.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.25px;color:#9aa2b1}.side-caption{padding:0 11px 11px}.side-nav{overflow:auto;scrollbar-width:none}.side-nav::-webkit-scrollbar,.sheet-nav::-webkit-scrollbar{display:none}.nav-group{margin:0 0 4px}.nav-group-title{display:flex;align-items:center;gap:10px;width:100%;padding:11px 11px;border:0;background:transparent;text-align:left;color:#526075;border-radius:13px;font-size:12.5px;font-weight:600;transition:background .2s,color .2s}.nav-group-title:hover{background:#f8f7fc}.nav-group-title svg,.nav-link svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.nav-group-title .group-chevron{width:14px;height:14px;margin-left:auto;color:#a9b0bd;transition:transform .22s}.nav-group.is-open .group-chevron{transform:rotate(90deg)}.nav-link{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:2px 0 2px 14px;width:calc(100% - 14px);border:0;border-radius:11px;background:transparent;color:#7a8597;text-align:left;font-size:12px;transition:all .18s}.nav-link:hover{background:#faf9ff;color:var(--purple)}.nav-link.is-active{background:var(--lav);color:var(--purple);font-weight:650}.nav-link svg{width:16px;height:16px}.nav-group.single .nav-group-title{color:#526075}.nav-group.single .nav-group-title.is-active{background:var(--lav);color:var(--purple)}.side-bottom{margin-top:auto;border-top:1px solid #f0f1f5;padding:16px 2px 2px;display:flex;align-items:center;gap:10px}.avatar{flex:none;width:36px;height:36px;border-radius:13px;background:#f0edff;color:#6848d8;display:grid;place-items:center;font-size:11px;font-weight:700}.side-bottom strong{font-size:12px;font-weight:650}.side-bottom small{font-size:10px;color:#929bad}.quiet-icon{border:0;background:transparent;color:#768195;width:38px;height:38px;border-radius:13px;display:grid;place-items:center;transition:background .18s,color .18s}.quiet-icon:hover{background:var(--lav);color:var(--purple)}.quiet-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.side-bottom .quiet-icon{margin-left:auto}.main-area{margin-left:258px;min-height:100vh}.topbar{height:76px;padding:0 clamp(26px,5vw,68px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(231,234,241,.8);background:rgba(247,248,252,.84);backdrop-filter:blur(14px)}.top-brand{display:none;align-items:center;gap:10px}.top-brand .brand-mark{width:33px;height:33px;border-radius:12px;font-size:16px}.top-brand-name{font:800 15px Manrope,sans-serif;letter-spacing:-.3px}.top-actions{display:flex;align-items:center;gap:10px}.notification-button{position:relative}.notification-button i{position:absolute;right:9px;top:8px;width:6px;height:6px;border-radius:50%;background:#8b72e5;box-shadow:0 0 0 2px var(--canvas)}.desktop-avatar{width:34px;height:34px;margin-left:5px}.page-wrap{width:min(100%,1050px);padding:35px clamp(26px,5vw,68px) 60px;margin:0 auto}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:27px}.page-heading .eyebrow{margin-bottom:8px;color:#8b72e5}.page-heading h1{margin:0;font:750 clamp(25px,3vw,32px)/1.2 Manrope,ui-sans-serif,sans-serif;letter-spacing:-1px}.page-heading p{margin:7px 0 0;color:var(--muted);font-size:13px}.date-chip{height:38px;padding:0 13px;display:flex;align-items:center;gap:8px;border:1px solid #e9eaf1;border-radius:13px;background:#fff;color:#637086;font-size:11px;font-weight:600;box-shadow:0 4px 12px rgba(26,35,55,.025)}.date-chip svg{width:15px;height:15px;stroke:#8b72e5;fill:none;stroke-width:1.7}.search-box{display:none;align-items:center;gap:10px;height:46px;padding:0 10px 0 15px;border:1px solid var(--line);border-radius:15px;background:#fff;margin:-8px 0 22px;box-shadow:var(--shadow)}.search-box.is-open{display:flex;animation:fadeUp .25s ease}.search-box>svg{width:17px;height:17px;color:#8b72e5;stroke:currentColor;fill:none;stroke-width:1.7}.search-box input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:13px}.view-host{min-height:300px}.welcome-card{position:relative;overflow:hidden;min-height:188px;padding:27px 30px;border-radius:24px;background:linear-gradient(120deg,#6544d3 0%,#7659dc 58%,#917be5 100%);color:#fff;box-shadow:0 14px 28px rgba(104,72,216,.17);display:flex;align-items:center}.welcome-card:after{content:"";position:absolute;width:245px;height:245px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:37px;top:-115px;box-shadow:0 0 0 24px rgba(255,255,255,.035),0 0 0 50px rgba(255,255,255,.025)}.welcome-copy{position:relative;z-index:1;max-width:420px}.welcome-copy .eyebrow{color:#ded7ff}.welcome-copy h2{margin:9px 0 6px;font:700 22px/1.25 Manrope,sans-serif;letter-spacing:-.45px}.welcome-copy p{max-width:365px;margin:0;color:#e6e0ff;font-size:12px;line-height:1.6}.welcome-orb{position:absolute;right:75px;top:50%;width:85px;height:85px;border-radius:30px;transform:translateY(-50%) rotate(14deg);background:linear-gradient(140deg,rgba(255,255,255,.21),rgba(255,255,255,.055));border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 1px rgba(255,255,255,.16)}.welcome-orb:before,.welcome-orb:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.35);border-radius:50%;inset:18px}.welcome-orb:after{inset:32px;background:rgba(255,255,255,.28)}.section-row{display:flex;align-items:center;justify-content:space-between;margin:25px 1px 13px}.section-row h2{margin:0;font:700 15px Manrope,sans-serif;letter-spacing:-.3px}.section-note{color:#97a0ae;font-size:10px}.overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.overview-card{min-height:103px;padding:16px;border:1px solid #eceef3;border-radius:17px;background:#fff;box-shadow:0 4px 14px rgba(26,35,55,.025);display:flex;align-items:flex-start;gap:12px;transition:transform .2s,box-shadow .2s;cursor:pointer}.overview-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.overview-icon,.module-icon{width:38px;height:38px;flex:none;border-radius:13px;display:grid;place-items:center;background:#f1eeff;color:#7358d9}.overview-icon svg,.module-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.overview-card:nth-child(2) .overview-icon{background:#eaf6f1;color:#218761}.overview-card:nth-child(3) .overview-icon{background:#fff3e9;color:#cc8045}.overview-card:nth-child(4) .overview-icon{background:#edf3ff;color:#5684ce}.overview-card:nth-child(5) .overview-icon{background:#fcedf1;color:#c16b83}.overview-card:nth-child(6) .overview-icon{background:#edf6f7;color:#488e94}.overview-card strong{display:block;padding-top:2px;font-size:11.5px;font-weight:650}.overview-card small{display:block;margin-top:4px;color:#98a1af;font-size:10px}.section-card{padding:19px;border:1px solid #eceef3;border-radius:18px;background:#fff;box-shadow:0 4px 14px rgba(26,35,55,.025)}.section-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.section-card-head h2{margin:0;font:700 14px Manrope,sans-serif}.soft-button{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:12px;background:var(--lav);color:var(--purple);padding:9px 12px;font-size:11px;font-weight:650;transition:transform .18s,background .18s}.soft-button:hover{background:#e8e2ff;transform:translateY(-1px)}.soft-button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}.empty-state{min-height:104px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:#98a1af}.empty-symbol{width:36px;height:36px;margin-bottom:8px;display:grid;place-items:center;border-radius:13px;background:#f7f6fb;color:#a99cda}.empty-symbol svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}.empty-state strong{color:#657187;font-size:11px;font-weight:600}.empty-state p{margin:3px 0 0;font-size:10px}.quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.quick-tile{border:1px solid #eceef3;border-radius:17px;background:#fff;padding:15px;display:flex;align-items:center;gap:11px;text-align:left;transition:all .18s}.quick-tile:hover{border-color:#dcd4fb;background:#fdfcff;transform:translateY(-1px)}.quick-tile span:nth-child(2){font-size:11px;font-weight:600}.quick-tile .arrow{width:15px;height:15px;margin-left:auto;color:#b2b8c3}.content-toolbar{display:flex;align-items:center;gap:9px;margin-bottom:15px}.filter-pill{height:36px;padding:0 12px;border:1px solid #e9eaf1;border-radius:12px;background:#fff;color:#6b778a;font-size:11px;display:flex;align-items:center;gap:7px}.filter-pill svg{width:15px;height:15px;stroke:#8b72e5;fill:none;stroke-width:1.7}.toolbar-spacer{flex:1}.primary-soft{height:38px;padding:0 13px;border:0;border-radius:12px;background:var(--purple);color:#fff;display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:650;box-shadow:0 6px 12px #6848d82b;transition:transform .18s,background .18s}.primary-soft:hover{background:var(--purple-dark);transform:translateY(-1px)}.primary-soft svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}.list-surface{border:1px solid #eceef3;border-radius:18px;background:#fff;overflow:hidden}.list-top{height:45px;padding:0 17px;border-bottom:1px solid #f0f1f5;display:flex;align-items:center;justify-content:space-between;color:#8892a2;font-size:10px}.list-top strong{color:#556176;font-size:11px;font-weight:650}.skeleton-row{height:61px;padding:0 17px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #f5f5f8}.skeleton-row:last-child{border-bottom:0}.skeleton-dot{width:32px;height:32px;border-radius:11px;background:#f5f3fc}.skeleton-lines{display:grid;gap:6px;flex:1}.skeleton-line{height:7px;border-radius:8px;background:#f0f1f5}.skeleton-line.short{width:34%}.skeleton-line.mid{width:55%}.skeleton-side{width:55px;height:8px;border-radius:8px;background:#f2f0fa}.module-intro{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px}.module-icon{width:46px;height:46px;border-radius:16px}.module-intro h2{margin:1px 0 4px;font:700 17px Manrope,sans-serif;letter-spacing:-.3px}.module-intro p{margin:0;color:var(--muted);font-size:12px}.module-intro .intro-spacer{flex:1}.module-tabs{display:flex;gap:7px;overflow:auto;scrollbar-width:none;margin:0 0 16px;padding:1px 0 3px}.module-tabs::-webkit-scrollbar{display:none}.module-tab{flex:none;border:1px solid #eceef3;border-radius:11px;background:#fff;color:#798497;padding:8px 11px;font-size:10.5px;transition:all .18s}.module-tab:hover,.module-tab.is-selected{border-color:#ded7fa;background:var(--lav);color:var(--purple)}.two-column{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(210px,.85fr);gap:14px}.metric-placeholders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-bottom:14px}.metric-placeholder{height:89px;padding:14px;border:1px solid #eceef3;border-radius:16px;background:#fff}.metric-placeholder span,.metric-placeholder i{display:block;border-radius:8px;background:#f1f1f5}.metric-placeholder span{width:54px;height:7px}.metric-placeholder i{width:83px;height:15px;margin-top:14px;background:#f0edfa}.skeleton-loading{display:grid;gap:10px;padding:8px 0}.skeleton-loading .skeleton-line{animation:shimmer 1.3s ease-in-out infinite alternate;background:linear-gradient(90deg,#f0f1f5 20%,#f7f6fa 50%,#f0f1f5 80%);background-size:200% 100%}.empty-block{padding:27px 15px;border:1px dashed #e4e6ee;border-radius:17px;background:rgba(255,255,255,.55);text-align:center}.empty-block .empty-symbol{margin:0 auto 9px}.empty-block strong{font-size:11px;color:#647085}.empty-block p{margin:4px auto 0;max-width:270px;font-size:10px;color:#9aa2af}.menu-sheet,.sheet-backdrop,.mobile-dock{display:none}.toast{position:fixed;left:50%;bottom:calc(var(--dock-h) + 20px);z-index:30;transform:translate(-50%,12px);opacity:0;pointer-events:none;border-radius:13px;padding:10px 15px;background:#202938;color:#fff;font-size:11px;box-shadow:0 8px 24px #18223025;transition:all .22s}.toast.is-visible{opacity:1;transform:translate(-50%,0)}@keyframes shimmer{to{background-position:-200% 0}}@keyframes fadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1250px){.page-wrap{padding-top:42px}.welcome-card{min-height:205px}.overview-grid{gap:15px}.overview-card{min-height:110px;padding:18px}}@media(max-width:900px){.side-panel{width:226px;padding-inline:14px}.main-area{margin-left:226px}.page-wrap{padding-inline:28px}.topbar{padding-inline:28px}.overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.welcome-orb{right:42px;width:72px;height:72px}}@media(max-width:640px){html,body{width:100%;min-height:100%;overflow-x:clip}.side-panel{display:none}.main-area{margin:0;min-height:100dvh}.topbar{height:60px;padding:0 18px;background:rgba(247,248,252,.92);border-bottom-color:transparent}.top-brand{display:flex}.top-actions{gap:3px}.top-actions .quiet-icon{width:36px;height:36px}.desktop-avatar{display:none}.page-wrap{width:100%;padding:17px 17px calc(var(--dock-h) + env(safe-area-inset-bottom) + 24px);margin:0}.page-heading{align-items:center;margin-bottom:19px;gap:8px}.page-heading .eyebrow{font-size:8px;letter-spacing:1.05px;margin-bottom:5px}.page-heading h1{font-size:25px;letter-spacing:-.8px}.page-heading p{max-width:245px;font-size:11px;margin-top:4px}.date-chip{height:34px;padding:0 10px;border-radius:12px;font-size:10px}.date-chip svg{width:14px;height:14px}.view-host{min-height:260px}.welcome-card{min-height:157px;padding:21px 20px;border-radius:21px}.welcome-card:after{right:-55px;top:-119px;width:220px;height:220px}.welcome-copy{max-width:250px}.welcome-copy h2{font-size:19px;margin:7px 0 5px}.welcome-copy p{max-width:230px;font-size:10.5px}.welcome-orb{width:48px;height:48px;right:17px;border-radius:18px;opacity:.7}.welcome-orb:before{inset:10px}.welcome-orb:after{inset:18px}.section-row{margin:21px 1px 11px}.section-row h2{font-size:13px}.section-note{font-size:9px}.overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.overview-card{min-height:83px;padding:12px 10px;gap:9px;border-radius:15px}.overview-icon{width:33px;height:33px;border-radius:11px}.overview-icon svg{width:17px;height:17px}.overview-card strong{font-size:10px;line-height:1.35}.overview-card small{font-size:9px;margin-top:3px}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.quick-tile{padding:11px 9px;gap:8px;border-radius:14px}.quick-tile .module-icon{width:31px;height:31px;border-radius:10px}.quick-tile .module-icon svg{width:16px;height:16px}.quick-tile span:nth-child(2){font-size:9.5px;line-height:1.35}.quick-tile .arrow{width:13px;height:13px}.section-card{padding:15px 13px;border-radius:16px}.section-card-head{margin-bottom:11px}.section-card-head h2{font-size:12px}.soft-button{padding:8px 9px;font-size:9.5px;border-radius:10px}.empty-state{min-height:86px}.content-toolbar{gap:6px;margin-bottom:11px;flex-wrap:wrap}.filter-pill{height:33px;padding:0 9px;border-radius:10px;font-size:9.5px}.primary-soft{height:34px;padding:0 10px;border-radius:10px;font-size:9.5px}.list-surface{border-radius:15px}.list-top{height:39px;padding:0 12px;font-size:9px}.list-top strong{font-size:10px}.skeleton-row{height:53px;padding:0 12px;gap:9px}.skeleton-dot{width:28px;height:28px;border-radius:10px}.skeleton-side{width:39px}.module-intro{gap:11px;margin-bottom:17px}.module-icon{width:39px;height:39px;border-radius:13px}.module-icon svg{width:18px;height:18px}.module-intro h2{font-size:15px}.module-intro p{font-size:10.5px;line-height:1.45}.module-tabs{margin-bottom:12px;gap:6px}.module-tab{padding:7px 9px;font-size:9.5px;border-radius:10px}.two-column{grid-template-columns:1fr;gap:10px}.metric-placeholders{gap:8px;margin-bottom:10px}.metric-placeholder{height:75px;padding:11px;border-radius:14px}.metric-placeholder i{margin-top:11px}.empty-block{padding:22px 12px}.mobile-dock{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;z-index:10;left:0;right:0;bottom:0;height:calc(var(--dock-h) + env(safe-area-inset-bottom));padding:7px 7px calc(7px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);border-top:1px solid rgba(231,234,241,.85);backdrop-filter:blur(18px);box-shadow:0 -7px 24px rgba(30,36,54,.035)}.dock-item{height:55px;min-width:0;border:0;background:transparent;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#939baa;font-size:9px;font-weight:500;transition:color .18s,background .18s,transform .18s}.dock-icon{width:34px;height:27px;border-radius:12px;display:grid;place-items:center;transition:all .18s}.dock-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.dock-item.is-active{color:var(--purple);font-weight:650}.dock-item.is-active .dock-icon{background:var(--lav);transform:translateY(-1px)}.sheet-backdrop{display:block;position:fixed;inset:0;z-index:19;background:rgba(24,34,48,.26);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;backdrop-filter:blur(2px)}.sheet-backdrop.is-open{opacity:1;visibility:visible}.menu-sheet{display:block;position:fixed;z-index:20;left:0;right:0;bottom:0;max-height:min(82dvh,720px);padding:9px 17px calc(20px + env(safe-area-inset-bottom));border-radius:25px 25px 0 0;background:#fff;transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.75,.25,1);box-shadow:0 -14px 45px rgba(25,30,50,.12);overflow:auto;scrollbar-width:none}.menu-sheet.is-open{transform:translateY(0)}.sheet-grabber{width:34px;height:4px;border-radius:4px;background:#e6e7ec;margin:1px auto 16px}.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.sheet-head .eyebrow{font-size:8px}.sheet-head h2{margin:3px 0 0;font:700 17px Manrope,sans-serif;letter-spacing:-.4px}.sheet-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sheet-group{min-width:0;border:1px solid #eff0f4;border-radius:15px;overflow:hidden}.sheet-group-title{width:100%;min-height:43px;padding:8px 10px;border:0;background:#fff;display:flex;align-items:center;gap:8px;text-align:left;color:#48556a;font-size:10px;font-weight:650}.sheet-group-title svg{width:17px;height:17px;flex:none;stroke:#8068d8;fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.sheet-group-items{padding:0 7px 7px;display:grid;gap:2px}.sheet-link{width:100%;padding:7px 8px;border:0;border-radius:9px;background:transparent;text-align:left;color:#7b8596;font-size:9.5px;line-height:1.3}.sheet-link:hover,.sheet-link.is-active{background:#f4f1ff;color:var(--purple)}.sheet-group.single .sheet-group-items{display:none}.sheet-group.single .sheet-group-title{padding-bottom:10px}.toast{bottom:calc(var(--dock-h) + env(safe-area-inset-bottom) + 15px)}.search-box{margin:-5px 0 18px;height:43px;border-radius:14px}}
@media(max-width:365px){.page-wrap{padding-inline:13px}.topbar{padding-inline:14px}.overview-card{padding:10px 8px;gap:7px}.overview-icon{width:30px;height:30px}.welcome-copy{max-width:225px}.welcome-orb{right:9px;width:40px;height:40px}.sheet-nav{gap:6px}.sheet-group-title{padding-inline:8px;font-size:9px}.sheet-link{font-size:9px;padding-inline:6px}.dock-item{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.view-enter{animation:fadeUp .28s ease both}


/* ============================================================================
   COMPONENTES FUNCIONALES ADICIONALES (INTEGRACIÓN ERP CON ESTILO DEMO)
   ============================================================================ */

/* Pantalla de Inicio de Sesión */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--canvas);
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow);
  text-align: left;
}
.login-brand {
  text-align: center;
  margin-bottom: 24px;
}
.login-error {
  background: #fdf2f2;
  color: #d95863;
  border: 1px solid #fed7d7;
  padding: 9px 12px;
  border-radius: 11px;
  font-size: 11.5px;
  margin-bottom: 14px;
}

/* Campos de Formulario */
.field-group {
  margin-bottom: 14px;
  text-align: left;
}
.field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #526075;
  margin-bottom: 5px;
}
.erp-input, .erp-select, .erp-textarea {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  transition: border-color .18s, box-shadow .18s;
  outline: none;
}
.erp-textarea {
  height: auto;
  min-height: 80px;
  padding: 10px 12px;
  resize: vertical;
}
.erp-input:focus, .erp-select:focus, .erp-textarea:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(104,72,216,0.12);
}

/* Tablas Minimalistas */
.erp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}
.erp-table th {
  padding: 11px 14px;
  color: #8892a2;
  font-weight: 600;
  font-size: 10.5px;
  border-bottom: 1px solid #f0f1f5;
  background: #fafafc;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.erp-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #f5f5f8;
  color: var(--ink);
}
.erp-table tr:last-child td {
  border-bottom: none;
}
.erp-table tr:hover td {
  background: #faf9ff;
}

/* Punto de Venta (POS) Integrado */
.pos-container {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr);
  gap: 16px;
}
.pos-search-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  margin-bottom: 14px;
}
.pos-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafafc;
  height: 40px;
}
.pos-search-input-wrap input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-size: 12.5px;
}
.pos-search-shortcuts {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: 10px;
}
.pos-search-shortcuts::-webkit-scrollbar { display: none; }
.pos-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.pos-prod-card {
  border: 1px solid #eceef3;
  border-radius: 15px;
  background: #ffffff;
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s, border-color .18s, box-shadow .18s;
  display: flex;
  flex-direction: column;
}
.pos-prod-card:hover {
  transform: translateY(-2px);
  border-color: #dcd4fb;
  box-shadow: var(--shadow);
}
.pos-prod-img-box {
  height: 110px;
  background: #f8f7fc;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.pos-prod-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pos-prod-info {
  padding: 10px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pos-prod-title {
  font-size: 12px;
  font-weight: 650;
  color: var(--ink);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pos-prod-meta {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 8px;
}
.pos-prod-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
.pos-prod-price {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--purple);
}
.pos-prod-stock {
  font-size: 10px;
  color: var(--muted);
}
.pos-cart-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.pos-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 13.5px;
}
.pos-cart-items-scroll {
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  margin: 10px 0;
}
.pos-cart-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f1f5;
  font-size: 11.5px;
}
.pos-cart-item-row:last-child { border-bottom: none; }
.pos-qty-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  background: #ffffff;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-weight: 700;
}
.pos-total-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12px;
}
.pos-total-line.pos-grand-total {
  font-size: 16px;
  font-weight: 800;
  color: var(--purple);
  border-top: 1px solid #f0f1f5;
  padding-top: 10px;
  margin-top: 6px;
}

/* Hoja A4 en Vivo para Presupuestos */
.a4-sheet {
  background: #ffffff;
  width: 100%;
  max-width: 580px;
  min-height: 720px;
  padding: 34px 38px;
  border: 1px solid #eceef3;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(26,35,55,.04);
  margin: 0 auto;
  font-size: 11.5px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}
.a4-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #f0f1f5;
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.a4-brand strong {
  display: block;
  font: 800 15px Manrope, sans-serif;
  color: var(--ink);
}
.a4-brand small {
  color: var(--muted);
  font-size: 10px;
}
.a4-doc-title {
  margin: 12px 0;
  font: 700 17px Manrope, sans-serif;
  color: var(--ink);
}

/* Layout Editor de Presupuestos y Planes a Cuotas */
.quotation-editor-grid {
  display: grid;
  grid-template-columns: 430px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.editor-step-card {
  background: #ffffff;
  border: 1px solid #eceef3;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(26,35,55,.025);
}
.editor-step-card h3 {
  margin: 0 0 10px;
  font: 700 13px Manrope, sans-serif;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.credit-plans-card {
  background: #ffffff;
  border: 1px solid #eceef3;
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(26,35,55,.025);
}
.credit-plans-card h3 {
  margin: 0 0 4px;
  font: 700 15px Manrope, sans-serif;
  color: var(--ink);
}
.credit-plans-card p.card-sub {
  margin: 0 0 14px;
  font-size: 11.5px;
  color: var(--muted);
}
@media (max-width: 950px) {
  .quotation-editor-grid {
    grid-template-columns: 1fr;
  }
}

/* Diálogos Modales */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(24,34,48,.38);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.modal-window {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(26,35,55,.14);
}
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f1f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-header h2 {
  margin: 0;
  font: 700 16px Manrope, sans-serif;
}
.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid #f0f1f5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  background: #fafafc;
}

/* Modales y POS en Pantallas Móviles */
@media (max-width: 640px) {
  .pos-container {
    grid-template-columns: 1fr;
  }
  .pos-products-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .pos-prod-card {
    flex-direction: row;
    align-items: center;
    padding: 8px 10px;
    gap: 10px;
  }
  .pos-prod-img-box {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 10px;
  }
  .pos-prod-info {
    padding: 0;
  }
  .pos-prod-meta {
    margin-bottom: 2px;
  }
  .modal-overlay {
    padding: 0;
    align-items: stretch;
  }
  .modal-window {
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
  }
}

/* Acordeón de navegación en barra lateral: contraído por defecto, se expande al hacer clic */
.nav-group:not(.single) .nav-link {
  display: none !important;
}
.nav-group.is-open .nav-link {
  display: flex !important;
}

/* ============================================================================
   CORRECCIONES ESTÉTICAS Y DE COMPORTAMIENTO SVG / SIDEBAR / POS / CRÉDITOS
   ============================================================================ */
svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.65 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  box-sizing: border-box !important;
}
svg:not([width]):not([height]) {
  width: 18px;
  height: 18px;
}

/* Sidebar nav-group y nav-link: prevención estricta de estiramiento vertical */
.side-nav {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
}
.nav-group {
  margin: 0 0 4px !important;
  flex: none !important;
  display: block !important;
}
.nav-group-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 13px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  flex: none !important;
  box-sizing: border-box !important;
}
.nav-group-title svg {
  width: 18px !important;
  height: 18px !important;
  flex: none !important;
}
.nav-group.single .nav-group-title.is-active {
  background: var(--lav) !important;
  color: var(--purple) !important;
}
.nav-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: calc(100% - 14px) !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 12px !important;
  margin: 2px 0 2px 14px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
  flex: none !important;
  box-sizing: border-box !important;
}
.nav-link svg {
  width: 16px !important;
  height: 16px !important;
  flex: none !important;
}

/* Barra de búsqueda y accesos rápidos POS */
.pos-search-input-wrap svg {
  width: 18px !important;
  height: 18px !important;
  stroke: var(--muted) !important;
  fill: none !important;
  flex: none !important;
}
.pos-search-shortcuts {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding: 4px 0 8px !important;
  scrollbar-width: none !important;
}
.pos-search-shortcuts::-webkit-scrollbar { display: none; }
.pos-search-shortcuts .outline-btn,
.pos-search-shortcuts button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  background: #ffffff !important;
  color: #526075 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  flex: none !important;
  transition: all .18s !important;
}
.pos-search-shortcuts .outline-btn:hover,
.pos-search-shortcuts button:hover {
  background: var(--lav) !important;
  color: var(--purple) !important;
  border-color: #dcd4fb !important;
}
.pos-search-shortcuts .outline-btn svg,
.pos-search-shortcuts button svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  fill: none !important;
  flex: none !important;
}

/* Panel de cobro y carrito POS */
.pos-cart-panel {
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 4px 16px rgba(24,34,48,0.03) !important;
}
.pos-cart-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f0f1f5 !important;
  margin-bottom: 12px !important;
}
.pos-cart-header-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 750 !important;
  font-size: 14px !important;
  color: var(--ink) !important;
}
.pos-cart-header-title svg {
  width: 18px !important;
  height: 18px !important;
  color: var(--purple) !important;
  stroke: currentColor !important;
  fill: none !important;
  flex: none !important;
}
.pos-cart-customer-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #f8fafc !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  margin-bottom: 12px !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
.pos-cart-customer-strip:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}
.pos-cart-items-scroll {
  flex: 1 1 auto !important;
  min-height: 160px !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  margin: 6px 0 12px !important;
}
.pos-prod-card {
  cursor: pointer !important;
  user-select: none !important;
  transition: transform .18s, box-shadow .18s, border-color .18s !important;
}
.pos-prod-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(104, 72, 216, 0.08) !important;
  border-color: #dcd4fb !important;
}
.pos-prod-card:active {
  transform: translateY(0) !important;
}

/* Estado de carrito vacío */
.pos-cart-empty,
.empty-cart-state {
  padding: 28px 16px !important;
  text-align: center !important;
  color: var(--muted) !important;
}
.pos-cart-empty svg,
.empty-cart-state svg {
  width: 36px !important;
  height: 36px !important;
  margin: 0 auto 10px !important;
  display: block !important;
  stroke: #b5bdd0 !important;
  fill: none !important;
}

/* Tarjetas y Contenedores de Planes de Crédito a Cuotas */
.credit-plans-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(24,34,48,0.03);
}
.credit-plans-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--ink);
}
.credit-plans-card .card-sub {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 14px;
}

/* ============================================================================
   ESTILOS COMPLETOS PARA TABLAS, DATAGRIDS Y PANELES (Facturas, Clientes, etc.)
   ============================================================================ */
.view-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  box-shadow: 0 2px 4px rgba(27,35,64,0.02) !important;
}
.toolbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.btn-subtle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  background: #fafafc !important;
  color: var(--ink) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all .18s !important;
}
.btn-subtle:hover {
  background: var(--lav) !important;
  color: var(--purple) !important;
  border-color: #dcd4fb !important;
}
.btn-xs, .btn-subtle-xs {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  background: #fafafc !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
.btn-xs:hover, .btn-subtle-xs:hover {
  background: var(--lav) !important;
  color: var(--purple) !important;
  border-color: #dcd4fb !important;
}
.text-link {
  background: transparent !important;
  border: 0 !important;
  color: var(--muted) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  transition: all .15s !important;
}
.text-link:hover {
  background: var(--lav) !important;
  color: var(--purple) !important;
}
.quiet-icon {
  border: 0 !important;
  background: transparent !important;
  color: #768195 !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background .18s, color .18s !important;
  padding: 0 !important;
  flex: none !important;
}
.quiet-icon:hover {
  background: var(--lav) !important;
  color: var(--purple) !important;
}
.quiet-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  fill: none !important;
  flex: none !important;
}

.datagrid-card, .panel {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(24,34,48,0.03) !important;
  margin-bottom: 20px !important;
}
.datagrid-scroll, .table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
}
.erp-datagrid, table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 12px !important;
  text-align: left !important;
}
.erp-datagrid thead tr, table thead tr {
  background: #fafafc !important;
  border-bottom: 1px solid var(--line) !important;
}
.erp-datagrid th, table th {
  padding: 12px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
}
.erp-datagrid td, table td {
  padding: 12px 14px !important;
  border-bottom: 1px solid #f1f3f7 !important;
  color: var(--ink) !important;
  vertical-align: middle !important;
}
.erp-datagrid tr:last-child td, table tr:last-child td {
  border-bottom: none !important;
}
.erp-datagrid tr:hover td, table tr:hover td {
  background: #fbfbfe !important;
}

.badge {
  display: inline-block !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}

/* Fila de acciones en tablas (Usuarios, Facturas, etc.) */
.table-actions-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}
.btn-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  background: #ffffff !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition: all .15s !important;
}
.btn-action:hover {
  background: var(--lav) !important;
  color: var(--purple) !important;
  border-color: #dcd4fb !important;
}
.btn-action svg {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  fill: none !important;
  flex: none !important;
}
.btn-action-warning {
  color: #d97706 !important;
  background: #fffbeb !important;
  border-color: #fde68a !important;
}
.btn-action-warning:hover {
  background: #fef3c7 !important;
  color: #b45309 !important;
}
.btn-action-success {
  color: #059669 !important;
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}
.btn-action-danger {
  color: #dc2626 !important;
  background: #fef2f2 !important;
  border-color: #fecaca !important;
}

/* Hoja A4 para Presupuesto y Ticket de Impresión */
.a4-sheet-preview {
  width: 100% !important;
  max-width: 794px !important;
  min-height: 1050px !important;
  background: #ffffff !important;
  padding: 44px 48px !important;
  margin: 0 auto !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.06) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #0f172a !important;
  display: flex !important;
  flex-direction: column !important;
}

@media print {
  body * {
    visibility: hidden !important;
  }
  .a4-sheet-preview, .a4-sheet-preview * {
    visibility: visible !important;
  }
  .a4-sheet-preview {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 20mm !important;
    border: none !important;
    box-shadow: none !important;
  }
  @page {
    size: A4;
    margin: 0;
  }
}

.hidden { display: none !important; }


/* ============================================================================
   DEFINITIVE POLISHED UI FIXES: POS, SVG, DATAGRIDS, BUTTONS, QUOTES, CREDIT
   ============================================================================ */

/* 1. SVG & Icons: Strict sizing and no black blob fills */
svg {
  width: 18px;
  height: 18px;
  max-width: 100%;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.65 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vertical-align: middle;
  box-sizing: border-box;
}

svg:not(.allow-fill) path,
svg:not(.allow-fill) circle,
svg:not(.allow-fill) rect,
svg:not(.allow-fill) line,
svg:not(.allow-fill) polygon,
svg:not(.allow-fill) polyline {
  fill: none !important;
  stroke: currentColor !important;
}

.symbol-library {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  display: none !important;
}

/* 2. Topbar Search Box: Hidden by default, clean when opened */
.search-box {
  display: none !important;
}
.search-box.is-open {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: -5px 0 18px !important;
  height: 44px !important;
  padding: 0 14px !important;
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(26,35,55,0.04) !important;
}
.search-box svg {
  width: 18px !important;
  height: 18px !important;
  stroke: var(--muted) !important;
  fill: none !important;
  flex: none !important;
}
.search-box input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 13px !important;
  color: var(--ink) !important;
}

/* 3. Action Buttons & Rows in Tables (Users, Invoices, etc.) */
.table-actions-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}
.btn-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  background: #ffffff !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition: all .15s !important;
}
.btn-action:hover {
  background: var(--lav) !important;
  color: var(--purple) !important;
  border-color: #dcd4fb !important;
}
.btn-action svg {
  width: 13px !important;
  height: 13px !important;
  stroke: currentColor !important;
  fill: none !important;
  flex: none !important;
}
.btn-action-warning {
  color: #d97706 !important;
  background: #fffbeb !important;
  border-color: #fde68a !important;
}
.btn-action-warning:hover {
  background: #fef3c7 !important;
  color: #b45309 !important;
}
.btn-action-success {
  color: #059669 !important;
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}
.btn-action-danger {
  color: #dc2626 !important;
  background: #fef2f2 !important;
  border-color: #fecaca !important;
}

/* 4. Modern Datagrids and Toolbars */
.view-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
}
.datagrid-card {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(24,34,48,0.03) !important;
  margin-bottom: 20px !important;
}
.datagrid-scroll {
  width: 100% !important;
  overflow-x: auto !important;
}
.erp-datagrid, table.erp-table, table.erp-datagrid {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 12.5px !important;
  text-align: left !important;
}
.erp-datagrid thead tr, table.erp-table thead tr {
  background: #fafafc !important;
  border-bottom: 1px solid var(--line) !important;
}
.erp-datagrid th, table.erp-table th {
  padding: 12px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
}
.erp-datagrid td, table.erp-table td {
  padding: 12px 14px !important;
  border-bottom: 1px solid #f1f3f7 !important;
  color: var(--ink) !important;
  vertical-align: middle !important;
}
.erp-datagrid tr:last-child td, table.erp-table tr:last-child td {
  border-bottom: none !important;
}
.erp-datagrid tr:hover td, table.erp-table tr:hover td {
  background: #fbfbfe !important;
}

.btn-subtle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  background: #ffffff !important;
  color: #526075 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
.btn-subtle:hover {
  background: var(--lav) !important;
  color: var(--purple) !important;
  border-color: #dcd4fb !important;
}
.btn-xs {
  padding: 3px 8px !important;
  font-size: 11px !important;
  height: 26px !important;
}

.badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}
.badge-success { background: #e6f7ef !important; color: #0d8253 !important; }
.badge-warning { background: #fef3c7 !important; color: #b45309 !important; }
.badge-primary { background: #f0edff !important; color: #6848d8 !important; }
.badge-danger { background: #fee2e2 !important; color: #dc2626 !important; }

/* 5. POS Layout & Product Cards */
.pos-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: 20px !important;
  align-items: start !important;
}
.pos-search-card {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  margin-bottom: 16px !important;
}
.pos-search-input-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #f7f8fc !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 0 14px !important;
  height: 42px !important;
  margin-bottom: 10px !important;
}
.pos-search-input-wrap svg {
  width: 18px !important;
  height: 18px !important;
  stroke: var(--muted) !important;
  fill: none !important;
  flex: none !important;
}
.pos-search-input-wrap input {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  width: 100% !important;
  font-size: 12.5px !important;
  color: var(--ink) !important;
}
.pos-search-shortcuts {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.pos-search-shortcuts::-webkit-scrollbar { display: none; }
.pos-search-shortcuts button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  background: #ffffff !important;
  color: #526075 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex: none !important;
}
.pos-search-shortcuts button:hover {
  background: var(--lav) !important;
  color: var(--purple) !important;
  border-color: #dcd4fb !important;
}
.pos-search-shortcuts button svg {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  fill: none !important;
}
.pos-products-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 14px !important;
}
.pos-prod-card {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  cursor: pointer !important;
  transition: transform .18s, box-shadow .18s, border-color .18s !important;
  position: relative !important;
}
.pos-prod-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(26,35,55,0.08) !important;
  border-color: #d5c8fa !important;
}
.pos-prod-card.in-cart {
  border-color: var(--purple) !important;
  box-shadow: 0 0 0 1px var(--purple) !important;
}
.pos-prod-img-box {
  height: 130px !important;
  background: #f8fafc !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}
.pos-prod-img-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.pos-prod-fallback-icon {
  width: 32px !important;
  height: 32px !important;
  stroke: #cbd5e1 !important;
}
.pos-prod-info {
  padding: 10px 12px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
}
.pos-prod-title {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}
.pos-prod-meta {
  font-size: 10.5px !important;
  color: var(--muted) !important;
}
.pos-prod-price-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: auto !important;
  padding-top: 6px !important;
}
.pos-prod-price {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--purple) !important;
}
.pos-prod-stock {
  font-size: 10px !important;
  color: var(--muted) !important;
  background: #f1f3f7 !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
}
.pos-cart-panel {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 4px 20px rgba(24,34,48,0.04) !important;
  position: sticky !important;
  top: 96px !important;
}
.pos-cart-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--line) !important;
  margin-bottom: 12px !important;
}
.pos-cart-header-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  color: var(--ink) !important;
}
.pos-cart-header-title svg {
  width: 18px !important;
  height: 18px !important;
  stroke: var(--purple) !important;
  fill: none !important;
}
.pos-cart-customer-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #fafafc !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  margin-bottom: 12px !important;
  cursor: pointer !important;
}
.pos-cart-items-scroll {
  min-height: 160px !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  margin-bottom: 14px !important;
}
.pos-cart-empty {
  text-align: center !important;
  padding: 30px 10px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
}
.pos-cart-empty svg {
  width: 32px !important;
  height: 32px !important;
  stroke: #c2c9d6 !important;
  fill: none !important;
  margin-bottom: 8px !important;
}
.pos-cart-item-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #f3f4f8 !important;
}
.pos-cart-item-meta {
  flex: 1 !important;
  min-width: 0 !important;
}
.pos-cart-item-name {
  font-size: 12px !important;
  font-weight: 650 !important;
  color: var(--ink) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.pos-cart-item-subtotal {
  font-size: 11.5px !important;
  font-weight: 750 !important;
  color: var(--purple) !important;
}
.pos-cart-item-controls {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.pos-qty-btn {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  border: 1px solid var(--line) !important;
  background: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 12px !important;
  cursor: pointer !important;
}
.pos-qty-num {
  font-size: 12px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  text-align: center !important;
}
.pos-del-btn {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  border: none !important;
  background: #fee2e2 !important;
  color: #dc2626 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 12px !important;
  cursor: pointer !important;
}
.pos-cart-totals {
  border-top: 1px solid var(--line) !important;
  padding-top: 12px !important;
  margin-bottom: 14px !important;
}
.pos-total-line {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  margin-bottom: 4px !important;
}
.pos-grand-total {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  padding-top: 6px !important;
  border-top: 1px dashed var(--line) !important;
}
.pos-grand-total strong {
  color: var(--purple) !important;
  font-size: 17px !important;
}
.pos-cart-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.pos-btn-checkout {
  height: 44px !important;
  font-size: 13.5px !important;
  font-weight: 750 !important;
  justify-content: center !important;
  background: var(--purple) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: background .18s !important;
}
.pos-btn-checkout:hover {
  background: var(--purple-dark) !important;
}
.pos-btn-quote {
  height: 36px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  justify-content: center !important;
  background: #ffffff !important;
  color: var(--purple) !important;
  border: 1px solid #dcd4fb !important;
  border-radius: 10px !important;
  cursor: pointer !important;
}
.pos-btn-quote:hover {
  background: var(--lav) !important;
}

@media (max-width: 900px) {
  .pos-container {
    grid-template-columns: 1fr !important;
  }
  .pos-cart-panel {
    position: static !important;
  }
}

/* Shared portal components: the operational templates use these same classes. */
:root { --red: #c24155; --blue: #3768b2; }
.top-actions { margin-left: auto; }
.brand-mark { flex: none; }
.brand > span:last-child { min-width: 0; }
.brand strong { overflow-wrap: anywhere; }
.page-wrap { width: 100%; max-width: 1500px; padding-inline: clamp(20px, 3vw, 44px); }
.view-host, .view-toolbar > div, .company-info, .pos-catalog-panel { min-width: 0; }
.symbol-library { width: 0 !important; height: 0 !important; }
.quick-tile .arrow { display: inline-flex; flex: 0 0 16px; }
.quick-tile .arrow svg { width: 16px; height: 16px; display: block; }
.overview-card { align-items: center; text-align: left; }
.primary-btn, .outline-btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 38px; padding: 9px 14px; border: 1px solid transparent;
  border-radius: 11px; font: 600 12px/1.4 'DM Sans', system-ui, sans-serif;
  text-decoration: none; transition: background .18s, border-color .18s, box-shadow .18s;
}
.primary-btn { background: var(--purple); color: #fff; box-shadow: 0 4px 10px #6848d81c; }
.primary-btn:hover { background: var(--purple-dark); }
.outline-btn { background: #fff; color: #526075; border-color: var(--line); }
.outline-btn:hover { background: var(--lav); border-color: #dcd4fb; color: var(--purple); }
.primary-btn svg, .outline-btn svg { width: 16px; height: 16px; flex: none; }
button:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #a994f1; outline-offset: 3px;
}
.view-toolbar { flex-wrap: wrap; gap: 14px; }
.toolbar-actions { flex-wrap: wrap; }
.btn-subtle { justify-content: center; text-decoration: none; white-space: nowrap; }
.erp-datagrid { min-width: 760px; }
.erp-datagrid td { line-height: 1.5; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.muted { color: var(--muted); }
.color-primary { color: var(--purple); }
.color-danger { color: var(--red); }
.font-bold { font-weight: 700; }
.company {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
}
.company-logo { width: 48px; height: 48px; flex: none; border-radius: 14px; }
.company-info { flex: 1 1 300px; }
.company-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.company-heading strong { font-size: 15px; }
.company-info p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.company-actions { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; }
.tag { display: inline-flex; padding: 4px 8px; border-radius: 7px; background: var(--lav); color: var(--purple); font-size: 10px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat { min-width: 0; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.stat-top { color: #657187; font-size: 10px; font-weight: 600; letter-spacing: .3px; }
.stat-value { margin: 12px 0 8px; font: 700 24px/1.2 'Manrope', system-ui, sans-serif; overflow-wrap: anywhere; }
.stat-foot { color: var(--muted); font-size: 11px; }
.pos-prod-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-prod-price-row { gap: 6px; flex-wrap: wrap; }
.pos-prod-stock, .pos-prod-price { white-space: nowrap; }
.pos-cart-item-thumb { width: 42px; height: 42px; flex: none; border-radius: 9px; overflow: hidden; background: var(--canvas); display: grid; place-items: center; }
.pos-cart-item-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pos-cart-item-unit { color: var(--muted); font-size: 10px; }
.pos-cart-badge, .pos-out-of-stock { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 8px; font-size: 10px; background: var(--purple); color: #fff; }
.pos-out-of-stock { left: 10px; right: auto; background: #fff; color: #9c3e45; }
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pos-container { grid-template-columns: minmax(0, 1fr) 310px !important; gap: 14px !important; }
}
@media (max-width: 900px) {
  .pos-container { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .page-wrap { padding-inline: 17px; }
  .company { padding: 16px; }
  .company-actions > button { width: 100%; }
  .view-toolbar { align-items: flex-start !important; padding: 16px !important; }
  .stat { padding: 14px; }
  .stat-value { font-size: 20px; }
  .panel-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Forms and detail views share the same surfaces and controls as the lists. */
:root { --accent: var(--purple); --border: var(--line); --primary: var(--purple); --primary-light: var(--lav); --surface-subtle: var(--canvas); --text-muted: var(--muted); --success: var(--green); --success-bg: #eaf6f1; --danger: var(--red); --danger-bg: #fff1f2; }
#brandMark:not(.has-initial) { background: #fff; border: 1px solid var(--line); box-shadow: none; }
.menu-sheet:not(.is-open) { visibility: hidden; pointer-events: none; }
#sidebarLogoImg { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.modal-window.modal-lg { max-width: 960px; }
#modalPhotoPreview img, #supplyPhotoPreview img, .product-photo-preview img { object-fit: contain !important; }
.erp-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; margin-bottom: 18px; min-width: 0; }
.section-header-title { margin: 0 0 20px; font-size: 15px; font-weight: 650; }
.form-grid-2, .form-grid-3, .config-top-grid, .product-dialog-grid { display: grid; gap: 16px; align-items: start; }
.form-grid-2, .config-top-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid-2 > *, .form-grid-3 > *, .product-dialog-grid > *, .quotation-editor-grid > * { min-width: 0; }
.product-dialog-grid { grid-template-columns: 240px minmax(0, 1fr); }
.product-photo-panel { position: sticky; top: 0; }
.product-photo-preview img { width: 100%; height: 100%; object-fit: contain; }
.modal-title { margin: 0; line-height: 1.35; }
.modal-sub { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.modal-header { gap: 12px; }
.modal-header > div { min-width: 0; }
.modal-footer { flex-wrap: wrap; flex-shrink: 0; }
.modal-window .erp-input, .modal-window .erp-select, .modal-window .erp-textarea { min-width: 0; }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--purple); color: #fff; border: 1px solid transparent; border-radius: 11px; min-height: 38px; padding: 8px 14px; font: inherit; font-size: 12px; font-weight: 600; }
.btn-primary:hover { background: var(--purple-dark); }
.icon-btn, .btn-modal-close { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--muted); }
.icon-btn:hover, .btn-modal-close:hover { background: var(--lav); color: var(--purple); }
.icon-btn svg, .btn-modal-close svg { width: 17px; height: 17px; }
.action-btn { min-height: 32px; border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; background: #fff; color: var(--purple); }
.erp-checkbox-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12px; }
input[type=checkbox] { accent-color: var(--purple); }
select.erp-select { appearance: none; padding-right: 34px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23758196' stroke-width='1.5'/%3E%3C/svg%3E") right 10px center / 16px no-repeat; }
input[type=file] { max-width: 100%; font: inherit; font-size: 12px; }
input[type=file]::file-selector-button { margin-right: 10px; padding: 7px 10px; border: 1px solid #ddd6fa; border-radius: 8px; background: var(--lav); color: var(--purple); font: inherit; cursor: pointer; }
.card-header-with-icon { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.card-header-with-icon svg { width: 22px; height: 22px; flex: none; color: var(--purple); }
.smtp-help-box { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); color: var(--muted); font-size: 12px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.panel-title { margin: 0; font-size: 14px; font-weight: 650; }
.color-success { color: var(--green); }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); margin-left: 4px; }
.step-num { display: inline-grid; place-items: center; width: 23px; height: 23px; margin-right: 7px; background: var(--lav); color: var(--purple); border-radius: 8px; font-size: 11px; }
.sk-row { padding: 18px; margin-bottom: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.sk-line { width: 65%; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eeeaf9, #f8f7fc, #eeeaf9); background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite alternate; }
.mobile-prod-list, .mobile-pos-dock-bar { display: none; }
.financial-panels { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; margin-bottom: 18px; }
.quote-filter-grid { display: grid; grid-template-columns: minmax(0, 1fr) 180px auto; gap: 10px; align-items: center; }
.cash-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.report-periods { display: flex; flex-wrap: wrap; gap: 4px; }
.report-periods button { padding: 7px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; }
.report-periods button.active { background: var(--lav); color: var(--purple); }
.ripple-host { position: relative; overflow: clip; }
.ripple {
  display: block; position: absolute; pointer-events: none; border-radius: 50%;
  background: currentColor; opacity: .14; transform: scale(0); animation: button-ripple .55s ease-out forwards;
}
@keyframes button-ripple { to { transform: scale(2); opacity: 0; } }
.nav-link { height: auto !important; min-height: 38px; max-height: none !important; }
.nav-link > svg { flex: none; }
.nav-link > span:not(.ripple) { flex: 1; min-width: 0; line-height: 1.4; white-space: normal; }
@media (max-width: 640px) {
  .pos-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .pos-prod-card { align-items: stretch !important; padding: 0 !important; gap: 0 !important; }
  .pos-prod-img-box { width: 100% !important; min-width: 0 !important; height: 160px !important; border-radius: 0 !important; }
  .pos-prod-img-box img { object-fit: contain !important; }
  .pos-prod-info { padding: 10px !important; }
  .sheet-nav { align-items: start; }
  .sheet-group.single { grid-column: 1 / -1; }
}
.editor-actions { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 16px; }
.editor-actions > div:first-child { display: none; }
.editor-actions > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
.quotation-editor-grid > div:last-child { overflow-x: auto; }
.a4-header { gap: 16px; }
.a4-header > * { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.a4-sheet table { table-layout: fixed; }
.a4-sheet table th { white-space: normal !important; font-size: 9px !important; padding: 7px !important; letter-spacing: 0 !important; }
.a4-sheet table td { padding: 8px 7px !important; overflow-wrap: anywhere; }
@media (max-width: 1200px) {
  .quotation-editor-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .config-top-grid { grid-template-columns: minmax(0, 1fr); }
  .financial-panels { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .product-dialog-grid { grid-template-columns: minmax(0, 1fr); }
  .product-photo-panel { position: static; }
  .form-grid-3, .cash-stats { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .erp-card { padding: 16px; }
  .a4-sheet { padding: 20px 16px; }
  .form-grid-2, .quote-filter-grid { grid-template-columns: minmax(0, 1fr); }
  .desktop-table-wrap { display: none; }
  .mobile-prod-list { display: grid; gap: 10px; }
  .mobile-prod-card { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; }
  .mobile-prod-thumb { width: 58px; height: 58px; flex: none; border-radius: 10px; overflow: hidden; background: var(--canvas); }
  .mobile-prod-thumb img { width: 100%; height: 100%; object-fit: contain; }
  .mobile-prod-info { min-width: 0; flex: 1; }
  .mobile-prod-name { font-weight: 600; font-size: 13px; }
  .mobile-prod-sku { color: var(--muted); font-size: 11px; }
  .mobile-prod-price-stock { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 11px; margin-top: 6px; }
  .mobile-prod-price { color: var(--purple); font-weight: 650; }
  .mobile-prod-arrow { width: 16px; flex: none; color: var(--muted); }
  .mobile-prod-arrow svg { width: 16px; height: 16px; }
  .modal-overlay { padding: 10px; }
  .modal-overlay { align-items: center; }
  .modal-window { height: auto; max-height: calc(100dvh - 20px); border: 1px solid var(--line); border-radius: 18px; }
  .modal-header, .modal-body, .modal-footer { padding: 16px; }
  .modal-header h2 { overflow-wrap: anywhere; }
  .receipt-send-row { flex-wrap: wrap; margin-left: 0 !important; }
  #cpClientEmail { max-width: 100%; }
  .mobile-pos-dock-bar { position: fixed; display: flex; justify-content: space-between; gap: 12px; left: 16px; right: 16px; bottom: calc(var(--dock-h) + 10px); padding: 14px; border-radius: 14px; background: var(--purple); color: #fff; z-index: 11; box-shadow: var(--shadow); }
  .page-wrap:has(.mobile-pos-dock-bar) { padding-bottom: calc(var(--dock-h) + 110px); }
}

/* El formulario debe encogerse dentro del modal para que su contenido pueda desplazarse. */
.modal-window > form { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow:hidden; }
.modal-window > .modal-body, .modal-window > form > .modal-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.modal-header, .modal-footer { flex-shrink:0; }
.modal-window .modal-body::-webkit-scrollbar { width:7px; }
.modal-window .modal-body::-webkit-scrollbar-thumb { background:#c6bddb; border-radius:8px; }
.erp-checkbox-row { cursor:pointer; min-height:30px; }
.erp-checkbox-row input[type=checkbox] { width:16px; height:16px; min-width:16px; flex:none; cursor:pointer; }

.invoice-status {display:inline-flex;align-items:center;gap:6px;border-radius:10px;padding:5px 8px;font-size:11px;font-weight:600;white-space:nowrap;}
.invoice-status svg {width:16px!important;height:16px!important;flex:none;}
.invoice-status.is-approved {color:#15803d;background:#e8f5ec;}
.invoice-status.is-rejected {color:#b42318;background:#fdedeb;}
.invoice-status.is-pending {color:#9a6700;background:#fff5d6;}
.invoice-status.is-cancelled,.invoice-status.is-unknown {color:#596780;background:#eef2f7;}

/* Keep commerce identity visible while using the mobile POS. */
.topbar { position: sticky; top: 0; z-index: 12; flex-shrink: 0; }
.top-brand { min-width: 0; }
.top-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(45vw,320px); }
@media (max-width:640px) {
  .pos-products-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .sheet-group-title, .sheet-link { white-space: normal; height: auto; min-height: 36px; }
}

/* Content rows must grow with names and document numbers, especially at 390px. */
.recent-sale-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:14px 16px;border-top:1px solid var(--line);cursor:pointer}
.recent-sale-icon{width:28px;height:28px;display:grid;place-items:center;background:var(--lav);color:var(--purple);border-radius:8px}
.recent-sale-copy{min-width:0;overflow-wrap:anywhere}.recent-sale-copy strong,.recent-sale-copy span,.recent-sale-copy small{display:block;line-height:1.5}.recent-sale-copy strong{font-size:12px}.recent-sale-copy span,.recent-sale-copy small{font-size:10px;color:var(--muted)}
.recent-sale-total{font-size:12px;color:var(--purple);white-space:nowrap}
.financial-trend{min-height:220px;display:grid;place-items:center;padding:8px}.financial-trend>svg{width:100%;height:auto;max-height:260px}
.mobile-scroll-hint{display:none}
@media(max-width:720px){.recent-sale-row{gap:8px;padding:12px}.mobile-table-scroll{scrollbar-width:none}.mobile-table-scroll::-webkit-scrollbar{display:none}.mobile-scroll-hint{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:7px 10px;color:var(--muted);font-size:11px}.financial-trend{overflow:hidden}}

.financial-trend>svg{width:100%!important;height:auto!important;min-height:150px}.financial-trend text{stroke:none!important;fill:var(--muted)!important}