/* CSS proporcionado por el usuario + variables */
:root {
    --blanco: #ffffff;
    --negro: #000; /* Color principal para el texto */
    --gris: #aaa;
    --rojo-error: #ff4757;
    --fuenteHeadings: 'Roboto', sans-serif;
    --fuenteTitulo: 'Jersey 10 Charted', cursive;
    --fondo-contenido-opacidad: 0.35; /* Opacidad más alta para el recuadro */
}

body, html {
    margin: 0;
    padding: 0;
    font-family: var(--fuenteHeadings);
    min-height: 100vh;
}

/* ---------------------------------- */
/* BASE Y CONTENEDOR */
/* ---------------------------------- */
.contenedor {
    min-height: 100vh; 
    width: min(90%, 120rem);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 0;
}

/* Caja del formulario - Glassmorphism */
.contenido {
    background-color: rgba(255, 255, 255, var(--fondo-contenido-opacidad)); 
    backdrop-filter: blur(8px); 
    padding: 3rem 6rem;
    border-radius: 2rem;
    text-align: center;
    backdrop-filter: blur(4px); 
    box-shadow: 0 0 25px rgba(0,0,0,0.2); 
    width: 100%;
    max-width: 90rem;
    color: var(--negro); 
}

/* Título - Ajustado a Negro */
.contenido h1 {
    color: var(--negro); 
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 2rem;
    font-size: 2.5rem; /* Ajuste para visualización */
}
.contenido p {
    color: rgba(0, 0, 0, 0.7); /* Texto secundario */
    margin-bottom: 2rem;
}


/* ESTILO PARA EL MENSAJE DE ERROR 🚨 */
.error-message {
    background-color: var(--rojo-error);
    color: var(--blanco);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 1rem;
    font-weight: 700;
    text-align: left;
    border: 1px solid var(--negro); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------- */
/* GRID Y CAMPOS DEL FORMULARIO */
/* ---------------------------------- */
.formulario-registro {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Default mobile layout */
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Layout responsive para 2 columnas en desktop (basado en grid-template-areas) */
@media (min-width: 768px) {
    .formulario-registro {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 4rem;
        grid-template-areas:
            'nombre apellido_p'
            'apellido_m correo_electronico'
            'telefono fecha_n'
            'domicilio domicilio' 
            'genero tipodeinscripcion'
            'idioma_selector idioma_selector' /* Nueva área para selección dinámica */
            'boton_add boton_add' /* Nuevo botón de añadir */
            'doc_acta doc_identificacion'
            'doc_descuento doc_comprobatorios'
            'boton1 boton1';
    }
    /* Definición de áreas para los campos de archivo */
    .doc_acta { grid-area: doc_acta; }
    .doc_identificacion { grid-area: doc_identificacion;}
    .doc_descuento { grid-area: doc_descuento; }
    .doc_comprobatorios { grid-area: doc_comprobatorios; }

    /* Áreas de campos de texto/select */
    .nombre { grid-area: nombre; }
    .apellido_p { grid-area: apellido_p; }
    .apellido_m { grid-area: apellido_m; }
    .correo_electronico { grid-area: correo_electronico; }
    .telefono { grid-area: telefono; }
    .fecha_n { grid-area: fecha_n; }
    .domicilio { grid-area: domicilio; }
    .genero { grid-area: genero; }
    .tipodeinscripcion { grid-area: tipodeinscripcion; }
    /* Nuevas áreas */
    .idioma_selector { grid-area: idioma_selector; }
    .boton_add { grid-area: boton_add; }


    .boton1 { grid-area: boton1; }
}

.boton1 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

/* Campos de ancho completo (Solo para la versión móvil, en desktop lo hace el grid-area) */
@media (max-width: 767px) {
    .domicilio, .idioma_selector, .boton_add, 
    .doc_acta, .doc_identificacion, 
    .doc_descuento, .doc_comprobatorios {
        grid-column: 1 / -1;
    }
}


/* Campo dinámico - CORRECCIÓN DE VISIBILIDAD DE DOCUMENTOS */
.campo.documento-dinamico {
    display: none;
    flex-direction: column; 
    align-items: flex-start; 
    justify-content: center;
}

/* Estilos específicos para el contenedor dinámico de idioma/horario */
.language-block-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    margin-top: 1rem;
}
.language-block {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    align-items: center;
    background: rgba(255, 255, 255, 0.4);
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.language-block .campo {
    align-items: flex-start;
}
.remove-btn {
    background: var(--rojo-error);
    color: var(--blanco);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s;
    height: fit-content;
    align-self: center;
    grid-column: 1 / 3;
}
@media (min-width: 768px) {
    .language-block {
        grid-template-columns: 1fr 1fr auto;
        gap: 1rem;
        padding: 1rem;
    }
    .remove-btn {
        grid-column: auto;
    }
}


/* Estilos de Campos Generales */
.campo {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alineación a la izquierda */
}

.registro_field {
    border: none;
    border-bottom: 2px solid var(--negro); 
    padding: 1rem;
    color: var(--negro); 
    background: rgba(255, 255, 255, 0.5); 
    width: 100%;
    font-size: 1.1rem; /* Ajuste a 1.1rem para mejor legibilidad */
    transition: all 0.3s ease;
    box-sizing: border-box;
    border-radius: 0; /* Sin bordes redondeados */
}

.registro_field:focus {
    outline: none;
    border-bottom-color: #4a90e2;
    box-shadow: 0 4px 10px rgba(74, 144, 226, 0.2);
}

/* Placeholders a color gris oscuro para visibilidad */
.registro_field::placeholder {
    color: rgba(0,0,0,0.5); 
    text-transform: uppercase;
}

/* Estilo específico para input[type="date"] */
input[type="date"] {
    color: var(--negro); 
    appearance: none; 
    -webkit-appearance: none;
    cursor: pointer;
}
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    color: var(--negro); 
}

/* Opciones del select */
.registro_field option {
    background-color: var(--blanco); 
    color: var(--negro); 
}

/* Estilos de Archivos (Documentos) */
.file-label {
    color: var(--negro); 
    margin-bottom: 0.5rem;
    font-size: 1rem; /* Ajuste de fuente */
    text-transform: uppercase;
    align-self: flex-start;
    font-weight: 600; /* Negrita para la etiqueta */
}

/* Estilo para el input file nativo (que estaba display: none, ahora lo ajustamos si se muestra) */
input[type="file"] {
    color: var(--negro); 
    width: 100%;
    border: 1px dashed rgba(0, 0, 0, 0.5); 
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 1rem; 
    box-sizing: border-box;
    cursor: pointer;
    display: block; /* Aseguramos que se muestre si es requerido */
}

/* Estilo para el botón de subir archivo (navegadores basados en Webkit) */
input[type="file"]::-webkit-file-upload-button {
    background: rgba(0, 0, 0, 0.1); 
    color: var(--negro); 
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.3rem;
    cursor: pointer;
    margin-right: 1rem;
}

/* Botones */
.boton {
    font-weight: 700;
    font-size: 1.4rem;
    padding: 1rem 2rem;
    border-radius: 2rem;
    border: 2px solid var(--negro); 
    background: transparent;
    color: var(--negro); 
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
}

.boton:hover {
    background: var(--negro); 
    color: var(--blanco); 
    box-shadow: 0 0 15px rgba(0,0,0,0.4);
}

.boton--primario {
    background-color: var(--negro); 
    color: var(--blanco); 
    border: none;
}
.boton--primario:hover {
    background-color: #333;
    color: var(--blanco);
}

.boton--secundario {
    background-color: #3b82f6; /* Blue 500 */
    color: var(--blanco); 
    border: none;
}
.boton--secundario:hover {
    background-color: #2563eb; /* Blue 600 */
}

@keyframes hero-gradient-animation {
    0% {
        --c-0: hsla(200, 83%, 81%, 1);
        --s-start-0: 3%;
        --s-end-0: 55%;
        --x-0: 44%;
        --y-0: 83%;
        --x-1: 80%;
        --s-start-1: 3%;
        --s-end-1: 55%;
        --y-1: 47%;
        --c-1: hsla(224, 53%, 72%, 1);
        --y-2: 46%;
        --c-2: hsla(193, 59%, 91%, 1);
        --x-2: 98%;
        --s-start-2: 3%;
        --s-end-2: 55%;
        --y-3: 69%;
        --x-3: 81%;
        --c-3: hsla(230, 73%, 50%, 1);
        --s-start-3: 3%;
        --s-end-3: 55%;
        --x-4: 30%;
        --s-start-4: 3%;
        --s-end-4: 55%;
        --y-4: 84%;
        --c-4: hsla(240, 92%, 66%, 1);
    }

    50% {
        --c-0: hsla(231, 96%, 84%, 1);
        --s-start-0: 3%;
        --s-end-0: 55%;
        --x-0: 48%;
        --y-0: 78%;
        --x-1: 12%;
        --s-start-1: 3%;
        --s-end-1: 55%;
        --y-1: 52%;
        --c-1: hsla(221, 79%, 71%, 1);
        --y-2: 60%;
        --c-2: hsla(189, 76%, 69%, 1);
        --x-2: 55%;
        --s-start-2: 3%;
        --s-end-2: 55%;
        --y-3: 64%;
        --x-3: 35%;
        --c-3: hsla(216, 91%, 75%, 1);
        --s-start-3: 3%;
        --s-end-3: 55%;
        --x-4: 16%;
        --s-start-4: 3%;
        --s-end-4: 55%;
        --y-4: 1%;
        --c-4: hsla(182, 52%, 67%, 1);
    }

    100% {
        --c-0: hsla(205, 79%, 83%, 1);
        --s-start-0: 3%;
        --s-end-0: 55%;
        --x-0: 46%;
        --y-0: 40%;
        --x-1: 11%;
        --s-start-1: 3%;
        --s-end-1: 55%;
        --y-1: 75%;
        --c-1: hsla(236, 80%, 97%, 1);
        --y-2: 80%;
        --c-2: hsla(225, 74%, 52%, 1);
        --x-2: 2%;
        --s-start-2: 3%;
        --s-end-2: 55%;
        --y-3: 67%;
        --x-3: 58%;
        --c-3: hsla(217, 55%, 78%, 1);
        --s-start-3: 3%;
        --s-end-3: 55%;
        --x-4: 89%;
        --s-start-4: 3%;
        --s-end-4: 55%;
        --y-4: 78%;
        --c-4: hsla(182, 79%, 89%, 1);
    }
}

@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(200, 83%, 81%, 1)
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 3%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 55%
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 44%
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 83%
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 3%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 55%
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 47%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(224, 53%, 72%, 1)
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 46%
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(193, 59%, 91%, 1)
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 98%
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 3%
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 55%
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 69%
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 81%
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(230, 73%, 50%, 1)
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 3%
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 55%
}

@property --x-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 30%
}

@property --s-start-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 3%
}

@property --s-end-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 55%
}

@property --y-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 84%
}

@property --c-4 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(240, 92%, 66%, 1)
}

.your_css_selector_here {
    --c-0: hsla(200, 83%, 81%, 1);
    --x-0: 44%;
    --y-0: 83%;
    --x-1: 80%;
    --y-1: 47%;
    --c-1: hsla(224, 53%, 72%, 1);
    --y-2: 46%;
    --c-2: hsla(193, 59%, 91%, 1);
    --x-2: 98%;
    --y-3: 69%;
    --x-3: 81%;
    --c-3: hsla(230, 73%, 50%, 1);
    --x-4: 30%;
    --y-4: 84%;
    --c-4: hsla(240, 92%, 66%, 1);
    ;
    background-color: hsla(183, 60%, 86%, 1);
    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4));
    animation: hero-gradient-animation 2s linear infinite alternate;
    background-blend-mode: normal, normal, normal, normal, normal;
}