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

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

   DISEÑO:
   - MODERNO
   - PREMIUM
   - PROFESIONAL
   - SIN GLOW
   - ALTO CONTRASTE
   - TEXTO FUERTE
   - DARK NEGRO REAL
   - LIGHT LIMPIO
   - RESPONSIVE
   ========================================================= */


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

.stock-alertas-page,
#stockAlertasModalRoot {

  --sa-bg:
    #000000;

  --sa-surface:
    #070707;

  --sa-surface-2:
    #0b0b0c;

  --sa-surface-3:
    #101011;

  --sa-hover:
    #151516;

  --sa-active:
    #1a1a1c;

  --sa-border:
    #29292c;

  --sa-border-soft:
    #202022;

  --sa-border-strong:
    #414146;

  --sa-border-hover:
    #55555b;

  --sa-text:
    #ffffff;

  --sa-text-strong:
    #f7f7f8;

  --sa-text-secondary:
    #d1d1d5;

  --sa-text-muted:
    #9b9ba2;

  --sa-text-faint:
    #77777f;

  --sa-purple:
    #9184c4;

  --sa-purple-soft:
    rgba(
      145,
      132,
      196,
      .11
    );

  --sa-purple-border:
    rgba(
      145,
      132,
      196,
      .32
    );

  --sa-green:
    #51d88a;

  --sa-green-bg:
    rgba(
      81,
      216,
      138,
      .08
    );

  --sa-green-border:
    rgba(
      81,
      216,
      138,
      .28
    );

  --sa-red:
    #ff7676;

  --sa-red-bg:
    rgba(
      255,
      90,
      90,
      .08
    );

  --sa-red-border:
    rgba(
      255,
      100,
      100,
      .28
    );

  --sa-orange:
    #f6ae45;

  --sa-orange-bg:
    rgba(
      246,
      174,
      69,
      .09
    );

  --sa-orange-border:
    rgba(
      246,
      174,
      69,
      .30
    );

  --sa-radius-xs:
    7px;

  --sa-radius-sm:
    9px;

  --sa-radius:
    11px;

  --sa-radius-lg:
    14px;

  --sa-transition:
    140ms
    cubic-bezier(
      .2,
      .8,
      .2,
      1
    );

}


/* =========================================================
   LIGHT MODE TOKENS
   ========================================================= */

html[data-theme="light"]
.stock-alertas-page,
html[data-theme="light"]
#stockAlertasModalRoot {

  --sa-bg:
    #f5f6f7;

  --sa-surface:
    #ffffff;

  --sa-surface-2:
    #fafafa;

  --sa-surface-3:
    #f3f4f5;

  --sa-hover:
    #f1f2f3;

  --sa-active:
    #e9ebed;

  --sa-border:
    #cfd2d6;

  --sa-border-soft:
    #dde0e3;

  --sa-border-strong:
    #aeb3b9;

  --sa-border-hover:
    #8f959c;

  --sa-text:
    #090a0b;

  --sa-text-strong:
    #101113;

  --sa-text-secondary:
    #27292d;

  --sa-text-muted:
    #4b4f55;

  --sa-text-faint:
    #656a72;

  --sa-purple:
    #5f548f;

  --sa-purple-soft:
    rgba(
      95,
      84,
      143,
      .08
    );

  --sa-purple-border:
    rgba(
      95,
      84,
      143,
      .25
    );

  --sa-green:
    #10733c;

  --sa-green-bg:
    #eef8f2;

  --sa-green-border:
    #afd5bf;

  --sa-red:
    #b62525;

  --sa-red-bg:
    #fff2f2;

  --sa-red-border:
    #e7b4b4;

  --sa-orange:
    #925a09;

  --sa-orange-bg:
    #fff8e9;

  --sa-orange-border:
    #e3c789;

}


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

.stock-alertas-page,
.stock-alertas-page *,
.stock-alertas-page *::before,
.stock-alertas-page *::after,
#stockAlertasModalRoot,
#stockAlertasModalRoot *,
#stockAlertasModalRoot *::before,
#stockAlertasModalRoot *::after {

  box-sizing:
    border-box;

}


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

.stock-alertas-page {

  width:
    100%;

  min-width:
    0;

  display:
    grid;

  gap:
    18px;

  color:
    var(--sa-text);

  overflow-x:
    hidden;

}


.stock-alertas-page > * {

  min-width:
    0;

}


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

.stock-alertas-page-header {

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    24px;

  padding:
    4px
    0
    20px;

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

}


.stock-alertas-page-header__content {

  min-width:
    0;

}


.stock-alertas-page-header__eyebrow {

  display:
    block;

  margin-bottom:
    8px;

  color:
    var(--sa-purple);

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    .11em;

  text-transform:
    uppercase;

}


.stock-alertas-page-header h1 {

  margin:
    0;

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

  font-size:
    clamp(
      28px,
      2.15vw,
      34px
    );

  font-weight:
    800;

  line-height:
    1.08;

  letter-spacing:
    -.035em;

}


.stock-alertas-page-header p {

  max-width:
    760px;

  margin:
    10px
    0
    0;

  color:
    var(--sa-text-secondary);

  font-size:
    13px;

  font-weight:
    600;

  line-height:
    1.6;

}


.stock-alertas-page-header__actions {

  flex:
    0
    0
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;

}


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

.stock-alertas-button {

  min-height:
    40px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    0
    14px;

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

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

  background:
    var(--sa-surface-2);

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

  font-family:
    inherit;

  font-size:
    12px;

  font-weight:
    750;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;

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

}


.stock-alertas-button svg {

  width:
    16px;

  height:
    16px;

  flex:
    0
    0
    16px;

  stroke-width:
    2.2;

}


.stock-alertas-button:hover:not(:disabled) {

  background:
    var(--sa-hover);

  border-color:
    var(--sa-border-hover);

}


.stock-alertas-button:active:not(:disabled) {

  transform:
    translateY(
      1px
    );

}


.stock-alertas-button:disabled {

  opacity:
    .38;

  cursor:
    not-allowed;

}


.stock-alertas-button--primary {

  background:
    var(--sa-text);

  border-color:
    var(--sa-text);

  color:
    var(--sa-bg);

}


.stock-alertas-button--primary:hover:not(:disabled) {

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

  border-color:
    var(--sa-text-strong);

  color:
    var(--sa-bg);

}


html[data-theme="light"]
.stock-alertas-button--primary {

  background:
    #111214;

  border-color:
    #111214;

  color:
    #ffffff;

}


html[data-theme="light"]
.stock-alertas-button--primary:hover:not(:disabled) {

  background:
    #000000;

  border-color:
    #000000;

  color:
    #ffffff;

}


.stock-alertas-button--secondary {

  background:
    var(--sa-surface);

  border-color:
    var(--sa-border);

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

}


.stock-alertas-button--ghost {

  background:
    transparent;

  border-color:
    var(--sa-border);

  color:
    var(--sa-text-secondary);

}


.stock-alertas-button--danger {

  background:
    var(--sa-red-bg);

  border-color:
    var(--sa-red-border);

  color:
    var(--sa-red);

}


.stock-alertas-button--danger:hover:not(:disabled) {

  background:
    var(--sa-red-bg);

  border-color:
    var(--sa-red);

}


.stock-alertas-button.is-loading svg {

  animation:
    stockAlertasSpin
    .75s
    linear
    infinite;

}


@keyframes stockAlertasSpin {

  to {

    transform:
      rotate(
        360deg
      );

  }

}


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

.stock-alertas-metrics {

  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    10px;

}


.stock-alertas-metric {

  position:
    relative;

  min-width:
    0;

  min-height:
    122px;

  display:
    flex;

  flex-direction:
    column;

  padding:
    16px;

  overflow:
    hidden;

  background:
    var(--sa-surface);

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

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

  transition:
    border-color
      var(--sa-transition),
    background-color
      var(--sa-transition);

}


.stock-alertas-metric:hover {

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

}


.stock-alertas-metric::before {

  content:
    "";

  position:
    absolute;

  top:
    0;

  right:
    0;

  left:
    0;

  height:
    2px;

  background:
    var(--sa-border-strong);

}


.stock-alertas-metric.is-danger::before {

  background:
    var(--sa-red);

}


.stock-alertas-metric.is-warning::before {

  background:
    var(--sa-orange);

}


.stock-alertas-metric__top {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

}


.stock-alertas-metric__label {

  min-width:
    0;

  color:
    var(--sa-text-secondary);

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    .055em;

  text-transform:
    uppercase;

}


.stock-alertas-metric__icon {

  width:
    34px;

  height:
    34px;

  flex:
    0
    0
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    9px;

  background:
    var(--sa-surface-3);

  color:
    var(--sa-text-secondary);

}


.stock-alertas-metric__icon svg {

  width:
    17px;

  height:
    17px;

  stroke-width:
    2.2;

}


.stock-alertas-metric.is-danger {

  border-color:
    var(--sa-red-border);

}


.stock-alertas-metric.is-danger
.stock-alertas-metric__icon {

  background:
    var(--sa-red-bg);

  border-color:
    var(--sa-red-border);

  color:
    var(--sa-red);

}


.stock-alertas-metric.is-warning {

  border-color:
    var(--sa-orange-border);

}


.stock-alertas-metric.is-warning
.stock-alertas-metric__icon {

  background:
    var(--sa-orange-bg);

  border-color:
    var(--sa-orange-border);

  color:
    var(--sa-orange);

}


.stock-alertas-metric > strong {

  display:
    block;

  margin-top:
    13px;

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

  font-size:
    29px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    -.04em;

}


.stock-alertas-metric.is-danger > strong {

  color:
    var(--sa-red);

}


.stock-alertas-metric.is-warning > strong {

  color:
    var(--sa-orange);

}


.stock-alertas-metric > small {

  margin-top:
    8px;

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

  font-size:
    11px;

  font-weight:
    650;

  line-height:
    1.4;

}


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

.stock-alertas-toolbar {

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    13px;

  background:
    var(--sa-surface);

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

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

}


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

.stock-alertas-search {

  position:
    relative;

  flex:
    1
    1
    460px;

  min-width:
    220px;

  max-width:
    680px;

}


.stock-alertas-search > svg {

  position:
    absolute;

  top:
    50%;

  left:
    13px;

  width:
    17px;

  height:
    17px;

  z-index:
    2;

  transform:
    translateY(
      -50%
    );

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

  pointer-events:
    none;

}


.stock-alertas-search input {

  width:
    100%;

  height:
    42px;

  padding:
    0
    42px
    0
    40px;

  outline:
    none;

  background:
    var(--sa-bg);

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

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

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

  font-family:
    inherit;

  font-size:
    12px;

  font-weight:
    650;

  transition:
    background-color
      var(--sa-transition),
    border-color
      var(--sa-transition);

}


.stock-alertas-search input::placeholder {

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

  opacity:
    1;

}


.stock-alertas-search input:focus {

  background:
    var(--sa-surface-2);

  border-color:
    var(--sa-border-hover);

}


.stock-alertas-search__clear {

  position:
    absolute;

  top:
    50%;

  right:
    7px;

  width:
    29px;

  height:
    29px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  transform:
    translateY(
      -50%
    );

  border:
    1px solid
    transparent;

  border-radius:
    7px;

  background:
    transparent;

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

  cursor:
    pointer;

}


.stock-alertas-search__clear:hover {

  background:
    var(--sa-hover);

  border-color:
    var(--sa-border);

  color:
    var(--sa-text);

}


.stock-alertas-search__clear svg {

  width:
    15px;

  height:
    15px;

}


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

.stock-alertas-filters {

  flex:
    0
    1
    auto;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    flex-end;

  gap:
    8px;

  min-width:
    0;

}


.stock-alertas-filter {

  min-width:
    145px;

  display:
    grid;

  gap:
    6px;

}


.stock-alertas-filter > span {

  padding-left:
    1px;

  color:
    var(--sa-text-secondary);

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    .065em;

  text-transform:
    uppercase;

}


.stock-alertas-filter select {

  width:
    100%;

  height:
    42px;

  padding:
    0
    34px
    0
    11px;

  outline:
    none;

  background:
    var(--sa-bg);

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

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

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

  font-family:
    inherit;

  font-size:
    12px;

  font-weight:
    650;

  cursor:
    pointer;

}


.stock-alertas-filter select:focus {

  border-color:
    var(--sa-border-hover);

}


html[data-theme="dark"]
.stock-alertas-filter select,
html[data-theme="dark"]
#stockAlertasModalRoot select {

  color-scheme:
    dark;

}


html[data-theme="light"]
.stock-alertas-filter select,
html[data-theme="light"]
#stockAlertasModalRoot select {

  color-scheme:
    light;

}


/* =========================================================
   SELECTION BAR
   ========================================================= */

.stock-alertas-selection-bar {

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    11px
    13px;

  background:
    var(--sa-purple-soft);

  border:
    1px solid
    var(--sa-purple-border);

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

}


.stock-alertas-selection-bar[hidden] {

  display:
    none;

}


.stock-alertas-selection-bar__info {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

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

  font-size:
    12px;

  font-weight:
    750;

}


.stock-alertas-selection-bar__info svg {

  width:
    17px;

  height:
    17px;

  color:
    var(--sa-purple);

}


.stock-alertas-selection-bar__actions {

  flex:
    0
    0
    auto;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

}


.stock-alertas-selection-clear {

  min-height:
    36px;

  padding:
    0
    10px;

  border:
    0;

  background:
    transparent;

  color:
    var(--sa-text-secondary);

  font-family:
    inherit;

  font-size:
    11px;

  font-weight:
    750;

  cursor:
    pointer;

}


.stock-alertas-selection-clear:hover {

  color:
    var(--sa-text);

}


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

.stock-alertas-panel {

  width:
    100%;

  min-width:
    0;

  overflow:
    hidden;

  background:
    var(--sa-surface);

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

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

}


.stock-alertas-table-container {

  width:
    100%;

  min-width:
    0;

}


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

.stock-alertas-table-scroll {

  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    hidden;

}


.stock-alertas-table {

  width:
    100%;

  border-collapse:
    collapse;

  table-layout:
    fixed;

}


.stock-alertas-table th,
.stock-alertas-table td {

  text-align:
    left;

  vertical-align:
    middle;

}


.stock-alertas-table thead th {

  height:
    45px;

  padding:
    0
    12px;

  background:
    var(--sa-surface-2);

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

  color:
    var(--sa-text-secondary);

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    .055em;

  text-transform:
    uppercase;

}


.stock-alertas-table tbody td {

  padding:
    13px
    12px;

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

  color:
    var(--sa-text-secondary);

  font-size:
    12px;

  font-weight:
    600;

}


.stock-alertas-table tbody tr {

  transition:
    background-color
    var(--sa-transition);

}


.stock-alertas-table tbody tr:hover {

  background:
    var(--sa-hover);

}


.stock-alertas-table tbody tr.is-selected {

  background:
    var(--sa-purple-soft);

}


.stock-alertas-table tbody tr:last-child td {

  border-bottom:
    0;

}


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

.stock-alertas-table th:nth-child(1),
.stock-alertas-table td:nth-child(1) {

  width:
    44px;

}


.stock-alertas-table th:nth-child(2),
.stock-alertas-table td:nth-child(2) {

  width:
    28%;

}


.stock-alertas-table th:nth-child(3),
.stock-alertas-table td:nth-child(3),
.stock-alertas-table th:nth-child(4),
.stock-alertas-table td:nth-child(4),
.stock-alertas-table th:nth-child(5),
.stock-alertas-table td:nth-child(5),
.stock-alertas-table th:nth-child(6),
.stock-alertas-table td:nth-child(6) {

  width:
    9%;

}


.stock-alertas-table th:nth-child(7),
.stock-alertas-table td:nth-child(7) {

  width:
    17%;

}


.stock-alertas-table th:nth-child(8),
.stock-alertas-table td:nth-child(8) {

  width:
    12%;

}


.stock-alertas-table th:nth-child(9),
.stock-alertas-table td:nth-child(9) {

  width:
    112px;

}


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

.stock-alertas-table__check {

  text-align:
    center !important;

}


.stock-alertas-table
input[type="checkbox"] {

  width:
    16px;

  height:
    16px;

  margin:
    0;

  accent-color:
    var(--sa-purple);

  cursor:
    pointer;

}


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

.stock-alertas-product {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

}


.stock-alertas-product__avatar {

  width:
    36px;

  height:
    36px;

  flex:
    0
    0
    36px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--sa-surface-3);

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

  border-radius:
    9px;

  color:
    var(--sa-text-secondary);

  font-size:
    10px;

  font-weight:
    800;

}


.stock-alertas-product__info {

  min-width:
    0;

  display:
    grid;

  gap:
    5px;

}


.stock-alertas-product__info > strong {

  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.stock-alertas-product__meta {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px
    10px;

}


.stock-alertas-product__meta span {

  position:
    relative;

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

  font-size:
    10px;

  font-weight:
    650;

  line-height:
    1.25;

}


.stock-alertas-product__meta
span:not(:last-child)::after {

  content:
    "";

  position:
    absolute;

  top:
    50%;

  right:
    -6px;

  width:
    3px;

  height:
    3px;

  border-radius:
    50%;

  background:
    var(--sa-text-faint);

  transform:
    translateY(
      -50%
    );

}


/* =========================================================
   NUMBERS
   ========================================================= */

.stock-alertas-number {

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

  font-size:
    12px;

  font-weight:
    750;

}


.stock-alertas-number.is-danger {

  color:
    var(--sa-red);

}


.stock-alertas-number.is-warning {

  color:
    var(--sa-orange);

}


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

.stock-alertas-status {

  min-height:
    28px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    0
    9px;

  background:
    var(--sa-surface-3);

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

  border-radius:
    999px;

  color:
    var(--sa-text-secondary);

  font-size:
    10px;

  font-weight:
    750;

  white-space:
    nowrap;

}


.stock-alertas-status svg {

  width:
    13px;

  height:
    13px;

  flex:
    0
    0
    13px;

  stroke-width:
    2.2;

}


.stock-alertas-status.is-danger {

  background:
    var(--sa-red-bg);

  border-color:
    var(--sa-red-border);

  color:
    var(--sa-red);

}


.stock-alertas-status.is-warning {

  background:
    var(--sa-orange-bg);

  border-color:
    var(--sa-orange-border);

  color:
    var(--sa-orange);

}


/* =========================================================
   PROVIDER
   ========================================================= */

.stock-alertas-provider {

  min-width:
    0;

  display:
    grid;

  gap:
    4px;

}


.stock-alertas-provider > span {

  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    11px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.stock-alertas-provider > small {

  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


.stock-alertas-provider-empty {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--sa-text-secondary);

  font-family:
    inherit;

  font-size:
    10px;

  font-weight:
    750;

  cursor:
    pointer;

}


.stock-alertas-provider-empty:hover {

  color:
    var(--sa-text);

}


.stock-alertas-provider-empty svg {

  width:
    14px;

  height:
    14px;

}


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

.stock-alertas-table__actions {

  text-align:
    right !important;

}


.stock-alertas-row-actions {

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    5px;

}


.stock-alertas-icon-button {

  width:
    32px;

  height:
    32px;

  flex:
    0
    0
    32px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  background:
    var(--sa-surface-2);

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

  border-radius:
    8px;

  color:
    var(--sa-text-secondary);

  cursor:
    pointer;

  transition:
    background-color
      var(--sa-transition),
    border-color
      var(--sa-transition),
    color
      var(--sa-transition);

}


.stock-alertas-icon-button:hover {

  background:
    var(--sa-hover);

  border-color:
    var(--sa-border-hover);

  color:
    var(--sa-text);

}


.stock-alertas-icon-button svg {

  width:
    15px;

  height:
    15px;

  stroke-width:
    2.2;

}


.stock-alertas-icon-button.is-danger {

  color:
    var(--sa-red);

}


.stock-alertas-icon-button.is-danger:hover {

  background:
    var(--sa-red-bg);

  border-color:
    var(--sa-red-border);

}


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

.stock-alertas-empty {

  min-height:
    300px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    14px;

  padding:
    42px
    24px;

  text-align:
    center;

}


.stock-alertas-empty__icon {

  width:
    52px;

  height:
    52px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--sa-surface-3);

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

  border-radius:
    13px;

  color:
    var(--sa-text-secondary);

}


.stock-alertas-empty__icon svg {

  width:
    24px;

  height:
    24px;

}


.stock-alertas-empty__content {

  max-width:
    440px;

}


.stock-alertas-empty__content h2 {

  margin:
    0;

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

  font-size:
    18px;

  font-weight:
    800;

}


.stock-alertas-empty__content p {

  margin:
    8px
    0
    0;

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

  font-size:
    12px;

  font-weight:
    600;

  line-height:
    1.55;

}


.stock-alertas-empty__content
.stock-alertas-button {

  margin-top:
    16px;

}


.stock-alertas-empty--error
.stock-alertas-empty__icon {

  background:
    var(--sa-red-bg);

  border-color:
    var(--sa-red-border);

  color:
    var(--sa-red);

}


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

.stock-alertas-loading {

  display:
    grid;

}


.stock-alertas-loading__row {

  min-height:
    62px;

  display:
    grid;

  grid-template-columns:
    2fr
    repeat(
      4,
      .75fr
    );

  align-items:
    center;

  gap:
    16px;

  padding:
    0
    16px;

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

}


.stock-alertas-loading__row:last-child {

  border-bottom:
    0;

}


.stock-alertas-loading__row span {

  height:
    9px;

  border-radius:
    999px;

  background:
    var(--sa-surface-3);

  animation:
    stockAlertasSkeleton
    .9s
    ease-in-out
    infinite
    alternate;

}


@keyframes stockAlertasSkeleton {

  from {

    opacity:
      .45;

  }

  to {

    opacity:
      1;

  }

}


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

.stock-alertas-pagination {

  width:
    100%;

  min-width:
    0;

  min-height:
    44px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    0
    2px;

}


.stock-alertas-pagination__info,
.stock-alertas-pagination__page {

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

  font-size:
    11px;

  font-weight:
    650;

}


.stock-alertas-pagination__info strong,
.stock-alertas-pagination__page strong {

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

  font-weight:
    800;

}


.stock-alertas-pagination__controls {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

}


.stock-alertas-page-button {

  width:
    34px;

  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  background:
    var(--sa-surface);

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

  border-radius:
    8px;

  color:
    var(--sa-text-secondary);

  cursor:
    pointer;

}


.stock-alertas-page-button:hover:not(:disabled) {

  background:
    var(--sa-hover);

  border-color:
    var(--sa-border-hover);

  color:
    var(--sa-text);

}


.stock-alertas-page-button:disabled {

  opacity:
    .32;

  cursor:
    not-allowed;

}


.stock-alertas-page-button svg {

  width:
    15px;

  height:
    15px;

}


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

#stockAlertasModalRoot {

  position:
    relative;

  z-index:
    2147483000;

}


html.stock-alertas-modal-open,
body.stock-alertas-modal-open {

  overflow:
    hidden !important;

}


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

#stockAlertasModalRoot
.stock-alertas-modal-backdrop {

  position:
    fixed !important;

  inset:
    0 !important;

  z-index:
    2147483000 !important;

  width:
    100vw !important;

  height:
    100dvh !important;

  background:
    rgba(
      0,
      0,
      0,
      .72
    );

}


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

#stockAlertasModalRoot
.stock-alertas-modal {

  position:
    fixed !important;

  top:
    50% !important;

  left:
    50% !important;

  z-index:
    2147483001 !important;

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

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

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  transform:
    translate(
      -50%,
      -50%
    ) !important;

  background:
    var(--sa-surface);

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

  border-radius:
    15px;

  box-shadow:
    0
    24px
    60px
    rgba(
      0,
      0,
      0,
      .44
    );

}


#stockAlertasModalRoot
.stock-alertas-modal--small {

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

}


#stockAlertasModalRoot
.stock-alertas-modal--medium {

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

}


#stockAlertasModalRoot
.stock-alertas-modal--large {

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

}


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

#stockAlertasModalRoot
.stock-alertas-modal__header {

  flex:
    0
    0
    auto;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    18px;

  padding:
    19px
    20px
    17px;

  background:
    var(--sa-surface);

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

}


#stockAlertasModalRoot
.stock-alertas-modal__header > div {

  min-width:
    0;

}


#stockAlertasModalRoot
.stock-alertas-modal__eyebrow {

  display:
    block;

  margin-bottom:
    7px;

  color:
    var(--sa-purple);

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    .09em;

  text-transform:
    uppercase;

}


#stockAlertasModalRoot
.stock-alertas-modal__header h2 {

  margin:
    0;

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

  font-size:
    22px;

  font-weight:
    800;

  line-height:
    1.18;

  letter-spacing:
    -.025em;

}


#stockAlertasModalRoot
.stock-alertas-modal__header p {

  max-width:
    680px;

  margin:
    8px
    0
    0;

  color:
    var(--sa-text-secondary);

  font-size:
    12px;

  font-weight:
    600;

  line-height:
    1.5;

}


#stockAlertasModalRoot
.stock-alertas-modal__close {

  width:
    34px;

  height:
    34px;

  flex:
    0
    0
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  background:
    var(--sa-surface-2);

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

  border-radius:
    9px;

  color:
    var(--sa-text-secondary);

  cursor:
    pointer;

}


#stockAlertasModalRoot
.stock-alertas-modal__close:hover {

  background:
    var(--sa-hover);

  border-color:
    var(--sa-border-hover);

  color:
    var(--sa-text);

}


#stockAlertasModalRoot
.stock-alertas-modal__close svg {

  width:
    16px;

  height:
    16px;

  stroke-width:
    2.2;

}


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

#stockAlertasModalRoot
.stock-alertas-modal__body {

  flex:
    1
    1
    auto;

  min-height:
    0;

  padding:
    20px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  background:
    var(--sa-surface);

}


#stockAlertasModalRoot
.stock-alertas-modal__footer {

  flex:
    0
    0
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  padding:
    13px
    20px;

  background:
    var(--sa-surface-2);

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

}


/* =========================================================
   CONFIG GRID
   ========================================================= */

#stockAlertasModalRoot
.stock-alertas-config-grid {

  display:
    grid;

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

  gap:
    12px;

}


#stockAlertasModalRoot
.stock-alertas-config-section {

  min-width:
    0;

  padding:
    15px;

  background:
    var(--sa-surface-2);

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

  border-radius:
    12px;

}


#stockAlertasModalRoot
.stock-alertas-config-section--full {

  grid-column:
    1 /
    -1;

}


#stockAlertasModalRoot
.stock-alertas-config-section__header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    14px;

}


#stockAlertasModalRoot
.stock-alertas-config-section__header > div {

  min-width:
    0;

}


#stockAlertasModalRoot
.stock-alertas-config-section__header span {

  display:
    block;

  margin-bottom:
    5px;

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

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .075em;

  text-transform:
    uppercase;

}


#stockAlertasModalRoot
.stock-alertas-config-section__header h3 {

  margin:
    0;

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

  font-size:
    14px;

  font-weight:
    800;

}


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

#stockAlertasModalRoot
.stock-alertas-switch-list {

  display:
    grid;

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

}


#stockAlertasModalRoot
.stock-alertas-switch-row {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    12px
    0;

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

}


#stockAlertasModalRoot
.stock-alertas-switch-row:last-child {

  border-bottom:
    0;

}


#stockAlertasModalRoot
.stock-alertas-switch-row > div {

  min-width:
    0;

  display:
    grid;

  gap:
    4px;

}


#stockAlertasModalRoot
.stock-alertas-switch-row strong {

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

  font-size:
    12px;

  font-weight:
    750;

  line-height:
    1.3;

}


#stockAlertasModalRoot
.stock-alertas-switch-row span {

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

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.45;

}


#stockAlertasModalRoot
.stock-alertas-switch-row
input[type="checkbox"] {

  position:
    relative;

  width:
    40px;

  height:
    22px;

  flex:
    0
    0
    40px;

  appearance:
    none;

  margin:
    0;

  background:
    var(--sa-surface-3);

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

  border-radius:
    999px;

  cursor:
    pointer;

  transition:
    background-color
      var(--sa-transition),
    border-color
      var(--sa-transition);

}


#stockAlertasModalRoot
.stock-alertas-switch-row
input[type="checkbox"]::after {

  content:
    "";

  position:
    absolute;

  top:
    3px;

  left:
    3px;

  width:
    14px;

  height:
    14px;

  border-radius:
    50%;

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

  transition:
    transform
      var(--sa-transition),
    background-color
      var(--sa-transition);

}


#stockAlertasModalRoot
.stock-alertas-switch-row
input[type="checkbox"]:checked {

  background:
    var(--sa-text);

  border-color:
    var(--sa-text);

}


#stockAlertasModalRoot
.stock-alertas-switch-row
input[type="checkbox"]:checked::after {

  transform:
    translateX(
      18px
    );

  background:
    var(--sa-bg);

}


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

#stockAlertasModalRoot
.stock-alertas-form-grid {

  display:
    grid;

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

  gap:
    12px;

}


#stockAlertasModalRoot
.stock-alertas-form-grid--two {

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

}


#stockAlertasModalRoot
.stock-alertas-field {

  min-width:
    0;

  display:
    grid;

  align-content:
    start;

  gap:
    6px;

}


#stockAlertasModalRoot
.stock-alertas-field--full {

  grid-column:
    1 /
    -1;

}


#stockAlertasModalRoot
.stock-alertas-field > span {

  padding-left:
    1px;

  color:
    var(--sa-text-secondary);

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    .045em;

  text-transform:
    uppercase;

}


#stockAlertasModalRoot
.stock-alertas-field input,
#stockAlertasModalRoot
.stock-alertas-field select,
#stockAlertasModalRoot
.stock-alertas-field textarea {

  width:
    100%;

  outline:
    none;

  background:
    var(--sa-surface);

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

  border-radius:
    9px;

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

  font-family:
    inherit;

  font-size:
    12px;

  font-weight:
    650;

  transition:
    background-color
      var(--sa-transition),
    border-color
      var(--sa-transition);

}


#stockAlertasModalRoot
.stock-alertas-field input,
#stockAlertasModalRoot
.stock-alertas-field select {

  height:
    41px;

  padding:
    0
    11px;

}


#stockAlertasModalRoot
.stock-alertas-field textarea {

  min-height:
    94px;

  padding:
    10px
    11px;

  resize:
    vertical;

  line-height:
    1.5;

}


#stockAlertasModalRoot
.stock-alertas-field input::placeholder,
#stockAlertasModalRoot
.stock-alertas-field textarea::placeholder {

  color:
    var(--sa-text-faint);

  opacity:
    1;

}


#stockAlertasModalRoot
.stock-alertas-field input:focus,
#stockAlertasModalRoot
.stock-alertas-field select:focus,
#stockAlertasModalRoot
.stock-alertas-field textarea:focus {

  background:
    var(--sa-surface-2);

  border-color:
    var(--sa-border-hover);

}


#stockAlertasModalRoot
.stock-alertas-field small {

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

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.4;

}


/* =========================================================
   RULES
   ========================================================= */

#stockAlertasModalRoot
.stock-alertas-rules-list {

  display:
    grid;

  gap:
    8px;

}


#stockAlertasModalRoot
.stock-alertas-rules-empty {

  min-height:
    90px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

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

  border-radius:
    10px;

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

  font-size:
    11px;

  font-weight:
    650;

}


#stockAlertasModalRoot
.stock-alertas-rules-empty svg {

  width:
    16px;

  height:
    16px;

}


#stockAlertasModalRoot
.stock-alertas-rule {

  min-width:
    0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    11px;

  padding:
    11px;

  background:
    var(--sa-surface);

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

  border-radius:
    10px;

}


#stockAlertasModalRoot
.stock-alertas-rule__icon {

  width:
    38px;

  height:
    38px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--sa-surface-3);

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

  border-radius:
    9px;

  color:
    var(--sa-text-secondary);

}


#stockAlertasModalRoot
.stock-alertas-rule__icon svg {

  width:
    16px;

  height:
    16px;

}


#stockAlertasModalRoot
.stock-alertas-rule__main {

  min-width:
    0;

  display:
    grid;

  gap:
    5px;

}


#stockAlertasModalRoot
.stock-alertas-rule__title {

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    7px;

}


#stockAlertasModalRoot
.stock-alertas-rule__title > strong {

  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    12px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


#stockAlertasModalRoot
.stock-alertas-rule__status {

  min-height:
    22px;

  display:
    inline-flex;

  align-items:
    center;

  padding:
    0
    7px;

  background:
    var(--sa-surface-3);

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

  border-radius:
    999px;

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

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .04em;

  text-transform:
    uppercase;

}


#stockAlertasModalRoot
.stock-alertas-rule__status.is-active {

  background:
    var(--sa-green-bg);

  border-color:
    var(--sa-green-border);

  color:
    var(--sa-green);

}


#stockAlertasModalRoot
.stock-alertas-rule__meta {

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px
    12px;

}


#stockAlertasModalRoot
.stock-alertas-rule__meta > span {

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

  font-size:
    10px;

  font-weight:
    600;

}


#stockAlertasModalRoot
.stock-alertas-rule__meta strong {

  color:
    var(--sa-text-secondary);

  font-weight:
    800;

}


#stockAlertasModalRoot
.stock-alertas-rule__actions {

  display:
    flex;

  align-items:
    center;

  gap:
    5px;

}


/* =========================================================
   PRODUCT CONFIG SUMMARY
   ========================================================= */

#stockAlertasModalRoot
.stock-alertas-product-config-summary {

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  margin-bottom:
    17px;

  padding:
    12px;

  background:
    var(--sa-surface-2);

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

  border-radius:
    11px;

}


#stockAlertasModalRoot
.stock-alertas-product-config-summary__avatar {

  width:
    42px;

  height:
    42px;

  flex:
    0
    0
    42px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--sa-surface-3);

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

  border-radius:
    10px;

  color:
    var(--sa-text-secondary);

  font-size:
    10px;

  font-weight:
    800;

}


#stockAlertasModalRoot
.stock-alertas-product-config-summary > div:last-child {

  min-width:
    0;

  display:
    grid;

  gap:
    4px;

}


#stockAlertasModalRoot
.stock-alertas-product-config-summary strong {

  overflow:
    hidden;

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

  font-size:
    12px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


#stockAlertasModalRoot
.stock-alertas-product-config-summary span {

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

  font-size:
    10px;

  font-weight:
    650;

}


/* =========================================================
   ACTION OPTIONS
   ========================================================= */

#stockAlertasModalRoot
.stock-alertas-action-list {

  display:
    grid;

  gap:
    8px;

}


#stockAlertasModalRoot
.stock-alertas-action-option {

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  padding:
    11px;

  text-align:
    left;

  background:
    var(--sa-surface-2);

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

  border-radius:
    10px;

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

  cursor:
    pointer;

  transition:
    background-color
      var(--sa-transition),
    border-color
      var(--sa-transition);

}


#stockAlertasModalRoot
.stock-alertas-action-option:hover {

  background:
    var(--sa-hover);

  border-color:
    var(--sa-border-hover);

}


#stockAlertasModalRoot
.stock-alertas-action-option__icon {

  width:
    36px;

  height:
    36px;

  flex:
    0
    0
    36px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--sa-surface-3);

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

  border-radius:
    9px;

  color:
    var(--sa-text-secondary);

}


#stockAlertasModalRoot
.stock-alertas-action-option__icon svg {

  width:
    16px;

  height:
    16px;

}


#stockAlertasModalRoot
.stock-alertas-action-option > span:last-child {

  min-width:
    0;

  display:
    grid;

  gap:
    3px;

}


#stockAlertasModalRoot
.stock-alertas-action-option strong {

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

  font-size:
    12px;

  font-weight:
    750;

}


#stockAlertasModalRoot
.stock-alertas-action-option small {

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

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.4;

}


#stockAlertasModalRoot
.stock-alertas-action-option.is-danger
.stock-alertas-action-option__icon {

  background:
    var(--sa-red-bg);

  border-color:
    var(--sa-red-border);

  color:
    var(--sa-red);

}


/* =========================================================
   ORDER
   ========================================================= */

#stockAlertasModalRoot
.stock-alertas-order {

  display:
    grid;

  gap:
    16px;

}


#stockAlertasModalRoot
.stock-alertas-order__notice {

  display:
    flex;

  align-items:
    flex-start;

  gap:
    9px;

  padding:
    10px
    11px;

  background:
    var(--sa-surface-2);

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

  border-radius:
    10px;

  color:
    var(--sa-text-secondary);

}


#stockAlertasModalRoot
.stock-alertas-order__notice svg {

  width:
    16px;

  height:
    16px;

  flex:
    0
    0
    16px;

  margin-top:
    1px;

}


#stockAlertasModalRoot
.stock-alertas-order__notice p {

  margin:
    0;

  color:
    var(--sa-text-secondary);

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1.5;

}


/* =========================================================
   ORDER ITEMS
   ========================================================= */

#stockAlertasModalRoot
.stock-alertas-order-items {

  min-width:
    0;

  overflow:
    hidden;

  background:
    var(--sa-surface-2);

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

  border-radius:
    11px;

}


#stockAlertasModalRoot
.stock-alertas-order-items__header {

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      2fr
    )
    90px
    90px
    110px
    36px;

  gap:
    10px;

  align-items:
    center;

  min-height:
    40px;

  padding:
    0
    11px;

  background:
    var(--sa-surface-3);

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

}


#stockAlertasModalRoot
.stock-alertas-order-items__header span {

  color:
    var(--sa-text-secondary);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .05em;

  text-transform:
    uppercase;

}


#stockAlertasModalRoot
.stock-alertas-order-items__body {

  display:
    grid;

}


#stockAlertasModalRoot
.stock-alertas-order-item {

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      2fr
    )
    90px
    90px
    110px
    36px;

  gap:
    10px;

  align-items:
    center;

  padding:
    10px
    11px;

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

}


#stockAlertasModalRoot
.stock-alertas-order-item:last-child {

  border-bottom:
    0;

}


#stockAlertasModalRoot
.stock-alertas-order-item__product {

  min-width:
    0;

  display:
    grid;

  gap:
    3px;

}


#stockAlertasModalRoot
.stock-alertas-order-item__product strong {

  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    11px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

}


#stockAlertasModalRoot
.stock-alertas-order-item__product span {

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

  font-size:
    10px;

  font-weight:
    600;

}


#stockAlertasModalRoot
.stock-alertas-order-item > span {

  color:
    var(--sa-text-secondary);

  font-size:
    11px;

  font-weight:
    700;

}


#stockAlertasModalRoot
.stock-alertas-order-item__quantity {

  width:
    100%;

  height:
    36px;

  padding:
    0
    9px;

  outline:
    none;

  background:
    var(--sa-surface);

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

  border-radius:
    8px;

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

  font-size:
    11px;

  font-weight:
    750;

}


#stockAlertasModalRoot
.stock-alertas-order-item__quantity:focus {

  border-color:
    var(--sa-border-hover);

}


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

.stock-alertas-toast {

  position:
    fixed;

  right:
    20px;

  bottom:
    20px;

  z-index:
    2147483100;

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

  min-height:
    44px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    10px
    13px;

  background:
    var(--sa-surface);

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

  border-radius:
    10px;

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

  font-size:
    11px;

  font-weight:
    700;

  line-height:
    1.4;

  opacity:
    0;

  transform:
    translateY(
      8px
    );

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

}


.stock-alertas-toast[hidden] {

  display:
    none;

}


.stock-alertas-toast.is-visible {

  opacity:
    1;

  transform:
    translateY(
      0
    );

}


.stock-alertas-toast svg {

  width:
    17px;

  height:
    17px;

  flex:
    0
    0
    17px;

}


.stock-alertas-toast--success {

  border-color:
    var(--sa-green-border);

}


.stock-alertas-toast--success svg {

  color:
    var(--sa-green);

}


.stock-alertas-toast--warning {

  border-color:
    var(--sa-orange-border);

}


.stock-alertas-toast--warning svg {

  color:
    var(--sa-orange);

}


.stock-alertas-toast--error {

  border-color:
    var(--sa-red-border);

}


.stock-alertas-toast--error svg {

  color:
    var(--sa-red);

}


/* =========================================================
   LIGHT MODE
   FUERZA TEXTO NEGRO
   ========================================================= */

html[data-theme="light"]
.stock-alertas-page-header h1,
html[data-theme="light"]
.stock-alertas-metric > strong,
html[data-theme="light"]
.stock-alertas-product__info > strong,
html[data-theme="light"]
.stock-alertas-number,
html[data-theme="light"]
.stock-alertas-provider > span,
html[data-theme="light"]
.stock-alertas-empty__content h2,
html[data-theme="light"]
.stock-alertas-pagination__info strong,
html[data-theme="light"]
.stock-alertas-pagination__page strong,
html[data-theme="light"]
#stockAlertasModalRoot
.stock-alertas-modal__header h2,
html[data-theme="light"]
#stockAlertasModalRoot
.stock-alertas-config-section__header h3,
html[data-theme="light"]
#stockAlertasModalRoot
.stock-alertas-switch-row strong,
html[data-theme="light"]
#stockAlertasModalRoot
.stock-alertas-rule__title > strong,
html[data-theme="light"]
#stockAlertasModalRoot
.stock-alertas-product-config-summary strong,
html[data-theme="light"]
#stockAlertasModalRoot
.stock-alertas-action-option strong,
html[data-theme="light"]
#stockAlertasModalRoot
.stock-alertas-order-item__product strong {

  color:
    #090a0b;

}


html[data-theme="light"]
.stock-alertas-page-header p,
html[data-theme="light"]
.stock-alertas-metric__label,
html[data-theme="light"]
.stock-alertas-metric > small,
html[data-theme="light"]
.stock-alertas-product__meta span,
html[data-theme="light"]
.stock-alertas-provider > small,
html[data-theme="light"]
.stock-alertas-pagination__info,
html[data-theme="light"]
.stock-alertas-pagination__page,
html[data-theme="light"]
#stockAlertasModalRoot
.stock-alertas-modal__header p,
html[data-theme="light"]
#stockAlertasModalRoot
.stock-alertas-switch-row span,
html[data-theme="light"]
#stockAlertasModalRoot
.stock-alertas-field small,
html[data-theme="light"]
#stockAlertasModalRoot
.stock-alertas-rule__meta > span,
html[data-theme="light"]
#stockAlertasModalRoot
.stock-alertas-action-option small {

  color:
    #484c52;

}


html[data-theme="light"]
.stock-alertas-table thead th,
html[data-theme="light"]
.stock-alertas-filter > span,
html[data-theme="light"]
#stockAlertasModalRoot
.stock-alertas-field > span,
html[data-theme="light"]
#stockAlertasModalRoot
.stock-alertas-config-section__header span {

  color:
    #303338;

  font-weight:
    800;

}


/* =========================================================
   DARK MODE
   FUERZA ICONOS Y TEXTO
   ========================================================= */

html[data-theme="dark"]
.stock-alertas-page svg,
html[data-theme="dark"]
#stockAlertasModalRoot svg {

  opacity:
    1;

}


html[data-theme="dark"]
.stock-alertas-table thead th,
html[data-theme="dark"]
.stock-alertas-filter > span,
html[data-theme="dark"]
#stockAlertasModalRoot
.stock-alertas-field > span {

  color:
    #d0d0d4;

}


html[data-theme="dark"]
.stock-alertas-product__meta span,
html[data-theme="dark"]
.stock-alertas-provider > small,
html[data-theme="dark"]
.stock-alertas-metric > small,
html[data-theme="dark"]
.stock-alertas-pagination__info,
html[data-theme="dark"]
.stock-alertas-pagination__page {

  color:
    #a6a6ad;

}


/* =========================================================
   FOCUS
   SIN GLOW
   ========================================================= */

.stock-alertas-button:focus-visible,
.stock-alertas-icon-button:focus-visible,
.stock-alertas-page-button:focus-visible,
.stock-alertas-selection-clear:focus-visible,
.stock-alertas-provider-empty:focus-visible,
.stock-alertas-search__clear:focus-visible,
.stock-alertas-filter select:focus-visible,
.stock-alertas-search input:focus-visible,
#stockAlertasModalRoot
.stock-alertas-modal__close:focus-visible,
#stockAlertasModalRoot
.stock-alertas-action-option:focus-visible,
#stockAlertasModalRoot
.stock-alertas-field input:focus-visible,
#stockAlertasModalRoot
.stock-alertas-field select:focus-visible,
#stockAlertasModalRoot
.stock-alertas-field textarea:focus-visible,
#stockAlertasModalRoot
.stock-alertas-order-item__quantity:focus-visible {

  outline:
    1px solid
    var(--sa-border-hover);

  outline-offset:
    1px;

  box-shadow:
    none !important;

}


/* =========================================================
   DISABLED
   ========================================================= */

.stock-alertas-page input:disabled,
.stock-alertas-page select:disabled,
.stock-alertas-page textarea:disabled,
#stockAlertasModalRoot input:disabled,
#stockAlertasModalRoot select:disabled,
#stockAlertasModalRoot textarea:disabled {

  opacity:
    .48;

  cursor:
    not-allowed;

}


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

.stock-alertas-table-scroll,
#stockAlertasModalRoot
.stock-alertas-modal__body,
#stockAlertasModalRoot
.stock-alertas-order-items {

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--sa-border-strong)
    transparent;

}


.stock-alertas-table-scroll::-webkit-scrollbar,
#stockAlertasModalRoot
.stock-alertas-modal__body::-webkit-scrollbar,
#stockAlertasModalRoot
.stock-alertas-order-items::-webkit-scrollbar {

  width:
    7px;

  height:
    7px;

}


.stock-alertas-table-scroll::-webkit-scrollbar-track,
#stockAlertasModalRoot
.stock-alertas-modal__body::-webkit-scrollbar-track,
#stockAlertasModalRoot
.stock-alertas-order-items::-webkit-scrollbar-track {

  background:
    transparent;

}


.stock-alertas-table-scroll::-webkit-scrollbar-thumb,
#stockAlertasModalRoot
.stock-alertas-modal__body::-webkit-scrollbar-thumb,
#stockAlertasModalRoot
.stock-alertas-order-items::-webkit-scrollbar-thumb {

  background:
    var(--sa-border-strong);

  border-radius:
    999px;

}


/* =========================================================
   RESPONSIVE · 1280
   ========================================================= */

@media (
  max-width:
    1280px
) {

  .stock-alertas-metrics {

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

  }


  .stock-alertas-toolbar {

    align-items:
      stretch;

    flex-direction:
      column;

  }


  .stock-alertas-search {

    width:
      100%;

    max-width:
      none;

  }


  .stock-alertas-filters {

    width:
      100%;

    justify-content:
      stretch;

  }


  .stock-alertas-filter {

    flex:
      1
      1
      0;

    min-width:
      0;

  }


  .stock-alertas-table {

    min-width:
      1040px;

  }

}


/* =========================================================
   RESPONSIVE · 920
   ========================================================= */

@media (
  max-width:
    920px
) {

  .stock-alertas-page {

    gap:
      15px;

  }


  .stock-alertas-page-header {

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      15px;

  }


  .stock-alertas-page-header__actions {

    width:
      100%;

    justify-content:
      flex-start;

  }


  .stock-alertas-page-header__actions
  .stock-alertas-button {

    flex:
      1
      1
      160px;

  }


  .stock-alertas-selection-bar {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .stock-alertas-selection-bar__actions {

    width:
      100%;

    justify-content:
      space-between;

  }


  #stockAlertasModalRoot
  .stock-alertas-config-grid {

    grid-template-columns:
      1fr;

  }


  #stockAlertasModalRoot
  .stock-alertas-config-section--full {

    grid-column:
      auto;

  }


  #stockAlertasModalRoot
  .stock-alertas-form-grid,
  #stockAlertasModalRoot
  .stock-alertas-form-grid--two {

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

  }


  #stockAlertasModalRoot
  .stock-alertas-modal--large {

    width:
      calc(
        100vw -
        24px
      );

  }


  #stockAlertasModalRoot
  .stock-alertas-order-items {

    overflow-x:
      auto;

  }


  #stockAlertasModalRoot
  .stock-alertas-order-items__header,
  #stockAlertasModalRoot
  .stock-alertas-order-item {

    min-width:
      720px;

  }

}


/* =========================================================
   RESPONSIVE · MOBILE
   ========================================================= */

@media (
  max-width:
    700px
) {

  .stock-alertas-page-header h1 {

    font-size:
      25px;

  }


  .stock-alertas-page-header p {

    font-size:
      12px;

  }


  .stock-alertas-metrics {

    grid-template-columns:
      1fr;

  }


  .stock-alertas-metric {

    min-height:
      108px;

  }


  .stock-alertas-metric > strong {

    font-size:
      26px;

  }


  .stock-alertas-toolbar {

    padding:
      11px;

  }


  .stock-alertas-filters {

    display:
      grid;

    grid-template-columns:
      1fr;

  }


  .stock-alertas-filter {

    width:
      100%;

  }


  .stock-alertas-selection-bar__actions {

    width:
      100%;

    align-items:
      stretch;

    flex-direction:
      column;

  }


  .stock-alertas-selection-clear,
  .stock-alertas-selection-bar__actions
  .stock-alertas-button {

    width:
      100%;

  }


  .stock-alertas-pagination {

    align-items:
      flex-start;

    flex-direction:
      column;

    padding:
      4px
      0;

  }


  .stock-alertas-pagination__controls {

    width:
      100%;

    justify-content:
      space-between;

  }


  #stockAlertasModalRoot
  .stock-alertas-modal {

    top:
      auto !important;

    right:
      0 !important;

    bottom:
      0 !important;

    left:
      0 !important;

    width:
      100% !important;

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

    border-right:
      0;

    border-bottom:
      0;

    border-left:
      0;

    border-radius:
      15px
      15px
      0
      0;

    transform:
      none !important;

  }


  #stockAlertasModalRoot
  .stock-alertas-modal--small,
  #stockAlertasModalRoot
  .stock-alertas-modal--medium,
  #stockAlertasModalRoot
  .stock-alertas-modal--large {

    width:
      100% !important;

  }


  #stockAlertasModalRoot
  .stock-alertas-modal__header {

    padding:
      16px
      15px
      14px;

  }


  #stockAlertasModalRoot
  .stock-alertas-modal__header h2 {

    font-size:
      19px;

  }


  #stockAlertasModalRoot
  .stock-alertas-modal__body {

    padding:
      14px;

  }


  #stockAlertasModalRoot
  .stock-alertas-modal__footer {

    padding:
      11px
      14px;

    flex-wrap:
      wrap;

  }


  #stockAlertasModalRoot
  .stock-alertas-modal__footer
  .stock-alertas-button {

    flex:
      1
      1
      130px;

  }


  #stockAlertasModalRoot
  .stock-alertas-form-grid,
  #stockAlertasModalRoot
  .stock-alertas-form-grid--two {

    grid-template-columns:
      1fr;

  }


  #stockAlertasModalRoot
  .stock-alertas-field--full {

    grid-column:
      auto;

  }


  #stockAlertasModalRoot
  .stock-alertas-config-section {

    padding:
      13px;

  }


  #stockAlertasModalRoot
  .stock-alertas-config-section__header {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  #stockAlertasModalRoot
  .stock-alertas-config-section__header
  .stock-alertas-button {

    width:
      100%;

  }


  #stockAlertasModalRoot
  .stock-alertas-rule {

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

  }


  #stockAlertasModalRoot
  .stock-alertas-rule__actions {

    grid-column:
      1 /
      -1;

    justify-content:
      flex-end;

    padding-top:
      9px;

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

  }


  .stock-alertas-toast {

    right:
      12px;

    bottom:
      12px;

    left:
      12px;

    max-width:
      none;

  }

}


/* =========================================================
   RESPONSIVE · SMALL MOBILE
   ========================================================= */

@media (
  max-width:
    480px
) {

  .stock-alertas-page {

    gap:
      12px;

  }


  .stock-alertas-page-header {

    padding-bottom:
      15px;

  }


  .stock-alertas-page-header h1 {

    font-size:
      23px;

  }


  .stock-alertas-page-header__actions {

    display:
      grid;

    grid-template-columns:
      1fr;

  }


  .stock-alertas-page-header__actions
  .stock-alertas-button {

    width:
      100%;

  }


  .stock-alertas-metric {

    padding:
      14px;

  }


  .stock-alertas-search {

    min-width:
      0;

  }


  .stock-alertas-selection-bar {

    padding:
      10px;

  }


  #stockAlertasModalRoot
  .stock-alertas-modal__footer {

    display:
      grid;

    grid-template-columns:
      1fr;

  }


  #stockAlertasModalRoot
  .stock-alertas-modal__footer
  .stock-alertas-button {

    width:
      100%;

  }


  #stockAlertasModalRoot
  .stock-alertas-action-option {

    align-items:
      flex-start;

  }


  .stock-alertas-product__meta {

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      3px;

  }


  .stock-alertas-product__meta
  span::after {

    display:
      none;

  }

}


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

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

  .stock-alertas-page *,
  #stockAlertasModalRoot * {

    scroll-behavior:
      auto !important;

    transition-duration:
      .01ms !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

  }

}


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

@media print {

  .stock-alertas-page-header__actions,
  .stock-alertas-toolbar,
  .stock-alertas-selection-bar,
  .stock-alertas-pagination,
  .stock-alertas-row-actions,
  .stock-alertas-table__check,
  #stockAlertasModalRoot,
  .stock-alertas-toast {

    display:
      none !important;

  }


  .stock-alertas-page,
  .stock-alertas-panel,
  .stock-alertas-metric {

    background:
      #ffffff !important;

    color:
      #000000 !important;

  }


  .stock-alertas-table-scroll {

    overflow:
      visible;

  }


  .stock-alertas-table {

    min-width:
      0;

  }

}


/* =========================================================
   SAFETY
   ========================================================= */

.stock-alertas-page [hidden],
#stockAlertasModalRoot [hidden] {

  display:
    none !important;

}


.stock-alertas-page button,
#stockAlertasModalRoot button {

  -webkit-tap-highlight-color:
    transparent;

}


.stock-alertas-page input,
.stock-alertas-page select,
.stock-alertas-page textarea,
.stock-alertas-page button,
#stockAlertasModalRoot input,
#stockAlertasModalRoot select,
#stockAlertasModalRoot textarea,
#stockAlertasModalRoot button {

  font-family:
    inherit;

}


.stock-alertas-page h1,
.stock-alertas-page h2,
.stock-alertas-page h3,
.stock-alertas-page strong,
#stockAlertasModalRoot h1,
#stockAlertasModalRoot h2,
#stockAlertasModalRoot h3,
#stockAlertasModalRoot strong {

  text-rendering:
    optimizeLegibility;

}