{{-- Modal Agregar/Editar periodo (según imagen) --}}
<div class="modal fade" id="modalCicloPeriodo" tabindex="-1" aria-labelledby="modalCicloPeriodoLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="modalCicloTitulo">Agregar periodo</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="cicloId">
                <form id="formModalCiclo">
                    <p class="text-muted small mb-3">Usa el siguiente formulario para REGISTRAR un nuevo periodo.</p>

                    <div class="row g-3 mb-3">
                        <div class="col-md-8">
                            <label for="cicloNombre" class="form-label">* Nombre oficial</label>
                            <input type="text" class="form-control" id="cicloNombre" placeholder="Nombre oficial del periodo" maxlength="50" required>
                        </div>
                        <div class="col-md-4 d-flex align-items-end pb-2">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="cicloActivo" checked>
                                <label class="form-check-label" for="cicloActivo">Periodo activo</label>
                            </div>
                        </div>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label for="cicloPlan" class="form-label">* Plan</label>
                            <select class="form-select" id="cicloPlan" required>
                                <option value="">-- Seleccione --</option>
                                <option value="Trimestral">Trimestral</option>
                                <option value="Cuatrimestral">Cuatrimestral</option>
                                <option value="Semestral">Semestral</option>
                                <option value="Anual">Anual</option>
                                <option value="Mensual">Mensual</option>
                                <option value="Bimestral">Bimestral</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="cicloAbreviatura" class="form-label">* Abreviatura (corta)</label>
                            <input type="text" class="form-control" id="cicloAbreviatura" placeholder="Ej: 2026-1" maxlength="20" required>
                        </div>
                        <div class="col-md-6">
                            <label for="cicloNumeroCiclo" class="form-label">* No. de ciclo escolar</label>
                            <input type="text" class="form-control" id="cicloNumeroCiclo" placeholder="Número de ciclo" maxlength="20" required>
                        </div>
                        <div class="col-md-6">
                            <label for="cicloFechaOficialInicio" class="form-label">* Fecha oficial de inicio</label>
                            <input type="date" class="form-control" id="cicloFechaOficialInicio" required>
                        </div>
                        <div class="col-md-6">
                            <label for="cicloFechaInicio" class="form-label">* Fecha administrativa de inicio</label>
                            <input type="date" class="form-control" id="cicloFechaInicio" required>
                        </div>
                        <div class="col-md-6">
                            <label for="cicloFechaOficialFin" class="form-label">* Fecha oficial de término</label>
                            <input type="date" class="form-control" id="cicloFechaOficialFin" required>
                        </div>
                        <div class="col-md-6">
                            <label for="cicloFechaFin" class="form-label">* Fecha administrativa de fin</label>
                            <input type="date" class="form-control" id="cicloFechaFin" required>
                        </div>
                    </div>

                    <h6 class="text-primary border-bottom pb-2 mb-2">Configuración de fechas límite</h6>
                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label for="cicloFechaLimiteReinscripciones" class="form-label">(Re)Inscripciones</label>
                            <input type="date" class="form-control" id="cicloFechaLimiteReinscripciones">
                        </div>
                        <div class="col-md-4">
                            <label for="cicloFechaLimiteBajaAlumno" class="form-label">Baja de alumno</label>
                            <input type="date" class="form-control" id="cicloFechaLimiteBajaAlumno">
                        </div>
                        <div class="col-md-4">
                            <label for="cicloFechaLimiteBajaAsignatura" class="form-label">Baja de asignatura</label>
                            <input type="date" class="form-control" id="cicloFechaLimiteBajaAsignatura">
                        </div>
                    </div>

                    <p class="text-muted small mb-0">Nota: Llenar campos obligatorios (*).</p>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" form="formModalCiclo" class="btn btn-success">
                    <i class="ri-save-line me-1"></i>Guardar
                </button>
            </div>
        </div>
    </div>
</div>