@extends('admin.layouts.app')
@section('title', isset($concurso) ? 'Editar Concurso' : 'Nuevo Concurso')

@section('styles')
<style>
/* ── Design tokens ── */
:root {
    --cc-blue:   #1a237e;
    --cc-indigo: #283593;
    --cc-gold:   #ffe082;
    --cc-green:  #059669;
}

/* ── Hero top bar ── */
.form-hero {
    background: linear-gradient(135deg, #0d1b6e 0%, #1a237e 45%, #4527a0 100%);
    border-radius: 20px;
    padding: 24px 30px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    position: relative;
    overflow: hidden;
}
.form-hero::after {
    content: '';
    position: absolute;
    right: -60px; top: -60px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,224,130,.15);
    border: 1.5px solid rgba(255,224,130,.3);
    color: var(--cc-gold);
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}

/* ── Section cards ── */
.form-section {
    background: #fff;
    border-radius: 18px;
    border: 1.5px solid #e8edf5;
    box-shadow: 0 2px 16px rgba(0,0,0,.05);
    margin-bottom: 22px;
    overflow: hidden;
}
.form-section-header {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1.5px solid #f1f5f9;
}
.section-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.section-title {
    font-weight: 800;
    font-size: .9rem;
    color: #1e293b;
    margin: 0;
}
.section-sub {
    font-size: 11.5px;
    color: #94a3b8;
}
.form-section-body { padding: 20px; }

/* ── Form controls ── */
.fc-label {
    font-size: 12.5px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 5px;
    display: block;
}
.fc-label .req { color: #ef4444; }
.fc-input {
    width: 100%;
    padding: 9px 13px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: .88rem;
    color: #1e293b;
    background: #fafcff;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}
.fc-input:focus {
    border-color: #1a237e;
    box-shadow: 0 0 0 3px rgba(26,35,126,.1);
    background: #fff;
}
.fc-input::placeholder { color: #c0cbd8; }
.fc-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2394a3b8' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }
.fc-group { margin-bottom: 14px; }

/* ── Switch toggle ── */
.toggle-wrap {
    background: #f8faff;
    border: 1.5px solid #e8eaf6;
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}
.toggle-wrap input[type=checkbox] {
    width: 20px; height: 20px;
    accent-color: #1a237e;
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
}

/* ── Respuestas tabla ── */
.resp-table { width: 100%; }
.resp-row {
    display: grid;
    grid-template-columns: 44px 1fr 100px;
    gap: 6px;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #f8f9fa;
    transition: background .15s;
}
.resp-row:hover { background: #fafbff; border-radius: 8px; }
.resp-num {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1a237e, #283593);
    color: #ffe082;
    font-size: 11px;
    font-weight: 800;
    margin: 0 auto;
}
.pts-input { opacity: .35; transition: opacity .2s; }
.pts-visible .pts-input { opacity: 1; }

/* ── Clasificación options ── */
.modo-option {
    padding: 12px 16px;
    border: 2px solid #e8eaf6;
    border-radius: 12px;
    cursor: pointer;
    transition: all .2s;
    margin-bottom: 8px;
}
.modo-option:has(input:checked) {
    border-color: #1a237e;
    background: #f0f2ff;
}

/* ── Botones de acción ── */
.action-bar {
    background: #fff;
    border-radius: 16px;
    border: 1.5px solid #e8edf5;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,.05);
    flex-wrap: wrap;
}
.btn-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #1a237e, #4527a0);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    font-size: .9rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(26,35,126,.3);
    transition: all .2s;
}
.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26,35,126,.4);
}
.btn-cancel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    background: #f8faff;
    color: #64748b;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    transition: all .18s;
}
.btn-cancel:hover { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }

/* ── Error banner ── */
.errors-banner {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
    color: #991b1b;
    font-size: .87rem;
}
</style>
@endsection

@section('content')

{{-- ═══════ HERO ═══════ --}}
<div class="form-hero">
    <div style="display:flex;align-items:center;gap:16px;position:relative;z-index:1;">
        <a href="{{ route('admin.concursos.index') }}"
           style="width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;transition:background .2s;flex-shrink:0;"
           onmouseover="this.style.background='rgba(255,255,255,.22)'" onmouseout="this.style.background='rgba(255,255,255,.12)'">
            <i class="bi bi-arrow-left" style="font-size:16px;"></i>
        </a>
        <div>
            <div class="hero-badge">
                <i class="bi bi-trophy-fill"></i>
                {{ isset($concurso) ? 'Editando concurso' : 'Nuevo registro' }}
            </div>
            <h1 style="font-size:1.5rem;font-weight:800;color:#fff;margin:6px 0 2px;letter-spacing:-.4px;">
                {{ isset($concurso) ? $concurso->nombre : 'Nuevo Concurso' }}
            </h1>
            <p style="color:rgba(255,255,255,.6);margin:0;font-size:.85rem;">
                {{ isset($concurso) ? 'Modifica los datos y guarda los cambios' : 'Completa los campos para registrar una olimpiada o concurso' }}
            </p>
        </div>
    </div>

    @if(isset($concurso))
    <div style="position:relative;z-index:1;background:rgba(255,255,255,.08);border-radius:14px;padding:10px 18px;text-align:center;">
        <div style="font-size:11px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.8px;font-weight:700;">Estado</div>
        @if($concurso->estado === 'publicado')
        <div style="color:#4ade80;font-weight:800;font-size:.9rem;margin-top:2px;"><i class="bi bi-broadcast-pin me-1"></i>Publicado</div>
        @else
        <div style="color:#fcd34d;font-weight:800;font-size:.9rem;margin-top:2px;"><i class="bi bi-pencil me-1"></i>Borrador</div>
        @endif
    </div>
    @endif
</div>

{{-- ═══════ ERRORES ═══════ --}}
@if($errors->any())
<div class="errors-banner">
    <div style="font-weight:700;margin-bottom:6px;"><i class="bi bi-exclamation-triangle-fill me-2"></i>Hay errores en el formulario:</div>
    <ul style="margin:0;padding-left:18px;">
        @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
    </ul>
</div>
@endif

<form action="{{ isset($concurso) ? route('admin.concursos.update', $concurso) : route('admin.concursos.store') }}"
      method="POST" id="formConcurso">
    @csrf
    @if(isset($concurso)) @method('PUT') @endif

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:22px;" class="form-grid-2col">

        {{-- ══════════════════════════════════
             COLUMNA IZQUIERDA
        ══════════════════════════════════ --}}
        <div>

            {{-- ── Identificación ── --}}
            <div class="form-section">
                <div class="form-section-header">
                    <div class="section-icon" style="background:#eff6ff;">
                        <i class="bi bi-trophy-fill" style="color:#1d4ed8;"></i>
                    </div>
                    <div>
                        <div class="section-title">Identificación del Concurso</div>
                        <div class="section-sub">Nombre, sigla, año y datos básicos</div>
                    </div>
                </div>
                <div class="form-section-body">

                    <div class="fc-group">
                        <label class="fc-label">Nombre completo <span class="req">*</span></label>
                        <input type="text" name="nombre" class="fc-input"
                               value="{{ old('nombre', $concurso->nombre ?? '') }}"
                               placeholder="Ej: ONEM Aceros Arequipa 2026" required>
                    </div>

                    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;">
                        <div class="fc-group">
                            <label class="fc-label">Sigla</label>
                            <input type="text" name="sigla" class="fc-input"
                                   value="{{ old('sigla', $concurso->sigla ?? '') }}"
                                   placeholder="ONEM" maxlength="30">
                        </div>
                        <div class="fc-group">
                            <label class="fc-label">Año</label>
                            <input type="text" name="anio" class="fc-input"
                                   value="{{ old('anio', $concurso->anio ?? date('Y')) }}"
                                   placeholder="{{ date('Y') }}" maxlength="10">
                        </div>
                        <div class="fc-group">
                            <label class="fc-label">Fecha</label>
                            <input type="date" name="fecha_concurso" class="fc-input"
                                   value="{{ old('fecha_concurso', isset($concurso) ? optional($concurso->fecha_concurso)->format('Y-m-d') : '') }}">
                        </div>
                    </div>

                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                        <div class="fc-group">
                            <label class="fc-label">Patrocinador</label>
                            <input type="text" name="patrocinador" class="fc-input"
                                   value="{{ old('patrocinador', $concurso->patrocinador ?? '') }}"
                                   placeholder="Aceros Arequipa">
                        </div>
                        <div class="fc-group">
                            <label class="fc-label">Categoría</label>
                            <input type="text" name="categoria" class="fc-input"
                                   value="{{ old('categoria', $concurso->categoria ?? '') }}"
                                   placeholder="ALFA, BETA...">
                        </div>
                    </div>

                    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;">
                        <div class="fc-group">
                            <label class="fc-label">Nivel educativo</label>
                            <select name="nivel_educativo" class="fc-input fc-select">
                                <option value="">— Seleccionar —</option>
                                @foreach(['Primaria','Secundaria'] as $ne)
                                <option value="{{ $ne }}" {{ old('nivel_educativo', $concurso->nivel_educativo ?? '') === $ne ? 'selected' : '' }}>{{ $ne }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="fc-group">
                            <label class="fc-label">Grado</label>
                            <input type="text" name="grado" class="fc-input"
                                   value="{{ old('grado', $concurso->grado ?? '') }}"
                                   placeholder="2° Grado" maxlength="30">
                        </div>
                        <div class="fc-group">
                            <label class="fc-label">Etapa / Nivel</label>
                            <input type="text" name="etapa" class="fc-input"
                                   value="{{ old('etapa', $concurso->etapa ?? '') }}"
                                   placeholder="1ª Etapa">
                        </div>
                    </div>

                    <div class="fc-group">
                        <label class="fc-label">Nivel (clasificación)</label>
                        <input type="text" name="nivel" class="fc-input"
                               value="{{ old('nivel', $concurso->nivel ?? '') }}"
                               placeholder="Nivel I">
                    </div>

                    <div class="fc-group" style="margin-bottom:0;">
                        <label class="fc-label">Descripción <span style="font-weight:500;color:#94a3b8;">(opcional)</span></label>
                        <textarea name="descripcion" class="fc-input" rows="2"
                                  placeholder="Descripción breve del concurso...">{{ old('descripcion', $concurso->descripcion ?? '') }}</textarea>
                    </div>
                </div>
            </div>

            {{-- ── Puntuación ── --}}
            <div class="form-section">
                <div class="form-section-header">
                    <div class="section-icon" style="background:#f5f3ff;">
                        <i class="bi bi-calculator-fill" style="color:#7c3aed;"></i>
                    </div>
                    <div>
                        <div class="section-title">Configuración de Puntuación</div>
                        <div class="section-sub">N° de preguntas y valor por pregunta</div>
                    </div>
                </div>
                <div class="form-section-body">
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
                        <div class="fc-group">
                            <label class="fc-label">N° de preguntas <span class="req">*</span></label>
                            <input type="number" name="num_preguntas" id="numPreguntas" class="fc-input"
                                   value="{{ old('num_preguntas', $concurso->num_preguntas ?? 10) }}"
                                   min="1" max="50" required>
                            <div style="font-size:11px;color:#94a3b8;margin-top:4px;">Al cambiar se regeneran los campos de respuesta</div>
                        </div>
                        <div class="fc-group">
                            <label class="fc-label">Puntos por pregunta (global) <span class="req">*</span></label>
                            <input type="number" name="puntos_por_pregunta" class="fc-input"
                                   value="{{ old('puntos_por_pregunta', $concurso->puntos_por_pregunta ?? 10) }}"
                                   min="0" step="0.01" required>
                        </div>
                    </div>

                    <label class="toggle-wrap" for="puntosVariable">
                        <input class="form-check-input" type="checkbox" id="puntosVariable"
                               name="puntos_variable" value="1"
                               {{ old('puntos_variable', $concurso->puntos_variable ?? false) ? 'checked' : '' }}>
                        <div>
                            <div style="font-weight:700;color:#1e293b;font-size:.87rem;">Puntos individuales por pregunta</div>
                            <div style="font-size:11.5px;color:#94a3b8;margin-top:2px;">Activa para asignar puntos distintos a cada pregunta en la columna "Pts"</div>
                        </div>
                    </label>
                </div>
            </div>

            {{-- ── Clasificación ── --}}
            <div class="form-section">
                <div class="form-section-header">
                    <div class="section-icon" style="background:#fffbeb;">
                        <i class="bi bi-star-fill" style="color:#d97706;"></i>
                    </div>
                    <div>
                        <div class="section-title">Criterio de Clasificación</div>
                        <div class="section-sub">Modo y cantidad de clasificados</div>
                    </div>
                </div>
                <div class="form-section-body">
                    <div class="fc-group">
                        <label class="fc-label">Modo de clasificación <span class="req">*</span></label>
                        <select name="modo_clasificacion" id="modoClasificacion" class="fc-input fc-select" required>
                            <option value="general" {{ old('modo_clasificacion', $concurso->modo_clasificacion ?? 'general') === 'general' ? 'selected' : '' }}>
                                🏆 General — los N mejores sin distinción de género
                            </option>
                            <option value="genero" {{ old('modo_clasificacion', $concurso->modo_clasificacion ?? '') === 'genero' ? 'selected' : '' }}>
                                ♀♂ Por Género — N mejores mujeres + N mejores varones
                            </option>
                            <option value="ambos" {{ old('modo_clasificacion', $concurso->modo_clasificacion ?? '') === 'ambos' ? 'selected' : '' }}>
                                🔀 Ambos — General Y por género
                            </option>
                        </select>
                    </div>

                    <div id="bloqueGeneral" style="margin-top:10px;">
                        <div class="fc-group" style="margin:0;">
                            <label class="fc-label">N° clasificados (general)</label>
                            <input type="number" name="num_clasificados_general" class="fc-input"
                                   value="{{ old('num_clasificados_general', $concurso->num_clasificados_general ?? 3) }}"
                                   min="1" max="50">
                        </div>
                    </div>

                    <div id="bloqueGenero" style="display:none;margin-top:10px;">
                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                            <div class="fc-group" style="margin:0;">
                                <label class="fc-label">N° clasificadas ♀</label>
                                <input type="number" name="num_clasificados_mujer" class="fc-input"
                                       value="{{ old('num_clasificados_mujer', $concurso->num_clasificados_mujer ?? 2) }}"
                                       min="1" max="50">
                            </div>
                            <div class="fc-group" style="margin:0;">
                                <label class="fc-label">N° clasificados ♂</label>
                                <input type="number" name="num_clasificados_varon" class="fc-input"
                                       value="{{ old('num_clasificados_varon', $concurso->num_clasificados_varon ?? 2) }}"
                                       min="1" max="50">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        {{-- ══════════════════════════════════
             COLUMNA DERECHA: Respuestas
        ══════════════════════════════════ --}}
        <div>
            <div class="form-section" style="height:100%;display:flex;flex-direction:column;">
                <div class="form-section-header">
                    <div class="section-icon" style="background:#f0fdf4;">
                        <i class="bi bi-check2-all" style="color:#059669;font-size:18px;"></i>
                    </div>
                    <div style="flex:1;">
                        <div class="section-title">Respuestas Correctas</div>
                        <div class="section-sub">Ingresa la respuesta exacta de cada pregunta</div>
                    </div>
                    <span id="badgeNumPreg"
                          style="background:#f0fdf4;color:#059669;border:1.5px solid #bbf7d0;padding:4px 12px;border-radius:50px;font-size:12px;font-weight:800;">
                        {{ old('num_preguntas', $concurso->num_preguntas ?? 10) }} preguntas
                    </span>
                </div>

                {{-- Cabecera de columnas --}}
                <div style="display:grid;grid-template-columns:44px 1fr 100px;gap:6px;padding:10px 20px 6px;border-bottom:1.5px solid #f1f5f9;">
                    <div style="text-align:center;font-size:11px;font-weight:700;color:#94a3b8;">Preg.</div>
                    <div style="font-size:11px;font-weight:700;color:#94a3b8;">Respuesta correcta</div>
                    <div style="font-size:11px;font-weight:700;color:#94a3b8;" id="ptsHeader">Pts (global)</div>
                </div>

                {{-- Scrollable container --}}
                <div style="flex:1;overflow-y:auto;padding:12px 20px;max-height:520px;" id="preguntasContainer">
                    @php
                        $numPreg = old('num_preguntas', $concurso->num_preguntas ?? 10);
                        $preguntasExistentes = isset($concurso) ? $concurso->preguntas->keyBy('numero') : collect();
                    @endphp
                    @for($i = 1; $i <= $numPreg; $i++)
                        @php $p = $preguntasExistentes->get($i); @endphp
                        <div class="resp-row" data-num="{{ $i }}">
                            <div><span class="resp-num">P{{ $i }}</span></div>
                            <div>
                                <input type="text"
                                       name="respuesta_correcta[{{ $i }}]"
                                       class="fc-input"
                                       style="padding:7px 11px;font-size:.83rem;"
                                       value="{{ old("respuesta_correcta.$i", $p->respuesta_correcta ?? '') }}"
                                       placeholder="ej: 153 / A / 3/5"
                                       required>
                            </div>
                            <div>
                                <input type="number"
                                       name="puntos_pregunta[{{ $i }}]"
                                       class="fc-input pts-input"
                                       style="padding:7px 8px;font-size:.83rem;text-align:center;"
                                       value="{{ old("puntos_pregunta.$i", $p->puntos ?? '') }}"
                                       placeholder="—"
                                       min="0" step="0.01">
                            </div>
                        </div>
                    @endfor
                </div>

                {{-- Info ── --}}
                <div style="padding:12px 20px;border-top:1.5px solid #f1f5f9;background:#fafbfe;">
                    <div style="display:flex;align-items:center;gap:8px;font-size:11.5px;color:#7c3aed;background:#f5f3ff;padding:8px 12px;border-radius:8px;">
                        <i class="bi bi-lightbulb-fill"></i>
                        La columna <strong>Pts</strong> es opcional — si la dejas vacía, se usa el valor global.
                    </div>
                </div>
            </div>
        </div>

    </div>

    {{-- ═══════ ACTION BAR ═══════ --}}
    <div class="action-bar" style="margin-top:22px;">
        <a href="{{ route('admin.concursos.index') }}" class="btn-cancel">
            <i class="bi bi-x-circle"></i> Cancelar
        </a>
        <div style="display:flex;align-items:center;gap:10px;">
            @if(isset($concurso))
            <a href="{{ route('admin.concursos.participantes.index', $concurso) }}"
               style="display:inline-flex;align-items:center;gap:6px;padding:11px 20px;background:#eff6ff;color:#1d4ed8;border:1.5px solid #bfdbfe;border-radius:12px;font-weight:700;font-size:.88rem;text-decoration:none;transition:all .18s;"
               onmouseover="this.style.background='#dbeafe'" onmouseout="this.style.background='#eff6ff'">
                <i class="bi bi-people-fill"></i> Ver Participantes
            </a>
            @endif
            <button type="submit" class="btn-save">
                <i class="bi bi-save-fill"></i>
                {{ isset($concurso) ? 'Actualizar Concurso' : 'Crear Concurso' }}
            </button>
        </div>
    </div>

</form>

<style>
@media(max-width:900px) {
    .form-grid-2col { grid-template-columns:1fr !important; }
}
</style>

@endsection

@section('scripts')
<script>
// ── Clasificación: mostrar/ocultar bloques ────────────────────────────
const modoSelect = document.getElementById('modoClasificacion');
function actualizarModo() {
    const m = modoSelect.value;
    document.getElementById('bloqueGeneral').style.display = ['general','ambos'].includes(m) ? '' : 'none';
    document.getElementById('bloqueGenero').style.display  = ['genero','ambos'].includes(m)  ? '' : 'none';
}
modoSelect.addEventListener('change', actualizarModo);
actualizarModo();

// ── Regenerar campos de preguntas al cambiar N° ───────────────────────
const numPregInput = document.getElementById('numPreguntas');
const container    = document.getElementById('preguntasContainer');
const badge        = document.getElementById('badgeNumPreg');

numPregInput.addEventListener('change', regenerarPreguntas);

function regenerarPreguntas() {
    const n = parseInt(numPregInput.value) || 10;
    badge.textContent = n + ' preguntas';
    container.innerHTML = '';
    for (let i = 1; i <= n; i++) {
        container.innerHTML += `
        <div class="resp-row" data-num="${i}">
            <div><span class="resp-num">P${i}</span></div>
            <div>
                <input type="text" name="respuesta_correcta[${i}]"
                       class="fc-input" style="padding:7px 11px;font-size:.83rem;"
                       placeholder="ej: 153 / A" required>
            </div>
            <div>
                <input type="number" name="puntos_pregunta[${i}]"
                       class="fc-input pts-input" style="padding:7px 8px;font-size:.83rem;text-align:center;"
                       placeholder="—" min="0" step="0.01">
            </div>
        </div>`;
    }
}

// ── Puntos variables: toggle opacidad ────────────────────────────────
document.getElementById('puntosVariable').addEventListener('change', function () {
    const resp = document.getElementById('preguntasContainer');
    resp.classList.toggle('pts-visible', this.checked);
    document.querySelectorAll('.pts-input').forEach(el => {
        el.style.opacity = this.checked ? '1' : '.35';
    });
});
// Estado inicial
if (document.getElementById('puntosVariable').checked) {
    document.querySelectorAll('.pts-input').forEach(el => el.style.opacity = '1');
}
</script>
@endsection