<?php
require_once __DIR__ . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . 'config'   . DIRECTORY_SEPARATOR . 'app.php';
require_once __DIR__ . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . 'includes' . DIRECTORY_SEPARATOR . 'auth.php';
require_once __DIR__ . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . 'includes' . DIRECTORY_SEPARATOR . 'functions.php';
requireRol(ROL_SECRETARIA);
$idInst = instId();

$user      = currentUser();
$db        = getDB();
$pageTitle = 'Dashboard Secretaria';

// ── Datos del instituto ───────────────────────────────────────
$stInstSec = $db->prepare("SELECT nombre, logo FROM institutos WHERE id_instituto = :id LIMIT 1");
$stInstSec->execute([':id' => $idInst ?: 1]);
$instSec   = $stInstSec->fetch() ?: [];
$logoSec   = $instSec['logo'] ?? '';
$nombreSec = $instSec['nombre'] ?? 'SIGVP';
$logoUrlSec = $logoSec ? BASE_URL . '/uploads/institutos/' . $logoSec : '';

// ── Catálogos ──────────────────────────────────────────────
$periodos    = $db->query("SELECT id_periodo, nombre, fecha_inicio, fecha_fin, activo FROM periodos_academicos WHERE 1=1" . instCond() . " ORDER BY id_periodo DESC")->fetchAll();
$pa          = $db->query("SELECT * FROM periodos_academicos WHERE 1=1" . instCond() . " AND activo=1 ORDER BY id_periodo DESC LIMIT 1")->fetch();
$idPerActivo = $pa ? $pa['id_periodo'] : ($periodos[0]['id_periodo'] ?? 0);
$carreras    = $db->query("SELECT id_carrera, nombre FROM carreras WHERE activa=1" . instCond() . " ORDER BY nombre")->fetchAll();

// ── Filtros seleccionados (GET) ────────────────────────────
$filtroPer = (int)($_GET['periodo'] ?? $idPerActivo);
$filtroCar = (int)($_GET['carrera'] ?? 0);

// Nombre del período mostrado
$perNombre = 'Todos los períodos';
foreach ($periodos as $p) { if ($p['id_periodo'] == $filtroPer) { $perNombre = $p['nombre']; break; } }
$carNombre = 'Todas las carreras';
foreach ($carreras as $c) { if ($c['id_carrera'] == $filtroCar) { $carNombre = $c['nombre']; break; } }

// Claúsulas WHERE dinámicas
$wPer  = $filtroPer ? " AND p.id_periodo  = $filtroPer"  : "";
$wCar  = $filtroCar ? " AND est.id_carrera = $filtroCar" : "";
$wPerB = $filtroPer ? " AND pr.id_periodo  = $filtroPer" : "";  // alias pr
$wCarB = $filtroCar ? " AND estB.id_carrera = $filtroCar" : ""; // alias estB

// ════════════════════════════════════════════════════════════
//  SECCIÓN 1 — PRÁCTICAS PREPROFESIONALES (PPP)
// ════════════════════════════════════════════════════════════

// KPIs PPP
$kpiPPP = $db->query("
    SELECT
        COUNT(*)                                            AS total,
        SUM(p.estado='completado')                          AS completadas,
        SUM(p.estado='en_progreso')                         AS en_progreso,
        SUM(p.estado='informe_enviado')                     AS informe_enviado,
        SUM(p.estado='postulado')                           AS postuladas,
        SUM(p.estado='calificado')                          AS calificadas,
        SUM(p.estado='rechazado')                           AS rechazadas,
        ROUND(AVG(p.horas_cumplidas),1)                     AS prom_horas,
        SUM(p.horas_cumplidas >= p.horas_requeridas)        AS horas_completas,
        ROUND(AVG(CASE WHEN p.nota_final IS NOT NULL THEN p.nota_final END),2) AS prom_nota,
        SUM(CASE WHEN p.nota_final IS NOT NULL THEN 1 ELSE 0 END) AS con_nota
    FROM practicas p
    JOIN estudiantes est ON est.id_estudiante = p.id_estudiante
    WHERE 1=1 $wPer $wCar
    " . ($idInst ? "AND p.id_instituto = $idInst" : "") . "
")->fetch();

// Notas PPP por carrera (solo las que tienen nota)
$notasPPP = $db->query("
    SELECT c.nombre AS carrera,
           COUNT(p.id_practica)                                          AS total,
           SUM(p.estado='completado')                                    AS completados,
           ROUND(AVG(CASE WHEN p.nota_final IS NOT NULL THEN p.nota_final END),2) AS prom_nota,
           SUM(CASE WHEN p.nota_final IS NOT NULL AND p.nota_final >= 60 THEN 1 ELSE 0 END) AS aprobados,
           SUM(CASE WHEN p.nota_final IS NOT NULL AND p.nota_final < 60  THEN 1 ELSE 0 END) AS reprobados,
           SUM(CASE WHEN p.nota_final IS NOT NULL THEN 1 ELSE 0 END)     AS con_nota,
           SUM(p.horas_cumplidas >= p.horas_requeridas)                  AS horas_ok,
           ROUND(AVG(p.horas_cumplidas),1)                               AS prom_horas,
           c.horas_minimas
    FROM practicas p
    JOIN estudiantes est ON est.id_estudiante = p.id_estudiante
    JOIN carreras c      ON c.id_carrera      = est.id_carrera
    WHERE 1=1 $wPer $wCar
    " . ($idInst ? "AND p.id_instituto = $idInst" : "") . "
    GROUP BY c.id_carrera
    ORDER BY total DESC
")->fetchAll();

// Certificados PPP
$sinCert = (int)$db->query("
    SELECT COUNT(*) FROM practicas p
    JOIN estudiantes est ON est.id_estudiante = p.id_estudiante
    WHERE p.estado = 'completado'
      AND NOT EXISTS (SELECT 1 FROM certificados c WHERE c.id_practica = p.id_practica)
      $wPer $wCar
      " . ($idInst ? "AND p.id_instituto = $idInst" : "") . "
")->fetchColumn();

// ════════════════════════════════════════════════════════════
//  SECCIÓN 2 — VINCULACIÓN CON LA SOCIEDAD
// ════════════════════════════════════════════════════════════

// KPIs Vinculación — usa id_periodo del grupo
$wPerV = $filtroPer ? " AND g.id_periodo = $filtroPer"  : "";
$wCarV = $filtroCar ? " AND car.id_carrera = $filtroCar" : "";

$kpiVinc = $db->query("
    SELECT
        COUNT(DISTINCT g.id_grupo)                              AS total_grupos,
        SUM(g.estado='completado')                              AS completados,
        SUM(g.estado IN ('aprobado','en_progreso'))             AS activos,
        SUM(g.estado='pendiente')                               AS pendientes,
        ROUND(AVG(g.horas_cumplidas),1)                         AS prom_horas,
        SUM(g.horas_cumplidas >= g.horas_requeridas)            AS horas_ok,
        COUNT(DISTINCT m.id_estudiante)                         AS total_estudiantes
    FROM grupos_vinculacion g
    LEFT JOIN miembros_grupo_vinculacion m ON m.id_grupo = g.id_grupo AND m.estado='activo'
    LEFT JOIN estudiantes est ON est.id_estudiante = m.id_estudiante
    LEFT JOIN carreras car    ON car.id_carrera    = est.id_carrera
    WHERE 1=1 $wPerV $wCarV
    " . ($idInst ? "AND g.id_instituto = $idInst" : "") . "
")->fetch();

// Notas Vinculación por carrera
$notasVinc = $db->query("
    SELECT car.nombre AS carrera,
           COUNT(DISTINCT g.id_grupo)                            AS total_grupos,
           SUM(g.estado='completado')                            AS completados,
           ROUND(AVG(cv.nota_promedio),2)                        AS prom_nota,
           SUM(CASE WHEN cv.nota_promedio IS NOT NULL AND cv.nota_promedio >= 70 THEN 1 ELSE 0 END) AS aprobados,
           SUM(CASE WHEN cv.nota_promedio IS NOT NULL AND cv.nota_promedio < 70  THEN 1 ELSE 0 END) AS reprobados,
           SUM(CASE WHEN cv.nota_promedio IS NOT NULL THEN 1 ELSE 0 END)  AS con_nota,
           COUNT(DISTINCT m.id_estudiante)                        AS total_estudiantes
    FROM grupos_vinculacion g
    JOIN miembros_grupo_vinculacion m ON m.id_grupo = g.id_grupo AND m.estado='activo'
    JOIN estudiantes est ON est.id_estudiante = m.id_estudiante
    JOIN carreras car    ON car.id_carrera    = est.id_carrera
    LEFT JOIN calificaciones_vinculacion cv ON cv.id_grupo=g.id_grupo AND cv.id_estudiante=m.id_estudiante
    WHERE 1=1 $wPerV $wCarV
    " . ($idInst ? "AND g.id_instituto = $idInst" : "") . "
    GROUP BY car.id_carrera
    ORDER BY total_grupos DESC
")->fetchAll();

// ════════════════════════════════════════════════════════════
//  SECCIÓN 3 — TITULACIÓN
// ════════════════════════════════════════════════════════════

// titulaciones (complexivo/investigación) usa est.id_periodo_ingreso
$wPerTI = $filtroPer ? " AND est.id_periodo_ingreso = $filtroPer"  : "";  // titulaciones
$wCarT  = $filtroCar ? " AND est.id_carrera = $filtroCar"          : "";

// Examen Complexivo — titulaciones.nota_trabajo (no nota_final)
$kpiComplexivo = $db->query("
    SELECT
        COUNT(*)                                        AS total,
        SUM(t.estado='aprobado')                        AS aprobados,
        SUM(t.estado='enviada')                         AS en_proceso,
        SUM(t.estado='rechazado')                       AS rechazados,
        ROUND(AVG(CASE WHEN t.estado='aprobado' AND t.nota_trabajo IS NOT NULL THEN t.nota_trabajo END),2) AS prom_nota
    FROM titulaciones t
    JOIN estudiantes est ON est.id_estudiante = t.id_estudiante
    WHERE t.modalidad = 'examen_complexivo'
      $wPerTI $wCarT
      " . ($idInst ? "AND est.id_instituto = $idInst" : "") . "
")->fetch();

// Examen Complexivo por carrera
$complexivoPorCarrera = $db->query("
    SELECT car.nombre AS carrera,
           COUNT(*)                                AS total,
           SUM(t.estado='aprobado')                AS aprobados,
           SUM(t.estado='enviada')                 AS en_proceso,
           ROUND(AVG(CASE WHEN t.estado='aprobado' THEN t.nota_trabajo END),2) AS prom_nota
    FROM titulaciones t
    JOIN estudiantes est ON est.id_estudiante = t.id_estudiante
    JOIN carreras car    ON car.id_carrera    = est.id_carrera
    WHERE t.modalidad = 'examen_complexivo'
      $wPerTI $wCarT
      " . ($idInst ? "AND est.id_instituto = $idInst" : "") . "
    GROUP BY car.id_carrera
    ORDER BY total DESC
")->fetchAll();

// Trabajo de Investigación — titulaciones.nota_trabajo
$kpiInvestigacion = $db->query("
    SELECT
        COUNT(*)                                        AS total,
        SUM(t.estado='aprobado')                        AS aprobados,
        SUM(t.estado='enviada')                         AS en_proceso,
        ROUND(AVG(CASE WHEN t.estado='aprobado' AND t.nota_trabajo IS NOT NULL THEN t.nota_trabajo END),2) AS prom_nota
    FROM titulaciones t
    JOIN estudiantes est ON est.id_estudiante = t.id_estudiante
    WHERE t.modalidad = 'trabajo_investigacion'
      $wPerTI $wCarT
      " . ($idInst ? "AND est.id_instituto = $idInst" : "") . "
")->fetch();

// Trabajo de Investigación por carrera
$investigacionPorCarrera = $db->query("
    SELECT car.nombre AS carrera,
           COUNT(*)                                AS total,
           SUM(t.estado='aprobado')                AS aprobados,
           SUM(t.estado='enviada')                 AS en_proceso,
           ROUND(AVG(CASE WHEN t.estado='aprobado' THEN t.nota_trabajo END),2) AS prom_nota
    FROM titulaciones t
    JOIN estudiantes est ON est.id_estudiante = t.id_estudiante
    JOIN carreras car    ON car.id_carrera    = est.id_carrera
    WHERE t.modalidad = 'trabajo_investigacion'
      $wPerTI $wCarT
      " . ($idInst ? "AND est.id_instituto = $idInst" : "") . "
    GROUP BY car.id_carrera
    ORDER BY total DESC
")->fetchAll();

// Certificados PPP
$certStats = [];
try {
    $rows = $db->query("SELECT tipo, COUNT(*) AS total FROM certificados GROUP BY tipo")->fetchAll();
    $certStats = array_column($rows, 'total', 'tipo');
} catch (Exception $e) { $certStats = []; }

// Certificados Vinculación pendientes
$sinCertVinc = 0;
try {
    $__tbl = $db->query("SHOW TABLES LIKE 'certificados_vinculacion'")->fetchColumn();
    if ($__tbl) {
        $__iCond = $idInst ? "AND g.id_instituto = $idInst" : '';
        $sinCertVinc = (int)$db->query("
            SELECT COUNT(DISTINCT CONCAT(m.id_grupo,'_',m.id_estudiante))
            FROM miembros_grupo_vinculacion m
            JOIN grupos_vinculacion g ON g.id_grupo = m.id_grupo
            WHERE g.estado = 'completado' AND m.estado = 'activo' $__iCond
              AND NOT EXISTS (
                  SELECT 1 FROM certificados_vinculacion cv
                  WHERE cv.id_grupo = m.id_grupo AND cv.id_estudiante = m.id_estudiante
                    AND cv.tipo = 'culminacion' AND cv.vigente = 1
              )
        ")->fetchColumn();
    }
} catch (Exception $e) { $sinCertVinc = 0; }
?>
<?php $paginaActual = 'dashboard'; ?>
<!DOCTYPE html>
<html lang="es">
<head>
<?php include __DIR__ . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . 'includes' . DIRECTORY_SEPARATOR . 'head.php'; ?>
<link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/sidebar.css">
<link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/sidebar-secretaria.css">
<style>
/* ── Variables de sección ── */
:root {
  --ppp-color:   #3b82f6;
  --vinc-color:  #10b981;
  --tit-color:   #f59e0b;
  --comp-color:  #8b5cf6;
  --inv-color:   #ec4899;
}
.section-header {
  display:flex; align-items:center; gap:10px;
  padding: 12px 18px;
  border-radius: 10px 10px 0 0;
  color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
}
.section-header .sh-icon { font-size:18px; }
.section-header .sh-sub  { font-size:11px; font-weight:400; opacity:.8; margin-top:1px; }
.section-header.ppp  { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.section-header.vinc { background: linear-gradient(135deg, #065f46, #10b981); }
.section-header.tit  { background: linear-gradient(135deg, #92400e, #f59e0b); }
.section-header.comp { background: linear-gradient(135deg, #4c1d95, #8b5cf6); }
.section-header.inv  { background: linear-gradient(135deg, #9d174d, #ec4899); }

.section-block {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 24px;
  border: 1px solid rgba(255,255,255,.06);
}
.section-body { background: var(--card); padding: 18px; }
.section-body.no-pad { padding: 0; }

/* KPI mini cards */
.kpi-row { display:grid; gap:10px; margin-bottom:16px; }
.kpi-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.kpi-row.cols-5 { grid-template-columns: repeat(5, 1fr); }
.kpi-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-card {
  background: var(--card-alt);
  border-radius: 8px;
  padding: 12px 14px;
  border-top: 3px solid transparent;
  text-align: center;
}
.kpi-card .kpi-val { font-size: 26px; font-weight: 800; line-height: 1; }
.kpi-card .kpi-lbl { font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }

/* Notas tabla */
.nota-badge {
  display:inline-block; padding:2px 8px; border-radius:20px;
  font-size:11px; font-weight:700;
}
.nota-ap  { background:#052e1688; color:#3dffa0; border:1px solid #3dffa044; }
.nota-rep { background:#2a0d0d88; color:#ff9d93; border:1px solid #ff9d9344; }
.nota-nd  { background:transparent; color:#6b7280; }

/* Barra progreso */
.prog-bar { height:5px; border-radius:3px; background:var(--border); overflow:hidden; margin-top:4px; }
.prog-fill { height:100%; border-radius:3px; transition:width .4s; }

/* Tabs titulación */
.tit-tabs { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.tit-tab {
  padding:6px 16px; border-radius:20px; font-size:12px; font-weight:600;
  cursor:pointer; border:1px solid var(--border); background:var(--card);
  color:var(--text-2); text-decoration:none; transition:.15s;
}
.tit-tab.active-comp { background:#4c1d95; color:#e9d5ff; border-color:#7c3aed; }
.tit-tab.active-inv  { background:#9d174d; color:#fce7f3; border-color:#ec4899; }
.tit-tab.active-grad { background:#92400e; color:#fef3c7; border-color:#f59e0b; }

/* Filtro bar */
.filter-bar {
  background:var(--card); border:1px solid var(--border);
  border-radius:10px; padding:14px 18px; margin-bottom:20px;
}

/* Responsive */
@media (max-width:768px) {
  .kpi-row.cols-4, .kpi-row.cols-5 { grid-template-columns: repeat(2, 1fr); }
  .kpi-row.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
</style>
</head>
<body>
<?php include __DIR__ . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . 'includes' . DIRECTORY_SEPARATOR . 'navbar.php'; ?>

<div class="app-shell">
  <?php include __DIR__ . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . 'includes' . DIRECTORY_SEPARATOR . 'sidebar-secretaria.php'; ?>

  <main class="main-area">

    <!-- ── ENCABEZADO CON LOGO, INSTITUTO Y FECHA ── -->
    <div style="display:flex;align-items:center;justify-content:space-between;
                background:#fff;border:1px solid #e2e8f0;border-radius:12px;
                padding:16px 24px;margin-bottom:20px;
                box-shadow:0 1px 3px rgba(0,0,0,.06);">

      <!-- LOGO -->
      <div style="flex-shrink:0;">
        <?php if (!empty($logoUrlSec)): ?>
          <img src="<?= htmlspecialchars($logoUrlSec) ?>"
               alt="Logo <?= htmlspecialchars($nombreSec) ?>"
               style="height:72px;width:72px;object-fit:contain;border-radius:10px;
                      border:1px solid #e2e8f0;padding:4px;background:#f8fafc;">
        <?php else: ?>
          <div style="height:72px;width:72px;background:#1a3a6b;border-radius:10px;
                      display:flex;align-items:center;justify-content:center;font-size:32px;">🏫</div>
        <?php endif; ?>
      </div>

      <!-- NOMBRE DEL INSTITUTO -->
      <div style="flex:1;text-align:center;padding:0 20px;">
        <div style="font-size:11px;font-weight:700;letter-spacing:1.5px;
                    text-transform:uppercase;color:#94a3b8;margin-bottom:4px;">
          Panel Secretaria
        </div>
        <div style="font-size:19px;font-weight:900;color:#1e293b;line-height:1.2;">
          <?= htmlspecialchars($nombreSec) ?>
        </div>
        <div style="font-size:12px;color:#64748b;margin-top:4px;">
          <?= htmlspecialchars($user['nombre'] ?? '') ?>
        </div>
      </div>

      <!-- FECHA Y HORA -->
      <div style="flex-shrink:0;text-align:center;background:#f8fafc;
                  border:1px solid #e2e8f0;border-radius:12px;
                  padding:12px 20px;min-width:130px;">
        <div style="font-size:22px;font-weight:800;color:#1e293b;line-height:1;" id="sec-hora">
          <?= date('H:i:s') ?>
        </div>
        <div style="font-size:11px;color:#94a3b8;margin-top:4px;font-weight:600;" id="sec-fecha">
          <?= date('d/m/Y') ?>
        </div>
        <div style="font-size:10px;color:#cbd5e1;margin-top:2px;" id="sec-dia">
          <?= ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'][date('w')] ?>
        </div>
      </div>

    </div>

    <!-- ── PAGE HEADER ── -->
    <div class="page-header d-flex justify-content-between align-items-start flex-wrap gap-2">
      <div>
        <h4><i class="fa fa-gauge me-2" style="color:#2ea8ff;"></i>Panel Secretaria</h4>
        <p>Prácticas Preprofesionales · Vinculación · Titulación — requerimientos CES / CACES</p>
      </div>
      <div style="background:#2ea8ff15;border:1px solid #2ea8ff33;border-radius:8px;padding:8px 14px;font-size:13px;">
        <i class="fa fa-calendar me-1" style="color:#2ea8ff;"></i>
        <strong>Mostrando:</strong> <?= htmlspecialchars($perNombre) ?>
        <?php if ($filtroCar): ?> · <?= htmlspecialchars($carNombre) ?><?php endif; ?>
        <?php if ($filtroPer == $idPerActivo): ?>
          <span style="font-size:10px;margin-left:6px;background:#3dffa022;color:#3dffa0;padding:1px 6px;border-radius:10px;font-weight:700;">★ activo</span>
        <?php endif; ?>
      </div>
    </div>

    <!-- ── FILTROS ── -->
    <div class="filter-bar">
      <form method="GET" class="row g-2 align-items-end">
        <div class="col-sm-6 col-md-4">
          <label class="form-label">Ciclo / Período</label>
          <select name="periodo" class="form-select form-select-sm">
            <option value="0">— Todos los períodos —</option>
            <?php foreach ($periodos as $p): ?>
            <option value="<?= $p['id_periodo'] ?>" <?= $filtroPer==$p['id_periodo']?'selected':'' ?>>
              <?= htmlspecialchars($p['nombre']) ?><?= $p['activo'] ? ' ★ activo' : '' ?>
            </option>
            <?php endforeach; ?>
          </select>
        </div>
        <div class="col-sm-6 col-md-4">
          <label class="form-label">Carrera</label>
          <select name="carrera" class="form-select form-select-sm">
            <option value="0">— Todas las carreras —</option>
            <?php foreach ($carreras as $c): ?>
            <option value="<?= $c['id_carrera'] ?>" <?= $filtroCar==$c['id_carrera']?'selected':'' ?>><?= htmlspecialchars($c['nombre']) ?></option>
            <?php endforeach; ?>
          </select>
        </div>
        <div class="col-auto d-flex gap-2">
          <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-filter me-1"></i>Aplicar</button>
          <a href="dashboard.php" class="btn btn-outline-secondary btn-sm"><i class="fa fa-xmark me-1"></i>Limpiar</a>
        </div>
      </form>
    </div>

    <!-- ══════════════════════════════════════════════════════
         SECCIÓN 1 — PRÁCTICAS PREPROFESIONALES
    ══════════════════════════════════════════════════════ -->
    <div class="section-block">
      <div class="section-header ppp">
        <span class="sh-icon"><i class="fa fa-briefcase"></i></span>
        <div>
          <div>Prácticas Preprofesionales</div>
          <div class="sh-sub">Seguimiento de horas, notas y cumplimiento CES</div>
        </div>
        <div class="ms-auto d-flex gap-2">
          <span style="background:rgba(255,255,255,.15);padding:3px 10px;border-radius:20px;font-size:11px;">
            <?= $kpiPPP['total'] ?? 0 ?> prácticas
          </span>
        </div>
      </div>
      <div class="section-body">

        <!-- KPIs PPP -->
        <div class="kpi-row cols-5">
          <div class="kpi-card" style="border-top-color:#3b82f6;">
            <div class="kpi-val" style="color:#3b82f6;"><?= $kpiPPP['total'] ?? 0 ?></div>
            <div class="kpi-lbl">Total prácticas</div>
          </div>
          <div class="kpi-card" style="border-top-color:#3dffa0;">
            <div class="kpi-val" style="color:#3dffa0;"><?= $kpiPPP['completadas'] ?? 0 ?></div>
            <div class="kpi-lbl">Completadas</div>
          </div>
          <div class="kpi-card" style="border-top-color:#f7b93e;">
            <div class="kpi-val" style="color:#f7b93e;"><?= $kpiPPP['en_progreso'] ?? 0 ?></div>
            <div class="kpi-lbl">En progreso</div>
          </div>
          <div class="kpi-card" style="border-top-color:#2ea8ff;">
            <div class="kpi-val" style="color:#2ea8ff;"><?= $kpiPPP['informe_enviado'] ?? 0 ?></div>
            <div class="kpi-lbl">Informe enviado</div>
          </div>
          <div class="kpi-card" style="border-top-color:#ff9d93;">
            <div class="kpi-val" style="color:#ff9d93;"><?= $sinCert ?></div>
            <div class="kpi-lbl">Sin certificado</div>
          </div>
        </div>

        <!-- Fila métricas -->
        <div class="kpi-row cols-4" style="margin-bottom:20px;">
          <div class="kpi-card" style="border-top-color:#a78bfa;">
            <div class="kpi-val" style="color:#a78bfa;"><?= $kpiPPP['prom_nota'] ? number_format($kpiPPP['prom_nota'],2) : '—' ?></div>
            <div class="kpi-lbl">Nota promedio /100</div>
          </div>
          <div class="kpi-card" style="border-top-color:#3dffa0;">
            <div class="kpi-val" style="color:#3dffa0;"><?= number_format($kpiPPP['prom_horas'] ?? 0,1) ?>h</div>
            <div class="kpi-lbl">Prom. horas cumplidas</div>
          </div>
          <div class="kpi-card" style="border-top-color:#3b82f6;">
            <div class="kpi-val" style="color:#3b82f6;"><?= $kpiPPP['horas_completas'] ?? 0 ?></div>
            <div class="kpi-lbl">Con horas completas</div>
          </div>
          <div class="kpi-card" style="border-top-color:#f7b93e;">
            <div class="kpi-val" style="color:#f7b93e;">
              <?= $kpiPPP['total'] > 0 ? round(($kpiPPP['completadas']/$kpiPPP['total'])*100) : 0 ?>%
            </div>
            <div class="kpi-lbl">Tasa completitud</div>
          </div>
        </div>

        <!-- Tabla notas por carrera PPP -->
        <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#6b7280;margin-bottom:8px;">
          <i class="fa fa-star me-1" style="color:#f7b93e;"></i>Notas y cumplimiento por carrera
        </div>
        <div style="overflow-x:auto;">
          <table class="table table-borderless mb-0" style="font-size:12px;">
            <thead>
              <tr>
                <th>Carrera</th>
                <th class="text-center">Total</th>
                <th class="text-center">Completados</th>
                <th class="text-center">Nota prom.</th>
                <th class="text-center">Aprobados</th>
                <th class="text-center">Reprobados</th>
                <th class="text-center">Sin nota</th>
                <th class="text-center">Horas OK</th>
                <th>Cumplimiento</th>
              </tr>
            </thead>
            <tbody>
              <?php if (empty($notasPPP)): ?>
              <tr><td colspan="9" class="text-center text-muted py-4">Sin datos para los filtros seleccionados.</td></tr>
              <?php else: foreach ($notasPPP as $r):
                $pct = $r['total'] > 0 ? round($r['completados']/$r['total']*100) : 0;
                $colorBar = $pct >= 80 ? '#3dffa0' : ($pct >= 50 ? '#f7b93e' : '#ff9d93');
                $sinNota  = $r['total'] - $r['con_nota'];
              ?>
              <tr>
                <td>
                  <strong style="font-size:13px;"><?= htmlspecialchars($r['carrera']) ?></strong>
                  <div style="font-size:10px;color:#6b7280;">Mín. <?= $r['horas_minimas'] ?>h</div>
                </td>
                <td class="text-center" style="font-weight:700;"><?= $r['total'] ?></td>
                <td class="text-center" style="color:#3dffa0;font-weight:700;"><?= $r['completados'] ?></td>
                <td class="text-center">
                  <?php if ($r['prom_nota']): ?>
                    <span style="font-size:15px;font-weight:800;color:<?= $r['prom_nota']>=60?'#3dffa0':'#ff9d93' ?>;">
                      <?= number_format($r['prom_nota'],2) ?>
                    </span>
                    <span style="font-size:10px;color:#6b7280;">/100</span>
                  <?php else: ?>
                    <span class="nota-nd">—</span>
                  <?php endif; ?>
                </td>
                <td class="text-center">
                  <span class="nota-badge nota-ap"><?= $r['aprobados'] ?></span>
                </td>
                <td class="text-center">
                  <span class="nota-badge nota-rep"><?= $r['reprobados'] ?></span>
                </td>
                <td class="text-center" style="color:#6b7280;font-size:11px;"><?= $sinNota ?></td>
                <td class="text-center" style="color:#2ea8ff;"><?= $r['horas_ok'] ?></td>
                <td style="min-width:120px;">
                  <div style="display:flex;align-items:center;gap:6px;">
                    <div class="prog-bar" style="flex:1;">
                      <div class="prog-fill" style="width:<?= $pct ?>%;background:<?= $colorBar ?>;"></div>
                    </div>
                    <span style="font-size:11px;font-weight:700;color:<?= $colorBar ?>;"><?= $pct ?>%</span>
                  </div>
                </td>
              </tr>
              <?php endforeach; endif; ?>
            </tbody>
          </table>
        </div>
      </div><!-- /section-body -->
    </div><!-- /section-block PPP -->


    <!-- ══════════════════════════════════════════════════════
         SECCIÓN 2 — VINCULACIÓN CON LA SOCIEDAD
    ══════════════════════════════════════════════════════ -->
    <div class="section-block">
      <div class="section-header vinc">
        <span class="sh-icon"><i class="fa fa-handshake"></i></span>
        <div>
          <div>Vinculación con la Sociedad</div>
          <div class="sh-sub">Grupos comunitarios, horas y calificaciones</div>
        </div>
        <div class="ms-auto d-flex gap-2">
          <span style="background:rgba(255,255,255,.15);padding:3px 10px;border-radius:20px;font-size:11px;">
            <?= $kpiVinc['total_grupos'] ?? 0 ?> grupos · <?= $kpiVinc['total_estudiantes'] ?? 0 ?> estudiantes
          </span>
        </div>
      </div>
      <div class="section-body">

        <!-- KPIs Vinculación -->
        <div class="kpi-row cols-4">
          <div class="kpi-card" style="border-top-color:#10b981;">
            <div class="kpi-val" style="color:#10b981;"><?= $kpiVinc['total_grupos'] ?? 0 ?></div>
            <div class="kpi-lbl">Total grupos</div>
          </div>
          <div class="kpi-card" style="border-top-color:#3dffa0;">
            <div class="kpi-val" style="color:#3dffa0;"><?= $kpiVinc['completados'] ?? 0 ?></div>
            <div class="kpi-lbl">Completados</div>
          </div>
          <div class="kpi-card" style="border-top-color:#f7b93e;">
            <div class="kpi-val" style="color:#f7b93e;"><?= $kpiVinc['activos'] ?? 0 ?></div>
            <div class="kpi-lbl">Activos</div>
          </div>
          <div class="kpi-card" style="border-top-color:#ff9d93;">
            <div class="kpi-val" style="color:#ff9d93;"><?= $kpiVinc['pendientes'] ?? 0 ?></div>
            <div class="kpi-lbl">Pendientes aprobación</div>
          </div>
        </div>

        <!-- Tabla notas vinculación por carrera -->
        <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#6b7280;margin-bottom:8px;">
          <i class="fa fa-star me-1" style="color:#10b981;"></i>Calificaciones por carrera
        </div>
        <div style="overflow-x:auto;">
          <table class="table table-borderless mb-0" style="font-size:12px;">
            <thead>
              <tr>
                <th>Carrera</th>
                <th class="text-center">Grupos</th>
                <th class="text-center">Estudiantes</th>
                <th class="text-center">Completados</th>
                <th class="text-center">Nota prom.</th>
                <th class="text-center">Aprobados</th>
                <th class="text-center">Reprobados</th>
                <th class="text-center">Sin nota</th>
                <th>Completitud</th>
              </tr>
            </thead>
            <tbody>
              <?php if (empty($notasVinc)): ?>
              <tr><td colspan="9" class="text-center text-muted py-4">Sin datos de vinculación para los filtros seleccionados.</td></tr>
              <?php else: foreach ($notasVinc as $r):
                $pct = $r['total_grupos'] > 0 ? round($r['completados']/$r['total_grupos']*100) : 0;
                $colorBar = $pct >= 80 ? '#3dffa0' : ($pct >= 50 ? '#f7b93e' : '#ff9d93');
                $sinNota  = $r['total_estudiantes'] - $r['con_nota'];
              ?>
              <tr>
                <td><strong style="font-size:13px;"><?= htmlspecialchars($r['carrera']) ?></strong></td>
                <td class="text-center" style="font-weight:700;"><?= $r['total_grupos'] ?></td>
                <td class="text-center" style="color:#2ea8ff;"><?= $r['total_estudiantes'] ?></td>
                <td class="text-center" style="color:#3dffa0;font-weight:700;"><?= $r['completados'] ?></td>
                <td class="text-center">
                  <?php if ($r['prom_nota']): ?>
                    <span style="font-size:15px;font-weight:800;color:<?= $r['prom_nota']>=70?'#3dffa0':'#ff9d93' ?>;">
                      <?= number_format($r['prom_nota'],2) ?>
                    </span>
                    <span style="font-size:10px;color:#6b7280;">/100</span>
                  <?php else: ?>
                    <span class="nota-nd">—</span>
                  <?php endif; ?>
                </td>
                <td class="text-center"><span class="nota-badge nota-ap"><?= $r['aprobados'] ?></span></td>
                <td class="text-center"><span class="nota-badge nota-rep"><?= $r['reprobados'] ?></span></td>
                <td class="text-center" style="color:#6b7280;font-size:11px;"><?= $sinNota ?></td>
                <td style="min-width:120px;">
                  <div style="display:flex;align-items:center;gap:6px;">
                    <div class="prog-bar" style="flex:1;">
                      <div class="prog-fill" style="width:<?= $pct ?>%;background:<?= $colorBar ?>;"></div>
                    </div>
                    <span style="font-size:11px;font-weight:700;color:<?= $colorBar ?>;"><?= $pct ?>%</span>
                  </div>
                </td>
              </tr>
              <?php endforeach; endif; ?>
            </tbody>
          </table>
        </div>

      </div>
    </div><!-- /section-block VINC -->


    <!-- ══════════════════════════════════════════════════════
         SECCIÓN 3 — TITULACIÓN
         Subsecciones: Examen Complexivo | Trab. Investigación
    ══════════════════════════════════════════════════════ -->
    <div class="section-block">
      <div class="section-header tit">
        <span class="sh-icon"><i class="fa fa-graduation-cap"></i></span>
        <div>
          <div>Titulación</div>
          <div class="sh-sub">Examen Complexivo · Trabajo de Investigación</div>
        </div>
        <div class="ms-auto d-flex gap-2">
          <span style="background:rgba(255,255,255,.15);padding:3px 10px;border-radius:20px;font-size:11px;">
            <?= ($kpiComplexivo['total'] ?? 0) + ($kpiInvestigacion['total'] ?? 0) ?> registros totales
          </span>
        </div>
      </div>
      <div class="section-body">

        <!-- ── 3a. EXAMEN COMPLEXIVO ── -->
        <div class="section-block" style="border:1px solid rgba(139,92,246,.3);margin-bottom:20px;">
          <div class="section-header comp" style="border-radius:8px 8px 0 0;">
            <span class="sh-icon"><i class="fa fa-file-pen"></i></span>
            <div>
              <div>Examen Complexivo</div>
              <div class="sh-sub">Modalidad de titulación por examen escrito</div>
            </div>
            <div class="ms-auto">
              <span style="background:rgba(255,255,255,.15);padding:3px 10px;border-radius:20px;font-size:11px;">
                <?= $kpiComplexivo['total'] ?? 0 ?> registros
              </span>
            </div>
          </div>
          <div class="section-body">
            <!-- KPIs Complexivo -->
            <div class="kpi-row cols-4" style="margin-bottom:16px;">
              <div class="kpi-card" style="border-top-color:#8b5cf6;">
                <div class="kpi-val" style="color:#8b5cf6;"><?= $kpiComplexivo['total'] ?? 0 ?></div>
                <div class="kpi-lbl">Total registros</div>
              </div>
              <div class="kpi-card" style="border-top-color:#3dffa0;">
                <div class="kpi-val" style="color:#3dffa0;"><?= $kpiComplexivo['aprobados'] ?? 0 ?></div>
                <div class="kpi-lbl">Aprobados</div>
              </div>
              <div class="kpi-card" style="border-top-color:#f7b93e;">
                <div class="kpi-val" style="color:#f7b93e;"><?= $kpiComplexivo['en_proceso'] ?? 0 ?></div>
                <div class="kpi-lbl">En proceso</div>
              </div>
              <div class="kpi-card" style="border-top-color:#a78bfa;">
                <div class="kpi-val" style="color:#a78bfa;"><?= $kpiComplexivo['prom_nota'] ? number_format($kpiComplexivo['prom_nota'],2) : '—' ?></div>
                <div class="kpi-lbl">Nota prom. aprobados</div>
              </div>
            </div>
            <!-- Tabla por carrera -->
            <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#6b7280;margin-bottom:8px;">
              <i class="fa fa-table me-1"></i>Por carrera
            </div>
            <div style="overflow-x:auto;">
              <table class="table table-borderless mb-0" style="font-size:12px;">
                <thead>
                  <tr>
                    <th>Carrera</th>
                    <th class="text-center">Total</th>
                    <th class="text-center">Aprobados</th>
                    <th class="text-center">En proceso</th>
                    <th class="text-center">Nota prom.</th>
                    <th>Tasa aprobación</th>
                  </tr>
                </thead>
                <tbody>
                  <?php if (empty($complexivoPorCarrera)): ?>
                  <tr><td colspan="6" class="text-center text-muted py-3">Sin datos.</td></tr>
                  <?php else: foreach ($complexivoPorCarrera as $r):
                    $pct = $r['total'] > 0 ? round($r['aprobados']/$r['total']*100) : 0;
                    $colorBar = $pct >= 70 ? '#3dffa0' : ($pct >= 40 ? '#f7b93e' : '#ff9d93');
                  ?>
                  <tr>
                    <td><strong><?= htmlspecialchars($r['carrera']) ?></strong></td>
                    <td class="text-center" style="font-weight:700;"><?= $r['total'] ?></td>
                    <td class="text-center"><span class="nota-badge nota-ap"><?= $r['aprobados'] ?></span></td>
                    <td class="text-center" style="color:#f7b93e;"><?= $r['en_proceso'] ?></td>
                    <td class="text-center">
                      <?php if ($r['prom_nota']): ?>
                        <span style="font-weight:800;color:#a78bfa;"><?= number_format($r['prom_nota'],2) ?></span><span style="font-size:10px;color:#6b7280;"> /100</span>
                      <?php else: ?><span class="nota-nd">—</span><?php endif; ?>
                    </td>
                    <td style="min-width:130px;">
                      <div style="display:flex;align-items:center;gap:6px;">
                        <div class="prog-bar" style="flex:1;"><div class="prog-fill" style="width:<?= $pct ?>%;background:<?= $colorBar ?>;"></div></div>
                        <span style="font-size:11px;font-weight:700;color:<?= $colorBar ?>;"><?= $pct ?>%</span>
                      </div>
                    </td>
                  </tr>
                  <?php endforeach; endif; ?>
                </tbody>
              </table>
            </div>
          </div>
        </div><!-- /complexivo -->


        <!-- ── 3b. TRABAJO DE INVESTIGACIÓN ── -->
        <div class="section-block" style="border:1px solid rgba(236,72,153,.3);margin-bottom:20px;">
          <div class="section-header inv" style="border-radius:8px 8px 0 0;">
            <span class="sh-icon"><i class="fa fa-microscope"></i></span>
            <div>
              <div>Trabajo de Investigación</div>
              <div class="sh-sub">Modalidad de titulación por investigación aplicada</div>
            </div>
            <div class="ms-auto">
              <span style="background:rgba(255,255,255,.15);padding:3px 10px;border-radius:20px;font-size:11px;">
                <?= $kpiInvestigacion['total'] ?? 0 ?> registros
              </span>
            </div>
          </div>
          <div class="section-body">
            <!-- KPIs Investigación -->
            <div class="kpi-row cols-4" style="margin-bottom:16px;">
              <div class="kpi-card" style="border-top-color:#ec4899;">
                <div class="kpi-val" style="color:#ec4899;"><?= $kpiInvestigacion['total'] ?? 0 ?></div>
                <div class="kpi-lbl">Total registros</div>
              </div>
              <div class="kpi-card" style="border-top-color:#3dffa0;">
                <div class="kpi-val" style="color:#3dffa0;"><?= $kpiInvestigacion['aprobados'] ?? 0 ?></div>
                <div class="kpi-lbl">Aprobados</div>
              </div>
              <div class="kpi-card" style="border-top-color:#f7b93e;">
                <div class="kpi-val" style="color:#f7b93e;"><?= $kpiInvestigacion['en_proceso'] ?? 0 ?></div>
                <div class="kpi-lbl">En proceso</div>
              </div>
              <div class="kpi-card" style="border-top-color:#f9a8d4;">
                <div class="kpi-val" style="color:#f9a8d4;"><?= $kpiInvestigacion['prom_nota'] ? number_format($kpiInvestigacion['prom_nota'],2) : '—' ?></div>
                <div class="kpi-lbl">Nota prom. aprobados</div>
              </div>
            </div>
            <!-- Tabla por carrera -->
            <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#6b7280;margin-bottom:8px;">
              <i class="fa fa-table me-1"></i>Por carrera
            </div>
            <div style="overflow-x:auto;">
              <table class="table table-borderless mb-0" style="font-size:12px;">
                <thead>
                  <tr>
                    <th>Carrera</th>
                    <th class="text-center">Total</th>
                    <th class="text-center">Aprobados</th>
                    <th class="text-center">En proceso</th>
                    <th class="text-center">Nota prom.</th>
                    <th>Tasa aprobación</th>
                  </tr>
                </thead>
                <tbody>
                  <?php if (empty($investigacionPorCarrera)): ?>
                  <tr><td colspan="6" class="text-center text-muted py-3">Sin datos.</td></tr>
                  <?php else: foreach ($investigacionPorCarrera as $r):
                    $pct = $r['total'] > 0 ? round($r['aprobados']/$r['total']*100) : 0;
                    $colorBar = $pct >= 70 ? '#3dffa0' : ($pct >= 40 ? '#f7b93e' : '#ff9d93');
                  ?>
                  <tr>
                    <td><strong><?= htmlspecialchars($r['carrera']) ?></strong></td>
                    <td class="text-center" style="font-weight:700;"><?= $r['total'] ?></td>
                    <td class="text-center"><span class="nota-badge nota-ap"><?= $r['aprobados'] ?></span></td>
                    <td class="text-center" style="color:#f7b93e;"><?= $r['en_proceso'] ?></td>
                    <td class="text-center">
                      <?php if ($r['prom_nota']): ?>
                        <span style="font-weight:800;color:#f9a8d4;"><?= number_format($r['prom_nota'],2) ?></span><span style="font-size:10px;color:#6b7280;"> /100</span>
                      <?php else: ?><span class="nota-nd">—</span><?php endif; ?>
                    </td>
                    <td style="min-width:130px;">
                      <div style="display:flex;align-items:center;gap:6px;">
                        <div class="prog-bar" style="flex:1;"><div class="prog-fill" style="width:<?= $pct ?>%;background:<?= $colorBar ?>;"></div></div>
                        <span style="font-size:11px;font-weight:700;color:<?= $colorBar ?>;"><?= $pct ?>%</span>
                      </div>
                    </td>
                  </tr>
                  <?php endforeach; endif; ?>
                </tbody>
              </table>
            </div>
          </div>
        </div><!-- /investigacion -->



      </div>
    </div><!-- /section-block TITULACION -->


    <!-- ── ACCIONES RÁPIDAS ── -->
    <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#6b7280;margin:0 0 10px;display:flex;align-items:center;gap:8px;">
      <i class="fa fa-bolt me-1"></i> Acciones rápidas
      <span style="flex:1;height:1px;background:#30363d;"></span>
    </div>
    <div class="row g-3 mb-2">
      <div class="col-6 col-lg-3">
        <a href="reportes.php?tipo=ces" class="stat-card text-decoration-none" style="flex-direction:column;align-items:flex-start;gap:6px;">
          <div style="font-size:20px;">📊</div>
          <div><div style="font-weight:600;font-size:13px;">Reporte CES</div><div class="stat-label">Horas por carrera</div></div>
        </a>
      </div>
      <div class="col-6 col-lg-3">
        <a href="reportes.php?tipo=caces" class="stat-card text-decoration-none" style="flex-direction:column;align-items:flex-start;gap:6px;">
          <div style="font-size:20px;">🎓</div>
          <div><div style="font-weight:600;font-size:13px;">Indicadores CACES</div><div class="stat-label">Tasas e indicadores</div></div>
        </a>
      </div>
      <div class="col-6 col-lg-3">
        <a href="certificados.php" class="stat-card text-decoration-none" style="flex-direction:column;align-items:flex-start;gap:6px;">
          <div style="font-size:20px;">🏅</div>
          <div><div style="font-weight:600;font-size:13px;">Cert. PPP</div><div class="stat-label"><?= $sinCert ?> pendiente(s)</div></div>
        </a>
      </div>
      <div class="col-6 col-lg-3">
        <a href="cert_vinculacion.php" class="stat-card text-decoration-none" style="flex-direction:column;align-items:flex-start;gap:6px;border-color:<?= $sinCertVinc > 0 ? '#10b981' : 'var(--border)' ?>;">
          <div style="font-size:20px;">🤝</div>
          <div>
            <div style="font-weight:600;font-size:13px;">Cert. Vinculación</div>
            <div class="stat-label"><?= $sinCertVinc > 0 ? "$sinCertVinc pendiente(s)" : 'Todos al día' ?></div>
          </div>
        </a>
      </div>
    </div>

  </main>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
<script>
(function(){
  var dias = ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'];
  function tick() {
    var n  = new Date();
    var hh = String(n.getHours()).padStart(2,'0');
    var mm = String(n.getMinutes()).padStart(2,'0');
    var ss = String(n.getSeconds()).padStart(2,'0');
    var dd = String(n.getDate()).padStart(2,'0');
    var mo = String(n.getMonth()+1).padStart(2,'0');
    var yy = n.getFullYear();
    document.getElementById('sec-hora').textContent  = hh+':'+mm+':'+ss;
    document.getElementById('sec-fecha').textContent = dd+'/'+mo+'/'+yy;
    document.getElementById('sec-dia').textContent   = dias[n.getDay()];
  }
  setInterval(tick, 1000);
  tick();
})();
</script>
</body>
</html>