/**
 * layout-1150.css — Control maestro de anchos de página
 * Archivo: /httpdocs/dinamico/css/layout-1150.css
 * Última modificación: 2026-03-01 20:50
 *
 * PROBLEMA RESUELTO: Bootstrap .container aplica max-width
 * por breakpoint (720px, 960px, 1140px) que son MAS ESTRECHOS
 * que la cabecera (1150px o 100%). Solución: sobreescribir
 * el max-width de Bootstrap en #tamano para que siempre
 * coincida con la cabecera.
 */

/* ============================================================
   ESCRITORIO GRANDE (>=1200px) - ancho fijo 1150px
   Cabecera: 1150px (cabecera-nueva.css)
   Contenido: 1150px (aquí)
   ============================================================ */
@media (min-width: 1200px) {
    #tamano {
        width: 1150px !important;
        max-width: 1150px !important;
    }
    #navegacion_ {
        width: 1150px !important;
    }
    #col_central {
        width: 900px !important;
        max-width: 900px !important;
    }
    #cabecera_pc {
        width: 1150px !important;
    }
}

/* ============================================================
   TODAS LAS PANTALLAS MENORES (<1200px)
   Cabecera: width:100% (cabecera-nueva.css @media max-width:1170px)
   Contenido: FORZAR width:100% sobreescribiendo Bootstrap .container
   
   Bootstrap aplica:
     >=992px → max-width:960px
     >=768px → max-width:720px  
     >=576px → max-width:540px
   
   Esto causa que el contenido sea mas estrecho que la cabecera.
   Solución: sobreescribir con !important en cada breakpoint.
   ============================================================ */
@media (min-width: 576px) and (max-width: 1199px) {
    #tamano.container,
    #tamano {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Pantallas muy grandes (1920+) */
@media (min-width: 1920px) {
    #navegacion_ {
        width: 1150px !important;
    }
}

/* ============================================================
   COLUMNA IZQUIERDA — 250px
   ============================================================ */
@media (min-width: 768px) {
    .col-md-3.col-lg-3.col-xl-3[style*="215px"],
    .col-md-3.col-lg-3.col-xl-3[style*="max-width"] {
        max-width: 250px !important;
        width: 250px !important;
    }
}

/* ============================================================
   PIE DE PÁGINA — 1150 max
   ============================================================ */
.footer-wrapper {
    max-width: 1150px !important;
}
/* ============================================================
   NAV + FOOTER — max-width 1150px
   Evita que el color de fondo se extienda por los laterales
   de la página en pantallas anchas.
   Última modificación: 2026-03-12 17:55
   ============================================================ */
@media (min-width: 1200px) {
    /* Barra de navegación marrón */
    #bordes_cabecera {
        max-width: 1150px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Barra de nav móvil */
    #bordes_barramovil {
        max-width: 1150px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Footer completo */
    .footer-ciberaula {
        max-width: 1150px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Cabecera dinámica (ya tiene width:1150px pero sin margin:auto explícito) */
    .cb-header {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}