/**
 * Venta Modal Layout - Dependencies-first, 2-col / 3-col distribution
 * Visual reorder via CSS grid only (NO DOM moves).
 * IDs untouched / name untouched / JS untouched.
 *
 * Scope: #formVenta (modal + full-page), #dashboard-modal.is-venta (modal ONLY).
 * Full-page /registrar_venta no tiene #dashboard-modal, queda intacto.
 *
 * Fix layout 2026-02-14: grid minmax(0,1fr), min-width:0 en items,
 * .field flex column, label block, input 100%, toggle IVA integrado.
 */

/* ==========================================================================
   MODAL SHELL - Unico estandar para TODOS los modales del dashboard
   El dialog NO usa .modal-content-detalle (evita width 90% de acciones_estandar).
   Aplica a compra, venta, produccion, producto en todas las vistas.
   ========================================================================== */
body #dashboard-modal .dashboard-modal__dialog {
  width: 560px !important;
  min-width: 560px;
  max-width: calc(100vw - 32px);
  background: white;
  border-radius: 12px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

/* ==========================================================================
   MODAL SHELL - Figma 672px, 24px padding, sin aplastamiento
   Scoped to venta modal ONLY (#dashboard-modal.is-venta)
   ========================================================================== */
/* Ancho fijo estandar: body + ID + clases para ganar siempre (productos/eliminados, ventas, ingresos, trazabilidad). */
body #dashboard-modal.is-venta .dashboard-modal__dialog {
  width: 560px !important;
  min-width: 560px;
  max-width: calc(100vw - 32px);
}

/* Cuerpo compacto: paridad con modal compra (2026-03-21) */
#dashboard-modal.is-venta .dashboard-modal__body {
  padding: 14px 18px 12px;
}

#dashboard-modal.is-venta .dashboard-modal__form-container {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
}

/* Sticky header, single centered title */
#dashboard-modal.is-venta .np-modal-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-surface, #fff);
  border-bottom: 1px solid var(--color-border, #E2E8F0);
  padding-bottom: 8px;
}

#dashboard-modal.is-venta .dashboard-modal__title,
#dashboard-modal.is-venta .np-modal-title {
  width: 100%;
  text-align: center;
  font-family: var(--font-family-base, "DM Sans", ui-sans-serif, system-ui, sans-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: rgba(30, 41, 59, 1);
}

#dashboard-modal.is-venta .np-modal-header-main,
#dashboard-modal.is-venta .np-modal-title-row {
  justify-content: center;
}
#dashboard-modal.is-venta .dashboard-modal__subtitle {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
  margin: 2px 0 0 0;
  line-height: 1.3;
}

/* Hide inner title block (duplicate) - modal uses shell title only */
#dashboard-modal.is-venta .card.form--dense > h2,
#dashboard-modal.is-venta .card.form--dense > .subtitle,
#dashboard-modal.is-venta .card.form--dense > .info-tip,
#dashboard-modal.is-venta .card.form--dense > hr.section-hr {
  display: none;
}

/* Remove double background/card - inner card looks flat */
#dashboard-modal.is-venta .card.form--dense {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  max-width: none;
}

/* ==========================================================================
   MODAL SHELL - Registrar compra: mismo skeleton que venta (is-compra)
   ========================================================================== */
body #dashboard-modal.is-compra .dashboard-modal__dialog {
  width: 560px !important;
  min-width: 560px;
  max-width: calc(100vw - 32px);
}
/* Cuerpo algo mas compacto que venta (menos scroll en compra agricola) */
#dashboard-modal.is-compra .dashboard-modal__body {
  padding: 14px 18px 12px;
}
#dashboard-modal.is-compra .dashboard-modal__form-container {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
#dashboard-modal.is-compra .np-modal-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-surface, #fff);
  border-bottom: 1px solid var(--color-border, #E2E8F0);
  padding-bottom: 8px;
}
#dashboard-modal.is-compra .dashboard-modal__title,
#dashboard-modal.is-compra .np-modal-title {
  width: 100%;
  text-align: center;
  font-family: var(--font-family-base, "DM Sans", ui-sans-serif, system-ui, sans-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: rgba(30, 41, 59, 1);
}
#dashboard-modal.is-compra .np-modal-header-main,
#dashboard-modal.is-compra .np-modal-title-row {
  justify-content: center;
}
#dashboard-modal.is-compra .dashboard-modal__subtitle {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
  margin: 2px 0 0 0;
  line-height: 1.3;
}
#dashboard-modal.is-compra .card.form--dense > h2,
#dashboard-modal.is-compra .card.form--dense > .subtitle,
#dashboard-modal.is-compra .card.form--dense > p.subtitle,
#dashboard-modal.is-compra .card.form--dense > hr.section-hr {
  display: none;
}
#dashboard-modal.is-compra .card.form--dense {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  max-width: none;
}
#dashboard-modal.is-compra .np-modal-actions {
  position: sticky;
  bottom: 0;
  background: var(--color-surface, #fff);
  z-index: 4;
}

/* Modal compra: footer y bloques internos mas compactos (2026-03-20) */
/* Footer: gana a np_modal_actions.css (#dashboard-modal .np-modal-actions) */
#dashboard-modal.is-compra .np-modal-actions {
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 2px;
}
/* Resumen + vencimiento: menos margen entre bloques */
#dashboard-modal.is-compra #formIngreso .np-resumen-card,
#dashboard-modal.is-compra .dashboard-modal__form-container .np-resumen-card {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}
#dashboard-modal.is-compra #formIngreso .np-field-vencimiento label,
#dashboard-modal.is-compra .dashboard-modal__form-container .np-field-vencimiento label {
  margin-bottom: 2px;
}
#dashboard-modal.is-compra #formIngreso .np-field-vencimiento .info-vencimiento,
#dashboard-modal.is-compra .dashboard-modal__form-container .np-field-vencimiento .info-vencimiento {
  min-height: 32px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
/* Fila Unidad/Calidad: columnas equilibradas (evita caja angosta suelta) */
#dashboard-modal.is-compra .field.unit-width {
  max-width: none;
}
#dashboard-modal.is-compra #formIngreso .field textarea {
  min-height: 40px;
}

/* ==========================================================================
   MODAL SHELL - Registrar / Editar trabajador (patron canónico Compra - 2026-02-22)
   Mismo shell que is-compra: ancho 560px, header centrado, body padding, card transparente, footer sticky.
   ========================================================================== */
body #dashboard-modal.is-trabajador .dashboard-modal__dialog,
body #dashboard-modal.is-trabajador-edit .dashboard-modal__dialog,
body #dashboard-modal.is-cliente .dashboard-modal__dialog,
body #dashboard-modal.is-cliente-edit .dashboard-modal__dialog,
body #dashboard-modal.is-proveedor .dashboard-modal__dialog,
body #dashboard-modal.is-proveedor-edit .dashboard-modal__dialog {
  width: 560px !important;
  min-width: 560px;
  max-width: calc(100vw - 32px);
}
#dashboard-modal.is-trabajador .dashboard-modal__body,
#dashboard-modal.is-trabajador-edit .dashboard-modal__body,
#dashboard-modal.is-cliente .dashboard-modal__body,
#dashboard-modal.is-cliente-edit .dashboard-modal__body,
#dashboard-modal.is-proveedor .dashboard-modal__body,
#dashboard-modal.is-proveedor-edit .dashboard-modal__body {
  padding: 20px;
}
/* Edicion trabajador: mas compacto, accion rapida desde detalle (2026-02). */
#dashboard-modal.is-trabajador-edit .dashboard-modal__body {
  padding: 12px 16px;
}
#dashboard-modal.is-trabajador-edit .dashboard-modal__dialog {
  width: 500px !important;
  min-width: 500px;
}
#dashboard-modal.is-trabajador-edit .dashboard-modal__title,
#dashboard-modal.is-trabajador-edit .np-modal-title {
  font-size: 1rem;
  font-weight: 600;
}
#dashboard-modal.is-trabajador-edit .card.form--dense .grid2 {
  row-gap: 8px;
}
#dashboard-modal.is-trabajador-edit .np-modal-actions {
  padding-top: 12px;
  padding-bottom: 4px;
}
/* Modal Registrar mano de obra: mismo shell que trabajador/gasto (2026-02). */
body #dashboard-modal.is-mano-obra .dashboard-modal__dialog {
  width: 560px !important;
  min-width: 560px;
  max-width: calc(100vw - 32px);
}
/* Compact header and body: same level as Registrar gasto (less vertical air). */
#dashboard-modal.is-mano-obra .dashboard-modal__body { padding: 16px 20px; }
#dashboard-modal.is-mano-obra .np-modal-header { position: sticky; top: 0; z-index: 5; background: var(--color-surface, #fff); border-bottom: 1px solid var(--color-border, #E2E8F0); padding-bottom: 8px; }
#dashboard-modal.is-mano-obra .dashboard-modal__title,
#dashboard-modal.is-mano-obra .np-modal-title { width: 100%; text-align: center; font-size: 20px; font-weight: 700; line-height: 1; color: rgba(30, 41, 59, 1); }
#dashboard-modal.is-mano-obra .np-modal-header-main,
#dashboard-modal.is-mano-obra .np-modal-title-row { justify-content: center; }
#dashboard-modal.is-mano-obra .dashboard-modal__subtitle { text-align: center; font-size: 0.85rem; color: var(--color-text-muted, #64748b); margin: 2px 0 0 0; line-height: 1.3; }
#dashboard-modal.is-mano-obra .dashboard-modal__form-container { max-width: 520px; margin-left: auto; margin-right: auto; }
#dashboard-modal.is-mano-obra .card.form--dense { background: transparent; box-shadow: none; border: 0; padding: 0; }
/* Grid and sections: same compact row-gap as gasto (6px). */
#dashboard-modal.is-mano-obra .mano-obra-layout .grid2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 6px; align-items: start; }
/* Seccion pago: grid 2x2 (Fecha | Tipo pago, Tipo trabajo | Monto CLP). */
#dashboard-modal.is-mano-obra .card.form--dense .field[data-span="2"] { grid-column: 1 / -1; }
#dashboard-modal.is-mano-obra .mano-obra-layout { display: block; }
#dashboard-modal.is-mano-obra .mano-obra-section { margin-bottom: 12px; }
#dashboard-modal.is-mano-obra .mano-obra-section:last-of-type { margin-bottom: 0; }
/* Compact field/label/input: same as is-gasto (Design System V2). */
#dashboard-modal.is-mano-obra #formManoObraModal .mano-obra-layout .field { margin-bottom: 0; min-width: 0; display: flex; flex-direction: column; }
#dashboard-modal.is-mano-obra #formManoObraModal .mano-obra-layout .field label { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 500; color: var(--color-text, #334155); }
#dashboard-modal.is-mano-obra #formManoObraModal .mano-obra-layout .field input,
#dashboard-modal.is-mano-obra #formManoObraModal .mano-obra-layout .field select,
#dashboard-modal.is-mano-obra #formManoObraModal .mano-obra-layout .field textarea { width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; height: 32px; padding: 5px 10px; font-size: 13px; border-radius: 6px; border: 1px solid var(--color-border, #E2E8F0); }
#dashboard-modal.is-mano-obra #formManoObraModal .mano-obra-layout .field textarea { height: auto; min-height: 44px; resize: vertical; }
#dashboard-modal.is-mano-obra #formManoObraModal .field.input-suffix .input-suffix-wrap { position: relative; display: block; }
#dashboard-modal.is-mano-obra #formManoObraModal .field.input-suffix .suf { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-text-muted, #64748b); font-size: 14px; }
#dashboard-modal.is-mano-obra #formManoObraModal .field.input-suffix .input-suffix-wrap input { padding-left: 26px; }
#dashboard-modal.is-mano-obra #formManoObraModal .mano-obra-layout .field .helper-text { font-size: 11px; margin-top: 1px; color: var(--color-text-muted, #64748b); }
#dashboard-modal.is-mano-obra #formManoObraModal .mano-obra-helper-mensual { font-size: 11px; margin-top: 2px; color: var(--color-text-muted, #64748b); display: block; }
#dashboard-modal.is-mano-obra #formManoObraModal .mano-obra-trabajador-actions { margin-top: 6px; }
#dashboard-modal.is-mano-obra #formManoObraModal .np-btn-link-secondary { background: none; border: 0; padding: 0; font-size: 12px; color: var(--color-primary, #2563eb); cursor: pointer; text-decoration: underline; }
#dashboard-modal.is-mano-obra #formManoObraModal .np-btn-link-secondary:hover { color: var(--color-primary-hover, #1d4ed8); }
/* Bloque inline de alta rapida de trabajador: se despliega debajo del campo Trabajador. */
#dashboard-modal.is-mano-obra .mo-inline-trabajador-block {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--color-bg-subtle, #f8fafc);
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: 8px;
    grid-column: 1 / -1;
}
#dashboard-modal.is-mano-obra .mo-inline-trabajador-block .mo-inline-trabajador-inner { max-width: 100%; }
#dashboard-modal.is-mano-obra .mo-inline-trabajador-block .mo-inline-trabajador-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin-bottom: 8px;
}
#dashboard-modal.is-mano-obra .mo-inline-trabajador-block .mo-inline-trabajador-grid .field:first-child { grid-column: 1 / -1; }
#dashboard-modal.is-mano-obra .mo-inline-trabajador-block .field label {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text, #334155);
}
#dashboard-modal.is-mano-obra .mo-inline-trabajador-block .field input {
    width: 100%;
    box-sizing: border-box;
    height: 32px;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid var(--color-border, #E2E8F0);
}
#dashboard-modal.is-mano-obra .mo-inline-trabajador-block .mo-inline-trabajador-error {
    font-size: 12px;
    color: #b91c1c;
    margin-bottom: 8px;
}
#dashboard-modal.is-mano-obra .mo-inline-trabajador-block .mo-inline-trabajador-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
#dashboard-modal.is-mano-obra .mo-inline-trabajador-block .mo-inline-trabajador-actions .btn-sm {
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 6px;
}
#dashboard-modal.is-mano-obra .np-modal-actions { position: sticky; bottom: 0; background: var(--color-surface, #fff); z-index: 4; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border, #E2E8F0); }
/* V2: ocultar titulo/subtitle/hr interno; solo el shell del modal muestra titulo y subtitulo (igual que venta/gasto). */
#dashboard-modal.is-mano-obra .card.form--dense > h2,
#dashboard-modal.is-mano-obra .card.form--dense > .subtitle,
#dashboard-modal.is-mano-obra .card.form--dense > p.subtitle,
#dashboard-modal.is-mano-obra .card.form--dense > hr.section-hr { display: none; }
/* Edicion rapida desde detalle: mano de obra + gasto (DS V2 shared shell, 2026-02 / 2026-04).
   is-gasto-edit mirrors is-mano-obra-edit so both use the same dashboard modal layout. */
body #dashboard-modal.is-mano-obra-edit .dashboard-modal__dialog,
body #dashboard-modal.is-gasto-edit .dashboard-modal__dialog { width: 560px !important; min-width: 560px; max-width: calc(100vw - 32px); }
#dashboard-modal.is-mano-obra-edit .dashboard-modal__body,
#dashboard-modal.is-gasto-edit .dashboard-modal__body { padding: 20px; }
#dashboard-modal.is-mano-obra-edit .np-modal-header,
#dashboard-modal.is-gasto-edit .np-modal-header { position: sticky; top: 0; z-index: 5; background: var(--color-surface, #fff); border-bottom: 1px solid var(--color-border, #E2E8F0); padding-bottom: 12px; }
#dashboard-modal.is-mano-obra-edit .dashboard-modal__title,
#dashboard-modal.is-mano-obra-edit .np-modal-title,
#dashboard-modal.is-gasto-edit .dashboard-modal__title,
#dashboard-modal.is-gasto-edit .np-modal-title { width: 100%; text-align: center; font-size: 20px; font-weight: 700; line-height: 1; color: rgba(30, 41, 59, 1); }
#dashboard-modal.is-mano-obra-edit .np-modal-header-main,
#dashboard-modal.is-mano-obra-edit .np-modal-title-row,
#dashboard-modal.is-gasto-edit .np-modal-header-main,
#dashboard-modal.is-gasto-edit .np-modal-title-row { justify-content: center; }
#dashboard-modal.is-mano-obra-edit .dashboard-modal__subtitle,
#dashboard-modal.is-gasto-edit .dashboard-modal__subtitle { text-align: center; font-size: 0.9rem; color: var(--color-text-muted, #64748b); margin: 4px 0 0 0; line-height: 1.3; }
#dashboard-modal.is-mano-obra-edit .dashboard-modal__form-container,
#dashboard-modal.is-gasto-edit .dashboard-modal__form-container { max-width: 520px; margin-left: auto; margin-right: auto; }
#dashboard-modal.is-mano-obra-edit .card.form--dense,
#dashboard-modal.is-gasto-edit .card.form--dense { background: transparent; box-shadow: none; border: 0; padding: 0; }
#dashboard-modal.is-mano-obra-edit .card.form--dense .grid2,
#dashboard-modal.is-gasto-edit .card.form--dense .grid2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 10px; }
#dashboard-modal.is-mano-obra-edit .card.form--dense .field[data-span="2"],
#dashboard-modal.is-gasto-edit .card.form--dense .field[data-span="2"] { grid-column: 1 / -1; }
#dashboard-modal.is-mano-obra-edit .np-modal-actions,
#dashboard-modal.is-gasto-edit .np-modal-actions { position: sticky; bottom: 0; background: var(--color-surface, #fff); z-index: 4; }
#dashboard-modal.is-mano-obra-edit .card.form--dense > h2,
#dashboard-modal.is-mano-obra-edit .card.form--dense > .subtitle,
#dashboard-modal.is-mano-obra-edit .card.form--dense > p.subtitle,
#dashboard-modal.is-mano-obra-edit .card.form--dense > hr.section-hr,
#dashboard-modal.is-gasto-edit .card.form--dense > h2,
#dashboard-modal.is-gasto-edit .card.form--dense > .subtitle,
#dashboard-modal.is-gasto-edit .card.form--dense > p.subtitle,
#dashboard-modal.is-gasto-edit .card.form--dense > hr.section-hr { display: none; }
#dashboard-modal.is-trabajador .dashboard-modal__form-container,
#dashboard-modal.is-trabajador-edit .dashboard-modal__form-container,
#dashboard-modal.is-cliente .dashboard-modal__form-container,
#dashboard-modal.is-cliente-edit .dashboard-modal__form-container,
#dashboard-modal.is-proveedor .dashboard-modal__form-container,
#dashboard-modal.is-proveedor-edit .dashboard-modal__form-container {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
}
#dashboard-modal.is-trabajador .np-modal-header,
#dashboard-modal.is-trabajador-edit .np-modal-header,
#dashboard-modal.is-cliente .np-modal-header,
#dashboard-modal.is-cliente-edit .np-modal-header,
#dashboard-modal.is-proveedor .np-modal-header,
#dashboard-modal.is-proveedor-edit .np-modal-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-surface, #fff);
  border-bottom: 1px solid var(--color-border, #E2E8F0);
  padding-bottom: 12px;
}
#dashboard-modal.is-trabajador .dashboard-modal__title,
#dashboard-modal.is-trabajador .np-modal-title,
#dashboard-modal.is-trabajador-edit .dashboard-modal__title,
#dashboard-modal.is-trabajador-edit .np-modal-title,
#dashboard-modal.is-cliente .dashboard-modal__title,
#dashboard-modal.is-cliente .np-modal-title,
#dashboard-modal.is-cliente-edit .dashboard-modal__title,
#dashboard-modal.is-cliente-edit .np-modal-title,
#dashboard-modal.is-proveedor .dashboard-modal__title,
#dashboard-modal.is-proveedor .np-modal-title,
#dashboard-modal.is-proveedor-edit .dashboard-modal__title,
#dashboard-modal.is-proveedor-edit .np-modal-title {
  width: 100%;
  text-align: center;
  font-family: var(--font-family-base, "DM Sans", ui-sans-serif, system-ui, sans-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: rgba(30, 41, 59, 1);
}
#dashboard-modal.is-trabajador .np-modal-header-main,
#dashboard-modal.is-trabajador .np-modal-title-row,
#dashboard-modal.is-trabajador-edit .np-modal-header-main,
#dashboard-modal.is-trabajador-edit .np-modal-title-row,
#dashboard-modal.is-cliente .np-modal-header-main,
#dashboard-modal.is-cliente .np-modal-title-row,
#dashboard-modal.is-cliente-edit .np-modal-header-main,
#dashboard-modal.is-cliente-edit .np-modal-title-row,
#dashboard-modal.is-proveedor .np-modal-header-main,
#dashboard-modal.is-proveedor .np-modal-title-row,
#dashboard-modal.is-proveedor-edit .np-modal-header-main,
#dashboard-modal.is-proveedor-edit .np-modal-title-row {
  justify-content: center;
}
#dashboard-modal.is-trabajador .dashboard-modal__subtitle,
#dashboard-modal.is-trabajador-edit .dashboard-modal__subtitle,
#dashboard-modal.is-cliente .dashboard-modal__subtitle,
#dashboard-modal.is-cliente-edit .dashboard-modal__subtitle,
#dashboard-modal.is-proveedor .dashboard-modal__subtitle,
#dashboard-modal.is-proveedor-edit .dashboard-modal__subtitle {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
  margin: 4px 0 0 0;
  line-height: 1.3;
}
#dashboard-modal.is-trabajador .card.form--dense > h2,
#dashboard-modal.is-trabajador .card.form--dense > .subtitle,
#dashboard-modal.is-trabajador .card.form--dense > p.subtitle,
#dashboard-modal.is-trabajador .card.form--dense > hr.section-hr,
#dashboard-modal.is-trabajador-edit .card.form--dense > h2,
#dashboard-modal.is-trabajador-edit .card.form--dense > .subtitle,
#dashboard-modal.is-trabajador-edit .card.form--dense > p.subtitle,
#dashboard-modal.is-trabajador-edit .card.form--dense > hr.section-hr,
#dashboard-modal.is-cliente .card.form--dense > h2,
#dashboard-modal.is-cliente .card.form--dense > .subtitle,
#dashboard-modal.is-cliente .card.form--dense > p.subtitle,
#dashboard-modal.is-cliente .card.form--dense > hr.section-hr,
#dashboard-modal.is-cliente-edit .card.form--dense > h2,
#dashboard-modal.is-cliente-edit .card.form--dense > .subtitle,
#dashboard-modal.is-cliente-edit .card.form--dense > p.subtitle,
#dashboard-modal.is-cliente-edit .card.form--dense > hr.section-hr,
#dashboard-modal.is-proveedor .card.form--dense > h2,
#dashboard-modal.is-proveedor .card.form--dense > .subtitle,
#dashboard-modal.is-proveedor .card.form--dense > p.subtitle,
#dashboard-modal.is-proveedor .card.form--dense > hr.section-hr,
#dashboard-modal.is-proveedor-edit .card.form--dense > h2,
#dashboard-modal.is-proveedor-edit .card.form--dense > .subtitle,
#dashboard-modal.is-proveedor-edit .card.form--dense > p.subtitle,
#dashboard-modal.is-proveedor-edit .card.form--dense > hr.section-hr {
  display: none;
}
#dashboard-modal.is-trabajador .card.form--dense,
#dashboard-modal.is-trabajador-edit .card.form--dense,
#dashboard-modal.is-cliente .card.form--dense,
#dashboard-modal.is-cliente-edit .card.form--dense,
#dashboard-modal.is-proveedor .card.form--dense,
#dashboard-modal.is-proveedor-edit .card.form--dense {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  max-width: none;
}
/* Registrar trabajador: mismo aire que modal Compra; card con respiracion superior. */
#dashboard-modal.is-trabajador .card.form--dense,
#dashboard-modal.is-cliente .card.form--dense,
#dashboard-modal.is-proveedor .card.form--dense {
  padding-top: var(--spacing-2, 8px);
}
#dashboard-modal.is-trabajador .np-modal-actions,
#dashboard-modal.is-trabajador-edit .np-modal-actions,
#dashboard-modal.is-cliente .np-modal-actions,
#dashboard-modal.is-cliente-edit .np-modal-actions,
#dashboard-modal.is-proveedor .np-modal-actions,
#dashboard-modal.is-proveedor-edit .np-modal-actions {
  position: sticky;
  bottom: 0;
  background: var(--color-surface, #fff);
  z-index: 4;
}
/* Formulario trabajador: grid 2 columnas. Registrar (is-trabajador): mismo aire que modal Compra. */
#dashboard-modal.is-trabajador .card.form--dense .grid2,
#dashboard-modal.is-trabajador-edit .card.form--dense .grid2,
#dashboard-modal.is-cliente .card.form--dense .grid2,
#dashboard-modal.is-cliente-edit .card.form--dense .grid2,
#dashboard-modal.is-proveedor .card.form--dense .grid2,
#dashboard-modal.is-proveedor-edit .card.form--dense .grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  row-gap: 10px;
}
#dashboard-modal.is-trabajador .card.form--dense .grid2,
#dashboard-modal.is-cliente .card.form--dense .grid2,
#dashboard-modal.is-proveedor .card.form--dense .grid2 {
  column-gap: var(--spacing-4, 16px);
  row-gap: var(--spacing-4, 16px);
}
#dashboard-modal.is-trabajador .card.form--dense .grid2 .field[data-span="2"],
#dashboard-modal.is-trabajador-edit .card.form--dense .grid2 .field[data-span="2"],
#dashboard-modal.is-cliente .card.form--dense .grid2 .field[data-span="2"],
#dashboard-modal.is-cliente-edit .card.form--dense .grid2 .field[data-span="2"],
#dashboard-modal.is-proveedor .card.form--dense .grid2 .field[data-span="2"],
#dashboard-modal.is-proveedor-edit .card.form--dense .grid2 .field[data-span="2"] {
  grid-column: 1 / -1;
}
#dashboard-modal.is-trabajador .card.form--dense .field,
#dashboard-modal.is-trabajador-edit .card.form--dense .field,
#dashboard-modal.is-cliente .card.form--dense .field,
#dashboard-modal.is-cliente-edit .card.form--dense .field,
#dashboard-modal.is-proveedor .card.form--dense .field,
#dashboard-modal.is-proveedor-edit .card.form--dense .field {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#dashboard-modal.is-trabajador .card.form--dense .field label,
#dashboard-modal.is-trabajador-edit .card.form--dense .field label,
#dashboard-modal.is-cliente .card.form--dense .field label,
#dashboard-modal.is-cliente-edit .card.form--dense .field label,
#dashboard-modal.is-proveedor .card.form--dense .field label,
#dashboard-modal.is-proveedor-edit .card.form--dense .field label {
  margin-bottom: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text, #374151);
}
#dashboard-modal.is-trabajador .card.form--dense .field label,
#dashboard-modal.is-cliente .card.form--dense .field label,
#dashboard-modal.is-proveedor .card.form--dense .field label {
  margin-bottom: var(--spacing-2, 8px);
}
#dashboard-modal.is-trabajador .card.form--dense .field input,
#dashboard-modal.is-trabajador-edit .card.form--dense .field input,
#dashboard-modal.is-trabajador .card.form--dense .field select,
#dashboard-modal.is-trabajador-edit .card.form--dense .field select,
#dashboard-modal.is-cliente .card.form--dense .field input,
#dashboard-modal.is-cliente-edit .card.form--dense .field input,
#dashboard-modal.is-cliente .card.form--dense .field select,
#dashboard-modal.is-cliente-edit .card.form--dense .field select,
#dashboard-modal.is-proveedor .card.form--dense .field input,
#dashboard-modal.is-proveedor-edit .card.form--dense .field input,
#dashboard-modal.is-proveedor .card.form--dense .field select,
#dashboard-modal.is-proveedor-edit .card.form--dense .field select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--color-border, #E2E8F0);
}
#dashboard-modal.is-trabajador .card.form--dense .field input,
#dashboard-modal.is-trabajador .card.form--dense .field select,
#dashboard-modal.is-cliente .card.form--dense .field input,
#dashboard-modal.is-cliente .card.form--dense .field select,
#dashboard-modal.is-proveedor .card.form--dense .field input,
#dashboard-modal.is-proveedor .card.form--dense .field select {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
}
#dashboard-modal.is-trabajador .card.form--dense .field .error-text,
#dashboard-modal.is-trabajador .card.form--dense .field .monto-formateado-hint,
#dashboard-modal.is-trabajador .card.form--dense .field small,
#dashboard-modal.is-cliente .card.form--dense .field .error-text,
#dashboard-modal.is-cliente .card.form--dense .field .monto-formateado-hint,
#dashboard-modal.is-cliente .card.form--dense .field small,
#dashboard-modal.is-proveedor .card.form--dense .field .error-text,
#dashboard-modal.is-proveedor .card.form--dense .field .monto-formateado-hint,
#dashboard-modal.is-proveedor .card.form--dense .field small {
  margin-top: var(--spacing-1, 4px);
}
#dashboard-modal.is-trabajador .card.form--dense .field.input-suffix .input-suffix-wrap,
#dashboard-modal.is-trabajador-edit .card.form--dense .field.input-suffix .input-suffix-wrap,
#dashboard-modal.is-cliente .card.form--dense .field.input-suffix .input-suffix-wrap,
#dashboard-modal.is-cliente-edit .card.form--dense .field.input-suffix .input-suffix-wrap {
  position: relative;
  display: block;
}
#dashboard-modal.is-trabajador .card.form--dense .field.input-suffix .suf,
#dashboard-modal.is-trabajador-edit .card.form--dense .field.input-suffix .suf,
#dashboard-modal.is-cliente .card.form--dense .field.input-suffix .suf,
#dashboard-modal.is-cliente-edit .card.form--dense .field.input-suffix .suf {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-muted, #64748b);
  font-size: 14px;
}
#dashboard-modal.is-trabajador .card.form--dense .field.input-suffix .input-suffix-wrap input,
#dashboard-modal.is-trabajador-edit .card.form--dense .field.input-suffix .input-suffix-wrap input,
#dashboard-modal.is-cliente .card.form--dense .field.input-suffix .input-suffix-wrap input,
#dashboard-modal.is-cliente-edit .card.form--dense .field.input-suffix .input-suffix-wrap input {
  padding-left: 28px;
}
#dashboard-modal.is-trabajador .card.form--dense .field.input-suffix .suf,
#dashboard-modal.is-cliente .card.form--dense .field.input-suffix .suf {
  left: 12px;
}
#dashboard-modal.is-trabajador .card.form--dense .field.input-suffix .input-suffix-wrap input,
#dashboard-modal.is-cliente .card.form--dense .field.input-suffix .input-suffix-wrap input {
  padding-left: 32px;
}
#dashboard-modal.is-trabajador .card.form--dense .np-modal-actions,
#dashboard-modal.is-cliente .card.form--dense .np-modal-actions {
  margin-top: var(--spacing-5, 20px);
  padding-top: var(--spacing-4, 16px);
}

/* Cliente edit from detail: compact quick-action sized shell so detail remains visible behind. */
body #dashboard-modal.is-cliente-edit .dashboard-modal__dialog {
  width: 460px !important;
  min-width: 460px;
  max-width: calc(100vw - 48px);
}

#dashboard-modal.is-cliente-edit .dashboard-modal__body {
  padding: 16px;
}

#dashboard-modal.is-cliente-edit .dashboard-modal__form-container {
  max-width: 420px;
}

/* ==========================================================================
   MODAL SHELL - Registrar gasto (Fase 1 - 2026-03-11). Header homologado a venta/compra.
   Ajuste final 2026-03-11: mismo contrato visual de titulo, subtitulo y boton cerrar.
   ========================================================================== */
body #dashboard-modal.is-gasto .dashboard-modal__dialog {
  width: 560px !important;
  min-width: 560px;
  max-width: calc(100vw - 32px);
}
/* Body algo mas compacto para evitar scroll vertical en desktop estandar */
#dashboard-modal.is-gasto .dashboard-modal__body {
  padding: 14px 20px 16px;
}
#dashboard-modal.is-gasto #np-gasto-modal-error {
  margin-bottom: 8px !important;
}
#dashboard-modal.is-gasto .dashboard-modal__form-container {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
}
/* Header: mismo contrato que is-venta (titulo centrado, subtitulo, padding, borde) */
#dashboard-modal.is-gasto .np-modal-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-surface, #fff);
  border-bottom: 1px solid var(--color-border, #E2E8F0);
  padding-bottom: 12px;
}
#dashboard-modal.is-gasto .dashboard-modal__title,
#dashboard-modal.is-gasto .np-modal-title {
  width: 100%;
  text-align: center;
  font-family: var(--font-family-base, "DM Sans", ui-sans-serif, system-ui, sans-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: rgba(30, 41, 59, 1);
}
#dashboard-modal.is-gasto .np-modal-header-main,
#dashboard-modal.is-gasto .np-modal-title-row {
  justify-content: center;
}
#dashboard-modal.is-gasto .dashboard-modal__subtitle {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
  margin: 4px 0 0 0;
  line-height: 1.3;
}
#dashboard-modal.is-gasto .card.form--dense > h2,
#dashboard-modal.is-gasto .card.form--dense > .subtitle,
#dashboard-modal.is-gasto .card.form--dense > hr.section-hr {
  display: none;
}
#dashboard-modal.is-gasto .card.form--dense {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  max-width: none;
}
#dashboard-modal.is-gasto .np-modal-actions {
  position: sticky;
  bottom: 0;
  background: var(--color-surface, #fff);
  z-index: 4;
}

/* Ajuste visual/estructura V2 - 2026-03-11: layout y secciones homologados a Registrar venta */
/* Densidad compacta - 2026-03-11: alineado con modal Registrar venta (solo CSS) */
#dashboard-modal.is-gasto .gasto-form-wrapper {
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
  margin: 0;
}
/* Grid mas compacto para reducir altura total y evitar scroll */
#dashboard-modal.is-gasto .gasto-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  row-gap: 6px;
  align-items: start;
}
#dashboard-modal.is-gasto .gasto-section {
  display: contents;
}
#dashboard-modal.is-gasto .gasto-section .field[data-span="2"],
#dashboard-modal.is-gasto .gasto-section .field.field--full {
  grid-column: 1 / -1;
}
/* Fecha y Monto en dos columnas alineadas */
#dashboard-modal.is-gasto .gasto-section--principal .field[data-name="categoria"] { grid-column: 1 / -1; }
#dashboard-modal.is-gasto .gasto-section--principal .field[data-name="fecha_gasto"] { grid-column: 1; }
#dashboard-modal.is-gasto .gasto-section--principal .field[data-name="monto"] { grid-column: 2; }
#dashboard-modal.is-gasto .gasto-section--recurrente .field { grid-column: 1 / -1; }
#dashboard-modal.is-gasto .gasto-section--lote .field { grid-column: 1 / -1; }
#dashboard-modal.is-gasto .gasto-section--alcance .field { grid-column: 1 / -1; }
#dashboard-modal.is-gasto .gasto-section--descripcion .field { grid-column: 1 / -1; }
#dashboard-modal.is-gasto .gasto-section--documento .field[data-name="contacto_proveedor"] { grid-column: 1; }
#dashboard-modal.is-gasto .gasto-section--documento .field[data-name="tiene_documento"] { grid-column: 2; }
#dashboard-modal.is-gasto .gasto-section--documento .field[data-name="tipo_documento"] { grid-column: 1; }
#dashboard-modal.is-gasto .gasto-section--documento .field[data-name="numero_documento"] { grid-column: 2; }
#dashboard-modal.is-gasto .gasto-section--comentario .field { grid-column: 1 / -1; }
/* Espaciado compacto entre campos (sin margin extra; el row-gap del grid define la separacion) */
#dashboard-modal.is-gasto #formGasto .gasto-layout .field {
  margin-bottom: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
#dashboard-modal.is-gasto #formGasto .gasto-layout .field label {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text, #334155);
}
#dashboard-modal.is-gasto #formGasto .gasto-layout .field input,
#dashboard-modal.is-gasto #formGasto .gasto-layout .field select,
#dashboard-modal.is-gasto #formGasto .gasto-layout .field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  height: 32px;
  padding: 5px 10px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--color-border, #E2E8F0);
}
#dashboard-modal.is-gasto #formGasto .gasto-layout .field textarea {
  height: auto;
  min-height: 44px;
  padding: 5px 10px;
  resize: vertical;
}
#dashboard-modal.is-gasto #formGasto .gasto-layout .field .error-text,
#dashboard-modal.is-gasto #formGasto .gasto-layout .field .helper-text {
  font-size: 11px;
  margin-top: 1px;
}
/* Campo monto con sufijo $ (wrapper para alinear $ con el input) */
#dashboard-modal.is-gasto #formGasto .field.input-suffix .input-suffix-wrap {
  position: relative;
  display: block;
}
#dashboard-modal.is-gasto #formGasto .field.input-suffix .suf {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-muted, #64748b);
  font-size: 14px;
}
#dashboard-modal.is-gasto #formGasto .field.input-suffix .input-suffix-wrap input {
  width: 100%;
  box-sizing: border-box;
  padding-left: 26px;
  min-width: 0;
  height: 32px;
  padding: 5px 10px;
  padding-left: 26px;
}
/* Footer homologado al estandar V2 (espacio superior reducido para compactar) */
#dashboard-modal.is-gasto .gasto-modal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--color-border, #E2E8F0);
  padding-top: 12px;
  margin-top: 12px;
  position: sticky;
  bottom: 0;
  background: var(--color-surface, #fff);
  z-index: 4;
}
#dashboard-modal.is-gasto .gasto-modal-footer .actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  text-align: right;
}
/* CTA principal: misma jerarquia y composicion que Registrar venta */
#dashboard-modal.is-gasto .gasto-modal-footer .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  line-height: 1;
  box-sizing: border-box;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  background: #1967d2;
  color: #fff;
  border: 1px solid #1967d2;
  cursor: pointer;
}
#dashboard-modal.is-gasto .gasto-modal-footer .btn-primary:hover {
  background: #1557b0;
  border-color: #1557b0;
  filter: none;
}
#dashboard-modal.is-gasto .gasto-modal-footer .btn-primary:active {
  transform: translateY(0);
}
#dashboard-modal.is-gasto .gasto-modal-footer .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Cancelar gasto: homologado a np-btn-cancelar-venta (estandar V2) */
#dashboard-modal .np-btn-cancelar-gasto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  line-height: 1;
  box-sizing: border-box;
  padding: 10px 24px;
  border: 1px solid var(--color-border, #E2E8F0);
  background: var(--color-surface-alt, #F8FAFC);
  color: var(--color-text, #334155);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}
#dashboard-modal .np-btn-cancelar-gasto:hover {
  background: var(--color-border, #E2E8F0);
}
/* Toolbar lote: por defecto columna (legacy/otros usos). Fila de filtros (.np-lote-filtros) se sobreescribe abajo. */
#dashboard-modal.is-gasto .np-lote-toolbar,
#dashboard-modal.is-mano-obra .np-lote-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0;
}
/* Fila de filtros del lote: una sola linea - Ver (izq) + Incluir agotados (der). Mismo patron en gasto y mano de obra. */
#dashboard-modal.is-gasto .field[data-name="lote_id"] .np-lote-filtros,
#dashboard-modal.is-mano-obra .field[data-name="lote_id"] .np-lote-filtros {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
  margin-bottom: 8px;
}
/* Bloque lote unificado (gasto + mano-obra): orden logico filtros -> selector -> resumen. Mismo spacing en ambos. */
#dashboard-modal.is-gasto .field[data-name="lote_id"] #lote_id,
#dashboard-modal.is-mano-obra .field[data-name="lote_id"] #mo-modal-lote_id {
  margin-bottom: 4px;
}
#dashboard-modal.is-gasto .field[data-name="lote_id"] .np-lotes-hint,
#dashboard-modal.is-mano-obra .field[data-name="lote_id"] .np-lotes-hint {
  margin-bottom: 4px;
}
#dashboard-modal.is-gasto .np-lote-card,
#dashboard-modal.is-mano-obra .np-lote-card {
  margin-top: 4px;
}
#dashboard-modal.is-gasto .np-lote-view,
#dashboard-modal.is-mano-obra .np-lote-view {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 0;
  min-height: 0;
}
#dashboard-modal.is-gasto .np-lote-view-label,
#dashboard-modal.is-mano-obra .np-lote-view-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted, #94a3b8);
  margin-right: 6px;
  flex-shrink: 0;
  line-height: 1.4;
}
/* Contenedor opciones: filtro textual sutil (sin capsulas, sin fondo, tipo "Ver: Todos · Padres · Trasladados") */
#dashboard-modal.is-gasto .np-lote-view-options,
#dashboard-modal.is-mano-obra .np-lote-view-options {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
  border: none;
  background: none;
  padding: 0;
}
/* Cada opcion = texto clickeable; radio nativo oculto pero funcional */
#dashboard-modal.is-gasto .np-lote-radio,
#dashboard-modal.is-mano-obra .np-lote-radio {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted, #94a3b8);
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
  line-height: 1.4;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  transition: color 0.12s ease, font-weight 0.12s ease, border-color 0.12s ease;
}
#dashboard-modal.is-gasto .np-lote-radio:hover,
#dashboard-modal.is-mano-obra .np-lote-radio:hover {
  color: var(--color-text-secondary, #64748b);
}
#dashboard-modal.is-gasto .np-lote-radio:not(:last-child)::after,
#dashboard-modal.is-mano-obra .np-lote-radio:not(:last-child)::after {
  content: " · ";
  margin-left: 2px;
  margin-right: 4px;
  color: var(--color-text-muted, #94a3b8);
  font-weight: 400;
  pointer-events: none;
}
/* Radio oculto visualmente; sigue en el DOM para name/value, submit y JS */
#dashboard-modal.is-gasto .np-lote-radio input[type="radio"],
#dashboard-modal.is-mano-obra .np-lote-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 1;
}
/* Estado activo: discreto (texto mas oscuro + subrayado fino, sin fondo) */
#dashboard-modal.is-gasto .np-lote-radio:has(input:checked),
#dashboard-modal.is-mano-obra .np-lote-radio:has(input:checked) {
  font-weight: 600;
  color: var(--color-text, #334155);
  border-bottom: 1px solid var(--color-text-secondary, #64748b);
}
#dashboard-modal.is-gasto .np-lote-radio:has(input:checked):hover,
#dashboard-modal.is-mano-obra .np-lote-radio:has(input:checked):hover {
  color: var(--color-text, #334155);
}
#dashboard-modal.is-gasto .np-lote-searchrow,
#dashboard-modal.is-mano-obra .np-lote-searchrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
#dashboard-modal.is-gasto .np-lote-search,
#dashboard-modal.is-mano-obra .np-lote-search {
  flex: 1;
  min-width: 140px;
}
#dashboard-modal.is-gasto .np-lote-search input,
#dashboard-modal.is-mano-obra .np-lote-search input {
  width: 100%;
  box-sizing: border-box;
}
#dashboard-modal.is-gasto .np-switch,
#dashboard-modal.is-mano-obra .np-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-muted, #64748b);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}
#dashboard-modal.is-gasto .np-switch .np-switch-text,
#dashboard-modal.is-mano-obra .np-switch .np-switch-text {
  font-size: 11px;
  color: var(--color-text-muted, #64748b);
}
#dashboard-modal.is-gasto .np-switch input,
#dashboard-modal.is-mano-obra .np-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
#dashboard-modal.is-gasto .np-switch-track,
#dashboard-modal.is-mano-obra .np-switch-track {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: var(--color-border, #E2E8F0);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: background 120ms ease, border-color 120ms ease;
  flex-shrink: 0;
}
#dashboard-modal.is-gasto .np-switch-track::after,
#dashboard-modal.is-mano-obra .np-switch-track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transform: translateY(-50%);
  transition: transform 120ms ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
#dashboard-modal.is-gasto .np-switch input:checked + .np-switch-track,
#dashboard-modal.is-mano-obra .np-switch input:checked + .np-switch-track {
  background: #1967d2;
  border-color: #1557b0;
}
#dashboard-modal.is-gasto .np-switch input:checked + .np-switch-track::after,
#dashboard-modal.is-mano-obra .np-switch input:checked + .np-switch-track::after {
  transform: translate(12px, -50%);
}
#dashboard-modal.is-gasto .np-switch input:focus-visible + .np-switch-track,
#dashboard-modal.is-mano-obra .np-switch input:focus-visible + .np-switch-track {
  outline: 2px solid rgba(25, 103, 210, 0.35);
  outline-offset: 2px;
}
/* Ficha compacta de resumen de lote (espacio unificado con bloque lote: 4px arriba). */
#dashboard-modal.is-gasto .np-lote-card {
  margin-top: 4px;
  padding: 8px 12px;
  background: var(--color-surface-alt, #F8FAFC);
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 6px;
  font-size: 12px;
}
#dashboard-modal.is-gasto .np-lote-resumen-titulo,
#dashboard-modal.is-mano-obra .np-lote-resumen-titulo {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary, #475569);
  margin-bottom: 6px;
}
#dashboard-modal.is-gasto .np-lote-total-acumulado,
#dashboard-modal.is-mano-obra .np-lote-total-acumulado {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border, #E2E8F0);
}
#dashboard-modal.is-gasto .np-lote-total-val,
#dashboard-modal.is-mano-obra .np-lote-total-val {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text, #334155);
}
#dashboard-modal.is-gasto .np-lote-ficha {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#dashboard-modal.is-gasto .np-lote-ficha--compact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: baseline;
}
#dashboard-modal.is-gasto .np-lote-ficha--compact .np-lote-ficha-row {
  display: contents;
}
#dashboard-modal.is-gasto .np-lote-ficha--compact .np-lote-ficha-row .np-lote-ficha-label {
  grid-column: 1;
}
#dashboard-modal.is-gasto .np-lote-ficha--compact .np-lote-ficha-row .np-lote-ficha-value {
  grid-column: 2;
}
#dashboard-modal.is-gasto .np-lote-ficha--compact .np-lote-ficha-row--full {
  display: flex;
  grid-column: 1 / -1;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
}
#dashboard-modal.is-gasto .np-lote-ficha--compact .np-lote-ficha-row--full .np-lote-ficha-label {
  flex-shrink: 0;
  min-width: 0;
}
#dashboard-modal.is-gasto .np-lote-ficha-id,
#dashboard-modal.is-gasto .np-lote-ficha-estado,
#dashboard-modal.is-gasto .np-lote-ficha-costos {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#dashboard-modal.is-gasto .np-lote-ficha-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 0;
}
#dashboard-modal.is-gasto .np-lote-ficha-label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted, #64748b);
  min-width: 82px;
}
#dashboard-modal.is-gasto .np-lote-ficha-value {
  font-size: 12px;
  color: var(--color-text, #334155);
  word-break: break-word;
}
#dashboard-modal.is-gasto .np-lote-ficha-value .np-badge {
  font-size: 11px;
}
#dashboard-modal.is-gasto .np-lote-ficha-costos {
  border-top: 1px solid var(--color-border, #E2E8F0);
  padding-top: 8px;
  margin-top: 2px;
}
#dashboard-modal.is-gasto .np-lote-ficha-costs-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary, #475569);
  margin-bottom: 4px;
}
#dashboard-modal.is-gasto .np-lote-ficha-note {
  font-size: 11px;
  color: var(--color-text-muted, #64748b);
}
#dashboard-modal.is-gasto .np-lote-ficha-desglose {
  font-size: 11px;
  color: var(--color-text-muted, #64748b);
}
#dashboard-modal.is-gasto .np-lote-ficha-cost-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Bloque inferior del lote: dos secciones claras (2026-03-11) Costos del lote | Gastos operacionales asociados */
#dashboard-modal.is-gasto .np-lote-gastos-block {
  margin-top: 0;
}
#dashboard-modal.is-gasto .np-lote-seccion,
#dashboard-modal.is-mano-obra .np-lote-seccion {
  margin-bottom: 6px;
}
#dashboard-modal.is-gasto .np-lote-seccion:last-child,
#dashboard-modal.is-mano-obra .np-lote-seccion:last-child {
  margin-bottom: 0;
}
#dashboard-modal.is-gasto .np-lote-seccion-titulo {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary, #475569);
  margin-bottom: 4px;
}
#dashboard-modal.is-gasto .np-lote-gastos-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary, #475569);
  margin-bottom: 6px;
}
#dashboard-modal.is-gasto .np-lote-gastos-note,
#dashboard-modal.is-gasto .np-lote-gastos-empty {
  font-size: 11px;
  color: var(--color-text-muted, #64748b);
}
#dashboard-modal.is-gasto .np-lote-gastos-fallback {
  font-size: 11px;
  color: var(--color-text-muted, #64748b);
  margin-top: 4px;
}
#dashboard-modal.is-gasto .np-lote-gastos-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}
#dashboard-modal.is-gasto .np-lote-gastos-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 2px 0;
  border-bottom: 1px solid var(--color-border-light, #F1F5F9);
}
#dashboard-modal.is-gasto .np-lote-gastos-item:last-child {
  border-bottom: none;
}
#dashboard-modal.is-gasto .np-lote-gastos-item-cat {
  font-weight: 500;
  color: var(--color-text, #334155);
  min-width: 72px;
}
#dashboard-modal.is-gasto .np-lote-gastos-item-monto {
  font-weight: 600;
  color: var(--color-text, #334155);
}
#dashboard-modal.is-gasto .np-lote-gastos-item-fecha {
  font-size: 11px;
  color: var(--color-text-muted, #64748b);
}
#dashboard-modal.is-gasto .np-lote-gastos-item-desc {
  font-size: 11px;
  color: var(--color-text-muted, #64748b);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
#dashboard-modal.is-gasto .np-lote-gastos-mas {
  font-size: 11px;
  color: var(--color-text-muted, #64748b);
  margin-top: 2px;
}
#dashboard-modal.is-gasto .np-lote-gastos-total {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text, #334155);
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--color-border, #E2E8F0);
}
#dashboard-modal.is-gasto .np-lote-costos-lote-val {
  font-size: 12px;
  color: var(--color-text, #334155);
}
#dashboard-modal.is-gasto .np-lote-ficha-cost-grid .np-lote-ficha-row .np-lote-ficha-label {
  min-width: 100px;
}

/* Reuse same lote info card styles in mano de obra (espacio unificado: 4px arriba). */
#dashboard-modal.is-mano-obra .np-lote-card {
  margin-top: 4px;
  padding: 8px 12px;
  background: var(--color-surface-alt, #F8FAFC);
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 6px;
  font-size: 12px;
}
#dashboard-modal.is-mano-obra .np-lote-gastos-block { margin-top: 0; }
#dashboard-modal.is-mano-obra .np-lote-seccion-titulo {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary, #475569);
  margin-bottom: 4px;
}
#dashboard-modal.is-mano-obra .np-lote-gastos-note,
#dashboard-modal.is-mano-obra .np-lote-gastos-empty {
  font-size: 11px;
  color: var(--color-text-muted, #64748b);
}
#dashboard-modal.is-mano-obra .np-lote-gastos-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}
#dashboard-modal.is-mano-obra .np-lote-gastos-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 2px 0;
  border-bottom: 1px solid var(--color-border-light, #F1F5F9);
}
#dashboard-modal.is-mano-obra .np-lote-gastos-item:last-child { border-bottom: none; }
#dashboard-modal.is-mano-obra .np-lote-gastos-item-cat {
  font-weight: 500;
  color: var(--color-text, #334155);
  min-width: 72px;
}
#dashboard-modal.is-mano-obra .np-lote-gastos-item-monto { font-weight: 600; color: var(--color-text, #334155); }
#dashboard-modal.is-mano-obra .np-lote-gastos-item-fecha,
#dashboard-modal.is-mano-obra .np-lote-gastos-item-desc {
  font-size: 11px;
  color: var(--color-text-muted, #64748b);
}
#dashboard-modal.is-mano-obra .np-lote-gastos-mas { font-size: 11px; color: var(--color-text-muted, #64748b); margin-top: 2px; }
#dashboard-modal.is-mano-obra .np-lote-gastos-total {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text, #334155);
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--color-border, #E2E8F0);
}
#dashboard-modal.is-mano-obra .np-lote-costos-lote-val { font-size: 12px; color: var(--color-text, #334155); }

#dashboard-modal.is-produccion .np-modal-actions,
#dashboard-modal.is-produccion-agricola .np-modal-actions {
  position: sticky;
  bottom: 0;
  background: var(--color-surface, #fff);
  z-index: 4;
}

/* En modales: no mostrar texto de error cuando es np-error-no-message; solo borde rojo (2026-03-08) */
#dashboard-modal .field.is-invalid .error-text.np-error-no-message {
  visibility: hidden !important;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  line-height: 0;
}

/* Icono boton Registrar produccion: mismo aspecto que Registrar compra (checkmark al final) */
#dashboard-modal.is-produccion .np-modal-actions .np-btn-registrar-icon,
#dashboard-modal.is-produccion-agricola .np-modal-actions .np-btn-registrar-icon {
  margin-left: 6px;
  flex-shrink: 0;
}

/* ==========================================================================
   MODAL SHELL - Registrar produccion (produccion-agricola / produccion)
   Mismo ancho estandar que venta/compra: body + !important (productos/eliminados, etc.)
   ========================================================================== */
body #dashboard-modal.is-produccion .dashboard-modal__dialog,
body #dashboard-modal.is-produccion-agricola .dashboard-modal__dialog {
  width: 560px !important;
  min-width: 560px;
  max-width: calc(100vw - 32px);
}
#dashboard-modal.is-produccion .dashboard-modal__body,
#dashboard-modal.is-produccion-agricola .dashboard-modal__body {
  padding: 20px;
}
#dashboard-modal.is-produccion .dashboard-modal__form-container,
#dashboard-modal.is-produccion-agricola .dashboard-modal__form-container {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
#dashboard-modal.is-produccion .np-modal-header,
#dashboard-modal.is-produccion-agricola .np-modal-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-surface, #fff);
  border-bottom: 1px solid var(--color-border, #E2E8F0);
  padding-bottom: 12px;
}
#dashboard-modal.is-produccion .dashboard-modal__title,
#dashboard-modal.is-produccion .np-modal-title,
#dashboard-modal.is-produccion-agricola .dashboard-modal__title,
#dashboard-modal.is-produccion-agricola .np-modal-title {
  width: 100%;
  text-align: center;
  font-family: var(--font-family-base, "DM Sans", ui-sans-serif, system-ui, sans-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: rgba(30, 41, 59, 1);
}
#dashboard-modal.is-produccion .np-modal-header-main,
#dashboard-modal.is-produccion .np-modal-title-row,
#dashboard-modal.is-produccion-agricola .np-modal-header-main,
#dashboard-modal.is-produccion-agricola .np-modal-title-row {
  justify-content: center;
}
#dashboard-modal.is-produccion .dashboard-modal__subtitle,
#dashboard-modal.is-produccion-agricola .dashboard-modal__subtitle {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
  margin: 4px 0 0 0;
  line-height: 1.3;
}
#dashboard-modal.is-produccion .card.form--dense > h2,
#dashboard-modal.is-produccion .card.form--dense > .subtitle,
#dashboard-modal.is-produccion .card.form--dense > p.subtitle,
#dashboard-modal.is-produccion .card.form--dense > hr.section-hr,
#dashboard-modal.is-produccion-agricola .card.form--dense > h2,
#dashboard-modal.is-produccion-agricola .card.form--dense > .subtitle,
#dashboard-modal.is-produccion-agricola .card.form--dense > p.subtitle,
#dashboard-modal.is-produccion-agricola .card.form--dense > hr.section-hr {
  display: none;
}
#dashboard-modal.is-produccion .card.form--dense,
#dashboard-modal.is-produccion-agricola .card.form--dense {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  max-width: none;
}

/* ==========================================================================
   MODAL PRODUCCION - Shell limpio e inputs alineados con DS V2 (2026-03-08)
   Evita look gris/pesado: body blanco, editables claros, readonly e info secundarios.
   Causa del fondo gris persistente: .ui-v2 en el fragment tiene background en menu_v2.css
   (--color-background #F8FAFC); aqui se anula en modal para que se vea el body blanco.
   ========================================================================== */
#dashboard-modal.is-produccion .dashboard-modal__body,
#dashboard-modal.is-produccion-agricola .dashboard-modal__body {
  background: var(--color-surface, #fff) !important;
}
/* Anula fondo gris de .ui-v2 (menu_v2.css) detras del grid del formulario produccion */
#dashboard-modal.is-produccion .ui-v2,
#dashboard-modal.is-produccion-agricola .ui-v2 {
  background: transparent !important;
}
/* Inputs editables: fondo claro para distinguirlos del body */
#dashboard-modal.is-produccion .card.form--dense input:not([readonly]):not([type="hidden"]),
#dashboard-modal.is-produccion .card.form--dense select,
#dashboard-modal.is-produccion .card.form--dense textarea,
#dashboard-modal.is-produccion-agricola .card.form--dense input:not([readonly]):not([type="hidden"]),
#dashboard-modal.is-produccion-agricola .card.form--dense select,
#dashboard-modal.is-produccion-agricola .card.form--dense textarea {
  background: var(--color-input-background, #fafbfb) !important;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  color: var(--color-text-primary, #1e293b);
}
/* Validacion: mismo contraste que Registrar compra (.ui-v2 .np-field.is-invalid queda por debajo de la regla anterior por especificidad) */
#dashboard-modal.is-produccion .card.form--dense .field.np-field.is-invalid input:not([readonly]):not([type="hidden"]),
#dashboard-modal.is-produccion .card.form--dense .field.np-field.is-invalid select,
#dashboard-modal.is-produccion .card.form--dense .field.np-field.is-invalid textarea,
#dashboard-modal.is-produccion-agricola .card.form--dense .field.np-field.is-invalid input:not([readonly]):not([type="hidden"]),
#dashboard-modal.is-produccion-agricola .card.form--dense .field.np-field.is-invalid select,
#dashboard-modal.is-produccion-agricola .card.form--dense .field.np-field.is-invalid textarea {
  border-color: var(--color-alert-error, #ef4444) !important;
}
#dashboard-modal.is-produccion .card.form--dense .field.np-field.is-invalid input:focus:not([readonly]),
#dashboard-modal.is-produccion .card.form--dense .field.np-field.is-invalid select:focus,
#dashboard-modal.is-produccion .card.form--dense .field.np-field.is-invalid textarea:focus,
#dashboard-modal.is-produccion-agricola .card.form--dense .field.np-field.is-invalid input:focus:not([readonly]),
#dashboard-modal.is-produccion-agricola .card.form--dense .field.np-field.is-invalid select:focus,
#dashboard-modal.is-produccion-agricola .card.form--dense .field.np-field.is-invalid textarea:focus {
  border-color: var(--color-alert-error, #ef4444) !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}
/* Readonly: surface-alt ligera, claramente distinta de editables */
#dashboard-modal.is-produccion .card.form--dense input[readonly],
#dashboard-modal.is-produccion .card.form--dense .np-input-readonly,
#dashboard-modal.is-produccion-agricola .card.form--dense input[readonly],
#dashboard-modal.is-produccion-agricola .card.form--dense .np-field input[readonly] {
  background: var(--color-surface-alt, #F8FAFC) !important;
  color: var(--color-text-secondary, #64748b);
  cursor: default;
}
/* Paneles informativos produccion: contenedor sutil, no competir con formulario */
#dashboard-modal.is-produccion .np-form-info-panel,
#dashboard-modal.is-produccion-agricola .np-form-info-panel {
  background: var(--color-surface-alt, #F8FAFC) !important;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: var(--radius-lg, 12px);
}
/* Bloque Informacion de Vencimiento (produccion agricola): mismo patron que compra, secundario */
#dashboard-modal.is-produccion-agricola .np-field-vencimiento .info-vencimiento,
#dashboard-modal.is-produccion-agricola .field[data-name="info_vencimiento"] .info-vencimiento {
  background: var(--color-surface-alt, #F8FAFC) !important;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: var(--radius-sm, 8px);
  padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-secondary, #64748b);
  min-height: 36px;
  box-sizing: border-box;
}
#dashboard-modal.is-produccion-agricola .np-field-vencimiento .info-vencimiento .info-text,
#dashboard-modal.is-produccion-agricola .field[data-name="info_vencimiento"] .info-vencimiento .info-text {
  font-size: 12px;
  color: var(--color-text-secondary, #64748b);
}

/* ==========================================================================
   MODAL SHELL - Agregar producto (is-producto): mismo template que compra/venta
   Mismo ancho estandar: body + !important para ganar en todas las vistas.
   ========================================================================== */
body #dashboard-modal.is-producto .dashboard-modal__dialog {
  width: 560px !important;
  min-width: 560px;
  max-width: calc(100vw - 32px);
}
#dashboard-modal.is-producto .dashboard-modal__body {
  padding: 20px;
}
#dashboard-modal.is-producto .dashboard-modal__form-container {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
#dashboard-modal.is-producto .np-modal-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-surface, #fff);
  border-bottom: 1px solid var(--color-border, #E2E8F0);
  padding-bottom: 12px;
}
#dashboard-modal.is-producto .dashboard-modal__title,
#dashboard-modal.is-producto .np-modal-title {
  width: 100%;
  text-align: center;
  font-family: var(--font-family-base, "DM Sans", ui-sans-serif, system-ui, sans-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: rgba(30, 41, 59, 1);
}
#dashboard-modal.is-producto .np-modal-header-main,
#dashboard-modal.is-producto .np-modal-title-row {
  justify-content: center;
}
#dashboard-modal.is-producto .dashboard-modal__subtitle {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
  margin: 4px 0 0 0;
  line-height: 1.3;
}
/* Titulo y subtitulo duplicados: solo el del shell es visible */
#dashboard-modal.is-producto .card.form--dense > h2,
#dashboard-modal.is-producto .card.form--dense > .subtitle,
#dashboard-modal.is-producto .card.form--dense > p.subtitle,
#dashboard-modal.is-producto .card.form--dense > hr.section-hr,
#dashboard-modal.is-producto .card.form--dense > div[style*="fef08a"] {
  display: none;
}
#dashboard-modal.is-producto .card.form--dense {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  max-width: none;
}
/* Grid mas compacto en modal */
#dashboard-modal.is-producto .card.form--dense .grid2 {
  gap: 6px 10px;
}
#dashboard-modal.is-producto .card.form--dense .field {
  margin-bottom: 0;
}
#dashboard-modal.is-producto .card.form--dense .field label {
  margin-bottom: 2px;
}
/* Acciones al pie, mismo skeleton que compra (np_modal_actions.css aplica a los botones) */
#dashboard-modal.is-producto .card.form--dense .form-actions,
#dashboard-modal.is-producto .card.form--dense .np-modal-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border, #E2E8F0);
  position: sticky;
  bottom: 0;
  background: var(--color-surface, #fff);
  z-index: 4;
}
/* Alineacion botones Cancelar y Agregar: misma linea base y altura */
#dashboard-modal.is-producto .np-modal-actions .np-modal-actions__buttons {
  align-items: center;
  min-height: 48px;
}
#dashboard-modal.is-producto .np-modal-actions .np-btn-cancelar-producto,
#dashboard-modal.is-producto .np-modal-actions #btn-submit.btn-primary {
  align-self: center;
  flex-shrink: 0;
}
#dashboard-modal.is-producto .card.form--dense #form-producto-error {
  margin-top: 8px;
  margin-bottom: 8px;
}
/* Bloques tipo product_type (gastronomia) mas compactos en modal */
#dashboard-modal.is-producto .card.form--dense .field[data-name="product_type"] {
  margin-bottom: 10px;
}
#dashboard-modal.is-producto .card.form--dense .field[data-name="product_type"] label {
  margin-bottom: 6px;
}

/* ==========================================================================
   GRID LAYOUT - Full-page: 6-col (baseline, sin cambios visuales)
   ========================================================================== */
#formVenta .venta-layout {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--spacing-4, 16px);
  row-gap: var(--spacing-3, 12px);
  max-width: 624px;
}

#formVenta .venta-section {
  display: contents;
}
/* Full-page: venta-row--unidad-lote transparente, unidad/lote participan del grid 6-col */
#formVenta .venta-row--unidad-lote {
  display: contents;
}

#formVenta .field[data-name="producto"] { grid-column: 1 / span 3; grid-row: 1; }
#formVenta .field[data-name="tipo"] { grid-column: 4 / span 3; grid-row: 1; }
#formVenta .field[data-name="calidad"] { grid-column: 1 / span 2; grid-row: 2; }
#formVenta .field[data-name="bodega"] { grid-column: 3 / span 2; grid-row: 2; }
#formVenta .field[data-name="lote"] { grid-column: 5 / span 2; grid-row: 2; }
#formVenta .field[data-name="unidad"] { grid-column: 1 / span 2; grid-row: 3; }
#formVenta .field[data-name="cantidad"] { grid-column: 3 / span 4; grid-row: 3; }
#formVenta .np-iva-row { grid-column: 4 / span 3; grid-row: 4; }
#formVenta .venta-section--qtyprice .np-price-col { grid-column: 1 / span 6; grid-row: 4; }
#formVenta .field[data-name="tipo_pago"] { grid-column: 1 / span 6; grid-row: 5; }
#formVenta .field[data-name="fecha_vencimiento_cobro"] { grid-column: 1 / span 6; grid-row: 6; }
#formVenta .field[data-name="cliente"] { grid-column: 1 / span 6; grid-row: 7; }
#formVenta #modalClientes { grid-column: 1 / span 6; grid-row: 8; }
#formVenta .field[data-name="tipo_documento"] { grid-column: 1 / span 6; grid-row: 9; }
#formVenta .field[data-name="comentario"] { grid-column: 1 / span 6; grid-row: 10; }
#formVenta .venta-section--summary .field,
#formVenta .venta-section--summary .field[data-span="2"] { grid-column: 1 / span 6; grid-row: 11; }

/* ==========================================================================
   MODAL ONLY - Grid 2-up Figma, orden logico
   Override para #dashboard-modal.is-venta
   ========================================================================== */
#dashboard-modal.is-venta #formVenta .venta-layout {
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  row-gap: 6px;
  max-width: none;
}

/* 1) Producto | Variedad */
#dashboard-modal.is-venta #formVenta .field[data-name="producto"] { grid-column: 1; grid-row: 1; }
#dashboard-modal.is-venta #formVenta .field[data-name="tipo"] { grid-column: 2; grid-row: 1; }

/* 2) Calidad | Bodega */
#dashboard-modal.is-venta #formVenta .field[data-name="calidad"] { grid-column: 1; grid-row: 2; }
#dashboard-modal.is-venta #formVenta .field[data-name="bodega"] { grid-column: 2; grid-row: 2; }

/* 3) Row aislada Unidad + Lote: SIEMPRE misma linea (sub-grid 140px | 1fr) */
#dashboard-modal.is-venta #formVenta .venta-row--unidad-lote {
  display: grid;
  grid-template-columns: 140px 1fr;
  column-gap: 10px;
  align-items: start;
  grid-column: 1 / -1;
  grid-row: 3;
  min-width: 0;
}
#dashboard-modal.is-venta #formVenta .venta-row--unidad-lote > * {
  min-width: 0;
}
/* Unidad izq, Lote der: forzar posicion en sub-grid (evita override de media 720px) */
#dashboard-modal.is-venta #formVenta .venta-row--unidad-lote .field[data-name="unidad"] {
  grid-column: 1;
  grid-row: 1;
}
#dashboard-modal.is-venta #formVenta .venta-row--unidad-lote .field[data-name="lote"] {
  grid-column: 2;
  grid-row: 1;
}
#dashboard-modal.is-venta #formVenta .venta-row--unidad-lote .field[data-name="lote"] select,
#dashboard-modal.is-venta #formVenta .venta-row--unidad-lote #lote {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* 4) Cantidad (col 1) | Precio (col 2): align start para que al expandir Referencias no descuadre la columna izquierda */
#dashboard-modal.is-venta #formVenta .field[data-name="cantidad"] { grid-column: 1; grid-row: 4; align-self: start; }
#dashboard-modal.is-venta #formVenta .venta-section--qtyprice .np-price-col { grid-column: 2; grid-row: 4; align-self: start; }

/* 5) IVA toggle bajo Cantidad (col 1), sutil */
#dashboard-modal.is-venta #formVenta .np-iva-row {
  grid-column: 1;
  grid-row: 5;
}
#dashboard-modal.is-venta #formVenta .np-iva-row .np-switch-inline {
  gap: 4px;
  min-height: 24px;
}
#dashboard-modal.is-venta #formVenta .np-iva-row .np-switch-inline-label,
#dashboard-modal.is-venta #formVenta .np-iva-row .np-switch-state {
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
}
#dashboard-modal.is-venta #formVenta .np-iva-row .np-switch {
  transform: scale(0.8);
}

/* 6) Tipo pago full-width, 7) Bloque credito full-width, 8) Resumen, 9) Cliente, 10) modalClientes, 11) Comentario */
#dashboard-modal.is-venta #formVenta .field[data-name="tipo_pago"] {
  grid-column: 1 / -1;
  grid-row: 6;
  padding: 8px 10px 4px;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 8px;
  background: var(--color-surface-alt, #F8FAFC);
}
#dashboard-modal.is-venta #formVenta .field[data-name="fecha_vencimiento_cobro"] {
  grid-column: 1 / -1;
  grid-row: 7;
}
#dashboard-modal.is-venta #formVenta .field[data-name="cliente"] { grid-column: 1 / -1; grid-row: 8; }
#dashboard-modal.is-venta #formVenta #modalClientes { grid-column: 1 / -1; grid-row: 9; }
#dashboard-modal.is-venta #formVenta .field[data-name="tipo_documento"] { grid-column: 1 / -1; grid-row: 10; }
#dashboard-modal.is-venta #formVenta .field[data-name="comentario"] { grid-column: 1 / -1; grid-row: 11; }
#dashboard-modal.is-venta #formVenta .venta-section--summary .field,
#dashboard-modal.is-venta #formVenta .venta-section--summary .field[data-span="2"] { grid-column: 1 / -1; grid-row: 12; }

/* Modal: items del grid permiten encogerse (evita overflow/aplastamiento) */
#dashboard-modal.is-venta #formVenta .venta-layout .field,
#dashboard-modal.is-venta #formVenta .venta-layout .np-price-col,
#dashboard-modal.is-venta #formVenta .venta-layout .np-iva-row,
#dashboard-modal.is-venta #formVenta .venta-layout .venta-row--unidad-lote,
#dashboard-modal.is-venta #formVenta .venta-layout #modalClientes {
  min-width: 0;
}

/* Modal: contrato .field - layout vertical, label arriba, input 100%, error debajo */
#dashboard-modal.is-venta #formVenta .field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#dashboard-modal.is-venta #formVenta .field label {
  display: block;
  margin-bottom: 3px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text, #374151);
  line-height: 1.3;
  overflow-wrap: break-word;
}
#dashboard-modal.is-venta #formVenta .field[data-name="cliente"] label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
#dashboard-modal.is-venta #formVenta .field input,
#dashboard-modal.is-venta #formVenta .field select,
#dashboard-modal.is-venta #formVenta .field textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Modal: Cantidad y Precio sin suffix; inputs simples. Layout estable al expandir Referencias (align-self: start en row 4). */

#dashboard-modal.is-venta #formVenta .field .error-text,
#dashboard-modal.is-venta #formVenta .field .helper-text {
  display: block;
  margin-top: 2px;
  line-height: 1.3;
  font-size: 0.8rem;
  min-height: 1.3em;
}
/* Cantidad en modal: mismo grid que Precio para que "Usar todo" y "Referencias" queden a la misma altura.
   Fila 3: minmax(0,0) colapsa error/stock; fila 4 siempre reserva espacio para "Usar todo". */
#dashboard-modal.is-venta #formVenta .field[data-name="cantidad"],
#dashboard-modal-form-inner #formVenta .field[data-name="cantidad"],
#dashboard-modal-form-container .field[data-name="cantidad"] {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto minmax(0, 0) auto;
  row-gap: 0;
  align-items: start;
  min-width: 0;
}
#dashboard-modal.is-venta #formVenta .field[data-name="cantidad"] > label,
#dashboard-modal-form-inner #formVenta .field[data-name="cantidad"] > label,
#dashboard-modal-form-container .field[data-name="cantidad"] > label {
  grid-row: 1;
}
#dashboard-modal.is-venta #formVenta .field[data-name="cantidad"] input#cantidad,
#dashboard-modal-form-inner #formVenta .field[data-name="cantidad"] input#cantidad,
#dashboard-modal-form-container .field[data-name="cantidad"] input#cantidad {
  grid-row: 2;
}
#dashboard-modal.is-venta #formVenta .field[data-name="cantidad"] .error-text,
#dashboard-modal-form-inner #formVenta .field[data-name="cantidad"] .error-text,
#dashboard-modal-form-container .field[data-name="cantidad"] .error-text,
#dashboard-modal.is-venta #formVenta .field[data-name="cantidad"] .stock-info,
#dashboard-modal.is-venta #formVenta .field[data-name="cantidad"] .stock-error,
#dashboard-modal.is-venta #formVenta .field[data-name="cantidad"] .stock-placeholder,
#dashboard-modal-form-inner #formVenta .field[data-name="cantidad"] .stock-info,
#dashboard-modal-form-inner #formVenta .field[data-name="cantidad"] .stock-error,
#dashboard-modal-form-inner #formVenta .field[data-name="cantidad"] .stock-placeholder,
#dashboard-modal-form-container .field[data-name="cantidad"] .stock-info,
#dashboard-modal-form-container .field[data-name="cantidad"] .stock-error,
#dashboard-modal-form-container .field[data-name="cantidad"] .stock-placeholder {
  grid-row: 3;
  margin: 0;
  padding: 0;
  min-height: 0;
  height: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
}
/* "Usar todo" centrado bajo el campo Cantidad y a la misma altura que Referencias.
   min-height reserva espacio para que el boton sea visible cuando el JS lo muestre (inline-flex). */
#dashboard-modal.is-venta #formVenta .field[data-name="cantidad"] .np-qty-actions,
#dashboard-modal-form-inner #formVenta .field[data-name="cantidad"] .np-qty-actions,
#dashboard-modal-form-container .field[data-name="cantidad"] .np-qty-actions {
  grid-row: 4;
  margin-top: 2px;
  min-height: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}
/* "Usar todo" como accion contextual sutil (no link azul generico) */
#dashboard-modal.is-venta #formVenta #usarTodoBtn.np-link-action,
#dashboard-modal-form-container #usarTodoBtn.np-link-action {
  padding: 0;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text-muted, #64748b);
  background: none;
  border: none;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s, text-decoration 0.15s;
}
#dashboard-modal.is-venta #formVenta #usarTodoBtn.np-link-action:hover,
#dashboard-modal-form-container #usarTodoBtn.np-link-action:hover {
  color: var(--color-text, #334155);
  text-decoration: underline;
}
/* Mismo estilo contextual para "Usar todo" en pagina completa */
#formVenta #usarTodoBtn.np-link-action {
  padding: 0;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text-muted, #64748b);
  background: none;
  border: none;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
}
#formVenta #usarTodoBtn.np-link-action:hover {
  color: var(--color-text, #334155);
  text-decoration: underline;
}
/* Precio: Referencias de precio justo debajo del input (simetrico con "Usar todo") */
#dashboard-modal.is-venta #formVenta .np-price-col .np-price-references--under-input,
#dashboard-modal-form-container .np-price-col .np-price-references--under-input {
  margin-top: 2px;
}

/* Ocultar mensaje "Precio debe ser > 0" en el modal (pedido usuario: no mostrar en modal) */
#dashboard-modal.is-venta #formVenta .np-price-col .field[data-name="precio"] .error-text {
  display: none !important;
}

/* np-price-col en modal: abajo, full-width, layout vertical limpio */
#dashboard-modal.is-venta #formVenta .np-price-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Layout grid: label | input | (ocultos) | referencias; fila 3 en 0fr para alinear con Cantidad */
#dashboard-modal.is-venta #formVenta .np-price-col .field[data-name="precio"],
#dashboard-modal-form-container .np-price-col .field[data-name="precio"] {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 0fr auto;
  column-gap: 16px;
  row-gap: 0;
  align-items: start;
  min-width: 0;
}
/* Override base > * { grid-column: 1 } para modal */
#dashboard-modal.is-venta #formVenta .np-price-col .field[data-name="precio"] > * {
  grid-column: auto;
  grid-row: auto;
}
#dashboard-modal.is-venta #formVenta .np-price-col .field[data-name="precio"] > label {
  grid-column: 1;
  grid-row: 1;
  display: block;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text, #374151);
}
#dashboard-modal.is-venta #formVenta .np-price-col .field[data-name="precio"] input#precio_display,
#dashboard-modal-form-container .np-price-col .field[data-name="precio"] input#precio_display {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}
/* Hidden inputs y hints en fila 3 para no abrir filas extra */
#dashboard-modal.is-venta #formVenta .np-price-col .field[data-name="precio"] .error-text,
#dashboard-modal.is-venta #formVenta .np-price-col .field[data-name="precio"] .np-iva-policy-hint,
#dashboard-modal.is-venta #formVenta .np-price-col .field[data-name="precio"] input[type="hidden"],
#dashboard-modal.is-venta #formVenta .np-price-col .field[data-name="precio"] select.np-visually-hidden {
  grid-column: 1;
  grid-row: 3;
  margin-top: 0;
}
#dashboard-modal.is-venta #formVenta .np-price-col #referenciasPrecioPanel,
#dashboard-modal.is-venta #formVenta .np-price-col .np-price-references,
#dashboard-modal-form-container .np-price-col #referenciasPrecioPanel,
#dashboard-modal-form-container .np-price-col .np-price-references {
  grid-column: 1;
  grid-row: 4;
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px solid var(--color-border, #E2E8F0);
}
/* Referencias expandido: max-height + scroll para que no descuadre el layout */
#dashboard-modal.is-venta #formVenta .np-price-col #referenciasPrecioPanel[open] .ux-price-suggestions,
#dashboard-modal-form-container .np-price-col #referenciasPrecioPanel[open] .ux-price-suggestions {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  margin-top: 6px;
}

/* ==========================================================================
   np-price-col INTERNAL: Precio + IVA same row, Referencias full width below
   ========================================================================== */
#formVenta .np-price-col .field[data-name="precio"] {
  display: grid;
  grid-template-columns: 4fr 2fr;
  gap: var(--spacing-3, 12px);
  align-items: start;
}

#formVenta .np-price-col .field[data-name="precio"] > * {
  grid-column: 1;
}

#formVenta .np-price-col .np-switch-inline {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: end;
}

#formVenta .np-price-col #referenciasPrecioPanel,
#formVenta .np-price-col .np-price-references {
  grid-column: 1 / -1;
  margin-top: var(--spacing-2, 8px);
  padding-top: var(--spacing-2, 8px);
}

#formVenta .np-price-col .error-text,
#formVenta .np-price-col .np-iva-policy-hint {
  grid-column: 1 / -1;
}

/* Referencias compact */
#formVenta .np-price-col #referenciasPrecioPanel summary,
#formVenta .np-price-col .np-price-references summary {
  font-size: 0.9em;
}
#formVenta .np-price-col .ux-price-suggestions {
  margin-top: var(--spacing-2, 8px);
}
#formVenta .np-price-col .np-chip-list {
  gap: var(--spacing-2, 8px);
  margin-top: var(--spacing-2, 8px);
}

/* ==========================================================================
   Cantidad: "Usar todo" aligned under Cantidad (inside field, no change needed)
   ========================================================================== */
#formVenta .field[data-name="cantidad"] .np-qty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2, 8px);
  margin-top: var(--spacing-2, 8px);
  margin-left: 0;
  align-self: flex-start;
}

/* ==========================================================================
   COMPACTNESS - scoped to venta form
   ========================================================================== */
#formVenta .field label {
  margin-bottom: 6px;
}
/* Tipo de pago: hint inmediatamente bajo el select; slot de error vacio sin min-height */
#formVenta .field[data-name="tipo_pago"] .np-venta-credito-hint {
  margin-top: 2px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #6b7280;
}
#dashboard-modal.is-venta #formVenta .field[data-name="tipo_pago"] .error-text.np-error-no-message,
#dashboard-modal-form-inner #formVenta .field[data-name="tipo_pago"] .error-text.np-error-no-message,
#formVenta .field[data-name="tipo_pago"] > .error-text.np-error-no-message {
  min-height: 0 !important;
  max-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  overflow: hidden;
  border: 0;
}
#formVenta .field[data-name="tipo_pago"].is-invalid > .error-text.np-error-no-message {
  min-height: 1.2em !important;
  max-height: none;
  margin-top: 2px !important;
  line-height: 1.3 !important;
  font-size: 0.8rem !important;
  overflow: visible;
}

/* Plazo rapido (credito): pills compactas estilo filtros rapidos */
#formVenta .np-venta-plazo-rapido {
  margin-bottom: 10px;
}
#formVenta .np-venta-plazo-rapido__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}
#formVenta .np-venta-plazo-rapido__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
#formVenta button.np-venta-plazo-rapido__pill {
  margin: 0;
  padding: 5px 11px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  min-height: 30px;
  box-sizing: border-box;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
#formVenta button.np-venta-plazo-rapido__pill:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}
#formVenta button.np-venta-plazo-rapido__pill.is-active {
  background: #e0e7ff;
  border-color: #6366f1;
  color: #312e81;
}
#formVenta button.np-venta-plazo-rapido__pill:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

#formVenta .field {
  margin-bottom: 0;
}
#formVenta .field .error-text,
#formVenta .field .helper-text {
  line-height: 1.3;
  min-height: 1.3em;
  font-size: 0.85em;
}
#formVenta .field input,
#formVenta .field select,
#formVenta .field textarea {
  min-height: 36px;
}

/* Cliente: "Ver lista" and "Agregar RUT/Contacto" align left */
#formVenta .field[data-name="cliente"] label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-2, 8px);
}
#formVenta .field[data-name="cliente"] .btn-ver-lista,
#formVenta .field[data-name="cliente"] [onclick*="camposClienteOpcionalesVenta"] {
  margin-left: 0;
}

/* ==========================================================================
   SUMMARY CARD - neutral surface, compact, keep Total a cobrar accent
   ========================================================================== */
#formVenta #resumenFinanciero.venta-resumen-card,
#dashboard-modal-form-inner #resumenFinanciero.venta-resumen-card {
  background: var(--color-surface-alt, #F1F5F9) !important;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--elevation-card, 0 2px 8px rgba(0, 0, 0, 0.06));
  padding: var(--spacing-3, 12px) !important;
  margin-top: var(--spacing-2, 8px) !important;
  font-size: 0.85em !important;
}
#dashboard-modal.is-venta #formVenta #resumenFinanciero.venta-resumen-card {
  padding: var(--spacing-2, 8px) var(--spacing-3, 12px) !important;
  margin-top: 4px !important;
}

#formVenta #resumenFinanciero.venta-resumen-card h4,
#dashboard-modal-form-inner #resumenFinanciero.venta-resumen-card h4 {
  color: var(--color-text-heading, #1E293B) !important;
  margin-bottom: var(--spacing-2, 8px) !important;
}

/* Resumen compra: summary card discreta y compacta (jerarquia principal) - DS V2
   Contenedor claro; padding/gap reducidos para menor altura sin perder legibilidad. 2026-03-08 */
#formIngreso .np-resumen-card,
#dashboard-modal-form-inner .np-resumen-card,
#dashboard-modal .np-resumen-card {
  background: var(--color-surface-alt, #F1F5F9) !important;
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--elevation-card, 0 1px 4px rgba(0, 0, 0, 0.05));
  padding: 6px var(--spacing-3, 12px) !important;
  margin-top: var(--spacing-2, 8px) !important;
  margin-bottom: var(--spacing-2, 8px) !important;
  font-size: 0.85em !important;
}
/* Grid 3 columnas equilibradas (summary card, no texto corrido) */
#formIngreso .np-resumen-card .totales,
#dashboard-modal-form-inner .np-resumen-card .totales,
#dashboard-modal .np-resumen-card .totales {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: var(--spacing-3, 12px);
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0;
}
/* Cada columna: label arriba, valor abajo (stack vertical, compacto) */
#formIngreso .np-resumen-card .totales .item,
#dashboard-modal-form-inner .np-resumen-card .totales .item,
#dashboard-modal .np-resumen-card .totales .item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  gap: 1px;
  min-width: 0;
  text-align: center;
}
/* Label discreto por columna (compacto) */
#formIngreso .np-resumen-card .totales .np-resumen-label,
#dashboard-modal-form-inner .np-resumen-card .totales .np-resumen-label,
#dashboard-modal .np-resumen-card .totales .np-resumen-label {
  font-size: 0.75em;
  font-weight: 500;
  color: var(--color-text-secondary, #64748b);
  line-height: 1.1;
}
/* Valor legible */
#formIngreso .np-resumen-card .totales .item b,
#dashboard-modal-form-inner .np-resumen-card .totales .item b,
#dashboard-modal .np-resumen-card .totales .item b {
  color: var(--color-text-heading, #1E293B);
  font-weight: 600;
  font-size: 1em;
  white-space: nowrap;
}
/* Total: mayor peso visual (sin azul legacy) */
#formIngreso .np-resumen-card .totales .item.total,
#dashboard-modal-form-inner .np-resumen-card .totales .item.total,
#dashboard-modal .np-resumen-card .totales .item.total {
  font-weight: 500;
  color: var(--color-text-heading, #1E293B);
}
#formIngreso .np-resumen-card .totales .item.total b,
#dashboard-modal-form-inner .np-resumen-card .totales .item.total b,
#dashboard-modal .np-resumen-card .totales .item.total b {
  font-size: 1.15em;
  font-weight: 700;
  color: var(--color-text-heading, #1E293B);
}

/* Bloque vencimiento compra: informacion secundaria (jerarquia por debajo del resumen)
   Fondo y borde neutros; sin verde fuerte para no competir con el resumen. DS V2 2026-03-08 */
#formIngreso .np-field-vencimiento .info-vencimiento,
#dashboard-modal-form-inner .np-field-vencimiento .info-vencimiento,
#dashboard-modal .np-field-vencimiento .info-vencimiento {
  background: var(--color-surface-alt, #F8FAFC) !important;
  border: 1px solid var(--color-border, #E2E8F0) !important;
  border-radius: var(--radius-sm, 8px);
  padding: var(--spacing-2, 6px) var(--spacing-3, 12px) !important;
  font-size: 12px !important;
  line-height: 1.4;
  color: var(--color-text-secondary, #64748b) !important;
  min-height: 36px !important;
  box-sizing: border-box;
}
#formIngreso .np-field-vencimiento .info-vencimiento .info-text,
#dashboard-modal-form-inner .np-field-vencimiento .info-vencimiento .info-text,
#dashboard-modal .np-field-vencimiento .info-vencimiento .info-text {
  font-size: 12px !important;
  color: var(--color-text-secondary, #64748b) !important;
}
/* Estado "calculado" (info-vencimiento-auto): acento verde muy suave, sin fondo verde fuerte */
#formIngreso .np-field-vencimiento .info-vencimiento.info-vencimiento-auto,
#dashboard-modal-form-inner .np-field-vencimiento .info-vencimiento.info-vencimiento-auto,
#dashboard-modal .np-field-vencimiento .info-vencimiento.info-vencimiento-auto {
  background: var(--color-surface-alt, #F8FAFC) !important;
  border-color: var(--color-border, #E2E8F0) !important;
  border-left-width: 3px !important;
  border-left-color: rgba(34, 197, 94, 0.35) !important;
}
#formIngreso .np-field-vencimiento .info-vencimiento.info-vencimiento-auto .info-text,
#dashboard-modal-form-inner .np-field-vencimiento .info-vencimiento.info-vencimiento-auto .info-text,
#dashboard-modal .np-field-vencimiento .info-vencimiento.info-vencimiento-auto .info-text {
  color: var(--color-text-secondary, #64748b) !important;
}
#formIngreso .np-field-vencimiento .info-vencimiento.info-vencimiento-auto .info-text b,
#dashboard-modal-form-inner .np-field-vencimiento .info-vencimiento.info-vencimiento-auto .info-text b,
#dashboard-modal .np-field-vencimiento .info-vencimiento.info-vencimiento-auto .info-text b {
  color: var(--color-text-heading, #1E293B) !important;
  font-weight: 600;
}

/* ==========================================================================
   FOOTER - border-top, padding, right-aligned
   ========================================================================== */
#formVenta .venta-modal-footer,
#dashboard-modal-form-inner .venta-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid var(--color-border, #E2E8F0);
  padding-top: var(--spacing-4, 16px);
  margin-top: var(--spacing-4, 16px);
}
/* Footer sticky en modal Figma */
#dashboard-modal.is-venta .venta-modal-footer {
  position: sticky;
  bottom: 0;
  background: var(--color-surface, #fff);
  z-index: 4;
  padding: 10px 0 2px 0;
  margin-top: 10px;
}

#formVenta .venta-modal-footer .actions,
#dashboard-modal-form-inner .venta-modal-footer .actions {
  margin: 0;
  text-align: right;
}
/* Cancelar: solo visible en modal; full-page oculto */
.np-btn-cancelar-venta {
  display: none;
}
#dashboard-modal .np-btn-cancelar-venta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  line-height: 1;
  box-sizing: border-box;
  padding: 10px 24px;
  border: 1px solid var(--color-border, #E2E8F0);
  background: var(--color-surface-alt, #F8FAFC);
  color: var(--color-text, #334155);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}
#dashboard-modal .np-btn-cancelar-venta:hover {
  background: var(--color-border, #E2E8F0);
}
/* Footer Figma: Cancelar + Registrar centrados */
#dashboard-modal.is-venta .venta-modal-footer {
  justify-content: center;
}
#dashboard-modal.is-venta .venta-modal-footer .actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   RESPONSIVE - Full-page: 1 column en pantallas chicas
   ========================================================================== */
@media (max-width: 720px) {
  #formVenta .venta-layout {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-4, 16px);
  }

  #formVenta .field[data-name="producto"],
  #formVenta .field[data-name="tipo"],
  #formVenta .field[data-name="calidad"],
  #formVenta .field[data-name="bodega"],
  #formVenta .field[data-name="lote"],
  #formVenta .field[data-name="unidad"],
  #formVenta .field[data-name="cantidad"],
  #formVenta .np-iva-row,
  #formVenta .venta-section--qtyprice .np-price-col,
  #formVenta .field[data-name="tipo_pago"],
  #formVenta .field[data-name="fecha_vencimiento_cobro"],
  #formVenta .venta-section--summary .field,
  #formVenta .venta-section--summary .field[data-span="2"],
  #formVenta .field[data-name="cliente"],
  #formVenta #modalClientes,
  #formVenta .field[data-name="comentario"],
  #formVenta .field[data-name="tipo_documento"] {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  #formVenta .np-price-col .field[data-name="precio"] {
    display: block;
  }
}

/* En viewports estrechos: ancho fluido + min-width 0. Usar max-width 640px (no 576): entre ~577px y
   ~591px el dialog tenia min-width 560px pero max-width calc(100vw - 32px) menor, overflow horizontal
   y sensacion de zoom en movil / ventanas estrechas (p. ej. stock). 2026-03-29, ampliado 2026-04-08 */
@media (max-width: 640px) {
  body #dashboard-modal .dashboard-modal__dialog {
    width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
  }

  body #dashboard-modal.is-venta .dashboard-modal__dialog,
  body #dashboard-modal.is-compra .dashboard-modal__dialog,
  body #dashboard-modal.is-producto .dashboard-modal__dialog,
  body #dashboard-modal.is-trabajador .dashboard-modal__dialog,
  body #dashboard-modal.is-trabajador-edit .dashboard-modal__dialog,
  body #dashboard-modal.is-cliente .dashboard-modal__dialog,
  body #dashboard-modal.is-cliente-edit .dashboard-modal__dialog,
  body #dashboard-modal.is-proveedor .dashboard-modal__dialog,
  body #dashboard-modal.is-proveedor-edit .dashboard-modal__dialog,
  body #dashboard-modal.is-mano-obra .dashboard-modal__dialog,
  body #dashboard-modal.is-mano-obra-edit .dashboard-modal__dialog {
    width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
  }

  /* WebKit: evita que Safari infle tipografia dentro del modal (sensacion de zoom). */
  #dashboard-modal.dashboard-modal {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Titulo shell algo mas compacto en pantallas pequenas (coherente con cuerpo del formulario). */
  #dashboard-modal .dashboard-modal__title,
  #dashboard-modal .np-modal-title {
    font-size: 18px !important;
  }

  /*
   * Safari iOS: text controls with computed font-size below 16px trigger automatic
   * page zoom on focus. Central override beats form-specific rules (e.g. 13px on is-gasto).
   * Excludes button-like and non-text input types. 2026-04-08
   */
  #dashboard-modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]),
  #dashboard-modal select,
  #dashboard-modal textarea {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   RESPONSIVE MODAL - 1 col cuando viewport estrecho
   ========================================================================== */
@media (max-width: 480px) {
  #dashboard-modal.is-venta #formVenta .venta-layout {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
  /* Apilar unidad y lote: 100px+1fr dejaba el lote en columnas implicitas demasiado estrechas. */
  /* ⚠️ Cambia comportamiento anterior: 2026-04-17 — sin este reset, grid-row:3 del layout 2-col desplazaba el row antes de Calidad/Bodega */
  #dashboard-modal.is-venta #formVenta .venta-row--unidad-lote {
    grid-template-columns: 1fr;
    row-gap: 8px;
    grid-row: auto;
  }
  #dashboard-modal.is-venta #formVenta .venta-row--unidad-lote .field[data-name="unidad"],
  #dashboard-modal.is-venta #formVenta .venta-row--unidad-lote .field[data-name="lote"] {
    grid-column: 1;
    grid-row: auto;
  }
  #dashboard-modal.is-venta #formVenta .field[data-name="producto"],
  #dashboard-modal.is-venta #formVenta .field[data-name="tipo"],
  #dashboard-modal.is-venta #formVenta .field[data-name="calidad"],
  #dashboard-modal.is-venta #formVenta .field[data-name="bodega"],
  #dashboard-modal.is-venta #formVenta .field[data-name="lote"],
  #dashboard-modal.is-venta #formVenta .field[data-name="unidad"],
  #dashboard-modal.is-venta #formVenta .field[data-name="cantidad"],
  #dashboard-modal.is-venta #formVenta .np-iva-row,
  #dashboard-modal.is-venta #formVenta .venta-section--qtyprice .np-price-col,
  #dashboard-modal.is-venta #formVenta .field[data-name="tipo_pago"],
  #dashboard-modal.is-venta #formVenta .field[data-name="fecha_vencimiento_cobro"],
  #dashboard-modal.is-venta #formVenta .venta-section--summary .field,
  #dashboard-modal.is-venta #formVenta .venta-section--summary .field[data-span="2"],
  #dashboard-modal.is-venta #formVenta .field[data-name="cliente"],
  #dashboard-modal.is-venta #formVenta #modalClientes,
  #dashboard-modal.is-venta #formVenta .field[data-name="comentario"],
  #dashboard-modal.is-venta #formVenta .field[data-name="tipo_documento"] {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  #dashboard-modal.is-venta #formVenta .np-price-col .field[data-name="precio"] {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

/* Usar todo button: align value so parentheses look straight (no crooked baseline) */
#usarTodoBtn {
  white-space: nowrap;
  align-items: baseline;
}
#usarTodoBtn #stockTotalDisponible {
  font: inherit;
}


/* Informacion adicional (Cliente + Comentario): thin divider lines like Resumen de valores */
#formVenta .venta-section--bottom {
  border: 1px solid rgba(226, 232, 240, 1);
  border-radius: 8px;
  padding: 12px 16px;
  background: #fff;
}
#formVenta .venta-section--bottom .field[data-name="cliente"] {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(226, 232, 240, 1);
}
/* Modal venta: bloque Cliente + Comentario mas denso (2026-03-21) */
#dashboard-modal.is-venta #formVenta .venta-section--bottom {
  padding: 8px 12px;
}
#dashboard-modal.is-venta #formVenta .venta-section--bottom .field[data-name="cliente"] {
  padding-bottom: 6px;
  margin-bottom: 6px;
}
#dashboard-modal.is-venta #formVenta .np-venta-cliente-hint {
  margin: 0 0 4px 0;
}
#dashboard-modal.is-venta #formVenta .np-venta-cliente-opcional-wrap {
  margin-top: 6px;
  padding-top: 6px;
  gap: 4px;
}
#dashboard-modal.is-venta #formVenta .field[data-name="comentario"] textarea {
  min-height: 40px;
}