/* =========================================================
   WIRTZ HUB · MERCADO LIBRE · DESCUENTOS MASIVOS
   FRONTEND CSS

   UBICACIÓN:
   frontend/src/pages/mercado-libre/descuentos/
   mercado-libre-descuentos.css

   PARTE 1 DE 3

   - Minimal premium.
   - Responsive.
   - Sin glow.
   - Negro real en modo oscuro.
   - Blanco real en modo claro.
   - Texto fuerte y legible.
   - Sin scroll horizontal de página.
   - Contenedor ancho.
   - Tablas compactas pero legibles.
   - Bordes finos visibles.
   ========================================================= */


/* =========================================================
   RESET LOCAL
   ========================================================= */

.ml-discounts-shell,
.ml-discounts-shell *,
.ml-discounts-shell *::before,
.ml-discounts-shell *::after,
.ml-discounts-modal-root,
.ml-discounts-modal-root *,
.ml-discounts-modal-root *::before,
.ml-discounts-modal-root *::after,
.ml-discounts-toast-root,
.ml-discounts-toast-root *,
.ml-discounts-toast-root *::before,
.ml-discounts-toast-root *::after {
  box-sizing: border-box;
}


/* =========================================================
   TOKENS
   ========================================================= */

:root {
  --ml-disc-bg:
    #f4f5f7;

  --ml-disc-surface:
    #ffffff;

  --ml-disc-surface-soft:
    #f8f9fb;

  --ml-disc-surface-muted:
    #f1f2f4;

  --ml-disc-border:
    #dfe2e7;

  --ml-disc-border-strong:
    #cfd4dc;

  --ml-disc-text:
    #111111;

  --ml-disc-text-strong:
    #050505;

  --ml-disc-text-soft:
    #444851;

  --ml-disc-text-muted:
    #686d76;

  --ml-disc-black:
    #090909;

  --ml-disc-black-soft:
    #171717;

  --ml-disc-white:
    #ffffff;

  --ml-disc-primary:
    #111111;

  --ml-disc-primary-hover:
    #000000;

  --ml-disc-danger:
    #c62828;

  --ml-disc-danger-bg:
    #fff2f2;

  --ml-disc-danger-border:
    #efb8b8;

  --ml-disc-success:
    #157347;

  --ml-disc-success-bg:
    #edf8f2;

  --ml-disc-success-border:
    #b9dfc9;

  --ml-disc-warning:
    #9a5b00;

  --ml-disc-warning-bg:
    #fff8e8;

  --ml-disc-warning-border:
    #ebd49b;

  --ml-disc-info:
    #165d9c;

  --ml-disc-info-bg:
    #eff6fd;

  --ml-disc-info-border:
    #bfd8f0;

  --ml-disc-shadow:
    0 8px 28px rgba(0, 0, 0, .055);

  --ml-disc-shadow-strong:
    0 18px 48px rgba(0, 0, 0, .12);

  --ml-disc-radius-xs:
    8px;

  --ml-disc-radius-sm:
    10px;

  --ml-disc-radius-md:
    14px;

  --ml-disc-radius-lg:
    18px;

  --ml-disc-transition:
    160ms ease;

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


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

html[data-theme="dark"],
body[data-theme="dark"],
html.dark,
body.dark,
[data-theme="dark"] {
  --ml-disc-bg:
    #000000;

  --ml-disc-surface:
    #090909;

  --ml-disc-surface-soft:
    #0d0d0d;

  --ml-disc-surface-muted:
    #121212;

  --ml-disc-border:
    #242424;

  --ml-disc-border-strong:
    #333333;

  --ml-disc-text:
    #f6f6f6;

  --ml-disc-text-strong:
    #ffffff;

  --ml-disc-text-soft:
    #d0d0d0;

  --ml-disc-text-muted:
    #a6a6a6;

  --ml-disc-black:
    #ffffff;

  --ml-disc-black-soft:
    #ededed;

  --ml-disc-white:
    #000000;

  --ml-disc-primary:
    #f3f3f3;

  --ml-disc-primary-hover:
    #ffffff;

  --ml-disc-danger:
    #ff7b7b;

  --ml-disc-danger-bg:
    #1c0909;

  --ml-disc-danger-border:
    #5e2222;

  --ml-disc-success:
    #76dda8;

  --ml-disc-success-bg:
    #08170f;

  --ml-disc-success-border:
    #1d5336;

  --ml-disc-warning:
    #f1c06d;

  --ml-disc-warning-bg:
    #1a1105;

  --ml-disc-warning-border:
    #57411b;

  --ml-disc-info:
    #8fc8ff;

  --ml-disc-info-bg:
    #07131f;

  --ml-disc-info-border:
    #244d73;

  --ml-disc-shadow:
    none;

  --ml-disc-shadow-strong:
    0 22px 60px rgba(0, 0, 0, .7);
}


/* =========================================================
   SHELL
   ========================================================= */

.ml-discounts-shell {
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--ml-disc-bg);
  color: var(--ml-disc-text);
  font-family: var(--ml-disc-font);
}


.ml-discounts-main {
  min-width: 0;
  overflow-x: hidden;
}


.ml-discounts-page {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  background: var(--ml-disc-bg);
  color: var(--ml-disc-text);
}


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

.ml-discounts-container {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding:
    24px
    24px
    34px;
}


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

.ml-discounts-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin-bottom: 22px;
}


.ml-discounts-header__left {
  min-width: 0;
  flex: 1 1 auto;
}


.ml-discounts-header__eyebrow {
  margin-bottom: 5px;
  color: var(--ml-disc-text-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}


.ml-discounts-header__title-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}


.ml-discounts-header__title {
  margin: 0;
  color: var(--ml-disc-text-strong);
  font-size: clamp(25px, 2.2vw, 34px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
}


.ml-discounts-header__description {
  max-width: 820px;
  margin:
    9px
    0
    0;
  color: var(--ml-disc-text-soft);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}


.ml-discounts-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 9px;
  flex-wrap: wrap;
}


/* =========================================================
   BOTONES
   ========================================================= */

.ml-discounts-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding:
    9px
    14px;
  border:
    1px
    solid
    transparent;
  border-radius: var(--ml-disc-radius-sm);
  outline: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color var(--ml-disc-transition),
    border-color var(--ml-disc-transition),
    color var(--ml-disc-transition),
    opacity var(--ml-disc-transition),
    transform var(--ml-disc-transition);
}


.ml-discounts-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke-width: 2.2;
}


.ml-discounts-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}


.ml-discounts-btn:active:not(:disabled) {
  transform: translateY(0);
}


.ml-discounts-btn:disabled {
  cursor: not-allowed;
  opacity: .48;
}


.ml-discounts-btn--primary {
  background: var(--ml-disc-primary);
  border-color: var(--ml-disc-primary);
  color: var(--ml-disc-white);
}


.ml-discounts-btn--primary:hover:not(:disabled) {
  background: var(--ml-disc-primary-hover);
  border-color: var(--ml-disc-primary-hover);
}


html[data-theme="dark"] .ml-discounts-btn--primary,
body[data-theme="dark"] .ml-discounts-btn--primary,
html.dark .ml-discounts-btn--primary,
body.dark .ml-discounts-btn--primary,
[data-theme="dark"] .ml-discounts-btn--primary {
  background: #f4f4f4;
  border-color: #f4f4f4;
  color: #050505;
}


html[data-theme="dark"] .ml-discounts-btn--primary:hover:not(:disabled),
body[data-theme="dark"] .ml-discounts-btn--primary:hover:not(:disabled),
html.dark .ml-discounts-btn--primary:hover:not(:disabled),
body.dark .ml-discounts-btn--primary:hover:not(:disabled),
[data-theme="dark"] .ml-discounts-btn--primary:hover:not(:disabled) {
  background: #ffffff;
  border-color: #ffffff;
}


.ml-discounts-btn--secondary {
  background: var(--ml-disc-surface);
  border-color: var(--ml-disc-border);
  color: var(--ml-disc-text-strong);
}


.ml-discounts-btn--secondary:hover:not(:disabled) {
  background: var(--ml-disc-surface-muted);
  border-color: var(--ml-disc-border-strong);
}


.ml-discounts-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ml-disc-text-soft);
}


.ml-discounts-btn--ghost:hover:not(:disabled) {
  background: var(--ml-disc-surface-muted);
  color: var(--ml-disc-text-strong);
}


.ml-discounts-btn--danger {
  background: var(--ml-disc-danger);
  border-color: var(--ml-disc-danger);
  color: #ffffff;
}


.ml-discounts-btn--danger:hover:not(:disabled) {
  filter: brightness(.92);
}


.ml-discounts-btn--compact {
  min-height: 36px;
  padding:
    8px
    11px;
  font-size: 12px;
}


.ml-discounts-btn.is-loading {
  pointer-events: none;
}


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

.ml-discounts-icon-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  border:
    1px
    solid
    var(--ml-disc-border);
  border-radius: 9px;
  background: var(--ml-disc-surface);
  color: var(--ml-disc-text-soft);
  cursor: pointer;
  transition:
    background-color var(--ml-disc-transition),
    border-color var(--ml-disc-transition),
    color var(--ml-disc-transition);
}


.ml-discounts-icon-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.15;
}


.ml-discounts-icon-btn:hover:not(:disabled) {
  background: var(--ml-disc-surface-muted);
  border-color: var(--ml-disc-border-strong);
  color: var(--ml-disc-text-strong);
}


.ml-discounts-icon-btn.is-danger {
  color: var(--ml-disc-danger);
}


.ml-discounts-icon-btn.is-danger:hover:not(:disabled) {
  background: var(--ml-disc-danger-bg);
  border-color: var(--ml-disc-danger-border);
}


.ml-discounts-icon-btn:disabled {
  cursor: not-allowed;
  opacity: .45;
}


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

.ml-discounts-spin {
  animation:
    mlDiscountsSpin
    .8s
    linear
    infinite;
}


@keyframes mlDiscountsSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


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

.ml-discounts-metrics {
  display: grid;
  grid-template-columns:
    repeat(
      6,
      minmax(0, 1fr)
    );
  gap: 11px;
  width: 100%;
  margin-bottom: 18px;
}


.ml-discounts-metric {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 92px;
  padding:
    15px
    16px;
  border:
    1px
    solid
    var(--ml-disc-border);
  border-radius: var(--ml-disc-radius-md);
  background: var(--ml-disc-surface);
  box-shadow: var(--ml-disc-shadow);
}


.ml-discounts-metric__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border:
    1px
    solid
    var(--ml-disc-border);
  border-radius: 10px;
  background: var(--ml-disc-surface-soft);
  color: var(--ml-disc-text-strong);
}


.ml-discounts-metric__icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.25;
}


.ml-discounts-metric__body {
  min-width: 0;
}


.ml-discounts-metric__label {
  margin-bottom: 3px;
  overflow: hidden;
  color: var(--ml-disc-text-muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.ml-discounts-metric__value {
  color: var(--ml-disc-text-strong);
  font-size: 22px;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -.025em;
}


.ml-discounts-metric__detail {
  margin-top: 3px;
  overflow: hidden;
  color: var(--ml-disc-text-soft);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}


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

.ml-discounts-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  background: var(--ml-disc-surface-muted);
}


.ml-discounts-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .35),
      transparent
    );
  animation:
    mlDiscountsSkeleton
    1.25s
    infinite;
}


html[data-theme="dark"] .ml-discounts-skeleton::after,
body[data-theme="dark"] .ml-discounts-skeleton::after,
html.dark .ml-discounts-skeleton::after,
body.dark .ml-discounts-skeleton::after,
[data-theme="dark"] .ml-discounts-skeleton::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .07),
      transparent
    );
}


.ml-discounts-skeleton--icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}


.ml-discounts-skeleton--sm {
  width: 75%;
  height: 9px;
  margin-bottom: 8px;
}


.ml-discounts-skeleton--lg {
  width: 52%;
  height: 21px;
}


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


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

.ml-discounts-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin-bottom: 10px;
  padding:
    5px;
  border:
    1px
    solid
    var(--ml-disc-border);
  border-radius: 12px;
  background: var(--ml-disc-surface);
  overflow-x: auto;
  scrollbar-width: none;
}


.ml-discounts-tabs::-webkit-scrollbar {
  display: none;
}


.ml-discounts-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding:
    8px
    13px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ml-disc-text-soft);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color var(--ml-disc-transition),
    color var(--ml-disc-transition);
}


.ml-discounts-tab svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}


.ml-discounts-tab:hover {
  background: var(--ml-disc-surface-muted);
  color: var(--ml-disc-text-strong);
}


.ml-discounts-tab.is-active {
  background: var(--ml-disc-black);
  color: var(--ml-disc-white);
}


html[data-theme="dark"] .ml-discounts-tab.is-active,
body[data-theme="dark"] .ml-discounts-tab.is-active,
html.dark .ml-discounts-tab.is-active,
body.dark .ml-discounts-tab.is-active,
[data-theme="dark"] .ml-discounts-tab.is-active {
  background: #ffffff;
  color: #060606;
}


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

.ml-discounts-panel {
  width: 100%;
  min-width: 0;
  border:
    1px
    solid
    var(--ml-disc-border);
  border-radius: var(--ml-disc-radius-md);
  background: var(--ml-disc-surface);
  box-shadow: var(--ml-disc-shadow);
  overflow: hidden;
}


.ml-discounts-panel__loading,
.ml-discounts-config-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 280px;
  color: var(--ml-disc-text-soft);
  font-size: 13px;
  font-weight: 700;
}


.ml-discounts-panel__loading svg,
.ml-discounts-config-loading svg {
  width: 18px;
  height: 18px;
}


/* =========================================================
   PUBLICATIONS
   ========================================================= */

.ml-discounts-publications {
  width: 100%;
  min-width: 0;
}


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

.ml-discounts-filters {
  width: 100%;
  padding:
    16px;
  border-bottom:
    1px
    solid
    var(--ml-disc-border);
  background: var(--ml-disc-surface);
}


.ml-discounts-filters__top {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 13px;
}


.ml-discounts-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 220px;
}


.ml-discounts-search__icon {
  position: absolute;
  left: 13px;
  width: 17px;
  height: 17px;
  color: var(--ml-disc-text-muted);
  pointer-events: none;
}


.ml-discounts-search__input {
  width: 100%;
  height: 42px;
  padding:
    9px
    42px
    9px
    40px !important;
}


.ml-discounts-search__clear {
  appearance: none;
  position: absolute;
  right: 9px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ml-disc-text-muted);
  cursor: pointer;
}


.ml-discounts-search__clear.is-visible {
  display: inline-flex;
}


.ml-discounts-search__clear:hover {
  background: var(--ml-disc-surface-muted);
  color: var(--ml-disc-text-strong);
}


.ml-discounts-search__clear svg {
  width: 15px;
  height: 15px;
}


.ml-discounts-filter-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
}


.ml-discounts-filters__grid,
.ml-discounts-advanced-filters {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
  gap: 10px;
  width: 100%;
}


.ml-discounts-advanced-filters {
  margin-top: 12px;
  padding-top: 12px;
  border-top:
    1px
    solid
    var(--ml-disc-border);
}


.ml-discounts-advanced-filters[hidden] {
  display: none !important;
}


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

.ml-discounts-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 6px;
}


.ml-discounts-field--wide {
  grid-column:
    1 /
    -1;
}


.ml-discounts-field__label {
  color: var(--ml-disc-text-soft);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}


/* =========================================================
   INPUTS
   ========================================================= */

.ml-discounts-input,
.ml-discounts-select,
.ml-discounts-textarea {
  appearance: none;
  width: 100%;
  border:
    1px
    solid
    var(--ml-disc-border);
  border-radius: 9px;
  outline: none;
  background: var(--ml-disc-surface);
  color: var(--ml-disc-text-strong);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  transition:
    border-color var(--ml-disc-transition),
    background-color var(--ml-disc-transition),
    box-shadow var(--ml-disc-transition);
}


.ml-discounts-input,
.ml-discounts-select {
  height: 40px;
  padding:
    8px
    11px;
}


.ml-discounts-textarea {
  min-height: 88px;
  padding:
    11px
    12px;
  resize: vertical;
  line-height: 1.45;
}


.ml-discounts-input::placeholder,
.ml-discounts-textarea::placeholder {
  color: var(--ml-disc-text-muted);
  opacity: .86;
}


.ml-discounts-input:focus,
.ml-discounts-select:focus,
.ml-discounts-textarea:focus {
  border-color: var(--ml-disc-border-strong);
  box-shadow:
    0
    0
    0
    2px
    rgba(0, 0, 0, .035);
}


html[data-theme="dark"] .ml-discounts-input:focus,
html[data-theme="dark"] .ml-discounts-select:focus,
html[data-theme="dark"] .ml-discounts-textarea:focus,
body[data-theme="dark"] .ml-discounts-input:focus,
body[data-theme="dark"] .ml-discounts-select:focus,
body[data-theme="dark"] .ml-discounts-textarea:focus,
html.dark .ml-discounts-input:focus,
html.dark .ml-discounts-select:focus,
html.dark .ml-discounts-textarea:focus,
body.dark .ml-discounts-input:focus,
body.dark .ml-discounts-select:focus,
body.dark .ml-discounts-textarea:focus,
[data-theme="dark"] .ml-discounts-input:focus,
[data-theme="dark"] .ml-discounts-select:focus,
[data-theme="dark"] .ml-discounts-textarea:focus {
  box-shadow:
    0
    0
    0
    2px
    rgba(255, 255, 255, .045);
}


.ml-discounts-input-wrap,
.ml-discounts-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}


.ml-discounts-input-wrap > svg,
.ml-discounts-select-wrap > svg:first-child {
  position: absolute;
  left: 11px;
  z-index: 2;
  width: 15px;
  height: 15px;
  color: var(--ml-disc-text-muted);
  pointer-events: none;
}


.ml-discounts-input-wrap .ml-discounts-input,
.ml-discounts-select-wrap .ml-discounts-select {
  padding-left: 34px;
}


.ml-discounts-select-wrap__arrow {
  position: absolute;
  right: 10px !important;
  left: auto !important;
  width: 14px !important;
  height: 14px !important;
  color: var(--ml-disc-text-muted);
  pointer-events: none;
}


.ml-discounts-select {
  padding-right: 31px;
  cursor: pointer;
}


.ml-discounts-select-wrap--compact {
  width: 82px;
}


.ml-discounts-input-suffix {
  position: absolute;
  right: 11px;
  color: var(--ml-disc-text-muted);
  font-size: 10.5px;
  font-weight: 700;
  pointer-events: none;
}


/* =========================================================
   REMOVE NUMBER SPIN
   ========================================================= */

.ml-discounts-input[type="number"]::-webkit-inner-spin-button,
.ml-discounts-input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
}


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

.ml-discounts-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 54px;
  padding:
    9px
    15px;
  border-bottom:
    1px
    solid
    var(--ml-disc-border);
  background: var(--ml-disc-surface-soft);
}


.ml-discounts-toolbar__left,
.ml-discounts-toolbar__right {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
}


.ml-discounts-toolbar__right {
  justify-content: flex-end;
  flex-wrap: wrap;
}


.ml-discounts-results-info {
  color: var(--ml-disc-text-soft);
  font-size: 12px;
  font-weight: 650;
}


.ml-discounts-results-info strong {
  color: var(--ml-disc-text-strong);
  font-weight: 850;
}


.ml-discounts-toolbar-control {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ml-disc-text-soft);
  font-size: 11px;
  font-weight: 750;
}


/* =========================================================
   SELECTION BAR
   ========================================================= */

.ml-discounts-selection-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
  padding:
    11px
    15px;
  border-bottom:
    1px
    solid
    var(--ml-disc-border);
  background: var(--ml-disc-surface-soft);
}


.ml-discounts-selection-bar.is-visible {
  display: flex;
}


.ml-discounts-selection-bar__left {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}


.ml-discounts-selection-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border:
    1px
    solid
    var(--ml-disc-border-strong);
  border-radius: 9px;
  background: var(--ml-disc-surface);
  color: var(--ml-disc-text-strong);
}


.ml-discounts-selection-bar__icon svg {
  width: 16px;
  height: 16px;
}


.ml-discounts-selection-bar__left strong {
  display: block;
  color: var(--ml-disc-text-strong);
  font-size: 12px;
  font-weight: 850;
}


.ml-discounts-selection-bar__left span {
  display: block;
  margin-top: 2px;
  color: var(--ml-disc-text-muted);
  font-size: 10.5px;
  font-weight: 650;
}


.ml-discounts-selection-bar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}


/* =========================================================
   CHECKBOX
   ========================================================= */

.ml-discounts-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  cursor: pointer;
}


.ml-discounts-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}


.ml-discounts-checkbox span {
  position: relative;
  display: block;
  width: 17px;
  height: 17px;
  border:
    1.5px
    solid
    var(--ml-disc-border-strong);
  border-radius: 5px;
  background: var(--ml-disc-surface);
  transition:
    background-color var(--ml-disc-transition),
    border-color var(--ml-disc-transition);
}


.ml-discounts-checkbox input:checked + span {
  border-color: var(--ml-disc-black);
  background: var(--ml-disc-black);
}


.ml-discounts-checkbox input:checked + span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border:
    solid
    var(--ml-disc-white);
  border-width:
    0
    2px
    2px
    0;
  transform: rotate(45deg);
}


.ml-discounts-checkbox input:indeterminate + span {
  border-color: var(--ml-disc-black);
  background: var(--ml-disc-black);
}


.ml-discounts-checkbox input:indeterminate + span::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 3px;
  width: 8px;
  height: 2px;
  border: 0;
  background: var(--ml-disc-white);
  transform: none;
}


html[data-theme="dark"] .ml-discounts-checkbox input:checked + span,
html[data-theme="dark"] .ml-discounts-checkbox input:indeterminate + span,
body[data-theme="dark"] .ml-discounts-checkbox input:checked + span,
body[data-theme="dark"] .ml-discounts-checkbox input:indeterminate + span,
html.dark .ml-discounts-checkbox input:checked + span,
html.dark .ml-discounts-checkbox input:indeterminate + span,
body.dark .ml-discounts-checkbox input:checked + span,
body.dark .ml-discounts-checkbox input:indeterminate + span,
[data-theme="dark"] .ml-discounts-checkbox input:checked + span,
[data-theme="dark"] .ml-discounts-checkbox input:indeterminate + span {
  border-color: #ffffff;
  background: #ffffff;
}


html[data-theme="dark"] .ml-discounts-checkbox input:checked + span::after,
body[data-theme="dark"] .ml-discounts-checkbox input:checked + span::after,
html.dark .ml-discounts-checkbox input:checked + span::after,
body.dark .ml-discounts-checkbox input:checked + span::after,
[data-theme="dark"] .ml-discounts-checkbox input:checked + span::after {
  border-color: #000000;
}


html[data-theme="dark"] .ml-discounts-checkbox input:indeterminate + span::after,
body[data-theme="dark"] .ml-discounts-checkbox input:indeterminate + span::after,
html.dark .ml-discounts-checkbox input:indeterminate + span::after,
body.dark .ml-discounts-checkbox input:indeterminate + span::after,
[data-theme="dark"] .ml-discounts-checkbox input:indeterminate + span::after {
  background: #000000;
}


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

.ml-discounts-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  max-width: 100%;
  padding:
    4px
    8px;
  border:
    1px
    solid
    var(--ml-disc-border);
  border-radius: 999px;
  background: var(--ml-disc-surface-muted);
  color: var(--ml-disc-text-soft);
  font-size: 9.5px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}


.ml-discounts-badge.is-success {
  border-color: var(--ml-disc-success-border);
  background: var(--ml-disc-success-bg);
  color: var(--ml-disc-success);
}


.ml-discounts-badge.is-warning {
  border-color: var(--ml-disc-warning-border);
  background: var(--ml-disc-warning-bg);
  color: var(--ml-disc-warning);
}


.ml-discounts-badge.is-info {
  border-color: var(--ml-disc-info-border);
  background: var(--ml-disc-info-bg);
  color: var(--ml-disc-info);
}


.ml-discounts-badge.is-danger {
  border-color: var(--ml-disc-danger-border);
  background: var(--ml-disc-danger-bg);
  color: var(--ml-disc-danger);
}


.ml-discounts-badge.is-neutral,
.ml-discounts-badge.is-muted {
  border-color: var(--ml-disc-border);
  background: var(--ml-disc-surface-muted);
  color: var(--ml-disc-text-soft);
}


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

.ml-discounts-table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  background: var(--ml-disc-surface);
  scrollbar-width: thin;
  scrollbar-color:
    var(--ml-disc-border-strong)
    transparent;
}


.ml-discounts-table-wrap::-webkit-scrollbar {
  height: 7px;
}


.ml-discounts-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}


.ml-discounts-table-wrap::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: var(--ml-disc-border-strong);
}


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

.ml-discounts-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: var(--ml-disc-surface);
}


.ml-discounts-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 45px;
  padding:
    9px
    10px;
  border-bottom:
    1px
    solid
    var(--ml-disc-border-strong);
  background: var(--ml-disc-surface-soft);
  color: var(--ml-disc-text-soft);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  text-align: left;
  letter-spacing: .015em;
  vertical-align: middle;
}


.ml-discounts-table tbody td {
  padding:
    10px;
  border-bottom:
    1px
    solid
    var(--ml-disc-border);
  background: var(--ml-disc-surface);
  color: var(--ml-disc-text);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  vertical-align: middle;
}


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


.ml-discounts-table tbody tr {
  transition:
    background-color var(--ml-disc-transition);
}


.ml-discounts-table tbody tr:hover td {
  background: var(--ml-disc-surface-soft);
}


.ml-discounts-table tbody tr.is-selected td {
  background: var(--ml-disc-surface-muted);
}


/* =========================================================
   COLUMN WIDTHS
   ========================================================= */

.ml-discounts-table__check {
  width: 42px;
  text-align: center !important;
}


.ml-discounts-table__image {
  width: 66px;
}


.ml-discounts-table th:nth-child(3),
.ml-discounts-table td:nth-child(3) {
  width: 125px;
}


.ml-discounts-table th:nth-child(4),
.ml-discounts-table td:nth-child(4) {
  width: 280px;
}


.ml-discounts-table th:nth-child(5),
.ml-discounts-table td:nth-child(5) {
  width: 175px;
}


.ml-discounts-table th:nth-child(6),
.ml-discounts-table td:nth-child(6) {
  width: 130px;
}


.ml-discounts-table th:nth-child(7),
.ml-discounts-table td:nth-child(7) {
  width: 130px;
}


.ml-discounts-table th:nth-child(8),
.ml-discounts-table td:nth-child(8) {
  width: 110px;
}


.ml-discounts-table th:nth-child(9),
.ml-discounts-table td:nth-child(9) {
  width: 130px;
}


.ml-discounts-table__actions {
  width: 118px;
  text-align: right !important;
}


/* =========================================================
   SORT
   ========================================================= */

.ml-discounts-sort {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-align: left;
}


.ml-discounts-sort span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.ml-discounts-sort svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  color: var(--ml-disc-text-muted);
}


.ml-discounts-sort:hover,
.ml-discounts-sort.is-active {
  color: var(--ml-disc-text-strong);
}


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

.ml-discounts-product-image {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
  border:
    1px
    solid
    var(--ml-disc-border);
  border-radius: 8px;
  background: #ffffff;
}


.ml-discounts-product-image--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9a9da3;
}


.ml-discounts-product-image--empty svg {
  width: 17px;
  height: 17px;
}


/* =========================================================
   ITEM IDENTIFIERS
   ========================================================= */

.ml-discounts-item-identifiers,
.ml-discounts-product-info,
.ml-discounts-category-cell,
.ml-discounts-price-cell,
.ml-discounts-discount-cell,
.ml-discounts-date-cell,
.ml-discounts-user-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}


.ml-discounts-item-id,
.ml-discounts-item-identifiers strong,
.ml-discounts-product-info strong,
.ml-discounts-price-cell strong,
.ml-discounts-date-cell strong,
.ml-discounts-user-cell strong {
  overflow: hidden;
  color: var(--ml-disc-text-strong);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.ml-discounts-item-sku,
.ml-discounts-item-identifiers span,
.ml-discounts-product-meta,
.ml-discounts-category-cell small,
.ml-discounts-price-cell span,
.ml-discounts-discount-cell span,
.ml-discounts-date-cell span,
.ml-discounts-user-cell span {
  overflow: hidden;
  color: var(--ml-disc-text-muted);
  font-size: 9.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}


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

.ml-discounts-product-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  overflow: hidden;
  color: var(--ml-disc-text-strong);
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.35;
  text-decoration: none;
}


.ml-discounts-product-title:hover {
  text-decoration: underline;
}


.ml-discounts-product-title svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}


.ml-discounts-product-title:not(a) {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}


a.ml-discounts-product-title {
  white-space: nowrap;
  text-overflow: ellipsis;
}


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

.ml-discounts-category-cell > span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--ml-disc-text);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}


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

.ml-discounts-status-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}


/* =========================================================
   DISCOUNT CELL
   ========================================================= */

.ml-discounts-discount-cell strong {
  color: var(--ml-disc-text-strong);
  font-size: 12px;
  font-weight: 850;
}


.ml-discounts-muted {
  color: var(--ml-disc-text-muted) !important;
  font-weight: 600 !important;
}


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

.ml-discounts-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}


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

.ml-discounts-table-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 250px;
  color: var(--ml-disc-text-soft);
  font-size: 12px;
  font-weight: 700;
}


.ml-discounts-table-loading svg {
  width: 18px;
  height: 18px;
}


/* =========================================================
   INLINE ERROR
   ========================================================= */

.ml-discounts-inline-error {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 92px;
  margin: 14px;
  padding:
    14px;
  border:
    1px
    solid
    var(--ml-disc-danger-border);
  border-radius: 11px;
  background: var(--ml-disc-danger-bg);
  color: var(--ml-disc-danger);
}


.ml-discounts-inline-error > svg {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  margin-top: 1px;
}


.ml-discounts-inline-error > div {
  min-width: 0;
  flex: 1 1 auto;
}


.ml-discounts-inline-error strong {
  display: block;
  margin-bottom: 3px;
  color: inherit;
  font-size: 12px;
  font-weight: 850;
}


.ml-discounts-inline-error span {
  display: block;
  color: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}


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

.ml-discounts-empty-state,
.ml-discounts-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding:
    34px
    20px;
  text-align: center;
}


.ml-discounts-empty-state__icon,
.ml-discounts-error-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border:
    1px
    solid
    var(--ml-disc-border);
  border-radius: 14px;
  background: var(--ml-disc-surface-soft);
  color: var(--ml-disc-text-soft);
}


.ml-discounts-empty-state__icon svg,
.ml-discounts-error-state__icon svg {
  width: 23px;
  height: 23px;
}


.ml-discounts-empty-state h3,
.ml-discounts-error-state h3 {
  margin:
    0
    0
    7px;
  color: var(--ml-disc-text-strong);
  font-size: 16px;
  font-weight: 850;
}


.ml-discounts-empty-state p,
.ml-discounts-error-state p {
  max-width: 520px;
  margin:
    0
    0
    17px;
  color: var(--ml-disc-text-soft);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
}


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

.ml-discounts-pagination-wrap {
  width: 100%;
  border-top:
    1px
    solid
    var(--ml-disc-border);
  background: var(--ml-disc-surface);
}


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

.ml-discounts-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 54px;
  padding:
    9px
    15px;
}


.ml-discounts-pagination__pages {
  display: flex;
  align-items: center;
  gap: 4px;
}


.ml-discounts-pagination__button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding:
    0
    8px;
  border:
    1px
    solid
    var(--ml-disc-border);
  border-radius: 8px;
  background: var(--ml-disc-surface);
  color: var(--ml-disc-text-soft);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  transition:
    background-color var(--ml-disc-transition),
    border-color var(--ml-disc-transition),
    color var(--ml-disc-transition);
}


.ml-discounts-pagination__button svg {
  width: 14px;
  height: 14px;
}


.ml-discounts-pagination__button:hover:not(:disabled) {
  background: var(--ml-disc-surface-muted);
  border-color: var(--ml-disc-border-strong);
  color: var(--ml-disc-text-strong);
}


.ml-discounts-pagination__button.is-active {
  background: var(--ml-disc-black);
  border-color: var(--ml-disc-black);
  color: var(--ml-disc-white);
}


html[data-theme="dark"] .ml-discounts-pagination__button.is-active,
body[data-theme="dark"] .ml-discounts-pagination__button.is-active,
html.dark .ml-discounts-pagination__button.is-active,
body.dark .ml-discounts-pagination__button.is-active,
[data-theme="dark"] .ml-discounts-pagination__button.is-active {
  background: #ffffff;
  border-color: #ffffff;
  color: #000000;
}


.ml-discounts-pagination__button:disabled {
  cursor: not-allowed;
  opacity: .38;
}


.ml-discounts-pagination__ellipsis {
  min-width: 24px;
  color: var(--ml-disc-text-muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}


/* =========================================================
   SUBPAGE BASE
   ========================================================= */

.ml-discounts-subpage {
  width: 100%;
  min-width: 0;
}


.ml-discounts-subpage__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding:
    18px
    18px
    15px;
  border-bottom:
    1px
    solid
    var(--ml-disc-border);
}


.ml-discounts-subpage__eyebrow {
  margin-bottom: 4px;
  color: var(--ml-disc-text-muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}


.ml-discounts-subpage__header h2 {
  margin: 0;
  color: var(--ml-disc-text-strong);
  font-size: 19px;
  font-weight: 850;
  line-height: 1.2;
}


.ml-discounts-subpage__header p {
  margin:
    6px
    0
    0;
  color: var(--ml-disc-text-soft);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
}


.ml-discounts-subpage__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}


.ml-discounts-subfilters {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );
  gap: 10px;
  width: 100%;
  padding:
    14px
    16px;
  border-bottom:
    1px
    solid
    var(--ml-disc-border);
  background: var(--ml-disc-surface-soft);
}


/* =========================================================
   RESPONSIVE · PARTE 1
   ========================================================= */

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


@media (
  max-width: 1180px
) {
  .ml-discounts-container {
    padding:
      20px
      18px
      30px;
  }


  .ml-discounts-header {
    flex-direction: column;
  }


  .ml-discounts-header__actions {
    width: 100%;
    justify-content: flex-start;
  }


  .ml-discounts-filters__grid,
  .ml-discounts-advanced-filters {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .ml-discounts-subfilters {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}


@media (
  max-width: 760px
) {
  .ml-discounts-container {
    padding:
      14px
      10px
      24px;
  }


  .ml-discounts-header {
    gap: 15px;
    margin-bottom: 15px;
  }


  .ml-discounts-header__title {
    font-size: 25px;
  }


  .ml-discounts-header__description {
    font-size: 12px;
  }


  .ml-discounts-header__actions {
    display: grid;
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .ml-discounts-header__actions
  .ml-discounts-btn:last-child {
    grid-column:
      1 /
      -1;
  }


  .ml-discounts-metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
    gap: 8px;
  }


  .ml-discounts-metric {
    min-height: 82px;
    padding:
      12px;
  }


  .ml-discounts-metric__value {
    font-size: 19px;
  }


  .ml-discounts-filters {
    padding:
      12px;
  }


  .ml-discounts-filters__top {
    flex-direction: column;
    align-items: stretch;
  }


  .ml-discounts-search {
    width: 100%;
  }


  .ml-discounts-filter-actions {
    width: 100%;
  }


  .ml-discounts-filter-actions
  .ml-discounts-btn {
    flex:
      1
      1
      0;
  }


  .ml-discounts-filters__grid,
  .ml-discounts-advanced-filters,
  .ml-discounts-subfilters {
    grid-template-columns:
      1fr;
  }


  .ml-discounts-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }


  .ml-discounts-toolbar__left,
  .ml-discounts-toolbar__right {
    width: 100%;
  }


  .ml-discounts-toolbar__right {
    justify-content: flex-start;
  }


  .ml-discounts-selection-bar {
    align-items: flex-start;
    flex-direction: column;
  }


  .ml-discounts-selection-bar__actions {
    width: 100%;
    justify-content: flex-start;
  }


  .ml-discounts-pagination {
    justify-content: center;
    overflow-x: auto;
  }


  .ml-discounts-subpage__header {
    flex-direction: column;
  }


  .ml-discounts-subpage__actions {
    width: 100%;
    justify-content: flex-start;
  }
}


@media (
  max-width: 480px
) {
  .ml-discounts-header__actions {
    grid-template-columns:
      1fr;
  }


  .ml-discounts-header__actions
  .ml-discounts-btn:last-child {
    grid-column: auto;
  }


  .ml-discounts-metrics {
    grid-template-columns:
      1fr;
  }


  .ml-discounts-btn {
    width: 100%;
  }


  .ml-discounts-row-actions
  .ml-discounts-icon-btn,
  .ml-discounts-selection-bar__actions
  .ml-discounts-icon-btn {
    width: 34px;
  }
}/* =========================================================
   WIRTZ HUB · MERCADO LIBRE · DESCUENTOS MASIVOS
   FRONTEND CSS

   PARTE 2 DE 3

   CONTINÚA DESPUÉS DE:
   RESPONSIVE · PARTE 1

   INCLUYE:
   - MODALES
   - DETALLE DE PUBLICACIÓN
   - PREVIEW DE DESCUENTOS
   - PREVIEW DE ELIMINACIÓN
   - OPERACIONES
   - DETALLE DE OPERACIÓN
   - SWITCHES
   - FORMULARIOS
   - TOASTS
   ========================================================= */


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

.ml-discounts-modal-root {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding:
    24px;
  overflow:
    hidden
    auto;
  font-family: var(--ml-disc-font);
}


.ml-discounts-modal-root.is-open {
  display: flex;
}


body.ml-discounts-modal-open {
  overflow: hidden;
}


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

.ml-discounts-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    rgba(
      0,
      0,
      0,
      .48
    );
  backdrop-filter:
    blur(
      2px
    );
}


html[data-theme="dark"] .ml-discounts-modal__backdrop,
body[data-theme="dark"] .ml-discounts-modal__backdrop,
html.dark .ml-discounts-modal__backdrop,
body.dark .ml-discounts-modal__backdrop,
[data-theme="dark"] .ml-discounts-modal__backdrop {
  background:
    rgba(
      0,
      0,
      0,
      .76
    );
}


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

.ml-discounts-modal {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height:
    calc(
      100vh -
      48px
    );
  border:
    1px
    solid
    var(--ml-disc-border-strong);
  border-radius: var(--ml-disc-radius-lg);
  background: var(--ml-disc-surface);
  color: var(--ml-disc-text);
  box-shadow: var(--ml-disc-shadow-strong);
  overflow: hidden;
}


.ml-discounts-modal--medium {
  max-width: 760px;
}


.ml-discounts-modal--large {
  max-width: 1040px;
}


.ml-discounts-modal--xlarge {
  max-width: 1320px;
}


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

.ml-discounts-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex: 0 0 auto;
  padding:
    20px
    22px;
  border-bottom:
    1px
    solid
    var(--ml-disc-border);
  background: var(--ml-disc-surface);
}


.ml-discounts-modal__header > div:first-child {
  min-width: 0;
  flex:
    1
    1
    auto;
}


.ml-discounts-modal__eyebrow {
  margin-bottom: 5px;
  color: var(--ml-disc-text-muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: .075em;
  text-transform: uppercase;
}


.ml-discounts-modal__header h2 {
  margin: 0;
  color: var(--ml-disc-text-strong);
  font-size: 21px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -.02em;
}


.ml-discounts-modal__header p {
  max-width: 720px;
  margin:
    6px
    0
    0;
  color: var(--ml-disc-text-soft);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
}


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

.ml-discounts-modal__body {
  flex:
    1
    1
    auto;
  min-height: 0;
  padding:
    20px
    22px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color:
    var(--ml-disc-border-strong)
    transparent;
}


.ml-discounts-modal__body::-webkit-scrollbar {
  width: 7px;
}


.ml-discounts-modal__body::-webkit-scrollbar-track {
  background: transparent;
}


.ml-discounts-modal__body::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: var(--ml-disc-border-strong);
}


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

.ml-discounts-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex: 0 0 auto;
  padding:
    14px
    22px;
  border-top:
    1px
    solid
    var(--ml-disc-border);
  background: var(--ml-disc-surface-soft);
}


.ml-discounts-modal__footer-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}


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

.ml-discounts-modal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 220px;
  color: var(--ml-disc-text-soft);
  font-size: 12px;
  font-weight: 700;
}


.ml-discounts-modal-loading svg {
  width: 18px;
  height: 18px;
}


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

.ml-discounts-form-grid {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );
  gap:
    16px
    14px;
  width: 100%;
  margin-bottom: 20px;
}


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

.ml-discounts-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  min-height: 70px;
  padding:
    13px
    14px;
  border:
    1px
    solid
    var(--ml-disc-border);
  border-radius: 11px;
  background: var(--ml-disc-surface-soft);
}


.ml-discounts-switch-row--compact {
  min-height: 40px;
  padding:
    7px
    10px;
}


.ml-discounts-switch-row > div,
.ml-discounts-switch-row > span {
  min-width: 0;
}


.ml-discounts-switch-row strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ml-disc-text-strong);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.3;
}


.ml-discounts-switch-row span:not(.ml-discounts-switch > span) {
  display: block;
  color: var(--ml-disc-text-muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}


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

.ml-discounts-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex:
    0
    0
    auto;
  width: 42px;
  height: 24px;
  cursor: pointer;
}


.ml-discounts-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}


.ml-discounts-switch > span {
  position: relative;
  display: block;
  width: 42px;
  height: 24px;
  border:
    1px
    solid
    var(--ml-disc-border-strong);
  border-radius: 999px;
  background: var(--ml-disc-surface-muted);
  transition:
    background-color var(--ml-disc-transition),
    border-color var(--ml-disc-transition);
}


.ml-discounts-switch > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ml-disc-text-muted);
  transition:
    transform var(--ml-disc-transition),
    background-color var(--ml-disc-transition);
}


.ml-discounts-switch input:checked + span {
  border-color: var(--ml-disc-black);
  background: var(--ml-disc-black);
}


.ml-discounts-switch input:checked + span::after {
  transform:
    translateX(
      18px
    );
  background: var(--ml-disc-white);
}


html[data-theme="dark"] .ml-discounts-switch input:checked + span,
body[data-theme="dark"] .ml-discounts-switch input:checked + span,
html.dark .ml-discounts-switch input:checked + span,
body.dark .ml-discounts-switch input:checked + span,
[data-theme="dark"] .ml-discounts-switch input:checked + span {
  border-color: #ffffff;
  background: #ffffff;
}


html[data-theme="dark"] .ml-discounts-switch input:checked + span::after,
body[data-theme="dark"] .ml-discounts-switch input:checked + span::after,
html.dark .ml-discounts-switch input:checked + span::after,
body.dark .ml-discounts-switch input:checked + span::after,
[data-theme="dark"] .ml-discounts-switch input:checked + span::after {
  background: #050505;
}


/* =========================================================
   PREVIEW CONTAINER
   ========================================================= */

.ml-discounts-preview-container {
  width: 100%;
  min-width: 0;
  margin-top: 4px;
  margin-bottom: 20px;
  border:
    1px
    solid
    var(--ml-disc-border);
  border-radius: 12px;
  background: var(--ml-disc-surface-soft);
  overflow: hidden;
}


/* =========================================================
   PREVIEW PLACEHOLDER
   ========================================================= */

.ml-discounts-preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 150px;
  padding:
    24px;
  color: var(--ml-disc-text-soft);
}


.ml-discounts-preview-placeholder > svg {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  color: var(--ml-disc-text-muted);
}


.ml-discounts-preview-placeholder strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ml-disc-text-strong);
  font-size: 12.5px;
  font-weight: 800;
}


.ml-discounts-preview-placeholder span {
  display: block;
  color: var(--ml-disc-text-muted);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.45;
}


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

.ml-discounts-preview {
  width: 100%;
  min-width: 0;
}


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

.ml-discounts-preview__metrics {
  display: grid;
  grid-template-columns:
    repeat(
      6,
      minmax(
        0,
        1fr
      )
    );
  gap: 8px;
  width: 100%;
  padding:
    13px;
  border-bottom:
    1px
    solid
    var(--ml-disc-border);
  background: var(--ml-disc-surface);
}


.ml-discounts-preview-metric {
  min-width: 0;
  padding:
    10px
    11px;
  border:
    1px
    solid
    var(--ml-disc-border);
  border-radius: 9px;
  background: var(--ml-disc-surface-soft);
}


.ml-discounts-preview-metric span {
  display: block;
  margin-bottom: 4px;
  overflow: hidden;
  color: var(--ml-disc-text-muted);
  font-size: 9px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.ml-discounts-preview-metric strong {
  display: block;
  overflow: hidden;
  color: var(--ml-disc-text-strong);
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.ml-discounts-preview-metric.is-success {
  border-color: var(--ml-disc-success-border);
  background: var(--ml-disc-success-bg);
}


.ml-discounts-preview-metric.is-success strong {
  color: var(--ml-disc-success);
}


.ml-discounts-preview-metric.is-warning {
  border-color: var(--ml-disc-warning-border);
  background: var(--ml-disc-warning-bg);
}


.ml-discounts-preview-metric.is-warning strong {
  color: var(--ml-disc-warning);
}


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

.ml-discounts-preview__summary {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );
  gap: 1px;
  width: 100%;
  border-bottom:
    1px
    solid
    var(--ml-disc-border);
  background: var(--ml-disc-border);
}


.ml-discounts-preview__summary > div {
  min-width: 0;
  padding:
    11px
    13px;
  background: var(--ml-disc-surface-soft);
}


.ml-discounts-preview__summary span {
  display: block;
  margin-bottom: 3px;
  color: var(--ml-disc-text-muted);
  font-size: 9px;
  font-weight: 750;
}


.ml-discounts-preview__summary strong {
  display: block;
  overflow: hidden;
  color: var(--ml-disc-text-strong);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   PREVIEW TABLE WRAP
   ========================================================= */

.ml-discounts-preview__table-wrap {
  width: 100%;
  max-height: 380px;
  overflow:
    auto;
  background: var(--ml-disc-surface);
  scrollbar-width: thin;
  scrollbar-color:
    var(--ml-disc-border-strong)
    transparent;
}


.ml-discounts-preview__table-wrap::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}


.ml-discounts-preview__table-wrap::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: var(--ml-disc-border-strong);
}


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

.ml-discounts-preview-table {
  width: 100%;
  min-width: 700px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}


.ml-discounts-preview-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding:
    9px
    11px;
  border-bottom:
    1px
    solid
    var(--ml-disc-border-strong);
  background: var(--ml-disc-surface-soft);
  color: var(--ml-disc-text-soft);
  font-size: 9.5px;
  font-weight: 850;
  text-align: left;
}


.ml-discounts-preview-table tbody td {
  padding:
    10px
    11px;
  border-bottom:
    1px
    solid
    var(--ml-disc-border);
  background: var(--ml-disc-surface);
  color: var(--ml-disc-text);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.35;
  vertical-align: middle;
}


.ml-discounts-preview-table tbody tr:last-child td {
  border-bottom: 0;
}


.ml-discounts-preview-table th:first-child,
.ml-discounts-preview-table td:first-child {
  width: 42%;
}


.ml-discounts-preview-table th:nth-child(2),
.ml-discounts-preview-table td:nth-child(2),
.ml-discounts-preview-table th:nth-child(3),
.ml-discounts-preview-table td:nth-child(3) {
  width: 19%;
}


.ml-discounts-preview-table th:last-child,
.ml-discounts-preview-table td:last-child {
  width: 20%;
}


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

.ml-discounts-preview-product {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}


.ml-discounts-preview-product strong {
  display: block;
  overflow: hidden;
  color: var(--ml-disc-text-strong);
  font-size: 10.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.ml-discounts-preview-product span {
  display: block;
  overflow: hidden;
  color: var(--ml-disc-text-muted);
  font-size: 9px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   PREVIEW REASONS
   ========================================================= */

.ml-discounts-preview-reasons {
  max-width: 190px;
  margin-top: 4px;
  color: var(--ml-disc-text-muted);
  font-size: 8.5px;
  font-weight: 650;
  line-height: 1.35;
  white-space: normal;
}


/* =========================================================
   PREVIEW MORE
   ========================================================= */

.ml-discounts-preview__more {
  padding:
    10px
    12px;
  border-top:
    1px
    solid
    var(--ml-disc-border);
  background: var(--ml-disc-surface-soft);
  color: var(--ml-disc-text-muted);
  font-size: 9.5px;
  font-weight: 650;
  text-align: center;
}


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

.ml-discounts-detail {
  width: 100%;
  min-width: 0;
}


.ml-discounts-detail__product {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom:
    1px
    solid
    var(--ml-disc-border);
}


.ml-discounts-detail__image {
  display: block;
  width: 96px;
  height: 96px;
  flex:
    0
    0
    96px;
  object-fit: contain;
  border:
    1px
    solid
    var(--ml-disc-border);
  border-radius: 12px;
  background: #ffffff;
}


.ml-discounts-detail__image--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9a9da3;
}


.ml-discounts-detail__image--empty svg {
  width: 24px;
  height: 24px;
}


.ml-discounts-detail__product-text {
  min-width: 0;
  flex:
    1
    1
    auto;
}


.ml-discounts-detail__product-text h3 {
  margin:
    2px
    0
    10px;
  color: var(--ml-disc-text-strong);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.35;
}


.ml-discounts-detail__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}


/* =========================================================
   DETAIL GRID
   ========================================================= */

.ml-discounts-detail__grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );
  gap: 9px;
  width: 100%;
}


/* =========================================================
   DETAIL ITEM
   ========================================================= */

.ml-discounts-detail-item {
  min-width: 0;
  padding:
    11px
    12px;
  border:
    1px
    solid
    var(--ml-disc-border);
  border-radius: 9px;
  background: var(--ml-disc-surface-soft);
}


.ml-discounts-detail-item > span {
  display: block;
  margin-bottom: 4px;
  color: var(--ml-disc-text-muted);
  font-size: 9px;
  font-weight: 750;
  line-height: 1.2;
}


.ml-discounts-detail-item > strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ml-disc-text-strong);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.4;
}


/* =========================================================
   DETAIL ACTIONS
   ========================================================= */

.ml-discounts-detail__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}


/* =========================================================
   OPERATIONS RESULTS
   ========================================================= */

.ml-discounts-operation-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}


.ml-discounts-operation-results span {
  color: var(--ml-disc-text-muted);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
}


.ml-discounts-operation-results span.is-success {
  color: var(--ml-disc-success);
}


.ml-discounts-operation-results span.is-danger {
  color: var(--ml-disc-danger);
}


/* =========================================================
   OPERATION DETAIL
   ========================================================= */

.ml-discounts-operation-detail {
  width: 100%;
  min-width: 0;
}


.ml-discounts-operation-detail__metrics {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );
  gap: 9px;
  width: 100%;
  margin-bottom: 16px;
}


/* =========================================================
   OPERATION NOTES
   ========================================================= */

.ml-discounts-operation-detail__notes {
  width: 100%;
  margin-bottom: 16px;
  padding:
    12px
    14px;
  border:
    1px
    solid
    var(--ml-disc-border);
  border-radius: 10px;
  background: var(--ml-disc-surface-soft);
}


.ml-discounts-operation-detail__notes strong {
  display: block;
  margin-bottom: 5px;
  color: var(--ml-disc-text-strong);
  font-size: 10px;
  font-weight: 850;
}


.ml-discounts-operation-detail__notes p {
  margin: 0;
  color: var(--ml-disc-text-soft);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: pre-wrap;
}


/* =========================================================
   OPERATION DETAIL TABLE
   ========================================================= */

.ml-discounts-operation-detail__table {
  width: 100%;
  min-width: 0;
  max-height: 480px;
  overflow:
    auto;
  border:
    1px
    solid
    var(--ml-disc-border);
  border-radius: 11px;
  scrollbar-width: thin;
  scrollbar-color:
    var(--ml-disc-border-strong)
    transparent;
}


.ml-discounts-operation-detail__table::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}


.ml-discounts-operation-detail__table::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: var(--ml-disc-border-strong);
}


.ml-discounts-operation-detail__table
.ml-discounts-table {
  min-width: 1050px;
}


/* =========================================================
   ERROR CELL
   ========================================================= */

.ml-discounts-error-cell {
  max-width: 240px;
  color: var(--ml-disc-danger);
  font-size: 9px;
  font-weight: 650;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}


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

.ml-discounts-toast-root {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 100500;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(
    380px,
    calc(
      100vw -
      28px
    )
  );
  gap: 8px;
  pointer-events: none;
  font-family: var(--ml-disc-font);
}


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

.ml-discounts-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding:
    11px
    11px
    11px
    12px;
  border:
    1px
    solid
    var(--ml-disc-border-strong);
  border-radius: 11px;
  background: var(--ml-disc-surface);
  color: var(--ml-disc-text);
  box-shadow: var(--ml-disc-shadow-strong);
  pointer-events: auto;
  animation:
    mlDiscountToastEnter
    .18s
    ease
    both;
}


.ml-discounts-toast.is-leaving {
  animation:
    mlDiscountToastLeave
    .18s
    ease
    both;
}


.ml-discounts-toast__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex:
    0
    0
    28px;
  border:
    1px
    solid
    var(--ml-disc-border);
  border-radius: 8px;
  background: var(--ml-disc-surface-soft);
}


.ml-discounts-toast__icon svg {
  width: 15px;
  height: 15px;
}


.ml-discounts-toast__text {
  flex:
    1
    1
    auto;
  min-width: 0;
  padding-top: 5px;
  color: var(--ml-disc-text-strong);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}


.ml-discounts-toast__close {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  flex:
    0
    0
    27px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ml-disc-text-muted);
  cursor: pointer;
}


.ml-discounts-toast__close:hover {
  background: var(--ml-disc-surface-muted);
  color: var(--ml-disc-text-strong);
}


.ml-discounts-toast__close svg {
  width: 14px;
  height: 14px;
}


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

.ml-discounts-toast.is-success {
  border-color: var(--ml-disc-success-border);
}


.ml-discounts-toast.is-success
.ml-discounts-toast__icon {
  border-color: var(--ml-disc-success-border);
  background: var(--ml-disc-success-bg);
  color: var(--ml-disc-success);
}


.ml-discounts-toast.is-warning {
  border-color: var(--ml-disc-warning-border);
}


.ml-discounts-toast.is-warning
.ml-discounts-toast__icon {
  border-color: var(--ml-disc-warning-border);
  background: var(--ml-disc-warning-bg);
  color: var(--ml-disc-warning);
}


.ml-discounts-toast.is-error {
  border-color: var(--ml-disc-danger-border);
}


.ml-discounts-toast.is-error
.ml-discounts-toast__icon {
  border-color: var(--ml-disc-danger-border);
  background: var(--ml-disc-danger-bg);
  color: var(--ml-disc-danger);
}


.ml-discounts-toast.is-info
.ml-discounts-toast__icon {
  border-color: var(--ml-disc-info-border);
  background: var(--ml-disc-info-bg);
  color: var(--ml-disc-info);
}


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

@keyframes mlDiscountToastEnter {
  from {
    opacity: 0;
    transform:
      translateY(
        -8px
      );
  }

  to {
    opacity: 1;
    transform:
      translateY(
        0
      );
  }
}


@keyframes mlDiscountToastLeave {
  from {
    opacity: 1;
    transform:
      translateX(
        0
      );
  }

  to {
    opacity: 0;
    transform:
      translateX(
        18px
      );
  }
}


/* =========================================================
   CONFIG BASE
   ========================================================= */

.ml-discounts-config {
  width: 100%;
  min-width: 0;
  padding:
    18px;
}


.ml-discounts-config-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 16px;
}


/* =========================================================
   CONFIG SECTION
   ========================================================= */

.ml-discounts-config-section {
  width: 100%;
  min-width: 0;
  padding:
    16px;
  border:
    1px
    solid
    var(--ml-disc-border);
  border-radius: 12px;
  background: var(--ml-disc-surface-soft);
}


.ml-discounts-config-section__header {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  margin-bottom: 15px;
  padding-bottom: 13px;
  border-bottom:
    1px
    solid
    var(--ml-disc-border);
}


.ml-discounts-config-section__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex:
    0
    0
    36px;
  border:
    1px
    solid
    var(--ml-disc-border);
  border-radius: 9px;
  background: var(--ml-disc-surface);
  color: var(--ml-disc-text-strong);
}


.ml-discounts-config-section__icon svg {
  width: 16px;
  height: 16px;
}


.ml-discounts-config-section__header h3 {
  margin: 0;
  color: var(--ml-disc-text-strong);
  font-size: 14px;
  font-weight: 850;
}


.ml-discounts-config-section__header p {
  margin:
    4px
    0
    0;
  color: var(--ml-disc-text-muted);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.45;
}


/* =========================================================
   CONFIG GRID
   ========================================================= */

.ml-discounts-config-grid {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );
  gap:
    12px;
  width: 100%;
}


/* =========================================================
   CONFIG ACTIONS
   ========================================================= */

.ml-discounts-config-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  padding-top: 3px;
}


/* =========================================================
   MODAL · DARK DETAILS
   ========================================================= */

html[data-theme="dark"] .ml-discounts-detail__image,
body[data-theme="dark"] .ml-discounts-detail__image,
html.dark .ml-discounts-detail__image,
body.dark .ml-discounts-detail__image,
[data-theme="dark"] .ml-discounts-detail__image {
  background: #ffffff;
}


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

.ml-discounts-btn:focus-visible,
.ml-discounts-icon-btn:focus-visible,
.ml-discounts-tab:focus-visible,
.ml-discounts-pagination__button:focus-visible,
.ml-discounts-search__clear:focus-visible,
.ml-discounts-switch input:focus-visible + span,
.ml-discounts-checkbox input:focus-visible + span {
  outline:
    2px
    solid
    var(--ml-disc-text-strong);
  outline-offset: 2px;
}


/* =========================================================
   RESPONSIVE · MODALS
   ========================================================= */

@media (
  max-width: 1100px
) {
  .ml-discounts-preview__metrics {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .ml-discounts-operation-detail__metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .ml-discounts-config-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


@media (
  max-width: 840px
) {
  .ml-discounts-modal-root {
    align-items: flex-start;
    padding:
      14px;
  }


  .ml-discounts-modal {
    max-height:
      calc(
        100vh -
        28px
      );
  }


  .ml-discounts-modal__header,
  .ml-discounts-modal__body,
  .ml-discounts-modal__footer {
    padding-left: 16px;
    padding-right: 16px;
  }


  .ml-discounts-form-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .ml-discounts-detail__grid {
    grid-template-columns:
      1fr;
  }


  .ml-discounts-preview__summary {
    grid-template-columns:
      1fr;
  }


  .ml-discounts-config-grid {
    grid-template-columns:
      1fr;
  }
}


@media (
  max-width: 620px
) {
  .ml-discounts-modal-root {
    padding: 0;
  }


  .ml-discounts-modal {
    min-height: 100vh;
    max-height: 100vh;
    border:
      0;
    border-radius: 0;
  }


  .ml-discounts-modal__header {
    padding:
      15px
      13px;
  }


  .ml-discounts-modal__header h2 {
    font-size: 18px;
  }


  .ml-discounts-modal__body {
    padding:
      14px
      13px;
  }


  .ml-discounts-modal__footer {
    align-items: stretch;
    flex-direction: column;
    padding:
      12px
      13px;
  }


  .ml-discounts-modal__footer-right {
    display: grid;
    grid-template-columns:
      1fr;
    width: 100%;
  }


  .ml-discounts-form-grid {
    grid-template-columns:
      1fr;
  }


  .ml-discounts-preview__metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .ml-discounts-operation-detail__metrics {
    grid-template-columns:
      1fr;
  }


  .ml-discounts-detail__product {
    align-items: center;
  }


  .ml-discounts-detail__image {
    width: 76px;
    height: 76px;
    flex-basis: 76px;
  }


  .ml-discounts-detail__product-text h3 {
    font-size: 15px;
  }


  .ml-discounts-toast-root {
    top: 10px;
    right: 10px;
    left: 10px;
    width: auto;
  }


  .ml-discounts-switch-row {
    gap: 12px;
  }


  .ml-discounts-config {
    padding:
      12px;
  }


  .ml-discounts-config-section {
    padding:
      13px;
  }
}


@media (
  max-width: 420px
) {
  .ml-discounts-preview__metrics {
    grid-template-columns:
      1fr;
  }


  .ml-discounts-detail__product {
    align-items: flex-start;
    flex-direction: column;
  }


  .ml-discounts-detail__image {
    width: 88px;
    height: 88px;
    flex-basis: 88px;
  }
}


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

@media (
  prefers-reduced-motion: reduce
) {
  .ml-discounts-spin,
  .ml-discounts-skeleton::after,
  .ml-discounts-toast,
  .ml-discounts-toast.is-leaving {
    animation: none !important;
  }


  .ml-discounts-btn,
  .ml-discounts-icon-btn,
  .ml-discounts-tab,
  .ml-discounts-pagination__button,
  .ml-discounts-switch > span,
  .ml-discounts-switch > span::after {
    transition: none !important;
  }
}/* =========================================================
   WIRTZ HUB · MERCADO LIBRE · DESCUENTOS MASIVOS
   FRONTEND CSS

   PARTE 3 DE 3

   CONTINÚA DESPUÉS DE:
   REDUCED MOTION

   INCLUYE:
   - ALERTAS
   - OPERACIONES
   - CONFIGURACIÓN
   - AJUSTES DE ANCHO
   - MODO OSCURO FINAL
   - RESPONSIVE FINAL
   - CORRECCIONES DE SCROLL
   - LEGIBILIDAD
   ========================================================= */


/* =========================================================
   OPERACIONES · TABLA
   ========================================================= */

.ml-discounts-subpage
.ml-discounts-table-wrap {
  border-top:
    1px
    solid
    var(--ml-disc-border);
}


.ml-discounts-subpage
.ml-discounts-table {
  min-width: 1180px;
}


.ml-discounts-subpage
.ml-discounts-table thead th,
.ml-discounts-subpage
.ml-discounts-table tbody td {
  font-size: 11px;
}


.ml-discounts-subpage
.ml-discounts-table tbody td {
  font-weight: 650;
}


/* =========================================================
   OPERACIONES · CELDAS
   ========================================================= */

.ml-discounts-operation-results {
  min-width: 90px;
}


.ml-discounts-operation-results span {
  display: block;
}


.ml-discounts-operation-results
.is-success {
  color: var(--ml-disc-success);
  font-weight: 800;
}


.ml-discounts-operation-results
.is-danger {
  color: var(--ml-disc-danger);
  font-weight: 800;
}


/* =========================================================
   ALERTAS · TABLA
   ========================================================= */

#mlDiscountsAlertsTableWrap
.ml-discounts-table {
  min-width: 1260px;
}


#mlDiscountsAlertsTableWrap
.ml-discounts-table
th:nth-child(1),
#mlDiscountsAlertsTableWrap
.ml-discounts-table
td:nth-child(1) {
  width: 78px;
}


#mlDiscountsAlertsTableWrap
.ml-discounts-table
th:nth-child(2),
#mlDiscountsAlertsTableWrap
.ml-discounts-table
td:nth-child(2) {
  width: 280px;
}


#mlDiscountsAlertsTableWrap
.ml-discounts-table
th:nth-child(3),
#mlDiscountsAlertsTableWrap
.ml-discounts-table
td:nth-child(3) {
  width: 100px;
}


#mlDiscountsAlertsTableWrap
.ml-discounts-table
th:nth-child(4),
#mlDiscountsAlertsTableWrap
.ml-discounts-table
td:nth-child(4) {
  width: 105px;
}


#mlDiscountsAlertsTableWrap
.ml-discounts-table
th:nth-child(5),
#mlDiscountsAlertsTableWrap
.ml-discounts-table
td:nth-child(5) {
  width: 220px;
}


#mlDiscountsAlertsTableWrap
.ml-discounts-table
th:nth-child(6),
#mlDiscountsAlertsTableWrap
.ml-discounts-table
td:nth-child(6),
#mlDiscountsAlertsTableWrap
.ml-discounts-table
th:nth-child(7),
#mlDiscountsAlertsTableWrap
.ml-discounts-table
td:nth-child(7) {
  width: 150px;
}


#mlDiscountsAlertsTableWrap
.ml-discounts-table
th:nth-child(8),
#mlDiscountsAlertsTableWrap
.ml-discounts-table
td:nth-child(8) {
  width: 90px;
}


/* =========================================================
   ALERTAS · DESTINATARIO
   ========================================================= */

#mlDiscountsAlertsTableWrap
.ml-discounts-user-cell {
  max-width: 210px;
}


#mlDiscountsAlertsTableWrap
.ml-discounts-user-cell strong,
#mlDiscountsAlertsTableWrap
.ml-discounts-user-cell span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   ALERTAS · NIVEL
   ========================================================= */

#mlDiscountsAlertsTableWrap
.ml-discounts-badge {
  font-size: 9px;
  font-weight: 850;
}


/* =========================================================
   CONFIGURACIÓN · INPUTS
   ========================================================= */

.ml-discounts-config-grid
.ml-discounts-input {
  padding-right: 68px;
}


.ml-discounts-config-grid
.ml-discounts-field {
  min-width: 0;
}


.ml-discounts-config-grid
.ml-discounts-input-wrap {
  width: 100%;
}


.ml-discounts-config-grid
.ml-discounts-switch-row {
  width: 100%;
}


/* =========================================================
   CONFIGURACIÓN · AJUSTE SWITCH
   ========================================================= */

.ml-discounts-config-grid
.ml-discounts-switch-row:not(.ml-discounts-field--wide) {
  min-height: 78px;
}


.ml-discounts-config-grid
.ml-discounts-switch-row
strong {
  font-size: 11px;
}


.ml-discounts-config-grid
.ml-discounts-switch-row
span:not(.ml-discounts-switch > span) {
  font-size: 9.5px;
}


/* =========================================================
   CONFIGURACIÓN · SAVE
   ========================================================= */

.ml-discounts-config-actions
.ml-discounts-btn {
  min-width: 190px;
}


/* =========================================================
   FILTROS · BOTÓN ACTIVO
   ========================================================= */

#mlDiscountsAdvancedFiltersBtn.is-active {
  background: var(--ml-disc-surface-muted);
  border-color: var(--ml-disc-border-strong);
  color: var(--ml-disc-text-strong);
}


/* =========================================================
   BÚSQUEDA · EVITAR SALTOS
   ========================================================= */

.ml-discounts-search {
  contain: layout;
}


.ml-discounts-search__input {
  min-width: 0;
}


/* =========================================================
   TABLA · EVITAR DEFORMACIÓN
   ========================================================= */

.ml-discounts-table th,
.ml-discounts-table td {
  min-width: 0;
}


.ml-discounts-table td > *,
.ml-discounts-table th > * {
  min-width: 0;
}


/* =========================================================
   TABLA · LINKS
   ========================================================= */

.ml-discounts-table a {
  color: inherit;
}


.ml-discounts-table a:visited {
  color: inherit;
}


/* =========================================================
   TABLA · FONDO STICKY
   ========================================================= */

html[data-theme="dark"]
.ml-discounts-table thead th,
body[data-theme="dark"]
.ml-discounts-table thead th,
html.dark
.ml-discounts-table thead th,
body.dark
.ml-discounts-table thead th,
[data-theme="dark"]
.ml-discounts-table thead th {
  background: #0d0d0d;
}


/* =========================================================
   TABLA · HOVER OSCURO
   ========================================================= */

html[data-theme="dark"]
.ml-discounts-table tbody tr:hover td,
body[data-theme="dark"]
.ml-discounts-table tbody tr:hover td,
html.dark
.ml-discounts-table tbody tr:hover td,
body.dark
.ml-discounts-table tbody tr:hover td,
[data-theme="dark"]
.ml-discounts-table tbody tr:hover td {
  background: #101010;
}


html[data-theme="dark"]
.ml-discounts-table tbody tr.is-selected td,
body[data-theme="dark"]
.ml-discounts-table tbody tr.is-selected td,
html.dark
.ml-discounts-table tbody tr.is-selected td,
body.dark
.ml-discounts-table tbody tr.is-selected td,
[data-theme="dark"]
.ml-discounts-table tbody tr.is-selected td {
  background: #151515;
}


/* =========================================================
   DARK · INPUTS
   ========================================================= */

html[data-theme="dark"]
.ml-discounts-input,
html[data-theme="dark"]
.ml-discounts-select,
html[data-theme="dark"]
.ml-discounts-textarea,
body[data-theme="dark"]
.ml-discounts-input,
body[data-theme="dark"]
.ml-discounts-select,
body[data-theme="dark"]
.ml-discounts-textarea,
html.dark
.ml-discounts-input,
html.dark
.ml-discounts-select,
html.dark
.ml-discounts-textarea,
body.dark
.ml-discounts-input,
body.dark
.ml-discounts-select,
body.dark
.ml-discounts-textarea,
[data-theme="dark"]
.ml-discounts-input,
[data-theme="dark"]
.ml-discounts-select,
[data-theme="dark"]
.ml-discounts-textarea {
  background: #090909;
  border-color: #2b2b2b;
  color: #ffffff;
}


html[data-theme="dark"]
.ml-discounts-input::placeholder,
html[data-theme="dark"]
.ml-discounts-textarea::placeholder,
body[data-theme="dark"]
.ml-discounts-input::placeholder,
body[data-theme="dark"]
.ml-discounts-textarea::placeholder,
html.dark
.ml-discounts-input::placeholder,
html.dark
.ml-discounts-textarea::placeholder,
body.dark
.ml-discounts-input::placeholder,
body.dark
.ml-discounts-textarea::placeholder,
[data-theme="dark"]
.ml-discounts-input::placeholder,
[data-theme="dark"]
.ml-discounts-textarea::placeholder {
  color: #888888;
}


/* =========================================================
   DARK · SELECT OPTIONS
   ========================================================= */

html[data-theme="dark"]
.ml-discounts-select option,
body[data-theme="dark"]
.ml-discounts-select option,
html.dark
.ml-discounts-select option,
body.dark
.ml-discounts-select option,
[data-theme="dark"]
.ml-discounts-select option {
  background: #090909;
  color: #ffffff;
}


/* =========================================================
   DARK · PANEL
   ========================================================= */

html[data-theme="dark"]
.ml-discounts-panel,
body[data-theme="dark"]
.ml-discounts-panel,
html.dark
.ml-discounts-panel,
body.dark
.ml-discounts-panel,
[data-theme="dark"]
.ml-discounts-panel {
  background: #090909;
  border-color: #242424;
}


/* =========================================================
   DARK · TOOLBAR
   ========================================================= */

html[data-theme="dark"]
.ml-discounts-toolbar,
body[data-theme="dark"]
.ml-discounts-toolbar,
html.dark
.ml-discounts-toolbar,
body.dark
.ml-discounts-toolbar,
[data-theme="dark"]
.ml-discounts-toolbar {
  background: #0c0c0c;
}


/* =========================================================
   DARK · FILTERS
   ========================================================= */

html[data-theme="dark"]
.ml-discounts-filters,
body[data-theme="dark"]
.ml-discounts-filters,
html.dark
.ml-discounts-filters,
body.dark
.ml-discounts-filters,
[data-theme="dark"]
.ml-discounts-filters {
  background: #090909;
}


/* =========================================================
   DARK · MODAL
   ========================================================= */

html[data-theme="dark"]
.ml-discounts-modal,
body[data-theme="dark"]
.ml-discounts-modal,
html.dark
.ml-discounts-modal,
body.dark
.ml-discounts-modal,
[data-theme="dark"]
.ml-discounts-modal {
  background: #090909;
  border-color: #303030;
}


html[data-theme="dark"]
.ml-discounts-modal__header,
html[data-theme="dark"]
.ml-discounts-modal__footer,
body[data-theme="dark"]
.ml-discounts-modal__header,
body[data-theme="dark"]
.ml-discounts-modal__footer,
html.dark
.ml-discounts-modal__header,
html.dark
.ml-discounts-modal__footer,
body.dark
.ml-discounts-modal__header,
body.dark
.ml-discounts-modal__footer,
[data-theme="dark"]
.ml-discounts-modal__header,
[data-theme="dark"]
.ml-discounts-modal__footer {
  background: #090909;
}


/* =========================================================
   DARK · PREVIEW
   ========================================================= */

html[data-theme="dark"]
.ml-discounts-preview-container,
body[data-theme="dark"]
.ml-discounts-preview-container,
html.dark
.ml-discounts-preview-container,
body.dark
.ml-discounts-preview-container,
[data-theme="dark"]
.ml-discounts-preview-container {
  background: #0b0b0b;
}


html[data-theme="dark"]
.ml-discounts-preview-table thead th,
body[data-theme="dark"]
.ml-discounts-preview-table thead th,
html.dark
.ml-discounts-preview-table thead th,
body.dark
.ml-discounts-preview-table thead th,
[data-theme="dark"]
.ml-discounts-preview-table thead th {
  background: #0d0d0d;
}


html[data-theme="dark"]
.ml-discounts-preview-table tbody td,
body[data-theme="dark"]
.ml-discounts-preview-table tbody td,
html.dark
.ml-discounts-preview-table tbody td,
body.dark
.ml-discounts-preview-table tbody td,
[data-theme="dark"]
.ml-discounts-preview-table tbody td {
  background: #090909;
}


/* =========================================================
   DARK · CONFIG
   ========================================================= */

html[data-theme="dark"]
.ml-discounts-config-section,
body[data-theme="dark"]
.ml-discounts-config-section,
html.dark
.ml-discounts-config-section,
body.dark
.ml-discounts-config-section,
[data-theme="dark"]
.ml-discounts-config-section {
  background: #0b0b0b;
}


/* =========================================================
   DARK · SELECTION
   ========================================================= */

html[data-theme="dark"]
.ml-discounts-selection-bar,
body[data-theme="dark"]
.ml-discounts-selection-bar,
html.dark
.ml-discounts-selection-bar,
body.dark
.ml-discounts-selection-bar,
[data-theme="dark"]
.ml-discounts-selection-bar {
  background: #101010;
}


/* =========================================================
   DARK · TOAST
   ========================================================= */

html[data-theme="dark"]
.ml-discounts-toast,
body[data-theme="dark"]
.ml-discounts-toast,
html.dark
.ml-discounts-toast,
body.dark
.ml-discounts-toast,
[data-theme="dark"]
.ml-discounts-toast {
  background: #0b0b0b;
  border-color: #333333;
}


/* =========================================================
   LEGIBILIDAD · MODO CLARO
   ========================================================= */

.ml-discounts-header__description,
.ml-discounts-results-info,
.ml-discounts-field__label,
.ml-discounts-toolbar-control,
.ml-discounts-subpage__header p,
.ml-discounts-modal__header p,
.ml-discounts-config-section__header p {
  color: var(--ml-disc-text-soft);
  font-weight: 650;
}


.ml-discounts-table tbody td {
  color: var(--ml-disc-text);
}


.ml-discounts-table tbody td strong {
  color: var(--ml-disc-text-strong);
}


/* =========================================================
   LEGIBILIDAD · MODO OSCURO
   ========================================================= */

html[data-theme="dark"]
.ml-discounts-header__description,
html[data-theme="dark"]
.ml-discounts-results-info,
html[data-theme="dark"]
.ml-discounts-field__label,
html[data-theme="dark"]
.ml-discounts-toolbar-control,
html[data-theme="dark"]
.ml-discounts-subpage__header p,
html[data-theme="dark"]
.ml-discounts-modal__header p,
html[data-theme="dark"]
.ml-discounts-config-section__header p,
body[data-theme="dark"]
.ml-discounts-header__description,
body[data-theme="dark"]
.ml-discounts-results-info,
body[data-theme="dark"]
.ml-discounts-field__label,
body[data-theme="dark"]
.ml-discounts-toolbar-control,
body[data-theme="dark"]
.ml-discounts-subpage__header p,
body[data-theme="dark"]
.ml-discounts-modal__header p,
body[data-theme="dark"]
.ml-discounts-config-section__header p,
html.dark
.ml-discounts-header__description,
html.dark
.ml-discounts-results-info,
html.dark
.ml-discounts-field__label,
html.dark
.ml-discounts-toolbar-control,
html.dark
.ml-discounts-subpage__header p,
html.dark
.ml-discounts-modal__header p,
html.dark
.ml-discounts-config-section__header p,
body.dark
.ml-discounts-header__description,
body.dark
.ml-discounts-results-info,
body.dark
.ml-discounts-field__label,
body.dark
.ml-discounts-toolbar-control,
body.dark
.ml-discounts-subpage__header p,
body.dark
.ml-discounts-modal__header p,
body.dark
.ml-discounts-config-section__header p,
[data-theme="dark"]
.ml-discounts-header__description,
[data-theme="dark"]
.ml-discounts-results-info,
[data-theme="dark"]
.ml-discounts-field__label,
[data-theme="dark"]
.ml-discounts-toolbar-control,
[data-theme="dark"]
.ml-discounts-subpage__header p,
[data-theme="dark"]
.ml-discounts-modal__header p,
[data-theme="dark"]
.ml-discounts-config-section__header p {
  color: #c6c6c6;
}


/* =========================================================
   ANCHO COMPLETO
   ========================================================= */

.ml-discounts-page,
.ml-discounts-container,
.ml-discounts-panel,
.ml-discounts-publications,
.ml-discounts-subpage,
.ml-discounts-config {
  max-width: none !important;
}


.ml-discounts-container {
  padding-left:
    clamp(
      14px,
      1.55vw,
      28px
    );
  padding-right:
    clamp(
      14px,
      1.55vw,
      28px
    );
}


/* =========================================================
   EVITAR SCROLL HORIZONTAL GLOBAL
   ========================================================= */

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


.ml-discounts-shell,
.ml-discounts-main,
.ml-discounts-page,
.ml-discounts-container,
.ml-discounts-panel,
.ml-discounts-publications,
.ml-discounts-subpage,
.ml-discounts-config {
  min-width: 0;
  overflow-x: clip;
}


/* =========================================================
   EL SCROLL SOLO QUEDA EN LAS TABLAS
   ========================================================= */

.ml-discounts-table-wrap,
.ml-discounts-preview__table-wrap,
.ml-discounts-operation-detail__table {
  overflow-x: auto !important;
}


/* =========================================================
   EVITAR ESTIRAMIENTO DE TEXTO
   ========================================================= */

.ml-discounts-table,
.ml-discounts-preview-table {
  word-break: normal;
}


.ml-discounts-table td,
.ml-discounts-table th,
.ml-discounts-preview-table td,
.ml-discounts-preview-table th {
  overflow-wrap: normal;
}


.ml-discounts-product-title,
.ml-discounts-item-id,
.ml-discounts-item-sku,
.ml-discounts-category-cell > span,
.ml-discounts-category-cell small,
.ml-discounts-price-cell strong,
.ml-discounts-price-cell span,
.ml-discounts-date-cell strong,
.ml-discounts-date-cell span,
.ml-discounts-user-cell strong,
.ml-discounts-user-cell span {
  max-width: 100%;
}


/* =========================================================
   EVITAR IMÁGENES GRANDES
   ========================================================= */

.ml-discounts-table img,
.ml-discounts-modal img {
  max-width: 100%;
}


/* =========================================================
   FOCUS INPUT SEARCH
   ========================================================= */

.ml-discounts-search:focus-within
.ml-discounts-search__icon {
  color: var(--ml-disc-text-strong);
}


/* =========================================================
   DATE INPUT
   ========================================================= */

.ml-discounts-input[type="datetime-local"] {
  color-scheme: light;
}


html[data-theme="dark"]
.ml-discounts-input[type="datetime-local"],
body[data-theme="dark"]
.ml-discounts-input[type="datetime-local"],
html.dark
.ml-discounts-input[type="datetime-local"],
body.dark
.ml-discounts-input[type="datetime-local"],
[data-theme="dark"]
.ml-discounts-input[type="datetime-local"] {
  color-scheme: dark;
}


/* =========================================================
   AUTOFILL
   ========================================================= */

.ml-discounts-input:-webkit-autofill,
.ml-discounts-input:-webkit-autofill:hover,
.ml-discounts-input:-webkit-autofill:focus,
.ml-discounts-textarea:-webkit-autofill,
.ml-discounts-select:-webkit-autofill {
  -webkit-text-fill-color:
    var(--ml-disc-text-strong);
  box-shadow:
    0
    0
    0
    1000px
    var(--ml-disc-surface)
    inset;
  transition:
    background-color
    9999s
    ease-in-out
    0s;
}


/* =========================================================
   MOBILE · TABLE OPTIMIZATION
   ========================================================= */

@media (
  max-width: 980px
) {
  .ml-discounts-table {
    min-width: 1080px;
  }


  #mlDiscountsAlertsTableWrap
  .ml-discounts-table {
    min-width: 1120px;
  }


  .ml-discounts-operation-detail__table
  .ml-discounts-table {
    min-width: 980px;
  }


  .ml-discounts-preview-table {
    min-width: 680px;
  }
}


/* =========================================================
   MOBILE · HEADER
   ========================================================= */

@media (
  max-width: 760px
) {
  .ml-discounts-header__actions
  .ml-discounts-btn {
    min-width: 0;
  }


  .ml-discounts-header__actions
  .ml-discounts-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
  }


  .ml-discounts-tabs {
    justify-content: flex-start;
  }


  .ml-discounts-tab {
    flex:
      0
      0
      auto;
  }
}


/* =========================================================
   MOBILE · SUBPAGE ACTIONS
   ========================================================= */

@media (
  max-width: 760px
) {
  .ml-discounts-subpage__actions {
    display: grid;
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .ml-discounts-subpage__actions
  .ml-discounts-btn {
    width: 100%;
  }


  .ml-discounts-subpage__actions
  .ml-discounts-btn:last-child:nth-child(odd) {
    grid-column:
      1 /
      -1;
  }
}


/* =========================================================
   MOBILE · SELECTION
   ========================================================= */

@media (
  max-width: 700px
) {
  .ml-discounts-selection-bar__actions {
    display: grid;
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .ml-discounts-selection-bar__actions
  .ml-discounts-btn {
    width: 100%;
  }


  .ml-discounts-selection-bar__actions
  .ml-discounts-icon-btn {
    width: 100%;
  }
}


/* =========================================================
   MOBILE · CONFIG SAVE
   ========================================================= */

@media (
  max-width: 620px
) {
  .ml-discounts-config-actions {
    justify-content: stretch;
  }


  .ml-discounts-config-actions
  .ml-discounts-btn {
    width: 100%;
    min-width: 0;
  }
}


/* =========================================================
   MOBILE · TOAST
   ========================================================= */

@media (
  max-width: 480px
) {
  .ml-discounts-toast {
    border-radius: 9px;
  }


  .ml-discounts-toast__text {
    font-size: 10.5px;
  }
}


/* =========================================================
   MOBILE · PREVIEW
   ========================================================= */

@media (
  max-width: 480px
) {
  .ml-discounts-preview-placeholder {
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 110px;
    padding:
      18px;
  }


  .ml-discounts-preview__table-wrap {
    max-height: 320px;
  }
}


/* =========================================================
   MOBILE · DETAIL
   ========================================================= */

@media (
  max-width: 480px
) {
  .ml-discounts-detail__actions {
    justify-content: stretch;
  }


  .ml-discounts-detail__actions
  .ml-discounts-btn {
    width: 100%;
  }
}


/* =========================================================
   MOBILE · FILTERS
   ========================================================= */

@media (
  max-width: 480px
) {
  .ml-discounts-filter-actions {
    display: grid;
    grid-template-columns:
      1fr;
  }


  .ml-discounts-toolbar__right {
    display: grid;
    grid-template-columns:
      1fr;
  }


  .ml-discounts-toolbar-control {
    justify-content: space-between;
  }


  .ml-discounts-select-wrap--compact {
    width: 100px;
  }
}


/* =========================================================
   MOBILE · PAGINATION
   ========================================================= */

@media (
  max-width: 520px
) {
  .ml-discounts-pagination {
    justify-content: flex-start;
    width: 100%;
  }


  .ml-discounts-pagination__pages {
    flex:
      0
      0
      auto;
  }


  .ml-discounts-pagination__button {
    min-width: 30px;
    height: 30px;
    padding:
      0
      6px;
  }
}


/* =========================================================
   MOBILE · MODAL BODY
   ========================================================= */

@media (
  max-width: 620px
) {
  .ml-discounts-modal__body {
    padding-bottom: 20px;
  }


  .ml-discounts-modal__footer {
    position: sticky;
    bottom: 0;
    z-index: 4;
  }
}


/* =========================================================
   MOBILE · SWITCH
   ========================================================= */

@media (
  max-width: 420px
) {
  .ml-discounts-switch-row {
    align-items: flex-start;
  }


  .ml-discounts-switch {
    margin-top: 1px;
  }
}


/* =========================================================
   VERY LARGE SCREENS
   ========================================================= */

@media (
  min-width: 1800px
) {
  .ml-discounts-container {
    padding-left: 30px;
    padding-right: 30px;
  }


  .ml-discounts-metrics {
    gap: 13px;
  }


  .ml-discounts-metric {
    min-height: 98px;
  }


  .ml-discounts-table thead th {
    font-size: 10.5px;
  }


  .ml-discounts-table tbody td {
    font-size: 12px;
  }
}


/* =========================================================
   ULTRAWIDE
   ========================================================= */

@media (
  min-width: 2200px
) {
  .ml-discounts-container {
    padding-left: 34px;
    padding-right: 34px;
  }


  .ml-discounts-table th:nth-child(4),
  .ml-discounts-table td:nth-child(4) {
    width: 360px;
  }


  .ml-discounts-table th:nth-child(5),
  .ml-discounts-table td:nth-child(5) {
    width: 210px;
  }
}


/* =========================================================
   IMPRESIÓN
   ========================================================= */

@media print {
  .ml-discounts-header__actions,
  .ml-discounts-tabs,
  .ml-discounts-filters,
  .ml-discounts-selection-bar,
  .ml-discounts-toolbar,
  .ml-discounts-pagination-wrap,
  .ml-discounts-row-actions,
  .ml-discounts-toast-root {
    display: none !important;
  }


  .ml-discounts-page,
  .ml-discounts-container,
  .ml-discounts-panel {
    background: #ffffff !important;
    color: #000000 !important;
  }


  .ml-discounts-panel {
    border: 0;
    box-shadow: none;
  }


  .ml-discounts-table-wrap {
    overflow: visible;
  }


  .ml-discounts-table {
    min-width: 0;
    table-layout: auto;
  }
}


/* =========================================================
   FINAL · TEXTOS SIEMPRE LEGIBLES
   ========================================================= */

.ml-discounts-shell,
.ml-discounts-shell button,
.ml-discounts-shell input,
.ml-discounts-shell select,
.ml-discounts-shell textarea,
.ml-discounts-modal-root,
.ml-discounts-toast-root {
  font-family: var(--ml-disc-font);
}


.ml-discounts-shell button,
.ml-discounts-shell input,
.ml-discounts-shell select,
.ml-discounts-shell textarea {
  font-weight: 650;
}


.ml-discounts-shell h1,
.ml-discounts-shell h2,
.ml-discounts-shell h3,
.ml-discounts-modal h1,
.ml-discounts-modal h2,
.ml-discounts-modal h3 {
  color: var(--ml-disc-text-strong);
}


/* =========================================================
   FINAL · NO GLOW
   ========================================================= */

.ml-discounts-btn,
.ml-discounts-icon-btn,
.ml-discounts-input,
.ml-discounts-select,
.ml-discounts-textarea,
.ml-discounts-panel,
.ml-discounts-modal,
.ml-discounts-metric,
.ml-discounts-toast,
.ml-discounts-config-section,
.ml-discounts-preview-container {
  filter: none;
  text-shadow: none;
}


/* =========================================================
   FINAL · SIN SCROLL HORIZONTAL EN BODY
   ========================================================= */

body:has(.ml-discounts-shell) {
  overflow-x: hidden;
}


/* =========================================================
   FINAL · SAFETY WIDTH
   ========================================================= */

.ml-discounts-shell > *,
.ml-discounts-main > *,
.ml-discounts-page > *,
.ml-discounts-container > *,
.ml-discounts-panel > * {
  max-width: 100%;
}


/* =========================================================
   FINAL · FIN ARCHIVO
   ========================================================= *//* =========================================================
   AJUSTES FINALES · DESCUENTOS MASIVOS
   AGREGAR AL FINAL DEL ARCHIVO
   ========================================================= */


/* =========================================================
   1. MÉTRICAS · 7 TARJETAS SIN DEFORMAR
   ========================================================= */

.ml-discounts-metrics {
  grid-template-columns:
    repeat(
      7,
      minmax(0, 1fr)
    );
}


.ml-discounts-metric {
  min-width: 0;
  overflow: hidden;
}


.ml-discounts-metric__body {
  min-width: 0;
  overflow: hidden;
}


.ml-discounts-metric__label,
.ml-discounts-metric__detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   2. TABLA PRINCIPAL · MÁS ANCHA Y LEGIBLE
   ========================================================= */

.ml-discounts-table {
  min-width: 1480px;
}


.ml-discounts-table thead th {
  font-size: 11px;
  font-weight: 850;
}


.ml-discounts-table tbody td {
  font-size: 12px;
  font-weight: 650;
}


/* =========================================================
   3. COLUMNAS TABLA PRINCIPAL
   ========================================================= */

.ml-discounts-table__check {
  width: 44px;
}


.ml-discounts-table__image {
  width: 72px;
}


.ml-discounts-table th:nth-child(3),
.ml-discounts-table td:nth-child(3) {
  width: 150px;
}


.ml-discounts-table th:nth-child(4),
.ml-discounts-table td:nth-child(4) {
  width: 310px;
}


.ml-discounts-table th:nth-child(5),
.ml-discounts-table td:nth-child(5) {
  width: 190px;
}


.ml-discounts-table th:nth-child(6),
.ml-discounts-table td:nth-child(6) {
  width: 145px;
}


.ml-discounts-table th:nth-child(7),
.ml-discounts-table td:nth-child(7) {
  width: 145px;
}


.ml-discounts-table th:nth-child(8),
.ml-discounts-table td:nth-child(8) {
  width: 175px;
}


.ml-discounts-table th:nth-child(9),
.ml-discounts-table td:nth-child(9) {
  width: 135px;
}


.ml-discounts-table th:nth-child(10),
.ml-discounts-table td:nth-child(10) {
  width: 150px;
}


.ml-discounts-table__actions {
  width: 150px;
}


/* =========================================================
   4. TEXTO TABLA · MÁS LEGIBLE
   ========================================================= */

.ml-discounts-product-title {
  font-size: 12px;
  font-weight: 800;
}


.ml-discounts-item-id,
.ml-discounts-item-identifiers strong,
.ml-discounts-price-cell strong,
.ml-discounts-date-cell strong {
  font-size: 12px;
  font-weight: 800;
}


.ml-discounts-item-sku,
.ml-discounts-product-meta,
.ml-discounts-category-cell small,
.ml-discounts-price-cell span,
.ml-discounts-discount-cell span,
.ml-discounts-date-cell span {
  font-size: 10.5px;
  font-weight: 700;
}


/* =========================================================
   5. BADGES · MÁS GRANDES
   ========================================================= */

.ml-discounts-badge {
  min-height: 25px;
  padding:
    5px
    9px;
  font-size: 10px;
  font-weight: 850;
}


/* =========================================================
   6. CREDIBILIDAD · EVITAR TEXTO APRETADO
   ========================================================= */

.ml-discounts-discount-cell {
  gap: 5px;
}


.ml-discounts-discount-cell .ml-discounts-badge {
  align-self: flex-start;
}


.ml-discounts-discount-cell span {
  line-height: 1.35;
}


/* =========================================================
   7. ACCIONES · MÁS CÓMODAS
   ========================================================= */

.ml-discounts-row-actions {
  gap: 6px;
}


.ml-discounts-row-actions .ml-discounts-icon-btn {
  width: 36px;
  height: 36px;
  flex:
    0
    0
    36px;
}


/* =========================================================
   8. FILTROS · MÁS ESPACIO
   ========================================================= */

.ml-discounts-filters {
  padding:
    18px;
}


.ml-discounts-filters__grid,
.ml-discounts-advanced-filters {
  gap:
    12px
    12px;
}


.ml-discounts-field__label {
  font-size: 11.5px;
  font-weight: 800;
}


.ml-discounts-input,
.ml-discounts-select,
.ml-discounts-textarea {
  font-size: 13px;
  font-weight: 700;
}


/* =========================================================
   9. TOOLBAR · MÁS LEGIBLE
   ========================================================= */

.ml-discounts-toolbar {
  min-height: 58px;
}


.ml-discounts-results-info {
  font-size: 12.5px;
  font-weight: 700;
}


.ml-discounts-toolbar-control {
  font-size: 11.5px;
  font-weight: 800;
}


/* =========================================================
   10. HEADER · MEJOR PROPORCIÓN
   ========================================================= */

.ml-discounts-header__description {
  font-size: 14px;
  font-weight: 650;
}


.ml-discounts-header__actions {
  gap: 10px;
}


/* =========================================================
   11. PANEL · BORDE MÁS MARCADO
   ========================================================= */

.ml-discounts-panel {
  border-color:
    var(--ml-disc-border-strong);
}


/* =========================================================
   12. TABLA · BORDES MÁS VISIBLES
   ========================================================= */

.ml-discounts-table thead th {
  border-bottom:
    1px
    solid
    var(--ml-disc-border-strong);
}


.ml-discounts-table tbody td {
  border-bottom:
    1px
    solid
    var(--ml-disc-border);
}


/* =========================================================
   13. MODALES · MÁS AIRE
   ========================================================= */

.ml-discounts-modal__header {
  padding:
    22px
    24px;
}


.ml-discounts-modal__body {
  padding:
    22px
    24px;
}


.ml-discounts-modal__footer {
  padding:
    15px
    24px;
}


/* =========================================================
   14. FORMULARIOS MODAL
   ========================================================= */

.ml-discounts-form-grid {
  gap:
    18px
    16px;
}


.ml-discounts-preview-container {
  margin-top: 8px;
}


/* =========================================================
   15. PREVIEW · LETRAS MÁS GRANDES
   ========================================================= */

.ml-discounts-preview-metric span {
  font-size: 9.5px;
}


.ml-discounts-preview-metric strong {
  font-size: 15px;
}


.ml-discounts-preview-table thead th {
  font-size: 10px;
}


.ml-discounts-preview-table tbody td {
  font-size: 11px;
}


.ml-discounts-preview-product strong {
  font-size: 11px;
}


.ml-discounts-preview-product span {
  font-size: 9.5px;
}


/* =========================================================
   16. DETALLE · MÁS LEGIBLE
   ========================================================= */

.ml-discounts-detail-item > span {
  font-size: 9.5px;
}


.ml-discounts-detail-item > strong {
  font-size: 12px;
}


/* =========================================================
   17. MODO OSCURO · NEGRO MÁS REAL
   ========================================================= */

html[data-theme="dark"],
body[data-theme="dark"],
html.dark,
body.dark,
[data-theme="dark"] {
  --ml-disc-bg:
    #000000;

  --ml-disc-surface:
    #080808;

  --ml-disc-surface-soft:
    #0d0d0d;

  --ml-disc-surface-muted:
    #141414;

  --ml-disc-border:
    #292929;

  --ml-disc-border-strong:
    #3a3a3a;

  --ml-disc-text:
    #f4f4f4;

  --ml-disc-text-strong:
    #ffffff;

  --ml-disc-text-soft:
    #d6d6d6;

  --ml-disc-text-muted:
    #a8a8a8;
}


/* =========================================================
   18. MODO OSCURO · TABLA
   ========================================================= */

html[data-theme="dark"]
.ml-discounts-table tbody td,
body[data-theme="dark"]
.ml-discounts-table tbody td,
html.dark
.ml-discounts-table tbody td,
body.dark
.ml-discounts-table tbody td,
[data-theme="dark"]
.ml-discounts-table tbody td {
  background:
    #080808;
}


html[data-theme="dark"]
.ml-discounts-table tbody tr:hover td,
body[data-theme="dark"]
.ml-discounts-table tbody tr:hover td,
html.dark
.ml-discounts-table tbody tr:hover td,
body.dark
.ml-discounts-table tbody tr:hover td,
[data-theme="dark"]
.ml-discounts-table tbody tr:hover td {
  background:
    #101010;
}


html[data-theme="dark"]
.ml-discounts-table tbody tr.is-selected td,
body[data-theme="dark"]
.ml-discounts-table tbody tr.is-selected td,
html.dark
.ml-discounts-table tbody tr.is-selected td,
body.dark
.ml-discounts-table tbody tr.is-selected td,
[data-theme="dark"]
.ml-discounts-table tbody tr.is-selected td {
  background:
    #171717;
}


/* =========================================================
   19. MODO OSCURO · LETRAS
   ========================================================= */

html[data-theme="dark"]
.ml-discounts-table tbody td,
body[data-theme="dark"]
.ml-discounts-table tbody td,
html.dark
.ml-discounts-table tbody td,
body.dark
.ml-discounts-table tbody td,
[data-theme="dark"]
.ml-discounts-table tbody td {
  color:
    #ededed;
}


html[data-theme="dark"]
.ml-discounts-item-sku,
html[data-theme="dark"]
.ml-discounts-product-meta,
html[data-theme="dark"]
.ml-discounts-category-cell small,
html[data-theme="dark"]
.ml-discounts-price-cell span,
html[data-theme="dark"]
.ml-discounts-discount-cell span,
html[data-theme="dark"]
.ml-discounts-date-cell span,
body[data-theme="dark"]
.ml-discounts-item-sku,
body[data-theme="dark"]
.ml-discounts-product-meta,
body[data-theme="dark"]
.ml-discounts-category-cell small,
body[data-theme="dark"]
.ml-discounts-price-cell span,
body[data-theme="dark"]
.ml-discounts-discount-cell span,
body[data-theme="dark"]
.ml-discounts-date-cell span,
html.dark
.ml-discounts-item-sku,
html.dark
.ml-discounts-product-meta,
html.dark
.ml-discounts-category-cell small,
html.dark
.ml-discounts-price-cell span,
html.dark
.ml-discounts-discount-cell span,
html.dark
.ml-discounts-date-cell span,
body.dark
.ml-discounts-item-sku,
body.dark
.ml-discounts-product-meta,
body.dark
.ml-discounts-category-cell small,
body.dark
.ml-discounts-price-cell span,
body.dark
.ml-discounts-discount-cell span,
body.dark
.ml-discounts-date-cell span,
[data-theme="dark"]
.ml-discounts-item-sku,
[data-theme="dark"]
.ml-discounts-product-meta,
[data-theme="dark"]
.ml-discounts-category-cell small,
[data-theme="dark"]
.ml-discounts-price-cell span,
[data-theme="dark"]
.ml-discounts-discount-cell span,
[data-theme="dark"]
.ml-discounts-date-cell span {
  color:
    #b8b8b8;
}


/* =========================================================
   20. DESKTOP MEDIANO
   ========================================================= */

@media (
  max-width: 1600px
) {

  .ml-discounts-metrics {
    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      );
  }

}


/* =========================================================
   21. TABLET
   ========================================================= */

@media (
  max-width: 1180px
) {

  .ml-discounts-metrics {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

}


/* =========================================================
   22. MOBILE
   ========================================================= */

@media (
  max-width: 760px
) {

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


  .ml-discounts-header__actions {
    gap: 8px;
  }


  .ml-discounts-table {
    min-width:
      1320px;
  }


  .ml-discounts-modal__header {
    padding:
      16px
      14px;
  }


  .ml-discounts-modal__body {
    padding:
      16px
      14px;
  }


  .ml-discounts-modal__footer {
    padding:
      13px
      14px;
  }

}


/* =========================================================
   23. MOBILE CHICO
   ========================================================= */

@media (
  max-width: 480px
) {

  .ml-discounts-metrics {
    grid-template-columns:
      1fr;
  }


  .ml-discounts-metric {
    min-height:
      78px;
  }


  .ml-discounts-metric__value {
    font-size:
      20px;
  }

}


/* =========================================================
   24. SIN GLOW
   ========================================================= */

.ml-discounts-btn,
.ml-discounts-icon-btn,
.ml-discounts-panel,
.ml-discounts-metric,
.ml-discounts-modal,
.ml-discounts-config-section,
.ml-discounts-preview-container,
.ml-discounts-toast {
  box-shadow:
    none;
}


/* =========================================================
   25. FIN
   ========================================================= */