<!-- Formulario de Nueva Matrícula (estructura base, pantalla completa) -->
<div class="card shadow-sm mb-4">
    <div class="card-header" style="background: var(--color-principal); color: var(--color-blanco);">Identificación del alumno</div>
    <div class="card-body">
        <form id="formNuevaMatricula">
            <div class="row g-3">
                <div class="col-md-3">
                    <label for="matricula_run" class="form-label">RUN</label>
                    <input type="text" class="form-control" id="matricula_run" name="run" readonly>
                </div>
                <div class="col-md-3">
                    <label for="matricula_nombre" class="form-label">Nombre</label>
                    <input type="text" class="form-control" id="matricula_nombre" name="nombre" readonly>
                </div>
                <div class="col-md-3">
                    <label for="matricula_ap_paterno" class="form-label">Apellido paterno</label>
                    <input type="text" class="form-control" id="matricula_ap_paterno" name="ap_paterno" readonly>
                </div>
                <div class="col-md-3">
                    <label for="matricula_ap_materno" class="form-label">Apellido materno</label>
                    <input type="text" class="form-control" id="matricula_ap_materno" name="ap_materno" readonly>
                </div>
            </div>
            <div class="row g-3 mt-1">
                <div class="col-md-3">
                    <label for="matricula_fecha_nac" class="form-label">Fecha de nacimiento</label>
                    <input type="date" class="form-control" id="matricula_fecha_nac" name="fecha_nac" readonly>
                </div>
                <div class="col-md-3">
                    <label for="matricula_tipo_ensenanza" class="form-label">Tipo de enseñanza</label>
                    <input type="text" class="form-control" id="matricula_tipo_ensenanza" name="tipo_ensenanza" readonly>
                </div>
                <div class="col-md-3">
                    <label for="matricula_grado" class="form-label">Grado</label>
                    <input type="text" class="form-control" id="matricula_grado" name="grado" readonly>
                </div>
                <div class="col-md-3">
                    <label for="matricula_fecha_matricula" class="form-label fw-bold" style="color: var(--color-principal);">Fecha de matrícula <span style="color: red;">*</span></label>
                    <input type="date" class="form-control border-2 shadow-sm" id="matricula_fecha_matricula" name="fecha_matricula" required autofocus style="background: #800020; color: #fff; border-color: #800020;">
                    <style>
                        /* Selector de calendario blanco para el input de fecha */
                        #matricula_fecha_matricula::-webkit-calendar-picker-indicator {
                            filter: invert(1) brightness(2);
                        }

                        #matricula_fecha_matricula::-ms-input-placeholder {
                            color: #fff;
                        }

                        #matricula_fecha_matricula::placeholder {
                            color: #fff;
                        }
                    </style>
                </div>
            </div>

            <!-- Información Social -->
            <div class="card mb-3 mt-4">
                <div class="card-header" style="background: var(--color-principal); color: var(--color-blanco);">Información Social</div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-2">
                            <label for="social_edad" class="form-label">Edad</label>
                            <input type="number" class="form-control" id="social_edad" name="social_edad">
                        </div>
                        <div class="col-md-2">
                            <label for="social_nacionalidad" class="form-label">Nacionalidad</label>
                            <input type="text" class="form-control" id="social_nacionalidad" name="social_nacionalidad">
                        </div>
                        <div class="col-md-8">
                            <label for="social_domicilio" class="form-label">Domicilio</label>
                            <input type="text" class="form-control" id="social_domicilio" name="social_domicilio" placeholder="Ingrese domicilio completo">
                        </div>
                    </div>
                    <div class="row g-3 mt-1">
                        <div class="col-md-2">
                            <label for="social_integrantes_familia" class="form-label">Integrantes Familia</label>
                            <input type="number" class="form-control" id="social_integrantes_familia" name="social_integrantes_familia">
                        </div>
                        <div class="col-md-10">
                            <label for="social_vive_con" class="form-label">Vive con</label>
                            <input type="text" class="form-control" id="social_vive_con" name="social_vive_con">
                        </div>
                    </div>
                    <div class="row g-3 mt-1">
                        <div class="col-md-3">
                            <label for="social_repitente" class="form-label">¿Repitente?</label>
                            <select class="form-select" id="social_repitente" name="social_repitente">
                                <option value="">Seleccione...</option>
                                <option value="1">SÍ</option>
                                <option value="0">NO</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="social_grado_repitencia" class="form-label">Grado Repitencia</label>
                            <input type="text" class="form-control" id="social_grado_repitencia" name="social_grado_repitencia">
                        </div>
                        <div class="col-md-3">
                            <label for="social_hermanos_escuela" class="form-label">¿Hermanos en Escuela?</label>
                            <select class="form-select" id="social_hermanos_escuela" name="social_hermanos_escuela">
                                <option value="">Seleccione...</option>
                                <option value="1">SÍ</option>
                                <option value="0">NO</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="social_grado_hermanos" class="form-label">Grado Hermanos</label>
                            <input type="text" class="form-control" id="social_grado_hermanos" name="social_grado_hermanos">
                        </div>
                    </div>
                    <div class="row g-3 mt-1">
                        <div class="col-md-10">
                            <label for="social_colegio_procedencia" class="form-label">Colegio Procedencia</label>
                            <input type="text" class="form-control" id="social_colegio_procedencia" name="social_colegio_procedencia">
                        </div>
                        <div class="col-md-2">
                            <label for="social_alumno_pie" class="form-label">¿Alumno PIE?</label>
                            <select class="form-select" id="social_alumno_pie" name="social_alumno_pie">
                                <option value="">Seleccione...</option>
                                <option value="1">SÍ</option>
                                <option value="0">NO</option>
                            </select>
                        </div>
                    </div>
                    <div class="row g-3 mt-1">
                        <div class="col-md-2">
                            <label for="social_orden_alejamiento" class="form-label">¿Orden Alejamiento?</label>
                            <select class="form-select" id="social_orden_alejamiento" name="social_orden_alejamiento">
                                <option value="">Seleccione...</option>
                                <option value="1">SÍ</option>
                                <option value="0">NO</option>
                            </select>
                        </div>
                        <div class="col-md-10">
                            <label for="social_observacion_alejamiento" class="form-label">Observación alejamiento</label>
                            <input type="text" class="form-control" id="social_observacion_alejamiento" name="social_observacion_alejamiento" placeholder="Detalle si corresponde">
                        </div>
                    </div>
                    <div class="row g-3 mt-1">
                        <div class="col-md-3">
                            <label for="social_programa_social" class="form-label">Programa Social</label>
                            <input type="text" class="form-control" id="social_programa_social" name="social_programa_social">
                        </div>
                        <div class="col-md-3">
                            <label for="social_etnia" class="form-label">Etnia</label>
                            <input type="text" class="form-control" id="social_etnia" name="social_etnia">
                        </div>
                        <div class="col-md-2">
                            <label for="social_internet_hogar" class="form-label">¿Internet en Hogar?</label>
                            <select class="form-select" id="social_internet_hogar" name="social_internet_hogar">
                                <option value="">Seleccione...</option>
                                <option value="1">SÍ</option>
                                <option value="0">NO</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="social_smartphone" class="form-label">¿Smartphone?</label>
                            <select class="form-select" id="social_smartphone" name="social_smartphone">
                                <option value="">Seleccione...</option>
                                <option value="1">SÍ</option>
                                <option value="0">NO</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="social_computador_hogar" class="form-label">¿Computador en Hogar?</label>
                            <select class="form-select" id="social_computador_hogar" name="social_computador_hogar">
                                <option value="">Seleccione...</option>
                                <option value="1">SÍ</option>
                                <option value="0">NO</option>
                            </select>
                        </div>
                    </div>
                    <div class="row g-3 mt-1">
                        <div class="col-md-3">
                            <label for="social_opta_religion" class="form-label">¿Opta Religión?</label>
                            <select class="form-select" id="social_opta_religion" name="social_opta_religion">
                                <option value="">Seleccione...</option>
                                <option value="1">SÍ</option>
                                <option value="0">NO</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="social_religion" class="form-label">Religión</label>
                            <input type="text" class="form-control" id="social_religion" name="social_religion">
                        </div>
                        <div class="col-md-3">
                            <label for="social_transporte" class="form-label">¿Transporte?</label>
                            <select class="form-select" id="social_transporte" name="social_transporte">
                                <option value="">Seleccione...</option>
                                <option value="1">SÍ</option>
                                <option value="0">NO</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="social_sector" class="form-label">Sector</label>
                            <select class="form-select" id="social_sector" name="social_sector">
                                <option value="">Seleccione...</option>
                                <option value="Rangue">Rangue</option>
                                <option value="Laguna">Laguna</option>
                                <option value="Hospital">Hospital</option>
                            </select>
                        </div>
                    </div>
                    <div class="row g-3 mt-1">
                        <div class="col-md-2">
                            <label for="social_junaeb" class="form-label">¿Junaeb?</label>
                            <select class="form-select" id="social_junaeb" name="social_junaeb">
                                <option value="">Seleccione...</option>
                                <option value="1">SÍ</option>
                                <option value="0">NO</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="social_uso_imagen" class="form-label">¿Uso Imagen?</label>
                            <select class="form-select" id="social_uso_imagen" name="social_uso_imagen">
                                <option value="">Seleccione...</option>
                                <option value="1">SÍ</option>
                                <option value="0">NO</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Información de Salud -->
            <div class="card mb-3">
                <div class="card-header" style="background: var(--color-principal); color: var(--color-blanco);">Información de Salud</div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label for="salud_sistema_salud" class="form-label">Sistema de Salud</label>
                            <select class="form-select" id="salud_sistema_salud" name="salud_sistema_salud">
                                <option value="">Seleccione...</option>
                                <option value="No tiene">No tiene</option>
                                <option value="Fonasa">Fonasa</option>
                                <option value="Isapre">Isapre</option>
                                <option value="Fuerzas Armadas">Fuerzas Armadas</option>
                                <option value="Prais">Prais</option>
                                <option value="Otro">Otro</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="salud_alergias" class="form-label">Alergias</label>
                            <input type="text" class="form-control" id="salud_alergias" name="salud_alergias">
                        </div>
                        <div class="col-md-4">
                            <label for="salud_enfermedad_cuidado" class="form-label">Enfermedad/Cuidado</label>
                            <input type="text" class="form-control" id="salud_enfermedad_cuidado" name="salud_enfermedad_cuidado">
                        </div>
                    </div>
                    <div class="row g-3 mt-1">
                        <div class="col-md-6">
                            <label for="salud_medicamento_contraindicado" class="form-label">Medicamento Contraindicado</label>
                            <input type="text" class="form-control" id="salud_medicamento_contraindicado" name="salud_medicamento_contraindicado">
                        </div>
                        <div class="col-md-6">
                            <label for="salud_medicamento_uso_diario" class="form-label">Medicamento Uso Diario</label>
                            <input type="text" class="form-control" id="salud_medicamento_uso_diario" name="salud_medicamento_uso_diario">
                        </div>
                    </div>
                    <div class="row g-3 mt-1">
                        <div class="col-md-12">
                            <label for="salud_observaciones" class="form-label">Observaciones</label>
                            <textarea class="form-control" id="salud_observaciones" name="salud_observaciones" rows="2"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Información de Apoderado -->
            <div class="card mb-3">
                <div class="card-header" style="background: var(--color-principal); color: var(--color-blanco);">Información de Apoderado</div>
                <div class="card-body">
                    <div class="row g-3 align-items-end mb-3">
                        <div class="col-md-6">
                            <button type="button" class="btn btn-primary w-100" id="btnMostrarBuscarApoderado">Buscar apoderado existente</button>
                        </div>
                        <div class="col-md-6">
                            <button type="button" class="btn btn-success w-100" id="btnMostrarNuevoApoderado">Agregar nuevo apoderado</button>
                        </div>
                    </div>
                    <div id="seccionBuscarApoderado" style="display:none;">
                        <div class="row g-3 align-items-end mb-3">
                            <div class="col-md-8">
                                <label for="apoderado_buscar" class="form-label">Buscar apoderado por RUN, nombre o apellido</label>
                                <input type="text" class="form-control" id="apoderado_buscar" name="apoderado_buscar" placeholder="Ingrese RUN, nombre o apellido">
                            </div>
                            <div class="col-md-4">
                                <button type="button" class="btn btn-primary w-100" id="btnBuscarApoderado">Buscar</button>
                            </div>
                        </div>
                    </div>
                    <div id="contenedorFormApoderadoMatricula" style="display:none;">
                        <div class="row g-3 mt-3">
                            <div class="col-md-4">
                                <label for="apoderado_run" class="form-label">RUN</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="apoderado_run" name="apoderado_run" placeholder="Ej: 12345678-9">
                                    <button class="btn btn-outline-secondary" type="button" id="btnVerificarRunApoderado">Verificar</button>
                                    <div class="invalid-feedback" id="apoderado_run_feedback"></div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label for="apoderado_nombre" class="form-label">Nombre</label>
                                <input type="text" class="form-control" id="apoderado_nombre" name="apoderado_nombre">
                                <div class="invalid-feedback" id="apoderado_nombre_feedback"></div>
                            </div>
                            <div class="col-md-4">
                                <label for="apoderado_ap_paterno" class="form-label">Apellido paterno</label>
                                <input type="text" class="form-control" id="apoderado_ap_paterno" name="apoderado_ap_paterno">
                                <div class="invalid-feedback" id="apoderado_ap_paterno_feedback"></div>
                            </div>
                            <div class="col-md-4">
                                <label for="apoderado_ap_materno" class="form-label">Apellido materno</label>
                                <input type="text" class="form-control" id="apoderado_ap_materno" name="apoderado_ap_materno">
                            </div>
                            <div class="col-md-8">
                                <label for="apoderado_domicilio" class="form-label">
                                    Domicilio
                                    <small class="ms-2"><a href="#" id="btnCopiarDomicilioAlumno" class="text-decoration-none">(Copiar domicilio del alumno)</a></small>
                                </label>
                                <input type="text" class="form-control" id="apoderado_domicilio" name="apoderado_domicilio">
                            </div>
                            <div class="col-md-4">
                                <label for="apoderado_parentesco" class="form-label">Parentesco</label>
                                <input type="text" class="form-control" id="apoderado_parentesco" name="apoderado_parentesco">
                            </div>
                            <div class="col-md-4">
                                <label for="apoderado_parentesco_especifico" class="form-label">Parentesco específico para este alumno</label>
                                <input type="text" class="form-control" id="apoderado_parentesco_especifico" name="apoderado_parentesco_especifico" placeholder="Ej: PADRE, TÍO, ABUELO...">
                                <div class="form-text">Si se especifica, este parentesco se usará solo para este alumno</div>
                            </div>
                            <div class="col-md-4">
                                <fieldset class="border p-2 rounded">
                                    <legend class="float-none w-auto px-2 form-label fs-6">Roles de Apoderado</legend>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="APODERADO TITULAR" id="rol_titular" name="apoderado_rol[]">
                                        <label class="form-check-label" for="rol_titular">Apoderado Titular</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="APODERADO SUPLENTE" id="rol_suplente" name="apoderado_rol[]">
                                        <label class="form-check-label" for="rol_suplente">Apoderado Suplente</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="APODERADO 3" id="rol_apoderado3" name="apoderado_rol[]">
                                        <label class="form-check-label" for="rol_apoderado3">Apoderado 3</label>
                                    </div>
                                    <hr class="my-2">
                                    <legend class="float-none w-auto px-2 form-label fs-6">Roles de Emergencia</legend>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="CONTACTO DE EMERGENCIA 1" id="rol_emergencia1" name="apoderado_rol[]">
                                        <label class="form-check-label" for="rol_emergencia1">Contacto de Emergencia 1</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="CONTACTO DE EMERGENCIA 2" id="rol_emergencia2" name="apoderado_rol[]">
                                        <label class="form-check-label" for="rol_emergencia2">Contacto de Emergencia 2</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="CONTACTO DE EMERGENCIA 3" id="rol_emergencia3" name="apoderado_rol[]">
                                        <label class="form-check-label" for="rol_emergencia3">Contacto de Emergencia 3</label>
                                    </div>
                                    <hr class="my-2">
                                    <legend class="float-none w-auto px-2 form-label fs-6">Parentesco Directo</legend>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="PADRE" id="rol_padre" name="apoderado_rol[]">
                                        <label class="form-check-label" for="rol_padre">Padre</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="MADRE" id="rol_madre" name="apoderado_rol[]">
                                        <label class="form-check-label" for="rol_madre">Madre</label>
                                    </div>
                                </fieldset>
                            </div>
                            <div class="col-md-4">
                                <label for="apoderado_telefono" class="form-label">Teléfono</label>
                                <input type="text" class="form-control" id="apoderado_telefono" name="apoderado_telefono">
                            </div>
                            <div class="col-md-4">
                                <label for="apoderado_telefono2" class="form-label">Teléfono 2</label>
                                <input type="text" class="form-control" id="apoderado_telefono2" name="apoderado_telefono2">
                            </div>
                            <div class="col-md-4">
                                <label for="apoderado_email" class="form-label">Email</label>
                                <input type="email" class="form-control" id="apoderado_email" name="apoderado_email">
                            </div>
                            <div class="col-md-4">
                                <label for="apoderado_escolaridad" class="form-label">Escolaridad</label>
                                <input type="text" class="form-control" id="apoderado_escolaridad" name="apoderado_escolaridad">
                            </div>
                            <div class="col-md-4">
                                <label for="apoderado_profesion" class="form-label">Profesión</label>
                                <input type="text" class="form-control" id="apoderado_profesion" name="apoderado_profesion">
                            </div>
                            <div class="col-md-4">
                                <label for="apoderado_actividad_laboral" class="form-label">Actividad laboral</label>
                                <input type="text" class="form-control" id="apoderado_actividad_laboral" name="apoderado_actividad_laboral">
                            </div>
                        </div>
                        <div class="d-flex justify-content-end mt-3">
                            <button type="button" class="btn btn-secondary" id="btnCancelarApoderado">Cancelar</button>
                            <button type="button" class="btn btn-primary ms-2" id="btnAnadirFamiliar"><i class="bi bi-plus-circle-fill me-2"></i>Añadir familiar a la lista</button>
                        </div>
                    </div>
                    <div id="listaFamiliaresAgregados" class="mt-4">
                        <!-- Aquí se mostrarán los familiares añadidos -->
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-end mt-4">
                <button type="button" id="btnImprimirFichaNueva" class="btn btn-info me-auto" style="display:none;"><i class="bi bi-printer-fill me-2"></i>Imprimir ficha de matrícula</button>
                <button type="button" id="btnCancelarMatricula" class="btn btn-secondary me-2">Cancelar</button>
                <button type="submit" class="btn btn-primary" style="background:#484A67;">Guardar Matrícula</button>
            </div>
        </form>
    </div>
</div>