/* =========================================================
   UBICACIÓN:
   frontend/src/pages/mercado-libre/mercado-pago/ventas-dia/
   mercado-pago-ventas-dia.css

   WIRTZ HUB · MERCADO LIBRE · MERCADO PAGO
   VENTAS DEL DÍA

   PARTE 1 DE 3

   DISEÑO:
   - Premium
   - Compacto
   - Legible
   - Responsive
   - Negro real en modo oscuro
   - Blanco real en modo claro
   - Sin glow
   - Sin scroll horizontal de página
   - Bordes finos notorios
   - Texto fuerte
   ========================================================= */


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

.mercado-pago-ventas-page {
  --mpv-bg:
    #f6f7f9;

  --mpv-surface:
    #ffffff;

  --mpv-surface-2:
    #f8f9fb;

  --mpv-surface-3:
    #f1f3f5;

  --mpv-surface-4:
    #e9ecef;

  --mpv-text:
    #080808;

  --mpv-text-strong:
    #000000;

  --mpv-text-soft:
    #282b30;

  --mpv-muted:
    #5f646c;

  --mpv-muted-2:
    #7b8088;

  --mpv-line:
    #d9dde2;

  --mpv-line-strong:
    #c5cbd2;

  --mpv-hover:
    #f1f3f5;

  --mpv-hover-strong:
    #eaedf0;

  --mpv-focus:
    rgba(
      17,
      24,
      39,
      .12
    );

  --mpv-success:
    #177245;

  --mpv-success-bg:
    #eef9f3;

  --mpv-success-line:
    #c7e8d4;

  --mpv-warning:
    #8a5a00;

  --mpv-warning-bg:
    #fff8e6;

  --mpv-warning-line:
    #efddaa;

  --mpv-danger:
    #b42318;

  --mpv-danger-bg:
    #fff2f0;

  --mpv-danger-line:
    #efc8c4;

  --mpv-info:
    #155eef;

  --mpv-info-bg:
    #eef4ff;

  --mpv-info-line:
    #c9d8ff;

  --mpv-neutral:
    #495057;

  --mpv-neutral-bg:
    #f2f4f6;

  --mpv-neutral-line:
    #d7dce1;

  --mpv-shadow:
    0 1px 2px rgba(
      0,
      0,
      0,
      .04
    );

  --mpv-shadow-lg:
    0 18px 50px rgba(
      0,
      0,
      0,
      .14
    );

  --mpv-radius-sm:
    8px;

  --mpv-radius:
    12px;

  --mpv-radius-lg:
    16px;

  --mpv-transition:
    160ms ease;

  width:
    100%;

  min-width:
    0;

  max-width:
    none;

  display:
    flex;

  flex-direction:
    column;

  gap:
    16px;

  padding:
    0;

  color:
    var(
      --mpv-text
    );

  background:
    transparent;

  font-size:
    14px;

  line-height:
    1.45;

  overflow-x:
    hidden;
}


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

.mercado-pago-ventas-page,
.mercado-pago-ventas-page *,
.mercado-pago-ventas-page *::before,
.mercado-pago-ventas-page *::after,
.mp-ventas-drawer,
.mp-ventas-drawer *,
.mp-ventas-modal,
.mp-ventas-modal *,
.mp-ventas-toast,
.mp-ventas-toast * {
  box-sizing:
    border-box;
}


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

.mercado-pago-ventas-page button,
.mp-ventas-drawer button,
.mp-ventas-modal button,
.mp-ventas-toast button,
.mercado-pago-ventas-page input,
.mercado-pago-ventas-page select {
  font:
    inherit;
}


.mercado-pago-ventas-page button,
.mp-ventas-drawer button,
.mp-ventas-modal button,
.mp-ventas-toast button {
  color:
    inherit;
}


.mercado-pago-ventas-page button:not(:disabled),
.mp-ventas-drawer button:not(:disabled),
.mp-ventas-modal button:not(:disabled),
.mp-ventas-toast button:not(:disabled) {
  cursor:
    pointer;
}


.mercado-pago-ventas-page button:disabled,
.mp-ventas-drawer button:disabled,
.mp-ventas-modal button:disabled {
  cursor:
    not-allowed;

  opacity:
    .55;
}


.mercado-pago-ventas-page svg,
.mp-ventas-drawer svg,
.mp-ventas-modal svg,
.mp-ventas-toast svg {
  width:
    18px;

  height:
    18px;

  flex:
    0 0 auto;

  stroke-width:
    1.9;
}


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

.mp-ventas-header {
  position:
    relative;

  z-index:
    8;

  width:
    100%;

  min-width:
    0;

  background:
    var(
      --mpv-surface
    );

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

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

  box-shadow:
    var(
      --mpv-shadow
    );

  overflow:
    visible;
}


.mp-ventas-header__main {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  padding:
    20px 22px;
}


.mp-ventas-header__identity {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}


.mp-ventas-header__icon {
  width:
    46px;

  height:
    46px;

  flex:
    0 0 46px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    13px;

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

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


.mp-ventas-header__icon svg {
  width:
    22px;

  height:
    22px;
}


.mp-ventas-header__text {
  min-width:
    0;
}


.mp-ventas-header__eyebrow {
  margin-bottom:
    3px;

  color:
    var(
      --mpv-muted
    );

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .11em;

  text-transform:
    uppercase;
}


.mp-ventas-header__text h1 {
  margin:
    0;

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

  font-size:
    clamp(
      22px,
      2vw,
      28px
    );

  line-height:
    1.15;

  font-weight:
    800;

  letter-spacing:
    -.025em;
}


.mp-ventas-header__text p {
  max-width:
    720px;

  margin:
    5px 0 0;

  color:
    var(
      --mpv-muted
    );

  font-size:
    13px;

  font-weight:
    600;

  line-height:
    1.45;
}


.mp-ventas-header__date {
  flex:
    0 0 auto;

  min-width:
    150px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    2px;
}


.mp-ventas-header__date span {
  color:
    var(
      --mpv-muted
    );

  font-size:
    11px;

  font-weight:
    700;
}


.mp-ventas-header__date strong {
  color:
    var(
      --mpv-text-strong
    );

  font-size:
    15px;

  font-weight:
    800;
}


.mp-ventas-header__bottom {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    13px 16px;

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

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


/* =========================================================
   ÚLTIMA SINCRONIZACIÓN
   ========================================================= */

.mp-ventas-last-sync {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  color:
    var(
      --mpv-muted
    );

  font-size:
    12px;

  font-weight:
    650;
}


.mp-ventas-last-sync > svg {
  width:
    16px;

  height:
    16px;
}


.mp-ventas-last-sync__status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    5px 8px;

  border:
    1px solid
    var(
      --mpv-neutral-line
    );

  border-radius:
    999px;

  color:
    var(
      --mpv-neutral
    );

  background:
    var(
      --mpv-neutral-bg
    );

  font-size:
    11px;

  font-weight:
    800;

  white-space:
    nowrap;
}


.mp-ventas-last-sync__status svg {
  width:
    14px;

  height:
    14px;
}


.mp-ventas-last-sync__status.is-success {
  color:
    var(
      --mpv-success
    );

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

  border-color:
    var(
      --mpv-success-line
    );
}


.mp-ventas-last-sync__status.is-warning {
  color:
    var(
      --mpv-warning
    );

  background:
    var(
      --mpv-warning-bg
    );

  border-color:
    var(
      --mpv-warning-line
    );
}


.mp-ventas-last-sync__status.is-danger {
  color:
    var(
      --mpv-danger
    );

  background:
    var(
      --mpv-danger-bg
    );

  border-color:
    var(
      --mpv-danger-line
    );
}


.mp-ventas-last-sync__status.is-info {
  color:
    var(
      --mpv-info
    );

  background:
    var(
      --mpv-info-bg
    );

  border-color:
    var(
      --mpv-info-line
    );
}


.mp-ventas-last-sync__date {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.mp-ventas-header__actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;
}


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

.mp-ventas-btn {
  min-height:
    38px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    8px 13px;

  border:
    1px solid
    transparent;

  border-radius:
    9px;

  background:
    transparent;

  color:
    var(
      --mpv-text
    );

  font-size:
    12px;

  font-weight:
    750;

  line-height:
    1;

  white-space:
    nowrap;

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


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


.mp-ventas-btn--primary {
  background:
    #111111;

  border-color:
    #111111;

  color:
    #ffffff;
}


.mp-ventas-btn--primary:hover:not(:disabled) {
  background:
    #000000;

  border-color:
    #000000;
}


.mp-ventas-btn--secondary {
  background:
    var(
      --mpv-surface
    );

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

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


.mp-ventas-btn--secondary:hover:not(:disabled) {
  background:
    var(
      --mpv-hover
    );
}


.mp-ventas-btn--ghost {
  border-color:
    transparent;

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


.mp-ventas-btn--ghost:hover:not(:disabled) {
  background:
    var(
      --mpv-hover
    );
}


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

.mp-ventas-icon-btn {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

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

  border-radius:
    9px;

  background:
    var(
      --mpv-surface
    );

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

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


.mp-ventas-icon-btn:hover:not(:disabled) {
  background:
    var(
      --mpv-hover
    );

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

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


.mp-ventas-icon-btn--large {
  width:
    38px;

  height:
    38px;

  flex-basis:
    38px;
}


/* =========================================================
   EXPORT MENU
   ========================================================= */

.mp-ventas-export-menu {
  position:
    absolute;

  right:
    16px;

  top:
    calc(
      100% -
      8px
    );

  z-index:
    40;

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

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  padding:
    7px;

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

  border-radius:
    12px;

  background:
    var(
      --mpv-surface
    );

  box-shadow:
    var(
      --mpv-shadow-lg
    );
}


.mp-ventas-export-menu button {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  padding:
    10px;

  border:
    0;

  border-radius:
    8px;

  background:
    transparent;

  text-align:
    left;

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


.mp-ventas-export-menu button:hover:not(:disabled) {
  background:
    var(
      --mpv-hover
    );
}


.mp-ventas-export-menu button > svg {
  width:
    19px;

  height:
    19px;

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


.mp-ventas-export-menu button > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.mp-ventas-export-menu strong {
  color:
    var(
      --mpv-text-strong
    );

  font-size:
    12px;

  font-weight:
    800;
}


.mp-ventas-export-menu span {
  color:
    var(
      --mpv-muted
    );

  font-size:
    11px;

  font-weight:
    600;
}


/* =========================================================
   MÉTRICAS
   ========================================================= */

.mp-ventas-metrics {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    10px;
}


.mp-ventas-metric {
  min-width:
    0;

  min-height:
    126px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    13px;

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

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

  background:
    var(
      --mpv-surface
    );

  box-shadow:
    var(
      --mpv-shadow
    );

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


.mp-ventas-metric[data-action] {
  cursor:
    pointer;
}


.mp-ventas-metric[data-action]:hover {
  background:
    var(
      --mpv-hover
    );

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

  transform:
    translateY(
      -1px
    );
}


.mp-ventas-metric__top {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;
}


.mp-ventas-metric__icon {
  width:
    31px;

  height:
    31px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    8px;

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

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


.mp-ventas-metric__icon svg {
  width:
    16px;

  height:
    16px;
}


.mp-ventas-metric__chevron {
  width:
    15px;

  height:
    15px;

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


.mp-ventas-metric__body {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.mp-ventas-metric__label {
  min-width:
    0;

  color:
    var(
      --mpv-muted
    );

  font-size:
    11px;

  font-weight:
    700;

  line-height:
    1.3;
}


.mp-ventas-metric__value {
  min-width:
    0;

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

  font-size:
    clamp(
      16px,
      1.4vw,
      21px
    );

  font-weight:
    850;

  line-height:
    1.15;

  letter-spacing:
    -.025em;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mp-ventas-metric__helper {
  min-width:
    0;

  color:
    var(
      --mpv-muted
    );

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.35;
}


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

.mp-ventas-toolbar {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    12px 16px;

  padding:
    14px;

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

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

  background:
    var(
      --mpv-surface
    );

  box-shadow:
    var(
      --mpv-shadow
    );
}


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

.mp-ventas-toolbar__search {
  min-width:
    0;

  min-height:
    40px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 10px;

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

  border-radius:
    9px;

  background:
    var(
      --mpv-surface
    );

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


.mp-ventas-toolbar__search:focus-within {
  border-color:
    var(
      --mpv-text-soft
    );

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


.mp-ventas-toolbar__search > svg {
  width:
    17px;

  height:
    17px;

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


.mp-ventas-toolbar__search input {
  min-width:
    0;

  flex:
    1 1 auto;

  height:
    38px;

  padding:
    0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

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

  font-size:
    12px;

  font-weight:
    650;
}


.mp-ventas-toolbar__search input::placeholder {
  color:
    var(
      --mpv-muted-2
    );

  opacity:
    1;
}


.mp-ventas-toolbar__search button {
  width:
    28px;

  height:
    28px;

  flex:
    0 0 28px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

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


.mp-ventas-toolbar__search button:hover {
  background:
    var(
      --mpv-hover
    );

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


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

.mp-ventas-toolbar__filters {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    flex-end;

  gap:
    8px;

  flex-wrap:
    wrap;
}


.mp-ventas-field {
  min-width:
    150px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.mp-ventas-field--date {
  min-width:
    155px;
}


.mp-ventas-field > span {
  color:
    var(
      --mpv-muted
    );

  font-size:
    10px;

  font-weight:
    750;
}


.mp-ventas-field__control {
  min-height:
    38px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    0 9px;

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

  border-radius:
    8px;

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


.mp-ventas-field__control:focus-within {
  border-color:
    var(
      --mpv-line-strong
    );

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


.mp-ventas-field__control > svg {
  width:
    15px;

  height:
    15px;

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


.mp-ventas-field__control input,
.mp-ventas-field__control select {
  min-width:
    0;

  width:
    100%;

  height:
    36px;

  padding:
    0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

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

  font-size:
    11px;

  font-weight:
    700;
}


/* =========================================================
   DATE SHORTCUTS
   ========================================================= */

.mp-ventas-toolbar__shortcuts {
  grid-column:
    1 /
    -1;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  padding-top:
    1px;
}


.mp-ventas-toolbar__shortcuts button {
  min-height:
    28px;

  padding:
    5px 10px;

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

  border-radius:
    999px;

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

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

  font-size:
    10px;

  font-weight:
    750;
}


.mp-ventas-toolbar__shortcuts button:hover {
  background:
    var(
      --mpv-hover
    );

  border-color:
    var(
      --mpv-line-strong
    );
}


.mp-ventas-toolbar__shortcuts button.is-active {
  background:
    #111111;

  border-color:
    #111111;

  color:
    #ffffff;
}


/* =========================================================
   TAX STRIP
   ========================================================= */

.mp-ventas-tax-strip {
  width:
    100%;

  min-width:
    0;

  padding:
    14px;

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

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

  background:
    var(
      --mpv-surface
    );

  box-shadow:
    var(
      --mpv-shadow
    );
}


.mp-ventas-tax-strip__header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  margin-bottom:
    12px;
}


.mp-ventas-tax-strip__header > div {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.mp-ventas-tax-strip__header > div > svg {
  width:
    17px;

  height:
    17px;

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


.mp-ventas-tax-strip__header > div > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}


.mp-ventas-tax-strip__header strong {
  color:
    var(
      --mpv-text-strong
    );

  font-size:
    12px;

  font-weight:
    800;
}


.mp-ventas-tax-strip__header span {
  color:
    var(
      --mpv-muted
    );

  font-size:
    10px;

  font-weight:
    600;
}


.mp-ventas-tax-strip__header > button {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  padding:
    6px 8px;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

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

  font-size:
    10px;

  font-weight:
    750;
}


.mp-ventas-tax-strip__header > button:hover {
  background:
    var(
      --mpv-hover
    );
}


.mp-ventas-tax-strip__header > button svg {
  width:
    14px;

  height:
    14px;
}


.mp-ventas-tax-strip__items {
  display:
    grid;

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

  gap:
    8px;
}


.mp-ventas-tax-strip__items > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  padding:
    10px;

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

  border-radius:
    9px;

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


.mp-ventas-tax-strip__items > div.is-total {
  background:
    var(
      --mpv-surface-3
    );

  border-color:
    var(
      --mpv-line-strong
    );
}


.mp-ventas-tax-strip__items span {
  color:
    var(
      --mpv-muted
    );

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1.25;
}


.mp-ventas-tax-strip__items strong {
  min-width:
    0;

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

  font-size:
    13px;

  font-weight:
    800;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.mp-ventas-loading {
  min-height:
    320px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  gap:
    14px;

  padding:
    40px;

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

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

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


.mp-ventas-loading__spinner {
  width:
    46px;

  height:
    46px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    50%;

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


.mp-ventas-loading__spinner svg {
  width:
    22px;

  height:
    22px;

  animation:
    mpVentasSpin
    .9s
    linear
    infinite;
}


.mp-ventas-loading__text {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    3px;

  text-align:
    center;
}


.mp-ventas-loading__text strong {
  color:
    var(
      --mpv-text-strong
    );

  font-size:
    13px;

  font-weight:
    800;
}


.mp-ventas-loading__text span {
  color:
    var(
      --mpv-muted
    );

  font-size:
    11px;

  font-weight:
    600;
}


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

.mp-ventas-error {
  min-height:
    240px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    16px;

  padding:
    30px;

  border:
    1px solid
    var(
      --mpv-danger-line
    );

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

  background:
    var(
      --mpv-danger-bg
    );
}


.mp-ventas-error__icon {
  width:
    42px;

  height:
    42px;

  flex:
    0 0 42px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    11px;

  background:
    rgba(
      180,
      35,
      24,
      .08
    );

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


.mp-ventas-error__content {
  min-width:
    0;

  flex:
    1 1 auto;
}


.mp-ventas-error__content strong {
  display:
    block;

  margin-bottom:
    3px;

  color:
    var(
      --mpv-danger
    );

  font-size:
    13px;

  font-weight:
    800;
}


.mp-ventas-error__content p {
  margin:
    0;

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

  font-size:
    11px;

  font-weight:
    600;
}


/* =========================================================
   ANIMACIONES
   ========================================================= */

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


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

[data-theme="dark"] .mercado-pago-ventas-page,
html.dark .mercado-pago-ventas-page,
body.dark .mercado-pago-ventas-page,
body[data-theme="dark"] .mercado-pago-ventas-page {
  --mpv-bg:
    #000000;

  --mpv-surface:
    #080808;

  --mpv-surface-2:
    #0d0d0d;

  --mpv-surface-3:
    #121212;

  --mpv-surface-4:
    #181818;

  --mpv-text:
    #f7f7f7;

  --mpv-text-strong:
    #ffffff;

  --mpv-text-soft:
    #e7e7e7;

  --mpv-muted:
    #b9b9b9;

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

  --mpv-line:
    #242424;

  --mpv-line-strong:
    #343434;

  --mpv-hover:
    #121212;

  --mpv-hover-strong:
    #181818;

  --mpv-focus:
    rgba(
      255,
      255,
      255,
      .11
    );

  --mpv-success:
    #69d59e;

  --mpv-success-bg:
    #0c1c14;

  --mpv-success-line:
    #1f4732;

  --mpv-warning:
    #f2c66d;

  --mpv-warning-bg:
    #1b1608;

  --mpv-warning-line:
    #493c15;

  --mpv-danger:
    #ff8b84;

  --mpv-danger-bg:
    #1e0b0a;

  --mpv-danger-line:
    #4a1c19;

  --mpv-info:
    #85a9ff;

  --mpv-info-bg:
    #0b1224;

  --mpv-info-line:
    #263a6f;

  --mpv-neutral:
    #d0d0d0;

  --mpv-neutral-bg:
    #141414;

  --mpv-neutral-line:
    #303030;

  --mpv-shadow:
    none;

  --mpv-shadow-lg:
    0 22px 60px rgba(
      0,
      0,
      0,
      .65
    );
}


[data-theme="dark"] .mp-ventas-btn--primary,
html.dark .mp-ventas-btn--primary,
body.dark .mp-ventas-btn--primary,
body[data-theme="dark"] .mp-ventas-btn--primary {
  background:
    #ffffff;

  border-color:
    #ffffff;

  color:
    #000000;
}


[data-theme="dark"] .mp-ventas-btn--primary:hover:not(:disabled),
html.dark .mp-ventas-btn--primary:hover:not(:disabled),
body.dark .mp-ventas-btn--primary:hover:not(:disabled),
body[data-theme="dark"] .mp-ventas-btn--primary:hover:not(:disabled) {
  background:
    #ededed;

  border-color:
    #ededed;
}


[data-theme="dark"] .mp-ventas-toolbar__shortcuts button.is-active,
html.dark .mp-ventas-toolbar__shortcuts button.is-active,
body.dark .mp-ventas-toolbar__shortcuts button.is-active,
body[data-theme="dark"] .mp-ventas-toolbar__shortcuts button.is-active {
  background:
    #ffffff;

  border-color:
    #ffffff;

  color:
    #000000;
}/* =========================================================
   LIST CARD
   ========================================================= */

.mp-ventas-list-card {
  width:
    100%;

  min-width:
    0;

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

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

  background:
    var(
      --mpv-surface
    );

  box-shadow:
    var(
      --mpv-shadow
    );

  overflow:
    hidden;
}


.mp-ventas-list-card__header {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    13px 15px;

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

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


.mp-ventas-list-card__header > div:first-child {
  min-width:
    0;

  display:
    flex;

  align-items:
    baseline;

  gap:
    8px;
}


.mp-ventas-list-card__header strong {
  color:
    var(
      --mpv-text-strong
    );

  font-size:
    13px;

  font-weight:
    850;
}


.mp-ventas-list-card__header span {
  color:
    var(
      --mpv-muted
    );

  font-size:
    10px;

  font-weight:
    650;
}


.mp-ventas-list-card__updated {
  min-width:
    0;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;

  color:
    var(
      --mpv-muted
    );

  white-space:
    nowrap;
}


.mp-ventas-list-card__updated svg {
  width:
    14px;

  height:
    14px;
}


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

.mp-ventas-table {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  overflow-x:
    hidden;
}


.mp-ventas-table__head,
.mp-ventas-table__row {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    minmax(
      105px,
      .75fr
    )
    minmax(
      160px,
      1.35fr
    )
    minmax(
      160px,
      1.35fr
    )
    minmax(
      120px,
      .95fr
    )
    minmax(
      90px,
      .7fr
    )
    minmax(
      100px,
      .8fr
    )
    minmax(
      100px,
      .8fr
    )
    minmax(
      100px,
      .8fr
    )
    minmax(
      105px,
      .85fr
    )
    42px;

  align-items:
    stretch;
}


.mp-ventas-table__head {
  min-height:
    38px;

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

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


.mp-ventas-table__body {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;
}


.mp-ventas-table__row {
  position:
    relative;

  min-height:
    72px;

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

  background:
    var(
      --mpv-surface
    );

  outline:
    0;

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


.mp-ventas-table__row:last-child {
  border-bottom:
    0;
}


.mp-ventas-table__row:hover {
  background:
    var(
      --mpv-hover
    );
}


.mp-ventas-table__row:focus-visible {
  z-index:
    1;

  box-shadow:
    inset 0 0 0 2px
    var(
      --mpv-line-strong
    );
}


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

.mp-ventas-cell {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    center;

  flex-direction:
    column;

  gap:
    3px;

  padding:
    10px 9px;

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

  overflow:
    hidden;
}


.mp-ventas-cell:last-child {
  border-right:
    0;
}


.mp-ventas-table__head .mp-ventas-cell {
  justify-content:
    center;

  padding-top:
    8px;

  padding-bottom:
    8px;

  color:
    var(
      --mpv-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .03em;

  text-transform:
    uppercase;
}


.mp-ventas-table__row .mp-ventas-cell strong {
  max-width:
    100%;

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

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.3;
}


.mp-ventas-table__row .mp-ventas-cell span,
.mp-ventas-table__row .mp-ventas-cell small {
  max-width:
    100%;

  color:
    var(
      --mpv-muted
    );

  font-size:
    9px;

  font-weight:
    650;

  line-height:
    1.3;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   DATE CELL
   ========================================================= */

.mp-ventas-cell--date {
  align-items:
    flex-start;
}


.mp-ventas-cell--date strong {
  font-size:
    12px !important;
}


.mp-ventas-cell--date span {
  font-size:
    9px !important;
}


/* =========================================================
   PAYMENT CELL
   ========================================================= */

.mp-ventas-payment {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    4px;
}


.mp-ventas-payment > strong {
  display:
    block;

  width:
    100%;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px !important;
}


.mp-ventas-payment__refs {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  flex-wrap:
    wrap;
}


.mp-ventas-payment__refs span {
  display:
    inline-flex;

  align-items:
    center;

  min-width:
    0;

  padding:
    2px 5px;

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

  border-radius:
    5px;

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

  color:
    var(
      --mpv-text-soft
    ) !important;

  font-size:
    8px !important;

  font-weight:
    700 !important;
}


/* =========================================================
   ORIGIN BADGE
   ========================================================= */

.mp-ventas-origin {
  max-width:
    100%;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  padding:
    3px 6px;

  border:
    1px solid
    var(
      --mpv-neutral-line
    );

  border-radius:
    999px;

  background:
    var(
      --mpv-neutral-bg
    );

  color:
    var(
      --mpv-neutral
    );

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1;
}


.mp-ventas-origin svg {
  width:
    11px;

  height:
    11px;
}


.mp-ventas-origin.is-ml {
  border-color:
    #d2b847;

  background:
    #fffbea;

  color:
    #6f5900;
}


.mp-ventas-origin.is-mp {
  border-color:
    var(
      --mpv-info-line
    );

  background:
    var(
      --mpv-info-bg
    );

  color:
    var(
      --mpv-info
    );
}


/* =========================================================
   BUYER CELL
   ========================================================= */

.mp-ventas-cell--buyer {
  min-width:
    0;
}


.mp-ventas-cell--buyer strong {
  display:
    block;

  width:
    100%;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mp-ventas-cell--buyer > span {
  display:
    block;

  width:
    100%;
}


.mp-ventas-cell--buyer small {
  color:
    var(
      --mpv-text-soft
    ) !important;
}


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

.mp-ventas-status {
  max-width:
    100%;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  padding:
    4px 7px;

  border:
    1px solid
    var(
      --mpv-neutral-line
    );

  border-radius:
    999px;

  background:
    var(
      --mpv-neutral-bg
    );

  color:
    var(
      --mpv-neutral
    );

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1;

  white-space:
    nowrap;
}


.mp-ventas-status svg {
  width:
    12px;

  height:
    12px;
}


.mp-ventas-status.is-success {
  color:
    var(
      --mpv-success
    );

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

  border-color:
    var(
      --mpv-success-line
    );
}


.mp-ventas-status.is-warning {
  color:
    var(
      --mpv-warning
    );

  background:
    var(
      --mpv-warning-bg
    );

  border-color:
    var(
      --mpv-warning-line
    );
}


.mp-ventas-status.is-danger {
  color:
    var(
      --mpv-danger
    );

  background:
    var(
      --mpv-danger-bg
    );

  border-color:
    var(
      --mpv-danger-line
    );
}


.mp-ventas-status.is-info {
  color:
    var(
      --mpv-info
    );

  background:
    var(
      --mpv-info-bg
    );

  border-color:
    var(
      --mpv-info-line
    );
}


.mp-ventas-status.is-neutral {
  color:
    var(
      --mpv-neutral
    );

  background:
    var(
      --mpv-neutral-bg
    );

  border-color:
    var(
      --mpv-neutral-line
    );
}


/* =========================================================
   PRODUCTS CELL
   ========================================================= */

.mp-ventas-cell--products strong {
  font-size:
    13px !important;
}


/* =========================================================
   AMOUNT CELLS
   ========================================================= */

.mp-ventas-cell--amount {
  align-items:
    flex-end;

  text-align:
    right;
}


.mp-ventas-cell--amount strong {
  width:
    100%;

  font-size:
    11px !important;

  text-align:
    right;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mp-ventas-cell--amount span {
  width:
    100%;

  text-align:
    right;
}


.mp-ventas-cell .is-positive,
.mp-ventas-detail-card .is-positive,
.mp-ventas-drawer__summary .is-positive {
  color:
    var(
      --mpv-success
    ) !important;
}


.mp-ventas-cell .is-negative,
.mp-ventas-detail-card .is-negative,
.mp-ventas-detail-list__title .is-negative,
.mp-ventas-drawer__summary .is-negative {
  color:
    var(
      --mpv-danger
    ) !important;
}


/* =========================================================
   ACTION CELL
   ========================================================= */

.mp-ventas-cell--actions {
  align-items:
    center;

  justify-content:
    center;

  padding-left:
    4px;

  padding-right:
    4px;
}


.mp-ventas-table__row:hover
.mp-ventas-cell--actions
.mp-ventas-icon-btn {
  border-color:
    var(
      --mpv-line-strong
    );

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


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

.mp-ventas-table-loading {
  min-height:
    180px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  color:
    var(
      --mpv-muted
    );

  font-size:
    11px;

  font-weight:
    700;
}


.mp-ventas-table-loading svg {
  width:
    18px;

  height:
    18px;

  animation:
    mpVentasSpin
    .9s
    linear
    infinite;
}


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

.mp-ventas-empty {
  min-height:
    240px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    28px 20px;

  text-align:
    center;
}


.mp-ventas-empty__icon {
  width:
    46px;

  height:
    46px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    3px;

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

  border-radius:
    12px;

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

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


.mp-ventas-empty__icon svg {
  width:
    21px;

  height:
    21px;
}


.mp-ventas-empty > strong {
  color:
    var(
      --mpv-text-strong
    );

  font-size:
    13px;

  font-weight:
    850;
}


.mp-ventas-empty > p {
  max-width:
    430px;

  margin:
    0;

  color:
    var(
      --mpv-muted
    );

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1.5;
}


.mp-ventas-empty__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  flex-wrap:
    wrap;

  margin-top:
    8px;
}


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

.mp-ventas-pagination {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    11px 13px;

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

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


.mp-ventas-pagination__info {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  color:
    var(
      --mpv-muted
    );

  font-size:
    10px;

  font-weight:
    700;
}


.mp-ventas-pagination__info > label {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}


.mp-ventas-pagination__info select {
  height:
    30px;

  min-width:
    64px;

  padding:
    0 7px;

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

  border-radius:
    7px;

  outline:
    0;

  background:
    var(
      --mpv-surface
    );

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

  font-size:
    10px;

  font-weight:
    750;
}


.mp-ventas-pagination__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;
}


.mp-ventas-pagination__actions button {
  min-height:
    31px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  padding:
    5px 9px;

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

  border-radius:
    7px;

  background:
    var(
      --mpv-surface
    );

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

  font-size:
    10px;

  font-weight:
    750;
}


.mp-ventas-pagination__actions button:hover:not(:disabled) {
  border-color:
    var(
      --mpv-line-strong
    );

  background:
    var(
      --mpv-hover
    );

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


.mp-ventas-pagination__actions button svg {
  width:
    13px;

  height:
    13px;
}


.mp-ventas-pagination__current {
  min-width:
    94px;

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

  font-size:
    10px;

  font-weight:
    750;

  text-align:
    center;
}


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

.mp-ventas-drawer-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    800;

  background:
    rgba(
      0,
      0,
      0,
      .38
    );

  backdrop-filter:
    blur(
      1px
    );
}


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

.mp-ventas-drawer {
  --mpv-surface:
    #ffffff;

  --mpv-surface-2:
    #f8f9fb;

  --mpv-surface-3:
    #f1f3f5;

  --mpv-text:
    #080808;

  --mpv-text-strong:
    #000000;

  --mpv-text-soft:
    #282b30;

  --mpv-muted:
    #5f646c;

  --mpv-line:
    #d9dde2;

  --mpv-line-strong:
    #c5cbd2;

  --mpv-hover:
    #f1f3f5;

  --mpv-success:
    #177245;

  --mpv-success-bg:
    #eef9f3;

  --mpv-success-line:
    #c7e8d4;

  --mpv-warning:
    #8a5a00;

  --mpv-warning-bg:
    #fff8e6;

  --mpv-warning-line:
    #efddaa;

  --mpv-danger:
    #b42318;

  --mpv-danger-bg:
    #fff2f0;

  --mpv-danger-line:
    #efc8c4;

  --mpv-info:
    #155eef;

  --mpv-info-bg:
    #eef4ff;

  --mpv-info-line:
    #c9d8ff;

  --mpv-neutral:
    #495057;

  --mpv-neutral-bg:
    #f2f4f6;

  --mpv-neutral-line:
    #d7dce1;

  position:
    fixed;

  top:
    0;

  right:
    0;

  bottom:
    0;

  z-index:
    810;

  width:
    min(
      780px,
      96vw
    );

  display:
    flex;

  flex-direction:
    column;

  background:
    var(
      --mpv-surface
    );

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

  box-shadow:
    -18px 0 50px rgba(
      0,
      0,
      0,
      .16
    );

  overflow:
    hidden;
}


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

.mp-ventas-drawer__header {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    18px 18px 14px;

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

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


.mp-ventas-drawer__header > div {
  min-width:
    0;
}


.mp-ventas-drawer__eyebrow {
  display:
    block;

  margin-bottom:
    3px;

  color:
    var(
      --mpv-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .1em;
}


.mp-ventas-drawer__header h2 {
  max-width:
    100%;

  margin:
    0;

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

  font-size:
    20px;

  line-height:
    1.2;

  font-weight:
    850;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mp-ventas-drawer__badges {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  flex-wrap:
    wrap;

  margin-top:
    9px;
}


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

.mp-ventas-drawer__summary {
  flex:
    0 0 auto;

  display:
    grid;

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

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

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


.mp-ventas-drawer__summary > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  padding:
    12px 15px;

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


.mp-ventas-drawer__summary > div:last-child {
  border-right:
    0;
}


.mp-ventas-drawer__summary span {
  color:
    var(
      --mpv-muted
    );

  font-size:
    9px;

  font-weight:
    700;
}


.mp-ventas-drawer__summary strong {
  min-width:
    0;

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

  font-size:
    15px;

  font-weight:
    850;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.mp-ventas-detail-tabs {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  gap:
    3px;

  padding:
    8px 10px;

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

  background:
    var(
      --mpv-surface
    );

  overflow-x:
    auto;

  scrollbar-width:
    none;
}


.mp-ventas-detail-tabs::-webkit-scrollbar {
  display:
    none;
}


.mp-ventas-detail-tabs button {
  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  min-height:
    31px;

  padding:
    6px 9px;

  border:
    1px solid
    transparent;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(
      --mpv-muted
    );

  font-size:
    10px;

  font-weight:
    750;
}


.mp-ventas-detail-tabs button:hover {
  background:
    var(
      --mpv-hover
    );

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


.mp-ventas-detail-tabs button.is-active {
  border-color:
    var(
      --mpv-line-strong
    );

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

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


.mp-ventas-detail-tabs button svg {
  width:
    14px;

  height:
    14px;
}


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

.mp-ventas-drawer__content {
  min-height:
    0;

  flex:
    1 1 auto;

  padding:
    14px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  overscroll-behavior:
    contain;
}


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

.mp-ventas-detail-grid {
  display:
    grid;

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

  gap:
    9px;
}


.mp-ventas-detail-card {
  min-width:
    0;

  min-height:
    76px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    4px;

  padding:
    11px 12px;

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

  border-radius:
    9px;

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


.mp-ventas-detail-card > span:first-child {
  color:
    var(
      --mpv-muted
    );

  font-size:
    9px;

  font-weight:
    750;
}


.mp-ventas-detail-card > strong {
  max-width:
    100%;

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

  font-size:
    12px;

  font-weight:
    800;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mp-ventas-detail-card > small {
  max-width:
    100%;

  color:
    var(
      --mpv-muted
    );

  font-size:
    9px;

  font-weight:
    650;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.mp-ventas-detail-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


.mp-ventas-detail-list__item {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  padding:
    11px;

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

  border-radius:
    9px;

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


.mp-ventas-detail-list__icon {
  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    8px;

  background:
    var(
      --mpv-surface
    );

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


.mp-ventas-detail-list__icon svg {
  width:
    15px;

  height:
    15px;
}


.mp-ventas-detail-list__body {
  min-width:
    0;

  flex:
    1 1 auto;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.mp-ventas-detail-list__title {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;
}


.mp-ventas-detail-list__title strong {
  min-width:
    0;

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

  font-size:
    11px;

  font-weight:
    800;

  overflow-wrap:
    anywhere;
}


.mp-ventas-detail-list__title > span {
  flex:
    0 0 auto;

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

  font-size:
    11px;

  font-weight:
    850;

  white-space:
    nowrap;
}


.mp-ventas-detail-list__meta {
  display:
    flex;

  align-items:
    center;

  gap:
    5px 9px;

  flex-wrap:
    wrap;
}


.mp-ventas-detail-list__meta span {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    20px;

  padding:
    2px 5px;

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

  border-radius:
    5px;

  background:
    var(
      --mpv-surface
    );

  color:
    var(
      --mpv-muted
    );

  font-size:
    8px;

  font-weight:
    700;
}


.mp-ventas-detail-list__body p {
  margin:
    0;

  color:
    var(
      --mpv-muted
    );

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.5;
}


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

.mp-ventas-detail-empty {
  min-height:
    180px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  gap:
    6px;

  padding:
    24px;

  color:
    var(
      --mpv-muted
    );

  text-align:
    center;
}


.mp-ventas-detail-empty svg {
  width:
    28px;

  height:
    28px;

  margin-bottom:
    4px;

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


.mp-ventas-detail-empty strong {
  color:
    var(
      --mpv-text-strong
    );

  font-size:
    12px;

  font-weight:
    800;
}


.mp-ventas-detail-empty span {
  max-width:
    430px;

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.5;
}


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

.mp-ventas-drawer__loading,
.mp-ventas-drawer__error {
  min-height:
    280px;

  flex:
    1 1 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  gap:
    8px;

  padding:
    24px;

  text-align:
    center;
}


.mp-ventas-drawer__loading {
  color:
    var(
      --mpv-muted
    );
}


.mp-ventas-drawer__loading svg {
  animation:
    mpVentasSpin
    .9s
    linear
    infinite;
}


.mp-ventas-drawer__loading strong,
.mp-ventas-drawer__error strong {
  color:
    var(
      --mpv-text-strong
    );

  font-size:
    12px;

  font-weight:
    800;
}


.mp-ventas-drawer__error {
  color:
    var(
      --mpv-danger
    );
}


.mp-ventas-drawer__error span {
  max-width:
    430px;

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

  font-size:
    10px;

  font-weight:
    600;
}


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

.mp-ventas-drawer__footer {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  padding:
    11px 14px;

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

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


/* =========================================================
   TECHNICAL
   ========================================================= */

.mp-ventas-technical {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}


.mp-ventas-technical__summary {
  display:
    grid;

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

  gap:
    8px;
}


.mp-ventas-technical__summary > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  padding:
    10px;

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

  border-radius:
    8px;

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


.mp-ventas-technical__summary span {
  color:
    var(
      --mpv-muted
    );

  font-size:
    8px;

  font-weight:
    750;
}


.mp-ventas-technical__summary strong {
  min-width:
    0;

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

  font-size:
    10px;

  font-weight:
    750;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mp-ventas-technical__json {
  min-width:
    0;

  overflow:
    hidden;

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

  border-radius:
    9px;

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


.mp-ventas-technical__json-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    9px 10px;

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


.mp-ventas-technical__json-header strong {
  color:
    var(
      --mpv-text-strong
    );

  font-size:
    10px;

  font-weight:
    800;
}


.mp-ventas-technical__json-header button {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  padding:
    5px 7px;

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

  border-radius:
    6px;

  background:
    var(
      --mpv-surface
    );

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

  font-size:
    9px;

  font-weight:
    750;
}


.mp-ventas-technical__json-header button:hover {
  background:
    var(
      --mpv-hover
    );
}


.mp-ventas-technical__json-header svg {
  width:
    12px;

  height:
    12px;
}


.mp-ventas-technical__json pre {
  width:
    100%;

  max-height:
    480px;

  margin:
    0;

  padding:
    12px;

  overflow:
    auto;

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

  background:
    var(
      --mpv-surface
    );

  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.55;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   DARK MODE · DRAWER
   ========================================================= */

[data-theme="dark"] .mp-ventas-drawer,
html.dark .mp-ventas-drawer,
body.dark .mp-ventas-drawer,
body[data-theme="dark"] .mp-ventas-drawer {
  --mpv-surface:
    #080808;

  --mpv-surface-2:
    #0d0d0d;

  --mpv-surface-3:
    #121212;

  --mpv-text:
    #f7f7f7;

  --mpv-text-strong:
    #ffffff;

  --mpv-text-soft:
    #e7e7e7;

  --mpv-muted:
    #b9b9b9;

  --mpv-line:
    #242424;

  --mpv-line-strong:
    #343434;

  --mpv-hover:
    #121212;

  --mpv-success:
    #69d59e;

  --mpv-success-bg:
    #0c1c14;

  --mpv-success-line:
    #1f4732;

  --mpv-warning:
    #f2c66d;

  --mpv-warning-bg:
    #1b1608;

  --mpv-warning-line:
    #493c15;

  --mpv-danger:
    #ff8b84;

  --mpv-danger-bg:
    #1e0b0a;

  --mpv-danger-line:
    #4a1c19;

  --mpv-info:
    #85a9ff;

  --mpv-info-bg:
    #0b1224;

  --mpv-info-line:
    #263a6f;

  --mpv-neutral:
    #d0d0d0;

  --mpv-neutral-bg:
    #141414;

  --mpv-neutral-line:
    #303030;

  background:
    #080808;

  border-left-color:
    #2e2e2e;

  box-shadow:
    -20px 0 60px rgba(
      0,
      0,
      0,
      .7
    );
}


[data-theme="dark"] .mp-ventas-origin.is-ml,
html.dark .mp-ventas-origin.is-ml,
body.dark .mp-ventas-origin.is-ml,
body[data-theme="dark"] .mp-ventas-origin.is-ml {
  border-color:
    #554a18;

  background:
    #171505;

  color:
    #e7ce63;
}


/* =========================================================
   CONTINÚA EN PARTE 3 DE 3
   ========================================================= *//* =========================================================
   MODAL BACKDROP
   ========================================================= */

.mp-ventas-modal-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    850;

  background:
    rgba(
      0,
      0,
      0,
      .42
    );

  backdrop-filter:
    blur(
      1px
    );
}


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

.mp-ventas-modal {
  --mpv-surface:
    #ffffff;

  --mpv-surface-2:
    #f8f9fb;

  --mpv-surface-3:
    #f1f3f5;

  --mpv-text:
    #080808;

  --mpv-text-strong:
    #000000;

  --mpv-text-soft:
    #282b30;

  --mpv-muted:
    #5f646c;

  --mpv-line:
    #d9dde2;

  --mpv-line-strong:
    #c5cbd2;

  --mpv-hover:
    #f1f3f5;

  --mpv-success:
    #177245;

  --mpv-danger:
    #b42318;

  position:
    fixed;

  top:
    50%;

  left:
    50%;

  z-index:
    860;

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

  max-height:
    min(
      82vh,
      860px
    );

  display:
    flex;

  flex-direction:
    column;

  transform:
    translate(
      -50%,
      -50%
    );

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

  border-radius:
    16px;

  background:
    var(
      --mpv-surface
    );

  box-shadow:
    0 24px 70px rgba(
      0,
      0,
      0,
      .22
    );

  overflow:
    hidden;
}


.mp-ventas-modal--medium {
  width:
    min(
      760px,
      calc(
        100vw -
        28px
      )
    );
}


.mp-ventas-modal--large {
  width:
    min(
      1040px,
      calc(
        100vw -
        28px
      )
    );
}


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

.mp-ventas-modal__header {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    17px 18px;

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

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


.mp-ventas-modal__header > div {
  min-width:
    0;
}


.mp-ventas-modal__header span {
  display:
    block;

  margin-bottom:
    3px;

  color:
    var(
      --mpv-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .1em;
}


.mp-ventas-modal__header h2 {
  margin:
    0;

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

  font-size:
    18px;

  line-height:
    1.2;

  font-weight:
    850;

  letter-spacing:
    -.02em;
}


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

.mp-ventas-modal__body {
  min-height:
    0;

  flex:
    1 1 auto;

  padding:
    14px;

  overflow-y:
    auto;

  overflow-x:
    hidden;
}


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

.mp-ventas-modal__footer {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  padding:
    11px 14px;

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

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


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

.mp-ventas-modal-metrics {
  display:
    grid;

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

  gap:
    8px;

  margin-bottom:
    14px;
}


.mp-ventas-modal-metrics .mp-ventas-metric {
  min-height:
    108px;
}


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

.mp-ventas-charge-total {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  margin-bottom:
    12px;

  padding:
    14px;

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

  border-radius:
    10px;

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


.mp-ventas-charge-total span {
  color:
    var(
      --mpv-muted
    );

  font-size:
    11px;

  font-weight:
    700;
}


.mp-ventas-charge-total strong {
  color:
    var(
      --mpv-text-strong
    );

  font-size:
    18px;

  font-weight:
    850;
}


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

.mp-ventas-summary-table {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

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

  border-radius:
    10px;

  overflow:
    hidden;
}


.mp-ventas-summary-table__head,
.mp-ventas-summary-table__row {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    minmax(
      110px,
      .9fr
    )
    minmax(
      180px,
      1.5fr
    )
    minmax(
      130px,
      1fr
    )
    minmax(
      80px,
      .65fr
    )
    minmax(
      110px,
      .8fr
    )
    minmax(
      110px,
      .8fr
    );

  align-items:
    center;
}


.mp-ventas-summary-table__head--charges,
.mp-ventas-summary-table__row--charges {
  grid-template-columns:
    minmax(
      120px,
      1fr
    )
    minmax(
      100px,
      .8fr
    )
    minmax(
      220px,
      1.7fr
    )
    minmax(
      80px,
      .6fr
    )
    minmax(
      110px,
      .8fr
    );
}


.mp-ventas-summary-table__head {
  min-height:
    36px;

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

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


.mp-ventas-summary-table__head span {
  padding:
    8px 9px;

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

  color:
    var(
      --mpv-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  text-transform:
    uppercase;
}


.mp-ventas-summary-table__head span:last-child {
  border-right:
    0;
}


.mp-ventas-summary-table__row {
  min-height:
    44px;

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

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


.mp-ventas-summary-table__row:last-child {
  border-bottom:
    0;
}


.mp-ventas-summary-table__row:hover {
  background:
    var(
      --mpv-hover
    );
}


.mp-ventas-summary-table__row > span,
.mp-ventas-summary-table__row > strong {
  min-width:
    0;

  height:
    100%;

  display:
    flex;

  align-items:
    center;

  padding:
    8px 9px;

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

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

  font-size:
    10px;

  font-weight:
    650;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.mp-ventas-summary-table__row > *:last-child {
  border-right:
    0;
}


.mp-ventas-summary-table__row > strong {
  justify-content:
    flex-end;

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

  font-weight:
    800;
}


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

.mp-ventas-sync-history {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


.mp-ventas-sync-history__item {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  padding:
    11px;

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

  border-radius:
    9px;

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


.mp-ventas-sync-history__icon {
  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    8px;

  background:
    var(
      --mpv-surface
    );

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


.mp-ventas-sync-history__icon svg {
  width:
    15px;

  height:
    15px;
}


.mp-ventas-sync-history__body {
  min-width:
    0;

  flex:
    1 1 auto;

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


.mp-ventas-sync-history__top {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.mp-ventas-sync-history__top strong {
  color:
    var(
      --mpv-text-strong
    );

  font-size:
    11px;

  font-weight:
    850;
}


.mp-ventas-sync-history__top span {
  color:
    var(
      --mpv-muted
    );

  font-size:
    9px;

  font-weight:
    650;

  white-space:
    nowrap;
}


.mp-ventas-sync-history__stats {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  flex-wrap:
    wrap;
}


.mp-ventas-sync-history__stats span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    3px;

  min-height:
    22px;

  padding:
    3px 6px;

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

  border-radius:
    6px;

  background:
    var(
      --mpv-surface
    );

  color:
    var(
      --mpv-muted
    );

  font-size:
    8px;

  font-weight:
    650;
}


.mp-ventas-sync-history__stats strong {
  color:
    var(
      --mpv-text-strong
    );

  font-weight:
    800;
}


.mp-ventas-sync-history__body p {
  margin:
    0;

  color:
    var(
      --mpv-muted
    );

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.45;
}


.mp-ventas-sync-history__body p.is-error {
  color:
    var(
      --mpv-danger
    );
}


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

.mp-ventas-toast {
  --mpv-surface:
    #ffffff;

  --mpv-text-strong:
    #000000;

  --mpv-muted:
    #5f646c;

  --mpv-line:
    #d9dde2;

  --mpv-success:
    #177245;

  --mpv-warning:
    #8a5a00;

  --mpv-danger:
    #b42318;

  --mpv-info:
    #155eef;

  position:
    fixed;

  right:
    18px;

  bottom:
    18px;

  z-index:
    1100;

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

  display:
    grid;

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

  align-items:
    start;

  gap:
    9px;

  padding:
    11px;

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

  border-radius:
    11px;

  background:
    var(
      --mpv-surface
    );

  box-shadow:
    0 18px 45px rgba(
      0,
      0,
      0,
      .18
    );
}


.mp-ventas-toast__icon {
  width:
    34px;

  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    8px;

  background:
    #f3f4f6;
}


.mp-ventas-toast.is-success
.mp-ventas-toast__icon {
  color:
    var(
      --mpv-success
    );

  background:
    #eef9f3;
}


.mp-ventas-toast.is-warning
.mp-ventas-toast__icon {
  color:
    var(
      --mpv-warning
    );

  background:
    #fff8e6;
}


.mp-ventas-toast.is-error
.mp-ventas-toast__icon {
  color:
    var(
      --mpv-danger
    );

  background:
    #fff2f0;
}


.mp-ventas-toast.is-info
.mp-ventas-toast__icon {
  color:
    var(
      --mpv-info
    );

  background:
    #eef4ff;
}


.mp-ventas-toast__icon svg {
  width:
    17px;

  height:
    17px;
}


.mp-ventas-toast__body {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.mp-ventas-toast__title {
  color:
    var(
      --mpv-text-strong
    );

  font-size:
    11px;

  font-weight:
    850;
}


.mp-ventas-toast__message {
  color:
    var(
      --mpv-muted
    );

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.4;
}


.mp-ventas-toast__close {
  width:
    28px;

  height:
    28px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

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


.mp-ventas-toast__close:hover {
  background:
    #f3f4f6;

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


.mp-ventas-toast__close svg {
  width:
    14px;

  height:
    14px;
}


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

[data-theme="dark"] .mp-ventas-modal,
html.dark .mp-ventas-modal,
body.dark .mp-ventas-modal,
body[data-theme="dark"] .mp-ventas-modal {
  --mpv-surface:
    #080808;

  --mpv-surface-2:
    #0d0d0d;

  --mpv-surface-3:
    #121212;

  --mpv-text:
    #f7f7f7;

  --mpv-text-strong:
    #ffffff;

  --mpv-text-soft:
    #e7e7e7;

  --mpv-muted:
    #b9b9b9;

  --mpv-line:
    #242424;

  --mpv-line-strong:
    #343434;

  --mpv-hover:
    #121212;

  --mpv-success:
    #69d59e;

  --mpv-danger:
    #ff8b84;

  background:
    #080808;

  border-color:
    #303030;

  box-shadow:
    0 26px 80px rgba(
      0,
      0,
      0,
      .75
    );
}


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

[data-theme="dark"] .mp-ventas-toast,
html.dark .mp-ventas-toast,
body.dark .mp-ventas-toast,
body[data-theme="dark"] .mp-ventas-toast {
  --mpv-surface:
    #090909;

  --mpv-text-strong:
    #ffffff;

  --mpv-muted:
    #b9b9b9;

  --mpv-line:
    #2b2b2b;

  --mpv-success:
    #69d59e;

  --mpv-warning:
    #f2c66d;

  --mpv-danger:
    #ff8b84;

  --mpv-info:
    #85a9ff;

  background:
    #090909;

  box-shadow:
    0 20px 55px rgba(
      0,
      0,
      0,
      .7
    );
}


[data-theme="dark"] .mp-ventas-toast__icon,
html.dark .mp-ventas-toast__icon,
body.dark .mp-ventas-toast__icon,
body[data-theme="dark"] .mp-ventas-toast__icon {
  background:
    #141414;
}


[data-theme="dark"] .mp-ventas-toast.is-success
.mp-ventas-toast__icon,
html.dark .mp-ventas-toast.is-success
.mp-ventas-toast__icon,
body.dark .mp-ventas-toast.is-success
.mp-ventas-toast__icon,
body[data-theme="dark"] .mp-ventas-toast.is-success
.mp-ventas-toast__icon {
  background:
    #0c1c14;
}


[data-theme="dark"] .mp-ventas-toast.is-warning
.mp-ventas-toast__icon,
html.dark .mp-ventas-toast.is-warning
.mp-ventas-toast__icon,
body.dark .mp-ventas-toast.is-warning
.mp-ventas-toast__icon,
body[data-theme="dark"] .mp-ventas-toast.is-warning
.mp-ventas-toast__icon {
  background:
    #1b1608;
}


[data-theme="dark"] .mp-ventas-toast.is-error
.mp-ventas-toast__icon,
html.dark .mp-ventas-toast.is-error
.mp-ventas-toast__icon,
body.dark .mp-ventas-toast.is-error
.mp-ventas-toast__icon,
body[data-theme="dark"] .mp-ventas-toast.is-error
.mp-ventas-toast__icon {
  background:
    #1e0b0a;
}


[data-theme="dark"] .mp-ventas-toast.is-info
.mp-ventas-toast__icon,
html.dark .mp-ventas-toast.is-info
.mp-ventas-toast__icon,
body.dark .mp-ventas-toast.is-info
.mp-ventas-toast__icon,
body[data-theme="dark"] .mp-ventas-toast.is-info
.mp-ventas-toast__icon {
  background:
    #0b1224;
}


[data-theme="dark"] .mp-ventas-toast__close:hover,
html.dark .mp-ventas-toast__close:hover,
body.dark .mp-ventas-toast__close:hover,
body[data-theme="dark"] .mp-ventas-toast__close:hover {
  background:
    #151515;
}


/* =========================================================
   DARK MODE · INPUTS / SELECTS
   ========================================================= */

[data-theme="dark"]
.mercado-pago-ventas-page
input,
[data-theme="dark"]
.mercado-pago-ventas-page
select,
html.dark
.mercado-pago-ventas-page
input,
html.dark
.mercado-pago-ventas-page
select,
body.dark
.mercado-pago-ventas-page
input,
body.dark
.mercado-pago-ventas-page
select,
body[data-theme="dark"]
.mercado-pago-ventas-page
input,
body[data-theme="dark"]
.mercado-pago-ventas-page
select {
  color-scheme:
    dark;
}


/* =========================================================
   DARK MODE · TABLE ORIGIN
   ========================================================= */

[data-theme="dark"] .mp-ventas-origin.is-ml,
html.dark .mp-ventas-origin.is-ml,
body.dark .mp-ventas-origin.is-ml,
body[data-theme="dark"] .mp-ventas-origin.is-ml {
  border-color:
    #514718;

  background:
    #171505;

  color:
    #e9d370;
}


/* =========================================================
   FULL WIDTH
   ========================================================= */

.app-content:has(.mercado-pago-ventas-page) {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;
}


.app-page-mount:has(.mercado-pago-ventas-page),
#mercadoPagoVentasDiaPageMount {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;
}


/* =========================================================
   RESPONSIVE · 1600
   ========================================================= */

@media (
  max-width:
    1600px
) {

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


  .mp-ventas-table__head,
  .mp-ventas-table__row {
    grid-template-columns:
      minmax(
        95px,
        .8fr
      )
      minmax(
        145px,
        1.3fr
      )
      minmax(
        145px,
        1.3fr
      )
      minmax(
        110px,
        .95fr
      )
      minmax(
        80px,
        .7fr
      )
      minmax(
        90px,
        .8fr
      )
      minmax(
        90px,
        .8fr
      )
      minmax(
        90px,
        .8fr
      )
      minmax(
        95px,
        .85fr
      )
      38px;
  }


  .mp-ventas-cell {
    padding-left:
      7px;

    padding-right:
      7px;
  }
}


/* =========================================================
   RESPONSIVE · 1320
   ========================================================= */

@media (
  max-width:
    1320px
) {

  .mp-ventas-toolbar {
    grid-template-columns:
      1fr;
  }


  .mp-ventas-toolbar__filters {
    justify-content:
      flex-start;
  }


  .mp-ventas-table__head,
  .mp-ventas-table__row {
    grid-template-columns:
      minmax(
        88px,
        .8fr
      )
      minmax(
        140px,
        1.35fr
      )
      minmax(
        140px,
        1.3fr
      )
      minmax(
        105px,
        .95fr
      )
      minmax(
        76px,
        .7fr
      )
      minmax(
        88px,
        .8fr
      )
      minmax(
        88px,
        .8fr
      )
      minmax(
        88px,
        .8fr
      )
      minmax(
        90px,
        .85fr
      )
      36px;
  }


  .mp-ventas-table__row .mp-ventas-cell strong {
    font-size:
      10px;
  }


  .mp-ventas-table__row .mp-ventas-cell span,
  .mp-ventas-table__row .mp-ventas-cell small {
    font-size:
      8px;
  }


  .mp-ventas-tax-strip__items {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }
}


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

@media (
  max-width:
    1100px
) {

  .mp-ventas-header__main,
  .mp-ventas-header__bottom {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .mp-ventas-header__date {
    align-items:
      flex-start;
  }


  .mp-ventas-header__actions {
    width:
      100%;

    justify-content:
      flex-start;

    flex-wrap:
      wrap;
  }


  .mp-ventas-last-sync {
    width:
      100%;

    flex-wrap:
      wrap;
  }


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


  .mp-ventas-table {
    display:
      block;
  }


  .mp-ventas-table__head {
    display:
      none;
  }


  .mp-ventas-table__body {
    padding:
      8px;
  }


  .mp-ventas-table__row {
    display:
      grid;

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

    gap:
      0;

    margin-bottom:
      8px;

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

    border-radius:
      10px;

    overflow:
      hidden;
  }


  .mp-ventas-table__row:last-child {
    margin-bottom:
      0;

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


  .mp-ventas-table__row .mp-ventas-cell {
    min-height:
      58px;

    padding:
      9px 10px;

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

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


  .mp-ventas-table__row .mp-ventas-cell:nth-child(2n) {
    border-right:
      0;
  }


  .mp-ventas-table__row .mp-ventas-cell:nth-last-child(-n + 2) {
    border-bottom:
      0;
  }


  .mp-ventas-table__row .mp-ventas-cell::before {
    content:
      "";

    display:
      block;

    margin-bottom:
      3px;

    color:
      var(
        --mpv-muted
      );

    font-size:
      8px;

    font-weight:
      800;

    letter-spacing:
      .04em;

    text-transform:
      uppercase;
  }


  .mp-ventas-table__row .mp-ventas-cell--date::before {
    content:
      "Fecha";
  }


  .mp-ventas-table__row .mp-ventas-cell--payment::before {
    content:
      "Operación";
  }


  .mp-ventas-table__row .mp-ventas-cell--buyer::before {
    content:
      "Comprador";
  }


  .mp-ventas-table__row .mp-ventas-cell--status::before {
    content:
      "Estado";
  }


  .mp-ventas-table__row .mp-ventas-cell--products::before {
    content:
      "Productos";
  }


  .mp-ventas-table__row .mp-ventas-cell--amount:nth-of-type(6)::before {
    content:
      "Bruto";
  }


  .mp-ventas-table__row .mp-ventas-cell--amount:nth-of-type(7)::before {
    content:
      "Cargos";
  }


  .mp-ventas-table__row .mp-ventas-cell--amount:nth-of-type(8)::before {
    content:
      "Impuestos";
  }


  .mp-ventas-table__row .mp-ventas-cell--amount:nth-of-type(9)::before {
    content:
      "Neto";
  }


  .mp-ventas-cell--amount {
    align-items:
      flex-start;

    text-align:
      left;
  }


  .mp-ventas-cell--amount strong,
  .mp-ventas-cell--amount span {
    text-align:
      left;
  }


  .mp-ventas-cell--actions {
    align-items:
      flex-end !important;

    justify-content:
      center !important;
  }


  .mp-ventas-cell--actions::before {
    content:
      "Detalle" !important;
  }


  .mp-ventas-summary-table {
    overflow-x:
      auto;

    scrollbar-width:
      thin;
  }


  .mp-ventas-summary-table__head,
  .mp-ventas-summary-table__row {
    min-width:
      760px;
  }


  .mp-ventas-summary-table__head--charges,
  .mp-ventas-summary-table__row--charges {
    min-width:
      680px;
  }
}


/* =========================================================
   RESPONSIVE · 760
   ========================================================= */

@media (
  max-width:
    760px
) {

  .mercado-pago-ventas-page {
    gap:
      12px;

    font-size:
      13px;
  }


  .mp-ventas-header__main {
    padding:
      16px;
  }


  .mp-ventas-header__bottom {
    padding:
      11px 12px;
  }


  .mp-ventas-header__identity {
    align-items:
      flex-start;
  }


  .mp-ventas-header__icon {
    width:
      40px;

    height:
      40px;

    flex-basis:
      40px;
  }


  .mp-ventas-header__text h1 {
    font-size:
      21px;
  }


  .mp-ventas-header__text p {
    font-size:
      11px;
  }


  .mp-ventas-header__actions {
    display:
      grid;

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


  .mp-ventas-header__actions .mp-ventas-btn {
    width:
      100%;

    padding-left:
      8px;

    padding-right:
      8px;
  }


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

    gap:
      8px;
  }


  .mp-ventas-metric {
    min-height:
      112px;

    padding:
      11px;
  }


  .mp-ventas-metric__value {
    font-size:
      17px;
  }


  .mp-ventas-toolbar {
    padding:
      11px;

    gap:
      10px;
  }


  .mp-ventas-toolbar__filters {
    display:
      grid;

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

    width:
      100%;
  }


  .mp-ventas-field,
  .mp-ventas-field--date {
    min-width:
      0;

    width:
      100%;
  }


  .mp-ventas-toolbar__filters
  .mp-ventas-btn {
    width:
      100%;

    align-self:
      end;
  }


  .mp-ventas-tax-strip__items {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .mp-ventas-pagination {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .mp-ventas-pagination__info,
  .mp-ventas-pagination__actions {
    width:
      100%;

    justify-content:
      space-between;
  }


  .mp-ventas-drawer {
    width:
      100vw;

    max-width:
      100vw;

    border-left:
      0;
  }


  .mp-ventas-detail-grid {
    grid-template-columns:
      1fr;
  }


  .mp-ventas-technical__summary {
    grid-template-columns:
      1fr;
  }


  .mp-ventas-modal {
    width:
      calc(
        100vw -
        18px
      );

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

    border-radius:
      12px;
  }


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


  .mp-ventas-drawer__footer,
  .mp-ventas-modal__footer {
    flex-wrap:
      wrap;
  }
}


/* =========================================================
   RESPONSIVE · 520
   ========================================================= */

@media (
  max-width:
    520px
) {

  .mp-ventas-header__actions {
    grid-template-columns:
      1fr;
  }


  .mp-ventas-last-sync {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .mp-ventas-export-menu {
    right:
      8px;

    left:
      8px;

    width:
      auto;
  }


  .mp-ventas-metrics {
    grid-template-columns:
      1fr;
  }


  .mp-ventas-toolbar__filters {
    grid-template-columns:
      1fr;
  }


  .mp-ventas-tax-strip__header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .mp-ventas-tax-strip__items {
    grid-template-columns:
      1fr;
  }


  .mp-ventas-table__row {
    grid-template-columns:
      1fr;
  }


  .mp-ventas-table__row .mp-ventas-cell,
  .mp-ventas-table__row .mp-ventas-cell:nth-child(2n) {
    border-right:
      0;
  }


  .mp-ventas-table__row .mp-ventas-cell {
    border-bottom:
      1px solid
      var(
        --mpv-line
      ) !important;
  }


  .mp-ventas-table__row .mp-ventas-cell:last-child {
    border-bottom:
      0 !important;
  }


  .mp-ventas-cell--actions {
    align-items:
      flex-start !important;
  }


  .mp-ventas-cell--actions .mp-ventas-icon-btn {
    width:
      100%;

    height:
      32px;
  }


  .mp-ventas-drawer__summary {
    grid-template-columns:
      1fr;
  }


  .mp-ventas-drawer__summary > div {
    border-right:
      0;

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


  .mp-ventas-drawer__summary > div:last-child {
    border-bottom:
      0;
  }


  .mp-ventas-detail-list__item {
    align-items:
      flex-start;
  }


  .mp-ventas-detail-list__title {
    flex-direction:
      column;

    gap:
      4px;
  }


  .mp-ventas-modal-metrics {
    grid-template-columns:
      1fr;
  }


  .mp-ventas-sync-history__top {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      2px;
  }


  .mp-ventas-pagination__info {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      6px;
  }


  .mp-ventas-pagination__actions {
    display:
      grid;

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


  .mp-ventas-pagination__actions button {
    width:
      100%;
  }


  .mp-ventas-toast {
    right:
      9px;

    bottom:
      9px;

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


/* =========================================================
   SMALL HEIGHT
   ========================================================= */

@media (
  max-height:
    700px
) {

  .mp-ventas-modal {
    max-height:
      calc(
        100vh -
        20px
      );
  }


  .mp-ventas-drawer__header {
    padding-top:
      13px;

    padding-bottom:
      11px;
  }


  .mp-ventas-drawer__content {
    padding:
      11px;
  }
}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {

  .mercado-pago-ventas-page *,
  .mercado-pago-ventas-page *::before,
  .mercado-pago-ventas-page *::after,
  .mp-ventas-drawer *,
  .mp-ventas-drawer *::before,
  .mp-ventas-drawer *::after,
  .mp-ventas-modal *,
  .mp-ventas-modal *::before,
  .mp-ventas-modal *::after,
  .mp-ventas-toast *,
  .mp-ventas-toast *::before,
  .mp-ventas-toast *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }
}


/* =========================================================
   FIN DEL ARCHIVO

   UBICACIÓN:
   frontend/src/pages/mercado-libre/mercado-pago/ventas-dia/
   mercado-pago-ventas-dia.css
   ========================================================= *//* =========================================================
   FIX FINAL · FOOTER SIEMPRE ABAJO
   MERCADO PAGO · VENTAS DEL DÍA
   ========================================================= */


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

.app-shell {
  min-height:
    100vh;

  display:
    grid;

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


/* =========================================================
   WORKSPACE
   ========================================================= */

.app-shell__workspace {
  min-width:
    0;

  min-height:
    100vh;

  display:
    flex;

  flex-direction:
    column;
}


/* =========================================================
   MAIN
   ========================================================= */

.app-main {
  min-width:
    0;

  width:
    100%;

  flex:
    1 0 auto;

  display:
    flex;

  flex-direction:
    column;
}


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

.app-content {
  min-width:
    0;

  width:
    100%;

  flex:
    1 0 auto;

  display:
    flex;

  flex-direction:
    column;
}


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

.app-page-mount {
  min-width:
    0;

  width:
    100%;

  flex:
    1 0 auto;

  display:
    flex;

  flex-direction:
    column;
}


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

.mercado-pago-ventas-page {
  min-width:
    0;

  width:
    100%;

  flex:
    1 0 auto;
}


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

.app-shell__footer {
  width:
    100%;

  flex:
    0 0 auto;

  margin-top:
    auto;

  position:
    relative;

  z-index:
    1;
}


/* =========================================================
   EVITAR FOOTER FLOTANDO EN MEDIO DE LA PANTALLA
   ========================================================= */

#footerMount {
  width:
    100%;

  margin-top:
    auto;

  flex:
    0 0 auto;
}


/* =========================================================
   DRAWER · NO DEBE AFECTAR EL FOOTER
   ========================================================= */

.mp-ventas-drawer-backdrop {
  position:
    fixed !important;

  inset:
    0 !important;

  z-index:
    9998 !important;
}


.mp-ventas-drawer {
  position:
    fixed !important;

  top:
    0 !important;

  right:
    0 !important;

  bottom:
    0 !important;

  height:
    100dvh !important;

  max-height:
    100dvh !important;

  z-index:
    9999 !important;

  display:
    flex;

  flex-direction:
    column;
}


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

.mp-ventas-drawer__header {
  flex:
    0 0 auto;
}


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

.mp-ventas-drawer__summary {
  flex:
    0 0 auto;
}


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

.mp-ventas-detail-tabs {
  flex:
    0 0 auto;
}


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

.mp-ventas-drawer__content {
  min-height:
    0;

  flex:
    1 1 auto;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  overscroll-behavior:
    contain;
}


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

.mp-ventas-drawer__footer {
  flex:
    0 0 auto;

  margin-top:
    auto;

  position:
    relative;

  bottom:
    auto;
}


/* =========================================================
   MODALES
   ========================================================= */

.mp-ventas-modal-backdrop {
  position:
    fixed !important;

  inset:
    0 !important;

  z-index:
    9998 !important;
}


.mp-ventas-modal {
  position:
    fixed !important;

  z-index:
    9999 !important;
}


/* =========================================================
   EVITAR DESBORDES HORIZONTALES
   ========================================================= */

.app-shell,
.app-shell__workspace,
.app-main,
.app-content,
.app-page-mount,
.mercado-pago-ventas-page {
  max-width:
    100%;

  overflow-x:
    clip;
}


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

@media (
  max-width:
    900px
) {

  .app-shell {
    min-height:
      100dvh;
  }


  .app-shell__workspace {
    min-height:
      100dvh;
  }


  .mp-ventas-drawer {
    width:
      100% !important;

    max-width:
      100% !important;

    left:
      0 !important;
  }
}/* =========================================================
   FIX FINAL · FOOTER DETRÁS DE DRAWERS Y MODALES
   ========================================================= */


/* =========================================================
   CONTENIDO PRINCIPAL POR ENCIMA DEL FOOTER
   ========================================================= */

.app-main {
  position:
    relative;

  z-index:
    10;
}


/* =========================================================
   FOOTER SIEMPRE POR DEBAJO
   ========================================================= */

.app-shell__footer,
#footerMount {
  position:
    relative !important;

  z-index:
    1 !important;
}


/* =========================================================
   DRAWER SIEMPRE ARRIBA
   ========================================================= */

.mp-ventas-drawer-backdrop {
  position:
    fixed !important;

  inset:
    0 !important;

  z-index:
    99998 !important;
}


.mp-ventas-drawer {
  position:
    fixed !important;

  top:
    0 !important;

  right:
    0 !important;

  bottom:
    0 !important;

  height:
    100dvh !important;

  max-height:
    100dvh !important;

  z-index:
    99999 !important;
}


/* =========================================================
   MODALES SIEMPRE ARRIBA
   ========================================================= */

.mp-ventas-modal-backdrop {
  position:
    fixed !important;

  inset:
    0 !important;

  z-index:
    99998 !important;
}


.mp-ventas-modal {
  z-index:
    99999 !important;
}


/* =========================================================
   OCULTAR FOOTER MIENTRAS HAY DRAWER ABIERTO
   ========================================================= */

body:has(.mp-ventas-drawer)
#footerMount {
  visibility:
    hidden !important;

  pointer-events:
    none !important;
}


/* =========================================================
   OCULTAR FOOTER MIENTRAS HAY MODAL ABIERTO
   ========================================================= */

body:has(.mp-ventas-modal)
#footerMount {
  visibility:
    hidden !important;

  pointer-events:
    none !important;
}/* =========================================================
   FIX DEFINITIVO · BOTÓN SINCRONIZAR · MODO CLARO

   UBICACIÓN:
   frontend/src/pages/mercado-libre/mercado-pago/ventas-dia/
   mercado-pago-ventas-dia.css

   AGREGAR AL FINAL
   ========================================================= */

.mercado-pago-ventas-page
.mp-ventas-btn.mp-ventas-btn--primary[data-action="sync-current-date"] {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}

.mercado-pago-ventas-page
.mp-ventas-btn.mp-ventas-btn--primary[data-action="sync-current-date"]
span {
  color: #ffffff !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
}

.mercado-pago-ventas-page
.mp-ventas-btn.mp-ventas-btn--primary[data-action="sync-current-date"]
svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  opacity: 1 !important;
}

.mercado-pago-ventas-page
.mp-ventas-btn.mp-ventas-btn--primary[data-action="sync-current-date"]
svg * {
  stroke: #ffffff !important;
}


/* =========================================================
   ESTADO DISABLED

   IMPORTANTE:
   En tu captura el botón parece estar deshabilitado.
   No queremos que disabled vuelva gris/negro el texto.
   ========================================================= */

.mercado-pago-ventas-page
.mp-ventas-btn.mp-ventas-btn--primary[data-action="sync-current-date"]:disabled,
.mercado-pago-ventas-page
.mp-ventas-btn.mp-ventas-btn--primary[data-action="sync-current-date"][disabled] {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;

  opacity: 0.65 !important;

  cursor: not-allowed !important;

  -webkit-text-fill-color: #ffffff !important;
}

.mercado-pago-ventas-page
.mp-ventas-btn.mp-ventas-btn--primary[data-action="sync-current-date"]:disabled
span,
.mercado-pago-ventas-page
.mp-ventas-btn.mp-ventas-btn--primary[data-action="sync-current-date"][disabled]
span {
  color: #ffffff !important;

  opacity: 1 !important;

  -webkit-text-fill-color: #ffffff !important;
}

.mercado-pago-ventas-page
.mp-ventas-btn.mp-ventas-btn--primary[data-action="sync-current-date"]:disabled
svg,
.mercado-pago-ventas-page
.mp-ventas-btn.mp-ventas-btn--primary[data-action="sync-current-date"][disabled]
svg {
  color: #ffffff !important;

  stroke: #ffffff !important;

  opacity: 1 !important;
}

.mercado-pago-ventas-page
.mp-ventas-btn.mp-ventas-btn--primary[data-action="sync-current-date"]:disabled
svg *,
.mercado-pago-ventas-page
.mp-ventas-btn.mp-ventas-btn--primary[data-action="sync-current-date"][disabled]
svg * {
  stroke: #ffffff !important;
}


/* =========================================================
   HOVER · SOLO CUANDO ESTÁ HABILITADO
   ========================================================= */

.mercado-pago-ventas-page
.mp-ventas-btn.mp-ventas-btn--primary[data-action="sync-current-date"]:not(:disabled):hover {
  background: #000000 !important;

  border-color: #000000 !important;

  color: #ffffff !important;
}


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

.mercado-pago-ventas-page
.mp-ventas-btn.mp-ventas-btn--primary[data-action="sync-current-date"]:focus-visible {
  outline: 2px solid #111111 !important;

  outline-offset: 2px !important;
}