/* Fondo general de la página */

* {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

body {
    background-image: url("../imgs/back_login.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


/* Estilos para el contenedor del formulario */

.content-form-duplex {
    width: 100%;
    max-width: 800px;
    padding: 20px;
    /* Fondo blanco con opacidad */
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    /* Da un efecto de difuminado detrás del formulario */
    margin-top: 50px;
}

fieldset {
    border: none;
    padding: 20px;
    margin: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
}

legend {
    font-size: 1.2rem;
    font-weight: bold;
    color: #050911;
    border-radius: 10px;
    padding: 10px;
}


/* Estilo para los inputs y selects */

input[type="text"],
input[type="email"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.9);
    /* Fondo blanco con opacidad */
    color: #333;
    font-size: 1rem;
    box-sizing: border-box;
}

input[type="file"] {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 8px;
    color: #333;
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: #1e438b;
    /* Resaltar los campos al hacer focus */
    outline: none;
}


/* Estilo para los botones */

button {
    padding: 12px 20px;
    background-color: #1e438b;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #15488a;
    /* Cambiar color en hover */
}


/* Estilo para los select */

select {
    background-color: rgba(255, 255, 255, 0.9);
    /* Fondo transparente */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
}


/* Efecto de sombra en los fieldsets */

fieldset {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


/* Manejo de los fieldsets ocultos */

.hidden {
    display: none;
}


/* Estilo para las leyendas */

legend {
    color: black;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.7);
}


/* Estilo para el textarea */

textarea {
    padding: 10px;
    width: 100%;
    height: 120px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background-color: rgba(255, 255, 255, 0.9);
    resize: vertical;
    /* Permite cambiar el tamaño verticalmente */
}

textarea:focus {
    border-color: #1e438b;
    /* Resaltar textarea */
}


/* Para las opciones del select */

option {
    background-color: #fff;
    color: #333;
}