.img-background {
    background-image: url('../img/portadaQO.png'); /* Ruta de la imagen */
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh; /* Hace que ocupe toda la altura de la ventana */
}

.container-index {
    background-color: rgb(2, 0, 104);
    border-radius: 15px;
    box-shadow: 8px 8px 12px rgba(0, 0, 0, 0.4);
    width: auto;
    height: auto;
    padding: 40px; 
    margin: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

textarea,
input {
    border: 1px solid #5490ff;
    border-radius: 10px;
    padding: 8px;
    margin: 10px;
    font-size: 18px;
    color: #333;
    background-color: #82c4ff;
}

textarea:focus,
input:focus {
    border: none;
    outline: 1px solid blue;
}

label {
    align-self: center;
    text-align: right;
    padding-right: 10px;
    color: white;
}

h3{
    font-size: 22px;
    color: white;
    margin: 5px; /* Espacio fuera del elemento */
    padding: 5px; /* Espacio dentro del elemento */
}

.form-group-forgot{
    grid-column: span 2; /* Ocupa dos columnas del grid */
    display: flex; /* Se asegura de que sea un bloque */
    text-align: right; /* Alinea el contenido dentro del bloque a la derecha */
    margin-left: auto; /* Empuja el bloque a la derecha */
    margin-right: 0; /* Asegura que no haya margen a la derecha */
    color: rgb(255, 255, 255);
    padding: 10px; /* Ejemplo de padding */
}

.form-group-forgot:hover{
    cursor: pointer;
    color: rgb(153, 153, 253);
}

/* ****************** Tabs Login Form ****************** */
.tabs {
    display: flex;
    justify-content: center; /* Centra los elementos horizontalmente */
    gap: 20%; /* Espaciado entre los botones */
}

.tab-button, .form-Button {
    background-color: rgb(28, 0, 189);
    color: white;
    font-weight: bold;
    border: none;
    width: auto; 
    height: auto;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center; 
}

.tab-button:active {
    background-color: rgb(127, 175, 248);
    color: rgb(53, 53, 53);
}

.login-form {
    display: flex;
    flex-direction: column; /* Asegura que los grupos estén en columna */
    gap: 15px; /* Espaciado entre los grupos */
}

.form-group {
    display: flex;
    justify-content: space-between; /* Distribuye el espacio entre label e input */
    align-items: center; /* Centra verticalmente */
}

.form-group label {
    flex: 1; /* El label ocupará el espacio disponible a la izquierda */
    text-align: left; /* Alineación del texto a la izquierda */
}

.form-group input {
    flex: 2; /* El input ocupará más espacio a la derecha */
    max-width: 70%; /* Limita el tamaño del input si es necesario */
}

.form-Button{
    grid-column: 1 / span 2; /* Hace que el botón ocupe ambas columnas */
    justify-self: center; /* Centra el botón horizontalmente */
}