/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*---------------------------GENERAL-CLASSES----------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/

*{
    /*margin: 0 !important;
    padding: 0 !important;*/
    
    /*font-family: "Raleway-regular";*/
    font-family: "Nimbus-Sans-light";

    /*variables de color globales*/
    --color-orange: rgb(34,60,112);
    --color-blue-opaco: rgba(34, 60, 112, 0.85);
    --color-blue-100rgb: 56, 100, 188; 
    --color-gray: rgb(77,77,77);
    --color-gris-navbar: rgb(179,179,179);
    --color-gris-navbar-item: rgb(153,153,153);

    /*Variables de fondo de texto*/
    /*Nosotros - historia de la facultad*/
    --color-gris-nosotros: rgb(242,242,242);
    --color-gris-nosotros-600: rgb(221, 221, 221);
    --color-gris-nosotros-600rgb: 221, 221, 221;

    --border-radius: 0.25rem;/*Otros valores: 1rem, 0.75rem ,0.5rem, 0.25rem, 5px, 2px*/
}

/*-----------------------------------------------------------------------------*/
/*---------------------------------FONT----------------------------------------*/
/*-----------------------------------------------------------------------------*/

@font-face{
    font-family: "Gothic-regular"; 
   src:  url("../fonts/gothic/GOTHIC.TTF");
}
@font-face{
    font-family: "Gothic-bold";
    src:  url("../fonts/gothic/GOTHICB.TTF");
}
@font-face{
    font-family: "Raleway-regular";
    src:  url("../fonts/Raleway/Raleway-Regular.ttf");
}
@font-face{
    font-family: "Raleway-bold";
    src:  url("../fonts/Raleway/Raleway-Bold.ttf");
}

@font-face{
    font-family: "Raleway-italic";
    src:  url("../fonts/Raleway/Raleway-Italic.ttf");
}

/*PTSans*/
@font-face{
    font-family: "PTSans-regular"; 
   src:  url("../fonts/PTSans/PTSans-Regular.ttf");
}

@font-face{
    font-family: "PTSans-italic"; 
   src:  url("../fonts/PTSans/PTSans-Italic.ttf");
}

@font-face{
    font-family: "PTSans-bold"; 
   src:  url("../fonts/PTSans/PTSans-Bold.ttf");
}

@font-face{
    font-family: "PTSans-bolditalic"; 
   src:  url("../fonts/PTSans/PTSans-BoldItalic.ttf");
}

/*Helvetica Neue medium extended*/
@font-face{
    font-family: "HelveticaNeue-regular"; 
   src:  url("../fonts/Helvetica\ Neue/Helvetica\ Neue\ Regular/Helvetica\ Neue\ Regular.otf");
}

@font-face {
    font-family: "Nimbus-Sans-light";
    src: url("../fonts/Nimbus-Sans-Light/Nimbus-Sans-D-OT-Light_32752.ttf") format('truetype');
}

/*Nimbus Sans light - alternativa similar a helvetica light, ya que la ultiam es de paga*/
*{
    box-sizing: border-box;
}

/* .font-size{    
    font-size: 320%;
} */

.load-hidden {
    visibility: hidden;
}

/*-----------------------------------------------------------------------------*/
/*------------------------------MENU CONTAINER--------------------------------*/
/*-----------------------------------------------------------------------------*/

header{
    border: none;    
}

/*--------------------------------POSITION------------------------------------*/

.relative{
    position: relative;
    /* float: left; */
    height: auto;
}

.absolute{
    position: absolute;
}

.flex-center{
    text-align: left !important;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.flex-align-vleft {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: flex-start;
}

.flex-align-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
}


/*-------------------------------ANIMATION------------------------------------*/

.transition{
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition:all 0.5s ease 0s;
    -o-transition:all 0.5s ease 0s;
    -ms-transition:all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}


/*----------------------------------------------------------------------------*/
/*---------------------------------SHADOWS------------------------------------*/


/*------------------------------SHADOW CENTER----------------------------------*/

.shadow-center{
    -webkit-box-shadow: 0px 0px 11px -4px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 11px -4px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 11px -4px rgba(0,0,0,0.75);
}


.shadow-center1{
    -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
}

.shadow-center2{
    -webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75);
}

.shadow-center3{
    -webkit-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.75);
}



/*------------------------------SHADOW UP-------------------------------------*/

.shadow-up{
    -webkit-box-shadow: 0px -2px 7px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -2px 7px -2px rgba(0,0,0,0.75);
    box-shadow: 0px -2px 7px -2px rgba(0,0,0,0.75);
}

/*------------------------------SHADOW DOWN-----------------------------------*/

.shadow-down{
    -webkit-box-shadow: 0px 2px 7px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 7px -2px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 7px -2px rgba(0,0,0,0.75);
}

/*----------------------------------------------------------------------------*/
/*-------------------------------SN--------------------------------*/
/*----------------------------------------------------------------------------*/

.networks{
    width: auto;
    /* height: 100%; */
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.5vw;
}

.networks a{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 100%;
    margin: 0 0 !important;
    color: var(--color-orange);
    text-decoration: none;
}

#socials > a{
    padding: 0.5rem 0.25rem!important;
    /* border: 2px solid black; */
}

.icono-navbar{
    margin-top: 1.5%!important;
    margin-left: 5%!important;
    margin-right: 5%!important;
    cursor: pointer;
}

.icono-navbar i{
    display:flex;
    justify-content:center;
    align-items:center;
}

.networks .icono-navbar{
    transition: color 0.5s, transform 0.3s/*, font-size 0.5s*/;
    background-color: transparent!important;
    transform-origin: top left;
}

.networks .icono-navbar:nth-of-type(1):is(:hover,:focus){
    color: #0863f7 !important;
    transform: scale(1.05);
    /*font-size: 105% !important;*/
}

.networks .icono-navbar:nth-of-type(2):is(:hover,:focus){
    color: /*#690588*/#F58529 !important;
    transform: scale(1.05);
    /*font-size: 105% !important;*/
}

.networks .icono-navbar:nth-of-type(3):is(:hover,:focus){
    color: /*#af230a*/#c3352e !important;
    transform: scale(1.05);
    /*font-size: 105% !important;*/
}

.networks .icono-navbar:nth-of-type(4):is(:hover,:focus){
    color: #161616 !important;
    transform: scale(1.05);
    /*font-size: 105% !important;*/
}

.icono-navbar2{
    margin-top: 1.5%!important;
    margin-left: 5%!important;
    margin-right: 5%!important;
    cursor: pointer;
    clip-path: circle(50% at 50% 50%);
}

.icono-navbar2 i{
    display:flex;
    justify-content:center;
    align-items:center;
}

.networks .icono-navbar2{
    transition: color 0.5s/*, font-size 0.5s*/;
    background-color: transparent!important;
}

.titulo-bloque{
    margin-bottom: 1rem;
}

.flag{
    width:auto;
    height: 90%;
    cursor: pointer;
    border: 4px solid;
    border-color: transparent;
    transition: 0.5s border-color ease-in-out;
    border-radius: 50% 50% 50% 50%;
}

.flag:is(:hover,:focus){
    border-color: rgba(0, 0, 0, 0.6);
}

/*Search*/
#search{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
    height: 8.5vw;
    padding-right:3.25vw;
}

#search input{
    /*padding: 0.30rem 0.50rem !important;*/
    /*border: none;*/
    color: var(--color-gray);
    margin-right: 5%!important;
    font-size: clamp(1rem,110%,2rem) !important;
}

#search .form-control:focus{
    box-shadow: none !important;
    border-color: var(--color-gris-navbar);
}

#search div{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: space-around;
    align-items: center;
    justify-content: center;
}

#search button{
    padding: 0.375rem !important;
    /*Cambio de los estilos de BS5 para que el color sea azul*/
    --bs-btn-color: var(--color-orange);
    --bs-btn-border-color: var(--color-orange);
    --bs-btn-hover-bg: var(--color-orange);
    --bs-btn-hover-border-color: var(--color-orange);
    --bs-btn-focus-shadow-rgb: var(--color-blue-100rgb);
    --bs-btn-active-bg: rgb(var(--color-blue-100rgb));
    --bs-btn-active-border-color: var(--color-orange);
}

/*Footer*/
#footer{
    background-color: white;
    color: var(--color-orange);
    display: flex;
    column-gap: 2rem;
    row-gap: 0.5rem;
    padding-top: 1% !important;
    padding-bottom: 1% !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    font-size: 3vh;
    text-align: center;
    padding: 0% 7.5%;
}

.footer-text{
    font-size: clamp(1rem, 2.75vh, 2.75rem);
}

#umg-footer img{
    width: 100%;
    height: auto;
    max-height: 100%;
}

/*Estilos de Componente - Botón*/
.btn-base{
    background-color: var(--color-gris-nosotros);
    display: flex;
    width: fit-content;
    gap: 0.25rem;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    color: var(--color-gray);
    padding-left: 1.75%!important;
    padding-right: 1%!important;
    padding-top: 1.25%!important;
    padding-bottom: 1.25%!important;
    margin-top: 1vh!important;
    margin-bottom: 1vh!important;
    border: 1px solid rgb(164,164,164);
    /* border: 1px solid blue; */
    border-radius: var(--border-radius);
    transition:  0.3s linear all;
}
/*Variante usada en inicio en noticias*/
.btn-base-fs-1{
    font-family: "PTSans-bold";
    font-size: 2.5vh;
}
/*Variante utilizada en el botón "Ver más" de pregrados, posgrados y en ver más SPFD*/
.btn-base-fs-2{
    align-items: flex-end;
    font-family: "PTSans-bold";
    font-size: 3vh;
    padding-left: 1.25%!important;
    padding-right: 1.25%!important;
    padding-top: unset!important;
    padding-bottom: unset!important;
}
/*Variante utilizada en el botón "Enviar" de pregrados*/
.btn-base-fs-3{
    align-items: flex-end;
    font-family: "PTSans-bold";
    font-size: 2.5vh;
    padding-left: 1.15%!important;
    padding-right: 1.15%!important;
    padding-top: unset!important;
    padding-bottom: unset!important;
}

/*Variante utilizada en el botón "Actualizar" en horarios*/
.btn-base-fs-4{
    font-family: "PTSans-bold";
    font-size: 3vh;
    padding: 1.25%!important;
}

/*For icon Caret or arrow*/
.btn-base > i {
    font-size: unset;
    display: flex;
    align-items: baseline;
}

.btn-base-fs-2 > i{
    font-size: 2vh;
    padding-bottom: 3%!important;
}

.btn-base-fs-2.yt-icon > i{
    font-size: 2.5vh;
    padding-bottom: 2.5%!important;
}

.btn-base-fs-3 > i{
    font-size: 2vh;
    padding-bottom: 8%!important;
}

.btn-base:is(:hover, :focus){
    border: 1px solid var(--color-gray);
    background-color: var(--color-gris-nosotros-600);
}

.btn-base:active{
    background-color: var(--color-orange);
    color: white;
}

.btn-base:disabled,
.btn-base[disabled]{
    border: 1px solid rgb(164,164,164);
    background-color: var(--color-gray);
    color: rgb(164,164,164);
}

header{
    /*Para que se quede flotando arriba*/
    position: sticky;
    top: 0px;
    width: 100%;
    /*height según el hijo*/
    height: auto;
    z-index: 999;
    min-height: 8vw;
}

/*Nuevo menú rediseñado*/
.new-navbar-container{
    display: flex;
    flex-direction: column;
    /* height: 8vw; */
    /*Solo mientras se esta diseñando*/
    /* max-height: 8vw; */
    /* un max Para que no quede muy grande, como estaba antes es de 11vw y 8vw en movil*/
    background-color: var(--color-orange);
    /* backdrop-filter: blur(5px); */
    /* border: 3px solid skyblue; */
}

.new-navbar-up{
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;/*tres espacios*/
    grid-template-rows: 1fr;/*una fila*/
    grid-template-areas: "empty logo search";
    /*Este grid se ajustará en móvil para mover el logo*/
    justify-content: center;
    align-items: center;
    height: auto;
    padding: max(1%,1rem) 1vw 0% 1vw;/*0.75% 1vw 0 1vw*/
    /* border: 3px solid orange; */
    width: 100%;
}

.new-navbar-logo{
    grid-area: logo;
    max-width: 100%;
    max-height: 6vw;
    /* background-color: black; */
    margin-top: 0.25%;
    margin-bottom: 0.25%;
    /* box-shadow: 0px 0px 0px 3px red; */
    width: fit-content;
    margin: auto;
}

.new-navbar-logo img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 6vw;/*igual que el contenedor*/
}

.new-navbar-search{
    grid-area: search;
    height: auto;
    max-height: max(2vw,2rem);
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
}

.new-navbar-search div{
    /* border: red solid 3px; */
    display: flex;
    /* gap: 0.5rem; */
    max-width: min(60%,20rem);
    /* background-color: yellow; */
}

.new-navbar-search input{
    color: var(--color-gray);
    /* padding-right: 5%; */
    padding: clamp(0.25em,0.2vw,0.5em);
    /* font-size: clamp(0.9rem,110%,1.9rem); */
    font-size: min(0.9rem,110%);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.new-navbar-search .form-control:focus{
    box-shadow: none;
    border-color: var(--color-gris-navbar);
}

.new-navbar-search button{
    /* padding: 0.375rem !important; */
    padding: 0rem !important;
    /* border-radius: 0 var(--border-radius) var(--border-radius) 0; */
    /* border-radius: 0 0 0 0; */
}

.new-navbar-search button:nth-child(3){
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.searchv3-test > .dynamic,
.searchv3-test > .d-toggler{
    transition: transform 0.3s ease-in-out, border-radius 0.3s ease-in-out;
    transform-origin: left top;
}

.searchv3-text > .d-toggler[aria-expanded="false"]{
    border-radius: var(--border-radius);
}

.searchv3-text > .d-toggler[aria-expanded="true"]{
    border-radius: 0;
}

.searchv3-test > .dynamic[aria-hidden="true"]{
    transform: scaleX(0);
}

.searchv3-test > .dynamic[aria-hidden="false"]{
    transform: scaleX(1);
}

.new-navbar-toggler{
    grid-area: toggle;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* background-color: green; */
}

.new-navbar-toggler input{
    display: none;
}

.new-navbar-toggler label{
    border: 2px solid white;
    border-radius: var(--border-radius);
    padding: 0.35rem;
    cursor: pointer;
    stroke: white;
    transition: 0.3s ease-in-out all;
}

.new-navbar-toggler input:checked + label{
    background: white;
    stroke: var(--color-orange);
}

.new-navbar-toggler label:is(:hover,:focus){
    background: white;
    border-color: var(--color-orange);
    stroke: var(--color-orange);
}

.new-navbar-toggler label:active{
    background: var(--color-gris-nosotros);
    border-color: var(--color-gray);
    stroke: var(--color-gray);
}

.new-navbar-toggler .toggle-icon {
    display: flex;
    width: max(4vw,30px);
    height: max(4vw,30px);
}

.new-navbar-low{
    display:flex;
    position: relative;
    flex-wrap: nowrap;
    width: 100%;
    /* border: 3px solid plum; */
    justify-content: center;
    /* gap: 1px; */
    color: white;
    padding-top: 0.5rem;
}

.new-navbar-low .nav-item{
    padding: 0.05% 2.25%;/*pendiente ver de cuanto, solo horizontal*/
    /*0.25vw o podríamos poner 2.25rem*/
    color: white;
    text-decoration: none;
    text-align: center;
    /* border: 3px solid green; */
    font-size: clamp(1rem, 2.75vh, 3rem);
    font-family: "Nimbus-Sans-light";
}

.new-navbar-low .nav-item:is(:hover,:focus){
    background-color: var(--color-gris-navbar);
}

.new-navbar-low a{
    /*Para los que son solo enlaces*/
    display: flex;
    align-items: center;
}

/*Submenu nivel 1*/
.new-navbar-low .submenu-n1{
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: transparent;
    border: 0;
}

.new-navbar-low .submenu-n1 .icon{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2.5%;
    stroke-width: 3;
}

.new-navbar-low .submenu-n1[aria-expanded=true]{
    background: var(--color-gris-navbar);
}

.new-navbar-low .submenu-n1[aria-expanded=true] .icon{
    transform: scaleY(-1);
}

.new-navbar-low .submenu-n1 .icon::before{
    /* width: .85rem;
    height: .85rem; */
    font-size: clamp(0.85rem, 1.5vh, 3rem);
    font-weight: bold !important;
}

.submenu-n1-content{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;/*aumentar si se desea que ocupe más espacio a la derecha*/
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: var(--color-gris-navbar-item);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease-in-out;/*Cambiar si se desea animación, but beware of bugs!*/
    transform-origin: top;
}

.submenu-n1-content[aria-hidden=false]{
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);
}

.submenu-n1-content[aria-hidden=true]{
    visibility: hidden;
    opacity: 0;
    transform: scaleY(0);
}

.submenu-n1-content a{
    padding: 0.25rem 0.9rem;
    color: white;
    text-decoration: none;
    font-size: clamp(0.75rem, 2.25vh, 2.75rem);
    justify-content: flex-start;
    align-items: center;
    text-align: left;
}

.submenu-n1-content .subnav-item:is(:hover,:focus){
    background-color: var(--color-gris-navbar);
}

.nav-search-icon{
    gap: 1%;
}

.nav-search-icon > i::before{
    font-size: clamp(0.85rem, 2vh, 3rem);
}

.new-flag-container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: max(0.75rem,0.75%);
    /* border: 3px solid red; */
    padding: 0 0 0 0%;
}

.btn-flag{
    width: max(3vh,2.5vw);
    height: max(3vh,2.5vw);
    padding: 0.75vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    padding: 0;
    margin: 0;
    box-shadow: 0px 0px 0px 3px transparent;
    transition: 0.5s ease-in-out all;
}

.btn-flag:is(:hover,:focus){
    box-shadow: 0px 0px 0px 3px var(--color-gris-navbar);
}

/*submenu nivel 2*/
.submenu-n1-content .submenu-n2{
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: transparent;
    border: 0;

    padding: 0.25rem 0.9rem;
    color: white;
    text-decoration: none;
    font-size: clamp(0.75rem, 2.25vh, 2.75rem);
    justify-content: space-between;
    align-items: center;
    text-align: left;
}

.submenu-n1-content .submenu-n2 .icon-sub{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: .5%;
    stroke-width: 3;
}

.submenu-n1-content .submenu-n2[aria-expanded=true]{
    background: var(--color-gris-navbar);
}

.submenu-n1-content .submenu-n2[aria-expanded=true] .icon-sub{
    transform: scaleX(-1);
}

.submenu-n1-content .submenu-n2 .icon-sub::before{
    /* width: .85rem;
    height: .85rem; */
    font-size: clamp(0.85rem, 1.5vh, 3rem);
    font-weight: bold !important;
}

.submenu-n2-content{
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;/*aumentar si se desea que ocupe más espacio a la derecha*/
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: var(--color-gris-navbar);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    box-shadow: 2px 0px 5px 1px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease-in-out;/*Cambiar si se desea animación, but beware of bugs!*/
    transform-origin: 0% 0%;
}

.submenu-n2-content[aria-hidden=false]{
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);
}

.submenu-n2-content[aria-hidden=true]{
    visibility: hidden;
    opacity: 0;
    transform: scaleY(0);
}

.submenu-n2-content a{
    padding: 0.25rem 0.9rem;
    color: white;
    text-decoration: none;
    font-size: clamp(0.75rem, 2.25vh, 2.75rem);
    justify-content: flex-start;
    align-items: center;
    text-align: left;
}

.submenu-n2-content .subnav-n2-item:is(:hover,:focus){
    background-color: var(--color-gris-navbar-item);
}

.buscador-input{
    position: absolute;
    right: 0%;
    top: 0;
    width: 350%;
    height: 100%;
    padding: 0.25rem clamp(5rem,calc(1rem + 7.25vh),10rem) 0.25rem 0.5rem;
    font-size: clamp(0.75rem, 2.25vh, 2.75rem);
    color: var(--color-gray);
    border: 0;
    border-radius: var(--border-radius);
    transform: scaleX(0);
    transform-origin: right;
    transition: 0.3s ease-in-out all;
}

.buscador-input:is(:focus-visible,:focus){
    outline-offset: 0px;
    outline-width: 2px;
    outline-color: (var(--color-gris-navbar-item));
}

.buscador-activo{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    /* gap: 0.5rem; */
    position: absolute;
    right: 0%;
    top: 0;
    height: 100%;
    /* padding: 0.25rem 0.25rem; */
    /* font-size: clamp(0.75rem, 2.25vh, 2.75rem); */
    font-size: clamp(1rem, 2.75vh, 3rem);
    color: white;
    border: 0;
    border-radius: var(--border-radius);
    background-color: var(--color-gris-navbar);
    transform: scaleX(0);
    transform-origin: right;
    transition: 0.3s ease-in-out all;
}

.buscador-action-btn{
    padding: 0rem 0.5rem 0rem 0.5rem;
    display: flex;
    align-items: center;
}

.buscador-action-btn:is(:hover,:focus){
    background-color: var(--color-gris-navbar-item);
}

.buscador-close-btn-container{
    display: flex;
    align-items: stretch;
    cursor: pointer;
}

#buscador-toggle{
    display: none;
}

#buscador-toggle:checked + .buscador-activo{
    transform: scaleX(1);
}

#buscador:has(#buscador-toggle:checked) > .buscador-input{
    transform: scaleX(1);
}

#buscador > .doble-icono{
    position: absolute;
    width: 100%;
    left: 0;
    cursor: pointer;
}

#usuario{
    font-size: clamp(1rem, 2.75vh, 3rem);
}

.hidden{
    display: none;
}

/* HTML: <div class="loader"></div> */
.loader18 {
    width: fit-content;
    font-size: 17px;
    font-family: monospace;
    line-height: 1.4;
    font-weight: bold;
    --c: no-repeat linear-gradient(var(--color-gray) 0 0); 
    background: var(--c),var(--c),var(--c),var(--c),var(--c),var(--c),var(--c),var(--c);
    background-size: calc(1ch + 2px) 100%;
    border-bottom: 10px solid #0000; 
    position: relative;
    animation: l8-0 3s infinite linear;
    clip-path: inset(-20px 0);
    color: var(--color-gray);
}
.loader18::before {
    content:"Cargando";
}

.loader18::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 14px;
    background: var(--color-orange);
    left: -10px;
    bottom: 100%;
    animation: l8-1 3s infinite linear;
}

@keyframes l8-0{
    0%,
    12.5% {background-position: calc(0*100%/6) 0   ,calc(1*100%/6)    0,calc(2*100%/6)    0,calc(3*100%/6)    0,calc(4*100%/6)    0,calc(5*100%/6)    0,calc(6*100%/6) 0}
    25%   {background-position: calc(0*100%/6) 40px,calc(1*100%/6)    0,calc(2*100%/6)    0,calc(3*100%/6)    0,calc(4*100%/6)    0,calc(5*100%/6)    0,calc(6*100%/6) 0}
    37.5% {background-position: calc(0*100%/6) 40px,calc(1*100%/6) 40px,calc(2*100%/6)    0,calc(3*100%/6)    0,calc(4*100%/6)    0,calc(5*100%/6)    0,calc(6*100%/6) 0}
    50%   {background-position: calc(0*100%/6) 40px,calc(1*100%/6) 40px,calc(2*100%/6) 40px,calc(3*100%/6)    0,calc(4*100%/6)    0,calc(5*100%/6)    0,calc(6*100%/6) 0}
    62.5% {background-position: calc(0*100%/6) 40px,calc(1*100%/6) 40px,calc(2*100%/6) 40px,calc(3*100%/6) 40px,calc(4*100%/6)    0,calc(5*100%/6)    0,calc(6*100%/6) 0}
    75%   {background-position: calc(0*100%/6) 40px,calc(1*100%/6) 40px,calc(2*100%/6) 40px,calc(3*100%/6) 40px,calc(4*100%/6) 40px,calc(5*100%/6)    0,calc(6*100%/6) 0}
    87.4% {background-position: calc(0*100%/6) 40px,calc(1*100%/6) 40px,calc(2*100%/6) 40px,calc(3*100%/6) 40px,calc(4*100%/6) 40px,calc(5*100%/6) 40px,calc(6*100%/6) 0}
    100%  {background-position: calc(0*100%/6) 40px,calc(1*100%/6) 40px,calc(2*100%/6) 40px,calc(3*100%/6) 40px,calc(4*100%/6) 40px,calc(5*100%/6) 40px,calc(6*100%/6) 40px}
}
@keyframes l8-1{
    100% {left:115%}
}

@media screen and (max-width: 991px){
    .new-navbar-logo{
        max-height: max(11vw,3rem);
        max-width: 100%;
        text-align: center;
        width: fit-content;
        margin: auto;
    }

    .new-navbar-logo img{
        max-height: max(10vw,3rem);
    }
    
    .new-navbar-up{
        grid-template-columns: 1fr 1fr 1fr 1fr;/*cuatro espacios*/
        grid-template-areas: "empty logo logo toggle";
        /*Este grid se ajustará en móvil para mover el logo*/
        justify-content: space-between;
        align-items: center;
        height: auto;
        padding: 0.75% 1vw;
        /* border: 3px solid orange; */
        width: 100%;
    }
    
    .new-navbar-low .nav-item{
        padding: 0.5% 0%;
        justify-content: center;
    }
    
    .new-navbar-low{
        display: none;
        flex-direction: column;
        justify-content: start;
        position: absolute;
        height: 100dvh;
        width: 100%;
        top: 100%;
        left: 0;
        background-color: var(--color-blue-opaco);
        backdrop-filter: blur(5px);
        padding-top: 0rem;
    }

    .new-navbar-up:has(.new-navbar-toggler input:checked) + .new-navbar-low{
        display: flex;
    }

    .new-navbar-low .submenu-n1 .icon {
        padding-top: 0%;
    }
    
    .submenu-n1{
        flex-direction: row;
        flex-wrap: wrap;
    }

    .submenu-n1-content {
        position: relative;
        width: 100%;
        top: 0;
        left: 0;
        border-radius: var(--border-radius);
        font-size: clamp(1rem, 2.75vh, 3rem);
    }

    .submenu-n1-content[aria-hidden=false]{
        display: flex;
    }
    
    .submenu-n1-content[aria-hidden=true]{
        display: none;
    }

    .submenu-n1-content a{
        padding-left: 25%;
        padding-right: 25%;
        font-size: clamp(1rem, 2.75vh, 3rem);
    } 

    .footer-text{
        width: 100%;
    }
}