<?php
/**
 * admin.php — Cabina de Control · Sprint 16
 * Rediseño UX: fricción cero, sin duplicaciones, jerarquía visual clara.
 * Principio: una acción crítica = un botón grande. El resto, discreto.
 */
ini_set('session.gc_maxlifetime', 86400);
session_set_cookie_params(86400);
session_save_path("/home/evolucionamos/public_html/mejora/sessions");
session_start();
date_default_timezone_set('America/Bogota');

if (isset($_GET['action']) && $_GET['action'] == 'logout') {
    session_unset();
    session_destroy();
    session_write_close();
    setcookie(session_name(), '', 0, '/');
    header("Location: ./index.php"); exit;
}

if (empty($_SESSION['adm']) || ($_SESSION['role'] != 1 && $_SESSION['role'] != 3)) {
    header("Location: ./index.php"); exit;
}

// ── CSRF token (inline — validarCSRF() retorna void, no bool) ──────────────
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
$csrfToken = $_SESSION['csrf_token'];

// ── Datos de votaciones ────────────────────────────────────────────────────
require_once '../app/models/votacion.php';
require_once '../app/models/datos.php';

$model      = new \app\models\votacion();
$votaciones = $model->listar();

// Batch totales — evitar N+1
$_vids   = array_column((array)$votaciones, 'id');
$_totals = !empty($_vids) ? $model->totalesVotacionesBatch($_vids) : [];

// Datos de configuración (título asamblea, logo)
try {
    $cfg = (new \app\models\datos())->obtenerDatos();
    $tituloAsamblea = $cfg->titulo ?? 'Asamblea';
} catch (Exception $e) {
    $cfg = null;
    $tituloAsamblea = 'Asamblea';
}

// Censo total (para % quórum inicial)
$censos     = $model->censoPorZonas();
$censoTotal = $censos['_total'] ?? 0;

// Clasificar votaciones
$votacionesActivas   = [];
$votacionesCerradas  = [];
$votacionesConfig    = [];
$votacionesFinales   = [];

foreach ($votaciones as $v) {
    switch ($v->estado) {
        case 'abierta':       $votacionesActivas[]  = $v; break;
        case 'cerrada':       $votacionesCerradas[] = $v; break;
        case 'configuracion': $votacionesConfig[]   = $v; break;
        case 'finalizada':    $votacionesFinales[]  = $v; break;
    }
}

$hayVotacionActiva = !empty($votacionesActivas);
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cabina de Control — <?php echo htmlspecialchars($tituloAsamblea); ?></title>
    <?php require '../head.php'; ?>
    <style>
        /* ══════════════════════════════════════════════════
           LÍNEA GRÁFICA — igual que el resto del sistema
           fondo #f8f9fa, cards blancas, azul #2b5a9e, cyan #17c1e8
        ══════════════════════════════════════════════════ */
        body {
            background: #f0f2f5 !important;
            background-image: none !important;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 14px;
        }

        /* ── NAVBAR ─────────────────────────────────────── */
        .navbar-enterprise {
            background: #fff !important;
            border-bottom: 2px solid #17c1e8;
            padding: 10px 0;
            box-shadow: 0 2px 8px rgba(0,0,0,.06);
        }

        /* Quórum badge en navbar */
        .quorum-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #f0f9ff;
            border: 1.5px solid #b6e8f7;
            border-radius: 30px;
            padding: 6px 16px;
            transition: border-color .4s;
        }
        .quorum-badge.quorum-ok   { border-color: #28a745; background: #f0fff4; }
        .quorum-badge.quorum-bajo { border-color: #ffc107; background: #fffdf0; }
        .quorum-dot {
            width: 9px; height: 9px;
            border-radius: 50%;
            background: #ccc;
            flex-shrink: 0;
        }
        .quorum-badge.quorum-ok   .quorum-dot { background: #28a745; animation: blink-q 2s infinite; }
        .quorum-badge.quorum-bajo .quorum-dot { background: #ffc107; animation: blink-q 1.5s infinite; }
        @keyframes blink-q { 0%,100%{opacity:1;} 50%{opacity:.3;} }
        .quorum-label { font-size:.65em; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#999; display:block; line-height:1; margin-bottom:1px; }
        .quorum-num   { font-size:1.05em; font-weight:800; color:#2b5a9e; font-variant-numeric:tabular-nums; }
        .quorum-pct   { font-size:.75em; color:#888; font-variant-numeric:tabular-nums; }

        /* ── BARRA DE HERRAMIENTAS RÁPIDAS ──────────────── */
        .toolbar-rapida {
            background: #fff;
            border-bottom: 1px solid #e9ecef;
            padding: 10px 0;
        }
        .toolbar-inner {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 28px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .toolbar-label {
            font-size: .65em;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #333;
            white-space: nowrap;
            margin-right: 4px;
        }

        /* Botones de herramienta — grandes, claros */
        .tool-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            border-radius: 10px;
            border: 2px solid #17c1e8;
            background: #fff;
            color: #0a9dc0;
            font-size: .85em;
            font-weight: 700;
            letter-spacing: .3px;
            cursor: pointer;
            transition: all .15s;
            white-space: nowrap;
            font-family: 'Segoe UI', sans-serif;
            text-transform: uppercase;
        }
        .tool-btn:hover {
            background: #17c1e8;
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 4px 14px rgba(23,193,232,.35);
        }
        .tool-btn .tool-icon { font-size: 1.1em; }

        /* Botón alistamiento — alineado a la derecha */
        .alist-toggle-btn {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 10px 22px;
            border-radius: 10px;
            border: 2px solid #2b5a9e;
            background: #fff;
            color: #2b5a9e;
            font-size: .82em;
            font-weight: 700;
            letter-spacing: .3px;
            cursor: pointer;
            transition: all .15s;
            white-space: nowrap;
            font-family: 'Segoe UI', sans-serif;
            text-transform: uppercase;
            margin-left: auto;
        }
        .alist-toggle-btn:hover {
            background: #2b5a9e;
            color: #fff;
            box-shadow: 0 4px 14px rgba(43,90,158,.25);
        }
        .alist-toggle-btn.active {
            background: #2b5a9e;
            color: #fff;
            box-shadow: 0 4px 14px rgba(43,90,158,.25);
        }

        /* ── LAYOUT ─────────────────────────────────────── */
        .page-wrap { max-width: 1400px; margin: 0 auto; padding: 24px 28px 60px; }

        /* ── SECCIÓN HEADERS ────────────────────────────── */
        .section-header {
            display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
        }
        .section-tag {
            font-size: .65em; font-weight: 700; letter-spacing: 1.5px;
            text-transform: uppercase; padding: 4px 12px;
            border-radius: 20px; border: 1.5px solid; white-space: nowrap;
        }
        .section-tag.live { color: #28a745; border-color: #28a745; background: #f0fff4; }
        .section-tag.prep { color: #2b5a9e; border-color: #2b5a9e; background: #f0f4ff; }
        .section-title-text { font-size: 1em; font-weight: 700; color: #2b5a9e; }
        .section-line { flex: 1; height: 1px; background: #dee2e6; }

        /* ── TARJETA VOTACIÓN ───────────────────────────── */
        .vot-card {
            background: #fff;
            border: none;
            border-radius: 14px;
            margin-bottom: 12px;
            box-shadow: 0 3px 12px rgba(0,0,0,.06);
            overflow: hidden;
            transition: box-shadow .2s, transform .2s;
        }
        .vot-card:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.09); }
        .vot-card.estado-abierta      { border-left: 4px solid #28a745; }
        .vot-card.estado-cerrada      { border-left: 4px solid #ffc107; }
        .vot-card.estado-configuracion{ border-left: 4px solid #17c1e8; }
        .vot-card.estado-finalizada   { border-left: 4px solid #ccc; opacity: .8; }

        .vot-body { padding: 18px 22px 12px; }

        .vot-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
        .vot-estado-dot {
            width: 10px; height: 10px; border-radius: 50%;
            margin-top: 5px; flex-shrink: 0;
        }
        .estado-abierta      .vot-estado-dot { background: #28a745; animation: blink-q 1.5s infinite; }
        .estado-cerrada      .vot-estado-dot { background: #ffc107; }
        .estado-configuracion .vot-estado-dot{ background: #17c1e8; }
        .estado-finalizada   .vot-estado-dot { background: #ccc; }

        .vot-titulo  { font-weight: 700; font-size: 1em; color: #1a3a6e; line-height: 1.35; }
        .vot-pregunta{ font-size: .8em; color: #888; font-style: italic; margin-top: 3px; }
        .vot-meta    { font-size: .75em; color: #aaa; margin-top: 4px; }

        .vot-progress {
            height: 6px; background: #eef2f7; border-radius: 3px;
            margin: 10px 0 0; overflow: hidden;
        }
        .vot-progress-bar {
            height: 100%; border-radius: 3px;
            background: linear-gradient(90deg, #2b5a9e, #17c1e8);
            transition: width .5s ease;
        }

        /* ── BARRA DE ACCIONES ──────────────────────────── */
        .vot-actions {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
            padding: 12px 22px 14px;
            border-top: 1px solid #f0f0f0;
            background: #fafafa;
        }

        /* Separador visual entre acciones primarias y secundarias */
        .vot-actions-sep {
            width: 1px;
            height: 28px;
            background: #dee2e6;
            flex-shrink: 0;
        }

        /* Acciones secundarias — discretas, a la derecha */
        .vot-actions-secondary {
            display: flex;
            gap: 6px;
            align-items: center;
            margin-left: auto;
        }

        /* ── BOTONES ────────────────────────────────────── */

        /* Botón primario — la acción más importante de cada estado */
        .btn-primary-action {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 11px 26px;
            border-radius: 10px;
            font-size: .88em;
            font-weight: 700;
            letter-spacing: .3px;
            cursor: pointer;
            border: none;
            transition: all .15s;
            white-space: nowrap;
            font-family: 'Segoe UI', sans-serif;
        }

        /* Verde — Abrir + Proyectar, Proyectar */
        .btn-primary-action.verde {
            background: linear-gradient(135deg, #1d8a3e, #28a745);
            color: #fff;
            box-shadow: 0 4px 14px rgba(40,167,69,.3);
        }
        .btn-primary-action.verde:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(40,167,69,.45);
        }

        /* Cyan — Proyectar pantalla */
        .btn-primary-action.cyan {
            background: linear-gradient(135deg, #0e9bbf, #17c1e8);
            color: #fff;
            box-shadow: 0 4px 14px rgba(23,193,232,.3);
        }
        .btn-primary-action.cyan:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(23,193,232,.45);
        }

        /* Botón secundario — visible pero sin protagonismo */
        .btn-secondary-action {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 9px 18px;
            border-radius: 9px;
            font-size: .82em;
            font-weight: 700;
            letter-spacing: .2px;
            cursor: pointer;
            transition: all .15s;
            white-space: nowrap;
            font-family: 'Segoe UI', sans-serif;
            border: 2px solid;
            background: none;
        }
        .btn-secondary-action.amarillo {
            border-color: #e0a800;
            color: #856404;
        }
        .btn-secondary-action.amarillo:hover:not(:disabled) {
            background: #ffc107;
            color: #000;
        }
        .btn-secondary-action.gris {
            border-color: #dee2e6;
            color: #6c757d;
        }
        .btn-secondary-action.gris:hover:not(:disabled) {
            border-color: #adb5bd;
            color: #343a40;
        }

        /* Botón discreto — solo texto/link, para acciones de bajo uso */
        .btn-link-action {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 7px 12px;
            border-radius: 7px;
            font-size: .76em;
            font-weight: 600;
            color: #aaa;
            background: none;
            border: 1px solid transparent;
            cursor: pointer;
            text-decoration: none;
            transition: all .15s;
            white-space: nowrap;
            font-family: 'Segoe UI', sans-serif;
        }
        .btn-link-action:hover {
            color: #555;
            border-color: #dee2e6;
            background: #f8f9fa;
        }
        .btn-link-action:disabled { opacity: .4; cursor: not-allowed; }

        /* Badge estado */
        .estado-chip {
            font-size: .65em; font-weight: 700; letter-spacing: .8px;
            text-transform: uppercase; padding: 3px 10px; border-radius: 20px;
        }
        .chip-abierta    { background:#d1fae5; color:#065f46; }
        .chip-cerrada    { background:#fef9c3; color:#854d0e; }
        .chip-config     { background:#e0f2fe; color:#0369a1; }
        .chip-finalizada { background:#f1f5f9; color:#94a3b8; }

        /* ── SECCIÓN ALISTAMIENTO ───────────────────────── */
        .alistamiento-wrap {
            display: none;
            margin-bottom: 24px;
        }
        .alistamiento-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 10px;
        }
        .alist-card {
            background: #fff; border: 1px solid #e9ecef; border-radius: 12px;
            padding: 18px 16px; text-decoration: none;
            display: flex; flex-direction: column; gap: 5px;
            transition: all .2s; box-shadow: 0 2px 8px rgba(0,0,0,.04);
        }
        .alist-card:hover {
            border-color: #2b5a9e; transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(43,90,158,.1);
        }
        .alist-icon  { font-size: 1.3em; }
        .alist-label { font-size: .88em; font-weight: 700; color: #2b5a9e; }
        .alist-desc  { font-size: .72em; color: #aaa; line-height: 1.4; }

        /* ── TOAST ──────────────────────────────────────── */
        .toast-container-custom {
            position: fixed; bottom: 24px; right: 24px;
            z-index: 9999; display: flex; flex-direction: column; gap: 8px;
            pointer-events: none;
        }
        .toast-item {
            background: #fff; border-radius: 10px;
            padding: 11px 18px; font-size: .82em; color: #333;
            box-shadow: 0 8px 24px rgba(0,0,0,.15);
            animation: toast-in .3s ease; pointer-events: all;
            max-width: 300px; border-left: 4px solid #17c1e8;
        }
        .toast-item.toast-ok    { border-left-color: #28a745; }
        .toast-item.toast-error { border-left-color: #dc3545; }
        @keyframes toast-in {
            from { opacity:0; transform:translateY(16px); }
            to   { opacity:1; transform:translateY(0); }
        }

        /* ── MODAL CONFIRMACIÓN ─────────────────────────── */
        .confirm-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,.5);
            z-index: 5000; display: none;
            align-items: center; justify-content: center;
        }
        .confirm-overlay.active { display: flex; }
        .confirm-box {
            background: #fff; border-radius: 16px;
            padding: 30px 34px; max-width: 420px; width: 90%;
            box-shadow: 0 20px 60px rgba(0,0,0,.2);
        }
        .confirm-titulo {
            font-size: 1.05em; font-weight: 700; color: #2b5a9e; margin-bottom: 10px;
        }
        .confirm-msg  { font-size: .85em; color: #666; margin-bottom: 22px; line-height: 1.6; }
        .confirm-btns { display: flex; gap: 10px; justify-content: flex-end; }
        .confirm-btn-cancel {
            padding: 9px 18px; border-radius: 8px; border: 1px solid #dee2e6;
            background: none; color: #666; font-size: .84em; font-weight: 600;
            cursor: pointer; transition: all .2s;
        }
        .confirm-btn-cancel:hover { border-color: #aaa; }
        .confirm-btn-ok {
            padding: 9px 22px; border-radius: 8px; border: none;
            font-size: .84em; font-weight: 700; cursor: pointer; transition: all .2s;
        }
        .confirm-btn-ok.danger   { background: #ffc107; color: #000; }
        .confirm-btn-ok.positive { background: #28a745; color: #fff; }

        /* ── SPINNER ────────────────────────────────────── */
        .spin {
            display: inline-block; width: 13px; height: 13px;
            border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
            border-radius: 50%; animation: spin .6s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ── MISC ───────────────────────────────────────── */
        .empty-state { text-align: center; padding: 50px 20px; color: #aaa; }
        .empty-state .empty-icon { font-size: 2.5em; margin-bottom: 12px; }
        .empty-state p { font-size: .88em; }

        @media (max-width:680px) {
            .page-wrap { padding: 14px 14px 50px; }
            .toolbar-inner { padding: 0 14px; gap: 6px; }
            .tool-btn { padding: 8px 12px; font-size: .78em; }
            .vot-actions { padding: 10px 14px 12px; }
            .vot-actions-secondary { margin-left: 0; width: 100%; }
        }
    </style>
</head>
<body>

<!-- ════════════════════════════════════════════════════
     NAVBAR — logo + título + quórum + salir
════════════════════════════════════════════════════ -->
<nav class="navbar navbar-expand-lg navbar-enterprise">
    <div class="container" style="max-width:1400px;">
        <img src="../assets/images/logo.png" style="height:46px;" alt="Logo">
        <span class="ms-3 fw-bold d-none d-md-inline"
              style="color:#2b5a9e;font-size:1.2em;letter-spacing:.2px;">
            <?php echo htmlspecialchars($tituloAsamblea); ?>
        </span>

        <div class="ms-auto d-flex gap-3 align-items-center">
            <!-- Quórum live -->
            <div class="quorum-badge quorum-sin" id="quorum-badge">
                <div class="quorum-dot" id="quorum-dot"></div>
                <div>
                    <span class="quorum-label">Quórum</span>
                    <span class="quorum-num" id="quorum-num">—</span>
                    <span class="quorum-pct" id="quorum-pct"></span>
                </div>
            </div>

            <a href="admin.php?action=logout"
               class="btn btn-sm"
               style="background:#fff0f0;border:1.5px solid #dc3545;color:#dc3545;border-radius:8px;font-weight:700;font-size:.78em;padding:7px 14px;">
                <i class="fas fa-sign-out-alt"></i> Salir
            </a>
        </div>
    </div>
</nav>

<!-- ════════════════════════════════════════════════════
     BARRA DE HERRAMIENTAS RÁPIDAS
     Siempre visible — botones grandes — un click
════════════════════════════════════════════════════ -->
<div class="toolbar-rapida">
    <div class="toolbar-inner">
        <span class="toolbar-label">Herramientas</span>

        <button class="tool-btn"
                onclick="window.open('temporizador.php','_tbTimer','width=660,height=580,toolbar=0,menubar=0,scrollbars=0')">
            <span class="tool-icon">⏱</span> Palabra
        </button>

        <button class="tool-btn"
                onclick="window.location.href='exportar_quorum.php'; setTimeout(function(){ window.open('../quorum.php','_tbQuorum','width=1280,height=800'); }, 800);">
            <span class="tool-icon">👥</span> Quórum
        </button>

        <button class="tool-btn"
                onclick="window.open('sorteos.php','_tbSorteos','width=1280,height=900')">
            <span class="tool-icon">🎲</span> Sorteo
        </button>

        <!-- Alistamiento — separado a la derecha -->
        <button class="alist-toggle-btn" onclick="toggleAlistamiento()" id="btn-alist">
            <i class="fas fa-cog" id="ico-alist-btn"></i> Alistamiento
        </button>
    </div>
</div>


<!-- ════════════════════════════════════════════════════
     CONTENIDO PRINCIPAL
════════════════════════════════════════════════════ -->
<div class="page-wrap">

    <!-- ── SECCIÓN ALISTAMIENTO (colapsada por defecto) ────── -->
    <div id="wrap-alistamiento" class="alistamiento-wrap">
        <div class="section-header" style="margin-top:8px;">
            <span class="section-tag prep">⚙ ALISTAMIENTO</span>
            <span class="section-title-text">Configuración y preparación</span>
            <div class="section-line"></div>
        </div>
        <div class="alistamiento-grid" style="margin-bottom:4px;">
            <a href="configuracion.php" class="alist-card">
                <div class="alist-icon">⚙️</div>
                <div class="alist-label">Configuración General</div>
                <div class="alist-desc">Título, logo, mensajes SMS/WhatsApp, visibilidad resultados</div>
            </a>
            <a href="votaciones.php" class="alist-card">
                <div class="alist-icon">🗳️</div>
                <div class="alist-label">Gestionar Votaciones</div>
                <div class="alist-desc">Crear, editar, ordenar votaciones y cargar candidatos</div>
            </a>
            <a href="exportar_quorum.php" class="alist-card">
                <div class="alist-icon">📋</div>
                <div class="alist-label">Exportar Quórum</div>
                <div class="alist-desc">Descarga Excel: Nombre, Cédula, Poder</div>
            </a>
            <a href="plantilla_candidatos.php" class="alist-card">
                <div class="alist-icon">📥</div>
                <div class="alist-label">Plantilla Candidatos</div>
                <div class="alist-desc">Descargar plantilla XLSX para carga masiva</div>
            </a>
        </div>
        <hr style="margin:20px 0 20px;border-color:#e9ecef;">
    </div>


    <!-- ── SECCIÓN VOTACIONES EN VIVO ───────────────────── -->
    <div style="margin-top:4px;"></div>
    <div class="section-header">
        <span class="section-tag live">● EN VIVO</span>
        <span class="section-title-text">Control de Votaciones</span>
        <div class="section-line"></div>
        <a href="votaciones.php" class="btn-link-action" style="border-color:#17c1e8;color:#17c1e8;font-size:.78em;padding:7px 14px;">
            <i class="fas fa-plus"></i> Crear votación
        </a>
    </div>

    <?php
    // ── Votaciones ABIERTAS ─────────────────────────────────────────
    // Acción principal: PROYECTAR (cyan)
    // Acción secundaria: CERRAR (amarillo)
    // Discreto: PDF, Resultados internos
    if (!empty($votacionesActivas)):
        foreach ($votacionesActivas as $v):
            $_t         = $_totals[$v->id] ?? (object)['total_votos'=>0,'participantes'=>(object)['votaron'=>0]];
            $totalVotos = (int)$_t->total_votos;
            $pct        = ($censoTotal > 0) ? round(($totalVotos / $censoTotal) * 100, 1) : 0;
    ?>
    <div class="vot-card estado-abierta" id="card-<?php echo $v->id; ?>">
        <div class="vot-body">
            <div class="vot-top">
                <div class="vot-estado-dot"></div>
                <div style="flex:1">
                    <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
                        <div class="vot-titulo"><?php echo htmlspecialchars($v->titulo); ?></div>
                        <span class="estado-chip chip-abierta">● Abierta</span>
                    </div>
                    <?php if (!empty($v->pregunta)): ?>
                        <div class="vot-pregunta"><?php echo htmlspecialchars($v->pregunta); ?></div>
                    <?php endif; ?>
                    <div class="vot-meta">
                        <span id="votos-<?php echo $v->id; ?>"><?php echo number_format($totalVotos, 0, ',', '.'); ?></span>
                        votos · <span id="pct-<?php echo $v->id; ?>"><?php echo $pct; ?></span>% participación
                        · censo <?php echo number_format($censoTotal, 0, ',', '.'); ?>
                    </div>
                </div>
            </div>
            <div class="vot-progress">
                <div class="vot-progress-bar" id="bar-<?php echo $v->id; ?>"
                     style="width:<?php echo min($pct, 100); ?>%"></div>
            </div>
        </div>
        <div class="vot-actions">
            <!-- Primario: proyectar pantalla de votación -->
            <button class="btn-primary-action cyan"
                    onclick="proyectar(<?php echo $v->id; ?>)">
                📡 Proyectar
            </button>

            <!-- Secundario: cerrar la votación -->
            <button class="btn-secondary-action amarillo"
                    onclick="confirmarAccion(<?php echo $v->id; ?>, 'cerrada', '¿Cerrar votación?', 'Los delegados ya no podrán votar. La votación quedará en estado Cerrada para revisión antes de finalizar.', 'danger')">
                ⏸ Cerrar votación
            </button>
        </div>
    </div>
    <?php endforeach; endif; ?>


    <?php
    // ── Votaciones CERRADAS ─────────────────────────────────────────
    // Acción principal: PROYECTAR RESULTADOS (cyan)
    // Acción secundaria: FINALIZAR (gris/irreversible)
    // Discreto: Reabrir, PDF
    if (!empty($votacionesCerradas)):
        foreach ($votacionesCerradas as $v):
            $_t         = $_totals[$v->id] ?? (object)['total_votos'=>0,'participantes'=>(object)['votaron'=>0]];
            $totalVotos = (int)$_t->total_votos;
            $pct        = ($censoTotal > 0) ? round(($totalVotos / $censoTotal) * 100, 1) : 0;
    ?>
    <div class="vot-card estado-cerrada" id="card-<?php echo $v->id; ?>">
        <div class="vot-body">
            <div class="vot-top">
                <div class="vot-estado-dot"></div>
                <div style="flex:1">
                    <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
                        <div class="vot-titulo"><?php echo htmlspecialchars($v->titulo); ?></div>
                        <span class="estado-chip chip-cerrada">Cerrada</span>
                    </div>
                    <?php if (!empty($v->pregunta)): ?>
                        <div class="vot-pregunta"><?php echo htmlspecialchars($v->pregunta); ?></div>
                    <?php endif; ?>
                    <div class="vot-meta">
                        <?php echo number_format($totalVotos, 0, ',', '.'); ?> votos · <?php echo $pct; ?>% participación
                    </div>
                </div>
            </div>
        </div>
        <div class="vot-actions">
            <!-- Primario: mostrar resultados -->
            <button class="btn-primary-action cyan"
                    onclick="proyectar(<?php echo $v->id; ?>)">
                📡 Proyectar resultados
            </button>

            <!-- Secundario: finalizar (irreversible) -->
            <button class="btn-secondary-action gris"
                    onclick="confirmarAccion(<?php echo $v->id; ?>, 'finalizada', '¿Finalizar votación?', 'La votación quedará marcada como finalizada. Esta acción no se puede revertir fácilmente.', 'danger')">
                🏁 Finalizar
            </button>

            <!-- Discretos: reabrir y PDF -->
            <div class="vot-actions-secondary">
                <button class="btn-link-action"
                        onclick="confirmarAccion(<?php echo $v->id; ?>, 'abierta', '¿Reabrir votación?', 'La votación volverá a estado Abierta y los delegados podrán seguir votando.', 'positive')">
                    ↩ Reabrir
                </button>
                <a href="generar_reporte.php?vid=<?php echo $v->id; ?>" target="_blank"
                   class="btn-link-action">
                    <i class="fas fa-download"></i> PDF
                </a>
            </div>
        </div>
    </div>
    <?php endforeach; endif; ?>


    <?php
    // ── Votaciones LISTAS (configuracion) ──────────────────────────
    // Acción ÚNICA: ABRIR + PROYECTAR
    // No se muestra "Solo abrir" ni "Gestionar candidatos" — son de alistamiento
    if (!empty($votacionesConfig)):
        foreach ($votacionesConfig as $v):
    ?>
    <div class="vot-card estado-configuracion" id="card-<?php echo $v->id; ?>">
        <div class="vot-body">
            <div class="vot-top">
                <div class="vot-estado-dot"></div>
                <div style="flex:1">
                    <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">
                        <div class="vot-titulo"><?php echo htmlspecialchars($v->titulo); ?></div>
                        <span class="estado-chip chip-config">Lista para abrir</span>
                    </div>
                    <?php if (!empty($v->pregunta)): ?>
                        <div class="vot-pregunta"><?php echo htmlspecialchars($v->pregunta); ?></div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <div class="vot-actions">
            <!-- Acción única: abre + proyecta en un click -->
            <button class="btn-primary-action verde"
                    onclick="abrirYProyectar(<?php echo $v->id; ?>)"
                    id="btn-abrirproy-<?php echo $v->id; ?>">
                ▶ Abrir + Proyectar
            </button>
        </div>
    </div>
    <?php endforeach; endif; ?>


    <?php
    // ── Votaciones FINALIZADAS (colapsadas) ────────────────────────
    if (!empty($votacionesFinales)):
    ?>
    <div style="margin-top:10px;">
        <button class="btn-link-action" onclick="toggleFinales()"
                id="btn-toggle-finales" style="font-size:.78em;color:#aaa;border-color:#dee2e6;padding:7px 14px;">
            <i class="fas fa-chevron-down" id="ico-finales"></i>
            Ver finalizadas (<?php echo count($votacionesFinales); ?>)
        </button>
    </div>
    <div id="wrap-finales" style="display:none;margin-top:10px;">
        <?php foreach ($votacionesFinales as $v): ?>
        <div class="vot-card estado-finalizada">
            <div class="vot-body" style="padding:13px 22px;">
                <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;">
                    <div>
                        <span class="vot-titulo" style="font-size:.88em;"><?php echo htmlspecialchars($v->titulo); ?></span>
                        <span class="estado-chip chip-finalizada" style="margin-left:8px;">Finalizada</span>
                    </div>
                    <div style="display:flex;gap:6px;">
                        <a href="generar_reporte.php?vid=<?php echo $v->id; ?>" target="_blank"
                           class="btn-link-action" style="border-color:#dee2e6;">
                            <i class="fas fa-download"></i> PDF
                        </a>
                        <a href="zona.php?vid=<?php echo $v->id; ?>"
                           class="btn-link-action" style="border-color:#dee2e6;">
                            📊 Resultados
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>

    <?php if (empty($votaciones)): ?>
    <div class="empty-state">
        <div class="empty-icon">🗳️</div>
        <p>No hay votaciones configuradas.<br>Abre el alistamiento para crear la primera.</p>
    </div>
    <?php endif; ?>

    <footer class="mt-5 py-4 border-top text-center text-muted" style="font-size:.82em;">
        <p>Copyright 2012–2026 <a href="https://fycls.com/" target="_blank" class="text-primary text-decoration-none fw-bold">FYCLS S.A.S</a></p>
    </footer>
</div><!-- /page-wrap -->


<!-- ════════════════════════════════════════════════════
     MODAL CONFIRMACIÓN
════════════════════════════════════════════════════ -->
<div class="confirm-overlay" id="confirm-overlay">
    <div class="confirm-box">
        <div class="confirm-titulo" id="confirm-titulo">¿Confirmar acción?</div>
        <div class="confirm-msg" id="confirm-msg">¿Está seguro de continuar?</div>
        <div class="confirm-btns">
            <button class="confirm-btn-cancel" onclick="cerrarConfirm()">Cancelar</button>
            <button class="confirm-btn-ok danger" id="confirm-ok" onclick="ejecutarAccion()">Confirmar</button>
        </div>
    </div>
</div>

<!-- TOAST CONTAINER -->
<div class="toast-container-custom" id="toast-container"></div>


<!-- ════════════════════════════════════════════════════
     JAVASCRIPT — lógica 100% intacta respecto a Sprint 15
════════════════════════════════════════════════════ -->
<script>
// ── CSRF token (desde PHP) ─────────────────────────────────────────────
var CSRF_TOKEN  = <?php echo json_encode($csrfToken); ?>;
var CENSO_TOTAL = <?php echo (int)$censoTotal; ?>;

// ── Estado pendiente para modal confirmación ───────────────────────────
var _pendingVid    = null;
var _pendingEstado = null;

// ── QUÓRUM POLLING ────────────────────────────────────────────────────
function actualizarQuorum() {
    fetch('../quorum_api.php?json=1&t=' + Date.now())
        .then(function(r){ return r.json(); })
        .then(function(d) {
            var badge = document.getElementById('quorum-badge');
            var dot   = document.getElementById('quorum-dot');
            var num   = document.getElementById('quorum-num');
            var pct   = document.getElementById('quorum-pct');

            // Usar poderes (campo exacto de quorum_api.php) — consistente con quorum.php
            var presentes  = d.poder_presentes   || 0;
            var total      = d.poder_registrados || CENSO_TOTAL || 0;
            var porcentaje = d.porcentaje        || (total > 0 ? Math.round((presentes / total) * 100 * 10) / 10 : 0);

            num.textContent = presentes.toLocaleString('es-CO');
            pct.textContent = total > 0 ? ' / ' + total.toLocaleString('es-CO') + ' (' + porcentaje + '%)' : '';

            badge.className = 'quorum-badge';
            if (porcentaje >= 50)     badge.classList.add('quorum-ok');
            else if (porcentaje > 0)  badge.classList.add('quorum-bajo');
            else                      badge.classList.add('quorum-sin');
        })
        .catch(function() {
            // silencioso — no interrumpe operación
        });
}
actualizarQuorum();
setInterval(actualizarQuorum, 10000);

// ── PROYECTAR ────────────────────────────────────────────────────────
function proyectar(vid) {
    window.open(
        'votacion_proyeccion.php?vid=' + vid,
        'bv_proyeccion_' + vid,
        'width=1280,height=800,toolbar=0,menubar=0,scrollbars=1'
    );
}

// ── ABRIR + PROYECTAR (combinado) ─────────────────────────────────────
function abrirYProyectar(vid) {
    var btn = document.getElementById('btn-abrirproy-' + vid);
    if (btn) {
        btn.disabled = true;
        btn.innerHTML = '<span class="spin"></span> Abriendo...';
    }
    cambiarEstado(vid, 'abierta', function(ok) {
        if (ok) {
            setTimeout(function() {
                proyectar(vid);
            }, 600);
        } else {
            if (btn) {
                btn.disabled = false;
                btn.innerHTML = '▶ Abrir + Proyectar';
            }
        }
    });
}

// ── MODAL CONFIRMACIÓN ────────────────────────────────────────────────
function confirmarAccion(vid, estado, titulo, msg, tipo) {
    _pendingVid    = vid;
    _pendingEstado = estado;
    document.getElementById('confirm-titulo').textContent = titulo;
    document.getElementById('confirm-msg').textContent    = msg;
    var okBtn = document.getElementById('confirm-ok');
    okBtn.className  = 'confirm-btn-ok ' + (tipo || 'danger');
    okBtn.textContent = 'Confirmar';
    document.getElementById('confirm-overlay').classList.add('active');
}

function cerrarConfirm() {
    _pendingVid = null;
    _pendingEstado = null;
    document.getElementById('confirm-overlay').classList.remove('active');
}

function ejecutarAccion() {
    if (!_pendingVid || !_pendingEstado) return;
    var vid    = _pendingVid;
    var estado = _pendingEstado;
    cerrarConfirm();
    cambiarEstado(vid, estado);
}

// ── CAMBIAR ESTADO VÍA AJAX ───────────────────────────────────────────
function cambiarEstado(vid, estado, cb) {
    var fd = new FormData();
    fd.append('vid',        vid);
    fd.append('estado',     estado);
    fd.append('csrf_token', CSRF_TOKEN);

    fetch('ajax_estado_votacion.php', { method: 'POST', body: fd })
        .then(function(r){ return r.json(); })
        .then(function(d) {
            if (d.ok) {
                if (d.csrf_token) CSRF_TOKEN = d.csrf_token;
                toast('✓ Estado actualizado: ' + estado, 'ok');
                setTimeout(function(){ location.reload(); }, 800);
                if (cb) cb(true);
            } else {
                toast('✗ ' + (d.msg || 'Error al cambiar estado'), 'error');
                if (cb) cb(false);
            }
        })
        .catch(function() {
            toast('✗ Error de conexión', 'error');
            if (cb) cb(false);
        });
}

// ── TOGGLE ALISTAMIENTO ───────────────────────────────────────────────
function toggleAlistamiento() {
    var wrap = document.getElementById('wrap-alistamiento');
    var btn  = document.getElementById('btn-alist');
    if (wrap.style.display === 'none' || wrap.style.display === '') {
        wrap.style.display = 'block';
        btn.classList.add('active');
        btn.innerHTML = '<i class="fas fa-times"></i> Cerrar alistamiento';
    } else {
        wrap.style.display = 'none';
        btn.classList.remove('active');
        btn.innerHTML = '<i class="fas fa-cog"></i> Alistamiento';
    }
}

function toggleFinales() {
    var wrap = document.getElementById('wrap-finales');
    var ico  = document.getElementById('ico-finales');
    if (!wrap) return;
    if (wrap.style.display === 'none') {
        wrap.style.display = 'block';
        ico.className = 'fas fa-chevron-up';
    } else {
        wrap.style.display = 'none';
        ico.className = 'fas fa-chevron-down';
    }
}

// ── TOAST ─────────────────────────────────────────────────────────────
function toast(msg, tipo) {
    var c = document.getElementById('toast-container');
    var t = document.createElement('div');
    t.className   = 'toast-item toast-' + (tipo || 'ok');
    t.textContent = msg;
    c.appendChild(t);
    setTimeout(function() {
        t.style.opacity    = '0';
        t.style.transition = 'opacity .4s';
        setTimeout(function() { t.remove(); }, 400);
    }, 3500);
}

// ── CERRAR CONFIRM AL CLICK FUERA ─────────────────────────────────────
document.getElementById('confirm-overlay').addEventListener('click', function(e) {
    if (e.target === this) cerrarConfirm();
});

// ── KEEPALIVE ─────────────────────────────────────────────────────────
setInterval(function(){
    fetch('keepalive.php').catch(function(){});
}, 300000);

// ── POLLING VOTOS EN VIVO (si hay votación abierta) ───────────────────
<?php if ($hayVotacionActiva): ?>
function actualizarVotosVivos() {
    <?php foreach ($votacionesActivas as $v): ?>
    (function(vid, censoTotal) {
        fetch('ajax_resultados_live.php?vid=' + vid + '&t=' + Date.now())
            .then(function(r){ return r.json(); })
            .then(function(d) {
                if (d.error) return;
                var el    = document.getElementById('votos-' + vid);
                var elPct = document.getElementById('pct-'   + vid);
                var bar   = document.getElementById('bar-'   + vid);
                if (el)    el.textContent   = parseInt(d.total_votos).toLocaleString('es-CO');
                if (elPct) elPct.textContent = d.participacion;
                if (bar)   bar.style.width   = Math.min(d.participacion, 100) + '%';
                if (d.csrf_token) CSRF_TOKEN = d.csrf_token;
            })
            .catch(function(){});
    })(<?php echo (int)$v->id; ?>, <?php echo (int)$censoTotal; ?>);
    <?php endforeach; ?>
}
actualizarVotosVivos();
setInterval(actualizarVotosVivos, 8000);
<?php endif; ?>
</script>

</body>
</html>
