<?php
// modules/coordinador/dashboard.php
require_once __DIR__ . '/../../config/app.php';
require_once __DIR__ . '/../../includes/auth.php';
require_once __DIR__ . '/../../includes/functions.php';
require_once __DIR__ . '/../../includes/flash.php';
requireRol(ROL_COORDINADOR);

$user   = currentUser();
$db     = getDB();
$pageTitle = 'Dashboard Coordinador';
$idInst = instId();
$iCond = instCond('car'); // alias por defecto

// ── Datos del instituto (logo y nombre) ──────────────────────
$stInstCoord = $db->prepare("SELECT * FROM institutos WHERE id_instituto = :id LIMIT 1");
$stInstCoord->execute([':id' => $idInst ?: 1]);
$instCoord   = $stInstCoord->fetch() ?: [];
$logoCoord   = $instCoord['logo'] ?? '';
$nombreCoord = $instCoord['nombre'] ?? 'SIGVP';
$logoUrlCoord = $logoCoord ? BASE_URL . '/uploads/institutos/' . $logoCoord : '';

// ── id_coordinador ───────────────────────────────────────────
$stCoord = $db->prepare("SELECT id_coordinador FROM coordinadores WHERE id_usuario=:u");
$stCoord->execute([':u' => $user['id']]);
$coord   = $stCoord->fetch();
$idCoord = $coord['id_coordinador'] ?? null;

// ── Contadores prácticas ─────────────────────────────────────
$stPE = $db->prepare("SELECT pr.estado, COUNT(*) as total FROM practicas pr JOIN estudiantes est ON est.id_estudiante=pr.id_estudiante JOIN carreras car ON car.id_carrera=est.id_carrera WHERE 1=1{$iCond} GROUP BY pr.estado");
$stPE->execute(); $porEstado = $stPE->fetchAll();
$estados   = array_column($porEstado, 'total', 'estado');

// ── Contadores otros módulos ──────────────────────────────────
$cntConval = 0;
try { $stCV = $db->prepare("SELECT COUNT(*) FROM convalidaciones cv JOIN estudiantes est ON est.id_estudiante=cv.id_estudiante JOIN carreras car ON car.id_carrera=est.id_carrera WHERE cv.estado='pendiente'{$iCond}");
$stCV->execute(); $cntConval = (int)$stCV->fetchColumn(); } catch(Exception $e){}

$cntVinc = 0;
try {
    $condInstVincD = $idInst ? "AND gv.id_instituto = $idInst" : "";
    $stVinc = $db->prepare("SELECT COUNT(*) FROM grupos_vinculacion gv WHERE gv.estado = 'pendiente' $condInstVincD");
    $stVinc->execute(); $cntVinc = (int)$stVinc->fetchColumn();
} catch(Exception $e){}

$cntTit = 0;
try { $stTit = $db->prepare("SELECT COUNT(*) 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.estado='enviada'{$iCond}");
$stTit->execute(); $cntTit = (int)$stTit->fetchColumn(); } catch(Exception $e){}

// ── Postulaciones PPP pendientes ─────────────────────────────
$postulaciones = $db->query("
    SELECT p.id_practica, p.estado, p.created_at,
           CONCAT(u.apellidos,' ',u.nombres) AS estudiante,
           COALESCE(em.razon_social, p.emp_nueva_nombre) AS empresa,
           pe.nombre  AS periodo,
           c.nombre   AS carrera
    FROM   practicas p
    JOIN   estudiantes est ON est.id_estudiante = p.id_estudiante
    JOIN   usuarios u      ON u.id_usuario      = est.id_usuario
    JOIN   carreras c      ON c.id_carrera      = est.id_carrera
    LEFT JOIN empresas em  ON em.id_empresa     = p.id_empresa
    JOIN   periodos_academicos pe ON pe.id_periodo = p.id_periodo
    WHERE  p.estado = 'postulado'" . instCond('c') . "
    ORDER  BY p.created_at DESC
    LIMIT  10
")->fetchAll();

// ── Convalidaciones pendientes ───────────────────────────────
$convalidaciones = [];
try {
    $convalidaciones = $db->query("
        SELECT cv.id_convalidacion, cv.estado, cv.created_at,
               CONCAT(u.apellidos,' ',u.nombres) AS estudiante,
               cv.asignatura_origen, cv.asignatura_destino,
               c.nombre AS carrera
        FROM   convalidaciones cv
        JOIN   estudiantes est ON est.id_estudiante = cv.id_estudiante
        JOIN   usuarios u      ON u.id_usuario      = est.id_usuario
        JOIN   carreras c      ON c.id_carrera      = est.id_carrera
        WHERE  cv.estado = 'pendiente'" . instCond('c') . "
        ORDER  BY cv.created_at DESC
        LIMIT  10
    ")->fetchAll();
} catch(Exception $e){}

// ── Grupos de vinculación pendientes ──────────────────────────
$vinculacion = [];
try {
    $condInstVinc = $idInst ? "AND gv.id_instituto = $idInst" : '';
    $vinculacion = $db->query("
        SELECT gv.id_grupo AS id_proyecto,
               gv.nombre_proyecto AS titulo,
               gv.estado,
               gv.created_at,
               c.nombre AS carrera,
               CONCAT(ul.apellidos,' ',ul.nombres) AS responsable
        FROM   grupos_vinculacion gv
        JOIN   estudiantes el ON el.id_estudiante = gv.id_lider
        JOIN   usuarios ul    ON ul.id_usuario    = el.id_usuario
        JOIN   carreras c     ON c.id_carrera     = el.id_carrera
        WHERE  gv.estado = 'pendiente' $condInstVinc
        ORDER  BY gv.created_at DESC
        LIMIT  10
    ")->fetchAll();
} catch(Exception $e){}

// ── Titulaciones pendientes ───────────────────────────────────
$titulaciones = [];
try {
    $titulaciones = $db->query("
        SELECT t.id_titulacion, t.estado, t.modalidad, t.created_at,
               CONCAT(u.apellidos,' ',u.nombres) AS estudiante,
               c.nombre AS carrera,
               t.titulo_trabajo
        FROM   titulaciones t
        JOIN   estudiantes est ON est.id_estudiante = t.id_estudiante
        JOIN   usuarios u      ON u.id_usuario      = est.id_usuario
        JOIN   carreras c      ON c.id_carrera      = est.id_carrera
        WHERE  t.estado = 'enviada'" . instCond('c') . "
        ORDER  BY t.created_at DESC
        LIMIT  10
    ")->fetchAll();
} catch(Exception $e){}

// ── Prácticas en progreso recientes ─────────────────────────
$recientes = $db->query("
    SELECT p.id_practica, p.estado, p.horas_cumplidas, p.horas_requeridas,
           CONCAT(u.apellidos,' ',u.nombres) AS estudiante,
           COALESCE(em.razon_social, p.emp_nueva_nombre) AS empresa
    FROM   practicas p
    JOIN   estudiantes est ON est.id_estudiante = p.id_estudiante
    JOIN   usuarios u      ON u.id_usuario      = est.id_usuario
    JOIN   carreras car    ON car.id_carrera     = est.id_carrera
    LEFT JOIN empresas em  ON em.id_empresa     = p.id_empresa
    WHERE  p.estado IN ('en_progreso','aprobado','informe_enviado'){$iCond}
    ORDER  BY p.updated_at DESC
    LIMIT  6
")->fetchAll();

// ── Helper: estrellas mini ────────────────────────────────────
function starMini(int $v): string {
    $s = '';
    for ($i = 1; $i <= 5; $i++)
        $s .= '<span style="color:'.($i<=$v?'#f59e0b':'#d1d5db').';font-size:13px;">★</span>';
    return $s;
}

// ── Últimas evaluaciones ─────────────────────────────────────
$evaluaciones = [];
try {
    $evaluaciones = $db->query("
        SELECT ev.id_practica,
               CONCAT(u.apellidos,' ',u.nombres) AS estudiante,
               em.razon_social AS empresa,
               CONCAT(ut.nombres,' ',ut.apellidos) AS tutor,
               ev.p1_satisfaccion, ev.p2_aprendizaje,
               ev.p3_infraestructura, ev.p4_tutoria, ev.p5_recomendaria,
               ROUND((ev.p1_satisfaccion+ev.p2_aprendizaje+ev.p3_infraestructura+ev.p4_tutoria)/4,1) AS promedio,
               ev.comentarios, ev.created_at
        FROM evaluaciones_satisfaccion ev
        JOIN practicas p     ON p.id_practica    = ev.id_practica
        JOIN estudiantes est ON est.id_estudiante = p.id_estudiante
        JOIN usuarios u      ON u.id_usuario      = est.id_usuario
        LEFT JOIN empresas em ON em.id_empresa    = p.id_empresa
        LEFT JOIN tutores t  ON t.id_tutor        = p.id_tutor
        LEFT JOIN usuarios ut ON ut.id_usuario    = t.id_usuario
        JOIN carreras car ON car.id_carrera = est.id_carrera
        WHERE ev.tipo_evaluador = 'estudiante'" . instCond('car') . "
        ORDER BY ev.created_at DESC LIMIT 5
    ")->fetchAll();
} catch(Exception $e){}

// ── Acción POST: aprobar/rechazar PPP rápido ────────────────
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['id_practica'], $_POST['accion'])) {
    $id = (int)$_POST['id_practica'];
    $accion = $_POST['accion'];
    // Seguridad: verificar que la práctica pertenece al instituto del coordinador
    $instCheckPPP = $idInst ? "AND (SELECT car.id_instituto FROM estudiantes est2 JOIN carreras car ON car.id_carrera=est2.id_carrera WHERE est2.id_estudiante=pr2.id_estudiante) = $idInst" : '';
    if ($accion === 'aprobar' && $id > 0) {
        $db->prepare("UPDATE practicas pr2 SET estado='aprobado', id_coordinador=:cid WHERE id_practica=:id AND estado='postulado' $instCheckPPP")
           ->execute([':cid'=>$idCoord,':id'=>$id]);
        registrarAudit($user['id'], 'aprobar_postulacion_dashboard', 'practicas', $id);
        flashSet('ok', 'Postulación PPP aprobada.');
    } elseif ($accion === 'rechazar' && $id > 0) {
        $db->prepare("UPDATE practicas pr2 SET estado='rechazado' WHERE id_practica=:id AND estado='postulado' $instCheckPPP")
           ->execute([':id'=>$id]);
        registrarAudit($user['id'], 'rechazar_postulacion_dashboard', 'practicas', $id);
        flashSet('err', 'Postulación rechazada.');
    }
    header('Location: dashboard.php'); exit;
}

// Total pendientes de aprobación rápida
$totalPendientes = count($postulaciones) + count($convalidaciones) + count($vinculacion) + count($titulaciones);

// ══════════════════════════════════════════════════════════════
//  BLOQUE CES/CACES — Indicadores críticos
// ══════════════════════════════════════════════════════════════

// ── 0. Período académico activo ───────────────────────────────
$periodoActivo = [];
try {
    $stPer = $db->prepare("
        SELECT id_periodo, nombre, fecha_inicio, fecha_fin
        FROM   periodos_academicos
        WHERE  activo = 1
          AND  (id_instituto = :id OR :id2 IS NULL)
        ORDER  BY fecha_inicio DESC
        LIMIT  1
    ");
    $stPer->execute([':id' => $idInst, ':id2' => $idInst ?: null]);
    $periodoActivo = $stPer->fetch() ?: [];
} catch(Exception $e){}

// Días restantes del período
$diasRestantesPer = null;
if (!empty($periodoActivo['fecha_fin'])) {
    $diasRestantesPer = (int)ceil((strtotime($periodoActivo['fecha_fin']) - time()) / 86400);
}

// ── 1. Estudiantes en riesgo de no completar horas ────────────
// Riesgo: horas_cumplidas < 50% de horas_requeridas Y período activo
$estudiantesRiesgo = [];
try {
    $idPerActivo = $periodoActivo['id_periodo'] ?? null;
    $condPer = $idPerActivo ? "AND p.id_periodo = $idPerActivo" : "";
    $estudiantesRiesgo = $db->query("
        SELECT p.id_practica,
               CONCAT(u.apellidos,' ',u.nombres) AS estudiante,
               c.nombre   AS carrera,
               COALESCE(em.razon_social, p.emp_nueva_nombre) AS empresa,
               p.horas_cumplidas,
               p.horas_requeridas,
               ROUND(p.horas_cumplidas / NULLIF(p.horas_requeridas,0) * 100, 1) AS pct
        FROM   practicas p
        JOIN   estudiantes est ON est.id_estudiante = p.id_estudiante
        JOIN   usuarios u      ON u.id_usuario      = est.id_usuario
        JOIN   carreras c      ON c.id_carrera      = est.id_carrera
        LEFT JOIN empresas em  ON em.id_empresa     = p.id_empresa
        WHERE  p.estado IN ('aprobado','en_progreso')
          AND  p.horas_requeridas > 0
          AND  (p.horas_cumplidas / p.horas_requeridas) < 0.5
          {$condPer}{$iCond}
        ORDER  BY pct ASC
        LIMIT  8
    ")->fetchAll();
} catch(Exception $e){}

$cntRiesgo = count($estudiantesRiesgo);

// ── 2. Convenios próximos a vencer (≤ 60 días) ───────────────
$conveniosVencer = [];
try {
    $instCondConv = $idInst ? "AND c.id_instituto = $idInst" : "";
    $conveniosVencer = $db->query("
        SELECT c.id_convenio,
               c.nombre_convenio,
               c.fecha_fin,
               em.razon_social AS empresa,
               DATEDIFF(c.fecha_fin, CURDATE()) AS dias_restantes
        FROM   convenios c
        LEFT JOIN empresas em ON em.id_empresa = c.id_empresa
        WHERE  c.estado = 'activo'
          AND  c.fecha_fin IS NOT NULL
          AND  DATEDIFF(c.fecha_fin, CURDATE()) BETWEEN 0 AND 60
          {$instCondConv}
        ORDER  BY dias_restantes ASC
        LIMIT  8
    ")->fetchAll();
} catch(Exception $e){}

$cntConveniosVencer  = count($conveniosVencer);
$conveniosVencidos   = array_filter($conveniosVencer, fn($c) => (int)$c['dias_restantes'] <= 0);
$conveniosUrgentes   = array_filter($conveniosVencer, fn($c) => (int)$c['dias_restantes'] > 0 && (int)$c['dias_restantes'] <= 15);
$conveniosProximos   = array_filter($conveniosVencer, fn($c) => (int)$c['dias_restantes'] > 15);

// ── 3. Expedientes digitales: completos vs incompletos ────────
// Lógica real: un expediente está COMPLETO cuando los 11 documentos PPP
// en documentos_ppp_gestion tienen estado = 'aprobado'.
// La vista v_expedientes_ppp ya calcula expediente_completo = 1 en ese caso.
$expTotal      = 0;
$expCompletos  = 0;
$expIncomp     = [];
try {
    $condPerExp  = isset($idPerActivo) && $idPerActivo ? "AND p.id_periodo = $idPerActivo" : "";
    $condInstExp = $idInst ? "AND p.id_instituto = $idInst" : "";

    // Total de prácticas activas (con expediente iniciado o no)
    $expTotal = (int)$db->query("
        SELECT COUNT(DISTINCT p.id_practica)
        FROM   practicas p
        WHERE  p.estado NOT IN ('borrador','rechazado','postulado')
               $condPerExp $condInstExp
    ")->fetchColumn();

    // Completos: los 11 documentos PPP en estado 'aprobado'
    $expCompletos = (int)$db->query("
        SELECT COUNT(DISTINCT p.id_practica)
        FROM   practicas p
        WHERE  p.estado NOT IN ('borrador','rechazado','postulado')
               $condPerExp $condInstExp
          AND  (
              SELECT SUM(dpg.estado = 'aprobado')
              FROM   documentos_ppp_gestion dpg
              WHERE  dpg.id_practica = p.id_practica
          ) = 11
    ")->fetchColumn();
} catch(Exception $e){ $expTotal = 0; $expCompletos = 0; }

$expIncompletos  = max(0, $expTotal - $expCompletos);
$pctExpCompletos = $expTotal > 0 ? round($expCompletos / $expTotal * 100) : 0;

// Detalle de expedientes incompletos (primeros 6) con conteo real de docs aprobados
try {
    $condPerExpD  = isset($idPerActivo) && $idPerActivo ? "AND p.id_periodo = $idPerActivo" : "";
    $condInstExpD = $idInst ? "AND p.id_instituto = $idInst" : "";
    $expIncomp = $db->query("
        SELECT p.id_practica,
               CONCAT(u.apellidos,' ',u.nombres)             AS estudiante,
               c.nombre                                       AS carrera,
               COALESCE(em.razon_social, p.emp_nueva_nombre) AS empresa,
               COALESCE(
                   (SELECT SUM(dpg.estado = 'aprobado')
                    FROM   documentos_ppp_gestion dpg
                    WHERE  dpg.id_practica = p.id_practica), 0
               ) AS docs_aprobados,
               COALESCE(
                   (SELECT COUNT(*)
                    FROM   documentos_ppp_gestion dpg
                    WHERE  dpg.id_practica = p.id_practica), 0
               ) AS docs_total
        FROM   practicas p
        JOIN   estudiantes est ON est.id_estudiante = p.id_estudiante
        JOIN   usuarios u      ON u.id_usuario      = est.id_usuario
        JOIN   carreras c      ON c.id_carrera      = est.id_carrera
        LEFT JOIN empresas em  ON em.id_empresa     = p.id_empresa
        WHERE  p.estado NOT IN ('borrador','rechazado','postulado')
               $condPerExpD $condInstExpD
          AND  COALESCE(
                   (SELECT SUM(dpg2.estado = 'aprobado')
                    FROM   documentos_ppp_gestion dpg2
                    WHERE  dpg2.id_practica = p.id_practica), 0
               ) < 11
        ORDER  BY p.updated_at DESC
        LIMIT  6
    ")->fetchAll();
} catch(Exception $e){ $expIncomp = []; }
?>
<?php $paginaActual = 'dashboard'; ?>
<!DOCTYPE html>
<html lang="es">
<head><?php include __DIR__ . '/../../includes/head.php'; ?>
<link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/sidebar.css">
<link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/sidebar-coordinador.css">
<style>
/* ═══════════════════════════════════════════════════
   Dashboard Coordinador — Tema Claro Profesional
   ═══════════════════════════════════════════════════ */
:root {
  --bg-page:   #f0f4f8;
  --bg-card:   #ffffff;
  --bg-inner:  #f8fafc;
  --border:    #e2e8f0;
  --border-med:#cbd5e1;
  --text-main: #1e293b;
  --text-sub:  #64748b;
  --text-light:#94a3b8;
  --blue:      #3b82f6;
  --green:     #10b981;
  --yellow:    #f59e0b;
  --red:       #ef4444;
  --purple:    #8b5cf6;
  --orange:    #f97316;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.07);
  --radius:    12px;
  --radius-sm: 8px;
}

html,body { height:100%; margin:0; padding:0; overflow-x:hidden; }
.main-area { background:var(--bg-page); min-height:100vh; padding:24px 28px 36px; }

.page-header h4 { color:var(--text-main); font-weight:700; font-size:20px; letter-spacing:-.3px; margin:0; }
.page-header p  { color:var(--text-light); font-size:12px; margin:2px 0 0; }

/* ── STAT CARDS ── */
.stat-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s,border-color .2s;
  text-decoration:none;
}
.stat-card:hover { box-shadow:var(--shadow-md); border-color:var(--border-med); }
.stat-num   { font-size:28px; font-weight:800; line-height:1; letter-spacing:-.5px; }
.stat-label { font-size:11px; color:var(--text-sub); margin-top:3px; font-weight:500; }
.stat-icon  { font-size:26px; opacity:.7; }

/* ── MÓDULOS PENDIENTES — tabs ── */
.aprobacion-wrap {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  margin-bottom:24px;
}
.aprobacion-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px 0;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
  gap:8px;
}
.aprobacion-title {
  font-size:14px;
  font-weight:700;
  color:var(--text-main);
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:12px;
}
.aprobacion-title .total-badge {
  background:var(--red);
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:2px 8px;
  border-radius:20px;
}

/* Tabs de módulo */
.mod-tabs {
  display:flex;
  gap:4px;
  padding-bottom:0;
  flex-wrap:wrap;
}
.mod-tab {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  font-size:12px;
  font-weight:600;
  color:var(--text-sub);
  background:transparent;
  border:none;
  border-bottom:3px solid transparent;
  cursor:pointer;
  transition:color .15s,border-color .15s;
  white-space:nowrap;
  position:relative;
  top:1px;
}
.mod-tab:hover  { color:var(--text-main); }
.mod-tab.active { color:var(--blue); border-bottom-color:var(--blue); }
.mod-tab.active.tab-ppp    { color:var(--blue);   border-bottom-color:var(--blue); }
.mod-tab.active.tab-conval { color:var(--purple); border-bottom-color:var(--purple); }
.mod-tab.active.tab-vinc   { color:var(--green);  border-bottom-color:var(--green); }
.mod-tab.active.tab-tit    { color:var(--orange); border-bottom-color:var(--orange); }
.tab-cnt {
  font-size:10px;
  font-weight:700;
  padding:1px 6px;
  border-radius:10px;
  color:#fff;
}
.tab-cnt-ppp    { background:var(--blue); }
.tab-cnt-conval { background:var(--purple); }
.tab-cnt-vinc   { background:var(--green); }
.tab-cnt-tit    { background:var(--orange); }

/* Paneles de módulo */
.mod-panel { display:none; padding:0; }
.mod-panel.active { display:block; }

/* Tabla rápida */
.q-table { width:100%; border-collapse:collapse; font-size:13px; }
.q-table th {
  font-size:10px;
  font-weight:700;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:var(--text-light);
  padding:10px 16px 8px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.q-table td {
  padding:11px 16px;
  border-bottom:1px solid #f1f5f9;
  vertical-align:middle;
  color:var(--text-main);
}
.q-table tr:last-child td { border-bottom:none; }
.q-table tr:hover td { background:#fafbff; }

.td-nombre  { font-weight:700; color:var(--text-main); }
.td-sub     { font-size:11px; color:var(--text-light); margin-top:2px; }
.td-muted   { color:var(--text-sub); font-size:12px; }
.td-mono    { font-family:monospace; font-size:11px; color:var(--blue); }

/* Acciones rápidas botones */
.btn-ok {
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 12px; font-size:11px; font-weight:700;
  background:rgba(16,185,129,.1); color:#047857;
  border:1px solid rgba(16,185,129,.3); border-radius:6px;
  cursor:pointer; transition:background .15s;
  white-space:nowrap;
}
.btn-ok:hover { background:rgba(16,185,129,.2); }
.btn-no {
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 12px; font-size:11px; font-weight:700;
  background:rgba(239,68,68,.08); color:#b91c1c;
  border:1px solid rgba(239,68,68,.25); border-radius:6px;
  cursor:pointer; transition:background .15s;
  white-space:nowrap;
}
.btn-no:hover { background:rgba(239,68,68,.18); }
.btn-detail {
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 12px; font-size:11px; font-weight:600;
  background:var(--bg-inner); color:var(--text-sub);
  border:1px solid var(--border-med); border-radius:6px;
  text-decoration:none; white-space:nowrap;
}
.btn-detail:hover { background:var(--border); color:var(--text-main); }

/* Estado vacío en panel */
.panel-empty {
  padding:36px;
  text-align:center;
  color:var(--text-light);
  font-size:13px;
}
.panel-empty-icon { font-size:32px; margin-bottom:8px; }

/* Alerta banner pendientes */
.banner-pendientes {
  background:rgba(239,68,68,.06);
  border:1px solid rgba(239,68,68,.2);
  border-radius:var(--radius);
  padding:12px 18px;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:#b91c1c;
}
.banner-pendientes a { color:#b91c1c; font-weight:700; text-decoration:underline; }
.banner-pendientes.ok {
  background:rgba(16,185,129,.06);
  border-color:rgba(16,185,129,.2);
  color:#047857;
}

/* Tabla progreso recientes */
.tbl-wrap {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.tbl-wrap .table th {
  font-size:10px; font-weight:700; letter-spacing:.7px;
  text-transform:uppercase; color:var(--text-light);
  background:var(--bg-inner); border-bottom:1px solid var(--border);
  padding:10px 16px 8px;
}
.tbl-wrap .table td {
  padding:11px 16px; vertical-align:middle;
  border-bottom:1px solid #f1f5f9; color:var(--text-main);
  font-size:13px;
}
.tbl-wrap .table tr:last-child td { border-bottom:none; }

/* Sección label */
.sec-label {
  font-size:11px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--text-light);
  margin-bottom:10px;
}

/* Evaluaciones */
.eval-col-prom { font-size:15px; font-weight:700; }

/* Accesos rápidos */
.quick-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  box-shadow:var(--shadow-sm);
  text-decoration:none;
  transition:box-shadow .2s,border-color .2s,transform .15s;
}
.quick-card:hover { box-shadow:var(--shadow-md); border-color:var(--border-med); transform:translateY(-1px); }
.quick-card-icon  { font-size:22px; }
.quick-card-label { font-weight:600; font-size:13px; color:var(--text-main); }
.quick-card-sub   { font-size:11px; color:var(--text-sub); margin-top:1px; }

/* Badge estados */
.badge-estado {
  display:inline-block; font-size:10px; font-weight:700;
  padding:3px 10px; border-radius:20px;
  text-transform:uppercase; letter-spacing:.4px; border:1px solid;
}
.st-postulado    { background:rgba(245,158,11,.1); color:#b45309; border-color:rgba(245,158,11,.3); }
.st-aprobado     { background:rgba(16,185,129,.1); color:#047857; border-color:rgba(16,185,129,.3); }
.st-en_progreso  { background:rgba(59,130,246,.1); color:#1d4ed8; border-color:rgba(59,130,246,.3); }
.st-completado   { background:rgba(16,185,129,.1); color:#047857; border-color:rgba(16,185,129,.3); }
.st-informe_enviado { background:rgba(139,92,246,.1); color:#5b21b6; border-color:rgba(139,92,246,.3); }
.st-pendiente    { background:rgba(245,158,11,.1); color:#b45309; border-color:rgba(245,158,11,.3); }
.st-enviada      { background:rgba(59,130,246,.1); color:#1d4ed8; border-color:rgba(59,130,246,.3); }
.st-planificacion{ background:rgba(139,92,246,.1); color:#5b21b6; border-color:rgba(139,92,246,.3); }

/* Barra de progreso */
.prog-track { background:#e9eef5; border-radius:3px; }
.prog-fill  { border-radius:3px; height:5px; }

/* ══ WIDGETS CES/CACES ══════════════════════════════════════ */

/* Franja período activo */
.periodo-banner {
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 100%);
  border-radius:var(--radius);padding:13px 20px;margin-bottom:20px;
  box-shadow:var(--shadow-sm);flex-wrap:wrap;gap:10px;
}
.periodo-banner .pb-label {
  font-size:10px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:#94a3b8;
}
.periodo-banner .pb-nombre {
  font-size:15px;font-weight:800;color:#f1f5f9;margin-top:2px;
}
.periodo-banner .pb-fechas {
  font-size:11px;color:#64748b;margin-top:2px;
}
.periodo-banner .pb-dias {
  text-align:center;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:8px 18px;
}
.periodo-banner .pb-dias .num {
  font-size:22px;font-weight:900;line-height:1;
}
.periodo-banner .pb-dias .txt {
  font-size:10px;color:#94a3b8;margin-top:2px;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;
}

/* Grid 3 col CES */
.ces-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:24px;
}
@media(max-width:900px){ .ces-grid{ grid-template-columns:1fr; } }

/* Card CES base */
.ces-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.ces-card-head {
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 10px;border-bottom:1px solid var(--border);
}
.ces-card-title {
  font-size:12px;font-weight:700;color:var(--text-main);
  display:flex;align-items:center;gap:7px;
}
.ces-card-badge {
  font-size:10px;font-weight:700;padding:2px 8px;
  border-radius:20px;color:#fff;
}
.ces-card-body { padding:0;flex:1; }

/* Fila de item CES */
.ces-row {
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px;border-bottom:1px solid #f1f5f9;
  font-size:12px;gap:8px;
}
.ces-row:last-child{ border-bottom:none; }
.ces-row:hover{ background:#fafbff; }
.ces-row-name { font-weight:600;color:var(--text-main);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ces-row-sub  { font-size:10px;color:var(--text-light);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

/* Gauge donut simple (CSS) */
.gauge-wrap {
  display:flex;align-items:center;justify-content:center;
  padding:18px 14px 10px;gap:20px;
}
.gauge-circle {
  position:relative;width:80px;height:80px;flex-shrink:0;
}
.gauge-circle svg { transform:rotate(-90deg); }
.gauge-circle .gc-track { fill:none;stroke:#e9eef5;stroke-width:8; }
.gauge-circle .gc-fill  { fill:none;stroke-width:8;stroke-linecap:round;
  transition:stroke-dashoffset .6s ease; }
.gauge-pct {
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  font-size:17px;font-weight:900;line-height:1;
}
.gauge-pct small { font-size:9px;color:var(--text-light);font-weight:600; }
.gauge-stats { display:flex;flex-direction:column;gap:4px; }
.gauge-stat-row { display:flex;align-items:center;gap:6px;font-size:11px; }
.gauge-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }

/* Chips urgencia convenios */
.conv-chip {
  display:inline-block;font-size:9px;font-weight:700;
  padding:2px 7px;border-radius:20px;border:1px solid;
  white-space:nowrap;
}
.conv-vencido  { background:rgba(239,68,68,.1); color:#b91c1c; border-color:rgba(239,68,68,.3); }
.conv-urgente  { background:rgba(245,158,11,.1); color:#92400e; border-color:rgba(245,158,11,.3); }
.conv-proximo  { background:rgba(59,130,246,.1); color:#1d4ed8; border-color:rgba(59,130,246,.3); }

/* Chip faltante expediente */
.exp-chip {
  display:inline-flex;align-items:center;gap:3px;
  font-size:9px;font-weight:700;padding:2px 7px;
  border-radius:4px;border:1px solid;white-space:nowrap;
  margin:1px;
}
.exp-miss { background:rgba(239,68,68,.08);color:#b91c1c;border-color:rgba(239,68,68,.2); }
.exp-ok   { background:rgba(16,185,129,.08);color:#047857;border-color:rgba(16,185,129,.2); }

/* Empty state CES */
.ces-empty {
  padding:24px;text-align:center;
  font-size:12px;color:var(--text-light);
}
.ces-empty-icon { font-size:26px;margin-bottom:6px; }

/* Barra riesgo */
.risk-bar { background:#fef2f2;border-radius:3px;height:5px;overflow:hidden; }
.risk-fill { height:5px;border-radius:3px;background:#ef4444; }
</style>
</head>
<body>
<?php include __DIR__ . '/../../includes/navbar.php'; ?>
<div class="app-shell">
  <?php include __DIR__ . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . 'includes' . DIRECTORY_SEPARATOR . 'sidebar-coordinador.php'; ?>

  <main class="main-area">
    <?= flashHtml() ?>

    <!-- ── ENCABEZADO CON LOGO, INSTITUTO Y FECHA ── -->
    <div style="display:flex;align-items:center;justify-content:space-between;
                background:var(--bg-card);border:1px solid var(--border);
                border-radius:var(--radius);padding:16px 24px;margin-bottom:24px;
                box-shadow:var(--shadow-sm);">

      <!-- LOGO -->
      <div style="flex-shrink:0;">
        <?php if (!empty($logoUrlCoord)): ?>
          <img src="<?= htmlspecialchars($logoUrlCoord) ?>"
               alt="Logo <?= htmlspecialchars($nombreCoord) ?>"
               style="height:72px;width:72px;object-fit:contain;border-radius:10px;
                      border:1px solid var(--border);padding:4px;background:var(--bg-inner);">
        <?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:var(--text-light);margin-bottom:4px;">
          Panel Coordinador
        </div>
        <div style="font-size:19px;font-weight:900;color:var(--text-main);line-height:1.2;">
          <?= htmlspecialchars($nombreCoord) ?>
        </div>
        <div style="font-size:12px;color:var(--text-sub);margin-top:4px;">
          <?= htmlspecialchars($user['nombre'] ?? '') ?>
        </div>
      </div>

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

    </div>

    <!-- ── STAT CARDS ── -->
    <div class="row g-3 mb-4">
      <div class="col-6 col-lg-3">
        <div class="stat-card">
          <div>
            <div class="stat-num" style="color:var(--blue);"><?= $estados['postulado'] ?? 0 ?></div>
            <div class="stat-label">Postulaciones nuevas</div>
          </div>
          <div class="stat-icon">📥</div>
        </div>
      </div>
      <div class="col-6 col-lg-3">
        <div class="stat-card">
          <div>
            <div class="stat-num" style="color:var(--yellow);"><?= ($estados['aprobado']??0)+($estados['en_progreso']??0) ?></div>
            <div class="stat-label">En curso</div>
          </div>
          <div class="stat-icon">⚡</div>
        </div>
      </div>
      <div class="col-6 col-lg-3">
        <div class="stat-card">
          <div>
            <div class="stat-num" style="color:var(--purple);"><?= $estados['informe_enviado'] ?? 0 ?></div>
            <div class="stat-label">Informes por revisar</div>
          </div>
          <div class="stat-icon">📄</div>
        </div>
      </div>
      <div class="col-6 col-lg-3">
        <div class="stat-card">
          <div>
            <div class="stat-num" style="color:var(--green);"><?= $estados['completado'] ?? 0 ?></div>
            <div class="stat-label">Completadas</div>
          </div>
          <div class="stat-icon">✅</div>
        </div>
      </div>
    </div>

    <!-- ── BANNER pendientes ── -->
    <?php if ($totalPendientes > 0): ?>
    <div class="banner-pendientes mb-3">
      <i class="fa fa-triangle-exclamation"></i>
      Tienes <strong><?= $totalPendientes ?></strong> solicitud(es) pendiente(s) de revisión en los módulos de abajo.
    </div>
    <?php else: ?>
    <div class="banner-pendientes ok mb-3">
      <i class="fa fa-circle-check"></i>
      ¡Todo al día! No hay solicitudes pendientes en ningún módulo.
    </div>
    <?php endif; ?>

    <!-- ══════════════════════════════════════════════════════════
         BLOQUE CES/CACES — Indicadores críticos
    ══════════════════════════════════════════════════════════ -->

    <!-- ── 0. Período académico activo ── -->
    <?php if (!empty($periodoActivo)): ?>
    <div class="periodo-banner">
      <div>
        <div class="pb-label"><i class="fa fa-calendar-check me-1"></i>Período académico activo</div>
        <div class="pb-nombre"><?= htmlspecialchars($periodoActivo['nombre']) ?></div>
        <div class="pb-fechas">
          <?= date('d/m/Y', strtotime($periodoActivo['fecha_inicio'])) ?>
          &nbsp;→&nbsp;
          <?= date('d/m/Y', strtotime($periodoActivo['fecha_fin'])) ?>
        </div>
      </div>
      <div class="pb-dias">
        <?php
          $dc  = $diasRestantesPer;
          $col = $dc === null ? '#94a3b8' : ($dc <= 15 ? '#ef4444' : ($dc <= 30 ? '#f59e0b' : '#10b981'));
        ?>
        <div class="num" style="color:<?= $col ?>;">
          <?= $dc === null ? '—' : ($dc <= 0 ? 'Vencido' : $dc) ?>
        </div>
        <div class="txt" style="color:<?= $col ?>;">
          <?= $dc !== null && $dc > 0 ? 'días restantes' : ($dc <= 0 ? '' : '—') ?>
        </div>
      </div>
    </div>
    <?php endif; ?>

    <!-- ── GRID 3 widgets CES ── -->
    <div class="ces-grid">

      <!-- ── Widget 1: Estudiantes en riesgo ── -->
      <div class="ces-card">
        <div class="ces-card-head">
          <div class="ces-card-title">
            <i class="fa fa-triangle-exclamation" style="color:var(--red);"></i>
            Estudiantes en riesgo de horas
          </div>
          <?php if ($cntRiesgo > 0): ?>
            <span class="ces-card-badge" style="background:var(--red);"><?= $cntRiesgo ?></span>
          <?php else: ?>
            <span class="ces-card-badge" style="background:var(--green);">✓ OK</span>
          <?php endif; ?>
        </div>
        <div class="ces-card-body">
          <?php if (empty($estudiantesRiesgo)): ?>
          <div class="ces-empty">
            <div class="ces-empty-icon">🎉</div>
            Todos los estudiantes tienen avance ≥ 50%
          </div>
          <?php else: ?>
            <?php foreach ($estudiantesRiesgo as $er):
              $pct = round((float)$er['pct'], 1);
              $col = $pct < 25 ? 'var(--red)' : 'var(--yellow)';
            ?>
            <div class="ces-row">
              <div style="flex:1;min-width:0;">
                <div class="ces-row-name"><?= htmlspecialchars($er['estudiante']) ?></div>
                <div class="ces-row-sub"><?= htmlspecialchars($er['carrera']) ?> · <?= htmlspecialchars($er['empresa'] ?? '—') ?></div>
                <div style="margin-top:5px;">
                  <div class="risk-bar" style="width:100%;">
                    <div class="risk-fill" style="width:<?= min(100,$pct) ?>%;background:<?= $col ?>;"></div>
                  </div>
                </div>
              </div>
              <div style="text-align:right;flex-shrink:0;margin-left:8px;">
                <div style="font-size:14px;font-weight:800;color:<?= $col ?>;"><?= $pct ?>%</div>
                <div style="font-size:9px;color:var(--text-light);">
                  <?= (int)$er['horas_cumplidas'] ?>/<?= (int)$er['horas_requeridas'] ?>h
                </div>
              </div>
            </div>
            <?php endforeach; ?>
            <div style="padding:8px 14px;border-top:1px solid var(--border);text-align:right;">
              <a href="practicas.php?filtro=riesgo" style="font-size:11px;color:var(--red);font-weight:600;text-decoration:none;">
                Ver todos <i class="fa fa-arrow-right fa-xs ms-1"></i>
              </a>
            </div>
          <?php endif; ?>
        </div>
      </div>

      <!-- ── Widget 2: Convenios próximos a vencer ── -->
      <div class="ces-card">
        <div class="ces-card-head">
          <div class="ces-card-title">
            <i class="fa fa-handshake" style="color:var(--yellow);"></i>
            Convenios por vencer
          </div>
          <?php
            $badgeConvColor = count($conveniosVencidos) > 0 ? 'var(--red)' : (count($conveniosUrgentes) > 0 ? 'var(--yellow)' : 'var(--blue)');
          ?>
          <?php if ($cntConveniosVencer > 0): ?>
            <span class="ces-card-badge" style="background:<?= $badgeConvColor ?>;"><?= $cntConveniosVencer ?></span>
          <?php else: ?>
            <span class="ces-card-badge" style="background:var(--green);">✓ OK</span>
          <?php endif; ?>
        </div>
        <div class="ces-card-body">
          <?php if (empty($conveniosVencer)): ?>
          <div class="ces-empty">
            <div class="ces-empty-icon">✅</div>
            Sin convenios vencidos ni próximos a vencer en 60 días
          </div>
          <?php else: ?>
            <?php foreach ($conveniosVencer as $cv):
              $dr  = (int)$cv['dias_restantes'];
              if ($dr <= 0) {
                $chipClass = 'conv-vencido'; $chipTxt = 'Vencido';
              } elseif ($dr <= 15) {
                $chipClass = 'conv-urgente'; $chipTxt = $dr . 'd';
              } else {
                $chipClass = 'conv-proximo'; $chipTxt = $dr . 'd';
              }
            ?>
            <div class="ces-row">
              <div style="flex:1;min-width:0;">
                <div class="ces-row-name"><?= htmlspecialchars($cv['nombre_convenio'] ?: ($cv['empresa'] ?? '—')) ?></div>
                <div class="ces-row-sub"><?= htmlspecialchars($cv['empresa'] ?? '—') ?> · Vence: <?= date('d/m/Y', strtotime($cv['fecha_fin'])) ?></div>
              </div>
              <div style="flex-shrink:0;margin-left:8px;">
                <span class="conv-chip <?= $chipClass ?>"><?= $chipTxt ?></span>
              </div>
            </div>
            <?php endforeach; ?>
            <div style="padding:8px 14px;border-top:1px solid var(--border);text-align:right;">
              <a href="../../modules/admin/convenios.php" style="font-size:11px;color:var(--yellow);font-weight:600;text-decoration:none;">
                Gestionar convenios <i class="fa fa-arrow-right fa-xs ms-1"></i>
              </a>
            </div>
          <?php endif; ?>
        </div>
      </div>

      <!-- ── Widget 3: Expedientes digitales ── -->
      <div class="ces-card">
        <div class="ces-card-head">
          <div class="ces-card-title">
            <i class="fa fa-folder-open" style="color:var(--purple);"></i>
            Expedientes digitales
          </div>
          <?php
            $badgeExpColor = $pctExpCompletos >= 80 ? 'var(--green)' : ($pctExpCompletos >= 50 ? 'var(--yellow)' : 'var(--red)');
          ?>
          <span class="ces-card-badge" style="background:<?= $badgeExpColor ?>;"><?= $pctExpCompletos ?>%</span>
        </div>
        <div class="ces-card-body">
          <!-- Gauge donut -->
          <?php
            $circum = 2 * M_PI * 28; // radio 28
            $offset = $circum - ($pctExpCompletos / 100 * $circum);
            $gaugeColor = $pctExpCompletos >= 80 ? '#10b981' : ($pctExpCompletos >= 50 ? '#f59e0b' : '#ef4444');
          ?>
          <div class="gauge-wrap">
            <div class="gauge-circle">
              <svg width="80" height="80" viewBox="0 0 80 80">
                <circle class="gc-track" cx="40" cy="40" r="28"/>
                <circle class="gc-fill"  cx="40" cy="40" r="28"
                        stroke="<?= $gaugeColor ?>"
                        stroke-dasharray="<?= round($circum,2) ?>"
                        stroke-dashoffset="<?= round($offset,2) ?>"/>
              </svg>
              <div class="gauge-pct" style="color:<?= $gaugeColor ?>;">
                <?= $pctExpCompletos ?><small>%</small>
              </div>
            </div>
            <div class="gauge-stats">
              <div class="gauge-stat-row">
                <div class="gauge-dot" style="background:var(--green);"></div>
                <span style="color:var(--text-sub);">Completos: <strong style="color:var(--text-main);"><?= $expCompletos ?></strong></span>
              </div>
              <div class="gauge-stat-row">
                <div class="gauge-dot" style="background:var(--red);"></div>
                <span style="color:var(--text-sub);">Incompletos: <strong style="color:var(--red);"><?= $expIncompletos ?></strong></span>
              </div>
              <div class="gauge-stat-row">
                <div class="gauge-dot" style="background:var(--border-med);"></div>
                <span style="color:var(--text-sub);">Total: <strong style="color:var(--text-main);"><?= $expTotal ?></strong></span>
              </div>
            </div>
          </div>
          <!-- Detalle incompletos -->
          <?php if (!empty($expIncomp)): ?>
          <div style="border-top:1px solid var(--border);padding:6px 0;">
            <?php foreach ($expIncomp as $ei): ?>
            <div class="ces-row">
              <div style="flex:1;min-width:0;">
                <div class="ces-row-name"><?= htmlspecialchars($ei['estudiante']) ?></div>
                <div class="ces-row-sub"><?= htmlspecialchars($ei['carrera']) ?></div>
              </div>
              <div style="flex-shrink:0;text-align:right;">
                <?php
                  $docsApr = (int)$ei['docs_aprobados'];
                  $docsTot = (int)$ei['docs_total'];
                  $colorDoc = $docsApr === 0 ? 'var(--red)' : 'var(--yellow)';
                ?>
                <span class="exp-chip exp-miss" style="background:rgba(239,68,68,.08);color:<?=$colorDoc?>;">
                  <i class="fa fa-file-circle-check"></i> <?= $docsApr ?>/11 aprobados
                </span>
                <?php if ($docsTot === 0): ?>
                  <span class="exp-chip exp-miss" style="margin-top:3px;">
                    <i class="fa fa-file-xmark"></i> Sin docs subidos
                  </span>
                <?php endif; ?>
              </div>
            </div>
            <?php endforeach; ?>
          </div>
          <div style="padding:8px 14px;border-top:1px solid var(--border);text-align:right;">
            <a href="expedientes.php" style="font-size:11px;color:var(--purple);font-weight:600;text-decoration:none;">
              Ver expedientes <i class="fa fa-arrow-right fa-xs ms-1"></i>
            </a>
          </div>
          <?php elseif($expTotal === 0): ?>
          <div class="ces-empty">
            <div class="ces-empty-icon">📁</div>
            Sin prácticas activas en este período
          </div>
          <?php else: ?>
          <div class="ces-empty" style="padding:16px;">
            <i class="fa fa-circle-check" style="color:var(--green);font-size:20px;"></i>
            <div style="margin-top:6px;color:var(--green);font-weight:600;">¡Todos los expedientes completos!</div>
          </div>
          <?php endif; ?>
        </div>
      </div>

    </div><!-- fin ces-grid -->

    <!-- ══════════════════════════════════════════════════════════
         APROBACIONES RÁPIDAS — 4 MÓDULOS EN TABS
    ══════════════════════════════════════════════════════════ -->
    <div class="aprobacion-wrap">
      <div class="aprobacion-header">
        <div class="aprobacion-title">
          <i class="fa fa-bolt" style="color:var(--yellow);"></i>
          Aprobaciones rápidas
          <?php if ($totalPendientes): ?>
            <span class="total-badge"><?= $totalPendientes ?> pendiente<?= $totalPendientes>1?'s':'' ?></span>
          <?php endif; ?>
        </div>
        <div class="mod-tabs">
          <!-- Tab PPP -->
          <button class="mod-tab tab-ppp active" onclick="switchTab('ppp',this)">
            <i class="fa fa-briefcase"></i> Prácticas PPP
            <?php if (count($postulaciones)): ?>
              <span class="tab-cnt tab-cnt-ppp"><?= count($postulaciones) ?></span>
            <?php endif; ?>
          </button>
          <!-- Tab Convalidaciones -->
          <button class="mod-tab tab-conval" onclick="switchTab('conval',this)">
            <i class="fa fa-rotate"></i> Convalidaciones
            <?php if ($cntConval): ?>
              <span class="tab-cnt tab-cnt-conval"><?= $cntConval ?></span>
            <?php endif; ?>
          </button>
          <!-- Tab Vinculación -->
          <button class="mod-tab tab-vinc" onclick="switchTab('vinc',this)">
            <i class="fa fa-handshake"></i> Vinculación
            <?php if ($cntVinc): ?>
              <span class="tab-cnt tab-cnt-vinc"><?= $cntVinc ?></span>
            <?php endif; ?>
          </button>
          <!-- Tab Titulación -->
          <button class="mod-tab tab-tit" onclick="switchTab('tit',this)">
            <i class="fa fa-graduation-cap"></i> Titulación
            <?php if ($cntTit): ?>
              <span class="tab-cnt tab-cnt-tit"><?= $cntTit ?></span>
            <?php endif; ?>
          </button>
        </div>
      </div>

      <!-- ── Panel PPP ── -->
      <div class="mod-panel active" id="panel-ppp">
        <?php if (empty($postulaciones)): ?>
        <div class="panel-empty">
          <div class="panel-empty-icon">🎉</div>
          Sin postulaciones PPP pendientes. ¡Todo al día!
        </div>
        <?php else: ?>
        <table class="q-table">
          <thead>
            <tr>
              <th>Estudiante</th>
              <th>Carrera</th>
              <th>Empresa</th>
              <th>Período</th>
              <th>Fecha</th>
              <th style="text-align:right;">Acciones</th>
            </tr>
          </thead>
          <tbody>
            <?php foreach ($postulaciones as $p): ?>
            <tr>
              <td>
                <div class="td-nombre"><?= htmlspecialchars($p['estudiante']) ?></div>
              </td>
              <td><span class="td-muted"><?= htmlspecialchars($p['carrera']) ?></span></td>
              <td><?= htmlspecialchars($p['empresa']) ?></td>
              <td><span class="td-muted"><?= htmlspecialchars($p['periodo']) ?></span></td>
              <td><span class="td-muted"><?= date('d/m/Y', strtotime($p['created_at'])) ?></span></td>
              <td style="text-align:right;">
                <div style="display:flex;gap:5px;justify-content:flex-end;flex-wrap:wrap;">
                  <form method="POST" style="margin:0;">
                    <input type="hidden" name="id_practica" value="<?= $p['id_practica'] ?>">
                    <button type="submit" name="accion" value="aprobar" class="btn-ok"
                            onclick="return confirm('¿Aprobar práctica de <?= htmlspecialchars(addslashes($p['estudiante'])) ?>?')">
                      <i class="fa fa-check"></i> Aprobar
                    </button>
                  </form>
                  <form method="POST" style="margin:0;">
                    <input type="hidden" name="id_practica" value="<?= $p['id_practica'] ?>">
                    <button type="submit" name="accion" value="rechazar" class="btn-no"
                            onclick="return confirm('¿Rechazar esta postulación?')">
                      <i class="fa fa-xmark"></i> Rechazar
                    </button>
                  </form>
                  <a href="postulaciones.php?estado=postulado" class="btn-detail">
                    <i class="fa fa-eye"></i> Detalle
                  </a>
                </div>
              </td>
            </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
        <div style="padding:10px 16px;border-top:1px solid var(--border);text-align:right;">
          <a href="postulaciones.php" style="font-size:12px;color:var(--blue);text-decoration:none;font-weight:600;">
            Ver todas las postulaciones PPP <i class="fa fa-arrow-right fa-xs ms-1"></i>
          </a>
        </div>
        <?php endif; ?>
      </div>

      <!-- ── Panel Convalidaciones ── -->
      <div class="mod-panel" id="panel-conval">
        <?php if (empty($convalidaciones)): ?>
        <div class="panel-empty">
          <div class="panel-empty-icon">✅</div>
          Sin convalidaciones pendientes.
        </div>
        <?php else: ?>
        <table class="q-table">
          <thead>
            <tr>
              <th>Estudiante</th>
              <th>Carrera</th>
              <th>Asignatura origen</th>
              <th>Asignatura destino</th>
              <th>Fecha</th>
              <th style="text-align:right;">Acciones</th>
            </tr>
          </thead>
          <tbody>
            <?php foreach ($convalidaciones as $cv): ?>
            <tr>
              <td><div class="td-nombre"><?= htmlspecialchars($cv['estudiante']) ?></div></td>
              <td><span class="td-muted"><?= htmlspecialchars($cv['carrera']) ?></span></td>
              <td><?= htmlspecialchars($cv['asignatura_origen'] ?? '—') ?></td>
              <td><?= htmlspecialchars($cv['asignatura_destino'] ?? '—') ?></td>
              <td><span class="td-muted"><?= date('d/m/Y', strtotime($cv['created_at'])) ?></span></td>
              <td style="text-align:right;">
                <a href="convalidaciones.php?id=<?= $cv['id_convalidacion'] ?>" class="btn-detail">
                  <i class="fa fa-arrow-right"></i> Revisar
                </a>
              </td>
            </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
        <div style="padding:10px 16px;border-top:1px solid var(--border);text-align:right;">
          <a href="convalidaciones.php" style="font-size:12px;color:var(--purple);text-decoration:none;font-weight:600;">
            Ver todas las convalidaciones <i class="fa fa-arrow-right fa-xs ms-1"></i>
          </a>
        </div>
        <?php endif; ?>
      </div>

      <!-- ── Panel Vinculación ── -->
      <div class="mod-panel" id="panel-vinc">
        <?php if (empty($vinculacion)): ?>
        <div class="panel-empty">
          <div class="panel-empty-icon">✅</div>
          Sin grupos de vinculación pendientes de revisión.
        </div>
        <?php else: ?>
        <table class="q-table">
          <thead>
            <tr>
              <th>Proyecto</th>
              <th>Carrera</th>
              <th>Líder</th>
              <th>Estado</th>
              <th>Fecha</th>
              <th style="text-align:right;">Acciones</th>
            </tr>
          </thead>
          <tbody>
            <?php foreach ($vinculacion as $vp): ?>
            <tr>
              <td><div class="td-nombre"><?= htmlspecialchars($vp['titulo']) ?></div></td>
              <td><span class="td-muted"><?= htmlspecialchars($vp['carrera'] ?? '—') ?></span></td>
              <td><span class="td-muted"><?= htmlspecialchars($vp['responsable'] ?? '—') ?></span></td>
              <td><span class="badge-estado st-postulado">Pendiente</span></td>
              <td><span class="td-muted"><?= date('d/m/Y', strtotime($vp['created_at'])) ?></span></td>
              <td style="text-align:right;">
                <a href="vinculacion.php?id=<?= $vp['id_proyecto'] ?>" class="btn-detail">
                  <i class="fa fa-arrow-right"></i> Revisar
                </a>
              </td>
            </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
        <div style="padding:10px 16px;border-top:1px solid var(--border);text-align:right;">
          <a href="vinculacion.php" style="font-size:12px;color:var(--green);text-decoration:none;font-weight:600;">
            Ver todos los grupos de vinculación <i class="fa fa-arrow-right fa-xs ms-1"></i>
          </a>
        </div>
        <?php endif; ?>
      </div>

      <!-- ── Panel Titulación ── -->
      <div class="mod-panel" id="panel-tit">
        <?php if (empty($titulaciones)): ?>
        <div class="panel-empty">
          <div class="panel-empty-icon">✅</div>
          Sin titulaciones enviadas para revisión.
        </div>
        <?php else: ?>
        <table class="q-table">
          <thead>
            <tr>
              <th>Estudiante</th>
              <th>Carrera</th>
              <th>Trabajo / Examen</th>
              <th>Modalidad</th>
              <th>Fecha</th>
              <th style="text-align:right;">Acciones</th>
            </tr>
          </thead>
          <tbody>
            <?php foreach ($titulaciones as $tit): ?>
            <tr>
              <td><div class="td-nombre"><?= htmlspecialchars($tit['estudiante']) ?></div></td>
              <td><span class="td-muted"><?= htmlspecialchars($tit['carrera']) ?></span></td>
              <td style="max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                <?= htmlspecialchars($tit['titulo_trabajo'] ?? '—') ?>
              </td>
              <td>
                <?php $ml=['examen_complexivo'=>'Examen','trabajo_investigacion'=>'Investigación','sin_definir'=>'S/D']; ?>
                <span class="badge-estado st-enviada"><?= $ml[$tit['modalidad']] ?? ($tit['modalidad']??'—') ?></span>
              </td>
              <td><span class="td-muted"><?= date('d/m/Y', strtotime($tit['created_at'])) ?></span></td>
              <td style="text-align:right;">
                <a href="titulacion.php?id=<?= $tit['id_titulacion'] ?>" class="btn-detail">
                  <i class="fa fa-arrow-right"></i> Revisar
                </a>
              </td>
            </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
        <div style="padding:10px 16px;border-top:1px solid var(--border);text-align:right;">
          <a href="titulacion.php" style="font-size:12px;color:var(--orange);text-decoration:none;font-weight:600;">
            Ver todas las titulaciones <i class="fa fa-arrow-right fa-xs ms-1"></i>
          </a>
        </div>
        <?php endif; ?>
      </div>

    </div><!-- fin aprobacion-wrap -->

    <!-- ── PRÁCTICAS EN PROGRESO ── -->
    <?php if (!empty($recientes)): ?>
    <div class="sec-label">Prácticas en progreso recientes</div>
    <div class="tbl-wrap mb-4">
      <table class="table table-borderless mb-0">
        <thead>
          <tr><th>Estudiante</th><th>Empresa</th><th>Avance</th><th>Estado</th></tr>
        </thead>
        <tbody>
          <?php foreach ($recientes as $r):
            $pct = $r['horas_requeridas'] > 0 ? min(100,round($r['horas_cumplidas']/$r['horas_requeridas']*100)) : 0;
            $pc  = $pct>=80?'var(--green)':($pct>=40?'var(--yellow)':'var(--red)');
          ?>
          <tr>
            <td><strong><?= htmlspecialchars($r['estudiante']) ?></strong></td>
            <td style="color:var(--text-sub);font-size:12px;"><?= htmlspecialchars($r['empresa']) ?></td>
            <td style="min-width:130px;">
              <div style="display:flex;align-items:center;gap:7px;">
                <div class="prog-track" style="flex:1;height:5px;">
                  <div class="prog-fill" style="width:<?=$pct?>%;background:<?=$pc?>;"></div>
                </div>
                <span style="font-size:11px;color:<?=$pc?>;font-weight:700;"><?=$pct?>%</span>
              </div>
            </td>
            <td><?= badgeEstado($r['estado']) ?></td>
          </tr>
          <?php endforeach; ?>
        </tbody>
      </table>
    </div>
    <?php endif; ?>

    <!-- ── EVALUACIONES ── -->
    <?php if (!empty($evaluaciones)): ?>
    <div class="d-flex justify-content-between align-items-center mb-2 mt-1">
      <div>
        <span style="font-size:14px;font-weight:700;color:var(--text-main);">⭐ Votaciones de estudiantes al tutor</span>
        <span style="font-size:12px;color:var(--text-light);margin-left:8px;">Últimas evaluaciones de satisfacción</span>
      </div>
      <a href="evaluaciones.php" class="btn-detail">Ver todas <i class="fa fa-arrow-right ms-1"></i></a>
    </div>
    <div class="tbl-wrap mb-4">
      <table class="table table-borderless mb-0" style="font-size:13px;">
        <thead>
          <tr>
            <th>Estudiante</th><th>Empresa</th><th>Tutor académico</th>
            <th style="text-align:center;">Satisf.</th><th style="text-align:center;">Aprendiz.</th>
            <th style="text-align:center;">Infraest.</th><th style="text-align:center;">Tutoría</th>
            <th style="text-align:center;">Prom.</th><th style="text-align:center;">¿Recomienda?</th>
          </tr>
        </thead>
        <tbody>
        <?php foreach ($evaluaciones as $ev):
          $prom = (float)$ev['promedio'];
          $cp   = $prom>=4?'var(--green)':($prom>=3?'var(--yellow)':'var(--red)');
        ?>
        <tr>
          <td><strong><?= htmlspecialchars($ev['estudiante']) ?></strong>
            <div style="font-size:11px;color:var(--text-light);"><?= date('d/m/Y',strtotime($ev['created_at'])) ?></div>
          </td>
          <td style="color:var(--text-sub);font-size:12px;"><?= htmlspecialchars($ev['empresa']) ?></td>
          <td style="font-size:12px;color:var(--text-sub);"><?= htmlspecialchars($ev['tutor']??'—') ?></td>
          <td style="text-align:center;"><?= starMini((int)$ev['p1_satisfaccion']) ?></td>
          <td style="text-align:center;"><?= starMini((int)$ev['p2_aprendizaje']) ?></td>
          <td style="text-align:center;"><?= starMini((int)$ev['p3_infraestructura']) ?></td>
          <td style="text-align:center;"><?= starMini((int)$ev['p4_tutoria']) ?></td>
          <td style="text-align:center;">
            <span class="eval-col-prom" style="color:<?=$cp?>;"><?=$prom?></span>
            <span style="font-size:10px;color:var(--text-light);">/5</span>
          </td>
          <td style="text-align:center;">
            <?php if ($ev['p5_recomendaria']): ?>
              <i class="fa fa-thumbs-up" style="color:var(--green);font-size:14px;"></i>
            <?php else: ?>
              <i class="fa fa-thumbs-down" style="color:var(--red);font-size:14px;"></i>
            <?php endif; ?>
          </td>
        </tr>
        <?php if ($ev['comentarios']): ?>
        <tr>
          <td colspan="9" style="padding-top:0;padding-bottom:8px;">
            <div style="background:rgba(59,130,246,.05);border:1px solid rgba(59,130,246,.15);
                        border-radius:6px;padding:6px 10px;font-size:11px;color:var(--text-sub);">
              <i class="fa fa-comment me-1" style="color:var(--blue);"></i><?= htmlspecialchars($ev['comentarios']) ?>
            </div>
          </td>
        </tr>
        <?php endif; ?>
        <?php endforeach; ?>
        </tbody>
      </table>
    </div>
    <?php endif; ?>

    <!-- ── ACCESOS RÁPIDOS ── -->
    <div class="sec-label">Accesos rápidos</div>
    <div class="row g-3">
      <div class="col-6 col-lg-3">
        <a href="practicas.php" class="quick-card">
          <div class="quick-card-icon">📋</div>
          <div><div class="quick-card-label">Prácticas</div><div class="quick-card-sub">Ver todas</div></div>
        </a>
      </div>
      <div class="col-6 col-lg-3">
        <a href="postulaciones.php" class="quick-card">
          <div class="quick-card-icon">📥</div>
          <div><div class="quick-card-label">Postulaciones</div>
            <div class="quick-card-sub"><?= count($postulaciones) ?> pendiente(s)</div></div>
        </a>
      </div>
      <div class="col-6 col-lg-3">
        <a href="convalidaciones.php" class="quick-card">
          <div class="quick-card-icon">⇄</div>
          <div><div class="quick-card-label">Convalidaciones</div>
            <div class="quick-card-sub"><?= $cntConval ?> pendiente(s)</div></div>
        </a>
      </div>
      <div class="col-6 col-lg-3">
        <a href="vinculacion.php" class="quick-card">
          <div class="quick-card-icon">🤝</div>
          <div><div class="quick-card-label">Vinculación</div>
            <div class="quick-card-sub"><?= $cntVinc ?> en planificación</div></div>
        </a>
      </div>
      <div class="col-6 col-lg-3">
        <a href="titulacion.php" class="quick-card">
          <div class="quick-card-icon">🎓</div>
          <div><div class="quick-card-label">Titulación</div>
            <div class="quick-card-sub"><?= $cntTit ?> por revisar</div></div>
        </a>
      </div>
      <div class="col-6 col-lg-3">
        <a href="expedientes.php" class="quick-card">
          <div class="quick-card-icon">📁</div>
          <div><div class="quick-card-label">Expedientes PPP</div><div class="quick-card-sub">Revisar documentos</div></div>
        </a>
      </div>
      <div class="col-6 col-lg-3">
        <a href="bitacoras.php" class="quick-card">
          <div class="quick-card-icon">📓</div>
          <div><div class="quick-card-label">Bitácoras</div><div class="quick-card-sub">Supervisar</div></div>
        </a>
      </div>
      <div class="col-6 col-lg-3">
        <a href="reportes.php" class="quick-card">
          <div class="quick-card-icon">📊</div>
          <div><div class="quick-card-label">Reportes CES</div><div class="quick-card-sub">Generar</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>
var BASE_URL='<?= BASE_URL ?>';

function switchTab(id, btn) {
  // Ocultar todos los paneles
  document.querySelectorAll('.mod-panel').forEach(function(p){ p.classList.remove('active'); });
  // Desactivar todos los tabs
  document.querySelectorAll('.mod-tab').forEach(function(t){ t.classList.remove('active'); });
  // Activar el panel y tab seleccionados
  document.getElementById('panel-' + id).classList.add('active');
  btn.classList.add('active');
}

// Auto-abrir el tab que tenga pendientes al cargar
(function(){
  var orden = ['ppp','conval','vinc','tit'];
  var cnts  = {
    ppp:    <?= count($postulaciones) ?>,
    conval: <?= $cntConval ?>,
    vinc:   <?= $cntVinc ?>,
    tit:    <?= $cntTit ?>
  };
  for (var i=0; i<orden.length; i++) {
    if (cnts[orden[i]] > 0) {
      var tabBtn = document.querySelector('.tab-' + orden[i]);
      if (tabBtn) { switchTab(orden[i], tabBtn); }
      break;
    }
  }
})();

// Reloj en tiempo real
(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('coord-hora').textContent  = hh+':'+mm+':'+ss;
    document.getElementById('coord-fecha').textContent = dd+'/'+mo+'/'+yy;
    document.getElementById('coord-dia').textContent   = dias[n.getDay()];
  }
  setInterval(tick, 1000);
  tick();
})();
</script>
</body>
</html>