/* =========================================================
   UBICACIÓN:
   frontend/src/pages/manufactura/costos/costos.css

   WIRTZ HUB · MANUFACTURA · COSTOS
   CSS COMPLETO · PARTE 1 DE 3
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

.costos-page,
.costos-overlay-root,
.costos-toast-container {
  --costos-bg:
    var(--panel, #ffffff);

  --costos-bg-soft:
    var(--surface-soft, #f7f7f8);

  --costos-bg-muted:
    var(--surface-muted, #f1f1f2);

  --costos-text:
    var(--text, #111111);

  --costos-text-soft:
    var(--muted, #6b6b6b);

  --costos-text-muted:
    var(--muted-2, #929292);

  --costos-line:
    var(--line, #e5e5e5);

  --costos-line-strong:
    var(--line-strong, #d4d4d4);

  --costos-success:
    #15803d;

  --costos-success-soft:
    rgba(
      21,
      128,
      61,
      0.08
    );

  --costos-warning:
    #b45309;

  --costos-warning-soft:
    rgba(
      180,
      83,
      9,
      0.08
    );

  --costos-danger:
    #dc2626;

  --costos-danger-soft:
    rgba(
      220,
      38,
      38,
      0.08
    );

  --costos-neutral:
    #52525b;

  --costos-neutral-soft:
    rgba(
      82,
      82,
      91,
      0.08
    );

  font-family:
    "DM Sans",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* =========================================================
   BOX SIZING
   ========================================================= */

.costos-page *,
.costos-page *::before,
.costos-page *::after,
.costos-overlay-root *,
.costos-overlay-root *::before,
.costos-overlay-root *::after {
  box-sizing:
    border-box;
}


/* =========================================================
   PAGE
   ========================================================= */

.costos-page {
  width:
    100%;

  min-width:
    0;

  min-height:
    100%;

  margin:
    0;

  padding:
    24px;

  color:
    var(--costos-text);

  background:
    transparent;
}


/* =========================================================
   HEADER
   ========================================================= */

.costos-page-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    24px;

  width:
    100%;

  margin:
    0 0 22px;
}


.costos-page-header__text {
  min-width:
    0;

  max-width:
    780px;
}


.costos-page-header__eyebrow {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  margin:
    0 0 7px;

  color:
    var(--costos-text-soft);

  font-size:
    11px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.costos-page-header__eyebrow svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    1.8;
}


.costos-page-header h1 {
  margin:
    0;

  color:
    var(--costos-text);

  font-size:
    32px;

  font-weight:
    750;

  line-height:
    1.05;

  letter-spacing:
    -0.04em;
}


.costos-page-header p {
  max-width:
    760px;

  margin:
    9px 0 0;

  color:
    var(--costos-text-soft);

  font-size:
    13px;

  line-height:
    1.55;
}


.costos-page-header__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  flex:
    0 0 auto;
}


/* =========================================================
   BUTTON
   ========================================================= */

.costos-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  min-height:
    38px;

  padding:
    8px 13px;

  border:
    1px solid transparent;

  border-radius:
    8px;

  outline:
    none;

  font:
    inherit;

  font-size:
    12px;

  font-weight:
    650;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    opacity 140ms ease;
}


.costos-btn svg {
  width:
    15px;

  height:
    15px;

  flex:
    0 0 15px;

  stroke-width:
    1.9;
}


.costos-btn:disabled {
  opacity:
    0.4;

  cursor:
    not-allowed;
}


.costos-btn--primary {
  color:
    #ffffff;

  border-color:
    #111111;

  background:
    #111111;
}


.costos-btn--primary:hover:not(:disabled) {
  border-color:
    #262626;

  background:
    #262626;
}


.costos-btn--secondary {
  color:
    var(--costos-text);

  border-color:
    var(--costos-line);

  background:
    var(--costos-bg);
}


.costos-btn--secondary:hover:not(:disabled) {
  border-color:
    var(--costos-line-strong);

  background:
    var(--costos-bg-soft);
}


.costos-btn--ghost {
  color:
    var(--costos-text-soft);

  border-color:
    transparent;

  background:
    transparent;
}


.costos-btn--ghost:hover:not(:disabled) {
  color:
    var(--costos-text);

  background:
    var(--costos-bg-soft);
}


/* =========================================================
   ICON BUTTON
   ========================================================= */

.costos-icon-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  padding:
    0;

  border:
    1px solid var(--costos-line);

  border-radius:
    7px;

  outline:
    none;

  color:
    var(--costos-text-soft);

  background:
    var(--costos-bg);

  cursor:
    pointer;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}


.costos-icon-btn svg {
  width:
    15px;

  height:
    15px;

  stroke-width:
    1.8;
}


.costos-icon-btn:hover:not(:disabled) {
  color:
    var(--costos-text);

  border-color:
    var(--costos-line-strong);

  background:
    var(--costos-bg-soft);
}


.costos-icon-btn.is-active {
  color:
    var(--costos-success);

  border-color:
    rgba(
      21,
      128,
      61,
      0.22
    );

  background:
    var(--costos-success-soft);
}


.costos-icon-btn:disabled {
  opacity:
    0.3;

  cursor:
    default;
}


/* =========================================================
   METRICS
   ========================================================= */

.costos-metrics {
  display:
    grid;

  grid-template-columns:
    repeat(
      7,
      minmax(
        0,
        1fr
      )
    );

  gap:
    10px;

  width:
    100%;

  margin:
    0 0 16px;
}


.costos-metric-card {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  min-width:
    0;

  min-height:
    100px;

  padding:
    14px;

  border:
    1px solid var(--costos-line);

  border-radius:
    10px;

  background:
    var(--costos-bg);
}


.costos-metric-card.is-clickable {
  cursor:
    pointer;

  transition:
    background-color 140ms ease,
    border-color 140ms ease;
}


.costos-metric-card.is-clickable:hover {
  border-color:
    var(--costos-line-strong);

  background:
    var(--costos-bg-soft);
}


.costos-metric-card__top {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;
}


.costos-metric-card__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    28px;

  height:
    28px;

  flex:
    0 0 28px;

  border-radius:
    7px;

  color:
    var(--costos-text-soft);

  background:
    var(--costos-bg-soft);
}


.costos-metric-card__icon svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    1.8;
}


.costos-metric-card__label {
  overflow:
    hidden;

  color:
    var(--costos-text-soft);

  font-size:
    10px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.costos-metric-card__value {
  display:
    block;

  overflow:
    hidden;

  margin:
    14px 0 0;

  color:
    var(--costos-text);

  font-size:
    20px;

  font-weight:
    750;

  line-height:
    1;

  letter-spacing:
    -0.035em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.costos-metric-card__detail {
  display:
    block;

  margin:
    5px 0 0;

  color:
    var(--costos-text-muted);

  font-size:
    9px;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.costos-toolbar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  width:
    100%;

  margin:
    0 0 12px;

  padding:
    10px;

  border:
    1px solid var(--costos-line);

  border-radius:
    10px;

  background:
    var(--costos-bg);
}


.costos-toolbar__main {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;

  flex:
    1 1 auto;
}


.costos-toolbar__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;

  flex:
    0 0 auto;
}


/* =========================================================
   SEARCH
   ========================================================= */

.costos-search {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  min-width:
    260px;

  max-width:
    520px;

  flex:
    1 1 380px;
}


.costos-search > svg {
  position:
    absolute;

  left:
    11px;

  width:
    15px;

  height:
    15px;

  color:
    var(--costos-text-muted);

  pointer-events:
    none;
}


.costos-search input {
  width:
    100%;

  height:
    38px;

  padding:
    0 38px 0 35px;

  border:
    1px solid var(--costos-line);

  border-radius:
    7px;

  outline:
    none;

  color:
    var(--costos-text);

  background:
    var(--costos-bg);

  font:
    inherit;

  font-size:
    12px;
}


.costos-search input::placeholder {
  color:
    var(--costos-text-muted);
}


.costos-search input:focus {
  border-color:
    var(--costos-line-strong);
}


.costos-search button {
  position:
    absolute;

  right:
    5px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    28px;

  height:
    28px;

  padding:
    0;

  border:
    0;

  border-radius:
    6px;

  color:
    var(--costos-text-muted);

  background:
    transparent;

  cursor:
    pointer;
}


.costos-search button:hover {
  color:
    var(--costos-text);

  background:
    var(--costos-bg-soft);
}


/* =========================================================
   SELECT
   ========================================================= */

.costos-select {
  min-width:
    160px;

  height:
    38px;

  padding:
    0 32px 0 10px;

  border:
    1px solid var(--costos-line);

  border-radius:
    7px;

  outline:
    none;

  color:
    var(--costos-text);

  background:
    var(--costos-bg);

  font:
    inherit;

  font-size:
    12px;

  cursor:
    pointer;
}


.costos-select:focus {
  border-color:
    var(--costos-line-strong);
}


.costos-select--compact {
  min-width:
    98px;

  height:
    32px;

  font-size:
    10px;
}


/* =========================================================
   BULK BAR
   ========================================================= */

.costos-bulk-bar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  width:
    100%;

  margin:
    0 0 12px;

  padding:
    9px 11px;

  border:
    1px solid var(--costos-line-strong);

  border-radius:
    8px;

  background:
    var(--costos-bg-soft);
}


.costos-bulk-bar__info {
  display:
    flex;

  align-items:
    baseline;

  gap:
    5px;

  color:
    var(--costos-text-soft);

  font-size:
    10px;
}


.costos-bulk-bar__info strong {
  color:
    var(--costos-text);

  font-size:
    13px;
}


.costos-bulk-bar__actions {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


/* =========================================================
   TABLE CARD
   ========================================================= */

.costos-table-card {
  width:
    100%;

  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid var(--costos-line);

  border-radius:
    10px;

  background:
    var(--costos-bg);
}


.costos-table-card__header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  min-height:
    62px;

  padding:
    12px 14px;

  border-bottom:
    1px solid var(--costos-line);
}


.costos-table-card__header h2 {
  margin:
    0;

  color:
    var(--costos-text);

  font-size:
    13px;

  font-weight:
    700;
}


.costos-table-card__header p {
  margin:
    4px 0 0;

  color:
    var(--costos-text-soft);

  font-size:
    10px;

  line-height:
    1.4;
}


.costos-table-card__count {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    24px;

  padding:
    4px 8px;

  border:
    1px solid var(--costos-line);

  border-radius:
    999px;

  color:
    var(--costos-text-soft);

  background:
    var(--costos-bg-soft);

  font-size:
    9px;

  font-weight:
    700;

  white-space:
    nowrap;
}


/* =========================================================
   TABLE SCROLL
   ========================================================= */

.costos-table-scroll {
  display:
    block;

  width:
    100%;

  max-width:
    100%;

  overflow-x:
    auto;

  overflow-y:
    visible;

  scrollbar-width:
    thin;
}


/* =========================================================
   TABLE
   ========================================================= */

.costos-table {
  width:
    max-content;

  min-width:
    100%;

  margin:
    0;

  border-collapse:
    separate;

  border-spacing:
    0;

  table-layout:
    auto;
}


.costos-table thead {
  background:
    var(--costos-bg-soft);
}


.costos-table th {
  height:
    38px;

  padding:
    0 10px;

  border:
    0;

  border-bottom:
    1px solid var(--costos-line);

  color:
    var(--costos-text-soft);

  background:
    var(--costos-bg-soft);

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1;

  text-align:
    left;

  vertical-align:
    middle;

  white-space:
    nowrap;
}


.costos-table td {
  height:
    48px;

  padding:
    7px 10px;

  border:
    0;

  border-bottom:
    1px solid var(--costos-line);

  color:
    var(--costos-text);

  background:
    var(--costos-bg);

  font-size:
    10px;

  line-height:
    1.25;

  vertical-align:
    middle;

  white-space:
    nowrap;
}


.costos-table tbody tr:last-child td {
  border-bottom:
    0;
}


.costos-table tbody tr:hover td {
  background:
    var(--costos-bg-soft);
}


.costos-table tbody tr.is-selected td {
  background:
    var(--costos-bg-muted);
}


/* =========================================================
   COLUMN SIZES
   ========================================================= */

.costos-table th:first-child,
.costos-table td:first-child {
  width:
    38px;

  min-width:
    38px;

  max-width:
    38px;
}


.costos-table td[data-column="producto_codigo"] {
  min-width:
    115px;
}


.costos-table td[data-column="producto_nombre"] {
  min-width:
    175px;

  max-width:
    260px;
}


.costos-table td[data-column="categoria"] {
  min-width:
    105px;
}


.costos-table td[data-column="bom_version_codigo"] {
  min-width:
    140px;
}


.costos-table td[data-column="insumos_nombres"] {
  min-width:
    250px;

  max-width:
    340px;
}


.costos-table td[data-column="estado_costo"] {
  min-width:
    105px;
}


.costos-table td[data-column="actions"] {
  min-width:
    190px;
}


/* =========================================================
   PRODUCT
   ========================================================= */

.costos-product-cell {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}


.costos-product-cell strong {
  overflow:
    hidden;

  max-width:
    230px;

  color:
    var(--costos-text);

  font-size:
    10px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.costos-product-cell span {
  overflow:
    hidden;

  max-width:
    230px;

  color:
    var(--costos-text-muted);

  font-size:
    9px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   CODE
   ========================================================= */

.costos-code {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    23px;

  padding:
    3px 6px;

  border:
    1px solid var(--costos-line);

  border-radius:
    5px;

  color:
    var(--costos-text-soft);

  background:
    var(--costos-bg-soft);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:
    9px;

  font-weight:
    650;
}


/* =========================================================
   INSUMOS
   ========================================================= */

.costos-insumos-cell {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  min-width:
    0;
}


.costos-insumos-cell > span {
  overflow:
    hidden;

  max-width:
    285px;

  color:
    var(--costos-text-soft);

  font-size:
    9px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.costos-insumos-cell small {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    23px;

  height:
    21px;

  padding:
    0 5px;

  border-radius:
    999px;

  color:
    var(--costos-text-soft);

  background:
    var(--costos-bg-muted);

  font-size:
    9px;

  font-weight:
    700;
}


/* =========================================================
   MONEY
   ========================================================= */

.costos-money {
  color:
    var(--costos-text);

  font-size:
    10px;

  font-weight:
    600;

  font-variant-numeric:
    tabular-nums;
}


.costos-money--total {
  font-weight:
    750;
}


/* =========================================================
   STATUS
   ========================================================= */

.costos-status {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  min-height:
    22px;

  padding:
    3px 6px;

  border:
    1px solid transparent;

  border-radius:
    999px;

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1;
}


.costos-status svg {
  width:
    11px;

  height:
    11px;

  stroke-width:
    2;
}


.costos-status.is-success {
  color:
    var(--costos-success);

  border-color:
    rgba(
      21,
      128,
      61,
      0.16
    );

  background:
    var(--costos-success-soft);
}


.costos-status.is-warning {
  color:
    var(--costos-warning);

  border-color:
    rgba(
      180,
      83,
      9,
      0.16
    );

  background:
    var(--costos-warning-soft);
}


.costos-status.is-danger {
  color:
    var(--costos-danger);

  border-color:
    rgba(
      220,
      38,
      38,
      0.16
    );

  background:
    var(--costos-danger-soft);
}


.costos-status.is-neutral {
  color:
    var(--costos-neutral);

  border-color:
    rgba(
      82,
      82,
      91,
      0.14
    );

  background:
    var(--costos-neutral-soft);
}


.costos-status.is-muted {
  color:
    var(--costos-text-muted);

  border-color:
    var(--costos-line);

  background:
    var(--costos-bg-soft);
}


/* =========================================================
   MINI STATUS
   ========================================================= */

.costos-mini-status {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    21px;

  padding:
    3px 6px;

  border-radius:
    999px;

  font-size:
    9px;

  font-weight:
    700;
}


.costos-mini-status.is-success {
  color:
    var(--costos-success);

  background:
    var(--costos-success-soft);
}


.costos-mini-status.is-muted {
  color:
    var(--costos-text-muted);

  background:
    var(--costos-bg-soft);
}


/* =========================================================
   VALUES
   ========================================================= */

.costos-value-danger {
  color:
    var(--costos-danger);

  font-weight:
    700;
}


.costos-muted {
  color:
    var(--costos-text-muted);
}


/* =========================================================
   ROW CHECK
   ========================================================= */

.costos-row-check {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    18px;

  height:
    18px;

  cursor:
    pointer;
}


.costos-row-check input {
  position:
    absolute;

  opacity:
    0;

  pointer-events:
    none;
}


.costos-row-check span {
  position:
    relative;

  display:
    block;

  width:
    14px;

  height:
    14px;

  border:
    1px solid var(--costos-line-strong);

  border-radius:
    4px;

  background:
    var(--costos-bg);
}


.costos-row-check input:checked + span {
  border-color:
    var(--costos-text);

  background:
    var(--costos-text);
}


.costos-row-check input:checked + span::after {
  content:
    "";

  position:
    absolute;

  top:
    1px;

  left:
    4px;

  width:
    4px;

  height:
    8px;

  border:
    solid var(--costos-bg);

  border-width:
    0 2px 2px 0;

  transform:
    rotate(
      45deg
    );
}


/* =========================================================
   ROW ACTIONS
   ========================================================= */

.costos-row-actions {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    4px;

  min-width:
    max-content;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.costos-pagination {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  min-height:
    52px;

  padding:
    9px 12px;

  border-top:
    1px solid var(--costos-line);

  background:
    var(--costos-bg);
}


.costos-pagination__info {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  color:
    var(--costos-text-soft);

  font-size:
    10px;
}


.costos-pagination__info strong {
  color:
    var(--costos-text);
}


.costos-pagination__controls {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;
}


.costos-pagination__page {
  min-width:
    110px;

  color:
    var(--costos-text-soft);

  font-size:
    10px;

  text-align:
    center;
}


.costos-pagination__page strong {
  color:
    var(--costos-text);
}


/* =========================================================
   SKELETON
   ========================================================= */

.costos-skeleton-line {
  display:
    block;

  width:
    78px;

  height:
    9px;

  border-radius:
    4px;

  background:
    var(--costos-bg-muted);

  animation:
    costos-skeleton
    1.2s
    ease-in-out
    infinite;
}


@keyframes costos-skeleton {
  0%,
  100% {
    opacity:
      0.4;
  }

  50% {
    opacity:
      1;
  }
}


/* =========================================================
   EMPTY
   ========================================================= */

.costos-empty {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    220px;

  padding:
    28px;

  text-align:
    center;
}


.costos-empty__icon {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    42px;

  height:
    42px;

  margin:
    0 0 10px;

  border:
    1px solid var(--costos-line);

  border-radius:
    9px;

  color:
    var(--costos-text-soft);

  background:
    var(--costos-bg-soft);
}


.costos-empty__icon svg {
  width:
    18px;

  height:
    18px;
}


.costos-empty strong {
  color:
    var(--costos-text);

  font-size:
    13px;
}


.costos-empty > span {
  max-width:
    420px;

  margin:
    5px 0 0;

  color:
    var(--costos-text-soft);

  font-size:
    11px;

  line-height:
    1.5;
}


/* =========================================================
   ACTION MENU WRAPPER
   ========================================================= */

.costos-action-menu {
  position:
    relative;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width: 1500px
) {
  .costos-metrics {
    grid-template-columns:
      repeat(
        4,
        minmax(
          0,
          1fr
        )
      );
  }
}


@media (
  max-width: 1100px
) {
  .costos-page {
    padding:
      20px;
  }


  .costos-page-header {
    flex-direction:
      column;
  }


  .costos-page-header__actions {
    justify-content:
      flex-start;

    width:
      100%;
  }


  .costos-toolbar {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .costos-toolbar__main {
    width:
      100%;

    flex-wrap:
      wrap;
  }


  .costos-toolbar__actions {
    width:
      100%;

    justify-content:
      flex-end;
  }


  .costos-search {
    max-width:
      none;

    flex:
      1 1 100%;
  }
}


@media (
  max-width: 700px
) {
  .costos-page {
    padding:
      14px;
  }


  .costos-metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .costos-page-header__actions,
  .costos-toolbar__actions {
    flex-wrap:
      wrap;
  }


  .costos-select {
    flex:
      1 1 160px;
  }


  .costos-pagination {
    align-items:
      stretch;

    flex-direction:
      column;
  }
}


/* =========================================================
   FIN PARTE 1 DE 3
   ========================================================= *//* =========================================================
   WIRTZ HUB · MANUFACTURA · COSTOS
   CSS COMPLETO · PARTE 2 DE 3

   CONTIENE:
   - Overlay
   - Paneles
   - Modales
   - Ver / Editar costo
   - Formularios
   - Composición
   - Tabs
   - Selector de columnas
   - Menús flotantes
   ========================================================= */


/* =========================================================
   OVERLAY ROOT
   ========================================================= */

.costos-overlay-root {
  position:
    fixed;

  inset:
    0;

  z-index:
    9999;

  pointer-events:
    none;
}


/* =========================================================
   OVERLAY
   ========================================================= */

.costos-overlay {
  position:
    absolute;

  inset:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    100%;

  height:
    100%;

  padding:
    24px;

  overflow:
    auto;

  background:
    rgba(
      0,
      0,
      0,
      0.48
    );

  pointer-events:
    auto;
}


/* =========================================================
   PANEL
   ========================================================= */

.costos-panel {
  display:
    flex;

  flex-direction:
    column;

  width:
    min(
      560px,
      100%
    );

  max-height:
    calc(
      100vh - 48px
    );

  margin-left:
    auto;

  overflow:
    hidden;

  border:
    1px solid var(--costos-line);

  border-radius:
    12px;

  background:
    var(--costos-bg);
}


.costos-panel--filters {
  width:
    min(
      560px,
      100%
    );
}


.costos-panel--columns {
  width:
    min(
      760px,
      100%
    );
}


/* =========================================================
   PANEL HEADER
   ========================================================= */

.costos-panel__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  flex:
    0 0 auto;

  padding:
    18px;

  border-bottom:
    1px solid var(--costos-line);

  background:
    var(--costos-bg);
}


.costos-panel__header > div {
  min-width:
    0;
}


.costos-panel__header h2 {
  margin:
    4px 0 0;

  color:
    var(--costos-text);

  font-size:
    18px;

  font-weight:
    750;

  line-height:
    1.2;

  letter-spacing:
    -0.025em;
}


.costos-panel__header p {
  margin:
    6px 0 0;

  color:
    var(--costos-text-soft);

  font-size:
    11px;

  line-height:
    1.5;
}


.costos-panel__eyebrow {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(--costos-text-muted);

  font-size:
    9px;

  font-weight:
    750;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.costos-panel__eyebrow svg {
  width:
    12px;

  height:
    12px;

  stroke-width:
    1.8;
}


/* =========================================================
   PANEL BODY
   ========================================================= */

.costos-panel__body {
  min-height:
    0;

  flex:
    1 1 auto;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  padding:
    18px;
}


/* =========================================================
   PANEL FOOTER
   ========================================================= */

.costos-panel__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  flex:
    0 0 auto;

  padding:
    13px 18px;

  border-top:
    1px solid var(--costos-line);

  background:
    var(--costos-bg);
}


/* =========================================================
   MODAL BASE
   ========================================================= */

.costos-modal {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  width:
    min(
      760px,
      calc(
        100vw - 48px
      )
    );

  max-height:
    calc(
      100vh - 48px
    );

  margin:
    auto;

  overflow:
    hidden;

  border:
    1px solid var(--costos-line);

  border-radius:
    12px;

  background:
    var(--costos-bg);
}


.costos-modal--medium {
  width:
    min(
      820px,
      calc(
        100vw - 48px
      )
    );
}


.costos-modal--wide {
  width:
    min(
      1120px,
      calc(
        100vw - 48px
      )
    );
}


.costos-modal--editor {
  width:
    min(
      1280px,
      calc(
        100vw - 48px
      )
    );

  max-height:
    calc(
      100vh - 48px
    );
}


/* =========================================================
   MODAL HEADER
   ========================================================= */

.costos-modal__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    18px;

  flex:
    0 0 auto;

  padding:
    16px 18px;

  border-bottom:
    1px solid var(--costos-line);

  background:
    var(--costos-bg);
}


.costos-modal__header > div:first-child {
  min-width:
    0;

  flex:
    1 1 auto;
}


.costos-modal__header h2 {
  margin:
    4px 0 0;

  overflow:
    hidden;

  color:
    var(--costos-text);

  font-size:
    18px;

  font-weight:
    750;

  line-height:
    1.25;

  letter-spacing:
    -0.025em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.costos-modal__header p {
  max-width:
    760px;

  margin:
    5px 0 0;

  color:
    var(--costos-text-soft);

  font-size:
    10px;

  line-height:
    1.45;
}


.costos-modal__header-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;

  flex:
    0 0 auto;
}


/* =========================================================
   MODAL BODY
   ========================================================= */

.costos-modal__body {
  min-height:
    0;

  flex:
    1 1 auto;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  padding:
    18px;
}


.costos-modal__body--editor {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;
}


/* =========================================================
   MODAL FOOTER
   ========================================================= */

.costos-modal__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  flex:
    0 0 auto;

  padding:
    12px 18px;

  border-top:
    1px solid var(--costos-line);

  background:
    var(--costos-bg);
}


.costos-modal__footer > div {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


/* =========================================================
   LOADING
   ========================================================= */

.costos-modal-loading {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    220px;

  color:
    var(--costos-text-soft);

  font-size:
    11px;
}


.costos-modal-loading svg {
  width:
    17px;

  height:
    17px;

  animation:
    costos-spin
    800ms
    linear
    infinite;
}


@keyframes costos-spin {
  to {
    transform:
      rotate(
        360deg
      );
  }
}


/* =========================================================
   FORM GRID
   ========================================================= */

.costos-form-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px;
}


.costos-form-grid--editor {
  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );
}


/* =========================================================
   FIELD
   ========================================================= */

.costos-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  min-width:
    0;
}


.costos-field--full {
  grid-column:
    1 / -1;
}


.costos-field > span {
  color:
    var(--costos-text-soft);

  font-size:
    10px;

  font-weight:
    650;

  line-height:
    1.2;
}


.costos-field input,
.costos-field select,
.costos-field textarea {
  width:
    100%;

  min-width:
    0;

  border:
    1px solid var(--costos-line);

  border-radius:
    7px;

  outline:
    none;

  color:
    var(--costos-text);

  background:
    var(--costos-bg);

  font:
    inherit;

  font-size:
    11px;
}


.costos-field input,
.costos-field select {
  height:
    38px;

  padding:
    0 10px;
}


.costos-field textarea {
  min-height:
    94px;

  padding:
    9px 10px;

  resize:
    vertical;

  line-height:
    1.45;
}


.costos-field input:focus,
.costos-field select:focus,
.costos-field textarea:focus {
  border-color:
    var(--costos-line-strong);
}


.costos-field input:disabled,
.costos-field select:disabled,
.costos-field textarea:disabled {
  color:
    var(--costos-text-soft);

  background:
    var(--costos-bg-soft);

  cursor:
    default;
}


.costos-field small {
  color:
    var(--costos-text-muted);

  font-size:
    9px;

  line-height:
    1.4;
}


/* =========================================================
   MONEY INPUT
   ========================================================= */

.costos-money-input {
  display:
    flex;

  align-items:
    center;

  width:
    100%;

  height:
    38px;

  overflow:
    hidden;

  border:
    1px solid var(--costos-line);

  border-radius:
    7px;

  background:
    var(--costos-bg);
}


.costos-money-input > span {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    34px;

  height:
    100%;

  flex:
    0 0 34px;

  border-right:
    1px solid var(--costos-line);

  color:
    var(--costos-text-soft);

  background:
    var(--costos-bg-soft);

  font-size:
    10px;

  font-weight:
    700;
}


.costos-money-input input {
  height:
    100%;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;
}


.costos-money-input:focus-within {
  border-color:
    var(--costos-line-strong);
}


/* =========================================================
   SWITCH
   ========================================================= */

.costos-switch-field {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  min-height:
    38px;

  color:
    var(--costos-text-soft);

  font-size:
    10px;

  cursor:
    pointer;
}


.costos-switch-field input {
  position:
    absolute;

  opacity:
    0;

  pointer-events:
    none;
}


.costos-switch-field__control {
  position:
    relative;

  width:
    34px;

  height:
    19px;

  flex:
    0 0 34px;

  border:
    1px solid var(--costos-line-strong);

  border-radius:
    999px;

  background:
    var(--costos-bg-muted);
}


.costos-switch-field__control::after {
  content:
    "";

  position:
    absolute;

  top:
    2px;

  left:
    2px;

  width:
    13px;

  height:
    13px;

  border-radius:
    50%;

  background:
    var(--costos-text-soft);

  transition:
    transform 140ms ease;
}


.costos-switch-field input:checked +
.costos-switch-field__control {
  border-color:
    var(--costos-text);

  background:
    var(--costos-text);
}


.costos-switch-field input:checked +
.costos-switch-field__control::after {
  background:
    var(--costos-bg);

  transform:
    translateX(
      15px
    );
}


/* =========================================================
   COMPOSITION
   ========================================================= */

.costos-composition-box {
  width:
    100%;

  padding:
    14px;

  border:
    1px solid var(--costos-line);

  border-radius:
    9px;

  background:
    var(--costos-bg-soft);
}


.costos-composition-box > header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;

  margin:
    0 0 12px;
}


.costos-composition-box > header > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.costos-composition-box > header strong {
  color:
    var(--costos-text);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:
    10px;
}


/* =========================================================
   COMPOSITION METRICS
   ========================================================= */

.costos-composition-box__metrics {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px;

  margin:
    0 0 12px;
}


.costos-composition-box__metrics > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  min-width:
    0;

  padding:
    9px;

  border:
    1px solid var(--costos-line);

  border-radius:
    7px;

  background:
    var(--costos-bg);
}


.costos-composition-box__metrics span {
  color:
    var(--costos-text-muted);

  font-size:
    9px;

  font-weight:
    650;
}


.costos-composition-box__metrics strong {
  overflow:
    hidden;

  color:
    var(--costos-text);

  font-size:
    12px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   COMPOSITION INSUMOS
   ========================================================= */

.costos-composition-box__insumos {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.costos-composition-box__insumos > span {
  color:
    var(--costos-text-soft);

  font-size:
    9px;

  font-weight:
    750;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}


.costos-composition-box__insumos > div {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    5px;
}


.costos-composition-box__insumos p {
  margin:
    0;

  color:
    var(--costos-text-muted);

  font-size:
    10px;
}


.costos-insumo-chip {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    24px;

  padding:
    3px 7px;

  border:
    1px solid var(--costos-line);

  border-radius:
    999px;

  color:
    var(--costos-text-soft);

  background:
    var(--costos-bg);

  font-size:
    9px;
}


/* =========================================================
   EDITOR LAYOUT
   ========================================================= */

.costos-editor-layout {
  display:
    grid;

  grid-template-columns:
    210px
    minmax(
      0,
      1fr
    );

  align-items:
    start;

  gap:
    12px;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   EDITOR TABS
   ========================================================= */

.costos-editor-tabs {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  width:
    100%;

  min-width:
    0;

  max-height:
    520px;

  padding:
    5px;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  border:
    1px solid var(--costos-line);

  border-radius:
    8px;

  background:
    var(--costos-bg-soft);
}


.costos-editor-tabs button {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  width:
    100%;

  min-height:
    34px;

  padding:
    7px 8px;

  border:
    1px solid transparent;

  border-radius:
    6px;

  color:
    var(--costos-text-soft);

  background:
    transparent;

  font:
    inherit;

  font-size:
    9px;

  font-weight:
    600;

  text-align:
    left;

  cursor:
    pointer;
}


.costos-editor-tabs button:hover {
  color:
    var(--costos-text);

  background:
    var(--costos-bg);
}


.costos-editor-tabs button.is-active {
  color:
    var(--costos-text);

  border-color:
    var(--costos-line);

  background:
    var(--costos-bg);
}


.costos-editor-tabs button svg {
  width:
    13px;

  height:
    13px;

  flex:
    0 0 13px;

  stroke-width:
    1.8;
}


/* =========================================================
   EDITOR CONTENT
   ========================================================= */

.costos-editor-content {
  width:
    100%;

  min-width:
    0;

  min-height:
    220px;

  padding:
    15px;

  border:
    1px solid var(--costos-line);

  border-radius:
    9px;

  background:
    var(--costos-bg);
}


/* =========================================================
   EDITOR SECTION
   ========================================================= */

.costos-editor-section {
  display:
    none;

  width:
    100%;

  min-width:
    0;
}


.costos-editor-section.is-active {
  display:
    block;
}


.costos-editor-section__header {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  margin:
    0 0 14px;

  padding:
    0 0 11px;

  border-bottom:
    1px solid var(--costos-line);
}


.costos-editor-section__icon {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

  border:
    1px solid var(--costos-line);

  border-radius:
    7px;

  color:
    var(--costos-text-soft);

  background:
    var(--costos-bg-soft);
}


.costos-editor-section__icon svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    1.8;
}


.costos-editor-section__header > div:last-child {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}


.costos-editor-section__header strong {
  color:
    var(--costos-text);

  font-size:
    11px;

  font-weight:
    700;
}


.costos-editor-section__header span {
  color:
    var(--costos-text-muted);

  font-size:
    9px;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.costos-editor-summary {
  width:
    100%;

  padding:
    14px;

  border:
    1px solid var(--costos-line);

  border-radius:
    9px;

  background:
    var(--costos-bg);
}


.costos-editor-summary > header {
  margin:
    0 0 10px;
}


.costos-editor-summary > header > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.costos-editor-summary > header strong {
  color:
    var(--costos-text);

  font-size:
    11px;

  font-weight:
    700;
}


/* =========================================================
   SUMMARY GRID
   ========================================================= */

.costos-summary-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    7px;

  width:
    100%;
}


.costos-summary-grid article {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  min-width:
    0;

  padding:
    9px;

  border:
    1px solid var(--costos-line);

  border-radius:
    7px;

  background:
    var(--costos-bg-soft);
}


.costos-summary-grid article span {
  overflow:
    hidden;

  color:
    var(--costos-text-muted);

  font-size:
    9px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.costos-summary-grid article strong {
  overflow:
    hidden;

  color:
    var(--costos-text);

  font-size:
    11px;

  font-weight:
    700;

  font-variant-numeric:
    tabular-nums;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   TOTAL
   ========================================================= */

.costos-total-box {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  width:
    100%;

  margin:
    9px 0 0;

  padding:
    12px 14px;

  border:
    1px solid var(--costos-line-strong);

  border-radius:
    8px;

  background:
    var(--costos-bg-soft);
}


.costos-total-box > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.costos-total-box span {
  color:
    var(--costos-text);

  font-size:
    10px;

  font-weight:
    700;
}


.costos-total-box small {
  color:
    var(--costos-text-muted);

  font-size:
    9px;
}


.costos-total-box > strong {
  color:
    var(--costos-text);

  font-size:
    20px;

  font-weight:
    750;

  letter-spacing:
    -0.035em;

  font-variant-numeric:
    tabular-nums;

  white-space:
    nowrap;
}


/* =========================================================
   COLUMNS
   ========================================================= */

.costos-columns-group {
  padding:
    14px 0;

  border-bottom:
    1px solid var(--costos-line);
}


.costos-columns-group:first-child {
  padding-top:
    0;
}


.costos-columns-group:last-child {
  padding-bottom:
    0;

  border-bottom:
    0;
}


.costos-columns-group > header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  margin:
    0 0 9px;
}


.costos-columns-group > header strong {
  color:
    var(--costos-text);

  font-size:
    10px;

  font-weight:
    700;
}


.costos-columns-group > header > div {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


.costos-columns-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    6px;
}


.costos-column-option {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;

  min-height:
    36px;

  padding:
    7px 9px;

  border:
    1px solid var(--costos-line);

  border-radius:
    6px;

  background:
    var(--costos-bg);

  cursor:
    pointer;
}


.costos-column-option:hover {
  background:
    var(--costos-bg-soft);
}


.costos-column-option input {
  width:
    14px;

  height:
    14px;

  flex:
    0 0 14px;

  accent-color:
    var(--costos-text);
}


.costos-column-option > span {
  overflow:
    hidden;

  flex:
    1 1 auto;

  color:
    var(--costos-text-soft);

  font-size:
    9px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.costos-column-option small {
  flex:
    0 0 auto;

  color:
    var(--costos-text-muted);

  font-size:
    8px;

  font-weight:
    700;

  text-transform:
    uppercase;
}


/* =========================================================
   LINK BUTTON
   ========================================================= */

.costos-link-btn {
  padding:
    0;

  border:
    0;

  color:
    var(--costos-text-soft);

  background:
    transparent;

  font:
    inherit;

  font-size:
    9px;

  font-weight:
    650;

  cursor:
    pointer;
}


.costos-link-btn:hover {
  color:
    var(--costos-text);
}


/* =========================================================
   FLOATING MENU
   ========================================================= */

.costos-floating-menu {
  position:
    absolute;

  top:
    calc(
      100% + 5px
    );

  right:
    0;

  z-index:
    10000;

  display:
    flex;

  flex-direction:
    column;

  width:
    210px;

  padding:
    4px;

  border:
    1px solid var(--costos-line);

  border-radius:
    8px;

  background:
    var(--costos-bg);
}


.costos-floating-menu--row {
  top:
    calc(
      100% + 4px
    );

  right:
    0;

  width:
    205px;
}


.costos-floating-menu button {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  width:
    100%;

  min-height:
    34px;

  padding:
    7px 8px;

  border:
    0;

  border-radius:
    5px;

  color:
    var(--costos-text-soft);

  background:
    transparent;

  font:
    inherit;

  font-size:
    9px;

  text-align:
    left;

  cursor:
    pointer;
}


.costos-floating-menu button:hover {
  color:
    var(--costos-text);

  background:
    var(--costos-bg-soft);
}


.costos-floating-menu button.is-danger {
  color:
    var(--costos-danger);
}


.costos-floating-menu button svg {
  width:
    13px;

  height:
    13px;

  flex:
    0 0 13px;

  stroke-width:
    1.8;
}


.costos-floating-menu__divider {
  height:
    1px;

  margin:
    3px 0;

  background:
    var(--costos-line);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width: 1050px
) {
  .costos-form-grid--editor {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .costos-summary-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }
}


@media (
  max-width: 820px
) {
  .costos-overlay {
    padding:
      10px;
  }


  .costos-modal,
  .costos-modal--medium,
  .costos-modal--wide,
  .costos-modal--editor {
    width:
      calc(
        100vw - 20px
      );

    max-height:
      calc(
        100vh - 20px
      );
  }


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


  .costos-editor-tabs {
    flex-direction:
      row;

    max-height:
      none;

    overflow-x:
      auto;

    overflow-y:
      hidden;
  }


  .costos-editor-tabs button {
    width:
      auto;

    flex:
      0 0 auto;

    white-space:
      nowrap;
  }


  .costos-summary-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


@media (
  max-width: 580px
) {
  .costos-form-grid,
  .costos-form-grid--editor,
  .costos-columns-grid {
    grid-template-columns:
      1fr;
  }


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


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


  .costos-modal__header {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .costos-modal__header-actions {
    justify-content:
      flex-end;
  }


  .costos-modal__footer {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .costos-modal__footer > div {
    width:
      100%;

    justify-content:
      flex-end;
  }


  .costos-total-box {
    flex-direction:
      column;

    align-items:
      flex-start;
  }
}


/* =========================================================
   FIN PARTE 2 DE 3
   ========================================================= *//* =========================================================
   WIRTZ HUB · MANUFACTURA · COSTOS
   CSS COMPLETO · PARTE 3 DE 3

   CONTIENE:
   - Masivo
   - Pendientes
   - Distribución
   - Historial
   - Toasts
   - Dark mode
   - Scrollbars
   - Ajustes finales
   ========================================================= */


/* =========================================================
   BULK PRODUCTS
   ========================================================= */

.costos-bulk-products {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    6px;

  margin:
    0 0 14px;
}


.costos-bulk-products > span {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    26px;

  padding:
    4px 7px;

  border:
    1px solid var(--costos-line);

  border-radius:
    999px;

  color:
    var(--costos-text-soft);

  background:
    var(--costos-bg-soft);

  font-size:
    9px;

  font-weight:
    600;
}


/* =========================================================
   BULK EDITOR
   ========================================================= */

.costos-bulk-editor {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(180px, 0.45fr);

  gap:
    12px;
}


/* =========================================================
   BULK PREVIEW
   ========================================================= */

.costos-bulk-preview {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  margin:
    14px 0 0;

  padding:
    10px 11px;

  border:
    1px solid var(--costos-line);

  border-radius:
    7px;

  color:
    var(--costos-text-soft);

  background:
    var(--costos-bg-soft);

  font-size:
    10px;

  line-height:
    1.45;
}


.costos-bulk-preview svg {
  width:
    13px;

  height:
    13px;

  flex:
    0 0 13px;

  stroke-width:
    1.8;
}


.costos-bulk-preview strong {
  color:
    var(--costos-text);
}


/* =========================================================
   LIST
   ========================================================= */

.costos-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


/* =========================================================
   LIST ITEM
   ========================================================= */

.costos-list-item {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  padding:
    12px;

  border:
    1px solid var(--costos-line);

  border-radius:
    8px;

  background:
    var(--costos-bg);
}


.costos-list-item__main {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;
}


.costos-list-item__main > div {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;
}


.costos-list-item__main strong {
  overflow:
    hidden;

  color:
    var(--costos-text);

  font-size:
    11px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.costos-list-item__meta {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px 14px;

  color:
    var(--costos-text-soft);

  font-size:
    9px;
}


.costos-list-item__meta strong {
  color:
    var(--costos-text);

  font-weight:
    700;
}


.costos-list-item__actions {
  display:
    flex;

  justify-content:
    flex-end;
}


/* =========================================================
   DISTRIBUTION
   ========================================================= */

.costos-distribution-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px;
}


.costos-distribution-card {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  min-width:
    0;

  padding:
    11px;

  border:
    1px solid var(--costos-line);

  border-radius:
    8px;

  background:
    var(--costos-bg-soft);
}


.costos-distribution-card > span {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  overflow:
    hidden;

  color:
    var(--costos-text-soft);

  font-size:
    9px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.costos-distribution-card > span svg {
  width:
    13px;

  height:
    13px;

  flex:
    0 0 13px;

  stroke-width:
    1.8;
}


.costos-distribution-card strong {
  overflow:
    hidden;

  color:
    var(--costos-text);

  font-size:
    14px;

  font-weight:
    700;

  font-variant-numeric:
    tabular-nums;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   DISTRIBUTION TOTAL
   ========================================================= */

.costos-distribution-total {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  margin:
    12px 0 0;

  padding:
    13px;

  border:
    1px solid var(--costos-line-strong);

  border-radius:
    8px;

  background:
    var(--costos-bg);
}


.costos-distribution-total span {
  color:
    var(--costos-text-soft);

  font-size:
    10px;

  font-weight:
    650;
}


.costos-distribution-total strong {
  color:
    var(--costos-text);

  font-size:
    18px;

  font-weight:
    750;

  letter-spacing:
    -0.03em;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   HISTORY FILTERS
   ========================================================= */

.costos-history-filters {
  display:
    grid;

  grid-template-columns:
    minmax(
      180px,
      1fr
    )
    minmax(
      150px,
      0.7fr
    )
    minmax(
      150px,
      0.7fr
    )
    auto;

  gap:
    10px;

  align-items:
    end;

  margin:
    0 0 14px;
}


/* =========================================================
   HISTORY BODY
   ========================================================= */

.costos-history-body {
  min-height:
    240px;
}


/* =========================================================
   HISTORY LIST
   ========================================================= */

.costos-history-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


/* =========================================================
   HISTORY ITEM
   ========================================================= */

.costos-history-item {
  padding:
    12px;

  border:
    1px solid var(--costos-line);

  border-radius:
    8px;

  background:
    var(--costos-bg);
}


.costos-history-item__top {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;
}


.costos-history-item__top > div {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;
}


.costos-history-item__top strong {
  overflow:
    hidden;

  color:
    var(--costos-text);

  font-size:
    11px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   HISTORY ACTION
   ========================================================= */

.costos-history-action {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    22px;

  padding:
    3px 6px;

  border:
    1px solid var(--costos-line);

  border-radius:
    999px;

  color:
    var(--costos-text-soft);

  background:
    var(--costos-bg-soft);

  font-size:
    8px;

  font-weight:
    700;

  text-transform:
    uppercase;
}


.costos-history-action.is-creado,
.costos-history-action.is-insert,
.costos-history-action.is-insertado {
  color:
    var(--costos-success);

  border-color:
    rgba(
      21,
      128,
      61,
      0.16
    );

  background:
    var(--costos-success-soft);
}


.costos-history-action.is-actualizado,
.costos-history-action.is-update,
.costos-history-action.is-actualizacion {
  color:
    var(--costos-warning);

  border-color:
    rgba(
      180,
      83,
      9,
      0.16
    );

  background:
    var(--costos-warning-soft);
}


.costos-history-action.is-eliminado,
.costos-history-action.is-delete {
  color:
    var(--costos-danger);

  border-color:
    rgba(
      220,
      38,
      38,
      0.16
    );

  background:
    var(--costos-danger-soft);
}


/* =========================================================
   HISTORY META
   ========================================================= */

.costos-history-item__meta {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin:
    9px 0 0;

  color:
    var(--costos-text-muted);

  font-size:
    9px;
}


.costos-history-item__meta > span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;
}


.costos-history-item__meta svg {
  width:
    11px;

  height:
    11px;

  stroke-width:
    1.8;
}


/* =========================================================
   HISTORY DETAILS
   ========================================================= */

.costos-history-details {
  margin:
    10px 0 0;

  border-top:
    1px solid var(--costos-line);
}


.costos-history-details summary {
  padding:
    9px 0 0;

  color:
    var(--costos-text-soft);

  font-size:
    9px;

  font-weight:
    650;

  cursor:
    pointer;
}


.costos-history-details summary:hover {
  color:
    var(--costos-text);
}


/* =========================================================
   HISTORY JSON
   ========================================================= */

.costos-history-json-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px;

  margin:
    10px 0 0;
}


.costos-history-json-grid > div {
  min-width:
    0;
}


.costos-history-json-grid strong {
  display:
    block;

  margin:
    0 0 5px;

  color:
    var(--costos-text-soft);

  font-size:
    9px;
}


.costos-history-json-grid pre {
  width:
    100%;

  max-height:
    260px;

  margin:
    0;

  overflow:
    auto;

  padding:
    9px;

  border:
    1px solid var(--costos-line);

  border-radius:
    7px;

  color:
    var(--costos-text-soft);

  background:
    var(--costos-bg-soft);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:
    8px;

  line-height:
    1.5;

  white-space:
    pre-wrap;

  word-break:
    break-word;
}


/* =========================================================
   HISTORY PAGINATION
   ========================================================= */

.costos-history-pagination {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  margin:
    14px 0 0;

  padding:
    12px 0 0;

  border-top:
    1px solid var(--costos-line);
}


.costos-history-pagination > span {
  color:
    var(--costos-text-soft);

  font-size:
    9px;
}


.costos-history-pagination strong {
  color:
    var(--costos-text);
}


/* =========================================================
   TOAST ROOT
   ========================================================= */

.costos-toast-container {
  position:
    fixed;

  right:
    18px;

  bottom:
    18px;

  z-index:
    12000;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    7px;

  width:
    min(
      380px,
      calc(
        100vw - 36px
      )
    );

  pointer-events:
    none;
}


/* =========================================================
   TOAST
   ========================================================= */

.costos-toast {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    8px;

  max-width:
    100%;

  padding:
    10px 11px;

  border:
    1px solid var(--costos-line);

  border-radius:
    8px;

  color:
    var(--costos-text);

  background:
    var(--costos-bg);

  font-size:
    10px;

  line-height:
    1.45;

  pointer-events:
    auto;

  animation:
    costos-toast-enter
    170ms
    ease-out;
}


.costos-toast svg {
  width:
    14px;

  height:
    14px;

  flex:
    0 0 14px;

  margin-top:
    1px;

  stroke-width:
    1.9;
}


.costos-toast--success svg {
  color:
    var(--costos-success);
}


.costos-toast--warning svg {
  color:
    var(--costos-warning);
}


.costos-toast--error svg {
  color:
    var(--costos-danger);
}


.costos-toast--info svg {
  color:
    var(--costos-text-soft);
}


.costos-toast.is-leaving {
  opacity:
    0;

  transform:
    translateY(
      4px
    );

  transition:
    opacity 170ms ease,
    transform 170ms ease;
}


@keyframes costos-toast-enter {
  from {
    opacity:
      0;

    transform:
      translateY(
        5px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

.costos-table-scroll,
.costos-panel__body,
.costos-modal__body,
.costos-editor-tabs,
.costos-history-json-grid pre {
  scrollbar-width:
    thin;

  scrollbar-color:
    var(--costos-line-strong)
    transparent;
}


.costos-table-scroll::-webkit-scrollbar,
.costos-panel__body::-webkit-scrollbar,
.costos-modal__body::-webkit-scrollbar,
.costos-editor-tabs::-webkit-scrollbar,
.costos-history-json-grid pre::-webkit-scrollbar {
  width:
    7px;

  height:
    7px;
}


.costos-table-scroll::-webkit-scrollbar-thumb,
.costos-panel__body::-webkit-scrollbar-thumb,
.costos-modal__body::-webkit-scrollbar-thumb,
.costos-editor-tabs::-webkit-scrollbar-thumb,
.costos-history-json-grid pre::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    var(--costos-line-strong);
}


/* =========================================================
   DARK MODE
   ========================================================= */

[data-theme="dark"] .costos-page,
[data-theme="dark"] .costos-overlay-root,
[data-theme="dark"] .costos-toast-container,
html.dark .costos-page,
html.dark .costos-overlay-root,
html.dark .costos-toast-container {
  --costos-bg:
    #0a0a0a;

  --costos-bg-soft:
    #111111;

  --costos-bg-muted:
    #171717;

  --costos-text:
    #f5f5f5;

  --costos-text-soft:
    #a3a3a3;

  --costos-text-muted:
    #737373;

  --costos-line:
    #262626;

  --costos-line-strong:
    #383838;

  --costos-success:
    #4ade80;

  --costos-success-soft:
    rgba(
      74,
      222,
      128,
      0.09
    );

  --costos-warning:
    #fbbf24;

  --costos-warning-soft:
    rgba(
      251,
      191,
      36,
      0.09
    );

  --costos-danger:
    #f87171;

  --costos-danger-soft:
    rgba(
      248,
      113,
      113,
      0.09
    );

  --costos-neutral:
    #a1a1aa;

  --costos-neutral-soft:
    rgba(
      161,
      161,
      170,
      0.09
    );
}


[data-theme="dark"] .costos-btn--primary,
html.dark .costos-btn--primary {
  color:
    #090909;

  border-color:
    #f5f5f5;

  background:
    #f5f5f5;
}


[data-theme="dark"] .costos-btn--primary:hover:not(:disabled),
html.dark .costos-btn--primary:hover:not(:disabled) {
  border-color:
    #dddddd;

  background:
    #dddddd;
}


[data-theme="dark"] .costos-overlay,
html.dark .costos-overlay {
  background:
    rgba(
      0,
      0,
      0,
      0.72
    );
}


/* =========================================================
   NATIVE DARK CONTROLS
   ========================================================= */

[data-theme="dark"] .costos-page input,
[data-theme="dark"] .costos-page select,
[data-theme="dark"] .costos-page textarea,
[data-theme="dark"] .costos-overlay-root input,
[data-theme="dark"] .costos-overlay-root select,
[data-theme="dark"] .costos-overlay-root textarea,
html.dark .costos-page input,
html.dark .costos-page select,
html.dark .costos-page textarea,
html.dark .costos-overlay-root input,
html.dark .costos-overlay-root select,
html.dark .costos-overlay-root textarea {
  color-scheme:
    dark;
}


/* =========================================================
   FOCUS
   ========================================================= */

.costos-btn:focus-visible,
.costos-icon-btn:focus-visible,
.costos-editor-tabs button:focus-visible,
.costos-floating-menu button:focus-visible,
.costos-link-btn:focus-visible {
  outline:
    2px solid var(--costos-text-soft);

  outline-offset:
    2px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width: 900px
) {
  .costos-distribution-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .costos-history-filters {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


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


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


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


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


  .costos-distribution-total {
    flex-direction:
      column;

    align-items:
      flex-start;
  }


  .costos-list-item__main {
    flex-direction:
      column;
  }


  .costos-list-item__actions {
    justify-content:
      flex-start;
  }


  .costos-toast-container {
    right:
      10px;

    bottom:
      10px;

    width:
      calc(
        100vw - 20px
      );
  }


  .costos-toast {
    width:
      100%;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {
  .costos-btn,
  .costos-icon-btn,
  .costos-toast,
  .costos-switch-field__control::after {
    transition:
      none;
  }


  .costos-modal-loading svg,
  .costos-skeleton-line {
    animation:
      none;
  }
}


/* =========================================================
   FIN · WIRTZ HUB · MANUFACTURA · COSTOS
   ========================================================= */
   /* =========================================================
   COSTOS · AJUSTES GENERALES
   MISMO TAMAÑO ACTUAL
   MÁS RÁPIDO
   RESPONSIVE FULL
   SIN BARRAS HORIZONTALES EN MOBILE
   DIVISIONES MÁS VISIBLES
   TIPOGRAFÍA MÁS MARCADA
   ========================================================= */


/* =========================================================
   01. CONTRASTE GENERAL
   ========================================================= */

.costos-page,
.costos-overlay-root,
.costos-toast-container {
  --costos-text:
    #0d0d0d;

  --costos-text-soft:
    #3f4348;

  --costos-text-muted:
    #6a7077;

  --costos-line:
    #c9cdd2;

  --costos-line-strong:
    #a5abb2;
}


[data-theme="dark"] .costos-page,
[data-theme="dark"] .costos-overlay-root,
[data-theme="dark"] .costos-toast-container,
html.dark .costos-page,
html.dark .costos-overlay-root,
html.dark .costos-toast-container {
  --costos-text:
    #f7f7f7;

  --costos-text-soft:
    #d1d4d7;

  --costos-text-muted:
    #9ba1a7;

  --costos-line:
    #3c4146;

  --costos-line-strong:
    #585f66;
}


/* =========================================================
   02. SIN SCROLL HORIZONTAL GENERAL
   ========================================================= */

html,
body {
  max-width:
    100vw;

  overflow-x:
    hidden !important;
}


body:has(.costos-page),
body:has(.costos-page) .app-shell,
body:has(.costos-page) .app-main,
body:has(.costos-page) .app-content,
.app-content:has(.costos-page),
#costosContent {
  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    100% !important;

  overflow-x:
    hidden !important;
}


.costos-page,
.costos-page *,
.costos-overlay-root,
.costos-overlay-root * {
  box-sizing:
    border-box;

  min-width:
    0;
}


.costos-page {
  max-width:
    100%;

  overflow-x:
    hidden !important;
}


/* =========================================================
   03. MÁS RÁPIDO
   ========================================================= */

.costos-page,
.costos-metric-card,
.costos-table tbody tr,
.costos-list-item,
.costos-distribution-card,
.costos-history-item,
.costos-editor-section,
.costos-editor-summary {
  animation:
    none !important;
}


.costos-btn,
.costos-icon-btn,
.costos-metric-card,
.costos-search input,
.costos-select,
.costos-field input,
.costos-field select,
.costos-field textarea,
.costos-column-option,
.costos-editor-tabs button,
.costos-floating-menu button,
.costos-switch-field__control::after {
  transition-duration:
    65ms !important;
}


.costos-toast {
  animation-duration:
    90ms !important;
}


.costos-modal-loading svg {
  animation-duration:
    650ms !important;
}


.costos-btn:active:not(:disabled),
.costos-icon-btn:active:not(:disabled) {
  transform:
    none !important;
}


/* =========================================================
   04. LETRAS MÁS MARCADAS
   ========================================================= */

.costos-page,
.costos-panel,
.costos-modal {
  font-weight:
    600;
}


.costos-page-header h1,
.costos-panel__header h2,
.costos-modal__header h2 {
  font-weight:
    900 !important;
}


.costos-page-header__eyebrow,
.costos-metric-card__label,
.costos-table-card__header h2,
.costos-table th,
.costos-panel__eyebrow,
.costos-field > span,
.costos-editor-section__header strong,
.costos-composition-box__insumos > span,
.costos-columns-group > header strong,
.costos-history-json-grid strong {
  font-weight:
    800 !important;
}


.costos-page-header p,
.costos-table-card__header p,
.costos-panel__header p,
.costos-modal__header p,
.costos-field small,
.costos-product-cell span,
.costos-insumos-cell > span,
.costos-history-item__meta,
.costos-composition-box__insumos p {
  font-weight:
    600 !important;
}


.costos-btn,
.costos-select,
.costos-search input,
.costos-table td,
.costos-pagination,
.costos-column-option > span,
.costos-floating-menu button {
  font-weight:
    650 !important;
}


.costos-product-cell strong,
.costos-code,
.costos-money,
.costos-status,
.costos-mini-status,
.costos-list-item__main strong,
.costos-distribution-card strong,
.costos-history-item__top strong {
  font-weight:
    800 !important;
}


.costos-money--total,
.costos-metric-card__value,
.costos-total-box > strong,
.costos-distribution-total strong {
  font-weight:
    850 !important;
}


/* =========================================================
   05. HEADER
   ========================================================= */

.costos-page-header {
  padding-bottom:
    14px;

  border-bottom:
    1px
    solid
    var(--costos-line-strong);
}


/* =========================================================
   06. BOTONES
   ========================================================= */

.costos-btn--secondary,
.costos-icon-btn,
.costos-search input,
.costos-select {
  border-color:
    var(--costos-line-strong) !important;
}


/* =========================================================
   07. MÉTRICAS
   ========================================================= */

.costos-metrics {
  gap:
    0 !important;

  border:
    1px
    solid
    var(--costos-line-strong);

  border-radius:
    10px;

  overflow:
    hidden;
}


.costos-metric-card {
  border:
    0 !important;

  border-right:
    1px
    solid
    var(--costos-line-strong) !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}


.costos-metric-card:last-child {
  border-right:
    0 !important;
}


.costos-metric-card__icon {
  border:
    1px
    solid
    var(--costos-line);
}


/* =========================================================
   08. TOOLBAR
   ========================================================= */

.costos-toolbar {
  border-color:
    var(--costos-line-strong) !important;
}


.costos-toolbar__main,
.costos-toolbar__actions {
  min-width:
    0;
}


/* =========================================================
   09. BULK BAR
   ========================================================= */

.costos-bulk-bar {
  border-color:
    var(--costos-line-strong) !important;
}


/* =========================================================
   10. TABLA PRINCIPAL · DIVISIONES
   ========================================================= */

.costos-table-card {
  border-color:
    var(--costos-line-strong) !important;
}


.costos-table-card__header {
  border-bottom-color:
    var(--costos-line-strong) !important;
}


.costos-table th {
  border-bottom:
    1px
    solid
    var(--costos-line-strong) !important;

  color:
    var(--costos-text) !important;
}


.costos-table td {
  border-bottom:
    1px
    solid
    var(--costos-line) !important;
}


.costos-table th:not(:last-child),
.costos-table td:not(:last-child) {
  border-right:
    1px
    solid
    var(--costos-line) !important;
}


.costos-table tbody tr:last-child td {
  border-bottom:
    0 !important;
}


/* =========================================================
   11. PAGINACIÓN
   ========================================================= */

.costos-pagination {
  border-top:
    1px
    solid
    var(--costos-line-strong) !important;
}


/* =========================================================
   12. PANEL FILTROS / COLUMNAS
   ========================================================= */

.costos-panel {
  border-color:
    var(--costos-line-strong) !important;
}


.costos-panel__header {
  border-bottom-color:
    var(--costos-line-strong) !important;
}


.costos-panel__footer {
  border-top-color:
    var(--costos-line-strong) !important;
}


.costos-columns-group {
  border-bottom-color:
    var(--costos-line-strong) !important;
}


.costos-column-option {
  border-color:
    var(--costos-line) !important;
}


/* =========================================================
   13. MODALES
   ========================================================= */

.costos-modal {
  border-color:
    var(--costos-line-strong) !important;
}


.costos-modal__header {
  border-bottom-color:
    var(--costos-line-strong) !important;
}


.costos-modal__footer {
  border-top-color:
    var(--costos-line-strong) !important;
}


.costos-modal__body,
.costos-panel__body {
  overflow-x:
    hidden !important;
}


/* =========================================================
   14. CAMPOS
   ========================================================= */

.costos-field input,
.costos-field select,
.costos-field textarea,
.costos-money-input {
  border-color:
    var(--costos-line-strong) !important;
}


.costos-money-input > span {
  border-right-color:
    var(--costos-line-strong) !important;
}


/* =========================================================
   15. COMPOSICIÓN
   ========================================================= */

.costos-composition-box {
  border-color:
    var(--costos-line-strong) !important;
}


.costos-composition-box__metrics > div {
  border-color:
    var(--costos-line) !important;
}


.costos-insumo-chip {
  border-color:
    var(--costos-line) !important;
}


/* =========================================================
   16. EDITOR
   ========================================================= */

.costos-editor-tabs {
  border-color:
    var(--costos-line-strong) !important;
}


.costos-editor-tabs button.is-active {
  border-color:
    var(--costos-line-strong) !important;
}


.costos-editor-content {
  border-color:
    var(--costos-line-strong) !important;
}


.costos-editor-section__header {
  border-bottom-color:
    var(--costos-line-strong) !important;
}


.costos-editor-section__icon {
  border-color:
    var(--costos-line) !important;
}


.costos-editor-summary {
  border-color:
    var(--costos-line-strong) !important;
}


.costos-summary-grid article {
  border-color:
    var(--costos-line) !important;
}


.costos-total-box {
  border-color:
    var(--costos-line-strong) !important;
}


/* =========================================================
   17. LISTAS
   ========================================================= */

.costos-list-item {
  border-color:
    var(--costos-line-strong) !important;
}


.costos-distribution-card {
  border-color:
    var(--costos-line) !important;
}


.costos-distribution-total {
  border-color:
    var(--costos-line-strong) !important;
}


.costos-history-item {
  border-color:
    var(--costos-line-strong) !important;
}


.costos-history-details {
  border-top-color:
    var(--costos-line-strong) !important;
}


.costos-history-json-grid pre {
  border-color:
    var(--costos-line) !important;
}


.costos-history-pagination {
  border-top-color:
    var(--costos-line-strong) !important;
}


/* =========================================================
   18. MENÚS FLOTANTES
   ========================================================= */

.costos-floating-menu {
  border-color:
    var(--costos-line-strong) !important;
}


.costos-floating-menu__divider {
  background:
    var(--costos-line-strong) !important;
}


/* =========================================================
   19. MÉTRICAS RESPONSIVE
   ========================================================= */

@media (max-width: 1500px) {
  .costos-metric-card {
    border-right:
      1px
      solid
      var(--costos-line-strong) !important;

    border-bottom:
      1px
      solid
      var(--costos-line-strong) !important;
  }


  .costos-metric-card:nth-child(4n) {
    border-right:
      0 !important;
  }


  .costos-metric-card:nth-last-child(-n + 3) {
    border-bottom:
      0 !important;
  }
}


/* =========================================================
   20. TABLET · TOOLBAR
   ========================================================= */

@media (max-width: 1100px) {
  .costos-page {
    max-width:
      100%;

    overflow-x:
      hidden !important;
  }


  .costos-page-header__actions {
    flex-wrap:
      wrap;
  }


  .costos-toolbar,
  .costos-toolbar__main,
  .costos-toolbar__actions {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;
  }


  .costos-toolbar__main {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .costos-search {
    grid-column:
      1 /
      -1;

    width:
      100%;

    min-width:
      0 !important;

    max-width:
      100%;
  }


  .costos-select {
    width:
      100%;

    min-width:
      0 !important;
  }
}


/* =========================================================
   21. MOBILE / TABLET
   TABLA PRINCIPAL → TARJETAS
   ========================================================= */

@media (max-width: 900px) {
  .costos-table-scroll {
    width:
      100% !important;

    max-width:
      100% !important;

    overflow-x:
      hidden !important;

    overflow-y:
      visible !important;
  }


  .costos-table {
    display:
      block !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      100% !important;
  }


  .costos-table thead {
    display:
      none !important;
  }


  .costos-table tbody {
    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      8px;

    width:
      100%;

    max-width:
      100%;

    padding:
      8px;
  }


  .costos-table tbody tr {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

    border:
      1px
      solid
      var(--costos-line-strong);

    border-radius:
      9px;

    overflow:
      hidden;

    background:
      var(--costos-bg);
  }


  .costos-table tbody td,
  .costos-table tbody td[data-column] {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      center;

    gap:
      4px;

    width:
      auto !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    min-height:
      55px;

    height:
      auto;

    padding:
      8px !important;

    border-right:
      1px
      solid
      var(--costos-line) !important;

    border-bottom:
      1px
      solid
      var(--costos-line) !important;

    overflow:
      hidden;
  }


  .costos-table tbody td:nth-child(2n) {
    border-right:
      0 !important;
  }


  .costos-table tbody td::before {
    content:
      attr(
        data-column
      );

    display:
      block;

    margin-bottom:
      2px;

    color:
      var(--costos-text-muted);

    font-size:
      7px;

    font-weight:
      800;

    line-height:
      1.1;

    letter-spacing:
      0.05em;

    text-transform:
      uppercase;
  }


  .costos-table tbody
  td[data-column="select"]::before,
  .costos-table tbody
  td[data-column="actions"]::before {
    display:
      none;
  }


  .costos-table tbody
  td[data-column="producto_codigo"]::before {
    content:
      "Código";
  }


  .costos-table tbody
  td[data-column="producto_nombre"]::before {
    content:
      "Producto";
  }


  .costos-table tbody
  td[data-column="categoria"]::before {
    content:
      "Categoría";
  }


  .costos-table tbody
  td[data-column="bom_version_codigo"]::before {
    content:
      "BOM";
  }


  .costos-table tbody
  td[data-column="insumos_nombres"]::before {
    content:
      "Insumos";
  }


  .costos-table tbody
  td[data-column="estado_costo"]::before {
    content:
      "Estado costo";
  }


  .costos-table tbody
  td[data-column="costo_materiales_ars"]::before {
    content:
      "Materiales";
  }


  .costos-table tbody
  td[data-column="costo_mano_obra_ars"]::before {
    content:
      "Mano de obra";
  }


  .costos-table tbody
  td[data-column="costo_packaging_ars"]::before {
    content:
      "Packaging";
  }


  .costos-table tbody
  td[data-column="costo_procesos_ars"]::before {
    content:
      "Procesos";
  }


  .costos-table tbody
  td[data-column="costo_energia_ars"]::before {
    content:
      "Energía";
  }


  .costos-table tbody
  td[data-column="costo_total_ars"]::before {
    content:
      "Costo total";
  }


  .costos-table tbody
  td[data-column="componentes_sin_precio"]::before {
    content:
      "Sin precio";
  }


  .costos-table tbody
  td[data-column="fecha_actualizacion"]::before {
    content:
      "Actualizado";
  }


  .costos-table tbody
  td[data-column="select"] {
    align-items:
      center;

    justify-content:
      center;
  }


  .costos-table tbody
  td[data-column="actions"] {
    grid-column:
      1 /
      -1;

    border-right:
      0 !important;

    border-bottom:
      0 !important;
  }


  .costos-row-actions {
    display:
      grid;

    grid-template-columns:
      repeat(
        5,
        minmax(
          0,
          1fr
        )
      );

    width:
      100%;

    min-width:
      0;

    gap:
      5px;
  }


  .costos-row-actions
  .costos-icon-btn {
    width:
      100%;

    min-width:
      0;

    height:
      34px;

    flex:
      1 1 auto;
  }


  .costos-product-cell,
  .costos-product-cell strong,
  .costos-product-cell span,
  .costos-insumos-cell,
  .costos-insumos-cell > span,
  .costos-code,
  .costos-money {
    max-width:
      100% !important;
  }


  .costos-product-cell strong,
  .costos-product-cell span,
  .costos-insumos-cell > span {
    white-space:
      normal !important;

    overflow-wrap:
      anywhere;
  }
}


/* =========================================================
   22. MOBILE · HEADER / TOOLBAR
   ========================================================= */

@media (max-width: 700px) {
  .costos-page {
    width:
      100%;

    max-width:
      100%;

    padding:
      12px;

    overflow-x:
      hidden !important;
  }


  .costos-page-header {
    gap:
      14px;

    margin-bottom:
      16px;
  }


  .costos-page-header__actions {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    width:
      100%;

    gap:
      6px;
  }


  .costos-page-header__actions
  .costos-btn {
    width:
      100%;
  }


  .costos-metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      ) !important;
  }


  .costos-metric-card,
  .costos-metric-card:nth-child(4n),
  .costos-metric-card:nth-last-child(-n + 3) {
    border-right:
      1px
      solid
      var(--costos-line-strong) !important;

    border-bottom:
      1px
      solid
      var(--costos-line-strong) !important;
  }


  .costos-metric-card:nth-child(2n) {
    border-right:
      0 !important;
  }


  .costos-toolbar {
    padding:
      8px;
  }


  .costos-toolbar__main {
    grid-template-columns:
      1fr !important;
  }


  .costos-search {
    grid-column:
      auto;
  }


  .costos-toolbar__actions {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      5px;
  }


  .costos-toolbar__actions
  .costos-btn,
  .costos-toolbar__actions
  .costos-action-menu,
  .costos-toolbar__actions
  .costos-action-menu
  > .costos-btn {
    width:
      100%;
  }


  .costos-bulk-bar {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .costos-bulk-bar__actions {
    display:
      grid;

    grid-template-columns:
      1fr;

    width:
      100%;
  }


  .costos-bulk-bar__actions
  .costos-btn {
    width:
      100%;
  }


  .costos-pagination {
    width:
      100%;

    max-width:
      100%;

    overflow-x:
      hidden;
  }


  .costos-pagination__info {
    width:
      100%;

    justify-content:
      space-between;

    flex-wrap:
      wrap;
  }


  .costos-pagination__controls {
    display:
      grid;

    grid-template-columns:
      34px
      34px
      minmax(
        0,
        1fr
      )
      34px
      34px;

    width:
      100%;

    gap:
      5px;
  }


  .costos-pagination__page {
    min-width:
      0;

    width:
      100%;
  }


  .costos-pagination__controls
  .costos-icon-btn {
    width:
      34px;
  }
}


/* =========================================================
   23. MOBILE · OVERLAYS / MODALES
   ========================================================= */

@media (max-width: 700px) {
  .costos-overlay {
    width:
      100vw;

    max-width:
      100vw;

    padding:
      0;

    overflow-x:
      hidden !important;
  }


  .costos-panel,
  .costos-panel--filters,
  .costos-panel--columns,
  .costos-modal,
  .costos-modal--medium,
  .costos-modal--wide,
  .costos-modal--editor {
    width:
      100% !important;

    max-width:
      100% !important;

    max-height:
      94dvh;

    margin:
      auto 0 0;

    border-right:
      0;

    border-bottom:
      0;

    border-left:
      0;

    border-radius:
      12px
      12px
      0
      0;

    overflow-x:
      hidden !important;
  }


  .costos-panel__header,
  .costos-modal__header {
    padding:
      12px;
  }


  .costos-panel__body,
  .costos-modal__body {
    width:
      100%;

    max-width:
      100%;

    padding:
      12px;

    overflow-x:
      hidden !important;
  }


  .costos-panel__footer,
  .costos-modal__footer {
    padding:
      10px
      12px;
  }


  .costos-form-grid,
  .costos-form-grid--editor {
    grid-template-columns:
      1fr !important;
  }


  .costos-field--full {
    grid-column:
      auto;
  }


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


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


  .costos-editor-tabs {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    max-height:
      none;

    overflow-x:
      hidden !important;

    overflow-y:
      visible;
  }


  .costos-editor-tabs button {
    width:
      100%;

    min-width:
      0;

    white-space:
      normal;
  }


  .costos-editor-content,
  .costos-editor-summary,
  .costos-composition-box {
    max-width:
      100%;

    overflow-x:
      hidden;
  }


  .costos-summary-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


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


  .costos-history-filters,
  .costos-history-json-grid,
  .costos-bulk-editor {
    grid-template-columns:
      1fr !important;
  }


  .costos-distribution-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


/* =========================================================
   24. MOBILE CHICO
   ========================================================= */

@media (max-width: 480px) {
  .costos-page {
    padding:
      8px;
  }


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


  .costos-metrics {
    grid-template-columns:
      1fr !important;
  }


  .costos-metric-card,
  .costos-metric-card:nth-child(2n),
  .costos-metric-card:nth-child(4n),
  .costos-metric-card:nth-last-child(-n + 3) {
    border-right:
      0 !important;

    border-bottom:
      1px
      solid
      var(--costos-line-strong) !important;
  }


  .costos-metric-card:last-child {
    border-bottom:
      0 !important;
  }


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


  .costos-table tbody tr {
    grid-template-columns:
      1fr;
  }


  .costos-table tbody td,
  .costos-table tbody td:nth-child(2n),
  .costos-table tbody td[data-column] {
    grid-column:
      auto;

    border-right:
      0 !important;

    border-bottom:
      1px
      solid
      var(--costos-line) !important;
  }


  .costos-table tbody
  td[data-column="actions"] {
    border-bottom:
      0 !important;
  }


  .costos-row-actions {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .costos-pagination__controls {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .costos-pagination__page {
    grid-column:
      1 /
      -1;

    grid-row:
      1;

    min-height:
      30px;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;
  }


  .costos-pagination__controls
  .costos-icon-btn {
    width:
      100%;
  }


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


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


  .costos-total-box,
  .costos-distribution-total {
    flex-direction:
      column;

    align-items:
      flex-start;
  }
}


/* =========================================================
   25. PROTECCIÓN FINAL
   ========================================================= */

.costos-page img,
.costos-page svg,
.costos-overlay-root img,
.costos-overlay-root svg {
  max-width:
    100%;
}


.costos-page input,
.costos-page select,
.costos-page textarea,
.costos-page button,
.costos-overlay-root input,
.costos-overlay-root select,
.costos-overlay-root textarea,
.costos-overlay-root button {
  min-width:
    0;

  max-width:
    100%;
}


.costos-page,
.costos-toolbar,
.costos-table-card,
.costos-panel,
.costos-panel__body,
.costos-modal,
.costos-modal__body,
.costos-editor-layout,
.costos-editor-content,
.costos-editor-summary,
.costos-composition-box,
.costos-history-body,
.costos-history-list {
  overflow-x:
    hidden !important;
}/* =========================================================
   COSTOS · ELIMINAR BARRAS HORIZONTALES
   PEGAR AL FINAL DEL CSS
   ========================================================= */

html,
body {
  width: 100%;
  max-width: 100vw;

  overflow-x: hidden !important;
}


body:has(.costos-page),
body:has(.costos-page) .app-shell,
body:has(.costos-page) .app-main,
body:has(.costos-page) .app-content,
#costosContent,
.costos-page {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  overflow-x: hidden !important;
}


/* =========================================================
   TABLA DESKTOP
   SIN SCROLL HORIZONTAL
   ========================================================= */

.costos-table-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  overflow: hidden !important;
}


.costos-table-scroll {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  overflow-x: hidden !important;
  overflow-y: visible !important;
}


.costos-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  table-layout: fixed !important;
}


/* =========================================================
   ANULAR LOS MIN-WIDTH DEL CSS ORIGINAL
   ========================================================= */

.costos-table td[data-column="producto_codigo"],
.costos-table td[data-column="producto_nombre"],
.costos-table td[data-column="categoria"],
.costos-table td[data-column="bom_version_codigo"],
.costos-table td[data-column="insumos_nombres"],
.costos-table td[data-column="estado_costo"],
.costos-table td[data-column="actions"] {
  min-width: 0 !important;
  max-width: none !important;
}


/* =========================================================
   ANCHOS PROPORCIONALES
   ========================================================= */

.costos-table th:first-child,
.costos-table td:first-child {
  width: 2.5% !important;
  min-width: 0 !important;
  max-width: none !important;
}


.costos-table th[data-column="producto_codigo"],
.costos-table td[data-column="producto_codigo"] {
  width: 6.5% !important;
}


.costos-table th[data-column="producto_nombre"],
.costos-table td[data-column="producto_nombre"] {
  width: 9.5% !important;
}


.costos-table th[data-column="categoria"],
.costos-table td[data-column="categoria"] {
  width: 6% !important;
}


.costos-table th[data-column="bom_version_codigo"],
.costos-table td[data-column="bom_version_codigo"] {
  width: 7.5% !important;
}


.costos-table th[data-column="insumos_nombres"],
.costos-table td[data-column="insumos_nombres"] {
  width: 13% !important;
}


.costos-table th[data-column="estado_costo"],
.costos-table td[data-column="estado_costo"] {
  width: 6.5% !important;
}


.costos-table th[data-column="costo_materiales_ars"],
.costos-table td[data-column="costo_materiales_ars"] {
  width: 5% !important;
}


.costos-table th[data-column="costo_mano_obra_ars"],
.costos-table td[data-column="costo_mano_obra_ars"] {
  width: 4.5% !important;
}


.costos-table th[data-column="costo_packaging_ars"],
.costos-table td[data-column="costo_packaging_ars"] {
  width: 4.5% !important;
}


.costos-table th[data-column="costo_procesos_ars"],
.costos-table td[data-column="costo_procesos_ars"] {
  width: 4.5% !important;
}


.costos-table th[data-column="costo_energia_ars"],
.costos-table td[data-column="costo_energia_ars"] {
  width: 4% !important;
}


.costos-table th[data-column="costo_total_ars"],
.costos-table td[data-column="costo_total_ars"] {
  width: 5.5% !important;
}


.costos-table th[data-column="movimiento_interno_ars"],
.costos-table td[data-column="movimiento_interno_ars"] {
  width: 6% !important;
}


.costos-table th[data-column="componentes_sin_precio"],
.costos-table td[data-column="componentes_sin_precio"] {
  width: 4% !important;
}


.costos-table th[data-column="fecha_actualizacion"],
.costos-table td[data-column="fecha_actualizacion"] {
  width: 7.5% !important;
}


.costos-table th[data-column="actions"],
.costos-table td[data-column="actions"] {
  width: 10% !important;
}


/* =========================================================
   CELDAS COMPACTAS
   ========================================================= */

.costos-table th {
  padding:
    0
    6px !important;

  overflow: hidden !important;

  font-size: 8px !important;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.costos-table td {
  padding:
    6px !important;

  overflow: hidden !important;

  font-size: 9px !important;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.costos-product-cell,
.costos-insumos-cell {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  overflow: hidden !important;
}


.costos-product-cell strong,
.costos-product-cell span,
.costos-insumos-cell > span,
.costos-code,
.costos-money,
.costos-status,
.costos-mini-status {
  max-width: 100% !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


/* =========================================================
   ACCIONES
   ========================================================= */

.costos-row-actions {
  width: 100% !important;
  min-width: 0 !important;

  display: grid !important;

  grid-template-columns:
    repeat(
      5,
      minmax(
        0,
        1fr
      )
    ) !important;

  gap: 3px !important;
}


.costos-row-actions .costos-icon-btn {
  width: 100% !important;
  min-width: 0 !important;

  height: 30px !important;

  flex: 1 1 auto !important;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.costos-toolbar,
.costos-toolbar__main,
.costos-toolbar__actions {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}


.costos-search {
  min-width: 0 !important;
}


.costos-select {
  min-width: 0 !important;
}


/* =========================================================
   PAGINACIÓN
   ========================================================= */

.costos-pagination {
  width: 100%;
  min-width: 0;
  max-width: 100%;

  overflow-x: hidden !important;
}


.costos-pagination__info,
.costos-pagination__controls {
  min-width: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {
  .costos-table-scroll {
    overflow-x: hidden !important;
  }


  .costos-table {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* =========================================================
   MOBILE
   TABLA EN CARDS
   ========================================================= */

@media (max-width: 900px) {
  .costos-table {
    display: block !important;
  }


  .costos-table thead {
    display: none !important;
  }


  .costos-table tbody {
    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 7px !important;

    width: 100% !important;

    padding: 7px !important;
  }


  .costos-table tbody tr {
    display: grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      ) !important;

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

    overflow: hidden !important;

    border:
      1px
      solid
      var(--costos-line-strong) !important;
  }


  .costos-table tbody td,
  .costos-table tbody td[data-column],
  .costos-table tbody td:first-child {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 52px !important;

    white-space: normal !important;
  }


  .costos-table tbody
  td[data-column="actions"] {
    grid-column:
      1
      /
      -1 !important;
  }


  .costos-product-cell strong,
  .costos-product-cell span,
  .costos-insumos-cell > span,
  .costos-code,
  .costos-money {
    white-space: normal !important;

    overflow-wrap: anywhere !important;
  }
}


/* =========================================================
   MOBILE CHICO
   ========================================================= */

@media (max-width: 520px) {
  .costos-table tbody tr {
    grid-template-columns:
      1fr !important;
  }


  .costos-table tbody td,
  .costos-table tbody
  td:nth-child(2n),
  .costos-table tbody
  td[data-column],
  .costos-table tbody
  td:first-child {
    grid-column: auto !important;

    border-right: 0 !important;
  }


  .costos-row-actions {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      ) !important;
  }


  .costos-toolbar__main,
  .costos-toolbar__actions {
    grid-template-columns:
      1fr !important;
  }


  .costos-page-header__actions {
    grid-template-columns:
      1fr !important;
  }
}


/* =========================================================
   PROTECCIÓN FINAL
   ========================================================= */

.costos-page,
.costos-table-card,
.costos-table-scroll,
.costos-toolbar,
.costos-pagination,
.costos-panel,
.costos-panel__body,
.costos-modal,
.costos-modal__body,
.costos-editor-layout,
.costos-editor-content {
  overflow-x: hidden !important;
}