TrackProd: IIoT QR Traceability System

/*
  TrackProd_Receptor_Principal.ino
  --------------------------------------------------------
  Nodo Receptor Principal (Arduino UNO Q). Es la estación central:

    - Tiene su PROPIA estación local: lector QR (UART -- integración
      pendiente, con fallback de botón), pantalla Nextion, torreta
      industrial + buzzer (módulo de 4 relés). Mismos componentes
      que el nodo remoto (TrackProd_QR_LoRa_TX.ino).
    - Además RECIBE por LoRa los paquetes YA ARMADOS por el nodo QR
      remoto: valida CRC+XOR, responde ACK y lleva estadísticas de
      enlace (recibidos, perdidos, duplicados, corruptos, RSSI/SNR,
      PDR/PER).
    - Expone TODO (estación local + estación remota) por Bridge para
      que Python lo suba a la web (get_data / notify). Es el ÚNICO
      nodo que habla con Python.
--------------------------------------------------------- */

#include <SPI.h>
#include <LoRa.h>
#include <Arduino_RouterBridge.h>
#include "SoftwareSerial.h"

// ============================================================
// LoRa
// ============================================================

#define LORA_SS   9
#define LORA_RST  8
#define LORA_DIO0 2
#define LORA_FREQ 433E6
#define SF        9
#define BW        200E3
#define CR        5
#define TX_POWER  17
#define SYNC_WORD 0x34

#define PACKET_DATA 0xA1
#define PACKET_ACK  0xA2

// ============================================================
// Nextion HMI (estación local del Principal)
// ============================================================

SoftwareSerial miSerial(4, 5); // RX, TX

// ============================================================
// Módulo de 4 relés (torreta + buzzer) -- estación local
// ============================================================

#define RELAY_VERDE     6
#define RELAY_AMARILLO  7
#define RELAY_ROJO      A0
#define RELAY_BUZZER    A1

// ============================================================
// Lector QR local (UART) -- integración pendiente
// ============================================================
// Cuando llegue el módulo físico se conecta por UART y se
// reemplaza el cuerpo de leerQR() por el parseo real.
// #define QR_RX_PIN ...
// #define QR_TX_PIN ...

#define BOTON_PRUEBA_PIN 3 // dispara una lectura simulada mientras no hay lector físico

// ============================================================
// CLAVE XOR (idéntica al nodo QR remoto)
// ============================================================

const uint8_t XOR_KEY[] = {
  0x52, 0xA7, 0x31, 0xC8,
  0x19, 0xD4, 0x6B, 0xE2
};
const uint8_t XOR_KEY_LEN = sizeof(XOR_KEY);

// ============================================================
// PAQUETES (idénticos al nodo QR remoto)
// ============================================================

struct __attribute__((packed)) DataPacket {
  uint16_t magic;
  uint8_t  type;
  uint32_t seq;
  uint32_t timestamp;
  uint16_t productoId;
  uint8_t  estado;         // estado local calculado en el nodo remoto
  uint16_t lecturasOk;
  uint16_t lecturasError;
  uint16_t crc;
};

struct __attribute__((packed)) AckPacket {
  uint16_t magic;
  uint8_t  type;
  uint32_t seq;
  uint32_t timestamp;
  uint16_t crc;
};

// ============================================================
// ESTADO -- ESTACIÓN LOCAL (propia del Principal)
// ============================================================

uint16_t productoLocal      = 0;
uint16_t lecturasOkLocal    = 0;
uint16_t lecturasErrorLocal = 0;
uint8_t  estadoLocal        = 0; // 0=ok 1=advertencia 2=critico

String rxNextion = "";
unsigned long ultimoDebounceBoton = 0;

// ============================================================
// ESTADO -- ESTACIÓN REMOTA (recibida por LoRa)
// ============================================================

uint32_t ultimoPaquete = 0;

uint16_t productoRemoto      = 0;
uint8_t  estadoRemoto        = 0;
uint16_t lecturasOkRemoto    = 0;
uint16_t lecturasErrorRemoto = 0;

uint32_t recibidos   = 0;
uint32_t perdidos    = 0;
uint32_t duplicados  = 0;
uint32_t corruptos   = 0;

long  rssiActual = 0;
float snrActual  = 0;
long  rssiMin = 0, rssiMax = -200;
float snrMin  = 100, snrMax = -100;
float rssiPromedio = 0, snrPromedio = 0;

unsigned long inicioPrueba = 0;

String lastData = "{}";

// ============================================================
// CRC16
// ============================================================

uint16_t calcularCRC(const uint8_t *data, size_t len) {
  uint16_t crc = 0xFFFF;
  for (size_t i = 0; i < len; i++) {
    crc ^= data[i];
    for (uint8_t j = 0; j < 8; j++) {
      if (crc & 1) crc = (crc >> 1) ^ 0xA001;
      else         crc >>= 1;
    }
  }
  return crc;
}

// ============================================================
// XOR
// ============================================================

void aplicarXOR(uint8_t *data, size_t len, uint32_t seq) {
  for (size_t i = 0; i < len; i++) {
    uint8_t seqByte = (seq >> ((i % 4) * 8)) & 0xFF;
    data[i] ^= XOR_KEY[i % XOR_KEY_LEN] ^ seqByte;
  }
}

// ============================================================
// NEXTION -- SOLO estación local
// ============================================================
// La estación remota (recibida por LoRa) se procesa por detrás
// y se sube a Python; no se muestra en esta pantalla.

void enviarNextion(const String &comando) {
  miSerial.print(comando);
  miSerial.write(0xFF);
  miSerial.write(0xFF);
  miSerial.write(0xFF);
}

void actualizarPantallaNextion() {

  enviarNextion("Menu.t0.txt=\"" + String(productoLocal) + "\"");
  enviarNextion("Menu.x0.val=" + String(lecturasOkLocal));
  enviarNextion("Menu.x1.val=" + String(lecturasErrorLocal));
  int picLocal = (estadoLocal == 0) ? 8 : (estadoLocal == 1) ? 7 : 6;
  enviarNextion("Menu.p1.pic=" + String(picLocal));
}

void revisarNextion() {
  while (miSerial.available()) {
    char c = miSerial.read();
    if ((uint8_t)c == 0xFF) continue;
    rxNextion += c;
    if (rxNextion.length() > 0) {
      actualizarPantallaNextion();
      rxNextion = "";
      return;
    }
    if (rxNextion.length() > 30) rxNextion = "";
  }
}

// ============================================================
// TORRETA INDUSTRIAL + BUZZER -- estación local del Principal
// ============================================================
// Solo refleja el estado LOCAL. El estado remoto ya fue
// señalizado físicamente en el nodo QR remoto; aquí solo se
// muestra en Nextion/JSON para no duplicar torretas por un
// evento que ocurrió en otra estación.

void aplicarSenalizacion() {
  digitalWrite(RELAY_VERDE,    estadoLocal == 0 ? HIGH : LOW);
  digitalWrite(RELAY_AMARILLO, estadoLocal == 1 ? HIGH : LOW);
  digitalWrite(RELAY_ROJO,     estadoLocal == 2 ? HIGH : LOW);
  digitalWrite(RELAY_BUZZER,   estadoLocal == 2 ? HIGH : LOW);
}

void actualizarEstadoLocal() {
  if (lecturasErrorLocal > 5) {
    estadoLocal = 2; // critico
  } else if (lecturasErrorLocal > 0) {
    estadoLocal = 1; // advertencia
  } else {
    estadoLocal = 0; // ok
  }
  aplicarSenalizacion();
}

// ============================================================
// LECTOR QR LOCAL -- integración pendiente
// ============================================================
//
// Devuelve true si hay una lectura nueva y la deja en productoId.
// Fallback con botón mientras no llega el lector físico; cuando
// llegue, solo se cambia el cuerpo de esta función.

bool leerQR(uint16_t &productoId) {

  // --- lectura real (pendiente) ---
  // if (SerialQR.available()) {
  //   // parsear trama del lector y extraer productoId
  //   return true;
  // }
  // return false;

  // --- fallback de prueba con botón ---
  if (digitalRead(BOTON_PRUEBA_PIN) == LOW) {
    if (millis() - ultimoDebounceBoton > 300) {
      ultimoDebounceBoton = millis();
      productoId = (uint16_t)(millis() % 1000); // id simulado
      return true;
    }
  }
  return false;
}

void registrarLecturaLocal(uint16_t productoId) {
  productoLocal = productoId;
  lecturasOkLocal++; // cuando llegue el lector real, un fallo de
                      // checksum/timeout debe incrementar
                      // lecturasErrorLocal en vez de OK
  actualizarEstadoLocal();
  actualizarPantallaNextion();
}

// ============================================================
// ACK (hacia el nodo remoto)
// ============================================================

void enviarACK(uint32_t seq, uint32_t timestamp) {

  AckPacket ack;
  ack.magic = 0xBEEF;
  ack.type  = PACKET_ACK;
  ack.seq = seq;
  ack.timestamp = timestamp;
  ack.crc = 0;
  ack.crc = calcularCRC((uint8_t *)&ack, sizeof(ack));

  uint8_t *datos = ((uint8_t *)&ack) + 7;
  aplicarXOR(datos, sizeof(AckPacket) - 7, ack.seq);

  LoRa.beginPacket();
  LoRa.write((uint8_t *)&ack, sizeof(ack));
  LoRa.endPacket();
}

// ============================================================
// JSON PARA PYTHON (estación local + estación remota)
// ============================================================

void armarJSON() {

  uint32_t esperados = recibidos + perdidos;
  float pdr = (esperados > 0) ? ((float)recibidos / esperados) * 100.0 : 0;
  float per = 100.0 - pdr;

  float segundos = (millis() - inicioPrueba) / 1000.0;
  float throughput = (segundos > 0) ? ((recibidos * sizeof(DataPacket) * 8.0) / segundos) / 1000.0 : 0;

  lastData  = "{";

  lastData += "\"local\":{";
  lastData += "\"producto\":" + String(productoLocal) + ",";
  lastData += "\"estado\":" + String(estadoLocal) + ",";
  lastData += "\"lecturas_ok\":" + String(lecturasOkLocal) + ",";
  lastData += "\"lecturas_error\":" + String(lecturasErrorLocal);
  lastData += "},";

  lastData += "\"remoto\":{";
  lastData += "\"producto\":" + String(productoRemoto) + ",";
  lastData += "\"estado\":" + String(estadoRemoto) + ",";
  lastData += "\"lecturas_ok\":" + String(lecturasOkRemoto) + ",";
  lastData += "\"lecturas_error\":" + String(lecturasErrorRemoto) + ",";
  lastData += "\"recibidos\":" + String(recibidos) + ",";
  lastData += "\"perdidos\":" + String(perdidos) + ",";
  lastData += "\"duplicados\":" + String(duplicados) + ",";
  lastData += "\"corruptos\":" + String(corruptos) + ",";
  lastData += "\"pdr\":" + String(pdr, 2) + ",";
  lastData += "\"per\":" + String(per, 2) + ",";
  lastData += "\"rssi\":" + String(rssiActual) + ",";
  lastData += "\"snr\":" + String(snrActual, 2) + ",";
  lastData += "\"rssi_avg\":" + String(rssiPromedio, 2) + ",";
  lastData += "\"snr_avg\":" + String(snrPromedio, 2) + ",";
  lastData += "\"throughput\":" + String(throughput, 4);
  lastData += "},";

  lastData += "\"uptime_ms\":" + String(millis());
  lastData += "}";
}

// ============================================================
// RECEPCIÓN LoRa (estación remota)
// ============================================================

void revisarLoRa() {

  int packetSize = LoRa.parsePacket();
  if (packetSize <= 0) return;

  if (packetSize != sizeof(DataPacket)) {
    while (LoRa.available()) LoRa.read();
    corruptos++;
    return;
  }

  DataPacket paquete;
  LoRa.readBytes((uint8_t *)&paquete, sizeof(paquete));

  rssiActual = LoRa.packetRssi();
  snrActual  = LoRa.packetSnr();

  if (paquete.magic != 0xBEEF || paquete.type != PACKET_DATA) return;

  uint32_t secuencia = paquete.seq;

  uint8_t *datos = ((uint8_t *)&paquete) + 7;
  aplicarXOR(datos, sizeof(DataPacket) - 7, secuencia);

  uint16_t crcRecibido = paquete.crc;
  paquete.crc = 0;
  uint16_t crcCalculado = calcularCRC((uint8_t *)&paquete, sizeof(paquete));

  if (crcRecibido != crcCalculado) {
    corruptos++;
    return;
  }

  enviarACK(secuencia, paquete.timestamp);

  bool duplicado = false;

  if (ultimoPaquete == 0) {
    ultimoPaquete = secuencia;
  } else if (secuencia == ultimoPaquete) {
    duplicados++;
    duplicado = true;
  } else if (secuencia > ultimoPaquete) {
    if (secuencia > ultimoPaquete + 1) {
      perdidos += secuencia - ultimoPaquete - 1;
    }
    ultimoPaquete = secuencia;
  }

  if (!duplicado) {

    recibidos++;

    if (recibidos == 1) {
      rssiMin = rssiActual; rssiMax = rssiActual;
      snrMin  = snrActual;  snrMax  = snrActual;
    }
    if (rssiActual < rssiMin) rssiMin = rssiActual;
    if (rssiActual > rssiMax) rssiMax = rssiActual;
    if (snrActual < snrMin) snrMin = snrActual;
    if (snrActual > snrMax) snrMax = snrActual;

    rssiPromedio += (rssiActual - rssiPromedio) / recibidos;
    snrPromedio  += (snrActual  - snrPromedio)  / recibidos;

    productoRemoto      = paquete.productoId;
    estadoRemoto        = paquete.estado;
    lecturasOkRemoto    = paquete.lecturasOk;
    lecturasErrorRemoto = paquete.lecturasError;
  }

  armarJSON();
  Bridge.notify("new_data", lastData);
}

// ============================================================
// BRIDGE (único punto de contacto con Python)
// ============================================================

String get_data() {
  return lastData;
}

// ============================================================
// SETUP
// ============================================================

void setup() {

  Bridge.begin();
  Bridge.provide("get_data", get_data);

  Monitor.begin();
  miSerial.begin(9600);

  pinMode(BOTON_PRUEBA_PIN, INPUT_PULLUP);
  pinMode(RELAY_VERDE, OUTPUT);
  pinMode(RELAY_AMARILLO, OUTPUT);
  pinMode(RELAY_ROJO, OUTPUT);
  pinMode(RELAY_BUZZER, OUTPUT);

  LoRa.setPins(LORA_SS, LORA_RST, LORA_DIO0);

  if (!LoRa.begin(LORA_FREQ)) {
    Monitor.println(F("ERROR: no se pudo iniciar LoRa"));
    while (1) delay(100);
  }

  LoRa.setSpreadingFactor(SF);
  LoRa.setSignalBandwidth(BW);
  LoRa.setCodingRate4(CR);
  LoRa.setSyncWord(SYNC_WORD);
  LoRa.setTxPower(TX_POWER);
  LoRa.enableCrc();

  inicioPrueba = millis();

  actualizarEstadoLocal();
  actualizarPantallaNextion();
  armarJSON();

  Monitor.println(F("=== TrackProd - Receptor Principal (local + remoto) listo ==="));
}

// ============================================================
// LOOP
// ============================================================

void loop() {

  uint16_t productoId;

  if (leerQR(productoId)) {
    registrarLecturaLocal(productoId);
  }

  revisarNextion();
  revisarLoRa();
}

"""
TrackProd — App Python (Arduino UNO Q)

Recibe por Bridge el JSON que arma el Receptor Principal
(armarJSON(): {"local": {...}, "remoto": {...}, "uptime_ms": ...}),
lo guarda en SQLite y lo publica en la WebUI en tiempo real.
"""

import json
import logging
from datetime import datetime, timezone, timedelta

from arduino.app_utils import *
from arduino.app_bricks.web_ui import WebUI
from arduino.app_bricks.dbstorage_sqlstore import SQLStore

# =====================================================================
# CONFIGURACIÓN
# =====================================================================
TZ_OFFSET_HOURS = -6
DB_PATH = "trackprod.db"
HISTORIAL_LIMIT = 500

logging.basicConfig(
    level=logging.INFO,
    format="%(asctime)s | %(levelname)-7s | %(message)s",
    datefmt="%H:%M:%S",
)
log = logging.getLogger("trackprod")

TZ = timezone(timedelta(hours=TZ_OFFSET_HOURS))


def now() -> str:
    return datetime.now(TZ).strftime("%Y-%m-%d %H:%M:%S")


# =====================================================================
# WebUI + BD
# =====================================================================
ui = WebUI()
db = SQLStore(DB_PATH)
db.start()

ultimo_raw = None


def leer_historial(limit: int = HISTORIAL_LIMIT) -> list:
    try:
        rows = db.read("lecturas", order_by="timestamp DESC", limit=limit)
        return list(reversed(rows))
    except TypeError:
        rows = db.read("lecturas", order_by="timestamp DESC")
        return list(reversed(rows))[-limit:]
    except Exception:
        log.exception("Error leyendo historial")
        return []


def on_get_initial_state(client, data):
    historial = leer_historial()
    ui.send_message("full_data", {"historial": historial}, client)

    if historial:
        u = historial[-1]
        log.info(
            "Estado inicial -> %d registros | último: local=%s remoto=%s @ %s",
            len(historial), u.get("local_producto"), u.get("remoto_producto"),
            u.get("timestamp", "?"),
        )


ui.on_message("get_initial_state", on_get_initial_state)


def on_new_data(raw: str):
    """Se dispara con cada Bridge.notify("new_data", ...) del Receptor
    Principal. `raw` es el JSON tal cual lo arma armarJSON() en el .ino:
    {"local": {...}, "remoto": {...}, "uptime_ms": ...}
    """
    global ultimo_raw

    if not raw or raw.strip() == "{}":
        return

    if raw == ultimo_raw:
        return

    try:
        paquete = json.loads(raw)
    except json.JSONDecodeError as e:
        log.warning("JSON inválido: %s | raw=%s", e, raw)
        return

    local = paquete.get("local", {})
    remoto = paquete.get("remoto", {})

    registro = {
        "timestamp": now(),
        "local_producto": local.get("producto"),
        "local_estado": local.get("estado"),
        "local_lecturas_ok": local.get("lecturas_ok"),
        "local_lecturas_error": local.get("lecturas_error"),
        "remoto_producto": remoto.get("producto"),
        "remoto_estado": remoto.get("estado"),
        "remoto_lecturas_ok": remoto.get("lecturas_ok"),
        "remoto_lecturas_error": remoto.get("lecturas_error"),
        "recibidos": remoto.get("recibidos"),
        "perdidos": remoto.get("perdidos"),
        "duplicados": remoto.get("duplicados"),
        "corruptos": remoto.get("corruptos"),
        "pdr": remoto.get("pdr"),
        "per": remoto.get("per"),
        "rssi": remoto.get("rssi"),
        "snr": remoto.get("snr"),
        "rssi_avg": remoto.get("rssi_avg"),
        "snr_avg": remoto.get("snr_avg"),
        "throughput": remoto.get("throughput"),
        "uptime_ms": paquete.get("uptime_ms"),
    }

    try:
        db.store("lecturas", registro)
    except Exception:
        log.exception("Error guardando en BD, se descarta el dato")
        return

    ui.send_message("new_reading", registro)
    ultimo_raw = raw

    log.info(
        "Local: prod=%s estado=%s ok=%s err=%s | Remoto: prod=%s estado=%s "
        "ok=%s err=%s pdr=%s%%",
        registro["local_producto"], registro["local_estado"],
        registro["local_lecturas_ok"], registro["local_lecturas_error"],
        registro["remoto_producto"], registro["remoto_estado"],
        registro["remoto_lecturas_ok"], registro["remoto_lecturas_error"],
        registro["pdr"],
    )


Bridge.provide("new_data", on_new_data)


# =====================================================================
# ARRANQUE
# =====================================================================
if __name__ == "__main__":
    log.info("=" * 60)
    log.info("INICIANDO TRACKPROD APP")
    log.info("=" * 60)
    log.info("Esperando datos push del Receptor Principal...")
    App.run()

let USERS = [
  { id: 1, name: 'Admin Principal', username: 'admin', password: 'admin123', role: 'admin', status: 'activo', created: '2024-01-15' },
  { id: 2, name: 'Carlos Herrera', username: 'operador1', password: 'op123', role: 'operador', status: 'activo', created: '2024-02-03' },
  { id: 3, name: 'Viewer General', username: 'viewer', password: 'view123', role: 'viewer', status: 'activo', created: '2024-03-01' },
];
let nextId = 4;
let currentUser = null;
const ROLE_LABELS = { admin: 'Administrador', operador: 'Operador', viewer: 'Visualizador' };
const ROLE_CLASSES = { admin: 'role-admin', operador: 'role-op', viewer: 'role-viewer' };
const ROLE_ICONS = { admin: '👑', operador: '⚙️', viewer: '👁' };
const AVATAR_COLORS = [['#fee2e2','#9b1c1c'],['#fef3c7','#92400e'],['#dcfce7','#166534'],['#eff6ff','#1d4ed8'],['#ede9fe','#5b21b6'],['#ccfbf1','#0d9488']];
function fillDemo(u, p) { document.getElementById('l-user').value = u; document.getElementById('l-pass').value = p; document.getElementById('l-err').style.display = 'none'; }
function applyBranding(show) {
  const top = document.getElementById('lb-top'), name = document.getElementById('lb-name');
  const sbName = document.getElementById('sbb-name'), sbSub = document.getElementById('sbb-sub');
  if (show) {
    if (top) top.textContent = 'Trazabilidad';
    if (name) name.innerHTML = 'LOGUI<span>NEXT</span>';
    if (sbName) sbName.innerHTML = 'LOGUI<span>NEXT</span>';
    if (sbSub) sbSub.textContent = 'Trazabilidad QR';
    document.title = 'LOGUINEXT — Trazabilidad de Materiales por QR';
  } else {
    if (top) top.textContent = 'Sistema';
    if (name) name.innerHTML = 'Track<span>Prod</span>';
    if (sbName) sbName.innerHTML = 'Track<span>Prod</span>';
    if (sbSub) sbSub.textContent = 'Trazabilidad QR';
    document.title = 'TrackProd — Trazabilidad de Materiales por QR';
  }
}
function toggleLoginLogo() {
  const show = document.getElementById('l-showlogo').checked;
  applyBranding(show);
  localStorage.setItem('loguinext-showlogo', show ? '1' : '0');
}
(function initLoginLogoPref() {
  const saved = localStorage.getItem('loguinext-showlogo');
  document.addEventListener('DOMContentLoaded', () => {
    if (saved === '0') { document.getElementById('l-showlogo').checked = false; }
    applyBranding(saved !== '0');
  });
})();
function doLogin() {
  const u = document.getElementById('l-user').value.trim();
  const p = document.getElementById('l-pass').value;
  const found = USERS.find(x => x.username === u && x.password === p && x.status === 'activo');
  if (!found) { const e = document.getElementById('l-err'); e.style.display = 'flex'; e.style.alignItems = 'center'; e.style.gap = '8px'; return; }
  currentUser = found;
  document.getElementById('login-screen').style.display = 'none';
  document.getElementById('app-screen').style.display = 'block';
  applyRoleUI();
  initOverview();
}
function doLogout() {
  stopScan();
  currentUser = null;
  document.getElementById('login-screen').style.display = 'flex';
  document.getElementById('app-screen').style.display = 'none';
  document.getElementById('l-user').value = ''; document.getElementById('l-pass').value = '';
  document.getElementById('l-err').style.display = 'none';
}
function applyRoleUI() {
  if (!currentUser) return;
  document.getElementById('sb-uname').textContent = currentUser.username;
  document.getElementById('sb-role').textContent = ROLE_LABELS[currentUser.role] || currentUser.role;
  const [bg, cl] = AVATAR_COLORS[currentUser.id % AVATAR_COLORS.length];
  const av = document.getElementById('sb-avatar'); av.style.background = bg; av.style.color = cl; av.textContent = currentUser.name.charAt(0).toUpperCase();
  const badge = document.getElementById('tb-role-badge'); badge.style.display = '';
  if (currentUser.role === 'admin') { badge.style.background = 'rgba(192,22,26,.1)'; badge.style.color = 'var(--red-dark)'; badge.innerHTML = '👑 ADMIN'; }
  else if (currentUser.role === 'operador') { badge.style.background = '#dcfce7'; badge.style.color = '#166534'; badge.innerHTML = '⚙️ OPERADOR'; }
  else { badge.style.background = 'var(--gray-100)'; badge.style.color = 'var(--gray-600)'; badge.innerHTML = '👁 VIEWER'; }
  document.getElementById('nav-users').style.display = isAdmin() ? '' : 'none';
  document.getElementById('bn-users').style.display = isAdmin() ? '' : 'none';
  const editable = canEdit();
  const pairs = [['mat-form-locked', 'mat-form-fields'], ['emp-form-locked', 'emp-form-fields'], ['resp-form-locked', 'resp-form-fields']];
  pairs.forEach(([lockId, fieldId]) => {
    const lockEl = document.getElementById(lockId), fieldEl = document.getElementById(fieldId);
    if (lockEl) lockEl.style.display = editable ? 'none' : 'block';
    if (fieldEl) fieldEl.style.display = editable ? 'block' : 'none';
  });
}
function isAdmin() { return currentUser?.role === 'admin'; }
function canEdit() { return currentUser?.role === 'admin' || currentUser?.role === 'operador'; }
function requirePermission(msg) { showToast(msg || 'Tu rol no tiene permiso para esta acción', 'fa-lock', '#b91c1c'); }
document.addEventListener('keydown', e => { if (document.getElementById('login-screen').style.display !== 'none' && e.key === 'Enter') doLogin(); });
const ESTADOS = {
  DISPONIBLE:  { label: 'Disponible',  cls: 's-disp' },
  RECIBIDO:    { label: 'Recibido',    cls: 's-disp' },
  PRESTADO:    { label: 'Prestado',    cls: 's-prest' },
  EN_USO:      { label: 'En uso',      cls: 's-uso' },
  DEVUELTO:    { label: 'Devuelto',    cls: 's-disp' },
  TRANSFERIDO: { label: 'Transferido', cls: 's-transf' },
  REPARACION:  { label: 'Reparación',  cls: 's-rep' },
  DAÑADO:      { label: 'Dañado',      cls: 's-dan' },
  EXTRAVIADO:  { label: 'Extraviado',  cls: 's-ext' },
  BAJA:        { label: 'Baja',        cls: 's-baja' },
};
function estLabel(k) { return ESTADOS[k]?.label || k; }
function estCls(k) { return ESTADOS[k]?.cls || 's-baja'; }
function sb(k) { return `<span class="sb ${estCls(k)}">${estLabel(k)}</span>`; }
const p2 = n => String(n).padStart(2, '0');
const nowStr = () => { const d = new Date(); return `${d.getFullYear()}-${p2(d.getMonth()+1)}-${p2(d.getDate())} ${p2(d.getHours())}:${p2(d.getMinutes())}`; };
const todayISO = () => { const d = new Date(); return `${d.getFullYear()}-${p2(d.getMonth()+1)}-${p2(d.getDate())}`; };
const nowHM = () => { const d = new Date(); return `${p2(d.getHours())}:${p2(d.getMinutes())}`; };
let EMPRESAS = [
  { id: 1, name: 'Empresa Juan', contact: '[email protected]' },
  { id: 2, name: 'Empresa Pérez', contact: '[email protected]' },
];
let nextEmpId = 3;
let RESPONSABLES = [
  { id: 1, nombre: 'Pepe', nota: '' },
  { id: 2, nombre: 'Luis', nota: '' },
  { id: 3, nombre: 'Paco', nota: '' },
  { id: 4, nombre: 'David', nota: 'Alumno' },
];
let nextRespId = 5;
function addResponsableIfNew(nombre) {
  if (!nombre) return;
  const clean = nombre.trim();
  if (!clean) return;
  const exists = RESPONSABLES.find(r => r.nombre.toLowerCase() === clean.toLowerCase());
  if (!exists) RESPONSABLES.push({ id: nextRespId++, nombre: clean, nota: '' });
  fillDatalists();
}
let nextMatId = 4;
let nextLoteId = 2;
let PRODUCT_LETTERS = {};   // nombre de material (lower) -> letra
let PRODUCT_LETTER_SEQ = 0; // siguiente letra libre
let PRODUCT_SEQ = {};       // letra -> consecutivo (00-99)
function letraDeProducto(nombre) {
  const key = (nombre || '').trim().toLowerCase();
  if (PRODUCT_LETTERS[key]) return PRODUCT_LETTERS[key];
  const letra = String.fromCharCode(65 + (PRODUCT_LETTER_SEQ % 26));
  PRODUCT_LETTER_SEQ++;
  PRODUCT_LETTERS[key] = letra;
  return letra;
}
function siguienteConsecutivo(letra) {
  const n = (PRODUCT_SEQ[letra] || 0) % 100;
  PRODUCT_SEQ[letra] = n + 1;
  return n;
}
function generarCodigoQR(nombre, offsetMs = 0) {
  const d = new Date(Date.now() + offsetMs);
  const hh = p2(d.getHours()), mi = p2(d.getMinutes()), ss = p2(d.getSeconds());
  const ms = p2(Math.floor(d.getMilliseconds() / 10)); // 000-999 → 00-99
  const letra = letraDeProducto(nombre);
  const num = p2(siguienteConsecutivo(letra));
  return `${hh}${mi}${ss}${ms}${letra}${num}`;
}
let MATERIALES = [
  {
    id: 'MAT-0001', codigo: '090000A00', nombre: 'Arduino Uno R3', empresaId: 1, empresaNombre: 'Empresa Juan',
    loteId: 'LOTE-0001', estado: 'EN_USO', custodioActual: 'David', ubicacion: 'Laboratorio',
    descripcion: 'Arduino Uno R3 con cable USB', observaciones: '', prestamo: null,
    historial: [
      { tipo: 'Recepción', de: 'Empresa Juan', para: 'Pepe', fecha: '2025-04-10 09:00', nota: 'Recepción inicial — lote de 2 Arduinos', por: 'Carlos Herrera', estado: 'RECIBIDO' },
      { tipo: 'Préstamo', de: 'Pepe', para: 'David', fecha: '2025-04-12 10:15', nota: 'Prestado para práctica de alumno', por: 'Carlos Herrera', estado: 'PRESTADO' },
      { tipo: 'Uso', de: 'David', para: 'Prototipo Estación Meteorológica', fecha: '2025-04-13 16:40', nota: 'Instalado y funcionando correctamente', por: 'David', estado: 'EN_USO' },
    ]
  },
  {
    id: 'MAT-0002', codigo: '090005A01', nombre: 'Arduino Uno R3', empresaId: 1, empresaNombre: 'Empresa Juan',
    loteId: 'LOTE-0001', estado: 'DISPONIBLE', custodioActual: 'Pepe', ubicacion: 'Laboratorio',
    descripcion: 'Arduino Uno R3', observaciones: '', prestamo: null,
    historial: [
      { tipo: 'Recepción', de: 'Empresa Juan', para: 'Pepe', fecha: '2025-04-10 09:00', nota: 'Recepción inicial — lote de 2 Arduinos', por: 'Carlos Herrera', estado: 'RECIBIDO' },
    ]
  },
  {
    id: 'MAT-0003', codigo: '081530B00', nombre: 'Sensor DHT22', empresaId: 2, empresaNombre: 'Empresa Pérez',
    loteId: null, estado: 'DISPONIBLE', custodioActual: 'Pepe', ubicacion: 'Almacén',
    descripcion: 'Sensor de temperatura y humedad', observaciones: '', prestamo: null,
    historial: [
      { tipo: 'Recepción', de: 'Empresa Pérez', para: 'Pepe', fecha: '2025-04-14 08:30', nota: 'Recepción inicial del material', por: 'Carlos Herrera', estado: 'RECIBIDO' },
    ]
  },
];
// Sincroniza el generador de códigos con los materiales de ejemplo que ya traen letra asignada
PRODUCT_LETTERS['arduino uno r3'] = 'A'; PRODUCT_LETTER_SEQ = 1; PRODUCT_SEQ['A'] = 2;
PRODUCT_LETTERS['sensor dht22'] = 'B'; PRODUCT_LETTER_SEQ = 2; PRODUCT_SEQ['B'] = 1;
function empresaNombre(id) { const e = EMPRESAS.find(x => x.id === id); return e ? e.name : '—'; }
function matEmpresaNombre(m) { return m.empresaNombre || empresaNombre(m.empresaId) || 'Empresa eliminada'; }
function isVencido(m) { return m.prestamo && m.prestamo.fechaEsperada && m.estado === 'PRESTADO' && m.prestamo.fechaEsperada < todayISO(); }
function tick() {
  const n = new Date();
  const t = `${p2(n.getHours())}:${p2(n.getMinutes())}:${p2(n.getSeconds())}`;
  const top = document.getElementById('top-clk'); if (top) top.textContent = t;
}
setInterval(tick, 1000); tick();
function showToast(msg, icon = 'fa-circle-check', color = '#22c55e') {
  const box = document.getElementById('toast-box');
  const el = document.createElement('div'); el.className = 'toast-msg';
  el.innerHTML = `<i class="fa-solid ${icon}" style="color:${color}"></i>${msg}`;
  box.appendChild(el);
  setTimeout(() => { el.style.opacity = '0'; el.style.transition = 'opacity .3s'; setTimeout(() => el.remove(), 300); }, 2800);
}
const META = {
  overview: ['DASHBOARD', 'Vista general de materiales'],
  materiales: ['MATERIALES', 'Registro, catálogo y generación de QR'],
  empresas: ['EMPRESAS', 'Empresas que entregan materiales'],
  responsables: ['RESPONSABLES', 'Personas que reciben, usan o custodian materiales'],
  escanear: ['ESCANEAR QR', 'Cámara, celular o lector físico'],
  users: ['GESTIÓN DE USUARIOS', 'Solo administradores pueden acceder'],
};
function go(id) {
  if (id === 'users' && currentUser?.role !== 'admin') { showToast('Acceso restringido a administradores', 'fa-lock', '#b91c1c'); return; }
  if (id !== 'escanear') stopScan();
  document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
  document.getElementById('view-' + id).classList.add('active');
  const [t, s] = META[id] || [id.toUpperCase(), ''];
  document.getElementById('tb-t').textContent = t; document.getElementById('tb-s').textContent = s;
  document.querySelectorAll('.nav-link-tp').forEach(n => n.classList.toggle('active', (n.getAttribute('onclick') || '').includes(`'${id}'`)));
  document.querySelectorAll('.bn-item').forEach(n => n.classList.toggle('active', (n.getAttribute('onclick') || '').includes(`'${id}'`)));
  if (id === 'materiales') { renderMats(); fillEmpresaSelect(); fillDatalists(); }
  if (id === 'empresas') renderEmpresas();
  if (id === 'responsables') renderResponsables();
  if (id === 'users') renderUsers();
  if (id === 'escanear') { setTimeout(() => document.getElementById('scan-manual')?.focus(), 100); }
  document.getElementById('page-content').scrollTo(0, 0);
}
function refreshData() {
  const ic = document.getElementById('ricon'); ic.style.animation = 'spin .7s linear'; setTimeout(() => ic.style.animation = '', 700);
  initOverview();
}
function initOverview() {
  document.getElementById('k-total').textContent = MATERIALES.length;
  document.getElementById('k-disp').textContent = MATERIALES.filter(m => m.estado === 'DISPONIBLE').length;
  document.getElementById('k-prest').textContent = MATERIALES.filter(m => m.estado === 'PRESTADO' || m.estado === 'EN_USO').length;
  document.getElementById('k-rep').textContent = MATERIALES.filter(m => m.estado === 'REPARACION').length;
  document.getElementById('k-ext').textContent = MATERIALES.filter(m => m.estado === 'EXTRAVIADO').length;
  document.getElementById('k-emp').textContent = EMPRESAS.length;
  const moves = [];
  MATERIALES.forEach(m => m.historial.forEach(h => moves.push({ ...h, matId: m.id, matNombre: m.nombre })));
  moves.sort((a, b) => b.fecha.localeCompare(a.fecha));
  document.getElementById('dash-feed').innerHTML = moves.slice(0, 6).map(h => `
    <div class="d-flex align-items-center gap-2 p-2 mb-2 rounded" style="background:var(--gray-50);border:1px solid var(--gray-200)">
      <div style="width:34px;height:34px;background:var(--red-muted);border-radius:8px;display:grid;place-items:center;color:var(--red);flex-shrink:0">
        <i class="fa-solid fa-arrow-right-arrow-left" style="font-size:12px"></i>
      </div>
      <div style="flex:1;min-width:0">
        <div class="fw-bold" style="font-size:12.5px">${h.tipo}: <span class="mono">${h.matId}</span></div>
        <div style="font-size:11px;color:var(--gray-400)">${h.de} → ${h.para}</div>
      </div>
      <div class="mono" style="font-size:9.5px;color:var(--gray-400);flex-shrink:0">${h.fecha.slice(5)}</div>
    </div>`).join('') || '<div style="text-align:center;color:var(--gray-400);font-size:13px;padding:20px">Aún no hay movimientos registrados</div>';
  const prestamos = moves.filter(h => h.tipo === 'Préstamo' || h.tipo === 'Devolución').slice(0, 6);
  document.getElementById('dash-prestamos').innerHTML = prestamos.map(h => `
    <div class="d-flex align-items-center gap-2 p-2 mb-2 rounded" style="background:var(--gray-50);border:1px solid var(--gray-200)">
      <i class="fa-solid ${h.tipo === 'Préstamo' ? 'fa-arrow-up text-primary' : 'fa-arrow-down text-success'}" style="font-size:12px;width:16px;text-align:center"></i>
      <div style="flex:1;min-width:0">
        <div class="fw-bold" style="font-size:12.5px">${h.tipo} · ${h.matId}</div>
        <div style="font-size:11px;color:var(--gray-400)">${h.de} → ${h.para}</div>
      </div>
      <div class="mono" style="font-size:9.5px;color:var(--gray-400)">${h.fecha.slice(5)}</div>
    </div>`).join('') || '<div style="text-align:center;color:var(--gray-400);font-size:12px;padding:14px">Sin préstamos o devoluciones aún</div>';
  const today = todayISO();
  const hoy = moves.filter(h => h.fecha.startsWith(today)).length;
  const porEmp = {};
  MATERIALES.forEach(m => { const n = matEmpresaNombre(m); porEmp[n] = (porEmp[n] || 0) + 1; });
  const porResp = {};
  MATERIALES.forEach(m => { porResp[m.custodioActual] = (porResp[m.custodioActual] || 0) + 1; });
  document.getElementById('dash-por-empresa').innerHTML = `
    <div style="font-size:10px;color:var(--gray-400);font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px">Por empresa &nbsp;·&nbsp; ${hoy} movimiento(s) hoy</div>
    ${Object.entries(porEmp).map(([n, c]) => `
      <div class="d-flex align-items-center justify-content-between" style="font-size:12px;padding:4px 0">
        <span>${n}</span><span class="mono fw-bold">${c}</span>
      </div>`).join('') || '<div style="font-size:12px;color:var(--gray-400)">—</div>'}`;
  document.getElementById('dash-por-resp').innerHTML = `
    <div style="font-size:10px;color:var(--gray-400);font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px">Por responsable</div>
    ${Object.entries(porResp).map(([n, c]) => `
      <div class="d-flex align-items-center justify-content-between" style="font-size:12px;padding:4px 0">
        <span>${n}</span><span class="mono fw-bold">${c}</span>
      </div>`).join('') || '<div style="font-size:12px;color:var(--gray-400)">—</div>'}`;
  document.getElementById('rec-tbl').innerHTML =
    `<thead><tr><th>QR</th><th>ID</th><th>Material</th><th>Empresa</th><th>Responsable</th><th>Estado</th><th>Ubicación</th><th>Últ. mov.</th><th></th></tr></thead>
     <tbody>${MATERIALES.slice(0, 8).map(matRow).join('')}</tbody>`;
}
function matRow(m) {
  const ultimo = m.historial[m.historial.length - 1];
  const vencido = isVencido(m) ? ` <span class="sb s-dan" title="Fecha esperada: ${m.prestamo.fechaEsperada}"><i class="fa-solid fa-clock"></i> Vencido</span>` : '';
  return `<tr>
    <td><span class="qrt" style="cursor:pointer" onclick="openMatModal('${m.id}')"><i class="fa-solid fa-qrcode"></i></span></td>
    <td class="mono fw-bold" style="font-size:12px;color:var(--red)">${m.id}</td>
    <td class="fw-bold">${m.nombre}${m.loteId ? ` <span class="mono" style="font-size:9px;color:var(--gray-400);cursor:pointer" onclick="openLoteModal('${m.loteId}')">[${m.loteId}]</span>` : ''}</td>
    <td>${matEmpresaNombre(m)}</td>
    <td>${m.custodioActual}</td>
    <td>${sb(m.estado)}${vencido}</td>
    <td style="font-size:12px;color:var(--gray-600)"><i class="fa-solid fa-location-dot me-1" style="color:var(--gray-400)"></i>${m.ubicacion || '—'}</td>
    <td class="mono" style="font-size:10.5px;color:var(--gray-400)">${ultimo ? ultimo.fecha : '—'}</td>
    <td><button class="abtn" onclick="openMatModal('${m.id}')">VER</button></td>
  </tr>`;
}
function loteResumen(loteId) {
  const items = MATERIALES.filter(m => m.loteId === loteId);
  return { total: items.length, items };
}
function openLoteModal(loteId) {
  const { items } = loteResumen(loteId);
  if (!items.length) return;
  const rows = items.map(m => `
    <tr>
      <td class="mono fw-bold" style="font-size:12px;color:var(--red)">${m.id}</td>
      <td><span class="qrt">${m.codigo}</span></td>
      <td>${m.custodioActual}</td>
      <td>${sb(m.estado)}</td>
      <td><button class="abtn" onclick="openMatModal('${m.id}')">VER</button></td>
    </tr>`).join('');
  document.getElementById('mat-modal-body').innerHTML = `
    <div class="d-flex align-items-start justify-content-between mb-3">
      <div>
        <div class="cond fw-bold" style="font-size:18px;color:var(--red)">${loteId}</div>
        <div style="font-size:12px;color:var(--gray-400)">${items.length} unidades de "${items[0].nombre}" recibidas de ${matEmpresaNombre(items[0])} en el mismo lote — cada una con su propio QR e historial.</div>
      </div>
      <button type="button" class="ibtn" data-bs-dismiss="modal">✕</button>
    </div>
    <div class="tbl-wrap"><table class="tbl">
      <thead><tr><th>ID</th><th>Código QR</th><th>Custodio actual</th><th>Estado</th><th></th></tr></thead>
      <tbody>${rows}</tbody>
    </table></div>`;
  new bootstrap.Modal(document.getElementById('matModal')).show();
}
function fillDatalists() {
  const respList = document.getElementById('resp-list');
  if (respList) respList.innerHTML = RESPONSABLES.map(r => `<option value="${r.nombre}">`).join('');
  const ubicList = document.getElementById('ubic-list');
  if (ubicList) {
    const ubics = [...new Set(MATERIALES.map(m => m.ubicacion).filter(Boolean))];
    ubicList.innerHTML = ubics.map(u => `<option value="${u}">`).join('');
  }
}
function fillEmpresaSelect() {
  const sel = document.getElementById('nm-empresa');
  sel.innerHTML = EMPRESAS.map(e => `<option value="${e.id}">${e.name}</option>`).join('') || '<option value="">Registra una empresa primero</option>';
}
function registrarEmpresa() {
  if (!canEdit()) { requirePermission('Tu rol (Visualizador) no puede registrar empresas.'); return; }
  const name = document.getElementById('ne-nombre').value.trim();
  const contact = document.getElementById('ne-contacto').value.trim();
  if (!name) { showToast('Ingresa el nombre de la empresa', 'fa-triangle-exclamation', '#d97706'); return; }
  EMPRESAS.push({ id: nextEmpId++, name, contact });
  document.getElementById('ne-nombre').value = ''; document.getElementById('ne-contacto').value = '';
  renderEmpresas(); fillEmpresaSelect();
  showToast(`Empresa "${name}" registrada`, 'fa-building', '#166534');
}
function renderEmpresas() {
  const rows = EMPRESAS.map(e => {
    const count = MATERIALES.filter(m => m.empresaId === e.id).length;
    return `<tr>
      <td class="fw-bold" style="font-size:13px">${e.name}</td>
      <td style="font-size:12px;color:var(--gray-400)">${e.contact || '—'}</td>
      <td class="mono fw-bold" style="text-align:center">${count}</td>
      <td>
        <div class="d-flex gap-1 flex-wrap">
          <button class="abtn" onclick="openEmpresaModal(${e.id})"><i class="fa-solid fa-address-card me-1"></i>Ficha</button>
          ${isAdmin() ? `<button class="abtn-red" onclick="askDeleteEmpresa(${e.id})"><i class="fa-solid fa-trash"></i></button>` : ''}
        </div>
      </td>
    </tr>`;
  }).join('');
  document.getElementById('emp-tbl').innerHTML = `
    <thead><tr><th>Empresa</th><th>Contacto</th><th>Materiales entregados</th><th></th></tr></thead>
    <tbody>${rows || '<tr><td colspan="4" style="text-align:center;color:var(--gray-400);padding:20px">Sin empresas registradas</td></tr>'}</tbody>`;
}
function verMaterialesDeEmpresa(id) {
  const modal = bootstrap.Modal.getInstance(document.getElementById('empModal')); if (modal) modal.hide();
  go('materiales');
  setTimeout(() => { document.getElementById('ms-inp').value = empresaNombre(id); filterMats(); }, 50);
}
function agregarMaterialDeEmpresa(id) {
  const modal = bootstrap.Modal.getInstance(document.getElementById('empModal')); if (modal) modal.hide();
  go('materiales');
  setTimeout(() => { fillEmpresaSelect(); document.getElementById('nm-empresa').value = id; document.getElementById('nm-nombre').focus(); }, 50);
}
function openEmpresaModal(id) {
  const e = EMPRESAS.find(x => x.id === id); if (!e) return;
  const mats = MATERIALES.filter(m => m.empresaId === id);
  const disp = mats.filter(m => m.estado === 'DISPONIBLE').length;
  const prest = mats.filter(m => m.estado === 'PRESTADO').length;
  const uso = mats.filter(m => m.estado === 'EN_USO').length;
  const rep = mats.filter(m => m.estado === 'REPARACION').length;
  const moves = [];
  mats.forEach(m => m.historial.forEach(h => moves.push({ ...h, matId: m.id })));
  moves.sort((a, b) => b.fecha.localeCompare(a.fecha));
  document.getElementById('emp-modal-body').innerHTML = `
    <div class="d-flex align-items-start justify-content-between mb-3">
      <div>
        <div class="cond fw-bold" style="font-size:20px;color:var(--red)">${e.name}</div>
        <div style="font-size:12px;color:var(--gray-400)">${e.contact || 'Sin contacto registrado'}</div>
      </div>
      <button type="button" class="ibtn" data-bs-dismiss="modal">✕</button>
    </div>
    <div class="modal-data-grid mb-3">
      <div style="background:var(--red-muted);border-radius:10px;padding:12px"><div style="font-size:9px;color:var(--gray-400);font-weight:800;text-transform:uppercase">Registrados</div><div class="fw-bold" style="font-size:18px">${mats.length}</div></div>
      <div style="background:#f0fdf4;border-radius:10px;padding:12px"><div style="font-size:9px;color:var(--gray-400);font-weight:800;text-transform:uppercase">Disponibles</div><div class="fw-bold" style="font-size:18px">${disp}</div></div>
      <div style="background:#eff6ff;border-radius:10px;padding:12px"><div style="font-size:9px;color:var(--gray-400);font-weight:800;text-transform:uppercase">Prestados</div><div class="fw-bold" style="font-size:18px">${prest}</div></div>
      <div style="background:#fef3c7;border-radius:10px;padding:12px"><div style="font-size:9px;color:var(--gray-400);font-weight:800;text-transform:uppercase">En uso</div><div class="fw-bold" style="font-size:18px">${uso}</div></div>
    </div>
    ${rep ? `<div style="font-size:12px;color:#9a3412;margin-bottom:10px"><i class="fa-solid fa-screwdriver-wrench me-1"></i>${rep} material(es) en reparación</div>` : ''}
    <div class="slbl">Últimos movimientos de sus materiales</div>
    <div style="max-height:180px;overflow:auto;margin-bottom:14px">
      ${moves.slice(0, 6).map(h => `<div style="font-size:12px;padding:5px 0;border-bottom:1px solid var(--gray-100)"><span class="mono fw-bold" style="color:var(--red)">${h.matId}</span> — ${h.tipo}: ${h.de} → ${h.para} <span class="mono" style="color:var(--gray-400);font-size:10px">(${h.fecha})</span></div>`).join('') || '<div style="font-size:12px;color:var(--gray-400)">Sin movimientos aún</div>'}
    </div>
    <div class="d-flex gap-2 flex-wrap">
      <button class="abtn" onclick="verMaterialesDeEmpresa(${e.id})"><i class="fa-solid fa-boxes-stacked me-1"></i>Ver materiales</button>
      ${canEdit() ? `<button class="abtn-green" onclick="agregarMaterialDeEmpresa(${e.id})"><i class="fa-solid fa-plus me-1"></i>Agregar material</button>
      <button class="abtn-blue" onclick="editarEmpresa(${e.id})"><i class="fa-solid fa-pen me-1"></i>Editar empresa</button>` : ''}
    </div>`;
  new bootstrap.Modal(document.getElementById('empModal')).show();
}
function editarEmpresa(id) {
  if (!canEdit()) { requirePermission('Tu rol no puede editar empresas.'); return; }
  const e = EMPRESAS.find(x => x.id === id); if (!e) return;
  const name = prompt('Nombre de la empresa:', e.name);
  if (name === null) return;
  const contact = prompt('Contacto:', e.contact || '');
  if (name.trim()) e.name = name.trim();
  e.contact = (contact || '').trim();
  MATERIALES.forEach(m => { if (m.empresaId === id) m.empresaNombre = e.name; });
  renderEmpresas(); openEmpresaModal(id);
  showToast('Empresa actualizada', 'fa-pen', '#1d4ed8');
}
function registrarResponsable() {
  if (!canEdit()) { requirePermission('Tu rol (Visualizador) no puede registrar responsables.'); return; }
  const nombre = document.getElementById('nr-nombre').value.trim();
  const nota = document.getElementById('nr-nota').value.trim();
  if (!nombre) { showToast('Ingresa el nombre del responsable', 'fa-triangle-exclamation', '#d97706'); return; }
  if (RESPONSABLES.find(r => r.nombre.toLowerCase() === nombre.toLowerCase())) { showToast('Ese responsable ya existe', 'fa-triangle-exclamation', '#d97706'); return; }
  RESPONSABLES.push({ id: nextRespId++, nombre, nota });
  document.getElementById('nr-nombre').value = ''; document.getElementById('nr-nota').value = '';
  renderResponsables(); fillDatalists();
  showToast(`Responsable "${nombre}" registrado`, 'fa-user-plus', '#166534');
}
function renderResponsables() {
  const rows = RESPONSABLES.map(r => {
    const mats = MATERIALES.filter(m => m.custodioActual === r.nombre);
    return `<tr>
      <td class="fw-bold" style="font-size:13px">${r.nombre}</td>
      <td style="font-size:12px;color:var(--gray-400)">${r.nota || '—'}</td>
      <td class="mono fw-bold" style="text-align:center">${mats.length}</td>
      <td><button class="abtn" onclick="verMaterialesDeResponsable('${r.nombre.replace(/'/g,"\\'")}')"><i class="fa-solid fa-boxes-stacked me-1"></i>Ver materiales</button></td>
    </tr>`;
  }).join('');
  document.getElementById('resp-tbl').innerHTML = `
    <thead><tr><th>Nombre</th><th>Nota</th><th>Materiales a su cargo</th><th></th></tr></thead>
    <tbody>${rows || '<tr><td colspan="4" style="text-align:center;color:var(--gray-400);padding:20px">Sin responsables registrados</td></tr>'}</tbody>`;
}
function verMaterialesDeResponsable(nombre) {
  go('materiales');
  setTimeout(() => { document.getElementById('ms-inp').value = nombre; filterMats(); }, 50);
}
let mF = 'all', mS = '';
function registrarMaterial() {
  if (!canEdit()) { requirePermission('Tu rol (Visualizador) no puede registrar materiales.'); return; }
  const nombre = document.getElementById('nm-nombre').value.trim();
  const empresaId = Number(document.getElementById('nm-empresa').value);
  const resp = document.getElementById('nm-resp').value.trim();
  const ubicacion = document.getElementById('nm-ubicacion').value.trim();
  const estado = document.getElementById('nm-estado').value;
  const cantidad = Math.max(1, parseInt(document.getElementById('nm-cantidad').value, 10) || 1);
  const errEl = document.getElementById('nm-err'); errEl.style.display = 'none';
  if (!nombre) { errEl.textContent = '⚠️ Ingresa el nombre del material.'; errEl.style.display = 'block'; return; }
  if (!empresaId) { errEl.textContent = '⚠️ Registra o selecciona una empresa.'; errEl.style.display = 'block'; return; }
  if (!resp) { errEl.textContent = '⚠️ Ingresa quién recibe el material.'; errEl.style.display = 'block'; return; }
  const nombreEmpresa = empresaNombre(empresaId);
  const loteId = cantidad > 1 ? `LOTE-${String(nextLoteId++).padStart(4, '0')}` : null;
  const nuevos = [];
  for (let i = 0; i < cantidad; i++) {
    const num = String(nextMatId++).padStart(4, '0');
    const id = `MAT-${num}`;
    const codigo = generarCodigoQR(nombre, i); // ej: 15304582A00 (HHMMSS + MS + letra + consecutivo)
    const notaRecepcion = cantidad > 1 ? `Recepción inicial — parte de un lote de ${cantidad} unidades` : 'Recepción inicial del material';
    const item = {
      id, codigo, nombre, empresaId, empresaNombre: nombreEmpresa, loteId, estado, custodioActual: resp,
      ubicacion, descripcion: nombre, observaciones: '', prestamo: null,
      historial: [{ tipo: 'Recepción', de: nombreEmpresa, para: resp, fecha: nowStr(), nota: notaRecepcion, por: currentUser?.name || 'Sistema', estado: 'RECIBIDO' }]
    };
    MATERIALES.unshift(item);
    nuevos.push(item);
  }
  addResponsableIfNew(resp);
  document.getElementById('nm-nombre').value = ''; document.getElementById('nm-resp').value = ''; document.getElementById('nm-ubicacion').value = ''; document.getElementById('nm-cantidad').value = '1';
  renderMats(); initOverview(); fillDatalists();
  if (cantidad > 1) {
    showToast(`${cantidad} unidades de "${nombre}" registradas en ${loteId}`, 'fa-qrcode', '#166534');
    openLoteModal(loteId);
  } else {
    showToast(`${nuevos[0].id} registrado — QR generado`, 'fa-qrcode', '#166534');
    openMatModal(nuevos[0].id);
  }
}
function setMF(f, el) { mF = f; document.querySelectorAll('#mat-chips .chip').forEach(c => c.classList.remove('on')); el.classList.add('on'); renderMats(); }
function filterMats() { mS = document.getElementById('ms-inp').value.toLowerCase(); renderMats(); }
function renderMats() {
  const list = MATERIALES.filter(m => {
    const mf = mF === 'all' || m.estado === mF;
    const ms = !mS || [m.id, m.codigo, m.nombre, matEmpresaNombre(m), m.custodioActual, estLabel(m.estado), m.ubicacion || ''].some(v => v.toLowerCase().includes(mS));
    return mf && ms;
  });
  document.getElementById('mc').textContent = `${list.length}/${MATERIALES.length}`;
  document.getElementById('mat-tbl').innerHTML = `
    <thead><tr><th>QR</th><th>ID</th><th>Material</th><th>Empresa</th><th>Responsable</th><th>Estado</th><th>Ubicación</th><th>Últ. mov.</th><th></th></tr></thead>
    <tbody>${list.map(matRow).join('') || '<tr><td colspan="9" style="text-align:center;color:var(--gray-400);padding:20px">Sin resultados</td></tr>'}</tbody>`;
}
function buildBreadcrumb(m) {
  const chain = [matEmpresaNombre(m), ...m.historial.map(h => h.para)];
  const unique = [];
  chain.forEach(c => { if (unique[unique.length - 1] !== c) unique.push(c); });
  return unique.join(' → ');
}
const ACCIONES = [
  { tipo: 'Prestamo',   label: 'Prestar',             cls: 'abtn-blue',   icon: 'fa-people-arrows',        estados: ['DISPONIBLE','DEVUELTO','RECIBIDO'] },
  { tipo: 'Devolver',   label: 'Devolver',            cls: 'abtn-green',  icon: 'fa-rotate-left',          estados: ['PRESTADO','EN_USO','TRANSFERIDO'] },
  { tipo: 'Transferir', label: 'Transferir',          cls: 'abtn-purple', icon: 'fa-right-left',           estados: ['PRESTADO','EN_USO','DISPONIBLE','TRANSFERIDO'] },
  { tipo: 'EnUso',      label: 'Marcar en uso',       cls: 'abtn-green',  icon: 'fa-screwdriver-wrench',   estados: ['DISPONIBLE','PRESTADO','DEVUELTO','RECIBIDO'] },
  { tipo: 'Disponible', label: 'Marcar disponible',   cls: 'abtn',        icon: 'fa-circle-check',         estados: ['EN_USO','DEVUELTO','REPARACION','PRESTADO','TRANSFERIDO'] },
  { tipo: 'Reparacion', label: 'Enviar a reparación', cls: 'abtn',        icon: 'fa-wrench',                estados: ['DISPONIBLE','EN_USO','DAÑADO'] },
  { tipo: 'Danado',     label: 'Reportar dañado',     cls: 'abtn-red',    icon: 'fa-triangle-exclamation', estados: ['DISPONIBLE','EN_USO','PRESTADO','REPARACION'] },
  { tipo: 'Extraviado', label: 'Reportar extraviado', cls: 'abtn-red',    icon: 'fa-magnifying-glass',     estados: ['PRESTADO','EN_USO','TRANSFERIDO'] },
  { tipo: 'Baja',       label: 'Dar de baja',         cls: 'abtn-red',    icon: 'fa-ban',                   estados: ['DAÑADO','EXTRAVIADO','REPARACION','DISPONIBLE'] },
];
function accionesPara(m) { return ACCIONES.filter(a => a.estados.includes(m.estado)); }
function openMatModal(id) {
  const m = MATERIALES.find(x => x.id === id); if (!m) return;
  const qrId = 'qr-' + m.id;
  const loteInfo = m.loteId ? loteResumen(m.loteId) : null;
  const vencido = isVencido(m);
  const acciones = accionesPara(m);
  document.getElementById('mat-modal-body').innerHTML = `
    <div class="d-flex align-items-start justify-content-between mb-3 flex-wrap gap-2">
      <div>
        <div class="cond fw-bold" style="font-size:20px;color:var(--red);letter-spacing:.04em">${m.id} — ${m.nombre}</div>
        <div style="font-size:12px;color:var(--gray-400)">Código: <span class="qrt">${m.codigo}</span>
          ${loteInfo ? ` &nbsp;|&nbsp; Parte de <a href="#" onclick="event.preventDefault();openLoteModal('${m.loteId}')" style="color:var(--red);font-weight:700">${m.loteId}</a> (${loteInfo.total} unidades)` : ''}
        </div>
      </div>
      <button type="button" class="ibtn flex-shrink-0" data-bs-dismiss="modal">✕</button>
    </div>
    ${vencido ? `<div class="mb-3" style="background:#fee2e2;border:1px solid #fecaca;border-radius:9px;padding:9px 13px;font-size:12px;color:#b91c1c;font-weight:700"><i class="fa-solid fa-clock me-1"></i>Préstamo vencido — se esperaba de vuelta el ${m.prestamo.fechaEsperada}</div>` : ''}
    <div class="row g-3 mb-3">
      <div class="col-12 col-md-5 text-center">
        <div id="${qrId}" style="display:inline-block;padding:10px;background:#fff;border:1px solid var(--gray-200);border-radius:10px"></div>
        <div style="font-size:10px;color:var(--gray-400);margin-top:6px">Símbolo QR — ISO/IEC 18004</div>
        <div style="font-size:9.5px;color:var(--gray-400);margin-top:2px" title="Hora(HHMMSS) + Milisegundos(00-99) + Letra de producto + Consecutivo">
          ${m.codigo.slice(0,6)}<b style="color:var(--red-dark)">·${m.codigo.slice(6,8)}</b>·<b style="color:var(--red-dark)">${m.codigo.slice(8)}</b> = hora·ms·producto
        </div>
        <div class="d-flex gap-2 justify-content-center mt-2">
          <button class="abtn" onclick="imprimirQR('${m.id}')"><i class="fa-solid fa-print me-1"></i>Imprimir</button>
          <button class="abtn" onclick="imprimirQR('${m.id}')"><i class="fa-solid fa-arrows-rotate me-1"></i>Reimprimir</button>
        </div>
      </div>
      <div class="col-12 col-md-7">
        <div class="modal-data-grid">
          <div style="background:var(--red-muted);border-radius:10px;padding:12px">
            <div style="font-size:9px;color:var(--gray-400);font-weight:800;text-transform:uppercase;letter-spacing:.1em">Empresa de origen</div>
            <div class="fw-bold" style="font-size:13px">${matEmpresaNombre(m)}</div>
          </div>
          <div style="background:var(--gray-100);border-radius:10px;padding:12px">
            <div style="font-size:9px;color:var(--gray-400);font-weight:800;text-transform:uppercase;letter-spacing:.1em">Responsable actual</div>
            <div class="fw-bold" style="font-size:13px">${m.custodioActual}</div>
          </div>
          <div style="background:#dcfce7;border-radius:10px;padding:12px">
            <div style="font-size:9px;color:var(--gray-400);font-weight:800;text-transform:uppercase;letter-spacing:.1em">Estado</div>
            <div class="fw-bold" style="font-size:13px">${sb(m.estado)}</div>
          </div>
          <div style="background:#eff6ff;border-radius:10px;padding:12px">
            <div style="font-size:9px;color:var(--gray-400);font-weight:800;text-transform:uppercase;letter-spacing:.1em">Ubicación</div>
            <div class="fw-bold" style="font-size:13px">${m.ubicacion || '—'}</div>
          </div>
          <div style="background:var(--gray-50);border:1px solid var(--gray-200);border-radius:10px;padding:12px">
            <div style="font-size:9px;color:var(--gray-400);font-weight:800;text-transform:uppercase;letter-spacing:.1em">Fecha de ingreso</div>
            <div class="fw-bold mono" style="font-size:12px">${m.historial[0].fecha}</div>
          </div>
          <div style="background:var(--gray-50);border:1px solid var(--gray-200);border-radius:10px;padding:12px">
            <div style="font-size:9px;color:var(--gray-400);font-weight:800;text-transform:uppercase;letter-spacing:.1em">Último movimiento</div>
            <div class="fw-bold mono" style="font-size:12px">${m.historial[m.historial.length - 1].fecha}</div>
          </div>
        </div>
        <div class="mt-3" style="font-size:12px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:9px;padding:10px 12px">
          <strong>Trazabilidad:</strong> ${buildBreadcrumb(m)}
        </div>
        ${m.observaciones ? `<div class="mt-2" style="font-size:12px;color:var(--gray-700)"><strong>Observaciones:</strong> ${m.observaciones}</div>` : ''}
      </div>
    </div>
    <div class="slbl">Historial de movimientos</div>
    <div class="tl mb-3">
      ${m.historial.map((h, i) => `
        <div class="tl-item">
          <div class="tl-dot ${i === m.historial.length - 1 ? 'cu' : 'dn'}"></div>
          <div class="fw-bold" style="font-size:13px">${h.tipo}: ${h.de} → ${h.para}</div>
          <div class="mono" style="font-size:11px;color:var(--gray-400);margin-top:1px">${h.fecha} — registrado por ${h.por || '—'}</div>
          ${h.nota ? `<div style="font-size:12px;color:var(--gray-700);font-style:italic;margin-top:2px">"${h.nota}"</div>` : ''}
        </div>`).join('')}
    </div>
    <div class="d-flex gap-2 flex-wrap">
      ${canEdit() ? acciones.map(a => `<button class="${a.cls}" onclick="bootstrap.Modal.getInstance(document.getElementById('matModal')).hide();openMovModal('${m.id}','${a.tipo}')"><i class="fa-solid ${a.icon} me-1"></i>${a.label}</button>`).join('')
        : `<div style="font-size:12px;color:var(--gray-400)"><i class="fa-solid fa-lock me-1"></i>Tu rol (Visualizador) solo puede consultar este historial.</div>`}
    </div>`;
  const modal = new bootstrap.Modal(document.getElementById('matModal'));
  modal.show();
  setTimeout(() => {
    const box = document.getElementById(qrId);
    if (box && window.QRCode) { box.innerHTML = ''; new QRCode(box, { text: m.codigo, width: 150, height: 150, correctLevel: QRCode.CorrectLevel.M }); }
  }, 60);
}
function imprimirQR(id) {
  const m = MATERIALES.find(x => x.id === id); if (!m) return;
  const w = window.open('', '_blank', 'width=420,height=520');
  w.document.write(`<html><head><title>QR ${m.id}</title></head><body style="font-family:sans-serif;text-align:center;padding:20px">
    <div id="qr"></div>
    <h3 style="margin-top:14px">${m.nombre}</h3>
    <div style="font-family:monospace;font-size:13px">${m.codigo}</div>
    <div style="font-size:10px;color:#888;margin-top:4px">Símbolo QR — ISO/IEC 18004</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"><\/script>
    <script>new QRCode(document.getElementById('qr'), {text:'${m.codigo}', width:220, height:220});setTimeout(()=>window.print(),300);<\/script>
  </body></html>`);
  w.document.close();
}
function abrirGeneracionMasiva() {
  if (!canEdit()) { requirePermission('Tu rol (Visualizador) no puede generar etiquetas.'); return; }
  document.getElementById('masivo-modal-body').innerHTML = `
    <div class="d-flex align-items-center justify-content-between mb-3">
      <div class="fw-bold" style="font-size:15px">Generar varios QR a la vez</div>
      <button type="button" class="ibtn" data-bs-dismiss="modal">✕</button>
    </div>
    <input type="text" class="tp-inp mb-2" placeholder="Buscar material..." oninput="filtrarMasivo(this.value)">
    <div id="masivo-lista" style="max-height:320px;overflow:auto;border:1px solid var(--gray-200);border-radius:9px;padding:8px"></div>
    <button class="abtn-green w-100 mt-3" style="padding:11px" onclick="imprimirMasivo()"><i class="fa-solid fa-print me-1"></i>Imprimir seleccionados</button>`;
  filtrarMasivo('');
  new bootstrap.Modal(document.getElementById('masivoModal')).show();
}
function filtrarMasivo(q) {
  q = q.toLowerCase();
  const list = MATERIALES.filter(m => !q || [m.id, m.codigo, m.nombre].some(v => v.toLowerCase().includes(q)));
  document.getElementById('masivo-lista').innerHTML = list.map(m => `
    <label class="d-flex align-items-center gap-2" style="font-size:12px;padding:5px 4px;border-bottom:1px solid var(--gray-100)">
      <input type="checkbox" class="masivo-chk" value="${m.id}">
      <span class="mono fw-bold" style="color:var(--red)">${m.id}</span> ${m.nombre}
    </label>`).join('') || '<div style="font-size:12px;color:var(--gray-400);padding:8px">Sin resultados</div>';
}
function imprimirMasivo() {
  const ids = Array.from(document.querySelectorAll('.masivo-chk:checked')).map(c => c.value);
  if (!ids.length) { showToast('Selecciona al menos un material', 'fa-triangle-exclamation', '#d97706'); return; }
  const items = MATERIALES.filter(m => ids.includes(m.id));
  const w = window.open('', '_blank', 'width=600,height=700');
  w.document.write(`<html><head><title>Etiquetas QR</title></head><body style="font-family:sans-serif;padding:10px">
    <div style="display:flex;flex-wrap:wrap;gap:14px">
      ${items.map(m => `<div style="text-align:center;border:1px solid #ddd;border-radius:8px;padding:10px;width:150px">
        <div id="qr-${m.id}"></div>
        <div style="font-weight:bold;font-size:12px;margin-top:6px">${m.nombre}</div>
        <div style="font-family:monospace;font-size:11px">${m.codigo}</div>
      </div>`).join('')}
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"><\/script>
    <script>
      ${items.map(m => `new QRCode(document.getElementById('qr-${m.id}'), {text:'${m.codigo}', width:110, height:110});`).join('\n')}
      setTimeout(()=>window.print(),400);
    <\/script>
  </body></html>`);
  w.document.close();
  bootstrap.Modal.getInstance(document.getElementById('masivoModal'))?.hide();
}
const MOV_TITLES = { Prestamo: 'Prestar', Devolver: 'Devolver', Transferir: 'Transferir', EnUso: 'Marcar en uso', Disponible: 'Marcar disponible', Reparacion: 'Enviar a reparación', Danado: 'Reportar dañado', Extraviado: 'Reportar extraviado', Baja: 'Dar de baja' };
function openMovModal(id, tipo) {
  if (!canEdit()) { requirePermission('Tu rol (Visualizador) no puede registrar movimientos.'); return; }
  const m = MATERIALES.find(x => x.id === id); if (!m) return;
  let fields = '';
  if (tipo === 'Prestamo') {
    fields = `
      <div class="fm-group"><label class="fm-label">Material</label><input class="tp-inp" value="${m.nombre}" disabled></div>
      <div class="fm-group"><label class="fm-label">Actualmente con</label><input class="tp-inp" value="${m.custodioActual}" disabled></div>
      <div class="fm-group"><label class="fm-label">Prestar a</label><input id="mov-para" class="tp-inp" placeholder="Ej: David" list="resp-list"></div>
      <div class="row g-2">
        <div class="col-6"><div class="fm-group"><label class="fm-label">Fecha</label><input id="mov-fecha" type="date" class="tp-inp" value="${todayISO()}"></div></div>
        <div class="col-6"><div class="fm-group"><label class="fm-label">Hora</label><input id="mov-hora" type="time" class="tp-inp" value="${nowHM()}"></div></div>
      </div>
      <div class="fm-group"><label class="fm-label">Fecha esperada de devolución (opcional)</label><input id="mov-fecha-esp" type="date" class="tp-inp"></div>
      <div class="fm-group"><label class="fm-label">Motivo</label><input id="mov-motivo" class="tp-inp" placeholder="Ej: Uso en prototipo"></div>`;
  } else if (tipo === 'Devolver') {
    fields = `
      <div class="fm-group"><label class="fm-label">Material</label><input class="tp-inp" value="${m.nombre}" disabled></div>
      <div class="fm-group"><label class="fm-label">Actualmente con</label><input class="tp-inp" value="${m.custodioActual}" disabled></div>
      <div class="fm-group"><label class="fm-label">Devolver a</label><input id="mov-para" class="tp-inp" placeholder="Ej: Pepe" list="resp-list" value="${m.historial.filter(h=>h.tipo==='Préstamo'||h.tipo==='Recepción').slice(-1)[0]?.de || ''}"></div>
      <div class="fm-group"><label class="fm-label">Estado</label>
        <select id="mov-estado-extra" class="fm-select"><option value="Funcionando">Funcionando</option><option value="Con falla">Con falla</option></select></div>
      <div class="fm-group"><label class="fm-label">Observación</label><input id="mov-motivo" class="tp-inp" placeholder="Ej: Se utilizó en prototipo"></div>`;
  } else if (tipo === 'Transferir') {
    fields = `
      <div class="fm-group"><label class="fm-label">Material</label><input class="tp-inp" value="${m.nombre}" disabled></div>
      <div class="fm-group"><label class="fm-label">Actualmente con</label><input class="tp-inp" value="${m.custodioActual}" disabled></div>
      <div class="fm-group"><label class="fm-label">Transferir a</label><input id="mov-para" class="tp-inp" placeholder="Ej: Luis" list="resp-list"></div>
      <div class="row g-2">
        <div class="col-6"><div class="fm-group"><label class="fm-label">Fecha</label><input id="mov-fecha" type="date" class="tp-inp" value="${todayISO()}"></div></div>
        <div class="col-6"><div class="fm-group"><label class="fm-label">Hora</label><input id="mov-hora" type="time" class="tp-inp" value="${nowHM()}"></div></div>
      </div>
      <div class="fm-group"><label class="fm-label">Motivo</label><input id="mov-motivo" class="tp-inp" placeholder="Motivo de la transferencia"></div>`;
  } else if (tipo === 'EnUso') {
    fields = `
      <div class="fm-group"><label class="fm-label">Usado en / instalado en</label><input id="mov-para" class="tp-inp" placeholder="Ej: Prototipo Estación Meteorológica" value="${m.custodioActual}"></div>
      <div class="fm-group"><label class="fm-label">Observación</label><input id="mov-motivo" class="tp-inp" placeholder="Ej: Instalado y funcionando"></div>`;
  } else {
    // Disponible, Reparacion, Danado, Extraviado, Baja: solo observación
    fields = `
      <div class="fm-group"><label class="fm-label">Material</label><input class="tp-inp" value="${m.nombre}" disabled></div>
      <div class="fm-group"><label class="fm-label">Observación</label><input id="mov-motivo" class="tp-inp" placeholder="Detalle (opcional)"></div>`;
  }
  document.getElementById('mov-modal-body').innerHTML = `
    <div class="d-flex align-items-center justify-content-between mb-3">
      <div><div class="fw-bold" style="font-size:15px">${MOV_TITLES[tipo]} — ${m.id}</div><div style="font-size:12px;color:var(--gray-400)">${m.nombre}</div></div>
      <button type="button" class="ibtn" data-bs-dismiss="modal">✕</button>
    </div>
    ${fields}
    <div id="mov-err" style="font-size:12px;color:var(--red);font-weight:700;margin-bottom:10px;display:none"></div>
    <button class="abtn-green w-100" style="padding:11px" onclick="guardarMovimiento('${m.id}','${tipo}')"><i class="fa-solid fa-floppy-disk me-1"></i>Confirmar ${MOV_TITLES[tipo].toLowerCase()}</button>`;
  new bootstrap.Modal(document.getElementById('movModal')).show();
}
function guardarMovimiento(id, tipo) {
  if (!canEdit()) { requirePermission('Tu rol (Visualizador) no puede registrar movimientos.'); return; }
  const m = MATERIALES.find(x => x.id === id); if (!m) return;
  const errEl = document.getElementById('mov-err'); errEl.style.display = 'none';
  const motivo = document.getElementById('mov-motivo')?.value.trim() || '';
  const de = m.custodioActual;
  const fecha = document.getElementById('mov-fecha') && document.getElementById('mov-hora')
    ? `${document.getElementById('mov-fecha').value} ${document.getElementById('mov-hora').value}` : nowStr();
  if (tipo === 'Prestamo') {
    const para = document.getElementById('mov-para').value.trim();
    if (!para) { errEl.textContent = '⚠️ Indica a quién se presta.'; errEl.style.display = 'block'; return; }
    const fechaEsp = document.getElementById('mov-fecha-esp').value || null;
    m.historial.push({ tipo: 'Préstamo', de, para, fecha, nota: motivo, por: currentUser?.name || 'Sistema', estado: 'PRESTADO' });
    m.custodioActual = para; m.estado = 'PRESTADO'; m.prestamo = fechaEsp ? { fechaEsperada: fechaEsp } : null;
    addResponsableIfNew(para);
  } else if (tipo === 'Devolver') {
    const para = document.getElementById('mov-para').value.trim();
    const estadoExtra = document.getElementById('mov-estado-extra').value;
    if (!para) { errEl.textContent = '⚠️ Indica a quién se devuelve.'; errEl.style.display = 'block'; return; }
    m.historial.push({ tipo: 'Devolución', de, para, fecha, nota: motivo || `Devuelto — ${estadoExtra}`, por: currentUser?.name || 'Sistema', estado: 'DEVUELTO' });
    m.custodioActual = para; m.estado = estadoExtra === 'Con falla' ? 'DAÑADO' : 'DEVUELTO'; m.prestamo = null;
    addResponsableIfNew(para);
  } else if (tipo === 'Transferir') {
    const para = document.getElementById('mov-para').value.trim();
    if (!para) { errEl.textContent = '⚠️ Indica a quién se transfiere.'; errEl.style.display = 'block'; return; }
    m.historial.push({ tipo: 'Transferencia', de, para, fecha, nota: motivo, por: currentUser?.name || 'Sistema', estado: 'TRANSFERIDO' });
    m.custodioActual = para; m.estado = 'TRANSFERIDO';
    addResponsableIfNew(para);
  } else if (tipo === 'EnUso') {
    const para = document.getElementById('mov-para').value.trim() || de;
    m.historial.push({ tipo: 'Uso', de, para, fecha, nota: motivo || 'Instalado y funcionando', por: currentUser?.name || 'Sistema', estado: 'EN_USO' });
    m.estado = 'EN_USO';
  } else if (tipo === 'Disponible') {
    m.historial.push({ tipo: 'Estado', de: estLabel(m.estado), para: 'Disponible', fecha, nota: motivo || 'Marcado como disponible', por: currentUser?.name || 'Sistema', estado: 'DISPONIBLE' });
    m.estado = 'DISPONIBLE'; m.prestamo = null;
  } else if (tipo === 'Reparacion') {
    m.historial.push({ tipo: 'Estado', de: estLabel(m.estado), para: 'Reparación', fecha, nota: motivo || 'Enviado a reparación', por: currentUser?.name || 'Sistema', estado: 'REPARACION' });
    m.estado = 'REPARACION';
  } else if (tipo === 'Danado') {
    m.historial.push({ tipo: 'Estado', de: estLabel(m.estado), para: 'Dañado', fecha, nota: motivo || 'Reportado como dañado', por: currentUser?.name || 'Sistema', estado: 'DAÑADO' });
    m.estado = 'DAÑADO';
  } else if (tipo === 'Extraviado') {
    m.historial.push({ tipo: 'Estado', de: estLabel(m.estado), para: 'Extraviado', fecha, nota: motivo || 'Reportado como extraviado', por: currentUser?.name || 'Sistema', estado: 'EXTRAVIADO' });
    m.estado = 'EXTRAVIADO';
  } else if (tipo === 'Baja') {
    m.historial.push({ tipo: 'Estado', de: estLabel(m.estado), para: 'Baja', fecha, nota: motivo || 'Dado de baja', por: currentUser?.name || 'Sistema', estado: 'BAJA' });
    m.estado = 'BAJA';
  }
  bootstrap.Modal.getInstance(document.getElementById('movModal')).hide();
  renderMats(); initOverview(); fillDatalists();
  showToast(`${id}: ${MOV_TITLES[tipo].toLowerCase()} registrado`, 'fa-arrow-right-arrow-left', '#1d4ed8');
}
let scanStream = null, scanRAF = null;
async function startScan() {
  const video = document.getElementById('scan-video');
  const frame = document.getElementById('scan-frame');
  try {
    scanStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
    video.srcObject = scanStream;
    await video.play();
    frame.style.display = 'block';
    scanLoop();
  } catch (err) {
    showToast('No se pudo acceder a la cámara', 'fa-triangle-exclamation', '#b91c1c');
  }
}
function stopScan() {
  if (scanRAF) cancelAnimationFrame(scanRAF);
  if (scanStream) { scanStream.getTracks().forEach(t => t.stop()); scanStream = null; }
  const frame = document.getElementById('scan-frame'); if (frame) frame.style.display = 'none';
}
function scanLoop() {
  const video = document.getElementById('scan-video');
  const canvas = document.getElementById('scan-canvas');
  if (!video || video.readyState !== video.HAVE_ENOUGH_DATA) { scanRAF = requestAnimationFrame(scanLoop); return; }
  canvas.width = video.videoWidth; canvas.height = video.videoHeight;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  const img = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const code = window.jsQR ? jsQR(img.data, img.width, img.height) : null;
  if (code && code.data) { onCodeDetected(code.data); stopScan(); return; }
  scanRAF = requestAnimationFrame(scanLoop);
}
document.addEventListener('DOMContentLoaded', () => {
  const inp = document.getElementById('scan-manual');
  if (inp) inp.addEventListener('keydown', e => {
    if (e.key === 'Enter' && inp.value.trim()) { onCodeDetected(inp.value.trim()); inp.value = ''; }
  });
});
function onCodeDetected(code) {
  const clean = code.trim();
  const m = MATERIALES.find(x => x.codigo.toLowerCase() === clean.toLowerCase() || x.id.toLowerCase() === clean.toLowerCase());
  const box = document.getElementById('scan-result');
  if (!m) {
    box.innerHTML = `<div class="scan-result-card" style="border-color:#fecaca;background:#fef2f2">
      <div class="fw-bold" style="color:#b91c1c"><i class="fa-solid fa-circle-xmark me-1"></i>Código no encontrado</div>
      <div style="font-size:12px;color:var(--gray-400);margin-top:4px">No existe ningún material con el código "${clean}".</div>
    </div>`;
    showToast('Código no reconocido', 'fa-triangle-exclamation', '#b91c1c');
    return;
  }
  const acciones = accionesPara(m).filter(a => ['Prestamo','Devolver','Transferir','EnUso'].includes(a.tipo)).slice(0, 3);
  box.innerHTML = `
    <div class="scan-result-card">
      <div class="d-flex align-items-center justify-content-between mb-2">
        <div>
          <div class="mono fw-bold" style="color:var(--red);font-size:13px">${m.id}</div>
          <div class="fw-bold" style="font-size:16px">${m.nombre}</div>
        </div>
        ${sb(m.estado)}
      </div>
      <div style="font-size:12px;color:var(--gray-600);margin-bottom:8px">
        <i class="fa-solid fa-building me-1"></i>${matEmpresaNombre(m)} &nbsp;|&nbsp;
        <i class="fa-solid fa-user me-1"></i>Con: <strong>${m.custodioActual}</strong> &nbsp;|&nbsp;
        <i class="fa-solid fa-location-dot me-1"></i>${m.ubicacion || '—'}
      </div>
      <div style="font-size:12px;background:#fff;border:1px solid var(--gray-200);border-radius:8px;padding:8px 10px;margin-bottom:10px">
        <strong>Trazabilidad:</strong> ${buildBreadcrumb(m)}
      </div>
      ${canEdit() ? `<div class="d-flex flex-column gap-2 mb-2">
        ${acciones.map(a => `<button class="scan-quick-btn ${a.cls}" onclick="openMovModal('${m.id}','${a.tipo}')"><i class="fa-solid ${a.icon}"></i>${a.label.toUpperCase()}</button>`).join('')}
      </div>` : ''}
      <button class="abtn w-100" onclick="openMatModal('${m.id}')"><i class="fa-solid fa-timeline me-1"></i>Ver historial completo</button>
    </div>`;
  showToast(`${m.id} — información cargada`, 'fa-qrcode', '#166534');
}
let usFilter = '', pendingDelId = null, pendingDelType = 'user', bsDelModal = null, bsUserModal = null;
function renderUsers() {
  const q = usFilter.toLowerCase();
  const list = q ? USERS.filter(u => u.username.toLowerCase().includes(q) || u.name.toLowerCase().includes(q) || u.role.includes(q)) : USERS;
  document.getElementById('us-total').textContent = USERS.length;
  document.getElementById('us-active').textContent = USERS.filter(u => u.status === 'activo').length;
  document.getElementById('us-admins').textContent = USERS.filter(u => u.role === 'admin').length;
  document.getElementById('us-inactive').textContent = USERS.filter(u => u.status === 'inactivo').length;
  const rows = list.map(u => {
    const [bg, cl] = AVATAR_COLORS[u.id % AVATAR_COLORS.length];
    const isMe = currentUser && u.id === currentUser.id;
    return `<tr>
      <td><div class="d-flex align-items-center gap-2">
        <div class="user-row-avatar" style="background:${bg};color:${cl}">${u.name.charAt(0)}</div>
        <div><div class="fw-bold" style="font-size:13px">${u.name}${isMe ? ` <span class="mono" style="font-size:9px;color:var(--gray-400)">[TÚ]</span>` : ''}</div>
          <div class="mono" style="font-size:11px;color:var(--gray-400)">${u.username}</div></div>
      </div></td>
      <td><span class="sb ${ROLE_CLASSES[u.role]}">${ROLE_ICONS[u.role]} ${ROLE_LABELS[u.role]}</span></td>
      <td><span class="sb ${u.status === 'activo' ? 'user-status-on' : 'user-status-off'}">${u.status === 'activo' ? '✅ Activo' : '❌ Inactivo'}</span></td>
      <td class="mono" style="font-size:11px;color:var(--gray-400)">${u.created}</td>
      <td><div class="d-flex gap-1 flex-wrap">
        <button class="abtn" onclick="openUserModal(${u.id})"><i class="fa-solid fa-pen me-1"></i>Editar</button>
        ${!isMe ? `<button class="abtn-red" onclick="askDelete(${u.id})"><i class="fa-solid fa-trash"></i></button>` : ''}
      </div></td>
    </tr>`;
  }).join('');
  document.getElementById('users-tbl').innerHTML = `
    <thead><tr><th>Usuario</th><th>Rol</th><th>Estado</th><th>Creado</th><th>Acciones</th></tr></thead>
    <tbody>${rows || '<tr><td colspan="5" style="text-align:center;color:var(--gray-400);padding:20px">Sin resultados</td></tr>'}</tbody>`;
}
function filterUsers() { usFilter = document.getElementById('us-search').value; renderUsers(); }
function openUserModal(id) {
  if (!isAdmin()) { requirePermission('Solo un administrador puede gestionar usuarios.'); return; }
  if (!bsUserModal) bsUserModal = new bootstrap.Modal(document.getElementById('userModal'));
  ['um-name', 'um-user', 'um-pass'].forEach(i => { const el = document.getElementById(i); if (el) el.value = ''; });
  document.getElementById('um-id').value = ''; document.getElementById('um-role').value = 'operador'; document.getElementById('um-status').value = 'activo';
  document.getElementById('um-err').style.display = 'none';
  document.getElementById('um-pass-hint').textContent = '(requerida para nuevo usuario)';
  if (id) {
    const u = USERS.find(x => x.id === id); if (!u) return;
    document.getElementById('um-title').textContent = 'Editar usuario';
    document.getElementById('um-id').value = u.id; document.getElementById('um-name').value = u.name;
    document.getElementById('um-user').value = u.username; document.getElementById('um-role').value = u.role; document.getElementById('um-status').value = u.status;
    document.getElementById('um-pass-hint').textContent = '(dejar vacío para no cambiar)';
  } else { document.getElementById('um-title').textContent = 'Nuevo usuario'; }
  bsUserModal.show();
}
function saveUser() {
  if (!isAdmin()) { requirePermission('Solo un administrador puede gestionar usuarios.'); return; }
  const id = document.getElementById('um-id').value;
  const name = document.getElementById('um-name').value.trim();
  const uname = document.getElementById('um-user').value.trim();
  const pass = document.getElementById('um-pass').value;
  const role = document.getElementById('um-role').value;
  const status = document.getElementById('um-status').value;
  const errEl = document.getElementById('um-err'); errEl.style.display = 'none';
  if (!name) { errEl.textContent = '⚠️ El nombre es requerido.'; errEl.style.display = 'block'; return; }
  if (!uname) { errEl.textContent = '⚠️ El usuario es requerido.'; errEl.style.display = 'block'; return; }
  const dup = USERS.find(u => u.username === uname && String(u.id) !== id);
  if (dup) { errEl.textContent = '⚠️ Ese nombre de usuario ya existe.'; errEl.style.display = 'block'; return; }
  if (id) {
    const u = USERS.find(x => x.id === Number(id)); if (!u) return;
    u.name = name; u.username = uname; u.role = role; u.status = status;
    if (pass) { if (pass.length < 6) { errEl.textContent = '⚠️ Mínimo 6 caracteres.'; errEl.style.display = 'block'; return; } u.password = pass; }
    showToast(`Usuario ${uname} actualizado`, 'fa-pen', '#1d4ed8');
    if (currentUser && u.id === currentUser.id) { currentUser = u; applyRoleUI(); }
  } else {
    if (!pass) { errEl.textContent = '⚠️ La contraseña es requerida.'; errEl.style.display = 'block'; return; }
    if (pass.length < 6) { errEl.textContent = '⚠️ Mínimo 6 caracteres.'; errEl.style.display = 'block'; return; }
    const today = new Date();
    const d = `${today.getFullYear()}-${p2(today.getMonth()+1)}-${p2(today.getDate())}`;
    USERS.push({ id: nextId++, name, username: uname, password: pass, role, status, created: d });
    showToast(`Usuario ${uname} creado`, 'fa-user-plus', '#166534');
  }
  bsUserModal.hide(); renderUsers();
}
function askDelete(id) {
  if (!isAdmin()) { requirePermission('Solo un administrador puede gestionar usuarios.'); return; }
  pendingDelId = id; pendingDelType = 'user';
  const u = USERS.find(x => x.id === id);
  document.getElementById('del-name').textContent = `¿Seguro que deseas eliminar a "${u?.name}"? Esta acción no se puede deshacer.`;
  if (!bsDelModal) bsDelModal = new bootstrap.Modal(document.getElementById('delModal'));
  bsDelModal.show();
}
function askDeleteEmpresa(id) {
  if (!isAdmin()) { requirePermission('Solo un administrador puede eliminar empresas.'); return; }
  pendingDelId = id; pendingDelType = 'empresa';
  const e = EMPRESAS.find(x => x.id === id);
  const count = MATERIALES.filter(m => m.empresaId === id).length;
  document.getElementById('del-name').textContent = count
    ? `¿Eliminar "${e?.name}"? Tiene ${count} material(es) registrados: seguirán existiendo con "${e?.name}" guardado en su historial, pero la empresa dejará de aparecer en el listado activo.`
    : `¿Seguro que deseas eliminar la empresa "${e?.name}"? Esta acción no se puede deshacer.`;
  if (!bsDelModal) bsDelModal = new bootstrap.Modal(document.getElementById('delModal'));
  bsDelModal.show();
}
function confirmDelete() {
  if (!pendingDelId) return;
  if (pendingDelType === 'empresa') {
    const e = EMPRESAS.find(x => x.id === pendingDelId);
    EMPRESAS = EMPRESAS.filter(x => x.id !== pendingDelId);
    pendingDelId = null; bsDelModal.hide();
    showToast(`Empresa "${e?.name}" eliminada — sus materiales conservan el historial`, 'fa-trash', '#b91c1c');
    renderEmpresas(); fillEmpresaSelect(); initOverview(); renderMats();
  } else {
    const u = USERS.find(x => x.id === pendingDelId);
    USERS = USERS.filter(x => x.id !== pendingDelId);
    pendingDelId = null; bsDelModal.hide();
    showToast(`Usuario ${u?.username} eliminado`, 'fa-trash', '#b91c1c');
    renderUsers();
  }
}