@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

html, body {
    height: 100dvh;
    width: 100%;
    font-family: "Raleway", serif;
    overflow: hidden;
    color: #FFFFFF;
}

body {
    background: url('../../../../../../assets/images/login/fondoLogin.png') no-repeat center center;
    background-size: cover;
}

h1{
    color: #FFFFFF;
}

.main-container{
    height: 100%;
    width: 100%;
}

.btns{
    height: 5.282vh;
    width: 38.974vw;
    min-height: 45px;
    min-width: 152px;
    max-width: 302px;
    max-height: 83px;
    border-radius: 10px;
}

@media (min-height: 900px) {
    .btns {
        height: 8.203vh;
        max-height: 932.21px;
    }
}

@media (min-width: 392px) {
    .btns {
        width: 44.306vw;
        max-width: 441.26px;
    }
}

@media (min-height: 1026px) {
    .btns {
        height: 8.422vh;
    }
}

@media (min-width: 1442px) {
    .btns {
        width: 17.237vw;
    }
}

.btnLogin{
    background-color: #5858EE;
    color: #FFFFFF;
}

.btnLogin:hover{
    background-color: #D9D9D9;
    color: #5858EE;
}

.btnRegister{
    background-color: #D9D9D9;
    color: #5858EE;
}

.btnRegister:hover{
    background-color: #5858EE;
    color: #FFFFFF;
}

@media (max-height: 699.98px) {
    html, body{
        overflow-y: auto;
    }

    .boxText{
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }

    .boxBtns{
        margin-bottom: 3rem !important;
    }
}

span, strong{
    line-height: clamp(1.5rem, 1.2214rem + 1.1429vw, 2.25rem);
}

.logoImagen{
    height: 111px;
    width: 163px;
}

@media (min-width: 1442px) {
    .logoImagen{
        min-height: 111px;
        max-height: 162.19px;
        height: 11.263vh;
        min-width: 161px;
        max-width: 235.24px;
        width: 12.189vw;
    }
}

h1{
    font-weight: 700;
    line-height: clamp(1.8125rem, 1.2554rem + 2.2857vw, 3.3125rem);
    width: 100% !important;
}

.alerta{
    color: #FFFFFF;
    line-height: clamp(1.5rem, 1.2214rem + 1.1429vw, 2.25rem);
    width: 100% !important;
}

@media (min-width: 1442px) {
    h1 {
        line-height: clamp(3.3125rem, 1.3839rem + 2.1429vw, 4.8125rem);;
    }
}

b{
    font-weight: 900 !important;
}

.salto-linea {
    display: block; /* Fuerza a que sea salto de línea */
}

@media (min-width: 552px) {
    .salto-linea {
        display: inline; /* En pantallas más grandes no hay salto */
    }
}

.btn-question {
    height: 5.282vh;
    width: 38.974vw;
    min-height: 45px;
    min-width: 152px;
    max-width: 302px;
    max-height: 83px;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

@media (min-height: 900px) {
    .btn-question {
        height: 8.203vh;
        max-height: 932.21px;
    }
}

@media (min-width: 392px) {
    .btn-question {
        width: 44.306vw;
        max-width: 441.26px;
    }
}

@media (min-height: 1026px) {
    .btn-question {
        height: 8.422vh;
    }
}

@media (min-width: 1442px) {
    .btn-question {
        width: 17.237vw;
    }

    .btn2{
        margin-left: 2rem;
    }
}

.btn1{
    background-color: #5858EE;
    color: #FFFFFF;
}

.btn1:hover{
    background-color: #D9D9D9;
    color: #5858EE;
}

.btn2{
    background-color: #D9D9D9;
    color: #5858EE;
}

.btn2:hover{
    background-color: #5858EE;
    color: #FFFFFF;
}

.my-swal-popup {
    /* Ancho por defecto en escritorios grandes */
    height: 50vh !important;
    width: 55vw !important;
    max-width: 800px; /* para que no se estire demasiado */
}

@media (max-width: 480px) {
    .my-swal-popup {
        height: 60vh !important;
        width: 90vw !important;
        max-width: 320px;
    }
}

@media (min-width: 480px) {
    .my-swal-popup {
        height: 60vh !important;
    }
}

/* Cambios en pantallas más pequeñas */
@media (max-width: 768px) {
    .my-swal-popup {
        height: 65vh !important;
        width: 80vw !important;
        max-width: 400px;
    }
}

@media (min-width: 1000px) {
    .my-swal-popup {
        height: 70vh !important;
    }
}