:root{
  --sb-width:238px;
  --sb-bg:#0d1b2a; --sb-hover:#16304a; --sb-border:#1a2d3e;
  --sb-text:#b7c6d3; --sb-muted:#5c7387;
  --scg-est:#1565c0;        /* azul estacionamiento */
  --scg-est-dark:#0d47a1;
  --scg-est-soft:#e3f0fd;
  --scg-bg:#eef2f7;
  --ok:#198754; --warn:#f59e0b; --danger:#dc3545;
}
*{ box-sizing:border-box; }
body{
  font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--scg-bg); margin:0; padding-left:var(--sb-width);
  color:#1f2d3d; transition:padding-left .2s ease;
}
body.no-sb{ padding-left:0; }

/* ── Sidebar ─────────────────────────────────────────────── */
.scg-sidebar{
  position:fixed; top:0; left:0; width:var(--sb-width); height:100vh;
  background:var(--sb-bg); display:flex; flex-direction:column; z-index:1045;
  box-shadow:3px 0 12px rgba(0,0,0,.25);
}
.sb-brand{
  display:flex; align-items:center; gap:10px; padding:0 18px; height:66px;
  background:#0a1622; border-bottom:3px solid var(--scg-est); flex-shrink:0;
}
.sb-brand .b-ico{ color:var(--scg-est); font-size:1.55rem; line-height:1; }
.sb-brand .b-txt{ color:#fff; font-weight:800; letter-spacing:.3px; font-size:1.02rem; }
.sb-brand .b-txt small{ display:block; color:var(--sb-muted); font-weight:600; font-size:.62rem; letter-spacing:1.5px; text-transform:uppercase; }
.sb-nav{ flex:1; overflow-y:auto; padding:12px 0; }
.sb-nav::-webkit-scrollbar{ width:4px; } .sb-nav::-webkit-scrollbar-thumb{ background:var(--sb-border); }
.sb-group{ font-size:.6rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--sb-muted); padding:14px 20px 5px; }
.sb-link{
  display:flex; align-items:center; gap:12px; padding:11px 20px; color:var(--sb-text);
  text-decoration:none; font-size:.92rem; font-weight:500; border-left:3px solid transparent;
}
.sb-link i{ font-size:1.15rem; width:22px; text-align:center; }
.sb-link:hover{ background:var(--sb-hover); color:#fff; }
.sb-link.active{ background:var(--sb-hover); color:#fff; border-left-color:var(--scg-est); }
.sb-foot{ border-top:1px solid var(--sb-border); padding:12px 16px; }
.sb-foot .who{ color:#dbe6ef; font-size:.86rem; font-weight:600; }
.sb-foot .rol{ color:var(--sb-muted); font-size:.72rem; }

/* Topbar (móvil) */
.topbar{ display:none; }
@media(max-width:820px){
  body{ padding-left:0; }
  .scg-sidebar{ transform:translateX(-100%); transition:transform .2s ease; }
  body.sb-open .scg-sidebar{ transform:translateX(0); }
  .topbar{ display:flex; align-items:center; gap:12px; height:56px; padding:0 16px;
    background:var(--sb-bg); color:#fff; position:sticky; top:0; z-index:1040; }
  .topbar .burger{ background:none; border:none; color:#fff; font-size:1.5rem; }
}

/* ── Contenido ──────────────────────────────────────────── */
.content{ padding:22px 26px 60px; max-width:1180px; }
.page-title{ font-weight:800; font-size:1.45rem; margin:0 0 4px; }
.page-sub{ color:#64748b; margin:0 0 22px; }

/* Tarjetas de acción (caseta) */
.acciones{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; }
.accion{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:34px 20px;
  text-decoration:none; color:#1f2d3d; box-shadow:0 2px 6px rgba(15,40,80,.05);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s;
  cursor:pointer; text-align:center;
}
.accion:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(15,40,80,.12); border-color:var(--scg-est); color:#1f2d3d; }
.accion i{ font-size:2.7rem; color:var(--scg-est); }
.accion .t{ font-weight:700; font-size:1.12rem; }
.accion .d{ font-size:.82rem; color:#64748b; }
.accion.primaria{ background:var(--scg-est); color:#fff; border-color:var(--scg-est); }
.accion.primaria i,.accion.primaria .d{ color:#fff; }
.accion.warn i{ color:var(--warn); }
.accion.danger i{ color:var(--danger); }

/* KPIs */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:24px; }
.kpi{ background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:18px 20px; box-shadow:0 2px 6px rgba(15,40,80,.05); }
.kpi .lbl{ color:#64748b; font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.kpi .val{ font-size:1.85rem; font-weight:800; color:#0f2850; margin-top:4px; }
.kpi .val.money{ color:var(--scg-est-dark); }
.kpi i{ float:right; font-size:1.6rem; color:var(--scg-est); opacity:.5; }

/* Cards genéricas */
.card-scg{ background:#fff; border:1px solid #e2e8f0; border-radius:14px; box-shadow:0 2px 6px rgba(15,40,80,.05); }
.card-scg .card-scg-head{ padding:15px 20px; border-bottom:1px solid #eef1f5; font-weight:700; }
.card-scg .card-scg-body{ padding:20px; }

/* Cobro — número grande */
.big-amount{ font-size:3.4rem; font-weight:800; color:var(--scg-est-dark); line-height:1; }
.scan-input{ font-size:1.5rem; text-align:center; letter-spacing:3px; text-transform:uppercase; padding:16px; }

.btn-est{ background:var(--scg-est); border-color:var(--scg-est); color:#fff; }
.btn-est:hover{ background:var(--scg-est-dark); border-color:var(--scg-est-dark); color:#fff; }

.tag{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:.72rem; font-weight:700; }
.tag.hora{ background:#e3f0fd; color:#0d47a1; }
.tag.dia{ background:#e7f7ee; color:#0f7a3d; }
.tag.perdido{ background:#fdecec; color:#b42318; }

/* Ticket imprimible */
.ticket{
  width:280px; margin:0 auto; background:#fff; padding:16px; border:1px dashed #cbd5e1;
  font-family:'Courier New',monospace; color:#111; text-align:center;
}
.ticket h3{ margin:2px 0; font-size:1rem; }
.ticket .line{ border-top:1px dashed #999; margin:8px 0; }
.ticket .lbl{ text-align:left; font-size:.82rem; }
.ticket img{ width:180px; height:180px; }
.ticket .folio{ font-size:1.1rem; font-weight:700; }
@media print{
  body{ padding:0 !important; background:#fff !important; }
  .scg-sidebar,.topbar,.no-print{ display:none !important; }
  .content{ padding:0; max-width:none; }
  .ticket{ border:none; width:100%; }
}