/* Modo tablet igual al móvil desde 768px */
@media (max-width: 768px) {
    .text-boton {
        display: none !important;
    }

    #navbarSupportedContent .separador {
        display: none;
    }

    /* Scroll horizontal en botones del footer cuando no entren */
    #iconsContainer {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    #iconsContainer::-webkit-scrollbar {
        height: 4px;
    }

    #iconsContainer::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
    }

    /* Hover effect para mostrar texto de botones */
    #iconsContainer .btn:hover .text-boton {
        display: inline !important;
    }
}

@media (max-width: 990px) {
    #navBotonesParaSidebar {
        width: 100%;
    }

    #navLogoCotizacion {
        width: 100%;
    }

        #navLogoCotizacion > div {
            margin: 0 !important;
        }

    #navbarSupportedContent {
        position: absolute;
        top: 45px;
        left: 4px;
        background: rgb(52, 58, 64);
        border-radius: 5px;
        padding: 4px;
        z-index: 9999;
    }

        #navbarSupportedContent .nav-item {
            margin-right: 8px;
        }

        #navbarSupportedContent .navbar-nav {
            flex-direction: row;
        }

    #btnNavbarSupportedContent {
        display: inline-block;
    }
}

@media (max-width: 768px) {
    #footer.sidebarHidden {
        margin-left: 0px !important;
    }

    #sidebar {
        min-width: 60px;
        width: 60%;
        text-align: center;
        margin-left: -60px !important;
    }

        #sidebar.active {
            max-width: none;
        }

    #content:not(.sidebarHidden,.login) {
        overflow: hidden;
        width: 40%;
        text-wrap: avoid;
        min-height: 100vh;
    }

        #content:not(.sidebarHidden,.login) > div {
            display: none;
        }

    nav .navbar:not(.sidebarHidden) #logoCotizaciones {
        display: none;
        background-color: red;
    }

    #sidebar.active {
        margin-left: 0 !important;
    }

    #sidebar .CTAs {
        display: none;
    }

    #sidebar .sidebar-header strong {
        display: block;
    }

    #sidebar ul li a {
        padding: 10px 10px;
        transition: none;
    }

        #sidebar ul li a span {
            font-size: 1.15em;
            transition: none;
        }

        #sidebar ul li a i {
            margin-right: 0;
            display: block;
        }

    #sidebar ul ul a {
        padding: 10px !important;
    }

    #sidebar ul li a i {
        font-size: 1.3em;
    }

    #sidebar {
        margin-left: 0;
    }

    #sidebarCollapse span {
        display: none;
    }

    .login-size {
        height: auto;
    }

    .carousel-inner {
        min-height: 220px;
        border-radius: 0 0 8px 10px;
    }

    .carousel-item {
        position: absolute;
        width: 100%;
        height: 100%;
    }

        .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0 0 5px 8px;
        }

    #logoCotizaciones p {
        font-size: 14px;
    }

    #logoCotizaciones .tipoCambioSpanMob {
        display: inline-block;
    }

    #logoCotizaciones .tipoCambioSpanDesk {
        display: none;
    }

    #content {
        display: none;
    }

        #content.sidebarHidden {
            display: block;
        }

    #sidebar.active {
        width: 100vw;
        height: 100vh;
    }

    .img-sidebarLogoLg {
        background: url('../../media/img/sidebar_logo_dux_lg.png') no-repeat;
        width: 98px;
        height: 46px;
    }

    #accesosContentGrid {
        max-height: 600px;
    }

    #footer #toggleFooter {
        display: flex;
    }

        #footer #toggleFooter button {
            background: none;
            border: none;
            color: #fff;
            font-size: 16px;
            margin: 0 auto;
        }

            #footer #toggleFooter button:focus {
                outline: none;
            }

            #footer #toggleFooter button svg {
                vertical-align: baseline;
            }

    #footer.footerOpen #toggleFooter button svg {
        transform: rotate(182deg);
    }

    #formPlantilla > div > div {
        max-width: none;
    }

    #desProgramaContainer {
        display: none;
    }

    #footer {
        margin-left: 0;
        grid-template-rows: repeat(1, 1fr);
    }

    #toggleFooter {
        grid-area: 2 / 1 / 3 / 2;
    }

        #toggleFooter button {
            display: flex;
            align-items: center;
        }

    #iconsContainer {
        grid-area: 2 / 2 / 3 / 9;
    }

    #footer.PlantillaShow .formPlantillaContainer {
        display: none;
    }

    #footer.footerOpen.PlantillaShow {
        grid-template-rows: repeat(2, 1fr);
    }

    #footer.footerOpen.DescripcionShow {
        grid-template-rows: repeat(2, 1fr);
    }

    #footer.footerOpen.PlantillaShow.DescripcionShow {
        grid-template-rows: repeat(3, 1fr);
    }

    #footer.footerOpen.DescripcionShow #desProgramaContainer {
        display: block;
    }

    #footer.footerOpen.PlantillaShow .formPlantillaContainer {
        display: block;
    }

    #footer.footerOpen.PlantillaShow .formPlantillaContainer {
        grid-area: 1 / 1 / 2 / 9;
    }

    #footer.footerOpen.PlantillaShow.DescripcionShow .formPlantillaContainer {
        grid-area: 2 / 1 / 3 / 9;
    }

    #footer.footerOpen.DescripcionShow #desProgramaContainer {
        grid-area: 1 / 1 / 2 / 9;
    }

    #footer.footerOpen.PlantillaShow.DescripcionShow #desProgramaContainer {
        grid-area: 1 / 1 / 2 / 9;
    }

    #footer.PlantillaShow #toggleFooter {
        grid-area: 1 / 1 / 2 / 2;
    }

    #footer.footerOpen.PlantillaShow #toggleFooter {
        grid-area: 2 / 1 / 3 / 2;
    }

    #footer.footerOpen.DescripcionShow #toggleFooter {
        grid-area: 2 / 1 / 3 / 2;
    }

    #footer.footerOpen.PlantillaShow.DescripcionShow #toggleFooter {
        grid-area: 3 / 1 / 4 / 2;
    }

    #footer.PlantillaShow #iconsContainer {
        grid-area: 1 / 2 / 2 / 9;
    }

    #footer.footerOpen.PlantillaShow #iconsContainer {
        grid-area: 2 / 2 / 3 / 9;
    }

    #footer.footerOpen.DescripcionShow #iconsContainer {
        grid-area: 2 / 2 / 3 / 9;
    }

    #footer.footerOpen.PlantillaShow.DescripcionShow #iconsContainer {
        grid-area: 3 / 2 / 4 / 9;
    }

    #content > nav > div {
        flex-direction: row !important;
    }

    #navBotonesParaSidebar {
        width: 122px;
        margin-left: 2px;
    }

    #navLogoCotizacion {
        width: 100%;
        margin: 0;
    }

    #Titulo {
        display: none;
    }

    #container-nav {
        flex-wrap: nowrap;
    }

    .selectize-dropdown .option,
    .selectize-dropdown .optgroup-header {
        padding: 8px 0.75rem;
    }

        .selectize-dropdown .option[data-selectable=""][data-value=""] {
            padding: 0 0.75rem;
        }

    #content.sidebarHidden {
        display: flex;
    }

    #footer.sidebarHidden #toggleFooter {
        margin-left: -15px !important;
    }

    #content {
        display: none;
    }

    #programaAyuda {
        margin-left: 50px;
    }
}

@media (min-width: 768px) {
    #logoCotizaciones p {
        display: inline;
    }

    #logoCotizaciones svg {
        display: inline;
    }

    #navBotonesParaSidebar {
        height: 45px;
    }

    #navLogoCotizacion {
        padding-left: 20px;
    }

    #navbarSupportedContent ul {
        margin-bottom: 2px;
    }
}

/* MEDIA QUERY CONTENT */
#tituloPrograma.media1024 {
    grid-area: 1 / 1 / 2 / 3;
    padding-right: 15px;
}

#formBuscar.media1024 {
    grid-area: 2 / 1 / 3 / 3;
    padding-left: 15px;
}

    #formBuscar.media1024 .selectize-control, #formBuscar.media1024 .busUsu, #formBuscar.media1024 .busPer {
        max-width: initial;
    }


#main.conTabs {
    grid-template-rows: auto auto auto 1fr;
}

#programaTabs.media1024 {
    grid-area: 3 / 1 / 4 / 3;
}

#programaContenido.media1024 {
    grid-area: 4 / 1 / 5 / 3;
}

/*---------------------------------
  PROGRESS STEP
---------------------------------*/

@media (min-width: 768px) {
    .progress-step {
        max-width: 100px;
    }
    .progress-icon {
        transform: translate(50%, 0);
        top: 0;
    }
    .progress-title {
        padding-left: 0px!important;
    }
    .progress-text {
        padding: 8px 0px;
    }

}
@media (max-width: 768px) {
    .progress-text {
        display: none!important;
    }
     #main.conTabs {
        grid-template-rows: auto auto 1fr;
    }

    #programaTabs.media1024 {
        display:none;
    }

    #programaContenido.media1024 {
        grid-area: 3 / 1 / 4 / 3;
    }
}