/* =========================================================
   UBICACIÓN:
   frontend/src/pages/mercado-libre/facturacion/
   facturacion-mercado-libre.css

   WIRTZ HUB · MERCADO LIBRE · FACTURACIÓN
   ========================================================= */


/* =========================================================
   CONTENEDOR WIRTZ HUB
   ========================================================= */

#facturacionMercadoLibreContent {
  display:
    block;

  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  padding:
    8px;

  background:
    #f5f5f5;

  overflow-x:
    hidden;

  overflow-y:
    visible;
}


html[data-theme="dark"]
#facturacionMercadoLibreContent {
  background:
    #080808;
}


/* =========================================================
   PÁGINA
   ========================================================= */

.ml-billing-page {
  --mlb-bg:
    #f5f5f5;

  --mlb-panel:
    #ffffff;

  --mlb-panel-secondary:
    #f8f8f8;

  --mlb-panel-tertiary:
    #f1f1f1;

  --mlb-line:
    #dddddd;

  --mlb-line-strong:
    #c9c9c9;

  --mlb-text:
    #171717;

  --mlb-text-soft:
    #525252;

  --mlb-text-muted:
    #767676;

  --mlb-primary:
    #111111;

  --mlb-primary-text:
    #ffffff;

  --mlb-success:
    #16784a;

  --mlb-success-bg:
    #e9f7ef;

  --mlb-danger:
    #b42318;

  --mlb-danger-bg:
    #fff0ef;

  --mlb-warning:
    #9a6700;

  --mlb-warning-bg:
    #fff7df;

  --mlb-radius:
    12px;

  --mlb-radius-sm:
    9px;

  display:
    grid;

  grid-auto-rows:
    max-content;

  align-content:
    start;

  gap:
    8px;

  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  min-height:
    0;

  margin:
    0;

  padding:
    0;

  color:
    var(
      --mlb-text
    );

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


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

html[data-theme="dark"]
.ml-billing-page,
html.dark
.ml-billing-page,
body[data-theme="dark"]
.ml-billing-page,
body.dark
.ml-billing-page {
  --mlb-bg:
    #080808;

  --mlb-panel:
    #0d0d0d;

  --mlb-panel-secondary:
    #121212;

  --mlb-panel-tertiary:
    #171717;

  --mlb-line:
    #292929;

  --mlb-line-strong:
    #3a3a3a;

  --mlb-text:
    #f4f4f4;

  --mlb-text-soft:
    #c6c6c6;

  --mlb-text-muted:
    #909090;

  --mlb-primary:
    #f3f3f3;

  --mlb-primary-text:
    #0b0b0b;

  --mlb-success:
    #5ccf91;

  --mlb-success-bg:
    #10251a;

  --mlb-danger:
    #ff8178;

  --mlb-danger-bg:
    #2b1110;

  --mlb-warning:
    #f2c14e;

  --mlb-warning-bg:
    #29200c;
}


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

.ml-billing-header {
  display:
    grid;

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

  align-items:
    center;

  gap:
    14px;

  width:
    100%;

  min-width:
    0;

  padding:
    12px
    14px;

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

  border-radius:
    var(
      --mlb-radius
    );

  background:
    var(
      --mlb-panel
    );
}


.ml-billing-header__main {
  display:
    grid;

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

  align-items:
    center;

  gap:
    11px;

  min-width:
    0;
}


.ml-billing-header__icon {
  display:
    grid;

  place-items:
    center;

  width:
    42px;

  height:
    42px;

  min-width:
    42px;

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

  border-radius:
    10px;

  background:
    var(
      --mlb-panel-secondary
    );

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


.ml-billing-header__copy {
  display:
    grid;

  gap:
    2px;

  min-width:
    0;
}


.ml-billing-header__eyebrow {
  overflow:
    hidden;

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

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ml-billing-header__title {
  margin:
    0;

  overflow:
    hidden;

  color:
    var(
      --mlb-text
    );

  font-size:
    20px;

  font-weight:
    850;

  line-height:
    1.15;

  letter-spacing:
    -0.025em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ml-billing-header__description {
  margin:
    0;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    550;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ml-billing-header__account {
  display:
    grid;

  gap:
    2px;

  min-width:
    180px;

  padding:
    8px
    10px;

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

  border-radius:
    9px;

  background:
    var(
      --mlb-panel-secondary
    );
}


.ml-billing-header__account-label {
  color:
    var(
      --mlb-text-muted
    );

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1;

  text-transform:
    uppercase;
}


.ml-billing-header__account-name {
  overflow:
    hidden;

  color:
    var(
      --mlb-text
    );

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   FILTROS
   ========================================================= */

.ml-billing-filters {
  display:
    grid;

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

  align-items:
    end;

  gap:
    8px;

  width:
    100%;

  min-width:
    0;

  padding:
    10px;

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

  border-radius:
    var(
      --mlb-radius
    );

  background:
    var(
      --mlb-panel
    );
}


/* =========================================================
   CAMPOS
   ========================================================= */

.ml-billing-field {
  display:
    grid;

  gap:
    5px;

  min-width:
    0;
}


.ml-billing-field__label {
  color:
    var(
      --mlb-text-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}


.ml-billing-select {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  width:
    100%;

  min-width:
    0;
}


.ml-billing-select
> svg,
.ml-billing-select
> i {
  position:
    absolute;

  right:
    10px;

  pointer-events:
    none;

  color:
    var(
      --mlb-text-muted
    );
}


.ml-billing-field__control {
  width:
    100%;

  min-width:
    0;

  height:
    36px;

  padding:
    0
    34px
    0
    10px;

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

  border-radius:
    8px;

  outline:
    none;

  background:
    var(
      --mlb-panel-secondary
    );

  color:
    var(
      --mlb-text
    );

  font:
    inherit;

  font-size:
    11px;

  font-weight:
    700;

  appearance:
    none;

  cursor:
    pointer;
}


.ml-billing-field__control:hover {
  border-color:
    var(
      --mlb-line-strong
    );
}


.ml-billing-field__control:focus {
  border-color:
    var(
      --mlb-text-muted
    );
}


/* =========================================================
   META FILTROS
   ========================================================= */

.ml-billing-filters__meta {
  display:
    grid;

  align-content:
    center;

  gap:
    2px;

  min-width:
    0;

  min-height:
    36px;

  padding:
    4px
    8px;
}


.ml-billing-filters__meta
span {
  color:
    var(
      --mlb-text-muted
    );

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1.2;
}


.ml-billing-filters__meta
strong {
  overflow:
    hidden;

  color:
    var(
      --mlb-text
    );

  font-size:
    10px;

  font-weight:
    750;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ml-billing-filters__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;

  flex-wrap:
    nowrap;
}


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

.ml-billing-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  min-height:
    36px;

  padding:
    0
    12px;

  border:
    1px
    solid
    transparent;

  border-radius:
    8px;

  outline:
    none;

  font:
    inherit;

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;
}


.ml-billing-btn--primary {
  border-color:
    var(
      --mlb-primary
    );

  background:
    var(
      --mlb-primary
    );

  color:
    var(
      --mlb-primary-text
    );
}


.ml-billing-btn--secondary {
  border-color:
    var(
      --mlb-line
    );

  background:
    var(
      --mlb-panel-secondary
    );

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


.ml-billing-btn--secondary:hover {
  border-color:
    var(
      --mlb-line-strong
    );

  background:
    var(
      --mlb-panel-tertiary
    );
}


.ml-billing-btn:disabled {
  opacity:
    0.55;

  cursor:
    not-allowed;
}


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

.ml-billing-page.is-loading
[data-lucide="loader-circle"],
.ml-billing-page.is-syncing
[data-lucide="loader-circle"],
.ml-billing-state__icon--loading
[data-lucide="loader-circle"] {
  animation:
    ml-billing-spin
    0.9s
    linear
    infinite;
}


@keyframes ml-billing-spin {
  from {
    transform:
      rotate(
        0deg
      );
  }

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


/* =========================================================
   CONTENIDO
   ========================================================= */

.ml-billing-content {
  display:
    grid;

  grid-auto-rows:
    max-content;

  gap:
    8px;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   PERÍODO
   ========================================================= */

.ml-billing-period-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  width:
    100%;

  min-width:
    0;

  padding:
    10px
    12px;

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

  border-radius:
    var(
      --mlb-radius
    );

  background:
    var(
      --mlb-panel
    );
}


.ml-billing-period-header__copy {
  display:
    grid;

  gap:
    1px;

  min-width:
    0;
}


.ml-billing-period-header__copy
span {
  color:
    var(
      --mlb-text-muted
    );

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1.2;

  text-transform:
    uppercase;
}


.ml-billing-period-header__copy
strong {
  color:
    var(
      --mlb-text
    );

  font-size:
    15px;

  font-weight:
    850;

  line-height:
    1.2;
}


.ml-billing-period-header__status {
  flex:
    0 0 auto;
}


.ml-billing-period-status {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  min-height:
    27px;

  padding:
    0
    8px;

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

  border-radius:
    999px;

  font-size:
    9px;

  font-weight:
    800;

  white-space:
    nowrap;
}


.ml-billing-period-status--ready {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlb-success
      )
      40%,
      var(
        --mlb-line
      )
    );

  background:
    var(
      --mlb-success-bg
    );

  color:
    var(
      --mlb-success
    );
}


.ml-billing-period-status--empty {
  background:
    var(
      --mlb-panel-secondary
    );

  color:
    var(
      --mlb-text-muted
    );
}


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

.ml-billing-summary {
  display:
    grid;

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

  gap:
    8px;

  width:
    100%;

  min-width:
    0;
}


.ml-billing-summary-card {
  display:
    grid;

  gap:
    10px;

  min-width:
    0;

  padding:
    12px;

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

  border-radius:
    var(
      --mlb-radius
    );

  background:
    var(
      --mlb-panel
    );
}


.ml-billing-summary-card__head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  min-width:
    0;
}


.ml-billing-summary-card__label {
  overflow:
    hidden;

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

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ml-billing-summary-card__icon {
  display:
    grid;

  place-items:
    center;

  width:
    28px;

  height:
    28px;

  min-width:
    28px;

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

  border-radius:
    8px;

  background:
    var(
      --mlb-panel-secondary
    );

  color:
    var(
      --mlb-text-soft
    );
}


.ml-billing-summary-card__value {
  overflow:
    hidden;

  color:
    var(
      --mlb-text
    );

  font-size:
    clamp(
      18px,
      2vw,
      25px
    );

  font-weight:
    850;

  line-height:
    1.05;

  letter-spacing:
    -0.035em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   DETALLE
   ========================================================= */

.ml-billing-detail {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1.35fr
    )
    minmax(
      280px,
      0.85fr
    );

  gap:
    8px;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   SECCIONES
   ========================================================= */

.ml-billing-detail-section {
  display:
    grid;

  grid-template-rows:
    auto
    1fr;

  min-width:
    0;

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

  border-radius:
    var(
      --mlb-radius
    );

  background:
    var(
      --mlb-panel
    );

  overflow:
    hidden;
}


.ml-billing-detail-section:first-child {
  grid-row:
    span
    2;
}


.ml-billing-detail-section__header {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-height:
    42px;

  padding:
    8px
    11px;

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

  background:
    var(
      --mlb-panel-secondary
    );
}


.ml-billing-detail-section__icon {
  display:
    grid;

  place-items:
    center;

  width:
    28px;

  height:
    28px;

  min-width:
    28px;

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

  border-radius:
    7px;

  background:
    var(
      --mlb-panel
    );

  color:
    var(
      --mlb-text-soft
    );
}


.ml-billing-detail-section__title {
  margin:
    0;

  color:
    var(
      --mlb-text
    );

  font-size:
    11px;

  font-weight:
    850;

  line-height:
    1.2;

  letter-spacing:
    0.01em;

  text-transform:
    uppercase;
}


.ml-billing-detail-section__body {
  display:
    grid;

  grid-auto-rows:
    max-content;

  align-content:
    start;

  min-width:
    0;

  padding:
    4px
    10px;
}


/* =========================================================
   FILAS
   ========================================================= */

.ml-billing-detail-row {
  display:
    grid;

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

  align-items:
    center;

  gap:
    16px;

  min-height:
    36px;

  padding:
    6px
    2px;

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


.ml-billing-detail-row:last-child {
  border-bottom:
    0;
}


.ml-billing-detail-row__label {
  min-width:
    0;

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

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.3;
}


.ml-billing-detail-row__value {
  color:
    var(
      --mlb-text
    );

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.2;

  text-align:
    right;

  white-space:
    nowrap;
}


.ml-billing-detail-row--negative
.ml-billing-detail-row__value {
  color:
    var(
      --mlb-danger
    );
}


.ml-billing-detail-row--total {
  min-height:
    42px;

  margin-top:
    2px;

  padding-top:
    9px;

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

  border-bottom:
    0;
}


.ml-billing-detail-row--total
.ml-billing-detail-row__label {
  color:
    var(
      --mlb-text
    );

  font-size:
    10px;

  font-weight:
    850;

  text-transform:
    uppercase;
}


.ml-billing-detail-row--total
.ml-billing-detail-row__value {
  font-size:
    12px;

  font-weight:
    900;
}


/* =========================================================
   SALDO
   ========================================================= */

.ml-billing-balance {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;

  padding:
    11px;

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

  border-radius:
    var(
      --mlb-radius
    );

  background:
    var(
      --mlb-panel
    );
}


.ml-billing-balance__icon {
  display:
    grid;

  place-items:
    center;

  width:
    34px;

  height:
    34px;

  min-width:
    34px;

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

  border-radius:
    9px;

  background:
    var(
      --mlb-panel-secondary
    );

  color:
    var(
      --mlb-text-soft
    );
}


.ml-billing-balance__copy {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  width:
    100%;

  min-width:
    0;
}


.ml-billing-balance__copy
span {
  color:
    var(
      --mlb-text-soft
    );

  font-size:
    10px;

  font-weight:
    750;
}


.ml-billing-balance__copy
strong {
  color:
    var(
      --mlb-danger
    );

  font-size:
    13px;

  font-weight:
    900;

  white-space:
    nowrap;
}


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

.ml-billing-empty {
  display:
    grid;

  justify-items:
    center;

  gap:
    10px;

  width:
    100%;

  min-height:
    260px;

  padding:
    34px
    20px;

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

  border-radius:
    var(
      --mlb-radius
    );

  background:
    var(
      --mlb-panel
    );

  text-align:
    center;
}


.ml-billing-empty__icon {
  display:
    grid;

  place-items:
    center;

  width:
    54px;

  height:
    54px;

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

  border-radius:
    13px;

  background:
    var(
      --mlb-panel-secondary
    );

  color:
    var(
      --mlb-text-muted
    );
}


.ml-billing-empty__copy {
  display:
    grid;

  gap:
    4px;

  max-width:
    420px;
}


.ml-billing-empty__copy
strong {
  color:
    var(
      --mlb-text
    );

  font-size:
    14px;

  font-weight:
    850;
}


.ml-billing-empty__copy
span {
  color:
    var(
      --mlb-text-muted
    );

  font-size:
    10px;

  font-weight:
    550;

  line-height:
    1.45;
}


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

.ml-billing-state {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    11px;

  width:
    100%;

  min-height:
    220px;

  padding:
    24px;

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

  border-radius:
    var(
      --mlb-radius
    );

  background:
    var(
      --mlb-panel
    );
}


.ml-billing-state__icon {
  display:
    grid;

  place-items:
    center;

  width:
    42px;

  height:
    42px;

  min-width:
    42px;

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

  border-radius:
    10px;

  background:
    var(
      --mlb-panel-secondary
    );
}


.ml-billing-state__copy {
  display:
    grid;

  gap:
    2px;
}


.ml-billing-state__copy
strong {
  color:
    var(
      --mlb-text
    );

  font-size:
    12px;

  font-weight:
    850;
}


.ml-billing-state__copy
span {
  color:
    var(
      --mlb-text-muted
    );

  font-size:
    10px;

  line-height:
    1.35;
}


.ml-billing-state--error
.ml-billing-state__icon {
  background:
    var(
      --mlb-danger-bg
    );

  color:
    var(
      --mlb-danger
    );
}


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

.ml-billing-toast-root {
  position:
    fixed;

  top:
    70px;

  right:
    14px;

  z-index:
    9999;

  display:
    grid;

  gap:
    7px;

  width:
    min(
      360px,
      calc(
        100vw -
        28px
      )
    );

  pointer-events:
    none;
}


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

.ml-billing-toast {
  display:
    grid;

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

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;

  padding:
    8px;

  border:
    1px
    solid
    var(
      --mlb-line,
      #dddddd
    );

  border-radius:
    10px;

  background:
    var(
      --mlb-panel,
      #ffffff
    );

  color:
    var(
      --mlb-text,
      #171717
    );

  pointer-events:
    auto;
}


html[data-theme="dark"]
.ml-billing-toast {
  --mlb-panel:
    #0d0d0d;

  --mlb-text:
    #f4f4f4;

  --mlb-line:
    #292929;
}


.ml-billing-toast__icon {
  display:
    grid;

  place-items:
    center;
}


.ml-billing-toast--success
.ml-billing-toast__icon {
  color:
    #25885a;
}


.ml-billing-toast--error
.ml-billing-toast__icon {
  color:
    #c9342b;
}


.ml-billing-toast__message {
  min-width:
    0;

  font-size:
    10px;

  font-weight:
    650;

  line-height:
    1.4;
}


.ml-billing-toast__close {
  display:
    grid;

  place-items:
    center;

  width:
    26px;

  height:
    26px;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    currentColor;

  cursor:
    pointer;

  opacity:
    0.7;
}


.ml-billing-toast__close:hover {
  opacity:
    1;
}


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

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


  .ml-billing-filters__actions {
    justify-content:
      flex-start;
  }


  .ml-billing-detail {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .ml-billing-detail-section:first-child {
    grid-row:
      auto;
  }
}


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

@media (
  max-width:
  800px
) {
  .ml-billing-header {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .ml-billing-header__account {
    width:
      100%;

    min-width:
      0;
  }


  .ml-billing-summary {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .ml-billing-summary-card {
    gap:
      7px;
  }


  .ml-billing-period-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }
}


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

@media (
  max-width:
  620px
) {
  #facturacionMercadoLibreContent {
    padding:
      6px;
  }


  .ml-billing-page {
    gap:
      6px;
  }


  .ml-billing-header {
    padding:
      10px;
  }


  .ml-billing-header__main {
    grid-template-columns:
      36px
      minmax(
        0,
        1fr
      );

    gap:
      8px;
  }


  .ml-billing-header__icon {
    width:
      36px;

    height:
      36px;

    min-width:
      36px;
  }


  .ml-billing-header__title {
    font-size:
      17px;
  }


  .ml-billing-header__description {
    white-space:
      normal;
  }


  .ml-billing-filters {
    grid-template-columns:
      minmax(
        0,
        1fr
      );

    padding:
      8px;
  }


  .ml-billing-filters__meta {
    padding:
      3px
      0;
  }


  .ml-billing-filters__actions {
    display:
      grid;

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

    width:
      100%;
  }


  .ml-billing-filters__actions
  .ml-billing-btn {
    width:
      100%;
  }


  .ml-billing-detail-row {
    gap:
      8px;
  }


  .ml-billing-detail-row__label {
    font-size:
      9px;
  }


  .ml-billing-detail-row__value {
    font-size:
      10px;
  }


  .ml-billing-balance__copy {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      3px;
  }


  .ml-billing-toast-root {
    top:
      60px;

    right:
      8px;

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


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

@media (
  max-width:
  420px
) {
  .ml-billing-filters__actions {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .ml-billing-period-header {
    padding:
      9px;
  }


  .ml-billing-detail-section__body {
    padding:
      3px
      8px;
  }


  .ml-billing-detail-row {
    grid-template-columns:
      minmax(
        0,
        1fr
      );

    gap:
      2px;
  }


  .ml-billing-detail-row__value {
    text-align:
      left;
  }
}


/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

.ml-billing-btn:focus-visible,
.ml-billing-field__control:focus-visible,
.ml-billing-toast__close:focus-visible {
  outline:
    2px
    solid
    currentColor;

  outline-offset:
    2px;
}


/* =========================================================
   REDUCIR MOVIMIENTO
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {
  .ml-billing-page *,
  .ml-billing-page *::before,
  .ml-billing-page *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}


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

@media print {
  #facturacionMercadoLibreContent {
    padding:
      0;

    background:
      #ffffff;
  }


  .ml-billing-header__account,
  .ml-billing-filters,
  .ml-billing-period-status,
  .ml-billing-toast-root {
    display:
      none !important;
  }


  .ml-billing-page {
    color:
      #111111;
  }


  .ml-billing-header,
  .ml-billing-period-header,
  .ml-billing-summary-card,
  .ml-billing-detail-section,
  .ml-billing-balance {
    break-inside:
      avoid;

    border-color:
      #cfcfcf;

    background:
      #ffffff;

    color:
      #111111;
  }
}