/* =============================================================
   sidebar-admin.css  —  Módulo Admin
   CSS completo y autónomo para el sidebar del administrador.
   ============================================================= */

/* ══════════════════════════════════════════════
   LAYOUT BASE — app-shell + sidebar
   ══════════════════════════════════════════════ */
.app-shell {
  display: flex;
  min-height: calc(100vh - 56px);
}

.main-area {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: #f1f5f9;
}

/* ══════════════════════════════════════════════
   SIDEBAR BASE
   ══════════════════════════════════════════════ */
#adm-sidebar {
  width: 230px;
  min-width: 230px;
  background: #0f172a;
  display: flex;
  flex-direction: column;
  padding: 0 0 12px 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .25s ease, min-width .25s ease;
  position: relative;
  z-index: 100;
}

/* ── Cabecera ── */
#adm-sidebar .sb-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 6px;
}
#adm-sidebar .sb-titulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
}

/* ── Links ── */
#adm-sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 8px;
  margin: 1px 8px;
  transition: background .15s, color .15s;
  white-space: nowrap;
  overflow: hidden;
}
#adm-sidebar a:hover {
  background: rgba(255,255,255,.08);
  color: #f1f5f9;
}
#adm-sidebar a.active {
  background: rgba(99,102,241,.25);
  color: #a5b4fc;
  font-weight: 600;
}

/* ── Íconos y texto ── */
#adm-sidebar .sb-icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
#adm-sidebar .sb-lnk {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Separador ── */
#adm-sidebar .sb-sep-line {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 8px 12px;
}

/* ── Etiquetas de sección ── */
#adm-sidebar .sb-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 18px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}

/* ── Colores por sección ── */
#adm-sidebar .sb-section-label.s-gestion  { color: #2ea8ff; }
#adm-sidebar .sb-section-label.s-empresas { color: #3dffa0; }
#adm-sidebar .sb-section-label.s-sistema  { color: #c792ea; }
#adm-sidebar .sb-section-label.s-cuenta   { color: #a1a1aa; }

/* ── Active con color de sección ── */
#adm-sidebar a[href="usuarios.php"].active,
#adm-sidebar a[href="carreras.php"].active,
#adm-sidebar a[href="periodos.php"].active {
  background: rgba(46,168,255,.15);
  color: #60b4ff;
  border-left: 3px solid #2ea8ff;
  padding-left: 13px;
}
#adm-sidebar a[href="empresas.php"].active,
#adm-sidebar a[href="convenios.php"].active {
  background: rgba(61,255,160,.13);
  color: #3dffa0;
  border-left: 3px solid #3dffa0;
  padding-left: 13px;
}
#adm-sidebar a[href="audit.php"].active,
#adm-sidebar a[href="configuracion.php"].active {
  background: rgba(199,146,234,.15);
  color: #d9b0f5;
  border-left: 3px solid #c792ea;
  padding-left: 13px;
}

/* ── Spacer ── */
#adm-sidebar .sb-spacer {
  flex: 1;
  min-height: 16px;
}

/* ── Salir ── */
#adm-sidebar .sb-salir {
  color: #f87171 !important;
  margin-top: 4px;
}
#adm-sidebar .sb-salir:hover {
  background: rgba(248,113,113,.15) !important;
  color: #fca5a5 !important;
}

/* ══════════════════════════════════════════════
   TOGGLE — sidebar-collapsed
   ══════════════════════════════════════════════ */
.app-shell.sidebar-collapsed #adm-sidebar {
  width: 54px;
  min-width: 54px;
}
.app-shell.sidebar-collapsed #adm-sidebar .sb-titulo,
.app-shell.sidebar-collapsed #adm-sidebar .sb-lnk,
.app-shell.sidebar-collapsed #adm-sidebar .sb-section-label,
.app-shell.sidebar-collapsed #adm-sidebar .sb-sep-line {
  opacity: 0;
  pointer-events: none;
}
.app-shell.sidebar-collapsed #adm-sidebar a {
  justify-content: center;
  padding: 9px 0;
  margin: 1px 6px;
  position: relative;
}
/* Tooltip al colapsar */
.app-shell.sidebar-collapsed #adm-sidebar a[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 58px;
  background: #1e293b;
  color: #f1f5f9;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  #adm-sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    height: calc(100vh - 56px);
    z-index: 200;
    transform: translateX(0);
    transition: transform .25s ease;
  }
  .app-shell.sidebar-collapsed #adm-sidebar {
    transform: translateX(-100%);
    width: 230px;
    min-width: 230px;
  }
}