/* Paso 8.70/8.72: desktop/laptop primero — sidebar + header + main en
   grid, con un breakpoint razonable de tablet. */
#app {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
}

#sidebar {
  grid-area: sidebar;
  background: var(--surface);
  border-right: 1px solid var(--surface-border);
  padding: var(--space-4) var(--space-3);
}

/* Botón hamburguesa DENTRO de la zona que colapsa (no en el header): así el
   control vive junto a lo que controla, y sigue siendo alcanzable incluso
   con el sidebar ya colapsado a 72px (tres barras en CSS puro, sin librería
   de iconos ni imagen — misma filosofía "sin build step" del resto del
   frontend). */
#sidebar-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  margin-bottom: var(--space-3);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

#sidebar-toggle:hover,
#sidebar-toggle:focus-visible {
  background: var(--surface-alt);
}

#sidebar-toggle span {
  display: block;
  height: 2px;
  margin: 0 6px;
  background: var(--text-secondary);
  border-radius: 1px;
}

#sidebar .brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  margin-bottom: var(--space-5);
  color: var(--brand-primary);
}

.brand-logo {
  height: 28px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

#sidebar nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

#sidebar nav a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  text-decoration: none;
}

#sidebar nav a:hover,
#sidebar nav a[aria-current="page"] {
  background: var(--surface-alt);
  color: var(--brand-primary);
}

/* R4.2.1: agrupación puramente visual ("Administración") sobre Datos
   maestros/Reglas de asignación -- nunca un submenú nuevo, solo una
   etiqueta no interactiva entre enlaces del mismo <nav> plano de siempre. */
#sidebar nav .nav-section-label {
  margin-top: var(--space-2);
  padding: 0 var(--space-3);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

#app.sidebar-collapsed #sidebar nav .nav-section-label {
  display: none;
}

/* Letra de respaldo (F/S/E) para cuando el sidebar está colapsado y
   span.label se oculta — sin esto el enlace quedaría vacío, solo una caja
   clicable sin ninguna pista de a dónde lleva. Mismo lenguaje visual que el
   propio logo/favicon (letra sobre color). Oculta por defecto: solo se
   muestra en los dos casos en que .label se oculta (ver más abajo). */
#sidebar nav a .nav-icon {
  display: none;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--brand-primary);
  font-weight: 700;
  /* Mismo tamaño que el resto de las etiquetas del menú (heredado, 14px) —
     no se reduce solo porque esté dentro de una caja pequeña. */
}

#header {
  grid-area: header;
  background: var(--surface);
  border-bottom: 1px solid var(--surface-border);
  display: flex;
  align-items: center;
  /* Único contenido ahora es el menú de usuario (el toggle vive en el
     sidebar) — se ancla a la derecha en vez de space-between entre dos
     elementos. */
  justify-content: flex-end;
  padding: 0 var(--space-5);
}

#header .user-name {
  color: var(--text-secondary);
  font-size: 13px;
}

.user-menu-button {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 13px;
}

.user-menu-button:hover,
.user-menu-button:focus-visible {
  background: var(--surface-alt);
}

#page-root {
  grid-area: main;
  padding: var(--space-5);
  overflow: auto;
}

/* Colapso manual (botón hamburguesa, #sidebar-toggle en app.js) — mismo
   ancho de 72px que el breakpoint responsive de abajo, para que ambos
   mecanismos sean coherentes entre sí y puedan coexistir sin contradecirse. */
#app.sidebar-collapsed {
  grid-template-columns: 72px 1fr;
}

#app.sidebar-collapsed .brand-text,
#app.sidebar-collapsed #sidebar nav a span.label {
  display: none;
}

#app.sidebar-collapsed .brand-logo {
  max-width: 40px;
}

#app.sidebar-collapsed #sidebar nav a .nav-icon {
  display: flex;
}

@media (max-width: 900px) {
  #app {
    grid-template-columns: 72px 1fr;
  }

  .brand-text,
  #sidebar nav a span.label {
    display: none;
  }

  .brand-logo {
    max-width: 40px;
  }

  #sidebar nav a .nav-icon {
    display: flex;
  }
}