/* Cabecera de los documentos (facturas de proveedor y de cliente).
   Una fila de acciones: la principal destacada, las demás discretas, y lo raro o riesgoso
   (Restablecer, Anular) dentro de «Más», que queda siempre de último. Debajo, el título.
   Los grupos #draft-actions / #posted-actions son display: contents para que sus botones y
   los de cualquier estado se ordenen en una sola fila; jQuery los oculta con display:none en
   línea, que manda. Colores explícitos: Estilos.css pisa varios grises con !important. */
.doc-toolbar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 14px; background: #fff; border-bottom: 1px solid #e3e7ef; margin-bottom: 8px;
}
.doc-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.doc-acciones > #draft-actions, .doc-acciones > #posted-actions { display: contents; }
.doc-acciones #btnPreviewFacturaXml, .doc-acciones .btnImprimirAsientoContable { order: 5; }
.doc-acciones .doc-mas { order: 9; }
/* El radio (cápsula) y el margen inferior los pone netzdi-theme.css para las siete barras de
   documentos: decisión de Sergio del 2026-09-24. Aquí no se pisan. */
.doc-acciones .btn { padding: 5px 13px; font-size: 13px; line-height: 1.4; }
.doc-acciones .btn-default { background: #fff; border-color: #cfd5e1; color: #2c3d63; }
.doc-acciones .btn-default:hover { background: #f2f5fa; border-color: #b7c0d1; }
.doc-acciones .btn-primary { background: #2c3d63; border-color: #2c3d63; color: #fff; }
.doc-acciones .btn-primary:hover { background: #22304f; border-color: #22304f; }
.doc-mas .dropdown-menu { min-width: 210px; padding: 4px 0; }
.doc-mas .doc-item {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 7px 16px; font-size: 13px; color: #2c3d63;
}
.doc-mas .doc-item:hover { background: #f2f5fa; }
.doc-mas .doc-item-peligro { color: #a3271b; }
.doc-mas .doc-item-peligro:hover { background: #fbe5e3; }
/* Si la barra se parte (pantalla angosta o Bitácora abierta), los pasos bajan alineados a la derecha. */
.doc-pasos { margin-left: auto; }
/* ── EL ESTADO: BARRA DE FLECHAS ────────────────────────────────────────────────
   Un recorrido, no botones: flechas planas encajadas una en la otra, sin cápsula ni
   sombra. El paso actual en el azul de la casa; los ya pasados en azul claro; los que
   faltan en gris claro; «Cancelado» en rojo. El color de AdminLTE que pone el JS
   (label-success / -warning / -danger, con !important) se pisa aquí: el verde decía
   «aquí vamos» y también «salió bien», y el ámbar del pago parcial no aporta. */
.doc-pasos { gap: 0 !important; align-items: center; }
.doc-pasos .arrow, .doc-pasos .sup-step-check, .doc-pasos .cus-step-check { display: none !important; }
.doc-pasos .status-step { opacity: 1 !important; color: inherit; font-weight: normal; margin: 0 0 0 -3px; }
.doc-pasos .status-step:first-child { margin-left: 0; }
.doc-pasos .status-step .label {
  display: inline-block; font-size: 12px; font-weight: 600; line-height: 18px; letter-spacing: .2px;
  padding: 5px 16px 5px 22px; border-radius: 0 !important;
  background: #eef0f4 !important; color: #8a93a6 !important;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
}
.doc-pasos .status-step:first-child .label {
  padding-left: 14px; border-radius: 4px 0 0 4px !important;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}
/* Los ya recorridos: los que van ANTES del activo. */
.doc-pasos .status-step:has(~ .status-step.active) .label { background: #dfe6f2 !important; color: #2c3d63 !important; }
.doc-pasos .status-step.active .label { background: #2c3d63 !important; color: #fff !important; }
.doc-pasos .status-step.active .label.label-danger { background: #a3271b !important; }
/* El último paso no apunta a nada: termina recto. */
#sup-step-paid .label, #cus-step-paid .label, #sup-step-cancel .label, #cus-step-cancel .label {
  padding-right: 14px; border-radius: 0 4px 4px 0 !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%);
}

/* ── EL SELLO DIAN, junto al título ──────────────────────────────────────────────
   Lo que dijo la DIAN no es un paso del recorrido: es un sello del documento. Borde y
   texto, sin relleno, para que no se lea como botón. El CUFE no se muestra cortado (nadie
   lo lee así): es un botón que lo copia entero. */
.doc-titulo #dian-status-box { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; }
.doc-titulo #dian-status-badge {
  background: #fff !important; border: 1px solid #c3c9d6; color: #4a5468 !important;
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 12px;
}
.doc-titulo #dian-status-badge.label-success { border-color: #9fd3b0; color: #1e6b37 !important; background: #f2faf4 !important; }
.doc-titulo #dian-status-badge.label-danger  { border-color: #f0bcb6; color: #a3271b !important; background: #fdf3f2 !important; }
.doc-titulo #dian-status-badge.label-info    { border-color: #c4d3ee; color: #234a8a !important; background: #f4f7fc !important; }
.doc-titulo #dian-status-cufe {
  max-width: none !important; font-size: 12px; color: #2c3d63 !important; cursor: pointer !important;
  padding: 2px 8px; border: 1px solid #d9dee8; border-radius: 12px; background: #fff;
}
.doc-titulo #dian-status-cufe:empty { display: none !important; }
.doc-titulo #dian-status-cufe:hover { background: #f2f5fa; }
.doc-titulo {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px;
  margin: 0 4px 10px;
}
.doc-titulo h2 { margin: 0; font-size: 21px; font-weight: 700; }
.doc-titulo h2 #invoice-number-text { color: #2c3d63; }
/* Factura de cliente: mientras «Enviar a DIAN» esté a la vista (factura sin aceptar), ésa es
   la acción principal y «Cobrar» queda secundaria. Aceptada, «Enviar a DIAN» se oculta y
   «Cobrar» vuelve a ser la principal. */
.doc-acciones .btnEnviarDianCustomer:not([style*="display: none"]) ~ .btnCobrarCustomerInvoice {
  background: #fff; border-color: #cfd5e1; color: #2c3d63;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DOCUMENTO CON PATRÓN PROPIO (2026-11-03) — se enciende con la clase .doc-v2 en el
   .box de la pantalla. Lo pinta vistas/js/documentocabecera.js (nzDoc).
   · El estado va JUNTO AL NÚMERO, en palabras, con una frase debajo. La barra de
     flechas queda oculta (sigue existiendo: el JS de cada pantalla la usa de fuente).
   · Un solo botón de color: el del paso siguiente (.doc-principal). Los demás, neutros.
   · Recuadro «siguiente paso» y la cadena de documentos debajo del título.
   · Etiquetas ENCIMA del campo y pestañas como control segmentado.
   ═══════════════════════════════════════════════════════════════════════════════ */
.doc-v2 .doc-pasos { display: none !important; }
.doc-v2 #smart-buttons-bar, .doc-v2 #smart-buttons-bar-customer, .doc-v2 #btnPagosAprobados { display: none !important; }

/* Botones: todos neutros; el principal en el azul de la casa. */
.doc-v2 .doc-acciones .btn,
.doc-v2 .doc-acciones .btn-primary,
.doc-v2 .doc-acciones .btn-success,
.doc-v2 .doc-acciones .btn-warning { background: #fff !important; border-color: #cfd5e1 !important; color: #2c3d63 !important; font-weight: 600; }
.doc-v2 .doc-acciones .btn:hover { background: #f2f5fa !important; }
.doc-v2 .doc-acciones .btn.doc-principal { background: #1f3a68 !important; border-color: #1f3a68 !important; color: #fff !important; box-shadow: 0 2px 6px rgba(31,58,104,.25); }
.doc-v2 .doc-acciones .btn.doc-principal:hover { background: #18305a !important; }
.doc-v2 .doc-acciones .btn[disabled] { opacity: .55; }
.doc-v2 .doc-toolbar { background: #fafbfd; border-top: 1px solid #e3e7ef; padding: 10px 16px; }

/* Título, estado y frase */
.doc-v2 .doc-titulo { margin: 14px 16px 2px; justify-content: flex-start; }
.doc-v2 .doc-titulo h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 24px; }
.doc-v2 .doc-titulo h2 #invoice-number-text { color: #16233b !important; }
.doc-estado { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; padding: 3px 12px 3px 10px; border-radius: 20px; letter-spacing: 0; }
.doc-estado:before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.doc-estado.e-borrador { background: #eef0f4; color: #4b5568; }
.doc-estado.e-espera   { background: #eeecfb; color: #5a4fcf; }
.doc-estado.e-bien     { background: #e6f4ec; color: #1f8a4c; }
.doc-estado.e-mal      { background: #fbecec; color: #c23b3b; }
.doc-frase { margin: 0 16px 12px; color: #3d4a63; font-size: 14.5px; }
.doc-frase b { color: #16233b; }
.doc-frase:empty { display: none; }

/* Siguiente paso */
.doc-siguiente { display: flex; align-items: center; gap: 14px; margin: 0 16px 12px; padding: 11px 14px; border: 1px solid #cbd7ec; background: #e8eef8; border-radius: 10px; }
.doc-siguiente .ico { width: 32px; height: 32px; border-radius: 50%; background: #1f3a68; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; font-weight: 700; }
.doc-siguiente p { margin: 0; color: #3d4a63; }
.doc-siguiente p b { color: #16233b; }
.doc-siguiente .btn { margin-left: auto; flex: none; background: #1f3a68 !important; border-color: #1f3a68 !important; color: #fff !important; font-weight: 600; border-radius: 8px; }
.doc-siguiente.ok { background: #e6f4ec; border-color: #bfe3cd; }
.doc-siguiente.ok .ico { background: #1f8a4c; }
.doc-siguiente[hidden] { display: none; }

/* La cadena de documentos */
.doc-cadena { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 0 16px 14px; }
.doc-cadena[hidden] { display: none; }
.doc-cadena .eslabon { display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 8px; border: 1px solid #e3e7ef; border-radius: 9px; background: #fff; color: #16233b; text-decoration: none; min-width: 0; }
.doc-cadena a.eslabon:hover { border-color: #9fabc0; background: #f7f9fc; text-decoration: none; }
.doc-cadena .eslabon .p { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #c6cedc; background: #fff; flex: none; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; }
.doc-cadena .eslabon.hecho .p { background: #1f8a4c; border-color: #1f8a4c; }
.doc-cadena .eslabon.medio .p { background: #5a4fcf; border-color: #5a4fcf; }
.doc-cadena .eslabon.aqui { border-color: #1f3a68; box-shadow: 0 0 0 3px #e8eef8; }
.doc-cadena .eslabon b { display: block; font-size: 13px; line-height: 1.25; }
.doc-cadena .eslabon span.sub { display: block; font-size: 12px; color: #6b778c; line-height: 1.25; }
.doc-cadena .flecha { align-self: center; color: #b3bccb; padding: 0 6px; }

/* Encabezado: la etiqueta queda AL LADO del campo (como estaba). Encima costaba ~100 px de
   alto y empujaba las líneas fuera de la pantalla, que es donde se trabaja (2026-11-04). */
.doc-v2 #encabezadoPanel .form-control { border-radius: 7px; }

/* La frase va en la misma línea del título y el estado cuando cabe; si no, baja sola. */
.doc-v2 .doc-titulo { display: flex !important; flex-wrap: wrap; align-items: center; gap: 2px 16px; }
.doc-v2 .doc-titulo > #purchase-doc-label { flex-basis: 100%; }
.doc-v2 .doc-titulo > .doc-frase { margin: 0; font-size: 14px; }

/* Pestañas como control segmentado */
.doc-v2 .pestanas-netzdi > .panel-heading { background: transparent !important; border: 0 !important; padding: 8px 12px 0 !important; }
.doc-v2 .pestanas-netzdi > .panel-heading .nav-tabs { display: inline-flex; background: #eef1f6; border-radius: 9px; padding: 3px; border: 0 !important; }
.doc-v2 .pestanas-netzdi > .panel-heading .nav-tabs > li { float: none; margin: 0; }
.doc-v2 .pestanas-netzdi > .panel-heading .nav-tabs > li > a { border: 0 !important; border-radius: 7px !important; padding: 6px 15px; margin: 0; color: #3d4a63 !important; background: transparent !important; font-weight: 500; }
.doc-v2 .pestanas-netzdi > .panel-heading .nav-tabs > li.active > a { background: #fff !important; color: #16233b !important; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08) !important; }
.doc-v2 .pestanas-netzdi { border-color: #e3e7ef !important; }

.doc-v2 .doc-mas.doc-mas-vacio { display: none !important; }
.doc-v2 .state-indicator, .doc-v2 #payment-origin-links { display: none !important; }
.doc-v2[data-doc="asiento"] > .box-header, .doc-v2 #comprobante-label, .doc-v2 #entry-origin-link { display: none !important; }
.doc-v2 .button-status-container.doc-toolbar { justify-content: flex-start; }
.doc-v2 .button-status-container > .status-container { display: none !important; }
/* Orden de venta confirmada o facturada: es de solo consulta, así que Guardar y Confirmar sobran. */
.doc-v2[data-doc="venta"][data-estado="e-espera"] .doc-acciones .btCotizacion,
.doc-v2[data-doc="venta"][data-estado="e-espera"] .doc-acciones .Enviaraordenventa,
.doc-v2[data-doc="venta"][data-estado="e-bien"] .doc-acciones .btCotizacion,
.doc-v2[data-doc="venta"][data-estado="e-bien"] .doc-acciones .Enviaraordenventa,
.doc-v2[data-doc="venta"][data-estado="e-mal"] .doc-acciones .btCotizacion,
.doc-v2[data-doc="venta"][data-estado="e-mal"] .doc-acciones .Enviaraordenventa { display: none !important; }
/* Bodega: los «botones inteligentes» se vuelven la cadena; los ítems de «Más» son .btn
   (stockPick.js los habilita por su data-enable-on), sin el marco de un botón. */
.doc-v2 #picking-smart-buttons { display: none !important; }
.doc-v2 .doc-mas .doc-item.btn { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; font-weight: 400; }
.doc-v2 .doc-mas .doc-item.btn:hover { background: #f2f5fa !important; }
.doc-v2 .doc-mas .doc-item.btn[disabled] { opacity: .45; }
/* Un marco parejo para todos los botones de la barra (en bodega .custom-button lo quitaba). */
.doc-v2 .doc-acciones .btn:not(.doc-item) { border: 1px solid #cfd5e1 !important; }
.doc-v2 .doc-acciones .btn.doc-principal { border-color: #1f3a68 !important; }
/* Bodega hecha o anulada: Guardar y Validar ya no aplican. */
.doc-v2[data-doc="bodega"][data-estado="e-bien"] #btnGuardarMovstockpick_ing,
.doc-v2[data-doc="bodega"][data-estado="e-bien"] #btnAutorizar,
.doc-v2[data-doc="bodega"][data-estado="e-mal"] #btnGuardarMovstockpick_ing,
.doc-v2[data-doc="bodega"][data-estado="e-mal"] #btnAutorizar { display: none !important; }

/* ── «MÁS» SOLO CUANDO NO CABE ─────────────────────────────────────────────────
   En pantalla ancha (portátil de 15", escritorio) el menú se despliega en la misma
   fila: cada ítem visible queda como un botón discreto, al final, y «Anular» en rojo.
   El menú se plegó para dejar sitio a los estados de la derecha, que ya no están.
   Lo decide documentocabecera.js midiendo: si los botones no caben en una fila (pantalla angosta, celular, Bitácora abierta), vuelve el «Más ▾» de siempre. Lo deshabilitado no se muestra
   como botón (en el menú sí se ve atenuado). */
html.doc-mas-abierto .doc-v2 .doc-acciones .doc-mas { display: contents; }
html.doc-mas-abierto .doc-v2 .doc-acciones .doc-mas > .dropdown-toggle { display: none !important; }
html.doc-mas-abierto .doc-v2 .doc-acciones .doc-mas > .dropdown-menu { display: contents !important; }
html.doc-mas-abierto .doc-v2 .doc-acciones .doc-mas > .dropdown-menu > li { display: contents; }
html.doc-mas-abierto .doc-v2 .doc-acciones .doc-mas > .dropdown-menu > li.divider { display: none; }
html.doc-mas-abierto .doc-v2 .doc-acciones .doc-mas .doc-item,
html.doc-mas-abierto .doc-v2 .doc-acciones .doc-mas .doc-item.btn {
order: 9; width: auto; display: inline-block;
padding: 5px 13px !important; font-size: 13px; line-height: 1.4;
background: #fff !important; color: #2c3d63;
border: 1px solid #cfd5e1 !important; border-radius: 999px !important;
}
html.doc-mas-abierto .doc-v2 .doc-acciones .doc-mas .doc-item:hover { background: #f2f5fa !important; }
html.doc-mas-abierto .doc-v2 .doc-acciones .doc-mas .doc-item-peligro { color: #a3271b !important; border-color: #e8c3bf !important; }
html.doc-mas-abierto .doc-v2 .doc-acciones .doc-mas .doc-item-peligro:hover { background: #fbe5e3 !important; }
html.doc-mas-abierto .doc-v2 .doc-acciones .doc-mas .doc-item[disabled] { display: none !important; }

/* Orden de venta: el bloque de anticipos SIN anticipos queda en una línea (título y botón),
   salvo con el formulario abierto; y en una orden ya facturada no se muestra. */
#so-anticipos.so-ant-sin:not(.so-ant-abierto) > .box-body { display: none; }
#so-anticipos.so-ant-sin { margin-bottom: 10px !important; }
.doc-v2[data-estado="e-bien"] ~ * #so-anticipos.so-ant-sin,
.doc-v2[data-estado="e-bien"] #so-anticipos.so-ant-sin { display: none !important; }