/**
 * Ajustes de ancho para contenedores
 * Usa 80% del viewport en lugar de anchos fijos en píxeles
 */

/* Contenedores responsivos con porcentajes */

/* Pantallas pequeñas (móviles) - 95% */
@media (min-width: 576px) {
    .container,
    .container-sm {
        max-width: 95% !important;
    }
}

/* Tablets - 90% */
@media (min-width: 768px) {
    .container,
    .container-sm,
    .container-md {
        max-width: 90% !important;
    }
}

/* Tablets grandes / Laptops pequeñas - 85% */
@media (min-width: 992px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg {
        max-width: 85% !important;
    }
}

/* Desktop / Laptops - 80% */
@media (min-width: 1200px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 80% !important;
    }
}

/* Pantallas extra grandes - 80% */
@media (min-width: 1400px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 80% !important;
    }
}

/* Pantallas muy grandes (monitores 4K, etc) - Limitar a 1920px máximo */
@media (min-width: 2400px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1920px !important;
    }
}

/* Container-fluid siempre 100% menos padding */
.container-fluid {
    max-width: 100% !important;
    padding-left: 15px;
    padding-right: 15px;
}