:root{
  --hb-primary:#0d6efd;
  --hb-dark:#1b2434;
  --hb-dark-2:#232f44;
  --hb-text:#e9eef7;
  --hb-muted:#9aa6bd;
  --hb-bg:#f4f6fb;
}

*{box-sizing:border-box}
body{margin:0;background:var(--hb-bg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#1d2430}

/* ── Layout con sidebar ───────────────────────────────── */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:250px;background:var(--hb-dark);color:var(--hb-text);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh
}
.brand{
  display:flex;align-items:center;gap:.6rem;padding:1.3rem 1.25rem;
  font-size:1.2rem;font-weight:700;border-bottom:1px solid rgba(255,255,255,.07)
}
.brand i{color:#ffc107;font-size:1.5rem}
.nav-menu{display:flex;flex-direction:column;padding:1rem .75rem;gap:.25rem;flex:1}
.nav-menu a{
  display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;border-radius:.55rem;
  color:var(--hb-muted);text-decoration:none;font-weight:500;transition:.15s
}
.nav-menu a:hover{background:var(--hb-dark-2);color:#fff}
.nav-menu a.active{background:var(--hb-primary);color:#fff}
.sidebar-footer{padding:1rem .9rem;border-top:1px solid rgba(255,255,255,.07)}
.user-chip{display:flex;align-items:center;gap:.6rem;margin-bottom:.75rem}
.user-chip i{font-size:1.7rem;color:var(--hb-muted)}
.user-chip strong{display:block;font-size:.9rem}
.user-chip small{color:var(--hb-muted)}
.logout{
  display:flex;align-items:center;gap:.5rem;color:#ff8a8a;text-decoration:none;
  font-size:.9rem;font-weight:500
}
.logout:hover{color:#ff5252}

.content{flex:1;padding:1.75rem;overflow-x:auto}

/* ── Tarjetas y encabezados ───────────────────────────── */
.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap;gap:1rem}
.page-head h1{font-size:1.45rem;font-weight:700;margin:0}
.card-hb{background:#fff;border:1px solid #e8ecf3;border-radius:.85rem;padding:1.25rem;box-shadow:0 1px 3px rgba(20,30,60,.04)}
.card-hb + .card-hb{margin-top:1.25rem}

/* ── Tabla ────────────────────────────────────────────── */
.table thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--hb-muted);border-bottom:2px solid #eef1f6}
.table td{vertical-align:middle}
.ticket-id{font-family:ui-monospace,monospace;font-weight:600;color:var(--hb-primary)}

/* ── Badges de estatus ────────────────────────────────── */
.badge-estatus{padding:.35em .7em;border-radius:50rem;font-size:.78rem;font-weight:600}
.est-pendiente{background:#fff3cd;color:#7a5b00}
.est-en-proceso{background:#cfe2ff;color:#084298}
.est-cancelado{background:#f8d7da;color:#842029}
.est-agendado{background:#d1e7dd;color:#0f5132}

/* ── Login ────────────────────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1b2434,#0d2a52)}
.login-card{background:#fff;border-radius:1rem;padding:2.5rem;width:100%;max-width:400px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.login-card .brand-lg{text-align:center;margin-bottom:1.5rem}
.login-card .brand-lg i{font-size:2.5rem;color:#ffc107}
.login-card .brand-lg h2{font-size:1.35rem;font-weight:700;margin:.4rem 0 0}

/* ── Detalle ──────────────────────────────────────────── */
.detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.detail-item label{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.03em;color:var(--hb-muted);margin-bottom:.15rem}
.detail-item span{font-weight:500}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{padding:.85rem 0;border-bottom:1px solid #eef1f6}
.timeline li:last-child{border-bottom:none}
.timeline .meta{font-size:.82rem;color:var(--hb-muted)}

@media (max-width:768px){
  .layout{flex-direction:column}
  .sidebar{width:100%;height:auto;position:relative}
  .nav-menu{flex-direction:row;flex-wrap:wrap}
}