/* =========================================================
   UBICACIÓN:
   frontend/src/pages/recursos/costos-productos/
   costos-productos.css

   WIRTZ HUB · RECURSOS
   COSTOS DE PRODUCTOS

   PARTE 1 DE 3

   ESTILO:
   - Premium
   - Minimalista
   - Compacto
   - Responsive
   - Dark mode real
   - Sin glow
   - Sin scroll horizontal de página
   - Texto marcado y legible
   - Usa todo el espacio horizontal disponible
   ========================================================= */


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

#costosProductosPage {
  --costos-bg:
    var(
      --app-bg,
      #f6f7f9
    );

  --costos-surface:
    var(
      --surface,
      #ffffff
    );

  --costos-surface-2:
    var(
      --surface-2,
      #f8f9fb
    );

  --costos-surface-3:
    var(
      --surface-3,
      #f2f4f7
    );

  --costos-border:
    var(
      --border-color,
      #e5e7eb
    );

  --costos-border-strong:
    var(
      --border-strong,
      #d3d7dd
    );

  --costos-text:
    var(
      --text-color,
      #17191d
    );

  --costos-text-strong:
    var(
      --text-strong,
      #090a0c
    );

  --costos-muted:
    var(
      --text-muted,
      #606773
    );

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

  --costos-primary:
    var(
      --accent-color,
      #17191d
    );

  --costos-primary-contrast:
    #ffffff;

  --costos-danger:
    #c9342c;

  --costos-warning:
    #a76108;

  --costos-success:
    #0b6e47;

  --costos-info:
    #2056a8;

  --costos-radius-xs:
    7px;

  --costos-radius-sm:
    9px;

  --costos-radius-md:
    12px;

  --costos-radius-lg:
    15px;

  --costos-radius-xl:
    18px;

  --costos-shadow-sm:
    0 1px 2px rgba(
      16,
      24,
      40,
      0.04
    );

  --costos-shadow-md:
    0 12px 32px rgba(
      16,
      24,
      40,
      0.08
    );

  --costos-shadow-lg:
    0 24px 60px rgba(
      16,
      24,
      40,
      0.14
    );

  --costos-transition:
    170ms cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  width:
    100%;

  min-width:
    0;

  max-width:
    none;

  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  color:
    var(
      --costos-text
    );

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


/* =========================================================
   GLOBAL FIX
   ========================================================= */

#costosProductosPage,
#costosProductosPage *,
#costosProductosPage *::before,
#costosProductosPage *::after {
  box-sizing:
    border-box;
}


#costosProductosPage button,
#costosProductosPage input,
#costosProductosPage select,
#costosProductosPage textarea {
  font:
    inherit;
}


#costosProductosPage button {
  -webkit-tap-highlight-color:
    transparent;
}


#costosProductosPage input,
#costosProductosPage select,
#costosProductosPage textarea {
  min-width:
    0;
}


body.costos-productos-overlay-open {
  overflow:
    hidden;
}


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

.costos-productos-page__header {
  width:
    100%;

  min-width:
    0;
}


.costos-productos-page__heading {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


.costos-productos-page__eyebrow {
  font-size:
    11px;

  line-height:
    1.2;

  font-weight:
    850;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

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


.costos-productos-page__title-row {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    18px;
}


.costos-productos-page__title-content {
  min-width:
    0;

  flex:
    1;
}


.costos-productos-page__title {
  margin:
    0;

  font-size:
    clamp(
      24px,
      2vw,
      30px
    );

  line-height:
    1.05;

  font-weight:
    850;

  letter-spacing:
    -0.035em;

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


.costos-productos-page__subtitle {
  margin:
    6px 0 0;

  max-width:
    760px;

  font-size:
    13px;

  line-height:
    1.5;

  font-weight:
    650;

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


.costos-productos-page__actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;
}


.costos-productos-header-menu {
  position:
    relative;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.costos-productos-button {
  appearance:
    none;

  border:
    1px solid transparent;

  border-radius:
    var(
      --costos-radius-sm
    );

  min-height:
    36px;

  padding:
    8px 12px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  background:
    transparent;

  color:
    var(
      --costos-text
    );

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    800;

  white-space:
    nowrap;

  cursor:
    pointer;

  transition:
    background
      var(
        --costos-transition
      ),
    border-color
      var(
        --costos-transition
      ),
    color
      var(
        --costos-transition
      ),
    transform
      var(
        --costos-transition
      ),
    opacity
      var(
        --costos-transition
      );
}


.costos-productos-button svg {
  width:
    16px;

  height:
    16px;

  stroke-width:
    2.1;
}


.costos-productos-button:hover:not(:disabled) {
  transform:
    translateY(
      -1px
    );
}


.costos-productos-button:active:not(:disabled) {
  transform:
    translateY(
      0
    );
}


.costos-productos-button:disabled {
  cursor:
    not-allowed;

  opacity:
    0.48;
}


.costos-productos-button--primary {
  background:
    var(
      --costos-primary
    );

  color:
    var(
      --costos-primary-contrast
    );

  border-color:
    var(
      --costos-primary
    );
}


.costos-productos-button--primary:hover:not(:disabled) {
  filter:
    brightness(
      1.06
    );
}


.costos-productos-button--secondary {
  background:
    var(
      --costos-surface
    );

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

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

  box-shadow:
    var(
      --costos-shadow-sm
    );
}


.costos-productos-button--secondary:hover:not(:disabled) {
  background:
    var(
      --costos-surface-2
    );

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


.costos-productos-button--ghost {
  background:
    transparent;

  border-color:
    transparent;

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


.costos-productos-button--ghost:hover:not(:disabled) {
  background:
    var(
      --costos-surface-3
    );

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


.costos-productos-button--small {
  min-height:
    31px;

  padding:
    6px 9px;

  font-size:
    11px;
}


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

.costos-productos-link-button {
  border:
    0;

  padding:
    3px 0;

  background:
    transparent;

  color:
    var(
      --costos-text
    );

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;
}


.costos-productos-link-button:hover {
  color:
    var(
      --costos-text-strong
    );

  text-decoration:
    underline;
}


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

.costos-productos-metrics {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    10px;
}


.costos-productos-metric-card {
  min-width:
    0;

  min-height:
    94px;

  padding:
    13px;

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

  border-radius:
    var(
      --costos-radius-md
    );

  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  background:
    var(
      --costos-surface
    );

  box-shadow:
    var(
      --costos-shadow-sm
    );
}


.costos-productos-metric-card__icon {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

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

  border-radius:
    9px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(
      --costos-surface-2
    );

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


.costos-productos-metric-card__icon svg {
  width:
    17px;

  height:
    17px;

  stroke-width:
    2.1;
}


.costos-productos-metric-card__body {
  min-width:
    0;

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.costos-productos-metric-card__label {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px;

  line-height:
    1.25;

  font-weight:
    800;

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


.costos-productos-metric-card__value {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    20px;

  line-height:
    1.15;

  font-weight:
    850;

  letter-spacing:
    -0.03em;

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


.costos-productos-metric-card__hint {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10px;

  line-height:
    1.3;

  font-weight:
    650;

  color:
    var(
      --costos-muted-2
    );
}


.costos-productos-metrics-error {
  grid-column:
    1 /
    -1;

  min-height:
    64px;

  padding:
    14px;

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

  border-radius:
    var(
      --costos-radius-md
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  background:
    var(
      --costos-surface
    );

  color:
    var(
      --costos-muted
    );

  font-size:
    12px;

  font-weight:
    750;
}


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

.costos-productos-panel {
  width:
    100%;

  min-width:
    0;

  overflow:
    visible;

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

  border-radius:
    var(
      --costos-radius-lg
    );

  background:
    var(
      --costos-surface
    );

  box-shadow:
    var(
      --costos-shadow-sm
    );
}


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

.costos-productos-toolbar {
  min-width:
    0;

  padding:
    11px 12px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.costos-productos-toolbar__search {
  position:
    relative;

  flex:
    1 1 440px;

  min-width:
    220px;

  max-width:
    760px;
}


.costos-productos-toolbar__search >
svg {
  position:
    absolute;

  top:
    50%;

  left:
    11px;

  width:
    15px;

  height:
    15px;

  color:
    var(
      --costos-muted
    );

  transform:
    translateY(
      -50%
    );

  pointer-events:
    none;
}


.costos-productos-toolbar__search input {
  width:
    100%;

  min-height:
    37px;

  padding:
    8px 38px 8px 34px;

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

  border-radius:
    var(
      --costos-radius-sm
    );

  outline:
    none;

  background:
    var(
      --costos-surface-2
    );

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

  font-size:
    12px;

  font-weight:
    700;

  transition:
    border-color
      var(
        --costos-transition
      ),
    background
      var(
        --costos-transition
      );
}


.costos-productos-toolbar__search input::placeholder {
  color:
    var(
      --costos-muted-2
    );

  font-weight:
    650;
}


.costos-productos-toolbar__search input:focus {
  background:
    var(
      --costos-surface
    );

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


.costos-productos-toolbar__search-clear {
  position:
    absolute;

  top:
    50%;

  right:
    8px;

  width:
    26px;

  height:
    26px;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    transparent;

  color:
    var(
      --costos-muted
    );

  cursor:
    pointer;

  transform:
    translateY(
      -50%
    );
}


.costos-productos-toolbar__search-clear:hover {
  background:
    var(
      --costos-surface-3
    );

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


.costos-productos-toolbar__search-clear svg {
  width:
    14px;

  height:
    14px;
}


.costos-productos-toolbar__actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    4px;
}


.costos-productos-toolbar-menu {
  position:
    relative;
}


.costos-productos-toolbar__counter {
  min-width:
    18px;

  height:
    18px;

  padding:
    0 5px;

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  color:
    var(
      --costos-surface
    );

  font-size:
    9px;

  font-weight:
    850;
}


/* =========================================================
   POPOVERS
   ========================================================= */

.costos-productos-popover {
  position:
    absolute;

  top:
    calc(
      100% +
      8px
    );

  right:
    0;

  z-index:
    120;

  width:
    270px;

  max-height:
    min(
      520px,
      calc(
        100vh -
        150px
      )
    );

  overflow:
    auto;

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

  border-radius:
    var(
      --costos-radius-md
    );

  background:
    var(
      --costos-surface
    );

  box-shadow:
    var(
      --costos-shadow-md
    );
}


.costos-productos-popover[hidden] {
  display:
    none !important;
}


.costos-productos-popover__header {
  padding:
    11px 12px 9px;

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


.costos-productos-popover__header >
div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.costos-productos-popover__header strong {
  font-size:
    12px;

  font-weight:
    850;

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


.costos-productos-popover__header small {
  font-size:
    10px;

  line-height:
    1.35;

  font-weight:
    650;

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


.costos-productos-popover__footer {
  padding:
    9px 12px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


/* =========================================================
   EXPORT POPOVER
   ========================================================= */

.costos-productos-export-popover {
  width:
    300px;

  padding:
    6px;
}


.costos-productos-popover-action {
  width:
    100%;

  min-height:
    48px;

  padding:
    8px;

  border:
    0;

  border-radius:
    8px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  background:
    transparent;

  color:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

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


.costos-productos-popover-action:hover {
  background:
    var(
      --costos-surface-2
    );
}


.costos-productos-popover-action >
svg {
  width:
    17px;

  height:
    17px;

  flex:
    0 0 17px;

  margin-top:
    2px;

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


.costos-productos-popover-action >
span {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.costos-productos-popover-action strong {
  font-size:
    11px;

  font-weight:
    850;

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


.costos-productos-popover-action small {
  font-size:
    10px;

  line-height:
    1.35;

  font-weight:
    650;

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


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

.costos-productos-columns-list {
  padding:
    6px;
}


.costos-productos-column-option {
  min-height:
    34px;

  padding:
    6px 8px;

  border-radius:
    7px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  cursor:
    pointer;

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


.costos-productos-column-option:hover {
  background:
    var(
      --costos-surface-2
    );
}


.costos-productos-column-option.is-locked {
  cursor:
    default;
}


.costos-productos-column-option input {
  width:
    15px;

  height:
    15px;

  margin:
    0;

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


.costos-productos-column-option span {
  font-size:
    11px;

  font-weight:
    750;

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


/* =========================================================
   DENSITY
   ========================================================= */

.costos-productos-density-list {
  padding:
    6px;
}


.costos-productos-density-option {
  width:
    100%;

  padding:
    8px;

  border:
    0;

  border-radius:
    8px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    9px;

  background:
    transparent;

  color:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

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


.costos-productos-density-option:hover,
.costos-productos-density-option.is-active {
  background:
    var(
      --costos-surface-2
    );
}


.costos-productos-density-option__check {
  width:
    17px;

  height:
    17px;

  flex:
    0 0 17px;

  margin-top:
    1px;

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


.costos-productos-density-option__check svg {
  width:
    16px;

  height:
    16px;
}


.costos-productos-density-option__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.costos-productos-density-option__content strong {
  font-size:
    11px;

  font-weight:
    850;

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


.costos-productos-density-option__content small {
  font-size:
    10px;

  line-height:
    1.35;

  font-weight:
    650;

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


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

.costos-productos-filters {
  padding:
    12px;

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

  background:
    var(
      --costos-surface-2
    );
}


.costos-productos-filters[hidden] {
  display:
    none !important;
}


.costos-productos-filters__grid {
  display:
    grid;

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

  gap:
    10px;
}


.costos-productos-filters__footer {
  margin-top:
    10px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;
}


/* =========================================================
   FIELDS
   ========================================================= */

.costos-productos-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


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


.costos-productos-field__label {
  font-size:
    10px;

  line-height:
    1.2;

  font-weight:
    850;

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


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

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

  border-radius:
    var(
      --costos-radius-sm
    );

  outline:
    none;

  background:
    var(
      --costos-surface
    );

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

  font-size:
    12px;

  font-weight:
    700;

  transition:
    border-color
      var(
        --costos-transition
      ),
    background
      var(
        --costos-transition
      );
}


.costos-productos-field input,
.costos-productos-field select {
  min-height:
    36px;

  padding:
    7px 9px;
}


.costos-productos-field textarea {
  min-height:
    96px;

  padding:
    9px;

  resize:
    vertical;

  line-height:
    1.45;
}


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

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


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

.costos-productos-bulk-bar {
  min-height:
    50px;

  padding:
    7px 12px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  background:
    var(
      --costos-surface-2
    );
}


.costos-productos-bulk-bar[hidden] {
  display:
    none !important;
}


.costos-productos-bulk-bar__left {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.costos-productos-bulk-bar__icon {
  width:
    30px;

  height:
    30px;

  flex:
    0 0 30px;

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

  border-radius:
    8px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(
      --costos-surface
    );

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


.costos-productos-bulk-bar__icon svg {
  width:
    15px;

  height:
    15px;
}


.costos-productos-bulk-bar__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.costos-productos-bulk-bar__content strong {
  font-size:
    11px;

  font-weight:
    850;

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


.costos-productos-bulk-bar__content small {
  font-size:
    10px;

  font-weight:
    650;

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


.costos-productos-bulk-bar__actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    6px;
}


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

.costos-productos-table-header {
  min-height:
    42px;

  padding:
    7px 12px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.costos-productos-table-header__left,
.costos-productos-table-header__right {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;
}


.costos-productos-results-text {
  font-size:
    11px;

  font-weight:
    750;

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


.costos-productos-limit {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  font-size:
    10px;

  font-weight:
    750;

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


.costos-productos-limit select {
  min-width:
    66px;

  min-height:
    30px;

  padding:
    4px 7px;

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

  border-radius:
    7px;

  outline:
    none;

  background:
    var(
      --costos-surface
    );

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

  font-size:
    11px;

  font-weight:
    750;
}


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

.costos-productos-table-container {
  width:
    100%;

  min-width:
    0;

  overflow:
    hidden;
}


.costos-productos-table-scroll {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    visible;

  scrollbar-width:
    thin;
}


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

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

  min-width:
    1080px;

  border-collapse:
    separate;

  border-spacing:
    0;

  table-layout:
    auto;

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


.costos-productos-table__th {
  position:
    sticky;

  top:
    0;

  z-index:
    3;

  padding:
    9px 10px;

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

  background:
    var(
      --costos-surface-2
    );

  color:
    var(
      --costos-muted
    );

  font-size:
    10px;

  line-height:
    1.2;

  font-weight:
    850;

  text-align:
    left;

  white-space:
    nowrap;
}


.costos-productos-table__th--selection {
  width:
    42px;

  min-width:
    42px;

  text-align:
    center;
}


.costos-productos-table__th--image {
  width:
    54px;

  min-width:
    54px;
}


.costos-productos-table__th--product {
  min-width:
    250px;
}


.costos-productos-table__th--money {
  min-width:
    150px;

  text-align:
    right;
}


.costos-productos-table__th--actions {
  width:
    82px;

  text-align:
    center;
}


.costos-productos-table__td {
  padding:
    10px;

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

  color:
    var(
      --costos-text
    );

  font-size:
    11px;

  line-height:
    1.3;

  font-weight:
    700;

  vertical-align:
    middle;

  background:
    var(
      --costos-surface
    );

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


.costos-productos-table__row:hover
.costos-productos-table__td {
  background:
    var(
      --costos-surface-2
    );
}


.costos-productos-table__row.is-selected
.costos-productos-table__td {
  background:
    var(
      --costos-surface-3
    );
}


.costos-productos-table__td--selection {
  text-align:
    center;
}


.costos-productos-table__td--selection input,
#costosProductosSelectAll {
  width:
    15px;

  height:
    15px;

  margin:
    0;

  accent-color:
    var(
      --costos-primary
    );

  cursor:
    pointer;
}


.costos-productos-table__td--image {
  width:
    54px;
}


.costos-productos-table__td--money {
  text-align:
    right;

  white-space:
    nowrap;
}


.costos-productos-table__td--actions {
  text-align:
    center;
}


/* =========================================================
   DENSITY
   ========================================================= */

.costos-productos-density-compact
.costos-productos-table__td {
  padding-top:
    7px;

  padding-bottom:
    7px;
}


.costos-productos-density-compact
.costos-productos-table__th {
  padding-top:
    7px;

  padding-bottom:
    7px;
}


.costos-productos-density-normal
.costos-productos-table__td {
  padding-top:
    10px;

  padding-bottom:
    10px;
}


.costos-productos-density-comfortable
.costos-productos-table__td {
  padding-top:
    14px;

  padding-bottom:
    14px;
}


/* =========================================================
   FIN PARTE 1 DE 3
   ========================================================= *//* =========================================================
   UBICACIÓN:
   frontend/src/pages/recursos/costos-productos/
   costos-productos.css

   PARTE 2 DE 3
   ========================================================= */


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

.costos-productos-product-image {
  width:
    34px;

  height:
    34px;

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

  border-radius:
    9px;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(
      --costos-surface-2
    );
}


.costos-productos-product-image img {
  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  display:
    block;

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


.costos-productos-product-image__fallback {
  width:
    100%;

  height:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(
      --costos-surface-2
    );

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

  font-size:
    11px;

  font-weight:
    850;
}


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

.costos-productos-product-cell {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.costos-productos-product-cell strong {
  max-width:
    360px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px;

  line-height:
    1.3;

  font-weight:
    850;

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


.costos-productos-product-cell small {
  max-width:
    360px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    9px;

  line-height:
    1.3;

  font-weight:
    650;

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


/* =========================================================
   CODES
   ========================================================= */

.costos-productos-code {
  display:
    inline-block;

  max-width:
    170px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10px;

  line-height:
    1.2;

  font-weight:
    800;

  color:
    var(
      --costos-text
    );

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   CATEGORY
   ========================================================= */

.costos-productos-category {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    22px;

  padding:
    3px 7px;

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

  border-radius:
    999px;

  background:
    var(
      --costos-surface-2
    );

  color:
    var(
      --costos-text
    );

  font-size:
    9px;

  font-weight:
    800;

  white-space:
    nowrap;
}


/* =========================================================
   INLINE COST
   ========================================================= */

.costos-productos-inline-cost {
  min-width:
    112px;

  min-height:
    31px;

  padding:
    6px 9px;

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

  border-radius:
    8px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;

  background:
    var(
      --costos-surface
    );

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

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    850;

  font-variant-numeric:
    tabular-nums;

  white-space:
    nowrap;

  cursor:
    pointer;

  transition:
    background
      var(
        --costos-transition
      ),
    border-color
      var(
        --costos-transition
      ),
    color
      var(
        --costos-transition
      );
}


.costos-productos-inline-cost:hover {
  background:
    var(
      --costos-surface-2
    );

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


.costos-productos-inline-cost.is-empty {
  color:
    var(
      --costos-muted
    );

  font-weight:
    750;
}


.costos-productos-inline-cost.is-empty svg {
  width:
    13px;

  height:
    13px;
}


.costos-productos-inline-cost.has-cost {
  color:
    var(
      --costos-text-strong
    );
}


/* =========================================================
   CURRENCY
   ========================================================= */

.costos-productos-currency-badge {
  min-height:
    21px;

  padding:
    3px 7px;

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

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(
      --costos-surface-2
    );

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

  font-size:
    9px;

  font-weight:
    850;
}


/* =========================================================
   MUTED
   ========================================================= */

.costos-productos-muted {
  color:
    var(
      --costos-muted
    );

  font-weight:
    650;
}


/* =========================================================
   DATE / USER
   ========================================================= */

.costos-productos-date,
.costos-productos-user {
  font-size:
    10px;

  font-weight:
    700;

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


.costos-productos-user {
  max-width:
    180px;

  display:
    inline-block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   BADGES
   ========================================================= */

.costos-productos-badge {
  min-height:
    22px;

  padding:
    3px 7px;

  border:
    1px solid transparent;

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    850;

  white-space:
    nowrap;
}


.costos-productos-badge svg {
  width:
    12px;

  height:
    12px;

  stroke-width:
    2.2;
}


.costos-productos-badge--success {
  background:
    rgba(
      11,
      110,
      71,
      0.09
    );

  color:
    var(
      --costos-success
    );

  border-color:
    rgba(
      11,
      110,
      71,
      0.17
    );
}


.costos-productos-badge--pending {
  background:
    rgba(
      167,
      97,
      8,
      0.09
    );

  color:
    var(
      --costos-warning
    );

  border-color:
    rgba(
      167,
      97,
      8,
      0.17
    );
}


.costos-productos-badge--error {
  background:
    rgba(
      201,
      52,
      44,
      0.09
    );

  color:
    var(
      --costos-danger
    );

  border-color:
    rgba(
      201,
      52,
      44,
      0.17
    );
}


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

.costos-productos-row-actions {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    3px;
}


.costos-productos-row-action {
  width:
    30px;

  height:
    30px;

  padding:
    0;

  border:
    0;

  border-radius:
    8px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    transparent;

  color:
    var(
      --costos-muted
    );

  cursor:
    pointer;

  transition:
    background
      var(
        --costos-transition
      ),
    color
      var(
        --costos-transition
      );
}


.costos-productos-row-action:hover {
  background:
    var(
      --costos-surface-3
    );

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


.costos-productos-row-action svg {
  width:
    15px;

  height:
    15px;

  stroke-width:
    2.1;
}


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

.costos-productos-table-loading {
  width:
    100%;

  padding:
    6px 0;
}


.costos-productos-table-loading__row {
  min-height:
    48px;

  padding:
    8px 12px;

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

  display:
    grid;

  grid-template-columns:
    42px
    54px
    130px
    130px
    minmax(
      220px,
      1.4fr
    )
    130px;

  align-items:
    center;

  gap:
    14px;
}


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

.costos-productos-skeleton {
  position:
    relative;

  overflow:
    hidden;

  height:
    10px;

  border-radius:
    999px;

  background:
    var(
      --costos-surface-3
    );
}


.costos-productos-skeleton::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  transform:
    translateX(
      -100%
    );

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        255,
        255,
        0.38
      ),
      transparent
    );

  animation:
    costosProductosSkeleton
    1.35s
    infinite;
}


.costos-productos-skeleton--icon {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  border-radius:
    9px;
}


.costos-productos-skeleton--label {
  width:
    52%;

  height:
    8px;
}


.costos-productos-skeleton--value {
  width:
    78%;

  height:
    17px;
}


.costos-productos-skeleton--editor-title {
  width:
    46%;

  height:
    18px;
}


.costos-productos-skeleton--editor-line {
  width:
    100%;

  height:
    42px;

  border-radius:
    9px;
}


@keyframes costosProductosSkeleton {
  100% {
    transform:
      translateX(
        100%
      );
  }
}


/* =========================================================
   SPINNER
   ========================================================= */

.is-spinning {
  animation:
    costosProductosSpin
    0.85s
    linear
    infinite;
}


@keyframes costosProductosSpin {
  to {
    transform:
      rotate(
        360deg
      );
  }
}


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

.costos-productos-empty-state {
  min-height:
    260px;

  padding:
    34px 20px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  text-align:
    center;
}


.costos-productos-empty-state__icon {
  width:
    42px;

  height:
    42px;

  margin-bottom:
    4px;

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

  border-radius:
    12px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(
      --costos-surface-2
    );

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


.costos-productos-empty-state__icon svg {
  width:
    20px;

  height:
    20px;
}


.costos-productos-empty-state h3 {
  margin:
    0;

  font-size:
    14px;

  font-weight:
    850;

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


.costos-productos-empty-state p {
  max-width:
    520px;

  margin:
    0;

  font-size:
    11px;

  line-height:
    1.5;

  font-weight:
    650;

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


.costos-productos-empty-state__actions {
  margin-top:
    6px;

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;
}


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

.costos-productos-pagination {
  min-height:
    52px;

  padding:
    9px 12px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.costos-productos-pagination:empty {
  display:
    none;
}


.costos-productos-pagination__pages {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    3px;
}


.costos-productos-pagination__button {
  min-width:
    31px;

  height:
    31px;

  padding:
    0 8px;

  border:
    1px solid transparent;

  border-radius:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  background:
    transparent;

  color:
    var(
      --costos-muted
    );

  font-size:
    10px;

  font-weight:
    850;

  cursor:
    pointer;
}


.costos-productos-pagination__button:hover:not(:disabled) {
  background:
    var(
      --costos-surface-2
    );

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


.costos-productos-pagination__button.is-active {
  background:
    var(
      --costos-text-strong
    );

  color:
    var(
      --costos-surface
    );
}


.costos-productos-pagination__button:disabled {
  opacity:
    0.35;

  cursor:
    not-allowed;
}


.costos-productos-pagination__button svg {
  width:
    13px;

  height:
    13px;
}


.costos-productos-pagination__button--nav {
  min-width:
    86px;
}


.costos-productos-pagination__ellipsis {
  min-width:
    24px;

  text-align:
    center;

  color:
    var(
      --costos-muted
    );

  font-size:
    11px;

  font-weight:
    750;
}


/* =========================================================
   NOTIFICATION
   ========================================================= */

.costos-productos-notification {
  position:
    fixed;

  top:
    76px;

  right:
    22px;

  z-index:
    700;

  width:
    min(
      390px,
      calc(
        100vw -
        32px
      )
    );

  min-height:
    48px;

  padding:
    10px;

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

  border-radius:
    var(
      --costos-radius-md
    );

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  background:
    var(
      --costos-surface
    );

  color:
    var(
      --costos-text
    );

  box-shadow:
    var(
      --costos-shadow-lg
    );

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(
      -8px
    );

  transition:
    opacity
      var(
        --costos-transition
      ),
    transform
      var(
        --costos-transition
      ),
    visibility
      var(
        --costos-transition
      );
}


.costos-productos-notification.is-visible {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(
      0
    );
}


.costos-productos-notification__icon {
  width:
    28px;

  height:
    28px;

  flex:
    0 0 28px;

  border-radius:
    8px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(
      --costos-surface-2
    );
}


.costos-productos-notification__icon svg {
  width:
    16px;

  height:
    16px;
}


.costos-productos-notification__message {
  min-width:
    0;

  flex:
    1;

  font-size:
    11px;

  line-height:
    1.4;

  font-weight:
    750;
}


.costos-productos-notification__close {
  width:
    26px;

  height:
    26px;

  flex:
    0 0 26px;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    transparent;

  color:
    var(
      --costos-muted
    );

  cursor:
    pointer;
}


.costos-productos-notification__close:hover {
  background:
    var(
      --costos-surface-2
    );

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


.costos-productos-notification__close svg {
  width:
    14px;

  height:
    14px;
}


.costos-productos-notification--success
.costos-productos-notification__icon {
  color:
    var(
      --costos-success
    );

  background:
    rgba(
      11,
      110,
      71,
      0.09
    );
}


.costos-productos-notification--error
.costos-productos-notification__icon {
  color:
    var(
      --costos-danger
    );

  background:
    rgba(
      201,
      52,
      44,
      0.09
    );
}


.costos-productos-notification--warning
.costos-productos-notification__icon {
  color:
    var(
      --costos-warning
    );

  background:
    rgba(
      167,
      97,
      8,
      0.09
    );
}


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

.costos-productos-overlay {
  position:
    fixed;

  top:
    52px;

  right:
    0;

  bottom:
    0;

  left:
    0;

  z-index:
    300;

  height:
    calc(
      100dvh -
      52px
    );

  background:
    rgba(
      12,
      14,
      18,
      0.46
    );

  backdrop-filter:
    blur(
      2px
    );

  opacity:
    0;

  visibility:
    hidden;

  transition:
    opacity
      var(
        --costos-transition
      ),
    visibility
      var(
        --costos-transition
      );
}


.costos-productos-overlay.is-visible {
  opacity:
    1;

  visibility:
    visible;
}


.costos-productos-overlay[hidden] {
  display:
    none !important;
}


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

.costos-productos-modal {
  position:
    fixed;

  top:
    66px;

  right:
    16px;

  bottom:
    16px;

  left:
    16px;

  z-index:
    320;

  width:
    min(
      calc(
        100vw -
        32px
      ),
      980px
    );

  height:
    auto;

  max-height:
    calc(
      100dvh -
      82px
    );

  margin:
    0 auto;

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

  border-radius:
    var(
      --costos-radius-xl
    );

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  background:
    var(
      --costos-surface
    );

  color:
    var(
      --costos-text
    );

  box-shadow:
    var(
      --costos-shadow-lg
    );

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(
      10px
    )
    scale(
      0.992
    );

  transition:
    opacity
      var(
        --costos-transition
      ),
    visibility
      var(
        --costos-transition
      ),
    transform
      var(
        --costos-transition
      );
}


.costos-productos-modal.is-open {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(
      0
    )
    scale(
      1
    );
}


.costos-productos-modal__header {
  min-height:
    74px;

  padding:
    14px 16px;

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

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;

  background:
    var(
      --costos-surface
    );

  flex:
    0 0 auto;
}


.costos-productos-modal__heading {
  min-width:
    0;

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.costos-productos-modal__eyebrow {
  font-size:
    9px;

  line-height:
    1;

  font-weight:
    850;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

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


.costos-productos-modal__heading h2 {
  margin:
    0;

  font-size:
    19px;

  line-height:
    1.2;

  font-weight:
    850;

  letter-spacing:
    -0.025em;

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


.costos-productos-modal__heading p {
  margin:
    0;

  font-size:
    10px;

  line-height:
    1.4;

  font-weight:
    650;

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


.costos-productos-modal__close {
  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

  padding:
    0;

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

  border-radius:
    9px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(
      --costos-surface
    );

  color:
    var(
      --costos-muted
    );

  cursor:
    pointer;

  transition:
    background
      var(
        --costos-transition
      ),
    color
      var(
        --costos-transition
      ),
    border-color
      var(
        --costos-transition
      );
}


.costos-productos-modal__close:hover {
  background:
    var(
      --costos-surface-2
    );

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

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


.costos-productos-modal__close svg {
  width:
    16px;

  height:
    16px;
}


.costos-productos-modal__body {
  min-width:
    0;

  min-height:
    0;

  flex:
    1;

  padding:
    14px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;
}


.costos-productos-modal__footer {
  min-height:
    62px;

  padding:
    10px 14px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  background:
    var(
      --costos-surface
    );

  flex:
    0 0 auto;
}


.costos-productos-modal__footer-info {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  font-size:
    10px;

  line-height:
    1.35;

  font-weight:
    700;

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


.costos-productos-modal__footer-info svg {
  width:
    14px;

  height:
    14px;

  flex:
    0 0 14px;
}


.costos-productos-modal__footer-actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;
}


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

.costos-productos-editor-product {
  padding:
    12px;

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

  border-radius:
    var(
      --costos-radius-md
    );

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  background:
    var(
      --costos-surface-2
    );
}


.costos-productos-editor-product__image {
  width:
    70px;

  height:
    70px;

  flex:
    0 0 70px;

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

  border-radius:
    12px;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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


.costos-productos-editor-product__image img {
  width:
    100%;

  height:
    100%;

  object-fit:
    contain;
}


.costos-productos-editor-product__fallback {
  width:
    100%;

  height:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

  font-size:
    22px;

  font-weight:
    850;
}


.costos-productos-editor-product__content {
  min-width:
    0;

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.costos-productos-editor-product__content >
span {
  font-size:
    9px;

  font-weight:
    850;

  text-transform:
    uppercase;

  letter-spacing:
    0.06em;

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


.costos-productos-editor-product__content h3 {
  margin:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    15px;

  line-height:
    1.3;

  font-weight:
    850;

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


.costos-productos-editor-product__meta {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px 12px;
}


.costos-productos-editor-product__meta >
span {
  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  font-size:
    9px;

  font-weight:
    700;

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


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

  font-weight:
    850;
}


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

.costos-productos-editor-section {
  padding:
    13px;

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

  border-radius:
    var(
      --costos-radius-md
    );

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


.costos-productos-editor-section__header {
  margin-bottom:
    12px;
}


.costos-productos-editor-section__header h3 {
  margin:
    0;

  font-size:
    12px;

  font-weight:
    850;

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


.costos-productos-editor-section__header p {
  margin:
    3px 0 0;

  font-size:
    10px;

  line-height:
    1.4;

  font-weight:
    650;

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


.costos-productos-editor-grid {
  display:
    grid;

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

  gap:
    12px;
}


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

.costos-productos-money-field {
  position:
    relative;

  min-width:
    0;
}


.costos-productos-money-field__prefix {
  position:
    absolute;

  top:
    50%;

  left:
    10px;

  z-index:
    2;

  transform:
    translateY(
      -50%
    );

  color:
    var(
      --costos-muted
    );

  font-size:
    11px;

  font-weight:
    850;

  pointer-events:
    none;
}


.costos-productos-money-field input {
  padding-left:
    42px;
}


/* =========================================================
   EDITOR META
   ========================================================= */

.costos-productos-editor-meta {
  display:
    grid;

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

  gap:
    8px;
}


.costos-productos-editor-meta__item {
  min-width:
    0;

  padding:
    10px;

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

  border-radius:
    var(
      --costos-radius-sm
    );

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  background:
    var(
      --costos-surface-2
    );
}


.costos-productos-editor-meta__item span {
  font-size:
    9px;

  font-weight:
    750;

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


.costos-productos-editor-meta__item strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px;

  font-weight:
    850;

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


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

.costos-productos-editor-loading {
  min-height:
    220px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    14px;
}


/* =========================================================
   FIN PARTE 2 DE 3
   ========================================================= *//* =========================================================
   UBICACIÓN:
   frontend/src/pages/recursos/costos-productos/
   costos-productos.css

   PARTE 3 DE 3
   ========================================================= */


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

.costos-productos-bulk-editor {
  width:
    min(
      calc(
        100vw -
        32px
      ),
      1180px
    );
}


.costos-productos-bulk-summary {
  display:
    grid;

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

  gap:
    8px;
}


.costos-productos-bulk-summary__item {
  min-width:
    0;

  padding:
    11px;

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

  border-radius:
    var(
      --costos-radius-md
    );

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  background:
    var(
      --costos-surface-2
    );
}


.costos-productos-bulk-summary__item span {
  font-size:
    9px;

  font-weight:
    800;

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


.costos-productos-bulk-summary__item strong {
  font-size:
    16px;

  line-height:
    1.2;

  font-weight:
    850;

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


.costos-productos-bulk-tools {
  padding:
    11px;

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

  border-radius:
    var(
      --costos-radius-md
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

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


.costos-productos-bulk-tools__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.costos-productos-bulk-tools__content strong {
  font-size:
    11px;

  font-weight:
    850;

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


.costos-productos-bulk-tools__content small {
  font-size:
    9px;

  line-height:
    1.35;

  font-weight:
    650;

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


.costos-productos-bulk-tools__controls {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;
}


.costos-productos-bulk-tools__controls input,
.costos-productos-bulk-tools__controls select {
  height:
    34px;

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

  border-radius:
    8px;

  outline:
    none;

  background:
    var(
      --costos-surface
    );

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

  font-size:
    11px;

  font-weight:
    750;
}


.costos-productos-bulk-tools__controls input {
  width:
    140px;

  padding:
    6px 9px;
}


.costos-productos-bulk-tools__controls select {
  min-width:
    76px;

  padding:
    6px 8px;
}


.costos-productos-bulk-table-scroll {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

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

  border-radius:
    var(
      --costos-radius-md
    );

  scrollbar-width:
    thin;
}


.costos-productos-bulk-table {
  width:
    100%;

  min-width:
    850px;

  border-collapse:
    collapse;

  table-layout:
    auto;

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


.costos-productos-bulk-table th {
  padding:
    8px 9px;

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

  background:
    var(
      --costos-surface-2
    );

  color:
    var(
      --costos-muted
    );

  font-size:
    9px;

  font-weight:
    850;

  text-align:
    left;

  white-space:
    nowrap;
}


.costos-productos-bulk-table td {
  padding:
    8px 9px;

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

  color:
    var(
      --costos-text
    );

  font-size:
    10px;

  font-weight:
    700;

  vertical-align:
    middle;
}


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


.costos-productos-bulk-product {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.costos-productos-bulk-product strong {
  max-width:
    320px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10px;

  font-weight:
    850;

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


.costos-productos-bulk-product small {
  max-width:
    320px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    9px;

  font-weight:
    650;

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


.costos-productos-bulk-cost-input,
.costos-productos-bulk-currency-select {
  width:
    100%;

  min-height:
    32px;

  padding:
    5px 7px;

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

  border-radius:
    7px;

  outline:
    none;

  background:
    var(
      --costos-surface
    );

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

  font-size:
    10px;

  font-weight:
    750;
}


.costos-productos-bulk-cost-input:focus,
.costos-productos-bulk-currency-select:focus {
  border-color:
    var(
      --costos-border-strong
    );
}


/* =========================================================
   IMPORT MODAL
   ========================================================= */

.costos-productos-import-modal {
  width:
    min(
      calc(
        100vw -
        32px
      ),
      760px
    );
}


.costos-productos-import-info {
  padding:
    12px;

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

  border-radius:
    var(
      --costos-radius-md
    );

  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  background:
    var(
      --costos-surface-2
    );
}


.costos-productos-import-info__icon {
  width:
    36px;

  height:
    36px;

  flex:
    0 0 36px;

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

  border-radius:
    9px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(
      --costos-surface
    );

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


.costos-productos-import-info__icon svg {
  width:
    18px;

  height:
    18px;
}


.costos-productos-import-info__content {
  min-width:
    0;

  flex:
    1;
}


.costos-productos-import-info__content >
strong {
  display:
    block;

  margin-bottom:
    3px;

  font-size:
    11px;

  font-weight:
    850;

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


.costos-productos-import-info__content >
p {
  margin:
    0;

  font-size:
    10px;

  line-height:
    1.4;

  font-weight:
    650;

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


.costos-productos-import-columns {
  margin-top:
    8px;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;
}


.costos-productos-import-columns span {
  padding:
    3px 6px;

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

  border-radius:
    6px;

  background:
    var(
      --costos-surface
    );

  color:
    var(
      --costos-text
    );

  font-size:
    9px;

  font-weight:
    800;
}


.costos-productos-import-dropzone {
  min-height:
    180px;

  padding:
    24px;

  border:
    1px dashed var(
      --costos-border-strong
    );

  border-radius:
    var(
      --costos-radius-lg
    );

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  background:
    var(
      --costos-surface-2
    );

  text-align:
    center;

  cursor:
    pointer;

  transition:
    background
      var(
        --costos-transition
      ),
    border-color
      var(
        --costos-transition
      );
}


.costos-productos-import-dropzone:hover {
  background:
    var(
      --costos-surface-3
    );

  border-color:
    var(
      --costos-text-strong
    );
}


.costos-productos-import-dropzone__icon {
  width:
    44px;

  height:
    44px;

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

  border-radius:
    12px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(
      --costos-surface
    );

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


.costos-productos-import-dropzone__icon svg {
  width:
    21px;

  height:
    21px;
}


.costos-productos-import-dropzone__content {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.costos-productos-import-dropzone__content strong {
  font-size:
    12px;

  font-weight:
    850;

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


.costos-productos-import-dropzone__content span {
  font-size:
    10px;

  font-weight:
    650;

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


.costos-productos-import-dropzone__file {
  max-width:
    100%;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10px;

  font-weight:
    800;

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


.costos-productos-import-actions-inline {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  flex-wrap:
    wrap;

  gap:
    8px;
}


/* =========================================================
   DRAWER
   ========================================================= */

.costos-productos-drawer {
  position:
    fixed;

  top:
    52px;

  right:
    0;

  bottom:
    0;

  z-index:
    320;

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

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

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

  background:
    var(
      --costos-surface
    );

  color:
    var(
      --costos-text
    );

  box-shadow:
    -24px 0 60px rgba(
      15,
      23,
      42,
      0.14
    );

  transform:
    translateX(
      105%
    );

  transition:
    transform
      220ms cubic-bezier(
        0.22,
        1,
        0.36,
        1
      );

  overflow:
    hidden;
}


.costos-productos-drawer.is-open {
  transform:
    translateX(
      0
    );
}


.costos-productos-drawer__header {
  min-height:
    74px;

  padding:
    14px 16px;

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

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;

  background:
    var(
      --costos-surface
    );

  flex:
    0 0 auto;
}


.costos-productos-drawer__heading,
.costos-productos-drawer__header >
div:first-child {
  min-width:
    0;

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.costos-productos-drawer__eyebrow {
  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

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


.costos-productos-drawer__header h2 {
  margin:
    0;

  max-width:
    100%;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    18px;

  line-height:
    1.2;

  font-weight:
    850;

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


.costos-productos-drawer__header p {
  margin:
    0;

  max-width:
    100%;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10px;

  font-weight:
    650;

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


.costos-productos-drawer__header-actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}


.costos-productos-drawer__close {
  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

  padding:
    0;

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

  border-radius:
    9px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(
      --costos-surface
    );

  color:
    var(
      --costos-muted
    );

  cursor:
    pointer;
}


.costos-productos-drawer__close:hover {
  background:
    var(
      --costos-surface-2
    );

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

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


.costos-productos-drawer__close svg {
  width:
    16px;

  height:
    16px;
}


.costos-productos-drawer__body {
  min-width:
    0;

  min-height:
    0;

  flex:
    1;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  padding:
    14px;

  scrollbar-width:
    thin;

  overscroll-behavior:
    contain;
}


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

.costos-productos-history-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


.costos-productos-history-item {
  padding:
    11px;

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

  border-radius:
    var(
      --costos-radius-md
    );

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


.costos-productos-history-item__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;
}


.costos-productos-history-item__header >
div:first-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.costos-productos-history-item__header strong {
  font-size:
    10px;

  font-weight:
    850;

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


.costos-productos-history-item__header span {
  font-size:
    9px;

  font-weight:
    700;

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


.costos-productos-history-item__user {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  gap:
    5px;

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


.costos-productos-history-item__user svg {
  width:
    13px;

  height:
    13px;
}


.costos-productos-history-item__values {
  margin-top:
    10px;

  padding:
    9px;

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

  border-radius:
    var(
      --costos-radius-sm
    );

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  background:
    var(
      --costos-surface-2
    );
}


.costos-productos-history-item__values >
div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.costos-productos-history-item__values span {
  font-size:
    8px;

  font-weight:
    800;

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


.costos-productos-history-item__values strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px;

  font-weight:
    850;

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


.costos-productos-history-item__values >
svg {
  width:
    15px;

  height:
    15px;

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


.costos-productos-history-item__note {
  margin:
    8px 0 0;

  padding-top:
    8px;

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

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;

  font-size:
    9px;

  line-height:
    1.45;

  font-weight:
    650;

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


.costos-productos-history-loading {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


.costos-productos-history-loading__row {
  min-height:
    82px;

  padding:
    11px;

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

  border-radius:
    var(
      --costos-radius-md
    );

  display:
    grid;

  grid-template-columns:
    1fr
    0.6fr
    0.8fr;

  align-items:
    center;

  gap:
    12px;
}


/* =========================================================
   IMPORT HISTORY
   ========================================================= */

.costos-productos-import-history-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.costos-productos-import-history-item {
  width:
    100%;

  min-height:
    66px;

  padding:
    9px 10px;

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

  border-radius:
    var(
      --costos-radius-md
    );

  display:
    grid;

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

  align-items:
    center;

  gap:
    12px;

  background:
    var(
      --costos-surface
    );

  color:
    var(
      --costos-text
    );

  text-align:
    left;

  cursor:
    pointer;
}


.costos-productos-import-history-item:hover {
  background:
    var(
      --costos-surface-2
    );

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


.costos-productos-import-history-item__main {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.costos-productos-import-history-item__icon {
  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

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

  border-radius:
    8px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(
      --costos-surface-2
    );

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


.costos-productos-import-history-item__icon svg {
  width:
    15px;

  height:
    15px;
}


.costos-productos-import-history-item__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.costos-productos-import-history-item__content strong {
  max-width:
    300px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10px;

  font-weight:
    850;

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


.costos-productos-import-history-item__content span {
  font-size:
    9px;

  font-weight:
    650;

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


.costos-productos-import-history-item__stats {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    2px;

  font-size:
    9px;

  font-weight:
    700;

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


.costos-productos-import-history-item__status {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}


.costos-productos-import-history-item__status >
svg {
  width:
    14px;

  height:
    14px;

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


/* =========================================================
   IMPORT DETAIL
   ========================================================= */

.costos-productos-import-detail-summary {
  margin-bottom:
    10px;

  display:
    grid;

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

  gap:
    7px;
}


.costos-productos-import-detail-summary >
div {
  padding:
    9px;

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

  border-radius:
    var(
      --costos-radius-sm
    );

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  background:
    var(
      --costos-surface-2
    );
}


.costos-productos-import-detail-summary span {
  font-size:
    8px;

  font-weight:
    800;

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


.costos-productos-import-detail-summary strong {
  font-size:
    14px;

  font-weight:
    850;

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


.costos-productos-import-detail-table-scroll {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

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

  border-radius:
    var(
      --costos-radius-md
    );

  scrollbar-width:
    thin;
}


.costos-productos-import-detail-table {
  width:
    100%;

  min-width:
    860px;

  border-collapse:
    collapse;

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


.costos-productos-import-detail-table th {
  padding:
    8px;

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

  background:
    var(
      --costos-surface-2
    );

  color:
    var(
      --costos-muted
    );

  font-size:
    8px;

  font-weight:
    850;

  text-align:
    left;

  white-space:
    nowrap;
}


.costos-productos-import-detail-table td {
  padding:
    8px;

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

  color:
    var(
      --costos-text
    );

  font-size:
    9px;

  font-weight:
    700;

  vertical-align:
    middle;
}


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


.costos-productos-import-detail-empty {
  padding:
    28px !important;

  text-align:
    center !important;

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


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

html[data-theme="dark"]
#costosProductosPage,
body[data-theme="dark"]
#costosProductosPage,
html.dark
#costosProductosPage,
body.dark
#costosProductosPage {
  --costos-bg:
    #080808;

  --costos-surface:
    #0d0d0d;

  --costos-surface-2:
    #121212;

  --costos-surface-3:
    #181818;

  --costos-border:
    #242424;

  --costos-border-strong:
    #383838;

  --costos-text:
    #ececec;

  --costos-text-strong:
    #ffffff;

  --costos-muted:
    #b7b7b7;

  --costos-muted-2:
    #8f8f8f;

  --costos-primary:
    #f2f2f2;

  --costos-primary-contrast:
    #080808;

  --costos-shadow-sm:
    0 1px 2px rgba(
      0,
      0,
      0,
      0.28
    );

  --costos-shadow-md:
    0 16px 42px rgba(
      0,
      0,
      0,
      0.42
    );

  --costos-shadow-lg:
    0 26px 70px rgba(
      0,
      0,
      0,
      0.58
    );
}


html[data-theme="dark"]
.costos-productos-table__th,
body[data-theme="dark"]
.costos-productos-table__th,
html.dark
.costos-productos-table__th,
body.dark
.costos-productos-table__th {
  background:
    #111111;
}


html[data-theme="dark"]
.costos-productos-table__td,
body[data-theme="dark"]
.costos-productos-table__td,
html.dark
.costos-productos-table__td,
body.dark
.costos-productos-table__td {
  background:
    #0d0d0d;
}


html[data-theme="dark"]
.costos-productos-table__row:hover
.costos-productos-table__td,
body[data-theme="dark"]
.costos-productos-table__row:hover
.costos-productos-table__td,
html.dark
.costos-productos-table__row:hover
.costos-productos-table__td,
body.dark
.costos-productos-table__row:hover
.costos-productos-table__td {
  background:
    #141414;
}


html[data-theme="dark"]
.costos-productos-table__row.is-selected
.costos-productos-table__td,
body[data-theme="dark"]
.costos-productos-table__row.is-selected
.costos-productos-table__td,
html.dark
.costos-productos-table__row.is-selected
.costos-productos-table__td,
body.dark
.costos-productos-table__row.is-selected
.costos-productos-table__td {
  background:
    #171717;
}


html[data-theme="dark"]
.costos-productos-product-image img,
body[data-theme="dark"]
.costos-productos-product-image img,
html.dark
.costos-productos-product-image img,
body.dark
.costos-productos-product-image img {
  background:
    #ffffff;
}


html[data-theme="dark"]
.costos-productos-import-dropzone,
body[data-theme="dark"]
.costos-productos-import-dropzone,
html.dark
.costos-productos-import-dropzone,
body.dark
.costos-productos-import-dropzone {
  background:
    #111111;
}


html[data-theme="dark"]
.costos-productos-import-dropzone:hover,
body[data-theme="dark"]
.costos-productos-import-dropzone:hover,
html.dark
.costos-productos-import-dropzone:hover,
body.dark
.costos-productos-import-dropzone:hover {
  background:
    #161616;
}


/* =========================================================
   TOPBAR ABOVE OVERLAYS
   ========================================================= */

.app-topbar,
.topbar,
#topbar {
  position:
    relative;

  z-index:
    800 !important;
}


/* =========================================================
   APP CONTENT WIDTH
   ========================================================= */

.app-content:has(
  #costosProductosPage
) {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  overflow-x:
    hidden;
}


.app-main:has(
  #costosProductosPage
) {
  min-width:
    0;
}


.app-shell:has(
  #costosProductosPage
) {
  min-width:
    0;

  overflow-x:
    hidden;
}


/* =========================================================
   LARGE
   ========================================================= */

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


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


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

@media (
  max-width:
    980px
) {
  .costos-productos-page__title-row {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .costos-productos-page__actions {
    justify-content:
      flex-start;
  }


  .costos-productos-toolbar {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .costos-productos-toolbar__search {
    width:
      100%;

    max-width:
      none;

    flex:
      none;
  }


  .costos-productos-toolbar__actions {
    justify-content:
      flex-start;

    flex-wrap:
      wrap;
  }


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


  .costos-productos-bulk-tools {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .costos-productos-bulk-tools__controls {
    justify-content:
      flex-start;

    flex-wrap:
      wrap;
  }


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


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

@media (
  max-width:
    720px
) {
  #costosProductosPage {
    gap:
      11px;
  }


  .costos-productos-page__title {
    font-size:
      23px;
  }


  .costos-productos-page__subtitle {
    font-size:
      11px;
  }


  .costos-productos-page__actions {
    display:
      grid;

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

    width:
      100%;
  }


  .costos-productos-page__actions
  .costos-productos-button,
  .costos-productos-header-menu,
  .costos-productos-header-menu >
  .costos-productos-button {
    width:
      100%;
  }


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


  .costos-productos-metric-card {
    min-height:
      82px;

    padding:
      10px;
  }


  .costos-productos-toolbar,
  .costos-productos-filters,
  .costos-productos-table-header,
  .costos-productos-bulk-bar {
    padding-left:
      9px;

    padding-right:
      9px;
  }


  .costos-productos-toolbar__actions {
    display:
      grid;

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


  .costos-productos-toolbar__actions
  .costos-productos-button {
    width:
      100%;
  }


  .costos-productos-toolbar-menu {
    width:
      100%;
  }


  .costos-productos-popover {
    position:
      fixed;

    top:
      auto;

    right:
      10px;

    bottom:
      10px;

    left:
      10px;

    width:
      auto;

    max-height:
      min(
        65dvh,
        520px
      );
  }


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


  .costos-productos-filters__footer {
    flex-direction:
      column-reverse;

    align-items:
      stretch;
  }


  .costos-productos-filters__footer
  .costos-productos-button {
    width:
      100%;
  }


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

    flex-direction:
      column;
  }


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


  .costos-productos-bulk-bar__actions
  .costos-productos-button {
    flex:
      1;
  }


  .costos-productos-table-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .costos-productos-table-header__right {
    width:
      100%;

    justify-content:
      flex-end;
  }


  .costos-productos-pagination {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .costos-productos-pagination__pages {
    order:
      -1;

    max-width:
      100%;

    overflow-x:
      auto;

    justify-content:
      flex-start;

    padding-bottom:
      3px;
  }


  .costos-productos-pagination__button--nav {
    width:
      100%;
  }


  .costos-productos-overlay {
    top:
      48px;

    height:
      calc(
        100dvh -
        48px
      );
  }


  .costos-productos-modal {
    top:
      56px;

    right:
      8px;

    bottom:
      8px;

    left:
      8px;

    width:
      auto;

    max-height:
      calc(
        100dvh -
        64px
      );

    border-radius:
      14px;
  }


  .costos-productos-modal__header {
    min-height:
      0;

    padding:
      12px;
  }


  .costos-productos-modal__body {
    padding:
      10px;
  }


  .costos-productos-modal__footer {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .costos-productos-modal__footer-info {
    width:
      100%;
  }


  .costos-productos-modal__footer-actions {
    width:
      100%;

    display:
      grid;

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


  .costos-productos-modal__footer-actions
  .costos-productos-button {
    width:
      100%;
  }


  .costos-productos-editor-product {
    align-items:
      flex-start;
  }


  .costos-productos-editor-product__image {
    width:
      58px;

    height:
      58px;

    flex-basis:
      58px;
  }


  .costos-productos-editor-product__meta {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .costos-productos-editor-grid,
  .costos-productos-editor-meta {
    grid-template-columns:
      1fr;
  }


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


  .costos-productos-bulk-tools__controls {
    display:
      grid;

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


  .costos-productos-bulk-tools__controls input {
    width:
      100%;
  }


  .costos-productos-bulk-tools__controls
  .costos-productos-button {
    grid-column:
      1 /
      -1;

    width:
      100%;
  }


  .costos-productos-import-actions-inline {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .costos-productos-import-actions-inline
  .costos-productos-button {
    width:
      100%;
  }


  .costos-productos-drawer {
    top:
      48px;

    width:
      100%;

    height:
      calc(
        100dvh -
        48px
      );

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


  .costos-productos-import-history-item {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      auto;
  }


  .costos-productos-import-history-item__stats {
    display:
      none;
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (
  max-width:
    500px
) {
  .costos-productos-page__actions {
    grid-template-columns:
      1fr;
  }


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


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


  .costos-productos-metric-card {
    min-height:
      74px;
  }


  .costos-productos-metric-card__value {
    font-size:
      18px;
  }


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


  .costos-productos-history-item__header {
    flex-direction:
      column;
  }


  .costos-productos-history-item__user {
    width:
      100%;
  }


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


  .costos-productos-history-item__values >
svg {
    transform:
      rotate(
        90deg
      );

    justify-self:
      center;
  }


  .costos-productos-modal__footer-actions {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   VERY SMALL
   ========================================================= */

@media (
  max-width:
    380px
) {
  .costos-productos-page__title {
    font-size:
      21px;
  }


  .costos-productos-toolbar,
  .costos-productos-filters {
    padding-left:
      8px;

    padding-right:
      8px;
  }


  .costos-productos-import-dropzone {
    min-height:
      150px;

    padding:
      18px 12px;
  }
}


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

@media (
  prefers-reduced-motion:
    reduce
) {
  #costosProductosPage *,
  #costosProductosPage *::before,
  #costosProductosPage *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }


  .costos-productos-modal,
  .costos-productos-drawer,
  .costos-productos-overlay {
    transition:
      none !important;
  }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {
  .costos-productos-page__actions,
  .costos-productos-toolbar,
  .costos-productos-filters,
  .costos-productos-pagination,
  .costos-productos-row-actions,
  .costos-productos-notification,
  .costos-productos-overlay,
  .costos-productos-modal,
  .costos-productos-drawer,
  .costos-productos-bulk-bar {
    display:
      none !important;
  }


  #costosProductosPage {
    display:
      block;

    color:
      #000000;
  }


  .costos-productos-panel {
    border:
      0;

    box-shadow:
      none;
  }


  .costos-productos-table-container,
  .costos-productos-table-scroll {
    overflow:
      visible;
  }


  .costos-productos-table {
    min-width:
      0;

    font-size:
      9px;
  }


  .costos-productos-table__th,
  .costos-productos-table__td {
    padding:
      4px;

    color:
      #000000;

    background:
      #ffffff;

    border-color:
      #d7d7d7;
  }
}


/* =========================================================
   FIN DEL ARCHIVO
   frontend/src/pages/recursos/costos-productos/
   costos-productos.css
   ========================================================= */