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

   PARTE 1 DE 3

   CONTIENE:
   - Variables visuales
   - Página
   - Encabezado principal
   - Botones
   - Métricas
   - Navegación
   - Paneles
   - Encabezados de sección
   - Filtros
   - Badges
   - Estados de carga
   - Animaciones base
   ========================================================= */

/* =========================================================
   VARIABLES
   ========================================================= */

.mlc-page {
  --mlc-bg:
    var(
      --app-bg,
      #f5f6f8
    );

  --mlc-surface:
    var(
      --surface,
      #ffffff
    );

  --mlc-surface-soft:
    var(
      --surface-soft,
      #f8f9fb
    );

  --mlc-surface-strong:
    var(
      --surface-strong,
      #eef0f3
    );

  --mlc-text:
    var(
      --text,
      #15171a
    );

  --mlc-text-soft:
    var(
      --text-soft,
      #5e646d
    );

  --mlc-text-muted:
    var(
      --text-muted,
      #858b94
    );

  --mlc-line:
    var(
      --line,
      #dfe2e7
    );

  --mlc-line-strong:
    var(
      --line-strong,
      #c8cdd4
    );

  --mlc-accent:
    var(
      --accent,
      #1f2329
    );

  --mlc-accent-soft:
    color-mix(
      in srgb,
      var(
        --mlc-accent
      )
      9%,
      transparent
    );

  --mlc-success:
    #1f8f58;

  --mlc-success-soft:
    color-mix(
      in srgb,
      var(
        --mlc-success
      )
      11%,
      transparent
    );

  --mlc-warning:
    #b87912;

  --mlc-warning-soft:
    color-mix(
      in srgb,
      var(
        --mlc-warning
      )
      12%,
      transparent
    );

  --mlc-danger:
    #c34646;

  --mlc-danger-soft:
    color-mix(
      in srgb,
      var(
        --mlc-danger
      )
      11%,
      transparent
    );

  --mlc-info:
    #3c72a8;

  --mlc-info-soft:
    color-mix(
      in srgb,
      var(
        --mlc-info
      )
      11%,
      transparent
    );

  --mlc-radius-small:
    8px;

  --mlc-radius:
    12px;

  --mlc-radius-large:
    16px;

  --mlc-transition:
    180ms ease;

  --mlc-transition-slow:
    320ms cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  width:
    100%;

  min-width:
    0;

  color:
    var(
      --mlc-text
    );

  background:
    var(
      --mlc-bg
    );
}

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

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

.mlc-page button,
.mlc-page input,
.mlc-page select,
.mlc-page textarea {
  font:
    inherit;
}

.mlc-page button {
  color:
    inherit;
}

.mlc-page img {
  display:
    block;

  max-width:
    100%;
}

.mlc-page svg {
  width:
    18px;

  height:
    18px;

  stroke-width:
    1.8;
}

/* =========================================================
   CONTENEDOR GENERAL
   ========================================================= */

.mlc-page__inner {
  display:
    flex;

  flex-direction:
    column;

  gap:
    18px;

  width:
    100%;

  min-width:
    0;

  padding:
    22px;
}

/* =========================================================
   ENCABEZADO PRINCIPAL
   ========================================================= */

.mlc-hero {
  position:
    relative;

  isolation:
    isolate;

  overflow:
    hidden;

  width:
    100%;

  min-width:
    0;

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

  border-radius:
    var(
      --mlc-radius-large
    );

  background:
    var(
      --mlc-surface
    );

  animation:
    mlc-enter-up
    420ms
    var(
      --mlc-transition-slow
    )
    both;
}

.mlc-hero__ambient {
  position:
    absolute;

  inset:
    0;

  z-index:
    -1;

  pointer-events:
    none;

  background:
    radial-gradient(
      circle
      at
      0%
      0%,
      color-mix(
        in srgb,
        var(
          --mlc-info
        )
        8%,
        transparent
      ),
      transparent
      42%
    ),
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(
          --mlc-surface
        )
        96%,
        var(
          --mlc-accent
        )
        4%
      ),
      var(
        --mlc-surface
      )
    );

  opacity:
    0.9;
}

.mlc-hero__content {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  width:
    100%;

  padding:
    24px;
}

.mlc-hero__identity {
  display:
    flex;

  align-items:
    center;

  gap:
    16px;

  min-width:
    0;
}

.mlc-hero__mark {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    52px;

  min-width:
    52px;

  height:
    52px;

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

  border-radius:
    14px;

  color:
    var(
      --mlc-text
    );

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

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

.mlc-hero:hover
.mlc-hero__mark {
  transform:
    translateY(
      -2px
    );

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

  background:
    var(
      --mlc-surface-strong
    );
}

.mlc-hero__mark svg {
  width:
    24px;

  height:
    24px;
}

.mlc-hero__copy {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  min-width:
    0;
}

.mlc-hero__eyebrow {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    10px;

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

  font-size:
    12px;

  font-weight:
    700;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.mlc-hero__copy h1 {
  margin:
    0;

  color:
    var(
      --mlc-text
    );

  font-size:
    clamp(
      24px,
      3vw,
      34px
    );

  font-weight:
    760;

  line-height:
    1.05;

  letter-spacing:
    -0.035em;
}

.mlc-hero__copy p {
  max-width:
    780px;

  margin:
    0;

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

  font-size:
    14px;

  line-height:
    1.55;
}

.mlc-hero__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    10px;

  flex-shrink:
    0;
}

.mlc-account {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    2px;

  min-width:
    150px;

  padding-right:
    4px;
}

.mlc-account__label {
  color:
    var(
      --mlc-text-muted
    );

  font-size:
    11px;

  font-weight:
    650;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}

.mlc-account strong {
  max-width:
    220px;

  overflow:
    hidden;

  color:
    var(
      --mlc-text
    );

  font-size:
    14px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

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

.mlc-button {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    40px;

  padding:
    0 15px;

  overflow:
    hidden;

  border:
    1px solid
    transparent;

  border-radius:
    9px;

  font-size:
    13px;

  font-weight:
    680;

  line-height:
    1;

  text-decoration:
    none;

  white-space:
    nowrap;

  cursor:
    pointer;

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

.mlc-button::after {
  position:
    absolute;

  inset:
    0;

  content:
    "";

  pointer-events:
    none;

  background:
    linear-gradient(
      120deg,
      transparent
      20%,
      color-mix(
        in srgb,
        #ffffff
        18%,
        transparent
      )
      48%,
      transparent
      76%
    );

  transform:
    translateX(
      -130%
    );

  transition:
    transform
      520ms
      ease;
}

.mlc-button:hover::after {
  transform:
    translateX(
      130%
    );
}

.mlc-button:hover:not(
  :disabled
) {
  transform:
    translateY(
      -1px
    );
}

.mlc-button:active:not(
  :disabled
) {
  transform:
    translateY(
      0
    )
    scale(
      0.985
    );
}

.mlc-button:focus-visible {
  outline:
    2px solid
    color-mix(
      in srgb,
      var(
        --mlc-accent
      )
      35%,
      transparent
    );

  outline-offset:
    2px;
}

.mlc-button:disabled {
  opacity:
    0.52;

  cursor:
    not-allowed;
}

.mlc-button--primary {
  border-color:
    var(
      --mlc-accent
    );

  color:
    var(
      --mlc-surface
    );

  background:
    var(
      --mlc-accent
    );
}

.mlc-button--primary:hover:not(
  :disabled
) {
  background:
    color-mix(
      in srgb,
      var(
        --mlc-accent
      )
      88%,
      #ffffff
      12%
    );
}

.mlc-button--secondary {
  border-color:
    var(
      --mlc-line-strong
    );

  color:
    var(
      --mlc-text
    );

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

.mlc-button--secondary:hover:not(
  :disabled
) {
  border-color:
    var(
      --mlc-text-muted
    );

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

.mlc-button--ghost {
  border-color:
    transparent;

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

  background:
    transparent;
}

.mlc-button--ghost:hover:not(
  :disabled
) {
  color:
    var(
      --mlc-text
    );

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

.mlc-button--danger {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-danger
      )
      58%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-danger
    );

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

.mlc-button--success {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-success
      )
      55%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-success
    );

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

.mlc-button.is-loading {
  pointer-events:
    none;
}

.mlc-button.is-loading svg {
  animation:
    mlc-spin
    800ms
    linear
    infinite;
}

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

.mlc-metrics {
  display:
    grid;

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

  gap:
    12px;

  width:
    100%;
}

.mlc-metric {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  min-width:
    0;

  min-height:
    112px;

  padding:
    16px;

  overflow:
    hidden;

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

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

  background:
    var(
      --mlc-surface
    );

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

  animation:
    mlc-enter-up
    420ms
    var(
      --mlc-transition-slow
    )
    both;
}

.mlc-metric:nth-child(
  2
) {
  animation-delay:
    45ms;
}

.mlc-metric:nth-child(
  3
) {
  animation-delay:
    90ms;
}

.mlc-metric:nth-child(
  4
) {
  animation-delay:
    135ms;
}

.mlc-metric:nth-child(
  5
) {
  animation-delay:
    180ms;
}

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

.mlc-metric[
  data-action
]:hover {
  transform:
    translateY(
      -3px
    );

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

  background:
    color-mix(
      in srgb,
      var(
        --mlc-surface
      )
      95%,
      var(
        --mlc-accent
      )
      5%
    );
}

.mlc-metric[
  data-action
]:focus-visible {
  outline:
    2px solid
    color-mix(
      in srgb,
      var(
        --mlc-accent
      )
      35%,
      transparent
    );

  outline-offset:
    2px;
}

.mlc-metric__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    42px;

  min-width:
    42px;

  height:
    42px;

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

  border-radius:
    11px;

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

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

.mlc-metric__body {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  min-width:
    0;

  flex:
    1;
}

.mlc-metric__label {
  overflow:
    hidden;

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

  font-size:
    12px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.mlc-metric__value {
  color:
    var(
      --mlc-text
    );

  font-size:
    27px;

  font-weight:
    760;

  line-height:
    1.05;

  letter-spacing:
    -0.04em;
}

.mlc-metric__detail {
  overflow:
    hidden;

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

  font-size:
    11px;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.mlc-metric__arrow {
  width:
    16px;

  height:
    16px;

  flex-shrink:
    0;

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

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

.mlc-metric:hover
.mlc-metric__arrow {
  transform:
    translate(
      2px,
      -2px
    );
}

.mlc-metric--success
.mlc-metric__icon {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-success
      )
      30%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-success
    );

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

.mlc-metric--warning
.mlc-metric__icon {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-warning
      )
      34%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-warning
    );

  background:
    var(
      --mlc-warning-soft
    );
}

.mlc-metric--danger
.mlc-metric__icon {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-danger
      )
      32%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-danger
    );

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

.mlc-metric--info
.mlc-metric__icon {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-info
      )
      30%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-info
    );

  background:
    var(
      --mlc-info-soft
    );
}

/* =========================================================
   NAVEGACIÓN
   ========================================================= */

.mlc-tabs {
  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  width:
    100%;

  min-width:
    0;

  padding:
    5px;

  overflow-x:
    auto;

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

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

  background:
    var(
      --mlc-surface
    );

  scrollbar-width:
    none;

  animation:
    mlc-enter-up
    420ms
    110ms
    var(
      --mlc-transition-slow
    )
    both;
}

.mlc-tabs::-webkit-scrollbar {
  display:
    none;
}

.mlc-tab {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    40px;

  padding:
    0 14px;

  flex:
    1 0 auto;

  border:
    1px solid
    transparent;

  border-radius:
    8px;

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

  background:
    transparent;

  font-size:
    13px;

  font-weight:
    650;

  cursor:
    pointer;

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

.mlc-tab:hover {
  color:
    var(
      --mlc-text
    );

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

.mlc-tab:active {
  transform:
    scale(
      0.985
    );
}

.mlc-tab.is-active {
  border-color:
    var(
      --mlc-line-strong
    );

  color:
    var(
      --mlc-text
    );

  background:
    var(
      --mlc-surface-strong
    );
}

.mlc-tab.is-active::after {
  position:
    absolute;

  right:
    12px;

  bottom:
    -6px;

  left:
    12px;

  height:
    2px;

  border-radius:
    999px;

  content:
    "";

  background:
    var(
      --mlc-accent
    );

  animation:
    mlc-expand-x
    260ms
    ease
    both;
}

.mlc-tab__count {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    22px;

  height:
    20px;

  padding:
    0 6px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(
        --mlc-warning
      )
      32%,
      var(
        --mlc-line
      )
    );

  border-radius:
    999px;

  color:
    var(
      --mlc-warning
    );

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

  font-size:
    10px;

  font-weight:
    750;
}

/* =========================================================
   VISTA ACTIVA
   ========================================================= */

.mlc-view {
  width:
    100%;

  min-width:
    0;

  scroll-margin-top:
    90px;

  transition:
    opacity
      var(
        --mlc-transition
      ),
    transform
      var(
        --mlc-transition
      );
}

.mlc-view.is-changing {
  opacity:
    0.42;

  transform:
    translateY(
      4px
    );
}

/* =========================================================
   PANELES
   ========================================================= */

.mlc-panel {
  width:
    100%;

  min-width:
    0;

  overflow:
    hidden;

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

  border-radius:
    var(
      --mlc-radius-large
    );

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

.mlc-panel--animated {
  animation:
    mlc-panel-enter
    360ms
    var(
      --mlc-transition-slow
    )
    both;
}

/* =========================================================
   ENCABEZADOS DE SECCIÓN
   ========================================================= */

.mlc-section-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  width:
    100%;

  padding:
    20px 20px 16px;

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

.mlc-section-head__copy {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  min-width:
    0;
}

.mlc-section-head__eyebrow {
  color:
    var(
      --mlc-text-muted
    );

  font-size:
    10px;

  font-weight:
    750;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}

.mlc-section-head h2 {
  margin:
    0;

  color:
    var(
      --mlc-text
    );

  font-size:
    20px;

  font-weight:
    740;

  line-height:
    1.15;

  letter-spacing:
    -0.025em;
}

.mlc-section-head p {
  margin:
    0;

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

  font-size:
    13px;

  line-height:
    1.5;
}

.mlc-section-head__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;

  flex-shrink:
    0;
}

/* =========================================================
   BARRA DE FILTROS
   ========================================================= */

.mlc-toolbar {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    12px;

  width:
    100%;

  padding:
    14px 20px;

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

  background:
    color-mix(
      in srgb,
      var(
        --mlc-surface-soft
      )
      72%,
      transparent
    );
}

.mlc-toolbar__search {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  width:
    min(
      420px,
      100%
    );

  min-width:
    220px;
}

.mlc-toolbar__search > svg {
  position:
    absolute;

  left:
    13px;

  z-index:
    2;

  width:
    17px;

  height:
    17px;

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

  pointer-events:
    none;
}

.mlc-toolbar__search input {
  width:
    100%;

  min-height:
    40px;

  padding:
    0 42px 0 40px;

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

  border-radius:
    9px;

  outline:
    none;

  color:
    var(
      --mlc-text
    );

  background:
    var(
      --mlc-surface
    );

  font-size:
    13px;

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

.mlc-toolbar__search input::placeholder {
  color:
    var(
      --mlc-text-muted
    );
}

.mlc-toolbar__search input:focus {
  border-color:
    var(
      --mlc-line-strong
    );

  background:
    color-mix(
      in srgb,
      var(
        --mlc-surface
      )
      97%,
      var(
        --mlc-accent
      )
      3%
    );
}

.mlc-toolbar__clear {
  position:
    absolute;

  right:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    28px;

  height:
    28px;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

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

  background:
    transparent;

  cursor:
    pointer;

  transition:
    color
      var(
        --mlc-transition
      ),
    background
      var(
        --mlc-transition
      );
}

.mlc-toolbar__clear:hover {
  color:
    var(
      --mlc-text
    );

  background:
    var(
      --mlc-surface-strong
    );
}

.mlc-toolbar__filters {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;

  min-width:
    0;
}

.mlc-filter {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  min-width:
    130px;
}

.mlc-filter > span {
  padding-left:
    2px;

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

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}

.mlc-filter input,
.mlc-filter select {
  min-width:
    130px;

  min-height:
    40px;

  padding:
    0 34px 0 11px;

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

  border-radius:
    9px;

  outline:
    none;

  color:
    var(
      --mlc-text
    );

  background-color:
    var(
      --mlc-surface
    );

  font-size:
    12px;

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

.mlc-filter input {
  padding-right:
    11px;
}

.mlc-filter input:focus,
.mlc-filter select:focus {
  border-color:
    var(
      --mlc-line-strong
    );

  background:
    color-mix(
      in srgb,
      var(
        --mlc-surface
      )
      97%,
      var(
        --mlc-accent
      )
      3%
    );
}

.mlc-toolbar__reset {
  min-width:
    auto;

  padding-inline:
    11px;
}

/* =========================================================
   BADGES
   ========================================================= */

.mlc-badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  width:
    fit-content;

  min-height:
    27px;

  padding:
    4px 9px;

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

  border-radius:
    999px;

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

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

  font-size:
    11px;

  font-weight:
    680;

  line-height:
    1.2;

  white-space:
    nowrap;

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

.mlc-badge svg {
  width:
    14px;

  height:
    14px;
}

.mlc-badge:hover {
  transform:
    translateY(
      -1px
    );
}

.mlc-badge--success {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-success
      )
      35%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-success
    );

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

.mlc-badge--warning {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-warning
      )
      38%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-warning
    );

  background:
    var(
      --mlc-warning-soft
    );
}

.mlc-badge--danger {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-danger
      )
      35%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-danger
    );

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

.mlc-badge--info {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-info
      )
      34%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-info
    );

  background:
    var(
      --mlc-info-soft
    );
}

.mlc-badge--neutral,
.mlc-badge--muted {
  border-color:
    var(
      --mlc-line
    );

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

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

/* =========================================================
   ESTADOS VACÍOS
   ========================================================= */

.mlc-empty {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  min-height:
    300px;

  padding:
    44px 24px;

  text-align:
    center;

  animation:
    mlc-fade-in
    300ms
    ease
    both;
}

.mlc-empty__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    52px;

  height:
    52px;

  margin-bottom:
    4px;

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

  border-radius:
    14px;

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

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

.mlc-empty__icon svg {
  width:
    24px;

  height:
    24px;
}

.mlc-empty h3 {
  margin:
    0;

  color:
    var(
      --mlc-text
    );

  font-size:
    17px;

  font-weight:
    720;
}

.mlc-empty p {
  max-width:
    480px;

  margin:
    0;

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

  font-size:
    13px;

  line-height:
    1.55;
}

.mlc-empty .mlc-button {
  margin-top:
    8px;
}

/* =========================================================
   CARGA
   ========================================================= */

.mlc-loading-list {
  display:
    flex;

  flex-direction:
    column;

  width:
    100%;

  padding:
    14px 20px 20px;
}

.mlc-skeleton-row {
  display:
    grid;

  grid-template-columns:
    52px
    minmax(
      220px,
      1fr
    )
    minmax(
      120px,
      0.4fr
    )
    minmax(
      90px,
      0.25fr
    )
    90px;

  align-items:
    center;

  gap:
    14px;

  min-height:
    72px;

  padding:
    10px 0;

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

  opacity:
    0;

  animation:
    mlc-skeleton-enter
    360ms
    var(
      --mlc-transition-slow
    )
    forwards;

  animation-delay:
    var(
      --delay,
      0ms
    );
}

.mlc-skeleton-row:last-child {
  border-bottom:
    0;
}

.mlc-skeleton {
  display:
    block;

  position:
    relative;

  overflow:
    hidden;

  height:
    14px;

  border-radius:
    6px;

  background:
    var(
      --mlc-surface-strong
    );
}

.mlc-skeleton::after {
  position:
    absolute;

  inset:
    0;

  content:
    "";

  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(
        in srgb,
        #ffffff
        34%,
        transparent
      ),
      transparent
    );

  transform:
    translateX(
      -100%
    );

  animation:
    mlc-skeleton-shimmer
    1.25s
    ease-in-out
    infinite;
}

.mlc-skeleton--image {
  width:
    46px;

  height:
    46px;

  border-radius:
    10px;
}

.mlc-skeleton--wide {
  width:
    82%;
}

.mlc-skeleton--medium {
  width:
    68%;
}

.mlc-skeleton--small {
  width:
    54%;
}

.mlc-skeleton--button {
  width:
    78px;

  height:
    34px;

  justify-self:
    end;

  border-radius:
    8px;
}

/* =========================================================
   UTILIDADES
   ========================================================= */

.is-spinning {
  animation:
    mlc-spin
    800ms
    linear
    infinite;
}

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

@keyframes mlc-enter-up {
  from {
    opacity:
      0;

    transform:
      translateY(
        10px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}

@keyframes mlc-panel-enter {
  from {
    opacity:
      0;

    transform:
      translateY(
        8px
      )
      scale(
        0.995
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      )
      scale(
        1
      );
  }
}

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

  to {
    opacity:
      1;
  }
}

@keyframes mlc-expand-x {
  from {
    transform:
      scaleX(
        0
      );
  }

  to {
    transform:
      scaleX(
        1
      );
  }
}

@keyframes mlc-spin {
  to {
    transform:
      rotate(
        360deg
      );
  }
}

@keyframes mlc-skeleton-enter {
  from {
    opacity:
      0;

    transform:
      translateY(
        6px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}

@keyframes mlc-skeleton-shimmer {
  to {
    transform:
      translateX(
        100%
      );
  }
}

/* =========================================================
   ACCESIBILIDAD · MOVIMIENTO REDUCIDO
   ========================================================= */

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

    animation-duration:
      1ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      1ms !important;
  }
}/* =========================================================
   CONTINUACIÓN DIRECTA:
   frontend/src/pages/mercado-libre/catalogo/
   catalogo-mercado-libre.css

   PARTE 2 DE 3

   CONTIENE:
   - Tablas
   - Celdas
   - Imágenes
   - Acciones
   - Paginación
   - Tarjetas móviles
   - Alertas
   - Progreso
   - Historial
   - Modales
   - Notificaciones
   ========================================================= */

/* =========================================================
   TABLAS
   ========================================================= */

.mlc-table-wrap {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    visible;

  scrollbar-width:
    thin;

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

.mlc-table-wrap::-webkit-scrollbar {
  height:
    8px;
}

.mlc-table-wrap::-webkit-scrollbar-track {
  background:
    transparent;
}

.mlc-table-wrap::-webkit-scrollbar-thumb {
  border:
    2px solid
    transparent;

  border-radius:
    999px;

  background:
    var(
      --mlc-line-strong
    );

  background-clip:
    padding-box;
}

.mlc-table {
  width:
    100%;

  min-width:
    1180px;

  border-collapse:
    separate;

  border-spacing:
    0;

  table-layout:
    auto;

  color:
    var(
      --mlc-text
    );

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

.mlc-table thead {
  background:
    var(
      --mlc-surface-soft
    );
}

.mlc-table th {
  height:
    46px;

  padding:
    0 14px;

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

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

  font-size:
    10px;

  font-weight:
    750;

  letter-spacing:
    0.055em;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}

.mlc-table th:first-child {
  padding-left:
    20px;
}

.mlc-table th:last-child {
  padding-right:
    20px;
}

.mlc-table td {
  min-height:
    72px;

  padding:
    13px 14px;

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

  vertical-align:
    middle;

  font-size:
    13px;
}

.mlc-table td:first-child {
  padding-left:
    20px;
}

.mlc-table td:last-child {
  padding-right:
    20px;
}

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

.mlc-table-row {
  position:
    relative;

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

.mlc-table-row:hover {
  background:
    color-mix(
      in srgb,
      var(
        --mlc-surface-soft
      )
      78%,
      transparent
    );
}

.mlc-table-row:hover td:first-child {
  box-shadow:
    inset
    2px
    0
    0
    var(
      --mlc-line-strong
    );
}

.mlc-table__actions-head {
  text-align:
    right !important;
}

/* =========================================================
   TEXTO DE TABLA
   ========================================================= */

.mlc-table-text {
  display:
    block;

  max-width:
    260px;

  overflow:
    hidden;

  color:
    var(
      --mlc-text
    );

  font-size:
    12px;

  font-weight:
    650;

  line-height:
    1.4;

  text-overflow:
    ellipsis;
}

.mlc-secondary-text {
  display:
    block;

  max-width:
    260px;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    550;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.mlc-stack {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    5px;

  min-width:
    0;
}

.mlc-date {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    28px;

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

  font-size:
    11px;

  font-weight:
    600;

  white-space:
    nowrap;
}

/* =========================================================
   CELDA DE PRODUCTO
   ========================================================= */

.mlc-product-cell {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  min-width:
    260px;
}

.mlc-product-image {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    50px;

  min-width:
    50px;

  height:
    50px;

  overflow:
    hidden;

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

  border-radius:
    10px;

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

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

.mlc-table-row:hover
.mlc-product-image {
  transform:
    translateY(
      -1px
    );

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

.mlc-product-image img {
  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  background:
    #ffffff;

  transition:
    transform
      var(
        --mlc-transition-slow
      );
}

.mlc-table-row:hover
.mlc-product-image img {
  transform:
    scale(
      1.04
    );
}

.mlc-product-image__fallback {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    100%;

  height:
    100%;

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

.mlc-product-image__fallback svg {
  width:
    20px;

  height:
    20px;
}

.mlc-product-cell__copy {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  min-width:
    0;
}

.mlc-product-cell__title {
  display:
    -webkit-box;

  max-width:
    380px;

  padding:
    0;

  overflow:
    hidden;

  border:
    0;

  outline:
    none;

  color:
    var(
      --mlc-text
    );

  background:
    transparent;

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1.4;

  text-align:
    left;

  text-decoration:
    none;

  cursor:
    pointer;

  transition:
    color
      var(
        --mlc-transition
      );

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;
}

.mlc-product-cell__title:hover {
  color:
    color-mix(
      in srgb,
      var(
        --mlc-text
      )
      72%,
      var(
        --mlc-info
      )
      28%
    );
}

.mlc-product-cell__title:focus-visible {
  border-radius:
    4px;

  outline:
    2px solid
    color-mix(
      in srgb,
      var(
        --mlc-info
      )
      34%,
      transparent
    );

  outline-offset:
    3px;
}

.mlc-product-cell__meta {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;

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

  font-size:
    10px;

  font-weight:
    550;
}

.mlc-product-cell__dot {
  width:
    3px;

  height:
    3px;

  border-radius:
    50%;

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

/* =========================================================
   PRECIO
   ========================================================= */

.mlc-price-cell {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    3px;

  min-width:
    112px;
}

.mlc-price-cell strong {
  color:
    var(
      --mlc-text
    );

  font-size:
    12px;

  font-weight:
    720;

  white-space:
    nowrap;
}

.mlc-price-cell span {
  color:
    var(
      --mlc-text-muted
    );

  font-size:
    9px;

  font-weight:
    570;

  line-height:
    1.35;

  white-space:
    nowrap;
}

/* =========================================================
   NÚMEROS
   ========================================================= */

.mlc-number-cell {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    2px;

  min-width:
    70px;

  text-align:
    center;
}

.mlc-number-cell strong {
  color:
    var(
      --mlc-text
    );

  font-size:
    13px;

  font-weight:
    730;
}

.mlc-number-cell span {
  color:
    var(
      --mlc-text-muted
    );

  font-size:
    9px;

  font-weight:
    560;

  white-space:
    nowrap;
}

/* =========================================================
   DIFERENCIAS
   ========================================================= */

.mlc-difference {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    3px;

  min-width:
    100px;
}

.mlc-difference strong {
  color:
    var(
      --mlc-text
    );

  font-size:
    12px;

  font-weight:
    720;
}

.mlc-difference span {
  color:
    var(
      --mlc-text-muted
    );

  font-size:
    10px;

  font-weight:
    620;
}

.mlc-difference.is-negative strong,
.mlc-difference.is-negative span {
  color:
    var(
      --mlc-danger
    );
}

/* =========================================================
   MOTIVO Y RECOMENDACIÓN
   ========================================================= */

.mlc-reason-cell {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  min-width:
    180px;

  max-width:
    300px;
}

.mlc-reason-cell strong {
  display:
    -webkit-box;

  overflow:
    hidden;

  color:
    var(
      --mlc-text
    );

  font-size:
    11px;

  font-weight:
    660;

  line-height:
    1.4;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;
}

.mlc-reason-cell span {
  display:
    -webkit-box;

  overflow:
    hidden;

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

  font-size:
    10px;

  line-height:
    1.4;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;
}

/* =========================================================
   ACCIONES DE FILA
   ========================================================= */

.mlc-row-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    5px;

  min-width:
    max-content;
}

.mlc-icon-button {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    34px;

  min-width:
    34px;

  height:
    34px;

  padding:
    0;

  overflow:
    hidden;

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

  border-radius:
    8px;

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

  background:
    var(
      --mlc-surface
    );

  cursor:
    pointer;

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

.mlc-icon-button:hover:not(
  :disabled
) {
  transform:
    translateY(
      -1px
    );

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

  color:
    var(
      --mlc-text
    );

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

.mlc-icon-button:active:not(
  :disabled
) {
  transform:
    scale(
      0.96
    );
}

.mlc-icon-button:focus-visible {
  outline:
    2px solid
    color-mix(
      in srgb,
      var(
        --mlc-accent
      )
      32%,
      transparent
    );

  outline-offset:
    2px;
}

.mlc-icon-button:disabled {
  opacity:
    0.45;

  cursor:
    not-allowed;
}

.mlc-icon-button svg {
  width:
    16px;

  height:
    16px;
}

.mlc-icon-button--info {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-info
      )
      28%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-info
    );

  background:
    var(
      --mlc-info-soft
    );
}

.mlc-icon-button--success {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-success
      )
      30%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-success
    );

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

.mlc-icon-button--danger {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-danger
      )
      30%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-danger
    );

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

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

.mlc-pagination {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  width:
    100%;

  min-height:
    66px;

  padding:
    12px 20px;

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

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

.mlc-pagination__summary {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;

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

  font-size:
    11px;

  font-weight:
    560;
}

.mlc-pagination__summary strong {
  color:
    var(
      --mlc-text
    );

  font-weight:
    700;
}

.mlc-pagination__controls {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    4px;
}

.mlc-pagination__button,
.mlc-pagination__page {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    34px;

  min-width:
    34px;

  height:
    34px;

  padding:
    0;

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

  border-radius:
    8px;

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

  background:
    var(
      --mlc-surface
    );

  font-size:
    11px;

  font-weight:
    680;

  cursor:
    pointer;

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

.mlc-pagination__button:hover:not(
  :disabled
),
.mlc-pagination__page:hover:not(
  :disabled
) {
  transform:
    translateY(
      -1px
    );

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

  color:
    var(
      --mlc-text
    );

  background:
    var(
      --mlc-surface-strong
    );
}

.mlc-pagination__page.is-active {
  border-color:
    var(
      --mlc-accent
    );

  color:
    var(
      --mlc-surface
    );

  background:
    var(
      --mlc-accent
    );
}

.mlc-pagination__button:disabled,
.mlc-pagination__page:disabled {
  opacity:
    0.38;

  cursor:
    not-allowed;
}

.mlc-pagination__button svg {
  width:
    15px;

  height:
    15px;
}

.mlc-pagination__dots {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    22px;

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

  font-size:
    12px;
}

/* =========================================================
   TARJETAS MÓVILES
   ========================================================= */

.mlc-mobile-list {
  display:
    none;

  flex-direction:
    column;

  gap:
    10px;

  padding:
    14px;
}

.mlc-mobile-card {
  display:
    flex;

  flex-direction:
    column;

  gap:
    13px;

  width:
    100%;

  min-width:
    0;

  padding:
    14px;

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

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

  background:
    var(
      --mlc-surface
    );

  animation:
    mlc-card-enter
    340ms
    var(
      --mlc-transition-slow
    )
    both;
}

.mlc-mobile-card__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;

  min-width:
    0;
}

.mlc-mobile-card__header
.mlc-product-cell {
  min-width:
    0;

  flex:
    1;
}

.mlc-mobile-card__badges {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;
}

.mlc-mobile-card__grid {
  display:
    grid;

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

  gap:
    8px;
}

.mlc-mobile-card__grid > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  min-width:
    0;

  padding:
    10px;

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

  border-radius:
    9px;

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

.mlc-mobile-card__grid span {
  color:
    var(
      --mlc-text-muted
    );

  font-size:
    9px;

  font-weight:
    680;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}

.mlc-mobile-card__grid strong {
  overflow:
    hidden;

  color:
    var(
      --mlc-text
    );

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1.35;

  text-overflow:
    ellipsis;
}

.mlc-mobile-card__description {
  margin:
    0;

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

  font-size:
    12px;

  line-height:
    1.5;
}

.mlc-mobile-card__notice {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    8px;

  padding:
    10px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(
        --mlc-warning
      )
      26%,
      var(
        --mlc-line
      )
    );

  border-radius:
    9px;

  color:
    var(
      --mlc-warning
    );

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

  font-size:
    11px;

  line-height:
    1.45;
}

.mlc-mobile-card__notice svg {
  width:
    15px;

  min-width:
    15px;

  height:
    15px;

  margin-top:
    1px;
}

.mlc-mobile-card__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;

  padding-top:
    11px;

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

.mlc-mobile-card__footer
.mlc-button {
  flex:
    1 1 auto;
}

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

.mlc-alert-cell {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    11px;

  min-width:
    270px;
}

.mlc-alert-cell__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    38px;

  min-width:
    38px;

  height:
    38px;

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

  border-radius:
    10px;

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

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

.mlc-alert-cell__icon--danger {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-danger
      )
      32%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-danger
    );

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

.mlc-alert-cell__icon--warning {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-warning
      )
      34%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-warning
    );

  background:
    var(
      --mlc-warning-soft
    );
}

.mlc-alert-cell__icon--info {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-info
      )
      30%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-info
    );

  background:
    var(
      --mlc-info-soft
    );
}

.mlc-alert-cell__icon svg {
  width:
    18px;

  height:
    18px;
}

.mlc-alert-cell > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  min-width:
    0;
}

.mlc-alert-cell__description {
  display:
    -webkit-box;

  max-width:
    430px;

  margin:
    0;

  overflow:
    hidden;

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

  font-size:
    10px;

  line-height:
    1.4;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;
}

/* =========================================================
   PROGRESO
   ========================================================= */

.mlc-progress {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    125px;
}

.mlc-progress__track {
  position:
    relative;

  width:
    92px;

  height:
    6px;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    var(
      --mlc-surface-strong
    );
}

.mlc-progress__bar {
  position:
    absolute;

  inset:
    0 auto 0 0;

  min-width:
    2px;

  border-radius:
    inherit;

  background:
    var(
      --mlc-accent
    );

  transition:
    width
    500ms
    var(
      --mlc-transition-slow
    );
}

.mlc-progress > span {
  min-width:
    32px;

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

  font-size:
    10px;

  font-weight:
    680;
}

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

.mlc-history-action {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-width:
    190px;
}

.mlc-history-action__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    36px;

  min-width:
    36px;

  height:
    36px;

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

  border-radius:
    9px;

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

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

.mlc-history-action__icon svg {
  width:
    17px;

  height:
    17px;
}

.mlc-history-action > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}

.mlc-history-action strong {
  color:
    var(
      --mlc-text
    );

  font-size:
    12px;

  font-weight:
    690;
}

.mlc-history-action span {
  color:
    var(
      --mlc-text-muted
    );

  font-size:
    10px;

  font-weight:
    560;
}

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

body.mlc-modal-open {
  overflow:
    hidden;
}

.mlc-modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    100000;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    22px;

  opacity:
    0;

  pointer-events:
    none;

  transition:
    opacity
    220ms
    ease;
}

.mlc-modal.is-visible {
  opacity:
    1;

  pointer-events:
    auto;
}

.mlc-modal.is-closing {
  opacity:
    0;

  pointer-events:
    none;
}

.mlc-modal__backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgb(
      0 0 0 /
      0.56
    );
}

.mlc-modal__panel {
  position:
    relative;

  z-index:
    1;

  display:
    flex;

  flex-direction:
    column;

  width:
    min(
      980px,
      100%
    );

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

  overflow:
    hidden;

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

  border-radius:
    16px;

  background:
    var(
      --mlc-surface
    );

  transform:
    translateY(
      14px
    )
    scale(
      0.985
    );

  transition:
    transform
    280ms
    var(
      --mlc-transition-slow
    );
}

.mlc-modal.is-visible
.mlc-modal__panel {
  transform:
    translateY(
      0
    )
    scale(
      1
    );
}

.mlc-modal--small
.mlc-modal__panel {
  width:
    min(
      470px,
      100%
    );
}

.mlc-modal--medium
.mlc-modal__panel {
  width:
    min(
      680px,
      100%
    );
}

.mlc-modal--large
.mlc-modal__panel {
  width:
    min(
      1080px,
      100%
    );
}

.mlc-modal__header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  min-height:
    72px;

  padding:
    15px 18px;

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

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

.mlc-modal__heading {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  min-width:
    0;
}

.mlc-modal__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    42px;

  min-width:
    42px;

  height:
    42px;

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

  border-radius:
    11px;

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

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

.mlc-modal__icon svg {
  width:
    20px;

  height:
    20px;
}

.mlc-modal__heading > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  min-width:
    0;
}

.mlc-modal__heading h2 {
  margin:
    0;

  overflow:
    hidden;

  color:
    var(
      --mlc-text
    );

  font-size:
    17px;

  font-weight:
    740;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.mlc-modal__heading p {
  margin:
    0;

  overflow:
    hidden;

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

  font-size:
    11px;

  line-height:
    1.4;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.mlc-modal__close {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    36px;

  min-width:
    36px;

  height:
    36px;

  padding:
    0;

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

  border-radius:
    9px;

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

  background:
    var(
      --mlc-surface
    );

  cursor:
    pointer;

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

.mlc-modal__close:hover {
  transform:
    rotate(
      3deg
    );

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

  color:
    var(
      --mlc-text
    );

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

.mlc-modal__content {
  flex:
    1;

  min-height:
    0;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  padding:
    18px;

  scrollbar-width:
    thin;

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

.mlc-modal__content::-webkit-scrollbar {
  width:
    8px;
}

.mlc-modal__content::-webkit-scrollbar-thumb {
  border:
    2px solid
    transparent;

  border-radius:
    999px;

  background:
    var(
      --mlc-line-strong
    );

  background-clip:
    padding-box;
}

.mlc-modal__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;

  min-height:
    64px;

  padding:
    12px 18px;

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

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

/* =========================================================
   CONFIRMACIÓN
   ========================================================= */

.mlc-confirmation {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;
}

.mlc-confirmation__notice {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  padding:
    14px;

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

  border-radius:
    11px;

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

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

.mlc-confirmation__notice svg {
  width:
    19px;

  min-width:
    19px;

  height:
    19px;
}

.mlc-confirmation__notice p {
  margin:
    0;

  font-size:
    12px;

  line-height:
    1.5;
}

.mlc-confirmation__notice--danger {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-danger
      )
      34%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-danger
    );

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

.mlc-confirmation__notice--success {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-success
      )
      34%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-success
    );

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

/* =========================================================
   NOTIFICACIONES
   ========================================================= */

.mlc-toast-container {
  position:
    fixed;

  top:
    18px;

  right:
    18px;

  z-index:
    110000;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    8px;

  width:
    min(
      390px,
      calc(
        100vw -
        36px
      )
    );

  pointer-events:
    none;
}

.mlc-toast {
  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  width:
    100%;

  min-height:
    58px;

  padding:
    9px;

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

  border-radius:
    12px;

  color:
    var(
      --mlc-text
    );

  background:
    var(
      --mlc-surface
    );

  opacity:
    0;

  pointer-events:
    auto;

  transform:
    translateX(
      18px
    )
    scale(
      0.985
    );

  transition:
    opacity
      240ms
      ease,
    transform
      280ms
      var(
        --mlc-transition-slow
      );
}

.mlc-toast.is-visible {
  opacity:
    1;

  transform:
    translateX(
      0
    )
    scale(
      1
    );
}

.mlc-toast.is-leaving {
  opacity:
    0;

  transform:
    translateX(
      22px
    )
    scale(
      0.98
    );
}

.mlc-toast__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    36px;

  height:
    36px;

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

  border-radius:
    9px;

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

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

.mlc-toast__icon svg {
  width:
    18px;

  height:
    18px;
}

.mlc-toast__content {
  min-width:
    0;
}

.mlc-toast__content span {
  display:
    block;

  color:
    var(
      --mlc-text
    );

  font-size:
    12px;

  font-weight:
    620;

  line-height:
    1.45;
}

.mlc-toast__close {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    30px;

  height:
    30px;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

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

  background:
    transparent;

  cursor:
    pointer;

  transition:
    color
      var(
        --mlc-transition
      ),
    background
      var(
        --mlc-transition
      );
}

.mlc-toast__close:hover {
  color:
    var(
      --mlc-text
    );

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

.mlc-toast--success {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-success
      )
      34%,
      var(
        --mlc-line
      )
    );
}

.mlc-toast--success
.mlc-toast__icon {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-success
      )
      34%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-success
    );

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

.mlc-toast--error {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-danger
      )
      34%,
      var(
        --mlc-line
      )
    );
}

.mlc-toast--error
.mlc-toast__icon {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-danger
      )
      34%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-danger
    );

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

.mlc-toast--warning {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-warning
      )
      34%,
      var(
        --mlc-line
      )
    );
}

.mlc-toast--warning
.mlc-toast__icon {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-warning
      )
      34%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-warning
    );

  background:
    var(
      --mlc-warning-soft
    );
}

.mlc-toast--info {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-info
      )
      30%,
      var(
        --mlc-line
      )
    );
}

.mlc-toast--info
.mlc-toast__icon {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-info
      )
      30%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-info
    );

  background:
    var(
      --mlc-info-soft
    );
}

/* =========================================================
   ANIMACIÓN DE TARJETAS
   ========================================================= */

@keyframes mlc-card-enter {
  from {
    opacity:
      0;

    transform:
      translateY(
        8px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}/* =========================================================
   CONTINUACIÓN DIRECTA:
   frontend/src/pages/mercado-libre/catalogo/
   catalogo-mercado-libre.css

   PARTE 3 DE 3

   CONTIENE:
   - Detalles internos
   - Competencia
   - Recomendaciones
   - Formularios
   - Atributos
   - Comparaciones
   - Sincronización
   - Trabajos
   - Línea de tiempo
   - Modo oscuro
   - Responsive
   ========================================================= */

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

.mlc-detail {
  display:
    flex;

  flex-direction:
    column;

  gap:
    18px;

  width:
    100%;

  min-width:
    0;
}

.mlc-detail__hero {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  width:
    100%;

  padding:
    16px;

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

  border-radius:
    13px;

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

.mlc-detail__product {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  min-width:
    0;
}

.mlc-detail__image {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    82px;

  min-width:
    82px;

  height:
    82px;

  overflow:
    hidden;

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

  border-radius:
    13px;

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

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

.mlc-detail__image img {
  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  background:
    #ffffff;
}

.mlc-detail__image svg {
  width:
    28px;

  height:
    28px;
}

.mlc-detail__copy {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  min-width:
    0;
}

.mlc-detail__eyebrow {
  color:
    var(
      --mlc-text-muted
    );

  font-size:
    10px;

  font-weight:
    750;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.mlc-detail__copy h3 {
  max-width:
    640px;

  margin:
    0;

  overflow:
    hidden;

  color:
    var(
      --mlc-text
    );

  font-size:
    20px;

  font-weight:
    740;

  line-height:
    1.3;

  text-overflow:
    ellipsis;
}

.mlc-detail__badges {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;
}

.mlc-detail__price {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    3px;

  min-width:
    170px;

  flex-shrink:
    0;
}

.mlc-detail__price > span {
  color:
    var(
      --mlc-text-muted
    );

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}

.mlc-detail__price strong {
  color:
    var(
      --mlc-text
    );

  font-size:
    23px;

  font-weight:
    760;

  line-height:
    1.1;

  letter-spacing:
    -0.03em;
}

.mlc-detail__price small {
  color:
    var(
      --mlc-text-soft
    );

  font-size:
    10px;

  font-weight:
    600;
}

/* =========================================================
   GRILLA DE DATOS
   ========================================================= */

.mlc-detail-grid {
  display:
    grid;

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

  gap:
    10px;
}

.mlc-detail-item {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  min-width:
    0;

  min-height:
    90px;

  padding:
    13px;

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

  border-radius:
    11px;

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

.mlc-detail-item--wide {
  grid-column:
    span 2;
}

.mlc-detail-item__label {
  color:
    var(
      --mlc-text-muted
    );

  font-size:
    10px;

  font-weight:
    720;

  letter-spacing:
    0.045em;

  text-transform:
    uppercase;
}

.mlc-detail-item__value {
  min-width:
    0;

  overflow-wrap:
    anywhere;

  color:
    var(
      --mlc-text
    );

  font-size:
    13px;

  font-weight:
    680;

  line-height:
    1.45;
}

.mlc-detail-section {
  display:
    flex;

  flex-direction:
    column;

  gap:
    0;

  overflow:
    hidden;

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

  border-radius:
    13px;

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

.mlc-detail-section
.mlc-section-head {
  padding:
    15px;
}

/* =========================================================
   ATRIBUTOS
   ========================================================= */

.mlc-attributes {
  display:
    grid;

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

  gap:
    8px;

  padding:
    14px;
}

.mlc-attribute {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-width:
    0;

  min-height:
    48px;

  padding:
    10px 12px;

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

  border-radius:
    9px;

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

.mlc-attribute span {
  min-width:
    0;

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

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1.35;
}

.mlc-attribute strong {
  max-width:
    58%;

  overflow:
    hidden;

  color:
    var(
      --mlc-text
    );

  font-size:
    11px;

  font-weight:
    700;

  text-align:
    right;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

/* =========================================================
   JSON
   ========================================================= */

.mlc-json {
  width:
    100%;

  max-height:
    420px;

  margin:
    0;

  padding:
    14px;

  overflow:
    auto;

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

  border-radius:
    10px;

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

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

  font-family:
    "JetBrains Mono",
    "Fira Code",
    monospace;

  font-size:
    10px;

  line-height:
    1.55;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;

  scrollbar-width:
    thin;

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

/* =========================================================
   COMPETENCIA
   ========================================================= */

.mlc-competition-summary {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  padding:
    16px;

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

  border-radius:
    13px;

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

.mlc-competition-summary__status {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    13px;

  min-width:
    0;
}

.mlc-competition-summary__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    48px;

  min-width:
    48px;

  height:
    48px;

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

  border-radius:
    12px;

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

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

.mlc-competition-summary__icon--success {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-success
      )
      34%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-success
    );

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

.mlc-competition-summary__icon--warning {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-warning
      )
      34%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-warning
    );

  background:
    var(
      --mlc-warning-soft
    );
}

.mlc-competition-summary__icon--danger {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-danger
      )
      34%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-danger
    );

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

.mlc-competition-summary__icon--neutral,
.mlc-competition-summary__icon--muted {
  color:
    var(
      --mlc-text-muted
    );
}

.mlc-competition-summary__icon svg {
  width:
    22px;

  height:
    22px;
}

.mlc-competition-summary__status > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  min-width:
    0;
}

.mlc-competition-summary__status span {
  color:
    var(
      --mlc-text-muted
    );

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.045em;

  text-transform:
    uppercase;
}

.mlc-competition-summary__status strong {
  color:
    var(
      --mlc-text
    );

  font-size:
    18px;

  font-weight:
    740;

  line-height:
    1.25;
}

.mlc-competition-summary__status p {
  max-width:
    680px;

  margin:
    0;

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

  font-size:
    12px;

  line-height:
    1.5;
}

.mlc-competition-prices {
  display:
    grid;

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

  gap:
    10px;
}

.mlc-competition-prices article {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  min-width:
    0;

  min-height:
    105px;

  padding:
    14px;

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

  border-radius:
    11px;

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

.mlc-competition-prices span {
  color:
    var(
      --mlc-text-muted
    );

  font-size:
    10px;

  font-weight:
    690;

  line-height:
    1.4;

  text-transform:
    uppercase;
}

.mlc-competition-prices strong {
  margin-top:
    auto;

  color:
    var(
      --mlc-text
    );

  font-size:
    16px;

  font-weight:
    750;

  line-height:
    1.2;

  overflow-wrap:
    anywhere;
}

.mlc-competition-prices small {
  color:
    var(
      --mlc-text-soft
    );

  font-size:
    10px;

  font-weight:
    620;
}

.mlc-competition-prices__difference--danger {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-danger
      )
      30%,
      var(
        --mlc-line
      )
    ) !important;

  background:
    var(
      --mlc-danger-soft
    ) !important;
}

.mlc-competition-prices__difference--danger strong,
.mlc-competition-prices__difference--danger small {
  color:
    var(
      --mlc-danger
    );
}

.mlc-competition-prices__difference--success {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-success
      )
      30%,
      var(
        --mlc-line
      )
    ) !important;

  background:
    var(
      --mlc-success-soft
    ) !important;
}

.mlc-competition-prices__difference--success strong,
.mlc-competition-prices__difference--success small {
  color:
    var(
      --mlc-success
    );
}

/* =========================================================
   RECOMENDACIÓN
   ========================================================= */

.mlc-recommendation {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

  padding:
    14px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(
        --mlc-info
      )
      30%,
      var(
        --mlc-line
      )
    );

  border-radius:
    11px;

  color:
    var(
      --mlc-info
    );

  background:
    var(
      --mlc-info-soft
    );
}

.mlc-recommendation__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    36px;

  min-width:
    36px;

  height:
    36px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(
        --mlc-info
      )
      32%,
      var(
        --mlc-line
      )
    );

  border-radius:
    9px;
}

.mlc-recommendation__icon svg {
  width:
    18px;

  height:
    18px;
}

.mlc-recommendation > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}

.mlc-recommendation strong {
  font-size:
    12px;

  font-weight:
    720;
}

.mlc-recommendation p {
  margin:
    0;

  font-size:
    11px;

  line-height:
    1.5;
}

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

.mlc-alert-detail {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  padding:
    15px;

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

  border-radius:
    12px;

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

.mlc-alert-detail__badges {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;
}

.mlc-alert-detail p {
  margin:
    0;

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

  font-size:
    12px;

  line-height:
    1.6;
}

/* =========================================================
   COMPARACIÓN
   ========================================================= */

.mlc-comparison-box {
  display:
    grid;

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

  gap:
    10px;
}

.mlc-comparison-box article {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  min-width:
    0;
}

.mlc-comparison-box article > span {
  color:
    var(
      --mlc-text-muted
    );

  font-size:
    10px;

  font-weight:
    720;

  letter-spacing:
    0.045em;

  text-transform:
    uppercase;
}

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

.mlc-error-box {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    11px;

  padding:
    14px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(
        --mlc-danger
      )
      34%,
      var(
        --mlc-line
      )
    );

  border-radius:
    11px;

  color:
    var(
      --mlc-danger
    );

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

.mlc-error-box > svg {
  width:
    19px;

  min-width:
    19px;

  height:
    19px;
}

.mlc-error-box > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}

.mlc-error-box strong {
  font-size:
    12px;

  font-weight:
    730;
}

.mlc-error-box p {
  margin:
    0;

  font-size:
    11px;

  line-height:
    1.5;
}

/* =========================================================
   FORMULARIOS
   ========================================================= */

.mlc-form {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  width:
    100%;
}

.mlc-form--grid {
  display:
    grid;

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

  gap:
    14px;
}

.mlc-form-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  min-width:
    0;
}

.mlc-form-field--wide {
  grid-column:
    1 /
    -1;
}

.mlc-form-field > span {
  color:
    var(
      --mlc-text-soft
    );

  font-size:
    11px;

  font-weight:
    680;
}

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

  min-height:
    42px;

  padding:
    0 12px;

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

  border-radius:
    9px;

  outline:
    none;

  color:
    var(
      --mlc-text
    );

  background:
    var(
      --mlc-surface
    );

  font-size:
    12px;

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

.mlc-form-field textarea {
  min-height:
    110px;

  padding:
    11px 12px;

  resize:
    vertical;
}

.mlc-form-field input:focus,
.mlc-form-field select:focus,
.mlc-form-field textarea:focus {
  border-color:
    var(
      --mlc-line-strong
    );

  background:
    color-mix(
      in srgb,
      var(
        --mlc-surface
      )
      97%,
      var(
        --mlc-accent
      )
      3%
    );
}

.mlc-form-field input::placeholder,
.mlc-form-field textarea::placeholder {
  color:
    var(
      --mlc-text-muted
    );
}

.mlc-form-field small {
  color:
    var(
      --mlc-text-muted
    );

  font-size:
    10px;

  line-height:
    1.45;
}

/* =========================================================
   SWITCH
   ========================================================= */

.mlc-form-switch {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  padding:
    13px;

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

  border-radius:
    10px;

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

  cursor:
    pointer;
}

.mlc-form-switch input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;
}

.mlc-form-switch__control {
  position:
    relative;

  width:
    42px;

  min-width:
    42px;

  height:
    24px;

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

  border-radius:
    999px;

  background:
    var(
      --mlc-surface-strong
    );

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

.mlc-form-switch__control::after {
  position:
    absolute;

  top:
    3px;

  left:
    3px;

  width:
    16px;

  height:
    16px;

  border-radius:
    50%;

  content:
    "";

  background:
    var(
      --mlc-text-muted
    );

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

.mlc-form-switch input:checked
+
.mlc-form-switch__control {
  border-color:
    var(
      --mlc-accent
    );

  background:
    var(
      --mlc-accent-soft
    );
}

.mlc-form-switch input:checked
+
.mlc-form-switch__control::after {
  transform:
    translateX(
      18px
    );

  background:
    var(
      --mlc-accent
    );
}

.mlc-form-switch__copy {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}

.mlc-form-switch__copy strong {
  color:
    var(
      --mlc-text
    );

  font-size:
    12px;

  font-weight:
    690;
}

.mlc-form-switch__copy small {
  color:
    var(
      --mlc-text-muted
    );

  font-size:
    10px;

  line-height:
    1.4;
}

/* =========================================================
   OPCIONES DE SINCRONIZACIÓN
   ========================================================= */

.mlc-sync-options {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}

.mlc-sync-option {
  display:
    grid;

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

  align-items:
    center;

  gap:
    11px;

  width:
    100%;

  min-height:
    72px;

  padding:
    11px;

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

  border-radius:
    11px;

  color:
    var(
      --mlc-text
    );

  background:
    var(
      --mlc-surface
    );

  text-align:
    left;

  cursor:
    pointer;

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

.mlc-sync-option:hover {
  transform:
    translateY(
      -1px
    );

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

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

.mlc-sync-option__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    42px;

  height:
    42px;

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

  border-radius:
    10px;

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

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

.mlc-sync-option__icon svg {
  width:
    19px;

  height:
    19px;
}

.mlc-sync-option__copy {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  min-width:
    0;
}

.mlc-sync-option__copy strong {
  color:
    var(
      --mlc-text
    );

  font-size:
    12px;

  font-weight:
    700;
}

.mlc-sync-option__copy small {
  color:
    var(
      --mlc-text-muted
    );

  font-size:
    10px;

  line-height:
    1.45;
}

.mlc-sync-option > svg {
  color:
    var(
      --mlc-text-muted
    );
}

/* =========================================================
   RESUMEN DE SINCRONIZACIÓN
   ========================================================= */

.mlc-sync-summary {
  display:
    grid;

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

  gap:
    10px;
}

.mlc-sync-summary > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  min-height:
    92px;

  padding:
    13px;

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

  border-radius:
    10px;

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

.mlc-sync-summary > div > span {
  color:
    var(
      --mlc-text-muted
    );

  font-size:
    10px;

  font-weight:
    700;

  text-transform:
    uppercase;
}

.mlc-sync-summary > div > strong {
  margin-top:
    auto;

  color:
    var(
      --mlc-text
    );

  font-size:
    21px;

  font-weight:
    750;
}

/* =========================================================
   TRABAJOS
   ========================================================= */

.mlc-job-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  padding:
    14px;
}

.mlc-job {
  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  min-height:
    62px;

  padding:
    10px;

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

  border-radius:
    9px;

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

.mlc-job__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    36px;

  height:
    36px;

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

  border-radius:
    9px;

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

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

.mlc-job__icon svg {
  width:
    17px;

  height:
    17px;
}

.mlc-job__copy {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}

.mlc-job__copy strong {
  color:
    var(
      --mlc-text
    );

  font-size:
    11px;

  font-weight:
    700;
}

.mlc-job__copy span {
  color:
    var(
      --mlc-text-muted
    );

  font-size:
    10px;
}

.mlc-job__copy p {
  margin:
    3px 0 0;

  color:
    var(
      --mlc-danger
    );

  font-size:
    10px;

  line-height:
    1.4;
}

/* =========================================================
   LÍNEA DE TIEMPO
   ========================================================= */

.mlc-timeline {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  gap:
    0;

  padding:
    4px 0;
}

.mlc-timeline::before {
  position:
    absolute;

  top:
    28px;

  bottom:
    28px;

  left:
    21px;

  width:
    1px;

  content:
    "";

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

.mlc-timeline__item {
  position:
    relative;

  display:
    grid;

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

  gap:
    12px;

  padding:
    10px 0;
}

.mlc-timeline__marker {
  position:
    relative;

  z-index:
    1;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    42px;

  height:
    42px;

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

  border-radius:
    11px;

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

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

.mlc-timeline__marker--success {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-success
      )
      34%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-success
    );

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

.mlc-timeline__marker--danger {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-danger
      )
      34%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-danger
    );

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

.mlc-timeline__marker--warning {
  border-color:
    color-mix(
      in srgb,
      var(
        --mlc-warning
      )
      34%,
      var(
        --mlc-line
      )
    );

  color:
    var(
      --mlc-warning
    );

  background:
    var(
      --mlc-warning-soft
    );
}

.mlc-timeline__marker svg {
  width:
    18px;

  height:
    18px;
}

.mlc-timeline__content {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  min-width:
    0;

  padding:
    12px;

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

  border-radius:
    11px;

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

.mlc-timeline__content header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;
}

.mlc-timeline__content header > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}

.mlc-timeline__content header strong {
  color:
    var(
      --mlc-text
    );

  font-size:
    12px;

  font-weight:
    710;
}

.mlc-timeline__content header span {
  color:
    var(
      --mlc-text-muted
    );

  font-size:
    10px;
}

.mlc-timeline__prices {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    12px;
}

.mlc-timeline__prices span {
  color:
    var(
      --mlc-text-soft
    );

  font-size:
    10px;
}

.mlc-timeline__prices strong {
  color:
    var(
      --mlc-text
    );

  font-weight:
    700;
}

.mlc-timeline__content p {
  margin:
    0;

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

  font-size:
    11px;

  line-height:
    1.5;
}

/* =========================================================
   MODO OSCURO
   ========================================================= */

[data-theme="dark"]
.mlc-page,
.dark
.mlc-page,
body.dark
.mlc-page {
  --mlc-bg:
    #111315;

  --mlc-surface:
    #17191c;

  --mlc-surface-soft:
    #1c1f23;

  --mlc-surface-strong:
    #22262b;

  --mlc-text:
    #f1f3f5;

  --mlc-text-soft:
    #b1b6bd;

  --mlc-text-muted:
    #7f858d;

  --mlc-line:
    #2a2e33;

  --mlc-line-strong:
    #3a3f46;

  --mlc-accent:
    #f0f2f4;

  --mlc-success:
    #53b982;

  --mlc-warning:
    #d7a24a;

  --mlc-danger:
    #df6c6c;

  --mlc-info:
    #6d9bca;
}

[data-theme="dark"]
.mlc-button--primary,
.dark
.mlc-button--primary,
body.dark
.mlc-button--primary {
  color:
    #111315;
}

[data-theme="dark"]
.mlc-pagination__page.is-active,
.dark
.mlc-pagination__page.is-active,
body.dark
.mlc-pagination__page.is-active {
  color:
    #111315;
}

[data-theme="dark"]
.mlc-product-image img,
[data-theme="dark"]
.mlc-detail__image img,
.dark
.mlc-product-image img,
.dark
.mlc-detail__image img,
body.dark
.mlc-product-image img,
body.dark
.mlc-detail__image img {
  background:
    #ffffff;
}

/* =========================================================
   RESPONSIVE · ESCRITORIO MEDIO
   ========================================================= */

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

  .mlc-metric:nth-child(
    4
  ),
  .mlc-metric:nth-child(
    5
  ) {
    grid-column:
      auto;
  }

  .mlc-toolbar {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .mlc-toolbar__search {
    width:
      100%;
  }

  .mlc-toolbar__filters {
    justify-content:
      flex-start;
  }
}

/* =========================================================
   RESPONSIVE · TABLET
   ========================================================= */

@media (
  max-width:
    1100px
) {
  .mlc-page__inner {
    padding:
      16px;
  }

  .mlc-hero__content {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .mlc-hero__actions {
    width:
      100%;

    justify-content:
      flex-start;
  }

  .mlc-account {
    align-items:
      flex-start;

    margin-right:
      auto;
  }

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

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

  .mlc-competition-prices {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

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

  .mlc-table-wrap {
    display:
      none;
  }

  .mlc-mobile-list {
    display:
      flex;
  }
}

/* =========================================================
   RESPONSIVE · MÓVIL
   ========================================================= */

@media (
  max-width:
    700px
) {
  .mlc-page__inner {
    gap:
      12px;

    padding:
      12px;
  }

  .mlc-hero__content {
    gap:
      17px;

    padding:
      16px;
  }

  .mlc-hero__identity {
    align-items:
      flex-start;
  }

  .mlc-hero__mark {
    width:
      44px;

    min-width:
      44px;

    height:
      44px;

    border-radius:
      11px;
  }

  .mlc-hero__copy h1 {
    font-size:
      24px;
  }

  .mlc-hero__copy p {
    font-size:
      12px;
  }

  .mlc-hero__actions {
    display:
      grid;

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

    width:
      100%;
  }

  .mlc-account {
    grid-column:
      1 /
      -1;

    width:
      100%;

    min-width:
      0;
  }

  .mlc-hero__actions
  .mlc-button {
    width:
      100%;
  }

  .mlc-metrics {
    grid-template-columns:
      1fr;

    gap:
      8px;
  }

  .mlc-metric {
    min-height:
      92px;

    padding:
      13px;
  }

  .mlc-metric__value {
    font-size:
      23px;
  }

  .mlc-tabs {
    justify-content:
      flex-start;
  }

  .mlc-tab {
    flex:
      0 0 auto;
  }

  .mlc-section-head {
    align-items:
      flex-start;

    flex-direction:
      column;

    padding:
      16px;
  }

  .mlc-section-head__actions {
    width:
      100%;
  }

  .mlc-section-head__actions
  .mlc-button {
    width:
      100%;
  }

  .mlc-toolbar {
    padding:
      12px;
  }

  .mlc-toolbar__filters {
    display:
      grid;

    grid-template-columns:
      1fr;

    width:
      100%;
  }

  .mlc-filter {
    width:
      100%;

    min-width:
      0;
  }

  .mlc-filter input,
  .mlc-filter select {
    width:
      100%;

    min-width:
      0;
  }

  .mlc-toolbar__reset {
    width:
      100%;
  }

  .mlc-pagination {
    align-items:
      flex-start;

    flex-direction:
      column;

    padding:
      12px;
  }

  .mlc-pagination__controls {
    width:
      100%;

    justify-content:
      center;

    overflow-x:
      auto;
  }

  .mlc-mobile-list {
    padding:
      10px;
  }

  .mlc-mobile-card {
    padding:
      12px;
  }

  .mlc-mobile-card__header {
    flex-direction:
      column;
  }

  .mlc-product-cell {
    min-width:
      0;
  }

  .mlc-product-image {
    width:
      46px;

    min-width:
      46px;

    height:
      46px;
  }

  .mlc-product-cell__title {
    max-width:
      100%;
  }

  .mlc-mobile-card__footer {
    flex-direction:
      column;
  }

  .mlc-mobile-card__footer
  .mlc-button {
    width:
      100%;

    flex:
      1 1 auto;
  }

  .mlc-modal {
    align-items:
      flex-end;

    padding:
      0;
  }

  .mlc-modal__panel,
  .mlc-modal--small
  .mlc-modal__panel,
  .mlc-modal--medium
  .mlc-modal__panel,
  .mlc-modal--large
  .mlc-modal__panel {
    width:
      100%;

    max-height:
      94vh;

    border-right:
      0;

    border-bottom:
      0;

    border-left:
      0;

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

  .mlc-modal__header {
    min-height:
      66px;

    padding:
      12px;
  }

  .mlc-modal__heading {
    gap:
      9px;
  }

  .mlc-modal__icon {
    width:
      38px;

    min-width:
      38px;

    height:
      38px;
  }

  .mlc-modal__heading h2 {
    font-size:
      15px;
  }

  .mlc-modal__heading p {
    max-width:
      220px;
  }

  .mlc-modal__content {
    padding:
      12px;
  }

  .mlc-modal__footer {
    display:
      grid;

    grid-template-columns:
      1fr;

    padding:
      10px 12px;
  }

  .mlc-modal__footer
  .mlc-button {
    width:
      100%;
  }

  .mlc-detail__hero {
    align-items:
      flex-start;

    flex-direction:
      column;

    padding:
      12px;
  }

  .mlc-detail__product {
    align-items:
      flex-start;
  }

  .mlc-detail__image {
    width:
      64px;

    min-width:
      64px;

    height:
      64px;
  }

  .mlc-detail__copy h3 {
    font-size:
      16px;
  }

  .mlc-detail__price {
    align-items:
      flex-start;

    width:
      100%;
  }

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

  .mlc-detail-item--wide {
    grid-column:
      auto;
  }

  .mlc-attributes {
    grid-template-columns:
      1fr;

    padding:
      10px;
  }

  .mlc-competition-summary {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .mlc-competition-prices {
    grid-template-columns:
      1fr;
  }

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

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

  .mlc-form-field--wide {
    grid-column:
      auto;
  }

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

  .mlc-sync-option {
    grid-template-columns:
      38px
      minmax(
        0,
        1fr
      )
      16px;
  }

  .mlc-job {
    grid-template-columns:
      34px
      minmax(
        0,
        1fr
      );
  }

  .mlc-job
  .mlc-badge {
    grid-column:
      2;
  }

  .mlc-timeline__content header {
    flex-direction:
      column;
  }

  .mlc-toast-container {
    top:
      10px;

    right:
      10px;

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

/* =========================================================
   MÓVIL MUY PEQUEÑO
   ========================================================= */

@media (
  max-width:
    430px
) {
  .mlc-page__inner {
    padding:
      8px;
  }

  .mlc-hero__actions {
    grid-template-columns:
      1fr;
  }

  .mlc-account {
    grid-column:
      auto;
  }

  .mlc-mobile-card__grid {
    grid-template-columns:
      1fr;
  }

  .mlc-product-cell__meta {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      2px;
  }

  .mlc-product-cell__dot {
    display:
      none;
  }

  .mlc-attribute {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .mlc-attribute strong {
    max-width:
      100%;

    text-align:
      left;
  }
}/* =========================================================
   AGREGAR AL FINAL DE:
   frontend/src/pages/mercado-libre/catalogo/
   catalogo-mercado-libre.css

   CORRECCIONES:
   - Modal de sincronización sin transparencia
   - Sin glow
   - Modo oscuro realmente oscuro
   - Botón Sincronizar visible en modo claro
   ========================================================= */

/* =========================================================
   SIN GLOW NI SOMBRAS
   ========================================================= */

.mlc-page *,
.mlc-page *::before,
.mlc-page *::after,
.mlc-modal *,
.mlc-modal *::before,
.mlc-modal *::after,
.mlc-toast *,
.mlc-toast *::before,
.mlc-toast *::after {
  box-shadow:
    none !important;

  text-shadow:
    none !important;

  filter:
    none !important;
}

/* =========================================================
   BOTÓN SINCRONIZAR · MODO CLARO
   ========================================================= */

.mlc-hero__actions
.mlc-button--primary,
.mlc-section-head__actions
.mlc-button--primary,
.mlc-modal__footer
.mlc-button--primary {
  border-color:
    #17191c !important;

  color:
    #ffffff !important;

  background:
    #17191c !important;
}

.mlc-hero__actions
.mlc-button--primary svg,
.mlc-section-head__actions
.mlc-button--primary svg,
.mlc-modal__footer
.mlc-button--primary svg {
  color:
    #ffffff !important;

  stroke:
    currentColor !important;
}

.mlc-hero__actions
.mlc-button--primary:hover:not(
  :disabled
),
.mlc-section-head__actions
.mlc-button--primary:hover:not(
  :disabled
),
.mlc-modal__footer
.mlc-button--primary:hover:not(
  :disabled
) {
  border-color:
    #000000 !important;

  color:
    #ffffff !important;

  background:
    #000000 !important;
}

.mlc-hero__actions
.mlc-button--primary:disabled,
.mlc-section-head__actions
.mlc-button--primary:disabled,
.mlc-modal__footer
.mlc-button--primary:disabled {
  border-color:
    #555a62 !important;

  color:
    #d7d9dc !important;

  background:
    #555a62 !important;

  opacity:
    0.72 !important;
}

/* =========================================================
   MODAL · SIN TRANSPARENCIA
   ========================================================= */

.mlc-modal {
  background:
    transparent !important;
}

.mlc-modal__backdrop {
  background:
    rgba(
      0,
      0,
      0,
      0.78
    ) !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;
}

.mlc-modal__panel {
  opacity:
    1 !important;

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

  background:
    var(
      --mlc-surface
    ) !important;
}

.mlc-modal__header,
.mlc-modal__content,
.mlc-modal__footer {
  opacity:
    1 !important;

  background:
    var(
      --mlc-surface
    ) !important;
}

.mlc-modal__footer {
  background:
    var(
      --mlc-surface-soft
    ) !important;
}

.mlc-sync-options,
.mlc-sync-option,
.mlc-sync-option__icon {
  opacity:
    1 !important;
}

.mlc-sync-option {
  border:
    1px solid
    var(
      --mlc-line
    ) !important;

  background:
    var(
      --mlc-surface
    ) !important;
}

.mlc-sync-option:hover {
  border-color:
    var(
      --mlc-line-strong
    ) !important;

  background:
    var(
      --mlc-surface-strong
    ) !important;
}

/* =========================================================
   MODO OSCURO REAL
   ========================================================= */

[data-theme="dark"]
.mlc-page,
.dark
.mlc-page,
body.dark
.mlc-page {
  --mlc-bg:
    #070809 !important;

  --mlc-surface:
    #0d0f11 !important;

  --mlc-surface-soft:
    #111418 !important;

  --mlc-surface-strong:
    #171a1f !important;

  --mlc-text:
    #f5f6f7 !important;

  --mlc-text-soft:
    #b7bcc3 !important;

  --mlc-text-muted:
    #7f8791 !important;

  --mlc-line:
    #20242a !important;

  --mlc-line-strong:
    #30353d !important;

  --mlc-accent:
    #f4f5f6 !important;

  --mlc-success:
    #55c287 !important;

  --mlc-warning:
    #d9a247 !important;

  --mlc-danger:
    #e06d6d !important;

  --mlc-info:
    #77a8d8 !important;

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

  background:
    var(
      --mlc-bg
    ) !important;
}

[data-theme="dark"]
.mlc-hero,
[data-theme="dark"]
.mlc-panel,
[data-theme="dark"]
.mlc-tabs,
[data-theme="dark"]
.mlc-metric,
[data-theme="dark"]
.mlc-table,
[data-theme="dark"]
.mlc-mobile-card,
[data-theme="dark"]
.mlc-modal__panel,
.dark
.mlc-hero,
.dark
.mlc-panel,
.dark
.mlc-tabs,
.dark
.mlc-metric,
.dark
.mlc-table,
.dark
.mlc-mobile-card,
.dark
.mlc-modal__panel,
body.dark
.mlc-hero,
body.dark
.mlc-panel,
body.dark
.mlc-tabs,
body.dark
.mlc-metric,
body.dark
.mlc-table,
body.dark
.mlc-mobile-card,
body.dark
.mlc-modal__panel {
  border-color:
    var(
      --mlc-line
    ) !important;

  background:
    var(
      --mlc-surface
    ) !important;
}

[data-theme="dark"]
.mlc-hero__ambient,
.dark
.mlc-hero__ambient,
body.dark
.mlc-hero__ambient {
  display:
    none !important;
}

[data-theme="dark"]
.mlc-toolbar,
[data-theme="dark"]
.mlc-section-head,
[data-theme="dark"]
.mlc-pagination,
[data-theme="dark"]
.mlc-modal__footer,
.dark
.mlc-toolbar,
.dark
.mlc-section-head,
.dark
.mlc-pagination,
.dark
.mlc-modal__footer,
body.dark
.mlc-toolbar,
body.dark
.mlc-section-head,
body.dark
.mlc-pagination,
body.dark
.mlc-modal__footer {
  background:
    var(
      --mlc-surface-soft
    ) !important;
}

[data-theme="dark"]
.mlc-table thead,
.dark
.mlc-table thead,
body.dark
.mlc-table thead {
  background:
    #101317 !important;
}

[data-theme="dark"]
.mlc-table-row:hover,
.dark
.mlc-table-row:hover,
body.dark
.mlc-table-row:hover {
  background:
    #15191e !important;
}

[data-theme="dark"]
.mlc-toolbar__search input,
[data-theme="dark"]
.mlc-filter input,
[data-theme="dark"]
.mlc-filter select,
[data-theme="dark"]
.mlc-form-field input,
[data-theme="dark"]
.mlc-form-field select,
[data-theme="dark"]
.mlc-form-field textarea,
.dark
.mlc-toolbar__search input,
.dark
.mlc-filter input,
.dark
.mlc-filter select,
.dark
.mlc-form-field input,
.dark
.mlc-form-field select,
.dark
.mlc-form-field textarea,
body.dark
.mlc-toolbar__search input,
body.dark
.mlc-filter input,
body.dark
.mlc-filter select,
body.dark
.mlc-form-field input,
body.dark
.mlc-form-field select,
body.dark
.mlc-form-field textarea {
  border-color:
    var(
      --mlc-line
    ) !important;

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

  background:
    #0b0d0f !important;
}

[data-theme="dark"]
.mlc-toolbar__search input:focus,
[data-theme="dark"]
.mlc-filter input:focus,
[data-theme="dark"]
.mlc-filter select:focus,
[data-theme="dark"]
.mlc-form-field input:focus,
[data-theme="dark"]
.mlc-form-field select:focus,
[data-theme="dark"]
.mlc-form-field textarea:focus,
.dark
.mlc-toolbar__search input:focus,
.dark
.mlc-filter input:focus,
.dark
.mlc-filter select:focus,
.dark
.mlc-form-field input:focus,
.dark
.mlc-form-field select:focus,
.dark
.mlc-form-field textarea:focus,
body.dark
.mlc-toolbar__search input:focus,
body.dark
.mlc-filter input:focus,
body.dark
.mlc-filter select:focus,
body.dark
.mlc-form-field input:focus,
body.dark
.mlc-form-field select:focus,
body.dark
.mlc-form-field textarea:focus {
  border-color:
    var(
      --mlc-line-strong
    ) !important;

  background:
    #0f1215 !important;
}

[data-theme="dark"]
.mlc-button--secondary,
[data-theme="dark"]
.mlc-icon-button,
[data-theme="dark"]
.mlc-pagination__button,
[data-theme="dark"]
.mlc-pagination__page,
.dark
.mlc-button--secondary,
.dark
.mlc-icon-button,
.dark
.mlc-pagination__button,
.dark
.mlc-pagination__page,
body.dark
.mlc-button--secondary,
body.dark
.mlc-icon-button,
body.dark
.mlc-pagination__button,
body.dark
.mlc-pagination__page {
  border-color:
    var(
      --mlc-line
    ) !important;

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

  background:
    #0d0f11 !important;
}

[data-theme="dark"]
.mlc-button--secondary:hover,
[data-theme="dark"]
.mlc-icon-button:hover,
[data-theme="dark"]
.mlc-pagination__button:hover,
[data-theme="dark"]
.mlc-pagination__page:hover,
.dark
.mlc-button--secondary:hover,
.dark
.mlc-icon-button:hover,
.dark
.mlc-pagination__button:hover,
.dark
.mlc-pagination__page:hover,
body.dark
.mlc-button--secondary:hover,
body.dark
.mlc-icon-button:hover,
body.dark
.mlc-pagination__button:hover,
body.dark
.mlc-pagination__page:hover {
  border-color:
    var(
      --mlc-line-strong
    ) !important;

  background:
    #171a1f !important;
}

[data-theme="dark"]
.mlc-button--primary,
.dark
.mlc-button--primary,
body.dark
.mlc-button--primary {
  border-color:
    #f4f5f6 !important;

  color:
    #08090a !important;

  background:
    #f4f5f6 !important;
}

[data-theme="dark"]
.mlc-button--primary svg,
.dark
.mlc-button--primary svg,
body.dark
.mlc-button--primary svg {
  color:
    #08090a !important;

  stroke:
    currentColor !important;
}

[data-theme="dark"]
.mlc-button--primary:hover:not(
  :disabled
),
.dark
.mlc-button--primary:hover:not(
  :disabled
),
body.dark
.mlc-button--primary:hover:not(
  :disabled
) {
  border-color:
    #ffffff !important;

  color:
    #000000 !important;

  background:
    #ffffff !important;
}

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

[data-theme="dark"]
.mlc-modal__backdrop,
.dark
.mlc-modal__backdrop,
body.dark
.mlc-modal__backdrop {
  background:
    rgba(
      0,
      0,
      0,
      0.88
    ) !important;
}

[data-theme="dark"]
.mlc-modal__panel,
[data-theme="dark"]
.mlc-modal__header,
[data-theme="dark"]
.mlc-modal__content,
.dark
.mlc-modal__panel,
.dark
.mlc-modal__header,
.dark
.mlc-modal__content,
body.dark
.mlc-modal__panel,
body.dark
.mlc-modal__header,
body.dark
.mlc-modal__content {
  color:
    var(
      --mlc-text
    ) !important;

  background:
    #0d0f11 !important;
}

[data-theme="dark"]
.mlc-modal__footer,
.dark
.mlc-modal__footer,
body.dark
.mlc-modal__footer {
  background:
    #111418 !important;
}

[data-theme="dark"]
.mlc-sync-option,
.dark
.mlc-sync-option,
body.dark
.mlc-sync-option {
  border-color:
    #252a31 !important;

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

  background:
    #101215 !important;
}

[data-theme="dark"]
.mlc-sync-option:hover,
.dark
.mlc-sync-option:hover,
body.dark
.mlc-sync-option:hover {
  border-color:
    #383e47 !important;

  background:
    #171a1f !important;
}

[data-theme="dark"]
.mlc-sync-option__icon,
.dark
.mlc-sync-option__icon,
body.dark
.mlc-sync-option__icon {
  border-color:
    #292e35 !important;

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

  background:
    #0b0d0f !important;
}/* =========================================================
   UBICACIÓN:
   frontend/src/pages/mercado-libre/catalogo/
   catalogo-mercado-libre.css

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

/* =========================================================
   VARIABLES DEL MODAL FUERA DE .mlc-page
   ========================================================= */

.mlc-modal,
.mlc-toast-container {
  --mlc-bg: #f5f6f8;
  --mlc-surface: #ffffff;
  --mlc-surface-soft: #f7f8fa;
  --mlc-surface-strong: #eceff2;

  --mlc-text: #15171a;
  --mlc-text-soft: #5e646d;
  --mlc-text-muted: #858b94;

  --mlc-line: #d9dde2;
  --mlc-line-strong: #bcc2ca;

  --mlc-accent: #17191c;

  --mlc-success: #1f8f58;
  --mlc-success-soft: #eaf6ef;

  --mlc-warning: #b87912;
  --mlc-warning-soft: #fff6e7;

  --mlc-danger: #c34646;
  --mlc-danger-soft: #fceeee;

  --mlc-info: #3c72a8;
  --mlc-info-soft: #edf4fb;

  --mlc-transition: 180ms ease;
  --mlc-transition-slow: 320ms cubic-bezier(
    0.22,
    1,
    0.36,
    1
  );
}

/* =========================================================
   MODAL TOTALMENTE OPACO
   ========================================================= */

.mlc-modal {
  background: transparent !important;
  opacity: 1;
}

.mlc-modal__backdrop {
  opacity: 1 !important;

  background: rgba(
    0,
    0,
    0,
    0.72
  ) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mlc-modal__panel {
  opacity: 1 !important;

  color: #15171a !important;
  background: #ffffff !important;

  border: 1px solid #bcc2ca !important;

  box-shadow: none !important;
  filter: none !important;
}

.mlc-modal__header {
  opacity: 1 !important;

  color: #15171a !important;
  background: #ffffff !important;

  border-bottom: 1px solid #d9dde2 !important;
}

.mlc-modal__content {
  opacity: 1 !important;

  color: #15171a !important;
  background: #ffffff !important;
}

.mlc-modal__footer {
  opacity: 1 !important;

  color: #15171a !important;
  background: #f7f8fa !important;

  border-top: 1px solid #d9dde2 !important;
}

.mlc-modal__heading h2,
.mlc-sync-option__copy strong {
  color: #15171a !important;
}

.mlc-modal__heading p,
.mlc-sync-option__copy small {
  color: #5e646d !important;
}

.mlc-modal__icon,
.mlc-sync-option__icon {
  color: #5e646d !important;
  background: #f7f8fa !important;

  border: 1px solid #d9dde2 !important;
}

.mlc-modal__close {
  color: #5e646d !important;
  background: #ffffff !important;

  border: 1px solid #d9dde2 !important;
}

.mlc-sync-options {
  opacity: 1 !important;
  background: #ffffff !important;
}

.mlc-sync-option {
  opacity: 1 !important;

  color: #15171a !important;
  background: #ffffff !important;

  border: 1px solid #d9dde2 !important;

  box-shadow: none !important;
  filter: none !important;
}

.mlc-sync-option:hover {
  color: #15171a !important;
  background: #f2f4f6 !important;

  border-color: #bcc2ca !important;

  transform: none !important;
}

.mlc-sync-option > svg {
  color: #5e646d !important;
}

/* =========================================================
   MODAL MODO OSCURO REAL
   ========================================================= */

[data-theme="dark"] .mlc-modal,
.dark .mlc-modal,
body.dark .mlc-modal {
  --mlc-bg: #050607;
  --mlc-surface: #090b0d;
  --mlc-surface-soft: #0e1114;
  --mlc-surface-strong: #15191e;

  --mlc-text: #f3f5f7;
  --mlc-text-soft: #b3b9c1;
  --mlc-text-muted: #7e8690;

  --mlc-line: #20252b;
  --mlc-line-strong: #343a43;

  --mlc-accent: #f3f5f7;
}

[data-theme="dark"] .mlc-modal__backdrop,
.dark .mlc-modal__backdrop,
body.dark .mlc-modal__backdrop {
  background: rgba(
    0,
    0,
    0,
    0.88
  ) !important;
}

[data-theme="dark"] .mlc-modal__panel,
.dark .mlc-modal__panel,
body.dark .mlc-modal__panel {
  color: #f3f5f7 !important;
  background: #090b0d !important;

  border-color: #343a43 !important;
}

[data-theme="dark"] .mlc-modal__header,
.dark .mlc-modal__header,
body.dark .mlc-modal__header {
  color: #f3f5f7 !important;
  background: #090b0d !important;

  border-bottom-color: #20252b !important;
}

[data-theme="dark"] .mlc-modal__content,
.dark .mlc-modal__content,
body.dark .mlc-modal__content {
  color: #f3f5f7 !important;
  background: #090b0d !important;
}

[data-theme="dark"] .mlc-modal__footer,
.dark .mlc-modal__footer,
body.dark .mlc-modal__footer {
  color: #f3f5f7 !important;
  background: #0e1114 !important;

  border-top-color: #20252b !important;
}

[data-theme="dark"] .mlc-modal__heading h2,
[data-theme="dark"] .mlc-sync-option__copy strong,
.dark .mlc-modal__heading h2,
.dark .mlc-sync-option__copy strong,
body.dark .mlc-modal__heading h2,
body.dark .mlc-sync-option__copy strong {
  color: #f3f5f7 !important;
}

[data-theme="dark"] .mlc-modal__heading p,
[data-theme="dark"] .mlc-sync-option__copy small,
.dark .mlc-modal__heading p,
.dark .mlc-sync-option__copy small,
body.dark .mlc-modal__heading p,
body.dark .mlc-sync-option__copy small {
  color: #b3b9c1 !important;
}

[data-theme="dark"] .mlc-modal__icon,
[data-theme="dark"] .mlc-sync-option__icon,
.dark .mlc-modal__icon,
.dark .mlc-sync-option__icon,
body.dark .mlc-modal__icon,
body.dark .mlc-sync-option__icon {
  color: #b3b9c1 !important;
  background: #0e1114 !important;

  border-color: #20252b !important;
}

[data-theme="dark"] .mlc-modal__close,
.dark .mlc-modal__close,
body.dark .mlc-modal__close {
  color: #b3b9c1 !important;
  background: #0e1114 !important;

  border-color: #20252b !important;
}

[data-theme="dark"] .mlc-sync-options,
.dark .mlc-sync-options,
body.dark .mlc-sync-options {
  background: #090b0d !important;
}

[data-theme="dark"] .mlc-sync-option,
.dark .mlc-sync-option,
body.dark .mlc-sync-option {
  color: #f3f5f7 !important;
  background: #0d1013 !important;

  border-color: #242a31 !important;
}

[data-theme="dark"] .mlc-sync-option:hover,
.dark .mlc-sync-option:hover,
body.dark .mlc-sync-option:hover {
  color: #ffffff !important;
  background: #15191e !important;

  border-color: #343a43 !important;
}

[data-theme="dark"] .mlc-sync-option > svg,
.dark .mlc-sync-option > svg,
body.dark .mlc-sync-option > svg {
  color: #b3b9c1 !important;
}

/* =========================================================
   ELIMINAR CUALQUIER GLOW
   ========================================================= */

.mlc-modal *,
.mlc-modal *::before,
.mlc-modal *::after,
.mlc-page *,
.mlc-page *::before,
.mlc-page *::after {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}