body {
    font-family: system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    background-color: #ebeef4;
    /*background-image: url('../resource/benitoHD.png');*/ /* Reemplaza con la ruta de tu imagen */
    /*background-size: cover;*/
    
    height: 100vh;
    margin: 0;
    padding: 0;
}

/* Media query para dispositivos móviles y pantallas más pequeñas hasta 1080px de ancho */
@media screen and (max-width: 1080px) {
    body {
        background-image: url('../resource/pez.JPG'); /* Imagen para dispositivos móviles */
        background-size: cover; /* Ajusta la imagen para que cubra todo el fondo */
        background-position: center;
        background-repeat: no-repeat;
    }
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60vh;
    }
}
/* Media query para dispositivos móviles y pantallas más pequeñas hasta 1080px de ancho */
@media screen and (min-width: 1081px) {
    body {
        background-image: url('../resource/LOBOS-BANNER.png?v=20250501'); /* Imagen para dispositivos móviles */
        background-size: cover; /* Ajusta la imagen para que cubra todo el fondo */
        background-position: center;
        background-repeat: no-repeat;
    }
    .container {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 100vh;
    }
}

h2 {
    margin-block-start: 0;
    margin-block-end: 0;
}
a {
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

label{
    font-weight:500;
    font-size: 1.1rem;
    
}

.image-container {
    position: absolute;
    top: 10px; /* Ajusta según sea necesario */
    left: 10px; /* Ajusta según sea necesario */
    z-index: 10; /* Asegura que esté encima de otros elementos */
}



.login {
    height: 300px;
    width: 400px; /* Ajusta el ancho del formulario según sea necesario */
    padding: 50px;
    /*background-color: rgba(255, 255, 255, 0.8);*/ /* Color de fondo con opacidad */
    border-radius: 20px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
}
.div_login {
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0px;
    overflow-wrap: break-word;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);
    border-radius: 1rem;
    color: #1e293b;
}

.css-1idwstw {
    padding: 1.25rem;
    flex: 1 1 0%;
}

.css-1811skr {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.css-bx0blc {
    width: 100%;
    display: flex;
    position: relative;
    isolation: isolate;
}
.css-129gx55 {
    width: 100%;
    min-width: 0px;
    outline: transparent solid 2px;
    outline-offset: 2px;
    position: relative;
    appearance: none;
    font-size: 1rem;
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
    height: 2.5rem;
    border-radius: 0.375rem;
    border-width: 1px;
    border-style: solid;
    border-image: initial;
    border-color: rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.04);
}

input:focus, input[type]:focus {
    border-color: rgb(41, 128, 185); /* Azul eléctrico */
    box-shadow: 0 1px 1px rgba(41, 128, 185, 0.075) inset, 0 0 8px rgba(41, 128, 185, 0.6);
    outline: none;
}

/* Estilos para el botón */
.button {
    width:100%;
    background-color: #1f6bff; /* Establece el color de fondo en azul */
    color: white; /* Establece el color del texto en blanco */
    padding: 10px 20px; /* Ajusta el relleno para controlar el tamaño del botón */
    border: none; /* Elimina el borde del botón */
    border-radius: 5px; /* Agrega esquinas redondeadas al botón */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    text-align: center; /* Centra el texto dentro del botón */
    text-decoration: none; /* Elimina la decoración del texto */
    font-size: 16px; /* Ajusta el tamaño del texto */
    margin-inline-start:auto;
}

    /* Estilos para el botón cuando se pasa el cursor sobre él */
    .button:hover {
        background-color: #78a6ff; /* Cambia el color de fondo al pasar el cursor */
    }


.scriptvalidation {
    color: red; /* Cambia el color del texto a rojo */
}

/* Estilo para dispositivos pequeños (móviles) */
@media screen and (max-width: 768px) {
    .main-content {
        padding: 10px;
    }
}