/**
 * DIBA 2025 - CONTAINER FIX
 * 
 * Problema: Bootstrap 3 aplica padding-left y padding-right de 15px al .container
 * lo que crea espacios laterales en los bordes superior (gris) e inferior (rojo)
 * del header, cuando estos bordes deberían extenderse a todo el ancho.
 * 
 * Solución: Eliminar padding lateral del .container solo en desktop (>= 768px)
 * para header y main. En móvil se mantiene el padding para usabilidad.
 * 
 * Afecta a:
 * - Header (#region-main-header)
 * - Main (#content-wrapper)
 */

/* ========================================
   MÓVIL: Mantener padding por defecto
   En móvil es necesario el padding para que
   el contenido no se pegue a los bordes
   ======================================== */

/* En móvil (<768px) no se aplica ningún cambio,
   mantiene el padding de Bootstrap 3 por defecto */


/* ========================================
   DESKTOP: Eliminar padding lateral
   A partir de 768px (tablet+) eliminamos el
   padding lateral para que los bordes lleguen
   hasta los extremos de la pantalla
   ======================================== */

@media (min-width: 768px) {
    /* Header: Eliminar padding lateral del container */
    #header-container {
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Main content: Eliminar padding lateral del container */
    #main-container {
        /*padding-left: 0;*/
        /*padding-right: 0;*/
    }
    
}

/* ========================================
   COMPENSACIÓN DE PADDING
   Como eliminamos el padding del container,
   necesitamos aplicar el espaciado interno
   directamente a los elementos hijos
   ======================================== */

@media (min-width: 768px) {
    /* Aplicar padding a las rows internas de header y main */
    #header-container .row,
    #main-container .row {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ========================================
   CASOS ESPECIALES
   Algunos elementos pueden necesitar ajustes
   adicionales según la estructura específica
   ======================================== */

@media (min-width: 768px) {
    /* Navegación principal: si está dentro de container */
    nav.navbar .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Breadcrumbs: mantener espaciado adecuado */
    nav[aria-label="breadcrumb"] {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Banner de producto: si existe */
    .product-banner {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ========================================
   NOTAS DE IMPLEMENTACIÓN
   
   1. Se usa !important porque necesitamos pisar
      el estilo de Bootstrap 3 (.container)
   
   2. Solo se aplica en desktop (>= 768px) para
      mantener la usabilidad en móvil
   
   3. El padding se compensa aplicándolo a las
      .row internas en lugar del .container
   
   4. Esto permite que:
      - Los bordes (gris superior, rojo inferior)
        lleguen hasta los extremos de la pantalla
      - El contenido interno mantenga su margen
        de 15px respecto a los bordes
   
   5. Compatible con Bootstrap 3.3.7
   ======================================== */