/* =========================================================
   NAI HUB · STOCK
   NEURO APRENDIZAJE INFANTIL

   UBICACIÓN:
   frontend/src/pages/stock/stock.css

   PARTE 1 DE 4

   ESTILO:
   - PREMIUM
   - COMPACTO
   - LEGIBLE
   - TEXTO NEGRO / BLANCO
   - SIN GLOW
   - ANIMACIONES RÁPIDAS
   - FULL RESPONSIVE
   - SIN SCROLL HORIZONTAL
   - EDITORIAL
   - CATEGORÍA
   - ARS / USD
   - BNA
   - EDICIÓN MASIVA
   ========================================================= */


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

#stockPage,
.stock-page {
  --stk-bg:
    #f5f6f8;

  --stk-surface:
    #ffffff;

  --stk-surface-soft:
    #f7f8fa;

  --stk-surface-hover:
    #f0f2f5;

  --stk-border:
    #d5dae2;

  --stk-border-strong:
    #b6bdc8;

  --stk-text:
    #050505;

  --stk-violet:
    #6253a2;

  --stk-violet-soft:
    rgba(98, 83, 162, .08);

  --stk-blue:
    #31476f;

  --stk-success:
    #115d39;

  --stk-success-bg:
    #eaf7ef;

  --stk-success-border:
    #b8ddc8;

  --stk-warning:
    #704500;

  --stk-warning-bg:
    #fff5da;

  --stk-warning-border:
    #e8ce8b;

  --stk-danger:
    #8d1c1c;

  --stk-danger-bg:
    #fff0ef;

  --stk-danger-border:
    #efb3ae;

  --stk-info:
    #31517a;

  --stk-info-bg:
    #edf4fb;

  --stk-info-border:
    #c8d8eb;

  --stk-radius:
    14px;

  --stk-radius-sm:
    9px;

  --stk-transition:
    150ms cubic-bezier(.2, .8, .2, 1);

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    18px !important;

  overflow-x:
    clip !important;

  overflow-y:
    visible !important;

  box-sizing:
    border-box !important;

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

  background:
    transparent;
}


/* =========================================================
   BOX SIZING
   ========================================================= */

#stockPage *,
#stockPage *::before,
#stockPage *::after,
.stock-page *,
.stock-page *::before,
.stock-page *::after {
  box-sizing:
    border-box;
}


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

#stockPage .stock-page__header {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  margin-bottom:
    14px;
}


/* =========================================================
   TITLE
   ========================================================= */

#stockPage .stock-page__title {
  min-width:
    0;

  flex:
    1 1 auto;
}


#stockPage .stock-page__overline {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  margin-bottom:
    4px;

  color:
    #050505;

  font-size:
    8px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}


#stockPage .stock-page__overline-dot {
  width:
    5px;

  height:
    5px;

  flex:
    0 0 5px;

  border-radius:
    50%;

  background:
    var(--stk-violet);
}


#stockPage .stock-page__title h1 {
  margin:
    0;

  color:
    #050505;

  font-size:
    27px;

  font-weight:
    900;

  line-height:
    1.05;

  letter-spacing:
    -.045em;
}


#stockPage .stock-page__title p {
  max-width:
    760px;

  margin:
    6px 0 0;

  color:
    #050505;

  font-size:
    11.5px;

  font-weight:
    650;

  line-height:
    1.4;
}


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

#stockPage .stock-page__actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  flex-wrap:
    wrap;
}


/* =========================================================
   BUTTONS
   ========================================================= */

#stockPage .stock-btn {
  min-height:
    35px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    0 12px;

  border:
    1px solid var(--stk-border);

  border-radius:
    9px;

  background:
    #ffffff;

  color:
    #050505;

  font-family:
    inherit;

  font-size:
    9.5px;

  font-weight:
    800;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;

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


#stockPage .stock-btn svg {
  width:
    14px;

  height:
    14px;

  flex:
    0 0 14px;

  stroke-width:
    2.2;
}


#stockPage .stock-btn:hover:not(:disabled) {
  border-color:
    var(--stk-border-strong);

  transform:
    translateY(-1px);
}


#stockPage .stock-btn:active:not(:disabled) {
  transform:
    scale(.97);
}


#stockPage .stock-btn:disabled {
  cursor:
    not-allowed;

  opacity:
    .42;
}


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

#stockPage .stock-btn--primary {
  border-color:
    #423970;

  background:
    linear-gradient(
      120deg,
      #31476f 0%,
      #51488a 50%,
      #6655a4 100%
    );

  color:
    #ffffff;
}


#stockPage .stock-btn--primary:hover:not(:disabled) {
  border-color:
    #362e61;

  background:
    linear-gradient(
      120deg,
      #2b4168 0%,
      #493f80 50%,
      #5d4d99 100%
    );
}


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

#stockPage .stock-btn--secondary {
  background:
    var(--stk-surface-soft);

  color:
    #050505;
}


/* =========================================================
   ACTIVE BUTTON
   ========================================================= */

#stockPage .stock-btn.is-active {
  border-color:
    #51438f;

  background:
    var(--stk-violet-soft);

  color:
    #3e326f;
}


/* =========================================================
   CURRENCY CONTROL
   ========================================================= */

#stockPage .stock-currency-control {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  padding:
    3px;

  border:
    1px solid var(--stk-border);

  border-radius:
    10px;

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


#stockPage .stock-currency-control .stock-btn {
  min-width:
    52px;

  min-height:
    29px;

  padding:
    0 10px;

  border-color:
    transparent;

  background:
    transparent;

  border-radius:
    7px;

  font-size:
    8.5px;

  font-weight:
    900;
}


#stockPage .stock-currency-control .stock-btn:hover {
  border-color:
    var(--stk-border);

  background:
    #ffffff;
}


#stockPage .stock-currency-control .stock-btn.is-active {
  border-color:
    var(--stk-border-strong);

  background:
    #ffffff;

  color:
    #3e326f;
}


/* =========================================================
   EXCHANGE RATE
   ========================================================= */

#stockPage .stock-exchange-rate {
  min-height:
    35px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    5px 10px;

  border:
    1px solid var(--stk-border);

  border-radius:
    9px;

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

  color:
    #050505;
}


#stockPage .stock-exchange-rate > svg {
  width:
    14px;

  height:
    14px;

  flex:
    0 0 14px;

  stroke-width:
    2.2;
}


#stockPage .stock-exchange-rate > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


#stockPage .stock-exchange-rate span {
  color:
    #050505;

  font-size:
    6.8px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    .07em;

  white-space:
    nowrap;
}


#stockPage .stock-exchange-rate strong {
  color:
    #050505;

  font-size:
    9px;

  font-weight:
    900;

  line-height:
    1.1;

  white-space:
    nowrap;
}


/* =========================================================
   METRICS
   ========================================================= */

#stockPage .stock-metrics {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    9px;

  margin-bottom:
    12px;
}


/* =========================================================
   METRIC
   ========================================================= */

#stockPage .stock-metric {
  position:
    relative;

  min-width:
    0;

  min-height:
    78px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    11px;

  overflow:
    hidden;

  border:
    1px solid var(--stk-border);

  border-radius:
    12px;

  background:
    var(--stk-surface);

  color:
    #050505;

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


#stockPage .stock-metric::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    3px;

  height:
    100%;

  background:
    #605297;

  opacity:
    .78;
}


#stockPage .stock-metric:hover {
  border-color:
    var(--stk-border-strong);

  transform:
    translateY(-1px);
}


#stockPage .stock-metric--warning::before {
  background:
    #9a6200;
}


#stockPage .stock-metric--danger::before {
  background:
    #982424;
}


/* =========================================================
   METRIC ICON
   ========================================================= */

#stockPage .stock-metric__icon {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--stk-border);

  border-radius:
    9px;

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

  color:
    #050505;
}


#stockPage .stock-metric__icon svg {
  width:
    16px;

  height:
    16px;

  stroke-width:
    2.2;
}


/* =========================================================
   METRIC CONTENT
   ========================================================= */

#stockPage .stock-metric__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}


#stockPage .stock-metric__content > span {
  overflow:
    hidden;

  color:
    #050505;

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#stockPage .stock-metric__content > strong {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    18px;

  font-weight:
    900;

  line-height:
    1.05;

  letter-spacing:
    -.035em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#stockPage .stock-metric__content > small {
  overflow:
    hidden;

  color:
    #050505;

  font-size:
    7.5px;

  font-weight:
    600;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

#stockPage .stock-panel {
  width:
    100%;

  min-width:
    0;

  overflow:
    visible !important;

  border:
    1px solid var(--stk-border);

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

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


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

#stockPage .stock-toolbar {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    10px;

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

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


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

#stockPage .stock-search {
  position:
    relative;

  min-width:
    260px;

  width:
    min(
      100%,
      430px
    );

  height:
    36px;

  display:
    flex;

  align-items:
    center;

  border:
    1px solid var(--stk-border);

  border-radius:
    9px;

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

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


#stockPage .stock-search:focus-within {
  border-color:
    var(--stk-violet);

  background:
    #ffffff;
}


#stockPage .stock-search > svg {
  width:
    14px;

  height:
    14px;

  flex:
    0 0 14px;

  margin-left:
    11px;

  color:
    #050505;

  stroke-width:
    2.1;
}


#stockPage .stock-search input {
  min-width:
    0;

  flex:
    1;

  height:
    100%;

  padding:
    0 8px;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    #050505;

  font-family:
    inherit;

  font-size:
    10.5px;

  font-weight:
    700;
}


#stockPage .stock-search input::placeholder {
  color:
    #050505;

  opacity:
    .72;

  font-weight:
    600;
}


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

#stockPage .stock-search__clear {
  width:
    31px;

  height:
    31px;

  flex:
    0 0 31px;

  display:
    grid;

  place-items:
    center;

  margin-right:
    2px;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    #050505;

  cursor:
    pointer;

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


#stockPage .stock-search__clear:hover {
  background:
    #e8eaf0;
}


#stockPage .stock-search__clear:active {
  transform:
    scale(.92);
}


#stockPage .stock-search__clear[hidden] {
  display:
    none !important;
}


#stockPage .stock-search__clear svg {
  width:
    13px;

  height:
    13px;

  stroke-width:
    2.3;
}


/* =========================================================
   FILTERS
   ========================================================= */

#stockPage .stock-toolbar__filters {
  min-width:
    0;

  flex:
    1 1 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;
}


/* =========================================================
   FILTER
   ========================================================= */

#stockPage .stock-filter {
  min-width:
    0;

  height:
    36px;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    0 8px;

  border:
    1px solid var(--stk-border);

  border-radius:
    9px;

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

  color:
    #050505;

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


#stockPage .stock-filter:hover,
#stockPage .stock-filter:focus-within {
  border-color:
    var(--stk-border-strong);

  background:
    #ffffff;
}


#stockPage .stock-filter > svg {
  width:
    13px;

  height:
    13px;

  flex:
    0 0 13px;

  stroke-width:
    2.2;
}


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

#stockPage .stock-select {
  min-width:
    105px;

  max-width:
    150px;

  height:
    100%;

  padding:
    0 16px 0 0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    #050505;

  font-family:
    inherit;

  font-size:
    8.7px;

  font-weight:
    750;

  cursor:
    pointer;
}


#stockPage .stock-select--small {
  min-width:
    100px;

  max-width:
    130px;
}


/* =========================================================
   TABLE AREA
   ========================================================= */

#stockPage .stock-table-area {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  overflow:
    visible !important;

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


/* =========================================================
   TABLE WRAP
   ========================================================= */

#stockPage .stock-table-wrap {
  width:
    100%;

  min-width:
    0;

  overflow:
    visible !important;
}


/* =========================================================
   TABLE
   ========================================================= */

#stockPage .stock-table {
  width:
    100%;

  min-width:
    0;

  table-layout:
    fixed;

  border-collapse:
    separate;

  border-spacing:
    0;

  color:
    #050505;

  overflow:
    visible !important;
}


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

#stockPage .stock-table thead th {
  height:
    38px;

  padding:
    0 6px;

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

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

  color:
    #050505;

  font-size:
    7.8px;

  font-weight:
    850;

  line-height:
    1;

  text-align:
    left;

  vertical-align:
    middle;

  white-space:
    nowrap;
}


/* =========================================================
   TABLE WIDTHS
   12 COLUMNAS
   ========================================================= */

#stockPage .stock-table thead th:nth-child(1) {
  width:
    32px;
}


#stockPage .stock-table thead th:nth-child(2) {
  width:
    8%;
}


#stockPage .stock-table thead th:nth-child(3) {
  width:
    18%;
}


#stockPage .stock-table thead th:nth-child(4) {
  width:
    10%;
}


#stockPage .stock-table thead th:nth-child(5) {
  width:
    9%;
}


#stockPage .stock-table thead th:nth-child(6) {
  width:
    10%;
}


#stockPage .stock-table thead th:nth-child(7) {
  width:
    7%;
}


#stockPage .stock-table thead th:nth-child(8) {
  width:
    8%;
}


#stockPage .stock-table thead th:nth-child(9) {
  width:
    7%;
}


#stockPage .stock-table thead th:nth-child(10) {
  width:
    9%;
}


#stockPage .stock-table thead th:nth-child(11) {
  width:
    9%;
}


#stockPage .stock-table thead th:nth-child(12) {
  width:
    48px;
}


/* =========================================================
   SORT
   ========================================================= */

#stockPage .stock-sort {
  max-width:
    100%;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    #050505;

  font-family:
    inherit;

  font-size:
    inherit;

  font-weight:
    850;

  cursor:
    pointer;
}


#stockPage .stock-sort span {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#stockPage .stock-sort svg {
  width:
    10px;

  height:
    10px;

  flex:
    0 0 10px;

  stroke-width:
    2.3;
}


#stockPage .stock-sort.is-active {
  color:
    var(--stk-violet);
}


/* =========================================================
   TABLE BODY
   ========================================================= */

#stockPage .stock-table tbody {
  overflow:
    visible !important;
}


#stockPage .stock-table tbody tr {
  position:
    relative;

  z-index:
    1;

  overflow:
    visible !important;

  transition:
    background var(--stk-transition);
}


#stockPage .stock-table tbody tr:hover {
  background:
    var(--stk-surface-soft);
}


#stockPage .stock-table tbody tr.is-selected {
  background:
    rgba(98, 83, 162, .055);
}


#stockPage .stock-table tbody td {
  height:
    55px;

  min-width:
    0;

  padding:
    6px;

  overflow:
    visible !important;

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

  color:
    #050505;

  font-size:
    8.7px;

  font-weight:
    650;

  line-height:
    1.25;

  vertical-align:
    middle;
}


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


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

#stockPage .stock-col-check {
  text-align:
    center;
}


#stockPage .stock-col-check input {
  width:
    14px;

  height:
    14px;

  margin:
    0;

  accent-color:
    var(--stk-violet);

  cursor:
    pointer;
}


/* =========================================================
   CODE
   ========================================================= */

#stockPage .stock-code {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


#stockPage .stock-code strong {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    8.7px;

  font-weight:
    850;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#stockPage .stock-code small {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    7.3px;

  font-weight:
    600;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   PRODUCT
   ========================================================= */

#stockPage .stock-product {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    #050505;

  font-family:
    inherit;

  text-align:
    left;

  cursor:
    pointer;
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

#stockPage .stock-product__image {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border:
    1px solid var(--stk-border);

  border-radius:
    9px;

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

  color:
    #050505;
}


#stockPage .stock-product__image img {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  object-position:
    center;
}


#stockPage .stock-product__image span {
  width:
    100%;

  height:
    100%;

  display:
    grid;

  place-items:
    center;
}


#stockPage .stock-product__image svg {
  width:
    15px;

  height:
    15px;

  stroke-width:
    2.1;
}


#stockPage [data-product-fallback][hidden] {
  display:
    none !important;
}


/* =========================================================
   PRODUCT CONTENT
   ========================================================= */

#stockPage .stock-product__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


#stockPage .stock-product__content strong {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    9.3px;

  font-weight:
    850;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#stockPage .stock-product__content small {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    7.4px;

  font-weight:
    600;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   DEPOSIT / EDITORIAL / CATEGORY
   ========================================================= */

#stockPage .stock-deposit {
  max-width:
    100%;

  min-width:
    0;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    8.2px;

  font-weight:
    700;
}


#stockPage .stock-deposit svg {
  width:
    11px;

  height:
    11px;

  flex:
    0 0 11px;

  stroke-width:
    2.2;
}


#stockPage .stock-deposit span {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   EDITORIAL / CATEGORY COLUMNS
   ========================================================= */

#stockPage .stock-col-editorial,
#stockPage .stock-col-category {
  min-width:
    0;
}


/* =========================================================
   STOCK NUMBER
   ========================================================= */

#stockPage .stock-number {
  display:
    inline-block;

  max-width:
    100%;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    9.3px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#stockPage .stock-number--available {
  color:
    #115d39;
}


#stockPage .stock-number--negative {
  color:
    #8d1c1c;
}


/* =========================================================
   PRICE
   ========================================================= */

#stockPage .stock-price {
  display:
    block;

  max-width:
    100%;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    8.8px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

#stockPage .stock-status {
  max-width:
    100%;

  min-height:
    22px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  padding:
    0 7px;

  overflow:
    hidden;

  border:
    1px solid var(--stk-border);

  border-radius:
    999px;

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

  color:
    #050505;

  font-size:
    7.6px;

  font-weight:
    850;

  line-height:
    1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#stockPage .stock-status svg {
  width:
    10px;

  height:
    10px;

  flex:
    0 0 10px;

  stroke-width:
    2.3;
}


#stockPage .stock-status--normal {
  border-color:
    var(--stk-success-border);

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

  color:
    #0c5032;
}


#stockPage .stock-status--bajo {
  border-color:
    var(--stk-warning-border);

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

  color:
    #624000;
}


#stockPage .stock-status--critico,
#stockPage .stock-status--sin_stock,
#stockPage .stock-status--negativo {
  border-color:
    var(--stk-danger-border);

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

  color:
    #731717;
}


#stockPage .stock-status--sobrestock {
  border-color:
    var(--stk-info-border);

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

  color:
    #27486f;
}


/* =========================================================
   ROW ACTIONS
   ========================================================= */

#stockPage .stock-col-actions {
  position:
    relative;

  overflow:
    visible !important;

  text-align:
    center;
}


#stockPage .stock-row-actions {
  position:
    relative;

  z-index:
    20;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    visible !important;
}


/* =========================================================
   ICON BUTTON
   ========================================================= */

#stockPage .stock-icon-btn {
  width:
    30px;

  height:
    30px;

  flex:
    0 0 30px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid var(--stk-border);

  border-radius:
    8px;

  background:
    var(--stk-surface);

  color:
    #050505;

  cursor:
    pointer;

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


#stockPage .stock-icon-btn:hover:not(:disabled) {
  border-color:
    var(--stk-border-strong);

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

  transform:
    translateY(-1px);
}


#stockPage .stock-icon-btn:active:not(:disabled) {
  transform:
    scale(.93);
}


#stockPage .stock-icon-btn:disabled {
  cursor:
    not-allowed;

  opacity:
    .35;
}


#stockPage .stock-icon-btn svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2.2;
}


/* =========================================================
   ROW MENU BUTTON
   ========================================================= */

#stockPage .stock-row-menu-button {
  position:
    relative;

  z-index:
    22;
}


/* =========================================================
   ROW MENU
   ========================================================= */

#stockPage .stock-row-menu {
  position:
    absolute;

  top:
    calc(100% + 6px) !important;

  right:
    0 !important;

  bottom:
    auto !important;

  left:
    auto !important;

  z-index:
    1000;

  width:
    194px;

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

  overflow:
    hidden;

  padding:
    5px;

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

  border-radius:
    10px;

  background:
    var(--stk-surface);

  color:
    var(--stk-text);

  animation:
    stockMenuIn
    140ms
    cubic-bezier(.2, .8, .2, 1);
}


@keyframes stockMenuIn {

  from {
    opacity:
      0;

    transform:
      translateY(-4px)
      scale(.98);
  }

  to {
    opacity:
      1;

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

}


#stockPage .stock-row-menu button {
  width:
    100%;

  min-height:
    34px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 9px;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(--stk-text);

  font-family:
    inherit;

  font-size:
    9px;

  font-weight:
    750;

  text-align:
    left;

  cursor:
    pointer;

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


#stockPage .stock-row-menu button:hover {
  background:
    var(--stk-surface-hover);

  transform:
    translateX(1px);
}


#stockPage .stock-row-menu button svg {
  width:
    13px;

  height:
    13px;

  flex:
    0 0 13px;

  stroke-width:
    2.2;
}


#stockPage .stock-row-menu__divider {
  display:
    block;

  width:
    100%;

  height:
    1px;

  margin:
    4px 0;

  background:
    var(--stk-border);
}


/* =========================================================
   ACTIVE ROW OVER OTHER ROWS
   ========================================================= */

#stockPage .stock-table tbody tr:has(.stock-row-menu) {
  z-index:
    200;
}


/* =========================================================
   PAGINATION
   ========================================================= */

#stockPage .stock-pagination {
  position:
    relative;

  z-index:
    0;

  min-height:
    47px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    8px 10px;

  border-top:
    1px solid var(--stk-border);

  color:
    #050505;
}


#stockPage .stock-pagination__info,
#stockPage .stock-pagination__page {
  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  color:
    #050505;

  font-size:
    8.5px;

  font-weight:
    650;
}


#stockPage .stock-pagination__info strong,
#stockPage .stock-pagination__page strong {
  color:
    #050505;

  font-weight:
    900;
}


#stockPage .stock-pagination__controls {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


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

#stockPage .stock-loading {
  min-height:
    260px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    11px;

  padding:
    24px;

  color:
    #050505;

  text-align:
    center;
}


#stockPage .stock-loading > div {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    3px;
}


#stockPage .stock-loading strong {
  color:
    #050505;

  font-size:
    11px;

  font-weight:
    850;
}


#stockPage .stock-loading span:not(.stock-spinner) {
  color:
    #050505;

  font-size:
    9px;

  font-weight:
    600;
}


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

#stockPage .stock-empty {
  min-height:
    260px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    24px;

  color:
    #050505;

  text-align:
    center;
}


#stockPage .stock-empty__icon {
  width:
    42px;

  height:
    42px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    3px;

  border:
    1px solid var(--stk-border);

  border-radius:
    11px;

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

  color:
    #050505;
}


#stockPage .stock-empty__icon svg {
  width:
    20px;

  height:
    20px;

  stroke-width:
    2.1;
}


#stockPage .stock-empty strong {
  color:
    #050505;

  font-size:
    11px;

  font-weight:
    850;
}


#stockPage .stock-empty > span {
  color:
    #050505;

  font-size:
    9px;

  font-weight:
    600;
}


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

#stockPage .stock-spinner {
  width:
    23px;

  height:
    23px;

  flex:
    0 0 23px;

  border:
    2px solid var(--stk-border);

  border-top-color:
    #050505;

  border-radius:
    50%;

  animation:
    stockSpin
    600ms
    linear
    infinite;
}


@keyframes stockSpin {

  to {
    transform:
      rotate(360deg);
  }

}


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

#stockPage .stock-skeleton {
  position:
    relative;

  overflow:
    hidden;

  border-radius:
    6px;

  background:
    #e8eaf0;
}


#stockPage .stock-skeleton::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  transform:
    translateX(-100%);

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

  animation:
    stockSkeleton
    1.1s
    ease-in-out
    infinite;
}


@keyframes stockSkeleton {

  to {
    transform:
      translateX(100%);
  }

}


#stockPage .stock-skeleton--icon {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;
}


#stockPage .stock-skeleton--label {
  width:
    65px;

  height:
    7px;
}


#stockPage .stock-skeleton--value {
  width:
    48px;

  height:
    17px;

  margin-top:
    4px;
}


#stockPage .stock-skeleton--helper {
  width:
    82px;

  height:
    6px;

  margin-top:
    3px;
}/* =========================================================
   MODAL OPEN
   ========================================================= */

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


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

#stockPage .stock-modal-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    99999;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    18px;

  overflow:
    auto;

  background:
    rgba(8, 10, 15, .48);

  animation:
    stockBackdropIn
    140ms
    ease-out;
}


@keyframes stockBackdropIn {

  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }

}


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

#stockPage .stock-modal {
  width:
    min(
      100%,
      560px
    );

  max-height:
    calc(100vh - 36px);

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

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

  border-radius:
    16px;

  background:
    var(--stk-surface);

  color:
    #050505;

  animation:
    stockModalIn
    160ms
    cubic-bezier(.2, .8, .2, 1);
}


@keyframes stockModalIn {

  from {
    opacity:
      0;

    transform:
      translateY(8px)
      scale(.985);
  }

  to {
    opacity:
      1;

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

}


#stockPage .stock-modal--large {
  width:
    min(
      100%,
      760px
    );
}


#stockPage .stock-modal--xlarge {
  width:
    min(
      100%,
      1080px
    );
}


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

#stockPage .stock-modal__header {
  min-height:
    64px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    12px 14px;

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

  background:
    var(--stk-surface);

  flex:
    0 0 auto;
}


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

#stockPage .stock-modal__heading {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


#stockPage .stock-modal__heading-icon {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--stk-border);

  border-radius:
    9px;

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

  color:
    #050505;
}


#stockPage .stock-modal__heading-icon svg {
  width:
    16px;

  height:
    16px;

  stroke-width:
    2.2;
}


#stockPage .stock-modal__heading-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


#stockPage .stock-modal__heading-copy > span {
  color:
    #050505;

  font-size:
    7px;

  font-weight:
    850;

  letter-spacing:
    .1em;

  line-height:
    1;

  text-transform:
    uppercase;
}


#stockPage .stock-modal__heading-copy h2 {
  max-width:
    100%;

  margin:
    0;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    16px;

  font-weight:
    900;

  line-height:
    1.12;

  letter-spacing:
    -.025em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

#stockPage .stock-modal__close {
  flex:
    0 0 30px;
}


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

#stockPage .stock-modal__body {
  min-height:
    0;

  flex:
    1 1 auto;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  padding:
    14px;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--stk-border-strong)
    transparent;
}


#stockPage .stock-modal__body::-webkit-scrollbar {
  width:
    7px;
}


#stockPage .stock-modal__body::-webkit-scrollbar-track {
  background:
    transparent;
}


#stockPage .stock-modal__body::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    var(--stk-border-strong);
}


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

#stockPage .stock-modal__footer {
  min-height:
    58px;

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  padding:
    10px 14px;

  border-top:
    1px solid var(--stk-border);

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


#stockPage .stock-modal__footer-group {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  margin-left:
    auto;
}


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

#stockPage .stock-detail {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}


/* =========================================================
   DETAIL HERO
   ========================================================= */

#stockPage .stock-detail__hero {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  padding:
    11px;

  border:
    1px solid var(--stk-border);

  border-radius:
    11px;

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


#stockPage .stock-detail__image {
  width:
    52px;

  height:
    52px;

  flex:
    0 0 52px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border:
    1px solid var(--stk-border);

  border-radius:
    10px;

  background:
    #ffffff;

  color:
    #050505;
}


#stockPage .stock-detail__image img {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;
}


#stockPage .stock-detail__image span {
  width:
    100%;

  height:
    100%;

  display:
    grid;

  place-items:
    center;
}


#stockPage .stock-detail__image svg {
  width:
    20px;

  height:
    20px;

  stroke-width:
    2.1;
}


#stockPage .stock-detail__identity {
  min-width:
    0;

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


#stockPage .stock-detail__identity > span {
  color:
    #050505;

  font-size:
    6.8px;

  font-weight:
    850;

  letter-spacing:
    .08em;

  line-height:
    1;

  text-transform:
    uppercase;
}


#stockPage .stock-detail__identity > strong {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    13px;

  font-weight:
    900;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#stockPage .stock-detail__identity > small {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    8.5px;

  font-weight:
    650;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#stockPage .stock-detail__hero-status {
  flex:
    0 0 auto;
}


/* =========================================================
   DETAIL METRICS
   ========================================================= */

#stockPage .stock-detail__metrics {
  display:
    grid;

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

  gap:
    8px;
}


#stockPage .stock-detail-metric {
  min-width:
    0;

  min-height:
    62px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    9px;

  border:
    1px solid var(--stk-border);

  border-radius:
    10px;

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


#stockPage .stock-detail-metric__icon {
  width:
    30px;

  height:
    30px;

  flex:
    0 0 30px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--stk-border);

  border-radius:
    8px;

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

  color:
    #050505;
}


#stockPage .stock-detail-metric__icon svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2.2;
}


#stockPage .stock-detail-metric > div:last-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


#stockPage .stock-detail-metric span {
  color:
    #050505;

  font-size:
    7.2px;

  font-weight:
    700;

  line-height:
    1;
}


#stockPage .stock-detail-metric strong {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    12px;

  font-weight:
    900;

  line-height:
    1.1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

#stockPage .stock-detail__grid {
  display:
    grid;

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

  gap:
    7px;
}


#stockPage .stock-detail-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  padding:
    9px;

  border:
    1px solid var(--stk-border);

  border-radius:
    9px;

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


#stockPage .stock-detail-field__label {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  color:
    #050505;
}


#stockPage .stock-detail-field__label svg {
  width:
    11px;

  height:
    11px;

  flex:
    0 0 11px;

  stroke-width:
    2.2;
}


#stockPage .stock-detail-field__label span {
  min-width:
    0;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    7px;

  font-weight:
    750;

  line-height:
    1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#stockPage .stock-detail-field > strong {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    9.3px;

  font-weight:
    850;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

#stockPage .stock-detail__section {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  padding-top:
    3px;
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

#stockPage .stock-section-title {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding-bottom:
    7px;

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

  color:
    #050505;
}


#stockPage .stock-section-title > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


#stockPage .stock-section-title span {
  color:
    #050505;

  font-size:
    6.8px;

  font-weight:
    850;

  letter-spacing:
    .08em;

  line-height:
    1;

  text-transform:
    uppercase;
}


#stockPage .stock-section-title strong {
  color:
    #050505;

  font-size:
    10px;

  font-weight:
    850;

  line-height:
    1.15;
}


#stockPage .stock-section-title > svg {
  width:
    14px;

  height:
    14px;

  flex:
    0 0 14px;

  stroke-width:
    2.1;
}


/* =========================================================
   DETAIL DEPOSITS
   ========================================================= */

#stockPage .stock-detail-deposits {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


#stockPage .stock-detail-deposit {
  min-width:
    0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  padding:
    9px;

  border:
    1px solid var(--stk-border);

  border-radius:
    9px;

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


#stockPage .stock-detail-deposit__place {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


#stockPage .stock-detail-deposit__icon {
  width:
    28px;

  height:
    28px;

  flex:
    0 0 28px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--stk-border);

  border-radius:
    8px;

  background:
    #ffffff;

  color:
    #050505;
}


#stockPage .stock-detail-deposit__icon svg {
  width:
    13px;

  height:
    13px;

  stroke-width:
    2.2;
}


#stockPage .stock-detail-deposit__place > div:last-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


#stockPage .stock-detail-deposit__place strong {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    9px;

  font-weight:
    850;

  line-height:
    1.1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#stockPage .stock-detail-deposit__place small {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    7.2px;

  font-weight:
    600;

  line-height:
    1.1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#stockPage .stock-detail-deposit__value {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    2px;
}


#stockPage .stock-detail-deposit__value span {
  color:
    #050505;

  font-size:
    6.7px;

  font-weight:
    700;

  line-height:
    1;
}


#stockPage .stock-detail-deposit__value strong {
  color:
    #050505;

  font-size:
    10px;

  font-weight:
    900;

  line-height:
    1.1;
}


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

#stockPage .stock-inline-empty {
  min-height:
    120px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  padding:
    16px;

  border:
    1px dashed var(--stk-border-strong);

  border-radius:
    10px;

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

  color:
    #050505;

  text-align:
    center;
}


#stockPage .stock-inline-empty > svg {
  width:
    20px;

  height:
    20px;

  stroke-width:
    2;
}


#stockPage .stock-inline-empty strong {
  color:
    #050505;

  font-size:
    10px;

  font-weight:
    850;
}


#stockPage .stock-inline-empty span {
  max-width:
    420px;

  color:
    #050505;

  font-size:
    8px;

  font-weight:
    600;

  line-height:
    1.4;
}


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

#stockPage .stock-form {
  width:
    100%;

  min-width:
    0;
}


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

#stockPage .stock-form-grid {
  display:
    grid;

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

  gap:
    10px;
}


#stockPage .stock-form-grid--import {
  margin-top:
    12px;
}


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

#stockPage .stock-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


#stockPage .stock-field--full {
  grid-column:
    1 / -1;
}


/* =========================================================
   FIELD LABEL
   ========================================================= */

#stockPage .stock-field__label {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  color:
    #050505;
}


#stockPage .stock-field__label svg {
  width:
    11px;

  height:
    11px;

  flex:
    0 0 11px;

  stroke-width:
    2.2;
}


#stockPage .stock-field__label span {
  min-width:
    0;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    7.8px;

  font-weight:
    800;

  line-height:
    1.1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

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

  min-width:
    0;

  border:
    1px solid var(--stk-border);

  border-radius:
    8px;

  outline:
    0;

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

  color:
    #050505;

  font-family:
    inherit;

  font-size:
    9.5px;

  font-weight:
    700;

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


#stockPage .stock-field input,
#stockPage .stock-field select {
  height:
    35px;

  padding:
    0 9px;
}


#stockPage .stock-field textarea {
  min-height:
    86px;

  resize:
    vertical;

  padding:
    9px;

  line-height:
    1.4;
}


#stockPage .stock-field input::placeholder,
#stockPage .stock-field textarea::placeholder {
  color:
    #050505;

  opacity:
    .5;

  font-weight:
    600;
}


#stockPage .stock-field input:focus,
#stockPage .stock-field select:focus,
#stockPage .stock-field textarea:focus {
  border-color:
    var(--stk-violet);

  background:
    #ffffff;
}


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

#stockPage .stock-field select option,
#stockPage .stock-select option {
  background:
    #ffffff;

  color:
    #050505;
}


/* =========================================================
   SELECTED PRODUCT
   ========================================================= */

#stockPage .stock-selected-product {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    12px;

  padding:
    10px;

  border:
    1px solid var(--stk-border);

  border-radius:
    10px;

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


#stockPage .stock-selected-product__main {
  min-width:
    0;

  flex:
    1;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


#stockPage .stock-selected-product__image {
  width:
    40px;

  height:
    40px;

  flex:
    0 0 40px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border:
    1px solid var(--stk-border);

  border-radius:
    9px;

  background:
    #ffffff;

  color:
    #050505;
}


#stockPage .stock-selected-product__image img {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;
}


#stockPage .stock-selected-product__image span {
  width:
    100%;

  height:
    100%;

  display:
    grid;

  place-items:
    center;
}


#stockPage .stock-selected-product__image svg {
  width:
    17px;

  height:
    17px;

  stroke-width:
    2.1;
}


#stockPage .stock-selected-product__main > div:last-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


#stockPage .stock-selected-product__main span {
  color:
    #050505;

  font-size:
    6.7px;

  font-weight:
    850;

  letter-spacing:
    .08em;

  line-height:
    1;

  text-transform:
    uppercase;
}


#stockPage .stock-selected-product__main strong {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    10.5px;

  font-weight:
    900;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#stockPage .stock-selected-product__main small {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    7.5px;

  font-weight:
    600;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#stockPage .stock-selected-product__stock {
  flex:
    0 0 auto;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    2px;
}


#stockPage .stock-selected-product__stock span {
  color:
    #050505;

  font-size:
    6.6px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    .05em;
}


#stockPage .stock-selected-product__stock strong {
  color:
    #050505;

  font-size:
    16px;

  font-weight:
    900;

  line-height:
    1;
}


/* =========================================================
   SWITCHES
   ========================================================= */

#stockPage .stock-import-switches {
  display:
    grid;

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

  gap:
    8px;

  margin-top:
    12px;
}


#stockPage .stock-switch {
  position:
    relative;

  min-width:
    0;

  min-height:
    72px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  padding:
    9px;

  border:
    1px solid var(--stk-border);

  border-radius:
    10px;

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

  cursor:
    pointer;

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


#stockPage .stock-switch:hover {
  border-color:
    var(--stk-border-strong);

  background:
    #ffffff;
}


#stockPage .stock-switch input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;
}


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

#stockPage .stock-switch__icon {
  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--stk-border);

  border-radius:
    8px;

  background:
    #ffffff;

  color:
    #050505;
}


#stockPage .stock-switch__icon svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2.2;
}


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

#stockPage .stock-switch__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


#stockPage .stock-switch__content strong {
  color:
    #050505;

  font-size:
    8.3px;

  font-weight:
    850;

  line-height:
    1.15;
}


#stockPage .stock-switch__content small {
  color:
    #050505;

  font-size:
    7px;

  font-weight:
    600;

  line-height:
    1.3;
}


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

#stockPage .stock-switch__control {
  position:
    relative;

  width:
    32px;

  height:
    18px;

  display:
    block;

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

  border-radius:
    999px;

  background:
    #e2e5ea;

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


#stockPage .stock-switch__control > span {
  position:
    absolute;

  top:
    2px;

  left:
    2px;

  width:
    12px;

  height:
    12px;

  border-radius:
    50%;

  background:
    #ffffff;

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


#stockPage .stock-switch input:checked ~ .stock-switch__control {
  border-color:
    #51438f;

  background:
    var(--stk-violet);
}


#stockPage .stock-switch input:checked ~ .stock-switch__control > span {
  transform:
    translateX(14px);
}/* =========================================================
   IMPORT DROPZONE
   ========================================================= */

#stockPage .stock-import-dropzone {
  position:
    relative;

  min-height:
    150px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    18px;

  border:
    1px dashed var(--stk-border-strong);

  border-radius:
    12px;

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

  color:
    #050505;

  text-align:
    center;

  cursor:
    pointer;

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


#stockPage .stock-import-dropzone:hover {
  border-color:
    var(--stk-violet);

  background:
    #ffffff;
}


#stockPage .stock-import-dropzone.is-dragging {
  border-color:
    var(--stk-violet);

  background:
    var(--stk-violet-soft);

  transform:
    scale(.995);
}


#stockPage .stock-import-dropzone.has-file {
  min-height:
    auto;

  align-items:
    stretch;

  padding:
    9px;

  border-style:
    solid;
}


/* =========================================================
   IMPORT DROPZONE ICON
   ========================================================= */

#stockPage .stock-import-dropzone__icon {
  width:
    42px;

  height:
    42px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    2px;

  border:
    1px solid var(--stk-border);

  border-radius:
    10px;

  background:
    #ffffff;

  color:
    #050505;
}


#stockPage .stock-import-dropzone__icon svg {
  width:
    19px;

  height:
    19px;

  stroke-width:
    2.1;
}


#stockPage .stock-import-dropzone > strong {
  color:
    #050505;

  font-size:
    10.5px;

  font-weight:
    850;

  line-height:
    1.15;
}


#stockPage .stock-import-dropzone > span {
  color:
    #050505;

  font-size:
    8.2px;

  font-weight:
    650;

  line-height:
    1.2;
}


#stockPage .stock-import-dropzone > small {
  color:
    #050505;

  font-size:
    7.2px;

  font-weight:
    600;

  line-height:
    1.2;
}


/* =========================================================
   IMPORT FILE
   ========================================================= */

#stockPage .stock-import-file {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    9px;

  border:
    1px solid var(--stk-border);

  border-radius:
    9px;

  background:
    #ffffff;

  text-align:
    left;
}


#stockPage .stock-import-file__icon {
  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--stk-border);

  border-radius:
    8px;

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

  color:
    #050505;
}


#stockPage .stock-import-file__icon svg {
  width:
    15px;

  height:
    15px;

  stroke-width:
    2.2;
}


#stockPage .stock-import-file__copy {
  min-width:
    0;

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


#stockPage .stock-import-file__copy strong {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    9px;

  font-weight:
    850;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#stockPage .stock-import-file__copy small {
  color:
    #050505;

  font-size:
    7.3px;

  font-weight:
    600;

  line-height:
    1.15;
}


/* =========================================================
   IMPORT SUMMARY
   ========================================================= */

#stockPage .stock-import-summary {
  display:
    grid;

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

  gap:
    8px;

  margin-bottom:
    12px;
}


/* =========================================================
   IMPORT STAT
   ========================================================= */

#stockPage .stock-import-stat {
  min-width:
    0;

  min-height:
    62px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    9px;

  border:
    1px solid var(--stk-border);

  border-radius:
    10px;

  background:
    var(--stk-surface);

  color:
    #050505;
}


#stockPage .stock-import-stat__icon {
  width:
    30px;

  height:
    30px;

  flex:
    0 0 30px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--stk-border);

  border-radius:
    8px;

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

  color:
    #050505;
}


#stockPage .stock-import-stat__icon svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2.2;
}


#stockPage .stock-import-stat > div:last-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


#stockPage .stock-import-stat span {
  color:
    #050505;

  font-size:
    7px;

  font-weight:
    700;

  line-height:
    1;
}


#stockPage .stock-import-stat strong {
  color:
    #050505;

  font-size:
    14px;

  font-weight:
    900;

  line-height:
    1;
}


#stockPage .stock-import-stat--success {
  border-color:
    var(--stk-success-border);

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

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


#stockPage .stock-import-stat--success .stock-import-stat__icon {
  border-color:
    var(--stk-success-border);

  background:
    #ffffff;

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


#stockPage .stock-import-stat--info {
  border-color:
    var(--stk-info-border);

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

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


#stockPage .stock-import-stat--info .stock-import-stat__icon {
  border-color:
    var(--stk-info-border);

  background:
    #ffffff;

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


#stockPage .stock-import-stat--warning {
  border-color:
    var(--stk-warning-border);

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

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


#stockPage .stock-import-stat--warning .stock-import-stat__icon {
  border-color:
    var(--stk-warning-border);

  background:
    #ffffff;

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


#stockPage .stock-import-stat--danger {
  border-color:
    var(--stk-danger-border);

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

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


#stockPage .stock-import-stat--danger .stock-import-stat__icon {
  border-color:
    var(--stk-danger-border);

  background:
    #ffffff;

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


/* =========================================================
   IMPORT PREVIEW TABLE
   ========================================================= */

#stockPage .stock-import-preview-table {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  border:
    1px solid var(--stk-border);

  border-radius:
    10px;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--stk-border-strong)
    transparent;
}


#stockPage .stock-import-preview-table::-webkit-scrollbar {
  height:
    7px;
}


#stockPage .stock-import-preview-table::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    var(--stk-border-strong);
}


#stockPage .stock-import-preview-table table {
  width:
    100%;

  min-width:
    840px;

  border-collapse:
    collapse;

  color:
    #050505;
}


#stockPage .stock-import-preview-table th {
  height:
    36px;

  padding:
    0 8px;

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

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

  color:
    #050505;

  font-size:
    7.6px;

  font-weight:
    850;

  text-align:
    left;

  white-space:
    nowrap;
}


#stockPage .stock-import-preview-table td {
  height:
    42px;

  padding:
    6px 8px;

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

  color:
    #050505;

  font-size:
    8px;

  font-weight:
    650;

  line-height:
    1.2;
}


#stockPage .stock-import-preview-table tbody tr:last-child td {
  border-bottom:
    0;
}


#stockPage .stock-import-preview-table td strong {
  color:
    #050505;

  font-size:
    8.3px;

  font-weight:
    850;
}


/* =========================================================
   IMPORT ACTION
   ========================================================= */

#stockPage .stock-import-action {
  min-height:
    21px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 7px;

  border:
    1px solid var(--stk-border);

  border-radius:
    999px;

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

  color:
    #050505;

  font-size:
    7px;

  font-weight:
    850;

  line-height:
    1;

  white-space:
    nowrap;
}


#stockPage .stock-import-action--crear,
#stockPage .stock-import-action--creado {
  border-color:
    var(--stk-success-border);

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

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


#stockPage .stock-import-action--actualizar,
#stockPage .stock-import-action--actualizado {
  border-color:
    var(--stk-info-border);

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

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


#stockPage .stock-import-action--ignorar,
#stockPage .stock-import-action--ignorado {
  border-color:
    var(--stk-warning-border);

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

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


/* =========================================================
   MOVEMENTS
   ========================================================= */

#stockPage .stock-movements {
  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   MOVEMENTS TABLE
   ========================================================= */

#stockPage .stock-movements-table {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  border:
    1px solid var(--stk-border);

  border-radius:
    10px;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--stk-border-strong)
    transparent;
}


#stockPage .stock-movements-table::-webkit-scrollbar {
  height:
    7px;
}


#stockPage .stock-movements-table::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    var(--stk-border-strong);
}


#stockPage .stock-movements-table table {
  width:
    100%;

  min-width:
    980px;

  border-collapse:
    collapse;

  color:
    #050505;
}


#stockPage .stock-movements-table th {
  height:
    36px;

  padding:
    0 8px;

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

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

  color:
    #050505;

  font-size:
    7.4px;

  font-weight:
    850;

  text-align:
    left;

  white-space:
    nowrap;
}


#stockPage .stock-movements-table td {
  height:
    42px;

  padding:
    6px 8px;

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

  color:
    #050505;

  font-size:
    7.9px;

  font-weight:
    650;

  line-height:
    1.2;
}


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


/* =========================================================
   MOVEMENT CODE
   ========================================================= */

#stockPage .stock-movement-code {
  display:
    inline-block;

  max-width:
    150px;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    7.8px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   MOVEMENT TYPE
   ========================================================= */

#stockPage .stock-movement-type {
  min-height:
    21px;

  display:
    inline-flex;

  align-items:
    center;

  padding:
    0 7px;

  border:
    1px solid var(--stk-border);

  border-radius:
    999px;

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

  color:
    #050505;

  font-size:
    6.8px;

  font-weight:
    800;

  line-height:
    1;

  white-space:
    nowrap;
}


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

.stock-toast-container {
  position:
    fixed;

  right:
    16px;

  bottom:
    16px;

  z-index:
    1000000;

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

  display:
    flex;

  flex-direction:
    column;

  align-items:
    stretch;

  gap:
    7px;

  pointer-events:
    none;
}


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

.stock-toast {
  width:
    100%;

  min-height:
    48px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    9px 11px;

  border:
    1px solid #b6bdc8;

  border-radius:
    10px;

  background:
    #ffffff;

  color:
    #050505;

  opacity:
    0;

  transform:
    translateY(8px)
    scale(.98);

  pointer-events:
    auto;

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


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

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


.stock-toast__icon {
  width:
    28px;

  height:
    28px;

  flex:
    0 0 28px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid #d5dae2;

  border-radius:
    8px;

  background:
    #f7f8fa;
}


.stock-toast__icon svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2.3;
}


.stock-toast > span {
  color:
    #050505;

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1.35;
}


.stock-toast--success {
  border-color:
    #b8ddc8;
}


.stock-toast--success .stock-toast__icon {
  border-color:
    #b8ddc8;

  background:
    #eaf7ef;

  color:
    #115d39;
}


.stock-toast--warning {
  border-color:
    #e8ce8b;
}


.stock-toast--warning .stock-toast__icon {
  border-color:
    #e8ce8b;

  background:
    #fff5da;

  color:
    #704500;
}


.stock-toast--error {
  border-color:
    #efb3ae;
}


.stock-toast--error .stock-toast__icon {
  border-color:
    #efb3ae;

  background:
    #fff0ef;

  color:
    #8d1c1c;
}


/* =========================================================
   DARK MODE TOKENS
   ========================================================= */

html[data-theme="dark"] #stockPage,
body[data-theme="dark"] #stockPage,
[data-theme="dark"] #stockPage,
html.dark #stockPage,
body.dark #stockPage,
.dark #stockPage {
  --stk-bg:
    #08090b;

  --stk-surface:
    #0d0f12;

  --stk-surface-soft:
    #111419;

  --stk-surface-hover:
    #171b20;

  --stk-border:
    #282d34;

  --stk-border-strong:
    #3c434d;

  --stk-text:
    #ffffff;

  --stk-violet:
    #a89be7;

  --stk-violet-soft:
    rgba(168, 155, 231, .12);

  --stk-success:
    #8cd8ad;

  --stk-success-bg:
    #10271b;

  --stk-success-border:
    #27573b;

  --stk-warning:
    #f1c36a;

  --stk-warning-bg:
    #2b220e;

  --stk-warning-border:
    #5b4720;

  --stk-danger:
    #ff9c95;

  --stk-danger-bg:
    #2b1313;

  --stk-danger-border:
    #603030;

  --stk-info:
    #a5c8f1;

  --stk-info-bg:
    #101e2d;

  --stk-info-border:
    #304c6d;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK MODE TEXT
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-page__title h1,
html[data-theme="dark"] #stockPage .stock-page__title p,
html[data-theme="dark"] #stockPage .stock-page__overline,
html[data-theme="dark"] #stockPage .stock-btn--secondary,
html[data-theme="dark"] #stockPage .stock-exchange-rate,
html[data-theme="dark"] #stockPage .stock-exchange-rate span,
html[data-theme="dark"] #stockPage .stock-exchange-rate strong,
html[data-theme="dark"] #stockPage .stock-metric,
html[data-theme="dark"] #stockPage .stock-metric__content > span,
html[data-theme="dark"] #stockPage .stock-metric__content > strong,
html[data-theme="dark"] #stockPage .stock-metric__content > small,
html[data-theme="dark"] #stockPage .stock-search > svg,
html[data-theme="dark"] #stockPage .stock-search input,
html[data-theme="dark"] #stockPage .stock-search input::placeholder,
html[data-theme="dark"] #stockPage .stock-search__clear,
html[data-theme="dark"] #stockPage .stock-filter,
html[data-theme="dark"] #stockPage .stock-select,
html[data-theme="dark"] #stockPage .stock-table,
html[data-theme="dark"] #stockPage .stock-table thead th,
html[data-theme="dark"] #stockPage .stock-table tbody td,
html[data-theme="dark"] #stockPage .stock-sort,
html[data-theme="dark"] #stockPage .stock-code strong,
html[data-theme="dark"] #stockPage .stock-code small,
html[data-theme="dark"] #stockPage .stock-product,
html[data-theme="dark"] #stockPage .stock-product__content strong,
html[data-theme="dark"] #stockPage .stock-product__content small,
html[data-theme="dark"] #stockPage .stock-deposit,
html[data-theme="dark"] #stockPage .stock-number,
html[data-theme="dark"] #stockPage .stock-price,
html[data-theme="dark"] #stockPage .stock-icon-btn,
html[data-theme="dark"] #stockPage .stock-row-menu,
html[data-theme="dark"] #stockPage .stock-row-menu button,
html[data-theme="dark"] #stockPage .stock-pagination,
html[data-theme="dark"] #stockPage .stock-pagination__info,
html[data-theme="dark"] #stockPage .stock-pagination__page,
html[data-theme="dark"] #stockPage .stock-pagination__info strong,
html[data-theme="dark"] #stockPage .stock-pagination__page strong,
html[data-theme="dark"] #stockPage .stock-loading,
html[data-theme="dark"] #stockPage .stock-loading strong,
html[data-theme="dark"] #stockPage .stock-loading span:not(.stock-spinner),
html[data-theme="dark"] #stockPage .stock-empty,
html[data-theme="dark"] #stockPage .stock-empty strong,
html[data-theme="dark"] #stockPage .stock-empty > span,
html[data-theme="dark"] #stockPage .stock-modal,
html[data-theme="dark"] #stockPage .stock-modal__heading-icon,
html[data-theme="dark"] #stockPage .stock-modal__heading-copy > span,
html[data-theme="dark"] #stockPage .stock-modal__heading-copy h2,
html[data-theme="dark"] #stockPage .stock-detail__identity > span,
html[data-theme="dark"] #stockPage .stock-detail__identity > strong,
html[data-theme="dark"] #stockPage .stock-detail__identity > small,
html[data-theme="dark"] #stockPage .stock-detail-metric,
html[data-theme="dark"] #stockPage .stock-detail-metric span,
html[data-theme="dark"] #stockPage .stock-detail-metric strong,
html[data-theme="dark"] #stockPage .stock-detail-field,
html[data-theme="dark"] #stockPage .stock-detail-field__label,
html[data-theme="dark"] #stockPage .stock-detail-field__label span,
html[data-theme="dark"] #stockPage .stock-detail-field > strong,
html[data-theme="dark"] #stockPage .stock-section-title,
html[data-theme="dark"] #stockPage .stock-section-title span,
html[data-theme="dark"] #stockPage .stock-section-title strong,
html[data-theme="dark"] #stockPage .stock-detail-deposit__place strong,
html[data-theme="dark"] #stockPage .stock-detail-deposit__place small,
html[data-theme="dark"] #stockPage .stock-detail-deposit__value span,
html[data-theme="dark"] #stockPage .stock-detail-deposit__value strong,
html[data-theme="dark"] #stockPage .stock-inline-empty,
html[data-theme="dark"] #stockPage .stock-inline-empty strong,
html[data-theme="dark"] #stockPage .stock-inline-empty span,
html[data-theme="dark"] #stockPage .stock-field__label,
html[data-theme="dark"] #stockPage .stock-field__label span,
html[data-theme="dark"] #stockPage .stock-field input,
html[data-theme="dark"] #stockPage .stock-field select,
html[data-theme="dark"] #stockPage .stock-field textarea,
html[data-theme="dark"] #stockPage .stock-selected-product__main span,
html[data-theme="dark"] #stockPage .stock-selected-product__main strong,
html[data-theme="dark"] #stockPage .stock-selected-product__main small,
html[data-theme="dark"] #stockPage .stock-selected-product__stock span,
html[data-theme="dark"] #stockPage .stock-selected-product__stock strong,
html[data-theme="dark"] #stockPage .stock-switch__content strong,
html[data-theme="dark"] #stockPage .stock-switch__content small,
html[data-theme="dark"] #stockPage .stock-import-dropzone,
html[data-theme="dark"] #stockPage .stock-import-dropzone > strong,
html[data-theme="dark"] #stockPage .stock-import-dropzone > span,
html[data-theme="dark"] #stockPage .stock-import-dropzone > small,
html[data-theme="dark"] #stockPage .stock-import-file__copy strong,
html[data-theme="dark"] #stockPage .stock-import-file__copy small,
html[data-theme="dark"] #stockPage .stock-import-stat,
html[data-theme="dark"] #stockPage .stock-import-stat span,
html[data-theme="dark"] #stockPage .stock-import-stat strong,
html[data-theme="dark"] #stockPage .stock-import-preview-table table,
html[data-theme="dark"] #stockPage .stock-import-preview-table th,
html[data-theme="dark"] #stockPage .stock-import-preview-table td,
html[data-theme="dark"] #stockPage .stock-import-preview-table td strong,
html[data-theme="dark"] #stockPage .stock-movements-table table,
html[data-theme="dark"] #stockPage .stock-movements-table th,
html[data-theme="dark"] #stockPage .stock-movements-table td,
html[data-theme="dark"] #stockPage .stock-movement-code,
html[data-theme="dark"] #stockPage .stock-movement-type {
  color:
    #ffffff !important;
}


/* =========================================================
   DARK MODE SURFACES
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-btn--secondary,
html[data-theme="dark"] #stockPage .stock-currency-control,
html[data-theme="dark"] #stockPage .stock-exchange-rate,
html[data-theme="dark"] #stockPage .stock-metric,
html[data-theme="dark"] #stockPage .stock-panel,
html[data-theme="dark"] #stockPage .stock-toolbar,
html[data-theme="dark"] #stockPage .stock-table-area,
html[data-theme="dark"] #stockPage .stock-table,
html[data-theme="dark"] #stockPage .stock-icon-btn,
html[data-theme="dark"] #stockPage .stock-row-menu,
html[data-theme="dark"] #stockPage .stock-modal,
html[data-theme="dark"] #stockPage .stock-modal__header,
html[data-theme="dark"] #stockPage .stock-modal__footer,
html[data-theme="dark"] #stockPage .stock-detail-metric,
html[data-theme="dark"] #stockPage .stock-detail-field,
html[data-theme="dark"] #stockPage .stock-import-stat {
  background:
    var(--stk-surface);
}


html[data-theme="dark"] #stockPage .stock-search,
html[data-theme="dark"] #stockPage .stock-filter,
html[data-theme="dark"] #stockPage .stock-table thead th,
html[data-theme="dark"] #stockPage .stock-detail__hero,
html[data-theme="dark"] #stockPage .stock-detail-deposit,
html[data-theme="dark"] #stockPage .stock-inline-empty,
html[data-theme="dark"] #stockPage .stock-selected-product,
html[data-theme="dark"] #stockPage .stock-switch,
html[data-theme="dark"] #stockPage .stock-import-dropzone,
html[data-theme="dark"] #stockPage .stock-movement-type,
html[data-theme="dark"] #stockPage .stock-import-action {
  background:
    var(--stk-surface-soft);
}


/* =========================================================
   DARK MODE WHITE INNER SURFACES
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-product__image,
html[data-theme="dark"] #stockPage .stock-detail__image,
html[data-theme="dark"] #stockPage .stock-detail-deposit__icon,
html[data-theme="dark"] #stockPage .stock-selected-product__image,
html[data-theme="dark"] #stockPage .stock-switch__icon,
html[data-theme="dark"] #stockPage .stock-import-dropzone__icon,
html[data-theme="dark"] #stockPage .stock-import-file {
  background:
    #111419;
}


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

html[data-theme="dark"] #stockPage .stock-field input,
html[data-theme="dark"] #stockPage .stock-field select,
html[data-theme="dark"] #stockPage .stock-field textarea,
html[data-theme="dark"] #stockPage .stock-select {
  background:
    #111419;

  color:
    #ffffff;
}


html[data-theme="dark"] #stockPage .stock-field input:focus,
html[data-theme="dark"] #stockPage .stock-field select:focus,
html[data-theme="dark"] #stockPage .stock-field textarea:focus,
html[data-theme="dark"] #stockPage .stock-search:focus-within,
html[data-theme="dark"] #stockPage .stock-filter:focus-within {
  background:
    #15191e;
}


html[data-theme="dark"] #stockPage .stock-field select option,
html[data-theme="dark"] #stockPage .stock-select option {
  background:
    #0d0f12;

  color:
    #ffffff;
}


/* =========================================================
   DARK MODE CURRENCY
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-currency-control .stock-btn {
  color:
    #ffffff;
}


html[data-theme="dark"] #stockPage .stock-currency-control .stock-btn:hover {
  background:
    #171b20;
}


html[data-theme="dark"] #stockPage .stock-currency-control .stock-btn.is-active {
  border-color:
    #51488a;

  background:
    #1a1b26;

  color:
    #ffffff;
}


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

html[data-theme="dark"] #stockPage .stock-status--normal {
  color:
    #9be0b8;
}


html[data-theme="dark"] #stockPage .stock-status--bajo {
  color:
    #f1c36a;
}


html[data-theme="dark"] #stockPage .stock-status--critico,
html[data-theme="dark"] #stockPage .stock-status--sin_stock,
html[data-theme="dark"] #stockPage .stock-status--negativo {
  color:
    #ff9c95;
}


html[data-theme="dark"] #stockPage .stock-status--sobrestock {
  color:
    #a5c8f1;
}


/* =========================================================
   DARK AVAILABLE / NEGATIVE
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-number--available {
  color:
    #9be0b8 !important;
}


html[data-theme="dark"] #stockPage .stock-number--negative {
  color:
    #ff9c95 !important;
}


/* =========================================================
   DARK TOASTS
   ========================================================= */

html[data-theme="dark"] .stock-toast {
  border-color:
    #3c434d;

  background:
    #0d0f12;

  color:
    #ffffff;
}


html[data-theme="dark"] .stock-toast > span {
  color:
    #ffffff;
}


html[data-theme="dark"] .stock-toast__icon {
  border-color:
    #3c434d;

  background:
    #111419;
}


/* =========================================================
   BUTTON / INPUT FOCUS
   ========================================================= */

#stockPage button:focus-visible,
#stockPage input:focus-visible,
#stockPage select:focus-visible,
#stockPage textarea:focus-visible {
  outline:
    2px solid var(--stk-violet);

  outline-offset:
    2px;
}/* =========================================================
   RESPONSIVE · 1500
   ========================================================= */

@media (
  max-width:
    1500px
) {

  #stockPage {
    padding:
      16px !important;
  }


  #stockPage .stock-page__header {
    align-items:
      flex-start;
  }


  #stockPage .stock-page__actions {
    max-width:
      760px;
  }


  #stockPage .stock-metrics {
    grid-template-columns:
      repeat(
        5,
        minmax(0, 1fr)
      );
  }


  #stockPage .stock-toolbar {
    align-items:
      flex-start;
  }


  #stockPage .stock-toolbar__filters {
    flex-wrap:
      wrap;
  }


  #stockPage .stock-select {
    max-width:
      140px;
  }

}


/* =========================================================
   RESPONSIVE · 1320
   ========================================================= */

@media (
  max-width:
    1320px
) {

  #stockPage .stock-page__header {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  #stockPage .stock-page__actions {
    width:
      100%;

    max-width:
      none;

    justify-content:
      flex-start;
  }


  #stockPage .stock-metrics {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }


  #stockPage .stock-toolbar {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  #stockPage .stock-search {
    width:
      100%;

    max-width:
      none;

    min-width:
      0;
  }


  #stockPage .stock-toolbar__filters {
    width:
      100%;

    justify-content:
      flex-start;
  }


  #stockPage .stock-filter {
    flex:
      1 1 150px;
  }


  #stockPage .stock-select {
    width:
      100%;

    min-width:
      0;

    max-width:
      none;
  }


  #stockPage .stock-table thead th:nth-child(4),
  #stockPage .stock-table tbody td:nth-child(4),
  #stockPage .stock-table thead th:nth-child(5),
  #stockPage .stock-table tbody td:nth-child(5) {
    display:
      none;
  }

}


/* =========================================================
   RESPONSIVE · 1100
   ========================================================= */

@media (
  max-width:
    1100px
) {

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


  #stockPage .stock-detail__metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  #stockPage .stock-detail__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  #stockPage .stock-import-switches {
    grid-template-columns:
      1fr;
  }


  #stockPage .stock-import-summary {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }


  #stockPage .stock-table thead th:nth-child(6),
  #stockPage .stock-table tbody td:nth-child(6),
  #stockPage .stock-table thead th:nth-child(9),
  #stockPage .stock-table tbody td:nth-child(9) {
    display:
      none;
  }

}


/* =========================================================
   RESPONSIVE · 860
   TABLE → CARDS
   ========================================================= */

@media (
  max-width:
    860px
) {

  #stockPage {
    padding:
      12px !important;
  }


  #stockPage .stock-page__header {
    gap:
      12px;
  }


  #stockPage .stock-page__title h1 {
    font-size:
      24px;
  }


  #stockPage .stock-page__actions {
    gap:
      6px;
  }


  #stockPage .stock-page__actions > * {
    flex:
      0 0 auto;
  }


  #stockPage .stock-currency-control {
    order:
      -2;
  }


  #stockPage .stock-exchange-rate {
    order:
      -1;
  }


  #stockPage .stock-toolbar__filters {
    display:
      grid;

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

    gap:
      7px;
  }


  #stockPage .stock-filter {
    width:
      100%;
  }


  #stockPage .stock-table-wrap {
    padding:
      8px;

    overflow:
      visible !important;
  }


  #stockPage .stock-table,
  #stockPage .stock-table tbody,
  #stockPage .stock-table tr,
  #stockPage .stock-table td {
    display:
      block;

    width:
      100%;
  }


  #stockPage .stock-table {
    border-collapse:
      separate;

    border-spacing:
      0;
  }


  #stockPage .stock-table thead {
    display:
      none;
  }


  #stockPage .stock-table tbody {
    display:
      grid;

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

    gap:
      8px;
  }


  #stockPage .stock-table tbody tr {
    position:
      relative;

    min-width:
      0;

    display:
      grid;

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

    gap:
      0;

    padding:
      9px;

    overflow:
      visible !important;

    border:
      1px solid var(--stk-border);

    border-radius:
      11px;

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


  #stockPage .stock-table tbody tr:hover {
    background:
      var(--stk-surface);
  }


  #stockPage .stock-table tbody tr.is-selected {
    border-color:
      var(--stk-violet);

    background:
      var(--stk-violet-soft);
  }


  #stockPage .stock-table tbody td {
    min-width:
      0;

    height:
      auto;

    min-height:
      38px;

    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    gap:
      8px;

    padding:
      7px 0;

    overflow:
      visible !important;

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

    text-align:
      right;
  }


  #stockPage .stock-table tbody td::before {
    content:
      attr(data-label);

    min-width:
      0;

    flex:
      0 0 auto;

    color:
      #050505;

    font-size:
      7.2px;

    font-weight:
      850;

    letter-spacing:
      .025em;

    text-align:
      left;
  }


  #stockPage .stock-table tbody td:nth-child(1),
  #stockPage .stock-table tbody td:nth-child(3),
  #stockPage .stock-table tbody td:nth-child(12) {
    grid-column:
      1 / -1;
  }


  #stockPage .stock-table tbody td:nth-child(4),
  #stockPage .stock-table tbody td:nth-child(5),
  #stockPage .stock-table tbody td:nth-child(6),
  #stockPage .stock-table tbody td:nth-child(9) {
    display:
      flex;
  }


  #stockPage .stock-table tbody td:nth-child(12) {
    min-height:
      34px;

    padding-bottom:
      0;

    border-bottom:
      0;
  }


  #stockPage .stock-table tbody td:nth-last-child(2) {
    border-bottom:
      0;
  }


  #stockPage .stock-col-check {
    justify-content:
      flex-start !important;

    text-align:
      left;
  }


  #stockPage .stock-col-check::before {
    content:
      "Seleccionar";
  }


  #stockPage .stock-cell-product {
    display:
      block !important;

    padding-top:
      8px !important;

    padding-bottom:
      8px !important;
  }


  #stockPage .stock-cell-product::before {
    display:
      none;
  }


  #stockPage .stock-product {
    justify-content:
      flex-start;

    text-align:
      left;
  }


  #stockPage .stock-product__image {
    width:
      40px;

    height:
      40px;

    flex:
      0 0 40px;
  }


  #stockPage .stock-product__content strong {
    white-space:
      normal;
  }


  #stockPage .stock-product__content small {
    white-space:
      normal;
  }


  #stockPage .stock-deposit {
    justify-content:
      flex-end;
  }


  #stockPage .stock-col-actions::before {
    content:
      "Acciones";
  }


  #stockPage .stock-row-actions {
    margin-left:
      auto;
  }


  #stockPage .stock-row-menu {
    top:
      auto !important;

    right:
      0 !important;

    bottom:
      calc(100% + 6px) !important;

    left:
      auto !important;
  }


  #stockPage .stock-pagination {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  #stockPage .stock-pagination__info {
    justify-content:
      center;

    flex-wrap:
      wrap;
  }


  #stockPage .stock-pagination__controls {
    justify-content:
      center;
  }


  html[data-theme="dark"] #stockPage .stock-table tbody td::before {
    color:
      #ffffff;
  }

}


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

@media (
  max-width:
    700px
) {

  #stockPage .stock-page__actions {
    display:
      grid;

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


  #stockPage .stock-page__actions .stock-btn {
    width:
      100%;
  }


  #stockPage .stock-currency-control {
    grid-column:
      span 1;

    width:
      100%;
  }


  #stockPage .stock-currency-control .stock-btn {
    flex:
      1;
  }


  #stockPage .stock-exchange-rate {
    width:
      100%;

    justify-content:
      center;
  }


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


  #stockPage .stock-toolbar__filters {
    grid-template-columns:
      1fr;
  }


  #stockPage .stock-table tbody {
    grid-template-columns:
      1fr;
  }


  #stockPage .stock-detail__hero {
    align-items:
      flex-start;
  }


  #stockPage .stock-detail__hero-status {
    margin-left:
      auto;
  }


  #stockPage .stock-detail__metrics {
    grid-template-columns:
      1fr;
  }


  #stockPage .stock-detail__grid {
    grid-template-columns:
      1fr;
  }


  #stockPage .stock-detail-deposit {
    grid-template-columns:
      1fr
      1fr;

    gap:
      8px;
  }


  #stockPage .stock-detail-deposit__place {
    grid-column:
      1 / -1;
  }


  #stockPage .stock-detail-deposit__value {
    align-items:
      flex-start;
  }


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


  #stockPage .stock-field--full {
    grid-column:
      auto;
  }


  #stockPage .stock-import-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  #stockPage .stock-modal__footer {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  #stockPage .stock-modal__footer > .stock-btn {
    width:
      100%;
  }


  #stockPage .stock-modal__footer-group {
    width:
      100%;

    margin-left:
      0;
  }


  #stockPage .stock-modal__footer-group .stock-btn {
    flex:
      1;
  }

}


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

@media (
  max-width:
    520px
) {

  #stockPage {
    padding:
      9px !important;
  }


  #stockPage .stock-page__title h1 {
    font-size:
      22px;
  }


  #stockPage .stock-page__title p {
    font-size:
      10px;
  }


  #stockPage .stock-page__actions {
    grid-template-columns:
      1fr;
  }


  #stockPage .stock-currency-control {
    grid-column:
      auto;
  }


  #stockPage .stock-metric {
    min-height:
      68px;

    padding:
      9px;
  }


  #stockPage .stock-metric__content > strong {
    font-size:
      16px;
  }


  #stockPage .stock-toolbar {
    padding:
      8px;
  }


  #stockPage .stock-search {
    height:
      35px;
  }


  #stockPage .stock-table-wrap {
    padding:
      6px;
  }


  #stockPage .stock-table tbody tr {
    padding:
      8px;
  }


  #stockPage .stock-modal-backdrop {
    align-items:
      flex-end;

    padding:
      8px;
  }


  #stockPage .stock-modal {
    width:
      100%;

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

    border-radius:
      14px;
  }


  #stockPage .stock-modal__header {
    min-height:
      58px;

    padding:
      10px;
  }


  #stockPage .stock-modal__body {
    padding:
      10px;
  }


  #stockPage .stock-modal__footer {
    min-height:
      54px;

    padding:
      9px 10px;
  }


  #stockPage .stock-detail__hero {
    display:
      grid;

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

    gap:
      9px;
  }


  #stockPage .stock-detail__image {
    width:
      46px;

    height:
      46px;

    flex:
      0 0 46px;
  }


  #stockPage .stock-detail__hero-status {
    grid-column:
      1 / -1;

    margin-left:
      0;
  }


  #stockPage .stock-selected-product {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  #stockPage .stock-selected-product__stock {
    width:
      100%;

    align-items:
      flex-start;

    padding-top:
      8px;

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


  #stockPage .stock-import-summary {
    grid-template-columns:
      1fr;
  }


  #stockPage .stock-switch {
    grid-template-columns:
      30px
      minmax(0, 1fr)
      32px;
  }


  .stock-toast-container {
    right:
      9px;

    bottom:
      9px;

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

}


/* =========================================================
   VERY SMALL
   ========================================================= */

@media (
  max-width:
    380px
) {

  #stockPage .stock-pagination__page {
    font-size:
      7.7px;
  }


  #stockPage .stock-pagination__controls {
    gap:
      5px;
  }


  #stockPage .stock-btn {
    min-height:
      34px;

    padding:
      0 9px;

    font-size:
      8.8px;
  }


  #stockPage .stock-modal__heading-copy h2 {
    font-size:
      14px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {

  #stockPage *,
  #stockPage *::before,
  #stockPage *::after,
  .stock-toast,
  .stock-toast::before,
  .stock-toast::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .001ms !important;
  }

}


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

@media print {

  #stockPage .stock-page__actions,
  #stockPage .stock-toolbar,
  #stockPage .stock-pagination,
  #stockPage .stock-col-actions,
  #stockPage .stock-col-check,
  #stockPage .stock-toast-container {
    display:
      none !important;
  }


  #stockPage {
    padding:
      0 !important;

    color:
      #000000 !important;

    background:
      #ffffff !important;
  }


  #stockPage .stock-panel,
  #stockPage .stock-metric,
  #stockPage .stock-table {
    border-color:
      #bfbfbf !important;

    background:
      #ffffff !important;
  }

}


/* =========================================================
   FINAL SAFETY · NO HORIZONTAL PAGE SCROLL
   ========================================================= */

html,
body {
  max-width:
    100%;

  overflow-x:
    hidden;
}


#stockPage,
#stockPage .stock-panel,
#stockPage .stock-toolbar,
#stockPage .stock-table-area,
#stockPage .stock-table-wrap,
#stockPage .stock-pagination,
#stockPage .stock-modal__body,
#stockPage .stock-detail,
#stockPage .stock-form {
  max-width:
    100%;

  min-width:
    0;
}


/* =========================================================
   FINAL SAFETY · TEXT VISIBILITY LIGHT MODE
   ========================================================= */

html:not([data-theme="dark"]) #stockPage,
html:not([data-theme="dark"]) #stockPage button,
html:not([data-theme="dark"]) #stockPage input,
html:not([data-theme="dark"]) #stockPage select,
html:not([data-theme="dark"]) #stockPage textarea {
  color:
    #050505;
}


/* =========================================================
   FINAL SAFETY · ACTION MENU
   NO CLIPPING
   ========================================================= */

#stockPage .stock-panel,
#stockPage .stock-table-area,
#stockPage .stock-table-wrap,
#stockPage .stock-table,
#stockPage .stock-table tbody,
#stockPage .stock-table tbody tr,
#stockPage .stock-table tbody td,
#stockPage .stock-col-actions,
#stockPage .stock-row-actions {
  overflow:
    visible !important;
}


#stockPage .stock-table tbody tr:has(.stock-row-menu) {
  position:
    relative;

  z-index:
    500 !important;
}


#stockPage .stock-row-menu {
  z-index:
    5000 !important;
}


/* =========================================================
   FINAL SAFETY · MODALS ABOVE APP
   ========================================================= */

#stockPage .stock-modal-backdrop {
  z-index:
    2147483000 !important;
}


.stock-toast-container {
  z-index:
    2147483600 !important;
}


/* =========================================================
   FINAL SAFETY · LUCIDE
   ========================================================= */

#stockPage svg {
  display:
    block;
}


/* =========================================================
   END
   ========================================================= *//* =========================================================
   NAI HUB · STOCK
   FULL WIDTH + RESPONSIVE + DARK NEGRO REAL
   AGREGAR AL FINAL DE:

   frontend/src/pages/stock/stock.css
   ========================================================= */


/* =========================================================
   CONTENEDOR GENERAL
   MISMO COMPORTAMIENTO QUE LIBROS
   ========================================================= */

.app-content:has(#stockPage) {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  min-height:
    100%;

  margin:
    0 !important;

  padding:
    10px 12px !important;

  overflow-x:
    hidden !important;
}


/* =========================================================
   PAGE
   ========================================================= */

#stockPage,
.stock-page {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  min-height:
    calc(
      100dvh -
      var(--topbar-height, 68px) -
      20px
    );

  margin:
    0 !important;

  padding:
    0 !important;

  overflow-x:
    clip !important;
}


/* =========================================================
   FULL WIDTH
   ========================================================= */

#stockPage .stock-page__header,
#stockPage .stock-metrics,
#stockPage .stock-panel,
#stockPage .stock-toolbar,
#stockPage .stock-table-area,
#stockPage .stock-table-wrap,
#stockPage .stock-table,
#stockPage .stock-pagination {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;
}


#stockPage .stock-table {
  min-width:
    100% !important;

  table-layout:
    fixed;
}


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

#stockPage .stock-page__header {
  align-items:
    center;
}


#stockPage .stock-page__title {
  min-width:
    0;

  flex:
    1 1 360px;
}


#stockPage .stock-page__actions {
  min-width:
    0;

  max-width:
    none !important;

  flex:
    0 1 auto;

  flex-wrap:
    wrap;
}


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

#stockPage .stock-toolbar {
  align-items:
    center;
}


#stockPage .stock-search {
  width:
    min(
      100%,
      500px
    );

  min-width:
    260px;

  max-width:
    500px;

  flex:
    1 1 360px;
}


#stockPage .stock-toolbar__filters {
  min-width:
    0;

  flex:
    1 1 auto;

  flex-wrap:
    wrap;
}


#stockPage .stock-filter {
  min-width:
    0;
}


#stockPage .stock-select {
  max-width:
    none;
}


/* =========================================================
   TABLA
   APROVECHAR TODO EL ANCHO
   ========================================================= */

#stockPage .stock-table thead th:nth-child(1) {
  width:
    34px;
}


#stockPage .stock-table thead th:nth-child(2) {
  width:
    8%;
}


#stockPage .stock-table thead th:nth-child(3) {
  width:
    20%;
}


#stockPage .stock-table thead th:nth-child(4) {
  width:
    11%;
}


#stockPage .stock-table thead th:nth-child(5) {
  width:
    11%;
}


#stockPage .stock-table thead th:nth-child(6) {
  width:
    10%;
}


#stockPage .stock-table thead th:nth-child(7) {
  width:
    7%;
}


#stockPage .stock-table thead th:nth-child(8) {
  width:
    8%;
}


#stockPage .stock-table thead th:nth-child(9) {
  width:
    7%;
}


#stockPage .stock-table thead th:nth-child(10) {
  width:
    9%;
}


#stockPage .stock-table thead th:nth-child(11) {
  width:
    10%;
}


#stockPage .stock-table thead th:nth-child(12) {
  width:
    50px;
}


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

#stockPage .stock-table thead th {
  font-size:
    8px;
}


#stockPage .stock-table tbody td {
  font-size:
    9px;
}


#stockPage .stock-product__content strong {
  font-size:
    9.6px;
}


#stockPage .stock-product__content small {
  font-size:
    7.6px;
}


#stockPage .stock-code strong {
  font-size:
    9px;
}


#stockPage .stock-code small {
  font-size:
    7.5px;
}


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

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

  --stk-surface:
    #050505;

  --stk-surface-soft:
    #0a0a0a;

  --stk-surface-hover:
    #111111;

  --stk-border:
    #242424;

  --stk-border-strong:
    #3a3a3a;

  --stk-text:
    #ffffff;

  --stk-violet:
    #a495dc;

  --stk-violet-soft:
    rgba(164, 149, 220, .10);

  color:
    #ffffff !important;

  background:
    #000000 !important;
}


/* =========================================================
   DARK · CONTENEDOR PADRE
   ========================================================= */

html[data-theme="dark"]
.app-content:has(#stockPage),

body[data-theme="dark"]
.app-content:has(#stockPage),

body.dark
.app-content:has(#stockPage) {
  background:
    #000000 !important;
}


/* =========================================================
   DARK · SUPERFICIES PRINCIPALES
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-panel,
html[data-theme="dark"] #stockPage .stock-toolbar,
html[data-theme="dark"] #stockPage .stock-table-area,
html[data-theme="dark"] #stockPage .stock-table,
html[data-theme="dark"] #stockPage .stock-metric,
html[data-theme="dark"] #stockPage .stock-modal,
html[data-theme="dark"] #stockPage .stock-modal__header,
html[data-theme="dark"] #stockPage .stock-modal__footer,
html[data-theme="dark"] #stockPage .stock-detail-metric,
html[data-theme="dark"] #stockPage .stock-detail-field,

body.dark #stockPage .stock-panel,
body.dark #stockPage .stock-toolbar,
body.dark #stockPage .stock-table-area,
body.dark #stockPage .stock-table,
body.dark #stockPage .stock-metric,
body.dark #stockPage .stock-modal,
body.dark #stockPage .stock-modal__header,
body.dark #stockPage .stock-modal__footer,
body.dark #stockPage .stock-detail-metric,
body.dark #stockPage .stock-detail-field {
  background:
    #050505 !important;
}


/* =========================================================
   DARK · SUPERFICIES SECUNDARIAS
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-search,
html[data-theme="dark"] #stockPage .stock-filter,
html[data-theme="dark"] #stockPage .stock-table thead th,
html[data-theme="dark"] #stockPage .stock-metric__icon,
html[data-theme="dark"] #stockPage .stock-currency-control,
html[data-theme="dark"] #stockPage .stock-exchange-rate,
html[data-theme="dark"] #stockPage .stock-detail__hero,
html[data-theme="dark"] #stockPage .stock-detail-deposit,
html[data-theme="dark"] #stockPage .stock-inline-empty,
html[data-theme="dark"] #stockPage .stock-selected-product,
html[data-theme="dark"] #stockPage .stock-switch,
html[data-theme="dark"] #stockPage .stock-import-dropzone,
html[data-theme="dark"] #stockPage .stock-movement-type,
html[data-theme="dark"] #stockPage .stock-import-action,

body.dark #stockPage .stock-search,
body.dark #stockPage .stock-filter,
body.dark #stockPage .stock-table thead th,
body.dark #stockPage .stock-metric__icon,
body.dark #stockPage .stock-currency-control,
body.dark #stockPage .stock-exchange-rate,
body.dark #stockPage .stock-detail__hero,
body.dark #stockPage .stock-detail-deposit,
body.dark #stockPage .stock-inline-empty,
body.dark #stockPage .stock-selected-product,
body.dark #stockPage .stock-switch,
body.dark #stockPage .stock-import-dropzone,
body.dark #stockPage .stock-movement-type,
body.dark #stockPage .stock-import-action {
  background:
    #0a0a0a !important;
}


/* =========================================================
   DARK · INPUTS / SELECTS
   ========================================================= */

html[data-theme="dark"] #stockPage input,
html[data-theme="dark"] #stockPage select,
html[data-theme="dark"] #stockPage textarea,

body.dark #stockPage input,
body.dark #stockPage select,
body.dark #stockPage textarea {
  background-color:
    #0a0a0a !important;

  border-color:
    #292929 !important;

  color:
    #ffffff !important;
}


html[data-theme="dark"] #stockPage select option,
body.dark #stockPage select option {
  background:
    #050505 !important;

  color:
    #ffffff !important;
}


html[data-theme="dark"] #stockPage input:focus,
html[data-theme="dark"] #stockPage select:focus,
html[data-theme="dark"] #stockPage textarea:focus,

body.dark #stockPage input:focus,
body.dark #stockPage select:focus,
body.dark #stockPage textarea:focus {
  background:
    #111111 !important;

  border-color:
    #555555 !important;
}


/* =========================================================
   DARK · BOTONES
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-btn--secondary,
html[data-theme="dark"] #stockPage .stock-icon-btn,

body.dark #stockPage .stock-btn--secondary,
body.dark #stockPage .stock-icon-btn {
  border-color:
    #292929 !important;

  background:
    #0a0a0a !important;

  color:
    #ffffff !important;
}


html[data-theme="dark"] #stockPage .stock-btn--secondary:hover,
html[data-theme="dark"] #stockPage .stock-icon-btn:hover,

body.dark #stockPage .stock-btn--secondary:hover,
body.dark #stockPage .stock-icon-btn:hover {
  border-color:
    #444444 !important;

  background:
    #111111 !important;
}


/* =========================================================
   DARK · CURRENCY
   ========================================================= */

html[data-theme="dark"]
#stockPage
.stock-currency-control
.stock-btn,

body.dark
#stockPage
.stock-currency-control
.stock-btn {
  background:
    transparent !important;

  color:
    #ffffff !important;
}


html[data-theme="dark"]
#stockPage
.stock-currency-control
.stock-btn:hover,

body.dark
#stockPage
.stock-currency-control
.stock-btn:hover {
  background:
    #111111 !important;
}


html[data-theme="dark"]
#stockPage
.stock-currency-control
.stock-btn.is-active,

body.dark
#stockPage
.stock-currency-control
.stock-btn.is-active {
  border-color:
    #444444 !important;

  background:
    #161616 !important;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK · MENÚ ACCIONES
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-row-menu,
body.dark #stockPage .stock-row-menu {
  border-color:
    #3a3a3a !important;

  background:
    #080808 !important;

  color:
    #ffffff !important;
}


html[data-theme="dark"] #stockPage .stock-row-menu button,
body.dark #stockPage .stock-row-menu button {
  color:
    #ffffff !important;
}


html[data-theme="dark"] #stockPage .stock-row-menu button:hover,
body.dark #stockPage .stock-row-menu button:hover {
  background:
    #141414 !important;
}


/* =========================================================
   DARK · IMÁGENES / ICONOS INTERNOS
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-product__image,
html[data-theme="dark"] #stockPage .stock-detail__image,
html[data-theme="dark"] #stockPage .stock-detail-deposit__icon,
html[data-theme="dark"] #stockPage .stock-selected-product__image,
html[data-theme="dark"] #stockPage .stock-switch__icon,
html[data-theme="dark"] #stockPage .stock-import-dropzone__icon,
html[data-theme="dark"] #stockPage .stock-import-file,

body.dark #stockPage .stock-product__image,
body.dark #stockPage .stock-detail__image,
body.dark #stockPage .stock-detail-deposit__icon,
body.dark #stockPage .stock-selected-product__image,
body.dark #stockPage .stock-switch__icon,
body.dark #stockPage .stock-import-dropzone__icon,
body.dark #stockPage .stock-import-file {
  background:
    #0a0a0a !important;
}


/* =========================================================
   DARK · MODAL BACKDROP
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-modal-backdrop,
body.dark #stockPage .stock-modal-backdrop {
  background:
    rgba(0, 0, 0, .76) !important;
}


/* =========================================================
   DARK · TOAST
   ========================================================= */

html[data-theme="dark"] .stock-toast,
body.dark .stock-toast {
  border-color:
    #353535 !important;

  background:
    #080808 !important;

  color:
    #ffffff !important;
}


html[data-theme="dark"] .stock-toast__icon,
body.dark .stock-toast__icon {
  border-color:
    #353535 !important;

  background:
    #111111 !important;
}


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

@media (
  max-width:
    1500px
) {

  .app-content:has(#stockPage) {
    padding:
      10px !important;
  }


  #stockPage .stock-page__header {
    align-items:
      flex-start;
  }


  #stockPage .stock-page__actions {
    justify-content:
      flex-end;
  }


  #stockPage .stock-toolbar {
    align-items:
      flex-start;
  }

}


/* =========================================================
   RESPONSIVE · 1350
   ========================================================= */

@media (
  max-width:
    1350px
) {

  #stockPage .stock-page__header {
    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      12px;
  }


  #stockPage .stock-page__actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


  #stockPage .stock-toolbar {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  #stockPage .stock-search {
    width:
      100%;

    max-width:
      none;

    min-width:
      0;
  }


  #stockPage .stock-toolbar__filters {
    width:
      100%;

    display:
      grid;

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

    gap:
      7px;
  }


  #stockPage .stock-filter {
    width:
      100%;
  }


  #stockPage .stock-select {
    width:
      100%;

    min-width:
      0;

    max-width:
      none;
  }

}


/* =========================================================
   RESPONSIVE · 1100
   ========================================================= */

@media (
  max-width:
    1100px
) {

  #stockPage .stock-toolbar__filters {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }


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

}


/* =========================================================
   RESPONSIVE · 860
   ========================================================= */

@media (
  max-width:
    860px
) {

  .app-content:has(#stockPage) {
    padding:
      8px !important;
  }


  #stockPage {
    padding:
      0 !important;
  }


  #stockPage .stock-toolbar__filters {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  #stockPage .stock-page__actions {
    display:
      grid;

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

    width:
      100%;
  }


  #stockPage .stock-page__actions > * {
    min-width:
      0;
  }


  #stockPage .stock-page__actions .stock-btn {
    width:
      100%;
  }


  #stockPage .stock-currency-control,
  #stockPage .stock-exchange-rate {
    width:
      100%;
  }


  #stockPage .stock-table tbody {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


/* =========================================================
   RESPONSIVE · 650
   ========================================================= */

@media (
  max-width:
    650px
) {

  .app-content:has(#stockPage) {
    padding:
      6px !important;
  }


  #stockPage .stock-page__title h1 {
    font-size:
      24px;
  }


  #stockPage .stock-page__title p {
    font-size:
      10.5px;
  }


  #stockPage .stock-page__actions {
    grid-template-columns:
      1fr;
  }


  #stockPage .stock-toolbar__filters {
    grid-template-columns:
      1fr;
  }


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


  #stockPage .stock-table-wrap {
    padding:
      6px !important;
  }


  #stockPage .stock-table tbody {
    grid-template-columns:
      1fr !important;
  }


  #stockPage .stock-table tbody tr {
    width:
      100%;

    min-width:
      0;
  }


  #stockPage .stock-pagination {
    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      9px;
  }


  #stockPage .stock-pagination__info,
  #stockPage .stock-pagination__controls {
    justify-content:
      center;
  }


  #stockPage .stock-modal-backdrop {
    padding:
      8px;
  }


  #stockPage .stock-modal,
  #stockPage .stock-modal--large,
  #stockPage .stock-modal--xlarge {
    width:
      100% !important;

    max-width:
      none !important;

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


  #stockPage .stock-modal__body {
    padding:
      10px;
  }


  #stockPage .stock-form-grid,
  #stockPage .stock-detail__metrics,
  #stockPage .stock-detail__grid {
    grid-template-columns:
      1fr !important;
  }


  #stockPage .stock-detail-deposit {
    grid-template-columns:
      1fr
      auto
      auto;
  }

}


/* =========================================================
   RESPONSIVE · 430
   ========================================================= */

@media (
  max-width:
    430px
) {

  .app-content:has(#stockPage) {
    padding:
      5px !important;
  }


  #stockPage .stock-page__header {
    margin-bottom:
      10px;
  }


  #stockPage .stock-page__title h1 {
    font-size:
      22px;
  }


  #stockPage .stock-page__actions {
    gap:
      6px;
  }


  #stockPage .stock-btn {
    min-height:
      36px;

    font-size:
      9.5px;
  }


  #stockPage .stock-toolbar {
    padding:
      8px;
  }


  #stockPage .stock-search {
    height:
      38px;
  }


  #stockPage .stock-filter {
    height:
      38px;
  }


  #stockPage .stock-table-wrap {
    padding:
      5px !important;
  }


  #stockPage .stock-table tbody tr {
    padding:
      8px;
  }


  #stockPage .stock-table tbody td {
    min-height:
      38px;
  }


  #stockPage .stock-detail__hero {
    align-items:
      flex-start;

    flex-wrap:
      wrap;
  }


  #stockPage .stock-detail__hero-status {
    width:
      100%;
  }


  #stockPage .stock-detail-deposit {
    grid-template-columns:
      1fr;
  }


  #stockPage .stock-detail-deposit__value {
    align-items:
      flex-start;
  }


  #stockPage .stock-modal__footer {
    flex-wrap:
      wrap;
  }


  #stockPage .stock-modal__footer > *,
  #stockPage .stock-modal__footer-group,
  #stockPage .stock-modal__footer-group > * {
    width:
      100%;
  }

}


/* =========================================================
   FINAL SAFETY
   SIN SCROLL HORIZONTAL
   ========================================================= */

html,
body {
  max-width:
    100%;

  overflow-x:
    hidden;
}


#stockPage,
#stockPage .stock-page__header,
#stockPage .stock-page__actions,
#stockPage .stock-metrics,
#stockPage .stock-panel,
#stockPage .stock-toolbar,
#stockPage .stock-toolbar__filters,
#stockPage .stock-table-area,
#stockPage .stock-table-wrap,
#stockPage .stock-pagination,
#stockPage .stock-modal__body,
#stockPage .stock-detail,
#stockPage .stock-form {
  max-width:
    100%;

  min-width:
    0;
}/* =========================================================
   NAI HUB · STOCK
   FIX ICONOS · DARK MODE
   AGREGAR AL FINAL DE:
   frontend/src/pages/stock/stock.css
   ========================================================= */


/* =========================================================
   TODOS LOS ICONOS EN DARK
   ========================================================= */

html[data-theme="dark"] #stockPage svg,
body[data-theme="dark"] #stockPage svg,
body.dark #stockPage svg,
.dark #stockPage svg {
  color:
    currentColor !important;

  stroke:
    currentColor !important;
}


/* =========================================================
   ICONOS PRINCIPALES
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-metric__icon,
html[data-theme="dark"] #stockPage .stock-product__image,
html[data-theme="dark"] #stockPage .stock-detail__image,
html[data-theme="dark"] #stockPage .stock-detail-metric__icon,
html[data-theme="dark"] #stockPage .stock-detail-field__label,
html[data-theme="dark"] #stockPage .stock-detail-deposit__icon,
html[data-theme="dark"] #stockPage .stock-modal__heading-icon,
html[data-theme="dark"] #stockPage .stock-field__label,
html[data-theme="dark"] #stockPage .stock-selected-product__image,
html[data-theme="dark"] #stockPage .stock-switch__icon,
html[data-theme="dark"] #stockPage .stock-import-dropzone__icon,
html[data-theme="dark"] #stockPage .stock-import-file__icon,
html[data-theme="dark"] #stockPage .stock-import-stat__icon,
html[data-theme="dark"] #stockPage .stock-empty__icon,

body.dark #stockPage .stock-metric__icon,
body.dark #stockPage .stock-product__image,
body.dark #stockPage .stock-detail__image,
body.dark #stockPage .stock-detail-metric__icon,
body.dark #stockPage .stock-detail-field__label,
body.dark #stockPage .stock-detail-deposit__icon,
body.dark #stockPage .stock-modal__heading-icon,
body.dark #stockPage .stock-field__label,
body.dark #stockPage .stock-selected-product__image,
body.dark #stockPage .stock-switch__icon,
body.dark #stockPage .stock-import-dropzone__icon,
body.dark #stockPage .stock-import-file__icon,
body.dark #stockPage .stock-import-stat__icon,
body.dark #stockPage .stock-empty__icon {
  color:
    #ffffff !important;
}


/* =========================================================
   ICONOS DE BOTONES
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-btn,
html[data-theme="dark"] #stockPage .stock-icon-btn,
html[data-theme="dark"] #stockPage .stock-row-menu button,

body.dark #stockPage .stock-btn,
body.dark #stockPage .stock-icon-btn,
body.dark #stockPage .stock-row-menu button {
  color:
    #ffffff !important;
}


html[data-theme="dark"] #stockPage .stock-btn svg,
html[data-theme="dark"] #stockPage .stock-icon-btn svg,
html[data-theme="dark"] #stockPage .stock-row-menu button svg,

body.dark #stockPage .stock-btn svg,
body.dark #stockPage .stock-icon-btn svg,
body.dark #stockPage .stock-row-menu button svg {
  color:
    #ffffff !important;

  stroke:
    #ffffff !important;
}


/* =========================================================
   ICONOS DE FILTROS / BUSCADOR
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-search > svg,
html[data-theme="dark"] #stockPage .stock-filter > svg,
html[data-theme="dark"] #stockPage .stock-exchange-rate > svg,

body.dark #stockPage .stock-search > svg,
body.dark #stockPage .stock-filter > svg,
body.dark #stockPage .stock-exchange-rate > svg {
  color:
    #ffffff !important;

  stroke:
    #ffffff !important;
}


/* =========================================================
   ICONOS DE DEPÓSITO / EDITORIAL / CATEGORÍA
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-deposit,
html[data-theme="dark"] #stockPage .stock-deposit svg,

body.dark #stockPage .stock-deposit,
body.dark #stockPage .stock-deposit svg {
  color:
    #ffffff !important;

  stroke:
    #ffffff !important;
}


/* =========================================================
   DETAIL · TODOS LOS ÍCONOS
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-detail svg,
body.dark #stockPage .stock-detail svg {
  color:
    #ffffff !important;

  stroke:
    #ffffff !important;
}


/* =========================================================
   SECTION TITLE ICON
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-section-title > svg,
body.dark #stockPage .stock-section-title > svg {
  color:
    #ffffff !important;

  stroke:
    #ffffff !important;
}


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

html[data-theme="dark"] #stockPage .stock-modal__heading-icon,
body.dark #stockPage .stock-modal__heading-icon {
  border-color:
    #292929 !important;

  background:
    #0a0a0a !important;

  color:
    #ffffff !important;
}


html[data-theme="dark"] #stockPage .stock-modal__heading-icon svg,
body.dark #stockPage .stock-modal__heading-icon svg {
  color:
    #ffffff !important;

  stroke:
    #ffffff !important;
}


/* =========================================================
   DETAIL HERO IMAGE PLACEHOLDER
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-detail__image,
body.dark #stockPage .stock-detail__image {
  border-color:
    #292929 !important;

  background:
    #080808 !important;

  color:
    #ffffff !important;
}


html[data-theme="dark"] #stockPage .stock-detail__image svg,
body.dark #stockPage .stock-detail__image svg {
  color:
    #ffffff !important;

  stroke:
    #ffffff !important;
}


/* =========================================================
   DETAIL METRIC ICONS
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-detail-metric__icon,
body.dark #stockPage .stock-detail-metric__icon {
  border-color:
    #292929 !important;

  background:
    #0a0a0a !important;

  color:
    #ffffff !important;
}


html[data-theme="dark"] #stockPage .stock-detail-metric__icon svg,
body.dark #stockPage .stock-detail-metric__icon svg {
  color:
    #ffffff !important;

  stroke:
    #ffffff !important;
}


/* =========================================================
   DETAIL FIELD ICONS
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-detail-field__label,
body.dark #stockPage .stock-detail-field__label {
  color:
    #ffffff !important;
}


html[data-theme="dark"] #stockPage .stock-detail-field__label svg,
body.dark #stockPage .stock-detail-field__label svg {
  color:
    #ffffff !important;

  stroke:
    #ffffff !important;
}


/* =========================================================
   DEPÓSITO DETAIL
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-detail-deposit__icon,
body.dark #stockPage .stock-detail-deposit__icon {
  border-color:
    #292929 !important;

  background:
    #0a0a0a !important;

  color:
    #ffffff !important;
}


html[data-theme="dark"] #stockPage .stock-detail-deposit__icon svg,
body.dark #stockPage .stock-detail-deposit__icon svg {
  color:
    #ffffff !important;

  stroke:
    #ffffff !important;
}


/* =========================================================
   STATUS
   CONSERVAR COLOR SEMÁNTICO
   ========================================================= */

html[data-theme="dark"] #stockPage .stock-status--normal,
body.dark #stockPage .stock-status--normal {
  color:
    #8ee6b5 !important;
}


html[data-theme="dark"] #stockPage .stock-status--normal svg,
body.dark #stockPage .stock-status--normal svg {
  color:
    #8ee6b5 !important;

  stroke:
    #8ee6b5 !important;
}


html[data-theme="dark"] #stockPage .stock-status--bajo,
body.dark #stockPage .stock-status--bajo {
  color:
    #f1c36a !important;
}


html[data-theme="dark"] #stockPage .stock-status--bajo svg,
body.dark #stockPage .stock-status--bajo svg {
  color:
    #f1c36a !important;

  stroke:
    #f1c36a !important;
}


html[data-theme="dark"] #stockPage .stock-status--critico,
html[data-theme="dark"] #stockPage .stock-status--sin_stock,
html[data-theme="dark"] #stockPage .stock-status--negativo,

body.dark #stockPage .stock-status--critico,
body.dark #stockPage .stock-status--sin_stock,
body.dark #stockPage .stock-status--negativo {
  color:
    #ff9c95 !important;
}


html[data-theme="dark"] #stockPage .stock-status--critico svg,
html[data-theme="dark"] #stockPage .stock-status--sin_stock svg,
html[data-theme="dark"] #stockPage .stock-status--negativo svg,

body.dark #stockPage .stock-status--critico svg,
body.dark #stockPage .stock-status--sin_stock svg,
body.dark #stockPage .stock-status--negativo svg {
  color:
    #ff9c95 !important;

  stroke:
    #ff9c95 !important;
}


html[data-theme="dark"] #stockPage .stock-status--sobrestock,
body.dark #stockPage .stock-status--sobrestock {
  color:
    #a9cffc !important;
}


html[data-theme="dark"] #stockPage .stock-status--sobrestock svg,
body.dark #stockPage .stock-status--sobrestock svg {
  color:
    #a9cffc !important;

  stroke:
    #a9cffc !important;
}


/* =========================================================
   LUCIDE
   FORZAR VISIBILIDAD
   ========================================================= */

html[data-theme="dark"] #stockPage [data-lucide],
body.dark #stockPage [data-lucide] {
  visibility:
    visible !important;

  opacity:
    1 !important;
}


/* =========================================================
   SVG GENERADO POR LUCIDE
   ========================================================= */

html[data-theme="dark"] #stockPage svg.lucide,
body.dark #stockPage svg.lucide {
  fill:
    none !important;

  stroke:
    currentColor !important;

  opacity:
    1 !important;
}