<?php
// modules/estudiante/titulacion.php
require_once __DIR__ . '/../../config/app.php';
require_once __DIR__ . '/../../config/onedrive.php';
require_once __DIR__ . '/../../includes/OneDriveStorage.php';
require_once __DIR__ . '/../../includes/auth.php';
require_once __DIR__ . '/../../includes/functions.php';
require_once __DIR__ . '/../../includes/flash.php';
requireRol(ROL_ESTUDIANTE);

$user = currentUser();
$db   = getDB();
$pageTitle = 'Titulación';

// ── Estudiante ──
$stEst = $db->prepare("
    SELECT e.id_estudiante, e.codigo_estudiante, c.nombre AS carrera_nombre
    FROM   estudiantes e
    JOIN   carreras c ON c.id_carrera = e.id_carrera
    WHERE  e.id_usuario = :uid
");
$stEst->execute([':uid' => $user['id']]);
$estudiante = $stEst->fetch();
$idEst  = $estudiante['id_estudiante'] ?? 0;
$idInst = instId();

// ── Configuración de facturación del instituto ──
$stCfgFac = $db->prepare("SELECT clave, valor FROM configuracion_institucional WHERE id_instituto = :id AND clave IN ('email_facturacion','precio_titulacion')");
$stCfgFac->execute([':id' => $idInst]);
$cfgFac       = array_column($stCfgFac->fetchAll(), 'valor', 'clave');
$emailFac     = $cfgFac['email_facturacion'] ?? 'facturacion@tecnopolis.edu.ec';
$precioTit    = number_format((float)($cfgFac['precio_titulacion'] ?? '2.00'), 2);

// ── Solicitud de modalidad ──
$titulacion = null;
if ($idEst) {
    $st = $db->prepare("SELECT * FROM titulaciones WHERE id_estudiante = :e LIMIT 1");
    $st->execute([':e' => $idEst]);
    $titulacion = $st->fetch() ?: null;
}

// ── Trabajo de titulación ──
$trabajo = null;
if ($idEst) {
    $st = $db->prepare("
        SELECT tt.*, CONCAT(u.apellidos,' ',u.nombres) AS director_nombre
        FROM   trabajos_titulacion tt
        LEFT JOIN usuarios u ON u.id_usuario = tt.id_director
        WHERE  tt.id_estudiante = :e LIMIT 1
    ");
    $st->execute([':e' => $idEst]);
    $trabajo = $st->fetch() ?: null;
}

// ── Alertas sidebar ──
$bitObservadas    = 0;
$informeObservado = null;
$practica         = null;
if ($idEst) {
    $st = $db->prepare("SELECT id_practica FROM practicas WHERE id_estudiante=:e ORDER BY created_at DESC LIMIT 1");
    $st->execute([':e' => $idEst]);
    $practica = $st->fetch() ?: null;
}
if ($practica) {
    $st = $db->prepare("SELECT COUNT(*) FROM bitacoras WHERE id_practica=:p AND estado='observada'");
    $st->execute([':p' => $practica['id_practica']]);
    $bitObservadas = (int)$st->fetchColumn();
    $st = $db->prepare("SELECT id_informe FROM informes_finales WHERE id_practica=:p AND estado_tutor='observado' LIMIT 1");
    $st->execute([':p' => $practica['id_practica']]);
    $informeObservado = $st->fetch() ?: null;
}

// ── Validación segura de archivos (3 capas) ──────────────────
// Capa 1: extensión del nombre
// Capa 2: MIME type real con finfo (lee bytes internos del archivo)
// Capa 3: magic bytes — firma hexadecimal al inicio del archivo
// Retorna '' si pasa todo, o mensaje de error si falla alguna capa.
function validarArchivoSeguro(array $file, array $extsOk, array $mimesOk, array $magicOk): string
{
    $ext = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
    if (!in_array($ext, $extsOk))
        return 'Extensión no permitida. Solo se aceptan: ' . strtoupper(implode(', ', $extsOk)) . '.';

    if (function_exists('finfo_open')) {
        $fi   = finfo_open(FILEINFO_MIME_TYPE);
        $mime = $fi ? finfo_file($fi, $file['tmp_name']) : '';
        if ($fi) finfo_close($fi);
        if ($mime && !in_array($mime, $mimesOk))
            return 'El contenido del archivo no corresponde al tipo permitido (MIME inválido).';
    }

    $fh = fopen($file['tmp_name'], 'rb');
    if ($fh === false) return 'No se pudo leer el archivo temporalmente.';
    $cabecera = fread($fh, max(array_column($magicOk, 'len')));
    fclose($fh);

    foreach ($magicOk as $firma)
        if (substr($cabecera, 0, $firma['len']) === $firma['bytes']) return '';

    return 'El archivo no tiene la firma interna correcta. Puede ser un archivo falso con extensión cambiada.';
}

define('MAGIC_TIT', [
    'pdf'  => ['bytes' => '%PDF-',            'len' => 5],
    'jpg'  => ['bytes' => "\xFF\xD8\xFF",     'len' => 3],
    'jpeg' => ['bytes' => "\xFF\xD8\xFF",     'len' => 3],
    'png'  => ['bytes' => "\x89PNG",          'len' => 4],
]);

// ── Helpers ──
function subirComprobante($file, $idEst) {
    $dir = __DIR__ . '/../../assets/uploads/titulacion/';
    if (!is_dir($dir)) mkdir($dir, 0755, true);

    if ($file['error'] !== UPLOAD_ERR_OK)
        return ['ok'=>false,'msg'=>'Error al recibir el archivo.'];
    if ($file['size'] > 5 * 1024 * 1024)
        return ['ok'=>false,'msg'=>'El archivo no puede superar 5 MB.'];

    // Validación 3 capas: extensión + MIME real + magic bytes
    $err = validarArchivoSeguro(
        $file,
        ['pdf','jpg','jpeg','png'],
        ['application/pdf','image/jpeg','image/png'],
        array_values(array_intersect_key(MAGIC_TIT, array_flip(['pdf','jpg','jpeg','png'])))
    );
    if ($err) return ['ok'=>false,'msg'=>$err];

    $ext    = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
    $nombre = 'comp_' . $idEst . '_' . time() . '.' . $ext;
    try { OneDriveStorage::upload($file['tmp_name'], 'comprobantes_titulacion', $nombre, null, $idInst); }
    catch(Exception $e) { return ['ok'=>false,'msg'=>'Error OneDrive: '.$e->getMessage()]; }
    return ['ok'=>true,'archivo'=>$nombre];
}

// ── Calcular horas restantes de las 48h ──
$horasRestantes = null;
$plazoVencido   = false;
if ($titulacion && !empty($titulacion['fecha_habilitacion'])) {
    $limite = strtotime($titulacion['fecha_habilitacion']) + (48 * 3600);
    $diff   = $limite - time();
    if ($diff <= 0) {
        $plazoVencido = true;
    } else {
        $horasRestantes = floor($diff / 3600);
        $minsRestantes  = floor(($diff % 3600) / 60);
    }
}

// ── POST ──
$errors = [];
if ($_SERVER['REQUEST_METHOD'] === 'POST' && $idEst) {
    $accion = $_POST['accion'] ?? '';

    // Guardar modalidad (paso 1)
    if ($accion === 'guardar_modalidad') {
        $modalidad = $_POST['modalidad'] ?? '';
        $tema      = trim($_POST['tema'] ?? '');
        if (!in_array($modalidad, ['examen_complexivo','trabajo_investigacion']))
            $errors[] = 'Selecciona una modalidad válida.';
        if ($modalidad === 'trabajo_investigacion' && empty($tema))
            $errors[] = 'Ingresa el tema de investigación propuesto.';
        if (empty($errors)) {
            if ($titulacion) {
                // Solo actualizar si sigue pendiente
                if (in_array($titulacion['estado'], ['pendiente','rechazado'])) {
                    $db->prepare("UPDATE titulaciones SET modalidad=:m,tema=:t,updated_at=NOW() WHERE id_titulacion=:id")
                       ->execute([':m'=>$modalidad,':t'=>$tema,':id'=>$titulacion['id_titulacion']]);
                }
            } else {
                $db->prepare("INSERT INTO titulaciones (id_estudiante,modalidad,tema,estado,fecha_habilitacion,created_at,updated_at) VALUES(:e,:m,:t,'pendiente',NOW(),NOW(),NOW())")
                   ->execute([':e'=>$idEst,':m'=>$modalidad,':t'=>$tema]);
            }
            flashSet('ok','Modalidad guardada. Ahora sube tu comprobante de pago para enviar la solicitud.');
            header('Location: titulacion.php'); exit;
        }
    }

    // Subir comprobante y enviar solicitud (paso 2)
    if ($accion === 'enviar_solicitud' && $titulacion) {
        if (empty($_FILES['comprobante']['name'])) {
            $errors[] = 'Debes adjuntar el comprobante de pago.';
        } else {
            $res = subirComprobante($_FILES['comprobante'], $idEst);
            if (!$res['ok']) {
                $errors[] = $res['msg'];
            } else {
                $db->prepare("UPDATE titulaciones SET comprobante_pago=:c, estado='enviada', fecha_envio=NOW(), updated_at=NOW() WHERE id_titulacion=:id")
                   ->execute([':c'=>$res['archivo'],':id'=>$titulacion['id_titulacion']]);
                flashSet('ok','¡Solicitud enviada! Facturación validará tu pago y notificará a la Coordinadora.');
                header('Location: titulacion.php'); exit;
            }
        }
    }

    // Entregar etapa
    if ($accion === 'subir_etapa' && $trabajo) {
        $idEtapa = (int)($_POST['id_etapa'] ?? 0);
        $desc    = trim($_POST['descripcion_entrega'] ?? '');
        if ($idEtapa) {
            $db->prepare("UPDATE etapas_titulacion SET estado='entregado',fecha_entrega=NOW(),descripcion=:d WHERE id_etapa=:id AND id_trabajo=:t")
               ->execute([':d'=>$desc,':id'=>$idEtapa,':t'=>$trabajo['id_trabajo']]);
            flashSet('ok','Entregable enviado al director.');
            header('Location: titulacion.php'); exit;
        }
    }

    // Subir PDF del Trabajo de Investigación
    if ($accion === 'subir_pdf_trabajo' && $titulacion && $titulacion['modalidad'] === 'trabajo_investigacion' && $titulacion['estado'] === 'aprobado') {
        if (empty($_FILES['pdf_trabajo']['name'])) {
            $errors[] = 'Debes seleccionar el archivo PDF de tu trabajo.';
        } else {
            $file = $_FILES['pdf_trabajo'];
            if ($file['error'] !== UPLOAD_ERR_OK) {
                $errors[] = 'Error al recibir el archivo.';
            } elseif ($file['size'] > 20 * 1024 * 1024) {
                $errors[] = 'El archivo no puede superar 20 MB.';
            } else {
                // Validación 3 capas: extensión + MIME real + magic bytes
                $err = validarArchivoSeguro(
                    $file,
                    ['pdf'],
                    ['application/pdf'],
                    [MAGIC_TIT['pdf']]
                );
                if ($err) {
                    $errors[] = $err;
                } else {
                    $nombre = 'trabajo_' . $idEst . '_' . time() . '.pdf';
                    try {
                        OneDriveStorage::upload($file['tmp_name'], 'titulacion/trabajos', $nombre, null, $idInst);
                        $db->prepare("UPDATE titulaciones SET pdf_trabajo=:p, estado_trabajo='entregado', fecha_entrega_trabajo=NOW(), updated_at=NOW() WHERE id_titulacion=:id")
                           ->execute([':p' => $nombre, ':id' => $titulacion['id_titulacion']]);
                        flashSet('ok', '✅ Trabajo de Investigación enviado. El tutor asignado lo revisará y calificará.');
                        header('Location: titulacion.php'); exit;
                    } catch(Exception $e) {
                        $errors[] = 'Error al subir a OneDrive: '.$e->getMessage();
                    }
                }
            }
        }
    }

    // Recargar titulacion tras error
    if ($idEst) {
        $st = $db->prepare("SELECT * FROM titulaciones WHERE id_estudiante = :e LIMIT 1");
        $st->execute([':e' => $idEst]);
        $titulacion = $st->fetch() ?: null;
    }
}

$etapas  = [];
$lectores = [];
if ($trabajo) {
    $st = $db->prepare("SELECT * FROM etapas_titulacion WHERE id_trabajo=:t ORDER BY orden ASC");
    $st->execute([':t'=>$trabajo['id_trabajo']]); $etapas = $st->fetchAll();
    $st = $db->prepare("SELECT lt.*,CONCAT(u.apellidos,' ',u.nombres) AS nombre FROM lectores_titulacion lt JOIN usuarios u ON u.id_usuario=lt.id_usuario WHERE lt.id_trabajo=:t");
    $st->execute([':t'=>$trabajo['id_trabajo']]); $lectores = $st->fetchAll();
}

$modActual    = $titulacion['modalidad'] ?? '';
$estadoActual = $titulacion['estado']    ?? '';
$canEdit      = !$titulacion || in_array($estadoActual, ['pendiente','rechazado']);
$canEnviar    = $titulacion && in_array($estadoActual, ['pendiente','rechazado']) && !empty($modActual);

// ── PDF de Preguntas del Examen Complexivo ──
$pdfPreguntas = null;
if ($idEst && $estadoActual === 'aprobado' && $modActual === 'examen_complexivo') {
    $stCarrera = $db->prepare("SELECT id_carrera FROM estudiantes WHERE id_estudiante=:e");
    $stCarrera->execute([':e' => $idEst]);
    $carreraRow = $stCarrera->fetch();
    if ($carreraRow) {
        $stPdf = $db->prepare("SELECT pdf_preguntas, descripcion FROM preguntas_complexivo WHERE id_carrera=:c AND activo=1");
        $stPdf->execute([':c' => $carreraRow['id_carrera']]);
        $pdfPreguntas = $stPdf->fetch() ?: null;
    }
}
?>
<?php $paginaActual = 'titulacion'; ?>
<!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-estudiante.css">
<style>
/* ── Tarjetas modalidad ── */
.mod-card {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.35rem 1.2rem;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, background .18s;
  position: relative;
  height: 100%;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  user-select: none;
}
.mod-card:hover         { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.mod-card.selected      { border-color:#2563eb; background:#eff6ff; box-shadow:0 0 0 3px rgba(37,99,235,.14); }
.mod-card.disabled      { opacity:.55; cursor:not-allowed; pointer-events:none; }
.mod-card input[type=radio]{ position:absolute; opacity:0; width:0; height:0; }
.mod-dot {
  position:absolute; top:12px; right:12px;
  width:20px; height:20px; border-radius:50%;
  border:2px solid #cbd5e1; background:#f8fafc;
  display:flex; align-items:center; justify-content:center;
  transition:all .18s;
}
.mod-card.selected .mod-dot { background:#2563eb; border-color:#2563eb; }
.mod-dot i { display:none; color:#fff; font-size:9px; }
.mod-card.selected .mod-dot i { display:block; }
.mod-icon {
  width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; flex-shrink:0;
}
.mod-icon.azul  { background:rgba(37,99,235,.1);  color:#2563eb; }
.mod-icon.verde { background:rgba(5,150,105,.1);  color:#059669; }
.mod-title { font-size:.92rem; font-weight:700; color:#0f172a; margin:0; }
.mod-desc  { font-size:.79rem; color:#64748b; line-height:1.5; margin:0; flex:1; }
.mod-card.selected .mod-title { color:#1d4ed8; }

/* ── Sección cards ── */
.seccion {
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:1.4rem 1.5rem;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  margin-bottom:0;
  position:relative;
}

/* Divisor entre secciones */
.seccion + .seccion-divider {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
}
.seccion-divider {
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0;
}
.seccion-divider::before,
.seccion-divider::after {
  content:'';
  flex:1;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--div-color,#e2e8f0),transparent);
}
.seccion-divider .div-icon {
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;
  background:var(--div-color,#94a3b8);
  flex-shrink:0;
}

/* Colores por paso */
.seccion.paso-1 { border-left:4px solid #3b82f6; background:linear-gradient(135deg,#eff6ff 0%,#fff 60%); }
.seccion.paso-1 .sec-step { color:#2563eb; }

.seccion.paso-2 { border-left:4px solid #f97316; background:linear-gradient(135deg,#fff7ed 0%,#fff 60%); }
.seccion.paso-2 .sec-step { color:#ea580c; }

.seccion.paso-3-complexivo { border-left:4px solid #8b5cf6; background:linear-gradient(135deg,#f5f3ff 0%,#fff 60%); }
.seccion.paso-3-complexivo .sec-step { color:#7c3aed; }

.seccion.paso-3-investigacion { border-left:4px solid #059669; background:linear-gradient(135deg,#ecfdf5 0%,#fff 60%); }
.seccion.paso-3-investigacion .sec-step { color:#047857; }

.sec-step { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#94a3b8; margin-bottom:2px; }
.sec-title { font-size:15px; font-weight:700; color:#0f172a; margin:0 0 2px; }
.sec-sub   { font-size:12px; color:#64748b; margin:0; }

/* ── Alertas explícitas ── */
.caja-info  { background:#eff6ff; border:1px solid #bfdbfe; border-radius:10px; padding:12px 16px; color:#1e40af; font-size:13px; }
.caja-ok    { background:#ecfdf5; border:1px solid #a7f3d0; border-radius:10px; padding:12px 16px; color:#065f46; font-size:13px; }
.caja-warn  { background:#fffbeb; border:1px solid #fde68a; border-radius:10px; padding:12px 16px; color:#92400e; font-size:13px; }
.caja-error { background:#fef2f2; border:1px solid #fecaca; border-radius:10px; padding:12px 16px; color:#991b1b; font-size:13px; }
.caja-gray  { background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:12px 16px; color:#475569; font-size:13px; }

/* ── Badge estado ── */
.sol-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 13px; border-radius:999px; font-size:11.5px; font-weight:600; }
.sol-pendiente { background:#fffbeb; color:#92400e; border:1px solid #fcd34d; }
.sol-enviada   { background:#eff6ff; color:#1e40af; border:1px solid #93c5fd; }
.sol-aprobado  { background:#ecfdf5; color:#065f46; border:1px solid #6ee7b7; }
.sol-rechazado { background:#fef2f2; color:#991b1b; border:1px solid #fca5a5; }

/* ── Comprobante ── */
.upload-zone {
  border:2px dashed #cbd5e1;
  border-radius:10px;
  padding:1.5rem 1rem;
  text-align:center;
  cursor:pointer;
  transition:border-color .18s, background .18s;
  background:#f8fafc;
}
.upload-zone:hover { border-color:#2563eb; background:#eff6ff; }
.upload-zone.has-file { border-color:#059669; background:#ecfdf5; }
.upload-zone input[type=file] { display:none; }

/* ── Stepper ── */
.stepper { display:flex; align-items:flex-start; gap:0; margin-bottom:1.25rem; }
.step-item { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; }
.step-item:not(:last-child)::after {
  content:''; position:absolute; top:16px; left:calc(50% + 16px);
  width:calc(100% - 32px); height:2px; background:#e2e8f0;
}
.step-item.done::after  { background:#2563eb; }
.step-circle {
  width:32px; height:32px; border-radius:50%; border:2px solid #e2e8f0;
  background:#fff; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#94a3b8; flex-shrink:0; z-index:1;
}
.step-item.active .step-circle { border-color:#2563eb; background:#eff6ff; color:#2563eb; }
.step-item.done   .step-circle { border-color:#2563eb; background:#2563eb; color:#fff; }
.step-label { font-size:11px; color:#94a3b8; margin-top:6px; text-align:center; font-weight:500; }
.step-item.active .step-label { color:#2563eb; font-weight:700; }
.step-item.done   .step-label { color:#059669; }

/* ── Timer 48h ── */
.timer-box {
  display:inline-flex; align-items:center; gap:8px;
  background:#fffbeb; border:1px solid #fcd34d;
  border-radius:8px; padding:6px 14px; font-size:12px; color:#92400e; font-weight:600;
}
.timer-box.urgente { background:#fef2f2; border-color:#fca5a5; color:#991b1b; }

/* ── Tabla ── */
.tabla-custom { background:#fff; border:1px solid #e2e8f0; border-radius:10px; overflow:hidden; }
.tabla-custom thead th { background:#f8fafc; font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:#94a3b8; padding:10px 14px; border-bottom:1px solid #e2e8f0; font-weight:700; }
.tabla-custom tbody td { padding:12px 14px; font-size:13px; color:#0f172a; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.tabla-custom tbody tr:last-child td { border-bottom:none; }

/* ── Comprobante preview ── */
.comp-preview {
  display:flex; align-items:center; gap:12px;
  background:#f0fdf4; border:1px solid #bbf7d0;
  border-radius:10px; padding:12px 16px;
}

/* ── Trabajo de investigación ── */
.formato-card {
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(135deg,#eff6ff 0%,#f0fdf4 100%);
  border:1px solid #bfdbfe; border-radius:12px; padding:16px 18px;
}
.formato-icon {
  width:52px; height:52px; background:#2563eb; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff; flex-shrink:0;
}
.upload-pdf { border:2px dashed #cbd5e1; border-radius:10px; padding:1.4rem 1rem;
  text-align:center; cursor:pointer; transition:border-color .18s,background .18s; background:#f8fafc; }
.upload-pdf:hover { border-color:#2563eb; background:#eff6ff; }
.upload-pdf.has-file { border-color:#059669; background:#f0fdf4; }
.upload-pdf input[type=file] { display:none; }
.entregado-box { background:#f0fdf4; border:1px solid #86efac; border-radius:12px; padding:16px 18px;
  display:flex; align-items:flex-start; gap:14px; }
.aprobado-tutor-box { background:#ecfdf5; border:2px solid #34d399; border-radius:12px; padding:16px 18px; }
.rechazado-tutor-box { background:#fef2f2; border:1px solid #fca5a5; border-radius:12px; padding:16px 18px; }

#campo-tema { display:none; }
</style>
</head>
<body>
<?php include __DIR__ . '/../../includes/navbar.php'; ?>
<div class="app-shell">

  <!-- ══ SIDEBAR ══ -->
  <?php include __DIR__ . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . 'includes' . DIRECTORY_SEPARATOR . 'sidebar-estudiante.php'; ?>

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

    <!-- Encabezado -->
    <div class="page-header d-flex justify-content-between align-items-center flex-wrap gap-2">
      <div>
        <h4 style="color:#0f172a;">
          <i class="fa fa-graduation-cap me-2" style="color:#2563eb;"></i>Titulación
        </h4>
        <p style="color:#64748b;">Seguimiento de tu proceso de graduación · UIC Ciclo I 2026</p>
      </div>
      <div class="d-flex align-items-center gap-2 flex-wrap">
        <?php if ($titulacion): ?>
          <span class="sol-badge sol-<?= $estadoActual ?>">
            <i class="fa fa-circle" style="font-size:7px;"></i>
            <?php
            $labels = ['pendiente'=>'Pendiente de envío','enviada'=>'En revisión (Facturación)','aprobado'=>'Aprobada','rechazado'=>'Rechazada'];
            echo $labels[$estadoActual] ?? ucfirst($estadoActual);
            ?>
          </span>
        <?php endif; ?>
        <?php if ($horasRestantes !== null): ?>
          <div class="timer-box <?= $horasRestantes < 6 ? 'urgente' : '' ?>">
            <i class="fa fa-clock"></i>
            <?= $horasRestantes ?>h <?= $minsRestantes ?>m restantes
          </div>
        <?php elseif ($plazoVencido && !in_array($estadoActual, ['aprobado'])): ?>
          <div class="timer-box urgente"><i class="fa fa-triangle-exclamation"></i> Plazo de 48h vencido</div>
        <?php endif; ?>
      </div>
    </div>

    <!-- Errores -->
    <?php if (!empty($errors)): ?>
      <div class="caja-error mb-3">
        <i class="fa fa-circle-exclamation me-2"></i>
        <?= implode('<br>', array_map('htmlspecialchars', $errors)) ?>
      </div>
    <?php endif; ?>

    <!-- ══ STEPPER ══ -->
    <?php
    $step1done = $titulacion && !empty($modActual);
    $step2done = $titulacion && in_array($estadoActual, ['enviada','aprobado']);
    $step3done = $estadoActual === 'aprobado';
    ?>
    <div class="stepper mb-4">
      <div class="step-item <?= $step1done ? 'done' : 'active' ?>">
        <div class="step-circle"><?= $step1done ? '<i class="fa fa-check" style="font-size:11px;"></i>' : '1' ?></div>
        <div class="step-label">Seleccionar<br>modalidad</div>
      </div>
      <div class="step-item <?= $step2done ? 'done' : ($step1done && !$step2done ? 'active' : '') ?>">
        <div class="step-circle"><?= $step2done ? '<i class="fa fa-check" style="font-size:11px;"></i>' : '2' ?></div>
        <div class="step-label">Subir<br>comprobante</div>
      </div>
      <div class="step-item <?= $step3done ? 'done' : ($step2done && !$step3done ? 'active' : '') ?>">
        <div class="step-circle"><?= $step3done ? '<i class="fa fa-check" style="font-size:11px;"></i>' : '3' ?></div>
        <div class="step-label">Validación<br>Facturación</div>
      </div>
      <div class="step-item <?= $step3done ? 'done' : '' ?>">
        <div class="step-circle"><?= $step3done ? '<i class="fa fa-check" style="font-size:11px;"></i>' : '4' ?></div>
        <div class="step-label">Aprobación<br>Coordinadora</div>
      </div>
    </div>

    <!-- ══ PASO 1: Selección de modalidad ══ -->
    <div class="seccion paso-1">
      <div class="d-flex justify-content-between align-items-start mb-3 flex-wrap gap-2">
        <div>
          <p class="sec-step">Paso 1</p>
          <p class="sec-title">Selección de Modalidad</p>
          <p class="sec-sub">Elige la modalidad con la que completarás tu titulación</p>
        </div>
      </div>

      <?php if ($titulacion && !empty($modActual)): ?>
        <!-- Modalidad ya seleccionada -->
        <div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:12px;margin-bottom:<?= $canEdit ? '1rem' : '0' ?>;">
          <div class="mod-icon <?= $modActual === 'examen_complexivo' ? 'azul' : 'verde' ?>" style="flex-shrink:0;">
            <i class="fa fa-<?= $modActual === 'examen_complexivo' ? 'file-pen' : 'microscope' ?>"></i>
          </div>
          <div>
            <div style="font-weight:700;color:#0f172a;font-size:.92rem;">
              <?= $modActual === 'examen_complexivo' ? 'Examen Complexivo' : 'Trabajo de Investigación' ?>
            </div>
            <?php if (!empty($titulacion['tema'])): ?>
              <div style="font-size:12px;color:#64748b;margin-top:2px;">Tema: <?= htmlspecialchars($titulacion['tema']) ?></div>
            <?php endif; ?>
          </div>
          <?php if ($canEdit): ?>
            <button class="btn btn-sm btn-outline-secondary ms-auto" style="font-size:11px;"
                    onclick="document.getElementById('form-mod-edit').style.display='block';this.parentElement.style.display='none';">
              <i class="fa fa-pen me-1"></i>Cambiar
            </button>
          <?php endif; ?>
        </div>
        <!-- El formulario de edición se mueve aquí via JS -->
        <?php if ($canEdit): ?>
          <div id="form-mod-edit" style="display:none;"></div>
        <?php endif; ?>
      <?php endif; ?>

      <?php if ($canEdit): ?>
        <form method="POST" action="titulacion.php" id="form-mod"
              <?= ($titulacion && !empty($modActual)) ? 'style="display:none;"' : '' ?>
              id="form-mod">
          <input type="hidden" name="accion" value="guardar_modalidad">
          <div class="row g-3 mb-3">
            <div class="col-12 col-md-6 d-flex">
              <label class="mod-card w-100 <?= $modActual==='examen_complexivo' ? 'selected' : '' ?>"
                     id="card-examen" onclick="selMod('examen_complexivo')">
                <input type="radio" name="modalidad" value="examen_complexivo"
                       <?= $modActual==='examen_complexivo' ? 'checked' : '' ?>>
                <div class="mod-dot"><i class="fa fa-check"></i></div>
                <div class="mod-icon azul"><i class="fa fa-file-pen"></i></div>
                <p class="mod-title">Examen Complexivo</p>
                <p class="mod-desc">Evaluación oral y/o escrita que integra conocimientos y competencias adquiridas. Incluye defensa ante un tribunal académico.</p>
              </label>
            </div>
            <div class="col-12 col-md-6 d-flex">
              <label class="mod-card w-100 <?= $modActual==='trabajo_investigacion' ? 'selected' : '' ?>"
                     id="card-trabajo" onclick="selMod('trabajo_investigacion')">
                <input type="radio" name="modalidad" value="trabajo_investigacion"
                       <?= $modActual==='trabajo_investigacion' ? 'checked' : '' ?>>
                <div class="mod-dot"><i class="fa fa-check"></i></div>
                <div class="mod-icon verde"><i class="fa fa-microscope"></i></div>
                <p class="mod-title">Trabajo de Investigación</p>
                <p class="mod-desc">Proyecto de investigación aplicada orientado a resolver una problemática real del área profesional.</p>
              </label>
            </div>
          </div>
          <div id="campo-tema" class="mb-3">
            <label class="form-label" style="font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#64748b;">
              Tema propuesto <span style="color:#dc2626;">*</span>
            </label>
            <input type="text" name="tema" id="input-tema" class="form-control"
                   placeholder="Ej: Sistema web para gestión de inventarios..."
                   value="<?= htmlspecialchars($titulacion['tema'] ?? '') ?>">
            <p style="font-size:11px;color:#94a3b8;margin-top:4px;margin-bottom:0;">Puede ajustarse con tu director.</p>
          </div>
          <button type="submit" class="btn btn-primary">
            <i class="fa fa-floppy-disk me-2"></i>Guardar Modalidad
          </button>
        </form>
        <?php if ($titulacion && !empty($modActual)): ?>
          <script>
            document.getElementById('form-mod-edit').appendChild(document.getElementById('form-mod'));
          </script>
        <?php endif; ?>
      <?php endif; ?>

      <?php if (!$titulacion): ?>
        <div class="caja-info mt-2">
          <i class="fa fa-circle-info me-2"></i>
          Selecciona tu modalidad y guárdala para continuar al siguiente paso.
        </div>
      <?php endif; ?>
    </div><!-- /paso 1 -->

    <!-- Divisor 1\u21922 -->
    <?php if ($titulacion && !empty($modActual)): ?>
    <div class="seccion-divider" style="--div-color:#f97316;">
      <span class="div-icon"><i class="fa fa-arrow-down"></i></span>
    </div>
    <?php endif; ?>
    <!-- ══ PASO 2: Comprobante de pago ══ -->
    <?php if ($titulacion && !empty($modActual)): ?>
    <div class="seccion paso-2">
      <div class="mb-3">
        <p class="sec-step">Paso 2</p>
        <p class="sec-title">Comprobante de Pago</p>
        <p class="sec-sub">Adjunta el comprobante del pago de <strong style="color:#0f172a;">$<?= $precioTit ?></strong> y envía tu solicitud</p>
      </div>

      <?php if ($estadoActual === 'enviada'): ?>
        <!-- Ya enviado -->
        <div class="comp-preview mb-3">
          <div style="width:42px;height:42px;background:#bbf7d0;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
            <i class="fa fa-file-invoice-dollar" style="color:#059669;font-size:18px;"></i>
          </div>
          <div>
            <div style="font-weight:700;color:#065f46;font-size:.9rem;">Comprobante enviado</div>
            <div style="font-size:12px;color:#059669;margin-top:2px;">
              <?= !empty($titulacion['comprobante_pago']) ? htmlspecialchars($titulacion['comprobante_pago']) : 'Archivo adjunto' ?>
            </div>
            <?php if (!empty($titulacion['fecha_envio'])): ?>
              <div style="font-size:11px;color:#64748b;margin-top:2px;">
                <i class="fa fa-clock me-1"></i>Enviado el <?= date('d/m/Y H:i', strtotime($titulacion['fecha_envio'])) ?>
              </div>
            <?php endif; ?>
          </div>
        </div>
        <div class="caja-info">
          <i class="fa fa-hourglass-half me-2"></i>
          Facturación está validando tu comprobante. Recibirás una notificación cuando sea procesado.
        </div>

      <?php elseif ($estadoActual === 'aprobado'): ?>
        <div class="caja-ok">
          <i class="fa fa-circle-check me-2"></i>
          Pago validado y solicitud <strong>aprobada</strong> por la Coordinadora.
        </div>

      <?php elseif ($estadoActual === 'rechazado'): ?>
        <div class="caja-error mb-3">
          <i class="fa fa-circle-xmark me-2"></i>
          <?php if (!empty($titulacion['observaciones'])): ?>
            Solicitud rechazada: <strong><?= htmlspecialchars($titulacion['observaciones']) ?></strong>
          <?php else: ?>
            Tu solicitud fue rechazada. Corrige y vuelve a enviar.
          <?php endif; ?>
        </div>
        <?php // El formulario de reenvío aparece abajo (in_array pendiente/rechazado) ?>

      <?php else: ?>
        <!-- Pendiente: mostrar formulario de subida -->
        <div class="caja-warn mb-3" style="font-size:12px;">
          <i class="fa fa-circle-info me-2"></i>
          Realiza el depósito de <strong>$<?= $precioTit ?></strong> a las cuentas del Instituto y adjunta el comprobante aquí.
          Luego envíalo a <a href="mailto:<?= htmlspecialchars($emailFac) ?>" style="color:#92400e;font-weight:600;"><?= htmlspecialchars($emailFac) ?></a>.
        </div>
      <?php endif; ?>

      <?php if (in_array($estadoActual, ['pendiente','rechazado'])): ?>
        <form method="POST" action="titulacion.php" enctype="multipart/form-data" id="form-comprobante">
          <input type="hidden" name="accion" value="enviar_solicitud">

          <!-- Zona de subida -->
          <div class="upload-zone mb-3" id="upload-zone" onclick="document.getElementById('input-comprobante').click()">
            <input type="file" name="comprobante" id="input-comprobante" accept=".pdf,.jpg,.jpeg,.png"
                   onchange="previewFile(this)">
            <div id="upload-placeholder">
              <i class="fa fa-cloud-arrow-up" style="font-size:28px;color:#94a3b8;margin-bottom:8px;display:block;"></i>
              <div style="font-weight:600;color:#475569;font-size:13px;">Haz clic o arrastra el archivo aquí</div>
              <div style="font-size:11px;color:#94a3b8;margin-top:4px;">PDF, JPG o PNG · Máximo 5 MB</div>
            </div>
            <div id="upload-preview" style="display:none;">
              <i class="fa fa-file-check" style="font-size:26px;color:#059669;margin-bottom:6px;display:block;"></i>
              <div id="upload-filename" style="font-weight:600;color:#065f46;font-size:13px;"></div>
              <div style="font-size:11px;color:#059669;margin-top:2px;">Listo para enviar</div>
            </div>
          </div>

          <div class="d-flex gap-3 flex-wrap align-items-center">
            <button type="submit" class="btn btn-primary px-4" id="btn-enviar" disabled>
              <i class="fa fa-paper-plane me-2"></i>Enviar Solicitud
            </button>
            <span style="font-size:12px;color:#94a3b8;">
              <i class="fa fa-lock me-1"></i>Tu solicitud llegará a Facturación para validación
            </span>
          </div>
        </form>
      <?php endif; ?>
    </div><!-- /paso 2 -->
    <?php endif; ?>


    <!-- Divisor 2→3 Complexivo -->
    <?php if ($pdfPreguntas): ?>
    <div class="seccion-divider" style="--div-color:#8b5cf6;">
      <span class="div-icon"><i class="fa fa-arrow-down"></i></span>
    </div>
    <div class="seccion paso-3-complexivo">
      <div class="mb-3">
        <p class="sec-step">Paso 3 · Examen Complexivo</p>
        <p class="sec-title"><i class="fa fa-file-pdf me-2" style="color:#ef4444;"></i>Banco de Preguntas para Estudio</p>
        <p class="sec-sub">La Coordinadora ha habilitado el material de estudio para tu examen complexivo. Descárgalo y prepárate.</p>
      </div>

      <div style="display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,#eff6ff,#fef3c7);border:1px solid #bfdbfe;border-radius:14px;padding:20px 22px;margin-bottom:16px;">
        <div style="width:60px;height:60px;background:#ef4444;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 14px rgba(239,68,68,.3);">
          <i class="fa fa-file-pdf" style="font-size:26px;color:#fff;"></i>
        </div>
        <div style="flex:1;">
          <div style="font-weight:700;color:#1e40af;font-size:.96rem;margin-bottom:2px;">
            Preguntas — Examen Complexivo
          </div>
          <?php if ($pdfPreguntas['descripcion']): ?>
            <div style="font-size:12px;color:#3b82f6;margin-bottom:10px;">
              <?= htmlspecialchars($pdfPreguntas['descripcion']) ?>
            </div>
          <?php endif; ?>
          <a href="<?= BASE_URL ?>/api/ver_preguntas_complexivo.php?carrera=<?= (int)($carreraRow['id_carrera'] ?? 0) ?>"
             target="_blank" class="btn btn-danger btn-sm px-4">
            <i class="fa fa-download me-2"></i>Descargar PDF de Preguntas
          </a>
        </div>
      </div>

      <div class="caja-warn" style="font-size:12px;">
        <i class="fa fa-triangle-exclamation me-2"></i>
        <strong>Uso confidencial:</strong> Este banco de preguntas es exclusivo para tu preparación. No lo distribuyas.
        Estudia cada tema con profundidad. ¡Mucho éxito en tu examen!
      </div>
    </div>
    <?php elseif ($estadoActual === 'aprobado' && $modActual === 'examen_complexivo'): ?>
    <div class="seccion-divider" style="--div-color:#8b5cf6;">
      <span class="div-icon"><i class="fa fa-arrow-down"></i></span>
    </div>
    <div class="seccion paso-3-complexivo" style="opacity:.7;">
      <div class="d-flex align-items-center gap-3">
        <div style="width:48px;height:48px;background:#f3f4f6;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
          <i class="fa fa-clock" style="font-size:20px;color:#9ca3af;"></i>
        </div>
        <div>
          <div style="font-weight:700;color:#374151;font-size:.92rem;">Preguntas del Examen Complexivo — Pendiente</div>
          <div style="font-size:12px;color:#6b7280;margin-top:2px;">
            La Coordinadora aún no ha subido el banco de preguntas para tu carrera. Recibirás acceso cuando esté disponible.
          </div>
        </div>
      </div>
    </div>
    <?php endif; ?>

    <!-- ══ PASO 4 · RESULTADO EXAMEN COMPLEXIVO ══ -->
    <?php
      $notaComplEstudiante = null;
      if ($titulacion && $titulacion['modalidad'] === 'examen_complexivo' && $titulacion['estado'] === 'aprobado') {
          $notaComplEstudiante = isset($titulacion['nota_trabajo']) && $titulacion['nota_trabajo'] !== null
                                 ? (float)$titulacion['nota_trabajo'] : null;
      }
    ?>
    <?php if ($titulacion && $titulacion['modalidad'] === 'examen_complexivo' && $titulacion['estado'] === 'aprobado'): ?>
    <div class="seccion-divider" style="--div-color:#8b5cf6;">
      <span class="div-icon"><i class="fa fa-arrow-down"></i></span>
    </div>
    <div class="seccion paso-3-complexivo"
         style="border-left:4px solid <?= $notaComplEstudiante !== null ? ($notaComplEstudiante >= 70 ? '#10b981' : '#ef4444') : '#8b5cf6' ?>;">
      <div class="mb-3">
        <p class="sec-step" style="color:#7c3aed;">Paso 4 · Examen Complexivo</p>
        <p class="sec-title">Resultado de tu Examen</p>
        <p class="sec-sub">Calificación registrada por Secretaría una vez rendido el examen.</p>
      </div>

      <?php if ($notaComplEstudiante !== null): ?>
        <?php
          $aprobCompl = $notaComplEstudiante >= 70;
          $colorBorde = $aprobCompl ? '#34d399' : '#fca5a5';
          $colorNum   = $aprobCompl ? '#065f46' : '#991b1b';
          $colorBadge = $aprobCompl ? '#059669' : '#dc2626';
          $bgBadge    = $aprobCompl ? '#f0fdf4' : '#fef2f2';
          $iconBadge  = $aprobCompl ? 'fa-circle-check' : 'fa-circle-xmark';
          $labelBadge = $aprobCompl ? 'APROBADO' : 'REPROBADO';
        ?>
        <div style="display:flex;align-items:center;gap:20px;flex-wrap:wrap;">
          <!-- Nota grande -->
          <div style="text-align:center;background:#fff;border:3px solid <?= $colorBorde ?>;
                      border-radius:16px;padding:16px 28px;min-width:120px;
                      box-shadow:0 4px 16px <?= $colorBorde ?>55;">
            <div style="font-size:38px;font-weight:900;line-height:1;color:<?= $colorNum ?>;">
              <?= number_format($notaComplEstudiante, 1) ?>
            </div>
            <div style="font-size:11px;color:#6b7280;margin-top:3px;">/ 100 puntos</div>
            <div style="font-size:11px;font-weight:800;margin-top:6px;
                        color:<?= $colorBadge ?>;background:<?= $bgBadge ?>;
                        border-radius:20px;padding:2px 10px;display:inline-block;">
              <i class="fa <?= $iconBadge ?> me-1"></i><?= $labelBadge ?>
            </div>
          </div>
          <!-- Info lateral -->
          <div>
            <div style="font-size:13px;color:#374151;font-weight:600;margin-bottom:6px;">
              <i class="fa fa-clipboard-check me-1" style="color:#8b5cf6;"></i>
              Examen Complexivo
            </div>
            <div style="font-size:12px;color:#6b7280;margin-bottom:4px;">
              Mínimo aprobatorio: <strong>70 / 100</strong>
            </div>
            <div style="font-size:11px;color:#9ca3af;">
              <i class="fa fa-user-shield me-1"></i>Nota registrada por Secretaría
            </div>
            <?php if ($aprobCompl): ?>
            <div style="font-size:12px;color:#059669;font-weight:600;margin-top:8px;">
              <i class="fa fa-graduation-cap me-1"></i>
              ¡Felicitaciones! Has completado tu proceso de titulación.
            </div>
            <?php else: ?>
            <div style="font-size:12px;color:#dc2626;font-weight:600;margin-top:8px;">
              <i class="fa fa-triangle-exclamation me-1"></i>
              No alcanzaste el puntaje mínimo. Comunícate con Secretaría.
            </div>
            <?php endif; ?>
          </div>
        </div>

      <?php else: ?>
        <!-- Nota aún no ingresada -->
        <div style="display:flex;align-items:center;gap:14px;background:#fafafa;
                    border:1px dashed #d1d5db;border-radius:12px;padding:18px 22px;">
          <div style="width:48px;height:48px;background:#f3f4f6;border-radius:12px;
                      display:flex;align-items:center;justify-content:center;flex-shrink:0;">
            <i class="fa fa-hourglass-half" style="font-size:20px;color:#9ca3af;"></i>
          </div>
          <div>
            <div style="font-weight:700;color:#374151;font-size:.92rem;">
              Resultado pendiente
            </div>
            <div style="font-size:12px;color:#6b7280;margin-top:3px;">
              Una vez que Secretaría registre tu calificación del examen, aparecerá aquí automáticamente.
            </div>
          </div>
        </div>
      <?php endif; ?>
    </div>
    <?php endif; ?>

    <!-- ══ TRABAJO DE INVESTIGACIÓN — Formato + Subida PDF ══ -->
    <?php if ($titulacion && $titulacion['modalidad'] === 'trabajo_investigacion' && $titulacion['estado'] === 'aprobado'): ?>
    <!-- Divisor 2→3 Investigación -->
    <div class="seccion-divider" style="--div-color:#059669;">
      <span class="div-icon"><i class="fa fa-arrow-down"></i></span>
    </div>
    <div class="seccion paso-3-investigacion">
      <div class="mb-3">
        <p class="sec-step">Paso 3 · Trabajo de Investigación</p>
        <p class="sec-title">Desarrolla y entrega tu trabajo</p>
        <p class="sec-sub">Descarga el formato oficial, complétalo y sube el PDF para revisión del tutor</p>
      </div>

      <!-- ── Descarga del formato ── -->
      <div class="formato-card mb-4">
        <div class="formato-icon"><i class="fa fa-file-word"></i></div>
        <div style="flex:1;">
          <div style="font-weight:700;color:#1e40af;font-size:.92rem;margin-bottom:2px;">
            Formato Oficial — Trabajo de Investigación UIC 2026
          </div>
          <div style="font-size:12px;color:#3b82f6;margin-bottom:10px;">
            Guía de estructura, formato y directrices institucionales · Vicerrectorado Académico
          </div>
          <a href="<?= BASE_URL ?>/assets/uploads/titulacion/FORMATO_TRABAJO_INVESTIGACION_UIC_2026.docx"
             download class="btn btn-primary btn-sm">
            <i class="fa fa-download me-2"></i>Descargar Formato (.docx)
          </a>
        </div>
      </div>

      <!-- ── Estado del PDF entregado ── -->
      <?php
      $pdfTrabajo    = $titulacion['pdf_trabajo']    ?? null;
      $estadoTrabajo = $titulacion['estado_trabajo'] ?? null;
      $fechaEntrega  = $titulacion['fecha_entrega_trabajo'] ?? null;
      ?>

      <?php if ($estadoTrabajo === 'aprobado_tutor'): ?>
        <!-- Aprobado por tutor -->
        <div class="aprobado-tutor-box mb-3">
          <div style="font-size:1.1rem;font-weight:800;color:#065f46;margin-bottom:10px;">
            <i class="fa fa-circle-check me-2" style="color:#10b981;"></i>Trabajo aprobado por el tutor
          </div>

          <?php
            $notaRaw = $titulacion['nota_trabajo'] ?? null;
            $nota100 = $notaRaw !== null ? round((float)$notaRaw * 10, 1) : null;
            $tutorNombre = $titulacion['tutor_investigacion_nombre'] ?? null;
          ?>

          <!-- Nota del tutor -->
          <?php if ($nota100 !== null): ?>
          <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px;">
            <div style="text-align:center;background:#fff;border:2px solid <?= $nota100 >= 70 ? '#34d399' : '#fca5a5' ?>;border-radius:12px;padding:10px 20px;min-width:100px;">
              <div style="font-size:28px;font-weight:800;line-height:1;color:<?= $nota100 >= 70 ? '#065f46' : '#991b1b' ?>;">
                <?= number_format($nota100, 1) ?>
              </div>
              <div style="font-size:10px;color:#6b7280;margin-top:2px;">/ 100 puntos</div>
              <div style="font-size:10px;font-weight:700;margin-top:4px;color:<?= $nota100 >= 70 ? '#059669' : '#dc2626' ?>;">
                <?= $nota100 >= 70 ? 'APROBADO' : 'REPROBADO' ?>
              </div>
            </div>
            <div>
              <div style="font-size:12px;color:#374151;font-weight:600;">Calificado por el tutor</div>
              <?php if ($tutorNombre): ?>
                <div style="font-size:12px;color:#059669;margin-top:2px;">
                  <i class="fa fa-user-tie me-1"></i><?= htmlspecialchars($tutorNombre) ?>
                </div>
              <?php endif; ?>
              <div style="font-size:11px;color:#6b7280;margin-top:4px;">
                Mínimo aprobatorio: 70 / 100
              </div>
            </div>
          </div>
          <?php endif; ?>

          <!-- Observaciones del tutor -->
          <?php if (!empty($titulacion['obs_tutor_trabajo'])): ?>
          <div style="background:#fff;border-left:3px solid #34d399;border-radius:0 8px 8px 0;padding:10px 14px;font-size:12px;color:#374151;">
            <div style="font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#059669;margin-bottom:4px;">Observaciones del tutor</div>
            <?= nl2br(htmlspecialchars($titulacion['obs_tutor_trabajo'])) ?>
          </div>
          <?php else: ?>
          <div style="font-size:12px;color:#059669;">
            Tu trabajo de investigación fue revisado y aprobado. El proceso de titulación ha concluido exitosamente.
          </div>
          <?php endif; ?>
          <?php if ($pdfTrabajo): ?>
          <div style="margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;">
            <button type="button" onclick="verPDF('<?= BASE_URL ?>/assets/uploads/titulacion/trabajos/<?= urlencode($pdfTrabajo) ?>')"
              style="font-size:12px;font-weight:700;padding:6px 14px;border-radius:8px;border:none;background:#059669;color:#fff;cursor:pointer;">
              <i class="fa fa-eye me-1"></i>Ver mi PDF enviado
            </button>
            <a href="<?= BASE_URL ?>/assets/uploads/titulacion/trabajos/<?= urlencode($pdfTrabajo) ?>" download
              style="font-size:12px;font-weight:700;padding:6px 14px;border-radius:8px;border:1px solid #059669;background:#fff;color:#059669;text-decoration:none;">
              <i class="fa fa-download me-1"></i>Descargar
            </a>
          </div>
          <?php endif; ?>
        </div>

      <?php elseif ($estadoTrabajo === 'rechazado_tutor'): ?>
        <!-- Rechazado por tutor -->
        <div class="rechazado-tutor-box mb-3">
          <div style="font-weight:700;color:#991b1b;margin-bottom:4px;">
            <i class="fa fa-circle-xmark me-2"></i>Trabajo rechazado — requiere correcciones
          </div>
          <?php if (!empty($titulacion['obs_tutor_trabajo'])): ?>
            <div style="font-size:13px;color:#dc2626;margin-bottom:10px;">
              <strong>Observaciones del tutor:</strong> <?= htmlspecialchars($titulacion['obs_tutor_trabajo']) ?>
            </div>
          <?php endif; ?>
          <?php if ($pdfTrabajo): ?>
          <div style="margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;">
            <button type="button" onclick="verPDF('<?= BASE_URL ?>/assets/uploads/titulacion/trabajos/<?= urlencode($pdfTrabajo) ?>')"
              style="font-size:12px;font-weight:700;padding:6px 14px;border-radius:8px;border:none;background:#dc2626;color:#fff;cursor:pointer;">
              <i class="fa fa-eye me-1"></i>Ver PDF enviado
            </button>
            <a href="<?= BASE_URL ?>/assets/uploads/titulacion/trabajos/<?= urlencode($pdfTrabajo) ?>" download
              style="font-size:12px;font-weight:700;padding:6px 14px;border-radius:8px;border:1px solid #dc2626;background:#fff;color:#dc2626;text-decoration:none;">
              <i class="fa fa-download me-1"></i>Descargar
            </a>
          </div>
          <?php endif; ?>
          <!-- Permite resubir -->
          <?php $estadoTrabajo = 'pendiente'; // Habilitar formulario ?>
        </div>

      <?php elseif ($estadoTrabajo === 'entregado'): ?>
        <!-- En revisión -->
        <div class="entregado-box mb-3">
          <div style="width:44px;height:44px;background:#bbf7d0;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
            <i class="fa fa-hourglass-half" style="color:#059669;font-size:18px;"></i>
          </div>
          <div>
            <div style="font-weight:700;color:#065f46;font-size:.9rem;">Trabajo entregado — en revisión</div>
            <div style="font-size:12px;color:#059669;margin-top:2px;">
              <i class="fa fa-file-pdf me-1"></i><?= htmlspecialchars($pdfTrabajo) ?>
            </div>
            <?php if ($fechaEntrega): ?>
              <div style="font-size:11px;color:#64748b;margin-top:4px;">
                <i class="fa fa-clock me-1"></i>Enviado el <?= date('d/m/Y H:i', strtotime($fechaEntrega)) ?>
              </div>
            <?php endif; ?>
            <div style="margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;">
              <button type="button" onclick="verPDF('<?= BASE_URL ?>/assets/uploads/titulacion/trabajos/<?= urlencode($pdfTrabajo) ?>')"
                style="font-size:12px;font-weight:700;padding:6px 14px;border-radius:8px;border:none;background:#2563eb;color:#fff;cursor:pointer;">
                <i class="fa fa-eye me-1"></i>Ver mi PDF
              </button>
              <a href="<?= BASE_URL ?>/assets/uploads/titulacion/trabajos/<?= urlencode($pdfTrabajo) ?>" download
                style="font-size:12px;font-weight:700;padding:6px 14px;border-radius:8px;border:1px solid #2563eb;background:#fff;color:#2563eb;text-decoration:none;">
                <i class="fa fa-download me-1"></i>Descargar
              </a>
            </div>
            <div style="font-size:12px;color:#0369a1;margin-top:8px;">
              <i class="fa fa-circle-info me-1"></i>El tutor asignado revisará tu trabajo y notificará el resultado.
            </div>
          </div>
        </div>

      <?php endif; ?>

      <!-- ── Formulario subida PDF (si no ha entregado o fue rechazado) ── -->
      <?php if (!$estadoTrabajo || $estadoTrabajo === 'pendiente'): ?>
        <div style="font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#64748b;margin-bottom:10px;">
          Subir PDF del trabajo completado
        </div>
        <div class="caja-warn mb-3" style="font-size:12px;">
          <i class="fa fa-triangle-exclamation me-2"></i>
          Asegúrate de que el PDF sea la versión <strong>final y completa</strong> siguiendo el formato descargado arriba.
          Solo se aceptan archivos <strong>PDF · máximo 20 MB</strong>.
        </div>
        <form method="POST" action="titulacion.php" enctype="multipart/form-data" id="form-pdf-trabajo">
          <input type="hidden" name="accion" value="subir_pdf_trabajo">

          <div class="upload-pdf mb-3" id="upload-pdf-zone"
               onclick="document.getElementById('input-pdf-trabajo').click()">
            <input type="file" name="pdf_trabajo" id="input-pdf-trabajo" accept=".pdf"
                   onchange="previewPdfTrabajo(this)">
            <div id="pdf-placeholder">
              <i class="fa fa-file-pdf" style="font-size:32px;color:#94a3b8;margin-bottom:8px;display:block;"></i>
              <div style="font-weight:600;color:#475569;font-size:13px;">Haz clic para seleccionar el PDF</div>
              <div style="font-size:11px;color:#94a3b8;margin-top:4px;">Solo PDF · Máximo 20 MB</div>
            </div>
            <div id="pdf-preview" style="display:none;">
              <i class="fa fa-file-pdf" style="font-size:30px;color:#dc2626;margin-bottom:6px;display:block;"></i>
              <div id="pdf-filename" style="font-weight:600;color:#991b1b;font-size:13px;"></div>
              <div style="font-size:11px;color:#dc2626;margin-top:2px;">PDF listo para enviar</div>
            </div>
          </div>

          <button type="submit" class="btn btn-success px-4" id="btn-subir-trabajo" disabled
                  onclick="return confirm('¿Confirmas que este es el PDF final de tu Trabajo de Investigación?')">
            <i class="fa fa-paper-plane me-2"></i>Enviar al tutor para calificación
          </button>
        </form>
      <?php endif; ?>
    </div>
    <?php endif; ?>


    <!-- ══ SEGUIMIENTO DEL TRABAJO ══ -->
    <?php if ($trabajo): ?>
    <div class="seccion">
      <div class="d-flex justify-content-between align-items-start mb-3 flex-wrap gap-2">
        <div>
          <p class="sec-step">Seguimiento</p>
          <p class="sec-title"><?= htmlspecialchars($trabajo['titulo'] ?? 'Sin título aún') ?></p>
          <p class="sec-sub">Director: <strong><?= htmlspecialchars($trabajo['director_nombre'] ?? 'Por asignar') ?></strong>
            <?php if ($trabajo['fecha_defensa']): ?>
              &nbsp;·&nbsp; Defensa: <strong><?= date('d/m/Y', strtotime($trabajo['fecha_defensa'])) ?></strong>
            <?php endif; ?>
          </p>
        </div>
        <?php
        $etColors = ['propuesta'=>'#64748b','aprobada'=>'#059669','en_desarrollo'=>'#d97706','revision'=>'#7c3aed','predefensa'=>'#d97706','defensa'=>'#2563eb','completado'=>'#059669','reprobado'=>'#dc2626'];
        $ec = $etColors[$trabajo['estado']] ?? '#64748b';
        ?>
        <span style="font-size:12px;font-weight:700;color:<?= $ec ?>;background:<?= $ec ?>18;border:1px solid <?= $ec ?>44;padding:4px 12px;border-radius:999px;">
          <?= str_replace('_',' ',ucfirst($trabajo['estado'])) ?>
        </span>
      </div>

      <!-- Notas -->
      <div class="row g-2 mb-3">
        <?php foreach ([
          ['v'=>$trabajo['nota_director'],       'l'=>'Nota director',  'p'=>'40%', 'c'=>'#2563eb'],
          ['v'=>$trabajo['nota_lector'],         'l'=>'Nota lector',    'p'=>'30%', 'c'=>'#059669'],
          ['v'=>$trabajo['nota_tribunal'] ?? null,'l'=>'Nota tribunal', 'p'=>'30%', 'c'=>'#7c3aed'],
          ['v'=>$trabajo['nota_final'],           'l'=>'Nota final',    'p'=>null,  'c'=>($trabajo['nota_final']>=7?'#059669':'#dc2626')],
        ] as $n): ?>
        <div class="col-6 col-md-3">
          <div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px 14px;">
            <div style="font-size:20px;font-weight:700;color:<?= $n['c'] ?>;"><?= $n['v'] !== null ? number_format((float)$n['v'],2) : '—' ?></div>
            <div style="font-size:11px;color:#94a3b8;margin-top:2px;"><?= $n['l'] ?></div>
            <?php if ($n['p']): ?>
              <div style="font-size:10px;color:#cbd5e1;margin-top:1px;"><?= $n['p'] ?> del total</div>
            <?php endif; ?>
          </div>
        </div>
        <?php endforeach; ?>
      </div>

      <?php if (!empty($etapas)): ?>
      <p style="font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#94a3b8;margin-bottom:10px;">Etapas del proceso</p>
      <div class="tabla-custom mb-3">
        <table class="table table-borderless mb-0">
          <thead><tr><th>#</th><th>Etapa</th><th>Fecha límite</th><th>Estado</th><th>Acción</th></tr></thead>
          <tbody>
            <?php foreach ($etapas as $i => $et):
              $vc = ['pendiente'=>'#94a3b8','entregado'=>'#2563eb','aprobado'=>'#059669','observado'=>'#d97706'][$et['estado']] ?? '#94a3b8';
              $venci = ($et['fecha_limite'] && $et['fecha_limite'] < date('Y-m-d') && $et['estado']==='pendiente');
            ?>
            <tr>
              <td style="color:#94a3b8;font-weight:700;"><?= $i+1 ?></td>
              <td style="font-weight:600;"><?= htmlspecialchars($et['nombre']) ?></td>
              <td style="font-size:12px;<?= $venci?'color:#dc2626;font-weight:700;':'color:#64748b;' ?>">
                <?= $et['fecha_limite'] ? date('d/m/Y',strtotime($et['fecha_limite'])) : '—' ?>
              </td>
              <td><span style="font-size:11px;font-weight:700;color:<?= $vc ?>;"><?= ucfirst($et['estado']) ?></span></td>
              <td>
                <?php if (in_array($et['estado'],['pendiente','observado'])): ?>
                  <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#modalEtapa"
                          data-id="<?= $et['id_etapa'] ?>" data-nombre="<?= htmlspecialchars($et['nombre']) ?>">
                    <i class="fa fa-upload me-1"></i>Entregar
                  </button>
                <?php else: ?>
                  <span style="font-size:12px;color:#059669;"><i class="fa fa-check me-1"></i><?= ucfirst($et['estado']) ?></span>
                <?php endif; ?>
              </td>
            </tr>
            <?php endforeach; ?>
          </tbody>
        </table>
      </div>
      <?php endif; ?>
    </div>
    <?php endif; ?>


    <!-- Modal etapa -->
    <div class="modal fade" id="modalEtapa" tabindex="-1">
      <div class="modal-dialog"><div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="etapaTitulo"><i class="fa fa-upload me-2"></i>Entregar etapa</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <form method="POST">
          <input type="hidden" name="accion" value="subir_etapa">
          <input type="hidden" name="id_etapa" id="etapaId">
          <div class="modal-body">
            <label class="form-label">Descripción de lo entregado</label>
            <textarea name="descripcion_entrega" class="form-control" rows="3" placeholder="Describe brevemente lo que entregas..."></textarea>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
            <button type="submit" class="btn btn-success"><i class="fa fa-check me-1"></i>Marcar entregado</button>
          </div>
        </form>
      </div></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 ?>';

/* Selección de modalidad */
function selMod(val) {
  ['card-examen','card-trabajo'].forEach(function(id){ document.getElementById(id).classList.remove('selected'); });
  document.querySelectorAll('input[name=modalidad]').forEach(function(r){ r.checked = false; });
  document.getElementById(val==='examen_complexivo'?'card-examen':'card-trabajo').classList.add('selected');
  var r = document.querySelector('input[value="'+val+'"]');
  if (r) r.checked = true;
  var ct = document.getElementById('campo-tema'), it = document.getElementById('input-tema');
  if (ct) { ct.style.display = val==='trabajo_investigacion' ? 'block' : 'none'; if(it) it.required = val==='trabajo_investigacion'; }
}
(function(){ var c = document.querySelector('input[name=modalidad]:checked'); if(c) selMod(c.value); })();

/* Preview comprobante */
function previewFile(input) {
  var btn = document.getElementById('btn-enviar');
  if (input.files && input.files[0]) {
    var name = input.files[0].name;
    document.getElementById('upload-filename').textContent = name;
    document.getElementById('upload-placeholder').style.display = 'none';
    document.getElementById('upload-preview').style.display = 'block';
    document.getElementById('upload-zone').classList.add('has-file');
    if (btn) btn.disabled = false;
  }
}

/* Drag & drop */
var zone = document.getElementById('upload-zone');
if (zone) {
  zone.addEventListener('dragover', function(e){ e.preventDefault(); zone.style.borderColor='#2563eb'; });
  zone.addEventListener('dragleave', function(){ zone.style.borderColor=''; });
  zone.addEventListener('drop', function(e){
    e.preventDefault(); zone.style.borderColor='';
    var input = document.getElementById('input-comprobante');
    input.files = e.dataTransfer.files;
    previewFile(input);
  });
}

/* Preview PDF trabajo */
function previewPdfTrabajo(input) {
  var btn = document.getElementById('btn-subir-trabajo');
  if (input.files && input.files[0]) {
    document.getElementById('pdf-filename').textContent = input.files[0].name;
    document.getElementById('pdf-placeholder').style.display = 'none';
    document.getElementById('pdf-preview').style.display = 'block';
    document.getElementById('upload-pdf-zone').classList.add('has-file');
    if (btn) btn.disabled = false;
  }
}
var pdfZone = document.getElementById('upload-pdf-zone');
if (pdfZone) {
  pdfZone.addEventListener('dragover', function(e){ e.preventDefault(); pdfZone.style.borderColor='#2563eb'; });
  pdfZone.addEventListener('dragleave', function(){ pdfZone.style.borderColor=''; });
  pdfZone.addEventListener('drop', function(e){
    e.preventDefault(); pdfZone.style.borderColor='';
    var input = document.getElementById('input-pdf-trabajo');
    input.files = e.dataTransfer.files;
    previewPdfTrabajo(input);
  });
}

/* Modal etapa */
$(function(){
  $('#modalEtapa').on('show.bs.modal', function(e){
    var btn = $(e.relatedTarget);
    $('#etapaId').val(btn.data('id'));
    $('#etapaTitulo').html('<i class="fa fa-upload me-2"></i>Entregar: '+btn.data('nombre'));
  });
});

/* Countdown timer en tiempo real */
<?php if ($horasRestantes !== null): ?>
(function(){
  var limite = <?= strtotime($titulacion['fecha_habilitacion']) + (48*3600) ?> * 1000;
  function update() {
    var diff = limite - Date.now();
    if (diff <= 0) { location.reload(); return; }
    var h = Math.floor(diff/3600000);
    var m = Math.floor((diff%3600000)/60000);
    var s = Math.floor((diff%60000)/1000);
    var el = document.querySelector('.timer-box');
    if (el) el.innerHTML = '<i class="fa fa-clock"></i> ' + h + 'h ' + m + 'm ' + s + 's restantes';
  }
  setInterval(update, 1000); update();
})();
<?php endif; ?>
</script>

<!-- ── MODAL VISOR PDF ── -->
<div class="modal fade" id="modalVerPDF" tabindex="-1" style="z-index:1070;">
  <div class="modal-dialog modal-xl modal-dialog-centered" style="max-width:92vw;">
    <div class="modal-content" style="border-radius:12px;overflow:hidden;border:none;">
      <div class="modal-header" style="background:#1e293b;border:none;padding:12px 18px;">
        <div style="display:flex;align-items:center;gap:10px;">
          <i class="fa fa-file-pdf" style="color:#ef4444;font-size:18px;"></i>
          <span style="color:#f1f5f9;font-weight:700;font-size:14px;">Mi Trabajo de Investigación</span>
        </div>
        <div style="display:flex;align-items:center;gap:8px;margin-left:auto;">
          <a id="pdf-modal-download" href="#" download
            style="font-size:12px;font-weight:600;padding:5px 12px;border-radius:6px;background:#334155;color:#94a3b8;text-decoration:none;">
            <i class="fa fa-download me-1"></i>Descargar
          </a>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
      </div>
      <div class="modal-body" style="padding:0;background:#0f172a;">
        <iframe id="pdf-modal-iframe" src="" style="width:100%;height:82vh;border:none;display:block;"></iframe>
      </div>
    </div>
  </div>
</div>

<script>
function verPDF(url) {
  document.getElementById('pdf-modal-iframe').src = url;
  document.getElementById('pdf-modal-download').href = url;
  new bootstrap.Modal(document.getElementById('modalVerPDF')).show();
}
// Limpiar iframe al cerrar para evitar que siga cargando
document.getElementById('modalVerPDF').addEventListener('hidden.bs.modal', function () {
  document.getElementById('pdf-modal-iframe').src = '';
});
</script>
</body>
</html>