.shell{display:flex;min-height:100vh}
.shell-sidebar{width:280px;background:linear-gradient(180deg, #0f172a 0%, #1e293b 100%);color:#fff;padding:24px 18px;box-sizing:border-box;flex-shrink:0;border-right:1px solid rgba(255,255,255,.08)}
.shell-main{flex:1;display:flex;flex-direction:column}
.shell-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1rem 1.25rem;border-bottom:1px solid #f0f0f0;background:#fff;gap:1rem;flex-wrap:wrap;height:auto;z-index:20}
.shell-header::before{content:'';display:block;width:80px;height:80px;flex-shrink:0;margin-right:12px;background-image:url('../images/100aniversario-logo2.png');background-size:contain;background-repeat:no-repeat;background-position:center;border-radius:8px}
.page-title{font-size:1.5rem;margin:0}
.header-actions{display:flex;align-items:center;gap:0.75rem;position:relative;z-index:25;}
.user-dropdown{position:relative;display:inline-block;min-width:180px;}
.user-dropdown-trigger{display:flex;flex-direction:row;align-items:center;gap:0.6rem;border:none;background:transparent;color:inherit;padding:0.35rem 0.5rem;border-radius:0.6rem;cursor:pointer;text-align:left;}
.user-dropdown-trigger:hover{background:rgba(15,23,42,.06);}
.user-dropdown-menu{display:none;position:absolute;right:0;top:100%;margin-top:0.75rem;background:#fff;border:1px solid rgba(15,23,42,.12);border-radius:0.85rem;box-shadow:0 22px 44px rgba(15,23,42,.14);min-width:220px;max-width:280px;overflow:hidden;z-index:1000;}
.user-dropdown.open .user-dropdown-menu{display:block;}
.user-dropdown-menu .dropdown-title{padding:0.85rem 0.95rem 0.65rem;color:#0f172a;font-weight:700;font-size:0.9rem;border-bottom:1px solid rgba(15,23,42,.08);}
.user-dropdown-menu .dropdown-item{display:flex;align-items:center;gap:0.75rem;width:100%;border:none;background:transparent;padding:0.85rem 0.95rem;text-align:left;color:#0f172a;font-size:0.95rem;cursor:pointer;}
.user-dropdown-menu .dropdown-item:hover{background:#f8fafc;}
.user-dropdown-menu .dropdown-item i{min-width:1.25rem;text-align:center;color:#334155;}
.page-content{padding:1.25rem}
/* Support pages with alternative header (nav-header) */
.nav-header .brand-logo img, .brand-logo img { display: none !important; }
.nav-header .brand-logo::before, .brand-logo::before { content: ''; display: block; width: 80px; height: 80px; margin-right:12px; background-image: url('../images/100aniversario-logo2.png'); background-size: contain; background-repeat: no-repeat; background-position: center; border-radius:8px; }
@media (max-width:767px){.shell-header{padding:.65rem .85rem;height:auto}.shell-header::before{width:56px;height:56px}.nav-header .brand-logo::before, .brand-logo::before{width:56px;height:56px}.page-title{font-size:1.1rem}.header-actions{order:2;margin-left:auto}.user-dropdown-trigger{align-items:center} }
.sidebar-nav{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.sidebar-link{color:#e2e8f0;text-decoration:none;padding:10px 12px;border-radius:10px;display:flex;align-items:center;gap:10px}
.sidebar-link.active,.sidebar-link:hover{background:rgba(255,255,255,.1);color:#fff}
.sidebar-card{margin-top:24px;padding:16px;border-radius:16px;background:rgba(255,255,255,.08)}
.nav-title{color:#f8fafc;font-weight:700;margin-bottom:14px;font-size:0.95rem;letter-spacing:0.01em}
.nav-list{display:flex;flex-direction:column;gap:8px}
button.nav-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 14px;background:#f8fafc;color:#0f172a;border:1px solid rgba(15,23,42,.12);border-radius:12px;font-size:0.95rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s;box-shadow:none;text-shadow:none}
button.nav-item:hover, button.nav-item.active{background:#eef2ff;color:#0f172a;border-color:rgba(15,23,42,.2)}
button.nav-item span{color:inherit;background:transparent;text-shadow:none}
button.nav-item .pending-dot{width:10px;height:10px;border-radius:50%;background:#0f172a;display:inline-block;margin-left:10px}
#tabSection .tab-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 14px;background:rgba(248,250,252,0.08);color:#f8fafc;border:1px solid rgba(255,255,255,0.16);border-radius:12px;font-size:0.95rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s;box-shadow:none;text-shadow:none}
#tabSection .tab-btn:hover{background:rgba(255,255,255,0.14)}
#tabSection .tab-btn.active{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.24)}
#tabSection .tab-btn span{color:inherit;background:transparent;text-shadow:none}
#tabSection .badge-num{display:inline-flex;align-items:center;justify-content:center;min-width:24px;padding:0 8px;height:22px;border-radius:999px;background:#f8fafc;color:#0f172a;font-size:0.8rem;font-weight:700}
.shell-collapsed .shell-sidebar{transform:translateX(-110%);position:fixed;z-index:1050;transition:transform .25s ease}
.shell-collapsed .shell-main{flex:1}
#shell-toggle{display:none;position:relative;z-index:30}
@media (max-width:991px){
  .shell-sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-110%);transition:transform .25s ease;width:280px;z-index:1050}
  .shell:not(.shell-collapsed) .shell-sidebar{transform:translateX(0)}
  #shell-toggle{display:inline-block}
  .shell-main{width:100%}
}