/* Ajuste del contenedor principal */
.contenedor-login {
    min-height: 100vh;
    width: 100%;
    background-color: white;
    /*background-image: url('../images/Login/fondologin2.jfif');*/
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;

}

/* Margen superior para el contenedor1 */
.Contenedor1 {
    background-color: white;
    border-radius: 20px;
    padding: 20px 0;
    max-width: 1200px;
    margin: 110px auto 50px auto;
    /* box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Sombras para darle profundidad */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permitir que los elementos se apilen en pantallas pequeñas */
}

/* Fondo verde claro para el contenedor2 */
.contenedor2 {
    background-color: rgb(246,217,111); /* Fondo verde claro */
    border-radius: 20px; /* Bordes redondeados */
    padding: 20px;
    max-width: 1280px;
}

/* Ajustes para la columna izquierda del formulario */
.fondo-izq-estilo {
    flex: 0 0 50%; /* El formulario ocupará el 50% del ancho del contenedor en pantallas grandes */
    max-width: 50%;
}

/* Fondo verde claro para el formulario */
.card-izquierda {
    background-color: rgb(246,217,111);
    padding: 0 20px;
    border: none;
}

/* Imagen del lado derecho */
.fondo-der-estilo {
    flex: 0 0 50%; /* La imagen ocupará el 50% del ancho del contenedor en pantallas grandes */
    max-width: 50%;
}

/* Imagen del lado derecho ajustada */
.img-derecha {
    width: 100%;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
}

/* Centrar logo y título */
.imagen_logo_suyay {
    display: block;
    margin: 0 auto 0 auto;
    width: 180px;
    height: auto;
}

.card-txt-izq {
    font-size: 35px;
    font-weight: bold;
    color: white;
    text-align: center;
    margin-bottom: 25px;
}

/* Inputs de usuario y contraseña */
.input-email input::placeholder, .input-password input::placeholder {
    color: rgba(229, 187, 20, 0.94);
    font-size: 15px;
    padding-left: 10px;
}

.input-email input, .input-password input {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 10px;
    border: 1px solid #ccc;
}

.input-password input {
    border-right: none;
}

/* Estilo de "Recuerdame" y "Olvidaste tu contraseña" */
.remember-forgot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-weight: bold;
    color: black;
    padding-left: 0;
}

.remember-forgot a {
    color: black;
}

/* Botón de ingresar */
.btn-ingresar {
    background: rgba(229, 187, 20, 0.94);
    color: white;
    border-radius: 10px;
    font-size: 16px;
    height: 44px;
    font-weight: bold;
    display: block;
    margin: 20px auto;
    width: 100%;
    border: 0;
}

.btn-ingresar:hover {
    background-color: rgb(220,165,74);
}

.cont-ojo{
    height:70%; 
    border-bottom-left-radius: 0; 
    border-top-left-radius: 0; 
    border-bottom-right-radius: 10px; 
    border-top-right-radius: 10px; 
    background-color: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
}

/* Redes sociales */
.Redes-sociales {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.Redes-sociales img {
    width: 30px;
    height: 30px;
    margin: 0 10px;
    transition: transform 0.3s ease;
}

.Redes-sociales img:hover {
    transform: scale(1.1);
}

/* Alinear "¿No tienes cuenta?" y "Regístrate" */
.usuario-texto {
    display: flex;
    justify-content: center;
    font-size: 18px;
    align-items: center;
    margin-top: 20px;
    margin-left: 10px;
    color: white;
}

.usuario-texto a {
    color: white;
    text-decoration: none;
}

.usuario-texto button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
}

.usuario-texto button:hover {
    color: black;
    text-decoration: none;
}

/*========Nuevo*/

.or-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

.or-divider::before,
.or-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid white;
}

.or-divider:not(:empty)::before {
    margin-right: .25em;
}

.or-divider:not(:empty)::after {
    margin-left: .25em;
}

.or-divider span {
    padding: 0 10px;
    font-size: 16px;
    color: white; /* Color similar al modelo */
    font-weight: bold;
}


/* Media query para pantallas medianas (max-width 1024px) */
@media screen and (max-width: 1024px) {
    /*.contenedor-login {
        padding: auto;
       
    }*/

    .Contenedor1 {
        padding: 20px;
        max-width: 90%;
        margin: 85px auto;
    }
    
    .card-txt-izq {
        font-size: 30px; /* Tamaño del título reducido */
    }

    .input-email input, .input-password input {
        padding: 8px;
        font-size: 14px; /* Tamaño del texto de los inputs reducido */
    }

    .btn-ingresar {
        padding: 12px 30px;
        font-size: 14px; /* Tamaño del botón reducido */
    }

    .bnt-estilo-ini2 {
        font-size: 14px; /* Tamaño del botón reducido */
    }

    .usuario-texto {
        font-size: 16px; /* Reducir el tamaño del texto */
    }

    .Redes-sociales img {
        width: 30px; /* Tamaño reducido para las imágenes de redes sociales */
        height: 30px;
    }s

    .img-derecha {
        width: 100%; /* Ajusta el tamaño de la imagen al ancho disponible */
        height: auto; /* Mantiene la proporción de la imagen */
    }

    .cont-ojo{
        height:67%;
    }
}

/* Media query para pantallas pequeñas (max-width 768px) */
@media screen and (max-width: 768px) {
    /* Ajustar el tamaño del contenedor principal */
    .contenedor-login {
        margin: 0px;
        padding: 0px;
        background-image: url('../images/Login/fondomovil.jpg'); ; /* Opcional: Eliminar el fondo para pantallas pequeñas */

    }

    .Contenedor1 {
        padding: 20px;
        max-width: auto; /* Usar el ancho completo de la pantalla */
        margin: 80px 0px;
        flex-direction: column; /* Apilar los elementos verticalmente */
        background-color: transparent;
        box-shadow: none;
    }

    .contenedor2{
        width: 100%;
        background-color: transparent;
        box-shadow: none;
        padding: 0;
    }

    .card-izquierda{
        background-color: transparent;
        padding: 0;
    }
    /* Ajustar el formulario y la imagen a ocupar todo el ancho */
    .fondo-izq-estilo {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .fondo-der-estilo{
        max-width: 0%;
    }

    /* Reducir el tamaño del título y los campos de entrada */
    .card-txt-izq {
        margin-top: 30px;
        
    }

    .input-email input, .input-password input {
        padding: 15px; /* Más espacio interno */
        font-size: 16px;
        border-radius: 5px; /* Bordes redondeados */
        background-color: #fff; /* Fondo blanco */  
    }

    .cont-ojo{
        height:73%;
    }

    /* Botón de ingresar ajustado para móviles */
    .btn-ingresar {
        font-size: 15px; /* Aumentar tamaño de texto */
        width: 100%; /* Ocupa todo el ancho */
        background-color: black; /* Color verde suave */
        border-radius: 5px; /* Bordes redondeados */
        border: none;
        color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
        font-weight: bold;
        transition: background-color 0.3s ease; /* Transición suave al hacer hover */
    }

    /* Efecto hover para el botón */
    .btn-ingresar:hover {
        background-color: rgb(220,165,74); /* Color más oscuro en hover */
    }

    /* Ajustar imágenes de redes sociales */
    .Redes-sociales img {
        width: 30px;
        height: 30px;
        margin: 0 10px; /* Espaciado entre las imágenes */
    }

    /* Ajustar imagen de la derecha para móviles */
    .img-derecha {
        display: none; /* Opcional: Puedes ocultarla en móviles si prefieres */
    }
    

    /* Ocultar el checkbox de "Recuerdame" y el título "¿No tienes cuenta?" */
    .remember-forgot, .usuario-texto {
        display: block; /* Muestra estos elementos */
        /*display: none; /* Ocultar estos elementos */
    }

    
    /* Centrando "Olvidaste tu contraseña" y "Regístrate" */
    .usuario-texto {
        display: block; /* Mostrar como bloque */
        text-align: center; /* Centrando el contenido */
        margin-top: 20px; /* Espacio superior para separarlo */
    }

    /* Enlace de "Olvidaste tu contraseña" */
    .remember-forgot.tm {
        margin-top: 10px;
        display: block; /* Mostrar como bloque */
        text-align: center; /* Centrar el texto */
        margin-bottom: 15px; /* Espaciado inferior */
    }
}