/* ============================================================
   GestioNet · Chasis de Comprobante (v1)
   Layout compartido por Nueva Factura / Nuevo Recibo (y a futuro
   pedido, remito, orden de pago). Se carga DESPUÉS de taluney-v3.css.
   Rollback: quitar el <link> de este archivo en index.html.

   Estructura:
     .cmp-doc            contenedor del documento (flex column)
       .cmp-nav          barra de navegación (nuevo / buscar / ‹ ›)
       .cmp-head         cabecera compacta de datos
       .cmp-body         cuerpo scrolleable (tablas de ítems/valores)
       .cmp-foot         barra fija inferior: totales + acción primaria
   ============================================================ */

.cmp-doc{display:flex;flex-direction:column;min-height:100%;gap:12px}
/* IMPORTANTE: sin esto los hijos se encogen (flex-shrink:1 por defecto) cuando
   el contenedor tiene altura definida — la cabecera se comprimía y su
   overflow:hidden recortaba la franja del cliente. */
.cmp-doc > *{flex:0 0 auto}
.cmp-doc > .cmp-body{flex:1 1 auto}
.cmp-body > *{flex:0 0 auto}

/* .nf-layout dejó de ser grid con sidebar: ahora es la columna del documento.
   Se conserva el nombre de clase porque las reglas de modo-vista cuelgan de él. */
.nf-layout{display:flex !important;flex-direction:column;gap:12px;grid-template-columns:none !important}
.nf-layout > div:last-child{order:0 !important}

/* ---------- Barra de navegación del documento ---------- */
.cmp-nav{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:9px 12px;background:var(--bg2);
  border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow-xs);margin:0 !important;
}
.cmp-nav input[type=text]{
  flex:1;max-width:230px;padding:7px 11px;font-size:12.5px;
  border:1px solid var(--border);border-radius:8px;background:var(--bg4);
}
.cmp-nav .cmp-nav-pos{
  font-size:11.5px;color:var(--text3);min-width:118px;
  text-align:center;line-height:1.25;font-weight:600;
}
.cmp-nav .cmp-sep{width:1px;height:20px;background:var(--border);margin:0 2px}

/* ---------- Cabecera de datos ---------- */
.cmp-head{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow-xs);
  overflow:visible;            /* el autocompletar de cliente tiene que poder salir */
}
.cmp-head > :last-child{
  border-bottom-left-radius:12px;border-bottom-right-radius:12px;
}
.cmp-head-grid{display:grid;gap:12px 16px;padding:14px 16px}
.cmp-head-grid.g-doc{grid-template-columns:200px 210px 165px 1fr}
.cmp-head-grid.g-cli{grid-template-columns:2.2fr 1.3fr 1fr;border-top:1px dashed var(--border-soft)}

.cmp-f{display:flex;flex-direction:column;gap:5px;min-width:0;margin:0}
.cmp-f > label{
  font-size:10.5px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--text3);margin:0;
}
.cmp-f input,.cmp-f select,.cmp-f textarea{width:100%;margin:0}

/* chip con el número que va a tomar el comprobante */
.cmp-nro{
  display:inline-flex;flex-direction:column;justify-content:center;gap:2px;
  padding:7px 14px;background:var(--accent-soft,#f1ecfe);
  border:1px solid var(--accent);border-radius:10px;
  align-self:end;justify-self:end;text-align:right;
}
.cmp-nro small{
  font-size:9.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--accent2);opacity:.75;
}
.cmp-nro b{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;font-weight:800;color:var(--accent2);letter-spacing:-.2px;
}

/* franja con los datos del cliente elegido */
.cmp-strip{
  display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;
  padding:9px 16px;background:var(--bg4);
  border-top:1px solid var(--border-soft);
  font-size:12px;color:var(--text2);min-height:38px;
}
.cmp-strip .cmp-strip-empty{color:var(--text4);font-style:italic}
.cmp-strip b{color:var(--text);font-weight:700}
.cmp-strip .cmp-tag{
  padding:2px 9px;border-radius:99px;background:var(--bg2);
  border:1px solid var(--border);font-size:11px;font-weight:700;color:var(--text2);
}
.cmp-strip .cmp-cot{margin-left:auto;display:flex;gap:14px;font-size:11.5px;color:var(--text3)}
.cmp-strip .cmp-cot b{font-variant-numeric:tabular-nums}
/* el JS llena estos contenedores con <div> apilados: acá van en línea */
.cmp-strip #nf-cliente-data{display:flex;align-items:center;gap:4px 16px;flex-wrap:wrap;min-width:0}
.cmp-strip #nf-cliente-data > div{margin:0 !important}
.cmp-strip #nf-cliente-data > div:empty{display:none}
.cmp-strip #nf-cliente-data:empty::before,
.cmp-strip #rec-cliente-data:empty::before{
  content:'Sin cliente seleccionado';color:var(--text4);font-style:italic;
}
.cmp-strip #rec-cliente-data{display:flex;align-items:center;gap:4px 16px;flex-wrap:wrap;min-width:0}
.cmp-strip #rec-cliente-data > div{margin:0 !important}
.cmp-strip #nf-cotizacion > div{margin:0 !important;white-space:nowrap}

/* ---------- Cuerpo ---------- */
.cmp-body{flex:1;display:flex;flex-direction:column;gap:12px;min-height:0}

.cmp-panel{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:12px;overflow:hidden;box-shadow:var(--shadow-xs);
}
.cmp-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 14px;background:var(--bg4);
  border-bottom:1px solid var(--border);
  font-size:11px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.5px;
}
.cmp-panel-body{padding:12px 14px}

/* ---------- Barra fija inferior ---------- */
.cmp-foot{
  position:sticky;bottom:0;z-index:30;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:11px 16px;background:var(--bg2);
  border:1px solid var(--border);border-radius:12px;
  box-shadow:0 -8px 24px rgba(16,24,40,.10);
}
.cmp-foot-mini{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--text3)}
.cmp-foot-mini .cmp-mini{display:flex;align-items:baseline;gap:6px}
.cmp-foot-mini .cmp-mini span{font-weight:600}
.cmp-foot-mini .cmp-mini b{color:var(--text2);font-weight:700;font-variant-numeric:tabular-nums}
.cmp-foot-mini input[type=number]{
  width:52px;padding:3px 6px;border:1px solid var(--border);
  border-radius:6px;background:var(--bg4);font-size:12px;text-align:right;
}

/* total + acciones viajan juntos: al envolver el footer caen como un bloque
   alineado a la derecha, en vez de quedar los botones sueltos a la izquierda */
.cmp-foot-end{display:flex;align-items:center;gap:18px;margin-left:auto}
.cmp-foot-total{text-align:right;line-height:1.1}
.cmp-foot-total small{
  display:block;font-size:10px;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;color:var(--text3);margin-bottom:2px;
}
.cmp-foot-total .cmp-total-val{
  font-size:24px;font-weight:800;color:var(--accent2);
  font-variant-numeric:tabular-nums;letter-spacing:-.5px;
}
.cmp-foot-actions{display:flex;gap:8px;align-items:center}
.cmp-foot-actions .btn{padding:10px 20px;font-size:13.5px;font-weight:700}

/* segmento CC / Pago directo dentro del footer */
.cmp-seg{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--bg4)}
.cmp-seg > div{
  padding:7px 15px;font-size:12.5px;font-weight:700;color:var(--text3);
  cursor:pointer;transition:background .15s,color .15s;user-select:none;
}
.cmp-seg > div + div{border-left:1px solid var(--border)}
.cmp-seg > div:hover{background:var(--bg3);color:var(--text2)}
.cmp-seg > div.on{background:var(--accent);color:#fff}

/* ---------- Tablas del comprobante ---------- */
.cmp-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.cmp-tbl thead th{
  text-align:left;padding:9px 12px;background:var(--bg4);
  border-bottom:1px solid var(--border);
  font-size:10.5px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;
}
.cmp-tbl tbody td{padding:9px 12px;border-bottom:1px solid var(--border-soft)}
.cmp-tbl tbody tr:last-child td{border-bottom:0}
.cmp-tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.cmp-tbl .cen{text-align:center}
.cmp-tbl tfoot td{
  padding:8px 12px;background:var(--bg4);
  border-top:1px solid var(--border);font-weight:700;font-size:12px;
}
.cmp-empty{text-align:center;padding:22px;color:var(--text4);font-style:italic}

/* fila de carga rápida de ítems */
.cmp-addrow{
  display:grid;gap:6px;align-items:center;
  padding:10px 12px;background:var(--bg4);
  border-bottom:1px solid var(--border);
}
.cmp-addrow input{padding:8px 10px;font-size:12.5px;margin:0}

/* Ítems de factura: la fila de carga rápida alinea columna a columna con la
   tabla de abajo. Si tocás un ancho, tocá el mismo en los dos lugares. */
.nf-items-tbl{table-layout:fixed}
.nf-items-tbl th:nth-child(1){width:27%}
.nf-items-tbl th:nth-child(2){width:15%}
.nf-items-tbl th:nth-child(3){width:8%}
.nf-items-tbl th:nth-child(4){width:11%}
.nf-items-tbl th:nth-child(5){width:12%}
.nf-items-tbl th:nth-child(6){width:8%}
.nf-items-tbl th:nth-child(7){width:15%}
.nf-items-tbl th:nth-child(8){width:4%}
/* Sin gap ni padding lateral en el contenedor: así los % del grid miden lo
   mismo que los % de la tabla y las columnas caen alineadas.
   OJO: no poner width:% en los hijos — en un grid item el % se resuelve
   contra su propia columna y termina aplicándose dos veces. */
.nf-addrow{grid-template-columns:7% 22% 14% 8% 11% 12% 8% 18%;gap:0;padding:10px 0}
.nf-addrow > *{padding-right:6px;box-sizing:border-box;min-width:0}
.nf-addrow > *:first-child{padding-left:12px}
.nf-addrow > *:last-child{padding-right:12px}
.nf-addrow > * > input{width:100%}
.nf-items-tbl td{overflow:hidden;text-overflow:ellipsis}

/* ---------- Panel de pago directo (denso, tipo ERP) ----------
   Nada de tiles de colores ni tarjetones: una sola línea de carga con
   controles chicos, como en Zoologic. */
.cmp-pay-sum{text-transform:none;letter-spacing:0;font-size:11.5px;color:var(--text3);font-weight:600}
.cmp-pay-sum b{color:var(--text);font-weight:800;font-variant-numeric:tabular-nums}
.cmp-pay-sum > span{margin-left:10px;font-weight:800}

/* flex y no grid: Banco y Referencia se ocultan según el medio elegido, y un
   grid de columnas fijas dejaría a Monto ocupando el hueco que quedó libre */
.nf-payrow{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;
  padding:10px 14px;background:var(--bg4);border-bottom:1px solid var(--border);
}
.nf-payrow > .cmp-f{flex:0 1 200px;min-width:130px;gap:4px}
.nf-payrow > .cmp-f > label{font-size:10px}
/* anchos acotados: con Banco/Referencia ocultos (efectivo) el select se estiraba
   a todo el renglón. Que sobre espacio a la derecha, no que se deforme. */
.nf-payrow .nf-pay-medio{flex:0 1 290px}
.nf-payrow .nf-pay-monto{flex:0 1 170px}
/* `.gn-window select` fija padding 9px y font 13px con !important; sin pisarlo
   el contenido no entra en los 34px y el texto queda cortado abajo. */
.nf-payrow input,.nf-payrow select{
  padding:0 10px !important;font-size:12.5px !important;border-radius:8px !important;
  height:34px;line-height:34px;
}
.nf-payrow select{
  padding:0 30px 0 10px !important;
  background-position:right 10px center !important;
}
.nf-payrow input.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.nf-payrow .btn{flex:0 0 auto;height:34px;padding:0 18px;font-size:12.5px;font-weight:700;border-radius:8px}
.nf-pagos-tbl tbody td{padding:8px 12px}

/* botón de quitar fila: discreto, se pone rojo al pasar por encima */
.cmp-row-del{
  width:26px;height:26px;line-height:1;border-radius:7px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg2);color:var(--text4);
  font-size:15px;font-weight:700;transition:all .15s;
}
.cmp-row-del:hover{border-color:var(--red,#e5484d);background:var(--red,#e5484d);color:#fff}

@media(max-width:900px){
  .nf-payrow{grid-template-columns:1fr 1fr}
}

/* botón punteado "agregar" */
.cmp-add-dashed{
  width:100%;border:1.5px dashed var(--border);padding:12px;
  font-weight:700;color:var(--text3);background:transparent;
  border-radius:10px;cursor:pointer;font-size:13px;
  transition:border-color .15s,color .15s,background .15s;
}
.cmp-add-dashed:hover{border-color:var(--accent);color:var(--accent2);background:var(--accent-soft,#f6f2ff)}

/* ---------- Modo vista (solo lectura) ---------- */
.nf-viewing .cmp-foot .btn-outline,
.nf-viewing .cmp-foot .btn-ghost{pointer-events:auto}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .cmp-head-grid.g-doc{grid-template-columns:1fr 1fr;}
  .cmp-head-grid.g-cli{grid-template-columns:1fr 1fr}
  .cmp-foot{gap:12px}
  .cmp-foot-total .cmp-total-val{font-size:21px}
}
/* Tabla que se arrastra con el dedo en vez de recortarse.
   Las sombras de los costados avisan que hay más para ver: aparecen y
   desaparecen solas con el scroll (truco de background-attachment local). */
.cmp-tbl-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right, var(--bg2) 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  var(--bg2) 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,   rgba(0,0,0,.16), rgba(0,0,0,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) right center;
  background-repeat:no-repeat;
  background-size:30px 100%,30px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll;
}

@media(max-width:760px){
  /* Ancho mínimo: sin esto las columnas se aplastan hasta cortar Precio y Subtotal */
  .cmp-tbl-scroll .nf-items-tbl{min-width:660px}
  .cmp-tbl-scroll .nf-pagos-tbl{min-width:520px}
  .cmp-tbl-scroll .cmp-tbl tbody td{white-space:nowrap}
  .cmp-head-grid.g-doc,.cmp-head-grid.g-cli{grid-template-columns:1fr}
  .cmp-addrow{grid-template-columns:1fr !important}
  .cmp-foot{flex-direction:column;align-items:stretch}
  .cmp-foot-end{margin-left:0;justify-content:space-between}
  .cmp-foot-total{text-align:left}
  .cmp-foot-actions .btn{flex:1;justify-content:center}
}