<?php
session_start();
require_once 'config.php';
require_once 'config_ui.php';


if (!function_exists('af_consulta_json')) {
    function af_consulta_json(mixed $value): string
    {
        $flags = JSON_UNESCAPED_UNICODE
            | JSON_UNESCAPED_SLASHES
            | JSON_INVALID_UTF8_SUBSTITUTE;

        $json = json_encode($value, $flags);

        return is_string($json) ? $json : 'null';
    }
}

if (isset($_GET['clear_pending']) && $_GET['clear_pending'] === '1') {
    unset($_SESSION['consulta_pendiente']);
    if (!headers_sent()) {
        header('Content-Type: application/json; charset=utf-8');
        header('Cache-Control: no-store');
    }
    echo json_encode(['success' => true], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
    exit;
}

$pendingConsulta = is_array($_SESSION['consulta_pendiente'] ?? null)
    ? $_SESSION['consulta_pendiente']
    : [];
$resumeRequested = (string) ($_GET['continuar'] ?? '') === '1';
$requestedPlatform = filter_input(INPUT_GET, 'plataforma', FILTER_VALIDATE_INT) ?: 0;
$requestedEmail = filter_var((string) ($_GET['correo'] ?? ''), FILTER_VALIDATE_EMAIL) ?: '';
$requestedSubject = filter_input(INPUT_GET, 'asunto', FILTER_VALIDATE_INT) ?: 0;

$resumePlatform = $requestedPlatform > 0
    ? $requestedPlatform
    : ($resumeRequested ? (int) ($pendingConsulta['plataforma'] ?? 0) : 0);
$resumeEmail = $requestedEmail !== ''
    ? strtolower($requestedEmail)
    : ($resumeRequested ? strtolower((string) ($pendingConsulta['correo'] ?? '')) : '');
$resumeSubject = $requestedSubject > 0
    ? $requestedSubject
    : ($resumeRequested ? (int) ($pendingConsulta['asunto'] ?? 0) : 0);

$titulo_pagina = $ui_consulta_page_title ?? 'Consulta Pública';
require_once 'header_publico.php';

$is_logged_in_with_id = array_key_exists('uid', $_SESSION['consulta'] ?? []);
$user_id_for_js = $is_logged_in_with_id ? (string) ($_SESSION['consulta']['uid'] ?? '0') : '';

$initialPlatforms = [];
try {
    $platformStmt = $pdo->query(
        "SELECT p.id, p.nombre, p.imagen_url, p.orden
         FROM plataformas p
         ORDER BY p.orden, p.nombre"
    );
    $initialPlatforms = $platformStmt ? $platformStmt->fetchAll(PDO::FETCH_ASSOC) : [];
} catch (Throwable $e) {
    error_log('consulta.php plataformas iniciales: ' . $e->getMessage());
}
?>
<style>
/* Estilos para el contenedor principal de la consulta */
.query-container {
    background-color: white;
    border-radius: 0.75rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
    padding: 2rem; /* p-8 */
    width: 100%;
    max-width: 800px; /* max-w-4xl */
    margin: 0 auto; /* mx-auto */
    display: flex;
    flex-direction: column;
    min-height: 500px; /* Ajuste para que no sea demasiado pequeño */
}

/* Estilos para el encabezado del formulario */
.query-header {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem; /* mb-6 */
    padding-bottom: 1rem; /* pb-4 */
    border-bottom: 1px solid #e5e7eb; /* border-b */
}

.query-header h1 {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    color: #dc2626; /* text-red-600 */
    margin-bottom: 1rem; /* mb-4 */
    display: flex;
    align-items: center;
}

.query-header .instructions-box {
    background-color: #eff6ff; /* bg-blue-100 */
    border-left: 4px solid #3b82f6; /* border-l-4 border-blue-500 */
    color: #1e40af; /* text-blue-700 */
    padding: 0.75rem; /* p-3 */
    border-radius: 0.375rem; /* rounded-md */
    font-size: 0.875rem; /* text-sm */
    width: 100%; /* Ocupa todo el ancho en pantallas pequeñas */
    max-width: 300px; /* Ancho máximo para instrucciones */
}

.query-header .instructions-box p {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.query-header .instructions-box i {
    margin-right: 0.5rem;
    margin-top: 0.25rem; /* Ajuste vertical del icono */
}

.query-content-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una columna por defecto */
    gap: 1.5rem; /* gap-6 */
    flex-grow: 1;
}

@media (min-width: 768px) { /* md */
    .query-content-grid {
        grid-template-columns: 1fr 1fr; /* Dos columnas en pantallas medianas y grandes */
    }

    .query-header h1 {
        margin-bottom: 0;
    }
}

/* Estilos para la sección de selección de plataforma/asunto */
.selection-section {
    display: flex;
    flex-direction: column;
    space-y: 1.5rem; /* space-y-6 */
}

.platform-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 3 columnas */
    gap: 1rem; /* gap-4 */
    max-height: 240px; /* max-h-60 */
    overflow-y: auto;
    padding: 0.5rem; /* p-2 */
    border: 1px solid #e5e7eb; /* border */
    border-radius: 0.375rem; /* rounded-md */
    background-color: #f9fafb; /* bg-gray-50 */
}

.platform-box {
    background-color: black;
    cursor: pointer;
    padding: 0.75rem; /* p-3 */
    border: 1px solid #d1d5db; /* border border-gray-300 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    display: flex;
    flex-direction: row; /* Cambio para que el logo y el nombre estén uno al lado del otro */
    align-items: center;
    justify-content: flex-start; /* Alinear al inicio del contenedor */
    text-align: left;
    transition: all 0.2s ease-in-out;
}

.platform-box.selected-platform {
    background-color: #dc2626; /* bg-red-600 */
}

.logo-circle {
    width: 3.5rem; /* w-10 */
    height: 3.5rem; /* h-10 */
    flex-shrink: 0;
    background-color: white;
    border-radius: 9999px; /* rounded-full */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-right: 1rem; /* Margen para separar el logo del nombre */
    margin-bottom: 0;
}

.logo-circle img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.platform-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem; /* mt-4 */
}

.platform-pagination button {
    background-color: #d1d5db; /* bg-gray-300 */
    color: #4b5563; /* text-gray-700 */
    padding: 0.5rem 1rem; /* px-4 py-2 */
    border-radius: 0.375rem; /* rounded-md */
    transition: background-color 0.2s;
}

.platform-pagination button:hover:not(:disabled) {
    background-color: #9ca3af; /* hover:bg-gray-400 */
}

.platform-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.platform-pagination span {
    color: #4b5563; /* text-gray-600 */
    font-size: 0.875rem; /* text-sm */
}

/* Estilos para el select de asunto */
#asunto {
    width: 100%;
    padding: 0.75rem; /* p-3 */
    border: 1px solid #d1d5db; /* border border-gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    background-color: white;
    color: #111827; /* text-gray-900 */
}

/* Estilos para la sección de formulario de consulta */
.query-form-section {
    display: flex;
    flex-direction: column;
    space-y: 1.5rem; /* space-y-6 */
    background-color: #f9fafb; /* bg-gray-50 */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid #e5e7eb; /* border */
}

.query-form-section label {
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #4b5563; /* text-gray-700 */
}

.query-form-section input[type="email"] {
    margin-top: 0.25rem; /* mt-1 */
    display: block;
    width: 100%;
    padding: 0.75rem; /* p-3 */
    border: 1px solid #d1d5db; /* border border-gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    color: #111827; /* text-gray-900 */
}

.query-form-actions {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan */
    justify-content: space-between;
    align-items: center;
}

.query-form-actions button[type="submit"] {
    background-color: #dc2626; /* bg-red-600 */
    color: white;
    font-weight: 700; /* font-bold */
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: background-color 0.3s;
}

.query-form-actions button[type="submit"]:hover:not(:disabled) {
    background-color: #ef4444; /* hover:bg-red-700 */
}

.query-form-actions button[type="submit"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.query-form-actions .login-link {
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #dc2626; /* text-red-600 */
    transition: color 0.2s;
}

.query-form-actions .login-link:hover {
    color: #ef4444; /* hover:text-red-500 */
}

.query-form-actions .logged-in-status {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
}

.query-form-actions .logged-in-status strong {
    color: #dc2626; /* text-red-600 */
}

/* Modal de resultados: contenido limitado entre la barra superior y el pie fijo. */
.modal {
    display: none;
    position: fixed;
    z-index: 1090;
    inset: var(--public-header-height, 72px) 0 var(--public-footer-height, 62px) 0;
    width: auto;
    height: auto;
    padding: 16px 20px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.68);
    align-items: center;
    justify-content: center;
}

.modal-content-container {
    position: relative;
    width: min(90vw, 1120px);
    height: min(680px, calc(100vh - var(--public-header-height, 72px) - var(--public-footer-height, 62px) - 32px));
    max-height: calc(100vh - var(--public-header-height, 72px) - var(--public-footer-height, 62px) - 32px);
    margin: auto;
}

body.results-modal-open {
    overflow: hidden;
}

#resultsModal,
#resultsModal[hidden],
#resultsModal[aria-hidden="true"],
body:not(.results-modal-open) #resultsModal {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

body.results-modal-open #resultsModal[aria-hidden="false"] {
    display: flex !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

body:not(.results-modal-open) .public-header,
body:not(.results-modal-open) .public-query-main,
body:not(.results-modal-open) .public-footer,
body:not(.results-modal-open) #platform-pagination,
body:not(.results-modal-open) #plataformas-container {
    pointer-events: auto !important;
}

#resultsModal .consulta-result-dialog {
    width: 100%;
    height: 100%;
    max-width: none !important;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#resultsModal .consulta-result-header,
#resultsModal .consulta-result-footer {
    flex: 0 0 auto;
}

#resultsModal .consulta-result-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* En escritorio, amplía la columna de datos sin aumentar el modal. */
@media (min-width: 1024px) {
    #resultsModal .consulta-result-body {
        grid-template-columns: clamp(285px, 29%, 325px) minmax(0, 1fr) !important;
    }

    #resultsModal .consulta-result-summary,
    #resultsModal .consulta-result-message {
        grid-column: auto !important;
    }

    #resultsModal .consulta-result-summary {
        padding-right: 24px !important;
    }
}

#resultsModal .consulta-result-summary {
    min-height: 0;
    overflow-y: auto;
}

#resultsModal .consulta-result-message {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#resultsModal .consulta-email-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    overscroll-behavior: contain;
}

@media (max-width: 1023px) {
    .modal {
        padding: 12px;
    }

    .modal-content-container {
        width: min(94vw, 900px);
        height: min(650px, calc(100vh - var(--public-header-height, 72px) - var(--public-footer-height, 62px) - 24px));
        max-height: calc(100vh - var(--public-header-height, 72px) - var(--public-footer-height, 62px) - 24px);
    }

    #resultsModal .consulta-result-body {
        overflow-y: auto;
    }

    #resultsModal .consulta-email-scroll {
        min-height: 340px;
        max-height: 52vh;
    }
}

@media (max-width: 760px) {
    .modal {
        inset: var(--public-header-height, 64px) 0 0 0;
        padding: 10px;
        align-items: flex-start;
    }

    .modal-content-container {
        width: 100%;
        height: min(680px, calc(100vh - var(--public-header-height, 64px) - 20px));
        max-height: calc(100vh - var(--public-header-height, 64px) - 20px);
    }

    #resultsModal .consulta-email-scroll {
        min-height: 300px;
        max-height: 48vh;
    }
}

@media (max-width: 640px) {
    #resultsModal .consulta-email-scroll {
        min-height: 260px;
        max-height: 44vh;
    }
}

/* Estilos para el contenido del correo (Tailwind Prose) */
.prose { max-width: 100%; }
.prose img { max-width: 100%; height: auto; }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { border: 1px solid #ccc; padding: 8px; text-align: left; }
.prose a { color: #3b82f6; text-decoration: underline; }
.prose code { background-color: #f3f4f6; padding: 2px 4px; border-radius: 4px; font-size: 0.9em; }
.prose pre { background-color: #f3f4f6; padding: 1em; border-radius: 8px; overflow-x: auto; }

/* Estilo para el botón de acción */
.result-action-button-container {
    white-space: nowrap; /* Evita que el botón de acción se divida en varias líneas */
}


/* Consulta premium: el fondo permanece visible y el formulario flota sobre la imagen. */
.main-content-box{max-width:1080px!important;min-height:0!important;padding:22px!important;border:1px solid rgba(255,255,255,.82)!important;border-radius:22px!important;background:rgba(255,255,255,.91)!important;box-shadow:0 30px 78px rgba(15,23,42,.34)!important;backdrop-filter:blur(18px) saturate(1.06);-webkit-backdrop-filter:blur(18px) saturate(1.06)}
.main-content-box>div{align-items:stretch}.main-content-box .bg-gray-50{background:rgba(248,250,252,.78)!important;border-color:rgba(203,213,225,.76)!important}.platform-box{border-color:rgba(255,255,255,.18)!important;box-shadow:0 8px 20px rgba(15,23,42,.12)!important}.simple-search-icon{color:var(--brand-primary)!important}.main-content-box input{background:rgba(255,255,255,.96)!important}.main-content-box button[type=submit]{background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary))!important}.main-content-box h2,.main-content-box h3{color:var(--brand-primary)!important}
@media(max-width:767px){.main-content-box{padding:12px!important;border-radius:18px!important}.main-content-box .p-4,.main-content-box .p-6{padding:14px!important}}
.platform-loading,.platform-empty{grid-column:1/-1;min-height:168px;display:grid;place-items:center;padding:20px;border:1px dashed #cbd5e1;border-radius:16px;background:rgba(248,250,252,.82);color:#64748b;text-align:center}.platform-loading i,.platform-empty i{display:block;margin-bottom:10px;color:var(--brand-primary);font-size:24px}.consulta-private-link{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid #e2e8f0;border-radius:13px;background:rgba(248,250,252,.78);color:#475569;font-size:11px}.consulta-private-link a{display:inline-flex;align-items:center;gap:7px;color:var(--brand-primary);font-weight:850;white-space:nowrap}.platform-box{position:relative;min-height:74px}.platform-box.selected-platform::after{content:'✓';position:absolute;top:7px;right:8px;width:20px;height:20px;display:grid;place-items:center;border-radius:999px;background:#fff;color:var(--brand-primary);font-size:11px;font-weight:900}

/* AFENIXX-CONSULTA-PLATAFORMAS-V4 */
#plataformas-container.consulta-platform-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;max-height:348px;overflow-y:auto;overscroll-behavior:contain;padding:3px 5px 6px;margin-bottom:8px!important;scrollbar-width:thin}.consulta-platform-grid .platform-box{min-width:0;min-height:102px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:7px!important;padding:9px 7px!important;border:1px solid #dfe7f1!important;border-radius:16px!important;background:#fff!important;color:#172033!important;text-align:center!important;box-shadow:0 9px 23px rgba(15,23,42,.065)!important;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease!important}.consulta-platform-grid .platform-box:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand-primary) 32%,#dfe7f1)!important;box-shadow:0 13px 28px rgba(15,23,42,.10)!important}.consulta-platform-grid .platform-box.selected-platform{border-color:var(--brand-primary)!important;background:linear-gradient(145deg,var(--brand-primary),var(--brand-secondary))!important;color:#fff!important;box-shadow:0 14px 30px color-mix(in srgb,var(--brand-primary) 24%,transparent)!important}.consulta-platform-grid .logo-circle{width:58px!important;height:58px!important;display:grid!important;place-items:center!important;flex:0 0 58px!important;margin:0!important;overflow:hidden!important;border:1px solid #e5eaf1!important;border-radius:16px!important;background:#fff!important;box-shadow:0 7px 17px rgba(15,23,42,.08)!important}.consulta-platform-grid .logo-circle img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;padding:5px!important;object-fit:contain!important;border-radius:inherit!important}.consulta-platform-grid .logo-circle img.af-logo-solid-art{padding:0!important;object-fit:cover!important;transform:scale(1.12)!important}.consulta-platform-grid .platform-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;font-weight:900;line-height:1.2}.consulta-platform-count{display:inline-flex;align-items:center;justify-content:center;gap:7px;color:#64748b;font-size:10px;font-weight:800}.consulta-platform-count i{color:var(--brand-primary)}
@media(max-width:520px){#plataformas-container.consulta-platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:330px}.consulta-platform-grid .platform-box{min-height:94px!important}.consulta-platform-grid .logo-circle{width:52px!important;height:52px!important;flex-basis:52px!important}}
</style>


<div class="main-content-box flex-grow flex flex-col <?php echo htmlspecialchars($ui_box_bg_color ?? 'bg-white'); ?> <?php echo htmlspecialchars($ui_box_bg_opacity ?? 'bg-opacity-95'); ?> p-4 md:p-6 rounded-lg shadow-xl w-full max-w-6xl mx-auto">
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 h-full">
        <div class="flex flex-col p-4 md:col-span-1 justify-center">
            <div class="text-center mb-6">
                <i class="fas fa-magnifying-glass simple-search-icon"></i>
                <h2 class="text-2xl font-bold <?php echo htmlspecialchars($ui_box_text_color ?? 'text-red-600'); ?>"><?= htmlspecialchars((string) ($ui_consulta_title ?? 'Consulta y validación de códigos')) ?></h2>
                <p class="text-base text-slate-700 font-semibold"><?= htmlspecialchars((string) ($ui_consulta_subtitle ?? 'Selecciona una plataforma e ingresa el correo completo.')) ?></p>
            </div>
            <div id="plataformas-container" class="consulta-platform-grid">
                <?php if (!empty($initialPlatforms)): ?>
                    <?php foreach (array_slice($initialPlatforms, 0, 6) as $platform): ?>
                        <?php
                        $platformId = (int) ($platform['id'] ?? 0);
                        $platformName = trim((string) ($platform['nombre'] ?? 'Plataforma'));
                        $platformImage = trim((string) ($platform['imagen_url'] ?? ''));
                        if ($platformImage === '') {
                            $platformImage = 'https://placehold.co/80x80/ffffff/64748b?text=Logo';
                        }
                        ?>
                        <div
                            class="platform-box"
                            role="button"
                            tabindex="0"
                            data-id="<?= $platformId ?>"
                            aria-label="Seleccionar <?= htmlspecialchars($platformName, ENT_QUOTES, 'UTF-8') ?>"
                        >
                            <div class="logo-circle">
                                <img
                                    src="<?= htmlspecialchars($platformImage, ENT_QUOTES, 'UTF-8') ?>"
                                    alt="<?= htmlspecialchars($platformName, ENT_QUOTES, 'UTF-8') ?>"
                                    loading="lazy"
                                    onload="window.afNormalizeConsultPlatformLogo&&window.afNormalizeConsultPlatformLogo(this)"
                                    onerror="this.src='https://placehold.co/80x80/ffffff/64748b?text=Logo'"
                                >
                            </div>
                            <span
                                class="platform-name"
                                title="<?= htmlspecialchars($platformName, ENT_QUOTES, 'UTF-8') ?>"
                            ><?= htmlspecialchars($platformName, ENT_QUOTES, 'UTF-8') ?></span>
                        </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="platform-loading">
                        <span>
                            <i class="fas fa-circle-notch fa-spin"></i>
                            Cargando plataformas disponibles…
                        </span>
                    </div>
                <?php endif; ?>
            </div>
            <div id="platform-pagination" class="text-sm text-gray-500 text-center mb-6">
                <?php if (count($initialPlatforms) > 6): ?>
                    <div class="af-v12-platform-pagination" aria-label="Navegación de plataformas">
                        <button
                            type="button"
                            id="prev-platform"
                            class="af-v12-page-arrow"
                            aria-label="Ver plataformas anteriores"
                            disabled
                        ><i class="fas fa-chevron-left"></i></button>
                        <span class="af-v12-page-indicator">
                            Página 1 de <?= (int) ceil(count($initialPlatforms) / 6) ?>
                            · <?= count($initialPlatforms) ?> plataformas
                        </span>
                        <button
                            type="button"
                            id="next-platform"
                            class="af-v12-page-arrow"
                            aria-label="Ver más plataformas"
                        ><i class="fas fa-chevron-right"></i></button>
                    </div>
                <?php endif; ?>
            </div>
            <div class="mt-auto">
                <label for="correo" class="text-sm font-semibold text-gray-700 mb-2 block"><i class="fas fa-envelope mr-2"></i><?= htmlspecialchars((string) ($ui_consulta_email_label ?? 'Consultar correo')) ?></label>
                <form id="consultaForm" class="flex items-center">
                    <input type="hidden" id="selected_platform_id" name="plataforma">
                    <input type="email" id="correo" name="correo" placeholder="<?= htmlspecialchars((string) ($ui_consulta_email_placeholder ?? 'Ingresa la cuenta a consultar'), ENT_QUOTES) ?>" class="w-full py-2 px-3 border border-gray-300 rounded-l-md focus:ring-red-500 focus:border-red-500" required>
                    <button type="submit" id="submitBtn" class="<?php echo htmlspecialchars($ui_color_primary_bg ?? 'bg-red-600'); ?> text-white font-bold py-2 px-6 rounded-r-md hover:bg-red-700 transition-colors"><?= htmlspecialchars((string) ($ui_consulta_button_text ?? 'Consultar')) ?></button>
                </form>
            </div>
        </div>
        <div class="bg-gray-50 p-6 rounded-lg border flex flex-col md:col-span-1">
            <div id="instructions-container">
                <h3 class="text-xl font-bold mb-4 <?php echo htmlspecialchars($ui_box_text_color ?? 'text-red-600'); ?>"><?= htmlspecialchars((string) ($ui_consulta_instructions_title ?? 'Instrucciones de uso')) ?></h3>
                <div class="af-consulta-instructions" role="list">
                    <article class="af-consulta-instruction" role="listitem">
                        <span class="af-consulta-step">1</span>
                        <span class="af-consulta-step-icon"><i class="fas fa-layer-group"></i></span>
                        <span class="af-consulta-step-copy">
                            <strong>Elige la plataforma</strong>
                            <small><?= htmlspecialchars((string) ($ui_consulta_instruction_1 ?? 'Selecciona la plataforma de la lista.')) ?></small>
                        </span>
                    </article>
                    <article class="af-consulta-instruction" role="listitem">
                        <span class="af-consulta-step">2</span>
                        <span class="af-consulta-step-icon"><i class="fas fa-envelope"></i></span>
                        <span class="af-consulta-step-copy">
                            <strong>Ingresa el correo completo</strong>
                            <small><?= htmlspecialchars((string) ($ui_consulta_instruction_2 ?? 'Ingresa el correo electrónico completo.')) ?></small>
                        </span>
                    </article>
                    <article class="af-consulta-instruction" role="listitem">
                        <span class="af-consulta-step">3</span>
                        <span class="af-consulta-step-icon"><i class="fas fa-magnifying-glass"></i></span>
                        <span class="af-consulta-step-copy">
                            <strong>Realiza la consulta</strong>
                            <small><?= htmlspecialchars((string) ($ui_consulta_instruction_3 ?? 'Pulsa el botón Consultar.')) ?></small>
                        </span>
                    </article>
                    <article class="af-consulta-instruction" role="listitem">
                        <span class="af-consulta-step">4</span>
                        <span class="af-consulta-step-icon"><i class="fas fa-list-check"></i></span>
                        <span class="af-consulta-step-copy">
                            <strong>Revisa los resultados</strong>
                            <small><?= htmlspecialchars((string) ($ui_consulta_instruction_4 ?? 'Revisa los mensajes encontrados.')) ?></small>
                        </span>
                    </article>
                    <article class="af-consulta-instruction" role="listitem">
                        <span class="af-consulta-step">5</span>
                        <span class="af-consulta-step-icon"><i class="fas fa-lock-open"></i></span>
                        <span class="af-consulta-step-copy">
                            <strong>Abre el contenido autorizado</strong>
                            <small><?= htmlspecialchars((string) ($ui_consulta_instruction_5 ?? 'Abre el contenido público o ingresa con ID para el contenido privado.')) ?></small>
                        </span>
                    </article>
                </div>
            </div>
            <div id="results-container" class="hidden flex-grow flex flex-col">
                <h3 class="text-xl font-bold mb-4 text-red-600">Resultados Encontrados</h3>
                <div id="results-list" class="flex-grow overflow-y-auto pr-2"></div>
            </div>
        </div>
    </div>
    
</div>
<script>
window.AfenixConsultaConfig = <?= af_consulta_json([
    'buttonLabel' => (string) ($ui_consulta_button_text ?? 'Consultar'),
    'userId' => $user_id_for_js,
    'initialPlatforms' => $initialPlatforms,
    'resume' => [
        'enabled' => $resumeRequested || ($resumePlatform > 0 && $resumeEmail !== ''),
        'plataforma' => $resumePlatform,
        'correo' => $resumeEmail,
        'asunto' => $resumeSubject,
    ],
]) ?>;
</script>
<link rel="stylesheet" href="assets/css/consulta-final.css?v=2026.07.26-v18">
<script src="assets/js/consulta-final.js?v=2026.07.26-v18" defer></script>

<?php
require_once 'footer_publico.php';
?>