/* ===== APP SHELL ===== */
.app{display:flex;height:100vh;overflow:hidden}

/* ===== SIDEBAR ===== */
.sidebar{width:var(--sidebar-w);background:linear-gradient(190deg,var(--indigo-dark) 0%,#161d4d 100%);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;transition:width .3s cubic-bezier(.4,0,.2,1);z-index:50;border-right:3px solid var(--cyan)}
.sidebar.collapsed{width:0;border-right-width:0}
/* El logotipo es oscuro (43% de sus píxeles no se leerían sobre el azul del
   menú), así que necesita fondo claro. En vez de un recuadro pegado al logo,
   todo el encabezado es una banda clara que se alinea con la barra superior
   y se lee como parte del diseño. */
.sb-header{padding:11px 16px;display:flex;align-items:center;gap:11px;
  background:var(--card);border-bottom:1px solid var(--border);min-height:var(--topbar-h)}
.sb-logo{height:44px;width:59px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sb-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.sb-logo span{color:var(--indigo);font-size:12px;font-weight:700;letter-spacing:.03em}
.sb-brand{color:var(--indigo);font-weight:700;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.sb-nav{flex:1;padding:12px 10px;overflow-y:auto}
.sb-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--radius);margin-bottom:3px;color:rgba(255,255,255,.6);font-size:14px;font-weight:400;transition:var(--transition);width:100%;border-left:3px solid transparent}
.sb-item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85)}
.sb-item.active{background:linear-gradient(90deg,rgba(0,173,239,.22),rgba(15,117,189,.06));color:#fff;font-weight:600;border-left-color:var(--cyan)}
.sb-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);flex-shrink:0;border-radius:var(--radius);background:rgba(255,255,255,.05);transition:var(--transition)}
.sb-item.active .sb-icon{color:#fff;background:linear-gradient(135deg,var(--blue),var(--cyan));box-shadow:0 3px 10px rgba(0,173,239,.35)}
.sb-item:hover .sb-icon{color:rgba(255,255,255,.9);background:rgba(255,255,255,.12)}
.sb-divider{height:1px;background:rgba(255,255,255,.06);margin:8px 14px}
.sb-section{padding:8px 14px 4px;font-size:11px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.sb-footer{padding:14px 20px;border-top:1px solid rgba(255,255,255,.06);font-size:11px;color:rgba(255,255,255,.25)}

/* ===== MAIN ===== */
.main-wrap{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.main-wrap::before{content:'';height:4px;flex-shrink:0;background:linear-gradient(90deg,var(--red),var(--indigo),var(--blue),var(--cyan))}

/* ===== TOPBAR ===== */
.topbar{height:var(--topbar-h);background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;flex-shrink:0}
.topbar-left{display:flex;align-items:center;gap:14px}
.topbar-toggle{width:38px;height:38px;border-radius:var(--radius);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--indigo);flex-shrink:0;transition:var(--transition)}
.topbar-toggle:hover{background:var(--indigo-bg);border-color:var(--indigo)}
.topbar-title{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.topbar-right{display:flex;align-items:center;gap:12px}
.topbar-bell{position:relative;width:38px;height:38px;border-radius:var(--radius);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text2);transition:var(--transition)}
.topbar-bell:hover{background:var(--cyan-bg);border-color:var(--cyan);color:var(--blue)}
/* Panel de actividad que abre la campana */
.topbar-notif{position:relative}
.notif-panel{
  position:absolute;top:46px;right:0;width:330px;max-height:400px;overflow-y:auto;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);z-index:150;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:var(--transition);
}
.notif-panel.show{opacity:1;visibility:visible;transform:translateY(0)}
.notif-header{
  padding:13px 16px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--indigo);border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,var(--indigo-bg),var(--cyan-bg));
}
.notif-cuerpo{padding:6px 0}
.notif-item{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border)}
.notif-item:last-child{border-bottom:none}
.notif-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.notif-texto{min-width:0}
.notif-accion{font-size:12px;font-weight:700;color:var(--text)}
.notif-detalle{font-size:12px;color:var(--text2);margin-top:1px;word-break:break-word}
.notif-meta{font-size:11px;color:var(--text3);margin-top:3px}
.notif-vacio{padding:26px 16px;text-align:center;font-size:13px;color:var(--text2)}

.topbar-account{width:38px;height:38px;border-radius:var(--radius);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text2);transition:var(--transition)}
.topbar-account:hover{background:var(--indigo-bg);border-color:var(--indigo);color:var(--indigo)}
.topbar-user{display:flex;align-items:center;gap:10px;padding:4px 8px 4px 4px;border-radius:var(--radius);transition:var(--transition);border:1px solid transparent;font-family:inherit;text-align:left}
.topbar-user:hover{border-color:var(--border)}
.topbar-user:hover{background:var(--bg)}
.topbar-avatar{width:36px;height:36px;border-radius:var(--radius);background:linear-gradient(135deg,var(--indigo),var(--blue));display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:600}
.topbar-info{line-height:1.3}
.topbar-name{font-size:13px;font-weight:600;color:var(--text)}
.topbar-role{font-size:11px;color:var(--text2)}
.btn-logout{padding:6px 14px;border-radius:var(--radius);border:1px solid var(--border);font-size:12px;color:var(--text2);font-weight:500;transition:var(--transition)}
.btn-logout:hover{background:var(--danger-bg);color:var(--danger);border-color:var(--danger)}

/* ===== CONTENT ===== */
.content{flex:1;overflow-y:auto;padding:28px;scroll-behavior:smooth}
.content::-webkit-scrollbar{width:5px}
.content::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}

/* ===== PAGE HEADER ===== */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.page-header h2{font-size:16px;color:var(--text2);font-weight:400}

/* --- Logotipo del menu lateral, mas grande en escritorio -------------------
   La caja del logo estaba limitada por la altura del encabezado (62px menos
   los margenes dejaban 40px utiles), y el logotipo se veia muy pequeño.

   --topbar-h se usa en exactamente dos sitios: este encabezado y la barra
   superior. Al subirlo crecen los dos a la vez, asi que la linea que separa
   el menu del contenido sigue cuadrando, que era el motivo de que estuvieran
   atados. Solo se aplica de 1025px en adelante: en telefono y tableta la
   barra sigue igual de compacta, que ahi el espacio vertical es lo que falta. */
@media (min-width: 1025px) {
  :root { --topbar-h: 84px; }

  .sb-header { padding: 8px 16px; gap: 13px; }

  /* 82 x 61 conserva la proporcion real del archivo (600x446, 1.35:1),
     asi que la imagen llena la caja sin deformarse ni dejar aire. */
  .sb-logo { width: 82px; height: 61px; }

  /* El nombre acompaña al logo para que no quede desproporcionado al lado. */
  .sb-brand { font-size: 19px; }
}