/* =========================================================
   ML RENTABILIDAD · DESCUENTOS
   SIMULADOR / COMPARACIÓN / HISTORIAL
   RESPONSIVE / PREMIUM
   ========================================================= */


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

#pageDescuentos {
  width: 100%;
  min-width: 0;
}


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

.discounts-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 18px;
}

.discounts-page-header > div:first-child {
  min-width: 0;
}

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

  color: var(--text);

  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 900;

  line-height: 1;

  letter-spacing: -0.04em;
}

.discounts-page-header p {
  margin: 8px 0 0;

  color: var(--muted);

  font-size: 13px;
  font-weight: 600;

  line-height: 1.5;
}

.discounts-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 8px;
}


/* =========================================================
   SURFACES
   ========================================================= */

.discount-selector-surface,
.discount-control-surface,
.discount-summary-surface,
.discounts-history-surface {
  margin-bottom: 16px;

  overflow: hidden;

  border-radius: 14px;
}


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

.discount-selector-surface .surface-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 15px 16px;

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

.discount-selector-surface .surface-header h2,
.discount-control-header h2,
.discount-summary-header h2,
.discounts-history-header h2 {
  margin: 0;

  color: var(--text);

  font-size: 15px;
  font-weight: 850;

  letter-spacing: -0.025em;
}


/* =========================================================
   SELECTOR
   ========================================================= */

.discount-selector-body {
  display: grid;

  grid-template-columns:
    minmax(280px, 0.8fr)
    minmax(0, 1.2fr);

  gap: 14px;

  padding: 16px;
}

.discount-calculation-select {
  width: 100%;
  min-height: 42px;

  padding:
    0
    11px;

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

  border-radius: 10px;

  outline: 0;

  background: var(--surface-2);

  color: var(--text);

  font-size: 10px;
  font-weight: 750;

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

.discount-calculation-select:focus {
  border-color: var(--accent-border);

  box-shadow:
    0 0 0 3px
    var(--focus-ring);
}


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

.discount-selected-product {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 10px;

  padding: 12px;

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

  border-radius: 12px;

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

.discount-selected-empty {
  min-height: 90px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  color: var(--muted);

  font-size: 9px;
  font-weight: 700;

  text-align: center;
}

.discount-selected-empty svg {
  width: 16px;
  height: 16px;
}

.discount-selected-product-main {
  display: flex;
  align-items: center;

  gap: 10px;
}

.discount-selected-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

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

  border-radius: 10px;

  background:
    var(--accent-soft);

  color:
    var(--accent);
}

.discount-selected-icon svg {
  width: 15px;
  height: 15px;
}

.discount-selected-product-main > div:last-child {
  min-width: 0;

  display: grid;

  gap: 2px;
}

.discount-selected-product-main span {
  color: var(--muted);

  font-size: 8px;
  font-weight: 700;
}

.discount-selected-product-main strong {
  overflow: hidden;

  color: var(--text);

  font-size: 11px;
  font-weight: 850;

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

.discount-selected-metrics {
  display: grid;

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

  gap: 7px;
}

.discount-selected-metrics > div {
  min-width: 0;

  display: grid;

  gap: 2px;

  padding: 8px;

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

  border-radius: 9px;

  background: var(--surface);
}

.discount-selected-metrics span {
  color: var(--muted);

  font-size: 7px;
  font-weight: 700;
}

.discount-selected-metrics strong {
  overflow: hidden;

  color: var(--text);

  font-size: 9px;
  font-weight: 850;

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


/* =========================================================
   CONTROL
   ========================================================= */

.discount-control-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  padding: 15px 16px;

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

.discount-value-input {
  min-width: 94px;
  min-height: 42px;

  display: flex;
  align-items: center;

  overflow: hidden;

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

  border-radius: 10px;

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

.discount-value-input input {
  width: 100%;
  min-width: 0;
  min-height: 40px;

  padding:
    0
    9px;

  border: 0;
  outline: 0;

  background: transparent;

  color: var(--text);

  font-size: 12px;
  font-weight: 900;

  text-align: right;
}

.discount-value-input span {
  align-self: stretch;

  min-width: 32px;

  display: grid;
  place-items: center;

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

  color: var(--accent);

  font-size: 10px;
  font-weight: 900;
}

.discount-control-body {
  display: grid;

  gap: 14px;

  padding: 16px;
}


/* =========================================================
   RANGE
   ========================================================= */

.discount-range {
  width: 100%;

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


/* =========================================================
   PRESETS
   ========================================================= */

.discount-presets {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;
}

.discount-presets button {
  min-width: 54px;
  min-height: 31px;

  padding:
    0
    10px;

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

  border-radius: 8px;

  background: var(--surface-2);

  color: var(--muted);

  font-size: 9px;
  font-weight: 800;

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

.discount-presets button:hover {
  border-color: var(--accent-border);

  background: var(--accent-soft);

  color: var(--text);

  transform: translateY(-1px);
}

.discount-presets button.active {
  border-color: var(--accent-border);

  background: var(--accent-soft);

  color: var(--accent);
}


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

.discount-actions {
  min-height: 42px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}

.discount-message {
  min-width: 0;

  color: var(--muted);

  font-size: 9px;
  font-weight: 700;
}

.discount-message.success {
  color: var(--success);
}

.discount-message.error {
  color: var(--danger);
}


/* =========================================================
   COMPARISON GRID
   ========================================================= */

.discount-comparison-grid {
  display: grid;

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

  gap: 16px;

  margin-bottom: 16px;
}


/* =========================================================
   RESULT CARD
   ========================================================= */

.discount-result-card {
  min-width: 0;

  overflow: hidden;

  border-radius: 14px;
}

.discount-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 15px 16px;

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

.discount-result-header h2 {
  margin: 0;

  color: var(--text);

  font-size: 15px;
  font-weight: 850;
}

.discount-result-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

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

  border-radius: 9px;

  background: var(--surface-2);

  color: var(--muted);
}

.discount-result-icon svg {
  width: 15px;
  height: 15px;
}


/* =========================================================
   PRICE BLOCK
   ========================================================= */

.discount-price-block {
  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  gap: 10px;

  padding: 16px;

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

.discount-price-block > span {
  grid-row: 1;

  color: var(--muted);

  font-size: 8px;
  font-weight: 700;
}

.discount-price-block > strong {
  grid-row: 2;

  color: var(--text);

  font-size: 15px;
  font-weight: 900;

  letter-spacing: -0.025em;

  white-space: nowrap;
}

.discount-price-block > span:nth-of-type(2),
.discount-price-block > strong:nth-of-type(2) {
  text-align: right;
}

.discount-price-arrow {
  grid-column: 2;
  grid-row:
    1 /
    3;

  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

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

  border-radius: 999px;

  background: var(--surface-2);

  color: var(--muted);
}

.discount-price-arrow svg {
  width: 13px;
  height: 13px;
}

.discount-main-price {
  color:
    var(--accent) !important;
}


/* =========================================================
   RESULT LINES
   ========================================================= */

.discount-result-lines {
  display: grid;

  gap: 7px;

  padding: 14px 16px;
}

.discount-result-lines > div {
  min-height: 36px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  padding:
    0
    10px;

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

  border-radius: 9px;

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

.discount-result-lines span {
  color: var(--muted);

  font-size: 8px;
  font-weight: 700;
}

.discount-result-lines strong {
  color: var(--text);

  font-size: 9px;
  font-weight: 850;

  text-align: right;

  white-space: nowrap;
}


/* =========================================================
   FINAL RESULT
   ========================================================= */

.discount-final-result {
  margin:
    0
    16px
    12px;

  display: grid;

  gap: 4px;

  padding: 12px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--success) 28%,
      var(--border)
    );

  border-radius: 11px;

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

.discount-final-result span {
  color: var(--muted);

  font-size: 8px;
  font-weight: 700;
}

.discount-final-result strong {
  color: var(--text);

  font-size: 19px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: -0.03em;
}

.discount-final-result strong.positive {
  color: var(--success);
}

.discount-final-result strong.negative {
  color: var(--danger);
}


/* =========================================================
   MARKUP
   ========================================================= */

.discount-markup-result {
  display: grid;

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

  gap: 8px;

  padding:
    0
    16px
    16px;
}

.discount-markup-result > div {
  min-width: 0;

  display: grid;

  gap: 3px;

  padding: 10px;

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

  border-radius: 10px;

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

.discount-markup-result span {
  color: var(--muted);

  font-size: 8px;
  font-weight: 700;
}

.discount-markup-result strong {
  overflow: hidden;

  color: var(--text);

  font-size: 13px;
  font-weight: 900;

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

.discount-markup-result strong.positive {
  color: var(--success);
}

.discount-markup-result strong.negative {
  color: var(--danger);
}


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

.discount-summary-header {
  padding:
    14px
    16px;

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

.discount-summary-grid {
  display: grid;

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

.discount-summary-grid > div {
  min-width: 0;

  display: grid;

  gap: 3px;

  padding: 12px;

  border-right:
    1px solid
    var(--border);
}

.discount-summary-grid > div:last-child {
  border-right: 0;
}

.discount-summary-grid span {
  color: var(--muted);

  font-size: 7px;
  font-weight: 700;
}

.discount-summary-grid strong {
  overflow: hidden;

  color: var(--text);

  font-size: 10px;
  font-weight: 850;

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

.discount-summary-grid strong.positive {
  color: var(--success);
}

.discount-summary-grid strong.negative {
  color: var(--danger);
}


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

.discounts-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  padding: 14px 16px;

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

.discounts-history-count {
  min-width: 90px;

  display: grid;

  gap: 1px;

  padding:
    7px
    10px;

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

  border-radius: 9px;

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

.discounts-history-count span {
  color: var(--muted);

  font-size: 7px;
  font-weight: 700;

  text-transform: uppercase;
}

.discounts-history-count strong {
  color: var(--text);

  font-size: 14px;
  font-weight: 900;

  line-height: 1;
}


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

.discounts-history-table-wrap {
  width: 100%;

  overflow-x: auto;
}

.discounts-history-table {
  width: 100%;

  min-width: 1450px;

  border-collapse: collapse;
}

.discounts-history-table th {
  padding:
    10px
    9px;

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

  background: var(--surface-2);

  color: var(--muted);

  font-size: 8px;
  font-weight: 850;

  text-align: left;

  text-transform: uppercase;

  white-space: nowrap;
}

.discounts-history-table td {
  padding:
    9px;

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

  color: var(--text-2);

  font-size: 9px;
  font-weight: 700;

  vertical-align: middle;

  white-space: nowrap;

  transition:
    background var(--transition);
}

.discounts-history-table tbody tr:hover td {
  background:
    color-mix(
      in srgb,
      var(--surface-3) 72%,
      transparent
    );
}


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

.discount-history-date {
  display: grid;

  gap: 1px;
}

.discount-history-date strong {
  color: var(--text-2);

  font-size: 9px;
  font-weight: 750;
}

.discount-history-date small {
  color: var(--muted);

  font-size: 7px;
  font-weight: 600;
}


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

.discount-history-product {
  display: block;

  max-width: 220px;

  overflow: hidden;

  color: var(--text);

  font-size: 9px;
  font-weight: 850;

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

.discount-history-sku {
  display: inline-flex;
  align-items: center;

  min-height: 23px;

  padding:
    0
    7px;

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

  border-radius: 999px;

  background: var(--surface-2);

  color: var(--text-2);

  font-size: 8px;
  font-weight: 800;
}

.discount-history-percent {
  display: inline-flex;
  align-items: center;

  min-height: 23px;

  padding:
    0
    7px;

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

  border-radius: 999px;

  background: var(--accent-soft);

  color: var(--accent);

  font-size: 8px;
  font-weight: 850;
}


/* =========================================================
   POSITIVE / NEGATIVE
   ========================================================= */

.discounts-history-table td.positive strong {
  color: var(--success);
}

.discounts-history-table td.negative strong {
  color: var(--danger);
}


/* =========================================================
   DELETE
   ========================================================= */

.discount-history-delete {
  width: 29px;
  height: 29px;

  display: grid;
  place-items: center;

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

  border-radius: 7px;

  background: var(--surface-2);

  color: var(--muted);

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

.discount-history-delete:hover {
  border-color:
    color-mix(
      in srgb,
      var(--danger) 40%,
      var(--border)
    );

  background:
    var(--danger-soft);

  color:
    var(--danger);

  transform:
    translateY(-1px);
}

.discount-history-delete svg {
  width: 12px;
  height: 12px;
}


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

.discount-history-empty {
  min-height: 170px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 5px;

  padding: 20px;

  color: var(--muted);

  text-align: center;
}

.discount-history-empty svg {
  width: 22px;
  height: 22px;

  margin-bottom: 3px;
}

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

  font-size: 11px;
  font-weight: 850;
}

.discount-history-empty span {
  color: var(--muted);

  font-size: 9px;
  font-weight: 600;
}


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

@media (
  max-width: 1150px
) {
  .discount-selector-body {
    grid-template-columns: 1fr;
  }

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

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

  .discount-summary-grid > div {
    border-bottom:
      1px solid
      var(--border);
  }
}


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

@media (
  max-width: 900px
) {
  .discounts-page-header {
    flex-direction: column;

    align-items: stretch;
  }

  .discounts-header-actions {
    justify-content: flex-start;
  }

  .discount-comparison-grid {
    grid-template-columns: 1fr;
  }
}


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

@media (
  max-width: 700px
) {
  .discounts-header-actions {
    display: grid;

    grid-template-columns:
      1fr
      1fr;
  }

  .discounts-header-actions button {
    width: 100%;

    justify-content: center;
  }

  .discount-control-header {
    align-items: stretch;

    flex-direction: column;
  }

  .discount-value-input {
    width: 100%;
  }

  .discount-selected-metrics {
    grid-template-columns: 1fr;
  }

  .discount-price-block {
    grid-template-columns: 1fr;
  }

  .discount-price-block > span,
  .discount-price-block > strong,
  .discount-price-block > span:nth-of-type(2),
  .discount-price-block > strong:nth-of-type(2) {
    grid-column: 1;

    text-align: left;
  }

  .discount-price-block > span:first-of-type {
    grid-row: 1;
  }

  .discount-price-block > strong:first-of-type {
    grid-row: 2;
  }

  .discount-price-arrow {
    grid-column: 1;
    grid-row: 3;

    margin:
      2px
      0;

    transform:
      rotate(0deg);
  }

  .discount-price-block > span:nth-of-type(2) {
    grid-row: 4;
  }

  .discount-price-block > strong:nth-of-type(2) {
    grid-row: 5;
  }

  .discount-markup-result {
    grid-template-columns: 1fr;
  }

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

  .discounts-history-header {
    align-items: stretch;

    flex-direction: column;
  }

  .discounts-history-count {
    width: 100%;
  }
}


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

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

  .discount-selector-body,
  .discount-control-body,
  .discount-result-lines {
    padding-left: 12px;
    padding-right: 12px;
  }

  .discount-result-header,
  .discount-summary-header,
  .discounts-history-header {
    padding-left: 12px;
    padding-right: 12px;
  }

  .discount-final-result {
    margin-left: 12px;
    margin-right: 12px;
  }

  .discount-markup-result {
    padding-left: 12px;
    padding-right: 12px;
  }

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

  .discount-actions {
    align-items: stretch;

    flex-direction: column;
  }

  .discount-actions .primary-button {
    width: 100%;

    justify-content: center;
  }
}


/* =========================================================
   TOUCH
   ========================================================= */

@media (
  hover: none
) {
  .discount-presets button:hover,
  .discount-history-delete:hover {
    transform: none;
  }
}


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

@media (
  prefers-reduced-motion:
  reduce
) {
  .discount-presets button,
  .discount-history-delete {
    transition: none !important;
  }
}/* =========================================================
   FIX · DESCUENTOS
   MÁS CONTRASTE / DIVISIONES / TIPOGRAFÍA MÁS GRANDE
   ========================================================= */

#pageDescuentos {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* =========================================================
   VARIABLES DE CONTRASTE LOCAL
   ========================================================= */

html[data-theme="light"] #pageDescuentos {
  --text:
    #0a0f1a;

  --text-2:
    #1f2937;

  --muted:
    #475569;

  --muted-2:
    #64748b;

  --border:
    rgba(15, 23, 42, 0.16);

  --border-soft:
    rgba(15, 23, 42, 0.11);

  --border-strong:
    rgba(15, 23, 42, 0.28);
}


html[data-theme="dark"] #pageDescuentos {
  --text:
    #f8fafc;

  --text-2:
    #dbe3ee;

  --muted:
    #aeb8c6;

  --muted-2:
    #8f9bad;

  --border:
    rgba(255, 255, 255, 0.13);

  --border-soft:
    rgba(255, 255, 255, 0.08);

  --border-strong:
    rgba(255, 255, 255, 0.22);
}


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

#pageDescuentos .discounts-page-header h1 {
  color: var(--text) !important;
  font-weight: 950 !important;
}

#pageDescuentos .discounts-page-header p {
  color: var(--text-2) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

#pageDescuentos .section-kicker,
#pageDescuentos .surface-kicker {
  color: var(--text-2) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
}


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

#pageDescuentos button,
#pageDescuentos .primary-button,
#pageDescuentos .secondary-button {
  font-size: 10px !important;
  font-weight: 900 !important;
}


/* =========================================================
   SURFACES / DIVISIONES PRINCIPALES
   ========================================================= */

#pageDescuentos .discount-selector-surface,
#pageDescuentos .discount-control-surface,
#pageDescuentos .discount-summary-surface,
#pageDescuentos .discounts-history-surface,
#pageDescuentos .discount-result-card {
  border:
    1px solid
    var(--border-strong) !important;
}

#pageDescuentos .discount-selector-surface .surface-header,
#pageDescuentos .discount-control-header,
#pageDescuentos .discount-result-header,
#pageDescuentos .discount-summary-header,
#pageDescuentos .discounts-history-header {
  border-bottom:
    1px solid
    var(--border-strong) !important;
}


/* =========================================================
   TÍTULOS DE BLOQUES
   ========================================================= */

#pageDescuentos .surface-header h2,
#pageDescuentos .discount-control-header h2,
#pageDescuentos .discount-result-header h2,
#pageDescuentos .discount-summary-header h2,
#pageDescuentos .discounts-history-header h2 {
  color: var(--text) !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}


/* =========================================================
   SELECTOR
   ========================================================= */

#pageDescuentos .discount-selector-body {
  gap: 16px !important;
}

#pageDescuentos .discount-calculation-select {
  min-height: 44px !important;

  border-color:
    var(--border-strong) !important;

  color:
    var(--text) !important;

  font-size: 11px !important;
  font-weight: 850 !important;
}

#pageDescuentos .field {
  color:
    var(--text-2) !important;

  font-size: 10px !important;
  font-weight: 850 !important;
}


/* =========================================================
   PRODUCTO SELECCIONADO
   ========================================================= */

#pageDescuentos .discount-selected-product {
  border-color:
    var(--border-strong) !important;
}

#pageDescuentos .discount-selected-product-main span {
  color:
    var(--text-2) !important;

  font-size: 9px !important;
  font-weight: 800 !important;
}

#pageDescuentos .discount-selected-product-main strong {
  color:
    var(--text) !important;

  font-size: 12px !important;
  font-weight: 950 !important;
}

#pageDescuentos .discount-selected-metrics {
  gap: 8px !important;
}

#pageDescuentos .discount-selected-metrics > div {
  border-color:
    var(--border-strong) !important;

  padding:
    9px !important;
}

#pageDescuentos .discount-selected-metrics span {
  color:
    var(--text-2) !important;

  font-size: 8px !important;
  font-weight: 800 !important;
}

#pageDescuentos .discount-selected-metrics strong {
  color:
    var(--text) !important;

  font-size: 10px !important;
  font-weight: 950 !important;
}


/* =========================================================
   CONTROL DESCUENTO
   ========================================================= */

#pageDescuentos .discount-value-input {
  border-color:
    var(--border-strong) !important;
}

#pageDescuentos .discount-value-input input {
  color:
    var(--text) !important;

  font-size: 13px !important;
  font-weight: 950 !important;
}

#pageDescuentos .discount-value-input span {
  font-size: 11px !important;
  font-weight: 950 !important;
}

#pageDescuentos .discount-presets button {
  min-height: 34px !important;

  border-color:
    var(--border-strong) !important;

  color:
    var(--text-2) !important;

  font-size: 10px !important;
  font-weight: 900 !important;
}

#pageDescuentos .discount-presets button.active {
  color:
    var(--accent) !important;

  font-weight: 950 !important;
}

#pageDescuentos .discount-message {
  color:
    var(--text-2) !important;

  font-size: 10px !important;
  font-weight: 800 !important;
}


/* =========================================================
   PRECIO ACTUAL / SUGERIDO
   ========================================================= */

#pageDescuentos .discount-price-block {
  border-bottom:
    1px solid
    var(--border-strong) !important;
}

#pageDescuentos .discount-price-block > span {
  color:
    var(--text-2) !important;

  font-size: 9px !important;
  font-weight: 800 !important;
}

#pageDescuentos .discount-price-block > strong {
  color:
    var(--text) !important;

  font-size: 17px !important;
  font-weight: 950 !important;
}

#pageDescuentos .discount-main-price {
  font-size: 19px !important;
  font-weight: 950 !important;
}


/* =========================================================
   RESULT LINES
   ========================================================= */

#pageDescuentos .discount-result-lines {
  gap: 8px !important;
}

#pageDescuentos .discount-result-lines > div {
  min-height: 40px !important;

  border-color:
    var(--border-strong) !important;
}

#pageDescuentos .discount-result-lines span {
  color:
    var(--text-2) !important;

  font-size: 9px !important;
  font-weight: 800 !important;
}

#pageDescuentos .discount-result-lines strong {
  color:
    var(--text) !important;

  font-size: 10px !important;
  font-weight: 950 !important;
}


/* =========================================================
   GANANCIA FINAL
   ========================================================= */

#pageDescuentos .discount-final-result {
  border-width:
    1px !important;

  border-color:
    color-mix(
      in srgb,
      var(--success) 45%,
      var(--border-strong)
    ) !important;
}

#pageDescuentos .discount-final-result span {
  color:
    var(--text-2) !important;

  font-size: 9px !important;
  font-weight: 850 !important;
}

#pageDescuentos .discount-final-result strong {
  font-size: 21px !important;
  font-weight: 950 !important;
}


/* =========================================================
   MARKUP / DIFERENCIA
   ========================================================= */

#pageDescuentos .discount-markup-result > div {
  border-color:
    var(--border-strong) !important;
}

#pageDescuentos .discount-markup-result span {
  color:
    var(--text-2) !important;

  font-size: 9px !important;
  font-weight: 850 !important;
}

#pageDescuentos .discount-markup-result strong {
  color:
    var(--text) !important;

  font-size: 14px !important;
  font-weight: 950 !important;
}


/* =========================================================
   RESUMEN
   ========================================================= */

#pageDescuentos .discount-summary-grid {
  border-top:
    1px solid
    var(--border-strong);
}

#pageDescuentos .discount-summary-grid > div {
  padding:
    14px !important;

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

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

#pageDescuentos .discount-summary-grid span {
  color:
    var(--text-2) !important;

  font-size: 8px !important;
  font-weight: 850 !important;
}

#pageDescuentos .discount-summary-grid strong {
  color:
    var(--text) !important;

  font-size: 11px !important;
  font-weight: 950 !important;
}


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

#pageDescuentos .discounts-history-count {
  border-color:
    var(--border-strong) !important;
}

#pageDescuentos .discounts-history-count span {
  color:
    var(--text-2) !important;

  font-size: 8px !important;
  font-weight: 850 !important;
}

#pageDescuentos .discounts-history-count strong {
  color:
    var(--text) !important;

  font-size: 15px !important;
  font-weight: 950 !important;
}


/* =========================================================
   TABLA HISTORIAL
   ========================================================= */

#pageDescuentos .discounts-history-table th {
  border-bottom:
    1px solid
    var(--border-strong) !important;

  color:
    var(--text-2) !important;

  font-size: 9px !important;
  font-weight: 950 !important;
}

#pageDescuentos .discounts-history-table td {
  border-bottom:
    1px solid
    var(--border) !important;

  color:
    var(--text) !important;

  font-size: 10px !important;
  font-weight: 800 !important;
}

#pageDescuentos .discount-history-date strong {
  color:
    var(--text) !important;

  font-size: 10px !important;
  font-weight: 900 !important;
}

#pageDescuentos .discount-history-date small {
  color:
    var(--text-2) !important;

  font-size: 8px !important;
  font-weight: 750 !important;
}

#pageDescuentos .discount-history-product {
  color:
    var(--text) !important;

  font-size: 10px !important;
  font-weight: 950 !important;
}

#pageDescuentos .discount-history-sku,
#pageDescuentos .discount-history-percent {
  font-size: 9px !important;
  font-weight: 900 !important;
}


/* =========================================================
   POSITIVO / NEGATIVO
   ========================================================= */

#pageDescuentos .positive {
  font-weight: 950 !important;
}

#pageDescuentos .negative {
  font-weight: 950 !important;
}


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

#pageDescuentos .discount-selected-empty,
#pageDescuentos .discount-history-empty {
  color:
    var(--text-2) !important;

  font-size: 10px !important;
  font-weight: 800 !important;
}

#pageDescuentos .discount-history-empty strong {
  color:
    var(--text) !important;

  font-size: 12px !important;
  font-weight: 950 !important;
}

#pageDescuentos .discount-history-empty span {
  color:
    var(--text-2) !important;

  font-size: 10px !important;
  font-weight: 750 !important;
}


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

#pageDescuentos .discount-history-delete {
  border-color:
    var(--border-strong) !important;
}


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

@media (
  max-width: 700px
) {
  #pageDescuentos .discount-result-lines span {
    font-size: 10px !important;
  }

  #pageDescuentos .discount-result-lines strong {
    font-size: 11px !important;
  }

  #pageDescuentos .discount-summary-grid span {
    font-size: 9px !important;
  }

  #pageDescuentos .discount-summary-grid strong {
    font-size: 12px !important;
  }
}