¿Con qué empresa vas a trabajar?

Estás autorizado a entrar a más de una empresa. Elegí con cuál vas a trabajar ahora -- se pregunta cada vez que entrás a Fénix.

Cargando empresas…

¿En qué sucursal vas a trabajar?

Cada dato que registres hoy va a quedar ligado a esta sucursal. Se pregunta cada vez que entrás a Fénix.

Cargando sucursales…

🛠️

Módulo

Este módulo está en proceso de ser creado.

👋

Hasta pronto

Ya puede cerrar esta pestaña o ventana del navegador con confianza.

General

Trabajo diario

Reportes

Configuración

Gestión

Reportes

Configuración

Gestión

Configuración

Gestión

Configuración

Gestión

Reportes

Configuración

Gestión

Configuración

Gestión

Reportes

Configuración

Bienvenido, Sistemas Rodríguez y Asociados

Hoy es viernes 10 de julio de 2026

Período fiscal actual

Julio 2026

Abierto

Asientos pendientes

Cierre fiscal 2025

Pendiente de aplicar

Último balance generado

Mayo 2026

¿Qué desea hacer?

Los números de esta pantalla son ilustrativos, para mostrar cómo se navegaría entre módulos — cada pantalla de abajo sigue siendo su propio prototipo, sin una base de datos real compartida detrás todavía. Cuando el motor tenga un backend, este panel de Inicio leerá los mismos datos reales que ve en cada módulo, no una copia aparte.

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Asientos Contables</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{
    font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
    font-variant-numeric:tabular-nums;
  }
  h1,h2,h3{
    font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;
    font-weight:600; text-wrap:balance; margin:0;
  }
  button{font-family:inherit; font-size:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1180px; margin:0 auto; padding:28px 24px 64px;}

/* ---------- top bar ---------- */
  .topbar{
    display:flex; align-items:baseline; justify-content:space-between;
    padding-bottom:18px; border-bottom:2px solid var(--ink); margin-bottom:22px;
    gap:16px; flex-wrap:wrap;
  }
  .brand{display:flex; align-items:baseline; gap:10px;}
  .brand h1{font-size:22px; letter-spacing:.2px;}
  .brand .sep{color:var(--line-strong);}
  .brand .empresa{font-size:14px; color:var(--ink-muted);}
  .crumbs{font-size:12.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.06em;}
  .crumbs b{color:var(--ink); font-weight:600;}

/* ---------- filter bar ---------- */
  .filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field.num input{width:88px;}
  .field.numero input{width:100px;}
  .field.fecha input{width:140px;}
  .range{display:flex; align-items:end; gap:7px;}
  .range .dash{color:var(--ink-muted); padding-bottom:8px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-sm{padding:5px 10px; font-size:12.5px; border-radius:6px;}
  .btn[disabled]{opacity:.4; cursor:not-allowed;}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}

/* ---------- table ---------- */
  .table-wrap{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow);
  }
  table{border-collapse:collapse; width:100%; min-width:920px;}
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--ink-muted); font-weight:600; padding:11px 14px;
    border-bottom:1px solid var(--line-strong); background:var(--surface-2);
    position:sticky; top:0;
  }
  th.num, td.num{text-align:right;}
  tbody td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--surface-2);}
  td.numero{font-weight:700;}
  .glosa-cell{max-width:280px;}
  .glosa-cell .glosa{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .glosa-cell .tercero{display:block; font-size:12px; color:var(--ink-muted); margin-top:2px;}

.pill{
    display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 8px;
    border-radius:99px; font-size:11.5px; font-weight:700; letter-spacing:.02em;
    border:1px solid transparent; white-space:nowrap;
  }
  .pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
  .pill-aplicado{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
  .pill-pendiente{background:var(--amber-bg); color:var(--amber-ink); border-color:var(--amber-line);}
  .pill-anulado{background:var(--grey-bg); color:var(--grey-ink); border-color:var(--line-strong); text-decoration:line-through; text-decoration-thickness:1px;}

.tag-modulo{
    font-size:11.5px; color:var(--ink-muted); border:1px solid var(--line-strong);
    border-radius:6px; padding:2px 7px; white-space:nowrap;
  }

.row-actions{display:flex; gap:4px; justify-content:flex-end;}
  .icon-btn{
    border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
    width:30px; height:30px; border-radius:7px; display:inline-flex; align-items:center;
    justify-content:center; cursor:pointer; transition:transform .08s ease, filter .08s ease;
  }
  .icon-btn:hover{color:var(--ink); border-color:var(--ink-muted);}
  .icon-btn:active{transform:scale(0.90);}
  .icon-btn.danger:hover{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .icon-btn.aplicar:hover{color:var(--accent); border-color:var(--accent); background:var(--accent-soft);}
  .icon-btn[disabled]{opacity:.3; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }
  .icon-btn svg{width:15px; height:15px;}

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}

.foot-note{font-size:12px; color:var(--ink-muted); margin-top:12px;}

/* ---------- detail (voucher) view ---------- */
  .view{display:none;}
  .view.active{display:block;}

.voucher{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    box-shadow:var(--shadow); padding:32px 36px; max-width:820px; margin:0 auto;
  }
  .voucher-head{
    display:flex; justify-content:space-between; align-items:flex-start;
    border-bottom:2px solid var(--ink); padding-bottom:16px; margin-bottom:20px; gap:20px;
  }
  .voucher-head h2{font-size:19px;}
  .voucher-head .empresa-line{font-size:12.5px; color:var(--ink-muted); margin-top:4px;}
  .voucher-num{text-align:right;}
  .voucher-num .n{font-size:24px; font-weight:700;}
  .voucher-num .mono{color:var(--ink-muted); font-size:12.5px;}

.meta-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:16px 20px; margin-bottom:22px;
  }
  .meta-grid .field-ro label{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted); display:block; margin-bottom:3px;}
  .meta-grid .field-ro .val{font-size:14px;}
  .glosa-block{
    background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
    padding:12px 14px; font-size:13.5px; margin-bottom:22px;
  }
  .glosa-block label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted); margin-bottom:4px;}

.lineas-scroll{overflow-x:auto; margin-bottom:6px;}
  table.lineas{width:100%; min-width:520px; border-collapse:collapse;}
  table.lineas th{
    font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);
    text-align:right; padding:8px 10px; border-bottom:1px solid var(--line-strong);
  }
  table.lineas th:first-child{text-align:left;}
  table.lineas td{padding:9px 10px; border-bottom:1px solid var(--line); text-align:right;}
  table.lineas td:first-child{text-align:left;}
  table.lineas .cuenta-cod{color:var(--ink-muted); margin-right:6px;}
  table.lineas tfoot td{border-bottom:none; border-top:2px solid var(--ink); font-weight:700; padding-top:11px;}
  .col-usd{color:var(--ink-muted);}

.balance-check{
    display:flex; align-items:center; gap:8px; margin:14px 0 24px;
    font-size:12.5px; color:var(--accent); font-weight:600;
  }

.voucher-actions{display:flex; gap:10px; padding-top:18px; border-top:1px solid var(--line); justify-content:space-between;}
  .voucher-actions .right{display:flex; gap:10px;}

.anulado-banner{
    background:var(--red-bg); border:1px solid var(--red-line); color:var(--red-ink);
    border-radius:8px; padding:12px 14px; font-size:13px; margin-bottom:20px;
  }
  .anulado-banner b{display:block; margin-bottom:2px;}

.lineage-note{
    display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-muted);
    margin-top:6px;
  }
  .lineage-note button{
    background:none; border:none; color:var(--accent); font-weight:600; cursor:pointer; padding:0;
    font-size:12.5px; text-decoration:underline;
  }
  .context-banner{
    background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent);
    border-radius:8px; padding:11px 14px; font-size:13px; margin-bottom:20px;
  }
  .context-banner b{display:block; margin-bottom:2px; color:var(--ink);}

/* ---------- new entry form ---------- */
  .form-card{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    box-shadow:var(--shadow); padding:28px 32px; max-width:900px; margin:0 auto;
  }
  .form-card h2{font-size:18px; margin-bottom:4px;}
  .form-sub{color:var(--ink-muted); font-size:13px; margin-bottom:22px;}
  .form-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px 16px; margin-bottom:20px;}
  .form-grid .full{grid-column:1 / -1;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); display:block; margin-bottom:5px;}
  .form-field input, .form-field select{
    width:100%; background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px;
  }

.linea-hint{
    font-size:12.5px; color:var(--ink-muted); margin-bottom:14px; padding:10px 14px;
    background:var(--surface-2); border:1px solid var(--line); border-radius:8px; line-height:1.5;
  }
  .linea-hint b{color:var(--ink);}

.lineas-edit-scroll{overflow-x:auto; margin-bottom:10px; padding-bottom:2px;}
  table.lineas-edit{width:100%; min-width:900px; border-collapse:collapse;}
  table.lineas-edit th{
    font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);
    text-align:left; padding:6px 8px; border-bottom:1px solid var(--line-strong);
  }
  table.lineas-edit td{padding:5px 6px; border-bottom:1px solid var(--line); vertical-align:middle;}
  table.lineas-edit input{
    width:100%; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:6px;
    padding:6px 7px; font-size:13px; text-align:right; color:var(--ink);
  }
  table.lineas-edit input.cuenta-input{text-align:left; font-family:inherit; position:relative; z-index:1;}

.cuenta-picker{position:relative;}
  /* position:fixed (no absolute) a propósito: la fila de cuenta vive dentro de un
     contenedor con overflow-x:auto (lineas-edit-scroll), que recortaría un dropdown
     absoluto. Con fixed, el JS calcula su posición real en pantalla y no lo recorta
     nada. */
  .cuenta-sugerencias{
    display:none; position:fixed; background:var(--surface); border:1px solid var(--line-strong);
    border-radius:9px; box-shadow:var(--shadow); max-height:320px; overflow-y:auto; z-index:250;
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  .cuenta-sugerencias.abierta{display:block;}
  .sug-item{
    display:flex; flex-direction:column; gap:1px; padding:8px 12px; cursor:pointer;
    border-bottom:1px solid var(--line);
  }
  .sug-item:last-child{border-bottom:none;}
  .sug-item:hover, .sug-item.activa{background:var(--accent-soft);}
  .sug-nombre{font-size:13.5px; color:var(--ink);}
  .sug-nombre mark{background:transparent; color:var(--accent); font-weight:700; padding:0;}
  .sug-meta{font-size:11px; color:var(--ink-muted);}
  .sug-meta .sug-codigo{color:var(--ink-muted);}
  .sug-vacio{padding:14px 12px; font-size:13px; color:var(--ink-muted); text-align:center;}
  .sug-mas{padding:7px 12px; font-size:11.5px; color:var(--ink-muted); text-align:center; border-top:1px solid var(--line);}
  table.lineas-edit input:focus{background:var(--surface); border-color:var(--accent);}
  table.lineas-edit input.tc-requerido{border-color:var(--red-line); background:var(--red-bg);}
  table.lineas-edit input.tc-requerido::placeholder{color:var(--red-ink);}
  table.lineas-edit td.grow{width:32%;}
  table.lineas-edit th.col-moneda{width:64px;}
  table.lineas-edit select.in-moneda{
    width:100%; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:6px;
    padding:6px 4px; font-size:12.5px; color:var(--ink); font-weight:600;
  }
  table.lineas-edit td.moneda-usd-cell{transition:opacity .12s;}
  table.lineas-edit tr[data-moneda="CRC"] .moneda-usd-cell input{
    background:transparent; border-color:transparent; color:var(--ink-muted);
  }
  table.lineas-edit tr[data-moneda="CRC"] .moneda-usd-cell{opacity:.45;}
  table.lineas-edit tr[data-moneda="USD"] .moneda-usd-cell input{border-color:var(--accent);}
  .tc-display{
    display:block; text-align:right; font-size:12.5px; color:var(--ink-muted); padding:6px 4px;
  }
  .tc-display.tc-listo{color:var(--accent); font-weight:600;}
  .btn-obs{
    border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
    width:28px; height:28px; border-radius:6px; cursor:pointer; font-size:13px;
  }
  .btn-obs.tiene-obs{color:var(--accent); border-color:var(--accent); background:var(--accent-soft);}
  table.lineas-edit tfoot td{border-bottom:none; border-top:2px solid var(--ink); font-weight:700; padding-top:10px; text-align:right;}

.linea-total-row td{text-align:right;}
  .add-linea{margin:8px 0 20px;}

.balance-banner{
    display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:8px;
    font-size:13px; font-weight:600; margin-bottom:20px;
  }
  .balance-ok{background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent);}
  .balance-bad{background:var(--red-bg); color:var(--red-ink); border:1px solid var(--red-line);}

.form-actions{display:flex; justify-content:flex-end; gap:10px; border-top:1px solid var(--line); padding-top:18px;}

/* ---------- modal propio (los diálogos nativos del navegador quedan bloqueados
     dentro del iframe del Artifact -- confirm()/prompt()/alert() no sirven aquí) ---------- */
  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:420px; width:100%;
  }
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-input{
    width:100%; background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:9px 11px; color:var(--ink); font-size:13.5px; margin-bottom:16px;
  }
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}

/* ---------- print ----------
     Mismo criterio que en la Balanza: el color en pantalla ayuda a leer rápido, pero
     en papel no aporta información que el texto y los bordes no den ya -- así que se
     quita todo relleno de color y se apoya en negrita/subrayado/bordes para que el
     estado del asiento se siga entendiendo sin gastar tinta de color. */
  @media print{
    @page{ margin: 1.5cm; }
    .topbar, .filters, .voucher-actions, .no-print{display:none !important;}
    body{background:#fff; color:#000;}
    .app{max-width:none; padding:0;}
    .voucher{box-shadow:none; border:none; padding:0;}

.pill{ background:none !important; border:1px solid #000 !important; color:#000 !important; }
    .pill::before{ display:none; }
    .pill-anulado{ text-decoration:line-through; }
    .tag-modulo{ border-color:#000; color:#000; }
    .anulado-banner{ background:none !important; border:1px solid #000 !important; color:#000 !important; }
    .col-usd{ color:#000 !important; }
    table.lineas th, table.lineas tfoot td{ border-color:#000 !important; }
  }

@media (max-width:760px){
    .meta-grid, .form-grid{grid-template-columns:repeat(2,1fr);}
  }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Asientos Contables</span>
    </div>
    <div class="crumbs" id="crumbs"><b>Trabajo diario</b> / Asientos contables</div>
  </div>

<div class="view active" id="view-lista">

<div class="filters">
      <div class="field numero">
        <label for="f-numero">N.º asiento</label>
        <input type="text" id="f-numero" class="mono" placeholder="ej. 128" inputmode="numeric">
      </div>
      <div class="field">
        <label>Fecha</label>
        <div class="range">
          <input type="date" id="f-fecha-desde" class="mono">
          <span class="dash">–</span>
          <input type="date" id="f-fecha-hasta" class="mono">
        </div>
      </div>
      <div class="field">
        <label>Monto (₡)</label>
        <div class="range">
          <input type="text" id="f-monto-desde" class="num mono" placeholder="desde">
          <span class="dash">–</span>
          <input type="text" id="f-monto-hasta" class="num mono" placeholder="hasta">
        </div>
      </div>
      <div class="field">
        <label for="f-tipo">Tipo</label>
        <select id="f-tipo">
          <option value="">Todos</option>
          <option value="Manual">Manual</option>
          <option value="Bancos">Bancos</option>
          <option value="Ventas">Ventas</option>
          <option value="Cuentas por Pagar">Cuentas por Pagar</option>
        </select>
      </div>
      <div class="field">
        <label for="f-estado">Estado</label>
        <select id="f-estado">
          <option value="">Todos</option>
          <option value="Pendiente">Pendiente</option>
          <option value="Aplicado">Aplicado</option>
          <option value="Anulado">Anulado</option>
        </select>
      </div>
      <div class="spacer"></div>
      <button class="btn btn-ghost" id="btn-limpiar">Limpiar filtros</button>
      <button class="btn btn-primary" id="btn-nuevo">+ Nuevo asiento</button>
    </div>

<div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>N.º</th><th>Fecha</th><th>Tipo</th><th>Glosa</th>
            <th class="num">Monto (₡)</th><th>Estado</th><th></th>
          </tr>
        </thead>
        <tbody id="tbody-asientos"></tbody>
      </table>
      <div class="empty-state" id="empty-state" style="display:none;">
        <b>No hay asientos con esos filtros</b>
        Ajusta el rango de fechas, el monto o el tipo, o límpialos para ver todo el listado.
      </div>
    </div>
    <div class="foot-note">Mostrando los últimos <span id="count-visible"></span> de <span id="count-total"></span> asientos · conectado al backend real (requiere que <code>uvicorn</code> esté corriendo en <span class="mono">localhost:8000</span>).</div>
  </div>

<div class="view" id="view-detalle">
    <div class="voucher" id="voucher-content"></div>
  </div>

<div class="view" id="view-nuevo">
    <div class="form-card">
      <h2 id="form-title">Nuevo asiento</h2>
      <div class="form-sub" id="form-sub">Se crea en estado <b>Pendiente</b>. No afecta la balanza hasta que se aplique.</div>
      <div id="form-context-banner"></div>

<div class="form-grid">
        <div class="form-field"><label>Fecha</label><input type="date" id="n-fecha"></div>
        <div class="form-field">
          <label>Tipo / origen</label>
          <input type="text" id="n-tipo" value="Manual" readonly
            style="color:var(--ink-muted); background:var(--surface-2); cursor:not-allowed;"
            title="Un asiento creado desde esta pantalla siempre queda con origen Manual. Los orígenes automáticos (Ventas, Bancos, Cuentas por Pagar) los genera cada módulo por su cuenta -- el contador no los simula desde aquí (autoridad de corrección por módulo).">
        </div>
        <div class="form-field"><label>Documento</label><input type="text" id="n-doc" placeholder="ej. Factura 00234"></div>
        <div class="form-field"><label>Tercero</label><input type="text" id="n-tercero" placeholder="Cliente / proveedor"></div>
        <div class="form-field full"><label>Glosa</label><input type="text" id="n-glosa" placeholder="Descripción del asiento"></div>
      </div>

<div class="linea-hint">Cada línea nace en <b>colones</b>. Cambie la moneda a US$ solo si esa línea específica tiene movimiento en dólares — ahí se piden los montos en ambas monedas y el tipo de cambio se calcula solo, dividiendo lo que usted ya escribió (nunca hay que "ajustarlo" para que cuadre).</div>

<div class="lineas-edit-scroll">
        <table class="lineas-edit">
          <thead>
            <tr>
              <th class="grow">Cuenta</th>
              <th class="col-moneda">Moneda</th>
              <th>Débito US$</th><th>Crédito US$</th><th>T.C.</th>
              <th>Débito ₡</th><th>Crédito ₡</th><th></th><th></th>
            </tr>
          </thead>
          <tbody id="tbody-lineas-nuevo"></tbody>
          <tfoot>
            <tr>
              <td colspan="2">Totales</td>
              <td id="tot-du" class="mono">0.00</td>
              <td id="tot-cu" class="mono">0.00</td>
              <td></td>
              <td id="tot-dl" class="mono">0.00</td>
              <td id="tot-cl" class="mono">0.00</td>
              <td></td><td></td>
            </tr>
          </tfoot>
        </table>
      </div>
      <button class="btn btn-sm add-linea" id="btn-add-linea">+ Agregar línea</button>

<div id="balance-banner" class="balance-banner balance-bad">El asiento no cuadra todavía — complete al menos dos líneas con el mismo monto en Debe y Haber.</div>

<div class="form-actions">
        <button class="btn btn-ghost" id="btn-cancelar-nuevo">Cancelar</button>
        <button class="btn btn-primary" id="btn-guardar-nuevo" disabled>Guardar como Pendiente</button>
      </div>
      <input type="hidden" id="n-editando-numero">
      <input type="hidden" id="n-copiado-de">
    </div>
  </div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <input type="text" class="modal-input" id="modal-input" style="display:none;">
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

// Modal propio -- confirm()/prompt()/alert() nativos del navegador quedan
  // bloqueados dentro del iframe del Artifact, así que cualquier flujo que dependiera
  // de ellos no hacía nada visible. Esto los reemplaza con promesas.
  const modalOverlay = document.getElementById('modal-overlay');
  const modalTitulo = document.getElementById('modal-titulo');
  const modalMensaje = document.getElementById('modal-mensaje');
  const modalInput = document.getElementById('modal-input');
  const modalCancelar = document.getElementById('modal-cancelar');
  const modalAceptar = document.getElementById('modal-aceptar');

function cerrar(valor){
        modalOverlay.classList.remove('abierto');
        modalAceptar.onclick = null;
        modalCancelar.onclick = null;
        document.removeEventListener('keydown', onKey);
        resolve(valor);
      }
      function onKey(e){
        if (e.key === 'Escape') cerrar(tipo === 'prompt' ? null : false);
        if (e.key === 'Enter' && tipo === 'prompt') cerrar(modalInput.value);
      }
      modalAceptar.onclick = ()=> cerrar(tipo === 'prompt' ? modalInput.value : true);
      modalCancelar.onclick = ()=> cerrar(tipo === 'prompt' ? null : false);
      document.addEventListener('keydown', onKey);

modalOverlay.classList.add('abierto');
      if (tipo === 'prompt') setTimeout(()=> modalInput.focus(), 30);
      else setTimeout(()=> modalAceptar.focus(), 30);
    });
  }
  function modalAlert(mensaje, titulo='Aviso'){
    return mostrarModal({titulo, mensaje, tipo:'alert', botonAceptar:'Entendido'});
  }
  function modalConfirm(mensaje, titulo='Confirmar', colorAceptar='primary', botonAceptar='Confirmar'){
    return mostrarModal({titulo, mensaje, tipo:'confirm', botonAceptar, colorAceptar});
  }
  function modalPrompt(mensaje, valorInicial, titulo){
    return mostrarModal({titulo: titulo || 'Ingrese un dato', mensaje, tipo:'prompt', valorInicial, botonAceptar:'Guardar'});
  }

// ---------------- Conexión con el backend real (FastAPI) ----------------
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador'; // no hay sesión/login todavía -- placeholder de trazabilidad
  let CUENTAS_TODAS = [], CUENTAS = [], CUENTAS_POR_CODIGO = {}, ASIENTOS = [];

// Traduce la forma de la API a la forma que ya espera todo el renderizado de esta
  // pantalla (construido y probado antes de que existiera el backend) -- así el
  // formulario, el comprobante y los modales no se tocan, solo de dónde vienen los datos.
  function apiToAsiento(row){
    const a = {
      id: row.id, numero: row.numero, fecha: row.fecha, tipo: row.origen_modulo, estado: row.estado,
      tercero: row.nombre_tercero || '',
      doc: [row.tipo_documento_origen, row.numero_documento_origen].filter(Boolean).join(' '),
      glosa: row.glosa,
      creadoPor: row.creado_por,
      aplicadoPor: row.aplicado_por, aplicadoEn: formatearFechaHora(row.aplicado_en),
      anuladoPor: row.anulado_por, anuladoEn: formatearFechaHora(row.anulado_en),
      motivo: row.motivo_anulacion,
      copiadoDe: row.copiado_de_asiento_id,
      lineas: (row.lineas || []).map(l=>({
        cuenta: l.cuenta_codigo, nombre: l.cuenta_nombre, moneda: l.moneda,
        dl: l.debito_local, cl: l.credito_local, du: l.debito_extranjero, cu: l.credito_extranjero,
        tc: l.tipo_cambio, obs: l.observaciones || '',
      })),
    };
    a.montoLocal = a.lineas.reduce((s,l)=> s + (l.dl||0), 0);
    return a;
  }

async function cargarAsientos(){
    const filas = await llamarApi('/asientos');
    ASIENTOS = filas.map(f=>({
      id: f.id, numero: f.numero, fecha: f.fecha, tipo: f.origen_modulo, estado: f.estado,
      tercero: f.nombre_tercero || '', doc: '', glosa: f.glosa, montoLocal: f.monto, lineas: [],
    }));
  }

async function cargarDetalle(id){
    const row = await llamarApi(`/asientos/${id}`);
    return apiToAsiento(row);
  }

async function cargarCuentas(){
    const filas = await llamarApi('/cuentas');
    CUENTAS_TODAS = filas.map(c=>({codigo:c.codigo, nombre:c.nombre, acepta:c.acepta_movimientos}));
    CUENTAS = CUENTAS_TODAS.filter(c=>c.acepta);
    CUENTAS_POR_CODIGO = Object.fromEntries(CUENTAS_TODAS.map(c=>[c.codigo,c]));
  }

let vistaActual = 'lista';
  let asientoActivo = null;
  let asientoEnEdicionId = null;

function setCrumb(txt){ document.getElementById('crumbs').innerHTML = txt; }
  function mostrarVista(id){
    document.querySelectorAll('.view').forEach(v=>v.classList.remove('active'));
    document.getElementById(id).classList.add('active');
  }

function pill(estado){
    const cls = estado==='Aplicado' ? 'pill-aplicado' : estado==='Pendiente' ? 'pill-pendiente' : 'pill-anulado';
    return `<span class="pill ${cls}">${estado}</span>`;
  }

let ultimoBtn;
    if (a.estado === 'Pendiente'){
      ultimoBtn = `<button class="icon-btn danger" title="Eliminar asiento pendiente" data-accion="eliminar" data-numero="${a.numero}">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6h16Z"/></svg></button>`;
      return `<div class="row-actions">${verBtn}${printBtn}${modificarBtn}${aplicarBtn}${ultimoBtn}</div>`;
    } else if (a.estado === 'Aplicado'){
      ultimoBtn = `<button class="icon-btn danger" title="Anular (requiere motivo)" data-accion="anular" data-numero="${a.numero}">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="m8 8 8 8"/></svg></button>`;
      return `<div class="row-actions">${verBtn}${printBtn}${copiarBtn}${ultimoBtn}</div>`;
    } else {
      return `<div class="row-actions">${verBtn}${printBtn}${copiarBtn}</div>`;
    }
  }

function renderTabla(){
    const numero = document.getElementById('f-numero').value.trim();
    const fDesde = document.getElementById('f-fecha-desde').value;
    const fHasta = document.getElementById('f-fecha-hasta').value;
    const mDesde = parseFloat(document.getElementById('f-monto-desde').value);
    const mHasta = parseFloat(document.getElementById('f-monto-hasta').value);
    const tipo = document.getElementById('f-tipo').value;
    const estado = document.getElementById('f-estado').value;

const filtrados = ASIENTOS.filter(a=>{
      if (numero && String(a.numero).indexOf(numero) === -1) return false;
      if (fDesde && a.fecha < fDesde) return false;
      if (fHasta && a.fecha > fHasta) return false;
      if (!isNaN(mDesde) && a.montoLocal < mDesde) return false;
      if (!isNaN(mHasta) && a.montoLocal > mHasta) return false;
      if (tipo && a.tipo !== tipo) return false;
      if (estado && a.estado !== estado) return false;
      return true;
    }).sort((a,b)=> b.numero - a.numero);

const tbody = document.getElementById('tbody-asientos');
    tbody.innerHTML = filtrados.map(a=>`
      <tr>
        <td class="numero mono">${a.numero}</td>
        <td class="mono">${fechaLarga(a.fecha)}</td>
        <td><span class="tag-modulo">${a.tipo}</span></td>
        <td class="glosa-cell">
          <span class="glosa">${a.glosa}</span>
          ${a.tercero ? `<span class="tercero">${a.tercero}</span>` : ''}
        </td>
        <td class="num mono">${fmt(a.montoLocal)}</td>
        <td>${pill(a.estado)}</td>
        <td>${rowActions(a)}</td>
      </tr>
    `).join('');

document.getElementById('empty-state').style.display = filtrados.length ? 'none' : 'block';
    document.getElementById('count-visible').textContent = filtrados.length;
    document.getElementById('count-total').textContent = ASIENTOS.length;

tbody.querySelectorAll('[data-accion]').forEach(btn=>{
      btn.addEventListener('click', async ()=>{
        const numero = parseInt(btn.dataset.numero, 10);
        const accion = btn.dataset.accion;
        const resumen = ASIENTOS.find(x=>x.numero===numero);
        try{
          if (accion === 'ver'){ abrirDetalle(await cargarDetalle(resumen.id)); }
          else if (accion === 'imprimir'){ abrirDetalle(await cargarDetalle(resumen.id), true); }
          else if (accion === 'eliminar'){
            const ok = await modalConfirm(
              `¿Eliminar el asiento Pendiente #${numero}? Solo es posible porque todavía no se ha aplicado.`,
              'Eliminar asiento', 'danger', 'Eliminar');
            if (ok){
              await llamarApi(`/asientos/${resumen.id}`, {method:'DELETE'});
              await cargarAsientos();
              renderTabla();
            }
          } else if (accion === 'anular'){
            const motivo = await modalPrompt(
              `El asiento #${numero} ya está Aplicado — no se puede eliminar, solo anular.`,
              '', `Anular asiento #${numero}`);
            if (motivo && motivo.trim()){
              await llamarApi(`/asientos/${resumen.id}/anular`, {
                method:'POST', headers:{'Content-Type':'application/json'},
                body: JSON.stringify({anulado_por: USUARIO_ACTUAL, motivo_anulacion: motivo.trim()}),
              });
              await cargarAsientos();
              renderTabla();
            }
          } else if (accion === 'copiar'){
            await copiarYEditar(resumen);
          } else if (accion === 'modificar'){
            abrirFormulario('editar', await cargarDetalle(resumen.id));
          } else if (accion === 'aplicar'){
            if (await aplicarAsiento(resumen)) { await cargarAsientos(); renderTabla(); }
          }
        }catch(e){
          await modalAlert(e.message, 'No se pudo completar la acción');
        }
      });
    });
  }

// Misma regla de cuadre que ya probamos contra la base de datos real: colones
  // siempre debe cuadrar; dólares solo si hay movimiento en ambos lados (Principio 1).
  // El cuadre en sí ya no se calcula aquí -- lo valida el trigger de la base al
  // aplicar, y su mensaje de error (igual de claro) es el que se le muestra al
  // usuario si no cuadra. Esta función ahora solo confirma y llama al backend real.
  function calcularBalance(lineas){
    let dl=0, cl=0, du=0, cu=0;
    lineas.forEach(l=>{ dl += l.dl||0; cl += l.cl||0; du += l.du||0; cu += l.cu||0; });
    const cuadraLocal = Math.abs(dl-cl) < 0.005;
    const cuadraUsd = (du === 0 || cu === 0) ? true : Math.abs(du-cu) < 0.005;
    return {dl, cl, du, cu, cuadraLocal, cuadraUsd, ok: cuadraLocal && cuadraUsd};
  }

async function aplicarAsiento(a){
    if (a.estado !== 'Pendiente'){
      await modalAlert(`El asiento #${a.numero} no está Pendiente -- no se puede aplicar.`);
      return false;
    }
    const ok = await modalConfirm(
      'Una vez aplicado queda firme: ya no se podrá editar ni eliminar -- solo anular con motivo.',
      `¿Aplicar el asiento #${a.numero}?`, 'primary', 'Aplicar');
    if (!ok) return false;
    await llamarApi(`/asientos/${a.id}/aplicar`, {
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({aplicado_por: USUARIO_ACTUAL}),
    });
    return true;
  }

function fechaLarga(iso){
    const [y,m,d] = iso.split('-');
    return `${d}/${m}/${y}`;
  }

function abrirDetalle(a, imprimirDespues){
    asientoActivo = a;
    const totalDL = a.lineas.reduce((s,l)=>s+(l.dl||0),0);
    const totalCL = a.lineas.reduce((s,l)=>s+(l.cl||0),0);
    const totalDU = a.lineas.reduce((s,l)=>s+(l.du||0),0);
    const totalCU = a.lineas.reduce((s,l)=>s+(l.cu||0),0);
    const tieneUSD = totalDU>0 || totalCU>0;

let banner = '';
    if (a.estado === 'Anulado'){
      banner = `<div class="anulado-banner"><b>Este asiento está Anulado.</b>
        Por ${a.anuladoPor} el ${a.anuladoEn}. Motivo: ${a.motivo}</div>`;
    }

const filasLineas = a.lineas.map(l=>`
      <tr>
        <td><span class="cuenta-cod mono">${l.cuenta}</span>${l.nombre}
          ${l.obs ? `<span class="tercero">${l.obs}</span>` : ''}</td>
        ${tieneUSD ? `<td class="mono col-usd">${l.du?fmt(l.du):'—'}</td><td class="mono col-usd">${l.cu?fmt(l.cu):'—'}</td><td class="mono col-usd">${l.tc?l.tc.toFixed(2):'—'}</td>` : ''}
        <td class="mono">${l.dl?fmt(l.dl):'—'}</td>
        <td class="mono">${l.cl?fmt(l.cl):'—'}</td>
      </tr>
    `).join('');

document.getElementById('voucher-content').innerHTML = `
      ${banner}
      <div class="voucher-head">
        <div>
          <h2>Comprobante de Diario</h2>
          <div class="empresa-line">Sistemas Rodríguez y Asociados · ${a.tipo}${a.doc ? ' · '+a.doc : ''}</div>
        </div>
        <div class="voucher-num">
          <div class="n mono">#${a.numero}</div>
          <div class="mono">${fechaLarga(a.fecha)}</div>
        </div>
      </div>

<div class="meta-grid">
        <div class="field-ro"><label>Estado</label><div class="val">${pill(a.estado)}</div></div>
        <div class="field-ro"><label>Tercero</label><div class="val">${a.tercero || '—'}</div></div>
        <div class="field-ro"><label>Creado por</label><div class="val">${a.creadoPor || '—'}</div></div>
        <div class="field-ro"><label>${a.estado==='Aplicado'?'Aplicado':'Estado desde'}</label><div class="val">${a.aplicadoEn || fechaLarga(a.fecha)}</div></div>
      </div>

<div class="glosa-block">
        <label>Glosa</label>${a.glosa}
        ${a.copiadoDe ? `<div class="lineage-note">↳ Copia corregida del asiento
          <button data-ver-origen="${a.copiadoDe}">#${a.copiadoDe}</button></div>` : ''}
      </div>

<div class="lineas-scroll">
        <table class="lineas">
          <thead><tr>
            <th style="text-align:left;">Cuenta</th>
            ${tieneUSD ? '<th>Débito US$</th><th>Crédito US$</th><th>T.C.</th>' : ''}
            <th>Débito ₡</th><th>Crédito ₡</th>
          </tr></thead>
          <tbody>${filasLineas}</tbody>
          <tfoot><tr>
            <td>Totales</td>
            ${tieneUSD ? `<td class="mono">${fmt(totalDU)}</td><td class="mono">${fmt(totalCU)}</td><td></td>` : ''}
            <td class="mono">${fmt(totalDL)}</td><td class="mono">${fmt(totalCL)}</td>
          </tr></tfoot>
        </table>
      </div>

<div class="balance-check">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6 9 17l-5-5"/></svg>
        Cuadra: Debe = Haber en colones${tieneUSD ? ' y en dólares' : ''}.
      </div>

<div class="voucher-actions no-print">
        <button class="btn btn-ghost" id="btn-volver-detalle">← Volver al listado</button>
        <div class="right">
          <button class="btn" id="btn-imprimir-detalle">Imprimir</button>
          ${a.estado==='Pendiente' ? `<button class="btn" id="btn-modificar-detalle">Modificar</button>` : ''}
          ${a.estado!=='Pendiente' ? `<button class="btn" id="btn-copiar-detalle">Copiar</button>` : ''}
          ${a.estado==='Pendiente' ? `<button class="btn btn-primary" id="btn-aplicar-detalle">Aplicar</button>` : ''}
          ${a.estado==='Pendiente' ? `<button class="btn btn-danger" id="btn-eliminar-detalle">Eliminar</button>` : ''}
          ${a.estado==='Aplicado' ? `<button class="btn btn-danger" id="btn-anular-detalle">Anular</button>` : ''}
        </div>
      </div>
    `;

setCrumb('Trabajo diario / Asientos contables / <b>Comprobante #' + a.numero + '</b>');
    mostrarVista('view-detalle');

if (imprimirDespues) setTimeout(()=>window.print(), 150);
  }

// ---------------- Nuevo asiento ----------------
  let contadorLineas = 0;
  function resaltar(texto, query){
    const idx = texto.toUpperCase().indexOf(query.toUpperCase());
    if (idx === -1) return texto;
    return texto.slice(0,idx) + '<mark>' + texto.slice(idx, idx+query.length) + '</mark>' + texto.slice(idx+query.length);
  }

// Buscador propio de cuentas: no usa <datalist> nativo (chiquito, sin resaltado,
  // sin contexto) -- el contador necesita ver de un vistazo cuál de varias cuentas
  // con el mismo nombre (una por sucursal) es la correcta, sin tener que descifrar
  // el código. Coincide en cualquier parte del nombre, no solo al inicio.
  function wireCuentaPicker(tr){
    const input = tr.querySelector('.cuenta-input');
    const oculto = tr.querySelector('.cuenta-codigo-oculto');
    const caja = tr.querySelector('.cuenta-sugerencias');

function cerrar(){ caja.classList.remove('abierta'); caja.innerHTML = ''; }

// Si la fila se desplaza (la tabla de líneas tiene scroll horizontal propio) o la
    // página entera se mueve, el dropdown fixed no la sigue -- más simple y seguro
    // cerrarlo que dejarlo flotando en un lugar que ya no corresponde.
    window.addEventListener('scroll', ()=>{ if (caja.classList.contains('abierta')) cerrar(); }, true);

function buscar(){
      const q = input.value.trim();
      oculto.value = '';
      if (q.length < 2){ cerrar(); return; }
      const ql = q.toUpperCase();
      const todos = CUENTAS.filter(c => c.nombre.toUpperCase().includes(ql) || c.codigo.startsWith(q))
        .sort((a,b)=> a.nombre.localeCompare(b.nombre, 'es'));

posicionar();

if (todos.length === 0){
        caja.innerHTML = `<div class="sug-vacio">Ninguna cuenta de detalle contiene "${q}"</div>`;
        caja.classList.add('abierta');
        return;
      }

caja.querySelectorAll('.sug-item').forEach(item=>{
        item.addEventListener('mousedown', e=>{
          e.preventDefault();
          input.value = `${item.dataset.codigo} — ${item.dataset.nombre}`;
          oculto.value = item.dataset.codigo;
          cerrar();
        });
      });
    }

input.addEventListener('input', buscar);
    input.addEventListener('focus', ()=>{ if (input.value.trim().length>=2 && !oculto.value) buscar(); });
    // Si el usuario escribe pero nunca hace clic en una sugerencia real, el campo queda con texto
    // "huérfano" que se ve lleno aunque el campo oculto sigue vacío -- confunde al guardar (bug
    // real reportado en Conceptos de Nota a Cliente). Al salir sin elegir de verdad, se limpia.
    input.addEventListener('blur', ()=> setTimeout(()=>{ cerrar(); if (!oculto.value) input.value = ''; }, 150));
    input.addEventListener('keydown', e=>{ if (e.key === 'Escape') cerrar(); });
  }

// Los campos editables SIEMPRE guardan números en formato simple (1000.00, punto
  // decimal, sin separador de miles) -- fmt() con separadores es-CR queda reservado
  // para pantallas de solo lectura. num() igual queda tolerante por si llega un valor
  // con coma (formato es-CR): ahí sí interpreta punto=miles, coma=decimal.
  function num(v){
    let s = String(v).trim();
    if (!s) return 0;
    if (s.includes(',')) s = s.replace(/\./g, '').replace(',', '.');
    const n = parseFloat(s);
    return isNaN(n) ? 0 : n;
  }

function recalcularTotales(){
    let du=0,cu=0,dl=0,cl=0;
    let lineaIncompleta = false;
    document.querySelectorAll('#tbody-lineas-nuevo tr').forEach(tr=>{
      const moneda = tr.dataset.moneda || 'CRC';
      const lDu = num(tr.querySelector('.in-du').value);
      const lCu = num(tr.querySelector('.in-cu').value);
      const lDl = num(tr.querySelector('.in-dl').value);
      const lCl = num(tr.querySelector('.in-cl').value);
      du += lDu; cu += lCu; dl += lDl; cl += lCl;

const cuadraLocal = Math.abs(dl-cl) < 0.005;
    const cuadraUsd = (du === 0 || cu === 0) ? true : Math.abs(du-cu) < 0.005;
    const hayMovimiento = (dl+cl) > 0;
    const banner = document.getElementById('balance-banner');
    const btnGuardar = document.getElementById('btn-guardar-nuevo');

if (lineaIncompleta){
      banner.className = 'balance-banner balance-bad';
      banner.textContent = 'Hay una línea en US$ con un solo lado completo — falta el monto en dólares o en colones para calcular el tipo de cambio de esa línea.';
      btnGuardar.disabled = true;
    } else if (hayMovimiento && cuadraLocal && cuadraUsd){
      banner.className = 'balance-banner balance-ok';
      const notaUsd = (du>0 && cu>0) ? ' y en dólares.' : ((du>0||cu>0) ? ' (compra/cambio de moneda: no se exige cuadre en dólares, solo en colones).' : '.');
      banner.textContent = '✓ El asiento cuadra en colones' + notaUsd;
      btnGuardar.disabled = false;
    } else {
      banner.className = 'balance-banner balance-bad';
      banner.textContent = hayMovimiento
        ? `El asiento no cuadra todavía — colones: Debe ${fmt(dl)} / Haber ${fmt(cl)}${(du>0&&cu>0)?`, dólares: Debe ${fmt(du)} / Haber ${fmt(cu)}`:''}.`
        : 'El asiento no cuadra todavía — complete al menos dos líneas con el mismo monto en Debe y Haber.';
      btnGuardar.disabled = true;
    }
  }

// modo: 'nuevo' | 'editar' | 'copia'.  asientoBase: asiento de origen (null si es 'nuevo').
  function abrirFormulario(modo, asientoBase){
    const tbody = document.getElementById('tbody-lineas-nuevo');
    tbody.innerHTML = '';

asientoEnEdicionId = modo === 'editar' ? asientoBase.id : null;
    document.getElementById('n-editando-numero').value = modo === 'editar' ? asientoBase.numero : '';
    document.getElementById('n-copiado-de').value = (asientoBase && asientoBase.copiadoDe) || '';

recalcularTotales();
    setCrumb(`Trabajo diario / Asientos contables / <b>${document.getElementById('form-title').textContent}</b>`);
    mostrarVista('view-nuevo');

// Principio de interfaz (fenix-principios-ux, Principio 3): el usuario ya sabe que
    // va a buscar una cuenta -- que no tenga que ir a buscar el mouse primero. Foco en
    // la cuenta de la primera línea, no en el primer campo del HTML (la fecha), porque
    // ese es el campo que de verdad usa primero.
    setTimeout(()=>{
      const primeraCuenta = document.querySelector('#tbody-lineas-nuevo .cuenta-input');
      if (primeraCuenta) primeraCuenta.focus();
    }, 30);
  }

async function copiarYEditar(asiento){
    // El patrón acordado (anular -> copiar -> corregir -> aplicar, ver Principio 7):
    // la copia se crea de una vez en la base como un Pendiente real y trazable --
    // no es un borrador que solo existe en el navegador hasta guardar.
    try{
      const nuevo = await llamarApi(`/asientos/${asiento.id}/copiar`, {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({creado_por: USUARIO_ACTUAL}),
      });
      await cargarAsientos();
      abrirFormulario('editar', apiToAsiento(nuevo));
    }catch(e){
      await modalAlert(e.message, 'No se pudo copiar');
    }
  }

document.getElementById('btn-add-linea').addEventListener('click', ()=>{
    document.getElementById('tbody-lineas-nuevo').appendChild(filaLineaNueva());
  });

if (filas.some(f => !f.cuenta_codigo)){
      await modalAlert('Todas las líneas necesitan una cuenta elegida de la lista de sugerencias -- no basta con escribir el nombre.');
      return;
    }

const payload = {
      fecha: document.getElementById('n-fecha').value || hoyISO(),
      glosa: document.getElementById('n-glosa').value || '(sin glosa)',
      creado_por: USUARIO_ACTUAL,
      nombre_tercero: document.getElementById('n-tercero').value || null,
      numero_documento_origen: document.getElementById('n-doc').value || null,
      lineas: filas,
    };

try{
      if (asientoEnEdicionId){
        await llamarApi(`/asientos/${asientoEnEdicionId}`, {
          method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(payload),
        });
      } else {
        await llamarApi('/asientos', {
          method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(payload),
        });
      }
      await cargarAsientos();
      setCrumb('<b>Trabajo diario</b> / Asientos contables');
      mostrarVista('view-lista');
      renderTabla();
    }catch(e){
      await modalAlert(e.message, 'No se pudo guardar');
    }
  });

document.getElementById('btn-limpiar').addEventListener('click', ()=>{
    ['f-numero','f-fecha-desde','f-fecha-hasta','f-monto-desde','f-monto-hasta','f-tipo','f-estado']
      .forEach(id=> document.getElementById(id).value = '');
    renderTabla();
  });
  ['f-numero','f-fecha-desde','f-fecha-hasta','f-monto-desde','f-monto-hasta','f-tipo','f-estado']
    .forEach(id=> document.getElementById(id).addEventListener('input', renderTabla));

(async ()=>{
    try{
      await cargarCuentas();
      await cargarAsientos();
    }catch(e){
      await modalAlert(e.message, 'No se pudo cargar la información inicial');
    }
    renderTabla();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Períodos Fiscales y Cierre</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

.app{max-width:1180px; margin:0 auto; padding:28px 24px 64px;}

.topbar{
    display:flex; align-items:baseline; justify-content:space-between;
    padding-bottom:18px; border-bottom:2px solid var(--ink); margin-bottom:22px;
    gap:16px; flex-wrap:wrap;
  }
  .brand{display:flex; align-items:baseline; gap:10px;}
  .brand h1{font-size:22px; letter-spacing:.2px;}
  .brand .sep{color:var(--line-strong);}
  .brand .empresa{font-size:14px; color:var(--ink-muted);}
  .crumbs{font-size:12.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.06em;}
  .crumbs b{color:var(--ink); font-weight:600;}

.btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-sm{padding:5px 10px; font-size:12.5px; border-radius:6px;}
  .btn[disabled]{opacity:.4; cursor:not-allowed;}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{display:inline-block; animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

/* ---------- tabla de años ---------- */
  .table-wrap{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow); margin-bottom:18px;
  }
  table{border-collapse:collapse; width:100%; min-width:920px;}
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--ink-muted); font-weight:600; padding:11px 14px;
    border-bottom:1px solid var(--line-strong); background:var(--surface-2);
  }
  th.num, td.num{text-align:right;}
  tbody td{padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--surface-2);}
  td.anio{font-size:17px; font-weight:700; font-family:Georgia,serif;}

.meses-resumen{font-size:12.5px; color:var(--ink-muted); display:flex; align-items:center; gap:6px;}
  .meses-resumen button{
    background:none; border:none; color:var(--accent); font-weight:600; cursor:pointer; padding:0;
    font-size:12.5px; text-decoration:underline;
  }
  .alerta-punto{
    display:inline-flex; align-items:center; gap:4px; color:var(--amber-ink); font-size:11.5px; font-weight:600;
  }
  .alerta-punto::before{content:"⚠"; font-size:11px;}

.asiento-link{
    background:none; border:none; color:var(--accent); font-weight:700; cursor:pointer; padding:0;
    font-family:inherit; font-size:13.5px;
  }
  .asiento-link:hover{text-decoration:underline;}
  .destino-cell{font-size:12.5px;}
  .destino-cell .cod{color:var(--ink-muted);}
  .sin-dato{color:var(--ink-muted); font-size:12.5px;}

.row-actions{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap;}

.foot-note{font-size:12px; color:var(--ink-muted); margin-top:4px; line-height:1.6;}

/* ---------- vistas ---------- */
  .view{display:none;}
  .view.active{display:block;}
  .volver-link{
    background:none; border:none; color:var(--accent); font-weight:600; cursor:pointer; padding:0;
    font-size:13px; margin-bottom:16px; display:inline-flex; align-items:center; gap:5px;
  }
  .volver-link:hover{text-decoration:underline;}

/* ---------- voucher (reutilizado del patrón de Asientos) ---------- */
  .voucher{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    box-shadow:var(--shadow); padding:28px 32px; max-width:820px; margin:0 auto 22px;
  }
  .voucher-head{
    display:flex; justify-content:space-between; align-items:flex-start;
    border-bottom:2px solid var(--ink); padding-bottom:14px; margin-bottom:18px; gap:20px;
  }
  .voucher-head h2{font-size:17px;}
  .voucher-head .sub{font-size:12.5px; color:var(--ink-muted); margin-top:4px;}
  .voucher-num{text-align:right;}
  .voucher-num .n{font-size:22px; font-weight:700;}
  .voucher-num .mono{color:var(--ink-muted); font-size:12.5px;}
  .meta-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px 18px; margin-bottom:18px;}
  .meta-grid .field-ro label{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted); display:block; margin-bottom:3px;}
  .meta-grid .field-ro .val{font-size:13.5px;}
  .glosa-block{
    background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
    padding:11px 13px; font-size:13px; margin-bottom:18px;
  }
  .glosa-block label{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted); margin-bottom:4px;}
  .lineas-scroll{overflow-x:auto; margin-bottom:6px;}
  table.lineas{width:100%; min-width:520px; border-collapse:collapse;}
  table.lineas th{
    font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);
    text-align:right; padding:8px 10px; border-bottom:1px solid var(--line-strong);
  }
  table.lineas th:first-child{text-align:left;}
  table.lineas td{padding:9px 10px; border-bottom:1px solid var(--line); text-align:right;}
  table.lineas td:first-child{text-align:left;}
  table.lineas .cuenta-cod{color:var(--ink-muted); margin-right:6px;}
  table.lineas .obs{display:block; font-size:11px; color:var(--ink-muted); margin-top:2px;}
  table.lineas tfoot td{border-bottom:none; border-top:2px solid var(--ink); font-weight:700; padding-top:11px;}
  .pill-cuentapuente{font-size:10.5px; color:var(--accent); border:1px solid var(--accent); border-radius:5px; padding:1px 6px; margin-left:6px;}

.resultado-banner{
    display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:8px;
    font-size:13.5px; font-weight:600; margin:16px 0;
  }
  .resultado-utilidad{background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent);}
  .resultado-perdida{background:var(--red-bg); color:var(--red-ink); border:1px solid var(--red-line);}

.resumen-historico{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    box-shadow:var(--shadow); padding:24px 28px; max-width:820px; margin:0 auto 22px;
  }
  .resumen-historico .meta-grid{margin-bottom:0;}
  .nota-detalle{
    font-size:12.5px; color:var(--ink-muted); margin-top:16px; padding-top:14px;
    border-top:1px solid var(--line);
  }

/* ---------- modales ---------- */
  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px; overflow-y:auto;
  }
  /* #modal-overlay (aviso/confirmacion) comparte la clase .modal-overlay con otro overlay de
     esta pantalla, mismo z-index -- si #modal-overlay aparece antes en el DOM, al abrirse los
     dos a la vez (ej. un error de guardado mientras un formulario sigue abierto) el otro overlay
     pintaba encima y el aviso quedaba oculto/inaccesible detras. Bug real reportado: "el
     Entendido no se ve". Un z-index propio, mas alto, garantiza que el aviso siempre gane sin
     importar el orden del DOM. */
  #modal-overlay{ z-index:400; }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:420px; width:100%; margin:auto;
  }
  .modal-box.ancho{max-width:600px;}
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-input{
    width:100%; background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:9px 11px; color:var(--ink); font-size:13.5px; margin-bottom:16px;
  }
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px; margin-top:4px;}

/* ---------- modal: meses del período ---------- */
  .meses-tabla-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:8px; margin-bottom:6px;}
  table.meses-tabla{width:100%; min-width:460px; border-collapse:collapse;}
  table.meses-tabla th{
    font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);
    text-align:left; padding:8px 10px; border-bottom:1px solid var(--line-strong); background:var(--surface-2);
  }
  table.meses-tabla td{padding:8px 10px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:top;}
  table.meses-tabla tr:last-child td{border-bottom:none;}
  .mes-detalle{font-size:11.5px; color:var(--ink-muted); margin-top:2px; line-height:1.5;}
  .mes-detalle b{color:var(--ink-muted);}

/* ---------- panel: aplicar cierre fiscal ---------- */
  .plan-lista{margin:0 0 18px; padding-left:0; list-style:none;}
  .plan-lista li{
    display:flex; gap:10px; padding:9px 0; font-size:13px; border-bottom:1px solid var(--line);
    align-items:flex-start;
  }
  .plan-lista li:last-child{border-bottom:none;}
  .plan-num{
    flex:0 0 auto; width:20px; height:20px; border-radius:50%; background:var(--surface-2);
    border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700; color:var(--ink-muted); margin-top:1px;
  }
  .plan-lista li.hecho .plan-num{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
  .plan-lista li.hecho{color:var(--ink-muted);}
  .plan-texto b{color:var(--ink);}

.form-field{margin-bottom:16px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); display:block; margin-bottom:6px;}
  .form-field input{
    width:100%; background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:9px 11px; color:var(--ink); font-size:13.5px;
  }
  .form-field input:focus{border-color:var(--accent);}
  .sugerencia-cuenta{
    margin-top:7px; font-size:12px; color:var(--ink-muted);
  }
  .sugerencia-cuenta button{
    background:none; border:none; color:var(--accent); font-weight:600; cursor:pointer; padding:0;
    font-size:12px; text-decoration:underline; font-family:inherit;
  }

.cuenta-elegida{
    display:none; align-items:center; justify-content:space-between; gap:10px;
    background:var(--accent-soft); border:1px solid var(--accent); border-radius:7px;
    padding:9px 12px; margin-top:8px; font-size:13px;
  }
  .cuenta-elegida.visible{display:flex;}
  .cuenta-elegida .cambiar{
    background:none; border:none; color:var(--accent); font-weight:600; cursor:pointer; padding:0;
    font-size:12px; text-decoration:underline; font-family:inherit;
  }

/* ---------- éxito aplicar cierre ---------- */
  .exito-check{
    width:44px; height:44px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
    display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 auto 14px;
    border:1px solid var(--accent);
  }
  .exito-lista{list-style:none; margin:16px 0; padding:0;}
  .exito-lista li{
    display:flex; gap:9px; padding:7px 0; font-size:13px; align-items:flex-start;
  }
  .exito-lista li::before{content:"✓"; color:var(--accent); font-weight:700; flex:0 0 auto;}

@media (max-width:760px){
    .meta-grid{grid-template-columns:repeat(2,1fr);}
  }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Períodos Fiscales</span>
    </div>
    <div class="crumbs" id="crumbs"><b>Trabajo diario</b> / Períodos fiscales</div>
  </div>

<div class="view active" id="view-lista">
    <div style="display:flex; justify-content:flex-end; margin-bottom:12px;">
      <button class="btn btn-primary" id="btn-nuevo-periodo">+ Nuevo período</button>
    </div>
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>Año</th>
            <th>Estado del cierre</th>
            <th>Meses</th>
            <th>Asiento(s) de cierre</th>
            <th>Traslado a patrimonio</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="anios-tbody"></tbody>
      </table>
    </div>
    <p class="foot-note">
      Cerrar un período fiscal genera el asiento que deja en cero las cuentas de Ingreso, Costo y Gasto del año — nace <b>Pendiente</b>, para que se revise antes de aplicarlo. Aplicarlo traslada el resultado del ejercicio a la cuenta de Patrimonio que usted indique.
    </p>
  </div>

<div class="view" id="view-asientos-2025">
    <button class="volver-link" id="volver-desde-2025">← Volver a Períodos fiscales</button>
    <div id="voucher-cierre-2025"></div>
    <div id="voucher-traslado-2025"></div>
  </div>

<div class="view" id="view-resumen-historico">
    <button class="volver-link" id="volver-desde-historico">← Volver a Períodos fiscales</button>
    <div class="resumen-historico" id="resumen-historico-contenido"></div>
  </div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <input type="text" class="modal-input" id="modal-input" style="display:none;">
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="meses-overlay">
  <div class="modal-box ancho" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="meses-titulo"></h3>
    <div class="meses-tabla-wrap">
      <table class="meses-tabla">
        <thead><tr><th>Mes</th><th>Estado</th><th>Detalle</th><th></th></tr></thead>
        <tbody id="meses-tbody"></tbody>
      </table>
    </div>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="meses-cerrar-btn">Cerrar</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="aplicar-overlay">
  <div class="modal-box ancho" role="dialog" aria-modal="true" id="aplicar-box"></div>
</div>

<div class="modal-overlay" id="nuevo-periodo-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo">Nuevo período fiscal</h3>
    <p class="modal-mensaje" id="nuevo-periodo-sugerencia" style="margin-bottom:14px;"></p>
    <div class="form-field">
      <label for="nuevo-periodo-desde">Desde</label>
      <input type="date" id="nuevo-periodo-desde" class="mono">
    </div>
    <div class="form-field">
      <label for="nuevo-periodo-hasta">Hasta</label>
      <input type="date" id="nuevo-periodo-hasta" class="mono">
    </div>
    <p class="modal-mensaje" id="nuevo-periodo-error" style="display:none; color:var(--red-ink); margin-bottom:14px;"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="nuevo-periodo-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="nuevo-periodo-confirmar">Crear período</button>
    </div>
  </div>
</div>

// ---------- modal propio (confirm()/prompt()/alert() nativos quedan bloqueados
  // dentro del iframe del Artifact) ----------
  const modalOverlay = document.getElementById('modal-overlay');
  const modalTitulo = document.getElementById('modal-titulo');
  const modalMensaje = document.getElementById('modal-mensaje');
  const modalInput = document.getElementById('modal-input');
  const modalCancelar = document.getElementById('modal-cancelar');
  const modalAceptar = document.getElementById('modal-aceptar');

modalOverlay.classList.add('abierto');
      if (tipo === 'prompt') setTimeout(()=> modalInput.focus(), 30);
      else setTimeout(()=> modalAceptar.focus(), 30);
    });
  }
  function modalAlert(mensaje, titulo='Aviso'){ return mostrarModal({titulo, mensaje, tipo:'alert', botonAceptar:'Entendido'}); }
  function modalConfirm(mensaje, titulo='Confirmar', colorAceptar='primary', botonAceptar='Confirmar'){
    return mostrarModal({titulo, mensaje, tipo:'confirm', botonAceptar, colorAceptar});
  }
  function modalPrompt(mensaje, valorInicial, titulo){
    return mostrarModal({titulo: titulo || 'Ingrese un dato', mensaje, tipo:'prompt', valorInicial, botonAceptar:'Guardar'});
  }

// ---------------- Conexión con el backend real (FastAPI) ----------------
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador';

let CUENTAS_TODAS = [], CUENTAS_POR_CODIGO = {}, CUENTAS_PATRIMONIO = [], ANIOS = [];

async function cargarCuentas(){
    const filas = await llamarApi('/cuentas');
    CUENTAS_TODAS = filas.map(c=>({codigo:c.codigo, nombre:c.nombre, acepta:c.acepta_movimientos}));
    CUENTAS_POR_CODIGO = Object.fromEntries(CUENTAS_TODAS.map(c=>[c.codigo,c]));
    CUENTAS_PATRIMONIO = CUENTAS_TODAS.filter(c => c.acepta && (c.codigo === '3' || c.codigo.startsWith('3-')));
  }

// Traduce la fila de /periodos-fiscales a la forma que ya espera el renderizado
  // de esta pantalla (mes como número, no como fecha).
  function apiToMes(p){
    return {
      id: p.id, mes: parseInt(p.fecha_inicio.split('-')[1], 10), anio: parseInt(p.fecha_inicio.split('-')[0], 10),
      estado: p.estado, cerradoPor: p.cerrado_por, cerradoEn: formatearFechaHora(p.cerrado_en),
      reabiertoPor: p.reabierto_por, reabiertoEn: formatearFechaHora(p.reabierto_en), motivo: p.motivo_reapertura,
    };
  }

// Traduce la fila de /cierre-fiscal/anios -- si el año todavía no tiene los 12
  // meses creados, se muestra "en curso" en vez de "sin cerrar" (evita ofrecer el
  // botón de cerrar período cuando el backend lo va a rechazar de una vez).
  function apiToAnio(row){
    const meses = (row.meses || []).map(apiToMes).sort((a,b)=>a.mes-b.mes);
    const estadoCierre = (row.estadoCierre === 'sin_generar' && meses.length < 12) ? 'en_curso' : row.estadoCierre;
    return {
      anio: row.anio, estadoCierre, meses,
      asientoCierreId: row.asientoCierreId, asientoCierre: row.asientoCierre,
      asientoTrasladoId: row.asientoTrasladoId, asientoTraslado: row.asientoTraslado,
      cuentaPatrimonio: row.cuentaPatrimonio, montoResultado: row.montoResultado, esUtilidad: row.esUtilidad,
    };
  }

async function cargarAnios(){
    const filas = await llamarApi('/cierre-fiscal/anios');
    ANIOS = filas.map(apiToAnio);
  }

// ================= estado de interacción =================
  let anioParaMeses = null;
  let anioParaAplicar = null;

function pillEstadoCierre(a){
    if (a.estadoCierre === 'aplicado') return `<span class="pill pill-aplicado">Cerrado</span>`;
    if (a.estadoCierre === 'pendiente') return `<span class="pill pill-pendiente">Pendiente de aplicar</span>`;
    if (a.estadoCierre === 'en_curso') return `<span class="pill pill-neutro">En curso</span>`;
    return `<span class="pill pill-neutro">Sin cerrar</span>`;
  }

return `<tr>
        <td class="anio mono">${a.anio}</td>
        <td>${pillEstadoCierre(a)}${a.alerta ? `<div class="alerta-punto">${a.alerta}</div>` : ''}</td>
        <td class="meses-resumen">${resumenMeses(a)}</td>
        <td class="mono">${asientos}</td>
        <td>${destino}</td>
        <td><div class="row-actions">${acciones}</div></td>
      </tr>`;
    }).join('');

tbody.querySelectorAll('[data-ver-meses]').forEach(b=> b.addEventListener('click', ()=> abrirMeses(Number(b.dataset.verMeses))));
    tbody.querySelectorAll('[data-cerrar-periodo]').forEach(b=> b.addEventListener('click', ()=> cerrarPeriodoFiscal(Number(b.dataset.cerrarPeriodo), b)));
    tbody.querySelectorAll('[data-aplicar-cierre]').forEach(b=> b.addEventListener('click', ()=> abrirAplicarCierre(Number(b.dataset.aplicarCierre))));
    tbody.querySelectorAll('[data-ver-asientos]').forEach(b=> b.addEventListener('click', ()=> verAsientos(Number(b.dataset.verAsientos))));
  }

// ================= modal: meses del período =================
  const mesesOverlay = document.getElementById('meses-overlay');
  const mesesTitulo = document.getElementById('meses-titulo');
  const mesesTbody = document.getElementById('meses-tbody');

mesesTbody.querySelectorAll('[data-reabrir]').forEach(b=> b.addEventListener('click', ()=> reabrirMes(a, Number(b.dataset.reabrir))));
    mesesTbody.querySelectorAll('[data-cerrar]').forEach(b=> b.addEventListener('click', ()=> cerrarMes(a, Number(b.dataset.cerrar))));
  }
  async function reabrirMes(a, mes){
    const motivo = await modalPrompt(
      `Va a reabrir ${MESES_NOMBRE[mes]} ${a.anio}. Esto queda registrado con su usuario, la fecha y el motivo que indique aquí.`,
      '', 'Motivo de la reapertura'
    );
    if (motivo === null) return;
    if (!motivo.trim()){ await modalAlert('El motivo es obligatorio para reabrir un período — es lo que hace auditable la reapertura.'); return; }
    const m = a.meses.find(x=>x.mes===mes);
    try{
      await llamarApi(`/periodos-fiscales/${m.id}/reabrir`, {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({reabierto_por: USUARIO_ACTUAL, motivo_reapertura: motivo.trim()}),
      });
      await cargarAnios();
      renderMesesTabla(ANIOS.find(x=>x.anio===a.anio));
      renderAnios();
    }catch(e){ await modalAlert(e.message, 'No se pudo reabrir el mes'); }
  }
  async function cerrarMes(a, mes){
    const ok = await modalConfirm(`¿Cerrar ${MESES_NOMBRE[mes]} ${a.anio}? No se podrán registrar asientos nuevos con fecha de ese mes hasta que se reabra explícitamente.`, 'Cerrar mes');
    if (!ok) return;
    const m = a.meses.find(x=>x.mes===mes);
    try{
      await llamarApi(`/periodos-fiscales/${m.id}/cerrar`, {
        method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({cerrado_por: USUARIO_ACTUAL}),
      });
      await cargarAnios();
      renderMesesTabla(ANIOS.find(x=>x.anio===a.anio));
      renderAnios();
    }catch(e){ await modalAlert(e.message, 'No se pudo cerrar el mes'); }
  }
  document.getElementById('meses-cerrar-btn').addEventListener('click', ()=> mesesOverlay.classList.remove('abierto'));

// ================= cerrar período fiscal (generar asiento de cierre) =================
  async function cerrarPeriodoFiscal(anio, btn){
    const a = ANIOS.find(x=>x.anio===anio);
    const mesesAbiertos = a.meses.filter(m=>m.estado==='Abierto').map(m=>MESES_NOMBRE[m.mes]);
    const ok = await modalConfirm(
      `Se generará el asiento que deja en cero las cuentas de Ingreso, Costo y Gasto del ejercicio ${anio}, y se cerrarán los 12 meses del año` +
      (mesesAbiertos.length ? ` (${mesesAbiertos.join(', ')} está${mesesAbiertos.length>1?'n':''} abierto${mesesAbiertos.length>1?'s':''} todavía).` : '.') +
      `\n\nEl asiento nace Pendiente — usted lo revisa antes de aplicarlo. Nada se aplica todavía.`,
      `Cerrar período fiscal ${anio}`
    );
    if (!ok) return;

const textoOriginal = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = `<span class="girando">⟳</span> Generando…`;

try{
      const resultado = await llamarApi('/cierre-fiscal/generar', {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({anio, creado_por: USUARIO_ACTUAL}),
      });
      await cargarAnios();
      renderAnios();
      await modalAlert(`Asiento #${resultado.numero} generado en estado Pendiente. Revíselo y, cuando esté conforme, aplique el cierre fiscal.`, 'Cierre generado');
    }catch(e){
      btn.disabled = false;
      btn.innerHTML = textoOriginal;
      await modalAlert(e.message, 'No se pudo generar el cierre');
    }
  }

// ================= nuevo período fiscal =================
  // El backend acepta cualquier rango (fecha_inicio/fecha_fin), sin forzar mes calendario --
  // pero todo lo demás de esta pantalla asume meses, así que la sugerencia por defecto es
  // siempre "el mes calendario siguiente al último período que ya existe" (mismo patrón que se
  // usó a mano para abrir agosto 2026). El único límite real que hace cumplir la base es que
  // no puede solaparse con ningún período existente (excl_periodo_sin_solape, 004).
  const nuevoPeriodoOverlay = document.getElementById('nuevo-periodo-overlay');
  const nuevoPeriodoDesde = document.getElementById('nuevo-periodo-desde');
  const nuevoPeriodoHasta = document.getElementById('nuevo-periodo-hasta');
  const nuevoPeriodoSugerencia = document.getElementById('nuevo-periodo-sugerencia');
  const nuevoPeriodoError = document.getElementById('nuevo-periodo-error');
  const nuevoPeriodoConfirmar = document.getElementById('nuevo-periodo-confirmar');

function haySolape(desdeStr, hastaStr){
    const desde = new Date(desdeStr), hasta = new Date(hastaStr);
    return todosLosPeriodos().some(p=>{
      const pDesde = new Date(p.anio, p.mes - 1, 1), pHasta = ultimoDiaMes(p.anio, p.mes - 1);
      return desde <= pHasta && hasta >= pDesde;
    });
  }

nuevoPeriodoConfirmar.addEventListener('click', async ()=>{
    const desde = nuevoPeriodoDesde.value, hasta = nuevoPeriodoHasta.value;
    nuevoPeriodoError.style.display = 'none';
    if (!desde || !hasta){
      nuevoPeriodoError.textContent = 'Indique ambas fechas.';
      nuevoPeriodoError.style.display = '';
      return;
    }
    if (hasta < desde){
      nuevoPeriodoError.textContent = 'La fecha "Hasta" no puede ser anterior a "Desde".';
      nuevoPeriodoError.style.display = '';
      return;
    }
    if (haySolape(desde, hasta)){
      nuevoPeriodoError.textContent = 'Este rango se solapa con un período que ya existe -- ajuste las fechas.';
      nuevoPeriodoError.style.display = '';
      return;
    }
    nuevoPeriodoConfirmar.disabled = true;
    nuevoPeriodoConfirmar.textContent = 'Creando…';
    try{
      await llamarApi('/periodos-fiscales', {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({fecha_inicio: desde, fecha_fin: hasta, creado_por: USUARIO_ACTUAL}),
      });
      await cargarAnios();
      renderAnios();
      nuevoPeriodoOverlay.classList.remove('abierto');
      await modalAlert(`Período del ${desde} al ${hasta} creado y Abierto.`, 'Período creado');
    }catch(e){
      nuevoPeriodoError.textContent = e.message;
      nuevoPeriodoError.style.display = '';
    }finally{
      nuevoPeriodoConfirmar.disabled = false;
      nuevoPeriodoConfirmar.textContent = 'Crear período';
    }
  });

// ================= voucher genérico (lectura) =================
  function renderVoucher(container, asiento, opts){
    opts = opts || {};
    const totalDebe = asiento.lineas.reduce((s,l)=>s+l.debito,0);
    const totalHaber = asiento.lineas.reduce((s,l)=>s+l.credito,0);
    container.innerHTML = `
      <div class="voucher">
        <div class="voucher-head">
          <div>
            <h2>${opts.titulo || 'Asiento de Cierre'}</h2>
            <div class="sub">Sistemas Rodríguez y Asociados</div>
          </div>
          <div class="voucher-num">
            <div class="n mono">#${asiento.numero}</div>
            <div class="mono">${asiento.fecha}</div>
          </div>
        </div>
        <div class="meta-grid">
          <div class="field-ro"><label>Estado</label><div class="val"><span class="pill ${asiento.estado==='Aplicado' ? 'pill-aplicado' : 'pill-pendiente'}">${asiento.estado}</span></div></div>
          <div class="field-ro"><label>Origen</label><div class="val">${asiento.origen}</div></div>
          <div class="field-ro"><label>Documento</label><div class="val mono">${asiento.tipoDoc} · ${asiento.numDoc}</div></div>
          <div class="field-ro"><label>Fecha</label><div class="val mono">${asiento.fecha}</div></div>
        </div>
        <div class="glosa-block"><label>Glosa</label>${asiento.glosa}</div>
        <div class="lineas-scroll">
          <table class="lineas">
            <thead><tr><th>Cuenta</th><th>Débito ₡</th><th>Crédito ₡</th></tr></thead>
            <tbody>
              ${asiento.lineas.map(l=>`
                <tr>
                  <td>
                    <span class="cuenta-cod mono">${l.codigo}</span>${nombreCuenta(l.codigo)}
                    ${l.puente ? '<span class="pill-cuentapuente">cuenta puente</span>' : ''}
                    ${l.obs ? `<span class="obs">${l.obs}</span>` : ''}
                  </td>
                  <td class="mono">${l.debito ? fmt(l.debito) : '—'}</td>
                  <td class="mono">${l.credito ? fmt(l.credito) : '—'}</td>
                </tr>`).join('')}
            </tbody>
            <tfoot><tr><td>Totales</td><td class="mono">₡${fmt(totalDebe)}</td><td class="mono">₡${fmt(totalHaber)}</td></tr></tfoot>
          </table>
        </div>
        ${opts.resultadoBanner || ''}
      </div>`;
  }

// Convierte la forma de GET /asientos/{id} a la que ya espera renderVoucher().
  // La cuenta puente (7-1 en el catálogo real de esta empresa) se marca con la
  // insignia -- es la misma en el asiento de cierre y en el de traslado.
  async function cargarAsientoParaVoucher(id){
    const row = await llamarApi(`/asientos/${id}`);
    return {
      numero: row.numero, fecha: row.fecha, origen: row.origen_modulo,
      tipoDoc: row.tipo_documento_origen, numDoc: row.numero_documento_origen,
      glosa: row.glosa, estado: row.estado,
      lineas: row.lineas.map(l=>({
        codigo: l.cuenta_codigo, debito: l.debito_local, credito: l.credito_local,
        obs: l.observaciones, puente: l.cuenta_codigo === '7-1',
      })),
    };
  }

async function verAsientos(anio){
    const a = ANIOS.find(x=>x.anio===anio);
    document.getElementById('view-lista').classList.remove('active');
    document.getElementById('view-asientos-2025').classList.add('active');

const contCierre = document.getElementById('voucher-cierre-2025');
    const contTraslado = document.getElementById('voucher-traslado-2025');
    contCierre.innerHTML = ''; contTraslado.innerHTML = '';

try{
      if (a.asientoCierreId){
        const asientoCierre = await cargarAsientoParaVoucher(a.asientoCierreId);
        const bannerResultado = (a.montoResultado != null) ? `<div class="resultado-banner ${a.esUtilidad ? 'resultado-utilidad' : 'resultado-perdida'}">
          ${a.esUtilidad ? 'Utilidad' : 'Pérdida'} del ejercicio ${anio}: ₡${fmt(a.montoResultado)}
        </div>` : '';
        renderVoucher(contCierre, asientoCierre, {titulo:`Cierre de resultados del ejercicio ${anio}`, resultadoBanner: bannerResultado});
      }
      if (a.asientoTrasladoId){
        const asientoTraslado = await cargarAsientoParaVoucher(a.asientoTrasladoId);
        renderVoucher(contTraslado, asientoTraslado, {titulo:'Traslado del resultado a Patrimonio'});
      } else {
        contTraslado.innerHTML = `<div class="voucher"><p class="foot-note" style="margin:0;">El asiento de traslado a Patrimonio se genera al aplicar el cierre fiscal — todavía no existe.</p></div>`;
      }
    }catch(e){
      await modalAlert(e.message, 'No se pudo cargar el asiento');
    }
  }
  document.getElementById('volver-desde-2025').addEventListener('click', ()=>{
    document.getElementById('view-asientos-2025').classList.remove('active');
    document.getElementById('view-lista').classList.add('active');
  });
  document.getElementById('volver-desde-historico').addEventListener('click', ()=>{
    document.getElementById('view-resumen-historico').classList.remove('active');
    document.getElementById('view-lista').classList.add('active');
  });

// ================= aplicar cierre fiscal (confirmación guiada) =================
  const aplicarOverlay = document.getElementById('aplicar-overlay');
  const aplicarBox = document.getElementById('aplicar-box');
  let cuentaPatrimonioElegida = null;

async function abrirAplicarCierre(anio){
    anioParaAplicar = anio;
    cuentaPatrimonioElegida = null;
    const a = ANIOS.find(x=>x.anio===anio);
    try{
      const previa = await llamarApi(`/cierre-fiscal/${a.asientoCierreId}/previsualizar`);
      renderFormularioAplicar(anio, previa);
      aplicarOverlay.classList.add('abierto');
    }catch(e){
      await modalAlert(e.message, 'No se pudo previsualizar el cierre');
    }
  }

const input = document.getElementById('patrimonio-input');
    const caja = document.getElementById('patrimonio-sugerencias');
    const elegidaBox = document.getElementById('cuenta-elegida-box');
    const btnConfirmar = document.getElementById('aplicar-confirmar');

function marcarElegida(codigo){
      cuentaPatrimonioElegida = codigo;
      const c = CUENTAS_POR_CODIGO[codigo];
      document.getElementById('cuenta-elegida-codigo').textContent = c.codigo;
      document.getElementById('cuenta-elegida-nombre').textContent = c.nombre;
      elegidaBox.classList.add('visible');
      input.style.display = 'none';
      btnConfirmar.disabled = false;
    }

const usarSugerida = document.getElementById('usar-sugerida');
    if (usarSugerida) usarSugerida.addEventListener('click', ()=> marcarElegida(sugerida.codigo));

document.getElementById('cambiar-cuenta').addEventListener('click', ()=>{
      cuentaPatrimonioElegida = null;
      elegidaBox.classList.remove('visible');
      input.style.display = '';
      input.value = '';
      btnConfirmar.disabled = true;
      input.focus();
    });

document.getElementById('aplicar-cancelar').addEventListener('click', ()=> aplicarOverlay.classList.remove('abierto'));
    btnConfirmar.addEventListener('click', ()=> confirmarAplicarCierre(anio, previa, btnConfirmar));

// Principio 3: el cursor espera al usuario -- este es el campo que va a usar primero.
    setTimeout(()=> input.focus(), 30);
  }

async function confirmarAplicarCierre(anio, previa, btn){
    if (!cuentaPatrimonioElegida){
      await modalAlert('Debe elegir una cuenta de Patrimonio de la lista de sugerencias antes de continuar — el sistema no la inventa por usted.');
      return;
    }
    const textoOriginal = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = `<span class="girando">⟳</span> Aplicando…`;
    document.getElementById('aplicar-cancelar').disabled = true;

const a = ANIOS.find(x=>x.anio===anio);
    const cPatrimonio = CUENTAS_POR_CODIGO[cuentaPatrimonioElegida];

try{
      await llamarApi(`/cierre-fiscal/${a.asientoCierreId}/aplicar`, {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({aplicado_por: USUARIO_ACTUAL, codigo_cuenta_patrimonio: cuentaPatrimonioElegida}),
      });
      await cargarAnios();
      renderAnios();
      renderExitoAplicar(anio, cPatrimonio, previa);
    }catch(e){
      btn.disabled = false;
      btn.innerHTML = textoOriginal;
      document.getElementById('aplicar-cancelar').disabled = false;
      await modalAlert(e.message, 'No se pudo aplicar el cierre');
    }
  }

(async ()=>{
    try{
      await cargarCuentas();
      await cargarAnios();
    }catch(e){
      await modalAlert(e.message, 'No se pudo cargar la información inicial');
    }
    renderAnios();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Balance de Comprobación</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }
  *{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums;}
  h1,h2{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1180px; margin:0 auto; padding:28px 24px 64px;}

.topbar{
    display:flex; align-items:baseline; justify-content:space-between;
    padding-bottom:18px; border-bottom:2px solid var(--ink); margin-bottom:22px; gap:16px; flex-wrap:wrap;
  }
  .brand{display:flex; align-items:baseline; gap:10px;}
  .brand h1{font-size:22px; letter-spacing:.2px;}
  .brand .sep{color:var(--line-strong);}
  .brand .empresa{font-size:14px; color:var(--ink-muted);}
  .crumbs{font-size:12.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.06em;}
  .crumbs b{color:var(--ink); font-weight:600;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field.fecha input{width:150px;}
  .field.buscar input{width:240px;}
  .range{display:flex; align-items:end; gap:7px;}
  .range .dash{color:var(--ink-muted); padding-bottom:8px;}
  .filters .spacer{flex:1;}
  .check-field{
    display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-muted);
    cursor:pointer; padding-bottom:7px; white-space:nowrap;
  }
  .check-field input{accent-color:var(--accent); width:15px; height:15px; cursor:pointer;}
  .check-field:hover{color:var(--ink);}
  td.nivel-1{font-weight:700;}
  td.nivel-1 .sangria, td.nivel-2 .sangria{display:none;}
  .sangria{color:var(--line-strong); margin-right:2px;}
  tr.es-padre td:not(.codigo){color:var(--ink);}
  tr.es-padre{background:var(--surface-2);}
  tr.es-padre .mono{font-weight:600;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn{transition:transform .08s ease, filter .08s ease, background-color .15s ease;}
  .btn[disabled]{opacity:.65; cursor:default; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn svg{width:15px; height:15px;}

.resumen{
    display:flex; align-items:center; gap:18px; margin-bottom:14px; flex-wrap:wrap;
  }
  .resumen .rango{font-size:13px; color:var(--ink-muted);}
  .resumen .rango b{color:var(--ink);}
  .pill-cuadre{
    display:inline-flex; align-items:center; gap:6px; padding:4px 11px 4px 9px;
    border-radius:99px; font-size:12px; font-weight:700; letter-spacing:.02em;
    background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent);
  }
  .pill-cuadre::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}

.table-wrap{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow);
  }
  table{border-collapse:collapse; width:100%; min-width:960px;}
  thead th{
    text-align:right; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-muted); font-weight:600; padding:8px 12px; border-bottom:1px solid var(--line-strong);
    background:var(--surface-2); position:sticky; top:0;
  }
  thead th:first-child, thead th:nth-child(2){text-align:left;}
  thead .grupo-th{border-bottom:1px solid var(--line-strong); padding:9px 12px 3px; font-size:10px;
    text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); text-align:center;
    border-left:1px solid var(--line);}
  tbody td{padding:8px 12px; border-bottom:1px solid var(--line); text-align:right; vertical-align:middle;}
  tbody td:first-child, tbody td:nth-child(2){text-align:left;}
  tbody tr.fila-cuenta:hover{background:var(--surface-2);}
  tbody tr:last-child td{border-bottom:none;}
  td.codigo{color:var(--ink-muted); white-space:nowrap;}
  td.cero{color:var(--line-strong);}
  .cero{color:var(--line-strong);}
  .negativo{color:var(--red-ink); font-weight:600;}

tr.fila-grupo td{
    background:var(--surface-2); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--ink-muted); font-weight:700; padding:7px 12px; border-bottom:1px solid var(--line-strong);
  }

tfoot td{
    border-top:2px solid var(--ink); border-bottom:none; font-weight:700; padding-top:11px;
  }
  tfoot td:first-child{font-family:Georgia,serif; font-weight:600;}

.col-divider{border-left:1px solid var(--line);}

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}

.foot-note{font-size:12px; color:var(--ink-muted); margin-top:12px;}
  .btn-imprimir{margin-left:8px;}

.print-header{display:none;}

@media (max-width:760px){
    .filters{flex-direction:column; align-items:stretch;}
  }

/* ---------- impresión ----------
     Mismo documento, dos trajes: en pantalla se apoya en color para que se lea rápido
     (verde de marca, rojo para saldos anómalos); en papel el color no aporta
     información nueva -- el paréntesis ya dice "negativo" por sí solo (por algo es la
     convención contable de toda la vida, nació en la era de tinta negra) -- así que se
     quita todo relleno de color y solo queda texto negro sobre blanco, con negrita y
     bordes finos para conservar la jerarquía visual sin gastar tinta de color. */
  @media print{
    @page{ size: landscape; margin: 1.2cm; }
    .topbar, .filters, .no-print{ display:none !important; }
    .print-header{ display:block; margin-bottom:14px; }
    .print-header .titulo{ font-family:Georgia,serif; font-size:18px; font-weight:700; }
    .print-header .sub{ font-size:12px; color:#000; margin-top:2px; }

body{ background:#fff; color:#000; }
    .app{ max-width:none; padding:0; }

.resumen{ margin-bottom:10px; }
    .pill-cuadre{
      background:none !important; border:1px solid #000 !important; color:#000 !important;
    }
    .pill-cuadre::before{ display:none; }

.table-wrap{ box-shadow:none; border:1px solid #000; }
    thead th{
      background:none !important; color:#000 !important; border-bottom:2px solid #000 !important;
    }
    tr.fila-grupo td{
      background:none !important; color:#000 !important; border-bottom:1px solid #000 !important;
      text-decoration:underline;
    }
    tr.es-padre{ background:none !important; }
    tr.es-padre td{ color:#000 !important; }
    tbody td, tfoot td{ border-color:#999 !important; }
    tfoot td{ border-top:2px solid #000 !important; }

.negativo{ color:#000 !important; }
    .cero{ color:#666 !important; }
    .sangria{ color:#999 !important; }
  }
</style>

<div class="app">
  <div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Balance de Comprobación</span>
    </div>
    <div class="crumbs">Reportes / <b>Balance de Comprobación</b></div>
  </div>

<div class="print-header">
    <div class="titulo">Balance de Comprobación</div>
    <div class="sub">Sistemas Rodríguez y Asociados — Del <span id="print-desde"></span> al <span id="print-hasta"></span></div>
  </div>

<div class="filters no-print">
    <div class="field fecha">
      <label>Rango de fechas</label>
      <div class="range">
        <input type="date" id="f-desde" class="mono" value="2026-05-01">
        <span class="dash">–</span>
        <input type="date" id="f-hasta" class="mono" value="2026-05-31">
      </div>
    </div>
    <div class="field buscar">
      <label for="f-texto">Buscar cuenta</label>
      <input type="text" id="f-texto" placeholder="Nombre o código…">
    </div>
    <label class="check-field">
      <input type="checkbox" id="f-jerarquia" checked>
      Mostrar todos los niveles
    </label>
    <label class="check-field">
      <input type="checkbox" id="f-excluir-cero" checked>
      Excluir cuentas sin movimiento
    </label>
    <div class="spacer"></div>
    <button class="btn" id="btn-imprimir">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M6 9V2h12v7M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 14h12v8H6z"/></svg>
      Imprimir
    </button>
    <button class="btn btn-primary" id="btn-exportar">
      <svg id="icono-exportar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
      <span id="texto-exportar">Exportar a Excel</span>
    </button>
  </div>

<div class="resumen">
    <div class="rango">Del <b id="rango-desde"></b> al <b id="rango-hasta"></b></div>
    <div class="pill-cuadre" id="pill-cuadre">Cuadra</div>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th style="text-align:left;">Código</th>
          <th style="text-align:left;">Cuenta</th>
          <th>Saldo Inicial</th>
          <th class="col-divider">Debe</th><th>Haber</th>
          <th>Saldo del Período</th>
          <th class="col-divider">Saldo Final</th>
        </tr>
      </thead>
      <tbody id="tbody-balanza"></tbody>
      <tfoot id="tfoot-balanza"></tfoot>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>Ninguna cuenta coincide con la búsqueda</b>
      Ajusta el texto o límpialo para ver el reporte completo.
    </div>
  </div>
  <div class="foot-note">Mostrando <span id="count-visible"></span> de <span id="count-total"></span> cuentas.</div>
</div>

// Datos reales: se piden al backend (fn_balanza_comprobacion) cada vez que cambia
  // fecha/jerarquía/excluir-cero -- esos tres parámetros afectan el cálculo en el
  // servidor. El texto de búsqueda, en cambio, filtra en el navegador sobre lo ya
  // recibido, sin volver a pedir nada.
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  let DATOS = [];

// Normaliza los nombres de columna que devuelve el backend (saldo_inicial,
  // debe_periodo, haber_periodo...) a los que usa el resto de este archivo (si, mv_d,
  // mv_h...) -- así el resto de render()/exportarExcel() no cambia de forma.
  function normalizarFila(r){
    return {
      codigo: r.codigo, nombre: r.nombre, nivel: r.nivel, tipo: r.tipo, naturaleza: r.naturaleza,
      esHoja: r.acepta_movimientos,
      si: Number(r.saldo_inicial), mv_d: Number(r.debe_periodo), mv_h: Number(r.haber_periodo),
      saldo_periodo: Number(r.saldo_periodo), saldo_final: Number(r.saldo_final),
    };
  }

function fechaLarga(iso){
    if (!iso) return '';
    const [y,m,d] = iso.split('-');
    return `${d}/${m}/${y}`;
  }

function render(){
    const texto = document.getElementById('f-texto').value.trim().toUpperCase();
    const desde = document.getElementById('f-desde').value;
    const hasta = document.getElementById('f-hasta').value;
    const incluirPadres = document.getElementById('f-jerarquia').checked;
    document.getElementById('rango-desde').textContent = fechaLarga(desde);
    document.getElementById('rango-hasta').textContent = fechaLarga(hasta);
    document.getElementById('print-desde').textContent = fechaLarga(desde);
    document.getElementById('print-hasta').textContent = fechaLarga(hasta);

// El filtro de cuentas sin movimiento ya lo aplicó el backend (fn_balanza_comprobacion)
    // al traer DATOS -- aquí solo queda ordenar y aplicar la búsqueda de texto, que es
    // puramente de navegador.
    const base = DATOS;
    const filtradas = base.filter(c =>
      !texto || c.nombre.toUpperCase().includes(texto) || c.codigo.includes(texto)
    ).sort((a,b)=> a.codigo.localeCompare(b.codigo, 'es', {numeric:true}));

const tbody = document.getElementById('tbody-balanza');
    let filas = '';
    let tipoActual = null;
    let tot = {si:0, mv_d:0, mv_h:0, saldo_periodo:0, saldo_final:0};

// Los totales del pie solo suman cuentas de nivel 1 en modo jerárquico (para no
    // contar cada colón varias veces al ir sumando también los subniveles) -- en modo
    // solo-hojas, cada cuenta ya es única, así que se suman todas. Se calcula sobre
    // `base` (toda la balanza, sin el filtro de búsqueda) para que el total no cambie
    // solo porque el usuario está buscando una cuenta específica.
    base.forEach(c=>{
      if (!incluirPadres || c.nivel === 1){
        tot.si += c.si; tot.mv_d += c.mv_d; tot.mv_h += c.mv_h;
        tot.saldo_periodo += c.saldo_periodo; tot.saldo_final += c.saldo_final;
      }
    });

filtradas.forEach(c=>{
      if (c.tipo !== tipoActual){
        tipoActual = c.tipo;
        filas += `<tr class="fila-grupo"><td colspan="7">${tipoActual}</td></tr>`;
      }
      const sangria = incluirPadres ? '<span class="sangria">' + '—'.repeat(Math.max(0,c.nivel-1)) + '</span>' : '';
      filas += `<tr class="fila-cuenta ${c.esHoja?'':'es-padre'}">
        <td class="codigo mono">${c.codigo}</td>
        <td>${sangria}${c.nombre}</td>
        <td class="mono">${fmtSigno(c.si)}</td>
        <td class="mono col-divider ${c.mv_d?'':'cero'}">${c.mv_d?fmt(c.mv_d):'—'}</td>
        <td class="mono ${c.mv_h?'':'cero'}">${c.mv_h?fmt(c.mv_h):'—'}</td>
        <td class="mono">${fmtSigno(c.saldo_periodo)}</td>
        <td class="mono col-divider">${fmtSigno(c.saldo_final)}</td>
      </tr>`;
    });
    tbody.innerHTML = filas;

document.getElementById('tfoot-balanza').innerHTML = `<tr>
      <td colspan="2">Totales</td>
      <td class="mono">${fmt(tot.si)}</td>
      <td class="mono col-divider">${fmt(tot.mv_d)}</td>
      <td class="mono">${fmt(tot.mv_h)}</td>
      <td class="mono">${fmt(tot.saldo_periodo)}</td>
      <td class="mono col-divider">${fmt(tot.saldo_final)}</td>
    </tr>`;

document.getElementById('empty-state').style.display = filtradas.length ? 'none' : 'block';
    document.getElementById('count-visible').textContent = filtradas.length;
    document.getElementById('count-total').textContent = base.length;

// El cuadre se valida sobre los movimientos en bruto del período (las únicas
    // columnas Debe/Haber que siguen visibles) -- Debe = Haber ahí es justo el
    // Principio 1 puesto a la vista.
    const cuadra = Math.abs(tot.mv_d - tot.mv_h) < 0.005;
    const pill = document.getElementById('pill-cuadre');
    pill.textContent = cuadra ? 'Movimientos cuadran' : 'No cuadra';
    pill.style.color = cuadra ? 'var(--accent)' : 'var(--red-ink)';
    pill.style.borderColor = cuadra ? 'var(--accent)' : 'var(--red-line)';
    pill.style.background = cuadra ? 'var(--accent-soft)' : 'var(--red-bg)';
  }

function csvEscape(v){
    const s = String(v);
    // La sangría jerárquica va con espacios al inicio del texto -- sin comillas,
    // algunos importadores de Excel los recortan y la sangría desaparece.
    return /[",;\n]|^\s/.test(s) ? '"' + s.replace(/"/g,'""') + '"' : s;
  }

// Principio de interfaz (fenix-principios-ux): todo clic se confirma de inmediato.
  // Este botón pasa por tres estados visibles -- normal -> procesando -> confirmado --
  // en vez de quedarse callado mientras "algo" pasa. El procesamiento en sí es
  // instantáneo con datos de muestra, pero el usuario no debería tener que saber eso
  // para confiar en que su clic funcionó -- por eso el estado se muestra siempre,
  // aunque sea brevemente, no solo cuando "hace falta".
  const ICONO_DESCARGA = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>';
  const ICONO_PROCESANDO = '<svg class="girando" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-3-6.7"/></svg>';
  const ICONO_LISTO = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M20 6 9 17l-5-5"/></svg>';
  const ICONO_ERROR = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg>';

// El .xlsx real (colores, jerarquía, fórmulas -- lo que de verdad impresiona) no se
  // puede armar en el navegador sin escribir un lector/escritor de formato Excel desde
  // cero. Lo genera el backend real (FastAPI + openpyxl, ya probado con datos reales)
  // reusando fn_balanza_comprobacion(). Este botón le pide el archivo por HTTP y lo
  // descarga -- ya no arma un CSV a mano.

btn.disabled = true;
    icono.outerHTML = ICONO_PROCESANDO.replace('<svg ', '<svg id="icono-exportar" ');
    texto.textContent = 'Generando…';

const desde = document.getElementById('f-desde').value;
    const hasta = document.getElementById('f-hasta').value;
    const incluirPadres = document.getElementById('f-jerarquia').checked;
    const excluirCero = document.getElementById('f-excluir-cero').checked;

function volverANormal(demora){
      setTimeout(()=>{
        btn.disabled = false;
        document.getElementById('icono-exportar').outerHTML = ICONO_DESCARGA.replace('<svg ', '<svg id="icono-exportar" ');
        document.getElementById('texto-exportar').textContent = 'Exportar a Excel';
      }, demora);
    }

if (!resp.ok){
        let detalle = `El servidor respondió ${resp.status}`;
        try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
        throw new Error(detalle);
      }

const disposicion = resp.headers.get('Content-Disposition') || '';
      const match = disposicion.match(/filename="?([^"]+)"?/);
      const nombreArchivo = match ? match[1] : `balanza_comprobacion_${desde}_a_${hasta}.xlsx`;

const blob = await resp.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = nombreArchivo;
      document.body.appendChild(a); a.click(); document.body.removeChild(a);
      URL.revokeObjectURL(url);

}catch(err){
      // Falla más probable: el backend (uvicorn) no está corriendo en esta máquina en
      // este momento -- se dice con todas sus letras, no se queda el usuario adivinando
      // por qué no pasó nada (Principio 1: toda acción deja una confirmación visible,
      // incluida cuando la confirmación es que algo salió mal).
      const esConexion = err instanceof TypeError;
      document.getElementById('icono-exportar').outerHTML = ICONO_ERROR.replace('<svg ', '<svg id="icono-exportar" ');
      document.getElementById('texto-exportar').textContent = esConexion
        ? 'No se pudo conectar al backend (¿está corriendo uvicorn?)'
        : `Error: ${err.message}`;
      volverANormal(4000);
    }
  }

// Trae la balanza real del backend cada vez que cambia algo que afecta el CÁLCULO
  // (fecha, jerarquía, excluir-cero) -- el texto de búsqueda no dispara esto, se filtra
  // solo en el navegador sobre lo ya traído (ver render()). Estado de "procesando"
  // visible en la tabla mientras responde (fenix-principios-ux: ninguna acción que
  // tarde se queda sin confirmación).
  async function cargarDatos(){
    const desde = document.getElementById('f-desde').value;
    const hasta = document.getElementById('f-hasta').value;
    const incluirPadres = document.getElementById('f-jerarquia').checked;
    const excluirCero = document.getElementById('f-excluir-cero').checked;

document.getElementById('tbody-balanza').innerHTML =
      `<tr><td colspan="7" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    document.getElementById('tfoot-balanza').innerHTML = '';
    document.getElementById('empty-state').style.display = 'none';

try{
      const params = new URLSearchParams({
        fecha_inicio: desde, fecha_fin: hasta,
        incluir_padres: incluirPadres, excluir_sin_movimiento: excluirCero,
      });
      const resp = await fetch(`${API_BASE}/balanza?${params}`);
      if (!resp.ok){
        let detalle = `El servidor respondió ${resp.status}`;
        try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
        throw new Error(detalle);
      }
      const cuerpo = await resp.json();
      DATOS = cuerpo.filas.map(normalizarFila);
      render();
    }catch(err){
      const esConexion = err instanceof TypeError;
      const mensaje = esConexion ? 'No se pudo conectar al backend (¿está corriendo uvicorn?)' : `Error: ${err.message}`;
      document.getElementById('tbody-balanza').innerHTML =
        `<tr><td colspan="7" style="text-align:center; padding:32px; color:var(--red-ink);">${mensaje}</td></tr>`;
      DATOS = [];
    }
  }

document.getElementById('btn-imprimir').addEventListener('click', ()=> window.print());
  document.getElementById('f-texto').addEventListener('input', render);
  document.getElementById('f-desde').addEventListener('change', cargarDatos);
  document.getElementById('f-hasta').addEventListener('change', cargarDatos);
  document.getElementById('f-jerarquia').addEventListener('change', cargarDatos);
  document.getElementById('f-excluir-cero').addEventListener('change', cargarDatos);
  document.getElementById('btn-exportar').addEventListener('click', exportarExcel);

cargarDatos();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Estado de Resultados</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }
  *{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums;}
  h1,h2{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1100px; margin:0 auto; padding:28px 24px 64px;}

.topbar{
    display:flex; align-items:baseline; justify-content:space-between;
    padding-bottom:18px; border-bottom:2px solid var(--ink); margin-bottom:22px; gap:16px; flex-wrap:wrap;
  }
  .brand{display:flex; align-items:baseline; gap:10px;}
  .brand h1{font-size:22px; letter-spacing:.2px;}
  .brand .sep{color:var(--line-strong);}
  .brand .empresa{font-size:14px; color:var(--ink-muted);}
  .crumbs{font-size:12.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.06em;}
  .crumbs b{color:var(--ink); font-weight:600;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field.fecha input{width:150px;}
  .field.buscar input{width:220px;}
  .range{display:flex; align-items:end; gap:7px;}
  .range .dash{color:var(--ink-muted); padding-bottom:8px;}
  .filters .spacer{flex:1;}
  .check-field{
    display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-muted);
    cursor:pointer; padding-bottom:7px; white-space:nowrap;
  }
  .check-field input{accent-color:var(--accent); width:15px; height:15px; cursor:pointer;}
  .check-field:hover{color:var(--ink);}
  td.nivel-1{font-weight:700;}
  td.nivel-1 .sangria, td.nivel-2 .sangria{display:none;}
  .sangria{color:var(--line-strong); margin-right:2px;}
  tr.es-padre td:not(.codigo){color:var(--ink);}
  tr.es-padre{background:var(--surface-2);}
  tr.es-padre .mono{font-weight:600;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn{transition:transform .08s ease, filter .08s ease, background-color .15s ease;}
  .btn[disabled]{opacity:.65; cursor:default; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn svg{width:15px; height:15px;}

.resumen{
    display:flex; align-items:stretch; gap:14px; margin-bottom:18px; flex-wrap:wrap;
  }
  .resumen .rango{font-size:13px; color:var(--ink-muted); width:100%;}
  .resumen .rango b{color:var(--ink);}
  .resumen .rango .moneda{margin-left:6px;}

.card-cifra{
    flex:1; min-width:180px; background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:13px 16px; box-shadow:var(--shadow);
  }
  .card-cifra .etiqueta{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin-bottom:5px;}
  .card-cifra .valor{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums; font-size:19px; font-weight:700;}
  .card-cifra.destacada{background:var(--accent-soft); border-color:var(--accent);}
  .card-cifra.destacada .valor{color:var(--accent);}
  .card-cifra.perdida .valor{color:var(--red-ink);}
  .card-cifra.perdida{background:var(--red-bg); border-color:var(--red-line);}

.table-wrap{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow);
  }
  table{border-collapse:collapse; width:100%; min-width:640px;}
  thead th{
    text-align:right; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-muted); font-weight:600; padding:8px 12px; border-bottom:1px solid var(--line-strong);
    background:var(--surface-2); position:sticky; top:0;
  }
  thead th:first-child, thead th:nth-child(2){text-align:left;}
  tbody td{padding:8px 12px; border-bottom:1px solid var(--line); text-align:right; vertical-align:middle;}
  tbody td:first-child, tbody td:nth-child(2){text-align:left;}
  tbody tr.fila-cuenta:hover{background:var(--surface-2);}
  tbody tr:last-child td{border-bottom:none;}
  td.codigo{color:var(--ink-muted); white-space:nowrap;}
  td.cero{color:var(--line-strong);}
  .cero{color:var(--line-strong);}
  .negativo{color:var(--red-ink); font-weight:600;}

tr.fila-utilidad td{
    background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:14px;
    padding:10px 12px; border-top:2px solid var(--accent); border-bottom:2px solid var(--accent);
  }
  tr.fila-utilidad.perdida td{
    background:var(--red-bg); color:var(--red-ink); border-color:var(--red-line);
  }

.col-divider{border-left:1px solid var(--line);}

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}

.foot-note{font-size:12px; color:var(--ink-muted); margin-top:12px;}
  .btn-imprimir{margin-left:8px;}

.print-header{display:none;}

@media (max-width:760px){
    .filters{flex-direction:column; align-items:stretch;}
  }

/* ---------- impresión ---------- */
  @media print{
    @page{ size: portrait; margin: 1.4cm; }
    .topbar, .filters, .no-print{ display:none !important; }
    .print-header{ display:block; margin-bottom:14px; }
    .print-header .titulo{ font-family:Georgia,serif; font-size:18px; font-weight:700; }
    .print-header .sub{ font-size:12px; color:#000; margin-top:2px; }

body{ background:#fff; color:#000; }
    .app{ max-width:none; padding:0; }

.resumen{ margin-bottom:10px; }
    .card-cifra{
      box-shadow:none !important; border:1px solid #000 !important; background:none !important;
    }
    .card-cifra .valor{ color:#000 !important; }

.table-wrap{ box-shadow:none; border:1px solid #000; }
    thead th{
      background:none !important; color:#000 !important; border-bottom:2px solid #000 !important;
    }
    tr.fila-grupo td{
      background:none !important; color:#000 !important; border-bottom:1px solid #000 !important;
      text-decoration:underline;
    }
    tr.fila-utilidad td{
      background:none !important; color:#000 !important; border-color:#000 !important;
    }
    tr.es-padre{ background:none !important; }
    tr.es-padre td{ color:#000 !important; }
    tbody td{ border-color:#999 !important; }

.negativo{ color:#000 !important; }
    .cero{ color:#666 !important; }
    .sangria{ color:#999 !important; }
  }
</style>

<div class="app">
  <div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Estado de Resultados</span>
    </div>
    <div class="crumbs">Reportes / <b>Estado de Resultados</b></div>
  </div>

<div class="print-header">
    <div class="titulo">Estado de Resultados</div>
    <div class="sub" id="print-empresa"></div>
    <div class="sub">Del <span id="print-desde"></span> al <span id="print-hasta"></span> — cifras expresadas en colones costarricenses (₡)</div>
  </div>

<div class="filters no-print">
    <div class="field fecha">
      <label>Rango de fechas</label>
      <div class="range">
        <input type="date" id="f-desde" class="mono" value="2026-05-01">
        <span class="dash">–</span>
        <input type="date" id="f-hasta" class="mono" value="2026-05-31">
      </div>
    </div>
    <div class="field buscar">
      <label for="f-texto">Buscar cuenta</label>
      <input type="text" id="f-texto" placeholder="Nombre o código…">
    </div>
    <label class="check-field">
      <input type="checkbox" id="f-detalle" checked>
      Mostrar detalle de subcuentas
    </label>
    <div class="spacer"></div>
    <button class="btn" id="btn-imprimir">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M6 9V2h12v7M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 14h12v8H6z"/></svg>
      Imprimir
    </button>
    <button class="btn btn-primary" id="btn-exportar">
      <svg id="icono-exportar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
      <span id="texto-exportar">Exportar a Excel</span>
    </button>
  </div>

<div class="resumen">
    <div class="rango">Del <b id="rango-desde"></b> al <b id="rango-hasta"></b><span class="moneda">— cifras en colones costarricenses (₡)</span></div>
    <div class="card-cifra">
      <div class="etiqueta">Ingresos netos</div>
      <div class="valor mono" id="cifra-ingresos">—</div>
    </div>
    <div class="card-cifra">
      <div class="etiqueta">Utilidad bruta</div>
      <div class="valor mono" id="cifra-bruta">—</div>
    </div>
    <div class="card-cifra destacada" id="card-neta">
      <div class="etiqueta">Utilidad neta del período</div>
      <div class="valor mono" id="cifra-neta">—</div>
    </div>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th style="text-align:left;">Código</th>
          <th style="text-align:left;">Cuenta</th>
          <th class="col-divider">Debe</th><th>Haber</th>
          <th>Saldo del Período</th>
        </tr>
      </thead>
      <tbody id="tbody-estado"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>Ninguna cuenta coincide con la búsqueda</b>
      Ajusta el texto o límpialo para ver el reporte completo.
    </div>
  </div>
  <div class="foot-note">Mostrando <span id="count-visible"></span> de <span id="count-total"></span> cuentas.</div>
</div>

// Datos reales: se piden al backend (fn_balanza_comprobacion, filtrado a cuentas de
  // resultado) cada vez que cambia fecha o el nivel de detalle -- esos tres parámetros
  // afectan la consulta en el servidor. El texto de búsqueda filtra en el navegador
  // sobre lo ya recibido, igual que en Balance de Comprobación.
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  let DATOS = [];
  let RESUMEN = { ingresos_netos:0, costos:0, utilidad_bruta:0, gastos:0, utilidad_neta:0 };
  let EMPRESA = '';

function normalizarFila(r){
    return {
      codigo: r.codigo, nombre: r.nombre, nivel: r.nivel, tipo: r.tipo, naturaleza: r.naturaleza,
      esHoja: r.acepta_movimientos,
      mv_d: Number(r.debe_periodo), mv_h: Number(r.haber_periodo), saldo_periodo: Number(r.saldo_periodo),
    };
  }

function fechaLarga(iso){
    if (!iso) return '';
    const [y,m,d] = iso.split('-');
    return `${d}/${m}/${y}`;
  }

function render(){
    const texto = document.getElementById('f-texto').value.trim().toUpperCase();
    const desde = document.getElementById('f-desde').value;
    const hasta = document.getElementById('f-hasta').value;
    document.getElementById('rango-desde').textContent = fechaLarga(desde);
    document.getElementById('rango-hasta').textContent = fechaLarga(hasta);
    document.getElementById('print-desde').textContent = fechaLarga(desde);
    document.getElementById('print-hasta').textContent = fechaLarga(hasta);
    document.getElementById('print-empresa').textContent = EMPRESA;

document.getElementById('cifra-ingresos').textContent = fmtColones(RESUMEN.ingresos_netos);
    document.getElementById('cifra-bruta').textContent = fmtColones(RESUMEN.utilidad_bruta);
    document.getElementById('cifra-neta').textContent = fmtColones(RESUMEN.utilidad_neta);
    const cardNeta = document.getElementById('card-neta');
    cardNeta.classList.toggle('perdida', RESUMEN.utilidad_neta < 0);
    document.getElementById('card-neta').querySelector('.etiqueta').textContent =
      RESUMEN.utilidad_neta < 0 ? 'Pérdida neta del período' : 'Utilidad neta del período';

const filtradas = DATOS.filter(c =>
      !texto || c.nombre.toUpperCase().includes(texto) || c.codigo.includes(texto)
    ).sort((a,b)=> a.codigo.localeCompare(b.codigo, 'es', {numeric:true}));

const tbody = document.getElementById('tbody-estado');
    let filas = '';
    let tipoActual = null;
    let brutaInsertada = false;

function filaUtilidad(etiqueta, valor){
      const perdida = valor < 0;
      return `<tr class="fila-utilidad ${perdida?'perdida':''}">
        <td colspan="4">${etiqueta}</td>
        <td class="mono">${fmtSigno(valor)}</td>
      </tr>`;
    }

filtradas.forEach(c=>{
      if (c.tipo !== tipoActual){
        if (c.tipo === 'Gasto' && !brutaInsertada){
          filas += filaUtilidad('UTILIDAD BRUTA', RESUMEN.utilidad_bruta);
          brutaInsertada = true;
        }
        tipoActual = c.tipo;
        const etiquetaGrupo = tipoActual === 'Ingreso' ? 'Ingresos' : tipoActual === 'Costo' ? 'Costos (– de los ingresos netos)' : 'Gastos (– de la utilidad bruta)';
        filas += `<tr class="fila-grupo"><td colspan="5">${etiquetaGrupo}</td></tr>`;
      }
      const sangria = '<span class="sangria">' + '—'.repeat(Math.max(0,c.nivel-1)) + '</span>';
      filas += `<tr class="fila-cuenta ${c.esHoja?'':'es-padre'}">
        <td class="codigo mono">${c.codigo}</td>
        <td>${sangria}${c.nombre}</td>
        <td class="mono col-divider ${c.mv_d?'':'cero'}">${c.mv_d?fmt(c.mv_d):'—'}</td>
        <td class="mono ${c.mv_h?'':'cero'}">${c.mv_h?fmt(c.mv_h):'—'}</td>
        <td class="mono">${fmtSigno(c.saldo_periodo)}</td>
      </tr>`;
    });
    if (!brutaInsertada && filtradas.length){
      filas += filaUtilidad('UTILIDAD BRUTA', RESUMEN.utilidad_bruta);
    }
    if (filtradas.length){
      filas += filaUtilidad(RESUMEN.utilidad_neta < 0 ? 'PÉRDIDA NETA DEL PERÍODO' : 'UTILIDAD NETA DEL PERÍODO', RESUMEN.utilidad_neta);
    }
    tbody.innerHTML = filas;

const ICONO_DESCARGA = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>';
  const ICONO_PROCESANDO = '<svg class="girando" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-3-6.7"/></svg>';
  const ICONO_LISTO = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M20 6 9 17l-5-5"/></svg>';
  const ICONO_ERROR = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg>';

btn.disabled = true;
    icono.outerHTML = ICONO_PROCESANDO.replace('<svg ', '<svg id="icono-exportar" ');
    texto.textContent = 'Generando…';

const desde = document.getElementById('f-desde').value;
    const hasta = document.getElementById('f-hasta').value;
    const detalle = document.getElementById('f-detalle').checked;

try{
      const params = new URLSearchParams({ fecha_inicio: desde, fecha_fin: hasta, detalle });
      const resp = await fetch(`${API_BASE}/estado-resultados/excel?${params}`);

if (!resp.ok){
        let detalleErr = `El servidor respondió ${resp.status}`;
        try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalleErr = cuerpo.detail; }catch(e){}
        throw new Error(detalleErr);
      }

const disposicion = resp.headers.get('Content-Disposition') || '';
      const match = disposicion.match(/filename="?([^"]+)"?/);
      const nombreArchivo = match ? match[1] : `estado_resultados_${desde}_a_${hasta}.xlsx`;

}catch(err){
      const esConexion = err instanceof TypeError;
      document.getElementById('icono-exportar').outerHTML = ICONO_ERROR.replace('<svg ', '<svg id="icono-exportar" ');
      document.getElementById('texto-exportar').textContent = esConexion
        ? 'No se pudo conectar al backend (¿está corriendo uvicorn?)'
        : `Error: ${err.message}`;
      volverANormal(4000);
    }
  }

async function cargarDatos(){
    const desde = document.getElementById('f-desde').value;
    const hasta = document.getElementById('f-hasta').value;
    const detalle = document.getElementById('f-detalle').checked;

document.getElementById('tbody-estado').innerHTML =
      `<tr><td colspan="5" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    document.getElementById('empty-state').style.display = 'none';

try{
      const params = new URLSearchParams({ fecha_inicio: desde, fecha_fin: hasta, detalle });
      const resp = await fetch(`${API_BASE}/estado-resultados?${params}`);
      if (!resp.ok){
        let detalleErr = `El servidor respondió ${resp.status}`;
        try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalleErr = cuerpo.detail; }catch(e){}
        throw new Error(detalleErr);
      }
      const cuerpo = await resp.json();
      EMPRESA = cuerpo.empresa_nombre;
      DATOS = cuerpo.filas.map(normalizarFila);
      RESUMEN = {
        ingresos_netos: Number(cuerpo.ingresos_netos), costos: Number(cuerpo.costos),
        utilidad_bruta: Number(cuerpo.utilidad_bruta), gastos: Number(cuerpo.gastos),
        utilidad_neta: Number(cuerpo.utilidad_neta),
      };
      render();
    }catch(err){
      const esConexion = err instanceof TypeError;
      const mensaje = esConexion ? 'No se pudo conectar al backend (¿está corriendo uvicorn?)' : `Error: ${err.message}`;
      document.getElementById('tbody-estado').innerHTML =
        `<tr><td colspan="5" style="text-align:center; padding:32px; color:var(--red-ink);">${mensaje}</td></tr>`;
      DATOS = [];
      RESUMEN = { ingresos_netos:0, costos:0, utilidad_bruta:0, gastos:0, utilidad_neta:0 };
      render();
    }
  }

document.getElementById('btn-imprimir').addEventListener('click', ()=> window.print());
  document.getElementById('f-texto').addEventListener('input', render);
  document.getElementById('f-desde').addEventListener('change', cargarDatos);
  document.getElementById('f-hasta').addEventListener('change', cargarDatos);
  document.getElementById('f-detalle').addEventListener('change', cargarDatos);
  document.getElementById('btn-exportar').addEventListener('click', exportarExcel);

cargarDatos();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Cuentas Contables</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1180px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
    position:sticky; top:0; z-index:220;
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:150px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.table-wrap{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow);
    /* overflow-x:auto por sí solo ya vuelve a overflow-y "auto" también (regla de la spec de
       CSS: si un eje es "visible" y el otro no, el "visible" se convierte en "auto") -- eso
       hacía que .table-wrap fuera su propio contenedor de scroll a ojos de position:sticky,
       pero sin max-height nunca llegaba a scrollear de verdad, así que el thead sticky de
       abajo quedaba inerte (no se pegaba a nada). Con max-height explícito, .table-wrap pasa
       a ser un panel real con su propio scroll interno debajo de la barra de filtros (que ya
       es sticky), y el thead sí se pega al tope de ESE panel al scrollear el catálogo. */
    max-height:var(--tabla-max-h, 60vh); overflow-y:auto;
  }
  table{border-collapse:collapse; width:100%; min-width:920px;}
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--ink-muted); font-weight:600; padding:11px 14px;
    border-bottom:1px solid var(--line-strong); background:var(--surface-2);
    position:sticky; top:0; z-index:150;
  }
  th.num, td.num{text-align:right;}
  tbody td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--surface-2);}
  .padre-cell{color:var(--ink-muted);}
  .nivel-cell{color:var(--ink-muted); text-align:center;}

.row-actions{display:flex; gap:4px;}
  .icon-btn{
    border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
    width:30px; height:30px; border-radius:7px; display:inline-flex; align-items:center;
    justify-content:center; cursor:pointer; transition:transform .08s ease, filter .08s ease;
  }
  .icon-btn:hover{color:var(--ink); border-color:var(--ink-muted);}
  .icon-btn:active{transform:scale(0.90);}
  .icon-btn.danger:hover{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .icon-btn svg{width:15px; height:15px;}

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}
  .foot-note{font-size:12px; color:var(--ink-muted); margin-top:12px;}

.modal-box.form-box{max-width:480px;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px; position:relative;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input[type="text"], .form-field input[type="number"], .form-field select, .form-field textarea{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%; font-family:inherit;
  }
  .form-row{display:flex; gap:14px;}
  .form-row .form-field{flex:1;}
  .form-field textarea{resize:vertical; min-height:56px;}
  .form-field.checkbox label{
    display:flex; align-items:center; gap:8px; text-transform:none;
    letter-spacing:normal; font-size:13.5px; color:var(--ink);
  }
  .form-field input[disabled], .form-field select[disabled], .form-field textarea[disabled]{opacity:.6; cursor:not-allowed;}
  .form-audit{
    font-size:12px; color:var(--ink-muted); border-top:1px solid var(--line);
    margin-top:4px; padding-top:12px; line-height:1.7;
  }
  .form-aviso{
    font-size:12px; color:var(--amber-ink); background:var(--amber-bg); border:1px solid var(--amber-line);
    border-radius:7px; padding:8px 10px; margin-bottom:14px; line-height:1.5;
  }

.form-padre-hint{font-size:12px; line-height:1.5; margin-top:6px; border-radius:7px; padding:7px 9px;}
  .form-padre-hint.info{color:var(--accent); background:var(--accent-soft);}
  .form-padre-hint.aviso{color:var(--amber-ink); background:var(--amber-bg); border:1px solid var(--amber-line);}
  .form-padre-toggle{
    display:flex; align-items:center; gap:7px; margin-top:8px;
    text-transform:none; letter-spacing:normal; font-size:12px; color:var(--ink-muted); cursor:pointer;
  }

.cuenta-picker{position:relative;}
  .cuenta-sugerencias{
    display:none; position:fixed; background:var(--surface); border:1px solid var(--line-strong);
    border-radius:9px; box-shadow:var(--shadow); max-height:280px; overflow-y:auto; z-index:450;
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  .cuenta-sugerencias.abierta{display:block;}
  .sug-item{
    display:flex; flex-direction:column; gap:1px; padding:8px 12px; cursor:pointer;
    border-bottom:1px solid var(--line);
  }
  .sug-item:last-child{border-bottom:none;}
  .sug-item:hover, .sug-item.activa{background:var(--accent-soft);}
  .sug-nombre{font-size:13.5px; color:var(--ink);}
  .sug-nombre mark{background:transparent; color:var(--accent); font-weight:700; padding:0;}
  .sug-meta{font-size:11px; color:var(--ink-muted);}
  .sug-meta .sug-codigo{color:var(--ink-muted);}
  .sug-vacio{padding:14px 12px; font-size:13px; color:var(--ink-muted); text-align:center;}
  .sug-ninguna{border-bottom:1px solid var(--line-strong);}
  .sug-ninguna .sug-nombre{color:var(--accent); font-style:italic;}
  .sug-mas{padding:7px 12px; font-size:11.5px; color:var(--ink-muted); text-align:center; border-top:1px solid var(--line);}

.print-header{display:none;}

@media print{
    @page{ margin: 1.5cm; }
    .topbar, .filters, .row-actions, .no-print{display:none !important;}
    .print-header{display:block; margin-bottom:14px;}
    .print-header .titulo{font-family:Georgia,serif; font-size:18px; font-weight:700;}
    .print-header .sub{font-size:12px; color:#000; margin-top:2px;}
    body{background:#fff; color:#000;}
    .app{max-width:none; padding:0;}
    .table-wrap{box-shadow:none; border:1px solid #000; max-height:none !important; overflow:visible !important;}
    thead th{background:none !important; border-color:#000 !important;}
    tbody td{color:#000 !important;}
    .padre-cell, .nivel-cell{color:#000 !important;}
    .pill{background:none !important; border:1px solid #000 !important; color:#000 !important;}
  }
  .fenix-toast{
    position:fixed; bottom:24px; right:24px; z-index:300;
    background:var(--accent); color:var(--accent-ink); padding:11px 18px; border-radius:8px;
    box-shadow:var(--shadow); font-size:13.5px; font-weight:600;
    display:flex; align-items:center; gap:8px;
    opacity:0; transform:translateY(10px); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .fenix-toast.visible{ opacity:1; transform:translateY(0); }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Cuentas Contables</span>
    </div>
    <div class="crumbs"><b>Contabilidad</b> / Configuración / Cuentas contables</div>
  </div>

<div class="print-header">
    <div class="titulo">Cuentas Contables</div>
    <div class="sub">Sistemas Rodríguez y Asociados — <span id="print-filtros"></span></div>
  </div>

<div class="filters">
    <div class="field">
      <label for="f-tipo">Tipo</label>
      <select id="f-tipo">
        <option value="">Todos</option>
        <option value="Activo">Activo</option>
        <option value="Pasivo">Pasivo</option>
        <option value="Patrimonio">Patrimonio</option>
        <option value="Ingreso">Ingreso</option>
        <option value="Costo">Costo</option>
        <option value="Gasto">Gasto</option>
        <option value="Cuenta de órden">Cuentas de Orden</option>
      </select>
    </div>
    <div class="field texto">
      <label for="f-nombre">Nombre</label>
      <input type="text" id="f-nombre" placeholder="ej. general" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-codigo">Código</label>
      <input type="text" id="f-codigo" placeholder="ej. 1-1-01" autocomplete="off" style="width:130px;">
    </div>
    <div class="field">
      <label for="f-activa">Activas</label>
      <select id="f-activa">
        <option value="">Todas</option>
        <option value="true">Sí</option>
        <option value="false">No</option>
      </select>
    </div>
    <div class="spacer"></div>
    <a class="btn btn-ghost no-print" id="btn-volver" data-nav-shell="asientos" href="asientos_ui.html">‹ Volver</a>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-ghost no-print" id="btn-imprimir">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M6 9V2h12v7M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 14h12v8H6z"/></svg>
      Imprimir
    </button>
    <button class="btn btn-ghost no-print" id="btn-exportar">
      <svg id="icono-exportar" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
      <span id="texto-exportar">Exportar a Excel</span>
    </button>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nuevo</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Código</th>
          <th>Nombre</th>
          <th>Tipo</th>
          <th>Cuenta padre</th>
          <th class="nivel-cell">Nivel</th>
          <th>Movimientos</th>
          <th class="num">Saldo</th>
          <th>Activa</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay cuentas con estos filtros</b>
      Ajusta los filtros, o límpialos para ver todas.
    </div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div class="form-aviso" id="form-aviso-movimientos" style="display:none;">
      Esta cuenta ya tiene asientos aplicados -- el tipo, código y cuenta padre quedan fijos para
      no alterar reportes históricos ya emitidos. Solo se puede modificar el nombre, si acepta
      movimientos, y si está activa.
    </div>

<div class="form-row">
      <div class="form-field">
        <label for="form-tipo">Tipo</label>
        <select id="form-tipo">
          <option value="Activo">Activo</option>
          <option value="Pasivo">Pasivo</option>
          <option value="Patrimonio">Patrimonio</option>
          <option value="Ingreso">Ingreso</option>
          <option value="Costo">Costo</option>
          <option value="Gasto">Gasto</option>
          <option value="Cuenta de órden">Cuenta de Orden</option>
        </select>
      </div>
      <div class="form-field">
        <label for="form-codigo">Código</label>
        <input type="text" id="form-codigo" class="mono" placeholder="ej. 1-1-01-01-04">
      </div>
    </div>

<div class="form-field cuenta-picker">
      <label for="form-padre-input">Cuenta contable padre</label>
      <input type="text" id="form-padre-input" autocomplete="off" placeholder="— Ninguna (cuenta raíz) — escriba para buscar…">
      <input type="hidden" id="form-padre-id">
      <div class="cuenta-sugerencias" id="form-padre-sugerencias"></div>
      <div class="form-padre-hint" id="form-padre-hint" style="display:none;"></div>
      <label class="form-padre-toggle"><input type="checkbox" id="form-ayuda-padre" checked> Sugerir la cuenta padre a partir del código</label>
    </div>

<div class="form-field">
      <label for="form-nombre">Nombre</label>
      <input type="text" id="form-nombre">
    </div>

<div class="form-row">
      <div class="form-field checkbox">
        <label><input type="checkbox" id="form-acepta-movimientos" checked> Acepta movimientos</label>
      </div>
      <div class="form-field checkbox">
        <label><input type="checkbox" id="form-activa" checked> Activa</label>
      </div>
    </div>

<div class="form-field">
      <label for="form-saldo">Saldo</label>
      <input type="text" id="form-saldo" class="mono" disabled style="text-align:right;">
    </div>

<div class="form-audit" id="form-audit" style="display:none;"></div>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="form-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="form-guardar">Guardar</button>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>
<script>
(function(){
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador'; // no hay sesión/login todavía -- placeholder de trazabilidad
  const API_CUENTAS = '/contabilidad/cuentas-contables';
  const fmt = n => Number(n || 0).toLocaleString('es-CR', {minimumFractionDigits:2, maximumFractionDigits:2});

function resaltar(texto, query){
    const idx = texto.toUpperCase().indexOf(query.toUpperCase());
    if (idx === -1) return texto;
    return texto.slice(0,idx) + '<mark>' + texto.slice(idx, idx+query.length) + '</mark>' + texto.slice(idx+query.length);
  }

// ---------------- Catálogo completo (para el picker de padre y sugerir código) ----------------
  let TODAS_CUENTAS = [];
  async function cargarTodasCuentas(){
    try{ TODAS_CUENTAS = await llamarApi(API_CUENTAS); }
    catch(e){ TODAS_CUENTAS = []; }
  }

function nombrePadreDe(codigo){
    const segs = codigo.split('-');
    if (segs.length <= 1) return null;
    const codigoPadre = segs.slice(0,-1).join('-');
    const padre = TODAS_CUENTAS.find(c => c.codigo === codigoPadre);
    return padre ? padre.nombre : null;
  }

// ---------------- Picker de cuenta padre (mismo patrón que asientos_ui.html) ----------------
  const padreInput = document.getElementById('form-padre-input');
  const padreOculto = document.getElementById('form-padre-id');
  const padreSugerencias = document.getElementById('form-padre-sugerencias');
  const padreHint = document.getElementById('form-padre-hint');
  const ayudaPadreCheckbox = document.getElementById('form-ayuda-padre');
  let excluirIdPadre = null;

// Si Fénix ya rellenó el padre solo (sugerencia automática a partir del código), sigue
  // libre para corregirla mientras el usuario sigue tecleando el código. En cuanto el
  // usuario elige un padre a mano (clic en el picker, o escribe directo en el campo), esta
  // bandera pasa a false y la sugerencia automática deja de tocar ese campo -- nunca debe
  // pisar una elección explícita del usuario.
  let padreEsSugerenciaAutomatica = false;

const CLAVE_AYUDA_PADRE = 'fenix-cc-ayuda-padre';
  ayudaPadreCheckbox.checked = localStorage.getItem(CLAVE_AYUDA_PADRE) !== 'no';
  ayudaPadreCheckbox.addEventListener('change', ()=>{
    localStorage.setItem(CLAVE_AYUDA_PADRE, ayudaPadreCheckbox.checked ? 'si' : 'no');
    if (!ayudaPadreCheckbox.checked) ocultarPadreHint();
  });

function ocultarPadreHint(){ padreHint.style.display = 'none'; padreHint.className = 'form-padre-hint'; }
  function mostrarPadreHint(texto, tipo){
    padreHint.textContent = texto;
    padreHint.className = 'form-padre-hint ' + tipo;
    padreHint.style.display = 'block';
  }

// A partir de un código como "1-5-01-01", intuye que su padre debería ser "1-5-01" -- si
  // esa cuenta ya existe y todavía puede tener hijas (no acepta movimientos), se rellena
  // sola; si existe pero acepta movimientos, se le explica al usuario por qué no puede
  // usarla como padre en vez de dejarlo adivinar (pedido explícito del usuario: "que Fénix
  // esté en todas"). El checkbox de arriba apaga esto por completo si alguien lo prefiere
  // manual, como funcionaba antes.
  function sugerirPadrePorCodigo(){
    if (!ayudaPadreCheckbox.checked) return;
    if (padreOculto.value && !padreEsSugerenciaAutomatica) return; // el usuario ya eligió padre a mano -- no tocar

const codigo = formCodigo.value.trim();
    if (!/^[0-9]+(-[0-9]+)*$/.test(codigo)){ ocultarPadreHint(); return; }
    const segs = codigo.split('-');
    if (segs.length <= 1){ ocultarPadreHint(); return; } // cuenta raíz -- sin padre que sugerir
    const codigoPadre = segs.slice(0, -1).join('-');
    const candidato = TODAS_CUENTAS.find(c => c.codigo === codigoPadre && c.id !== excluirIdPadre);

if (!candidato){ ocultarPadreHint(); return; }

if (candidato.acepta_movimientos){
      padreEsSugerenciaAutomatica = false;
      mostrarPadreHint(
        `La cuenta ${candidato.codigo} — ${candidato.nombre} coincide como padre, pero acepta movimientos y por eso no puede tener cuentas hijas. Desactive "Acepta movimientos" en esa cuenta, o elija otra cuenta padre.`,
        'aviso'
      );
      return;
    }

padreInput.value = `${candidato.codigo} — ${candidato.nombre}`;
    padreOculto.value = candidato.id;
    padreEsSugerenciaAutomatica = true;
    aplicarBloqueoTipoPorPadre(candidato.tipo);
    mostrarPadreHint(`Sugerida automáticamente a partir del código -- puede cambiarla si no es correcta.`, 'info');
  }

function cerrarSugerenciasPadre(){ padreSugerencias.classList.remove('abierta'); padreSugerencias.innerHTML = ''; }

function posicionarSugerenciasPadre(){
    const r = padreInput.getBoundingClientRect();
    padreSugerencias.style.top = (r.bottom + 4) + 'px';
    padreSugerencias.style.left = r.left + 'px';
    padreSugerencias.style.width = Math.max(r.width, 280) + 'px';
  }
  window.addEventListener('scroll', ()=>{ if (padreSugerencias.classList.contains('abierta')) cerrarSugerenciasPadre(); }, true);

function buscarPadre(){
    const q = padreInput.value.trim();
    padreOculto.value = '';
    padreEsSugerenciaAutomatica = false;
    ocultarPadreHint();
    aplicarBloqueoTipoPorPadre(null);
    const ql = q.toUpperCase();
    // Solo cuentas que todavía pueden tener hijas (si ya acepta movimientos, el motor de
    // asientos la rechazaría como padre) y nunca la propia cuenta que se está editando.
    const candidatas = TODAS_CUENTAS
      .filter(c => !c.acepta_movimientos && c.id !== excluirIdPadre)
      .filter(c => q.length === 0 || c.nombre.toUpperCase().includes(ql) || c.codigo.startsWith(q))
      .sort((a,b)=> a.nombre.localeCompare(b.nombre, 'es'));

posicionarSugerenciasPadre();

// Opción "sin padre" siempre visible y siempre primera -- una cuenta raíz nueva (ej. la
    // primera cuenta "1 ACTIVO" del catálogo de una empresa recién creada) no tiene ningún
    // grupo al que pertenecer, y antes de este cambio no había ningún elemento en el que
    // hacer clic para confirmar eso -- el usuario tenía que confiar en dejar el campo vacío
    // sin ninguna señal de que era una opción válida (bug real reportado).
    const opcionNinguna = `<div class="sug-item sug-ninguna" data-id="">
      <span class="sug-nombre">— Ninguna (cuenta raíz) —</span>
      <span class="sug-meta">Para el primer nivel del catálogo (ej. 1 ACTIVO, 2 PASIVO…)</span>
    </div>`;

let cuerpoHtml;
    if (candidatas.length === 0){
      cuerpoHtml = q.length > 0 ? `<div class="sug-vacio">Ninguna cuenta de grupo contiene "${q}"</div>` : '';
    } else {
      const resultados = candidatas.slice(0, 20);
      cuerpoHtml = resultados.map(c=>{
        const padre = nombrePadreDe(c.codigo);
        return `<div class="sug-item" data-id="${c.id}" data-codigo="${c.codigo}" data-nombre="${c.nombre.replace(/"/g,'&quot;')}" data-tipo="${c.tipo}">
          <span class="sug-nombre">${resaltar(c.nombre, q)}</span>
          <span class="sug-meta"><span class="mono sug-codigo">${c.codigo}</span> · ${c.tipo}${padre ? ` · ${padre}` : ''}</span>
        </div>`;
      }).join('') + (candidatas.length > 20 ? `<div class="sug-mas">+${candidatas.length-20} más — siga escribiendo para afinar</div>` : '');
    }
    padreSugerencias.innerHTML = opcionNinguna + cuerpoHtml;
    padreSugerencias.classList.add('abierta');

padreSugerencias.querySelector('.sug-ninguna').addEventListener('mousedown', e=>{
      e.preventDefault();
      padreInput.value = '';
      padreOculto.value = '';
      padreEsSugerenciaAutomatica = false;
      ocultarPadreHint();
      cerrarSugerenciasPadre();
      aplicarBloqueoTipoPorPadre(null);
    });
    padreSugerencias.querySelectorAll('.sug-item:not(.sug-ninguna)').forEach(item=>{
      item.addEventListener('mousedown', e=>{
        e.preventDefault();
        padreInput.value = `${item.dataset.codigo} — ${item.dataset.nombre}`;
        padreOculto.value = item.dataset.id;
        padreEsSugerenciaAutomatica = false;
        ocultarPadreHint();
        cerrarSugerenciasPadre();
        aplicarBloqueoTipoPorPadre(item.dataset.tipo);
        if (formModo === 'nuevo' && !formCodigo.value.trim()){
          formCodigo.value = sugerirCodigo(Number(item.dataset.id));
        }
      });
    });
  }
  padreInput.addEventListener('input', buscarPadre);
  padreInput.addEventListener('focus', ()=>{ if (!padreOculto.value) buscarPadre(); });
  padreInput.addEventListener('blur', ()=> setTimeout(()=>{ cerrarSugerenciasPadre(); if (!padreOculto.value) padreInput.value=''; }, 150));
  padreInput.addEventListener('keydown', e=>{ if (e.key === 'Escape') cerrarSugerenciasPadre(); });

let formModo = 'nuevo';
  let formIdEditando = null;
  let estructuralesBloqueados = false;

formCodigo.addEventListener('input', sugerirPadrePorCodigo);

function ponerSoloLectura(soloLectura){
    formTipo.disabled = soloLectura || estructuralesBloqueados;
    formCodigo.disabled = soloLectura || estructuralesBloqueados;
    padreInput.disabled = soloLectura || estructuralesBloqueados;
    formNombre.disabled = soloLectura;
    formAceptaMovimientos.disabled = soloLectura;
    formActiva.disabled = soloLectura;
  }

function abrirFormulario(modo, registro){
    formModo = modo;
    formIdEditando = registro ? registro.id : null;
    excluirIdPadre = registro ? registro.id : null;
    estructuralesBloqueados = modo === 'modificar' && registro && registro.tiene_movimientos;
    padreEsSugerenciaAutomatica = false;
    ocultarPadreHint();

formTipo.value = registro ? registro.tipo : 'Activo';
    formCodigo.value = registro ? registro.codigo : '';
    formNombre.value = registro ? registro.nombre : '';
    formAceptaMovimientos.checked = registro ? registro.acepta_movimientos : true;
    formActiva.checked = registro ? registro.activa : true;
    formSaldo.value = registro ? `${fmt(registro.saldo)} CRC` : `${fmt(0)} CRC`;

if (registro && registro.cuenta_padre_id){
      padreInput.value = `${registro.cuenta_padre_codigo} — ${registro.cuenta_padre_nombre}`;
      padreOculto.value = registro.cuenta_padre_id;
    } else {
      padreInput.value = '';
      padreOculto.value = '';
    }

formAvisoMovimientos.style.display = estructuralesBloqueados ? 'block' : 'none';

if (modo === 'ver'){
      formTitulo.textContent = 'Ver — Cuenta Contable';
      ponerSoloLectura(true);
      formGuardar.style.display = 'none';
      formCancelar.textContent = 'Cerrar';
    } else {
      formTitulo.textContent = modo === 'nuevo' ? 'Nueva — Cuenta Contable' : 'Modificar — Cuenta Contable';
      ponerSoloLectura(false);
      formGuardar.style.display = '';
      formCancelar.textContent = 'Cancelar';
    }

formOverlay.classList.add('abierto');
    setTimeout(()=> { if (modo === 'nuevo') formCodigo.focus(); else if (modo !== 'ver') formNombre.focus(); }, 30);
  }
  function cerrarFormulario(){ formOverlay.classList.remove('abierto'); cerrarSugerenciasPadre(); }
  formCancelar.onclick = cerrarFormulario;
  document.addEventListener('keydown', e=>{ if (e.key === 'Escape' && formOverlay.classList.contains('abierto')) cerrarFormulario(); });

formGuardar.onclick = async ()=>{
    const nombre = formNombre.value.trim();
    const codigo = formCodigo.value.trim();
    if (!estructuralesBloqueados){
      if (!codigo){ await modalAlert('El código es obligatorio.'); formCodigo.focus(); return; }
      if (!/^[0-9]+(-[0-9]+)*$/.test(codigo)){ await modalAlert('El código debe ser numérico, con segmentos separados por guion (ej. 1-1-01-01).'); formCodigo.focus(); return; }
    }
    if (!nombre){ await modalAlert('El nombre es obligatorio.'); formNombre.focus(); return; }

let cuerpo;
    if (formModo === 'nuevo'){
      cuerpo = {
        tipo: formTipo.value,
        codigo,
        nombre,
        cuenta_padre_id: padreOculto.value ? Number(padreOculto.value) : null,
        acepta_movimientos: formAceptaMovimientos.checked,
        activa: formActiva.checked,
        creado_por: USUARIO_ACTUAL,
      };
    } else {
      cuerpo = {
        nombre,
        acepta_movimientos: formAceptaMovimientos.checked,
        activa: formActiva.checked,
        modificado_por: USUARIO_ACTUAL,
      };
      if (!estructuralesBloqueados){
        cuerpo.tipo = formTipo.value;
        cuerpo.codigo = codigo;
        cuerpo.cuenta_padre_id = padreOculto.value ? Number(padreOculto.value) : null;
      }
    }

formGuardar.disabled = true;
    formGuardar.textContent = 'Guardando…';
    try{
      if (formModo === 'nuevo'){
        await llamarApi(API_CUENTAS, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(cuerpo)});
      } else {
        await llamarApi(`${API_CUENTAS}/${formIdEditando}`, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(cuerpo)});
      }
      mostrarToast('✓ Guardado'); cerrarFormulario();
      await cargarTodasCuentas();
      await cargar();
    } catch(e){
      await modalAlert(e.message, 'No se pudo guardar');
    } finally {
      formGuardar.disabled = false;
      formGuardar.textContent = 'Guardar';
    }
  };

// ---------------- Listado ----------------
  const tbody = document.getElementById('tbody-registros');
  const emptyState = document.getElementById('empty-state');
  const footNote = document.getElementById('foot-note');
  let REGISTROS = [];

function pillActiva(activa){
    return activa
      ? `<span class="pill pill-aplicado">Activa</span>`
      : `<span class="pill pill-anulado">Inactiva</span>`;
  }
  function pillMovimientos(acepta){
    return acepta
      ? `<span class="pill pill-aplicado">Sí</span>`
      : `<span class="pill pill-anulado">No</span>`;
  }

function valoresFiltros(){
    return {
      tipo: document.getElementById('f-tipo').value,
      nombre: document.getElementById('f-nombre').value.trim(),
      codigo: document.getElementById('f-codigo').value.trim(),
      activa: document.getElementById('f-activa').value,
    };
  }

function construirQuery(){
    const params = new URLSearchParams();
    const f = valoresFiltros();
    if (f.tipo) params.set('tipo', f.tipo);
    if (f.nombre) params.set('nombre', f.nombre);
    if (f.codigo) params.set('codigo', f.codigo);
    if (f.activa) params.set('activa', f.activa);
    return params.toString();
  }

// Mismo texto que arma _descripcion_filtros() en el backend, para que la cabecera de
  // impresión (fenix-principios-ux, Principio 2) diga exactamente lo que se filtró.
  function descripcionFiltros(){
    const f = valoresFiltros();
    const partes = [];
    if (f.tipo) partes.push(`Tipo: ${f.tipo === 'Cuenta de órden' ? 'Cuenta de Orden' : f.tipo}`);
    if (f.nombre) partes.push(`Nombre contiene "${f.nombre}"`);
    if (f.codigo) partes.push(`Código contiene "${f.codigo}"`);
    if (f.activa) partes.push(f.activa === 'true' ? 'Solo activas' : 'Solo inactivas');
    return partes.length ? partes.join(' · ') : 'Todas las cuentas contables';
  }

async function cargar(){
    tbody.innerHTML = `<tr><td colspan="9" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    emptyState.style.display = 'none';
    try{
      REGISTROS = await llamarApi(`${API_CUENTAS}?${construirQuery()}`);
      if (REGISTROS.length === 0){
        tbody.innerHTML = '';
        emptyState.style.display = 'block';
      } else {
        tbody.innerHTML = REGISTROS.map(filaHtml).join('');
      }
      footNote.textContent = `${REGISTROS.length} cuenta${REGISTROS.length === 1 ? '' : 's'} contable${REGISTROS.length === 1 ? '' : 's'}`;
      document.getElementById('print-filtros').textContent = descripcionFiltros();
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="9" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      footNote.textContent = '';
    }
  }

tbody.addEventListener('click', async (ev)=>{
    const btn = ev.target.closest('button[data-accion]');
    if (!btn) return;
    const id = Number(btn.dataset.id);
    const registro = REGISTROS.find(r=>r.id === id);
    const accion = btn.dataset.accion;

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar la cuenta "${registro.codigo} — ${registro.nombre}"? Si tiene asientos aplicados o cuentas hijas, no se podrá eliminar y se sugerirá desactivarla en su lugar.`,
        'Eliminar cuenta contable', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${API_CUENTAS}/${id}`, {method:'DELETE'});
        await cargarTodasCuentas();
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

document.getElementById('f-tipo').addEventListener('change', cargar);
  document.getElementById('f-activa').addEventListener('change', cargar);
  document.getElementById('f-nombre').addEventListener('input', ()=>{
    clearTimeout(window.__debounceCC);
    window.__debounceCC = setTimeout(cargar, 350);
  });
  document.getElementById('f-codigo').addEventListener('input', ()=>{
    clearTimeout(window.__debounceCC2);
    window.__debounceCC2 = setTimeout(cargar, 350);
  });

document.getElementById('btn-refrescar').addEventListener('click', async (ev)=>{
    const icono = ev.currentTarget.querySelector('svg');
    icono.classList.add('girando');
    await cargarTodasCuentas();
    await cargar();
    icono.classList.remove('girando');
  });

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

// Mismo patrón de 3 estados (normal -> procesando -> confirmado) que balanza_ui.html --
  // el .xlsx real (colores, jerarquía, fórmulas) lo arma el backend con openpyxl
  // (xlsx_cuentas_contables.py), reusando el mismo saldo ya calculado que ve la pantalla.
  const ICONO_DESCARGA = '<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>';
  const ICONO_PROCESANDO = '<svg class="girando" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-3-6.7"/></svg>';
  const ICONO_LISTO = '<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M20 6 9 17l-5-5"/></svg>';
  const ICONO_ERROR = '<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg>';

async function exportarExcel(){
    const btn = document.getElementById('btn-exportar');
    let icono = document.getElementById('icono-exportar');
    const texto = document.getElementById('texto-exportar');

btn.disabled = true;
    icono.outerHTML = ICONO_PROCESANDO.replace('<svg ', '<svg id="icono-exportar" ');
    texto.textContent = 'Generando…';

try{
      const resp = await fetch(`${API_BASE}${API_CUENTAS}/excel?${construirQuery()}`);
      if (!resp.ok){
        let detalle = `El servidor respondió ${resp.status}`;
        try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
        throw new Error(detalle);
      }

const disposicion = resp.headers.get('Content-Disposition') || '';
      const match = disposicion.match(/filename="?([^"]+)"?/);
      const nombreArchivo = match ? match[1] : 'cuentas_contables.xlsx';

// La barra de filtros es sticky (para que "+ Nuevo" nunca se pierda de vista al scrollear
  // el catálogo -- fenix-principios-ux, Principio 4). Para que el encabezado de la tabla
  // también se quede fijo, .table-wrap necesita un max-height real (ver comentario en el CSS
  // de .table-wrap) -- se calcula en vivo restándole a la altura de la ventana todo lo que
  // ocupa alrededor (topbar, filtros, padding de .app, foot-note), para que el panel de la
  // tabla llene el resto de la pantalla sin adivinar un número fijo que se rompa con otro
  // tamaño de fuente o de ventana.
  const filtersEl = document.querySelector('.filters');
  const topbarEl = document.querySelector('.topbar');
  const appEl = document.querySelector('.app');
  function ajustarAlturaFiltros(){
    document.documentElement.style.setProperty('--filters-h', filtersEl.offsetHeight + 'px');
    const appStyle = getComputedStyle(appEl);
    const ocupadoFuera = topbarEl.offsetHeight + filtersEl.offsetHeight
      + parseFloat(appStyle.paddingTop) + parseFloat(appStyle.paddingBottom)
      + footNote.offsetHeight + 40; // margen entre topbar/filtros/tabla/foot-note
    document.documentElement.style.setProperty('--tabla-max-h', Math.max(240, window.innerHeight - ocupadoFuera) + 'px');
  }
  new ResizeObserver(ajustarAlturaFiltros).observe(filtersEl);
  window.addEventListener('resize', ajustarAlturaFiltros);

(async function iniciar(){
    await cargarTodasCuentas();
    await cargar();
    ajustarAlturaFiltros();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Parámetros Contables</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:980px; margin:0 auto; padding:0 24px 64px;}

.topbar{
    display:flex; align-items:baseline; justify-content:space-between;
    padding:28px 0 18px; border-bottom:2px solid var(--ink); margin-bottom:0;
    gap:16px; flex-wrap:wrap;
  }
  .brand{display:flex; align-items:baseline; gap:10px;}
  .brand h1{font-size:22px; letter-spacing:.2px;}
  .brand .sep{color:var(--line-strong);}
  .brand .empresa{font-size:14px; color:var(--ink-muted);}
  .crumbs{font-size:12.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.06em;}
  .crumbs b{color:var(--ink); font-weight:600;}

.actionbar{
    position:sticky; top:0; z-index:120;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
    background:var(--bg); padding:14px 0; margin:0 -24px; padding-left:24px; padding-right:24px;
    border-bottom:1px solid var(--line);
  }
  .actionbar .titulo{font-size:16px;}
  .actionbar .botones{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}

.btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.6; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.intro{font-size:13px; color:var(--ink-muted); line-height:1.6; margin:18px 0 22px;}

.section-card{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    box-shadow:var(--shadow); padding:18px 20px 6px; margin-bottom:18px;
  }
  .section-card h2{font-size:15.5px; margin-bottom:4px;}
  .section-nota{
    font-size:12px; color:var(--amber-ink); background:var(--amber-bg); border:1px solid var(--amber-line);
    border-radius:7px; padding:7px 10px; margin:8px 0 14px; line-height:1.5;
  }
  .campos-grid{display:grid; grid-template-columns:1fr 1fr; gap:4px 20px;}
  @media (max-width: 720px){ .campos-grid{grid-template-columns:1fr;} }

.form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px; position:relative;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input[type="text"]{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%; font-family:inherit;
  }
  .campo-nota{font-size:11px; color:var(--ink-muted); line-height:1.45;}

.fenix-toast{
    position:fixed; bottom:24px; right:24px; z-index:300;
    background:var(--accent); color:var(--accent-ink); padding:11px 18px; border-radius:8px;
    box-shadow:var(--shadow); font-size:13.5px; font-weight:600;
    display:flex; align-items:center; gap:8px;
    opacity:0; transform:translateY(10px); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .fenix-toast.visible{ opacity:1; transform:translateY(0); }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Parámetros Contables</span>
    </div>
    <div class="crumbs"><b>Contabilidad</b> / Configuración / Parámetros</div>
  </div>

<div class="actionbar">
    <div class="titulo"><b>Parámetros Contables</b></div>
    <div class="botones">
      <a class="btn btn-ghost" id="btn-volver" data-nav-shell="cuentascontables" href="cuentas_contables_ui.html">‹ Volver</a>
      <button class="btn btn-ghost" id="btn-refrescar" title="Refrescar">
        <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
        Refrescar
      </button>
      <button class="btn btn-primary" id="btn-guardar">Guardar</button>
    </div>
  </div>

<p class="intro">
    Cada cuenta aquí decide qué usa Fénix por defecto para ese proceso. Los campos marcados
    "sin uso todavía" quedan listos para cuando se construya el módulo que los necesita —
    guardarlos no cambia ningún comportamiento del sistema hoy.
  </p>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>

// ---------------- Modal propio ----------------
  const modalOverlay = document.getElementById('modal-overlay');
  const modalTitulo = document.getElementById('modal-titulo');
  const modalMensaje = document.getElementById('modal-mensaje');
  const modalCancelar = document.getElementById('modal-cancelar');
  const modalAceptar = document.getElementById('modal-aceptar');
  function mostrarModal({titulo, mensaje, tipo, botonAceptar}){
    return new Promise(resolve=>{
      modalTitulo.textContent = titulo;
      modalMensaje.textContent = mensaje;
      modalAceptar.textContent = botonAceptar || 'Aceptar';
      modalCancelar.style.display = tipo === 'alert' ? 'none' : '';
      function cerrar(valor){
        modalOverlay.classList.remove('abierto');
        modalAceptar.onclick = null; modalCancelar.onclick = null;
        document.removeEventListener('keydown', onKey);
        resolve(valor);
      }
      function onKey(e){ if (e.key === 'Escape') cerrar(false); }
      modalAceptar.onclick = ()=> cerrar(true);
      modalCancelar.onclick = ()=> cerrar(false);
      document.addEventListener('keydown', onKey);
      modalOverlay.classList.add('abierto');
      setTimeout(()=> modalAceptar.focus(), 30);
    });
  }
  function modalAlert(mensaje, titulo='Aviso'){
    return mostrarModal({titulo, mensaje, tipo:'alert', botonAceptar:'Entendido'});
  }
  let fenixToastTimer;
  function mostrarToast(mensaje){
    const el = document.getElementById('fenix-toast');
    document.getElementById('fenix-toast-texto').textContent = mensaje;
    el.classList.add('visible');
    clearTimeout(fenixToastTimer);
    fenixToastTimer = setTimeout(()=> el.classList.remove('visible'), 2200);
  }

// ---------------- Definición de las 9 secciones del machote (60 parámetros) ----------------
  const SECCIONES = [
    { titulo: 'Inventario y Compras', campos: [
      {clave:'cuenta_inventario', etiqueta:'Inventario de mercadería'},
      {clave:'cuenta_inventario_transito', etiqueta:'Inventario en tránsito', nota:'Sin uso en el sistema todavía — para cuando exista manufactura.'},
      {clave:'cuenta_inventario_produccion', etiqueta:'Inventario de producción', nota:'Sin uso en el sistema todavía — para cuando exista manufactura.'},
      {clave:'cuenta_inventario_proceso', etiqueta:'Inventario en proceso', nota:'Sin uso en el sistema todavía — para cuando exista manufactura.'},
      {clave:'cuenta_inventario_producto_terminado', etiqueta:'Inventario de producto terminado', nota:'Sin uso en el sistema todavía — para cuando exista manufactura.'},
      {clave:'cuenta_costo_ventas', etiqueta:'Costo de ventas'},
      {clave:'cuenta_liquidacion_costo_ventas', etiqueta:'Liquidación del costo de ventas', nota:'Informativo — el cierre fiscal ya ubica su propia cuenta puente, no lee este campo.'},
      {clave:'cuenta_compras_inventario', etiqueta:'Compras (entrada y salida de mercadería)'},
      {clave:'cuenta_iva_soportado', etiqueta:'IVA soportado en compras'},
      {clave:'cuenta_descuento_compra', etiqueta:'Descuento sobre compras'},
      {clave:'cuenta_padre_costos', etiqueta:'Cuenta padre de los costos', nota:'Informativo — sin uso en el sistema todavía.'},
      {clave:'cuenta_padre_descuento_compra', etiqueta:'Cuenta padre de los descuentos sobre compras', nota:'Sin uso en el sistema todavía.'},
      {clave:'cuenta_padre_devolucion_compra', etiqueta:'Devoluciones sobre compras', nota:'Sin uso en el sistema todavía — hoy la devolución se registra vía Nota a Proveedor, con la cuenta que se elige libremente en cada concepto.'},
    ]},
    { titulo: 'Ventas', campos: [
      {clave:'cuenta_venta_gravada', etiqueta:'Ventas gravadas'},
      {clave:'cuenta_venta_exenta', etiqueta:'Ventas exentas'},
      {clave:'cuenta_descuento_venta', etiqueta:'Descuento sobre ventas'},
      {clave:'cuenta_devolucion_venta_gravada', etiqueta:'Devolución sobre ventas gravadas'},
      {clave:'cuenta_devolucion_venta_exenta', etiqueta:'Devolución sobre ventas exentas'},
      {clave:'cuenta_anticipo_cliente', etiqueta:'Anticipos de clientes'},
      {clave:'cuenta_saldo_favor_cliente', etiqueta:'Cuentas por pagar / saldo a favor de clientes'},
      {clave:'cuenta_caja_general', etiqueta:'Efectivo (caja general)'},
      {clave:'cuenta_sobrante_caja', etiqueta:'Sobrantes de caja'},
      {clave:'cuenta_ganancia_cambiaria', etiqueta:'Ingreso por diferencial cambiario', nota:'El sistema ya usa esta cuenta hoy, pero por un código fijo en el código fuente (4-4-01) — todavía no lee este campo en vivo.'},
      {clave:'cuenta_impuesto_ventas', etiqueta:'Impuesto de ventas por pagar', nota:'Sin uso en el sistema todavía.'},
      {clave:'cuenta_cheques_transito', etiqueta:'Cheques en tránsito', nota:'Sin uso en el sistema todavía.'},
      {clave:'cuenta_descuento_general_cliente', etiqueta:'Descuentos generales a clientes', nota:'Sin uso en el sistema todavía.'},
      {clave:'cuenta_vuelto_cheque', etiqueta:'Vueltos en cheque', nota:'Sin uso en el sistema todavía.'},
      {clave:'cuenta_vuelto_transferencia', etiqueta:'Vueltos en transferencia', nota:'Sin uso en el sistema todavía.'},
      {clave:'cuenta_limpieza_saldo_cliente', etiqueta:'Limpieza de saldos de clientes', nota:'Sin uso en el sistema todavía.'},
      {clave:'cuenta_puntos', etiqueta:'Puntos', nota:'Sin uso en el sistema todavía.'},
    ]},
    { titulo: 'Cuentas por Cobrar y Crédito', campos: [
      {clave:'cuenta_cxc_local', etiqueta:'Cuentas por cobrar en colones'},
      {clave:'cuenta_cxc_extranjera', etiqueta:'Cuentas por cobrar en dólares'},
      {clave:'cuenta_intereses_moratorios', etiqueta:'Intereses moratorios', nota:'Sin uso en el sistema todavía.'},
      {clave:'cuenta_cobro_sin_medio_pago', etiqueta:'Cobro a clientes sin medio de pago', nota:'Sin uso en el sistema todavía.'},
      {clave:'cuenta_credito_local', etiqueta:'Operaciones de crédito en colones', nota:'Sección Crédito — módulo futuro, sin uso todavía.'},
      {clave:'cuenta_credito_extranjero', etiqueta:'Operaciones de crédito en dólares', nota:'Sección Crédito — módulo futuro, sin uso todavía.'},
      {clave:'cuenta_intereses_por_cobrar', etiqueta:'Intereses por cobrar a clientes', nota:'Sección Crédito — módulo futuro, sin uso todavía.'},
      {clave:'cuenta_intereses_cobrados_adelantado', etiqueta:'Intereses cobrados por adelantado', nota:'Sección Crédito — módulo futuro, sin uso todavía.'},
      {clave:'cuenta_intereses_ganados', etiqueta:'Intereses ganados a clientes', nota:'Sección Crédito — módulo futuro, sin uso todavía.'},
    ]},
    { titulo: 'Cuentas por Pagar y Proveeduría', campos: [
      {clave:'cuenta_cxp_local', etiqueta:'Cuentas por pagar en colones'},
      {clave:'cuenta_cxp_extranjera', etiqueta:'Cuentas por pagar en dólares'},
      {clave:'cuenta_anticipo_proveedor', etiqueta:'Anticipos a proveedores'},
      {clave:'cuenta_saldo_favor_proveedor', etiqueta:'Cuentas por cobrar / saldo a favor de proveedores'},
      {clave:'cuenta_perdida_cambiaria', etiqueta:'Gasto por diferencial cambiario', nota:'El sistema ya usa esta cuenta hoy, pero por un código fijo en el código fuente (6-5-04) — todavía no lee este campo en vivo.'},
      {clave:'cuenta_limpieza_saldo_proveedor', etiqueta:'Limpieza de saldos de proveedores', nota:'Sin uso en el sistema todavía.'},
      {clave:'cuenta_padre_gastos', etiqueta:'Cuenta padre de los gastos', nota:'Informativo — la jerarquía real ya vive en el propio catálogo de cuentas.'},
    ]},
    { titulo: 'Contabilidad', campos: [
      {clave:'cuenta_perdidas_ganancias', etiqueta:'Pérdidas y ganancias', nota:'Informativo — el cierre fiscal ya ubica su propia cuenta puente automáticamente.'},
    ]},
    { titulo: 'Taller', nota:'Módulo futuro — Fénix todavía no tiene un módulo de Taller. Este campo queda listo para cuando se construya.', campos: [
      {clave:'cuenta_gasto_taller', etiqueta:'Gasto de taller'},
    ]},
    { titulo: 'Nómina', nota:'Módulo futuro — Fénix todavía no tiene un módulo de Planillas/Nómina. Estos campos quedan listos para cuando se construya, mismo criterio ya usado con Inventario en tránsito/producción/proceso para Manufactura.', campos: [
      {clave:'cuenta_gasto_salario', etiqueta:'Gasto por salario'},
      {clave:'cuenta_feriados', etiqueta:'Feriados'},
      {clave:'cuenta_vacaciones', etiqueta:'Vacaciones'},
      {clave:'cuenta_incapacidades', etiqueta:'Incapacidades'},
      {clave:'cuenta_comisiones', etiqueta:'Comisiones'},
      {clave:'cuenta_beneficios', etiqueta:'Beneficios'},
      {clave:'cuenta_nominas_por_pagar', etiqueta:'Nóminas por pagar'},
      {clave:'cuenta_liquidaciones_por_pagar', etiqueta:'Liquidaciones por pagar'},
    ]},
    { titulo: 'Producción', nota:'Módulo futuro — Fénix todavía no tiene un módulo de Producción/Manufactura. Estos campos quedan listos para cuando se construya.', campos: [
      {clave:'cuenta_liquidacion_materia_prima', etiqueta:'Liquidación de materia prima'},
      {clave:'cuenta_liquidacion_maquinaria', etiqueta:'Liquidación de maquinaria'},
      {clave:'cuenta_liquidacion_mano_obra', etiqueta:'Liquidación de mano de obra'},
      {clave:'cuenta_liquidacion_costos_indirectos', etiqueta:'Liquidación de costos indirectos'},
    ]},
  ];

// ---------------- Catálogo completo de cuentas (para los pickers) ----------------
  let TODAS_CUENTAS = [];
  async function cargarTodasCuentas(){
    try{ TODAS_CUENTAS = await llamarApi(API_CUENTAS); }
    catch(e){ TODAS_CUENTAS = []; }
  }

// ---------------- Render de las secciones + pickers ----------------
  const contenedor = document.getElementById('secciones');
  const PICKERS = {}; // clave -> {input, oculto, sugerencias}

function construirSecciones(){
    contenedor.innerHTML = SECCIONES.map(seccion => `
      <div class="section-card">
        <h2>${seccion.titulo}</h2>
        ${seccion.nota ? `<div class="section-nota">${seccion.nota}</div>` : ''}
        <div class="campos-grid">
          ${seccion.campos.map(campo => `
            <div class="form-field cuenta-picker" data-clave="${campo.clave}">
              <label for="input-${campo.clave}">${campo.etiqueta}</label>
              <input type="text" id="input-${campo.clave}" autocomplete="off" placeholder="— Ninguna — escriba para buscar…">
              <input type="hidden" id="oculto-${campo.clave}">
              <div class="cuenta-sugerencias" id="sug-${campo.clave}"></div>
              ${campo.nota ? `<span class="campo-nota">${campo.nota}</span>` : ''}
            </div>
          `).join('')}
        </div>
      </div>
    `).join('');

SECCIONES.forEach(seccion => seccion.campos.forEach(campo => {
      const input = document.getElementById(`input-${campo.clave}`);
      const oculto = document.getElementById(`oculto-${campo.clave}`);
      const sugerencias = document.getElementById(`sug-${campo.clave}`);
      PICKERS[campo.clave] = {input, oculto, sugerencias};
      conectarPicker(campo.clave, input, oculto, sugerencias);
    }));
  }

function buscar(){
      const q = input.value.trim();
      const ql = q.toUpperCase();
      // Solo cuentas de detalle (acepta_movimientos) -- una cuenta sumaria no puede recibir
      // asientos, así que no tiene sentido ofrecerla como parámetro.
      const candidatas = TODAS_CUENTAS
        .filter(c => c.acepta_movimientos)
        .filter(c => q.length === 0 || c.nombre.toUpperCase().includes(ql) || c.codigo.startsWith(q))
        .sort((a,b)=> a.nombre.localeCompare(b.nombre, 'es'));

posicionar();

const opcionNinguna = `<div class="sug-item sug-ninguna" data-id="">
        <span class="sug-nombre">— Ninguna —</span>
        <span class="sug-meta">Dejar este parámetro sin cuenta asignada</span>
      </div>`;

let cuerpoHtml;
      if (candidatas.length === 0){
        cuerpoHtml = q.length > 0 ? `<div class="sug-vacio">Ninguna cuenta contiene "${q}"</div>` : '';
      } else {
        const resultados = candidatas.slice(0, 20);
        cuerpoHtml = resultados.map(c => `
          <div class="sug-item" data-id="${c.id}" data-codigo="${c.codigo}" data-nombre="${c.nombre.replace(/"/g,'&quot;')}">
            <span class="sug-nombre">${resaltar(c.nombre, q)}</span>
            <span class="sug-meta"><span class="mono sug-codigo">${c.codigo}</span> · ${c.tipo}</span>
          </div>
        `).join('') + (candidatas.length > 20 ? `<div class="sug-mas">+${candidatas.length-20} más — siga escribiendo para afinar</div>` : '');
      }
      sugerencias.innerHTML = opcionNinguna + cuerpoHtml;
      sugerencias.classList.add('abierta');

sugerencias.querySelector('.sug-ninguna').addEventListener('mousedown', e=>{
        e.preventDefault();
        input.value = ''; oculto.value = '';
        cerrarSugerencias();
      });
      sugerencias.querySelectorAll('.sug-item:not(.sug-ninguna)').forEach(item=>{
        item.addEventListener('mousedown', e=>{
          e.preventDefault();
          input.value = `${item.dataset.codigo} — ${item.dataset.nombre}`;
          oculto.value = item.dataset.id;
          cerrarSugerencias();
        });
      });
    }
    input.addEventListener('input', buscar);
    input.addEventListener('focus', buscar);
    input.addEventListener('blur', ()=> setTimeout(()=>{ cerrarSugerencias(); if (!oculto.value) input.value=''; }, 150));
    input.addEventListener('keydown', e=>{ if (e.key === 'Escape') cerrarSugerencias(); });
  }

// ---------------- Cargar / Guardar ----------------
  async function cargar(){
    try{
      const datos = await llamarApi(API_PARAMETROS);
      pintarValores(datos);
    } catch(e){
      await modalAlert(e.message, 'No se pudieron cargar los parámetros');
    }
  }

(async function iniciar(){
    construirSecciones();
    await cargarTodasCuentas();
    await cargar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Movimiento de Cuenta Contable</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

.app{max-width:1180px; margin:0 auto; padding:28px 24px 64px;}

/* ---------- filtros ---------- */
  .filters{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:18px 20px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .filters-fila{display:flex; flex-wrap:wrap; gap:14px; align-items:end;}
  .filters-fila + .filters-fila{margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
  .field{display:flex; flex-direction:column; gap:5px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field.fecha input{width:150px;}
  .field.cuenta{flex:1 1 320px; min-width:280px; position:relative;}
  .field.numero input{width:110px;}
  .field.tipo select{width:170px;}
  .field.texto{flex:1 1 220px; min-width:200px;}
  .range{display:flex; align-items:end; gap:7px;}
  .check-field{
    display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-muted);
    cursor:pointer; margin-top:4px; white-space:nowrap;
  }
  .check-field input{accent-color:var(--accent); width:13px; height:13px; cursor:pointer;}
  .check-field:hover{color:var(--ink);}
  .range .dash{color:var(--ink-muted); padding-bottom:8px;}
  .filters .spacer{flex:1;}

.btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.5; cursor:not-allowed;}
  .btn svg{width:15px; height:15px;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

/* ---------- buscador de cuenta (mismo patrón de Asientos / Cierre Fiscal) ---------- */
  .cuenta-picker{position:relative;}
  .cuenta-sugerencias{
    display:none; position:fixed; background:var(--surface); border:1px solid var(--line-strong);
    border-radius:9px; box-shadow:var(--shadow); max-height:300px; overflow-y:auto; z-index:250;
  }
  .cuenta-sugerencias.abierta{display:block;}
  .sug-item{display:flex; flex-direction:column; gap:1px; padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--line);}
  .sug-item:last-child{border-bottom:none;}
  .sug-item:hover, .sug-item.activa{background:var(--accent-soft);}
  .sug-nombre{font-size:13.5px; color:var(--ink);}
  .sug-nombre mark{background:transparent; color:var(--accent); font-weight:700; padding:0;}
  .sug-meta{font-size:11px; color:var(--ink-muted);}
  .sug-vacio{padding:14px 12px; font-size:13px; color:var(--ink-muted); text-align:center;}
  .cuenta-elegida{
    display:none; align-items:center; justify-content:space-between; gap:10px;
    background:var(--accent-soft); border:1px solid var(--accent); border-radius:7px;
    padding:7px 11px; font-size:13px; height:34.5px;
  }
  .cuenta-elegida.visible{display:flex;}
  .cuenta-elegida .cambiar{
    background:none; border:none; color:var(--accent); font-weight:600; cursor:pointer; padding:0;
    font-size:12px; text-decoration:underline; font-family:inherit; white-space:nowrap;
  }

/* ---------- estado vacío ---------- */
  .empty-state{
    background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
    padding:56px 20px; text-align:center; color:var(--ink-muted);
  }
  .empty-state b{color:var(--ink); display:block; margin-bottom:6px; font-size:16px; font-family:Georgia,serif;}

/* ---------- resumen del reporte ---------- */
  .print-header{display:none;}
  .resumen{
    background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
    padding:18px 22px; margin-bottom:16px;
  }
  .resumen-cuenta{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:14px;}
  .resumen-cuenta h2{font-size:18px;}
  .resumen-cuenta .rango{font-size:12.5px; color:var(--ink-muted); margin-top:3px;}
  .resumen-acciones{display:flex; gap:10px;}
  .resumen-saldos{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding-top:14px; border-top:1px solid var(--line);}
  .saldo-box .lbl{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin-bottom:4px;}
  .saldo-box .val{font-size:18px; font-weight:700;}
  .saldo-neg{color:var(--red-ink);}

/* ---------- tabla ---------- */
  .table-wrap{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow);
  }
  table{border-collapse:collapse; width:100%; min-width:980px;}
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--ink-muted); font-weight:600; padding:10px 13px;
    border-bottom:1px solid var(--line-strong); background:var(--surface-2);
    position:sticky; top:0;
  }
  th.num, td.num{text-align:right;}
  tbody td{padding:10px 13px; border-bottom:1px solid var(--line); vertical-align:middle;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--surface-2);}
  tr.fila-inicial td, tr.fila-final td{background:var(--surface-2); font-weight:700;}
  tr.fila-final td{border-top:2px solid var(--ink); border-bottom:none;}
  .tag-tipo{
    font-size:11px; color:var(--ink-muted); border:1px solid var(--line-strong);
    border-radius:6px; padding:2px 7px; white-space:nowrap;
  }
  .glosa-cell .glosa{display:block;}
  .glosa-cell .obs{display:block; font-size:11.5px; color:var(--ink-muted); margin-top:2px;}
  .num-asiento{color:var(--ink-muted);}
  .saldo-col{font-weight:600;}

.foot-note{font-size:12px; color:var(--ink-muted); margin-top:12px; line-height:1.6;}

/* ---------- impresión ---------- */
  @media print{
    @page{ size: landscape; margin: 1.5cm; }
    .topbar, .filters, .resumen-acciones, .no-print{display:none !important;}
    body{background:#fff; color:#000;}
    .app{max-width:none; padding:0;}
    .print-header{display:block; margin-bottom:16px;}
    .print-header h2{font-size:17px;}
    .print-header .sub{font-size:12px; color:#000; margin-top:2px;}
    .resumen, .table-wrap{box-shadow:none; border:1px solid #000;}
    .saldo-neg{color:#000 !important;}
    tr.fila-inicial td, tr.fila-final td{background:none !important; border-color:#000 !important;}
    thead th{background:none !important; border-color:#000 !important; color:#000 !important;}
    .tag-tipo{border-color:#000; color:#000;}
  }

@media (max-width:760px){
    .resumen-saldos{grid-template-columns:1fr;}
  }

/* ---------- modal propio (alert) -- los diálogos nativos del navegador quedan
     bloqueados dentro del sandbox del Artifact ---------- */
  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:420px; width:100%;
  }
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Movimiento de Cuenta</span>
    </div>
    <div class="crumbs"><b>Reportes</b> / Movimiento de cuenta contable</div>
  </div>

<div class="filters">
    <div class="filters-fila">
      <div class="field cuenta">
        <label for="cuenta-input">Cuenta contable</label>
        <div class="cuenta-picker">
          <input id="cuenta-input" type="text" autocomplete="off" placeholder="Escriba para buscar una cuenta…">
          <div class="cuenta-sugerencias" id="cuenta-sugerencias"></div>
        </div>
        <div class="cuenta-elegida" id="cuenta-elegida-box">
          <span><span class="mono" id="cuenta-elegida-codigo"></span> — <span id="cuenta-elegida-nombre"></span></span>
          <button class="cambiar" id="cambiar-cuenta">Cambiar</button>
        </div>
      </div>
      <div class="field">
        <label>Fecha</label>
        <div class="range">
          <div class="field fecha"><input type="date" id="f-desde" class="mono" value="2026-01-01"></div>
          <span class="dash">–</span>
          <div class="field fecha"><input type="date" id="f-hasta" class="mono" value="2026-07-10"></div>
        </div>
      </div>
      <div class="spacer"></div>
      <button class="btn btn-primary" id="btn-refrescar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-3-6.7M21 4v5h-5"/></svg>
        Refrescar
      </button>
    </div>
    <div class="filters-fila">
      <div class="field numero">
        <label for="f-numero">N.º asiento</label>
        <input type="text" id="f-numero" class="mono" placeholder="ej. 93" inputmode="numeric">
      </div>
      <div class="field tipo">
        <label for="f-tipo">Tipo</label>
        <select id="f-tipo">
          <option value="">Todos</option>
          <option value="Manual">Manual</option>
          <option value="Ventas">Ventas</option>
          <option value="Bancos">Bancos</option>
          <option value="Proveeduría">Proveeduría</option>
          <option value="Cierre Fiscal">Cierre Fiscal</option>
        </select>
        <label class="check-field">
          <input type="checkbox" id="f-tipo-excluir">
          Excluir este tipo (en vez de mostrarlo)
        </label>
      </div>
      <div class="field texto">
        <label for="f-texto">Buscar en glosa u observaciones</label>
        <input type="text" id="f-texto" placeholder="ej. reparación, factura…">
      </div>
    </div>
  </div>

<div class="empty-state" id="estado-vacio">
    <b>Elija una cuenta contable para ver su detalle</b>
    Busque por nombre o código en el campo de arriba — por ejemplo, si un saldo de la Balanza se ve raro, aquí puede ver exactamente qué asientos lo formaron y en qué momento.
  </div>

<div id="vista-reporte" style="display:none;">
    <div class="print-header">
      <h2>Movimiento de Cuenta Contable</h2>
      <div class="sub">Sistemas Rodríguez y Asociados — <span id="print-cuenta"></span> — <span id="print-rango"></span></div>
    </div>

<div class="resumen">
      <div class="resumen-cuenta">
        <div>
          <h2><span class="mono" id="resumen-codigo"></span> — <span id="resumen-nombre"></span></h2>
          <div class="rango" id="resumen-rango"></div>
        </div>
        <div class="resumen-acciones">
          <button class="btn" id="btn-imprimir">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M6 9V3h12v6M6 18h12v4H6v-4Zm-3-9h18v7H3V9Z"/></svg>
            Imprimir
          </button>
          <button class="btn btn-primary" id="btn-exportar">
            <span id="icono-exportar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg></span>
            <span id="texto-exportar">Exportar a Excel</span>
          </button>
        </div>
      </div>
      <div class="resumen-saldos">
        <div class="saldo-box"><div class="lbl">Saldo inicial</div><div class="val mono" id="saldo-inicial-val"></div></div>
        <div class="saldo-box"><div class="lbl">Movimiento del período (neto)</div><div class="val mono" id="saldo-movimiento-val"></div></div>
        <div class="saldo-box"><div class="lbl">Saldo final</div><div class="val mono" id="saldo-final-val"></div></div>
      </div>
    </div>

<div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>Fecha</th><th>Asiento</th><th>Tipo</th><th>Glosa / Observaciones</th>
            <th class="num">Débito ₡</th><th class="num">Crédito ₡</th><th class="num">Saldo</th>
          </tr>
        </thead>
        <tbody id="mov-tbody"></tbody>
      </table>
    </div>
    <p class="foot-note" id="pie-conteo"></p>
  </div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-primary" id="modal-aceptar">Entendido</button>
    </div>
  </div>
</div>

// Modal propio -- confirm()/alert() nativos quedan bloqueados dentro del sandbox
  // del Artifact. Esta pantalla solo necesita avisar (sin confirmar ni pedir texto).
  const modalOverlay = document.getElementById('modal-overlay');
  const modalTitulo = document.getElementById('modal-titulo');
  const modalMensaje = document.getElementById('modal-mensaje');
  const modalAceptar = document.getElementById('modal-aceptar');
  function modalAlert(mensaje, titulo='Aviso'){
    return new Promise(resolve=>{
      modalTitulo.textContent = titulo;
      modalMensaje.textContent = mensaje;
      function cerrar(){
        modalOverlay.classList.remove('abierto');
        modalAceptar.onclick = null;
        document.removeEventListener('keydown', onKey);
        resolve();
      }
      function onKey(e){ if (e.key === 'Escape' || e.key === 'Enter') cerrar(); }
      modalAceptar.onclick = cerrar;
      document.addEventListener('keydown', onKey);
      modalOverlay.classList.add('abierto');
      setTimeout(()=> modalAceptar.focus(), 30);
    });
  }

// ---------------- Conexión con el backend real (FastAPI) ----------------
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador';

function nombrePadre(codigo){
    const segs = codigo.split('-');
    if (segs.length <= 1) return null;
    const padre = CUENTAS_POR_CODIGO[segs.slice(0,-1).join('-')];
    return padre ? padre.nombre : null;
  }
  function resaltar(texto, query){
    const idx = texto.toUpperCase().indexOf(query.toUpperCase());
    if (idx === -1) return texto;
    return texto.slice(0,idx) + '<mark>' + texto.slice(idx, idx+query.length) + '</mark>' + texto.slice(idx+query.length);
  }

let cuentaElegida = null;

// ---------- buscador de cuenta ----------
  const input = document.getElementById('cuenta-input');
  const caja = document.getElementById('cuenta-sugerencias');
  const elegidaBox = document.getElementById('cuenta-elegida-box');

// ---------- generar el reporte ----------
  // El backend (fn_movimiento_cuenta) ya calcula el saldo inicial y el saldo
  // acumulado real de cada línea, en el orden cronológico completo -- por eso el
  // saldo final que se muestra NO cambia aunque se filtre por número/tipo/texto,
  // esos filtros solo esconden filas de la vista, no recalculan el saldo real.
  let movimientosCompletos = null;

async function cargarMovimientos(){
    const desde = document.getElementById('f-desde').value;
    const hasta = document.getElementById('f-hasta').value;
    const params = new URLSearchParams({cuenta_codigo: cuentaElegida, fecha_inicio: desde, fecha_fin: hasta});
    const filas = await llamarApi(`/movimiento-cuenta?${params}`);
    movimientosCompletos = {desde, hasta, filas};
  }

function filtrarMovimientos(){
    const numeroFiltro = document.getElementById('f-numero').value.trim();
    const tipoFiltro = document.getElementById('f-tipo').value;
    const tipoExcluir = document.getElementById('f-tipo-excluir').checked;
    const textoFiltro = document.getElementById('f-texto').value.trim().toUpperCase();

const inicial = movimientosCompletos.filas[0];
    const resto = movimientosCompletos.filas.slice(1);
    const final = movimientosCompletos.filas[movimientosCompletos.filas.length - 1];

let visibles = resto;
    if (numeroFiltro) visibles = visibles.filter(m => m.numero != null && String(m.numero).includes(numeroFiltro));
    // Auditoría: no solo "mostrame Ventas" -- también "mostrame todo lo que NO sea
    // Ventas", útil para encontrar ajustes o movimientos de otro módulo sobre una
    // cuenta que en teoría solo debería tocar un origen (caso real: 4-1-01 Ventas
    // Gravadas con una línea de Manual o Proveeduría metida ahí).
    if (tipoFiltro) visibles = visibles.filter(m => tipoExcluir ? m.origen_modulo !== tipoFiltro : m.origen_modulo === tipoFiltro);
    if (textoFiltro) visibles = visibles.filter(m => ((m.glosa||'')+' '+(m.observaciones_linea||'')).toUpperCase().includes(textoFiltro));

return {
      desde: movimientosCompletos.desde, hasta: movimientosCompletos.hasta,
      saldoInicial: inicial.saldo_acumulado, filas: visibles, saldoFinal: final.saldo_acumulado,
      tipoFiltro, tipoExcluir,
    };
  }

async function generarReporte(){
    if (!cuentaElegida) return;
    try{
      await cargarMovimientos();
    }catch(e){
      await modalAlert(e.message, 'No se pudo cargar el movimiento de la cuenta');
      return;
    }
    renderizarConFiltros();
  }

// Número de asiento, tipo (incluir/excluir) y texto se aplican sobre los datos que
  // ya están en el navegador -- no hace falta volver a preguntarle al backend cada vez
  // que se ajusta uno de estos, por eso tienen su propia función sin "await fetch".
  function renderizarConFiltros(){
    if (!movimientosCompletos) return;
    const c = CUENTAS_POR_CODIGO[cuentaElegida];
    const r = filtrarMovimientos();

document.getElementById('estado-vacio').style.display = 'none';
    document.getElementById('vista-reporte').style.display = '';

const neto = r.saldoFinal - r.saldoInicial;
    document.getElementById('saldo-inicial-val').innerHTML = fmtSignoHtml(r.saldoInicial);
    document.getElementById('saldo-movimiento-val').innerHTML = fmtSignoHtml(neto);
    document.getElementById('saldo-final-val').innerHTML = fmtSignoHtml(r.saldoFinal);

document.getElementById('btn-refrescar').addEventListener('click', generarReporte);
  document.getElementById('btn-imprimir').addEventListener('click', ()=> window.print());
  document.getElementById('f-numero').addEventListener('input', renderizarConFiltros);
  document.getElementById('f-tipo').addEventListener('change', renderizarConFiltros);
  document.getElementById('f-tipo-excluir').addEventListener('change', renderizarConFiltros);
  document.getElementById('f-texto').addEventListener('input', renderizarConFiltros);

// ---------- exportar (mismo patrón de la Balanza: procesando -> confirmado) ----------
  const ICONO_DESCARGA = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>';
  const ICONO_PROCESANDO = '<svg class="girando" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-3-6.7"/></svg>';
  const ICONO_LISTO = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M20 6 9 17l-5-5"/></svg>';

async function exportarExcel(){
    const btn = document.getElementById('btn-exportar');
    const icono = document.getElementById('icono-exportar');
    const texto = document.getElementById('texto-exportar');
    btn.disabled = true;
    icono.innerHTML = ICONO_PROCESANDO;
    texto.textContent = 'Generando…';

try{
      const r = filtrarMovimientos();
      const c = CUENTAS_POR_CODIGO[cuentaElegida];
      // Coma decimal, sin separador de miles, y punto y coma como delimitador --
      // así Excel en español (Costa Rica) los lee como números reales de una vez
      // (mismo ajuste que ya se hizo en la Balanza tras el problema real con el
      // punto decimal multiplicando los montos por 100).
      const csvNum = n => n.toFixed(2).replace('.', ',');
      const encabezado = ['Fecha','Asiento','Tipo','Glosa','Observaciones','Débito','Crédito','Saldo'];
      const filas = [
        [r.desde, '', 'Saldo inicial', '', '', '', '', csvNum(r.saldoInicial)],
        ...r.filas.map(m=>[m.fecha, m.numero, m.origen_modulo, m.glosa, m.observaciones_linea||'', csvNum(m.debito), csvNum(m.credito), csvNum(m.saldo_acumulado)]),
        [r.hasta, '', 'Saldo final', '', '', '', '', csvNum(r.saldoFinal)],
      ];
      const csv = [encabezado, ...filas].map(f=>f.map(csvEscape).join(';')).join('\r\n');
      const nombreArchivo = `movimiento_${c.codigo}_${r.desde}_a_${r.hasta}.csv`;
      const blob = new Blob(['' + csv], {type:'text/csv;charset=utf-8;'});
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = nombreArchivo;
      document.body.appendChild(a); a.click(); document.body.removeChild(a);
      URL.revokeObjectURL(url);

icono.innerHTML = ICONO_LISTO;
      texto.textContent = `Descargado: ${nombreArchivo}`;
      setTimeout(()=>{
        btn.disabled = false;
        icono.innerHTML = ICONO_DESCARGA;
        texto.textContent = 'Exportar a Excel';
      }, 1800);
    }catch(e){
      icono.innerHTML = ICONO_DESCARGA;
      texto.textContent = 'Exportar a Excel';
      btn.disabled = false;
      await modalAlert(e.message, 'No se pudo exportar');
    }
  }
  document.getElementById('btn-exportar').addEventListener('click', exportarExcel);

(async ()=>{
    try{
      await cargarCuentas();
    }catch(e){
      await modalAlert(e.message, 'No se pudo cargar el catálogo de cuentas');
    }
    // Principio 3: el campo que el usuario usa primero en esta pantalla es el
    // buscador de cuenta -- todo lo demás (fechas) ya trae un valor por defecto razonable.
    setTimeout(()=> input.focus(), 30);
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Inventario a una Fecha</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

.app{max-width:1180px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:200px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .field.check{flex-direction:row; align-items:center; gap:7px; padding-bottom:8px;}
  .field.check label{text-transform:none; letter-spacing:normal; font-size:13px; color:var(--ink);}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-sm{padding:5px 12px; font-size:12.5px; border-radius:6px;}
  .btn[disabled]{opacity:.55; cursor:not-allowed; transform:none;}

@keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .8s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.calculando-banner{
    display:none; align-items:center; gap:12px; background:var(--accent-soft);
    border:1px solid var(--accent); color:var(--accent); border-radius:10px;
    padding:14px 18px; margin-bottom:18px; font-size:13.5px; font-weight:600;
  }
  .calculando-banner.activo{display:flex;}
  .calculando-banner .spinner{
    width:18px; height:18px; border-radius:50%; border:2.5px solid var(--accent);
    border-top-color:transparent; flex:0 0 auto;
  }
  .calculando-banner .txt{color:var(--ink);}
  .calculando-banner .txt b{color:var(--accent); display:block;}

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}

.pagination-bar{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
    margin-top:12px;
  }
  .foot-note{font-size:12px; color:var(--ink-muted);}
  .pager{display:flex; align-items:center; gap:12px;}
  .pager-info{font-size:12.5px; color:var(--ink-muted); white-space:nowrap;}

.print-header{display:none;}

@media print{
    @page{ size: landscape; margin: 1.3cm; }
    .topbar .crumbs, .filters, .pagination-bar, .calculando-banner, .no-print{display:none !important;}
    body{background:#fff; color:#000;}
    .app{max-width:none; padding:0;}
    .table-wrap{box-shadow:none; border:1px solid #000;}
    thead th{background:none !important; border-color:#000 !important;}
    .print-header{display:block; margin-bottom:14px;}
    .print-header h2{font-size:16px;}
    .print-header .sub{font-size:12px; color:#333;}
    td.negativo{color:#000; font-weight:700;}
  }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Inventario a una Fecha</span>
    </div>
    <div class="crumbs"><b>Reportes</b> / Inventario a una fecha</div>
  </div>

<div class="print-header">
    <h2>Inventario a una fecha — Sistemas Rodríguez y Asociados</h2>
    <div class="sub">Corte al <span id="print-fecha"></span></div>
  </div>

<div class="filters">
    <div class="field">
      <label for="f-fecha">Fecha de corte</label>
      <input type="date" id="f-fecha" class="mono">
    </div>
    <div class="field">
      <label for="f-bodega">Bodega</label>
      <select id="f-bodega"><option value="">Todas</option></select>
    </div>
    <div class="field texto">
      <label for="f-texto">Buscar (código o nombre)</label>
      <input type="text" id="f-texto" placeholder="ej. resma de papel" autocomplete="off">
    </div>
    <div class="field check">
      <input type="checkbox" id="f-solo-existencia">
      <label for="f-solo-existencia">Solo con existencia</label>
    </div>
    <div class="spacer"></div>
    <button class="btn btn-primary no-print" id="btn-generar">Generar reporte</button>
    <button class="btn btn-ghost no-print" id="btn-imprimir">Imprimir</button>
    <button class="btn btn-primary no-print" id="btn-exportar">
      <svg id="icono-exportar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
      <span id="texto-exportar">Exportar a Excel</span>
    </button>
  </div>

<div class="calculando-banner" id="calculando-banner">
    <div class="spinner girando"></div>
    <div class="txt">
      <b>Calculando existencia e inventario…</b>
      Sumando entradas y salidas de todos los artículos hasta la fecha elegida. En catálogos
      grandes esto puede tardar varios segundos — la pantalla sigue trabajando, no hace falta
      volver a hacer clic.
    </div>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Código</th><th>Ítem</th><th>Bodega</th>
          <th class="num">Existencia</th><th class="num">Costo prom. (₡)</th>
          <th class="num">Valor total (₡)</th><th>Última compra</th>
        </tr>
      </thead>
      <tbody id="tbody-inventario"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay resultados con estos filtros</b>
      Elige una fecha de corte y presiona "Generar reporte", o ajusta la búsqueda/bodega.
    </div>
  </div>

<div class="pagination-bar">
    <div class="foot-note" id="foot-note">Elige una fecha y presiona "Generar reporte".</div>
    <div class="pager">
      <button class="btn btn-sm" id="btn-anterior">‹ Anterior</button>
      <span class="pager-info" id="pager-info"></span>
      <button class="btn btn-sm" id="btn-siguiente">Siguiente ›</button>
    </div>
  </div>

</div>

async function llamarApi(path){
    let resp;
    try{
      resp = await fetch(`${API_BASE}${path}`);
    }catch(e){
      throw new Error('No se pudo conectar al backend (¿está corriendo uvicorn?)');
    }
    if (!resp.ok){
      let detalle = `El servidor respondió ${resp.status}`;
      try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
      throw new Error(detalle);
    }
    return resp.json();
  }

async function cargarBodegas(){
    const filas = await llamarApi('/inventario/bodegas');
    const sel = document.getElementById('f-bodega');
    filas.forEach(b=>{
      const opt = document.createElement('option');
      opt.value = b.id; opt.textContent = b.nombre;
      sel.appendChild(opt);
    });
  }

function construirQuery(pagina){
    const params = new URLSearchParams();
    params.set('fecha', document.getElementById('f-fecha').value);
    const bodegaId = document.getElementById('f-bodega').value;
    const texto = document.getElementById('f-texto').value.trim();
    if (bodegaId) params.set('bodega_id', bodegaId);
    if (texto) params.set('texto', texto);
    if (document.getElementById('f-solo-existencia').checked) params.set('solo_con_existencia', 'true');
    params.set('pagina', pagina);
    params.set('por_pagina', POR_PAGINA);
    return params.toString();
  }

function filaHtml(f){
    const negClass = f.existencia < 0 || f.valor_total_crc < 0 ? 'negativo' : '';
    return `
      <tr>
        <td class="mono">${f.codigo}</td>
        <td>${f.nombre}</td>
        <td>${f.bodega_nombre}</td>
        <td class="num mono ${negClass}">${fmt(f.existencia)}</td>
        <td class="num mono">${fmt(f.costo_promedio_crc)}</td>
        <td class="num mono ${negClass}">${fmt(f.valor_total_crc)}</td>
        <td class="mono">${fmtFecha(f.fecha_ultima_compra)}</td>
      </tr>
    `;
  }

async function generar(pagina){
    const fecha = document.getElementById('f-fecha').value;
    if (!fecha){
      document.getElementById('foot-note').textContent = 'Elige una fecha de corte primero.';
      return;
    }
    paginaActual = pagina;
    const btn = document.getElementById('btn-generar');
    const banner = document.getElementById('calculando-banner');
    const tbody = document.getElementById('tbody-inventario');

btn.disabled = true;
    btn.textContent = 'Calculando…';
    banner.classList.add('activo');
    document.getElementById('empty-state').style.display = 'none';

try{
      const datos = await llamarApi(`/inventario/inventario-a-fecha?${construirQuery(pagina)}`);
      totalFilas = datos.total;
      document.getElementById('print-fecha').textContent = fmtFecha(fecha);
      if (datos.items.length === 0){
        tbody.innerHTML = '';
        document.getElementById('empty-state').style.display = 'block';
      } else {
        tbody.innerHTML = datos.items.map(filaHtml).join('');
      }
      actualizarPaginacion(datos);
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="7" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      document.getElementById('foot-note').textContent = '';
    } finally {
      btn.disabled = false;
      btn.textContent = 'Generar reporte';
      banner.classList.remove('activo');
    }
  }

document.getElementById('btn-generar').addEventListener('click', ()=> generar(1));
  document.getElementById('btn-imprimir').addEventListener('click', ()=> window.print());

async function exportarExcel(){
    const btn = document.getElementById('btn-exportar');
    btn.disabled = true;
    document.getElementById('icono-exportar').outerHTML = ICONO_PROCESANDO.replace('<svg ', '<svg id="icono-exportar" ');
    document.getElementById('texto-exportar').textContent = 'Generando…';

try{
      const resp = await fetch(`${API_BASE}/inventario/inventario-a-fecha/excel?${construirQuery(1)}`);
      if (!resp.ok){
        let detalle = `El servidor respondió ${resp.status}`;
        try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
        throw new Error(detalle);
      }
      const disposicion = resp.headers.get('Content-Disposition') || '';
      const match = disposicion.match(/filename="?([^"]+)"?/);
      const nombreArchivo = match ? match[1] : 'inventario_a_fecha.xlsx';
      const blob = await resp.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = nombreArchivo;
      document.body.appendChild(a); a.click(); document.body.removeChild(a);
      URL.revokeObjectURL(url);
      document.getElementById('icono-exportar').outerHTML = ICONO_LISTO.replace('<svg ', '<svg id="icono-exportar" ');
      document.getElementById('texto-exportar').textContent = `Descargado: ${nombreArchivo}`;
      volverANormal(1800);
    }catch(err){
      const esConexion = err instanceof TypeError;
      document.getElementById('icono-exportar').outerHTML = ICONO_ERROR.replace('<svg ', '<svg id="icono-exportar" ');
      document.getElementById('texto-exportar').textContent = esConexion
        ? 'No se pudo conectar al backend (¿está corriendo uvicorn?)'
        : `Error: ${err.message}`;
      volverANormal(4000);
    }
  }
  document.getElementById('btn-exportar').addEventListener('click', exportarExcel);
  document.getElementById('btn-anterior').addEventListener('click', ()=>{
    if (paginaActual > 1) generar(paginaActual - 1);
  });
  document.getElementById('btn-siguiente').addEventListener('click', ()=>{
    const totalPaginas = Math.max(1, Math.ceil(totalFilas / POR_PAGINA));
    if (paginaActual < totalPaginas) generar(paginaActual + 1);
  });

(function init(){
    const hoy = new Date();
    const pad = n => String(n).padStart(2,'0');
    document.getElementById('f-fecha').value = `${hoy.getFullYear()}-${pad(hoy.getMonth()+1)}-${pad(hoy.getDate())}`;
    document.getElementById('f-fecha').focus();
    cargarBodegas().catch(()=>{});
  })();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Movimiento de Ítems</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

.app{max-width:1280px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:16px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:130px;}
  .field.articulo{min-width:280px;}
  .range{display:flex; align-items:end; gap:7px;}
  .range .dash{color:var(--ink-muted); padding-bottom:8px;}
  .filters .spacer{flex:1 1 100%; height:0;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-sm{padding:5px 12px; font-size:12.5px; border-radius:6px;}
  .btn[disabled]{opacity:.5; cursor:not-allowed;}

/* ---------- buscador de artículo (mismo patrón de Movimiento de Cuenta) ---------- */
  .articulo-picker{position:relative;}
  .articulo-sugerencias{
    display:none; position:fixed; background:var(--surface); border:1px solid var(--line-strong);
    border-radius:9px; box-shadow:var(--shadow); max-height:320px; overflow-y:auto; z-index:250;
  }
  .articulo-sugerencias.abierta{display:block;}
  .sug-item{display:flex; flex-direction:column; gap:1px; padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--line);}
  .sug-item:last-child{border-bottom:none;}
  .sug-item:hover, .sug-item.activa{background:var(--accent-soft);}
  .sug-nombre{font-size:13.5px; color:var(--ink);}
  .sug-nombre mark{background:transparent; color:var(--accent); font-weight:700; padding:0;}
  .sug-meta{font-size:11px; color:var(--ink-muted);}
  .sug-vacio, .sug-cargando{padding:14px 12px; font-size:13px; color:var(--ink-muted); text-align:center;}
  .articulo-elegido{
    display:none; align-items:center; justify-content:space-between; gap:10px;
    background:var(--accent-soft); border:1px solid var(--accent); border-radius:7px;
    padding:7px 11px; font-size:13px; height:34.5px; min-width:280px;
  }
  .articulo-elegido.visible{display:flex;}
  .articulo-elegido .txt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .articulo-elegido .cambiar{
    background:none; border:none; color:var(--accent); font-weight:600; cursor:pointer; padding:0;
    font-size:12px; text-decoration:underline; font-family:inherit; white-space:nowrap; flex:0 0 auto;
  }

.empty-state{
    background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
    padding:56px 20px; text-align:center; color:var(--ink-muted);
  }
  .empty-state b{color:var(--ink); display:block; margin-bottom:6px; font-size:16px; font-family:Georgia,serif;}

.resumen{
    display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
    background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
    padding:16px 20px; margin-bottom:16px;
  }
  .resumen-box .lbl{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin-bottom:4px;}
  .resumen-box .val{font-size:18px; font-weight:700;}
  .resumen-box .val.neg{color:var(--red-ink);}

.table-wrap{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow);
  }
  table{border-collapse:collapse; width:100%; min-width:1080px;}
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--ink-muted); font-weight:600; padding:10px 12px;
    border-bottom:1px solid var(--line-strong); background:var(--surface-2);
    position:sticky; top:0;
  }
  th.num, td.num{text-align:right;}
  tbody td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--surface-2);}
  .tag-tipo{
    font-size:11px; color:var(--ink-muted); border:1px solid var(--line-strong);
    border-radius:6px; padding:2px 7px; white-space:nowrap;
  }
  .glosa-cell{max-width:280px;}
  .glosa-cell .glosa{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .glosa-cell .tercero{display:block; font-size:11.5px; color:var(--ink-muted); margin-top:2px;}

.print-header{display:none;}

@media print{
    @page{ size: landscape; margin: 1.3cm; }
    .topbar .crumbs, .filters, .pagination-bar, .no-print{display:none !important;}
    body{background:#fff; color:#000;}
    .app{max-width:none; padding:0;}
    .print-header{display:block; margin-bottom:14px;}
    .print-header h2{font-size:16px;}
    .print-header .sub{font-size:12px; color:#333;}
    .table-wrap, .resumen{box-shadow:none; border:1px solid #000;}
    thead th{background:none !important; border-color:#000 !important;}
    .resumen-box .val.neg{color:#000; font-weight:700;}
  }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Movimiento de Ítems</span>
    </div>
    <div class="crumbs"><b>Reportes</b> / Movimiento de ítems</div>
  </div>

<div class="filters">
    <div class="field articulo">
      <label for="articulo-input">Ítem</label>
      <div class="articulo-picker">
        <input id="articulo-input" type="text" autocomplete="off" placeholder="Escriba para buscar un artículo… ej. resma">
        <div class="articulo-sugerencias" id="articulo-sugerencias"></div>
      </div>
      <div class="articulo-elegido" id="articulo-elegido-box">
        <span class="txt"><span class="mono" id="articulo-elegido-codigo"></span> — <span id="articulo-elegido-nombre"></span></span>
        <button class="cambiar" id="cambiar-articulo">Cambiar</button>
      </div>
    </div>
    <div class="field">
      <label>Fecha</label>
      <div class="range">
        <input type="date" id="f-desde" class="mono">
        <span class="dash">–</span>
        <input type="date" id="f-hasta" class="mono">
      </div>
    </div>
    <div class="field">
      <label for="f-tipo">Tipo</label>
      <select id="f-tipo">
        <option value="">Todos</option>
        <option value="Entrada">Entrada</option>
        <option value="Salida">Salida</option>
      </select>
    </div>
    <div class="field">
      <label for="f-motivo">Motivo</label>
      <select id="f-motivo">
        <option value="">Todos</option>
        <option value="Venta">Venta</option>
        <option value="Compra">Compra</option>
        <option value="Traslado">Traslado</option>
        <option value="Devolución">Devolución</option>
        <option value="Ajuste">Ajuste</option>
      </select>
    </div>
    <div class="field">
      <label for="f-sucursal">Sucursal</label>
      <select id="f-sucursal"><option value="">Todas</option></select>
    </div>
    <div class="field">
      <label for="f-bodega">Bodega</label>
      <select id="f-bodega"><option value="">Todas</option></select>
    </div>
    <div class="field">
      <label for="f-factura">Factura</label>
      <input type="text" id="f-factura" placeholder="ej. 012077">
    </div>
    <div class="field">
      <label for="f-cliente">Cliente</label>
      <input type="text" id="f-cliente" placeholder="nombre">
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar">Refrescar</button>
    <button class="btn btn-ghost no-print" id="btn-imprimir">Imprimir</button>
    <button class="btn btn-primary no-print" id="btn-exportar" disabled>
      <svg id="icono-exportar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
      <span id="texto-exportar">Exportar a Excel</span>
    </button>
    <a class="btn btn-ghost no-print" id="btn-volver" href="articulos_ui.html" data-nav-shell="articulos">‹ Volver</a>
  </div>

<div class="empty-state" id="estado-vacio">
    <b>Elige un artículo para auditar su movimiento</b>
    Busca por código o por una palabra del nombre (ej. "resma") en el campo Ítem de arriba.
  </div>

<div id="vista-reporte" style="display:none;">
    <div class="resumen">
      <div class="resumen-box">
        <div class="lbl">Entradas</div>
        <div class="val mono" id="res-entradas"></div>
      </div>
      <div class="resumen-box">
        <div class="lbl">Salidas</div>
        <div class="val mono" id="res-salidas"></div>
      </div>
      <div class="resumen-box">
        <div class="lbl">Costo total (₡)</div>
        <div class="val mono" id="res-costo"></div>
      </div>
    </div>

<div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>Sucursal</th><th>Bodega</th><th>Motivo</th><th>Movimiento</th><th>Fecha</th><th>Factura</th>
            <th>Cliente / Responsable</th>
            <th class="num">Entradas</th><th class="num">Salidas</th><th class="num">Costo total (₡)</th>
          </tr>
        </thead>
        <tbody id="tbody-movimientos"></tbody>
      </table>
      <div class="empty-state" id="empty-filtrado" style="display:none; box-shadow:none; border:none;">
        <b>No hay movimientos con estos filtros</b>
        Ajusta el rango de fechas, tipo, motivo o bodega.
      </div>
    </div>

<div class="pagination-bar">
      <div class="foot-note" id="foot-note"></div>
      <div class="pager">
        <button class="btn btn-sm" id="btn-anterior">‹ Anterior</button>
        <span class="pager-info" id="pager-info"></span>
        <button class="btn btn-sm" id="btn-siguiente">Siguiente ›</button>
      </div>
    </div>
  </div>

</div>

let TODAS_LAS_BODEGAS = [];

async function cargarSucursales(){
    const filas = await llamarApi('/sucursales');
    const sel = document.getElementById('f-sucursal');
    filas.forEach(s=>{
      const opt = document.createElement('option');
      opt.value = s.id; opt.textContent = s.nombre;
      sel.appendChild(opt);
    });
  }

async function cargarBodegas(){
    TODAS_LAS_BODEGAS = await llamarApi('/inventario/bodegas');
    pintarOpcionesBodega(document.getElementById('f-sucursal').value);
  }

// ---------- buscador de artículo (servidor, no precarga 28,795 en memoria) ----------
  const input = document.getElementById('articulo-input');
  const caja = document.getElementById('articulo-sugerencias');
  const elegidaBox = document.getElementById('articulo-elegido-box');
  let debounceTimer = null;

function marcarElegido(art){
    articuloElegido = art;
    document.getElementById('articulo-elegido-codigo').textContent = art.codigo;
    document.getElementById('articulo-elegido-nombre').textContent = art.nombre;
    elegidaBox.classList.add('visible');
    input.style.display = 'none';
    document.getElementById('estado-vacio').style.display = 'none';
    document.getElementById('vista-reporte').style.display = '';
    document.getElementById('btn-exportar').disabled = false;
    generarReporte(1);
  }

async function buscarArticulos(){
    const q = input.value.trim();
    if (q.length < 2){ cerrarSug(); return; }
    posicionar();
    caja.innerHTML = `<div class="sug-cargando">Buscando…</div>`;
    caja.classList.add('abierta');
    try{
      const datos = await llamarApi(`/articulos?texto=${encodeURIComponent(q)}&por_pagina=20`);
      posicionar();
      if (datos.items.length === 0){
        caja.innerHTML = `<div class="sug-vacio">Ningún artículo contiene "${q}"</div>`;
        return;
      }
      caja.innerHTML = datos.items.map(a=>`
        <div class="sug-item" data-id="${a.id}" data-codigo="${a.codigo}" data-nombre="${a.nombre.replace(/"/g,'&quot;')}">
          <span class="sug-nombre">${resaltar(a.nombre, q)}</span>
          <span class="sug-meta"><span class="mono">${a.codigo}</span>${a.categoria ? ` · ${a.categoria}` : ''}</span>
        </div>
      `).join('') + (datos.total > 20 ? `<div class="sug-meta" style="padding:6px 12px;">Mostrando 20 de ${datos.total} — afina la búsqueda</div>` : '');
      caja.querySelectorAll('.sug-item').forEach(item=>{
        item.addEventListener('mousedown', e=>{
          e.preventDefault();
          marcarElegido({id: Number(item.dataset.id), codigo: item.dataset.codigo, nombre: item.dataset.nombre});
          cerrarSug();
        });
      });
    }catch(e){
      caja.innerHTML = `<div class="sug-vacio">${e.message}</div>`;
    }
  }
  input.addEventListener('input', ()=>{
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(buscarArticulos, 300);
  });
  // Si el usuario escribe pero nunca hace clic en una sugerencia real, el campo queda con texto
  // "huérfano" que se ve lleno aunque articuloElegido sigue null -- confunde (bug real reportado
  // en Conceptos de Nota a Cliente). Al salir sin elegir de verdad, se limpia.
  input.addEventListener('blur', ()=> setTimeout(()=>{ cerrarSug(); if (!articuloElegido) input.value = ''; }, 150));
  input.addEventListener('keydown', e=>{ if (e.key === 'Escape') cerrarSug(); });
  document.getElementById('cambiar-articulo').addEventListener('click', ()=>{
    articuloElegido = null;
    elegidaBox.classList.remove('visible');
    input.style.display = '';
    input.value = '';
    document.getElementById('estado-vacio').style.display = '';
    document.getElementById('vista-reporte').style.display = 'none';
    document.getElementById('btn-exportar').disabled = true;
    input.focus();
  });

// ---------- generar el reporte ----------
  function construirQuery(pagina){
    const params = new URLSearchParams();
    params.set('articulo_id', articuloElegido.id);
    params.set('fecha_inicio', document.getElementById('f-desde').value);
    params.set('fecha_fin', document.getElementById('f-hasta').value);
    const tipo = document.getElementById('f-tipo').value;
    const motivo = document.getElementById('f-motivo').value;
    const sucursalId = document.getElementById('f-sucursal').value;
    const bodegaId = document.getElementById('f-bodega').value;
    const factura = document.getElementById('f-factura').value.trim();
    const cliente = document.getElementById('f-cliente').value.trim();
    if (tipo) params.set('tipo', tipo);
    if (motivo) params.set('motivo', motivo);
    if (sucursalId) params.set('sucursal_id', sucursalId);
    if (bodegaId) params.set('bodega_id', bodegaId);
    if (factura) params.set('factura', factura);
    if (cliente) params.set('cliente', cliente);
    params.set('pagina', pagina);
    params.set('por_pagina', POR_PAGINA);
    return params.toString();
  }

function filaHtml(m){
    return `
      <tr>
        <td>${m.sucursal_nombre}</td>
        <td>${m.bodega_nombre}</td>
        <td><span class="tag-tipo">${m.motivo}</span></td>
        <td class="mono">${m.numero_movimiento_origen || '—'}</td>
        <td class="mono">${fmtFecha(m.fecha)}</td>
        <td class="mono">${m.numero_documento_origen || '—'}</td>
        <td class="glosa-cell">
          <span class="glosa">${m.nombre_tercero || m.aplicado_por || '—'}</span>
          <span class="tercero">${m.glosa || ''}</span>
        </td>
        <td class="num mono">${m.entradas ? fmt(m.entradas) : ''}</td>
        <td class="num mono">${m.salidas ? fmt(m.salidas) : ''}</td>
        <td class="num mono">${fmt(m.costo_total_crc)}</td>
      </tr>
    `;
  }

async function generarReporte(pagina){
    paginaActual = pagina;
    const tbody = document.getElementById('tbody-movimientos');
    tbody.innerHTML = `<tr><td colspan="10" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    document.getElementById('empty-filtrado').style.display = 'none';

try{
      const datos = await llamarApi(`/inventario/movimiento-articulo?${construirQuery(pagina)}`);
      totalFilas = datos.total;

document.getElementById('res-entradas').textContent = fmt(datos.totales.entradas);
      document.getElementById('res-salidas').textContent = fmt(datos.totales.salidas);
      const costoBox = document.getElementById('res-costo');
      costoBox.textContent = fmt(datos.totales.costo_total_crc);
      costoBox.classList.toggle('neg', datos.totales.costo_total_crc < 0);

document.getElementById('print-titulo').textContent = `Movimiento de ítem — ${articuloElegido.codigo} — ${articuloElegido.nombre}`;
      document.getElementById('print-sub').textContent =
        `Del ${fmtFecha(document.getElementById('f-desde').value)} al ${fmtFecha(document.getElementById('f-hasta').value)}`;

if (datos.items.length === 0){
        tbody.innerHTML = '';
        document.getElementById('empty-filtrado').style.display = 'block';
      } else {
        tbody.innerHTML = datos.items.map(filaHtml).join('');
      }

document.getElementById('btn-refrescar').addEventListener('click', ()=>{
    if (articuloElegido) generarReporte(paginaActual);
  });
  document.getElementById('btn-imprimir').addEventListener('click', ()=> window.print());

async function exportarExcel(){
    if (!articuloElegido) return;
    const btn = document.getElementById('btn-exportar');
    btn.disabled = true;
    document.getElementById('icono-exportar').outerHTML = ICONO_PROCESANDO.replace('<svg ', '<svg id="icono-exportar" ');
    document.getElementById('texto-exportar').textContent = 'Generando…';

try{
      const resp = await fetch(`${API_BASE}/inventario/movimiento-articulo/excel?${construirQuery(1)}`);
      if (!resp.ok){
        let detalle = `El servidor respondió ${resp.status}`;
        try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
        throw new Error(detalle);
      }
      const disposicion = resp.headers.get('Content-Disposition') || '';
      const match = disposicion.match(/filename="?([^"]+)"?/);
      const nombreArchivo = match ? match[1] : 'movimiento_item.xlsx';
      const blob = await resp.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = nombreArchivo;
      document.body.appendChild(a); a.click(); document.body.removeChild(a);
      URL.revokeObjectURL(url);
      document.getElementById('icono-exportar').outerHTML = ICONO_LISTO.replace('<svg ', '<svg id="icono-exportar" ');
      document.getElementById('texto-exportar').textContent = `Descargado: ${nombreArchivo}`;
      volverANormal(1800);
    }catch(err){
      const esConexion = err instanceof TypeError;
      document.getElementById('icono-exportar').outerHTML = ICONO_ERROR.replace('<svg ', '<svg id="icono-exportar" ');
      document.getElementById('texto-exportar').textContent = esConexion
        ? 'No se pudo conectar al backend (¿está corriendo uvicorn?)'
        : `Error: ${err.message}`;
      volverANormal(4000);
    }
  }
  document.getElementById('btn-exportar').addEventListener('click', exportarExcel);
  document.getElementById('btn-anterior').addEventListener('click', ()=>{
    if (paginaActual > 1) generarReporte(paginaActual - 1);
  });
  document.getElementById('btn-siguiente').addEventListener('click', ()=>{
    const totalPaginas = Math.max(1, Math.ceil(totalFilas / POR_PAGINA));
    if (paginaActual < totalPaginas) generarReporte(paginaActual + 1);
  });
  ['f-tipo','f-motivo','f-bodega'].forEach(id=>{
    document.getElementById(id).addEventListener('change', ()=>{ if (articuloElegido) generarReporte(1); });
  });
  document.getElementById('f-sucursal').addEventListener('change', (ev)=>{
    pintarOpcionesBodega(ev.target.value);
    if (articuloElegido) generarReporte(1);
  });
  ['f-desde','f-hasta'].forEach(id=>{
    document.getElementById(id).addEventListener('change', ()=>{ if (articuloElegido) generarReporte(1); });
  });
  let filtroTextoTimer = null;
  ['f-factura','f-cliente'].forEach(id=>{
    document.getElementById(id).addEventListener('input', ()=>{
      clearTimeout(filtroTextoTimer);
      filtroTextoTimer = setTimeout(()=>{ if (articuloElegido) generarReporte(1); }, 350);
    });
  });

(function init(){
    document.getElementById('f-desde').value = '2026-06-01';
    document.getElementById('f-hasta').value = '2026-07-13';
    cargarSucursales().then(()=> cargarBodegas()).catch(()=>{});
    input.focus();
  })();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Inventario por Bodega</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

.app{max-width:1180px; margin:0 auto; padding:28px 24px 64px;}

.resumen{
    display:flex; gap:24px; align-items:center;
    background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
    padding:14px 20px; margin-bottom:16px; flex-wrap:wrap;
  }
  .resumen .item .lbl{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .resumen .item .val{font-size:17px; font-weight:700;}

.table-wrap{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow);
  }
  table{border-collapse:collapse; width:100%; min-width:920px;}
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--ink-muted); font-weight:600; padding:10px 13px;
    border-bottom:1px solid var(--line-strong); background:var(--surface-2);
    position:sticky; top:0;
  }
  th.num, td.num{text-align:right;}
  tbody td{padding:9px 13px; border-bottom:1px solid var(--line); vertical-align:middle;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--surface-2);}
  .fila-cero td{color:var(--ink-muted);}
  .fila-hay .num.existencia{color:var(--accent); font-weight:700;}
  .no-vendible{
    font-size:10.5px; color:var(--ink-muted); border:1px solid var(--line-strong);
    border-radius:5px; padding:1px 5px; margin-left:6px; vertical-align:middle;
  }

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}

@media print{
    @page{ margin: 1.5cm; }
    .topbar .crumbs, .filters, .pagination-bar, .no-print{display:none !important;}
    body{background:#fff; color:#000;}
    .app{max-width:none; padding:0;}
    .table-wrap, .resumen{box-shadow:none; border:1px solid #000;}
    thead th{background:none !important; border-color:#000 !important;}
    .fila-hay .num.existencia{color:#000;}
  }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Inventario por Bodega</span>
    </div>
    <div class="crumbs"><b>Reportes</b> / Inventario por bodega</div>
  </div>

<div class="filters">
    <div class="field texto">
      <label for="f-texto">Ítem</label>
      <input type="text" id="f-texto" placeholder="ej. resma, taladro" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-codigo">Código interno</label>
      <input type="text" id="f-codigo" placeholder="código de barras" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-categoria">Categoría</label>
      <select id="f-categoria"><option value="">Todas</option></select>
    </div>
    <div class="field">
      <label for="f-marca">Marca</label>
      <select id="f-marca"><option value="">Todas</option></select>
    </div>
    <div class="field">
      <label for="f-vendible">Disponible para ventas</label>
      <select id="f-vendible">
        <option value="">Todos</option>
        <option value="true">Sí</option>
        <option value="false">No</option>
      </select>
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar">Refrescar</button>
    <button class="btn btn-primary no-print" id="btn-exportar">
      <svg id="icono-exportar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
      <span id="texto-exportar">Exportar a Excel</span>
    </button>
    <a class="btn btn-ghost no-print" href="articulos_ui.html" data-nav-shell="articulos">‹ Volver</a>
  </div>

<div class="resumen">
    <div class="item">
      <div class="lbl">Registros</div>
      <div class="val mono" id="res-total">—</div>
    </div>
    <div class="item">
      <div class="lbl">Costo total (₡)</div>
      <div class="val mono" id="res-costo">—</div>
    </div>
    <div class="foot-note" style="margin-left:auto; max-width:360px;">
      Existencia calculada al día de hoy. Escribe algo en Ítem, Código o elige Categoría/Marca
      para empezar — sin filtros el catálogo completo es muy grande para mostrarlo de golpe.
    </div>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Código</th><th>Ítem</th><th>Categoría</th><th>Marca</th><th>Bodega</th>
          <th class="num">Existencia</th><th class="num">Costo unit. (₡)</th><th class="num">Costo total (₡)</th>
        </tr>
      </thead>
      <tbody id="tbody-inventario"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay resultados</b>
      Escribe un ítem, código, o elige categoría/marca para ver la existencia por bodega.
    </div>
  </div>

<div class="pagination-bar">
    <div class="foot-note" id="foot-note"></div>
    <div class="pager">
      <button class="btn btn-sm" id="btn-anterior">‹ Anterior</button>
      <span class="pager-info" id="pager-info"></span>
      <button class="btn btn-sm" id="btn-siguiente">Siguiente ›</button>
    </div>
  </div>

</div>

const fmt = n => Number(n).toLocaleString('es-CR', {minimumFractionDigits:2, maximumFractionDigits:2});

async function cargarCategorias(){
    const filas = await llamarApi('/articulos/categorias');
    const sel = document.getElementById('f-categoria');
    filas.forEach(c=>{
      const opt = document.createElement('option');
      opt.value = c.id; opt.textContent = c.nombre;
      sel.appendChild(opt);
    });
  }
  async function cargarMarcas(){
    const filas = await llamarApi('/articulos/marcas');
    const sel = document.getElementById('f-marca');
    filas.forEach(m=>{
      const opt = document.createElement('option');
      opt.value = m.id; opt.textContent = m.nombre;
      sel.appendChild(opt);
    });
  }

function construirQuery(pagina){
    const params = new URLSearchParams();
    const texto = document.getElementById('f-texto').value.trim();
    const codigo = document.getElementById('f-codigo').value.trim();
    const categoriaId = document.getElementById('f-categoria').value;
    const marcaId = document.getElementById('f-marca').value;
    const vendible = document.getElementById('f-vendible').value;
    if (texto) params.set('texto', texto);
    if (codigo) params.set('codigo', codigo);
    if (categoriaId) params.set('categoria_id', categoriaId);
    if (marcaId) params.set('marca_id', marcaId);
    if (vendible) params.set('vendible', vendible);
    params.set('pagina', pagina);
    params.set('por_pagina', POR_PAGINA);
    return params.toString();
  }

function tieneFiltro(){
    return document.getElementById('f-texto').value.trim()
        || document.getElementById('f-codigo').value.trim()
        || document.getElementById('f-categoria').value
        || document.getElementById('f-marca').value
        || document.getElementById('f-vendible').value;
  }

async function generar(pagina){
    if (!tieneFiltro()){
      document.getElementById('tbody-inventario').innerHTML = '';
      document.getElementById('empty-state').style.display = 'block';
      document.getElementById('res-total').textContent = '0';
      document.getElementById('res-costo').textContent = '0,00';
      document.getElementById('foot-note').textContent = '';
      document.getElementById('pager-info').textContent = '';
      return;
    }
    paginaActual = pagina;
    const tbody = document.getElementById('tbody-inventario');
    tbody.innerHTML = `<tr><td colspan="8" style="text-align:center; padding:32px; color:var(--ink-muted);">Calculando…</td></tr>`;
    document.getElementById('empty-state').style.display = 'none';

try{
      const datos = await llamarApi(`/inventario/inventario-por-bodega?${construirQuery(pagina)}`);
      totalFilas = datos.total;
      document.getElementById('res-total').textContent = datos.total.toLocaleString('es-CR');
      document.getElementById('res-costo').textContent = fmt(datos.costo_total_crc);

if (datos.items.length === 0){
        tbody.innerHTML = '';
        document.getElementById('empty-state').style.display = 'block';
      } else {
        tbody.innerHTML = datos.items.map(filaHtml).join('');
      }

async function exportarExcel(){
    if (!tieneFiltro()) return;
    const btn = document.getElementById('btn-exportar');
    btn.disabled = true;
    document.getElementById('icono-exportar').outerHTML = ICONO_PROCESANDO.replace('<svg ', '<svg id="icono-exportar" ');
    document.getElementById('texto-exportar').textContent = 'Generando…';

try{
      const resp = await fetch(`${API_BASE}/inventario/inventario-por-bodega/excel?${construirQuery(1)}`);
      if (!resp.ok){
        let detalle = `El servidor respondió ${resp.status}`;
        try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
        throw new Error(detalle);
      }
      const disposicion = resp.headers.get('Content-Disposition') || '';
      const match = disposicion.match(/filename="?([^"]+)"?/);
      const nombreArchivo = match ? match[1] : 'inventario_por_bodega.xlsx';
      const blob = await resp.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = nombreArchivo;
      document.body.appendChild(a); a.click(); document.body.removeChild(a);
      URL.revokeObjectURL(url);
      document.getElementById('icono-exportar').outerHTML = ICONO_LISTO.replace('<svg ', '<svg id="icono-exportar" ');
      document.getElementById('texto-exportar').textContent = `Descargado: ${nombreArchivo}`;
      volverANormal(1800);
    }catch(err){
      const esConexion = err instanceof TypeError;
      document.getElementById('icono-exportar').outerHTML = ICONO_ERROR.replace('<svg ', '<svg id="icono-exportar" ');
      document.getElementById('texto-exportar').textContent = esConexion
        ? 'No se pudo conectar al backend (¿está corriendo uvicorn?)'
        : `Error: ${err.message}`;
      volverANormal(4000);
    }
  }
  document.getElementById('btn-exportar').addEventListener('click', exportarExcel);
  document.getElementById('btn-anterior').addEventListener('click', ()=>{
    if (paginaActual > 1) generar(paginaActual - 1);
  });
  document.getElementById('btn-siguiente').addEventListener('click', ()=>{
    const totalPaginas = Math.max(1, Math.ceil(totalFilas / POR_PAGINA));
    if (paginaActual < totalPaginas) generar(paginaActual + 1);
  });

(function init(){
    document.getElementById('f-texto').focus();
    cargarCategorias().catch(()=>{});
    cargarMarcas().catch(()=>{});
  })();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Rotación de Inventario</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

.app{max-width:1220px; margin:0 auto; padding:28px 24px 64px;}

.nota-metodo{
    background:var(--accent-soft); border:1px solid var(--accent); border-radius:9px;
    padding:11px 15px; font-size:12.5px; color:var(--ink); margin-bottom:16px; line-height:1.55;
  }
  .nota-metodo b{color:var(--accent);}

.pill{
    display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 8px;
    border-radius:99px; font-size:11.5px; font-weight:700; letter-spacing:.02em;
    border:1px solid transparent; white-space:nowrap;
  }
  .pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
  .pill-urgente{background:var(--red-bg); color:var(--red-ink); border-color:var(--red-line);}
  .pill-atencion{background:var(--amber-bg); color:var(--amber-ink); border-color:var(--amber-line);}
  .pill-ok{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
  .sin-dato{color:var(--ink-muted);}

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}

@media print{
    @page{ size: landscape; margin: 1.3cm; }
    .topbar .crumbs, .filters, .pagination-bar, .no-print{display:none !important;}
    body{background:#fff; color:#000;}
    .app{max-width:none; padding:0;}
    .table-wrap{box-shadow:none; border:1px solid #000;}
    thead th{background:none !important; border-color:#000 !important;}
    .pill{background:none !important; border:1px solid #000 !important; color:#000 !important;}
    .pill::before{display:none;}
  }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Rotación de Inventario</span>
    </div>
    <div class="crumbs"><b>Reportes</b> / Rotación de inventario</div>
  </div>

<div class="nota-metodo">
    <b>Rotación</b> = Salidas del período ÷ Existencia promedio del período — qué tan rápido se
    mueve un artículo. <b>Días de cobertura</b> = al ritmo de venta actual, para cuántos días
    alcanza lo que hay en existencia. (No es el mismo cálculo que "Entradas − Salidas" del
    sistema anterior — esa cuenta confundía movimiento con cambio neto de existencia.)
  </div>

<div class="filters">
    <div class="field">
      <label>Período</label>
      <div class="range">
        <input type="date" id="f-desde" class="mono">
        <span class="dash">–</span>
        <input type="date" id="f-hasta" class="mono">
      </div>
    </div>
    <div class="field texto">
      <label for="f-texto">Ítem</label>
      <input type="text" id="f-texto" placeholder="ej. resma, boligrafo" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-codigo">Código interno</label>
      <input type="text" id="f-codigo" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-categoria">Categoría</label>
      <select id="f-categoria"><option value="">Todas</option></select>
    </div>
    <div class="field">
      <label for="f-marca">Marca</label>
      <select id="f-marca"><option value="">Todas</option></select>
    </div>
    <div class="field">
      <label for="f-orden">Ordenar por</label>
      <select id="f-orden">
        <option value="rotacion_desc">Rotación (mayor a menor)</option>
        <option value="rotacion_asc">Rotación (menor a mayor)</option>
        <option value="cobertura_asc">Días de cobertura (más urgente primero)</option>
        <option value="salidas_desc">Salidas del período</option>
      </select>
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar">Refrescar</button>
    <button class="btn btn-ghost no-print" id="btn-imprimir">Imprimir</button>
    <button class="btn btn-primary no-print" id="btn-exportar">
      <svg id="icono-exportar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
      <span id="texto-exportar">Exportar a Excel</span>
    </button>
    <a class="btn btn-ghost no-print" href="articulos_ui.html" data-nav-shell="articulos">‹ Volver</a>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Código</th><th>Ítem</th><th>Categoría</th><th>Marca</th>
          <th class="num">Entradas</th><th class="num">Salidas</th>
          <th class="num">Exist. prom.</th><th class="num">Rotación</th>
          <th class="num">Días cobertura</th><th>Última salida</th>
        </tr>
      </thead>
      <tbody id="tbody-rotacion"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay artículos con movimiento en este período</b>
      Ajusta el rango de fechas o los filtros.
    </div>
  </div>

<div class="pagination-bar">
    <div class="foot-note" id="foot-note"></div>
    <div class="pager">
      <button class="btn btn-sm" id="btn-anterior">‹ Anterior</button>
      <span class="pager-info" id="pager-info"></span>
      <button class="btn btn-sm" id="btn-siguiente">Siguiente ›</button>
    </div>
  </div>

</div>

function construirQuery(pagina){
    const params = new URLSearchParams();
    params.set('fecha_inicio', document.getElementById('f-desde').value);
    params.set('fecha_fin', document.getElementById('f-hasta').value);
    const texto = document.getElementById('f-texto').value.trim();
    const codigo = document.getElementById('f-codigo').value.trim();
    const categoriaId = document.getElementById('f-categoria').value;
    const marcaId = document.getElementById('f-marca').value;
    if (texto) params.set('texto', texto);
    if (codigo) params.set('codigo', codigo);
    if (categoriaId) params.set('categoria_id', categoriaId);
    if (marcaId) params.set('marca_id', marcaId);
    params.set('orden', document.getElementById('f-orden').value);
    params.set('pagina', pagina);
    params.set('por_pagina', POR_PAGINA);
    return params.toString();
  }

function filaHtml(f){
    return `
      <tr>
        <td class="mono">${f.codigo}</td>
        <td>${f.nombre}</td>
        <td>${f.categoria || '—'}</td>
        <td>${f.marca || '—'}</td>
        <td class="num mono">${fmt(f.entradas_periodo)}</td>
        <td class="num mono">${fmt(f.salidas_periodo)}</td>
        <td class="num mono">${fmt(f.existencia_promedio)}</td>
        <td class="num mono">${f.rotacion === null ? '<span class="sin-dato">—</span>' : fmt(f.rotacion)}</td>
        <td class="num">${pillCobertura(f.dias_cobertura)}</td>
        <td class="mono">${fmtFecha(f.fecha_ultima_salida)}</td>
      </tr>
    `;
  }

async function generar(pagina){
    paginaActual = pagina;
    const tbody = document.getElementById('tbody-rotacion');
    tbody.innerHTML = `<tr><td colspan="10" style="text-align:center; padding:32px; color:var(--ink-muted);">Calculando rotación…</td></tr>`;
    document.getElementById('empty-state').style.display = 'none';

try{
      const datos = await llamarApi(`/inventario/rotacion?${construirQuery(pagina)}`);
      totalFilas = datos.total;
      if (datos.items.length === 0){
        tbody.innerHTML = '';
        document.getElementById('empty-state').style.display = 'block';
      } else {
        tbody.innerHTML = datos.items.map(filaHtml).join('');
      }
      const desde = datos.total === 0 ? 0 : (datos.pagina - 1) * datos.por_pagina + 1;
      const hasta = Math.min(datos.pagina * datos.por_pagina, datos.total);
      const totalPaginas = Math.max(1, Math.ceil(datos.total / datos.por_pagina));
      document.getElementById('foot-note').textContent =
        `Mostrando ${desde.toLocaleString('es-CR')}–${hasta.toLocaleString('es-CR')} de ${datos.total.toLocaleString('es-CR')} artículos con movimiento`;
      document.getElementById('pager-info').textContent = `Página ${datos.pagina} de ${totalPaginas}`;
      document.getElementById('btn-anterior').disabled = datos.pagina <= 1;
      document.getElementById('btn-siguiente').disabled = datos.pagina >= totalPaginas;
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="10" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
    }
  }

document.getElementById('btn-refrescar').addEventListener('click', ()=>generar(paginaActual));
  document.getElementById('btn-imprimir').addEventListener('click', ()=> window.print());

try{
      const resp = await fetch(`${API_BASE}/inventario/rotacion/excel?${construirQuery(1)}`);
      if (!resp.ok){
        let detalle = `El servidor respondió ${resp.status}`;
        try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
        throw new Error(detalle);
      }
      const disposicion = resp.headers.get('Content-Disposition') || '';
      const match = disposicion.match(/filename="?([^"]+)"?/);
      const nombreArchivo = match ? match[1] : 'rotacion_inventario.xlsx';
      const blob = await resp.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = nombreArchivo;
      document.body.appendChild(a); a.click(); document.body.removeChild(a);
      URL.revokeObjectURL(url);
      document.getElementById('icono-exportar').outerHTML = ICONO_LISTO.replace('<svg ', '<svg id="icono-exportar" ');
      document.getElementById('texto-exportar').textContent = `Descargado: ${nombreArchivo}`;
      volverANormal(1800);
    }catch(err){
      const esConexion = err instanceof TypeError;
      document.getElementById('icono-exportar').outerHTML = ICONO_ERROR.replace('<svg ', '<svg id="icono-exportar" ');
      document.getElementById('texto-exportar').textContent = esConexion
        ? 'No se pudo conectar al backend (¿está corriendo uvicorn?)'
        : `Error: ${err.message}`;
      volverANormal(4000);
    }
  }
  document.getElementById('btn-exportar').addEventListener('click', exportarExcel);
  document.getElementById('btn-anterior').addEventListener('click', ()=>{
    if (paginaActual > 1) generar(paginaActual - 1);
  });
  document.getElementById('btn-siguiente').addEventListener('click', ()=>{
    const totalPaginas = Math.max(1, Math.ceil(totalFilas / POR_PAGINA));
    if (paginaActual < totalPaginas) generar(paginaActual + 1);
  });
  ['f-desde','f-hasta','f-categoria','f-marca','f-orden'].forEach(id=>{
    document.getElementById(id).addEventListener('change', ()=>generar(1));
  });
  let debounceTimer = null;
  ['f-texto','f-codigo'].forEach(id=>{
    document.getElementById(id).addEventListener('input', ()=>{
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(()=>generar(1), 350);
    });
  });

(function init(){
    document.getElementById('f-desde').value = '2026-06-01';
    document.getElementById('f-hasta').value = '2026-07-13';
    document.getElementById('f-texto').focus();
    cargarCategorias().catch(()=>{});
    cargarMarcas().catch(()=>{});
    generar(1);
  })();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Consulta General de Inventario</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

.app{max-width:1280px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:16px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .field.texto{flex:1; min-width:220px;}
  .field.deshabilitado input{opacity:.5; cursor:not-allowed;}
  .filters .spacer{flex:1 1 100%; height:0;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-sm{padding:5px 12px; font-size:12.5px; border-radius:6px;}
  .btn[disabled]{opacity:.5; cursor:not-allowed;}

.acciones-seleccion{
    display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap;
  }
  .acciones-seleccion .info{font-size:12.5px; color:var(--ink-muted);}

.table-wrap{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow);
  }
  table{border-collapse:collapse; width:100%; min-width:1080px;}
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--ink-muted); font-weight:600; padding:10px 12px;
    border-bottom:1px solid var(--line-strong); background:var(--surface-2);
    position:sticky; top:0;
  }
  th.num, td.num{text-align:right;}
  tbody td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--surface-2);}
  .nombre-link{
    background:none; border:none; padding:0; color:var(--accent); font-weight:600;
    cursor:pointer; font-size:inherit; font-family:inherit; text-align:left; text-decoration:underline;
  }
  .sin-dato{color:var(--ink-muted);}

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}

.nota-alcance{
    background:var(--surface-2); border:1px solid var(--line); border-radius:9px;
    padding:11px 15px; font-size:12px; color:var(--ink-muted); margin-top:16px; line-height:1.6;
  }
  .nota-alcance b{color:var(--ink);}

/* ---------- modales ---------- */
  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:560px; width:100%;
    max-height:85vh; overflow-y:auto;
  }
  .modal-titulo{font-size:17px; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center;}
  .modal-titulo button{background:none; border:none; color:var(--ink-muted); cursor:pointer; font-size:18px; padding:0;}
  .resumen-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  .resumen-col h4{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin-bottom:10px;}
  .resumen-campo{margin-bottom:9px;}
  .resumen-campo label{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted);}
  .resumen-campo .val{font-size:13.5px;}
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px; margin-top:16px; border-top:1px solid var(--line); padding-top:14px;}

table.hist{width:100%; border-collapse:collapse; margin-top:4px;}
  table.hist th{font-size:10.5px; text-transform:uppercase; color:var(--ink-muted); text-align:right; padding:6px 8px; border-bottom:1px solid var(--line-strong);}
  table.hist th:first-child, table.hist td:first-child{text-align:left;}
  table.hist td{padding:7px 8px; border-bottom:1px solid var(--line); text-align:right; font-size:13px;}

@media print{
    .topbar .crumbs, .filters, .pagination-bar, .no-print{display:none !important;}
  }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Consulta General de Inventario</span>
    </div>
    <div class="crumbs"><b>Reportes</b> / Consulta general de inventario</div>
  </div>

<div class="filters">
    <div class="field texto">
      <label for="f-texto">Ítem</label>
      <input type="text" id="f-texto" placeholder="ej. resma, cartucho" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-codigo">Código interno</label>
      <input type="text" id="f-codigo" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-bodega">Bodega</label>
      <select id="f-bodega"><option value="">Todas</option></select>
    </div>
    <div class="field">
      <label for="f-categoria">Categoría</label>
      <select id="f-categoria"><option value="">Todas</option></select>
    </div>
    <div class="field">
      <label for="f-marca">Marca</label>
      <select id="f-marca"><option value="">Todas</option></select>
    </div>
    <div class="field deshabilitado">
      <label for="f-proveedor">Proveedor</label>
      <input type="text" id="f-proveedor" disabled title="Pendiente: todavía no existe catálogo de proveedores en Fénix" placeholder="próximamente">
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar">Refrescar</button>
    <button class="btn btn-primary no-print" id="btn-exportar">
      <svg id="icono-exportar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
      <span id="texto-exportar">Exportar a Excel</span>
    </button>
    <a class="btn btn-ghost no-print" href="articulos_ui.html" data-nav-shell="articulos">‹ Volver</a>
  </div>

<div class="acciones-seleccion">
    <button class="btn btn-sm" id="btn-historial" disabled>Historial de compras</button>
    <span class="info" id="seleccion-info">Selecciona un artículo con el checkbox para ver su historial de compras.</span>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th></th><th>Código</th><th>Ítem</th><th>Categoría</th><th>Marca</th><th>Bodega</th>
          <th class="num">Existencia</th><th class="num">Costo unit. (₡)</th>
          <th class="num">Rotación (mes)</th><th class="num">Días cobertura</th>
        </tr>
      </thead>
      <tbody id="tbody-consulta"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay resultados</b>
      Escribe un ítem, código, o elige categoría/marca/bodega.
    </div>
  </div>

<div class="pagination-bar">
    <div class="foot-note" id="foot-note"></div>
    <div class="pager">
      <button class="btn btn-sm" id="btn-anterior">‹ Anterior</button>
      <span class="pager-info" id="pager-info"></span>
      <button class="btn btn-sm" id="btn-siguiente">Siguiente ›</button>
    </div>
  </div>

<div class="nota-alcance">
    <b>Alcance de esta primera versión:</b> no incluye Proveedor (todavía no existe ese
    catálogo), ni las acciones de Crear factura / Agregar a orden de compra / Agregar a
    traslado / Crear proforma (dependen de los futuros módulos de Facturación y Proveeduría).
    Tampoco incluye Precio de venta, Utilidad % ni Comisión sobre venta (esos campos no se han
    agregado al catálogo de artículos todavía). "Rotación (mes)" se calcula del 1° del mes
    actual a hoy — cambia el rango si necesitas otro período.
  </div>

</div>

<div class="modal-overlay" id="modal-resumen">
  <div class="modal-box">
    <div class="modal-titulo">
      <span id="resumen-titulo">Ítem</span>
      <button id="cerrar-resumen">✕</button>
    </div>
    <div class="resumen-grid">
      <div class="resumen-col">
        <h4>Última compra</h4>
        <div id="resumen-compra"></div>
      </div>
      <div class="resumen-col">
        <h4>Última venta</h4>
        <div id="resumen-venta"></div>
      </div>
    </div>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="cerrar-resumen-2">Cerrar</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="modal-historial">
  <div class="modal-box" style="max-width:640px;">
    <div class="modal-titulo">
      <span id="historial-titulo">Historial de compras</span>
      <button id="cerrar-historial">✕</button>
    </div>
    <div id="historial-contenido"></div>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="cerrar-historial-2">Cerrar</button>
    </div>
  </div>
</div>

async function cargarCombos(){
    const [cats, marcas, bodegas] = await Promise.all([
      llamarApi('/articulos/categorias'), llamarApi('/articulos/marcas'), llamarApi('/inventario/bodegas'),
    ]);
    const selCat = document.getElementById('f-categoria');
    cats.forEach(c=>{ const o=document.createElement('option'); o.value=c.id; o.textContent=c.nombre; selCat.appendChild(o); });
    const selMarca = document.getElementById('f-marca');
    marcas.forEach(m=>{ const o=document.createElement('option'); o.value=m.id; o.textContent=m.nombre; selMarca.appendChild(o); });
    const selBodega = document.getElementById('f-bodega');
    bodegas.forEach(b=>{ const o=document.createElement('option'); o.value=b.id; o.textContent=b.nombre; selBodega.appendChild(o); });
  }

function construirQuery(pagina){
    const params = new URLSearchParams();
    const texto = document.getElementById('f-texto').value.trim();
    const codigo = document.getElementById('f-codigo').value.trim();
    const bodegaId = document.getElementById('f-bodega').value;
    const categoriaId = document.getElementById('f-categoria').value;
    const marcaId = document.getElementById('f-marca').value;
    if (texto) params.set('texto', texto);
    if (codigo) params.set('codigo', codigo);
    if (bodegaId) params.set('bodega_id', bodegaId);
    if (categoriaId) params.set('categoria_id', categoriaId);
    if (marcaId) params.set('marca_id', marcaId);
    params.set('pagina', pagina);
    params.set('por_pagina', POR_PAGINA);
    return params.toString();
  }

function tieneFiltro(){
    return document.getElementById('f-texto').value.trim()
        || document.getElementById('f-codigo').value.trim()
        || document.getElementById('f-bodega').value
        || document.getElementById('f-categoria').value
        || document.getElementById('f-marca').value;
  }

async function generar(pagina){
    if (!tieneFiltro()){
      document.getElementById('tbody-consulta').innerHTML = '';
      document.getElementById('empty-state').style.display = 'block';
      document.getElementById('foot-note').textContent = '';
      document.getElementById('pager-info').textContent = '';
      return;
    }
    paginaActual = pagina;
    const tbody = document.getElementById('tbody-consulta');
    tbody.innerHTML = `<tr><td colspan="10" style="text-align:center; padding:32px; color:var(--ink-muted);">Calculando…</td></tr>`;
    document.getElementById('empty-state').style.display = 'none';

try{
      const datos = await llamarApi(`/inventario/consulta-general?${construirQuery(pagina)}`);
      totalFilas = datos.total;
      if (datos.items.length === 0){
        tbody.innerHTML = '';
        document.getElementById('empty-state').style.display = 'block';
      } else {
        tbody.innerHTML = datos.items.map(filaHtml).join('');
      }
      const desde = datos.total === 0 ? 0 : (datos.pagina - 1) * datos.por_pagina + 1;
      const hasta = Math.min(datos.pagina * datos.por_pagina, datos.total);
      const totalPaginas = Math.max(1, Math.ceil(datos.total / datos.por_pagina));
      document.getElementById('foot-note').textContent =
        `Mostrando ${desde.toLocaleString('es-CR')}–${hasta.toLocaleString('es-CR')} de ${datos.total.toLocaleString('es-CR')} registros`;
      document.getElementById('pager-info').textContent = `Página ${datos.pagina} de ${totalPaginas}`;
      document.getElementById('btn-anterior').disabled = datos.pagina <= 1;
      document.getElementById('btn-siguiente').disabled = datos.pagina >= totalPaginas;
      actualizarSeleccion();
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="10" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
    }
  }

// ---------------- selección + historial de compras ----------------
  function actualizarSeleccion(){
    articuloSeleccionado = null;
    document.getElementById('btn-historial').disabled = true;
    document.getElementById('seleccion-info').textContent = 'Selecciona un artículo con el checkbox para ver su historial de compras.';
  }
  document.getElementById('tbody-consulta').addEventListener('change', (ev)=>{
    if (!ev.target.classList.contains('chk-articulo')) return;
    document.querySelectorAll('.chk-articulo').forEach(c=>{ if (c !== ev.target) c.checked = false; });
    if (ev.target.checked){
      articuloSeleccionado = {id: Number(ev.target.dataset.id), codigo: ev.target.dataset.codigo, nombre: ev.target.dataset.nombre};
      document.getElementById('btn-historial').disabled = false;
      document.getElementById('seleccion-info').textContent = `Seleccionado: ${articuloSeleccionado.codigo} — ${articuloSeleccionado.nombre}`;
    } else {
      actualizarSeleccion();
    }
  });

// ---------------- modal: resumen última compra/venta (clic en el nombre) ----------------
  const modalResumen = document.getElementById('modal-resumen');
  function campoResumen(etiqueta, valor){
    return `<div class="resumen-campo"><label>${etiqueta}</label><div class="val mono">${valor}</div></div>`;
  }
  function bloqueMovimiento(m){
    if (!m) return `<div class="sin-dato">Sin movimientos registrados</div>`;
    return campoResumen('Número', m.numero_movimiento_origen || '—')
      + campoResumen('Documento', m.numero_documento_origen || '—')
      + campoResumen('Fecha', fmtFecha(m.fecha))
      + campoResumen('Cantidad', fmt(m.cantidad))
      + campoResumen('Costo unitario (₡)', fmt(m.costo_unitario_crc));
  }
  async function abrirResumen(id, codigo, nombre){
    document.getElementById('resumen-titulo').textContent = `${codigo} — ${nombre}`;
    document.getElementById('resumen-compra').innerHTML = `<div class="sin-dato">Cargando…</div>`;
    document.getElementById('resumen-venta').innerHTML = '';
    modalResumen.classList.add('abierto');
    try{
      const datos = await llamarApi(`/inventario/articulo-resumen?articulo_id=${id}`);
      document.getElementById('resumen-compra').innerHTML = bloqueMovimiento(datos.ultima_compra)
        + `<div class="foot-note" style="margin-top:6px;">Proveedor: <span class="sin-dato">no disponible todavía</span></div>`;
      document.getElementById('resumen-venta').innerHTML = bloqueMovimiento(datos.ultima_venta)
        + `<div class="foot-note" style="margin-top:6px;">Precio de venta / utilidad: <span class="sin-dato">no disponible todavía</span></div>`;
    }catch(e){
      document.getElementById('resumen-compra').innerHTML = `<div class="sin-dato">${e.message}</div>`;
    }
  }
  document.getElementById('tbody-consulta').addEventListener('click', (ev)=>{
    const btn = ev.target.closest('.nombre-link');
    if (!btn) return;
    abrirResumen(btn.dataset.id, btn.dataset.codigo, btn.dataset.nombre);
  });
  function cerrarResumen(){ modalResumen.classList.remove('abierto'); }
  document.getElementById('cerrar-resumen').addEventListener('click', cerrarResumen);
  document.getElementById('cerrar-resumen-2').addEventListener('click', cerrarResumen);

// ---------------- modal: historial de compras ----------------
  const modalHistorial = document.getElementById('modal-historial');
  document.getElementById('btn-historial').addEventListener('click', async ()=>{
    if (!articuloSeleccionado) return;
    document.getElementById('historial-titulo').textContent = `Historial de compras — ${articuloSeleccionado.codigo} — ${articuloSeleccionado.nombre}`;
    document.getElementById('historial-contenido').innerHTML = `<div class="sin-dato">Cargando…</div>`;
    modalHistorial.classList.add('abierto');
    try{
      const filas = await llamarApi(`/inventario/historial-compras?articulo_id=${articuloSeleccionado.id}`);
      if (filas.length === 0){
        document.getElementById('historial-contenido').innerHTML = `<div class="sin-dato">Sin compras registradas para este artículo.</div>`;
        return;
      }
      document.getElementById('historial-contenido').innerHTML = `
        <table class="hist">
          <thead><tr><th>Fecha</th><th>Documento</th><th>Cantidad</th><th>Costo unit. (₡)</th><th>Costo total (₡)</th></tr></thead>
          <tbody>
            ${filas.map(f=>`
              <tr>
                <td class="mono">${fmtFecha(f.fecha)}</td>
                <td class="mono">${f.numero_documento_origen || '—'}</td>
                <td class="mono">${fmt(f.cantidad)}</td>
                <td class="mono">${fmt(f.costo_unitario_crc)}</td>
                <td class="mono">${fmt(f.costo_total_crc)}</td>
              </tr>
            `).join('')}
          </tbody>
        </table>
        <div class="foot-note" style="margin-top:8px;">Proveedor: <span class="sin-dato">no disponible todavía</span></div>
      `;
    }catch(e){
      document.getElementById('historial-contenido').innerHTML = `<div class="sin-dato">${e.message}</div>`;
    }
  });
  function cerrarHistorial(){ modalHistorial.classList.remove('abierto'); }
  document.getElementById('cerrar-historial').addEventListener('click', cerrarHistorial);
  document.getElementById('cerrar-historial-2').addEventListener('click', cerrarHistorial);
  document.addEventListener('keydown', e=>{
    if (e.key === 'Escape'){ cerrarResumen(); cerrarHistorial(); }
  });

// ---------------- filtros ----------------
  let debounceTimer = null;
  ['f-texto','f-codigo'].forEach(id=>{
    document.getElementById(id).addEventListener('input', ()=>{
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(()=>generar(1), 350);
    });
  });
  ['f-bodega','f-categoria','f-marca'].forEach(id=>{
    document.getElementById(id).addEventListener('change', ()=>generar(1));
  });
  document.getElementById('btn-refrescar').addEventListener('click', ()=>generar(paginaActual));

try{
      const resp = await fetch(`${API_BASE}/inventario/consulta-general/excel?${construirQuery(1)}`);
      if (!resp.ok){
        let detalle = `El servidor respondió ${resp.status}`;
        try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
        throw new Error(detalle);
      }
      const disposicion = resp.headers.get('Content-Disposition') || '';
      const match = disposicion.match(/filename="?([^"]+)"?/);
      const nombreArchivo = match ? match[1] : 'consulta_general_inventario.xlsx';
      const blob = await resp.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = nombreArchivo;
      document.body.appendChild(a); a.click(); document.body.removeChild(a);
      URL.revokeObjectURL(url);
      document.getElementById('icono-exportar').outerHTML = ICONO_LISTO.replace('<svg ', '<svg id="icono-exportar" ');
      document.getElementById('texto-exportar').textContent = `Descargado: ${nombreArchivo}`;
      volverANormal(1800);
    }catch(err){
      const esConexion = err instanceof TypeError;
      document.getElementById('icono-exportar').outerHTML = ICONO_ERROR.replace('<svg ', '<svg id="icono-exportar" ');
      document.getElementById('texto-exportar').textContent = esConexion
        ? 'No se pudo conectar al backend (¿está corriendo uvicorn?)'
        : `Error: ${err.message}`;
      volverANormal(4000);
    }
  }
  document.getElementById('btn-exportar').addEventListener('click', exportarExcel);
  document.getElementById('btn-anterior').addEventListener('click', ()=>{ if (paginaActual > 1) generar(paginaActual - 1); });
  document.getElementById('btn-siguiente').addEventListener('click', ()=>{
    const totalPaginas = Math.max(1, Math.ceil(totalFilas / POR_PAGINA));
    if (paginaActual < totalPaginas) generar(paginaActual + 1);
  });

(function init(){
    document.getElementById('f-texto').focus();
    cargarCombos().catch(()=>{});
  })();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Catálogo de Artículos</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

.app{max-width:1180px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:220px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:170px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-sm{padding:5px 12px; font-size:12.5px; border-radius:6px;}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}

.icon-btn{
    background:none; border:1px solid transparent; border-radius:6px; padding:5px;
    cursor:pointer; color:var(--ink-muted); display:inline-flex;
  }
  .icon-btn:hover{background:var(--surface-2); color:var(--ink);}
  .icon-btn.danger:hover{color:var(--red-ink); background:var(--red-bg);}
  .acciones-cell{display:flex; gap:4px; align-items:center;}

.overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; z-index:200;
  }
  .overlay.abierto{display:flex;}
  .panel{
    background:var(--surface); border-radius:12px; box-shadow:var(--shadow);
    width:100%; max-width:720px; padding:22px 24px 24px;
  }
  .panel-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
  .panel-header h2{font-size:18px;}
  .seccion{margin-bottom:18px;}
  .seccion h3{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin-bottom:10px;}
  .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:10px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input, .form-field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%;
  }
  .form-field.check{flex-direction:row; align-items:center; gap:8px;}
  .form-field.check input{width:auto;}
  .form-field.check label{margin:0;}
  .form-field .ayuda{font-size:11.5px; color:var(--ink-muted); margin-top:2px;}
  /* Convención de campo obligatorio (asterisco rojo), mismo criterio que clientes_ui.html. */
  .form-field label.requerido::after{content:" *"; color:var(--red-ink); font-weight:700;}
  .form-nota{
    font-size:12px; color:var(--ink-muted); background:var(--surface-2); border:1px solid var(--line);
    border-radius:7px; padding:8px 10px; margin:10px 0;
  }
  .registro-acciones{display:flex; justify-content:flex-end; gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line);}

.table-wrap{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow);
  }
  table{border-collapse:collapse; width:100%; min-width:920px;}
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--ink-muted); font-weight:600; padding:11px 14px;
    border-bottom:1px solid var(--line-strong); background:var(--surface-2);
    position:sticky; top:0;
  }
  th.num, td.num{text-align:right;}
  tbody td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
  tbody tr.fila-articulo{cursor:pointer;}
  tbody tr.fila-articulo:hover{background:var(--surface-2);}
  tbody tr.fila-detalle td{background:var(--surface-2); border-bottom:1px solid var(--line);}
  tbody tr:last-child td{border-bottom:none;}
  td.nombre-cell{max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.tag-modulo{
    font-size:11.5px; color:var(--ink-muted); border:1px solid var(--line-strong);
    border-radius:6px; padding:2px 7px; white-space:nowrap;
  }

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}

.detalle-grid{
    display:grid; grid-template-columns:repeat(4,1fr) auto; gap:10px 24px; padding:6px 4px;
  }
  .detalle-grid label{
    display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-muted); margin-bottom:3px;
  }
  .detalle-grid div div{font-size:13px;}

.bodegas-grupo{border:1px solid var(--line); border-radius:8px; margin-bottom:10px; overflow:hidden;}
  .bodegas-grupo-header{
    display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--surface-2);
    font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    cursor:pointer; user-select:none;
  }
  .bodegas-grupo-filas{padding:4px 12px 8px;}
  .bodegas-fila{display:flex; align-items:center; gap:8px; padding:5px 0; font-size:13.5px;}
  .bodegas-fila input, .bodegas-grupo-header input{width:auto;}

.proveedores-box{grid-column:1 / -1; margin-top:4px;}
  .proveedores-box .muted-cell{color:var(--ink-muted);}
  .proveedores-box table{width:100%; border-collapse:collapse; margin-top:6px;}
  .proveedores-box th{
    text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-muted); padding:5px 8px; border-bottom:1px solid var(--line);
  }
  .proveedores-box th.num, .proveedores-box td.num{text-align:right;}
  .proveedores-box td{padding:6px 8px; font-size:13px; border-bottom:1px solid var(--line);}
  .proveedores-box tr:last-child td{border-bottom:none;}
  .prov-agregar-form{
    display:none; gap:8px; align-items:end; margin-top:10px; padding:10px; flex-wrap:wrap;
    background:var(--bg); border:1px solid var(--line); border-radius:8px;
  }
  .prov-agregar-form.abierto{display:flex;}
  .prov-agregar-form .campo{display:flex; flex-direction:column; gap:4px;}
  .prov-agregar-form label{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted);}
  .prov-agregar-form input, .prov-agregar-form select{
    background:var(--surface); border:1px solid var(--line-strong); border-radius:6px;
    padding:6px 8px; font-size:13px; color:var(--ink);
  }
  .prov-buscador{position:relative;}
  .prov-sug{
    position:fixed; background:var(--surface); border:1px solid var(--line); border-radius:8px;
    box-shadow:var(--shadow); max-height:220px; overflow-y:auto; z-index:60; display:none; min-width:220px;
  }
  .prov-sug.abierta{display:block;}
  .prov-sug .sug-item{padding:7px 10px; cursor:pointer; font-size:13px; border-bottom:1px solid var(--line);}
  .prov-sug .sug-item:last-child{border-bottom:none;}
  .prov-sug .sug-item:hover{background:var(--surface-2);}
  .prov-elegido{font-size:13px; padding:6px 0; color:var(--accent, var(--ink));}

.imagen-box{display:flex; flex-direction:column; gap:6px; min-width:120px;}
  .imagen-preview{
    width:96px; height:96px; border:1px solid var(--line-strong); border-radius:8px;
    background:var(--surface); display:flex; align-items:center; justify-content:center;
    overflow:hidden; font-size:11px; text-align:center; padding:4px;
  }
  .imagen-preview img{width:100%; height:100%; object-fit:cover;}
  .imagen-acciones{display:flex; gap:6px;}
  .imagen-acciones .btn-sm{padding:4px 9px; font-size:11.5px;}
  .imagen-subir-label{position:relative; overflow:hidden;}
  .imagen-subir-label input[type="file"]{
    position:absolute; inset:0; opacity:0; cursor:pointer; width:100%;
  }

/* ---------- modal propio (los diálogos nativos quedan bloqueados dentro del
     iframe del shell/Artifact -- confirm()/alert() no sirven aquí) ---------- */
  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:420px; width:100%;
  }
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}

@media print{
    @page{ margin: 1.5cm; }
    .topbar .crumbs, .filters, .pagination-bar, .no-print{display:none !important;}
    body{background:#fff; color:#000;}
    .app{max-width:none; padding:0;}
    .table-wrap{box-shadow:none; border:1px solid #000;}
    thead th{background:none !important; border-color:#000 !important;}
    .pill{background:none !important; border:1px solid #000 !important; color:#000 !important;}
    .pill::before{display:none;}
    .tag-modulo{border-color:#000; color:#000;}
  }

@media (max-width:760px){
    .detalle-grid{grid-template-columns:repeat(2,1fr);}
  }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Catálogo de Artículos</span>
    </div>
    <div class="crumbs"><b>Configuración</b> / Ítems</div>
  </div>

<div class="filters">
    <div class="field texto">
      <label for="f-texto">Buscar (código o nombre)</label>
      <input type="text" id="f-texto" placeholder="ej. taladro, 050875002432" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-categoria">Categoría</label>
      <select id="f-categoria"><option value="">Todas</option></select>
    </div>
    <div class="field">
      <label for="f-marca">Marca</label>
      <select id="f-marca"><option value="">Todas</option></select>
    </div>
    <div class="field">
      <label for="f-activo">Estado</label>
      <select id="f-activo">
        <option value="">Todos</option>
        <option value="true">Activos</option>
        <option value="false">Inactivos</option>
      </select>
    </div>
    <div class="spacer"></div>
    <a class="btn btn-ghost btn-sm" href="categorias_articulo_ui.html" data-nav-shell="categorias">Gestionar categorías</a>
    <a class="btn btn-ghost btn-sm" href="marcas_articulo_ui.html" data-nav-shell="marcas">Gestionar marcas</a>
    <button class="btn btn-ghost" id="btn-limpiar">Limpiar filtros</button>
    <button class="btn btn-ghost" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-ghost no-print" id="btn-excel">📊 Exportar a Excel</button>
    <button class="btn btn-primary" id="btn-nuevo">+ Nuevo</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th></th><th>Código</th><th>Artículo</th><th>Categoría</th><th>Marca</th><th>Tipo</th>
          <th class="num">Costo</th><th>IVA</th><th>Estado</th>
        </tr>
      </thead>
      <tbody id="tbody-articulos"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay artículos con estos filtros</b>
      Ajusta el texto, la categoría, la marca o el estado, o límpialos para ver todo el catálogo.
    </div>
  </div>

<div class="pagination-bar">
    <div class="foot-note" id="foot-note">Cargando…</div>
    <div class="pager">
      <button class="btn btn-sm" id="btn-anterior">‹ Anterior</button>
      <span class="pager-info" id="pager-info"></span>
      <button class="btn btn-sm" id="btn-siguiente">Siguiente ›</button>
    </div>
  </div>

</div>

<div class="overlay" id="registro-overlay">
  <div class="panel">
    <div class="panel-header">
      <h2 id="registro-titulo">Nuevo Artículo</h2>
      <button class="icon-btn" id="btn-cerrar-registro">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 6 6 18M6 6l12 12"/></svg>
      </button>
    </div>
    <div class="form-nota"><span style="color:var(--red-ink); font-weight:700;">*</span> Campo obligatorio (Costo y Precio de venta, solo si el artículo es Vendible)</div>

<div class="seccion">
      <h3>Información</h3>
      <div class="grid-2">
        <div class="form-field">
          <label>Código</label>
          <input type="text" id="reg-codigo">
        </div>
        <div class="form-field">
          <label>Nombre</label>
          <input type="text" id="reg-nombre">
        </div>
      </div>
      <div class="form-field">
        <label>Descripción</label>
        <input type="text" id="reg-descripcion">
      </div>
    </div>

<div class="seccion">
      <h3>Configuración</h3>
      <div class="grid-2">
        <div class="form-field">
          <label>Categoría</label>
          <select id="reg-categoria"><option value="">— Sin categoría —</option></select>
        </div>
        <div class="form-field">
          <label>Marca</label>
          <select id="reg-marca"><option value="">— Sin marca —</option></select>
        </div>
      </div>
      <div class="grid-3">
        <div class="form-field check"><input type="checkbox" id="reg-activo" checked><label for="reg-activo">Activo</label></div>
        <div class="form-field check"><input type="checkbox" id="reg-vendible" checked><label for="reg-vendible">Vendible</label></div>
        <div class="form-field check"><input type="checkbox" id="reg-comprable" checked><label for="reg-comprable">Comprable</label></div>
      </div>
      <div class="grid-2">
        <div class="form-field">
          <label>Código CABYS</label>
          <input type="text" id="reg-cabys">
        </div>
        <div class="form-field">
          <label>Unidad de medida</label>
          <select id="reg-unidad-medida"><option value="">Cargando…</option></select>
          <span class="ayuda">Catálogo oficial de Hacienda -- no editable a mano.</span>
        </div>
      </div>
    </div>

<div class="seccion">
      <h3>Compras</h3>
      <div class="grid-3">
        <div class="form-field">
          <label>Moneda</label>
          <select id="reg-moneda">
            <option value="CRC">CRC</option>
            <option value="USD">USD</option>
          </select>
        </div>
        <div class="form-field">
          <label id="lbl-costo" for="reg-costo" class="requerido">Costo sin impuesto</label>
          <input type="number" id="reg-costo" min="0" step="0.01">
          <span class="ayuda">Obligatorio si el artículo es Vendible -- de este dato depende el margen y el costo de ventas real.</span>
        </div>
        <div class="form-field">
          <label>Tarifa de IVA</label>
          <select id="reg-tarifa-iva"><option value="">Cargando…</option></select>
          <span class="ayuda">Catálogo oficial de Hacienda -- no editable a mano.</span>
        </div>
      </div>
    </div>

<div class="seccion">
      <h3>Ventas</h3>
      <div class="grid-3">
        <div class="form-field">
          <label>Tipo de costo</label>
          <select id="reg-tipo-costo">
            <option value="Unidad">Por unidad</option>
            <option value="Peso">Por peso</option>
          </select>
        </div>
        <div class="form-field">
          <label id="lbl-precio-venta" for="reg-precio-venta" class="requerido">Precio de venta</label>
          <input type="number" id="reg-precio-venta" min="0" step="0.01">
        </div>
        <div class="form-field">
          <label>Margen de utilidad</label>
          <div class="mono" id="reg-margen-utilidad" style="padding:8px 0; color:var(--ink-muted);">—</div>
        </div>
      </div>
      <div class="grid-3">
        <div class="form-field">
          <label>Descuento máximo (%)</label>
          <input type="number" id="reg-descuento-maximo" min="0" max="100" step="0.01">
        </div>
        <div class="form-field">
          <label>Utilidad mínima (%)</label>
          <input type="number" id="reg-utilidad-minima" min="0" step="0.01">
        </div>
        <div class="form-field">
          <label>Comisión de venta (%)</label>
          <input type="number" id="reg-comision-venta" min="0" max="100" step="0.01">
        </div>
      </div>
    </div>

<div class="seccion">
      <h3>Inventario</h3>
      <div class="grid-2">
        <div class="form-field">
          <label>Cantidad mínima</label>
          <input type="number" id="reg-cant-min" min="0" step="0.01">
        </div>
        <div class="form-field">
          <label>Cantidad máxima</label>
          <input type="number" id="reg-cant-max" min="0" step="0.01">
        </div>
      </div>
    </div>

<div class="registro-acciones">
      <button class="btn btn-ghost" id="btn-cancelar-registro">Cerrar</button>
      <button class="btn btn-primary" id="btn-guardar-registro">Guardar</button>
    </div>
  </div>
</div>

<div class="overlay" id="bodegas-overlay">
  <div class="panel" style="max-width:480px;">
    <div class="panel-header">
      <h2 id="bodegas-titulo">Crear inventario por bodega</h2>
      <button class="icon-btn" id="btn-cerrar-bodegas">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 6 6 18M6 6l12 12"/></svg>
      </button>
    </div>
    <p style="font-size:13px; color:var(--ink-muted); margin-bottom:14px;">
      Habilita las bodegas donde este artículo puede tener existencia. La existencia real se
      calcula sola desde los movimientos de inventario -- aquí solo se define el permiso.
      Mientras no habilite ninguna, el artículo queda sin restricción (como hoy).
    </p>
    <div id="bodegas-lista" style="max-height:360px; overflow-y:auto;">Cargando…</div>
    <div class="registro-acciones">
      <button class="btn btn-ghost" id="btn-cancelar-bodegas">Cancelar</button>
      <button class="btn btn-primary" id="btn-guardar-bodegas">Aceptar</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

function cerrar(valor){
        modalOverlay.classList.remove('abierto');
        modalAceptar.onclick = null;
        modalCancelar.onclick = null;
        document.removeEventListener('keydown', onKey);
        resolve(valor);
      }
      function onKey(e){ if (e.key === 'Escape') cerrar(false); }
      modalAceptar.onclick = ()=> cerrar(true);
      modalCancelar.onclick = ()=> cerrar(false);
      document.addEventListener('keydown', onKey);

modalOverlay.classList.add('abierto');
      setTimeout(()=> modalAceptar.focus(), 30);
    });
  }
  function modalAlert(mensaje, titulo='Aviso'){
    return mostrarModal({titulo, mensaje, tipo:'alert', botonAceptar:'Entendido'});
  }
  function modalConfirm(mensaje, titulo='Confirmar', colorAceptar='primary', botonAceptar='Confirmar'){
    return mostrarModal({titulo, mensaje, tipo:'confirm', botonAceptar, colorAceptar});
  }

const fmt = n => Number(n).toLocaleString('es-CR', {minimumFractionDigits:2, maximumFractionDigits:2});

function construirQuery(pagina){
    const params = new URLSearchParams();
    const texto = document.getElementById('f-texto').value.trim();
    const categoriaId = document.getElementById('f-categoria').value;
    const marcaId = document.getElementById('f-marca').value;
    const activo = document.getElementById('f-activo').value;
    if (texto) params.set('texto', texto);
    if (categoriaId) params.set('categoria_id', categoriaId);
    if (marcaId) params.set('marca_id', marcaId);
    if (activo) params.set('activo', activo);
    params.set('pagina', pagina);
    params.set('por_pagina', POR_PAGINA);
    return params.toString();
  }

async function cargarCategorias(){
    const filas = await llamarApi('/articulos/categorias');
    totalCategorias = filas.length;
    const sel = document.getElementById('f-categoria');
    filas.forEach(c=>{
      const opt = document.createElement('option');
      opt.value = c.id; opt.textContent = c.nombre;
      sel.appendChild(opt);
    });
  }

async function cargarMarcas(){
    const filas = await llamarApi('/articulos/marcas');
    totalMarcas = filas.length;
    const sel = document.getElementById('f-marca');
    filas.forEach(m=>{
      const opt = document.createElement('option');
      opt.value = m.id; opt.textContent = m.nombre;
      sel.appendChild(opt);
    });
  }

// ---------------- Formulario Nuevo/Modificar ----------------
  const USUARIO_ACTUAL = 'contador';
  const registroOverlay = document.getElementById('registro-overlay');
  let articuloEnEdicion = null;
  let categoriasCache = [], marcasCache = [];

// Catálogo oficial de Hacienda (db/schema/079) -- se pinta una sola vez al arrancar, el
  // usuario nunca escribe el código a mano, solo elige de esta lista.
  async function cargarTarifasIva(){
    const filas = await llamarApi('/articulos/tarifas-iva');
    const sel = document.getElementById('reg-tarifa-iva');
    sel.innerHTML = '<option value="">— Elegir —</option>' +
      filas.map(t => `<option value="${t.codigo}">${t.nombre}</option>`).join('');
  }

// Catálogo oficial de Hacienda (db/schema/085) -- completo, sin recortar, indistintamente de
  // si esta empresa usa hoy cada unidad o no.
  async function cargarUnidadesMedida(){
    const filas = await llamarApi('/articulos/unidades-medida');
    const sel = document.getElementById('reg-unidad-medida');
    sel.innerHTML = '<option value="">— Elegir —</option>' +
      filas.map(u => `<option value="${u.codigo}">${u.codigo} — ${u.nombre}</option>`).join('');
  }

async function pintarSelectsFormulario(){
    if (categoriasCache.length === 0){
      categoriasCache = await llamarApi('/articulos/categorias');
    }
    if (marcasCache.length === 0){
      marcasCache = await llamarApi('/articulos/marcas');
    }
    const selCat = document.getElementById('reg-categoria');
    selCat.innerHTML = '<option value="">— Sin categoría —</option>' +
      categoriasCache.map(c => `<option value="${c.id}">${c.nombre}</option>`).join('');
    const selMarca = document.getElementById('reg-marca');
    selMarca.innerHTML = '<option value="">— Sin marca —</option>' +
      marcasCache.map(m => `<option value="${m.id}">${m.nombre}</option>`).join('');
  }

async function abrirNuevo(){
    articuloEnEdicion = null;
    document.getElementById('registro-titulo').textContent = 'Nuevo Artículo';
    await pintarSelectsFormulario();
    document.getElementById('reg-codigo').value = '';
    document.getElementById('reg-nombre').value = '';
    document.getElementById('reg-descripcion').value = '';
    document.getElementById('reg-categoria').value = '';
    document.getElementById('reg-marca').value = '';
    document.getElementById('reg-activo').checked = true;
    document.getElementById('reg-vendible').checked = true;
    document.getElementById('reg-comprable').checked = true;
    document.getElementById('reg-cabys').value = '';
    document.getElementById('reg-moneda').value = 'CRC';
    document.getElementById('reg-costo').value = '';
    document.getElementById('reg-tarifa-iva').value = '';
    document.getElementById('reg-unidad-medida').value = '';
    document.getElementById('reg-tipo-costo').value = 'Unidad';
    document.getElementById('reg-precio-venta').value = '';
    document.getElementById('reg-descuento-maximo').value = '';
    document.getElementById('reg-utilidad-minima').value = '';
    document.getElementById('reg-comision-venta').value = '';
    document.getElementById('reg-margen-utilidad').textContent = '—';
    document.getElementById('reg-cant-min').value = '';
    document.getElementById('reg-cant-max').value = '';
    actualizarRequeridosVendible();
    registroOverlay.classList.add('abierto');
    setTimeout(()=> document.getElementById('reg-codigo').focus(), 30);
  }

async function abrirModificar(id){
    const a = await llamarApi(`/articulos/${id}`);
    articuloEnEdicion = a;
    document.getElementById('registro-titulo').textContent = `Modificar — ${a.codigo}`;
    await pintarSelectsFormulario();
    document.getElementById('reg-codigo').value = a.codigo;
    document.getElementById('reg-nombre').value = a.nombre;
    document.getElementById('reg-descripcion').value = a.descripcion || '';
    document.getElementById('reg-categoria').value = a.categoria_id || '';
    document.getElementById('reg-marca').value = a.marca_id || '';
    document.getElementById('reg-activo').checked = a.activo;
    document.getElementById('reg-vendible').checked = a.vendible;
    document.getElementById('reg-comprable').checked = a.comprable;
    document.getElementById('reg-cabys').value = a.codigo_cabys || '';
    document.getElementById('reg-moneda').value = a.moneda_costo;
    document.getElementById('reg-costo').value = a.costo_sin_impuesto;
    document.getElementById('reg-tarifa-iva').value = a.tarifa_iva || '';
    document.getElementById('reg-unidad-medida').value = a.unidad_medida || '';
    document.getElementById('reg-tipo-costo').value = a.tipo_costo || 'Unidad';
    document.getElementById('reg-precio-venta').value = a.precio_venta ?? '';
    document.getElementById('reg-descuento-maximo').value = a.descuento_maximo ?? '';
    document.getElementById('reg-utilidad-minima').value = a.utilidad_minima ?? '';
    document.getElementById('reg-comision-venta').value = a.comision_venta ?? '';
    document.getElementById('reg-margen-utilidad').textContent = a.margen_utilidad != null ? `${a.margen_utilidad}%` : '—';
    document.getElementById('reg-cant-min').value = a.cantidad_minima ?? '';
    document.getElementById('reg-cant-max').value = a.cantidad_maxima ?? '';
    actualizarRequeridosVendible();
    registroOverlay.classList.add('abierto');
    setTimeout(()=> document.getElementById('reg-nombre').focus(), 30);
  }

// Costo y Precio de venta solo son obligatorios si el artículo es Vendible -- sin esto no
  // se puede calcular un margen real ni el costo de ventas al facturar (diseno-inventarios.md).
  function actualizarRequeridosVendible(){
    const vendible = document.getElementById('reg-vendible').checked;
    document.getElementById('lbl-costo').classList.toggle('requerido', vendible);
    document.getElementById('lbl-precio-venta').classList.toggle('requerido', vendible);
  }
  document.getElementById('reg-vendible').addEventListener('change', actualizarRequeridosVendible);

function cerrarRegistro(){ registroOverlay.classList.remove('abierto'); articuloEnEdicion = null; }
  document.getElementById('btn-cerrar-registro').addEventListener('click', cerrarRegistro);
  document.getElementById('btn-cancelar-registro').addEventListener('click', cerrarRegistro);
  document.getElementById('btn-nuevo').addEventListener('click', abrirNuevo);

function construirQueryExcel(){
    const params = new URLSearchParams();
    const texto = document.getElementById('f-texto').value.trim();
    const categoriaId = document.getElementById('f-categoria').value;
    const marcaId = document.getElementById('f-marca').value;
    const activo = document.getElementById('f-activo').value;
    if (texto) params.set('texto', texto);
    if (categoriaId) params.set('categoria_id', categoriaId);
    if (marcaId) params.set('marca_id', marcaId);
    if (activo) params.set('activo', activo);
    return params.toString();
  }

const cuerpo = {
      codigo, nombre,
      descripcion: document.getElementById('reg-descripcion').value.trim() || null,
      categoria_id: document.getElementById('reg-categoria').value ? Number(document.getElementById('reg-categoria').value) : null,
      marca_id: document.getElementById('reg-marca').value ? Number(document.getElementById('reg-marca').value) : null,
      activo: document.getElementById('reg-activo').checked,
      vendible: document.getElementById('reg-vendible').checked,
      comprable: document.getElementById('reg-comprable').checked,
      codigo_cabys: document.getElementById('reg-cabys').value.trim() || null,
      moneda_costo: document.getElementById('reg-moneda').value,
      costo_sin_impuesto: Number(document.getElementById('reg-costo').value) || 0,
      tarifa_iva: tarifaIva || null,
      unidad_medida: unidadMedida || null,
      tipo_costo: document.getElementById('reg-tipo-costo').value,
      precio_venta: document.getElementById('reg-precio-venta').value ? Number(document.getElementById('reg-precio-venta').value) : null,
      descuento_maximo: document.getElementById('reg-descuento-maximo').value ? Number(document.getElementById('reg-descuento-maximo').value) : null,
      utilidad_minima: document.getElementById('reg-utilidad-minima').value ? Number(document.getElementById('reg-utilidad-minima').value) : null,
      comision_venta: document.getElementById('reg-comision-venta').value ? Number(document.getElementById('reg-comision-venta').value) : null,
      cantidad_minima: document.getElementById('reg-cant-min').value ? Number(document.getElementById('reg-cant-min').value) : null,
      cantidad_maxima: document.getElementById('reg-cant-max').value ? Number(document.getElementById('reg-cant-max').value) : null,
    };

async function eliminarArticulo(id){
    const ok = await modalConfirm('¿Desactivar este artículo? No se borra -- queda marcado como Inactivo y se puede reactivar después desde Modificar.', 'Desactivar artículo', 'danger', 'Desactivar');
    if (!ok) return;
    try{
      await llamarApi(`/articulos/${id}`, {method:'DELETE', headers:{'Content-Type':'application/json'}, body: JSON.stringify({modificado_por: USUARIO_ACTUAL})});
      await buscar(paginaActual);
    }catch(e){ await modalAlert(e.message, 'No se pudo desactivar'); }
  }

// ---------------- Crear inventario por bodega (lista blanca artículo↔bodega) ----------------
  const bodegasOverlay = document.getElementById('bodegas-overlay');
  let TODAS_LAS_BODEGAS_AGRUPADAS = null; // { sucursalId: {nombre, bodegas:[{id,nombre}]} }
  let articuloEnBodegas = null;

async function cargarBodegasAgrupadas(){
    if (TODAS_LAS_BODEGAS_AGRUPADAS) return TODAS_LAS_BODEGAS_AGRUPADAS;
    const [sucursales, bodegas] = await Promise.all([
      llamarApi('/sucursales'),
      llamarApi('/inventario/bodegas'),
    ]);
    const grupos = {};
    sucursales.forEach(s => { grupos[s.id] = {nombre: s.nombre, bodegas: []}; });
    bodegas.forEach(b => { if (grupos[b.sucursal_id]) grupos[b.sucursal_id].bodegas.push(b); });
    TODAS_LAS_BODEGAS_AGRUPADAS = grupos;
    return grupos;
  }

async function abrirBodegas(articuloId){
    articuloEnBodegas = articuloId;
    document.getElementById('bodegas-lista').innerHTML = 'Cargando…';
    bodegasOverlay.classList.add('abierto');
    try{
      const [grupos, habilitadas] = await Promise.all([
        cargarBodegasAgrupadas(),
        llamarApi(`/articulos/${articuloId}/bodegas`),
      ]);
      const habilitadasIds = new Set(habilitadas.map(f => f.bodega_id));
      const lista = document.getElementById('bodegas-lista');
      lista.innerHTML = Object.entries(grupos)
        .filter(([, g]) => g.bodegas.length > 0)
        .map(([sucId, g]) => `
          <div class="bodegas-grupo">
            <label class="bodegas-grupo-header">
              <input type="checkbox" class="bodegas-grupo-check" data-grupo="${sucId}">
              LOCAL ${g.nombre.toUpperCase()}
            </label>
            <div class="bodegas-grupo-filas">
              ${g.bodegas.map(b => `
                <label class="bodegas-fila">
                  <input type="checkbox" class="bodegas-bodega-check" data-grupo="${sucId}" value="${b.id}" ${habilitadasIds.has(b.id) ? 'checked' : ''}>
                  ${b.nombre}
                </label>
              `).join('')}
            </div>
          </div>
        `).join('');
      // El check de grupo refleja/controla el estado de sus bodegas -- clic en el grupo marca
      // o desmarca todas de una vez (segundo ejemplo del usuario: "selecciona la sucursal y
      // habilita todas las bodegas relacionadas con esa sucursal").
      function actualizarCheckGrupo(sucId){
        const hijos = lista.querySelectorAll(`.bodegas-bodega-check[data-grupo="${sucId}"]`);
        const grupoCheck = lista.querySelector(`.bodegas-grupo-check[data-grupo="${sucId}"]`);
        const marcados = Array.from(hijos).filter(c => c.checked).length;
        grupoCheck.checked = marcados === hijos.length;
        grupoCheck.indeterminate = marcados > 0 && marcados < hijos.length;
      }
      lista.querySelectorAll('.bodegas-grupo-check').forEach(chk => {
        chk.addEventListener('change', () => {
          lista.querySelectorAll(`.bodegas-bodega-check[data-grupo="${chk.dataset.grupo}"]`).forEach(hijo => { hijo.checked = chk.checked; });
        });
      });
      lista.querySelectorAll('.bodegas-bodega-check').forEach(chk => {
        chk.addEventListener('change', () => actualizarCheckGrupo(chk.dataset.grupo));
        actualizarCheckGrupo(chk.dataset.grupo);
      });
    }catch(e){
      document.getElementById('bodegas-lista').innerHTML = `<span style="color:var(--red-ink);">${e.message}</span>`;
    }
  }

function cerrarBodegas(){ bodegasOverlay.classList.remove('abierto'); articuloEnBodegas = null; }
  document.getElementById('btn-cerrar-bodegas').addEventListener('click', cerrarBodegas);
  document.getElementById('btn-cancelar-bodegas').addEventListener('click', cerrarBodegas);

function pillActivo(activo){
    return activo
      ? `<span class="pill pill-aplicado">Activo</span>`
      : `<span class="pill pill-anulado">Inactivo</span>`;
  }

function celdaVacia(){
    return `<span class="mono" style="color:var(--ink-muted);">—</span>`;
  }

async function buscar(pagina){
    paginaActual = pagina;
    const tbody = document.getElementById('tbody-articulos');
    tbody.innerHTML = `<tr><td colspan="9" style="text-align:center; padding:32px; color:var(--ink-muted);">Buscando…</td></tr>`;
    document.getElementById('empty-state').style.display = 'none';

try{
      const datos = await llamarApi(`/articulos?${construirQuery(pagina)}`);
      totalArticulos = datos.total;
      if (datos.items.length === 0){
        tbody.innerHTML = '';
        document.getElementById('empty-state').style.display = 'block';
      } else {
        tbody.innerHTML = datos.items.map(filaHtml).join('');
      }
      actualizarPaginacion(datos);
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="9" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      document.getElementById('foot-note').textContent = '';
      document.getElementById('pager-info').textContent = '';
    }
  }

// ---------------- Imagen de artículo ----------------
  async function cargarImagen(articuloId){
    const caja = document.getElementById(`img-preview-${articuloId}`);
    const btnQuitar = document.querySelector(`[data-quitar-imagen="${articuloId}"]`);
    if (!caja) return;
    caja.innerHTML = `<span class="mono" style="color:var(--ink-muted);">Cargando…</span>`;
    try{
      const imagenes = await llamarApi(`/articulos/${articuloId}/imagenes`);
      if (imagenes.length === 0){
        caja.innerHTML = `<span class="mono" style="color:var(--ink-muted);">Sin imagen</span>`;
        btnQuitar.style.display = 'none';
        btnQuitar.removeAttribute('data-imagen-id');
      } else {
        const img = imagenes[0];
        caja.innerHTML = `<img src="${API_BASE}${img.url}" alt="Imagen del artículo">`;
        btnQuitar.style.display = '';
        btnQuitar.dataset.imagenId = img.id;
      }
    }catch(e){
      caja.innerHTML = `<span class="mono" style="color:var(--red-ink);">Error</span>`;
    }
  }

// ---------------- Proveedores de un artículo (diseno-cxp.md, Etapa 1 de la idea de
  // automatización de compras: consulta de precios + código por proveedor) ----------------
  const proveedorElegidoPorArticulo = {};

async function cargarProveedoresDeArticulo(articuloId){
    const caja = document.getElementById(`prov-tabla-${articuloId}`);
    if (!caja) return;
    try{
      const filas = await llamarApi(`/articulos/${articuloId}/proveedores`);
      if (filas.length === 0){
        caja.innerHTML = `<span class="mono" style="color:var(--ink-muted); font-size:12.5px;">Sin proveedores registrados todavía.</span>`;
        return;
      }
      caja.innerHTML = `
        <table>
          <thead><tr><th>Proveedor</th><th>Código</th><th class="num">Costo</th><th>Actualizado</th><th></th></tr></thead>
          <tbody>
            ${filas.map(f => `
              <tr>
                <td>${f.proveedor_nombre}</td>
                <td class="mono">${f.codigo_proveedor}</td>
                <td class="num mono">${f.costo != null ? fmt(f.costo) + ' ' + (f.moneda||'') : '—'}</td>
                <td class="muted-cell">${new Date(f.actualizado_en).toLocaleDateString('es-CR')}</td>
                <td><button class="icon-btn danger" type="button" title="Quitar" data-quitar-prov="${f.id}" data-articulo="${articuloId}">
                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 6 6 18M6 6l12 12"/></svg>
                </button></td>
              </tr>
            `).join('')}
          </tbody>
        </table>
      `;
    }catch(e){
      caja.innerHTML = `<span class="mono" style="color:var(--red-ink); font-size:12.5px;">${e.message}</span>`;
    }
  }

let provDebounce;
  document.getElementById('tbody-articulos').addEventListener('input', (ev)=>{
    const input = ev.target.closest('.prov-input');
    if (!input) return;
    const articuloId = input.dataset.id;
    const caja = document.getElementById(`prov-sug-${articuloId}`);
    clearTimeout(provDebounce);
    provDebounce = setTimeout(async ()=>{
      const q = input.value.trim();
      if (q.length < 2){ caja.classList.remove('abierta'); caja.innerHTML=''; return; }
      const r = input.getBoundingClientRect();
      caja.style.top = (r.bottom + 4) + 'px';
      caja.style.left = r.left + 'px';
      caja.classList.add('abierta');
      caja.innerHTML = `<div class="sug-item" style="color:var(--ink-muted);">Buscando…</div>`;
      try{
        const datos = await llamarApi(`/cxp/proveedores?texto=${encodeURIComponent(q)}&activa=true`);
        const items = datos.items || datos;
        if (items.length === 0){ caja.innerHTML = `<div class="sug-item" style="color:var(--ink-muted);">Sin resultados</div>`; return; }
        caja.innerHTML = items.map(p => `<div class="sug-item" data-pid="${p.id}" data-pnombre="${p.nombre.replace(/"/g,'&quot;')}">${p.nombre}</div>`).join('');
        caja.querySelectorAll('.sug-item[data-pid]').forEach(item=>{
          item.addEventListener('mousedown', e=>{
            e.preventDefault();
            proveedorElegidoPorArticulo[articuloId] = {id: Number(item.dataset.pid), nombre: item.dataset.pnombre};
            document.getElementById(`prov-elegido-${articuloId}`).textContent = item.dataset.pnombre;
            input.value = '';
            input.style.display = 'none';
            caja.classList.remove('abierta');
            document.getElementById(`prov-codigo-${articuloId}`).focus();
          });
        });
      }catch(e){
        caja.innerHTML = `<div class="sug-item" style="color:var(--red-ink);">${e.message}</div>`;
      }
    }, 300);
  });

// Navegación a otra pantalla: si esta pantalla vive dentro del shell unificado
  // (embebida en un iframe vía srcdoc), un <a href> normal navegaría solo ese
  // iframe y perdería la barra lateral -- en su lugar se le pide al shell que
  // cambie de panel. Si se abre suelta (doble clic, sin shell), el enlace navega
  // normal a la pantalla independiente.
  document.querySelectorAll('[data-nav-shell]').forEach(enlace=>{
    enlace.addEventListener('click', (ev)=>{
      if (window.parent === window) return; // standalone: dejar que el href normal navegue
      ev.preventDefault();
      window.parent.postMessage({tipo:'fenix-nav', destino: enlace.dataset.navShell}, '*');
    });
  });
  document.getElementById('btn-siguiente').addEventListener('click', ()=>{
    const totalPaginas = Math.max(1, Math.ceil(totalArticulos / POR_PAGINA));
    if (paginaActual < totalPaginas) buscar(paginaActual + 1);
  });

(async function init(){
    document.getElementById('f-texto').focus();
    try{
      await Promise.all([cargarCategorias(), cargarMarcas()]);
    }catch(e){ /* los combos son un accesorio de la búsqueda, no la bloquean si fallan */ }
    cargarTarifasIva().catch(()=>{});
    cargarUnidadesMedida().catch(()=>{});
    buscar(1);
  })();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Categorías de Artículo</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{
    font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
    font-variant-numeric:tabular-nums;
  }
  h1,h2,h3{
    font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;
    font-weight:600; text-wrap:balance; margin:0;
  }
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1000px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:200px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}

.row-actions{display:flex; gap:4px; justify-content:flex-end;}
  .icon-btn{
    border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
    width:30px; height:30px; border-radius:7px; display:inline-flex; align-items:center;
    justify-content:center; cursor:pointer; transition:transform .08s ease, filter .08s ease;
  }
  .icon-btn:hover{color:var(--ink); border-color:var(--ink-muted);}
  .icon-btn:active{transform:scale(0.90);}
  .icon-btn.danger:hover{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .icon-btn[disabled]{opacity:.3; cursor:not-allowed; transform:none;}
  .icon-btn svg{width:15px; height:15px;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}

.foot-note{font-size:12px; color:var(--ink-muted); margin-top:12px;}

/* ---------- modal propio (los diálogos nativos quedan bloqueados dentro del
     iframe del Artifact -- confirm()/prompt()/alert() no sirven aquí) ---------- */
  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  /* #modal-overlay (aviso/confirmacion) comparte la clase .modal-overlay con otro overlay de
     esta pantalla, mismo z-index -- si #modal-overlay aparece antes en el DOM, al abrirse los
     dos a la vez (ej. un error de guardado mientras un formulario sigue abierto) el otro overlay
     pintaba encima y el aviso quedaba oculto/inaccesible detras. Bug real reportado: "el
     Entendido no se ve". Un z-index propio, mas alto, garantiza que el aviso siempre gane sin
     importar el orden del DOM. */
  #modal-overlay{ z-index:400; }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:420px; width:100%;
  }
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-input{
    width:100%; background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:9px 11px; color:var(--ink); font-size:13.5px; margin-bottom:16px;
  }
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}

.modal-box.form-box{max-width:460px;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input[type="text"], .form-field input[type="number"]{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%;
  }
  .form-field.checkbox label{
    display:flex; align-items:center; gap:8px; text-transform:none;
    letter-spacing:normal; font-size:13.5px; color:var(--ink);
  }
  .form-field input[disabled]{opacity:.6; cursor:not-allowed;}
  .form-audit{
    font-size:12px; color:var(--ink-muted); border-top:1px solid var(--line);
    margin-top:4px; padding-top:12px; line-height:1.7;
  }

@media print{
    @page{ margin: 1.5cm; }
    .topbar .crumbs, .filters .no-print, .row-actions, .no-print{display:none !important;}
    body{background:#fff; color:#000;}
    .app{max-width:none; padding:0;}
    .table-wrap{box-shadow:none; border:1px solid #000;}
    thead th{background:none !important; border-color:#000 !important;}
    .pill{background:none !important; border:1px solid #000 !important; color:#000 !important;}
    .pill::before{display:none;}
  }
  .fenix-toast{
    position:fixed; bottom:24px; right:24px; z-index:300;
    background:var(--accent); color:var(--accent-ink); padding:11px 18px; border-radius:8px;
    box-shadow:var(--shadow); font-size:13.5px; font-weight:600;
    display:flex; align-items:center; gap:8px;
    opacity:0; transform:translateY(10px); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .fenix-toast.visible{ opacity:1; transform:translateY(0); }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Categorías de Artículo</span>
    </div>
    <div class="crumbs"><b>Configuración</b> / Categorías de ítem</div>
  </div>

<div class="filters">
    <div class="field texto">
      <label for="f-texto">Buscar por nombre</label>
      <input type="text" id="f-texto" placeholder="ej. electrodomésticos" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-activa">Estado</label>
      <select id="f-activa">
        <option value="">Todos</option>
        <option value="true">Activos</option>
        <option value="false">Inactivos</option>
      </select>
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <a class="btn btn-ghost no-print" id="btn-volver" href="articulos_ui.html" data-nav-shell="articulos">‹ Volver</a>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nuevo</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr id="fila-encabezados">
          <th></th><th>Nombre</th>
          <th>Estado</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay registros con estos filtros</b>
      Ajusta el texto o el estado, o límpialos para ver todo el catálogo.
    </div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="form-overlay">
  <div class="modal-box form-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="form-titulo"></h3>
    <div class="form-field">
      <label for="form-nombre">Nombre</label>
      <input type="text" id="form-nombre">
    </div>
    <div id="form-campos-extra"></div>
    <div class="form-field checkbox">
      <label><input type="checkbox" id="form-activa" checked> Activa</label>
    </div>
    <div class="form-audit" id="form-audit" style="display:none;"></div>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="form-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="form-guardar">Guardar</button>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>
<script>
(function(){
  const CONFIG = {
    titulo: "Categorías de Artículo",
    apiPath: "/articulos/categorias",
    camposExtra: [],
  };
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador'; // no hay sesión/login todavía -- placeholder de trazabilidad

function cerrar(valor){
        modalOverlay.classList.remove('abierto');
        modalAceptar.onclick = null;
        modalCancelar.onclick = null;
        document.removeEventListener('keydown', onKey);
        resolve(valor);
      }
      function onKey(e){ if (e.key === 'Escape') cerrar(false); }
      modalAceptar.onclick = ()=> cerrar(true);
      modalCancelar.onclick = ()=> cerrar(false);
      document.addEventListener('keydown', onKey);

modalOverlay.classList.add('abierto');
      setTimeout(()=> modalAceptar.focus(), 30);
    });
  }
  let fenixToastTimer;
  function mostrarToast(mensaje){
    const el = document.getElementById('fenix-toast');
    if (!el) return;
    document.getElementById('fenix-toast-texto').textContent = mensaje;
    el.classList.add('visible');
    clearTimeout(fenixToastTimer);
    fenixToastTimer = setTimeout(()=> el.classList.remove('visible'), 2200);
  }
  function modalAlert(mensaje, titulo='Aviso'){
    return mostrarModal({titulo, mensaje, tipo:'alert', botonAceptar:'Entendido'});
  }
  function modalConfirm(mensaje, titulo='Confirmar', colorAceptar='primary', botonAceptar='Confirmar'){
    return mostrarModal({titulo, mensaje, tipo:'confirm', botonAceptar, colorAceptar});
  }

function idCampoExtra(campo){ return `ex-${campo.campo}`; }

function ponerCamposExtraSoloLectura(soloLectura){
    CONFIG.camposExtra.forEach(c=>{
      document.getElementById(idCampoExtra(c)).disabled = soloLectura;
    });
    formNombre.disabled = soloLectura;
    formActiva.disabled = soloLectura;
  }

let formModo = 'nuevo'; // 'nuevo' | 'modificar' | 'ver'
  let formIdEditando = null;

function abrirFormulario(modo, registro){
    formModo = modo;
    formIdEditando = registro ? registro.id : null;
    renderCamposExtra(registro || {});
    formNombre.value = registro ? registro.nombre : '';
    formActiva.checked = registro ? registro.activa : true;

if (modo === 'ver'){
      formTitulo.textContent = `Ver — ${CONFIG.titulo}`;
      ponerCamposExtraSoloLectura(true);
      formGuardar.style.display = 'none';
      formCancelar.textContent = 'Cerrar';
    } else {
      formTitulo.textContent = modo === 'nuevo' ? `Nuevo — ${CONFIG.titulo}` : `Modificar — ${CONFIG.titulo}`;
      ponerCamposExtraSoloLectura(false);
      formGuardar.style.display = '';
      formCancelar.textContent = 'Cancelar';
    }

formOverlay.classList.add('abierto');
    setTimeout(()=> { if (modo !== 'ver') formNombre.focus(); }, 30);
  }
  function cerrarFormulario(){ formOverlay.classList.remove('abierto'); }
  formCancelar.onclick = cerrarFormulario;
  document.addEventListener('keydown', e=>{ if (e.key === 'Escape' && formOverlay.classList.contains('abierto')) cerrarFormulario(); });

formGuardar.onclick = async ()=>{
    const nombre = formNombre.value.trim();
    if (!nombre){ await modalAlert('El nombre es obligatorio.'); formNombre.focus(); return; }

// Encabezados extra (una sola vez, la tabla no se reconstruye por fila). Se
  // insertan antes de "Estado" (ahora la última columna) -- "Acciones" quedó de
  // primera a propósito (Principio de UX: el usuario no debería tener que hacer
  // scroll horizontal para encontrar Ver/Modificar/Eliminar en una tabla ancha).
  document.querySelectorAll('#fila-encabezados').forEach(fila=>{
    CONFIG.camposExtra.forEach(c=>{
      const th = document.createElement('th');
      th.textContent = c.etiqueta;
      fila.insertBefore(th, fila.children[fila.children.length - 1]);
    });
  });

function pillActiva(activa){
    return activa
      ? `<span class="pill pill-aplicado">Activa</span>`
      : `<span class="pill pill-anulado">Inactiva</span>`;
  }

function filaHtml(r){
    const extras = CONFIG.camposExtra.map(c=>`<td>${celdaExtra(c, r)}</td>`).join('');
    return `
      <tr data-id="${r.id}">
        <td>
          <div class="row-actions">
            <button class="icon-btn" title="Ver" data-accion="ver" data-id="${r.id}">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z"/><circle cx="12" cy="12" r="3"/></svg></button>
            <button class="icon-btn" title="Modificar" data-accion="modificar" data-id="${r.id}">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg></button>
            <button class="icon-btn danger" title="Eliminar" data-accion="eliminar" data-id="${r.id}">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6h16Z"/></svg></button>
          </div>
        </td>
        <td>${r.nombre}</td>
        ${extras}
        <td>${pillActiva(r.activa)}</td>
      </tr>
    `;
  }

async function cargar(){
    tbody.innerHTML = `<tr><td colspan="${2 + CONFIG.camposExtra.length}" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    emptyState.style.display = 'none';
    try{
      REGISTROS = await llamarApi(`${CONFIG.apiPath}?${construirQuery()}`);
      if (REGISTROS.length === 0){
        tbody.innerHTML = '';
        emptyState.style.display = 'block';
      } else {
        tbody.innerHTML = REGISTROS.map(filaHtml).join('');
      }
      footNote.textContent = `${REGISTROS.length} registro${REGISTROS.length === 1 ? '' : 's'}`;
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="${2 + CONFIG.camposExtra.length}" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      footNote.textContent = '';
    }
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar "${registro.nombre}"? Si está en uso por otros registros, no se podrá eliminar y se sugerirá desactivarlo en su lugar.`,
        'Eliminar registro', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${CONFIG.apiPath}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

document.getElementById('f-texto').addEventListener('input', ()=>{
    clearTimeout(window.__debounceCatalogo);
    window.__debounceCatalogo = setTimeout(cargar, 350);
  });
  document.getElementById('f-activa').addEventListener('change', cargar);

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

document.getElementById('f-texto').focus();
  cargar();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Marcas de Artículo</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{
    font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
    font-variant-numeric:tabular-nums;
  }
  h1,h2,h3{
    font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;
    font-weight:600; text-wrap:balance; margin:0;
  }
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1000px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:200px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}

.row-actions{display:flex; gap:4px; justify-content:flex-end;}
  .icon-btn{
    border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
    width:30px; height:30px; border-radius:7px; display:inline-flex; align-items:center;
    justify-content:center; cursor:pointer; transition:transform .08s ease, filter .08s ease;
  }
  .icon-btn:hover{color:var(--ink); border-color:var(--ink-muted);}
  .icon-btn:active{transform:scale(0.90);}
  .icon-btn.danger:hover{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .icon-btn[disabled]{opacity:.3; cursor:not-allowed; transform:none;}
  .icon-btn svg{width:15px; height:15px;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}

.foot-note{font-size:12px; color:var(--ink-muted); margin-top:12px;}

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Marcas de Artículo</span>
    </div>
    <div class="crumbs"><b>Configuración</b> / Marcas de ítem</div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>
<script>
(function(){
  const CONFIG = {
    titulo: "Marcas de Artículo",
    apiPath: "/articulos/marcas",
    // "seleccion-dinamica": a diferencia de "seleccion" (opciones fijas en el propio CONFIG),
    // sus opciones se piden al backend (catálogo real de Gerentes de Marca, Configuración) --
    // `campoMostrar` es la columna ya resuelta por el JOIN del backend (gerente_marca_nombre),
    // para no tener que repetir esa resolución en el navegador.
    camposExtra: [
      {"campo": "gerente_marca_id", "campoMostrar": "gerente_marca_nombre", "etiqueta": "Gerente de marca", "tipo": "seleccion-dinamica"},
    ],
  };
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador'; // no hay sesión/login todavía -- placeholder de trazabilidad
  let GERENTES_MARCA = [];

function cerrar(valor){
        modalOverlay.classList.remove('abierto');
        modalAceptar.onclick = null;
        modalCancelar.onclick = null;
        document.removeEventListener('keydown', onKey);
        resolve(valor);
      }
      function onKey(e){ if (e.key === 'Escape') cerrar(false); }
      modalAceptar.onclick = ()=> cerrar(true);
      modalCancelar.onclick = ()=> cerrar(false);
      document.addEventListener('keydown', onKey);

function idCampoExtra(campo){ return `ex-${campo.campo}`; }

let formModo = 'nuevo'; // 'nuevo' | 'modificar' | 'ver'
  let formIdEditando = null;

formGuardar.onclick = async ()=>{
    const nombre = formNombre.value.trim();
    if (!nombre){ await modalAlert('El nombre es obligatorio.'); formNombre.focus(); return; }

function celdaExtra(campo, fila){
    const v = fila[campo.campoMostrar || campo.campo];
    if (campo.tipo === 'booleano') return v ? 'Sí' : 'No';
    if (v === null || v === undefined || v === '') return `<span class="mono" style="color:var(--ink-muted);">—</span>`;
    return v;
  }

function pillActiva(activa){
    return activa
      ? `<span class="pill pill-aplicado">Activa</span>`
      : `<span class="pill pill-anulado">Inactiva</span>`;
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar "${registro.nombre}"? Si está en uso por otros registros, no se podrá eliminar y se sugerirá desactivarlo en su lugar.`,
        'Eliminar registro', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${CONFIG.apiPath}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

document.getElementById('f-texto').focus();
  llamarApi('/configuracion/gerentes-marca?activa=true').then(g => GERENTES_MARCA = g).catch(()=>{});
  cargar();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Estilos de Ítem</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{
    font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
    font-variant-numeric:tabular-nums;
  }
  h1,h2,h3{
    font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;
    font-weight:600; text-wrap:balance; margin:0;
  }
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1000px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:200px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}

.row-actions{display:flex; gap:4px; justify-content:flex-end;}
  .icon-btn{
    border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
    width:30px; height:30px; border-radius:7px; display:inline-flex; align-items:center;
    justify-content:center; cursor:pointer; transition:transform .08s ease, filter .08s ease;
  }
  .icon-btn:hover{color:var(--ink); border-color:var(--ink-muted);}
  .icon-btn:active{transform:scale(0.90);}
  .icon-btn.danger:hover{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .icon-btn[disabled]{opacity:.3; cursor:not-allowed; transform:none;}
  .icon-btn svg{width:15px; height:15px;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}

.foot-note{font-size:12px; color:var(--ink-muted); margin-top:12px;}

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Estilos de Ítem</span>
    </div>
    <div class="crumbs"><b>Configuración</b> / Estilos de ítem</div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>
<script>
(function(){
  const CONFIG = {
    titulo: "Estilos de Ítem",
    apiPath: "/articulos/estilos",
    camposExtra: [],
  };
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador'; // no hay sesión/login todavía -- placeholder de trazabilidad

function cerrar(valor){
        modalOverlay.classList.remove('abierto');
        modalAceptar.onclick = null;
        modalCancelar.onclick = null;
        document.removeEventListener('keydown', onKey);
        resolve(valor);
      }
      function onKey(e){ if (e.key === 'Escape') cerrar(false); }
      modalAceptar.onclick = ()=> cerrar(true);
      modalCancelar.onclick = ()=> cerrar(false);
      document.addEventListener('keydown', onKey);

function idCampoExtra(campo){ return `ex-${campo.campo}`; }

let formModo = 'nuevo'; // 'nuevo' | 'modificar' | 'ver'
  let formIdEditando = null;

formGuardar.onclick = async ()=>{
    const nombre = formNombre.value.trim();
    if (!nombre){ await modalAlert('El nombre es obligatorio.'); formNombre.focus(); return; }

function pillActiva(activa){
    return activa
      ? `<span class="pill pill-aplicado">Activa</span>`
      : `<span class="pill pill-anulado">Inactiva</span>`;
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar "${registro.nombre}"? Si está en uso por otros registros, no se podrá eliminar y se sugerirá desactivarlo en su lugar.`,
        'Eliminar registro', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${CONFIG.apiPath}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

document.getElementById('f-texto').focus();
  cargar();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Modelos de Ítem</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{
    font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
    font-variant-numeric:tabular-nums;
  }
  h1,h2,h3{
    font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;
    font-weight:600; text-wrap:balance; margin:0;
  }
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1000px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:200px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}

.row-actions{display:flex; gap:4px; justify-content:flex-end;}
  .icon-btn{
    border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
    width:30px; height:30px; border-radius:7px; display:inline-flex; align-items:center;
    justify-content:center; cursor:pointer; transition:transform .08s ease, filter .08s ease;
  }
  .icon-btn:hover{color:var(--ink); border-color:var(--ink-muted);}
  .icon-btn:active{transform:scale(0.90);}
  .icon-btn.danger:hover{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .icon-btn[disabled]{opacity:.3; cursor:not-allowed; transform:none;}
  .icon-btn svg{width:15px; height:15px;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}

.foot-note{font-size:12px; color:var(--ink-muted); margin-top:12px;}

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Modelos de Ítem</span>
    </div>
    <div class="crumbs"><b>Configuración</b> / Modelos de ítem</div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>
<script>
(function(){
  const CONFIG = {
    titulo: "Modelos de Ítem",
    apiPath: "/articulos/modelos",
    camposExtra: [],
  };
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador'; // no hay sesión/login todavía -- placeholder de trazabilidad

function cerrar(valor){
        modalOverlay.classList.remove('abierto');
        modalAceptar.onclick = null;
        modalCancelar.onclick = null;
        document.removeEventListener('keydown', onKey);
        resolve(valor);
      }
      function onKey(e){ if (e.key === 'Escape') cerrar(false); }
      modalAceptar.onclick = ()=> cerrar(true);
      modalCancelar.onclick = ()=> cerrar(false);
      document.addEventListener('keydown', onKey);

function idCampoExtra(campo){ return `ex-${campo.campo}`; }

let formModo = 'nuevo'; // 'nuevo' | 'modificar' | 'ver'
  let formIdEditando = null;

formGuardar.onclick = async ()=>{
    const nombre = formNombre.value.trim();
    if (!nombre){ await modalAlert('El nombre es obligatorio.'); formNombre.focus(); return; }

function pillActiva(activa){
    return activa
      ? `<span class="pill pill-aplicado">Activa</span>`
      : `<span class="pill pill-anulado">Inactiva</span>`;
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar "${registro.nombre}"? Si está en uso por otros registros, no se podrá eliminar y se sugerirá desactivarlo en su lugar.`,
        'Eliminar registro', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${CONFIG.apiPath}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

document.getElementById('f-texto').focus();
  cargar();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Tipos de Descuento</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{
    font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
    font-variant-numeric:tabular-nums;
  }
  h1,h2,h3{
    font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;
    font-weight:600; text-wrap:balance; margin:0;
  }
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1000px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:200px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}

.row-actions{display:flex; gap:4px; justify-content:flex-end;}
  .icon-btn{
    border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
    width:30px; height:30px; border-radius:7px; display:inline-flex; align-items:center;
    justify-content:center; cursor:pointer; transition:transform .08s ease, filter .08s ease;
  }
  .icon-btn:hover{color:var(--ink); border-color:var(--ink-muted);}
  .icon-btn:active{transform:scale(0.90);}
  .icon-btn.danger:hover{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .icon-btn[disabled]{opacity:.3; cursor:not-allowed; transform:none;}
  .icon-btn svg{width:15px; height:15px;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}

.foot-note{font-size:12px; color:var(--ink-muted); margin-top:12px;}

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Tipos de Descuento</span>
    </div>
    <div class="crumbs"><b>Configuración</b> / Tipos de descuento</div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>
<script>
(function(){
  const CONFIG = {
    titulo: "Tipos de Descuento",
    apiPath: "/articulos/tipos-descuento",
    camposExtra: [{"campo": "descripcion", "etiqueta": "Descripción", "tipo": "texto"}, {"campo": "orden", "etiqueta": "Orden", "tipo": "numero"}, {"campo": "porcentaje_descuento", "etiqueta": "% Descuento", "tipo": "numero"}, {"campo": "requiere_autorizacion", "etiqueta": "Requiere autorización", "tipo": "booleano"}],
  };
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador'; // no hay sesión/login todavía -- placeholder de trazabilidad

function cerrar(valor){
        modalOverlay.classList.remove('abierto');
        modalAceptar.onclick = null;
        modalCancelar.onclick = null;
        document.removeEventListener('keydown', onKey);
        resolve(valor);
      }
      function onKey(e){ if (e.key === 'Escape') cerrar(false); }
      modalAceptar.onclick = ()=> cerrar(true);
      modalCancelar.onclick = ()=> cerrar(false);
      document.addEventListener('keydown', onKey);

function idCampoExtra(campo){ return `ex-${campo.campo}`; }

let formModo = 'nuevo'; // 'nuevo' | 'modificar' | 'ver'
  let formIdEditando = null;

formGuardar.onclick = async ()=>{
    const nombre = formNombre.value.trim();
    if (!nombre){ await modalAlert('El nombre es obligatorio.'); formNombre.focus(); return; }

function pillActiva(activa){
    return activa
      ? `<span class="pill pill-aplicado">Activa</span>`
      : `<span class="pill pill-anulado">Inactiva</span>`;
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar "${registro.nombre}"? Si está en uso por otros registros, no se podrá eliminar y se sugerirá desactivarlo en su lugar.`,
        'Eliminar registro', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${CONFIG.apiPath}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

document.getElementById('f-texto').focus();
  cargar();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Conceptos de Movimiento de Inventario</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;}
  h1,h2,h3,h4{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1080px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:200px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}

.table-wrap{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow);
  }
  table{border-collapse:collapse; width:100%; min-width:760px;}
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--ink-muted); font-weight:600; padding:11px 14px;
    border-bottom:1px solid var(--line-strong); background:var(--surface-2);
    position:sticky; top:0;
  }
  tbody td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--surface-2);}
  .descripcion-cell{color:var(--ink-muted);}
  .cuentas-cell{font-size:12px; color:var(--ink-muted); line-height:1.5;}
  .cuentas-cell .fila{display:block; white-space:nowrap;}
  .cuentas-cell .etq{color:var(--ink-muted);}

.modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  /* #modal-overlay (aviso/confirmacion) comparte la clase .modal-overlay con el overlay del
     formulario, mismo z-index -- si aparece antes en el DOM, al abrirse ambos a la vez el otro
     overlay pintaba encima y el aviso quedaba inaccesible detrás. z-index propio, más alto,
     garantiza que el aviso siempre gane sin importar el orden del DOM. */
  #modal-overlay{ z-index:400; }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:420px; width:100%;
  }
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}

.modal-box.form-box{max-width:520px; max-height:88vh; overflow-y:auto;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input[type="text"], .form-field input[type="number"]{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%; font-family:inherit;
  }
  .form-field.checkbox label{
    display:flex; align-items:center; gap:8px; text-transform:none;
    letter-spacing:normal; font-size:13.5px; color:var(--ink);
  }
  .form-field input[disabled]{opacity:.6; cursor:not-allowed;}
  .campo-nota{font-size:11px; color:var(--ink-muted); line-height:1.45;}

.form-section-title{
    font-size:13px; margin:18px 0 10px; padding-top:14px; border-top:1px solid var(--line);
  }
  .form-section-intro{font-size:12px; color:var(--ink-muted); line-height:1.5; margin:-4px 0 14px;}

.form-audit{
    font-size:12px; color:var(--ink-muted); border-top:1px solid var(--line);
    margin-top:4px; padding-top:12px; line-height:1.7;
  }

/* ---------- buscador de cuenta (mismo patrón de Conceptos de Nota / Parámetros Contables) --- */
  .cuenta-picker{position:relative;}
  .cuenta-sugerencias{
    display:none; position:fixed; background:var(--surface); border:1px solid var(--line-strong);
    border-radius:9px; box-shadow:var(--shadow); max-height:260px; overflow-y:auto; z-index:450;
  }
  .cuenta-sugerencias.abierta{display:block;}
  .sug-item{display:flex; flex-direction:column; gap:1px; padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--line);}
  .sug-item:last-child{border-bottom:none;}
  .sug-item:hover, .sug-item.activa{background:var(--accent-soft);}
  .sug-nombre{font-size:13.5px; color:var(--ink);}
  .sug-nombre mark{background:transparent; color:var(--accent); font-weight:700; padding:0;}
  .sug-meta{font-size:11px; color:var(--ink-muted);}
  .sug-vacio{padding:14px 12px; font-size:13px; color:var(--ink-muted); text-align:center;}
  .cuenta-elegida{
    display:none; align-items:center; justify-content:space-between; gap:10px;
    background:var(--accent-soft); border:1px solid var(--accent); border-radius:7px;
    padding:7px 11px; font-size:13px; min-height:34.5px;
  }
  .cuenta-elegida.visible{display:flex;}
  .cuenta-elegida .cambiar{
    background:none; border:none; color:var(--accent); font-weight:600; cursor:pointer; padding:0;
    font-size:12px; text-decoration:underline; font-family:inherit; white-space:nowrap;
  }

@media print{
    @page{ margin: 1.5cm; }
    .topbar .crumbs, .filters, .row-actions, .no-print{display:none !important;}
    body{background:#fff; color:#000;}
    .app{max-width:none; padding:0;}
    .table-wrap{box-shadow:none; border:1px solid #000;}
    thead th{background:none !important; border-color:#000 !important;}
    .pill{background:none !important; border:1px solid #000 !important; color:#000 !important;}
  }
  .fenix-toast{
    position:fixed; bottom:24px; right:24px; z-index:300;
    background:var(--accent); color:var(--accent-ink); padding:11px 18px; border-radius:8px;
    box-shadow:var(--shadow); font-size:13.5px; font-weight:600;
    display:flex; align-items:center; gap:8px;
    opacity:0; transform:translateY(10px); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .fenix-toast.visible{ opacity:1; transform:translateY(0); }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Conceptos de Movimiento de Inventario</span>
    </div>
    <div class="crumbs"><b>Configuración</b> / Conceptos de movimientos de inventario</div>
  </div>

<div class="filters">
    <div class="field texto">
      <label for="f-texto">Buscar por nombre</label>
      <input type="text" id="f-texto" placeholder="ej. papelería" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-activa">Estado</label>
      <select id="f-activa">
        <option value="">Todos</option>
        <option value="true">Activos</option>
        <option value="false">Inactivos</option>
      </select>
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <a class="btn btn-ghost no-print" id="btn-volver" href="articulos_ui.html" data-nav-shell="articulos">‹ Volver</a>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nuevo</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Nombre</th>
          <th>Descripción</th>
          <th>Orden</th>
          <th>Cuentas contables</th>
          <th>Estado</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay registros con estos filtros</b>
      Ajusta el texto o el estado, o límpialos para ver todo el catálogo.
    </div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<h4 class="form-section-title">Contabilidad</h4>
    <p class="form-section-intro">
      Opcional -- normalmente un concepto solo llena la cuenta del lado que usa
      (Entrada o Salida), no las 3 a la vez. Sin uso automático todavía: hoy es solo
      configuración, el asiento de un movimiento manual se sigue eligiendo aparte.
    </p>

<div class="form-field">
      <label for="picker-inventario-input">Cuenta de inventario</label>
      <div class="cuenta-picker" id="picker-inventario">
        <input class="cuenta-picker-input" id="picker-inventario-input" type="text" autocomplete="off" placeholder="— Ninguna — escriba para buscar…">
        <div class="cuenta-sugerencias"></div>
      </div>
      <div class="cuenta-elegida">
        <span><span class="mono cuenta-elegida-codigo"></span> — <span class="cuenta-elegida-nombre"></span></span>
        <button type="button" class="cambiar">Cambiar</button>
      </div>
    </div>

<div class="form-field">
      <label for="picker-entrada-input">Contrapartida — Entrada</label>
      <div class="cuenta-picker" id="picker-entrada">
        <input class="cuenta-picker-input" id="picker-entrada-input" type="text" autocomplete="off" placeholder="— Ninguna — escriba para buscar…">
        <div class="cuenta-sugerencias"></div>
      </div>
      <div class="cuenta-elegida">
        <span><span class="mono cuenta-elegida-codigo"></span> — <span class="cuenta-elegida-nombre"></span></span>
        <button type="button" class="cambiar">Cambiar</button>
      </div>
      <span class="campo-nota">Se usa cuando este concepto se aplica a un movimiento de Tipo=Entrada.</span>
    </div>

<div class="form-field">
      <label for="picker-salida-input">Contrapartida — Salida</label>
      <div class="cuenta-picker" id="picker-salida">
        <input class="cuenta-picker-input" id="picker-salida-input" type="text" autocomplete="off" placeholder="— Ninguna — escriba para buscar…">
        <div class="cuenta-sugerencias"></div>
      </div>
      <div class="cuenta-elegida">
        <span><span class="mono cuenta-elegida-codigo"></span> — <span class="cuenta-elegida-nombre"></span></span>
        <button type="button" class="cambiar">Cambiar</button>
      </div>
      <span class="campo-nota">Se usa cuando este concepto se aplica a un movimiento de Tipo=Salida (ej. cargo a una cuenta de gasto).</span>
    </div>

// ---------------- Catálogo de cuentas contables (una sola carga, filtrado en cliente) ----------------
  let CUENTAS_TODAS = [], CUENTAS = [], CUENTAS_POR_CODIGO = {};
  async function cargarCuentas(){
    const filas = await llamarApi('/cuentas');
    CUENTAS_TODAS = filas.map(c => ({id: c.id, codigo: c.codigo, nombre: c.nombre, acepta: c.acepta_movimientos}));
    CUENTAS = CUENTAS_TODAS.filter(c => c.acepta);
    CUENTAS_POR_CODIGO = Object.fromEntries(CUENTAS_TODAS.map(c => [c.codigo, c]));
  }
  function nombrePadre(codigo){
    const segs = codigo.split('-');
    if (segs.length <= 1) return null;
    const padre = CUENTAS_POR_CODIGO[segs.slice(0,-1).join('-')];
    return padre ? padre.nombre : null;
  }
  function resaltar(texto, query){
    const idx = texto.toUpperCase().indexOf(query.toUpperCase());
    if (idx === -1) return texto;
    return texto.slice(0,idx) + '<mark>' + texto.slice(idx, idx+query.length) + '</mark>' + texto.slice(idx+query.length);
  }

// ---------------- Fábrica de buscador de cuenta (una instancia por cada uno de los 3 campos) ----------------
  function crearPickerCuenta(clave){
    const raiz = document.getElementById(`picker-${clave}`);
    const input = raiz.querySelector('.cuenta-picker-input');
    const sugerencias = raiz.querySelector('.cuenta-sugerencias');
    const elegidaBox = raiz.parentElement.querySelector('.cuenta-elegida');
    const elegidaCodigo = elegidaBox.querySelector('.cuenta-elegida-codigo');
    const elegidaNombre = elegidaBox.querySelector('.cuenta-elegida-nombre');
    const cambiarBtn = elegidaBox.querySelector('.cambiar');
    let codigoElegido = null;

return {
      setDisabled(v){ input.disabled = v; cambiarBtn.style.display = v ? 'none' : ''; },
      setValor(codigo, nombre, id){
        if (codigo){
          CUENTAS_POR_CODIGO[codigo] = CUENTAS_POR_CODIGO[codigo] || {id, codigo, nombre, acepta:true};
          marcar(codigo);
        } else limpiar();
      },
      getId(){ return codigoElegido ? CUENTAS_POR_CODIGO[codigoElegido].id : null; },
    };
  }
  const pickerInventario = crearPickerCuenta('inventario');
  const pickerEntrada = crearPickerCuenta('entrada');
  const pickerSalida = crearPickerCuenta('salida');

function ponerSoloLectura(soloLectura){
    formNombre.disabled = soloLectura;
    formDescripcion.disabled = soloLectura;
    formOrden.disabled = soloLectura;
    formActiva.disabled = soloLectura;
    pickerInventario.setDisabled(soloLectura);
    pickerEntrada.setDisabled(soloLectura);
    pickerSalida.setDisabled(soloLectura);
  }

let formModo = 'nuevo';
  let formIdEditando = null;

function abrirFormulario(modo, registro){
    formModo = modo;
    formIdEditando = registro ? registro.id : null;

formNombre.value = registro ? registro.nombre : '';
    formDescripcion.value = registro ? (registro.descripcion || '') : '';
    formOrden.value = registro && registro.orden !== null && registro.orden !== undefined ? registro.orden : '';
    formActiva.checked = registro ? registro.activa : true;

pickerInventario.setValor(registro ? registro.cuenta_inventario_codigo : null, registro ? registro.cuenta_inventario_nombre : null, registro ? registro.cuenta_inventario_id : null);
    pickerEntrada.setValor(registro ? registro.cuenta_entrada_codigo : null, registro ? registro.cuenta_entrada_nombre : null, registro ? registro.cuenta_entrada_id : null);
    pickerSalida.setValor(registro ? registro.cuenta_salida_codigo : null, registro ? registro.cuenta_salida_nombre : null, registro ? registro.cuenta_salida_id : null);

if (modo === 'ver'){
      formTitulo.textContent = 'Ver — Concepto de Movimiento de Inventario';
      ponerSoloLectura(true);
      formGuardar.style.display = 'none';
      formCancelar.textContent = 'Cerrar';
    } else {
      formTitulo.textContent = modo === 'nuevo' ? 'Nuevo — Concepto de Movimiento de Inventario' : 'Modificar — Concepto de Movimiento de Inventario';
      ponerSoloLectura(false);
      formGuardar.style.display = '';
      formCancelar.textContent = 'Cancelar';
    }

formGuardar.onclick = async ()=>{
    const nombre = formNombre.value.trim();
    if (!nombre){ await modalAlert('El nombre es obligatorio.'); formNombre.focus(); return; }

function pillActiva(activa){
    return activa
      ? `<span class="pill pill-aplicado">Activa</span>`
      : `<span class="pill pill-anulado">Inactiva</span>`;
  }

async function cargar(){
    tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    emptyState.style.display = 'none';
    try{
      REGISTROS = await llamarApi(`${API_CONCEPTOS}?${construirQuery()}`);
      if (REGISTROS.length === 0){
        tbody.innerHTML = '';
        emptyState.style.display = 'block';
      } else {
        tbody.innerHTML = REGISTROS.map(filaHtml).join('');
      }
      footNote.textContent = `${REGISTROS.length} registro${REGISTROS.length === 1 ? '' : 's'}`;
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      footNote.textContent = '';
    }
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar "${registro.nombre}"? Si está en uso por otros registros, no se podrá eliminar y se sugerirá desactivarlo en su lugar.`,
        'Eliminar registro', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${API_CONCEPTOS}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

document.getElementById('f-texto').addEventListener('input', ()=>{
    clearTimeout(window.__debounceCMI);
    window.__debounceCMI = setTimeout(cargar, 350);
  });
  document.getElementById('f-activa').addEventListener('change', cargar);

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

(async function iniciar(){
    document.getElementById('f-texto').focus();
    try{
      await cargarCuentas();
    }catch(e){
      await modalAlert(e.message, 'No se pudo cargar el catálogo de cuentas');
    }
    await cargar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Bodegas</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{
    font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
    font-variant-numeric:tabular-nums;
  }
  h1,h2,h3{
    font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;
    font-weight:600; text-wrap:balance; margin:0;
  }
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1000px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:200px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}

.row-actions{display:flex; gap:4px; justify-content:flex-end;}
  .icon-btn{
    border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
    width:30px; height:30px; border-radius:7px; display:inline-flex; align-items:center;
    justify-content:center; cursor:pointer; transition:transform .08s ease, filter .08s ease;
  }
  .icon-btn:hover{color:var(--ink); border-color:var(--ink-muted);}
  .icon-btn:active{transform:scale(0.90);}
  .icon-btn.danger:hover{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .icon-btn[disabled]{opacity:.3; cursor:not-allowed; transform:none;}
  .icon-btn svg{width:15px; height:15px;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}

.foot-note{font-size:12px; color:var(--ink-muted); margin-top:12px;}

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Bodegas</span>
    </div>
    <div class="crumbs"><b>Configuración</b> / Bodegas</div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>
<script>
(function(){
  const CONFIG = {
    titulo: "Bodegas",
    apiPath: "/inventario/bodegas",
    camposExtra: [],
  };
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador'; // no hay sesión/login todavía -- placeholder de trazabilidad

function cerrar(valor){
        modalOverlay.classList.remove('abierto');
        modalAceptar.onclick = null;
        modalCancelar.onclick = null;
        document.removeEventListener('keydown', onKey);
        resolve(valor);
      }
      function onKey(e){ if (e.key === 'Escape') cerrar(false); }
      modalAceptar.onclick = ()=> cerrar(true);
      modalCancelar.onclick = ()=> cerrar(false);
      document.addEventListener('keydown', onKey);

function idCampoExtra(campo){ return `ex-${campo.campo}`; }

let formModo = 'nuevo'; // 'nuevo' | 'modificar' | 'ver'
  let formIdEditando = null;

formGuardar.onclick = async ()=>{
    const nombre = formNombre.value.trim();
    if (!nombre){ await modalAlert('El nombre es obligatorio.'); formNombre.focus(); return; }

// Encabezados extra (una sola vez, la tabla no se reconstruye por fila). Se
  // insertan antes de "Estado" (ahora la última columna) -- "Acciones" quedó de
  // primera a propósito (Principio de UX: el usuario no debería tener que hacer
  // scroll horizontal para encontrar Ver/Modificar/Eliminar en una tabla ancha).
  // Se llama después de poblar CONFIG.camposExtra (bodegas necesita cargar las
  // sucursales reales primero, de forma asíncrona, antes de saber qué columnas mostrar).
  function construirEncabezados(){
    document.querySelectorAll('#fila-encabezados').forEach(fila=>{
      CONFIG.camposExtra.forEach(c=>{
        const th = document.createElement('th');
        th.textContent = c.etiqueta;
        fila.insertBefore(th, fila.children[fila.children.length - 1]);
      });
    });
  }

function celdaExtra(campo, fila){
    const v = fila[campo.campo];
    if (campo.tipo === 'booleano') return v ? 'Sí' : 'No';
    if (v === null || v === undefined || v === '') return `<span class="mono" style="color:var(--ink-muted);">—</span>`;
    if (campo.tipo === 'seleccion'){
      const opcion = (campo.opciones || []).find(op => op && typeof op === 'object' && String(op.value) === String(v));
      if (opcion) return opcion.texto;
    }
    return v;
  }

function pillActiva(activa){
    return activa
      ? `<span class="pill pill-aplicado">Activa</span>`
      : `<span class="pill pill-anulado">Inactiva</span>`;
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar "${registro.nombre}"? Si está en uso por otros registros, no se podrá eliminar y se sugerirá desactivarlo en su lugar.`,
        'Eliminar registro', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${CONFIG.apiPath}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

(async function iniciar(){
    try{
      const sucursales = await llamarApi('/sucursales');
      CONFIG.camposExtra = [{
        campo: 'sucursal_id', etiqueta: 'Sucursal', tipo: 'seleccion', esNumerico: true,
        opciones: sucursales.map(s => ({value: s.id, texto: s.nombre})),
      }];
    } catch(e){
      // Sin sucursales no se puede crear/editar una bodega con sentido -- se deja la
      // columna vacía y el formulario mostrará un <select> sin opciones en vez de romper
      // toda la pantalla por un backend caído.
      CONFIG.camposExtra = [];
    }
    construirEncabezados();
    document.getElementById('f-texto').focus();
    await cargar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Cuentas Bancarias</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{
    font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
    font-variant-numeric:tabular-nums;
  }
  h1,h2,h3{
    font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;
    font-weight:600; text-wrap:balance; margin:0;
  }
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1080px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:180px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

/* ---------- buscador de cuenta contable (mismo patrón de Asientos / Movimiento de Cuenta) ---------- */
  .cuenta-picker{position:relative;}
  .cuenta-sugerencias{
    display:none; position:fixed; background:var(--surface); border:1px solid var(--line-strong);
    border-radius:9px; box-shadow:var(--shadow); max-height:260px; overflow-y:auto; z-index:400;
  }
  .cuenta-sugerencias.abierta{display:block;}
  .sug-item{display:flex; flex-direction:column; gap:1px; padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--line);}
  .sug-item:last-child{border-bottom:none;}
  .sug-item:hover{background:var(--accent-soft);}
  .sug-nombre{font-size:13.5px; color:var(--ink);}
  .sug-nombre mark{background:transparent; color:var(--accent); font-weight:700; padding:0;}
  .sug-meta{font-size:11px; color:var(--ink-muted);}
  .sug-vacio{padding:14px 12px; font-size:13px; color:var(--ink-muted); text-align:center;}
  .cuenta-elegida{
    display:none; align-items:center; justify-content:space-between; gap:10px;
    background:var(--accent-soft); border:1px solid var(--accent); border-radius:7px;
    padding:7px 11px; font-size:13px;
  }
  .cuenta-elegida.visible{display:flex;}
  .cuenta-elegida .cambiar{
    background:none; border:none; color:var(--accent); font-weight:600; cursor:pointer; padding:0;
    font-size:12px; text-decoration:underline; font-family:inherit; white-space:nowrap;
  }

/* ---------- modal propio (confirm/alert) ---------- */
  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  /* #modal-overlay (aviso/confirmacion) comparte la clase .modal-overlay con otro overlay de
     esta pantalla, mismo z-index -- si #modal-overlay aparece antes en el DOM, al abrirse los
     dos a la vez (ej. un error de guardado mientras un formulario sigue abierto) el otro overlay
     pintaba encima y el aviso quedaba oculto/inaccesible detras. Bug real reportado: "el
     Entendido no se ve". Un z-index propio, mas alto, garantiza que el aviso siempre gane sin
     importar el orden del DOM. */
  #modal-overlay{ z-index:400; }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:420px; width:100%;
  }
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}

.modal-box.form-box{max-width:460px;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input[type="text"], .form-field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%;
  }
  .form-field.checkbox label{
    display:flex; align-items:center; gap:8px; text-transform:none;
    letter-spacing:normal; font-size:13.5px; color:var(--ink);
  }
  .form-field input[disabled], .form-field select[disabled]{opacity:.6; cursor:not-allowed;}
  .form-saldo{
    background:var(--surface-2); border:1px solid var(--line); border-radius:7px;
    padding:9px 11px; margin-bottom:14px; font-size:13.5px; display:flex; justify-content:space-between;
  }
  .form-saldo .val{font-weight:700;}
  .form-audit{
    font-size:12px; color:var(--ink-muted); border-top:1px solid var(--line);
    margin-top:4px; padding-top:12px; line-height:1.7;
  }

@media print{
    @page{ margin: 1.5cm; }
    .topbar .crumbs, .filters, .row-actions, .no-print{display:none !important;}
    body{background:#fff; color:#000;}
    .app{max-width:none; padding:0;}
    .table-wrap{box-shadow:none; border:1px solid #000;}
    thead th{background:none !important; border-color:#000 !important;}
    .pill{background:none !important; border:1px solid #000 !important; color:#000 !important;}
    .pill::before{display:none;}
    .saldo-neg{color:#000 !important;}
  }
  .fenix-toast{
    position:fixed; bottom:24px; right:24px; z-index:300;
    background:var(--accent); color:var(--accent-ink); padding:11px 18px; border-radius:8px;
    box-shadow:var(--shadow); font-size:13.5px; font-weight:600;
    display:flex; align-items:center; gap:8px;
    opacity:0; transform:translateY(10px); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .fenix-toast.visible{ opacity:1; transform:translateY(0); }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Cuentas Bancarias</span>
    </div>
    <div class="crumbs"><b>Bancos</b> / Cuentas bancarias</div>
  </div>

<div class="filters">
    <div class="field texto">
      <label for="f-numero">Número</label>
      <input type="text" id="f-numero" placeholder="ej. 3409" autocomplete="off">
    </div>
    <div class="field texto">
      <label for="f-descripcion">Descripción</label>
      <input type="text" id="f-descripcion" placeholder="ej. dólares" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-activa">Estado</label>
      <select id="f-activa">
        <option value="">Todas</option>
        <option value="true">Activas</option>
        <option value="false">Inactivas</option>
      </select>
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-gestionar-bancos" data-nav-shell="bancoscatalogo" href="bancos_ui.html">🏦 Gestionar bancos</button>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nuevo</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Banco</th>
          <th>Número</th>
          <th>Descripción</th>
          <th class="num">Saldo</th>
          <th>Activa</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay cuentas bancarias con estos filtros</b>
      Ajusta los filtros, o límpialos para ver todas, o crea la primera con "+ Nuevo".
    </div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div class="form-field">
      <label for="form-banco">Banco</label>
      <select id="form-banco"></select>
    </div>
    <div class="form-field">
      <label for="form-numero">Número de cuenta</label>
      <input type="text" id="form-numero">
    </div>
    <div class="form-field">
      <label for="form-descripcion">Descripción</label>
      <input type="text" id="form-descripcion">
    </div>
    <div class="form-field">
      <label for="form-moneda">Moneda</label>
      <select id="form-moneda">
        <option value="CRC">CRC</option>
        <option value="USD">USD</option>
      </select>
    </div>
    <div class="form-field">
      <label for="cuenta-input">Cuenta contable asociada</label>
      <div class="cuenta-picker">
        <input id="cuenta-input" type="text" autocomplete="off" placeholder="Escriba para buscar una cuenta…">
        <div class="cuenta-sugerencias" id="cuenta-sugerencias"></div>
      </div>
      <div class="cuenta-elegida" id="cuenta-elegida-box">
        <span><span class="mono" id="cuenta-elegida-codigo"></span> — <span id="cuenta-elegida-nombre"></span></span>
        <button class="cambiar" id="cambiar-cuenta">Cambiar</button>
      </div>
    </div>
    <div class="form-field">
      <label for="form-saldo-inicial-banco">Saldo inicial en el banco</label>
      <input type="number" step="0.01" id="form-saldo-inicial-banco" placeholder="Según el estado de cuenta del banco">
    </div>
    <div class="form-field">
      <label for="form-fecha-saldo-inicial-banco">Fecha de ese saldo inicial</label>
      <input type="date" id="form-fecha-saldo-inicial-banco">
    </div>
    <div class="form-saldo" id="form-saldo-box" style="display:none;">
      <span>Saldo actual (calculado, no editable)</span>
      <span class="val mono" id="form-saldo-valor"></span>
    </div>
    <div class="form-field checkbox" style="margin-top:14px;">
      <label><input type="checkbox" id="form-activa" checked> Activa</label>
    </div>
    <div class="form-audit" id="form-audit" style="display:none;"></div>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="form-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="form-guardar">Guardar</button>
    </div>
  </div>
</div>

// ---------------- Bancos (para el <select>) ----------------
  let BANCOS = [];
  async function cargarBancos(){
    BANCOS = await llamarApi('/bancos/bancos?activa=true');
    const sel = document.getElementById('form-banco');
    sel.innerHTML = BANCOS.map(b=>`<option value="${b.id}">${b.nombre}${b.descripcion ? ' ('+b.descripcion+')' : ''}</option>`).join('');
  }

// ---------------- Cuentas contables (buscador, mismo patrón de Asientos/Movimiento de Cuenta) ----------------
  let CUENTAS_TODAS = [], CUENTAS = [], CUENTAS_POR_CODIGO = {};
  async function cargarCuentas(){
    const filas = await llamarApi('/cuentas');
    CUENTAS_TODAS = filas.map(c=>({codigo:c.codigo, nombre:c.nombre, acepta:c.acepta_movimientos}));
    CUENTAS = CUENTAS_TODAS.filter(c=>c.acepta);
    CUENTAS_POR_CODIGO = Object.fromEntries(CUENTAS_TODAS.map(c=>[c.codigo,c]));
  }
  function nombrePadre(codigo){
    const segs = codigo.split('-');
    if (segs.length <= 1) return null;
    const padre = CUENTAS_POR_CODIGO[segs.slice(0,-1).join('-')];
    return padre ? padre.nombre : null;
  }
  function resaltar(texto, query){
    const idx = texto.toUpperCase().indexOf(query.toUpperCase());
    if (idx === -1) return texto;
    return texto.slice(0,idx) + '<mark>' + texto.slice(idx, idx+query.length) + '</mark>' + texto.slice(idx+query.length);
  }

let cuentaElegida = null;
  const cuentaInput = document.getElementById('cuenta-input');
  const cuentaCaja = document.getElementById('cuenta-sugerencias');
  const cuentaElegidaBox = document.getElementById('cuenta-elegida-box');

// ---------------- Modal de formulario (Nuevo / Modificar / Ver) ----------------
  const formOverlay = document.getElementById('form-overlay');
  const formTitulo = document.getElementById('form-titulo');
  const formBanco = document.getElementById('form-banco');
  const formNumero = document.getElementById('form-numero');
  const formDescripcion = document.getElementById('form-descripcion');
  const formMoneda = document.getElementById('form-moneda');
  const formActiva = document.getElementById('form-activa');
  const formSaldoInicialBanco = document.getElementById('form-saldo-inicial-banco');
  const formFechaSaldoInicialBanco = document.getElementById('form-fecha-saldo-inicial-banco');
  const formSaldoBox = document.getElementById('form-saldo-box');
  const formSaldoValor = document.getElementById('form-saldo-valor');
  const formAudit = document.getElementById('form-audit');
  const formGuardar = document.getElementById('form-guardar');
  const formCancelar = document.getElementById('form-cancelar');

function ponerSoloLectura(soloLectura){
    formBanco.disabled = soloLectura;
    formNumero.disabled = soloLectura;
    formDescripcion.disabled = soloLectura;
    formMoneda.disabled = soloLectura;
    formActiva.disabled = soloLectura;
    formSaldoInicialBanco.disabled = soloLectura;
    formFechaSaldoInicialBanco.disabled = soloLectura;
    document.getElementById('cambiar-cuenta').style.display = soloLectura ? 'none' : '';
  }

let formModo = 'nuevo';
  let formIdEditando = null;

function abrirFormulario(modo, registro){
    formModo = modo;
    formIdEditando = registro ? registro.id : null;

formBanco.value = registro ? String(registro.banco_id) : (BANCOS[0] ? String(BANCOS[0].id) : '');
    formNumero.value = registro ? registro.numero : '';
    formDescripcion.value = registro ? (registro.descripcion || '') : '';
    formMoneda.value = registro ? registro.moneda : 'CRC';
    formActiva.checked = registro ? registro.activa : true;
    formSaldoInicialBanco.value = (registro && registro.saldo_inicial_banco != null) ? registro.saldo_inicial_banco : '';
    formFechaSaldoInicialBanco.value = (registro && registro.fecha_saldo_inicial_banco) ? registro.fecha_saldo_inicial_banco : '';

if (registro){
      marcarCuentaElegida(registro.cuenta_contable_codigo);
      formSaldoBox.style.display = '';
      formSaldoValor.textContent = formatearMonto(registro.saldo, registro.moneda);
      formSaldoValor.classList.toggle('saldo-neg', registro.saldo < 0);
    } else {
      limpiarCuentaElegida();
      formSaldoBox.style.display = 'none';
    }

if (modo === 'ver'){
      formTitulo.textContent = 'Ver — Cuenta Bancaria';
      ponerSoloLectura(true);
      formGuardar.style.display = 'none';
      formCancelar.textContent = 'Cerrar';
    } else {
      formTitulo.textContent = modo === 'nuevo' ? 'Nuevo — Cuenta Bancaria' : 'Modificar — Cuenta Bancaria';
      ponerSoloLectura(false);
      formGuardar.style.display = '';
      formCancelar.textContent = 'Cancelar';
    }

formOverlay.classList.add('abierto');
    setTimeout(()=> { if (modo === 'nuevo') formBanco.focus(); }, 30);
  }
  function cerrarFormulario(){ formOverlay.classList.remove('abierto'); }
  formCancelar.onclick = cerrarFormulario;
  document.addEventListener('keydown', e=>{ if (e.key === 'Escape' && formOverlay.classList.contains('abierto')) cerrarFormulario(); });

formGuardar.onclick = async ()=>{
    const numero = formNumero.value.trim();
    if (!numero){ await modalAlert('El número de cuenta es obligatorio.'); formNumero.focus(); return; }
    if (!cuentaElegida){ await modalAlert('Debe elegir la cuenta contable asociada.'); cuentaInput.focus(); return; }
    if ((formSaldoInicialBanco.value !== '') !== (formFechaSaldoInicialBanco.value !== '')){
      await modalAlert('Indique el saldo inicial y su fecha juntos, o deje ambos vacíos.');
      (formSaldoInicialBanco.value === '' ? formSaldoInicialBanco : formFechaSaldoInicialBanco).focus();
      return;
    }

function pillActiva(activa){
    return activa
      ? `<span class="pill pill-aplicado">Activa</span>`
      : `<span class="pill pill-anulado">Inactiva</span>`;
  }

function construirQuery(){
    const params = new URLSearchParams();
    const numero = document.getElementById('f-numero').value.trim();
    const descripcion = document.getElementById('f-descripcion').value.trim();
    const activa = document.getElementById('f-activa').value;
    if (numero) params.set('numero', numero);
    if (descripcion) params.set('descripcion', descripcion);
    if (activa) params.set('activa', activa);
    return params.toString();
  }

async function cargar(){
    tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    emptyState.style.display = 'none';
    try{
      REGISTROS = await llamarApi(`${API_CUENTAS_BANCARIAS}?${construirQuery()}`);
      if (REGISTROS.length === 0){
        tbody.innerHTML = '';
        emptyState.style.display = 'block';
      } else {
        tbody.innerHTML = REGISTROS.map(filaHtml).join('');
      }
      footNote.textContent = `${REGISTROS.length} cuenta${REGISTROS.length === 1 ? '' : 's'} bancaria${REGISTROS.length === 1 ? '' : 's'}`;
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      footNote.textContent = '';
    }
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar la cuenta ${registro.numero} (${registro.banco_nombre})? Si tiene movimientos u otros registros asociados, no se podrá eliminar y se sugerirá desactivarla en su lugar.`,
        'Eliminar cuenta bancaria', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${API_CUENTAS_BANCARIAS}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

document.getElementById('f-numero').addEventListener('input', ()=>{
    clearTimeout(window.__debounceCB);
    window.__debounceCB = setTimeout(cargar, 350);
  });
  document.getElementById('f-descripcion').addEventListener('input', ()=>{
    clearTimeout(window.__debounceCB);
    window.__debounceCB = setTimeout(cargar, 350);
  });
  document.getElementById('f-activa').addEventListener('change', cargar);

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

// Navegación a otra pantalla dentro del shell unificado (ver nota en catalogo_ui_template.html).
  document.querySelectorAll('[data-nav-shell]').forEach(enlace=>{
    enlace.addEventListener('click', (ev)=>{
      if (window.parent === window){ window.location.href = enlace.getAttribute('href'); return; }
      ev.preventDefault();
      window.parent.postMessage({tipo:'fenix-nav', destino: enlace.dataset.navShell}, '*');
    });
  });

(async function iniciar(){
    try{
      await Promise.all([cargarBancos(), cargarCuentas()]);
    } catch(e){
      await modalAlert(e.message, 'No se pudo cargar bancos o cuentas contables');
    }
    document.getElementById('f-numero').focus();
    await cargar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Bancos</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{
    font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
    font-variant-numeric:tabular-nums;
  }
  h1,h2,h3{
    font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;
    font-weight:600; text-wrap:balance; margin:0;
  }
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1000px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:200px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}

.row-actions{display:flex; gap:4px; justify-content:flex-end;}
  .icon-btn{
    border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
    width:30px; height:30px; border-radius:7px; display:inline-flex; align-items:center;
    justify-content:center; cursor:pointer; transition:transform .08s ease, filter .08s ease;
  }
  .icon-btn:hover{color:var(--ink); border-color:var(--ink-muted);}
  .icon-btn:active{transform:scale(0.90);}
  .icon-btn.danger:hover{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .icon-btn[disabled]{opacity:.3; cursor:not-allowed; transform:none;}
  .icon-btn svg{width:15px; height:15px;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}

.foot-note{font-size:12px; color:var(--ink-muted); margin-top:12px;}

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Bancos</span>
    </div>
    <div class="crumbs"><b>Configuración</b> / Bancos</div>
  </div>

<div class="filters">
    <div class="field texto">
      <label for="f-texto">Buscar por nombre</label>
      <input type="text" id="f-texto" placeholder="ej. electrodomésticos" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-activa">Estado</label>
      <select id="f-activa">
        <option value="">Todos</option>
        <option value="true">Activos</option>
        <option value="false">Inactivos</option>
      </select>
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <a class="btn btn-ghost no-print" id="btn-volver" href="cuentas_bancarias_ui.html" data-nav-shell="cuentasbancarias">‹ Volver</a>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nuevo</button>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>
<script>
(function(){
  const CONFIG = {
    titulo: "Bancos",
    apiPath: "/bancos/bancos",
    camposExtra: [{"campo": "descripcion", "etiqueta": "Descripción", "tipo": "texto"}, {"campo": "orden", "etiqueta": "Orden", "tipo": "numero"}, {"campo": "formato_csv", "etiqueta": "Formato de CSV (motor de importación)", "tipo": "seleccion", "opciones": ["", "BN", "BCR"]}],
  };
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador'; // no hay sesión/login todavía -- placeholder de trazabilidad

function cerrar(valor){
        modalOverlay.classList.remove('abierto');
        modalAceptar.onclick = null;
        modalCancelar.onclick = null;
        document.removeEventListener('keydown', onKey);
        resolve(valor);
      }
      function onKey(e){ if (e.key === 'Escape') cerrar(false); }
      modalAceptar.onclick = ()=> cerrar(true);
      modalCancelar.onclick = ()=> cerrar(false);
      document.addEventListener('keydown', onKey);

function idCampoExtra(campo){ return `ex-${campo.campo}`; }

let formModo = 'nuevo'; // 'nuevo' | 'modificar' | 'ver'
  let formIdEditando = null;

formGuardar.onclick = async ()=>{
    const nombre = formNombre.value.trim();
    if (!nombre){ await modalAlert('El nombre es obligatorio.'); formNombre.focus(); return; }

function pillActiva(activa){
    return activa
      ? `<span class="pill pill-aplicado">Activa</span>`
      : `<span class="pill pill-anulado">Inactiva</span>`;
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar "${registro.nombre}"? Si está en uso por otros registros, no se podrá eliminar y se sugerirá desactivarlo en su lugar.`,
        'Eliminar registro', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${CONFIG.apiPath}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

document.getElementById('f-texto').focus();
  cargar();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Tipos de Documento Bancario</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{
    font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
    font-variant-numeric:tabular-nums;
  }
  h1,h2,h3{
    font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;
    font-weight:600; text-wrap:balance; margin:0;
  }
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1000px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:200px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}

.row-actions{display:flex; gap:4px; justify-content:flex-end;}
  .icon-btn{
    border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
    width:30px; height:30px; border-radius:7px; display:inline-flex; align-items:center;
    justify-content:center; cursor:pointer; transition:transform .08s ease, filter .08s ease;
  }
  .icon-btn:hover{color:var(--ink); border-color:var(--ink-muted);}
  .icon-btn:active{transform:scale(0.90);}
  .icon-btn.danger:hover{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .icon-btn[disabled]{opacity:.3; cursor:not-allowed; transform:none;}
  .icon-btn svg{width:15px; height:15px;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}

.foot-note{font-size:12px; color:var(--ink-muted); margin-top:12px;}

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Tipos de Documento Bancario</span>
    </div>
    <div class="crumbs"><b>Configuración</b> / Tipos de documento bancario</div>
  </div>

<div class="filters">
    <div class="field texto">
      <label for="f-texto">Buscar por nombre</label>
      <input type="text" id="f-texto" placeholder="ej. electrodomésticos" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-activa">Estado</label>
      <select id="f-activa">
        <option value="">Todos</option>
        <option value="true">Activos</option>
        <option value="false">Inactivos</option>
      </select>
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <a class="btn btn-ghost no-print" id="btn-volver" href="cuentas_bancarias_ui.html" data-nav-shell="cuentasbancarias">‹ Volver</a>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nuevo</button>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>
<script>
(function(){
  const CONFIG = {
    titulo: "Tipos de Documento Bancario",
    apiPath: "/bancos/tipos-documento",
    camposExtra: [{"campo": "orden", "etiqueta": "Orden", "tipo": "numero"}, {"campo": "direccion_saldo", "etiqueta": "Dirección del saldo", "tipo": "seleccion", "opciones": ["Aumenta", "Disminuye"]}],
  };
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador'; // no hay sesión/login todavía -- placeholder de trazabilidad

function cerrar(valor){
        modalOverlay.classList.remove('abierto');
        modalAceptar.onclick = null;
        modalCancelar.onclick = null;
        document.removeEventListener('keydown', onKey);
        resolve(valor);
      }
      function onKey(e){ if (e.key === 'Escape') cerrar(false); }
      modalAceptar.onclick = ()=> cerrar(true);
      modalCancelar.onclick = ()=> cerrar(false);
      document.addEventListener('keydown', onKey);

function idCampoExtra(campo){ return `ex-${campo.campo}`; }

let formModo = 'nuevo'; // 'nuevo' | 'modificar' | 'ver'
  let formIdEditando = null;

formGuardar.onclick = async ()=>{
    const nombre = formNombre.value.trim();
    if (!nombre){ await modalAlert('El nombre es obligatorio.'); formNombre.focus(); return; }

function pillActiva(activa){
    return activa
      ? `<span class="pill pill-aplicado">Activa</span>`
      : `<span class="pill pill-anulado">Inactiva</span>`;
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar "${registro.nombre}"? Si está en uso por otros registros, no se podrá eliminar y se sugerirá desactivarlo en su lugar.`,
        'Eliminar registro', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${CONFIG.apiPath}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

document.getElementById('f-texto').focus();
  cargar();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Tipo de cambio de referencia</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{
    font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
    font-variant-numeric:tabular-nums;
  }
  h1,h2,h3{
    font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;
    font-weight:600; text-wrap:balance; margin:0;
  }
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:900px; margin:0 auto; padding:28px 24px 64px;}

.topbar{
    display:flex; align-items:baseline; justify-content:space-between;
    padding-bottom:18px; border-bottom:2px solid var(--ink); margin-bottom:14px;
    gap:16px; flex-wrap:wrap;
  }
  .brand{display:flex; align-items:baseline; gap:10px;}
  .brand h1{font-size:22px; letter-spacing:.2px;}
  .brand .sep{color:var(--line-strong);}
  .brand .empresa{font-size:14px; color:var(--ink-muted);}
  .crumbs{font-size:12.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.06em;}
  .crumbs b{color:var(--ink); font-weight:600;}

.intro{font-size:13px; color:var(--ink-muted); margin-bottom:18px; max-width:640px; line-height:1.6;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:14px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}

.table-wrap{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow);
  }
  table{border-collapse:collapse; width:100%; min-width:460px;}
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--ink-muted); font-weight:600; padding:11px 14px;
    border-bottom:1px solid var(--line-strong); background:var(--surface-2);
    position:sticky; top:0;
  }
  thead th.num{text-align:right;}
  tbody td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
  tbody td.num{text-align:right;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--surface-2);}
  .pill-hoy{
    display:inline-block; margin-left:8px; padding:2px 7px; border-radius:99px;
    background:var(--accent-soft); color:var(--accent); font-size:10.5px; font-weight:700;
  }

.row-actions{display:flex; gap:4px; justify-content:flex-end;}
  .icon-btn{
    border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
    width:30px; height:30px; border-radius:7px; display:inline-flex; align-items:center;
    justify-content:center; cursor:pointer; transition:transform .08s ease, filter .08s ease;
  }
  .icon-btn:hover{color:var(--ink); border-color:var(--ink-muted);}
  .icon-btn:active{transform:scale(0.90);}
  .icon-btn svg{width:15px; height:15px;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  #modal-overlay{ z-index:400; }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:420px; width:100%;
  }
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}
  .modal-box.form-box{max-width:400px;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%;
  }
  .form-field input[disabled]{opacity:.6; cursor:not-allowed;}
  .form-audit{
    font-size:12px; color:var(--ink-muted); border-top:1px solid var(--line);
    margin-top:4px; padding-top:12px; line-height:1.7;
  }

@media print{
    @page{ margin: 1.5cm; }
    .topbar .crumbs, .filters, .row-actions{display:none !important;}
    body{background:#fff; color:#000;}
    .app{max-width:none; padding:0;}
    .table-wrap{box-shadow:none; border:1px solid #000;}
    thead th{background:none !important; border-color:#000 !important;}
  }
  .fenix-toast{
    position:fixed; bottom:24px; right:24px; z-index:300;
    background:var(--accent); color:var(--accent-ink); padding:11px 18px; border-radius:8px;
    box-shadow:var(--shadow); font-size:13.5px; font-weight:600;
    display:flex; align-items:center; gap:8px;
    opacity:0; transform:translateY(10px); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .fenix-toast.visible{ opacity:1; transform:translateY(0); }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Tipo de cambio de referencia</span>
    </div>
    <div class="crumbs"><b>Configuración</b> / Bancos</div>
  </div>

<p class="intro">
    Captura manual diaria del tipo de cambio de referencia de venta (BCCR, indicador 318) --
    lo usa el resumen de utilidad de Facturas y Proformas para comparar un costo capturado en
    dólares contra una venta en colones (o viceversa), nunca para asientos contables reales.
  </p>

<div class="filters">
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-ghost no-print" id="btn-actualizar-bccr">↓ Actualizar desde BCCR</button>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Capturar tipo de cambio</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th></th><th>Fecha</th><th class="num">Valor de venta (₡ por USD)</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>Todavía no hay ningún tipo de cambio capturado</b>
      Use "+ Capturar tipo de cambio" para registrar el de hoy.
    </div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="form-overlay">
  <div class="modal-box form-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="form-titulo"></h3>
    <div class="form-field">
      <label for="form-fecha">Fecha</label>
      <input type="date" id="form-fecha">
    </div>
    <div class="form-field">
      <label for="form-valor">Valor de venta (₡ por USD)</label>
      <input type="number" id="form-valor" min="0" step="0.00001">
    </div>
    <div class="form-audit" id="form-audit" style="display:none;"></div>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="form-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="form-guardar">Guardar</button>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>
<script>
(function(){
  const API_PATH = '/bancos/tipo-cambio-referencia';
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador';

// ---------------- Formulario Nuevo/Modificar ----------------
  const formOverlay = document.getElementById('form-overlay');
  const formTitulo = document.getElementById('form-titulo');
  const formFecha = document.getElementById('form-fecha');
  const formValor = document.getElementById('form-valor');
  const formAudit = document.getElementById('form-audit');
  const formGuardar = document.getElementById('form-guardar');
  const formCancelar = document.getElementById('form-cancelar');
  let formModo = 'nuevo';
  let formIdEditando = null;

formGuardar.onclick = async ()=>{
    const fecha = formFecha.value;
    const valor = Number(formValor.value);
    if (!fecha){ await modalAlert('La fecha es obligatoria.'); formFecha.focus(); return; }
    if (!valor || valor <= 0){ await modalAlert('El valor de venta debe ser mayor que cero.'); formValor.focus(); return; }

formGuardar.disabled = true;
    formGuardar.textContent = 'Guardando…';
    try{
      if (formModo === 'nuevo'){
        await llamarApi(API_PATH, {method:'POST', headers:{'Content-Type':'application/json'},
          body: JSON.stringify({fecha, valor_venta: valor, creado_por: USUARIO_ACTUAL})});
      } else {
        await llamarApi(`${API_PATH}/${formIdEditando}`, {method:'PUT', headers:{'Content-Type':'application/json'},
          body: JSON.stringify({valor_venta: valor, modificado_por: USUARIO_ACTUAL})});
      }
      mostrarToast('✓ Guardado'); cerrarFormulario();
      await cargar();
    } catch(e){
      await modalAlert(e.message, 'No se pudo guardar');
    } finally {
      formGuardar.disabled = false;
      formGuardar.textContent = 'Guardar';
    }
  };

function filaHtml(r){
    const esHoy = r.fecha === hoyISO();
    return `
      <tr data-id="${r.id}">
        <td>
          <div class="row-actions">
            <button class="icon-btn" title="Corregir" data-accion="modificar" data-id="${r.id}">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg></button>
          </div>
        </td>
        <td>${formatearFecha(r.fecha)}${esHoy ? '<span class="pill-hoy">HOY</span>' : ''}</td>
        <td class="num mono">${formatearMonto(r.valor_venta)}</td>
      </tr>
    `;
  }

async function cargar(){
    tbody.innerHTML = `<tr><td colspan="3" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    emptyState.style.display = 'none';
    try{
      REGISTROS = await llamarApi(API_PATH);
      if (REGISTROS.length === 0){
        tbody.innerHTML = '';
        emptyState.style.display = 'block';
      } else {
        tbody.innerHTML = REGISTROS.map(filaHtml).join('');
      }
      footNote.textContent = `${REGISTROS.length} registro${REGISTROS.length === 1 ? '' : 's'} (últimos 90 días)`;
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="3" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      footNote.textContent = '';
    }
  }

tbody.addEventListener('click', (ev)=>{
    const btn = ev.target.closest('button[data-accion]');
    if (!btn) return;
    const registro = REGISTROS.find(r=>r.id === Number(btn.dataset.id));
    abrirFormulario('modificar', registro);
  });

document.getElementById('btn-refrescar').addEventListener('click', async (ev)=>{
    const icono = ev.currentTarget.querySelector('svg');
    icono.classList.add('girando');
    await cargar();
    icono.classList.remove('girando');
  });
  document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

cargar();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Transacciones Bancarias</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{
    font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
    font-variant-numeric:tabular-nums;
  }
  h1,h2,h3{
    font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;
    font-weight:600; text-wrap:balance; margin:0;
  }
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1220px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field.num input{width:92px;}
  .field.numero input{width:90px;}
  .field.fecha input{width:140px;}
  .field select{min-width:150px;}
  .range{display:flex; align-items:end; gap:7px;}
  .range .dash{color:var(--ink-muted); padding-bottom:8px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-sm{padding:5px 10px; font-size:12.5px; border-radius:6px;}
  .btn[disabled]{opacity:.4; cursor:not-allowed;}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

/* ---------- vistas ---------- */
  .view{display:none;}
  .view.active{display:block;}

.form-card{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    box-shadow:var(--shadow); padding:28px 32px; max-width:960px; margin:0 auto;
  }
  .form-card h2{font-size:18px; margin-bottom:4px;}
  .form-sub{color:var(--ink-muted); font-size:13px; margin-bottom:22px;}
  .form-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px 16px; margin-bottom:8px;}
  .form-grid .full{grid-column:1 / -1;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); display:block; margin-bottom:5px;}
  .form-field input, .form-field select{
    width:100%; background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px;
  }

.seccion-titulo{
    font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);
    border-bottom:1px solid var(--line); padding-bottom:8px; margin:26px 0 14px;
  }

.linea-banco{
    display:grid; grid-template-columns:1fr 140px 140px; gap:10px; align-items:center;
    background:var(--accent-soft); border:1px solid var(--accent); border-radius:8px;
    padding:10px 14px; margin-bottom:14px; font-size:13.5px;
  }
  .linea-banco .lbl{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); display:block; margin-bottom:2px;}
  .linea-banco .val-num{text-align:right; font-weight:700;}
  .linea-banco .cuenta-txt{font-weight:600;}

.form-actions{display:flex; justify-content:flex-end; gap:10px; border-top:1px solid var(--line); padding-top:18px;}

/* ---------- modal Ver ---------- */
  .voucher{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:26px 30px; max-width:640px; width:100%;
  }
  .voucher-head{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--ink); padding-bottom:12px; margin-bottom:16px; gap:16px;}
  .voucher-head h3{font-size:17px;}
  .voucher-num{text-align:right;}
  .voucher-num .n{font-size:20px; font-weight:700;}
  .voucher-num .mono{color:var(--ink-muted); font-size:12px;}
  .meta-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px 18px; margin-bottom:16px;}
  .meta-grid .field-ro label{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); display:block; margin-bottom:2px;}
  .meta-grid .field-ro .val{font-size:13.5px;}
  table.lineas-ver{width:100%; border-collapse:collapse; margin-bottom:16px;}
  table.lineas-ver th{font-size:10px; text-transform:uppercase; color:var(--ink-muted); text-align:right; padding:6px 8px; border-bottom:1px solid var(--line-strong);}
  table.lineas-ver th:first-child{text-align:left;}
  table.lineas-ver td{padding:7px 8px; border-bottom:1px solid var(--line); text-align:right; font-size:13px;}
  table.lineas-ver td:first-child{text-align:left;}
  .anulado-banner{
    background:var(--red-bg); border:1px solid var(--red-line); color:var(--red-ink);
    border-radius:8px; padding:11px 13px; font-size:12.5px; margin-bottom:16px;
  }
  .anulado-banner b{display:block; margin-bottom:2px;}

/* ---------- modal propio (confirm/alert/prompt) ---------- */
  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  /* #modal-overlay (aviso/confirmacion) comparte la clase .modal-overlay con otro overlay de
     esta pantalla, mismo z-index -- si #modal-overlay aparece antes en el DOM, al abrirse los
     dos a la vez (ej. un error de guardado mientras un formulario sigue abierto) el otro overlay
     pintaba encima y el aviso quedaba oculto/inaccesible detras. Bug real reportado: "el
     Entendido no se ve". Un z-index propio, mas alto, garantiza que el aviso siempre gane sin
     importar el orden del DOM. */
  #modal-overlay{ z-index:400; }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:440px; width:100%;
  }
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-input{
    width:100%; background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:9px 11px; color:var(--ink); font-size:13.5px; margin-bottom:16px;
  }
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Transacciones Bancarias</span>
    </div>
    <div class="crumbs" id="crumbs"><b>Bancos</b> / Transacciones bancarias</div>
  </div>

<div class="view active" id="view-lista">
    <div class="filters">
      <div class="field numero"><label for="f-numero">Número</label><input type="text" id="f-numero" autocomplete="off"></div>
      <div class="field">
        <label>Fecha</label>
        <div class="range">
          <div class="field fecha"><input type="date" id="f-fecha-desde" class="mono"></div>
          <span class="dash">–</span>
          <div class="field fecha"><input type="date" id="f-fecha-hasta" class="mono"></div>
        </div>
      </div>
      <div class="field"><label for="f-cuenta-bancaria">Cuenta bancaria</label><select id="f-cuenta-bancaria"><option value="">Todas</option></select></div>
      <div class="field"><label for="f-estado">Estado</label>
        <select id="f-estado">
          <option value="">Todos</option>
          <option value="Pendiente">Registrada</option>
          <option value="Aplicado">Aplicada</option>
          <option value="Anulado">Anulada</option>
        </select>
      </div>
      <div class="field"><label for="f-tipo-documento">Tipo de documento</label><select id="f-tipo-documento"><option value="">Todos</option></select></div>
      <div class="field"><label for="f-comprobante">Comprobante</label><input type="text" id="f-comprobante" autocomplete="off"></div>
      <div class="field"><label for="f-beneficiario">Beneficiario</label><input type="text" id="f-beneficiario" autocomplete="off"></div>
      <div class="field">
        <label>Monto</label>
        <div class="range">
          <div class="field num"><input type="number" id="f-monto-desde" class="mono" placeholder="desde"></div>
          <span class="dash">–</span>
          <div class="field num"><input type="number" id="f-monto-hasta" class="mono" placeholder="a"></div>
        </div>
      </div>
      <div class="spacer"></div>
      <button class="btn btn-ghost" id="btn-refrescar" title="Refrescar">
        <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
        Refrescar
      </button>
      <button class="btn btn-ghost" id="btn-exportar">
        <svg id="icono-exportar" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
        <span id="texto-exportar">Exportar a Excel</span>
      </button>
      <button class="btn btn-primary" id="btn-nuevo">+ Nuevo</button>
    </div>

<div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th></th><th>Número</th><th>Asiento</th><th>Estado</th><th>Fecha</th>
            <th>Tipo de documento</th><th>Cuenta bancaria</th><th class="num">Monto</th>
            <th>Comprobante</th><th>Beneficiario</th><th>Observaciones</th><th>Conciliación</th>
          </tr>
        </thead>
        <tbody id="tbody-registros"></tbody>
      </table>
      <div class="empty-state" id="empty-state" style="display:none;">
        <b>No hay transacciones bancarias con estos filtros</b>
        Ajusta los filtros, o límpialos para ver todas, o registra la primera con "+ Nuevo".
      </div>
    </div>
    <div class="foot-note" id="foot-note">Cargando…</div>
  </div>

<div class="view" id="view-nuevo">
    <div class="form-card">
      <h2>Registrar Transacción Bancaria</h2>
      <p class="form-sub">Se crea en estado <b>Registrada</b> junto con su asiento contable — no afecta el saldo hasta que se aplique.</p>

<div class="form-grid">
        <div class="form-field"><label for="n-fecha">Fecha</label><input type="date" id="n-fecha" class="mono"></div>
        <div class="form-field"><label for="n-cuenta-bancaria">Cuenta bancaria</label><select id="n-cuenta-bancaria"></select></div>
        <div class="form-field"><label for="n-tipo-documento">Tipo de documento bancario</label><select id="n-tipo-documento"></select></div>
        <div class="form-field"><label for="n-monto">Monto</label><input type="number" id="n-monto" class="mono" value="0.00" step="0.01"></div>

<div class="form-field" id="campo-tipo-cambio" style="display:none;">
          <label for="n-tipo-cambio">Tipo de cambio (a colones)</label><input type="number" id="n-tipo-cambio" class="mono" value="1" step="0.0001">
        </div>
        <div class="form-field"><label for="n-comprobante">Comprobante</label><input type="text" id="n-comprobante"></div>
        <div class="form-field"><label for="n-beneficiario">Beneficiario</label><input type="text" id="n-beneficiario"></div>
        <div class="form-field full"><label for="n-observaciones">Observaciones</label><input type="text" id="n-observaciones"></div>
      </div>

<div class="seccion-titulo">Movimientos</div>

<div class="linea-banco" id="linea-banco">
        <div>
          <span class="lbl">Cuenta contable (automática, según la cuenta bancaria elegida)</span>
          <span class="cuenta-txt" id="linea-banco-cuenta">—</span>
        </div>
        <div><span class="lbl">Debe</span><div class="val-num mono" id="linea-banco-debe">0.00</div></div>
        <div><span class="lbl">Haber</span><div class="val-num mono" id="linea-banco-haber">0.00</div></div>
      </div>

<div class="lineas-edit-scroll">
        <table class="lineas-edit">
          <thead>
            <tr>
              <th class="grow">Cuenta contable</th><th>Moneda</th>
              <th>Debe US$</th><th>Haber US$</th><th>T.C.</th>
              <th>Debe ₡</th><th>Haber ₡</th><th></th><th></th>
            </tr>
          </thead>
          <tbody id="tbody-lineas-nuevo"></tbody>
          <tfoot>
            <tr>
              <td colspan="2">Totales</td>
              <td class="mono" id="tot-du">0.00</td>
              <td class="mono" id="tot-cu">0.00</td>
              <td></td>
              <td class="mono" id="tot-dl">0.00</td>
              <td class="mono" id="tot-cl">0.00</td>
              <td></td><td></td>
            </tr>
          </tfoot>
        </table>
      </div>
      <button class="btn btn-sm add-linea" id="btn-add-linea">+ Agregar línea</button>

<div id="balance-banner" class="balance-banner balance-bad">Complete la información de la transacción y agregue al menos una línea que cuadre contra la línea bancaria.</div>

<div class="form-actions">
        <button class="btn btn-ghost" id="btn-cancelar-nuevo">Cancelar</button>
        <button class="btn btn-primary" id="btn-registrar" disabled>Registrar</button>
      </div>
    </div>
  </div>

</div>

<div class="modal-overlay" id="ver-overlay">
  <div class="voucher" role="dialog" aria-modal="true">
    <div class="voucher-head">
      <div>
        <h3 id="ver-tipo">—</h3>
        <div class="empresa" id="ver-cuenta">—</div>
      </div>
      <div class="voucher-num">
        <div class="n mono" id="ver-numero">—</div>
        <div class="mono" id="ver-pill"></div>
      </div>
    </div>
    <div id="ver-anulado-banner"></div>
    <div class="meta-grid">
      <div class="field-ro"><label>Fecha</label><div class="val mono" id="ver-fecha">—</div></div>
      <div class="field-ro"><label>Asiento</label><div class="val mono" id="ver-asiento">—</div></div>
      <div class="field-ro"><label>Comprobante</label><div class="val" id="ver-comprobante">—</div></div>
      <div class="field-ro"><label>Beneficiario</label><div class="val" id="ver-beneficiario">—</div></div>
      <div class="field-ro"><label>Conciliación</label><div class="val" id="ver-conciliacion">—</div></div>
      <div class="field-ro" style="grid-column:1/-1;"><label>Observaciones</label><div class="val" id="ver-observaciones">—</div></div>
    </div>
    <table class="lineas-ver">
      <thead><tr><th>Cuenta contable</th><th>Debe</th><th>Haber</th></tr></thead>
      <tbody id="ver-lineas"></tbody>
    </table>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="ver-cerrar">Cerrar</button>
      <button class="btn btn-danger" id="ver-anular" style="display:none;">Anular</button>
      <button class="btn btn-primary" id="ver-aplicar" style="display:none;">Aplicar</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <input type="text" class="modal-input" id="modal-input" style="display:none;">
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador'; // no hay sesión/login todavía -- placeholder de trazabilidad

// ---------------- Datos de apoyo ----------------
  let CUENTAS_BANCARIAS = [], TIPOS_DOCUMENTO = [];
  let CUENTAS_TODAS = [], CUENTAS = [], CUENTAS_POR_CODIGO = {};

async function cargarApoyo(){
    const [cb, td, cuentas] = await Promise.all([
      llamarApi('/bancos/cuentas-bancarias?activa=true'),
      llamarApi('/bancos/tipos-documento?activa=true'),
      llamarApi('/cuentas'),
    ]);
    CUENTAS_BANCARIAS = cb;
    TIPOS_DOCUMENTO = td;
    CUENTAS_TODAS = cuentas.map(c=>({codigo:c.codigo, nombre:c.nombre, acepta:c.acepta_movimientos}));
    CUENTAS = CUENTAS_TODAS.filter(c=>c.acepta);
    CUENTAS_POR_CODIGO = Object.fromEntries(CUENTAS_TODAS.map(c=>[c.codigo,c]));

const optTD = td.map(t=>`<option value="${t.id}">${t.nombre}</option>`).join('');
    document.getElementById('f-tipo-documento').innerHTML = '<option value="">Todos</option>' + optTD;
    document.getElementById('n-tipo-documento').innerHTML = optTD;
  }

// ---------------- Línea bancaria automática (no editable) ----------------
  let lineaBanco = {dl:0, cl:0, du:0, cu:0};
  function recalcularLineaBancaria(){
    const cb = CUENTAS_BANCARIAS.find(c => c.id === Number(document.getElementById('n-cuenta-bancaria').value));
    const td = TIPOS_DOCUMENTO.find(t => t.id === Number(document.getElementById('n-tipo-documento').value));
    const monto = num(document.getElementById('n-monto').value);
    const tipoCambio = num(document.getElementById('n-tipo-cambio').value) || 1;

document.getElementById('campo-tipo-cambio').style.display = (cb && cb.moneda === 'USD') ? '' : 'none';

if (!cb || !td){
      document.getElementById('linea-banco-cuenta').textContent = '—';
      document.getElementById('linea-banco-debe').textContent = fmt(0);
      document.getElementById('linea-banco-haber').textContent = fmt(0);
      lineaBanco = {dl:0, cl:0, du:0, cu:0};
      recalcularTotales();
      return;
    }

const esUsd = cb.moneda === 'USD';
    const montoLocal = esUsd ? monto * tipoCambio : monto;
    const montoExtranjero = esUsd ? monto : 0;
    const aumenta = td.direccion_saldo === 'Aumenta';

lineaBanco = {
      dl: aumenta ? montoLocal : 0, cl: aumenta ? 0 : montoLocal,
      du: aumenta ? montoExtranjero : 0, cu: aumenta ? 0 : montoExtranjero,
    };

document.getElementById('linea-banco-cuenta').textContent = `${cb.cuenta_contable_codigo} — ${cb.cuenta_contable_nombre}`;
    document.getElementById('linea-banco-debe').textContent = fmt(lineaBanco.dl);
    document.getElementById('linea-banco-haber').textContent = fmt(lineaBanco.cl);
    recalcularTotales();
  }

function recalcularTotales(){
    let du = lineaBanco.du, cu = lineaBanco.cu, dl = lineaBanco.dl, cl = lineaBanco.cl;
    document.querySelectorAll('#tbody-lineas-nuevo tr').forEach(tr=>{
      du += num(tr.querySelector('.in-du').value);
      cu += num(tr.querySelector('.in-cu').value);
      dl += num(tr.querySelector('.in-dl').value);
      cl += num(tr.querySelector('.in-cl').value);
    });
    document.getElementById('tot-du').textContent = fmt(du);
    document.getElementById('tot-cu').textContent = fmt(cu);
    document.getElementById('tot-dl').textContent = fmt(dl);
    document.getElementById('tot-cl').textContent = fmt(cl);

const cuadraLocal = Math.abs(dl-cl) < 0.005;
    const cuadraUsd = (du === 0 || cu === 0) ? true : Math.abs(du-cu) < 0.005;
    const hayMovimiento = (dl+cl) > 0;
    const cuentaBancariaElegida = document.getElementById('n-cuenta-bancaria').value;
    const tipoDocElegido = document.getElementById('n-tipo-documento').value;
    const banner = document.getElementById('balance-banner');
    const btnRegistrar = document.getElementById('btn-registrar');

if (!cuentaBancariaElegida || !tipoDocElegido || num(document.getElementById('n-monto').value) <= 0){
      banner.className = 'balance-banner balance-bad';
      banner.textContent = 'Elija la cuenta bancaria, el tipo de documento y un monto mayor a cero.';
      btnRegistrar.disabled = true;
    } else if (hayMovimiento && cuadraLocal && cuadraUsd){
      banner.className = 'balance-banner balance-ok';
      banner.textContent = '✓ La transacción cuadra en colones.';
      btnRegistrar.disabled = false;
    } else {
      banner.className = 'balance-banner balance-bad';
      banner.textContent = `Todavía no cuadra — colones: Debe ${fmt(dl)} / Haber ${fmt(cl)}. Agregue o ajuste las líneas hasta que coincidan con la línea bancaria.`;
      btnRegistrar.disabled = true;
    }
  }

['n-cuenta-bancaria','n-tipo-documento','n-monto','n-tipo-cambio'].forEach(id=>{
    document.getElementById(id).addEventListener('input', recalcularLineaBancaria);
    document.getElementById(id).addEventListener('change', recalcularLineaBancaria);
  });

function abrirFormularioNuevo(){
    document.getElementById('n-fecha').value = hoyISO();
    document.getElementById('n-cuenta-bancaria').selectedIndex = -1;
    document.getElementById('n-tipo-documento').selectedIndex = -1;
    document.getElementById('n-monto').value = '0.00';
    document.getElementById('n-tipo-cambio').value = '1';
    document.getElementById('n-comprobante').value = '';
    document.getElementById('n-beneficiario').value = '';
    document.getElementById('n-observaciones').value = '';
    const tbody = document.getElementById('tbody-lineas-nuevo');
    tbody.innerHTML = '';
    tbody.appendChild(filaLineaNueva());
    recalcularLineaBancaria();
    document.getElementById('crumbs').innerHTML = '<b>Bancos</b> / Transacciones bancarias / Registrar';
    mostrarVista('view-nuevo');
    setTimeout(()=> document.getElementById('n-fecha').focus(), 30);
  }

function mostrarVista(id){
    document.querySelectorAll('.view').forEach(v=>v.classList.remove('active'));
    document.getElementById(id).classList.add('active');
  }

document.getElementById('btn-nuevo').addEventListener('click', abrirFormularioNuevo);
  document.getElementById('btn-cancelar-nuevo').addEventListener('click', ()=>{
    document.getElementById('crumbs').innerHTML = '<b>Bancos</b> / Transacciones bancarias';
    mostrarVista('view-lista');
  });
  document.getElementById('btn-add-linea').addEventListener('click', ()=>{
    document.getElementById('tbody-lineas-nuevo').appendChild(filaLineaNueva());
  });

document.getElementById('btn-registrar').addEventListener('click', async ()=>{
    const lineas = [...document.querySelectorAll('#tbody-lineas-nuevo tr')].map(tr=>{
      const codigo = tr.querySelector('.cuenta-codigo-oculto').value;
      const moneda = tr.dataset.moneda || 'CRC';
      return {
        cuenta_codigo: codigo, moneda,
        debito_local: num(tr.querySelector('.in-dl').value), credito_local: num(tr.querySelector('.in-cl').value),
        debito_extranjero: num(tr.querySelector('.in-du').value), credito_extranjero: num(tr.querySelector('.in-cu').value),
        tipo_cambio: num(tr.querySelector('.in-tc').value) || 1,
        observaciones: tr.querySelector('.in-obs').value.trim() || null,
      };
    }).filter(l => l.cuenta_codigo);

if (lineas.length === 0){ await modalAlert('Agregue al menos una línea con una cuenta contable elegida.'); return; }
    const comprobante = document.getElementById('n-comprobante').value.trim();
    if (!comprobante){ await modalAlert('El comprobante es obligatorio.'); document.getElementById('n-comprobante').focus(); return; }
    const beneficiario = document.getElementById('n-beneficiario').value.trim();
    if (!beneficiario){ await modalAlert('El beneficiario es obligatorio.'); document.getElementById('n-beneficiario').focus(); return; }

const cuerpo = {
      fecha: document.getElementById('n-fecha').value,
      cuenta_bancaria_id: Number(document.getElementById('n-cuenta-bancaria').value),
      tipo_documento_bancario_id: Number(document.getElementById('n-tipo-documento').value),
      comprobante, beneficiario,
      observaciones: document.getElementById('n-observaciones').value.trim() || null,
      monto: num(document.getElementById('n-monto').value),
      tipo_cambio: num(document.getElementById('n-tipo-cambio').value) || 1,
      lineas, creado_por: USUARIO_ACTUAL,
    };

function pill(estado){
    if (estado === 'Aplicado') return `<span class="pill pill-aplicado">Aplicada</span>`;
    if (estado === 'Anulado') return `<span class="pill pill-anulado">Anulada</span>`;
    return `<span class="pill pill-pendiente">Registrada</span>`;
  }

// El estado de conciliación solo tiene sentido para movimientos Aplicados -- un
  // Registrado o Anulado nunca entra al motor de conciliación (Capítulo 6.2).
  function pillConciliacion(r){
    if (r.estado !== 'Aplicado') return `<span class="mono" style="color:var(--ink-muted);">—</span>`;
    const pendiente = r.por_conciliar !== null && r.por_conciliar !== undefined && Math.abs(r.por_conciliar) >= 0.01;
    if (pendiente) return `<span class="pill pill-porconciliar" title="Diferencia: ${fmt(r.por_conciliar)}">Pendiente</span>`;
    return `<span class="pill pill-conciliado">Conciliado</span>`;
  }

function filaHtml(r){
    return `
      <tr data-id="${r.id}">
        <td>${rowActions(r)}</td>
        <td class="numero mono">${r.numero}</td>
        <td class="mono">${r.asiento_numero}</td>
        <td>${pill(r.estado)}</td>
        <td class="mono">${r.fecha}</td>
        <td>${r.tipo_documento_bancario_nombre}</td>
        <td>${r.banco_nombre} — ${r.cuenta_bancaria_numero}</td>
        <td class="num mono">${fmt(r.monto)} ${r.moneda}</td>
        <td class="mono">${r.comprobante}</td>
        <td>${r.beneficiario}</td>
        <td class="obs-cell" title="${(r.observaciones||'').replace(/"/g,'&quot;')}">${r.observaciones || '—'}</td>
        <td>${pillConciliacion(r)}</td>
      </tr>
    `;
  }

function construirQuery(){
    const params = new URLSearchParams();
    const numero = document.getElementById('f-numero').value.trim();
    const fDesde = document.getElementById('f-fecha-desde').value;
    const fHasta = document.getElementById('f-fecha-hasta').value;
    const cb = document.getElementById('f-cuenta-bancaria').value;
    const td = document.getElementById('f-tipo-documento').value;
    const estado = document.getElementById('f-estado').value;
    const comprobante = document.getElementById('f-comprobante').value.trim();
    const beneficiario = document.getElementById('f-beneficiario').value.trim();
    if (numero) params.set('numero', numero);
    if (fDesde) params.set('fecha_desde', fDesde);
    if (fHasta) params.set('fecha_hasta', fHasta);
    if (cb) params.set('cuenta_bancaria_id', cb);
    if (td) params.set('tipo_documento_bancario_id', td);
    if (estado) params.set('estado', estado);
    if (comprobante) params.set('comprobante', comprobante);
    if (beneficiario) params.set('beneficiario', beneficiario);
    return params.toString();
  }

async function cargar(){
    tbody.innerHTML = `<tr><td colspan="12" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    emptyState.style.display = 'none';
    try{
      let filas = await llamarApi(`/bancos/movimientos?${construirQuery()}`);
      const mDesde = parseFloat(document.getElementById('f-monto-desde').value);
      const mHasta = parseFloat(document.getElementById('f-monto-hasta').value);
      if (!isNaN(mDesde)) filas = filas.filter(f=> f.monto >= mDesde);
      if (!isNaN(mHasta)) filas = filas.filter(f=> f.monto <= mHasta);
      REGISTROS = filas;
      if (REGISTROS.length === 0){
        tbody.innerHTML = '';
        emptyState.style.display = 'block';
      } else {
        tbody.innerHTML = REGISTROS.map(filaHtml).join('');
      }
      footNote.textContent = REGISTROS.length === 1
        ? '1 transacción bancaria'
        : `${REGISTROS.length} transacciones bancarias`;
    }catch(e){
      tbody.innerHTML = `<tr><td colspan="12" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      footNote.textContent = '';
    }
  }

// ---------------- Modal Ver ----------------
  const verOverlay = document.getElementById('ver-overlay');
  let verActual = null;

async function abrirVer(id){
    let mov;
    try{
      mov = await llamarApi(`/bancos/movimientos/${id}`);
    }catch(e){
      await modalAlert(e.message, 'No se pudo cargar la transacción');
      return;
    }
    verActual = mov;
    document.getElementById('ver-tipo').textContent = mov.tipo_documento_bancario_nombre;
    document.getElementById('ver-cuenta').textContent = `${mov.banco_nombre} — CTA ${mov.cuenta_bancaria_numero}`;
    document.getElementById('ver-numero').textContent = mov.numero;
    document.getElementById('ver-pill').innerHTML = pill(mov.estado);
    document.getElementById('ver-fecha').textContent = mov.fecha;
    document.getElementById('ver-asiento').textContent = mov.asiento_numero;
    document.getElementById('ver-comprobante').textContent = mov.comprobante;
    document.getElementById('ver-conciliacion').innerHTML = pillConciliacion(mov);
    document.getElementById('ver-beneficiario').textContent = mov.beneficiario;
    document.getElementById('ver-observaciones').textContent = mov.observaciones || '—';
    document.getElementById('ver-lineas').innerHTML = mov.lineas.map(l=>`
      <tr><td>${l.cuenta_codigo} — ${l.cuenta_nombre}</td>
      <td class="mono">${l.debito_local > 0 ? fmt(l.debito_local) : ''}</td>
      <td class="mono">${l.credito_local > 0 ? fmt(l.credito_local) : ''}</td></tr>
    `).join('');

document.getElementById('ver-anulado-banner').innerHTML = mov.estado === 'Anulado'
      ? `<div class="anulado-banner"><b>Transacción anulada</b>Consulte el asiento contable para el motivo y quién la anuló.</div>` : '';

document.getElementById('ver-aplicar').style.display = mov.estado === 'Pendiente' ? '' : 'none';
    document.getElementById('ver-anular').style.display = mov.estado !== 'Anulado' ? '' : 'none';

verOverlay.classList.add('abierto');
  }
  document.getElementById('ver-cerrar').addEventListener('click', ()=> verOverlay.classList.remove('abierto'));

// El comprobante lo escribe el usuario a mano -- si el sistema detecta que ya existe
  // en esta cuenta con fecha/monto distintos, NO se resuelve solo (lo más probable es un
  // error de digitación, no una coincidencia real del banco). Se le pregunta al usuario;
  // solo si confirma explícitamente, se reintenta con confirma_repeticion=true y el
  // backend le antepone la letra. El backend distingue este caso con la frase "confirme
  // para continuar" en el mensaje -- acoplamiento simple a propósito, no hay todavía un
  // tipo de error estructurado en esta API.
  async function aplicarMovimiento(id){
    try{
      await llamarApi(`/bancos/movimientos/${id}/aplicar`, {
        method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({aplicado_por: USUARIO_ACTUAL}),
      });
      return true;
    }catch(e){
      if (e.message.includes('confirme para continuar')){
        const ok = await modalConfirm(e.message, 'Comprobante repetido -- confirmar', 'primary', 'Sí, es correcto');
        if (!ok) return false;
        try{
          await llamarApi(`/bancos/movimientos/${id}/aplicar`, {
            method:'POST', headers:{'Content-Type':'application/json'},
            body: JSON.stringify({aplicado_por: USUARIO_ACTUAL, confirma_repeticion: true}),
          });
          return true;
        }catch(e2){
          await modalAlert(e2.message, 'No se pudo aplicar');
          return false;
        }
      }
      await modalAlert(e.message, 'No se pudo aplicar');
      return false;
    }
  }

document.getElementById('ver-aplicar').addEventListener('click', async ()=>{
    const ok = await aplicarMovimiento(verActual.id);
    if (ok){
      verOverlay.classList.remove('abierto');
      await cargar();
    }
  });

tbody.addEventListener('click', async (ev)=>{
    const btn = ev.target.closest('button[data-accion]');
    if (!btn) return;
    const id = Number(btn.dataset.id);
    const accion = btn.dataset.accion;
    if (accion === 'ver') { await abrirVer(id); return; }
    if (accion === 'aplicar'){
      const ok = await aplicarMovimiento(id);
      if (ok) await cargar();
    }
    if (accion === 'anular'){
      const motivo = await modalPrompt('Se guarda como motivo de anulación del asiento contable — obligatorio.', '', 'Anular transacción bancaria');
      if (motivo === null) return;
      if (!motivo.trim()){ await modalAlert('El motivo de anulación es obligatorio.'); return; }
      try{
        await llamarApi(`/bancos/movimientos/${id}/anular`, {
          method:'POST', headers:{'Content-Type':'application/json'},
          body: JSON.stringify({anulado_por: USUARIO_ACTUAL, motivo_anulacion: motivo.trim()}),
        });
        await cargar();
      }catch(e){ await modalAlert(e.message, 'No se pudo anular'); }
    }
  });

['f-numero','f-comprobante','f-beneficiario','f-monto-desde','f-monto-hasta'].forEach(id=>{
    document.getElementById(id).addEventListener('input', ()=>{
      clearTimeout(window.__debounceMB);
      window.__debounceMB = setTimeout(cargar, 350);
    });
  });
  ['f-fecha-desde','f-fecha-hasta','f-cuenta-bancaria','f-tipo-documento','f-estado'].forEach(id=>{
    document.getElementById(id).addEventListener('change', cargar);
  });

document.getElementById('btn-exportar').addEventListener('click', async ()=>{
    const btn = document.getElementById('btn-exportar');
    btn.disabled = true;
    document.getElementById('icono-exportar').outerHTML = ICONO_PROCESANDO.replace('<svg ', '<svg id="icono-exportar" ');
    document.getElementById('texto-exportar').textContent = 'Generando…';

try{
      const resp = await fetch(`${API_BASE}/bancos/movimientos/excel?${construirQuery()}`);
      if (!resp.ok){
        let detalle = `El servidor respondió ${resp.status}`;
        try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
        throw new Error(detalle);
      }
      const disposicion = resp.headers.get('Content-Disposition') || '';
      const match = disposicion.match(/filename="?([^"]+)"?/);
      const nombreArchivo = match ? match[1] : 'transacciones_bancarias.xlsx';
      const blob = await resp.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = nombreArchivo;
      document.body.appendChild(a); a.click(); document.body.removeChild(a);
      URL.revokeObjectURL(url);

(async function iniciar(){
    try{
      await cargarApoyo();
    }catch(e){
      await modalAlert(e.message, 'No se pudieron cargar los datos de apoyo (cuentas bancarias, tipos de documento, plan de cuentas)');
    }
    document.getElementById('f-numero').focus();
    await cargar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Libro Banco</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{
    font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
    font-variant-numeric:tabular-nums;
  }
  h1,h2,h3{
    font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;
    font-weight:600; text-wrap:balance; margin:0;
  }
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1080px; margin:0 auto; padding:28px 24px 64px;}

.saldo-cards{display:flex; gap:14px; margin-bottom:18px; flex-wrap:wrap;}
  .saldo-card{
    flex:1; min-width:220px; background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:14px 18px; box-shadow:var(--shadow);
  }
  .saldo-card .lbl{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin-bottom:4px;}
  .saldo-card .val{font-size:20px; font-weight:700;}
  .saldo-card .val.neg{color:var(--red-ink);}
  .saldo-card .sub{font-size:11.5px; color:var(--ink-muted); margin-top:3px;}
  .saldo-card.diff .val{color:var(--accent);}
  .saldo-card.diff .val.hay-diferencia{color:var(--red-ink);}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:220px;}
  .field.fecha input{width:140px;}
  .range{display:flex; align-items:end; gap:7px;}
  .range .dash{color:var(--ink-muted); padding-bottom:8px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.5; cursor:not-allowed;}
  .btn svg{width:15px; height:15px;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

/* ---------- modal Importar ---------- */
  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  /* #modal-overlay (aviso/confirmacion) comparte la clase .modal-overlay con otro overlay de
     esta pantalla, mismo z-index -- si #modal-overlay aparece antes en el DOM, al abrirse los
     dos a la vez (ej. un error de guardado mientras un formulario sigue abierto) el otro overlay
     pintaba encima y el aviso quedaba oculto/inaccesible detras. Bug real reportado: "el
     Entendido no se ve". Un z-index propio, mas alto, garantiza que el aviso siempre gane sin
     importar el orden del DOM. */
  #modal-overlay{ z-index:400; }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:460px; width:100%;
  }
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field select, .form-field input[type="file"]{
    width:100%; background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px;
  }
  .resultado-import{
    background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
    padding:12px 14px; font-size:13px; margin-bottom:16px; display:none;
  }
  .resultado-import.visible{display:block;}
  .resultado-import .fila{display:flex; justify-content:space-between; padding:3px 0;}
  .resultado-import .fila b{font-weight:700;}
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Libro Banco</span>
    </div>
    <div class="crumbs"><b>Bancos</b> / Libro Banco</div>
  </div>

<div class="saldo-cards" id="saldo-cards" style="display:none;">
    <div class="saldo-card">
      <div class="lbl">Saldo según Libro Banco (hoy)</div>
      <div class="val mono" id="saldo-banco-val">—</div>
      <div class="sub" id="saldo-banco-fecha"></div>
    </div>
    <div class="saldo-card">
      <div class="lbl">Saldo según Auxiliar contable (hoy)</div>
      <div class="val mono" id="saldo-auxiliar-val">—</div>
    </div>
    <div class="saldo-card diff">
      <div class="lbl">Diferencia</div>
      <div class="val mono" id="saldo-diff-val">—</div>
    </div>
  </div>

<div class="filters">
    <div class="field"><label for="f-cuenta-bancaria">Cuenta bancaria</label><select id="f-cuenta-bancaria"><option value="">Todas</option></select></div>
    <div class="field">
      <label>Fecha</label>
      <div class="range">
        <div class="field fecha"><input type="date" id="f-fecha-desde" class="mono"></div>
        <span class="dash">–</span>
        <div class="field fecha"><input type="date" id="f-fecha-hasta" class="mono"></div>
      </div>
    </div>
    <div class="field"><label for="f-comprobante">Comprobante</label><input type="text" id="f-comprobante" autocomplete="off"></div>
    <div class="spacer"></div>
    <button class="btn btn-ghost" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-ghost" id="btn-exportar">
      <svg id="icono-exportar" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
      <span id="texto-exportar">Exportar a Excel</span>
    </button>
    <button class="btn btn-primary" id="btn-importar">⬆ Importar CSV</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Fecha</th><th>Comprobante</th><th>Descripción</th><th class="num">Monto</th><th>Dirección</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay movimientos de Libro Banco con estos filtros</b>
      Elige una cuenta bancaria e importa su primer CSV con "Importar CSV".
    </div>
  </div>
  <div class="foot-note" id="foot-note">Elige una cuenta bancaria para ver sus movimientos.</div>

</div>

<div class="modal-overlay" id="importar-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo">Importar CSV del banco</h3>
    <p class="modal-mensaje">Se puede reimportar un rango de fechas que ya se importó antes sin duplicar nada — cada movimiento se identifica por su propia cuenta, comprobante, fecha y monto.</p>
    <div class="form-field">
      <label for="imp-cuenta-bancaria">Cuenta bancaria</label>
      <select id="imp-cuenta-bancaria"></select>
    </div>
    <div class="form-field">
      <label for="imp-archivo">Archivo CSV</label>
      <input type="file" id="imp-archivo" accept=".csv">
    </div>
    <div class="resultado-import" id="resultado-import">
      <div class="fila"><span>Filas procesadas</span><b id="res-total">—</b></div>
      <div class="fila"><span>Importados</span><b id="res-importados">—</b></div>
      <div class="fila"><span>Ya existían (omitidos)</span><b id="res-omitidos">—</b></div>
      <div class="fila"><span>Repeticiones del banco detectadas</span><b id="res-repeticiones">—</b></div>
    </div>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="importar-cerrar">Cerrar</button>
      <button class="btn btn-primary" id="importar-confirmar">Importar</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-primary" id="modal-aceptar">Entendido</button>
    </div>
  </div>
</div>

// ---------------- Modal alert ----------------
  const modalOverlay = document.getElementById('modal-overlay');
  const modalTitulo = document.getElementById('modal-titulo');
  const modalMensaje = document.getElementById('modal-mensaje');
  const modalAceptar = document.getElementById('modal-aceptar');
  function modalAlert(mensaje, titulo='Aviso'){
    return new Promise(resolve=>{
      modalTitulo.textContent = titulo;
      modalMensaje.textContent = mensaje;
      function cerrar(){ modalOverlay.classList.remove('abierto'); modalAceptar.onclick = null; resolve(); }
      modalAceptar.onclick = cerrar;
      modalOverlay.classList.add('abierto');
      setTimeout(()=> modalAceptar.focus(), 30);
    });
  }

// ---------------- Cuentas bancarias (para los selects) ----------------
  let CUENTAS_BANCARIAS = [];
  async function cargarCuentasBancarias(){
    CUENTAS_BANCARIAS = await llamarApi('/bancos/cuentas-bancarias?activa=true');
    const opciones = CUENTAS_BANCARIAS.map(c=>`<option value="${c.id}">${c.banco_nombre} — CTA ${c.numero} (${c.moneda})</option>`).join('');
    document.getElementById('f-cuenta-bancaria').innerHTML = '<option value="">Todas</option>' + opciones;
    document.getElementById('imp-cuenta-bancaria').innerHTML = opciones;
  }

function actualizarSaldos(){
    const id = Number(document.getElementById('f-cuenta-bancaria').value);
    const cards = document.getElementById('saldo-cards');
    if (!id){ cards.style.display = 'none'; return; }
    const cuenta = CUENTAS_BANCARIAS.find(c=>c.id === id);
    if (!cuenta){ cards.style.display = 'none'; return; }
    cards.style.display = 'flex';

document.getElementById('saldo-auxiliar-val').textContent = `${fmt(cuenta.saldo)} ${cuenta.moneda}`;

function pill(direccion){
    return direccion === 'Aumenta'
      ? `<span class="pill pill-aumenta">Aumenta</span>`
      : `<span class="pill pill-disminuye">Disminuye</span>`;
  }

function filaHtml(r){
    return `
      <tr>
        <td class="mono">${r.fecha}</td>
        <td class="mono">${r.comprobante_visible}</td>
        <td class="desc-cell" title="${(r.descripcion||'').replace(/"/g,'&quot;')}">${r.descripcion || '—'}</td>
        <td class="num mono">${fmt(r.monto)}</td>
        <td>${pill(r.direccion)}</td>
      </tr>
    `;
  }

function construirQuery(){
    const params = new URLSearchParams();
    const cb = document.getElementById('f-cuenta-bancaria').value;
    const fDesde = document.getElementById('f-fecha-desde').value;
    const fHasta = document.getElementById('f-fecha-hasta').value;
    const comprobante = document.getElementById('f-comprobante').value.trim();
    if (cb) params.set('cuenta_bancaria_id', cb);
    if (fDesde) params.set('fecha_desde', fDesde);
    if (fHasta) params.set('fecha_hasta', fHasta);
    if (comprobante) params.set('comprobante', comprobante);
    return params.toString();
  }

async function cargar(){
    tbody.innerHTML = `<tr><td colspan="5" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    emptyState.style.display = 'none';
    try{
      REGISTROS = await llamarApi(`/bancos/libro-banco?${construirQuery()}`);
      if (REGISTROS.length === 0){
        tbody.innerHTML = '';
        emptyState.style.display = 'block';
      } else {
        tbody.innerHTML = REGISTROS.map(filaHtml).join('');
      }
      footNote.textContent = `${REGISTROS.length} movimiento${REGISTROS.length === 1 ? '' : 's'} de Libro Banco`;
    }catch(e){
      tbody.innerHTML = `<tr><td colspan="5" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      footNote.textContent = '';
    }
  }

document.getElementById('f-cuenta-bancaria').addEventListener('change', ()=>{ actualizarSaldos(); cargar(); });
  ['f-fecha-desde','f-fecha-hasta'].forEach(id=> document.getElementById(id).addEventListener('change', cargar));
  document.getElementById('f-comprobante').addEventListener('input', ()=>{
    clearTimeout(window.__debounceLB);
    window.__debounceLB = setTimeout(cargar, 350);
  });

document.getElementById('btn-refrescar').addEventListener('click', async (ev)=>{
    const icono = ev.currentTarget.querySelector('svg');
    icono.classList.add('girando');
    await cargarCuentasBancarias();
    actualizarSaldos();
    await cargar();
    icono.classList.remove('girando');
  });

try{
      const resp = await fetch(`${API_BASE}/bancos/libro-banco/excel?${construirQuery()}`);
      if (!resp.ok){
        let detalle = `El servidor respondió ${resp.status}`;
        try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
        throw new Error(detalle);
      }
      const disposicion = resp.headers.get('Content-Disposition') || '';
      const match = disposicion.match(/filename="?([^"]+)"?/);
      const nombreArchivo = match ? match[1] : 'libro_banco.xlsx';
      const blob = await resp.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = nombreArchivo;
      document.body.appendChild(a); a.click(); document.body.removeChild(a);
      URL.revokeObjectURL(url);

// ---------------- Modal Importar ----------------
  const importarOverlay = document.getElementById('importar-overlay');
  const resultadoBox = document.getElementById('resultado-import');
  const btnConfirmar = document.getElementById('importar-confirmar');

document.getElementById('btn-importar').addEventListener('click', ()=>{
    resultadoBox.classList.remove('visible');
    document.getElementById('imp-archivo').value = '';
    const cbSeleccionada = document.getElementById('f-cuenta-bancaria').value;
    if (cbSeleccionada) document.getElementById('imp-cuenta-bancaria').value = cbSeleccionada;
    importarOverlay.classList.add('abierto');
  });
  document.getElementById('importar-cerrar').addEventListener('click', ()=> importarOverlay.classList.remove('abierto'));

btnConfirmar.addEventListener('click', async ()=>{
    const cuentaBancariaId = document.getElementById('imp-cuenta-bancaria').value;
    const archivoInput = document.getElementById('imp-archivo');
    if (!cuentaBancariaId){ await modalAlert('Elija la cuenta bancaria del archivo.'); return; }
    if (!archivoInput.files[0]){ await modalAlert('Elija el archivo CSV a importar.'); return; }

const formData = new FormData();
    formData.append('cuenta_bancaria_id', cuentaBancariaId);
    formData.append('importado_por', USUARIO_ACTUAL);
    formData.append('archivo', archivoInput.files[0]);

btnConfirmar.disabled = true;
    btnConfirmar.textContent = 'Importando…';
    try{
      const resp = await fetch(`${API_BASE}/bancos/libro-banco/importar`, {method:'POST', body: formData});
      if (!resp.ok){
        let detalle = `El servidor respondió ${resp.status}`;
        try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
        throw new Error(detalle);
      }
      const resultado = await resp.json();
      document.getElementById('res-total').textContent = resultado.total_filas;
      document.getElementById('res-importados').textContent = resultado.importados;
      document.getElementById('res-omitidos').textContent = resultado.omitidos_duplicados;
      document.getElementById('res-repeticiones').textContent = resultado.repeticiones_detectadas;
      resultadoBox.classList.add('visible');

document.getElementById('f-cuenta-bancaria').value = cuentaBancariaId;
      await cargarCuentasBancarias();
      document.getElementById('f-cuenta-bancaria').value = cuentaBancariaId;
      actualizarSaldos();
      await cargar();
    }catch(e){
      await modalAlert(e.message, 'No se pudo importar');
    }finally{
      btnConfirmar.disabled = false;
      btnConfirmar.textContent = 'Importar';
    }
  });

(async function iniciar(){
    try{
      await cargarCuentasBancarias();
    }catch(e){
      await modalAlert(e.message, 'No se pudieron cargar las cuentas bancarias');
    }
    await cargar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Libro Auxiliar</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{
    font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
    font-variant-numeric:tabular-nums;
  }
  h1,h2,h3{
    font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;
    font-weight:600; text-wrap:balance; margin:0;
  }
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1160px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:220px;}
  .field.fecha input{width:140px;}
  .field.numero input{width:110px;}
  .range{display:flex; align-items:end; gap:7px;}
  .range .dash{color:var(--ink-muted); padding-bottom:8px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.5; cursor:not-allowed;}
  .btn svg{width:15px; height:15px;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.table-wrap{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow);
  }
  table{border-collapse:collapse; width:100%; min-width:960px;}
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--ink-muted); font-weight:600; padding:11px 14px;
    border-bottom:1px solid var(--line-strong); background:var(--surface-2);
    position:sticky; top:0;
  }
  th.num, td.num{text-align:right;}
  tbody td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--surface-2);}
  tr.fila-inicial td{background:var(--surface-2); font-weight:700;}
  .desc-cell{color:var(--ink-muted); max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .tag-origen{
    font-size:11px; color:var(--ink-muted); border:1px solid var(--line-strong);
    border-radius:6px; padding:2px 7px; white-space:nowrap;
  }
  .num-asiento{color:var(--ink-muted);}

/* ---------- modal propio (alert) ---------- */
  .modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:460px; width:100%;
  }
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Libro Auxiliar</span>
    </div>
    <div class="crumbs"><b>Bancos</b> / Libro Auxiliar</div>
  </div>

<div class="filters">
    <div class="field"><label for="f-cuenta-bancaria">Cuenta bancaria</label><select id="f-cuenta-bancaria"><option value="">Seleccione…</option></select></div>
    <div class="field">
      <label>Fecha</label>
      <div class="range">
        <div class="field fecha"><input type="date" id="f-fecha-desde" class="mono"></div>
        <span class="dash">–</span>
        <div class="field fecha"><input type="date" id="f-fecha-hasta" class="mono"></div>
      </div>
    </div>
    <div class="field numero"><label for="f-numero">N.º asiento</label><input type="text" id="f-numero" class="mono" autocomplete="off" inputmode="numeric"></div>
    <div class="spacer"></div>
    <button class="btn btn-ghost" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-ghost" id="btn-exportar">
      <svg id="icono-exportar" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
      <span id="texto-exportar">Exportar a Excel</span>
    </button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Fecha</th><th>Asiento</th><th>Origen</th><th>Descripción</th>
          <th class="num">Monto</th><th>Dirección</th><th class="num">Saldo acumulado</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>Elija una cuenta bancaria</b>
      El Libro Auxiliar muestra los asientos aplicados contra la cuenta contable de esa cuenta bancaria — el mismo lado que se compara contra Libro Banco.
    </div>
  </div>
  <div class="foot-note" id="foot-note">Elige una cuenta bancaria para ver su auxiliar contable.</div>

</div>

// ---------------- Cuentas bancarias (mismo endpoint y tarjetas que Libro Banco --
  // así los dos saldos quedan uno al lado del otro para comparar) ----------------
  let CUENTAS_BANCARIAS = [];
  async function cargarCuentasBancarias(){
    CUENTAS_BANCARIAS = await llamarApi('/bancos/cuentas-bancarias?activa=true');
    const opciones = CUENTAS_BANCARIAS.map(c=>`<option value="${c.id}">${c.banco_nombre} — CTA ${c.numero} (${c.moneda})</option>`).join('');
    document.getElementById('f-cuenta-bancaria').innerHTML = '<option value="">Seleccione…</option>' + opciones;
  }

document.getElementById('saldo-auxiliar-val').textContent = `${fmt(cuenta.saldo)} ${cuenta.moneda}`;

function pill(direccion){
    if (!direccion) return '';
    return direccion === 'Aumenta'
      ? `<span class="pill pill-aumenta">Aumenta</span>`
      : `<span class="pill pill-disminuye">Disminuye</span>`;
  }

function descripcion(r){
    let texto = r.glosa || '';
    if (r.observaciones_linea) texto += (texto ? ' — ' : '') + r.observaciones_linea;
    return texto;
  }

function construirQuery(){
    const params = new URLSearchParams();
    const cb = document.getElementById('f-cuenta-bancaria').value;
    const fDesde = document.getElementById('f-fecha-desde').value;
    const fHasta = document.getElementById('f-fecha-hasta').value;
    const numero = document.getElementById('f-numero').value.trim();
    if (cb) params.set('cuenta_bancaria_id', cb);
    if (fDesde) params.set('fecha_desde', fDesde);
    if (fHasta) params.set('fecha_hasta', fHasta);
    if (numero) params.set('numero', numero);
    return params.toString();
  }

async function cargar(){
    const cb = document.getElementById('f-cuenta-bancaria').value;
    if (!cb){
      tbody.innerHTML = '';
      emptyState.style.display = 'block';
      footNote.textContent = 'Elige una cuenta bancaria para ver su auxiliar contable.';
      return;
    }
    tbody.innerHTML = `<tr><td colspan="7" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    emptyState.style.display = 'none';
    try{
      REGISTROS = await llamarApi(`/bancos/libro-auxiliar?${construirQuery()}`);
      tbody.innerHTML = REGISTROS.map(filaHtml).join('');
      const movimientos = REGISTROS.filter(r=>r.asiento_id !== null).length;
      footNote.textContent = `${movimientos} movimiento${movimientos === 1 ? '' : 's'} de Libro Auxiliar`;
    }catch(e){
      tbody.innerHTML = `<tr><td colspan="7" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      footNote.textContent = '';
    }
  }

document.getElementById('f-cuenta-bancaria').addEventListener('change', ()=>{ actualizarSaldos(); cargar(); });
  ['f-fecha-desde','f-fecha-hasta'].forEach(id=> document.getElementById(id).addEventListener('change', cargar));
  document.getElementById('f-numero').addEventListener('input', ()=>{
    clearTimeout(window.__debounceLA);
    window.__debounceLA = setTimeout(cargar, 350);
  });

document.getElementById('btn-refrescar').addEventListener('click', async (ev)=>{
    const icono = ev.currentTarget.querySelector('svg');
    icono.classList.add('girando');
    await cargarCuentasBancarias();
    actualizarSaldos();
    await cargar();
    icono.classList.remove('girando');
  });

document.getElementById('btn-exportar').addEventListener('click', async ()=>{
    const cb = document.getElementById('f-cuenta-bancaria').value;
    if (!cb){ await modalAlert('Elija una cuenta bancaria primero.'); return; }
    const btn = document.getElementById('btn-exportar');
    btn.disabled = true;
    document.getElementById('icono-exportar').outerHTML = ICONO_PROCESANDO.replace('<svg ', '<svg id="icono-exportar" ');
    document.getElementById('texto-exportar').textContent = 'Generando…';

try{
      const resp = await fetch(`${API_BASE}/bancos/libro-auxiliar/excel?${construirQuery()}`);
      if (!resp.ok){
        let detalle = `El servidor respondió ${resp.status}`;
        try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
        throw new Error(detalle);
      }
      const disposicion = resp.headers.get('Content-Disposition') || '';
      const match = disposicion.match(/filename="?([^"]+)"?/);
      const nombreArchivo = match ? match[1] : 'libro_auxiliar.xlsx';
      const blob = await resp.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = nombreArchivo;
      document.body.appendChild(a); a.click(); document.body.removeChild(a);
      URL.revokeObjectURL(url);

(async function iniciar(){
    try{
      await cargarCuentasBancarias();
    }catch(e){
      await modalAlert(e.message, 'No se pudieron cargar las cuentas bancarias');
    }
    emptyState.style.display = 'block';
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Conciliación Bancaria</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{
    font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
    font-variant-numeric:tabular-nums;
  }
  h1,h2,h3{
    font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;
    font-weight:600; text-wrap:balance; margin:0;
  }
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1000px; margin:0 auto; padding:28px 24px 64px;}

.resultado-motor{
    background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
    padding:11px 14px; font-size:13px; margin-bottom:18px; display:none;
  }
  .resultado-motor.visible{display:flex; gap:22px; flex-wrap:wrap;}
  .resultado-motor b{font-weight:700;}

.documento{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    box-shadow:var(--shadow); padding:30px 34px; margin-bottom:20px; display:none;
  }
  .documento.visible{display:block;}
  .documento-titulo{text-align:center; margin-bottom:4px;}
  .documento-titulo h2{font-size:19px; letter-spacing:.08em;}
  .documento-sub{text-align:center; color:var(--ink-muted); font-size:13px; margin-bottom:24px;}
  .documento-sub b{color:var(--ink);}

.lado{margin-bottom:26px;}
  .lado-titulo{
    display:flex; justify-content:space-between; font-weight:700; font-size:14.5px;
    padding-bottom:8px; border-bottom:1px solid var(--line-strong); margin-bottom:10px;
  }
  table.partidas{width:100%; border-collapse:collapse; margin:6px 0 14px;}
  table.partidas th{
    text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-muted); padding:5px 8px; border-bottom:1px solid var(--line);
  }
  table.partidas th.num, table.partidas td.num{text-align:right;}
  table.partidas td{padding:6px 8px; border-bottom:1px solid var(--line); font-size:13px;}
  table.partidas tr:last-child td{border-bottom:none;}
  .partidas-vacio{font-size:12.5px; color:var(--ink-muted); font-style:italic; padding:4px 8px 14px;}
  .subgrupo-lbl{font-size:12px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.05em; margin:10px 0 2px;}

.fila-saldo{display:flex; justify-content:space-between; padding:7px 0; font-size:14px;}
  .fila-saldo.total{font-weight:700; border-top:2px solid var(--ink); padding-top:10px; margin-top:6px; font-size:15px;}
  .fila-saldo .val{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;}
  .fila-saldo .val.neg{color:var(--red-ink);}

.cuadre-banner{
    display:flex; align-items:center; gap:10px; padding:14px 18px; border-radius:8px;
    font-size:14px; font-weight:700; margin:20px 0;
  }
  .cuadre-ok{background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent);}
  .cuadre-bad{background:var(--red-bg); color:var(--red-ink); border:1px solid var(--red-line);}

.firma-linea{display:flex; gap:60px; margin-top:36px; padding-top:20px;}
  .firma-campo{flex:1; border-top:1px solid var(--ink); padding-top:6px; font-size:12px; color:var(--ink-muted);}

.historial{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow);
  }
  table{border-collapse:collapse; width:100%;}
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--ink-muted); font-weight:600; padding:10px 14px;
    border-bottom:1px solid var(--line-strong); background:var(--surface-2);
  }
  th.num, td.num{text-align:right;}
  tbody td{padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
  tbody tr:last-child td{border-bottom:none;}
  .seccion-titulo{font-size:15px; margin:24px 0 12px;}

.modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:440px; width:100%;
  }
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-input{
    width:100%; background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:9px 11px; color:var(--ink); font-size:13.5px; margin-bottom:16px;
  }
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}

@media print{
    @page{ margin: 1.5cm; }
    .topbar, .filters, .resultado-motor, .historial, .seccion-titulo, .no-print{display:none !important;}
    body{background:#fff; color:#000;}
    .app{max-width:none; padding:0;}
    .documento{box-shadow:none; border:1px solid #000;}
    .cuadre-ok, .cuadre-bad{background:none !important; border:1px solid #000 !important; color:#000 !important;}
  }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Conciliación Bancaria</span>
    </div>
    <div class="crumbs"><b>Bancos</b> / Conciliación bancaria</div>
  </div>

<div class="filters">
    <div class="field"><label for="f-cuenta-bancaria">Cuenta bancaria</label><select id="f-cuenta-bancaria"></select></div>
    <div class="field fecha"><label for="f-fecha-corte">Fecha de corte</label><input type="date" id="f-fecha-corte" class="mono"></div>
    <div class="spacer"></div>
    <button class="btn btn-ghost" id="btn-correr">⟳ Correr motor de conciliación</button>
    <button class="btn btn-primary" id="btn-generar">Generar reporte</button>
  </div>

<div class="resultado-motor" id="resultado-motor">
    <span>Pares encontrados: <b id="res-pares">—</b></span>
    <span>Con diferencia: <b id="res-diferencia">—</b></span>
    <span>Ambiguos (sin resolver, requieren revisión manual): <b id="res-ambiguos">—</b></span>
  </div>

<div class="documento" id="documento">
    <div class="documento-titulo"><h2>CONCILIACIÓN BANCARIA</h2></div>
    <div class="documento-sub">
      Cuenta corriente <b id="doc-cuenta">—</b> · Fecha <b id="doc-fecha" class="mono">—</b>
    </div>

<div class="lado">
      <div class="lado-titulo"><span>Saldo según contabilidad</span><span class="mono" id="doc-saldo-contable">—</span></div>

<div class="subgrupo-lbl">Errores de registro (comprobante encontrado, monto distinto)</div>
      <table class="partidas" id="tabla-dif-registro"><tbody></tbody></table>

<div class="subgrupo-lbl">Más / menos: documentos del banco no contabilizados</div>
      <table class="partidas" id="tabla-banco-no-contab"><tbody></tbody></table>

<div class="fila-saldo total"><span>Saldo ajustado en contabilidad (auxiliar)</span><span class="val mono" id="doc-saldo-ajustado-contable">—</span></div>
    </div>

<div class="lado">
      <div class="lado-titulo"><span>Saldo según el banco</span><span class="mono" id="doc-saldo-banco">—</span></div>

<div class="subgrupo-lbl">Más / menos: movimientos del auxiliar aún no reflejados en el banco</div>
      <table class="partidas" id="tabla-auxiliar-no-reflejado"><tbody></tbody></table>

<div class="fila-saldo total"><span>Saldo ajustado en banco</span><span class="val mono" id="doc-saldo-ajustado-banco">—</span></div>
    </div>

<div class="firma-linea no-print">
      <div class="firma-campo">Hecho por</div>
      <div class="firma-campo">Visto bueno</div>
    </div>

<div class="modal-acciones no-print" style="margin-top:20px;">
      <button class="btn btn-ghost" id="btn-imprimir">🖶 Imprimir</button>
      <button class="btn btn-ghost" id="btn-exportar">
        <svg id="icono-exportar" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v12m0 0-4-4m4 4 4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
        <span id="texto-exportar">Exportar a Excel</span>
      </button>
      <button class="btn btn-primary" id="btn-firmar">Firmar y archivar</button>
    </div>
  </div>

<h3 class="seccion-titulo">Conciliaciones firmadas</h3>
  <div class="historial">
    <table>
      <thead><tr><th>Fecha de corte</th><th class="num">Saldo contable</th><th class="num">Saldo banco</th><th class="num">Ajustado</th><th>Firmado por</th><th>Firmado el</th></tr></thead>
      <tbody id="tbody-historial"></tbody>
    </table>
  </div>

</div>

let reporteActual = null;

async function generarReporte(){
    const cuentaId = document.getElementById('f-cuenta-bancaria').value;
    const fechaCorte = document.getElementById('f-fecha-corte').value;
    if (!cuentaId || !fechaCorte){ await modalAlert('Elija la cuenta bancaria y la fecha de corte.'); return; }

const btn = document.getElementById('btn-generar');
    btn.disabled = true; btn.textContent = 'Generando…';
    try{
      const r = await llamarApi(`/bancos/conciliacion/reporte?cuenta_bancaria_id=${cuentaId}&fecha_corte=${fechaCorte}`);
      reporteActual = r;

tablaPartidas('tabla-dif-registro', r.diferencias_registro);
      tablaPartidas('tabla-banco-no-contab', r.banco_no_contabilizado);
      tablaPartidas('tabla-auxiliar-no-reflejado', r.auxiliar_no_reflejado);

document.getElementById('documento').classList.add('visible');
    }catch(e){
      await modalAlert(e.message, 'No se pudo generar el reporte');
    }finally{
      btn.disabled = false; btn.textContent = 'Generar reporte';
    }
  }

document.getElementById('btn-generar').addEventListener('click', generarReporte);
  document.getElementById('btn-imprimir').addEventListener('click', ()=> window.print());

document.getElementById('btn-exportar').addEventListener('click', async ()=>{
    if (!reporteActual){ await modalAlert('Genere el reporte primero.'); return; }
    const btn = document.getElementById('btn-exportar');
    btn.disabled = true;
    document.getElementById('icono-exportar').outerHTML = ICONO_PROCESANDO.replace('<svg ', '<svg id="icono-exportar" ');
    document.getElementById('texto-exportar').textContent = 'Generando…';

try{
      const query = `cuenta_bancaria_id=${reporteActual.cuenta_bancaria_id}&fecha_corte=${reporteActual.fecha_corte}`;
      const resp = await fetch(`${API_BASE}/bancos/conciliacion/reporte/excel?${query}`);
      if (!resp.ok){
        let detalle = `El servidor respondió ${resp.status}`;
        try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
        throw new Error(detalle);
      }
      const disposicion = resp.headers.get('Content-Disposition') || '';
      const match = disposicion.match(/filename="?([^"]+)"?/);
      const nombreArchivo = match ? match[1] : 'conciliacion.xlsx';
      const blob = await resp.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = nombreArchivo;
      document.body.appendChild(a); a.click(); document.body.removeChild(a);
      URL.revokeObjectURL(url);

async function cargarHistorial(){
    const cuentaId = document.getElementById('f-cuenta-bancaria').value;
    if (!cuentaId) return;
    try{
      const filas = await llamarApi(`/bancos/conciliacion?cuenta_bancaria_id=${cuentaId}`);
      const tbody = document.getElementById('tbody-historial');
      if (filas.length === 0){
        tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding:20px; color:var(--ink-muted);">Sin conciliaciones firmadas todavía para esta cuenta.</td></tr>`;
        return;
      }
      tbody.innerHTML = filas.map(f=>`
        <tr>
          <td class="mono">${f.fecha_corte}</td>
          <td class="num mono">${fmt(f.saldo_contable)}</td>
          <td class="num mono">${fmt(f.saldo_banco)}</td>
          <td class="num mono">${fmt(f.saldo_ajustado_contabilidad)}</td>
          <td>${f.firmado_por}</td>
          <td class="mono">${new Date(f.firmado_en).toLocaleString('es-CR')}</td>
        </tr>
      `).join('');
    }catch(e){ /* silencioso -- no es crítico para la pantalla */ }
  }

document.getElementById('f-cuenta-bancaria').addEventListener('change', ()=>{
    document.getElementById('documento').classList.remove('visible');
    document.getElementById('resultado-motor').classList.remove('visible');
    cargarHistorial();
  });

(async function iniciar(){
    document.getElementById('f-fecha-corte').value = hoyISO();
    try{ await cargarCuentasBancarias(); await cargarHistorial(); }
    catch(e){ await modalAlert(e.message, 'No se pudieron cargar las cuentas bancarias'); }
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Clientes</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1220px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:14px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:180px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.subnav{display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap;}

.modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  /* #modal-overlay (aviso/confirmacion) comparte la clase .modal-overlay con otro overlay de
     esta pantalla, mismo z-index -- si #modal-overlay aparece antes en el DOM, al abrirse los
     dos a la vez (ej. un error de guardado mientras un formulario sigue abierto) el otro overlay
     pintaba encima y el aviso quedaba oculto/inaccesible detras. Bug real reportado: "el
     Entendido no se ve". Un z-index propio, mas alto, garantiza que el aviso siempre gane sin
     importar el orden del DOM. */
  #modal-overlay{ z-index:400; }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:420px; width:100%;
  }
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}

.modal-box.form-box{max-width:600px; max-height:88vh; overflow-y:auto;}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
  .form-grid .span2{grid-column:1 / -1;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  /* Convención de campo obligatorio (asterisco rojo tras la etiqueta) -- no existía
     ninguna en el proyecto hasta ahora, arranca aquí a pedido del usuario. */
  .form-field label.requerido::after{content:" *"; color:var(--red-ink); font-weight:700;}
  .form-field input[type="text"], .form-field input[type="number"], .form-field select, .form-field textarea{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%; font-family:inherit;
  }
  .form-field textarea{resize:vertical; min-height:52px;}
  .form-field.checkbox label{
    display:flex; align-items:center; gap:8px; text-transform:none;
    letter-spacing:normal; font-size:13.5px; color:var(--ink);
  }
  .form-field input[disabled], .form-field select[disabled], .form-field textarea[disabled]{opacity:.6; cursor:not-allowed;}
  .form-audit{
    font-size:12px; color:var(--ink-muted); border-top:1px solid var(--line);
    margin-top:4px; padding-top:12px; line-height:1.7;
  }
  .form-nota{
    font-size:12px; color:var(--ink-muted); background:var(--surface-2); border:1px solid var(--line);
    border-radius:7px; padding:8px 10px; margin-bottom:14px;
  }

.form-seccion{border-top:1px solid var(--line); margin-top:6px; padding-top:14px; margin-bottom:14px;}
  .form-seccion h4{font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin-bottom:10px;}
  .act-table{width:100%; border-collapse:collapse; font-size:13px; margin-bottom:10px;}
  .act-table th{text-align:left; font-size:10.5px; text-transform:uppercase; color:var(--ink-muted); padding:6px 8px; border-bottom:1px solid var(--line-strong);}
  .act-table td{padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:middle;}
  .act-table td.num{text-align:right; width:64px;}
  .act-table input{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:6px;
    padding:5px 7px; color:var(--ink); font-size:12.5px; width:100%; font-family:inherit;
  }
  .act-table td.acciones{width:70px; white-space:nowrap;}
  .act-vacio{padding:14px 8px; text-align:center; color:var(--ink-muted); font-size:12.5px;}

#exon-overlay{ z-index:350; }
  #exon-overlay .modal-box{ position:relative; }
  .exon-resumen{font-size:13px; color:var(--ink-muted); margin-bottom:10px;}
  .exon-vacio{padding:14px 8px; text-align:center; color:var(--ink-muted); font-size:12.5px;}
  #exon-table td.num{text-align:right; width:60px;}
  #exon-table td.acciones{width:40px;}

@media print{
    @page{ margin: 1.5cm; }
    .topbar .crumbs, .filters, .subnav, .row-actions, .no-print{display:none !important;}
    body{background:#fff; color:#000;}
    .app{max-width:none; padding:0;}
    .table-wrap{box-shadow:none; border:1px solid #000;}
    thead th{background:none !important; border-color:#000 !important;}
    .pill{background:none !important; border:1px solid #000 !important; color:#000 !important;}
  }
  .fenix-toast{
    position:fixed; bottom:24px; right:24px; z-index:300;
    background:var(--accent); color:var(--accent-ink); padding:11px 18px; border-radius:8px;
    box-shadow:var(--shadow); font-size:13.5px; font-weight:600;
    display:flex; align-items:center; gap:8px;
    opacity:0; transform:translateY(10px); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .fenix-toast.visible{ opacity:1; transform:translateY(0); }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Clientes</span>
    </div>
    <div class="crumbs"><b>Cuentas a Cobrar</b> / Clientes</div>
  </div>

<div class="subnav no-print">
    <a class="btn btn-ghost" data-nav-shell="categoriascliente" href="categorias_cliente_ui.html">🏷 Gestionar categorías de cliente</a>
    <a class="btn btn-ghost" data-nav-shell="territorios" href="territorios_ui.html">📍 Gestionar territorios</a>
  </div>

<div class="filters">
    <div class="field">
      <label for="f-codigo">Código</label>
      <input type="text" id="f-codigo" autocomplete="off">
    </div>
    <div class="field texto">
      <label for="f-nombre">Nombre</label>
      <input type="text" id="f-nombre" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-territorio">Territorio</label>
      <select id="f-territorio"><option value="">Todos</option></select>
    </div>
    <div class="field texto">
      <label for="f-observaciones">Observaciones</label>
      <input type="text" id="f-observaciones" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-identificacion">Identificación</label>
      <input type="text" id="f-identificacion" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-categoria">Categoría</label>
      <select id="f-categoria"><option value="">Todas</option></select>
    </div>
    <div class="field">
      <label for="f-activa">Activo</label>
      <select id="f-activa">
        <option value="">Todos</option>
        <option value="true">Sí</option>
        <option value="false">No</option>
      </select>
    </div>
    <div class="field">
      <label for="f-tipo">Tipo</label>
      <select id="f-tipo" title="Todavía no hay tipos de cliente definidos"><option value="">Todos</option></select>
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-importar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v12m0 0 4-4m-4 4-4-4M4 21h16"/></svg>
      Importar
    </button>
    <button class="btn btn-ghost no-print" id="btn-excel">📊 Exportar a Excel</button>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nuevo</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Categoría</th>
          <th>Código</th>
          <th>Identificación</th>
          <th>Nombre</th>
          <th>Correo electrónico</th>
          <th>Teléfono</th>
          <th>Dirección</th>
          <th>Observaciones</th>
          <th>Territorio</th>
          <th class="num">Límite de crédito</th>
          <th class="num">Saldo a favor</th>
          <th class="num">CxC</th>
          <th>Activo</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay clientes con estos filtros</b>
      Ajusta los filtros, o límpialos para ver todos, o crea el primero con "+ Nuevo".
    </div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div class="form-field">
      <label for="form-nombre" class="requerido">Nombre / razón social</label>
      <input type="text" id="form-nombre">
    </div>

<div class="form-grid">
      <div class="form-field">
        <label for="form-codigo">Código</label>
        <input type="text" id="form-codigo">
      </div>
      <div class="form-field">
        <label for="form-categoria">Categoría</label>
        <select id="form-categoria"><option value="">— Sin clasificar —</option></select>
      </div>
      <div class="form-field">
        <label for="form-identificacion-tipo" class="requerido">Tipo de identificación</label>
        <select id="form-identificacion-tipo">
          <option value="">— Sin definir —</option>
          <option value="01">01 — Física</option>
          <option value="02">02 — Jurídica</option>
          <option value="03">03 — DIMEX</option>
          <option value="04">04 — NITE</option>
        </select>
      </div>
      <div class="form-field">
        <label for="form-identificacion-numero" class="requerido">Número de identificación</label>
        <input type="text" id="form-identificacion-numero">
      </div>
      <div class="form-field">
        <label for="form-territorio">Territorio</label>
        <select id="form-territorio"><option value="">— Sin asignar —</option></select>
      </div>
      <div class="form-field">
        <label for="form-limite-credito">Límite de crédito</label>
        <input type="number" id="form-limite-credito" min="0" step="0.01">
      </div>
      <div class="form-field">
        <label for="form-correo">Correo electrónico</label>
        <input type="text" id="form-correo">
      </div>
      <div class="form-field">
        <label for="form-telefono">Teléfono</label>
        <input type="text" id="form-telefono">
      </div>
      <div class="form-field span2">
        <label for="form-direccion">Dirección (texto libre, uso interno)</label>
        <input type="text" id="form-direccion">
      </div>
      <div class="form-field span2">
        <label for="form-metodo-pago-nota">Método de pago (informativo -- no condiciona nada en Fénix)</label>
        <input type="text" id="form-metodo-pago-nota" placeholder="ej. Paga los viernes por medio de cheque">
      </div>
      <div class="form-field span2">
        <label for="form-observaciones">Observaciones</label>
        <input type="text" id="form-observaciones">
      </div>
    </div>

<div class="form-seccion">
      <h4>Domicilio fiscal (Hacienda)</h4>
      <div class="form-nota">
        Este es el que exige Hacienda en el comprobante electrónico (Receptor.Ubicacion) --
        distinto del campo "Dirección" de arriba, que es solo texto libre para uso interno.
      </div>
      <div class="grid-3">
        <div class="form-field">
          <label for="form-ubi-provincia">Provincia</label>
          <select id="form-ubi-provincia"><option value="">— Sin definir —</option></select>
        </div>
        <div class="form-field">
          <label for="form-ubi-canton">Cantón</label>
          <select id="form-ubi-canton" disabled><option value="">— Elija provincia primero —</option></select>
        </div>
        <div class="form-field">
          <label for="form-ubi-distrito">Distrito</label>
          <select id="form-ubi-distrito" disabled><option value="">— Elija cantón primero —</option></select>
        </div>
        <div class="form-field">
          <label for="form-ubi-barrio">Barrio (opcional)</label>
          <input type="text" id="form-ubi-barrio">
        </div>
        <div class="form-field span2">
          <label for="form-ubi-otras-senas">Otras señas</label>
          <input type="text" id="form-ubi-otras-senas" placeholder="ej. 200m norte del parque, casa esquinera">
        </div>
      </div>
    </div>

<div class="form-field checkbox">
      <label><input type="checkbox" id="form-activa" checked> Activo</label>
    </div>
    <div class="form-nota" id="form-nota-saldo" style="display:none;">
      Saldo a favor y CxC pendiente todavía no están disponibles aquí -- se calculan
      automáticamente cuando exista el Auxiliar de Cuentas a Cobrar (Facturas por Cobrar),
      no se guardan como dato fijo.
    </div>

<div class="form-seccion" id="seccion-actividades">
      <h4>Actividades económicas (Hacienda)</h4>
      <div class="form-nota" id="act-nota-nuevo">
        Guarde el cliente primero -- las actividades económicas se agregan una vez que el
        cliente ya existe.
      </div>
      <div id="act-contenido" style="display:none;">
        <table class="act-table">
          <thead><tr><th>Código</th><th>Descripción</th><th class="num">Orden</th><th></th></tr></thead>
          <tbody id="act-tbody"></tbody>
        </table>
        <div class="act-vacio" id="act-vacio" style="display:none;">Sin actividades económicas registradas.</div>
        <button class="btn btn-ghost no-print" id="btn-agregar-actividad" type="button">+ Agregar actividad</button>
      </div>
    </div>

<div class="form-seccion" id="seccion-exoneraciones">
      <h4>Exoneraciones de impuesto</h4>
      <div class="form-nota" id="exon-nota-nuevo">
        Guarde el cliente primero -- las exoneraciones se agregan una vez que el cliente ya existe.
      </div>
      <div id="exon-contenido" style="display:none;">
        <div class="exon-resumen" id="exon-resumen">Sin exoneraciones registradas.</div>
        <button class="btn btn-ghost no-print" id="btn-abrir-exoneraciones" type="button">Ver / Gestionar exoneraciones</button>
      </div>
    </div>

<div class="form-seccion" id="seccion-telefonos">
      <h4>Teléfonos</h4>
      <div class="form-nota" id="tel-nota-nuevo">
        Guarde el cliente primero -- los teléfonos se agregan una vez que el cliente ya existe.
      </div>
      <div id="tel-contenido" style="display:none;">
        <table class="act-table">
          <thead><tr><th title="Principal">★</th><th>Tipo</th><th>País</th><th>Número</th><th></th></tr></thead>
          <tbody id="tel-tbody"></tbody>
        </table>
        <div class="act-vacio" id="tel-vacio" style="display:none;">Sin teléfonos registrados.</div>
        <button class="btn btn-ghost no-print" id="btn-agregar-telefono" type="button">+ Agregar teléfono</button>
      </div>
    </div>

<div class="form-seccion" id="seccion-contactos">
      <h4>Contactos</h4>
      <div class="form-nota" id="cont-nota-nuevo">
        Guarde el cliente primero -- los contactos se agregan una vez que el cliente ya existe.
      </div>
      <div id="cont-contenido" style="display:none;">
        <table class="act-table">
          <thead><tr><th title="Principal">★</th><th>Nombre</th><th>Puesto</th><th>Teléfono</th><th>Correo</th><th></th></tr></thead>
          <tbody id="cont-tbody"></tbody>
        </table>
        <div class="act-vacio" id="cont-vacio" style="display:none;">Sin contactos registrados.</div>
        <button class="btn btn-ghost no-print" id="btn-agregar-contacto" type="button">+ Agregar contacto</button>
      </div>
    </div>

<div class="modal-overlay" id="exon-overlay">
  <div class="modal-box form-box" style="max-width:820px;" role="dialog" aria-modal="true">
    <button class="icon-btn modal-close" id="exon-cerrar-x" type="button" title="Cerrar" style="position:absolute; top:16px; right:16px;">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 6 6 18M6 6l12 12"/></svg>
    </button>
    <h3 class="modal-titulo">Exoneraciones — <span id="exon-cliente-nombre"></span></h3>

<div class="form-grid">
      <div class="form-field">
        <label for="exon-tipo">Tipo</label>
        <select id="exon-tipo"></select>
      </div>
      <div class="form-field">
        <label for="exon-institucion">Institución</label>
        <select id="exon-institucion"></select>
      </div>
      <div class="form-field span2" id="exon-tipo-otro-field" style="display:none;">
        <label for="exon-tipo-otro">Detalle (Tipo "Otros")</label>
        <input type="text" id="exon-tipo-otro">
      </div>
      <div class="form-field span2" id="exon-institucion-otro-field" style="display:none;">
        <label for="exon-institucion-otro">Nombre de la institución (Institución "Otros")</label>
        <input type="text" id="exon-institucion-otro">
      </div>
      <div class="form-field">
        <label for="exon-numero">Número de documento</label>
        <input type="text" id="exon-numero" placeholder="ej. AL-00012425-26">
      </div>
      <div class="form-field">
        <label for="exon-porcentaje">Porcentaje exonerado</label>
        <input type="number" id="exon-porcentaje" min="0" max="100" step="0.01">
      </div>
      <div class="form-field">
        <label for="exon-fecha-emision">Fecha de emisión</label>
        <input type="date" id="exon-fecha-emision">
      </div>
      <div class="form-field">
        <label for="exon-fecha-vencimiento">Fecha de vencimiento</label>
        <input type="date" id="exon-fecha-vencimiento">
      </div>
      <div class="form-field">
        <label for="exon-articulo">Artículo</label>
        <input type="number" id="exon-articulo" min="0" step="1">
      </div>
      <div class="form-field">
        <label for="exon-inciso">Inciso</label>
        <input type="number" id="exon-inciso" min="0" step="1">
      </div>
      <div class="form-field checkbox span2">
        <label><input type="checkbox" id="exon-principal"> Usar como exoneración principal (por defecto al facturar)</label>
      </div>
    </div>
    <div class="modal-acciones" style="justify-content:flex-start; margin-bottom:18px;">
      <button class="btn btn-primary" id="exon-agregar" type="button">+ Agregar</button>
    </div>

<table class="act-table" id="exon-table">
      <thead>
        <tr>
          <th></th><th>#</th><th>Tipo</th><th>Número</th><th>Institución</th>
          <th>Emisión</th><th>Vence</th><th class="num">%</th><th></th>
        </tr>
      </thead>
      <tbody id="exon-tbody"></tbody>
    </table>
    <div class="exon-vacio" id="exon-vacio" style="display:none;">Sin exoneraciones registradas.</div>

<div class="modal-acciones">
      <button class="btn btn-ghost" id="exon-cerrar">Cerrar</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="importar-overlay">
  <div class="modal-box" role="dialog" aria-modal="true" style="max-width:520px;">
    <h3 class="modal-titulo">Importar clientes desde Excel</h3>
    <div id="importar-paso-nota">
      <p class="modal-mensaje" style="margin-bottom:14px;">
        Este proceso lee un archivo .xlsx con la lista de clientes de tu sistema anterior y
        crea en Fénix únicamente los que <b>todavía no existan</b> (se compara por número de
        identificación) -- los que ya existan se omiten, para no duplicar. No se modifica
        ningún cliente que ya esté en Fénix.
      </p>
      <div class="form-field">
        <label for="importar-archivo">Archivo Excel (.xlsx)</label>
        <input type="file" id="importar-archivo" accept=".xlsx">
      </div>
      <div class="modal-acciones">
        <button class="btn btn-ghost" id="importar-cancelar">Cancelar</button>
        <button class="btn btn-primary" id="importar-confirmar" disabled>Importar</button>
      </div>
    </div>
    <div id="importar-paso-resultado" style="display:none;">
      <p class="modal-mensaje" id="importar-resumen"></p>
      <div id="importar-advertencias" style="max-height:220px; overflow-y:auto; font-size:12.5px; color:var(--ink-muted); margin-bottom:14px;"></div>
      <div class="modal-acciones">
        <button class="btn btn-primary" id="importar-cerrar">Cerrar</button>
      </div>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>
<script>
(function(){
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador'; // no hay sesión/login todavía -- placeholder de trazabilidad
  const API_CLIENTES = '/ventas/clientes';
  const API_CATEGORIAS = '/ventas/categorias-cliente';
  const API_TERRITORIOS = '/ventas/territorios';
  const API_ACTIVIDADES = '/ventas/actividades-economicas-cliente';

// ---------------- Categorías y Territorios (para los <select>) ----------------
  let CATEGORIAS = [], TERRITORIOS = [];
  async function cargarListas(){
    [CATEGORIAS, TERRITORIOS] = await Promise.all([
      llamarApi(`${API_CATEGORIAS}?activa=true`),
      llamarApi(`${API_TERRITORIOS}?activa=true`),
    ]);
    const opcionesCategoria = CATEGORIAS.map(c=>`<option value="${c.id}">${c.categoria_padre_nombre ? c.categoria_padre_nombre + ' › ' : ''}${c.nombre}</option>`).join('');
    const opcionesTerritorio = TERRITORIOS.map(t=>`<option value="${t.id}">${t.nombre}</option>`).join('');
    document.getElementById('f-categoria').innerHTML = '<option value="">Todas</option>' + opcionesCategoria;
    document.getElementById('f-territorio').innerHTML = '<option value="">Todos</option>' + opcionesTerritorio;
    document.getElementById('form-categoria').innerHTML = '<option value="">— Sin clasificar —</option>' + opcionesCategoria;
    document.getElementById('form-territorio').innerHTML = '<option value="">— Sin asignar —</option>' + opcionesTerritorio;
  }

// ---------------- Formulario ----------------
  const formOverlay = document.getElementById('form-overlay');
  const formTitulo = document.getElementById('form-titulo');
  const formNombre = document.getElementById('form-nombre');
  const formCodigo = document.getElementById('form-codigo');
  const formCategoria = document.getElementById('form-categoria');
  const formIdTipo = document.getElementById('form-identificacion-tipo');
  const formIdNumero = document.getElementById('form-identificacion-numero');
  const formTerritorio = document.getElementById('form-territorio');
  const formLimiteCredito = document.getElementById('form-limite-credito');
  const formCorreo = document.getElementById('form-correo');
  const formTelefono = document.getElementById('form-telefono');
  const formDireccion = document.getElementById('form-direccion');
  const formMetodoPagoNota = document.getElementById('form-metodo-pago-nota');
  const formObservaciones = document.getElementById('form-observaciones');
  const formActiva = document.getElementById('form-activa');
  const formUbiProvincia = document.getElementById('form-ubi-provincia');
  const formUbiCanton = document.getElementById('form-ubi-canton');
  const formUbiDistrito = document.getElementById('form-ubi-distrito');
  const formUbiBarrio = document.getElementById('form-ubi-barrio');
  const formUbiOtrasSenas = document.getElementById('form-ubi-otras-senas');
  const formNotaSaldo = document.getElementById('form-nota-saldo');
  const formAudit = document.getElementById('form-audit');
  const formGuardar = document.getElementById('form-guardar');
  const formCancelar = document.getElementById('form-cancelar');

// formUbiCanton/formUbiDistrito quedan fuera: su habilitado/deshabilitado depende de la
  // cascada (Provincia → Cantón → Distrito), no solo de solo-lectura -- lo maneja
  // pintarCantones()/pintarDistritos() directamente.
  const TODOS_LOS_CAMPOS = [formNombre, formCodigo, formCategoria, formIdTipo, formIdNumero,
    formTerritorio, formLimiteCredito, formCorreo, formTelefono, formDireccion, formMetodoPagoNota,
    formObservaciones, formActiva, formUbiProvincia, formUbiBarrio, formUbiOtrasSenas];

// ---------------- Catálogo Provincia → Cantón → Distrito (cascada, en cliente) ----------------
  const API_UBICACION_CR = '/catalogos/ubicacion-cr';
  let UBICACION_CR = [];
  async function cargarCatalogoUbicacion(){
    UBICACION_CR = await llamarApi(API_UBICACION_CR);
    const provincias = [...new Map(UBICACION_CR.map(u => [u.provincia_codigo, u.provincia_nombre])).entries()];
    formUbiProvincia.innerHTML = '<option value="">— Sin definir —</option>'
      + provincias.map(([cod, nom]) => `<option value="${cod}">${nom}</option>`).join('');
  }
  function pintarCantones(provinciaCodigo, cantonSeleccionado){
    if (!provinciaCodigo){
      formUbiCanton.innerHTML = '<option value="">— Elija provincia primero —</option>';
      formUbiCanton.disabled = true;
      pintarDistritos(null, null);
      return;
    }
    const cantones = [...new Map(
      UBICACION_CR.filter(u => u.provincia_codigo === Number(provinciaCodigo)).map(u => [u.canton_codigo, u.canton_nombre])
    ).entries()];
    formUbiCanton.innerHTML = '<option value="">— Sin definir —</option>'
      + cantones.map(([cod, nom]) => `<option value="${cod}">${nom}</option>`).join('');
    formUbiCanton.disabled = formSoloLectura;
    formUbiCanton.value = cantonSeleccionado != null ? String(cantonSeleccionado) : '';
  }
  function pintarDistritos(provinciaCodigo, cantonCodigo, distritoSeleccionado){
    if (!provinciaCodigo || !cantonCodigo){
      formUbiDistrito.innerHTML = '<option value="">— Elija cantón primero —</option>';
      formUbiDistrito.disabled = true;
      return;
    }
    const distritos = UBICACION_CR.filter(u => u.provincia_codigo === Number(provinciaCodigo) && u.canton_codigo === Number(cantonCodigo));
    formUbiDistrito.innerHTML = '<option value="">— Sin definir —</option>'
      + distritos.map(d => `<option value="${d.distrito_codigo}">${d.distrito_nombre}</option>`).join('');
    formUbiDistrito.disabled = formSoloLectura;
    formUbiDistrito.value = distritoSeleccionado != null ? String(distritoSeleccionado) : '';
  }
  formUbiProvincia.addEventListener('change', ()=>{
    pintarCantones(formUbiProvincia.value || null, null);
  });
  formUbiCanton.addEventListener('change', ()=>{
    pintarDistritos(formUbiProvincia.value || null, formUbiCanton.value || null, null);
  });

function ponerSoloLectura(soloLectura){
    TODOS_LOS_CAMPOS.forEach(c => c.disabled = soloLectura);
  }

let formModo = 'nuevo';
  let formIdEditando = null;
  let formSoloLectura = false;

// ---------------- Actividades económicas (sub-tabla dentro del formulario) ----------------
  // No es un catálogo maestro -- cada fila es lo que Hacienda tiene registrado para ESTE
  // cliente (se consulta en el sitio de Hacienda o se le pide al cliente). Solo existe una
  // vez que el cliente ya tiene id, por eso en "Nuevo" queda oculta hasta el primer guardado.
  let ACTIVIDADES = [];
  const actNotaNuevo = document.getElementById('act-nota-nuevo');
  const actContenido = document.getElementById('act-contenido');
  const actTbody = document.getElementById('act-tbody');
  const actVacio = document.getElementById('act-vacio');

async function cargarActividades(clienteId){
    ACTIVIDADES = await llamarApi(`${API_ACTIVIDADES}?cliente_id=${clienteId}`);
    pintarActividades();
  }

if (accion === 'editar'){
      const a = ACTIVIDADES.find(x=>x.id === Number(fila.dataset.id));
      fila.outerHTML = filaActividadEdicionHtml(a);
      actTbody.querySelector('[data-editando] .act-in-codigo').focus();
    }
    if (accion === 'cancelar-edicion'){
      pintarActividades();
    }
    if (accion === 'guardar-edicion'){
      const codigo = fila.querySelector('.act-in-codigo').value.trim();
      const descripcion = fila.querySelector('.act-in-descripcion').value.trim();
      const ordenVal = fila.querySelector('.act-in-orden').value;
      if (!codigo){ await modalAlert('El código es obligatorio.'); return; }
      if (!descripcion){ await modalAlert('La descripción es obligatoria.'); return; }
      const cuerpo = {codigo, descripcion, orden: ordenVal !== '' ? Number(ordenVal) : null};
      btn.disabled = true;
      try{
        if (fila.dataset.id === 'nueva'){
          cuerpo.cliente_id = formIdEditando;
          cuerpo.creado_por = USUARIO_ACTUAL;
          await llamarApi(API_ACTIVIDADES, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(cuerpo)});
        } else {
          cuerpo.modificado_por = USUARIO_ACTUAL;
          await llamarApi(`${API_ACTIVIDADES}/${fila.dataset.id}`, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(cuerpo)});
        }
        await cargarActividades(formIdEditando);
      } catch(e){
        await modalAlert(e.message, 'No se pudo guardar la actividad');
        btn.disabled = false;
      }
    }
    if (accion === 'eliminar'){
      const a = ACTIVIDADES.find(x=>x.id === Number(fila.dataset.id));
      const ok = await modalConfirm(`¿Eliminar la actividad económica "${a.codigo} — ${a.descripcion}"?`, 'Eliminar actividad', 'danger', 'Eliminar');
      if (!ok) return;
      try{
        await llamarApi(`${API_ACTIVIDADES}/${fila.dataset.id}`, {method:'DELETE'});
        await cargarActividades(formIdEditando);
      } catch(e){ await modalAlert(e.message, 'No se pudo eliminar'); }
    }
  });

// ---------------- Exoneraciones (modal propio, historial completo con vigencias) ----------------
  const API_EXONERACIONES = '/ventas/exoneraciones-cliente';
  const exonNotaNuevo = document.getElementById('exon-nota-nuevo');
  const exonContenido = document.getElementById('exon-contenido');
  const exonResumen = document.getElementById('exon-resumen');
  const exonOverlay = document.getElementById('exon-overlay');
  const exonTbody = document.getElementById('exon-tbody');
  const exonVacio = document.getElementById('exon-vacio');
  let clienteExonContexto = null;
  let EXONERACIONES = [];
  let TIPOS_EXONERACION = [], INSTITUCIONES_EXONERACION = [];

async function cargarCatalogosExoneracion(){
    [TIPOS_EXONERACION, INSTITUCIONES_EXONERACION] = await Promise.all([
      llamarApi(`${API_EXONERACIONES}/catalogo/tipos`),
      llamarApi(`${API_EXONERACIONES}/catalogo/instituciones`),
    ]);
    document.getElementById('exon-tipo').innerHTML = TIPOS_EXONERACION.map(t=>`<option value="${t.codigo}">${t.codigo} — ${t.nombre}</option>`).join('');
    document.getElementById('exon-institucion').innerHTML = INSTITUCIONES_EXONERACION.map(i=>`<option value="${i.codigo}">${i.codigo} — ${i.nombre}</option>`).join('');
  }
  function nombreTipoExon(codigo){ const t = TIPOS_EXONERACION.find(x=>x.codigo===codigo); return t ? t.nombre : codigo; }
  function nombreInstitucionExon(codigo){ const i = INSTITUCIONES_EXONERACION.find(x=>x.codigo===codigo); return i ? i.nombre : codigo; }

document.getElementById('exon-tipo').addEventListener('change', (ev)=>{
    document.getElementById('exon-tipo-otro-field').style.display = ev.target.value === '99' ? '' : 'none';
  });
  document.getElementById('exon-institucion').addEventListener('change', (ev)=>{
    document.getElementById('exon-institucion-otro-field').style.display = ev.target.value === '99' ? '' : 'none';
  });

async function cargarExoneraciones(clienteId){
    EXONERACIONES = await llamarApi(`${API_EXONERACIONES}?cliente_id=${clienteId}`);
    pintarResumenExoneraciones();
  }
  function pintarResumenExoneraciones(){
    if (EXONERACIONES.length === 0){
      exonResumen.textContent = 'Sin exoneraciones registradas.';
      return;
    }
    const principal = EXONERACIONES.find(e=>e.principal);
    exonResumen.textContent = principal
      ? `${EXONERACIONES.length} registrada(s) -- principal: ${principal.numero_documento} (${principal.porcentaje}%)`
      : `${EXONERACIONES.length} registrada(s) -- ninguna marcada como principal`;
  }
  function filaExoneracionHtml(e){
    return `
      <tr data-id="${e.id}">
        <td><input type="radio" name="exon-principal-radio" data-accion="marcar-principal" data-id="${e.id}" ${e.principal ? 'checked' : ''} title="Usar como principal"></td>
        <td class="mono">${e.numero_consecutivo}</td>
        <td>${nombreTipoExon(e.tipo_codigo)}${e.tipo_codigo==='99' && e.tipo_otro ? ` (${e.tipo_otro})` : ''}</td>
        <td class="mono">${e.numero_documento}</td>
        <td>${nombreInstitucionExon(e.institucion_codigo)}${e.institucion_codigo==='99' && e.institucion_otro ? ` (${e.institucion_otro})` : ''}</td>
        <td class="mono">${formatearFecha(e.fecha_emision)}</td>
        <td class="mono">${e.fecha_vencimiento ? formatearFecha(e.fecha_vencimiento) : '—'}</td>
        <td class="num mono">${Number(e.porcentaje).toFixed(2)}</td>
        <td class="acciones">
          <button class="icon-btn danger" title="Eliminar" data-accion="eliminar-exon" data-id="${e.id}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6h16Z"/></svg></button>
        </td>
      </tr>
    `;
  }
  function pintarTablaExoneraciones(){
    if (EXONERACIONES.length === 0){
      exonTbody.innerHTML = '';
      exonVacio.style.display = 'block';
    } else {
      exonVacio.style.display = 'none';
      exonTbody.innerHTML = EXONERACIONES.map(filaExoneracionHtml).join('');
    }
    pintarResumenExoneraciones();
  }
  function limpiarFormularioExoneracion(){
    document.getElementById('exon-tipo').value = TIPOS_EXONERACION[0] ? TIPOS_EXONERACION[0].codigo : '';
    document.getElementById('exon-institucion').value = INSTITUCIONES_EXONERACION[0] ? INSTITUCIONES_EXONERACION[0].codigo : '';
    document.getElementById('exon-tipo-otro').value = '';
    document.getElementById('exon-institucion-otro').value = '';
    document.getElementById('exon-tipo-otro-field').style.display = 'none';
    document.getElementById('exon-institucion-otro-field').style.display = 'none';
    document.getElementById('exon-numero').value = '';
    document.getElementById('exon-porcentaje').value = '';
    document.getElementById('exon-fecha-emision').value = '';
    document.getElementById('exon-fecha-vencimiento').value = '';
    document.getElementById('exon-articulo').value = '';
    document.getElementById('exon-inciso').value = '';
    document.getElementById('exon-principal').checked = EXONERACIONES.length === 0;
  }

document.getElementById('btn-abrir-exoneraciones').addEventListener('click', async ()=>{
    if (!clienteExonContexto) return;
    document.getElementById('exon-cliente-nombre').textContent = clienteExonContexto.nombre;
    if (TIPOS_EXONERACION.length === 0) await cargarCatalogosExoneracion().catch(e=>modalAlert(e.message, 'No se pudo cargar el catálogo'));
    limpiarFormularioExoneracion();
    pintarTablaExoneraciones();
    exonOverlay.classList.add('abierto');
    setTimeout(()=> document.getElementById('exon-tipo').focus(), 30);
  });
  function cerrarExoneraciones(){ exonOverlay.classList.remove('abierto'); }
  document.getElementById('exon-cerrar').addEventListener('click', cerrarExoneraciones);
  document.getElementById('exon-cerrar-x').addEventListener('click', cerrarExoneraciones);

document.getElementById('exon-agregar').addEventListener('click', async ()=>{
    const tipo_codigo = document.getElementById('exon-tipo').value;
    const institucion_codigo = document.getElementById('exon-institucion').value;
    const tipo_otro = document.getElementById('exon-tipo-otro').value.trim();
    const institucion_otro = document.getElementById('exon-institucion-otro').value.trim();
    const numero_documento = document.getElementById('exon-numero').value.trim();
    const porcentajeVal = document.getElementById('exon-porcentaje').value;
    const fecha_emision = document.getElementById('exon-fecha-emision').value;
    const fecha_vencimiento = document.getElementById('exon-fecha-vencimiento').value;
    const articuloVal = document.getElementById('exon-articulo').value;
    const incisoVal = document.getElementById('exon-inciso').value;
    const principal = document.getElementById('exon-principal').checked;

if (tipo_codigo === '99' && !tipo_otro){ await modalAlert('Indique el detalle cuando el Tipo es "Otros".'); return; }
    if (institucion_codigo === '99' && !institucion_otro){ await modalAlert('Indique el nombre de la institución cuando elige "Otros".'); return; }
    if (!numero_documento){ await modalAlert('El número de documento es obligatorio.'); return; }
    if (!fecha_emision){ await modalAlert('La fecha de emisión es obligatoria.'); return; }
    if (porcentajeVal === '' || Number(porcentajeVal) < 0 || Number(porcentajeVal) > 100){ await modalAlert('El porcentaje debe estar entre 0 y 100.'); return; }

exonTbody.addEventListener('click', async (ev)=>{
    const btn = ev.target.closest('button[data-accion="eliminar-exon"]');
    if (!btn) return;
    const id = Number(btn.dataset.id);
    const e = EXONERACIONES.find(x=>x.id===id);
    const ok = await modalConfirm(`¿Eliminar la exoneración "${e.numero_documento}"?`, 'Eliminar exoneración', 'danger', 'Eliminar');
    if (!ok) return;
    try{
      await llamarApi(`${API_EXONERACIONES}/${id}`, {method:'DELETE'});
      await cargarExoneraciones(clienteExonContexto.id);
      pintarTablaExoneraciones();
    } catch(err){ await modalAlert(err.message, 'No se pudo eliminar'); }
  });
  exonTbody.addEventListener('change', async (ev)=>{
    const radio = ev.target.closest('input[data-accion="marcar-principal"]');
    if (!radio) return;
    const id = Number(radio.dataset.id);
    const e = EXONERACIONES.find(x=>x.id===id);
    try{
      await llamarApi(`${API_EXONERACIONES}/${id}`, {
        method:'PUT', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({
          tipo_codigo: e.tipo_codigo, tipo_otro: e.tipo_otro, institucion_codigo: e.institucion_codigo,
          institucion_otro: e.institucion_otro, numero_documento: e.numero_documento,
          fecha_emision: e.fecha_emision, fecha_vencimiento: e.fecha_vencimiento,
          porcentaje: e.porcentaje, articulo: e.articulo, inciso: e.inciso,
          principal: true, activa: e.activa, modificado_por: USUARIO_ACTUAL,
        }),
      });
      await cargarExoneraciones(clienteExonContexto.id);
      pintarTablaExoneraciones();
      mostrarToast('✓ Exoneración principal actualizada');
    } catch(err){ await modalAlert(err.message, 'No se pudo actualizar'); pintarTablaExoneraciones(); }
  });

// ---------------- Teléfonos (sub-tabla dentro del formulario, edición inline) ----------------
  const API_TELEFONOS = '/ventas/telefonos-cliente';
  let TELEFONOS = [];
  const telNotaNuevo = document.getElementById('tel-nota-nuevo');
  const telContenido = document.getElementById('tel-contenido');
  const telTbody = document.getElementById('tel-tbody');
  const telVacio = document.getElementById('tel-vacio');
  const TIPOS_TELEFONO = ['Oficina', 'Celular', 'Fax', 'WhatsApp', 'Otro'];

async function cargarTelefonos(clienteId){
    TELEFONOS = await llamarApi(`${API_TELEFONOS}?cliente_id=${clienteId}`);
    pintarTelefonos();
  }
  function filaTelefonoHtml(t){
    return `
      <tr data-id="${t.id}">
        <td><input type="radio" name="tel-principal-radio" data-tel-accion="marcar-principal" data-id="${t.id}" ${t.principal ? 'checked' : ''} title="Usar como principal (Receptor.Telefono en Hacienda)"></td>
        <td>${t.tipo}</td>
        <td class="mono">${t.codigo_pais}</td>
        <td class="mono">${t.numero}</td>
        <td class="acciones">
          ${formSoloLectura ? '' : `
          <button class="icon-btn" title="Modificar" data-tel-accion="editar" data-id="${t.id}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg></button>
          <button class="icon-btn danger" title="Eliminar" data-tel-accion="eliminar" data-id="${t.id}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6h16Z"/></svg></button>
          `}
        </td>
      </tr>
    `;
  }
  function filaTelefonoEdicionHtml(t){
    const id = t ? t.id : 'nuevo';
    return `
      <tr data-id="${id}" data-editando="1">
        <td><input type="checkbox" class="tel-in-principal" ${t && t.principal ? 'checked' : ''} title="Marcar como principal"></td>
        <td>
          <select class="tel-in-tipo">
            ${TIPOS_TELEFONO.map(tp => `<option value="${tp}" ${t && t.tipo === tp ? 'selected' : ''}>${tp}</option>`).join('')}
          </select>
        </td>
        <td><input type="text" class="tel-in-pais" style="width:4em;" value="${t ? t.codigo_pais : '506'}"></td>
        <td><input type="text" class="tel-in-numero" placeholder="ej. 8888-1234" value="${t ? t.numero : ''}"></td>
        <td class="acciones">
          <button class="icon-btn" title="Guardar" data-tel-accion="guardar-edicion" data-id="${id}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M20 6 9 17l-5-5"/></svg></button>
          <button class="icon-btn danger" title="Cancelar" data-tel-accion="cancelar-edicion" data-id="${id}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
        </td>
      </tr>
    `;
  }
  function pintarTelefonos(){
    if (TELEFONOS.length === 0){
      telTbody.innerHTML = '';
      telVacio.style.display = 'block';
    } else {
      telVacio.style.display = 'none';
      telTbody.innerHTML = TELEFONOS.map(filaTelefonoHtml).join('');
    }
  }
  document.getElementById('btn-agregar-telefono').addEventListener('click', ()=>{
    if (telTbody.querySelector('[data-editando]')) return;
    telVacio.style.display = 'none';
    telTbody.insertAdjacentHTML('beforeend', filaTelefonoEdicionHtml(null));
    telTbody.querySelector('[data-editando] .tel-in-numero').focus();
  });
  telTbody.addEventListener('click', async (ev)=>{
    const btn = ev.target.closest('button[data-tel-accion]');
    if (!btn) return;
    const accion = btn.dataset.telAccion;
    const fila = btn.closest('tr');

if (accion === 'editar'){
      const t = TELEFONOS.find(x=>x.id === Number(fila.dataset.id));
      fila.outerHTML = filaTelefonoEdicionHtml(t);
      telTbody.querySelector('[data-editando] .tel-in-numero').focus();
    }
    if (accion === 'cancelar-edicion'){
      pintarTelefonos();
    }
    if (accion === 'guardar-edicion'){
      const tipo = fila.querySelector('.tel-in-tipo').value;
      const codigo_pais = fila.querySelector('.tel-in-pais').value.trim();
      const numero = fila.querySelector('.tel-in-numero').value.trim();
      const principal = fila.querySelector('.tel-in-principal').checked;
      if (!numero){ await modalAlert('El número de teléfono es obligatorio.'); return; }
      if (!codigo_pais){ await modalAlert('El código de país es obligatorio.'); return; }
      const cuerpo = {tipo, codigo_pais, numero, principal};
      btn.disabled = true;
      try{
        if (fila.dataset.id === 'nuevo'){
          cuerpo.cliente_id = formIdEditando;
          cuerpo.creado_por = USUARIO_ACTUAL;
          await llamarApi(API_TELEFONOS, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(cuerpo)});
        } else {
          cuerpo.modificado_por = USUARIO_ACTUAL;
          await llamarApi(`${API_TELEFONOS}/${fila.dataset.id}`, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(cuerpo)});
        }
        await cargarTelefonos(formIdEditando);
      } catch(e){
        await modalAlert(e.message, 'No se pudo guardar el teléfono');
        btn.disabled = false;
      }
    }
    if (accion === 'eliminar'){
      const t = TELEFONOS.find(x=>x.id === Number(fila.dataset.id));
      const ok = await modalConfirm(`¿Eliminar el teléfono "${t.numero}" (${t.tipo})?`, 'Eliminar teléfono', 'danger', 'Eliminar');
      if (!ok) return;
      try{
        await llamarApi(`${API_TELEFONOS}/${fila.dataset.id}`, {method:'DELETE'});
        await cargarTelefonos(formIdEditando);
      } catch(e){ await modalAlert(e.message, 'No se pudo eliminar'); }
    }
  });
  telTbody.addEventListener('change', async (ev)=>{
    const radio = ev.target.closest('input[data-tel-accion="marcar-principal"]');
    if (!radio) return;
    const id = Number(radio.dataset.id);
    const t = TELEFONOS.find(x=>x.id===id);
    try{
      await llamarApi(`${API_TELEFONOS}/${id}`, {
        method:'PUT', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({tipo: t.tipo, codigo_pais: t.codigo_pais, numero: t.numero, principal: true, modificado_por: USUARIO_ACTUAL}),
      });
      await cargarTelefonos(formIdEditando);
      mostrarToast('✓ Teléfono principal actualizado');
    } catch(err){ await modalAlert(err.message, 'No se pudo actualizar'); pintarTelefonos(); }
  });

// ---------------- Contactos (sub-tabla dentro del formulario, edición inline) ----------------
  const API_CONTACTOS = '/ventas/contactos-cliente';
  let CONTACTOS = [];
  const contNotaNuevo = document.getElementById('cont-nota-nuevo');
  const contContenido = document.getElementById('cont-contenido');
  const contTbody = document.getElementById('cont-tbody');
  const contVacio = document.getElementById('cont-vacio');

async function cargarContactos(clienteId){
    CONTACTOS = await llamarApi(`${API_CONTACTOS}?cliente_id=${clienteId}`);
    pintarContactos();
  }
  function filaContactoHtml(c){
    return `
      <tr data-id="${c.id}">
        <td><input type="radio" name="cont-principal-radio" data-cont-accion="marcar-principal" data-id="${c.id}" ${c.principal ? 'checked' : ''} title="Contacto principal"></td>
        <td>${c.nombre}</td>
        <td>${c.puesto || '—'}</td>
        <td class="mono">${c.telefono || '—'}</td>
        <td>${c.correo_electronico || '—'}</td>
        <td class="acciones">
          ${formSoloLectura ? '' : `
          <button class="icon-btn" title="Modificar" data-cont-accion="editar" data-id="${c.id}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg></button>
          <button class="icon-btn danger" title="Eliminar" data-cont-accion="eliminar" data-id="${c.id}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6h16Z"/></svg></button>
          `}
        </td>
      </tr>
    `;
  }
  function filaContactoEdicionHtml(c){
    const id = c ? c.id : 'nuevo';
    return `
      <tr data-id="${id}" data-editando="1">
        <td><input type="checkbox" class="cont-in-principal" ${c && c.principal ? 'checked' : ''} title="Marcar como principal"></td>
        <td><input type="text" class="cont-in-nombre" value="${c ? c.nombre : ''}"></td>
        <td><input type="text" class="cont-in-puesto" value="${c ? (c.puesto || '') : ''}"></td>
        <td><input type="text" class="cont-in-telefono" value="${c ? (c.telefono || '') : ''}"></td>
        <td><input type="text" class="cont-in-correo" value="${c ? (c.correo_electronico || '') : ''}"></td>
        <td class="acciones">
          <button class="icon-btn" title="Guardar" data-cont-accion="guardar-edicion" data-id="${id}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M20 6 9 17l-5-5"/></svg></button>
          <button class="icon-btn danger" title="Cancelar" data-cont-accion="cancelar-edicion" data-id="${id}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
        </td>
      </tr>
    `;
  }
  function pintarContactos(){
    if (CONTACTOS.length === 0){
      contTbody.innerHTML = '';
      contVacio.style.display = 'block';
    } else {
      contVacio.style.display = 'none';
      contTbody.innerHTML = CONTACTOS.map(filaContactoHtml).join('');
    }
  }
  document.getElementById('btn-agregar-contacto').addEventListener('click', ()=>{
    if (contTbody.querySelector('[data-editando]')) return;
    contVacio.style.display = 'none';
    contTbody.insertAdjacentHTML('beforeend', filaContactoEdicionHtml(null));
    contTbody.querySelector('[data-editando] .cont-in-nombre').focus();
  });
  contTbody.addEventListener('click', async (ev)=>{
    const btn = ev.target.closest('button[data-cont-accion]');
    if (!btn) return;
    const accion = btn.dataset.contAccion;
    const fila = btn.closest('tr');

if (accion === 'editar'){
      const c = CONTACTOS.find(x=>x.id === Number(fila.dataset.id));
      fila.outerHTML = filaContactoEdicionHtml(c);
      contTbody.querySelector('[data-editando] .cont-in-nombre').focus();
    }
    if (accion === 'cancelar-edicion'){
      pintarContactos();
    }
    if (accion === 'guardar-edicion'){
      const nombre = fila.querySelector('.cont-in-nombre').value.trim();
      const puesto = fila.querySelector('.cont-in-puesto').value.trim();
      const telefono = fila.querySelector('.cont-in-telefono').value.trim();
      const correo_electronico = fila.querySelector('.cont-in-correo').value.trim();
      const principal = fila.querySelector('.cont-in-principal').checked;
      if (!nombre){ await modalAlert('El nombre del contacto es obligatorio.'); return; }
      const cuerpo = {nombre, puesto: puesto || null, telefono: telefono || null, correo_electronico: correo_electronico || null, principal};
      btn.disabled = true;
      try{
        if (fila.dataset.id === 'nuevo'){
          cuerpo.cliente_id = formIdEditando;
          cuerpo.creado_por = USUARIO_ACTUAL;
          await llamarApi(API_CONTACTOS, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(cuerpo)});
        } else {
          cuerpo.modificado_por = USUARIO_ACTUAL;
          await llamarApi(`${API_CONTACTOS}/${fila.dataset.id}`, {method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(cuerpo)});
        }
        await cargarContactos(formIdEditando);
      } catch(e){
        await modalAlert(e.message, 'No se pudo guardar el contacto');
        btn.disabled = false;
      }
    }
    if (accion === 'eliminar'){
      const c = CONTACTOS.find(x=>x.id === Number(fila.dataset.id));
      const ok = await modalConfirm(`¿Eliminar el contacto "${c.nombre}"?`, 'Eliminar contacto', 'danger', 'Eliminar');
      if (!ok) return;
      try{
        await llamarApi(`${API_CONTACTOS}/${fila.dataset.id}`, {method:'DELETE'});
        await cargarContactos(formIdEditando);
      } catch(e){ await modalAlert(e.message, 'No se pudo eliminar'); }
    }
  });
  contTbody.addEventListener('change', async (ev)=>{
    const radio = ev.target.closest('input[data-cont-accion="marcar-principal"]');
    if (!radio) return;
    const id = Number(radio.dataset.id);
    const c = CONTACTOS.find(x=>x.id===id);
    try{
      await llamarApi(`${API_CONTACTOS}/${id}`, {
        method:'PUT', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({nombre: c.nombre, puesto: c.puesto, telefono: c.telefono, correo_electronico: c.correo_electronico, principal: true, modificado_por: USUARIO_ACTUAL}),
      });
      await cargarContactos(formIdEditando);
      mostrarToast('✓ Contacto principal actualizado');
    } catch(err){ await modalAlert(err.message, 'No se pudo actualizar'); pintarContactos(); }
  });

function abrirFormulario(modo, registro){
    formModo = modo;
    formIdEditando = registro ? registro.id : null;
    formSoloLectura = modo === 'ver';

formNombre.value = registro ? registro.nombre : '';
    formCodigo.value = registro ? (registro.codigo || '') : '';
    formCategoria.value = registro && registro.categoria_cliente_id ? String(registro.categoria_cliente_id) : '';
    formIdTipo.value = registro ? (registro.identificacion_tipo || '') : '';
    formIdNumero.value = registro ? (registro.identificacion_numero || '') : '';
    formTerritorio.value = registro && registro.territorio_id ? String(registro.territorio_id) : '';
    formLimiteCredito.value = registro ? registro.limite_credito : 0;
    formCorreo.value = registro ? (registro.correo_electronico || '') : '';
    formTelefono.value = registro ? (registro.telefono || '') : '';
    formDireccion.value = registro ? (registro.direccion || '') : '';
    formMetodoPagoNota.value = registro ? (registro.metodo_pago_nota || '') : '';
    formObservaciones.value = registro ? (registro.observaciones || '') : '';
    formActiva.checked = registro ? registro.activa : true;
    formNotaSaldo.style.display = registro ? '' : 'none';

formUbiProvincia.value = registro && registro.ubicacion_provincia != null ? String(registro.ubicacion_provincia) : '';
    pintarCantones(registro ? registro.ubicacion_provincia : null, registro ? registro.ubicacion_canton : null);
    pintarDistritos(registro ? registro.ubicacion_provincia : null, registro ? registro.ubicacion_canton : null, registro ? registro.ubicacion_distrito : null);
    formUbiBarrio.value = registro ? (registro.ubicacion_barrio || '') : '';
    formUbiOtrasSenas.value = registro ? (registro.ubicacion_otras_senas || '') : '';

ACTIVIDADES = [];
    document.getElementById('btn-agregar-actividad').style.display = formSoloLectura ? 'none' : '';
    if (registro){
      actNotaNuevo.style.display = 'none';
      actContenido.style.display = '';
      cargarActividades(registro.id).catch(e => modalAlert(e.message, 'No se pudieron cargar las actividades económicas'));
    } else {
      actNotaNuevo.style.display = '';
      actContenido.style.display = 'none';
    }

clienteExonContexto = registro ? {id: registro.id, nombre: registro.nombre} : null;
    if (registro){
      exonNotaNuevo.style.display = 'none';
      exonContenido.style.display = '';
      cargarExoneraciones(registro.id).catch(e => modalAlert(e.message, 'No se pudieron cargar las exoneraciones'));
    } else {
      exonNotaNuevo.style.display = '';
      exonContenido.style.display = 'none';
    }

TELEFONOS = [];
    document.getElementById('btn-agregar-telefono').style.display = formSoloLectura ? 'none' : '';
    if (registro){
      telNotaNuevo.style.display = 'none';
      telContenido.style.display = '';
      cargarTelefonos(registro.id).catch(e => modalAlert(e.message, 'No se pudieron cargar los teléfonos'));
    } else {
      telNotaNuevo.style.display = '';
      telContenido.style.display = 'none';
    }

CONTACTOS = [];
    document.getElementById('btn-agregar-contacto').style.display = formSoloLectura ? 'none' : '';
    if (registro){
      contNotaNuevo.style.display = 'none';
      contContenido.style.display = '';
      cargarContactos(registro.id).catch(e => modalAlert(e.message, 'No se pudieron cargar los contactos'));
    } else {
      contNotaNuevo.style.display = '';
      contContenido.style.display = 'none';
    }

if (modo === 'ver'){
      formTitulo.textContent = 'Ver — Cliente';
      ponerSoloLectura(true);
      formGuardar.style.display = 'none';
      formCancelar.textContent = 'Cerrar';
    } else {
      formTitulo.textContent = modo === 'nuevo' ? 'Nuevo — Cliente' : 'Modificar — Cliente';
      ponerSoloLectura(false);
      formGuardar.style.display = '';
      formCancelar.textContent = 'Cancelar';
    }

formOverlay.classList.add('abierto');
    setTimeout(()=> { if (modo !== 'ver') formNombre.focus(); }, 30);
  }
  function cerrarFormulario(){ formOverlay.classList.remove('abierto'); }
  formCancelar.onclick = async ()=>{ cerrarFormulario(); await cargar(); };
  document.addEventListener('keydown', e=>{ if (e.key === 'Escape' && formOverlay.classList.contains('abierto')) cerrarFormulario(); });

formGuardar.onclick = async ()=>{
    const nombre = formNombre.value.trim();
    if (!nombre){ await modalAlert('El nombre / razón social es obligatorio.'); formNombre.focus(); return; }
    if (!formIdTipo.value){ await modalAlert('El tipo de identificación es obligatorio.'); formIdTipo.focus(); return; }
    if (!formIdNumero.value.trim()){ await modalAlert('El número de identificación es obligatorio.'); formIdNumero.focus(); return; }

function pillActiva(activa){
    return activa
      ? `<span class="pill pill-aplicado">Activo</span>`
      : `<span class="pill pill-anulado">Inactivo</span>`;
  }

function pillBloqueo(r){
    return r.bloqueado
      ? `<span class="pill pill-anulado" title="${(r.motivo_bloqueo||'').replace(/"/g,'&quot;')}">Bloqueado</span>`
      : '';
  }

function filaHtml(r){
    return `
      <tr data-id="${r.id}">
        <td>
          <div class="row-actions">
            <button class="icon-btn" title="Ver" data-accion="ver" data-id="${r.id}">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z"/><circle cx="12" cy="12" r="3"/></svg></button>
            <button class="icon-btn" title="Modificar" data-accion="modificar" data-id="${r.id}">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg></button>
            <button class="icon-btn${r.bloqueado ? '' : ' danger'}" title="${r.bloqueado ? 'Desbloquear' : 'Bloquear'}" data-accion="${r.bloqueado ? 'desbloquear' : 'bloquear'}" data-id="${r.id}">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="4" y="10" width="16" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></button>
            <button class="icon-btn danger" title="Eliminar" data-accion="eliminar" data-id="${r.id}">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6h16Z"/></svg></button>
          </div>
        </td>
        <td class="muted-cell">${r.categoria_cliente_nombre || '—'}</td>
        <td class="mono">${r.codigo || '—'}</td>
        <td class="mono">${r.identificacion_numero || '—'}</td>
        <td>${r.nombre}</td>
        <td class="muted-cell">${r.correo_electronico || '—'}</td>
        <td class="muted-cell">${r.telefono || '—'}</td>
        <td class="muted-cell">${r.direccion || '—'}</td>
        <td class="muted-cell">${r.observaciones || '—'}</td>
        <td class="muted-cell">${r.territorio_nombre || '—'}</td>
        <td class="num mono">${formatearMonto(r.limite_credito)}</td>
        <td class="num mono">${formatearMonto(r.saldo_a_favor)}</td>
        <td class="num mono">${formatearMonto(r.cxc)}</td>
        <td>${pillActiva(r.activa)} ${pillBloqueo(r)}</td>
      </tr>
    `;
  }

function construirQuery(){
    const params = new URLSearchParams();
    const codigo = document.getElementById('f-codigo').value.trim();
    const nombre = document.getElementById('f-nombre').value.trim();
    const identificacion = document.getElementById('f-identificacion').value.trim();
    const observaciones = document.getElementById('f-observaciones').value.trim();
    const categoria = document.getElementById('f-categoria').value;
    const territorio = document.getElementById('f-territorio').value;
    const activa = document.getElementById('f-activa').value;
    if (codigo) params.set('codigo', codigo);
    if (nombre) params.set('nombre', nombre);
    if (identificacion) params.set('identificacion_numero', identificacion);
    if (observaciones) params.set('observaciones', observaciones);
    if (categoria) params.set('categoria_cliente_id', categoria);
    if (territorio) params.set('territorio_id', territorio);
    if (activa) params.set('activa', activa);
    return params.toString();
  }

async function cargar(){
    tbody.innerHTML = `<tr><td colspan="14" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    emptyState.style.display = 'none';
    try{
      REGISTROS = await llamarApi(`${API_CLIENTES}?${construirQuery()}`);
      if (REGISTROS.length === 0){
        tbody.innerHTML = '';
        emptyState.style.display = 'block';
      } else {
        tbody.innerHTML = REGISTROS.map(filaHtml).join('');
      }
      footNote.textContent = `${REGISTROS.length} cliente${REGISTROS.length === 1 ? '' : 's'}`;
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="14" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      footNote.textContent = '';
    }
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'bloquear'){
      const motivo = window.prompt(`¿Por qué se bloquea a "${registro.nombre}" para crédito? (sigue pudiendo comprar de contado)`);
      if (motivo === null) return;
      if (!motivo.trim()){ await modalAlert('El motivo del bloqueo es obligatorio.'); return; }
      try{
        await llamarApi(`${API_CLIENTES}/${id}/bloquear`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({motivo_bloqueo: motivo.trim(), bloqueado_por: USUARIO_ACTUAL})});
        mostrarToast('✓ Cliente bloqueado para crédito');
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo bloquear');
      }
    }
    if (accion === 'desbloquear'){
      const ok = await modalConfirm(`¿Desbloquear a "${registro.nombre}"? Motivo actual: "${registro.motivo_bloqueo || ''}"`, 'Desbloquear cliente', 'primary', 'Desbloquear');
      if (!ok) return;
      try{
        await llamarApi(`${API_CLIENTES}/${id}/desbloquear`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({desbloqueado_por: USUARIO_ACTUAL})});
        mostrarToast('✓ Cliente desbloqueado');
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo desbloquear');
      }
    }
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar el cliente "${registro.nombre}"? Si tiene facturas u otros registros asociados, no se podrá eliminar y se sugerirá desactivarlo en su lugar.`,
        'Eliminar cliente', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${API_CLIENTES}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

['f-codigo','f-nombre','f-identificacion','f-observaciones'].forEach(id=>{
    document.getElementById(id).addEventListener('input', ()=>{
      clearTimeout(window.__debounceCL);
      window.__debounceCL = setTimeout(cargar, 350);
    });
  });
  document.getElementById('f-categoria').addEventListener('change', cargar);
  document.getElementById('f-territorio').addEventListener('change', cargar);
  document.getElementById('f-activa').addEventListener('change', cargar);

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

// ---------------- Importar Excel ----------------
  const importarOverlay = document.getElementById('importar-overlay');
  const importarArchivo = document.getElementById('importar-archivo');
  const importarConfirmar = document.getElementById('importar-confirmar');
  const importarPasoNota = document.getElementById('importar-paso-nota');
  const importarPasoResultado = document.getElementById('importar-paso-resultado');

importarConfirmar.addEventListener('click', async ()=>{
    const archivo = importarArchivo.files[0];
    if (!archivo) return;
    const textoOriginal = importarConfirmar.textContent;
    importarConfirmar.disabled = true;
    importarConfirmar.textContent = 'Importando…';
    try{
      const formData = new FormData();
      formData.append('archivo', archivo);
      const resp = await fetch(`${API_BASE}${API_CLIENTES}/importar`, {method:'POST', body: formData});
      if (!resp.ok){
        let detalle = `El servidor respondió ${resp.status}`;
        try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
        throw new Error(detalle);
      }
      const resultado = await resp.json();
      importarPasoNota.style.display = 'none';
      importarPasoResultado.style.display = '';
      document.getElementById('importar-resumen').innerHTML =
        `De <b>${resultado.total_filas}</b> filas del archivo: <b>${resultado.importados}</b> clientes nuevos creados, ` +
        `<b>${resultado.omitidos_duplicados}</b> omitidos por ya existir (no se duplicó ninguno).`;
      const advertenciasEl = document.getElementById('importar-advertencias');
      if (resultado.advertencias && resultado.advertencias.length){
        advertenciasEl.innerHTML = '<b>Advertencias:</b><br>' + resultado.advertencias.map(a=>`• ${a}`).join('<br>');
      } else {
        advertenciasEl.innerHTML = '';
      }
    } catch(e){
      importarConfirmar.disabled = false;
      importarConfirmar.textContent = textoOriginal;
      await modalAlert(e.message);
      return;
    }
    importarConfirmar.textContent = textoOriginal;
  });

// Navegación a otra pantalla dentro del shell unificado (ver nota en catalogo_ui_template.html);
  // fuera del shell (doble clic) hace navegación normal por el href.
  document.querySelectorAll('[data-nav-shell]').forEach(enlace=>{
    enlace.addEventListener('click', (ev)=>{
      if (window.parent === window){ return; }
      ev.preventDefault();
      window.parent.postMessage({tipo:'fenix-nav', destino: enlace.dataset.navShell}, '*');
    });
  });

(async function iniciar(){
    try{
      await Promise.all([cargarListas(), cargarCatalogoUbicacion()]);
    } catch(e){
      await modalAlert(e.message, 'No se pudieron cargar categorías, territorios o el catálogo de ubicación');
    }
    document.getElementById('f-codigo').focus();
    await cargar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Facturas por Cobrar</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1100px; margin:0 auto; padding:28px 24px 64px;}

/* Buscador propio de cliente: con miles de clientes importados, un <select> nativo
     es impráctico (no se puede buscar, solo scrollear). Mismo patrón que el buscador
     de cuentas de asientos_ui.html -- texto libre, resalta la coincidencia, usa la
     identificación como contexto para desambiguar nombres repetidos. */
  .field .cliente-picker{position:relative; min-width:220px;}
  .cliente-picker input{width:100%;}
  .cliente-sugerencias{
    display:none; position:fixed; background:var(--surface); border:1px solid var(--line-strong);
    border-radius:9px; box-shadow:var(--shadow); max-height:320px; overflow-y:auto; z-index:250;
  }
  .cliente-sugerencias.abierta{display:block;}
  .sug-item{
    display:flex; flex-direction:column; gap:1px; padding:8px 12px; cursor:pointer;
    border-bottom:1px solid var(--line);
  }
  .sug-item:last-child{border-bottom:none;}
  .sug-item:hover, .sug-item.activa{background:var(--accent-soft);}
  .sug-nombre{font-size:13.5px; color:var(--ink);}
  .sug-nombre mark{background:transparent; color:var(--accent); font-weight:700; padding:0;}
  .sug-meta{font-size:11px; color:var(--ink-muted);}
  .sug-vacio{padding:14px 12px; font-size:13px; color:var(--ink-muted); text-align:center;}
  .sug-mas{padding:7px 12px; font-size:11.5px; color:var(--ink-muted); text-align:center; border-top:1px solid var(--line);}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  /* #modal-overlay (aviso/confirmacion) comparte la clase .modal-overlay con otro overlay de
     esta pantalla, mismo z-index -- si #modal-overlay aparece antes en el DOM, al abrirse los
     dos a la vez (ej. un error de guardado mientras un formulario sigue abierto) el otro overlay
     pintaba encima y el aviso quedaba oculto/inaccesible detras. Bug real reportado: "el
     Entendido no se ve". Un z-index propio, mas alto, garantiza que el aviso siempre gane sin
     importar el orden del DOM. */
  #modal-overlay{ z-index:400; }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:420px; width:100%;
  }
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}

.modal-box.form-box{max-width:460px;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input[type="text"], .form-field input[type="number"], .form-field input[type="date"], .form-field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%; font-family:inherit;
  }
  .form-field input[disabled], .form-field select[disabled]{opacity:.6; cursor:not-allowed;}
  .form-saldo{
    background:var(--surface-2); border:1px solid var(--line); border-radius:7px;
    padding:9px 11px; margin-bottom:14px; font-size:13.5px; display:flex; justify-content:space-between;
  }
  .form-saldo .val{font-weight:700;}
  .form-audit{
    font-size:12px; color:var(--ink-muted); border-top:1px solid var(--line);
    margin-top:4px; padding-top:12px; line-height:1.7;
  }

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Facturas por Cobrar</span>
    </div>
    <div class="crumbs"><b>Cuentas a Cobrar</b> / Facturas por Cobrar</div>
  </div>

<div class="filters">
    <div class="field texto">
      <label for="f-texto">Número de factura / cliente</label>
      <input type="text" id="f-texto" placeholder="ej. FA 001..., José Sánchez…" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-fecha-desde">Fecha desde</label>
      <input type="date" id="f-fecha-desde">
    </div>
    <div class="field">
      <label for="f-fecha-hasta">Fecha hasta</label>
      <input type="date" id="f-fecha-hasta">
    </div>
    <div class="field">
      <label for="f-cliente-input">Cliente</label>
      <div class="cliente-picker">
        <input type="text" id="f-cliente-input" autocomplete="off" placeholder="Todos — escriba para buscar…">
        <input type="hidden" id="f-cliente">
        <div class="cliente-sugerencias" id="f-cliente-sugerencias"></div>
      </div>
    </div>
    <div class="field">
      <label for="f-sucursal">Sucursal</label>
      <select id="f-sucursal"><option value="">Todas</option></select>
    </div>
    <div class="field">
      <label for="f-vendedor">Vendedor</label>
      <select id="f-vendedor"><option value="">Todos</option></select>
    </div>
    <div class="field">
      <label for="f-territorio">Territorio</label>
      <select id="f-territorio"><option value="">Todos</option></select>
    </div>
    <div class="field">
      <label for="f-plazo">Términos de pago</label>
      <select id="f-plazo"><option value="">Todos</option></select>
    </div>
    <div class="field">
      <label for="f-pendientes">Saldo</label>
      <select id="f-pendientes">
        <option value="">Todas</option>
        <option value="true">Solo con saldo pendiente</option>
      </select>
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-ghost no-print" id="btn-excel">📊 Exportar a Excel</button>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nueva</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Número de factura</th>
          <th>Cliente</th>
          <th>Sucursal</th>
          <th>Fecha</th>
          <th class="num">Monto</th>
          <th class="num">Saldo pendiente</th>
          <th>Origen</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay facturas con estos filtros</b>
      Ajusta los filtros, o límpialos para ver todas, o crea la primera con "+ Nueva".
    </div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div class="form-field">
      <label for="form-numero">Número de factura</label>
      <input type="text" id="form-numero">
    </div>
    <div class="form-field">
      <label for="form-cliente">Cliente</label>
      <select id="form-cliente"></select>
    </div>
    <div class="form-field">
      <label for="form-sucursal">Sucursal</label>
      <select id="form-sucursal"></select>
    </div>
    <div class="form-field">
      <label for="form-vendedor">Vendedor</label>
      <select id="form-vendedor"></select>
    </div>
    <div class="form-field">
      <label for="form-fecha">Fecha</label>
      <input type="date" id="form-fecha">
    </div>
    <div class="form-field">
      <label for="form-moneda">Moneda</label>
      <select id="form-moneda">
        <option value="CRC">CRC</option>
        <option value="USD">USD</option>
      </select>
    </div>
    <div class="form-field">
      <label for="form-monto">Monto</label>
      <input type="number" id="form-monto" min="0.01" step="0.01">
    </div>
    <div class="form-saldo" id="form-saldo-box" style="display:none;">
      <span>Saldo pendiente (calculado, no editable)</span>
      <span class="val mono" id="form-saldo-valor"></span>
    </div>
    <div class="form-audit" id="form-audit" style="display:none;"></div>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="form-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="form-guardar">Guardar</button>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>
<script>
(function(){
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador'; // no hay sesión/login todavía -- placeholder de trazabilidad
  const API_FACTURAS = '/cxc/facturas';
  const API_CLIENTES = '/ventas/clientes';
  const API_SUCURSALES = '/sucursales';
  const API_VENDEDORES = '/vendedores';
  const API_TERRITORIOS = '/ventas/territorios';
  let SUCURSAL_ACTUAL = null; // recibida del shell por postMessage (fenix-sucursal), ver más abajo

// ---------------- Clientes y Sucursales ----------------
  let CLIENTES = [], SUCURSALES = [];
  async function cargarClientes(){
    CLIENTES = await llamarApi(`${API_CLIENTES}?activa=true`);
    document.getElementById('form-cliente').innerHTML = CLIENTES.map(c=>`<option value="${c.id}">${c.nombre}</option>`).join('');
  }

// Buscador propio del filtro de cliente: con miles de clientes importados, un <select>
  // nativo es impráctico. Coincide en cualquier parte del nombre o de la identificación,
  // no solo al inicio -- mismo patrón que el buscador de cuentas en asientos_ui.html.
  function wireClienteFiltro(){
    const input = document.getElementById('f-cliente-input');
    const oculto = document.getElementById('f-cliente');
    const caja = document.getElementById('f-cliente-sugerencias');

function buscar(){
      const q = input.value.trim();
      oculto.value = '';
      if (q.length < 2){ cerrar(); return; }
      const ql = q.toUpperCase();
      const todos = CLIENTES.filter(c => c.nombre.toUpperCase().includes(ql) || (c.identificacion_numero||'').includes(q))
        .sort((a,b)=> a.nombre.localeCompare(b.nombre, 'es'));

posicionar();

if (todos.length === 0){
        caja.innerHTML = `<div class="sug-vacio">Ningún cliente contiene "${q}"</div>`;
        caja.classList.add('abierta');
        return;
      }

caja.querySelectorAll('.sug-item').forEach(item=>{
        item.addEventListener('mousedown', e=>{
          e.preventDefault();
          input.value = item.dataset.nombre;
          oculto.value = item.dataset.id;
          cerrar();
          cargar();
        });
      });
    }

input.addEventListener('input', ()=>{
      buscar();
      clearTimeout(window.__debounceFC);
      window.__debounceFC = setTimeout(cargar, 350);
    });
    input.addEventListener('focus', ()=>{ if (input.value.trim().length>=2 && !oculto.value) buscar(); });
    // Si el usuario escribe pero nunca elige una sugerencia real, el campo queda con texto
    // "huérfano" que se ve lleno aunque el filtro sigue vacío -- al salir sin elegir, se limpia.
    input.addEventListener('blur', ()=> setTimeout(()=>{ cerrar(); if (!oculto.value) input.value = ''; }, 150));
    input.addEventListener('keydown', e=>{ if (e.key === 'Escape') cerrar(); });
  }
  async function cargarSucursales(){
    SUCURSALES = await llamarApi(`${API_SUCURSALES}?activa=true`);
    const opciones = SUCURSALES.map(s=>`<option value="${s.id}">${s.nombre}</option>`).join('');
    document.getElementById('f-sucursal').innerHTML = '<option value="">Todas</option>' + opciones;
    document.getElementById('form-sucursal').innerHTML = opciones;
  }

function ponerSoloLectura(soloLectura){
    [formNumero, formCliente, formSucursal, formVendedor, formFecha, formMoneda, formMonto].forEach(c => c.disabled = soloLectura);
  }

let formModo = 'nuevo';
  let formIdEditando = null;

function abrirFormulario(modo, registro){
    formModo = modo;
    formIdEditando = registro ? registro.id : null;

formNumero.value = registro ? registro.numero_factura : '';
    formCliente.value = registro ? String(registro.cliente_id) : (CLIENTES[0] ? String(CLIENTES[0].id) : '');
    formSucursal.value = registro ? String(registro.sucursal_id) : (SUCURSAL_ACTUAL ? String(SUCURSAL_ACTUAL.id) : (SUCURSALES[0] ? String(SUCURSALES[0].id) : ''));
    formVendedor.value = registro && registro.vendedor_id ? String(registro.vendedor_id) : '';
    formFecha.value = registro ? registro.fecha : new Date().toLocaleDateString('sv-SE');
    formMoneda.value = registro ? registro.moneda : 'CRC';
    formMonto.value = registro ? registro.monto : '';

if (registro){
      formSaldoBox.style.display = '';
      formSaldoValor.textContent = formatearMonto(registro.saldo_pendiente, registro.moneda);
    } else {
      formSaldoBox.style.display = 'none';
    }

if (modo === 'ver'){
      formTitulo.textContent = 'Ver — Factura por Cobrar';
      ponerSoloLectura(true);
      formGuardar.style.display = 'none';
      formCancelar.textContent = 'Cerrar';
    } else {
      formTitulo.textContent = modo === 'nuevo' ? 'Nueva — Factura por Cobrar' : 'Modificar — Factura por Cobrar';
      ponerSoloLectura(false);
      formGuardar.style.display = '';
      formCancelar.textContent = 'Cancelar';
    }

if (registro){
      formAudit.style.display = '';
      formAudit.innerHTML = `Creado por <b>${registro.creado_por}</b> el ${formatearFechaHora(registro.creado_en)}`
        + (registro.modificado_por ? `<br>Modificado por <b>${registro.modificado_por}</b> el ${formatearFechaHora(registro.modificado_en)}` : '')
        + (registro.asiento_id ? `<br>Con asiento contable #${registro.asiento_id}` : `<br><i>Sin asiento contable -- factura migrada/registrada manualmente</i>`);
    } else {
      formAudit.style.display = 'none';
    }

formOverlay.classList.add('abierto');
    setTimeout(()=> { if (modo !== 'ver') formNumero.focus(); }, 30);
  }
  function cerrarFormulario(){ formOverlay.classList.remove('abierto'); }
  formCancelar.onclick = cerrarFormulario;
  document.addEventListener('keydown', e=>{ if (e.key === 'Escape' && formOverlay.classList.contains('abierto')) cerrarFormulario(); });

formGuardar.onclick = async ()=>{
    const numero_factura = formNumero.value.trim();
    if (!numero_factura){ await modalAlert('El número de factura es obligatorio.'); formNumero.focus(); return; }
    if (!formCliente.value){ await modalAlert('Debe elegir un cliente.'); formCliente.focus(); return; }
    if (!formSucursal.value){ await modalAlert('Debe elegir una sucursal.'); formSucursal.focus(); return; }
    if (!formFecha.value){ await modalAlert('La fecha es obligatoria.'); formFecha.focus(); return; }
    const monto = Number(formMonto.value);
    if (!monto || monto <= 0){ await modalAlert('El monto debe ser mayor a cero.'); formMonto.focus(); return; }

function filaHtml(r){
    const saldo = Number(r.saldo_pendiente);
    return `
      <tr data-id="${r.id}">
        <td>
          <div class="row-actions">
            <button class="icon-btn" title="Ver" data-accion="ver" data-id="${r.id}">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z"/><circle cx="12" cy="12" r="3"/></svg></button>
            <button class="icon-btn" title="Modificar" data-accion="modificar" data-id="${r.id}">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg></button>
            <button class="icon-btn danger" title="Eliminar" data-accion="eliminar" data-id="${r.id}">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6h16Z"/></svg></button>
          </div>
        </td>
        <td class="mono">${r.numero_factura}</td>
        <td>${r.cliente_nombre}</td>
        <td class="muted-cell">${r.sucursal_nombre}</td>
        <td class="muted-cell">${formatearFecha(r.fecha)}</td>
        <td class="num mono">${formatearMonto(r.monto, r.moneda)}</td>
        <td class="num mono ${saldo < 0.01 ? 'saldo-cero' : ''}">${formatearMonto(r.saldo_pendiente, r.moneda)}</td>
        <td>${pillSaldo(r)}</td>
      </tr>
    `;
  }

async function cargar(){
    tbody.innerHTML = `<tr><td colspan="8" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    emptyState.style.display = 'none';
    try{
      REGISTROS = await llamarApi(`${API_FACTURAS}?${construirQuery()}`);
      if (REGISTROS.length === 0){
        tbody.innerHTML = '';
        emptyState.style.display = 'block';
      } else {
        tbody.innerHTML = REGISTROS.map(filaHtml).join('');
      }
      footNote.textContent = `${REGISTROS.length} factura${REGISTROS.length === 1 ? '' : 's'}`;
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="8" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      footNote.textContent = '';
    }
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar la factura ${registro.numero_factura} (${registro.cliente_nombre})? Si ya tiene cobros aplicados, no se podrá eliminar.`,
        'Eliminar factura', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${API_FACTURAS}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

document.getElementById('f-texto').addEventListener('input', ()=>{
    clearTimeout(window.__debounceFC);
    window.__debounceFC = setTimeout(cargar, 350);
  });
  ['f-fecha-desde','f-fecha-hasta','f-sucursal','f-vendedor','f-territorio','f-plazo','f-pendientes'].forEach(id=>{
    document.getElementById(id).addEventListener('change', cargar);
  });

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

// Sucursal en la que se está trabajando (docs/diseno-cxc.md Capítulo 6): el shell la
  // conoce (se elige al entrar a Fénix) y la envía por postMessage a cada pantalla
  // embebida -- aquí se usa como valor por defecto del filtro y del formulario "+ Nueva",
  // nunca como una restricción fija (el usuario sigue pudiendo ver otras sucursales).
  // Fuera del shell (pantalla abierta suelta) simplemente no llega el mensaje y no pasa nada.
  window.addEventListener('message', (ev)=>{
    if (!ev.data || ev.data.tipo !== 'fenix-sucursal') return;
    SUCURSAL_ACTUAL = {id: ev.data.sucursal_id, nombre: ev.data.sucursal_nombre};
    const fSucursal = document.getElementById('f-sucursal');
    if (fSucursal && !fSucursal.value) { fSucursal.value = String(SUCURSAL_ACTUAL.id); cargar(); }
  });

(async function iniciar(){
    try{
      await Promise.all([cargarClientes(), cargarSucursales(), cargarVendedores(), cargarTerritorios(), cargarPlazos()]);
    } catch(e){
      await modalAlert(e.message, 'No se pudieron cargar los catálogos (clientes, sucursales, vendedores, territorios o términos de pago)');
    }
    wireClienteFiltro();
    document.getElementById('f-texto').focus();
    await cargar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Cobro a Cliente</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1120px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:180px;}
  .field.chico input{width:110px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.pill{
    display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 8px;
    border-radius:99px; font-size:11.5px; font-weight:700; letter-spacing:.02em;
    border:1px solid transparent; white-space:nowrap;
  }
  .pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
  .pill-aplicado{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
  .pill-pendiente{background:var(--amber-bg); color:var(--amber-ink); border-color:var(--amber-line);}
  .pill-anulado{background:var(--grey-bg); color:var(--grey-ink); border-color:var(--line-strong);}
  .pill-incompleto{background:var(--red-bg); color:var(--red-ink); border-color:var(--red-line);}

.registro-overlay{display:none; position:fixed; inset:0; background:var(--bg); z-index:250; overflow-y:auto;}
  .registro-overlay.abierto{display:block;}
  .registro-wrap{max-width:920px; margin:0 auto; padding:28px 24px 80px;}
  .registro-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
  .seccion{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:18px 20px; margin-bottom:16px; box-shadow:var(--shadow);
  }
  .seccion h3{font-size:15px; margin-bottom:14px;}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input[type="text"], .form-field input[type="number"], .form-field input[type="date"], .form-field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%; font-family:inherit;
  }
  .form-field input[disabled]{opacity:.6;}

.cliente-picker{position:relative;}
  .cliente-sugerencias{
    display:none; position:fixed; background:var(--surface); border:1px solid var(--line-strong);
    border-radius:9px; box-shadow:var(--shadow); max-height:260px; overflow-y:auto; z-index:400;
  }
  .cliente-sugerencias.abierta{display:block;}
  .sug-item{padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--line); font-size:13.5px;}
  .sug-item:last-child{border-bottom:none;}
  .sug-item:hover{background:var(--accent-soft);}
  .sug-vacio{padding:14px 12px; font-size:13px; color:var(--ink-muted); text-align:center;}
  .cliente-elegido{
    display:none; align-items:center; justify-content:space-between; gap:10px;
    background:var(--accent-soft); border:1px solid var(--accent); border-radius:7px;
    padding:9px 12px; font-size:13.5px; margin-bottom:14px;
  }
  .cliente-elegido.visible{display:flex;}
  .cliente-elegido .cambiar{
    background:none; border:none; color:var(--accent); font-weight:600; cursor:pointer; padding:0;
    font-size:12px; text-decoration:underline; font-family:inherit; white-space:nowrap;
  }
  .cliente-fijo{
    background:var(--surface-2); border:1px solid var(--line); border-radius:7px;
    padding:9px 12px; font-size:13.5px; margin-bottom:14px; font-weight:600;
  }

.caja-estado{
    display:flex; align-items:center; gap:8px; border-radius:7px; padding:9px 12px;
    font-size:13px; margin-bottom:14px; border:1px solid var(--line);
    background:var(--surface-2); color:var(--ink-muted);
  }
  .caja-estado.ok{background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600;}
  .caja-estado.falta{background:var(--red-bg); border-color:var(--red-line); color:var(--red-ink); font-weight:600;}

.facturas-table{width:100%; border-collapse:collapse; font-size:13.5px;}
  .facturas-table th{text-align:left; font-size:11px; text-transform:uppercase; color:var(--ink-muted); padding:8px 10px; border-bottom:1px solid var(--line-strong);}
  .facturas-table th.num, .facturas-table td.num{text-align:right;}
  .facturas-table td{padding:8px 10px; border-bottom:1px solid var(--line);}
  .facturas-table input[type="number"]{
    width:120px; background:var(--bg); border:1px solid var(--line-strong); border-radius:6px;
    padding:5px 8px; color:var(--ink); font-size:13px; text-align:right; font-family:inherit;
  }
  .facturas-table .icon-btn{width:26px; height:26px;}
  .facturas-vacio{padding:20px; text-align:center; color:var(--ink-muted); font-size:13.5px;}

.totales-box{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
    padding:12px 16px; margin-top:14px; font-size:14px;
  }
  .totales-box .desc{color:var(--ink-muted); font-size:12.5px;}
  .totales-box .num{font-size:17px; font-weight:700;}
  .totales-box.descuadrado{border-color:var(--red-line); background:var(--red-bg);}
  .totales-box.descuadrado .num{color:var(--red-ink);}
  .totales-box.cuadrado{border-color:var(--accent); background:var(--accent-soft);}
  .totales-box.cuadrado .num{color:var(--accent);}
  .totales-box.pendiente{border-color:var(--amber-line); background:var(--amber-bg);}
  .totales-box.pendiente .num{color:var(--amber-ink);}

.creditos-disponibles{display:none; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px;}
  .creditos-disponibles.visible{display:flex;}
  .creditos-titulo{font-size:12px; color:var(--ink-muted); width:100%;}
  .chip-credito{
    background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent);
    border-radius:20px; padding:6px 14px; font-size:12.5px; font-weight:600; cursor:pointer;
  }
  .chip-credito:active{transform:scale(0.97);}

.medio-nota{
    font-size:12px; color:var(--ink-muted); background:var(--surface-2); border:1px solid var(--line);
    border-radius:7px; padding:8px 10px; margin-bottom:14px;
  }
  .medio-fila{
    border:1px solid var(--line-strong); border-radius:8px; padding:14px; margin-bottom:12px; background:var(--surface);
  }
  .medio-fila-header{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px;}
  .medio-fila-header select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; font-weight:600;
  }
  .medio-campos{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
  .medio-campos.una-columna{grid-template-columns:1fr;}
  .medio-campos .form-field{margin-bottom:0;}
  .medio-campos + .form-field{margin-top:12px;}

.registro-acciones{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}

.reporte-overlay{display:none; position:fixed; inset:0; background:var(--bg); z-index:250; overflow-y:auto;}
  .reporte-overlay.abierto{display:block;}
  .reporte-wrap{max-width:800px; margin:0 auto; padding:28px 24px 80px;}
  .reporte-acciones{display:flex; justify-content:flex-end; gap:10px; margin-bottom:20px; flex-wrap:wrap;}
  .rpt-header{display:flex; justify-content:space-between; margin-bottom:18px; padding-bottom:14px; border-bottom:2px solid var(--ink);}
  .rpt-numero{font-size:22px; font-weight:700; color:var(--red-ink);}
  .rpt-tercero{margin-bottom:8px; font-size:14.5px;}
  .rpt-suma{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
  .rpt-suma .caja{background:var(--surface-2); border:1px solid var(--line-strong); border-radius:7px; padding:6px 12px; font-weight:700;}
  .rpt-table{width:100%; border-collapse:collapse; font-size:13px; margin-bottom:16px;}
  .rpt-table th{background:var(--accent); color:var(--accent-ink); text-align:left; padding:8px 10px; font-size:11px; text-transform:uppercase;}
  .rpt-table th.num, .rpt-table td.num{text-align:right;}
  .rpt-table td{padding:7px 10px; border-bottom:1px solid var(--line);}
  .rpt-medios h3{font-size:13px; margin-bottom:8px;}
  .rpt-medios table{width:100%; border-collapse:collapse; font-size:12.5px;}
  .rpt-medios th, .rpt-medios td{border:1px solid var(--line); padding:6px 9px;}

@media print{
    @page{ margin: 1.5cm; }
    body{background:#fff; color:#000;}
    .app{display:none !important;}
    .reporte-acciones, .no-print, .topbar .crumbs, .filters, .row-actions{display:none !important;}
    .reporte-overlay{position:static; background:#fff;}
    .rpt-table th{background:none !important; color:#000 !important; border-bottom:2px solid #000;}
  }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Cobro a Cliente</span>
    </div>
    <div class="crumbs"><b>Cuentas a Cobrar</b> / Cobros</div>
  </div>

<div class="filters">
    <div class="field">
      <label for="f-fecha-desde">Fecha desde</label>
      <input type="date" id="f-fecha-desde">
    </div>
    <div class="field">
      <label for="f-fecha-hasta">Fecha hasta</label>
      <input type="date" id="f-fecha-hasta">
    </div>
    <div class="field texto">
      <label for="f-cliente">Cliente</label>
      <select id="f-cliente"><option value="">Todos</option></select>
    </div>
    <div class="field">
      <label for="f-sucursal">Sucursal</label>
      <select id="f-sucursal"><option value="">Todas</option></select>
    </div>
    <div class="field">
      <label for="f-estado">Estado</label>
      <select id="f-estado">
        <option value="">Todos</option>
        <option value="Pendiente">Pendiente</option>
        <option value="Aplicado">Aplicado</option>
        <option value="Anulado">Anulado</option>
      </select>
    </div>
    <div class="field chico">
      <label for="f-monto-desde">Monto desde</label>
      <input type="number" id="f-monto-desde" min="0" step="0.01">
    </div>
    <div class="field chico">
      <label for="f-monto-hasta">Monto hasta</label>
      <input type="number" id="f-monto-hasta" min="0" step="0.01">
    </div>
    <div class="field texto">
      <label for="f-factura">Factura cobrada</label>
      <input type="text" id="f-factura" placeholder="Número de factura…">
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-ghost no-print" id="btn-excel">📊 Exportar a Excel</button>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nuevo Cobro</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Número</th>
          <th>Cliente</th>
          <th>Sucursal</th>
          <th>Fecha</th>
          <th class="num">Monto</th>
          <th>Asiento</th>
          <th>Estado</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay cobros con estos filtros</b>
      Ajusta los filtros, o límpialos para ver todos, o crea el primero con "+ Nuevo Cobro".
    </div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div class="registro-overlay" id="registro-overlay">
  <div class="registro-wrap">
    <div class="registro-header">
      <h2>PROGRAMAR COBRO A CLIENTE</h2>
      <button class="btn btn-ghost" id="btn-cerrar-registro">✕ Cerrar</button>
    </div>

<div class="seccion">
      <h3>Cobro a cliente</h3>
      <div class="form-grid">
        <div class="form-field">
          <label for="reg-fecha">Fecha</label>
          <input type="date" id="reg-fecha">
        </div>
        <div class="form-field">
          <label for="reg-moneda">Moneda</label>
          <select id="reg-moneda">
            <option value="CRC">CRC</option>
            <option value="USD">USD</option>
          </select>
        </div>
      </div>
      <div class="caja-estado" id="caja-estado">Verificando caja abierta…</div>
      <div class="form-field">
        <label for="cliente-input">Cliente</label>
        <div class="cliente-picker">
          <input id="cliente-input" type="text" autocomplete="off" placeholder="Escriba para buscar un cliente…">
          <div class="cliente-sugerencias" id="cliente-sugerencias"></div>
        </div>
        <div class="cliente-elegido" id="cliente-elegido-box">
          <span id="cliente-elegido-nombre"></span>
          <button class="cambiar" id="cambiar-cliente">Cambiar</button>
        </div>
      </div>
      <div class="form-field">
        <label for="reg-observaciones">Observaciones</label>
        <input type="text" id="reg-observaciones" placeholder="ej. Comprobante 1254689 cliente XXX facturas 125466, 646466">
      </div>
    </div>

<div class="seccion" id="seccion-facturas" style="display:none;">
      <h3>Cuentas por cobrar</h3>
      <table class="facturas-table">
        <thead>
          <tr>
            <th></th>
            <th>Documento</th>
            <th>Fecha</th>
            <th class="num">Total</th>
            <th class="num">Saldo</th>
            <th class="num">Monto a cobrar</th>
          </tr>
        </thead>
        <tbody id="tbody-facturas-pago"></tbody>
      </table>
      <div class="facturas-vacio" id="facturas-vacio" style="display:none;">Este cliente no tiene facturas con saldo pendiente.</div>
      <div class="totales-box" id="totales-box">
        <span class="desc">Monto a cobrar (suma de facturas elegidas)</span>
        <span class="num mono" id="totales-valor">0,00</span>
      </div>
    </div>

<div class="registro-acciones">
      <button class="btn btn-ghost" id="btn-cancelar-registro">Cancelar</button>
      <button class="btn btn-primary" id="btn-registrar-pago">Programar cobro</button>
    </div>
  </div>
</div>

<div class="registro-overlay" id="completar-overlay">
  <div class="registro-wrap">
    <div class="registro-header">
      <h2>COMPLETAR COBRO <span class="mono" id="completar-numero"></span></h2>
      <button class="btn btn-ghost" id="btn-cerrar-completar">✕ Cerrar</button>
    </div>

<div class="seccion">
      <h3>Cliente</h3>
      <div class="cliente-fijo" id="completar-cliente-nombre"></div>
    </div>

<div class="seccion">
      <h3>Cuentas por cobrar</h3>
      <table class="facturas-table">
        <thead>
          <tr>
            <th></th>
            <th>Documento</th>
            <th>Fecha</th>
            <th class="num">Total</th>
            <th class="num">Saldo</th>
            <th class="num">Monto a cobrar</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="tbody-facturas-completar"></tbody>
      </table>
      <div class="facturas-vacio" id="facturas-vacio-completar" style="display:none;">Este cliente no tiene más facturas con saldo pendiente.</div>
      <div class="totales-box" id="totales-box-completar">
        <span class="desc">Monto a cobrar (suma de facturas elegidas)</span>
        <span class="num mono" id="totales-valor-completar">0,00</span>
      </div>
    </div>

<div class="seccion">
      <h3>Medios de pago</h3>
      <div class="medio-nota">Transferencia necesita que el banco ya haya ejecutado el movimiento y dado el
        comprobante. Anticipo y Nota de Crédito consumen el saldo disponible de ese cliente -- ambos solo
        en colones. El cobro sigue Pendiente después de guardar; solo queda habilitado para Aplicar.</div>

<div id="medios-lista"></div>
      <button class="btn btn-ghost" id="btn-agregar-medio" type="button">+ Agregar medio de pago</button>

<div class="form-field" id="completar-tipo-cambio-field" style="display:none; margin-top:14px;">
        <label for="completar-tipo-cambio">Tipo de cambio del día de cobro</label>
        <input type="number" id="completar-tipo-cambio" min="0.000001" step="0.000001" placeholder="El oficial del día del comprobante">
      </div>

<div class="totales-box" id="cuadre-box-completar">
        <span class="desc" id="cuadre-desc-completar">Saldo por cobrar</span>
        <span class="num mono" id="cuadre-valor-completar">0,00</span>
      </div>
    </div>

<div class="registro-acciones">
      <button class="btn btn-ghost" id="btn-cancelar-completar">Cancelar</button>
      <button class="btn btn-primary" id="btn-guardar-completar">Guardar</button>
    </div>
  </div>
</div>

<div class="reporte-overlay" id="reporte-overlay">
  <div class="reporte-wrap">
    <div class="reporte-acciones">
      <button class="btn btn-ghost" id="btn-excel-recibo">📊 Exportar a Excel</button>
      <button class="btn btn-ghost" id="btn-pdf-recibo">📄 Exportar a PDF</button>
      <button class="btn btn-ghost" id="btn-imprimir-recibo">🖨 Imprimir</button>
      <button class="btn btn-ghost" id="btn-correo-recibo" disabled title="Disponible cuando exista el conector de correo">✉ Enviar por correo</button>
      <button class="btn btn-primary" id="btn-cerrar-recibo">✕ Cerrar</button>
    </div>

<div class="rpt-header">
      <div>
        <div style="font-weight:700; font-size:15px;" id="rpt-empresa"></div>
        <div class="muted-cell" id="rpt-sucursal"></div>
      </div>
      <div style="text-align:right;">
        <div>Recibo de Cobro</div>
        <div class="rpt-numero" id="rpt-numero"></div>
        <div class="muted-cell" id="rpt-fecha"></div>
      </div>
    </div>

<div class="rpt-tercero">Se ha recibido un cobro de: <b id="rpt-cliente"></b></div>
    <div class="rpt-suma">
      <span>La suma de: <b id="rpt-letras"></b></span>
      <span class="caja mono" id="rpt-total"></span>
    </div>

<table class="rpt-table">
      <thead>
        <tr>
          <th>Cuenta por cobrar</th>
          <th>Detalle</th>
          <th class="num">Diferencial Cambiario</th>
          <th class="num">Monto cobrado</th>
          <th class="num">Saldo actual</th>
        </tr>
      </thead>
      <tbody id="rpt-tbody"></tbody>
    </table>

<div class="rpt-medios">
      <h3>Medios de pago</h3>
      <table>
        <thead><tr><th>Tipo</th><th>Monto</th><th>Comprobante</th><th>Banco / Cuenta</th></tr></thead>
        <tbody id="rpt-medios-tbody"></tbody>
      </table>
    </div>
  </div>
</div>

async function llamarApi(path, opciones){
    let resp;
    try{ resp = await fetch(`${API_BASE}${path}`, opciones); }
    catch(e){ throw new Error('No se pudo conectar al backend (¿está corriendo uvicorn?)'); }
    if (!resp.ok){
      let detalle = `El servidor respondió ${resp.status}`;
      try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
      throw new Error(detalle);
    }
    if (resp.status === 204) return null;
    return resp.json();
  }
  function formatearMonto(v){ return Number(v||0).toLocaleString('es-CR', {minimumFractionDigits:2, maximumFractionDigits:2}); }
  function formatearFecha(iso){
    if (!iso) return '—';
    const [a,m,d] = iso.split('-');
    return `${d}/${m}/${a}`;
  }
  function formatearFechaHora(iso){
    const d = new Date(iso);
    const pad = n => String(n).padStart(2,'0');
    let horas = d.getHours();
    const ampm = horas >= 12 ? 'p.m.' : 'a.m.';
    horas = horas % 12 || 12;
    return `${pad(d.getDate())}/${pad(d.getMonth()+1)}/${d.getFullYear()} ${horas}:${pad(d.getMinutes())} ${ampm}`;
  }

// ---------------- Etapa 1: Programar cobro ----------------
  let clienteElegido = null;
  const clienteInput = document.getElementById('cliente-input');
  const clienteCaja = document.getElementById('cliente-sugerencias');
  const clienteElegidoBox = document.getElementById('cliente-elegido-box');

// Gate "requiere caja abierta" (docs/diseno-cajas.md, RF-CAJ-007/008): se recarga cada vez que
  // se abre el formulario (no en cargarCatalogos general) porque el estado de caja cambia todo el
  // día. Un usuario no puede tener más de una caja Abierta a la vez, así que se detecta sola por
  // usuario_apertura -- no hay que elegirla (el backend hace la misma detección y la exige).
  let CAJA_ABIERTA_ID = null;
  async function verificarCajaAbierta(){
    const banner = document.getElementById('caja-estado');
    CAJA_ABIERTA_ID = null;
    banner.className = 'caja-estado';
    banner.textContent = 'Verificando caja abierta…';
    if (!SUCURSAL_ACTUAL) return;
    try{
      const cajas = await llamarApi(`/ventas/cajas?sucursal_id=${SUCURSAL_ACTUAL.id}&estado=Abierta`);
      const propia = cajas.find(c => c.usuario_apertura === USUARIO_ACTUAL);
      if (propia){
        CAJA_ABIERTA_ID = propia.id;
        banner.className = 'caja-estado ok';
        banner.textContent = `Caja abierta: Caja ${propia.numero} — ${propia.terminal}`;
      } else {
        banner.className = 'caja-estado falta';
        banner.textContent = `${USUARIO_ACTUAL} no tiene una caja abierta en esta sucursal -- abra una caja antes de registrar un cobro.`;
      }
    } catch(e){
      banner.className = 'caja-estado falta';
      banner.textContent = 'No se pudo verificar el estado de caja.';
    }
  }

const registroOverlay = document.getElementById('registro-overlay');
  function abrirRegistro(){
    limpiarCliente();
    document.getElementById('reg-fecha').value = new Date().toLocaleDateString('sv-SE');
    document.getElementById('reg-moneda').value = 'CRC';
    document.getElementById('reg-observaciones').value = '';
    verificarCajaAbierta();
    registroOverlay.classList.add('abierto');
    setTimeout(()=> clienteInput.focus(), 30);
  }
  function cerrarRegistro(){ registroOverlay.classList.remove('abierto'); }
  document.getElementById('btn-nuevo').addEventListener('click', abrirRegistro);
  document.getElementById('btn-cerrar-registro').addEventListener('click', cerrarRegistro);
  document.getElementById('btn-cancelar-registro').addEventListener('click', cerrarRegistro);

const cuerpo = {
      cliente_id: clienteElegido.id,
      sucursal_id: SUCURSAL_ACTUAL.id,
      fecha: document.getElementById('reg-fecha').value,
      moneda: document.getElementById('reg-moneda').value,
      observaciones: document.getElementById('reg-observaciones').value.trim() || null,
      aplicaciones,
      creado_por: USUARIO_ACTUAL,
    };

// ---------------- Etapa 2: Completar cobro ----------------
  const completarOverlay = document.getElementById('completar-overlay');
  let pagoEnEdicion = null;

// Cada medio de pago es su propia fila -- Transferencia necesita banco/cuenta/comprobante;
  // Anticipo/NotaCredito solo necesitan elegir el documento con saldo disponible (el motor
  // real vive en el backend, docs/diseno-cxc.md Capítulo 14). `existente` es una fila de
  // `medios_pago` ya guardada (al reeditar un cobro) o null (fila nueva en blanco).
  function crearFilaMedio(existente){
    const fila = document.createElement('div');
    fila.className = 'medio-fila';
    fila.innerHTML = `
      <div class="medio-fila-header">
        <select class="medio-tipo-select">
          <option value="Transferencia">Transferencia</option>
          <option value="SINPE">SINPE</option>
          <option value="Anticipo">Anticipo</option>
          <option value="NotaCredito">Nota de Crédito</option>
          <option value="Efectivo">Efectivo (desde caja)</option>
          <option value="Tarjeta">Tarjeta (desde caja)</option>
        </select>
        <button type="button" class="icon-btn danger medio-quitar" title="Quitar">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 6 6 18M6 6l12 12"/></svg>
        </button>
      </div>
      <div class="medio-campos medio-campos-transferencia">
        <div class="form-field"><label>Banco</label><select class="medio-banco"></select></div>
        <div class="form-field"><label>Cuenta bancaria</label><select class="medio-cuenta-bancaria"></select></div>
        <div class="form-field"><label>Comprobante</label><input type="text" class="medio-comprobante" placeholder="Número de comprobante"></div>
      </div>
      <div class="medio-campos medio-campos-anticipo una-columna" style="display:none;">
        <div class="form-field"><label>Anticipo disponible</label><select class="medio-anticipo-select"></select></div>
      </div>
      <div class="medio-campos medio-campos-nota una-columna" style="display:none;">
        <div class="form-field"><label>Nota de crédito disponible</label><select class="medio-nota-select"></select></div>
      </div>
      <div class="form-field"><label>Monto</label><input type="number" class="medio-monto" min="0.01" step="0.01"></div>
    `;

const tipoSelect = fila.querySelector('.medio-tipo-select');
    const camposTransf = fila.querySelector('.medio-campos-transferencia');
    const camposAntic = fila.querySelector('.medio-campos-anticipo');
    const camposNota = fila.querySelector('.medio-campos-nota');
    const bancoSel = fila.querySelector('.medio-banco');
    const cuentaSel = fila.querySelector('.medio-cuenta-bancaria');
    const anticipoSel = fila.querySelector('.medio-anticipo-select');
    const notaSel = fila.querySelector('.medio-nota-select');
    const montoInput = fila.querySelector('.medio-monto');

bancoSel.innerHTML = BANCOS.map(b=>`<option value="${b.id}">${b.nombre}</option>`).join('');
    function pintarCuentasFila(){
      const bancoId = Number(bancoSel.value);
      const filtradas = CUENTAS_BANCARIAS.filter(cb=>cb.banco_id === bancoId && cb.moneda === pagoEnEdicion.moneda);
      cuentaSel.innerHTML = filtradas.map(cb=>`<option value="${cb.id}">${cb.numero} (${cb.moneda})</option>`).join('');
    }
    bancoSel.addEventListener('change', pintarCuentasFila);
    pintarCuentasFila();

anticipoSel.innerHTML = ANTICIPOS_DISPONIBLES.length
      ? ANTICIPOS_DISPONIBLES.map(a=>`<option value="${a.id}">#${a.numero} — disponible ${formatearMonto(a.saldo)} CRC</option>`).join('')
      : '<option value="">Este cliente no tiene anticipos disponibles</option>';
    notaSel.innerHTML = NOTAS_DISPONIBLES.length
      ? NOTAS_DISPONIBLES.map(n=>`<option value="${n.id}">#${n.numero} — disponible ${formatearMonto(n.saldo)} CRC</option>`).join('')
      : '<option value="">Este cliente no tiene notas de crédito disponibles</option>';

if (existente){
      tipoSelect.value = existente.tipo_medio_pago;
      if (existente.tipo_medio_pago === 'Transferencia' || existente.tipo_medio_pago === 'SINPE'){
        bancoSel.value = existente.banco_id;
        pintarCuentasFila();
        cuentaSel.value = existente.cuenta_bancaria_id;
        fila.querySelector('.medio-comprobante').value = existente.comprobante || '';
      } else if (existente.tipo_medio_pago === 'Anticipo'){
        // El anticipo elegido pudo haber quedado sin saldo disponible en la lista general
        // (por ejemplo, si ESTE mismo medio ya lo estaba usando) -- se agrega igual para
        // no perder la selección al reeditar.
        if (existente.anticipo_cliente_id && !ANTICIPOS_DISPONIBLES.some(a=>a.id === existente.anticipo_cliente_id)){
          anticipoSel.insertAdjacentHTML('afterbegin', `<option value="${existente.anticipo_cliente_id}">Anticipo ya elegido</option>`);
        }
        anticipoSel.value = existente.anticipo_cliente_id;
      } else if (existente.tipo_medio_pago === 'NotaCredito'){
        if (existente.nota_cliente_id && !NOTAS_DISPONIBLES.some(n=>n.id === existente.nota_cliente_id)){
          notaSel.insertAdjacentHTML('afterbegin', `<option value="${existente.nota_cliente_id}">Nota ya elegida</option>`);
        }
        notaSel.value = existente.nota_cliente_id;
      }
      montoInput.value = existente.monto;
    }
    actualizarVisibilidad();
    return fila;
  }
  document.getElementById('btn-agregar-medio').addEventListener('click', ()=>{
    document.getElementById('medios-lista').appendChild(crearFilaMedio(null));
    recalcularCuadreCompletar();
  });

async function abrirCompletar(pagoId){
    const detalle = await llamarApi(`${API_COBROS}/${pagoId}`);
    pagoEnEdicion = detalle;
    document.getElementById('completar-numero').textContent = `#${detalle.numero}`;
    document.getElementById('completar-cliente-nombre').textContent = detalle.cliente_nombre;
    document.getElementById('completar-tipo-cambio-field').style.display = detalle.moneda === 'CRC' ? 'none' : '';
    document.getElementById('completar-tipo-cambio').value = detalle.tipo_cambio && detalle.moneda !== 'CRC' ? detalle.tipo_cambio : '';

const listaMedios = document.getElementById('medios-lista');
    listaMedios.innerHTML = '';
    if (detalle.medios_pago.length > 0){
      detalle.medios_pago.forEach(m => listaMedios.appendChild(crearFilaMedio(m)));
    } else {
      listaMedios.appendChild(crearFilaMedio(null));
    }

recalcularTotalesCompletar();
    completarOverlay.classList.add('abierto');
  }
  function cerrarCompletar(){ completarOverlay.classList.remove('abierto'); pagoEnEdicion = null; }
  document.getElementById('btn-cerrar-completar').addEventListener('click', cerrarCompletar);
  document.getElementById('btn-cancelar-completar').addEventListener('click', cerrarCompletar);

// ---- Motor de medios de pago (docs/diseno-cxc.md Capítulo 17) ----
  // Muestra de forma proactiva los créditos a favor del cliente (Anticipo/Nota) y mantiene un
  // saldo por cobrar en vivo mientras el cajero va aplicando medios. Efectivo, Tarjeta y Vuelto
  // quedan fuera a propósito -- dependen de Caja (Caja General / Vouchers por Aplicar), todavía
  // en diseño con Braulio, ver memoria project-fenix-caja.
  function creditosYaUsadosEnFilas(){
    const anticipoIds = new Set(), notaIds = new Set();
    document.querySelectorAll('#medios-lista .medio-fila').forEach(fila => {
      const tipo = fila.querySelector('.medio-tipo-select').value;
      if (tipo === 'Anticipo'){
        const id = Number(fila.querySelector('.medio-anticipo-select').value);
        if (id) anticipoIds.add(id);
      } else if (tipo === 'NotaCredito'){
        const id = Number(fila.querySelector('.medio-nota-select').value);
        if (id) notaIds.add(id);
      }
    });
    return {anticipoIds, notaIds};
  }
  function renderCreditosDisponibles(){
    const cont = document.getElementById('creditos-disponibles-completar');
    const {anticipoIds, notaIds} = creditosYaUsadosEnFilas();
    const notasLibres = NOTAS_DISPONIBLES.filter(n => !notaIds.has(n.id));
    const anticiposLibres = ANTICIPOS_DISPONIBLES.filter(a => !anticipoIds.has(a.id));
    if (notasLibres.length === 0 && anticiposLibres.length === 0){
      cont.classList.remove('visible'); cont.innerHTML = ''; return;
    }
    cont.classList.add('visible');
    cont.innerHTML = '<div class="creditos-titulo">Este cliente tiene disponible:</div>'
      + notasLibres.map(n => `<button type="button" class="chip-credito" data-tipo="NotaCredito" data-id="${n.id}">Nota #${n.numero} -- ${formatearMonto(n.saldo)}</button>`).join('')
      + anticiposLibres.map(a => `<button type="button" class="chip-credito" data-tipo="Anticipo" data-id="${a.id}">Anticipo #${a.numero} -- ${formatearMonto(a.saldo)}</button>`).join('');
  }
  document.getElementById('creditos-disponibles-completar').addEventListener('click', (ev)=>{
    const btn = ev.target.closest('.chip-credito');
    if (!btn) return;
    const tipo = btn.dataset.tipo;
    const id = Number(btn.dataset.id);
    const credito = tipo === 'Anticipo' ? ANTICIPOS_DISPONIBLES.find(a=>a.id===id) : NOTAS_DISPONIBLES.find(n=>n.id===id);
    if (!credito) return;
    const totalFacturas = facturasElegidasCompletar().reduce((s,a)=> s + a.monto_aplicado, 0);
    const saldoPorCobrar = Math.max(0, Math.round((totalFacturas - totalMediosPago()) * 100) / 100);
    const monto = Math.min(Number(credito.saldo), saldoPorCobrar || Number(credito.saldo));

const fila = crearFilaMedio(null);
    document.getElementById('medios-lista').appendChild(fila);
    const tipoSelect = fila.querySelector('.medio-tipo-select');
    tipoSelect.value = tipo;
    tipoSelect.dispatchEvent(new Event('change'));
    fila.querySelector(tipo === 'Anticipo' ? '.medio-anticipo-select' : '.medio-nota-select').value = id;
    fila.querySelector('.medio-monto').value = monto.toFixed(2);
    recalcularCuadreCompletar();
    fila.querySelector('.medio-monto').focus();
  });

document.getElementById('btn-guardar-completar').addEventListener('click', async ()=>{
    const aplicaciones = facturasElegidasCompletar();
    if (aplicaciones.length === 0){ await modalAlert('Debe dejar al menos una factura aplicada.'); return; }

const filas = Array.from(document.querySelectorAll('#medios-lista .medio-fila'));
    if (filas.length === 0){ await modalAlert('Debe indicar al menos un medio de pago.'); return; }

const medios_pago = [];
    for (const fila of filas){
      const tipo = fila.querySelector('.medio-tipo-select').value;
      const monto = Number(fila.querySelector('.medio-monto').value) || 0;
      if (monto <= 0){ await modalAlert('El monto de cada medio de pago debe ser mayor a cero.'); return; }

if (tipo === 'Transferencia' || tipo === 'SINPE'){
        const bancoId = Number(fila.querySelector('.medio-banco').value);
        const cuentaBancariaId = Number(fila.querySelector('.medio-cuenta-bancaria').value);
        const comprobante = fila.querySelector('.medio-comprobante').value.trim();
        if (!bancoId || !cuentaBancariaId){ await modalAlert(`Debe elegir banco y cuenta bancaria en cada segmento de ${tipo}.`); return; }
        if (!comprobante){ await modalAlert(`El comprobante es obligatorio en cada segmento de ${tipo}.`); return; }
        medios_pago.push({tipo_medio_pago: tipo, monto, banco_id: bancoId, cuenta_bancaria_id: cuentaBancariaId, comprobante});
      } else if (tipo === 'Anticipo'){
        const anticipoId = Number(fila.querySelector('.medio-anticipo-select').value);
        if (!anticipoId){ await modalAlert('Debe elegir el anticipo a usar.'); return; }
        medios_pago.push({tipo_medio_pago:'Anticipo', monto, anticipo_cliente_id: anticipoId});
      } else if (tipo === 'NotaCredito'){
        const notaId = Number(fila.querySelector('.medio-nota-select').value);
        if (!notaId){ await modalAlert('Debe elegir la nota de crédito a usar.'); return; }
        medios_pago.push({tipo_medio_pago:'NotaCredito', monto, nota_cliente_id: notaId});
      } else if (tipo === 'Efectivo' || tipo === 'Tarjeta'){
        medios_pago.push({tipo_medio_pago: tipo, monto});
      }
    }

// La caja ya quedó fija en este cobro desde "Registrar" (siempre exige caja abierta, a
    // diferencia de Pago a Proveedor donde es condicional a Efectivo) -- no hay que reverificar
    // en vivo aquí, solo confirmar que de verdad quedó asignada antes de gastar un viaje al
    // servidor (mismo mensaje que el gate real en cobros.py).
    if (medios_pago.some(m => m.tipo_medio_pago === 'Efectivo' || m.tipo_medio_pago === 'Tarjeta') && !pagoEnEdicion.caja_id){
      await modalAlert('Este cobro no tiene una caja asignada -- no debería ser posible, contacte a soporte.', 'Falta caja');
      return;
    }

// ---------------- Recibo de Cobro ----------------
  const reporteOverlay = document.getElementById('reporte-overlay');
  let reciboActual = null;

async function abrirRecibo(pagoId){
    try{
      reciboActual = await llamarApi(`${API_COBROS}/${pagoId}/recibo`);
      pintarRecibo(reciboActual);
      reporteOverlay.classList.add('abierto');
    } catch(e){ await modalAlert(e.message, 'No se pudo generar el recibo'); }
  }
  document.getElementById('btn-cerrar-recibo').addEventListener('click', ()=> reporteOverlay.classList.remove('abierto'));
  document.getElementById('btn-imprimir-recibo').addEventListener('click', ()=> window.print());
  document.getElementById('btn-excel-recibo').addEventListener('click', async (ev)=>{
    if (!reciboActual) return;
    const boton = ev.currentTarget;
    const textoOriginal = boton.textContent;
    boton.disabled = true; boton.textContent = 'Generando…';
    try{
      const resp = await fetch(`${API_BASE}${API_COBROS}/${reciboActual.cobro_id}/recibo/excel`);
      if (!resp.ok) throw new Error(`El servidor respondió ${resp.status}`);
      const blob = await resp.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = `recibo_cobro_${reciboActual.cobro_id}.xlsx`;
      document.body.appendChild(a); a.click(); a.remove();
      URL.revokeObjectURL(url);
      boton.textContent = '✓ Descargado';
    } catch(e){ await modalAlert(e.message); boton.textContent = textoOriginal; }
    finally { setTimeout(()=>{ boton.disabled = false; boton.textContent = textoOriginal; }, 1800); }
  });
  document.getElementById('btn-pdf-recibo').addEventListener('click', async (ev)=>{
    if (!reciboActual) return;
    const boton = ev.currentTarget;
    const textoOriginal = boton.textContent;
    boton.disabled = true; boton.textContent = 'Generando…';
    try{
      const resp = await fetch(`${API_BASE}${API_COBROS}/${reciboActual.cobro_id}/recibo/pdf`);
      if (!resp.ok) throw new Error(`El servidor respondió ${resp.status}`);
      const blob = await resp.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = `recibo_cobro_${reciboActual.cobro_id}.pdf`;
      document.body.appendChild(a); a.click(); a.remove();
      URL.revokeObjectURL(url);
      boton.textContent = '✓ Descargado';
    } catch(e){ await modalAlert(e.message); boton.textContent = textoOriginal; }
    finally { setTimeout(()=>{ boton.disabled = false; boton.textContent = textoOriginal; }, 1800); }
  });

if (accion === 'completar') await abrirCompletar(id);

if (accion === 'recibo') await abrirRecibo(id);

if (accion === 'aplicar'){
      const ok = await modalConfirm(`¿Aplicar el cobro #${registro.numero} a ${registro.cliente_nombre}? Esto calcula el diferencial cambiario, genera el asiento contable y el recibo de cobro.`, 'Aplicar cobro', 'primary', 'Aplicar');
      if (!ok) return;
      try{
        await llamarApi(`${API_COBROS}/${id}/aplicar`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({aplicado_por: USUARIO_ACTUAL})});
        await cargar();
      } catch(e){
        if (e.message.includes('coincidencia real')){
          const confirmar = await modalConfirm(e.message, 'Comprobante repetido', 'primary', 'Sí, es una coincidencia real');
          if (confirmar){
            try{
              await llamarApi(`${API_COBROS}/${id}/aplicar`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({aplicado_por: USUARIO_ACTUAL, confirma_repeticion:true})});
              await cargar();
            } catch(e2){ await modalAlert(e2.message, 'No se pudo aplicar'); }
          }
        } else {
          await modalAlert(e.message, 'No se pudo aplicar');
        }
      }
    }
    if (accion === 'anular'){
      const motivo = window.prompt('Motivo de anulación:');
      if (!motivo) return;
      try{
        await llamarApi(`${API_COBROS}/${id}/anular`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({anulado_por: USUARIO_ACTUAL, motivo_anulacion: motivo})});
        await cargar();
      } catch(e){ await modalAlert(e.message, 'No se pudo anular'); }
    }
  });

['f-fecha-desde','f-fecha-hasta','f-cliente','f-sucursal','f-estado'].forEach(id=>{
    document.getElementById(id).addEventListener('change', cargar);
  });
  ['f-monto-desde','f-monto-hasta','f-factura'].forEach(id=>{
    document.getElementById(id).addEventListener('input', ()=>{
      clearTimeout(window.__debounceCobros);
      window.__debounceCobros = setTimeout(cargar, 350);
    });
  });
  document.getElementById('btn-refrescar').addEventListener('click', async (ev)=>{
    const icono = ev.currentTarget.querySelector('svg');
    icono.classList.add('girando');
    await cargar();
    icono.classList.remove('girando');
  });

(async function iniciar(){
    try{ await cargarCatalogos(); }
    catch(e){ await modalAlert(e.message, 'No se pudieron cargar los catálogos'); }
    await cargar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Categorías de Cliente</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1080px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:180px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  /* #modal-overlay (aviso/confirmacion) comparte la clase .modal-overlay con otro overlay de
     esta pantalla, mismo z-index -- si #modal-overlay aparece antes en el DOM, al abrirse los
     dos a la vez (ej. un error de guardado mientras un formulario sigue abierto) el otro overlay
     pintaba encima y el aviso quedaba oculto/inaccesible detras. Bug real reportado: "el
     Entendido no se ve". Un z-index propio, mas alto, garantiza que el aviso siempre gane sin
     importar el orden del DOM. */
  #modal-overlay{ z-index:400; }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:420px; width:100%;
  }
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}

.modal-box.form-box{max-width:460px;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input[type="text"], .form-field input[type="number"], .form-field select, .form-field textarea{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%; font-family:inherit;
  }
  .form-field textarea{resize:vertical; min-height:56px;}
  .form-field.checkbox label{
    display:flex; align-items:center; gap:8px; text-transform:none;
    letter-spacing:normal; font-size:13.5px; color:var(--ink);
  }
  .form-field input[disabled], .form-field select[disabled], .form-field textarea[disabled]{opacity:.6; cursor:not-allowed;}
  .form-audit{
    font-size:12px; color:var(--ink-muted); border-top:1px solid var(--line);
    margin-top:4px; padding-top:12px; line-height:1.7;
  }

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Categorías de Cliente</span>
    </div>
    <div class="crumbs"><b>Configuración</b> / Categorías de cliente</div>
  </div>

<div class="filters">
    <div class="field texto">
      <label for="f-texto">Nombre</label>
      <input type="text" id="f-texto" placeholder="ej. zona franca" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-activa">Estado</label>
      <select id="f-activa">
        <option value="">Todas</option>
        <option value="true">Activas</option>
        <option value="false">Inactivas</option>
      </select>
    </div>
    <div class="spacer"></div>
    <a class="btn btn-ghost no-print" id="btn-volver" data-nav-shell="clientes" href="clientes_ui.html">‹ Volver a Clientes</a>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nuevo</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Categoría padre</th>
          <th>Nombre</th>
          <th>Descripción</th>
          <th>Orden</th>
          <th>Activa</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay categorías con estos filtros</b>
      Ajusta los filtros, o límpialos para ver todas, o crea la primera con "+ Nuevo".
    </div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div class="form-field">
      <label for="form-nombre">Nombre</label>
      <input type="text" id="form-nombre">
    </div>
    <div class="form-field">
      <label for="form-padre">Categoría padre</label>
      <select id="form-padre"><option value="">— Ninguna (categoría raíz) —</option></select>
    </div>
    <div class="form-field">
      <label for="form-descripcion">Descripción</label>
      <input type="text" id="form-descripcion">
    </div>
    <div class="form-field">
      <label for="form-orden">Orden</label>
      <input type="number" id="form-orden" min="0" step="1">
    </div>
    <div class="form-field checkbox">
      <label><input type="checkbox" id="form-activa" checked> Activa</label>
    </div>
    <div class="form-audit" id="form-audit" style="display:none;"></div>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="form-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="form-guardar">Guardar</button>
    </div>
  </div>
</div>

function ponerSoloLectura(soloLectura){
    formNombre.disabled = soloLectura;
    formPadre.disabled = soloLectura;
    formDescripcion.disabled = soloLectura;
    formOrden.disabled = soloLectura;
    formActiva.disabled = soloLectura;
  }

let formModo = 'nuevo';
  let formIdEditando = null;

function llenarSelectPadre(excluirId){
    formPadre.innerHTML = '<option value="">— Ninguna (categoría raíz) —</option>'
      + REGISTROS.filter(r => r.id !== excluirId)
        .map(r => `<option value="${r.id}">${r.categoria_padre_nombre ? r.categoria_padre_nombre + ' › ' : ''}${r.nombre}</option>`).join('');
  }

function abrirFormulario(modo, registro){
    formModo = modo;
    formIdEditando = registro ? registro.id : null;

llenarSelectPadre(registro ? registro.id : null);
    formNombre.value = registro ? registro.nombre : '';
    formPadre.value = registro && registro.categoria_padre_id ? String(registro.categoria_padre_id) : '';
    formDescripcion.value = registro ? (registro.descripcion || '') : '';
    formOrden.value = registro && registro.orden !== null && registro.orden !== undefined ? registro.orden : '';
    formActiva.checked = registro ? registro.activa : true;

if (modo === 'ver'){
      formTitulo.textContent = 'Ver — Categoría de Cliente';
      ponerSoloLectura(true);
      formGuardar.style.display = 'none';
      formCancelar.textContent = 'Cerrar';
    } else {
      formTitulo.textContent = modo === 'nuevo' ? 'Nueva — Categoría de Cliente' : 'Modificar — Categoría de Cliente';
      ponerSoloLectura(false);
      formGuardar.style.display = '';
      formCancelar.textContent = 'Cancelar';
    }

formGuardar.onclick = async ()=>{
    const nombre = formNombre.value.trim();
    if (!nombre){ await modalAlert('El nombre es obligatorio.'); formNombre.focus(); return; }

function pillActiva(activa){
    return activa
      ? `<span class="pill pill-aplicado">Activa</span>`
      : `<span class="pill pill-anulado">Inactiva</span>`;
  }

async function cargar(){
    tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    emptyState.style.display = 'none';
    try{
      REGISTROS = await llamarApi(`${API_CATEGORIAS}?${construirQuery()}`);
      if (REGISTROS.length === 0){
        tbody.innerHTML = '';
        emptyState.style.display = 'block';
      } else {
        tbody.innerHTML = REGISTROS.map(filaHtml).join('');
      }
      footNote.textContent = `${REGISTROS.length} categoría${REGISTROS.length === 1 ? '' : 's'}`;
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      footNote.textContent = '';
    }
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar la categoría "${registro.nombre}"? Si tiene clientes u otras categorías (hijas) asociadas, no se podrá eliminar y se sugerirá desactivarla en su lugar.`,
        'Eliminar categoría', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${API_CATEGORIAS}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

document.getElementById('f-texto').addEventListener('input', ()=>{
    clearTimeout(window.__debounceCC);
    window.__debounceCC = setTimeout(cargar, 350);
  });
  document.getElementById('f-activa').addEventListener('change', cargar);

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

(async function iniciar(){
    document.getElementById('f-texto').focus();
    await cargar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Territorios</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{
    font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
    font-variant-numeric:tabular-nums;
  }
  h1,h2,h3{
    font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;
    font-weight:600; text-wrap:balance; margin:0;
  }
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1000px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:200px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}

.row-actions{display:flex; gap:4px; justify-content:flex-end;}
  .icon-btn{
    border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
    width:30px; height:30px; border-radius:7px; display:inline-flex; align-items:center;
    justify-content:center; cursor:pointer; transition:transform .08s ease, filter .08s ease;
  }
  .icon-btn:hover{color:var(--ink); border-color:var(--ink-muted);}
  .icon-btn:active{transform:scale(0.90);}
  .icon-btn.danger:hover{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .icon-btn[disabled]{opacity:.3; cursor:not-allowed; transform:none;}
  .icon-btn svg{width:15px; height:15px;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}

.foot-note{font-size:12px; color:var(--ink-muted); margin-top:12px;}

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Territorios</span>
    </div>
    <div class="crumbs"><b>Configuración</b> / Territorios</div>
  </div>

<div class="filters">
    <div class="field texto">
      <label for="f-texto">Buscar por nombre</label>
      <input type="text" id="f-texto" placeholder="ej. electrodomésticos" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-activa">Estado</label>
      <select id="f-activa">
        <option value="">Todos</option>
        <option value="true">Activos</option>
        <option value="false">Inactivos</option>
      </select>
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <a class="btn btn-ghost no-print" id="btn-volver" href="clientes_ui.html" data-nav-shell="clientes">‹ Volver</a>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nuevo</button>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>
<script>
(function(){
  const CONFIG = {
    titulo: "Territorios",
    apiPath: "/ventas/territorios",
    camposExtra: [],
  };
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador'; // no hay sesión/login todavía -- placeholder de trazabilidad

function cerrar(valor){
        modalOverlay.classList.remove('abierto');
        modalAceptar.onclick = null;
        modalCancelar.onclick = null;
        document.removeEventListener('keydown', onKey);
        resolve(valor);
      }
      function onKey(e){ if (e.key === 'Escape') cerrar(false); }
      modalAceptar.onclick = ()=> cerrar(true);
      modalCancelar.onclick = ()=> cerrar(false);
      document.addEventListener('keydown', onKey);

function idCampoExtra(campo){ return `ex-${campo.campo}`; }

let formModo = 'nuevo'; // 'nuevo' | 'modificar' | 'ver'
  let formIdEditando = null;

formGuardar.onclick = async ()=>{
    const nombre = formNombre.value.trim();
    if (!nombre){ await modalAlert('El nombre es obligatorio.'); formNombre.focus(); return; }

function pillActiva(activa){
    return activa
      ? `<span class="pill pill-aplicado">Activa</span>`
      : `<span class="pill pill-anulado">Inactiva</span>`;
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar "${registro.nombre}"? Si está en uso por otros registros, no se podrá eliminar y se sugerirá desactivarlo en su lugar.`,
        'Eliminar registro', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${CONFIG.apiPath}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

document.getElementById('f-texto').focus();
  cargar();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Sucursales</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{
    font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
    font-variant-numeric:tabular-nums;
  }
  h1,h2,h3{
    font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;
    font-weight:600; text-wrap:balance; margin:0;
  }
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1000px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:200px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}

.row-actions{display:flex; gap:4px; justify-content:flex-end;}
  .icon-btn{
    border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
    width:30px; height:30px; border-radius:7px; display:inline-flex; align-items:center;
    justify-content:center; cursor:pointer; transition:transform .08s ease, filter .08s ease;
  }
  .icon-btn:hover{color:var(--ink); border-color:var(--ink-muted);}
  .icon-btn:active{transform:scale(0.90);}
  .icon-btn.danger:hover{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .icon-btn[disabled]{opacity:.3; cursor:not-allowed; transform:none;}
  .icon-btn svg{width:15px; height:15px;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}

.foot-note{font-size:12px; color:var(--ink-muted); margin-top:12px;}

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Sucursales</span>
    </div>
    <div class="crumbs"><b>Configuración</b> / Sucursales</div>
  </div>

<div class="filters">
    <div class="field texto">
      <label for="f-texto">Buscar por nombre</label>
      <input type="text" id="f-texto" placeholder="ej. electrodomésticos" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-activa">Estado</label>
      <select id="f-activa">
        <option value="">Todos</option>
        <option value="true">Activos</option>
        <option value="false">Inactivos</option>
      </select>
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <a class="btn btn-ghost no-print" id="btn-volver" href="clientes_ui.html" data-nav-shell="clientes">‹ Volver</a>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nuevo</button>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>
<script>
(function(){
  const CONFIG = {
    titulo: "Sucursales",
    apiPath: "/sucursales",
    camposExtra: [{"campo": "codigo_hacienda", "etiqueta": "Código Hacienda (3 dígitos)", "tipo": "texto"}],
  };
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador'; // no hay sesión/login todavía -- placeholder de trazabilidad

function cerrar(valor){
        modalOverlay.classList.remove('abierto');
        modalAceptar.onclick = null;
        modalCancelar.onclick = null;
        document.removeEventListener('keydown', onKey);
        resolve(valor);
      }
      function onKey(e){ if (e.key === 'Escape') cerrar(false); }
      modalAceptar.onclick = ()=> cerrar(true);
      modalCancelar.onclick = ()=> cerrar(false);
      document.addEventListener('keydown', onKey);

function idCampoExtra(campo){ return `ex-${campo.campo}`; }

let formModo = 'nuevo'; // 'nuevo' | 'modificar' | 'ver'
  let formIdEditando = null;

formGuardar.onclick = async ()=>{
    const nombre = formNombre.value.trim();
    if (!nombre){ await modalAlert('El nombre es obligatorio.'); formNombre.focus(); return; }

function pillActiva(activa){
    return activa
      ? `<span class="pill pill-aplicado">Activa</span>`
      : `<span class="pill pill-anulado">Inactiva</span>`;
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar "${registro.nombre}"? Si está en uso por otros registros, no se podrá eliminar y se sugerirá desactivarlo en su lugar.`,
        'Eliminar registro', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${CONFIG.apiPath}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

document.getElementById('f-texto').focus();
  cargar();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Proveedores</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1180px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:180px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  /* #modal-overlay (aviso/confirmacion) comparte la clase .modal-overlay con otro overlay de
     esta pantalla, mismo z-index -- si #modal-overlay aparece antes en el DOM, al abrirse los
     dos a la vez (ej. un error de guardado mientras un formulario sigue abierto) el otro overlay
     pintaba encima y el aviso quedaba oculto/inaccesible detras. Bug real reportado: "el
     Entendido no se ve". Un z-index propio, mas alto, garantiza que el aviso siempre gane sin
     importar el orden del DOM. */
  #modal-overlay{ z-index:400; }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:420px; width:100%;
  }
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}

.modal-box.form-box{max-width:600px; max-height:88vh; overflow-y:auto;}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
  .form-grid .span2{grid-column:1 / -1;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input[type="text"], .form-field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%; font-family:inherit;
  }
  .form-field.checkbox label{
    display:flex; align-items:center; gap:8px; text-transform:none;
    letter-spacing:normal; font-size:13.5px; color:var(--ink);
  }
  .form-field input[disabled], .form-field select[disabled]{opacity:.6; cursor:not-allowed;}
  .form-audit{
    font-size:12px; color:var(--ink-muted); border-top:1px solid var(--line);
    margin-top:4px; padding-top:12px; line-height:1.7;
  }
  .form-nota{
    font-size:12px; color:var(--ink-muted); background:var(--surface-2); border:1px solid var(--line);
    border-radius:7px; padding:8px 10px; margin-bottom:14px;
  }

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Proveedores</span>
    </div>
    <div class="crumbs"><b>Cuentas a Pagar</b> / Proveedores</div>
  </div>

<div class="filters">
    <div class="field texto">
      <label for="f-texto">Nombre / código / identificación</label>
      <input type="text" id="f-texto" placeholder="ej. Mundo de Novedades, 3102377890…" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-categoria">Categoría</label>
      <select id="f-categoria"><option value="">Todos</option></select>
    </div>
    <div class="field">
      <label for="f-tipo">Tipo</label>
      <select id="f-tipo">
        <option value="">Todos</option>
        <option value="solo_compras">Solo compras</option>
        <option value="solo_servicios">Solo servicios</option>
        <option value="solo_gastos">Solo gastos</option>
      </select>
    </div>
    <div class="field">
      <label for="f-activa">Activo</label>
      <select id="f-activa">
        <option value="">Todos</option>
        <option value="true">Sí</option>
        <option value="false">No</option>
      </select>
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-ghost no-print" id="btn-importar">⬆ Importar</button>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nuevo</button>
    <a class="btn btn-ghost no-print" id="btn-volver" data-nav-shell="inicio" href="fenix_app.html">‹ Volver</a>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Categoría</th>
          <th>Código</th>
          <th>Identificación</th>
          <th>Nombre</th>
          <th>Correo / Teléfono</th>
          <th class="num">Saldo a favor</th>
          <th class="num">CXP</th>
          <th>Activo</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay proveedores con estos filtros</b>
      Ajusta los filtros, o límpialos para ver todos, o crea el primero con "+ Nuevo".
    </div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div class="form-field">
      <label for="form-nombre">Nombre / razón social</label>
      <input type="text" id="form-nombre">
    </div>

<div class="form-grid">
      <div class="form-field">
        <label for="form-codigo">Código</label>
        <input type="text" id="form-codigo">
      </div>
      <div class="form-field">
        <label for="form-nombre-comercial">Nombre comercial</label>
        <input type="text" id="form-nombre-comercial">
      </div>
      <div class="form-field">
        <label for="form-identificacion-tipo">Tipo de identificación</label>
        <select id="form-identificacion-tipo">
          <option value="">— Sin definir —</option>
          <option value="01">01 — Física</option>
          <option value="02">02 — Jurídica</option>
          <option value="03">03 — DIMEX</option>
          <option value="04">04 — NITE</option>
        </select>
      </div>
      <div class="form-field">
        <label for="form-identificacion-numero">Número de identificación</label>
        <input type="text" id="form-identificacion-numero">
      </div>
      <div class="form-field">
        <label for="form-tipo-proveedor">Tipo de proveedor</label>
        <select id="form-tipo-proveedor">
          <option value="">— Sin definir —</option>
          <option value="solo_compras">Solo compras</option>
          <option value="solo_servicios">Solo servicios</option>
          <option value="solo_gastos">Solo gastos</option>
        </select>
      </div>
      <div class="form-field">
        <label for="form-tipo-compra">Tipo de compra (Hacienda / IVA)</label>
        <select id="form-tipo-compra">
          <option value="">— Se deriva del tipo de proveedor —</option>
          <option value="identificada">Identificada</option>
          <option value="no_identificada">No identificada</option>
        </select>
      </div>
      <div class="form-field">
        <label for="form-categoria">Categoría</label>
        <select id="form-categoria"><option value="">— Sin definir —</option></select>
      </div>
      <div class="form-field">
        <label for="form-moneda">Moneda</label>
        <select id="form-moneda">
          <option value="CRC">CRC</option>
          <option value="USD">USD</option>
        </select>
      </div>
      <div class="form-field">
        <label for="form-correo">Correo electrónico</label>
        <input type="text" id="form-correo">
      </div>
      <div class="form-field">
        <label for="form-telefono">Teléfono</label>
        <input type="text" id="form-telefono">
      </div>
      <div class="form-field">
        <label for="form-plazo">Plazo de crédito (días)</label>
        <input type="text" id="form-plazo" inputmode="numeric" placeholder="ej. 30">
      </div>
      <div class="form-field">
        <label for="form-saldo-favor">Saldo a favor migrado</label>
        <input type="text" id="form-saldo-favor" inputmode="decimal" placeholder="0">
      </div>
      <div class="form-field span2">
        <label for="form-direccion">Dirección</label>
        <input type="text" id="form-direccion">
      </div>
      <div class="form-field span2">
        <label for="form-observaciones">Observaciones</label>
        <input type="text" id="form-observaciones">
      </div>
    </div>

<div class="form-field checkbox">
      <label><input type="checkbox" id="form-activa" checked> Activo</label>
    </div>
    <div class="form-nota">
      "Tipo de compra" es solo clasificación tributaria para reportes de compras/declaración de
      IVA -- no afecta ninguna cuenta contable. Si no se indica, se deriva del Tipo de
      proveedor (Solo compras → Identificada; Solo servicios/Solo gastos → No identificada).
      El Saldo a favor migrado es un hecho congelado de la migración desde el sistema
      anterior -- no se recalcula solo, es el mismo criterio que el saldo inicial de un banco.
    </div>
    <div class="form-audit" id="form-audit" style="display:none;"></div>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="form-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="form-guardar">Guardar</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="importar-overlay">
  <div class="modal-box" role="dialog" aria-modal="true" style="max-width:520px;">
    <h3 class="modal-titulo">Importar proveedores desde CSV</h3>
    <div id="importar-paso-nota">
      <p class="modal-mensaje" style="margin-bottom:14px;">
        Este proceso lee un archivo CSV con la lista de proveedores de tu sistema anterior y
        crea en Fénix únicamente los que <b>todavía no existan</b> (se compara por número de
        identificación) -- los que ya existan se omiten, para no duplicar. No se modifica
        ningún proveedor que ya esté en Fénix.
      </p>
      <div class="form-field">
        <label for="importar-archivo">Archivo CSV</label>
        <input type="file" id="importar-archivo" accept=".csv">
      </div>
      <div class="modal-acciones">
        <button class="btn btn-ghost" id="importar-cancelar">Cancelar</button>
        <button class="btn btn-primary" id="importar-confirmar" disabled>Importar</button>
      </div>
    </div>
    <div id="importar-paso-resultado" style="display:none;">
      <p class="modal-mensaje" id="importar-resumen"></p>
      <div id="importar-advertencias" style="max-height:220px; overflow-y:auto; font-size:12.5px; color:var(--ink-muted); margin-bottom:14px;"></div>
      <div class="modal-acciones">
        <button class="btn btn-primary" id="importar-cerrar">Cerrar</button>
      </div>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>
<script>
(function(){
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador';
  const API_PROVEEDORES = '/cxp/proveedores';
  const API_CATEGORIAS = '/cxp/categorias-proveedor';

const formOverlay = document.getElementById('form-overlay');
  const formTitulo = document.getElementById('form-titulo');
  const formNombre = document.getElementById('form-nombre');
  const formCodigo = document.getElementById('form-codigo');
  const formNombreComercial = document.getElementById('form-nombre-comercial');
  const formIdTipo = document.getElementById('form-identificacion-tipo');
  const formIdNumero = document.getElementById('form-identificacion-numero');
  const formTipoCompra = document.getElementById('form-tipo-compra');
  const formTipoProveedor = document.getElementById('form-tipo-proveedor');
  const formCategoria = document.getElementById('form-categoria');
  const formMoneda = document.getElementById('form-moneda');
  const formPlazo = document.getElementById('form-plazo');
  const formSaldoFavor = document.getElementById('form-saldo-favor');
  const formObservaciones = document.getElementById('form-observaciones');
  const formCorreo = document.getElementById('form-correo');
  const formTelefono = document.getElementById('form-telefono');
  const formDireccion = document.getElementById('form-direccion');
  const formActiva = document.getElementById('form-activa');
  const formAudit = document.getElementById('form-audit');
  const formGuardar = document.getElementById('form-guardar');
  const formCancelar = document.getElementById('form-cancelar');

const TODOS_LOS_CAMPOS = [formNombre, formCodigo, formNombreComercial, formIdTipo, formIdNumero,
    formTipoCompra, formTipoProveedor, formCategoria, formMoneda, formPlazo, formSaldoFavor,
    formObservaciones, formCorreo, formTelefono, formDireccion, formActiva];
  function ponerSoloLectura(soloLectura){ TODOS_LOS_CAMPOS.forEach(c => c.disabled = soloLectura); }

let formModo = 'nuevo';
  let formIdEditando = null;

function abrirFormulario(modo, registro){
    formModo = modo;
    formIdEditando = registro ? registro.id : null;

formNombre.value = registro ? registro.nombre : '';
    formCodigo.value = registro ? (registro.codigo || '') : '';
    formNombreComercial.value = registro ? (registro.nombre_comercial || '') : '';
    formIdTipo.value = registro ? (registro.identificacion_tipo || '') : '';
    formIdNumero.value = registro ? (registro.identificacion_numero || '') : '';
    formTipoCompra.value = registro ? (registro.tipo_compra || '') : '';
    formTipoProveedor.value = registro ? (registro.tipo_proveedor || '') : '';
    formCategoria.value = registro ? (registro.categoria_proveedor_id || '') : '';
    formMoneda.value = registro ? (registro.moneda || 'CRC') : 'CRC';
    formPlazo.value = registro && registro.plazo_credito_dias != null ? registro.plazo_credito_dias : '';
    formSaldoFavor.value = registro ? (registro.saldo_a_favor || 0) : 0;
    formObservaciones.value = registro ? (registro.observaciones || '') : '';
    formCorreo.value = registro ? (registro.correo_electronico || '') : '';
    formTelefono.value = registro ? (registro.telefono || '') : '';
    formDireccion.value = registro ? (registro.direccion || '') : '';
    formActiva.checked = registro ? registro.activa : true;

if (modo === 'ver'){
      formTitulo.textContent = 'Ver — Proveedor';
      ponerSoloLectura(true);
      formGuardar.style.display = 'none';
      formCancelar.textContent = 'Cerrar';
    } else {
      formTitulo.textContent = modo === 'nuevo' ? 'Nuevo — Proveedor' : 'Modificar — Proveedor';
      ponerSoloLectura(false);
      formGuardar.style.display = '';
      formCancelar.textContent = 'Cancelar';
    }

formGuardar.onclick = async ()=>{
    const nombre = formNombre.value.trim();
    if (!nombre){ await modalAlert('El nombre / razón social es obligatorio.'); formNombre.focus(); return; }

const tbody = document.getElementById('tbody-registros');
  const emptyState = document.getElementById('empty-state');
  const footNote = document.getElementById('foot-note');
  let REGISTROS = [];

function construirQuery(){
    const params = new URLSearchParams();
    const texto = document.getElementById('f-texto').value.trim();
    const activa = document.getElementById('f-activa').value;
    const categoria = document.getElementById('f-categoria').value;
    const tipo = document.getElementById('f-tipo').value;
    if (texto) params.set('texto', texto);
    if (activa) params.set('activa', activa);
    if (categoria) params.set('categoria_proveedor_id', categoria);
    if (tipo) params.set('tipo_proveedor', tipo);
    return params.toString();
  }

async function cargar(){
    tbody.innerHTML = `<tr><td colspan="9" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    emptyState.style.display = 'none';
    try{
      REGISTROS = await llamarApi(`${API_PROVEEDORES}?${construirQuery()}`);
      if (REGISTROS.length === 0){ tbody.innerHTML = ''; emptyState.style.display = 'block'; }
      else tbody.innerHTML = REGISTROS.map(filaHtml).join('');
      footNote.textContent = `${REGISTROS.length} proveedor${REGISTROS.length === 1 ? '' : 'es'}`;
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="9" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      footNote.textContent = '';
    }
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar el proveedor "${registro.nombre}"? Si tiene facturas u otros registros asociados, no se podrá eliminar y se sugerirá desactivarlo en su lugar.`,
        'Eliminar proveedor', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{ await llamarApi(`${API_PROVEEDORES}/${id}`, {method:'DELETE'}); await cargar(); }
      catch(e){ await modalAlert(e.message, 'No se pudo eliminar'); }
    }
  });

document.getElementById('f-texto').addEventListener('input', ()=>{
    clearTimeout(window.__debouncePV);
    window.__debouncePV = setTimeout(cargar, 350);
  });
  document.getElementById('f-activa').addEventListener('change', cargar);
  document.getElementById('f-categoria').addEventListener('change', cargar);
  document.getElementById('f-tipo').addEventListener('change', cargar);
  document.getElementById('btn-refrescar').addEventListener('click', async (ev)=>{
    const icono = ev.currentTarget.querySelector('svg');
    icono.classList.add('girando');
    await cargar();
    icono.classList.remove('girando');
  });
  document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

// ---------------- Importar CSV ----------------
  const importarOverlay = document.getElementById('importar-overlay');
  const importarArchivo = document.getElementById('importar-archivo');
  const importarConfirmar = document.getElementById('importar-confirmar');
  const importarPasoNota = document.getElementById('importar-paso-nota');
  const importarPasoResultado = document.getElementById('importar-paso-resultado');

importarConfirmar.addEventListener('click', async ()=>{
    const archivo = importarArchivo.files[0];
    if (!archivo) return;
    const textoOriginal = importarConfirmar.textContent;
    importarConfirmar.disabled = true;
    importarConfirmar.textContent = 'Importando…';
    try{
      const formData = new FormData();
      formData.append('archivo', archivo);
      const resp = await fetch(`${API_BASE}${API_PROVEEDORES}/importar`, {method:'POST', body: formData});
      if (!resp.ok){
        let detalle = `El servidor respondió ${resp.status}`;
        try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
        throw new Error(detalle);
      }
      const resultado = await resp.json();
      importarPasoNota.style.display = 'none';
      importarPasoResultado.style.display = '';
      document.getElementById('importar-resumen').innerHTML =
        `De <b>${resultado.total_filas}</b> filas del archivo: <b>${resultado.importados}</b> proveedores nuevos creados, ` +
        `<b>${resultado.omitidos_duplicados}</b> omitidos por ya existir (no se duplicó ninguno).`;
      const cajaAdvertencias = document.getElementById('importar-advertencias');
      if (resultado.advertencias.length){
        cajaAdvertencias.innerHTML = `<b>${resultado.advertencias.length} advertencia(s):</b><br>` +
          resultado.advertencias.map(a => `• ${a}`).join('<br>');
      } else {
        cajaAdvertencias.innerHTML = '';
      }
    } catch(e){
      await modalAlert(e.message, 'No se pudo importar');
    } finally {
      importarConfirmar.disabled = false;
      importarConfirmar.textContent = textoOriginal;
    }
  });

(async function iniciar(){
    try{ await cargarCategorias(); }
    catch(e){ /* si el catálogo de categorías no carga, el filtro y el formulario quedan sin opciones, no bloquea el resto */ }
    document.getElementById('f-texto').focus();
    await cargar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Facturas por Pagar</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1100px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:180px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:170px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  /* #modal-overlay (aviso/confirmacion) comparte la clase .modal-overlay con otro overlay de
     esta pantalla, mismo z-index -- si #modal-overlay aparece antes en el DOM, al abrirse los
     dos a la vez (ej. un error de guardado mientras un formulario sigue abierto) el otro overlay
     pintaba encima y el aviso quedaba oculto/inaccesible detras. Bug real reportado: "el
     Entendido no se ve". Un z-index propio, mas alto, garantiza que el aviso siempre gane sin
     importar el orden del DOM. */
  #modal-overlay{ z-index:400; }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:420px; width:100%;
  }
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}

.modal-box.form-box{max-width:460px;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input[type="text"], .form-field input[type="number"], .form-field input[type="date"], .form-field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%; font-family:inherit;
  }
  .form-field input[disabled], .form-field select[disabled]{opacity:.6; cursor:not-allowed;}
  .form-saldo{
    background:var(--surface-2); border:1px solid var(--line); border-radius:7px;
    padding:9px 11px; margin-bottom:14px; font-size:13.5px; display:flex; justify-content:space-between;
  }
  .form-saldo .val{font-weight:700;}
  .form-audit{
    font-size:12px; color:var(--ink-muted); border-top:1px solid var(--line);
    margin-top:4px; padding-top:12px; line-height:1.7;
  }

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Facturas por Pagar</span>
    </div>
    <div class="crumbs"><b>Cuentas a Pagar</b> / Facturas por Pagar</div>
  </div>

<div class="filters">
    <div class="field texto">
      <label for="f-texto">Número de factura / proveedor</label>
      <input type="text" id="f-texto" placeholder="ej. FC-PROV-001, Mundo de Novedades…" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-fecha-desde">Fecha desde</label>
      <input type="date" id="f-fecha-desde">
    </div>
    <div class="field">
      <label for="f-fecha-hasta">Fecha hasta</label>
      <input type="date" id="f-fecha-hasta">
    </div>
    <div class="field">
      <label for="f-proveedor">Proveedor</label>
      <select id="f-proveedor"><option value="">Todos</option></select>
    </div>
    <div class="field">
      <label for="f-sucursal">Sucursal</label>
      <select id="f-sucursal"><option value="">Todas</option></select>
    </div>
    <div class="field">
      <label for="f-categoria">Categoría</label>
      <select id="f-categoria"><option value="">Todas</option></select>
    </div>
    <div class="field">
      <label for="f-plazo">Términos de pago</label>
      <select id="f-plazo"><option value="">Todos</option></select>
    </div>
    <div class="field">
      <label for="f-pendientes">Saldo</label>
      <select id="f-pendientes">
        <option value="">Todas</option>
        <option value="true">Solo con saldo pendiente</option>
      </select>
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-ghost no-print" id="btn-excel">📊 Exportar a Excel</button>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nueva</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Número de factura</th>
          <th>Proveedor</th>
          <th>Sucursal</th>
          <th>Fecha</th>
          <th class="num">Monto</th>
          <th class="num">Saldo pendiente</th>
          <th>Origen</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay facturas con estos filtros</b>
      Ajusta los filtros, o límpialos para ver todas, o crea la primera con "+ Nueva".
    </div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div class="form-field">
      <label for="form-numero">Número de factura</label>
      <input type="text" id="form-numero">
    </div>
    <div class="form-field">
      <label for="form-proveedor">Proveedor</label>
      <select id="form-proveedor"></select>
    </div>
    <div class="form-field">
      <label for="form-sucursal">Sucursal</label>
      <select id="form-sucursal"></select>
    </div>
    <div class="form-field">
      <label for="form-fecha">Fecha</label>
      <input type="date" id="form-fecha">
    </div>
    <div class="form-field">
      <label for="form-moneda">Moneda</label>
      <select id="form-moneda">
        <option value="CRC">CRC</option>
        <option value="USD">USD</option>
      </select>
    </div>
    <div class="form-field">
      <label for="form-monto">Monto</label>
      <input type="number" id="form-monto" min="0.01" step="0.01">
    </div>
    <div class="form-saldo" id="form-saldo-box" style="display:none;">
      <span>Saldo pendiente (calculado, no editable)</span>
      <span class="val mono" id="form-saldo-valor"></span>
    </div>
    <div class="form-audit" id="form-audit" style="display:none;"></div>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="form-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="form-guardar">Guardar</button>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>
<script>
(function(){
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador';
  const API_FACTURAS = '/cxp/facturas';
  const API_PROVEEDORES = '/cxp/proveedores';
  const API_SUCURSALES = '/sucursales';
  const API_CATEGORIAS_PROVEEDOR = '/cxp/categorias-proveedor';
  let SUCURSAL_ACTUAL = null;

async function llamarApi(path, opciones){
    let resp;
    try{ resp = await fetch(`${API_BASE}${path}`, opciones); }
    catch(e){ throw new Error('No se pudo conectar al backend (¿está corriendo uvicorn?)'); }
    if (!resp.ok){
      let detalle = `El servidor respondió ${resp.status}`;
      try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
      throw new Error(detalle);
    }
    if (resp.status === 204) return null;
    return resp.json();
  }
  function formatearFecha(iso){
    if (!iso) return '—';
    const [a,m,d] = iso.split('-');
    return `${d}/${m}/${a}`;
  }
  function formatearFechaHora(iso){
    if (!iso) return null;
    const d = new Date(iso);
    const pad = n => String(n).padStart(2,'0');
    let horas = d.getHours();
    const ampm = horas >= 12 ? 'p.m.' : 'a.m.';
    horas = horas % 12 || 12;
    return `${pad(d.getDate())}/${pad(d.getMonth()+1)}/${d.getFullYear()} ${horas}:${pad(d.getMinutes())} ${ampm}`;
  }
  function formatearMonto(v, moneda){
    return `${Number(v||0).toLocaleString('es-CR', {minimumFractionDigits:2, maximumFractionDigits:2})} ${moneda}`;
  }

async function cargarCategoriasProveedor(){
    const categorias = await llamarApi(`${API_CATEGORIAS_PROVEEDOR}?activa=true`);
    document.getElementById('f-categoria').innerHTML = '<option value="">Todas</option>'
      + categorias.map(c=>`<option value="${c.id}">${c.nombre}</option>`).join('');
  }
  async function cargarPlazos(){
    const plazos = await llamarApi(`${API_FACTURAS}/plazos-credito`);
    const opciones = plazos.map(p=>{
      const valor = p === null ? 0 : p;
      const etiqueta = p === null ? 'Contado' : `Crédito ${p} días`;
      return `<option value="${valor}">${etiqueta}</option>`;
    }).join('');
    document.getElementById('f-plazo').innerHTML = '<option value="">Todos</option>' + opciones;
  }

const formOverlay = document.getElementById('form-overlay');
  const formTitulo = document.getElementById('form-titulo');
  const formNumero = document.getElementById('form-numero');
  const formProveedor = document.getElementById('form-proveedor');
  const formSucursal = document.getElementById('form-sucursal');
  const formFecha = document.getElementById('form-fecha');
  const formMoneda = document.getElementById('form-moneda');
  const formMonto = document.getElementById('form-monto');
  const formSaldoBox = document.getElementById('form-saldo-box');
  const formSaldoValor = document.getElementById('form-saldo-valor');
  const formAudit = document.getElementById('form-audit');
  const formGuardar = document.getElementById('form-guardar');
  const formCancelar = document.getElementById('form-cancelar');

function ponerSoloLectura(soloLectura){
    [formNumero, formProveedor, formSucursal, formFecha, formMoneda, formMonto].forEach(c => c.disabled = soloLectura);
  }

let formModo = 'nuevo';
  let formIdEditando = null;

function abrirFormulario(modo, registro){
    formModo = modo;
    formIdEditando = registro ? registro.id : null;

formNumero.value = registro ? registro.numero_factura : '';
    formProveedor.value = registro ? String(registro.proveedor_id) : (PROVEEDORES[0] ? String(PROVEEDORES[0].id) : '');
    formSucursal.value = registro ? String(registro.sucursal_id) : (SUCURSAL_ACTUAL ? String(SUCURSAL_ACTUAL.id) : (SUCURSALES[0] ? String(SUCURSALES[0].id) : ''));
    formFecha.value = registro ? registro.fecha : new Date().toLocaleDateString('sv-SE');
    formMoneda.value = registro ? registro.moneda : 'CRC';
    formMonto.value = registro ? registro.monto : '';

if (modo === 'ver'){
      formTitulo.textContent = 'Ver — Factura por Pagar';
      ponerSoloLectura(true);
      formGuardar.style.display = 'none';
      formCancelar.textContent = 'Cerrar';
    } else {
      formTitulo.textContent = modo === 'nuevo' ? 'Nueva — Factura por Pagar' : 'Modificar — Factura por Pagar';
      ponerSoloLectura(false);
      formGuardar.style.display = '';
      formCancelar.textContent = 'Cancelar';
    }

if (registro){
      formAudit.style.display = '';
      formAudit.innerHTML = `Creado por <b>${registro.creado_por}</b> el ${formatearFechaHora(registro.creado_en)}`
        + (registro.modificado_por ? `<br>Modificado por <b>${registro.modificado_por}</b> el ${formatearFechaHora(registro.modificado_en)}` : '')
        + (registro.asiento_id ? `<br>Con asiento contable #${registro.asiento_id}` : `<br><i>Sin asiento contable -- factura registrada manualmente</i>`);
    } else {
      formAudit.style.display = 'none';
    }

formGuardar.onclick = async ()=>{
    const numero_factura = formNumero.value.trim();
    if (!numero_factura){ await modalAlert('El número de factura es obligatorio.'); formNumero.focus(); return; }
    if (!formProveedor.value){ await modalAlert('Debe elegir un proveedor.'); formProveedor.focus(); return; }
    if (!formSucursal.value){ await modalAlert('Debe elegir una sucursal.'); formSucursal.focus(); return; }
    if (!formFecha.value){ await modalAlert('La fecha es obligatoria.'); formFecha.focus(); return; }
    const monto = Number(formMonto.value);
    if (!monto || monto <= 0){ await modalAlert('El monto debe ser mayor a cero.'); formMonto.focus(); return; }

const tbody = document.getElementById('tbody-registros');
  const emptyState = document.getElementById('empty-state');
  const footNote = document.getElementById('foot-note');
  let REGISTROS = [];

async function cargar(){
    tbody.innerHTML = `<tr><td colspan="8" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    emptyState.style.display = 'none';
    try{
      REGISTROS = await llamarApi(`${API_FACTURAS}?${construirQuery()}`);
      if (REGISTROS.length === 0){ tbody.innerHTML = ''; emptyState.style.display = 'block'; }
      else tbody.innerHTML = REGISTROS.map(filaHtml).join('');
      footNote.textContent = `${REGISTROS.length} factura${REGISTROS.length === 1 ? '' : 's'}`;
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="8" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      footNote.textContent = '';
    }
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar la factura ${registro.numero_factura} (${registro.proveedor_nombre})? Si ya tiene pagos aplicados, no se podrá eliminar.`,
        'Eliminar factura', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{ await llamarApi(`${API_FACTURAS}/${id}`, {method:'DELETE'}); await cargar(); }
      catch(e){ await modalAlert(e.message, 'No se pudo eliminar'); }
    }
  });

document.getElementById('f-texto').addEventListener('input', ()=>{
    clearTimeout(window.__debounceFP);
    window.__debounceFP = setTimeout(cargar, 350);
  });
  ['f-fecha-desde','f-fecha-hasta','f-proveedor','f-sucursal','f-categoria','f-plazo','f-pendientes'].forEach(id=>{
    document.getElementById(id).addEventListener('change', cargar);
  });

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

(async function iniciar(){
    try{ await Promise.all([cargarProveedores(), cargarSucursales(), cargarCategoriasProveedor(), cargarPlazos()]); }
    catch(e){ await modalAlert(e.message, 'No se pudieron cargar los catálogos (proveedores, sucursales, categorías o términos de pago)'); }
    document.getElementById('f-texto').focus();
    await cargar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Pago a Proveedor</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1120px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:180px;}
  .field.chico input{width:110px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.pill{
    display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 8px;
    border-radius:99px; font-size:11.5px; font-weight:700; letter-spacing:.02em;
    border:1px solid transparent; white-space:nowrap;
  }
  .pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
  .pill-aplicado{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
  .pill-pendiente{background:var(--amber-bg); color:var(--amber-ink); border-color:var(--amber-line);}
  .pill-anulado{background:var(--grey-bg); color:var(--grey-ink); border-color:var(--line-strong);}
  .pill-incompleto{background:var(--red-bg); color:var(--red-ink); border-color:var(--red-line);}

.proveedor-picker{position:relative;}
  .proveedor-sugerencias{
    display:none; position:fixed; background:var(--surface); border:1px solid var(--line-strong);
    border-radius:9px; box-shadow:var(--shadow); max-height:260px; overflow-y:auto; z-index:400;
  }
  .proveedor-sugerencias.abierta{display:block;}
  .sug-item{padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--line); font-size:13.5px;}
  .sug-item:last-child{border-bottom:none;}
  .sug-item:hover{background:var(--accent-soft);}
  .sug-vacio{padding:14px 12px; font-size:13px; color:var(--ink-muted); text-align:center;}
  .proveedor-elegido{
    display:none; align-items:center; justify-content:space-between; gap:10px;
    background:var(--accent-soft); border:1px solid var(--accent); border-radius:7px;
    padding:9px 12px; font-size:13.5px; margin-bottom:14px;
  }
  .proveedor-elegido.visible{display:flex;}
  .proveedor-elegido .cambiar{
    background:none; border:none; color:var(--accent); font-weight:600; cursor:pointer; padding:0;
    font-size:12px; text-decoration:underline; font-family:inherit; white-space:nowrap;
  }
  .proveedor-fijo{
    background:var(--surface-2); border:1px solid var(--line); border-radius:7px;
    padding:9px 12px; font-size:13.5px; margin-bottom:14px; font-weight:600;
  }

.medio-nota{
    font-size:12px; color:var(--ink-muted); background:var(--surface-2); border:1px solid var(--line);
    border-radius:7px; padding:8px 10px; margin-bottom:14px;
  }
  .caja-estado{
    display:flex; align-items:center; gap:8px; border-radius:7px; padding:9px 12px;
    font-size:13px; margin-bottom:14px; border:1px solid var(--line);
    background:var(--surface-2); color:var(--ink-muted);
  }
  .caja-estado.ok{background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600;}
  .caja-estado.falta{background:var(--red-bg); border-color:var(--red-line); color:var(--red-ink); font-weight:600;}
  .medio-fila{
    border:1px solid var(--line-strong); border-radius:8px; padding:14px; margin-bottom:12px; background:var(--surface);
  }
  .medio-fila-header{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px;}
  .medio-fila-header select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; font-weight:600;
  }
  .medio-campos{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
  .medio-campos.una-columna{grid-template-columns:1fr;}
  .medio-campos .form-field{margin-bottom:0;}
  .medio-campos + .form-field{margin-top:12px;}

.registro-acciones{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Pago a Proveedor</span>
    </div>
    <div class="crumbs"><b>Cuentas a Pagar</b> / Pagos</div>
  </div>

<div class="filters">
    <div class="field">
      <label for="f-fecha-desde">Fecha desde</label>
      <input type="date" id="f-fecha-desde">
    </div>
    <div class="field">
      <label for="f-fecha-hasta">Fecha hasta</label>
      <input type="date" id="f-fecha-hasta">
    </div>
    <div class="field texto">
      <label for="f-proveedor">Proveedor</label>
      <select id="f-proveedor"><option value="">Todos</option></select>
    </div>
    <div class="field">
      <label for="f-sucursal">Sucursal</label>
      <select id="f-sucursal"><option value="">Todas</option></select>
    </div>
    <div class="field">
      <label for="f-estado">Estado</label>
      <select id="f-estado">
        <option value="">Todos</option>
        <option value="Pendiente">Pendiente</option>
        <option value="Aplicado">Aplicado</option>
        <option value="Anulado">Anulado</option>
      </select>
    </div>
    <div class="field chico">
      <label for="f-monto-desde">Monto desde</label>
      <input type="number" id="f-monto-desde" min="0" step="0.01">
    </div>
    <div class="field chico">
      <label for="f-monto-hasta">Monto hasta</label>
      <input type="number" id="f-monto-hasta" min="0" step="0.01">
    </div>
    <div class="field texto">
      <label for="f-factura">Factura pagada</label>
      <input type="text" id="f-factura" placeholder="Número de factura…">
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-ghost no-print" id="btn-excel">📊 Exportar a Excel</button>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nuevo Pago</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Número</th>
          <th>Proveedor</th>
          <th>Sucursal</th>
          <th>Fecha</th>
          <th class="num">Monto</th>
          <th>Asiento</th>
          <th>Estado</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay pagos con estos filtros</b>
      Ajusta los filtros, o límpialos para ver todos, o crea el primero con "+ Nuevo Pago".
    </div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div class="registro-overlay" id="registro-overlay">
  <div class="registro-wrap">
    <div class="registro-header">
      <h2>PROGRAMAR PAGO A PROVEEDOR</h2>
      <button class="btn btn-ghost" id="btn-cerrar-registro">✕ Cerrar</button>
    </div>

<div class="seccion">
      <h3>Pago a proveedor</h3>
      <div class="form-grid">
        <div class="form-field">
          <label for="reg-fecha">Fecha</label>
          <input type="date" id="reg-fecha">
        </div>
        <div class="form-field">
          <label for="reg-moneda">Moneda</label>
          <select id="reg-moneda">
            <option value="CRC">CRC</option>
            <option value="USD">USD</option>
          </select>
        </div>
      </div>
      <div class="form-field">
        <label for="proveedor-input">Proveedor</label>
        <div class="proveedor-picker">
          <input id="proveedor-input" type="text" autocomplete="off" placeholder="Escriba para buscar un proveedor…">
          <div class="proveedor-sugerencias" id="proveedor-sugerencias"></div>
        </div>
        <div class="proveedor-elegido" id="proveedor-elegido-box">
          <span id="proveedor-elegido-nombre"></span>
          <button class="cambiar" id="cambiar-proveedor">Cambiar</button>
        </div>
      </div>
      <div class="form-field">
        <label for="reg-observaciones">Observaciones</label>
        <input type="text" id="reg-observaciones" placeholder="ej. Comprobante 1254689 proveedor XXX facturas 125466, 646466">
      </div>
    </div>

<div class="seccion" id="seccion-facturas" style="display:none;">
      <h3>Cuentas por pagar</h3>
      <table class="facturas-table">
        <thead>
          <tr>
            <th></th>
            <th>Documento</th>
            <th>Fecha</th>
            <th class="num">Total</th>
            <th class="num">Saldo</th>
            <th class="num">Monto a pagar</th>
          </tr>
        </thead>
        <tbody id="tbody-facturas-pago"></tbody>
      </table>
      <div class="facturas-vacio" id="facturas-vacio" style="display:none;">Este proveedor no tiene facturas con saldo pendiente.</div>
      <div class="totales-box" id="totales-box">
        <span class="desc">Monto a pagar (suma de facturas elegidas)</span>
        <span class="num mono" id="totales-valor">0,00</span>
      </div>
    </div>

<div class="registro-overlay" id="completar-overlay">
  <div class="registro-wrap">
    <div class="registro-header">
      <h2>COMPLETAR PAGO <span class="mono" id="completar-numero"></span></h2>
      <button class="btn btn-ghost" id="btn-cerrar-completar">✕ Cerrar</button>
    </div>

<div class="seccion">
      <h3>Proveedor</h3>
      <div class="proveedor-fijo" id="completar-proveedor-nombre"></div>
      <div class="form-field" style="margin-top:10px;">
        <label for="completar-observaciones">Observaciones</label>
        <input type="text" id="completar-observaciones" placeholder="ej. Comprobante 1254689 proveedor XXX facturas 125466, 646466">
      </div>
    </div>

<div class="seccion">
      <h3>Cuentas por pagar</h3>
      <table class="facturas-table">
        <thead>
          <tr>
            <th></th>
            <th>Documento</th>
            <th>Fecha</th>
            <th class="num">Total</th>
            <th class="num">Saldo</th>
            <th class="num">Monto a pagar</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="tbody-facturas-completar"></tbody>
      </table>
      <div class="facturas-vacio" id="facturas-vacio-completar" style="display:none;">Este proveedor no tiene más facturas con saldo pendiente.</div>
      <div class="totales-box" id="totales-box-completar">
        <span class="desc">Monto a pagar (suma de facturas elegidas)</span>
        <span class="num mono" id="totales-valor-completar">0,00</span>
      </div>
    </div>

<div class="seccion">
      <h3>Medios de pago</h3>
      <div class="medio-nota">Transferencia necesita que el banco ya haya ejecutado el movimiento y dado el
        comprobante. Anticipo y Nota de Crédito consumen el saldo disponible de ese proveedor -- ambos solo
        en colones. El pago sigue Pendiente después de guardar; solo queda habilitado para Aplicar.</div>

<div class="caja-estado" id="caja-estado-pago" style="display:none;"></div>
      <div id="medios-lista"></div>
      <button class="btn btn-ghost" id="btn-agregar-medio" type="button">+ Agregar medio de pago</button>

<div class="form-field" id="completar-tipo-cambio-field" style="display:none; margin-top:14px;">
        <label for="completar-tipo-cambio">Tipo de cambio del día de pago</label>
        <input type="number" id="completar-tipo-cambio" min="0.000001" step="0.000001" placeholder="El oficial del día del comprobante">
      </div>

<div class="totales-box" id="cuadre-box-completar">
        <span class="desc">Diferencia contra el monto a pagar</span>
        <span class="num mono" id="cuadre-valor-completar">0,00</span>
      </div>
    </div>

<div class="reporte-overlay" id="reporte-overlay">
  <div class="reporte-wrap">
    <div class="reporte-acciones">
      <button class="btn btn-ghost" id="btn-excel-recibo">📊 Exportar a Excel</button>
      <button class="btn btn-ghost" id="btn-pdf-recibo">📄 Exportar a PDF</button>
      <button class="btn btn-ghost" id="btn-imprimir-recibo">🖨 Imprimir</button>
      <button class="btn btn-ghost" id="btn-correo-recibo" disabled title="Disponible cuando exista el conector de correo">✉ Enviar por correo</button>
      <button class="btn btn-primary" id="btn-cerrar-recibo">✕ Cerrar</button>
    </div>

<div class="rpt-header">
      <div>
        <div style="font-weight:700; font-size:15px;" id="rpt-empresa"></div>
        <div class="muted-cell" id="rpt-sucursal"></div>
      </div>
      <div style="text-align:right;">
        <div>Recibo de Pago</div>
        <div class="rpt-numero" id="rpt-numero"></div>
        <div class="muted-cell" id="rpt-fecha"></div>
      </div>
    </div>

<div class="rpt-tercero">Se ha girado un pago a: <b id="rpt-proveedor"></b></div>
    <div class="rpt-suma">
      <span>La suma de: <b id="rpt-letras"></b></span>
      <span class="caja mono" id="rpt-total"></span>
    </div>

<table class="rpt-table">
      <thead>
        <tr>
          <th>Cuenta por pagar</th>
          <th>Detalle</th>
          <th class="num">Diferencial Cambiario</th>
          <th class="num">Monto pagado</th>
          <th class="num">Saldo actual</th>
        </tr>
      </thead>
      <tbody id="rpt-tbody"></tbody>
    </table>

// ---------------- Etapa 1: Programar pago ----------------
  let proveedorElegido = null;
  const proveedorInput = document.getElementById('proveedor-input');
  const proveedorCaja = document.getElementById('proveedor-sugerencias');
  const proveedorElegidoBox = document.getElementById('proveedor-elegido-box');

const registroOverlay = document.getElementById('registro-overlay');
  function abrirRegistro(){
    limpiarProveedor();
    document.getElementById('reg-fecha').value = new Date().toLocaleDateString('sv-SE');
    document.getElementById('reg-moneda').value = 'CRC';
    document.getElementById('reg-observaciones').value = '';
    registroOverlay.classList.add('abierto');
    setTimeout(()=> proveedorInput.focus(), 30);
  }
  function cerrarRegistro(){ registroOverlay.classList.remove('abierto'); }
  document.getElementById('btn-nuevo').addEventListener('click', abrirRegistro);
  document.getElementById('btn-cerrar-registro').addEventListener('click', cerrarRegistro);
  document.getElementById('btn-cancelar-registro').addEventListener('click', cerrarRegistro);

const cuerpo = {
      proveedor_id: proveedorElegido.id,
      sucursal_id: SUCURSAL_ACTUAL.id,
      fecha: document.getElementById('reg-fecha').value,
      moneda: document.getElementById('reg-moneda').value,
      observaciones: document.getElementById('reg-observaciones').value.trim() || null,
      aplicaciones,
      creado_por: USUARIO_ACTUAL,
    };

// ---------------- Etapa 2: Completar pago ----------------
  const completarOverlay = document.getElementById('completar-overlay');
  let pagoEnEdicion = null;

// Gate "requiere caja abierta" -- a diferencia de Cobro a Cliente (incondicional), aquí solo
  // aplica cuando el pago sale en Efectivo desde caja (docs/diseno-cxp.md, capítulo del gate;
  // confirmado por el usuario: Transferencia/SINPE/Anticipo/NotaCredito nunca la necesitan). El
  // banner solo se muestra/valida si alguna fila de medios de pago quedó en Efectivo.
  let CAJA_ABIERTA_PAGO_ID = null;
  async function refrescarCajaEstadoPago(){
    const banner = document.getElementById('caja-estado-pago');
    const hayEfectivo = Array.from(document.querySelectorAll('#medios-lista .medio-tipo-select'))
      .some(sel => sel.value === 'Efectivo');
    if (!hayEfectivo){
      banner.style.display = 'none';
      CAJA_ABIERTA_PAGO_ID = null;
      return;
    }
    banner.style.display = '';
    banner.className = 'caja-estado';
    banner.textContent = 'Verificando caja abierta…';
    CAJA_ABIERTA_PAGO_ID = null;
    if (!pagoEnEdicion) return;
    try{
      const cajas = await llamarApi(`/ventas/cajas?sucursal_id=${pagoEnEdicion.sucursal_id}&estado=Abierta`);
      const propia = cajas.find(c => c.usuario_apertura === USUARIO_ACTUAL);
      if (propia){
        CAJA_ABIERTA_PAGO_ID = propia.id;
        banner.className = 'caja-estado ok';
        banner.textContent = `Caja abierta: Caja ${propia.numero} — ${propia.terminal}`;
      } else {
        banner.className = 'caja-estado falta';
        banner.textContent = `${USUARIO_ACTUAL} no tiene una caja abierta en esta sucursal -- abra una caja antes de pagar en Efectivo.`;
      }
    } catch(e){
      banner.className = 'caja-estado falta';
      banner.textContent = 'No se pudo verificar el estado de caja.';
    }
  }

// Cada medio de pago es su propia fila -- Transferencia necesita banco/cuenta/comprobante;
  // Anticipo/NotaCredito solo necesitan elegir el documento con saldo disponible (el motor
  // real vive en el backend, docs/diseno-cxp.md 3.7). `existente` es una fila de
  // `medios_pago` ya guardada (al reeditar un pago) o null (fila nueva en blanco).
  function crearFilaMedio(existente){
    const fila = document.createElement('div');
    fila.className = 'medio-fila';
    fila.innerHTML = `
      <div class="medio-fila-header">
        <select class="medio-tipo-select">
          <option value="Transferencia">Transferencia</option>
          <option value="SINPE">SINPE</option>
          <option value="Anticipo">Anticipo</option>
          <option value="NotaCredito">Nota de Crédito</option>
          <option value="Efectivo">Efectivo (desde caja)</option>
        </select>
        <button type="button" class="icon-btn danger medio-quitar" title="Quitar">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 6 6 18M6 6l12 12"/></svg>
        </button>
      </div>
      <div class="medio-campos medio-campos-transferencia">
        <div class="form-field"><label>Banco</label><select class="medio-banco"></select></div>
        <div class="form-field"><label>Cuenta bancaria</label><select class="medio-cuenta-bancaria"></select></div>
        <div class="form-field"><label>Comprobante</label><input type="text" class="medio-comprobante" placeholder="Número de comprobante"></div>
      </div>
      <div class="medio-campos medio-campos-anticipo una-columna" style="display:none;">
        <div class="form-field"><label>Anticipo disponible</label><select class="medio-anticipo-select"></select></div>
      </div>
      <div class="medio-campos medio-campos-nota una-columna" style="display:none;">
        <div class="form-field"><label>Nota de crédito disponible</label><select class="medio-nota-select"></select></div>
      </div>
      <div class="form-field"><label>Monto</label><input type="number" class="medio-monto" min="0.01" step="0.01"></div>
    `;

anticipoSel.innerHTML = ANTICIPOS_DISPONIBLES.length
      ? ANTICIPOS_DISPONIBLES.map(a=>`<option value="${a.id}">#${a.numero} — disponible ${formatearMonto(a.saldo)} CRC</option>`).join('')
      : '<option value="">Este proveedor no tiene anticipos disponibles</option>';
    notaSel.innerHTML = NOTAS_DISPONIBLES.length
      ? NOTAS_DISPONIBLES.map(n=>`<option value="${n.id}">#${n.numero} — disponible ${formatearMonto(n.saldo)} CRC</option>`).join('')
      : '<option value="">Este proveedor no tiene notas de crédito disponibles</option>';

if (existente){
      tipoSelect.value = existente.tipo_medio_pago;
      if (existente.tipo_medio_pago === 'Transferencia' || existente.tipo_medio_pago === 'SINPE'){
        bancoSel.value = existente.banco_id;
        pintarCuentasFila();
        cuentaSel.value = existente.cuenta_bancaria_id;
        fila.querySelector('.medio-comprobante').value = existente.comprobante || '';
      } else if (existente.tipo_medio_pago === 'Anticipo'){
        // El anticipo elegido pudo haber quedado sin saldo disponible en la lista general
        // (por ejemplo, si ESTE mismo medio ya lo estaba usando) -- se agrega igual para
        // no perder la selección al reeditar.
        if (existente.anticipo_proveedor_id && !ANTICIPOS_DISPONIBLES.some(a=>a.id === existente.anticipo_proveedor_id)){
          anticipoSel.insertAdjacentHTML('afterbegin', `<option value="${existente.anticipo_proveedor_id}">Anticipo ya elegido</option>`);
        }
        anticipoSel.value = existente.anticipo_proveedor_id;
      } else if (existente.tipo_medio_pago === 'NotaCredito'){
        if (existente.nota_proveedor_id && !NOTAS_DISPONIBLES.some(n=>n.id === existente.nota_proveedor_id)){
          notaSel.insertAdjacentHTML('afterbegin', `<option value="${existente.nota_proveedor_id}">Nota ya elegida</option>`);
        }
        notaSel.value = existente.nota_proveedor_id;
      }
      montoInput.value = existente.monto;
    }
    actualizarVisibilidad();
    return fila;
  }
  document.getElementById('btn-agregar-medio').addEventListener('click', ()=>{
    document.getElementById('medios-lista').appendChild(crearFilaMedio(null));
    recalcularCuadreCompletar();
    refrescarCajaEstadoPago();
  });

async function abrirCompletar(pagoId){
    const detalle = await llamarApi(`${API_PAGOS}/${pagoId}`);
    pagoEnEdicion = detalle;
    document.getElementById('completar-numero').textContent = `#${detalle.numero}`;
    document.getElementById('completar-proveedor-nombre').textContent = detalle.proveedor_nombre;
    document.getElementById('completar-tipo-cambio-field').style.display = detalle.moneda === 'CRC' ? 'none' : '';
    document.getElementById('completar-tipo-cambio').value = detalle.tipo_cambio && detalle.moneda !== 'CRC' ? detalle.tipo_cambio : '';
    document.getElementById('completar-observaciones').value = detalle.observaciones || '';

recalcularTotalesCompletar();
    refrescarCajaEstadoPago();
    completarOverlay.classList.add('abierto');
  }
  function cerrarCompletar(){ completarOverlay.classList.remove('abierto'); pagoEnEdicion = null; }
  document.getElementById('btn-cerrar-completar').addEventListener('click', cerrarCompletar);
  document.getElementById('btn-cancelar-completar').addEventListener('click', cerrarCompletar);

const filas = Array.from(document.querySelectorAll('#medios-lista .medio-fila'));
    if (filas.length === 0){ await modalAlert('Debe indicar al menos un medio de pago.'); return; }

if (tipo === 'Transferencia' || tipo === 'SINPE'){
        const bancoId = Number(fila.querySelector('.medio-banco').value);
        const cuentaBancariaId = Number(fila.querySelector('.medio-cuenta-bancaria').value);
        const comprobante = fila.querySelector('.medio-comprobante').value.trim();
        if (!bancoId || !cuentaBancariaId){ await modalAlert(`Debe elegir banco y cuenta bancaria en cada segmento de ${tipo}.`); return; }
        if (!comprobante){ await modalAlert(`El comprobante es obligatorio en cada segmento de ${tipo}.`); return; }
        medios_pago.push({tipo_medio_pago: tipo, monto, banco_id: bancoId, cuenta_bancaria_id: cuentaBancariaId, comprobante});
      } else if (tipo === 'Anticipo'){
        const anticipoId = Number(fila.querySelector('.medio-anticipo-select').value);
        if (!anticipoId){ await modalAlert('Debe elegir el anticipo a usar.'); return; }
        medios_pago.push({tipo_medio_pago:'Anticipo', monto, anticipo_proveedor_id: anticipoId});
      } else if (tipo === 'NotaCredito'){
        const notaId = Number(fila.querySelector('.medio-nota-select').value);
        if (!notaId){ await modalAlert('Debe elegir la nota de crédito a usar.'); return; }
        medios_pago.push({tipo_medio_pago:'NotaCredito', monto, nota_proveedor_id: notaId});
      } else if (tipo === 'Efectivo'){
        medios_pago.push({tipo_medio_pago:'Efectivo', monto});
      }
    }

if (medios_pago.some(m => m.tipo_medio_pago === 'Efectivo') && !CAJA_ABIERTA_PAGO_ID){
      await modalAlert(`Se requiere que exista una caja abierta para pagar en Efectivo -- ${USUARIO_ACTUAL} no tiene ninguna caja Abierta en esta sucursal.`, 'Falta caja abierta');
      return;
    }

// ---------------- Recibo de Pago ----------------
  const reporteOverlay = document.getElementById('reporte-overlay');
  let reciboActual = null;

async function abrirRecibo(pagoId){
    try{
      reciboActual = await llamarApi(`${API_PAGOS}/${pagoId}/recibo`);
      pintarRecibo(reciboActual);
      reporteOverlay.classList.add('abierto');
    } catch(e){ await modalAlert(e.message, 'No se pudo generar el recibo'); }
  }
  document.getElementById('btn-cerrar-recibo').addEventListener('click', ()=> reporteOverlay.classList.remove('abierto'));
  document.getElementById('btn-imprimir-recibo').addEventListener('click', ()=> window.print());
  document.getElementById('btn-excel-recibo').addEventListener('click', async (ev)=>{
    if (!reciboActual) return;
    const boton = ev.currentTarget;
    const textoOriginal = boton.textContent;
    boton.disabled = true; boton.textContent = 'Generando…';
    try{
      const resp = await fetch(`${API_BASE}${API_PAGOS}/${reciboActual.pago_id}/recibo/excel`);
      if (!resp.ok) throw new Error(`El servidor respondió ${resp.status}`);
      const blob = await resp.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = `recibo_pago_${reciboActual.pago_id}.xlsx`;
      document.body.appendChild(a); a.click(); a.remove();
      URL.revokeObjectURL(url);
      boton.textContent = '✓ Descargado';
    } catch(e){ await modalAlert(e.message); boton.textContent = textoOriginal; }
    finally { setTimeout(()=>{ boton.disabled = false; boton.textContent = textoOriginal; }, 1800); }
  });
  document.getElementById('btn-pdf-recibo').addEventListener('click', async (ev)=>{
    if (!reciboActual) return;
    const boton = ev.currentTarget;
    const textoOriginal = boton.textContent;
    boton.disabled = true; boton.textContent = 'Generando…';
    try{
      const resp = await fetch(`${API_BASE}${API_PAGOS}/${reciboActual.pago_id}/recibo/pdf`);
      if (!resp.ok) throw new Error(`El servidor respondió ${resp.status}`);
      const blob = await resp.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = `recibo_pago_${reciboActual.pago_id}.pdf`;
      document.body.appendChild(a); a.click(); a.remove();
      URL.revokeObjectURL(url);
      boton.textContent = '✓ Descargado';
    } catch(e){ await modalAlert(e.message); boton.textContent = textoOriginal; }
    finally { setTimeout(()=>{ boton.disabled = false; boton.textContent = textoOriginal; }, 1800); }
  });

if (accion === 'completar') await abrirCompletar(id);

if (accion === 'recibo') await abrirRecibo(id);

if (accion === 'aplicar'){
      const ok = await modalConfirm(`¿Aplicar el pago #${registro.numero} a ${registro.proveedor_nombre}? Esto calcula el diferencial cambiario, genera el asiento contable y el recibo de pago.`, 'Aplicar pago', 'primary', 'Aplicar');
      if (!ok) return;
      try{
        await llamarApi(`${API_PAGOS}/${id}/aplicar`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({aplicado_por: USUARIO_ACTUAL})});
        await cargar();
      } catch(e){
        if (e.message.includes('coincidencia real')){
          const confirmar = await modalConfirm(e.message, 'Comprobante repetido', 'primary', 'Sí, es una coincidencia real');
          if (confirmar){
            try{
              await llamarApi(`${API_PAGOS}/${id}/aplicar`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({aplicado_por: USUARIO_ACTUAL, confirma_repeticion:true})});
              await cargar();
            } catch(e2){ await modalAlert(e2.message, 'No se pudo aplicar'); }
          }
        } else {
          await modalAlert(e.message, 'No se pudo aplicar');
        }
      }
    }
    if (accion === 'anular'){
      const motivo = window.prompt('Motivo de anulación:');
      if (!motivo) return;
      try{
        await llamarApi(`${API_PAGOS}/${id}/anular`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({anulado_por: USUARIO_ACTUAL, motivo_anulacion: motivo})});
        await cargar();
      } catch(e){ await modalAlert(e.message, 'No se pudo anular'); }
    }
  });

['f-fecha-desde','f-fecha-hasta','f-proveedor','f-sucursal','f-estado'].forEach(id=>{
    document.getElementById(id).addEventListener('change', cargar);
  });
  ['f-monto-desde','f-monto-hasta','f-factura'].forEach(id=>{
    document.getElementById(id).addEventListener('input', ()=>{
      clearTimeout(window.__debouncePagos);
      window.__debouncePagos = setTimeout(cargar, 350);
    });
  });
  document.getElementById('btn-refrescar').addEventListener('click', async (ev)=>{
    const icono = ev.currentTarget.querySelector('svg');
    icono.classList.add('girando');
    await cargar();
    icono.classList.remove('girando');
  });

(async function iniciar(){
    try{ await cargarCatalogos(); }
    catch(e){ await modalAlert(e.message, 'No se pudieron cargar los catálogos'); }
    await cargar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Estado de Cuenta del Cliente</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1180px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:180px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:120px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

/* ---------- vista de reporte, pantalla completa ---------- */
  .reporte-overlay{display:none; position:fixed; inset:0; background:var(--bg); z-index:250; overflow-y:auto;}
  .reporte-overlay.abierto{display:block;}
  .reporte-wrap{max-width:960px; margin:0 auto; padding:28px 24px 80px;}
  .reporte-acciones{display:flex; justify-content:flex-end; gap:10px; margin-bottom:20px; flex-wrap:wrap;}

.rpt-header{margin-bottom:22px; padding-bottom:16px; border-bottom:2px solid var(--ink);}
  .rpt-empresa{font-size:13px; color:var(--ink-muted); text-align:center; margin-bottom:4px;}
  .rpt-titulo{font-size:20px; text-align:center; margin-bottom:2px;}
  .rpt-subtitulo{font-size:13px; text-align:center; color:var(--ink-muted); margin-bottom:2px;}
  .rpt-generado{font-size:11px; text-align:right; color:var(--ink-muted);}

.rpt-datos{
    display:grid; grid-template-columns:2fr 1fr; gap:6px 24px; margin-bottom:20px;
    font-size:13.5px;
  }
  .rpt-datos .campo{display:flex; gap:6px;}
  .rpt-datos .campo b{font-weight:700;}
  .rpt-limite{
    background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
    padding:8px 12px; font-size:12.5px; justify-self:end; align-self:start;
  }

.rpt-table{width:100%; border-collapse:collapse; font-size:13px; margin-bottom:14px;}
  .rpt-table th{
    background:var(--accent); color:var(--accent-ink); text-align:left; padding:8px 10px;
    font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  }
  .rpt-table th.num{text-align:right;}
  .rpt-table td{padding:7px 10px; border-bottom:1px solid var(--line);}
  .rpt-table td.num{text-align:right;}
  .rpt-table .vencida{color:var(--red-ink); font-weight:600;}

.rpt-totales{display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-size:13.5px;}
  .rpt-totales .fila{display:flex; gap:20px; width:220px; justify-content:space-between;}
  .rpt-totales .total{font-weight:700; font-size:15px; border-top:1px solid var(--ink); padding-top:6px;}

@media print{
    @page{ margin: 1.5cm; }
    body{background:#fff; color:#000;}
    /* El listado de fondo (.app) nunca se oculta solo -- al imprimir, "static" en vez de
       "fixed" lo deja fluir en el documento normal y aparece antes que el reporte en el
       orden del DOM, así que lo que sale impreso es la pantalla anterior (donde se eligió
       el cliente), no el reporte. Se imprime solo desde dentro del overlay (el botón
       Imprimir vive ahí), así que ocultar .app siempre es seguro. Bug real reportado por
       el usuario. */
    .app{display:none !important;}
    .reporte-acciones, .no-print{display:none !important;}
    .reporte-overlay{position:static; background:#fff;}
    .rpt-header{border-bottom-color:#000;}
    .rpt-table th{background:none !important; color:#000 !important; border-bottom:2px solid #000;}
    .rpt-table .vencida{color:#000 !important;}
    .rpt-totales .total{border-top-color:#000;}
  }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Estado de Cuenta del Cliente</span>
    </div>
    <div class="crumbs"><b>Cuentas a Cobrar</b> / Reportes / Estado de cuenta</div>
  </div>

<div class="filters">
    <div class="field texto">
      <label for="f-nombre">Nombre</label>
      <input type="text" id="f-nombre" placeholder="ej. Asociación…" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-codigo">Código</label>
      <input type="text" id="f-codigo" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-identificacion">Identificación</label>
      <input type="text" id="f-identificacion" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-activa">Activo</label>
      <select id="f-activa">
        <option value="">Todos</option>
        <option value="true">Sí</option>
        <option value="false">No</option>
      </select>
    </div>
    <div class="spacer"></div>
    <button class="btn btn-primary no-print" id="btn-estado-cuenta" disabled>🔍 Estado de cuenta</button>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <a class="btn btn-ghost no-print" id="btn-volver" data-nav-shell="clientes" href="clientes_ui.html">‹ Volver</a>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Código</th>
          <th>Identificación</th>
          <th>Nombre</th>
          <th>Correo electrónico</th>
          <th>Teléfono</th>
          <th class="num">Saldo a favor</th>
          <th class="num">CXC</th>
          <th>Activo</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay clientes con estos filtros</b>
      Ajusta los filtros para encontrar el cliente que buscás.
    </div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="reporte-overlay" id="reporte-overlay">
  <div class="reporte-wrap">
    <div class="reporte-acciones">
      <button class="btn btn-ghost" id="btn-excel">📊 Exportar a Excel</button>
      <button class="btn btn-ghost" id="btn-imprimir">🖨 Imprimir / PDF</button>
      <button class="btn btn-ghost" id="btn-correo" disabled title="Disponible cuando exista el conector de correo">✉ Enviar por correo</button>
      <button class="btn btn-primary" id="btn-cerrar-reporte">✕ Cerrar</button>
    </div>

<div class="rpt-header">
      <div class="rpt-generado" id="rpt-generado"></div>
      <div class="rpt-empresa" id="rpt-empresa"></div>
      <div class="rpt-titulo">Estado de cuenta del cliente</div>
      <div class="rpt-subtitulo" id="rpt-subtitulo"></div>
    </div>

<div class="rpt-datos">
      <div>
        <div class="campo"><b>Código:</b> <span id="rpt-codigo"></span></div>
        <div class="campo"><b>Cliente:</b> <span id="rpt-nombre"></span></div>
        <div class="campo"><b>Teléfono:</b> <span id="rpt-telefono"></span></div>
        <div class="campo"><b>Dirección:</b> <span id="rpt-direccion"></span></div>
        <div class="campo"><b>Término de pago:</b> <span id="rpt-termino"></span></div>
      </div>
      <div class="rpt-limite"><b>Límite de crédito:</b><br><span id="rpt-limite" class="mono"></span></div>
    </div>

<table class="rpt-table">
      <thead>
        <tr>
          <th>Número</th>
          <th>Tipo</th>
          <th>Fecha</th>
          <th>Vence</th>
          <th class="num">Monto</th>
          <th class="num">Saldo</th>
          <th class="num">Intereses</th>
          <th class="num">Días Hecha</th>
          <th class="num">Días Vence</th>
        </tr>
      </thead>
      <tbody id="rpt-tbody"></tbody>
    </table>

<div class="rpt-totales">
      <div class="fila"><span>Subtotal:</span> <span class="mono" id="rpt-subtotal"></span></div>
      <div class="fila total"><span>Total:</span> <span class="mono" id="rpt-total"></span></div>
    </div>
  </div>
</div>

async function llamarApi(path, opciones){
    let resp;
    try{ resp = await fetch(`${API_BASE}${path}`, opciones); }
    catch(e){ throw new Error('No se pudo conectar al backend (¿está corriendo uvicorn?)'); }
    if (!resp.ok){
      let detalle = `El servidor respondió ${resp.status}`;
      try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
      throw new Error(detalle);
    }
    return resp.json();
  }
  function formatearMonto(v, moneda){
    return `${Number(v||0).toLocaleString('es-CR', {minimumFractionDigits:2, maximumFractionDigits:2})}${moneda ? ' '+moneda : ''}`;
  }
  function formatearFecha(iso){
    if (!iso) return '—';
    const d = iso.includes('T') ? iso.slice(0,10) : iso;
    const [a,m,dd] = d.split('-');
    return `${dd}/${m}/${a}`;
  }
  function formatearFechaHora(iso){
    const d = new Date(iso);
    const pad = n => String(n).padStart(2,'0');
    let horas = d.getHours();
    const ampm = horas >= 12 ? 'p.m.' : 'a.m.';
    horas = horas % 12 || 12;
    return `${pad(d.getDate())}/${pad(d.getMonth()+1)}/${d.getFullYear()} ${horas}:${pad(d.getMinutes())} ${ampm}`;
  }

async function modalAlert(mensaje){ window.alert(mensaje); }

// ---------------- Listado con selección ----------------
  const tbody = document.getElementById('tbody-registros');
  const emptyState = document.getElementById('empty-state');
  const footNote = document.getElementById('foot-note');
  const btnEstadoCuenta = document.getElementById('btn-estado-cuenta');
  let REGISTROS = [];
  let clienteElegidoId = null;

function filaHtml(r){
    return `
      <tr data-id="${r.id}">
        <td><input type="radio" name="cliente-radio" value="${r.id}"></td>
        <td class="mono">${r.codigo || '—'}</td>
        <td class="mono">${r.identificacion_numero || '—'}</td>
        <td>${r.nombre}</td>
        <td class="muted-cell">${r.correo_electronico || '—'}</td>
        <td class="muted-cell">${r.telefono || '—'}</td>
        <td class="num mono">${formatearMonto(r.saldo_a_favor)}</td>
        <td class="num mono">${formatearMonto(r.cxc)}</td>
        <td>${r.activa ? 'Sí' : 'No'}</td>
      </tr>
    `;
  }

function construirQuery(){
    const params = new URLSearchParams();
    const nombre = document.getElementById('f-nombre').value.trim();
    const codigo = document.getElementById('f-codigo').value.trim();
    const identificacion = document.getElementById('f-identificacion').value.trim();
    const activa = document.getElementById('f-activa').value;
    const texto = nombre || codigo || identificacion;
    if (texto) params.set('texto', texto);
    if (activa) params.set('activa', activa);
    return params.toString();
  }

async function cargar(){
    tbody.innerHTML = `<tr><td colspan="9" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    emptyState.style.display = 'none';
    clienteElegidoId = null;
    btnEstadoCuenta.disabled = true;
    try{
      REGISTROS = await llamarApi(`${API_CLIENTES}?${construirQuery()}`);
      if (REGISTROS.length === 0){ tbody.innerHTML = ''; emptyState.style.display = 'block'; }
      else tbody.innerHTML = REGISTROS.map(filaHtml).join('');
      footNote.textContent = `${REGISTROS.length} cliente${REGISTROS.length === 1 ? '' : 's'}`;
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="9" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      footNote.textContent = '';
    }
  }

tbody.addEventListener('click', (ev)=>{
    const fila = ev.target.closest('tr[data-id]');
    if (!fila) return;
    const radio = fila.querySelector('input[type="radio"]');
    radio.checked = true;
    clienteElegidoId = Number(fila.dataset.id);
    tbody.querySelectorAll('tr').forEach(tr => tr.classList.toggle('elegida', tr === fila));
    btnEstadoCuenta.disabled = false;
  });

['f-nombre','f-codigo','f-identificacion'].forEach(id=>{
    document.getElementById(id).addEventListener('input', ()=>{
      clearTimeout(window.__debounceEC);
      window.__debounceEC = setTimeout(cargar, 350);
    });
  });
  document.getElementById('f-activa').addEventListener('change', cargar);
  document.getElementById('btn-refrescar').addEventListener('click', async (ev)=>{
    const icono = ev.currentTarget.querySelector('svg');
    icono.classList.add('girando');
    await cargar();
    icono.classList.remove('girando');
  });

// ---------------- Reporte ----------------
  const reporteOverlay = document.getElementById('reporte-overlay');
  let reporteActual = null;

document.getElementById('rpt-subtotal').textContent = formatearMonto(r.subtotal, r.facturas[0]?.moneda || 'CRC');
    document.getElementById('rpt-total').textContent = formatearMonto(r.total, r.facturas[0]?.moneda || 'CRC');
  }

btnEstadoCuenta.addEventListener('click', async ()=>{
    if (!clienteElegidoId) return;
    btnEstadoCuenta.disabled = true;
    btnEstadoCuenta.textContent = 'Generando…';
    try{
      reporteActual = await llamarApi(`${API_ESTADO_CUENTA}?cliente_id=${clienteElegidoId}`);
      pintarReporte(reporteActual);
      reporteOverlay.classList.add('abierto');
    } catch(e){
      await modalAlert(e.message);
    } finally {
      btnEstadoCuenta.disabled = false;
      btnEstadoCuenta.textContent = '🔍 Estado de cuenta';
    }
  });

(async function iniciar(){
    document.getElementById('f-nombre').focus();
    await cargar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Estado de Cuenta del Proveedor</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1180px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:180px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:120px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.rpt-datos{display:grid; grid-template-columns:2fr 1fr; gap:6px 24px; margin-bottom:20px; font-size:13.5px;}
  .rpt-datos .campo{display:flex; gap:6px;}
  .rpt-datos .campo b{font-weight:700;}

@media print{
    @page{ margin: 1.5cm; }
    body{background:#fff; color:#000;}
    /* Mismo bug real de estado_cuenta_cliente_ui.html: sin ocultar .app, lo que sale
       impreso es el listado de fondo (donde se eligió el proveedor), no el reporte. */
    .app{display:none !important;}
    .reporte-acciones, .no-print{display:none !important;}
    .reporte-overlay{position:static; background:#fff;}
    .rpt-header{border-bottom-color:#000;}
    .rpt-table th{background:none !important; color:#000 !important; border-bottom:2px solid #000;}
    .rpt-table .vencida{color:#000 !important;}
    .rpt-totales .total{border-top-color:#000;}
  }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Estado de Cuenta del Proveedor</span>
    </div>
    <div class="crumbs"><b>Cuentas a Pagar</b> / Reportes / Estado de cuenta</div>
  </div>

<div class="filters">
    <div class="field texto">
      <label for="f-nombre">Nombre</label>
      <input type="text" id="f-nombre" placeholder="ej. Mundo de Novedades…" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-codigo">Código</label>
      <input type="text" id="f-codigo" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-identificacion">Identificación</label>
      <input type="text" id="f-identificacion" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-activa">Activo</label>
      <select id="f-activa">
        <option value="">Todos</option>
        <option value="true">Sí</option>
        <option value="false">No</option>
      </select>
    </div>
    <div class="spacer"></div>
    <button class="btn btn-primary no-print" id="btn-estado-cuenta" disabled>🔍 Estado de cuenta</button>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <a class="btn btn-ghost no-print" id="btn-volver" data-nav-shell="proveedores" href="proveedores_ui.html">‹ Volver</a>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Código</th>
          <th>Identificación</th>
          <th>Nombre</th>
          <th>Correo electrónico</th>
          <th>Teléfono</th>
          <th class="num">CXP</th>
          <th>Activo</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay proveedores con estos filtros</b>
      Ajusta los filtros para encontrar el proveedor que buscás.
    </div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="rpt-header">
      <div class="rpt-generado" id="rpt-generado"></div>
      <div class="rpt-empresa" id="rpt-empresa"></div>
      <div class="rpt-titulo">Estado de cuenta del proveedor</div>
      <div class="rpt-subtitulo" id="rpt-subtitulo"></div>
    </div>

<div class="rpt-datos">
      <div>
        <div class="campo"><b>Código:</b> <span id="rpt-codigo"></span></div>
        <div class="campo"><b>Proveedor:</b> <span id="rpt-nombre"></span></div>
        <div class="campo"><b>Teléfono:</b> <span id="rpt-telefono"></span></div>
        <div class="campo"><b>Dirección:</b> <span id="rpt-direccion"></span></div>
        <div class="campo"><b>Término de pago:</b> <span id="rpt-termino"></span></div>
      </div>
    </div>

async function llamarApi(path, opciones){
    let resp;
    try{ resp = await fetch(`${API_BASE}${path}`, opciones); }
    catch(e){ throw new Error('No se pudo conectar al backend (¿está corriendo uvicorn?)'); }
    if (!resp.ok){
      let detalle = `El servidor respondió ${resp.status}`;
      try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
      throw new Error(detalle);
    }
    return resp.json();
  }
  function formatearMonto(v, moneda){
    return `${Number(v||0).toLocaleString('es-CR', {minimumFractionDigits:2, maximumFractionDigits:2})}${moneda ? ' '+moneda : ''}`;
  }
  function formatearFecha(iso){
    if (!iso) return '—';
    const d = iso.includes('T') ? iso.slice(0,10) : iso;
    const [a,m,dd] = d.split('-');
    return `${dd}/${m}/${a}`;
  }
  function formatearFechaHora(iso){
    const d = new Date(iso);
    const pad = n => String(n).padStart(2,'0');
    let horas = d.getHours();
    const ampm = horas >= 12 ? 'p.m.' : 'a.m.';
    horas = horas % 12 || 12;
    return `${pad(d.getDate())}/${pad(d.getMonth()+1)}/${d.getFullYear()} ${horas}:${pad(d.getMinutes())} ${ampm}`;
  }

async function modalAlert(mensaje){ window.alert(mensaje); }

const tbody = document.getElementById('tbody-registros');
  const emptyState = document.getElementById('empty-state');
  const footNote = document.getElementById('foot-note');
  const btnEstadoCuenta = document.getElementById('btn-estado-cuenta');
  let REGISTROS = [];
  let proveedorElegidoId = null;

function filaHtml(r){
    return `
      <tr data-id="${r.id}">
        <td><input type="radio" name="proveedor-radio" value="${r.id}"></td>
        <td class="mono">${r.codigo || '—'}</td>
        <td class="mono">${r.identificacion_numero || '—'}</td>
        <td>${r.nombre}</td>
        <td class="muted-cell">${r.correo_electronico || '—'}</td>
        <td class="muted-cell">${r.telefono || '—'}</td>
        <td class="num mono">${formatearMonto(r.cxp)}</td>
        <td>${r.activa ? 'Sí' : 'No'}</td>
      </tr>
    `;
  }

async function cargar(){
    tbody.innerHTML = `<tr><td colspan="8" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    emptyState.style.display = 'none';
    proveedorElegidoId = null;
    btnEstadoCuenta.disabled = true;
    try{
      REGISTROS = await llamarApi(`${API_PROVEEDORES}?${construirQuery()}`);
      if (REGISTROS.length === 0){ tbody.innerHTML = ''; emptyState.style.display = 'block'; }
      else tbody.innerHTML = REGISTROS.map(filaHtml).join('');
      footNote.textContent = `${REGISTROS.length} proveedor${REGISTROS.length === 1 ? '' : 'es'}`;
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="8" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      footNote.textContent = '';
    }
  }

tbody.addEventListener('click', (ev)=>{
    const fila = ev.target.closest('tr[data-id]');
    if (!fila) return;
    const radio = fila.querySelector('input[type="radio"]');
    radio.checked = true;
    proveedorElegidoId = Number(fila.dataset.id);
    tbody.querySelectorAll('tr').forEach(tr => tr.classList.toggle('elegida', tr === fila));
    btnEstadoCuenta.disabled = false;
  });

['f-nombre','f-codigo','f-identificacion'].forEach(id=>{
    document.getElementById(id).addEventListener('input', ()=>{
      clearTimeout(window.__debounceEP);
      window.__debounceEP = setTimeout(cargar, 350);
    });
  });
  document.getElementById('f-activa').addEventListener('change', cargar);
  document.getElementById('btn-refrescar').addEventListener('click', async (ev)=>{
    const icono = ev.currentTarget.querySelector('svg');
    icono.classList.add('girando');
    await cargar();
    icono.classList.remove('girando');
  });

const reporteOverlay = document.getElementById('reporte-overlay');
  let reporteActual = null;

btnEstadoCuenta.addEventListener('click', async ()=>{
    if (!proveedorElegidoId) return;
    btnEstadoCuenta.disabled = true;
    btnEstadoCuenta.textContent = 'Generando…';
    try{
      reporteActual = await llamarApi(`${API_ESTADO_CUENTA}?proveedor_id=${proveedorElegidoId}`);
      pintarReporte(reporteActual);
      reporteOverlay.classList.add('abierto');
    } catch(e){
      await modalAlert(e.message);
    } finally {
      btnEstadoCuenta.disabled = false;
      btnEstadoCuenta.textContent = '🔍 Estado de cuenta';
    }
  });

(async function iniciar(){
    document.getElementById('f-nombre').focus();
    await cargar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Informe de Antigüedad de Saldos (CxC)</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1400px; margin:0 auto; padding:28px 24px 64px;}

.topbar{
    display:flex; align-items:baseline; justify-content:space-between;
    padding-bottom:18px; border-bottom:2px solid var(--ink); margin-bottom:18px;
    gap:16px; flex-wrap:wrap;
  }
  .brand{display:flex; align-items:baseline; gap:10px;}
  .brand h1{font-size:22px; letter-spacing:.2px;}
  .brand .sep{color:var(--line-strong);}
  .brand .empresa{font-size:14px; color:var(--ink-muted);}
  .crumbs{font-size:12.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.06em;}
  .crumbs b{color:var(--ink); font-weight:600;}

.toolbar{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center;}
  .toolbar .spacer{flex:1;}

.panel{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:16px; box-shadow:var(--shadow);
  }
  .panel-titulo{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted); font-weight:700; margin-bottom:12px;}
  .filters{display:flex; flex-wrap:wrap; gap:14px; align-items:end;}
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:200px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}

.cols-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:8px 16px;}
  .cols-grid label{display:flex; align-items:center; gap:7px; font-size:13px; cursor:pointer;}

.btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.seccion-moneda{margin-bottom:22px;}
  .seccion-moneda h3{font-size:14px; margin-bottom:8px; color:var(--ink);}
  .table-wrap{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow);
  }
  table{border-collapse:collapse; width:100%; min-width:1000px;}
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-muted); font-weight:600; padding:10px 12px;
    border-bottom:1px solid var(--line-strong); background:var(--surface-2);
    white-space:nowrap;
  }
  th.num, td.num{text-align:right;}
  tbody td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--surface-2);}
  tbody tr.subtotal{background:var(--accent-soft); font-weight:700;}
  tbody tr.subtotal td{border-bottom:none;}
  .muted-cell{color:var(--ink-muted);}
  .vencida{color:var(--red-ink); font-weight:600;}

table.oculta-territorio .col-territorio,
  table.oculta-codigo .col-codigo,
  table.oculta-tipo .col-tipo,
  table.oculta-vence .col-vence,
  table.oculta-original .col-original,
  table.oculta-cambio .col-cambio,
  table.oculta-sinvencer .col-sinvencer,
  table.oculta-d130 .col-d130,
  table.oculta-d3160 .col-d3160,
  table.oculta-d6190 .col-d6190,
  table.oculta-d91120 .col-d91120,
  table.oculta-mas120 .col-mas120{ display:none; }

.total-general{
    display:flex; justify-content:flex-end; gap:16px; font-size:14.5px; font-weight:700;
    padding:14px 4px; border-top:2px solid var(--ink); margin-top:4px;
  }
  .empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}
  .foot-note{font-size:12px; color:var(--ink-muted); margin-top:10px;}

@media print{
    @page{ size: landscape; margin: 1.2cm; }
    body{background:#fff; color:#000;}
    .no-print{display:none !important;}
    .table-wrap{box-shadow:none; border-color:#000;}
    thead th{background:none !important; color:#000 !important; border-bottom:2px solid #000;}
    tbody tr.subtotal{background:none !important;}
    .vencida{color:#000 !important;}
  }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Informe de Antigüedad de Saldos</span>
    </div>
    <div class="crumbs"><b>Cuentas a Cobrar</b> / Reportes / Antigüedad de saldos</div>
  </div>

<div class="panel no-print">
    <div class="panel-titulo">Filtros</div>
    <div class="filters">
      <div class="field">
        <label for="f-fecha">Fecha de corte</label>
        <input type="date" id="f-fecha">
      </div>
      <div class="field">
        <label for="f-sucursal">Local</label>
        <select id="f-sucursal"><option value="">Todos</option></select>
      </div>
      <div class="field">
        <label for="f-territorio">Territorio</label>
        <select id="f-territorio"><option value="">Todos</option></select>
      </div>
      <div class="field texto">
        <label for="f-texto">Cliente (nombre, código o factura)</label>
        <input type="text" id="f-texto" placeholder="ej. Asociación…" autocomplete="off">
      </div>
      <div class="spacer"></div>
      <button class="btn btn-primary" id="btn-generar">🔍 Generar informe</button>
    </div>
  </div>

<details class="panel no-print" id="panel-columnas">
    <summary class="panel-titulo" style="cursor:pointer; display:inline-block;">Mostrar columnas</summary>
    <div class="cols-grid" style="margin-top:12px;">
      <label><input type="checkbox" data-col="territorio" checked> Territorio</label>
      <label><input type="checkbox" data-col="codigo" checked> Código</label>
      <label><input type="checkbox" data-col="tipo" checked> Tipo</label>
      <label><input type="checkbox" data-col="vence" checked> Fecha vencimiento</label>
      <label><input type="checkbox" data-col="original" checked> Saldo original</label>
      <label><input type="checkbox" data-col="cambio" checked> Tipo de cambio</label>
      <label><input type="checkbox" data-col="sinvencer" checked> Sin vencer</label>
      <label><input type="checkbox" data-col="d130" checked> 1-30 días</label>
      <label><input type="checkbox" data-col="d3160" checked> 31-60 días</label>
      <label><input type="checkbox" data-col="d6190" checked> 61-90 días</label>
      <label><input type="checkbox" data-col="d91120" checked> 91-120 días</label>
      <label><input type="checkbox" data-col="mas120" checked> Más de 120 días</label>
    </div>
  </details>

<div class="toolbar no-print">
    <div class="spacer"></div>
    <button class="btn btn-ghost" id="btn-excel">📊 Exportar a Excel</button>
    <button class="btn btn-ghost" id="btn-pdf">📄 Exportar a PDF</button>
    <button class="btn btn-ghost" id="btn-imprimir">🖨 Imprimir</button>
    <button class="btn btn-ghost" id="btn-correo" disabled title="Disponible cuando exista el conector de correo">✉ Enviar por correo</button>
    <a class="btn btn-ghost" id="btn-volver" data-nav-shell="clientes" href="clientes_ui.html">‹ Volver</a>
  </div>

<div class="foot-note" id="foot-note">Ajuste los filtros y presione «Generar informe».</div>

</div>

async function llamarApi(path, opciones){
    let resp;
    try{ resp = await fetch(`${API_BASE}${path}`, opciones); }
    catch(e){ throw new Error('No se pudo conectar al backend (¿está corriendo uvicorn?)'); }
    if (!resp.ok){
      let detalle = `El servidor respondió ${resp.status}`;
      try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
      throw new Error(detalle);
    }
    return resp.json();
  }
  function formatearMonto(v){
    return Number(v||0).toLocaleString('es-CR', {minimumFractionDigits:2, maximumFractionDigits:2});
  }
  function formatearFecha(iso){
    if (!iso) return '—';
    const d = iso.includes('T') ? iso.slice(0,10) : iso;
    const [a,m,dd] = d.split('-');
    return `${dd}/${m}/${a}`;
  }
  function formatearFechaHora(iso){
    const d = new Date(iso);
    const pad = n => String(n).padStart(2,'0');
    let horas = d.getHours();
    const ampm = horas >= 12 ? 'p.m.' : 'a.m.';
    horas = horas % 12 || 12;
    return `${pad(d.getDate())}/${pad(d.getMonth()+1)}/${d.getFullYear()} ${horas}:${pad(d.getMinutes())} ${ampm}`;
  }
  async function modalAlert(mensaje){ window.alert(mensaje); }

async function cargarSelect(path, selectId, campoTexto){
    try{
      const filas = await llamarApi(path);
      const sel = document.getElementById(selectId);
      filas.forEach(f=>{
        const opt = document.createElement('option');
        opt.value = f.id; opt.textContent = f[campoTexto];
        sel.appendChild(opt);
      });
    }catch(e){ /* si el catálogo no carga, el filtro simplemente queda en "Todos" */ }
  }

function construirQuery(){
    const params = new URLSearchParams();
    const fecha = document.getElementById('f-fecha').value;
    const sucursal = document.getElementById('f-sucursal').value;
    const territorio = document.getElementById('f-territorio').value;
    const texto = document.getElementById('f-texto').value.trim();
    if (fecha) params.set('fecha_corte', fecha);
    if (sucursal) params.set('sucursal_id', sucursal);
    if (territorio) params.set('territorio_id', territorio);
    if (texto) params.set('texto', texto);
    return params.toString();
  }

const seccionesWrap = document.getElementById('secciones-wrap');
  const totalGeneral = document.getElementById('total-general');
  const footNote = document.getElementById('foot-note');
  const btnGenerar = document.getElementById('btn-generar');
  let reporteActual = null;

function filaHtml(f){
    return `
      <tr>
        <td class="col-territorio">${f.territorio_nombre || '—'}</td>
        <td class="mono col-codigo">${f.cliente_codigo || '—'}</td>
        <td>${f.cliente_nombre}</td>
        <td class="col-tipo">${f.tipo}</td>
        <td class="mono">${f.numero_factura}</td>
        <td>${formatearFecha(f.fecha)}</td>
        <td class="col-vence ${f.dias_atraso > 0 ? 'vencida' : ''}">${formatearFecha(f.fecha_vencimiento)}</td>
        <td class="num mono col-original">${formatearMonto(f.monto)}</td>
        <td class="num mono">${formatearMonto(f.saldo)}</td>
        <td class="num mono col-cambio">${f.moneda !== 'CRC' ? Number(f.tipo_cambio).toLocaleString('es-CR',{minimumFractionDigits:4, maximumFractionDigits:4}) : '—'}</td>
        <td class="num mono col-sinvencer">${f.sin_vencer ? formatearMonto(f.sin_vencer) : '—'}</td>
        <td class="num mono col-d130">${f.d1_30 ? formatearMonto(f.d1_30) : '—'}</td>
        <td class="num mono col-d3160">${f.d31_60 ? formatearMonto(f.d31_60) : '—'}</td>
        <td class="num mono col-d6190">${f.d61_90 ? formatearMonto(f.d61_90) : '—'}</td>
        <td class="num mono col-d91120">${f.d91_120 ? formatearMonto(f.d91_120) : '—'}</td>
        <td class="num mono col-mas120">${f.mas_120 ? formatearMonto(f.mas_120) : '—'}</td>
      </tr>
    `;
  }

function subtotalHtml(seccion){
    const s = seccion.subtotales;
    return `
      <tr class="subtotal">
        <td class="col-territorio"></td><td class="col-codigo"></td>
        <td colspan="6">Subtotal ${seccion.moneda}</td>
        <td class="num mono col-original"></td>
        <td class="num mono">${formatearMonto(seccion.total)}</td>
        <td class="col-cambio"></td>
        <td class="num mono col-sinvencer">${formatearMonto(s.sin_vencer)}</td>
        <td class="num mono col-d130">${formatearMonto(s.d1_30)}</td>
        <td class="num mono col-d3160">${formatearMonto(s.d31_60)}</td>
        <td class="num mono col-d6190">${formatearMonto(s.d61_90)}</td>
        <td class="num mono col-d91120">${formatearMonto(s.d91_120)}</td>
        <td class="num mono col-mas120">${formatearMonto(s.mas_120)}</td>
      </tr>
    `;
  }

function seccionHtml(seccion){
    return `
      <div class="seccion-moneda">
        <h3>Moneda: ${seccion.moneda}</h3>
        <div class="table-wrap">
          <table id="tabla-${seccion.moneda}">
            <thead>
              <tr>
                <th class="col-territorio">Territorio</th>
                <th class="col-codigo">Código</th>
                <th>Cliente</th>
                <th class="col-tipo">Tipo</th>
                <th>Número</th>
                <th>Fecha</th>
                <th class="col-vence">Vence</th>
                <th class="num col-original">Saldo original</th>
                <th class="num">Saldo actual</th>
                <th class="num col-cambio">T. Cambio</th>
                <th class="num col-sinvencer">Sin vencer</th>
                <th class="num col-d130">1-30 Días</th>
                <th class="num col-d3160">31-60 Días</th>
                <th class="num col-d6190">61-90 Días</th>
                <th class="num col-d91120">91-120 Días</th>
                <th class="num col-mas120">Más de 120</th>
              </tr>
            </thead>
            <tbody>
              ${seccion.filas.map(filaHtml).join('')}
              ${subtotalHtml(seccion)}
            </tbody>
          </table>
        </div>
      </div>
    `;
  }

function pintarReporte(r){
    document.getElementById('rpt-generado').textContent =
      `Generado ${formatearFechaHora(r.generado_en)} · contador · Corte al ${formatearFecha(r.fecha_corte)} · ${r.cantidad_registros} registro(s)`;

if (r.secciones.length === 0){
      seccionesWrap.innerHTML = `<div class="empty-state"><b>No hay facturas con saldo pendiente</b>Ajuste los filtros o la fecha de corte.</div>`;
      totalGeneral.style.display = 'none';
    } else {
      seccionesWrap.innerHTML = r.secciones.map(seccionHtml).join('');
      totalGeneral.style.display = 'flex';
      totalGeneral.innerHTML = `<span>Total general (sin convertir monedas):</span> <span class="mono">${formatearMonto(r.total_general)}</span>`;
      aplicarColumnas();
    }
    footNote.textContent = '';
  }

async function generar(){
    btnGenerar.disabled = true;
    const textoOriginal = btnGenerar.textContent;
    btnGenerar.textContent = 'Generando…';
    footNote.textContent = 'Generando…';
    try{
      reporteActual = await llamarApi(`${API_REPORTE}?${construirQuery()}`);
      pintarReporte(reporteActual);
    } catch(e){
      seccionesWrap.innerHTML = '';
      totalGeneral.style.display = 'none';
      footNote.textContent = '';
      await modalAlert(e.message);
    } finally {
      btnGenerar.disabled = false;
      btnGenerar.textContent = textoOriginal;
    }
  }

btnGenerar.addEventListener('click', generar);
  document.getElementById('btn-imprimir').addEventListener('click', ()=> window.print());

// Sucursal en la que se está trabajando (docs/diseno-cxc.md Capítulo 6): el shell la
  // conoce (se elige al entrar a Fénix) y la envía por postMessage a cada pantalla
  // embebida -- aquí se usa como valor por defecto del filtro, nunca como una restricción
  // fija (el usuario sigue pudiendo elegir otra u "Todos"). Mismo patrón ya usado en
  // facturas_cobrar_ui.html. Fuera del shell (pantalla abierta suelta) no llega el mensaje.
  let SUCURSAL_ACTUAL = null;
  window.addEventListener('message', (ev)=>{
    if (!ev.data || ev.data.tipo !== 'fenix-sucursal') return;
    SUCURSAL_ACTUAL = {id: ev.data.sucursal_id, nombre: ev.data.sucursal_nombre};
    const fSucursal = document.getElementById('f-sucursal');
    if (fSucursal && !fSucursal.value) { fSucursal.value = String(SUCURSAL_ACTUAL.id); generar(); }
  });
  // Si esta pantalla carga después de que el shell ya difundió la sucursal (ej. al volver
  // de sesión con la sucursal ya elegida), no hay que esperar una difusión que ya pasó --
  // se pide directamente.
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-sucursal'}, '*');

(async function iniciar(){
    document.getElementById('f-fecha').valueAsDate = new Date();
    await Promise.all([
      cargarSelect(API_SUCURSALES, 'f-sucursal', 'nombre'),
      cargarSelect(API_TERRITORIOS, 'f-territorio', 'nombre'),
    ]);
    document.getElementById('f-texto').focus();
    await generar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Informe de Antigüedad de Saldos (CxP)</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1400px; margin:0 auto; padding:28px 24px 64px;}

.toolbar{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center;}
  .toolbar .spacer{flex:1;}

.cols-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:8px 16px;}
  .cols-grid label{display:flex; align-items:center; gap:7px; font-size:13px; cursor:pointer;}

.btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

table.oculta-codigo .col-codigo,
  table.oculta-tipo .col-tipo,
  table.oculta-vence .col-vence,
  table.oculta-original .col-original,
  table.oculta-cambio .col-cambio,
  table.oculta-sinvencer .col-sinvencer,
  table.oculta-d130 .col-d130,
  table.oculta-d3160 .col-d3160,
  table.oculta-d6190 .col-d6190,
  table.oculta-d91120 .col-d91120,
  table.oculta-mas120 .col-mas120{ display:none; }

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Informe de Antigüedad de Saldos</span>
    </div>
    <div class="crumbs"><b>Cuentas a Pagar</b> / Reportes / Antigüedad de saldos</div>
  </div>

<div class="panel no-print">
    <div class="panel-titulo">Filtros</div>
    <div class="filters">
      <div class="field">
        <label for="f-fecha">Fecha de corte</label>
        <input type="date" id="f-fecha">
      </div>
      <div class="field">
        <label for="f-sucursal">Local</label>
        <select id="f-sucursal"><option value="">Todos</option></select>
      </div>
      <div class="field texto">
        <label for="f-texto">Proveedor (nombre, código o factura)</label>
        <input type="text" id="f-texto" placeholder="ej. Distribuidora…" autocomplete="off">
      </div>
      <div class="spacer"></div>
      <button class="btn btn-primary" id="btn-generar">🔍 Generar informe</button>
    </div>
  </div>

<details class="panel no-print" id="panel-columnas">
    <summary class="panel-titulo" style="cursor:pointer; display:inline-block;">Mostrar columnas</summary>
    <div class="cols-grid" style="margin-top:12px;">
      <label><input type="checkbox" data-col="codigo" checked> Código</label>
      <label><input type="checkbox" data-col="tipo" checked> Tipo</label>
      <label><input type="checkbox" data-col="vence" checked> Fecha vencimiento</label>
      <label><input type="checkbox" data-col="original" checked> Saldo original</label>
      <label><input type="checkbox" data-col="cambio" checked> Tipo de cambio</label>
      <label><input type="checkbox" data-col="sinvencer" checked> Sin vencer</label>
      <label><input type="checkbox" data-col="d130" checked> 1-30 días</label>
      <label><input type="checkbox" data-col="d3160" checked> 31-60 días</label>
      <label><input type="checkbox" data-col="d6190" checked> 61-90 días</label>
      <label><input type="checkbox" data-col="d91120" checked> 91-120 días</label>
      <label><input type="checkbox" data-col="mas120" checked> Más de 120 días</label>
    </div>
  </details>

<div class="toolbar no-print">
    <div class="spacer"></div>
    <button class="btn btn-ghost" id="btn-excel">📊 Exportar a Excel</button>
    <button class="btn btn-ghost" id="btn-pdf">📄 Exportar a PDF</button>
    <button class="btn btn-ghost" id="btn-imprimir">🖨 Imprimir</button>
    <button class="btn btn-ghost" id="btn-correo" disabled title="Disponible cuando exista el conector de correo">✉ Enviar por correo</button>
    <a class="btn btn-ghost" id="btn-volver" data-nav-shell="proveedores" href="proveedores_ui.html">‹ Volver</a>
  </div>

<div class="foot-note" id="foot-note">Ajuste los filtros y presione «Generar informe».</div>

</div>

async function llamarApi(path, opciones){
    let resp;
    try{ resp = await fetch(`${API_BASE}${path}`, opciones); }
    catch(e){ throw new Error('No se pudo conectar al backend (¿está corriendo uvicorn?)'); }
    if (!resp.ok){
      let detalle = `El servidor respondió ${resp.status}`;
      try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
      throw new Error(detalle);
    }
    return resp.json();
  }
  function formatearMonto(v){
    return Number(v||0).toLocaleString('es-CR', {minimumFractionDigits:2, maximumFractionDigits:2});
  }
  function formatearFecha(iso){
    if (!iso) return '—';
    const d = iso.includes('T') ? iso.slice(0,10) : iso;
    const [a,m,dd] = d.split('-');
    return `${dd}/${m}/${a}`;
  }
  function formatearFechaHora(iso){
    const d = new Date(iso);
    const pad = n => String(n).padStart(2,'0');
    let horas = d.getHours();
    const ampm = horas >= 12 ? 'p.m.' : 'a.m.';
    horas = horas % 12 || 12;
    return `${pad(d.getDate())}/${pad(d.getMonth()+1)}/${d.getFullYear()} ${horas}:${pad(d.getMinutes())} ${ampm}`;
  }
  async function modalAlert(mensaje){ window.alert(mensaje); }

function construirQuery(){
    const params = new URLSearchParams();
    const fecha = document.getElementById('f-fecha').value;
    const sucursal = document.getElementById('f-sucursal').value;
    const texto = document.getElementById('f-texto').value.trim();
    if (fecha) params.set('fecha_corte', fecha);
    if (sucursal) params.set('sucursal_id', sucursal);
    if (texto) params.set('texto', texto);
    return params.toString();
  }

function filaHtml(f){
    return `
      <tr>
        <td class="mono col-codigo">${f.proveedor_codigo || '—'}</td>
        <td>${f.proveedor_nombre}</td>
        <td class="col-tipo">${f.tipo}</td>
        <td class="mono">${f.numero_factura}</td>
        <td>${formatearFecha(f.fecha)}</td>
        <td class="col-vence ${f.dias_atraso > 0 ? 'vencida' : ''}">${formatearFecha(f.fecha_vencimiento)}</td>
        <td class="num mono col-original">${formatearMonto(f.monto)}</td>
        <td class="num mono">${formatearMonto(f.saldo)}</td>
        <td class="num mono col-cambio">${f.moneda !== 'CRC' ? Number(f.tipo_cambio).toLocaleString('es-CR',{minimumFractionDigits:4, maximumFractionDigits:4}) : '—'}</td>
        <td class="num mono col-sinvencer">${f.sin_vencer ? formatearMonto(f.sin_vencer) : '—'}</td>
        <td class="num mono col-d130">${f.d1_30 ? formatearMonto(f.d1_30) : '—'}</td>
        <td class="num mono col-d3160">${f.d31_60 ? formatearMonto(f.d31_60) : '—'}</td>
        <td class="num mono col-d6190">${f.d61_90 ? formatearMonto(f.d61_90) : '—'}</td>
        <td class="num mono col-d91120">${f.d91_120 ? formatearMonto(f.d91_120) : '—'}</td>
        <td class="num mono col-mas120">${f.mas_120 ? formatearMonto(f.mas_120) : '—'}</td>
      </tr>
    `;
  }

function subtotalHtml(seccion){
    const s = seccion.subtotales;
    return `
      <tr class="subtotal">
        <td class="col-codigo"></td>
        <td colspan="6">Subtotal ${seccion.moneda}</td>
        <td class="num mono col-original"></td>
        <td class="num mono">${formatearMonto(seccion.total)}</td>
        <td class="col-cambio"></td>
        <td class="num mono col-sinvencer">${formatearMonto(s.sin_vencer)}</td>
        <td class="num mono col-d130">${formatearMonto(s.d1_30)}</td>
        <td class="num mono col-d3160">${formatearMonto(s.d31_60)}</td>
        <td class="num mono col-d6190">${formatearMonto(s.d61_90)}</td>
        <td class="num mono col-d91120">${formatearMonto(s.d91_120)}</td>
        <td class="num mono col-mas120">${formatearMonto(s.mas_120)}</td>
      </tr>
    `;
  }

function seccionHtml(seccion){
    return `
      <div class="seccion-moneda">
        <h3>Moneda: ${seccion.moneda}</h3>
        <div class="table-wrap">
          <table id="tabla-${seccion.moneda}">
            <thead>
              <tr>
                <th class="col-codigo">Código</th>
                <th>Proveedor</th>
                <th class="col-tipo">Tipo</th>
                <th>Número</th>
                <th>Fecha</th>
                <th class="col-vence">Vence</th>
                <th class="num col-original">Saldo original</th>
                <th class="num">Saldo actual</th>
                <th class="num col-cambio">T. Cambio</th>
                <th class="num col-sinvencer">Sin vencer</th>
                <th class="num col-d130">1-30 Días</th>
                <th class="num col-d3160">31-60 Días</th>
                <th class="num col-d6190">61-90 Días</th>
                <th class="num col-d91120">91-120 Días</th>
                <th class="num col-mas120">Más de 120</th>
              </tr>
            </thead>
            <tbody>
              ${seccion.filas.map(filaHtml).join('')}
              ${subtotalHtml(seccion)}
            </tbody>
          </table>
        </div>
      </div>
    `;
  }

btnGenerar.addEventListener('click', generar);
  document.getElementById('btn-imprimir').addEventListener('click', ()=> window.print());

// Sucursal en la que se está trabajando (docs/diseno-cxc.md Capítulo 6): el shell la
  // conoce (se elige al entrar a Fénix) y la envía por postMessage a cada pantalla
  // embebida -- aquí se usa como valor por defecto del filtro, nunca como una restricción
  // fija (el usuario sigue pudiendo elegir otra u "Todos"). Mismo patrón ya usado en
  // facturas_cobrar_ui.html. Fuera del shell (pantalla abierta suelta) no llega el mensaje.
  let SUCURSAL_ACTUAL = null;
  window.addEventListener('message', (ev)=>{
    if (!ev.data || ev.data.tipo !== 'fenix-sucursal') return;
    SUCURSAL_ACTUAL = {id: ev.data.sucursal_id, nombre: ev.data.sucursal_nombre};
    const fSucursal = document.getElementById('f-sucursal');
    if (fSucursal && !fSucursal.value) { fSucursal.value = String(SUCURSAL_ACTUAL.id); generar(); }
  });
  // Si esta pantalla carga después de que el shell ya difundió la sucursal (ej. al volver
  // de sesión con la sucursal ya elegida), no hay que esperar una difusión que ya pasó --
  // se pide directamente.
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-sucursal'}, '*');

(async function iniciar(){
    document.getElementById('f-fecha').valueAsDate = new Date();
    await cargarSelect(API_SUCURSALES, 'f-sucursal', 'nombre');
    document.getElementById('f-texto').focus();
    await generar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Reporte de Cobros Recibidos (CxC)</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1300px; margin:0 auto; padding:28px 24px 64px;}

.toolbar{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center;}
  .toolbar .spacer{flex:1;}

.cols-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:8px 16px;}
  .cols-grid label{display:flex; align-items:center; gap:7px; font-size:13px; cursor:pointer;}

.btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.seccion-moneda{margin-bottom:22px;}
  .seccion-moneda h3{font-size:14px; margin-bottom:8px; color:var(--ink);}
  .table-wrap{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow);
  }
  table{border-collapse:collapse; width:100%; min-width:900px;}
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-muted); font-weight:600; padding:10px 12px;
    border-bottom:1px solid var(--line-strong); background:var(--surface-2);
    white-space:nowrap;
  }
  th.num, td.num{text-align:right;}
  tbody td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--surface-2);}
  tbody tr.subtotal{background:var(--accent-soft); font-weight:700;}
  tbody tr.subtotal td{border-bottom:none;}
  .muted-cell{color:var(--ink-muted);}

table.oculta-territorio .col-territorio,
  table.oculta-codigo .col-codigo,
  table.oculta-sucursal .col-sucursal,
  table.oculta-estado .col-estado,
  table.oculta-medios .col-medios,
  table.oculta-cambio .col-cambio{ display:none; }

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Reporte de Cobros Recibidos</span>
    </div>
    <div class="crumbs"><b>Cuentas a Cobrar</b> / Reportes / Cobros recibidos</div>
  </div>

<div class="panel no-print">
    <div class="panel-titulo">Filtros</div>
    <div class="filters">
      <div class="field">
        <label for="f-desde">Desde</label>
        <input type="date" id="f-desde">
      </div>
      <div class="field">
        <label for="f-hasta">Hasta</label>
        <input type="date" id="f-hasta">
      </div>
      <div class="field">
        <label for="f-sucursal">Local</label>
        <select id="f-sucursal"><option value="">Todos</option></select>
      </div>
      <div class="field">
        <label for="f-territorio">Territorio</label>
        <select id="f-territorio"><option value="">Todos</option></select>
      </div>
      <div class="field">
        <label for="f-estado">Estado</label>
        <select id="f-estado">
          <option value="">Todos</option>
          <option value="Aplicado" selected>Aplicado</option>
          <option value="Pendiente">Pendiente</option>
          <option value="Anulado">Anulado</option>
        </select>
      </div>
      <div class="field texto">
        <label for="f-texto">Cliente (nombre, código o número de cobro)</label>
        <input type="text" id="f-texto" placeholder="ej. Asociación…" autocomplete="off">
      </div>
      <div class="spacer"></div>
      <button class="btn btn-primary" id="btn-generar">🔍 Generar informe</button>
    </div>
  </div>

<div class="toolbar no-print">
    <div class="spacer"></div>
    <button class="btn btn-ghost" id="btn-excel">📊 Exportar a Excel</button>
    <button class="btn btn-ghost" id="btn-pdf">📄 Exportar a PDF</button>
    <button class="btn btn-ghost" id="btn-imprimir">🖨 Imprimir</button>
    <button class="btn btn-ghost" id="btn-correo" disabled title="Disponible cuando exista el conector de correo">✉ Enviar por correo</button>
    <a class="btn btn-ghost" id="btn-volver" data-nav-shell="cobros" href="cobros_ui.html">‹ Volver</a>
  </div>

<div class="foot-note" id="foot-note">Ajuste los filtros y presione «Generar informe».</div>

</div>

async function llamarApi(path, opciones){
    let resp;
    try{ resp = await fetch(`${API_BASE}${path}`, opciones); }
    catch(e){ throw new Error('No se pudo conectar al backend (¿está corriendo uvicorn?)'); }
    if (!resp.ok){
      let detalle = `El servidor respondió ${resp.status}`;
      try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
      throw new Error(detalle);
    }
    return resp.json();
  }
  function formatearMonto(v){
    return Number(v||0).toLocaleString('es-CR', {minimumFractionDigits:2, maximumFractionDigits:2});
  }
  function formatearFecha(iso){
    if (!iso) return '—';
    const d = iso.includes('T') ? iso.slice(0,10) : iso;
    const [a,m,dd] = d.split('-');
    return `${dd}/${m}/${a}`;
  }
  function formatearFechaHora(iso){
    const d = new Date(iso);
    const pad = n => String(n).padStart(2,'0');
    let horas = d.getHours();
    const ampm = horas >= 12 ? 'p.m.' : 'a.m.';
    horas = horas % 12 || 12;
    return `${pad(d.getDate())}/${pad(d.getMonth()+1)}/${d.getFullYear()} ${horas}:${pad(d.getMinutes())} ${ampm}`;
  }
  function pillEstado(estado){
    const clase = estado === 'Aplicado' ? 'pill-aplicado' : estado === 'Anulado' ? 'pill-anulado' : 'pill-pendiente';
    return `<span class="pill ${clase}">${estado}</span>`;
  }
  async function modalAlert(mensaje){ window.alert(mensaje); }

function construirQuery(){
    const params = new URLSearchParams();
    const desde = document.getElementById('f-desde').value;
    const hasta = document.getElementById('f-hasta').value;
    const sucursal = document.getElementById('f-sucursal').value;
    const territorio = document.getElementById('f-territorio').value;
    const estado = document.getElementById('f-estado').value;
    const texto = document.getElementById('f-texto').value.trim();
    if (desde) params.set('fecha_desde', desde);
    if (hasta) params.set('fecha_hasta', hasta);
    if (sucursal) params.set('sucursal_id', sucursal);
    if (territorio) params.set('territorio_id', territorio);
    params.set('estado', estado); // vacío = Todos, se envía igual para no heredar el default del backend
    if (texto) params.set('texto', texto);
    return params.toString();
  }

function seccionHtml(seccion){
    return `
      <div class="seccion-moneda">
        <h3>Moneda: ${seccion.moneda}</h3>
        <div class="table-wrap">
          <table id="tabla-${seccion.moneda}">
            <thead>
              <tr>
                <th class="col-territorio">Territorio</th>
                <th class="col-codigo">Código</th>
                <th>Cliente</th>
                <th class="col-sucursal">Sucursal</th>
                <th>Número</th>
                <th>Fecha</th>
                <th class="col-estado">Estado</th>
                <th class="col-medios">Medio de pago</th>
                <th class="num">Monto</th>
                <th class="num col-cambio">T. Cambio</th>
              </tr>
            </thead>
            <tbody>
              ${seccion.filas.map(filaHtml).join('')}
              <tr class="subtotal">
                <td class="col-territorio"></td><td class="col-codigo"></td>
                <td colspan="6">Subtotal ${seccion.moneda}</td>
                <td class="num mono">${formatearMonto(seccion.total)}</td>
                <td class="col-cambio"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    `;
  }

function pintarReporte(r){
    document.getElementById('rpt-generado').textContent =
      `Generado ${formatearFechaHora(r.generado_en)} · contador · Del ${formatearFecha(r.fecha_desde)} al ${formatearFecha(r.fecha_hasta)} · ${r.cantidad_registros} registro(s)`;

if (r.secciones.length === 0){
      seccionesWrap.innerHTML = `<div class="empty-state"><b>No hay cobros con estos filtros</b>Ajuste el rango de fechas, la sucursal o el estado.</div>`;
      totalGeneral.style.display = 'none';
    } else {
      seccionesWrap.innerHTML = r.secciones.map(seccionHtml).join('');
      totalGeneral.style.display = 'flex';
      totalGeneral.innerHTML = `<span>Total general (sin convertir monedas):</span> <span class="mono">${formatearMonto(r.total_general)}</span>`;
      aplicarColumnas();
    }
    footNote.textContent = '';
  }

btnGenerar.addEventListener('click', generar);
  document.getElementById('btn-imprimir').addEventListener('click', ()=> window.print());

// Sucursal en la que se está trabajando (docs/diseno-cxc.md Capítulo 6): el shell la
  // conoce (se elige al entrar a Fénix) y la envía por postMessage a cada pantalla
  // embebida -- aquí se usa como valor por defecto del filtro, nunca como una restricción
  // fija (el usuario sigue pudiendo elegir otra u "Todos").
  let SUCURSAL_ACTUAL = null;
  window.addEventListener('message', (ev)=>{
    if (!ev.data || ev.data.tipo !== 'fenix-sucursal') return;
    SUCURSAL_ACTUAL = {id: ev.data.sucursal_id, nombre: ev.data.sucursal_nombre};
    const fSucursal = document.getElementById('f-sucursal');
    if (fSucursal && !fSucursal.value) { fSucursal.value = String(SUCURSAL_ACTUAL.id); generar(); }
  });
  // Si esta pantalla carga después de que el shell ya difundió la sucursal (ej. al volver
  // de sesión con la sucursal ya elegida), no hay que esperar una difusión que ya pasó --
  // se pide directamente.
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-sucursal'}, '*');

(async function iniciar(){
    const hoy = new Date();
    document.getElementById('f-hasta').valueAsDate = hoy;
    document.getElementById('f-desde').valueAsDate = new Date(hoy.getFullYear(), hoy.getMonth(), 1);
    await Promise.all([
      cargarSelect(API_SUCURSALES, 'f-sucursal', 'nombre'),
      cargarSelect(API_TERRITORIOS, 'f-territorio', 'nombre'),
    ]);
    document.getElementById('f-texto').focus();
    await generar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Reporte de Pagos Efectuados (CxP)</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1300px; margin:0 auto; padding:28px 24px 64px;}

.toolbar{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center;}
  .toolbar .spacer{flex:1;}

.cols-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:8px 16px;}
  .cols-grid label{display:flex; align-items:center; gap:7px; font-size:13px; cursor:pointer;}

.btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.seccion-moneda{margin-bottom:22px;}
  .seccion-moneda h3{font-size:14px; margin-bottom:8px; color:var(--ink);}
  .table-wrap{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow);
  }
  table{border-collapse:collapse; width:100%; min-width:900px;}
  thead th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-muted); font-weight:600; padding:10px 12px;
    border-bottom:1px solid var(--line-strong); background:var(--surface-2);
    white-space:nowrap;
  }
  th.num, td.num{text-align:right;}
  tbody td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--surface-2);}
  tbody tr.subtotal{background:var(--accent-soft); font-weight:700;}
  tbody tr.subtotal td{border-bottom:none;}
  .muted-cell{color:var(--ink-muted);}

table.oculta-codigo .col-codigo,
  table.oculta-sucursal .col-sucursal,
  table.oculta-estado .col-estado,
  table.oculta-medios .col-medios,
  table.oculta-cambio .col-cambio{ display:none; }

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Reporte de Pagos Efectuados</span>
    </div>
    <div class="crumbs"><b>Cuentas a Pagar</b> / Reportes / Pagos efectuados</div>
  </div>

<div class="panel no-print">
    <div class="panel-titulo">Filtros</div>
    <div class="filters">
      <div class="field">
        <label for="f-desde">Desde</label>
        <input type="date" id="f-desde">
      </div>
      <div class="field">
        <label for="f-hasta">Hasta</label>
        <input type="date" id="f-hasta">
      </div>
      <div class="field">
        <label for="f-sucursal">Local</label>
        <select id="f-sucursal"><option value="">Todos</option></select>
      </div>
      <div class="field">
        <label for="f-estado">Estado</label>
        <select id="f-estado">
          <option value="">Todos</option>
          <option value="Aplicado" selected>Aplicado</option>
          <option value="Pendiente">Pendiente</option>
          <option value="Anulado">Anulado</option>
        </select>
      </div>
      <div class="field texto">
        <label for="f-texto">Proveedor (nombre, código o número de pago)</label>
        <input type="text" id="f-texto" placeholder="ej. Distribuidora…" autocomplete="off">
      </div>
      <div class="spacer"></div>
      <button class="btn btn-primary" id="btn-generar">🔍 Generar informe</button>
    </div>
  </div>

<div class="toolbar no-print">
    <div class="spacer"></div>
    <button class="btn btn-ghost" id="btn-excel">📊 Exportar a Excel</button>
    <button class="btn btn-ghost" id="btn-pdf">📄 Exportar a PDF</button>
    <button class="btn btn-ghost" id="btn-imprimir">🖨 Imprimir</button>
    <button class="btn btn-ghost" id="btn-correo" disabled title="Disponible cuando exista el conector de correo">✉ Enviar por correo</button>
    <a class="btn btn-ghost" id="btn-volver" data-nav-shell="pagos" href="pagos_ui.html">‹ Volver</a>
  </div>

<div class="foot-note" id="foot-note">Ajuste los filtros y presione «Generar informe».</div>

</div>

async function llamarApi(path, opciones){
    let resp;
    try{ resp = await fetch(`${API_BASE}${path}`, opciones); }
    catch(e){ throw new Error('No se pudo conectar al backend (¿está corriendo uvicorn?)'); }
    if (!resp.ok){
      let detalle = `El servidor respondió ${resp.status}`;
      try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
      throw new Error(detalle);
    }
    return resp.json();
  }
  function formatearMonto(v){
    return Number(v||0).toLocaleString('es-CR', {minimumFractionDigits:2, maximumFractionDigits:2});
  }
  function formatearFecha(iso){
    if (!iso) return '—';
    const d = iso.includes('T') ? iso.slice(0,10) : iso;
    const [a,m,dd] = d.split('-');
    return `${dd}/${m}/${a}`;
  }
  function formatearFechaHora(iso){
    const d = new Date(iso);
    const pad = n => String(n).padStart(2,'0');
    let horas = d.getHours();
    const ampm = horas >= 12 ? 'p.m.' : 'a.m.';
    horas = horas % 12 || 12;
    return `${pad(d.getDate())}/${pad(d.getMonth()+1)}/${d.getFullYear()} ${horas}:${pad(d.getMinutes())} ${ampm}`;
  }
  function pillEstado(estado){
    const clase = estado === 'Aplicado' ? 'pill-aplicado' : estado === 'Anulado' ? 'pill-anulado' : 'pill-pendiente';
    return `<span class="pill ${clase}">${estado}</span>`;
  }
  async function modalAlert(mensaje){ window.alert(mensaje); }

function construirQuery(){
    const params = new URLSearchParams();
    const desde = document.getElementById('f-desde').value;
    const hasta = document.getElementById('f-hasta').value;
    const sucursal = document.getElementById('f-sucursal').value;
    const estado = document.getElementById('f-estado').value;
    const texto = document.getElementById('f-texto').value.trim();
    if (desde) params.set('fecha_desde', desde);
    if (hasta) params.set('fecha_hasta', hasta);
    if (sucursal) params.set('sucursal_id', sucursal);
    params.set('estado', estado);
    if (texto) params.set('texto', texto);
    return params.toString();
  }

function filaHtml(f){
    return `
      <tr>
        <td class="mono col-codigo">${f.proveedor_codigo || '—'}</td>
        <td>${f.proveedor_nombre}</td>
        <td class="col-sucursal">${f.sucursal_nombre}</td>
        <td class="mono">${f.numero}</td>
        <td>${formatearFecha(f.fecha)}</td>
        <td class="col-estado">${pillEstado(f.estado)}</td>
        <td class="col-medios">${f.medios_pago || '—'}</td>
        <td class="num mono">${formatearMonto(f.monto)}</td>
        <td class="num mono col-cambio">${f.moneda !== 'CRC' ? Number(f.tipo_cambio).toLocaleString('es-CR',{minimumFractionDigits:4, maximumFractionDigits:4}) : '—'}</td>
      </tr>
    `;
  }

function seccionHtml(seccion){
    return `
      <div class="seccion-moneda">
        <h3>Moneda: ${seccion.moneda}</h3>
        <div class="table-wrap">
          <table id="tabla-${seccion.moneda}">
            <thead>
              <tr>
                <th class="col-codigo">Código</th>
                <th>Proveedor</th>
                <th class="col-sucursal">Sucursal</th>
                <th>Número</th>
                <th>Fecha</th>
                <th class="col-estado">Estado</th>
                <th class="col-medios">Medio de pago</th>
                <th class="num">Monto</th>
                <th class="num col-cambio">T. Cambio</th>
              </tr>
            </thead>
            <tbody>
              ${seccion.filas.map(filaHtml).join('')}
              <tr class="subtotal">
                <td class="col-codigo"></td>
                <td colspan="6">Subtotal ${seccion.moneda}</td>
                <td class="num mono">${formatearMonto(seccion.total)}</td>
                <td class="col-cambio"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    `;
  }

if (r.secciones.length === 0){
      seccionesWrap.innerHTML = `<div class="empty-state"><b>No hay pagos con estos filtros</b>Ajuste el rango de fechas, la sucursal o el estado.</div>`;
      totalGeneral.style.display = 'none';
    } else {
      seccionesWrap.innerHTML = r.secciones.map(seccionHtml).join('');
      totalGeneral.style.display = 'flex';
      totalGeneral.innerHTML = `<span>Total general (sin convertir monedas):</span> <span class="mono">${formatearMonto(r.total_general)}</span>`;
      aplicarColumnas();
    }
    footNote.textContent = '';
  }

btnGenerar.addEventListener('click', generar);
  document.getElementById('btn-imprimir').addEventListener('click', ()=> window.print());

// Sucursal en la que se está trabajando (docs/diseno-cxc.md Capítulo 6): el shell la
  // conoce (se elige al entrar a Fénix) y la envía por postMessage a cada pantalla
  // embebida -- aquí se usa como valor por defecto del filtro, nunca como una restricción
  // fija (el usuario sigue pudiendo elegir otra u "Todos").
  let SUCURSAL_ACTUAL = null;
  window.addEventListener('message', (ev)=>{
    if (!ev.data || ev.data.tipo !== 'fenix-sucursal') return;
    SUCURSAL_ACTUAL = {id: ev.data.sucursal_id, nombre: ev.data.sucursal_nombre};
    const fSucursal = document.getElementById('f-sucursal');
    if (fSucursal && !fSucursal.value) { fSucursal.value = String(SUCURSAL_ACTUAL.id); generar(); }
  });
  // Si esta pantalla carga después de que el shell ya difundió la sucursal (ej. al volver
  // de sesión con la sucursal ya elegida), no hay que esperar una difusión que ya pasó --
  // se pide directamente.
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-sucursal'}, '*');

(async function iniciar(){
    const hoy = new Date();
    document.getElementById('f-hasta').valueAsDate = hoy;
    document.getElementById('f-desde').valueAsDate = new Date(hoy.getFullYear(), hoy.getMonth(), 1);
    await cargarSelect(API_SUCURSALES, 'f-sucursal', 'nombre');
    document.getElementById('f-texto').focus();
    await generar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Categorías de Proveedor</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1080px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:180px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  /* #modal-overlay (aviso/confirmacion) comparte la clase .modal-overlay con otro overlay de
     esta pantalla, mismo z-index -- si #modal-overlay aparece antes en el DOM, al abrirse los
     dos a la vez (ej. un error de guardado mientras un formulario sigue abierto) el otro overlay
     pintaba encima y el aviso quedaba oculto/inaccesible detras. Bug real reportado: "el
     Entendido no se ve". Un z-index propio, mas alto, garantiza que el aviso siempre gane sin
     importar el orden del DOM. */
  #modal-overlay{ z-index:400; }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:420px; width:100%;
  }
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}

.modal-box.form-box{max-width:460px;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input[type="text"], .form-field input[type="number"], .form-field select, .form-field textarea{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%; font-family:inherit;
  }
  .form-field textarea{resize:vertical; min-height:56px;}
  .form-field.checkbox label{
    display:flex; align-items:center; gap:8px; text-transform:none;
    letter-spacing:normal; font-size:13.5px; color:var(--ink);
  }
  .form-field input[disabled], .form-field select[disabled], .form-field textarea[disabled]{opacity:.6; cursor:not-allowed;}
  .form-audit{
    font-size:12px; color:var(--ink-muted); border-top:1px solid var(--line);
    margin-top:4px; padding-top:12px; line-height:1.7;
  }

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Categorías de Proveedor</span>
    </div>
    <div class="crumbs"><b>Proveeduría</b> / Configuración / Categorías de proveedor</div>
  </div>

<div class="filters">
    <div class="field texto">
      <label for="f-texto">Nombre</label>
      <input type="text" id="f-texto" placeholder="ej. general" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-activa">Estado</label>
      <select id="f-activa">
        <option value="">Todas</option>
        <option value="true">Activas</option>
        <option value="false">Inactivas</option>
      </select>
    </div>
    <div class="spacer"></div>
    <a class="btn btn-ghost no-print" id="btn-volver" data-nav-shell="proveedores" href="proveedores_ui.html">‹ Volver a Proveedores</a>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nuevo</button>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

let formModo = 'nuevo';
  let formIdEditando = null;

function abrirFormulario(modo, registro){
    formModo = modo;
    formIdEditando = registro ? registro.id : null;

if (modo === 'ver'){
      formTitulo.textContent = 'Ver — Categoría de Proveedor';
      ponerSoloLectura(true);
      formGuardar.style.display = 'none';
      formCancelar.textContent = 'Cerrar';
    } else {
      formTitulo.textContent = modo === 'nuevo' ? 'Nueva — Categoría de Proveedor' : 'Modificar — Categoría de Proveedor';
      ponerSoloLectura(false);
      formGuardar.style.display = '';
      formCancelar.textContent = 'Cancelar';
    }

formGuardar.onclick = async ()=>{
    const nombre = formNombre.value.trim();
    if (!nombre){ await modalAlert('El nombre es obligatorio.'); formNombre.focus(); return; }

function pillActiva(activa){
    return activa
      ? `<span class="pill pill-aplicado">Activa</span>`
      : `<span class="pill pill-anulado">Inactiva</span>`;
  }

async function cargar(){
    tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    emptyState.style.display = 'none';
    try{
      REGISTROS = await llamarApi(`${API_CATEGORIAS}?${construirQuery()}`);
      if (REGISTROS.length === 0){
        tbody.innerHTML = '';
        emptyState.style.display = 'block';
      } else {
        tbody.innerHTML = REGISTROS.map(filaHtml).join('');
      }
      footNote.textContent = `${REGISTROS.length} categoría${REGISTROS.length === 1 ? '' : 's'}`;
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      footNote.textContent = '';
    }
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar la categoría "${registro.nombre}"? Si tiene proveedores u otras categorías (hijas) asociadas, no se podrá eliminar y se sugerirá desactivarla en su lugar.`,
        'Eliminar categoría', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${API_CATEGORIAS}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

document.getElementById('f-texto').addEventListener('input', ()=>{
    clearTimeout(window.__debounceCP);
    window.__debounceCP = setTimeout(cargar, 350);
  });
  document.getElementById('f-activa').addEventListener('change', cargar);

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

(async function iniciar(){
    document.getElementById('f-texto').focus();
    await cargar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Conceptos de Nota a Proveedor</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1120px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:180px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  /* #modal-overlay (aviso/confirmacion) comparte la clase .modal-overlay con otro overlay de
     esta pantalla, mismo z-index -- si #modal-overlay aparece antes en el DOM, al abrirse los
     dos a la vez (ej. un error de guardado mientras un formulario sigue abierto) el otro overlay
     pintaba encima y el aviso quedaba oculto/inaccesible detras. Bug real reportado: "el
     Entendido no se ve". Un z-index propio, mas alto, garantiza que el aviso siempre gane sin
     importar el orden del DOM. */
  #modal-overlay{ z-index:400; }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:420px; width:100%;
  }
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}

.modal-box.form-box{max-width:460px;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input[type="text"], .form-field input[type="number"], .form-field select, .form-field textarea{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%; font-family:inherit;
  }
  .form-field textarea{resize:vertical; min-height:56px;}
  .form-field.checkbox label{
    display:flex; align-items:center; gap:8px; text-transform:none;
    letter-spacing:normal; font-size:13.5px; color:var(--ink);
  }
  .form-field input[disabled], .form-field select[disabled], .form-field textarea[disabled]{opacity:.6; cursor:not-allowed;}
  .form-audit{
    font-size:12px; color:var(--ink-muted); border-top:1px solid var(--line);
    margin-top:4px; padding-top:12px; line-height:1.7;
  }

/* ---------- buscador de cuenta (mismo patrón de Asientos / Cierre Fiscal / Movimiento de Cuenta) ---------- */
  .cuenta-picker{position:relative;}
  .cuenta-sugerencias{
    display:none; position:fixed; background:var(--surface); border:1px solid var(--line-strong);
    border-radius:9px; box-shadow:var(--shadow); max-height:260px; overflow-y:auto; z-index:350;
  }
  .cuenta-sugerencias.abierta{display:block;}
  .sug-item{display:flex; flex-direction:column; gap:1px; padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--line);}
  .sug-item:last-child{border-bottom:none;}
  .sug-item:hover, .sug-item.activa{background:var(--accent-soft);}
  .sug-nombre{font-size:13.5px; color:var(--ink);}
  .sug-nombre mark{background:transparent; color:var(--accent); font-weight:700; padding:0;}
  .sug-meta{font-size:11px; color:var(--ink-muted);}
  .sug-vacio{padding:14px 12px; font-size:13px; color:var(--ink-muted); text-align:center;}
  .cuenta-elegida{
    display:none; align-items:center; justify-content:space-between; gap:10px;
    background:var(--accent-soft); border:1px solid var(--accent); border-radius:7px;
    padding:7px 11px; font-size:13px; min-height:34.5px;
  }
  .cuenta-elegida.visible{display:flex;}
  .cuenta-elegida .cambiar{
    background:none; border:none; color:var(--accent); font-weight:600; cursor:pointer; padding:0;
    font-size:12px; text-decoration:underline; font-family:inherit; white-space:nowrap;
  }

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Conceptos de Nota a Proveedor</span>
    </div>
    <div class="crumbs"><b>Proveeduría</b> / Configuración / Conceptos de notas a proveedores</div>
  </div>

<div class="filters">
    <div class="field texto">
      <label for="f-texto">Nombre</label>
      <input type="text" id="f-texto" placeholder="ej. desc. sobre compras" autocomplete="off">
    </div>
    <div class="field texto">
      <label for="f-descripcion">Descripción</label>
      <input type="text" id="f-descripcion" placeholder="ej. devolución" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-activo">Estado</label>
      <select id="f-activo">
        <option value="">Todos</option>
        <option value="true">Activos</option>
        <option value="false">Inactivos</option>
      </select>
    </div>
    <div class="spacer"></div>
    <a class="btn btn-ghost no-print" id="btn-volver" data-nav-shell="proveedores" href="proveedores_ui.html">‹ Volver a Proveeduría</a>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nuevo</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Nombre</th>
          <th>Descripción</th>
          <th>Cuenta contable</th>
          <th>Orden</th>
          <th>Activo</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay conceptos con estos filtros</b>
      Ajusta los filtros, o límpialos para ver todos, o crea el primero con "+ Nuevo".
    </div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div class="form-field">
      <label for="form-nombre">Nombre</label>
      <input type="text" id="form-nombre">
    </div>
    <div class="form-field">
      <label for="form-descripcion">Descripción</label>
      <input type="text" id="form-descripcion">
    </div>
    <div class="form-field">
      <label for="form-cuenta-input">Cuenta contable</label>
      <div class="cuenta-picker">
        <input id="form-cuenta-input" type="text" autocomplete="off" placeholder="Escriba para buscar una cuenta…">
        <div class="cuenta-sugerencias" id="form-cuenta-sugerencias"></div>
      </div>
      <div class="cuenta-elegida" id="form-cuenta-elegida-box">
        <span><span class="mono" id="form-cuenta-elegida-codigo"></span> — <span id="form-cuenta-elegida-nombre"></span></span>
        <button type="button" class="cambiar" id="form-cambiar-cuenta">Cambiar</button>
      </div>
    </div>
    <div class="form-field">
      <label for="form-orden">Orden</label>
      <input type="number" id="form-orden" min="0" step="1">
    </div>
    <div class="form-field checkbox">
      <label><input type="checkbox" id="form-activo" checked> Activo</label>
    </div>
    <div class="form-audit" id="form-audit" style="display:none;"></div>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="form-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="form-guardar">Guardar</button>
    </div>
  </div>
</div>

// ---------------- Buscador de cuenta contable dentro del formulario ----------------
  let cuentaElegida = null; // código de la cuenta elegida, o null
  const cuentaInput = document.getElementById('form-cuenta-input');
  const cuentaCaja = document.getElementById('form-cuenta-sugerencias');
  const cuentaElegidaBox = document.getElementById('form-cuenta-elegida-box');
  const cambiarCuentaBtn = document.getElementById('form-cambiar-cuenta');

function ponerSoloLectura(soloLectura){
    formNombre.disabled = soloLectura;
    formDescripcion.disabled = soloLectura;
    formOrden.disabled = soloLectura;
    formActivo.disabled = soloLectura;
    cuentaInput.disabled = soloLectura;
    cambiarCuentaBtn.style.display = soloLectura ? 'none' : '';
  }

let formModo = 'nuevo';
  let formIdEditando = null;

function abrirFormulario(modo, registro){
    formModo = modo;
    formIdEditando = registro ? registro.id : null;

limpiarCuentaElegida();
    if (registro){
      // La cuenta ya viene en la fila del listado (código+nombre) -- no hace falta esperar
      // otra llamada a la API para pintarla, y CUENTAS_POR_CODIGO ya está cargado desde el inicio.
      CUENTAS_POR_CODIGO[registro.cuenta_contable_codigo] = CUENTAS_POR_CODIGO[registro.cuenta_contable_codigo]
        || {id: registro.cuenta_contable_id, codigo: registro.cuenta_contable_codigo, nombre: registro.cuenta_contable_nombre, acepta: true};
      marcarCuentaElegida(registro.cuenta_contable_codigo);
    }

if (modo === 'ver'){
      formTitulo.textContent = 'Ver — Concepto de Nota a Proveedor';
      ponerSoloLectura(true);
      formGuardar.style.display = 'none';
      formCancelar.textContent = 'Cerrar';
    } else {
      formTitulo.textContent = modo === 'nuevo' ? 'Nuevo — Concepto de Nota a Proveedor' : 'Modificar — Concepto de Nota a Proveedor';
      ponerSoloLectura(false);
      formGuardar.style.display = '';
      formCancelar.textContent = 'Cancelar';
    }

formGuardar.onclick = async ()=>{
    const nombre = formNombre.value.trim();
    if (!nombre){ await modalAlert('El nombre es obligatorio.'); formNombre.focus(); return; }
    if (!cuentaElegida){ await modalAlert('La cuenta contable es obligatoria.'); cuentaInput.focus(); return; }

function pillActivo(activo){
    return activo
      ? `<span class="pill pill-aplicado">Activo</span>`
      : `<span class="pill pill-anulado">Inactivo</span>`;
  }

function construirQuery(){
    const params = new URLSearchParams();
    const texto = document.getElementById('f-texto').value.trim();
    const descripcion = document.getElementById('f-descripcion').value.trim();
    const activo = document.getElementById('f-activo').value;
    if (texto) params.set('texto', texto);
    if (descripcion) params.set('descripcion', descripcion);
    if (activo) params.set('activo', activo);
    return params.toString();
  }

async function cargar(){
    tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    emptyState.style.display = 'none';
    try{
      REGISTROS = await llamarApi(`${API_CONCEPTOS}?${construirQuery()}`);
      if (REGISTROS.length === 0){
        tbody.innerHTML = '';
        emptyState.style.display = 'block';
      } else {
        tbody.innerHTML = REGISTROS.map(filaHtml).join('');
      }
      footNote.textContent = `${REGISTROS.length} concepto${REGISTROS.length === 1 ? '' : 's'}`;
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      footNote.textContent = '';
    }
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar el concepto "${registro.nombre}"? Si hay notas a proveedor que lo usan, no se podrá eliminar y se sugerirá desactivarlo en su lugar.`,
        'Eliminar concepto', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${API_CONCEPTOS}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

document.getElementById('f-texto').addEventListener('input', ()=>{
    clearTimeout(window.__debounceCNP);
    window.__debounceCNP = setTimeout(cargar, 350);
  });
  document.getElementById('f-descripcion').addEventListener('input', ()=>{
    clearTimeout(window.__debounceCNPd);
    window.__debounceCNPd = setTimeout(cargar, 350);
  });
  document.getElementById('f-activo').addEventListener('change', cargar);

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Compra a Proveedor</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1120px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:180px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

/* Solo visible al imprimir -- la barra superior se oculta en @media print (es navegación,
     no contenido), así que este encabezado da el contexto que ella normalmente daría. */
  .print-header{display:none;}

.table-wrap{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow);
  }
  table{border-collapse:collapse; width:100%; min-width:900px;}
  thead th{
    text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-muted); padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
  }
  th.num, td.num{text-align:right;}
  tbody td{padding:11px 14px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--surface-2);}
  .muted-cell{color:var(--ink-muted);}
  .icon-btn{
    background:none; border:1px solid transparent; border-radius:6px; padding:5px;
    cursor:pointer; color:var(--ink-muted); display:inline-flex;
  }
  .icon-btn:hover{background:var(--surface-2); color:var(--ink);}
  .icon-btn.danger:hover{color:var(--red-ink); background:var(--red-bg);}
  .acciones-cell{display:flex; gap:4px; align-items:center;}

.pill{display:inline-flex; align-items:center; gap:5px; border-radius:20px; padding:3px 10px; font-size:12px; font-weight:600; border:1px solid;}
  .pill::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor;}
  .pill-registrado{background:var(--amber-bg); color:var(--amber-ink); border-color:var(--amber-line);}
  .pill-aplicado{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
  .pill-anulado{background:var(--grey-bg); color:var(--grey-ink); border-color:var(--line-strong);}

.empty-state{padding:48px 24px; text-align:center; color:var(--ink-muted);}

.overlay{
    display:none; position:fixed; inset:0; background:rgba(10,14,10,.5);
    align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; z-index:50;
  }
  .overlay.abierto{display:flex;}
  /* Con pocos ítems el panel simplemente crece y el overlay lo centra -- con muchos (ej.
     generada desde una Orden de Compra grande), el panel se topa con max-height y pasa a
     columna fija: encabezado, datos generales, totales y Guardar/Cancelar siempre visibles;
     solo la lista de ítems (#lineas-lista) crece con su propio scroll interno. Así nunca hay
     que desplazar todo el modal -- ni perder de vista el botón Guardar -- para llegar al
     último artículo. */
  .panel{
    background:var(--surface); border-radius:12px; box-shadow:var(--shadow);
    width:100%; max-width:1180px; padding:22px 24px 24px;
    max-height:calc(100vh - 80px); display:flex; flex-direction:column; overflow-y:auto;
  }
  .panel-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-shrink:0;}
  .panel-header h2{font-size:18px;}
  .seccion{margin-bottom:20px; flex-shrink:0;}
  /* min-height explícito (NO "0", NI "auto") a propósito: con overflow:hidden, un min-height
     "auto" el navegador lo trata como 0 por especificación (tamaño mínimo automático = 0 en
     ejes con overflow distinto de visible) -- así que sin un número real acá, esta sección se
     podía aplastar hasta casi desaparecer cuando el panel no tenía espacio, dejando la línea
     invisible sin aviso ni forma de recuperarla. Bug real encontrado en pantalla: con una
     ventana angosta, #lineas-lista quedaba reducida a un borde de pocos píxeles. El número
     cubre encabezado + al menos una línea completa (min-height de #lineas-lista) + botón
     "+ Agregar ítem" + la caja de totales -- si de verdad no alcanza, es el panel completo el
     que gana su propio scroll (.panel ya tiene overflow-y:auto), nunca este recorte silencioso. */
  #seccion-lineas{display:flex; flex-direction:column; flex-shrink:1; overflow:hidden; min-height:400px;}
  #seccion-lineas h3, #seccion-lineas #btn-agregar-linea, #seccion-lineas .totales-box{flex-shrink:0;}
  #seccion-lineas #lineas-lista{flex:1 1 auto; overflow-y:auto; min-height:240px; padding-right:4px; margin-bottom:10px;}
  .seccion h3{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin-bottom:10px;}
  .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:10px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input, .form-field select, .form-field textarea{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%;
  }

.buscador-wrap{position:relative;}
  .sugerencias{
    position:fixed; background:var(--surface); border:1px solid var(--line); border-radius:8px;
    box-shadow:var(--shadow); max-height:260px; overflow-y:auto; z-index:60; display:none;
  }
  .sugerencias.abierta{display:block;}
  .sug-item{padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--line);}
  .sug-item:last-child{border-bottom:none;}
  .sug-item:hover{background:var(--accent-soft);}
  .sug-nombre{display:block; font-size:13px;}
  .sug-meta{display:block; font-size:11.5px; color:var(--ink-muted); margin-top:2px;}
  .sug-cargando, .sug-vacio{padding:10px 12px; font-size:12.5px; color:var(--ink-muted);}
  .elegido-box{
    display:none; align-items:center; justify-content:space-between; gap:10px;
    background:var(--accent-soft); border:1px solid var(--accent); border-radius:7px; padding:8px 10px; font-size:13.5px;
  }
  .elegido-box.visible{display:flex;}
  .elegido-box a{color:var(--accent); font-weight:600; cursor:pointer; text-decoration:none;}

.linea-fila{border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:10px; background:var(--surface-2);}
  .linea-fila-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
  .linea-fila-campos{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr; gap:10px; align-items:end;}
  .linea-total{font-weight:700; text-align:right;}
  .linea-advertencia{
    margin-top:8px; background:var(--amber-bg); border:1px solid var(--amber-line); color:var(--amber-ink);
    border-radius:6px; padding:6px 10px; font-size:12.5px; display:none;
  }
  .linea-advertencia.visible{display:block;}
  .linea-advertencia-bodega{
    margin-top:8px; background:var(--amber-bg); border:1px solid var(--amber-line); color:var(--amber-ink);
    border-radius:6px; padding:6px 10px; font-size:12.5px; display:none;
  }
  .linea-advertencia-bodega.visible{display:block;}

.totales-box{
    display:flex; justify-content:flex-end; gap:24px;
    background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
    padding:12px 16px; margin-top:14px; font-size:13.5px;
  }
  .totales-box .item{display:flex; flex-direction:column; align-items:flex-end; gap:2px;}
  .totales-box .desc{color:var(--ink-muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;}
  .totales-box .num{font-weight:700; font-size:15px;}
  .totales-box .item.total .num{color:var(--accent); font-size:17px;}

.registro-acciones{display:flex; justify-content:flex-end; gap:10px; margin-top:18px; flex-shrink:0;}

.modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,14,10,.5);
    align-items:center; justify-content:center; z-index:100;
  }
  /* #modal-overlay (aviso/confirmacion) comparte la clase .modal-overlay con otro overlay de
     esta pantalla, mismo z-index -- si #modal-overlay aparece antes en el DOM, al abrirse los
     dos a la vez (ej. un error de guardado mientras un formulario sigue abierto) el otro overlay
     pintaba encima y el aviso quedaba oculto/inaccesible detras. Bug real reportado: "el
     Entendido no se ve". Un z-index propio, mas alto, garantiza que el aviso siempre gane sin
     importar el orden del DOM. */
  #modal-overlay{ z-index:400; }
  .modal-overlay.abierto{display:flex;}
  .modal-box{background:var(--surface); border-radius:12px; box-shadow:var(--shadow); max-width:420px; width:100%; padding:20px 22px;}
  .modal-box h3{font-size:16px; margin-bottom:10px;}
  .modal-box p{font-size:13.5px; color:var(--ink-muted); margin-bottom:18px;}
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}

.decision-box{max-width:380px;}
  .decision-atajos{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
  .decision-atajos .decision-atajo{width:100%; justify-content:flex-start; font-weight:600;}
  .decision-separador{border-top:1px solid var(--line); margin:0 0 16px;}
  .decision-manual{width:100%; justify-content:center; padding:12px 14px; font-size:14px;}

@media print{
    @page{ margin: 1.5cm; }
    .topbar .crumbs, .filters, .acciones-cell, .no-print{display:none !important;}
    body{background:#fff; color:#000;}
    .app{max-width:none; padding:0;}
    .print-header{display:block; margin-bottom:14px;}
    .print-header h2{font-size:16px;}
    .print-header p{font-size:12px; color:#333; margin-top:4px;}
    .table-wrap{box-shadow:none; border:1px solid #000;}
    thead th{background:none !important; border-color:#000 !important;}
    .pill{background:none !important; border:1px solid #000 !important; color:#000 !important;}
  }
</style>

<div class="app">
  <div class="topbar">
    <div class="brand">
      <h1>Fénix</h1>
      <span class="sep">/</span>
      <span class="empresa" id="empresa-nombre">Sistemas Rodríguez y Asociados — Compra a Proveedor</span>
    </div>
    <div class="crumbs">Proveeduría / <b>Compras</b></div>
  </div>

<div class="filters">
    <div class="field texto">
      <label>Buscar</label>
      <input type="text" id="f-texto" placeholder="Consecutivo, número de factura o proveedor…">
    </div>
    <div class="field">
      <label>Estado</label>
      <select id="f-estado">
        <option value="">Todos</option>
        <option value="Pendiente">Registrado</option>
        <option value="Aplicado">Aplicado</option>
        <option value="Anulado">Anulado</option>
      </select>
    </div>
    <div class="field">
      <label>Fecha desde</label>
      <input type="date" id="f-fecha-desde">
    </div>
    <div class="field">
      <label>Fecha hasta</label>
      <input type="date" id="f-fecha-hasta">
    </div>
    <div class="field">
      <label>Monto desde</label>
      <input type="number" id="f-monto-desde" step="0.01">
    </div>
    <div class="field">
      <label>Monto hasta</label>
      <input type="number" id="f-monto-hasta" step="0.01">
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-excel" title="Exportar el listado filtrado a Excel">📊 Exportar a Excel</button>
    <button class="btn btn-ghost no-print" id="btn-imprimir" title="Imprimir el listado filtrado">🖨️ Imprimir</button>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nueva Compra</button>
  </div>

<div class="print-header">
    <h2>Sistemas Rodríguez y Asociados — Compras</h2>
    <p id="print-filtros-resumen"></p>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Número</th>
          <th>Proveedor</th>
          <th>Factura</th>
          <th>Fecha</th>
          <th class="num">Total</th>
          <th>Asiento</th>
          <th>Estado</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="tbody-compras"></tbody>
    </table>
    <div class="empty-state" id="estado-vacio" style="display:none;">No hay compras que coincidan con el filtro.</div>
  </div>
</div>

<div class="overlay" id="registro-overlay">
  <div class="panel">
    <div class="panel-header">
      <h2 id="registro-titulo">Nueva Compra</h2>
      <button class="icon-btn" id="btn-cerrar-registro">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 6 6 18M6 6l12 12"/></svg>
      </button>
    </div>

<div class="seccion">
      <h3>Datos generales</h3>
      <div class="form-field">
        <label>Proveedor</label>
        <div class="buscador-wrap">
          <input type="text" id="proveedor-input" placeholder="Escriba para buscar un proveedor…">
          <div class="sugerencias" id="proveedor-sugerencias"></div>
        </div>
        <div class="elegido-box" id="proveedor-elegido-box">
          <span id="proveedor-elegido-nombre"></span>
          <a id="proveedor-cambiar">Cambiar</a>
        </div>
      </div>
      <div class="grid-3">
        <div class="form-field">
          <label>Número de factura</label>
          <input type="text" id="reg-numero-factura">
        </div>
        <div class="form-field">
          <label>Fecha</label>
          <input type="date" id="reg-fecha">
        </div>
        <div class="form-field">
          <label>Fecha límite de pago</label>
          <input type="date" id="reg-fecha-limite">
        </div>
      </div>
      <div class="grid-3">
        <div class="form-field">
          <label>Término de pago</label>
          <input type="text" id="reg-termino-pago" placeholder="Ej. Contado, Crédito 30 días">
        </div>
        <div class="form-field">
          <label>Moneda</label>
          <select id="reg-moneda">
            <option value="CRC">CRC</option>
            <option value="USD">USD</option>
          </select>
        </div>
        <div class="form-field" id="reg-tipo-cambio-field" style="display:none;">
          <label>Tipo de cambio</label>
          <input type="number" id="reg-tipo-cambio" min="0.000001" step="0.000001">
          <div id="tipo-cambio-aviso" style="font-size:11px; color:var(--amber-ink); margin-top:2px;"></div>
        </div>
      </div>
      <div class="form-field">
        <label>Observaciones</label>
        <input type="text" id="reg-observaciones">
      </div>
    </div>

<div class="seccion" id="seccion-lineas" style="display:none;">
      <h3>Ítems</h3>
      <div id="lineas-lista"></div>
      <button class="btn btn-ghost" id="btn-agregar-linea" type="button">+ Agregar ítem</button>

<div class="totales-box">
        <div class="item"><span class="desc">Subtotal</span><span class="num mono" id="tot-subtotal">0,00</span></div>
        <div class="item"><span class="desc">IVA</span><span class="num mono" id="tot-iva">0,00</span></div>
        <div class="item total"><span class="desc">Total</span><span class="num mono" id="tot-total">0,00</span></div>
      </div>
    </div>
    <div class="seccion" id="seccion-lineas-aviso" style="display:none;">
      <div class="linea-advertencia visible">Guarde los datos generales primero para poder agregar ítems.</div>
    </div>

<div class="registro-acciones">
      <button class="btn btn-ghost" id="btn-cancelar-registro">Cancelar</button>
      <button class="btn btn-primary" id="btn-guardar-registro">Guardar</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="decision-overlay">
  <div class="modal-box decision-box">
    <h3>Nueva Compra</h3>
    <p>¿Cómo desea registrarla?</p>
    <div class="decision-atajos">
      <button class="btn btn-ghost decision-atajo" id="btn-decision-orden">📋 Desde Orden de Compra</button>
      <button class="btn btn-ghost decision-atajo" id="btn-decision-importar">📥 Importar XML</button>
    </div>
    <div class="decision-separador"></div>
    <button class="btn btn-primary decision-manual" id="btn-decision-manual">✏️ Manual — artículo por artículo</button>
    <div class="modal-acciones" style="justify-content:flex-start; margin-top:14px;">
      <button class="btn btn-ghost" id="decision-cancelar">Cancelar</button>
    </div>
  </div>
</div>
<input type="file" id="input-xml-compra" accept=".xml" style="display:none;">

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box">
    <h3 id="modal-titulo"></h3>
    <p id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

// ---------------- Buscador de proveedor ----------------
  let proveedorElegido = null;
  const provInput = document.getElementById('proveedor-input');
  const provCaja = document.getElementById('proveedor-sugerencias');
  const provElegidoBox = document.getElementById('proveedor-elegido-box');
  function posicionarSug(input, caja){
    const r = input.getBoundingClientRect();
    caja.style.top = (r.bottom + 4) + 'px';
    caja.style.left = r.left + 'px';
    caja.style.width = Math.max(r.width, 280) + 'px';
  }
  function cerrarProvSug(){ provCaja.classList.remove('abierta'); provCaja.innerHTML = ''; }
  function elegirProveedor(p){
    proveedorElegido = p;
    document.getElementById('proveedor-elegido-nombre').textContent = p.nombre;
    provElegidoBox.classList.add('visible');
    provInput.style.display = 'none';
  }
  let provDebounce;
  provInput.addEventListener('input', ()=>{
    clearTimeout(provDebounce);
    provDebounce = setTimeout(async ()=>{
      const q = provInput.value.trim();
      if (q.length < 2){ cerrarProvSug(); return; }
      posicionarSug(provInput, provCaja);
      provCaja.classList.add('abierta');
      provCaja.innerHTML = `<div class="sug-cargando">Buscando…</div>`;
      const datos = await llamarApi(`${API_PROVEEDORES}?texto=${encodeURIComponent(q)}&activa=true`);
      const items = datos.items || datos;
      if (items.length === 0){ provCaja.innerHTML = `<div class="sug-vacio">Ningún proveedor contiene "${q}"</div>`; return; }
      provCaja.innerHTML = items.map(p=>`<div class="sug-item" data-id="${p.id}">
        <span class="sug-nombre">${p.nombre}</span></div>`).join('');
      provCaja.querySelectorAll('.sug-item').forEach((item, i)=>{
        item.addEventListener('mousedown', e=>{ e.preventDefault(); elegirProveedor(items[i]); cerrarProvSug(); });
      });
    }, 300);
  });
  // Si el usuario escribe pero nunca hace clic en una sugerencia real, el campo queda con texto
  // "huérfano" que se ve lleno aunque proveedorElegido sigue null -- el aviso de "obligatorio" al
  // guardar contradice lo que el usuario ve en pantalla. Al salir sin elegir de verdad, se limpia
  // solo para que lo vacío se vea vacío (bug real reportado en Conceptos de Nota a Cliente).
  provInput.addEventListener('blur', ()=> setTimeout(()=>{ cerrarProvSug(); if (!proveedorElegido) provInput.value = ''; }, 150));
  document.getElementById('proveedor-cambiar').addEventListener('click', ()=>{
    proveedorElegido = null;
    provElegidoBox.classList.remove('visible');
    provInput.style.display = '';
    provInput.value = '';
    provInput.focus();
  });

// ---------------- Motor de líneas (Modo B: captura manual) ----------------
  // Advertencia de variación de costo -- umbral provisional del 50%, sin cifra confirmada por
  // el usuario todavía. No bloquea el guardado, solo avisa (ver conversación de Compras).
  const UMBRAL_ADVERTENCIA_COSTO = 0.5;

function crearFilaLinea(existente){
    const fila = document.createElement('div');
    fila.className = 'linea-fila';
    fila.innerHTML = `
      <div class="linea-fila-top">
        <div class="buscador-wrap" style="flex:1;">
          <input type="text" class="linea-articulo-input" placeholder="Buscar artículo por código o nombre…">
          <div class="sugerencias linea-articulo-sug"></div>
        </div>
        <button type="button" class="icon-btn danger linea-quitar" title="Quitar" style="margin-left:8px;">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 6 6 18M6 6l12 12"/></svg>
        </button>
      </div>
      <div class="elegido-box linea-articulo-elegido">
        <span class="linea-articulo-nombre"></span>
        <a class="linea-articulo-cambiar">Cambiar</a>
      </div>
      <div class="linea-fila-campos" style="margin-top:8px;">
        <div class="form-field" style="margin-bottom:0;"><label>Bodega</label><select class="linea-bodega"></select></div>
        <div class="form-field" style="margin-bottom:0;"><label>Cantidad</label><input type="number" class="linea-cantidad" min="0.01" step="0.01" value="1"></div>
        <div class="form-field" style="margin-bottom:0;"><label>Costo unitario</label><input type="number" class="linea-costo" min="0" step="0.01"></div>
        <div class="form-field" style="margin-bottom:0;"><label>IVA %</label><input type="number" class="linea-tarifa-iva" min="0" step="0.5" value="13"></div>
        <div class="form-field" style="margin-bottom:0;"><label>Subtotal</label><div class="linea-subtotal mono" style="padding:8px 0; color:var(--ink-muted);">0,00</div></div>
        <div class="form-field" style="margin-bottom:0;"><label>Total línea</label><div class="linea-total mono" style="padding:8px 0;">0,00</div></div>
      </div>
      <div class="form-field" style="margin-top:8px; margin-bottom:0; max-width:260px;">
        <label>Código del proveedor (opcional)</label>
        <input type="text" class="linea-codigo-proveedor" placeholder="ej. como aparece en su factura">
      </div>
      <div class="linea-pista-xml" style="display:none; margin-top:6px; font-size:12.5px; color:var(--ink-muted);"></div>
      <a class="linea-crear-articulo-link" style="display:none; margin-top:6px; font-size:12.5px; cursor:pointer;">+ Crear artículo nuevo</a>
      <div class="linea-crear-articulo-box" style="display:none; margin-top:10px; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2);">
        <div style="font-size:12.5px; color:var(--ink-muted); margin-bottom:10px;">
          Este artículo es nuevo para la empresa. El código lo define quien recibe la mercadería
          (ej. pistoleando el código de barras real) -- nunca se inventa.
        </div>
        <div class="grid-2">
          <div class="form-field" style="margin-bottom:0;"><label>Código (real, obligatorio)</label><input type="text" class="nuevo-art-codigo" placeholder="ej. código de barras"></div>
          <div class="form-field" style="margin-bottom:0;"><label>Nombre</label><input type="text" class="nuevo-art-nombre"></div>
        </div>
        <div class="grid-3" style="margin-top:10px;">
          <div class="form-field" style="margin-bottom:0;"><label>CABYS</label><input type="text" class="nuevo-art-cabys"></div>
          <div class="form-field" style="margin-bottom:0;"><label>Costo</label><input type="number" class="nuevo-art-costo" min="0" step="0.01"></div>
          <div class="form-field" style="margin-bottom:0;"><label>Tarifa de IVA</label><select class="nuevo-art-tarifa"></select></div>
        </div>
        <div class="linea-crear-articulo-error" style="display:none; color:var(--red-ink); font-size:12.5px; margin-top:8px;"></div>
        <div style="display:flex; gap:8px; margin-top:12px;">
          <button type="button" class="btn btn-primary btn-guardar-nuevo-articulo">Crear y vincular</button>
          <button type="button" class="btn btn-ghost btn-cancelar-nuevo-articulo">Cancelar</button>
        </div>
      </div>
      <div class="linea-advertencia"></div>
      <div class="linea-advertencia-bodega"></div>
    `;

const articuloInput = fila.querySelector('.linea-articulo-input');
    const articuloSug = fila.querySelector('.linea-articulo-sug');
    const articuloElegidoBox = fila.querySelector('.linea-articulo-elegido');
    const bodegaSel = fila.querySelector('.linea-bodega');
    const cantidadInp = fila.querySelector('.linea-cantidad');
    const costoInp = fila.querySelector('.linea-costo');
    const tarifaInp = fila.querySelector('.linea-tarifa-iva');
    const subtotalDiv = fila.querySelector('.linea-subtotal');
    const totalDiv = fila.querySelector('.linea-total');
    const advertenciaDiv = fila.querySelector('.linea-advertencia');
    const codigoProveedorInp = fila.querySelector('.linea-codigo-proveedor');
    const pistaXmlDiv = fila.querySelector('.linea-pista-xml');
    const crearArticuloLink = fila.querySelector('.linea-crear-articulo-link');
    const crearArticuloBox = fila.querySelector('.linea-crear-articulo-box');
    const nuevoArtCodigo = fila.querySelector('.nuevo-art-codigo');
    const nuevoArtNombre = fila.querySelector('.nuevo-art-nombre');
    const nuevoArtCabys = fila.querySelector('.nuevo-art-cabys');
    const nuevoArtCosto = fila.querySelector('.nuevo-art-costo');
    const nuevoArtTarifa = fila.querySelector('.nuevo-art-tarifa');
    const crearArticuloError = fila.querySelector('.linea-crear-articulo-error');
    nuevoArtTarifa.innerHTML = TARIFAS_IVA.map(t=>`<option value="${t.codigo}">${t.nombre}</option>`).join('');

// Solo las bodegas de la sucursal activa -- una bodega de otra sucursal la rechazaría
    // igual el backend (trigger de consistencia, migración 077), pero mostrarla en la lista
    // solo confundiría: parecería una opción válida hasta el error al guardar.
    const bodegasDeLaSucursal = SUCURSAL_ACTUAL ? BODEGAS.filter(b => b.sucursal_id === SUCURSAL_ACTUAL.id) : BODEGAS;
    bodegaSel.innerHTML = bodegasDeLaSucursal.map(b=>`<option value="${b.id}">${b.nombre}</option>`).join('');

let articuloActual = null;

function recalcularLinea(){
      const cantidad = Number(cantidadInp.value) || 0;
      const costo = Number(costoInp.value) || 0;
      const tarifa = Number(tarifaInp.value) || 0;
      const subtotal = Math.round((cantidad * costo) * 100) / 100;
      const iva = Math.round((subtotal * tarifa / 100) * 100) / 100;
      const total = subtotal + iva;
      subtotalDiv.textContent = formatearMonto(subtotal);
      totalDiv.textContent = formatearMonto(total);

if (articuloActual && articuloActual.costo_sin_impuesto > 0 && costo > 0){
        const variacion = Math.abs(costo - articuloActual.costo_sin_impuesto) / articuloActual.costo_sin_impuesto;
        if (variacion >= UMBRAL_ADVERTENCIA_COSTO){
          const signo = costo > articuloActual.costo_sin_impuesto ? 'más alto' : 'más bajo';
          advertenciaDiv.textContent = `⚠ Este costo es ${Math.round(variacion*100)}% ${signo} que el costo de referencia del artículo (${formatearMonto(articuloActual.costo_sin_impuesto)}) -- revise si la cantidad y el costo están correctos.`;
          advertenciaDiv.classList.add('visible');
        } else {
          advertenciaDiv.classList.remove('visible');
        }
      } else {
        advertenciaDiv.classList.remove('visible');
      }
      recalcularTotalesCompra();
    }
    cantidadInp.addEventListener('input', recalcularLinea);
    costoInp.addEventListener('input', recalcularLinea);
    tarifaInp.addEventListener('input', recalcularLinea);

// Filtra el selector de bodega a las que el artículo tiene habilitadas (lista blanca,
    // diseno-inventarios.md 4.3) -- solo comodidad de pantalla, evita el error antes de que
    // ocurra; la regla real la sigue reforzando el trigger en base de datos (082), así que un
    // fallo de red aquí no compromete nada, solo deja de filtrar.
    const advertenciaBodegaDiv = fila.querySelector('.linea-advertencia-bodega');
    async function filtrarBodegasPorArticulo(articuloId){
      const valorPrevio = bodegaSel.value;
      advertenciaBodegaDiv.classList.remove('visible');
      try{
        const habilitadas = await llamarApi(`${API_ARTICULOS}/${articuloId}/bodegas`);
        const idsHabilitados = new Set(habilitadas.map(h => h.bodega_id));
        const restringido = idsHabilitados.size > 0;
        const disponibles = restringido
          ? bodegasDeLaSucursal.filter(b => idsHabilitados.has(b.id))
          : bodegasDeLaSucursal;
        bodegaSel.innerHTML = disponibles.map(b=>`<option value="${b.id}">${b.nombre}</option>`).join('');
        if (disponibles.some(b => String(b.id) === valorPrevio)) bodegaSel.value = valorPrevio;
        if (restringido && disponibles.length === 0){
          advertenciaBodegaDiv.textContent = '⚠ Este artículo no está habilitado en ninguna bodega de esta sucursal -- vaya a Ítems, arnés "Crear inventario por bodega", y habilite una.';
          advertenciaBodegaDiv.classList.add('visible');
        }
      }catch(e){ /* deja la lista completa de la sucursal si falla la consulta */ }
    }

async function elegirArticulo(art){
      articuloActual = art;
      fila.querySelector('.linea-articulo-nombre').textContent = `${art.codigo} — ${art.nombre}`;
      articuloElegidoBox.classList.add('visible');
      articuloInput.style.display = 'none';
      fila.querySelector('.linea-pista-xml').style.display = 'none';
      fila.querySelector('.linea-crear-articulo-link').style.display = 'none';
      fila.querySelector('.linea-crear-articulo-box').style.display = 'none';
      if (!costoInp.value && art.costo_sin_impuesto){ costoInp.value = art.costo_sin_impuesto; }
      await filtrarBodegasPorArticulo(art.id);
      recalcularLinea();
    }
    let artDebounce;
    articuloInput.addEventListener('input', ()=>{
      clearTimeout(artDebounce);
      artDebounce = setTimeout(async ()=>{
        const q = articuloInput.value.trim();
        if (q.length < 2){ articuloSug.classList.remove('abierta'); articuloSug.innerHTML=''; return; }
        posicionarSug(articuloInput, articuloSug);
        articuloSug.classList.add('abierta');
        articuloSug.innerHTML = `<div class="sug-cargando">Buscando…</div>`;
        const datos = await llamarApi(`${API_ARTICULOS}?texto=${encodeURIComponent(q)}&por_pagina=15`);
        const items = datos.items || datos;
        if (items.length === 0){ articuloSug.innerHTML = `<div class="sug-vacio">Ningún artículo contiene "${q}"</div>`; return; }
        articuloSug.innerHTML = items.map(a=>`<div class="sug-item" data-id="${a.id}">
          <span class="sug-nombre">${a.nombre}</span>
          <span class="sug-meta mono">${a.codigo}${a.codigo_cabys ? ' · CABYS ' + a.codigo_cabys : ''}</span></div>`).join('');
        articuloSug.querySelectorAll('.sug-item').forEach((item, i)=>{
          item.addEventListener('mousedown', e=>{ e.preventDefault(); elegirArticulo(items[i]); articuloSug.classList.remove('abierta'); });
        });
      }, 300);
    });
    // Si el usuario escribe pero nunca hace clic en una sugerencia real, el campo queda con texto
    // "huérfano" que se ve lleno aunque articuloActual sigue null -- confunde al guardar (bug
    // real reportado en Conceptos de Nota a Cliente). Al salir sin elegir de verdad, se limpia.
    articuloInput.addEventListener('blur', ()=> setTimeout(()=>{ articuloSug.classList.remove('abierta'); if (!articuloActual) articuloInput.value = ''; }, 150));
    fila.querySelector('.linea-articulo-cambiar').addEventListener('click', ()=>{
      articuloActual = null;
      articuloElegidoBox.classList.remove('visible');
      articuloInput.style.display = '';
      articuloInput.value = '';
      articuloInput.focus();
      advertenciaBodegaDiv.classList.remove('visible');
      bodegaSel.innerHTML = bodegasDeLaSucursal.map(b=>`<option value="${b.id}">${b.nombre}</option>`).join('');
      if (existente && existente.descripcion_xml){
        pistaXmlDiv.textContent = `Sin vincular todavía -- en la factura aparece como "${existente.descripcion_xml}"${existente.cabys ? ' · CABYS ' + existente.cabys : ''}. Búsquelo y elíjalo arriba.`;
        pistaXmlDiv.style.display = 'block';
        crearArticuloLink.style.display = 'block';
      }
    });
    fila.querySelector('.linea-quitar').addEventListener('click', ()=>{ fila.remove(); recalcularTotalesCompra(); });

// "+ Crear artículo nuevo" -- solo aparece en líneas de XML sin resolver (ver más abajo).
    // El código NUNCA se prellena: es la decisión real de quien recibe la mercadería (pistolea
    // el código de barras real), nunca algo que el sistema pueda inventar -- corrección real de
    // diseño después de un error concreto (ver diseno-cxp.md 3.12).
    crearArticuloLink.addEventListener('click', ()=>{
      crearArticuloLink.style.display = 'none';
      crearArticuloBox.style.display = 'block';
      crearArticuloError.style.display = 'none';
      nuevoArtNombre.value = existente.descripcion_xml || '';
      nuevoArtCabys.value = existente.cabys || '';
      nuevoArtCosto.value = existente.costo_unitario || '';
      const tarifaObjetivo = TARIFAS_IVA.find(t => Number(t.porcentaje) === Number(existente.tarifa_iva));
      if (tarifaObjetivo) nuevoArtTarifa.value = tarifaObjetivo.codigo;
      nuevoArtCodigo.value = '';
      nuevoArtCodigo.focus();
    });
    fila.querySelector('.btn-cancelar-nuevo-articulo').addEventListener('click', ()=>{
      crearArticuloBox.style.display = 'none';
      crearArticuloLink.style.display = 'block';
    });
    fila.querySelector('.btn-guardar-nuevo-articulo').addEventListener('click', async ()=>{
      const codigo = nuevoArtCodigo.value.trim();
      if (!codigo){
        crearArticuloError.textContent = 'El código es obligatorio -- capture el código real del artículo (ej. de barras).';
        crearArticuloError.style.display = 'block';
        nuevoArtCodigo.focus();
        return;
      }
      if (!nuevoArtTarifa.value){
        crearArticuloError.textContent = 'Elija la tarifa de IVA.';
        crearArticuloError.style.display = 'block';
        return;
      }
      const boton = fila.querySelector('.btn-guardar-nuevo-articulo');
      boton.disabled = true; boton.textContent = 'Creando…';
      try{
        const nuevo = await llamarApi(API_ARTICULOS, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({
          codigo,
          nombre: nuevoArtNombre.value.trim() || existente.descripcion_xml,
          moneda_costo: monedaSel.value,
          costo_sin_impuesto: Number(nuevoArtCosto.value) || 0,
          codigo_cabys: nuevoArtCabys.value.trim() || null,
          tarifa_iva: nuevoArtTarifa.value,
          creado_por: USUARIO_ACTUAL,
        })});
        crearArticuloBox.style.display = 'none';
        crearArticuloLink.style.display = 'none';
        pistaXmlDiv.style.display = 'none';
        await elegirArticulo(nuevo);
      }catch(e){
        crearArticuloError.textContent = e.message;
        crearArticuloError.style.display = 'block';
      } finally {
        boton.disabled = false; boton.textContent = 'Crear y vincular';
      }
    });

if (existente && existente.articulo_id){
      // Línea normal (edición existente, u Orden de Compra, o XML ya resuelto contra
      // articulo_proveedores): el artículo ya se conoce. El filtrado de bodega es async --
      // se fija bodega_id solo después de que termine, si no la reescribe el filtro al llegar.
      elegirArticulo({
        id: existente.articulo_id, codigo: existente.articulo_codigo, nombre: existente.articulo_nombre,
        codigo_cabys: existente.cabys, costo_sin_impuesto: 0,
      }).then(()=>{ if (existente.bodega_id) bodegaSel.value = existente.bodega_id; });
      cantidadInp.value = existente.cantidad;
      costoInp.value = existente.costo_unitario;
      tarifaInp.value = existente.tarifa_iva;
      codigoProveedorInp.value = existente.codigo_proveedor || '';
      recalcularLinea();
    } else if (existente){
      // Línea que llegó de un XML importado (Modo A) sin resolver todavía -- el proveedor
      // trajo un código que nunca habíamos visto para ningún artículo. El buscador queda
      // activo para que el usuario lo vincule; una vez elegido, se guarda solo en
      // articulo_proveedores al aplicar la compra (mismo upsert de la Etapa 1) y la próxima
      // factura de ese proveedor con ese mismo código ya resuelve sola.
      cantidadInp.value = existente.cantidad;
      costoInp.value = existente.costo_unitario;
      tarifaInp.value = existente.tarifa_iva;
      codigoProveedorInp.value = existente.codigo_proveedor || '';
      pistaXmlDiv.textContent = `Sin vincular todavía -- en la factura aparece como "${existente.descripcion_xml}"${existente.cabys ? ' · CABYS ' + existente.cabys : ''}. Búsquelo y elíjalo arriba.`;
      pistaXmlDiv.style.display = 'block';
      crearArticuloLink.style.display = 'block';
      recalcularLinea();
    }

if (existente && existente.advertencia_tarifa){
      advertenciaDiv.textContent = `⚠ ${existente.advertencia_tarifa}`;
      advertenciaDiv.classList.add('visible');
    }

fila.obtenerDatos = () => articuloActual ? {
      articulo_id: articuloActual.id,
      bodega_id: Number(bodegaSel.value),
      cantidad: Number(cantidadInp.value) || 0,
      costo_unitario: Number(costoInp.value) || 0,
      tarifa_iva: Number(tarifaInp.value) || 0,
      codigo_proveedor: codigoProveedorInp.value.trim() || null,
    } : null;
    fila.enfocar = () => articuloInput.focus();
    return fila;
  }

// ---------------- Registrar / Completar ----------------
  let compraEnEdicion = null;
  let prefillOrdenCompraId = null;
  let prefillLineasDesdeOrden = null;
  let prefillLineasDesdeXml = null;
  const registroOverlay = document.getElementById('registro-overlay');
  const monedaSel = document.getElementById('reg-moneda');
  monedaSel.addEventListener('change', ()=>{
    document.getElementById('reg-tipo-cambio-field').style.display = monedaSel.value === 'CRC' ? 'none' : '';
    sugerirTipoCambio();
  });
  document.getElementById('reg-fecha').addEventListener('change', sugerirTipoCambio);

// Sugerencia del tipo de cambio de referencia del BCCR para compras en dólares con fecha
  // atrasada (docs/diseno-cxp.md, mismo mecanismo de diseno-facturacion.md §18) -- SOLO una
  // sugerencia editable, nunca el valor real: el tipo de cambio real de una compra es el que
  // de verdad se negoció con el proveedor, el usuario siempre puede corregirlo. Nunca sobrescribe
  // un valor ya escrito (a mano o cargado de una compra existente) -- solo rellena si el campo
  // está vacío.
  async function sugerirTipoCambio(){
    const aviso = document.getElementById('tipo-cambio-aviso');
    const input = document.getElementById('reg-tipo-cambio');
    aviso.textContent = '';
    if (monedaSel.value === 'CRC' || input.value) return;
    const fecha = document.getElementById('reg-fecha').value;
    if (!fecha) return;
    try{
      const referencia = await llamarApi(`/bancos/tipo-cambio-referencia/vigente?fecha=${fecha}`);
      if (referencia && referencia.valor_venta){
        input.value = referencia.valor_venta;
        aviso.textContent = `Sugerido por BCCR para el ${formatearFecha(referencia.fecha)} -- corríjalo con el tipo de cambio real de esta compra si es distinto.`;
      }
    } catch(e){ /* sin tipo de cambio de referencia capturado todavía -- se deja vacío */ }
  }

function abrirNuevo(){
    compraEnEdicion = null;
    document.getElementById('registro-titulo').textContent = 'Nueva Compra';
    proveedorElegido = null;
    provElegidoBox.classList.remove('visible');
    provInput.style.display = '';
    provInput.value = '';
    document.getElementById('reg-numero-factura').value = '';
    document.getElementById('reg-fecha').value = new Date().toLocaleDateString('sv-SE');
    document.getElementById('reg-fecha-limite').value = '';
    document.getElementById('reg-termino-pago').value = '';
    monedaSel.value = 'CRC';
    document.getElementById('reg-tipo-cambio-field').style.display = 'none';
    document.getElementById('reg-tipo-cambio').value = '';
    document.getElementById('tipo-cambio-aviso').textContent = '';
    document.getElementById('reg-observaciones').value = '';
    document.getElementById('lineas-lista').innerHTML = '';
    document.getElementById('seccion-lineas').style.display = 'none';
    document.getElementById('seccion-lineas-aviso').style.display = '';
    document.getElementById('btn-guardar-registro').textContent = 'Guardar y continuar';
    registroOverlay.classList.add('abierto');
    setTimeout(()=> provInput.focus(), 30);
  }

async function abrirCompletar(id){
    const detalle = await llamarApi(`${API_COMPRAS}/${id}`);
    compraEnEdicion = detalle;
    document.getElementById('registro-titulo').textContent = `Completar Compra #${detalle.numero}`;
    elegirProveedor({id: detalle.proveedor_id, nombre: detalle.proveedor_nombre});
    document.getElementById('reg-numero-factura').value = detalle.numero_factura;
    document.getElementById('reg-fecha').value = detalle.fecha;
    document.getElementById('reg-fecha-limite').value = detalle.fecha_limite_pago || '';
    document.getElementById('reg-termino-pago').value = detalle.termino_pago || '';
    monedaSel.value = detalle.moneda;
    document.getElementById('reg-tipo-cambio-field').style.display = detalle.moneda === 'CRC' ? 'none' : '';
    document.getElementById('reg-tipo-cambio').value = detalle.moneda !== 'CRC' ? detalle.tipo_cambio : '';
    document.getElementById('tipo-cambio-aviso').textContent = '';
    document.getElementById('reg-observaciones').value = detalle.observaciones || '';

const lista = document.getElementById('lineas-lista');
    lista.innerHTML = '';
    detalle.lineas.forEach(l => lista.appendChild(crearFilaLinea(l)));
    document.getElementById('seccion-lineas').style.display = '';
    document.getElementById('seccion-lineas-aviso').style.display = 'none';
    recalcularTotalesCompra();
    document.getElementById('btn-guardar-registro').textContent = 'Guardar';
    registroOverlay.classList.add('abierto');
  }
  function cerrarRegistro(){ registroOverlay.classList.remove('abierto'); compraEnEdicion = null; }
  document.getElementById('btn-cerrar-registro').addEventListener('click', cerrarRegistro);
  document.getElementById('btn-cancelar-registro').addEventListener('click', cerrarRegistro);

// ---------------- Decisión: cómo registrar la nueva compra ----------------
  // "+ Nueva Compra" ya no dispara el formulario manual directo -- primero pregunta el modo,
  // con Manual como opción por defecto/recomendada y Orden de Compra/XML como atajos arriba.
  const decisionOverlay = document.getElementById('decision-overlay');
  function abrirDecision(){
    decisionOverlay.classList.add('abierto');
    setTimeout(()=> document.getElementById('btn-decision-manual').focus(), 30);
  }
  function cerrarDecision(){ decisionOverlay.classList.remove('abierto'); }
  document.getElementById('btn-nuevo').addEventListener('click', abrirDecision);
  document.getElementById('decision-cancelar').addEventListener('click', cerrarDecision);
  document.getElementById('btn-decision-manual').addEventListener('click', ()=>{
    cerrarDecision();
    abrirNuevo();
  });
  document.getElementById('btn-decision-orden').addEventListener('click', ()=>{
    cerrarDecision();
    sessionStorage.setItem('fenix_seleccionar_orden_compra', '1');
    window.parent.postMessage({tipo:'fenix-nav', destino:'ordenescompra'}, '*');
  });
  document.getElementById('btn-decision-importar').addEventListener('click', ()=>{
    cerrarDecision();
    document.getElementById('input-xml-compra').click();
  });
  document.getElementById('input-xml-compra').addEventListener('change', async (ev)=>{
    const archivo = ev.target.files[0];
    ev.target.value = '';
    if (!archivo) return;
    let datos;
    try{
      const formData = new FormData();
      formData.append('archivo', archivo);
      const resp = await fetch(`${API_BASE}/cxp/compras/importar-xml`, {method:'POST', body: formData});
      if (!resp.ok){
        let detalle = `El servidor respondió ${resp.status}`;
        try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
        throw new Error(detalle);
      }
      datos = await resp.json();
    }catch(e){
      await modalAlert(e.message, 'No se pudo leer el XML');
      return;
    }

if (!datos.proveedor_encontrado){
      await modalAlert(
        `Esta factura la emite "${datos.proveedor_nombre_xml}" (identificación ${datos.proveedor_identificacion_xml}), pero no hay ningún proveedor con esa identificación en el catálogo. Cree el proveedor primero en Proveedores y vuelva a importar el XML.`,
        'Proveedor no encontrado'
      );
      return;
    }

abrirNuevo();
    elegirProveedor({id: datos.proveedor_id, nombre: datos.proveedor_nombre});
    document.getElementById('reg-numero-factura').value = datos.numero_factura;
    document.getElementById('reg-fecha').value = datos.fecha;
    document.getElementById('reg-termino-pago').value = datos.termino_pago || '';
    document.getElementById('reg-fecha-limite').value = datos.fecha_limite_pago || '';
    monedaSel.value = datos.moneda;
    document.getElementById('reg-tipo-cambio-field').style.display = datos.moneda === 'CRC' ? 'none' : '';
    if (datos.tipo_cambio) document.getElementById('reg-tipo-cambio').value = datos.tipo_cambio;
    prefillLineasDesdeXml = datos.lineas;

if (prefillLineasDesdeOrden){
          const lista = document.getElementById('lineas-lista');
          prefillLineasDesdeOrden.forEach(l => lista.appendChild(crearFilaLinea(l)));
          recalcularTotalesCompra();
          prefillLineasDesdeOrden = null;
        }
        if (prefillLineasDesdeXml){
          const lista = document.getElementById('lineas-lista');
          prefillLineasDesdeXml.forEach(l => lista.appendChild(crearFilaLinea(l)));
          recalcularTotalesCompra();
          prefillLineasDesdeXml = null;
        }
        prefillOrdenCompraId = null;

// Principio 3 (fenix-principios-ux): sin líneas precargadas (Orden de Compra/XML), el
        // usuario eligió Manual -- el buscador de artículos debe quedar listo para escribir de
        // una vez, no obligarlo a un clic extra en "+ Agregar ítem" antes de poder empezar.
        if (document.querySelectorAll('#lineas-lista .linea-fila').length === 0){
          const fila = crearFilaLinea(null);
          document.getElementById('lineas-lista').appendChild(fila);
          fila.enfocar();
        }

await cargar();
        return;
      }

// ---------------- Acciones de fila ----------------
  async function aplicarCompra(id){
    const ok = await modalConfirm('¿Aplicar esta compra? Esto registra el ingreso a inventario, genera la factura en Cuentas a Pagar y contabiliza el asiento.', 'Aplicar compra');
    if (!ok) return;
    try{
      await llamarApi(`${API_COMPRAS}/${id}/aplicar`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({aplicado_por: USUARIO_ACTUAL})});
      await cargar();
    }catch(e){ await modalAlert(e.message, 'No se pudo aplicar'); }
  }
  async function anularCompra(id){
    const motivo = window.prompt('Motivo de anulación (revierte el asiento, el movimiento de inventario y quita la factura de Cuentas a Pagar):');
    if (!motivo) return;
    try{
      await llamarApi(`${API_COMPRAS}/${id}/anular`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({anulado_por: USUARIO_ACTUAL, motivo_anulacion: motivo})});
      await cargar();
    }catch(e){ await modalAlert(e.message, 'No se pudo anular'); }
  }
  async function eliminarCompra(id){
    const ok = await modalConfirm('¿Eliminar esta compra? Esta acción no se puede deshacer.', 'Eliminar compra', 'danger', 'Eliminar');
    if (!ok) return;
    try{
      await llamarApi(`${API_COMPRAS}/${id}`, {method:'DELETE'});
      await cargar();
    }catch(e){ await modalAlert(e.message, 'No se pudo eliminar'); }
  }
  async function copiarAsiento(asientoId){
    const ok = await modalConfirm('¿Copiar el asiento de esta compra para hacer una corrección? Se creará un asiento nuevo, Pendiente, sin tocar el original.', 'Copiar asiento');
    if (!ok) return;
    try{
      const nuevo = await llamarApi(`/asientos/${asientoId}/copiar`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({creado_por: USUARIO_ACTUAL})});
      await modalAlert(`Se creó el asiento #${nuevo.numero}, Pendiente. Corríjalo desde Contabilidad › Asientos.`, 'Asiento copiado');
    }catch(e){ await modalAlert(e.message, 'No se pudo copiar'); }
  }
  // ---------------- Listado ----------------
  function pillEstado(estado){
    const clases = {Registrado:'pill-registrado', Aplicado:'pill-aplicado', Anulado:'pill-anulado'};
    return `<span class="pill ${clases[estado]||''}">${estado}</span>`;
  }
  function construirQuery(){
    const params = new URLSearchParams();
    const texto = document.getElementById('f-texto').value.trim();
    if (texto) params.set('texto', texto);
    const estado = document.getElementById('f-estado').value;
    if (estado) params.set('estado', estado);
    const fd = document.getElementById('f-fecha-desde').value;
    if (fd) params.set('fecha_desde', fd);
    const fh = document.getElementById('f-fecha-hasta').value;
    if (fh) params.set('fecha_hasta', fh);
    const md = document.getElementById('f-monto-desde').value;
    if (md) params.set('monto_desde', md);
    const mh = document.getElementById('f-monto-hasta').value;
    if (mh) params.set('monto_hasta', mh);
    return params.toString();
  }

async function cargar(){
    actualizarResumenImpresion();
    const compras = await llamarApi(`${API_COMPRAS}?${construirQuery()}`);
    const tbody = document.getElementById('tbody-compras');
    const vacio = document.getElementById('estado-vacio');
    if (compras.length === 0){ tbody.innerHTML = ''; vacio.style.display = 'block'; return; }
    vacio.style.display = 'none';
    tbody.innerHTML = compras.map(c => `
      <tr>
        <td class="mono">#${c.numero}</td>
        <td>${c.proveedor_nombre}</td>
        <td class="mono">${c.numero_factura}</td>
        <td class="muted-cell">${formatearFecha(c.fecha)}</td>
        <td class="num mono">${formatearMonto(c.total)} ${c.moneda}</td>
        <td class="muted-cell mono">#${c.asiento_numero}</td>
        <td>${pillEstado(c.estado)}</td>
        <td class="acciones-cell">
          ${c.estado === 'Registrado' ? `
            <button class="icon-btn" title="Completar" data-completar="${c.id}"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg></button>
            <button class="icon-btn" title="Aplicar" data-aplicar="${c.id}"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M20 6 9 17l-5-5"/></svg></button>
            <button class="icon-btn danger" title="Eliminar" data-eliminar="${c.id}"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6h16Z"/></svg></button>
          ` : ''}
          ${c.estado === 'Aplicado' ? `
            <button class="icon-btn" title="Ver" data-ver="${c.id}"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="3"/><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7Z"/></svg></button>
            <button class="icon-btn" title="Copiar asiento" data-copiar="${c.asiento_id}"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>
            <button class="icon-btn danger" title="Anular" data-anular="${c.id}"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="m15 9-6 6M9 9l6 6"/></svg></button>
          ` : ''}
        </td>
      </tr>
    `).join('');
  }
  document.getElementById('tbody-compras').addEventListener('click', (ev)=>{
    const btn = ev.target.closest('button');
    if (!btn) return;
    if (btn.dataset.completar) abrirCompletar(Number(btn.dataset.completar));
    else if (btn.dataset.ver) abrirCompletar(Number(btn.dataset.ver));
    else if (btn.dataset.aplicar) aplicarCompra(Number(btn.dataset.aplicar));
    else if (btn.dataset.eliminar) eliminarCompra(Number(btn.dataset.eliminar));
    else if (btn.dataset.anular) anularCompra(Number(btn.dataset.anular));
    else if (btn.dataset.copiar) copiarAsiento(Number(btn.dataset.copiar));
  });

// Prefill desde "Crear Compra" en Órdenes de Compra -- ver ordenes_compra_ui.html,
  // irACompraConPrefill(). El número de factura y la fecha NO se prellenan (son el
  // documento real del proveedor, no algo que la Orden pueda anticipar).
  //
  // Por qué un listener de 'storage' y no solo revisar sessionStorage al cargar: el shell
  // carga cada pantalla UNA sola vez y reutiliza el mismo iframe en visitas siguientes
  // (cargarSiHaceFalta en shell_template.html) -- si Compras ya se había abierto antes (que es
  // justo el caso real: el usuario abre "+ Nueva Compra" en Compras, elige "Desde Orden de
  // Compra", y ahí ya existe un iframe de Compras cargado y en pausa), su script de arranque no
  // vuelve a correr al regresar, así que un chequeo que solo se hace una vez nunca lo detecta.
  // El evento 'storage' sí llega en cualquier momento a cualquier documento del mismo origen
  // que tenga el listener puesto -- confirmado que aquí SÍ se dispara entre iframes hermanos,
  // aunque el destino esté oculto (display:none) en ese instante.
  function aplicarPrefillDesdeOrden(){
    const crudo = sessionStorage.getItem('fenix_prefill_compra');
    if (!crudo) return;
    sessionStorage.removeItem('fenix_prefill_compra');
    let datos;
    try{ datos = JSON.parse(crudo); }catch(e){ return; }
    abrirNuevo();
    elegirProveedor({id: datos.proveedor_id, nombre: datos.proveedor_nombre});
    document.getElementById('reg-observaciones').value = `Generada desde Orden de Compra #${datos.orden_compra_numero}`;
    prefillOrdenCompraId = datos.orden_compra_id;
    prefillLineasDesdeOrden = datos.lineas || null;
  }
  window.addEventListener('storage', (ev)=>{
    if (ev.key === 'fenix_prefill_compra' && ev.newValue) aplicarPrefillDesdeOrden();
  });

(async function iniciar(){
    await cargarCatalogos();
    await cargar();
    aplicarPrefillDesdeOrden();
  })();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Orden de Compra</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1160px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:180px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}

.table-wrap{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow);
  }
  table{border-collapse:collapse; width:100%; min-width:950px;}
  thead th{
    text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-muted); padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
  }
  th.num, td.num{text-align:right;}
  tbody td{padding:11px 14px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--surface-2);}
  .muted-cell{color:var(--ink-muted);}
  .icon-btn{
    background:none; border:1px solid transparent; border-radius:6px; padding:5px;
    cursor:pointer; color:var(--ink-muted); display:inline-flex;
  }
  .icon-btn:hover{background:var(--surface-2); color:var(--ink);}
  .icon-btn.danger:hover{color:var(--red-ink); background:var(--red-bg);}
  .acciones-cell{display:flex; gap:4px; align-items:center;}

.pill{display:inline-flex; align-items:center; gap:5px; border-radius:20px; padding:3px 10px; font-size:12px; font-weight:600; border:1px solid; cursor:pointer;}
  .pill::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor;}
  .pill-registrado{background:var(--amber-bg); color:var(--amber-ink); border-color:var(--amber-line);}
  .pill-aplicado{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
  .pill-anulado{background:var(--grey-bg); color:var(--grey-ink); border-color:var(--line-strong);}
  .badge-compras{font-size:12px; color:var(--accent); font-weight:600;}

.banner-seleccion{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    background:var(--amber-bg); border:1px solid var(--amber-line); color:var(--amber-ink);
    border-radius:8px; padding:10px 14px; margin-bottom:14px; font-size:13.5px;
  }
  .btn-usar-orden{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700;}
  .btn-usar-orden:hover{filter:brightness(1.06);}

.empty-state{padding:48px 24px; text-align:center; color:var(--ink-muted);}

.overlay{
    display:none; position:fixed; inset:0; background:rgba(10,14,10,.5);
    align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; z-index:50;
  }
  .overlay.abierto{display:flex;}
  .panel{
    background:var(--surface); border-radius:12px; box-shadow:var(--shadow);
    width:100%; max-width:1180px; padding:22px 24px 24px;
  }
  .panel-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
  .panel-header h2{font-size:18px;}
  .seccion{margin-bottom:20px;}
  .seccion h3{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin-bottom:10px;}
  .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:10px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input, .form-field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%;
  }
  .form-field input[disabled], .form-field select[disabled]{opacity:.7;}

.linea-fila{border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:10px; background:var(--surface-2);}
  .linea-fila-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
  .linea-fila-campos{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:10px; align-items:end;}
  .linea-total{font-weight:700; text-align:right;}
  .linea-advertencia{
    margin-top:8px; background:var(--amber-bg); border:1px solid var(--amber-line); color:var(--amber-ink);
    border-radius:6px; padding:6px 10px; font-size:12.5px; display:none;
  }
  .linea-advertencia.visible{display:block;}

.acciones-secundarias{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
  .registro-acciones{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;}

.modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,14,10,.5);
    align-items:center; justify-content:center; z-index:100;
  }
  /* #modal-overlay (aviso/confirmacion) comparte la clase .modal-overlay con otro overlay de
     esta pantalla, mismo z-index -- si #modal-overlay aparece antes en el DOM, al abrirse los
     dos a la vez (ej. un error de guardado mientras un formulario sigue abierto) el otro overlay
     pintaba encima y el aviso quedaba oculto/inaccesible detras. Bug real reportado: "el
     Entendido no se ve". Un z-index propio, mas alto, garantiza que el aviso siempre gane sin
     importar el orden del DOM. */
  #modal-overlay{ z-index:400; }
  .modal-overlay.abierto{display:flex;}
  .modal-box{background:var(--surface); border-radius:12px; box-shadow:var(--shadow); max-width:440px; width:100%; padding:20px 22px;}
  .modal-box h3{font-size:16px; margin-bottom:10px;}
  .modal-box p{font-size:13.5px; color:var(--ink-muted); margin-bottom:14px;}
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px; margin-top:8px;}
  .estado-info{background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:10px; font-size:13px;}
  .estado-info div{margin-bottom:4px;}
  .estado-info div:last-child{margin-bottom:0;}

#zona-impresion{display:none;}
  @media print{
    .app, .overlay, .modal-overlay{display:none !important;}
    #zona-impresion{display:block !important; padding:24px; color:#000;}
    #zona-impresion table{width:100%; border-collapse:collapse; margin-top:14px;}
    #zona-impresion th, #zona-impresion td{border:1px solid #333; padding:6px 8px; text-align:left; font-size:12px;}
    #zona-impresion th.num, #zona-impresion td.num{text-align:right;}
    #zona-impresion h2{margin-bottom:6px;}
    #zona-impresion .imp-total{text-align:right; font-weight:700; margin-top:8px; font-size:14px;}
  }
</style>

<div class="app">
  <div class="topbar">
    <div class="brand">
      <h1>Fénix</h1>
      <span class="sep">/</span>
      <span class="empresa" id="empresa-nombre">Sistemas Rodríguez y Asociados — Orden de Compra</span>
    </div>
    <div class="crumbs">Proveeduría / <b>Órdenes de Compra</b></div>
  </div>

<div class="banner-seleccion" id="banner-seleccion" style="display:none;">
    <span>Elija la orden que desea convertir en Compra -- haga clic en <b>"Usar esta orden"</b> en la fila correspondiente.</span>
    <button class="btn btn-ghost" id="btn-cancelar-seleccion">Cancelar</button>
  </div>

<div class="filters">
    <div class="field texto">
      <label>Buscar</label>
      <input type="text" id="f-texto" placeholder="Consecutivo o proveedor…">
    </div>
    <div class="field">
      <label>Estado</label>
      <select id="f-estado">
        <option value="">Todos</option>
        <option value="Registrado">Registrado</option>
        <option value="Aplicado">Aplicado</option>
        <option value="Anulado">Anulado</option>
      </select>
    </div>
    <div class="field">
      <label>Término de pago</label>
      <input type="text" id="f-termino-pago" placeholder="Ej. Crédito 30 días">
    </div>
    <div class="field">
      <label>Fecha desde</label>
      <input type="date" id="f-fecha-desde">
    </div>
    <div class="field">
      <label>Fecha hasta</label>
      <input type="date" id="f-fecha-hasta">
    </div>
    <div class="field">
      <label>Monto desde</label>
      <input type="number" id="f-monto-desde" step="0.01">
    </div>
    <div class="field">
      <label>Monto hasta</label>
      <input type="number" id="f-monto-hasta" step="0.01">
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <a class="btn btn-ghost no-print" id="btn-volver" data-nav-shell="compras" href="compras_ui.html">‹ Volver a Compras</a>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nueva Orden</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Número</th>
          <th>Proveedor</th>
          <th>Fecha</th>
          <th>Entrega est.</th>
          <th>Término de pago</th>
          <th class="num">Total</th>
          <th>Compras</th>
          <th>Estado</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="tbody-ordenes"></tbody>
    </table>
    <div class="empty-state" id="estado-vacio" style="display:none;">No hay órdenes de compra que coincidan con el filtro.</div>
  </div>
</div>

<div class="overlay" id="registro-overlay">
  <div class="panel">
    <div class="panel-header">
      <h2 id="registro-titulo">Nueva Orden de Compra</h2>
      <button class="icon-btn" id="btn-cerrar-registro">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 6 6 18M6 6l12 12"/></svg>
      </button>
    </div>

<div class="seccion">
      <h3>Datos generales</h3>
      <div class="form-field">
        <label>Proveedor</label>
        <div class="buscador-wrap">
          <input type="text" id="proveedor-input" placeholder="Escriba para buscar un proveedor…">
          <div class="sugerencias" id="proveedor-sugerencias"></div>
        </div>
        <div class="elegido-box" id="proveedor-elegido-box">
          <span id="proveedor-elegido-nombre"></span>
          <a id="proveedor-cambiar">Cambiar</a>
        </div>
      </div>
      <div class="grid-3">
        <div class="form-field">
          <label>Fecha</label>
          <input type="date" id="reg-fecha">
        </div>
        <div class="form-field">
          <label>Fecha estimada de entrega</label>
          <input type="date" id="reg-fecha-entrega">
        </div>
        <div class="form-field">
          <label>Término de pago</label>
          <input type="text" id="reg-termino-pago" placeholder="Ej. Contado, Crédito 30 días">
        </div>
      </div>
      <div class="grid-3">
        <div class="form-field">
          <label>Moneda</label>
          <select id="reg-moneda">
            <option value="CRC">CRC</option>
            <option value="USD">USD</option>
          </select>
        </div>
        <div class="form-field" id="reg-tipo-cambio-field" style="display:none;">
          <label>Tipo de cambio</label>
          <input type="number" id="reg-tipo-cambio" min="0.000001" step="0.000001">
        </div>
      </div>
      <div class="form-field">
        <label>Observaciones</label>
        <input type="text" id="reg-observaciones">
      </div>
    </div>

<div class="acciones-secundarias" id="acciones-secundarias" style="display:none;">
      <button class="btn btn-ghost" id="btn-crear-compra">Crear Compra</button>
      <button class="btn btn-ghost" id="btn-crear-anticipo">Crear Anticipo</button>
      <button class="btn btn-ghost" id="btn-duplicar-panel">Duplicar</button>
      <button class="btn btn-ghost" id="btn-imprimir-panel">Imprimir</button>
    </div>

<div class="modal-overlay" id="estado-overlay">
  <div class="modal-box">
    <h3 id="estado-titulo"></h3>
    <div class="estado-info" id="estado-info"></div>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="estado-cerrar">Cerrar</button>
      <button class="btn btn-primary" id="estado-aplicar" style="display:none;">Marcar como Aplicada</button>
    </div>
  </div>
</div>

<div id="zona-impresion">
  <h2>Orden de Compra #<span id="imp-numero"></span></h2>
  <p>Proveedor: <span id="imp-proveedor"></span></p>
  <p>Fecha: <span id="imp-fecha"></span> — Entrega estimada: <span id="imp-entrega"></span></p>
  <p>Término de pago: <span id="imp-termino"></span></p>
  <table>
    <thead><tr><th>Código</th><th>Artículo</th><th class="num">Cantidad</th><th class="num">Costo unit.</th><th class="num">Total</th></tr></thead>
    <tbody id="imp-lineas"></tbody>
  </table>
  <p class="imp-total">Total: <span id="imp-total"></span></p>
  <p id="imp-observaciones"></p>
</div>

// Modo selección: se llega aquí desde el modal "Nueva Compra" de compras_ui.html eligiendo
  // "Desde Orden de Compra" -- en vez de solo listar, ofrece un botón directo por fila para
  // elegir cuál orden usar, sin tener que abrir el panel de detalle primero.
  let modoSeleccionOrden = sessionStorage.getItem('fenix_seleccionar_orden_compra') === '1';
  sessionStorage.removeItem('fenix_seleccionar_orden_compra');

async function llamarApi(path, opciones){
    let resp;
    try{ resp = await fetch(`${API_BASE}${path}`, opciones); }
    catch(e){ throw new Error('No se pudo conectar al backend (¿está corriendo uvicorn?)'); }
    if (!resp.ok){
      let detalle = `El servidor respondió ${resp.status}`;
      try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
      throw new Error(detalle);
    }
    if (resp.status === 204) return null;
    return resp.json();
  }
  function formatearMonto(v){ return Number(v||0).toLocaleString('es-CR', {minimumFractionDigits:2, maximumFractionDigits:2}); }
  function formatearFecha(iso){
    if (!iso) return '—';
    const [a,m,d] = iso.split('-');
    return `${d}/${m}/${a}`;
  }
  function formatearFechaHora(iso){
    if (!iso) return '—';
    const d = new Date(iso);
    return d.toLocaleString('es-CR', {day:'2-digit', month:'2-digit', year:'numeric', hour:'2-digit', minute:'2-digit'});
  }

// ---------------- Motor de líneas (sin bodega -- se decide al aplicar la Compra real) ----------------
  const UMBRAL_ADVERTENCIA_COSTO = 0.5;

function crearFilaLinea(existente, soloLectura){
    const fila = document.createElement('div');
    fila.className = 'linea-fila';
    fila.innerHTML = `
      <div class="linea-fila-top">
        <div class="buscador-wrap" style="flex:1;">
          <input type="text" class="linea-articulo-input" placeholder="Buscar artículo por código o nombre…">
          <div class="sugerencias linea-articulo-sug"></div>
        </div>
        <button type="button" class="icon-btn danger linea-quitar" title="Quitar" style="margin-left:8px;">
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 6 6 18M6 6l12 12"/></svg>
        </button>
      </div>
      <div class="elegido-box linea-articulo-elegido">
        <span class="linea-articulo-nombre"></span>
        <a class="linea-articulo-cambiar">Cambiar</a>
      </div>
      <div class="linea-fila-campos" style="margin-top:8px;">
        <div class="form-field" style="margin-bottom:0;"><label>Cantidad</label><input type="number" class="linea-cantidad" min="0.01" step="0.01" value="1"></div>
        <div class="form-field" style="margin-bottom:0;"><label>Costo unitario</label><input type="number" class="linea-costo" min="0" step="0.01"></div>
        <div class="form-field" style="margin-bottom:0;"><label>IVA %</label><input type="number" class="linea-tarifa-iva" min="0" step="0.5" value="13"></div>
        <div class="form-field" style="margin-bottom:0;"><label>Subtotal</label><div class="linea-subtotal mono" style="padding:8px 0; color:var(--ink-muted);">0,00</div></div>
        <div class="form-field" style="margin-bottom:0;"><label>Total línea</label><div class="linea-total mono" style="padding:8px 0;">0,00</div></div>
      </div>
      <div class="linea-advertencia"></div>
    `;

let articuloActual = null;

if (articuloActual && articuloActual.costo_sin_impuesto > 0 && costo > 0){
        const variacion = Math.abs(costo - articuloActual.costo_sin_impuesto) / articuloActual.costo_sin_impuesto;
        if (variacion >= UMBRAL_ADVERTENCIA_COSTO){
          const signo = costo > articuloActual.costo_sin_impuesto ? 'más alto' : 'más bajo';
          advertenciaDiv.textContent = `⚠ Este costo es ${Math.round(variacion*100)}% ${signo} que el costo de referencia del artículo (${formatearMonto(articuloActual.costo_sin_impuesto)}) -- revise si la cantidad y el costo están correctos.`;
          advertenciaDiv.classList.add('visible');
        } else {
          advertenciaDiv.classList.remove('visible');
        }
      } else {
        advertenciaDiv.classList.remove('visible');
      }
      recalcularTotalesOrden();
    }
    cantidadInp.addEventListener('input', recalcularLinea);
    costoInp.addEventListener('input', recalcularLinea);
    tarifaInp.addEventListener('input', recalcularLinea);

if (existente){
      elegirArticulo({
        id: existente.articulo_id, codigo: existente.articulo_codigo, nombre: existente.articulo_nombre,
        costo_sin_impuesto: 0,
      });
      cantidadInp.value = existente.cantidad;
      costoInp.value = existente.costo_unitario;
      tarifaInp.value = existente.tarifa_iva;
      recalcularLinea();
    }

if (soloLectura){
      fila.querySelectorAll('input, select, .linea-quitar, .linea-articulo-cambiar').forEach(el=> el.disabled = true);
      fila.querySelector('.linea-quitar').style.display = 'none';
    }

fila.obtenerDatos = () => articuloActual ? {
      articulo_id: articuloActual.id,
      cantidad: Number(cantidadInp.value) || 0,
      costo_unitario: Number(costoInp.value) || 0,
      tarifa_iva: Number(tarifaInp.value) || 0,
    } : null;
    fila.enfocar = () => articuloInput.focus();
    return fila;
  }

// ---------------- Registrar / Modificar / Ver ----------------
  let ordenEnEdicion = null;
  let prefillLineas = null; // set por "Crear Orden" desde otra pantalla -- no aplica aquí, reservado
  const registroOverlay = document.getElementById('registro-overlay');
  const monedaSel = document.getElementById('reg-moneda');
  monedaSel.addEventListener('change', ()=>{
    document.getElementById('reg-tipo-cambio-field').style.display = monedaSel.value === 'CRC' ? 'none' : '';
  });

function habilitarCamposGenerales(habilitar){
    ['reg-fecha','reg-fecha-entrega','reg-termino-pago','reg-moneda','reg-tipo-cambio','reg-observaciones'].forEach(id=>{
      document.getElementById(id).disabled = !habilitar;
    });
    document.getElementById('btn-agregar-linea').style.display = habilitar ? '' : 'none';
    document.getElementById('proveedor-cambiar').style.display = habilitar ? '' : 'none';
  }

function abrirNuevo(){
    ordenEnEdicion = null;
    document.getElementById('registro-titulo').textContent = 'Nueva Orden de Compra';
    proveedorElegido = null;
    provElegidoBox.classList.remove('visible');
    provInput.style.display = '';
    provInput.value = '';
    document.getElementById('reg-fecha').value = new Date().toLocaleDateString('sv-SE');
    document.getElementById('reg-fecha-entrega').value = '';
    document.getElementById('reg-termino-pago').value = '';
    monedaSel.value = 'CRC';
    document.getElementById('reg-tipo-cambio-field').style.display = 'none';
    document.getElementById('reg-tipo-cambio').value = '';
    document.getElementById('reg-observaciones').value = '';
    document.getElementById('lineas-lista').innerHTML = '';
    document.getElementById('seccion-lineas').style.display = 'none';
    document.getElementById('seccion-lineas-aviso').style.display = '';
    document.getElementById('acciones-secundarias').style.display = 'none';
    document.getElementById('btn-guardar-registro').style.display = '';
    document.getElementById('btn-guardar-registro').textContent = 'Guardar y continuar';
    habilitarCamposGenerales(true);
    registroOverlay.classList.add('abierto');
    setTimeout(()=> provInput.focus(), 30);
  }

async function abrirDetalle(id, soloLectura){
    const detalle = await llamarApi(`${API_ORDENES}/${id}`);
    ordenEnEdicion = detalle;
    document.getElementById('registro-titulo').textContent = `${soloLectura ? 'Orden' : 'Modificar Orden'} #${detalle.numero} — ${detalle.estado}`;
    elegirProveedor({id: detalle.proveedor_id, nombre: detalle.proveedor_nombre});
    document.getElementById('reg-fecha').value = detalle.fecha;
    document.getElementById('reg-fecha-entrega').value = detalle.fecha_estimada_entrega || '';
    document.getElementById('reg-termino-pago').value = detalle.termino_pago || '';
    monedaSel.value = detalle.moneda;
    document.getElementById('reg-tipo-cambio-field').style.display = detalle.moneda === 'CRC' ? 'none' : '';
    document.getElementById('reg-tipo-cambio').value = detalle.moneda !== 'CRC' ? detalle.tipo_cambio : '';
    document.getElementById('reg-observaciones').value = detalle.observaciones || '';

const lista = document.getElementById('lineas-lista');
    lista.innerHTML = '';
    detalle.lineas.forEach(l => lista.appendChild(crearFilaLinea(l, soloLectura)));
    document.getElementById('seccion-lineas').style.display = '';
    document.getElementById('seccion-lineas-aviso').style.display = 'none';
    recalcularTotalesOrden();

habilitarCamposGenerales(!soloLectura);
    document.getElementById('btn-guardar-registro').style.display = soloLectura ? 'none' : '';
    document.getElementById('btn-guardar-registro').textContent = 'Guardar';

document.getElementById('acciones-secundarias').style.display = '';
    document.getElementById('btn-crear-compra').style.display = detalle.estado === 'Anulado' ? 'none' : '';
    document.getElementById('btn-crear-anticipo').style.display = detalle.estado === 'Anulado' ? 'none' : '';
    registroOverlay.classList.add('abierto');
  }
  function cerrarRegistro(){ registroOverlay.classList.remove('abierto'); ordenEnEdicion = null; }
  document.getElementById('btn-cerrar-registro').addEventListener('click', cerrarRegistro);
  document.getElementById('btn-cancelar-registro').addEventListener('click', cerrarRegistro);
  document.getElementById('btn-nuevo').addEventListener('click', abrirNuevo);

if (prefillLineas){
          const lista = document.getElementById('lineas-lista');
          prefillLineas.forEach(l => lista.appendChild(crearFilaLinea(l, false)));
          recalcularTotalesOrden();
          prefillLineas = null;
        }

// Principio 3 (fenix-principios-ux): sin líneas precargadas, el buscador de artículos
        // debe quedar listo para escribir de una vez, no exigir un clic extra en "+ Agregar ítem".
        if (document.querySelectorAll('#lineas-lista .linea-fila').length === 0){
          const fila = crearFilaLinea(null);
          document.getElementById('lineas-lista').appendChild(fila);
          fila.enfocar();
        }

await cargar();
        return;
      }

// ---------------- Acciones secundarias del panel ----------------
  function irACompraConPrefill(orden){
    const lineas = orden.lineas.map(l => ({articulo_id: l.articulo_id, articulo_codigo: l.articulo_codigo, articulo_nombre: l.articulo_nombre, cantidad: l.cantidad, costo_unitario: l.costo_unitario, tarifa_iva: l.tarifa_iva}));
    sessionStorage.setItem('fenix_prefill_compra', JSON.stringify({
      proveedor_id: orden.proveedor_id, proveedor_nombre: orden.proveedor_nombre,
      orden_compra_id: orden.id, orden_compra_numero: orden.numero, lineas,
    }));
    window.parent.postMessage({tipo:'fenix-nav', destino:'compras'}, '*');
  }
  function irAAnticipoConPrefill(orden){
    sessionStorage.setItem('fenix_prefill_anticipo', JSON.stringify({
      proveedor_id: orden.proveedor_id, proveedor_nombre: orden.proveedor_nombre,
      orden_compra: `Orden #${orden.numero}`,
    }));
    window.parent.postMessage({tipo:'fenix-nav', destino:'anticiposproveedor'}, '*');
  }
  document.getElementById('btn-crear-compra').addEventListener('click', ()=>{
    if (ordenEnEdicion) irACompraConPrefill(ordenEnEdicion);
  });
  document.getElementById('btn-crear-anticipo').addEventListener('click', ()=>{
    if (ordenEnEdicion) irAAnticipoConPrefill(ordenEnEdicion);
  });
  document.getElementById('btn-duplicar-panel').addEventListener('click', async ()=>{
    if (!ordenEnEdicion) return;
    await duplicarOrden(ordenEnEdicion.id);
  });
  document.getElementById('btn-imprimir-panel').addEventListener('click', ()=>{
    if (ordenEnEdicion) imprimirOrden(ordenEnEdicion);
  });

// ---------------- Impresión ----------------
  function imprimirOrden(orden){
    document.getElementById('imp-numero').textContent = orden.numero;
    document.getElementById('imp-proveedor').textContent = orden.proveedor_nombre;
    document.getElementById('imp-fecha').textContent = formatearFecha(orden.fecha);
    document.getElementById('imp-entrega').textContent = formatearFecha(orden.fecha_estimada_entrega);
    document.getElementById('imp-termino').textContent = orden.termino_pago || '—';
    document.getElementById('imp-total').textContent = `${formatearMonto(orden.total)} ${orden.moneda}`;
    document.getElementById('imp-observaciones').textContent = orden.observaciones ? `Observaciones: ${orden.observaciones}` : '';
    document.getElementById('imp-lineas').innerHTML = (orden.lineas || []).map(l => `
      <tr><td>${l.articulo_codigo}</td><td>${l.articulo_nombre}</td><td class="num">${l.cantidad}</td>
          <td class="num">${formatearMonto(l.costo_unitario)}</td><td class="num">${formatearMonto(l.total_linea)}</td></tr>
    `).join('');
    setTimeout(()=> window.print(), 50);
  }
  async function imprimirOrdenPorId(id){
    const detalle = await llamarApi(`${API_ORDENES}/${id}`);
    imprimirOrden(detalle);
  }

// ---------------- Estado / auditoría ----------------
  const estadoOverlay = document.getElementById('estado-overlay');
  const estadoAplicarBtn = document.getElementById('estado-aplicar');
  async function abrirEstado(orden){
    document.getElementById('estado-titulo').textContent = `Orden #${orden.numero} — ${orden.estado}`;
    let html = `<div>Creada por <b>${orden.creado_por}</b>, el ${formatearFechaHora(orden.creado_en)}</div>`;
    if (orden.modificado_por) html += `<div>Modificada por <b>${orden.modificado_por}</b>, el ${formatearFechaHora(orden.modificado_en)}</div>`;
    if (orden.estado === 'Aplicado') html += `<div>Aplicada por <b>${orden.aplicado_por}</b>, el ${formatearFechaHora(orden.aplicado_en)}</div>`;
    if (orden.estado === 'Anulado'){
      html += `<div>Anulada por <b>${orden.anulado_por}</b>, el ${formatearFechaHora(orden.anulado_en)}</div>`;
      html += `<div>Motivo: ${orden.motivo_anulacion}</div>`;
    }
    if (orden.compras_generadas > 0) html += `<div>Compras generadas: <b>${orden.compras_generadas}</b></div>`;
    document.getElementById('estado-info').innerHTML = html;
    estadoAplicarBtn.style.display = (orden.estado === 'Registrado') ? '' : 'none';
    estadoAplicarBtn.onclick = async ()=>{
      if (!orden.tiene_lineas){ await modalAlert('Agregue al menos una línea antes de aplicar.'); return; }
      try{
        await llamarApi(`${API_ORDENES}/${orden.id}/aplicar`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({aplicado_por: USUARIO_ACTUAL})});
        estadoOverlay.classList.remove('abierto');
        await cargar();
      }catch(e){ await modalAlert(e.message, 'No se pudo aplicar'); }
    };
    estadoOverlay.classList.add('abierto');
  }
  document.getElementById('estado-cerrar').addEventListener('click', ()=> estadoOverlay.classList.remove('abierto'));

// ---------------- Acciones de fila ----------------
  async function eliminarOrden(id){
    const ok = await modalConfirm('¿Eliminar esta orden de compra? Esta acción no se puede deshacer.', 'Eliminar orden', 'danger', 'Eliminar');
    if (!ok) return;
    try{
      await llamarApi(`${API_ORDENES}/${id}`, {method:'DELETE'});
      await cargar();
    }catch(e){ await modalAlert(e.message, 'No se pudo eliminar'); }
  }
  async function anularOrden(id){
    const motivo = window.prompt('Motivo de anulación:');
    if (!motivo) return;
    try{
      await llamarApi(`${API_ORDENES}/${id}/anular`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({anulado_por: USUARIO_ACTUAL, motivo_anulacion: motivo})});
      await cargar();
    }catch(e){ await modalAlert(e.message, 'No se pudo anular'); }
  }
  async function duplicarOrden(id){
    const ok = await modalConfirm('¿Duplicar esta orden como una nueva orden de compra (Registrada, con las mismas cantidades editables)?', 'Duplicar orden');
    if (!ok) return;
    try{
      const nueva = await llamarApi(`${API_ORDENES}/${id}/duplicar`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({creado_por: USUARIO_ACTUAL})});
      cerrarRegistro();
      await cargar();
      await modalAlert(`Se creó la Orden #${nueva.numero}, Registrada. Puede editar las cantidades antes de enviarla.`, 'Orden duplicada');
    }catch(e){ await modalAlert(e.message, 'No se pudo duplicar'); }
  }

// ---------------- Listado ----------------
  function pillEstado(estado){
    const clases = {Registrado:'pill-registrado', Aplicado:'pill-aplicado', Anulado:'pill-anulado'};
    return `<span class="pill ${clases[estado]||''}" data-estado-id="__ID__">${estado}</span>`;
  }
  async function cargar(){
    const params = new URLSearchParams();
    const texto = document.getElementById('f-texto').value.trim();
    if (texto) params.set('texto', texto);
    const estado = document.getElementById('f-estado').value;
    if (estado) params.set('estado', estado);
    const terminoPago = document.getElementById('f-termino-pago').value.trim();
    if (terminoPago) params.set('termino_pago', terminoPago);
    const fd = document.getElementById('f-fecha-desde').value;
    if (fd) params.set('fecha_desde', fd);
    const fh = document.getElementById('f-fecha-hasta').value;
    if (fh) params.set('fecha_hasta', fh);
    const md = document.getElementById('f-monto-desde').value;
    if (md) params.set('monto_desde', md);
    const mh = document.getElementById('f-monto-hasta').value;
    if (mh) params.set('monto_hasta', mh);

document.getElementById('btn-cancelar-seleccion').addEventListener('click', ()=>{
    modoSeleccionOrden = false;
    document.getElementById('banner-seleccion').style.display = 'none';
    cargar();
  });

// Mismo problema y mismo fix que en compras_ui.html/anticipos_proveedor_ui.html: el shell
  // reutiliza el iframe ya cargado (cargarSiHaceFalta), así que si el usuario ya había abierto
  // Órdenes de Compra antes de pedir "Desde Orden de Compra" desde Compras, el chequeo de
  // sessionStorage al arrancar nunca vuelve a correr. El evento 'storage' sí llega en cualquier
  // momento, con el iframe ya cargado o no.
  window.addEventListener('storage', (ev)=>{
    if (ev.key !== 'fenix_seleccionar_orden_compra' || !ev.newValue) return;
    sessionStorage.removeItem('fenix_seleccionar_orden_compra');
    modoSeleccionOrden = true;
    document.getElementById('banner-seleccion').style.display = '';
    cargar();
  });

(async function iniciar(){
    if (modoSeleccionOrden) document.getElementById('banner-seleccion').style.display = '';
    await cargar();
  })();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Notas a Proveedor</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1180px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:160px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:130px;}
  .field.chico input{width:110px;}
  .filters .spacer{flex:1; min-width:8px;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.pill{
    display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 8px;
    border-radius:99px; font-size:11.5px; font-weight:700; letter-spacing:.02em;
    border:1px solid transparent; white-space:nowrap;
  }
  .pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
  .pill-aplicado{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
  .pill-pendiente{background:var(--amber-bg); color:var(--amber-ink); border-color:var(--amber-line);}
  .pill-anulado{background:var(--grey-bg); color:var(--grey-ink); border-color:var(--line-strong);}
  .pill-credito{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
  .pill-debito{background:var(--amber-bg); color:var(--amber-ink); border-color:var(--amber-line);}

.registro-overlay{display:none; position:fixed; inset:0; background:var(--bg); z-index:250; overflow-y:auto;}
  .registro-overlay.abierto{display:block;}
  .registro-wrap{max-width:920px; margin:0 auto; padding:28px 24px 80px;}
  .registro-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
  .seccion{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:18px 20px; margin-bottom:16px; box-shadow:var(--shadow);
  }
  .seccion h3{font-size:15px; margin-bottom:14px;}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
  .form-grid.tres{grid-template-columns:1fr 1fr 1fr;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input[type="text"], .form-field input[type="number"], .form-field input[type="date"], .form-field select, .form-field textarea{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%; font-family:inherit;
  }
  .form-field input[disabled], .form-field select[disabled]{opacity:.6;}
  .form-field .ayuda{font-size:11.5px; color:var(--ink-muted); margin-top:2px;}

.cuenta-picker{position:relative;}
  .cuenta-sugerencias{
    display:none; position:fixed; background:var(--surface); border:1px solid var(--line-strong);
    border-radius:9px; box-shadow:var(--shadow); max-height:240px; overflow-y:auto; z-index:400;
  }
  .cuenta-sugerencias.abierta{display:block;}
  .sug-nombre{font-size:13.5px; color:var(--ink);}
  .sug-nombre mark{background:transparent; color:var(--accent); font-weight:700; padding:0;}
  .sug-meta{font-size:11px; color:var(--ink-muted);}
  .cuenta-elegida{
    display:none; align-items:center; justify-content:space-between; gap:10px;
    background:var(--accent-soft); border:1px solid var(--accent); border-radius:7px;
    padding:7px 11px; font-size:13px; min-height:34.5px; margin-bottom:14px;
  }
  .cuenta-elegida.visible{display:flex;}
  .cuenta-elegida .cambiar{
    background:none; border:none; color:var(--accent); font-weight:600; cursor:pointer; padding:0;
    font-size:12px; text-decoration:underline; font-family:inherit; white-space:nowrap;
  }

.registro-acciones{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}

.reporte-overlay{display:none; position:fixed; inset:0; background:var(--bg); z-index:250; overflow-y:auto;}
  .reporte-overlay.abierto{display:block;}
  .reporte-wrap{max-width:760px; margin:0 auto; padding:28px 24px 80px;}
  .reporte-acciones{display:flex; justify-content:flex-end; gap:10px; margin-bottom:20px; flex-wrap:wrap;}
  .rpt-header{display:flex; justify-content:space-between; margin-bottom:18px; padding-bottom:14px; border-bottom:2px solid var(--ink);}
  .rpt-numero{font-size:22px; font-weight:700; color:var(--red-ink);}
  .rpt-datos{margin:16px 0; font-size:13.5px;}
  .rpt-datos .fila{display:flex; gap:8px; padding:6px 0; border-bottom:1px dotted var(--line-strong);}
  .rpt-datos .etiqueta{color:var(--ink-muted); min-width:170px;}
  .rpt-datos .valor{font-weight:600;}
  .rpt-totales{width:60%; margin-left:auto; border-collapse:collapse; margin-top:16px;}
  .rpt-totales td{padding:6px 12px; border:1px solid var(--line-strong);}
  .rpt-totales td.etq{text-align:left;}
  .rpt-totales td.num{text-align:right;}
  .rpt-totales tr.total td{font-weight:700; background:var(--surface-2); font-size:15px;}

@media print{
    @page{ margin: 1.5cm; }
    body{background:#fff; color:#000;}
    .app{display:none !important;}
    .reporte-acciones, .no-print, .topbar .crumbs, .filters, .row-actions{display:none !important;}
    .reporte-overlay{position:static; background:#fff;}
    .rpt-totales tr.total td{background:none !important;}
  }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Notas a Proveedor</span>
    </div>
    <div class="crumbs"><b>Proveeduría</b> / Gestión / Notas a proveedores</div>
  </div>

<div class="filters">
    <div class="field">
      <label for="f-fecha-desde">Fecha desde</label>
      <input type="date" id="f-fecha-desde">
    </div>
    <div class="field">
      <label for="f-fecha-hasta">Fecha hasta</label>
      <input type="date" id="f-fecha-hasta">
    </div>
    <div class="field texto">
      <label for="f-proveedor">Proveedor</label>
      <select id="f-proveedor"><option value="">Todos</option></select>
    </div>
    <div class="field">
      <label for="f-tipo">Tipo</label>
      <select id="f-tipo">
        <option value="">Todos</option>
        <option value="credito">Crédito</option>
        <option value="debito">Débito</option>
      </select>
    </div>
    <div class="field">
      <label for="f-subtipo">Subtipo</label>
      <select id="f-subtipo">
        <option value="">Todos</option>
        <option value="devolucion">Devolución</option>
        <option value="a_la_compra">A la compra</option>
        <option value="al_proveedor">Al proveedor</option>
      </select>
    </div>
    <div class="field texto">
      <label for="f-concepto">Concepto</label>
      <select id="f-concepto"><option value="">Todos</option></select>
    </div>
    <div class="field">
      <label for="f-estado">Estado</label>
      <select id="f-estado">
        <option value="">Todos</option>
        <option value="Pendiente">Registrada</option>
        <option value="Aplicado">Aplicada</option>
        <option value="Anulado">Anulada</option>
      </select>
    </div>
    <div class="field chico">
      <label for="f-total-desde">Total desde</label>
      <input type="number" id="f-total-desde" min="0" step="0.01">
    </div>
    <div class="field chico">
      <label for="f-total-hasta">Total hasta</label>
      <input type="number" id="f-total-hasta" min="0" step="0.01">
    </div>
    <div class="field texto">
      <label for="f-observaciones">Observaciones</label>
      <input type="text" id="f-observaciones" placeholder="Buscar en observaciones…">
    </div>
    <div class="spacer"></div>
    <a class="btn btn-ghost no-print" id="btn-volver" data-nav-shell="proveedores" href="proveedores_ui.html">‹ Volver a Proveeduría</a>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nueva Nota</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Número</th>
          <th>Fecha</th>
          <th>Proveedor</th>
          <th>Concepto</th>
          <th>Tipo</th>
          <th>Subtipo</th>
          <th class="num">Total</th>
          <th>Estado</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay notas con estos filtros</b>
      Ajusta los filtros, o límpialos para ver todas, o crea la primera con "+ Nueva Nota".
    </div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div class="registro-overlay" id="registro-overlay">
  <div class="registro-wrap">
    <div class="registro-header">
      <h2 id="registro-titulo">NUEVA NOTA A PROVEEDOR</h2>
      <button class="btn btn-ghost" id="btn-cerrar-registro">✕ Cerrar</button>
    </div>

<div class="seccion">
      <h3>Datos generales</h3>
      <div class="form-grid">
        <div class="form-field">
          <label for="reg-fecha">Fecha</label>
          <input type="date" id="reg-fecha">
        </div>
        <div class="form-field">
          <label for="reg-concepto">Concepto</label>
          <select id="reg-concepto"></select>
        </div>
        <div class="form-field">
          <label for="reg-tipo">Tipo</label>
          <select id="reg-tipo">
            <option value="credito">Crédito</option>
            <option value="debito">Débito</option>
          </select>
        </div>
        <div class="form-field">
          <label for="reg-subtipo">Subtipo</label>
          <select id="reg-subtipo">
            <option value="a_la_compra">A la compra</option>
            <option value="devolucion">Devolución</option>
            <option value="al_proveedor">Al proveedor</option>
          </select>
          <div class="ayuda" id="reg-subtipo-ayuda"></div>
        </div>
      </div>
      <div class="form-field">
        <label for="proveedor-input">Proveedor</label>
        <div class="proveedor-picker">
          <input id="proveedor-input" type="text" autocomplete="off" placeholder="Escriba para buscar un proveedor…">
          <div class="proveedor-sugerencias" id="proveedor-sugerencias"></div>
        </div>
        <div class="proveedor-elegido" id="proveedor-elegido-box">
          <span id="proveedor-elegido-nombre"></span>
          <button class="cambiar" id="cambiar-proveedor">Cambiar</button>
        </div>
      </div>
      <div class="form-field">
        <label for="reg-observaciones">Observaciones</label>
        <input type="text" id="reg-observaciones">
      </div>
    </div>

<div class="seccion" id="seccion-factura" style="display:none;">
      <h3>Factura a la que se liga la nota</h3>
      <table class="facturas-table">
        <thead>
          <tr><th></th><th>Documento</th><th>Fecha</th><th class="num">Total</th><th class="num">Saldo</th></tr>
        </thead>
        <tbody id="tbody-facturas"></tbody>
      </table>
      <div class="facturas-vacio" id="facturas-vacio" style="display:none;">Este proveedor no tiene facturas con saldo pendiente.</div>
    </div>

<div class="seccion">
      <h3>Montos</h3>
      <div class="form-grid tres">
        <div class="form-field">
          <label for="reg-moneda">Moneda</label>
          <select id="reg-moneda">
            <option value="CRC">CRC</option>
            <option value="USD">USD</option>
          </select>
        </div>
        <div class="form-field">
          <label for="reg-subtotal">Subtotal</label>
          <input type="number" id="reg-subtotal" min="0" step="0.01" value="0">
        </div>
        <div class="form-field">
          <label for="reg-descuento">Descuento</label>
          <input type="number" id="reg-descuento" min="0" step="0.01" value="0">
        </div>
        <div class="form-field">
          <label for="reg-impuestos">Impuestos (IVA)</label>
          <input type="number" id="reg-impuestos" min="0" step="0.01" value="0">
        </div>
        <div class="form-field" id="reg-monto-local-field" style="display:none;">
          <label for="reg-monto-local">Total equivalente en colones</label>
          <input type="number" id="reg-monto-local" min="0" step="0.01">
          <div class="ayuda">El tipo de cambio se deriva de este monto -- nunca se declara directamente.</div>
        </div>
      </div>

<div class="form-field" id="seccion-iva" style="display:none;">
        <label for="iva-cuenta-input">Cuenta de IVA</label>
        <div class="cuenta-picker">
          <input id="iva-cuenta-input" type="text" autocomplete="off" placeholder="Escriba para buscar una cuenta…">
          <div class="cuenta-sugerencias" id="iva-cuenta-sugerencias"></div>
        </div>
        <div class="cuenta-elegida" id="iva-cuenta-elegida-box">
          <span><span class="mono" id="iva-cuenta-elegida-codigo"></span> — <span id="iva-cuenta-elegida-nombre"></span></span>
          <button type="button" class="cambiar" id="iva-cambiar-cuenta">Cambiar</button>
        </div>
      </div>

<div class="totales-box">
        <span class="desc">Total de la nota</span>
        <span class="num mono" id="reg-total-valor">0,00</span>
      </div>
    </div>

<div class="reporte-overlay" id="reporte-overlay">
  <div class="reporte-wrap">
    <div class="reporte-acciones">
      <button class="btn btn-ghost no-print" id="btn-pdf-nota" style="display:none;">📄 Exportar a PDF</button>
      <button class="btn btn-ghost no-print" id="btn-imprimir-nota" style="display:none;">🖨 Imprimir</button>
      <button class="btn btn-ghost no-print" id="btn-correo-nota" style="display:none;" disabled title="Disponible cuando exista el conector de correo">✉ Enviar por correo</button>
      <button class="btn btn-primary no-print" id="btn-cerrar-reporte">✕ Cerrar</button>
    </div>

<div class="rpt-datos">
      <div class="fila"><span class="etiqueta">Proveedor:</span><span class="valor" id="rpt-proveedor"></span></div>
      <div class="fila"><span class="etiqueta">Concepto:</span><span class="valor" id="rpt-concepto"></span></div>
      <div class="fila"><span class="etiqueta">Tipo / Subtipo:</span><span class="valor" id="rpt-tiposub"></span></div>
      <div class="fila"><span class="etiqueta">Ligado a la compra N.°:</span><span class="valor" id="rpt-factura"></span></div>
      <div class="fila"><span class="etiqueta">Observaciones:</span><span class="valor" id="rpt-observaciones"></span></div>
      <div class="fila"><span class="etiqueta">Estado:</span><span class="valor" id="rpt-estado"></span></div>
    </div>

<table class="rpt-totales">
      <tr><td class="etq">Subtotal</td><td class="num mono" id="rpt-subtotal"></td></tr>
      <tr id="rpt-fila-descuento"><td class="etq">Descuento</td><td class="num mono" id="rpt-descuento"></td></tr>
      <tr><td class="etq">IVA</td><td class="num mono" id="rpt-impuestos"></td></tr>
      <tr class="total"><td class="etq">TOTAL</td><td class="num mono" id="rpt-total"></td></tr>
    </table>
  </div>
</div>

// ---------------- Modal propio ----------------
  const modalOverlay = document.getElementById('modal-overlay');
  const modalTitulo = document.getElementById('modal-titulo');
  const modalMensaje = document.getElementById('modal-mensaje');
  const modalCancelar = document.getElementById('modal-cancelar');
  const modalAceptar = document.getElementById('modal-aceptar');
  function mostrarModal({titulo, mensaje, tipo, botonAceptar, colorAceptar}){
    return new Promise(resolve=>{
      modalTitulo.textContent = titulo;
      modalMensaje.textContent = mensaje;
      modalAceptar.textContent = botonAceptar || 'Aceptar';
      modalAceptar.className = 'btn ' + (colorAceptar === 'danger' ? 'btn-danger' : 'btn-primary');
      modalCancelar.style.display = tipo === 'alert' ? 'none' : '';
      function cerrar(valor){
        modalOverlay.classList.remove('abierto');
        modalAceptar.onclick = null; modalCancelar.onclick = null;
        document.removeEventListener('keydown', onKey);
        resolve(valor);
      }
      function onKey(e){ if (e.key === 'Escape') cerrar(false); }
      modalAceptar.onclick = ()=> cerrar(true);
      modalCancelar.onclick = ()=> cerrar(false);
      document.addEventListener('keydown', onKey);
      modalOverlay.classList.add('abierto');
      setTimeout(()=> modalAceptar.focus(), 30);
    });
  }
  function modalAlert(mensaje, titulo='Aviso'){ return mostrarModal({titulo, mensaje, tipo:'alert', botonAceptar:'Entendido'}); }
  function modalConfirm(mensaje, titulo='Confirmar', colorAceptar='primary', botonAceptar='Confirmar'){
    return mostrarModal({titulo, mensaje, tipo:'confirm', botonAceptar, colorAceptar});
  }

// ---------------- Catálogos ----------------
  let PROVEEDORES = [], CONCEPTOS = [], CUENTAS_TODAS = [], CUENTAS = [], CUENTAS_POR_CODIGO = {};
  async function cargarCatalogos(){
    const [proveedores, conceptos, cuentas] = await Promise.all([
      llamarApi(`${API_PROVEEDORES}?activa=true`),
      llamarApi(`${API_CONCEPTOS}?activo=true`),
      llamarApi('/cuentas'),
    ]);
    PROVEEDORES = proveedores;
    CONCEPTOS = conceptos;
    CUENTAS_TODAS = cuentas.map(c => ({id: c.id, codigo: c.codigo, nombre: c.nombre, acepta: c.acepta_movimientos}));
    CUENTAS = CUENTAS_TODAS.filter(c => c.acepta);
    CUENTAS_POR_CODIGO = Object.fromEntries(CUENTAS_TODAS.map(c => [c.codigo, c]));

function nombrePadreCuenta(codigo){
    const segs = codigo.split('-');
    if (segs.length <= 1) return null;
    const padre = CUENTAS_POR_CODIGO[segs.slice(0,-1).join('-')];
    return padre ? padre.nombre : null;
  }
  function resaltar(texto, query){
    const idx = texto.toUpperCase().indexOf(query.toUpperCase());
    if (idx === -1) return texto;
    return texto.slice(0,idx) + '<mark>' + texto.slice(idx, idx+query.length) + '</mark>' + texto.slice(idx+query.length);
  }

// ---------------- Buscador de cuenta de IVA ----------------
  let ivaCuentaElegida = null;
  const ivaInput = document.getElementById('iva-cuenta-input');
  const ivaCaja = document.getElementById('iva-cuenta-sugerencias');
  const ivaElegidaBox = document.getElementById('iva-cuenta-elegida-box');
  function marcarIvaCuenta(codigo){
    ivaCuentaElegida = codigo;
    const c = CUENTAS_POR_CODIGO[codigo];
    document.getElementById('iva-cuenta-elegida-codigo').textContent = c.codigo;
    document.getElementById('iva-cuenta-elegida-nombre').textContent = c.nombre;
    ivaElegidaBox.classList.add('visible');
    ivaInput.style.display = 'none';
  }
  function limpiarIvaCuenta(){
    ivaCuentaElegida = null;
    ivaElegidaBox.classList.remove('visible');
    ivaInput.style.display = '';
    ivaInput.value = '';
  }
  function posicionarIvaSug(){
    const r = ivaInput.getBoundingClientRect();
    ivaCaja.style.top = (r.bottom + 4) + 'px';
    ivaCaja.style.left = r.left + 'px';
    ivaCaja.style.width = Math.max(r.width, 280) + 'px';
  }
  function cerrarIvaSug(){ ivaCaja.classList.remove('abierta'); ivaCaja.innerHTML = ''; }
  function buscarIvaCuenta(){
    const q = ivaInput.value.trim();
    if (q.length < 1){ cerrarIvaSug(); return; }
    const ql = q.toUpperCase();
    const resultados = CUENTAS.filter(c => c.nombre.toUpperCase().includes(ql) || c.codigo.startsWith(q))
      .sort((a,b) => a.nombre.localeCompare(b.nombre, 'es'));
    posicionarIvaSug();
    if (resultados.length === 0){
      ivaCaja.innerHTML = `<div class="sug-vacio">Ninguna cuenta de detalle contiene "${q}"</div>`;
      ivaCaja.classList.add('abierta');
      return;
    }
    ivaCaja.innerHTML = resultados.slice(0,20).map(c => {
      const padre = nombrePadreCuenta(c.codigo);
      return `<div class="sug-item" data-codigo="${c.codigo}">
        <span class="sug-nombre">${resaltar(c.nombre, q)}</span><br>
        <span class="sug-meta"><span class="mono">${c.codigo}</span>${padre ? ` · ${padre}` : ''}</span>
      </div>`;
    }).join('');
    ivaCaja.classList.add('abierta');
    ivaCaja.querySelectorAll('.sug-item').forEach(item => {
      item.addEventListener('mousedown', e => { e.preventDefault(); marcarIvaCuenta(item.dataset.codigo); cerrarIvaSug(); });
    });
  }
  ivaInput.addEventListener('input', buscarIvaCuenta);
  // Si el usuario escribe pero nunca hace clic en una sugerencia real, el campo queda con texto
  // "huérfano" que se ve lleno aunque ivaCuentaElegida sigue null -- el aviso de "obligatorio" al
  // guardar contradice lo que el usuario ve en pantalla. Al salir sin elegir de verdad, se limpia
  // solo para que lo vacío se vea vacío (bug real reportado en Conceptos de Nota a Cliente).
  ivaInput.addEventListener('blur', () => setTimeout(()=>{ cerrarIvaSug(); if (!ivaCuentaElegida) ivaInput.value = ''; }, 150));
  document.getElementById('iva-cambiar-cuenta').addEventListener('click', () => { limpiarIvaCuenta(); ivaInput.focus(); });

// ---------------- Buscador de proveedor ----------------
  let proveedorElegido = null;
  const proveedorInput = document.getElementById('proveedor-input');
  const proveedorCaja = document.getElementById('proveedor-sugerencias');
  const proveedorElegidoBox = document.getElementById('proveedor-elegido-box');
  function posicionarProvSug(){
    const r = proveedorInput.getBoundingClientRect();
    proveedorCaja.style.top = (r.bottom + 4) + 'px';
    proveedorCaja.style.left = r.left + 'px';
    proveedorCaja.style.width = Math.max(r.width, 280) + 'px';
  }
  function cerrarProvSug(){ proveedorCaja.classList.remove('abierta'); proveedorCaja.innerHTML = ''; }
  function buscarProveedor(){
    const q = proveedorInput.value.trim();
    if (q.length < 1){ cerrarProvSug(); return; }
    const resultados = PROVEEDORES.filter(p=>p.nombre.toUpperCase().includes(q.toUpperCase()));
    posicionarProvSug();
    if (resultados.length === 0){
      proveedorCaja.innerHTML = `<div class="sug-vacio">Ningún proveedor contiene "${q}"</div>`;
      proveedorCaja.classList.add('abierta');
      return;
    }
    proveedorCaja.innerHTML = resultados.slice(0,20).map(p=>`<div class="sug-item" data-id="${p.id}">${p.nombre}</div>`).join('');
    proveedorCaja.classList.add('abierta');
    proveedorCaja.querySelectorAll('.sug-item').forEach(item=>{
      item.addEventListener('mousedown', e=>{ e.preventDefault(); elegirProveedor(Number(item.dataset.id)); cerrarProvSug(); });
    });
  }
  async function elegirProveedor(id){
    proveedorElegido = PROVEEDORES.find(p=>p.id === id);
    document.getElementById('proveedor-elegido-nombre').textContent = proveedorElegido.nombre;
    proveedorElegidoBox.classList.add('visible');
    proveedorInput.style.display = 'none';
    await recargarFacturasSiHaceFalta();
  }
  function limpiarProveedor(){
    proveedorElegido = null;
    proveedorElegidoBox.classList.remove('visible');
    proveedorInput.style.display = '';
    proveedorInput.value = '';
    FACTURAS_PROVEEDOR = [];
    facturaElegida = null;
    pintarFacturas();
  }
  proveedorInput.addEventListener('input', buscarProveedor);
  // Si el usuario escribe pero nunca hace clic en una sugerencia real, el campo queda con texto
  // "huérfano" que se ve lleno aunque proveedorElegido sigue null -- el aviso de "obligatorio" al
  // guardar contradice lo que el usuario ve en pantalla. Al salir sin elegir de verdad, se limpia
  // solo para que lo vacío se vea vacío (bug real reportado en Conceptos de Nota a Cliente).
  proveedorInput.addEventListener('blur', ()=> setTimeout(()=>{ cerrarProvSug(); if (!proveedorElegido) proveedorInput.value = ''; }, 150));
  document.getElementById('cambiar-proveedor').addEventListener('click', ()=>{ limpiarProveedor(); proveedorInput.focus(); });

// ---------------- Sección Factura (radio, una sola por nota) ----------------
  let FACTURAS_PROVEEDOR = [], facturaElegida = null;
  function subtipoNecesitaFactura(){
    return document.getElementById('reg-subtipo').value !== 'al_proveedor';
  }
  async function recargarFacturasSiHaceFalta(){
    if (!proveedorElegido || !subtipoNecesitaFactura()){
      document.getElementById('seccion-factura').style.display = 'none';
      return;
    }
    document.getElementById('seccion-factura').style.display = '';
    FACTURAS_PROVEEDOR = await llamarApi(`${API_FACTURAS}?proveedor_id=${proveedorElegido.id}&solo_pendientes=true`);
    facturaElegida = null;
    pintarFacturas();
  }
  function pintarFacturas(){
    const tbody = document.getElementById('tbody-facturas');
    const vacio = document.getElementById('facturas-vacio');
    if (!subtipoNecesitaFactura() || !proveedorElegido){
      tbody.innerHTML = ''; vacio.style.display = 'none';
      return;
    }
    if (FACTURAS_PROVEEDOR.length === 0){
      tbody.innerHTML = ''; vacio.style.display = 'block';
      return;
    }
    vacio.style.display = 'none';
    tbody.innerHTML = FACTURAS_PROVEEDOR.map(f => `
      <tr>
        <td><input type="radio" name="factura-radio" data-id="${f.id}" ${facturaElegida && facturaElegida.id === f.id ? 'checked' : ''}></td>
        <td class="mono">${f.numero_factura}</td>
        <td class="muted-cell">${formatearFecha(f.fecha)}</td>
        <td class="num mono">${formatearMonto(f.monto)}</td>
        <td class="num mono">${formatearMonto(f.saldo_pendiente)}</td>
      </tr>
    `).join('');
  }
  document.getElementById('tbody-facturas').addEventListener('change', (ev)=>{
    if (ev.target.name !== 'factura-radio') return;
    const id = Number(ev.target.dataset.id);
    facturaElegida = FACTURAS_PROVEEDOR.find(f=>f.id === id);
    if (facturaElegida){
      document.getElementById('reg-moneda').value = facturaElegida.moneda;
      document.getElementById('reg-moneda').disabled = true;
      actualizarVisibilidadMonedaExtranjera();
    }
  });

document.getElementById('reg-subtipo').addEventListener('change', async ()=>{
    document.getElementById('reg-subtipo-ayuda').textContent = SUBTIPO_AYUDA[document.getElementById('reg-subtipo').value] || '';
    if (!subtipoNecesitaFactura()){
      facturaElegida = null;
      document.getElementById('reg-moneda').disabled = false;
    }
    await recargarFacturasSiHaceFalta();
  });

// ---------------- Montos y total ----------------
  function actualizarVisibilidadMonedaExtranjera(){
    const esCRC = document.getElementById('reg-moneda').value === 'CRC';
    document.getElementById('reg-monto-local-field').style.display = esCRC ? 'none' : '';
  }
  document.getElementById('reg-moneda').addEventListener('change', actualizarVisibilidadMonedaExtranjera);

function recalcularTotalForm(){
    const subtotal = Number(document.getElementById('reg-subtotal').value) || 0;
    const descuento = Number(document.getElementById('reg-descuento').value) || 0;
    const impuestos = Number(document.getElementById('reg-impuestos').value) || 0;
    const total = Math.round((subtotal - descuento + impuestos) * 100) / 100;
    document.getElementById('reg-total-valor').textContent = formatearMonto(total);
    document.getElementById('seccion-iva').style.display = impuestos > 0 ? '' : 'none';
    return total;
  }
  ['reg-subtotal','reg-descuento','reg-impuestos'].forEach(id=>{
    document.getElementById(id).addEventListener('input', recalcularTotalForm);
  });

// ---------------- Abrir / cerrar formulario ----------------
  const registroOverlay = document.getElementById('registro-overlay');
  let notaEnEdicion = null;

function abrirNuevo(){
    notaEnEdicion = null;
    document.getElementById('registro-titulo').textContent = 'NUEVA NOTA A PROVEEDOR';
    limpiarProveedor();
    document.getElementById('reg-fecha').value = new Date().toLocaleDateString('sv-SE');
    document.getElementById('reg-concepto').selectedIndex = 0;
    document.getElementById('reg-tipo').value = 'credito';
    document.getElementById('reg-subtipo').value = 'a_la_compra';
    document.getElementById('reg-subtipo-ayuda').textContent = SUBTIPO_AYUDA['a_la_compra'];
    document.getElementById('reg-observaciones').value = '';
    document.getElementById('reg-moneda').value = 'CRC';
    document.getElementById('reg-moneda').disabled = false;
    document.getElementById('reg-subtotal').value = '0';
    document.getElementById('reg-descuento').value = '0';
    document.getElementById('reg-impuestos').value = '0';
    document.getElementById('reg-monto-local').value = '';
    limpiarIvaCuenta();
    actualizarVisibilidadMonedaExtranjera();
    recalcularTotalForm();
    registroOverlay.classList.add('abierto');
    setTimeout(()=> proveedorInput.focus(), 30);
  }

async function abrirModificar(id){
    const n = await llamarApi(`${API_NOTAS}/${id}`);
    notaEnEdicion = n;
    document.getElementById('registro-titulo').textContent = `MODIFICAR NOTA #${n.numero}`;

proveedorElegido = PROVEEDORES.find(p=>p.id === n.proveedor_id) || {id:n.proveedor_id, nombre:n.proveedor_nombre};
    document.getElementById('proveedor-elegido-nombre').textContent = proveedorElegido.nombre;
    proveedorElegidoBox.classList.add('visible');
    proveedorInput.style.display = 'none';

document.getElementById('reg-fecha').value = n.fecha;
    document.getElementById('reg-concepto').value = n.concepto_id;
    document.getElementById('reg-tipo').value = n.tipo;
    document.getElementById('reg-subtipo').value = n.subtipo;
    document.getElementById('reg-subtipo-ayuda').textContent = SUBTIPO_AYUDA[n.subtipo] || '';
    document.getElementById('reg-observaciones').value = n.observaciones || '';
    document.getElementById('reg-moneda').value = n.moneda;
    document.getElementById('reg-subtotal').value = n.subtotal;
    document.getElementById('reg-descuento').value = n.descuento;
    document.getElementById('reg-impuestos').value = n.impuestos;
    document.getElementById('reg-monto-local').value = n.monto_local || '';

if (subtipoNecesitaFactura()){
      document.getElementById('seccion-factura').style.display = '';
      FACTURAS_PROVEEDOR = await llamarApi(`${API_FACTURAS}?proveedor_id=${n.proveedor_id}&solo_pendientes=true`);
      if (n.factura_pagar_id && !FACTURAS_PROVEEDOR.some(f=>f.id === n.factura_pagar_id)){
        FACTURAS_PROVEEDOR.push({id: n.factura_pagar_id, numero_factura: n.numero_factura, fecha: n.fecha, monto: n.total, saldo_pendiente: n.total, moneda: n.moneda});
      }
      facturaElegida = FACTURAS_PROVEEDOR.find(f=>f.id === n.factura_pagar_id) || null;
      pintarFacturas();
      document.getElementById('reg-moneda').disabled = true;
    } else {
      document.getElementById('seccion-factura').style.display = 'none';
      document.getElementById('reg-moneda').disabled = false;
    }

limpiarIvaCuenta();
    if (n.iva_cuenta_contable_id){
      CUENTAS_POR_CODIGO[n.iva_cuenta_codigo] = CUENTAS_POR_CODIGO[n.iva_cuenta_codigo]
        || {id: n.iva_cuenta_contable_id, codigo: n.iva_cuenta_codigo, nombre: n.iva_cuenta_nombre, acepta: true};
      marcarIvaCuenta(n.iva_cuenta_codigo);
    }
    actualizarVisibilidadMonedaExtranjera();
    recalcularTotalForm();

registroOverlay.classList.add('abierto');
  }

function cerrarRegistro(){ registroOverlay.classList.remove('abierto'); notaEnEdicion = null; }
  document.getElementById('btn-nuevo').addEventListener('click', abrirNuevo);
  document.getElementById('btn-cerrar-registro').addEventListener('click', cerrarRegistro);
  document.getElementById('btn-cancelar-registro').addEventListener('click', cerrarRegistro);

const cuerpo = {
      proveedor_id: proveedorElegido.id,
      sucursal_id: SUCURSAL_ACTUAL.id,
      fecha: document.getElementById('reg-fecha').value,
      moneda,
      concepto_id: Number(document.getElementById('reg-concepto').value),
      tipo: document.getElementById('reg-tipo').value,
      subtipo: document.getElementById('reg-subtipo').value,
      factura_pagar_id: subtipoNecesitaFactura() ? facturaElegida.id : null,
      observaciones: document.getElementById('reg-observaciones').value.trim() || null,
      subtotal,
      descuento: Number(document.getElementById('reg-descuento').value) || 0,
      impuestos,
      iva_cuenta_contable_id: ivaCuentaElegida ? CUENTAS_POR_CODIGO[ivaCuentaElegida].id : null,
      monto_local: montoLocal,
    };

// ---------------- Ver / Imprimir ----------------
  const reporteOverlay = document.getElementById('reporte-overlay');
  let notaVista = null;

['btn-pdf-nota','btn-imprimir-nota','btn-correo-nota'].forEach(id=>{
      document.getElementById(id).style.display = esImprimible ? '' : 'none';
    });
  }

if (accion === 'ver') abrirVer(registro);
    if (accion === 'imprimir') abrirVer(registro);
    if (accion === 'modificar') await abrirModificar(id);

if (accion === 'aplicar'){
      const ok = await modalConfirm(`¿Aplicar la nota #${registro.numero} de ${registro.proveedor_nombre}? Esto genera el asiento contable definitivo.`, 'Aplicar nota', 'primary', 'Aplicar');
      if (!ok) return;
      try{
        await llamarApi(`${API_NOTAS}/${id}/aplicar`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({aplicado_por: USUARIO_ACTUAL})});
        await cargar();
      } catch(e){ await modalAlert(e.message, 'No se pudo aplicar'); }
    }
    if (accion === 'anular'){
      const motivo = window.prompt('Motivo de anulación:');
      if (!motivo) return;
      try{
        await llamarApi(`${API_NOTAS}/${id}/anular`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({anulado_por: USUARIO_ACTUAL, motivo_anulacion: motivo})});
        await cargar();
      } catch(e){ await modalAlert(e.message, 'No se pudo anular'); }
    }
    if (accion === 'eliminar'){
      const ok = await modalConfirm(`¿Eliminar la nota #${registro.numero}? Esta acción no se puede deshacer.`, 'Eliminar nota', 'danger', 'Eliminar');
      if (!ok) return;
      try{
        await llamarApi(`${API_NOTAS}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){ await modalAlert(e.message, 'No se pudo eliminar'); }
    }
  });

['f-fecha-desde','f-fecha-hasta','f-proveedor','f-tipo','f-subtipo','f-concepto','f-estado'].forEach(id=>{
    document.getElementById(id).addEventListener('change', cargar);
  });
  ['f-total-desde','f-total-hasta','f-observaciones'].forEach(id=>{
    document.getElementById(id).addEventListener('input', ()=>{
      clearTimeout(window.__debounceNP);
      window.__debounceNP = setTimeout(cargar, 350);
    });
  });
  document.getElementById('btn-refrescar').addEventListener('click', async (ev)=>{
    const icono = ev.currentTarget.querySelector('svg');
    icono.classList.add('girando');
    await cargar();
    icono.classList.remove('girando');
  });

(async function iniciar(){
    try{ await cargarCatalogos(); }
    catch(e){ await modalAlert(e.message, 'No se pudieron cargar los catálogos'); }
    document.getElementById('reg-subtipo-ayuda').textContent = SUBTIPO_AYUDA['a_la_compra'];
    await cargar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Anticipos a Proveedor</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1120px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:160px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .field.chico input{width:110px;}
  .filters .spacer{flex:1; min-width:8px;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.pill{
    display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 8px;
    border-radius:99px; font-size:11.5px; font-weight:700; letter-spacing:.02em;
    border:1px solid transparent; white-space:nowrap;
  }
  .pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
  .pill-aplicado{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
  .pill-pendiente{background:var(--amber-bg); color:var(--amber-ink); border-color:var(--amber-line);}
  .pill-anulado{background:var(--grey-bg); color:var(--grey-ink); border-color:var(--line-strong);}
  .pill-incompleto{background:var(--red-bg); color:var(--red-ink); border-color:var(--red-line);}

.modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  /* #modal-overlay (aviso/confirmacion) comparte la clase .modal-overlay con otro overlay de
     esta pantalla, mismo z-index -- si #modal-overlay aparece antes en el DOM, al abrirse los
     dos a la vez (ej. un error de guardado mientras un formulario sigue abierto) el otro overlay
     pintaba encima y el aviso quedaba oculto/inaccesible detras. Bug real reportado: "el
     Entendido no se ve". Un z-index propio, mas alto, garantiza que el aviso siempre gane sin
     importar el orden del DOM. */
  #modal-overlay{ z-index:400; }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:420px; width:100%;
  }
  .modal-box.ancho{max-width:640px;}
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}

.registro-overlay{display:none; position:fixed; inset:0; background:var(--bg); z-index:250; overflow-y:auto;}
  .registro-overlay.abierto{display:block;}
  .registro-wrap{max-width:760px; margin:0 auto; padding:28px 24px 80px;}
  .registro-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
  .seccion{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:18px 20px; margin-bottom:16px; box-shadow:var(--shadow);
  }
  .seccion h3{font-size:15px; margin-bottom:14px;}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input[type="text"], .form-field input[type="number"], .form-field input[type="date"], .form-field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%; font-family:inherit;
  }
  .form-field input[disabled]{opacity:.6;}

.registro-acciones{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}

.medio-nota{
    font-size:12px; color:var(--ink-muted); background:var(--surface-2); border:1px solid var(--line);
    border-radius:7px; padding:8px 10px; margin-bottom:14px;
  }
  .caja-estado{
    display:flex; align-items:center; gap:8px; border-radius:7px; padding:9px 12px;
    font-size:13px; margin-bottom:14px; border:1px solid var(--line);
    background:var(--surface-2); color:var(--ink-muted);
  }
  .caja-estado.ok{background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600;}
  .caja-estado.falta{background:var(--red-bg); border-color:var(--red-line); color:var(--red-ink); font-weight:600;}
  .medio-fila{
    border:1px solid var(--line-strong); border-radius:8px; padding:14px; margin-bottom:12px; background:var(--surface);
  }
  .medio-fila-header{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px;}
  .medio-fila-header select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; font-weight:600;
  }
  .medio-campos{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
  .medio-campos .form-field{margin-bottom:0;}
  .medio-campos + .form-field{margin-top:12px;}

.asiento-tabla{width:100%; border-collapse:collapse; font-size:13px; margin-top:6px;}
  .asiento-tabla th{text-align:left; font-size:11px; text-transform:uppercase; color:var(--ink-muted); padding:7px 9px; border-bottom:1px solid var(--line-strong);}
  .asiento-tabla th.num, .asiento-tabla td.num{text-align:right;}
  .asiento-tabla td{padding:7px 9px; border-bottom:1px solid var(--line);}

@media print{
    @page{ margin: 1.5cm; }
    body{background:#fff; color:#000;}
    .topbar .crumbs, .filters, .row-actions, .no-print{display:none !important;}
  }
</style>

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Anticipos a Proveedor</span>
    </div>
    <div class="crumbs"><b>Proveeduría</b> / Gestión / Anticipos de proveedores</div>
  </div>

<div class="filters">
    <div class="field">
      <label for="f-fecha-desde">Fecha desde</label>
      <input type="date" id="f-fecha-desde">
    </div>
    <div class="field">
      <label for="f-fecha-hasta">Fecha hasta</label>
      <input type="date" id="f-fecha-hasta">
    </div>
    <div class="field texto">
      <label for="f-proveedor">Proveedor</label>
      <select id="f-proveedor"><option value="">Todos</option></select>
    </div>
    <div class="field">
      <label for="f-estado">Estado</label>
      <select id="f-estado">
        <option value="">Todos</option>
        <option value="Pendiente">Registrado</option>
        <option value="Aplicado">Aplicado</option>
        <option value="Anulado">Anulado</option>
      </select>
    </div>
    <div class="field chico">
      <label for="f-monto-desde">Monto desde</label>
      <input type="number" id="f-monto-desde" min="0" step="0.01">
    </div>
    <div class="field chico">
      <label for="f-monto-hasta">Monto hasta</label>
      <input type="number" id="f-monto-hasta" min="0" step="0.01">
    </div>
    <div class="field chico">
      <label for="f-saldo-desde">Saldo desde</label>
      <input type="number" id="f-saldo-desde" min="0" step="0.01">
    </div>
    <div class="field chico">
      <label for="f-saldo-hasta">Saldo hasta</label>
      <input type="number" id="f-saldo-hasta" min="0" step="0.01">
    </div>
    <div class="field texto">
      <label for="f-observaciones">Observaciones</label>
      <input type="text" id="f-observaciones" placeholder="Buscar en observaciones…">
    </div>
    <div class="spacer"></div>
    <a class="btn btn-ghost no-print" id="btn-volver" data-nav-shell="proveedores" href="proveedores_ui.html">‹ Volver a Proveeduría</a>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nuevo</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Número</th>
          <th>Asiento</th>
          <th>Estado</th>
          <th>Fecha</th>
          <th>Proveedor</th>
          <th>Orden de compra</th>
          <th>Observaciones</th>
          <th class="num">Monto</th>
          <th class="num">Saldo</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay anticipos con estos filtros</b>
      Ajusta los filtros, o límpialos para ver todos, o crea el primero con "+ Nuevo".
    </div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="asiento-overlay">
  <div class="modal-box ancho" role="dialog" aria-modal="true">
    <h3 class="modal-titulo">Asiento <span class="mono" id="asiento-numero"></span></h3>
    <p class="modal-mensaje" id="asiento-glosa"></p>
    <table class="asiento-tabla">
      <thead><tr><th>Cuenta</th><th class="num">Debe</th><th class="num">Haber</th></tr></thead>
      <tbody id="asiento-tbody"></tbody>
    </table>
    <div class="modal-acciones" style="margin-top:16px;">
      <button class="btn btn-primary" id="asiento-cerrar">Cerrar</button>
    </div>
  </div>
</div>

<div class="registro-overlay" id="registro-overlay">
  <div class="registro-wrap">
    <div class="registro-header">
      <h2>NUEVO ANTICIPO A PROVEEDOR</h2>
      <button class="btn btn-ghost" id="btn-cerrar-registro">✕ Cerrar</button>
    </div>

<div class="seccion">
      <h3>Anticipo</h3>
      <div class="form-grid">
        <div class="form-field">
          <label for="reg-fecha">Fecha</label>
          <input type="date" id="reg-fecha">
        </div>
        <div class="form-field">
          <label for="reg-monto">Monto</label>
          <input type="number" id="reg-monto" min="0.01" step="0.01">
        </div>
      </div>
      <div class="form-field">
        <label for="proveedor-input">Proveedor</label>
        <div class="proveedor-picker">
          <input id="proveedor-input" type="text" autocomplete="off" placeholder="Escriba para buscar un proveedor…">
          <div class="proveedor-sugerencias" id="proveedor-sugerencias"></div>
        </div>
        <div class="proveedor-elegido" id="proveedor-elegido-box">
          <span id="proveedor-elegido-nombre"></span>
          <button class="cambiar" id="cambiar-proveedor">Cambiar</button>
        </div>
      </div>
      <div class="form-field">
        <label for="reg-orden-compra">Orden de compra</label>
        <input type="text" id="reg-orden-compra" placeholder="ej. OC-1234 (opcional)">
      </div>
      <div class="form-field">
        <label for="reg-observaciones">Observaciones</label>
        <input type="text" id="reg-observaciones">
      </div>
    </div>

<div class="registro-acciones">
      <button class="btn btn-ghost" id="btn-cancelar-registro">Cancelar</button>
      <button class="btn btn-primary" id="btn-registrar-anticipo">Registrar anticipo</button>
    </div>
  </div>
</div>

<div class="registro-overlay" id="completar-overlay">
  <div class="registro-wrap">
    <div class="registro-header">
      <h2>COMPLETAR ANTICIPO <span class="mono" id="completar-numero"></span></h2>
      <button class="btn btn-ghost" id="btn-cerrar-completar">✕ Cerrar</button>
    </div>

<div class="seccion">
      <h3>Proveedor</h3>
      <div class="proveedor-fijo" id="completar-proveedor-nombre"></div>
      <div class="proveedor-fijo" id="completar-monto-fijo"></div>
    </div>

<div class="seccion">
      <h3>Medios de pago</h3>
      <div class="medio-nota">Transferencia y SINPE necesitan que el banco ya haya ejecutado el
        movimiento y dado el comprobante -- contablemente son lo mismo, se guardan como tipos
        distintos solo para poder filtrarlos después. Ambos solo en colones. Efectivo sale de la
        caja abierta de quien completa el anticipo.</div>

<div class="caja-estado" id="caja-estado-anticipo" style="display:none;"></div>
      <div id="medios-lista"></div>
      <button class="btn btn-ghost" id="btn-agregar-medio" type="button">+ Agregar medio de pago</button>

<div class="totales-box" id="cuadre-box-completar">
        <span class="desc">Diferencia contra el monto del anticipo</span>
        <span class="num mono" id="cuadre-valor-completar">0,00</span>
      </div>
    </div>

// ---------------- Modal propio ----------------
  const modalOverlay = document.getElementById('modal-overlay');
  const modalTitulo = document.getElementById('modal-titulo');
  const modalMensaje = document.getElementById('modal-mensaje');
  const modalCancelar = document.getElementById('modal-cancelar');
  const modalAceptar = document.getElementById('modal-aceptar');
  function mostrarModal({titulo, mensaje, tipo, botonAceptar, colorAceptar}){
    return new Promise(resolve=>{
      modalTitulo.textContent = titulo;
      modalMensaje.textContent = mensaje;
      modalAceptar.textContent = botonAceptar || 'Aceptar';
      modalAceptar.className = 'btn ' + (colorAceptar === 'danger' ? 'btn-danger' : 'btn-primary');
      modalCancelar.style.display = tipo === 'alert' ? 'none' : '';
      function cerrar(valor){
        modalOverlay.classList.remove('abierto');
        modalAceptar.onclick = null; modalCancelar.onclick = null;
        document.removeEventListener('keydown', onKey);
        resolve(valor);
      }
      function onKey(e){ if (e.key === 'Escape') cerrar(false); }
      modalAceptar.onclick = ()=> cerrar(true);
      modalCancelar.onclick = ()=> cerrar(false);
      document.addEventListener('keydown', onKey);
      modalOverlay.classList.add('abierto');
      setTimeout(()=> modalAceptar.focus(), 30);
    });
  }
  function modalAlert(mensaje, titulo='Aviso'){ return mostrarModal({titulo, mensaje, tipo:'alert', botonAceptar:'Entendido'}); }
  function modalConfirm(mensaje, titulo='Confirmar', colorAceptar='primary', botonAceptar='Confirmar'){
    return mostrarModal({titulo, mensaje, tipo:'confirm', botonAceptar, colorAceptar});
  }

// ---------------- Ver Asiento ----------------
  const asientoOverlay = document.getElementById('asiento-overlay');
  document.getElementById('asiento-cerrar').addEventListener('click', ()=> asientoOverlay.classList.remove('abierto'));
  async function abrirAsiento(asientoId){
    try{
      const a = await llamarApi(`${API_ASIENTOS}/${asientoId}`);
      document.getElementById('asiento-numero').textContent = `N.° ${a.numero}`;
      document.getElementById('asiento-glosa').textContent = a.glosa;
      document.getElementById('asiento-tbody').innerHTML = a.lineas.map(l=>`
        <tr>
          <td><span class="mono">${l.cuenta_codigo}</span> — ${l.cuenta_nombre}</td>
          <td class="num mono">${l.debito_local > 0 ? formatearMonto(l.debito_local) : ''}</td>
          <td class="num mono">${l.credito_local > 0 ? formatearMonto(l.credito_local) : ''}</td>
        </tr>
      `).join('');
      asientoOverlay.classList.add('abierto');
    } catch(e){ await modalAlert(e.message, 'No se pudo cargar el asiento'); }
  }

// ---------------- Catálogos ----------------
  let PROVEEDORES = [], BANCOS = [], CUENTAS_BANCARIAS = [];
  async function cargarCatalogos(){
    [PROVEEDORES, BANCOS, CUENTAS_BANCARIAS] = await Promise.all([
      llamarApi(`${API_PROVEEDORES}?activa=true`),
      llamarApi(`${API_BANCOS}?activa=true`),
      llamarApi(`${API_CUENTAS_BANCARIAS}`),
    ]);
    document.getElementById('f-proveedor').innerHTML = '<option value="">Todos</option>'
      + PROVEEDORES.map(p=>`<option value="${p.id}">${p.nombre}</option>`).join('');
  }

// ---------------- Medios de pago (filas dinámicas) ----------------
  // Un anticipo solo se puede financiar con Transferencia o SINPE -- ambos contablemente
  // idénticos (banco/cuenta/comprobante, mismo movimiento bancario), distintos solo para poder
  // filtrarlos después. `existente` es una fila de `medios_pago` ya guardada (al reeditar) o
  // null (fila nueva en blanco).
  function crearFilaMedio(existente){
    const fila = document.createElement('div');
    fila.className = 'medio-fila';
    fila.innerHTML = `
      <div class="medio-fila-header">
        <select class="medio-tipo-select">
          <option value="Transferencia">Transferencia</option>
          <option value="SINPE">SINPE</option>
          <option value="Efectivo">Efectivo (desde caja)</option>
        </select>
        <button type="button" class="icon-btn danger medio-quitar" title="Quitar">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 6 6 18M6 6l12 12"/></svg>
        </button>
      </div>
      <div class="medio-campos">
        <div class="form-field"><label>Banco</label><select class="medio-banco"></select></div>
        <div class="form-field"><label>Cuenta bancaria (colones)</label><select class="medio-cuenta-bancaria"></select></div>
        <div class="form-field"><label>Comprobante</label><input type="text" class="medio-comprobante" placeholder="Número de comprobante"></div>
      </div>
      <div class="form-field"><label>Monto</label><input type="number" class="medio-monto" min="0.01" step="0.01"></div>
    `;

const tipoSelect = fila.querySelector('.medio-tipo-select');
    const camposBancarios = fila.querySelector('.medio-campos');
    const bancoSel = fila.querySelector('.medio-banco');
    const cuentaSel = fila.querySelector('.medio-cuenta-bancaria');
    const montoInput = fila.querySelector('.medio-monto');

bancoSel.innerHTML = BANCOS.map(b=>`<option value="${b.id}">${b.nombre}</option>`).join('');
    function pintarCuentasFila(){
      const bancoId = Number(bancoSel.value);
      const filtradas = CUENTAS_BANCARIAS.filter(cb=>cb.banco_id === bancoId && cb.moneda === 'CRC');
      cuentaSel.innerHTML = filtradas.map(cb=>`<option value="${cb.id}">${cb.numero}</option>`).join('');
    }
    bancoSel.addEventListener('change', pintarCuentasFila);
    pintarCuentasFila();

if (existente){
      tipoSelect.value = existente.tipo_medio_pago;
      bancoSel.value = existente.banco_id;
      pintarCuentasFila();
      cuentaSel.value = existente.cuenta_bancaria_id;
      fila.querySelector('.medio-comprobante').value = existente.comprobante || '';
      montoInput.value = existente.monto;
    }
    actualizarVisibilidad();
    return fila;
  }
  document.getElementById('btn-agregar-medio').addEventListener('click', ()=>{
    document.getElementById('medios-lista').appendChild(crearFilaMedio(null));
    recalcularCuadreCompletar();
    refrescarCajaEstadoAnticipo();
  });

// Gate "requiere caja abierta" -- condicional, igual que Pagos (docs/diseno-cxp.md): solo
  // aplica cuando alguna fila de medios de pago quedó en Efectivo.
  let CAJA_ABIERTA_ANTICIPO_ID = null;
  async function refrescarCajaEstadoAnticipo(){
    const banner = document.getElementById('caja-estado-anticipo');
    const hayEfectivo = Array.from(document.querySelectorAll('#medios-lista .medio-tipo-select'))
      .some(sel => sel.value === 'Efectivo');
    if (!hayEfectivo){
      banner.style.display = 'none';
      CAJA_ABIERTA_ANTICIPO_ID = null;
      return;
    }
    banner.style.display = '';
    banner.className = 'caja-estado';
    banner.textContent = 'Verificando caja abierta…';
    CAJA_ABIERTA_ANTICIPO_ID = null;
    if (!anticipoEnEdicion) return;
    try{
      const cajas = await llamarApi(`/ventas/cajas?sucursal_id=${anticipoEnEdicion.sucursal_id}&estado=Abierta`);
      const propia = cajas.find(c => c.usuario_apertura === USUARIO_ACTUAL);
      if (propia){
        CAJA_ABIERTA_ANTICIPO_ID = propia.id;
        banner.className = 'caja-estado ok';
        banner.textContent = `Caja abierta: Caja ${propia.numero} — ${propia.terminal}`;
      } else {
        banner.className = 'caja-estado falta';
        banner.textContent = `${USUARIO_ACTUAL} no tiene una caja abierta en esta sucursal -- abra una caja antes de pagar en Efectivo.`;
      }
    } catch(e){
      banner.className = 'caja-estado falta';
      banner.textContent = 'No se pudo verificar el estado de caja.';
    }
  }
  function totalMediosPago(){
    return Array.from(document.querySelectorAll('#medios-lista .medio-monto'))
      .reduce((s, inp) => s + (Number(inp.value) || 0), 0);
  }
  function recalcularCuadreCompletar(){
    const dif = Math.round((totalMediosPago() - Number(anticipoEnEdicion.monto)) * 100) / 100;
    const box = document.getElementById('cuadre-box-completar');
    document.getElementById('cuadre-valor-completar').textContent = formatearMonto(dif);
    box.classList.toggle('cuadrado', Math.abs(dif) < 0.01);
    box.classList.toggle('descuadrado', Math.abs(dif) >= 0.01);
  }

// ---------------- Buscador de proveedor ----------------
  let proveedorElegido = null;
  const proveedorInput = document.getElementById('proveedor-input');
  const proveedorCaja = document.getElementById('proveedor-sugerencias');
  const proveedorElegidoBox = document.getElementById('proveedor-elegido-box');
  function posicionarSugerencias(){
    const r = proveedorInput.getBoundingClientRect();
    proveedorCaja.style.top = (r.bottom + 4) + 'px';
    proveedorCaja.style.left = r.left + 'px';
    proveedorCaja.style.width = Math.max(r.width, 280) + 'px';
  }
  function cerrarSugerencias(){ proveedorCaja.classList.remove('abierta'); proveedorCaja.innerHTML = ''; }
  function buscarProveedor(){
    const q = proveedorInput.value.trim();
    if (q.length < 1){ cerrarSugerencias(); return; }
    const resultados = PROVEEDORES.filter(p=>p.nombre.toUpperCase().includes(q.toUpperCase()));
    posicionarSugerencias();
    if (resultados.length === 0){
      proveedorCaja.innerHTML = `<div class="sug-vacio">Ningún proveedor contiene "${q}"</div>`;
      proveedorCaja.classList.add('abierta');
      return;
    }
    proveedorCaja.innerHTML = resultados.slice(0,20).map(p=>`<div class="sug-item" data-id="${p.id}">${p.nombre}</div>`).join('');
    proveedorCaja.classList.add('abierta');
    proveedorCaja.querySelectorAll('.sug-item').forEach(item=>{
      item.addEventListener('mousedown', e=>{ e.preventDefault(); elegirProveedor(Number(item.dataset.id)); cerrarSugerencias(); });
    });
  }
  function elegirProveedor(id){
    proveedorElegido = PROVEEDORES.find(p=>p.id === id);
    document.getElementById('proveedor-elegido-nombre').textContent = proveedorElegido.nombre;
    proveedorElegidoBox.classList.add('visible');
    proveedorInput.style.display = 'none';
  }
  function limpiarProveedor(){
    proveedorElegido = null;
    proveedorElegidoBox.classList.remove('visible');
    proveedorInput.style.display = '';
    proveedorInput.value = '';
  }
  proveedorInput.addEventListener('input', buscarProveedor);
  // Si el usuario escribe pero nunca hace clic en una sugerencia real, el campo queda con texto
  // "huérfano" que se ve lleno aunque proveedorElegido sigue null -- el aviso de "obligatorio" al
  // guardar contradice lo que el usuario ve en pantalla. Al salir sin elegir de verdad, se limpia
  // solo para que lo vacío se vea vacío (bug real reportado en Conceptos de Nota a Cliente).
  proveedorInput.addEventListener('blur', ()=> setTimeout(()=>{ cerrarSugerencias(); if (!proveedorElegido) proveedorInput.value = ''; }, 150));
  document.getElementById('cambiar-proveedor').addEventListener('click', ()=>{ limpiarProveedor(); proveedorInput.focus(); });

// ---------------- Etapa 1: Registrar ----------------
  const registroOverlay = document.getElementById('registro-overlay');
  function abrirRegistro(){
    limpiarProveedor();
    document.getElementById('reg-fecha').value = new Date().toLocaleDateString('sv-SE');
    document.getElementById('reg-monto').value = '';
    document.getElementById('reg-orden-compra').value = '';
    document.getElementById('reg-observaciones').value = '';
    registroOverlay.classList.add('abierto');
    setTimeout(()=> proveedorInput.focus(), 30);
  }
  function cerrarRegistro(){ registroOverlay.classList.remove('abierto'); }
  document.getElementById('btn-nuevo').addEventListener('click', abrirRegistro);
  document.getElementById('btn-cerrar-registro').addEventListener('click', cerrarRegistro);
  document.getElementById('btn-cancelar-registro').addEventListener('click', cerrarRegistro);

// ---------------- Etapa 2: Completar ----------------
  const completarOverlay = document.getElementById('completar-overlay');
  let anticipoEnEdicion = null;

async function abrirCompletar(id){
    const detalle = await llamarApi(`${API_ANTICIPOS}/${id}`);
    anticipoEnEdicion = detalle;
    document.getElementById('completar-numero').textContent = `#${detalle.numero}`;
    document.getElementById('completar-proveedor-nombre').textContent = detalle.proveedor_nombre;
    document.getElementById('completar-monto-fijo').textContent = `Monto: ${formatearMonto(detalle.monto)} CRC`;

completarOverlay.classList.add('abierto');
    setTimeout(()=> listaMedios.querySelector('.medio-comprobante')?.focus(), 30);
  }
  function cerrarCompletar(){ completarOverlay.classList.remove('abierto'); anticipoEnEdicion = null; }
  document.getElementById('btn-cerrar-completar').addEventListener('click', cerrarCompletar);
  document.getElementById('btn-cancelar-completar').addEventListener('click', cerrarCompletar);

document.getElementById('btn-guardar-completar').addEventListener('click', async ()=>{
    const filas = Array.from(document.querySelectorAll('#medios-lista .medio-fila'));
    if (filas.length === 0){ await modalAlert('Debe indicar al menos un medio de pago.'); return; }

if (tipo === 'Efectivo'){
        medios_pago.push({tipo_medio_pago: 'Efectivo', monto});
        continue;
      }
      const bancoId = Number(fila.querySelector('.medio-banco').value);
      const cuentaBancariaId = Number(fila.querySelector('.medio-cuenta-bancaria').value);
      const comprobante = fila.querySelector('.medio-comprobante').value.trim();
      if (!bancoId || !cuentaBancariaId){ await modalAlert(`Debe elegir banco y cuenta bancaria en cada segmento de ${tipo}.`); return; }
      if (!comprobante){ await modalAlert(`El comprobante es obligatorio en cada segmento de ${tipo}.`); return; }
      medios_pago.push({tipo_medio_pago: tipo, monto, banco_id: bancoId, cuenta_bancaria_id: cuentaBancariaId, comprobante});
    }

if (medios_pago.some(m => m.tipo_medio_pago === 'Efectivo') && !CAJA_ABIERTA_ANTICIPO_ID){
      await modalAlert(`Se requiere que exista una caja abierta para pagar en Efectivo -- ${USUARIO_ACTUAL} no tiene ninguna caja Abierta en esta sucursal.`, 'Falta caja abierta');
      return;
    }

tbody.addEventListener('click', async (ev)=>{
    const btn = ev.target.closest('button[data-accion]');
    if (!btn) return;
    const accion = btn.dataset.accion;

if (accion === 'asiento'){ await abrirAsiento(Number(btn.dataset.asiento)); return; }

const id = Number(btn.dataset.id);
    const registro = REGISTROS.find(r=>r.id === id);

if (accion === 'completar') await abrirCompletar(id);
    if (accion === 'imprimir') window.print();

if (accion === 'aplicar'){
      const ok = await modalConfirm(`¿Aplicar el anticipo #${registro.numero} a ${registro.proveedor_nombre}? Esto genera el asiento contable definitivo.`, 'Aplicar anticipo', 'primary', 'Aplicar');
      if (!ok) return;
      try{
        await llamarApi(`${API_ANTICIPOS}/${id}/aplicar`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({aplicado_por: USUARIO_ACTUAL})});
        await cargar();
      } catch(e){
        if (e.message.includes('coincidencia real')){
          const confirmar = await modalConfirm(e.message, 'Comprobante repetido', 'primary', 'Sí, es una coincidencia real');
          if (confirmar){
            try{
              await llamarApi(`${API_ANTICIPOS}/${id}/aplicar`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({aplicado_por: USUARIO_ACTUAL, confirma_repeticion:true})});
              await cargar();
            } catch(e2){ await modalAlert(e2.message, 'No se pudo aplicar'); }
          }
        } else {
          await modalAlert(e.message, 'No se pudo aplicar');
        }
      }
    }
    if (accion === 'anular'){
      const motivo = window.prompt('Motivo de anulación:');
      if (!motivo) return;
      try{
        await llamarApi(`${API_ANTICIPOS}/${id}/anular`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({anulado_por: USUARIO_ACTUAL, motivo_anulacion: motivo})});
        await cargar();
      } catch(e){ await modalAlert(e.message, 'No se pudo anular'); }
    }
    if (accion === 'eliminar'){
      const ok = await modalConfirm(`¿Eliminar el anticipo #${registro.numero}? Esta acción no se puede deshacer.`, 'Eliminar anticipo', 'danger', 'Eliminar');
      if (!ok) return;
      try{
        await llamarApi(`${API_ANTICIPOS}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){ await modalAlert(e.message, 'No se pudo eliminar'); }
    }
  });

['f-fecha-desde','f-fecha-hasta','f-proveedor','f-estado'].forEach(id=>{
    document.getElementById(id).addEventListener('change', cargar);
  });
  ['f-monto-desde','f-monto-hasta','f-saldo-desde','f-saldo-hasta','f-observaciones'].forEach(id=>{
    document.getElementById(id).addEventListener('input', ()=>{
      clearTimeout(window.__debounceAP);
      window.__debounceAP = setTimeout(cargar, 350);
    });
  });
  document.getElementById('btn-refrescar').addEventListener('click', async (ev)=>{
    const icono = ev.currentTarget.querySelector('svg');
    icono.classList.add('girando');
    await cargar();
    icono.classList.remove('girando');
  });

// Prefill desde "Crear Anticipo" en Órdenes de Compra -- ver ordenes_compra_ui.html,
  // irAAnticipoConPrefill(). El monto NO se prellena (cuánto adelantar es una decisión de
  // negocio -- ej. 50% -- que el usuario debe escribir).
  //
  // Listener de 'storage', no solo chequeo al cargar: el shell reutiliza el mismo iframe una
  // vez cargado (cargarSiHaceFalta) -- si Anticipos a Proveedor ya se había abierto antes, su
  // script de arranque no vuelve a correr al regresar. Mismo fix aplicado en compras_ui.html.
  function aplicarPrefillDesdeOrden(){
    const crudo = sessionStorage.getItem('fenix_prefill_anticipo');
    if (!crudo) return;
    sessionStorage.removeItem('fenix_prefill_anticipo');
    let datos;
    try{ datos = JSON.parse(crudo); }catch(e){ return; }
    abrirRegistro();
    const proveedor = PROVEEDORES.find(p => p.id === datos.proveedor_id);
    if (proveedor) elegirProveedor(proveedor.id);
    document.getElementById('reg-orden-compra').value = datos.orden_compra || '';
  }
  window.addEventListener('storage', (ev)=>{
    if (ev.key === 'fenix_prefill_anticipo' && ev.newValue) aplicarPrefillDesdeOrden();
  });

(async function iniciar(){
    try{ await cargarCatalogos(); }
    catch(e){ await modalAlert(e.message, 'No se pudieron cargar los catálogos'); }
    await cargar();
    aplicarPrefillDesdeOrden();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Conceptos de Nota a Cliente</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1120px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:180px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,16,9,.55);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  /* #modal-overlay (aviso/confirmación) y #form-overlay comparten la clase .modal-overlay con el
     mismo z-index -- como #modal-overlay aparece primero en el DOM, al abrirse los dos a la vez
     (ej. un error de guardado mientras el formulario sigue abierto) #form-overlay pintaba encima
     y el aviso quedaba oculto/inaccesible detrás. Bug real reportado: "el Entendido no se ve".
     Un z-index propio, más alto, garantiza que el aviso siempre gane sin importar el orden del DOM. */
  #modal-overlay{ z-index:400; }
  .modal-overlay.abierto{display:flex;}
  .modal-box{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:24px 26px; max-width:420px; width:100%;
  }
  .modal-titulo{font-size:17px; margin-bottom:10px;}
  .modal-mensaje{font-size:13.5px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px; white-space:pre-line;}
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}

.modal-box.form-box{max-width:460px;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input[type="text"], .form-field input[type="number"], .form-field select, .form-field textarea{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%; font-family:inherit;
  }
  .form-field textarea{resize:vertical; min-height:56px;}
  .form-field.checkbox label{
    display:flex; align-items:center; gap:8px; text-transform:none;
    letter-spacing:normal; font-size:13.5px; color:var(--ink);
  }
  .form-field input[disabled], .form-field select[disabled], .form-field textarea[disabled]{opacity:.6; cursor:not-allowed;}
  .form-audit{
    font-size:12px; color:var(--ink-muted); border-top:1px solid var(--line);
    margin-top:4px; padding-top:12px; line-height:1.7;
  }

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Conceptos de Nota a Cliente</span>
    </div>
    <div class="crumbs"><b>Ventas</b> / Configuración / Conceptos de notas a cliente</div>
  </div>

<div class="filters">
    <div class="field texto">
      <label for="f-texto">Nombre</label>
      <input type="text" id="f-texto" placeholder="ej. desc. sobre ventas" autocomplete="off">
    </div>
    <div class="field texto">
      <label for="f-descripcion">Descripción</label>
      <input type="text" id="f-descripcion" placeholder="ej. devolución" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-activo">Estado</label>
      <select id="f-activo">
        <option value="">Todos</option>
        <option value="true">Activos</option>
        <option value="false">Inactivos</option>
      </select>
    </div>
    <div class="spacer"></div>
    <a class="btn btn-ghost no-print" id="btn-volver" data-nav-shell="notascliente" href="notas_cliente_ui.html">‹ Volver a Notas a Cliente</a>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nuevo</button>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

let formModo = 'nuevo';
  let formIdEditando = null;

function abrirFormulario(modo, registro){
    formModo = modo;
    formIdEditando = registro ? registro.id : null;

if (modo === 'ver'){
      formTitulo.textContent = 'Ver — Concepto de Nota a Cliente';
      ponerSoloLectura(true);
      formGuardar.style.display = 'none';
      formCancelar.textContent = 'Cerrar';
    } else {
      formTitulo.textContent = modo === 'nuevo' ? 'Nuevo — Concepto de Nota a Cliente' : 'Modificar — Concepto de Nota a Cliente';
      ponerSoloLectura(false);
      formGuardar.style.display = '';
      formCancelar.textContent = 'Cancelar';
    }

function pillActivo(activo){
    return activo
      ? `<span class="pill pill-aplicado">Activo</span>`
      : `<span class="pill pill-anulado">Inactivo</span>`;
  }

async function cargar(){
    tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    emptyState.style.display = 'none';
    try{
      REGISTROS = await llamarApi(`${API_CONCEPTOS}?${construirQuery()}`);
      if (REGISTROS.length === 0){
        tbody.innerHTML = '';
        emptyState.style.display = 'block';
      } else {
        tbody.innerHTML = REGISTROS.map(filaHtml).join('');
      }
      footNote.textContent = `${REGISTROS.length} concepto${REGISTROS.length === 1 ? '' : 's'}`;
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="6" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      footNote.textContent = '';
    }
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar el concepto "${registro.nombre}"? Si hay notas a cliente que lo usan, no se podrá eliminar y se sugerirá desactivarlo en su lugar.`,
        'Eliminar concepto', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${API_CONCEPTOS}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Actividades Económicas de la Empresa</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1000px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:center;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .filters .nota{flex:1; font-size:12.5px; color:var(--ink-muted); line-height:1.5;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.modal-box.form-box{max-width:440px;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input[type="text"], .form-field input[type="number"]{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%; font-family:inherit;
  }
  .form-field.checkbox label{
    display:flex; align-items:center; gap:8px; text-transform:none;
    letter-spacing:normal; font-size:13.5px; color:var(--ink);
  }
  .form-field input[disabled]{opacity:.6; cursor:not-allowed;}
  .form-audit{
    font-size:12px; color:var(--ink-muted); border-top:1px solid var(--line);
    margin-top:4px; padding-top:12px; line-height:1.7;
  }

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Actividades Económicas de la Empresa</span>
    </div>
    <div class="crumbs"><b>Ventas</b> / Configuración / Actividades económicas de la empresa</div>
  </div>

<div class="filters">
    <div class="nota">
      Cada fila es una actividad económica real, tal como Hacienda la tiene registrada para esta
      empresa (consultada en ATV) -- no un catálogo nacional. Al facturar, se elige una de estas
      actividades como <span class="mono">CodigoActividadEmisor</span> del comprobante.
    </div>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nueva actividad</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Código</th>
          <th>Descripción</th>
          <th>Orden</th>
          <th>Estado</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>Sin actividades económicas registradas</b>
      Agregá la primera con "+ Nueva actividad" -- el código y la descripción exactos como los
      muestra Hacienda en ATV.
    </div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div class="form-field">
      <label for="form-codigo">Código (tal como lo muestra Hacienda)</label>
      <input type="text" id="form-codigo" placeholder="ej. 9511.0">
    </div>
    <div class="form-field">
      <label for="form-descripcion">Descripción</label>
      <input type="text" id="form-descripcion" placeholder="ej. Reparación de computadoras">
    </div>
    <div class="form-field">
      <label for="form-orden">Orden</label>
      <input type="number" id="form-orden" min="0" step="1">
    </div>
    <div class="form-field checkbox">
      <label><input type="checkbox" id="form-activa" checked> Activa</label>
    </div>
    <div class="form-audit" id="form-audit" style="display:none;"></div>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="form-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="form-guardar">Guardar</button>
    </div>
  </div>
</div>

function ponerSoloLectura(soloLectura){
    formCodigo.disabled = soloLectura;
    formDescripcion.disabled = soloLectura;
    formOrden.disabled = soloLectura;
    formActiva.disabled = soloLectura;
  }

let formModo = 'nuevo';
  let formIdEditando = null;

function abrirFormulario(modo, registro){
    formModo = modo;
    formIdEditando = registro ? registro.id : null;

formCodigo.value = registro ? registro.codigo : '';
    formDescripcion.value = registro ? registro.descripcion : '';
    formOrden.value = registro && registro.orden !== null && registro.orden !== undefined ? registro.orden : '';
    formActiva.checked = registro ? registro.activa : true;

if (modo === 'ver'){
      formTitulo.textContent = 'Ver — Actividad Económica';
      ponerSoloLectura(true);
      formGuardar.style.display = 'none';
      formCancelar.textContent = 'Cerrar';
    } else {
      formTitulo.textContent = modo === 'nuevo' ? 'Nueva Actividad Económica' : 'Modificar Actividad Económica';
      ponerSoloLectura(false);
      formGuardar.style.display = '';
      formCancelar.textContent = 'Cancelar';
    }

formOverlay.classList.add('abierto');
    setTimeout(()=> { if (modo !== 'ver') formCodigo.focus(); }, 30);
  }
  function cerrarFormulario(){ formOverlay.classList.remove('abierto'); }
  formCancelar.onclick = cerrarFormulario;
  document.addEventListener('keydown', e=>{ if (e.key === 'Escape' && formOverlay.classList.contains('abierto')) cerrarFormulario(); });

formGuardar.onclick = async ()=>{
    const codigo = formCodigo.value.trim();
    const descripcion = formDescripcion.value.trim();
    if (!codigo){ await modalAlert('El código es obligatorio.'); formCodigo.focus(); return; }
    if (!descripcion){ await modalAlert('La descripción es obligatoria.'); formDescripcion.focus(); return; }

function pillActiva(activa){
    return activa
      ? `<span class="pill pill-aplicado">Activa</span>`
      : `<span class="pill pill-anulado">Inactiva</span>`;
  }

async function cargar(){
    tbody.innerHTML = `<tr><td colspan="5" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    emptyState.style.display = 'none';
    try{
      REGISTROS = await llamarApi(API_ACTIVIDADES);
      if (REGISTROS.length === 0){
        tbody.innerHTML = '';
        emptyState.style.display = 'block';
      } else {
        tbody.innerHTML = REGISTROS.map(filaHtml).join('');
      }
      footNote.textContent = `${REGISTROS.length} actividad${REGISTROS.length === 1 ? '' : 'es'} económica${REGISTROS.length === 1 ? '' : 's'}`;
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="5" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      footNote.textContent = '';
    }
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar la actividad económica "${registro.codigo} — ${registro.descripcion}"?`,
        'Eliminar actividad', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${API_ACTIVIDADES}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

(async function iniciar(){
    await cargar();
  })();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Vendedores</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{
    font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace;
    font-variant-numeric:tabular-nums;
  }
  h1,h2,h3{
    font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;
    font-weight:600; text-wrap:balance; margin:0;
  }
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1000px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:200px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}

.row-actions{display:flex; gap:4px; justify-content:flex-end;}
  .icon-btn{
    border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
    width:30px; height:30px; border-radius:7px; display:inline-flex; align-items:center;
    justify-content:center; cursor:pointer; transition:transform .08s ease, filter .08s ease;
  }
  .icon-btn:hover{color:var(--ink); border-color:var(--ink-muted);}
  .icon-btn:active{transform:scale(0.90);}
  .icon-btn.danger:hover{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .icon-btn[disabled]{opacity:.3; cursor:not-allowed; transform:none;}
  .icon-btn svg{width:15px; height:15px;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}

.foot-note{font-size:12px; color:var(--ink-muted); margin-top:12px;}

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Vendedores</span>
    </div>
    <div class="crumbs"><b>Configuración</b> / Vendedores</div>
  </div>

<div class="filters">
    <div class="field texto">
      <label for="f-texto">Buscar por nombre</label>
      <input type="text" id="f-texto" placeholder="ej. Juan Pérez" autocomplete="off">
    </div>
    <div class="field">
      <label for="f-activa">Estado</label>
      <select id="f-activa">
        <option value="">Todos</option>
        <option value="true">Activos</option>
        <option value="false">Inactivos</option>
      </select>
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <a class="btn btn-ghost no-print" id="btn-volver" href="clientes_ui.html" data-nav-shell="clientes">‹ Volver</a>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nuevo</button>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>
<script>
(function(){
  const CONFIG = {
    titulo: "Vendedores",
    apiPath: "/vendedores",
    camposExtra: [
      {"campo": "tipo", "etiqueta": "Tipo", "tipo": "seleccion", "opciones": ["Todos", "Principal"]},
      {"campo": "login", "etiqueta": "Login", "tipo": "texto"},
      {"campo": "perfil", "etiqueta": "Perfil", "tipo": "texto"},
      {"campo": "observaciones", "etiqueta": "Observaciones", "tipo": "texto"},
    ],
  };
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const USUARIO_ACTUAL = 'contador'; // no hay sesión/login todavía -- placeholder de trazabilidad

function cerrar(valor){
        modalOverlay.classList.remove('abierto');
        modalAceptar.onclick = null;
        modalCancelar.onclick = null;
        document.removeEventListener('keydown', onKey);
        resolve(valor);
      }
      function onKey(e){ if (e.key === 'Escape') cerrar(false); }
      modalAceptar.onclick = ()=> cerrar(true);
      modalCancelar.onclick = ()=> cerrar(false);
      document.addEventListener('keydown', onKey);

function idCampoExtra(campo){ return `ex-${campo.campo}`; }

let formModo = 'nuevo'; // 'nuevo' | 'modificar' | 'ver'
  let formIdEditando = null;

formGuardar.onclick = async ()=>{
    const nombre = formNombre.value.trim();
    if (!nombre){ await modalAlert('El nombre es obligatorio.'); formNombre.focus(); return; }

function pillActiva(activa){
    return activa
      ? `<span class="pill pill-aplicado">Activa</span>`
      : `<span class="pill pill-anulado">Inactiva</span>`;
  }

if (accion === 'ver') abrirFormulario('ver', registro);
    if (accion === 'modificar') abrirFormulario('modificar', registro);
    if (accion === 'eliminar'){
      const ok = await modalConfirm(
        `¿Eliminar "${registro.nombre}"? Si está en uso por otros registros, no se podrá eliminar y se sugerirá desactivarlo en su lugar.`,
        'Eliminar registro', 'danger', 'Eliminar'
      );
      if (!ok) return;
      try{
        await llamarApi(`${CONFIG.apiPath}/${id}`, {method:'DELETE'});
        await cargar();
      } catch(e){
        await modalAlert(e.message, 'No se pudo eliminar');
      }
    }
  });

document.getElementById('btn-nuevo').addEventListener('click', ()=> abrirFormulario('nuevo', null));

document.getElementById('f-texto').focus();
  cargar();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Proformas</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1200px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:180px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:150px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.print-header{display:none;}

.table-wrap{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow);
  }
  table{border-collapse:collapse; width:100%; min-width:900px;}
  thead th{
    text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-muted); padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
  }
  th.num, td.num{text-align:right;}
  tbody td{padding:11px 14px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--surface-2);}
  .muted-cell{color:var(--ink-muted);}
  .icon-btn{
    background:none; border:1px solid transparent; border-radius:6px; padding:5px;
    cursor:pointer; color:var(--ink-muted); display:inline-flex;
  }
  .icon-btn:hover{background:var(--surface-2); color:var(--ink);}
  .icon-btn.danger:hover{color:var(--red-ink); background:var(--red-bg);}
  .acciones-cell{display:flex; gap:4px; align-items:center;}

.pill{display:inline-flex; align-items:center; gap:5px; border-radius:20px; padding:3px 10px; font-size:12px; font-weight:600; border:1px solid; cursor:pointer;}
  .pill::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor;}
  .pill-registrado{background:var(--amber-bg); color:var(--amber-ink); border-color:var(--amber-line);}
  .pill-aplicado{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
  .pill-anulado{background:var(--grey-bg); color:var(--grey-ink); border-color:var(--line-strong);}
  .pill-si{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
  .pill-no{background:var(--grey-bg); color:var(--grey-ink); border-color:var(--line-strong);}

.empty-state{padding:48px 24px; text-align:center; color:var(--ink-muted);}

.overlay{
    display:none; position:fixed; inset:0; background:rgba(10,14,10,.5);
    align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; z-index:50;
  }
  .overlay.abierto{display:flex;}
  .panel{
    background:var(--surface); border-radius:12px; box-shadow:var(--shadow);
    width:100%; max-width:1320px; padding:22px 24px 24px;
    max-height:calc(100vh - 80px); display:flex; flex-direction:column; overflow-y:auto;
  }
  /* Sticky a propósito -- con muchas líneas (ej. artículo #10 en adelante) el formulario crece
     y el usuario tenía que scrollear hasta arriba para encontrar Registrar/Cancelar, perdiendo
     de vista el botón que necesita justo cuando ya terminó de armar la proforma. El header vive
     dentro de #registro-overlay .panel (que es quien scrollea, overflow-y:auto) -- top:-22px +
     margin negativo cancelan el padding-top/lados del panel para que el header se pegue al
     borde real de arriba, con su propio padding para no perder la alineación visual. */
  .panel-header{
    display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
    flex-shrink:0; position:sticky; top:-22px; margin:-22px -24px 16px; padding:22px 24px 14px;
    background:var(--surface); z-index:10; border-bottom:1px solid var(--line);
  }
  .panel-header h2{font-size:18px;}
  .panel-header-acciones{display:flex; gap:8px;}
  .seccion{margin-bottom:20px; flex-shrink:0;}
  .seccion h3{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin-bottom:10px;}
  .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
  .grid-4{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:12px;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:10px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input, .form-field select, .form-field textarea{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%;
  }
  .form-field input[disabled], .form-field select[disabled]{opacity:.6; cursor:not-allowed;}

.buscador-wrap{position:relative;}
  .sugerencias{
    position:fixed; background:var(--surface); border:1px solid var(--line); border-radius:8px;
    box-shadow:var(--shadow); max-height:260px; overflow-y:auto; z-index:120; display:none;
  }
  .sugerencias.abierta{display:block;}
  .sug-item{padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--line);}
  .sug-item:last-child{border-bottom:none;}
  .sug-item:hover{background:var(--accent-soft);}
  .sug-nombre{display:block; font-size:13px;}
  .sug-meta{display:block; font-size:11.5px; color:var(--ink-muted); margin-top:2px;}
  .sug-cargando, .sug-vacio{padding:10px 12px; font-size:12.5px; color:var(--ink-muted);}
  .elegido-box{
    display:none; align-items:center; justify-content:space-between; gap:10px;
    background:var(--accent-soft); border:1px solid var(--accent); border-radius:7px; padding:8px 10px; font-size:13.5px;
  }
  .elegido-box.visible{display:flex;}
  .elegido-box a{color:var(--accent); font-weight:600; cursor:pointer; text-decoration:none;}

.agregar-item-box{
    display:flex; gap:12px; align-items:end; flex-wrap:wrap;
    background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:14px;
  }
  .agregar-item-box .campo-item{flex:2; min-width:220px;}
  .agregar-item-box .campo-obs{flex:1; min-width:160px;}
  .agregar-item-box .campo-cant{width:110px;}

.lineas-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:8px; margin-bottom:10px;}
  #tabla-lineas{min-width:1000px;}
  #tabla-lineas thead th{background:var(--surface-2);}
  #tabla-lineas td{padding:8px 10px;}
  #tabla-lineas input, #tabla-lineas select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:6px;
    padding:5px 7px; font-size:13px; width:100%; min-width:70px; color:var(--ink);
  }
  #tabla-lineas .celda-calculada{font-weight:600; white-space:nowrap;}
  .empty-lineas{padding:20px; text-align:center; color:var(--ink-muted); font-size:13px;}

.resumen-fila{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-top:14px;}
  .totales-box{
    display:flex; justify-content:flex-end; gap:24px;
    background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
    padding:12px 16px; font-size:13.5px;
  }
  .totales-box .item{display:flex; flex-direction:column; align-items:flex-end; gap:2px;}
  .totales-box .desc{color:var(--ink-muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;}
  .totales-box .num{font-weight:700; font-size:15px;}
  .totales-box .item.total .num{color:var(--accent); font-size:17px;}

.utilidad-resumen{
    background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
    padding:12px 16px; font-size:13.5px; display:none; align-self:stretch;
  }
  .utilidad-resumen.visible{display:block;}
  .utilidad-resumen .desc{color:var(--ink-muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;}
  .utilidad-resumen .num{font-weight:700; font-size:15px;}
  .utilidad-resumen .num.positiva{color:#3FA34D;}
  .utilidad-resumen .num.negativa{color:#D9534F;}
  .utilidad-resumen .aviso-parcial{margin-top:4px; font-size:11px; color:var(--amber-ink);}

.registro-acciones{display:flex; justify-content:flex-end; gap:10px; margin-top:18px; flex-shrink:0;}

.modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,14,10,.5);
    align-items:center; justify-content:center; z-index:300; padding:20px;
  }
  #modal-overlay{ z-index:400; }
  .modal-overlay.abierto{display:flex;}
  .modal-box{background:var(--surface); border-radius:12px; box-shadow:var(--shadow); max-width:420px; width:100%; padding:20px 22px;}
  .modal-box.ancho{max-width:900px;}
  .modal-box h3{font-size:16px; margin-bottom:10px;}
  .modal-box p{font-size:13.5px; color:var(--ink-muted); margin-bottom:18px;}
  .modal-acciones{display:flex; justify-content:flex-end; gap:10px;}
  .modal-close{position:absolute; top:16px; right:16px;}
  .modal-box-wrap{position:relative;}

.estado-info div{margin-bottom:6px; font-size:13.5px;}
  .historial-lista{border-top:1px solid var(--line); margin-top:12px; padding-top:12px;}
  .historial-item{display:flex; justify-content:space-between; gap:10px; padding:6px 0; font-size:13px; border-bottom:1px solid var(--line);}
  .historial-item:last-child{border-bottom:none;}
  .historial-obs{color:var(--ink-muted); font-size:12px; margin-top:2px;}

.busq-filtros{display:flex; gap:14px; align-items:end; margin-bottom:14px; flex-wrap:wrap;}
  .busq-table-wrap{border:1px solid var(--line); border-radius:8px; overflow:auto; max-height:360px;}
  #tabla-busqueda thead th{position:sticky; top:0; background:var(--surface-2); z-index:1;}
  #tabla-busqueda tbody tr{cursor:pointer;}
  #tabla-busqueda tbody tr.fila-elegida{background:var(--accent-soft);}
  .busq-paginacion{display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:12.5px; color:var(--ink-muted); gap:10px; flex-wrap:wrap;}
  .busq-agregar-box{display:flex; gap:12px; align-items:end; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); flex-wrap:wrap;}

@media print{
    @page{ margin: 1.5cm; }
    .topbar .crumbs, .filters, .acciones-cell, .no-print{display:none !important;}
    body{background:#fff; color:#000;}
    .app{max-width:none; padding:0;}
    .table-wrap{box-shadow:none; border:1px solid #000;}
    thead th{background:none !important; border-color:#000 !important;}
    .pill{background:none !important; border:1px solid #000 !important; color:#000 !important;}
  }
  .fenix-toast{
    position:fixed; bottom:24px; right:24px; z-index:500;
    background:var(--accent); color:var(--accent-ink); padding:11px 18px; border-radius:8px;
    box-shadow:var(--shadow); font-size:13.5px; font-weight:600;
    display:flex; align-items:center; gap:8px;
    opacity:0; transform:translateY(10px); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .fenix-toast.visible{ opacity:1; transform:translateY(0); }
</style>

<div class="app">
  <div class="topbar">
    <div class="brand">
      <h1>Fénix</h1>
      <span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Proformas</span>
    </div>
    <div class="crumbs">Ventas / <b>Proformas</b></div>
  </div>

<div class="filters">
    <div class="field">
      <label>Número</label>
      <input type="number" id="f-numero" style="width:100px;">
    </div>
    <div class="field">
      <label>Fecha desde</label>
      <input type="date" id="f-fecha-desde">
    </div>
    <div class="field">
      <label>Fecha hasta</label>
      <input type="date" id="f-fecha-hasta">
    </div>
    <div class="field">
      <label>Término de pago</label>
      <input type="text" id="f-termino-pago" placeholder="Todos" style="width:130px;">
    </div>
    <div class="field">
      <label>Vendedor</label>
      <select id="f-vendedor"><option value="">Todos</option></select>
    </div>
    <div class="field">
      <label>Facturada</label>
      <select id="f-facturada">
        <option value="">Todos</option>
        <option value="true">Sí</option>
        <option value="false">No</option>
      </select>
    </div>
    <div class="field">
      <label>Estado</label>
      <select id="f-estado">
        <option value="">Todos</option>
        <option value="Registrada">Registrada</option>
        <option value="Aplicada">Aplicada</option>
        <option value="Anulada">Anulada</option>
      </select>
    </div>
    <div class="field texto">
      <label>Observaciones</label>
      <input type="text" id="f-observaciones" placeholder="Buscar en observaciones…">
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-ghost no-print" id="btn-crear-pedido" disabled title="En construcción">Crear pedido</button>
    <button class="btn btn-ghost no-print" id="btn-crear-factura" disabled title="En construcción">Crear factura</button>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nueva Proforma</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Número</th>
          <th>Estado</th>
          <th>Fecha</th>
          <th>Facturada</th>
          <th>Cliente</th>
          <th>Vendedor</th>
          <th>Modo de entrega</th>
          <th>Término de pago</th>
          <th>Observaciones</th>
          <th class="num">Total</th>
          <th>Moneda</th>
          <th>Territorio</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="tbody-proformas"></tbody>
    </table>
    <div class="empty-state" id="estado-vacio" style="display:none;">No hay proformas que coincidan con el filtro.</div>
  </div>
</div>

<div class="overlay" id="registro-overlay">
  <div class="panel">
    <div class="panel-header">
      <h2 id="registro-titulo">Nueva Proforma</h2>
      <div class="panel-header-acciones">
        <button class="btn btn-primary" id="btn-guardar-registro">Registrar</button>
        <button class="btn btn-ghost" id="btn-detalle-registro" disabled title="En construcción">Detalle</button>
        <button class="btn btn-ghost" id="btn-imprimir-registro" style="display:none;">🖨 Imprimir</button>
        <button class="btn btn-ghost" id="btn-correo-registro" disabled title="En construcción" style="display:none;">✉ Enviar por correo</button>
        <button class="btn btn-ghost" id="btn-cancelar-registro">Cancelar</button>
      </div>
    </div>

<div class="seccion">
      <h3>Información</h3>
      <div class="grid-4">
        <div class="form-field">
          <label>Número</label>
          <input type="text" id="reg-numero" disabled placeholder="Se asigna al registrar">
        </div>
        <div class="form-field">
          <label>Fecha</label>
          <input type="date" id="reg-fecha">
        </div>
        <div class="form-field">
          <label>Estado</label>
          <input type="text" id="reg-estado" disabled value="Registrada">
        </div>
        <div class="form-field">
          <label>Moneda</label>
          <select id="reg-moneda">
            <option value="CRC">CRC</option>
            <option value="USD">USD</option>
          </select>
        </div>
      </div>
      <div class="grid-2">
        <div class="form-field">
          <label>Cliente</label>
          <div class="buscador-wrap">
            <input type="text" id="cliente-input" placeholder="Digite el texto de búsqueda…">
            <div class="sugerencias" id="cliente-sugerencias"></div>
          </div>
          <div class="elegido-box" id="cliente-elegido-box">
            <span id="cliente-elegido-nombre"></span>
            <a id="cliente-cambiar">Cambiar</a>
          </div>
        </div>
        <div class="form-field">
          <label>A nombre de</label>
          <input type="text" id="reg-a-nombre-de">
        </div>
      </div>
      <div class="grid-2">
        <div class="form-field">
          <label>Término de pago</label>
          <input type="text" id="reg-termino-pago" placeholder="Ej. Contado, Crédito 30 días">
        </div>
        <div class="form-field">
          <label>Vendedor</label>
          <select id="reg-vendedor"></select>
        </div>
      </div>
      <div class="grid-2">
        <div class="form-field">
          <label>Modo de entrega</label>
          <input type="text" id="reg-modo-entrega" placeholder="Ej. Inmediato, Envío">
        </div>
        <div class="form-field">
          <label>Orden de compra</label>
          <input type="text" id="reg-orden-compra" placeholder="Referencia del cliente (opcional)">
        </div>
      </div>
      <div class="form-field">
        <label>Dirección de entrega</label>
        <input type="text" id="reg-direccion-entrega">
      </div>
      <div class="form-field">
        <label>Observaciones</label>
        <input type="text" id="reg-observaciones">
      </div>
    </div>

<div class="seccion">
      <h3>Ítems</h3>
      <div class="agregar-item-box">
        <div class="form-field campo-item" style="margin-bottom:0;">
          <label>Ítem</label>
          <div class="buscador-wrap">
            <input type="text" id="item-input" placeholder="Digite el texto de búsqueda…">
            <div class="sugerencias" id="item-sugerencias"></div>
          </div>
        </div>
        <div class="form-field campo-cant" style="margin-bottom:0;">
          <label>Cantidad</label>
          <input type="number" id="item-cantidad" min="0.01" step="0.01" value="1">
        </div>
        <div class="form-field campo-obs" style="margin-bottom:0;">
          <label>Observaciones</label>
          <input type="text" id="item-observaciones">
        </div>
        <button class="btn btn-primary" id="btn-agregar-item" type="button">Agregar</button>
        <button class="btn btn-ghost" id="btn-busqueda-avanzada" type="button">🔍 Búsqueda</button>
      </div>

<div class="lineas-table-wrap">
        <table id="tabla-lineas">
          <thead>
            <tr>
              <th></th>
              <th>Ítem</th>
              <th class="num">Cantidad</th>
              <th>Tipo de precio</th>
              <th class="num">Precio unitario</th>
              <th class="num">Subtotal</th>
              <th>Tipo de descuento</th>
              <th class="num">% descuento</th>
              <th class="num">Descuento</th>
              <th class="num">Precio unit. c/desc.</th>
              <th class="num">% impuesto</th>
              <th class="num">Impuesto</th>
            </tr>
          </thead>
          <tbody id="lineas-lista"></tbody>
        </table>
        <div class="empty-lineas" id="empty-lineas">Sin ítems todavía -- búsquelo arriba y presione Agregar.</div>
      </div>

<div class="resumen-fila">
        <div class="utilidad-resumen" id="utilidad-resumen">
          <span class="desc">Utilidad</span>
          <span class="num mono" id="utilidad-monto">0,00</span>
          <div class="aviso-parcial" id="utilidad-aviso"></div>
        </div>
        <div class="totales-box">
          <div class="item"><span class="desc">Subtotal</span><span class="num mono" id="tot-subtotal">0,00</span></div>
          <div class="item"><span class="desc">Descuento</span><span class="num mono" id="tot-descuento">0,00</span></div>
          <div class="item"><span class="desc">Impuestos</span><span class="num mono" id="tot-impuestos">0,00</span></div>
          <div class="item total"><span class="desc">Total</span><span class="num mono" id="tot-total">0,00</span></div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal-overlay" id="busqueda-overlay">
  <div class="modal-box ancho modal-box-wrap">
    <button class="icon-btn modal-close" id="busqueda-cerrar">
      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 6 6 18M6 6l12 12"/></svg>
    </button>
    <h3>Búsqueda avanzada</h3>
    <div class="busq-filtros">
      <div class="form-field" style="margin-bottom:0; width:220px;">
        <label>Bodega</label>
        <select id="busq-bodega"></select>
      </div>
    </div>
    <div class="busq-table-wrap">
      <table id="tabla-busqueda">
        <thead>
          <tr>
            <th>Código interno</th>
            <th>Ítem</th>
            <th class="num">Precio unitario con impuesto</th>
            <th class="num">Existencias</th>
            <th>Bodega</th>
          </tr>
          <tr>
            <th><input type="text" id="busq-codigo" placeholder=""></th>
            <th><input type="text" id="busq-texto" placeholder=""></th>
            <th></th><th></th><th></th>
          </tr>
        </thead>
        <tbody id="tbody-busqueda"></tbody>
      </table>
    </div>
    <div class="busq-paginacion">
      <span id="busq-resultados-info">Resultados desde 0 a 0</span>
      <div style="display:flex; gap:8px; align-items:center;">
        <button class="icon-btn" id="busq-pag-prev" title="Anterior">‹</button>
        <span id="busq-pag-actual">Página 1</span>
        <button class="icon-btn" id="busq-pag-next" title="Siguiente">›</button>
      </div>
    </div>
    <div class="busq-agregar-box">
      <div class="form-field" style="margin-bottom:0; flex:1;">
        <label>Ítem</label>
        <div id="busq-item-elegido" class="muted-cell">Ninguno elegido</div>
      </div>
      <div class="form-field" style="margin-bottom:0; width:110px;">
        <label>Cantidad</label>
        <input type="number" id="busq-cantidad" min="0.01" step="0.01" value="1">
      </div>
      <button class="btn btn-primary" id="busq-agregar">Agregar</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="estado-overlay">
  <div class="modal-box">
    <h3 id="estado-titulo"></h3>
    <div class="estado-info" id="estado-info"></div>
    <div class="historial-lista" id="estado-historial"></div>
    <div class="modal-acciones" style="margin-top:16px;">
      <button class="btn btn-ghost" id="estado-cerrar">Cerrar</button>
      <button class="btn btn-primary" id="estado-aplicar" style="display:none;">Marcar como Aplicada</button>
      <button class="btn btn-danger" id="estado-anular" style="display:none;">Anular</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box">
    <h3 id="modal-titulo"></h3>
    <p id="modal-mensaje"></p>
    <input type="text" class="mono" id="modal-input" style="display:none; width:100%; margin-bottom:14px; padding:8px 10px; border-radius:7px; border:1px solid var(--line-strong); background:var(--bg); color:var(--ink);">
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>

async function llamarApi(path, opciones){
    let resp;
    try{ resp = await fetch(`${API_BASE}${path}`, opciones); }
    catch(e){ throw new Error('No se pudo conectar al backend (¿está corriendo uvicorn?)'); }
    if (!resp.ok){
      let detalle = `El servidor respondió ${resp.status}`;
      try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
      throw new Error(detalle);
    }
    if (resp.status === 204) return null;
    return resp.json();
  }
  function formatearMonto(v){ return Number(v||0).toLocaleString('es-CR', {minimumFractionDigits:2, maximumFractionDigits:2}); }
  function formatearFecha(iso){
    if (!iso) return '—';
    const [a,m,d] = iso.split('-');
    return `${d}/${m}/${a}`;
  }
  function formatearFechaHora(iso){
    if (!iso) return '';
    const d = new Date(iso);
    const pad = n => String(n).padStart(2,'0');
    let horas = d.getHours();
    const ampm = horas >= 12 ? 'p.m.' : 'a.m.';
    horas = horas % 12 || 12;
    return `${pad(d.getDate())}/${pad(d.getMonth()+1)}/${d.getFullYear()} ${horas}:${pad(d.getMinutes())} ${ampm}`;
  }

let fenixToastTimer;
  function mostrarToast(mensaje){
    const el = document.getElementById('fenix-toast');
    document.getElementById('fenix-toast-texto').textContent = mensaje;
    el.classList.add('visible');
    clearTimeout(fenixToastTimer);
    fenixToastTimer = setTimeout(()=> el.classList.remove('visible'), 2200);
  }

// ---------------- Modal genérico (aviso / confirmación / motivo) ----------------
  const modalOverlay = document.getElementById('modal-overlay');
  const modalTitulo = document.getElementById('modal-titulo');
  const modalMensaje = document.getElementById('modal-mensaje');
  const modalInput = document.getElementById('modal-input');
  const modalCancelar = document.getElementById('modal-cancelar');
  const modalAceptar = document.getElementById('modal-aceptar');
  function mostrarModal({titulo, mensaje, tipo, botonAceptar, colorAceptar, pedirTexto}){
    return new Promise(resolve=>{
      modalTitulo.textContent = titulo;
      modalMensaje.textContent = mensaje;
      modalAceptar.textContent = botonAceptar || 'Aceptar';
      modalAceptar.className = 'btn ' + (colorAceptar === 'danger' ? 'btn-danger' : 'btn-primary');
      modalCancelar.style.display = tipo === 'alert' ? 'none' : '';
      modalInput.style.display = pedirTexto ? '' : 'none';
      modalInput.value = '';
      function cerrar(valor){
        modalOverlay.classList.remove('abierto');
        modalAceptar.onclick = null; modalCancelar.onclick = null;
        document.removeEventListener('keydown', onKey);
        resolve(valor);
      }
      function onKey(e){ if (e.key === 'Escape') cerrar(false); }
      modalAceptar.onclick = ()=> cerrar(pedirTexto ? (modalInput.value.trim() || null) : true);
      modalCancelar.onclick = ()=> cerrar(false);
      document.addEventListener('keydown', onKey);
      modalOverlay.classList.add('abierto');
      setTimeout(()=> (pedirTexto ? modalInput : modalAceptar).focus(), 30);
    });
  }
  function modalAlert(mensaje, titulo='Aviso'){ return mostrarModal({titulo, mensaje, tipo:'alert', botonAceptar:'Entendido'}); }
  function modalConfirm(mensaje, titulo='Confirmar', colorAceptar='primary', botonAceptar='Confirmar'){
    return mostrarModal({titulo, mensaje, tipo:'confirm', botonAceptar, colorAceptar});
  }
  function modalPedirTexto(mensaje, titulo, botonAceptar='Confirmar', colorAceptar='danger'){
    return mostrarModal({titulo, mensaje, tipo:'confirm', botonAceptar, colorAceptar, pedirTexto:true});
  }

function posicionarSug(input, caja){
    const r = input.getBoundingClientRect();
    caja.style.top = (r.bottom + 4) + 'px';
    caja.style.left = r.left + 'px';
    caja.style.width = Math.max(r.width, 280) + 'px';
  }

// ---------------- Catálogos de apoyo ----------------
  let VENDEDORES = [];
  let BODEGAS = [];
  let TIPOS_DESCUENTO = [];
  async function cargarCatalogos(){
    VENDEDORES = await llamarApi(`${API_VENDEDORES}?activa=true`);
    BODEGAS = await llamarApi(API_BODEGAS);
    if (BODEGAS && BODEGAS.items) BODEGAS = BODEGAS.items;
    TIPOS_DESCUENTO = await llamarApi(API_TIPOS_DESCUENTO);

const optsVendedor = VENDEDORES.map(v=>`<option value="${v.id}">${v.nombre}</option>`).join('');
    document.getElementById('reg-vendedor').innerHTML = optsVendedor;
    document.getElementById('f-vendedor').innerHTML = '<option value="">Todos</option>' + optsVendedor;

const bodegasDeLaSucursal = SUCURSAL_ACTUAL ? BODEGAS.filter(b => b.sucursal_id === SUCURSAL_ACTUAL.id) : BODEGAS;
    document.getElementById('busq-bodega').innerHTML = bodegasDeLaSucursal.map(b=>`<option value="${b.id}">${b.nombre}</option>`).join('');
  }

// ---------------- Buscador de cliente ----------------
  let clienteElegido = null;
  const clienteInput = document.getElementById('cliente-input');
  const clienteSug = document.getElementById('cliente-sugerencias');
  const clienteElegidoBox = document.getElementById('cliente-elegido-box');
  function elegirCliente(c){
    clienteElegido = c;
    document.getElementById('cliente-elegido-nombre').textContent = c.nombre;
    clienteElegidoBox.classList.add('visible');
    clienteInput.style.display = 'none';
  }
  let clienteDebounce;
  clienteInput.addEventListener('input', ()=>{
    clearTimeout(clienteDebounce);
    clienteDebounce = setTimeout(async ()=>{
      const q = clienteInput.value.trim();
      if (q.length < 2){ clienteSug.classList.remove('abierta'); clienteSug.innerHTML=''; return; }
      posicionarSug(clienteInput, clienteSug);
      clienteSug.classList.add('abierta');
      clienteSug.innerHTML = `<div class="sug-cargando">Buscando…</div>`;
      const items = await llamarApi(`${API_CLIENTES}?nombre=${encodeURIComponent(q)}`);
      if (items.length === 0){ clienteSug.innerHTML = `<div class="sug-vacio">Ningún cliente contiene "${q}"</div>`; return; }
      clienteSug.innerHTML = items.map(c=>`<div class="sug-item" data-id="${c.id}">
        <span class="sug-nombre">${c.nombre}</span>
        ${c.identificacion_numero ? `<span class="sug-meta mono">${c.identificacion_numero}</span>` : ''}</div>`).join('');
      clienteSug.querySelectorAll('.sug-item').forEach((item, i)=>{
        item.addEventListener('mousedown', e=>{ e.preventDefault(); elegirCliente(items[i]); clienteSug.classList.remove('abierta'); });
      });
    }, 300);
  });
  clienteInput.addEventListener('blur', ()=> setTimeout(()=>{ clienteSug.classList.remove('abierta'); if (!clienteElegido) clienteInput.value = ''; }, 150));
  document.getElementById('cliente-cambiar').addEventListener('click', ()=>{
    clienteElegido = null;
    clienteElegidoBox.classList.remove('visible');
    clienteInput.style.display = '';
    clienteInput.value = '';
    clienteInput.focus();
  });

// ---------------- Líneas de la proforma ----------------
  let LINEAS = []; // {articulo_id, articulo_codigo, articulo_nombre, cantidad, tipo_precio, precio_unitario, tipo_descuento_id, porcentaje_descuento, tarifa_iva, observaciones}

function calcularLinea(l){
    const subtotal = Math.round((l.cantidad * l.precio_unitario) * 100) / 100;
    const descuento = Math.round((subtotal * l.porcentaje_descuento / 100) * 100) / 100;
    const precioConDescuento = l.cantidad > 0 ? Math.round(((subtotal - descuento) / l.cantidad) * 100) / 100 : 0;
    const impuesto = Math.round(((subtotal - descuento) * l.tarifa_iva / 100) * 100) / 100;
    const total = subtotal - descuento + impuesto;
    return {subtotal, descuento, precioConDescuento, impuesto, total};
  }

tbody.innerHTML = LINEAS.map((l, i)=>{
      const c = calcularLinea(l);
      return `
        <tr data-idx="${i}">
          <td><button type="button" class="icon-btn danger btn-quitar-linea" title="Quitar"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 6 6 18M6 6l12 12"/></svg></button></td>
          <td>${l.articulo_codigo} — ${l.articulo_nombre}</td>
          <td class="num"><input type="number" class="ln-cantidad" min="0.01" step="0.01" value="${l.cantidad}"></td>
          <td class="muted-cell">${l.tipo_precio}</td>
          <td class="num"><input type="number" class="ln-precio" min="0" step="0.01" value="${l.precio_unitario}"></td>
          <td class="num celda-calculada mono">${formatearMonto(c.subtotal)}</td>
          <td>
            <select class="ln-tipo-descuento">${opcionesDescuento}</select>
          </td>
          <td class="num"><input type="number" class="ln-porcentaje" min="0" max="100" step="0.01" value="${l.porcentaje_descuento}"></td>
          <td class="num celda-calculada mono">${formatearMonto(c.descuento)}</td>
          <td class="num celda-calculada mono">${formatearMonto(c.precioConDescuento)}</td>
          <td class="num muted-cell" title="Tarifa de IVA del artículo -- no editable, no es un criterio de venta">${l.tarifa_iva}%</td>
          <td class="num celda-calculada mono">${formatearMonto(c.impuesto)}</td>
        </tr>
      `;
    }).join('');

tbody.querySelectorAll('select.ln-tipo-descuento').forEach((sel, i)=>{
      sel.value = LINEAS[i].tipo_descuento_id || '';
    });

tbody.querySelectorAll('tr').forEach(fila=>{
      const idx = Number(fila.dataset.idx);
      fila.querySelector('.btn-quitar-linea').addEventListener('click', ()=>{
        LINEAS.splice(idx, 1);
        renderLineas();
      });
      // Recalcular SOLO las celdas calculadas de esta fila (nunca tbody.innerHTML completo) --
      // reconstruir todo el <tr> en cada tecla destruye el input enfocado y le hace perder el
      // cursor/foco a mitad de escritura (Principio 3 -- el cursor espera al usuario). La
      // estructura de filas solo cambia al agregar/quitar un ítem, ahí sí renderLineas() completo.
      fila.querySelector('.ln-cantidad').addEventListener('input', e=>{
        LINEAS[idx].cantidad = Number(e.target.value) || 0;
        recalcularFila(idx);
      });
      fila.querySelector('.ln-precio').addEventListener('input', e=>{
        LINEAS[idx].precio_unitario = Number(e.target.value) || 0;
        recalcularFila(idx);
      });
      fila.querySelector('.ln-porcentaje').addEventListener('input', e=>{
        LINEAS[idx].porcentaje_descuento = Number(e.target.value) || 0;
        recalcularFila(idx);
      });
      fila.querySelector('.ln-tipo-descuento').addEventListener('change', e=>{
        const opt = e.target.selectedOptions[0];
        LINEAS[idx].tipo_descuento_id = e.target.value ? Number(e.target.value) : null;
        LINEAS[idx].porcentaje_descuento = e.target.value ? Number(opt.dataset.porcentaje) : 0;
        fila.querySelector('.ln-porcentaje').value = LINEAS[idx].porcentaje_descuento;
        recalcularFila(idx);
      });
    });

recalcularTotalesProforma();
  }

const ORDEN_CELDAS_CALCULADAS = ['subtotal', 'descuento', 'precioConDescuento', 'impuesto'];
  function recalcularFila(idx){
    const fila = document.querySelector(`#lineas-lista tr[data-idx="${idx}"]`);
    if (!fila) return;
    const c = calcularLinea(LINEAS[idx]);
    const celdas = fila.querySelectorAll('.celda-calculada');
    celdas[0].textContent = formatearMonto(c.subtotal);
    celdas[1].textContent = formatearMonto(c.descuento);
    celdas[2].textContent = formatearMonto(c.precioConDescuento);
    celdas[3].textContent = formatearMonto(c.impuesto);
    recalcularTotalesProforma();
  }

function recalcularTotalesProforma(){
    let subtotal = 0, descuento = 0, impuesto = 0;
    LINEAS.forEach(l=>{
      const c = calcularLinea(l);
      subtotal += c.subtotal; descuento += c.descuento; impuesto += c.impuesto;
    });
    document.getElementById('tot-subtotal').textContent = formatearMonto(subtotal);
    document.getElementById('tot-descuento').textContent = formatearMonto(descuento);
    document.getElementById('tot-impuestos').textContent = formatearMonto(impuesto);
    document.getElementById('tot-total').textContent = formatearMonto(subtotal - descuento + impuesto);
    actualizarResumenUtilidad();
  }

// Resumen de utilidad de la venta en construcción (mismo mecanismo que facturas_venta_ui.html,
  // rescatado de una pantalla real del ERP anterior, ver diseno-facturacion.md/diseno-ventas.md)
  // -- misma fórmula que _margen_utilidad() de Ítems (utilidad sobre costo). Un artículo cuyo
  // costo está en otra moneda (`articulos.moneda_costo`) se convierte con el tipo de cambio de
  // referencia capturado a mano (TIPO_CAMBIO_REF, diseno-facturacion.md §18) para la fecha de la
  // proforma -- nunca inventa uno: si no hay ninguno capturado para esa fecha o antes, la línea
  // se excluye igual que una sin costo, avisando por qué.
  function actualizarResumenUtilidad(){
    const div = document.getElementById('utilidad-resumen');
    if (LINEAS.length === 0){ div.classList.remove('visible'); return; }

function agregarLinea(articulo, cantidad, observaciones){
    LINEAS.push({
      articulo_id: articulo.id, articulo_codigo: articulo.codigo, articulo_nombre: articulo.nombre,
      cantidad: cantidad || 1, tipo_precio: 'General',
      precio_unitario: articulo.precio_venta || 0,
      tipo_descuento_id: null, porcentaje_descuento: 0,
      tarifa_iva: articulo.tarifa_iva_porcentaje != null ? articulo.tarifa_iva_porcentaje : 0,
      observaciones: observaciones || null,
      costo_sin_impuesto: articulo.costo_sin_impuesto || null,
      moneda_costo: articulo.moneda_costo || null,
    });
    renderLineas();
  }

// ---------------- Buscador rápido de ítem ----------------
  let itemElegidoQuickAdd = null;
  const itemInput = document.getElementById('item-input');
  const itemSug = document.getElementById('item-sugerencias');
  let itemDebounce;
  itemInput.addEventListener('input', ()=>{
    itemElegidoQuickAdd = null;
    clearTimeout(itemDebounce);
    itemDebounce = setTimeout(async ()=>{
      const q = itemInput.value.trim();
      if (q.length < 2){ itemSug.classList.remove('abierta'); itemSug.innerHTML=''; return; }
      posicionarSug(itemInput, itemSug);
      itemSug.classList.add('abierta');
      itemSug.innerHTML = `<div class="sug-cargando">Buscando…</div>`;
      const datos = await llamarApi(`${API_ARTICULOS}?texto=${encodeURIComponent(q)}&activo=true&por_pagina=15`);
      const items = datos.items || datos;
      if (items.length === 0){ itemSug.innerHTML = `<div class="sug-vacio">Ningún artículo contiene "${q}"</div>`; return; }
      itemSug.innerHTML = items.map(a=>`<div class="sug-item" data-id="${a.id}">
        <span class="sug-nombre">${a.nombre}</span>
        <span class="sug-meta mono">${a.codigo}</span></div>`).join('');
      itemSug.querySelectorAll('.sug-item').forEach((el, i)=>{
        el.addEventListener('mousedown', async e=>{
          e.preventDefault();
          const detalle = await llamarApi(`${API_ARTICULOS}/${items[i].id}`);
          itemElegidoQuickAdd = {
            id: detalle.id, codigo: detalle.codigo, nombre: detalle.nombre,
            precio_venta: detalle.precio_venta,
            tarifa_iva_porcentaje: detalle.tarifa_iva ? null : 0,
          };
          // La tarifa real (%) vive en tarifas_iva -- se resuelve al vuelo desde el catálogo ya cargado.
          if (detalle.tarifa_iva){
            const tarifas = await llamarApi(`${API_ARTICULOS}/tarifas-iva`);
            const t = tarifas.find(x=>x.codigo === detalle.tarifa_iva);
            itemElegidoQuickAdd.tarifa_iva_porcentaje = t ? t.porcentaje : 0;
          }
          itemInput.value = `${detalle.codigo} — ${detalle.nombre}`;
          itemSug.classList.remove('abierta');
        });
      });
    }, 300);
  });
  itemInput.addEventListener('blur', ()=> setTimeout(()=>{ itemSug.classList.remove('abierta'); if (!itemElegidoQuickAdd) itemInput.value=''; }, 150));

document.getElementById('btn-agregar-item').addEventListener('click', async ()=>{
    if (!itemElegidoQuickAdd){ await modalAlert('Busque y elija un ítem primero.'); itemInput.focus(); return; }
    const cantidad = Number(document.getElementById('item-cantidad').value) || 1;
    const observaciones = document.getElementById('item-observaciones').value.trim();
    agregarLinea(itemElegidoQuickAdd, cantidad, observaciones);
    itemElegidoQuickAdd = null;
    itemInput.value = '';
    document.getElementById('item-cantidad').value = '1';
    document.getElementById('item-observaciones').value = '';
    itemInput.focus();
  });

// ---------------- Búsqueda avanzada ----------------
  const busquedaOverlay = document.getElementById('busqueda-overlay');
  let busqPagina = 1;
  let busqItemElegido = null;
  const POR_PAGINA_BUSQUEDA = 50;

async function cargarBusqueda(){
    const bodegaId = document.getElementById('busq-bodega').value;
    const codigo = document.getElementById('busq-codigo').value.trim();
    const texto = document.getElementById('busq-texto').value.trim();
    if (!bodegaId) return;
    const params = new URLSearchParams({bodega_id: bodegaId, pagina: busqPagina, por_pagina: POR_PAGINA_BUSQUEDA});
    if (codigo) params.set('codigo', codigo);
    if (texto) params.set('texto', texto);
    const datos = await llamarApi(`${API_PROFORMAS}/catalogo/buscar-articulos?${params.toString()}`);
    const tbody = document.getElementById('tbody-busqueda');
    if (datos.items.length === 0){
      tbody.innerHTML = `<tr><td colspan="5" class="muted-cell" style="text-align:center; padding:20px;">Sin resultados.</td></tr>`;
    } else {
      tbody.innerHTML = datos.items.map(a=>`
        <tr data-id="${a.id}">
          <td class="mono">${a.codigo}</td>
          <td>${a.nombre}</td>
          <td class="num mono">${formatearMonto(a.precio_con_impuesto)} ${a.moneda_costo}</td>
          <td class="num mono">${formatearMonto(a.existencia)}</td>
          <td>${a.bodega_nombre}</td>
        </tr>
      `).join('');
      tbody.querySelectorAll('tr').forEach(fila=>{
        fila.addEventListener('click', ()=>{
          tbody.querySelectorAll('tr').forEach(f=>f.classList.remove('fila-elegida'));
          fila.classList.add('fila-elegida');
          const a = datos.items.find(x=>String(x.id) === fila.dataset.id);
          busqItemElegido = a;
          document.getElementById('busq-item-elegido').textContent = `${a.codigo} — ${a.nombre}`;
        });
      });
    }
    const desde = datos.total === 0 ? 0 : (busqPagina - 1) * POR_PAGINA_BUSQUEDA + 1;
    const hasta = Math.min(busqPagina * POR_PAGINA_BUSQUEDA, datos.total);
    document.getElementById('busq-resultados-info').textContent = `Resultados desde ${desde} a ${hasta} de ${datos.total}`;
    document.getElementById('busq-pag-actual').textContent = `Página ${busqPagina}`;
    document.getElementById('busq-pag-prev').disabled = busqPagina <= 1;
    document.getElementById('busq-pag-next').disabled = busqPagina * POR_PAGINA_BUSQUEDA >= datos.total;
  }

// ---------------- Registrar / Modificar / Ver ----------------
  let proformaEnEdicion = null;
  const registroOverlay = document.getElementById('registro-overlay');

// Tipo de cambio de referencia (captura manual diaria, diseno-facturacion.md §18) -- el
  // vigente EN o ANTES de la fecha de la proforma. Se recarga al abrir el formulario y cada vez
  // que cambia la fecha; null si todavía no hay ninguno capturado -- actualizarResumenUtilidad()
  // excluye las líneas en otra moneda en vez de asumir un valor.
  let TIPO_CAMBIO_REF = null;
  async function cargarTipoCambioReferencia(fecha){
    try{ TIPO_CAMBIO_REF = fecha ? await llamarApi(`/bancos/tipo-cambio-referencia/vigente?fecha=${fecha}`) : null; }
    catch(e){ TIPO_CAMBIO_REF = null; }
    actualizarResumenUtilidad();
  }
  document.getElementById('reg-fecha').addEventListener('change', e=> cargarTipoCambioReferencia(e.target.value));

function habilitarCamposGenerales(habilitar){
    ['reg-fecha','reg-moneda','reg-a-nombre-de','reg-termino-pago','reg-vendedor',
     'reg-modo-entrega','reg-orden-compra','reg-direccion-entrega','reg-observaciones'].forEach(id=>{
      document.getElementById(id).disabled = !habilitar;
    });
    document.getElementById('cliente-cambiar').style.display = habilitar ? '' : 'none';
  }

function abrirNuevo(){
    proformaEnEdicion = null;
    document.getElementById('registro-titulo').textContent = 'Nueva Proforma';
    clienteElegido = null;
    clienteElegidoBox.classList.remove('visible');
    clienteInput.style.display = '';
    clienteInput.value = '';
    document.getElementById('reg-numero').value = '';
    document.getElementById('reg-fecha').value = new Date().toLocaleDateString('sv-SE');
    cargarTipoCambioReferencia(document.getElementById('reg-fecha').value);
    document.getElementById('reg-estado').value = 'Registrada';
    document.getElementById('reg-moneda').value = 'CRC';
    document.getElementById('reg-a-nombre-de').value = '';
    document.getElementById('reg-termino-pago').value = '';
    document.getElementById('reg-vendedor').value = VENDEDORES[0] ? VENDEDORES[0].id : '';
    document.getElementById('reg-modo-entrega').value = '';
    document.getElementById('reg-orden-compra').value = '';
    document.getElementById('reg-direccion-entrega').value = '';
    document.getElementById('reg-observaciones').value = '';
    LINEAS = [];
    renderLineas();
    habilitarCamposGenerales(true);
    document.getElementById('btn-guardar-registro').style.display = '';
    document.getElementById('btn-guardar-registro').textContent = 'Registrar';
    // Nada que imprimir o enviar todavía -- una Proforma nueva no existe hasta Registrar.
    document.getElementById('btn-imprimir-registro').style.display = 'none';
    document.getElementById('btn-correo-registro').style.display = 'none';
    registroOverlay.classList.add('abierto');
    setTimeout(()=> clienteInput.focus(), 30);
  }

async function abrirDetalle(id, soloLectura){
    const detalle = await llamarApi(`${API_PROFORMAS}/${id}`);
    proformaEnEdicion = detalle;
    document.getElementById('registro-titulo').textContent = `${soloLectura ? 'Proforma' : 'Modificar Proforma'} #${detalle.numero} — ${detalle.estado}`;
    elegirCliente({id: detalle.cliente_id, nombre: detalle.cliente_nombre});
    document.getElementById('reg-numero').value = detalle.numero;
    document.getElementById('reg-fecha').value = detalle.fecha;
    cargarTipoCambioReferencia(detalle.fecha);
    document.getElementById('reg-estado').value = detalle.estado;
    document.getElementById('reg-moneda').value = detalle.moneda;
    document.getElementById('reg-a-nombre-de').value = detalle.a_nombre_de || '';
    document.getElementById('reg-termino-pago').value = detalle.termino_pago || '';
    document.getElementById('reg-vendedor').value = detalle.vendedor_id;
    document.getElementById('reg-modo-entrega').value = detalle.modo_entrega || '';
    document.getElementById('reg-orden-compra').value = detalle.orden_compra || '';
    document.getElementById('reg-direccion-entrega').value = detalle.direccion_entrega || '';
    document.getElementById('reg-observaciones').value = detalle.observaciones || '';

LINEAS = detalle.lineas.map(l=>({
      articulo_id: l.articulo_id, articulo_codigo: l.articulo_codigo, articulo_nombre: l.articulo_nombre,
      cantidad: Number(l.cantidad), tipo_precio: l.tipo_precio, precio_unitario: Number(l.precio_unitario),
      tipo_descuento_id: l.tipo_descuento_id, porcentaje_descuento: Number(l.porcentaje_descuento),
      tarifa_iva: Number(l.tarifa_iva), observaciones: l.observaciones,
    }));
    renderLineas();

const editable = !soloLectura && detalle.estado === 'Registrada';
    habilitarCamposGenerales(editable);
    document.getElementById('btn-guardar-registro').style.display = editable ? '' : 'none';
    document.getElementById('btn-guardar-registro').textContent = 'Guardar';
    document.getElementById('btn-agregar-item').style.display = editable ? '' : 'none';
    document.getElementById('btn-busqueda-avanzada').style.display = editable ? '' : 'none';

// Imprimir/Enviar por correo -- solo tienen sentido sobre una Proforma que ya existe.
    const btnImprimir = document.getElementById('btn-imprimir-registro');
    btnImprimir.style.display = '';
    btnImprimir.onclick = ()=> window.open(`${API_BASE}${API_PROFORMAS}/${id}/pdf`, '_blank');
    document.getElementById('btn-correo-registro').style.display = '';

registroOverlay.classList.add('abierto');
  }
  function cerrarRegistro(){ registroOverlay.classList.remove('abierto'); proformaEnEdicion = null; }
  document.getElementById('btn-cancelar-registro').addEventListener('click', cerrarRegistro);
  document.getElementById('btn-nuevo').addEventListener('click', abrirNuevo);

function construirLineasPayload(){
    return LINEAS.map(l=>({
      articulo_id: l.articulo_id, cantidad: l.cantidad, tipo_precio: l.tipo_precio,
      precio_unitario: l.precio_unitario, tipo_descuento_id: l.tipo_descuento_id,
      porcentaje_descuento: l.porcentaje_descuento, tarifa_iva: l.tarifa_iva,
      observaciones: l.observaciones,
    }));
  }

const cuerpo = {
      sucursal_id: SUCURSAL_ACTUAL.id, fecha,
      cliente_id: clienteElegido.id,
      a_nombre_de: document.getElementById('reg-a-nombre-de').value.trim() || null,
      vendedor_id: Number(document.getElementById('reg-vendedor').value),
      termino_pago: document.getElementById('reg-termino-pago').value.trim() || null,
      modo_entrega: document.getElementById('reg-modo-entrega').value.trim() || null,
      direccion_entrega: document.getElementById('reg-direccion-entrega').value.trim() || null,
      orden_compra: document.getElementById('reg-orden-compra').value.trim() || null,
      observaciones: document.getElementById('reg-observaciones').value.trim() || null,
      moneda: document.getElementById('reg-moneda').value,
      lineas: construirLineasPayload(),
    };

// ---------------- Estado / historial ----------------
  const estadoOverlay = document.getElementById('estado-overlay');
  async function abrirEstado(proforma){
    document.getElementById('estado-titulo').textContent = `Proforma #${proforma.numero} — ${proforma.estado}`;
    document.getElementById('estado-info').innerHTML = `
      <div>Creada por <b>${proforma.creado_por}</b>, el ${formatearFechaHora(proforma.creado_en)}</div>
      ${proforma.modificado_por ? `<div>Modificada por <b>${proforma.modificado_por}</b>, el ${formatearFechaHora(proforma.modificado_en)}</div>` : ''}
    `;
    const historial = await llamarApi(`${API_PROFORMAS}/${proforma.id}/historial`);
    document.getElementById('estado-historial').innerHTML = historial.map(h=>`
      <div class="historial-item">
        <div>
          ${h.estado_anterior ? `${h.estado_anterior} → ` : ''}<b>${h.estado_nuevo}</b>
          ${h.observacion ? `<div class="historial-obs">${h.observacion}</div>` : ''}
        </div>
        <div class="muted-cell">${h.realizado_por} · ${formatearFechaHora(h.realizado_en)}</div>
      </div>
    `).join('');

const btnAplicar = document.getElementById('estado-aplicar');
    const btnAnular = document.getElementById('estado-anular');
    btnAplicar.style.display = proforma.estado === 'Registrada' ? '' : 'none';
    btnAnular.style.display = (proforma.estado === 'Registrada' || proforma.estado === 'Aplicada') ? '' : 'none';

btnAplicar.onclick = async ()=>{
      try{
        await llamarApi(`${API_PROFORMAS}/${proforma.id}/cambiar-estado`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({estado_nuevo:'Aplicada', realizado_por: USUARIO_ACTUAL})});
        estadoOverlay.classList.remove('abierto');
        mostrarToast('✓ Proforma aplicada');
        await buscar();
      }catch(e){ await modalAlert(e.message, 'No se pudo aplicar'); }
    };
    btnAnular.onclick = async ()=>{
      const motivo = await modalPedirTexto('Indique la observación de la anulación:', 'Anular Proforma', 'Anular');
      if (!motivo) return;
      try{
        await llamarApi(`${API_PROFORMAS}/${proforma.id}/cambiar-estado`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({estado_nuevo:'Anulada', observacion: motivo, realizado_por: USUARIO_ACTUAL})});
        estadoOverlay.classList.remove('abierto');
        mostrarToast('✓ Proforma anulada');
        await buscar();
      }catch(e){ await modalAlert(e.message, 'No se pudo anular'); }
    };
    estadoOverlay.classList.add('abierto');
  }
  document.getElementById('estado-cerrar').addEventListener('click', ()=> estadoOverlay.classList.remove('abierto'));

// ---------------- Listado ----------------
  function pillEstado(estado){
    const clases = {Registrada:'pill-registrado', Aplicada:'pill-aplicado', Anulada:'pill-anulado'};
    return `<span class="pill ${clases[estado]||''}" data-estado-id="__ID__">${estado}</span>`;
  }
  window.__proformasCache = {};

async function buscar(){
    const params = new URLSearchParams();
    const numero = document.getElementById('f-numero').value;
    if (numero) params.set('numero', numero);
    const fd = document.getElementById('f-fecha-desde').value;
    if (fd) params.set('fecha_desde', fd);
    const fh = document.getElementById('f-fecha-hasta').value;
    if (fh) params.set('fecha_hasta', fh);
    const terminoPago = document.getElementById('f-termino-pago').value.trim();
    if (terminoPago) params.set('termino_pago', terminoPago);
    const vendedorId = document.getElementById('f-vendedor').value;
    if (vendedorId) params.set('vendedor_id', vendedorId);
    const facturada = document.getElementById('f-facturada').value;
    if (facturada) params.set('facturada', facturada);
    const estado = document.getElementById('f-estado').value;
    if (estado) params.set('estado', estado);
    const observaciones = document.getElementById('f-observaciones').value.trim();
    if (observaciones) params.set('observaciones', observaciones);

['f-numero','f-fecha-desde','f-fecha-hasta','f-vendedor','f-facturada','f-estado'].forEach(id=>{
    document.getElementById(id).addEventListener('change', buscar);
  });
  ['f-termino-pago','f-observaciones'].forEach(id=>{
    document.getElementById(id).addEventListener('input', ()=>{
      clearTimeout(window.__debounceFiltro);
      window.__debounceFiltro = setTimeout(buscar, 350);
    });
  });
  document.getElementById('btn-refrescar').addEventListener('click', async (ev)=>{
    const icono = ev.currentTarget.querySelector('svg');
    icono.classList.add('girando');
    await buscar();
    icono.classList.remove('girando');
  });

// ---------------- Sucursal activa (mismo patrón "pull" del resto del proyecto) ----------------
  function solicitarSucursal(){
    if (window.parent === window) return; // standalone: no hay shell del que pedirla
    window.parent.postMessage({tipo:'fenix-solicitar-sucursal'}, '*');
  }
  window.addEventListener('message', (ev)=>{
    if (ev.data && ev.data.tipo === 'fenix-sucursal'){
      SUCURSAL_ACTUAL = {id: ev.data.sucursal_id, nombre: ev.data.sucursal_nombre};
      cargarCatalogos().catch(()=>{});
    }
  });

(async function init(){
    solicitarSucursal();
    await cargarCatalogos().catch(()=>{});
    await buscar();
  })();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Facturas de Venta</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1200px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field.texto{flex:1; min-width:180px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:130px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn-danger{color:var(--red-ink); border-color:var(--red-line); background:var(--red-bg);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.table-wrap{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    overflow-x:auto; box-shadow:var(--shadow);
  }
  table{border-collapse:collapse; width:100%; min-width:900px;}
  thead th{
    text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-muted); padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
  }
  th.num, td.num{text-align:right;}
  tbody td{padding:11px 14px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:var(--surface-2);}
  .muted-cell{color:var(--ink-muted);}
  .icon-btn{
    background:none; border:1px solid transparent; border-radius:6px; padding:5px;
    cursor:pointer; color:var(--ink-muted); display:inline-flex;
  }
  .icon-btn:hover{background:var(--surface-2); color:var(--ink);}
  .icon-btn.danger:hover{color:var(--red-ink); background:var(--red-bg);}
  .acciones-cell{display:flex; gap:4px; align-items:center;}

.pill{display:inline-flex; align-items:center; gap:5px; border-radius:20px; padding:3px 10px; font-size:12px; font-weight:600; border:1px solid; cursor:pointer;}
  .pill::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor;}
  .pill-pendiente{background:var(--amber-bg); color:var(--amber-ink); border-color:var(--amber-line);}
  .pill-aplicado{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
  .pill-anulado{background:var(--grey-bg); color:var(--grey-ink); border-color:var(--line-strong);}

.empty-state{padding:48px 24px; text-align:center; color:var(--ink-muted);}

.overlay{
    display:none; position:fixed; inset:0; background:rgba(10,14,10,.5);
    align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; z-index:50;
  }
  .overlay.abierto{display:flex;}
  .panel{
    background:var(--surface); border-radius:12px; box-shadow:var(--shadow);
    width:100%; max-width:1320px; padding:22px 24px 24px;
    max-height:calc(100vh - 80px); display:flex; flex-direction:column; overflow-y:auto;
  }
  .panel-header{
    display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
    flex-shrink:0; position:sticky; top:-22px; margin:-22px -24px 16px; padding:22px 24px 14px;
    background:var(--surface); z-index:10; border-bottom:1px solid var(--line);
  }
  .panel-header h2{font-size:18px;}
  .panel-header-acciones{display:flex; gap:8px;}
  .seccion{margin-bottom:20px; flex-shrink:0;}
  .seccion h3{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin-bottom:10px;}
  .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
  .grid-4{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:12px;}
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:10px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input, .form-field select, .form-field textarea{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%;
  }
  .form-field input[disabled], .form-field select[disabled]{opacity:.6; cursor:not-allowed;}

.buscador-wrap{position:relative;}
  .sugerencias{
    position:fixed; background:var(--surface); border:1px solid var(--line); border-radius:8px;
    box-shadow:var(--shadow); max-height:260px; overflow-y:auto; z-index:120; display:none;
  }
  .sugerencias.abierta{display:block;}
  .sug-item{padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--line);}
  .sug-item:last-child{border-bottom:none;}
  .sug-item:hover{background:var(--accent-soft);}
  .sug-nombre{display:block; font-size:13px;}
  .sug-meta{display:block; font-size:11.5px; color:var(--ink-muted); margin-top:2px;}
  .sug-cargando, .sug-vacio{padding:10px 12px; font-size:12.5px; color:var(--ink-muted);}
  .elegido-box{
    display:none; align-items:center; justify-content:space-between; gap:10px;
    background:var(--accent-soft); border:1px solid var(--accent); border-radius:7px; padding:8px 10px; font-size:13.5px;
  }
  .elegido-box.visible{display:flex;}
  .elegido-box a{color:var(--accent); font-weight:600; cursor:pointer; text-decoration:none;}

.lineas-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:8px; margin-bottom:10px;}
  #tabla-lineas{min-width:1080px;}
  #tabla-lineas thead th{background:var(--surface-2);}
  #tabla-lineas td{padding:8px 10px;}
  #tabla-lineas input, #tabla-lineas select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:6px;
    padding:5px 7px; font-size:13px; width:100%; min-width:70px; color:var(--ink);
  }
  #tabla-lineas .celda-calculada{font-weight:600; white-space:nowrap;}
  .empty-lineas{padding:20px; text-align:center; color:var(--ink-muted); font-size:13px;}
  .precio-advertencia{
    margin-top:4px; background:var(--amber-bg); border:1px solid var(--amber-line); color:var(--amber-ink);
    border-radius:5px; padding:3px 6px; font-size:11px; font-weight:500; white-space:normal; display:none;
  }
  .precio-advertencia.visible{display:block;}

.estado-info div{margin-bottom:6px; font-size:13.5px;}
  .campos-condicionales{display:none;}
  .campos-condicionales.visible{display:block;}

.medio-nota{
    font-size:12px; color:var(--ink-muted); background:var(--surface-2); border:1px solid var(--line);
    border-radius:7px; padding:8px 10px; margin-bottom:14px;
  }
  .medio-fila{
    border:1px solid var(--line-strong); border-radius:8px; padding:14px; margin-bottom:12px; background:var(--surface);
  }
  .medio-fila-header{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px;}
  .medio-fila-header select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; font-weight:600;
  }
  .medio-campos{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
  .medio-campos.una-columna{grid-template-columns:1fr;}
  .medio-campos .form-field{margin-bottom:0;}
  .medio-campos + .form-field{margin-top:12px;}

.cuadre-box{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
    padding:12px 16px; margin-top:6px; font-size:14px;
  }
  .cuadre-box .desc{color:var(--ink-muted); font-size:12.5px;}
  .cuadre-box .num{font-size:17px; font-weight:700;}
  .cuadre-box.descuadrado{border-color:var(--red-line); background:var(--red-bg);}
  .cuadre-box.descuadrado .num{color:var(--red-ink);}
  .cuadre-box.cuadrado{border-color:var(--accent); background:var(--accent-soft);}
  .cuadre-box.cuadrado .num{color:var(--accent);}
  .cuadre-box.pendiente{border-color:var(--amber-line); background:var(--amber-bg);}
  .cuadre-box.pendiente .num{color:var(--amber-ink);}

@media print{
    @page{ margin: 1.5cm; }
    .topbar .crumbs, .filters, .acciones-cell, .no-print{display:none !important;}
    body{background:#fff; color:#000;}
    .app{max-width:none; padding:0;}
    .table-wrap{box-shadow:none; border:1px solid #000;}
    thead th{background:none !important; border-color:#000 !important;}
    .pill{background:none !important; border:1px solid #000 !important; color:#000 !important;}
  }
  .fenix-toast{
    position:fixed; bottom:24px; right:24px; z-index:500;
    background:var(--accent); color:var(--accent-ink); padding:11px 18px; border-radius:8px;
    box-shadow:var(--shadow); font-size:13.5px; font-weight:600;
    display:flex; align-items:center; gap:8px;
    opacity:0; transform:translateY(10px); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .fenix-toast.visible{ opacity:1; transform:translateY(0); }
</style>

<div class="app">
  <div class="topbar">
    <div class="brand">
      <h1>Fénix</h1>
      <span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Facturas de Venta</span>
    </div>
    <div class="crumbs">Ventas / <b>Facturas</b></div>
  </div>

<div class="filters">
    <div class="field">
      <label>Número</label>
      <input type="number" id="f-numero" style="width:100px;">
    </div>
    <div class="field">
      <label>Tipo</label>
      <select id="f-tipo-comprobante">
        <option value="">Todos</option>
        <option value="FE">Factura Electrónica</option>
        <option value="TE">Tiquete Electrónico</option>
      </select>
    </div>
    <div class="field">
      <label>Fecha desde</label>
      <input type="date" id="f-fecha-desde">
    </div>
    <div class="field">
      <label>Fecha hasta</label>
      <input type="date" id="f-fecha-hasta">
    </div>
    <div class="field">
      <label>Estado</label>
      <select id="f-estado">
        <option value="">Todos</option>
        <option value="Pendiente">Pendiente</option>
        <option value="Aplicado">Aplicada</option>
        <option value="Anulado">Anulada</option>
      </select>
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <button class="btn btn-primary no-print" id="btn-nuevo">+ Nueva Factura</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Tipo</th>
          <th>Número</th>
          <th>Estado</th>
          <th>Fecha</th>
          <th>Cliente</th>
          <th>Vendedor</th>
          <th>Condición</th>
          <th class="num">Total</th>
          <th>Moneda</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="tbody-facturas"></tbody>
    </table>
    <div class="empty-state" id="estado-vacio" style="display:none;">No hay facturas que coincidan con el filtro.</div>
  </div>
</div>

<div class="overlay" id="registro-overlay">
  <div class="panel">
    <div class="panel-header">
      <h2 id="registro-titulo">Nueva Factura</h2>
      <div class="panel-header-acciones">
        <button class="btn btn-primary" id="btn-guardar-registro">Registrar</button>
        <button class="btn btn-primary" id="btn-abrir-aplicar" style="display:none;">Aplicar</button>
        <button class="btn btn-danger" id="btn-abrir-anular" style="display:none;">Anular</button>
        <button class="btn btn-ghost" id="btn-imprimir-registro" disabled title="En construcción" style="display:none;">🖨 Imprimir</button>
        <button class="btn btn-ghost" id="btn-historial-cliente" type="button">📜 Historial del cliente</button>
        <button class="btn btn-ghost" id="btn-cancelar-registro">Cancelar</button>
      </div>
    </div>

<div class="seccion">
      <h3>Información</h3>
      <div class="grid-4">
        <div class="form-field">
          <label>Tipo de comprobante</label>
          <select id="reg-tipo-comprobante">
            <option value="FE">Factura Electrónica</option>
            <option value="TE">Tiquete Electrónico</option>
          </select>
        </div>
        <div class="form-field">
          <label>Número</label>
          <input type="text" id="reg-numero" disabled placeholder="Se asigna al registrar">
        </div>
        <div class="form-field">
          <label>Fecha</label>
          <input type="date" id="reg-fecha">
        </div>
        <div class="form-field">
          <label>Estado</label>
          <input type="text" id="reg-estado" disabled value="Pendiente">
        </div>
      </div>
      <div class="grid-3">
        <div class="form-field">
          <label>Condición de venta</label>
          <select id="reg-condicion-venta"></select>
        </div>
        <div class="form-field campo-condicion-otro" style="display:none;">
          <label>Detalle (condición "Otros")</label>
          <input type="text" id="reg-condicion-otro">
        </div>
        <div class="form-field">
          <label>Moneda</label>
          <select id="reg-moneda">
            <option value="CRC">CRC</option>
            <option value="USD">USD</option>
          </select>
        </div>
        <div class="form-field" id="reg-tipo-cambio-field" style="display:none;">
          <label>Tipo de cambio</label>
          <input type="number" id="reg-tipo-cambio" min="0.000001" step="0.000001">
          <div id="tipo-cambio-aviso" style="font-size:11px; color:var(--amber-ink); margin-top:2px;"></div>
        </div>
        <div class="form-field">
          <label>Bodega (de donde sale la mercadería)</label>
          <select id="reg-bodega"></select>
        </div>
      </div>
      <div class="grid-2">
        <div class="form-field">
          <label>Actividad económica (Hacienda)</label>
          <select id="reg-actividad-emisor"></select>
        </div>
        <div class="form-field">
          <label>Cliente</label>
          <div class="buscador-wrap">
            <input type="text" id="cliente-input" placeholder="Digite el texto de búsqueda…">
            <div class="sugerencias" id="cliente-sugerencias"></div>
          </div>
          <div class="elegido-box" id="cliente-elegido-box">
            <span id="cliente-elegido-nombre"></span>
            <a id="cliente-cambiar">Cambiar</a>
          </div>
          <div id="cliente-credito-aviso" style="font-size:11px; margin-top:4px;"></div>
        </div>
        <div class="form-field">
          <label>Vendedor</label>
          <select id="reg-vendedor"></select>
        </div>
        <div class="form-field">
          <label>Actividad económica del receptor (opcional)</label>
          <select id="reg-actividad-receptor" disabled><option value="">Elija un cliente primero</option></select>
        </div>
      </div>
      <div class="form-field">
        <label>Observaciones</label>
        <input type="text" id="reg-observaciones">
      </div>
    </div>

<div class="lineas-table-wrap">
        <table id="tabla-lineas">
          <thead>
            <tr>
              <th></th>
              <th>Ítem</th>
              <th>CAByS</th>
              <th class="num">Cantidad</th>
              <th>Unidad</th>
              <th class="num">Precio unitario</th>
              <th class="num">Subtotal</th>
              <th>Tipo desc.</th>
              <th class="num">% desc.</th>
              <th class="num">Descuento</th>
              <th class="num">Tarifa IVA</th>
              <th class="num">Impuesto</th>
            </tr>
          </thead>
          <tbody id="lineas-lista"></tbody>
        </table>
        <div class="empty-lineas" id="empty-lineas">Sin ítems todavía -- búsquelo arriba y presione Agregar.</div>
      </div>

<div class="modal-overlay" id="busqueda-overlay">
  <div class="modal-box ancho modal-box-wrap">
    <button class="icon-btn modal-close" id="busqueda-cerrar">
      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 6 6 18M6 6l12 12"/></svg>
    </button>
    <h3>Búsqueda avanzada</h3>
    <div class="busq-table-wrap">
      <table id="tabla-busqueda">
        <thead>
          <tr>
            <th>Código interno</th>
            <th>Ítem</th>
            <th class="num">Precio unitario con impuesto</th>
            <th class="num">Existencias</th>
          </tr>
          <tr>
            <th><input type="text" id="busq-codigo" placeholder=""></th>
            <th><input type="text" id="busq-texto" placeholder=""></th>
            <th></th><th></th>
          </tr>
        </thead>
        <tbody id="tbody-busqueda"></tbody>
      </table>
    </div>
    <div class="busq-paginacion">
      <span id="busq-resultados-info">Resultados desde 0 a 0</span>
      <div style="display:flex; gap:8px; align-items:center;">
        <button class="icon-btn" id="busq-pag-prev" title="Anterior">‹</button>
        <span id="busq-pag-actual">Página 1</span>
        <button class="icon-btn" id="busq-pag-next" title="Siguiente">›</button>
      </div>
    </div>
    <div class="busq-agregar-box">
      <div class="form-field" style="margin-bottom:0; flex:1;">
        <label>Ítem</label>
        <div id="busq-item-elegido" class="muted-cell">Ninguno elegido</div>
      </div>
      <div class="form-field" style="margin-bottom:0; width:110px;">
        <label>Cantidad</label>
        <input type="number" id="busq-cantidad" min="0.01" step="0.01" value="1">
      </div>
      <button class="btn btn-primary" id="busq-agregar">Agregar</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="historial-overlay">
  <div class="modal-box ancho modal-box-wrap">
    <button class="icon-btn modal-close" id="historial-cerrar">
      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 6 6 18M6 6l12 12"/></svg>
    </button>
    <h3>Historial de ítems facturados</h3>
    <div class="grid-2" style="margin-bottom:10px;">
      <div class="form-field" style="margin-bottom:0;">
        <label>Desde</label>
        <input type="date" id="hist-desde">
      </div>
      <div class="form-field" style="margin-bottom:0;">
        <label>Hasta</label>
        <input type="date" id="hist-hasta">
      </div>
    </div>
    <div class="busq-table-wrap">
      <table id="tabla-historial">
        <thead>
          <tr>
            <th>Factura</th>
            <th>Fecha</th>
            <th>Código interno</th>
            <th>Ítem</th>
            <th class="num">Cantidad</th>
            <th class="num">Precio unitario sin impuesto</th>
            <th class="num">% descuento</th>
            <th class="num">% utilidad</th>
          </tr>
          <tr>
            <th></th><th></th>
            <th><input type="text" id="hist-codigo" placeholder=""></th>
            <th><input type="text" id="hist-texto" placeholder=""></th>
            <th></th><th></th><th></th><th></th>
          </tr>
        </thead>
        <tbody id="tbody-historial"></tbody>
      </table>
    </div>
    <div class="busq-paginacion">
      <span id="hist-resultados-info">Resultados desde 0 a 0</span>
      <div style="display:flex; gap:8px; align-items:center;">
        <button class="icon-btn" id="hist-pag-prev" title="Anterior">‹</button>
        <span id="hist-pag-actual">Página 1</span>
        <button class="icon-btn" id="hist-pag-next" title="Siguiente">›</button>
      </div>
    </div>
  </div>
</div>

<div class="modal-overlay" id="aplicar-overlay">
  <div class="modal-box ancho modal-box-wrap" id="aplicar-modal-box">
    <h3>Aplicar factura</h3>
    <p>Genera el asiento real y mueve el inventario. No se puede deshacer -- para corregir después, hay que Anular.</p>
    <div class="campos-condicionales visible" id="campos-medio-pago">
      <div class="medio-nota">Transferencia/SINPE necesitan que el banco ya haya ejecutado el movimiento y dado
        el comprobante. Anticipo y Nota de Crédito consumen el saldo disponible de este cliente -- ambos solo en
        colones. Los segmentos deben sumar exactamente el total de la factura.</div>

<div id="medios-lista-aplicar"></div>
      <button class="btn btn-ghost" id="btn-agregar-medio-aplicar" type="button">+ Agregar medio de pago</button>

<div class="cuadre-box" id="cuadre-box-aplicar">
        <span class="desc" id="cuadre-desc-aplicar">Falta por cubrir</span>
        <span class="num mono" id="cuadre-valor-aplicar">0,00</span>
      </div>
    </div>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="aplicar-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="aplicar-confirmar">Aplicar</button>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>

async function llamarApi(path, opciones){
    let resp;
    try{ resp = await fetch(`${API_BASE}${path}`, opciones); }
    catch(e){ throw new Error('No se pudo conectar al backend (¿está corriendo uvicorn?)'); }
    if (!resp.ok){
      let detalle = `El servidor respondió ${resp.status}`;
      try{ const cuerpo = await resp.json(); if (cuerpo.detail) detalle = cuerpo.detail; }catch(e){}
      throw new Error(detalle);
    }
    if (resp.status === 204) return null;
    return resp.json();
  }
  function formatearMonto(v){ return Number(v||0).toLocaleString('es-CR', {minimumFractionDigits:2, maximumFractionDigits:2}); }
  function formatearFecha(iso){
    if (!iso) return '—';
    const [a,m,d] = iso.split('-');
    return `${d}/${m}/${a}`;
  }
  function formatearFechaHora(iso){
    if (!iso) return '';
    const d = new Date(iso);
    const pad = n => String(n).padStart(2,'0');
    let horas = d.getHours();
    const ampm = horas >= 12 ? 'p.m.' : 'a.m.';
    horas = horas % 12 || 12;
    return `${pad(d.getDate())}/${pad(d.getMonth()+1)}/${d.getFullYear()} ${horas}:${pad(d.getMinutes())} ${ampm}`;
  }

// ---------------- Modal genérico (aviso / confirmación / motivo) ----------------
  const modalOverlay = document.getElementById('modal-overlay');
  const modalTitulo = document.getElementById('modal-titulo');
  const modalMensaje = document.getElementById('modal-mensaje');
  const modalInput = document.getElementById('modal-input');
  const modalCancelar = document.getElementById('modal-cancelar');
  const modalAceptar = document.getElementById('modal-aceptar');
  function mostrarModal({titulo, mensaje, tipo, botonAceptar, colorAceptar, pedirTexto}){
    return new Promise(resolve=>{
      modalTitulo.textContent = titulo;
      modalMensaje.textContent = mensaje;
      modalAceptar.textContent = botonAceptar || 'Aceptar';
      modalAceptar.className = 'btn ' + (colorAceptar === 'danger' ? 'btn-danger' : 'btn-primary');
      modalCancelar.style.display = tipo === 'alert' ? 'none' : '';
      modalInput.style.display = pedirTexto ? '' : 'none';
      modalInput.value = '';
      function cerrar(valor){
        modalOverlay.classList.remove('abierto');
        modalAceptar.onclick = null; modalCancelar.onclick = null;
        document.removeEventListener('keydown', onKey);
        resolve(valor);
      }
      function onKey(e){ if (e.key === 'Escape') cerrar(false); }
      modalAceptar.onclick = ()=> cerrar(pedirTexto ? (modalInput.value.trim() || null) : true);
      modalCancelar.onclick = ()=> cerrar(false);
      document.addEventListener('keydown', onKey);
      modalOverlay.classList.add('abierto');
      setTimeout(()=> (pedirTexto ? modalInput : modalAceptar).focus(), 30);
    });
  }
  function modalAlert(mensaje, titulo='Aviso'){ return mostrarModal({titulo, mensaje, tipo:'alert', botonAceptar:'Entendido'}); }
  function modalPedirTexto(mensaje, titulo, botonAceptar='Confirmar', colorAceptar='danger'){
    return mostrarModal({titulo, mensaje, tipo:'confirm', botonAceptar, colorAceptar, pedirTexto:true});
  }

// ---------------- Catálogos de apoyo ----------------
  let VENDEDORES = [];
  let BODEGAS = [];
  let TIPOS_DESCUENTO = [];
  let CONDICIONES_VENTA = [];
  let CUENTAS_BANCARIAS = [];
  let ACTIVIDADES_EMPRESA = [];
  async function cargarCatalogos(){
    VENDEDORES = await llamarApi(`${API_VENDEDORES}?activa=true`);
    BODEGAS = await llamarApi(API_BODEGAS);
    if (BODEGAS && BODEGAS.items) BODEGAS = BODEGAS.items;
    TIPOS_DESCUENTO = await llamarApi(API_TIPOS_DESCUENTO);
    CONDICIONES_VENTA = await llamarApi(`${API_FACTURAS}/catalogo/condiciones-venta`);
    CUENTAS_BANCARIAS = await llamarApi(API_CUENTAS_BANCARIAS);
    ACTIVIDADES_EMPRESA = await llamarApi(`${API_ACTIVIDADES_EMPRESA}?activa=true`);

const optsVendedor = VENDEDORES.map(v=>`<option value="${v.id}">${v.nombre}</option>`).join('');
    document.getElementById('reg-vendedor').innerHTML = optsVendedor;

document.getElementById('reg-condicion-venta').innerHTML =
      CONDICIONES_VENTA.map(c=>`<option value="${c.codigo}">${c.nombre}</option>`).join('');

// Se puede Registrar sin elegir actividad (campo nullable, 102_codigo_actividad_emisor),
    // pero Aplicar la exige (backend y aquí) -- Hacienda la exige en cada comprobante y así
    // el vendedor ya se acostumbra, aunque el envío real a Hacienda todavía no sea obligatorio.
    // Sin actividades registradas todavía, no se puede aplicar hasta cargar al menos una
    // (Ventas › Configuración › Actividades económicas de la empresa).
    document.getElementById('reg-actividad-emisor').innerHTML = ACTIVIDADES_EMPRESA.length
      ? '<option value="">Seleccione una actividad…</option>' +
        ACTIVIDADES_EMPRESA.map(a=>`<option value="${a.codigo}">${a.codigo} — ${a.descripcion}</option>`).join('')
      : '<option value="">Sin actividades registradas -- ver Ventas › Configuración</option>';

const bodegasDeLaSucursal = SUCURSAL_ACTUAL ? BODEGAS.filter(b => b.sucursal_id === SUCURSAL_ACTUAL.id) : BODEGAS;
    document.getElementById('reg-bodega').innerHTML = bodegasDeLaSucursal.map(b=>`<option value="${b.id}">${b.nombre}</option>`).join('');
  }

// Anticipo y Nota de Crédito solo se pueden usar como medio de pago si están Aplicados y
  // todavía tienen saldo -- se recargan cada vez que se abre "Aplicar" para ese cliente, mismo
  // patrón que Cobro a Cliente (docs/diseno-cxc.md Capítulo 14, diseno-facturacion.md Cap.12).
  let ANTICIPOS_DISPONIBLES = [], NOTAS_DISPONIBLES = [];
  async function cargarDisponibles(clienteId){
    const [anticipos, notas] = await Promise.all([
      llamarApi(`${API_ANTICIPOS}?cliente_id=${clienteId}&estado=Aplicado`),
      llamarApi(`${API_NOTAS}?cliente_id=${clienteId}&estado=Aplicado&subtipo=al_cliente&tipo=credito`),
    ]);
    ANTICIPOS_DISPONIBLES = anticipos.filter(a => Number(a.saldo) > 0.009);
    NOTAS_DISPONIBLES = notas.filter(n => Number(n.saldo) > 0.009);
  }

// ---------------- Gate "requiere caja abierta" (incondicional, igual que Cobro a Cliente) ----------------
  let CAJA_ABIERTA_ID = null;
  async function verificarCajaAbierta(){
    const banner = document.getElementById('caja-estado');
    banner.style.display = '';
    banner.className = 'caja-estado';
    banner.textContent = 'Verificando caja abierta…';
    CAJA_ABIERTA_ID = null;
    if (!SUCURSAL_ACTUAL) return;
    try{
      const cajas = await llamarApi(`/ventas/cajas?sucursal_id=${SUCURSAL_ACTUAL.id}&estado=Abierta`);
      const propia = cajas.find(c => c.usuario_apertura === USUARIO_ACTUAL);
      if (propia){
        CAJA_ABIERTA_ID = propia.id;
        banner.className = 'caja-estado ok';
        banner.textContent = `Caja abierta: Caja ${propia.numero} — ${propia.terminal}`;
      } else {
        banner.className = 'caja-estado falta';
        banner.textContent = `${USUARIO_ACTUAL} no tiene una caja abierta en esta sucursal -- abra una caja antes de facturar.`;
      }
    } catch(e){
      banner.className = 'caja-estado falta';
      banner.textContent = 'No se pudo verificar el estado de caja.';
    }
  }

async function cargarActividadesReceptor(clienteId, seleccionar){
    actividadReceptorSel.disabled = true;
    actividadReceptorSel.innerHTML = '<option value="">Cargando…</option>';
    const actividades = await llamarApi(`${API_ACTIVIDADES_CLIENTE}?cliente_id=${clienteId}`);
    // CodigoActividadReceptor exige exactamente 6 caracteres en el XSD real de Hacienda -- una
    // actividad capturada con otro largo (código interno/legado) no es una opción válida acá.
    const validas = actividades.filter(a => a.codigo && a.codigo.length === 6 && a.activa);
    actividadReceptorSel.innerHTML = '<option value="">(ninguna)</option>' +
      validas.map(a=>`<option value="${a.codigo}">${a.codigo} — ${a.descripcion}</option>`).join('');
    actividadReceptorSel.disabled = validas.length === 0;
    if (validas.length === 0){
      actividadReceptorSel.innerHTML = '<option value="">Sin actividades de 6 caracteres registradas</option>';
    }
    if (seleccionar) actividadReceptorSel.value = seleccionar;
  }

// Bloqueo de crédito + monto vencido informativo (docs/diseno-cxc.md) -- se consulta al
  // elegir el cliente, nunca antes. El vencido es solo informativo (nunca bloquea nada por sí
  // solo, en líneas separadas por moneda igual que Antigüedad de Saldos); el bloqueo real de
  // crédito lo verifica también el servidor al Registrar/Guardar -- este aviso es para que el
  // usuario no llegue a intentarlo y se lleve la sorpresa hasta el final.
  let RESUMEN_CREDITO = null;
  async function cargarResumenCredito(clienteId){
    RESUMEN_CREDITO = null;
    try{ RESUMEN_CREDITO = await llamarApi(`${API_CLIENTES}/${clienteId}/resumen-credito`); }
    catch(e){ /* sin datos de crédito disponibles -- no bloquea la pantalla */ }
    pintarAvisoCredito();
  }
  function pintarAvisoCredito(){
    const div = document.getElementById('cliente-credito-aviso');
    if (!RESUMEN_CREDITO){ div.innerHTML = ''; return; }
    const partes = [];
    if (RESUMEN_CREDITO.vencido && RESUMEN_CREDITO.vencido.length){
      const detalle = RESUMEN_CREDITO.vencido.map(v=>`${v.moneda} ${formatearMonto(v.monto_vencido)}`).join(' / ');
      partes.push(`<div style="color:var(--amber-ink);">⚠ Tiene facturas vencidas: ${detalle}</div>`);
    }
    if (RESUMEN_CREDITO.bloqueado){
      partes.push(`<div style="color:var(--red-ink);">🔒 Cuenta bloqueada para crédito -- ${RESUMEN_CREDITO.motivo_bloqueo}. Sigue pudiendo comprar de contado.</div>`);
    }
    div.innerHTML = partes.join('');
  }

async function elegirCliente(c, actividadReceptorPrevia){
    clienteElegido = c;
    document.getElementById('cliente-elegido-nombre').textContent = c.nombre;
    clienteElegidoBox.classList.add('visible');
    clienteInput.style.display = 'none';
    await cargarActividadesReceptor(c.id, actividadReceptorPrevia);
    await cargarResumenCredito(c.id);
  }
  let clienteDebounce;
  clienteInput.addEventListener('input', ()=>{
    clearTimeout(clienteDebounce);
    clienteDebounce = setTimeout(async ()=>{
      const q = clienteInput.value.trim();
      if (q.length < 2){ clienteSug.classList.remove('abierta'); clienteSug.innerHTML=''; return; }
      posicionarSug(clienteInput, clienteSug);
      clienteSug.classList.add('abierta');
      clienteSug.innerHTML = `<div class="sug-cargando">Buscando…</div>`;
      const items = await llamarApi(`${API_CLIENTES}?nombre=${encodeURIComponent(q)}`);
      if (items.length === 0){ clienteSug.innerHTML = `<div class="sug-vacio">Ningún cliente contiene "${q}"</div>`; return; }
      clienteSug.innerHTML = items.map(c=>`<div class="sug-item" data-id="${c.id}">
        <span class="sug-nombre">${c.nombre}</span>
        ${c.identificacion_numero ? `<span class="sug-meta mono">${c.identificacion_numero}</span>` : ''}</div>`).join('');
      clienteSug.querySelectorAll('.sug-item').forEach((item, i)=>{
        item.addEventListener('mousedown', e=>{ e.preventDefault(); elegirCliente(items[i]); clienteSug.classList.remove('abierta'); });
      });
    }, 300);
  });
  clienteInput.addEventListener('blur', ()=> setTimeout(()=>{ clienteSug.classList.remove('abierta'); if (!clienteElegido) clienteInput.value = ''; }, 150));
  document.getElementById('cliente-cambiar').addEventListener('click', ()=>{
    clienteElegido = null;
    clienteElegidoBox.classList.remove('visible');
    clienteInput.style.display = '';
    clienteInput.value = '';
    clienteInput.focus();
    actividadReceptorSel.disabled = true;
    actividadReceptorSel.innerHTML = '<option value="">Elija un cliente primero</option>';
    RESUMEN_CREDITO = null;
    document.getElementById('cliente-credito-aviso').innerHTML = '';
  });

// ---------------- Condición de venta: mostrar/ocultar el detalle "Otros" ----------------
  document.getElementById('reg-condicion-venta').addEventListener('change', (e)=>{
    const c = CONDICIONES_VENTA.find(x=>x.codigo === e.target.value);
    document.querySelector('.campo-condicion-otro').style.display = (c && c.requiere_detalle_otro) ? '' : 'none';
  });

// ---------------- Líneas de la factura ----------------
  // {articulo_id, articulo_codigo, articulo_nombre, cabys, unidad_medida, cantidad,
  //  precio_unitario, tipo_descuento_id, porcentaje_descuento, tarifa_iva_codigo, tarifa_iva_porcentaje, observaciones}
  let LINEAS = [];

function calcularLinea(l){
    const subtotal = Math.round((l.cantidad * l.precio_unitario) * 100) / 100;
    const descuento = Math.round((subtotal * l.porcentaje_descuento / 100) * 100) / 100;
    const impuesto = Math.round(((subtotal - descuento) * l.tarifa_iva_porcentaje / 100) * 100) / 100;
    const total = subtotal - descuento + impuesto;
    return {subtotal, descuento, impuesto, total};
  }

tbody.innerHTML = LINEAS.map((l, i)=>{
      const c = calcularLinea(l);
      return `
        <tr data-idx="${i}">
          <td><button type="button" class="icon-btn danger btn-quitar-linea" title="Quitar"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 6 6 18M6 6l12 12"/></svg></button></td>
          <td>${l.articulo_codigo} — ${l.articulo_nombre}</td>
          <td class="muted-cell mono">${l.cabys || '—'}</td>
          <td class="num"><input type="number" class="ln-cantidad" min="0.01" step="0.01" value="${l.cantidad}"></td>
          <td class="muted-cell">${l.unidad_medida || 'Unid'}</td>
          <td class="num">
            <input type="number" class="ln-precio" min="0" step="0.01" value="${l.precio_unitario}">
            <div class="precio-advertencia"></div>
          </td>
          <td class="num celda-calculada mono">${formatearMonto(c.subtotal)}</td>
          <td><select class="ln-tipo-descuento">${opcionesDescuento}</select></td>
          <td class="num"><input type="number" class="ln-porcentaje" min="0" max="100" step="0.01" value="${l.porcentaje_descuento}"></td>
          <td class="num celda-calculada mono">${formatearMonto(c.descuento)}</td>
          <td class="num muted-cell" title="Tarifa de IVA del artículo -- no editable">${l.tarifa_iva_porcentaje}%</td>
          <td class="num celda-calculada mono">${formatearMonto(c.impuesto)}</td>
        </tr>
      `;
    }).join('');

tbody.querySelectorAll('select.ln-tipo-descuento').forEach((sel, i)=>{ sel.value = LINEAS[i].tipo_descuento_id || ''; });

tbody.querySelectorAll('tr').forEach(fila=>{
      const idx = Number(fila.dataset.idx);
      fila.querySelector('.btn-quitar-linea').addEventListener('click', ()=>{ LINEAS.splice(idx, 1); renderLineas(); });
      fila.querySelector('.ln-cantidad').addEventListener('input', e=>{ LINEAS[idx].cantidad = Number(e.target.value) || 0; recalcularFila(idx); });
      fila.querySelector('.ln-precio').addEventListener('input', e=>{ LINEAS[idx].precio_unitario = Number(e.target.value) || 0; recalcularFila(idx); verificarPrecioLinea(idx); });
      verificarPrecioLinea(idx);
      fila.querySelector('.ln-porcentaje').addEventListener('input', e=>{ LINEAS[idx].porcentaje_descuento = Number(e.target.value) || 0; recalcularFila(idx); });
      fila.querySelector('.ln-tipo-descuento').addEventListener('change', e=>{
        const opt = e.target.selectedOptions[0];
        LINEAS[idx].tipo_descuento_id = e.target.value ? Number(e.target.value) : null;
        LINEAS[idx].porcentaje_descuento = e.target.value ? Number(opt.dataset.porcentaje) : 0;
        fila.querySelector('.ln-porcentaje').value = LINEAS[idx].porcentaje_descuento;
        recalcularFila(idx);
      });
    });

recalcularTotalesFactura();
  }

function recalcularFila(idx){
    const fila = document.querySelector(`#lineas-lista tr[data-idx="${idx}"]`);
    if (!fila) return;
    const c = calcularLinea(LINEAS[idx]);
    const celdas = fila.querySelectorAll('.celda-calculada');
    celdas[0].textContent = formatearMonto(c.subtotal);
    celdas[1].textContent = formatearMonto(c.descuento);
    celdas[2].textContent = formatearMonto(c.impuesto);
    recalcularTotalesFactura();
  }

// Traducción de moneda del catálogo a la moneda del documento (diseno-facturacion.md) -- norma
  // real: si el cliente factura en dólares pero el artículo está estructurado en colones (o al
  // revés), los precios/costos hay que traducirlos, nunca cobrarlos en el número crudo del
  // catálogo. `articulos.precio_venta` SIEMPRE está en colones (confirmado con datos reales --
  // nunca tiene su propio campo de moneda); `costo_sin_impuesto` sí puede ser CRC o USD
  // (`moneda_costo`). La tasa que se usa es la REAL de este documento (`reg-tipo-cambio`, ya
  // congelada para el asiento) -- nunca una de referencia externa para convertir DENTRO de una
  // factura que ya tiene su propia tasa real. El tipo de cambio de referencia del BCCR
  // (TIPO_CAMBIO_REF) solo se usa como último recurso cuando el documento es en colones y no
  // existe ninguna tasa propia del documento para traducir un costo en dólares.
  function tipoCambioDocumento(){
    const val = Number(document.getElementById('reg-tipo-cambio').value);
    return val > 0 ? val : null;
  }
  function precioVentaEnMonedaDocumento(precioVentaCrc, monedaFactura){
    if (precioVentaCrc == null) return null;
    if (monedaFactura === 'CRC') return precioVentaCrc;
    const tc = tipoCambioDocumento();
    return tc ? precioVentaCrc / tc : null;
  }
  function costoEnMonedaDocumento(costoSinImpuesto, monedaCosto, monedaFactura){
    if (costoSinImpuesto == null) return null;
    if (monedaCosto === monedaFactura) return costoSinImpuesto;
    if (monedaFactura !== 'CRC'){
      const tc = tipoCambioDocumento();
      return tc ? costoSinImpuesto / tc : null;
    }
    return TIPO_CAMBIO_REF ? costoSinImpuesto * TIPO_CAMBIO_REF.valor_venta : null;
  }

// Advertencia en vivo (no bloqueante) contra las reglas propias del artículo -- descuento
  // máximo y utilidad mínima (migración 084) -- capturadas en el catálogo pero nunca antes
  // consultadas al vender. No inventa una regla nueva: solo avisa cuando el propio catálogo ya
  // trae un límite definido para ese artículo. Precio de catálogo y costo se traducen primero a
  // la moneda del documento -- comparar montos en monedas distintas sin convertir daría un
  // porcentaje sin sentido.
  function verificarPrecioLinea(idx){
    const fila = document.querySelector(`#lineas-lista tr[data-idx="${idx}"]`);
    if (!fila) return;
    const div = fila.querySelector('.precio-advertencia');
    const l = LINEAS[idx];
    const precio = Number(l.precio_unitario) || 0;
    const monedaFactura = document.getElementById('reg-moneda').value;
    const avisos = [];

if (monedaFactura !== 'CRC' && !tipoCambioDocumento()){
      avisos.push(`ℹ Capture el tipo de cambio de esta factura para comparar el precio/costo real del catálogo (en colones).`);
    } else {
      const precioCatalogo = precioVentaEnMonedaDocumento(l.precio_venta_catalogo, monedaFactura);
      if (l.descuento_maximo != null && precioCatalogo > 0){
        const descuentoReal = (precioCatalogo - precio) / precioCatalogo * 100;
        if (descuentoReal > l.descuento_maximo){
          avisos.push(`⚠ Descuento real ${descuentoReal.toFixed(1)}% supera el máximo permitido del artículo (${l.descuento_maximo}%).`);
        }
      }
      const costo = costoEnMonedaDocumento(l.costo_sin_impuesto, l.moneda_costo, monedaFactura);
      if (l.utilidad_minima != null && costo > 0){
        const margenReal = (precio - costo) / costo * 100;
        if (margenReal < l.utilidad_minima){
          avisos.push(`⚠ Utilidad real ${margenReal.toFixed(1)}% queda debajo de la mínima del artículo (${l.utilidad_minima}%).`);
        }
      }
    }

if (avisos.length){
      div.textContent = avisos.join(' ');
      div.classList.add('visible');
    } else {
      div.textContent = '';
      div.classList.remove('visible');
    }
  }

function recalcularTotalesFactura(){
    let subtotal = 0, descuento = 0, impuesto = 0;
    LINEAS.forEach(l=>{ const c = calcularLinea(l); subtotal += c.subtotal; descuento += c.descuento; impuesto += c.impuesto; });
    document.getElementById('tot-subtotal').textContent = formatearMonto(subtotal);
    document.getElementById('tot-descuento').textContent = formatearMonto(descuento);
    document.getElementById('tot-impuestos').textContent = formatearMonto(impuesto);
    document.getElementById('tot-total').textContent = formatearMonto(subtotal - descuento + impuesto);
    actualizarResumenUtilidad();
  }

// Resumen de utilidad de la venta en construcción (rescatado de una pantalla real del ERP
  // anterior, ver diseno-facturacion.md) -- misma fórmula que _margen_utilidad() de Ítems
  // (utilidad sobre costo, no sobre precio de venta), sumada sobre todas las líneas en vez de
  // una sola. Un artículo cuyo costo está en otra moneda (`articulos.moneda_costo`) se convierte
  // con el tipo de cambio de referencia capturado a mano (TIPO_CAMBIO_REF, diseno-facturacion.md
  // §18) para la fecha de la factura -- nunca inventa uno: si todavía no hay ninguno capturado
  // para esa fecha o antes, la línea se excluye igual que una sin costo, avisando por qué.
  function actualizarResumenUtilidad(){
    const div = document.getElementById('utilidad-resumen');
    if (LINEAS.length === 0){ div.classList.remove('visible'); return; }

// ---------------- Buscador rápido de ítem ----------------
  let itemElegidoQuickAdd = null;
  const itemInput = document.getElementById('item-input');
  const itemSug = document.getElementById('item-sugerencias');
  let itemDebounce;
  function bodegaElegidaId(){ return Number(document.getElementById('reg-bodega').value); }

itemInput.addEventListener('input', ()=>{
    itemElegidoQuickAdd = null;
    clearTimeout(itemDebounce);
    itemDebounce = setTimeout(async ()=>{
      const q = itemInput.value.trim();
      if (q.length < 2){ itemSug.classList.remove('abierta'); itemSug.innerHTML=''; return; }
      if (!bodegaElegidaId()){ itemSug.innerHTML = `<div class="sug-vacio">Elija primero la bodega</div>`; itemSug.classList.add('abierta'); return; }
      posicionarSug(itemInput, itemSug);
      itemSug.classList.add('abierta');
      itemSug.innerHTML = `<div class="sug-cargando">Buscando…</div>`;
      const datos = await llamarApi(`${API_FACTURAS}/catalogo/buscar-articulos?bodega_id=${bodegaElegidaId()}&texto=${encodeURIComponent(q)}`);
      const items = datos.items;
      if (items.length === 0){ itemSug.innerHTML = `<div class="sug-vacio">Ningún artículo contiene "${q}"</div>`; return; }
      itemSug.innerHTML = items.map(a=>`<div class="sug-item" data-id="${a.id}">
        <span class="sug-nombre">${a.nombre}</span>
        <span class="sug-meta mono">${a.codigo} — existencia ${formatearMonto(a.existencia)}</span></div>`).join('');
      itemSug.querySelectorAll('.sug-item').forEach((el, i)=>{
        el.addEventListener('mousedown', e=>{
          e.preventDefault();
          itemElegidoQuickAdd = items[i];
          itemInput.value = `${items[i].codigo} — ${items[i].nombre}`;
          itemSug.classList.remove('abierta');
        });
      });
    }, 300);
  });
  itemInput.addEventListener('blur', ()=> setTimeout(()=>{ itemSug.classList.remove('abierta'); if (!itemElegidoQuickAdd) itemInput.value=''; }, 150));

async function cargarBusqueda(){
    const bodegaId = bodegaElegidaId();
    const codigo = document.getElementById('busq-codigo').value.trim();
    const texto = document.getElementById('busq-texto').value.trim();
    if (!bodegaId) return;
    const params = new URLSearchParams({bodega_id: bodegaId, pagina: busqPagina, por_pagina: POR_PAGINA_BUSQUEDA});
    if (codigo) params.set('codigo', codigo);
    if (texto) params.set('texto', texto);
    const datos = await llamarApi(`${API_FACTURAS}/catalogo/buscar-articulos?${params.toString()}`);
    const tbody = document.getElementById('tbody-busqueda');
    if (datos.items.length === 0){
      tbody.innerHTML = `<tr><td colspan="4" class="muted-cell" style="text-align:center; padding:20px;">Sin resultados.</td></tr>`;
    } else {
      tbody.innerHTML = datos.items.map(a=>`
        <tr data-id="${a.id}">
          <td class="mono">${a.codigo}</td>
          <td>${a.nombre}</td>
          <td class="num mono">${formatearMonto(a.precio_con_impuesto)}</td>
          <td class="num mono">${formatearMonto(a.existencia)}</td>
        </tr>
      `).join('');
      tbody.querySelectorAll('tr').forEach(fila=>{
        fila.addEventListener('click', ()=>{
          tbody.querySelectorAll('tr').forEach(f=>f.classList.remove('fila-elegida'));
          fila.classList.add('fila-elegida');
          busqItemElegido = datos.items.find(x=>String(x.id) === fila.dataset.id);
          document.getElementById('busq-item-elegido').textContent = `${busqItemElegido.codigo} — ${busqItemElegido.nombre}`;
        });
      });
    }
    const desde = datos.total === 0 ? 0 : (busqPagina - 1) * POR_PAGINA_BUSQUEDA + 1;
    const hasta = Math.min(busqPagina * POR_PAGINA_BUSQUEDA, datos.total);
    document.getElementById('busq-resultados-info').textContent = `Resultados desde ${desde} a ${hasta} de ${datos.total}`;
    document.getElementById('busq-pag-actual').textContent = `Página ${busqPagina}`;
    document.getElementById('busq-pag-prev').disabled = busqPagina <= 1;
    document.getElementById('busq-pag-next').disabled = busqPagina * POR_PAGINA_BUSQUEDA >= datos.total;
  }

// ---------------- Historial de ítems facturados al cliente ----------------
  // Rescatado de una pantalla real del ERP anterior (docs/diseno-facturacion.md) -- qué le
  // gusta comprar este cliente, si se le da descuento especial, etc. Solo cuenta lo Aplicado;
  // %utilidad usa el costo histórico real a la fecha de esa venta, nunca el costo actual del
  // catálogo. Mismo patrón de paginación/filtros que la Búsqueda avanzada de arriba.
  const historialOverlay = document.getElementById('historial-overlay');
  let histPagina = 1;
  const POR_PAGINA_HISTORIAL = 50;

async function cargarHistorial(){
    if (!clienteElegido) return;
    const params = new URLSearchParams({pagina: histPagina, por_pagina: POR_PAGINA_HISTORIAL});
    const desde = document.getElementById('hist-desde').value;
    const hasta = document.getElementById('hist-hasta').value;
    const codigo = document.getElementById('hist-codigo').value.trim();
    const texto = document.getElementById('hist-texto').value.trim();
    if (desde) params.set('desde', desde);
    if (hasta) params.set('hasta', hasta);
    if (codigo) params.set('codigo', codigo);
    if (texto) params.set('texto', texto);
    const tbody = document.getElementById('tbody-historial');
    tbody.innerHTML = `<tr><td colspan="8" class="muted-cell" style="text-align:center; padding:20px;">Cargando…</td></tr>`;
    const datos = await llamarApi(`${API_FACTURAS}/historial-cliente/${clienteElegido.id}?${params.toString()}`);
    if (datos.items.length === 0){
      tbody.innerHTML = `<tr><td colspan="8" class="muted-cell" style="text-align:center; padding:20px;">Sin ítems facturados en este rango.</td></tr>`;
    } else {
      tbody.innerHTML = datos.items.map(it=>`
        <tr>
          <td class="mono">${it.tipo_comprobante}-${it.numero}</td>
          <td>${formatearFecha(it.fecha)}</td>
          <td class="mono">${it.codigo_interno}</td>
          <td>${it.item}</td>
          <td class="num mono">${formatearMonto(it.cantidad)}</td>
          <td class="num mono">${formatearMonto(it.precio_unitario)} ${it.moneda}</td>
          <td class="num mono">${formatearMonto(it.porcentaje_descuento)}</td>
          <td class="num mono">${it.utilidad_pct === null ? '—' : formatearMonto(it.utilidad_pct)}</td>
        </tr>
      `).join('');
    }
    const desdeN = datos.total === 0 ? 0 : (histPagina - 1) * POR_PAGINA_HISTORIAL + 1;
    const hastaN = Math.min(histPagina * POR_PAGINA_HISTORIAL, datos.total);
    document.getElementById('hist-resultados-info').textContent = `Resultados desde ${desdeN} a ${hastaN} de ${datos.total}`;
    document.getElementById('hist-pag-actual').textContent = `Página ${histPagina}`;
    document.getElementById('hist-pag-prev').disabled = histPagina <= 1;
    document.getElementById('hist-pag-next').disabled = histPagina * POR_PAGINA_HISTORIAL >= datos.total;
  }

// ---------------- Registrar / Modificar / Ver ----------------
  let facturaEnEdicion = null;
  const registroOverlay = document.getElementById('registro-overlay');

// Tipo de cambio de referencia (captura manual diaria, diseno-facturacion.md §18) -- el
  // vigente EN o ANTES de la fecha de la factura (el backend nunca inventa uno futuro). Se
  // recarga al abrir el formulario y cada vez que cambia la fecha; null si todavía no hay
  // ninguno capturado para esa fecha o antes -- en ese caso actualizarResumenUtilidad() excluye
  // las líneas en otra moneda igual que antes, en vez de asumir un valor.
  let TIPO_CAMBIO_REF = null;
  async function cargarTipoCambioReferencia(fecha){
    try{ TIPO_CAMBIO_REF = fecha ? await llamarApi(`/bancos/tipo-cambio-referencia/vigente?fecha=${fecha}`) : null; }
    catch(e){ TIPO_CAMBIO_REF = null; }
    sugerirTipoCambioFactura();
    renderLineas();
  }
  document.getElementById('reg-fecha').addEventListener('change', e=> cargarTipoCambioReferencia(e.target.value));

const monedaSel = document.getElementById('reg-moneda');
  monedaSel.addEventListener('change', ()=>{
    document.getElementById('reg-tipo-cambio-field').style.display = monedaSel.value === 'CRC' ? 'none' : '';
    sugerirTipoCambioFactura();
    // No re-precarga precios ya escritos en las líneas -- solo refresca los avisos en vivo y el
    // resumen de utilidad, que sí dependen de la moneda/tipo de cambio actuales.
    renderLineas();
  });
  document.getElementById('reg-tipo-cambio').addEventListener('input', renderLineas);

// Misma sugerencia editable de tipo_cambio_referencia (BCCR) ya construida en Compras
  // (docs/diseno-cxp.md) -- acá reutiliza TIPO_CAMBIO_REF, que ya se carga con cada cambio de
  // fecha para el resumen de utilidad, en vez de pedirlo al backend una segunda vez. Nunca
  // sobrescribe un valor ya escrito (a mano o cargado de una factura existente) -- solo rellena
  // si el campo está vacío.
  function sugerirTipoCambioFactura(){
    const aviso = document.getElementById('tipo-cambio-aviso');
    const input = document.getElementById('reg-tipo-cambio');
    aviso.textContent = '';
    if (monedaSel.value === 'CRC' || input.value) return;
    if (TIPO_CAMBIO_REF && TIPO_CAMBIO_REF.valor_venta){
      input.value = TIPO_CAMBIO_REF.valor_venta;
      aviso.textContent = `Sugerido por BCCR para el ${formatearFecha(TIPO_CAMBIO_REF.fecha)} -- corríjalo con el tipo de cambio real de esta factura si es distinto.`;
    }
  }

function habilitarCamposGenerales(habilitar){
    // reg-actividad-receptor NO se incluye acá a propósito -- su estado disabled/enabled lo
    // controla exclusivamente cargarActividadesReceptor() según haya o no cliente elegido.
    ['reg-tipo-comprobante','reg-fecha','reg-condicion-venta','reg-condicion-otro','reg-moneda',
     'reg-tipo-cambio','reg-actividad-emisor','reg-bodega','reg-vendedor','reg-observaciones'].forEach(id=>{
      document.getElementById(id).disabled = !habilitar;
    });
    document.getElementById('cliente-cambiar').style.display = habilitar ? '' : 'none';
  }

function abrirNuevo(){
    facturaEnEdicion = null;
    document.getElementById('registro-titulo').textContent = 'Nueva Factura';
    clienteElegido = null;
    clienteElegidoBox.classList.remove('visible');
    clienteInput.style.display = '';
    clienteInput.value = '';
    actividadReceptorSel.disabled = true;
    actividadReceptorSel.innerHTML = '<option value="">Elija un cliente primero</option>';
    RESUMEN_CREDITO = null;
    document.getElementById('cliente-credito-aviso').innerHTML = '';
    document.getElementById('reg-tipo-comprobante').value = 'FE';
    document.getElementById('reg-numero').value = '';
    document.getElementById('reg-fecha').value = new Date().toLocaleDateString('sv-SE');
    cargarTipoCambioReferencia(document.getElementById('reg-fecha').value);
    document.getElementById('reg-estado').value = 'Pendiente';
    document.getElementById('reg-condicion-venta').value = '01';
    document.getElementById('reg-condicion-otro').value = '';
    document.querySelector('.campo-condicion-otro').style.display = 'none';
    document.getElementById('reg-moneda').value = 'CRC';
    document.getElementById('reg-tipo-cambio-field').style.display = 'none';
    document.getElementById('reg-tipo-cambio').value = '';
    document.getElementById('tipo-cambio-aviso').textContent = '';
    // Nunca precargar una actividad por defecto -- cuál actividad económica del emisor ampara
    // esta venta es una decisión real de negocio, no algo que Fénix pueda adivinar eligiendo la
    // primera de la lista (mismo criterio de "nunca inventar" del resto del proyecto).
    document.getElementById('reg-actividad-emisor').value = '';
    document.getElementById('reg-bodega').value = BODEGAS.length ? document.getElementById('reg-bodega').options[0]?.value : '';
    document.getElementById('reg-vendedor').value = VENDEDORES[0] ? VENDEDORES[0].id : '';
    document.getElementById('reg-observaciones').value = '';
    LINEAS = [];
    renderLineas();
    habilitarCamposGenerales(true);
    document.getElementById('btn-guardar-registro').style.display = '';
    document.getElementById('btn-guardar-registro').textContent = 'Registrar';
    document.getElementById('btn-abrir-aplicar').style.display = 'none';
    document.getElementById('btn-abrir-anular').style.display = 'none';
    document.getElementById('btn-imprimir-registro').style.display = 'none';
    registroOverlay.classList.add('abierto');
    verificarCajaAbierta();
    setTimeout(()=> clienteInput.focus(), 30);
  }

async function abrirDetalle(id){
    const detalle = await llamarApi(`${API_FACTURAS}/${id}`);
    facturaEnEdicion = detalle;
    const soloLectura = detalle.estado !== 'Pendiente';
    document.getElementById('registro-titulo').textContent = `${soloLectura ? 'Factura' : 'Modificar Factura'} ${detalle.tipo_comprobante} #${detalle.numero} — ${detalle.estado}`;
    await elegirCliente({id: detalle.cliente_id, nombre: detalle.cliente_nombre}, detalle.codigo_actividad_receptor);
    document.getElementById('reg-tipo-comprobante').value = detalle.tipo_comprobante;
    document.getElementById('reg-numero').value = `${detalle.numero} (${detalle.consecutivo})`;
    document.getElementById('reg-fecha').value = detalle.fecha;
    cargarTipoCambioReferencia(detalle.fecha);
    document.getElementById('reg-estado').value = detalle.estado;
    document.getElementById('reg-condicion-venta').value = detalle.condicion_venta_codigo;
    document.getElementById('reg-condicion-otro').value = detalle.condicion_venta_otro || '';
    const cv = CONDICIONES_VENTA.find(c=>c.codigo === detalle.condicion_venta_codigo);
    document.querySelector('.campo-condicion-otro').style.display = (cv && cv.requiere_detalle_otro) ? '' : 'none';
    document.getElementById('reg-moneda').value = detalle.moneda;
    document.getElementById('reg-tipo-cambio-field').style.display = detalle.moneda === 'CRC' ? 'none' : '';
    document.getElementById('reg-tipo-cambio').value = detalle.moneda !== 'CRC' ? detalle.tipo_cambio : '';
    document.getElementById('tipo-cambio-aviso').textContent = '';
    document.getElementById('reg-actividad-emisor').value = detalle.codigo_actividad_emisor || '';
    document.getElementById('reg-vendedor').value = detalle.vendedor_id;
    document.getElementById('reg-observaciones').value = detalle.observaciones || '';

LINEAS = detalle.lineas.map(l=>({
      articulo_id: l.articulo_id, articulo_codigo: l.articulo_codigo, articulo_nombre: l.articulo_nombre,
      cabys: l.cabys, unidad_medida: l.unidad_medida_codigo,
      cantidad: Number(l.cantidad), precio_unitario: Number(l.precio_unitario),
      tipo_descuento_id: l.tipo_descuento_id, porcentaje_descuento: Number(l.porcentaje_descuento),
      tarifa_iva_codigo: l.tarifa_iva_codigo, tarifa_iva_porcentaje: Number(l.tarifa_iva),
      observaciones: l.observaciones,
      bodega_id: l.bodega_id,
    }));
    if (LINEAS[0]) document.getElementById('reg-bodega').value = LINEAS[0].bodega_id;
    renderLineas();

const editable = detalle.estado === 'Pendiente';
    habilitarCamposGenerales(editable);
    document.getElementById('reg-tipo-comprobante').disabled = true; // ya fijó Consecutivo/Clave
    document.getElementById('btn-guardar-registro').style.display = editable ? '' : 'none';
    document.getElementById('btn-guardar-registro').textContent = 'Guardar';
    document.getElementById('btn-agregar-item').style.display = editable ? '' : 'none';
    document.getElementById('btn-busqueda-avanzada').style.display = editable ? '' : 'none';

if (editable) verificarCajaAbierta(); else document.getElementById('caja-estado').style.display = 'none';
    registroOverlay.classList.add('abierto');
  }
  function cerrarRegistro(){ registroOverlay.classList.remove('abierto'); facturaEnEdicion = null; }
  document.getElementById('btn-cancelar-registro').addEventListener('click', cerrarRegistro);
  document.getElementById('btn-nuevo').addEventListener('click', abrirNuevo);

function construirLineasPayload(){
    const bodegaId = bodegaElegidaId();
    return LINEAS.map(l=>({
      articulo_id: l.articulo_id, bodega_id: bodegaId, cantidad: l.cantidad,
      unidad_medida_codigo: l.unidad_medida || 'Unid',
      precio_unitario: l.precio_unitario, tipo_descuento_id: l.tipo_descuento_id,
      porcentaje_descuento: l.porcentaje_descuento, tarifa_iva_codigo: l.tarifa_iva_codigo,
      observaciones: l.observaciones,
    }));
  }

const moneda = monedaSel.value;
    let tipoCambio = null;
    if (moneda !== 'CRC'){
      tipoCambio = Number(document.getElementById('reg-tipo-cambio').value);
      if (!tipoCambio || tipoCambio <= 0){ await modalAlert('El tipo de cambio es obligatorio para una factura en moneda extranjera.'); return; }
    }

if (!facturaEnEdicion && !CAJA_ABIERTA_ID){
      await modalAlert(`Se requiere que exista una caja abierta para facturar -- ${USUARIO_ACTUAL} no tiene ninguna caja Abierta en esta sucursal.`, 'Falta caja abierta');
      return;
    }

const cuerpo = {
      fecha,
      condicion_venta_codigo: condicionCodigo,
      condicion_venta_otro: condicionOtro || null,
      cliente_id: clienteElegido.id,
      vendedor_id: Number(document.getElementById('reg-vendedor').value),
      moneda, tipo_cambio: tipoCambio,
      codigo_actividad_emisor: document.getElementById('reg-actividad-emisor').value || null,
      codigo_actividad_receptor: actividadReceptorSel.value || null,
      observaciones: document.getElementById('reg-observaciones').value.trim() || null,
      lineas: construirLineasPayload(),
    };

// ---------------- Aplicar (motor de medios de pago múltiples, diseno-facturacion.md Cap.12) ----------------
  const aplicarOverlay = document.getElementById('aplicar-overlay');

// Cada medio de pago es su propia fila -- mismo patrón que Cobro a Cliente (cobros_ui.html
  // crearFilaMedio()), con Efectivo/Tarjeta también disponibles porque en Facturación el gate
  // "requiere caja abierta" ya está resuelto desde el registro (a diferencia de Cobros, donde
  // Efectivo/Tarjeta siguen pendientes de UI). La cuenta bancaria elegida ya trae su banco_id
  // embebido -- no hace falta un select de Banco aparte.
  function crearFilaMedioFactura(existente){
    const fila = document.createElement('div');
    fila.className = 'medio-fila';
    fila.innerHTML = `
      <div class="medio-fila-header">
        <select class="medio-tipo-select">
          <option value="Efectivo">Efectivo</option>
          <option value="Tarjeta">Tarjeta</option>
          <option value="Transferencia">Transferencia</option>
          <option value="SINPE">SINPE</option>
          <option value="Anticipo">Anticipo</option>
          <option value="NotaCredito">Nota de Crédito</option>
        </select>
        <button type="button" class="icon-btn danger medio-quitar" title="Quitar">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M18 6 6 18M6 6l12 12"/></svg>
        </button>
      </div>
      <div class="medio-campos medio-campos-transferencia" style="display:none;">
        <div class="form-field"><label>Cuenta bancaria</label><select class="medio-cuenta-bancaria"></select></div>
        <div class="form-field"><label>Comprobante</label><input type="text" class="medio-comprobante" placeholder="Número de comprobante"></div>
      </div>
      <div class="medio-campos medio-campos-anticipo una-columna" style="display:none;">
        <div class="form-field"><label>Anticipo disponible</label><select class="medio-anticipo-select"></select></div>
      </div>
      <div class="medio-campos medio-campos-nota una-columna" style="display:none;">
        <div class="form-field"><label>Nota de crédito disponible</label><select class="medio-nota-select"></select></div>
      </div>
      <div class="form-field"><label>Monto</label><input type="number" class="medio-monto" min="0.01" step="0.01"></div>
    `;

const tipoSelect = fila.querySelector('.medio-tipo-select');
    const camposTransf = fila.querySelector('.medio-campos-transferencia');
    const camposAntic = fila.querySelector('.medio-campos-anticipo');
    const camposNota = fila.querySelector('.medio-campos-nota');
    const cuentaSel = fila.querySelector('.medio-cuenta-bancaria');
    const anticipoSel = fila.querySelector('.medio-anticipo-select');
    const notaSel = fila.querySelector('.medio-nota-select');
    const montoInput = fila.querySelector('.medio-monto');

const cuentasDeLaMoneda = CUENTAS_BANCARIAS.filter(cb => cb.moneda === facturaEnEdicion.moneda);
    cuentaSel.innerHTML = cuentasDeLaMoneda.length
      ? cuentasDeLaMoneda.map(cb=>`<option value="${cb.id}">${cb.banco_nombre} — ${cb.numero}</option>`).join('')
      : `<option value="">No hay cuentas bancarias en ${facturaEnEdicion.moneda}</option>`;

if (existente){
      tipoSelect.value = existente.tipo_medio_pago;
      if (existente.tipo_medio_pago === 'Transferencia' || existente.tipo_medio_pago === 'SINPE'){
        cuentaSel.value = existente.cuenta_bancaria_id;
        fila.querySelector('.medio-comprobante').value = existente.comprobante || '';
      } else if (existente.tipo_medio_pago === 'Anticipo'){
        if (existente.anticipo_cliente_id && !ANTICIPOS_DISPONIBLES.some(a=>a.id === existente.anticipo_cliente_id)){
          anticipoSel.insertAdjacentHTML('afterbegin', `<option value="${existente.anticipo_cliente_id}">Anticipo ya elegido</option>`);
        }
        anticipoSel.value = existente.anticipo_cliente_id;
      } else if (existente.tipo_medio_pago === 'NotaCredito'){
        if (existente.nota_cliente_id && !NOTAS_DISPONIBLES.some(n=>n.id === existente.nota_cliente_id)){
          notaSel.insertAdjacentHTML('afterbegin', `<option value="${existente.nota_cliente_id}">Nota ya elegida</option>`);
        }
        notaSel.value = existente.nota_cliente_id;
      }
      montoInput.value = existente.monto;
    }
    actualizarVisibilidad();
    return fila;
  }
  document.getElementById('btn-agregar-medio-aplicar').addEventListener('click', ()=>{
    document.getElementById('medios-lista-aplicar').appendChild(crearFilaMedioFactura(null));
    recalcularCuadreAplicar();
  });

const fila = crearFilaMedioFactura(null);
    document.getElementById('medios-lista-aplicar').appendChild(fila);
    const tipoSelect = fila.querySelector('.medio-tipo-select');
    tipoSelect.value = tipo;
    tipoSelect.dispatchEvent(new Event('change'));
    fila.querySelector(tipo === 'Anticipo' ? '.medio-anticipo-select' : '.medio-nota-select').value = id;
    fila.querySelector('.medio-monto').value = monto.toFixed(2);
    recalcularCuadreAplicar();
    fila.querySelector('.medio-monto').focus();
  });

let medios_pago = null;
    if (!esCredito){
      const filas = Array.from(document.querySelectorAll('#medios-lista-aplicar .medio-fila'));
      if (filas.length === 0){ await modalAlert('Debe indicar al menos un medio de pago.'); return; }
      medios_pago = [];
      for (const fila of filas){
        const tipo = fila.querySelector('.medio-tipo-select').value;
        const monto = Number(fila.querySelector('.medio-monto').value) || 0;
        if (monto <= 0){ await modalAlert('El monto de cada medio de pago debe ser mayor a cero.'); return; }

if (tipo === 'Transferencia' || tipo === 'SINPE'){
          const cuentaBancariaId = Number(fila.querySelector('.medio-cuenta-bancaria').value);
          const comprobante = fila.querySelector('.medio-comprobante').value.trim();
          const cuenta = CUENTAS_BANCARIAS.find(cb => cb.id === cuentaBancariaId);
          if (!cuentaBancariaId || !cuenta){ await modalAlert(`Debe elegir una cuenta bancaria en cada segmento de ${tipo}.`); return; }
          if (!comprobante){ await modalAlert(`El comprobante es obligatorio en cada segmento de ${tipo}.`); return; }
          medios_pago.push({tipo_medio_pago: tipo, monto, banco_id: cuenta.banco_id, cuenta_bancaria_id: cuentaBancariaId, comprobante});
        } else if (tipo === 'Anticipo'){
          const anticipoId = Number(fila.querySelector('.medio-anticipo-select').value);
          if (!anticipoId){ await modalAlert('Debe elegir el anticipo en cada segmento de Anticipo.'); return; }
          medios_pago.push({tipo_medio_pago: tipo, monto, anticipo_cliente_id: anticipoId});
        } else if (tipo === 'NotaCredito'){
          const notaId = Number(fila.querySelector('.medio-nota-select').value);
          if (!notaId){ await modalAlert('Debe elegir la nota en cada segmento de Nota de Crédito.'); return; }
          medios_pago.push({tipo_medio_pago: tipo, monto, nota_cliente_id: notaId});
        } else {
          medios_pago.push({tipo_medio_pago: tipo, monto});
        }
      }
      const sumaMedios = Math.round(medios_pago.reduce((s,m)=>s+m.monto,0) * 100) / 100;
      const total = Math.round(Number(facturaEnEdicion.total) * 100) / 100;
      if (Math.abs(sumaMedios - total) >= 0.01){
        await modalAlert(`Los medios de pago suman ₡${formatearMonto(sumaMedios)}, pero el total de la factura es ₡${formatearMonto(total)}.`, 'No cuadra');
        return;
      }
    }

boton.disabled = true; boton.textContent = 'Aplicando…';
    try{
      if (!esCredito){
        await llamarApi(`${API_FACTURAS}/${facturaEnEdicion.id}/medios-pago`, {
          method:'PUT', headers:{'Content-Type':'application/json'},
          body: JSON.stringify({medios_pago, modificado_por: USUARIO_ACTUAL}),
        });
      }
      await llamarApi(`${API_FACTURAS}/${facturaEnEdicion.id}/aplicar`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({aplicado_por: USUARIO_ACTUAL})});
      aplicarOverlay.classList.remove('abierto');
      mostrarToast('✓ Factura aplicada');
      cerrarRegistro();
      await buscar();
    } catch(e){
      await modalAlert(e.message, 'No se pudo aplicar');
    } finally {
      boton.disabled = false; boton.textContent = 'Aplicar';
    }
  });

// ---------------- Listado ----------------
  function pillEstado(estado){
    const clases = {Pendiente:'pill-pendiente', Aplicado:'pill-aplicado', Anulado:'pill-anulado'};
    const nombres = {Pendiente:'Pendiente', Aplicado:'Aplicada', Anulado:'Anulada'};
    return `<span class="pill ${clases[estado]||''}">${nombres[estado]||estado}</span>`;
  }

async function buscar(){
    const params = new URLSearchParams();
    if (SUCURSAL_ACTUAL) params.set('sucursal_id', SUCURSAL_ACTUAL.id);
    const numero = document.getElementById('f-numero').value;
    if (numero) params.set('numero', numero);
    const tipo = document.getElementById('f-tipo-comprobante').value;
    if (tipo) params.set('tipo_comprobante', tipo);
    const fd = document.getElementById('f-fecha-desde').value;
    if (fd) params.set('fecha_desde', fd);
    const fh = document.getElementById('f-fecha-hasta').value;
    if (fh) params.set('fecha_hasta', fh);
    const estado = document.getElementById('f-estado').value;
    if (estado) params.set('estado', estado);

['f-numero','f-tipo-comprobante','f-fecha-desde','f-fecha-hasta','f-estado'].forEach(id=>{
    document.getElementById(id).addEventListener('change', buscar);
  });
  document.getElementById('btn-refrescar').addEventListener('click', async (ev)=>{
    const icono = ev.currentTarget.querySelector('svg');
    icono.classList.add('girando');
    await buscar();
    icono.classList.remove('girando');
  });

// ---------------- Sucursal activa (mismo patrón "pull" del resto del proyecto) ----------------
  function solicitarSucursal(){
    if (window.parent === window) return;
    window.parent.postMessage({tipo:'fenix-solicitar-sucursal'}, '*');
  }
  window.addEventListener('message', (ev)=>{
    if (ev.data && ev.data.tipo === 'fenix-sucursal'){
      SUCURSAL_ACTUAL = {id: ev.data.sucursal_id, nombre: ev.data.sucursal_nombre};
      cargarCatalogos().then(buscar).catch(()=>{});
    }
  });

(async function init(){
    solicitarSucursal();
    await cargarCatalogos().catch(()=>{});
    await buscar();
  })();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Cajas</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }

*{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:14.5px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,"Liberation Mono",monospace; font-variant-numeric:tabular-nums;}
  h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-weight:600; text-wrap:balance; margin:0;}
  button{font-family:inherit; font-size:inherit; color:inherit;}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;}

.app{max-width:1100px; margin:0 auto; padding:28px 24px 64px;}

.filters{
    display:flex; flex-wrap:wrap; gap:14px; align-items:end;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow);
  }
  .field{display:flex; flex-direction:column; gap:5px;}
  .field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted);}
  .field input, .field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:7px 9px; color:var(--ink); font-size:13.5px; min-width:0;
  }
  .field select{min-width:130px;}
  .field.numero input{width:100px;}
  .field.fecha input{width:145px;}
  .filters .spacer{flex:1;}
  .btn{
    border-radius:7px; border:1px solid var(--line-strong); background:var(--surface);
    color:var(--ink); padding:8px 14px; cursor:pointer; font-weight:600; font-size:13.5px;
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
    transition:transform .08s ease, filter .08s ease;
  }
  .btn:hover{border-color:var(--ink-muted);}
  .btn:active{transform:scale(0.96); filter:brightness(0.94);}
  .btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:8px 10px;}
  .btn-ghost:hover{color:var(--ink); background:var(--surface-2);}
  .btn[disabled]{opacity:.4; cursor:not-allowed; transform:none;}
  @keyframes girar{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .girando{animation:girar .7s linear infinite;}
  @media (prefers-reduced-motion: reduce){ .girando{animation:none;} }

.row-actions{display:flex; gap:4px;}
  .icon-btn{
    border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
    width:30px; height:30px; border-radius:7px; display:inline-flex; align-items:center;
    justify-content:center; cursor:pointer; transition:transform .08s ease, filter .08s ease;
  }
  .icon-btn:hover{color:var(--ink); border-color:var(--ink-muted);}
  .icon-btn:active{transform:scale(0.90);}
  .icon-btn[disabled]{opacity:.3; cursor:not-allowed; transform:none;}
  .icon-btn svg{width:15px; height:15px;}

.empty-state{padding:48px 20px; text-align:center; color:var(--ink-muted);}
  .empty-state b{color:var(--ink); display:block; margin-bottom:4px; font-size:15px;}

.foot-note{font-size:12px; color:var(--ink-muted); margin-top:12px;}

.modal-box.form-box{max-width:440px;}
  .modal-box.cerrar-box{max-width:760px; max-height:88vh; overflow-y:auto;}
  .cerrar-resumen{
    display:grid; grid-template-columns:1fr 1fr; gap:6px 20px;
    background:var(--surface-2); border:1px solid var(--line); border-radius:8px;
    padding:12px 14px; margin-bottom:16px; font-size:13px;
  }
  .cerrar-resumen .fila{display:flex; justify-content:space-between; gap:10px;}
  .cerrar-resumen .etq{color:var(--ink-muted);}
  .cerrar-resumen .val{font-weight:600; font-variant-numeric:tabular-nums;}
  .cerrar-resumen .destacado .val{font-size:14.5px; color:var(--accent);}

h4.cerrar-subtitulo{
    font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);
    margin:18px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line);
  }
  .arqueo-scroll{display:flex; width:100%; max-width:100%; overflow-x:auto; margin-bottom:8px;}
  table.arqueo{flex:1 1 auto; min-width:0; width:auto; border-collapse:collapse;}
  table.arqueo th{
    text-align:left; font-size:10.5px; text-transform:uppercase; color:var(--ink-muted);
    padding:5px 6px; border-bottom:1px solid var(--line-strong);
  }
  table.arqueo th.num, table.arqueo td.num{text-align:right;}
  table.arqueo td{padding:5px 8px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle;}
  table.arqueo input.cantidad{
    width:74px; text-align:right; background:var(--bg); border:1px solid var(--line-strong);
    border-radius:6px; padding:5px 7px; color:var(--ink); font-size:13.5px;
  }
  table.arqueo td.subtotal{font-weight:600; font-size:14.5px; font-variant-numeric:tabular-nums;}
  table.arqueo tr.total td{font-weight:700; border-top:2px solid var(--ink); border-bottom:none; padding-top:8px;}
  table.arqueo tr.total td.num{font-size:15px; color:var(--accent);}

.valores-scroll{display:flex; width:100%; max-width:100%; overflow-x:auto; margin-bottom:4px;}
  table.valores{flex:1 1 auto; min-width:0; width:auto; border-collapse:collapse;}
  table.valores th{
    text-align:left; font-size:10.5px; text-transform:uppercase; color:var(--ink-muted);
    padding:5px 8px; border-bottom:1px solid var(--line-strong);
  }
  table.valores th.num, table.valores td.num{text-align:right;}
  table.valores td{padding:6px 8px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle;}
  table.valores td.calculado{font-variant-numeric:tabular-nums; color:var(--ink-muted);}
  table.valores input.indicado{
    width:110px; text-align:right; background:var(--bg); border:1px solid var(--line-strong);
    border-radius:6px; padding:5px 7px; color:var(--ink); font-size:13.5px; font-variant-numeric:tabular-nums;
  }
  table.valores td.indicado-efectivo{font-weight:600; font-variant-numeric:tabular-nums;}
  table.valores tr.diferencia input.indicado{border-color:var(--amber-line); color:var(--amber-ink);}
  table.valores tr.diferencia td.indicado-efectivo{color:var(--amber-ink);}
  table.valores tr.total td{font-weight:700; border-top:2px solid var(--ink); border-bottom:none; padding-top:8px;}
  table.valores tr.total td.num{font-size:14.5px; color:var(--accent);}
  .valores-nota{font-size:12px; color:var(--ink-muted); margin:-2px 0 12px;}

.deposito-fila{
    display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap;
  }
  .deposito-fila select{flex:1.6; min-width:160px;}
  .deposito-fila input.monto{width:120px;}
  .deposito-fila input.comprobante{flex:1; min-width:120px;}
  .deposito-fila select, .deposito-fila input{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:6px;
    padding:7px 9px; color:var(--ink); font-size:13px;
  }
  .deposito-fila .quitar{
    border:none; background:transparent; color:var(--ink-muted); cursor:pointer;
    width:26px; height:26px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center;
  }
  .deposito-fila .quitar:hover{color:var(--red-ink); background:var(--red-bg);}

.cuadre-cierre{
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    padding:10px 14px; border-radius:8px; margin-top:10px; font-size:13.5px; font-weight:600;
    background:var(--surface-2); border:1px solid var(--line);
  }
  .cuadre-cierre.ok{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
  .cuadre-cierre.faltante-deposito{background:var(--amber-bg); color:var(--amber-ink); border-color:var(--amber-line);}

.modal-box.reabrir-box{max-width:520px;}
  .reabrir-resumen .destacado .val.faltante{color:var(--red-ink);}
  .reabrir-resumen .destacado .val.sobrante{color:var(--accent);}
  .reabrir-aviso{
    font-size:12.5px; color:var(--ink-muted); background:var(--surface-2); border:1px solid var(--line);
    border-radius:8px; padding:10px 12px; margin-bottom:14px; line-height:1.5;
  }
  .form-field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;}
  .form-field label{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted);}
  .form-field input, .form-field select{
    background:var(--bg); border:1px solid var(--line-strong); border-radius:7px;
    padding:8px 10px; color:var(--ink); font-size:13.5px; width:100%;
  }
  .form-field input[disabled], .form-field select[disabled]{opacity:.6; cursor:not-allowed;}
  .form-audit{
    font-size:12px; color:var(--ink-muted); border-top:1px solid var(--line);
    margin-top:4px; padding-top:12px; line-height:1.7;
  }

<div class="topbar">
    <div class="brand">
      <h1>Fénix</h1><span class="sep">/</span>
      <span class="empresa">Sistemas Rodríguez y Asociados — Cajas</span>
    </div>
    <div class="crumbs"><b>Ventas</b> / Gestión / Cajas</div>
  </div>

<div class="filters">
    <div class="field numero">
      <label for="f-numero">Número</label>
      <input type="number" id="f-numero" min="1" placeholder="ej. 2011">
    </div>
    <div class="field fecha">
      <label for="f-desde">Fecha desde</label>
      <input type="date" id="f-desde">
    </div>
    <div class="field fecha">
      <label for="f-hasta">Fecha hasta</label>
      <input type="date" id="f-hasta">
    </div>
    <div class="field">
      <label for="f-usuario">Usuario de apertura</label>
      <input type="text" id="f-usuario" placeholder="ej. cajerosra2" style="width:150px;">
    </div>
    <div class="field">
      <label for="f-estado">Estado</label>
      <select id="f-estado">
        <option value="">Todos</option>
        <option value="Abierta">Abierta</option>
        <option value="Cerrada">Cerrada</option>
      </select>
    </div>
    <div class="spacer"></div>
    <button class="btn btn-ghost no-print" id="btn-refrescar" title="Refrescar">
      <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
      Refrescar
    </button>
    <a class="btn btn-ghost no-print" id="btn-volver" href="fenix_app.html" data-nav-shell="inicio">‹ Volver</a>
    <button class="btn btn-primary no-print" id="btn-abrir-caja">+ Abrir caja</button>
  </div>

<div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Número</th>
          <th>Terminal</th>
          <th>Estado</th>
          <th>Fecha de registro</th>
          <th>Usuario apertura</th>
          <th>Observaciones</th>
        </tr>
      </thead>
      <tbody id="tbody-registros"></tbody>
    </table>
    <div class="empty-state" id="empty-state" style="display:none;">
      <b>No hay cajas con estos filtros</b>
      Ajusta los filtros, o límpialos para ver todo el historial de la sucursal.
    </div>
  </div>

<div class="foot-note" id="foot-note">Cargando…</div>

</div>

<div class="modal-overlay" id="modal-overlay">
  <div class="modal-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="modal-titulo"></h3>
    <p class="modal-mensaje" id="modal-mensaje"></p>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="modal-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="modal-aceptar">Aceptar</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="form-overlay">
  <div class="modal-box form-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="form-titulo">Abrir caja</h3>
    <div class="form-field">
      <label for="form-terminal">Terminal</label>
      <select id="form-terminal">
        <option value="Caja 1">Caja 1</option>
        <option value="Caja 2">Caja 2</option>
        <option value="Caja 3">Caja 3</option>
        <option value="Caja 4">Caja 4</option>
        <option value="Caja 5">Caja 5</option>
        <option value="Caja 6">Caja 6</option>
        <option value="Caja 7">Caja 7</option>
        <option value="Caja 8">Caja 8</option>
        <option value="Caja 9">Caja 9</option>
      </select>
    </div>
    <div class="form-field">
      <label for="form-monto-inicial">Monto inicial</label>
      <input type="number" id="form-monto-inicial" min="0" step="0.01" value="0">
    </div>
    <div class="form-field">
      <label for="form-observaciones">Observaciones</label>
      <input type="text" id="form-observaciones" placeholder="opcional">
    </div>
    <div class="form-audit" id="form-audit" style="display:none;"></div>
    <div class="modal-acciones">
      <button class="btn btn-ghost" id="form-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="form-guardar">Abrir caja</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="cerrar-overlay">
  <div class="modal-box cerrar-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="cerrar-titulo">Cerrar caja</h3>

<div class="cerrar-resumen">
      <div class="fila"><span class="etq">Fondo fijo (no participa del cuadre)</span><span class="val" id="cerrar-fondo-fijo">—</span></div>
    </div>

<h4 class="cerrar-subtitulo">Valores</h4>
    <div class="valores-scroll">
      <table class="valores">
        <thead>
          <tr>
            <th>Medio de pago</th>
            <th class="num">Monto calculado por el sistema</th>
            <th class="num">Monto indicado por el usuario</th>
          </tr>
        </thead>
        <tbody id="valores-medios-pago"></tbody>
        <tfoot>
          <tr class="total">
            <td>TOTAL</td>
            <td class="num" id="valores-total-calculado">0,00 CRC</td>
            <td class="num" id="valores-total-indicado">0,00 CRC</td>
          </tr>
        </tfoot>
      </table>
    </div>
    <p class="valores-nota">Efectivo toma el total del arqueo de abajo -- los demás medios se confirman contra el datáfono o el banco. Una diferencia aquí no bloquea el cierre, solo avisa.</p>

<h4 class="cerrar-subtitulo">Arqueo por denominación</h4>
    <div class="arqueo-scroll">
      <table class="arqueo">
        <thead><tr><th>Denominación</th><th class="num">Cantidad</th><th class="num">Subtotal</th></tr></thead>
        <tbody id="arqueo-billetes"></tbody>
        <tbody id="arqueo-monedas"></tbody>
        <tfoot>
          <tr class="total"><td colspan="2">Efectivo contado</td><td class="num" id="arqueo-total">0,00 CRC</td></tr>
        </tfoot>
      </table>
    </div>

<h4 class="cerrar-subtitulo">Depósitos bancarios</h4>
    <div id="depositos-lista"></div>
    <button class="btn btn-ghost" id="btn-agregar-deposito" type="button">+ Agregar depósito</button>

<div class="cuadre-cierre" id="cuadre-cierre">Total depositado: ₡0,00 — Efectivo contado: ₡0,00</div>

<div class="form-field" style="margin-top:14px;">
      <label for="cerrar-observaciones">Observaciones</label>
      <input type="text" id="cerrar-observaciones" placeholder="opcional">
    </div>

<div class="modal-acciones">
      <button class="btn btn-ghost" id="cerrar-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="cerrar-guardar">Cerrar caja</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="reabrir-overlay">
  <div class="modal-box reabrir-box" role="dialog" aria-modal="true">
    <h3 class="modal-titulo" id="reabrir-titulo">Reabrir caja</h3>

<div class="reabrir-aviso">Esta caja se reabrirá para corregir su cierre. El asiento del cierre anterior se anulará (nunca se edita) y, al volver a cerrar, se generará un asiento nuevo con los datos corregidos.</div>

<div class="cerrar-resumen reabrir-resumen">
      <div class="fila"><span class="etq">Cerrada por</span><span class="val" id="reabrir-usuario-cierre">—</span></div>
      <div class="fila"><span class="etq">Fecha de cierre</span><span class="val" id="reabrir-fecha-cierre">—</span></div>
      <div class="fila"><span class="etq">Efectivo esperado</span><span class="val" id="reabrir-esperado">—</span></div>
      <div class="fila"><span class="etq">Depositado en ese cierre</span><span class="val" id="reabrir-depositado">—</span></div>
      <div class="fila destacado"><span class="etq">Diferencia de ese cierre</span><span class="val" id="reabrir-diferencia">—</span></div>
    </div>

<div class="form-field">
      <label for="reabrir-motivo">Motivo de la reapertura</label>
      <input type="text" id="reabrir-motivo" placeholder="ej. depósito registrado incompleto, corregir monto">
    </div>

<div class="modal-acciones">
      <button class="btn btn-ghost" id="reabrir-cancelar">Cancelar</button>
      <button class="btn btn-primary" id="reabrir-guardar">Reabrir caja</button>
    </div>
  </div>
</div>

<div id="fenix-toast" class="fenix-toast"><span id="fenix-toast-texto">✓ Guardado</span></div>
<script>
(function(){
  const API_BASE = 'https://fenix.sistemasrodriguez.com';
  const API_PATH = '/ventas/cajas';
  const USUARIO_ACTUAL = 'contador'; // no hay sesión/login todavía -- placeholder de trazabilidad
  let SUCURSAL_ACTUAL = null;

function cerrar(valor){
        modalOverlay.classList.remove('abierto');
        modalAceptar.onclick = null;
        modalCancelar.onclick = null;
        document.removeEventListener('keydown', onKey);
        resolve(valor);
      }
      function onKey(e){ if (e.key === 'Escape') cerrar(false); }
      modalAceptar.onclick = ()=> cerrar(true);
      modalCancelar.onclick = ()=> cerrar(false);
      document.addEventListener('keydown', onKey);

// ---------------- Modal "Abrir caja" / "Ver" ----------------
  const formOverlay = document.getElementById('form-overlay');
  const formTitulo = document.getElementById('form-titulo');
  const formTerminal = document.getElementById('form-terminal');
  const formMontoInicial = document.getElementById('form-monto-inicial');
  const formObservaciones = document.getElementById('form-observaciones');
  const formAudit = document.getElementById('form-audit');
  const formGuardar = document.getElementById('form-guardar');
  const formCancelar = document.getElementById('form-cancelar');

function abrirModalNueva(){
    formTitulo.textContent = 'Abrir caja';
    formTerminal.value = 'Caja 1';
    formTerminal.disabled = false;
    formMontoInicial.value = 0;
    formMontoInicial.disabled = false;
    formObservaciones.value = '';
    formObservaciones.disabled = false;
    formAudit.style.display = 'none';
    formGuardar.style.display = '';
    formGuardar.textContent = 'Abrir caja';
    formCancelar.textContent = 'Cancelar';
    formOverlay.classList.add('abierto');
    setTimeout(()=> formTerminal.focus(), 30);
  }

function cerrarFormulario(){ formOverlay.classList.remove('abierto'); }
  formCancelar.onclick = cerrarFormulario;
  document.addEventListener('keydown', e=>{ if (e.key === 'Escape' && formOverlay.classList.contains('abierto')) cerrarFormulario(); });

formGuardar.onclick = async ()=>{
    if (!SUCURSAL_ACTUAL){ await modalAlert('No se detectó la sucursal de trabajo. Vuelva al menú principal y elíjala.'); return; }
    const cuerpo = {
      sucursal_id: SUCURSAL_ACTUAL.id,
      terminal: formTerminal.value,
      monto_inicial: Number(formMontoInicial.value) || 0,
      observaciones: formObservaciones.value.trim() || null,
      usuario_apertura: USUARIO_ACTUAL,
    };
    formGuardar.disabled = true;
    formGuardar.textContent = 'Abriendo…';
    try{
      await llamarApi(API_PATH, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(cuerpo)});
      mostrarToast('✓ Caja abierta'); cerrarFormulario();
      await cargar();
    } catch(e){
      await modalAlert(e.message, 'No se pudo abrir la caja');
    } finally {
      formGuardar.disabled = false;
      formGuardar.textContent = 'Abrir caja';
    }
  };

function pillEstado(estado){
    return estado === 'Abierta'
      ? `<span class="pill pill-abierta">Abierta</span>`
      : `<span class="pill pill-cerrada">Cerrada</span>`;
  }

const ICONO_VER = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z"/><circle cx="12" cy="12" r="3"/></svg>`;
  const ICONO_CERRAR = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>`;
  const ICONO_REABRIR = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 9.5-2.5"/></svg>`;
  const ICONO_IMPRIMIR = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M6 9V3h12v6M6 18H4a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-2M6 14h12v7H6z"/></svg>`;

function filaHtml(r){
    return `
      <tr data-id="${r.id}">
        <td>
          <div class="row-actions">
            <button class="icon-btn" title="Ver" data-accion="ver" data-id="${r.id}">${ICONO_VER}</button>
            <button class="icon-btn" title="Cerrar caja" data-accion="cerrar" data-id="${r.id}" ${r.estado === 'Abierta' ? '' : 'disabled'}>${ICONO_CERRAR}</button>
            <button class="icon-btn" title="Reabrir caja" data-accion="reabrir" data-id="${r.id}" ${r.estado === 'Cerrada' ? '' : 'disabled'}>${ICONO_REABRIR}</button>
            <button class="icon-btn" title="Imprimir" data-accion="imprimir" data-id="${r.id}">${ICONO_IMPRIMIR}</button>
          </div>
        </td>
        <td class="mono">${r.numero}</td>
        <td>${r.terminal}</td>
        <td>${pillEstado(r.estado)}</td>
        <td class="mono">${formatearFechaHora(r.fecha_apertura)}</td>
        <td>${r.usuario_apertura}</td>
        <td>${r.observaciones ? r.observaciones : `<span class="muted-cell">—</span>`}</td>
      </tr>
    `;
  }

function construirQuery(){
    const params = new URLSearchParams();
    if (SUCURSAL_ACTUAL) params.set('sucursal_id', SUCURSAL_ACTUAL.id);
    const numero = document.getElementById('f-numero').value;
    const desde = document.getElementById('f-desde').value;
    const hasta = document.getElementById('f-hasta').value;
    const usuario = document.getElementById('f-usuario').value.trim();
    const estado = document.getElementById('f-estado').value;
    if (numero) params.set('numero', numero);
    if (desde) params.set('fecha_desde', desde);
    if (hasta) params.set('fecha_hasta', hasta);
    if (usuario) params.set('usuario_apertura', usuario);
    if (estado) params.set('estado', estado);
    return params.toString();
  }

async function cargar(){
    if (!SUCURSAL_ACTUAL) return; // espera a que llegue la sucursal activa antes de la primera carga
    tbody.innerHTML = `<tr><td colspan="7" style="text-align:center; padding:32px; color:var(--ink-muted);">Cargando…</td></tr>`;
    emptyState.style.display = 'none';
    try{
      REGISTROS = await llamarApi(`${API_PATH}?${construirQuery()}`);
      if (REGISTROS.length === 0){
        tbody.innerHTML = '';
        emptyState.style.display = 'block';
      } else {
        tbody.innerHTML = REGISTROS.map(filaHtml).join('');
      }
      footNote.textContent = `${REGISTROS.length} caja${REGISTROS.length === 1 ? '' : 's'} — ${SUCURSAL_ACTUAL.nombre}`;
    } catch(e){
      tbody.innerHTML = `<tr><td colspan="7" style="text-align:center; padding:32px; color:var(--red-ink);">${e.message}</td></tr>`;
      footNote.textContent = '';
    }
  }

tbody.addEventListener('click', (ev)=>{
    const btnVer = ev.target.closest('button[data-accion="ver"]');
    if (btnVer){
      const registro = REGISTROS.find(r=>r.id === Number(btnVer.dataset.id));
      if (registro) abrirModalVer(registro);
      return;
    }
    const btnImprimir = ev.target.closest('button[data-accion="imprimir"]');
    if (btnImprimir){
      window.open(`${API_BASE}${API_PATH}/${btnImprimir.dataset.id}/pdf`, '_blank');
      return;
    }
    const btnCerrar = ev.target.closest('button[data-accion="cerrar"]');
    if (btnCerrar && !btnCerrar.disabled){
      const registro = REGISTROS.find(r=>r.id === Number(btnCerrar.dataset.id));
      if (registro) abrirModalCerrar(registro);
      return;
    }
    const btnReabrir = ev.target.closest('button[data-accion="reabrir"]');
    if (btnReabrir && !btnReabrir.disabled){
      const registro = REGISTROS.find(r=>r.id === Number(btnReabrir.dataset.id));
      if (registro) abrirModalReabrir(registro);
    }
  });

['f-numero','f-desde','f-hasta','f-estado'].forEach(id=>{
    document.getElementById(id).addEventListener('change', cargar);
  });
  document.getElementById('f-usuario').addEventListener('input', ()=>{
    clearTimeout(window.__debounceCajas);
    window.__debounceCajas = setTimeout(cargar, 350);
  });

document.getElementById('btn-abrir-caja').addEventListener('click', abrirModalNueva);

// ---------------- Modal "Cerrar caja" (arqueo por denominación + depósitos) ----------------
  const DENOMINACIONES_BILLETES = [50000, 20000, 10000, 5000, 2000, 1000];
  const DENOMINACIONES_MONEDAS = [500, 100, 50, 25, 10, 5];

const cerrarOverlay = document.getElementById('cerrar-overlay');
  const cerrarTitulo = document.getElementById('cerrar-titulo');
  const cerrarFondoFijo = document.getElementById('cerrar-fondo-fijo');
  const valoresMediosPago = document.getElementById('valores-medios-pago');
  const valoresTotalCalculado = document.getElementById('valores-total-calculado');
  const valoresTotalIndicado = document.getElementById('valores-total-indicado');
  const arqueoBilletes = document.getElementById('arqueo-billetes');
  const arqueoMonedas = document.getElementById('arqueo-monedas');
  const arqueoTotal = document.getElementById('arqueo-total');
  const depositosLista = document.getElementById('depositos-lista');
  const cuadreCierre = document.getElementById('cuadre-cierre');
  const cerrarObservaciones = document.getElementById('cerrar-observaciones');
  const cerrarGuardar = document.getElementById('cerrar-guardar');
  const cerrarCancelar = document.getElementById('cerrar-cancelar');

let CAJA_A_CERRAR = null;
  let CUENTAS_BANCARIAS_CRC = [];
  let VALORES_CALCULADOS = {};

// Orden y etiquetas de "Valores" (docs/diseno-cajas.md §9) -- Efectivo no es editable, su
  // "indicado" es siempre el total del arqueo de abajo (misma info, no se pide dos veces).
  const MEDIOS_VALORES = [
    {tipo: 'Efectivo', etiqueta: 'Efectivo', editable: false},
    {tipo: 'Tarjeta', etiqueta: 'Tarjeta', editable: true},
    {tipo: 'Transferencia', etiqueta: 'Transferencia / SINPE', editable: true},
    {tipo: 'Anticipo', etiqueta: 'Anticipo de cliente', editable: true},
    {tipo: 'NotaCredito', etiqueta: 'Nota de crédito', editable: true},
  ];

function formatearMonto(n){
    return `₡${(Number(n) || 0).toLocaleString('es-CR', {minimumFractionDigits:2, maximumFractionDigits:2})}`;
  }

function filaArqueoHtml(valor){
    const etiqueta = valor >= 1000 ? `₡${(valor/1000).toLocaleString('es-CR')},000` : `₡${valor}`;
    return `
      <tr data-valor="${valor}">
        <td>${etiqueta}</td>
        <td class="num"><input type="number" class="cantidad" min="0" step="1" value="0" data-valor="${valor}"></td>
        <td class="num subtotal" data-subtotal="${valor}">0,00</td>
      </tr>
    `;
  }

// Recalcula el TOTAL de "Valores" y marca en ámbar la fila donde lo indicado no calza con lo
  // calculado -- puramente visual, nunca bloquea el cierre (decisión ya confirmada por el
  // usuario). `efectivoContado` es el mismo total que ya arroja el arqueo por denominación.
  function actualizarValoresMediosPago(efectivoContado){
    const spanEfectivo = document.getElementById('valor-indicado-efectivo');
    if (spanEfectivo) spanEfectivo.textContent = formatearMonto(efectivoContado);

function totalDepositado(){
    let total = 0;
    depositosLista.querySelectorAll('.deposito-fila .monto').forEach(input=>{
      total += Number(input.value) || 0;
    });
    return total;
  }

async function abrirModalCerrar(caja){
    CAJA_A_CERRAR = caja;
    cerrarTitulo.textContent = `Cerrar caja ${caja.numero} — ${caja.terminal}`;
    cerrarObservaciones.value = '';
    arqueoBilletes.innerHTML = DENOMINACIONES_BILLETES.map(filaArqueoHtml).join('');
    arqueoMonedas.innerHTML = DENOMINACIONES_MONEDAS.map(filaArqueoHtml).join('');
    depositosLista.innerHTML = '';
    calcularEfectivoContado();
    cerrarOverlay.classList.add('abierto');
    cerrarGuardar.disabled = true;
    try{
      const [resumen, cuentas] = await Promise.all([
        llamarApi(`${API_PATH}/${caja.id}/resumen-cierre`),
        llamarApi(`/bancos/cuentas-bancarias`),
      ]);
      cerrarFondoFijo.textContent = formatearMonto(resumen.monto_inicial);
      VALORES_CALCULADOS = resumen.valores_medios_pago || {};
      valoresMediosPago.innerHTML = MEDIOS_VALORES.map(filaValorHtml).join('');
      actualizarValoresMediosPago(0);
      CUENTAS_BANCARIAS_CRC = cuentas.filter(c=> c.moneda === 'CRC' && c.activa);
      agregarFilaDeposito();
      cerrarGuardar.disabled = false;
      setTimeout(()=>{ const primero = arqueoBilletes.querySelector('input.cantidad'); if (primero) primero.focus(); }, 30);
    } catch(e){
      cerrarOverlay.classList.remove('abierto');
      await modalAlert(e.message, 'No se pudo cargar el resumen de cierre');
    }
  }

function cerrarModalCerrar(){ cerrarOverlay.classList.remove('abierto'); CAJA_A_CERRAR = null; }
  cerrarCancelar.onclick = cerrarModalCerrar;
  document.addEventListener('keydown', e=>{ if (e.key === 'Escape' && cerrarOverlay.classList.contains('abierto')) cerrarModalCerrar(); });

cerrarGuardar.onclick = async ()=>{
    if (!CAJA_A_CERRAR) return;
    const efectivoContado = calcularEfectivoContado();
    const depositos = [];
    let errorFilas = false;
    depositosLista.querySelectorAll('.deposito-fila').forEach(fila=>{
      const cuentaBancariaId = Number(fila.querySelector('.deposito-cuenta').value);
      const monto = Number(fila.querySelector('.monto').value) || 0;
      const comprobante = fila.querySelector('.comprobante').value.trim();
      if (monto > 0){
        if (!cuentaBancariaId || !comprobante) errorFilas = true;
        depositos.push({cuenta_bancaria_id: cuentaBancariaId, monto, comprobante});
      }
    });
    if (errorFilas){
      await modalAlert('Cada depósito con monto necesita cuenta bancaria y número de comprobante.', 'Datos incompletos');
      return;
    }
    const valoresMedios = [];
    document.querySelectorAll('#valores-medios-pago input.indicado').forEach(input=>{
      valoresMedios.push({tipo_medio_pago: input.dataset.tipo, monto_indicado: Number(input.value) || 0});
    });
    const cuerpo = {
      efectivo_contado: efectivoContado,
      depositos,
      valores_medios_pago: valoresMedios,
      observaciones: cerrarObservaciones.value.trim() || null,
      cerrado_por: USUARIO_ACTUAL,
    };
    cerrarGuardar.disabled = true;
    cerrarGuardar.textContent = 'Cerrando…';
    try{
      await llamarApi(`${API_PATH}/${CAJA_A_CERRAR.id}/cerrar`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(cuerpo)});
      mostrarToast('✓ Caja cerrada');
      cerrarModalCerrar();
      await cargar();
    } catch(e){
      if (e.message.includes('coincidencia real')){
        const confirmar = await mostrarModal({titulo:'Comprobante repetido', mensaje:e.message, tipo:'confirm', botonAceptar:'Sí, es una coincidencia real'});
        if (confirmar){
          try{
            await llamarApi(`${API_PATH}/${CAJA_A_CERRAR.id}/cerrar`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({...cuerpo, confirma_repeticion:true})});
            mostrarToast('✓ Caja cerrada');
            cerrarModalCerrar();
            await cargar();
          } catch(e2){ await modalAlert(e2.message, 'No se pudo cerrar la caja'); }
        }
      } else {
        await modalAlert(e.message, 'No se pudo cerrar la caja');
      }
    } finally {
      cerrarGuardar.disabled = false;
      cerrarGuardar.textContent = 'Cerrar caja';
    }
  };

// ---------------- Modal "Reabrir caja" ----------------
  const reabrirOverlay = document.getElementById('reabrir-overlay');
  const reabrirTitulo = document.getElementById('reabrir-titulo');
  const reabrirUsuarioCierre = document.getElementById('reabrir-usuario-cierre');
  const reabrirFechaCierre = document.getElementById('reabrir-fecha-cierre');
  const reabrirEsperado = document.getElementById('reabrir-esperado');
  const reabrirDepositado = document.getElementById('reabrir-depositado');
  const reabrirDiferencia = document.getElementById('reabrir-diferencia');
  const reabrirMotivo = document.getElementById('reabrir-motivo');
  const reabrirGuardar = document.getElementById('reabrir-guardar');
  const reabrirCancelar = document.getElementById('reabrir-cancelar');
  let CAJA_A_REABRIR = null;

async function abrirModalReabrir(caja){
    CAJA_A_REABRIR = caja;
    reabrirTitulo.textContent = `Reabrir caja ${caja.numero} — ${caja.terminal}`;
    reabrirMotivo.value = '';
    reabrirUsuarioCierre.textContent = '—';
    reabrirFechaCierre.textContent = '—';
    reabrirEsperado.textContent = '—';
    reabrirDepositado.textContent = '—';
    reabrirDiferencia.textContent = '—';
    reabrirDiferencia.className = 'val';
    reabrirOverlay.classList.add('abierto');
    reabrirGuardar.disabled = true;
    try{
      const resumen = await llamarApi(`${API_PATH}/${caja.id}/resumen-reapertura`);
      reabrirUsuarioCierre.textContent = resumen.usuario_cierre || '—';
      reabrirFechaCierre.textContent = formatearFechaHora(resumen.fecha_cierre) || '—';
      reabrirEsperado.textContent = formatearMonto(resumen.efectivo_esperado);
      reabrirDepositado.textContent = formatearMonto(resumen.monto_depositado_anterior);
      const diferencia = resumen.diferencia_anterior;
      if (Math.abs(diferencia) < 0.01){
        reabrirDiferencia.textContent = `${formatearMonto(0)} (cuadrado)`;
      } else if (diferencia < 0){
        reabrirDiferencia.textContent = `Faltante ${formatearMonto(Math.abs(diferencia))}`;
        reabrirDiferencia.className = 'val faltante';
      } else {
        reabrirDiferencia.textContent = `Sobrante ${formatearMonto(diferencia)}`;
        reabrirDiferencia.className = 'val sobrante';
      }
      reabrirGuardar.disabled = false;
      setTimeout(()=> reabrirMotivo.focus(), 30);
    } catch(e){
      reabrirOverlay.classList.remove('abierto');
      await modalAlert(e.message, 'No se pudo cargar el resumen de reapertura');
    }
  }

function cerrarModalReabrir(){ reabrirOverlay.classList.remove('abierto'); CAJA_A_REABRIR = null; }
  reabrirCancelar.onclick = cerrarModalReabrir;
  document.addEventListener('keydown', e=>{ if (e.key === 'Escape' && reabrirOverlay.classList.contains('abierto')) cerrarModalReabrir(); });

reabrirGuardar.onclick = async ()=>{
    if (!CAJA_A_REABRIR) return;
    const motivo = reabrirMotivo.value.trim();
    if (!motivo){
      await modalAlert('Indique el motivo de la reapertura.', 'Falta el motivo');
      reabrirMotivo.focus();
      return;
    }
    const cuerpo = { motivo, reabierto_por: USUARIO_ACTUAL };
    reabrirGuardar.disabled = true;
    reabrirGuardar.textContent = 'Reabriendo…';
    try{
      await llamarApi(`${API_PATH}/${CAJA_A_REABRIR.id}/reabrir`, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(cuerpo)});
      mostrarToast('✓ Caja reabierta');
      cerrarModalReabrir();
      await cargar();
    } catch(e){
      await modalAlert(e.message, 'No se pudo reabrir la caja');
    } finally {
      reabrirGuardar.disabled = false;
      reabrirGuardar.textContent = 'Reabrir caja';
    }
  };

// Navegación a otra pantalla dentro del shell (ver nota en el resto de pantallas de Fénix).
  document.querySelectorAll('[data-nav-shell]').forEach(enlace=>{
    enlace.addEventListener('click', (ev)=>{
      if (window.parent === window) return;
      ev.preventDefault();
      window.parent.postMessage({tipo:'fenix-nav', destino: enlace.dataset.navShell}, '*');
    });
  });

// Sucursal activa: la pide al shell (patrón "pull" ya usado en el resto de Ventas) en vez
  // de esperar pasivamente una difusión que puede haber salido antes de que este iframe
  // tuviera su listener listo.
  function solicitarSucursal(){
    window.parent.postMessage({tipo:'fenix-solicitar-sucursal'}, '*');
  }
  window.addEventListener('message', (ev)=>{
    if (ev.data && ev.data.tipo === 'fenix-sucursal'){
      SUCURSAL_ACTUAL = {id: ev.data.sucursal_id, nombre: ev.data.sucursal_nombre};
      cargar();
    }
  });

solicitarSucursal();
})();
</script>

// Nombre real de la empresa activa (docs/diseno-configuracion.md Capítulo 9) -- mismo patrón
  // "pull" que el token, pero además actualiza en el sitio el <span class="empresa"> del
  // topbar de CADA pantalla (todas comparten ese mismo marcado: "NombreFijo — Título de la
  // pantalla"), sin tocar ninguno de los ~45 archivos *_ui.html uno por uno. Bug real
  // reportado: el usuario armando el catálogo de una empresa nueva ("Tromso") veía "Sistemas
  // Rodríguez" fijo en el encabezado de Cuentas Contables -- ese texto nunca había sido
  // dinámico en ninguna pantalla. `empresa_nombre` que llega por postMessage ya es el nombre a
  // mostrar (nombre_comercial si existe, si no el legal -- resuelto server-side, nunca aquí).
  window.FENIX_EMPRESA_ID = null;
  window.FENIX_EMPRESA_NOMBRE = null;
  function _fenixActualizarTopbarEmpresa(){
    var el = document.querySelector('.topbar .empresa');
    if (!el || !window.FENIX_EMPRESA_NOMBRE) return;
    var texto = el.textContent;
    var idx = texto.indexOf('\u2014'); // em dash "—" que separa "Empresa — Título de pantalla"
    var sufijo = idx !== -1 ? texto.slice(idx) : '';
    el.textContent = sufijo ? (window.FENIX_EMPRESA_NOMBRE + ' ' + sufijo) : window.FENIX_EMPRESA_NOMBRE;
  }
  window.addEventListener('message', function(ev){
    if (!ev.data || ev.data.tipo !== 'fenix-empresa') return;
    window.FENIX_EMPRESA_ID = ev.data.empresa_id;
    window.FENIX_EMPRESA_NOMBRE = ev.data.empresa_nombre;
    _fenixActualizarTopbarEmpresa();
  });
  if (window.parent !== window) window.parent.postMessage({tipo:'fenix-solicitar-empresa'}, '*');
  if (document.readyState === 'loading'){
    document.addEventListener('DOMContentLoaded', _fenixActualizarTopbarEmpresa);
  } else {
    _fenixActualizarTopbarEmpresa();
  }
})();
</script>
<meta charset="UTF-8">
<title>Fénix — Notas a Cliente</title>
<style>
  :root{
    --bg:#F2F4EF; --surface:#FFFFFF; --surface-2:#EAEEE5;
    --ink:#1B2420; --ink-muted:#5B685F; --line:#D8DED2; --line-strong:#C3CBBB;
    --accent:#1F5C3F; --accent-ink:#F2F4EF; --accent-soft:#E4EDE6;
    --amber-ink:#7A5209; --amber-bg:#FBEFD6; --amber-line:#E7CE95;
    --red-ink:#8C2A2A; --red-bg:#F8E3E1; --red-line:#E7B9B4;
    --grey-ink:#5B685F; --grey-bg:#E9ECE5;
    --focus:#2E7D53;
    --shadow: 0 1px 2px rgba(20,30,20,.06), 0 4px 14px rgba(20,30,20,.05);
  }
  :root[data-theme="dark"]{
    --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
    --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
    --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
    --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
    --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
    --grey-ink:#9AA492; --grey-bg:#232B1D;
    --focus:#6CC393;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#12180F; --surface:#182014; --surface-2:#1F281A;
      --ink:#E7EEE4; --ink-muted:#98A78F; --line:#2A3324; --line-strong:#37432E;
      --accent:#4E9E75; --accent-ink:#0C120D; --accent-soft:#1D3226;
      --amber-ink:#E8C77A; --amber-bg:#3A2E10; --amber-line:#5A481A;
      --red-ink:#E79E9E; --red-bg:#3A1B1A; --red-line:#5C2726;
      --grey-ink:#9AA492; --grey-bg:#232B1D;
      --focus:#6CC393;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }