/* =========================
   03-layout.css
   Estructura y cromática global
   ========================= */

/* Variables de layout */
:root { --navbar-height: 80px; }

/* Estructura base del documento */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Body como contenedor flex para sticky footer */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* El contenedor central que deja espacio al footer */
.content-wrapper {
  flex: 1 0 auto;
}

/* Navbar institucional */
.navbar-custom {
  background-color: var(--color-primary);
}
.navbar-custom .nav-link,
.navbar-custom .navbar-text {
  color: var(--color-surface) !important;
  font-weight: var(--font-weight-semibold);
}

/* Footer institucional */
.footer-custom {
  background: var(--color-primary);
  color: var(--color-surface);
  padding: 15px 0;
  flex-shrink: 0;
}

/* Links del footer */
.footer-link {
  color: var(--color-surface);
  font-size: 1.3rem;
  transition: color var(--transition-fast);
}
.footer-link:hover {
  color: var(--color-accent);
  text-decoration: none;
}

/* ===== Layout unificado para dashboard con sidebar ===== */

/* Contenedor general del dashboard: sidebar + main */
.dashboard-layout {
  display: flex;
  gap: 1rem;
  min-height: calc(100vh - var(--navbar-height));
}

/* Sidebar unificado */
.sidebar {
  background: #f5f5f5;
  border-right: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-sm);
  width: 260px;
  position: sticky;
  top: 0;
  height: calc(100vh - var(--navbar-height));
  display: flex;
  flex-direction: column;
  transition: width var(--transition), transform var(--transition);
  z-index: var(--z-sidebar, 1030);
}

/* Header del sidebar mejorado */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem .85rem;
  margin: .75rem;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--color-primary), #1f4b35);
  color: var(--color-surface);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}
.sidebar-header .sidebar-title {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .2px;
  opacity: .95;
}
.sidebar-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  transition: transform .2s ease, background .2s;
}
.sidebar-header:hover .sidebar-toggle-btn { background: rgba(255,255,255,.2); }
.toggle-icon { transition: transform .2s ease; }
.sidebar-collapsed .toggle-icon,
.toggle-icon.rotated { transform: rotate(180deg); }

/* Items del menú */
.sidebar-menu { 
  flex: 1 1 auto; 
  padding: .5rem 0; 
  overflow-y: auto;
}
.sidebar-menu .list-group-item {
  display: flex; 
  align-items: center; 
  gap: .6rem;
  border: none; 
  padding: .75rem 1rem;
  font-weight: 500; 
  color: var(--color-text);
  background: transparent; 
  transition: all var(--transition-fast);
}
.sidebar-menu .list-group-item i { 
  font-size: 1.25rem; 
  width: 1.25rem; 
  text-align: center; 
}
.sidebar-menu .list-group-item:hover { 
  background: rgba(35,79,53,.08); 
  color: var(--color-primary); 
}
.sidebar-menu .list-group-item.active { 
  background: var(--color-primary); 
  color: var(--color-surface); 
}

/* Estado colapsado */
.sidebar-collapsed { width: 72px !important; }
.sidebar-collapsed .sidebar-menu .list-group-item { justify-content: center; }
.sidebar-collapsed .sidebar-menu .list-group-item span { display: none; }

/* Backdrop para móvil */
.sidebar-backdrop {
  display: none;
  position: fixed; 
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1025;
}
body.sidebar-open .sidebar-backdrop { display: block; }

/* MAIN: contenedor principal */
.dashboard-main { 
  min-width: 0; 
  width: 100%; 
  padding-top: 1rem;
}

/* Wrapper de contenido de página */
.page-container {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 12px;
}

/* Separación vertical estándar */
.page-container > .section,
.page-container > .section-alt,
.page-container > .bg-white,
.page-container > .card,
.page-container > .rounded-3 {
  margin-bottom: 1.25rem;
}

/* Responsive: sidebar deslizante */
@media (max-width: 767.98px) {
  .dashboard-layout { flex-direction: column; gap: 0; }
  .sidebar {
    position: fixed; 
    top: var(--navbar-height); 
    left: 0; 
    height: calc(100vh - var(--navbar-height));
    transform: translateX(-100%);
    z-index: 1020;
  }
  .sidebar.show { transform: translateX(0); }
}