#app{display:none;flex-direction:column;height:100%;overflow:hidden}
.topbar{background:#0a0f1a;height:52px;display:flex;align-items:center;padding:0 16px;gap:10px;flex-shrink:0;position:sticky;top:0;z-index:100}
/* Botón de menú (hamburguesa): oculto en escritorio, solo aparece en
   pantallas chicas (ver @media más abajo) para abrir el sidebar como un
   panel deslizante en vez del carril fijo de siempre. */
.hamburger-btn{display:none;width:32px;height:32px;border:none;background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);border-radius:8px;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0}
.hamburger-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hamburger-btn:hover{background:rgba(255,255,255,.16)}
/* Fondo oscuro detrás del sidebar cuando está abierto en móvil — clic afuera
   para cerrarlo. En escritorio nunca se muestra. */
.sidebar-overlay{display:none;position:fixed;top:52px;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:240}
.sidebar-overlay.show{display:block}
.tb-logo{width:30px;height:30px;background:var(--p);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tb-logo svg{width:16px;height:16px;fill:none;stroke:white;stroke-width:2;stroke-linecap:round}
.tb-title{font-size:14px;font-weight:700;flex:1;color:white}
.sync-status{font-size:10px;color:rgba(255,255,255,.5);display:flex;align-items:center;font-family:var(--mono);background:rgba(255,255,255,.07);padding:3px 8px;border-radius:99px}
.tb-av{width:28px;height:28px;border-radius:50%;background:var(--p);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:white;flex-shrink:0}
.tb-name{font-size:12px;color:rgba(255,255,255,.8)}
.tb-role-pill{font-size:9px;color:rgba(255,255,255,.45);font-family:var(--mono);padding:2px 6px;background:rgba(255,255,255,.08);border-radius:99px}
.notif-bell{position:relative;cursor:pointer;padding:4px 8px;border-radius:8px;transition:.15s}
.notif-bell:hover{background:rgba(255,255,255,.1)}
.notif-bell svg{width:18px;height:18px;fill:none;stroke:rgba(255,255,255,.6);stroke-width:2;stroke-linecap:round}
.notif-dot{position:absolute;top:2px;right:4px;width:8px;height:8px;background:var(--red);border-radius:50%;border:2px solid #0a0f1a;display:none}
.notif-dot.show{display:block}
.notif-panel{position:absolute;top:54px;right:12px;width:320px;background:var(--white);border:1px solid var(--border);border-radius:var(--r2);box-shadow:var(--sh2);z-index:200;display:none}
.notif-panel.open{display:block}
.np-header{padding:10px 14px;border-bottom:1px solid var(--border);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:space-between}
.np-list{max-height:300px;overflow-y:auto}
.np-item{padding:10px 14px;border-bottom:1px solid var(--border);font-size:11.5px;cursor:pointer;transition:background .1s}
.np-item:hover{background:var(--bg)}.np-item:last-child{border-bottom:none}
.np-item.unread{border-left:3px solid var(--p);background:var(--p4)}
.np-item.info{border-left-color:var(--blue)}.np-item.warning{border-left-color:var(--amber)}.np-item.danger{border-left-color:var(--red)}
.np-item-title{font-weight:600;margin-bottom:2px}.np-item-sub{color:var(--ink3);font-size:10.5px}
.np-item-time{font-size:9.5px;color:var(--ink4);margin-top:3px;font-family:var(--mono)}
.np-empty{padding:20px;text-align:center;color:var(--ink3);font-size:12px}
.app-body{display:flex;flex:1;overflow:hidden;min-height:0}

/* ---- Sidebar expandido (menú lateral con etiquetas y grupos) ---- */
.sidebar{width:230px;background:#0a0f1a;display:flex;flex-direction:column;flex-shrink:0;min-height:0;transition:width .15s}

.sb-hdr{display:flex;align-items:center;gap:9px;padding:14px 14px;flex-shrink:0}
.sb-hdr-icon{width:30px;height:30px;background:var(--p);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sb-hdr-icon svg{width:16px;height:16px;fill:none;stroke:white;stroke-width:2;stroke-linecap:round}
.sb-hdr-title{font-size:13.5px;font-weight:700;color:white;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-collapse-btn{width:22px;height:22px;border:none;background:rgba(255,255,255,.08);color:rgba(255,255,255,.55);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}
.sb-collapse-btn:hover{background:rgba(255,255,255,.16);color:#fff}

.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 10px 10px;min-height:0}
.sb-sep{height:1px;background:rgba(255,255,255,.1);margin:8px 4px}

.sb-btn{width:100%;height:38px;border:none;background:none;cursor:pointer;border-radius:9px;display:flex;align-items:center;gap:10px;padding:0 10px;color:rgba(255,255,255,.55);transition:.15s;position:relative;margin-bottom:2px}
.sb-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;flex-shrink:0}
.sb-lbl{font-size:12.5px;font-weight:500;letter-spacing:.1px;color:inherit;flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-chev{width:13px!important;height:13px!important;opacity:.4;flex-shrink:0}
.sb-btn:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.92)}
.sb-btn.active{background:var(--p);color:white}
.sb-btn.active .sb-chev{opacity:.8}
.sb-tip{display:none}

.sb-group{margin-top:10px}
.sb-group-hdr{display:flex;align-items:center;gap:7px;padding:5px 10px;cursor:pointer;user-select:none;color:rgba(255,255,255,.35);font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase}
.sb-group-hdr span:first-child{white-space:nowrap}
.sb-group-hdr::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.1)}
.sb-group-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.sb-group-chev{width:11px;height:11px;stroke:rgba(255,255,255,.4);fill:none;stroke-width:2;flex-shrink:0;transition:.15s}
.sb-group.collapsed .sb-group-chev{transform:rotate(-90deg)}
.sb-group-items{display:flex;flex-direction:column;padding-top:2px}
.sb-group.collapsed .sb-group-items{display:none}

.sb-footer{display:flex;align-items:center;gap:9px;padding:12px 14px;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0;cursor:pointer}
.sb-footer:hover{background:rgba(255,255,255,.05)}
.sb-footer-av{width:30px;height:30px;border-radius:50%;background:var(--p);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:white;flex-shrink:0}
.sb-footer-info{flex:1;min-width:0}
.sb-footer-name{font-size:12.5px;font-weight:600;color:white;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-footer-role{font-size:10.5px;color:rgba(255,255,255,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-footer-chev{width:14px;height:14px;stroke:rgba(255,255,255,.4);fill:none;stroke-width:2;flex-shrink:0}

/* Modo colapsado: vuelve al carril angosto solo-iconos de siempre. */
.sidebar.collapsed{width:66px}
.sidebar.collapsed .sb-hdr-title,.sidebar.collapsed .sb-group-hdr span,.sidebar.collapsed .sb-group-hdr::after,.sidebar.collapsed .sb-group-dot,.sidebar.collapsed .sb-group-chev,.sidebar.collapsed .sb-lbl,.sidebar.collapsed .sb-chev,.sidebar.collapsed .sb-footer-info,.sidebar.collapsed .sb-footer-chev{display:none}
.sidebar.collapsed .sb-hdr{justify-content:center;padding:14px 6px}
.sidebar.collapsed .sb-collapse-btn{transform:rotate(180deg)}
.sidebar.collapsed .sb-btn{justify-content:center;padding:0}
.sidebar.collapsed .sb-group-items{display:flex!important;flex-direction:column}
.sidebar.collapsed .sb-group-hdr{justify-content:center;padding:5px 0}
.sidebar.collapsed .sb-footer{justify-content:center}
.sidebar.collapsed .sb-tip{display:block;position:absolute;left:60px;top:50%;transform:translateY(-50%);background:#1e293b;color:white;font-size:11px;padding:5px 10px;border-radius:7px;white-space:nowrap;pointer-events:none;opacity:0;transition:.15s;z-index:99;box-shadow:var(--sh2)}
.sidebar.collapsed .sb-btn:hover .sb-tip{opacity:1}

.main{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px;min-height:0}
.section{display:none}.section.active{display:block}

/* ---- Responsive: pantallas de tablet/celular ---- */
@media (max-width:768px){
  /* El topbar tiene demasiadas cosas para un celular angosto — se deja
     solo lo esencial (menú, logo, campanita, avatar, salir) y se esconde
     el resto (título, estado de sync, nombre/rol en texto). */
  .hamburger-btn{display:flex}
  .tb-title,.sync-status,.tb-name,.tb-role-pill{display:none}
  .topbar{padding:0 10px;gap:6px}
  .btn-out{padding:6px 10px;font-size:11px}

  /* El sidebar deja de ser un carril fijo que empuja el contenido, y pasa a
     ser un panel que se desliza por encima (position:fixed) — así el
     "main" no tiene que dejarle espacio y usa toda la pantalla. Arranca
     fuera de la vista (left negativo) y toggleMobileMenu() en main.js le
     agrega/quita la clase "mobile-open" para mostrarlo/ocultarlo. */
  .sidebar,.sidebar.collapsed{position:fixed;top:52px;left:-260px;bottom:0;width:250px;z-index:250;transition:left .2s;box-shadow:var(--sh2)}
  .sidebar.mobile-open{left:0}
  .main{padding:12px}
}