@media only screen and (max-width: 480px){

    .help-faq-img{
        width: 35px;
        height: 35px;
    }

    .user-icon-img{
        width: 35px;
        height: 35px;
    }

    .login-modal-dialog {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .login-modal-content {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        width: auto;
        max-width: 500px; /* Tamaño máximo */
    }

    /* Estilos para el botón de cerrar */
    .close {
        color: #000;
        opacity: 0.8;
        position: absolute;
        right: 15px;
        top: 15px;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
    }

    .close:hover {
        cursor: pointer;
        color: #000;
        opacity: 1;
    }

    /* Wrapper y Form-wrapper */
    .login-wrapper {
        display: flex;
        flex-direction: column;
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 10px;
        width: 100%; /* Ajuste dinámico */
        max-width: 400px; /* Tamaño máximo */
        position: relative;
    }

    .login-form-wrapper {
        width: 100%;
    }

    /* Estilos para el formulario */
    .loginForm {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .t1{
        font-size: 28px;
        font-weight: 700;
        font-family: 'Inter', sans-serif;
        color: var(--color-corporativo);
    }

    /* Estilos para los campos de entrada */
    .login-input-group {
        margin-bottom: 20px;
        position: relative;
    }

    .login-input-group input {
        width: 100%;
        padding: 5px 5px;
        border: none;
        border-bottom: 1px solid #ced4da;
        background-color: transparent; /* Fondo transparente */
        box-sizing: border-box;
        outline: none;
        margin-bottom: 15px;
        border-radius: 10px;
    }

    .login-input-group input:focus {
        border-bottom: 1px solid var(--color-corporativo);
        background-color: transparent; /* Mantener fondo transparente */
    }

    .login-input-group input:not(:placeholder-shown) {
        background-color: #ECECEC; /* Mantener fondo transparente */
    }

    .login-input-group label {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        pointer-events: none;
        color: #6c757d;
        transition: 0.2s;
    }

    .login-input-group input:focus + label,
    .login-input-group input:not(:placeholder-shown) + label {
        top: -15px;
        font-weight: 100;
        font-size: 18px;
        font-weight: 400;
        color: var(--color-corporativo);
    }
    /* Asegúrate de que el contenedor esté usando un diseño en línea */
    .remember-and-forgot {
        margin-top: -10px;
        display: flex;
        align-items: center;
        justify-content: space-between; /* Opcional: Si quieres que el espacio entre los elementos sea máximo */
    }

    .remember {
        margin-right: 10px; /* Espacio entre el checkbox y el enlace */
    }

    .link.remind {
        margin-left: 10px; /* Espacio entre el checkbox y el enlace */
        text-decoration: none;
        color: black !important; /* Color de enlace, puedes ajustarlo según tu diseño */
    }

    .link.remind:hover {
        text-decoration: underline; /* Subrayado en hover */
    }

    .remember input {
        margin-right: 5px;
    }

    /* Estilos para los mensajes de error */
    .invalid-feedback {
        color: #dc3545;
        font-size: 0.875em;
        margin-top: 5px;
        margin-left: 2em;
    }

    /* Estilos para el botón de enviar */
    .ini-but {
        margin-top: 20px;
        background-color: var(--color-corporativo);
        color: #fff;
        border: none;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .ini-but:hover {
        background-color: #a2e939;
    }
}

@media only screen and (min-width: 481px) and (max-width: 991px){

    .help-faq-img{
        width: 38px;
        height: 38px;
    }

    .user-icon-img{
        width: 38px;
        height: 38px;
    }

    .login-modal-dialog {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .login-modal-content {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        width: auto;
        max-width: 500px; /* Tamaño máximo */
    }

    /* Estilos para el botón de cerrar */
    .close {
        color: #000;
        opacity: 0.8;
        position: absolute;
        right: 15px;
        top: 15px;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
    }

    .close:hover {
        cursor: pointer;
        color: #000;
        opacity: 1;
    }

    /* Wrapper y Form-wrapper */
    .login-wrapper {
        display: flex;
        flex-direction: column;
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 10px;
        width: 100%; /* Ajuste dinámico */
        max-width: 400px; /* Tamaño máximo */
        position: relative;
    }

    .login-form-wrapper {
        width: 100%;
    }

    .t1{
        font-size: 20px;
        font-weight: 700;
        font-family: 'Inter', sans-serif;
        color: var(--color-corporativo);
    }

    /* Estilos para el formulario */
    .loginForm {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* Estilos para los campos de entrada */
    .login-input-group {
        margin-bottom: 20px;
        position: relative;
    }

    .login-input-group input {
        width: 100%;
        padding: 5px 5px;
        border: none;
        border-bottom: 1px solid #ced4da;
        background-color: transparent; /* Fondo transparente */
        box-sizing: border-box;
        outline: none;
        margin-bottom: 15px;
        border-radius: 10px;
    }

    .login-input-group input:focus {
        border-bottom: 1px solid var(--color-corporativo);
        background-color: transparent; /* Mantener fondo transparente */
    }

    .login-input-group input:not(:placeholder-shown) {
        background-color: #ECECEC; /* Mantener fondo transparente */
    }

    .login-input-group label {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        pointer-events: none;
        color: #6c757d;
        transition: 0.2s;
    }

    .login-input-group input:focus + label,
    .login-input-group input:not(:placeholder-shown) + label {
        top: -15px;
        font-weight: 100;
        font-size: 18px;
        font-weight: 400;
        color: var(--color-corporativo);
    }
    /* Asegúrate de que el contenedor esté usando un diseño en línea */
    .remember-and-forgot {
        margin-top: -10px;
        display: flex;
        align-items: center;
        justify-content: space-between; /* Opcional: Si quieres que el espacio entre los elementos sea máximo */
    }

    .remember {
        margin-right: 10px; /* Espacio entre el checkbox y el enlace */
    }

    .link.remind {
        margin-left: 10px; /* Espacio entre el checkbox y el enlace */
        text-decoration: none;
        color: black !important; /* Color de enlace, puedes ajustarlo según tu diseño */
    }

    .link.remind:hover {
        text-decoration: underline; /* Subrayado en hover */
    }

    .remember input {
        margin-right: 5px;
    }

    /* Estilos para los mensajes de error */
    .invalid-feedback {
        color: #dc3545;
        font-size: 0.875em;
        margin-top: 5px;
        margin-left: 2em;
    }

    /* Estilos para el botón de enviar */
    .ini-but {
        margin-top: 20px;
        background-color: var(--color-corporativo);
        color: #fff;
        border: none;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .ini-but:hover {
        background-color: #a2e939;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1400px){

    .help-faq-img{
        width: 28px;
        height: 28px;
    }

    .user-icon-img{
        width: 28px;
        height: 28px;
    }

    .login-modal-dialog {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .login-modal-content {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        width: auto;
        max-width: 500px; /* Tamaño máximo */
    }

    /* Estilos para el botón de cerrar */
    .close {
        color: #000;
        opacity: 0.8;
        position: absolute;
        right: 15px;
        top: 15px;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
    }

    .close:hover {
        cursor: pointer;
        color: #000;
        opacity: 1;
    }

    /* Wrapper y Form-wrapper */
    .login-wrapper {
        display: flex;
        flex-direction: column;
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 10px;
        width: 100%; /* Ajuste dinámico */
        max-width: 400px; /* Tamaño máximo */
        position: relative;
    }

    .login-form-wrapper {
        width: 100%;
    }

    .t1{
        font-size: 20px;
        font-weight: 700;
        font-family: 'Inter', sans-serif;
        color: var(--color-corporativo);
    }

    /* Estilos para el formulario */
    .loginForm {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* Estilos para los campos de entrada */
    .login-input-group {
        margin-bottom: 20px;
        position: relative;
    }

    .login-input-group input {
        width: 100%;
        padding: 5px 5px;
        border: none;
        border-bottom: 1px solid #ced4da;
        background-color: transparent; /* Fondo transparente */
        box-sizing: border-box;
        outline: none;
        margin-bottom: 15px;
        border-radius: 10px;
    }

    .login-input-group input:focus {
        border-bottom: 1px solid var(--color-corporativo);
        background-color: transparent; /* Mantener fondo transparente */
    }

    .login-input-group input:not(:placeholder-shown) {
        background-color: #ECECEC; /* Mantener fondo transparente */
    }

    .login-input-group label {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        pointer-events: none;
        color: #6c757d;
        transition: 0.2s;
    }

    .login-input-group input:focus + label,
    .login-input-group input:not(:placeholder-shown) + label {
        top: -15px;
        font-weight: 100;
        font-size: 18px;
        font-weight: 400;
        color: var(--color-corporativo);
    }
    /* Asegúrate de que el contenedor esté usando un diseño en línea */
    .remember-and-forgot {
        margin-top: -10px;
        display: flex;
        align-items: center;
        justify-content: space-between; /* Opcional: Si quieres que el espacio entre los elementos sea máximo */
    }

    .remember {
        margin-right: 10px; /* Espacio entre el checkbox y el enlace */
    }

    .link.remind {
        margin-left: 10px; /* Espacio entre el checkbox y el enlace */
        text-decoration: none;
        color: black !important; /* Color de enlace, puedes ajustarlo según tu diseño */
    }

    .link.remind:hover {
        text-decoration: underline; /* Subrayado en hover */
    }

    .remember input {
        margin-right: 5px;
    }

    /* Estilos para los mensajes de error */
    .invalid-feedback {
        color: #dc3545;
        font-size: 0.875em;
        margin-top: 5px;
        margin-left: 2em;
    }

    /* Estilos para el botón de enviar */
    .ini-but {
        margin-top: 20px;
        background-color: var(--color-corporativo);
        color: #fff;
        border: none;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .ini-but:hover {
        background-color: #a2e939;
    }
}

@media only screen and (min-width: 1401px) and (max-width: 1919px){

    .help-faq-img{
        width: 32px;
        height: 32px;
    }

    .user-icon-img{
        width: 32px;
        height: 32px;
    }

    .login-modal-dialog {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .login-modal-content {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        width: auto;
        max-width: 500px; /* Tamaño máximo */
    }

    /* Estilos para el botón de cerrar */
    .close {
        color: #000;
        opacity: 0.8;
        position: absolute;
        right: 15px;
        top: 15px;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
    }

    .close:hover {
        cursor: pointer;
        color: #000;
        opacity: 1;
    }

    /* Wrapper y Form-wrapper */
    .login-wrapper {
        display: flex;
        flex-direction: column;
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 10px;
        width: 100%; /* Ajuste dinámico */
        max-width: 400px; /* Tamaño máximo */
        position: relative;
    }

    .login-form-wrapper {
        width: 100%;
    }

    .t1{
        font-size: 20px;
        font-weight: 700;
        font-family: 'Inter', sans-serif;
        color: var(--color-corporativo);
    }

    /* Estilos para el formulario */
    .loginForm {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* Estilos para los campos de entrada */
    .login-input-group {
        margin-bottom: 20px;
        position: relative;
    }

    .login-input-group input {
        width: 100%;
        padding: 5px 5px;
        border: none;
        border-bottom: 1px solid #ced4da;
        background-color: transparent; /* Fondo transparente */
        box-sizing: border-box;
        outline: none;
        margin-bottom: 15px;
        border-radius: 10px;
    }

    .login-input-group input:focus {
        border-bottom: 1px solid var(--color-corporativo);
        background-color: transparent; /* Mantener fondo transparente */
    }

    .login-input-group input:not(:placeholder-shown) {
        background-color: #ECECEC; /* Mantener fondo transparente */
    }

    .login-input-group label {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        pointer-events: none;
        color: #6c757d;
        transition: 0.2s;
    }

    .login-input-group input:focus + label,
    .login-input-group input:not(:placeholder-shown) + label {
        top: -15px;
        font-weight: 100;
        font-size: 18px;
        font-weight: 400;
        color: var(--color-corporativo);
    }
    /* Asegúrate de que el contenedor esté usando un diseño en línea */
    .remember-and-forgot {
        margin-top: -10px;
        display: flex;
        align-items: center;
        justify-content: space-between; /* Opcional: Si quieres que el espacio entre los elementos sea máximo */
    }

    .remember {
        margin-right: 10px; /* Espacio entre el checkbox y el enlace */
    }

    .link.remind {
        margin-left: 10px; /* Espacio entre el checkbox y el enlace */
        text-decoration: none;
        color: black !important; /* Color de enlace, puedes ajustarlo según tu diseño */
    }

    .link.remind:hover {
        text-decoration: underline; /* Subrayado en hover */
    }

    .remember input {
        margin-right: 5px;
    }

    /* Estilos para los mensajes de error */
    .invalid-feedback {
        color: #dc3545;
        font-size: 0.875em;
        margin-top: 5px;
        margin-left: 2em;
    }

    /* Estilos para el botón de enviar */
    .ini-but {
        margin-top: 20px;
        background-color: var(--color-corporativo);
        color: #fff;
        border: none;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .ini-but:hover {
        background-color: #a2e939;
    }
}

@media only screen and (min-width: 1920px){

    .help-faq-img{
        width: 35px;
        height: 35px;
    }

    .user-icon-img{
        width: 35px;
        height: 35px;
    }

    .help-hov:hover .menu-item,
    .log-hov:hover  .menu-item{
        color:var(--color-corporativo) !important;            /* texto verde al hacer hover en el contenedor */
        transition: color .15s ease;
    }

    .login-modal-dialog {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .login-modal-content {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        width: auto;
        max-width: 500px; /* Tamaño máximo */
    }

    /* Estilos para el botón de cerrar */
    .close {
        color: #000;
        opacity: 0.8;
        position: absolute;
        right: 15px;
        top: 15px;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
    }

    .close:hover {
        cursor: pointer;
        color: #000;
        opacity: 1;
    }

    /* Wrapper y Form-wrapper */
    .login-wrapper {
        display: flex;
        flex-direction: column;
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 10px;
        width: 100%; /* Ajuste dinámico */
        max-width: 400px; /* Tamaño máximo */
        position: relative;
    }

    .login-form-wrapper {
        width: 100%;
    }

    .t1{
        font-size: 20px;
        font-weight: 700;
        font-family: 'Inter', sans-serif;
        color: var(--color-corporativo);
    }

    /* Estilos para el formulario */
    .loginForm {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* Estilos para los campos de entrada */
    .login-input-group {
        margin-bottom: 20px;
        position: relative;
    }

    .login-input-group input {
        width: 100%;
        padding: 5px 5px;
        border: none;
        border-bottom: 1px solid #ced4da;
        background-color: transparent; /* Fondo transparente */
        box-sizing: border-box;
        outline: none;
        margin-bottom: 15px;
        border-radius: 10px;
    }

    .login-input-group input:focus {
        border-bottom: 1px solid var(--color-corporativo);
        background-color: transparent; /* Mantener fondo transparente */
    }

    .login-input-group input:not(:placeholder-shown) {
        background-color: #ECECEC; /* Mantener fondo transparente */
    }

    .login-input-group label {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        pointer-events: none;
        color: #6c757d;
        transition: 0.2s;
    }

    .login-input-group input:focus + label,
    .login-input-group input:not(:placeholder-shown) + label {
        top: -15px;
        font-weight: 100;
        font-size: 18px;
        font-weight: 400;
        color: var(--color-corporativo);
    }
    /* Asegúrate de que el contenedor esté usando un diseño en línea */
    .remember-and-forgot {
        margin-top: -10px;
        display: flex;
        align-items: center;
        justify-content: space-between; /* Opcional: Si quieres que el espacio entre los elementos sea máximo */
    }

    .remember {
        margin-right: 10px; /* Espacio entre el checkbox y el enlace */
    }

    .link.remind {
        margin-left: 10px; /* Espacio entre el checkbox y el enlace */
        text-decoration: none;
        color: black !important; /* Color de enlace, puedes ajustarlo según tu diseño */
    }

    .link.remind:hover {
        text-decoration: underline; /* Subrayado en hover */
    }

    .remember input {
        margin-right: 5px;
    }

    /* Estilos para los mensajes de error */
    .invalid-feedback {
        color: #dc3545;
        font-size: 0.875em;
        margin-top: 5px;
        margin-left: 2em;
    }

    /* Estilos para el botón de enviar */
    .ini-but {
        margin-top: 20px;
        background-color: var(--color-corporativo);
        color: #fff;
        border: none;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .ini-but:hover {
        background-color: #a2e939;
    }
}
.loginLink{
    cursor: pointer;
}
.menu-cuenta-wrapper a:hover{
    color: var(--color-secundario);
}