<!--
================================================================
PROYEUTU: Llumera - Evaluación LOMLOE (Asturies)
FICHERU: index.html
VERSIÓN: 0.19.46
FECHA: 2026-03-17

HISTORIAL DE CAMBEOS (CHANGELOG):
- v0.19.46 (Vista final anual 1-2-3 + pesos configurables): Añádese una llingüeta nueva "Final" separada de les evaluaciones trimestrales, con tabla anual 1T/2T/3T, nota final 1-2-3 y cobertura del cursu. Los pesos configúrense na pestaña Configuración y guárdense en preferencies del sirvidor. Nun se toca la lóxica trimestral nin los contratos existentes de panel/evidencies/calificaciones.
- v0.19.45 (Sincronización visible de versión): Actualízase el rótulu visible de versión na barra llateral pa que coincida cola versión interna del ficheru. Nun se toca nenguna otra lóxica, estilos nin contratos cola API.
- v0.19.44 (Optimización del recálculu inversu): El recálculu de criterios dende una nota d'evidencia dexa la búsqueda combinatoria pesada y pasa a un enfoque muncho más llixeru (mitá+mitá exactu y fallback golosu), amenorgando carga de CPU nel navegador ensin tocar la API nin la lóxica visible.
- v0.19.43 (Modal d'edición más llixeru): Amenórgase y atenúase visualmente'l botón "Editar" y l'asteriscu de rastrexu nel modal de resultaos por evidencia. El modal d'edición inversa dexa de recalcular en tiempu real y pasa a facelo solo al pulsar "Recalcular criterios", p'amenorgar carga y meyorar la respuesta visual.
- v0.19.42 (Edición inversa de nota per evidencia): Nel modal de resultaos por evidencia añádese un botón discretu "Editar" baxo la nota pa introducir una calificación 0–10 por alumnu y recalculala escontra atrás sobre los criterios (repartu equilibráu o aleatoriu), con asteriscu de rastrexu y refrescu inmediato de resultaos tres guardar.
- v0.19.41 (Retornu a resultaos + llinguaxe): Cambéase la etiqueta visible a "Contribución a la oficial" nel modal de resultaos por evidencia y, al guardar una evaluación abierta dende esi modal, vuélvese automáticamente a resultaos cola nota actualizada, ensin pesllar tola secuencia visual.
- v0.19.40 (Llinguaxe UI + fix botón Evaluar en resultaos): Sustitúyese "Apurra oficial" por "Contribución oficial" nel modal de resultaos por evidencia y igúase'l botón "Evaluar" d'esi modal, que agora reabre correchamente la valoración individual del estudiante ensin perder la evidencia activa.
- v0.19.39 (Resultaos per evidencia): Añádese un modal de resultaos por evidencia accesible dende la llingüeta Evidencies, con nota propia de la evidencia (0–10), contribución oficial por criteriu, nota acumulada oficial del trimestre y accesu directu a evaluar cada estudiante, ensin camudar la API.
- v0.19.38 (Auto-refrescu de notes tres valorar): Al guardar una valoración dende'l modal, si la vista activa ye Llistáu oficial de notes, recárgase automáticamente la tabla pa evitar mostrar notes anteriores hasta un refrescu manual.
- v0.19.37 (Fix evaluación individual por estudiante): El modal d'Evaluar estudiante dexa de filtrar al llamar a l'API por grupu/SdA de manera demasiado estricta; recupera evidencies del contestu base (cursu+trimestre+nivel+materia) y filtra nel veceru ensin perder les globales (ensin grupu/SdA) nin les específiques del grupu actual.
- v0.19.36 (Evaluación individual + orde panel): Añádese un modal de evaluación por estudiante accesible dende Estudiantes y Llistáu oficial de notes, reutilizando la valoración existente pa un únicu alumnu ensin tocar la API. El panel ordena agora les tarxetes automáticamente de mayor a menor nota proyeutada.
- v0.19.35 (Contextu nivel PDC base): El selector global de nivel vuelve a usar 3ESO/4ESO como niveles únicos; PDC queda solo como distintivu del alumnáu y la carga de contestu normaliza preferencies antigües con 3ESO PDC / 4ESO PDC.
- v0.19.34 (Saneáu HTML/UI): Endurézse la renderización de nomes, observaciones, criterios, instrumentos, cabeceres de valoración ya avatares, escapando conteníu dinámicu y filtrando URLs d’imaxe ensin tocar contratos cola API.
- v0.19.33 (Fix orde estudiantes + PDC + nivel en notes): La llista d’estudiantes usa una nueva preferencia d’orde persistente, el númberu operativu reinicia por nivel y el nivel real/PDC queda visible tamién nel llistáu oficial de notes ya informes cuando falten campos na respuesta.
- v0.19.33 (Persistencia orde llista + diversificación visible): La llista d’estudiantes arranca por defectu ordenada por apellíos, guarda nel sirvidor la preferencia d’orde por cabecera y amuesa 3ESO PDC / 4ESO PDC con distintivu visual nos llistaos ya informes del alumnáu.
- v0.19.28 (Informe formal de contestu, compactáu): El informe imprimible del contestu pasa a formatu más formal y documental, con seiciones narrativas, instrumentos y valoración pedagóxica final. Axústase tamién l'interlineáu y la maquetación de impresión pa amenorgar páxines ensin convertir el documentu nun pegote.
- v0.19.27 (Informe de trazabilidá por contestu): Añádese un informe imprimible del contestu actual (curso/trimestre/nivel/materia/grupu/SdA) con resume, evidencies, cobertura de criterios y tabla de notes, reutilizando l’API actual ensin camudar contratos.
- v0.19.26 (Observaciones nel llistáu d’evidencies): El llistáu de la llingüeta Evidencies amuesa agora una columna específica d’observaciones/notes de la evidencia, ensin tocar l’API nin el guardáu.
- v0.19.25 (Fix contractu plantiyes API/UI): El catálogu de plantiyes d’evidencies agora acepta tantu `datos` como `items` na respuesta de `/plantiyes/evidencies`, evitando caer por error al fallback local cuando la API sí devolvía plantiyes válides.
- v0.19.24 (Fix plantiya↔títulu): Al cambiar de plantiya nel modal "Nueva evidencia", los campos autocompletaos (títulu, tipu, notes ya instrumentu) agora sustitúyense correchamente si siguen teniendo'l valor autoanterior, ensin pisar cambios manuales del usuariu.
- v0.19.23 (Plantiyes d’evidencies, fase 1 UI): El selector de plantiya de "Nueva evidencia" carga'l catálogu dende'l sirvidor (`/plantiyes/evidencies`) según el contestu, con fallback local si la API nueva entá nun ta disponible o falla.
- v0.19.22 (Observabilidá & versión): El rótulu visible de versión súbese a 0.19.22 y añádense avisos non intrusivos en consola cuando falla la llectura/escritura de preferencies nel sirvidor, pa facilitar el diagnósticu ensin romper la UX.
- v0.19.21 (Persistencia d'orde acutada): La clave del orde manual/alfabéticu del modal "Valorar" agora acútase por cursu+nivel+materia+grupu pa evitar colisones ente contextos. Mántiense compatibilidá lleyendo primero la clave nueva y, si nun esiste, la heredada (nivel+grupu).
- v0.19.20 (UX & Persistencia Total): L'error del Drag&Drop (valDragSrcEl is null) iguáu separtando'l reset de DOM síncrono de la llamada async. El contestu global agora sí afita y recupera correchamente tolos campos (trimestre, materia, sda, grupu) dende la nube al aniciar. L'orde alfabéticu básase nel campu apellíos primero.
- v0.19.18 (Auto-Scroll): Lóxica d'auto-scroll intelixente (esmuz la pantalla al abasnar cerca los cantos).
- v0.19.16 (Fix Cloud Order): Llectura y escritura nel sirvidor d'ordenación manual codificada pa grupos con espacios.
- v0.19.15 (Smooth Drag&Drop): Meyora xeneral d'UX al ordenar estudiantes con animación CSS de buecu.
================================================================
-->
<!doctype html>
<html lang="ast">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Llumera</title>
  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💡</text></svg>">
  <style>
    :root{
      --bg:#f6f7f9; --card:#ffffff; --text:#111827; --muted:#6b7280; --line:#e5e7eb;
      --btn:#ffffff; --btnLine:#d1d5db; --btnHover:#f3f4f6; --primary:#059669;
      --shadow: 0 1px 2px rgba(0,0,0,.05);
      --radius: 18px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      
      /* Colores d'evaluación */
      --c-roxu: #ef4444;
      --c-naranxa: #f59e0b;
      --c-azul: #0ea5e9;
      --c-verde: #10b981;
    }
    *{box-sizing:border-box}
    body{margin:0; font-family:var(--sans); color:var(--text); background:var(--bg)}
    
    .app{display:grid; grid-template-columns: 260px 1fr; min-height:100vh; gap:18px; padding:18px}
    .app.sidebar-collapsed { grid-template-columns: 1fr; }
    .app.sidebar-collapsed .sidebar { display: none; }
    
    .sidebar{display:flex; flex-direction:column; gap:14px}
    .brand{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); display:flex; gap:12px; align-items:center}
    .brand .logo{width:44px; height:44px; border-radius:14px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:#059669; background:#ecfdf5; font-size:20px;}
    .brand h1{font-size:16px; margin:0}
    .brand p{margin:2px 0 0 0; color:var(--muted); font-size:12px; line-height:1.2}
    .nav{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:10px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px}
    .nav button{all:unset; cursor:pointer; padding:10px 12px; border-radius:14px; display:flex; gap:10px; align-items:center; color:#374151; font-weight:500;}
    .nav button:hover{background:var(--btnHover)}
    .nav button.active{background:#ecfdf5; color:#059669; border:1px solid #a7f3d0}
    .sidecard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow)}
    .label{font-size:12px; color:var(--muted); margin:8px 0 6px; text-transform:uppercase; letter-spacing:0.5px; font-weight:600;}
    .input, select, textarea{
      width:100%; padding:12px 14px; border-radius:14px; border:1px solid var(--line);
      background:#fff; outline:none; font-size:14px; transition:border-color 0.2s;
    }
    textarea{min-height:88px; resize:vertical}
    .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
    .btn{border:1px solid var(--btnLine); background:var(--btn); border-radius:14px; padding:10px 12px; cursor:pointer; font-weight:500; text-align:center;}
    .btn:hover{background:var(--btnHover)}
    .btn.primary{border-color:var(--primary); color:#fff; background:var(--primary)}
    .btn.primary:hover{filter:brightness(0.95)}
    .btn.ghost{border-color:transparent; background:transparent}
    
    .menu-toggle { all: unset; cursor: pointer; font-size: 22px; color: var(--muted); padding: 4px 8px; margin-right: 14px; border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
    .menu-toggle:hover { background: var(--btnHover); color: var(--text); }

    .main{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; min-width:0;}
    .topbar{display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--line)}
    .topbar h2{margin:0; font-size:20px}
    .topbar .sub{margin:2px 0 0 0; color:var(--muted); font-size:13px}
    .content{padding:24px; overflow-y:auto; flex:1; min-width:0;}
    .panel{display:none}
    .panel.active{display:block}
    
    table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--line); border-radius:14px}
    th, td{padding:12px 14px; border-bottom:1px solid var(--line); font-size:13px}
    th{color:#6b7280; text-align:left; background:#fafafa; font-weight:600;}
    th.sortable { cursor: pointer; user-select: none; transition: background 0.2s; }
    th.sortable:hover { background: #e5e7eb; color: #111827; }
    th.sortable span { font-size: 10px; color: #059669; margin-left: 4px; display: inline-block; width: 12px; text-align: center; }
    tr:last-child td{border-bottom:none}
    
    .pill{display:inline-block; padding:3px 8px; border-radius:999px; border:1px solid var(--line); font-size:12px; color:#374151; background:#fff}
    .muted{color:var(--muted)}
    .ok{color:#059669}
    .err{color:#dc2626}
    .kpi{display:flex; gap:8px; align-items:center; font-family:var(--mono); font-size:12px; color:#6b7280}
    .hr{height:1px; background:var(--line); margin:18px 0}

    /* Estilos de Semeya / Avatar */
    .avatar { width: 36px; height: 36px; border-radius: 50%; background: #e5e7eb; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: #9ca3af; object-fit: cover; flex-shrink: 0; }
    .avatar.lg { width: 60px; height: 60px; font-size: 24px; }
    
    /* Modales */
    .modalWrap{position:fixed; inset:0; background:rgba(17,24,39,.4); display:none; align-items:center; justify-content:center; padding:18px; z-index:1000;}
    .modalWrap.show{display:flex}
    .modal{background:#fff; border:1px solid var(--line); border-radius:22px; width:min(980px, 100%); box-shadow: 0 12px 40px rgba(0,0,0,.12); overflow:hidden; display:flex; flex-direction:column; max-height: 90vh;}
    .modalHead{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:18px 24px; border-bottom:1px solid var(--line)}
    .modalHead h3{margin:0; font-size:18px}
    .modalHead p{margin:4px 0 0; color:var(--muted); font-size:13px}
    .modalBody{padding:24px; overflow-y:auto; min-width:0;}
    .modalFoot{display:flex; justify-content:flex-end; gap:10px; padding:18px 24px; border-top:1px solid var(--line); background:#fafafa}
    .x{width:40px; height:40px; border-radius:14px; border:1px solid var(--line); background:#fff; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px;}
    .x:hover{background:var(--btnHover)}
    .chips{display:flex; flex-wrap:wrap; gap:8px; padding:10px; border:1px solid var(--line); border-radius:14px; min-height:46px}
    .chip{border:1px solid var(--line); border-radius:999px; padding:6px 12px; cursor:pointer; font-size:13px; color:#374151; background:#fff; transition:all 0.2s;}
    .chip.on{background:#059669; color:#fff; border-color:#059669}
    
    /* Dashboard del Trimestre */
    .dash-grid { display:grid; grid-template-columns: 1fr 1.5fr; gap:18px; margin-bottom:18px; }
    .dash-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); }
    .dash-card h4 { margin:0 0 10px 0; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; font-weight:600;}
    .info-btn { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#e5e7eb; color:#6b7280; font-size:11px; font-weight:bold; font-family:var(--mono); cursor:pointer; margin-left:6px; vertical-align:middle; transition:all 0.2s;}
    .info-btn:hover { background:#d1d5db; color:#374151;}
    .big-grade { font-size:56px; font-weight:bold; color:#059669; line-height:1; letter-spacing:-1px;}
    .rubric-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap:12px; margin-top:10px; }
    .rubric-box { border:1px solid var(--line); border-radius:14px; padding:18px; text-align:center; background:#fff; box-shadow:var(--shadow);}
    .rubric-box .num { font-size:28px; font-weight:bold; margin-bottom:4px; }
    .r1 { color:var(--c-roxu); } .r2 { color:var(--c-naranxa); } .r3 { color:var(--c-azul); } .r4 { color:var(--c-verde); }
    .student-cards { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; }
    .scard { min-width:130px; border:1px solid var(--line); border-radius:14px; padding:16px; text-align:center; background:#fff; flex-shrink:0; box-shadow:var(--shadow); cursor:pointer; transition:border 0.2s;}
    .scard:hover { border-color: #059669; }
    .scard .name { font-size:13px; color:var(--muted); margin-bottom:10px; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500;}
    .scard .bar { height:6px; border-radius:3px; background:var(--line); width:100%; overflow:hidden; }
    .scard .bar-fill { height:100%; transition: width 0.4s ease; }
    
    /* Semáforu d'Auditoría */
    .crit-badge { display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:600; cursor:help; border:1px solid transparent; transition:filter 0.2s; font-family:var(--mono);}
    .crit-badge:hover { filter:brightness(0.95); }
    .cb-0 { background:#fee2e2; color:#991b1b; border-color:#fca5a5; }
    .cb-1 { background:#ffedd5; color:#9a3412; border-color:#fdba74; }
    .cb-2 { background:#d1fae5; color:#065f46; border-color:#6ee7b7; }

    /* Barres d'Estadístiques */
    .group-stat-row { margin-bottom: 12px; }
    .group-stat-header { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 4px; font-weight: 600; color:#374151;}
    .stacked-bar-wrap { width: 100%; height: 18px; display: flex; border-radius: 9px; overflow: hidden; background: #e5e7eb; }
    .stacked-segment { height: 100%; transition: width 0.4s ease; display: flex; align-items: center; justify-content: center; color: white; font-size: 10px; font-weight: bold; overflow: hidden; }

    /* Animación fluyida de buecos de Drag & Drop pa la tabla */
    tr.val-drag-row td { 
        transition: padding 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease; 
    }
    tr.drag-gap-top td { 
        padding-top: 64px !important; 
        box-shadow: inset 0 4px 0 #fca5a5 !important; 
    }
    tr.drag-gap-bottom td { 
        padding-bottom: 64px !important; 
        box-shadow: inset 0 -4px 0 #fca5a5 !important; 
    }

    @media (max-width: 980px){
      .app{grid-template-columns:1fr}
      .dash-grid{grid-template-columns:1fr}
    }

    /* ESTILOS ESPECÍFICOS D'IMPRENTACIÓN */
    @media print {
      body { background: white; margin: 0; padding: 0; }
      .app, .modalWrap, #loginOverlay, #fatalBanner { display: none !important; }
      #informePrint, #informeContextoPrint { display: none !important; width: 100%; padding: 0; }
      body[data-print-target="alumno"] #informePrint { display: block !important; }
      body[data-print-target="contexto"] #informeContextoPrint { display: block !important; }
      @page { margin: 1.2cm; }
      #informePrint th, #informeContextoPrint th { background: #f3f4f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      #informePrint .bg-info, #informeContextoPrint .bg-info { background: #f9fafb !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      #informePrint tr, #informeContextoPrint tr { page-break-inside: avoid; }
      #informeContextoPrint { font-size: 10.1pt !important; line-height: 1.34 !important; }
      #informeContextoPrint h1 { font-size: 18.5pt !important; margin: 0 0 4px 0 !important; }
      #informeContextoPrint h2 { font-size: 13.2pt !important; margin: 0 0 6px 0 !important; }
      #informeContextoPrint p { margin: 0 0 8px 0 !important; }
      #informeContextoPrint .ctx-sec { margin-bottom: 16px !important; }
      #informeContextoPrint table { font-size: 9.5pt !important; }
      #informeContextoPrint th, #informeContextoPrint td { padding: 7px 8px !important; line-height: 1.28 !important; }
      #informeContextoPrint .ctx-meta { font-size: 10pt !important; line-height: 1.3 !important; }
      #informeContextoPrint .ctx-tight { line-height: 1.28 !important; }
    }
  </style>
</head>
<body>

<div id="fatalBanner" style="display:none; position:fixed; top:0; left:0; right:0; z-index:9999; padding:10px 12px; background:#fff3f3; border-bottom:1px solid #ffd0d0; color:#7a1b1b; font-family:system-ui; font-size:13px">
  <b>ERROR UI:</b> <span id="fatalMsg"></span>
</div>

<!-- OVERLAY DE LOGIN (V0.19.0) -->
<div id="loginOverlay" style="display:flex; position:fixed; inset:0; background:var(--bg); z-index:9999; align-items:center; justify-content:center; padding:18px;">
  <div style="background:#fff; border:1px solid var(--line); border-radius:24px; padding:40px; width:min(420px, 100%); box-shadow: 0 20px 40px rgba(0,0,0,.08); text-align:center;">
    <div style="width:64px; height:64px; background:#ecfdf5; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:32px; margin: 0 auto 16px;">💡</div>
    <h2 style="margin:0 0 6px 0; color:#111827; font-size:24px;">Llumera</h2>
    <p style="margin:0 0 24px 0; color:var(--muted); font-size:14px;">Entama sesión pa xestionar el cuadernu</p>

    <div id="loginFormBox">
        <input type="password" id="loginPass" class="input" placeholder="Contraseña de Llumera" style="margin-bottom:16px; text-align:center; font-size:16px; padding:14px; border-radius:16px;">
        <button class="btn primary" id="loginBtn" style="width:100%; padding:14px; font-size:15px; font-weight:bold; border-radius:16px; margin-bottom:16px;">Entrar al panel</button>
        
        <div style="position:relative; text-align:center; margin: 24px 0;">
            <div style="border-top:1px solid var(--line); position:absolute; top:50%; left:0; right:0;"></div>
            <span style="background:#fff; padding:0 12px; position:relative; color:var(--muted); font-size:12px; font-weight:600; text-transform:uppercase;">Tamién puedes</span>
        </div>

        <button class="btn ghost" id="btnQrGen" style="width:100%; border:2px solid var(--line); border-radius:16px; padding:12px; display:flex; gap:10px; align-items:center; justify-content:center; font-weight:600; color:#374151; transition: border 0.2s;">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
            Iniciar sesión por QR
        </button>
        <div id="loginMsg" style="margin-top:16px; font-size:13px; min-height: 20px;"></div>
    </div>

    <div id="qrBox" style="display:none; text-align:center;">
        <p style="font-size:14px; color:#374151; margin-bottom:20px; line-height:1.5;">Escania esti códigu col to móvil p'autorizar l'accesu nesti preséu ensin teclear nada.</p>
        <div style="background:#f9fafb; padding:16px; border-radius:16px; border:1px solid var(--line); display:inline-block; margin-bottom:16px;">
            <img id="qrImage" src="" style="width:200px; height:200px; display:block;">
        </div>
        <div style="font-size:11px; color:var(--muted); word-break:break-all; background:#f3f4f6; padding:10px; border-radius:12px; margin-bottom:20px; font-family:var(--mono);" id="qrLinkText"></div>
        <button class="btn ghost" id="btnQrCancel" style="width:100%; border:2px solid var(--line); border-radius:16px; padding:12px; font-weight:600; color:#4b5563;">Encaboxar</button>
    </div>
  </div>
</div>

<div class="app" id="appContainer" style="display:none;">
  
  <!-- SIDEBAR (Navegación) -->
  <aside class="sidebar">
    <div class="brand" id="appBrand" style="cursor:pointer;" title="Recargar Llumera">
      <div class="logo">💡</div>
      <div>
        <h1>Llumera</h1>
        <p>Evaluación LOMLOE • Asturies<br><span class="muted">v0.19.46</span> <span id="uiDiag" class="kpi" style="display:inline-flex; margin-left:4px"></span></p>
      </div>
    </div>

    <nav class="nav" id="nav">
      <button data-tab="panel" class="active">🏠 <span>Panel</span></button>
      <button data-tab="alumnos">👥 <span>Estudiantes</span></button>
      <button data-tab="criterios">✅ <span>Criterios</span></button>
      <button data-tab="instrumentos">🛠️ <span>Instrumentos</span></button>
      <button data-tab="evidencias">📁 <span>Evidencies</span></button>
      <button data-tab="calificaciones">📊 <span>Calificaciones</span></button>
      <button data-tab="final">🎓 <span>Final</span></button>
      <button data-tab="config">⚙️ <span>Configuración</span></button>
    </nav>
  </aside>

  <!-- MAIN AREA -->
  <main class="main">
    <div class="topbar">
      <div style="display:flex; align-items:center;">
        <button id="sidebarToggle" class="menu-toggle" title="Amosar/anubrir panel llateral">☰</button>
        <div>
          <h2 id="pageTitle">Panel del trimestre</h2>
          <div class="sub" id="pageSub">Rendimientu de l'aula y auditoría docente</div>
        </div>
      </div>
      <div style="display:flex; gap:10px; align-items:center;">
        <span id="apiKpi" class="pill muted">Cargando API…</span>
        
        <!-- Botón de Zarrar Sesión Nativu -->
        <button class="btn ghost" id="btnLogout" title="Zarrar sesión" style="padding:6px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); color: var(--c-roxu); transition: background 0.2s;">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
            <polyline points="16 17 21 12 16 7"></polyline>
            <line x1="21" y1="12" x2="9" y2="12"></line>
          </svg>
        </button>

      </div>
    </div>

    <!-- BARRA DE CONTESTU GLOBAL (Fixada baxo la topbar) -->
    <div id="evalContextBar" style="display:none; padding:16px 24px; background:#fafafa; border-bottom:1px solid var(--line);">
      <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;">
        <div>
          <div class="label" style="margin:0; font-size:14px; color:var(--primary);">Contestu de trabayu</div>
          <div class="muted" style="font-size:12px; margin-top:2px;">Necesariu pa ver el panel, les evidencies y les notes.</div>
        </div>
        <div style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
          <input id="evCurso" class="input" style="width:100px; padding:10px;" value="2025-2026">
          <select id="evTri" class="input" style="width:70px; padding:10px; font-weight:bold; color:#059669;">
            <option value="1">1T</option><option value="2">2T</option><option value="3">3T</option>
          </select>
          <select id="evNivel" class="input" style="width:110px; padding:10px;">
            <option value="">— Nivel —</option>
            <option>1ESO</option><option>2ESO</option><option>3ESO</option><option>4ESO</option>
            <option>1BACH</option><option>2BACH</option>
          </select>
          <select id="evMateria" class="input" style="width:110px; padding:10px;">
            <option value="">— Mat. —</option>
            <option value="LAL">LAL</option><option value="LALI">LALI</option><option value="LALII">LALII</option>
          </select>
          <input id="evGrupo" class="input" style="width:100px; padding:10px;" placeholder="Grupu">
          <select id="evSdaFilter" class="input" style="width:140px; padding:10px; background:#eff6ff; border-color:#bfdbfe; color:#1e3a8a;">
            <option value="">Toles SdA</option>
          </select>
          <button class="btn primary" id="evRefreshBtn" style="padding:10px 16px; min-width:80px;">Cargar</button>
        </div>
      </div>
    </div>

    <div class="content">
      
      <!-- Llingüeta 1: PANEL (Dashboard + Semáforu) -->
      <section class="panel active" id="tab-panel">
        <div id="dashTrimestre" style="display:none;">
          <div class="dash-grid">
            <div class="dash-card" style="display:flex; flex-direction:column;">
              <h4 style="margin-bottom:auto;">Rendimientu del contestu <span class="info-btn" data-info="media">i</span></h4>
              
              <div style="display:flex; justify-content:center; align-items:center; gap:12%; margin-top:20px; flex-wrap:wrap;">
                <div style="text-align:center;">
                  <div class="muted" style="font-size:11px; text-transform:uppercase; letter-spacing:0.5px; font-weight:600; margin-bottom:8px;">Nota proyeutada</div>
                  <div class="big-grade" id="dashMediaProy" style="color:#0ea5e9;">0.00</div>
                </div>
                
                <div style="height:60px; border-left:2px solid var(--line);"></div>
                
                <div style="text-align:center;">
                  <div class="muted" style="font-size:11px; text-transform:uppercase; letter-spacing:0.5px; font-weight:600; margin-bottom:8px;">Acumulada (oficial)</div>
                  <div class="big-grade" id="dashMediaAcum" style="font-size:36px; color:#6b7280;">0.00</div>
                </div>
              </div>
              
              <div style="text-align:center; margin-top:24px;">
                  <div class="muted" style="font-size:12px; display:inline-block; background:#f3f4f6; padding:6px 12px; border-radius:8px;" id="dashEvCount">Basada en 0 evidencies</div>
              </div>
            </div>
            
            <div class="dash-card" id="dashGroupStatsContainer" style="display:none;">
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
                    <h4 style="margin:0;">Comparanza de grupos (rendimientu) <span class="info-btn" data-info="grupos">i</span></h4>
                </div>
                <div id="dashGroupStats">
                    <!-- Enllenar per JS -->
                </div>
            </div>
          </div>

          <div class="dash-card" style="padding-bottom:16px; margin-bottom:18px;">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
              <h4>Estudiantes con nota <span class="info-btn" data-info="estudiantes">i</span></h4>
              <div style="display:flex; gap:10px; align-items:center;">
                <button class="btn ghost" id="dashExportBtn" style="font-size:12px; padding:4px 8px; border:1px solid var(--line); border-radius:8px;">⬇️ Esportar CSV</button>
                <a href="#" id="dashVerNotes" style="font-size:12px; color:#059669; text-decoration:none; font-weight:600;">Ver toos &rarr;</a>
              </div>
            </div>
            <div class="student-cards" id="dashStudents">
              <!-- Cárgase con JS -->
            </div>
          </div>
          
          <div id="dashSemaforo" style="display:none; margin-bottom:18px;">
            <div class="dash-card" style="padding:20px 24px;">
              <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
                <h4 style="margin:0;">Auditoría de criterios (mapa de calor) <span class="info-btn" data-info="semaforo">i</span></h4>
                <div class="muted" style="font-size:11px; text-transform:uppercase; letter-spacing:0.5px; font-weight:600;">Cobertoria planificada</div>
              </div>
              <div id="semaforoChips" style="display:flex; flex-wrap:wrap; gap:8px;"></div>
            </div>
          </div>

          <div class="label" style="margin-top:24px">Rúbrica rápida LOMLOE (escala Llumera 1-4)</div>
          <div class="rubric-grid">
            <div class="rubric-box"><div class="num r1">1</div><div class="r1" style="font-size:13px; font-weight:500;">Aniciu</div></div>
            <div class="rubric-box"><div class="num r2">2</div><div class="r2" style="font-size:13px; font-weight:500;">En procesu</div></div>
            <div class="rubric-box"><div class="num r3">3</div><div class="r3" style="font-size:13px; font-weight:500;">Afayadizu</div></div>
            <div class="rubric-box"><div class="num r4">4</div><div class="r4" style="font-size:13px; font-weight:500;">Avanzáu</div></div>
          </div>
          <div class="muted" style="font-size:11px; text-align:center; margin-top:12px; font-weight:600;">Conversión algorítmica: 1 &rarr; 2.5 | 2 &rarr; 5 | 3 &rarr; 7.5 | 4 &rarr; 10</div>
        </div>
        
        <div id="panelEmptyMsg" class="muted" style="text-align:center; padding:60px 40px; margin-top:20px; border:2px dashed var(--line); border-radius:14px; display:none; background:#fafafa; transition: opacity 0.2s;">
          <div style="font-size:24px; margin-bottom:10px;">📊</div>
          Escueye'l <b>Nivel</b> y la <b>Materia</b> na barra d'enriba pa cargar el to panel.
        </div>
      </section>

      <!-- Llingüeta 2: ALUMNOS -->
      <section class="panel" id="tab-alumnos">
        <div class="row">
          <div>
            <div class="row">
              <div>
                <div class="label">Filtru llista (nivel)</div>
                <select id="aluNivelFilter" class="input">
                  <option value="">Tolos niveles</option>
                  <option>1ESO</option><option>2ESO</option><option>3ESO</option><option>4ESO</option>
                  <option>1BACH</option><option>2BACH</option>
                </select>
              </div>
              <div>
                <div class="label">Filtru llista (grupu)</div>
                <select id="aluGrupoFilter" class="input">
                  <option value="">Tolos grupos</option>
                </select>
              </div>
            </div>
            <div style="display:flex; gap:10px; margin-top:10px;">
              <button class="btn" id="aluRefresh">Refrescar llista</button>
            </div>
          </div>
          <div style="display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-end;">
            <button class="btn primary" id="aluAddBtn">+ Añadir estudiante a mano</button>
          </div>
        </div>
        
        <div class="hr"></div>
        <div class="label">Llista d'estudiantes <span class="muted" style="text-transform:none; font-weight:normal;">(calca nes cabeceres pa ordenar)</span> <span id="aluCountBadge" class="pill" style="margin-left:8px; font-weight:bold; color:#059669; background:#ecfdf5; border-color:#a7f3d0; text-transform:none;"></span></div>
        <div style="overflow:auto; border:1px solid var(--line); border-radius:14px; background:#fff;">
          <table style="border:none;">
            <thead><tr>
              <th class="sortable" data-sort="numoper" style="width:70px; text-align:center;">Nº<span></span></th>
              <th class="sortable" data-sort="grupo">Grupu<span></span></th>
              <th class="sortable" data-sort="alias">Estudiante<span></span></th>
              <th class="sortable" data-sort="nivel">Nivel/Mat<span></span></th>
              <th class="sortable" data-sort="observaciones">Observaciones<span></span></th>
              <th style="text-align:right">Aiciones</th>
            </tr></thead>
            <tbody id="aluTbody"></tbody>
          </table>
        </div>
        
        <div class="hr"></div>
        <div class="label">📥 Importar estudiantes dende SAUCE</div>
        <div class="muted" style="font-size:12px; margin-top:2px; line-height: 1.5;">
          Importación masiva dende l'esportador de SAUCE. Llumera frañerá los apellíos y el nome usando la coma de separación ya inorará duplicaos.
        </div>

        <div class="row" style="margin-top:14px;">
          <div class="sidecard" style="margin:0; background:#fafafa;">
            <div class="label" style="color:#059669;">1. Escoyer destín (pa la inxeición)</div>
            <div class="row">
              <select id="aluImpNivel" class="input">
                <option value="">— Nivel —</option>
                <option>1ESO</option><option>2ESO</option><option>3ESO</option><option>4ESO</option>
                <option>1BACH</option><option>2BACH</option>
              </select>
              <select id="aluImpMateria" class="input">
                <option value="">— Materia —</option>
                <option value="LAL">LAL</option>
                <option value="LALI">LALI</option>
                <option value="LALII">LALII</option>
              </select>
            </div>
          </div>
          
          <div class="sidecard" style="margin:0; background:#fafafa;">
            <div class="label" style="color:#059669;">2. Pegar CSV o xubir archivu</div>
            <textarea id="aluCsvText" class="input" placeholder="Pega equí'l conteníu del to CSV de SAUCE..." style="min-height: 60px;"></textarea>
            <div class="label" style="margin-top:8px;">O tamién:</div>
            <input id="aluCsvFile" class="input" type="file" accept=".csv,text/csv" style="padding:6px;">
            
            <div style="display:flex; gap:10px; margin-top:14px;">
              <button class="btn primary" id="aluImportBtn">Procesar SAUCE</button>
              <button class="btn" id="aluCsvClearBtn">Vaciar</button>
            </div>
            <div id="aluImportMsg" class="label" style="text-transform:none; margin-top:10px;"></div>
          </div>
        </div>
      </section>

      <!-- Llingüeta 3: CRITERIOS -->
      <section class="panel" id="tab-criterios">
        <div class="row" style="margin-bottom:14px;">
          <div>
            <div class="label">Filtru currículu (nivel)</div>
            <select id="nivelFilter" class="input">
              <option value="">Tolos niveles</option>
              <option>1ESO</option><option>2ESO</option><option>3ESO</option><option>4ESO</option>
              <option>1BACH</option><option>2BACH</option>
            </select>
          </div>
          <div>
            <div class="label">Buscar testu o códigu</div>
            <input id="critSearch" class="input" placeholder="p.ex. 3.2 o “doblaxe”">
          </div>
        </div>

        <div id="critMsg" class="label" style="text-transform:none; margin-bottom:8px;"></div>
        <div style="overflow:auto; border:1px solid var(--line); border-radius:14px; background:#fff;">
          <table style="border:none;">
            <thead><tr>
              <th>Nivel</th><th>Materia</th><th>Códigu</th><th>Descripción</th><th>Pesu</th><th style="text-align:right;">Aiciones</th>
            </tr></thead>
            <tbody id="critTbody"></tbody>
          </table>
        </div>
      
        <div class="hr"></div>
        <div class="label">Importar currículu (CSV)</div>
        <div class="muted" style="font-size:12px; margin-top:2px">Puedes pegar el CSV o xubir un archivu pa la inxección masiva nel sistema.</div>

        <div class="row" style="margin-top:10px;">
          <div class="sidecard" style="margin:0; background:#fafafa;">
            <div class="label">Pegar CSV direutu</div>
            <textarea id="critCsvText" class="input" placeholder="Pega equí'l CSV..."></textarea>
            <div style="display:flex; gap:10px; margin-top:10px;">
              <button class="btn primary" id="critImportTextBtn">Importar CSV</button>
              <button class="btn" id="critCsvClearBtn">Vaciar</button>
            </div>
          </div>
          <div class="sidecard" style="margin:0; background:#fafafa;">
            <div class="label">Xubir archivu .csv</div>
            <input id="critCsvFile" class="input" type="file" accept=".csv,text/csv" style="padding:6px;">
            <div style="display:flex; gap:10px; margin-top:10px;">
              <button class="btn primary" id="critImportFileBtn">Cargar archivu</button>
            </div>
            <div id="critImportMsg" class="label" style="text-transform:none; margin-top:10px;"></div>
          </div>
        </div>
      </section>

      <!-- Llingüeta 3.5: INSTRUMENTOS -->
      <section class="panel" id="tab-instrumentos">
        <div style="display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:16px;">
          <div>
            <div class="label" style="margin:0; font-size:14px; color:#111827;">Ferramientes d'evaluación</div>
            <div class="muted" style="font-size:12px; margin-top:2px">Xestiona los instrumentos qu'uses nes evidencies (rúbriques, escales...).</div>
          </div>
          <button class="btn primary" id="instAddBtn">+ Añadir instrumentu</button>
        </div>

        <div id="instMsg" class="label" style="text-transform:none; margin-bottom:10px;"></div>

        <div style="overflow:auto; border:1px solid var(--line); border-radius:14px; background:#fff;">
          <table style="border:none;">
            <thead><tr>
              <th>Nome</th><th>Tipu</th><th>Descripción</th><th style="text-align:right">Aiciones</th>
            </tr></thead>
            <tbody id="instAdminTbody"></tbody>
          </table>
        </div>
      </section>

      <!-- Llingüeta 4: EVIDENCIES -->
      <section class="panel" id="tab-evidencias">
        <div style="display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:16px;">
          <div>
            <div class="label" style="margin:0; font-size:14px; color:#111827;">Cuadernu de campu</div>
            <div class="muted" style="font-size:12px; margin-top:2px">Planificación de tarees y espaciu pa valorar (1-4) al alumnáu.</div>
          </div>
          <div style="display:flex; gap:10px;">
            <button class="btn ghost" id="evCloneOpenBtn" style="border:1px solid var(--line);">🔄 Clonar planificación</button>
            <button class="btn primary" id="evAddOpenBtn">+ Nueva evidencia</button>
          </div>
        </div>

        <div id="evState" class="label" style="text-transform:none; margin-bottom:10px;"></div>

        <div id="table-evidencias-wrap" style="display:none; overflow:auto; border:1px solid var(--line); border-radius:14px; background:#fff;">
          <table style="border:none;">
            <thead><tr>
              <th class="sortable" data-sort="fecha">Fecha<span></span></th>
              <th class="sortable" data-sort="titulo">Títulu d'actividá<span></span></th>
              <th class="sortable" data-sort="tipo">Tipu<span></span></th>
              <th>Observaciones</th>
              <th>Criterios asociaos</th>
              <th style="text-align:right">Aiciones</th>
            </tr></thead>
            <tbody id="evTbody"></tbody>
          </table>
        </div>
        
        <div id="evEmptyMsg" class="muted" style="text-align:center; padding:60px 40px; margin-top:20px; border:2px dashed var(--line); border-radius:14px; display:none; background:#fafafa; transition: opacity 0.2s;">
          <div style="font-size:24px; margin-bottom:10px;">📁</div>
          Escueye'l <b>Nivel</b> y la <b>Materia</b> na barra d'enriba pa xestionar les evidencies.
        </div>
      </section>

      <!-- Llingüeta 5: CALIFICACIONES -->
      <section class="panel" id="tab-calificaciones">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
          <div>
            <div class="label" style="margin:0; font-size:14px; color:#111827;">Llistáu oficial de notes <span id="notesSubSda" style="color:#0ea5e9; font-weight:600; display:none;"></span></div>
            <div class="muted" style="font-size:12px; margin-top:2px">Calca enriba de cualquier estudiante p'abrir la so <b>trazabilidá llegal</b> (desglose completu pa xustificar la nota).</div>
          </div>
          <div style="display:flex; gap:10px; align-items:center;">
            <button class="btn ghost" id="btnPrintContexto" style="border:1px solid #bae6fd; font-weight:600; color:#0369a1; background:#f0f9ff;">🖨️ Informe del contestu</button>
            <button class="btn ghost" id="evExportMatrizBtn" style="border:1px solid var(--line); font-weight:600; color:#059669; background:#ecfdf5;">⬇️ Esportar cuadernu completu (Excel)</button>
            <button class="btn" id="btnToggleLock" style="border:1px solid var(--line); font-weight:600; display:none; gap:6px; align-items:center;">
               <span id="lockIcon">🔓</span> <span id="lockText">Zarrar evaluación</span>
            </button>
          </div>
        </div>

        <div id="notesMsg" class="label" style="text-transform:none; margin-bottom:10px;"></div>

        <div id="table-notes-wrap" style="display:none; overflow:auto; background:#fff; border:1px solid var(--line); border-radius:14px;">
          <table style="border:none;">
            <thead style="background:#fafafa;"><tr>
              <th class="sortable" data-sort="estudiante" style="padding:16px 14px;">Estudiante<span></span></th>
              <th class="sortable" data-sort="grupo" style="padding:16px 14px;">Grupu<span></span></th>
              <th class="sortable" data-sort="nivel" style="padding:16px 14px;">Nivel<span></span></th>
              <th class="sortable" data-sort="proyeutada" style="padding:16px 14px; text-align:center;">Nota proyeutada<span></span></th>
              <th class="sortable" data-sort="acumulada" style="padding:16px 14px; text-align:center;">Nota acumulada<span></span></th>
              <th style="padding:16px 14px; text-align:right;">Aiciones</th>
            </tr></thead>
            <tbody id="notesTbody"></tbody>
          </table>
        </div>
        
        <div id="notesEmptyMsg" class="muted" style="text-align:center; padding:60px 40px; margin-top:20px; border:2px dashed var(--line); border-radius:14px; display:none; background:#fafafa; transition: opacity 0.2s;">
          <div style="font-size:24px; margin-bottom:10px;">⚖️</div>
          Escueye'l <b>Nivel</b> y la <b>Materia</b> na barra d'enriba pa calcular les calificaciones.
        </div>
      </section>


      <!-- Llingüeta 5B: FINAL ANUAL -->
      <section class="panel" id="tab-final">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:12px; flex-wrap:wrap;">
          <div>
            <div class="label" style="margin:0; font-size:14px; color:#111827;">Calificación final 1-2-3</div>
            <div class="muted" style="font-size:12px; margin-top:2px">Vista anual separada de les evaluaciones trimestrales. Equí combínense 1T, 2T y 3T con pesos configurables.</div>
          </div>
          <div style="display:flex; gap:10px; align-items:center; flex-wrap:wrap;">
            <span id="finalWeightsBadge" class="pill" style="background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8;">Pesos: 1 · 2 · 3</span>
            <button class="btn ghost" id="btnGoFinalConfig" style="border:1px solid #bfdbfe; color:#1d4ed8; background:#eff6ff;">⚙️ Configurar pesos</button>
          </div>
        </div>

        <div style="margin-bottom:14px; padding:12px 14px; border:1px solid #dbeafe; border-radius:14px; background:#f8fbff; color:#1e3a8a; font-size:13px; line-height:1.5;">
          Nesta vista úsense <b>siempres los tres trimestres del cursu</b>. Si una evaluación ta zarrada, tómase la so nota zarrada; si nun lo ta, tómase la <b>proyección actual</b> d'esi trimestre. El filtro de <b>SdA</b> de la barra superior nun intervien equí.
        </div>

        <div id="finalMsg" class="label" style="text-transform:none; margin-bottom:10px;"></div>

        <div id="table-final-wrap" style="display:none; overflow:auto; background:#fff; border:1px solid var(--line); border-radius:14px;">
          <table style="border:none;">
            <thead style="background:#fafafa;"><tr>
              <th style="padding:16px 14px;">Estudiante</th>
              <th style="padding:16px 14px;">Grupu</th>
              <th style="padding:16px 14px;">Nivel</th>
              <th style="padding:16px 14px; text-align:center;">1T</th>
              <th style="padding:16px 14px; text-align:center;">2T</th>
              <th style="padding:16px 14px; text-align:center;">3T</th>
              <th style="padding:16px 14px; text-align:center;">Final 1-2-3</th>
              <th style="padding:16px 14px; text-align:center;">Cobertura</th>
            </tr></thead>
            <tbody id="finalTbody"></tbody>
          </table>
        </div>

        <div id="finalEmptyMsg" class="muted" style="text-align:center; padding:60px 40px; margin-top:20px; border:2px dashed var(--line); border-radius:14px; display:none; background:#fafafa; transition: opacity 0.2s;">
          <div style="font-size:24px; margin-bottom:10px;">🎓</div>
          Escueye'l <b>Nivel</b> y la <b>Materia</b> na barra d'enriba pa calcular la nota final anual.
        </div>
      </section>

      <!-- Llingüeta 6: CONFIGURACIÓN -->
      <section class="panel" id="tab-config">
        <div class="label" style="font-size:16px; color:#111827; margin-bottom:2px;">Axustes del sistema</div>
        <div class="muted" style="margin-bottom:24px;">Xestión de la base de datos, diagnósticu y conexón de rede.</div>

        <div class="row">
          <!-- Diagnóstico -->
          <div class="sidecard" style="margin:0; background:#fafafa;">
            <div class="label">🛠️ Diagnósticu de conexón</div>
            <div id="panelSalud" class="kpi" style="margin-bottom:14px;">—</div>
            <div class="label">Carga en memoria JS</div>
            <div id="panelCounts" class="kpi" style="margin-bottom:14px;">—</div>
            <div class="label">URL base interna</div>
            <div id="cfgDiag" class="kpi">—</div>
          </div>
          
          <!-- Nueva Xestión de Contraseña (v0.19.1) -->
          <div class="sidecard" style="margin:0;">
            <div class="label" style="color:#059669;">🔑 Camudar contraseña</div>
            <div class="muted" style="font-size:12px; margin-bottom:12px">Camuda la clave d'accesu al to panel. Por defeutu ye "admin".</div>
            <input type="password" id="cfgPassOld" class="input" placeholder="Contraseña actual" style="margin-bottom:8px;">
            <input type="password" id="cfgPassNew" class="input" placeholder="Nueva contraseña" style="margin-bottom:8px;">
            <input type="password" id="cfgPassConfirm" class="input" placeholder="Repite la nueva" style="margin-bottom:8px;">
            <button class="btn primary" id="btnChangePass" style="width:100%; margin-top:6px;">Anovar clave</button>
            <div id="cfgPassMsg" class="label" style="text-transform:none; margin-top:10px;"></div>
          </div>
        </div>

        <div class="row" style="margin-top: 18px;">
          <div class="sidecard" style="margin:0;">
            <div class="label" style="color:#1d4ed8;">🎓 Ponderación de la nota final</div>
            <div class="muted" style="font-size:12px; margin-bottom:12px; line-height:1.5;">Configura los pesos de 1T, 2T y 3T pa la vista anual separada. Esto <b>nun toca les notes trimestrales</b>; namás cambia la combinación final 1-2-3.</div>
            <div style="display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px;">
              <div><div class="label">1T</div><input type="number" id="cfgFinalW1" class="input" min="0.1" step="0.1" value="1"></div>
              <div><div class="label">2T</div><input type="number" id="cfgFinalW2" class="input" min="0.1" step="0.1" value="2"></div>
              <div><div class="label">3T</div><input type="number" id="cfgFinalW3" class="input" min="0.1" step="0.1" value="3"></div>
            </div>
            <div id="cfgFinalFormula" class="kpi" style="margin-top:12px; background:#f8fafc;">Fórmula actual: (1T×1 + 2T×2 + 3T×3) / 6</div>
            <div style="display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;">
              <button class="btn primary" id="btnSaveFinalWeights">Guardar pesos</button>
              <button class="btn ghost" id="btnResetFinalWeights" style="border:1px solid var(--line);">Restaurar 1-2-3</button>
            </div>
            <div id="cfgFinalWeightsMsg" class="label" style="text-transform:none; margin-top:10px;"></div>
          </div>
        </div>

        <div class="row" style="margin-top: 18px;">
          <!-- Backup DL -->
          <div class="sidecard" style="margin:0; text-align:center;">
            <div class="label">📥 Descargar copia de seguridá</div>
            <div class="muted" style="font-size:12px; margin-bottom: 12px; line-height: 1.4;">
              Baxa un ficheru cola base de datos completa (.db). Contién notes, estudiantes y criterios. Fai esto a menudu.
            </div>
            <button class="btn" style="border-color:#059669; color:#059669; width:80%;" id="btnBackupDl">Descargar llumera.db</button>
            <div id="backupDlMsg" class="label" style="text-transform:none; margin-top:10px;"></div>
          </div>
          
          <!-- Backup UP -->
          <div class="sidecard" style="margin:0; border-color:#fca5a5; text-align:center; background:#fffcfc;">
            <div class="label" style="color: #dc2626;">⚠️ Restaurar base de datos</div>
            <div class="muted" style="font-size:12px; margin-bottom: 12px; line-height: 1.4;">
              <strong>Cuidiáu:</strong> Esto va amachucar dafechu la base de datos actual y sustituyila pola que xubas agora. Nun se pue desfacer.
            </div>
            <input type="file" id="backupFile" class="input" accept=".db,.sqlite,.sqlite3" style="margin-bottom:10px; padding:6px; width:80%;">
            <button class="btn" id="btnBackupUp" style="background:#fee2e2; border-color:#fca5a5; color:#dc2626; width:80%;">Restaurar dende archivu</button>
            <div id="backupUpMsg" class="label" style="text-transform:none; margin-top:10px;"></div>
          </div>
        </div>
      </section>

    </div>
  </main>
</div>

<!-- ====================================================================== -->
<!-- MODALES -->
<!-- ====================================================================== -->

<!-- Modal Info Esplicativa -->
<div class="modalWrap" id="infoModalWrap" style="z-index: 1002;">
  <div class="modal" style="max-width: 450px;">
    <div class="modalHead">
      <h3 id="infoModalTitle">Información</h3>
      <button class="x" id="infoModalClose" title="Zarrar">✕</button>
    </div>
    <div class="modalBody">
      <p id="infoModalBody" style="font-size: 14px; line-height: 1.6; color: #374151; margin: 0;"></p>
    </div>
    <div class="modalFoot">
      <button class="btn primary" id="infoModalOk">Entendío</button>
    </div>
  </div>
</div>

<!-- Modal Alumnáu Estándar -->
<div class="modalWrap" id="aluModalWrap">
  <div class="modal" style="max-width: 600px;">
    <div class="modalHead">
      <div>
        <h3 id="aluModalTitle">Amestar estudiante</h3>
        <p>Nome obligatoriu. El grupu nun fai falta (dexa un llistáu llimpiu).</p>
      </div>
      <button class="x" id="aluModalClose" title="Zarrar">✕</button>
    </div>
    <div class="modalBody">
      <div class="row" style="margin-bottom:16px; display:flex; align-items:center; gap:16px;">
         <img id="aluFotoPreview" class="avatar lg" src="" style="display:none; border:2px solid var(--primary);">
         <div id="aluFotoPlaceholder" class="avatar lg">👤</div>
         <div>
             <div class="label" style="margin-top:0;">Semeya d'identificación (opcional)</div>
             <input id="aluFotoInput" type="file" accept="image/*" class="input" style="padding:6px; font-size:12px; margin-bottom:4px;">
             <div class="muted" style="font-size:11px;">Recórtase de miente automática a cuadrao (150x150).</div>
             <input type="hidden" id="aluFotoBase64">
         </div>
      </div>

      <div class="row">
        <div>
          <div class="label">Nivel</div>
          <select id="aluNivel">
            <option value="">—</option>
            <option>1ESO</option><option>2ESO</option><option>3ESO</option><option>4ESO</option>
            <option>1BACH</option><option>2BACH</option>
          </select>
        </div>
        <div>
          <div class="label">Materia</div>
          <select id="aluMateria">
            <option value="LAL">LAL</option>
            <option value="LALI">LAI</option>
            <option value="LALII">LALII</option>
          </select>
        </div>
      </div>
      <div class="row" style="margin-top:10px;">
        <div>
          <div class="label">Nome *</div>
          <input id="aluAlias" class="input" placeholder="Nome (obligatoriu)">
        </div>
        <div>
          <div class="label">Apellíos (opcional)</div>
          <input id="aluNombre" class="input" placeholder="Apellíos (si procede)">
        </div>
      </div>
      <div class="label" style="margin-top:10px;">Grupu (opcional)</div>
      <input id="aluGrupo" class="input" placeholder="p. ex. 3ESO_D">
      <div class="label" style="margin-top:10px;">Observaciones (opcional)</div>
      <textarea id="aluObs" class="input" placeholder="Notes internes (opcional)"></textarea>
      
      <select id="aluActivo" style="display:none;"><option value="1">1</option></select>
      <div id="aluMsg" class="label" style="text-transform:none; margin-top:10px;"></div>
    </div>
    <div class="modalFoot">
      <button class="btn" id="aluCancel">Cancelar</button>
      <button class="btn primary" id="aluCreate">Guardar estudiante</button>
    </div>
  </div>
</div>

<!-- Modal Instrumentos -->
<div class="modalWrap" id="instModalWrap">
  <div class="modal" style="max-width: 500px;">
    <div class="modalHead">
      <div>
        <h3 id="instModalTitle">Añadir instrumentu</h3>
        <p>Define una ferramienta pa usar depués nes evidencies.</p>
      </div>
      <button class="x" id="instModalClose" title="Zarrar">✕</button>
    </div>
    <div class="modalBody">
      <div class="row">
        <div>
          <div class="label">Nome *</div>
          <input id="instNombre" class="input" placeholder="Ex: Rúbrica de llectura">
        </div>
        <div>
          <div class="label">Tipu</div>
          <select id="instTipo" class="input">
            <option value="rubrica">Rúbrica</option>
            <option value="escala">Escala d'observación</option>
            <option value="llista">Llista de control</option>
            <option value="diana">Diana d'evaluación</option>
            <option value="prueba">Prueba oxetiva</option>
            <option value="portfolio">Portfolio</option>
            <option value="otru">Otru</option>
          </select>
        </div>
      </div>
      <div class="label" style="margin-top:10px;">Descripción (opcional)</div>
      <textarea id="instDesc" class="input" placeholder="Detalles de la ferramienta..."></textarea>
      
      <div id="instModalMsg" class="label" style="text-transform:none; margin-top:10px;"></div>
    </div>
    <div class="modalFoot">
      <button class="btn" id="instCancel">Cancelar</button>
      <button class="btn primary" id="instSave">Guardar</button>
    </div>
  </div>
</div>

<!-- Modal Edición de Criteriu -->
<div class="modalWrap" id="critModalWrap">
  <div class="modal" style="max-width: 500px;">
    <div class="modalHead">
      <div>
        <h3 id="critModalTitle">Editar criteriu</h3>
        <p>Camuda'l pesu o la descripción. Les notes recalcularánse de miente automática.</p>
      </div>
      <button class="x" id="critModalClose" title="Zarrar">✕</button>
    </div>
    <div class="modalBody">
      <div class="row">
        <div>
          <div class="label">Códigu *</div>
          <input id="critEditCod" class="input" placeholder="Ex: 3.1">
        </div>
        <div>
          <div class="label">Pesu (%) *</div>
          <input id="critEditPesu" type="number" step="0.1" class="input" placeholder="Ex: 10">
        </div>
      </div>
      <div class="label" style="margin-top:10px;">Descripción *</div>
      <textarea id="critEditDesc" class="input" placeholder="Descripción del criteriu..."></textarea>
      <div id="critModalMsg" class="label" style="text-transform:none; margin-top:10px;"></div>
    </div>
    <div class="modalFoot">
      <button class="btn" id="critCancel">Cancelar</button>
      <button class="btn primary" id="critSave">Guardar cambeos</button>
    </div>
  </div>
</div>

<!-- Modal Nueva Evidencia -->
<div class="modalWrap" id="evModalWrap">
  <div class="modal">
    <div class="modalHead">
      <div>
        <h3>Nueva evidencia</h3>
        <p>Seleiciona una plantiya (opcional) p'autocompletar campos comunes.</p>
      </div>
      <button class="x" id="evModalClose" title="Zarrar">✕</button>
    </div>
    <div class="modalBody">
      <div class="row">
        <div>
          <div class="label">Plantiya (opcional)</div>
          <select id="evTpl"></select>
        </div>
        <div>
          <div class="label">Fecha *</div>
          <input id="evFecha" class="input" type="date">
        </div>
      </div>
      <div class="row" style="margin-top:10px;">
        <div>
          <div class="label">Títulu *</div>
          <input id="evTitulo" class="input" placeholder="p. ex. Debate formal" style="font-weight:600; color:#059669;">
        </div>
        <div>
          <div class="label">Tipu</div>
          <select id="evTipo">
            <option value="">—</option>
            <option value="oral">Oral</option><option value="escrita">Escrita</option>
            <option value="multimodal">Multimodal</option><option value="prueba">Prueba</option>
            <option value="proyecto">Proyeutu</option><option value="observacion">Observación</option>
          </select>
        </div>
      </div>
      <div class="row" style="margin-top:10px;">
        <div>
          <div class="label">Instrumentu (opcional)</div>
          <select id="evInstr"></select>
        </div>
        <div>
          <div class="label">Notes (opcional)</div>
          <input id="evNotas" class="input" placeholder="1 llinia">
        </div>
      </div>

      <div class="label" style="margin-top:10px;">Situación d'aprendimientu (SdA)</div>
      <input id="evSda" class="input" list="sdaList" placeholder="p. ex. SdA 1: El llibru de la selva">
      <datalist id="sdaList"></datalist>

      <div class="label" style="margin-top:16px;">Criterios asociaos (calca p'activar)</div>
      <div id="evCriteriosBox" class="chips" style="background:#fafafa;"></div>
      <div id="evModalMsg" class="label" style="text-transform:none; margin-top:8px;"></div>
    </div>
    <div class="modalFoot">
      <button class="btn" id="evCancel">Cancelar</button>
      <button class="btn primary" id="evSave" style="padding:10px 24px;">Guardar evidencia</button>
    </div>
  </div>
</div>

<!-- Modal Clonar Evidencies -->
<div class="modalWrap" id="cloneEvWrap">
  <div class="modal" style="max-width:450px;">
    <div class="modalHead">
      <div>
        <h3>Clonar planificación</h3>
        <p>Apurre toles evidencies d'otru trimestre escontra'l trimestre actual (llimpies de notes).</p>
      </div>
      <button class="x" id="cloneEvClose" title="Zarrar">✕</button>
    </div>
    <div class="modalBody">
      <div class="label">Trimestre d'orixe (colos datos a copiar)</div>
      <select id="cloneEvOrigen" class="input">
        <option value="">— Escueye un trimestre —</option>
      </select>
      <div class="muted" style="font-size:12px; margin-top:10px; line-height:1.4;">
        <em>Nota:</em> Van caltenese los títulos, ferramientes y criterios. Deberás afaer les feches llueu.
      </div>
      <div id="cloneEvMsg" class="label" style="text-transform:none; margin-top:14px;"></div>
    </div>
    <div class="modalFoot">
      <button class="btn" id="cloneEvCancel">Cancelar</button>
      <button class="btn primary" id="cloneEvSave">Clonar evidencies</button>
    </div>
  </div>
</div>

<!-- Modal Detalle Nota (Trazabilidá llegal) -->
<div class="modalWrap" id="detailWrap" style="z-index: 1001;">
  <div class="modal">
    <div class="modalHead" style="align-items: center;">
      <div style="display:flex; align-items:center; gap:16px;">
        <div id="detailAvatarContainer"></div>
        <div>
          <h3 style="color:#059669; margin:0;">Detalle d'evaluación LOMLOE</h3>
          <p id="detailSub" class="muted" style="margin:4px 0 0;">Trazabilidá llegal de la nota.</p>
        </div>
      </div>
      <div style="display:flex; gap:10px; align-items:center;">
        <button class="btn" id="btnPrintInforme" style="border-color:#059669; color:#059669; font-size:13px; padding:6px 12px; font-weight:600;">🖨️ Imprentar</button>
        <button class="x" id="detailClose" title="Zarrar">✕</button>
      </div>
    </div>
    <div class="modalBody" style="padding:0;">
      <div style="overflow:auto; max-height: 60vh;">
        <table style="border:none; border-radius:0;">
          <thead style="background:#fafafa;">
            <tr><th style="padding-left:24px;">Criteriu</th><th>Pesu</th><th>Media (1-4)</th><th>Nota (1-10)</th><th style="padding-right:24px;">Apurra</th></tr>
          </thead>
          <tbody id="detailTbody"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Modal Resultaos per evidencia -->
<div class="modalWrap" id="evResultsWrap" style="z-index: 1001;">
  <div class="modal" style="max-width:1100px;">
    <div class="modalHead">
      <div>
        <h3 style="margin:0; color:#0369a1;">Resultaos de la evidencia</h3>
        <p id="evResultsSub" class="muted" style="margin:4px 0 0;">Cargando cálculu…</p>
      </div>
      <button class="x" id="evResultsClose" title="Zarrar">✕</button>
    </div>
    <div class="modalBody" style="display:flex; flex-direction:column; gap:14px;">
      <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px;">
        <div class="kpi" style="background:#eff6ff; border-color:#bfdbfe;">
          <div style="font-weight:700; color:#0369a1;">Nota de la evidencia</div>
          <div class="muted" style="font-size:12px; margin-top:4px;">Conversión a 0–10 usando namás los criterios d'esta evidencia y renormalizando los pesos oficiales ente ellos.</div>
        </div>
        <div class="kpi" style="background:#ecfdf5; border-color:#a7f3d0;">
          <div style="font-weight:700; color:#047857;">Contribución a la oficial</div>
          <div class="muted" style="font-size:12px; margin-top:4px;">Parte concreta qu'esta evidencia suma a la nota oficial del trimestre según los pesos reales.</div>
        </div>
        <div class="kpi" style="background:#fafafa;">
          <div style="font-weight:700; color:#374151;">Acumulada oficial</div>
          <div class="muted" style="font-size:12px; margin-top:4px;">Nota oficial actual del trimestre completu nel mesmu contestu, pa poder responder a familias y alumnáu ensin confundir conceptos.</div>
        </div>
      </div>
      <div id="evResultsMeta" class="muted" style="font-size:12px; line-height:1.45;"></div>
      <div id="evResultsMsg" class="label" style="text-transform:none; min-height:20px;"></div>
      <div style="overflow:auto; border:1px solid var(--line); border-radius:14px; background:#fff;">
        <table style="border:none;">
          <thead style="background:#fafafa;">
            <tr>
              <th style="padding-left:24px;">Estudiante</th>
              <th style="text-align:center;">Nota evidencia</th>
              <th style="text-align:center;">Contribución a la oficial</th>
              <th style="text-align:center;">Acumulada oficial</th>
              <th style="text-align:center;">Cobertura</th>
              <th style="text-align:right; padding-right:24px;">Aición</th>
            </tr>
          </thead>
          <tbody id="evResultsTbody"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>


<!-- Modal Edición inversa de nota per evidencia -->
<div class="modalWrap" id="evNoteEditWrap" style="z-index: 1002;">
  <div class="modal" style="max-width:760px;">
    <div class="modalHead">
      <div>
        <h3 style="margin:0; color:#0369a1;">Editar nota de la evidencia</h3>
        <p id="evNoteEditSub" class="muted" style="margin:4px 0 0;">Introduz una nota 0–10 y reparte esa calificación escontra atrás sobre los criterios d'esta evidencia.</p>
      </div>
      <button class="x" id="evNoteEditClose" title="Zarrar">✕</button>
    </div>
    <div class="modalBody" style="display:flex; flex-direction:column; gap:14px;">
      <div class="kpi" id="evNoteEditInfo" style="background:#fafafa;">—</div>
      <div style="display:grid; grid-template-columns:minmax(190px, 240px) 1fr; gap:14px; align-items:start;">
        <div>
          <div class="label">Nota de la evidencia (0–10)</div>
          <input id="evNoteEditInput" class="input" type="number" min="0" max="10" step="0.01" placeholder="Ex.: 7.25" />
          <div class="muted" style="font-size:12px; margin-top:8px; line-height:1.4;">El sistema axusta la nota real aplicable a la combinación más cercana representable nel sistema 1–4.</div>
        </div>
        <div>
          <div class="label">Repartu escontra atrás</div>
          <div style="display:flex; gap:10px; flex-wrap:wrap; margin-top:2px;">
            <label style="display:inline-flex; align-items:center; gap:8px; border:1px solid #dbeafe; background:#eff6ff; color:#0f172a; border-radius:999px; padding:8px 12px; font-size:13px; font-weight:600;">
              <input type="radio" name="evNoteEditMode" value="equal" checked />
              Repartu equilibráu
            </label>
            <label style="display:inline-flex; align-items:center; gap:8px; border:1px solid #e5e7eb; background:#fafafa; color:#111827; border-radius:999px; padding:8px 12px; font-size:13px; font-weight:600;">
              <input type="radio" name="evNoteEditMode" value="random" />
              Repartu aleatoriu
            </label>
          </div>
          <div class="muted" style="font-size:12px; margin-top:8px; line-height:1.4;">L'opción equilibrada busca niveles lo más pareyos posible; l'aleatoria escueye una combinación válida cercana ensin forzar homoxeneidá.</div>
        </div>
      </div>
      <div style="display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;">
        <div id="evNoteEditMsg" class="label" style="text-transform:none; min-height:20px;"></div>
        <button class="btn ghost" id="evNoteEditRecalc" style="border-color:#cbd5e1; color:#334155; background:#f8fafc; font-weight:700;">Recalcular criterios</button>
      </div>
      <div class="kpi" style="background:#fff; border-color:#e5e7eb;">
        <div style="font-weight:700; color:#111827;">Vista previa del repartu</div>
        <div id="evNoteEditPreview" style="margin-top:10px;">Introduz una nota, escueyi'l repartu y pulsa <b>Recalcular criterios</b>.</div>
      </div>
    </div>
    <div class="modalFoot">
      <button class="btn" id="evNoteEditCancel">Cancelar</button>
      <button class="btn primary" id="evNoteEditSave">Aplicar nota</button>
    </div>
  </div>
</div>

<!-- Modal Evaluar Estudiante -->
<div class="modalWrap" id="aluEvalWrap">
  <div class="modal" style="max-width:920px;">
    <div class="modalHead">
      <div>
        <h3 style="margin:0 0 6px 0;">Evaluar estudiante</h3>
        <p id="aluEvalSub" class="muted" style="margin:0;">Escueye una evidencia del so contestu actual pa valorar solo esti estudiante.</p>
      </div>
      <button class="x" id="aluEvalClose" title="Zarrar">✕</button>
    </div>
    <div class="modalBody" style="display:flex; flex-direction:column; gap:14px;">
      <div class="kpi" id="aluEvalInfo" style="background:#fafafa;">—</div>
      <div id="aluEvalMsg" class="label" style="text-transform:none; min-height:20px;"></div>
      <div style="overflow:auto; border:1px solid var(--line); border-radius:14px; background:#fff;">
        <table style="border:none;">
          <thead style="background:#fafafa;">
            <tr>
              <th style="padding-left:24px;">Evidencia</th>
              <th>Fecha</th>
              <th>SdA</th>
              <th style="text-align:center;">Criterios</th>
              <th style="text-align:right; padding-right:24px;">Aición</th>
            </tr>
          </thead>
          <tbody id="aluEvalTbody"></tbody>
        </table>
      </div>
    </div>
    <div class="modalFoot">
      <button class="btn" id="aluEvalCancel">Zarrar</button>
    </div>
  </div>
</div>

<!-- Modal Valorar Evidencia -->
<div class="modalWrap" id="valWrap">
  <div class="modal" style="width: fit-content; max-width: 96vw; min-width: min(1200px, 95vw);">
    <div class="modalHead">
      <div>
        <h3 style="display:inline-block; margin-right:12px;">Valorar evidencia</h3>
        <p id="valSub" style="display:inline-block;">Marca niveles 1–4 por estudiante y criteriu. Al reabrir, se precarga lo guardao.</p>
      </div>
      <button class="x" id="valClose" title="Zarrar">✕</button>
    </div>
    <div class="modalBody" style="padding:0; display:flex; flex-direction:column; overflow:hidden; flex:1; min-height:0;">
      <div class="kpi" id="valInfo" style="padding:14px 24px; background:#fafafa; border-bottom:1px solid var(--line); flex-shrink:0;">—</div>
      <div id="valScrollWrap" style="overflow:auto; width:100%; flex:1; min-height:0;">
        <table style="border:none; min-width:max-content; width:100%;">
          <thead id="valThead" style="position:sticky; top:0; z-index:10; background:#fafafa; box-shadow:0 1px 0 var(--line);"></thead>
          <tbody id="valTbody"></tbody>
        </table>
      </div>
      <div id="valMsg" class="label" style="text-transform:none; margin:10px 24px; flex-shrink:0; min-height:20px;"></div>
    </div>
    <div class="modalFoot">
      <button class="btn" id="valCancel">Cancelar</button>
      <button class="btn primary" id="valSave" style="padding:10px 24px;">Guardar valoraciones</button>
    </div>
  </div>
</div>

<!-- ====================================================================== -->
<!-- CONTENEDOR D'INFORME P'IMPRENTACIÓN (Cantu Ocultu)                     -->
<!-- ====================================================================== -->
<div id="informePrint" style="display:none; font-family:var(--sans); color:#111827;">
  <div style="border-bottom:2px solid #059669; padding-bottom:12px; margin-bottom:24px; display:flex; justify-content:space-between; align-items:flex-end;">
    <div>
      <h1 style="margin:0; font-size:22pt; color:#059669; font-weight:800; letter-spacing:-0.5px;">Informe d'evaluación LOMLOE</h1>
      <div style="font-size:12pt; color:#6b7280; margin-top:6px;">Llumera — Xestión Competencial (Asturies)</div>
    </div>
    <div style="text-align:right; font-size:11pt; color:#4b5563; line-height:1.4;" id="printMeta">
      <!-- Enllenáu per JS -->
    </div>
  </div>

  <div class="bg-info" style="margin-bottom:24px; padding:20px; border:1px solid #e5e7eb; border-radius:12px;">
    <div style="display:flex; gap:20px; align-items:center;">
      <div id="printAvatarContainer" style="display:none; flex-shrink:0;"></div>
      <div style="flex:1;">
        <h2 style="margin:0 0 10px 0; font-size:18pt; color:#111827;" id="printStudentName">Nome del estudiante</h2>
        <div style="display:flex; justify-content:space-between; align-items:baseline; font-size:12pt; border-top:1px solid #e5e7eb; padding-top:14px;">
          <div id="printGroup" style="color:#6b7280; font-weight:600;">Grupu: -</div>
          <div>Nota proyeutada: <strong id="printNotaProy" style="font-size:16pt; color:#0ea5e9;">-</strong></div>
          <div>Nota acumulada oficial: <strong id="printNotaAcum" style="font-size:16pt; color:#111827;">-</strong></div>
        </div>
      </div>
    </div>
  </div>

  <div id="printSdaWarning" style="display:none; margin-bottom:24px; padding:12px 20px; background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px; color:#1e40af; font-size:11pt; line-height:1.4;">
    <!-- Enllenáu per JS si hai SdA activa -->
  </div>

  <table style="width:100%; border-collapse:collapse; margin-bottom:30px;">
    <thead>
      <tr>
        <th style="border-bottom:2px solid #111827; padding:10px; text-align:left; font-size:11pt; color:#374151;">Criteriu d'evaluación</th>
        <th style="border-bottom:2px solid #111827; padding:10px; text-align:center; font-size:11pt; color:#374151;">Pesu</th>
        <th style="border-bottom:2px solid #111827; padding:10px; text-align:center; font-size:11pt; color:#374151;">Media (1-4)</th>
        <th style="border-bottom:2px solid #111827; padding:10px; text-align:center; font-size:11pt; color:#374151;">Nota / 10</th>
      </tr>
    </thead>
    <tbody id="printTbody">
      <!-- Enllenáu per JS -->
    </tbody>
  </table>

  <div style="margin-top:40px; font-size:10pt; color:#6b7280; border-top:1px solid #e5e7eb; padding-top:14px; line-height:1.6;">
    <strong style="color:#374151;">Lleenda de calificación (escala criterial Llumera):</strong><br>
    Nivel 1: Aniciu (2.5/10) &nbsp;|&nbsp; Nivel 2: En procesu (5.0/10) &nbsp;|&nbsp; Nivel 3: Afayadizu (7.5/10) &nbsp;|&nbsp; Nivel 4: Avanzáu (10/10)<br><br>
    <em>* La <strong>Nota proyeutada</strong> amuesa'l rendimientu actual del alumnáu respeutu a lo impartío hasta la data. La <strong>Nota acumulada</strong> reflexa'l porcentaxe competencial superáu respeutu al total de la programación pal trimestre enteru. Esti documentu xeneróse de miente automática pa la xustificación normativa del progresu del estudiante.</em>
  </div>
</div>

<!-- ====================================================================== -->
<!-- INFORME DE TRAZABILIDÁ DEL CONTESTU ACTUAL (OCULTU PA IMPRIMIR)        -->
<!-- ====================================================================== -->
<div id="informeContextoPrint" style="display:none; font-family:var(--sans); color:#111827;">
  <div style="border-bottom:2px solid #0ea5e9; padding-bottom:10px; margin-bottom:16px; display:flex; justify-content:space-between; align-items:flex-end; gap:16px;">
    <div>
      <h1 style="margin:0; font-size:21pt; color:#0ea5e9; font-weight:800; letter-spacing:-0.4px;">Informe de trazabilidá evaluativa del contestu didácticu</h1>
      <div style="font-size:11pt; color:#6b7280; margin-top:4px;">Llumera — documentu de revisión docente, coordinación y xustificación interna del procesu d’evaluación</div>
    </div>
    <div class="ctx-meta" style="text-align:right; font-size:10.5pt; color:#4b5563; line-height:1.35;" id="printCtxMeta"></div>
  </div>

  <div class="bg-info ctx-sec" style="margin-bottom:16px; padding:12px 14px; border:1px solid #e5e7eb; border-radius:10px;">
    <div id="printCtxResumen" class="ctx-tight" style="display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px;"></div>
  </div>

  <div class="ctx-sec" style="margin-bottom:16px;">
    <h2 style="margin:0 0 6px 0; font-size:15pt; color:#111827;">1. Finalidá del informe</h2>
    <p id="printCtxIntro" style="margin:0; color:#374151; line-height:1.4;"></p>
  </div>

  <div class="ctx-sec" style="margin-bottom:16px;">
    <h2 style="margin:0 0 6px 0; font-size:15pt; color:#111827;">2. Evidencies recoyíes nel contestu</h2>
    <p id="printCtxEvidIntro" style="margin:0 0 8px 0; color:#374151; line-height:1.4;"></p>
    <table style="width:100%; border-collapse:collapse;">
      <thead>
        <tr>
          <th style="padding:8px; text-align:left;">Fecha</th>
          <th style="padding:8px; text-align:left;">Títulu / SdA</th>
          <th style="padding:8px; text-align:left;">Tipu / instrumentu</th>
          <th style="padding:8px; text-align:left;">Criterios</th>
          <th style="padding:8px; text-align:left;">Observaciones</th>
        </tr>
      </thead>
      <tbody id="printCtxEvidTbody"></tbody>
    </table>
  </div>

  <div class="ctx-sec" style="margin-bottom:16px;">
    <h2 style="margin:0 0 6px 0; font-size:15pt; color:#111827;">3. Instrumentos emplegaos</h2>
    <p id="printCtxInstr" style="margin:0; color:#374151; line-height:1.4;"></p>
  </div>

  <div class="ctx-sec" style="margin-bottom:16px;">
    <h2 style="margin:0 0 6px 0; font-size:15pt; color:#111827;">4. Criterios d’evaluación implicaos</h2>
    <p id="printCtxCritIntro" style="margin:0 0 8px 0; color:#374151; line-height:1.4;"></p>
    <table style="width:100%; border-collapse:collapse;">
      <thead>
        <tr>
          <th style="padding:8px; text-align:left;">Criteriu</th>
          <th style="padding:8px; text-align:center;">Pesu</th>
          <th style="padding:8px; text-align:center;">Nº evid.</th>
          <th style="padding:8px; text-align:left;">Evidencies venceyaes</th>
        </tr>
      </thead>
      <tbody id="printCtxCritTbody"></tbody>
    </table>
  </div>

  <div class="ctx-sec" style="margin-bottom:16px;">
    <h2 style="margin:0 0 6px 0; font-size:15pt; color:#111827;">5. Resultancies globales del alumnáu</h2>
    <p id="printCtxResultsIntro" style="margin:0 0 8px 0; color:#374151; line-height:1.4;"></p>
    <table style="width:100%; border-collapse:collapse;">
      <thead>
        <tr>
          <th style="padding:8px; text-align:left;">Estudiante</th>
          <th style="padding:8px; text-align:left;">Grupu</th>
          <th style="padding:8px; text-align:center;">Nota proyeutada</th>
          <th style="padding:8px; text-align:center;">Nota acumulada</th>
          <th style="padding:8px; text-align:center;">Pesu cubiertu nel cálculu</th>
        </tr>
      </thead>
      <tbody id="printCtxNotesTbody"></tbody>
    </table>
  </div>

  <div class="ctx-sec" style="margin-bottom:8px;">
    <h2 style="margin:0 0 6px 0; font-size:15pt; color:#111827;">6. Valoración pedagóxica final</h2>
    <p id="printCtxValPed" style="margin:0; color:#374151; line-height:1.4;"></p>
  </div>

  <div style="margin-top:18px; font-size:9.4pt; color:#6b7280; border-top:1px solid #e5e7eb; padding-top:10px; line-height:1.38;">
    <em>Esti informe xeneróse a partir del contestu activu de Llumera. Si hai una SdA escoyida, el conteníu queda filtráu a esi ámbitu y nun representa necesariamente la totalidá del trimestre.</em>
  </div>
</div>

<script>
  // ===== Diagnósticu UI (failsafe) =====
  function showFatal(msg){
    try{
      const b = document.getElementById('fatalBanner');
      const m = document.getElementById('fatalMsg');
      if(b && m){ m.textContent = String(msg||'Error'); b.style.display = 'block'; }
      const ui = document.getElementById('uiDiag');
      if(ui) ui.textContent = 'API/JS KO';
    }catch(_){}
  }
  window.addEventListener('error', (ev)=>{ showFatal((ev && ev.message) ? ev.message : 'Error JS'); });
  window.addEventListener('unhandledrejection', (ev)=>{
    const r = ev && ev.reason; showFatal('Promise: ' + (r && (r.message||r) ? (r.message||r) : 'refugu'));
  });

window.addEventListener('DOMContentLoaded', function(){
  const $ = (id)=>document.getElementById(id);
  
  const listen = (id, ev, cb) => {
    const el = document.getElementById(id);
    if(el) el.addEventListener(ev, cb);
    else console.warn(`Avisu: L'elementu '${id}' nun s'atopó pal eventu '${ev}'.`);
  };

  const diag = $('uiDiag');
  if(diag) diag.innerHTML = '<span class="ok">• JS ok</span>';

  const API_BASE = '/llumera/api';
  const FINAL_WEIGHTS_PREF_KEY = 'config/notas_finales_pesos';
  const FINAL_WEIGHTS_DEFAULT = {t1:1, t2:2, t3:3};
  let finalWeightsCache = {...FINAL_WEIGHTS_DEFAULT};
  let finalCacheData = [];
  let qrPollInterval = null;

  // --- API FETCH GLOBAL CON COOKIES ---
  async function api(path, opts={}){
    const headers = Object.assign({'Content-Type':'application/json'}, (opts.headers||{}));
    const res = await fetch(API_BASE + path, Object.assign({credentials: 'same-origin'}, opts, {headers}));
    
    let data = null;
    const ct = res.headers.get('content-type') || '';
    if(ct.includes('application/json')){ data = await res.json().catch(()=>null); }
    else{ data = await res.text().catch(()=>null); }
    
    if(res.status === 401) {
        showLoginOverlay();
        throw new Error('Sesión zarrada o caducada. Identifícate de nuevu.');
    }
    
    if(!res.ok){
      const msg = (data && (data.erro || data.error)) ? (data.erro || data.error) : (typeof data === 'string' ? data : ('HTTP ' + res.status));
      const err = new Error(msg); err.status = res.status; err.data = data;
      throw err;
    }
    return data;
  }

  // --- SISTEMA D'IDENTIDÁ (LOGIN Y QR) ---
  function showLoginOverlay() {
      if($('loginOverlay')) $('loginOverlay').style.display = 'flex';
      if($('appContainer')) $('appContainer').style.display = 'none';
      if($('loginPass')) $('loginPass').value = '';
      if($('loginMsg')) $('loginMsg').innerHTML = '';
      if(qrPollInterval) clearInterval(qrPollInterval);
  }

  function hideLoginOverlay() {
      if($('loginOverlay')) $('loginOverlay').style.display = 'none';
      if($('appContainer')) $('appContainer').style.display = 'grid'; 
  }

  async function checkAuthStatus() {
      try {
          const res = await fetch(API_BASE + '/salú', {credentials: 'same-origin'});
          const data = await res.json();
          if (data && data.auth === true) {
              hideLoginOverlay();
              if($('apiKpi')) { $('apiKpi').className = 'pill ok'; $('apiKpi').textContent = 'API OK'; }
              if($('panelSalud')) $('panelSalud').innerHTML = `<span class="ok" style="font-weight:600;">Conexón sigura OK</span>`;
              return true;
          }
      } catch(e) { console.warn('[Llumera] Nun se pudo cargar global_context dende preferencies', e); }
      showLoginOverlay();
      if($('apiKpi')) { $('apiKpi').className = 'pill err'; $('apiKpi').textContent = 'API KO'; }
      if($('panelSalud')) $('panelSalud').innerHTML = '<span class="err">Ensin sesión activa.</span>';
      return false;
  }

  listen('loginBtn', 'click', async () => {
      const p = $('loginPass') ? $('loginPass').value : '';
      if(!p) return;
      if($('loginMsg')) $('loginMsg').innerHTML = '<span class="muted">Comprobando...</span>';
      
      try {
          const res = await fetch(API_BASE + '/login', {
              method: 'POST',
              headers: {'Content-Type': 'application/json'},
              body: JSON.stringify({password: p}),
              credentials: 'same-origin'
          });
          const data = await res.json().catch(()=>null);
          if(res.ok && data && data.ok) {
              window.location.reload();
          } else {
              const errorMsg = data ? (data.erro || data.error || 'Fallu al identificate.') : 'Fallu al identificate.';
              setStatus('loginMsg', 'err', errorMsg);
          }
      } catch(e) {
          if($('loginMsg')) $('loginMsg').innerHTML = `<span class="err">Fallu de conexón col sirvidor.</span>`;
      }
  });

  listen('loginPass', 'keypress', (e) => {
      if(e.key === 'Enter') { document.getElementById('loginBtn').click(); }
  });

  listen('btnQrGen', 'click', async () => {
      if($('qrBox')) $('qrBox').style.display = 'block';
      if($('loginFormBox')) $('loginFormBox').style.display = 'none';
      try {
          const res = await fetch(API_BASE + '/qr/create', {method: 'POST', credentials: 'same-origin'});
          const data = await res.json();
          if(res.ok && data.ok) {
              const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&margin=1&data=${encodeURIComponent(data.url)}`;
              if($('qrImage')) { $('qrImage').src = qrUrl; $('qrImage').style.display = 'inline-block'; }
              if($('qrLinkText')) $('qrLinkText').textContent = data.url;
              startQrPolling(data.rid, data.exp);
          } else {
              const errorMsg = data ? (data.erro || data.error) : 'Desconocíu';
              alert('Error al xenerar QR: ' + errorMsg);
              $('btnQrCancel').click();
          }
      } catch(e) {
          alert('Fallu de conexón al pidir el QR.');
          $('btnQrCancel').click();
      }
  });

  listen('btnQrCancel', 'click', () => {
      if(qrPollInterval) clearInterval(qrPollInterval);
      if($('qrBox')) $('qrBox').style.display = 'none';
      if($('loginFormBox')) $('loginFormBox').style.display = 'block';
  });

  function startQrPolling(rid, exp) {
      if(qrPollInterval) clearInterval(qrPollInterval);
      qrPollInterval = setInterval(async () => {
          if (Date.now()/1000 > exp) {
              clearInterval(qrPollInterval);
              if($('qrBox')) $('qrBox').innerHTML = '<div class="err" style="margin-bottom:16px;">El QR caducó por seguridá. Recarga la páxina p\'aniciar.</div><button class="btn" onclick="window.location.reload()">Refrescar</button>';
              return;
          }
          try {
              const res = await fetch(API_BASE + '/qr/poll', {
                  method: 'POST', headers: {'Content-Type': 'application/json'},
                  body: JSON.stringify({rid: rid}), credentials: 'same-origin'
              });
              const data = await res.json();
              if (res.ok && data.ok && data.status === 'success') {
                  clearInterval(qrPollInterval);
                  window.location.reload();
              } else if (!res.ok) {
                  clearInterval(qrPollInterval);
                  const errorMsg = data ? (data.erro || data.error) : 'Error';
                  alert("Fallu de validación QR: " + errorMsg);
                  $('btnQrCancel').click();
              }
          } catch(e) {}
      }, 2000);
  }

  // --- REORGANIZACIÓN DE TABS ---
  const tabs = {
    panel: $('tab-panel'), alumnos: $('tab-alumnos'), criterios: $('tab-criterios'),
    instrumentos: $('tab-instrumentos'), evidencias: $('tab-evidencias'),
    calificaciones: $('tab-calificaciones'), final: $('tab-final'), config: $('tab-config')
  };
  
  function setTab(name){
    for(const k of Object.keys(tabs)){ if(tabs[k]) tabs[k].classList.toggle('active', k===name); }
    const navEl = $('nav');
    if(navEl) { for(const b of navEl.querySelectorAll('button[data-tab]')){ b.classList.toggle('active', b.dataset.tab===name); } }
    
    const titleMap = {
      panel: ['Panel del trimestre', 'Rendimientu de l\'aula y auditoría docente.'],
      alumnos: ['Alumnáu', 'Llistáu y alta rápida de la to clase.'],
      criterios: ['Criterios LOMLOE', 'El to currículu activu de trabayu.'],
      instrumentos: ['Instrumentos', 'Catálogu de ferramientes d\'evaluación.'],
      evidencias: ['Notes de campu / evidencies', 'Llista d\'actividaes planificaes.'],
      calificaciones: ['Calificaciones oficiales', 'Tabla de notes acumulada pa inspeición.'],
      final: ['Calificación final anual', 'Combinación 1-2-3 separada de les evaluaciones trimestrales.'],
      config: ['Configuración y seguridá', 'Axustes y copies de la base de datos llocal.']
    };
    
    const t = titleMap[name] || [name,''];
    if($('pageTitle')) $('pageTitle').textContent = t[0];
    if($('pageSub')) $('pageSub').textContent = t[1];
    
    const needsContext = ['panel', 'evidencias', 'calificaciones', 'final'].includes(name);
    const bar = $('evalContextBar');
    if(bar) bar.style.display = needsContext ? 'block' : 'none';
    
    if(name==='criterios') loadCriterios();
    if(name==='alumnos') loadAlumnos();
    if(name==='instrumentos') loadAdminInstrumentos();
    if(name==='config') { if($('cfgDiag')) $('cfgDiag').textContent = 'URL base interna: ' + API_BASE; loadFinalWeightsForm(); }
    
    const tri = $('evTri');
    if(tri){
      const isFinal = (name === 'final');
      tri.disabled = isFinal;
      tri.style.opacity = isFinal ? '0.55' : '1';
      tri.title = isFinal ? 'Nesta vista úsense siempres 1T, 2T y 3T.' : '';
    }

    if(name==='panel' || name==='evidencias') refreshEval();
    if(name==='calificaciones') loadAndShowNotesTab();
    if(name==='final') loadAndShowFinalTab();
  }

  listen('nav', 'click', (e)=>{
    const btn = e.target.closest('button[data-tab]');
    if(!btn) return;
    setTab(btn.dataset.tab);
  });

  listen('dashVerNotes', 'click', (e) => { e.preventDefault(); setTab('calificaciones'); });
  listen('dashStudents', 'click', (e) => {
      const card = e.target.closest('.scard');
      if(card) {
          const aid = card.dataset.aid;
          const name = card.dataset.name;
          if(aid && name) openDetail(aid, name, ctx().grupo);
      }
  });

  // --- INFO TOOLTIPS ---
  function openInfoModal(type) {
    const w = $('infoModalWrap');
    const title = $('infoModalTitle');
    const body = $('infoModalBody');
    if(!w || !title || !body) return;
    
    if(type === 'media') {
      title.textContent = "Notes: proyeutada vs acumulada";
      body.innerHTML = "<strong style='color:#0ea5e9'>Nota proyeutada (lo yá evaluao):</strong> Ye la calificación real del estudiante no que lleváis de cursu. Re-escala los pesos al 100% pa dar una nota xusta pal día a día.<br><br><strong style='color:#6b7280'>Nota acumulada (llegal LOMLOE):</strong> Ye'l 'cubu' vacíu que se va enllenando adulces en base al 100% de la to programación. A principiu de trimestre será mui baxa.";
    } else if(type === 'estudiantes') {
      title.textContent = "Estudiantes con nota";
      body.innerHTML = "Amuésate'l llistáu n'esbozu rápidu.<br><br>• <strong>Númberu grande</strong>: <em>Nota proyeutada</em>.<br>• <strong>Númberu chicu</strong>: <em>Nota acumulada</em>.<br><br>Barra de progresu:<br>• <span style='color:#ef4444; font-weight:bold'>Roxu</span>: < 5<br>• <span style='color:#f59e0b; font-weight:bold'>Naranxa</span>: 5 - 6.99<br>• <span style='color:#0ea5e9; font-weight:bold'>Azul</span>: 7 - 8.99<br>• <span style='color:#10b981; font-weight:bold'>Verde</span>: >= 9";
    } else if(type === 'semaforo') {
      title.textContent = "Auditoría de criterios";
      body.innerHTML = "Cuántes evidencies planificasti pa cada criteriu nesti trimestre.<br><br>• <span style='color:#dc2626; font-weight:bold'>Roxu (0)</span>: Criteriu ensin evaluar. ¡Alerta!<br>• <span style='color:#ea580c; font-weight:bold'>Naranxa (1)</span>: Evaluáu namás nuna evidencia. Riesgu si l'alumnu falta.<br>• <span style='color:#059669; font-weight:bold'>Verde (2+)</span>: Cobertoria afayadiza.";
    } else if(type === 'grupos') {
      title.textContent = "Comparanza de grupos (rendimientu)";
      body.innerHTML = "Equí puedes comparar d'un güeyu'l rendimientu de les tos distintes clases pal mesmu nivel y materia.<br><br>La barra de colores amuesa la proporción d'estudiantes en cada nivel (Roxu: Suspensos, Verde: Sobresalientes). Ensin necesidá de lleer notes individuales, puedes detectar qué grupu precisa más refuerzu o ta meyor preparáu.";
    }
    w.classList.add('show');
  }
  
  listen('infoModalClose', 'click', () => { if($('infoModalWrap')) $('infoModalWrap').classList.remove('show'); });
  listen('infoModalOk', 'click', () => { if($('infoModalWrap')) $('infoModalWrap').classList.remove('show'); });
  document.querySelectorAll('.info-btn').forEach(btn => {
    btn.addEventListener('click', (e) => { e.stopPropagation(); openInfoModal(btn.dataset.info); });
  });

  // --- CONFIGURACIÓN: CAMUDAR CONTRASEÑA ---
  listen('btnChangePass', 'click', async () => {
      const old = $('cfgPassOld') ? $('cfgPassOld').value : '';
      const neu = $('cfgPassNew') ? $('cfgPassNew').value : '';
      const conf = $('cfgPassConfirm') ? $('cfgPassConfirm').value : '';
      
      if(!old || !neu) { if($('cfgPassMsg')) $('cfgPassMsg').innerHTML = '<span class="err">Llenna la to clave actual y la nueva.</span>'; return; }
      if(neu !== conf) { if($('cfgPassMsg')) $('cfgPassMsg').innerHTML = '<span class="err">Les contraseñes nueves nun casen.</span>'; return; }
      
      if($('cfgPassMsg')) $('cfgPassMsg').innerHTML = '<span class="muted">Camudando nel sirvidor...</span>';
      try {
          const res = await fetch(API_BASE + '/config/password', {
              method: 'POST', headers: {'Content-Type': 'application/json'},
              body: JSON.stringify({vieya: old, nueva: neu}), credentials: 'same-origin'
          });
          const data = await res.json().catch(()=>null);
          if(res.ok && data && data.ok) {
              $('cfgPassOld').value = ''; $('cfgPassNew').value = ''; $('cfgPassConfirm').value = '';
              if($('cfgPassMsg')) $('cfgPassMsg').innerHTML = '<span class="ok">¡Contraseña anovada con ésitu!</span>';
          } else {
              const errorMsg = data ? (data.erro || data.error || 'Fallu al camudar la clave.') : 'Fallu al camudar la clave.';
              setStatus('cfgPassMsg', 'err', errorMsg);
          }
      } catch(e) {
          if($('cfgPassMsg')) $('cfgPassMsg').innerHTML = '<span class="err">Error de rede. Nun se pudo coneutar.</span>';
      }
  });


  function nivelBaseCanonicu(nivel){
    const n = String(nivel || '').trim();
    if(n === '3ESO PDC') return '3ESO';
    if(n === '4ESO PDC') return '4ESO';
    return n;
  }

  function autoMateriaPorNivel(nivel){
    const n = nivelBaseCanonicu(nivel);
    if(!n) return '';
    if(n.endsWith('ESO')) return 'LAL';
    if(n === '1BACH') return 'LALI';
    if(n === '2BACH') return 'LALII';
    return '';
  }

  function escAttr(v){
    return String(v == null ? '' : v)
      .replaceAll('&','&amp;')
      .replaceAll('<','&lt;')
      .replaceAll('"','&quot;');
  }

  function safeMediaUrl(v){
    const raw = String(v == null ? '' : v).trim();
    if(!raw) return '';
    if(/^data:image\//i.test(raw) || /^blob:/i.test(raw)) return raw;
    try{
      const u = new URL(raw, window.location.origin);
      if(u.protocol === 'http:' || u.protocol === 'https:') return u.href;
    }catch(_){ }
    return '';
  }

  function setStatus(id, cls, msg){
    const el = $(id);
    if(el) el.innerHTML = `<span class="${cls}">${escHtml(msg)}</span>`;
  }

  function getNivelRealText(r){
    return String((r && (r.nivel_real || r.nivel || r.__ctxNivel || '')) || '').trim();
  }

  function withCtxNivelData(r, fallbackNivel='', fallbackMateria=''){
    if(!r || typeof r !== 'object') return r;
    const nivel = String(r.nivel || fallbackNivel || r.__ctxNivel || '').trim();
    const nivel_real = String(r.nivel_real || nivel || fallbackNivel || '').trim();
    const materia = String(r.materia || fallbackMateria || '').trim();
    return Object.assign({}, r, { nivel, nivel_real, materia, __ctxNivel: fallbackNivel || nivel || '' });
  }

  function isDiversificacionRow(r){
    const nr = getNivelRealText(r);
    return !!(r && (r.es_diversificacion || nr === '3ESO PDC' || nr === '4ESO PDC'));
  }

  function getNivelMateriaBadgeHtml(r, withMateria=true){
    const nr = escAttr(getNivelRealText(r) || (r && r.nivel) || '');
    const mat = escAttr((r && r.materia) || '');
    const isPdc = isDiversificacionRow(r);
    const bg = isPdc ? '#f5f3ff' : '#dcfce7';
    const color = isPdc ? '#6d28d9' : '#065f46';
    const border = isPdc ? '#d8b4fe' : '#a7f3d0';
    const txt = withMateria && mat ? `${nr} | ${mat}` : nr;
    const title = isPdc ? `Modalidá de diversificación curricular: ${txt}` : txt;
    return `<span class="pill" title="${title}" style="font-weight:bold; background:${bg}; color:${color}; border-color:${border}; padding:4px 10px;">${txt}</span>`;
  }

  function aplicarAutoMateria(selectNivelId, selectMateriaId){
    const n = $(selectNivelId) ? $(selectNivelId).value : '';
    const target = autoMateriaPorNivel(n);
    if(!target) return;
    const matSel = $(selectMateriaId);
    if(matSel && (!matSel.value || ['LAL','LALI','LALII'].includes(matSel.value))){
      matSel.value = target;
    }
  }

  // --- CRITERIOS ---
  let criteriosCache = [];
  function critMatches(row){
    const nf = $('nivelFilter') ? $('nivelFilter').value : '';
    const q = $('critSearch') ? $('critSearch').value.trim().toLowerCase() : '';
    if(nf && row.nivel!==nf) return false;
    if(q){
      const hay = ((row.codigo||'')+' '+(row.descripcion||'')).toLowerCase();
      if(!hay.includes(q)) return false;
    }
    return true;
  }
  
  function renderCriterios(){
    const tb = $('critTbody'); if(!tb) return;
    tb.innerHTML='';
    const rows = criteriosCache.filter(critMatches);
    for(const r of rows){
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td style="color:var(--c-roxu); font-weight:600;">${escHtml(r.nivel||'')}</td>
        <td class="muted">${escHtml(r.materia||'')}</td>
        <td><span class="pill" style="font-family:var(--mono); font-weight:bold; background:#dcfce7; color:#065f46; border-color:#a7f3d0; font-size:15px; padding:4px 10px;">${escHtml(r.codigo||'')}</span></td>
        <td>${escHtml(r.descripcion||'')}</td>
        <td style="font-weight:bold; color:#059669">${escHtml(String(r.peso ?? ''))}%</td>
        <td style="text-align:right; white-space:nowrap; padding-right:16px;">
          <button class="btn ghost btn-crit-edit" data-id="${Number(r.id)||0}" title="Editar">✏️</button>
        </td>`;
      tb.appendChild(tr);
    }
    setStatus('critMsg', 'muted', `Total atopaos: ${rows.length}`);
  }

  listen('critTbody', 'click', (e) => {
    const btn = e.target.closest('.btn-crit-edit');
    if(btn) { openCritModal(parseInt(btn.dataset.id, 10)); }
  });
  
  async function loadCriterios(){
    if($('critMsg')) $('critMsg').textContent='Buscando na DB…';
    try{
      const data = await api('/criterios');
      criteriosCache = data.datos || [];
      renderCriterios();
    }catch(e){
      setStatus('critMsg', 'err', 'Error: ' + (e.message||e));
      if($('critTbody')) $('critTbody').innerHTML='';
    }
  }

  listen('nivelFilter', 'change', ()=>{
    const nv = nivelBaseCanonicu($('nivelFilter').value);
    if($('nivelFilter') && $('nivelFilter').value !== nv) $('nivelFilter').value = nv;
    if($('evNivel') && $('evNivel').value !== nv) { $('evNivel').value = nv; aplicarAutoMateria('evNivel','evMateria'); refreshContext(); }
    if($('aluNivelFilter') && $('aluNivelFilter').value !== nv) { $('aluNivelFilter').value = nv; populateGruposFilter(); renderAlumnos(); }
    renderCriterios();
  });

  listen('critSearch', 'input', renderCriterios);

  listen('critImportTextBtn', 'click', importarCriteriosCsvText);
  listen('critImportFileBtn', 'click', importarCriteriosCsvFile);
  listen('critCsvClearBtn', 'click', ()=>{ $('critCsvText').value=''; $('critImportMsg').textContent=''; });

  async function importarCriteriosCsvText(){
    const csv = $('critCsvText').value.trim();
    if(!csv){ alert("Pega primero'l CSV."); return; }
    if($('critImportTextBtn')) { $('critImportTextBtn').textContent = 'Importando…'; $('critImportTextBtn').disabled=true; }
    try{
      await api('/criterios/importar', {method:'POST', body: JSON.stringify({csv})});
      alert('Importación dende testu completada.');
      if($('critCsvText')) $('critCsvText').value='';
      await loadCriterios();
    }catch(e){
      alert('Error: '+(e.message||e));
    }finally{
      if($('critImportTextBtn')) { $('critImportTextBtn').textContent = 'Importar CSV'; $('critImportTextBtn').disabled=false; }
    }
  }

  async function importarCriteriosCsvFile(){
    const f = $('critCsvFile') && $('critCsvFile').files && $('critCsvFile').files[0];
    if(!f){ if($('critImportMsg')) $('critImportMsg').innerHTML = '<span class="err">Seleiciona un archivu.</span>'; return; }
    if($('critImportMsg')) $('critImportMsg').textContent = 'Importando…';
    try{
      const form = new FormData(); form.append('file', f);
      const res = await fetch(API_BASE + '/criterios/importar', {method:'POST', credentials:'same-origin', body: form});
      const ct = res.headers.get('content-type')||'';
      const data = ct.includes('application/json') ? await res.json().catch(()=>null) : await res.text().catch(()=>null);
      if(!res.ok){ throw new Error((data && (data.erro || data.error)) ? (data.erro || data.error) : res.status); }
      if($('critImportMsg')) $('critImportMsg').innerHTML = '<span class="ok">Importación completada d\'archivu.</span>';
      if($('critCsvFile')) $('critCsvFile').value='';
      await loadCriterios();
    }catch(e){
      if($('critImportMsg')) $('critImportMsg').innerHTML = `<span class="err">Error: ${e.message||e}</span>`;
    }
  }

  // --- EDICIÓN EN VIVO DE CRITERIOS ---
  function openCritModal(id) {
    const r = criteriosCache.find(x => x.id === id);
    if(!r) return;
    if($('critEditCod')) $('critEditCod').value = r.codigo || '';
    if($('critEditPesu')) $('critEditPesu').value = r.peso !== null ? r.peso : 1;
    if($('critEditDesc')) $('critEditDesc').value = r.descripcion || '';
    if($('critSave')) $('critSave').dataset.editid = id;
    if($('critModalMsg')) $('critModalMsg').textContent = '';
    if($('critModalWrap')) $('critModalWrap').classList.add('show');
  }

  function closeCritModal() { if($('critModalWrap')) $('critModalWrap').classList.remove('show'); }

  listen('critModalClose', 'click', closeCritModal);
  listen('critCancel', 'click', closeCritModal);

  listen('critSave', 'click', async () => {
    const id = $('critSave') ? $('critSave').dataset.editid : null;
    if(!id) return;
    const codigo = $('critEditCod') ? $('critEditCod').value.trim() : '';
    const peso = $('critEditPesu') ? parseFloat($('critEditPesu').value) : 0;
    const desc = $('critEditDesc') ? $('critEditDesc').value.trim() : '';

    if(!codigo || !desc || isNaN(peso)) {
      if($('critModalMsg')) $('critModalMsg').innerHTML = '<span class="err">Llena tolos campos con valores válidos.</span>'; 
      return;
    }

    if($('critModalMsg')) $('critModalMsg').textContent = 'Guardando nel sirvidor...';
    try {
      await api(`/criterios/${id}`, {method: 'PUT', body: JSON.stringify({codigo, peso, descripcion: desc})});
      closeCritModal();
      await loadCriterios();
      
      if(tabs['panel'].classList.contains('active') || tabs['calificaciones'].classList.contains('active')) {
         await refreshContext();
      }
    } catch(e) {
      if($('critModalMsg')) $('critModalMsg').innerHTML = `<span class="err">Error: ${e.message||e}</span>`;
    }
  });

  // --- ESTUDIANTES + XESTIÓN DE SEMEYES ---
  listen('aluFotoInput', 'change', (e) => {
      const file = e.target.files[0];
      if(!file) return;
      const reader = new FileReader();
      reader.onload = (event) => {
          const img = new Image();
          img.onload = () => {
              const canvas = document.createElement('canvas');
              const size = Math.min(img.width, img.height);
              const sx = (img.width - size) / 2;
              const sy = (img.height - size) / 2;
              canvas.width = 150;
              canvas.height = 150;
              const ctx = canvas.getContext('2d');
              ctx.drawImage(img, sx, sy, size, size, 0, 0, 150, 150);
              
              const b64 = canvas.toDataURL('image/jpeg', 0.8);
              if($('aluFotoBase64')) $('aluFotoBase64').value = b64;
              if($('aluFotoPreview')) {
                  $('aluFotoPreview').src = b64;
                  $('aluFotoPreview').style.display = 'block';
              }
              if($('aluFotoPlaceholder')) $('aluFotoPlaceholder').style.display = 'none';
          };
          img.src = event.target.result;
      };
      reader.readAsDataURL(file);
  });

  function openAluModal(mode, id = null){
    const modal = document.getElementById('aluModalWrap');
    if(!modal) return;
    
    if($('aluModalTitle')) $('aluModalTitle').textContent = (mode==='edit') ? 'Editar estudiante' : 'Amestar estudiante';
    const btn = document.getElementById('aluCreate');
    if(btn) btn.textContent = (mode==='edit') ? 'Guardar cambeos' : 'Guardar estudiante';
    if($('aluMsg')) $('aluMsg').innerHTML = '';
    
    if($('aluFotoInput')) $('aluFotoInput').value = '';
    if($('aluFotoBase64')) $('aluFotoBase64').value = '';
    if($('aluFotoPreview')) { $('aluFotoPreview').src = ''; $('aluFotoPreview').style.display = 'none'; }
    if($('aluFotoPlaceholder')) $('aluFotoPlaceholder').style.display = 'flex';

    if (mode === 'edit' && id) {
      const alu = alumnosCache.find(x => x.id === id);
      if(alu) {
        let g = alu.grupo || '';
        if(g === 'SINGRUPU' || g === alu.nivel) g = '';
        if($('aluGrupo')) $('aluGrupo').value = g; 
        if($('aluAlias')) $('aluAlias').value = alu.alias || '';
        if($('aluNombre')) $('aluNombre').value = alu.nombre || ''; 
        if($('aluNivel')) $('aluNivel').value = alu.nivel_real || alu.nivel || '';
        if($('aluObs')) $('aluObs').value = alu.observaciones || '';
        if($('aluMateria')) $('aluMateria').value = alu.materia || ''; 
        if($('aluActivo')) $('aluActivo').value = alu.activo;
        
        if(alu.foto) {
            if($('aluFotoBase64')) $('aluFotoBase64').value = alu.foto;
            if($('aluFotoPreview')) {
                $('aluFotoPreview').src = alu.foto;
                $('aluFotoPreview').style.display = 'block';
            }
            if($('aluFotoPlaceholder')) $('aluFotoPlaceholder').style.display = 'none';
        }
        
        if(btn) btn.dataset.editid = id;
      }
    } else {
      if($('aluGrupo')) $('aluGrupo').value = ''; if($('aluAlias')) $('aluAlias').value = ''; if($('aluNombre')) $('aluNombre').value = '';
      if($('aluNivel')) $('aluNivel').value = ''; if($('aluObs')) $('aluObs').value = '';
      if(btn) delete btn.dataset.editid;
    }
    modal.classList.add('show');
    try{ document.getElementById('aluAlias')?.focus(); }catch(_){}
  }

  function closeAluModal(){ const m = document.getElementById('aluModalWrap'); if(m) m.classList.remove('show'); }

  listen('aluAddBtn', 'click', (e)=>{ e.preventDefault(); openAluModal('new'); });
  listen('aluModalClose', 'click', (e)=>{ e.preventDefault(); closeAluModal(); });
  listen('aluCancel', 'click', (e)=>{ e.preventDefault(); closeAluModal(); });

  listen('aluCreate', 'click', async ()=>{
    const grupoVal = $('aluGrupo') ? $('aluGrupo').value.trim() : ''; 
    const nomeVal = $('aluAlias') ? $('aluAlias').value.trim() : '';
    const apellVal = $('aluNombre') ? $('aluNombre').value.trim() : ''; 
    const obsVal = $('aluObs') ? $('aluObs').value.trim() : '';
    const fotoVal = $('aluFotoBase64') ? $('aluFotoBase64').value : null;

    if(!nomeVal){ if($('aluMsg')) $('aluMsg').innerHTML = '<span class="err">Falta\'l nome (obligatoriu).</span>'; if($('aluAlias')) $('aluAlias').focus(); return; }
    if($('aluMsg')) $('aluMsg').textContent='Guardando nel sirvidor…';
    try{
      const payload = { 
          grupo: grupoVal, alias: nomeVal, nome: nomeVal, nombre: apellVal, 
          observaciones: obsVal, nivel: ($('aluNivel')?$('aluNivel').value:''), 
          materia: ($('aluMateria')?$('aluMateria').value:''), 
          foto: fotoVal,
          activo: parseInt(($('aluActivo') ? $('aluActivo').value : '1'),10) 
      };
      const editId = $('aluCreate') ? $('aluCreate').dataset.editid : null;
      if (editId) { await api(`/alumnos/${editId}`, {method:'PUT', body: JSON.stringify(payload)}); } 
      else { await api('/alumnos', {method:'POST', body: JSON.stringify(payload)}); }
      closeAluModal();
      await loadAlumnos();
    }catch(e){
      const m = String(e.message || e || 'Error desconocíu');
      setStatus('aluMsg', 'err', m.toLowerCase().includes('duplicáu') ? 'Estudiante duplicáu nesti nivel.' : ('Error: ' + m));
    }
  });

  let alumnosCache = []; let aluSortCol = 'alias'; let aluSortDir = 1; 
  const ALU_SORT_PREF_KEY = 'llumera_alumnos_list_sort_v2';

  function normalizeAluSortPref(raw){
    const allowed = new Set(['numoper','grupo','alias','nivel','observaciones']);
    const col = allowed.has(raw && raw.col) ? raw.col : 'alias';
    const dir = Number(raw && raw.dir) === -1 ? -1 : 1;
    return { col, dir };
  }

  async function loadAluSortPref(){
    try{
      const d = await api('/preferencies/' + encodeURIComponent(ALU_SORT_PREF_KEY) + '?_t=' + Date.now());
      if(d && d.valor){
        const pref = normalizeAluSortPref(JSON.parse(d.valor));
        aluSortCol = pref.col;
        aluSortDir = pref.dir;
      }
    }catch(e){ console.warn('[Llumera] Nun se pudo cargar la preferencia d’orde de la llista d’estudiantes', e); }
  }

  async function saveAluSortPref(){
    try{
      const pref = normalizeAluSortPref({col: aluSortCol, dir: aluSortDir});
      await api('/preferencies/' + encodeURIComponent(ALU_SORT_PREF_KEY), {method:'PUT', body: JSON.stringify({valor: JSON.stringify(pref)})});
    }catch(e){ console.warn('[Llumera] Nun se pudo guardar la preferencia d’orde de la llista d’estudiantes', e); }
  }

  document.querySelectorAll('#tab-alumnos th.sortable').forEach(th => {
    th.addEventListener('click', async () => {
      const col = th.dataset.sort;
      if (aluSortCol === col) { aluSortDir = aluSortDir === 1 ? -1 : 1; } 
      else { aluSortCol = col; aluSortDir = 1; }
      await saveAluSortPref();
      renderAlumnos();
    });
  });
  
  function populateGruposFilter() {
    const nf = $('aluNivelFilter') ? $('aluNivelFilter').value : '';
    const grupos = new Set();
    for(const r of alumnosCache){
      if(nf && r.nivel !== nf) continue;
      let g = r.grupo || '';
      if(g === 'SINGRUPU' || g === r.nivel) g = '';
      if(g) grupos.add(g);
    }
    const sel = $('aluGrupoFilter'); 
    if(!sel) return;
    const curr = sel.value;
    sel.innerHTML = '<option value="">Tolos grupos</option>';
    Array.from(grupos).sort().forEach(g => { const opt = document.createElement('option'); opt.value = g; opt.textContent = g; sel.appendChild(opt); });
    if(grupos.has(curr)) sel.value = curr; else sel.value = '';
  }

  function aluMatches(r){
    const nf = $('aluNivelFilter') ? $('aluNivelFilter').value : ''; 
    const gf = $('aluGrupoFilter') ? $('aluGrupoFilter').value : '';
    if(nf && r.nivel !== nf) return false;
    if(gf){ let realG = r.grupo || ''; if(realG === 'SINGRUPU' || realG === r.nivel) realG = ''; if(realG !== gf) return false; }
    return true;
  }
  
  function getAluFullNameKey(obj){
    return ((obj.nombre ? obj.nombre + ', ' : '') + (obj.alias || obj.nome || '')).trim().toLowerCase();
  }

  function getAlumnoDisplayName(obj){
    if(!obj || typeof obj !== 'object') return '';
    return ((obj.nombre ? obj.nombre + ', ' : '') + (obj.alias || obj.nome || '')).trim();
  }

  function buildAluOperativeMap(){
    const sorted = [...alumnosCache].sort((a,b)=>{
      const byNivel = String(a.nivel || '').localeCompare(String(b.nivel || ''), 'ast');
      if(byNivel !== 0) return byNivel;
      const byName = getAluFullNameKey(a).localeCompare(getAluFullNameKey(b), 'ast');
      if(byName !== 0) return byName;
      return Number(a.id||0) - Number(b.id||0);
    });
    const map = new Map();
    const counters = new Map();
    sorted.forEach((r) => {
      const key = String(r.nivel || '').trim();
      const next = (counters.get(key) || 0) + 1;
      counters.set(key, next);
      map.set(r.id, next);
    });
    return map;
  }

  function renderAlumnos(){
    const tb = $('aluTbody'); if(!tb) return;
    tb.innerHTML='';
    let list = alumnosCache.filter(aluMatches);
    
    if($('aluCountBadge')) $('aluCountBadge').textContent = list.length + (list.length === 1 ? ' estudiante' : ' estudiantes');

    const aluOperMap = buildAluOperativeMap();

    if (aluSortCol) {
      list.sort((a, b) => {
        let valA = a[aluSortCol]; let valB = b[aluSortCol];
        if (valA === null || valA === undefined) valA = ''; if (valB === null || valB === undefined) valB = '';
        if (aluSortCol === 'numoper') {
          const byNivelNum = String(a.nivel || '').localeCompare(String(b.nivel || ''), 'ast');
          if(byNivelNum !== 0) return byNivelNum * aluSortDir;
          return ((aluOperMap.get(a.id)||0) - (aluOperMap.get(b.id)||0)) * aluSortDir;
        }
        if (aluSortCol === 'id' || aluSortCol === 'activo') return (Number(valA) - Number(valB)) * aluSortDir;
        if (aluSortCol === 'grupo') {
           let gA = valA === 'SINGRUPU' || valA === a.nivel ? '' : valA; let gB = valB === 'SINGRUPU' || valB === b.nivel ? '' : valB;
           return String(gA).toLowerCase().localeCompare(String(gB).toLowerCase(), 'ast') * aluSortDir;
        }
        // IGUA v0.19.20: Orde na tabla d'estudiantes tamién por apellíos
        if (aluSortCol === 'alias') {
             return getAluFullNameKey(a).localeCompare(getAluFullNameKey(b), 'ast') * aluSortDir;
        }
        if (aluSortCol === 'nivel') {
             return getNivelRealText(a).localeCompare(getNivelRealText(b), 'ast') * aluSortDir;
        }
        return String(valA).toLowerCase().localeCompare(String(valB).toLowerCase(), 'ast') * aluSortDir;
      });
    }

    document.querySelectorAll('#tab-alumnos th.sortable').forEach(th => {
      const span = th.querySelector('span');
      if(span) span.textContent = (th.dataset.sort === aluSortCol) ? (aluSortDir === 1 ? '▲' : '▼') : '';
    });

    for(const r of list){
      const tr = document.createElement('tr');
      let displayGrupo = r.grupo || '';
      if(displayGrupo === 'SINGRUPU' || displayGrupo === r.nivel) displayGrupo = '';
      const displayGrupoHtml = displayGrupo ? escHtml(displayGrupo) : '<span class="muted">—</span>';

      let fullName = r.alias || r.nome || '';
      if (r.nombre) fullName = `${r.nombre}, ${r.alias}`;
      const fullNameHtml = escHtml(fullName);

      const fotoUrl = safeMediaUrl(r.foto);
      const avatarHtml = fotoUrl ? `<img src="${escAttr(fotoUrl)}" class="avatar">` : `<div class="avatar">👤</div>`;

      const obs = String(r.observaciones || '').trim();
      const obsHtml = obs ? `<div class="muted" style="font-size:12px; max-width:250px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;" title="${escAttr(obs)}">${escHtml(obs)}</div>` : '<span class="muted">—</span>';

      const aluNumOper = aluOperMap.get(r.id) || '';
      tr.innerHTML = `
        <td style="font-weight:700; color:#111827; text-align:center; width:70px;">${escHtml(String(aluNumOper))}</td>
        <td style="font-weight:600; color:var(--muted)">${displayGrupoHtml}</td>
        <td style="font-weight:600; color:#111827;">
            <div style="display:flex; align-items:center; gap:10px;">
                ${avatarHtml}
                <span>${fullNameHtml}</span>
            </div>
        </td>
        <td>${getNivelMateriaBadgeHtml(r, true)}</td>
        <td>${obsHtml}</td>
        <td style="display:flex; justify-content:flex-end; gap:4px; border-bottom:none;">
          <button class="btn ghost btn-alu-eval" data-id="${Number(r.id)||0}" title="Evaluar" style="border-color:#bae6fd; color:#0369a1; background:#f0f9ff; font-weight:700;">Evaluar</button>
          <button class="btn ghost btn-alu-edit" data-id="${Number(r.id)||0}" title="Editar">✏️</button>
          <button class="btn ghost btn-alu-del" data-id="${Number(r.id)||0}" title="Borrar">🗑️</button>
        </td>`;
      tb.appendChild(tr);
    }

    tb.querySelectorAll('.btn-alu-del').forEach(btn => {
      btn.addEventListener('click', async () => {
        if(confirm('¿Daveres quies borrar esti estudiante y les sos notes?')) {
          const id = parseInt(btn.dataset.id, 10);
          try { await api(`/alumnos/${id}`, {method: 'DELETE'}); await loadAlumnos(); } 
          catch(err) { alert(`Error: ${err.message||err}`); }
        }
      });
    });

    tb.querySelectorAll('.btn-alu-edit').forEach(btn => {
      btn.addEventListener('click', () => { openAluModal('edit', parseInt(btn.dataset.id, 10)); });
    });

    tb.querySelectorAll('.btn-alu-eval').forEach(btn => {
      btn.addEventListener('click', async () => {
        const id = parseInt(btn.dataset.id, 10);
        const alumno = alumnosCache.find(x => Number(x.id) === id);
        if(alumno) await openAlumnoEvalModal(alumno);
      });
    });
  }
  
  async function loadAlumnos(){
    try{ const data = await api('/alumnos'); alumnosCache = data.datos || []; populateGruposFilter(); renderAlumnos(); }
    catch(e){ if($('aluTbody')) $('aluTbody').innerHTML=''; }
  }
  
  listen('aluRefresh', 'click', ()=>loadAlumnos());

  listen('aluNivelFilter', 'change', ()=>{ 
    const nv = nivelBaseCanonicu($('aluNivelFilter').value);
    if($('aluNivelFilter') && $('aluNivelFilter').value !== nv) $('aluNivelFilter').value = nv;
    if($('evNivel') && $('evNivel').value !== nv) { $('evNivel').value = nv; aplicarAutoMateria('evNivel','evMateria'); refreshContext(); }
    if($('nivelFilter') && $('nivelFilter').value !== nv) { $('nivelFilter').value = nv; renderCriterios(); }
    populateGruposFilter(); renderAlumnos(); 
  });

  listen('aluGrupoFilter', 'change', ()=>{
    const g = $('aluGrupoFilter').value;
    if($('evGrupo') && $('evGrupo').value !== g) { $('evGrupo').value = g; refreshContext(); }
    renderAlumnos();
  });

  listen('aluNivel', 'change', ()=> aplicarAutoMateria('aluNivel','aluMateria'));
  
  // -- IMPORTACIÓN DE SAUCE --
  listen('aluImpNivel', 'change', ()=> aplicarAutoMateria('aluImpNivel','aluImpMateria'));
  listen('aluCsvClearBtn', 'click', ()=>{ 
      if($('aluCsvText')) $('aluCsvText').value=''; 
      if($('aluImportMsg')) $('aluImportMsg').textContent=''; 
      if($('aluCsvFile')) $('aluCsvFile').value=''; 
  });
  
  listen('aluImportBtn', 'click', async () => {
      const nivel = $('aluImpNivel') ? $('aluImpNivel').value : ''; 
      const materia = $('aluImpMateria') ? $('aluImpMateria').value : '';
      if(!nivel || !materia) { if($('aluImportMsg')) $('aluImportMsg').innerHTML = '<span class="err">Escueye Nivel y Materia.</span>'; return; }
      const csvText = $('aluCsvText') ? $('aluCsvText').value.trim() : ''; 
      const f = $('aluCsvFile') && $('aluCsvFile').files && $('aluCsvFile').files[0];
      if(!csvText && !f) { if($('aluImportMsg')) $('aluImportMsg').innerHTML = '<span class="err">Pega o xube ficheru CSV de SAUCE.</span>'; return; }

      if($('aluImportMsg')) $('aluImportMsg').textContent = 'Procesando llistes...';
      try {
          if(f) {
              const form = new FormData(); form.append('file', f); form.append('nivel', nivel); form.append('materia', materia);
              const res = await fetch(API_BASE + '/alumnos/importar', {method:'POST', credentials: 'same-origin', body: form});
              const ct = res.headers.get('content-type')||'';
              const data = ct.includes('application/json') ? await res.json().catch(()=>null) : await res.text().catch(()=>null);
              if(!res.ok) { throw new Error((data && (data.erro || data.error)) ? (data.erro || data.error) : res.status); }
              if($('aluImportMsg')) $('aluImportMsg').innerHTML = `<span class="ok">¡Llisto! ${data.procesados} guardaos. (Duplicaos inoraos: ${data.inoraos})</span>`;
          } else {
              const payload = { csv: csvText, nivel: nivel, materia: materia };
              const res = await api('/alumnos/importar', {method:'POST', body: JSON.stringify(payload)});
              if($('aluImportMsg')) $('aluImportMsg').innerHTML = `<span class="ok">¡Llisto! ${res.procesados} guardaos. (Duplicaos inoraos: ${res.inoraos})</span>`;
          }
          await loadAlumnos();
      } catch(e) { if($('aluImportMsg')) $('aluImportMsg').innerHTML = `<span class="err">Fallu al importar: ${e.message||e}</span>`; }
  });

  // --- INSTRUMENTOS (CRUD ADMIN) ---
  let adminInstrumentosCache = [];
  
  async function loadAdminInstrumentos() {
    if($('instMsg')) $('instMsg').textContent = 'Cargando ferramientes...';
    try {
      const d = await api('/instrumentos');
      adminInstrumentosCache = d.datos || [];
      renderAdminInstrumentos();
      setStatus('instMsg', 'ok', `${adminInstrumentosCache.length} instrumentos atopaos.`);
    } catch(e) {
      setStatus('instMsg', 'err', `Error: ${e.message||e}`);
    }
  }

  function renderAdminInstrumentos() {
    const tb = $('instAdminTbody'); if(!tb) return;
    tb.innerHTML = '';
    if(adminInstrumentosCache.length === 0) {
      tb.innerHTML = '<tr><td colspan="4" class="muted" style="text-align:center;">Nun hai instrumentos. Añade ún pa entamar.</td></tr>';
      return;
    }
    for (const r of adminInstrumentosCache) {
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td style="font-weight:600; color:#111827;">${escHtml(r.nombre)}</td>
        <td><span class="pill" style="text-transform:capitalize; font-weight:bold; background:#dcfce7; color:#065f46; border-color:#a7f3d0; padding:4px 10px;">${escHtml(r.tipo||'otru')}</span></td>
        <td class="muted">${escHtml(r.descripcion||'—')}</td>
        <td style="display:flex; justify-content:flex-end; gap:4px; border-bottom:none;">
          <button class="btn ghost btn-inst-edit" data-id="${Number(r.id)||0}" title="Editar">✏️</button>
          <button class="btn ghost btn-inst-del" data-id="${Number(r.id)||0}" title="Borrar">🗑️</button>
        </td>`;
      tb.appendChild(tr);
    }
    
    tb.querySelectorAll('.btn-inst-edit').forEach(btn => {
      btn.addEventListener('click', () => openInstModal('edit', parseInt(btn.dataset.id, 10)));
    });
    tb.querySelectorAll('.btn-inst-del').forEach(btn => {
      btn.addEventListener('click', async () => {
        if(confirm('¿Seguru que quies borrar esti instrumentu? Quitárase automáticamente de les evidencies que lu usen.')) {
          try {
            await api(`/instrumentos/${btn.dataset.id}`, {method:'DELETE'});
            await loadAdminInstrumentos();
            await loadInstrumentos(); 
          } catch(e) { alert('Error: ' + e.message); }
        }
      });
    });
  }

  function openInstModal(mode, id = null) {
    const w = $('instModalWrap'); if(!w) return;
    if($('instModalTitle')) $('instModalTitle').textContent = mode === 'edit' ? 'Editar instrumentu' : 'Añadir instrumentu';
    if($('instModalMsg')) $('instModalMsg').textContent = '';
    const btn = $('instSave');
    
    if (mode === 'edit' && id) {
      const r = adminInstrumentosCache.find(x => x.id === id);
      if (r) {
        if($('instNombre')) $('instNombre').value = r.nombre || '';
        if($('instTipo')) $('instTipo').value = r.tipo || 'otru';
        if($('instDesc')) $('instDesc').value = r.descripcion || '';
        if(btn) btn.dataset.editid = id;
      }
    } else {
      if($('instNombre')) $('instNombre').value = ''; 
      if($('instTipo')) $('instTipo').value = 'rubrica'; 
      if($('instDesc')) $('instDesc').value = '';
      if(btn) delete btn.dataset.editid;
    }
    w.classList.add('show');
  }

  function closeInstModal() { if($('instModalWrap')) $('instModalWrap').classList.remove('show'); }

  listen('instAddBtn', 'click', () => openInstModal('new'));
  listen('instModalClose', 'click', closeInstModal);
  listen('instCancel', 'click', closeInstModal);

  listen('instSave', 'click', async () => {
    const nombre = $('instNombre') ? $('instNombre').value.trim() : '';
    const tipo = $('instTipo') ? $('instTipo').value : '';
    const desc = $('instDesc') ? $('instDesc').value.trim() : '';
    
    if(!nombre) { if($('instModalMsg')) $('instModalMsg').innerHTML = '<span class="err">El nome ye obligatoriu.</span>'; return; }
    
    if($('instModalMsg')) $('instModalMsg').textContent = 'Guardando...';
    const payload = { nombre, tipo, descripcion: desc, activo: 1 };
    const editId = $('instSave') ? $('instSave').dataset.editid : null;
    
    try {
      if (editId) {
        await api(`/instrumentos/${editId}`, {method:'PUT', body: JSON.stringify(payload)});
      } else {
        await api('/instrumentos', {method:'POST', body: JSON.stringify(payload)});
      }
      closeInstModal();
      await loadAdminInstrumentos();
      await loadInstrumentos(); 
    } catch(e) {
      if($('instModalMsg')) $('instModalMsg').innerHTML = `<span class="err">Error: ${e.message||e}</span>`;
    }
  });

  // --- EVALUACIÓN GLOBAL Y CONTESTU ---
  let instrumentosCache = [];
  
  function ctx(){
    return {
      curso: $('evCurso') ? $('evCurso').value.trim() : '',
      trimestre: $('evTri') ? parseInt($('evTri').value,10) : 1,
      nivel: $('evNivel') ? nivelBaseCanonicu($('evNivel').value) : '',
      materia: $('evMateria') ? $('evMateria').value : '',
      grupo: $('evGrupo') ? $('evGrupo').value.trim() : '',
      sda: $('evSdaFilter') ? $('evSdaFilter').value.trim() : ''
    };
  }
  
  function ctxOk(c){ 
    const ok = c.curso && c.trimestre && c.nivel && c.materia; 
    if($('evNivel')) $('evNivel').style.borderColor = c.nivel ? 'var(--line)' : '#fca5a5';
    if($('evMateria')) $('evMateria').style.borderColor = c.materia ? 'var(--line)' : '#fca5a5';
    return ok;
  }

  function grupuCanonicu(v, nivel=''){
    const g = String(v || '').trim();
    if(!g) return '';
    const nb = nivelBaseCanonicu(nivel || '');
    if(g === 'SINGRUPU' || (nb && g === nb)) return '';
    return g;
  }

  function sdaCanonicu(v){
    return String(v || '').trim();
  }

  function buildEvalCtxForAlumno(al){
    const c = ctx();
    const nivel = nivelBaseCanonicu((al && al.nivel) || c.nivel || '');
    const materia = String((al && al.materia) || c.materia || '').trim();
    const grupo = grupuCanonicu((al && al.grupo) || c.grupo || '', nivel);
    const sameLane = nivel === String(c.nivel || '').trim() && materia === String(c.materia || '').trim() && grupo === grupuCanonicu(c.grupo || '', c.nivel || '');
    return {
      curso: c.curso,
      trimestre: c.trimestre,
      nivel,
      materia,
      grupo,
      sda: sameLane ? sdaCanonicu(c.sda || '') : ''
    };
  }

  function evidenciaValidaPalAlumno(ev, cEval){
    if(!ev) return false;
    const evNivel = nivelBaseCanonicu(ev.nivel || cEval.nivel || '');
    const evMateria = String(ev.materia || '').trim();
    const evGrupo = grupuCanonicu(ev.grupo || '', evNivel);
    const evSda = sdaCanonicu(ev.sda || '');
    const alGrupo = grupuCanonicu(cEval.grupo || '', cEval.nivel || '');
    const alSda = sdaCanonicu(cEval.sda || '');

    if(cEval.curso && String(ev.curso || '').trim() && String(ev.curso || '').trim() !== String(cEval.curso || '').trim()) return false;
    if(cEval.trimestre && Number(ev.trimestre || 0) && Number(ev.trimestre || 0) !== Number(cEval.trimestre || 0)) return false;
    if(cEval.nivel && evNivel && evNivel !== cEval.nivel) return false;
    if(cEval.materia && evMateria && evMateria !== cEval.materia) return false;
    if(alGrupo && evGrupo && evGrupo !== alGrupo) return false;
    if(alSda && evSda && evSda !== alSda) return false;
    return true;
  }

  // IGUA v0.19.20: Lóxica p'almacenar y recargar el contestu global dende la nube
  async function loadContextPref() {
      try {
          const res = await api('/preferencies/global_context?_t=' + Date.now());
          if (res && res.ok && res.valor) {
              const c = JSON.parse(res.valor);
              if(c.curso) $('evCurso').value = c.curso;
              if(c.trimestre) $('evTri').value = c.trimestre;
              if(c.nivel) {
                  const nv = nivelBaseCanonicu(c.nivel);
                  $('evNivel').value = nv;
                  if($('aluNivelFilter')) $('aluNivelFilter').value = nv;
                  if($('nivelFilter')) $('nivelFilter').value = nv;
                  aplicarAutoMateria('evNivel', 'evMateria');
              }
              if(c.materia) $('evMateria').value = c.materia;
              if(c.grupo) {
                  $('evGrupo').value = c.grupo;
                  if($('aluGrupoFilter')) $('aluGrupoFilter').value = c.grupo;
              }

              window.__savedSda = c.sda || '';
          }
      } catch(e) {}
  }

  function saveContextPref() {
      const c = ctx();
      // Guardamos namás si hai un contestu válidu escoyíu p'acutar machucar con nulos
      if(!c.nivel || !c.materia) return;
      api('/preferencies/global_context', {method: 'PUT', body: JSON.stringify({valor: JSON.stringify(c)})}).catch((e)=>{ console.warn('[Llumera] Nun se pudo guardar global_context en preferencies', e); });
  }

  // IGUA v0.19.21: Claves d'orde acutaes por contestu con compatibilidá cola clave heredada
  function normalizeValOrderPref(pref) {
      if (!pref || typeof pref !== 'object') return { mode: 'alpha', dir: 1 };
      if (pref.mode === 'manual' && Array.isArray(pref.ids)) {
          const ids = pref.ids.map(v => parseInt(v, 10)).filter(Number.isFinite);
          return { mode: 'manual', ids };
      }
      return { mode: 'alpha', dir: pref.dir === -1 ? -1 : 1 };
  }

  function getValOrderPrefKeys(c) {
      const legacyKey = 'llumera_val_order_' + (c.nivel || '') + '_' + (c.grupo || '');
      const scopedKey = 'llumera_val_order_' + (c.curso || '') + '_' + (c.nivel || '') + '_' + (c.materia || '') + '_' + (c.grupo || '');
      return {
          scoped: encodeURIComponent(scopedKey),
          legacy: encodeURIComponent(legacyKey)
      };
  }

  async function loadValOrderPref(c) {
      const keys = getValOrderPrefKeys(c);
      const tryKeys = [];
      if (keys.scoped !== keys.legacy) tryKeys.push(keys.scoped);
      tryKeys.push(keys.legacy);

      for (const key of tryKeys) {
          try {
              const res = await api('/preferencies/' + key + '?_t=' + Date.now());
              if (res && res.ok && res.valor) return normalizeValOrderPref(JSON.parse(res.valor));
          } catch(e) { console.warn('[Llumera] Nun se pudo cargar orde de valoración dende preferencies', e); }
      }
      return { mode: 'alpha', dir: 1 };
  }

  function saveValOrderPref(c, pref) {
      const keys = getValOrderPrefKeys(c);
      const normalized = normalizeValOrderPref(pref);
      return api('/preferencies/' + keys.scoped, {
          method: 'PUT',
          body: JSON.stringify({valor: JSON.stringify(normalized)})
      }).catch((e) => {
          console.warn('[Llumera] Nun se pudo guardar orde de valoración en preferencies', e);
          throw e;
      });
  }


  async function syncSdaDropdowns(c) {
    if(!ctxOk(c)) return [];
    try {
      const qsAll = new URLSearchParams({curso:c.curso, trimestre:String(c.trimestre), nivel:c.nivel, materia:c.materia});
      if(c.grupo) qsAll.set('grupo', c.grupo);
      const d = await api('/evidencias?'+qsAll.toString());
      const allRows = d.datos || [];
      
      const sdas = new Set();
      allRows.forEach(r => { if(r.sda) sdas.add(r.sda.trim()); });
      
      const sdaFilter = $('evSdaFilter');
      if(sdaFilter) {
          let currSda = sdaFilter.value;
          if(window.__savedSda !== undefined) {
              currSda = window.__savedSda;
              delete window.__savedSda;
          }
          sdaFilter.innerHTML = '<option value="">Toles SdA</option>';
          Array.from(sdas).sort().forEach(s => {
              const opt = document.createElement('option'); opt.value = s; opt.textContent = s;
              sdaFilter.appendChild(opt);
          });
          if(sdas.has(currSda)) sdaFilter.value = currSda; else sdaFilter.value = '';
      }
      
      const sdaList = $('sdaList');
      if(sdaList) {
          sdaList.innerHTML = '';
          Array.from(sdas).sort().forEach(s => {
              const opt = document.createElement('option'); opt.value = s;
              sdaList.appendChild(opt);
          });
      }
      return allRows;
    } catch(e) { 
      return [];
    }
  }

  async function refreshContext() {
     const btn = $('evRefreshBtn');
     if(btn) btn.textContent = 'Cargando...';
     
     if(tabs['panel'].classList.contains('active') || tabs['evidencias'].classList.contains('active')) {
         await refreshEval();
     }
     if(tabs['calificaciones'].classList.contains('active')) {
         await loadAndShowNotesTab();
     }
     if(tabs['final'] && tabs['final'].classList.contains('active')) {
         await loadAndShowFinalTab();
     }
     
     if(btn) btn.textContent = 'Cargar';
     
     // Guardar na nube en silenciu (background)
     saveContextPref();
  }

  listen('evCurso', 'change', refreshContext);
  listen('evRefreshBtn', 'click', refreshContext);
  listen('evNivel', 'change', ()=>{ 
    aplicarAutoMateria('evNivel','evMateria'); 
    const nv = nivelBaseCanonicu($('evNivel').value);
    if($('evNivel') && $('evNivel').value !== nv) $('evNivel').value = nv;
    if($('aluNivelFilter') && $('aluNivelFilter').value !== nv) { $('aluNivelFilter').value = nv; populateGruposFilter(); renderAlumnos(); }
    if($('nivelFilter') && $('nivelFilter').value !== nv) { $('nivelFilter').value = nv; renderCriterios(); }
    refreshContext(); 
  });

  listen('evMateria', 'change', refreshContext);
  listen('evTri', 'change', refreshContext);
  
  listen('evGrupo', 'change', ()=>{
    const g = $('evGrupo').value.trim();
    if($('aluGrupoFilter') && $('aluGrupoFilter').value !== g) { 
      let exists = Array.from($('aluGrupoFilter').options).some(o => o.value === g);
      if(exists || g === '') { $('aluGrupoFilter').value = exists ? g : ''; renderAlumnos(); }
    }
    refreshContext(); 
  });

  listen('evSdaFilter', 'change', refreshContext);

  async function loadInstrumentos(){
    try{ const d = await api('/instrumentos?activo=1'); instrumentosCache = d.datos || []; }
    catch(_){ instrumentosCache = []; }
    const sel = $('evInstr'); 
    if(!sel) return;
    sel.innerHTML = '<option value="">—</option>';
    for(const it of instrumentosCache){
      const o = document.createElement('option'); o.value = it.id; o.textContent = it.nombre + (it.tipo? (' · '+it.tipo):''); sel.appendChild(o);
    }
  }

  function criteriosDelContexto(c){ return criteriosCache.filter(x => x.activo==1 && x.nivel===c.nivel && x.materia===c.materia); }

  const DEFAULT_TPL_CRIT = {
    ESO: { debate: ['3.1','3.2','10.1','10.2'], expo: ['3.1','3.2','6.1'], lectura:['7.1','7.2','4.1','4.2','8.1','8.2','10.1','10.2','5.2'], coment: ['4.1','4.2','8.1','8.2','9.1','9.2'], redacc: ['5.1','5.2','9.1','9.2','6.2'], pod: ['3.1','3.2','5.1','5.2','6.1','6.2'], video: ['3.1','3.2','5.1','5.2','6.1','6.2'], port: ['5.2','7.1','7.2','9.1','9.2','10.2'], obs: ['10.1','10.2','3.2'] },
    BACH: { debate: ['3.1','3.2','10.1'], expo: ['3.1','3.2','6.1'], lectura:['7.1','7.2','4.1','8.1','8.2','9.1'], coment: ['4.1','8.1','8.2','9.1','9.2'], redacc: ['5.1','5.2','9.1','9.2','6.2'], pod: ['3.1','3.2','5.1','6.1'], video: ['3.1','3.2','5.1','6.1','6.2'], port: ['5.2','7.1','9.1','9.2'], obs: ['10.1','3.2'] }
  };

  function nivelGrupo(c){ const n = (c && c.nivel) ? String(c.nivel) : ''; return n.includes('BACH') ? 'BACH' : 'ESO'; }
  function defaultTplCritCodes(tplKey, c){
    const tpl = getTplByKey(tplKey);
    if(tpl && Array.isArray(tpl.criterio_codigos) && tpl.criterio_codigos.length) return tpl.criterio_codigos;
    const g = nivelGrupo(c); const m = DEFAULT_TPL_CRIT[g] || {}; return Array.isArray(m[tplKey]) ? m[tplKey] : [];
  }

  function premarcaTplCriterios(tplKey){
    try{
      const c = ctx(); const box = $('evCriteriosBox'); if(!box) return;
      box.querySelectorAll('.chip.on[data-auto="1"]').forEach(ch => { ch.classList.remove('on'); delete ch.dataset.auto; });
      if(box.querySelectorAll('.chip.on').length > 0) return;
      const cc = criteriosDelContexto(c); if(!cc || !cc.length) return;
      const codes = defaultTplCritCodes(tplKey, c); if(!codes || !codes.length) return;
      const normCode = s => { const t = (s||'').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'').trim(); const m = t.match(/\b\d+\.\d+\b/); return m ? m[0] : t; };
      const want = codes.map(normCode).filter(Boolean); const map = new Map();
      for(const r of cc){ map.set(normCode(r.codigo), r.id); }
      let count = 0;
      for(const w of want){
        const id = map.get(w); if(!id) continue;
        const chip = box.querySelector(`.chip[data-id="${id}"]`);
        if(chip && !chip.classList.contains('on')){ chip.classList.add('on'); chip.dataset.auto = '1'; count++; if (count >= 3) break; }
      }
    }catch(_){}
  }

  const TPL_FALLBACK = [
    {k:'debate', t:'Debate formal', tipo:'oral', instr:'Rúbrica expresión oral', notas:'Debate con turnos y evidencies.'},
    {k:'expo', t:'Exposición oral', tipo:'oral', instr:'Rúbrica expresión oral', notas:'Presentación breve con sofitos.'},
    {k:'lectura', t:'Control de llectura', tipo:'escrita', instr:'Prueba específica', notas:'Comprensión llectora.'},
    {k:'coment', t:'Comentariu de testu', tipo:'escrita', instr:'Rúbrica comentario', notas:'Estructura y analís.'},
    {k:'redacc', t:'Redaición / testu', tipo:'escrita', instr:'Rúbrica escritura', notas:'Planificación y cohesión.'},
    {k:'obs', t:'Observación xeneral', tipo:'observacion', instr:'Observación', notas:'Rexistru rápitu de participation.'},
    {k:'prueba', t:'Prueba oxetiva', tipo:'prueba', instr:'Prueba específica', notas:'Ítems curtios.'},
  ];
  let tplCatalogCache = TPL_FALLBACK.map(x => Object.assign({}, x));
  let tplCatalogCtxKey = '';
  let tplCatalogSource = 'local';
  let tplAutoState = { title:'', tipo:'', notas:'', instr:'' };

  function resetTplAutoState(){
    tplAutoState = { title:'', tipo:'', notas:'', instr:'' };
  }

  function canOverwriteAutoField(el, prevAutoValue){
    if(!el) return false;
    const cur = String(el.value || '').trim();
    const prev = String(prevAutoValue || '').trim();
    return !cur || (prev && cur === prev);
  }

  function normalizeTplRow(x){
    return {
      k: String((x && (x.k ?? x.clave)) || '').trim(),
      t: String((x && (x.t ?? x.titulo ?? x.nome)) || '').trim(),
      tipo: String((x && x.tipo) || '').trim(),
      instr: String((x && (x.instr ?? x.instrumentu_nome)) || '').trim(),
      notas: String((x && x.notas) || '').trim(),
      criterio_codigos: Array.isArray(x && x.criterio_codigos) ? x.criterio_codigos.map(v => String(v||'').trim()).filter(Boolean) : []
    };
  }

  function tplCtxKey(c){
    return [nivelGrupo(c), c && c.nivel || '', c && c.materia || ''].join('|');
  }

  function tplCatalogCurrent(){
    return Array.isArray(tplCatalogCache) && tplCatalogCache.length ? tplCatalogCache : TPL_FALLBACK;
  }

  function getTplByKey(k){
    if(!k) return null;
    const cur = tplCatalogCurrent().find(x => x.k === k);
    if(cur) return cur;
    return TPL_FALLBACK.find(x => x.k === k) || null;
  }

  async function loadTplCatalog(force=false){
    const c = ctx();
    const key = tplCtxKey(c);
    if(!force && tplCatalogSource === 'server' && tplCatalogCtxKey === key && tplCatalogCache.length) return tplCatalogCache;
    try{
      const qs = new URLSearchParams({activo:'1'});
      if(c && c.nivel) qs.set('nivel', c.nivel);
      else qs.set('etapa', nivelGrupo(c));
      if(c && c.materia) qs.set('materia', c.materia);
      const d = await api('/plantiyes/evidencies?' + qs.toString());
      const rawRows = (d && (Array.isArray(d.datos) ? d.datos : (Array.isArray(d.items) ? d.items : []))) || [];
      const rows = rawRows.map(normalizeTplRow).filter(x => x.k);
      if(rows.length){
        tplCatalogCache = rows;
        tplCatalogCtxKey = key;
        tplCatalogSource = 'server';
        return tplCatalogCache;
      }
      console.warn('[Llumera] Catálogu de plantiyes vacíu nel sirvidor; úsase fallback local');
    }catch(e){
      console.warn('[Llumera] Nun se pudieron cargar les plantiyes d’evidencies dende la API; úsase fallback local', e);
    }
    tplCatalogCache = TPL_FALLBACK.map(x => Object.assign({}, x));
    tplCatalogCtxKey = key;
    tplCatalogSource = 'local';
    return tplCatalogCache;
  }

  function renderTpl(){
    const sel = $('evTpl'); if(!sel) return;
    const prev = sel.value || '';
    sel.innerHTML='';
    const blank = document.createElement('option');
    blank.value = '';
    blank.textContent = '— Plantiya (opcional) —';
    sel.appendChild(blank);
    for(const x of tplCatalogCurrent()){
      const o = document.createElement('option');
      o.value = x.k;
      o.textContent = x.t || x.k;
      sel.appendChild(o);
    }
    if(prev && Array.from(sel.options).some(o => o.value === prev)) sel.value = prev;
  }

  function applyTpl(k){
    const tpl = getTplByKey(k); if(!tpl || !tpl.k) return;
    const prev = Object.assign({}, tplAutoState);

    const titleEl = $('evTitulo');
    if(titleEl && canOverwriteAutoField(titleEl, prev.title)){
      titleEl.value = tpl.t || '';
      tplAutoState.title = titleEl.value.trim();
    }

    const tipoEl = $('evTipo');
    if(tipoEl && canOverwriteAutoField(tipoEl, prev.tipo)){
      tipoEl.value = tpl.tipo || '';
      tplAutoState.tipo = String(tipoEl.value || '').trim();
    }

    const notasEl = $('evNotas');
    if(notasEl && canOverwriteAutoField(notasEl, prev.notas)){
      notasEl.value = tpl.notas || '';
      tplAutoState.notas = notasEl.value.trim();
    }

    if(tpl.instr && instrumentosCache.length){
      const norm = s => (s||'').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'').trim();
      const target = norm(tpl.instr);
      let found = instrumentosCache.find(i => norm(i.nombre) === target);
      if(!found) found = instrumentosCache.find(i => norm(i.nombre).includes(target));
      const instrEl = $('evInstr');
      if(found && instrEl && canOverwriteAutoField(instrEl, prev.instr)){
        instrEl.value = String(found.id);
        tplAutoState.instr = String(instrEl.value || '').trim();
      }
    }
  }

  function openModal(){
    if(window.__isClosed) {
       alert("🔒 Esti trimestre ta zarráu y conxeláu. Desblóquialu na llingüeta de calificaciones si precises añader evidencies.");
       return;
    }
    const c = ctx();
    if(!ctxOk(c)){ if($('evModalMsg')) $('evModalMsg').innerHTML = '<span class="err">Llena la barra de contestu primero (nivel y materia).</span>'; }
    else{ if($('evModalMsg')) $('evModalMsg').textContent=''; }
    
    resetTplAutoState();
    if($('evFecha')) $('evFecha').valueAsDate = new Date(); 
    if($('evTitulo')) $('evTitulo').value = ''; 
    if($('evTipo')) $('evTipo').value = '';
    if($('evSda')) $('evSda').value = ''; 
    if($('evInstr')) $('evInstr').value = ''; 
    if($('evNotas')) $('evNotas').value = ''; 
    if($('evTpl')) $('evTpl').value = '';
    if($('evTpl') && $('evTpl').options && $('evTpl').options.length===0){ try{ renderTpl(); }catch(_){ } }
    if(tplCatalogSource !== 'server'){ loadTplCatalog().then(()=>renderTpl()).catch(()=>{}); }
    if($('evSave')) delete $('evSave').dataset.editid;
    
    const box = $('evCriteriosBox'); 
    if(box) {
      box.innerHTML='';
      const cc = criteriosDelContexto(c);
      if(!cc.length){ box.innerHTML = '<span class="muted">Ensin criterios pal nivel/materia na to base de datos.</span>'; }
      else{
        for(const r of cc){
          const b = document.createElement('button'); b.type='button'; b.className='chip'; b.dataset.id = r.id;
          b.title = String(r.descripcion || ''); 
          b.innerHTML = `<span style="font-family:var(--mono); font-weight:bold;">${escHtml(r.codigo||'')}</span> &nbsp; <span style="opacity:0.7">${escHtml(String(r.peso ?? ''))}%</span>`;
          b.addEventListener('click', ()=>{
            b.classList.toggle('on'); delete b.dataset.auto;
          });
          box.appendChild(b);
        }
      }
    }
    if($('evModalWrap')) $('evModalWrap').classList.add('show');
  }

  function closeModal(){ if($('evModalWrap')) $('evModalWrap').classList.remove('show'); }

  listen('evAddOpenBtn', 'click', openModal);
  listen('evModalClose', 'click', closeModal);
  listen('evCancel', 'click', closeModal);

  listen('evTpl', 'change', ()=>{ const k=$('evTpl')?$('evTpl').value:''; applyTpl(k); premarcaTplCriterios(k); });
  listen('evTipo', 'change', ()=>{ premarcaTplCriterios($('evTpl')?$('evTpl').value:''); });

  async function saveEvidence(){
    const c = ctx();
    if(!ctxOk(c)){ if($('evModalMsg')) $('evModalMsg').innerHTML = '<span class="err">Falta rellenar los datos de la materia nel contestu.</span>'; return; }
    const titulo = $('evTitulo') ? $('evTitulo').value.trim() : '';
    if(!titulo){ if($('evModalMsg')) $('evModalMsg').innerHTML = '<span class="err">Falta\'l títulu principal.</span>'; return; }
    const box = $('evCriteriosBox');
    const critIds = box ? Array.from(box.querySelectorAll('.chip.on')).map(x=>parseInt(x.dataset.id,10)) : [];
    if(critIds.length<1){ if($('evModalMsg')) $('evModalMsg').innerHTML = '<span class="err">Rique siquier un criteriu activu.</span>'; return; }
    
    const payload = {
      curso: c.curso, trimestre: c.trimestre, nivel: c.nivel, materia: c.materia, grupo: c.grupo || null,
      fecha: $('evFecha') ? $('evFecha').value : '', titulo, tipo: ($('evTipo') ? $('evTipo').value : '') || null,
      sda: ($('evSda') ? $('evSda').value.trim() : '') || null,
      instrumento_id: ($('evInstr') && $('evInstr').value) ? parseInt($('evInstr').value,10) : null,
      notas: ($('evNotas') ? $('evNotas').value.trim() : '') || null, criterio_ids: critIds
    };
    
    if($('evModalMsg')) $('evModalMsg').textContent='Guardando…';
    try{
      const editId = $('evSave') ? $('evSave').dataset.editid : null;
      const url = editId ? `/evidencias/${editId}` : '/evidencias';
      const method = editId ? 'PUT' : 'POST';
      await api(url, {method: method, body: JSON.stringify(payload)});
      if($('evSave')) delete $('evSave').dataset.editid;
      closeModal();
      await refreshEval();
    }catch(e){ if($('evModalMsg')) $('evModalMsg').innerHTML = '<span class="err">Error: '+(e.message||e)+'</span>'; }
  }
  listen('evSave', 'click', saveEvidence);

  // --- LÓXICA PA CLONAR EVIDENCIES ---
  function openCloneModal() {
      const c = ctx();
      if(!ctxOk(c)) { alert('Llena la barra de contestu primero (nivel y materia).'); return; }
      
      const sel = $('cloneEvOrigen');
      if(!sel) return;
      sel.innerHTML = '<option value="">— Escueye un trimestre —</option>';
      [1, 2, 3].forEach(t => {
          if(t !== c.trimestre) {
              const opt = document.createElement('option');
              opt.value = t; opt.textContent = `${t}º Trimestre`;
              sel.appendChild(opt);
          }
      });
      if($('cloneEvMsg')) $('cloneEvMsg').textContent = '';
      if($('cloneEvWrap')) $('cloneEvWrap').classList.add('show');
  }
  
  listen('evCloneOpenBtn', 'click', openCloneModal);
  listen('cloneEvClose', 'click', () => { if($('cloneEvWrap')) $('cloneEvWrap').classList.remove('show'); });
  listen('cloneEvCancel', 'click', () => { if($('cloneEvWrap')) $('cloneEvWrap').classList.remove('show'); });

  listen('cloneEvSave', 'click', async () => {
      const c = ctx();
      const origen = $('cloneEvOrigen') ? parseInt($('cloneEvOrigen').value, 10) : 0;
      if(!origen) { if($('cloneEvMsg')) $('cloneEvMsg').innerHTML = '<span class="err">Escueye el trimestre orixe.</span>'; return; }
      
      if($('cloneEvMsg')) $('cloneEvMsg').textContent = 'Clonando estructures...';
      try {
          const payload = {
              curso: c.curso, nivel: c.nivel, materia: c.materia, grupo: c.grupo || null,
              origen_trimestre: origen, destino_trimestre: c.trimestre
          };
          const res = await api('/evidencias/clonar', {method: 'POST', body: JSON.stringify(payload)});
          if($('cloneEvWrap')) $('cloneEvWrap').classList.remove('show');
          
          let alertMsg = `¡Llisto! Clonáronse ${res.clonadas} evidencies nueves al ${c.trimestre}T.`;
          if (res.inoraes > 0) alertMsg += `\n(Inoráronse ${res.inoraes} que yá taben nesti trimestre).`;
          alert(alertMsg);
          
          await refreshEval();
      } catch(e) {
          if($('cloneEvMsg')) $('cloneEvMsg').innerHTML = `<span class="err">Error: ${e.message||e}</span>`;
      }
  });

  let evSortCol = null;
  let evSortDir = 1;

  document.querySelectorAll('#tab-evidencias th.sortable').forEach(th => {
    th.addEventListener('click', () => {
      const col = th.dataset.sort;
      if (evSortCol === col) { evSortDir = evSortDir === 1 ? -1 : 1; } 
      else { evSortCol = col; evSortDir = 1; }
      renderEvTbody();
    });
  });

  function renderEvTbody() {
      const tb = $('evTbody'); 
      if(!tb) return;
      tb.innerHTML = '';
      
      let list = [...(window.__evRows || [])];
      
      if (evSortCol) {
          list.sort((a, b) => {
              let valA = a[evSortCol] || '';
              let valB = b[evSortCol] || '';
              if (evSortCol === 'notes') {
                  valA = a.notes || a.notas || '';
                  valB = b.notes || b.notas || '';
              }
              if (typeof valA === 'string' && typeof valB === 'string') {
                  return valA.localeCompare(valB, 'ast') * evSortDir;
              }
              return (valA < valB ? -1 : (valA > valB ? 1 : 0)) * evSortDir;
          });
      }
      
      document.querySelectorAll('#tab-evidencias th.sortable').forEach(th => {
          const span = th.querySelector('span');
          if(span) span.textContent = (th.dataset.sort === evSortCol) ? (evSortDir === 1 ? '▲' : '▼') : '';
      });

      for(const r of list){
          let critsArray = r.criterios || [];
          if(!critsArray.length && r.criterio_ids && r.criterio_ids.length > 0){
              critsArray = r.criterio_ids.map(cid => criteriosCache.find(crit=>crit.id===cid)).filter(Boolean);
              r.criterios = critsArray; 
          }

          const tr = document.createElement('tr');
          
          const critsHtml = critsArray.map(x => {
              const fullCrit = criteriosCache.find(c => c.id === x.id) || x;
              const desc = (fullCrit.descripcion || 'Ensin descripción').replaceAll('"', '&quot;').replaceAll('<', '&lt;');
              return `<span class="pill" title="${desc}" style="margin-right:4px; font-weight:bold; font-family:var(--mono); background:#dcfce7; color:#065f46; border-color:#a7f3d0; cursor:help; text-decoration:underline dotted #a7f3d0;">${x.codigo}</span>`;
          }).join('');
          
          const sdaPill = r.sda ? `<div style="margin-top:4px;"><span class="pill" style="background:#fee2e2; color:#991b1b; border-color:#fca5a5; font-weight:bold; font-size:10px;">${(r.sda||'').replaceAll('<','&lt;')}</span></div>` : '';
          const evObsRaw = (r.notes || r.notas || '').trim();
          const evObs = evObsRaw.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('\\n', '<br>');

          tr.innerHTML = `
            <td style="font-family:var(--mono); color:var(--muted);">${r.fecha||''}</td>
            <td style="font-weight:600; color:#111827">${(r.titulo||'').replaceAll('<','&lt;')}${sdaPill}</td>
            <td class="muted">${r.tipo||'—'}</td>
            <td style="max-width:320px; white-space:normal; line-height:1.35;" title="${evObsRaw.replaceAll('&', '&amp;').replaceAll('"', '&quot;').replaceAll('<','&lt;')}">${evObs || '<span class="muted">—</span>'}</td>
            <td>${critsHtml || '<span class="muted">—</span>'}</td>
            <td style="display:flex; justify-content:flex-end; gap:6px; flex-wrap:wrap; border-bottom:none;">
              <button class="btn primary" style="padding:4px 12px; font-size:12px;" data-evval="1" data-evid="${r.id}">VALORAR</button>
              <button class="btn ghost" style="padding:4px 12px; font-size:12px; border:1px solid #bfdbfe; color:#0369a1; background:#eff6ff; font-weight:700;" data-evresults="1" data-evid="${r.id}">RESULTAOS</button>
              <button class="btn ghost" data-evedit="${r.id}" title="Editar">✏️</button>
              <button class="btn ghost" data-evdel="${r.id}" title="Borrar">🗑️</button>
            </td>`;
          tb.appendChild(tr);
      }
      
      tb.querySelectorAll('button[data-evval="1"]').forEach(btn=>{
          btn.addEventListener('click', ()=>{
            const id = parseInt(btn.getAttribute('data-evid'),10);
            const row = (window.__evRows||[]).find(x=>x.id===id);
            if(row) openValorar(row, null, {returnToEvidenceResults:false});
          });
      });

      tb.querySelectorAll('button[data-evresults="1"]').forEach(btn=>{
          btn.addEventListener('click', async ()=>{
            const id = parseInt(btn.getAttribute('data-evid'),10);
            const row = (window.__evRows||[]).find(x=>x.id===id);
            if(row) await openEvidenceResults(row);
          });
      });

      tb.querySelectorAll('button[data-evdel]').forEach(btn => {
          btn.addEventListener('click', async () => {
            if(confirm('¿Daveres quies borrar esta evidencia y toles sos notes acomuñaes?')) {
              const id = parseInt(btn.dataset.evdel, 10);
              try { await api(`/evidencias/${id}`, {method: 'DELETE'}); if($('evState')) $('evState').innerHTML = '<span class="ok">Evidencia borrada dafechu.</span>'; await refreshEval(); } 
              catch(err) { if($('evState')) $('evState').innerHTML = `<span class="err">Error: ${err.message||err}</span>`; }
            }
          });
      });

      tb.querySelectorAll('button[data-evedit]').forEach(btn => {
          btn.addEventListener('click', () => {
            const id = parseInt(btn.dataset.evedit, 10); const row = (window.__evRows||[]).find(x=>x.id===id);
            if(row) {
               openModal();
               if($('evFecha')) $('evFecha').value = row.fecha || ''; 
               if($('evTitulo')) $('evTitulo').value = row.titulo || ''; 
               if($('evTipo')) $('evTipo').value = row.tipo || '';
               if($('evSda')) $('evSda').value = row.sda || '';
               if($('evInstr')) $('evInstr').value = row.instrumento_id || ''; 
               if($('evNotas')) $('evNotas').value = row.notes || row.notas || '';
               const box = $('evCriteriosBox');
               if(box) {
                 box.querySelectorAll('.chip').forEach(ch => {
                    if (row.criterio_ids.includes(parseInt(ch.dataset.id, 10))) { ch.classList.add('on'); } else { ch.classList.remove('on'); }
                 });
               }
               if($('evSave')) $('evSave').dataset.editid = id;
               if($('evModalMsg')) $('evModalMsg').innerHTML = `<span class="muted">Editando...</span>`;
            }
          });
      });
  }

  async function loadAndShowGroupStats(c) {
      try {
          const qs = new URLSearchParams({curso:c.curso, trimestre:String(c.trimestre), nivel:c.nivel, materia:c.materia});
          if(c.sda) qs.set('sda', c.sda);
          const d = await api('/estadistiques/comparativa?' + qs.toString());
          
          const cont = $('dashGroupStats');
          if(!cont) return;
          
          if(!d.grupos || d.grupos.length === 0) {
              cont.innerHTML = '<div class="muted" style="font-size:12px;">Ensin datos abondo pa comparar.</div>';
              if($('dashGroupStatsContainer')) $('dashGroupStatsContainer').style.display = 'block';
              return;
          }
          
          let html = '';
          for(const g of d.grupos) {
              const tot = g.evaluaos;
              const dist = g.dist;
              const p1 = (dist.insuficiente / tot) * 100;
              const p2 = (dist.suficiente / tot) * 100;
              const p3 = (dist.notable / tot) * 100;
              const p4 = (dist.sobresaliente / tot) * 100;
              
              html += `
              <div class="group-stat-row">
                  <div class="group-stat-header">
                      <span>${g.grupo} <span class="muted" style="font-weight:normal; margin-left:6px;">(${tot} est.)</span></span>
                      <span>Media: <span style="color:var(--c-azul);">${g.media.toFixed(2)}</span></span>
                  </div>
                  <div class="stacked-bar-wrap">
                      <div class="stacked-segment" style="width:${p1}%; background:var(--c-roxu);" title="Insuficiente (<5): ${dist.insuficiente} est.">${dist.insuficiente>0?dist.insuficiente:''}</div>
                      <div class="stacked-segment" style="width:${p2}%; background:var(--c-naranxa);" title="Suficiente/Bien (5-6.9): ${dist.suficiente} est.">${dist.suficiente>0?dist.suficiente:''}</div>
                      <div class="stacked-segment" style="width:${p3}%; background:var(--c-azul);" title="Notable (7-8.9): ${dist.notable} est.">${dist.notable>0?dist.notable:''}</div>
                      <div class="stacked-segment" style="width:${p4}%; background:var(--c-verde);" title="Sobresaliente (>=9): ${dist.sobresaliente} est.">${dist.sobresaliente>0?dist.sobresaliente:''}</div>
                  </div>
              </div>`;
          }
          cont.innerHTML = html;
          if($('dashGroupStatsContainer')) $('dashGroupStatsContainer').style.display = 'block';
      } catch(e) {}
  }

  async function refreshEval(){
    if(!criteriosCache.length){ await loadCriterios(); }
    await loadInstrumentos();
    await loadTplCatalog();
    renderTpl();

    const c = ctx();
    if(!ctxOk(c)){
      if($('evState')) $('evState').innerHTML = '';
      if($('panelEmptyMsg')) $('panelEmptyMsg').style.display = 'block';
      if($('evEmptyMsg')) $('evEmptyMsg').style.display = 'block';
      if($('notesEmptyMsg')) $('notesEmptyMsg').style.display = 'block';
      if($('dashTrimestre')) $('dashTrimestre').style.display = 'none';
      if($('dashSemaforo')) $('dashSemaforo').style.display = 'none';
      if($('table-evidencias-wrap')) $('table-evidencias-wrap').style.display = 'none';
      if($('table-notes-wrap')) $('table-notes-wrap').style.display = 'none';
      if($('evTbody')) $('evTbody').innerHTML = '';
      if($('panelEmptyMsg')) {
         $('panelEmptyMsg').style.opacity = '0.5';
         setTimeout(() => $('panelEmptyMsg').style.opacity = '1', 150);
      }
      return;
    }
    
    if($('panelEmptyMsg')) $('panelEmptyMsg').style.display = 'none';
    if($('evEmptyMsg')) $('evEmptyMsg').style.display = 'none';

    if($('evState')) $('evState').innerHTML = '<i>Cargando datos...</i>';
    try{
      const allRows = await syncSdaDropdowns(c);
      
      const sdaFilter = $('evSdaFilter');
      const activeSda = sdaFilter ? sdaFilter.value : '';
      const rows = activeSda ? allRows.filter(r => (r.sda||'').trim() === activeSda) : allRows;
      
      window.__evRows = rows;
      renderEvTbody();
      
      if($('evState')) $('evState').innerHTML = `<span class="ok">Total d'evidencies asociaes: ${rows.length}</span>`;
      if($('table-evidencias-wrap')) $('table-evidencias-wrap').style.display = 'block';
      
      // -- DASHBOARD DEL TRIMESTRE (PANEL) --
      if($('dashTrimestre')) $('dashTrimestre').style.display = 'block';
      
      try {
          const qsNotes = new URLSearchParams({curso:c.curso, trimestre:String(c.trimestre), nivel:c.nivel, materia:c.materia});
          if(c.grupo) qsNotes.set('grupo', c.grupo);
          if(activeSda) qsNotes.set('sda', activeSda);
          const dNotes = await api('/notas/trimestre?'+qsNotes.toString(), {method:'GET'});
          const alus = [...(dNotes.datos || [])].sort((a,b) => {
            const np = (Number(b.nota_proyectada)||0) - (Number(a.nota_proyectada)||0);
            if(np !== 0) return np;
            const na = (Number(b.nota_acumulada)||0) - (Number(a.nota_acumulada)||0);
            if(na !== 0) return na;
            return getAlumnoDisplayName(a).localeCompare(getAlumnoDisplayName(b), 'ast');
          });
          window.__dashAlus = alus; 
          
          let sumProy = 0; let sumAcum = 0; let count = 0; let totalPeso = 0;
          const sContainer = $('dashStudents'); 
          if(sContainer) {
            sContainer.innerHTML = '';
            for(const a of alus){
                if(a.nota_acumulada > 0 || a.peso_evaluado > 0){ 
                  sumProy += a.nota_proyectada; sumAcum += a.nota_acumulada; totalPeso += a.peso_evaluado; count++; 
                }
                
                let color = 'var(--c-roxu)'; let pct = (a.nota_proyectada/10)*100;
                if(a.nota_proyectada >= 5) color = 'var(--c-naranxa)';
                if(a.nota_proyectada >= 7) color = 'var(--c-azul)';
                if(a.nota_proyectada >= 9) color = 'var(--c-verde)';
                
                const scard = document.createElement('div');
                scard.className = 'scard';
                scard.dataset.aid = a.alumno_id;
                
                const fullName = a.nome || a.alias || '';
                scard.dataset.name = fullName;
                
                const dashFotoUrl = safeMediaUrl(a.foto);
                const avatarHtml = dashFotoUrl ? `<img src="${escAttr(dashFotoUrl)}" class="avatar lg" style="border:2px solid ${color};">` : `<div class="avatar lg" style="border:2px solid ${color};">👤</div>`;

                scard.innerHTML = `
                  <div style="display:flex; flex-direction:column; align-items:center;">
                      ${avatarHtml}
                      <div class="name" title="${escAttr(fullName)}">${escHtml(fullName)}</div>
                  </div>
                  <div style="display:flex; justify-content:space-around; align-items:baseline; margin-bottom:8px;">
                    <div title="Nota proyeutada" style="font-size:18px; font-weight:bold; color:${color};">${a.nota_proyectada > 0 ? a.nota_proyectada.toFixed(2) : '-'}</div>
                    <div title="Nota acumulada (oficial)" style="font-size:12px; font-weight:bold; color:#9ca3af;">${a.nota_acumulada > 0 ? a.nota_acumulada.toFixed(2) : '-'}</div>
                  </div>
                  <div class="bar"><div class="bar-fill" style="width:${pct}%; background:${color}"></div></div>
                `;
                sContainer.appendChild(scard);
            }
          }
          
          if(count > 0){
              const mediaProy = sumProy / count; const mediaAcum = sumAcum / count; const mediaPeso = totalPeso / count;
              if($('dashMediaProy')) $('dashMediaProy').textContent = mediaProy.toFixed(2); 
              if($('dashMediaAcum')) $('dashMediaAcum').textContent = mediaAcum.toFixed(2);
              
              let mcolor = 'var(--c-roxu)';
              if(mediaProy >= 5) mcolor = 'var(--c-naranxa)'; if(mediaProy >= 7) mcolor = 'var(--c-azul)'; if(mediaProy >= 9) mcolor = 'var(--c-verde)';
              if($('dashMediaProy')) $('dashMediaProy').style.color = mcolor;
              
              if(activeSda) {
                  if($('dashEvCount')) $('dashEvCount').innerHTML = `<span style="color:#2563eb;">SdA activa: <b>${activeSda}</b></span> &nbsp;|&nbsp; <b>${rows.length}</b> evidencies asociaes`;
              } else {
                  if($('dashEvCount')) $('dashEvCount').innerHTML = `Basáu en <b>${rows.length}</b> evidencies (~${mediaPeso.toFixed(0)}% del currículu)`;
              }
          } else {
              if($('dashMediaProy')) { $('dashMediaProy').textContent = '0.00'; $('dashMediaProy').style.color = 'var(--c-verde)'; }
              if($('dashMediaAcum')) $('dashMediaAcum').textContent = '0.00'; 
              
              if(activeSda) {
                  if($('dashEvCount')) $('dashEvCount').innerHTML = `<span style="color:#2563eb;">SdA activa: <b>${activeSda}</b></span> &nbsp;|&nbsp; 0 evidencies`;
              } else {
                  if($('dashEvCount')) $('dashEvCount').textContent = `Basáu en 0 evidencies`;
              }
              
              if(sContainer) {
                 if(alus.length === 0){ sContainer.innerHTML = '<div class="muted" style="font-size:12px; padding:10px;">Ensin estudiantes nesti filtru.</div>'; } 
                 else { sContainer.innerHTML = '<div class="muted" style="font-size:12px; padding:10px;">¡Añade valoraciones a les evidencies na llingüeta d\'al llau!</div>'; }
              }
          }

          // Llamada a la comparativa de grupos
          await loadAndShowGroupStats(c);

      } catch(e) { console.error("Error cargando'l panel", e); }

      // -- SEMÁFORU D'AUDITORÍA --
      if($('dashSemaforo')) $('dashSemaforo').style.display = 'block';
      const critsCtx = criteriosDelContexto(c);
      const critCounts = {}; critsCtx.forEach(cr => critCounts[cr.id] = 0);

      rows.forEach(ev => {
        let cids = [];
        if(ev.criterios && ev.criterios.length) cids = ev.criterios.map(x=>x.id); else if(ev.criterio_ids) cids = ev.criterio_ids;
        cids.forEach(cid => { if(critCounts[cid] !== undefined) critCounts[cid]++; });
      });

      const semCont = $('semaforoChips'); 
      if(semCont) {
        semCont.innerHTML = '';
        if(critsCtx.length === 0) { semCont.innerHTML = '<span class="muted" style="font-size:12px">Currículu vacíu. Importa los criterios na so llingüeta.</span>'; } 
        else {
          critsCtx.forEach(cr => {
            const n = critCounts[cr.id] || 0;
            let cls = 'cb-0'; if(n === 1) cls = 'cb-1'; if(n >= 2) cls = 'cb-2';
            const b = document.createElement('div');
            b.className = `crit-badge ${cls}`; b.title = `${cr.descripcion}`; b.innerHTML = `<span>${cr.codigo}</span> <span style="background:rgba(255,255,255,0.4); padding:2px 6px; border-radius:6px; margin-left:6px; font-size:10px;">${n}</span>`;
            semCont.appendChild(b);
          });
        }
      }

    }catch(e){
      if($('evState')) $('evState').innerHTML = '<span class="err">Error internu: '+(e.message||e)+'</span>';
      if($('evTbody')) $('evTbody').innerHTML='';
    }
  }

  // ===== VALORACIÓN (Precarga + Guardáu + Drag&Drop) =====
  var _valEv = null;
  let _valSingleAlumno = null;
  let _valReturnToEvidenceResults = null;
  let _aluEvalCtx = null;
  let _aluEvalAlumno = null;
  let currentOrderPref = { mode: 'alpha', dir: 1 };

  function closeValorar(resetReturn=true){ const w = $('valWrap'); if(w) w.classList.remove('show'); _valEv = null; _valSingleAlumno = null; if(resetReturn) _valReturnToEvidenceResults = null; }
  function closeAlumnoEvalModal(){ const w = $('aluEvalWrap'); if(w) w.classList.remove('show'); _aluEvalCtx = null; _aluEvalAlumno = null; }

  async function openValorar(evRow, focusAlumno=null, opts=null){
    if(window.__isClosed) {
       alert("🔒 Esti trimestre ta zarráu y conxeláu. Desblóquialu na llingüeta de calificaciones pa camudar les notes.");
       return;
    }
    _valEv = evRow; _valSingleAlumno = focusAlumno || null; _valReturnToEvidenceResults = (opts && opts.returnToEvidenceResults) ? evRow : null; const w = $('valWrap'); if(!w) return;
    if($('valMsg')) $('valMsg').textContent = 'Cargando llista dende la nube...'; 
    const focusTxt = _valSingleAlumno ? ` &nbsp;|&nbsp; <span style="color:#0369a1; font-weight:700;">Evaluación individual: ${escHtml(getAlumnoDisplayName(_valSingleAlumno))}</span>` : '';
    if($('valInfo')) $('valInfo').innerHTML = `<span style="color:var(--primary); font-weight:600;">${escHtml(evRow.titulo||'')}</span> &nbsp;|&nbsp; ${escHtml(evRow.fecha||'')}${focusTxt}`;
    if($('valSub')) $('valSub').innerHTML = _valSingleAlumno ? 'Marca niveles 1–4 namás pa esti estudiante. Al reabrir, precárgase lo guardao.' : 'Marca niveles 1–4 por estudiante y criteriu. Al reabrir, se precarga lo guardao.';
    w.classList.add('show');
    
    const c = ctx();
    try {
        currentOrderPref = await loadValOrderPref(c);
    } catch(e) { 
        currentOrderPref = { mode: 'alpha', dir: 1 }; 
    }

    try { await buildValTable(evRow); } 
    catch(err) { if($('valMsg')) $('valMsg').innerHTML = '<span class="err">Error de DB: '+(err.message||err)+'</span>'; }
  }

  async function buildValTable(evRow){
    const c = ctx();
    if(!ctxOk(c)) throw new Error('Contestu baleru.');
    if(!alumnosCache.length){ const a = await api('/alumnos'); alumnosCache = a.datos || []; }
    let alumnos = alumnosCache.filter(x => x.activo==1 && x.nivel===c.nivel && x.materia===c.materia && (!c.grupo || (x.grupo||'')===c.grupo));
    if(_valSingleAlumno && _valSingleAlumno.id){
      alumnos = alumnos.filter(x => Number(x.id) === Number(_valSingleAlumno.id));
    }
    
    // IGUA v0.19.19: Algoritmu d'orde basáu nos apellíos (nombre) primero
    const getSortName = (a) => {
        let n = '';
        if (a.nombre) n += a.nombre.toLowerCase() + ', ';
        n += (a.alias || a.nome || '').toLowerCase();
        return n.trim();
    };

    if (currentOrderPref.mode === 'alpha') {
        const d = currentOrderPref.dir || 1;
        alumnos.sort((a, b) => getSortName(a).localeCompare(getSortName(b), 'ast') * d);
    } else if (currentOrderPref.mode === 'manual' && currentOrderPref.ids) {
        alumnos.sort((a, b) => {
            let idxA = currentOrderPref.ids.indexOf(a.id);
            let idxB = currentOrderPref.ids.indexOf(b.id);
            if(idxA === -1) idxA = 99999;
            if(idxB === -1) idxB = 99999;
            if(idxA !== idxB) return idxA - idxB;
            return getSortName(a).localeCompare(getSortName(b), 'ast');
        });
    }

    let criteriosData = evRow.criterios || [];
    if(!criteriosData.length && evRow.criterio_ids && evRow.criterio_ids.length > 0){ criteriosData = evRow.criterio_ids.map(cid => criteriosCache.find(crit=>crit.id===cid)).filter(Boolean); }

    const criterios = criteriosData.map(x => ({id:x.id, codigo:x.codigo}));
    if(!criterios.length) throw new Error('Evidencia ensin criterios rexistraos.');

    let existing = [];
    try{ const d = await api(`/evidencias/${evRow.id}/valoraciones`); existing = d.datos || []; }catch(_){ existing = []; }
    const map = new Map();
    for(const r of existing){ map.set(r.alumno_id + '|' + r.criterio_id, r.nivel_1_4); }

    const thsHtml = criterios.map(cr => {
        const fullCrit = criteriosCache.find(x => x.id === cr.id) || cr;
        const desc = escAttr(fullCrit.descripcion || 'Ensin descripción');
        return `<th style="text-align:center; background:#fafafa;"><span class="pill" title="${desc}" style="font-weight:bold; color:#111827; cursor:help; text-decoration:underline dotted #9ca3af;">${escHtml(cr.codigo)}</span></th>`;
    }).join('');

    let sortIcon = '';
    if(currentOrderPref.mode === 'alpha') {
        sortIcon = currentOrderPref.dir === 1 ? '▲' : '▼';
    }

    if($('valThead')) {
        $('valThead').innerHTML = `<tr>
            <th class="val-sortable" style="padding-left:24px; background:#fafafa; z-index:11; cursor:pointer; user-select:none; white-space:nowrap;" title="Calca pa ordenar por apellíu">Estudiante <span id="valSortSpan" style="font-size:10px; color:#059669; margin-left:4px; display:inline-block; width:12px;">${sortIcon}</span></th>
            ${thsHtml}
            <th style="padding-right:24px; background:#fafafa;"></th>
        </tr>`;

        const thEst = $('valThead').querySelector('.val-sortable');
        if(thEst) {
            thEst.addEventListener('click', async () => {
                if (currentOrderPref.mode === 'alpha' && currentOrderPref.dir === 1) {
                    currentOrderPref = { mode: 'alpha', dir: -1 };
                } else {
                    currentOrderPref = { mode: 'alpha', dir: 1 };
                }
                buildValTable(evRow);
                
                if($('valMsg')) $('valMsg').innerHTML = '<span class="muted">Afuxendo l\'orde na nube...</span>';
                try { 
                    await saveValOrderPref(c, currentOrderPref); 
                    if($('valMsg')) $('valMsg').innerHTML = '<span class="ok">¡Orde afitáu correchamente!</span>';
                } catch(e){
                    if($('valMsg')) $('valMsg').innerHTML = '<span class="err">Fallu al guardar l\'orde.</span>';
                }
            });
        }
    }
    
    const tb = $('valTbody'); 
    if(!tb) return;
    tb.innerHTML = '';
    for(const al of alumnos){
      const tr = document.createElement('tr');
      tr.draggable = true;
      tr.className = 'val-drag-row';
      tr.dataset.aid = al.id;
      tr.style.background = '#fff';

      let g = al.grupo || ''; if (g === 'SINGRUPU' || g === al.nivel) g = '';
      
      let fullName = al.alias || al.nome || '';
      if (al.nombre) fullName = `${al.nombre}, ${al.alias}`;

      const fotoUrl = safeMediaUrl(al.foto);
      const avatarHtml = fotoUrl ? `<img src="${escAttr(fotoUrl)}" class="avatar" style="width:24px; height:24px;">` : `<div class="avatar" style="width:24px; height:24px; font-size:11px;">👤</div>`;

      let rowHtml = `<td style="padding-left:24px; font-weight:500;">
          <div style="display:flex; align-items:center; gap:8px;">
            <span title="Arrastra p'ordenar" style="color:#d1d5db; font-size:16px; cursor:grab; padding-right:4px; user-select:none;">☰</span>
            ${avatarHtml}
            <div>${escHtml(fullName)}<div class="muted" style="font-size:11px">${escHtml(g)}</div></div>
          </div>
        </td>`;
      for(const cr of criterios){
        const key = al.id + '|' + cr.id; const v = map.get(key) || '';
        rowHtml += `<td style="text-align:center">
          <select class="input" data-val="1" data-aid="${al.id}" data-cid="${cr.id}" style="padding:10px; width:70px; text-align:center; font-weight:bold;">
            <option value="">-</option>
            <option value="1"${v==1?' selected':''} style="color:var(--c-roxu)">1</option>
            <option value="2"${v==2?' selected':''} style="color:var(--c-naranxa)">2</option>
            <option value="3"${v==3?' selected':''} style="color:var(--c-azul)">3</option>
            <option value="4"${v==4?' selected':''} style="color:var(--c-verde)">4</option>
          </select>
        </td>`;
      }
      rowHtml += '<td style="padding-right:24px;"></td>';
      tr.innerHTML = rowHtml; tb.appendChild(tr);
    }
    if($('valMsg')) $('valMsg').innerHTML = `<span class="muted">Llistáu preparáu pa evaluar a ${alumnos.length} ${alumnos.length===1?'estudiante':'estudiantes'}.</span>`;
  }

  async function openAlumnoEvalModal(alumno){
    const cEval = buildEvalCtxForAlumno(alumno);
    if(!ctxOk(cEval)) {
      alert(`Falta escoyer al menos cursu/trimestre y disponer d'un contestu válidu pa esti estudiante.`);
      return;
    }
    _aluEvalAlumno = alumno;
    _aluEvalCtx = cEval;
    const w = $('aluEvalWrap');
    if(!w) return;
    const grupoTxt = cEval.grupo ? ` · ${escHtml(cEval.grupo)}` : '';
    if($('aluEvalInfo')) $('aluEvalInfo').innerHTML = `<span style="font-weight:700; color:#0369a1;">${escHtml(getAlumnoDisplayName(alumno))}</span> &nbsp;|&nbsp; ${escHtml(cEval.nivel)} · ${escHtml(cEval.materia)}${grupoTxt} &nbsp;|&nbsp; ${escHtml(String(cEval.trimestre))}T ${escHtml(cEval.curso)}`;
    if($('aluEvalSub')) $('aluEvalSub').innerHTML = cEval.sda ? `Escueye una evidencia de la SdA <b>${escHtml(cEval.sda)}</b> pa valorar solo esti estudiante.` : 'Escueye una evidencia del so contestu actual pa valorar solo esti estudiante.';
    if($('aluEvalMsg')) $('aluEvalMsg').innerHTML = '<span class="muted">Cargando evidencies del contestu…</span>';
    if($('aluEvalTbody')) $('aluEvalTbody').innerHTML = '';
    w.classList.add('show');
    try {
      const qs = new URLSearchParams({curso:cEval.curso, trimestre:String(cEval.trimestre), nivel:cEval.nivel, materia:cEval.materia});
      const d = await api('/evidencias?' + qs.toString());
      let rows = Array.isArray(d.datos) ? d.datos.slice() : [];
      rows = rows.filter((row) => evidenciaValidaPalAlumno(row, cEval));
      rows.sort((a,b) => {
        const aGrupo = grupuCanonicu(a && a.grupo, a && a.nivel);
        const bGrupo = grupuCanonicu(b && b.grupo, b && b.nivel);
        const aSda = sdaCanonicu(a && a.sda);
        const bSda = sdaCanonicu(b && b.sda);
        const alGrupo = grupuCanonicu(cEval.grupo || '', cEval.nivel || '');
        const alSda = sdaCanonicu(cEval.sda || '');
        const aScore = (aGrupo && aGrupo === alGrupo ? 2 : 0) + (aSda && aSda === alSda ? 1 : 0);
        const bScore = (bGrupo && bGrupo === alGrupo ? 2 : 0) + (bSda && bSda === alSda ? 1 : 0);
        if(bScore !== aScore) return bScore - aScore;
        const da = String(a && a.fecha || '');
        const db = String(b && b.fecha || '');
        if(da !== db) return db.localeCompare(da);
        return Number(b && b.id || 0) - Number(a && a.id || 0);
      });
      const tb = $('aluEvalTbody');
      if(!tb) return;
      tb.innerHTML = '';
      if(rows.length === 0){
        tb.innerHTML = `<tr><td colspan="5" class="muted" style="padding:18px 24px;">Nun hai evidencies pal contestu d'esti estudiante.</td></tr>`;
        if($('aluEvalMsg')) $('aluEvalMsg').innerHTML = '<span class="muted">Ensin evidencies disponibles.</span>';
        return;
      }
      rows.forEach((row) => {
        const critCount = (row.criterios && row.criterios.length) ? row.criterios.length : ((row.criterio_ids && row.criterio_ids.length) ? row.criterio_ids.length : 0);
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td style="padding-left:24px; font-weight:600; color:#111827;">${escHtml(row.titulo || 'Evidencia ensin títulu')}</td>
          <td class="muted">${escHtml(row.fecha || '—')}</td>
          <td class="muted">${escHtml(row.sda || '—')}</td>
          <td style="text-align:center;"><span class="pill" style="font-weight:700;">${critCount}</span></td>
          <td style="text-align:right; padding-right:24px;">
            <button class="btn ghost btn-alu-eval-open" data-evid="${Number(row.id)||0}" style="border-color:#bae6fd; color:#0369a1; background:#f0f9ff; font-weight:700;">Evaluar</button>
          </td>`;
        tb.appendChild(tr);
      });
      tb.querySelectorAll('.btn-alu-eval-open').forEach((btn) => {
        btn.addEventListener('click', async () => {
          const evidId = parseInt(btn.dataset.evid, 10);
          const row = rows.find(x => Number(x.id) === evidId);
          if(!row) return;
          closeAlumnoEvalModal();
          await openValorar(row, _aluEvalAlumno || alumno, {returnToEvidenceResults:false});
        });
      });
      if($('aluEvalMsg')) $('aluEvalMsg').innerHTML = `<span class="ok">${rows.length} evidencies disponibles pa esti estudiante.</span>`;
    } catch(e) {
      if($('aluEvalMsg')) $('aluEvalMsg').innerHTML = `<span class="err">Error: ${escHtml(e.message||e)}</span>`;
    }
  }

  listen('aluEvalClose', 'click', closeAlumnoEvalModal);
  listen('aluEvalCancel', 'click', closeAlumnoEvalModal);

  listen('valClose', 'click', closeValorar);
  listen('valCancel', 'click', closeValorar);

  listen('valSave', 'click', async ()=>{
    if(!_valEv) return;
    if($('valMsg')) $('valMsg').textContent = 'Guardando nel sirvidor…';
    const sels = Array.from(document.querySelectorAll('select[data-val="1"]'));
    const ratings = [];
    for(const s of sels){
      ratings.push({
        alumno_id: parseInt(s.dataset.aid,10),
        criterio_id: parseInt(s.dataset.cid,10),
        nivel_1_4: s.value ? parseInt(s.value,10) : null
      });
    }
    try{
      await api(`/evidencias/${_valEv.id}/valorar`, {method:'POST', body: JSON.stringify({ratings})});
      const notesWasActive = !!(tabs && tabs.calificaciones && tabs.calificaciones.classList.contains('active'));
      const returnEvidenceRow = _valReturnToEvidenceResults;
      await refreshEval();
      closeValorar(false);
      if(returnEvidenceRow){
        await openEvidenceResults(returnEvidenceRow);
      } else if(notesWasActive){
        await loadAndShowNotesTab();
      }
      _valReturnToEvidenceResults = null;
    }catch(e){ if($('valMsg')) $('valMsg').innerHTML = '<span class="err">Error: '+(e.message||e)+'</span>'; }
  });

  // Eventos globales Drag & Drop pa ordenar estudiantes nel modal (añadíos una vegada al arrincar)
  const sc = $('valScrollWrap');
  const valTb = $('valTbody');
  let valDragSrcEl = null;
  let dragScrollInt = null;
  let dragScrollStep = 0;
  
  function doAutoScroll() {
      if(sc && dragScrollStep !== 0) sc.scrollTop += dragScrollStep;
  }

  if(sc && valTb) {
      valTb.addEventListener('dragstart', (e) => {
          const tr = e.target.closest('tr.val-drag-row');
          if(!tr) return;
          valDragSrcEl = tr;
          e.dataTransfer.effectAllowed = 'move';
          e.dataTransfer.setData('text/plain', tr.dataset.aid);
          setTimeout(() => { tr.style.opacity = '0.3'; tr.style.background = '#f9fafb'; }, 0);
      });
      
      sc.addEventListener('dragover', (e) => {
          e.preventDefault();
          if(!valDragSrcEl) return;
          e.dataTransfer.dropEffect = 'move';
          
          const r = sc.getBoundingClientRect();
          const th = 80; 
          if(e.clientY < r.top + th) {
              dragScrollStep = -15;
              if(!dragScrollInt) dragScrollInt = setInterval(doAutoScroll, 20);
          } else if(e.clientY > r.bottom - th) {
              dragScrollStep = 15;
              if(!dragScrollInt) dragScrollInt = setInterval(doAutoScroll, 20);
          } else {
              dragScrollStep = 0;
              if(dragScrollInt) { clearInterval(dragScrollInt); dragScrollInt = null; }
          }

          const rows = Array.from(valTb.querySelectorAll('tr.val-drag-row'));
          let closestRow = null;
          let closestDist = Infinity;
          let insertAfter = false;

          rows.forEach(row => {
              if (row === valDragSrcEl) return;
              const box = row.getBoundingClientRect();
              const offset = box.y + (box.height / 2);
              const dist = Math.abs(e.clientY - offset);
              if(dist < closestDist) {
                  closestDist = dist;
                  closestRow = row;
                  insertAfter = (e.clientY > offset);
              }
          });

          rows.forEach(r => r.classList.remove('drag-gap-top', 'drag-gap-bottom'));
          
          if(closestRow) {
              if(insertAfter) closestRow.classList.add('drag-gap-bottom');
              else closestRow.classList.add('drag-gap-top');
          }
      });
      
      sc.addEventListener('dragleave', (e) => {
          if(!sc.contains(e.relatedTarget)) {
               Array.from(valTb.querySelectorAll('tr.val-drag-row')).forEach(r => r.classList.remove('drag-gap-top', 'drag-gap-bottom'));
               dragScrollStep = 0;
               if(dragScrollInt) { clearInterval(dragScrollInt); dragScrollInt = null; }
          }
      });
      
      sc.addEventListener('drop', (e) => {
          e.preventDefault();
          dragScrollStep = 0;
          if(dragScrollInt) { clearInterval(dragScrollInt); dragScrollInt = null; }
          
          // IGUA v0.19.20: Rescatamos el nodu antes de que desapaezca l'eventu p'acutar el fallu de null
          const draggedNode = valDragSrcEl; 
          if (!draggedNode) return;

          const targetRow = sc.querySelector('tr.drag-gap-top, tr.drag-gap-bottom');
          if (targetRow && draggedNode !== targetRow) {
              if (targetRow.classList.contains('drag-gap-bottom')) {
                  targetRow.after(draggedNode);
              } else {
                  targetRow.before(draggedNode);
              }
              
              // Llimpiamos la UI síncronamente primero de la llamada API (Igua'l crash)
              Array.from(valTb.querySelectorAll('tr.val-drag-row')).forEach(row => {
                  row.classList.remove('drag-gap-top', 'drag-gap-bottom');
              });
              draggedNode.style.opacity = '1'; 
              draggedNode.style.background = '#fff';
              valDragSrcEl = null;
              
              const span = $('valSortSpan');
              if(span) span.textContent = '';
              if($('valMsg')) $('valMsg').innerHTML = '<span class="muted">Afuxendo cambéu d\'orde na nube...</span>';
              
              const c = ctx();
              const newOrder = Array.from(valTb.querySelectorAll('tr.val-drag-row')).map(row => parseInt(row.dataset.aid, 10));
              currentOrderPref = { mode: 'manual', ids: newOrder };
              
              // Llamada ininterrumpida al fondu (Background execution ensin bloquiar la UI)
              saveValOrderPref(c, currentOrderPref)
              .then(() => { if($('valMsg')) $('valMsg').innerHTML = '<span class="ok">¡Orde guardáu de miente segura!</span>'; })
              .catch(() => { if($('valMsg')) $('valMsg').innerHTML = '<span class="err">Fallu al guardar nel sirvidor.</span>'; });

          } else {
              Array.from(valTb.querySelectorAll('tr.val-drag-row')).forEach(row => {
                  row.classList.remove('drag-gap-top', 'drag-gap-bottom');
              });
              draggedNode.style.opacity = '1'; 
              draggedNode.style.background = '#fff';
              valDragSrcEl = null;
          }
      });

      document.addEventListener('dragend', (e) => {
          dragScrollStep = 0;
          if(dragScrollInt) { clearInterval(dragScrollInt); dragScrollInt = null; }
          if(valDragSrcEl) { valDragSrcEl.style.opacity = '1'; valDragSrcEl.style.background = '#fff'; }
          Array.from(valTb.querySelectorAll('tr.val-drag-row')).forEach(row => {
              row.classList.remove('drag-gap-top', 'drag-gap-bottom');
          });
          valDragSrcEl = null;
      });
  }


  // ===== INFORME DE TRAZABILIDÁ DEL CONTESTU =====
  let currentContextPrintData = null;

  function escHtml(v){
    return String(v == null ? '' : v)
      .replaceAll('&', '&amp;')
      .replaceAll('<', '&lt;')
      .replaceAll('>', '&gt;')
      .replaceAll('"', '&quot;');
  }

  function fmt2(v){
    const n = Number(v);
    return Number.isFinite(n) ? n.toFixed(2) : '—';
  }

  function getEvidenceCriterionIds(ev){
    if(Array.isArray(ev && ev.criterio_ids) && ev.criterio_ids.length) return ev.criterio_ids.map(x => Number(x)).filter(Number.isFinite);
    if(Array.isArray(ev && ev.criterios) && ev.criterios.length){
      return ev.criterios.map(x => Number(x && x.id)).filter(Number.isFinite);
    }
    return [];
  }

  async function buildContextPrintData(){
    const c = ctx();
    if(!ctxOk(c)) throw new Error("Escueye primero cursu, trimestre, nivel y materia.");
    if(!criteriosCache.length) await loadCriterios();

    const qs = new URLSearchParams({curso:c.curso, trimestre:String(c.trimestre), nivel:c.nivel, materia:c.materia});
    if(c.grupo) qs.set('grupo', c.grupo);
    if(c.sda) qs.set('sda', c.sda);

    const [dEv, dNotes] = await Promise.all([
      api('/evidencias?' + qs.toString(), {method:'GET'}),
      api('/notas/trimestre?' + qs.toString(), {method:'GET'})
    ]);

    const evids = Array.isArray(dEv && dEv.datos) ? dEv.datos : [];
    const notes = Array.isArray(dNotes && dNotes.datos) ? dNotes.datos.map(r => withCtxNivelData(r, c.nivel, c.materia)) : [];
    const crits = (criteriosCache || []).filter(c0 => (c0.nivel||'') === c.nivel && (c0.materia||'') === c.materia && Number(c0.activo ?? 1) !== 0);

    const evByCrit = new Map();
    for(const ev of evids){
      const ids = getEvidenceCriterionIds(ev);
      for(const cid of ids){
        if(!evByCrit.has(cid)) evByCrit.set(cid, []);
        evByCrit.get(cid).push(ev);
      }
    }

    const coveredCrits = crits.filter(k => (evByCrit.get(Number(k.id)) || []).length > 0);
    const mediaProy = notes.length ? notes.reduce((s, r) => s + Number(r.nota_proyectada || 0), 0) / notes.length : 0;
    const mediaAcum = notes.length ? notes.reduce((s, r) => s + Number((r.nota_acumulada ?? r.nota) || 0), 0) / notes.length : 0;
    const mediaPeso = notes.length ? notes.reduce((s, r) => s + Number(r.peso_evaluado || 0), 0) / notes.length : 0;

    return {
      ctx: c,
      cerrado: !!(dNotes && dNotes.cerrado),
      generatedAt: new Date(),
      evids,
      notes,
      crits,
      coveredCrits,
      mediaProy,
      mediaAcum,
      mediaPeso,
      evByCrit
    };
  }

  function renderContextPrint(data){
    const c = data.ctx || {};
    const meta = [];
    meta.push(`<strong>Cursu:</strong> ${escHtml(c.curso || '—')}`);
    meta.push(`<strong>Trimestre:</strong> ${escHtml(String(c.trimestre || '—'))}T`);
    meta.push(`<strong>Materia:</strong> ${escHtml(c.materia || '—')}`);
    meta.push(`<strong>Nivel:</strong> ${escHtml(c.nivel || '—')}`);
    meta.push(`<strong>Grupu:</strong> ${escHtml(c.grupo || '—')}`);
    if(c.sda) meta.push(`<strong>SdA:</strong> <span style="color:#1d4ed8;">${escHtml(c.sda)}</span>`);
    meta.push(`<strong>Xeneráu:</strong> ${escHtml(data.generatedAt.toLocaleString('es-ES'))}`);
    if(data.cerrado) meta.push(`<strong>Estáu:</strong> <span style="color:#065f46;">Trimestre zarráu</span>`);
    if($('printCtxMeta')) $('printCtxMeta').innerHTML = meta.join('<br>');

    const evidCount = data.evids.length;
    const critCount = data.crits.length;
    const coveredCount = data.coveredCrits.length;
    const noteCount = data.notes.length;
    const mediaProy = fmt2(data.mediaProy);
    const mediaAcum = fmt2(data.mediaAcum);
    const mediaPeso = fmt2(data.mediaPeso);

    const resumen = [
      ['Evidencies', String(evidCount), '#111827'],
      ['Criterios cubiertos', `${coveredCount}/${critCount || 0}`, '#0369a1'],
      ['Estudiantes', String(noteCount), '#111827'],
      ['Cobertura media', `${mediaPeso}%`, '#059669']
    ];
    if($('printCtxResumen')){
      $('printCtxResumen').innerHTML = resumen.map(([label, value, color]) => `
        <div style="border:1px solid #e5e7eb; border-radius:10px; padding:9px 10px; background:#fff;">
          <div style="font-size:9.2pt; color:#6b7280; margin-bottom:2px;">${escHtml(label)}</div>
          <div style="font-size:15.5pt; font-weight:800; color:${color}; line-height:1.05;">${escHtml(value)}</div>
        </div>
      `).join('');
    }

    const intro = [
      `Esti informe recueye la trazabilidá evaluativa correspondiente al contestu didácticu seleccionáu`,
      `(${escHtml(c.curso || '—')}, ${escHtml(String(c.trimestre || '—'))}T, ${escHtml(c.nivel || '—')}, ${escHtml(c.materia || '—')}${c.grupo ? `, grupu ${escHtml(c.grupo)}` : ''}${c.sda ? `, SdA ${escHtml(c.sda)}` : ''}).`,
      `El so oxetivu ye documentar la relación ente evidencies d’aprendimientu, instrumentos, criterios trabayaos y resultaos del alumnáu nel periodu indicáu.`
    ].join(' ');
    if($('printCtxIntro')) $('printCtxIntro').innerHTML = intro;

    const uniqueInstr = [...new Set(data.evids.map(ev => (ev.instrumento_nombre || ev.instrumentu_nome || '').trim()).filter(Boolean))];
    const uniqueTipos = [...new Set(data.evids.map(ev => (ev.tipo || '').trim()).filter(Boolean))];
    const uniqueSdas = [...new Set(data.evids.map(ev => (ev.sda || '').trim()).filter(Boolean))];
    const sdaScopeTxt = c.sda
      ? `L’informe queda acutáu a la SdA <strong>${escHtml(c.sda)}</strong>.`
      : (uniqueSdas.length === 1
          ? `Nel contestu recoyíu, les evidencies rexistraes correspuenden a una única SdA: <strong>${escHtml(uniqueSdas[0])}</strong>.`
          : (uniqueSdas.length > 1
              ? `Nel contestu recoyíu apaecen <strong>${uniqueSdas.length}</strong> SdA distintes.`
              : `El contestu recoyíu nun ta acutáu a una SdA específica.`));
    const instrTxt = uniqueInstr.length
      ? `Nel desarrollu del contestu utilizáronse los siguientes instrumentos: ${escHtml(uniqueInstr.join(', '))}${uniqueTipos.length ? `. Les evidencies cubren especialmente estos tipos de productu o desempeñu: ${escHtml(uniqueTipos.join(', '))}.` : '.'}`
      : (uniqueTipos.length
          ? `Nun consten nomes d’instrumentu específicos en toles evidencies, anque sí se recoyen estos tipos de productu o desempeñu: ${escHtml(uniqueTipos.join(', '))}.`
          : `Nun consten instrumentos nin tipos específicos asociaos a les evidencies d’esti contestu.`);
    if($('printCtxInstr')) $('printCtxInstr').innerHTML = instrTxt;

    const evidIntro = evidCount
      ? `A lo llargo del contestu ${evidCount===1?`rexistróse 1 evidencia d’aprendimientu, venceyada a ${coveredCount} ${coveredCount===1?'criteriu':'criterios'} con cobertura efectiva.`:`rexistráronse ${evidCount} evidencies d’aprendimientu, venceyaes a ${coveredCount} ${coveredCount===1?'criteriu':'criterios'} con cobertura efectiva.`} ${sdaScopeTxt}`
      : `Nun hai evidencies rexistraes pal contestu activu, polo que l’informe solo puede amosar el marcu de referencia ensin conteníu evaluativu detalláu.`;
    if($('printCtxEvidIntro')) $('printCtxEvidIntro').innerHTML = evidIntro;

    const coveredCodes = data.coveredCrits.map(cr => cr.codigo).filter(Boolean);
    const critIntro = critCount
      ? `Nel contestu actual hai ${critCount===1?'1 criteriu activu':`${critCount} criterios activos`} pa la combinación nivel/materia, de los cualos ${coveredCount} yá tán activaos por evidencies rexistraes. ${coveredCodes.length ? `Los criterios con cobertura efectiva son: <strong>${escHtml(coveredCodes.join(', '))}</strong>.` : ''}`
      : `Nun hai criterios activos cargaos pa esti contestu.`;
    if($('printCtxCritIntro')) $('printCtxCritIntro').innerHTML = critIntro;

    const resultsIntro = noteCount
      ? `Los resultaos que se presenten darréu correspuenden a ${noteCount} estudiante${noteCount===1?'':'s'}. La media acumulada actual del contestu ye <strong>${mediaAcum}</strong> y la media proyeutada ye <strong>${mediaProy}</strong>, con un pesu cubiertu mediu nel cálculu del <strong>${mediaPeso}%</strong>.`
      : `Nun hai calificaciones calculaes pa esti contestu, polo que nun se puede xenerar una síntesis cuantitativa del alumnáu.`;
    if($('printCtxResultsIntro')) $('printCtxResultsIntro').innerHTML = resultsIntro;

    let valPed = '';
    if(!noteCount){
      valPed = `A la vista de los datos disponibles, esti contestu entá nun aporta información cuantitativa suficiente pa una valoración pedagóxica global. Convien completar el rexistru d’evidencies y/o les valoraciones antes de la revisión final.`;
    } else {
      const mediaA = Number(data.mediaAcum || 0);
      const mediaP = Number(data.mediaPeso || 0);
      const coveragePartial = mediaP < 99.5;
      let tone = 'un rendimientu global aceptable';
      if(mediaA >= 7.5) tone = 'un rendimientu global positivu y bastante consolidáu';
      else if(mediaA < 6) tone = 'un rendimientu global entá irregular, que precisa refuerzu y siguimientu';
      const predominant = uniqueTipos.length ? ` Predominen evidencies de tipu ${escHtml(uniqueTipos.slice(0,3).join(', '))}.` : '';
      const closure = coveragePartial
        ? ` La cobertura evaluativa sigue siendo parcial, polo que la interpretación de los datos tien de facese con prudencia hasta completar más pesu del trimestre.`
        : ` La cobertura evaluativa ye amplia, polo que la interpretación del contestu tien yá un grau altu de representatividá.`;
      valPed = `A la vista de les evidencies analizaes, el contestu amuesa ${tone}.${predominant}${closure} Como llinia de continuidá, convien revisar los criterios con menor o nula activación y comprobar que les siguientes evidencies completen de mou equilibráu la cobertura prevista.`;
    }
    if($('printCtxValPed')) $('printCtxValPed').innerHTML = valPed;

    if($('printCtxEvidTbody')){
      if(!evidCount){
        $('printCtxEvidTbody').innerHTML = `<tr><td colspan="5" style="padding:8px; border-bottom:1px solid #e5e7eb; color:#6b7280;">Nun hai evidencies pal contestu activu.</td></tr>`;
      } else {
        $('printCtxEvidTbody').innerHTML = data.evids.map(ev => {
          const cods = Array.isArray(ev.criterios) && ev.criterios.length
            ? ev.criterios.map(x => escHtml(x.codigo || '')).join(', ')
            : '—';
          const obsRaw = (ev.notes ?? ev.notas ?? '').trim();
          const obsHtml = obsRaw ? escHtml(obsRaw).replaceAll('\n', '<br>') : '—';
          const sdaHtml = ev.sda ? `<div style="margin-top:2px; color:#991b1b; font-size:9.3pt;"><strong>SdA:</strong> ${escHtml(ev.sda)}</div>` : '';
          const tipoInst = [ev.tipo || '', ev.instrumento_nombre || ev.instrumentu_nome || ''].filter(Boolean).map(escHtml).join(' · ') || '—';
          return `<tr>
            <td style="border-bottom:1px solid #e5e7eb; padding:8px;">${escHtml(ev.fecha || '—')}</td>
            <td style="border-bottom:1px solid #e5e7eb; padding:8px;"><strong>${escHtml(ev.titulo || '—')}</strong>${sdaHtml}</td>
            <td style="border-bottom:1px solid #e5e7eb; padding:8px;">${tipoInst}</td>
            <td style="border-bottom:1px solid #e5e7eb; padding:8px;">${cods}</td>
            <td style="border-bottom:1px solid #e5e7eb; padding:8px; white-space:normal; line-height:1.28;">${obsHtml}</td>
          </tr>`;
        }).join('');
      }
    }

    if($('printCtxCritTbody')){
      if(!critCount){
        $('printCtxCritTbody').innerHTML = `<tr><td colspan="4" style="padding:8px; border-bottom:1px solid #e5e7eb; color:#6b7280;">Nun hai criterios activos pa esti contestu.</td></tr>`;
      } else {
        $('printCtxCritTbody').innerHTML = data.crits.map(cr => {
          const hits = data.evByCrit.get(Number(cr.id)) || [];
          const evidNames = hits.length
            ? hits.map(ev => `${escHtml(ev.fecha || '—')} — ${escHtml(ev.titulo || '—')}`).join('<br>')
            : '<span style="color:#6b7280;">Nun activáu</span>';
          return `<tr>
            <td style="border-bottom:1px solid #e5e7eb; padding:8px;">
              <strong>${escHtml(cr.codigo || '—')}</strong>
              <div style="font-size:9.1pt; color:#6b7280; margin-top:2px;">${escHtml(cr.descripcion || '')}</div>
            </td>
            <td style="border-bottom:1px solid #e5e7eb; padding:8px; text-align:center;">${escHtml(String(cr.peso ?? '—'))}%</td>
            <td style="border-bottom:1px solid #e5e7eb; padding:8px; text-align:center;">${hits.length}</td>
            <td style="border-bottom:1px solid #e5e7eb; padding:8px;">${evidNames}</td>
          </tr>`;
        }).join('');
      }
    }

    if($('printCtxNotesTbody')){
      if(!noteCount){
        $('printCtxNotesTbody').innerHTML = `<tr><td colspan="5" style="padding:8px; border-bottom:1px solid #e5e7eb; color:#6b7280;">Nun hai calificaciones calculaes pa esti contestu.</td></tr>`;
      } else {
        $('printCtxNotesTbody').innerHTML = data.notes.map(r => {
          const nom = escHtml(r.nome || r.alias || '—');
          const grp = escHtml(r.grupo || '—');
          const nivelHtml = getNivelMateriaBadgeHtml(withCtxNivelData(r, c.nivel, c.materia), false);
          return `<tr>
            <td style="border-bottom:1px solid #e5e7eb; padding:8px;">${nom}<div style="margin-top:4px;">${nivelHtml}</div></td>
            <td style="border-bottom:1px solid #e5e7eb; padding:8px;">${grp}</td>
            <td style="border-bottom:1px solid #e5e7eb; padding:8px; text-align:center;">${fmt2(r.nota_proyectada)}</td>
            <td style="border-bottom:1px solid #e5e7eb; padding:8px; text-align:center;">${fmt2((r.nota_acumulada ?? r.nota))}</td>
            <td style="border-bottom:1px solid #e5e7eb; padding:8px; text-align:center;">${fmt2(r.peso_evaluado)}%</td>
          </tr>`;
        }).join('');
      }
    }
  }

  listen('btnPrintContexto', 'click', async () => {
    const btn = $('btnPrintContexto');
    const oldTxt = btn ? btn.textContent : '';
    if(btn){ btn.textContent = 'Preparando...'; btn.disabled = true; }
    try{
      currentContextPrintData = await buildContextPrintData();
      renderContextPrint(currentContextPrintData);
      document.body.setAttribute('data-print-target', 'contexto');
      window.print();
    }catch(e){
      alert("Fallu al preparar l'informe del contestu: " + (e.message || e));
    }finally{
      if(btn){ btn.textContent = oldTxt; btn.disabled = false; }
    }
  });

  // ===== LÓXICA D'ESPORTACIÓN MATRIZ =====
  listen('evExportMatrizBtn', 'click', async () => {
      const c = ctx();
      if(!ctxOk(c)) { alert('Llena la barra de contestu primero (nivel y materia).'); return; }
      
      const btn = $('evExportMatrizBtn');
      const originalText = btn.textContent;
      btn.textContent = 'Xenerando...';
      btn.disabled = true;
      
      try {
          const qs = new URLSearchParams({curso:c.curso, trimestre:String(c.trimestre), nivel:c.nivel, materia:c.materia});
          if(c.grupo) qs.set('grupo', c.grupo);
          if(c.sda) qs.set('sda', c.sda);
          
          const url = API_BASE + '/evidencias/exportar/matriz?' + qs.toString();
          
          // Use fetch to pass cookies automatically
          const res = await fetch(url, { credentials: 'same-origin' });
          if(!res.ok) {
              const text = await res.text();
              throw new Error(text || `HTTP ${res.status}`);
          }
          
          const blob = await res.blob();
          const downloadUrl = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = downloadUrl;
          
          const disposition = res.headers.get('Content-Disposition');
          let filename = `Llumera_Matriz_${c.nivel}_${c.materia}.csv`;
          if (disposition && disposition.indexOf('attachment') !== -1) {
              const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
              const matches = filenameRegex.exec(disposition);
              if (matches != null && matches[1]) { 
                filename = matches[1].replace(/['"]/g, '');
              }
          }
          
          a.download = filename;
          document.body.appendChild(a);
          a.click();
          a.remove();
          window.URL.revokeObjectURL(downloadUrl);
          
      } catch (e) {
          alert('Fallu al xenerar la matriz: ' + e.message);
      } finally {
          btn.textContent = originalText;
          btn.disabled = false;
      }
  });


  // ===== CALIFICACIONES OFICIALES Y TRAZABILIDÁ =====
  let _evResultsRow = null;
  let _evResultsData = null;
  let _evNoteEditState = null;
  const EVID_NOTE_AUTO_PREFIX = '[[LLUMERA_EVNOTE_AUTO]]';

  function closeEvidenceResults(){
    closeEvidenceNoteEdit();
    const w = $('evResultsWrap');
    if(w) w.classList.remove('show');
    _evResultsRow = null;
    _evResultsData = null;
  }

  function getBaseOfficialNotesQuery(c){
    const qs = new URLSearchParams({curso:c.curso, trimestre:String(c.trimestre), nivel:c.nivel, materia:c.materia});
    if(c.grupo) qs.set('grupo', c.grupo);
    return qs;
  }

  function getEvidenceTargetStudents(evRow, c){
    const nivel = String((evRow && evRow.nivel) || c.nivel || '').trim();
    const materia = String((evRow && evRow.materia) || c.materia || '').trim();
    const grupoTarget = grupuCanonicu((evRow && evRow.grupo) || c.grupo || '', nivel);
    let rows = (alumnosCache || []).filter((a) => Number(a.activo ?? 1) === 1 && String(a.nivel || '') === nivel && String(a.materia || '') === materia);
    if(grupoTarget) rows = rows.filter((a) => grupuCanonicu(a && a.grupo, a && a.nivel) === grupoTarget);
    rows.sort((a,b) => getAlumnoDisplayName(a).localeCompare(getAlumnoDisplayName(b), 'ast'));
    return rows;
  }

  function clampNum(v, min, max){
    const n = Number(v);
    if(!Number.isFinite(n)) return min;
    return Math.max(min, Math.min(max, n));
  }

  function buildEvidenceAutoFeedback(meta){
    try {
      return EVID_NOTE_AUTO_PREFIX + JSON.stringify(Object.assign({source:'manual_evidence_note'}, meta || {}));
    } catch(_) {
      return EVID_NOTE_AUTO_PREFIX + '{"source":"manual_evidence_note"}';
    }
  }

  function parseEvidenceAutoFeedback(feedback){
    if(typeof feedback !== 'string') return null;
    const txt = feedback.trim();
    if(!txt.startsWith(EVID_NOTE_AUTO_PREFIX)) return null;
    try {
      return JSON.parse(txt.slice(EVID_NOTE_AUTO_PREFIX.length)) || {source:'manual_evidence_note'};
    } catch(_) {
      return {source:'manual_evidence_note'};
    }
  }

  function decodeEvidenceBackfillCode(code, len){
    const out = new Array(len).fill(1);
    let rest = Number(code || 0);
    for(let i = len - 1; i >= 0; i -= 1){
      out[i] = 1 + (rest % 4);
      rest = Math.floor(rest / 4);
    }
    return out;
  }

  function computeEvidenceBackfillTie(sum, sqSum, minLv, maxLv, closeness, totalWeight){
    const mean = sum / totalWeight;
    const variance = Math.max(0, (sqSum / totalWeight) - (mean * mean));
    const safeMin = Number.isFinite(minLv) ? minLv : 1;
    const safeMax = Number.isFinite(maxLv) ? maxLv : 1;
    return variance * 1000 + ((safeMax - safeMin) * 10) + closeness;
  }

  function enumerateEvidenceBackfillHalf(items, targetLevelMean){
    if(!items.length) return [{sum:0, sqSum:0, closeness:0, minLv:Infinity, maxLv:-Infinity, code:0}];
    const out = [];
    function walk(idx, sum, sqSum, closeness, minLv, maxLv, code){
      if(idx >= items.length){
        out.push({sum, sqSum, closeness, minLv, maxLv, code});
        return;
      }
      const peso = Number(items[idx].peso || 0);
      for(let lv = 1; lv <= 4; lv += 1){
        const nextMin = Number.isFinite(minLv) ? Math.min(minLv, lv) : lv;
        const nextMax = Number.isFinite(maxLv) ? Math.max(maxLv, lv) : lv;
        walk(
          idx + 1,
          sum + (peso * lv),
          sqSum + (peso * lv * lv),
          closeness + Math.abs(lv - targetLevelMean),
          nextMin,
          nextMax,
          (code * 4) + (lv - 1)
        );
      }
    }
    walk(0, 0, 0, 0, Infinity, -Infinity, 0);
    return out;
  }

  function computeEvidenceBackfillPlanGreedy(searchItems, targetWeighted, targetLevelMean, mode, totalWeight){
    const eps = 1e-9;
    const randomJitter = mode === 'random';
    let levels = searchItems.map(() => clampNum(Math.round(targetLevelMean + (randomJitter ? ((Math.random() - 0.5) * 0.8) : 0)), 1, 4));

    function getState(candidate){
      let sum = 0;
      let sqSum = 0;
      let closeness = 0;
      let minLv = Infinity;
      let maxLv = -Infinity;
      for(let i = 0; i < searchItems.length; i += 1){
        const lv = Number(candidate[i] || 1);
        const peso = Number(searchItems[i].peso || 0);
        sum += peso * lv;
        sqSum += peso * lv * lv;
        closeness += Math.abs(lv - targetLevelMean);
        if(lv < minLv) minLv = lv;
        if(lv > maxLv) maxLv = lv;
      }
      return {
        levels: candidate.slice(),
        sum,
        sqSum,
        closeness,
        minLv,
        maxLv,
        diff: Math.abs(sum - targetWeighted),
        tie: computeEvidenceBackfillTie(sum, sqSum, minLv, maxLv, closeness, totalWeight)
      };
    }

    function isBetter(next, cur){
      if(next.diff < cur.diff - eps) return true;
      if(Math.abs(next.diff - cur.diff) <= eps){
        if(mode === 'random') return Math.random() < 0.5;
        if(next.tie < cur.tie - eps) return true;
      }
      return false;
    }

    let best = getState(levels);
    let improved = true;
    let guard = 0;
    while(improved && guard < (searchItems.length * 12)){
      improved = false;
      guard += 1;
      const dir = best.sum < targetWeighted ? 1 : -1;
      const order = Array.from({length:searchItems.length}, (_,i) => i);
      if(mode === 'random') order.sort(() => Math.random() - 0.5);
      let bestMove = null;
      for(const idx of order){
        const nextLv = best.levels[idx] + dir;
        if(nextLv < 1 || nextLv > 4) continue;
        const trial = best.levels.slice();
        trial[idx] = nextLv;
        const state = getState(trial);
        if(!bestMove || isBetter(state, bestMove)) bestMove = state;
      }
      if(bestMove && isBetter(bestMove, best)){
        best = bestMove;
        improved = true;
      }
    }

    return best.levels;
  }

  function computeEvidenceBackfillPlan(criterios, targetNote, mode='equal'){
    const allItems = (Array.isArray(criterios) ? criterios : []).map((cr, idx) => ({
      id: Number(cr && cr.id),
      codigo: String((cr && cr.codigo) || ''),
      descripcion: String((cr && cr.descripcion) || ''),
      peso: Number((cr && cr.peso) || 0),
      _idx: idx
    })).filter((cr) => Number(cr.id) > 0);

    const weightedItems = allItems.filter((cr) => Number.isFinite(cr.peso) && cr.peso > 0);
    if(!weightedItems.length) throw new Error('La evidencia nun tien criterios con pesu válidu pa reconstruyir la nota.');

    const totalWeight = weightedItems.reduce((s, cr) => s + cr.peso, 0);
    const safeTargetNote = clampNum(targetNote, 0, 10);
    const targetLevelMean = safeTargetNote / 2.5;
    const targetWeighted = targetLevelMean * totalWeight;
    const searchItems = weightedItems.slice().sort((a,b) => (b.peso - a.peso) || (a._idx - b._idx));
    const eps = 1e-9;
    let chosenLevels = null;
    let actualWeighted = 0;

    if(searchItems.length > 16){
      chosenLevels = computeEvidenceBackfillPlanGreedy(searchItems, targetWeighted, targetLevelMean, mode, totalWeight);
      actualWeighted = chosenLevels.reduce((s, lv, i) => s + (searchItems[i].peso * Number(lv || 1)), 0);
    } else {
      const split = Math.floor(searchItems.length / 2);
      const leftItems = searchItems.slice(0, split);
      const rightItems = searchItems.slice(split);
      const leftCombos = enumerateEvidenceBackfillHalf(leftItems, targetLevelMean);
      const rightCombos = enumerateEvidenceBackfillHalf(rightItems, targetLevelMean).sort((a,b) => a.sum - b.sum);
      let bestDiff = Infinity;
      let bestTie = Infinity;
      let bestPair = null;
      let randomCount = 0;

      function lowerBound(arr, target){
        let lo = 0;
        let hi = arr.length;
        while(lo < hi){
          const mid = (lo + hi) >> 1;
          if(arr[mid].sum < target) lo = mid + 1;
          else hi = mid;
        }
        return lo;
      }

      function considerPair(left, right){
        const sum = left.sum + right.sum;
        const diff = Math.abs(sum - targetWeighted);
        if(diff < bestDiff - eps){
          bestDiff = diff;
          bestTie = Infinity;
          bestPair = null;
          randomCount = 0;
        }
        if(Math.abs(diff - bestDiff) > eps) return;

        if(mode === 'random'){
          randomCount += 1;
          if(!bestPair || Math.random() < (1 / randomCount)) bestPair = {left, right, sum};
          return;
        }

        const sqSum = left.sqSum + right.sqSum;
        const closeness = left.closeness + right.closeness;
        const minLv = Math.min(left.minLv, right.minLv);
        const maxLv = Math.max(left.maxLv, right.maxLv);
        const tie = computeEvidenceBackfillTie(sum, sqSum, minLv, maxLv, closeness, totalWeight);
        if(tie < bestTie - eps){
          bestTie = tie;
          bestPair = {left, right, sum};
        }
      }

      function considerRightBlocks(left, idx){
        if(idx < 0 || idx >= rightCombos.length) return;
        const sumRef = rightCombos[idx].sum;
        let start = idx;
        let end = idx;
        while(start > 0 && Math.abs(rightCombos[start - 1].sum - sumRef) <= eps) start -= 1;
        while((end + 1) < rightCombos.length && Math.abs(rightCombos[end + 1].sum - sumRef) <= eps) end += 1;
        for(let j = start; j <= end; j += 1) considerPair(left, rightCombos[j]);
      }

      leftCombos.forEach((left) => {
        const targetRight = targetWeighted - left.sum;
        const pos = lowerBound(rightCombos, targetRight);
        const seen = new Set();
        if(pos < rightCombos.length){
          const key = String(rightCombos[pos].sum);
          seen.add(key);
          considerRightBlocks(left, pos);
        }
        if(pos > 0){
          const key = String(rightCombos[pos - 1].sum);
          if(!seen.has(key)) considerRightBlocks(left, pos - 1);
        }
      });

      if(!bestPair) throw new Error('Nun se pudo atopar un repartu válidu pa esa nota.');
      const leftLevels = decodeEvidenceBackfillCode(bestPair.left.code, leftItems.length);
      const rightLevels = decodeEvidenceBackfillCode(bestPair.right.code, rightItems.length);
      chosenLevels = leftLevels.concat(rightLevels);
      actualWeighted = Number(bestPair.sum || 0);
    }

    if(!Array.isArray(chosenLevels) || !chosenLevels.length) throw new Error('Nun se pudo atopar un repartu válidu pa esa nota.');

    const levelsById = new Map();
    searchItems.forEach((item, i) => {
      levelsById.set(Number(item.id), Number(chosenLevels[i] || 1));
    });

    const fallbackBase = clampNum(Math.round(targetLevelMean), 1, 4);
    const ratings = allItems.map((item) => {
      let lv = levelsById.get(Number(item.id));
      if(!Number.isFinite(lv)){
        lv = mode === 'random' ? (1 + Math.floor(Math.random() * 4)) : fallbackBase;
      }
      return {
        criterio_id: Number(item.id),
        codigo: item.codigo,
        descripcion: item.descripcion,
        peso: Number(item.peso || 0),
        nivel_1_4: Number(lv)
      };
    });

    const actualNote = 2.5 * actualWeighted / totalWeight;
    return {
      targetNote: safeTargetNote,
      actualNote,
      diff: Math.abs(actualNote - safeTargetNote),
      mode,
      exact: Math.abs(actualNote - safeTargetNote) < 0.005,
      totalWeight,
      ratings
    };
  }

  function getEvidenceBackfillMode(){
    const checked = document.querySelector('input[name="evNoteEditMode"]:checked');
    return checked ? checked.value : 'equal';
  }

  function closeEvidenceNoteEdit(){
    const w = $('evNoteEditWrap');
    if(w) w.classList.remove('show');
    _evNoteEditState = null;
    if($('evNoteEditMsg')) $('evNoteEditMsg').innerHTML = '';
    if($('evNoteEditPreview')) $('evNoteEditPreview').innerHTML = "Introduz una nota, escueyi'l repartu y pulsa <b>Recalcular criterios</b>.";
  }

  function markEvidenceNoteEditDirty(){
    if(!_evNoteEditState) return;
    _evNoteEditState.plan = null;
    const preview = $('evNoteEditPreview');
    const msg = $('evNoteEditMsg');
    if(preview) preview.innerHTML = "Introduz una nota, escueyi'l repartu y pulsa <b>Recalcular criterios</b>.";
    if(msg) msg.innerHTML = '<span class="muted">Pendiente de recalcular los criterios.</span>';
  }

  function renderEvidenceNoteEditPreview(){
    if(!_evNoteEditState) return null;
    const input = $('evNoteEditInput');
    const preview = $('evNoteEditPreview');
    const msg = $('evNoteEditMsg');
    const raw = input ? String(input.value || '').trim() : '';
    const mode = getEvidenceBackfillMode();

    if(!raw){
      _evNoteEditState.plan = null;
      if(preview) preview.innerHTML = "Introduz una nota, escueyi'l repartu y pulsa <b>Recalcular criterios</b>.";
      if(msg) msg.innerHTML = '<span class="muted">Introduz una nota y recalcula los criterios.</span>';
      return null;
    }

    const note = Number(raw.replace(',', '.'));
    if(!Number.isFinite(note) || note < 0 || note > 10){
      _evNoteEditState.plan = null;
      if(preview) preview.innerHTML = '<span class="err">La nota tien de tar ente 0 y 10.</span>';
      if(msg) msg.innerHTML = '<span class="err">Introduz una nota válida ente 0 y 10.</span>';
      return null;
    }

    try {
      const plan = computeEvidenceBackfillPlan(_evNoteEditState.data.criterios, note, mode);
      _evNoteEditState.plan = plan;
      const approxTxt = plan.exact ? 'Coincide exactamente cola nota pedida.' : `La nota pedida ${fmt2(plan.targetNote)} axústase a ${fmt2(plan.actualNote)} por ser la combinación representable más cercana.`;
      const distTxt = plan.mode === 'random' ? 'Repartu aleatoriu' : 'Repartu equilibráu';
      const rowsHtml = plan.ratings.map((r) => `
        <tr>
          <td style="padding-left:18px;"><span class="pill" style="font-family:var(--mono); font-weight:700;">${escHtml(r.codigo || '—')}</span></td>
          <td class="muted">${escHtml(r.descripcion || '—')}</td>
          <td style="text-align:center; font-weight:800; color:#0369a1;">${Number(r.nivel_1_4)}</td>
        </tr>
      `).join('');
      if(preview) preview.innerHTML = `
        <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; margin-bottom:12px;">
          <div class="kpi" style="background:#eff6ff; border-color:#bfdbfe;"><div style="font-weight:700; color:#0369a1;">Nota pedida</div><div style="font-size:22px; font-family:var(--mono); margin-top:6px;">${fmt2(plan.targetNote)}</div></div>
          <div class="kpi" style="background:#ecfdf5; border-color:#a7f3d0;"><div style="font-weight:700; color:#047857;">Nota real aplicable</div><div style="font-size:22px; font-family:var(--mono); margin-top:6px;">${fmt2(plan.actualNote)}</div></div>
          <div class="kpi" style="background:#fafafa;"><div style="font-weight:700; color:#374151;">Axuste</div><div style="font-size:22px; font-family:var(--mono); margin-top:6px;">${fmt2(plan.diff)}</div></div>
          <div class="kpi" style="background:#fafafa;"><div style="font-weight:700; color:#374151;">Métodu</div><div style="font-size:16px; margin-top:10px; font-weight:700;">${escHtml(distTxt)}</div></div>
        </div>
        <div class="muted" style="font-size:12px; line-height:1.4; margin-bottom:10px;">${escHtml(approxTxt)} Al guardar, estes valoraciones quedarán marcaes con un asteriscu discretu nel modal anterior.</div>
        <div style="overflow:auto; border:1px solid var(--line); border-radius:12px; background:#fff;">
          <table style="border:none;">
            <thead style="background:#fafafa;"><tr><th style="padding-left:18px;">Criteriu</th><th>Descripción</th><th style="text-align:center; padding-right:18px;">Nivel 1–4</th></tr></thead>
            <tbody>${rowsHtml}</tbody>
          </table>
        </div>`;
      if(msg) msg.innerHTML = plan.exact ? '<span class="ok">La simulación cuadra exacto col sistema 1–4.</span>' : "<span class=\"muted\">La simulación usa l'axuste representable más cercanu dientro del sistema 1–4.</span>";
      return plan;
    } catch(e) {
      _evNoteEditState.plan = null;
      if(preview) preview.innerHTML = `<span class="err">Error: ${escHtml(e.message || e)}</span>`;
      if(msg) msg.innerHTML = `<span class="err">Error: ${escHtml(e.message || e)}</span>`;
      return null;
    }
  }

  function openEvidenceNoteEdit(row){
    if(!_evResultsRow || !_evResultsData || !row || !row.alumno) return;
    _evNoteEditState = { evRow:_evResultsRow, data:_evResultsData, row, alumno:row.alumno, plan:null };
    const w = $('evNoteEditWrap');
    if(!w) return;
    const existingMeta = row.backfilledMeta || null;
    const prefillNote = existingMeta && Number.isFinite(Number(existingMeta.target_note))
      ? Number(existingMeta.target_note)
      : (Number.isFinite(Number(row.notaEvidencia)) ? Number(row.notaEvidencia) : null);
    if($('evNoteEditInfo')) $('evNoteEditInfo').innerHTML = `<span style="font-weight:700; color:#0369a1;">${escHtml(getAlumnoDisplayName(row.alumno))}</span> &nbsp;|&nbsp; <span style="font-weight:600; color:#111827;">${escHtml((_evResultsRow && _evResultsRow.titulo) || 'Evidencia')}</span> &nbsp;|&nbsp; ${escHtml((_evResultsRow && _evResultsRow.fecha) || '—')}`;
    if($('evNoteEditSub')) $('evNoteEditSub').innerHTML = Number.isFinite(Number(row.notaEvidencia)) ? `Nota actual de la evidencia: <b>${fmt2(Number(row.notaEvidencia))}</b>. Puedes sustituyila por una nueva nota y recalculala escontra atrás.` : 'Esti estudiante entá nun tien nota nesta evidencia. Introduz una calificación y Llumera repartirála escontra atrás sobre los criterios.';
    if($('evNoteEditInput')) $('evNoteEditInput').value = Number.isFinite(prefillNote) ? Number(prefillNote).toFixed(2) : '';
    const modeWanted = (existingMeta && existingMeta.mode === 'random') ? 'random' : 'equal';
    document.querySelectorAll('input[name="evNoteEditMode"]').forEach((radio) => { radio.checked = (radio.value === modeWanted); });
    if($('evNoteEditMsg')) $('evNoteEditMsg').innerHTML = '';
    if($('evNoteEditPreview')) $('evNoteEditPreview').innerHTML = "Introduz una nota, escueyi'l repartu y pulsa <b>Recalcular criterios</b>.";
    if($('evNoteEditMsg')) $('evNoteEditMsg').innerHTML = '<span class="muted">Aición manual: recalcula solo cuando te interese.</span>';
    w.classList.add('show');
  }

  async function buildEvidenceResultsData(evRow){
    const c = ctx();
    if(!ctxOk(c)) throw new Error('Contestu incompletu.');
    if(!criteriosCache.length) await loadCriterios();
    if(!alumnosCache.length) {
      const a = await api('/alumnos');
      alumnosCache = a.datos || [];
    }

    const critIds = getEvidenceCriterionIds(evRow);
    if(!critIds.length) throw new Error('Esta evidencia nun tien criterios asociaos.');

    const criterios = critIds.map((cid) => criteriosCache.find((crit) => Number(crit.id) === Number(cid))).filter(Boolean);
    if(!criterios.length) throw new Error('Nun se pudieron resolver los criterios de la evidencia.');

    const [dVals, dOfficial] = await Promise.all([
      api(`/evidencias/${evRow.id}/valoraciones`, {method:'GET'}),
      api('/notas/trimestre?' + getBaseOfficialNotesQuery(c).toString(), {method:'GET'})
    ]);

    const alumnoRows = getEvidenceTargetStudents(evRow, c);
    const officialMap = new Map();
    (Array.isArray(dOfficial && dOfficial.datos) ? dOfficial.datos : []).forEach((row) => {
      const aid = Number(row && row.alumno_id);
      if(aid) officialMap.set(aid, withCtxNivelData(row, c.nivel, c.materia));
    });

    const valMap = new Map();
    const backfillMetaMap = new Map();
    (Array.isArray(dVals && dVals.datos) ? dVals.datos : []).forEach((row) => {
      const aid = Number(row && row.alumno_id);
      const cid = Number(row && row.criterio_id);
      const nivel = Number(row && row.nivel_1_4);
      if(!aid || !cid || ![1,2,3,4].includes(nivel)) return;
      if(!valMap.has(aid)) valMap.set(aid, new Map());
      valMap.get(aid).set(cid, nivel);
      const meta = parseEvidenceAutoFeedback(row && row.feedback);
      if(meta && !backfillMetaMap.has(aid)) backfillMetaMap.set(aid, meta);
    });

    const criteriosInfo = criterios.map((cr) => ({
      id: Number(cr.id),
      codigo: String(cr.codigo || ''),
      peso: Number(cr.peso || 0),
      descripcion: String(cr.descripcion || '')
    }));

    const totalPesoEvidencia = criteriosInfo.reduce((s, cr) => s + (Number.isFinite(cr.peso) ? cr.peso : 0), 0);
    const rows = alumnoRows.map((al) => {
      const byCrit = valMap.get(Number(al.id)) || new Map();
      let weightedNote = 0;
      let normalizedPeso = 0;
      let officialContribution = 0;
      let covered = 0;
      for(const cr of criteriosInfo){
        const nivel14 = Number(byCrit.get(cr.id));
        if(![1,2,3,4].includes(nivel14)) continue;
        const nota10 = 2.5 * nivel14;
        const peso = Number.isFinite(cr.peso) ? cr.peso : 0;
        weightedNote += nota10 * peso;
        normalizedPeso += peso;
        officialContribution += nota10 * (peso / 100.0);
        covered += 1;
      }
      const notaEvidencia = normalizedPeso > 0 ? (weightedNote / normalizedPeso) : null;
      const official = officialMap.get(Number(al.id)) || null;
      const notaAcumulada = official ? Number((official.nota_acumulada ?? official.nota) || 0) : null;
      const notaProyectada = official ? Number(official.nota_proyectada || 0) : null;
      return {
        alumno: al,
        notaEvidencia,
        officialContribution: covered > 0 ? officialContribution : null,
        notaAcumulada,
        notaProyectada,
        covered,
        totalCrits: criteriosInfo.length,
        backfilledMeta: backfillMetaMap.get(Number(al.id)) || null,
        hasBackfilledNote: backfillMetaMap.has(Number(al.id))
      };
    });

    return { evRow, ctx: c, criterios: criteriosInfo, totalPesoEvidencia, rows };
  }

  function renderEvidenceResults(data){
    const evRow = data && data.evRow ? data.evRow : null;
    const rows = Array.isArray(data && data.rows) ? data.rows : [];
    const criterios = Array.isArray(data && data.criterios) ? data.criterios : [];
    const tb = $('evResultsTbody');
    if(!tb) return;
    tb.innerHTML = '';

    const critTxt = criterios.map((cr) => `<span class="pill" title="${escAttr(cr.descripcion || 'Ensin descripción')}" style="font-family:var(--mono); font-weight:700; cursor:help; text-decoration:underline dotted #9ca3af;">${escHtml(cr.codigo)}</span>`).join(' ');
    const sdaTxt = evRow && evRow.sda ? ` &nbsp;|&nbsp; <span style="color:#0ea5e9; font-weight:700;">SdA: ${escHtml(evRow.sda)}</span>` : '';
    if($('evResultsSub')) $('evResultsSub').innerHTML = `<b>${escHtml(evRow && evRow.titulo || 'Evidencia')}</b> &nbsp;|&nbsp; ${escHtml(evRow && evRow.fecha || '—')}${sdaTxt}`;
    if($('evResultsMeta')) $('evResultsMeta').innerHTML = `Criterios de la evidencia: ${critTxt || '<span class="muted">—</span>'} &nbsp;|&nbsp; Pesu oficial total implicáu: <b>${fmt2(data && data.totalPesoEvidencia || 0)}%</b>. La <b>nota de la evidencia</b> renormaliza esos pesos al 100% solo dientro d'esta actividá; la <b>contribución a la oficial</b> amuesa la parte real que suma a la nota oficial del trimestre. <span style="color:#6b7280;">*</span> marca una nota introducida direutamente y repartida escontra atrás sobre los criterios.`;

    if(!rows.length){
      tb.innerHTML = `<tr><td colspan="6" class="muted" style="padding:18px 24px;">Nun hai estudiantes nel contestu d'esta evidencia.</td></tr>`;
      if($('evResultsMsg')) $('evResultsMsg').innerHTML = '<span class="muted">Ensin alumnáu disponible.</span>';
      return;
    }

    rows.forEach((row) => {
      const al = row.alumno || {};
      const fotoUrl = safeMediaUrl(al.foto);
      const avatarHtml = fotoUrl ? `<img src="${escAttr(fotoUrl)}" class="avatar" style="width:24px; height:24px;">` : `<div class="avatar" style="width:24px; height:24px; font-size:11px;">👤</div>`;
      const notaEv = Number(row.notaEvidencia);
      const notaApu = Number(row.officialContribution);
      const notaAc = Number(row.notaAcumulada);
      const notaPr = Number(row.notaProyectada);
      const colorEv = !Number.isFinite(notaEv) ? '#9ca3af' : (notaEv >= 9 ? 'var(--c-verde)' : notaEv >= 7 ? 'var(--c-azul)' : notaEv >= 5 ? 'var(--c-naranxa)' : 'var(--c-roxu)');
      const coberturaTxt = `${row.covered}/${row.totalCrits}`;
      const coberturaColor = row.covered === row.totalCrits ? '#047857' : (row.covered > 0 ? '#b45309' : '#6b7280');
      const autoMark = row.hasBackfilledNote ? `<span title="Nota introducida direutamente y repartida escontra atrás sobre los criterios." style="display:inline-flex; align-items:center; justify-content:center; min-width:10px; color:#94a3b8; opacity:.7; font-weight:700; font-size:11px; line-height:1;">*</span>` : '';
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td style="padding-left:24px;">
          <div style="display:flex; align-items:center; gap:8px;">
            ${avatarHtml}
            <div>
              <div style="font-weight:600; color:#111827;">${escHtml(getAlumnoDisplayName(al))}</div>
              <div class="muted" style="font-size:11px;">${escHtml((al.grupo || '') || '—')}</div>
            </div>
          </div>
        </td>
        <td style="text-align:center;">
          <div><strong style="font-size:20px; font-family:var(--mono); color:${colorEv};">${Number.isFinite(notaEv) ? notaEv.toFixed(2) : '—'}</strong></div>
          <div style="margin-top:4px;"><button class="btn ghost btn-evresults-edit" data-aid="${Number(al.id)||0}" style="padding:2px 7px; font-size:10px; line-height:1.1; border:1px solid #dbeafe; color:#64748b; background:#f8fbff; font-weight:600; opacity:.82;">Editar</button></div>
        </td>
        <td style="text-align:center; color:#047857; font-weight:700;">${Number.isFinite(notaApu) ? notaApu.toFixed(2) : '—'}</td>
        <td style="text-align:center;">
          <div style="font-weight:700; color:#374151;">${Number.isFinite(notaAc) ? notaAc.toFixed(2) : '—'}</div>
          <div class="muted" style="font-size:11px;">Proy.: ${Number.isFinite(notaPr) ? notaPr.toFixed(2) : '—'}</div>
        </td>
        <td style="text-align:center;"><span class="pill" style="font-weight:700; color:${coberturaColor}; border-color:${row.covered === row.totalCrits ? '#a7f3d0' : row.covered > 0 ? '#fcd34d' : '#d1d5db'}; background:${row.covered === row.totalCrits ? '#ecfdf5' : row.covered > 0 ? '#fffbeb' : '#f9fafb'};">${escHtml(coberturaTxt)}</span></td>
        <td style="text-align:right; padding-right:24px;">
          <div style="display:inline-flex; align-items:center; gap:8px;">
            <button class="btn ghost btn-evresults-eval" data-aid="${Number(al.id)||0}" style="border-color:#bae6fd; color:#0369a1; background:#f0f9ff; font-weight:700;">Evaluar</button>
            ${autoMark}
          </div>
        </td>`;
      tb.appendChild(tr);
    });

    tb.querySelectorAll('.btn-evresults-edit').forEach((btn) => {
      btn.addEventListener('click', () => {
        const aid = parseInt(btn.dataset.aid, 10);
        const rowTarget = rows.find((r) => Number(r && r.alumno && r.alumno.id) === aid);
        if(rowTarget) openEvidenceNoteEdit(rowTarget);
      });
    });

    tb.querySelectorAll('.btn-evresults-eval').forEach((btn) => {
      btn.addEventListener('click', async () => {
        if(!_evResultsRow) return;
        const aid = parseInt(btn.dataset.aid, 10);
        let alumno = alumnosCache.find((x) => Number(x.id) === aid);
        if(!alumno) {
          try {
            const dataAl = await api('/alumnos');
            alumnosCache = dataAl.datos || [];
            alumno = alumnosCache.find((x) => Number(x.id) === aid);
          } catch(_) {}
        }
        if(alumno) {
          const evTarget = _evResultsRow;
          closeEvidenceResults();
          if(evTarget) await openValorar(evTarget, alumno, {returnToEvidenceResults:true});
        }
      });
    });

    const cubiertos = rows.filter((r) => r.covered > 0).length;
    if($('evResultsMsg')) $('evResultsMsg').innerHTML = `<span class="ok">${rows.length} estudiantes cargaos · ${cubiertos} con dalguna valoración nesta evidencia.</span>`;
  }

  async function openEvidenceResults(evRow){
    _evResultsRow = evRow;
    _evResultsData = null;
    const w = $('evResultsWrap');
    if(!w) return;
    if($('evResultsSub')) $('evResultsSub').textContent = 'Cargando cálculu…';
    if($('evResultsMeta')) $('evResultsMeta').innerHTML = '';
    if($('evResultsMsg')) $('evResultsMsg').innerHTML = '<span class="muted">Cargando resultaos de la evidencia…</span>';
    if($('evResultsTbody')) $('evResultsTbody').innerHTML = '<tr><td colspan="6" class="muted" style="padding:18px 24px;">Calculando…</td></tr>';
    w.classList.add('show');
    try {
      const data = await buildEvidenceResultsData(evRow);
      _evResultsData = data;
      renderEvidenceResults(data);
    } catch(e) {
      _evResultsData = null;
      if($('evResultsMsg')) $('evResultsMsg').innerHTML = `<span class="err">Error: ${escHtml(e.message||e)}</span>`;
      if($('evResultsTbody')) $('evResultsTbody').innerHTML = "<tr><td colspan=\"6\" class=\"muted\" style=\"padding:18px 24px;\">Nun se pudieron calcular los resultaos d'esta evidencia.</td></tr>";
    }
  }

  listen('evResultsClose', 'click', closeEvidenceResults);
  listen('evNoteEditClose', 'click', closeEvidenceNoteEdit);
  listen('evNoteEditCancel', 'click', closeEvidenceNoteEdit);
  listen('evNoteEditInput', 'input', markEvidenceNoteEditDirty);
  document.querySelectorAll('input[name="evNoteEditMode"]').forEach((radio) => {
    radio.addEventListener('change', markEvidenceNoteEditDirty);
  });
  listen('evNoteEditRecalc', 'click', () => {
    if(!_evNoteEditState) return;
    renderEvidenceNoteEditPreview();
  });
  listen('evNoteEditSave', 'click', async () => {
    if(!_evNoteEditState || !_evNoteEditState.evRow || !_evNoteEditState.alumno) return;
    const msg = $('evNoteEditMsg');
    const plan = _evNoteEditState.plan;
    if(!plan){
      if(msg) msg.innerHTML = '<span class="err">Primero pulsa Recalcular criterios y revisa la simulación.</span>';
      return;
    }
    const feedback = buildEvidenceAutoFeedback({
      target_note: Number(plan.targetNote),
      applied_note: Number(plan.actualNote),
      mode: String(plan.mode || 'equal'),
      ts: new Date().toISOString()
    });
    const ratings = plan.ratings.map((r) => ({
      alumno_id: Number(_evNoteEditState.alumno.id),
      criterio_id: Number(r.criterio_id),
      nivel_1_4: Number(r.nivel_1_4),
      feedback
    }));
    if(msg) msg.innerHTML = '<span class="muted">Aplicando la nota y recalculando resultaos…</span>';
    try {
      await api(`/evidencias/${_evNoteEditState.evRow.id}/valorar`, {method:'POST', body: JSON.stringify({ratings})});
      const returnEvidenceRow = _evNoteEditState.evRow;
      await refreshEval();
      closeEvidenceNoteEdit();
      if(returnEvidenceRow) await openEvidenceResults(returnEvidenceRow);
    } catch(e) {
      if(msg) msg.innerHTML = `<span class="err">Error: ${escHtml(e.message || e)}</span>`;
    }
  });

  let currentPrintData = null; 
  window.__isClosed = false;
  
  let notesCacheData = [];
  let notesSortCol = null;
  let notesSortDir = 1;

  document.querySelectorAll('#tab-calificaciones th.sortable').forEach(th => {
    th.addEventListener('click', () => {
      const col = th.dataset.sort;
      if (notesSortCol === col) { notesSortDir = notesSortDir === 1 ? -1 : 1; } 
      else { notesSortCol = col; notesSortDir = 1; }
      renderNotesTab();
    });
  });

  function sanitizeFinalWeights(raw){
    const base = {...FINAL_WEIGHTS_DEFAULT};
    if(raw && typeof raw === 'object'){
      ['t1','t2','t3'].forEach((k)=>{
        const v = Number(raw[k]);
        if(Number.isFinite(v) && v > 0) base[k] = v;
      });
    }
    return base;
  }

  function buildFinalFormulaText(w){
    const ww = sanitizeFinalWeights(w);
    const total = ww.t1 + ww.t2 + ww.t3;
    return `Fórmula actual: (1T×${ww.t1} + 2T×${ww.t2} + 3T×${ww.t3}) / ${total}`;
  }

  async function loadFinalWeightsPref(){
    try{
      const d = await api('/preferencies/' + encodeURIComponent(FINAL_WEIGHTS_PREF_KEY) + '?_t=' + Date.now(), {method:'GET'});
      finalWeightsCache = sanitizeFinalWeights(d && d.valor ? JSON.parse(d.valor) : null);
    }catch(_){
      finalWeightsCache = {...FINAL_WEIGHTS_DEFAULT};
    }
    updateFinalWeightsUi();
    return finalWeightsCache;
  }

  function updateFinalWeightsUi(){
    const w = sanitizeFinalWeights(finalWeightsCache);
    if($('cfgFinalW1')) $('cfgFinalW1').value = String(w.t1);
    if($('cfgFinalW2')) $('cfgFinalW2').value = String(w.t2);
    if($('cfgFinalW3')) $('cfgFinalW3').value = String(w.t3);
    if($('cfgFinalFormula')) $('cfgFinalFormula').textContent = buildFinalFormulaText(w);
    if($('finalWeightsBadge')) $('finalWeightsBadge').textContent = `Pesos: ${w.t1} · ${w.t2} · ${w.t3}`;
  }

  async function loadFinalWeightsForm(){
    await loadFinalWeightsPref();
  }

  function getFinalRowColor(n){
    if(n >= 9) return 'var(--c-verde)';
    if(n >= 7) return 'var(--c-azul)';
    if(n >= 5) return 'var(--c-naranxa)';
    if(n > 0) return 'var(--c-roxu)';
    return 'var(--muted)';
  }

  function finalCellHtml(v, cerrado){
    if(v == null) return '<span class="muted">—</span>';
    const color = getFinalRowColor(Number(v) || 0);
    const tag = cerrado ? '🔒' : '∼';
    const title = cerrado ? 'Nota zarrada del trimestre' : 'Proyección viva del trimestre';
    return `<span title="${title}" style="font-weight:700; color:${color};">${fmt2(v)}</span><div class="muted" style="font-size:11px; margin-top:2px;">${tag}</div>`;
  }

  function renderFinalTab(){
    const tb = $('finalTbody');
    if(!tb) return;
    tb.innerHTML = '';
    for(const r of finalCacheData){
      const tr = document.createElement('tr');
      let g = r.grupo || ''; if (g === 'SINGRUPU' || g === r.nivel) g = '';
      const fullName = r.nome || r.alias || '';
      const finalColor = getFinalRowColor(Number(r.nota_final_proyectada) || 0);
      const fotoUrl = safeMediaUrl(r.foto);
      const avatarHtml = fotoUrl ? `<img src="${escAttr(fotoUrl)}" class="avatar">` : `<div class="avatar">👤</div>`;
      tr.innerHTML = `
        <td style="padding-left:24px;">
          <div style="display:flex; align-items:center; gap:10px;">
            ${avatarHtml}
            <div style="font-weight:600;">${escHtml(fullName)}</div>
          </div>
        </td>
        <td class="muted">${escHtml(g)}</td>
        <td>${getNivelMateriaBadgeHtml(withCtxNivelData(r, ctx().nivel, ctx().materia), false)}</td>
        <td style="text-align:center;">${finalCellHtml(r.t1, !!r.t1_cerrado)}</td>
        <td style="text-align:center;">${finalCellHtml(r.t2, !!r.t2_cerrado)}</td>
        <td style="text-align:center;">${finalCellHtml(r.t3, !!r.t3_cerrado)}</td>
        <td style="text-align:center;"><strong style="font-size:20px; font-family:var(--mono); color:${finalColor};">${fmt2(r.nota_final_proyectada)}</strong><div class="muted" style="font-size:11px; margin-top:2px;">acum. ${fmt2(r.nota_final_acumulada)}</div></td>
        <td style="text-align:center;"><span class="pill" style="font-weight:700;">${fmt2(r.peso_anual_cubierto)}%</span></td>`;
      tb.appendChild(tr);
    }
  }

  async function loadAndShowFinalTab(){
    const c = ctx();
    if(!ctxOk(c)){
      if($('finalEmptyMsg')) $('finalEmptyMsg').style.display = 'block';
      if($('table-final-wrap')) $('table-final-wrap').style.display = 'none';
      if($('finalTbody')) $('finalTbody').innerHTML = '';
      if($('finalMsg')) $('finalMsg').textContent = '';
      return;
    }
    if($('finalEmptyMsg')) $('finalEmptyMsg').style.display = 'none';
    if($('finalMsg')) $('finalMsg').innerHTML = '<i>Calculando combinación final 1-2-3…</i>';
    await loadFinalWeightsPref();
    try{
      const qs = new URLSearchParams({curso:c.curso, nivel:c.nivel, materia:c.materia});
      if(c.grupo) qs.set('grupo', c.grupo);
      const d = await api('/notas/final?' + qs.toString(), {method:'GET'});
      finalWeightsCache = sanitizeFinalWeights(d && d.pesos ? d.pesos : finalWeightsCache);
      updateFinalWeightsUi();
      finalCacheData = Array.isArray(d.datos) ? d.datos.map(r => withCtxNivelData(r, c.nivel, c.materia)) : [];
      renderFinalTab();
      const mediaFinal = finalCacheData.length ? (finalCacheData.reduce((s, r) => s + Number(r.nota_final_proyectada || 0), 0) / finalCacheData.length) : 0;
      const mediaCub = finalCacheData.length ? (finalCacheData.reduce((s, r) => s + Number(r.peso_anual_cubierto || 0), 0) / finalCacheData.length) : 0;
      if($('finalMsg')) $('finalMsg').innerHTML = `<span class="ok">Total d'estudiantes: ${finalCacheData.length} · Media final 1-2-3: ${fmt2(mediaFinal)} · Cobertura media: ${fmt2(mediaCub)}%</span>`;
      if($('table-final-wrap')) $('table-final-wrap').style.display = 'block';
    }catch(e){
      if($('finalMsg')) $('finalMsg').innerHTML = '<span class="err">Error del sirvidor: ' + (e.message || e) + '</span>';
    }
  }

  function renderNotesTab() {
    const tb = $('notesTbody');
    if(!tb) return;
    tb.innerHTML = '';
    
    let list = [...notesCacheData];
    if (notesSortCol) {
      list.sort((a, b) => {
        let valA, valB;
        if (notesSortCol === 'estudiante') {
          valA = (a.nome || a.alias || '').toLowerCase();
          valB = (b.nome || b.alias || '').toLowerCase();
        } else if (notesSortCol === 'grupo') {
          valA = (a.grupo === 'SINGRUPU' || a.grupo === a.nivel) ? '' : (a.grupo || '').toLowerCase();
          valB = (b.grupo === 'SINGRUPU' || b.grupo === b.nivel) ? '' : (b.grupo || '').toLowerCase();
        } else if (notesSortCol === 'nivel') {
          valA = getNivelRealText(a).toLowerCase();
          valB = getNivelRealText(b).toLowerCase();
        } else if (notesSortCol === 'proyeutada') {
          valA = a.nota_proyectada || 0;
          valB = b.nota_proyectada || 0;
        } else if (notesSortCol === 'acumulada') {
          valA = a.nota_acumulada > 0 ? a.nota_acumulada : (a.nota || 0);
          valB = b.nota_acumulada > 0 ? b.nota_acumulada : (b.nota || 0);
        }

        if (typeof valA === 'string' && typeof valB === 'string') {
          return valA.localeCompare(valB, 'ast') * notesSortDir;
        }
        return (valA - valB) * notesSortDir;
      });
    }

    document.querySelectorAll('#tab-calificaciones th.sortable').forEach(th => {
      const span = th.querySelector('span');
      if(span) span.textContent = (th.dataset.sort === notesSortCol) ? (notesSortDir === 1 ? '▲' : '▼') : '';
    });

    for(const r of list){
      const tr = document.createElement('tr');
      let g = r.grupo || ''; if (g === 'SINGRUPU' || g === r.nivel) g = '';
      
      let proyStr = (r.nota_proyectada !== undefined && r.nota_proyectada > 0) ? r.nota_proyectada.toFixed(2) : '-';
      let proyColor = 'var(--muted)';
      if(r.nota_proyectada >= 9) proyColor = 'var(--c-verde)';
      else if(r.nota_proyectada >= 7) proyColor = 'var(--c-azul)';
      else if(r.nota_proyectada >= 5) proyColor = 'var(--c-naranxa)';
      else if(r.nota_proyectada > 0) proyColor = 'var(--c-roxu)';

      let acumStr = (r.nota_acumulada !== undefined && r.nota_acumulada > 0) ? r.nota_acumulada.toFixed(2) : (r.nota > 0 ? r.nota.toFixed(2) : '-');

      const fullName = r.nome || r.alias || '';
      
      const notesFotoUrl = safeMediaUrl(r.foto);
      const avatarHtml = notesFotoUrl ? `<img src="${escAttr(notesFotoUrl)}" class="avatar">` : `<div class="avatar">👤</div>`;

      tr.innerHTML = `
        <td style="padding-left:24px;">
            <div style="display:flex; align-items:center; gap:10px;">
                ${avatarHtml}
                <a href="#" class="alu-detail" data-aid="${Number(r.alumno_id)||0}" data-name="${escAttr(fullName)}" style="color:#059669; font-weight:600; text-decoration:none;">${escHtml(fullName)} <span class="pill" style="margin-left:8px; background:#ecfdf5; border-color:#a7f3d0; color:#059669;">Trazabilidá 🔍</span></a>
            </div>
        </td>
        <td class="muted">${g}</td>
        <td>${getNivelMateriaBadgeHtml(withCtxNivelData(r, ctx().nivel, ctx().materia), false)}</td>
        <td style="text-align:center;"><strong style="font-size:20px; font-family:var(--mono); color:${proyColor};">${proyStr}</strong></td>
        <td style="text-align:center;"><strong style="font-size:20px; font-family:var(--mono); color:#6b7280;">${acumStr}</strong></td>
        <td style="text-align:right; padding-right:24px;">
          <button class="btn ghost btn-note-eval" data-aid="${Number(r.alumno_id)||0}" style="border-color:#bae6fd; color:#0369a1; background:#f0f9ff; font-weight:700;">Evaluar</button>
        </td>`;
      tb.appendChild(tr);
    }
  }

  async function loadAndShowNotesTab(){
    const c = ctx();
    if(!ctxOk(c)){ 
        if($('notesEmptyMsg')) $('notesEmptyMsg').style.display = 'block'; 
        if($('table-notes-wrap')) $('table-notes-wrap').style.display = 'none';
        if($('notesTbody')) $('notesTbody').innerHTML=''; 
        if($('notesMsg')) $('notesMsg').textContent=''; 
        if($('btnToggleLock')) $('btnToggleLock').style.display = 'none';
        if($('notesSubSda')) $('notesSubSda').style.display = 'none';
        if($('notesEmptyMsg')) {
           $('notesEmptyMsg').style.opacity = '0.5';
           setTimeout(() => $('notesEmptyMsg').style.opacity = '1', 150);
        }
        return; 
    }
    if($('notesEmptyMsg')) $('notesEmptyMsg').style.display = 'none';
    if($('notesMsg')) $('notesMsg').innerHTML='<i>Executando l\'algoritmu LOMLOE d\'Asturies…</i>';
    if($('btnToggleLock')) $('btnToggleLock').style.display = 'flex';
    
    await syncSdaDropdowns(c);

    if($('notesSubSda')) {
        $('notesSubSda').style.display = c.sda ? 'inline-block' : 'none';
        $('notesSubSda').textContent = c.sda ? ` | Esbillao por: ${c.sda}` : '';
    }

    if($('notesTbody')) $('notesTbody').innerHTML='';
    try{
      const qs = new URLSearchParams({curso:c.curso, trimestre:String(c.trimestre), nivel:c.nivel, materia:c.materia});
      if(c.grupo) qs.set('grupo', c.grupo);
      if(c.sda) qs.set('sda', c.sda);
      const d = await api('/notas/trimestre?'+qs.toString(), {method:'GET'});
      
      window.__isClosed = d.cerrado;
      if($('btnToggleLock')) {
         if(d.cerrado) {
             $('btnToggleLock').style.background = '#fee2e2'; $('btnToggleLock').style.color = '#991b1b'; $('btnToggleLock').style.borderColor = '#fca5a5';
             $('lockIcon').textContent = '🔒'; $('lockText').textContent = `Trimestre zarráu (${c.nivel})`;
         } else {
             $('btnToggleLock').style.background = '#fff'; $('btnToggleLock').style.color = '#374151'; $('btnToggleLock').style.borderColor = 'var(--line)';
             $('lockIcon').textContent = '🔓'; $('lockText').textContent = `Zarrar ${c.trimestre}T de ${c.nivel}`;
         }
      }

      notesCacheData = Array.isArray(d.datos) ? d.datos.map(r => withCtxNivelData(r, c.nivel, c.materia)) : [];
      renderNotesTab();
      
      if($('notesMsg')) $('notesMsg').innerHTML = `<span class="ok">Total d'estudiantes calificaos: ${notesCacheData.length}</span>`;
      if($('table-notes-wrap')) $('table-notes-wrap').style.display = 'block';
    }catch(e){
      if($('notesMsg')) $('notesMsg').innerHTML = '<span class="err">Error del sirvidor: '+(e.message||e)+'</span>';
    }
  }

  listen('btnGoFinalConfig', 'click', () => setTab('config'));

  listen('btnSaveFinalWeights', 'click', async () => {
    const w = sanitizeFinalWeights({
      t1: Number($('cfgFinalW1') && $('cfgFinalW1').value),
      t2: Number($('cfgFinalW2') && $('cfgFinalW2').value),
      t3: Number($('cfgFinalW3') && $('cfgFinalW3').value)
    });
    finalWeightsCache = w;
    updateFinalWeightsUi();
    if($('cfgFinalWeightsMsg')) $('cfgFinalWeightsMsg').innerHTML = '<span class="muted">Guardando…</span>';
    try{
      await api('/preferencies/' + encodeURIComponent(FINAL_WEIGHTS_PREF_KEY), {method:'PUT', body: JSON.stringify({valor: JSON.stringify(w)})});
      if($('cfgFinalWeightsMsg')) $('cfgFinalWeightsMsg').innerHTML = '<span class="ok">Pesos guardaos correchamente.</span>';
      if(tabs['final'] && tabs['final'].classList.contains('active')) await loadAndShowFinalTab();
    }catch(e){
      if($('cfgFinalWeightsMsg')) $('cfgFinalWeightsMsg').innerHTML = '<span class="err">Error: ' + escHtml(e.message || e) + '</span>';
    }
  });

  listen('btnResetFinalWeights', 'click', () => {
    finalWeightsCache = {...FINAL_WEIGHTS_DEFAULT};
    updateFinalWeightsUi();
    if($('cfgFinalWeightsMsg')) $('cfgFinalWeightsMsg').innerHTML = '<span class="muted">Valores restablecíos. Pulsa Guardar pa aplicalos.</span>';
  });

  ['cfgFinalW1','cfgFinalW2','cfgFinalW3'].forEach((id)=> listen(id, 'input', () => {
    finalWeightsCache = sanitizeFinalWeights({
      t1: Number($('cfgFinalW1') && $('cfgFinalW1').value),
      t2: Number($('cfgFinalW2') && $('cfgFinalW2').value),
      t3: Number($('cfgFinalW3') && $('cfgFinalW3').value)
    });
    updateFinalWeightsUi();
  }));

  listen('notesTbody', 'click', async (e) => {
    const evalBtn = e.target.closest('.btn-note-eval');
    if(evalBtn) {
      e.preventDefault();
      const aid = parseInt(evalBtn.dataset.aid, 10);
      let alumno = alumnosCache.find(x => Number(x.id) === aid);
      if(!alumno) {
        try {
          const data = await api('/alumnos');
          alumnosCache = data.datos || [];
          alumno = alumnosCache.find(x => Number(x.id) === aid);
        } catch(_) {}
      }
      if(alumno) await openAlumnoEvalModal(alumno);
      return;
    }
    const a = e.target.closest('.alu-detail'); if(!a) return;
    e.preventDefault();
    const aid = a.dataset.aid; 
    const name = a.dataset.name; 
    await openDetail(aid, name, ctx().grupo);
  });

  function drawSparkline(history) {
      if(!history || history.length === 0) return '<span class="muted" style="font-size:10px">Ensin datos</span>';
      const w = 60, h = 24, pad = 3;
      const useH = h - pad*2;
      
      if(history.length === 1) {
          const y = (h - pad) - ((history[0] - 1) / 3) * useH;
          return `<svg width="${w}" height="${h}" viewBox="0 0 ${w} ${h}" style="vertical-align:middle; overflow:visible;" title="Única valoración: ${history[0]}">
                     <circle cx="${w/2}" cy="${y}" r="3.5" fill="#fff" stroke="var(--c-azul)" stroke-width="2"/>
                  </svg>`;
      }
      
      const step = w / (history.length - 1);
      const pts = history.map((val, i) => {
          const x = i * step;
          const y = (h - pad) - ((val - 1) / 3) * useH;
          return `${x},${y}`;
      });
      
      const circles = history.map((val, i) => {
           const x = i * step;
           const y = (h - pad) - ((val - 1) / 3) * useH;
           let clr = 'var(--c-azul)'; 
           if(val < 2) clr = 'var(--c-roxu)'; 
           else if (val === 4) clr = 'var(--c-verde)'; 
           return `<circle cx="${x}" cy="${y}" r="2.5" fill="#fff" stroke="${clr}" stroke-width="1.5"/>`;
      }).join('');

      return `<svg width="${w}" height="${h}" viewBox="0 0 ${w} ${h}" style="vertical-align:middle; overflow:visible; margin: 0 6px;" title="Historial: ${history.join(' \u2192 ')}">
                <polyline points="${pts.join(' ')}" fill="none" stroke="#bae6fd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                ${circles}
              </svg>`;
  }

  async function openDetail(alumno_id, name, grupo) {
    const c = ctx();
    if($('detailWrap')) $('detailWrap').classList.add('show');
    if($('detailSub')) $('detailSub').textContent = `Cargando xustificación llegal...`;
    if($('detailTbody')) $('detailTbody').innerHTML = '';
    
    const alu = alumnosCache.find(x => String(x.id) === String(alumno_id));
    const detailFotoUrl = alu ? safeMediaUrl(alu.foto) : '';
    const avatarHtml = detailFotoUrl ? `<img src="${escAttr(detailFotoUrl)}" class="avatar lg">` : `<div class="avatar lg">👤</div>`;
    if($('detailAvatarContainer')) $('detailAvatarContainer').innerHTML = avatarHtml;

    currentPrintData = null; 
    try {
      const qs = new URLSearchParams({curso:c.curso, trimestre:String(c.trimestre), nivel:c.nivel, materia:c.materia, alumno_id});
      if(grupo) qs.set('grupo', grupo);
      if(c.sda) qs.set('sda', c.sda);
      const d = await api('/resumen/criterios?'+qs.toString());
      const rows = d.datos || [];
      let html = '';
      for(const r of rows) {
        const spark = drawSparkline(r.historial);
        html += `<tr>
          <td style="padding-left:24px;"><span class="pill" style="font-family:var(--mono); font-weight:bold;">${escHtml(r.codigo)}</span> <span class="muted" style="font-size:11px; margin-left:6px;">${escHtml((r.descripcion||'').substring(0,55))}...</span></td>
          <td style="font-weight:600">${escHtml(String(r.peso ?? ''))}%</td>
          <td style="white-space:nowrap;">
              <div style="display:flex; align-items:center; gap:8px;">
                  <span style="display:inline-block; width:30px; font-weight:bold;">${r.media_nivel ? r.media_nivel.toFixed(2) : '<span class="muted" style="font-weight:normal;">—</span>'}</span>
                  ${spark}
              </div>
          </td>
          <td style="font-weight:600">${r.nota_criterio ? r.nota_criterio.toFixed(2) : '<span class="muted">—</span>'}</td>
          <td style="color:#059669; padding-right:24px;"><strong>${r.contribucion ? r.contribucion.toFixed(2) : '0.00'}</strong></td>
        </tr>`;
      }
      if($('detailTbody')) $('detailTbody').innerHTML = html;
      
      let sdaWarning = c.sda ? `<div style="margin-top:10px; padding:6px 12px; background:#eff6ff; border-radius:8px; color:#1e40af; display:inline-block; font-size:13px; font-weight:500;">⚠️ Esti desglose amuesa namás los resultaos esbillaos pa la <b>${escHtml(c.sda)}</b>. Nun ye la nota de tol trimestre.</div>` : '';

      if($('detailSub')) $('detailSub').innerHTML = `Detalle de <b>${escHtml(name)}</b> &nbsp;&nbsp;|&nbsp;&nbsp; <span style="color:#0ea5e9">Nota proyeutada (día a día): <b>${d.nota_proyectada.toFixed(2)}</b></span> &nbsp;&nbsp;|&nbsp;&nbsp; Nota acumulada oficial: <b style="font-size:16px;">${d.nota_trimestral.toFixed(2)}</b>${sdaWarning}`;
      
      currentPrintData = { aid: alumno_id, name, rows, notaProy: d.nota_proyectada, notaAcum: d.nota_trimestral, sda: c.sda };
      
    } catch(e) {
      if($('detailSub')) $('detailSub').innerHTML = `<span class="err">Error de carga: ${e.message||e}</span>`;
    }
  }

  listen('detailClose', 'click', () => { if($('detailWrap')) $('detailWrap').classList.remove('show'); });
  listen('evResultsWrap', 'click', (e) => { if(e.target && e.target.id === 'evResultsWrap') closeEvidenceResults(); });

  // --- LÓXICA PA IMPRENTAR L'INFORME (Nativo) ---
  listen('btnPrintInforme', 'click', () => {
    if(!currentPrintData) return;
    const c = ctx();
    
    let metaHtml = `<strong>Cursu:</strong> ${escHtml(c.curso)} <br> <strong>Trimestre:</strong> ${escHtml(c.trimestre)}T <br> <strong>Materia/Nivel:</strong> ${escHtml(c.materia)} (${escHtml(c.nivel)})`;
    
    const warningEl = document.getElementById('printSdaWarning');
    if(currentPrintData.sda) {
        metaHtml += `<br><strong style="color:#1e40af;">Filtru activu:</strong> <span style="color:#1e40af;">${escHtml(currentPrintData.sda)}</span>`;
        if(warningEl) {
            warningEl.innerHTML = `⚠️ <b>Avisu llegal:</b> Esti documentu nun reflexa'l progresu del trimestre completu. Les calificaciones amosaes darréu tán <b>esbillaes puramente pa la situación d'aprendimientu: ${escHtml(currentPrintData.sda)}</b>.`;
            warningEl.style.display = 'block';
        }
    } else {
        if(warningEl) warningEl.style.display = 'none';
    }

    const alu = alumnosCache.find(x => String(x.id) === String(currentPrintData.aid));
    const printAv = document.getElementById('printAvatarContainer');
    if(printAv) {
        const printFotoUrl = alu ? safeMediaUrl(alu.foto) : '';
        if(printFotoUrl) {
            printAv.innerHTML = `<img src="${escAttr(printFotoUrl)}" style="width:70px; height:70px; border-radius:50%; object-fit:cover; border:2px solid #e5e7eb;">`;
            printAv.style.display = 'block';
        } else {
            printAv.style.display = 'none';
        }
    }
    
    if($('printMeta')) $('printMeta').innerHTML = metaHtml;
    if($('printStudentName')) $('printStudentName').textContent = currentPrintData.name; 
    if($('printGroup')) { const nr = getNivelRealText(alu); $('printGroup').textContent = `Grupu: ${c.grupo || '—'}${isDiversificacionRow(alu) ? ` · Modalidá: ${nr}` : ''}`; }
    if($('printNotaProy')) $('printNotaProy').textContent = currentPrintData.notaProy.toFixed(2);
    if($('printNotaAcum')) $('printNotaAcum').textContent = currentPrintData.notaAcum.toFixed(2);
    
    const tb = $('printTbody');
    if(tb) {
      tb.innerHTML = '';
      for(const r of currentPrintData.rows) {
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td style="border-bottom:1px solid #e5e7eb; padding:10px;">
            <strong style="color:#111827;">${escHtml(r.codigo)}</strong> 
            <span style="font-size:10pt; color:#6b7280; display:block; margin-top:2px;">${escHtml(r.descripcion)}</span>
          </td>
          <td style="border-bottom:1px solid #e5e7eb; padding:10px; text-align:center; color:#374151;">${escHtml(String(r.peso ?? ''))}%</td>
          <td style="border-bottom:1px solid #e5e7eb; padding:10px; text-align:center; color:#374151;">${r.media_nivel ? r.media_nivel.toFixed(2) : '—'}</td>
          <td style="border-bottom:1px solid #e5e7eb; padding:10px; text-align:center; font-weight:bold; color:#111827;">${r.nota_criterio ? r.nota_criterio.toFixed(2) : '—'}</td>
        `;
        tb.appendChild(tr);
      }
    }
    document.body.setAttribute('data-print-target', 'alumno');
    window.print();
  });

  window.addEventListener('afterprint', () => {
    try { document.body.removeAttribute('data-print-target'); } catch(_) {}
  });

  listen('btnToggleLock', 'click', async () => {
      const c = ctx();
      if(!ctxOk(c)) return;
      
      const targetName = `el ${c.trimestre}º Trimestre pa ${c.nivel} (${c.materia}${c.grupo ? ' - '+c.grupo : ''})`;
      const aicion = window.__isClosed 
          ? `abrir de nuevu ${targetName}? Les notes volverán a recalcularse colos pesos actuales.` 
          : `zarrar y CONXELAR ${targetName}? Les notes y pesos van guardase tal como tán agora mesmu p'ayudar nel to boletín, y nun vas poder añader más evidencies hasta que lu reabres.`;
          
      if(!confirm(`¿Daveres quies ${aicion}`)) return;
      
      if($('lockText')) $('lockText').textContent = 'Procesando...';
      try {
          const payload = { curso: c.curso, trimestre: c.trimestre, nivel: c.nivel, materia: c.materia, grupo: c.grupo || null };
          await api('/cierre/toggle', {method:'POST', body: JSON.stringify(payload)});
          await loadAndShowNotesTab();
          
          if(tabs['panel'].classList.contains('active') || tabs['evidencias'].classList.contains('active')) {
             await refreshEval();
          }
      } catch(e) {
          alert("Fallu al camudar l'estáu del trimestre: " + (e.message || e));
          await loadAndShowNotesTab();
      }
  });

  // ===== CONFIGURACIÓN Y SIGURIDÁ (Backups) =====
  listen('btnBackupDl', 'click', async () => {
    if($('backupDlMsg')) $('backupDlMsg').textContent = 'Compilando tola información n\'archivu...';
    try {
      const res = await fetch(API_BASE + '/backup', { credentials: 'same-origin' });
      if(!res.ok) throw new Error(`HTTP ${res.status}`);
      const blob = await res.blob(); const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a'); a.href = url;
      const dateStr = new Date().toISOString().slice(0,10).replace(/-/g, '');
      a.download = `llumera_backup_${dateStr}.db`;
      document.body.appendChild(a); a.click(); a.remove(); window.URL.revokeObjectURL(url);
      if($('backupDlMsg')) $('backupDlMsg').innerHTML = '<span class="ok">¡Base de datos llocal baxada con ésitu!</span>';
    } catch (e) { if($('backupDlMsg')) $('backupDlMsg').innerHTML = `<span class="err">Fallu llocal: ${e.message}</span>`; }
  });

  listen('btnBackupUp', 'click', async () => {
    const f = $('backupFile') && $('backupFile').files && $('backupFile').files[0];
    if(!f) { if($('backupUpMsg')) $('backupUpMsg').innerHTML = '<span class="err">Seleiciona l\'archivu de siguridá.</span>'; return; }
    if(!confirm('¿Daveres quies machucar TOLA base de datos de Llumera por esti archivu? ESTO NUN SE PUE DESFACER.')) return;
    
    if($('backupUpMsg')) $('backupUpMsg').textContent = 'Unviando y machucando sistema...';
    try {
      const form = new FormData(); form.append('file', f);
      const res = await fetch(API_BASE + '/restore', { method: 'POST', credentials: 'same-origin', body: form });
      const ct = res.headers.get('content-type') || '';
      const data = ct.includes('application/json') ? await res.json().catch(()=>null) : await res.text().catch(()=>null);
      if(!res.ok) { const msg = (data && (data.erro || data.error)) ? (data.erro || data.error) : (typeof data==='string'?data:(`HTTP ${res.status}`)); throw new Error(msg); }
      if($('backupUpMsg')) $('backupUpMsg').innerHTML = '<span class="ok">¡Llumera restaurada! Recargando...</span>';
      setTimeout(() => window.location.reload(), 2000);
    } catch (e) { if($('backupUpMsg')) $('backupUpMsg').innerHTML = `<span class="err">Error críticu: ${e.message}</span>`; }
  });

  // --- Carga global inicial ---
  async function refreshAll(){
    try{ const c = await api('/criterios'); criteriosCache = c.datos || []; }catch(_){}
    try{ const a = await api('/alumnos'); alumnosCache = a.datos || []; }catch(_){}
    if($('panelCounts')) $('panelCounts').textContent = 'Criterios: ' + (criteriosCache.length||0) + ' | Estudiantes: ' + (alumnosCache.length||0);
    await loadAluSortPref();
    renderCriterios(); populateGruposFilter(); renderAlumnos();
    if($('cfgDiag')) $('cfgDiag').textContent = 'URL base llocal: ' + window.location.origin + API_BASE;
    
    await loadContextPref(); 
    await refreshContext(); 
  }

  listen('sidebarToggle', 'click', () => { document.querySelector('.app').classList.toggle('sidebar-collapsed'); });
  listen('appBrand', 'click', () => window.location.reload());

  // BOTÓN DE LOGOUT REAL
  listen('btnLogout', 'click', async () => {
    if(confirm('¿Daveres quies zarrar la to sesión? Naide va poder ver les notes ensin la clave.')) {
      try {
          await fetch(API_BASE + '/logout', {method: 'POST', credentials: 'same-origin'});
      } catch(e) {}
      window.location.reload(); 
    }
  });

  // --- BOOT (Arrincada del restolador) ---
  (async ()=>{
    const isAuth = await checkAuthStatus();
    if(isAuth) {
        await refreshAll();
        setTab('panel');
    }
  })();

});
</script>
</body>
</html>