/* 1) Importar Montserrat desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');

/* 2) Aplicar Montserrat a todo el proyecto */
html, body {
    font-family: 'Montserrat', sans-serif;
}


/* (Opcional) Heredar la fuente en formularios, botones, etc. */
button,
input,
textarea,
select {
    font-family: inherit;
}


/* Convierte tu contenedor en un flex‐container centrado */
.container {
    display: flex;
    flex-direction: column; /* si quieres la imagen arriba y el form abajo */
    justify-content: center; /* centra en vertical */
    align-items: center; /* centra en horizontal */
   }



/* Ajusta el ancho máximo del form para que no quede muy estirado */
.div_login {
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0px;
    overflow-wrap: break-word;
    background-color: #FFFFFF;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1),0 1px 20px 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;
    }
}