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

   WIRTZ HUB · MERCADO LIBRE · CONTROL DE DEVOLUCIONES

   DISEÑO:
   - Premium.
   - Minimalista.
   - Animado.
   - Rápido.
   - Sin glow.
   - Responsive full.
   - Negro real en dark.
   - Texto firme y legible.
   - Sin grises débiles en tipografía.
   - Sin scroll horizontal.
   ========================================================= */


/* =========================================================
   01 · VARIABLES · LIGHT
   ========================================================= */

.ml-return-control-page {
  --mlrc-bg:
    #f2f3f5;

  --mlrc-surface:
    #ffffff;

  --mlrc-surface-soft:
    #f7f7f8;

  --mlrc-surface-muted:
    #eceef1;

  --mlrc-surface-hover:
    #f1f2f4;

  --mlrc-surface-active:
    #e9ebee;

  --mlrc-text:
    #111111;

  --mlrc-text-strong:
    #000000;

  --mlrc-text-soft:
    #1c1c1c;

  --mlrc-text-muted:
    #2f2f2f;

  --mlrc-text-faint:
    #424242;

  --mlrc-border:
    rgba(
      0,
      0,
      0,
      0.14
    );

  --mlrc-border-soft:
    rgba(
      0,
      0,
      0,
      0.09
    );

  --mlrc-border-strong:
    rgba(
      0,
      0,
      0,
      0.24
    );

  --mlrc-shadow:
    0 1px 2px rgba(
      0,
      0,
      0,
      0.05
    ),
    0 8px 24px rgba(
      0,
      0,
      0,
      0.045
    );

  --mlrc-shadow-hover:
    0 2px 4px rgba(
      0,
      0,
      0,
      0.06
    ),
    0 10px 26px rgba(
      0,
      0,
      0,
      0.055
    );

  --mlrc-success:
    #0d6a3d;

  --mlrc-success-soft:
    #e8f4ed;

  --mlrc-success-border:
    #9ec9b0;

  --mlrc-warning:
    #9a5700;

  --mlrc-warning-soft:
    #fff2dc;

  --mlrc-warning-border:
    #e4be80;

  --mlrc-danger:
    #b42323;

  --mlrc-danger-soft:
    #fdeaea;

  --mlrc-danger-border:
    #e4a1a1;

  --mlrc-info:
    #174fbf;

  --mlrc-info-soft:
    #eaf0ff;

  --mlrc-info-border:
    #aabce9;

  --mlrc-radius-xs:
    7px;

  --mlrc-radius:
    10px;

  --mlrc-radius-lg:
    14px;

  --mlrc-radius-xl:
    18px;

  --mlrc-transition-fast:
    110ms cubic-bezier(
      0.2,
      0.8,
      0.2,
      1
    );

  --mlrc-transition:
    170ms cubic-bezier(
      0.2,
      0.8,
      0.2,
      1
    );

  --mlrc-transition-slow:
    240ms cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  display:
    grid;

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

  align-content:
    start;

  gap:
    14px;

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  margin:
    0;

  padding:
    0;

  color:
    var(
      --mlrc-text
    );

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

  font-weight:
    600;

  box-sizing:
    border-box;

  animation:
    mlrc-page-enter
    220ms
    var(
      --mlrc-transition-slow
    )
    both;
}


/* =========================================================
   02 · DARK
   ========================================================= */

html[data-theme="dark"]
.ml-return-control-page,
body.dark
.ml-return-control-page,
body[data-theme="dark"]
.ml-return-control-page {
  --mlrc-bg:
    #000000;

  --mlrc-surface:
    #090909;

  --mlrc-surface-soft:
    #101010;

  --mlrc-surface-muted:
    #171717;

  --mlrc-surface-hover:
    #131313;

  --mlrc-surface-active:
    #1b1b1b;

  --mlrc-text:
    #ffffff;

  --mlrc-text-strong:
    #ffffff;

  --mlrc-text-soft:
    #f3f3f3;

  --mlrc-text-muted:
    #e0e0e0;

  --mlrc-text-faint:
    #c4c4c4;

  --mlrc-border:
    rgba(
      255,
      255,
      255,
      0.15
    );

  --mlrc-border-soft:
    rgba(
      255,
      255,
      255,
      0.09
    );

  --mlrc-border-strong:
    rgba(
      255,
      255,
      255,
      0.24
    );

  --mlrc-shadow:
    0 1px 2px rgba(
      0,
      0,
      0,
      0.3
    ),
    0 12px 30px rgba(
      0,
      0,
      0,
      0.22
    );

  --mlrc-shadow-hover:
    0 2px 4px rgba(
      0,
      0,
      0,
      0.36
    ),
    0 14px 34px rgba(
      0,
      0,
      0,
      0.28
    );

  --mlrc-success:
    #65d493;

  --mlrc-success-soft:
    #10271a;

  --mlrc-success-border:
    #285a3b;

  --mlrc-warning:
    #ffbd5d;

  --mlrc-warning-soft:
    #2a1e0b;

  --mlrc-warning-border:
    #6b4b18;

  --mlrc-danger:
    #ff7777;

  --mlrc-danger-soft:
    #2b1212;

  --mlrc-danger-border:
    #673030;

  --mlrc-info:
    #8ab3ff;

  --mlrc-info-soft:
    #13203b;

  --mlrc-info-border:
    #314d80;
}


/* =========================================================
   03 · BOX SIZING
   ========================================================= */

.ml-return-control-page,
.ml-return-control-page *,
.ml-return-control-page *::before,
.ml-return-control-page *::after,
.ml-return-control-modal,
.ml-return-control-modal *,
.ml-return-control-modal *::before,
.ml-return-control-modal *::after {
  box-sizing:
    border-box;
}


/* =========================================================
   04 · ANIMACIONES BASE
   ========================================================= */

@keyframes mlrc-page-enter {
  from {
    opacity:
      0;

    transform:
      translateY(
        6px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


@keyframes mlrc-fade-up {
  from {
    opacity:
      0;

    transform:
      translateY(
        5px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


@keyframes mlrc-fade-in {
  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}


@keyframes mlrc-scale-in {
  from {
    opacity:
      0;

    transform:
      scale(
        0.985
      );
  }

  to {
    opacity:
      1;

    transform:
      scale(
        1
      );
  }
}


@keyframes ml-return-control-spin {
  to {
    transform:
      rotate(
        360deg
      );
  }
}


/* =========================================================
   05 · ICONOS
   ========================================================= */

.ml-return-control-page
.icon,
.ml-return-control-modal
.icon {
  display:
    block;

  flex:
    0 0 auto;

  width:
    17px;

  height:
    17px;

  stroke-width:
    2;
}


/* =========================================================
   06 · SPINNER
   ========================================================= */

.ml-return-control-page
.is-spinning,
.ml-return-control-modal
.is-spinning {
  animation:
    ml-return-control-spin
    700ms
    linear
    infinite;
}


/* =========================================================
   07 · HEADER
   ========================================================= */

.ml-return-control-header {
  position:
    relative;

  display:
    grid;

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

  align-items:
    center;

  gap:
    20px;

  min-width:
    0;

  min-height:
    110px;

  padding:
    20px 22px;

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

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

  background:
    var(
      --mlrc-surface
    );

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

  overflow:
    hidden;

  animation:
    mlrc-fade-up
    200ms
    var(
      --mlrc-transition-slow
    )
    both;

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


.ml-return-control-header::before {
  content:
    "";

  position:
    absolute;

  inset:
    0 auto 0 0;

  width:
    3px;

  background:
    var(
      --mlrc-text-strong
    );

  opacity:
    0.88;
}


.ml-return-control-header:hover {
  border-color:
    var(
      --mlrc-border-strong
    );

  box-shadow:
    var(
      --mlrc-shadow-hover
    );

  transform:
    translateY(
      -1px
    );
}


/* =========================================================
   HEADER · IDENTITY
   ========================================================= */

.ml-return-control-header__identity {
  display:
    grid;

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

  align-items:
    center;

  gap:
    15px;

  min-width:
    0;
}


.ml-return-control-header__icon {
  display:
    grid;

  place-items:
    center;

  width:
    50px;

  height:
    50px;

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

  border-radius:
    12px;

  background:
    var(
      --mlrc-surface-soft
    );

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

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


.ml-return-control-header:hover
.ml-return-control-header__icon {
  transform:
    translateY(
      -1px
    );

  background:
    var(
      --mlrc-surface-hover
    );
}


.ml-return-control-header__icon
.icon {
  width:
    23px;

  height:
    23px;

  stroke-width:
    2.1;
}


.ml-return-control-eyebrow {
  display:
    block;

  margin-bottom:
    4px;

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

  font-size:
    10px;

  font-weight:
    850;

  line-height:
    1.2;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;
}


.ml-return-control-header__identity
h1 {
  margin:
    0;

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

  font-size:
    clamp(
      26px,
      2vw,
      34px
    );

  font-weight:
    850;

  line-height:
    1.04;

  letter-spacing:
    -0.04em;
}


.ml-return-control-header__identity
p {
  max-width:
    780px;

  margin:
    8px 0 0;

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

  font-size:
    13px;

  font-weight:
    650;

  line-height:
    1.55;
}


.ml-return-control-header__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;
}


/* =========================================================
   08 · BOTONES BASE
   ========================================================= */

.ml-return-control-primary-button,
.ml-return-control-secondary-button,
.ml-return-control-open-button,
.ml-return-control-filter,
.ml-return-control-icon-button,
.ml-return-control-pagination
button {
  font:
    inherit;

  -webkit-tap-highlight-color:
    transparent;

  user-select:
    none;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.ml-return-control-primary-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    40px;

  padding:
    0 15px;

  border:
    1px solid
    var(
      --mlrc-text-strong
    );

  border-radius:
    9px;

  background:
    var(
      --mlrc-text-strong
    );

  color:
    var(
      --mlrc-surface
    );

  font-size:
    11px;

  font-weight:
    820;

  line-height:
    1;

  cursor:
    pointer;

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


.ml-return-control-primary-button:hover:not(:disabled) {
  transform:
    translateY(
      -1px
    );

  opacity:
    0.9;
}


.ml-return-control-primary-button:active:not(:disabled) {
  transform:
    translateY(
      0
    )
    scale(
      0.985
    );
}


.ml-return-control-primary-button:disabled {
  opacity:
    0.44;

  cursor:
    default;
}


/* =========================================================
   SECONDARY BUTTON
   ========================================================= */

.ml-return-control-secondary-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    40px;

  padding:
    0 14px;

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

  border-radius:
    9px;

  background:
    var(
      --mlrc-surface
    );

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

  font-size:
    11px;

  font-weight:
    790;

  cursor:
    pointer;

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


.ml-return-control-secondary-button:hover:not(:disabled) {
  background:
    var(
      --mlrc-surface-hover
    );

  border-color:
    var(
      --mlrc-border-strong
    );

  transform:
    translateY(
      -1px
    );
}


.ml-return-control-secondary-button:active:not(:disabled) {
  transform:
    scale(
      0.985
    );
}


.ml-return-control-secondary-button:disabled {
  opacity:
    0.45;

  cursor:
    default;
}


html[data-theme="dark"]
.ml-return-control-primary-button,
body.dark
.ml-return-control-primary-button,
body[data-theme="dark"]
.ml-return-control-primary-button {
  border-color:
    #ffffff;

  background:
    #ffffff;

  color:
    #000000;
}


/* =========================================================
   09 · METRICS
   ========================================================= */

.ml-return-control-metrics {
  display:
    grid;

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

  gap:
    8px;

  min-width:
    0;

  animation:
    mlrc-fade-up
    220ms
    20ms
    var(
      --mlrc-transition-slow
    )
    both;
}


.ml-return-control-metric {
  position:
    relative;

  display:
    grid;

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

  align-items:
    center;

  gap:
    11px;

  min-width:
    0;

  min-height:
    96px;

  padding:
    14px;

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

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

  background:
    var(
      --mlrc-surface
    );

  box-shadow:
    0 1px 2px rgba(
      0,
      0,
      0,
      0.035
    );

  overflow:
    hidden;

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


.ml-return-control-metric::after {
  content:
    "";

  position:
    absolute;

  left:
    14px;

  right:
    14px;

  bottom:
    0;

  height:
    2px;

  background:
    var(
      --mlrc-border
    );

  transform:
    scaleX(
      0
    );

  transform-origin:
    left;

  transition:
    transform
      var(
        --mlrc-transition
      );
}


.ml-return-control-metric:hover {
  transform:
    translateY(
      -2px
    );

  background:
    var(
      --mlrc-surface-hover
    );

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


.ml-return-control-metric:hover::after {
  transform:
    scaleX(
      1
    );
}


.ml-return-control-metric__icon {
  display:
    grid;

  place-items:
    center;

  width:
    42px;

  height:
    42px;

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

  border-radius:
    10px;

  background:
    var(
      --mlrc-surface-soft
    );

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

  transition:
    transform
      var(
        --mlrc-transition
      ),
    background
      var(
        --mlrc-transition
      );
}


.ml-return-control-metric:hover
.ml-return-control-metric__icon {
  transform:
    scale(
      1.035
    );
}


.ml-return-control-metric
> div {
  display:
    grid;

  min-width:
    0;
}


.ml-return-control-metric
> div
> span {
  overflow:
    hidden;

  margin-bottom:
    6px;

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

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


.ml-return-control-metric
strong {
  color:
    var(
      --mlrc-text-strong
    );

  font-size:
    27px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    -0.04em;
}


.ml-return-control-metric.is-ok
.ml-return-control-metric__icon {
  border-color:
    var(
      --mlrc-success-border
    );

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

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


.ml-return-control-metric.is-review
.ml-return-control-metric__icon,
.ml-return-control-metric.is-warning
.ml-return-control-metric__icon {
  border-color:
    var(
      --mlrc-warning-border
    );

  background:
    var(
      --mlrc-warning-soft
    );

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


.ml-return-control-metric.is-danger
.ml-return-control-metric__icon {
  border-color:
    var(
      --mlrc-danger-border
    );

  background:
    var(
      --mlrc-danger-soft
    );

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


/* =========================================================
   10 · TOOLBAR
   ========================================================= */

.ml-return-control-toolbar {
  display:
    grid;

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

  align-items:
    center;

  gap:
    12px;

  min-width:
    0;

  padding:
    14px;

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

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

  background:
    var(
      --mlrc-surface
    );

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

  animation:
    mlrc-fade-up
    220ms
    40ms
    var(
      --mlrc-transition-slow
    )
    both;
}


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

.ml-return-control-search {
  display:
    grid;

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

  gap:
    9px;

  min-width:
    0;
}


.ml-return-control-search
label {
  display:
    grid;

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

  align-items:
    center;

  min-height:
    42px;

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

  border-radius:
    9px;

  background:
    var(
      --mlrc-surface-soft
    );

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


.ml-return-control-search
label:focus-within {
  border-color:
    var(
      --mlrc-text-strong
    );

  background:
    var(
      --mlrc-surface
    );

  transform:
    translateY(
      -1px
    );
}


.ml-return-control-search
label
> span {
  display:
    grid;

  place-items:
    center;

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


.ml-return-control-search
input {
  width:
    100%;

  min-width:
    0;

  height:
    100%;

  padding:
    0 12px 0 0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

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

  font-family:
    inherit;

  font-size:
    12px;

  font-weight:
    700;
}


.ml-return-control-search
input::placeholder {
  color:
    var(
      --mlrc-text-faint
    );

  opacity:
    1;

  font-weight:
    650;
}


/* =========================================================
   11 · FILTERS
   ========================================================= */

.ml-return-control-filters {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;

  flex-wrap:
    wrap;
}


.ml-return-control-filter {
  min-height:
    34px;

  padding:
    0 12px;

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

  border-radius:
    999px;

  background:
    var(
      --mlrc-surface-soft
    );

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

  font-size:
    9px;

  font-weight:
    800;

  cursor:
    pointer;

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


.ml-return-control-filter:hover {
  background:
    var(
      --mlrc-surface-hover
    );

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

  transform:
    translateY(
      -1px
    );
}


.ml-return-control-filter.is-active {
  border-color:
    var(
      --mlrc-text-strong
    );

  background:
    var(
      --mlrc-text-strong
    );

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


html[data-theme="dark"]
.ml-return-control-filter.is-active,
body.dark
.ml-return-control-filter.is-active,
body[data-theme="dark"]
.ml-return-control-filter.is-active {
  border-color:
    #ffffff;

  background:
    #ffffff;

  color:
    #000000;
}


/* =========================================================
   12 · MESSAGE
   ========================================================= */

.ml-return-control-message {
  grid-column:
    1 / -1;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    10px 12px;

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

  border-radius:
    9px;

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

  font-size:
    10px;

  font-weight:
    750;

  animation:
    mlrc-fade-up
    160ms
    var(
      --mlrc-transition-slow
    )
    both;
}


.ml-return-control-message.is-error {
  border-color:
    var(
      --mlrc-danger-border
    );

  background:
    var(
      --mlrc-danger-soft
    );

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


/* =========================================================
   13 · LIST PANEL
   ========================================================= */

.ml-return-control-list-panel {
  min-width:
    0;

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

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

  background:
    var(
      --mlrc-surface
    );

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

  overflow:
    hidden;

  animation:
    mlrc-fade-up
    220ms
    60ms
    var(
      --mlrc-transition-slow
    )
    both;
}


.ml-return-control-list-panel__head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-height:
    62px;

  padding:
    11px 14px;

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

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


.ml-return-control-list-panel__head
span:first-child {
  display:
    block;

  margin-bottom:
    3px;

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

  font-size:
    8.5px;

  font-weight:
    850;

  line-height:
    1.2;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.ml-return-control-list-panel__head
h2 {
  margin:
    0;

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

  font-size:
    15px;

  font-weight:
    820;
}


.ml-return-control-count {
  display:
    grid;

  place-items:
    center;

  min-width:
    34px;

  height:
    28px;

  padding:
    0 9px;

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

  border-radius:
    999px;

  background:
    var(
      --mlrc-surface-soft
    );

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

  font-size:
    9px;

  font-weight:
    850;
}


/* =========================================================
   14 · LIST HEAD
   ========================================================= */

.ml-return-control-list-head {
  display:
    grid;

  grid-template-columns:
    minmax(
      190px,
      1.2fr
    )
    minmax(
      145px,
      0.8fr
    )
    minmax(
      145px,
      0.82fr
    )
    minmax(
      130px,
      0.72fr
    )
    minmax(
      140px,
      0.78fr
    )
    122px;

  align-items:
    center;

  gap:
    12px;

  min-height:
    40px;

  padding:
    0 14px;

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

  background:
    var(
      --mlrc-surface-soft
    );
}


.ml-return-control-list-head
span {
  color:
    var(
      --mlrc-text-soft
    );

  font-size:
    8px;

  font-weight:
    850;

  line-height:
    1.2;

  letter-spacing:
    0.02em;

  text-transform:
    uppercase;
}


/* =========================================================
   15 · LIST
   ========================================================= */

.ml-return-control-list {
  display:
    grid;

  min-width:
    0;
}


/* =========================================================
   16 · ROW
   ========================================================= */

.ml-return-control-row {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    minmax(
      190px,
      1.2fr
    )
    minmax(
      145px,
      0.8fr
    )
    minmax(
      145px,
      0.82fr
    )
    minmax(
      130px,
      0.72fr
    )
    minmax(
      140px,
      0.78fr
    )
    122px;

  align-items:
    center;

  gap:
    12px;

  min-width:
    0;

  min-height:
    68px;

  padding:
    10px 14px;

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

  background:
    var(
      --mlrc-surface
    );

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


.ml-return-control-row::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    10px;

  bottom:
    10px;

  width:
    2px;

  background:
    var(
      --mlrc-text-strong
    );

  opacity:
    0;

  transform:
    scaleY(
      0.4
    );

  transition:
    opacity
      var(
        --mlrc-transition-fast
      ),
    transform
      var(
        --mlrc-transition-fast
      );
}


.ml-return-control-row:last-child {
  border-bottom:
    0;
}


.ml-return-control-row:hover {
  background:
    var(
      --mlrc-surface-hover
    );
}


.ml-return-control-row:hover::before {
  opacity:
    1;

  transform:
    scaleY(
      1
    );
}


.ml-return-control-row__number {
  display:
    grid;

  min-width:
    0;
}


.ml-return-control-row__number
strong {
  overflow:
    hidden;

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

  font-size:
    10.5px;

  font-weight:
    800;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ml-return-control-row__number
small {
  margin-top:
    4px;

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

  font-size:
    8px;

  font-weight:
    650;

  line-height:
    1.25;
}


.ml-return-control-row__date,
.ml-return-control-row__operator {
  overflow:
    hidden;

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

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   17 · STATUS / CONDITION
   ========================================================= */

.ml-return-control-status,
.ml-return-control-condition {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  width:
    fit-content;

  min-height:
    29px;

  max-width:
    100%;

  padding:
    0 9px;

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

  border-radius:
    999px;

  background:
    var(
      --mlrc-surface-soft
    );

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

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1;

  white-space:
    nowrap;

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


.ml-return-control-status
.icon,
.ml-return-control-condition
.icon {
  width:
    12px;

  height:
    12px;

  stroke-width:
    2.2;
}


.ml-return-control-row:hover
.ml-return-control-status,
.ml-return-control-row:hover
.ml-return-control-condition {
  transform:
    translateY(
      -1px
    );
}


.ml-return-control-status.is-review,
.ml-return-control-status.is-pending {
  border-color:
    var(
      --mlrc-warning-border
    );

  background:
    var(
      --mlrc-warning-soft
    );

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


.ml-return-control-status.is-approved,
.ml-return-control-condition.is-ok {
  border-color:
    var(
      --mlrc-success-border
    );

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

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


.ml-return-control-status.is-rejected {
  border-color:
    var(
      --mlrc-danger-border
    );

  background:
    var(
      --mlrc-danger-soft
    );

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


.ml-return-control-condition.is-damaged,
.ml-return-control-condition.is-incomplete,
.ml-return-control-condition.is-wrong,
.ml-return-control-condition.is-other {
  border-color:
    var(
      --mlrc-warning-border
    );

  background:
    var(
      --mlrc-warning-soft
    );

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


/* =========================================================
   18 · OPEN BUTTON
   ========================================================= */

.ml-return-control-open-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  min-height:
    34px;

  padding:
    0 10px;

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

  border-radius:
    8px;

  background:
    var(
      --mlrc-surface
    );

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

  font-size:
    9px;

  font-weight:
    800;

  cursor:
    pointer;

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


.ml-return-control-open-button:hover {
  background:
    var(
      --mlrc-surface-hover
    );

  transform:
    translateY(
      -1px
    );
}


.ml-return-control-open-button:active {
  transform:
    scale(
      0.985
    );
}


/* =========================================================
   19 · EMPTY
   ========================================================= */

.ml-return-control-empty {
  display:
    grid;

  place-items:
    center;

  gap:
    8px;

  min-height:
    170px;

  padding:
    24px;

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

  text-align:
    center;

  animation:
    mlrc-fade-in
    180ms
    ease
    both;
}


.ml-return-control-empty
strong {
  color:
    var(
      --mlrc-text-strong
    );

  font-size:
    11px;

  font-weight:
    820;
}


.ml-return-control-empty
span {
  color:
    var(
      --mlrc-text-soft
    );

  font-size:
    9px;

  font-weight:
    650;
}


/* =========================================================
   20 · PAGINATION
   ========================================================= */

.ml-return-control-pagination {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  min-height:
    52px;

  padding:
    9px 13px;

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

  background:
    var(
      --mlrc-surface-soft
    );
}


.ml-return-control-pagination
button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  min-height:
    34px;

  padding:
    0 10px;

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

  border-radius:
    8px;

  background:
    var(
      --mlrc-surface
    );

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

  font-size:
    9px;

  font-weight:
    780;

  cursor:
    pointer;

  transition:
    transform
      var(
        --mlrc-transition-fast
      ),
    background
      var(
        --mlrc-transition-fast
      );
}


.ml-return-control-pagination
button:hover:not(:disabled) {
  background:
    var(
      --mlrc-surface-hover
    );

  transform:
    translateY(
      -1px
    );
}


.ml-return-control-pagination
button:disabled {
  opacity:
    0.4;

  cursor:
    default;
}


.ml-return-control-pagination
> span {
  color:
    var(
      --mlrc-text-strong
    );

  font-size:
    9px;

  font-weight:
    720;
}


.ml-return-control-pagination
> span
strong {
  font-weight:
    850;
}


/* =========================================================
   21 · MODAL BACKDROP
   ========================================================= */

.ml-return-control-modal-backdrop {
  --mlrc-surface:
    #ffffff;

  --mlrc-surface-soft:
    #f7f7f8;

  --mlrc-surface-muted:
    #eceef1;

  --mlrc-surface-hover:
    #f1f2f4;

  --mlrc-text:
    #111111;

  --mlrc-text-strong:
    #000000;

  --mlrc-text-soft:
    #1c1c1c;

  --mlrc-text-muted:
    #2f2f2f;

  --mlrc-border:
    rgba(
      0,
      0,
      0,
      0.14
    );

  --mlrc-border-strong:
    rgba(
      0,
      0,
      0,
      0.24
    );

  --mlrc-success:
    #0d6a3d;

  --mlrc-success-soft:
    #e8f4ed;

  --mlrc-success-border:
    #9ec9b0;

  --mlrc-warning:
    #9a5700;

  --mlrc-warning-soft:
    #fff2dc;

  --mlrc-warning-border:
    #e4be80;

  --mlrc-danger:
    #b42323;

  --mlrc-danger-soft:
    #fdeaea;

  --mlrc-danger-border:
    #e4a1a1;

  position:
    fixed;

  inset:
    0;

  z-index:
    9999;

  display:
    grid;

  place-items:
    center;

  padding:
    20px;

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

  animation:
    mlrc-fade-in
    140ms
    ease
    both;
}


html[data-theme="dark"]
.ml-return-control-modal-backdrop,
body.dark
.ml-return-control-modal-backdrop,
body[data-theme="dark"]
.ml-return-control-modal-backdrop {
  --mlrc-surface:
    #090909;

  --mlrc-surface-soft:
    #101010;

  --mlrc-surface-muted:
    #171717;

  --mlrc-surface-hover:
    #131313;

  --mlrc-text:
    #ffffff;

  --mlrc-text-strong:
    #ffffff;

  --mlrc-text-soft:
    #f3f3f3;

  --mlrc-text-muted:
    #e0e0e0;

  --mlrc-border:
    rgba(
      255,
      255,
      255,
      0.15
    );

  --mlrc-border-strong:
    rgba(
      255,
      255,
      255,
      0.24
    );

  --mlrc-success:
    #65d493;

  --mlrc-success-soft:
    #10271a;

  --mlrc-success-border:
    #285a3b;

  --mlrc-warning:
    #ffbd5d;

  --mlrc-warning-soft:
    #2a1e0b;

  --mlrc-warning-border:
    #6b4b18;

  --mlrc-danger:
    #ff7777;

  --mlrc-danger-soft:
    #2b1212;

  --mlrc-danger-border:
    #673030;
}


/* =========================================================
   22 · MODAL
   ========================================================= */

.ml-return-control-modal {
  display:
    grid;

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

  width:
    min(
      980px,
      100%
    );

  max-height:
    min(
      92vh,
      940px
    );

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

  border-radius:
    15px;

  background:
    var(
      --mlrc-surface
    );

  color:
    var(
      --mlrc-text
    );

  font-family:
    "DM Sans",
    "Inter",
    system-ui,
    sans-serif;

  font-weight:
    600;

  overflow:
    hidden;

  box-shadow:
    0 22px 60px rgba(
      0,
      0,
      0,
      0.22
    );

  animation:
    mlrc-scale-in
    170ms
    var(
      --mlrc-transition-slow
    )
    both;
}


.ml-return-control-modal__head,
.ml-return-control-modal__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    11px 15px;
}


.ml-return-control-modal__head {
  min-height:
    64px;

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


.ml-return-control-modal__head
span {
  display:
    block;

  margin-bottom:
    3px;

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

  font-size:
    8.5px;

  font-weight:
    850;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.ml-return-control-modal__head
h2 {
  margin:
    0;

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

  font-size:
    18px;

  font-weight:
    850;

  line-height:
    1.1;
}


.ml-return-control-modal__body {
  display:
    grid;

  align-content:
    start;

  gap:
    14px;

  min-width:
    0;

  padding:
    15px;

  overflow-y:
    auto;

  overflow-x:
    hidden;
}


.ml-return-control-modal__footer {
  min-height:
    60px;

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

  background:
    var(
      --mlrc-surface-soft
    );
}


/* =========================================================
   23 · ICON BUTTON
   ========================================================= */

.ml-return-control-icon-button {
  display:
    grid;

  place-items:
    center;

  width:
    34px;

  height:
    34px;

  padding:
    0;

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

  border-radius:
    8px;

  background:
    var(
      --mlrc-surface
    );

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

  cursor:
    pointer;

  transition:
    transform
      var(
        --mlrc-transition-fast
      ),
    background
      var(
        --mlrc-transition-fast
      );
}


.ml-return-control-icon-button:hover {
  background:
    var(
      --mlrc-surface-hover
    );

  transform:
    translateY(
      -1px
    );
}


.ml-return-control-icon-button:active {
  transform:
    scale(
      0.96
    );
}


/* =========================================================
   24 · SUMMARY STATES
   ========================================================= */

.ml-return-control-summary__states {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;
}


/* =========================================================
   25 · SUMMARY GRID
   ========================================================= */

.ml-return-control-summary__grid {
  display:
    grid;

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

  gap:
    8px;
}


.ml-return-control-summary__grid
article {
  display:
    grid;

  align-content:
    center;

  gap:
    6px;

  min-width:
    0;

  min-height:
    74px;

  padding:
    11px;

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

  border-radius:
    9px;

  background:
    var(
      --mlrc-surface-soft
    );

  transition:
    background
      var(
        --mlrc-transition-fast
      ),
    transform
      var(
        --mlrc-transition-fast
      );
}


.ml-return-control-summary__grid
article:hover {
  background:
    var(
      --mlrc-surface-hover
    );

  transform:
    translateY(
      -1px
    );
}


.ml-return-control-summary__grid
span {
  color:
    var(
      --mlrc-text-soft
    );

  font-size:
    8px;

  font-weight:
    800;

  text-transform:
    uppercase;
}


.ml-return-control-summary__grid
strong {
  overflow:
    hidden;

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

  font-size:
    10.5px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   26 · SUMMARY SECTION
   ========================================================= */

.ml-return-control-summary__section {
  display:
    grid;

  gap:
    8px;
}


.ml-return-control-summary__section
> span {
  color:
    var(
      --mlrc-text-strong
    );

  font-size:
    8.5px;

  font-weight:
    850;

  letter-spacing:
    0.06em;
}


.ml-return-control-summary__section
> p {
  margin:
    0;

  padding:
    11px;

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

  border-radius:
    9px;

  background:
    var(
      --mlrc-surface-soft
    );

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

  font-size:
    10px;

  font-weight:
    650;

  line-height:
    1.55;
}/* =========================================================
   27 · SUMMARY ITEMS
   ========================================================= */

.ml-return-control-summary-items {
  display:
    grid;

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

  border-radius:
    10px;

  background:
    var(
      --mlrc-surface
    );

  overflow:
    hidden;
}


.ml-return-control-summary-items
article {
  display:
    grid;

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

  align-items:
    center;

  gap:
    12px;

  min-width:
    0;

  min-height:
    64px;

  padding:
    10px 12px;

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

  background:
    var(
      --mlrc-surface
    );

  transition:
    background
      var(
        --mlrc-transition-fast
      ),
    transform
      var(
        --mlrc-transition-fast
      );
}


.ml-return-control-summary-items
article:last-child {
  border-bottom:
    0;
}


.ml-return-control-summary-items
article:hover {
  background:
    var(
      --mlrc-surface-hover
    );
}


.ml-return-control-summary-items
article
> div:first-child {
  display:
    grid;

  min-width:
    0;
}


.ml-return-control-summary-items
article
> div:first-child
strong {
  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ml-return-control-summary-items
small {
  margin-top:
    4px;

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

  font-size:
    8px;

  font-weight:
    650;
}


.ml-return-control-summary-items__qty {
  display:
    grid;

  gap:
    4px;

  min-width:
    68px;
}


.ml-return-control-summary-items__qty
span {
  color:
    var(
      --mlrc-text-soft
    );

  font-size:
    8px;

  font-weight:
    750;
}


.ml-return-control-summary-items__qty
strong {
  color:
    var(
      --mlrc-text-strong
    );

  font-size:
    10px;

  font-weight:
    850;
}


/* =========================================================
   28 · SUMMARY EMPTY
   ========================================================= */

.ml-return-control-summary-empty {
  padding:
    16px;

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

  border-radius:
    9px;

  background:
    var(
      --mlrc-surface-soft
    );

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

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1.45;
}


/* =========================================================
   29 · PHOTOS
   ========================================================= */

.ml-return-control-summary-photos {
  display:
    grid;

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

  gap:
    9px;

  min-width:
    0;
}


.ml-return-control-summary-photos
button {
  position:
    relative;

  display:
    block;

  min-width:
    0;

  aspect-ratio:
    4 / 3;

  padding:
    0;

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

  border-radius:
    10px;

  background:
    var(
      --mlrc-surface-muted
    );

  cursor:
    zoom-in;

  overflow:
    hidden;

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


.ml-return-control-summary-photos
button:hover {
  transform:
    translateY(
      -2px
    );

  border-color:
    var(
      --mlrc-text-strong
    );
}


.ml-return-control-summary-photos
button:active {
  transform:
    scale(
      0.985
    );
}


.ml-return-control-summary-photos
img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform
      220ms
      var(
        --mlrc-transition-slow
      );
}


.ml-return-control-summary-photos
button:hover
img {
  transform:
    scale(
      1.025
    );
}


.ml-return-control-summary-photos
button
span {
  position:
    absolute;

  left:
    7px;

  bottom:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    22px;

  max-width:
    calc(
      100% -
      14px
    );

  padding:
    0 7px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.24
    );

  border-radius:
    999px;

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

  color:
    #ffffff;

  font-size:
    7px;

  font-weight:
    850;

  line-height:
    1;

  text-overflow:
    ellipsis;

  text-transform:
    uppercase;

  white-space:
    nowrap;

  overflow:
    hidden;
}


/* =========================================================
   30 · REVIEW
   ========================================================= */

.ml-return-control-review {
  display:
    grid;

  gap:
    13px;

  padding:
    13px;

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

  border-radius:
    11px;

  background:
    var(
      --mlrc-surface-soft
    );

  animation:
    mlrc-fade-up
    180ms
    var(
      --mlrc-transition-slow
    )
    both;
}


.ml-return-control-review.is-readonly {
  background:
    var(
      --mlrc-surface
    );
}


.ml-return-control-review.is-readonly
> div {
  display:
    grid;

  gap:
    5px;
}


.ml-return-control-review.is-readonly
span {
  color:
    var(
      --mlrc-text-strong
    );

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


.ml-return-control-review.is-readonly
strong {
  color:
    var(
      --mlrc-text-strong
    );

  font-size:
    13px;

  font-weight:
    850;
}


.ml-return-control-review.is-readonly
p {
  margin:
    0;

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

  font-size:
    9px;

  font-weight:
    650;

  line-height:
    1.5;
}


.ml-return-control-review__head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;
}


.ml-return-control-review__head
> div {
  min-width:
    0;
}


.ml-return-control-review__head
span {
  display:
    block;

  margin-bottom:
    3px;

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

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.ml-return-control-review__head
h3 {
  margin:
    0;

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

  font-size:
    14px;

  font-weight:
    850;

  line-height:
    1.2;
}


.ml-return-control-review__head
p {
  margin:
    5px 0 0;

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

  font-size:
    9px;

  font-weight:
    650;

  line-height:
    1.45;
}


.ml-return-control-review__head
> .icon {
  color:
    var(
      --mlrc-text-strong
    );
}


/* =========================================================
   31 · REVIEW OPTIONS
   ========================================================= */

.ml-return-control-review__options {
  display:
    grid;

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

  gap:
    9px;
}


.ml-return-control-review-option {
  position:
    relative;

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  min-width:
    0;

  min-height:
    76px;

  padding:
    10px;

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

  border-radius:
    9px;

  background:
    var(
      --mlrc-surface
    );

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

  text-align:
    left;

  cursor:
    pointer;

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


.ml-return-control-review-option:hover {
  background:
    var(
      --mlrc-surface-hover
    );

  transform:
    translateY(
      -1px
    );
}


.ml-return-control-review-option:active {
  transform:
    scale(
      0.99
    );
}


.ml-return-control-review-option
> span:first-child {
  display:
    grid;

  place-items:
    center;

  width:
    34px;

  height:
    34px;

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

  border-radius:
    8px;

  background:
    var(
      --mlrc-surface-soft
    );
}


.ml-return-control-review-option
> div {
  display:
    grid;

  min-width:
    0;
}


.ml-return-control-review-option
strong {
  color:
    inherit;

  font-size:
    10px;

  font-weight:
    820;

  line-height:
    1.3;
}


.ml-return-control-review-option
small {
  margin-top:
    4px;

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

  font-size:
    8px;

  font-weight:
    650;

  line-height:
    1.4;
}


.ml-return-control-review-option.is-approved.is-active {
  border-color:
    var(
      --mlrc-success-border
    );

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

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


.ml-return-control-review-option.is-approved.is-active
> span:first-child {
  border-color:
    var(
      --mlrc-success-border
    );

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


.ml-return-control-review-option.is-rejected.is-active {
  border-color:
    var(
      --mlrc-danger-border
    );

  background:
    var(
      --mlrc-danger-soft
    );

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


.ml-return-control-review-option.is-rejected.is-active
> span:first-child {
  border-color:
    var(
      --mlrc-danger-border
    );

  background:
    var(
      --mlrc-danger-soft
    );
}


/* =========================================================
   32 · REVIEW COMMENT
   ========================================================= */

.ml-return-control-review__comment {
  display:
    grid;

  gap:
    7px;
}


.ml-return-control-review__comment
> span {
  color:
    var(
      --mlrc-text-strong
    );

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}


.ml-return-control-review__comment
textarea {
  width:
    100%;

  min-height:
    96px;

  resize:
    vertical;

  padding:
    11px;

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

  border-radius:
    9px;

  outline:
    0;

  background:
    var(
      --mlrc-surface
    );

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

  font-family:
    inherit;

  font-size:
    10px;

  font-weight:
    650;

  line-height:
    1.5;

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


.ml-return-control-review__comment
textarea::placeholder {
  color:
    var(
      --mlrc-text-faint
    );

  opacity:
    1;

  font-weight:
    650;
}


.ml-return-control-review__comment
textarea:focus {
  border-color:
    var(
      --mlrc-text-strong
    );

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


/* =========================================================
   33 · PHOTO VIEWER
   ========================================================= */

.ml-return-control-modal-backdrop--photo {
  padding:
    24px;
}


.ml-return-control-photo-viewer {
  display:
    grid;

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

  width:
    min(
      1180px,
      100%
    );

  max-height:
    94vh;

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

  border-radius:
    15px;

  background:
    var(
      --mlrc-surface
    );

  overflow:
    hidden;

  box-shadow:
    0 22px 60px rgba(
      0,
      0,
      0,
      0.24
    );

  animation:
    mlrc-scale-in
    170ms
    var(
      --mlrc-transition-slow
    )
    both;
}


.ml-return-control-photo-viewer
header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-height:
    56px;

  padding:
    10px 13px;

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

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


.ml-return-control-photo-viewer
header
> span {
  color:
    var(
      --mlrc-text-strong
    );

  font-size:
    10px;

  font-weight:
    820;
}


.ml-return-control-photo-viewer
> div {
  display:
    grid;

  place-items:
    center;

  min-height:
    0;

  min-width:
    0;

  padding:
    14px;

  background:
    #000000;

  overflow:
    auto;
}


.ml-return-control-photo-viewer
img {
  display:
    block;

  width:
    auto;

  height:
    auto;

  max-width:
    100%;

  max-height:
    calc(
      94vh -
      84px
    );

  object-fit:
    contain;
}


/* =========================================================
   34 · FOCUS ACCESSIBLE
   ========================================================= */

.ml-return-control-page
button:focus-visible,
.ml-return-control-page
input:focus-visible,
.ml-return-control-page
textarea:focus-visible,
.ml-return-control-modal
button:focus-visible,
.ml-return-control-modal
textarea:focus-visible {
  outline:
    2px solid
    var(
      --mlrc-text-strong
    );

  outline-offset:
    2px;
}


/* =========================================================
   35 · DESKTOP MEDIO
   ========================================================= */

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


  .ml-return-control-list-head,
  .ml-return-control-row {
    grid-template-columns:
      minmax(
        170px,
        1.1fr
      )
      minmax(
        132px,
        0.74fr
      )
      minmax(
        128px,
        0.76fr
      )
      minmax(
        118px,
        0.68fr
      )
      minmax(
        128px,
        0.72fr
      )
      116px;
  }
}


/* =========================================================
   36 · NOTEBOOK / TABLET HORIZONTAL
   ========================================================= */

@media (
  max-width:
  1180px
) {
  .ml-return-control-toolbar {
    grid-template-columns:
      1fr;
  }


  .ml-return-control-filters {
    justify-content:
      flex-start;
  }


  .ml-return-control-list-head {
    display:
      none;
  }


  .ml-return-control-row {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      auto;

    gap:
      9px 12px;

    min-height:
      94px;

    padding:
      12px 14px;
  }


  .ml-return-control-row__number {
    grid-column:
      1;

    grid-row:
      1;
  }


  .ml-return-control-row
  .ml-return-control-condition {
    grid-column:
      2;

    grid-row:
      1;

    justify-self:
      end;
  }


  .ml-return-control-row__date {
    grid-column:
      1;

    grid-row:
      2;
  }


  .ml-return-control-row
  .ml-return-control-status {
    grid-column:
      2;

    grid-row:
      2;

    justify-self:
      end;
  }


  .ml-return-control-row__operator {
    grid-column:
      1;

    grid-row:
      3;
  }


  .ml-return-control-open-button {
    grid-column:
      2;

    grid-row:
      3;

    justify-self:
      end;
  }


  .ml-return-control-summary-photos {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }
}


/* =========================================================
   37 · TABLET
   ========================================================= */

@media (
  max-width:
  900px
) {
  .ml-return-control-header {
    grid-template-columns:
      1fr;

    min-height:
      auto;

    gap:
      14px;
  }


  .ml-return-control-header__actions {
    justify-content:
      flex-start;
  }


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


  .ml-return-control-summary__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .ml-return-control-summary-photos {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .ml-return-control-review__options {
    grid-template-columns:
      1fr;
  }


  .ml-return-control-modal {
    width:
      min(
        760px,
        100%
      );
  }
}


/* =========================================================
   38 · MOBILE
   ========================================================= */

@media (
  max-width:
  640px
) {
  .ml-return-control-page {
    gap:
      10px;

    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    overflow-x:
      hidden;
  }


  .ml-return-control-header {
    gap:
      12px;

    padding:
      14px;

    border-radius:
      12px;
  }


  .ml-return-control-header__identity {
    grid-template-columns:
      40px
      minmax(
        0,
        1fr
      );

    gap:
      10px;
  }


  .ml-return-control-header__icon {
    width:
      40px;

    height:
      40px;

    border-radius:
      9px;
  }


  .ml-return-control-header__icon
  .icon {
    width:
      20px;

    height:
      20px;
  }


  .ml-return-control-eyebrow {
    margin-bottom:
      3px;

    font-size:
      8px;
  }


  .ml-return-control-header__identity
  h1 {
    font-size:
      21px;

    line-height:
      1.08;
  }


  .ml-return-control-header__identity
  p {
    margin-top:
      6px;

    font-size:
      10px;

    line-height:
      1.45;
  }


  .ml-return-control-header__actions {
    width:
      100%;
  }


  .ml-return-control-header__actions
  .ml-return-control-secondary-button {
    width:
      100%;
  }


  .ml-return-control-metrics {
    grid-template-columns:
      1fr;

    gap:
      7px;
  }


  .ml-return-control-metric {
    grid-template-columns:
      38px
      minmax(
        0,
        1fr
      );

    min-height:
      72px;

    padding:
      11px;
  }


  .ml-return-control-metric__icon {
    width:
      38px;

    height:
      38px;
  }


  .ml-return-control-metric
  strong {
    font-size:
      23px;
  }


  .ml-return-control-toolbar {
    gap:
      10px;

    padding:
      11px;
  }


  .ml-return-control-search {
    grid-template-columns:
      1fr;
  }


  .ml-return-control-search
  .ml-return-control-primary-button {
    width:
      100%;
  }


  .ml-return-control-filters {
    display:
      grid;

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

    width:
      100%;
  }


  .ml-return-control-filter {
    width:
      100%;

    padding:
      0 8px;
  }


  .ml-return-control-list-panel {
    border-radius:
      12px;
  }


  .ml-return-control-list-panel__head {
    min-height:
      56px;

    padding:
      10px 12px;
  }


  .ml-return-control-row {
    grid-template-columns:
      1fr;

    gap:
      7px;

    min-height:
      0;

    padding:
      12px;
  }


  .ml-return-control-row__number,
  .ml-return-control-row__date,
  .ml-return-control-row__operator,
  .ml-return-control-row
  .ml-return-control-condition,
  .ml-return-control-row
  .ml-return-control-status,
  .ml-return-control-open-button {
    grid-column:
      1;

    grid-row:
      auto;

    justify-self:
      start;
  }


  .ml-return-control-row__number
  strong {
    font-size:
      11px;
  }


  .ml-return-control-row__number
  small,
  .ml-return-control-row__date,
  .ml-return-control-row__operator {
    font-size:
      8.5px;
  }


  .ml-return-control-open-button {
    width:
      100%;

    margin-top:
      3px;
  }


  .ml-return-control-pagination {
    align-items:
      stretch;

    flex-direction:
      column;

    padding:
      10px;
  }


  .ml-return-control-pagination
  button {
    width:
      100%;
  }


  .ml-return-control-pagination
  > span {
    text-align:
      center;
  }


  .ml-return-control-summary__grid {
    grid-template-columns:
      1fr;
  }


  .ml-return-control-summary-items
  article {
    grid-template-columns:
      1fr;

    gap:
      7px;
  }


  .ml-return-control-summary-items__qty {
    min-width:
      0;
  }


  .ml-return-control-summary-photos {
    grid-template-columns:
      1fr;
  }


  .ml-return-control-modal-backdrop {
    place-items:
      end
      center;

    padding:
      0;
  }


  .ml-return-control-modal {
    width:
      100%;

    max-width:
      none;

    max-height:
      95dvh;

    border-right:
      0;

    border-bottom:
      0;

    border-left:
      0;

    border-radius:
      15px
      15px
      0
      0;
  }


  .ml-return-control-modal__head {
    min-height:
      58px;

    padding:
      10px 12px;
  }


  .ml-return-control-modal__head
  h2 {
    font-size:
      16px;
  }


  .ml-return-control-modal__body {
    gap:
      12px;

    padding:
      12px;
  }


  .ml-return-control-modal__footer {
    align-items:
      stretch;

    flex-direction:
      column;

    padding:
      10px 12px;
  }


  .ml-return-control-modal__footer
  button {
    width:
      100%;
  }


  .ml-return-control-review {
    padding:
      11px;
  }


  .ml-return-control-review__head {
    gap:
      8px;
  }


  .ml-return-control-review-option {
    grid-template-columns:
      32px
      minmax(
        0,
        1fr
      )
      16px;

    min-height:
      70px;

    padding:
      9px;
  }


  .ml-return-control-modal-backdrop--photo {
    place-items:
      center;

    padding:
      10px;
  }


  .ml-return-control-photo-viewer {
    width:
      100%;

    max-height:
      92dvh;

    border-radius:
      12px;
  }


  .ml-return-control-photo-viewer
  > div {
    padding:
      8px;
  }


  .ml-return-control-photo-viewer
  img {
    max-height:
      calc(
        92dvh -
        74px
      );
  }
}


/* =========================================================
   39 · MOBILE PEQUEÑO
   ========================================================= */

@media (
  max-width:
  420px
) {
  .ml-return-control-header__identity {
    grid-template-columns:
      36px
      minmax(
        0,
        1fr
      );
  }


  .ml-return-control-header__icon {
    width:
      36px;

    height:
      36px;
  }


  .ml-return-control-header__identity
  h1 {
    font-size:
      19px;
  }


  .ml-return-control-header__identity
  p {
    font-size:
      9px;
  }


  .ml-return-control-filters {
    grid-template-columns:
      1fr;
  }


  .ml-return-control-filter {
    min-height:
      36px;
  }


  .ml-return-control-metric {
    min-height:
      68px;
  }


  .ml-return-control-summary-photos
  button {
    aspect-ratio:
      16 / 11;
  }
}


/* =========================================================
   40 · DARK · CONTRASTE EXTRA
   ========================================================= */

html[data-theme="dark"]
.ml-return-control-row__date,
html[data-theme="dark"]
.ml-return-control-row__operator,
html[data-theme="dark"]
.ml-return-control-row__number
small,
html[data-theme="dark"]
.ml-return-control-summary-items
small,
html[data-theme="dark"]
.ml-return-control-summary-items__qty
span,
html[data-theme="dark"]
.ml-return-control-review-option
small,
html[data-theme="dark"]
.ml-return-control-review__head
p,
html[data-theme="dark"]
.ml-return-control-header__identity
p,
body.dark
.ml-return-control-row__date,
body.dark
.ml-return-control-row__operator,
body.dark
.ml-return-control-row__number
small,
body.dark
.ml-return-control-summary-items
small,
body.dark
.ml-return-control-summary-items__qty
span,
body.dark
.ml-return-control-review-option
small,
body.dark
.ml-return-control-review__head
p,
body.dark
.ml-return-control-header__identity
p,
body[data-theme="dark"]
.ml-return-control-row__date,
body[data-theme="dark"]
.ml-return-control-row__operator,
body[data-theme="dark"]
.ml-return-control-row__number
small,
body[data-theme="dark"]
.ml-return-control-summary-items
small,
body[data-theme="dark"]
.ml-return-control-summary-items__qty
span,
body[data-theme="dark"]
.ml-return-control-review-option
small,
body[data-theme="dark"]
.ml-return-control-review__head
p,
body[data-theme="dark"]
.ml-return-control-header__identity
p {
  color:
    #f0f0f0;
}


/* =========================================================
   41 · LIGHT · TEXTO NEGRO REAL
   ========================================================= */

html:not([data-theme="dark"])
.ml-return-control-page
.ml-return-control-row__date,
html:not([data-theme="dark"])
.ml-return-control-page
.ml-return-control-row__operator,
html:not([data-theme="dark"])
.ml-return-control-page
.ml-return-control-row__number
small,
html:not([data-theme="dark"])
.ml-return-control-page
.ml-return-control-summary-items
small,
html:not([data-theme="dark"])
.ml-return-control-page
.ml-return-control-summary-items__qty
span,
html:not([data-theme="dark"])
.ml-return-control-page
.ml-return-control-review-option
small,
html:not([data-theme="dark"])
.ml-return-control-page
.ml-return-control-review__head
p,
html:not([data-theme="dark"])
.ml-return-control-page
.ml-return-control-header__identity
p {
  color:
    #171717;
}


/* =========================================================
   42 · REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {
  .ml-return-control-page,
  .ml-return-control-page *,
  .ml-return-control-page *::before,
  .ml-return-control-page *::after,
  .ml-return-control-modal,
  .ml-return-control-modal *,
  .ml-return-control-modal *::before,
  .ml-return-control-modal *::after,
  .ml-return-control-photo-viewer,
  .ml-return-control-photo-viewer *,
  .ml-return-control-photo-viewer *::before,
  .ml-return-control-photo-viewer *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;
  }
}


/* =========================================================
   FIN
   control-devoluciones.css
   ========================================================= *//* =========================================================
   AJUSTE · LISTA MÁS COMPACTA Y LEGIBLE
   ========================================================= */

.ml-return-control-list-head {
  gap:
    6px;

  min-height:
    38px;

  padding:
    0 10px;
}


.ml-return-control-list-head
span {
  color:
    var(
      --mlrc-text-strong
    );

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0;

  text-transform:
    uppercase;
}


.ml-return-control-row {
  gap:
    6px;

  min-height:
    58px;

  padding:
    8px 10px;
}


.ml-return-control-row__number
strong {
  font-size:
    11.5px;

  font-weight:
    850;
}


.ml-return-control-row__number
small {
  margin-top:
    2px;

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

  font-size:
    9px;

  font-weight:
    700;
}


.ml-return-control-row__date,
.ml-return-control-row__operator {
  color:
    var(
      --mlrc-text-strong
    );

  font-size:
    9.5px;

  font-weight:
    720;
}


.ml-return-control-status,
.ml-return-control-condition {
  min-height:
    27px;

  padding:
    0 8px;

  font-size:
    8.5px;

  font-weight:
    850;
}


.ml-return-control-open-button {
  min-height:
    32px;

  padding:
    0 9px;

  font-size:
    9px;

  font-weight:
    850;
}


@media (
  max-width:
  1180px
) {
  .ml-return-control-row {
    gap:
      5px 8px;

    padding:
      10px 12px;
  }
}


@media (
  max-width:
  640px
) {
  .ml-return-control-row {
    gap:
      5px;

    padding:
      10px;
  }

  .ml-return-control-row__number
  strong {
    font-size:
      12px;
  }

  .ml-return-control-row__number
  small,
  .ml-return-control-row__date,
  .ml-return-control-row__operator {
    font-size:
      9.5px;
  }

  .ml-return-control-status,
  .ml-return-control-condition,
  .ml-return-control-open-button {
    font-size:
      9px;
  }
}