/* =========================================================
   WIRTZ HUB · MERCADO LIBRE · ENVÍOS

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

   PARTE 1 DE 3

   DISEÑO:
   - Operativo
   - Premium
   - Compacto pero legible
   - Negro real
   - Sin glow
   - Sin transparencias innecesarias
   - Sin scroll horizontal de página
   - Responsive
   - Texto firme
   - Bordes y divisiones visibles
   ========================================================= */


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

.ml-envios-page {
  --mle-bg:
    #f6f7f9;

  --mle-surface:
    #ffffff;

  --mle-surface-2:
    #f7f8fa;

  --mle-surface-3:
    #f0f2f5;

  --mle-surface-4:
    #e9ecf0;

  --mle-text:
    #090909;

  --mle-text-soft:
    #25282d;

  --mle-muted:
    #5b6068;

  --mle-muted-strong:
    #444950;

  --mle-line:
    #d5d9df;

  --mle-line-strong:
    #b9bec6;

  --mle-line-dark:
    #a8aeb7;

  --mle-hover:
    #f0f2f4;

  --mle-active:
    #e8ebef;

  --mle-success:
    #147844;

  --mle-success-bg:
    #edf8f2;

  --mle-warning:
    #8d5c14;

  --mle-warning-bg:
    #fff7e8;

  --mle-danger:
    #b42323;

  --mle-danger-bg:
    #fff0f0;

  --mle-info:
    #245f96;

  --mle-info-bg:
    #edf5fc;

  --mle-radius:
    12px;

  --mle-radius-small:
    8px;

  --mle-transition:
    140ms ease;
}


/* =========================================================
   DARK · NEGRO REAL
   ========================================================= */

html[data-theme="dark"]
.ml-envios-page {
  --mle-bg:
    #000000;

  --mle-surface:
    #080808;

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

  --mle-surface-3:
    #121212;

  --mle-surface-4:
    #181818;

  --mle-text:
    #ffffff;

  --mle-text-soft:
    #eeeeee;

  --mle-muted:
    #b8b8b8;

  --mle-muted-strong:
    #d0d0d0;

  --mle-line:
    #292929;

  --mle-line-strong:
    #3f3f3f;

  --mle-line-dark:
    #505050;

  --mle-hover:
    #131313;

  --mle-active:
    #1a1a1a;

  --mle-success:
    #72d79b;

  --mle-success-bg:
    #0b1b12;

  --mle-warning:
    #e6b75f;

  --mle-warning-bg:
    #1c160a;

  --mle-danger:
    #ef8181;

  --mle-danger-bg:
    #1d0b0b;

  --mle-info:
    #7eb5e8;

  --mle-info-bg:
    #0b1620;
}


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

.ml-envios-page,
.ml-envios-page *,
.ml-envios-page *::before,
.ml-envios-page *::after {
  box-sizing:
    border-box;
}


.ml-envios-page button,
.ml-envios-page input,
.ml-envios-page select,
.ml-envios-page textarea {
  font-family:
    inherit;
}


.ml-envios-page button,
.ml-envios-page input,
.ml-envios-page select,
.ml-envios-page textarea {
  outline:
    none;
}


.ml-envios-page img,
.ml-envios-page svg {
  max-width:
    100%;
}


.ml-envios-page button {
  -webkit-tap-highlight-color:
    transparent;
}


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

.ml-envios-page {
  width:
    100%;

  min-width:
    0;

  max-width:
    100%;

  overflow-x:
    hidden;

  color:
    var(--mle-text);

  font-size:
    14px;

  font-weight:
    600;

  line-height:
    1.4;
}


.ml-envios-shell {
  width:
    100%;

  min-width:
    0;

  max-width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    16px;
}


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

.ml-envios-header {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    22px;
}


.ml-envios-header-copy {
  min-width:
    0;

  flex:
    1;
}


.ml-envios-eyebrow {
  display:
    block;

  margin-bottom:
    7px;

  color:
    var(--mle-muted);

  font-size:
    11px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    0.085em;

  text-transform:
    uppercase;
}


.ml-envios-header h1 {
  margin:
    0;

  color:
    var(--mle-text);

  font-size:
    clamp(
      29px,
      2.5vw,
      37px
    );

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    -0.04em;
}


.ml-envios-header p {
  max-width:
    760px;

  margin:
    9px
    0
    0;

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

  font-size:
    13.5px;

  font-weight:
    650;

  line-height:
    1.55;
}


.ml-envios-header-actions {
  flex-shrink:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  flex-wrap:
    wrap;
}


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

.ml-envios-btn {
  min-height:
    39px;

  padding:
    0
    14px;

  border:
    1px
    solid
    transparent;

  border-radius:
    9px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  font-size:
    12.5px;

  font-weight:
    800;

  line-height:
    1;

  text-decoration:
    none;

  cursor:
    pointer;

  white-space:
    nowrap;

  box-shadow:
    none;

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


.ml-envios-btn svg {
  width:
    16px;

  height:
    16px;

  flex-shrink:
    0;

  stroke-width:
    2.2;
}


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


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


.ml-envios-btn:disabled {
  opacity:
    0.45;

  cursor:
    not-allowed;
}


/* =========================================================
   BOTÓN PRIMARIO
   ========================================================= */

.ml-envios-btn-primary {
  border-color:
    #111111;

  background:
    #111111;

  color:
    #ffffff;
}


.ml-envios-btn-primary,
.ml-envios-btn-primary span,
.ml-envios-btn-primary strong,
.ml-envios-btn-primary svg {
  color:
    #ffffff;

  stroke:
    #ffffff;
}


.ml-envios-btn-primary:hover:not(:disabled) {
  border-color:
    #000000;

  background:
    #000000;

  color:
    #ffffff;
}


.ml-envios-btn-primary:hover:not(:disabled) span,
.ml-envios-btn-primary:hover:not(:disabled) strong,
.ml-envios-btn-primary:hover:not(:disabled) svg {
  color:
    #ffffff;

  stroke:
    #ffffff;
}


html[data-theme="dark"]
.ml-envios-btn-primary {
  border-color:
    #ffffff;

  background:
    #ffffff;

  color:
    #000000;
}


html[data-theme="dark"]
.ml-envios-btn-primary span,
html[data-theme="dark"]
.ml-envios-btn-primary strong,
html[data-theme="dark"]
.ml-envios-btn-primary svg {
  color:
    #000000;

  stroke:
    #000000;
}


html[data-theme="dark"]
.ml-envios-btn-primary:hover:not(:disabled) {
  border-color:
    #e8e8e8;

  background:
    #e8e8e8;

  color:
    #000000;
}


/* =========================================================
   BOTÓN SECUNDARIO
   ========================================================= */

.ml-envios-btn-secondary {
  border-color:
    var(--mle-line);

  background:
    var(--mle-surface);

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


.ml-envios-btn-secondary span,
.ml-envios-btn-secondary strong,
.ml-envios-btn-secondary svg {
  color:
    var(--mle-text);

  stroke:
    currentColor;
}


.ml-envios-btn-secondary:hover:not(:disabled) {
  border-color:
    var(--mle-line-strong);

  background:
    var(--mle-hover);

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


/* =========================================================
   BOTÓN ICONO
   ========================================================= */

.ml-envios-icon-btn {
  width:
    35px;

  height:
    35px;

  min-width:
    35px;

  padding:
    0;

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

  border-radius:
    8px;

  background:
    var(--mle-surface);

  color:
    var(--mle-text);

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  cursor:
    pointer;

  box-shadow:
    none;

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


.ml-envios-icon-btn:hover:not(:disabled) {
  border-color:
    var(--mle-line-strong);

  background:
    var(--mle-hover);

  transform:
    translateY(
      -1px
    );
}


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


.ml-envios-icon-btn:disabled {
  opacity:
    0.42;

  cursor:
    not-allowed;
}


.ml-envios-icon-btn svg {
  width:
    16px;

  height:
    16px;

  stroke-width:
    2.15;
}


/* =========================================================
   FOCUS
   SIN GLOW
   ========================================================= */

.ml-envios-btn:focus-visible,
.ml-envios-icon-btn:focus-visible,
.ml-envios-filter-chip:focus-visible,
.ml-envios-pagination-btn:focus-visible,
.ml-envios-export-option:focus-visible,
.ml-envios-search input:focus-visible,
.ml-envios-form-field input:focus-visible,
.ml-envios-form-field select:focus-visible,
.ml-envios-form-field textarea:focus-visible {
  outline:
    2px
    solid
    var(--mle-text);

  outline-offset:
    2px;

  box-shadow:
    none;
}


html[data-theme="dark"]
.ml-envios-btn:focus-visible,
html[data-theme="dark"]
.ml-envios-icon-btn:focus-visible,
html[data-theme="dark"]
.ml-envios-filter-chip:focus-visible,
html[data-theme="dark"]
.ml-envios-pagination-btn:focus-visible,
html[data-theme="dark"]
.ml-envios-export-option:focus-visible,
html[data-theme="dark"]
.ml-envios-search input:focus-visible,
html[data-theme="dark"]
.ml-envios-form-field input:focus-visible,
html[data-theme="dark"]
.ml-envios-form-field select:focus-visible,
html[data-theme="dark"]
.ml-envios-form-field textarea:focus-visible {
  outline-color:
    #ffffff;
}


/* =========================================================
   ALERTAS
   ========================================================= */

.ml-envios-alert {
  width:
    100%;

  min-height:
    46px;

  padding:
    11px
    13px;

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

  border-radius:
    10px;

  background:
    var(--mle-surface);

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

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


.ml-envios-alert[hidden] {
  display:
    none
    !important;
}


.ml-envios-alert > svg {
  width:
    18px;

  height:
    18px;

  flex-shrink:
    0;

  stroke-width:
    2.1;
}


.ml-envios-alert > span {
  min-width:
    0;

  flex:
    1;

  font-size:
    12.5px;

  font-weight:
    750;

  line-height:
    1.4;
}


.ml-envios-alert > button {
  width:
    30px;

  height:
    30px;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    currentColor;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  cursor:
    pointer;
}


.ml-envios-alert > button:hover {
  background:
    var(--mle-hover);
}


.ml-envios-alert > button svg {
  width:
    15px;

  height:
    15px;
}


.ml-envios-alert.is-success {
  border-color:
    var(--mle-success);

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

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


.ml-envios-alert.is-warning {
  border-color:
    var(--mle-warning);

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

  color:
    var(--mle-warning);
}


.ml-envios-alert.is-error {
  border-color:
    var(--mle-danger);

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

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


/* =========================================================
   BARRA DE PERÍODO
   ========================================================= */

.ml-envios-period-bar {
  width:
    100%;

  min-width:
    0;

  min-height:
    58px;

  padding:
    10px
    12px;

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

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

  background:
    var(--mle-surface);

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;
}


.ml-envios-period-info {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.ml-envios-period-icon {
  width:
    35px;

  height:
    35px;

  flex:
    0
    0
    35px;

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

  border-radius:
    8px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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


.ml-envios-period-icon svg {
  width:
    16px;

  height:
    16px;

  stroke-width:
    2.1;
}


.ml-envios-period-info > div:last-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.ml-envios-period-info span {
  color:
    var(--mle-muted);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}


.ml-envios-period-info strong {
  color:
    var(--mle-text);

  font-size:
    13.5px;

  font-weight:
    850;

  line-height:
    1.2;
}


.ml-envios-period-actions {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;

  flex-wrap:
    wrap;
}


/* =========================================================
   CHIPS
   ========================================================= */

.ml-envios-filter-chip {
  min-height:
    35px;

  padding:
    0
    11px;

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

  border-radius:
    8px;

  background:
    var(--mle-surface);

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

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  font-size:
    11.5px;

  font-weight:
    800;

  line-height:
    1;

  cursor:
    pointer;

  white-space:
    nowrap;

  box-shadow:
    none;

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


.ml-envios-filter-chip svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2.2;
}


.ml-envios-filter-chip:hover {
  border-color:
    var(--mle-line-strong);

  background:
    var(--mle-hover);

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


.ml-envios-filter-chip.is-active {
  border-color:
    var(--mle-text);

  background:
    var(--mle-text);

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


.ml-envios-filter-chip.is-active svg {
  stroke:
    currentColor;
}


html[data-theme="dark"]
.ml-envios-filter-chip.is-active {
  border-color:
    #ffffff;

  background:
    #ffffff;

  color:
    #000000;
}


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

.ml-envios-metrics {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    10px;
}


.ml-envios-metric-card {
  min-width:
    0;

  min-height:
    112px;

  padding:
    14px;

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

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

  background:
    var(--mle-surface);

  color:
    var(--mle-text);

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    7px;

  box-shadow:
    none;

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


.ml-envios-metric-card:hover {
  border-color:
    var(--mle-line-strong);

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

  transform:
    translateY(
      -1px
    );
}


.ml-envios-metric-card.is-loading {
  pointer-events:
    none;
}


.ml-envios-metric-top {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.ml-envios-metric-top span {
  min-width:
    0;

  color:
    var(--mle-muted-strong);

  font-size:
    11px;

  font-weight:
    850;

  letter-spacing:
    0.02em;

  text-transform:
    uppercase;
}


.ml-envios-metric-top svg {
  width:
    17px;

  height:
    17px;

  flex-shrink:
    0;

  color:
    var(--mle-muted);

  stroke-width:
    2.15;
}


.ml-envios-metric-card > strong {
  display:
    block;

  color:
    var(--mle-text);

  font-size:
    26px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -0.035em;
}


.ml-envios-metric-card > small {
  display:
    block;

  color:
    var(--mle-muted);

  font-size:
    11.5px;

  font-weight:
    700;

  line-height:
    1.35;
}


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

.ml-envios-toolbar {
  width:
    100%;

  min-width:
    0;

  padding:
    10px;

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

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

  background:
    var(--mle-surface);

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


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

.ml-envios-search {
  width:
    min(
      620px,
      100%
    );

  min-width:
    220px;

  min-height:
    40px;

  position:
    relative;

  display:
    flex;

  align-items:
    center;
}


.ml-envios-search > svg {
  position:
    absolute;

  left:
    12px;

  width:
    16px;

  height:
    16px;

  color:
    var(--mle-muted);

  pointer-events:
    none;

  stroke-width:
    2.1;
}


.ml-envios-search input {
  width:
    100%;

  min-width:
    0;

  height:
    40px;

  padding:
    0
    42px
    0
    38px;

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

  border-radius:
    9px;

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

  color:
    var(--mle-text);

  font-size:
    13px;

  font-weight:
    700;

  box-shadow:
    none;

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


.ml-envios-search input::placeholder {
  color:
    var(--mle-muted);

  opacity:
    1;

  font-weight:
    600;
}


.ml-envios-search input:hover {
  border-color:
    var(--mle-line-strong);
}


.ml-envios-search input:focus {
  border-color:
    var(--mle-line-dark);

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


.ml-envios-search-clear {
  position:
    absolute;

  right:
    7px;

  width:
    28px;

  height:
    28px;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(--mle-muted);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  cursor:
    pointer;
}


.ml-envios-search-clear:hover {
  background:
    var(--mle-hover);

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


.ml-envios-search-clear[hidden] {
  display:
    none
    !important;
}


.ml-envios-search-clear svg {
  width:
    14px;

  height:
    14px;
}


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

.ml-envios-toolbar-actions {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;

  flex-wrap:
    wrap;
}


/* =========================================================
   BARRA DE SELECCIÓN
   ========================================================= */

.ml-envios-selection-bar {
  width:
    100%;

  min-width:
    0;

  min-height:
    58px;

  padding:
    10px
    12px;

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

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

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;
}


.ml-envios-selection-bar[hidden] {
  display:
    none
    !important;
}


.ml-envios-selection-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.ml-envios-selection-copy strong {
  color:
    var(--mle-text);

  font-size:
    13px;

  font-weight:
    850;
}


.ml-envios-selection-copy span {
  color:
    var(--mle-muted);

  font-size:
    11.5px;

  font-weight:
    650;
}


.ml-envios-selection-actions {
  flex-shrink:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  flex-wrap:
    wrap;
}


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

.ml-envios-panel {
  width:
    100%;

  min-width:
    0;

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

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

  background:
    var(--mle-surface);

  overflow:
    hidden;
}


.ml-envios-panel-header {
  min-height:
    66px;

  padding:
    13px
    15px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;
}


.ml-envios-panel-header > div:first-child {
  min-width:
    0;
}


.ml-envios-panel-eyebrow {
  display:
    block;

  margin-bottom:
    4px;

  color:
    var(--mle-muted);

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


.ml-envios-panel-header h2,
.ml-envios-detail-section-header h3 {
  margin:
    0;

  color:
    var(--mle-text);

  font-size:
    16px;

  font-weight:
    850;

  line-height:
    1.2;

  letter-spacing:
    -0.015em;
}


.ml-envios-panel-meta {
  flex-shrink:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.ml-envios-panel-meta > span {
  color:
    var(--mle-muted);

  font-size:
    11.5px;

  font-weight:
    750;
}


/* =========================================================
   TABLA · CONTAINER
   ========================================================= */

.ml-envios-table-container {
  width:
    100%;

  min-width:
    0;

  max-width:
    100%;

  overflow-x:
    auto;

  overflow-y:
    visible;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--mle-line-strong)
    transparent;
}


.ml-envios-table-container::-webkit-scrollbar {
  height:
    8px;
}


.ml-envios-table-container::-webkit-scrollbar-track {
  background:
    transparent;
}


.ml-envios-table-container::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    var(--mle-line-strong);
}


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

.ml-envios-table {
  width:
    100%;

  min-width:
    1080px;

  border-collapse:
    separate;

  border-spacing:
    0;

  table-layout:
    auto;

  background:
    var(--mle-surface);

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


.ml-envios-table th {
  height:
    42px;

  padding:
    0
    11px;

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

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

  color:
    var(--mle-muted-strong);

  font-size:
    10.5px;

  font-weight:
    850;

  line-height:
    1;

  text-align:
    left;

  text-transform:
    uppercase;

  letter-spacing:
    0.035em;

  white-space:
    nowrap;
}


.ml-envios-table td {
  min-height:
    60px;

  padding:
    11px;

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

  color:
    var(--mle-text);

  font-size:
    12px;

  font-weight:
    650;

  vertical-align:
    middle;
}


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


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


.ml-envios-table tbody tr:hover {
  background:
    var(--mle-hover);
}


.ml-envios-table tbody tr.is-urgent {
  background:
    var(--mle-warning-bg);
}


.ml-envios-table tbody tr.is-urgent:hover {
  background:
    var(--mle-warning-bg);
}


.ml-envios-table-check {
  width:
    44px;

  text-align:
    center
    !important;
}


.ml-envios-table-check input {
  width:
    16px;

  height:
    16px;

  accent-color:
    var(--mle-text);

  cursor:
    pointer;
}


html[data-theme="dark"]
.ml-envios-table-check input {
  accent-color:
    #ffffff;
}


/* =========================================================
   CELDAS
   ========================================================= */

.ml-envios-cell-primary {
  color:
    var(--mle-text);

  font-size:
    12.5px;

  font-weight:
    800;

  line-height:
    1.3;
}


.ml-envios-cell-secondary {
  margin-top:
    3px;

  color:
    var(--mle-muted);

  font-size:
    10.5px;

  font-weight:
    650;

  line-height:
    1.3;
}


.ml-envios-substatus {
  max-width:
    180px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ml-envios-muted {
  color:
    var(--mle-muted);

  font-size:
    11px;

  font-weight:
    650;
}


/* =========================================================
   ID LINK
   ========================================================= */

.ml-envios-id-link {
  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--mle-text);

  font-size:
    12.5px;

  font-weight:
    850;

  line-height:
    1.2;

  text-decoration:
    underline;

  text-decoration-color:
    var(--mle-line-strong);

  text-underline-offset:
    3px;

  cursor:
    pointer;
}


.ml-envios-id-link:hover {
  text-decoration-color:
    var(--mle-text);
}


/* =========================================================
   FLAGS
   ========================================================= */

.ml-envios-row-flags {
  margin-top:
    5px;

  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  flex-wrap:
    wrap;
}


.ml-envios-mini-flag {
  min-height:
    20px;

  padding:
    0
    6px;

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

  border-radius:
    999px;

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

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

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    9px;

  font-weight:
    850;

  line-height:
    1;

  white-space:
    nowrap;
}


.ml-envios-mini-flag.is-warning {
  border-color:
    var(--mle-warning);

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

  color:
    var(--mle-warning);
}


.ml-envios-mini-flag.is-danger {
  border-color:
    var(--mle-danger);

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

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


/* =========================================================
   CLIENTE
   ========================================================= */

.ml-envios-client-cell {
  min-width:
    190px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.ml-envios-avatar {
  width:
    33px;

  height:
    33px;

  min-width:
    33px;

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

  border-radius:
    50%;

  background:
    var(--mle-surface-3);

  color:
    var(--mle-text);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    0.025em;
}


.ml-envios-avatar-large {
  width:
    46px;

  height:
    46px;

  min-width:
    46px;

  font-size:
    13px;
}


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

.ml-envios-status {
  min-height:
    24px;

  padding:
    0
    8px;

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

  border-radius:
    999px;

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

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

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    9.5px;

  font-weight:
    850;

  line-height:
    1;

  white-space:
    nowrap;
}


.ml-envios-status.is-success {
  border-color:
    var(--mle-success);

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

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


.ml-envios-status.is-warning {
  border-color:
    var(--mle-warning);

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

  color:
    var(--mle-warning);
}


.ml-envios-status.is-danger {
  border-color:
    var(--mle-danger);

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

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


.ml-envios-status.is-info {
  border-color:
    var(--mle-info);

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

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


.ml-envios-status.is-neutral {
  border-color:
    var(--mle-line);

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

  color:
    var(--mle-muted-strong);
}


/* =========================================================
   TRACKING
   ========================================================= */

.ml-envios-tracking {
  min-width:
    130px;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

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

  font-size:
    11px;

  font-weight:
    750;
}


.ml-envios-tracking svg {
  width:
    14px;

  height:
    14px;

  flex-shrink:
    0;

  color:
    var(--mle-muted);

  stroke-width:
    2.1;
}


/* =========================================================
   ACCIONES TABLA
   ========================================================= */

.ml-envios-table-actions-heading {
  text-align:
    right
    !important;
}


.ml-envios-table-actions {
  white-space:
    nowrap;

  text-align:
    right;
}


.ml-envios-table-actions .ml-envios-icon-btn {
  margin-left:
    4px;
}


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

.ml-envios-table-loading {
  width:
    100%;

  padding:
    8px
    12px;
}


.ml-envios-table-loading-row {
  min-height:
    58px;

  padding:
    10px
    0;

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

  display:
    grid;

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

  gap:
    12px;

  align-items:
    center;
}


.ml-envios-table-loading-row:last-child {
  border-bottom:
    0;
}


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

.ml-envios-skeleton {
  width:
    100%;

  height:
    12px;

  border-radius:
    5px;

  background:
    linear-gradient(
      90deg,
      var(--mle-surface-3)
      0%,
      var(--mle-surface-4)
      50%,
      var(--mle-surface-3)
      100%
    );

  background-size:
    200%
    100%;

  animation:
    mlEnviosSkeleton
    1.2s
    linear
    infinite;
}


.ml-envios-skeleton-small {
  width:
    45%;

  height:
    9px;
}


.ml-envios-skeleton-medium {
  width:
    64%;

  height:
    10px;
}


.ml-envios-skeleton-big {
  width:
    38%;

  height:
    25px;
}


@keyframes mlEnviosSkeleton {
  0% {
    background-position:
      200%
      0;
  }

  100% {
    background-position:
      -200%
      0;
  }
}


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

.ml-envios-empty {
  min-height:
    320px;

  padding:
    42px
    24px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  text-align:
    center;
}


.ml-envios-empty-icon {
  width:
    52px;

  height:
    52px;

  margin-bottom:
    3px;

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

  border-radius:
    12px;

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

  color:
    var(--mle-muted);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.ml-envios-empty-icon svg {
  width:
    24px;

  height:
    24px;

  stroke-width:
    1.8;
}


.ml-envios-empty h3 {
  margin:
    0;

  color:
    var(--mle-text);

  font-size:
    17px;

  font-weight:
    850;
}


.ml-envios-empty p {
  max-width:
    540px;

  margin:
    0;

  color:
    var(--mle-muted);

  font-size:
    12.5px;

  font-weight:
    650;

  line-height:
    1.55;
}


.ml-envios-empty-actions {
  margin-top:
    7px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  flex-wrap:
    wrap;
}


/* =========================================================
   PAGINACIÓN
   ========================================================= */

.ml-envios-pagination {
  min-height:
    58px;

  padding:
    10px
    14px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.ml-envios-pagination:empty {
  display:
    none;
}


.ml-envios-pagination-info {
  color:
    var(--mle-muted);

  font-size:
    11.5px;

  font-weight:
    650;
}


.ml-envios-pagination-info strong {
  color:
    var(--mle-text);

  font-weight:
    850;
}


.ml-envios-pagination-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.ml-envios-pagination-btn {
  width:
    33px;

  height:
    33px;

  padding:
    0;

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

  border-radius:
    8px;

  background:
    var(--mle-surface);

  color:
    var(--mle-text);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  cursor:
    pointer;

  box-shadow:
    none;
}


.ml-envios-pagination-btn:hover:not(:disabled) {
  border-color:
    var(--mle-line-strong);

  background:
    var(--mle-hover);
}


.ml-envios-pagination-btn:disabled {
  opacity:
    0.35;

  cursor:
    not-allowed;
}


.ml-envios-pagination-btn svg {
  width:
    15px;

  height:
    15px;
}


.ml-envios-pagination-current {
  color:
    var(--mle-muted);

  font-size:
    11.5px;

  font-weight:
    650;
}


.ml-envios-pagination-current strong {
  color:
    var(--mle-text);

  font-weight:
    850;
}


/* =========================================================
   FIN PARTE 1 DE 3
   ========================================================= *//* =========================================================
   MODAL ROOT
   ========================================================= */

#mlEnviosModalRoot {
  position:
    relative;

  z-index:
    5000;
}


body.ml-envios-modal-open {
  overflow:
    hidden
    !important;
}


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

.ml-envios-modal-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    99999;

  width:
    100vw;

  height:
    100dvh;

  padding:
    24px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  background:
    rgba(
      0,
      0,
      0,
      0.78
    );

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;
}


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

.ml-envios-modal {
  position:
    relative;

  width:
    min(
      920px,
      calc(
        100vw -
        48px
      )
    );

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

  min-width:
    0;

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

  border-radius:
    14px;

  background:
    var(--mle-surface);

  color:
    var(--mle-text);

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  box-shadow:
    none;
}


.ml-envios-modal-small {
  width:
    min(
      520px,
      calc(
        100vw -
        48px
      )
    );
}


.ml-envios-modal-medium {
  width:
    min(
      760px,
      calc(
        100vw -
        48px
      )
    );
}


.ml-envios-modal-large {
  width:
    min(
      1240px,
      calc(
        100vw -
        48px
      )
    );
}


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

.ml-envios-modal-header {
  min-height:
    82px;

  padding:
    16px
    18px;

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

  background:
    var(--mle-surface);

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  flex-shrink:
    0;
}


.ml-envios-modal-header > div:first-child {
  min-width:
    0;

  flex:
    1;
}


.ml-envios-modal-eyebrow {
  display:
    block;

  margin-bottom:
    5px;

  color:
    var(--mle-muted);

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    0.075em;

  text-transform:
    uppercase;
}


.ml-envios-modal-header h2 {
  margin:
    0;

  color:
    var(--mle-text);

  font-size:
    21px;

  font-weight:
    900;

  line-height:
    1.15;

  letter-spacing:
    -0.025em;
}


.ml-envios-modal-header p {
  max-width:
    720px;

  margin:
    7px
    0
    0;

  color:
    var(--mle-muted);

  font-size:
    12px;

  font-weight:
    650;

  line-height:
    1.5;
}


.ml-envios-modal-header-actions {
  flex-shrink:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;

  flex-wrap:
    wrap;
}


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

.ml-envios-modal-body {
  width:
    100%;

  min-width:
    0;

  min-height:
    0;

  padding:
    18px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--mle-line-strong)
    transparent;
}


.ml-envios-modal-body::-webkit-scrollbar {
  width:
    8px;
}


.ml-envios-modal-body::-webkit-scrollbar-track {
  background:
    transparent;
}


.ml-envios-modal-body::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    var(--mle-line-strong);
}


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

.ml-envios-modal-footer {
  width:
    100%;

  margin-top:
    18px;

  padding-top:
    14px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  flex-wrap:
    wrap;
}


/* =========================================================
   DETAIL HEADER META
   ========================================================= */

.ml-envios-detail-header-meta {
  margin-top:
    10px;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  flex-wrap:
    wrap;
}


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

.ml-envios-detail-tag {
  min-height:
    24px;

  padding:
    0
    8px;

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

  border-radius:
    999px;

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

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

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    9.5px;

  font-weight:
    800;

  line-height:
    1;

  white-space:
    nowrap;
}


.ml-envios-detail-tag.is-danger {
  border-color:
    var(--mle-danger);

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

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


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

.ml-envios-detail-body {
  display:
    flex;

  flex-direction:
    column;

  gap:
    16px;
}


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

.ml-envios-detail-actions {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  flex-wrap:
    wrap;
}


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

.ml-envios-detail-grid {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    12px;
}


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

.ml-envios-detail-card {
  min-width:
    0;

  padding:
    14px;

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

  border-radius:
    11px;

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


.ml-envios-detail-card-header {
  margin-bottom:
    12px;

  padding-bottom:
    10px;

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

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.ml-envios-detail-card-header svg {
  width:
    16px;

  height:
    16px;

  flex-shrink:
    0;

  color:
    var(--mle-muted);

  stroke-width:
    2.1;
}


.ml-envios-detail-card-header h3 {
  margin:
    0;

  color:
    var(--mle-text);

  font-size:
    14px;

  font-weight:
    850;
}


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

.ml-envios-detail-data-grid {
  display:
    grid;

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

  gap:
    10px
    14px;
}


.ml-envios-detail-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.ml-envios-detail-field > span {
  color:
    var(--mle-muted);

  font-size:
    9.5px;

  font-weight:
    800;

  letter-spacing:
    0.025em;

  text-transform:
    uppercase;
}


.ml-envios-detail-field > strong {
  min-width:
    0;

  color:
    var(--mle-text);

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1.35;

  overflow-wrap:
    anywhere;
}


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

.ml-envios-client-detail {
  margin-bottom:
    14px;

  padding-bottom:
    12px;

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

  display:
    flex;

  align-items:
    center;

  gap:
    11px;
}


.ml-envios-client-detail > div:last-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.ml-envios-client-detail strong {
  color:
    var(--mle-text);

  font-size:
    13px;

  font-weight:
    850;
}


.ml-envios-client-detail span {
  color:
    var(--mle-muted);

  font-size:
    11px;

  font-weight:
    650;
}


/* =========================================================
   DIRECCIÓN
   ========================================================= */

.ml-envios-address {
  margin-bottom:
    14px;

  padding-bottom:
    12px;

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

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.ml-envios-address strong {
  color:
    var(--mle-text);

  font-size:
    13px;

  font-weight:
    850;

  line-height:
    1.4;
}


.ml-envios-address span {
  color:
    var(--mle-muted);

  font-size:
    11px;

  font-weight:
    650;
}


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

.ml-envios-detail-section {
  width:
    100%;

  min-width:
    0;

  padding:
    14px;

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

  border-radius:
    11px;

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


.ml-envios-detail-section-header {
  margin-bottom:
    12px;

  padding-bottom:
    10px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.ml-envios-detail-section-header > div {
  min-width:
    0;
}


.ml-envios-detail-count {
  min-width:
    28px;

  height:
    26px;

  padding:
    0
    8px;

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

  border-radius:
    999px;

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

  color:
    var(--mle-text);

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    10px;

  font-weight:
    850;
}


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

.ml-envios-detail-empty {
  min-height:
    86px;

  padding:
    13px;

  border:
    1px
    dashed
    var(--mle-line-strong);

  border-radius:
    9px;

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

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.ml-envios-detail-empty > svg {
  width:
    20px;

  height:
    20px;

  flex-shrink:
    0;

  color:
    var(--mle-muted);

  stroke-width:
    1.9;
}


.ml-envios-detail-empty > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.ml-envios-detail-empty strong {
  color:
    var(--mle-text);

  font-size:
    12px;

  font-weight:
    850;
}


.ml-envios-detail-empty span {
  color:
    var(--mle-muted);

  font-size:
    11px;

  font-weight:
    650;

  line-height:
    1.4;
}


/* =========================================================
   PRODUCTOS
   ========================================================= */

.ml-envios-products-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


.ml-envios-product {
  min-width:
    0;

  min-height:
    76px;

  padding:
    10px;

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

  border-radius:
    9px;

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

  display:
    grid;

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

  gap:
    11px;

  align-items:
    center;
}


.ml-envios-product-operational {
  grid-template-columns:
    54px
    minmax(
      0,
      1fr
    )
    86px;
}


.ml-envios-product-image {
  width:
    54px;

  height:
    54px;

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

  border-radius:
    8px;

  background:
    var(--mle-surface);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;
}


.ml-envios-product-image img {
  width:
    100%;

  height:
    100%;

  object-fit:
    contain;
}


.ml-envios-product-image svg {
  width:
    22px;

  height:
    22px;

  color:
    var(--mle-muted);

  stroke-width:
    1.8;
}


.ml-envios-product-main {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.ml-envios-product-main > strong {
  min-width:
    0;

  color:
    var(--mle-text);

  font-size:
    12.5px;

  font-weight:
    850;

  line-height:
    1.35;

  overflow-wrap:
    anywhere;
}


.ml-envios-product-meta {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    5px
    10px;

  flex-wrap:
    wrap;
}


.ml-envios-product-meta span {
  color:
    var(--mle-muted);

  font-size:
    10.5px;

  font-weight:
    650;
}


.ml-envios-product-meta b {
  color:
    var(--mle-text-soft);

  font-weight:
    800;
}


.ml-envios-product-qty {
  min-width:
    72px;

  padding-left:
    10px;

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

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  justify-content:
    center;

  gap:
    3px;
}


.ml-envios-product-qty span {
  color:
    var(--mle-muted);

  font-size:
    9.5px;

  font-weight:
    800;

  text-transform:
    uppercase;
}


.ml-envios-product-qty strong {
  color:
    var(--mle-text);

  font-size:
    18px;

  font-weight:
    900;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.ml-envios-timeline {
  display:
    flex;

  flex-direction:
    column;

  gap:
    0;
}


.ml-envios-timeline-item {
  min-width:
    0;

  display:
    grid;

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

  gap:
    9px;
}


.ml-envios-timeline-marker {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;
}


.ml-envios-timeline-marker > span {
  width:
    9px;

  height:
    9px;

  margin-top:
    5px;

  border:
    2px
    solid
    var(--mle-text);

  border-radius:
    50%;

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


.ml-envios-timeline-marker > div {
  width:
    1px;

  flex:
    1;

  min-height:
    32px;

  background:
    var(--mle-line-strong);
}


.ml-envios-timeline-content {
  min-width:
    0;

  padding:
    0
    0
    16px;
}


.ml-envios-timeline-top {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;
}


.ml-envios-timeline-top strong {
  color:
    var(--mle-text);

  font-size:
    12px;

  font-weight:
    850;
}


.ml-envios-timeline-top > span {
  flex-shrink:
    0;

  color:
    var(--mle-muted);

  font-size:
    10px;

  font-weight:
    650;
}


.ml-envios-timeline-content p {
  margin:
    4px
    0
    0;

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

  font-size:
    11px;

  font-weight:
    650;

  line-height:
    1.45;
}


.ml-envios-timeline-meta {
  margin-top:
    6px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  flex-wrap:
    wrap;
}


.ml-envios-timeline-meta span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  color:
    var(--mle-muted);

  font-size:
    10px;

  font-weight:
    650;
}


.ml-envios-timeline-meta svg {
  width:
    12px;

  height:
    12px;
}


/* =========================================================
   AUTORIZACIONES
   ========================================================= */

.ml-envios-authorizations {
  display:
    grid;

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

  gap:
    8px;
}


.ml-envios-authorization {
  min-width:
    0;

  padding:
    10px;

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

  border-radius:
    9px;

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

  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.ml-envios-authorization-icon {
  width:
    34px;

  height:
    34px;

  min-width:
    34px;

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

  border-radius:
    8px;

  background:
    var(--mle-surface);

  color:
    var(--mle-text);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.ml-envios-authorization-icon svg {
  width:
    16px;

  height:
    16px;
}


.ml-envios-authorization > div:last-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.ml-envios-authorization strong {
  color:
    var(--mle-text);

  font-size:
    11px;

  font-weight:
    850;
}


.ml-envios-authorization span {
  color:
    var(--mle-muted);

  font-size:
    10px;

  font-weight:
    650;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   OBSERVACIONES
   ========================================================= */

.ml-envios-notes-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


.ml-envios-note {
  padding:
    11px;

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

  border-radius:
    9px;

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


.ml-envios-note.is-important {
  border-color:
    var(--mle-warning);

  background:
    var(--mle-warning-bg);
}


.ml-envios-note-top {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.ml-envios-note-top > div {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}


.ml-envios-note-top svg {
  width:
    14px;

  height:
    14px;

  flex-shrink:
    0;
}


.ml-envios-note-top strong {
  color:
    var(--mle-text);

  font-size:
    11px;

  font-weight:
    850;
}


.ml-envios-note-top > span {
  flex-shrink:
    0;

  color:
    var(--mle-muted);

  font-size:
    10px;

  font-weight:
    650;
}


.ml-envios-note p {
  margin:
    8px
    0
    0;

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

  font-size:
    11.5px;

  font-weight:
    650;

  line-height:
    1.5;
}


/* =========================================================
   INCIDENCIAS
   ========================================================= */

.ml-envios-incidents-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


.ml-envios-incident {
  padding:
    11px;

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

  border-radius:
    9px;

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


.ml-envios-incident-top {
  margin-bottom:
    8px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.ml-envios-incident-top > div {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  flex-wrap:
    wrap;
}


.ml-envios-incident-top > span {
  flex-shrink:
    0;

  color:
    var(--mle-muted);

  font-size:
    10px;

  font-weight:
    650;
}


.ml-envios-incident > strong {
  display:
    block;

  color:
    var(--mle-text);

  font-size:
    12px;

  font-weight:
    850;
}


.ml-envios-incident > p {
  margin:
    5px
    0
    0;

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

  font-size:
    11px;

  font-weight:
    650;

  line-height:
    1.45;
}


.ml-envios-incident > small {
  display:
    block;

  margin-top:
    6px;

  color:
    var(--mle-muted);

  font-size:
    10px;

  font-weight:
    700;
}


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

.ml-envios-detail-loading {
  min-height:
    360px;

  display:
    grid;

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

  gap:
    12px;
}


.ml-envios-detail-loading .ml-envios-skeleton {
  height:
    110px;

  border-radius:
    10px;
}


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

.ml-envios-form-grid {
  width:
    100%;

  display:
    grid;

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

  gap:
    12px;
}


.ml-envios-form-separator {
  width:
    100%;

  height:
    1px;

  margin:
    17px
    0;

  background:
    var(--mle-line);
}


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

.ml-envios-form-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


.ml-envios-form-field-full {
  width:
    100%;

  margin-top:
    12px;
}


.ml-envios-form-field > span {
  color:
    var(--mle-text-soft);

  font-size:
    10.5px;

  font-weight:
    800;
}


.ml-envios-form-field input,
.ml-envios-form-field select,
.ml-envios-form-field textarea {
  width:
    100%;

  min-width:
    0;

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

  border-radius:
    8px;

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

  color:
    var(--mle-text);

  font-size:
    12px;

  font-weight:
    700;

  box-shadow:
    none;

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


.ml-envios-form-field input,
.ml-envios-form-field select {
  height:
    39px;

  padding:
    0
    10px;
}


.ml-envios-form-field textarea {
  min-height:
    112px;

  padding:
    10px;

  resize:
    vertical;

  line-height:
    1.5;
}


.ml-envios-form-field input::placeholder,
.ml-envios-form-field textarea::placeholder {
  color:
    var(--mle-muted);

  opacity:
    1;

  font-weight:
    600;
}


.ml-envios-form-field input:hover,
.ml-envios-form-field select:hover,
.ml-envios-form-field textarea:hover {
  border-color:
    var(--mle-line-strong);
}


.ml-envios-form-field input:focus,
.ml-envios-form-field select:focus,
.ml-envios-form-field textarea:focus {
  border-color:
    var(--mle-line-dark);

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


/* =========================================================
   SELECT
   ========================================================= */

.ml-envios-form-field select {
  appearance:
    auto;

  cursor:
    pointer;
}


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

.ml-envios-checkbox-field {
  margin-top:
    13px;

  min-height:
    38px;

  padding:
    9px
    10px;

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

  border-radius:
    8px;

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

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  cursor:
    pointer;
}


.ml-envios-checkbox-field input {
  width:
    16px;

  height:
    16px;

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


.ml-envios-checkbox-field span {
  color:
    var(--mle-text-soft);

  font-size:
    11px;

  font-weight:
    750;
}


/* =========================================================
   TRI-STATE GRID
   ========================================================= */

.ml-envios-toggle-grid {
  display:
    grid;

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

  gap:
    10px;
}


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

.ml-envios-sync-info {
  min-height:
    72px;

  margin-bottom:
    16px;

  padding:
    12px;

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

  border-radius:
    9px;

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

  display:
    flex;

  align-items:
    center;

  gap:
    11px;
}


.ml-envios-sync-info-icon {
  width:
    38px;

  height:
    38px;

  min-width:
    38px;

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

  border-radius:
    8px;

  background:
    var(--mle-surface);

  color:
    var(--mle-text);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.ml-envios-sync-info-icon svg {
  width:
    17px;

  height:
    17px;
}


.ml-envios-sync-info > div:last-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.ml-envios-sync-info strong {
  color:
    var(--mle-text);

  font-size:
    12px;

  font-weight:
    850;
}


.ml-envios-sync-info span {
  color:
    var(--mle-muted);

  font-size:
    11px;

  font-weight:
    650;

  line-height:
    1.45;
}


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

.ml-envios-modal-note {
  margin-top:
    14px;

  padding:
    10px;

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

  border-radius:
    8px;

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

  display:
    flex;

  align-items:
    flex-start;

  gap:
    8px;
}


.ml-envios-modal-note svg {
  width:
    15px;

  height:
    15px;

  flex-shrink:
    0;

  margin-top:
    1px;

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


.ml-envios-modal-note span {
  color:
    var(--mle-muted-strong);

  font-size:
    10.5px;

  font-weight:
    650;

  line-height:
    1.45;
}


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

.ml-envios-spinner {
  width:
    15px;

  height:
    15px;

  border:
    2px
    solid
    currentColor;

  border-right-color:
    transparent;

  border-radius:
    50%;

  display:
    inline-block;

  animation:
    mlEnviosSpin
    0.72s
    linear
    infinite;
}


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


/* =========================================================
   EXPORT GRID
   ========================================================= */

.ml-envios-export-grid {
  display:
    grid;

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

  gap:
    10px;
}


/* =========================================================
   EXPORT OPTION
   ========================================================= */

.ml-envios-export-option {
  min-width:
    0;

  min-height:
    82px;

  padding:
    12px;

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

  border-radius:
    10px;

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

  color:
    var(--mle-text);

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  text-align:
    left;

  cursor:
    pointer;

  box-shadow:
    none;

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


.ml-envios-export-option:hover:not(:disabled) {
  border-color:
    var(--mle-line-strong);

  background:
    var(--mle-hover);

  transform:
    translateY(
      -1px
    );
}


.ml-envios-export-option:disabled {
  opacity:
    0.45;

  cursor:
    not-allowed;
}


.ml-envios-export-option-icon {
  width:
    38px;

  height:
    38px;

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

  border-radius:
    8px;

  background:
    var(--mle-surface);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.ml-envios-export-option-icon svg {
  width:
    17px;

  height:
    17px;
}


.ml-envios-export-option > div:nth-child(2) {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.ml-envios-export-option strong {
  color:
    var(--mle-text);

  font-size:
    11.5px;

  font-weight:
    850;
}


.ml-envios-export-option span {
  color:
    var(--mle-muted);

  font-size:
    10.5px;

  font-weight:
    650;

  line-height:
    1.4;
}


.ml-envios-export-option > svg {
  width:
    15px;

  height:
    15px;

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


/* =========================================================
   ELIMINAR VISUALMENTE RESTOS FINANCIEROS
   ========================================================= */

.ml-envios-finance-grid,
.ml-envios-finance-card,
.ml-envios-finance-status-panel,
.ml-envios-billing-list,
.ml-envios-billing-item,
.ml-envios-billing-icon,
.ml-envios-billing-main,
.ml-envios-billing-meta,
.ml-envios-billing-amount,
.ml-envios-payments-list,
.ml-envios-payment,
.ml-envios-product-price {
  display:
    none
    !important;
}


/* =========================================================
   FIN PARTE 2 DE 3
   ========================================================= *//* =========================================================
   DARK · AJUSTES FINALES
   ========================================================= */

html[data-theme="dark"]
.ml-envios-page,
html[data-theme="dark"]
.ml-envios-modal,
html[data-theme="dark"]
.ml-envios-panel,
html[data-theme="dark"]
.ml-envios-toolbar,
html[data-theme="dark"]
.ml-envios-period-bar,
html[data-theme="dark"]
.ml-envios-selection-bar,
html[data-theme="dark"]
.ml-envios-detail-section,
html[data-theme="dark"]
.ml-envios-detail-card {
  color:
    var(--mle-text);
}


html[data-theme="dark"]
.ml-envios-modal-backdrop {
  background:
    rgba(
      0,
      0,
      0,
      0.92
    );
}


html[data-theme="dark"]
.ml-envios-table tbody tr.is-urgent {
  background:
    #171205;
}


html[data-theme="dark"]
.ml-envios-note.is-important {
  background:
    #171205;
}


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

html[data-theme="dark"]
.ml-envios-search input,
html[data-theme="dark"]
.ml-envios-form-field input,
html[data-theme="dark"]
.ml-envios-form-field select,
html[data-theme="dark"]
.ml-envios-form-field textarea {
  color-scheme:
    dark;
}


html[data-theme="dark"]
.ml-envios-form-field select option {
  background:
    #0d0d0d;

  color:
    #ffffff;
}


/* =========================================================
   FIX INPUT AUTOFILL
   ========================================================= */

.ml-envios-page input:-webkit-autofill,
.ml-envios-page input:-webkit-autofill:hover,
.ml-envios-page input:-webkit-autofill:focus,
.ml-envios-page textarea:-webkit-autofill,
.ml-envios-page select:-webkit-autofill {
  -webkit-text-fill-color:
    var(--mle-text);

  -webkit-box-shadow:
    0
    0
    0
    1000px
    var(--mle-surface-2)
    inset;

  transition:
    background-color
    99999s
    ease-in-out
    0s;
}


/* =========================================================
   CHECKBOXES
   ========================================================= */

.ml-envios-page input[type="checkbox"] {
  accent-color:
    #111111;
}


html[data-theme="dark"]
.ml-envios-page input[type="checkbox"] {
  accent-color:
    #ffffff;
}


/* =========================================================
   MODAL · PROTECCIÓN DE LAYOUT
   ========================================================= */

#mlEnviosModalRoot {
  position:
    relative;

  z-index:
    5000;
}


.ml-envios-modal-backdrop {
  position:
    fixed
    !important;

  inset:
    0
    !important;

  z-index:
    99999
    !important;

  width:
    100vw
    !important;

  height:
    100dvh
    !important;

  max-width:
    none
    !important;

  max-height:
    none
    !important;

  overflow:
    hidden
    !important;
}


.ml-envios-modal {
  position:
    relative;

  z-index:
    1;

  max-width:
    calc(
      100vw -
      48px
    );

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


.ml-envios-modal-body {
  overscroll-behavior:
    contain;
}


/* =========================================================
   EVITAR QUE TOPBAR / SIDEBAR PISEN MODALES
   ========================================================= */

body.ml-envios-modal-open
.app-topbar,
body.ml-envios-modal-open
.app-sidebar,
body.ml-envios-modal-open
.app-rightbar,
body.ml-envios-modal-open
.app-footer {
  pointer-events:
    none;
}


/* =========================================================
   TEXTO
   ========================================================= */

.ml-envios-page p,
.ml-envios-page span,
.ml-envios-page strong,
.ml-envios-page small,
.ml-envios-page td,
.ml-envios-page th,
.ml-envios-page label {
  overflow-wrap:
    anywhere;
}


/* =========================================================
   CONTENEDORES · NO ROMPER ANCHO
   ========================================================= */

.ml-envios-header,
.ml-envios-toolbar,
.ml-envios-panel,
.ml-envios-table-container,
.ml-envios-detail-body,
.ml-envios-detail-grid,
.ml-envios-detail-card,
.ml-envios-detail-section,
.ml-envios-products-list,
.ml-envios-timeline,
.ml-envios-authorizations,
.ml-envios-notes-list,
.ml-envios-incidents-list,
.ml-envios-form-grid,
.ml-envios-toggle-grid,
.ml-envios-export-grid {
  max-width:
    100%;

  min-width:
    0;
}


/* =========================================================
   TABLA · MEJORA DE COLUMNAS
   ========================================================= */

.ml-envios-table th:nth-child(2),
.ml-envios-table td:nth-child(2) {
  min-width:
    125px;
}


.ml-envios-table th:nth-child(3),
.ml-envios-table td:nth-child(3) {
  min-width:
    135px;
}


.ml-envios-table th:nth-child(4),
.ml-envios-table td:nth-child(4) {
  min-width:
    210px;
}


.ml-envios-table th:nth-child(5),
.ml-envios-table td:nth-child(5) {
  min-width:
    145px;
}


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


.ml-envios-table th:nth-child(7),
.ml-envios-table td:nth-child(7) {
  min-width:
    155px;
}


.ml-envios-table th:nth-child(8),
.ml-envios-table td:nth-child(8) {
  min-width:
    155px;
}


.ml-envios-table th:nth-child(9),
.ml-envios-table td:nth-child(9) {
  width:
    96px;

  min-width:
    96px;
}


/* =========================================================
   PRODUCTO · SIN PRECIOS
   ========================================================= */

.ml-envios-product-operational
.ml-envios-product-price,
.ml-envios-product-price {
  display:
    none
    !important;
}


.ml-envios-product-operational {
  min-width:
    0;

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


.ml-envios-product-operational
.ml-envios-product-main {
  min-width:
    0;
}


/* =========================================================
   SIN FINANZAS
   ========================================================= */

.ml-envios-finance-grid,
.ml-envios-finance-card,
.ml-envios-finance-card-top,
.ml-envios-finance-status-panel,
.ml-envios-billing-list,
.ml-envios-billing-item,
.ml-envios-billing-icon,
.ml-envios-billing-main,
.ml-envios-billing-meta,
.ml-envios-billing-amount,
.ml-envios-payments-list,
.ml-envios-payment {
  display:
    none
    !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.ml-envios-page * {
  scrollbar-width:
    thin;

  scrollbar-color:
    var(--mle-line-strong)
    transparent;
}


.ml-envios-page *::-webkit-scrollbar {
  width:
    8px;

  height:
    8px;
}


.ml-envios-page *::-webkit-scrollbar-track {
  background:
    transparent;
}


.ml-envios-page *::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    var(--mle-line-strong);
}


.ml-envios-page *::-webkit-scrollbar-thumb:hover {
  background:
    var(--mle-line-dark);
}


/* =========================================================
   RESPONSIVE · 1450
   ========================================================= */

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


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


/* =========================================================
   RESPONSIVE · 1250
   ========================================================= */

@media (
  max-width:
    1250px
) {
  .ml-envios-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .ml-envios-header-actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


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


  .ml-envios-period-bar {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .ml-envios-period-actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .ml-envios-toolbar {
    align-items:
      stretch;

    flex-direction:
      column;
  }


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


  .ml-envios-toolbar-actions {
    justify-content:
      flex-start;
  }


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


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


/* =========================================================
   RESPONSIVE · 1050
   ========================================================= */

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


  .ml-envios-metric-card:last-child {
    grid-column:
      span
      2;
  }


  .ml-envios-detail-grid {
    grid-template-columns:
      1fr;
  }


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


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


  .ml-envios-export-grid {
    grid-template-columns:
      1fr;
  }


  .ml-envios-selection-bar {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .ml-envios-selection-actions {
    width:
      100%;
  }
}


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

@media (
  max-width:
    800px
) {
  .ml-envios-page {
    font-size:
      13px;
  }


  .ml-envios-shell {
    gap:
      12px;
  }


  .ml-envios-header h1 {
    font-size:
      28px;
  }


  .ml-envios-header p {
    font-size:
      12.5px;
  }


  .ml-envios-header-actions {
    display:
      grid;

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


  .ml-envios-header-actions
  .ml-envios-btn {
    width:
      100%;

    padding:
      0
      8px;
  }


  .ml-envios-period-actions {
    display:
      grid;

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


  .ml-envios-filter-chip {
    width:
      100%;
  }


  .ml-envios-toolbar-actions {
    display:
      grid;

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

    width:
      100%;
  }


  .ml-envios-selection-actions {
    display:
      grid;

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


  .ml-envios-selection-actions
  .ml-envios-btn {
    width:
      100%;
  }


  .ml-envios-panel-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .ml-envios-panel-meta {
    width:
      100%;

    justify-content:
      space-between;
  }


  .ml-envios-modal-backdrop {
    padding:
      10px
      !important;
  }


  .ml-envios-modal,
  .ml-envios-modal-small,
  .ml-envios-modal-medium,
  .ml-envios-modal-large {
    width:
      calc(
        100vw -
        20px
      );

    max-width:
      calc(
        100vw -
        20px
      );

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

    border-radius:
      11px;
  }


  .ml-envios-modal-header {
    padding:
      13px;

    gap:
      10px;
  }


  .ml-envios-modal-header h2 {
    font-size:
      19px;
  }


  .ml-envios-modal-header-actions {
    max-width:
      45%;
  }


  .ml-envios-modal-body {
    padding:
      13px;
  }


  .ml-envios-detail-actions {
    justify-content:
      stretch;
  }


  .ml-envios-detail-actions
  .ml-envios-btn {
    flex:
      1;
  }


  .ml-envios-authorizations {
    grid-template-columns:
      1fr;
  }


  .ml-envios-product-operational {
    grid-template-columns:
      48px
      minmax(
        0,
        1fr
      )
      70px;
  }


  .ml-envios-product-image {
    width:
      48px;

    height:
      48px;
  }


  .ml-envios-detail-data-grid {
    grid-template-columns:
      1fr;
  }


  .ml-envios-pagination {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .ml-envios-pagination-actions {
    width:
      100%;

    justify-content:
      space-between;
  }
}


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

@media (
  max-width:
    620px
) {
  .ml-envios-metrics {
    grid-template-columns:
      1fr
      1fr;
  }


  .ml-envios-metric-card:last-child {
    grid-column:
      1 /
      -1;
  }


  .ml-envios-header-actions {
    grid-template-columns:
      1fr;
  }


  .ml-envios-period-actions {
    grid-template-columns:
      1fr
      1fr;
  }


  .ml-envios-toolbar-actions {
    grid-template-columns:
      1fr;
  }


  .ml-envios-toggle-grid {
    grid-template-columns:
      1fr;
  }


  .ml-envios-product-operational {
    grid-template-columns:
      46px
      minmax(
        0,
        1fr
      );
  }


  .ml-envios-product-qty {
    grid-column:
      1 /
      -1;

    min-width:
      0;

    padding:
      8px
      0
      0;

    border-left:
      0;

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

    flex-direction:
      row;

    align-items:
      center;

    justify-content:
      space-between;
  }


  .ml-envios-product-qty strong {
    font-size:
      16px;
  }


  .ml-envios-detail-section,
  .ml-envios-detail-card {
    padding:
      12px;
  }


  .ml-envios-modal-header {
    align-items:
      flex-start;
  }


  .ml-envios-modal-header-actions {
    max-width:
      none;

    flex-direction:
      column;

    align-items:
      flex-end;
  }


  .ml-envios-modal-header-actions
  .ml-envios-btn {
    min-height:
      34px;

    padding:
      0
      9px;

    font-size:
      11px;
  }


  .ml-envios-selection-actions {
    grid-template-columns:
      1fr;
  }


  .ml-envios-empty {
    min-height:
      260px;

    padding:
      28px
      16px;
  }
}


/* =========================================================
   RESPONSIVE · 480
   ========================================================= */

@media (
  max-width:
    480px
) {
  .ml-envios-page {
    font-size:
      12.5px;
  }


  .ml-envios-header h1 {
    font-size:
      25px;
  }


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


  .ml-envios-metric-card:last-child {
    grid-column:
      auto;
  }


  .ml-envios-period-actions {
    grid-template-columns:
      1fr;
  }


  .ml-envios-period-bar {
    padding:
      9px;
  }


  .ml-envios-toolbar {
    padding:
      8px;
  }


  .ml-envios-panel-header {
    padding:
      11px;
  }


  .ml-envios-table {
    min-width:
      980px;
  }


  .ml-envios-modal-backdrop {
    padding:
      0
      !important;
  }


  .ml-envios-modal,
  .ml-envios-modal-small,
  .ml-envios-modal-medium,
  .ml-envios-modal-large {
    width:
      100vw;

    max-width:
      100vw;

    height:
      100dvh;

    max-height:
      100dvh;

    border:
      0;

    border-radius:
      0;
  }


  .ml-envios-modal-header {
    min-height:
      64px;

    padding:
      12px;
  }


  .ml-envios-modal-header h2 {
    font-size:
      18px;
  }


  .ml-envios-modal-header p {
    font-size:
      11px;
  }


  .ml-envios-modal-body {
    padding:
      12px;
  }


  .ml-envios-modal-footer {
    align-items:
      stretch;

    flex-direction:
      column-reverse;
  }


  .ml-envios-modal-footer
  .ml-envios-btn {
    width:
      100%;
  }


  .ml-envios-detail-actions {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .ml-envios-detail-actions
  .ml-envios-btn {
    width:
      100%;
  }


  .ml-envios-timeline-top {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      3px;
  }


  .ml-envios-note-top {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      4px;
  }


  .ml-envios-incident-top {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      4px;
  }


  .ml-envios-export-option {
    min-height:
      76px;

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


  .ml-envios-export-option > svg {
    display:
      none;
  }
}


/* =========================================================
   RESPONSIVE · 380
   ========================================================= */

@media (
  max-width:
    380px
) {
  .ml-envios-header h1 {
    font-size:
      23px;
  }


  .ml-envios-btn {
    min-height:
      37px;

    font-size:
      11.5px;
  }


  .ml-envios-metric-card {
    min-height:
      100px;
  }


  .ml-envios-metric-card > strong {
    font-size:
      23px;
  }


  .ml-envios-search input {
    font-size:
      12px;
  }
}


/* =========================================================
   SIN GLOW GLOBAL
   ========================================================= */

.ml-envios-page *,
.ml-envios-modal * {
  text-shadow:
    none
    !important;
}


.ml-envios-page button,
.ml-envios-page input,
.ml-envios-page select,
.ml-envios-page textarea,
.ml-envios-modal button,
.ml-envios-modal input,
.ml-envios-modal select,
.ml-envios-modal textarea {
  box-shadow:
    none
    !important;
}


/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {
  .ml-envios-btn,
  .ml-envios-icon-btn,
  .ml-envios-filter-chip,
  .ml-envios-metric-card,
  .ml-envios-pagination-btn,
  .ml-envios-export-option,
  .ml-envios-search,
  .ml-envios-form-field input,
  .ml-envios-form-field select,
  .ml-envios-form-field textarea {
    transition:
      none
      !important;
  }


  .ml-envios-metric-card:hover,
  .ml-envios-btn:hover,
  .ml-envios-icon-btn:hover,
  .ml-envios-export-option:hover {
    transform:
      none
      !important;
  }


  .ml-envios-skeleton,
  .ml-envios-spinner {
    animation-duration:
      1ms
      !important;

    animation-iteration-count:
      1
      !important;
  }
}


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

@media print {
  .ml-envios-header-actions,
  .ml-envios-toolbar,
  .ml-envios-selection-bar,
  .ml-envios-pagination,
  .ml-envios-table-actions,
  .ml-envios-table-actions-heading,
  #mlEnviosModalRoot {
    display:
      none
      !important;
  }


  .ml-envios-page {
    overflow:
      visible;

    color:
      #000000;
  }


  .ml-envios-panel,
  .ml-envios-period-bar,
  .ml-envios-metric-card {
    border-color:
      #b8b8b8;

    background:
      #ffffff;

    color:
      #000000;
  }


  .ml-envios-table-container {
    overflow:
      visible;
  }


  .ml-envios-table {
    min-width:
      0;

    color:
      #000000;
  }
}


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

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

   RESULTADO:
   - Sin Billing visual.
   - Sin bloques financieros.
   - Sin precios en productos.
   - Sin impuestos.
   - Sin percepciones.
   - Sin retenciones.
   - Texto firme.
   - Bordes visibles.
   - Modo oscuro negro real.
   - Sin glow.
   - Responsive.
   - Modal por encima de toda la aplicación.
   - Página sin scroll horizontal.
   ========================================================= */