/* ========================================
  ARCHIVO: layout.css
  DESCRIPCIÓN: Define la estructura general de la aplicación
  OBJETIVO: Crear el sistema de grid principal (sidebar + main-content)
   ======================================== */

/* ======================================
  SECTION 1: CONTENEDOR PRINCIPAL (App Container)
  Estructura base que contiene sidebar y main-content
   ====================================== */

  .app-container {
    /* Usar flexbox para alineación horizontal */
    display: flex;
    
    /* Altura mínima: ocupar al menos toda la pantalla */
    min-height: 100vh;
  }
  
  /* ======================================
    SECTION 2: CONTENIDO PRINCIPAL
    El área donde va el header, página y contenido
     ====================================== */
  
  .main-content {
    /* Expandir para ocupar el espacio disponible después del sidebar */
    flex-grow: 1;
    
    /* Importante: evitar que elementos internos rompan la estructura responsiva */
    min-width: 0;
    
    /* Dejar espacio a la izquierda para el sidebar fijo */
    margin-left: var(--sidebar-width);
    
    /* Layout vertical (header arriba, contenido abajo) */
    display: flex;
    flex-direction: column;
  }
  
  /* ======================================
    SECTION 3: ENCABEZADO (Header)
    Barra superior que contiene el título y perfil de usuario
     ====================================== */
  
  .app-header {
    /* Alto consistente definido en variables */
    height: var(--header-height);
    
    /* Color de superficie con efecto vidrio */
    background-color: var(--surface-color);
    
    /* Borde inferior sutil */
    border-bottom: 1px solid var(--border-color);
    
    /* Centrar contenido verticalmente y horizontalmente */
    display: flex;
    align-items: center;
    padding: 0 2rem;
    
    /* El header se queda visible mientras scrolleas (sticky) */
    position: sticky;
    top: 0;
    
    /* Asegurar que el header esté por encima del contenido */
    z-index: 10;
  }
  
  /* Encabezado h1 dentro de app-header */
  header h1 {
    /* Tamaño de fuente grande para identificar la sección */
    font-size: 1.5rem;
  }
  
  /* ======================================
    SECTION 4: CONTENIDO DE PÁGINA
    Área donde va el contenido específico de cada vista
     ====================================== */
  
  .page-content {
    /* Relleno interno para separar del borde */
    padding: 2rem;
    
    /* Ocupar espacio disponible después del header */
    flex-grow: 1;
    
    /* Permitir scroll si el contenido es muy largo */
    overflow-y: auto;
  }
  
  /* ======================================
    SECTION 5: RESPONSIVE (Media Queries)
    Ajustes para pantallas pequeñas (móviles y tablets)
     ====================================== */
  
  /* Para dispositivos con ancho máximo de 768px (tablets en vertical, móviles) */
  @media (max-width: 768px) {
    .main-content {
      /* En pantallas pequeñas, no dejar margen para sidebar */
      margin-left: 0;
    }
  }
  
  /* ========================================
    NOTAS DE IMPLEMENTACIÓN:
    
    1. FLEXBOX: El modelo flex permite que main-content se expanda
        automáticamente para ocupar el espacio disponible
    
    2. MIN-WIDTH: Es importante en flex para prevenir que elementos
        se encoja bajo su tamaño mínimo contenido
    
    3. Z-INDEX: El header tiene z-index: 10 para asegurar que
        esté sobre otros elementos cuando scrolleas
    
    4. STICKY: El header se queda visible mientras scrolleas,
        mejorando la navegación
    
    5. RESPONSIVE: En pantallas pequeñas se quita el margin-left
        porque el sidebar se mueve a la parte inferior (ver responsive.css)
     ======================================== */