/*
 * UTILIDADES DE LAYOUT - AZAHAR DATA INSIGHTS
 * Clases auxiliares para control de márgenes y anchos de contenido
 * Usar en combinación con style.css principal
 */

/* ============================================
   CONTENEDORES DE ANCHO
   ============================================ */

/* Contenedor estándar (igual que body por defecto) */
.container {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 3rem;
    padding-right: 3rem;
}

/* Contenedor estrecho (para texto largo, artículos, blog) */
.container-narrow {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 3rem;
    padding-right: 3rem;
}

/* Contenedor ancho (para contenido que necesita más espacio) */
.container-wide {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 3rem;
    padding-right: 3rem;
}

/* Contenedor a ancho completo (sin límite de ancho máximo) */
.container-full {
    max-width: none;
    padding-left: 3rem;
    padding-right: 3rem;
}

/* ============================================
   VARIACIONES DE PADDING
   ============================================ */

/* Sin padding lateral (para secciones con fondo a ancho completo) */
.no-padding-x {
    padding-left: 0;
    padding-right: 0;
}

/* Sin padding vertical */
.no-padding-y {
    padding-top: 0;
    padding-bottom: 0;
}

/* Sin padding en absoluto */
.no-padding {
    padding: 0;
}

/* Padding reducido (para espacios más compactos) */
.padding-small {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Padding aumentado (para espacios más amplios) */
.padding-large {
    padding-left: 4rem;
    padding-right: 4rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* ============================================
   SECCIONES CON FONDO
   ============================================ */

/* Sección con fondo de color que va de borde a borde */
.section-full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 3rem;
}

/* Contenido dentro de sección full-width (centrado con márgenes) */
.section-full-width .section-content {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   RESPONSIVE - CONTENEDORES
   ============================================ */

/* Tablets (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container,
    .container-narrow,
    .container-wide,
    .container-full {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    
    .padding-large {
        padding-left: 3rem;
        padding-right: 3rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .section-full-width {
        padding: 2.5rem;
    }
}

/* Móvil (max 768px) */
@media (max-width: 768px) {
    .container,
    .container-narrow,
    .container-wide,
    .container-full {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .padding-small {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    
    .padding-large {
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    
    .section-full-width {
        padding: 1.5rem;
    }
}

/* Pantallas grandes (1440px+) */
@media (min-width: 1440px) {
    .container,
    .container-narrow,
    .container-wide,
    .container-full {
        padding-left: 4rem;
        padding-right: 4rem;
    }
    
    .padding-large {
        padding-left: 5rem;
        padding-right: 5rem;
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    
    .section-full-width {
        padding: 4rem;
    }
}

/* Pantallas ultra anchas (1920px+) */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }
    
    .container-narrow {
        max-width: 1000px;
    }
    
    .container-wide {
        max-width: 1800px;
    }
    
    .container,
    .container-narrow,
    .container-wide,
    .container-full {
        padding-left: 5rem;
        padding-right: 5rem;
    }
    
    .section-full-width {
        padding: 5rem;
    }
}

/* ============================================
   UTILIDADES DE ESPACIADO
   ============================================ */

/* Márgenes verticales entre secciones */
.section-spacing {
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.section-spacing-small {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.section-spacing-large {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

/* Márgenes responsive para secciones */
@media (max-width: 768px) {
    .section-spacing {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    
    .section-spacing-small {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    
    .section-spacing-large {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
}