@extends('public.layouts.app')

@section('title', 'Resultados ' . $concurso->nombre . ($concurso->anio ? ' ' . $concurso->anio : ''))

@section('styles')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@400;600;700;800&display=swap');
    :root {
        --onem-primary: #1a237e; --onem-secondary: #283593; --onem-accent: #1565c0;
        --onem-gold: #f9a825;    --onem-bg: #f0f4f8;        --onem-card: #ffffff;
        --onem-border: #e0e7ef;  --onem-text: #1a237e;
        --onem-shadow: 0 4px 24px rgba(26,35,126,.10);
        --onem-shadow-lg: 0 8px 40px rgba(26,35,126,.16);
    }
    body { font-family: 'Inter', sans-serif; background: var(--onem-bg); }
    /* HERO */
    .onem-hero { background: linear-gradient(135deg,#0d1b6e 0%,#1a237e 40%,#283593 70%,#1565c0 100%); padding:56px 0 40px; position:relative; overflow:hidden; }
    .onem-hero::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
    .onem-hero::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:40px; background:var(--onem-bg); clip-path:ellipse(55% 100% at 50% 100%); }
    .onem-hero-content { position:relative; z-index:2; text-align:center; }
    .onem-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:50px; padding:6px 20px; font-size:13px; font-weight:600; color:#ffe082; margin-bottom:18px; backdrop-filter:blur(8px); letter-spacing:.5px; }
    .onem-hero-title { font-family:'Poppins',sans-serif; font-size:2.4rem; font-weight:800; color:#fff; margin:0 0 10px; line-height:1.15; text-shadow:0 2px 12px rgba(0,0,0,.18); }
    .onem-hero-title span { color:#ffe082; }
    .onem-hero-subtitle { color:rgba(255,255,255,.80); font-size:1.05rem; margin-bottom:28px; }
    .onem-hero-stats { display:flex; justify-content:center; gap:24px; flex-wrap:wrap; }
    .onem-stat-pill { background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.20); border-radius:16px; padding:12px 20px; color:#fff; text-align:center; backdrop-filter:blur(6px); min-width:110px; }
    .onem-stat-pill .val { font-size:1.7rem; font-weight:800; color:#ffe082; line-height:1; }
    .onem-stat-pill .lbl { font-size:11px; font-weight:500; color:rgba(255,255,255,.75); margin-top:2px; text-transform:uppercase; letter-spacing:.5px; }
    /* CONTROLS */
    .onem-controls { background:var(--onem-card); border-radius:18px; box-shadow:var(--onem-shadow); padding:20px 28px; margin:30px 0 18px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; border:1px solid var(--onem-border); }
    .onem-filter-group { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
    .onem-filter-btn { padding:8px 20px; border-radius:50px; border:2px solid var(--onem-border); background:#f8fafc; color:#555; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; font-family:'Inter',sans-serif; }
    .onem-filter-btn:hover,.onem-filter-btn.active { background:var(--onem-primary); border-color:var(--onem-primary); color:#fff; box-shadow:0 2px 12px rgba(26,35,126,.25); }
    .onem-filter-btn.clasificado-btn { background:#fff8e1; border-color:#f9a825; color:#e65100; }
    .onem-filter-btn.clasificado-btn.active { background:#f9a825; border-color:#f9a825; color:#fff; }
    .onem-search { display:flex; align-items:center; gap:8px; background:#f0f4f8; border:1.5px solid var(--onem-border); border-radius:50px; padding:8px 18px; }
    .onem-search input { border:none; background:transparent; outline:none; font-size:14px; color:#333; font-family:'Inter',sans-serif; width:200px; }
    /* INFO CARDS */
    .onem-info-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:22px; }
    .onem-info-card { background:var(--onem-card); border-radius:14px; padding:18px 22px; border:1px solid var(--onem-border); box-shadow:var(--onem-shadow); display:flex; align-items:center; gap:14px; }
    .onem-info-card .icon-wrap { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
    .onem-info-card .card-val { font-size:1.6rem; font-weight:800; color:var(--onem-text); line-height:1; }
    .onem-info-card .card-lbl { font-size:12px; color:#888; font-weight:500; margin-top:3px; }
    /* WINNERS */
    .onem-winners-section { background:linear-gradient(135deg,#fff8e1,#fffde7); border:2px solid #f9a825; border-radius:16px; padding:20px 24px; margin-bottom:22px; }
    .onem-winners-title { font-size:16px; font-weight:700; color:#e65100; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
    .onem-winners-grid { display:flex; flex-wrap:wrap; gap:10px; }
    .winner-chip { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1.5px solid #f9a825; border-radius:50px; padding:7px 16px; font-size:13px; font-weight:600; color:#5d4037; box-shadow:0 2px 8px rgba(249,168,37,.2); }
    .winner-chip .rank-num { background:#f9a825; color:#fff; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; }
    .nota-pts { background:var(--onem-primary); color:#ffe082; border-radius:50px; padding:2px 8px; font-size:11px; font-weight:700; }
    /* TABLE */
    .onem-table-wrapper { background:var(--onem-card); border-radius:18px; box-shadow:var(--onem-shadow-lg); border:1px solid var(--onem-border); animation:fadeSlideIn .5s ease both; }
    .onem-scroll-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:18px; -webkit-mask-image:-webkit-radial-gradient(white,black); }
    .onem-table { width:100%; min-width:900px; border-collapse:collapse; font-size:13px; }
    .onem-table thead { background:linear-gradient(135deg,#0d1b6e,#1a237e,#283593); position:sticky; top:0; z-index:10; }
    .onem-table thead tr:first-child th { padding:14px 10px 10px; color:#ffe082; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; border-bottom:1px solid rgba(255,255,255,.10); text-align:center; }
    .onem-table thead tr:last-child th { padding:10px 8px 14px; color:#fff; font-size:12px; font-weight:600; text-align:center; white-space:nowrap; }
    .onem-table thead tr:last-child th.col-name { text-align:left; padding-left:16px; }
    .onem-table th.col-p { min-width:44px; }
    .onem-table tbody tr { transition:background .18s; }
    .onem-table tbody tr:hover { background:rgba(26,35,126,.04) !important; }
    .onem-table tbody tr.clasificado-row { background:#fffde7; }
    .onem-table td { padding:11px 8px; border-bottom:1px solid #f0f4f8; text-align:center; color:#2d3748; vertical-align:middle; }
    .onem-table td.col-name { text-align:left; padding-left:16px; font-weight:600; color:var(--onem-text); white-space:nowrap; }
    .onem-table tbody tr:last-child td { border-bottom:none; }
    /* RANK CELLS */
    .num-cell { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; font-weight:700; font-size:12px; }
    .num-cell.rank-1 { background:linear-gradient(135deg,#f9a825,#ff8f00); color:#fff; box-shadow:0 2px 8px rgba(249,168,37,.5); }
    .num-cell.rank-2 { background:linear-gradient(135deg,#90a4ae,#607d8b); color:#fff; }
    .num-cell.rank-3 { background:linear-gradient(135deg,#a1887f,#795548); color:#fff; }
    .num-cell.rank-other { background:#eef2f7; color:#555; }
    /* SECCION / NOTA BADGES */
    .seccion-badge { display:inline-block; padding:3px 12px; border-radius:50px; font-size:11px; font-weight:700; letter-spacing:.5px; }
    .nota-badge { display:inline-block; padding:4px 12px; border-radius:50px; font-size:13px; font-weight:800; min-width:48px; text-align:center; }
    .nota-high { background:linear-gradient(135deg,#1a237e,#283593); color:#fff; box-shadow:0 2px 10px rgba(26,35,126,.3); }
    .nota-mid  { background:linear-gradient(135deg,#0288d1,#0277bd); color:#fff; }
    .nota-low  { background:linear-gradient(135deg,#00897b,#00796b); color:#fff; }
    .nota-zero { background:#fafafa; color:#999; border:1px solid #eee; }
    /* CLASIFICADO */
    .clasificado-badge { display:inline-flex; align-items:center; justify-content:center; gap:3px; background:linear-gradient(135deg,#f9a825,#ffca28); color:#5d4037; font-size:9px; font-weight:800; padding:2px 6px; border-radius:4px; white-space:nowrap; text-transform:uppercase; vertical-align:middle; box-shadow:0 1px 4px rgba(249,168,37,.35); }
    /* RESPUESTA */
    .p-val { font-weight:600; }
    .p-ok  { color:#2e7d32; }
    .p-mal { color:#c62828; }
    .p-none { color:#ccc; }
    /* ANIM */
    @keyframes fadeSlideIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
    .onem-info-card { animation:fadeSlideIn .4s ease both; }
    /* RESPONSIVE */
    @media(max-width:768px) {
        .onem-hero { padding:28px 0 20px; }
        .onem-hero-title { font-size:1.45rem; }
        .onem-controls { flex-direction:column; }
        .onem-search input { width:100%; }
    }
    @media(max-width:480px) {
        .onem-hero-title { font-size:1.1rem; }
        .onem-info-cards { grid-template-columns:1fr 1fr; }
    }
</style>
@endsection

@section('content')
@php
    $secciones  = $participantes->pluck('seccion')->filter()->unique()->sort()->values();
    $total      = $participantes->count();
    $totalClasif = $participantes->where('clasificado', true)->count();
    $maxNota    = $participantes->max('nota_calculada') ?? 0;
    $puntajeMax = $concurso->puntajeMaximo();
@endphp

{{-- ===== HERO ===== --}}
<section class="onem-hero">
    <div class="container onem-hero-content">
        <div style="display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px;flex-wrap:wrap;">
            <div class="onem-badge">
                <i class="bi bi-trophy-fill"></i>
                {{ $concurso->sigla ?? 'CONCURSO' }}
                @if($concurso->patrocinador) — {{ $concurso->patrocinador }} @endif
            </div>
            @if($concurso->etapa)
                <div style="background:rgba(255,255,255,.10);border:1px solid rgba(255,220,100,.40);border-radius:50px;padding:5px 18px;display:flex;align-items:center;gap:8px;">
                    <span style="font-size:13px;font-weight:700;color:#ffe082;">{{ $concurso->etapa }}</span>
                </div>
            @endif
        </div>
        <h1 class="onem-hero-title">
            {{ $concurso->sigla ?? $concurso->nombre }}
            @if($concurso->patrocinador) <span>{{ $concurso->patrocinador }}</span> @endif
            @if($concurso->anio) {{ $concurso->anio }} @endif
            @if($concurso->grado || $concurso->nivel_educativo)
                <br>
                <span>{{ $concurso->grado }} {{ $concurso->nivel_educativo }}</span>
                @if($concurso->categoria) &mdash; Categoría <span>{{ $concurso->categoria }}</span> @endif
            @endif
        </h1>
        <p class="onem-hero-subtitle">
            {{ $concurso->nombre }}
            @if($concurso->etapa) &nbsp;&middot;&nbsp; <strong style="color:#ffe082;">{{ $concurso->etapa }}</strong> @endif
            @if($concurso->nivel) &nbsp;&middot;&nbsp; <strong style="color:#ffe082;">{{ $concurso->nivel }}</strong> @endif
            @if($concurso->categoria) &nbsp;&middot;&nbsp; Categoría <strong style="color:#ffe082;">{{ $concurso->categoria }}</strong> @endif
            &nbsp;&middot;&nbsp; Resultados oficiales
        </p>
        <div class="onem-hero-stats">
            <div class="onem-stat-pill">
                <div class="val">{{ $total }}</div>
                <div class="lbl">Participantes</div>
            </div>
            <div class="onem-stat-pill">
                <div class="val">{{ $totalClasif }}</div>
                <div class="lbl">Clasificados</div>
            </div>
            <div class="onem-stat-pill">
                <div class="val">{{ $concurso->num_preguntas }}</div>
                <div class="lbl">Preguntas</div>
            </div>
            <div class="onem-stat-pill">
                <div class="val">{{ $puntajeMax }}</div>
                <div class="lbl">Puntaje Máx.</div>
            </div>
            <div class="onem-stat-pill">
                <div class="val">{{ $concurso->puntos_por_pregunta }}</div>
                <div class="lbl">Pts por Preg.</div>
            </div>
            @if($concurso->etapa)
            <div class="onem-stat-pill" style="border-color:rgba(255,220,100,.5);">
                <div class="val" style="font-size:1rem;">{{ $concurso->etapa }}</div>
                <div class="lbl">{{ $concurso->nivel }}</div>
            </div>
            @endif
        </div>
    </div>
</section>

{{-- ===== CONTENIDO PRINCIPAL ===== --}}
<section class="py-4" style="min-height:60vh;">
    <div class="container">

        {{-- INFO CARDS --}}
        <div class="onem-info-cards mt-3">
            <div class="onem-info-card">
                <div class="icon-wrap" style="background:#e8eaf6;"><i class="bi bi-people-fill" style="color:#3949ab;"></i></div>
                <div><div class="card-val">{{ $total }}</div><div class="card-lbl">Total Participantes</div></div>
            </div>
            <div class="onem-info-card">
                <div class="icon-wrap" style="background:#fff8e1;"><i class="bi bi-star-fill" style="color:#f9a825;"></i></div>
                <div><div class="card-val">{{ $totalClasif }}</div><div class="card-lbl">Clasificados Sig. Etapa</div></div>
            </div>
            <div class="onem-info-card">
                <div class="icon-wrap" style="background:#e0f2f1;"><i class="bi bi-bar-chart-fill" style="color:#00897b;"></i></div>
                <div><div class="card-val">{{ $maxNota }}</div><div class="card-lbl">Puntaje Máximo Logrado</div></div>
            </div>
            @if($secciones->count() > 1)
            <div class="onem-info-card">
                <div class="icon-wrap" style="background:#f3e5f5;"><i class="bi bi-layers-fill" style="color:#8e24aa;"></i></div>
                <div>
                    <div class="card-val">{{ $secciones->map(fn($s) => $concurso->grado . $s)->join(' / ') }}</div>
                    <div class="card-lbl">Secciones Participantes</div>
                </div>
            </div>
            @endif
        </div>

        {{-- CLASIFICADOS --}}
        @if($totalClasif > 0)
        <div class="onem-winners-section">
            <div class="onem-winners-title">
                <i class="bi bi-award-fill"></i>
                Estudiantes Clasificados a la Siguiente Etapa
            </div>

            @php
                $clasifGral   = $participantes->where('clasificado_general', true);
                $clasifMujer  = $participantes->where('clasificado_mujer', true);
                $clasifVaron  = $participantes->where('clasificado_varon', true);
            @endphp

            {{-- General --}}
            @if($clasifGral->count() > 0)
            <div class="mb-3">
                <div style="font-size:12px;font-weight:700;color:#1b5e20;margin-bottom:8px;">
                    <span style="background:#e8f5e9;border:1px solid #a5d6a7;border-radius:50px;padding:3px 12px;">⭐ Clasificados (General)</span>
                </div>
                <div class="onem-winners-grid">
                    @foreach($clasifGral->values() as $rank => $p)
                    <div class="winner-chip">
                        <div class="rank-num">{{ $rank + 1 }}</div>
                        {{ strtoupper($p->apellidos) }} {{ $p->nombres }}
                        <span class="seccion-badge" style="background:#e8eaf6;color:#3949ab;">{{ $p->grado }}{{ $p->seccion }}</span>
                        @if($p->tiempo)<span style="font-size:11px;color:#888;"><i class="bi bi-clock"></i> {{ substr($p->tiempo,0,5) }}</span>@endif
                        <span class="nota-pts">{{ $p->nota_calculada }} pts</span>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- Por género --}}
            @if($clasifMujer->count() > 0)
            <div class="mb-2">
                <div style="font-size:12px;font-weight:700;color:#880e4f;margin-bottom:8px;">
                    <span style="background:#fce4ec;border:1px solid #f48fb1;border-radius:50px;padding:3px 12px;">&#9792; Mujeres Clasificadas</span>
                </div>
                <div class="onem-winners-grid">
                    @foreach($clasifMujer->values() as $rank => $p)
                    <div class="winner-chip" style="border-color:#f48fb1;">
                        <div class="rank-num" style="background:#e91e63;">{{ $rank + 1 }}</div>
                        {{ strtoupper($p->apellidos) }} {{ $p->nombres }}
                        <span class="seccion-badge" style="background:#e8eaf6;color:#3949ab;">{{ $p->grado }}{{ $p->seccion }}</span>
                        @if($p->tiempo)<span style="font-size:11px;color:#888;"><i class="bi bi-clock"></i> {{ substr($p->tiempo,0,5) }}</span>@endif
                        <span class="nota-pts">{{ $p->nota_calculada }} pts</span>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

            @if($clasifVaron->count() > 0)
            <div>
                <div style="font-size:12px;font-weight:700;color:#0d47a1;margin-bottom:8px;">
                    <span style="background:#e3f2fd;border:1px solid #90caf9;border-radius:50px;padding:3px 12px;">&#9794; Varones Clasificados</span>
                </div>
                <div class="onem-winners-grid">
                    @foreach($clasifVaron->values() as $rank => $p)
                    <div class="winner-chip" style="border-color:#90caf9;">
                        <div class="rank-num" style="background:#1565c0;">{{ $rank + 1 }}</div>
                        {{ strtoupper($p->apellidos) }} {{ $p->nombres }}
                        <span class="seccion-badge" style="background:#e8eaf6;color:#3949ab;">{{ $p->grado }}{{ $p->seccion }}</span>
                        @if($p->tiempo)<span style="font-size:11px;color:#888;"><i class="bi bi-clock"></i> {{ substr($p->tiempo,0,5) }}</span>@endif
                        <span class="nota-pts">{{ $p->nota_calculada }} pts</span>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
        @endif

        {{-- CONTROLES --}}
        <div class="onem-controls">
            <div class="onem-filter-group">
                <span style="font-size:13px;font-weight:600;color:#555;">Filtrar:</span>
                <button class="onem-filter-btn active" onclick="filtrarTabla('todos',this)">Todos</button>
                <button class="onem-filter-btn clasificado-btn" onclick="filtrarTabla('clasificado',this)">&#11088; Clasificados</button>
                @foreach($secciones as $secc)
                    <button class="onem-filter-btn" onclick="filtrarTabla('{{ $secc }}',this)">Sección {{ $concurso->grado }}{{ $secc }}</button>
                @endforeach
            </div>
            <div class="onem-search">
                <i class="bi bi-search"></i>
                <input type="text" id="buscadorResultado" placeholder="Buscar estudiante..." oninput="buscarEstudiante()">
            </div>
        </div>

        {{-- TABLA PRINCIPAL --}}
        <div class="onem-scroll-wrapper">
            <div class="onem-table-wrapper">
                {{-- HEADER CON RESPUESTAS CORRECTAS --}}
                <div style="padding:10px 16px;background:linear-gradient(90deg,rgba(26,35,126,.06),transparent);border-left:4px solid var(--onem-primary);font-size:12.5px;color:#555;">
                    <strong>Respuestas Correctas Oficiales:</strong>
                    @foreach($concurso->preguntas as $preg)
                        &nbsp; P{{ $preg->numero }}: <strong>{{ $preg->respuesta_correcta }}</strong>
                        @if(!$loop->last) &nbsp;|&nbsp; @endif
                    @endforeach
                    <span style="float:right;font-size:12px;background:#e8eaf6;border-radius:8px;padding:4px 12px;color:#3949ab;font-weight:600;">
                        <i class="bi bi-check-circle-fill me-1"></i>
                        Cada correcta = {{ $concurso->puntos_por_pregunta }} pts &nbsp;|&nbsp; Máximo: {{ $puntajeMax }} pts
                    </span>
                </div>

                <table class="onem-table" id="tablaResultado">
                    <thead>
                        <tr>
                            <th colspan="2" style="text-align:left;padding-left:16px;">Estudiante</th>
                            <th>SECCIÓN</th>
                            <th colspan="{{ $concurso->num_preguntas }}">Respuesta del alumno (✓ = correcto · ✗ = incorrecto)</th>
                            <th colspan="2">Resultado</th>
                        </tr>
                        <tr style="background:rgba(0,0,0,.18);">
                            <th colspan="3" style="text-align:right;padding-right:12px;font-size:11px;color:#ffe082;font-style:italic;">Resp. correcta →</th>
                            @foreach($concurso->preguntas as $preg)
                                <th class="col-p" style="color:#ffe082;font-size:12px;">{{ $preg->respuesta_correcta }}</th>
                            @endforeach
                            <th style="color:#ffe082;font-size:11px;">/ {{ $puntajeMax }} pts</th>
                            <th></th>
                        </tr>
                        <tr>
                            <th style="width:42px;">N°</th>
                            <th class="col-name" style="min-width:220px;">Apellidos y Nombres</th>
                            <th style="min-width:80px;">GRADO</th>
                            @foreach($concurso->preguntas as $preg)
                                <th class="col-p">P{{ $preg->numero }}</th>
                            @endforeach
                            <th style="min-width:80px;">NOTA FINAL</th>
                            <th style="min-width:70px;">Tiempo</th>
                        </tr>
                    </thead>
                    <tbody id="cuerpoTablaResultado">
                        @foreach($participantes as $rank => $p)
                        @php
                            $esClasif  = $p->clasificado ?? false;
                            $respIndex = $p->respuestas->keyBy('pregunta_numero');
                            $nota      = $p->nota_calculada;
                            $pct       = $puntajeMax > 0 ? ($nota / $puntajeMax) * 100 : 0;
                            $notaClass = $pct >= 80 ? 'nota-high' : ($pct >= 50 ? 'nota-mid' : ($pct >= 20 ? 'nota-low' : 'nota-zero'));
                            $rankClass = $rank === 0 ? 'rank-1' : ($rank === 1 ? 'rank-2' : ($rank === 2 ? 'rank-3' : 'rank-other'));
                        @endphp
                        <tr class="{{ $esClasif ? 'clasificado-row' : '' }}"
                            data-seccion="{{ $p->seccion }}"
                            data-clasificado="{{ $esClasif ? '1' : '0' }}">
                            <td><span class="num-cell {{ $rankClass }}">{{ $rank + 1 }}</span></td>
                            <td class="col-name">
                                {{ strtoupper($p->apellidos) }} {{ $p->nombres }}
                                @if($esClasif)
                                    <span class="clasificado-badge ms-1" title="Clasificado"><i class="bi bi-star-fill"></i></span>
                                @endif
                            </td>
                            <td>
                                <span class="seccion-badge" style="background:#e8eaf6;color:#3949ab;">{{ $p->grado }}{{ $p->seccion }}</span>
                            </td>
                            {{-- Respuestas por pregunta --}}
                            @foreach($concurso->preguntas as $preg)
                                @php
                                    $r      = $respIndex->get($preg->numero);
                                    $alumno = $r ? trim((string)$r->respuesta_alumno) : null;
                                    $corr   = trim((string)$preg->respuesta_correcta);
                                    $ok     = $alumno !== null && $alumno !== '' && $alumno === $corr;
                                @endphp
                                <td class="p-val">
                                    @if($alumno === null || $alumno === '')
                                        <span class="p-none">—</span>
                                    @elseif($ok)
                                        <span class="p-ok">{{ $alumno }}</span>
                                    @else
                                        <span class="p-mal">{{ $alumno }}</span>
                                    @endif
                                </td>
                            @endforeach
                            {{-- NOTA --}}
                            <td>
                                <span class="nota-badge {{ $notaClass }}">{{ $nota }}</span>
                            </td>
                            {{-- TIEMPO --}}
                            <td style="font-size:12px;color:#888;">
                                @if($p->tiempo)
                                    <i class="bi bi-clock"></i> {{ substr($p->tiempo, 0, 5) }}
                                @else —
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Fecha publicación --}}
        @if($concurso->fecha_concurso)
        <div class="text-center text-muted small mt-3">
            <i class="bi bi-calendar3 me-1"></i>
            Fecha del concurso: <strong>{{ $concurso->fecha_concurso->format('d/m/Y') }}</strong>
        </div>
        @endif

    </div>
</section>
@endsection

@section('scripts')
<script>
function filtrarTabla(filtro, btn) {
    document.querySelectorAll('.onem-filter-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    document.querySelectorAll('#cuerpoTablaResultado tr').forEach(tr => {
        if (filtro === 'todos') { tr.style.display = ''; return; }
        if (filtro === 'clasificado') { tr.style.display = tr.dataset.clasificado === '1' ? '' : 'none'; return; }
        tr.style.display = tr.dataset.seccion === filtro ? '' : 'none';
    });
}

function buscarEstudiante() {
    const q = document.getElementById('buscadorResultado').value.toLowerCase();
    document.querySelectorAll('#cuerpoTablaResultado tr').forEach(tr => {
        tr.style.display = tr.querySelector('.col-name')?.textContent.toLowerCase().includes(q) ? '' : 'none';
    });
}
</script>
@endsection
