/* Archivo CSS para solucionar problemas de estilo después del login */

/* ===================
   CORRECCIÓN DE ESPACIOS BEIGE Y LAYOUT
====================== */

/* Override global para eliminar espacios laterales */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
    background-color: var(--pb-cream) !important;
}

body {
    padding-top: 80px !important; /* Solo el espacio necesario para el header */
}

/* ===================
   CORRECCIÓN DE CONTAINERS BOOTSTRAP
====================== */

/* Containers principales - eliminar max-width restrictions problemáticas */
.container, .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Container específico para hero y content */
.hero-section .container,
.modern-products .container,
section .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* ===================
   CORRECCIÓN DE SECCIONES
====================== */

/* Todas las secciones deben ocupar el ancho completo */
section {
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hero Section específico */
.hero-section {
    width: 100% !important;
    margin: 0 !important;
    padding: 60px 0 !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
}

/* Products Section */
.modern-products {
    width: 100% !important;
    margin: 0 !important;
    padding: 60px 0 !important;
}

/* ===================
   CORRECCIÓN DEL HEADER
====================== */

.modern-header {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--pb-burgundy) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
}

.modern-navbar {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===================
   CORRECCIÓN PARA MÓVILES
====================== */

@media (max-width: 991.98px) {
    body {
        padding-top: 70px !important;
    }
    
    /* Eliminar cualquier espacio lateral en móvil */
    .container, .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Hero section en móvil */
    .hero-section .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Bootstrap rows y columns */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    [class*="col-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    /* Cards de productos en móvil */
    .modern-product-card {
        margin-bottom: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Eliminar padding extra en secciones móvil */
    section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ===================
   ALERTA DE BIENVENIDA
====================== */

.alert {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    position: relative !important;
    z-index: 999 !important;
}

/* ===================
   CORRECCIÓN DE GRID DE PRODUCTOS
====================== */

.product-container, .products-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===================
   FOOTER
====================== */

footer, .copyright {
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    background-color: var(--pb-black) !important;
    color: var(--pb-white) !important;
}

/* ===================
   OVERRIDE CRÍTICO PARA ESPACIOS BEIGE
====================== */

/* Asegurar que no haya espacios beige en ningún lugar */
* {
    box-sizing: border-box !important;
}

/* Específicamente para el problema de espacios laterales */
html {
    background-color: var(--pb-cream) !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

/* Override para cualquier margen automático problemático */
.container-xl, .container-lg, .container-md, .container-sm {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* ===================
   CORRECCIÓN ESPECÍFICA PARA DESPUÉS DEL LOGIN
====================== */

/* Cuando el usuario está logueado, asegurar layout correcto */
.navbar-nav .dropdown-menu {
    background-color: var(--pb-white) !important;
    border: 1px solid var(--pb-burgundy) !important;
    box-shadow: var(--pb-shadow) !important;
}