:root{
 --bg:#f5f7f8;--panel:#fff;--ink:#19363d;--muted:#73868c;--line:#e3eaec;
 --brand:#1e6f78;--brand2:#2b8d90;--soft:#e9f4f3;--danger:#b74444;--warn:#aa7215;
 --shadow:0 12px 30px rgba(25,55,63,.07)
}
*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}
button,input,select{font:inherit}button{cursor:pointer}.shell{height:100vh;display:grid;grid-template-columns:248px 1fr;overflow:hidden}
.sidebar{background:#153d45;color:#fff;padding:22px 16px;display:flex;flex-direction:column}.brand{display:flex;gap:12px;align-items:center;padding:0 8px 24px}
.logo{width:42px;height:42px;border-radius:13px;background:#fff;color:#153d45;display:grid;place-items:center;font-weight:900}.brand-copy strong{display:block}
.brand-copy span{font-size:11px;opacity:.72}nav{display:grid;gap:6px}.nav{border:0;background:transparent;color:#d8e6e8;text-align:left;padding:11px 12px;border-radius:10px}
.nav:hover,.nav.active{background:rgba(255,255,255,.13);color:white}.nav span{margin-left:8px}.foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding:16px 8px 0;display:flex;gap:8px;align-items:center}
.foot span{font-size:10px;font-weight:900;background:#d8f3df;color:#24602f;padding:5px 8px;border-radius:99px}.foot small{opacity:.65}.main{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.topbar{height:102px;background:#fff;border-bottom:1px solid var(--line);padding:0 30px;display:flex;align-items:center;justify-content:space-between;flex:none}
.topbar h1{margin:0;font-size:25px}.topbar p{margin:5px 0 0;color:var(--muted);font-size:13px}.actions{display:flex;gap:10px}
.btn{border:0;border-radius:9px;padding:10px 15px;font-weight:700}.primary{background:var(--brand);color:#fff}.primary:hover{background:var(--brand2)}.ghost{background:#edf2f3;color:#29464d}
.content{padding:24px 30px 34px;overflow:auto}.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.kpi,.card{background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}
.kpi{padding:18px}.kpi small{color:var(--muted);font-weight:700}.kpi strong{display:block;font-size:27px;margin-top:7px}.kpi em{display:block;font-size:12px;color:var(--brand);font-style:normal;margin-top:6px}
.two{display:grid;grid-template-columns:1.35fr .85fr;gap:18px;margin-top:18px}.card{padding:20px}.card h3{margin:0 0 14px}.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:15px;flex-wrap:wrap}
.grow{flex:1}.search{border:1px solid var(--line);background:#fff;border-radius:9px;padding:10px 12px;min-width:240px}.table{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}th{background:#f8fafb;color:#677a80;font-size:11px;text-transform:uppercase}
tr:last-child td{border-bottom:0}.num{text-align:right}.badge{display:inline-block;padding:5px 8px;border-radius:99px;font-size:11px;font-weight:800;background:var(--soft);color:var(--brand)}
.badge.low{background:#fff1dc;color:var(--warn)}.badge.zero{background:#fde7e7;color:var(--danger)}.row-actions{display:flex;gap:6px}.icon{border:0;background:#edf2f3;border-radius:8px;padding:7px 10px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:13px}.full{grid-column:1/-1}label{display:block;font-size:12px;font-weight:700;color:#60767c;margin-bottom:6px}
input,select{width:100%;padding:10px 11px;border:1px solid #dbe4e6;border-radius:8px;background:white}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.modal{position:fixed;inset:0;background:rgba(15,35,40,.45);display:grid;place-items:center;padding:18px;z-index:50}.hidden{display:none!important}.modal-card{width:min(700px,96vw);max-height:90vh;overflow:auto;background:#fff;border-radius:16px;padding:20px;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.modal-head h2{margin:0}.modal-head button{border:0;background:#edf2f3;border-radius:8px;padding:6px 10px;font-size:20px}
.toast{position:fixed;right:24px;bottom:24px;background:#173e45;color:white;padding:12px 15px;border-radius:10px;z-index:60}.stat{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13px}
.sale-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.product-tile{border:1px solid var(--line);border-radius:12px;padding:13px;margin-bottom:9px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.cart-item{display:grid;grid-template-columns:1fr 68px 85px 34px;gap:7px;align-items:center;border-bottom:1px solid var(--line);padding:9px 0}.total{display:flex;justify-content:space-between;font-size:21px;font-weight:900;padding-top:15px}
@media(max-width:960px){.shell{grid-template-columns:76px 1fr}.brand-copy,.nav span,.foot small{display:none}.nav{text-align:center}.kpis{grid-template-columns:1fr 1fr}.two,.sale-grid{grid-template-columns:1fr}}
@media(max-width:680px){.shell{display:block;height:auto;overflow:auto}.sidebar{position:sticky;top:0;z-index:20;padding:8px;height:auto}.brand,.foot{display:none}nav{display:flex;overflow:auto}.nav{min-width:48px}.main{overflow:visible}.topbar{height:auto;padding:15px}.content{padding:15px}.kpis{grid-template-columns:1fr}.form{grid-template-columns:1fr}.full{grid-column:auto}.actions .ghost{display:none}}


.report-panel{display:grid;gap:16px}
.report-filter-card{background:#fff;border:1px solid #ead8c6;border-radius:16px;padding:16px 16px 14px;box-shadow:var(--shadow)}
.segment-row,.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.seg,.chip{border:1px solid #e6c6a0;background:#fff8ef;color:#8a6132;border-radius:10px;padding:9px 13px;font-weight:700}
.seg.active,.chip.active{background:#ef9b47;color:#fff;border-color:#ef9b47}
.report-section-title{margin:12px 0 8px;font-size:12px;font-weight:800;color:#8a6132}
.custom-range{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin-top:12px}
.report-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.report-kpi{background:#fff;border:1px solid #ead8c6;border-radius:15px;padding:16px 18px;box-shadow:var(--shadow)}
.report-kpi small{display:block;color:#8a6132;font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.02em}
.report-kpi strong{display:block;font-size:18px;margin-top:10px;color:#2a2a2a}
.report-kpi em{display:block;margin-top:6px;font-style:normal;color:#b4814e;font-size:12px}
.report-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:16px}
.report-card{border-color:#ead8c6}
.report-card h3{margin-bottom:12px}
.report-span-2{grid-column:span 1}
.chart-wrap{width:100%;overflow:auto}
.chart-svg{width:100%;height:auto;display:block}
.chart-grid{stroke:#ecdcca;stroke-dasharray:3 4;stroke-width:1}
.chart-axis{stroke:#ccb79e;stroke-width:1.2}
.chart-label{font-size:11px;fill:#8a6132}
.chart-value-label{font-size:12px;fill:#8a6132;font-weight:700}
.chart-bar{transition:opacity .15s, transform .15s}
.hoverable{cursor:pointer;transition:opacity .15s, transform .15s}
.hoverable:hover{opacity:.88}
.chart-flex{display:grid;grid-template-columns:1fr;gap:10px;align-items:center}
.legend{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.legend-item{font-size:12px;color:#8a6132;display:flex;align-items:center;gap:6px}
.legend-dot{width:10px;height:10px;border-radius:50%}
.pie-label{font-size:11px;fill:#d8843e}
.donut-center-big{font-size:26px;fill:#2a2a2a;font-weight:800}
.donut-center-small{font-size:12px;fill:#8a6132}
.empty-chart{display:grid;place-items:center;height:220px;color:#8a6132;background:#fffaf5;border:1px dashed #ead8c6;border-radius:12px}
.chart-tooltip{position:fixed;z-index:120;background:#173e45;color:#fff;padding:10px 12px;border-radius:10px;box-shadow:0 14px 30px rgba(0,0,0,.18);font-size:12px;line-height:1.35;pointer-events:none;max-width:220px}
@media(max-width:1200px){.report-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:960px){.report-grid{grid-template-columns:1fr}.report-kpis{grid-template-columns:1fr 1fr}.custom-range{grid-template-columns:1fr 1fr}.report-span-2{grid-column:auto}}
@media(max-width:680px){.report-kpis{grid-template-columns:1fr}.custom-range{grid-template-columns:1fr}}


/* =========================
   R3 REPORTS BLUE COMPACT
   ========================= */
.report-panel{display:grid;gap:12px}
.report-filter-card{background:#f4f8fa;border:1px solid #bfd1d8;border-radius:14px;padding:12px 14px;box-shadow:0 8px 20px rgba(10,58,70,.06)}
.segment-row,.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.seg,.chip{border:1px solid #adc6cf;background:#ffffff;color:#174b57;border-radius:10px;padding:8px 12px;font-weight:800;line-height:1.1}
.seg.active,.chip.active{background:#1a5a67;color:#fff;border-color:#1a5a67}
.report-section-title{margin:10px 0 6px;font-size:12px;font-weight:800;color:#1a5a67}
.custom-range{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin-top:10px}
.custom-range input{height:40px}
.custom-range .btn.primary{height:40px;min-width:84px;padding:0 14px}
.report-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.report-kpi{background:#fff;border:1px solid #bfd1d8;border-radius:14px;padding:12px 14px;box-shadow:0 8px 20px rgba(10,58,70,.05);min-height:88px}
.report-kpi small{display:block;color:#51717a;font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.02em}
.report-kpi strong{display:block;font-size:18px;margin-top:10px;color:#0f3640;line-height:1.1}
.report-kpi em{display:block;margin-top:5px;font-style:normal;color:#447180;font-size:12px}
.report-grid{display:grid;grid-template-columns:1.45fr .95fr;gap:12px}
.report-card{border:1px solid #bfd1d8;border-radius:14px;padding:14px 16px;box-shadow:0 8px 20px rgba(10,58,70,.05)}
.report-card h3{margin:0 0 8px;color:#0f3640;font-size:18px}
.chart-wrap{width:100%;overflow:hidden}
.chart-svg{width:100%;height:auto;display:block}
.chart-grid{stroke:#d2e1e6;stroke-dasharray:3 4;stroke-width:1}
.chart-axis{stroke:#9fb9c2;stroke-width:1.2}
.chart-label{font-size:10px;fill:#4b6c75}
.chart-value-label{font-size:11px;fill:#1a5a67;font-weight:700}
.hoverable{cursor:pointer;transition:opacity .15s, transform .15s}
.hoverable:hover{opacity:.9}
.pie-label{font-size:11px;fill:#2b6271}
.legend{display:flex;gap:8px 12px;flex-wrap:wrap;justify-content:center;margin-top:2px}
.legend-item{font-size:12px;color:#355a65;display:flex;align-items:center;gap:6px}
.legend-dot{width:10px;height:10px;border-radius:50%}
.donut-center-big{font-size:24px;fill:#103942;font-weight:900}
.donut-center-small{font-size:11px;fill:#54757d}
.empty-chart{display:grid;place-items:center;height:190px;color:#355a65;background:#f7fbfc;border:1px dashed #bfd1d8;border-radius:12px}
.chart-tooltip{position:fixed;z-index:120;background:#133f49;color:#fff;padding:10px 12px;border-radius:10px;box-shadow:0 14px 30px rgba(0,0,0,.18);font-size:12px;line-height:1.35;pointer-events:none;max-width:220px}
body .content{padding:18px 22px 22px}
body .topbar{height:88px}
body .topbar h1{font-size:22px}
body .topbar p{font-size:12px}
body .btn{padding:9px 14px}
body .kpis{gap:12px}
@media(min-width:1100px){.report-panel{gap:10px}.report-filter-card{padding:10px 12px}.custom-range{margin-top:8px}.report-kpis{gap:10px}.report-kpi{padding:10px 12px;min-height:82px}.report-card{padding:12px 14px}.report-card h3{font-size:16px;margin-bottom:6px}.report-grid{gap:10px}.pie-svg{max-height:220px}}
@media(max-width:1200px){.report-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:960px){.report-grid{grid-template-columns:1fr}.report-kpis{grid-template-columns:1fr 1fr}.custom-range{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.report-kpis{grid-template-columns:1fr}.custom-range{grid-template-columns:1fr}}

/* R4 distinct blue chart shades */
.legend-item{color:#244f5b}
.pie-label{fill:#2e6573}
.chart-tooltip{background:#0f3f4d}


/* R5 Inventory MedStudio-like */
.inventory-page{display:grid;gap:16px}
.inventory-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.inventory-head h2{margin:0;font-size:24px}
.inventory-head p{margin:4px 0 0;color:#60767c;font-size:14px}
.inventory-search-wrap{max-width:420px}
.inventory-search{width:100%;background:#fff;padding-left:14px}
.inventory-table{border-radius:16px;overflow:auto}
.inventory-table table{min-width:980px}
.inventory-table th{font-size:11px}
.inventory-table td{vertical-align:middle}
.color-cell{display:flex;align-items:center;gap:8px;font-weight:500}
.color-dot{width:16px;height:16px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.08)}
.inv-actions{gap:8px}
.inv-btn{border:1px solid #bfd1d8;background:#fff;border-radius:12px;padding:8px 14px;font-weight:700;color:#0f5d67}
.inv-btn.edit:hover{background:#eef8fa}
.inv-btn.delete{color:#c65454;border-color:#efc9c9}
.inv-btn.delete:hover{background:#fff1f1}
.inv-zero{color:#b84c4c;font-weight:800}
.inv-add-btn{white-space:nowrap}
.inventory-modal-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.inventory-modal-form .full{grid-column:1/-1}
.inventory-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.inv-tab{border:1px solid #b7cdd4;background:#fff;border-radius:12px;padding:11px 14px;font-weight:800;color:#546a70}
.inv-tab.active{background:#eef8fa;color:#145c66;border-color:#1e808d}
.inv-modal-layout{gap:14px}
.note-panel{background:#f2f5f5;border-radius:12px;padding:14px;color:#6c7d80;font-size:12px;line-height:1.35}
#modal .modal-card{width:min(760px,96vw);padding:26px}
#modal .modal-head{margin-bottom:18px}
#modal .modal-head h2{font-size:22px}
@media(max-width:960px){.inventory-head{flex-direction:column;align-items:stretch}.inventory-search-wrap{max-width:none}}


/* R6 Clientes estilo MedStudio */
.customers-page{display:grid;gap:16px}
.customers-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.customers-head h2{margin:0;font-size:24px}
.customers-head p{margin:4px 0 0;color:#60767c;font-size:14px}
.customers-search-wrap{max-width:410px}
.customer-search{width:100%;background:#fff}
.customers-table{border-radius:16px;overflow:auto}
.customers-table table{min-width:920px}
.customers-table th{font-size:11px}
.customers-table td{vertical-align:middle}
.customer-actions{justify-content:flex-end}
.customer-add-btn{white-space:nowrap}
.customer-modal-form{display:grid;gap:14px}
.customer-modal-form label{font-size:13px;color:#27383d}
.customer-modal-form input,
.customer-modal-form textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid #cbdadd;
  border-radius:9px;
  background:#fbfdfd;
  font:inherit;
  color:#20343a;
}
.customer-modal-form textarea{resize:vertical;min-height:86px}
.customer-modal-actions{margin-top:4px}
@media(max-width:960px){
  .customers-head{flex-direction:column;align-items:stretch}
  .customers-search-wrap{max-width:none}
}


/* R7 Ventas estilo MedStudio */
.sales-page{display:grid;gap:16px}
.sales-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.sales-head h2{margin:0;font-size:24px}
.sales-head p{margin:4px 0 0;color:#60767c;font-size:14px}
.sale-register-btn{white-space:nowrap}
.sales-table{border-radius:16px;overflow:auto}
.sales-table table{min-width:1280px}
.sales-table td{vertical-align:middle}
.sale-product-cell{max-width:310px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sale-profit{color:#196b74}
.sale-actions{justify-content:flex-end;white-space:nowrap}
.sale-modal-form{display:grid;gap:16px}
.sale-modal-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.sale-modal-top.two-cols{grid-template-columns:1fr 1fr}
.sale-modal-form label{font-size:13px;font-weight:800;color:#27383d}
.sale-modal-form select,.sale-modal-form input{width:100%;padding:11px 12px;border:1px solid #cbdadd;border-radius:9px;background:#fff;color:#20343a;font:inherit}
.sale-product-box{background:#f4f7f7;border:1px solid #d8e3e5;border-radius:14px;padding:16px;display:grid;gap:10px}
.sale-product-picker{display:grid;grid-template-columns:1fr 90px;gap:10px}
.sale-line-summary{background:#f2f5f5;border-radius:12px;padding:14px;color:#60767c;line-height:1.4}
.sale-line-summary span{font-size:13px}
.discount-block{display:grid;gap:7px}
.discount-controls{display:grid;grid-template-columns:80px 100px auto;gap:8px;align-items:center}
.sale-warning{background:#fff0ee;color:#c94e41;border-radius:11px;padding:13px 15px;font-size:13px;line-height:1.35}
@media(max-width:960px){.sales-head{flex-direction:column;align-items:stretch}.sale-modal-top,.sale-modal-top.two-cols{grid-template-columns:1fr}.sale-product-picker{grid-template-columns:1fr 80px}}


/* R8 carrito + facturas */
.sale-product-picker{grid-template-columns:1fr 85px 110px}
.cart-sale-box{border:1px solid #d8e3e5;border-radius:14px;background:#fff;overflow:hidden}
.cart-sale-head{padding:12px 14px;background:#f4f7f7;display:flex;justify-content:space-between;color:#355a65}
.draft-cart-empty{padding:22px;text-align:center;color:#708388}
.draft-cart-rows{padding:0 14px}
.draft-cart-row{display:grid;grid-template-columns:1fr 72px 105px 34px;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid #e5ecee}
.draft-cart-row input{padding:8px}
.draft-cart-total{display:flex;justify-content:space-between;padding:14px 16px;font-size:18px;background:#f8fbfb}
#submitSale:disabled{opacity:.45;cursor:not-allowed}
.invoices-page{display:grid;gap:16px}
.invoices-head h2{margin:0;font-size:24px}.invoices-head p{margin:4px 0 0;color:#60767c;font-size:14px}
.invoices-search-wrap{max-width:410px}.invoices-search-wrap .search{width:100%}
.invoices-table{border-radius:16px;overflow:auto}.invoices-table table{min-width:1050px}
.invoice-view{display:grid;gap:22px}.invoice-brand-row{display:flex;justify-content:space-between;gap:20px}.invoice-brand{display:flex;gap:12px;align-items:center}.invoice-logo{width:42px;height:42px;border-radius:11px;background:#17616d;color:#fff;display:grid;place-items:center;font-weight:900}.invoice-brand strong{display:block;font-size:20px}.invoice-brand small{display:block;color:#718389}.invoice-meta{text-align:right;line-height:1.35}.invoice-lines{border-top:2px solid #17616d}.invoice-line{display:grid;grid-template-columns:1fr 70px 110px 110px;gap:10px;padding:9px 4px;border-bottom:1px solid #dde6e8}.invoice-line-head{font-weight:800}.invoice-total{margin-left:auto;width:280px;border-top:2px solid #17616d;padding:10px 4px;display:flex;justify-content:space-between;font-size:18px}
@media(max-width:960px){.sale-product-picker{grid-template-columns:1fr 75px}.sale-product-picker .btn{grid-column:1/-1}.draft-cart-row{grid-template-columns:1fr 65px 90px 34px}.invoice-brand-row{flex-direction:column}.invoice-meta{text-align:left}}


/* R9 logo + settings */
.brand{align-items:center}
.brand-mark{width:52px;display:flex;align-items:center;justify-content:center;flex:0 0 52px}
.brand-logo-image{width:52px;height:52px;object-fit:contain;border-radius:14px;background:#fff;padding:4px;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.brand-copy strong,.brand-copy span{display:block}
.brand-copy strong{font-size:18px}
.brand-copy span{font-size:13px;opacity:.9}
.settings-page{display:grid;gap:16px;max-width:980px}
.settings-grid{display:grid;grid-template-columns:360px 1fr;gap:16px;align-items:start}
.logo-settings-card,.settings-form-card{background:#fff;border:1px solid #d9e4e7;border-radius:18px;padding:20px}
.logo-preview-wrap{display:grid;gap:14px}
.logo-preview-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:240px;border:1px dashed #b9cdd2;border-radius:18px;background:#f8fbfb;padding:18px}
.logo-preview-box img{max-width:220px;max-height:180px;object-fit:contain}
.logo-preview-box .muted{color:#70858b;font-size:13px;text-align:center}
.logo-actions{display:grid;gap:10px}
.logo-actions input[type="file"]{display:block;width:100%;padding:10px;border:1px solid #cbdadd;border-radius:10px;background:#fff}
.inline-actions{display:flex;gap:10px;flex-wrap:wrap}
.invoice-brand-logo{width:46px;height:46px;object-fit:contain;border-radius:12px;background:#fff;padding:3px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.invoice-logo-fallback{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:#0e4f5d;color:#fff;font-weight:800}
@media(max-width:900px){.settings-grid{grid-template-columns:1fr}.logo-preview-box{min-height:200px}}


/* R10 mockup sidebar + backend version */
.shell{min-height:100vh;background:#eef4f6}
.sidebar{position:relative;background:radial-gradient(circle at 85% 95%, rgba(20,131,152,.28) 0%, rgba(20,131,152,.08) 30%, rgba(20,131,152,0) 31%), linear-gradient(180deg,#053e4d 0%, #032f3c 100%);padding:26px 18px 18px;gap:10px;overflow:hidden}
.sidebar::before,.sidebar::after{content:'';position:absolute;right:-110px;border-radius:50%;pointer-events:none}
.sidebar::before{bottom:120px;width:280px;height:280px;background:rgba(15,113,130,.18)}
.sidebar::after{bottom:40px;width:360px;height:220px;background:rgba(4,76,93,.22)}
.sidebar>*{position:relative;z-index:1}
.sidebar .brand{background:linear-gradient(135deg,#f7fbfc 0%,#edf9fb 65%,#e5f3f6 100%);border-radius:28px;padding:22px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;box-shadow:0 16px 32px rgba(0,0,0,.14);margin:0 4px 18px}
.sidebar .brand-mark{width:100px;height:100px;flex:0 0 100px}
.sidebar .brand-logo-image{width:100px;height:100px;object-fit:contain;border-radius:22px;background:transparent;padding:0;box-shadow:none}
.sidebar #brandLogoFallback.logo{width:100px;height:100px;border-radius:22px;font-size:34px;background:linear-gradient(135deg,#0b5d6e,#1bc4d7);color:#fff}
.sidebar .brand-copy strong{display:block;color:#0a2f5d;font-size:22px;font-weight:800;line-height:1.05}
.sidebar .brand-copy span{display:block;color:#244d68;font-size:14px;opacity:1;margin-top:4px}
#nav{display:grid;gap:14px}
.nav{position:relative;display:flex;align-items:center;gap:16px;width:100%;padding:14px 18px;border-radius:24px;border:1px solid transparent;background:transparent;color:#edf9fc;font-size:16px;font-weight:500;text-align:left;box-shadow:none;transition:.18s ease;min-height:74px}
.nav:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.06)}
.nav .nav-icon{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.07);font-size:24px;color:#f3fbfd;flex:0 0 56px;backdrop-filter:blur(6px)}
.nav .nav-label{font-size:18px;line-height:1.1}
.nav.active{background:linear-gradient(90deg,rgba(25,171,194,.58) 0%, rgba(35,179,206,.78) 100%);border-color:rgba(140,245,255,.36);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 22px rgba(0,0,0,.18)}
.nav.active::before{content:'';position:absolute;left:8px;top:16px;bottom:16px;width:8px;border-radius:12px;background:#2ce7ef}
.nav.active .nav-icon{background:#f8fdfe;color:#0b5262;border-color:rgba(11,82,98,.08)}
.foot{margin-top:auto;padding:24px 8px 10px;border-top:1px solid rgba(255,255,255,.18);display:flex;align-items:center;gap:18px;color:#acc8d1}
.foot-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:#d8f8e8;color:#0d6a4f;font-weight:800;letter-spacing:.4px}
.foot-badge i{display:inline-block;width:14px;height:14px;border-radius:50%;background:#14a54f}
.foot small{font-size:16px;color:#a8bec6}
.invoice-brand-logo{background:#fff}
.logo-preview-box img{background:#fff;border-radius:18px;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
@media(max-width:960px){
  .sidebar .brand{border-radius:22px;padding:16px 14px}
  .sidebar .brand-mark,.sidebar .brand-logo-image,.sidebar #brandLogoFallback.logo{width:76px;height:76px}
  .sidebar .brand-copy strong{font-size:18px}.sidebar .brand-copy span{font-size:12px}
  .nav{min-height:64px;padding:11px 14px;gap:12px}.nav .nav-icon{width:46px;height:46px;font-size:20px}.nav .nav-label{font-size:16px}
}


/* R10 MENU FIX1 - slimmer sidebar closer to mockup */
.shell{grid-template-columns:224px 1fr}
.sidebar{padding:14px 12px 12px;gap:8px;overflow:auto}
.sidebar::before{bottom:92px;width:210px;height:210px;opacity:.9}
.sidebar::after{bottom:18px;width:270px;height:170px;opacity:.9}
.sidebar .brand{border-radius:22px;padding:14px 12px;gap:10px;margin:0 2px 12px}
.sidebar .brand-mark{width:74px;height:74px;flex:0 0 74px}
.sidebar .brand-logo-image{width:74px;height:74px;border-radius:16px}
.sidebar #brandLogoFallback.logo{width:74px;height:74px;border-radius:16px;font-size:28px}
.sidebar .brand-copy strong{font-size:18px}
.sidebar .brand-copy span{font-size:12px;margin-top:2px}
#nav{gap:8px}
.nav{padding:10px 12px;gap:12px;min-height:56px;border-radius:20px}
.nav .nav-icon{width:42px;height:42px;flex:0 0 42px;border-radius:14px;font-size:18px}
.nav .nav-label{font-size:15px;font-weight:600}
.nav.active::before{left:5px;top:12px;bottom:12px;width:6px;border-radius:8px}
.foot{padding:14px 4px 6px;margin-top:12px;gap:10px}
.foot-badge{padding:8px 14px;font-size:14px}
.foot-badge i{width:11px;height:11px}
.foot small{font-size:13px}
@media(max-height:920px){
  .sidebar{padding:12px 10px 10px}
  .sidebar .brand{padding:12px 10px;gap:8px}
  .sidebar .brand-mark,.sidebar .brand-logo-image,.sidebar #brandLogoFallback.logo{width:66px;height:66px}
  .sidebar .brand-copy strong{font-size:16px}
  .sidebar .brand-copy span{font-size:11px}
  #nav{gap:6px}
  .nav{min-height:50px;padding:8px 10px;border-radius:18px}
  .nav .nav-icon{width:38px;height:38px;flex-basis:38px;font-size:17px}
  .nav .nav-label{font-size:14px}
  .foot{padding-top:10px}
}
@media(max-width:960px){
  .shell{grid-template-columns:86px 1fr}
  .sidebar{padding:10px 8px;overflow:visible}
  .sidebar .brand{margin:0 0 8px;padding:10px 6px;border-radius:18px}
  .sidebar .brand-mark,.sidebar .brand-logo-image,.sidebar #brandLogoFallback.logo{width:56px;height:56px}
  .nav{min-height:48px;padding:8px 10px}.nav .nav-icon{width:36px;height:36px;flex-basis:36px;font-size:16px}
}


/* R11 Productos tipo Catálogo */
.catalog-page,.orders-page{display:grid;gap:16px}.catalog-head,.orders-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}.catalog-head h2,.orders-head h2{margin:0;font-size:24px}.catalog-head p,.orders-head p{margin:4px 0 0;color:#60767c}.catalog-search-wrap{max-width:430px}.catalog-table table{min-width:1260px}.catalog-table td{vertical-align:middle}.catalog-photo{width:42px;height:42px;object-fit:cover;border-radius:50%;border:1px solid #d8e5e8;background:#fff}.catalog-photo-large{width:72px;height:72px;border-radius:18px}.catalog-photo-fallback{display:grid;place-items:center;background:#e9f5f7;color:#17616d;font-weight:900}.catalog-category-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#2b8797;margin-right:8px}.catalog-status{font-weight:800}.catalog-status.active{color:#178347}.catalog-status.inactive{color:#9b6a2e}.catalog-actions{white-space:nowrap}.catalog-modal-form{display:grid;gap:16px}.catalog-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.catalog-form-grid .full{grid-column:1/-1}.catalog-photo-picker{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.link-danger{border:0;background:transparent;color:#c84a4a;font-weight:700}.catalog-active-row{display:flex!important;align-items:center;gap:10px}.catalog-active-row input{width:auto}
/* R11 Ventas tipo Pedidos */
.orders-filter-row{display:grid;grid-template-columns:minmax(260px,340px) 220px;gap:10px;max-width:580px}.orders-table table{min-width:1050px}.orders-table td{vertical-align:middle}.order-status-select{border:0;border-radius:999px;padding:7px 30px 7px 12px;font-weight:700;background:#eef3f3}.status-pagado,.status-entregado{background:#e3f4e9;color:#157443}.status-pendiente{background:#fff0df;color:#b86a12}.status-preparando,.status-listo{background:#e4f2f8;color:#17637c}.status-cancelado{background:#fdeaea;color:#ae4040}.order-modal-form,.order-view{display:grid;gap:16px}.order-grid-three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.order-soft-panel{background:#f3f8f9;border:1px solid #d9e8eb;border-radius:14px;padding:16px;display:grid;gap:12px}.currency-choice,.category-filter-row{display:flex;gap:8px;flex-wrap:wrap}.currency-btn,.category-filter{border:1px solid #bcd2d7;background:#fff;color:#42646d;border-radius:10px;padding:8px 14px;font-weight:700}.currency-btn.active,.category-filter.active{background:#1c7d8b;color:#fff;border-color:#1c7d8b}.exchange-rate-wrap{max-width:360px}.order-product-picker,.order-add-line{display:grid;grid-template-columns:1fr 80px 110px;gap:10px;align-items:end}.order-lines{border-top:2px solid #17616d}.order-line{display:grid;grid-template-columns:1fr 80px 120px 120px 36px;gap:10px;padding:9px 4px;border-bottom:1px solid #dde6e8;align-items:center}.order-line-head{font-weight:800}.mini-qty{padding:7px!important}.order-total-row{margin-left:auto;width:315px;display:flex;justify-content:space-between;padding:7px 4px;border-bottom:1px solid #dce7e9}.order-total-row.grand{border-top:2px solid #17616d;font-size:18px}.order-bs-total{margin-left:auto;width:315px;padding:8px 4px;font-weight:800;color:#17616d}.order-view-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}.order-view-actions>div{display:flex;gap:10px}@media(max-width:960px){.catalog-head,.orders-head{flex-direction:column;align-items:stretch}.catalog-form-grid,.order-grid-three{grid-template-columns:1fr}.orders-filter-row{grid-template-columns:1fr;max-width:none}.order-product-picker,.order-add-line{grid-template-columns:1fr 80px}.order-product-picker .btn,.order-add-line .btn{grid-column:1/-1}.order-line{grid-template-columns:1fr 60px 90px 90px 34px}.order-view-actions{flex-direction:column;align-items:stretch}}


/* ==========================================================
   R12 MOBILE RESPONSIVE + OFF-CANVAS NAV
   ========================================================== */

.mobile-menu-toggle,
.sidebar-backdrop{display:none}

@media (max-width:680px){
  html,body{
    width:100%;
    min-width:0;
    height:auto;
    overflow-x:hidden;
    background:#eef4f6;
  }

  body.mobile-menu-open{overflow:hidden}

  .shell{
    display:block !important;
    width:100%;
    min-height:100vh;
    height:auto !important;
    overflow:visible !important;
  }

  /* Off-canvas menu */
  .sidebar{
    position:fixed !important;
    inset:0 auto 0 0;
    z-index:1000;
    width:min(86vw,320px);
    height:100dvh !important;
    padding:14px 12px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:18px 0 50px rgba(2,35,43,.25);
  }
  .sidebar.mobile-open{transform:translateX(0)}

  .sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:990;
    background:rgba(7,31,38,.48);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }
  .sidebar-backdrop.visible{
    opacity:1;
    pointer-events:auto;
  }

  .sidebar .brand{
    display:flex !important;
    flex-direction:row !important;
    text-align:left !important;
    align-items:center !important;
    padding:12px !important;
    gap:12px !important;
    margin:0 0 12px !important;
    border-radius:20px !important;
  }
  .sidebar .brand-mark,
  .sidebar .brand-logo-image,
  .sidebar #brandLogoFallback.logo{
    width:62px !important;
    height:62px !important;
    flex:0 0 62px !important;
  }
  .sidebar .brand-copy{
    display:block !important;
    min-width:0;
  }
  .sidebar .brand-copy strong{
    display:block !important;
    font-size:17px !important;
  }
  .sidebar .brand-copy span{
    display:block !important;
    font-size:11px !important;
  }

  #nav{
    display:grid !important;
    grid-template-columns:1fr;
    gap:6px !important;
    overflow:visible !important;
  }
  .nav{
    min-width:0 !important;
    min-height:50px !important;
    width:100% !important;
    padding:7px 10px !important;
    gap:12px !important;
    border-radius:16px !important;
    text-align:left !important;
  }
  .nav .nav-icon{
    width:38px !important;
    height:38px !important;
    flex:0 0 38px !important;
    font-size:17px !important;
    border-radius:12px !important;
  }
  .nav .nav-label,
  .nav span{
    display:inline !important;
    margin-left:0 !important;
    font-size:15px !important;
  }

  .foot{
    display:flex !important;
    margin-top:14px !important;
    padding:12px 4px 4px !important;
  }
  .foot small{display:inline !important}

  /* App body occupies full mobile width */
  .main{
    width:100%;
    min-width:0;
    overflow:visible !important;
  }

  .topbar{
    position:sticky;
    top:0;
    z-index:80;
    height:auto !important;
    min-height:72px;
    padding:10px 12px !important;
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    box-shadow:0 3px 16px rgba(18,56,65,.08);
  }
  .mobile-menu-toggle{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border:0;
    border-radius:12px;
    background:#e8f3f5;
    color:#0b5562;
    font-size:22px;
    font-weight:800;
    line-height:1;
  }
  .topbar-copy{
    min-width:0;
  }
  .topbar h1,
  body .topbar h1{
    font-size:18px !important;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .topbar p,
  body .topbar p{
    font-size:10px !important;
    margin-top:3px !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .actions{
    gap:6px;
    justify-self:end;
  }
  .actions .ghost{display:none !important}
  .actions .btn{
    padding:9px 11px !important;
    font-size:12px;
    white-space:nowrap;
  }

  .content,
  body .content{
    padding:12px !important;
    overflow:visible !important;
  }

  .kpis{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .kpi{
    padding:14px !important;
    min-height:0;
  }
  .kpi strong{font-size:24px}

  .two,
  .sale-grid,
  .report-grid,
  .settings-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .two{margin-top:12px}

  .card,
  .report-card,
  .logo-settings-card,
  .settings-form-card{
    padding:14px !important;
    border-radius:14px !important;
  }

  /* Tables scroll inside their own cards instead of widening the page */
  .table,
  .inventory-table,
  .customers-table,
  .sales-table,
  .invoices-table,
  .catalog-table,
  .orders-table{
    width:100%;
    max-width:100%;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  table{
    width:max-content;
    min-width:760px;
  }
  .catalog-table table{min-width:1180px}
  .orders-table table{min-width:980px}

  .toolbar,
  .inventory-head,
  .customers-head,
  .sales-head,
  .catalog-head,
  .orders-head{
    align-items:stretch !important;
  }
  .inventory-head,
  .customers-head,
  .sales-head,
  .catalog-head,
  .orders-head{
    flex-direction:column !important;
  }
  .inventory-search-wrap,
  .customers-search-wrap,
  .invoices-search-wrap,
  .catalog-search-wrap,
  .orders-filter-row{
    max-width:none !important;
    width:100%;
  }
  .search{
    min-width:0 !important;
    width:100% !important;
  }

  .report-kpis{
    grid-template-columns:1fr !important;
  }
  .custom-range{
    grid-template-columns:1fr !important;
  }
  .chart-wrap{overflow-x:auto !important}

  /* Modal becomes phone-friendly */
  .modal{
    padding:8px !important;
    align-items:end;
  }
  .modal-card,
  #modal .modal-card{
    width:100% !important;
    max-width:none !important;
    max-height:92dvh !important;
    padding:16px !important;
    border-radius:20px 20px 12px 12px !important;
  }
  .modal-head{
    position:sticky;
    top:-16px;
    z-index:2;
    background:#fff;
    padding:4px 0 10px;
  }
  .modal-head h2,
  #modal .modal-head h2{
    font-size:18px !important;
  }

  .form,
  .inventory-modal-form,
  .catalog-form-grid,
  .sale-modal-top,
  .sale-modal-top.two-cols,
  .order-grid-three{
    grid-template-columns:1fr !important;
  }
  .full,
  .inventory-modal-form .full,
  .catalog-form-grid .full{
    grid-column:auto !important;
  }

  .sale-product-picker,
  .order-product-picker,
  .order-add-line{
    grid-template-columns:1fr 76px !important;
  }
  .sale-product-picker .btn,
  .order-product-picker .btn,
  .order-add-line .btn{
    grid-column:1/-1 !important;
  }

  .draft-cart-row{
    grid-template-columns:minmax(0,1fr) 58px 76px 32px !important;
    gap:6px !important;
    font-size:12px;
  }
  .order-line{
    min-width:690px;
  }
  .order-lines{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .invoice-brand-row{
    flex-direction:column !important;
  }
  .invoice-meta{text-align:left !important}
  .invoice-line{
    min-width:560px;
  }
  .invoice-lines{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .invoice-total,
  .order-total-row,
  .order-bs-total{
    width:100% !important;
  }

  .form-actions{
    flex-wrap:wrap;
  }
  .form-actions .btn{
    flex:1 1 130px;
  }

  .toast{
    left:12px;
    right:12px;
    bottom:12px;
    text-align:center;
  }
}

@media (max-width:390px){
  .topbar{
    grid-template-columns:40px minmax(0,1fr) auto;
    gap:7px;
  }
  .mobile-menu-toggle{
    width:40px;
    height:40px;
  }
  .actions .btn{
    padding:8px 9px !important;
    font-size:11px;
  }
  .content,body .content{padding:10px !important}
}