/* Demo Comida Rapida - EmpresaFacil
   Sistema de demostracion. Sin librerias externas: iconos propios en sprite SVG
   y tipografia autohospedada del sitio. */

:root { --ink:#24251f; --muted:#6f7069; --paper:#f7f6f1; --panel:#fff; --line:#e5e3d9; --orange:#f06426; --orange-soft:#fff0e7; --green:#2f9460; --amber:#d99420; --red:#d24a46; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; font-size:14px; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; }
h1,h2,h3,p,ul,figure { margin:0; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
[hidden] { display:none !important; }
body.con-modal { overflow:hidden; }

/* Iconos */
.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.ic { width:1.15em; height:1.15em; flex:none; vertical-align:-0.16em; }
.ic.grande { width:1.9em; height:1.9em; }

.app-shell { min-height:100vh; display:flex; }

/* ---------- barra lateral ---------- */
.sidebar { position:fixed; inset:0 auto 0 0; width:252px; background:#20221d; color:#fff; padding:24px 16px 16px; display:flex; flex-direction:column; z-index:30; }
.brand { display:flex; align-items:center; gap:11px; padding:0 8px 24px; }
.brand-mark,.mobile-brand b { width:38px; height:38px; background:var(--orange); border-radius:11px; display:grid; place-items:center; color:#fff; font-weight:900; font-size:21px; transform:rotate(-5deg); }
.brand-mark.has-logo { overflow:hidden; background:#fff; transform:none; }
.brand-mark img { width:100%; height:100%; object-fit:contain; }
.brand strong { display:block; font-size:17px; letter-spacing:1.4px; }
.brand span { display:block; color:#9b9d94; font-size:12px; margin-top:2px; }
.branch { background:#2c2e29; border:1px solid #3a3c35; border-radius:11px; padding:11px; display:flex; align-items:center; gap:9px; margin-bottom:20px; color:#8c8e85; }
.branch .pulse { width:8px; height:8px; border-radius:50%; background:#55c484; box-shadow:0 0 0 4px #55c48422; }
.branch div { flex:1; }
.branch small { display:block; color:#73d59c; font-size:9.5px; font-weight:800; letter-spacing:1px; }
.branch strong { font-size:13px; color:#fff; }
.sidebar nav p { color:#75776f; font-size:10px; font-weight:800; letter-spacing:1.3px; margin:18px 10px 8px; }
.sidebar nav button { width:100%; border:0; background:transparent; color:#bcbeb6; display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; margin:2px 0; text-align:left; font-size:13.5px; font-weight:600; }
.sidebar nav button .ic { width:19px; height:19px; }
.sidebar nav button span { flex:1; }
.sidebar nav button em { font-style:normal; background:#41433d; color:#e2e3dd; min-width:22px; height:20px; padding:0 6px; border-radius:10px; display:grid; place-items:center; font-size:11px; font-weight:700; }
.sidebar nav button:hover { background:#2a2c27; color:#fff; }
.sidebar nav button.active { background:var(--orange); color:#fff; box-shadow:0 8px 20px #f0642635; }
.sidebar nav button.active em { background:#ffffff33; color:#fff; }
.sidebar-footer { border-top:1px solid #373933; margin-top:auto; padding:16px 6px 0; display:flex; align-items:center; gap:10px; color:#777971; }
.avatar { width:36px; height:36px; border-radius:50%; background:#f2c7aa; color:#8e3d18; display:grid; place-items:center; font-weight:800; font-size:12px; }
.sidebar-footer div:nth-child(2) { flex:1; }
.sidebar-footer strong,.sidebar-footer span { display:block; font-size:12px; color:#fff; }
.sidebar-footer span { color:#8b8d85; margin-top:2px; font-size:11px; }

/* ---------- cabecera ---------- */
.workspace { margin-left:252px; min-height:100vh; width:calc(100% - 252px); }
.topbar { height:68px; background:#fff; border-bottom:1px solid var(--line); padding:0 30px; display:flex; align-items:center; justify-content:flex-end; gap:26px; position:sticky; top:0; z-index:20; }
.demo-back { margin-right:auto; display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:9px; padding:9px 13px; text-decoration:none; color:var(--muted); font-size:12.5px; font-weight:650; }
.demo-back:hover { border-color:var(--orange); color:var(--orange); }
.shift { display:flex; align-items:center; gap:9px; border-right:1px solid var(--line); padding-right:26px; }
.online-dot { width:8px; height:8px; background:var(--green); border-radius:50%; }
.shift small,.shift strong { display:block; }
.shift small { color:var(--green); font-weight:800; letter-spacing:.6px; font-size:10px; }
.shift strong { font-size:12.5px; margin-top:2px; }
.top-actions { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12.5px; }
.top-actions strong { color:var(--ink); }
.top-actions button { position:relative; margin-left:8px; width:36px; height:36px; border:1px solid var(--line); background:#fff; border-radius:10px; color:var(--muted); display:grid; place-items:center; }
.top-actions button .ic { width:17px; height:17px; }
.top-actions button em { position:absolute; right:-5px; top:-6px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--orange); color:#fff; font-size:10px; font-weight:700; font-style:normal; display:grid; place-items:center; }
.mobile-brand { display:none; }

/* ---------- guia de la demo ---------- */
.guia { display:flex; align-items:center; gap:18px; background:#fffaf6; border-bottom:1px solid #f2ddcd; padding:11px 30px; }
.guia-titulo { font-size:12px; font-weight:800; color:#a35317; letter-spacing:.2px; flex:none; }
.guia.completa .guia-titulo { color:var(--green); }
.guia-pasos { display:flex; align-items:center; gap:20px; list-style:none; margin:0; padding:0; flex:1; flex-wrap:wrap; }
.guia-pasos li { display:flex; align-items:center; gap:8px; font-size:12.5px; color:#8a7a6d; }
.guia-pasos i { width:21px; height:21px; flex:none; border-radius:50%; border:1.5px solid #e2c6ae; display:grid; place-items:center; font-style:normal; }
.guia-pasos i b { font-size:11px; font-weight:800; color:#b98a5f; }
.guia-pasos i .ic { display:none; width:12px; height:12px; }
.guia-pasos li.hecho { color:var(--green); font-weight:650; }
.guia-pasos li.hecho i { background:var(--green); border-color:var(--green); color:#fff; }
.guia-pasos li.hecho i b { display:none; }
.guia-pasos li.hecho i .ic { display:block; }
.guia-cerrar { border:0; background:transparent; color:#bda28f; padding:4px; display:grid; place-items:center; flex:none; }
.guia-cerrar:hover { color:var(--ink); }

/* ---------- contenido ---------- */
.content { padding:30px 34px 54px; max-width:1520px; margin:auto; }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:24px; }
.page-head p { color:var(--orange); font-size:10.5px; font-weight:900; letter-spacing:1.6px; margin:0 0 7px; }
.page-head h1 { font-size:31px; letter-spacing:-0.8px; margin:0 0 5px; }
.page-head>div>span { color:var(--muted); font-size:14px; }
.head-actions { display:flex; gap:9px; }
.primary,.secondary { display:inline-flex; align-items:center; gap:7px; border-radius:10px; padding:11px 17px; font-size:13px; font-weight:700; }
.primary { background:var(--orange); border:1px solid var(--orange); color:#fff; box-shadow:0 7px 18px #f0642629; }
.secondary { background:#fff; border:1px solid var(--line); color:var(--ink); }
.secondary:hover { border-color:#cfcdc2; }

.summary-strip { display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border:1px solid var(--line); border-radius:13px; margin-bottom:26px; }
.summary-strip>div { display:flex; align-items:center; gap:13px; padding:17px 19px; border-right:1px solid var(--line); }
.summary-strip>div:last-child { border-right:0; }
.summary-icon { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:#eef2f8; color:#5d6d8c; }
.summary-icon.amber { background:#fdf1de; color:#b57a16; }
.summary-icon.green { background:#e6f5ec; color:var(--green); }
.summary-icon.red { background:var(--orange-soft); color:var(--orange); }
.summary-strip p { margin:0; }
.summary-strip small { display:block; color:#8f9089; font-size:10px; font-weight:800; letter-spacing:.7px; margin-bottom:5px; }
.summary-strip strong { font-size:19px; }
.summary-strip strong b { color:#9a9b94; font-size:12px; font-weight:500; }

.section-row { display:flex; justify-content:space-between; align-items:end; margin:0 1px 14px; gap:16px; }
.section-row h2 { font-size:16.5px; margin:0 0 3px; }
.section-row>div>span { color:var(--muted); font-size:12px; }
.legend { display:flex; gap:14px; flex-wrap:wrap; }
.legend span { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); }
.legend i { width:8px; height:8px; border-radius:50%; background:#b9bbb4; }
.legend i.ocupada { background:#7e8eaa; }
.legend i.preparando { background:var(--amber); }
.legend i.lista { background:var(--green); }
.legend i.cobrar { background:var(--red); }

/* ---------- mesas ---------- */
.tables-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.table-card { min-height:196px; background:#fff; border:1px solid var(--line); border-radius:13px; padding:15px; color:var(--ink); text-align:left; transition:.18s ease; position:relative; overflow:hidden; }
.table-card:hover { transform:translateY(-2px); box-shadow:0 10px 28px #27281f14; border-color:#cecbbd; }
.table-card:before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:#c9cac4; }
.table-card.preparando:before { background:var(--amber); }
.table-card.lista:before { background:var(--green); }
.table-card.cobrar:before { background:var(--red); }
.table-card.ocupada:before { background:#7e8eaa; }
.table-top { display:flex; justify-content:space-between; align-items:center; gap:6px; }
.table-top>span { font-size:10.5px; color:#93948d; font-weight:800; letter-spacing:1px; }
.table-top em { font-style:normal; border-radius:12px; padding:4px 8px; background:#f0f0ec; color:#71736b; font-size:9.5px; font-weight:700; white-space:nowrap; }
.preparando .table-top em { background:#fdf0d9; color:#a86a0d; }
.lista .table-top em { background:#e3f4ea; color:#22754c; }
.cobrar .table-top em { background:#fce8e7; color:#ab423d; }
.ocupada .table-top em { background:#ecf1f7; color:#5c6c86; }
.table-visual { margin:18px auto 14px; width:70px; height:54px; border:2px solid #dcddd7; border-radius:10px; display:grid; place-items:center; position:relative; color:#71736b; }
.table-visual b { font-size:17px; }
.chair { position:absolute; background:#eeeeea; border:1px solid #dadbd5; border-radius:3px; }
.chair.top,.chair.bottom { width:23px; height:6px; left:22px; }
.chair.top { top:-10px; } .chair.bottom { bottom:-10px; }
.chair.left,.chair.right { height:21px; width:6px; top:15px; }
.chair.left { left:-10px; } .chair.right { right:-10px; }
.free-copy { text-align:center; font-size:11px; color:#9a9b94; margin-top:16px; }
.table-info,.table-total { display:flex; justify-content:space-between; align-items:center; font-size:11px; }
.table-info { color:#7d7e76; border-bottom:1px solid #efeee8; padding:6px 0 10px; }
.table-info span { display:flex; align-items:center; gap:4px; }
.table-total { padding-top:10px; }
.table-total span { color:#9a9b94; }
.table-total strong { font-size:14px; }

/* ---------- cocina ---------- */
.kitchen-stats { background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 15px; color:var(--muted); font-size:12.5px; }
.kitchen-stats b { color:var(--orange); font-size:18px; margin-right:5px; }
.kitchen-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.kitchen-card { background:#fff; border:1px solid var(--line); border-top:4px solid #8290a6; border-radius:13px; padding:19px; box-shadow:0 7px 22px #2b2c2410; }
.kitchen-card.warning { border-top-color:var(--amber); }
.kitchen-card.ready { border-top-color:var(--green); }
.kitchen-card header { display:flex; justify-content:space-between; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.kitchen-card header small { color:#87887f; font-weight:800; font-size:10.5px; letter-spacing:.5px; }
.kitchen-card h2 { margin:5px 0 0; font-size:21px; }
.kitchen-card header>div:last-child { text-align:right; }
.kitchen-card header strong,.kitchen-card header span { display:block; }
.kitchen-card header strong { font-size:12.5px; color:var(--red); display:flex; align-items:center; gap:4px; justify-content:flex-end; }
.kitchen-card header span { font-size:10.5px; background:#f1f1ec; color:#6f7069; padding:4px 8px; border-radius:10px; margin-top:6px; display:inline-block; font-weight:700; }
.kitchen-card ul { margin:17px 0; padding:0; list-style:none; min-height:104px; }
.kitchen-card li { padding:7px 0; font-size:14px; }
.kitchen-card li b { color:var(--orange); margin-right:4px; }
.kitchen-card>p { display:flex; align-items:center; gap:7px; background:#faf3e8; padding:11px; border-radius:8px; color:#8b672f; font-size:11.5px; }
.kitchen-card>button { width:100%; border:0; background:#292b26; color:#fff; padding:13px; border-radius:9px; font-weight:700; font-size:12.5px; margin-top:14px; display:flex; align-items:center; justify-content:center; gap:7px; }
.kitchen-card.ready>button { background:var(--green); }
.kitchen-card.new>button { background:var(--orange); }

/* ---------- estado vacio ---------- */
.estado-vacio { background:#fff; border:1px dashed #d8d6ca; border-radius:14px; padding:52px 26px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px; color:var(--muted); }
.estado-vacio .ic { color:#c8c6ba; }
.estado-vacio strong { font-size:17px; color:var(--ink); margin-top:6px; }
.estado-vacio span { font-size:13px; max-width:420px; }
.estado-vacio button { margin-top:12px; }

/* ---------- caja ---------- */
.cash-layout { display:grid; grid-template-columns:1fr 1.25fr; gap:20px; align-items:start; }
.accounts,.payment-panel,.chart-card,.top-products { background:#fff; border:1px solid var(--line); border-radius:13px; padding:21px; }
.panel-title { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.panel-title h2 { margin:0; font-size:17px; }
.panel-title>span { background:var(--orange-soft); color:var(--orange); padding:5px 10px; border-radius:12px; font-size:11px; font-weight:800; white-space:nowrap; }
.account { display:grid; grid-template-columns:1fr auto; align-items:center; border:1px solid var(--line); border-radius:11px; padding:15px; margin-top:10px; cursor:pointer; transition:.15s ease; }
.account:hover { border-color:#cfcdc2; }
.account.selected { border-color:var(--orange); background:#fff9f5; }
.account div { grid-column:1; }
.account b,.account span { display:block; }
.account b { font-size:13px; }
.account span,.account p { color:var(--muted); font-size:11px; margin:4px 0 0; }
.account strong { grid-column:2; grid-row:1/3; font-size:18px; }
.account p { grid-column:1; }
.payment-panel .panel-title small { color:var(--orange); font-size:10px; font-weight:900; letter-spacing:1px; }
.payment-panel .panel-title h2 { margin-top:4px; font-size:22px; }
.payment-panel .panel-title>strong { font-size:26px; }
.bill-lines { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:11px 0; margin-bottom:18px; }
.bill-lines p { display:flex; justify-content:space-between; gap:12px; font-size:12.5px; padding:3px 0; }
.payment-panel>label,.cash-input label { font-size:11px; font-weight:800; color:#75766f; letter-spacing:.4px; }
.pay-methods { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin:8px 0 18px; }
.pay-methods button { border:1px solid var(--line); background:#fff; border-radius:9px; padding:11px 4px; font-size:11.5px; color:var(--ink); }
.pay-methods button:hover { border-color:#cfcdc2; }
.pay-methods button.active { border-color:var(--orange); color:var(--orange); background:var(--orange-soft); font-weight:800; }
.cash-input>div { border:1px solid var(--line); border-radius:9px; display:flex; align-items:center; padding:0 12px; margin-top:7px; }
.cash-input input { border:0; outline:0; padding:11px 5px; width:100%; font-weight:800; font-size:14px; }
.cash-input p { background:#e8f5ee; color:#2c7350; padding:11px; display:flex; justify-content:space-between; border-radius:8px; font-size:12px; margin-top:9px; }
.cash-input p.falta { background:#fdeceb; color:#ab423d; }
.charge-btn { width:100%; border:0; background:var(--orange); color:#fff; padding:15px; border-radius:10px; font-weight:800; font-size:13.5px; margin-top:10px; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 8px 20px #f0642630; }
.receipt-choice { border-top:1px solid var(--line); padding-top:15px; margin-top:15px; }
.receipt-choice>label { color:#75766f; font-size:11px; font-weight:800; }
.receipt-types { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:8px 0 9px; }
.receipt-types button { border:1px solid var(--line); background:#fff; border-radius:8px; padding:10px 5px; color:#75766f; font-size:11px; font-weight:700; }
.receipt-types button.active { border-color:var(--orange); background:var(--orange-soft); color:var(--orange); }
.customer-fields { display:grid; grid-template-columns:1fr 1.3fr; gap:7px; }
.customer-fields input { width:100%; border:1px solid var(--line); border-radius:8px; padding:10px; outline:none; font-size:11.5px; }
.customer-fields input:focus { border-color:var(--orange); }

/* ---------- comprobante ---------- */
.receipt-backdrop { justify-content:center; align-items:center; padding:16px; }
.receipt-modal { width:min(650px,100%); max-height:94vh; overflow:auto; background:#f5f4ef; border-radius:15px; box-shadow:0 20px 65px #0003; }
.receipt-modal>header { background:#fff; display:flex; justify-content:space-between; align-items:flex-start; padding:18px 21px; border-bottom:1px solid var(--line); }
.receipt-modal>header small { color:var(--green); font-size:10px; font-weight:900; letter-spacing:1px; display:flex; align-items:center; gap:5px; }
.receipt-modal>header h2 { margin:6px 0 0; font-size:20px; }
.receipt-modal>header button { width:34px; height:34px; border:1px solid var(--line); background:#fff; border-radius:9px; color:var(--muted); display:grid; place-items:center; }
.receipt-paper { width:340px; max-width:calc(100% - 28px); background:#fff; margin:18px auto; padding:22px; box-shadow:0 4px 20px #0001; border-radius:3px; position:relative; }
.receipt-paper:after { content:""; position:absolute; inset:auto 0 -5px; height:8px; background:linear-gradient(135deg,#fff 4px,transparent 0) 0 0/8px 8px repeat-x; }
.receipt-brand { display:flex; align-items:center; justify-content:center; gap:9px; padding-bottom:13px; border-bottom:1px dashed #ccc; }
.receipt-brand>b { width:33px; height:33px; display:grid; place-items:center; background:var(--orange); color:#fff; border-radius:9px; font-size:18px; }
.receipt-brand strong,.receipt-brand span { display:block; }
.receipt-brand strong { font-size:14px; letter-spacing:1px; }
.receipt-brand span { color:#8a8a84; font-size:9px; }
.receipt-number { text-align:center; padding:13px 0; }
.receipt-number span,.receipt-number strong,.receipt-number small { display:block; }
.receipt-number span { font-size:9px; font-weight:900; color:#75766f; letter-spacing:1px; }
.receipt-number strong { font-size:14px; margin:5px 0; }
.receipt-number small { color:#96968f; font-size:9px; }
.receipt-customer { border-top:1px dashed #ccc; padding:10px 0; }
.receipt-customer span,.receipt-customer strong { display:block; font-size:10px; }
.receipt-customer span { color:#8a8a84; }
.receipt-customer strong { margin-top:3px; }
.receipt-items { border-top:1px dashed #ccc; border-bottom:1px dashed #ccc; padding:9px 0; }
.receipt-items p,.receipt-totals p { display:flex; justify-content:space-between; gap:10px; margin:6px 0; font-size:10.5px; }
.receipt-totals { padding-top:7px; }
.receipt-totals .total { border-top:1px solid #222; padding-top:8px; font-size:13px; font-weight:800; }
.receipt-totals>small { display:block; text-align:center; color:#75766f; font-size:9px; margin-top:9px; line-height:1.5; }
.qr-placeholder { width:52px; height:52px; margin:13px auto 6px; border:2px solid #222; display:grid; place-items:center; color:#222; }
.qr-placeholder .ic { width:32px; height:32px; }
.receipt-thanks { text-align:center; font-size:10px; font-weight:800; }
.sunat-pending { text-align:center; background:#fff4d9; color:#8f6512; border-radius:5px; padding:6px; font-size:8.5px; margin-top:8px; }
.receipt-modal>footer { background:#fff; border-top:1px solid var(--line); padding:14px 17px; display:flex; justify-content:flex-end; gap:8px; }
.receipt-modal>footer button { display:inline-flex; align-items:center; gap:7px; }

/* ---------- historial ---------- */
.cash-view-toggle { display:flex; background:#ebeae4; padding:3px; border-radius:10px; }
.cash-view-toggle button { border:0; background:transparent; color:#75766f; border-radius:8px; padding:10px 14px; font-size:11.5px; font-weight:800; }
.cash-view-toggle button.active { background:#fff; color:var(--orange); box-shadow:0 2px 8px #0000000f; }
.sales-history { background:#fff; border:1px solid var(--line); border-radius:13px; padding:21px; overflow:hidden; }
.history-filters { display:flex; align-items:end; gap:13px; margin-bottom:18px; }
.history-filters>div { flex:1; }
.history-filters small { color:var(--orange); font-size:10px; font-weight:900; letter-spacing:1px; }
.history-filters h2 { margin:6px 0 0; font-size:18px; }
.history-filters label { color:#75766f; font-size:10.5px; font-weight:800; }
.history-filters input { display:block; border:1px solid var(--line); border-radius:8px; padding:9px; margin-top:5px; color:var(--ink); font-size:12px; }
.history-filters>button { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:#fff; padding:10px 13px; border-radius:8px; font-size:11.5px; font-weight:800; }
.history-totals { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-bottom:17px; }
.history-totals article { background:#f7f6f1; border-radius:10px; padding:13px; }
.history-totals span,.history-totals strong { display:block; }
.history-totals span { color:#83847d; font-size:10.5px; font-weight:700; }
.history-totals strong { font-size:17px; margin-top:5px; }
.sales-table { min-width:900px; }
.sales-head,.sales-row { display:grid; grid-template-columns:100px 170px 1fr 120px 100px 110px; gap:10px; align-items:center; padding:12px 8px; }
.sales-head { background:#f5f4ef; border-radius:8px; color:#83847d; font-size:10.5px; font-weight:900; letter-spacing:.3px; }
.sales-row { border-bottom:1px solid var(--line); color:#67685f; font-size:12px; }
.sales-row .money { text-align:right; color:var(--ink); font-weight:800; }
.sales-empty { padding:26px 8px; color:#93948d; font-size:12.5px; text-align:center; }

/* ---------- inventario ---------- */
.stock-alert { display:flex; align-items:center; gap:13px; background:#fff7e8; border:1px solid #f2d492; border-radius:12px; padding:14px 16px; margin-bottom:15px; color:#a2700f; }
.stock-alert p { margin:0; flex:1; }
.stock-alert strong,.stock-alert span { display:block; }
.stock-alert strong { color:#8a5806; font-size:12.5px; }
.stock-alert span { color:#94713e; font-size:11px; margin-top:3px; }
.stock-alert button { border:1px solid #e9bd68; background:#fff; color:#96600a; border-radius:8px; padding:9px 12px; font-size:11px; font-weight:800; white-space:nowrap; }
.inventory-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:17px; }
.inventory-summary article { background:#fff; border:1px solid var(--line); border-radius:11px; padding:16px; }
.inventory-summary span,.inventory-summary strong,.inventory-summary small { display:block; }
.inventory-summary span { color:#83847d; font-size:10px; font-weight:900; letter-spacing:.6px; }
.inventory-summary strong { font-size:23px; margin:8px 0 3px; }
.inventory-summary strong.danger { color:#c9503c; }
.inventory-summary small { color:#93948d; font-size:11px; }
.inventory-panel { background:#fff; border:1px solid var(--line); border-radius:13px; padding:21px; overflow:hidden; }
.inventory-toolbar { display:flex; justify-content:space-between; align-items:end; gap:14px; margin-bottom:14px; }
.inventory-toolbar h2 { font-size:17px; margin:0 0 3px; }
.inventory-toolbar>div>span { color:#93948d; font-size:11px; }
.stock-filters { display:flex; gap:6px; }
.stock-filters button { border:1px solid var(--line); background:#fff; color:#75766f; border-radius:8px; padding:9px 12px; font-size:11px; font-weight:800; white-space:nowrap; }
.stock-filters button.active { background:#292b26; color:#fff; border-color:#292b26; }
.inventory-table { min-width:980px; }
.inventory-head,.inventory-row { display:grid; grid-template-columns:1.5fr 110px 120px 120px 130px 110px 95px; align-items:center; gap:10px; padding:12px 8px; }
.inventory-head { background:#f5f4ef; color:#83847d; border-radius:8px; font-size:10.5px; font-weight:900; }
.inventory-row { border-bottom:1px solid var(--line); color:#6e6f67; font-size:12px; }
.inventory-row>div:first-child { display:flex; align-items:center; gap:10px; }
.inventory-row>div:first-child>i { width:38px; height:38px; background:#f6f2e8; color:#a08050; border-radius:9px; display:grid; place-items:center; font-style:normal; }
.inventory-row>div:first-child>i .ic { width:19px; height:19px; }
.inventory-row b,.inventory-row small { display:block; }
.inventory-row b { color:var(--ink); font-size:12.5px; }
.inventory-row small { color:#93948d; font-size:10.5px; margin-top:3px; }
.inventory-row>strong { color:var(--ink); font-size:14px; }
.inventory-row>strong small { display:inline; font-weight:400; font-size:10.5px; }
.stock-level { display:flex; align-items:center; gap:8px; }
.stock-level>span { width:76px; height:7px; background:#eeede8; border-radius:4px; overflow:hidden; }
.stock-level>span i { display:block; height:100%; background:var(--green); border-radius:4px; }
.stock-level>span i.low { background:var(--amber); }
.stock-level small { margin:0; font-size:10.5px; }
.inventory-row>em { justify-self:start; border-radius:11px; padding:5px 9px; font-size:10.5px; font-style:normal; font-weight:800; white-space:nowrap; }
.inventory-row>em.low { background:#fdf0d9; color:#9c6207; }
.inventory-row>em.ok { background:#e6f5ec; color:var(--green); }
.inventory-row>button { display:inline-flex; align-items:center; gap:4px; border:1px solid var(--line); background:#fff; border-radius:7px; padding:7px 8px; color:var(--orange); font-size:10.5px; font-weight:800; }
.inventory-note { display:flex; gap:12px; align-items:flex-start; background:#eef3f8; color:#5e6e88; padding:13px 15px; border-radius:10px; margin-top:14px; font-size:11.5px; line-height:1.55; }
.inventory-note b { color:#3f5878; }
.inventory-note .ic { color:#7c92b3; margin-top:1px; }

/* ---------- finanzas ---------- */
.finance-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; }
.finance-cards article,.metric-row article { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px; }
.finance-cards span,.metric-row span { display:block; font-size:10px; color:#86877f; font-weight:900; letter-spacing:.9px; }
.finance-cards strong { display:block; font-size:26px; margin:10px 0 5px; }
.finance-cards small,.metric-row small { color:var(--green); font-size:11.5px; }
.finance-cards .profit { background:#252721; color:#fff; }
.finance-cards .profit span { color:#a6a89f; }
.income-breakdown,.expenses-panel { background:#fff; border:1px solid var(--line); border-radius:13px; padding:21px; margin-bottom:18px; overflow:hidden; }
.monthly-expense-report { background:#fff; border:1px solid var(--line); border-radius:13px; padding:21px; margin-bottom:18px; }
.monthly-expense-report .panel-title small,.income-breakdown .panel-title small,.expenses-panel .panel-title small,.users-card .panel-title small,.permissions-card .panel-title small { color:#86877f; font-size:10px; font-weight:900; letter-spacing:1px; }
.monthly-expense-report .panel-title h2,.income-breakdown .panel-title h2,.expenses-panel .panel-title h2,.users-card .panel-title h2,.permissions-card .panel-title h2 { margin-top:6px; }
.monthly-expense-report select { border:1px solid var(--line); background:#fff; border-radius:8px; padding:9px 11px; color:var(--ink); font-size:11.5px; }
.income-breakdown .panel-title button,.expenses-panel .panel-title button { display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; color:var(--orange); font-size:12px; font-weight:800; }
.expense-comparison { display:grid; grid-template-columns:1fr auto 1fr; gap:13px; align-items:center; }
.expense-comparison article { display:flex; align-items:center; justify-content:space-between; gap:12px; border-radius:11px; padding:16px; border:1px solid var(--line); }
.expense-comparison span,.expense-comparison strong,.expense-comparison small { display:block; }
.expense-comparison span { color:#7f8078; font-size:10px; font-weight:900; letter-spacing:.5px; }
.expense-comparison strong { font-size:22px; margin:7px 0 3px; }
.expense-comparison small { color:#93948d; font-size:10.5px; }
.expense-comparison em { width:46px; height:46px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:11.5px; font-style:normal; font-weight:900; }
.expense-comparison .purchases em { background:var(--orange-soft); color:var(--orange); }
.expense-comparison .third-parties em { background:#eaf0fa; color:#315da8; }
.versus { width:30px; height:30px; border-radius:50%; background:#292b26; color:#fff; display:grid; place-items:center; font-size:9px; font-weight:900; }
.monthly-bars { margin-top:17px; border-top:1px solid var(--line); padding-top:11px; }
.monthly-bars>div { display:grid; grid-template-columns:56px 1fr 100px; align-items:center; gap:11px; padding:6px 0; }
.monthly-bars span { color:#75766f; font-size:11px; }
.monthly-bars>div>div { height:13px; display:flex; overflow:hidden; background:#f0efe9; border-radius:7px; }
.monthly-bars i { background:var(--orange); }
.monthly-bars b { background:#315da8; }
.monthly-bars strong { text-align:right; font-size:11.5px; }
.comparison-legend { display:flex; gap:16px; align-items:center; justify-content:flex-end; margin-top:9px; color:#75766f; font-size:10.5px; flex-wrap:wrap; }
.comparison-legend span { display:flex; align-items:center; gap:5px; }
.comparison-legend i { width:8px; height:8px; background:var(--orange); border-radius:2px; }
.comparison-legend span:nth-child(2) i { background:#315da8; }
.comparison-legend b { color:var(--ink); margin-left:10px; }
.expense-tabs { display:flex; gap:7px; margin:-2px 0 14px; flex-wrap:wrap; }
.expense-tabs button { border:1px solid var(--line); background:#fff; border-radius:9px; padding:9px 13px; color:#75766f; font-size:11.5px; font-weight:700; }
.expense-tabs button.active { background:#292b26; color:#fff; border-color:#292b26; }
.method-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin:2px 0 20px; }
.method-cards article { border:1px solid var(--line); border-radius:11px; padding:14px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; }
.method-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; font-size:12.5px; font-weight:900; }
.method-icon.cash { background:#e6f5ec; color:var(--green); }
.method-icon.yape { background:#f0e8f8; color:#71389a; }
.method-icon.plin { background:#e6f5f5; color:#148181; }
.method-icon.card { background:#e9edf5; color:#566784; }
.method-cards span,.method-cards strong,.method-cards small { display:block; }
.method-cards span { color:#75766f; font-size:11.5px; }
.method-cards strong { font-size:15px; margin:3px 0; }
.method-cards small { color:#93948d; font-size:10.5px; }
.method-cards em { align-self:start; background:#f2f2ed; border-radius:11px; padding:4px 8px; font-style:normal; font-size:10.5px; font-weight:800; color:#75766f; }
.income-table,.expense-table { min-width:900px; }
.income-table-head,.income-table-row { display:grid; grid-template-columns:130px 105px 1fr 105px 130px 110px; align-items:center; gap:10px; padding:12px 8px; }
.income-table-head,.expense-head { background:#f5f4ef; border-radius:8px; color:#83847d; font-size:10.5px; font-weight:900; letter-spacing:.3px; }
.income-table-row { border-bottom:1px solid var(--line); font-size:12px; color:#64655d; }
.income-table-row:last-child { border-bottom:0; }
.income-table-row .money { text-align:right; font-weight:800; color:var(--ink); }
.expense-head,.expense-row { display:grid; grid-template-columns:120px 1.2fr 1.3fr 115px 105px 85px; align-items:center; gap:11px; padding:12px 8px; }
.expense-row { border-bottom:1px solid var(--line); font-size:12px; color:#75766f; }
.expense-row:last-child { border-bottom:0; }
.expense-row strong { color:var(--ink); }
.expense-row b { text-align:right; color:var(--red); }
.expense-row em { font-style:normal; background:#e6f5ec; color:var(--green); border-radius:11px; padding:4px 9px; justify-self:start; font-size:10.5px; font-weight:800; }

/* ---------- formularios ---------- */
.expense-modal { justify-content:center; align-items:center; padding:18px; }
.expense-form { width:min(640px,100%); max-height:94vh; overflow:auto; background:#fff; border-radius:15px; box-shadow:0 20px 60px #0003; animation:toastIn .2s ease; }
.expense-form header { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:22px 24px 18px; border-bottom:1px solid var(--line); }
.expense-form header small { color:var(--orange); font-size:10px; font-weight:900; letter-spacing:1px; }
.expense-form header h2 { margin:6px 0 3px; font-size:22px; }
.expense-form header p { margin:0; color:var(--muted); font-size:12px; }
.expense-form header>button { width:34px; height:34px; flex:none; border:1px solid var(--line); background:#fff; border-radius:9px; color:var(--muted); display:grid; place-items:center; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; padding:20px 24px; }
.form-grid label { font-size:11.5px; color:#65665f; font-weight:800; }
.form-grid .wide { grid-column:1/-1; }
.form-grid input,.form-grid select,.form-grid textarea { width:100%; margin-top:7px; border:1px solid var(--line); border-radius:9px; padding:11px 12px; outline:none; background:#fff; color:var(--ink); font-size:13px; }
.form-grid textarea { resize:vertical; min-height:66px; }
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus { border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-soft); }
.amount-field { display:flex; align-items:center; border:1px solid var(--line); border-radius:9px; margin-top:7px; padding-left:11px; }
.amount-field:focus-within { border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-soft); }
.amount-field input { border:0; box-shadow:none!important; margin:0; }
.amount-field span { color:#75766f; }
.form-grid .checkbox { display:flex; align-items:center; gap:9px; background:#f6f5f0; padding:12px; border-radius:9px; font-size:12px; }
.form-grid .checkbox input { width:16px; height:16px; margin:0; accent-color:var(--orange); }
.expense-form footer { display:flex; justify-content:flex-end; gap:9px; padding:16px 24px; border-top:1px solid var(--line); }

/* ---------- configuracion ---------- */
.settings-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:19px; overflow:auto; }
.settings-tabs button { flex:none; border:0; background:transparent; padding:13px 17px; color:#7f8078; font-size:12.5px; font-weight:700; position:relative; }
.settings-tabs button.active { color:var(--orange); }
.settings-tabs button.active:after { content:""; height:2px; background:var(--orange); position:absolute; inset:auto 12px -1px; border-radius:2px; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.settings-card,.users-card,.permissions-card { background:#fff; border:1px solid var(--line); border-radius:13px; padding:21px; }
.settings-card.theme-card { grid-column:1/-1; }
.settings-title { display:flex; gap:12px; align-items:flex-start; margin-bottom:19px; }
.settings-title>span { width:29px; height:29px; flex:none; display:grid; place-items:center; background:var(--orange-soft); color:var(--orange); border-radius:8px; font-size:11px; font-weight:900; }
.settings-title h2 { font-size:16px; margin:0 0 4px; }
.settings-title p { color:var(--muted); font-size:11.5px; margin:0; }
.logo-upload { display:flex; align-items:center; gap:18px; }
.logo-preview { width:88px; height:88px; flex:none; background:var(--orange); border-radius:20px; display:grid; place-items:center; color:#fff; font-size:40px; font-weight:900; box-shadow:0 8px 20px #00000014; }
.logo-preview.has-image { background:#fff; border:1px solid var(--line); overflow:hidden; }
.logo-preview img { width:100%; height:100%; object-fit:contain; }
.logo-upload>div:last-child { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.upload-button,.logo-upload button { border:1px solid var(--line); background:#fff; border-radius:9px; padding:10px 13px; font-size:11.5px; font-weight:800; cursor:pointer; }
.upload-button { background:#292b26; color:#fff; border-color:#292b26; }
.upload-button input { display:none; }
.logo-upload button:disabled { opacity:.4; cursor:not-allowed; }
.logo-upload small { width:100%; color:#93948d; font-size:10.5px; }
.setting-field { display:block; color:#75766f; font-size:11.5px; font-weight:800; margin-top:14px; }
.setting-field input { display:block; width:100%; margin-top:7px; border:1px solid var(--line); border-radius:9px; padding:12px; outline:none; color:var(--ink); font-size:13px; }
.setting-field input:focus { border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-soft); }
.color-options { display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.color-options>button { width:36px; height:36px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px #d8d7d0; color:#fff; display:grid; place-items:center; }
.color-options>button.selected { box-shadow:0 0 0 2px var(--ink); }
.custom-color { display:flex; align-items:center; gap:8px; border-left:1px solid var(--line); padding-left:14px; color:#75766f; font-size:11.5px; }
.custom-color input { width:34px; height:34px; padding:0; border:0; background:transparent; cursor:pointer; }
.theme-preview { margin-top:19px; padding:14px; border:1px dashed #d5d3ca; background:#faf9f5; border-radius:10px; display:flex; align-items:center; gap:11px; }
.theme-preview>div { width:10px; height:46px; border-radius:5px; }
.theme-preview>span { flex:1; }
.theme-preview b,.theme-preview small { display:block; }
.theme-preview b { font-size:12px; }
.theme-preview small { color:#93948d; font-size:10.5px; margin-top:3px; }
.theme-preview button { border:0; color:#fff; border-radius:8px; padding:10px 14px; font-size:11.5px; font-weight:800; }
/* planes de comprobantes e impuestos */
.planes { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.plan { border:1px solid var(--line); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:11px; background:#fdfdfb; }
.plan.activo { border-color:var(--orange); background:#fffaf6; box-shadow:0 0 0 1px var(--orange) inset; }
.plan-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.plan-head h3 { font-size:17px; margin:8px 0 0; }
.plan-head em { display:inline-flex; align-items:center; gap:5px; font-style:normal; background:#e6f5ec; color:var(--green); border-radius:11px; padding:5px 10px; font-size:10.5px; font-weight:800; white-space:nowrap; }
.plan-tag { display:inline-block; border-radius:11px; padding:4px 9px; font-size:9.5px; font-weight:900; letter-spacing:.6px; }
.plan-tag.incluido { background:#eef2f8; color:#5d6d8c; }
.plan-tag.extra { background:var(--orange-soft); color:var(--orange); }
.plan>p { color:var(--muted); font-size:12.5px; line-height:1.55; }
.plan ul { list-style:none; padding:0; margin:0; display:grid; gap:7px; }
.plan li { display:flex; align-items:center; gap:8px; font-size:12px; color:#5f6058; }
.plan li .ic { color:var(--green); width:15px; height:15px; }
.plan button { margin-top:auto; align-self:flex-start; }
.fiscal-card { margin-top:15px; }
.regimen-options { display:grid; gap:10px; }
.regimen { display:flex; align-items:flex-start; gap:11px; border:1px solid var(--line); border-radius:11px; padding:15px; cursor:pointer; }
.regimen.activo { border-color:var(--orange); background:#fffaf6; }
.regimen input { margin:2px 0 0; width:17px; height:17px; accent-color:var(--orange); flex:none; }
.regimen b { display:block; font-size:13px; }
.regimen small { display:block; color:var(--muted); font-size:11.5px; margin-top:5px; line-height:1.55; }
.fiscal-nota { display:flex; align-items:flex-start; gap:11px; background:#fff7e8; color:#8a6a2a; border-radius:10px; padding:12px 14px; margin-top:15px; font-size:11.5px; line-height:1.55; }
.fiscal-nota .ic { color:#c99320; margin-top:1px; }
.emisor-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.emisor-grid.bloqueado { opacity:.55; }
.emisor-grid input:disabled { background:#f6f5f0; cursor:not-allowed; }
.emisor-aviso { margin-top:14px; color:var(--muted); font-size:11.5px; }
.fiscal-hint { color:var(--muted); font-size:11px; line-height:1.5; margin:-2px 0 10px; }
.receipt-types.unico { grid-template-columns:1fr; }
.receipt-types.unico button { cursor:default; }
.receipt-emisor { text-align:center; padding:9px 0; border-bottom:1px dashed #ccc; }
.receipt-emisor span { display:block; color:#75766f; font-size:8.5px; line-height:1.6; }
.ticket-ley { text-align:center; border:1px dashed #bbb; border-radius:4px; padding:7px; margin-top:10px; color:#4a4a44; font-size:8px; line-height:1.5; }
.sunat-pending.nota { background:#eef2f8; color:#5d6d8c; }

.users-card .panel-title .primary { color:#fff; }
.users-summary { background:#f7f6f1; border-radius:10px; display:flex; align-items:center; gap:26px; padding:13px 15px; margin-bottom:14px; flex-wrap:wrap; }
.users-summary span { display:flex; align-items:center; gap:7px; color:#75766f; font-size:11.5px; }
.users-summary b { color:var(--ink); font-size:15px; }
.role-dot { width:8px; height:8px; border-radius:50%; background:#aaa; }
.role-dot.admin { background:var(--orange); }
.role-dot.waiter { background:#315da8; }
.role-dot.kitchen { background:var(--green); }
.users-table { min-width:840px; }
.users-head,.user-row { display:grid; grid-template-columns:1.5fr 150px 95px 125px 115px; gap:11px; align-items:center; padding:12px 9px; }
.users-head { background:#f5f4ef; border-radius:8px; color:#83847d; font-size:10.5px; font-weight:900; letter-spacing:.3px; }
.user-row { border-bottom:1px solid var(--line); }
.user-row>div:first-child { display:flex; align-items:center; gap:10px; }
.user-row>div:first-child>i { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:#f2ddcf; color:#8b4524; font-style:normal; font-size:11px; font-weight:900; }
.user-row b,.user-row small { display:block; }
.user-row b { font-size:12.5px; }
.user-row small { color:#93948d; font-size:10.5px; margin-top:3px; }
.user-row .role { justify-self:start; border-radius:11px; padding:5px 10px; font-size:10.5px; font-weight:800; background:#f1f1ed; }
.role.administrador { background:var(--orange-soft); color:var(--orange); }
.role.mesero { background:#eaf0fa; color:#315da8; }
.role.cocina { background:#e6f5ec; color:var(--green); }
.role.caja { background:#f1eafa; color:#7046a1; }
.user-row code { color:#75766f; letter-spacing:2px; font-size:12px; }
.status-switch { display:flex; align-items:center; gap:7px; border:0; background:transparent; color:#93948d; font-size:10.5px; }
.status-switch>i { width:29px; height:17px; background:#ccc; border-radius:10px; position:relative; }
.status-switch>i:after { content:""; position:absolute; width:11px; height:11px; border-radius:50%; background:#fff; top:3px; left:3px; transition:.2s; }
.status-switch.on { color:var(--green); }
.status-switch.on>i { background:var(--green); }
.status-switch.on>i:after { transform:translateX(12px); }
.user-actions { display:flex; gap:5px; align-items:center; }
.user-actions button { border:1px solid var(--line); background:#fff; border-radius:7px; padding:7px 9px; font-size:10.5px; color:var(--muted); }
.permissions-card .panel-title p { color:#93948d; font-size:11px; margin:4px 0 0; }
.permissions-card .panel-title>button { border:1px solid var(--line); background:#fff; border-radius:9px; padding:10px 13px; color:var(--orange); font-size:11.5px; font-weight:800; white-space:nowrap; }
.permissions-table { min-width:780px; }
.permission-head,.permission-row { display:grid; grid-template-columns:1.6fr repeat(4,115px); gap:7px; align-items:center; padding:12px 9px; }
.permission-head { background:#f5f4ef; border-radius:8px; color:#7f8078; font-size:10.5px; font-weight:800; }
.permission-head b { text-align:center; }
.permission-row { border-bottom:1px solid var(--line); font-size:12px; }
.permission-row label { justify-self:center; position:relative; display:block; cursor:pointer; }
.permission-row input { position:absolute; opacity:0; }
.permission-row i { display:block; width:19px; height:19px; border:1px solid #d5d4cc; border-radius:5px; background:#fff; }
.permission-row input:checked+i { background:var(--orange); border-color:var(--orange); }
.permission-row input:checked+i:after { content:"✓"; display:grid; place-items:center; color:#fff; font-style:normal; font-size:11px; font-weight:900; }
.permission-row input:disabled+i { opacity:.65; }
.security-note { margin-top:16px; background:#f0f4fa; border-radius:10px; padding:13px 15px; display:flex; align-items:flex-start; gap:12px; color:#5e6e88; font-size:11.5px; line-height:1.55; }
.security-note b { color:#3f5878; }
.security-note .ic { color:#7c92b3; margin-top:1px; }
.role-explanation { background:#f6f5f0; border-radius:9px; padding:13px; }
.role-explanation b { font-size:11.5px; }
.role-explanation p { margin:6px 0 0; color:#75766f; font-size:11.5px; line-height:1.55; }
.user-form label>span { font-weight:400; color:#93948d; }

/* ---------- reportes ---------- */
.report-grid { display:grid; grid-template-columns:1.7fr 1fr; gap:18px; }
.chart-card { min-height:345px; }
.panel-title small,.top-products>small { color:#86877f; font-size:10px; font-weight:900; letter-spacing:1px; }
.chart-card .panel-title h2 { font-size:26px; margin-top:8px; }
.positive { background:#e6f5ec!important; color:var(--green)!important; }
.bar-chart { height:235px; display:flex; align-items:end; gap:12px; padding-top:16px; }
.bar-chart>div { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:9px; }
.bar-chart span { width:100%; max-width:44px; background:linear-gradient(#f58650,var(--orange)); border-radius:6px 6px 2px 2px; }
.bar-chart small { color:#86877f; font-size:10.5px; }
.top-products>h2 { font-size:20px; margin:8px 0 18px; }
.top-products>div { display:flex; align-items:center; gap:11px; padding:13px 0; border-top:1px solid var(--line); }
.top-products i { width:27px; height:27px; border-radius:8px; background:#f0f0eb; display:grid; place-items:center; font-style:normal; font-weight:800; font-size:11.5px; }
.top-products div span { flex:1; }
.top-products div b,.top-products div small { display:block; font-size:12px; }
.top-products div small { color:#93948d; margin-top:3px; font-size:10.5px; }
.top-products div strong { font-size:12px; }
.metric-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px; }
.metric-row strong { display:block; font-size:22px; margin:9px 0 4px; }

/* ---------- pedido ---------- */
.modal-backdrop { position:fixed; inset:0; background:#1819149e; z-index:80; display:flex; justify-content:flex-end; backdrop-filter:blur(2px); }
.order-drawer { width:min(680px,100%); height:100%; background:#f7f6f1; box-shadow:-20px 0 50px #00000022; display:flex; flex-direction:column; animation:slideIn .22s ease; }
@keyframes slideIn { from { transform:translateX(40px); opacity:.6; } }
.drawer-head { background:#fff; border-bottom:1px solid var(--line); padding:21px 24px; display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.drawer-head small { color:var(--orange); font-size:10px; font-weight:900; letter-spacing:1px; }
.drawer-head h2 { margin:6px 0 3px; font-size:24px; }
.drawer-head span { color:var(--muted); font-size:12px; }
.drawer-head>button { width:36px; height:36px; flex:none; border:1px solid var(--line); background:#fff; border-radius:9px; color:var(--muted); display:grid; place-items:center; }
.drawer-previo { background:#fff6f0; border-bottom:1px solid #f4ddcd; padding:11px 24px; display:flex; justify-content:space-between; gap:12px; font-size:11.5px; color:#a35317; }
.drawer-previo b { font-weight:800; }
.category-tabs { padding:14px 22px; display:flex; gap:7px; overflow:auto; }
.category-tabs button { flex:none; border:1px solid var(--line); background:#fff; padding:9px 14px; border-radius:18px; font-size:11.5px; color:var(--ink); }
.category-tabs button.active { background:#292b26; color:#fff; border-color:#292b26; }
.product-grid { padding:2px 22px 18px; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; overflow:auto; align-content:start; flex:1; }
.product-grid>button { display:flex; align-items:center; gap:11px; border:1px solid var(--line); background:#fff; padding:12px; border-radius:11px; text-align:left; color:var(--ink); }
.product-grid>button:hover { border-color:var(--orange); }
.product-grid>button>span { width:46px; height:46px; flex:none; display:grid; place-items:center; background:#fff3e7; color:var(--orange); border-radius:9px; }
.product-grid>button>span .ic { width:23px; height:23px; }
.product-grid button div { flex:1; }
.product-grid strong,.product-grid small,.product-grid b { display:block; }
.product-grid strong { font-size:12.5px; }
.product-grid small { color:#93948d; font-size:10.5px; margin:3px 0; }
.product-grid b { color:var(--orange); font-size:12.5px; }
.product-grid em { font-style:normal; color:var(--orange); }
.order-summary { background:#fff; border-top:1px solid var(--line); margin-top:auto; }
.order-lines { max-height:132px; overflow:auto; padding:12px 24px; }
.order-lines>p { color:#93948d; font-size:12px; text-align:center; padding:6px 0; }
.order-lines>div { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:5px 0; font-size:12.5px; }
.order-lines span b { color:var(--orange); margin-right:5px; }
.order-line-acciones { display:flex; align-items:center; gap:10px; }
.order-line-acciones button { width:22px; height:22px; border:1px solid var(--line); background:#fff; border-radius:6px; color:var(--muted); line-height:1; }
.order-line-acciones button:hover { border-color:var(--red); color:var(--red); }
.order-bottom { border-top:1px solid var(--line); padding:14px 24px; display:grid; grid-template-columns:1fr 1.2fr; gap:16px; align-items:center; }
.order-bottom>div span,.order-bottom>div strong { display:block; }
.order-bottom>div span { color:#83847d; font-size:11px; }
.order-bottom>div strong { font-size:23px; }
.order-bottom button { border:0; background:var(--orange); color:#fff; border-radius:9px; padding:14px; font-size:12.5px; font-weight:800; display:flex; justify-content:center; align-items:center; gap:8px; }
.order-bottom button:disabled { opacity:.4; cursor:not-allowed; }

/* ---------- avisos ---------- */
.toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%); z-index:100; background:#252721; color:#fff; padding:13px 20px; border-radius:10px; box-shadow:0 12px 35px #00000038; font-size:12.5px; display:flex; align-items:center; gap:10px; max-width:calc(100% - 32px); }
.toast .ic { color:#6fd39b; }
@keyframes toastIn { from { transform:translate(-50%,10px); opacity:0; } }
.mobile-nav { display:none; }

/* ---------- responsive ---------- */
@media(max-width:1180px) {
  .tables-grid { grid-template-columns:repeat(3,1fr); }
  .summary-strip { grid-template-columns:repeat(2,1fr); }
  .summary-strip>div:nth-child(2) { border-right:0; }
  .summary-strip>div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .kitchen-grid { grid-template-columns:1fr 1fr; }
  .report-grid { grid-template-columns:1fr; }
  .guia { gap:12px; padding:11px 20px; }
}
@media(max-width:900px) {
  .sidebar { display:none; }
  .workspace { margin:0; width:100%; }
  .cash-layout { grid-template-columns:1fr; }
}
@media(max-width:760px) {
  .topbar { height:62px; padding:0 15px; justify-content:space-between; gap:10px; }
  .mobile-brand { display:flex; align-items:center; gap:9px; font-size:14px; letter-spacing:1px; }
  .mobile-brand b { width:32px; height:32px; font-size:16px; border-radius:9px; }
  .shift { display:none; }
  .top-actions>span { display:none; }
  .demo-back { margin-right:0; padding:8px; }
  .demo-back span { display:none; }
  .guia { padding:10px 14px; gap:10px; align-items:flex-start; flex-wrap:wrap; }
  .guia-pasos { gap:10px 16px; }
  .guia-pasos li { font-size:11.5px; }
  .content { padding:20px 14px 92px; }
  .page-head { align-items:flex-start; flex-direction:column; gap:14px; }
  .page-head h1 { font-size:26px; }
  .page-head>div>span { font-size:12.5px; }
  .head-actions { width:100%; }
  .head-actions button { flex:1; justify-content:center; }
  .summary-strip { grid-template-columns:1fr 1fr; }
  .summary-strip>div { padding:13px 11px; gap:9px; }
  .summary-icon { width:33px; height:33px; }
  .summary-strip strong { font-size:16px; }
  .section-row { flex-direction:column; align-items:flex-start; gap:10px; }
  .legend { display:none; }
  .tables-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .table-card { min-height:184px; padding:13px; }
  .table-top em { max-width:80px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .table-info span:last-child { display:none; }
  .mobile-nav { position:fixed; display:flex; inset:auto 0 0; height:68px; background:#fff; border-top:1px solid var(--line); z-index:50; justify-content:space-around; padding-bottom:env(safe-area-inset-bottom); }
  .mobile-nav button { border:0; background:transparent; color:#8b8c84; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
  .mobile-nav i { position:relative; font-style:normal; display:grid; place-items:center; }
  .mobile-nav i .ic { width:21px; height:21px; }
  .mobile-nav i em { position:absolute; top:-6px; right:-11px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--orange); color:#fff; font-size:9.5px; font-style:normal; font-weight:700; display:grid; place-items:center; }
  .mobile-nav span { font-size:10px; }
  .mobile-nav button.active { color:var(--orange); font-weight:800; }
  .kitchen-grid,.finance-cards,.metric-row { grid-template-columns:1fr; }
  .kitchen-card ul { min-height:auto; }
  .pay-methods { grid-template-columns:repeat(3,1fr); }
  .method-cards { grid-template-columns:1fr 1fr; }
  .income-breakdown,.expenses-panel { overflow-x:auto; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid .wide { grid-column:auto; }
  .sales-history { overflow-x:auto; }
  .history-filters { min-width:660px; }
  .history-totals { min-width:660px; grid-template-columns:1fr 1fr; }
  .expense-comparison { grid-template-columns:1fr; }
  .versus { margin:auto; }
  .monthly-expense-report { overflow-x:auto; }
  .monthly-expense-report>* { min-width:580px; }
  .inventory-summary { grid-template-columns:1fr 1fr; }
  .inventory-panel { overflow-x:auto; }
  .inventory-toolbar { min-width:760px; }
  .inventory-note { flex-direction:column; }
  .receipt-modal>footer { flex-wrap:wrap; }
  .receipt-modal>footer button { flex:1; min-width:130px; justify-content:center; }
  .customer-fields { grid-template-columns:1fr; }
  .settings-grid { grid-template-columns:1fr; }
  .settings-card.theme-card { grid-column:auto; }
  .planes,.emisor-grid { grid-template-columns:1fr; }
  .users-card,.permissions-card { overflow-x:auto; }
  .users-summary { min-width:640px; }
  .security-note { min-width:620px; }
  .chart-card { min-height:300px; }
  .metric-row { grid-template-columns:1fr 1fr; }
  .product-grid { grid-template-columns:1fr; padding-left:16px; padding-right:16px; }
  .category-tabs { padding-left:16px; }
  .order-bottom { grid-template-columns:.8fr 1.2fr; padding:12px 16px; }
  .order-bottom>div strong { font-size:20px; }
}

/* ---------- impresion: solo el ticket ---------- */
@media print {
  body { background:#fff; }
  body>*:not([data-modal-root]) { display:none!important; }
  .modal-backdrop { position:static; background:none; display:block; backdrop-filter:none; padding:0; }
  .receipt-modal { width:auto; max-height:none; overflow:visible; background:#fff; box-shadow:none; border-radius:0; }
  .receipt-modal>header,.receipt-modal>footer { display:none!important; }
  .receipt-paper { width:76mm; max-width:none; margin:0; padding:4mm 2mm; box-shadow:none; border-radius:0; }
  .receipt-paper:after { display:none; }
  .sunat-pending { background:none; color:#555; }
  @page { margin:6mm; size:auto; }
}