* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.sectionBlue {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0a132d !important;
}

.sectionWhite {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid {
    display: grid;
    place-items: center;
}


/********************************/

.logoLogin{
    width:140px;
}

.anchoImagen{
    width:90%;
}

.titulo{
    color:white;
}

.titulo2{
    color:#0a132d;
}

.metodosLogin{
    box-shadow: 0px 0px 26px -10px rgba(156,156,156,1);
    padding: 1em;
    width: 90%;
}


/***************************************/

.loader-container {
    position: fixed; /* Posiciona el contenedor de forma fija */
    top: 0;
    left: 0;
    width: 100vw; /* Ancho completo de la ventana */
    height: 100vh; /* Alto completo de la ventana */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8); /* Fondo semi-transparente */
    z-index: 9999; /* Asegúrate de que esté por encima de otros elementos */
}

.loader {
    --c:no-repeat linear-gradient(orange 0 0);
    background: 
      var(--c),var(--c),var(--c),
      var(--c),var(--c),var(--c),
      var(--c),var(--c),var(--c);
    background-size: 16px 16px;
    animation: 
      l32-1 1s infinite,
      l32-2 1s infinite;
}
@keyframes l32-1 {
    0%,100% {width:45px;height: 45px}
    35%,65% {width:65px;height: 65px}
}
@keyframes l32-2 {
    0%,40%  {background-position: 0 0,0 50%, 0 100%,50% 100%,100% 100%,100% 50%,100% 0,50% 0,  50% 50% }
    60%,100%{background-position: 0 50%, 0 100%,50% 100%,100% 100%,100% 50%,100% 0,50% 0,0 0,  50% 50% }
}