/* ============================================================
   GestioNet · Listados densos (v1)
   Unifica las ~14 pantallas de listado (facturas, clientes, stock,
   remitos, recibos, cheques, proveedores, etc.) sin tocar sus
   markups: todas comparten el esqueleto
     .page > .page-header + .table-wrap > table
   Misma dirección que el chasis de comprobante y el dashboard:
   cabecera compacta, controles chicos, filas finas, cero adornos.
   Se carga DESPUÉS de dashboard-v1.css.
   Rollback: quitar el <link> de este archivo en index.html.
   ============================================================ */

/* ---------- Cabecera de pantalla: barra, no bloque ---------- */
.page > .page-header{
  margin-bottom:14px !important;padding-bottom:11px !important;
  gap:12px !important;align-items:center;flex-wrap:wrap;
}
.page > .page-header h2{
  font-size:17px !important;font-weight:800;letter-spacing:-.2px;line-height:1.2;
}
/* el subtítulo pasa a renglón fino debajo del título, sin comerse altura */
.page > .page-header p{font-size:11.5px;color:var(--text3);margin:2px 0 0;line-height:1.3}
.page > .page-header .page-header-icon{display:none !important}
.page-header-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-left:auto}

/* controles de la cabecera, todos a la misma altura */
.page-header-actions .btn,
.page-header-actions .filter-select,
.page-header-actions select,
.page-header-actions input[type=text],
.page-header-actions input[type=date],
.page-header-actions .search-box input{
  height:34px !important;font-size:12.5px !important;
  padding:0 12px !important;border-radius:8px !important;
}
.page-header-actions .filter-select,
.page-header-actions select{padding:0 30px 0 11px !important;background-position:right 10px center !important}
.page-header-actions .btn{font-weight:700;display:inline-flex;align-items:center}
.page-header-actions .search-box input{min-width:210px}

/* ---------- Tablas de listado ---------- */
.table-wrap{border-radius:12px !important;overflow-x:auto}
.table-wrap table{width:100%;border-collapse:collapse}
.table-wrap thead th{
  padding:9px 14px !important;font-size:10.5px !important;
  font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--text3);background:var(--bg4) !important;
  border-bottom:1px solid var(--border) !important;white-space:nowrap;
}
.table-wrap tbody td{
  padding:9px 14px !important;font-size:12.5px !important;
  border-bottom:1px solid var(--border-soft);
}
.table-wrap tbody tr:last-child td{border-bottom:0}
.table-wrap tbody tr:hover{background:var(--bg4)}
/* números y montos siempre alineados y tabulares */
.table-wrap td[style*="text-align:right"],
.table-wrap th[style*="text-align:right"],
.table-wrap td.num,.table-wrap th.num{font-variant-numeric:tabular-nums}

/* botones de acción dentro de las filas: chicos y discretos */
.table-wrap tbody td .btn-sm,
.table-wrap tbody td .btn-icon{height:28px;padding:0 9px;font-size:12px;border-radius:7px}

/* ---------- Barras de filtros ----------
   Los controles traen padding y font-size inline, así que hay que pisarlos
   con !important. Scopeado a las barras de filtro para no tocar formularios. */
#fact-filters,#rep-filtros{
  gap:7px !important;padding:9px 11px !important;border-radius:10px !important;
}
#fact-filters input,#fact-filters select,#fact-filters .search-box input,
#rep-filtros input,#rep-filtros select,
.page > div[style*="flex"] > .filter-select{
  height:32px !important;padding:0 10px !important;font-size:12.5px !important;
  border-radius:8px !important;
}
#fact-filters select,#rep-filtros select,
.page > div[style*="flex"] > .filter-select{
  padding:0 28px 0 10px !important;background-position:right 9px center !important;
}
#fact-filters .search-box{display:flex;align-items:center}

/* barra de navegación de facturas (Ir a N°, ◀ ▶, buscador) */
.page > div[style*="align-items:center"] > .btn-sm{height:30px;padding:0 10px}

/* ---------- Franja de totales / resumen sobre las tablas ---------- */
.caja-grid{gap:0 !important;display:flex !important;flex-wrap:wrap;
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  padding:4px;box-shadow:var(--shadow-xs);margin-bottom:12px}
.caja-grid > *{flex:1 1 160px;border-right:1px solid var(--border-soft)}
.caja-grid > *:last-child{border-right:none}

/* ---------- Catálogo de reportes: índice, no tarjetas ----------
   Las .rep-card traen los estilos inline, hay que pisarlos con !important. */
#page-listados .rep-card{
  padding:9px 12px !important;border-radius:9px !important;
  background:var(--bg2) !important;border:1px solid var(--border) !important;
  box-shadow:none !important;transition:border-color .15s,background .15s !important;
}
#page-listados .rep-card:hover{
  border-color:var(--accent) !important;background:var(--bg4) !important;
  transform:none !important;box-shadow:none !important;
}
#page-listados .rep-card > div:first-child{display:none !important}  /* hueco del ícono */
#page-listados .rep-card b{font-size:12.5px !important;font-weight:700}
#page-listados .rep-card > div:last-child{font-size:10.5px !important;margin-top:1px !important;line-height:1.3}
#page-listados h3{
  font-size:11px !important;font-weight:800;color:var(--text3);
  text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px !important;
}

/* ---------- Botones de acción dentro de las filas ---------- */
#page-ventas-pendientes tbody .btn{
  height:28px;padding:0 11px;font-size:12px;border-radius:7px;font-weight:700;
}

/* ---------- Totales al pie de los reportes ---------- */
.rep-tabla tfoot td{
  padding:10px 14px !important;background:var(--bg4);
  border-top:2px solid var(--border);font-size:12.5px;
}
.rep-tabla tfoot b{color:var(--text);font-weight:800}
/* subtotal por grupo (ventas por artículo) */
.rep-tabla tr.rep-subtotal td{
  background:var(--bg3);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);padding:7px 14px !important;font-size:12px;
}
.rep-tabla tr.rep-subtotal b{color:var(--text);font-weight:800}
.rep-tabla tr.rep-subtotal + tr td{padding-top:12px !important}

/* ---------- Constructor de listados personalizados ---------- */
.lc-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin-bottom:4px}
.lc-row > .cmp-f{flex:0 1 190px;min-width:150px}
.lc-row input,.lc-row select{height:32px !important;padding:0 10px !important;font-size:12.5px !important;border-radius:8px !important}
.lc-row select{padding:0 28px 0 10px !important;background-position:right 9px center !important}
.lc-sec{
  font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--text3);margin:14px 0 7px;
}
.lc-chips{display:flex;flex-wrap:wrap;gap:6px}
.lc-chip{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none;
  padding:6px 11px;border:1px solid var(--border);border-radius:8px;
  background:var(--bg2);font-size:12.5px;font-weight:600;color:var(--text2);
  transition:border-color .15s,background .15s,color .15s;
}
.lc-chip:hover{border-color:var(--accent)}
.lc-chip.on{border-color:var(--accent);background:var(--accent-soft,#f1ecfe);color:var(--accent2);font-weight:700}
.lc-chip input{margin:0;width:13px;height:13px;accent-color:var(--accent)}
.lc-chip .lc-t{font-size:9.5px;font-weight:700;color:var(--text4);text-transform:uppercase;letter-spacing:.4px}
.lc-chip.on .lc-t{color:var(--accent2);opacity:.7}

/* ---------- Tabs de sección ---------- */
.tabs-bar{gap:4px}
.tabs-bar .tab,.tabs-bar button{font-size:12.5px;padding:7px 14px;border-radius:8px}

/* fila de carga rápida de valores en el recibo (mismo patrón que .nf-payrow) */
.rec-payrow{border-top:1px solid var(--border)}

/* ---------- Caja ---------- */
.caja-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;
}
.caja-toolbar input[type=text]{
  flex:1 1 260px;max-width:360px;height:32px;padding:0 11px;
  border:1px solid var(--border);border-radius:8px;
  background:var(--bg2);font-size:12.5px;
}
.caja-toolbar #caja-buscar-info{font-size:11.5px;color:var(--text3);font-weight:600}
.caja-toolbar .cmp-seg > div{padding:6px 13px;font-size:12px}

/* las tarjetas de saldo pierden la franja de color de arriba (adorno) */
#caja-saldos .caja-mon-card::before{display:none !important}
#caja-saldos .caja-mon-card{
  border:0 !important;border-right:1px solid var(--border-soft) !important;
  border-radius:0 !important;box-shadow:none !important;background:transparent !important;
  padding:11px 16px !important;
}
#caja-saldos .caja-mon-card:last-child{border-right:none !important}
#caja-saldos .mon-label{
  font-size:10.5px !important;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--text3) !important;margin-bottom:4px;
}
#caja-saldos .mon-val{font-size:19px !important;font-weight:800;font-variant-numeric:tabular-nums}

/* franja de resumen del período */
#caja-resumen{margin-bottom:14px}
#caja-resumen .ss-verde b{color:var(--green)}
#caja-resumen .ss-rojo  b{color:var(--red)}

/* ---------- Caja: panel de estado y arqueo ---------- */
.caja-estado{margin-bottom:12px}
.caja-estado .cmp-tbl td{padding:8px 14px}
.caja-pill{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;
  font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;
}
.caja-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.caja-pill.ok  {background:rgba(16,185,129,.12);color:#059669}
.caja-pill.warn{background:rgba(245,158,11,.14);color:#b45309}
.caja-pill.off {background:var(--bg3);color:var(--text3)}

/* conteo de billetes del arqueo */
.arqueo-conteo{
  border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:12px;
}
.arqueo-conteo-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 11px;background:var(--bg4);border-bottom:1px solid var(--border);
  font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text3);
}
.arqueo-conteo-head .btn{height:24px;padding:0 9px;font-size:11px}
.arqueo-denoms{
  display:grid;grid-template-columns:repeat(2,1fr);gap:5px 10px;padding:10px 11px;
}
.arqueo-den{display:flex;align-items:center;gap:7px;font-size:12px}
.arqueo-den-v{flex:0 0 62px;font-weight:700;color:var(--text2);font-variant-numeric:tabular-nums}
.arqueo-den input{
  width:56px;height:27px;padding:0 7px;text-align:right;
  border:1px solid var(--border);border-radius:6px;background:var(--bg2);
  font-size:12px;font-variant-numeric:tabular-nums;
}
.arqueo-den-sub{
  flex:1;text-align:right;font-size:11.5px;color:var(--text3);
  font-variant-numeric:tabular-nums;min-height:1em;
}
.arqueo-conteo-tot{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 11px;background:var(--bg4);border-top:1px solid var(--border);
  font-size:12px;color:var(--text2);
}
.arqueo-conteo-tot b{font-size:14px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}

/* estado crediticio del cliente en la cabecera de la factura */
.cmp-strip .cmp-tag.credito-ok{
  background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.35);color:#059669;
}
.cmp-strip .cmp-tag.credito-mal{
  background:rgba(229,72,77,.12);border-color:rgba(229,72,77,.4);color:#c62828;font-weight:800;
}

/* ---------- Detalle de cuenta corriente ---------- */
.cc-resumen{margin-bottom:14px}
.cc-resumen .ss-verde b{color:var(--green)}
.cc-resumen .ss-rojo  b{color:var(--red)}
.cc-resumen .ss-item small{display:block;font-size:11px;color:var(--text4);font-weight:600;margin-top:3px}
#modal-cuenta .cc-fila td{padding:9px 14px !important}
#modal-cuenta .cc-fila.cc-pago{background:rgba(16,185,129,.05)}
#modal-cuenta .cc-fila:hover{background:var(--bg4)}
.cc-tipo{
  display:inline-block;min-width:38px;padding:2px 7px;border-radius:6px;
  background:rgba(229,72,77,.1);color:#c62828;
  font-size:10px;font-weight:800;letter-spacing:.4px;text-align:center;
}
.cc-tipo.hab{background:rgba(16,185,129,.12);color:#059669}

/* ---------- Planilla mayorista (Nuevo Pedido) ---------- */
.pg-head{background:var(--bg2)}
#pg-grid .pg-tot-row{background:var(--bg3);font-weight:700}
#pg-grid .pg-sub-row{background:var(--accent-soft,#ede7ff);font-weight:800}
#pg-grid .pg-tot-row td,#pg-grid .pg-sub-row td{color:var(--text)}
#pg-grid th,#pg-grid td{border-color:var(--border) !important}
#pg-grid input{background:var(--bg2);color:var(--text)}
#pg-grid input[readonly]{cursor:pointer}

/* ============================================================
   Planilla mayorista: que se comporte y se vea como una hoja de
   cálculo de verdad — celdas finas, grilla continua, sin chrome
   de input, anchos fijos y navegación con teclado.
   ============================================================ */
#pg-grid-wrap{max-height:none}
#pg-grid{
  width:auto !important;table-layout:fixed;border-collapse:collapse;
  font-size:12.5px;font-variant-numeric:tabular-nums;
}
#pg-grid th,#pg-grid td{
  border:1px solid var(--border) !important;
  padding:0 !important;height:26px;overflow:hidden;
}
/* columna del número de rollo */
#pg-grid tr > *:first-child{
  width:46px;min-width:46px;text-align:center;
  background:var(--bg3);color:var(--text3);font-size:11px;font-weight:700;
}
/* columnas de color: ancho fijo, como una planilla */
#pg-grid th:not(:first-child),#pg-grid td:not(:first-child){width:104px}

/* las celdas dejan de parecer inputs */
#pg-grid td input,#pg-grid th input{
  width:100% !important;height:24px !important;
  border:0 !important;border-radius:0 !important;
  background:transparent !important;box-shadow:none !important;
  padding:0 6px !important;margin:0 !important;
  font-size:12.5px !important;font-variant-numeric:tabular-nums;
  text-align:right;color:var(--text);
}
#pg-grid th input{text-align:center;font-weight:700;text-transform:uppercase;font-size:11.5px !important}
/* selección de celda estilo planilla */
#pg-grid td input:focus{
  outline:2px solid var(--accent) !important;outline-offset:-2px;
  background:var(--bg2) !important;position:relative;z-index:2;
}
#pg-grid td input::-webkit-outer-spin-button,
#pg-grid td input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#pg-grid td input[type=number]{-moz-appearance:textfield}

/* encabezado fijo al scrollear */
#pg-grid thead th,#pg-grid tr:first-child th{position:sticky;top:0;z-index:3;background:var(--bg4)}

/* filas de totales: compactas y sin inputs redondeados */
#pg-grid .pg-tot-row td,#pg-grid .pg-sub-row td{
  height:24px;font-weight:800;text-align:right;padding:0 6px !important;
}
#pg-grid .pg-tot-row{background:var(--bg3)}
#pg-grid .pg-sub-row{background:var(--accent-soft,#ede7ff)}
/* los valores tienen que leerse fuerte, no como placeholder */
#pg-grid td input{color:var(--text) !important;font-weight:600}
#pg-grid td input::placeholder{color:var(--text4)}

/* ---- Planilla: mismo formato que el Excel de referencia ---- */
#pg-grid .pg-titulo td{
  text-align:center;font-weight:800;font-size:13px;letter-spacing:.3px;
  height:30px;background:var(--bg2);text-transform:uppercase;
}
#pg-grid .pg-titulo td:last-child{width:120px;font-weight:700}
#pg-grid .pg-cabecera th{
  text-align:center;font-weight:800;text-decoration:underline;
  background:var(--bg2);height:26px;
}
#pg-grid .pg-cabecera th input{text-decoration:underline;text-align:center}
/* los pesos van centrados, como en la planilla */
#pg-grid td input[data-r]{text-align:center !important}
#pg-grid .pg-tot-row td,#pg-grid .pg-sub-row td{text-align:center}
#pg-grid .pg-tot-row td:first-child,#pg-grid .pg-sub-row td:first-child{text-align:right}

/* bloque grande de totales, como el 1362.6 / 59 del Excel */
#pg-grid .pg-pie-grande td{height:56px;text-align:center;background:var(--bg2)}
#pg-grid .pg-pie-grande b{display:block;font-size:26px;font-weight:800;line-height:1.05;color:var(--text)}
#pg-grid .pg-pie-grande small{display:block;font-size:10px;font-weight:700;letter-spacing:.6px;color:var(--text3);font-style:italic}
#pg-grid .pg-pie-total td{height:34px;text-align:center;font-weight:800;font-size:15px;background:var(--bg3)}
#pg-grid .pg-pie-total td:first-child{font-size:11px;letter-spacing:.6px;color:var(--text3)}
#pg-grid .pg-pie-firma td{
  height:44px;vertical-align:bottom;text-align:center;
  font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--text3);
  padding-bottom:4px !important;
}
/* el botón de agregar fila no debe romper la hoja: fila fina integrada */
#pg-grid .vw-btn-secondary{
  width:100% !important;margin:0 !important;border:0 !important;border-radius:0 !important;
  background:var(--bg3) !important;color:var(--text3) !important;
  height:22px;font-size:11px;font-weight:700;cursor:pointer;
}
#pg-grid .vw-btn-secondary:hover{background:var(--accent-soft,#ede7ff) !important;color:var(--accent2) !important}
/* fila de rollos: mismo peso visual que la de kgs */
#pg-grid .pg-sub-row td{font-size:12.5px;font-weight:800}
/* cabecera de columna: artículo arriba, color abajo */
#pg-grid .pg-th-art{
  font-size:9.5px;font-weight:800;letter-spacing:.3px;color:var(--text3);
  text-transform:uppercase;cursor:pointer;padding:2px 4px 1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;
}
#pg-grid .pg-th-art:hover{color:var(--accent2);text-decoration:underline}
#pg-grid .pg-th-x{
  border:0;background:transparent;color:var(--text4);cursor:pointer;
  font-size:13px;line-height:1;padding:0 3px;
}
#pg-grid .pg-th-x:hover{color:var(--red)}
#pg-grid .pg-cabecera th{height:40px;vertical-align:top}

/* ---------- Hoja de previsualización del pedido (formato Excel) ---------- */
.pg-hoja{background:#fff;padding:18px;border-radius:8px;overflow:auto}
.pg-hoja-tbl{border-collapse:collapse;margin:0 auto;font-size:12.5px;color:#111;font-variant-numeric:tabular-nums}
.pg-hoja-tbl td{border:1px solid #111;padding:3px 8px;text-align:center;min-width:74px;height:22px}
.pg-hoja-tbl .h-tit td{font-weight:800;text-transform:uppercase;font-size:13px;height:30px;letter-spacing:.3px}
.pg-hoja-tbl .h-tit td:last-child{min-width:110px}
.pg-hoja-tbl .h-cab td{font-weight:800;text-decoration:underline;height:26px}
.pg-hoja-tbl .h-cab small{display:block;font-size:9px;font-weight:700;text-decoration:none;color:#555;text-transform:uppercase}
.pg-hoja-tbl .h-n{color:#666;font-size:11px;min-width:34px}
.pg-hoja-tbl .h-sum td{font-weight:800;background:#f2f2f2}
.pg-hoja-tbl .h-sum td:first-child{font-size:10px;letter-spacing:.5px;text-align:right;background:#fff}
.pg-hoja-tbl .h-big td{height:56px}
.pg-hoja-tbl .h-big b{display:block;font-size:26px;line-height:1.05}
.pg-hoja-tbl .h-big i{display:block;font-size:10px;font-weight:700;letter-spacing:.6px;color:#555}
.pg-hoja-tbl .h-total td{height:32px;font-weight:800;font-size:15px}
.pg-hoja-tbl .h-total td:first-child{font-size:10px;letter-spacing:.6px;color:#555}
.pg-hoja-tbl .h-firma td{height:46px;vertical-align:bottom;font-size:9.5px;font-weight:700;letter-spacing:.5px;color:#555;padding-bottom:4px}
/* buscador de artículo de la planilla */
.pg-art-op{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;border-bottom:1px solid var(--border-soft);cursor:pointer;font-size:12.5px;
}
.pg-art-op:hover{background:var(--bg4)}
.pg-art-op b{font-weight:700;color:var(--text)}
.pg-art-op span{font-size:11px;color:var(--text3);font-family:ui-monospace,monospace}

/* ============================================================
   La planilla del ARMADO usa exactamente el mismo tratamiento
   que la del pedido: celdas finas, grilla continua, sin chrome.
   ============================================================ */
#arm-grid{
  width:auto !important;table-layout:fixed;border-collapse:collapse;
  font-size:12.5px;font-variant-numeric:tabular-nums;margin:0;
}
#arm-grid th,#arm-grid td{
  border:1px solid var(--border) !important;padding:0 !important;height:26px;overflow:hidden;
}
#arm-grid tr > *:first-child{
  width:46px;min-width:46px;text-align:center;
  background:var(--bg3);color:var(--text3);font-size:11px;font-weight:700;
}
#arm-grid th:not(:first-child),#arm-grid td:not(:first-child){width:104px}
#arm-grid th{
  background:var(--bg4);height:38px;vertical-align:middle;
  font-size:11.5px;font-weight:800;text-align:center;
}
#arm-grid th div div:first-child{
  font-size:9.5px;font-weight:800;letter-spacing:.3px;color:var(--text3);text-transform:uppercase;
}
#arm-grid td input{
  width:100% !important;height:24px !important;
  border:0 !important;border-radius:0 !important;
  background:transparent !important;box-shadow:none !important;
  padding:0 6px !important;margin:0 !important;
  font-size:12.5px !important;font-weight:600;text-align:center;
  color:var(--text) !important;font-variant-numeric:tabular-nums;
}
#arm-grid td input:focus{
  outline:2px solid var(--accent) !important;outline-offset:-2px;
  background:var(--bg2) !important;position:relative;z-index:2;
}
#arm-grid td input::-webkit-outer-spin-button,
#arm-grid td input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#arm-grid td input[type=number]{-moz-appearance:textfield}
/* ── resumen por artículo, fuera de la planilla ─────────── */
#arm-resumen{
  width:auto;border-collapse:collapse;margin:0 0 8px;flex:0 0 auto;
  font-size:12px;font-variant-numeric:tabular-nums;
}
#arm-resumen th,#arm-resumen td{
  border:1px solid var(--border);padding:3px 9px;height:26px;text-align:center;white-space:nowrap;
}
#arm-resumen .ar-cab th{
  background:var(--bg3);color:var(--text3);font-size:10px;font-weight:800;
  letter-spacing:.4px;text-transform:uppercase;height:24px;
}
#arm-resumen .ar-art{text-align:left;font-weight:700}
#arm-resumen .ar-num{text-align:right;font-weight:700}
#arm-resumen .ar-ok{color:var(--green);font-weight:800}
#arm-resumen .ar-mal{color:var(--red);font-weight:800}
#arm-resumen .ar-tot td{background:var(--bg3);font-weight:800}
#arm-resumen .ar-tot td:first-child{text-align:right;color:var(--text3);
  font-size:10px;letter-spacing:.4px;text-transform:uppercase}
#arm-resumen .ar-precio{
  width:96px;height:22px;padding:0 6px !important;text-align:right;
  border:1px solid var(--border) !important;border-radius:4px !important;
  font-size:12px;font-weight:700;background:var(--bg2);min-height:0 !important;
}
#arm-resumen .ar-precio:focus{border-color:var(--accent) !important;outline:none}

/* ── planilla de verdad (x-spreadsheet) ─────────────────── */
/* El armado es la pantalla donde más se trabaja: el modal usa casi toda la
   ventana en vez de los 960px del resto. La altura la manda la planilla, así
   que el cuerpo es flex y #arm-xs-wrap se estira con lo que sobra. */
#modal-armar-pedido .modal{
  max-width:min(1680px, 96vw) !important;width:96vw !important;
  max-height:94vh;height:94vh;display:flex;flex-direction:column;overflow:hidden;
}
#modal-armar-pedido .modal-header,#modal-armar-pedido .modal-footer{flex:0 0 auto}
#modal-armar-pedido .modal-body{flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;min-height:0}
#modal-armar-pedido #arm-planilla{flex:1 1 0;display:flex;flex-direction:column;min-height:0}
/* flex-basis 0, NO auto: con `auto` el alto del contenedor lo decide su
   contenido (el canvas) y el canvas se dibuja con el alto del contenedor —
   un círculo que dejaba la planilla siempre más chica de lo que entraba. */
#arm-xs-wrap{flex:1 1 0;min-height:260px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#fff}
#arm-xs{height:100%}
/* la barra de hojas de abajo no aporta: hay una sola hoja.
   NO se puede apagar con showBottomBar:false — así configurada, loadData()
   revienta con "Cannot read properties of undefined (reading 'render')". */
#arm-xs .x-spreadsheet-bottombar{display:none !important}
/* La app tiene un `*{max-width:100%}` global. Los íconos de la barra son un
   sprite: un elemento de 262px de ancho dentro de una ventanita de 18px que
   se corre con left/top. Ese max-width lo achicaba a 18px, así que todos los
   íconos mostraban el mismo pedacito y el resto salía en blanco. */
#arm-xs *{max-width:none}
/* Lo mismo con el editor de celda: el tema define `input, select, textarea`
   con padding 10px, borde y radio 10px, y el cuadrito de edición salía del
   tamaño de dos filas y con el texto corrido. Acá va sin adornos. */
#arm-xs textarea,#arm-xs .x-spreadsheet-editor textarea{
  padding:0 3px !important;border:0 !important;border-radius:0 !important;
  box-shadow:none !important;min-height:0 !important;line-height:normal !important;
  background:#fff !important;resize:none !important;font-family:inherit;
}
#arm-xs .x-spreadsheet-editor .x-spreadsheet-editor-area{
  border-radius:0 !important;box-shadow:none !important;
}
/* el selector de rango y la barra de fórmulas usan los mismos inputs */
#arm-xs input{padding:2px 4px !important;border-radius:0 !important;min-height:0 !important;height:auto !important}
/* en pantalla completa la planilla ocupa lo que haya */
#arm-full #arm-xs-wrap{height:calc(100vh - 210px)}

/* ── selección tipo Excel (grilla propia de respaldo) ───── */
#arm-grid td.sel{background:var(--accent-soft,#ede7ff) !important}
#arm-grid td.sel input{background:transparent !important}
/* la celda activa del rango va con borde, como el marco de Excel */
#arm-grid td.sel-ancla{background:var(--bg2) !important;box-shadow:inset 0 0 0 2px var(--accent)}
/* el número de fila y el encabezado de columna se marcan igual que en Excel */
#arm-grid .sel-cab{background:var(--accent) !important;color:#fff !important}
#arm-grid .sel-cab .arm-th-art,#arm-grid .sel-cab .arm-th-col,#arm-grid .sel-cab .arm-th-x{color:#fff !important}
#arm-grid td.sel input:focus{outline:none !important}
/* manija de arrastre */
#arm-fill{
  display:none;position:absolute;width:8px;height:8px;z-index:5;
  background:var(--accent);border:1.5px solid var(--bg2);border-radius:1px;
  cursor:crosshair;
}
#arm-barra-estado{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:6px;font-size:11.5px;color:var(--text3);
}
#arm-sel-info{font-weight:700;color:var(--text2);font-variant-numeric:tabular-nums;white-space:nowrap}
#arm-ayuda{margin-left:auto;text-align:right}
#arm-grid .pg-tot-row td,#arm-grid .pg-sub-row td{
  height:24px;font-weight:800;text-align:center;padding:0 6px !important;
}
#arm-grid .pg-tot-row{background:var(--bg3)}
#arm-grid .pg-sub-row{background:var(--accent-soft,#ede7ff)}
#arm-grid .cmp-add-dashed{margin:0 !important;border:0 !important;border-radius:0 !important;height:22px;font-size:11px;background:var(--bg3)}
#arm-grid-wrap{display:inline-block;max-width:100%}
/* cabecera de columna del armado: artículo / color / quitar */
#arm-grid .arm-th{position:relative;line-height:1.15;padding:2px 12px 2px 4px}
#arm-grid .arm-th-art{
  font-size:9.5px;font-weight:800;letter-spacing:.3px;color:var(--text3);
  text-transform:uppercase;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#arm-grid .arm-th-art:hover{color:var(--accent2);text-decoration:underline}
#arm-grid .arm-th-col{font-size:12px;font-weight:800;cursor:pointer;color:var(--text)}
#arm-grid .arm-th-col:hover{color:var(--accent2);text-decoration:underline}
#arm-grid .arm-th-x{
  position:absolute;top:0;right:0;border:0;background:transparent;
  color:var(--text4);cursor:pointer;font-size:13px;line-height:1;padding:1px 3px;
}
#arm-grid .arm-th-x:hover{color:var(--red)}

/* ============================================================
   Z-INDEX: los modales van SIEMPRE por encima de las ventanas MDI.
   Las gn-window arrancan en 1000 y suben con cada apertura/foco
   (gnZIndex), mientras .modal-bg estaba fijo en 800: por eso todo
   modal quedaba detrás. Base alta para los modales y más alta aún
   para los selectores que se abren ENCIMA de un modal.
   ============================================================ */
.modal-bg{z-index:20000 !important}
#modal-color-picker,#modal-concepto-picker{z-index:30000 !important}
#modal-rec-valor,#modal-rec-valor.open,#modal-kgs-rollo{z-index:40000 !important}
/* Modales que se abren DESDE otro modal (p.ej. desde "Armar pedido"):
   con el mismo z-index gana el que va después en el HTML, y el del armado
   está más abajo en el archivo. Van un escalón arriba. */
#modal-arm-art,#modal-arm-preview{z-index:30000 !important}
/* título y pie de la planilla del armado, igual que la del pedido */
#arm-grid .pg-titulo td{
  text-align:center;font-weight:800;font-size:13px;letter-spacing:.3px;
  height:30px;background:var(--bg2);text-transform:uppercase;
}
#arm-grid .pg-titulo td:last-child{width:110px;font-weight:700}
#arm-grid .pg-pie-grande td{height:52px;text-align:center;background:var(--bg2)}
#arm-grid .pg-pie-grande b{display:block;font-size:24px;font-weight:800;line-height:1.05;color:var(--text)}
#arm-grid .pg-pie-grande small{display:block;font-size:10px;font-weight:700;letter-spacing:.6px;color:var(--text3);font-style:italic}
#arm-grid .pg-pie-firma td{
  height:42px;vertical-align:bottom;text-align:center;
  font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--text3);padding-bottom:4px !important;
}
/* selector de colores del modal */
.arm-elegido{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--bg4);border:1px solid var(--border);border-radius:8px}
.arm-elegido span{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text3)}
.arm-elegido b{flex:1;font-size:13px;color:var(--text)}
.arm-col-list{max-height:300px;overflow:auto}
.arm-col-tit{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text3);margin:10px 0 6px}
.arm-col-chips{display:flex;flex-wrap:wrap;gap:6px}
.arm-col-chip{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;
  padding:5px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg2);
  font-size:12px;font-weight:600;color:var(--text2);
}
.arm-col-chip:hover{border-color:var(--accent)}
.arm-col-chip.on{border-color:var(--accent);background:var(--accent-soft,#f1ecfe);color:var(--accent2);font-weight:700}
.arm-col-chip input{margin:0;width:13px;height:13px;accent-color:var(--accent)}

/* ---------- Planilla de armado a pantalla completa ---------- */
#arm-full{
  position:fixed;inset:0;z-index:50000;
  background:var(--bg);display:flex;flex-direction:column;
}
.arm-full-bar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:12px 20px;background:var(--bg2);border-bottom:1px solid var(--border);
}
.arm-full-tit{font-size:15px;font-weight:800;color:var(--text);line-height:1.1}
.arm-full-sub{font-size:12px;color:var(--accent2);font-family:ui-monospace,monospace;font-weight:700}
.arm-full-tot{font-size:13px;font-weight:800;color:var(--text)}
.arm-full-body{flex:1;overflow:auto;padding:18px 20px}
/* dentro de pantalla completa la planilla respira y la grilla es más grande */
#arm-full #arm-planilla{display:block !important}
#arm-full #arm-grid-wrap{max-height:none}
#arm-full #arm-grid td,#arm-full #arm-grid th{height:30px}
#arm-full #arm-grid td input{height:28px !important;font-size:13.5px !important}
#arm-full #arm-grid th:not(:first-child),#arm-full #arm-grid td:not(:first-child){width:120px}
/* El título lleva colspan = cantidad de columnas: con pocas columnas caía en
   los 46px del "#" y se partía en vertical. Ancho mínimo y sin cortar. */
#arm-grid,#pg-grid{min-width:480px}
#arm-grid .pg-titulo td:first-child,#pg-grid .pg-titulo td:first-child{
  white-space:nowrap;padding:0 14px !important;
}
#arm-grid .pg-pie-grande td,#pg-grid .pg-pie-grande td{white-space:nowrap}
#arm-grid-wrap{display:block;max-width:100%;overflow:auto}
/* en pantalla completa la hoja usa el ancho disponible */
#arm-full #arm-grid{min-width:min(100%,620px)}
#arm-full .arm-full-body{display:flex;justify-content:center}
#arm-full #arm-planilla{width:100%;max-width:1200px}


/* ============================================================
   Caja · panel de entradas y salidas por medio y moneda
   La caja es efectivo, pero quien la maneja necesita ver también
   cheques y transferencias, y en qué moneda, sin cambiar de pantalla.
   ============================================================ */
#caja-panel{
  width:100%;border-collapse:collapse;margin:12px 0 0;
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden;
  font-size:12.5px;font-variant-numeric:tabular-nums;
}
#caja-panel th,#caja-panel td{padding:8px 14px;border-bottom:1px solid var(--border-soft)}
#caja-panel tr:last-child td{border-bottom:0}
#caja-panel .cp-cab th{
  background:var(--bg4);color:var(--text3);font-size:10.5px;font-weight:800;
  letter-spacing:.5px;text-transform:uppercase;text-align:right;
}
#caja-panel .cp-cab th:first-child{text-align:left}
#caja-panel .cp-m{font-weight:700;white-space:nowrap}
#caja-panel .cp-m small{font-weight:600;color:var(--text3);font-size:11px;margin-left:5px}
#caja-panel .cp-num{text-align:right;font-weight:700;white-space:nowrap}
#caja-panel .cp-n{text-align:right;color:var(--text3);font-size:11.5px;width:60px}
#caja-panel .cp-ent{color:var(--green)}
#caja-panel .cp-sal{color:var(--red)}
#caja-panel .cp-neg{color:var(--red)}
#caja-panel .cp-tot td{background:var(--bg3);font-weight:800;border-top:1px solid var(--border)}
#caja-panel .cp-tot small{display:block;font-weight:600;color:var(--text3);font-size:10.5px;text-transform:none;letter-spacing:0}
@media (max-width:700px){
  #caja-panel th,#caja-panel td{padding:7px 9px;font-size:11.5px}
  #caja-panel .cp-n{display:none}
}