:root{
  --cw-primary:#5b5ce2;
  --cw-primary-2:#6f67ef;
  --cw-mint:#67d5cb;
  --cw-bg:#f4f5f8;
  --cw-card:#ffffff;
  --cw-text:#191b23;
  --cw-muted:#777c8b;
  --cw-border:#e7e9ef;
  --cw-sidebar:250px;
  --cw-radius:14px;
}
*{box-sizing:border-box}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--cw-bg);color:var(--cw-text);font-size:14px;margin:0}
a{text-decoration:none}
.app-shell{min-height:100vh;display:flex}
.sidebar{width:var(--cw-sidebar);background:#fff;border-right:1px solid var(--cw-border);position:fixed;inset:0 auto 0 0;z-index:1040;display:flex;flex-direction:column;transition:.25s ease}
.brand{height:74px;display:flex;align-items:center;padding:0 22px;gap:10px;font-weight:800;font-size:18px;color:#20232c}
.brand-mark{width:31px;height:31px;border-radius:10px;background:linear-gradient(135deg,#6f67ef,#67d5cb);display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:0 7px 18px rgba(91,92,226,.22)}
.brand small{font-size:11px;color:var(--cw-primary);margin-left:-6px;margin-top:-8px}
.sidebar-scroll{overflow-y:auto;padding:0 13px 18px;flex:1}
.nav-section{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#9a9eaa;padding:16px 12px 8px;font-weight:700}
.side-link{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;color:#3e424d;margin:2px 0;font-weight:500}
.side-link:hover{background:#f6f6fb;color:var(--cw-primary)}
.side-link.active{background:#eceafe;color:var(--cw-primary);font-weight:700}
.side-icon{width:20px;text-align:center;font-size:15px;opacity:.9}
.sidebar-user{border-top:1px solid var(--cw-border);padding:15px;display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#d7d9ff,#b7f0ea);display:grid;place-items:center;font-weight:800;color:#373a80}
.sidebar-user .meta{min-width:0;flex:1}.sidebar-user .meta strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user .meta span{display:block;font-size:10px;color:#9397a3;text-transform:capitalize}
.main{margin-left:var(--cw-sidebar);width:calc(100% - var(--cw-sidebar));min-height:100vh}
.topbar{height:74px;background:#fff;border-bottom:1px solid var(--cw-border);display:flex;align-items:center;gap:14px;padding:0 24px;position:sticky;top:0;z-index:1020}
.mobile-toggle{display:none;border:0;background:transparent;font-size:22px}
.searchbox{max-width:380px;flex:1;position:relative}.searchbox input{width:100%;border:1px solid #eceef3;border-radius:10px;padding:10px 39px 10px 37px;background:#fafbfc;outline:none}.searchbox:before{content:'⌕';position:absolute;left:13px;top:6px;font-size:23px;color:#767b88}.searchbox .kbd{position:absolute;right:11px;top:9px;border:1px solid #e1e3e8;border-radius:5px;padding:1px 5px;font-size:10px;color:#8b8f99;background:#fff}
.top-actions{margin-left:auto;display:flex;gap:9px;align-items:center}.top-actions .btn{border-radius:9px;font-size:12px;font-weight:700;padding:9px 14px}.btn-primary{background:var(--cw-primary);border-color:var(--cw-primary)}.btn-primary:hover{background:#4d4ed0;border-color:#4d4ed0}
.content{padding:22px 24px 34px}.page-title{font-size:22px;font-weight:800;margin:0}.page-subtitle{font-size:12px;color:var(--cw-muted);margin-top:3px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}
.card-soft{background:var(--cw-card);border:1px solid var(--cw-border);border-radius:var(--cw-radius);box-shadow:0 2px 7px rgba(30,33,45,.03)}
.metric-card{padding:16px 17px;position:relative;overflow:hidden;min-height:111px}.metric-card .label{font-size:12px;font-weight:700}.metric-card .value{font-size:22px;font-weight:800;margin-top:4px}.metric-card .delta{font-size:10px;color:#28a577;font-weight:700}.spark{position:absolute;left:0;right:0;bottom:0;height:35px;opacity:.65}.spark svg{width:100%;height:100%}
.section-card{padding:16px}.section-title{font-size:13px;font-weight:800;margin-bottom:2px}.section-sub{color:var(--cw-muted);font-size:10px}
.table{font-size:12px;color:#414550}.table thead th{font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:#9a9eaa;border-bottom-color:#eceef2}.table td,.table th{vertical-align:middle;border-color:#f0f1f4}.table-hover tbody tr:hover{background:#fafaff}
.form-control,.form-select{border-color:#e5e7ed;border-radius:9px;font-size:12px;min-height:38px}.form-control:focus,.form-select:focus{border-color:#a8a9f6;box-shadow:0 0 0 .2rem rgba(91,92,226,.10)}.form-label{font-size:11px;font-weight:700;color:#595e6b;margin-bottom:5px}
.modal-content{border:0;border-radius:16px;box-shadow:0 20px 60px rgba(32,36,55,.15)}.modal-header,.modal-footer{border-color:#f0f1f4}
.badge{font-size:9px;border-radius:20px;padding:5px 8px}.bg-success-soft{background:#e8f8f0!important}.bg-warning-soft{background:#fff5df!important}.bg-danger-soft{background:#fdebec!important}.bg-primary-soft{background:#eceafe!important}.bg-info-soft{background:#e7f7fb!important}.bg-secondary-soft{background:#f0f1f3!important}
.text-success{color:#21956b!important}.text-warning{color:#b88622!important}.text-danger{color:#d64b55!important}.text-primary{color:var(--cw-primary)!important}.text-info{color:#289cb8!important}.text-secondary{color:#7f8491!important}
.funnel{display:flex;align-items:stretch;height:160px;padding:8px 0}.funnel-step{position:relative;flex:1;min-width:0}.funnel-step:before{content:'';position:absolute;inset:50px 0 18px;background:linear-gradient(90deg,rgba(91,92,226,.22),rgba(103,213,203,.18));clip-path:polygon(0 5%,100% 25%,100% 75%,0 95%)}.funnel-step:first-child:before{background:linear-gradient(90deg,#5b5ce2,rgba(91,92,226,.25))}.funnel-step .num{font-size:17px;font-weight:800}.funnel-step .name{font-size:10px;font-weight:700}.funnel-step .pct{font-size:9px;color:#8f939f}
.kpi-list .rowx{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid #f2f3f6}.kpi-list .rowx:last-child{border:0}.dotbox{width:25px;height:25px;border-radius:6px;background:#eeecff;display:grid;place-items:center;color:var(--cw-primary);font-size:10px}.kpi-list .grow{flex:1;font-size:10px;font-weight:700}.kpi-list .rate{font-size:10px;font-weight:800}.mini-trend{width:48px;height:14px}
.chart-wrap{height:230px;position:relative}.chart-wrap canvas{width:100%!important;height:100%!important}
.progress-thin{height:6px;border-radius:10px;background:#edf0f3;overflow:hidden}.progress-thin>span{height:100%;display:block;background:var(--cw-primary);border-radius:10px}
.pos-grid{display:grid;grid-template-columns:1.5fr .8fr;gap:18px}.catalog-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.chip{border:1px solid #e5e7ed;background:#fff;border-radius:20px;padding:7px 12px;font-size:11px;cursor:pointer}.chip.active{background:#eceafe;border-color:#d8d4ff;color:var(--cw-primary);font-weight:700}.catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.product-card{padding:13px;border:1px solid #e7e9ee;border-radius:12px;background:#fff;cursor:pointer;transition:.15s}.product-card:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(30,33,45,.06);border-color:#d7d4ff}.product-card .type{font-size:9px;color:#8e93a1;text-transform:uppercase}.product-card .name{font-weight:800;font-size:12px;margin:4px 0}.product-card .price{font-size:13px;color:var(--cw-primary);font-weight:800}.cart{position:sticky;top:95px}.cart-items{max-height:330px;overflow:auto}.cart-line{display:grid;grid-template-columns:1fr 60px 26px;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid #f0f1f4}.cart-line .desc{font-size:11px;font-weight:700}.cart-line .sub{font-size:9px;color:#9397a1}.cart-line .amt{text-align:right;font-size:11px;font-weight:800}.cart-line button{border:0;background:#f8eded;color:#cb4d57;border-radius:6px}.totals .r{display:flex;justify-content:space-between;font-size:11px;padding:4px 0}.totals .grand{font-size:17px;font-weight:900;border-top:1px dashed #dcdfe5;margin-top:7px;padding-top:10px}
.status-board{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:12px;overflow-x:auto;padding-bottom:5px}.status-col{background:#f7f8fb;border:1px solid #eceef2;border-radius:13px;min-height:300px;padding:10px}.status-col h6{font-size:11px;font-weight:800;margin:4px 3px 10px;display:flex;justify-content:space-between}.order-card{background:#fff;border:1px solid #e9ebef;border-radius:10px;padding:11px;margin-bottom:8px}.order-card .top{display:flex;justify-content:space-between;gap:8px}.order-card .no{font-weight:800;font-size:11px}.order-card .time{font-size:9px;color:#9297a3}.order-card .client{font-size:10px;margin-top:6px}.order-card .meta{font-size:9px;color:#7f8490;margin-top:4px}.order-card .amount{font-weight:800;font-size:11px;color:var(--cw-primary);margin-top:6px}
.empty-state{padding:35px;text-align:center;color:#9297a3}.empty-state .icon{font-size:30px;margin-bottom:8px}
.toast-container{z-index:2000}.app-toast{background:#20232c;color:#fff;border-radius:10px;padding:11px 14px;box-shadow:0 10px 30px rgba(0,0,0,.16);min-width:220px;font-size:12px}
.login-body{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;background:#f4f5f8}.login-visual{padding:60px;display:flex;align-items:flex-end;background:radial-gradient(circle at 25% 25%,#d9d7ff 0,transparent 35%),radial-gradient(circle at 70% 55%,#bceee9 0,transparent 33%),#eef0f5}.login-card-wrap{display:grid;place-items:center;background:#fff;padding:30px}.login-card{width:min(420px,100%)}.login-card .logo-big{width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,#5b5ce2,#67d5cb);color:white;display:grid;place-items:center;font-size:24px;font-weight:900;margin-bottom:22px}.login-card h1{font-size:28px;font-weight:900}.login-visual h2{font-weight:900;max-width:650px;font-size:42px;line-height:1.05}.login-visual p{max-width:600px;color:#616674;font-size:16px}.preview-dash{width:100%;height:55%;border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.65);backdrop-filter:blur(8px);border-radius:25px;box-shadow:0 30px 60px rgba(74,75,130,.12);margin-bottom:40px;position:relative;overflow:hidden}.preview-dash:before{content:'';position:absolute;left:20px;top:20px;bottom:20px;width:18%;border-radius:14px;background:rgba(255,255,255,.8)}.preview-dash:after{content:'';position:absolute;left:22%;right:20px;top:20px;height:28%;border-radius:14px;background:linear-gradient(90deg,rgba(91,92,226,.13),rgba(103,213,203,.12))}
.receipt-page{background:#fff;color:#111;font-family:monospace}.receipt{width:80mm;margin:0 auto;padding:5mm 4mm}.receipt .center{text-align:center}.receipt h1{font-size:18px;margin:0}.receipt .small{font-size:10px}.receipt table{width:100%;font-size:10px;border-collapse:collapse}.receipt td{padding:3px 0}.receipt .dash{border-top:1px dashed #000;margin:7px 0}.receipt .total{font-size:14px;font-weight:bold}.no-print-actions{position:fixed;right:20px;top:20px;display:flex;gap:8px}
@media print{.no-print-actions{display:none!important}.receipt{width:80mm;padding:2mm}.receipt-page{margin:0}.receipt-page *{box-shadow:none!important}}
@media(max-width:1100px){.catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.pos-grid{grid-template-columns:1fr}.cart{position:static}}
@media(max-width:900px){.sidebar{transform:translateX(-100%)}body.sidebar-open .sidebar{transform:translateX(0)}.main{margin-left:0;width:100%}.mobile-toggle{display:block}.content{padding:18px 14px}.topbar{padding:0 14px}.searchbox{max-width:none}.status-board{grid-template-columns:repeat(4,260px)}.login-body{grid-template-columns:1fr}.login-visual{display:none}}
@media(max-width:560px){.catalog{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column}.top-actions .date-btn{display:none}.content{padding:14px 10px}.metric-card{min-height:100px}.searchbox .kbd{display:none}}
@media print{
  @page{size:80mm auto;margin:0}
}

/* === 2026 mobile / PWA / login refresh === */
html,body{min-height:100%;overflow-x:hidden}
.main{display:flex;flex-direction:column;min-height:100vh}
.content{flex:1;width:100%}
.brand-logo{width:34px;height:34px;object-fit:contain;border-radius:8px}
.logout-link{color:#9297a3;font-size:18px}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(20,23,34,.42);z-index:1030;backdrop-filter:blur(2px)}
.topbar-context{display:flex;flex-direction:column;min-width:0}.topbar-context b{font-size:12px}.topbar-context span{font-size:10px;color:var(--cw-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.pwa-install-btn.pwa-ready{border-color:#dcd9ff;background:#f6f5ff;color:var(--cw-primary)}
.developer-footer{position:sticky;bottom:0;z-index:1010;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;min-height:42px;padding:9px 18px;background:rgba(255,255,255,.96);border-top:1px solid var(--cw-border);font-size:10px;color:#7e8390;backdrop-filter:blur(10px)}
.developer-footer a{color:#5e6470}.developer-footer a:hover{color:var(--cw-primary)}
.reception-banner{display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,#f1efff,#eefcf9);border:1px solid #e0defb;border-radius:14px;padding:13px 15px;font-size:11px;color:#5f6471}.reception-banner b{display:block;color:#303342;font-size:12px}.reception-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--cw-primary);color:white;font-weight:900}
.catalog-search{min-width:220px;flex:0 1 320px}.qty-input{width:70px!important;height:28px!important}

.login-page{background:#f2f4f7;min-height:100vh;padding-bottom:42px}
.login-shell{min-height:calc(100vh - 42px);display:grid;grid-template-columns:minmax(0,1.18fr) minmax(420px,.82fr)}
.login-visual{position:relative;display:flex;align-items:flex-end;min-height:100%;padding:58px;background-size:cover;background-position:center;color:#fff;overflow:hidden}
.login-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(91,92,226,.10),transparent 48%);pointer-events:none}
.login-visual-badge{position:absolute;left:42px;top:38px;z-index:1;padding:8px 11px;border:1px solid rgba(255,255,255,.34);border-radius:999px;background:rgba(255,255,255,.13);backdrop-filter:blur(12px);font-size:10px;letter-spacing:.08em;font-weight:800}
.login-visual-copy{position:relative;z-index:1;max-width:710px}.login-visual-copy h2{font-size:clamp(34px,4vw,58px);line-height:1.02;font-weight:900;letter-spacing:-.035em;margin:0 0 18px}.login-visual-copy p{max-width:620px;font-size:15px;line-height:1.65;color:rgba(255,255,255,.88);margin-bottom:20px}.login-feature-row{display:flex;gap:9px;flex-wrap:wrap}.login-feature-row span{padding:7px 10px;border-radius:9px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);font-size:10px;font-weight:700}
.login-card-wrap{display:grid;place-items:center;padding:48px 44px;background:#fff}.login-card-panel{width:min(430px,100%)}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:54px}.login-brand .logo-big{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#5b5ce2,#67d5cb);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:900;box-shadow:0 10px 24px rgba(91,92,226,.20)}.login-brand b{display:block;font-size:15px}.login-brand span{display:block;color:#969aa5;font-size:10px;margin-top:2px}
.login-heading h1{font-size:30px;line-height:1.1;font-weight:900;letter-spacing:-.02em;margin-bottom:8px}.login-heading p{font-size:12px;color:#818692;margin-bottom:28px}.login-input{position:relative}.login-input>span{position:absolute;left:13px;top:9px;z-index:2;color:#9397a3;font-size:14px}.login-input .form-control{min-height:46px;padding-left:40px;padding-right:48px;background:#fafbfc;border-color:#e8eaf0;font-size:13px}.password-toggle{position:absolute;right:8px;top:7px;border:0;background:transparent;color:#737886;font-size:10px;font-weight:700;padding:7px}.login-submit{min-height:46px;border-radius:10px;font-size:12px;font-weight:800;box-shadow:0 8px 20px rgba(91,92,226,.20)}
.login-divider{display:flex;align-items:center;gap:12px;color:#a1a5af;font-size:9px;text-transform:uppercase;letter-spacing:.06em;margin:25px 0 14px}.login-divider:before,.login-divider:after{content:'';height:1px;background:#eceef2;flex:1}.pwa-login-btn{min-height:42px;border-radius:10px;font-size:11px;font-weight:700}.login-help{text-align:center;color:#9296a1;font-size:9px;line-height:1.65;margin-top:18px}.login-help a{color:var(--cw-primary);font-weight:700}
.login-developer-footer{position:fixed;left:0;right:0;bottom:0;z-index:20;height:42px;display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;background:rgba(255,255,255,.96);border-top:1px solid #e7e9ef;color:#7e8390;font-size:10px;backdrop-filter:blur(10px)}.login-developer-footer a{color:#5e6470}

@media(max-width:1100px){
  .login-shell{grid-template-columns:1fr 460px}.login-visual{padding:42px}.login-visual-copy h2{font-size:38px}
}
@media(max-width:900px){
  .sidebar{width:min(82vw,290px)}
  body.sidebar-open .sidebar-backdrop{display:block}
  .topbar{gap:9px}.top-actions{gap:6px}.top-actions .btn{padding:8px 10px}
  .developer-footer{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .login-shell{grid-template-columns:1fr;position:relative;min-height:calc(100vh - 42px);background-image:linear-gradient(180deg,rgba(20,24,37,.40),rgba(20,24,37,.78)),url('../img/login-carwash.png');background-size:cover;background-position:center}
  .login-visual{display:none}
  .login-card-wrap{background:transparent;padding:28px 18px;place-items:center}
  .login-card-panel{background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.7);border-radius:22px;padding:28px 24px;box-shadow:0 24px 70px rgba(15,20,34,.28);backdrop-filter:blur(14px)}
  .login-brand{margin-bottom:30px}.login-heading h1{font-size:26px}
}
@media(max-width:700px){
  .topbar{height:64px;padding:0 10px}.searchbox{min-width:0}.searchbox input{padding-right:12px}.searchbox .kbd{display:none}
  .top-actions .date-btn{display:none}.top-actions .btn{font-size:0;min-width:38px;height:38px;padding:7px 9px}.top-actions .btn span{font-size:0}.top-actions .pwa-install-btn:before{content:'⇩';font-size:16px}.top-actions .new-order-btn{font-size:16px}.top-actions .new-order-btn span{display:none}
  .content{padding:14px 10px 68px}.page-title{font-size:19px}.page-subtitle{font-size:10px;line-height:1.4}.page-head{margin-bottom:13px}
  .section-card{padding:13px}.catalog-search{min-width:100%;width:100%}.catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.product-card{padding:11px}.product-card .name{font-size:11px}.product-card .price{font-size:12px}
  .cart-items{max-height:none}.cart-line{grid-template-columns:1fr 72px 28px}.status-board{grid-template-columns:repeat(4,82vw)}
  .modal-dialog{margin:.5rem}.modal-content{border-radius:14px}.modal-dialog-scrollable{height:calc(100% - 1rem)}
  .table{min-width:680px}.table-responsive{border-radius:10px}
  .developer-footer{font-size:9px;gap:5px;min-height:48px}.footer-sep{display:none}.developer-footer span:first-child{width:100%;text-align:center}
  .receipt-page .no-print-actions{position:static;padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:6px}.receipt-page .no-print-actions .btn{font-size:10px}.receipt{max-width:100%;width:80mm}
}
@media(max-width:430px){
  .catalog{grid-template-columns:1fr 1fr}.chip{padding:6px 9px;font-size:10px}.topbar-context span{max-width:130px}.login-card-panel{padding:24px 18px}.login-developer-footer{height:auto;min-height:46px;padding:6px 8px;font-size:8.5px}.login-developer-footer span:nth-of-type(2),.login-developer-footer span:nth-of-type(3){display:none}
}
@media(max-width:360px){.catalog{grid-template-columns:1fr}.topbar-context span{display:none}}

/* === Rev.3 · CarWashPro · navy UI, light mode, collapsible sidebar === */
:root{
  --cw-sidebar-expanded:258px;
  --cw-sidebar-collapsed:78px;
  --cw-topbar-height:72px;
  --cw-shadow:0 12px 34px rgba(2,8,23,.10);
  --cw-sidebar-bg:#0b1324;
  --cw-sidebar-text:#cbd5e1;
  --cw-sidebar-muted:#718096;
  --cw-sidebar-hover:#152238;
  --cw-sidebar-active:#1d2a42;
  --cw-topbar-bg:rgba(255,255,255,.94);
  --cw-input-bg:#fff;
  --cw-surface-2:#f7f9fc;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --cw-bg:#080f1d;
  --cw-card:#101a2b;
  --cw-text:#edf4ff;
  --cw-muted:#91a0b5;
  --cw-border:#223047;
  --cw-sidebar-bg:#07101f;
  --cw-sidebar-text:#c9d5e5;
  --cw-sidebar-muted:#718096;
  --cw-sidebar-hover:#111d30;
  --cw-sidebar-active:#18263d;
  --cw-topbar-bg:rgba(10,18,32,.94);
  --cw-input-bg:#0d1727;
  --cw-surface-2:#0c1626;
  --cw-shadow:0 16px 42px rgba(0,0,0,.20);
}
html[data-theme="light"]{
  color-scheme:light;
  --cw-bg:#f4f7fb;
  --cw-card:#ffffff;
  --cw-text:#192233;
  --cw-muted:#758198;
  --cw-border:#e3e8f0;
  --cw-sidebar-bg:#ffffff;
  --cw-sidebar-text:#344054;
  --cw-sidebar-muted:#98a2b3;
  --cw-sidebar-hover:#f2f4f7;
  --cw-sidebar-active:#eceefe;
  --cw-topbar-bg:rgba(255,255,255,.94);
  --cw-input-bg:#fff;
  --cw-surface-2:#f7f9fc;
}
body{background:var(--cw-bg);color:var(--cw-text);font-size:clamp(13px,.2vw + 12px,15px);line-height:1.45;transition:background-color .2s ease,color .2s ease}
.sidebar{width:var(--cw-sidebar-expanded);background:var(--cw-sidebar-bg);border-right:1px solid var(--cw-border);box-shadow:8px 0 30px rgba(0,0,0,.06)}
.brand{height:var(--cw-topbar-height);padding:0 18px;color:var(--cw-text);position:relative;border-bottom:1px solid var(--cw-border)}
.brand-name{font-size:17px;font-weight:850;letter-spacing:-.02em;white-space:nowrap}
.brand-mark{background:linear-gradient(135deg,#6d6ff0,#69d9d0);box-shadow:0 8px 24px rgba(92,94,226,.28)}
.sidebar-collapse-btn{margin-left:auto;width:30px;height:30px;border:1px solid var(--cw-border);border-radius:9px;background:var(--cw-sidebar-hover);color:var(--cw-sidebar-text);display:grid;place-items:center;font-size:20px;line-height:1;cursor:pointer;transition:.2s ease}
.sidebar-collapse-btn:hover{background:var(--cw-sidebar-active);color:#fff}
.nav-section{color:var(--cw-sidebar-muted);padding:17px 12px 7px}
.side-link{color:var(--cw-sidebar-text);padding:10px 12px;border-radius:9px;min-height:40px}
.side-link:hover{background:var(--cw-sidebar-hover);color:#fff}
.side-link.active{background:var(--cw-sidebar-active);color:#fff;box-shadow:inset 0 0 0 1px rgba(148,163,184,.08)}
.side-icon{color:inherit;font-size:16px;opacity:.95}
.sidebar-user{border-top-color:var(--cw-border);color:var(--cw-sidebar-text);background:color-mix(in srgb,var(--cw-sidebar-bg) 92%,#fff 8%)}
.sidebar-user .meta strong{color:var(--cw-sidebar-text)}
.sidebar-user .meta span{color:var(--cw-sidebar-muted)}
.logout-link{color:var(--cw-sidebar-muted)}
.main{margin-left:var(--cw-sidebar-expanded);width:calc(100% - var(--cw-sidebar-expanded));transition:margin-left .25s ease,width .25s ease;background:var(--cw-bg)}
.topbar{height:var(--cw-topbar-height);background:var(--cw-topbar-bg);border-bottom:1px solid var(--cw-border);position:sticky;top:0;z-index:1025;backdrop-filter:blur(16px);box-shadow:0 4px 18px rgba(0,0,0,.035)}
.mobile-toggle{color:var(--cw-text)}
.searchbox input,.form-control,.form-select{background-color:var(--cw-input-bg);border-color:var(--cw-border);color:var(--cw-text)}
.searchbox input::placeholder,.form-control::placeholder{color:var(--cw-muted);opacity:.72}
.searchbox .kbd{background:var(--cw-card);border-color:var(--cw-border);color:var(--cw-muted)}
.form-control:focus,.form-select:focus{background-color:var(--cw-input-bg);color:var(--cw-text)}
.form-select option{background:var(--cw-card);color:var(--cw-text)}
.form-label{color:color-mix(in srgb,var(--cw-text) 82%,var(--cw-muted) 18%)}
.card-soft,.modal-content{background:var(--cw-card);border-color:var(--cw-border);color:var(--cw-text);box-shadow:var(--cw-shadow)}
.section-sub,.page-subtitle,.text-muted,.form-text{color:var(--cw-muted)!important}
.table{color:var(--cw-text);--bs-table-color:var(--cw-text);--bs-table-bg:transparent;--bs-table-border-color:var(--cw-border);--bs-table-hover-color:var(--cw-text);--bs-table-hover-bg:color-mix(in srgb,var(--cw-card) 86%,var(--cw-primary) 14%)}
.table thead th{color:var(--cw-muted);border-bottom-color:var(--cw-border)}
.table td,.table th{border-color:var(--cw-border)}
.table-hover tbody tr:hover{background:color-mix(in srgb,var(--cw-card) 90%,var(--cw-primary) 10%)}
.btn-light{background:var(--cw-card);border-color:var(--cw-border);color:var(--cw-text)}
.btn-light:hover,.btn-light:focus{background:var(--cw-surface-2);border-color:color-mix(in srgb,var(--cw-border) 70%,var(--cw-primary) 30%);color:var(--cw-text)}
.chip,.product-card,.order-card{background:var(--cw-card);border-color:var(--cw-border);color:var(--cw-text)}
.chip:hover{background:var(--cw-surface-2)}
.chip.active{background:color-mix(in srgb,var(--cw-primary) 22%,var(--cw-card) 78%);border-color:color-mix(in srgb,var(--cw-primary) 48%,var(--cw-border) 52%);color:color-mix(in srgb,var(--cw-primary) 78%,#fff 22%)}
.status-col{background:var(--cw-surface-2);border-color:var(--cw-border)}
.cart-line{border-bottom-color:var(--cw-border)}
.totals .grand{border-top-color:var(--cw-border)}
.modal-header,.modal-footer{border-color:var(--cw-border)}
.developer-footer{background:var(--cw-topbar-bg);border-top-color:var(--cw-border);color:var(--cw-muted)}
.developer-footer a{color:var(--cw-muted)}
.topbar-context span{color:var(--cw-muted)}
.theme-toggle-btn [data-theme-icon]{font-size:15px;line-height:1}
.theme-toggle-btn [data-theme-label]{font-size:11px}

html[data-theme="dark"] .bg-success-soft{background:#0f2d27!important}
html[data-theme="dark"] .bg-warning-soft{background:#342810!important}
html[data-theme="dark"] .bg-danger-soft{background:#351a22!important}
html[data-theme="dark"] .bg-primary-soft{background:#25234d!important}
html[data-theme="dark"] .bg-info-soft{background:#102b35!important}
html[data-theme="dark"] .bg-secondary-soft{background:#202a38!important}
html[data-theme="dark"] .text-success{color:#6ce0b5!important}
html[data-theme="dark"] .text-warning{color:#f5c468!important}
html[data-theme="dark"] .text-danger{color:#ff8c96!important}
html[data-theme="dark"] .text-info{color:#74d5e8!important}
html[data-theme="dark"] .text-secondary{color:#a9b6c8!important}
html[data-theme="dark"] hr{border-color:var(--cw-border);opacity:1}
html[data-theme="dark"] .border-bottom,html[data-theme="dark"] .border-top{border-color:var(--cw-border)!important}

/* Login follows the selected theme while preserving the photo. */
.login-card-wrap{background:var(--cw-card)}
.login-card-panel{color:var(--cw-text)}
.login-brand b,.login-heading h1{color:var(--cw-text)}
.login-brand span,.login-heading p,.login-help{color:var(--cw-muted)}
.login-input .form-control{background:var(--cw-input-bg);border-color:var(--cw-border);color:var(--cw-text)}
.login-divider{color:var(--cw-muted)}
.login-divider:before,.login-divider:after{background:var(--cw-border)}
.login-developer-footer{background:var(--cw-topbar-bg);border-top-color:var(--cw-border);color:var(--cw-muted)}
.login-developer-footer a{color:var(--cw-muted)}
.login-theme-toggle{position:absolute;right:20px;top:20px;z-index:4;width:40px;height:40px;padding:0;border-radius:12px;display:grid;place-items:center}

/* Desktop collapsed sidebar. */
@media(min-width:901px){
  body.sidebar-collapsed .sidebar{width:var(--cw-sidebar-collapsed)}
  body.sidebar-collapsed .main{margin-left:var(--cw-sidebar-collapsed);width:calc(100% - var(--cw-sidebar-collapsed))}
  body.sidebar-collapsed .brand{padding:0 12px;justify-content:center}
  body.sidebar-collapsed .brand-name,body.sidebar-collapsed .nav-section,body.sidebar-collapsed .side-label,body.sidebar-collapsed .sidebar-user .meta,body.sidebar-collapsed .logout-link{display:none}
  body.sidebar-collapsed .brand-logo{width:34px;height:34px}
  body.sidebar-collapsed .sidebar-collapse-btn{position:absolute;right:-15px;top:21px;background:var(--cw-card);color:var(--cw-text);transform:rotate(180deg);box-shadow:0 6px 18px rgba(0,0,0,.16)}
  body.sidebar-collapsed .sidebar-scroll{padding-left:10px;padding-right:10px;padding-top:12px}
  body.sidebar-collapsed .side-link{justify-content:center;padding:10px 8px}
  body.sidebar-collapsed .side-icon{width:28px;font-size:18px}
  body.sidebar-collapsed .sidebar-user{justify-content:center;padding:15px 8px}
}

/* Reception: larger touch targets and mobile-first typography. */
.reception-mobile-nav{display:none}
.role-recepcion .reception-banner{background:color-mix(in srgb,var(--cw-card) 88%,var(--cw-primary) 12%);border-color:var(--cw-border);color:var(--cw-muted)}
.role-recepcion .reception-banner b{color:var(--cw-text)}
@media(max-width:900px){
  .sidebar{width:min(86vw,310px)}
  .sidebar-collapse-btn{display:none}
  .topbar{position:sticky;top:0}
  .role-recepcion{font-size:16px}
  .role-recepcion .content{padding:18px 14px 156px}
  .role-recepcion .page-title{font-size:clamp(22px,6vw,28px);line-height:1.15}
  .role-recepcion .page-subtitle{font-size:12px;line-height:1.5;max-width:46rem}
  .role-recepcion .section-card{padding:16px}
  .role-recepcion .section-title{font-size:16px}
  .role-recepcion .section-sub{font-size:12px;line-height:1.45}
  .role-recepcion .form-label{font-size:13px;margin-bottom:7px}
  .role-recepcion .form-control,.role-recepcion .form-select{min-height:50px;font-size:16px;border-radius:12px;padding:.72rem .85rem}
  .role-recepcion textarea.form-control{min-height:98px}
  .role-recepcion .btn{min-height:44px;font-size:14px;border-radius:11px}
  .role-recepcion .btn-sm{min-height:40px;font-size:13px}
  .role-recepcion .catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .role-recepcion .product-card{min-height:104px;padding:14px;border-radius:14px;display:flex;flex-direction:column;justify-content:center}
  .role-recepcion .product-card .type{font-size:10px}
  .role-recepcion .product-card .name{font-size:14px;line-height:1.3;margin:6px 0}
  .role-recepcion .product-card .price{font-size:16px}
  .role-recepcion .chip{min-height:40px;padding:9px 13px;font-size:12px}
  .role-recepcion .cart-line .desc{font-size:14px}.role-recepcion .cart-line .sub{font-size:11px}.role-recepcion .cart-line .amt{font-size:13px}
  .role-recepcion .totals .r{font-size:13px;padding:6px 0}.role-recepcion .totals .grand{font-size:19px}
  .role-recepcion .developer-footer{position:sticky;bottom:70px;min-height:52px;margin-top:0}
  .reception-mobile-nav{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:1060;min-height:70px;padding:7px max(8px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:var(--cw-topbar-bg);border-top:1px solid var(--cw-border);backdrop-filter:blur(18px);box-shadow:0 -10px 28px rgba(0,0,0,.14)}
  .reception-mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--cw-muted);font-size:11px;font-weight:700;border-radius:11px}
  .reception-mobile-nav a:active{background:var(--cw-surface-2);color:var(--cw-text)}
  .reception-mobile-nav a span{font-size:20px;line-height:1}
}
@media(max-width:700px){
  .theme-toggle-btn [data-theme-label]{display:none!important}
  .theme-toggle-btn [data-theme-icon]{font-size:17px!important}
  .top-actions .theme-toggle-btn{font-size:initial!important}
  .role-recepcion .topbar{height:64px}
  .role-recepcion .topbar-context b{font-size:13px}.role-recepcion .topbar-context span{font-size:11px}
}
@media(max-width:390px){
  .role-recepcion .catalog{grid-template-columns:1fr}
}
.btn-whatsapp{background:#1f9d62;border:1px solid #1f9d62;color:#fff;font-weight:700}.btn-whatsapp:hover,.btn-whatsapp:focus{background:#198553;border-color:#198553;color:#fff}
/* Dark-mode polish for legacy light utility styles. */
.login-page{background:var(--cw-bg)}
html[data-theme="dark"] .pwa-install-btn.pwa-ready{background:#192540;border-color:#334467;color:#c7d2fe}
html[data-theme="dark"] .product-card:hover{border-color:#425173;box-shadow:0 8px 22px rgba(0,0,0,.22)}
html[data-theme="dark"] .cart-line button{background:#351a22;color:#ff8c96}
html[data-theme="dark"] .progress-thin{background:#1b293d}
html[data-theme="dark"] .dotbox{background:#20264c;color:#b8b9ff}
html[data-theme="dark"] .kpi-list .rowx{border-bottom-color:var(--cw-border)}
html[data-theme="dark"] .btn-close{filter:invert(1) grayscale(100%)}
html[data-theme="dark"] .app-toast{background:#e8eef8;color:#101827}
html[data-theme="dark"] .modal-backdrop{--bs-backdrop-bg:#020617;--bs-backdrop-opacity:.72}
html[data-theme="dark"] input:disabled,html[data-theme="dark"] .form-control:disabled{background:#111b2c;color:#8fa0b7}
html[data-theme="dark"] .dropdown-menu{background:var(--cw-card);border-color:var(--cw-border);color:var(--cw-text)}
html[data-theme="dark"] .dropdown-item{color:var(--cw-text)}
html[data-theme="dark"] .dropdown-item:hover{background:var(--cw-surface-2);color:var(--cw-text)}
html[data-theme="dark"] ::-webkit-scrollbar{width:9px;height:9px}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2a3950;border-radius:999px}
html[data-theme="dark"] ::-webkit-scrollbar-track{background:#0a1322}
@media(max-width:900px){
  html[data-theme="dark"] .login-card-panel{background:rgba(16,26,43,.96);border:1px solid var(--cw-border)}
  html[data-theme="dark"] .login-card-wrap{background:transparent}
}

/* === Rev.4 · permissions, loyalty and mobile reception polish === */
html[data-theme="light"]{
  --cw-sidebar-bg:#0b1324;
  --cw-sidebar-text:#d9e2ef;
  --cw-sidebar-muted:#8492a8;
  --cw-sidebar-hover:#15243a;
  --cw-sidebar-active:#25385b;
}
html[data-theme="light"] .sidebar{border-right-color:#17243a;box-shadow:10px 0 30px rgba(11,19,36,.08)}
html[data-theme="light"] .brand{color:#f8fafc;border-bottom-color:#1b2940}
html[data-theme="light"] .sidebar-collapse-btn{border-color:#2b3a53;background:#142238;color:#e5edf8}
html[data-theme="light"] .sidebar-collapse-btn:hover{background:#25385b;color:#fff}
html[data-theme="light"] .side-link{color:#d9e2ef}
html[data-theme="light"] .side-link:hover{background:#15243a;color:#fff}
html[data-theme="light"] .side-link.active{background:#2a3d61;color:#fff!important;box-shadow:inset 3px 0 0 var(--cw-primary),0 7px 20px rgba(0,0,0,.12)}
html[data-theme="light"] .sidebar-user{background:#0d1729;border-top-color:#1b2940}
html[data-theme="light"] .sidebar-user .meta strong{color:#f8fafc}
html[data-theme="light"] .sidebar-user .meta span,html[data-theme="light"] .logout-link{color:#92a1b8}

.permission-group{padding:13px 0;border-top:1px solid var(--cw-border)}
.permission-group:first-of-type{border-top:0}
.permission-group-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--cw-muted);margin-bottom:8px}
.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.permission-option{display:flex;align-items:center;gap:10px;border:1px solid var(--cw-border);background:var(--cw-surface-2);border-radius:11px;padding:10px 11px;cursor:pointer;min-height:58px}
.permission-option:hover{border-color:color-mix(in srgb,var(--cw-primary) 42%,var(--cw-border) 58%)}
.permission-option input{width:18px;height:18px;accent-color:var(--cw-primary);flex:0 0 auto}
.permission-option span{min-width:0;display:flex;flex-direction:column}.permission-option b{font-size:12px;color:var(--cw-text);line-height:1.25}.permission-option small{font-size:9px;color:var(--cw-muted);margin-top:2px}
.permission-option.is-locked{opacity:.78;cursor:not-allowed}

.loyalty-client-strip{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--cw-primary) 22%,var(--cw-border) 78%);background:color-mix(in srgb,var(--cw-card) 90%,var(--cw-primary) 10%);border-radius:12px}
.loyalty-client-strip .loyalty-star{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#f6b94a,#ffdc83);color:#5a3a00;display:grid;place-items:center;font-size:17px;box-shadow:0 8px 20px rgba(246,185,74,.18)}
.loyalty-client-strip b{display:block;font-size:12px;color:var(--cw-text)}.loyalty-client-strip small{display:block;font-size:10px;color:var(--cw-muted);margin-top:1px}
.loyalty-redeem-box{border:1px solid color-mix(in srgb,#e0a329 45%,var(--cw-border) 55%);background:color-mix(in srgb,var(--cw-card) 92%,#f3b53d 8%);border-radius:12px;padding:11px 12px}
.loyalty-redeem-box b{font-size:12px}.loyalty-redeem-box small{display:block;color:var(--cw-muted);font-size:9px;margin-top:2px}.loyalty-redeem-box input{width:104px;text-align:right}.loyalty-redeem-value{font-size:10px;color:var(--cw-muted);margin-top:7px}
.loyalty-example{border-radius:11px;padding:11px 12px;background:var(--cw-surface-2);border:1px dashed var(--cw-border);font-size:11px;color:var(--cw-muted)}

.reception-banner-copy{min-width:180px;flex:1}
.reception-quick-actions{margin-left:auto;display:grid;grid-template-columns:repeat(3,minmax(104px,1fr));gap:8px}
.reception-action{border:1px solid var(--cw-border);background:var(--cw-card);color:var(--cw-text);border-radius:12px;min-height:56px;padding:8px 10px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:700;box-shadow:0 5px 15px rgba(0,0,0,.04)}
.reception-action:hover,.reception-action:focus{background:var(--cw-surface-2);color:var(--cw-text);border-color:color-mix(in srgb,var(--cw-primary) 40%,var(--cw-border) 60%)}
.reception-action span{font-size:18px;color:var(--cw-primary)}

@media(max-width:1200px){
  .reception-banner{align-items:flex-start;flex-wrap:wrap}.reception-quick-actions{width:100%;margin-left:46px;grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .permission-grid{grid-template-columns:1fr}
  .role-recepcion .reception-banner{padding:14px;gap:10px}.role-recepcion .reception-icon{width:42px;height:42px;border-radius:12px;font-size:18px}.role-recepcion .reception-banner-copy b{font-size:16px}.role-recepcion .reception-banner-copy>div{font-size:12px;line-height:1.4;margin-top:2px}
  .role-recepcion .reception-quick-actions{margin:2px 0 0;width:100%;gap:9px}.role-recepcion .reception-action{min-height:68px;border-radius:14px;flex-direction:column;gap:3px;font-size:13px}.role-recepcion .reception-action span{font-size:23px}.role-recepcion .reception-action b{font-weight:800}
  .role-recepcion .developer-footer{bottom:82px}
  .role-recepcion .content{padding-bottom:176px}
  .reception-mobile-nav{min-height:82px;padding-top:8px;padding-bottom:max(9px,env(safe-area-inset-bottom));gap:6px}
  .reception-mobile-nav a{min-height:62px;font-size:12.5px;border-radius:13px;gap:5px}
  .reception-mobile-nav a span{font-size:24px}.reception-mobile-nav a:hover,.reception-mobile-nav a:focus{background:var(--cw-surface-2);color:var(--cw-text)}
  .role-recepcion .new-order-btn{min-width:48px;padding-left:12px;padding-right:12px}.role-recepcion .new-order-btn span{display:none}
  .role-recepcion .pwa-install-btn span{display:none}.role-recepcion .date-btn{display:none}
  .role-recepcion .catalog-search{width:100%}.role-recepcion .catalog-search input{width:100%}
  .role-recepcion .loyalty-client-strip b{font-size:14px}.role-recepcion .loyalty-client-strip small{font-size:11px}
}
@media(max-width:560px){
  .role-recepcion .reception-quick-actions{grid-template-columns:repeat(3,1fr)}
  .role-recepcion .reception-action{min-width:0;padding:8px 5px;font-size:11.5px}
  .role-recepcion .pos-grid{display:block}.role-recepcion .cart{position:static;margin-top:14px}
}
.reception-mobile-nav a.active{background:color-mix(in srgb,var(--cw-primary) 16%,var(--cw-card) 84%);color:var(--cw-primary)}
html[data-theme="dark"] .reception-mobile-nav a.active{background:#1b2942;color:#b9bdff}

/* === Rev.5 · fixed header/footer, navy sidebar scrollbar === */
:root{
  --cw-footer-height:48px;
  --cw-reception-nav-height:70px;
}

/* Keep the app header and developer footer permanently visible. */
.main{
  padding-top:var(--cw-topbar-height);
  padding-bottom:var(--cw-footer-height);
}
.topbar{
  position:fixed;
  top:0;
  left:var(--cw-sidebar-expanded);
  right:0;
  width:auto;
  z-index:1025;
  transition:left .25s ease;
}
.developer-footer{
  position:fixed;
  left:var(--cw-sidebar-expanded);
  right:0;
  bottom:0;
  z-index:1024;
  min-height:var(--cw-footer-height);
  margin:0;
  backdrop-filter:blur(16px);
  transition:left .25s ease;
}

/* Sidebar scroll always belongs to the navy navigation surface, in both themes. */
.sidebar-scroll{
  scrollbar-width:thin;
  scrollbar-color:#344966 var(--cw-sidebar-bg);
}
.sidebar-scroll::-webkit-scrollbar{width:9px;height:9px}
.sidebar-scroll::-webkit-scrollbar-track{background:var(--cw-sidebar-bg)}
.sidebar-scroll::-webkit-scrollbar-thumb{background:#344966;border:2px solid var(--cw-sidebar-bg);border-radius:999px}
.sidebar-scroll::-webkit-scrollbar-thumb:hover{background:#455d7e}

@media(min-width:901px){
  body.sidebar-collapsed .topbar,
  body.sidebar-collapsed .developer-footer{left:var(--cw-sidebar-collapsed)}
}

@media(max-width:900px){
  .main{padding-top:var(--cw-topbar-height);padding-bottom:var(--cw-footer-height)}
  .topbar{left:0;right:0}
  .developer-footer{left:0;right:0}
  .role-recepcion .main{padding-bottom:calc(var(--cw-footer-height) + var(--cw-reception-nav-height))}
  .role-recepcion .developer-footer{position:fixed;left:0;right:0;bottom:var(--cw-reception-nav-height);min-height:var(--cw-footer-height);margin:0}
  .role-recepcion .content{padding-bottom:calc(28px + var(--cw-footer-height) + var(--cw-reception-nav-height))}
}

@media(max-width:700px){
  :root{--cw-topbar-height:64px;--cw-footer-height:56px}
}

/* === Rev.6 · app-style mobile UX, visible logout, larger touch targets === */
.mobile-logout-btn{display:none}
@media(max-width:900px){
  body{font-size:15px;line-height:1.5}
  .sidebar{width:min(90vw,340px);z-index:1080}
  .sidebar-user{padding:14px 16px;gap:12px}
  .sidebar-user .avatar{width:42px;height:42px;font-size:16px}
  .sidebar-user .meta strong{font-size:13px}
  .sidebar-user .meta span{font-size:11px}
  .logout-link{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--cw-sidebar-active);color:#fff;font-size:18px;flex:0 0 auto}

  .topbar{padding:0 10px;gap:8px;align-items:center}
  .mobile-toggle{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--cw-card);border:1px solid var(--cw-border);font-size:22px;flex:0 0 auto}
  .searchbox{flex:1;max-width:none;min-width:0}
  .searchbox input{height:44px;padding:0 14px 0 14px;border-radius:12px;font-size:15px}
  .top-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
  .top-actions .btn{height:44px;min-width:44px;padding:0 12px;border-radius:12px;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
  .top-actions .btn span{font-size:inherit}
  .top-actions .date-btn{display:none}
  .theme-toggle-btn [data-theme-label],.pwa-install-btn span,.new-order-btn span{display:none}
  .theme-toggle-btn,.pwa-install-btn,.new-order-btn{padding-left:0!important;padding-right:0!important;width:44px;min-width:44px}.mobile-logout-btn{display:inline-flex;width:auto;min-width:74px;padding:0 10px!important}
  .mobile-logout-btn{display:inline-flex;background:color-mix(in srgb,var(--cw-card) 88%,#ef4444 12%);border-color:color-mix(in srgb,var(--cw-border) 70%,#ef4444 30%);color:var(--cw-text)}
  .mobile-logout-btn:hover,.mobile-logout-btn:focus{background:color-mix(in srgb,var(--cw-card) 76%,#ef4444 24%);color:var(--cw-text)}

  .content{padding:16px 12px 98px}
  .page-head{display:block;margin-bottom:16px}
  .page-title{font-size:clamp(24px,6.2vw,30px);line-height:1.12;margin:0 0 6px}
  .page-subtitle{font-size:12.5px;line-height:1.45;max-width:42rem}
  #pageActions{margin-top:10px}
  .section-card,.card-soft{border-radius:18px}
  .section-card{padding:16px}
  .section-title{font-size:17px}
  .section-sub{font-size:12px;line-height:1.45}
  .form-label{font-size:13px;font-weight:700;margin-bottom:7px}
  .form-control,.form-select{min-height:48px;font-size:16px;border-radius:13px;padding:.72rem .9rem}
  textarea.form-control{min-height:100px}
  .btn{min-height:46px;font-size:15px;border-radius:13px}
  .btn-sm{min-height:40px;font-size:13px}
  .table-responsive{border-radius:14px}
  .table th,.table td{white-space:nowrap}
  .developer-footer{font-size:10px;line-height:1.35;display:flex;flex-wrap:wrap;justify-content:center;text-align:center;padding:7px 10px}
  .footer-sep{display:none}
  .developer-footer span:first-child,.developer-footer a{width:100%}

  .catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .product-card{min-height:108px;border-radius:16px;padding:14px}
  .product-card .type{font-size:10px}
  .product-card .name{font-size:14px;line-height:1.25}
  .product-card .price{font-size:15px}

  .pos-grid{display:block}
  .cart{position:static!important;margin-top:14px}
}

@media(max-width:560px){
  .topbar{padding:0 8px;gap:6px}
  .searchbox input{font-size:14px}
  .content{padding:14px 10px 100px}
  .catalog{grid-template-columns:1fr 1fr}
}

@media(max-width:390px){
  .catalog{grid-template-columns:1fr}
}

@media(max-width:900px){
  .role-recepcion{font-size:16px}
  .role-recepcion .content{padding:18px 14px calc(118px + var(--cw-footer-height) + var(--cw-reception-nav-height))}
  .role-recepcion .page-title{font-size:clamp(25px,6.6vw,31px)}
  .role-recepcion .page-subtitle{font-size:13px}
  .role-recepcion .section-card{padding:18px}
  .role-recepcion .form-control,.role-recepcion .form-select{min-height:52px;font-size:16px;border-radius:14px}
  .role-recepcion .btn{min-height:48px;font-size:15px}
  .role-recepcion .chip{min-height:42px;padding:10px 14px;border-radius:999px;font-size:12px}
  .role-recepcion .product-card{min-height:120px;padding:16px;border-radius:18px}
  .role-recepcion .product-card .name{font-size:15px}
  .role-recepcion .product-card .price{font-size:17px}
  .role-recepcion .reception-banner{padding:16px;border-radius:18px}
  .role-recepcion .reception-banner-copy{min-width:0}
  .role-recepcion .reception-banner-copy b{font-size:18px;display:block;margin-bottom:3px}
  .role-recepcion .reception-banner-copy>div{font-size:13px;line-height:1.5}
  .role-recepcion .reception-quick-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:4px 0 0;width:100%}
  .role-recepcion .reception-action{min-height:86px;border-radius:16px;padding:12px 8px;flex-direction:column;gap:6px;font-size:13px;text-align:center}
  .role-recepcion .reception-action span{font-size:25px}
  .role-recepcion .reception-action b{font-size:13px;line-height:1.2}
  .role-recepcion .catalog-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .role-recepcion .catalog-search{width:100%}
  .role-recepcion .catalog-search input{width:100%}
  .role-recepcion .developer-footer{bottom:88px}
  .role-recepcion .new-order-btn,.role-recepcion .pwa-install-btn,.role-recepcion .theme-toggle-btn{width:46px;min-width:46px;height:46px;border-radius:14px}.role-recepcion .mobile-logout-btn{width:auto;min-width:78px;height:46px;border-radius:14px;padding:0 10px!important}
  .reception-mobile-nav{grid-template-columns:repeat(4,minmax(0,1fr));min-height:84px;padding:8px max(8px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:8px}
  .reception-mobile-nav a{min-height:64px;border-radius:15px;font-size:12px;line-height:1.2;gap:5px;padding:6px 4px;text-align:center}
  .reception-mobile-nav a span{font-size:24px}
  .reception-mobile-nav a.active{background:color-mix(in srgb,var(--cw-primary) 16%,var(--cw-card) 84%);color:var(--cw-primary)}
  .reception-mobile-nav a.danger{color:#f87171}
  .reception-mobile-nav a.danger:active,.reception-mobile-nav a.danger:hover{background:color-mix(in srgb,var(--cw-card) 76%,#ef4444 24%);color:#fff}
}

@media(max-width:560px){
  .role-recepcion .reception-quick-actions{grid-template-columns:1fr}
  .role-recepcion .reception-action{min-height:74px;flex-direction:row;justify-content:flex-start;padding:12px 14px;text-align:left}
  .role-recepcion .reception-action span{font-size:22px;min-width:22px}
  .role-recepcion .reception-action b{font-size:14px}
}

html[data-theme="light"] .mobile-toggle,
html[data-theme="light"] .mobile-logout-btn,
html[data-theme="light"] .theme-toggle-btn,
html[data-theme="light"] .pwa-install-btn,
html[data-theme="light"] .new-order-btn{box-shadow:0 4px 16px rgba(11,19,36,.06)}
html[data-theme="dark"] .mobile-toggle{background:#111a2a;border-color:#25324a}
html[data-theme="dark"] .mobile-logout-btn{background:#1c1822;border-color:#443140;color:#fca5a5}
html[data-theme="dark"] .reception-mobile-nav a.danger{color:#fca5a5}
@media(max-width:560px){
  .pwa-install-btn{display:none!important}
  .mobile-logout-btn{min-width:44px;width:44px;padding:0!important}
  .mobile-logout-btn span{display:none}
}

:root{--cw-reception-nav-height:84px;}

/* === Rev.7 · definitive responsive/mobile app layout === */
@media (max-width:900px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .app-shell{display:block;width:100%;min-height:100dvh}
  .main{
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding-top:var(--cw-topbar-height)!important;
    padding-bottom:var(--cw-footer-height)!important;
  }
  .topbar{
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
    height:var(--cw-topbar-height);
    padding:0 10px!important;
  }
  .developer-footer{
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
  }
  .content{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:16px 12px calc(24px + var(--cw-footer-height))!important;
  }
  .page-head,.page-head>div:first-child{width:100%;min-width:0}
  .page-title{max-width:100%;overflow-wrap:anywhere}
  .page-subtitle{max-width:100%}
  .card-soft,.section-card,.pos-grid,.pos-grid>div,.row,.table-responsive{min-width:0;max-width:100%}
  .section-card{width:100%;margin-left:0;margin-right:0}
  .row{--bs-gutter-x:1rem}
  .row>[class*="col-"]{min-width:0}

  /* App-like cards instead of squeezed desktop tables. */
  .table-mobile-cards{border:0!important;overflow:visible!important}
  .table-mobile-cards table{display:block!important;min-width:0!important;width:100%!important;background:transparent!important}
  .table-mobile-cards thead{display:none!important}
  .table-mobile-cards tbody{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;width:100%!important}
  .table-mobile-cards tr{display:block!important;width:100%!important;background:var(--cw-card)!important;border:1px solid var(--cw-border)!important;border-radius:16px!important;padding:12px 14px!important;box-shadow:0 7px 22px rgba(0,0,0,.06)!important}
  .table-mobile-cards td{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:14px!important;width:100%!important;min-width:0!important;white-space:normal!important;border:0!important;border-bottom:1px solid var(--cw-border)!important;padding:9px 0!important;text-align:right!important;font-size:14px!important;line-height:1.4!important}
  .table-mobile-cards td:last-child{border-bottom:0!important;padding-bottom:2px!important}
  .table-mobile-cards td::before{content:attr(data-label);display:block;flex:0 0 42%;max-width:42%;text-align:left;color:var(--cw-muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.035em;line-height:1.35}
  .table-mobile-cards td>*{max-width:58%}
  .table-mobile-cards td .form-select,.table-mobile-cards td .form-control{width:100%!important;min-width:0!important}
  .table-mobile-cards td.text-end{justify-content:flex-start!important;flex-wrap:wrap!important;text-align:left!important;padding-top:12px!important}
  .table-mobile-cards td.text-end::before{width:100%;max-width:100%;flex-basis:100%;margin-bottom:4px}
  .table-mobile-cards td.text-end .btn{min-height:42px!important;font-size:13px!important;margin:2px!important}
  .table-mobile-cards tr.mobile-empty-row td{display:block!important;text-align:center!important}
  .table-mobile-cards tr.mobile-empty-row td::before{display:none!important}

  /* Order workflow is vertical blocks on phones/tablets. */
  .status-board{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;overflow:visible!important;padding-bottom:0!important}
  .status-col{width:100%!important;min-width:0!important;border-radius:16px!important;padding:12px!important}
  .status-col h6{font-size:14px!important;margin-bottom:10px!important}
  .order-card{border-radius:14px!important;padding:13px!important;margin-bottom:10px!important}
  .order-card .no{font-size:14px!important}
  .order-card .client{font-size:14px!important;line-height:1.35!important}
  .order-card .meta{font-size:12px!important}
  .order-card .amount{font-size:16px!important}
  .order-card .btn{min-height:42px!important;padding:8px 11px!important;font-size:13px!important}

  /* Forms use one clear column where desktop widths become cramped. */
  .pos-grid{grid-template-columns:1fr!important;gap:14px!important}
  .pos-grid>div{width:100%!important}
  .cart{position:static!important;top:auto!important;width:100%!important}
  .catalog-toolbar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .catalog-toolbar .chip{width:100%!important;justify-content:center!important;text-align:center!important}
  .catalog{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .product-card{min-width:0!important;width:100%!important}

  .modal-dialog{margin:.5rem!important;max-width:calc(100% - 1rem)!important}
  .modal-content{border-radius:18px!important}
  .modal-header,.modal-body,.modal-footer{padding-left:16px!important;padding-right:16px!important}
  .modal-footer{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .modal-footer>*{margin:0!important;width:100%!important}

  /* Sidebar becomes a full touch drawer. */
  .sidebar{width:min(92vw,360px)!important;max-width:360px!important}
  .brand{padding:0 16px!important}
  .side-link{min-height:50px!important;padding:12px 14px!important;border-radius:12px!important;font-size:14px!important}
  .side-icon{width:28px!important;font-size:19px!important}
  .nav-section{font-size:10px!important;padding:16px 14px 7px!important}
  .sidebar-user{min-height:72px!important}

  /* Readable sticky header actions. */
  .mobile-toggle{display:grid!important;flex:0 0 44px!important}
  .searchbox{min-width:0!important;max-width:none!important;flex:1 1 auto!important}
  .searchbox input{width:100%!important;min-width:0!important}
  .top-actions{margin-left:0!important;gap:6px!important;flex:0 0 auto!important}
  .theme-toggle-btn,.pwa-install-btn,.new-order-btn{display:none!important}
  .mobile-logout-btn{display:inline-flex!important;width:44px!important;min-width:44px!important;padding:0!important}
  .mobile-logout-btn span{display:none!important}
}

@media (max-width:560px){
  :root{--cw-topbar-height:62px;--cw-footer-height:50px}
  .topbar{padding:0 8px!important;gap:6px!important}
  .mobile-toggle,.mobile-logout-btn{width:42px!important;min-width:42px!important;height:42px!important;border-radius:12px!important}
  .searchbox input{height:42px!important;font-size:14px!important;padding:0 12px!important}
  .content{padding:14px 10px calc(22px + var(--cw-footer-height))!important}
  .page-title{font-size:24px!important;line-height:1.12!important}
  .page-subtitle{font-size:12.5px!important;line-height:1.45!important}
  .section-card{padding:15px!important;border-radius:16px!important}
  .section-title{font-size:17px!important}
  .section-sub{font-size:12px!important}
  .form-control,.form-select{min-height:50px!important;font-size:16px!important;border-radius:13px!important}
  .btn{min-height:46px!important;border-radius:13px!important}
  .catalog{grid-template-columns:1fr!important}
  .product-card{min-height:94px!important;padding:14px!important}
  .product-card .name{font-size:15px!important}
  .product-card .price{font-size:16px!important}
  .developer-footer{font-size:8.5px!important;padding:5px 6px!important;line-height:1.25!important}
  .developer-footer a{display:none!important}

  .role-recepcion .main{padding-bottom:calc(var(--cw-footer-height) + var(--cw-reception-nav-height))!important}
  .role-recepcion .content{padding-bottom:calc(24px + var(--cw-footer-height) + var(--cw-reception-nav-height))!important}
  .role-recepcion .developer-footer{bottom:var(--cw-reception-nav-height)!important}
  .role-recepcion .reception-banner{display:block!important}
  .role-recepcion .reception-icon{margin-bottom:10px!important}
  .role-recepcion .reception-quick-actions{grid-template-columns:1fr!important;margin:14px 0 0!important}
  .role-recepcion .reception-action{min-height:64px!important;flex-direction:row!important;justify-content:flex-start!important;text-align:left!important;padding:12px 14px!important}
  .role-recepcion .reception-action span{font-size:22px!important}
  .reception-mobile-nav{grid-template-columns:repeat(4,minmax(0,1fr))!important;min-height:82px!important;gap:6px!important}
  .reception-mobile-nav a{min-width:0!important;font-size:10.5px!important;padding:6px 3px!important;line-height:1.15!important}
  .reception-mobile-nav a span{font-size:22px!important}
}
@media (max-width:900px){
  .page-pos .pos-grid .row>[class*="col-md-"]{flex:0 0 100%!important;max-width:100%!important;width:100%!important}
  .page-pos .loyalty-client-strip{width:100%;border-radius:14px;padding:12px 14px}
  .page-pos .totals .r{font-size:14px!important;padding:8px 0!important}
  .page-pos .totals .grand{font-size:19px!important}
}