/* Banner responsive */
.banner-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-bottom: 1.5rem;
    overflow: hidden;
    container-type: inline-size; /* Habilita el contenedor de consulta */
    container-name: banner;
    /* Altura base para móvil */
    height: auto;
  }
  
  /* Estilos base para móvil (imagen completa) */
  .banner-mobile {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .banner-desktop {
    display: none;
    height: 231px; /* Altura fija para escritorio */
  }
  
  /* Estilos para escritorio (ancho > 1920px) */
  @container banner (min-width: 1920px) {
    .banner-container {
        height: 231px; /* Altura fija */
    }
    
    .banner-mobile {
        display: none; /* Ocultar imagen en escritorio */
    }
    
    .banner-desktop {
        display: flex;
        height: 100%;
        width: 100%;
    }
    
    .banner-left,
    .banner-right {
        flex: 0 0 auto;
        /*width: 960px;*/ /* Mitad de 1920px */
        height: 100%;
        background-size: 1920px 100%;
        background-repeat: no-repeat;
        background-position: center;
    }
    
    
    .banner-left {
        /*background-image: url('../../../public/images/gerencia2/paginas/banner_informacion_colaborador.png');*/
        background-position: left center;
        background-position-y: -1px;
        width: 890px;
    }
    
    .banner-right {
        /*background-image: url('../../../public/images/gerencia2/paginas/banner_informacion_colaborador.png');*/
        background-position: right center;
        background-position-y: -1px;
        width: 1030px;
    }
    
    .banner-middle {
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        /*background-color: #82bb00;*/
        margin: -1px 0;
    }
  }
  
  @media (min-width: 1920px) {
    .banner-container {
      height: 231px; /* Altura fija */
    }
  }
  
  @media (max-width: 575.98px) {
    .banner-mobile {
        width: 100%;
        height: 120px; /* Altura reducida para móviles */
        object-fit: cover;
        object-position: left center;
    }
  }