<section x-show="step === 3" x-transition x-ref="step3" x-data="{
  // Cabecera proveniente del paso 1
periodo: @js($ejecucion['periodo'] ?? ($seleccion['trimestre'] ?? '')),
  departamento: @js($ejecucion['departamento'] ?? ''),
  municipio: @js($ejecucion['municipio'] ?? ''),

  filas: [],
  parseDateSafe(v){
    if (!v) return null;
    const s = String(v).trim();
    // try ISO
    let d = new Date(s);
    if (!isNaN(d)) return d;
    // try dd/mm/yyyy
    if (s.includes('/')){
      const [dd,mm,yy] = s.split('/').map(x=>parseInt(x,10));
      if (yy && mm){ d = new Date(yy, (mm||1)-1, dd||1); if(!isNaN(d)) return d; }
    }
    return null;
  },
  monthIndexFromInputs(){
    // Try normalized hidden (YYYY-MM-DD)
    const fn = document.getElementById('hd_fecha_inicio_norm');
    if (fn && fn.value && /^\d{4}-\d{2}-\d{2}$/.test(fn.value)) {
      const m = parseInt(fn.value.split('-')[1], 10);
      if (!isNaN(m) && m>=1 && m<=12) return m-1;
    }
    // Try raw dd/mm/YYYY
    const fr = document.getElementById('hd_fecha_inicio_raw');
    if (fr && fr.value && fr.value.includes('/')) {
      const parts = fr.value.split('/');
      if (parts.length>=2) {
        const mm = parseInt(parts[1], 10);
        if (!isNaN(mm) && mm>=1 && mm<=12) return mm-1;
      }
    }
    // Fallback: parse any date string
    const d = this.parseDateSafe(fn?.value || fr?.value || '');
    if (d && !isNaN(d)) return d.getMonth();
    return 0;
  },
  startIdx: 0, // 0 = Enero, 5 = Junio, etc.
  mapa(p){
    const MONTHS = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
    const last = (pp)=>{ const parts=String(pp||'').split('-'); return parts[parts.length-1]||'' };
    const l = last(p);
    const off = (l === 'I') ? 0 : (l === 'II') ? 1 : (l === 'III') ? 2 : (l === 'IV') ? 3 : null;
    if (off === null) return [];
    const base = this.startIdx; // índice de mes de inicio (0..11)
    const triStart = (base + off*3) % 12;
    return [0,1,2].map(i => MONTHS[(triStart + i) % 12]);
  },
  rearmarFilas(){
    const per = (this.periodo || '').trim();
    const meses = this.mapa(per);
    this.filas = meses.map(m => ({
      departamento: (this.departamento || '').trim(),
      municipio: (this.municipio || '').trim(),
      mes: m,
      poblacion: ''
    }));
  }
}" x-init="
  (function(){
    try{ const h=document.getElementById('hd_trimestre_eval'); if(h&&h.value) periodo=h.value; }catch(e){}
    try{
      startIdx = monthIndexFromInputs();
    }catch(e){}
  })();
  rearmarFilas();
  window.addEventListener('periodo-cambio', e => { periodo = e.detail || periodo; rearmarFilas(); });
  // Empuja una sincronización inicial para que la matriz lea las poblaciones
  requestAnimationFrame(() => window.dispatchEvent(new CustomEvent('sync-resumen')));
" class="sec sec-azul">

  <h2 class="sec-title" style="color:var(--c-blue-900)">EJECUCIÓN CONTRACTUAL</h2>

  <div class="mt-6 border rounded-lg p-4">
    <h3 class="sec-title" style="color:var(--c-blue-900)">INFORMACIÓN DE POBLACIÓN <span class="badge badge-required">*
        Obligatorio</span></h3>

    <input type="hidden" name="ejecucion[periodo]" :value="periodo" required>
    <div class="mt-2 mb-2 text-sm text-gray-600" x-show="periodo">
      Meses a evaluar: <span class="font-medium" x-text="(mapa(periodo)||[]).join(' — ')"></span>
    </div>

    <template x-if="!periodo">
      <div class="mb-4 p-3 border rounded text-sm">Selecciona un <strong>Periodo evaluado</strong> en el Paso 1 para
        habilitar esta sección.</div>
    </template>

    @if ($ejecucion)
      <div class="overflow-x-auto border rounded-lg" x-show="periodo">
        <table class="min-w-full text-sm table-azul">
          <thead>
            <tr class="text-left">
              <th class="p-2 w-48 border-b">Departamento</th>
              <th class="p-2 w-48 border-b">Sede</th>
              <th class="p-2 w-40 border-b">Mes</th>
              <th class="p-2 w-48 border-b">Población *</th>
            </tr>
          </thead>
          <tbody>
            <template x-for="(row, i) in filas" :key="i">
              <tr>
                <td class="p-2 border-b">
                  <input type="hidden" :value="row.departamento" readonly>
                  <dd class="field-label">{{ $ejecucion['departamento'] }}</dd>
                </td>
                <td class="p-2 border-b">
                  <input type="hidden" :value="row.municipio" readonly>
                  <dd class="field-label">{{ $ejecucion['municipio'] }}</dd>
                </td>
                <td class="p-2 border-b">
                  <input class="w-full input-azul p-2 rounded" style="color:steelblue;" :value="row.mes" readonly>
                  <input type="hidden" :name="`ejecucion[meses][${i}][mes]`" :value="row.mes">
                </td>
                <td class="p-2 border-b">
                  <input class="w-full input-azul p-2 rounded" style="color:steelblue;" type="number" min="0" step="1"
                    :name="`ejecucion[meses][${i}][poblacion]`" x-model="row.poblacion" required placeholder="0"
                    @input="window.dispatchEvent(new CustomEvent('sync-resumen'))">
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
    @endif

    <div class="mt-6 border rounded-lg p-4" x-show="periodo">
      <h4 class="field-label">Análisis del periodo</h4>
      <textarea class="w-full input-azul p-2 rounded" rows="4" name="ejecucion[analisis]" required
        placeholder="Escribe un breve análisis de los datos: tendencias, variaciones, notas relevantes..."></textarea>
    </div>
  </div>

  <h2 class="sec-title" style="color:var(--c-blue-900)">MONITOREO Y EVALUACIÓN DE RIPS</h2>

  <!-- Matriz de ejecución -->
  <div class="mt-6 border rounded-lg p-4" x-data="{
    // ===== estado local =====
    valorUsuario: 0,

    // === moneda & parseo ===
formatCOP(n){
  n = Number(n||0);
  return new Intl.NumberFormat('es-CO',{style:'currency',currency:'COP',minimumFractionDigits:2,maximumFractionDigits:2}).format(n);
},
parseCOP(str){
  if (typeof str !== 'string') return Number(str||0);
  // Mantén dígitos, coma y punto; quita separadores de miles
  const clean = str.replace(/[^0-9.,-]/g,'').replace(/\./g,'').replace(',', '.');
  const num = parseFloat(clean);
  return isNaN(num) ? 0 : num;
},

// === por-fila: si la fila tiene _vu, úsalo; si no, cae al global valorUsuario ===
getRowVU(row){
  return (typeof row._vu === 'number' && !isNaN(row._vu))
    ? row._vu
    : Number(this.valorUsuario || 0);
},

// ====== control de cambios ======
hasVUEdits: false,
justificacionVU: '',
snapshotVU: [],

makeSnapshotVU(){
  // Valor inicial visible por fila (usa getRowVU si ya lo tienes)
  this.snapshotVU = (this.filas || []).map(r => Number(this.getRowVU(r) || 0));
},
anyVUChanged(){
  return (this.filas || []).some((r,i) => {
    if (typeof r._vu !== 'number') return false; // solo cuenta si lo editaron en la fila
    const now  = Number(r._vu || 0);
    const base = Number(this.snapshotVU[i] || 0);
    return now.toFixed(2) !== base.toFixed(2);
  });
},
checkVUOnly(){
  // Si cambia la cantidad de filas, toma nuevo snapshot
  if ((this.filas||[]).length !== (this.snapshotVU||[]).length) this.makeSnapshotVU();
  this.hasVUEdits = this.anyVUChanged();
},





    // ===== acceso al padre (paso 3 superior) =====
    get parent(){
      const s = this.$root.closest('section[x-ref=\'step3\']'); // ajusta si tu x-ref cambia
      try { return s ? Alpine.$data(s) : {}; } catch(e){ return {}; }
    },
    get filas(){
      const d = this.parent;
      return (d && Array.isArray(d.filas)) ? d.filas : [];
    },

    // ===== helpers =====
    pct(row){
      const c = Number(row.act_contratadas||0);
      const e = Number(row.act_ejecutadas||0);
      if (c <= 0) return 0;
      const p = (e/c)*100;
      // Permitir superar 100% si ejecutadas > contratadas
      return Math.max(0, p);
    },
    pctCapped(row){
      const c = Number(row.act_contratadas||0);
      const e = Number(row.act_ejecutadas||0);
      if (c <= 0) return 0;
      const p = (e/c)*100;
      return Math.max(0, Math.min(110, p));
    },
    vc(row){
  const p  = Number(row.poblacion||0);
  const vu = this.getRowVU(row);
  return p * vu;
},
valorEjecutado(row){
  const c = Number(row.act_contratadas||0);
  const e = Number(row.act_ejecutadas||0);
  if (c <= 0) return 0;
  const factor = Math.max(0, e / c); // permite >1
  return this.vc(row) * factor;      // usa vc(row) que ya toma el VU por fila
},
valorEjecutadoCapped(row){
  const c = Number(row.act_contratadas||0);
  const e = Number(row.act_ejecutadas||0);
  if (c <= 0) return 0;
  const factor = Math.max(0, Math.min(1, e / c));
  return this.vc(row) * factor;
},
ajuste(row){
  const vc = this.vc(row);
  const ve = this.valorEjecutado(row);
  return Math.max(0, vc - ve);
},
ajusteCapped(row){
  const vc = this.vc(row);
  const ve = this.valorEjecutadoCapped(row);
  return Math.max(0, vc - ve);
},

    subtotalVC(trimestre) {
  return this.filas
    .filter(r => this.periodoDeMes(r.mes) === trimestre)
    .reduce((a,r) => a + this.vc(r), 0);
},
subtotalVE(trimestre) {
  return this.filas
    .filter(r => this.periodoDeMes(r.mes) === trimestre)
    .reduce((a,r) => a + this.valorEjecutado(r), 0);
},
subtotalAjuste(trimestre) {
  return this.filas
    .filter(r => this.periodoDeMes(r.mes) === trimestre)
    .reduce((a,r) => a + this.ajuste(r), 0);
},


    periodoDeMes(m) {
      const MONTHS = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
      const idx = MONTHS.findIndex(x => x === m);
      if (idx < 0) return '';
      const diff = (idx - this.startIdx + 12) % 12; // 0..11
      const tri = Math.floor(diff / 3); // 0..3
      return ['I','II','III','IV'][tri] || '';
    },

    triDe(m){
      return this.periodoDeMes(m);
    },
    // Totales por trimestre de actividades
    actContratadasTrim(tri){
      return this.filas
        .filter(r => this.triDe(r.mes) === tri)
        .reduce((a,r) => a + Number(r.act_contratadas||0), 0);
    },
    actEjecutadasTrim(tri){
      return this.filas
        .filter(r => this.triDe(r.mes) === tri)
        .reduce((a,r) => a + Number(r.act_ejecutadas||0), 0);
    },
vcTrim(tri){
  return this.filas
    .filter(r => this.triDe(r.mes) === tri)
    .reduce((a,r) => a + this.vc(r), 0);
},
veTrim(tri){
  return this.filas
    .filter(r => this.triDe(r.mes) === tri)
    .reduce((a,r) => a + this.valorEjecutado(r), 0);
},
ajTrim(tri){
  return this.filas
    .filter(r => this.triDe(r.mes) === tri)
    .reduce((a,r) => a + this.ajuste(r), 0);
},
pctTrim(tri){
  const vc = this.vcTrim(tri), ve = this.veTrim(tri);
  return vc > 0 ? (ve / vc) * 100 : 0;
},
resumenTrimestres(){
  // Detecta automáticamente qué trimestres existen en filas y devuelve en orden I..IV
  const order = ['I','II','III','IV'];
  const present = new Set(this.filas.map(r => this.triDe(r.mes)).filter(Boolean));
  return order
    .filter(t => present.has(t))
    .map(t => ({
      tri: t,
      vc:  this.vcTrim(t),
      ve:  this.veTrim(t),
      aj:  this.ajTrim(t),
      pct: this.pctTrim(t),
      ac:  this.actContratadasTrim(t),
      ae:  this.actEjecutadasTrim(t),
    }));
},


    // (opcional) totales
    totalVC(){ return this.filas.reduce((a,r)=> a + this.vc(r), 0); },
    totalVE(){ return this.filas.reduce((a,r)=> a + this.valorEjecutado(r), 0); },
    totalAjustes(){ return this.filas.reduce((a,r)=> a + this.ajuste(r), 0); },
    totalActContratadas(){ return this.filas.reduce((a,r)=> a + Number(r.act_contratadas||0), 0); },
    totalActEjecutadas(){ return this.filas.reduce((a,r)=> a + Number(r.act_ejecutadas||0), 0); },
    // Ajuste total calculado con totales del footer (VC total y ratio de actividades)
    ajusteTotalGlobal(){
      const vc = this.totalVC();
      const ac = this.totalActContratadas();
      const ae = this.totalActEjecutadas();
      if (vc <= 0 || ac <= 0) return 0;
      const factor = Math.max(0, ae / ac); // permite > 1
      const veGlobal = vc * factor;
      return Math.max(0, vc - veGlobal);
    },

    // Por trimestre (I, II, III, IV)
vcTrim(per){ return this.filas.filter(r=> this.periodoDeMes(r.mes)===per).reduce((a,r)=> a + this.vc(r),0); },
veTrim(per){ return this.filas.filter(r=> this.periodoDeMes(r.mes)===per).reduce((a,r)=> a + this.valorEjecutado(r),0); },
ajustesTrimestre(per){ return this.filas.filter(r=> this.periodoDeMes(r.mes)===per).reduce((a,r)=> a + this.ajuste(r),0); },
pctEjecucionTotal(){ const vc=this.totalVC(), ve=this.totalVE(); return vc>0 ? (ve/vc)*100 : 0; },
pctEjecucionTrimestre(per){ const vc=this.vcTrim(per), ve=this.veTrim(per); return vc>0 ? (ve/vc)*100 : 0; },

// Empuja al store SOLO lo de la matriz
pushResumenMatriz(){
  const S = window.Alpine?.store('resumen'); if (!S) return;

  // Ajustes por trim
  S.matrizAjustesI   = this.ajustesTrimestre('I');
  S.matrizAjustesII  = this.ajustesTrimestre('II');
  S.matrizAjustesIII = this.ajustesTrimestre('III');
  S.matrizAjustesIV  = this.ajustesTrimestre('IV');
  // Total de ajustes basado en totales del footer
  S.matrizAjustesTotal = this.ajusteTotalGlobal();

  // % por trim y total
  S.matrizPctI      = this.pctEjecucionTrimestre('I');
  S.matrizPctII     = this.pctEjecucionTrimestre('II');
  S.matrizPctIII    = this.pctEjecucionTrimestre('III');
  S.matrizPctIV     = this.pctEjecucionTrimestre('IV');
  S.matrizPctTotal  = this.pctEjecucionTotal();

  // VC / VE por trim y totales
  S.matrizVCI       = this.vcTrim('I');
  S.matrizVCII      = this.vcTrim('II');
  S.matrizVCIII     = this.vcTrim('III');
  S.matrizVCIV      = this.vcTrim('IV');
  S.matrizVCTotal   = this.totalVC();

  S.matrizVEI       = this.veTrim('I');
  S.matrizVEII      = this.veTrim('II');
  S.matrizVEIII     = this.veTrim('III');
  S.matrizVEIV      = this.veTrim('IV');
  S.matrizVETotal   = this.totalVE();

  window.dispatchEvent(new CustomEvent('resumen-updated'));
},
  }" x-init="
  const inp = document.getElementById('input_valor_per_capita');
  valorUsuario = inp && inp.value !== '' ? Number(inp.value) : 0;

  // Escuchar cambios externos del per-cápita (no cuentan como 'edición de tabla')
  window.addEventListener('valor-per-capita', e => {
    valorUsuario = Number(e.detail || 0);
  });

  // Espera a que se pinte la tabla y guarda valores base
  $nextTick(() => { makeSnapshotVU(); checkVUOnly(); });

  pushResumenMatriz()
"
x-effect="checkVUOnly()"
 @sync-resumen.window="pushResumenMatriz()">
    <h3 class="field-label">Matriz de evaluación de contrato</h3>

    <div class="overflow-x-auto border rounded-lg">
      <table class="min-w-full text-sm table-azul">
        <thead>
          <tr class="text-left">
            <th class="p-2 w-24 border-b">Periodo</th>
            <th class="p-2 w-32 border-b">Mes</th>
            <th class="p-2 w-40 border-b text-right">Valor x usuario</th>
            <th class="p-2 w-40 border-b text-right">Población del mes</th>
            <th class="p-2 w-32 border-b text-right">Act. contratadas</th>
            <th class="p-2 w-40 border-b text-right">Valor Contratado</th>
            <th class="p-2 w-32 border-b text-right">Act. ejecutadas</th>
            <th class="p-2 w-28 border-b text-right">% Ejecucion</th>
            <th class="p-2 w-40 border-b text-right">Valor Ejecutado</th>
            <th class="p-2 w-40 border-b text-right">Ajuste</th>
          </tr>
        </thead>
        <tbody>
          <template x-for="(row, i) in filas" :key="i">
            <tr>
              <td class="p-2 border-b" x-text="periodoDeMes(row.mes)"></td>
              <input type="hidden" :name="`matriz[items][${i}][periodo]`" :value="periodoDeMes(row.mes)">
              <td class="p-2 border-b" x-text="row.mes"></td>

              <!-- Valor x usuario -->
              <td class="p-2 border-b text-right">
  <input
    type="text"
    class="field-control text-right"
    :value="row._editing ? (row._vuText ?? formatCOP(getRowVU(row))) : formatCOP(getRowVU(row))"
    @focus="
      row._editing = true;
      row._vuText = formatCOP(getRowVU(row));
      $event.target.select();
    "
    @input="
      row._vuText = $event.target.value;
      const n = parseCOP(row._vuText);
      if (!isNaN(n)) { row._vu = n; }   // ← SOLO afecta esta fila
      checkVUOnly();                     // ← detecta cambio de VU
    "
    @blur="
      row._editing = false;
      $event.target.value = formatCOP(getRowVU(row));
      pushResumenMatriz();
      checkVUOnly();
    "
    required
  >
  <input
    type="hidden"
    :name="`matriz[items][${i}][valor_x_usuario]`"
    :value="getRowVU(row).toFixed(2)"
  >
</td>




              <!-- Población del mes (viene de la tabla superior) -->
              <td class="p-2 border-b text-right">
                <span x-text="Number(row.poblacion||0)"></span>
                <input type="hidden" :name="`matriz[items][${i}][poblacion]`" :value="Number(row.poblacion||0)">
              </td>

              <!-- Contratadas / Ejecutadas (editables aquí si quieres) -->
              <td class="p-2 border-b text-right">
                <input type="number" min="0" step="1" class="field-control" x-model.number="row.act_contratadas"
                  required>
                <input type="hidden" :name="`matriz[items][${i}][act_contratadas]`"
                  :value="Number(row.act_contratadas||0)">
              </td>

              <!-- Valor Contratado -->
              <td class="p-2 border-b text-right">
                <span x-text="vc(row).toLocaleString('es-CO', { style: 'currency', currency: 'COP' })"></span>
                <input type="hidden" :name="`matriz[items][${i}][vc]`" :value="vc(row).toFixed(2)">
              </td>

              <td class="p-2 border-b text-right">
                <input type="number" min="0" step="1" class="field-control" x-model.number="row.act_ejecutadas"
                  required>
                <input type="hidden" :name="`matriz[items][${i}][act_ejecutadas]`"
                  :value="Number(row.act_ejecutadas||0)">
              </td>

              <!-- % Ejec (mostrar capado, guardar real) -->
              <td class="p-2 border-b text-right">
                <span x-text="pctCapped(row).toFixed(1)"></span>%
                <input type="hidden" :name="`matriz[items][${i}][pct]`" :value="pct(row).toFixed(1)">
              </td>

              <!-- VC / VE / Ajuste -->

              <!-- Valor Ejecutado -->
              <td class="p-2 border-b text-right">
                <span
                  x-text="valorEjecutadoCapped(row).toLocaleString('es-CO', { style: 'currency', currency: 'COP' })"></span>
                <input type="hidden" :name="`matriz[items][${i}][ve]`" :value="valorEjecutado(row).toFixed(2)">
              </td>
              <!-- Ajuste -->
              <td class="p-2 border-b text-right">
                <span x-text="ajusteCapped(row).toLocaleString('es-CO', { style: 'currency', currency: 'COP' })"></span>
                <input type="hidden" :name="`matriz[items][${i}][ajuste]`" :value="ajuste(row).toFixed(2)">
              </td>
            </tr>
          </template>
        </tbody>

        <!-- (Opcional) totales -->
        <tfoot>
          <tr class="font-semibold">
            <!-- columnas 1 a 4 -->
            <td class="p-2 border-t text-right" colspan="4">Totales</td>

            <td class="p-2 border-t text-right" x-text="Number(totalActContratadas()).toFixed(0)"></td>
            <td class="p-2 border-t text-right"
              x-text="totalVC().toLocaleString('es-CO', { style: 'currency', currency: 'COP' })"></td>

            <td class="p-2 border-t text-right" x-text="Number(totalActEjecutadas()).toFixed(0)"></td>
            <td class="p-2 border-t"></td>

            <td class="p-2 border-t text-right"
              x-text="totalVE().toLocaleString('es-CO', { style: 'currency', currency: 'COP' })"></td>

            <td class="p-2 border-t text-right"
              x-text="ajusteTotalGlobal().toLocaleString('es-CO', { style: 'currency', currency: 'COP' })"></td>

          </tr>
        </tfoot>

      </table>
    </div>

    

    <!-- ===== Resumen por Trimestre ===== -->
    <div class="mt-4 border rounded-lg p-4 bg-white/50">
      <h4 class="field-label mb-3">Resumen por trimestre</h4>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
        <!-- Genera tarjetas solo para los trimestres presentes -->
        <template x-for="r in resumenTrimestres()" :key="r.tri">
          <div class="border rounded-lg p-3">
            <div class="font-semibold text-blue-900 mb-1">Trimestre <span x-text="r.tri"></span></div>
            <div class="flex justify-between text-sm">
              <span>Val.Con</span>
              <span>$ <span x-text="r.vc.toFixed(2)"></span></span>
            </div>
            <div class="flex justify-between text-sm">
              <span>Val.Ejec</span>
              <span>$ <span x-text="r.ve.toFixed(2)"></span></span>
            </div>
            <div class="flex justify-between text-sm">
              <span>Act. contratadas</span>
              <span><span x-text="r.ac"></span></span>
            </div>
            <div class="flex justify-between text-sm">
              <span>Act. ejecutadas</span>
              <span><span x-text="r.ae"></span></span>
            </div>
            <div class="flex justify-between text-sm">
              <span>Ajuste</span>
              <span>$ <span x-text="r.aj.toFixed(2)"></span></span>
            </div>
            <div class="flex justify-between text-sm font-medium border-t pt-1 mt-1">
              <span>% Ejecución</span>
              <span><span x-text="r.pct.toFixed(1)"></span>%</span>
            </div>
          </div>
        </template>
      </div>
    </div>

    <div class="mt-6 border rounded-lg p-4 bg-amber-50/60" x-show="hasVUEdits" x-transition>
  <h3 class="field-label">Justificación de cambios *</h3>
  <p class="text-sm text-gray-600 mb-2">
    Explica por qué se modificó el valor por usuario en una o más filas.
  </p>
  <textarea
    class="w-full border rounded p-2"
    rows="4"
    name="matriz[justificacion_cambios_vu]"
    x-model.trim="justificacionVU"
    :required="hasVUEdits"
    placeholder="Ej.: Ajuste tarifario del mes, corrección por actualización de UPC, etc."></textarea>
</div>


    <!-- ===== Conclusiones de la matriz ===== -->
    <div class="mt-6 border rounded-lg p-4">
      <h3 class="field-label">Conclusiones de la matriz *</h3>
      <textarea class="w-full border rounded p-2" rows="4" name="matriz[conclusiones]"
        placeholder="Resume brevemente los hallazgos: tendencias, brechas, causas, recomendaciones..."
        required></textarea>
    </div>
  </div>

  <!-- ===== Anexos (evidencias en imágenes) ===== -->
  <div class="mt-6 border rounded-lg p-4" x-data="{
       files: [],
       previews: [],
       error: null,
       MAX: 10,
       MAX_MB: 5,
       accept: ['image/jpeg','image/png','image/webp'],

       onChange(e) {
         this.error = null;
         const incoming = Array.from(e.target.files || []);
         // Validaciones básicas
         for (const f of incoming) {
           if (!this.accept.includes(f.type)) {
             this.error = 'Formato no permitido. Usa JPG, PNG o WebP.';
             return this.resetInput();
           }
           if (f.size > this.MAX_MB * 1024 * 1024) {
             this.error = `Cada imagen debe pesar ≤ ${this.MAX_MB} MB.`;
             return this.resetInput();
           }
         }
         // Límite de cantidad
         if (this.files.length + incoming.length > this.MAX) {
           this.error = `Máximo ${this.MAX} imágenes.`;
           return this.resetInput();
         }
         // Agregar y generar previews
         for (const f of incoming) {
           this.files.push(f);
           this.previews.push(URL.createObjectURL(f));
         }
       },
       remove(i) {
         if (this.previews[i]) URL.revokeObjectURL(this.previews[i]);
         this.previews.splice(i,1);
         this.files.splice(i,1);
         // Sincroniza el input real
         const dt = new DataTransfer();
         this.files.forEach(f => dt.items.add(f));
         $refs.input.files = dt.files;
       },
       clearAll() {
         this.previews.forEach(p => URL.revokeObjectURL(p));
         this.previews = [];
         this.files = [];
         this.resetInput();
       },
       resetInput() { if ($refs.input) $refs.input.value = ''; }
        }">

    <h3 class="field-label">Anexos (imágenes de evidencia)</h3>

    <input x-ref="input" type="file" name="matriz[anexos][]" accept="image/*" multiple
      class="block w-full border rounded p-2" @change="onChange">

    <p class="text-xs text-gray-500 mt-2">
      Formatos permitidos: JPG, PNG, WebP. Máx {{5}} MB c/u, {{10}} imágenes en total.
    </p>
    <template x-if="error">
      <p class="mt-2 text-sm text-red-600" x-text="error"></p>
    </template>

    <!-- Previews -->
    <div class="mt-3 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3" x-show="previews.length">
      <template x-for="(src, i) in previews" :key="i">
        <div class="relative">
          <img :src="src" alt="Preview" class="h-32 w-full object-cover rounded border" />
          <button type="button" class="absolute -top-2 -right-2 bg-white border rounded-full w-6 h-6 text-sm"
            title="Quitar" @click="remove(i)">✕</button>
          <div class="mt-1 text-[11px] text-gray-600 truncate" x-text="files[i]?.name"></div>
        </div>
      </template>
    </div>

    <div class="mt-3 flex gap-2" x-show="previews.length">
      <button type="button" class="px-3 py-1 border rounded" @click="clearAll()">Quitar todas</button>
      <button type="button" class="px-3 py-1 border rounded" @click="$refs.input.click()">Agregar más</button>
    </div>
  </div>




  <!-- Checklist verificación (Sección 3) -->
  @php
    $verifPlantilla = [
      ['item' => 'El prestador realizó la entrega  mes a mes de Rips durante cada radicación en el periodo de seguimiento evaluado.', 'ponderado' => 8],
      ['item' => 'El prestador realiza los reportes mensuales de Indicadores de monitoreo de la calidad en salud según Resolución 256 de 2016 del Ministerio de Salud y Protección Social. Indicadores de Oportunidad de asignación de citas según el Acuerdos de Niveles de Servicios establecido por el CONTRATANTE, los indicadores de procesos y resultados establecidos en la Resolución 3280 de 2018 y demás que establezca el Ministerio de Salud y Protección Social', 'ponderado' => 8],
      ['item' => 'El prestador a reportado inmediatamente al CONTRATANTE los servicios contratados que no esté en condiciones de prestar temporal o definitivamente, o aquellos que no hagan parte del nivel primario.', 'ponderado' => 8],
      ['item' => 'Una vez evaluados los Rips se observa cumplimiento en la prestación de servicios según frecuencias de uso y CUPS resolución 3280 del 2018 y/o las normas que la modifiquen.', 'ponderado' => 8],
      ['item' => 'El porcentaje de ejecución se encuentra por encima del 90%', 'ponderado' => 8],
    ];
  @endphp

  <div class="mt-6 border rounded-lg p-4" x-data="{
    rows: @js($verifPlantilla),
    total(){ return (this.rows||[]).reduce((a,r)=> a + (String(r.cumple||'').toUpperCase()==='NA' ? 0 : Number(r.ponderado||0)), 0); },
    obtenido(){ return (this.rows||[]).reduce((a,r)=> a + (String(r.cumple||'').toUpperCase()==='SI' ? Number(r.ponderado||0) : 0), 0); },
    porcentaje(){ const t=this.total(); return t>0 ? (this.obtenido()/t)*100 : 0; },
    pushResumen(){
      const S = window.Alpine?.store('resumen'); if (!S) return;
      S.ejecucion         = this.porcentaje();
      S.ejecucionTotal    = this.total();
      S.ejecucionObtenido = this.obtenido();
      
      window.dispatchEvent(new CustomEvent('resumen-updated'));
    }

    
  }" x-init="pushResumen()" x-effect="pushResumen()" @sync-resumen.window="pushResumen()">
    <div class="overflow-x-auto border rounded-lg">
      <table class="min-w-full text-sm table-azul">
        <thead>
          <tr class="text-left">
            <th class="p-2 w-12 border-b">No.</th>
            <th class="p-2 border-b">Ítem</th>
            <th class="p-2 w-28 border-b text-center">Ponderado</th>
            <th class="p-2 w-40 border-b text-center">Cumple</th>
            <th class="p-2 w-[40%] border-b">Observaciones</th>
          </tr>
        </thead>
        <tbody>
          <template x-for="(row, i) in rows" :key="i">
            <tr class="align-top">
              <td class="p-2 border-b text-center" x-text="i+1"></td>
              <td class="p-2 border-b">
                <div class="whitespace-pre-line" x-text="row.item"></div>
                <input type="hidden" :name="`verificacion3[items][${i}][item]`" :value="row.item">
              </td>
              <td class="p-2 border-b text-center">
                <span x-text="row.ponderado"></span>
                <input type="hidden" :name="`verificacion3[items][${i}][ponderado]`" :value="row.ponderado">
              </td>
              <td class="p-2 border-b">
                <div class="flex items-center justify-center gap-4">
                  <label class="inline-flex items-center gap-1">
                    <input type="radio" :name="`verificacion3[items][${i}][cumple]`" value="SI" x-model="row.cumple"
                      required>
                    <span>SI</span>
                  </label>
                  <label class="inline-flex items-center gap-1">
                    <input type="radio" :name="`verificacion3[items][${i}][cumple]`" value="NO" x-model="row.cumple"
                      required>
                    <span>NO</span>
                  </label>
                  <label class="inline-flex items-center gap-1">
                    <input type="radio" :name="`verificacion3[items][${i}][cumple]`" value="NA" x-model="row.cumple"
                      required>
                    <span>NA</span>
                  </label>
                </div>
              </td>
              <td class="p-2 border-b">
                <textarea class="w-full border rounded p-2" rows="2" :name="`verificacion3[items][${i}][observaciones]`"
                  x-model="row.observaciones" :required="row.cumple==='NO'"
                  :class="row.cumple==='NO' && !row.observaciones ? 'ring-2 ring-red-400' : ''"
                  placeholder="Anote hallazgos/soportes si no cumple..."></textarea>
              </td>
            </tr>
          </template>
        </tbody>
        <tfoot>
          <tr>
            <td class="p-2 border-t font-semibold text-right" colspan="2">Totales</td>
            <td class="p-2 border-t font-semibold text-center" x-text="total()"></td>
            <td class="p-2 border-t font-semibold text-center" colspan="2">
              Obtenido: <span x-text="obtenido()"></span> / <span x-text="total()"></span>
              — <strong x-text="porcentaje().toFixed(1) + '%' "></strong>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>

    <input type="hidden" name="verificacion3[porcentaje]" :value="porcentaje().toFixed(1)">
    <input type="hidden" name="verificacion3[puntos_obtenidos]" :value="obtenido()">
    <input type="hidden" name="verificacion3[puntos_totales]" :value="total()">
  </div>

</section>