/* =========================================================
   UBICACIÓN:
   frontend/src/pages/recursos/lotes-stock/lotes-stock.css
   ========================================================= */

/* =========================================================
   WIRTZ HUB · RECURSOS
   LOTES DE STOCK

   Ruta:
   /recursos/lotes-stock
   ========================================================= */

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

.lotes-stock-page,
.lotes-stock-page *,
.lotes-stock-modal,
.lotes-stock-modal *,
.lotes-stock-toast,
.lotes-stock-toast * {
  box-sizing: border-box;
}

.lotes-stock-page {
  --lots-surface:
    var(
      --color-surface,
      #ffffff
    );

  --lots-surface-soft:
    var(
      --color-surface-soft,
      #f7f7f8
    );

  --lots-surface-alt:
    var(
      --color-surface-alt,
      #f1f2f4
    );

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

  --lots-muted:
    var(
      --color-text-muted,
      #6f7177
    );

  --lots-muted-soft:
    var(
      --color-text-soft,
      #96989e
    );

  --lots-line:
    var(
      --color-line,
      rgba(
        17,
        17,
        17,
        0.1
      )
    );

  --lots-line-strong:
    rgba(
      17,
      17,
      17,
      0.17
    );

  --lots-primary:
    #111111;

  --lots-primary-text:
    #ffffff;

  --lots-success:
    #15803d;

  --lots-success-soft:
    rgba(
      21,
      128,
      61,
      0.1
    );

  --lots-warning:
    #b45309;

  --lots-warning-soft:
    rgba(
      180,
      83,
      9,
      0.1
    );

  --lots-danger:
    #dc2626;

  --lots-danger-soft:
    rgba(
      220,
      38,
      38,
      0.1
    );

  --lots-info:
    #2563eb;

  --lots-info-soft:
    rgba(
      37,
      99,
      235,
      0.1
    );

  --lots-neutral-soft:
    rgba(
      17,
      17,
      17,
      0.055
    );

  --lots-radius-lg:
    14px;

  --lots-radius-md:
    11px;

  --lots-radius-sm:
    8px;

  --lots-shadow:
    0 1px 2px
      rgba(
        0,
        0,
        0,
        0.03
      ),
    0 8px 24px
      rgba(
        0,
        0,
        0,
        0.045
      );

  width:
    100%;

  min-width:
    0;

  display:
    grid;

  align-content:
    start;

  gap:
    12px;

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

html[data-theme="dark"]
.lotes-stock-page {
  --lots-surface:
    #101010;

  --lots-surface-soft:
    #151515;

  --lots-surface-alt:
    #1c1c1c;

  --lots-text:
    rgba(
      255,
      255,
      255,
      0.92
    );

  --lots-muted:
    rgba(
      255,
      255,
      255,
      0.58
    );

  --lots-muted-soft:
    rgba(
      255,
      255,
      255,
      0.36
    );

  --lots-line:
    rgba(
      255,
      255,
      255,
      0.09
    );

  --lots-line-strong:
    rgba(
      255,
      255,
      255,
      0.16
    );

  --lots-primary:
    #f3f3f3;

  --lots-primary-text:
    #111111;

  --lots-success:
    #4ade80;

  --lots-success-soft:
    rgba(
      74,
      222,
      128,
      0.1
    );

  --lots-warning:
    #fbbf24;

  --lots-warning-soft:
    rgba(
      251,
      191,
      36,
      0.1
    );

  --lots-danger:
    #f87171;

  --lots-danger-soft:
    rgba(
      248,
      113,
      113,
      0.1
    );

  --lots-info:
    #60a5fa;

  --lots-info-soft:
    rgba(
      96,
      165,
      250,
      0.1
    );

  --lots-neutral-soft:
    rgba(
      255,
      255,
      255,
      0.055
    );

  --lots-shadow:
    0 1px 0
      rgba(
        255,
        255,
        255,
        0.03
      )
      inset,
    0 12px 26px
      rgba(
        0,
        0,
        0,
        0.26
      );
}

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

.app-content:has(
  .lotes-stock-page
) {
  display:
    block !important;

  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    none !important;

  padding:
    12px !important;

  overflow:
    visible !important;
}

body:has(
  .lotes-stock-page
)
.app-shell,
body:has(
  .lotes-stock-page
)
.app-main {
  min-height:
    100vh;
}

body:has(
  .lotes-stock-page
)
.app-footer {
  margin-top:
    12px;
}

/* =========================================================
   CABECERA
   ========================================================= */

.lotes-stock-head {
  width:
    100%;

  min-width:
    0;

  min-height:
    94px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    18px;

  padding:
    16px 18px;

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

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

  background:
    var(
      --lots-surface
    );

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

.lotes-stock-brand {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;
}

.lotes-stock-brand__icon {
  width:
    46px;

  height:
    46px;

  min-width:
    46px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    11px;

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

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

.lotes-stock-brand__icon
.icon,
.lotes-stock-brand__icon
svg {
  width:
    21px;

  height:
    21px;

  stroke-width:
    2;
}

.lotes-stock-brand
> div {
  min-width:
    0;
}

.lotes-stock-brand
h2 {
  margin:
    0;

  color:
    var(
      --lots-text
    );

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

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -0.045em;
}

.lotes-stock-brand
p {
  max-width:
    800px;

  margin:
    7px 0 0;

  color:
    var(
      --lots-muted
    );

  font-size:
    12px;

  font-weight:
    600;

  line-height:
    1.45;
}

.lotes-stock-head__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;
}

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

.lotes-stock-btn,
.lotes-stock-icon-btn,
.lotes-stock-pagination__button,
.lotes-stock-modal__close {
  border:
    1px
    solid
    var(
      --lots-line-strong
    );

  outline:
    none;

  background:
    transparent;

  color:
    var(
      --lots-text
    );

  cursor:
    pointer;

  transition:
    background
      0.18s
      ease,
    color
      0.18s
      ease,
    border-color
      0.18s
      ease,
    transform
      0.18s
      ease,
    opacity
      0.18s
      ease;
}

.lotes-stock-btn {
  min-height:
    38px;

  height:
    38px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    0 13px;

  border-radius:
    var(
      --lots-radius-sm
    );

  font-size:
    11px;

  font-weight:
    850;

  line-height:
    1;

  white-space:
    nowrap;
}

.lotes-stock-btn:hover,
.lotes-stock-icon-btn:hover,
.lotes-stock-pagination__button:hover:not(
  :disabled
),
.lotes-stock-modal__close:hover {
  border-color:
    color-mix(
      in srgb,
      var(
        --lots-text
      )
      30%,
      transparent
    );

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

  transform:
    translateY(
      -1px
    );
}

.lotes-stock-btn:active,
.lotes-stock-icon-btn:active,
.lotes-stock-pagination__button:active:not(
  :disabled
),
.lotes-stock-modal__close:active {
  transform:
    translateY(
      0
    )
    scale(
      0.985
    );
}

.lotes-stock-btn:disabled,
.lotes-stock-pagination__button:disabled {
  opacity:
    0.42;

  cursor:
    not-allowed;

  transform:
    none;
}

.lotes-stock-btn
.icon,
.lotes-stock-btn
svg,
.lotes-stock-icon-btn
.icon,
.lotes-stock-icon-btn
svg,
.lotes-stock-pagination__button
.icon,
.lotes-stock-pagination__button
svg,
.lotes-stock-modal__close
.icon,
.lotes-stock-modal__close
svg {
  width:
    15px;

  height:
    15px;

  min-width:
    15px;

  stroke-width:
    2.2;
}

.lotes-stock-btn--primary {
  border-color:
    var(
      --lots-primary
    );

  background:
    var(
      --lots-primary
    );

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

.lotes-stock-btn--primary:hover {
  border-color:
    var(
      --lots-primary
    );

  background:
    color-mix(
      in srgb,
      var(
        --lots-primary
      )
      88%,
      transparent
    );
}

.lotes-stock-btn--dark {
  border-color:
    var(
      --lots-text
    );

  background:
    var(
      --lots-text
    );

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

.lotes-stock-btn--dark:hover {
  background:
    color-mix(
      in srgb,
      var(
        --lots-text
      )
      88%,
      transparent
    );
}

.lotes-stock-btn.is-loading
.icon,
.lotes-stock-btn.is-loading
svg {
  animation:
    lotesStockSpin
    0.8s
    linear
    infinite;
}

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

.lotes-stock-metrics {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

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

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

  background:
    var(
      --lots-surface
    );

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

  overflow:
    hidden;
}

.lotes-stock-metric {
  min-width:
    0;

  min-height:
    84px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  padding:
    12px;

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

  background:
    transparent;
}

.lotes-stock-metric:last-child {
  border-right:
    0;
}

.lotes-stock-metric:hover {
  background:
    var(
      --lots-surface-soft
    );
}

.lotes-stock-metric__icon {
  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    10px;

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

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

.lotes-stock-metric:nth-child(
  1
)
.lotes-stock-metric__icon,
.lotes-stock-metric:nth-child(
  4
)
.lotes-stock-metric__icon {
  color:
    var(
      --lots-info
    );

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

.lotes-stock-metric:nth-child(
  2
)
.lotes-stock-metric__icon,
.lotes-stock-metric:nth-child(
  3
)
.lotes-stock-metric__icon {
  color:
    var(
      --lots-success
    );

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

.lotes-stock-metric:nth-child(
  5
)
.lotes-stock-metric__icon,
.lotes-stock-metric:nth-child(
  6
)
.lotes-stock-metric__icon {
  color:
    var(
      --lots-warning
    );

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

.lotes-stock-metric__icon
.icon,
.lotes-stock-metric__icon
svg {
  width:
    18px;

  height:
    18px;

  stroke-width:
    2;
}

.lotes-stock-metric
> div {
  min-width:
    0;

  display:
    grid;

  gap:
    5px;
}

.lotes-stock-metric
> div
> span {
  color:
    var(
      --lots-muted
    );

  font-size:
    8.5px;

  font-weight:
    900;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}

.lotes-stock-metric
strong {
  color:
    var(
      --lots-text
    );

  font-size:
    18px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -0.04em;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}

.lotes-stock-metric
small {
  color:
    var(
      --lots-muted-soft
    );

  font-size:
    9px;

  font-weight:
    750;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}

.lotes-stock-metric--loading {
  display:
    grid;

  grid-template-columns:
    1fr;

  gap:
    8px;
}

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

.lotes-stock-panel {
  width:
    100%;

  min-width:
    0;

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

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

  background:
    var(
      --lots-surface
    );

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

  overflow:
    hidden;
}

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

.lotes-stock-toolbar {
  display:
    grid;

  grid-template-columns:
    minmax(
      260px,
      1.5fr
    )
    minmax(
      135px,
      0.75fr
    )
    minmax(
      135px,
      0.7fr
    )
    minmax(
      125px,
      0.65fr
    )
    minmax(
      130px,
      0.65fr
    )
    minmax(
      130px,
      0.65fr
    )
    auto
    auto;

  align-items:
    end;

  gap:
    8px;

  padding:
    12px;

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

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

.lotes-stock-search {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  height:
    39px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 10px;

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

  border-radius:
    var(
      --lots-radius-sm
    );

  background:
    var(
      --lots-surface
    );

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

.lotes-stock-search:focus-within {
  border-color:
    color-mix(
      in srgb,
      var(
        --lots-text
      )
      34%,
      transparent
    );
}

.lotes-stock-search
> .icon,
.lotes-stock-search
> svg {
  width:
    14px;

  height:
    14px;

  min-width:
    14px;

  stroke-width:
    2.1;
}

.lotes-stock-search
input {
  width:
    100%;

  min-width:
    0;

  border:
    0;

  outline:
    none;

  background:
    transparent;

  color:
    var(
      --lots-text
    );

  font-size:
    10.5px;

  font-weight:
    750;
}

.lotes-stock-search
input::placeholder {
  color:
    var(
      --lots-muted-soft
    );
}

.lotes-stock-search__clear {
  width:
    27px;

  height:
    27px;

  min-width:
    27px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(
      --lots-muted
    );

  cursor:
    pointer;
}

.lotes-stock-search__clear:hover {
  background:
    var(
      --lots-surface-alt
    );

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

.lotes-stock-search__clear
.icon,
.lotes-stock-search__clear
svg {
  width:
    13px;

  height:
    13px;
}

.lotes-stock-filter {
  min-width:
    0;

  display:
    grid;

  gap:
    5px;
}

.lotes-stock-filter
> span {
  color:
    var(
      --lots-muted
    );

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}

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

  min-width:
    0;

  height:
    39px;

  padding:
    0 9px;

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

  border-radius:
    var(
      --lots-radius-sm
    );

  outline:
    none;

  background:
    var(
      --lots-surface
    );

  color:
    var(
      --lots-text
    );

  font-size:
    10px;

  font-weight:
    750;
}

.lotes-stock-filter
select:focus,
.lotes-stock-filter
input:focus {
  border-color:
    color-mix(
      in srgb,
      var(
        --lots-text
      )
      34%,
      transparent
    );
}

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

.lotes-stock-table-mount {
  width:
    100%;

  min-width:
    0;

  min-height:
    390px;
}

.lotes-stock-table-wrapper {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;
}

.lotes-stock-table {
  width:
    100%;

  min-width:
    1510px;

  border-collapse:
    collapse;

  table-layout:
    auto;
}

.lotes-stock-table
thead
th {
  height:
    44px;

  padding:
    0 11px;

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

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

  color:
    var(
      --lots-muted
    );

  font-size:
    8.3px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    0.07em;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}

.lotes-stock-table
tbody
td {
  min-height:
    58px;

  padding:
    10px 11px;

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

  color:
    var(
      --lots-text
    );

  font-size:
    10.5px;

  font-weight:
    700;

  vertical-align:
    middle;
}

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

.lotes-stock-table
tbody
tr:hover {
  background:
    var(
      --lots-surface-soft
    );
}

.lotes-stock-table
th.is-numeric,
.lotes-stock-table
td.is-numeric {
  text-align:
    right;

  white-space:
    nowrap;
}

.lotes-stock-table
th.is-actions,
.lotes-stock-table
td.is-actions {
  width:
    88px;

  min-width:
    88px;

  text-align:
    right;
}

.lotes-stock-table__sku {
  display:
    block;

  color:
    var(
      --lots-text
    );

  font-size:
    10.5px;

  font-weight:
    900;

  white-space:
    nowrap;
}

.lotes-stock-table__product {
  display:
    block;

  max-width:
    280px;

  color:
    var(
      --lots-text
    );

  font-size:
    11px;

  font-weight:
    900;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}

.lotes-stock-table
td
small {
  display:
    block;

  margin-top:
    4px;

  color:
    var(
      --lots-muted-soft
    );

  font-size:
    8.7px;

  font-weight:
    700;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}

.lotes-stock-table__text {
  display:
    block;

  max-width:
    175px;

  color:
    var(
      --lots-muted
    );

  font-size:
    10px;

  font-weight:
    750;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}

.lotes-stock-table__date {
  color:
    var(
      --lots-muted
    );

  font-size:
    10px;

  font-weight:
    800;

  white-space:
    nowrap;
}

.lotes-stock-lot-code {
  padding:
    0;

  border:
    0;

  outline:
    none;

  background:
    transparent;

  color:
    var(
      --lots-info
    );

  font-size:
    10px;

  font-weight:
    900;

  cursor:
    pointer;

  white-space:
    nowrap;
}

.lotes-stock-lot-code:hover {
  text-decoration:
    underline;
}

.lotes-stock-provider-code {
  min-height:
    26px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  padding:
    0 9px;

  border:
    1px
    solid
    color-mix(
      in srgb,
      var(
        --lots-success
      )
      28%,
      transparent
    );

  border-radius:
    999px;

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

  color:
    var(
      --lots-success
    );

  font-size:
    9px;

  font-weight:
    900;

  white-space:
    nowrap;
}

button.lotes-stock-provider-code {
  cursor:
    pointer;
}

.lotes-stock-provider-code--empty {
  border-style:
    dashed;

  border-color:
    color-mix(
      in srgb,
      var(
        --lots-warning
      )
      38%,
      transparent
    );

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

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

.lotes-stock-provider-code--empty:hover {
  border-style:
    solid;

  transform:
    translateY(
      -1px
    );
}

.lotes-stock-provider-code
.icon,
.lotes-stock-provider-code
svg {
  width:
    12px;

  height:
    12px;

  stroke-width:
    2.4;
}

.lotes-stock-quantity {
  font-weight:
    900;
}

.lotes-stock-quantity.is-available {
  color:
    var(
      --lots-success
    );
}

.lotes-stock-deposit {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(
      --lots-muted
    );

  font-size:
    9.5px;

  font-weight:
    800;

  white-space:
    nowrap;
}

.lotes-stock-deposit
.icon,
.lotes-stock-deposit
svg {
  width:
    13px;

  height:
    13px;

  min-width:
    13px;
}

/* =========================================================
   ESTADOS
   ========================================================= */

.lotes-stock-status {
  min-height:
    25px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 9px;

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

  border-radius:
    999px;

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

  color:
    var(
      --lots-muted
    );

  font-size:
    8.7px;

  font-weight:
    900;

  line-height:
    1;

  white-space:
    nowrap;
}

.lotes-stock-status.is-active {
  border-color:
    color-mix(
      in srgb,
      var(
        --lots-success
      )
      34%,
      transparent
    );

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

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

.lotes-stock-status.is-partial {
  border-color:
    color-mix(
      in srgb,
      var(
        --lots-warning
      )
      34%,
      transparent
    );

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

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

.lotes-stock-status.is-empty,
.lotes-stock-status.is-cancelled {
  border-color:
    color-mix(
      in srgb,
      var(
        --lots-danger
      )
      32%,
      transparent
    );

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

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

.lotes-stock-status.is-blocked,
.lotes-stock-status.is-expired {
  border-color:
    color-mix(
      in srgb,
      var(
        --lots-warning
      )
      32%,
      transparent
    );

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

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

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

.lotes-stock-row-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    5px;
}

.lotes-stock-icon-btn {
  width:
    31px;

  height:
    31px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border-radius:
    8px;
}

.lotes-stock-icon-btn
.icon,
.lotes-stock-icon-btn
svg {
  width:
    14px;

  height:
    14px;
}

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

.lotes-stock-pagination-mount {
  border-top:
    1px
    solid
    var(
      --lots-line
    );
}

.lotes-stock-pagination {
  min-height:
    58px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    10px 12px;

  color:
    var(
      --lots-muted
    );

  font-size:
    10px;

  font-weight:
    750;
}

.lotes-stock-pagination
> div {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}

.lotes-stock-pagination
> div
> strong {
  color:
    var(
      --lots-text
    );

  font-size:
    9.5px;

  font-weight:
    850;
}

.lotes-stock-pagination__button {
  min-height:
    34px;

  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  padding:
    0 10px;

  border-radius:
    8px;

  font-size:
    9.5px;

  font-weight:
    850;
}

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

.lotes-stock-empty {
  min-height:
    340px;

  display:
    grid;

  place-items:
    center;

  align-content:
    center;

  gap:
    9px;

  padding:
    30px;

  text-align:
    center;
}

.lotes-stock-empty
.icon,
.lotes-stock-empty
svg {
  width:
    38px;

  height:
    38px;

  color:
    var(
      --lots-muted
    );

  stroke-width:
    1.8;
}

.lotes-stock-empty
strong {
  color:
    var(
      --lots-text
    );

  font-size:
    14px;

  font-weight:
    900;
}

.lotes-stock-empty
p {
  max-width:
    390px;

  margin:
    0;

  color:
    var(
      --lots-muted
    );

  font-size:
    10.5px;

  font-weight:
    700;

  line-height:
    1.45;
}

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

body.lotes-stock-modal-open {
  overflow:
    hidden !important;
}

.lotes-stock-modal {
  display:
    none;

  position:
    fixed;

  inset:
    0;

  z-index:
    10000;

  width:
    100vw;

  height:
    100dvh;

  align-items:
    center;

  justify-content:
    center;

  padding:
    20px;
}

.lotes-stock-modal.is-open {
  display:
    flex;
}

.lotes-stock-modal__backdrop {
  position:
    fixed;

  inset:
    0;

  width:
    100vw;

  height:
    100dvh;

  border:
    0;

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

  backdrop-filter:
    blur(
      4px
    );

  cursor:
    pointer;
}

.lotes-stock-modal__dialog {
  position:
    relative;

  z-index:
    1;

  width:
    min(
      1160px,
      calc(
        100vw -
        40px
      )
    );

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

  display:
    flex;

  flex-direction:
    column;

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

  border-radius:
    14px;

  background:
    var(
      --lots-surface
    );

  color:
    var(
      --lots-text
    );

  box-shadow:
    0 30px 90px
      rgba(
        0,
        0,
        0,
        0.4
      );

  overflow:
    hidden;
}

.lotes-stock-modal__header {
  min-height:
    76px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    14px 16px;

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

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

.lotes-stock-modal__header
> div {
  min-width:
    0;

  display:
    grid;

  gap:
    5px;
}

.lotes-stock-modal__header
span {
  color:
    var(
      --lots-muted
    );

  font-size:
    8.5px;

  font-weight:
    900;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.lotes-stock-modal__header
h2 {
  margin:
    0;

  color:
    var(
      --lots-text
    );

  font-size:
    20px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -0.04em;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}

.lotes-stock-modal__close {
  width:
    36px;

  height:
    36px;

  min-width:
    36px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border-radius:
    9px;
}

.lotes-stock-modal__body {
  min-height:
    0;

  padding:
    14px;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;
}

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

.lotes-stock-detail-summary {
  border:
    1px
    solid
    var(
      --lots-line-strong
    );

  border-radius:
    11px;

  background:
    var(
      --lots-surface
    );

  overflow:
    hidden;
}

.lotes-stock-detail-summary__head {
  min-height:
    58px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    11px 13px;

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

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

.lotes-stock-detail-summary__head
> div:first-child {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}

.lotes-stock-detail-summary__head
time {
  color:
    var(
      --lots-muted
    );

  font-size:
    9.5px;

  font-weight:
    750;
}

.lotes-stock-detail-summary__actions {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}

.lotes-stock-detail-product {
  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  padding:
    15px;

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

.lotes-stock-detail-product__icon {
  width:
    48px;

  height:
    48px;

  min-width:
    48px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    11px;

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

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

.lotes-stock-detail-product__icon
.icon,
.lotes-stock-detail-product__icon
svg {
  width:
    21px;

  height:
    21px;
}

.lotes-stock-detail-product
> div {
  min-width:
    0;

  display:
    grid;

  gap:
    5px;
}

.lotes-stock-detail-product
small {
  color:
    var(
      --lots-muted
    );

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.05em;
}

.lotes-stock-detail-product
h3 {
  margin:
    0;

  color:
    var(
      --lots-text
    );

  font-size:
    18px;

  font-weight:
    900;

  line-height:
    1.05;

  letter-spacing:
    -0.035em;
}

.lotes-stock-detail-product
p {
  margin:
    0;

  color:
    var(
      --lots-muted
    );

  font-size:
    10px;

  font-weight:
    700;
}

.lotes-stock-detail-metrics {
  display:
    grid;

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

.lotes-stock-detail-metrics
article {
  min-width:
    0;

  min-height:
    76px;

  display:
    grid;

  align-content:
    center;

  gap:
    5px;

  padding:
    11px 12px;

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

.lotes-stock-detail-metrics
article:last-child {
  border-right:
    0;
}

.lotes-stock-detail-metrics
span {
  color:
    var(
      --lots-muted
    );

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}

.lotes-stock-detail-metrics
strong {
  color:
    var(
      --lots-text
    );

  font-size:
    16px;

  font-weight:
    900;

  line-height:
    1;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}

/* =========================================================
   SECCIONES DEL MODAL
   ========================================================= */

.lotes-stock-modal-section {
  margin-top:
    12px;

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

  border-radius:
    11px;

  background:
    var(
      --lots-surface
    );

  overflow:
    hidden;
}

.lotes-stock-modal-section__head {
  min-height:
    58px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    11px 13px;

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

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

.lotes-stock-modal-section__head
> div {
  display:
    grid;

  gap:
    5px;
}

.lotes-stock-modal-section__head
span {
  color:
    var(
      --lots-muted
    );

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.lotes-stock-modal-section__head
strong {
  color:
    var(
      --lots-text
    );

  font-size:
    14px;

  font-weight:
    900;
}

.lotes-stock-detail-grid {
  display:
    grid;

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

.lotes-stock-detail-field {
  min-width:
    0;

  min-height:
    70px;

  display:
    grid;

  align-content:
    center;

  gap:
    5px;

  padding:
    11px 12px;

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

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

.lotes-stock-detail-field:nth-child(
  4n
) {
  border-right:
    0;
}

.lotes-stock-detail-field
span {
  color:
    var(
      --lots-muted
    );

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}

.lotes-stock-detail-field
strong {
  color:
    var(
      --lots-text
    );

  font-size:
    10.5px;

  font-weight:
    850;

  overflow-wrap:
    anywhere;
}

.lotes-stock-detail-notes {
  margin:
    0;

  padding:
    14px;

  color:
    var(
      --lots-muted
    );

  font-size:
    10.5px;

  font-weight:
    700;

  line-height:
    1.55;

  white-space:
    pre-wrap;
}

/* =========================================================
   FORMULARIO
   ========================================================= */

.lotes-stock-form {
  display:
    grid;

  gap:
    12px;
}

.lotes-stock-form-section {
  border:
    1px
    solid
    var(
      --lots-line-strong
    );

  border-radius:
    11px;

  background:
    var(
      --lots-surface
    );

  overflow:
    hidden;
}

.lotes-stock-form-section
> header {
  min-height:
    58px;

  display:
    grid;

  align-content:
    center;

  gap:
    5px;

  padding:
    11px 13px;

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

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

.lotes-stock-form-section
> header
span {
  color:
    var(
      --lots-muted
    );

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.lotes-stock-form-section
> header
strong {
  color:
    var(
      --lots-text
    );

  font-size:
    14px;

  font-weight:
    900;
}

.lotes-stock-form-grid {
  display:
    grid;

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

  gap:
    10px;

  padding:
    13px;
}

.lotes-stock-field {
  min-width:
    0;

  display:
    grid;

  gap:
    6px;
}

.lotes-stock-field
> span {
  color:
    var(
      --lots-muted
    );

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}

.lotes-stock-field
input,
.lotes-stock-field
select,
.lotes-stock-field
textarea {
  width:
    100%;

  min-width:
    0;

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

  border-radius:
    var(
      --lots-radius-sm
    );

  outline:
    none;

  background:
    var(
      --lots-surface
    );

  color:
    var(
      --lots-text
    );

  font-size:
    10.5px;

  font-weight:
    700;

  resize:
    vertical;
}

.lotes-stock-field
input,
.lotes-stock-field
select {
  height:
    40px;

  padding:
    0 10px;
}

.lotes-stock-field
textarea {
  min-height:
    100px;

  padding:
    10px;

  line-height:
    1.45;
}

.lotes-stock-field
input:focus,
.lotes-stock-field
select:focus,
.lotes-stock-field
textarea:focus {
  border-color:
    color-mix(
      in srgb,
      var(
        --lots-text
      )
      36%,
      transparent
    );

  box-shadow:
    0 0 0 3px
      color-mix(
        in srgb,
        var(
          --lots-text
        )
        5%,
        transparent
      );
}

.lotes-stock-field--highlight
input {
  border-color:
    color-mix(
      in srgb,
      var(
        --lots-info
      )
      38%,
      transparent
    );

  background:
    var(
      --lots-info-soft
    );

  color:
    var(
      --lots-text
    );

  font-weight:
    850;
}

.lotes-stock-field--highlight
input:focus {
  border-color:
    var(
      --lots-info
    );

  box-shadow:
    0 0 0 3px
      color-mix(
        in srgb,
        var(
          --lots-info
        )
        13%,
        transparent
      );
}

.lotes-stock-field--full {
  padding:
    0 13px 13px;
}

.lotes-stock-form-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  padding-top:
    2px;
}

/* =========================================================
   PRODUCTO EN EDICIÓN
   ========================================================= */

.lotes-stock-edit-product {
  display:
    grid;

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

  align-items:
    center;

  gap:
    11px;

  padding:
    13px;

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

.lotes-stock-edit-product__icon {
  width:
    42px;

  height:
    42px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    10px;

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

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

.lotes-stock-edit-product__icon
.icon,
.lotes-stock-edit-product__icon
svg {
  width:
    18px;

  height:
    18px;
}

.lotes-stock-edit-product
> div {
  min-width:
    0;

  display:
    grid;

  gap:
    5px;
}

.lotes-stock-edit-product
strong {
  color:
    var(
      --lots-text
    );

  font-size:
    13px;

  font-weight:
    900;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}

.lotes-stock-edit-product
small {
  color:
    var(
      --lots-muted
    );

  font-size:
    9.5px;

  font-weight:
    750;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}

/* =========================================================
   CAMPOS SOLO LECTURA
   ========================================================= */

.lotes-stock-readonly-grid {
  display:
    grid;

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

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

.lotes-stock-readonly-field {
  min-width:
    0;

  min-height:
    68px;

  display:
    grid;

  align-content:
    center;

  gap:
    5px;

  padding:
    10px 11px;

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

  background:
    var(
      --lots-neutral-soft
    );
}

.lotes-stock-readonly-field:last-child {
  border-right:
    0;
}

.lotes-stock-readonly-field
span {
  color:
    var(
      --lots-muted
    );

  font-size:
    7.8px;

  font-weight:
    900;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}

.lotes-stock-readonly-field
strong {
  color:
    var(
      --lots-text
    );

  font-size:
    10.5px;

  font-weight:
    900;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}

/* =========================================================
   SKELETONS
   ========================================================= */

.lotes-stock-skeleton {
  display:
    block;

  position:
    relative;

  overflow:
    hidden;

  border-radius:
    7px;

  background:
    var(
      --lots-surface-alt
    );
}

.lotes-stock-skeleton::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  transform:
    translateX(
      -100%
    );

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        255,
        255,
        0.58
      ),
      transparent
    );

  animation:
    lotesStockShimmer
    1.2s
    infinite;
}

html[data-theme="dark"]
.lotes-stock-skeleton::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        255,
        255,
        0.05
      ),
      transparent
    );
}

.lotes-stock-skeleton--metric-label {
  width:
    55%;

  height:
    8px;
}

.lotes-stock-skeleton--metric-value {
  width:
    68%;

  height:
    18px;
}

.lotes-stock-skeleton--metric-detail {
  width:
    45%;

  height:
    7px;
}

.lotes-stock-table-loading {
  display:
    grid;

  gap:
    8px;

  padding:
    12px;
}

.lotes-stock-skeleton--table-row {
  height:
    52px;
}

.lotes-stock-modal-loading {
  display:
    grid;

  gap:
    12px;
}

.lotes-stock-skeleton--modal-head {
  height:
    90px;
}

.lotes-stock-skeleton--modal-panel {
  height:
    230px;
}

.lotes-stock-skeleton--modal-table {
  height:
    320px;
}

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

.lotes-stock-toast {
  position:
    fixed;

  right:
    16px;

  bottom:
    28px;

  z-index:
    12000;

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

  min-height:
    54px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  padding:
    11px 13px;

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

  border-radius:
    12px;

  background:
    var(
      --lots-surface
    );

  color:
    var(
      --lots-text
    );

  box-shadow:
    0 18px 48px
      rgba(
        0,
        0,
        0,
        0.2
      );

  opacity:
    0;

  pointer-events:
    none;

  transform:
    translateY(
      8px
    )
    scale(
      0.98
    );

  transition:
    opacity
      0.18s
      ease,
    transform
      0.18s
      ease;
}

.lotes-stock-toast.is-visible {
  opacity:
    1;

  pointer-events:
    auto;

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

.lotes-stock-toast
> .icon,
.lotes-stock-toast
> svg {
  width:
    18px;

  height:
    18px;
}

.lotes-stock-toast
span {
  font-size:
    10.5px;

  font-weight:
    850;

  line-height:
    1.4;
}

.lotes-stock-toast.is-error {
  border-color:
    color-mix(
      in srgb,
      var(
        --lots-danger
      )
      40%,
      transparent
    );
}

.lotes-stock-toast.is-error
> .icon,
.lotes-stock-toast.is-error
> svg {
  color:
    var(
      --lots-danger
    );
}

.lotes-stock-toast.is-success {
  border-color:
    color-mix(
      in srgb,
      var(
        --lots-success
      )
      40%,
      transparent
    );
}

.lotes-stock-toast.is-success
> .icon,
.lotes-stock-toast.is-success
> svg {
  color:
    var(
      --lots-success
    );
}

.lotes-stock-toast.is-info
> .icon,
.lotes-stock-toast.is-info
> svg {
  color:
    var(
      --lots-info
    );
}

/* =========================================================
   SCROLLBARS
   ========================================================= */

.lotes-stock-table-wrapper,
.lotes-stock-modal__body {
  scrollbar-width:
    thin;

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

.lotes-stock-table-wrapper::-webkit-scrollbar,
.lotes-stock-modal__body::-webkit-scrollbar {
  width:
    8px;

  height:
    8px;
}

.lotes-stock-table-wrapper::-webkit-scrollbar-thumb,
.lotes-stock-modal__body::-webkit-scrollbar-thumb {
  border-radius:
    999px;

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

.lotes-stock-table-wrapper::-webkit-scrollbar-track,
.lotes-stock-modal__body::-webkit-scrollbar-track {
  background:
    transparent;
}

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

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

  .lotes-stock-metric:nth-child(
    3n
  ) {
    border-right:
      0;
  }

  .lotes-stock-metric:nth-child(
    n + 4
  ) {
    border-top:
      1px
      solid
      var(
        --lots-line
      );
  }

  .lotes-stock-toolbar {
    grid-template-columns:
      minmax(
        230px,
        1.4fr
      )
      minmax(
        125px,
        0.7fr
      )
      minmax(
        120px,
        0.65fr
      )
      minmax(
        120px,
        0.6fr
      )
      minmax(
        125px,
        0.65fr
      )
      minmax(
        125px,
        0.65fr
      );
  }

  .lotes-stock-toolbar
  > .lotes-stock-btn {
    justify-self:
      end;
  }

  .lotes-stock-readonly-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }

  .lotes-stock-readonly-field:nth-child(
    3n
  ) {
    border-right:
      0;
  }

  .lotes-stock-readonly-field:nth-child(
    n + 4
  ) {
    border-top:
      1px
      solid
      var(
        --lots-line
      );
  }
}

@media (
  max-width:
  1120px
) {
  .lotes-stock-head {
    grid-template-columns:
      1fr;
  }

  .lotes-stock-head__actions {
    justify-content:
      flex-start;
  }

  .lotes-stock-toolbar {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }

  .lotes-stock-search {
    grid-column:
      1 / -1;
  }

  .lotes-stock-toolbar
  > .lotes-stock-btn {
    width:
      100%;

    justify-self:
      stretch;
  }

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

  .lotes-stock-detail-field:nth-child(
    4n
  ) {
    border-right:
      1px
      solid
      var(
        --lots-line
      );
  }

  .lotes-stock-detail-field:nth-child(
    2n
  ) {
    border-right:
      0;
  }

  .lotes-stock-form-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}

@media (
  max-width:
  820px
) {
  .app-content:has(
    .lotes-stock-page
  ) {
    padding:
      8px !important;
  }

  .lotes-stock-page {
    gap:
      10px;
  }

  .lotes-stock-head {
    padding:
      13px;
  }

  .lotes-stock-brand {
    align-items:
      flex-start;
  }

  .lotes-stock-brand
  h2 {
    font-size:
      23px;
  }

  .lotes-stock-head__actions,
  .lotes-stock-head__actions
  .lotes-stock-btn {
    width:
      100%;
  }

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

  .lotes-stock-metric {
    border-top:
      1px
      solid
      var(
        --lots-line
      );
  }

  .lotes-stock-metric:nth-child(
    1
  ),
  .lotes-stock-metric:nth-child(
    2
  ) {
    border-top:
      0;
  }

  .lotes-stock-metric:nth-child(
    2n
  ) {
    border-right:
      0;
  }

  .lotes-stock-toolbar {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .lotes-stock-search {
    grid-column:
      1 / -1;
  }

  .lotes-stock-pagination {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .lotes-stock-pagination
  > div {
    width:
      100%;
  }

  .lotes-stock-pagination__button {
    flex:
      1 1 0;
  }

  .lotes-stock-detail-summary__head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .lotes-stock-detail-summary__actions {
    width:
      100%;
  }

  .lotes-stock-detail-summary__actions
  .lotes-stock-btn {
    width:
      100%;
  }

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

  .lotes-stock-detail-metrics
  article {
    border-top:
      1px
      solid
      var(
        --lots-line
      );
  }

  .lotes-stock-detail-metrics
  article:nth-child(
    1
  ),
  .lotes-stock-detail-metrics
  article:nth-child(
    2
  ) {
    border-top:
      0;
  }

  .lotes-stock-detail-metrics
  article:nth-child(
    2n
  ) {
    border-right:
      0;
  }

  .lotes-stock-detail-metrics
  article:last-child {
    grid-column:
      1 / -1;

    border-right:
      0;
  }

  .lotes-stock-modal {
    padding:
      10px;
  }

  .lotes-stock-modal__dialog {
    width:
      calc(
        100vw -
        20px
      );

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

  .lotes-stock-readonly-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .lotes-stock-readonly-field,
  .lotes-stock-readonly-field:nth-child(
    3n
  ) {
    border-right:
      1px
      solid
      var(
        --lots-line
      );

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

  .lotes-stock-readonly-field:nth-child(
    1
  ),
  .lotes-stock-readonly-field:nth-child(
    2
  ) {
    border-top:
      0;
  }

  .lotes-stock-readonly-field:nth-child(
    2n
  ) {
    border-right:
      0;
  }
}

@media (
  max-width:
  560px
) {
  .lotes-stock-brand__icon {
    width:
      40px;

    height:
      40px;

    min-width:
      40px;
  }

  .lotes-stock-brand
  h2 {
    font-size:
      20px;
  }

  .lotes-stock-brand
  p {
    font-size:
      10.5px;
  }

  .lotes-stock-metrics {
    grid-template-columns:
      1fr;
  }

  .lotes-stock-metric,
  .lotes-stock-metric:nth-child(
    1
  ),
  .lotes-stock-metric:nth-child(
    2
  ) {
    border-right:
      0;

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

  .lotes-stock-metric:first-child {
    border-top:
      0;
  }

  .lotes-stock-toolbar {
    grid-template-columns:
      1fr;
  }

  .lotes-stock-search {
    grid-column:
      auto;
  }

  .lotes-stock-detail-product {
    align-items:
      flex-start;
  }

  .lotes-stock-detail-product
  h3 {
    font-size:
      15px;
  }

  .lotes-stock-detail-metrics {
    grid-template-columns:
      1fr;
  }

  .lotes-stock-detail-metrics
  article,
  .lotes-stock-detail-metrics
  article:nth-child(
    1
  ),
  .lotes-stock-detail-metrics
  article:nth-child(
    2
  ),
  .lotes-stock-detail-metrics
  article:last-child {
    grid-column:
      auto;

    border-right:
      0;

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

  .lotes-stock-detail-metrics
  article:first-child {
    border-top:
      0;
  }

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

  .lotes-stock-detail-field,
  .lotes-stock-detail-field:nth-child(
    2n
  ),
  .lotes-stock-detail-field:nth-child(
    4n
  ) {
    border-right:
      0;
  }

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

  .lotes-stock-form-actions {
    flex-direction:
      column-reverse;
  }

  .lotes-stock-form-actions
  .lotes-stock-btn {
    width:
      100%;
  }

  .lotes-stock-readonly-grid {
    grid-template-columns:
      1fr;
  }

  .lotes-stock-readonly-field,
  .lotes-stock-readonly-field:nth-child(
    1
  ),
  .lotes-stock-readonly-field:nth-child(
    2
  ),
  .lotes-stock-readonly-field:nth-child(
    2n
  ),
  .lotes-stock-readonly-field:nth-child(
    3n
  ) {
    border-right:
      0;

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

  .lotes-stock-readonly-field:first-child {
    border-top:
      0;
  }

  .lotes-stock-modal__body {
    padding:
      9px;
  }

  .lotes-stock-modal__header {
    min-height:
      68px;

    padding:
      12px;
  }

  .lotes-stock-modal__header
  h2 {
    font-size:
      17px;
  }
}

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

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

@keyframes lotesStockShimmer {
  100% {
    transform:
      translateX(
        100%
      );
  }
}

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

@media (
  prefers-reduced-motion:
  reduce
) {
  .lotes-stock-page *,
  .lotes-stock-modal *,
  .lotes-stock-toast,
  .lotes-stock-toast * {
    animation:
      none !important;

    transition:
      none !important;

    scroll-behavior:
      auto !important;
  }
}