:root { --bg:#f6f7fb; --card:#fff; --text:#172033; --muted:#6b7280; --line:#e5e7eb; --primary:#1f6feb; --dark:#101827; }
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, Segoe UI, Arial, sans-serif; background:var(--bg); color:var(--text); }
.shell { display:flex; min-height:100vh; }
.sidebar { width:250px; background:var(--dark); color:#fff; padding:24px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; }
.sidebar nav { flex:1; overflow-y:auto; }
.sidebar-user { border-top:1px solid #1f2937; padding-top:14px; margin-top:8px; }
.user-info { margin-bottom:8px; }
.user-name { display:block; font-size:13px; font-weight:600; color:#e2e8f0; }
.user-rol { display:block; font-size:11px; color:#64748b; margin-top:2px; }
.btn-logout { display:block; text-align:center; background:#1f2937; color:#94a3b8; text-decoration:none; border-radius:10px; padding:8px 12px; font-size:13px; font-weight:500; transition:background .15s; }
.btn-logout:hover { background:#374151; color:#e2e8f0; }
.brand { display:flex; gap:12px; align-items:center; margin-bottom:28px; }
.brand-mark { background:var(--primary); border-radius:16px; padding:12px 10px; font-weight:800; }
.brand span { display:block; color:#aeb7c8; font-size:13px; margin-top:2px; }
nav { display:grid; gap:2px; align-content:start; }
nav a { color:#cbd5e1; text-decoration:none; padding:8px 12px; border-radius:10px; font-size:14px; }
nav a.active, nav a:hover { background:#1f2937; color:#fff; }
.content { flex:1; padding:28px; }
h1 { margin:0; font-size:32px; }
h2 { margin-top:0; font-size:20px; }
.muted { color:var(--muted); }
.card { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:22px; box-shadow:0 12px 30px rgba(15,23,42,.05); margin-top:20px; }
.kpi-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; margin-top:22px; }
.kpi span { color:var(--muted); display:block; }
.kpi strong { font-size:28px; margin-top:10px; display:block; }
.grid.two { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.table-map { display:grid; grid-template-columns:repeat(4, minmax(120px, 1fr)); gap:16px; margin-top:24px; }
.table-map.mini { grid-template-columns:repeat(3, 1fr); margin-top:12px; }
.table-box { border:0; background:#fff; border:1px solid var(--line); border-radius:22px; min-height:105px; padding:16px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; cursor:pointer; color:var(--text); }
.table-box strong { font-size:24px; }
.table-box span, .table-box em { color:var(--muted); font-style:normal; }
.table-box.ocupada { background:#fff7ed; border-color:#fed7aa; }
.table-box.pendentcobrar { background:#fef2f2; border-color:#fecaca; }
.table-box.lliure { background:#f0fdf4; border-color:#bbf7d0; }
.actions { display:flex; gap:12px; margin-top:20px; }
button { border:1px solid var(--line); background:#fff; color:var(--text); border-radius:14px; padding:11px 14px; cursor:pointer; font-weight:700; }
button.primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.pos-grid { display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-top:20px; }
.product-grid, .delivery-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.product-grid button, .delivery-channel { min-height:96px; text-align:left; display:flex; flex-direction:column; gap:6px; }
.product-grid span, .delivery-channel span { color:var(--muted); font-weight:500; }
.product-grid em { color:var(--primary); font-style:normal; }
table { width:100%; border-collapse:collapse; }
th, td { padding:12px; border-bottom:1px solid var(--line); text-align:left; }
.totals { border-top:1px solid var(--line); margin-top:14px; padding-top:14px; display:grid; gap:10px; }
.totals div { display:flex; justify-content:space-between; }
.actions.full { justify-content:stretch; }
.actions.full button { flex:1; }
.pill { background:#eef2ff; color:#3730a3; padding:6px 10px; border-radius:999px; font-size:13px; font-weight:700; }
@media (max-width: 900px) { .shell { flex-direction:column; } .sidebar { width:100%; height:auto; position:relative; } .kpi-grid, .grid.two, .pos-grid, .product-grid, .delivery-grid, .table-map { grid-template-columns:1fr; } }