.costos-wrap {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

.costos-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(280px, 1.4fr) 140px;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

.costos-toolbar label {
  display: grid;
  gap: 4px;
}

.costos-toolbar label > span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  color: #64748b;
}

.costos-toolbar select,
.costos-toolbar input {
  width: 100%;
  height: 36px;
  border: 1px solid #cbd5e1;
  border-radius: 0;
  padding: 0 10px;
  background: #fff;
  color: #0f172a;
  font: inherit;
}

.costos-toolbar button {
  align-self: end;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: #7c3aed;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.costos-summary {
  display: grid;
  grid-template-columns: 140px 1fr 1fr 170px;
  gap: 1px;
  background: #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}

.costos-summary > div {
  min-width: 0;
  background: #f8fafc;
  padding: 8px 12px;
}

.costos-summary span {
  display: block;
  margin-bottom: 2px;
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
}

.costos-summary strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0f172a;
  font-size: 13px;
}

.costos-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
}

.costos-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.costos-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: #111827 !important;
  color: #fff !important;
  padding: 7px 8px !important;
  white-space: nowrap;
  font-size: 10px !important;
  text-align: left;
}

.costos-table thead th.num {
  text-align: right;
}

.costos-table tbody td {
  padding: 5px 8px !important;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  white-space: nowrap;
  height: 33px !important;
}

.costos-table tbody tr:nth-child(even) td {
  background: #f8fafc;
}

.costos-table tbody tr:hover td {
  background: #fff7cc;
}

.costos-table .num {
  text-align: right;
}

.costos-table .center {
  text-align: center;
}

.costos-sku {
  font-weight: 800;
}

.costos-description {
  min-width: 300px;
  max-width: 520px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.costos-average {
  font-weight: 800;
  color: #334155;
}

.costos-money-input {
  width: 116px;
  height: 28px;
  border: 1px solid #cbd5e1;
  border-radius: 0;
  padding: 2px 7px;
  background: #fff;
  text-align: right;
  font: inherit;
  font-weight: 700;
}

.costos-money-input:focus {
  outline: 2px solid rgba(124, 58, 237, .22);
  border-color: #7c3aed;
}

.costos-actions {
  display: flex;
  gap: 4px;
}

.costos-actions button {
  min-height: 26px;
  border: 0;
  border-radius: 0;
  padding: 5px 8px;
  background: #7c3aed;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.costos-actions button.secondary {
  background: #475569;
}

.costos-negative {
  color: #b91c1c;
}

.costos-empty {
  padding: 30px !important;
  color: #64748b;
  text-align: center;
}

.module-option.costos-precios .module-icon {
  background: #7c3aed !important;
}

@media (max-width: 1100px) {
  .costos-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .costos-summary {
    grid-template-columns: 1fr 1fr;
  }
}


/* CORRECCION DE VISTA - evita conflicto con estilos globales de .table-wrap */
#moduleView .table-wrap.costos-wrap {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  position: relative !important;
  min-height: 0 !important;
}

#moduleView .table-wrap.costos-wrap .costos-table-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  position: relative !important;
  scrollbar-width: thin !important;
}

#moduleView .table-wrap.costos-wrap .costos-table {
  width: 100% !important;
  min-width: 1094px !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  position: relative !important;
}

#moduleView .table-wrap.costos-wrap .costos-table thead,
#moduleView .table-wrap.costos-wrap .costos-table thead tr {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

#moduleView .table-wrap.costos-wrap .costos-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: #111827 !important;
  color: #fff !important;
  box-shadow: 0 1px 0 #111827 !important;
}

/* Anchos de columnas - orden solicitado */
#moduleView .costos-table th:nth-child(1),
#moduleView .costos-table td:nth-child(1) { width: 92px !important; }

#moduleView .costos-table th:nth-child(2),
#moduleView .costos-table td:nth-child(2) { width: 72px !important; }

#moduleView .costos-table th:nth-child(3),
#moduleView .costos-table td:nth-child(3) { width: 120px !important; }

#moduleView .costos-table th:nth-child(4),
#moduleView .costos-table td:nth-child(4) { width: 145px !important; }

#moduleView .costos-table th:nth-child(5),
#moduleView .costos-table td:nth-child(5) { width: 120px !important; }

#moduleView .costos-table th:nth-child(6),
#moduleView .costos-table td:nth-child(6) { width: 360px !important; }

#moduleView .costos-table th:nth-child(7),
#moduleView .costos-table td:nth-child(7) { width: 85px !important; }

#moduleView .costos-table th:nth-child(8),
#moduleView .costos-table td:nth-child(8) { width: 120px !important; }

#moduleView .costos-table .costos-description {
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#moduleView .costos-table .costos-money-input {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#moduleView .costos-table .costos-actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

#moduleView .costos-table .costos-actions button {
  flex: 0 0 auto !important;
  padding: 5px 7px !important;
}

/* Evita que el encabezado general del sistema interfiera con la tabla interna */
#moduleView.sales-dashboard-view .costos-table thead,
#moduleView.sales-dashboard-view .costos-table thead tr {
  top: auto !important;
}


/* BOTÓN BUSCAR / CONSULTAR - alineación y color */
#moduleView .costos-toolbar {
  align-items: end !important;
}

#moduleView .costos-toolbar #costosConsultar {
  align-self: end !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #15803d !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 38px !important;
  text-align: center !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

#moduleView .costos-toolbar #costosConsultar:hover {
  background: #166534 !important;
}


/* BOTÓN BUSCAR / CONSULTAR - alineación definitiva */
#moduleView .costos-toolbar {
  grid-template-columns: minmax(280px, 1.05fr) minmax(260px, 1fr) minmax(320px, 1.4fr) 155px !important;
  align-items: end !important;
}

#moduleView .costos-toolbar label {
  margin: 0 !important;
  padding: 0 !important;
}

#moduleView .costos-toolbar select,
#moduleView .costos-toolbar input,
#moduleView .costos-toolbar #costosConsultar {
  height: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
}

#moduleView .costos-toolbar select,
#moduleView .costos-toolbar input {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#moduleView .costos-toolbar #costosConsultar {
  align-self: end !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #15803d !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 40px !important;
  text-align: center !important;
  cursor: pointer !important;
}

#moduleView .costos-toolbar #costosConsultar:hover {
  background: #166534 !important;
}

/* ORDEN DE COLUMNAS: SKU | UNIDAD | DESCRIPCIÓN | $ PROMEDIO | $ REPOSICIÓN | $ VENTA | MARGEN | ACCIÓN */
#moduleView .costos-table th:nth-child(1),
#moduleView .costos-table td:nth-child(1) { width: 92px !important; }

#moduleView .costos-table th:nth-child(2),
#moduleView .costos-table td:nth-child(2) { width: 72px !important; }

#moduleView .costos-table th:nth-child(3),
#moduleView .costos-table td:nth-child(3) { width: 360px !important; }

#moduleView .costos-table th:nth-child(4),
#moduleView .costos-table td:nth-child(4) { width: 120px !important; }

#moduleView .costos-table th:nth-child(5),
#moduleView .costos-table td:nth-child(5) { width: 125px !important; }

#moduleView .costos-table th:nth-child(6),
#moduleView .costos-table td:nth-child(6) { width: 120px !important; }

#moduleView .costos-table th:nth-child(7),
#moduleView .costos-table td:nth-child(7) { width: 85px !important; }

#moduleView .costos-table th:nth-child(8),
#moduleView .costos-table td:nth-child(8) { width: 120px !important; }

@media (max-width: 1100px) {
  #moduleView .costos-toolbar {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* Último precio determinado de SAP */
#moduleView .costos-table .costos-average {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap !important;
}


/* MODO CONSULTA SAP - precios sin edición */
#moduleView .costos-table .costos-sap-price {
  font-weight: 800 !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

#moduleView .costos-table th:nth-child(1),
#moduleView .costos-table td:nth-child(1) { width: 92px !important; }

#moduleView .costos-table th:nth-child(2),
#moduleView .costos-table td:nth-child(2) { width: 72px !important; }

#moduleView .costos-table th:nth-child(3),
#moduleView .costos-table td:nth-child(3) { width: 420px !important; }

#moduleView .costos-table th:nth-child(4),
#moduleView .costos-table td:nth-child(4) { width: 145px !important; }

#moduleView .costos-table th:nth-child(5),
#moduleView .costos-table td:nth-child(5) { width: 135px !important; }

#moduleView .costos-table th:nth-child(6),
#moduleView .costos-table td:nth-child(6) { width: 125px !important; }

#moduleView .costos-table th:nth-child(7),
#moduleView .costos-table td:nth-child(7) { width: 90px !important; }


/* TABLA SIN MARGEN */
#moduleView .costos-table th:nth-child(1),
#moduleView .costos-table td:nth-child(1) { width: 92px !important; }

#moduleView .costos-table th:nth-child(2),
#moduleView .costos-table td:nth-child(2) { width: 72px !important; }

#moduleView .costos-table th:nth-child(3),
#moduleView .costos-table td:nth-child(3) { width: 450px !important; }

#moduleView .costos-table th:nth-child(4),
#moduleView .costos-table td:nth-child(4) { width: 130px !important; }

#moduleView .costos-table th:nth-child(5),
#moduleView .costos-table td:nth-child(5) { width: 135px !important; }

#moduleView .costos-table th:nth-child(6),
#moduleView .costos-table td:nth-child(6) { width: 125px !important; }


/* ENCABEZADOS A LA IZQUIERDA + VALORES SIN SIGNO DE PESOS */
#moduleView .costos-table thead th,
#moduleView .costos-table thead th.num {
  text-align: left !important;
}

#moduleView .costos-table td.costos-average,
#moduleView .costos-table td.costos-sap-price {
  font-variant-numeric: tabular-nums;
}


/* AJUSTE VISUAL FINAL DE COLUMNAS */
#moduleView .costos-table th:nth-child(2),
#moduleView .costos-table td:nth-child(2) {
  text-align: center !important;
}

#moduleView .costos-table th:nth-child(4),
#moduleView .costos-table td:nth-child(4),
#moduleView .costos-table th:nth-child(5),
#moduleView .costos-table td:nth-child(5),
#moduleView .costos-table th:nth-child(6),
#moduleView .costos-table td:nth-child(6) {
  text-align: center !important;
}

#moduleView .costos-table th:nth-child(1),
#moduleView .costos-table td:nth-child(1) { width: 95px !important; }

#moduleView .costos-table th:nth-child(2),
#moduleView .costos-table td:nth-child(2) { width: 75px !important; }

#moduleView .costos-table th:nth-child(3),
#moduleView .costos-table td:nth-child(3) { width: 470px !important; }

#moduleView .costos-table th:nth-child(4),
#moduleView .costos-table td:nth-child(4) { width: 115px !important; }

#moduleView .costos-table th:nth-child(5),
#moduleView .costos-table td:nth-child(5) { width: 120px !important; }

#moduleView .costos-table th:nth-child(6),
#moduleView .costos-table td:nth-child(6) { width: 110px !important; }

#moduleView .costos-table td.costos-average,
#moduleView .costos-table td.costos-sap-price {
  font-weight: 800 !important;
  text-align: center !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}


/* MULTISELECCIÓN FAMILIA / SUBFAMILIA */
#moduleView .costos-toolbar > #costosFamiliaHost,
#moduleView .costos-toolbar > #costosSubfamiliaHost { min-width: 0; }

#moduleView .costos-multi { position: relative; min-width: 0; }
#moduleView .costos-multi-label {
  display: block; margin-bottom: 4px; color: #64748b;
  font-size: 10px; font-weight: 800; letter-spacing: .05em;
}
#moduleView .costos-multi-button {
  width: 100% !important; height: 40px !important; min-height: 40px !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 8px !important; margin: 0 !important; padding: 0 12px !important;
  border: 1px solid #cbd5e1 !important; background: #fff !important; color: #0f172a !important;
  text-align: left !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important;
}
#moduleView .costos-multi-button > span:first-child {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
#moduleView .costos-multi-panel {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 500;
  max-height: 330px; overflow: hidden; border: 1px solid #94a3b8; background: #fff;
  box-shadow: 0 10px 24px rgba(15,23,42,.16);
}
#moduleView .costos-multi-panel.open { display: block; }
#moduleView .costos-multi-clear,
#moduleView .costos-multi-options label {
  display: flex !important; align-items: center !important; gap: 8px !important;
  min-height: 30px; margin: 0 !important; padding: 5px 10px !important;
  cursor: pointer; font-size: 12px; font-weight: 500;
}
#moduleView .costos-multi-clear { border-bottom: 1px solid #e2e8f0; font-weight: 800; }
#moduleView .costos-multi-options { max-height: 285px; overflow-y: auto; }
#moduleView .costos-multi-options label:hover,
#moduleView .costos-multi-clear:hover { background: #f1f5f9; }
#moduleView .costos-multi-panel input[type="checkbox"] {
  width: 15px !important; height: 15px !important; min-height: 15px !important;
  margin: 0 !important; flex: 0 0 15px; accent-color: #15803d;
}


/* CORRECCIÓN DESPLEGABLES MULTISELECCIÓN */
#moduleView .table-wrap.costos-wrap {
  overflow: visible !important;
}

#moduleView .costos-toolbar {
  position: relative !important;
  z-index: 300 !important;
  overflow: visible !important;
}

#moduleView .costos-toolbar > * {
  overflow: visible !important;
}

#moduleView .costos-multi {
  position: relative !important;
  z-index: 320 !important;
  overflow: visible !important;
}

#moduleView .costos-multi-panel {
  z-index: 1000 !important;
  max-height: 360px !important;
  overflow: hidden !important;
}

#moduleView .costos-multi-options {
  max-height: 315px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#moduleView .costos-summary {
  position: relative !important;
  z-index: 1 !important;
}

#moduleView .costos-table-scroll {
  position: relative !important;
  z-index: 1 !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
}


/* ENCABEZADO FIJO REAL: funciona aunque sticky falle por los contenedores del Dashboard */
.costos-fixed-header {
  position: fixed !important;
  z-index: 9999 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background: transparent !important;
}

.costos-fixed-header-table {
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
}

.costos-fixed-header-table thead,
.costos-fixed-header-table thead tr {
  position: static !important;
}

.costos-fixed-header-table thead th {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: #111827 !important;
  color: #fff !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, .18) !important;
}


/* ESPACIADOR PARA QUE NINGUNA FILA QUEDE DEBAJO DEL ENCABEZADO FIJO */
#moduleView .costos-header-spacer {
  display: block !important;
  width: 100% !important;
  height: 0;
  pointer-events: none;
  background: transparent;
}


/* AJUSTE FUERTE PARA EVITAR QUE SE VEAN DATOS DETRÁS DEL ENCABEZADO FIJO */
#moduleView .costos-table.costos-origin-header-hidden thead {
  visibility: hidden !important;
}

#moduleView .costos-table-scroll {
  padding-top: 0;
}

.costos-fixed-header {
  position: fixed !important;
  z-index: 9999 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background: #111827 !important;
}

.costos-fixed-header-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: #111827 !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

.costos-fixed-header-table {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  background: transparent !important;
}

.costos-fixed-header-table thead th {
  background: #111827 !important;
  opacity: 1 !important;
}

#moduleView .costos-table tbody td {
  position: relative !important;
  z-index: 1 !important;
}


/* =========================================================
   SOLUCIÓN DEFINITIVA: SCROLL INTERNO DE TABLA
   El encabezado permanece fijo y las filas nunca pasan detrás.
   ========================================================= */

.costos-fixed-header,
.costos-header-spacer {
  display: none !important;
}

#moduleView .costos-table.costos-origin-header-hidden thead {
  visibility: visible !important;
}

#moduleView .table-wrap.costos-wrap {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  min-height: 0 !important;
}

#moduleView .costos-toolbar,
#moduleView .costos-summary {
  flex: 0 0 auto !important;
}

#moduleView .costos-table-scroll {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;

  /* La tabla ocupa el espacio disponible de la pantalla */
  height: calc(100vh - 245px) !important;
  min-height: 280px !important;
  max-height: calc(100vh - 245px) !important;

  overflow-x: auto !important;
  overflow-y: auto !important;

  padding-top: 0 !important;
  background: #fff !important;
  scrollbar-width: thin;
}

#moduleView .costos-table {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#moduleView .costos-table thead {
  position: static !important;
  visibility: visible !important;
}

#moduleView .costos-table thead tr {
  position: static !important;
}

#moduleView .costos-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;

  background: #111827 !important;
  background-color: #111827 !important;
  color: #fff !important;
  opacity: 1 !important;

  box-shadow:
    0 1px 0 #111827,
    0 2px 3px rgba(15, 23, 42, .18) !important;
}

#moduleView .costos-table tbody {
  position: relative !important;
  z-index: 1 !important;
}

#moduleView .costos-table tbody tr,
#moduleView .costos-table tbody td {
  position: static !important;
  z-index: auto !important;
}

/* Los desplegables siguen saliendo por encima de la tabla */
#moduleView .costos-toolbar {
  position: relative !important;
  z-index: 500 !important;
  overflow: visible !important;
}

#moduleView .costos-multi {
  z-index: 510 !important;
}

#moduleView .costos-multi-panel {
  z-index: 1000 !important;
}

/* Ajuste para pantallas más bajas */
@media (max-height: 760px) {
  #moduleView .costos-table-scroll {
    height: calc(100vh - 220px) !important;
    max-height: calc(100vh - 220px) !important;
    min-height: 220px !important;
  }
}


/* =========================================================
   LAYOUT DEFINITIVO COSTOS:
   filtros + resumen + encabezado FIJOS
   SOLO LAS FILAS TIENEN SCROLL
   ========================================================= */

/* Mientras Costos está abierto, la página principal no hace scroll */
body.costos-module-active {
  overflow: hidden !important;
}

/* El módulo ocupa exactamente el espacio visible debajo de la barra principal */
body.costos-module-active #moduleView {
  height: calc(100vh - 86px) !important;
  max-height: calc(100vh - 86px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Cabecera propia del módulo (título/subtítulo/botones si existen) no crece */
body.costos-module-active #moduleView > .module-header,
body.costos-module-active #moduleView > .sales-dashboard-head,
body.costos-module-active #moduleView > .dashboard-head {
  flex: 0 0 auto !important;
}

/* La caja de Costos ocupa el resto de la altura */
body.costos-module-active #moduleView .table-wrap.costos-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;

  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;

  overflow: visible !important;
  position: relative !important;
}

/* FILTROS: siempre visibles */
body.costos-module-active #moduleView .costos-toolbar {
  grid-row: 2 !important;
  position: relative !important;
  top: auto !important;
  z-index: 500 !important;
  flex: none !important;
  overflow: visible !important;
  background: #fff !important;
}

/* RESUMEN: siempre visible */
body.costos-module-active #moduleView .costos-summary {
  grid-row: 3 !important;
  position: relative !important;
  top: auto !important;
  z-index: 100 !important;
  flex: none !important;
  background: #f8fafc !important;
}

/* ÚNICO CONTENEDOR QUE HACE SCROLL */
body.costos-module-active #moduleView .costos-table-scroll {
  grid-row: 4 !important;

  position: relative !important;
  z-index: 1 !important;

  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow-y: auto !important;
  overflow-x: auto !important;

  padding: 0 !important;
  margin: 0 !important;
  background: #fff !important;
  overscroll-behavior: contain;
}

/* Tabla normal dentro de su scroll */
body.costos-module-active #moduleView .costos-table {
  width: 100% !important;
  min-width: 100% !important;
  margin: 0 !important;
  position: relative !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* ENCABEZADOS: fijos dentro del scroll de las filas */
body.costos-module-active #moduleView .costos-table thead {
  position: static !important;
  visibility: visible !important;
}

body.costos-module-active #moduleView .costos-table thead tr {
  position: static !important;
}

body.costos-module-active #moduleView .costos-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;

  background: #111827 !important;
  background-color: #111827 !important;
  color: #fff !important;
  opacity: 1 !important;

  box-shadow: 0 1px 0 #111827 !important;
}

/* Las filas jamás se superponen al encabezado */
body.costos-module-active #moduleView .costos-table tbody,
body.costos-module-active #moduleView .costos-table tbody tr,
body.costos-module-active #moduleView .costos-table tbody td {
  position: static !important;
  z-index: auto !important;
}

/* Anula por completo intentos previos de encabezado clonado */
body.costos-module-active .costos-fixed-header,
body.costos-module-active .costos-header-spacer {
  display: none !important;
}

/* Desplegables sobre todo, sin cortarse */
body.costos-module-active #moduleView .costos-multi-panel {
  z-index: 2000 !important;
}

/* En pantallas bajas reducimos únicamente el espacio superior del módulo */
@media (max-height: 760px) {
  body.costos-module-active #moduleView {
    height: calc(100vh - 78px) !important;
    max-height: calc(100vh - 78px) !important;
  }
}


/* ==========================================================
   COSTOS - LAYOUT FIJO AL VIEWPORT
   ÚNICO SCROLL: FILAS DE LA TABLA
   ========================================================== */

html:has(body.costos-module-active),
body.costos-module-active {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* El dashboard principal no puede generar scroll mientras Costos está abierto */
body.costos-module-active {
  overscroll-behavior: none !important;
}

body.costos-module-active #moduleView {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 86px !important;
  bottom: 0 !important;

  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 10px 28px 12px !important;

  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: #f7f7fb !important;
}

/* Oculta cualquier encabezado/leyenda superior del módulo que ocupe espacio o se encime */
body.costos-module-active #moduleView > .module-header,
body.costos-module-active #moduleView > .sales-dashboard-head,
body.costos-module-active #moduleView > .dashboard-head {
  display: none !important;
}

/* La tarjeta de Costos llena exactamente el espacio disponible */
body.costos-module-active #moduleView .table-wrap.costos-wrap {
  position: relative !important;
  inset: auto !important;

  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;

  overflow: visible !important;
  box-sizing: border-box !important;

  border-radius: 16px !important;
  background: #fff !important;
}

/* FILTROS */
body.costos-module-active #moduleView .costos-toolbar {
  grid-row: 2 !important;
  position: relative !important;
  z-index: 500 !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* RESUMEN */
body.costos-module-active #moduleView .costos-summary {
  grid-row: 3 !important;
  position: relative !important;
  z-index: 100 !important;
  min-height: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* ESTE ES EL ÚNICO SCROLL */
body.costos-module-active #moduleView .costos-table-scroll {
  grid-row: 4 !important;

  position: relative !important;
  z-index: 1 !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow-x: auto !important;
  overflow-y: scroll !important;
  overscroll-behavior: contain !important;

  background: #fff !important;
  box-sizing: border-box !important;
}

/* No permitir que ninguna regla anterior haga crecer la tabla */
body.costos-module-active #moduleView .costos-table {
  width: 100% !important;
  min-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
}

/* ENCABEZADO SIEMPRE FIJO DENTRO DEL SCROLL DE LA TABLA */
body.costos-module-active #moduleView .costos-table thead {
  position: static !important;
  visibility: visible !important;
}

body.costos-module-active #moduleView .costos-table thead tr {
  position: static !important;
}

body.costos-module-active #moduleView .costos-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;

  background: #111827 !important;
  background-color: #111827 !important;
  color: #fff !important;
  opacity: 1 !important;

  box-shadow: 0 1px 0 #111827 !important;
}

/* Las filas no pueden crear capas sobre el encabezado */
body.costos-module-active #moduleView .costos-table tbody,
body.costos-module-active #moduleView .costos-table tbody tr,
body.costos-module-active #moduleView .costos-table tbody td {
  position: static !important;
  z-index: auto !important;
}

/* Elimina restos de soluciones anteriores */
body.costos-module-active .costos-fixed-header,
body.costos-module-active .costos-header-spacer {
  display: none !important;
}

/* Desplegables por encima de la tabla */
body.costos-module-active #moduleView .costos-multi-panel {
  z-index: 3000 !important;
}

/* Evita el elemento negro que estaba asomándose al lado izquierdo */
body.costos-module-active #moduleBadge {
  display: none !important;
}

/* Responsive para pantallas con barra superior un poco más alta */
@media (max-height: 760px) {
  body.costos-module-active #moduleView {
    top: 78px !important;
    padding-top: 6px !important;
    padding-bottom: 8px !important;
  }
}


/* OCULTAR BADGE/TÍTULO FLOTANTE DEL MÓDULO COSTOS */
body.costos-module-active #moduleBadge,
body.costos-module-active .module-badge,
body.costos-module-active .table-badge,
body.costos-module-active .section-badge,
body.costos-module-active .floating-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Si existe algún pseudo-elemento o contenedor lateral, no debe asomarse */
body.costos-module-active #moduleView::before,
body.costos-module-active #moduleView::after,
body.costos-module-active #tableWrap::before,
body.costos-module-active #tableWrap::after {
  content: none !important;
  display: none !important;
}


/* TÍTULO INTEGRADO DEL MÓDULO - reemplaza definitivamente el badge negro */
body.costos-module-active #moduleBadge,
body.costos-module-active .module-badge,
body.costos-module-active .table-badge,
body.costos-module-active .section-badge,
body.costos-module-active .floating-badge {
  display: none !important;
  visibility: hidden !important;
}

body.costos-module-active #moduleView .costos-module-title {
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;

  min-height: 34px !important;
  padding: 8px 12px 4px !important;
  margin: 0 !important;

  background: #fff !important;
  color: #0f172a !important;

  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;

  border-radius: 16px 16px 0 0 !important;
  box-sizing: border-box !important;
}

/* Toolbar immediately follows title without overlap */
body.costos-module-active #moduleView .costos-module-title + .costos-toolbar {
  border-top: 0 !important;
  padding-top: 6px !important;
}


/* ELIMINAR DEFINITIVAMENTE LA PESTAÑA NEGRA LATERAL (module-side-actions/exportBtn) */
body.costos-module-active #moduleView > .module-side-actions {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* El panel de Costos ocupa todo el ancho disponible */
body.costos-module-active #moduleView > .panel {
  width: 100% !important;
  max-width: none !important;
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}


/* COLUMNAS SAP + COTIZADOR */
#moduleView .costos-table th:nth-child(1),
#moduleView .costos-table td:nth-child(1) { width: 95px !important; }
#moduleView .costos-table th:nth-child(2),
#moduleView .costos-table td:nth-child(2) { width: 75px !important; text-align: center !important; }
#moduleView .costos-table th:nth-child(3),
#moduleView .costos-table td:nth-child(3) { width: 430px !important; }
#moduleView .costos-table th:nth-child(4),
#moduleView .costos-table td:nth-child(4) { width: 120px !important; text-align: center !important; }
#moduleView .costos-table th:nth-child(5),
#moduleView .costos-table td:nth-child(5) { width: 130px !important; text-align: center !important; }
#moduleView .costos-table th:nth-child(6),
#moduleView .costos-table td:nth-child(6) { width: 120px !important; text-align: center !important; }
#moduleView .costos-table th:nth-child(7),
#moduleView .costos-table td:nth-child(7) { width: 145px !important; text-align: center !important; }
#moduleView .costos-table th:nth-child(8),
#moduleView .costos-table td:nth-child(8) { width: 145px !important; text-align: center !important; }
#moduleView .costos-table th:nth-child(9),
#moduleView .costos-table td:nth-child(9) { width: 160px !important; text-align: center !important; }

#moduleView .costos-table {
  min-width: 1420px !important;
}

#moduleView .costos-table .costos-sap-price,
#moduleView .costos-table .costos-average {
  font-weight: 800 !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums;
}

#moduleView .costos-table .costos-money-input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 125px !important;
  height: 28px !important;
  text-align: center !important;
  margin: 0 auto !important;
  display: block !important;
}

#moduleView .costos-table .costos-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

#moduleView .costos-table .costos-actions button {
  min-width: 68px !important;
}

#moduleView .costos-table thead th {
  font-size: 10px !important;
}


/* ENCABEZADOS AGRUPADOS SAP / COTIZADOR */
#moduleView .costos-table thead .costos-group-head th {
  text-align: center !important;
  background: #0b1220 !important;
  color: #fff !important;
  font-size: 10px !important;
  letter-spacing: .05em !important;
  padding: 5px 6px !important;
}

#moduleView .costos-table thead .costos-column-head th {
  text-align: center !important;
  background: #111827 !important;
  color: #fff !important;
  padding: 5px 6px !important;
}

/* sticky de dos niveles */
body.costos-module-active #moduleView .costos-table thead .costos-group-head th {
  position: sticky !important;
  top: 0 !important;
  z-index: 210 !important;
}

body.costos-module-active #moduleView .costos-table thead .costos-column-head th {
  position: sticky !important;
  top: 26px !important;
  z-index: 205 !important;
}

/* Botones generales */
#moduleView .costos-toolbar {
  grid-template-columns: minmax(280px, 1.05fr) minmax(260px, 1fr) minmax(320px, 1.4fr) 310px !important;
}

#moduleView .costos-toolbar-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  align-items: end !important;
}

#moduleView .costos-toolbar-actions button {
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#moduleView #costosGuardarCambios {
  background: #0f172a !important;
  color: #fff !important;
}

#moduleView #costosGuardarCambios:disabled {
  background: #cbd5e1 !important;
  color: #64748b !important;
  cursor: default !important;
}

/* columnas finales: 8 */
#moduleView .costos-table th:nth-child(1),
#moduleView .costos-table td:nth-child(1) { width: 95px !important; }
#moduleView .costos-table th:nth-child(2),
#moduleView .costos-table td:nth-child(2) { width: 75px !important; text-align: center !important; }
#moduleView .costos-table th:nth-child(3),
#moduleView .costos-table td:nth-child(3) { width: 430px !important; }
#moduleView .costos-table th:nth-child(4),
#moduleView .costos-table td:nth-child(4) { width: 120px !important; text-align: center !important; }
#moduleView .costos-table th:nth-child(5),
#moduleView .costos-table td:nth-child(5) { width: 130px !important; text-align: center !important; }
#moduleView .costos-table th:nth-child(6),
#moduleView .costos-table td:nth-child(6) { width: 120px !important; text-align: center !important; }
#moduleView .costos-table th:nth-child(7),
#moduleView .costos-table td:nth-child(7) { width: 145px !important; text-align: center !important; }
#moduleView .costos-table th:nth-child(8),
#moduleView .costos-table td:nth-child(8) { width: 145px !important; text-align: center !important; }

#moduleView .costos-table {
  min-width: 1260px !important;
}

/* Quitar flechas internas de number */
#moduleView .costos-money-input::-webkit-outer-spin-button,
#moduleView .costos-money-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
#moduleView .costos-money-input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* entradas cotizador */
#moduleView .costos-table .costos-money-input {
  width: 118px !important;
  max-width: 118px !important;
  height: 28px !important;
  margin: 0 auto !important;
  display: block !important;
  text-align: center !important;
}

/* cambios pendientes */
#moduleView .costos-table tr.costos-row-dirty td {
  background: #fffbea !important;
}
#moduleView .costos-table tr.costos-row-error td {
  background: #fee2e2 !important;
}


/* ==========================================================
   COMPACTAR TABLA AL 75%
   ========================================================== */
#moduleView .costos-table {
  font-size: 75% !important;
}

#moduleView .costos-table thead th {
  font-size: 75% !important;
  padding: 4px 5px !important;
  line-height: 1.05 !important;
}

#moduleView .costos-table tbody td {
  padding: 4px 5px !important;
  line-height: 1.05 !important;
}

#moduleView .costos-table .costos-sku,
#moduleView .costos-table .costos-description,
#moduleView .costos-table .costos-average,
#moduleView .costos-table .costos-sap-price {
  font-size: 75% !important;
}

#moduleView .costos-table .costos-money-input {
  width: 90px !important;
  max-width: 90px !important;
  height: 22px !important;
  min-height: 22px !important;
  font-size: 75% !important;
  padding: 2px 4px !important;
}

/* Compactar encabezados agrupados */
#moduleView .costos-table thead .costos-group-head th,
#moduleView .costos-table thead .costos-column-head th {
  font-size: 75% !important;
  padding: 4px 5px !important;
}

/* Compactar anchos de columnas aproximadamente al 75% */
#moduleView .costos-table th:nth-child(1),
#moduleView .costos-table td:nth-child(1) { width: 72px !important; }

#moduleView .costos-table th:nth-child(2),
#moduleView .costos-table td:nth-child(2) { width: 56px !important; }

#moduleView .costos-table th:nth-child(3),
#moduleView .costos-table td:nth-child(3) { width: 322px !important; }

#moduleView .costos-table th:nth-child(4),
#moduleView .costos-table td:nth-child(4) { width: 90px !important; }

#moduleView .costos-table th:nth-child(5),
#moduleView .costos-table td:nth-child(5) { width: 98px !important; }

#moduleView .costos-table th:nth-child(6),
#moduleView .costos-table td:nth-child(6) { width: 90px !important; }

#moduleView .costos-table th:nth-child(7),
#moduleView .costos-table td:nth-child(7) { width: 109px !important; }

#moduleView .costos-table th:nth-child(8),
#moduleView .costos-table td:nth-child(8) { width: 109px !important; }

#moduleView .costos-table {
  min-width: 945px !important;
}


/* ==========================================================
   CORRECCIÓN: TABLA AL 75% DE ANCHO, NO TEXTO AL 75%
   ========================================================== */

body.costos-module-active #moduleView .costos-table-scroll {
  overflow-x: auto !important;
  overflow-y: scroll !important;
}

/* Tabla ocupa 75% del ancho disponible */
body.costos-module-active #moduleView .costos-table {
  width: 75% !important;
  min-width: 1050px !important;
  max-width: 75% !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  font-size: 12px !important;
}

/* Restaurar tamaño normal */
body.costos-module-active #moduleView .costos-table thead th,
body.costos-module-active #moduleView .costos-table thead .costos-group-head th,
body.costos-module-active #moduleView .costos-table thead .costos-column-head th {
  font-size: 10px !important;
  padding: 5px 7px !important;
  line-height: 1.15 !important;
}

body.costos-module-active #moduleView .costos-table tbody td {
  font-size: 12px !important;
  padding: 4px 7px !important;
  line-height: 1.15 !important;
}

body.costos-module-active #moduleView .costos-table .costos-sku,
body.costos-module-active #moduleView .costos-table .costos-description,
body.costos-module-active #moduleView .costos-table .costos-average,
body.costos-module-active #moduleView .costos-table .costos-sap-price {
  font-size: 12px !important;
}

/* Inputs normales pero compactos */
body.costos-module-active #moduleView .costos-table .costos-money-input {
  width: 105px !important;
  max-width: 105px !important;
  height: 27px !important;
  min-height: 27px !important;
  font-size: 12px !important;
  padding: 2px 6px !important;
}

/* Anchos proporcionados dentro de la tabla */
body.costos-module-active #moduleView .costos-table th:nth-child(1),
body.costos-module-active #moduleView .costos-table td:nth-child(1) { width: 80px !important; }

body.costos-module-active #moduleView .costos-table th:nth-child(2),
body.costos-module-active #moduleView .costos-table td:nth-child(2) { width: 65px !important; }

body.costos-module-active #moduleView .costos-table th:nth-child(3),
body.costos-module-active #moduleView .costos-table td:nth-child(3) { width: 340px !important; }

body.costos-module-active #moduleView .costos-table th:nth-child(4),
body.costos-module-active #moduleView .costos-table td:nth-child(4) { width: 105px !important; }

body.costos-module-active #moduleView .costos-table th:nth-child(5),
body.costos-module-active #moduleView .costos-table td:nth-child(5) { width: 110px !important; }

body.costos-module-active #moduleView .costos-table th:nth-child(6),
body.costos-module-active #moduleView .costos-table td:nth-child(6) { width: 105px !important; }

body.costos-module-active #moduleView .costos-table th:nth-child(7),
body.costos-module-active #moduleView .costos-table td:nth-child(7) { width: 120px !important; }

body.costos-module-active #moduleView .costos-table th:nth-child(8),
body.costos-module-active #moduleView .costos-table td:nth-child(8) { width: 120px !important; }


/* ==========================================================
   VISTA COMPACTA: TARJETA + TABLA
   Mantiene tamaño de letra; reduce espacios y anchos.
   ========================================================== */

/* Tarjeta más chica y centrada */
body.costos-module-active #moduleView {
  padding-left: 22px !important;
  padding-right: 22px !important;
}

body.costos-module-active #moduleView .table-wrap.costos-wrap {
  width: 82% !important;
  max-width: 1480px !important;
  min-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Título más compacto */
body.costos-module-active #moduleView .costos-module-title {
  min-height: 30px !important;
  padding: 7px 10px 2px !important;
  font-size: 17px !important;
}

/* Filtros compactos, sin reducir letra */
body.costos-module-active #moduleView .costos-toolbar {
  padding: 6px 10px 8px !important;
  gap: 7px !important;
  grid-template-columns:
    minmax(230px, 1.05fr)
    minmax(205px, .95fr)
    minmax(250px, 1.25fr)
    285px !important;
}

body.costos-module-active #moduleView .costos-toolbar input,
body.costos-module-active #moduleView .costos-toolbar select,
body.costos-module-active #moduleView .costos-multi-button,
body.costos-module-active #moduleView .costos-toolbar-actions button {
  height: 36px !important;
  min-height: 36px !important;
}

body.costos-module-active #moduleView .costos-toolbar-actions {
  gap: 6px !important;
}

/* Resumen más bajo */
body.costos-module-active #moduleView .costos-summary > div {
  padding: 5px 9px !important;
}

body.costos-module-active #moduleView .costos-summary span {
  margin-bottom: 1px !important;
}

body.costos-module-active #moduleView .costos-summary strong {
  font-size: 12px !important;
}

/* La tabla usa TODA la tarjeta, no 75% */
body.costos-module-active #moduleView .costos-table {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  table-layout: fixed !important;
  font-size: 12px !important;
}

/* Encabezados agrupados claros y centrados */
body.costos-module-active #moduleView .costos-table thead .costos-group-head th {
  height: 22px !important;
  padding: 3px 5px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

body.costos-module-active #moduleView .costos-table thead .costos-column-head th {
  height: 24px !important;
  padding: 4px 4px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

/* Las tres columnas base también quedan centradas verticalmente */
body.costos-module-active #moduleView .costos-table thead .costos-group-head th[rowspan="2"] {
  vertical-align: middle !important;
}

/* Filas compactas sin achicar texto */
body.costos-module-active #moduleView .costos-table tbody td {
  height: 29px !important;
  padding: 3px 6px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
}

/* Anchos compactos y balanceados */
body.costos-module-active #moduleView .costos-table th:nth-child(1),
body.costos-module-active #moduleView .costos-table td:nth-child(1) {
  width: 72px !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(2),
body.costos-module-active #moduleView .costos-table td:nth-child(2) {
  width: 58px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(3),
body.costos-module-active #moduleView .costos-table td:nth-child(3) {
  width: 360px !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(4),
body.costos-module-active #moduleView .costos-table td:nth-child(4) {
  width: 92px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(5),
body.costos-module-active #moduleView .costos-table td:nth-child(5) {
  width: 96px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(6),
body.costos-module-active #moduleView .costos-table td:nth-child(6) {
  width: 90px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(7),
body.costos-module-active #moduleView .costos-table td:nth-child(7) {
  width: 105px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(8),
body.costos-module-active #moduleView .costos-table td:nth-child(8) {
  width: 105px !important;
  text-align: center !important;
}

/* Descripción aprovecha el espacio sin empujar costos */
body.costos-module-active #moduleView .costos-description {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Inputs compactos pero legibles */
body.costos-module-active #moduleView .costos-table .costos-money-input {
  width: 92px !important;
  max-width: 92px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 1px 5px !important;
  font-size: 12px !important;
}

/* Sticky: segundo renglón comienza justo debajo de SAP/COTIZADOR */
body.costos-module-active #moduleView .costos-table thead .costos-group-head th {
  top: 0 !important;
}

body.costos-module-active #moduleView .costos-table thead .costos-column-head th {
  top: 22px !important;
}

/* Pantallas medianas: tarjeta crece para no deformarse */
@media (max-width: 1450px) {
  body.costos-module-active #moduleView .table-wrap.costos-wrap {
    width: 94% !important;
    min-width: 980px !important;
  }
}


/* ==========================================================
   SEPARACIÓN VISUAL ENTRE SAP Y COTIZADOR
   ========================================================== */

/* Línea divisoria entre grupos */
body.costos-module-active #moduleView .costos-table thead .costos-group-head th[colspan="3"] {
  border-right: 14px solid #ffffff !important;
}

body.costos-module-active #moduleView .costos-table thead .costos-column-head th:nth-child(3) {
  border-right: 14px solid #ffffff !important;
}

body.costos-module-active #moduleView .costos-table tbody td:nth-child(6) {
  border-right: 14px solid #ffffff !important;
}

/* Un poco más de aire entre columnas finales SAP y primeras de Cotizador */
body.costos-module-active #moduleView .costos-table thead .costos-column-head th:nth-child(3) {
  padding-right: 12px !important;
}

body.costos-module-active #moduleView .costos-table thead .costos-column-head th:nth-child(4) {
  padding-left: 12px !important;
}

body.costos-module-active #moduleView .costos-table tbody td:nth-child(6) {
  padding-right: 12px !important;
}

body.costos-module-active #moduleView .costos-table tbody td:nth-child(7) {
  padding-left: 12px !important;
}

/* Ajuste del ancho para conservar buena lectura */
body.costos-module-active #moduleView .costos-table th:nth-child(6),
body.costos-module-active #moduleView .costos-table td:nth-child(6) {
  width: 96px !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(7),
body.costos-module-active #moduleView .costos-table td:nth-child(7) {
  width: 112px !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(8),
body.costos-module-active #moduleView .costos-table td:nth-child(8) {
  width: 112px !important;
}


/* ==========================================================
   AJUSTE PROFESIONAL FINAL
   - tarjeta compacta y proporcionada
   - tabla al ancho real de la tarjeta
   - SKU y descripción más compactos
   - separación SAP / COTIZADOR sutil y limpia
   - encabezados alineados
   ========================================================== */

body.costos-module-active #moduleView {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* Tarjeta más proporcionada al contenido */
body.costos-module-active #moduleView .table-wrap.costos-wrap {
  width: min(1320px, calc(100vw - 42px)) !important;
  max-width: 1320px !important;
  min-width: 1120px !important;
  margin: 0 auto !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08) !important;
  overflow: hidden !important;
}

/* Título y bloques superiores más equilibrados */
body.costos-module-active #moduleView .costos-module-title {
  padding: 10px 14px 4px !important;
  min-height: 34px !important;
  font-size: 17px !important;
}

body.costos-module-active #moduleView .costos-toolbar {
  padding: 8px 14px 10px !important;
  gap: 8px !important;
  grid-template-columns:
    minmax(230px, 1fr)
    minmax(210px, 0.95fr)
    minmax(255px, 1.18fr)
    300px !important;
}

body.costos-module-active #moduleView .costos-summary {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.costos-module-active #moduleView .costos-summary > div {
  padding: 6px 12px !important;
}

/* Tabla perfectamente contenida en la tarjeta */
body.costos-module-active #moduleView .costos-table-scroll {
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #fff !important;
}

body.costos-module-active #moduleView .costos-table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
  font-size: 12px !important;
}

/* Encabezados mejor alineados */
body.costos-module-active #moduleView .costos-table thead .costos-group-head th {
  position: sticky !important;
  top: 0 !important;
  z-index: 220 !important;
  height: 24px !important;
  padding: 5px 6px 3px !important;
  background: #0b1327 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

body.costos-module-active #moduleView .costos-table thead .costos-column-head th {
  position: sticky !important;
  top: 24px !important;
  z-index: 215 !important;
  height: 26px !important;
  padding: 4px 6px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

body.costos-module-active #moduleView .costos-table thead .costos-group-head th[rowspan="2"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Filas compactas y limpias */
body.costos-module-active #moduleView .costos-table tbody td {
  height: 32px !important;
  padding: 5px 8px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  border-bottom: 1px solid #e8edf4 !important;
  vertical-align: middle !important;
}

body.costos-module-active #moduleView .costos-table tbody tr:nth-child(even) td {
  background: #f8fafc !important;
}

/* Columnas compactadas */
body.costos-module-active #moduleView .costos-table th:nth-child(1),
body.costos-module-active #moduleView .costos-table td:nth-child(1) {
  width: 58px !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(2),
body.costos-module-active #moduleView .costos-table td:nth-child(2) {
  width: 52px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(3),
body.costos-module-active #moduleView .costos-table td:nth-child(3) {
  width: 400px !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(4),
body.costos-module-active #moduleView .costos-table td:nth-child(4) {
  width: 88px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(5),
body.costos-module-active #moduleView .costos-table td:nth-child(5) {
  width: 92px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(6),
body.costos-module-active #moduleView .costos-table td:nth-child(6) {
  width: 88px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(7),
body.costos-module-active #moduleView .costos-table td:nth-child(7) {
  width: 102px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(8),
body.costos-module-active #moduleView .costos-table td:nth-child(8) {
  width: 102px !important;
  text-align: center !important;
}

/* Descripción controlada, sin exagerar */
body.costos-module-active #moduleView .costos-description {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Inputs uniformes */
body.costos-module-active #moduleView .costos-table .costos-money-input {
  width: 92px !important;
  max-width: 92px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 2px 6px !important;
  font-size: 12px !important;
  border: 1px solid #d8dee8 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

/* Separación SAP / COTIZADOR elegante: sin huecos enormes */
body.costos-module-active #moduleView .costos-table thead .costos-group-head th[colspan="3"] {
  border-right: 2px solid #cfd8e3 !important;
}

body.costos-module-active #moduleView .costos-table thead .costos-group-head th[colspan="2"] {
  border-left: 2px solid #cfd8e3 !important;
}

body.costos-module-active #moduleView .costos-table thead .costos-column-head th:nth-child(3) {
  border-right: 2px solid #cfd8e3 !important;
  padding-right: 8px !important;
}

body.costos-module-active #moduleView .costos-table thead .costos-column-head th:nth-child(4) {
  border-left: 2px solid #cfd8e3 !important;
  padding-left: 8px !important;
}

body.costos-module-active #moduleView .costos-table tbody td:nth-child(6) {
  border-right: 2px solid #e2e8f0 !important;
  padding-right: 8px !important;
}

body.costos-module-active #moduleView .costos-table tbody td:nth-child(7) {
  border-left: 2px solid #e2e8f0 !important;
  padding-left: 8px !important;
}

/* Ajuste fino del bloque de botones */
body.costos-module-active #moduleView .costos-toolbar-actions {
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

body.costos-module-active #moduleView .costos-toolbar-actions button {
  height: 44px !important;
  min-height: 44px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}


/* ==========================================================
   AJUSTE DE COLUMNAS + SAP INACTIVO + SKU CENTRADO
   ========================================================== */

/* SKU centrado */
body.costos-module-active #moduleView .costos-table th:nth-child(1),
body.costos-module-active #moduleView .costos-table td:nth-child(1) {
  width: 62px !important;
  text-align: center !important;
}

/* Descripción más compacta */
body.costos-module-active #moduleView .costos-table th:nth-child(3),
body.costos-module-active #moduleView .costos-table td:nth-child(3) {
  width: 330px !important;
}

/* Columnas de importes un poco más anchas */
body.costos-module-active #moduleView .costos-table th:nth-child(4),
body.costos-module-active #moduleView .costos-table td:nth-child(4) {
  width: 102px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(5),
body.costos-module-active #moduleView .costos-table td:nth-child(5) {
  width: 104px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(6),
body.costos-module-active #moduleView .costos-table td:nth-child(6) {
  width: 102px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(7),
body.costos-module-active #moduleView .costos-table td:nth-child(7) {
  width: 112px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(8),
body.costos-module-active #moduleView .costos-table td:nth-child(8) {
  width: 112px !important;
  text-align: center !important;
}

/* Descripción con ellipsis */
body.costos-module-active #moduleView .costos-description {
  max-width: 330px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* SAP en gris oscuro / efecto dato inactivo */
body.costos-module-active #moduleView .costos-average,
body.costos-module-active #moduleView .costos-sap-price,
body.costos-module-active #moduleView .costos-table tbody td:nth-child(4),
body.costos-module-active #moduleView .costos-table tbody td:nth-child(5),
body.costos-module-active #moduleView .costos-table tbody td:nth-child(6) {
  color: #4b5563 !important;
  font-weight: 700 !important;
}

/* Cotizador activo */
body.costos-module-active #moduleView .costos-table tbody td:nth-child(7),
body.costos-module-active #moduleView .costos-table tbody td:nth-child(8) {
  color: #111827 !important;
}

body.costos-module-active #moduleView .costos-table .costos-money-input {
  width: 96px !important;
  max-width: 96px !important;
}


/* ==========================================================
   AJUSTE EXTRA:
   menos ancho en DESCRIPCIÓN para compactar la tabla
   ========================================================== */

body.costos-module-active #moduleView .table-wrap.costos-wrap {
  width: min(1260px, calc(100vw - 42px)) !important;
  max-width: 1260px !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(3),
body.costos-module-active #moduleView .costos-table td:nth-child(3) {
  width: 285px !important;
}

body.costos-module-active #moduleView .costos-description {
  max-width: 285px !important;
}

/* Compactar un poco más el bloque total para reducir el ancho de la tabla */
body.costos-module-active #moduleView .costos-table th:nth-child(4),
body.costos-module-active #moduleView .costos-table td:nth-child(4) {
  width: 98px !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(5),
body.costos-module-active #moduleView .costos-table td:nth-child(5) {
  width: 100px !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(6),
body.costos-module-active #moduleView .costos-table td:nth-child(6) {
  width: 98px !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(7),
body.costos-module-active #moduleView .costos-table td:nth-child(7) {
  width: 108px !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(8),
body.costos-module-active #moduleView .costos-table td:nth-child(8) {
  width: 108px !important;
}


/* ==========================================================
   ACCIONES LATERALES + CAMBIOS DE COTIZADOR
   ========================================================== */

/* La fila 4 contiene tabla + botones laterales */
body.costos-module-active #moduleView .costos-table-area {
  grid-row: 4 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 150px !important;
  gap: 12px !important;
  overflow: hidden !important;
  padding: 0 10px 10px !important;
  box-sizing: border-box !important;
  background: #fff !important;
}

body.costos-module-active #moduleView .costos-table-area .costos-table-scroll {
  grid-row: auto !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
}

body.costos-module-active #moduleView .costos-side-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-self: start !important;
  padding-top: 4px !important;
}

body.costos-module-active #moduleView .costos-side-actions button {
  width: 100% !important;
  min-height: 42px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  cursor: pointer !important;
}

body.costos-module-active #moduleView .costos-action-save {
  background: #111827 !important;
  color: #fff !important;
}

body.costos-module-active #moduleView .costos-action-save:disabled {
  background: #cbd5e1 !important;
  color: #64748b !important;
  cursor: default !important;
}

body.costos-module-active #moduleView .costos-action-export {
  background: #0f766e !important;
  color: #fff !important;
}

body.costos-module-active #moduleView .costos-action-import {
  background: #2563eb !important;
  color: #fff !important;
}

/* Toolbar vuelve a un solo botón */
body.costos-module-active #moduleView .costos-toolbar {
  grid-template-columns:
    minmax(230px, 1fr)
    minmax(210px, .95fr)
    minmax(255px, 1.18fr)
    150px !important;
}

body.costos-module-active #moduleView .costos-toolbar-actions {
  display: block !important;
}

body.costos-module-active #moduleView .costos-toolbar-actions #costosConsultar {
  width: 100% !important;
}

/* Cotizador negro, SAP gris/inactivo */
body.costos-module-active #moduleView .costos-money-input {
  color: #111827 !important;
  font-weight: 700 !important;
  background: #fff !important;
}

body.costos-module-active #moduleView .costos-money-input::placeholder {
  color: #6b7280 !important;
  opacity: .72 !important;
}

/* Solo la celda modificada se pinta amarillo */
body.costos-module-active #moduleView .costos-money-input.costos-input-dirty {
  background: #fff3bf !important;
  border-color: #eab308 !important;
  color: #111827 !important;
}

body.costos-module-active #moduleView .costos-money-input.costos-input-error {
  background: #fee2e2 !important;
  border-color: #dc2626 !important;
}

/* Ya no pintar toda la fila */
#moduleView .costos-table tr.costos-row-dirty td {
  background: inherit !important;
}

/* Modal de confirmación */
.costos-confirm-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 12000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(15, 23, 42, .36) !important;
}

.costos-confirm-modal.hidden {
  display: none !important;
}

.costos-confirm-card {
  width: min(720px, 92vw) !important;
  max-height: 78vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .24) !important;
  overflow: hidden !important;
}

.costos-confirm-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.costos-confirm-head strong {
  color: #0f172a !important;
  font-size: 14px !important;
}

.costos-confirm-head button {
  border: 0 !important;
  background: transparent !important;
  font-size: 24px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.costos-confirm-body {
  min-height: 0 !important;
  overflow: auto !important;
  padding: 12px 16px !important;
}

.costos-confirm-summary {
  margin-bottom: 8px !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.costos-confirm-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 12px !important;
}

.costos-confirm-table th {
  padding: 7px 8px !important;
  background: #111827 !important;
  color: #fff !important;
  text-align: left !important;
}

.costos-confirm-table td {
  padding: 7px 8px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.costos-confirm-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  border-top: 1px solid #e2e8f0 !important;
}

.costos-confirm-actions button {
  min-width: 130px !important;
  min-height: 38px !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

#costosConfirmCancel {
  background: #e2e8f0 !important;
  color: #334155 !important;
}

#costosConfirmAccept {
  background: #15803d !important;
  color: #fff !important;
}

body.costos-module-active #moduleView .costos-table-scroll {
  grid-row: auto !important;
}


/* ==========================================================
   AJUSTE: evitar que las columnas de costos se encimen
   con los botones laterales
   ========================================================== */

/* Más aire entre tabla y barra lateral */
body.costos-module-active #moduleView .costos-table-area {
  grid-template-columns: minmax(0, 1fr) 165px !important;
  gap: 16px !important;
  padding-right: 12px !important;
}

/* Que la tabla no llegue pegada a los botones */
body.costos-module-active #moduleView .costos-table-area .costos-table-scroll {
  overflow-x: hidden !important;
  padding-right: 8px !important;
  box-sizing: border-box !important;
}

/* La tabla usa el ancho visible de su panel */
body.costos-module-active #moduleView .costos-table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  table-layout: fixed !important;
}

/* Compactar columnas para recorrer bloque de costos hacia la izquierda */
body.costos-module-active #moduleView .costos-table th:nth-child(1),
body.costos-module-active #moduleView .costos-table td:nth-child(1) {
  width: 56px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(2),
body.costos-module-active #moduleView .costos-table td:nth-child(2) {
  width: 46px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(3),
body.costos-module-active #moduleView .costos-table td:nth-child(3) {
  width: 240px !important;
}

body.costos-module-active #moduleView .costos-description {
  max-width: 240px !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(4),
body.costos-module-active #moduleView .costos-table td:nth-child(4) {
  width: 78px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(5),
body.costos-module-active #moduleView .costos-table td:nth-child(5) {
  width: 82px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(6),
body.costos-module-active #moduleView .costos-table td:nth-child(6) {
  width: 78px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(7),
body.costos-module-active #moduleView .costos-table td:nth-child(7) {
  width: 92px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(8),
body.costos-module-active #moduleView .costos-table td:nth-child(8) {
  width: 92px !important;
  text-align: center !important;
}

/* Inputs un poco más compactos para que no empujen el layout */
body.costos-module-active #moduleView .costos-table .costos-money-input {
  width: 84px !important;
  max-width: 84px !important;
  margin: 0 auto !important;
}

/* Encabezados de SAP y COTIZADOR mejor centrados */
body.costos-module-active #moduleView .costos-table thead .costos-group-head th[colspan="3"] {
  padding-right: 4px !important;
}

body.costos-module-active #moduleView .costos-table thead .costos-group-head th[colspan="2"] {
  padding-left: 4px !important;
}

body.costos-module-active #moduleView .costos-table thead .costos-column-head th {
  font-size: 10px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Botonera un poco más compacta y separada */
body.costos-module-active #moduleView .costos-side-actions {
  width: 165px !important;
  min-width: 165px !important;
  padding-top: 6px !important;
}

body.costos-module-active #moduleView .costos-side-actions button {
  min-height: 40px !important;
  font-size: 11px !important;
}


/* ==========================================================
   CORRECCIÓN DEFINITIVA DE ANCHO
   Todo SAP + COTIZADOR debe terminar antes de la botonera
   ========================================================== */

/* Separación física entre tabla y botones */
body.costos-module-active #moduleView .costos-table-area {
  display: flex !important;
  align-items: stretch !important;
  gap: 22px !important;
  padding: 0 12px 10px !important;
  overflow: hidden !important;
}

body.costos-module-active #moduleView .costos-table-area .costos-table-scroll {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 192px) !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

body.costos-module-active #moduleView .costos-side-actions {
  flex: 0 0 170px !important;
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
  margin: 0 !important;
  padding: 6px 0 0 !important;
  position: relative !important;
  z-index: 10 !important;
  background: #fff !important;
}

/* La tabla jamás puede exceder su área */
body.costos-module-active #moduleView .costos-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

/* Mucho menos espacio antes de los costos */
body.costos-module-active #moduleView .costos-table th:nth-child(1),
body.costos-module-active #moduleView .costos-table td:nth-child(1) {
  width: 64px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(2),
body.costos-module-active #moduleView .costos-table td:nth-child(2) {
  width: 48px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(3),
body.costos-module-active #moduleView .costos-table td:nth-child(3) {
  width: 205px !important;
}

body.costos-module-active #moduleView .costos-description {
  width: 205px !important;
  max-width: 205px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* SAP compacto pero totalmente visible */
body.costos-module-active #moduleView .costos-table th:nth-child(4),
body.costos-module-active #moduleView .costos-table td:nth-child(4) {
  width: 72px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(5),
body.costos-module-active #moduleView .costos-table td:nth-child(5) {
  width: 74px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(6),
body.costos-module-active #moduleView .costos-table td:nth-child(6) {
  width: 72px !important;
  text-align: center !important;
}

/* COTIZADOR completo antes de la botonera */
body.costos-module-active #moduleView .costos-table th:nth-child(7),
body.costos-module-active #moduleView .costos-table td:nth-child(7) {
  width: 86px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(8),
body.costos-module-active #moduleView .costos-table td:nth-child(8) {
  width: 86px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table .costos-money-input {
  width: 78px !important;
  max-width: 78px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Separador limpio entre SAP y COTIZADOR */
body.costos-module-active #moduleView .costos-table thead .costos-group-head th[colspan="3"],
body.costos-module-active #moduleView .costos-table thead .costos-column-head th:nth-child(3),
body.costos-module-active #moduleView .costos-table tbody td:nth-child(6) {
  border-right: 2px solid #cbd5e1 !important;
}

body.costos-module-active #moduleView .costos-table thead .costos-group-head th[colspan="2"],
body.costos-module-active #moduleView .costos-table thead .costos-column-head th:nth-child(4),
body.costos-module-active #moduleView .costos-table tbody td:nth-child(7) {
  border-left: 0 !important;
}

/* Asegurar que encabezados no se corten */
body.costos-module-active #moduleView .costos-table thead .costos-column-head th {
  padding: 4px 2px !important;
  font-size: 9px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}


/* ==========================================================
   DISTRIBUCIÓN PROFESIONAL FINAL
   - más ancho real para SAP/COTIZADOR
   - descripción más contenida
   - botonera completamente independiente
   ========================================================== */

/* Tarjeta: suficientemente ancha para tabla + acciones */
body.costos-module-active #moduleView .table-wrap.costos-wrap {
  width: min(1480px, calc(100vw - 44px)) !important;
  max-width: 1480px !important;
  min-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Tabla y botones: dos zonas que nunca se pisan */
body.costos-module-active #moduleView .costos-table-area {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 182px !important;
  column-gap: 18px !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 12px 10px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Zona exclusiva de tabla */
body.costos-module-active #moduleView .costos-table-area .costos-table-scroll {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  border: 1px solid #e2e8f0 !important;
}

/* Tabla: ancho mínimo suficiente para que NO se compriman los costos */
body.costos-module-active #moduleView .costos-table {
  width: 100% !important;
  min-width: 1040px !important;
  max-width: none !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

/* Botonera: bloque fijo independiente */
body.costos-module-active #moduleView .costos-side-actions {
  grid-column: 2 !important;
  width: 182px !important;
  min-width: 182px !important;
  max-width: 182px !important;
  margin: 0 !important;
  padding: 6px 0 0 !important;
  align-self: start !important;
  position: relative !important;
  z-index: 30 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

body.costos-module-active #moduleView .costos-side-actions button {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 9px 0 !important;
  box-sizing: border-box !important;
}

/* ==========================================================
   ANCHOS DE COLUMNAS
   ========================================================== */

/* SKU */
body.costos-module-active #moduleView .costos-table th:nth-child(1),
body.costos-module-active #moduleView .costos-table td:nth-child(1) {
  width: 72px !important;
  min-width: 72px !important;
  text-align: center !important;
}

/* UNIDAD */
body.costos-module-active #moduleView .costos-table th:nth-child(2),
body.costos-module-active #moduleView .costos-table td:nth-child(2) {
  width: 62px !important;
  min-width: 62px !important;
  text-align: center !important;
}

/* DESCRIPCIÓN: menos dominante */
body.costos-module-active #moduleView .costos-table th:nth-child(3),
body.costos-module-active #moduleView .costos-table td:nth-child(3) {
  width: 285px !important;
  min-width: 285px !important;
}

body.costos-module-active #moduleView .costos-description {
  width: 285px !important;
  max-width: 285px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* SAP - más anchas para que los títulos respiren */
body.costos-module-active #moduleView .costos-table th:nth-child(4),
body.costos-module-active #moduleView .costos-table td:nth-child(4) {
  width: 104px !important;
  min-width: 104px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(5),
body.costos-module-active #moduleView .costos-table td:nth-child(5) {
  width: 112px !important;
  min-width: 112px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(6),
body.costos-module-active #moduleView .costos-table td:nth-child(6) {
  width: 104px !important;
  min-width: 104px !important;
  text-align: center !important;
}

/* COTIZADOR - espacio cómodo para inputs */
body.costos-module-active #moduleView .costos-table th:nth-child(7),
body.costos-module-active #moduleView .costos-table td:nth-child(7) {
  width: 125px !important;
  min-width: 125px !important;
  text-align: center !important;
}

body.costos-module-active #moduleView .costos-table th:nth-child(8),
body.costos-module-active #moduleView .costos-table td:nth-child(8) {
  width: 125px !important;
  min-width: 125px !important;
  text-align: center !important;
}

/* Inputs de cotizador proporcionados a la columna */
body.costos-module-active #moduleView .costos-table .costos-money-input {
  width: 106px !important;
  max-width: 106px !important;
  min-width: 96px !important;
  height: 27px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* ==========================================================
   ENCABEZADOS SAP / COTIZADOR
   ========================================================== */

body.costos-module-active #moduleView .costos-table thead .costos-group-head th {
  padding-left: 6px !important;
  padding-right: 6px !important;
  text-align: center !important;
  overflow: visible !important;
}

body.costos-module-active #moduleView .costos-table thead .costos-column-head th {
  padding: 5px 5px !important;
  font-size: 10px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Separación SAP/COTIZADOR discreta, sin hueco */
body.costos-module-active #moduleView .costos-table thead .costos-group-head th[colspan="3"],
body.costos-module-active #moduleView .costos-table thead .costos-column-head th:nth-child(3),
body.costos-module-active #moduleView .costos-table tbody td:nth-child(6) {
  border-right: 3px solid #cbd5e1 !important;
}

body.costos-module-active #moduleView .costos-table thead .costos-group-head th[colspan="2"],
body.costos-module-active #moduleView .costos-table thead .costos-column-head th:nth-child(4),
body.costos-module-active #moduleView .costos-table tbody td:nth-child(7) {
  border-left: 0 !important;
}

/* En pantallas más pequeñas: NO comprimir columnas; usar scroll horizontal de tabla */
@media (max-width: 1300px) {
  body.costos-module-active #moduleView .table-wrap.costos-wrap {
    width: calc(100vw - 24px) !important;
    min-width: 0 !important;
  }

  body.costos-module-active #moduleView .costos-table-area {
    grid-template-columns: minmax(0, 1fr) 170px !important;
    column-gap: 14px !important;
  }

  body.costos-module-active #moduleView .costos-side-actions {
    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
  }
}


/* ==========================================================
   NAVEGACIÓN Y ESTADO VISUAL DE COTIZADOR
   ========================================================== */

/* Amarillo más natural para dato modificado */
body.costos-module-active #moduleView .costos-money-input.costos-input-dirty {
  background: #fff2a8 !important;
  border-color: #d6b84a !important;
  color: #111827 !important;
}

/* Foco discreto para navegar con teclado */
body.costos-module-active #moduleView .costos-money-input:focus {
  outline: 2px solid rgba(37, 99, 235, .22) !important;
  outline-offset: 0 !important;
  border-color: #94a3b8 !important;
}

/* Si está modificado y enfocado, conserva el amarillo */
body.costos-module-active #moduleView .costos-money-input.costos-input-dirty:focus {
  background: #fff2a8 !important;
  border-color: #d6b84a !important;
}