const { useState, useMemo, useCallback, useEffect, useRef } = React;

// ──────────────────────────────────────────────────────────────────
// helpers
// ──────────────────────────────────────────────────────────────────
const Icon = ({name, size=20}) => {
  const C = window[name];
  if (!C) return null;
  return <C size={size}/>;
};

const flatById = (() => {
  const map = {};
  for (const m of MODULES) {
    map[m.id] = { kind: "module", node: m };
    for (const g of allGroups(m)) {
      map[g.id] = { kind: "group", node: g, module: m };
      for (const i of g.items) {
        map[i.id] = { kind: "item", node: i, group: g, module: m };
      }
    }
  }
  return map;
})();

// ──────────────────────────────────────────────────────────────────
// MENÚ POR SISTEMA — la fuente de verdad son las tablas
//   sc.sistema               una caja en la portada por fila
//   sc.usr_sistema_menu_titulo  los títulos del menú lateral (cuelgan de un sistema)
//   sc.usr_sistema_menu_item    los ítems de cada título
//
// `MODULES` (data.jsx) ya NO decide el menú: queda como REGISTRO DE VENTANAS —
// aporta el ícono y, sobre todo, la clave de ruteo con la que el <main> elige el
// componente. El puente es `usr_sistema_menu_item.id_modulo`, que vale exactamente
// ese id. Un ítem sin `id_modulo` es un ítem cuya ventana no existe todavía: se
// dibuja deshabilitado, no se esconde.
//
// Se lee de localStorage y no de /api/*: el preloader de index.html ya hidrató
// LS con un XHR SÍNCRONO antes de que Babel evaluara este archivo, así que los
// datos están disponibles en el primer render (mismo contrato que usan los CRUD).
// ──────────────────────────────────────────────────────────────────
const readTable = (key) => {
  try {
    const raw = localStorage.getItem(key);
    const arr = raw ? JSON.parse(raw) : [];
    return Array.isArray(arr) ? arr : [];
  } catch (e) { return []; }
};
const esActivo = (r) => r && r.activo !== false;
// Los ids son secuenciales y con relleno de ceros (SMT01…, SMI001…), así que
// ordenar por id reproduce el orden con el que se cargó el árbol. Sigue siendo el
// criterio de los TÍTULOS; los ítems ya tienen su propia columna `orden`
// (35_rol_menu.sql) y el id sólo los desempata.
const porId = (a, b) => String(a.id).localeCompare(String(b.id));

// Cada aplicación (directorio de un sistema) declara su id en su index.html:
//   <script>window.__SC_SISTEMA = "SYS6";</script>
// Con eso el router entra directo a ese sistema y no dibuja la portada. Sin eso
// —la portada de la raíz— se comporta igual que siempre.
const SISTEMA_FIJO = (typeof window !== "undefined" && window.__SC_SISTEMA) || null;

// Ruta de cada sistema. Ya no es un directorio: cada sistema es su propio servicio
// de Cloud Run, y el balanceador los junta bajo un solo dominio por prefijo
// (/comercial/, /agencia/…). Los nombres son los del servicio y del repo, así que
// la ruta que se ve en la barra dice exactamente qué se está ejecutando.
//
// El dominio es UNO SOLO a propósito: la sesión y el catálogo viven en
// localStorage, que es por origen. Un dominio por módulo sería una sesión por
// módulo, y eso no se puede relajar.
//
// Elegir un sistema en la portada tiene que NAVEGAR a su aplicación, no cambiar el
// menú en la misma página: cada index.html carga SÓLO los <script> de sus ventanas,
// así que un cambio en el sitio deja el menú lleno de ítems cuyo componente no
// existe y el clic no hace nada (así estaban 60 de 74 ítems desde la raíz).
const APP_DE_SISTEMA = {
  SYS1: "comercial", SYS2: "contabilizacion",
  SYS3: "empresas",  SYS4: "usuarios",
  SYS5: "programacion", SYS6: "agencia",
  SYS7: "transporte", SYS8: "compras",
};
// Desde la raíz el directorio cuelga de "./"; desde dentro de una aplicación hay
// que subir uno.
const urlDeSistema = (sid) => {
  const dir = APP_DE_SISTEMA[sid];
  return dir ? (SISTEMA_FIJO ? "../" : "") + dir + "/" : null;
};

function buildSistemas() {
  // Orden de los sistemas en la portada: su columna `orden` (migración 105).
  // Antes era el id, que es un accidente del alta y no un criterio; el `|| 0`
  // cubre una fila que aún no lo tenga y el id desempata.
  const sistemas = readTable("sc.usr_sistema").filter(esActivo)
    .sort((a, b) => ((a.orden || 0) - (b.orden || 0)) || porId(a, b));
  // Orden del título DENTRO de su sistema: su columna `orden` (migración 81).
  // Antes era el id, que ataba el orden a la identidad: subir un título obligaba
  // a cambiarle el id, que es lo que apuntan sus ítems y sus autorizaciones. El
  // `|| 0` cubre una fila que aún no tenga `orden`, y el id desempata.
  const titulos = readTable("sc.usr_sistema_menu_titulo").filter(esActivo)
    .sort((a, b) => ((a.orden || 0) - (b.orden || 0)) || porId(a, b));
  // Orden del ítem DENTRO de su título: la columna `orden` (35_rol_menu.sql).
  // Antes el orden era el del id, que ataba el orden a la identidad. El `|| 0`
  // conserva ese criterio para una fila que aún no tenga `orden`, y el id desempata.
  const items = readTable("sc.usr_sistema_menu_item").filter(esActivo)
    .sort((a, b) => ((a.orden || 0) - (b.orden || 0)) || porId(a, b));

  const itemsPorTitulo = {};
  for (const it of items) {
    const k = it.id_usr_sistema_menu_titulo;
    if (!k) continue;
    (itemsPorTitulo[k] = itemsPorTitulo[k] || []).push(it);
  }
  const titulosPorSistema = {};
  for (const t of titulos) {
    if (!t.id_sistema) continue;
    (titulosPorSistema[t.id_sistema] = titulosPorSistema[t.id_sistema] || []).push({
      id: t.id,
      title: t.nombre,
      items: (itemsPorTitulo[t.id] || []).map(it => {
        const reg = it.id_modulo ? flatById[it.id_modulo] : null;
        return {
          id: it.id,                       // id de la fila (clave de React / apertura)
          appId: it.id_modulo || null,     // clave de ruteo del <main>
          title: it.nombre,
          // El ícono lo aporta el registro de ventanas; si el ítem no tiene
          // ventana no hay ícono y se dibuja apagado.
          icon: reg && reg.kind === "item" ? reg.node.icon : null,
          disponible: !!(reg && reg.kind === "item"),
        };
      }),
    });
  }
  return sistemas.map(s => ({
    id: s.id,
    nombre: s.nombre,
    logo: s.logo || "",
    descripcion: s.descripcion || "",
    autores: s.autores || "",
    contacto_operacion: s.contacto_operacion || "",
    titulos: titulosPorSistema[s.id] || [],
  }));
}

// ──────────────────────────────────────────────────────────────────
// LEFT SIDEBAR — full detail: L1 modules → L2 categories → L3 apps
// ──────────────────────────────────────────────────────────────────
function Chev({collapsed, leaf, size=12}) {
  return (
    <svg viewBox="0 0 12 12" width={size} height={size}
         style={{
           transform: collapsed ? 'rotate(-90deg)' : 'none',
           visibility: leaf ? 'hidden' : 'visible',
           transition: 'transform .12s', flexShrink: 0,
           color: 'currentColor'
         }}>
      <path d="M3 4.5 L6 7.5 L9 4.5" fill="none" stroke="currentColor"
            strokeWidth="1.4" strokeLinecap="square"/>
    </svg>
  );
}

// El árbol viene de `sistema` (el sistema elegido en la portada): un nivel de
// títulos (sc.usr_sistema_menu_titulo) y, dentro, sus ítems (sc.usr_sistema_menu_item).
// Sin sistema elegido el menú no lista nada — la portada es la que manda.
function Sidebar({
  sistema,
  selectedAppId,
  openGroups, onToggleGroup,
  onSelectApp,
  query, setQuery,
}) {
  const q = query.trim().toLowerCase();
  const matches = (text) => !q || String(text || "").toLowerCase().includes(q);

  const renderTitulo = (t) => {
    const visibles = matches(t.title) ? t.items : t.items.filter(i => matches(i.title));
    if (q && visibles.length === 0 && !matches(t.title)) return null;
    const abierto = openGroups[t.id] !== false;

    return (
      <div className={"l1" + (/cat[áa]logo/i.test(t.title) ? " es-catalogo" : "")} key={t.id}>
        <div className="l1-head" onClick={() => onToggleGroup(t.id)}>
          <Chev collapsed={!abierto}/>
          <span className="title">{t.title}</span>
          <span className="count">{t.items.length}</span>
        </div>

        {abierto && (
          <div className="l1-body">
            {visibles.map(it => {
              const active = it.appId && selectedAppId === it.appId;
              // Ítem cargado en la tabla pero sin ventana construida: se muestra
              // apagado y sin click, para que el hueco sea visible.
              if (!it.disponible) {
                return (
                  <div key={it.id} className="l3-row disabled"
                       title={`${it.title} — ventana no construida todavía`}>
                    <span className="lico"/>
                    <span className="lbl">{it.title}</span>
                  </div>
                );
              }
              return (
                <div
                  key={it.id}
                  className={`l3-row ${active?"active":""}`}
                  onClick={() => onSelectApp(it.appId)}
                  title={it.title}
                >
                  <span className="lico"><Icon name={it.icon} size={13}/></span>
                  <span className="lbl">{it.title}</span>
                </div>
              );
            })}
          </div>
        )}
      </div>
    );
  };

  return (
    <aside className="sidebar">
      <div className="search">
        <div className="search-wrap">
          <svg className="icn" width="14" height="14" viewBox="0 0 14 14" fill="none">
            <circle cx="6" cy="6" r="4" stroke="currentColor" strokeWidth="1.2"/>
            <path d="M9.2 9.2 L12 12" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
          </svg>
          <input
            placeholder="Buscar aplicaciones…"
            value={query}
            onChange={(e)=>setQuery(e.target.value)}
            disabled={!sistema}
          />
        </div>
      </div>

      <div className="tree">
        {!sistema ? (
          <div className="tree-empty">
            Elige un sistema en la portada para ver su menú.
          </div>
        ) : sistema.titulos.length === 0 ? (
          <div className="tree-empty">
            <b>{sistema.nombre}</b> no tiene títulos de menú cargados.
          </div>
        ) : (
          sistema.titulos.map(renderTitulo)
        )}
      </div>
    </aside>
  );
}

// ──────────────────────────────────────────────────────────────────
// Paleta de la portada: color por posición, así un sistema nuevo recibe el suyo
// sin tocar código.
// ──────────────────────────────────────────────────────────────────
const HOME_PALETTE = [
  {c:"#4F46E5",tint:"#ECECFE"}, {c:"#0369A1",tint:"#E1F0FA"}, {c:"#2563EB",tint:"#E7EFFE"},
  {c:"#B45309",tint:"#FAF0DC"}, {c:"#0F766E",tint:"#DDF2EF"}, {c:"#7C3AED",tint:"#F1E9FE"},
  {c:"#BE185D",tint:"#FCE7F0"}, {c:"#C2410C",tint:"#FBE9DF"}, {c:"#5B6472",tint:"#EEF0F3"},
  {c:"#0891B2",tint:"#DEF2F7"},
];
// ──────────────────────────────────────────────────────────────────
// PORTADA — una caja por sistema (sc.sistema). El nombre grande; el resto de la
// ficha (descripción, autores, contacto de operación) en cuerpo mucho menor.
// Al elegir una caja el menú lateral pasa a mostrar SÓLO ese sistema.
//
// El logo sale de sc.sistema.logo (data URI o URL, se administra en la ventana
// Sistemas). Si la fila no trae logo se dibuja la inicial del nombre, así la caja
// nunca queda con un hueco roto.
// ──────────────────────────────────────────────────────────────────
function SistemaBoxes({sistemas, selectedSistemaId, onPick}) {
  if (!sistemas.length) {
    return (
      <div className="homeboard">
        <div className="sb-vacio">
          No hay sistemas activos en <code>sc.sistema</code>.
        </div>
      </div>
    );
  }
  return (
    <div className="homeboard">
      <div className="sb-grid">
        {sistemas.map((s, i) => {
          const col = HOME_PALETTE[i % HOME_PALETTE.length];
          const nItems = s.titulos.reduce((a, t) => a + t.items.length, 0);
          const fichaVacia = !s.descripcion && !s.autores && !s.contacto_operacion;
          return (
            <a
              key={s.id}
              className={`sb-card ${selectedSistemaId === s.id ? "active" : ""}`}
              style={{"--c": col.c, "--tint": col.tint}}
              onClick={() => onPick(s.id)}
              title={selectedSistemaId === s.id
                ? `${s.nombre} — es el sistema en el que ya se está`
                : `Abrir ${s.nombre}`}
            >
              <div className="sb-top">
                <span className="sb-logo">
                  {s.logo
                    ? <img src={s.logo} alt=""
                           onError={e => { e.currentTarget.style.visibility = "hidden"; }}/>
                    : <b className="sb-inicial">{String(s.nombre || "?").trim().charAt(0).toUpperCase()}</b>}
                </span>
                <span className="sb-cuenta">
                  {s.titulos.length} {s.titulos.length === 1 ? "título" : "títulos"} · {nItems} {nItems === 1 ? "ítem" : "ítems"}
                </span>
              </div>

              <h2 className="sb-nombre">{s.nombre}</h2>

              <dl className="sb-ficha">
                {s.descripcion && <dd className="sb-desc">{s.descripcion}</dd>}
                {s.autores && (
                  <div className="sb-par"><dt>Autores</dt><dd>{s.autores}</dd></div>
                )}
                {s.contacto_operacion && (
                  <div className="sb-par"><dt>Contacto</dt><dd>{s.contacto_operacion}</dd></div>
                )}
                {fichaVacia && (
                  <dd className="sb-pendiente">Ficha sin completar — Adm. Sistema › Sistemas</dd>
                )}
              </dl>
            </a>
          );
        })}
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────
// DETAIL VIEW — level 4 items for a selected app
// ──────────────────────────────────────────────────────────────────
function DetailView({app, group, module: m, onBack, onSelectChild, selectedChildId}) {
  return (
    <div className="detail">
      <div className="detail-head">
        <button className="detail-back" onClick={onBack}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M9 3 L5 7 L9 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          Volver
        </button>
        <div className="detail-crumb">
          <b>{m.title}</b>
          <span className="sep">›</span>
          <b>{group.title}</b>
        </div>
        <div className="detail-meta">Vista de detalle</div>
      </div>

      <div className="detail-hero">
        <div className="hero-icon"><Icon name={group.catIcon || app.icon} size={56}/></div>
        <div className="hero-text">
          <h1>{app.title}</h1>
          <div className="hero-sub">Elementos contenidos en esta aplicación.</div>
        </div>
        <div className="hero-count">
          <b>{String(app.children.length).padStart(2,'0')}</b>
          elementos
        </div>
      </div>

      <div className="detail-body">
        <div className="detail-subtitle">Contenido</div>
        <div className="detail-grid">
          {app.children.map((c, i) => (
            <div
              key={c.id}
              className={`leaf ${selectedChildId===c.id?"active":""}`}
              onClick={() => onSelectChild(c.id)}
            >
              <div className="leaf-num">{String(i+1).padStart(2,'0')}</div>
              <div className="leaf-icon"><Icon name={c.icon} size={40}/></div>
              <div className="leaf-label">{c.title}</div>
              <svg className="leaf-arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M5 3 L9 7 L5 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────
// GROUP FRAME — generic frame for groups with frame: attribute
// ──────────────────────────────────────────────────────────────────
const LINEAS_INGRESO = [
  "Publicidad Mega 1",
  "Publicidad Mega 2",
  "Publicidad Online",
  "MegaGo",
  "Branded Content",
  "Ventas Internacionales",
  "Global Content",
  "Señal por Suscripción",
];

// ────────────────────────────────────────────────────────────────
// CRUD — Tipos Monetización
// ────────────────────────────────────────────────────────────────
const INITIAL_AREAS = LINEAS_INGRESO.map((name, i) => ({
  id: "AM" + (i + 1),
  nombre_monetizacion: name,
  activo: true,
}));

const LS_AREAS = "sc.monetizacion";

// Migración: asegurar el área AM8 "Señal por Suscripción" en datos existentes.
(function _migrateAreaSenal() {
  try {
    const raw = localStorage.getItem(LS_AREAS);
    if (!raw) return; // usuario nuevo → INITIAL_AREAS ya la incluye
    const rows = JSON.parse(raw);
    if (Array.isArray(rows) && !rows.some(a => a.id === "AM8")) {
      rows.push({ id: "AM8", nombre_monetizacion: "Señal por Suscripción", activo: true });
      localStorage.setItem(LS_AREAS, JSON.stringify(rows));
    }
  } catch (e) {}
})();

function useTipoMonetizacion() {
  const [rows, setRows] = useState(() => {
    try {
      const raw = localStorage.getItem(LS_AREAS);
      if (raw) {
        const parsed = JSON.parse(raw);
        if (Array.isArray(parsed)) return parsed;
      }
    } catch (e) {}
    return INITIAL_AREAS;
  });
  useEffect(() => {
    try { localStorage.setItem(LS_AREAS, JSON.stringify(rows)); } catch (e) {}
  }, [rows]);
  return [rows, setRows];
}


// ──────────────────────────────────────────────────────────────────
// App
// ──────────────────────────────────────────────────────────────────
function App() {
  const [selectedAppId, setSelectedAppId] = useState(null);
  const [detailAppId, setDetailAppId] = useState(null);
  const [selectedChildId, setSelectedChildId] = useState(null);
  // Sidebar collapse toggle. Persisted en LS para sobrevivir refresh.
  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
    try { return localStorage.getItem("sc.sidebar.collapsed") === "1"; } catch (e) { return false; }
  });
  useEffect(() => {
    try { localStorage.setItem("sc.sidebar.collapsed", sidebarCollapsed ? "1" : "0"); } catch (e) {}
  }, [sidebarCollapsed]);
  // Árbol de menú por sistema, leído de las tablas (sc.sistema + los dos
  // catálogos de menú). LS ya está hidratado por el preloader síncrono de
  // index.html, así que está disponible en el primer render.
  //
  // `menuRev` lo re-arma a pedido: la ventana «Menu de sistema» edita estas
  // mismas tablas, y sin esto el usuario guardaba un título y el menú seguía
  // igual hasta recargar la página.
  const [menuRev, setMenuRev] = useState(0);
  const sistemas = useMemo(() => buildSistemas(), [menuRev]);
  const refrescarMenu = useCallback(() => setMenuRev(n => n + 1), []);
  // Sistema elegido en la portada. Persistido para sobrevivir un refresh; se
  // valida contra las filas vivas, así un sistema borrado no deja la app clavada
  // en un menú fantasma.
  const [selectedSistemaId, setSelectedSistemaId] = useState(() => {
    // En una aplicación (directorio de un sistema) el sistema NO se elige: viene
    // fijado por su index.html (window.__SC_SISTEMA). Sólo la portada de la raíz
    // recuerda lo último elegido.
    if (SISTEMA_FIJO) return SISTEMA_FIJO;
    try {
      const guardado = localStorage.getItem("sc.sistema.seleccionado");
      return guardado || null;
    } catch (e) { return null; }
  });
  const sistemaActual = useMemo(
    () => sistemas.find(s => s.id === selectedSistemaId) || null,
    [sistemas, selectedSistemaId]
  );
  useEffect(() => {
    if (SISTEMA_FIJO) return;   // en una app el sistema no se guarda: es su directorio
    try {
      if (sistemaActual) localStorage.setItem("sc.sistema.seleccionado", sistemaActual.id);
      else localStorage.removeItem("sc.sistema.seleccionado");
    } catch (e) {}
  }, [sistemaActual]);

  const [openGroups, setOpenGroups] = useState({});
  const [query, setQuery] = useState("");

  // Sesión de usuario — EXACTO como gestion_transporte: auto-login del usuario
  // por defecto (primer activo) en la primera carga; topbar muestra el usuario +
  // botón visible "Cerrar sesión"; al cerrar sesión aparece el gate para elegir/
  // reingresar. La resolución corre en useEffect (tras montar), cuando TODOS los
  // scripts babel ya definieron window.SCAuth/SCLogin — así no hay carrera de carga.
  const [sessionUser, setSessionUser] = useState(null);
  const [authReady, setAuthReady] = useState(false);
  useEffect(() => {
    const A = window.SCAuth;
    if (A) {
      let u = A.currentUser();
      if (!u) { const d = A.defaultUser && A.defaultUser(); if (d) { A.setCurrentUserId(d.id); u = d; } }
      setSessionUser(u);
    }
    setAuthReady(true);
  }, []);
  const doLogout = useCallback(() => {
    if (window.SCAuth) window.SCAuth.setCurrentUserId("");
    setSessionUser(null);
  }, []);

  // Los títulos del menú arrancan ABIERTOS: el estado sólo guarda los cerrados
  // (`false`), así un título nuevo en la tabla aparece desplegado sin tocar nada.
  const onToggleGroup = useCallback((gid) => {
    setOpenGroups(o => ({...o, [gid]: o[gid] === false}));
  }, []);

  // `id` es la clave de ruteo (usr_sistema_menu_item.id_modulo = id de MODULES), la
  // misma con la que el <main> elige el componente.
  const onSelectApp = useCallback((id) => {
    setSelectedAppId(prev => prev === id ? null : id);
    const entry = flatById[id];
    if (entry && entry.kind === "item") {
      // If this app has children, open the detail view
      if (entry.node.children && entry.node.children.length > 0) {
        setDetailAppId(id);
        setSelectedChildId(null);
      }
    }
  }, []);

  // ── Navegación entre módulos ─────────────────────────────────────────────
  // La propuesta se edita en UNA sola ventana: el drawer de la oportunidad, en
  // "CRM-propuestas Pipeline". Los módulos que la LISTAN pero no la editan (el
  // pipeline de planes) navegan hacia ese drawer en vez de montar un segundo
  // editor. El id viaja en una casilla que el módulo destino consume al montar:
  // el cambio de `selectedAppId` desmonta el origen, así que no hay props que
  // pasar entre ellos.
  //
  // El destino ABRE LA PROPUESTA, no la oportunidad: el drawer aterriza en su modo
  // enfocado, con el editor de esa propuesta a la vista y la oportunidad completa a
  // un clic (ver `soloEditorPp` en cruds-crm.jsx). Pinchar «PP1» pide la propuesta.
  //
  // El viaje es de IDA Y VUELTA: junto con la propuesta se anota de qué ventana se
  // salió, y cerrar el editor devuelve ahí. Sin eso, cerrar dejaba al usuario en el
  // CRM de propuestas —la ventana destino— y no en la que estaba mirando, que es lo
  // que un botón de cerrar promete.
  const selectedAppIdRef = useRef(null);
  useEffect(() => { selectedAppIdRef.current = selectedAppId; }, [selectedAppId]);
  useEffect(() => {
    window.SCNav = {
      propuestaPendiente: null,
      // Ventana desde la que se pinchó la propuesta (null = no se llegó por enlace).
      origenAppId: null,
      abrirPropuesta(ppId) {
        if (!ppId) return;
        window.SCNav.propuestaPendiente = ppId;
        window.SCNav.origenAppId = selectedAppIdRef.current;
        setSelectedAppId("pipeline-proyectos");
      },
      tomarPropuestaPendiente() {
        const v = window.SCNav.propuestaPendiente;
        window.SCNav.propuestaPendiente = null;
        return v;
      },
      // La usa el destino al cerrar el editor. Devuelve `true` si hubo vuelta, para
      // que quien llama sepa si tiene que hacer algo más (si no hubo origen, el
      // cierre es el de siempre y la ventana se queda donde está).
      volverAlOrigen() {
        const origen = window.SCNav.origenAppId;
        window.SCNav.origenAppId = null;
        if (!origen) return false;
        setSelectedAppId(origen);
        return true;
      },
    };
  }, []);

  // Volver a la portada: se suelta el sistema y todo lo que dependía de él.
  const onBackToSistemas = useCallback(() => {
    if (SISTEMA_FIJO) { window.location.href = "../"; return; }
    setSelectedSistemaId(null);
    setSelectedAppId(null);
    setDetailAppId(null);
    setSelectedChildId(null);
    setQuery("");
  }, []);

  // Elegir un sistema = ENTRAR a su aplicación. Sólo su index.html carga los
  // <script> de sus ventanas, así que navegar es lo único que deja el menú
  // utilizable; cambiar el sistema en la misma página dejaba los ítems muertos.
  // Si el sistema todavía no tiene directorio propio se cae al comportamiento
  // anterior (menú en la misma página) en vez de no hacer nada.
  const onPickSistema = useCallback((sid) => {
    if (sid === SISTEMA_FIJO) return;          // ya se está dentro de esa app
    const url = urlDeSistema(sid);
    if (url) { window.location.href = url; return; }
    setSelectedSistemaId(sid);
    setSelectedAppId(null);
    setDetailAppId(null);
    setSelectedChildId(null);
    setQuery("");
  }, []);

  const onBackToOverview = useCallback(() => {
    setDetailAppId(null);
    setSelectedChildId(null);
  }, []);


  // Antes de resolver la sesión no pintamos nada (evita el flash del shell sin login).
  if (!authReady) return null;
  // Sin sesión (tras cerrar sesión) → gate a pantalla completa para reingresar (como gt).
  if (!sessionUser && window.SCLogin) {
    return React.createElement(window.SCLogin, { onLogin: (u) => setSessionUser(u) });
  }

  return (
    <>
      <div className="topbar">
        <button className="btn sidebar-toggle"
          onClick={() => setSidebarCollapsed(c => !c)}
          title={sidebarCollapsed ? "Mostrar menú lateral" : "Ocultar menú lateral"}
          aria-label="Mostrar/ocultar menú lateral"
          style={{
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            width: 32, height: 32, padding: 0, marginRight: 6,
          }}>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <rect x="2" y="3" width="12" height="10" rx="1.2" stroke="currentColor" strokeWidth="1.4"/>
            <line x1="6" y1="3" x2="6" y2="13" stroke="currentColor" strokeWidth="1.4"/>
            {!sidebarCollapsed && <line x1="3.5" y1="6" x2="4.7" y2="6" stroke="currentColor" strokeWidth="1.2"/>}
            {!sidebarCollapsed && <line x1="3.5" y1="8" x2="4.7" y2="8" stroke="currentColor" strokeWidth="1.2"/>}
            {!sidebarCollapsed && <line x1="3.5" y1="10" x2="4.7" y2="10" stroke="currentColor" strokeWidth="1.2"/>}
          </svg>
        </button>
        <div className="brand">
          <span className="mark">S</span>
          <span>Sistema comercial</span>
        </div>
        <div className="crumb">
          {sistemaActual ? (
            <>
              <a className="crumb-link" onClick={onBackToSistemas}
                 title="Volver a la portada de sistemas">Menú principal</a>
              <span className="crumb-sep">›</span>
              <span className="crumb-actual">{sistemaActual.nombre}</span>
            </>
          ) : (
            <span>Menú principal</span>
          )}
        </div>
        <div className="right">
          {sessionUser && window.SCAuth && (
            <span
              title={(window.SCAuth.rolesDeUsuario(sessionUser.id) || []).map(r => r.nombre).join(", ") || "Sin roles"}
              style={{ display: "inline-flex", alignItems: "center", gap: 8, marginRight: 2 }}>
              <span style={{ width: 24, height: 24, borderRadius: "50%", background: "var(--ink,#111)", color: "#fff", display: "grid", placeItems: "center", fontSize: 10.5, fontWeight: 700 }}>
                {window.SCAuth.userInitials(sessionUser)}
              </span>
              <span style={{ fontWeight: 600, fontSize: 13, color: "var(--ink)" }}>{window.SCAuth.userFullName(sessionUser)}</span>
              <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#22c55e" }} title="en línea"/>
            </span>
          )}
          {sessionUser && <button className="btn" onClick={doLogout}>Cerrar sesión</button>}
        </div>
      </div>

      <div className={`shell ${sidebarCollapsed ? "sidebar-collapsed" : ""}`}>
        <Sidebar
          sistema={sistemaActual}
          selectedAppId={selectedAppId}
          openGroups={openGroups}
          onToggleGroup={onToggleGroup}
          onSelectApp={onSelectApp}
          query={query}
          setQuery={setQuery}
        />

        <main className="main">
          {selectedAppId === "tipo-monetizacion" && flatById["tipo-monetizacion"] && window.TipoMonetizacionCrud ? (
            React.createElement(window.TipoMonetizacionCrud, {
              app: flatById["tipo-monetizacion"].node,
              group: flatById["tipo-monetizacion"].group,
              module: flatById["tipo-monetizacion"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "definicion-productos" && flatById["definicion-productos"] && window.ProductosCrud ? (
            React.createElement(window.ProductosCrud, {
              app: flatById["definicion-productos"].node,
              group: flatById["definicion-productos"].group,
              module: flatById["definicion-productos"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "pipeline-planes" && flatById["pipeline-planes"] && window.DefinirProductosCrud ? (
            React.createElement(window.DefinirProductosCrud, {
              app: flatById["pipeline-planes"].node,
              group: flatById["pipeline-planes"].group,
              module: flatById["pipeline-planes"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "pipeline-proyectos" && flatById["pipeline-proyectos"] && window.CrmPropuestasCrud ? (
            React.createElement(window.CrmPropuestasCrud, {
              app: flatById["pipeline-proyectos"].node,
              group: flatById["pipeline-proyectos"].group,
              module: flatById["pipeline-proyectos"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "autorizacion-credito" && flatById["autorizacion-credito"] && window.AutorizacionCreditoCrud ? (
            React.createElement(window.AutorizacionCreditoCrud, {
              app: flatById["autorizacion-credito"].node,
              group: flatById["autorizacion-credito"].group,
              module: flatById["autorizacion-credito"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "empresas" && flatById["empresas"] && window.EmpresaCrud ? (
            React.createElement(window.EmpresaCrud, {
              app: flatById["empresas"].node,
              group: flatById["empresas"].group,
              module: flatById["empresas"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "moneda" && flatById["moneda"] && window.MonedaCrud ? (
            React.createElement(window.MonedaCrud, {
              app: flatById["moneda"].node,
              group: flatById["moneda"].group,
              module: flatById["moneda"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "parrilla-mes" && flatById["parrilla-mes"] && window.ParrillaMesCrud ? (
            React.createElement(window.ParrillaMesCrud, {
              app: flatById["parrilla-mes"].node,
              group: flatById["parrilla-mes"].group,
              module: flatById["parrilla-mes"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "mapa-parrilla" && flatById["mapa-parrilla"] && window.MapaParrillaCrud ? (
            React.createElement(window.MapaParrillaCrud, {
              app: flatById["mapa-parrilla"].node,
              group: flatById["mapa-parrilla"].group,
              module: flatById["mapa-parrilla"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "clase-documento" && flatById["clase-documento"] && window.ClaseDocumentoCrud ? (
            React.createElement(window.ClaseDocumentoCrud, {
              app: flatById["clase-documento"].node,
              group: flatById["clase-documento"].group,
              module: flatById["clase-documento"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "genero" && flatById["genero"] && window.GeneroCrud ? (
            React.createElement(window.GeneroCrud, {
              app: flatById["genero"].node,
              group: flatById["genero"].group,
              module: flatById["genero"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "estado-aparicion" && flatById["estado-aparicion"] && window.EstadoAparicionCrud ? (
            React.createElement(window.EstadoAparicionCrud, {
              app: flatById["estado-aparicion"].node,
              group: flatById["estado-aparicion"].group,
              module: flatById["estado-aparicion"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "estado-transmision" && flatById["estado-transmision"] && window.EstadoTransmisionCrud ? (
            React.createElement(window.EstadoTransmisionCrud, {
              app: flatById["estado-transmision"].node,
              group: flatById["estado-transmision"].group,
              module: flatById["estado-transmision"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "relacion-comercial" && flatById["relacion-comercial"] && window.RelacionComercialCrud ? (
            React.createElement(window.RelacionComercialCrud, {
              app: flatById["relacion-comercial"].node,
              group: flatById["relacion-comercial"].group,
              module: flatById["relacion-comercial"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "empresa-relacion" && flatById["empresa-relacion"] && window.EmpresaRelacionComercialCrud ? (
            React.createElement(window.EmpresaRelacionComercialCrud, {
              app: flatById["empresa-relacion"].node,
              group: flatById["empresa-relacion"].group,
              module: flatById["empresa-relacion"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "definicion-canales" && flatById["definicion-canales"] && window.CanalesCrud ? (
            React.createElement(window.CanalesCrud, {
              app: flatById["definicion-canales"].node,
              group: flatById["definicion-canales"].group,
              module: flatById["definicion-canales"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "contenidos" && flatById["contenidos"] && window.ContenidosCrud ? (
            React.createElement(window.ContenidosCrud, {
              app: flatById["contenidos"].node,
              group: flatById["contenidos"].group,
              module: flatById["contenidos"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "episodios-cms" && flatById["episodios-cms"] && window.EpisodiosCmsCrud ? (
            React.createElement(window.EpisodiosCmsCrud, {
              app: flatById["episodios-cms"].node,
              group: flatById["episodios-cms"].group,
              module: flatById["episodios-cms"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "episodios-frankenstein" && flatById["episodios-frankenstein"] && window.EpisodiosFrankensteinCrud ? (
            React.createElement(window.EpisodiosFrankensteinCrud, {
              app: flatById["episodios-frankenstein"].node,
              group: flatById["episodios-frankenstein"].group,
              module: flatById["episodios-frankenstein"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "ventanas" && flatById["ventanas"] && window.VentanasDerechosGantt ? (
            React.createElement(window.VentanasDerechosGantt, {
              app: flatById["ventanas"].node,
              group: flatById["ventanas"].group,
              module: flatById["ventanas"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "contratos-uso" && flatById["contratos-uso"] && window.ContratosUsoCrud ? (
            React.createElement(window.ContratosUsoCrud, {
              app: flatById["contratos-uso"].node,
              group: flatById["contratos-uso"].group,
              module: flatById["contratos-uso"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "prog-senales" && flatById["prog-senales"] && window.ProgCanalesCrud ? (
            React.createElement(window.ProgCanalesCrud, {
              app: flatById["prog-senales"].node,
              group: flatById["prog-senales"].group,
              module: flatById["prog-senales"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "programar-parrillas" && flatById["programar-parrillas"] && window.ProgramarParrillasCrud ? (
            React.createElement(window.ProgramarParrillasCrud, {
              app: flatById["programar-parrillas"].node,
              group: flatById["programar-parrillas"].group,
              module: flatById["programar-parrillas"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "inv-publi" && flatById["inv-publi"] && window.InventariosPublicitariosCrud ? (
            React.createElement(window.InventariosPublicitariosCrud, {
              app: flatById["inv-publi"].node,
              group: flatById["inv-publi"].group,
              module: flatById["inv-publi"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "crear-orden-produccion" && flatById["crear-orden-produccion"] && window.GenerarOrdenesCrud ? (
            React.createElement(window.GenerarOrdenesCrud, {
              app: flatById["crear-orden-produccion"].node,
              group: flatById["crear-orden-produccion"].group,
              module: flatById["crear-orden-produccion"].module,
              mode: "ganadas",
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "crear-orden-desde-exh" && flatById["crear-orden-desde-exh"] && window.GenerarOrdenesCrud ? (
            React.createElement(window.GenerarOrdenesCrud, {
              app: flatById["crear-orden-desde-exh"].node,
              group: flatById["crear-orden-desde-exh"].group,
              module: flatById["crear-orden-desde-exh"].module,
              mode: "exhibicion",
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "acuerdos-comerciales" && flatById["acuerdos-comerciales"] && window.AcuerdoComercialCrud ? (
            React.createElement(window.AcuerdoComercialCrud, {
              app: flatById["acuerdos-comerciales"].node,
              group: flatById["acuerdos-comerciales"].group,
              module: flatById["acuerdos-comerciales"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "acuerdos-valorizacion" && flatById["acuerdos-valorizacion"] && window.AcuerdoValorizacionCrud ? (
            React.createElement(window.AcuerdoValorizacionCrud, {
              app: flatById["acuerdos-valorizacion"].node,
              group: flatById["acuerdos-valorizacion"].group,
              module: flatById["acuerdos-valorizacion"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "venta-derechos" && flatById["venta-derechos"] && window.ElemDerechosContenidoCrud ? (
            React.createElement(window.ElemDerechosContenidoCrud, {
              app: flatById["venta-derechos"].node,
              group: flatById["venta-derechos"].group,
              module: flatById["venta-derechos"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "arriendos" && flatById["arriendos"] && window.ElemArriendoCrud ? (
            React.createElement(window.ElemArriendoCrud, {
              app: flatById["arriendos"].node,
              group: flatById["arriendos"].group,
              module: flatById["arriendos"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "senal-abonados" && flatById["senal-abonados"] && window.ElemSenalPorAbonadosCrud ? (
            React.createElement(window.ElemSenalPorAbonadosCrud, {
              app: flatById["senal-abonados"].node,
              group: flatById["senal-abonados"].group,
              module: flatById["senal-abonados"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "cobrar-derechos" && flatById["cobrar-derechos"] && window.CobrarDerechosCrud ? (
            React.createElement(window.CobrarDerechosCrud, {
              app: flatById["cobrar-derechos"].node,
              group: flatById["cobrar-derechos"].group,
              module: flatById["cobrar-derechos"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "ver-ord-vencidas-noverif" && flatById["ver-ord-vencidas-noverif"] && window.OrdVencidasCrud ? (
            React.createElement(window.OrdVencidasCrud, {
              app: flatById["ver-ord-vencidas-noverif"].node,
              group: flatById["ver-ord-vencidas-noverif"].group,
              module: flatById["ver-ord-vencidas-noverif"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "facturar" && flatById["facturar"] && window.EmitirFacturaCrud ? (
            React.createElement(window.EmitirFacturaCrud, {
              app: flatById["facturar"].node,
              group: flatById["facturar"].group,
              module: flatById["facturar"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "contab-contratos-envasados" && flatById["contab-contratos-envasados"] && window.ContabContratosEnvasadosCrud ? (
            React.createElement(window.ContabContratosEnvasadosCrud, {
              app: flatById["contab-contratos-envasados"].node,
              group: flatById["contab-contratos-envasados"].group,
              module: flatById["contab-contratos-envasados"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "reporte-cierre" && flatById["reporte-cierre"] && window.ReporteCierreCrud ? (
            React.createElement(window.ReporteCierreCrud, {
              app: flatById["reporte-cierre"].node,
              group: flatById["reporte-cierre"].group,
              module: flatById["reporte-cierre"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "documentos-tributarios" && flatById["documentos-tributarios"] && window.DocumentosTributariosCrud ? (
            React.createElement(window.DocumentosTributariosCrud, {
              app: flatById["documentos-tributarios"].node,
              group: flatById["documentos-tributarios"].group,
              module: flatById["documentos-tributarios"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "razon-social" && flatById["razon-social"] && window.RazonSocialCrud ? (
            React.createElement(window.RazonSocialCrud, {
              app: flatById["razon-social"].node,
              group: flatById["razon-social"].group,
              module: flatById["razon-social"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "editores" && flatById["editores"] && window.EditoresCrud ? (
            React.createElement(window.EditoresCrud, {
              app: flatById["editores"].node,
              group: flatById["editores"].group,
              module: flatById["editores"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "verificacion-ventas" && flatById["verificacion-ventas"] && window.VerificacionVentasDispatch ? (
            React.createElement(window.VerificacionVentasDispatch, {
              app: flatById["verificacion-ventas"].node,
              group: flatById["verificacion-ventas"].group,
              module: flatById["verificacion-ventas"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "feriados" && flatById["feriados"] && window.FeriadosCrud ? (
            React.createElement(window.FeriadosCrud, {
              app: flatById["feriados"].node,
              group: flatById["feriados"].group,
              module: flatById["feriados"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "seguridad-parrilla" && flatById["seguridad-parrilla"] && window.SeguridadParrillaCrud ? (
            React.createElement(window.SeguridadParrillaCrud, {
              app: flatById["seguridad-parrilla"].node,
              group: flatById["seguridad-parrilla"].group,
              module: flatById["seguridad-parrilla"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "equipos-venta" && flatById["equipos-venta"] && window.EquiposVentaCrud ? (
            React.createElement(window.EquiposVentaCrud, {
              app: flatById["equipos-venta"].node,
              group: flatById["equipos-venta"].group,
              module: flatById["equipos-venta"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "contratos-marco" && flatById["contratos-marco"] && window.ContratosMarcoCrud ? (
            React.createElement(window.ContratosMarcoCrud, {
              app: flatById["contratos-marco"].node,
              group: flatById["contratos-marco"].group,
              module: flatById["contratos-marco"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "venta-por-proyecto" && flatById["venta-por-proyecto"] && window.VentaPorProyecto ? (
            React.createElement(window.VentaPorProyecto, {
              app: flatById["venta-por-proyecto"].node,
              group: flatById["venta-por-proyecto"].group,
              module: flatById["venta-por-proyecto"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "crm-dashboard" && flatById["crm-dashboard"] && window.CrmDashboard ? (
            React.createElement(window.CrmDashboard, {
              app: flatById["crm-dashboard"].node,
              group: flatById["crm-dashboard"].group,
              module: flatById["crm-dashboard"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "usuarios-tipo-monetizacion" && flatById["usuarios-tipo-monetizacion"] && window.UsuariosTipoMonetizacionCrud ? (
            React.createElement(window.UsuariosTipoMonetizacionCrud, {
              app: flatById["usuarios-tipo-monetizacion"].node,
              group: flatById["usuarios-tipo-monetizacion"].group,
              module: flatById["usuarios-tipo-monetizacion"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "tipo-monetizacion-usuarios" && flatById["tipo-monetizacion-usuarios"] && window.TipoMonetizacionUsuariosCrud ? (
            React.createElement(window.TipoMonetizacionUsuariosCrud, {
              app: flatById["tipo-monetizacion-usuarios"].node,
              group: flatById["tipo-monetizacion-usuarios"].group,
              module: flatById["tipo-monetizacion-usuarios"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "grupos-venta" && flatById["grupos-venta"] && window.GruposVentaCrud ? (
            React.createElement(window.GruposVentaCrud, {
              app: flatById["grupos-venta"].node,
              group: flatById["grupos-venta"].group,
              module: flatById["grupos-venta"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "targets" && flatById["targets"] && window.TargetsCrud ? (
            React.createElement(window.TargetsCrud, {
              app: flatById["targets"].node,
              group: flatById["targets"].group,
              module: flatById["targets"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "listas-precio" && flatById["listas-precio"] && window.ListasPrecioCrud ? (
            React.createElement(window.ListasPrecioCrud, {
              app: flatById["listas-precio"].node,
              group: flatById["listas-precio"].group,
              module: flatById["listas-precio"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "verificacion" && flatById["verificacion"] && window.VerificacionCrud ? (
            React.createElement(window.VerificacionCrud, {
              app: flatById["verificacion"].node,
              group: flatById["verificacion"].group,
              module: flatById["verificacion"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "adm-usuarios" && flatById["adm-usuarios"] && window.UsuariosCrud ? (
            React.createElement(window.UsuariosCrud, {
              app: flatById["adm-usuarios"].node,
              group: flatById["adm-usuarios"].group,
              module: flatById["adm-usuarios"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "adm-depto-rrhh" && flatById["adm-depto-rrhh"] && window.RrhhEstructuraCrud ? (
            React.createElement(window.RrhhEstructuraCrud, {
              app: flatById["adm-depto-rrhh"].node,
              group: flatById["adm-depto-rrhh"].group,
              module: flatById["adm-depto-rrhh"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "adm-roles" && flatById["adm-roles"] && window.RolesCrud ? (
            React.createElement(window.RolesCrud, {
              app: flatById["adm-roles"].node,
              group: flatById["adm-roles"].group,
              module: flatById["adm-roles"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "adm-user-roles" && flatById["adm-user-roles"] && window.UsuariosRolesCrud ? (
            React.createElement(window.UsuariosRolesCrud, {
              app: flatById["adm-user-roles"].node,
              group: flatById["adm-user-roles"].group,
              module: flatById["adm-user-roles"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "adm-roles-menu" && flatById["adm-roles-menu"] && window.RolesMenuCrud ? (
            React.createElement(window.RolesMenuCrud, {
              app: flatById["adm-roles-menu"].node,
              group: flatById["adm-roles-menu"].group,
              module: flatById["adm-roles-menu"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "adm-menu-roles" && flatById["adm-menu-roles"] && window.MenuRolesCrud ? (
            React.createElement(window.MenuRolesCrud, {
              app: flatById["adm-menu-roles"].node,
              group: flatById["adm-menu-roles"].group,
              module: flatById["adm-menu-roles"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "adm-roles-usuarios" && flatById["adm-roles-usuarios"] && window.RolesUsuariosCrud ? (
            React.createElement(window.RolesUsuariosCrud, {
              app: flatById["adm-roles-usuarios"].node,
              group: flatById["adm-roles-usuarios"].group,
              module: flatById["adm-roles-usuarios"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "adm-modulos" && flatById["adm-modulos"] && window.ModulosCrud ? (
            React.createElement(window.ModulosCrud, {
              app: flatById["adm-modulos"].node,
              group: flatById["adm-modulos"].group,
              module: flatById["adm-modulos"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "adm-rol-modulos" && flatById["adm-rol-modulos"] && window.RolModulosCrud ? (
            React.createElement(window.RolModulosCrud, {
              app: flatById["adm-rol-modulos"].node,
              group: flatById["adm-rol-modulos"].group,
              module: flatById["adm-rol-modulos"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "adm-modulos-rol" && flatById["adm-modulos-rol"] && window.ModulosRolCrud ? (
            React.createElement(window.ModulosRolCrud, {
              app: flatById["adm-modulos-rol"].node,
              group: flatById["adm-modulos-rol"].group,
              module: flatById["adm-modulos-rol"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "cuenta-contable-producto" && flatById["cuenta-contable-producto"] && window.CuentaContableProductoCrud ? (
            React.createElement(window.CuentaContableProductoCrud, {
              app: flatById["cuenta-contable-producto"].node,
              group: flatById["cuenta-contable-producto"].group,
              module: flatById["cuenta-contable-producto"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "adm-usuario-pep" && flatById["adm-usuario-pep"] && window.SapUsuarioPepCrud ? (
            React.createElement(window.SapUsuarioPepCrud, {
              app: flatById["adm-usuario-pep"].node,
              group: flatById["adm-usuario-pep"].group,
              module: flatById["adm-usuario-pep"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "adm-pep-usuario" && flatById["adm-pep-usuario"] && window.SapPepUsuarioCrud ? (
            React.createElement(window.SapPepUsuarioCrud, {
              app: flatById["adm-pep-usuario"].node,
              group: flatById["adm-pep-usuario"].group,
              module: flatById["adm-pep-usuario"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "adm-usuario-ceco" && flatById["adm-usuario-ceco"] && window.SapUsuarioCecoCrud ? (
            React.createElement(window.SapUsuarioCecoCrud, {
              app: flatById["adm-usuario-ceco"].node,
              group: flatById["adm-usuario-ceco"].group,
              module: flatById["adm-usuario-ceco"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "adm-ceco-usuario" && flatById["adm-ceco-usuario"] && window.SapCecoUsuarioCrud ? (
            React.createElement(window.SapCecoUsuarioCrud, {
              app: flatById["adm-ceco-usuario"].node,
              group: flatById["adm-ceco-usuario"].group,
              module: flatById["adm-ceco-usuario"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "campania-definicion" && flatById["campania-definicion"] && window.CampaniasAgenciaCrud ? (
            React.createElement(window.CampaniasAgenciaCrud, {
              app: flatById["campania-definicion"].node,
              group: flatById["campania-definicion"].group,
              module: flatById["campania-definicion"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "campania-materiales" && flatById["campania-materiales"] && window.MaterialesAgenciaCrud ? (
            React.createElement(window.MaterialesAgenciaCrud, {
              app: flatById["campania-materiales"].node,
              group: flatById["campania-materiales"].group,
              module: flatById["campania-materiales"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "campania-programacion" && flatById["campania-programacion"] && window.ProgramacionAgenciaCrud ? (
            React.createElement(window.ProgramacionAgenciaCrud, {
              app: flatById["campania-programacion"].node,
              group: flatById["campania-programacion"].group,
              module: flatById["campania-programacion"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "produccion-tablero" && flatById["produccion-tablero"] && window.TableroAgenciaCrud ? (
            React.createElement(window.TableroAgenciaCrud, {
              app: flatById["produccion-tablero"].node,
              group: flatById["produccion-tablero"].group,
              module: flatById["produccion-tablero"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "produccion-lista" && flatById["produccion-lista"] && window.ListaActivaAgenciaCrud ? (
            React.createElement(window.ListaActivaAgenciaCrud, {
              app: flatById["produccion-lista"].node,
              group: flatById["produccion-lista"].group,
              module: flatById["produccion-lista"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "produccion-gantt" && flatById["produccion-gantt"] && window.GanttAgenciaCrud ? (
            React.createElement(window.GanttAgenciaCrud, {
              app: flatById["produccion-gantt"].node,
              group: flatById["produccion-gantt"].group,
              module: flatById["produccion-gantt"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "promo-tipo-promo" && flatById["promo-tipo-promo"] && window.AgenciaTipoPromoCrud ? (
            React.createElement(window.AgenciaTipoPromoCrud, {
              app: flatById["promo-tipo-promo"].node,
              group: flatById["promo-tipo-promo"].group,
              module: flatById["promo-tipo-promo"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "promo-medio" && flatById["promo-medio"] && window.AgenciaMedioCrud ? (
            React.createElement(window.AgenciaMedioCrud, {
              app: flatById["promo-medio"].node,
              group: flatById["promo-medio"].group,
              module: flatById["promo-medio"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "promo-target" && flatById["promo-target"] && window.AgenciaTargetCrud ? (
            React.createElement(window.AgenciaTargetCrud, {
              app: flatById["promo-target"].node,
              group: flatById["promo-target"].group,
              module: flatById["promo-target"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "promo-unidad" && flatById["promo-unidad"] && window.AgenciaUnidadCrud ? (
            React.createElement(window.AgenciaUnidadCrud, {
              app: flatById["promo-unidad"].node,
              group: flatById["promo-unidad"].group,
              module: flatById["promo-unidad"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "promo-categoria" && flatById["promo-categoria"] && window.AgenciaCategoriaCrud ? (
            React.createElement(window.AgenciaCategoriaCrud, {
              app: flatById["promo-categoria"].node,
              group: flatById["promo-categoria"].group,
              module: flatById["promo-categoria"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "promo-prioridad" && flatById["promo-prioridad"] && window.AgenciaPrioridadCrud ? (
            React.createElement(window.AgenciaPrioridadCrud, {
              app: flatById["promo-prioridad"].node,
              group: flatById["promo-prioridad"].group,
              module: flatById["promo-prioridad"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "promo-estado" && flatById["promo-estado"] && window.AgenciaEstadoCrud ? (
            React.createElement(window.AgenciaEstadoCrud, {
              app: flatById["promo-estado"].node,
              group: flatById["promo-estado"].group,
              module: flatById["promo-estado"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "adm-sistemas" && flatById["adm-sistemas"] && window.SistemaCrud ? (
            React.createElement(window.SistemaCrud, {
              app: flatById["adm-sistemas"].node,
              group: flatById["adm-sistemas"].group,
              module: flatById["adm-sistemas"].module,
              onBack: () => { setSelectedAppId(null); },
            })
          ) : selectedAppId === "adm-titulos-menu" && flatById["adm-titulos-menu"] && window.TitulosMenuCrud ? (
            React.createElement(window.TitulosMenuCrud, {
              app: flatById["adm-titulos-menu"].node,
              group: flatById["adm-titulos-menu"].group,
              module: flatById["adm-titulos-menu"].module,
              // Al salir se re-arma el árbol: esta ventana edita las tablas que
              // dibujan el propio menú lateral.
              onBack: () => { setSelectedAppId(null); refrescarMenu(); },
            })
          ) : selectedAppId === "adm-menu-items" && flatById["adm-menu-items"] && window.MenuItemsCrud ? (
            React.createElement(window.MenuItemsCrud, {
              app: flatById["adm-menu-items"].node,
              group: flatById["adm-menu-items"].group,
              module: flatById["adm-menu-items"].module,
              onBack: () => { setSelectedAppId(null); refrescarMenu(); },
            })
          ) : selectedAppId === "adm-sistema-titulos" && flatById["adm-sistema-titulos"] && window.SistemaTitulosCrud ? (
            React.createElement(window.SistemaTitulosCrud, {
              app: flatById["adm-sistema-titulos"].node,
              group: flatById["adm-sistema-titulos"].group,
              module: flatById["adm-sistema-titulos"].module,
              onBack: () => { setSelectedAppId(null); refrescarMenu(); },
            })
          ) : selectedAppId === "adm-titulos-items" && flatById["adm-titulos-items"] && window.TitulosMenuItemsCrud ? (
            React.createElement(window.TitulosMenuItemsCrud, {
              app: flatById["adm-titulos-items"].node,
              group: flatById["adm-titulos-items"].group,
              module: flatById["adm-titulos-items"].module,
              onBack: () => { setSelectedAppId(null); refrescarMenu(); },
            })
          ) : detailAppId && flatById[detailAppId] ? (
            <DetailView
              app={flatById[detailAppId].node}
              group={flatById[detailAppId].group}
              module={flatById[detailAppId].module}
              onBack={onBackToOverview}
              onSelectChild={(cid) => setSelectedChildId(cid)}
              selectedChildId={selectedChildId}
            />
          ) : (
            // La portada: las cajas de la derecha están reservadas para los
            // sistemas. Sigue visible con un sistema elegido — así se puede
            // cambiar de sistema sin volver atrás.
            <SistemaBoxes
              // SIEMPRE los siete, también dentro de una aplicación: las cajas son
              // el conmutador entre sistemas. Dejar sólo la ficha propia obligaba a
              // volver a la raíz para cambiar de sistema, y daba la impresión de que
              // al entrar «desaparecían» los demás.
              // El sistema actual va resaltado (selectedSistemaId) y su caja no
              // navega a ninguna parte; las otras entran a su aplicación.
              sistemas={sistemas}
              selectedSistemaId={selectedSistemaId}
              onPick={onPickSistema}
            />
          )}
        </main>
      </div>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);

// Expose helpers needed by other Babel scripts (separate scopes)
Object.assign(window, { useTipoMonetizacion, Icon });