/* =========================================================
   UBICACIÓN:
   frontend/src/pages/eventos/entradas-stock/entradas-stock.css

   WIRTZ HUB · EVENTOS · ENTRADAS DE STOCK
   CSS COMPLETO
   PARTE 1 DE 2

   SOPORTA:
   - Entradas
   - Unidades
   - Etiquetas
   - Compras
   - Devoluciones
   - Reposición
   - Usuarios
   - Buscar
   - Desde
   - Hasta
   - Origen
   - Canal
   - Estado
   - Tabla redimensionable
   - Dark mode
   - Responsive
   ========================================================= */


/* =========================================================
   01 · RESET LOCAL
   ========================================================= */

.stock-in-page,
.stock-in-page *,
.stock-in-page *::before,
.stock-in-page *::after,
.stock-in-toast,
.stock-in-toast *,
.stock-in-toast *::before,
.stock-in-toast *::after {
  box-sizing: border-box;

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

  font-synthesis: none;
}


.stock-in-page button,
.stock-in-page input,
.stock-in-page select {
  font: inherit;
}


.stock-in-page button {
  appearance: none;
  -webkit-appearance: none;

  -webkit-tap-highlight-color: transparent;
}


.stock-in-page .icon,
.stock-in-page svg,
.stock-in-toast .icon,
.stock-in-toast svg {
  display: block;

  flex: 0 0 auto;

  width: 15px;
  height: 15px;

  min-width: 15px;
  min-height: 15px;

  color: currentColor;

  stroke: currentColor;
  stroke-width: 1.85;

  fill: none;

  pointer-events: none;
}


/* =========================================================
   02 · VARIABLES · LIGHT
   ========================================================= */

.stock-in-page {
  --stock-in-page-bg:
    #f5f5f4;

  --stock-in-surface:
    #ffffff;

  --stock-in-surface-soft:
    #fafafa;

  --stock-in-surface-muted:
    #f3f3f2;

  --stock-in-surface-strong:
    #ececeb;

  --stock-in-hover:
    #f4f4f3;

  --stock-in-active:
    #eeeeec;


  --stock-in-border:
    rgba(
      10,
      10,
      10,
      0.11
    );

  --stock-in-border-soft:
    rgba(
      10,
      10,
      10,
      0.07
    );

  --stock-in-border-strong:
    rgba(
      10,
      10,
      10,
      0.18
    );

  --stock-in-border-dark:
    rgba(
      10,
      10,
      10,
      0.32
    );


  --stock-in-text:
    #171717;

  --stock-in-text-strong:
    #080808;

  --stock-in-text-soft:
    #444444;

  --stock-in-text-muted:
    #737373;

  --stock-in-text-muted-2:
    #a3a3a3;


  --stock-in-success:
    #15803d;

  --stock-in-success-soft:
    rgba(
      21,
      128,
      61,
      0.08
    );

  --stock-in-success-line:
    rgba(
      21,
      128,
      61,
      0.28
    );


  --stock-in-warning:
    #a16207;

  --stock-in-warning-soft:
    rgba(
      161,
      98,
      7,
      0.08
    );

  --stock-in-warning-line:
    rgba(
      161,
      98,
      7,
      0.28
    );


  --stock-in-danger:
    #c92a2a;

  --stock-in-danger-soft:
    rgba(
      201,
      42,
      42,
      0.075
    );

  --stock-in-danger-line:
    rgba(
      201,
      42,
      42,
      0.28
    );


  --stock-in-radius-xs:
    6px;

  --stock-in-radius-sm:
    8px;

  --stock-in-radius:
    10px;

  --stock-in-radius-lg:
    12px;


  --stock-in-transition-fast:
    140ms ease;

  --stock-in-transition:
    220ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


/* =========================================================
   03 · VARIABLES · DARK
   ========================================================= */

html[data-theme="dark"]
.stock-in-page,
body.dark
.stock-in-page,
.dark
.stock-in-page {
  --stock-in-page-bg:
    #000000;

  --stock-in-surface:
    #080808;

  --stock-in-surface-soft:
    #0d0d0d;

  --stock-in-surface-muted:
    #121212;

  --stock-in-surface-strong:
    #171717;

  --stock-in-hover:
    #141414;

  --stock-in-active:
    #191919;


  --stock-in-border:
    rgba(
      255,
      255,
      255,
      0.10
    );

  --stock-in-border-soft:
    rgba(
      255,
      255,
      255,
      0.065
    );

  --stock-in-border-strong:
    rgba(
      255,
      255,
      255,
      0.16
    );

  --stock-in-border-dark:
    rgba(
      255,
      255,
      255,
      0.27
    );


  --stock-in-text:
    #eeeeee;

  --stock-in-text-strong:
    #ffffff;

  --stock-in-text-soft:
    #c5c5c5;

  --stock-in-text-muted:
    #8a8a8a;

  --stock-in-text-muted-2:
    #5d5d5d;


  --stock-in-success:
    #4ade80;

  --stock-in-success-soft:
    rgba(
      74,
      222,
      128,
      0.08
    );

  --stock-in-success-line:
    rgba(
      74,
      222,
      128,
      0.25
    );


  --stock-in-warning:
    #facc15;

  --stock-in-warning-soft:
    rgba(
      250,
      204,
      21,
      0.08
    );

  --stock-in-warning-line:
    rgba(
      250,
      204,
      21,
      0.25
    );


  --stock-in-danger:
    #f87171;

  --stock-in-danger-soft:
    rgba(
      248,
      113,
      113,
      0.08
    );

  --stock-in-danger-line:
    rgba(
      248,
      113,
      113,
      0.25
    );
}


/* =========================================================
   04 · APP CONTENT
   ========================================================= */

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

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  min-height:
    0 !important;

  height:
    auto !important;

  padding:
    0 !important;

  flex:
    0 0 auto !important;

  background:
    var(
      --stock-in-page-bg
    );

  overflow-x:
    hidden !important;

  overflow-y:
    visible !important;
}


body:has(.stock-in-page)
.app-main {
  display:
    flex !important;

  flex-direction:
    column !important;

  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    100vh !important;

  overflow-x:
    hidden !important;
}


body:has(.stock-in-page)
.app-shell {
  min-width:
    0 !important;

  min-height:
    100vh !important;

  overflow-x:
    hidden !important;
}


/* =========================================================
   05 · PAGE
   ========================================================= */

.stock-in-page {
  display:
    grid;

  grid-template-rows:
    auto
    auto
    auto
    auto;

  align-content:
    start;

  gap:
    8px;

  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  min-height:
    0;

  height:
    auto;

  padding:
    8px 10px;

  background:
    var(
      --stock-in-page-bg
    );

  color:
    var(
      --stock-in-text
    );

  overflow-x:
    hidden;

  animation:
    stockInPageIn
    220ms
    ease
    both;
}


/* =========================================================
   06 · SUPERFICIES
   ========================================================= */

.stock-in-head,
.stock-in-controls,
.stock-in-panel,
.stock-in-metrics {
  width:
    100%;

  min-width:
    0;

  border:
    1px
    solid
    var(
      --stock-in-border-strong
    );

  border-radius:
    var(
      --stock-in-radius-lg
    );

  background:
    var(
      --stock-in-surface
    );

  box-shadow:
    none;

  overflow:
    hidden;
}


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

.stock-in-head {
  position:
    relative;

  display:
    grid;

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

  align-items:
    center;

  gap:
    16px;

  min-height:
    82px;

  padding:
    12px 14px;
}


.stock-in-head::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    18px;

  width:
    74px;

  height:
    2px;

  background:
    var(
      --stock-in-text-strong
    );

  opacity:
    0.88;
}


.stock-in-head__main {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  min-width:
    0;
}


.stock-in-brand__icon {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 44px;

  width:
    44px;

  height:
    44px;

  border:
    1px
    solid
    var(
      --stock-in-border-strong
    );

  border-radius:
    10px;

  background:
    var(
      --stock-in-surface-soft
    );

  color:
    var(
      --stock-in-text
    );

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


.stock-in-head:hover
.stock-in-brand__icon {
  border-color:
    var(
      --stock-in-border-dark
    );

  transform:
    translateY(
      -1px
    );
}


.stock-in-brand__icon
.icon,
.stock-in-brand__icon
svg {
  width:
    19px;

  height:
    19px;

  min-width:
    19px;

  min-height:
    19px;
}


.stock-in-brand__content {
  min-width:
    0;
}


.stock-in-eyebrow {
  display:
    block;

  margin-bottom:
    5px;

  color:
    var(
      --stock-in-text-muted
    );

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}


.stock-in-brand__content
h1 {
  margin:
    0;

  overflow:
    hidden;

  color:
    var(
      --stock-in-text-strong
    );

  font-size:
    clamp(
      23px,
      1.8vw,
      28px
    );

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    -0.045em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.stock-in-brand__content
p {
  max-width:
    860px;

  margin:
    7px
    0
    0;

  color:
    var(
      --stock-in-text-muted
    );

  font-size:
    12px;

  font-weight:
    500;

  line-height:
    1.45;
}


/* =========================================================
   08 · HEADER SIDE
   ========================================================= */

.stock-in-head__side {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;

  min-width:
    0;
}


.stock-in-update {
  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  min-width:
    176px;

  min-height:
    44px;

  padding:
    5px 9px;

  border:
    1px
    solid
    var(
      --stock-in-border
    );

  border-radius:
    var(
      --stock-in-radius-sm
    );

  background:
    var(
      --stock-in-surface-soft
    );
}


.stock-in-update__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    32px;

  height:
    32px;

  border:
    1px
    solid
    var(
      --stock-in-border
    );

  border-radius:
    7px;

  background:
    var(
      --stock-in-surface
    );

  color:
    var(
      --stock-in-text-muted
    );
}


.stock-in-update__icon
.icon,
.stock-in-update__icon
svg {
  width:
    14px;

  height:
    14px;
}


.stock-in-update
small {
  display:
    block;

  color:
    var(
      --stock-in-text-muted
    );

  font-size:
    9px;

  font-weight:
    700;
}


.stock-in-update
strong {
  display:
    block;

  margin-top:
    3px;

  color:
    var(
      --stock-in-text
    );

  font-size:
    11px;

  font-weight:
    750;
}


/* =========================================================
   09 · BOTONES
   ========================================================= */

.stock-in-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}


.stock-in-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  min-width:
    0;

  height:
    38px;

  min-height:
    38px;

  padding:
    0 12px;

  border:
    1px
    solid
    var(
      --stock-in-border-strong
    );

  border-radius:
    var(
      --stock-in-radius-sm
    );

  outline:
    none;

  background:
    var(
      --stock-in-surface
    );

  color:
    var(
      --stock-in-text
    );

  font-size:
    11px;

  font-weight:
    700;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;

  box-shadow:
    none;

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


.stock-in-btn:hover:not(:disabled) {
  border-color:
    var(
      --stock-in-border-dark
    );

  background:
    var(
      --stock-in-hover
    );

  transform:
    translateY(
      -1px
    );
}


.stock-in-btn:active:not(:disabled) {
  transform:
    scale(
      0.98
    );
}


.stock-in-btn:disabled {
  opacity:
    0.42;

  cursor:
    not-allowed;
}


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

  height:
    14px;
}


.stock-in-btn--primary {
  border-color:
    var(
      --stock-in-text-strong
    );

  background:
    var(
      --stock-in-text-strong
    );

  color:
    var(
      --stock-in-surface
    );
}


.stock-in-btn--secondary {
  background:
    var(
      --stock-in-surface-soft
    );
}


/* =========================================================
   10 · MÉTRICAS
   ========================================================= */

.stock-in-metrics {
  display:
    grid;

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

  gap:
    0;
}


.stock-in-metric {
  position:
    relative;

  display:
    grid;

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

  grid-template-rows:
    auto
    auto
    auto;

  align-items:
    center;

  gap:
    2px 9px;

  min-width:
    0;

  min-height:
    88px;

  padding:
    10px 11px;

  border-right:
    1px
    solid
    var(
      --stock-in-border-strong
    );

  background:
    var(
      --stock-in-surface
    );

  overflow:
    hidden;

  transition:
    background
      var(
        --stock-in-transition-fast
      );
}


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


.stock-in-metric:hover {
  background:
    var(
      --stock-in-hover
    );
}


.stock-in-metric::before {
  content:
    "";

  position:
    absolute;

  top:
    10px;

  bottom:
    10px;

  left:
    0;

  width:
    2px;

  background:
    var(
      --stock-in-text
    );

  opacity:
    0.20;
}


.stock-in-metric__head {
  display:
    contents;
}


.stock-in-metric__icon {
  grid-column:
    1;

  grid-row:
    1 /
    span 3;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    36px;

  height:
    36px;

  border:
    1px
    solid
    var(
      --stock-in-border
    );

  border-radius:
    8px;

  background:
    var(
      --stock-in-surface-soft
    );

  color:
    var(
      --stock-in-text-soft
    );
}


.stock-in-metric__icon
.icon,
.stock-in-metric__icon
svg {
  width:
    16px;

  height:
    16px;
}


.stock-in-metric__label {
  grid-column:
    2;

  color:
    var(
      --stock-in-text-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.stock-in-metric__value {
  grid-column:
    2;

  color:
    var(
      --stock-in-text-strong
    );

  font-size:
    23px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    -0.045em;
}


.stock-in-metric__detail {
  grid-column:
    2;

  color:
    var(
      --stock-in-text-muted
    );

  font-size:
    9px;

  font-weight:
    500;

  line-height:
    1.2;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   11 · CONTROLES
   ========================================================= */

.stock-in-controls {
  display:
    grid;

  grid-template-rows:
    auto
    auto
    auto;

  gap:
    0;

  padding:
    0;
}


.stock-in-controls__heading {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-width:
    0;

  padding:
    10px 11px;

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

  background:
    var(
      --stock-in-surface-soft
    );
}


.stock-in-controls__heading
> div:first-child {
  min-width:
    0;
}


.stock-in-controls__heading
> div:first-child
> span {
  display:
    block;

  color:
    var(
      --stock-in-text-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.stock-in-controls__heading
h2 {
  margin:
    4px
    0
    0;

  color:
    var(
      --stock-in-text
    );

  font-size:
    15px;

  font-weight:
    800;
}


.stock-in-controls__heading
p {
  margin:
    5px
    0
    0;

  color:
    var(
      --stock-in-text-muted
    );

  font-size:
    10px;

  font-weight:
    500;

  line-height:
    1.4;
}


/* =========================================================
   12 · RESULTADOS
   ========================================================= */

.stock-in-results-summary {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  min-height:
    36px;

  padding:
    0 10px;

  border:
    1px
    solid
    var(
      --stock-in-border-strong
    );

  border-radius:
    7px;

  background:
    var(
      --stock-in-surface
    );
}


.stock-in-results-summary
span {
  color:
    var(
      --stock-in-text-muted
    );

  font-size:
    9px;

  font-weight:
    600;
}


.stock-in-results-summary
strong {
  color:
    var(
      --stock-in-text
    );

  font-size:
    13px;

  font-weight:
    800;
}


/* =========================================================
   13 · GRID FILTROS
   ========================================================= */

.stock-in-filter-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      245px,
      1.5fr
    )
    minmax(
      135px,
      0.7fr
    )
    minmax(
      135px,
      0.7fr
    )
    minmax(
      145px,
      0.8fr
    )
    minmax(
      145px,
      0.8fr
    )
    minmax(
      130px,
      0.7fr
    )
    auto;

  align-items:
    end;

  gap:
    7px;

  width:
    100%;

  min-width:
    0;

  padding:
    10px 11px;
}


.stock-in-search,
.stock-in-field {
  display:
    grid;

  gap:
    5px;

  min-width:
    0;
}


.stock-in-field-label {
  color:
    var(
      --stock-in-text-muted
    );

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1;
}


/* =========================================================
   14 · INPUT / SELECT
   ========================================================= */

.stock-in-search__control,
.stock-in-select-control {
  position:
    relative;

  display:
    grid;

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

  align-items:
    center;

  width:
    100%;

  min-width:
    0;

  height:
    40px;

  border:
    1px
    solid
    var(
      --stock-in-border-strong
    );

  border-radius:
    var(
      --stock-in-radius-sm
    );

  background:
    var(
      --stock-in-surface
    );

  color:
    var(
      --stock-in-text-muted
    );

  overflow:
    hidden;

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


.stock-in-search__control:hover,
.stock-in-select-control:hover {
  border-color:
    var(
      --stock-in-border-dark
    );
}


.stock-in-search__control:focus-within,
.stock-in-select-control:focus-within {
  border-color:
    var(
      --stock-in-text
    );

  background:
    var(
      --stock-in-surface-soft
    );
}


.stock-in-search__control
> .icon,
.stock-in-search__control
> svg,
.stock-in-select-control
> .icon,
.stock-in-select-control
> svg {
  justify-self:
    center;

  width:
    14px;

  height:
    14px;
}


.stock-in-search__control
input,
.stock-in-select-control
select {
  width:
    100%;

  min-width:
    0;

  height:
    100%;

  padding:
    0 7px;

  border:
    0;

  outline:
    none;

  background:
    transparent;

  color:
    var(
      --stock-in-text
    );

  font-size:
    11px;

  font-weight:
    600;
}


.stock-in-search__control
input::placeholder {
  color:
    var(
      --stock-in-text-muted-2
    );
}


.stock-in-search__control
input[type="date"] {
  color-scheme:
    light;
}


html[data-theme="dark"]
.stock-in-search__control
input[type="date"],
body.dark
.stock-in-search__control
input[type="date"],
.dark
.stock-in-search__control
input[type="date"] {
  color-scheme:
    dark;
}


.stock-in-select-control
select {
  appearance:
    none;

  -webkit-appearance:
    none;

  padding-right:
    24px;

  cursor:
    pointer;
}


.stock-in-select-control__chevron {
  position:
    absolute;

  right:
    8px;

  pointer-events:
    none;
}


/* =========================================================
   15 · LIMPIAR BÚSQUEDA
   ========================================================= */

.stock-in-search__clear {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    28px;

  height:
    28px;

  padding:
    0;

  border:
    0;

  border-radius:
    6px;

  background:
    transparent;

  color:
    var(
      --stock-in-text-muted
    );

  cursor:
    pointer;
}


.stock-in-search__clear:hover {
  background:
    var(
      --stock-in-hover
    );

  color:
    var(
      --stock-in-text
    );
}


.stock-in-search__clear[hidden] {
  display:
    none;
}


/* =========================================================
   16 · ACCIONES DE FILTROS
   ========================================================= */

.stock-in-filter-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  min-width:
    0;
}


.stock-in-filter-actions
.stock-in-btn {
  height:
    40px;

  min-height:
    40px;
}


/* =========================================================
   17 · FILTROS ACTIVOS
   ========================================================= */

.stock-in-filter-status {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  min-width:
    0;

  min-height:
    41px;

  padding:
    6px 11px;

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

  background:
    var(
      --stock-in-surface-soft
    );
}


.stock-in-filter-status__content {
  flex:
    1;

  min-width:
    0;
}


.stock-in-filter-status__empty {
  color:
    var(
      --stock-in-text-muted
    );

  font-size:
    10px;

  font-weight:
    500;
}


.stock-in-filter-chips {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;

  min-width:
    0;
}


.stock-in-filter-chip {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  min-height:
    29px;

  padding:
    0 9px;

  border:
    1px
    solid
    var(
      --stock-in-border-strong
    );

  border-radius:
    999px;

  background:
    var(
      --stock-in-surface
    );

  color:
    var(
      --stock-in-text-soft
    );

  cursor:
    pointer;

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


.stock-in-filter-chip:hover {
  border-color:
    var(
      --stock-in-border-dark
    );

  background:
    var(
      --stock-in-hover
    );

  transform:
    translateY(
      -1px
    );
}


.stock-in-filter-chip
span {
  color:
    var(
      --stock-in-text-muted
    );

  font-size:
    8px;

  font-weight:
    700;

  text-transform:
    uppercase;
}


.stock-in-filter-chip
strong {
  max-width:
    190px;

  overflow:
    hidden;

  font-size:
    10px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.stock-in-filter-chip
.icon,
.stock-in-filter-chip
svg {
  width:
    11px;

  height:
    11px;
}


.stock-in-filter-counter {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  flex:
    0 0 auto;

  color:
    var(
      --stock-in-text-muted
    );

  font-size:
    9px;

  font-weight:
    600;

  white-space:
    nowrap;
}


.stock-in-filter-counter
strong {
  color:
    var(
      --stock-in-text
    );

  font-size:
    10px;

  font-weight:
    800;
}


/* =========================================================
   18 · PANEL TABLA
   ========================================================= */

.stock-in-panel {
  display:
    grid;

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

  min-width:
    0;
}


.stock-in-panel__head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-width:
    0;

  padding:
    10px 11px;

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

  background:
    var(
      --stock-in-surface-soft
    );
}


.stock-in-panel__title {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  min-width:
    0;
}


.stock-in-panel__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 34px;

  width:
    34px;

  height:
    34px;

  border:
    1px
    solid
    var(
      --stock-in-border
    );

  border-radius:
    8px;

  background:
    var(
      --stock-in-surface
    );

  color:
    var(
      --stock-in-text-soft
    );
}


.stock-in-panel__title
> div
> span {
  display:
    block;

  color:
    var(
      --stock-in-text-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.075em;

  text-transform:
    uppercase;
}


.stock-in-panel__title
h2 {
  margin:
    4px
    0
    0;

  color:
    var(
      --stock-in-text
    );

  font-size:
    14px;

  font-weight:
    800;
}


.stock-in-panel__meta {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  min-height:
    32px;

  padding:
    0 8px;

  border:
    1px
    solid
    var(
      --stock-in-border
    );

  border-radius:
    7px;

  background:
    var(
      --stock-in-surface
    );

  color:
    var(
      --stock-in-text-muted
    );

  font-size:
    9px;

  font-weight:
    600;
}


.stock-in-panel__meta
strong {
  color:
    var(
      --stock-in-text
    );

  font-size:
    10px;

  font-weight:
    800;
}


/* =========================================================
   19 · TABLE WRAP
   ========================================================= */

.stock-in-table-wrap {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    visible;

  overscroll-behavior-x:
    contain;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(
      --stock-in-border-dark
    )
    transparent;
}


.stock-in-table-wrap::-webkit-scrollbar {
  width:
    8px;

  height:
    8px;
}


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


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

  border-radius:
    999px;

  background:
    var(
      --stock-in-border-dark
    );

  background-clip:
    padding-box;
}


/* =========================================================
   20 · TABLA
   ========================================================= */

.stock-in-table {
  width:
    max-content;

  min-width:
    100%;

  border-collapse:
    separate;

  border-spacing:
    0;

  table-layout:
    fixed;

  background:
    var(
      --stock-in-surface
    );

  color:
    var(
      --stock-in-text
    );
}


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


.stock-in-table
th,
.stock-in-table
td {
  position:
    relative;

  min-width:
    0;

  padding:
    8px 9px;

  border-right:
    1px
    solid
    var(
      --stock-in-border-soft
    );

  border-bottom:
    1px
    solid
    var(
      --stock-in-border
    );

  vertical-align:
    middle;
}


.stock-in-table
th:last-child,
.stock-in-table
td:last-child {
  border-right:
    0;
}


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


.stock-in-table
tbody
tr {
  background:
    var(
      --stock-in-surface
    );

  transition:
    background
      var(
        --stock-in-transition-fast
      );
}


.stock-in-table
tbody
tr:hover {
  background:
    var(
      --stock-in-hover
    );
}


/* =========================================================
   21 · TABLE HEADER
   ========================================================= */

.stock-in-th {
  position:
    relative;

  height:
    40px;

  padding:
    0 !important;

  background:
    var(
      --stock-in-surface-soft
    );

  color:
    var(
      --stock-in-text-soft
    );

  user-select:
    none;
}


.stock-in-th.is-sorted {
  background:
    var(
      --stock-in-surface-muted
    );

  color:
    var(
      --stock-in-text
    );
}


.stock-in-th__sort {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    7px;

  width:
    100%;

  height:
    100%;

  padding:
    0 10px;

  border:
    0;

  outline:
    none;

  background:
    transparent;

  color:
    inherit;

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1;

  cursor:
    pointer;
}


.stock-in-th__sort
span {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.stock-in-th__sort
.icon,
.stock-in-th__sort
svg {
  width:
    12px;

  height:
    12px;

  opacity:
    0.55;
}


.stock-in-th.is-sorted
.stock-in-th__sort
.icon,
.stock-in-th.is-sorted
.stock-in-th__sort
svg {
  opacity:
    1;
}


/* =========================================================
   22 · COLUMN RESIZE
   ========================================================= */

.stock-in-th__resize {
  position:
    absolute;

  top:
    6px;

  right:
    -3px;

  z-index:
    5;

  width:
    7px;

  height:
    calc(
      100% - 12px
    );

  border-radius:
    999px;

  cursor:
    col-resize;

  touch-action:
    none;
}


.stock-in-th__resize::after {
  content:
    "";

  position:
    absolute;

  top:
    0;

  bottom:
    0;

  left:
    3px;

  width:
    1px;

  background:
    var(
      --stock-in-border-strong
    );

  opacity:
    0;
}


.stock-in-th__resize:hover::after,
body.is-resizing-stock-in-column
.stock-in-th__resize::after {
  opacity:
    1;

  background:
    var(
      --stock-in-text-muted
    );
}


body.is-resizing-stock-in-column {
  cursor:
    col-resize !important;

  user-select:
    none !important;
}


/* =========================================================
   FIN PARTE 1 DE 2
   ========================================================= *//* =========================================================
   WIRTZ HUB · EVENTOS · ENTRADAS DE STOCK
   CSS COMPLETO
   PARTE 2 DE 2
   ========================================================= */


/* =========================================================
   23 · CELDAS
   ========================================================= */

.stock-in-table
td {
  height:
    52px;

  color:
    var(
      --stock-in-text-soft
    );

  font-size:
    10px;

  font-weight:
    550;

  line-height:
    1.3;

  overflow:
    hidden;
}


.stock-in-table
td.is-center,
.stock-in-th.is-center {
  text-align:
    center;
}


.stock-in-cell {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;
}


.stock-in-cell__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 26px;

  width:
    26px;

  height:
    26px;

  border:
    1px
    solid
    var(
      --stock-in-border
    );

  border-radius:
    6px;

  background:
    var(
      --stock-in-surface-soft
    );

  color:
    var(
      --stock-in-text-muted
    );
}


.stock-in-cell__icon
.icon,
.stock-in-cell__icon
svg {
  width:
    12px;

  height:
    12px;
}


.stock-in-cell--date
strong {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(
      --stock-in-text
    );

  font-size:
    10px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   24 · SKU
   ========================================================= */

.stock-in-sku {
  display:
    inline-flex;

  align-items:
    center;

  max-width:
    100%;

  min-height:
    26px;

  padding:
    0 7px;

  border:
    1px
    solid
    var(
      --stock-in-border
    );

  border-radius:
    6px;

  background:
    var(
      --stock-in-surface-soft
    );

  color:
    var(
      --stock-in-text
    );

  font-family:
    "DM Mono",
    "JetBrains Mono",
    "Roboto Mono",
    monospace !important;

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   25 · PRODUCTO
   ========================================================= */

.stock-in-product {
  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;
}


.stock-in-product__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    30px;

  height:
    30px;

  border:
    1px
    solid
    var(
      --stock-in-border
    );

  border-radius:
    7px;

  background:
    var(
      --stock-in-surface-soft
    );

  color:
    var(
      --stock-in-text-muted
    );
}


.stock-in-product__icon
.icon,
.stock-in-product__icon
svg {
  width:
    14px;

  height:
    14px;
}


.stock-in-product__body {
  min-width:
    0;
}


.stock-in-product__body
strong {
  display:
    block;

  overflow:
    hidden;

  color:
    var(
      --stock-in-text
    );

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.stock-in-product__body
small {
  display:
    block;

  margin-top:
    3px;

  overflow:
    hidden;

  color:
    var(
      --stock-in-text-muted
    );

  font-size:
    8px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   26 · CANTIDAD
   ========================================================= */

.stock-in-qty {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    3px;

  min-width:
    58px;

  min-height:
    28px;

  padding:
    0 7px;

  border:
    1px
    solid
    var(
      --stock-in-success-line
    );

  border-radius:
    6px;

  background:
    var(
      --stock-in-success-soft
    );

  color:
    var(
      --stock-in-success
    );

  font-size:
    11px;

  font-weight:
    800;
}


.stock-in-qty
.icon,
.stock-in-qty
svg {
  width:
    11px;

  height:
    11px;
}


/* =========================================================
   27 · TEXTO / MOTIVO
   ========================================================= */

.stock-in-text-value {
  display:
    block;

  width:
    100%;

  overflow:
    hidden;

  color:
    var(
      --stock-in-text-soft
    );

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   28 · CANAL
   ========================================================= */

.stock-in-channel {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  max-width:
    100%;

  min-height:
    27px;

  padding:
    0 7px;

  border:
    1px
    solid
    var(
      --stock-in-border
    );

  border-radius:
    6px;

  background:
    var(
      --stock-in-surface-soft
    );

  color:
    var(
      --stock-in-text-soft
    );

  font-size:
    9px;

  font-weight:
    700;

  overflow:
    hidden;

  white-space:
    nowrap;
}


.stock-in-channel
.icon,
.stock-in-channel
svg {
  width:
    11px;

  height:
    11px;

  min-width:
    11px;
}


/* =========================================================
   29 · ORIGEN BASE
   ========================================================= */

.stock-in-origin {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  max-width:
    100%;

  min-height:
    28px;

  padding:
    0 8px;

  border:
    1px
    solid
    var(
      --stock-in-border
    );

  border-radius:
    999px;

  background:
    var(
      --stock-in-surface-soft
    );

  color:
    var(
      --stock-in-text-soft
    );

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1;

  overflow:
    hidden;

  white-space:
    nowrap;
}


.stock-in-origin
span {
  overflow:
    hidden;

  text-overflow:
    ellipsis;
}


.stock-in-origin
.icon,
.stock-in-origin
svg {
  width:
    11px;

  height:
    11px;

  min-width:
    11px;
}


/* =========================================================
   30 · ORIGEN · ETIQUETAS
   ========================================================= */

.stock-in-origin.is-labels {
  border-color:
    rgba(
      59,
      130,
      246,
      0.28
    );

  background:
    rgba(
      59,
      130,
      246,
      0.07
    );

  color:
    #2563eb;
}


html[data-theme="dark"]
.stock-in-origin.is-labels,
body.dark
.stock-in-origin.is-labels,
.dark
.stock-in-origin.is-labels {
  border-color:
    rgba(
      96,
      165,
      250,
      0.25
    );

  background:
    rgba(
      96,
      165,
      250,
      0.08
    );

  color:
    #93c5fd;
}


/* =========================================================
   31 · ORIGEN · MANUAL
   ========================================================= */

.stock-in-origin.is-manual {
  border-color:
    rgba(
      82,
      82,
      82,
      0.25
    );

  background:
    rgba(
      82,
      82,
      82,
      0.07
    );

  color:
    #404040;
}


html[data-theme="dark"]
.stock-in-origin.is-manual,
body.dark
.stock-in-origin.is-manual,
.dark
.stock-in-origin.is-manual {
  border-color:
    rgba(
      212,
      212,
      212,
      0.20
    );

  background:
    rgba(
      212,
      212,
      212,
      0.06
    );

  color:
    #d4d4d4;
}


/* =========================================================
   32 · ORIGEN · CSV
   ========================================================= */

.stock-in-origin.is-bulk {
  border-color:
    rgba(
      8,
      145,
      178,
      0.28
    );

  background:
    rgba(
      8,
      145,
      178,
      0.07
    );

  color:
    #0e7490;
}


html[data-theme="dark"]
.stock-in-origin.is-bulk,
body.dark
.stock-in-origin.is-bulk,
.dark
.stock-in-origin.is-bulk {
  border-color:
    rgba(
      34,
      211,
      238,
      0.24
    );

  background:
    rgba(
      34,
      211,
      238,
      0.07
    );

  color:
    #67e8f9;
}


/* =========================================================
   33 · ORIGEN · INVENTARIO
   ========================================================= */

.stock-in-origin.is-inventory {
  border-color:
    var(
      --stock-in-border-strong
    );

  background:
    var(
      --stock-in-surface-muted
    );

  color:
    var(
      --stock-in-text-soft
    );
}


/* =========================================================
   34 · ORIGEN · COMPRAS
   ========================================================= */

.stock-in-origin.is-purchases {
  border-color:
    rgba(
      124,
      58,
      237,
      0.28
    );

  background:
    rgba(
      124,
      58,
      237,
      0.07
    );

  color:
    #7c3aed;
}


html[data-theme="dark"]
.stock-in-origin.is-purchases,
body.dark
.stock-in-origin.is-purchases,
.dark
.stock-in-origin.is-purchases {
  border-color:
    rgba(
      167,
      139,
      250,
      0.26
    );

  background:
    rgba(
      167,
      139,
      250,
      0.08
    );

  color:
    #c4b5fd;
}


/* =========================================================
   35 · ORIGEN · DEVOLUCIONES
   ========================================================= */

.stock-in-origin.is-returns {
  border-color:
    rgba(
      217,
      119,
      6,
      0.28
    );

  background:
    rgba(
      217,
      119,
      6,
      0.07
    );

  color:
    #b45309;
}


html[data-theme="dark"]
.stock-in-origin.is-returns,
body.dark
.stock-in-origin.is-returns,
.dark
.stock-in-origin.is-returns {
  border-color:
    rgba(
      251,
      191,
      36,
      0.25
    );

  background:
    rgba(
      251,
      191,
      36,
      0.08
    );

  color:
    #fcd34d;
}


/* =========================================================
   36 · ORIGEN · REPOSICIÓN
   ========================================================= */

.stock-in-origin.is-restock {
  border-color:
    rgba(
      5,
      150,
      105,
      0.28
    );

  background:
    rgba(
      5,
      150,
      105,
      0.07
    );

  color:
    #047857;
}


html[data-theme="dark"]
.stock-in-origin.is-restock,
body.dark
.stock-in-origin.is-restock,
.dark
.stock-in-origin.is-restock {
  border-color:
    rgba(
      52,
      211,
      153,
      0.25
    );

  background:
    rgba(
      52,
      211,
      153,
      0.08
    );

  color:
    #6ee7b7;
}


/* =========================================================
   37 · ORIGEN NEUTRAL
   ========================================================= */

.stock-in-origin.is-neutral {
  border-color:
    var(
      --stock-in-border
    );

  background:
    var(
      --stock-in-surface-soft
    );

  color:
    var(
      --stock-in-text-muted
    );
}


/* =========================================================
   38 · USUARIO
   ========================================================= */

.stock-in-user {
  display:
    grid;

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

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;
}


.stock-in-user__avatar {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    28px;

  height:
    28px;

  border:
    1px
    solid
    var(
      --stock-in-border-strong
    );

  border-radius:
    50%;

  background:
    var(
      --stock-in-surface-soft
    );

  color:
    var(
      --stock-in-text
    );

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.03em;
}


.stock-in-user
strong {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(
      --stock-in-text
    );

  font-size:
    10px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   39 · ESTADO
   ========================================================= */

.stock-in-status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  min-height:
    27px;

  padding:
    0 8px;

  border:
    1px
    solid
    var(
      --stock-in-border
    );

  border-radius:
    999px;

  background:
    var(
      --stock-in-surface-soft
    );

  color:
    var(
      --stock-in-text-soft
    );

  font-size:
    9px;

  font-weight:
    750;

  white-space:
    nowrap;
}


.stock-in-status
.icon,
.stock-in-status
svg {
  width:
    11px;

  height:
    11px;
}


.stock-in-status.is-done {
  border-color:
    var(
      --stock-in-success-line
    );

  background:
    var(
      --stock-in-success-soft
    );

  color:
    var(
      --stock-in-success
    );
}


.stock-in-status.is-pending {
  border-color:
    var(
      --stock-in-warning-line
    );

  background:
    var(
      --stock-in-warning-soft
    );

  color:
    var(
      --stock-in-warning
    );
}


.stock-in-status.is-error {
  border-color:
    var(
      --stock-in-danger-line
    );

  background:
    var(
      --stock-in-danger-soft
    );

  color:
    var(
      --stock-in-danger
    );
}


.stock-in-status.is-neutral {
  border-color:
    var(
      --stock-in-border
    );

  background:
    var(
      --stock-in-surface-soft
    );

  color:
    var(
      --stock-in-text-muted
    );
}


/* =========================================================
   40 · OBSERVACIÓN
   ========================================================= */

.stock-in-observation {
  display:
    -webkit-box;

  width:
    100%;

  overflow:
    hidden;

  color:
    var(
      --stock-in-text-muted
    );

  font-size:
    9px;

  font-weight:
    500;

  line-height:
    1.35;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;
}


/* =========================================================
   41 · ESTADO DE TABLA
   ========================================================= */

.stock-in-table-state-row:hover {
  background:
    transparent !important;
}


.stock-in-table-state-cell {
  height:
    260px !important;

  padding:
    0 !important;
}


.stock-in-table-state {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    240px;

  padding:
    28px;

  text-align:
    center;
}


.stock-in-table-state__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    42px;

  height:
    42px;

  border:
    1px
    solid
    var(
      --stock-in-border
    );

  border-radius:
    10px;

  background:
    var(
      --stock-in-surface-soft
    );

  color:
    var(
      --stock-in-text-muted
    );
}


.stock-in-table-state__icon
.icon,
.stock-in-table-state__icon
svg {
  width:
    18px;

  height:
    18px;
}


.stock-in-table-state
strong {
  color:
    var(
      --stock-in-text
    );

  font-size:
    13px;

  font-weight:
    800;
}


.stock-in-table-state
p {
  max-width:
    430px;

  margin:
    0;

  color:
    var(
      --stock-in-text-muted
    );

  font-size:
    10px;

  font-weight:
    500;

  line-height:
    1.45;
}


/* =========================================================
   42 · FOOTER PANEL
   ========================================================= */

.stock-in-panel__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-height:
    40px;

  padding:
    7px 11px;

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

  background:
    var(
      --stock-in-surface-soft
    );

  color:
    var(
      --stock-in-text-muted
    );

  font-size:
    9px;

  font-weight:
    500;
}


.stock-in-panel__footer
span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  min-width:
    0;
}


.stock-in-panel__footer
.icon,
.stock-in-panel__footer
svg {
  width:
    11px;

  height:
    11px;
}


/* =========================================================
   43 · TOAST
   ========================================================= */

.stock-in-toast {
  --stock-in-surface:
    #ffffff;

  --stock-in-surface-soft:
    #fafafa;

  --stock-in-text:
    #171717;

  --stock-in-text-muted:
    #737373;

  --stock-in-border:
    rgba(
      10,
      10,
      10,
      0.11
    );

  --stock-in-border-strong:
    rgba(
      10,
      10,
      10,
      0.18
    );

  --stock-in-success:
    #15803d;

  --stock-in-success-soft:
    rgba(
      21,
      128,
      61,
      0.08
    );

  --stock-in-success-line:
    rgba(
      21,
      128,
      61,
      0.28
    );

  --stock-in-warning:
    #a16207;

  --stock-in-warning-soft:
    rgba(
      161,
      98,
      7,
      0.08
    );

  --stock-in-warning-line:
    rgba(
      161,
      98,
      7,
      0.28
    );

  --stock-in-danger:
    #c92a2a;

  --stock-in-danger-soft:
    rgba(
      201,
      42,
      42,
      0.075
    );

  --stock-in-danger-line:
    rgba(
      201,
      42,
      42,
      0.28
    );


  position:
    fixed;

  right:
    18px;

  bottom:
    18px;

  z-index:
    1900;

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

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

  min-height:
    60px;

  padding:
    10px;

  border:
    1px
    solid
    var(
      --stock-in-border-strong
    );

  border-radius:
    10px;

  background:
    var(
      --stock-in-surface
    );

  color:
    var(
      --stock-in-text
    );

  box-shadow:
    none;

  opacity:
    0;

  pointer-events:
    none;

  transform:
    translateY(
      8px
    );

  transition:
    opacity
      160ms
      ease,
    transform
      180ms
      ease;
}


html[data-theme="dark"]
.stock-in-toast,
body.dark
.stock-in-toast,
.dark
.stock-in-toast {
  --stock-in-surface:
    #080808;

  --stock-in-surface-soft:
    #0d0d0d;

  --stock-in-text:
    #eeeeee;

  --stock-in-text-muted:
    #8a8a8a;

  --stock-in-border:
    rgba(
      255,
      255,
      255,
      0.10
    );

  --stock-in-border-strong:
    rgba(
      255,
      255,
      255,
      0.16
    );

  --stock-in-success:
    #4ade80;

  --stock-in-success-soft:
    rgba(
      74,
      222,
      128,
      0.08
    );

  --stock-in-success-line:
    rgba(
      74,
      222,
      128,
      0.25
    );

  --stock-in-warning:
    #facc15;

  --stock-in-warning-soft:
    rgba(
      250,
      204,
      21,
      0.08
    );

  --stock-in-warning-line:
    rgba(
      250,
      204,
      21,
      0.25
    );

  --stock-in-danger:
    #f87171;

  --stock-in-danger-soft:
    rgba(
      248,
      113,
      113,
      0.08
    );

  --stock-in-danger-line:
    rgba(
      248,
      113,
      113,
      0.25
    );
}


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

  pointer-events:
    auto;

  transform:
    translateY(
      0
    );
}


.stock-in-toast__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    34px;

  height:
    34px;

  border:
    1px
    solid
    var(
      --stock-in-border
    );

  border-radius:
    8px;

  background:
    var(
      --stock-in-surface-soft
    );
}


.stock-in-toast__body {
  min-width:
    0;
}


.stock-in-toast__body
strong {
  display:
    block;

  color:
    inherit;

  font-size:
    10px;

  font-weight:
    800;
}


.stock-in-toast__body
p {
  margin:
    3px
    0
    0;

  color:
    var(
      --stock-in-text-muted
    );

  font-size:
    9px;

  font-weight:
    500;

  line-height:
    1.35;
}


.stock-in-toast.is-success
.stock-in-toast__icon {
  border-color:
    var(
      --stock-in-success-line
    );

  background:
    var(
      --stock-in-success-soft
    );

  color:
    var(
      --stock-in-success
    );
}


.stock-in-toast.is-warning
.stock-in-toast__icon {
  border-color:
    var(
      --stock-in-warning-line
    );

  background:
    var(
      --stock-in-warning-soft
    );

  color:
    var(
      --stock-in-warning
    );
}


.stock-in-toast.is-error
.stock-in-toast__icon {
  border-color:
    var(
      --stock-in-danger-line
    );

  background:
    var(
      --stock-in-danger-soft
    );

  color:
    var(
      --stock-in-danger
    );
}


/* =========================================================
   44 · SPINNER
   ========================================================= */

.is-spinning {
  animation:
    stockInSpin
    760ms
    linear
    infinite;
}


/* =========================================================
   45 · RESPONSIVE · 1500
   ========================================================= */

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


  .stock-in-metric {
    border-bottom:
      1px
      solid
      var(
        --stock-in-border
      );
  }


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


  .stock-in-filter-grid {
    grid-template-columns:
      minmax(
        260px,
        1.4fr
      )
      repeat(
        3,
        minmax(
          135px,
          0.8fr
        )
      );
  }


  .stock-in-filter-actions {
    grid-column:
      auto /
      span 2;
  }
}


/* =========================================================
   46 · RESPONSIVE · 1180
   ========================================================= */

@media (
  max-width:
    1180px
) {
  .stock-in-head {
    grid-template-columns:
      1fr;

    align-items:
      start;
  }


  .stock-in-head__side {
    justify-content:
      space-between;
  }


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


  .stock-in-search {
    grid-column:
      span 3;
  }


  .stock-in-filter-actions {
    grid-column:
      span 3;

    justify-content:
      flex-end;
  }
}


/* =========================================================
   47 · RESPONSIVE · 900
   ========================================================= */

@media (
  max-width:
    900px
) {
  .stock-in-page {
    padding:
      7px;

    gap:
      7px;
  }


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


  .stock-in-metric {
    border-right:
      1px
      solid
      var(
        --stock-in-border
      );

    border-bottom:
      1px
      solid
      var(
        --stock-in-border
      );
  }


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


  .stock-in-head__side,
  .stock-in-actions {
    flex-wrap:
      wrap;
  }


  .stock-in-update {
    flex:
      1;

    min-width:
      180px;
  }
}


/* =========================================================
   48 · RESPONSIVE · 700
   ========================================================= */

@media (
  max-width:
    700px
) {
  .stock-in-head {
    padding:
      11px;
  }


  .stock-in-head__main {
    align-items:
      flex-start;
  }


  .stock-in-brand__content
  h1 {
    white-space:
      normal;
  }


  .stock-in-brand__content
  p {
    font-size:
      10px;
  }


  .stock-in-head__side {
    display:
      grid;

    grid-template-columns:
      1fr;

    width:
      100%;
  }


  .stock-in-actions {
    display:
      grid;

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

    width:
      100%;
  }


  .stock-in-actions
  .stock-in-btn:last-child {
    grid-column:
      1 /
      -1;
  }


  .stock-in-update {
    width:
      100%;
  }


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


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


  .stock-in-filter-actions {
    grid-column:
      1 /
      -1;
  }


  .stock-in-filter-actions
  .stock-in-btn {
    flex:
      1;
  }


  .stock-in-filter-status {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .stock-in-panel__head {
    flex-direction:
      column;

    align-items:
      stretch;
  }
}


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

@media (
  max-width:
    520px
) {
  .stock-in-page {
    padding:
      5px;
  }


  .stock-in-head {
    gap:
      10px;

    border-radius:
      9px;
  }


  .stock-in-brand__icon {
    flex-basis:
      38px;

    width:
      38px;

    height:
      38px;
  }


  .stock-in-brand__content
  h1 {
    font-size:
      21px;
  }


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


  .stock-in-metric,
  .stock-in-metric:nth-child(
    2n
  ),
  .stock-in-metric:nth-child(
    4n
  ) {
    border-right:
      0;

    border-bottom:
      1px
      solid
      var(
        --stock-in-border
      );
  }


  .stock-in-metric:last-child {
    border-bottom:
      0;
  }


  .stock-in-filter-grid {
    grid-template-columns:
      1fr;
  }


  .stock-in-search,
  .stock-in-filter-actions {
    grid-column:
      auto;
  }


  .stock-in-filter-actions {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .stock-in-controls__heading {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .stock-in-results-summary {
    width:
      100%;

    justify-content:
      space-between;
  }


  .stock-in-panel__footer {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .stock-in-toast {
    right:
      7px;

    bottom:
      7px;

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


/* =========================================================
   50 · ANIMACIONES
   ========================================================= */

@keyframes stockInPageIn {
  from {
    opacity:
      0;

    transform:
      translateY(
        4px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


@keyframes stockInSpin {
  from {
    transform:
      rotate(
        0deg
      );
  }

  to {
    transform:
      rotate(
        360deg
      );
  }
}


/* =========================================================
   51 · REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {
  .stock-in-page,
  .stock-in-btn,
  .stock-in-origin,
  .stock-in-filter-chip,
  .stock-in-toast {
    animation:
      none !important;

    transition:
      none !important;
  }


  .is-spinning {
    animation:
      none !important;
  }
}


/* =========================================================
   52 · PRINT
   ========================================================= */

@media print {
  body:has(.stock-in-page)
  .sidebar,

  body:has(.stock-in-page)
  .topbar,

  body:has(.stock-in-page)
  .footer,

  body:has(.stock-in-page)
  .rightbar,

  .stock-in-actions,

  .stock-in-filter-actions {
    display:
      none !important;
  }


  .stock-in-page {
    padding:
      0;

    background:
      #ffffff;

    color:
      #000000;
  }


  .stock-in-head,
  .stock-in-controls,
  .stock-in-panel,
  .stock-in-metrics {
    border-color:
      #d4d4d4;

    border-radius:
      0;

    background:
      #ffffff;
  }


  .stock-in-table-wrap {
    overflow:
      visible;
  }


  .stock-in-table {
    width:
      100% !important;

    min-width:
      0 !important;
  }
}


/* =========================================================
   FIN PARTE 2 DE 2
   ========================================================= */