<?php
ob_start(); // Evita "headers already sent" al hacer redirect desde cualquier punto
// modules/estudiante/mi_vinculacion.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);
$idInst = instId();

$user=currentUser();$db=getDB();$pageTitle='Mi Vinculacion';
$minMiembros=(int)(getConfig('min_estudiantes_grupo_vinculacion','2'));
$maxMiembros=(int)(getConfig('max_estudiantes_grupo_vinculacion','6'));

$est=$db->prepare("SELECT e.*,c.horas_minimas_vinculacion,c.nombre AS carrera_nombre FROM estudiantes e LEFT JOIN carreras c ON c.id_carrera=e.id_carrera WHERE e.id_usuario=:u");
$est->execute([':u'=>$user['id']]);$est=$est->fetch();
$idEst=$est?$est['id_estudiante']:0;
$horasMinVinc=(int)($est['horas_minimas_vinculacion']??160);

$grupo=null;$esLider=false;
if($idEst){
  $qg=$db->prepare("SELECT g.*,COALESCE(ob.nombre,g.org_nueva_nombre) AS organizacion,COALESCE(ob.canton,g.org_nueva_canton) AS org_canton,pe.nombre AS periodo_nombre,CONCAT(ut.nombres,' ',ut.apellidos) AS tutor_nombre,ut.email AS tutor_email,CONCAT(ul.nombres,' ',ul.apellidos) AS lider_nombre,m.rol FROM miembros_grupo_vinculacion m JOIN grupos_vinculacion g ON g.id_grupo=m.id_grupo JOIN periodos_academicos pe ON pe.id_periodo=g.id_periodo LEFT JOIN organizaciones_beneficiarias ob ON ob.id_organizacion=g.id_organizacion LEFT JOIN tutores t ON t.id_tutor=g.id_tutor LEFT JOIN usuarios ut ON ut.id_usuario=t.id_usuario JOIN estudiantes el ON el.id_estudiante=g.id_lider JOIN usuarios ul ON ul.id_usuario=el.id_usuario WHERE m.id_estudiante=:e AND m.estado='activo' AND g.estado NOT IN ('completado') ORDER BY g.created_at DESC LIMIT 1");
  $qg->execute([':e'=>$idEst]);$grupo=$qg->fetch();
  $esLider=$grupo&&$grupo['id_lider']==$idEst;
}
$puedeCrear=!$grupo;

$uploadDir=UPLOAD_PATH.DIRECTORY_SEPARATOR.'vinculacion_grupos';
if(!is_dir($uploadDir))mkdir($uploadDir,0755,true);

// ── Helper: validación segura de archivos (3 capas) ──────────────
// Capa 1: extensión del nombre
// Capa 2: MIME type real con finfo (lee bytes internos, ignora el nombre)
// Capa 3: magic bytes — firma hexadecimal real al inicio del archivo
// Retorna '' si todo ok, o el mensaje de error si falla alguna capa.
if (!function_exists('validarArchivoSeguro')) {
    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.';
    }
}

if (!defined('MAGIC_VINC')) {
    define('MAGIC_VINC', [
        'pdf'  => ['bytes' => '%PDF-',               'len' => 5],
        'jpg'  => ['bytes' => "\xFF\xD8\xFF",         'len' => 3],
        'jpeg' => ['bytes' => "\xFF\xD8\xFF",         'len' => 3],
        'png'  => ['bytes' => "\x89PNG",              'len' => 4],
        'doc'  => ['bytes' => "\xD0\xCF\x11\xE0",    'len' => 4],
        'docx' => ['bytes' => "PK\x03\x04",           'len' => 4],
    ]);
}

if($_SERVER['REQUEST_METHOD']==='POST'&&$puedeCrear&&$idEst){
  $tipoOrg=$_POST['tipo_org']??'catalogo';
  $idPer=(int)($_POST['id_periodo']??0);
  $idOrg=(int)($_POST['id_organizacion']??0);
  $nombreProy=trim($_POST['nombre_proyecto']??'');
  $desc=trim($_POST['descripcion']??'');
  $obj=trim($_POST['objetivo']??'');
  $area=trim($_POST['area']??'');
  $horas=(int)($_POST['horas_requeridas']??$horasMinVinc);
  $fi=$_POST['fecha_inicio']??'';$ff=$_POST['fecha_fin']??'';
  $miembrosIds=array_map('intval',(array)($_POST['miembros']??[]));
  $orgNombre=trim($_POST['org_nombre']??'');$orgTipo=$_POST['org_tipo']??'comunitaria';
  $orgCanton=trim($_POST['org_canton']??'');$orgProv=trim($_POST['org_provincia']??'');
  $orgSector=trim($_POST['org_sector']??'');$orgDir=trim($_POST['org_direccion']??'');
  $orgCNom=trim($_POST['org_contacto_nombre']??'');$orgCargo=trim($_POST['org_contacto_cargo']??'');
  $orgCEmail=trim($_POST['org_contacto_email']??'');$orgCTel=trim($_POST['org_contacto_tel']??'');

  $errores=[];
  if(!$idPer) $errores[]='Selecciona un periodo academico.';
  if(!$nombreProy) $errores[]='Ingresa el nombre del proyecto.';
  if($horas<40) $errores[]='Las horas deben ser al menos 40.';
  if($tipoOrg==='catalogo'&&!$idOrg) $errores[]='Selecciona una organizacion del catalogo.';
  if($tipoOrg==='nueva'){if(!$orgNombre)$errores[]='Ingresa el nombre de la organizacion.';if(!$orgCanton)$errores[]='Ingresa el canton.';}

  $miembrosIds=array_values(array_unique(array_filter($miembrosIds)));
  $miembrosIds=array_diff($miembrosIds,[$idEst]);
  $totalInt=count($miembrosIds)+1;
  if($totalInt<$minMiembros) $errores[]="El grupo debe tener al menos {$minMiembros} integrantes. Actualmente: {$totalInt}.";
  if($totalInt>$maxMiembros) $errores[]="El grupo no puede tener mas de {$maxMiembros} integrantes. Actualmente: {$totalInt}.";

  if(!$errores&&count($miembrosIds)>0){
    $inIds=implode(',',array_map('intval',$miembrosIds));
    $idCarreraLider=(int)($est['id_carrera']??0);
    // Verificar que todos sean de la misma carrera E instituto del líder
    $otraCarrera=$db->query("SELECT m.id_estudiante FROM estudiantes m WHERE m.id_estudiante IN ({$inIds}) AND (m.id_carrera<>{$idCarreraLider} OR m.id_instituto<>{$idInst})")->fetchAll();
    if($otraCarrera){$errores[]='Solo puedes agregar estudiantes de tu misma carrera e instituto.';}
    // Verificar que ninguno esté ya en un grupo activo
    $yaEnGrupo=$db->query("SELECT m.id_estudiante,CONCAT(u.nombres,' ',u.apellidos) AS nombre FROM miembros_grupo_vinculacion m JOIN grupos_vinculacion g ON g.id_grupo=m.id_grupo JOIN estudiantes e ON e.id_estudiante=m.id_estudiante JOIN usuarios u ON u.id_usuario=e.id_usuario WHERE m.id_estudiante IN ({$inIds}) AND m.estado='activo' AND g.estado NOT IN ('completado')")->fetchAll();
    if($yaEnGrupo){$nombres=implode(', ',array_column($yaEnGrupo,'nombre'));$errores[]="Ya pertenecen a un grupo: {$nombres}.";}
  }

  $docPath=null;
  if(!empty($_FILES['doc_propuesta']['name'])){
    $file=$_FILES['doc_propuesta'];
    if($file['error']!==UPLOAD_ERR_OK){
      $errores[]='Error al recibir el archivo.';
    }elseif($file['size']>5*1024*1024){
      $errores[]='Documento max 5MB.';
    }else{
      // Validación 3 capas: extensión + MIME real + magic bytes
      $errArchivo=validarArchivoSeguro(
        $file,
        ['pdf','doc','docx'],
        ['application/pdf','application/msword','application/vnd.openxmlformats-officedocument.wordprocessingml.document','application/zip'],
        array_values(array_intersect_key(MAGIC_VINC,array_flip(['pdf','doc','docx'])))
      );
      if($errArchivo){
        $errores[]=$errArchivo;
      }else{
        $ext=strtolower(pathinfo($file['name'],PATHINFO_EXTENSION));
        $fname='gv_'.$idEst.'_'.time().'.'.$ext;
        try { $docPath = OneDriveStorage::upload($file['tmp_name'], 'vinculacion_grupos', $fname, null, $idInst); }
        catch(Exception $e) { $errores[]='No se pudo guardar el documento: '.$e->getMessage(); }
      }
    }
  }elseif($tipoOrg==='nueva'){$errores[]='Debes subir la carta de acuerdo con la organizacion.';}

  if(!$errores){
    $db->beginTransaction();
    try{
      $idOrgFinal=$tipoOrg==='catalogo'?$idOrg:null;
      $onDB=$tipoOrg==='nueva'?$orgNombre:null;$otDB=$tipoOrg==='nueva'?$orgTipo:null;
      $ocaDB=$tipoOrg==='nueva'?$orgCanton:null;$oprDB=$tipoOrg==='nueva'?$orgProv:null;
      $osDB=$tipoOrg==='nueva'?$orgSector:null;$odDB=$tipoOrg==='nueva'?$orgDir:null;
      $ocnDB=$tipoOrg==='nueva'?$orgCNom:null;$occDB=$tipoOrg==='nueva'?$orgCargo:null;
      $oceDB=$tipoOrg==='nueva'?$orgCEmail:null;$octDB=$tipoOrg==='nueva'?$orgCTel:null;

      $db->prepare("INSERT INTO grupos_vinculacion (id_periodo,id_instituto,id_lider,id_organizacion,org_nueva_nombre,org_nueva_tipo,org_nueva_canton,org_nueva_provincia,org_nueva_sector,org_nueva_direccion,org_nueva_contacto_nombre,org_nueva_contacto_cargo,org_nueva_contacto_email,org_nueva_contacto_tel,nombre_proyecto,descripcion,objetivo_general,area,horas_requeridas,fecha_inicio,fecha_fin,documento_propuesta,estado) VALUES (:per,:inst,:lid,:org,:on,:ot,:oca,:opr,:os,:od,:ocn,:occ,:oce,:oct,:nom,:desc,:obj,:area,:hrs,:fi,:ff,:doc,'pendiente')")
        ->execute([':per'=>$idPer,':inst'=>$idInst,':lid'=>$idEst,':org'=>$idOrgFinal,':on'=>$onDB,':ot'=>$otDB,':oca'=>$ocaDB,':opr'=>$oprDB,':os'=>$osDB,':od'=>$odDB,':ocn'=>$ocnDB,':occ'=>$occDB,':oce'=>$oceDB,':oct'=>$octDB,':nom'=>$nombreProy,':desc'=>$desc?:null,':obj'=>$obj?:null,':area'=>$area?:null,':hrs'=>$horas,':fi'=>$fi?:null,':ff'=>$ff?:null,':doc'=>$docPath]);
      $idGrupo=(int)$db->lastInsertId();
      $db->prepare("INSERT INTO miembros_grupo_vinculacion (id_grupo,id_estudiante,rol) VALUES (:g,:e,'lider')")->execute([':g'=>$idGrupo,':e'=>$idEst]);
      $stM=$db->prepare("INSERT INTO miembros_grupo_vinculacion (id_grupo,id_estudiante,rol) VALUES (:g,:e,'miembro')");
      foreach($miembrosIds as $idM){$stM->execute([':g'=>$idGrupo,':e'=>$idM]);}
      $db->commit();
      registrarAudit($user['id'],'crear_grupo_vinculacion','grupos_vinculacion',$idGrupo);

      // ── Notificar a todos los coordinadores del mismo instituto ──
      try {
          $stCoordsV = $db->prepare("
              SELECT u.id_usuario FROM coordinadores co
              JOIN usuarios u ON u.id_usuario = co.id_usuario
              JOIN coordinador_carrera cc ON cc.id_coordinador = co.id_coordinador
              JOIN carreras car ON car.id_carrera = cc.id_carrera
              WHERE car.id_instituto = :inst AND u.activo = 1
          ");
          $stCoordsV->execute([':inst' => $idInst]);
          $coordsV = $stCoordsV->fetchAll(PDO::FETCH_COLUMN);
          $nombreLider = trim(($est['apellidos'] ?? '') . ' ' . ($est['nombres'] ?? '')) ?: $user['nombre'];
          $stNotifV = $db->prepare("
              INSERT INTO notificaciones (id_usuario, asunto, mensaje, leida, created_at)
              VALUES (:uid, :asunto, :msg, 0, NOW())
          ");
          foreach ($coordsV as $idCoordUserV) {
              $stNotifV->execute([
                  ':uid'    => $idCoordUserV,
                  ':asunto' => 'Nuevo grupo de vinculación',
                  ':msg'    => "El estudiante {$nombreLider} creó un grupo de vinculación comunitaria pendiente de revisión.",
              ]);
          }
      } catch (Exception $exV) { /* no bloquear si falla notif */ }

      flashSet('ok','Grupo creado exitosamente. La coordinadora revisara tu propuesta.');
      header('Location: mi_vinculacion.php');exit;
    }catch(Exception $ex){$db->rollBack();$errores[]='Error al guardar. Intenta nuevamente.';}
  }
  if($errores)flashSet('err',implode('<br>',$errores));
}

$organizaciones=$db->query("SELECT id_organizacion,nombre,tipo,canton FROM organizaciones_beneficiarias WHERE activa=1 ORDER BY nombre")->fetchAll();
$periodos=$db->query("SELECT id_periodo,nombre FROM periodos_academicos WHERE 1=1" . instCond() . " AND activo=1 ORDER BY nombre DESC")->fetchAll();
$idCarreraLider=(int)($est['id_carrera']??0);
$semestreLider=$est['semestre_actual']??null;
$disponibles=$db->prepare("SELECT e.id_estudiante,CONCAT(u.apellidos,' ',u.nombres) AS nombre_completo,c.nombre AS carrera,e.codigo_estudiante,
  (CASE WHEN EXISTS(SELECT 1 FROM miembros_grupo_vinculacion m2 JOIN grupos_vinculacion g2 ON g2.id_grupo=m2.id_grupo WHERE m2.id_estudiante=e.id_estudiante AND m2.estado='activo' AND g2.estado NOT IN ('completado')) THEN 1 ELSE 0 END) AS ya_en_grupo
  FROM estudiantes e JOIN usuarios u ON u.id_usuario=e.id_usuario JOIN carreras c ON c.id_carrera=e.id_carrera
  WHERE u.activo=1
    AND e.id_estudiante <> :me
    AND e.id_carrera = :car
    AND e.id_instituto = :inst
    AND (:sem IS NULL OR e.semestre_actual = :sem2)
  ORDER BY ya_en_grupo ASC,u.apellidos,u.nombres");
$disponibles->execute([':me'=>$idEst,':car'=>$idCarreraLider,':inst'=>$idInst,':sem'=>$semestreLider,':sem2'=>$semestreLider]);
$disponibles=$disponibles->fetchAll();

$miembros=[];$bitacoras=[];
if($grupo){
  $qm=$db->prepare("SELECT m.*,CONCAT(u.apellidos,' ',u.nombres) AS nombre_completo,c.nombre AS carrera,e.codigo_estudiante FROM miembros_grupo_vinculacion m JOIN estudiantes e ON e.id_estudiante=m.id_estudiante JOIN usuarios u ON u.id_usuario=e.id_usuario JOIN carreras c ON c.id_carrera=e.id_carrera WHERE m.id_grupo=:g AND m.estado='activo' ORDER BY m.rol DESC,u.apellidos");
  $qm->execute([':g'=>$grupo['id_grupo']]);$miembros=$qm->fetchAll();
  $qb=$db->prepare("SELECT b.*,COUNT(s.id_seccion) AS total_secciones FROM bitacoras_grupo_vinculacion b LEFT JOIN secciones_bitacora_vinculacion s ON s.id_bitacora=b.id_bitacora WHERE b.id_grupo=:g GROUP BY b.id_bitacora ORDER BY b.semana_numero DESC");
  $qb->execute([':g'=>$grupo['id_grupo']]);$bitacoras=$qb->fetchAll();
}

$nuevaSemana=$bitacoras?max(array_column($bitacoras,'semana_numero'))+1:1;
$hoy=new DateTime();$dow=(int)$hoy->format('N');
$lunes=$dow===1?clone $hoy:(clone $hoy)->modify('+'.(8-$dow).' days');
$viernes=(clone $lunes)->modify('+4 days');
$pct=$grupo&&$grupo['horas_requeridas']>0?min(100,round($grupo['horas_cumplidas']/$grupo['horas_requeridas']*100)):0;
$pcColor=$pct>=80?'#3dffa0':($pct>=40?'#f7b93e':'#2ea8ff');
$eColor=['pendiente'=>'#f7b93e','aprobado'=>'#3dffa0','en_progreso'=>'#2ea8ff','completado'=>'#c792ea'];
?>
<?php $paginaActual = 'vinculacion_bitacoras'; ?>
<!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>
.sec-tipo{display:none}.sec-tipo.on{display:block}
.tab-tipo{display:flex;gap:8px;margin-bottom:18px}
.tab-tipo input[type=radio]{display:none}
.tab-tipo label{cursor:pointer;padding:8px 20px;border-radius:8px;border:1px solid #e2e8f0;font-size:14px;color:#64748b;transition:.2s}
.tab-tipo input[type=radio]:checked+label{border-color:#16a34a;color:#16a34a;background:#f0fdf4}
.lbl-s{font-size:12px;color:#64748b;font-weight:700;letter-spacing:.6px;margin-bottom:10px;text-transform:uppercase}
.mtag{display:inline-flex;align-items:center;gap:6px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:20px;padding:4px 12px;font-size:12px;margin:3px;color:#1e40af}
.mtag.lider{border-color:#fde68a;background:#fffbeb;color:#92400e}
.bit-row{cursor:pointer}.bit-row:hover td{background:rgba(46,168,255,.05)}
.doc-link{display:inline-flex;align-items:center;gap:6px;background:#1c2a3a;border:1px solid #2ea8ff44;border-radius:8px;padding:6px 14px;font-size:13px;color:#2ea8ff;text-decoration:none}
</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-estudiante.php'; ?>
<main class="main-area">
  <div class="page-header">
    <h4><i class="fa fa-handshake me-2" style="color:#16a34a"></i>Mi Vinculacion con la Comunidad</h4>
    <p><?=$grupo?'Estado de tu grupo de vinculacion':'Crea tu grupo de vinculacion comunitaria'?></p>
  </div>
  <?=flashHtml()?>

<?php if($grupo):
  $ec=$eColor[$grupo['estado']]??'#8b949e';?>
  <div class="tbl-wrap p-4 mb-4" style="background:#ffffff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 1px 6px rgba(0,0,0,.06);">
    <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-3">
      <div>
        <h5 class="mb-1" style="color:#0f172a;"><?=htmlspecialchars($grupo['nombre_proyecto'])?></h5>
        <div style="font-size:13px;color:#64748b;"><i class="fa fa-building me-1"></i><?=htmlspecialchars($grupo['organizacion'])?><?=$grupo['org_canton']?' &middot; '.htmlspecialchars($grupo['org_canton']):''?></div>
        <div style="font-size:12px;color:#94a3b8;margin-top:3px;"><i class="fa fa-calendar me-1"></i><?=htmlspecialchars($grupo['periodo_nombre'])?></div>
      </div>
      <div class="text-end">
        <span style="font-size:11px;padding:4px 12px;border-radius:20px;font-weight:700;background:<?=$ec?>22;color:<?=$ec?>;border:1px solid <?=$ec?>55;">&#9679; <?=ucfirst($grupo['estado'])?></span>
        <?php if($esLider):?><div style="font-size:10px;color:#d97706;margin-top:4px;"><i class="fa fa-crown me-1"></i>Eres el líder</div><?php endif;?>
      </div>
    </div>
    <div class="row g-3 mb-3">
      <div class="col-md-6">
        <div style="font-size:11px;color:#94a3b8;font-weight:700;margin-bottom:5px;">PROGRESO DE HORAS</div>
        <div style="font-size:22px;font-weight:800;color:<?=$pcColor?>"><?=$grupo['horas_cumplidas']?>/<?=$grupo['horas_requeridas']?>h</div>
        <div style="background:#e2e8f0;border-radius:6px;height:8px;margin-top:6px;">
          <div style="width:<?=$pct?>%;height:8px;border-radius:6px;background:<?=$pcColor?>"></div>
        </div>
        <div style="font-size:11px;color:#94a3b8;margin-top:3px;"><?=$pct?>% completado</div>
      </div>
      <div class="col-md-6">
        <div style="font-size:11px;color:#94a3b8;font-weight:700;margin-bottom:5px;">TUTOR ASIGNADO</div>
        <?php if($grupo['tutor_nombre']):?>
          <div style="font-weight:600;color:#0f172a;"><?=htmlspecialchars($grupo['tutor_nombre'])?></div>
          <div style="font-size:12px;color:#64748b;"><?=htmlspecialchars($grupo['tutor_email']??'')?></div>
        <?php else:?><div style="color:#d97706;font-size:13px;"><i class="fa fa-clock me-1"></i>Pendiente de asignación</div><?php endif;?>
      </div>
    </div>
    <div style="font-size:11px;color:#94a3b8;font-weight:700;margin-bottom:8px;">INTEGRANTES (<?=count($miembros)?>)</div>
    <div class="mb-3">
      <?php foreach($miembros as $m):?>
      <span class="mtag <?=$m['rol']==='lider'?'lider':''?>">
        <?php if($m['rol']==='lider'):?><i class="fa fa-crown" style="font-size:10px"></i><?php endif;?>
        <?=htmlspecialchars($m['nombre_completo'])?> <span style="font-size:10px;opacity:.7">(<?=htmlspecialchars($m['codigo_estudiante'])?>)</span>
      </span>
      <?php endforeach;?>
    </div>
    <?php if($grupo['documento_propuesta']):?>
    <a href="<?=UPLOAD_URL?>/<?=htmlspecialchars($grupo['documento_propuesta'])?>" target="_blank" style="display:inline-flex;align-items:center;gap:6px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:6px 14px;font-size:13px;color:#1d4ed8;text-decoration:none;"><i class="fa fa-file-pdf"></i> Ver propuesta</a>
    <?php endif;?>
    <?php if($grupo['estado']==='pendiente'):?>
    <!-- ══ INDICADOR DE FLUJO: Pendiente → Facturación → Coordinación ══ -->
    <div style="margin-top:16px;">
      <!-- Mensaje principal -->
      <div style="background:#fffbeb;border:1px solid #fde68a;border-radius:10px 10px 0 0;padding:12px 16px;font-size:13px;color:#92400e;">
        <i class="fa fa-clock me-2"></i><strong>Tu propuesta está en revisión.</strong>
        Completa el pago y envía el comprobante a <strong>Facturación</strong> para continuar con la aprobación.
      </div>
      <!-- Flujo visual de estados -->
      <div style="background:#f8fafc;border:1px solid #fde68a;border-top:none;border-radius:0 0 10px 10px;padding:14px 16px;">
        <div style="font-size:10px;font-weight:700;color:#94a3b8;letter-spacing:.7px;text-transform:uppercase;margin-bottom:10px;">Flujo de aprobación</div>
        <div style="display:flex;align-items:center;flex-wrap:wrap;gap:4px;">

          <!-- Paso 1: Pendiente (actual) -->
          <div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:90px;">
            <div style="background:#fef3c7;border:2px solid #f59e0b;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;">
              <i class="fa fa-hourglass-half" style="color:#d97706;font-size:14px;"></i>
            </div>
            <span style="font-size:10px;font-weight:700;color:#d97706;text-align:center;line-height:1.2;">Pendiente<br><span style="font-weight:400;color:#92400e;">← Estás aquí</span></span>
          </div>

          <i class="fa fa-chevron-right" style="color:#cbd5e1;font-size:12px;"></i>

          <!-- Paso 2: Facturación -->
          <div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:90px;">
            <div style="background:#eff6ff;border:2px solid #93c5fd;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;">
              <i class="fa fa-file-invoice-dollar" style="color:#3b82f6;font-size:14px;"></i>
            </div>
            <span style="font-size:10px;font-weight:700;color:#3b82f6;text-align:center;line-height:1.2;">Facturación<br><span style="font-weight:400;color:#64748b;">Valida el pago</span></span>
          </div>

          <i class="fa fa-chevron-right" style="color:#cbd5e1;font-size:12px;"></i>

          <!-- Paso 3: Coordinación -->
          <div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:90px;">
            <div style="background:#f3f4f6;border:2px solid #d1d5db;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;">
              <i class="fa fa-user-tie" style="color:#9ca3af;font-size:14px;"></i>
            </div>
            <span style="font-size:10px;font-weight:700;color:#9ca3af;text-align:center;line-height:1.2;">Coordinación<br><span style="font-weight:400;">Aprueba y asigna tutor</span></span>
          </div>

          <i class="fa fa-chevron-right" style="color:#cbd5e1;font-size:12px;"></i>

          <!-- Paso 4: Aprobado -->
          <div style="display:flex;flex-direction:column;align-items:center;gap:4px;min-width:90px;">
            <div style="background:#f3f4f6;border:2px solid #d1d5db;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;">
              <i class="fa fa-circle-check" style="color:#9ca3af;font-size:14px;"></i>
            </div>
            <span style="font-size:10px;font-weight:700;color:#9ca3af;text-align:center;line-height:1.2;">Aprobado<br><span style="font-weight:400;">En progreso</span></span>
          </div>

        </div>
        <div style="margin-top:10px;font-size:11px;color:#64748b;">
          <i class="fa fa-circle-info me-1" style="color:#3b82f6;"></i>
          El siguiente paso es subir el <strong>comprobante de pago</strong> (sección de abajo). Facturación lo validará y tu grupo pasará automáticamente a revisión de Coordinación.
        </div>
      </div>
    </div>
    <!-- fin indicador de flujo -->
    <?php endif;?>

    <!-- ══ BLOQUE PAGO VINCULACIÓN ══ -->
    <?php
    $stPrecioVinc = $db->prepare("SELECT valor FROM configuracion_institucional WHERE id_instituto=:id AND clave='precio_vinculacion'");
    $stPrecioVinc->execute([':id' => instId()]);
    $precioVincEst = number_format((float)($stPrecioVinc->fetchColumn() ?: '0.00'), 2);
    $estPagoVinc   = $grupo['estado_pago']    ?? 'pendiente';
    $compVinc      = $grupo['comprobante_pago'] ?? null;
    $obsPagoVinc   = $grupo['obs_pago']         ?? null;
    $esLider       = ($grupo['rol'] ?? '') === 'lider';
    // Manejar POST de comprobante
    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['accion_pago_vinc']) && $esLider) {
        if (in_array($estPagoVinc, ['pendiente','rechazado'])) {
            if (!empty($_FILES['comprobante_pago_vinc']['name'])) {
                $fv  = $_FILES['comprobante_pago_vinc'];
                if ($fv['error'] !== UPLOAD_ERR_OK) {
                    flashSet('err', 'Error al recibir el archivo.');
                } elseif ($fv['size'] > 5*1024*1024) {
                    flashSet('err', 'El archivo no puede superar 5 MB.');
                } else {
                    // Validación 3 capas: extensión + MIME real + magic bytes
                    $errArchivo = validarArchivoSeguro(
                        $fv,
                        ['pdf','jpg','jpeg','png'],
                        ['application/pdf','image/jpeg','image/png'],
                        array_values(array_intersect_key(MAGIC_VINC, array_flip(['pdf','jpg','jpeg','png'])))
                    );
                    if ($errArchivo) {
                        flashSet('err', $errArchivo);
                    } else {
                        $exv  = strtolower(pathinfo($fv['name'], PATHINFO_EXTENSION));
                        $fnv = 'comp_vinc_' . $idEst . '_' . time() . '.' . $exv;
                        try {
                            OneDriveStorage::upload($fv['tmp_name'], 'comprobantes_vinculacion', $fnv, null, $idInst);
                            $db->prepare("UPDATE grupos_vinculacion SET comprobante_pago=:c, estado_pago='enviada', updated_at=NOW() WHERE id_grupo=:g")
                               ->execute([':c'=>$fnv,':g'=>$grupo['id_grupo']]);
                            flashSet('ok', '✅ Comprobante enviado a Facturación.');
                            header('Location: mi_vinculacion.php'); exit;
                        } catch(Exception $e) {
                            flashSet('err', 'Error al subir a OneDrive: '.$e->getMessage());
                        }
                    }
                }
            } else {
                flashSet('err', 'Selecciona el archivo a subir.');
            }
            header('Location: mi_vinculacion.php'); exit;
        }
    }
    ?>
    <div style="background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:1.2rem 1.5rem;margin-top:16px;box-shadow:0 1px 4px rgba(0,0,0,.04);">
      <div style="font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#94a3b8;margin-bottom:12px;">
        <i class="fa fa-file-invoice-dollar me-2"></i>Comprobante de Pago
        <?php if (!$esLider): ?><span style="font-size:10px;font-weight:400;color:#94a3b8;"> — Solo el líder puede subir el comprobante</span><?php endif; ?>
      </div>

      <?php if ($estPagoVinc === 'aprobado'): ?>
        <div style="background:#f0fdf4;border:1px solid #86efac;border-radius:10px;padding:.85rem 1rem;display:flex;align-items:center;gap:10px;">
          <i class="fa fa-circle-check" style="color:#059669;font-size:1.4rem;"></i>
          <div>
            <div style="font-weight:700;color:#065f46;">Pago validado por Facturación</div>
            <div style="font-size:12px;color:#059669;"><?= ($grupo['exonerado'] ?? 0) ? '<i class="fa fa-star me-1"></i>Exonerado — $0.00' : "Monto: $$precioVincEst" ?></div>
          </div>
        </div>
      <?php elseif ($estPagoVinc === 'enviada'): ?>
        <div style="background:#eff6ff;border:1px solid #93c5fd;border-radius:10px;padding:.85rem 1rem;">
          <div style="font-weight:700;color:#1e40af;"><i class="fa fa-clock me-2"></i>Comprobante en revisión</div>
          <div style="font-size:12px;color:#3b82f6;margin-top:4px;">Facturación validará pronto.</div>
        </div>
      <?php elseif ($estPagoVinc === 'rechazado'): ?>
        <div style="background:#fef2f2;border:1px solid #fca5a5;border-radius:10px;padding:.85rem 1rem;margin-bottom:12px;">
          <div style="font-weight:700;color:#991b1b;"><i class="fa fa-circle-xmark me-2"></i>Comprobante rechazado</div>
          <?php if ($obsPagoVinc): ?><div style="font-size:12px;color:#dc2626;margin-top:4px;">Motivo: <?= htmlspecialchars($obsPagoVinc) ?></div><?php endif; ?>
        </div>
        <?php if ($esLider): ?>
        <form method="POST" enctype="multipart/form-data">
          <input type="hidden" name="accion_pago_vinc" value="1">
          <input type="file" name="comprobante_pago_vinc" class="form-control form-control-sm mb-2" accept=".pdf,.jpg,.jpeg,.png" required>
          <button type="submit" class="btn btn-warning btn-sm"><i class="fa fa-upload me-1"></i>Reenviar comprobante</button>
        </form>
        <?php endif; ?>
      <?php else: /* pendiente */ ?>
        <?php if ($esLider): ?>
        <?php if ($precioVincEst > 0): ?>
          <p style="font-size:13px;color:#475569;margin-bottom:10px;">Realiza el depósito de <strong>$<?= $precioVincEst ?></strong> y adjunta el comprobante. Si son exonerados, sube el PDF que lo acredita ($0.00).</p>
        <?php else: ?>
          <p style="font-size:13px;color:#475569;margin-bottom:10px;">Sube el comprobante o PDF de exoneración ($0.00).</p>
        <?php endif; ?>
        <div style="background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:8px 12px;font-size:12px;color:#92400e;margin-bottom:10px;">
          <i class="fa fa-star me-1"></i>Exonerados: sube el PDF y Facturación lo marcará como $0.00.
        </div>
        <form method="POST" enctype="multipart/form-data">
          <input type="hidden" name="accion_pago_vinc" value="1">
          <input type="file" name="comprobante_pago_vinc" class="form-control form-control-sm mb-2" accept=".pdf,.jpg,.jpeg,.png" required>
          <div style="font-size:11px;color:#94a3b8;margin-bottom:8px;">PDF, JPG o PNG · Máx. 5 MB</div>
          <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-paper-plane me-1"></i>Enviar comprobante</button>
        </form>
        <?php else: ?>
        <div style="font-size:13px;color:#64748b;">Esperando que el líder del grupo suba el comprobante de pago.</div>
        <?php endif; ?>
      <?php endif; ?>
    </div>
    <!-- fin bloque pago vinculación -->
  </div>

  <?php if(in_array($grupo['estado'],['aprobado','en_progreso'])):?>
  <div class="tbl-wrap" style="background:#ffffff;border:1px solid #e2e8f0;border-radius:14px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,.06);">
    <div class="d-flex justify-content-between align-items-center p-3" style="border-bottom:1px solid #f1f5f9;">
      <div style="font-size:14px;font-weight:700;color:#0f172a;">
        <i class="fa fa-book-open me-2" style="color:#3b82f6;"></i>Bitácoras semanales del grupo
      </div>
      <?php if($esLider):?><button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modalSemana"><i class="fa fa-plus me-1"></i>Abrir semana</button><?php endif;?>
    </div>
    <table class="table table-borderless mb-0">
      <thead><tr><th>Semana</th><th>Periodo</th><th class="text-center">Secciones</th><th class="text-center">Horas grupo</th><th>Estado</th><th class="text-center">Ir</th></tr></thead>
      <tbody>
        <?php if(empty($bitacoras)):?>
        <tr><td colspan="6" class="text-center text-muted py-4"><?=$esLider?'Aun no hay bitacoras. Abre la primera semana.':'El lider aun no ha abierto ninguna semana.'?></td></tr>
        <?php else:foreach($bitacoras as $b):
          $editable=in_array($b['estado'],['borrador','observada']);
          $miYa=false;
          if($editable){$chk=$db->prepare("SELECT id_seccion FROM secciones_bitacora_vinculacion WHERE id_bitacora=:b AND id_estudiante=:e");$chk->execute([':b'=>$b['id_bitacora'],':e'=>$idEst]);$miYa=(bool)$chk->fetch();}
        ?>
        <tr class="bit-row" onclick="location='vinculacion.php?bit=<?=$b['id_bitacora']?>'">
          <td><strong>Semana <?=$b['semana_numero']?></strong><?php if($editable&&!$miYa):?> <span style="font-size:9px;padding:1px 6px;border-radius:4px;background:#fef3c7;color:#d97706;font-weight:700">FALTA TU APORTE</span><?php endif;?></td>
          <td style="font-size:12px;color:#8b949e"><?=formatFecha($b['fecha_inicio_semana'])?> - <?=formatFecha($b['fecha_fin_semana'])?></td>
          <td class="text-center" style="font-weight:600;color:#2ea8ff"><?=$b['total_secciones']?>/<?=count($miembros)?></td>
          <td class="text-center" style="font-weight:700"><?=$b['horas_totales_grupo']?>h</td>
          <td><?=badgeEstado($b['estado'])?></td>
          <td class="text-center" onclick="event.stopPropagation()"><a href="vinculacion.php?bit=<?=$b['id_bitacora']?>" class="btn btn-sm btn-outline-secondary"><i class="fa fa-<?=$editable?'pen-to-square':'eye'?>"></i></a></td>
        </tr>
        <?php endforeach;endif;?>
      </tbody>
    </table>
  </div>
  <?php if($esLider):?>
  <div class="modal fade" id="modalSemana" tabindex="-1"><div class="modal-dialog"><div class="modal-content">
    <div class="modal-header"><h5 class="modal-title"><i class="fa fa-calendar-week me-2"></i>Abrir semana <?=$nuevaSemana?></h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <form method="POST" action="vinculacion.php"><input type="hidden" name="accion" value="abrir_semana"><input type="hidden" name="id_grupo" value="<?=$grupo['id_grupo']?>">
      <div class="modal-body"><div class="row g-3">
        <div class="col-12"><label class="form-label">Numero de semana</label><input type="number" name="semana_numero" class="form-control" value="<?=$nuevaSemana?>" required min="1"></div>
        <div class="col-sm-6"><label class="form-label">Inicio (Lunes)</label><input type="date" name="fecha_inicio_semana" class="form-control" required value="<?=$lunes->format('Y-m-d')?>"></div>
        <div class="col-sm-6"><label class="form-label">Fin (Viernes)</label><input type="date" name="fecha_fin_semana" class="form-control" required value="<?=$viernes->format('Y-m-d')?>"></div>
      </div></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-primary"><i class="fa fa-calendar-plus me-1"></i>Abrir</button></div>
    </form>
  </div></div></div>
  <?php endif;?>
  <?php endif;?>

<?php else:?>
  <div class="tbl-wrap p-4" style="background:#ffffff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 1px 6px rgba(0,0,0,.06);">
    <h5 class="mb-1" style="color:#0f172a;"><i class="fa fa-plus-circle me-2" style="color:#16a34a;"></i>Crear grupo de vinculación</h5>
    <p style="font-size:13px;color:#64748b;margin-bottom:24px;">El grupo debe tener mínimo <strong style="color:#16a34a;"><?=$minMiembros?> integrantes</strong> (incluyéndote como líder). La información del proyecto se replica automáticamente a todos los miembros.</p>
    <form method="POST" enctype="multipart/form-data" id="fGrupo">
      <div class="lbl-s">Periodo academico</div>
      <div class="row g-3 mb-4"><div class="col-sm-5">
        <select name="id_periodo" class="form-select" required><option value="">-- selecciona periodo --</option>
        <?php foreach($periodos as $p):?><option value="<?=$p['id_periodo']?>"><?=htmlspecialchars($p['nombre'])?></option><?php endforeach;?>
        </select>
      </div></div>

      <div class="lbl-s">Organizacion beneficiaria</div>
      <div class="tab-tipo">
        <input type="radio" name="tipo_org" id="tCat" value="catalogo" checked onchange="toggleOrg()"><label for="tCat"><i class="fa fa-list me-1"></i> Del catalogo</label>
        <input type="radio" name="tipo_org" id="tNew" value="nueva" onchange="toggleOrg()"><label for="tNew"><i class="fa fa-plus-circle me-1"></i> Nueva organizacion</label>
      </div>
      <div id="sCat" class="sec-tipo on mb-4">
        <select name="id_organizacion" id="selOrg" class="form-select"><option value="">-- selecciona organizacion --</option>
        <?php foreach($organizaciones as $o):?><option value="<?=$o['id_organizacion']?>"><?=htmlspecialchars($o['nombre'])?> &middot; <?=ucfirst($o['tipo'])?><?=$o['canton']?' &middot; '.$o['canton']:''?></option><?php endforeach;?>
        </select>
      </div>
      <div id="sNew" class="sec-tipo mb-4">
        <div class="row g-3">
          <div class="col-sm-8"><label class="form-label">Nombre de la organizacion <span class="text-danger">*</span></label><input type="text" name="org_nombre" class="form-control" maxlength="250"></div>
          <div class="col-sm-4"><label class="form-label">Tipo</label><select name="org_tipo" class="form-select"><option value="comunitaria" selected>Comunitaria</option><option value="publica">Publica</option><option value="educativa">Educativa</option><option value="ong">ONG</option><option value="privada">Privada</option></select></div>
          <div class="col-sm-5"><label class="form-label">Canton <span class="text-danger">*</span></label><input type="text" name="org_canton" class="form-control" maxlength="100"></div>
          <div class="col-sm-4"><label class="form-label">Provincia</label><input type="text" name="org_provincia" class="form-control" maxlength="100"></div>
          <div class="col-sm-3"><label class="form-label">Sector</label><input type="text" name="org_sector" class="form-control" maxlength="120"></div>
          <div class="col-12"><label class="form-label">Direccion</label><input type="text" name="org_direccion" class="form-control" maxlength="250"></div>
          <div class="col-sm-4"><label class="form-label">Contacto</label><input type="text" name="org_contacto_nombre" class="form-control" maxlength="150" placeholder="Nombre"></div>
          <div class="col-sm-4"><label class="form-label">Cargo</label><input type="text" name="org_contacto_cargo" class="form-control" maxlength="100"></div>
          <div class="col-sm-4"><label class="form-label">Telefono</label><input type="text" name="org_contacto_tel" class="form-control" maxlength="20"></div>
          <div class="col-sm-6"><label class="form-label">Email contacto</label><input type="email" name="org_contacto_email" class="form-control" maxlength="150"></div>
        </div>
      </div>

      <hr style="border-color:#e2e8f0;margin:4px 0 20px">
      <div class="lbl-s">Datos del proyecto</div>
      <div class="row g-3 mb-4">
        <div class="col-12"><label class="form-label">Nombre del proyecto <span class="text-danger">*</span></label><input type="text" name="nombre_proyecto" class="form-control" maxlength="300" required placeholder="Ej: Capacitacion digital para adultos mayores en Tarqui"></div>
        <div class="col-sm-6"><label class="form-label">Area</label><input type="text" name="area" class="form-control" maxlength="150" placeholder="Ej: Tecnologia educativa"></div>
        <div class="col-sm-6"><label class="form-label">Horas requeridas <span class="text-danger">*</span></label><div class="input-group"><input type="number" name="horas_requeridas" class="form-control" min="40" max="2000" value="<?=$horasMinVinc?>"><span class="input-group-text">h</span></div></div>
        <div class="col-sm-6"><label class="form-label">Fecha inicio estimada</label><input type="date" name="fecha_inicio" class="form-control"></div>
        <div class="col-sm-6"><label class="form-label">Fecha fin estimada</label><input type="date" name="fecha_fin" class="form-control"></div>
        <div class="col-12"><label class="form-label">Descripcion del proyecto</label><textarea name="descripcion" class="form-control" rows="3" placeholder="En que consiste? A quien beneficia?"></textarea></div>
        <div class="col-12"><label class="form-label">Objetivo general</label><textarea name="objetivo" class="form-control" rows="2"></textarea></div>
      </div>

      <hr style="border-color:#e2e8f0;margin:4px 0 20px">
      <div class="lbl-s">Integrantes del grupo</div>
      <div style="background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:12px 16px;margin-bottom:14px;">
        <div style="display:flex;align-items:center;gap:10px;">
          <i class="fa fa-crown" style="color:#d97706;font-size:16px;"></i>
          <div>
            <div style="font-weight:700;font-size:14px;color:#1e293b;">
              <?=htmlspecialchars($user['nombre'] ?? '')?>
              <span style="font-size:11px;color:#d97706;font-weight:600;margin-left:6px;">(Tú — Líder)</span>
            </div>
            <div style="font-size:12px;color:#92400e;margin-top:2px;">
              <i class="fa fa-graduation-cap me-1"></i><?=htmlspecialchars($est['carrera_nombre']??'')?>
            </div>
          </div>
        </div>
      </div>
      <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-bottom:8px;">
        <label class="form-label mb-0">Selecciona los demas integrantes <span class="text-danger">*</span> <span style="font-size:11px;color:#8b949e;font-weight:400">— minimo <?=$minMiembros-1?> y maximo <?=$maxMiembros-1?> companeros (total: <?=$minMiembros?>–<?=$maxMiembros?>)</span></label>
        <div id="cntMiembros" style="font-size:13px;color:#8b949e"></div>
      </div>

      <?php if(empty($disponibles)):?>
      <div style="background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:12px;font-size:13px;color:#dc2626"><i class="fa fa-triangle-exclamation me-1"></i>No hay estudiantes disponibles de tu carrera en este momento.</div>
      <?php else:?>

      <!-- Panel de seleccionados (tags) -->
      <div id="panelTags" style="display:none;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:10px 14px;margin-bottom:10px;">
        <div style="font-size:11px;font-weight:700;color:#166534;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px;"><i class="fa fa-users me-1"></i>Integrantes seleccionados <span id="tagCount" style="background:#16a34a;color:#fff;border-radius:20px;padding:1px 8px;font-size:10px;margin-left:4px;"></span></div>
        <div id="contenedorTags" style="display:flex;flex-wrap:wrap;gap:6px;"></div>
      </div>

      <!-- Buscador -->
      <div style="position:relative;margin-bottom:8px;">
        <i class="fa fa-magnifying-glass" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:13px;pointer-events:none;"></i>
        <input type="text" id="buscadorEst" placeholder="Escribe nombre o codigo para buscar..." autocomplete="off"
          style="width:100%;padding:10px 90px 10px 36px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;outline:none;transition:.2s;"
          onfocus="this.style.borderColor='#16a34a'" onblur="this.style.borderColor='#e2e8f0'">
        <span id="contadorFiltro" style="position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:#94a3b8;white-space:nowrap;"></span>
      </div>

      <!-- Grid 2 columnas -->
      <div id="listaEstudiantes" style="display:block;">
        <div id="gridEstudiantes" style="display:grid;grid-template-columns:repeat(2,1fr);gap:8px;">
          <?php foreach($disponibles as $d):
            $ocupado=(int)$d['ya_en_grupo'];
          ?>
          <label data-nombre="<?=strtolower(htmlspecialchars($d['nombre_completo']))?>" data-codigo="<?=strtolower(htmlspecialchars($d['codigo_estudiante']))?>" data-ocupado="<?=$ocupado?>"
            style="display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid <?=$ocupado?'#e5e7eb':'#e2e8f0'?>;border-radius:8px;cursor:<?=$ocupado?'not-allowed':'pointer'?>;background:<?=$ocupado?'#f3f4f6':'#ffffff'?>;transition:.15s;min-width:0;<?=$ocupado?'opacity:0.6;filter:grayscale(0.3);':''?>" <?=$ocupado?'title="Ya pertenece a otro grupo activo"':''?>>
            <input type="checkbox" name="miembros[]" value="<?=$d['id_estudiante']?>"
              data-nombre="<?=htmlspecialchars($d['nombre_completo'])?>"
              class="chk-miembro" <?=$ocupado?'disabled':''?>
              style="width:15px;height:15px;accent-color:#16a34a;flex-shrink:0;cursor:<?=$ocupado?'not-allowed':'pointer'?>">
            <div style="flex:1;min-width:0;">
              <div style="font-size:12px;font-weight:600;color:<?=$ocupado?'#9ca3af':'#0f172a'?>;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;<?=$ocupado?'text-decoration:line-through;':''?>">
                <?=htmlspecialchars($d['nombre_completo'])?>
              </div>
              <div style="font-size:10px;color:<?=$ocupado?'#d1d5db':'#64748b'?>;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                <?=htmlspecialchars($d['codigo_estudiante'])?> &middot; <?=htmlspecialchars($d['carrera'])?>
              </div>
              <?php if($ocupado):?>
              <div style="font-size:9px;font-weight:700;color:#9ca3af;margin-top:3px;"><i class="fa fa-lock me-1"></i>Ya en otro grupo</div>
              <?php endif;?>
            </div>
            <?php if($ocupado):?>
            <i class="fa fa-ban" style="color:#d1d5db;font-size:13px;flex-shrink:0;"></i>
            <?php else:?>
            <i class="fa fa-circle-check chk-ico" style="color:#e2e8f0;font-size:15px;flex-shrink:0;transition:.2s;"></i>
            <?php endif;?>
          </label>
          <?php endforeach;?>
        </div>
        <div id="sinResultados" style="display:none;padding:24px;text-align:center;color:#94a3b8;font-size:13px;border:1px dashed #e2e8f0;border-radius:10px;margin-top:2px;">
          <i class="fa fa-circle-xmark me-1" style="font-size:20px;display:block;margin-bottom:8px;"></i>Sin resultados. Intenta con otro nombre o codigo.
        </div>
      </div>

      <!-- Leyenda -->
      <div style="display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:11px;color:#8b949e;">
        <span><i class="fa fa-info-circle me-1"></i>Solo estudiantes de tu carrera.</span>
        <span style="display:inline-flex;align-items:center;gap:4px;background:#fefce8;border:1px solid #fef08a;border-radius:20px;padding:1px 10px;color:#854d0e;"><i class="fa fa-lock me-1"></i>Ocupado — no seleccionable</span>
      </div>
      <?php endif;?>

      <hr style="border-color:#e2e8f0;margin:20px 0">
      <div class="lbl-s">Carta de acuerdo / propuesta <span id="docObl" style="color:#ff6b6b;font-size:11px;display:none">-- OBLIGATORIO org. nueva</span></div>
      <div class="row g-3 mb-4"><div class="col-md-7">
        <input type="file" name="doc_propuesta" class="form-control" accept=".pdf,.doc,.docx">
        <div class="form-text" style="color:#8b949e">PDF, DOC o DOCX. Max. 5 MB.</div>
      </div></div>

      <button type="submit" class="btn btn-primary btn-lg"><i class="fa fa-paper-plane me-2"></i>Enviar propuesta a coordinadora</button>
    </form>
  </div>
<?php endif;?>
</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 MIN=<?=$minMiembros?>;
var MAX=<?=$maxMiembros?>;

/* ── Toggle org ── */
function toggleOrg(){var n=document.getElementById('tNew').checked;document.getElementById('sCat').classList.toggle('on',!n);document.getElementById('sNew').classList.toggle('on',n);document.getElementById('selOrg').required=!n;document.getElementById('docObl').style.display=n?'inline':'none';['org_nombre','org_canton'].forEach(function(k){var e=document.querySelector('[name="'+k+'"]');if(e)e.required=n;});}

/* ── Tags de seleccionados ── */
function actualizarTags(){
  var contenedor=document.getElementById('contenedorTags');
  var panel=document.getElementById('panelTags');
  var tagCount=document.getElementById('tagCount');
  var seleccionados=document.querySelectorAll('.chk-miembro:not(:disabled):checked');
  contenedor.innerHTML='';
  if(seleccionados.length===0){panel.style.display='none';return;}
  panel.style.display='block';
  if(tagCount) tagCount.textContent=seleccionados.length;
  seleccionados.forEach(function(chk){
    var tag=document.createElement('span');
    tag.style.cssText='display:inline-flex;align-items:center;gap:6px;background:#dcfce7;border:1px solid #86efac;border-radius:20px;padding:4px 10px;font-size:12px;color:#166534;font-weight:600;';
    tag.innerHTML='<i class="fa fa-user" style="font-size:10px;"></i>'+chk.dataset.nombre+
      '<button type="button" onclick="deseleccionar('+chk.value+')" style="background:none;border:none;padding:0;cursor:pointer;color:#16a34a;font-size:13px;line-height:1;" title="Quitar"><i class="fa fa-xmark"></i></button>';
    contenedor.appendChild(tag);
  });
}

/* ── Quitar desde tag ── */
function deseleccionar(id){
  var chk=document.querySelector('.chk-miembro[value="'+id+'"]');
  if(chk){chk.checked=false;chk.dispatchEvent(new Event('change'));}
}

/* ── Contador integrantes ── */
function actCnt(){
  var sel=document.querySelectorAll('.chk-miembro:not(:disabled):checked');
  var c=sel.length+1;
  var ok=c>=MIN&&c<=MAX;
  var sobrePasado=c>MAX;
  var el=document.getElementById('cntMiembros');
  var color,bcolor,border,icon,msg;
  if(sobrePasado){color='#dc2626';bcolor='#fee2e2';border='#fca5a5';icon='xmark-circle';msg=c+' / max '+MAX+' — excedido';}
  else if(c>=MIN){color='#16a34a';bcolor='#dcfce7';border='#86efac';icon='check-circle';msg=c+' / '+MAX+' ✓';}
  else{color='#dc2626';bcolor='#fee2e2';border='#fca5a5';icon='xmark-circle';msg=c+' / '+MAX+' — faltan '+(MIN-c);}
  if(el)el.innerHTML='<span style="font-weight:700;padding:3px 12px;border-radius:20px;background:'+bcolor+';color:'+color+';border:1px solid '+border+';font-size:12px;"><i class="fa fa-'+icon+' me-1"></i>'+msg+'</span>';

  /* Bloquear checkboxes no seleccionados cuando se alcanza el máximo */
  var maxAlcanzado=(sel.length>=(MAX-1));
  document.querySelectorAll('.chk-miembro:not(:disabled)').forEach(function(chk){
    var lbl=chk.closest('label');
    var ico=lbl.querySelector('.chk-ico');
    if(!chk.checked&&maxAlcanzado){
      lbl.style.opacity='0.45';lbl.style.cursor='not-allowed';chk.disabled=true;
      /* marcamos con atributo para rehabilitar luego */
      chk.dataset.blockedByMax='1';
    } else if(!chk.checked&&chk.dataset.blockedByMax){
      lbl.style.opacity='';lbl.style.cursor='pointer';chk.disabled=false;
      delete chk.dataset.blockedByMax;
    }
    if(ico) ico.style.color=chk.checked?'#16a34a':'#e2e8f0';
    lbl.style.background=chk.checked?'#f0fdf4':'#ffffff';
    lbl.style.borderColor=chk.checked?'#86efac':'#e2e8f0';
  });
  actualizarTags();
}

/* ── Buscador: filtra sobre lista siempre visible ── */
document.getElementById('buscadorEst')?.addEventListener('input',function(){
  var q=this.value.trim().toLowerCase();
  var labels=document.querySelectorAll('#gridEstudiantes label[data-nombre]');
  var totalVisibles=0;
  labels.forEach(function(lbl){
    var coincide=!q||lbl.dataset.nombre.includes(q)||lbl.dataset.codigo.includes(q);
    lbl.style.display=coincide?'flex':'none';
    if(coincide) totalVisibles++;
  });
  var sinRes=document.getElementById('sinResultados');
  if(sinRes) sinRes.style.display=(totalVisibles===0&&q)?'block':'none';
  var cf=document.getElementById('contadorFiltro');
  if(cf) cf.textContent=q?(totalVisibles+' resultado'+(totalVisibles!==1?'s':'')):'';
});

/* ── Eventos checkboxes ── */
document.querySelectorAll('.chk-miembro').forEach(function(chk){
  chk.addEventListener('change',actCnt);
});

/* ── Validación submit ── */
document.getElementById('fGrupo')?.addEventListener('submit',function(e){
  var c=document.querySelectorAll('.chk-miembro:not(:disabled):checked').length+1;
  if(c<MIN){e.preventDefault();alert('El grupo debe tener al menos '+MIN+' integrantes. Actualmente: '+c);}
  if(c>MAX){e.preventDefault();alert('El grupo no puede tener mas de '+MAX+' integrantes. Actualmente: '+c);}
});

/* ── Responsive: 1 columna en móvil ── */
function ajustarGrid(){
  var g=document.getElementById('gridEstudiantes');
  if(!g) return;
  g.style.gridTemplateColumns=window.innerWidth<640?'1fr':'repeat(2,1fr)';
}
window.addEventListener('resize',ajustarGrid);
ajustarGrid();

toggleOrg();actCnt();
</script>
</body></html>