/* ── Layout ──────────────────────────────────────────────────── */
.main,#main{margin-left:var(--sidebar-w);flex:1;min-height:100vh;display:flex;flex-direction:column;background:var(--page-bg);transition:margin-left .28s var(--ease)}
.page,#page-content{padding:28px 32px;flex:1;animation:fadeUp .2s ease;min-width:0}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar,#sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);position:fixed;top:0;left:0;height:100vh;z-index:200;display:flex;flex-direction:column;overflow:hidden;transition:transform .28s var(--ease);will-change:transform}
.sidebar::after,#sidebar::after{content:'';position:absolute;top:0;left:0;right:0;height:220px;background:radial-gradient(ellipse at 20% 0%,rgba(0,156,222,.2) 0%,transparent 70%);pointer-events:none}

.sb-logo{padding:20px 18px 16px;border-bottom:1px solid var(--border-sb);position:relative;z-index:1;flex-shrink:0}
.sb-logo-row{display:flex;align-items:center;gap:10px}
.sb-logo-gem{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--c3) 0%,#006FA8 100%);display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 4px 14px rgba(0,156,222,.4);flex-shrink:0}
.sb-logo h1{font-family:'Poppins',sans-serif;font-size:1rem;font-weight:700;color:var(--c4);letter-spacing:.01em}
.sb-logo p{font-size:.65rem;color:var(--text-on-dark2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}

/* sb-header alias (multi-file index.html uses this) */
.sb-header{padding:20px 18px 16px;border-bottom:1px solid var(--border-sb);position:relative;z-index:1;flex-shrink:0;display:flex;align-items:center;gap:10px}
.sb-logo-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--c3) 0%,#006FA8 100%);display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 4px 14px rgba(0,156,222,.4);flex-shrink:0}
.sb-brand p{font-size:1rem;font-weight:700;color:var(--c4);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.sb-brand span{font-size:.62rem;color:var(--text-on-dark2)}

.sb-nav{flex:1;padding:10px 10px;overflow-y:auto;position:relative;z-index:1}
.sb-section{font-size:.58rem;font-weight:700;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.13em;padding:10px 8px 5px}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r);color:rgba(255,255,255,.6);font-size:.78rem;font-weight:500;cursor:pointer;transition:all .15s;user-select:none;position:relative;margin-bottom:1px}
.nav-item:hover{background:rgba(255,255,255,.1);color:var(--c4)}
.nav-item.active{background:var(--c3);color:var(--c4);font-weight:600;box-shadow:0 3px 12px rgba(0,156,222,.4)}
.nav-icon{width:15px;height:15px;flex-shrink:0;opacity:.7}
.nav-item.active .nav-icon{opacity:1}
.nav-badge{margin-left:auto;background:var(--rose);color:#fff;font-size:.58rem;font-weight:700;padding:1px 5px;border-radius:20px;min-width:16px;text-align:center}

.sb-footer{padding:10px;border-top:1px solid var(--border-sb);position:relative;z-index:1;flex-shrink:0}
.sb-user{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r);cursor:pointer;transition:background .15s;overflow:hidden}
.sb-user:hover{background:rgba(255,255,255,.08)}
.sb-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--c3),#006FA8);display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:#fff;flex-shrink:0;border:2px solid rgba(255,255,255,.2)}
.sb-user-info{flex:1;min-width:0}
.sb-user-info p:first-child{font-size:.72rem;font-weight:600;color:var(--c4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-user-info p:last-child{font-size:.62rem;color:var(--text-on-dark2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Topbar ──────────────────────────────────────────────────── */
.topbar,#topbar{position:sticky;top:0;background:var(--c4);border-bottom:2px solid var(--c3);padding:0 32px;height:56px;display:flex;align-items:center;justify-content:space-between;z-index:100;box-shadow:var(--shadow-sm);flex-shrink:0}
.topbar-left h2{font-family:'Poppins',sans-serif;font-size:1rem;font-weight:700;color:var(--c2)}
.topbar-left p{font-size:.68rem;color:var(--text-muted)}
.topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* ═══════════════════════════════════════════════════════
   MOBILE HEADER (oculto por defecto)
═══════════════════════════════════════════════════════ */
#mobile-header{
  display:none;position:fixed;top:0;left:0;right:0;
  height:var(--mob-bar-h);background:var(--c2);z-index:290;
  align-items:center;justify-content:space-between;padding:0 18px;
  box-shadow:0 2px 14px rgba(0,0,0,.35)
}
.mob-brand{display:flex;align-items:center;gap:9px}
.mob-logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--c3),#006FA8);display:flex;align-items:center;justify-content:center;font-size:15px}
.mob-rest-name{font-size:.88rem;font-weight:700;color:rgba(255,255,255,.9)}
#hamburger{background:transparent;border:none;padding:7px;border-radius:var(--r);cursor:pointer;color:rgba(255,255,255,.85);display:flex;flex-direction:column;gap:5px;transition:background .15s}
#hamburger:hover{background:rgba(255,255,255,.1)}
#hamburger span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:all .26s var(--ease);transform-origin:center}
body.sb-open #hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.sb-open #hamburger span:nth-child(2){opacity:0;transform:scaleX(0)}
body.sb-open #hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(1,33,105,.55);z-index:195;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:fadeIn .2s ease}
body.sb-open #sidebar-overlay{display:block}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — solo se activa en pantallas pequeñas
   El diseño desktop queda 100% intacto
═══════════════════════════════════════════════════════ */

/* ≤1100px: reducir sidebar levemente */
@media(max-width:1100px){
  :root{--sidebar-w:200px}
}

/* ≤768px: sidebar drawer + mobile header */
@media(max-width:768px){
  :root{--sidebar-w:0px}
  #mobile-header{display:flex}
  .sidebar,#sidebar{width:265px;min-width:265px;transform:translateX(-100%);box-shadow:var(--shadow-xl);z-index:300}
  body.sb-open .sidebar,body.sb-open #sidebar{transform:translateX(0)}
  .main,#main{margin-left:0;padding-top:var(--mob-bar-h)}
  .page,#page-content{padding:16px 18px}
  .topbar,#topbar{padding:0 18px;height:50px}
  .topbar-left h2{font-size:.92rem}
}

/* ≤540px */
@media(max-width:540px){
  .page,#page-content{padding:14px 14px}
  .topbar,#topbar{padding:0 14px}
  .topbar-right .btn-text{display:none}
  .hide-mobile{display:none!important}
}

/* ≤400px */
@media(max-width:400px){
  .page,#page-content{padding:12px 12px}
  .topbar,#topbar{padding:0 12px}
  .topbar-left h2{font-size:.85rem}
}