/* =========================================================
   UBICACIÓN:
   frontend/src/pages/envia/envios/envios.css

   WIRTZ HUB · ENVIA · ENVÍOS
   ESTILO UNIFICADO CON MI PERFIL + SIDEBAR

   PARTE 1 DE 2
   ========================================================= */

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

.envia-envios-shell,
.envia-envios-shell *,
.envia-envios-shell *::before,
.envia-envios-shell *::after,
.envia-envios-toast,
.envia-envios-toast *,
.envia-envios-toast *::before,
.envia-envios-toast *::after {
  box-sizing: border-box;

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

.envia-envios-shell {
  --envia-bg: #f5f5f5;

  --envia-surface: #ffffff;
  --envia-surface-elevated: #ffffff;
  --envia-surface-soft: #f7f7f7;
  --envia-surface-muted: #eeeeee;
  --envia-surface-hover: #f2f2f2;
  --envia-surface-active: #e9e9e9;

  --envia-border: #dddddd;
  --envia-border-soft: #ebebeb;
  --envia-border-strong: #bfbfbf;

  --envia-text: #0a0a0a;
  --envia-text-strong: #000000;
  --envia-text-soft: #404040;
  --envia-text-muted: #737373;
  --envia-text-faint: #a3a3a3;

  --envia-accent: #0a0a0a;
  --envia-accent-hover: #252525;
  --envia-accent-soft: rgba(0, 0, 0, 0.045);
  --envia-accent-text: #ffffff;

  --envia-success: #15803d;
  --envia-success-soft: rgba(21, 128, 61, 0.065);
  --envia-success-line: rgba(21, 128, 61, 0.28);

  --envia-danger: #dc2626;
  --envia-danger-soft: rgba(220, 38, 38, 0.065);
  --envia-danger-line: rgba(220, 38, 38, 0.28);

  --envia-warning: #b45309;
  --envia-warning-soft: rgba(180, 83, 9, 0.065);
  --envia-warning-line: rgba(180, 83, 9, 0.28);

  --envia-info: #404040;
  --envia-info-soft: rgba(0, 0, 0, 0.045);
  --envia-info-line: rgba(0, 0, 0, 0.18);

  --envia-radius-xs: 6px;
  --envia-radius-sm: 8px;
  --envia-radius-md: 10px;
  --envia-radius-lg: 14px;

  --envia-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --envia-transition-fast: 130ms ease;
  --envia-transition: 220ms var(--envia-ease);
  --envia-transition-slow: 340ms var(--envia-ease);

  width: 100%;
  max-width: 100%;
  min-width: 0;

  color: var(--envia-text);

  overflow-x: hidden;
}

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

html[data-theme="dark"] .envia-envios-shell,
body.dark .envia-envios-shell,
body.theme-dark .envia-envios-shell,
.dark .envia-envios-shell {
  --envia-bg: #080808;

  --envia-surface: #090909;
  --envia-surface-elevated: #0d0d0d;
  --envia-surface-soft: #111111;
  --envia-surface-muted: #181818;
  --envia-surface-hover: #151515;
  --envia-surface-active: #1c1c1c;

  --envia-border: #272727;
  --envia-border-soft: #1c1c1c;
  --envia-border-strong: #3f3f3f;

  --envia-text: #f5f5f5;
  --envia-text-strong: #ffffff;
  --envia-text-soft: #cccccc;
  --envia-text-muted: #8a8a8a;
  --envia-text-faint: #5f5f5f;

  --envia-accent: #f5f5f5;
  --envia-accent-hover: #ffffff;
  --envia-accent-soft: rgba(255, 255, 255, 0.055);
  --envia-accent-text: #080808;

  --envia-success: #4ade80;
  --envia-success-soft: rgba(74, 222, 128, 0.075);
  --envia-success-line: rgba(74, 222, 128, 0.28);

  --envia-danger: #f87171;
  --envia-danger-soft: rgba(248, 113, 113, 0.075);
  --envia-danger-line: rgba(248, 113, 113, 0.28);

  --envia-warning: #fbbf24;
  --envia-warning-soft: rgba(251, 191, 36, 0.075);
  --envia-warning-line: rgba(251, 191, 36, 0.28);

  --envia-info: #d4d4d4;
  --envia-info-soft: rgba(255, 255, 255, 0.055);
  --envia-info-line: rgba(255, 255, 255, 0.18);
}

/* =========================================================
   CONTROLES
   ========================================================= */

.envia-envios-shell button,
.envia-envios-shell input,
.envia-envios-shell select,
.envia-envios-shell textarea {
  font: inherit;
}

.envia-envios-shell button {
  appearance: none;
  -webkit-appearance: none;

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

.envia-envios-shell svg {
  display: block;

  flex: 0 0 auto;

  color: currentColor;

  stroke: currentColor;
  fill: none;

  pointer-events: none;
}

/* =========================================================
   APP SHELL
   ========================================================= */

.envia-envios-shell.app-shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  min-height: 100vh;

  background: transparent;

  overflow-x: hidden;
}

.envia-envios-shell
.app-shell__workspace,
.envia-envios-shell
.app-shell__main,
.envia-envios-main {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow-x: hidden;
}

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

.envia-envios-page {
  position: relative;

  display: grid;

  grid-auto-rows: max-content;

  align-content: start;

  gap: 10px;

  width: 100%;
  max-width: none;
  min-width: 0;

  min-height:
    calc(
      100vh -
      var(--topbar-height, 54px)
    );

  padding: 8px;

  color: var(--envia-text);

  background: var(--envia-bg);

  overflow-x: hidden;

  isolation: isolate;

  animation:
    enviaEnviosPageEnter
    300ms
    var(--envia-ease)
    both;
}

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

.envia-envios-hero {
  position: relative;

  display: grid;

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

  align-items: center;

  gap: 12px;

  width: 100%;
  min-width: 0;

  min-height: 108px;

  margin: 0;

  padding: 12px;

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

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

  background: var(--envia-surface);

  overflow: hidden;

  box-shadow: none;

  transition:
    border-color
    var(--envia-transition-fast);
}

.envia-envios-hero::before {
  content: "";

  position: absolute;

  top: 0;
  left: 14px;
  right: 14px;

  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      var(--envia-border-strong),
      transparent
    );

  opacity: 0.7;

  pointer-events: none;
}

.envia-envios-hero::after {
  content: "";

  position: absolute;

  right: -65px;
  bottom: -65px;

  width: 160px;
  height: 160px;

  border:
    1px
    solid
    var(--envia-border-soft);

  border-radius: 50%;

  opacity: 0.65;

  pointer-events: none;
}

.envia-envios-hero:hover {
  border-color: var(--envia-border-strong);
}

/* =========================================================
   HERO CONTENT
   ========================================================= */

.envia-envios-hero__content {
  position: relative;

  z-index: 1;

  display: grid;

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

  grid-template-rows:
    auto
    auto
    auto;

  align-items: center;

  column-gap: 11px;

  min-width: 0;

  flex: initial;
}

/* =========================================================
   EYEBROW
   ========================================================= */

.envia-envios-hero__eyebrow {
  grid-column: 1 / -1;
  grid-row: 1;

  display: contents;

  margin: 0;

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

  font-size: 9px;
  font-weight: 900;

  letter-spacing: 0.1em;
}

.envia-envios-hero__eyebrow-icon {
  grid-column: 1;
  grid-row: 1 / 4;

  position: relative;

  display: grid;

  width: 52px;
  height: 52px;

  min-width: 52px;

  place-items: center;

  margin: 0;

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

  border-radius: 13px;

  color: var(--envia-text);

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

  overflow: hidden;

  transition:
    transform
    var(--envia-transition),
    border-color
    var(--envia-transition-fast);
}

.envia-envios-hero__eyebrow-icon::before,
.envia-envios-hero__eyebrow-icon::after {
  content: "";

  position: absolute;

  width: 5px;
  height: 5px;

  opacity: 0.65;
}

.envia-envios-hero__eyebrow-icon::before {
  top: 5px;
  left: 5px;

  border-top:
    1px
    solid
    var(--envia-text-muted);

  border-left:
    1px
    solid
    var(--envia-text-muted);
}

.envia-envios-hero__eyebrow-icon::after {
  right: 5px;
  bottom: 5px;

  border-right:
    1px
    solid
    var(--envia-text-muted);

  border-bottom:
    1px
    solid
    var(--envia-text-muted);
}

.envia-envios-hero:hover
.envia-envios-hero__eyebrow-icon {
  border-color: var(--envia-text);

  transform: translateY(-1px);
}

.envia-envios-hero__eyebrow-icon svg {
  width: 21px;
  height: 21px;

  stroke-width: 1.9;
}

.envia-envios-hero__eyebrow > span:last-child {
  grid-column: 2;
  grid-row: 1;

  align-self: end;

  min-width: 0;

  margin: 0 0 3px;

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

  font-size: 9px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.11em;

  text-transform: uppercase;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

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

.envia-envios-hero__title {
  grid-column: 2;
  grid-row: 2;

  min-width: 0;

  margin: 0;

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

  font-size:
    clamp(
      26px,
      2.2vw,
      32px
    );

  font-weight: 900;

  line-height: 1;

  letter-spacing: -0.045em;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

/* =========================================================
   HERO DESCRIPTION
   ========================================================= */

.envia-envios-hero__description {
  grid-column: 2;
  grid-row: 3;

  max-width: 760px;
  min-width: 0;

  margin: 4px 0 0;

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

  font-size: 11px;
  font-weight: 650;

  line-height: 1.4;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

/* =========================================================
   HERO ACTIONS
   ========================================================= */

.envia-envios-hero__actions {
  position: relative;

  z-index: 1;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 6px;

  min-width: 0;
}

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

.envia-envios-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  min-width: 0;

  min-height: 34px;

  padding:
    0
    10px;

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

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

  outline: 0;

  color: var(--envia-text);

  background: var(--envia-surface);

  font-size: 10px;
  font-weight: 800;

  line-height: 1;

  white-space: nowrap;

  cursor: pointer;

  box-shadow: none;

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

.envia-envios-button svg {
  width: 13px;
  height: 13px;

  stroke-width: 1.9;
}

.envia-envios-button:hover:not(:disabled) {
  border-color: var(--envia-text);

  color: var(--envia-surface);

  background: var(--envia-text);

  transform: translateY(-1px);
}

.envia-envios-button:active:not(:disabled) {
  transform: scale(0.97);
}

.envia-envios-button:disabled {
  opacity: 0.42;

  cursor: not-allowed;

  transform: none;
}

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

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

  color: var(--envia-accent-text);

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

.envia-envios-button--primary:hover:not(:disabled) {
  border-color: var(--envia-accent);

  color: var(--envia-accent-text);

  background: var(--envia-accent);

  opacity: 0.86;
}

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

.envia-envios-button--secondary {
  border-color: var(--envia-border-strong);

  color: var(--envia-text);

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

/* =========================================================
   GHOST
   ========================================================= */

.envia-envios-button--ghost {
  border-color: transparent;

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

  background: transparent;
}

.envia-envios-button--ghost:hover:not(:disabled) {
  border-color: var(--envia-border-strong);

  color: var(--envia-text);

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

/* =========================================================
   DANGER
   ========================================================= */

.envia-envios-button--danger {
  border-color: var(--envia-danger-line);

  color: var(--envia-danger);

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

.envia-envios-button--danger:hover:not(:disabled) {
  border-color: var(--envia-danger);

  color: #ffffff;

  background: var(--envia-danger);
}

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

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

.envia-envios-button__spinner {
  display: inline-block;

  width: 13px;
  height: 13px;

  border:
    2px
    solid
    currentColor;

  border-right-color: transparent;

  border-radius: 50%;

  animation:
    enviaEnviosSpin
    700ms
    linear
    infinite;
}

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

.envia-envios-metrics {
  display: grid;

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

  gap: 1px;

  width: 100%;
  min-width: 0;

  margin: 0;

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

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

  background: var(--envia-border);

  overflow: hidden;
}

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

.envia-envios-metric-card {
  position: relative;

  display: grid;

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

  align-items: center;

  gap: 8px;

  min-width: 0;

  min-height: 74px;

  padding:
    8px
    9px;

  border: 0;
  border-radius: 0;

  background: var(--envia-surface);

  overflow: hidden;

  box-shadow: none;

  transition:
    background
    var(--envia-transition-fast);
}

.envia-envios-metric-card:hover {
  border-color: transparent;

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

  transform: none;
}

.envia-envios-metric-card::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 0;

  width: 2px;
  height: 0;

  border-radius:
    0
    999px
    999px
    0;

  background: currentColor;

  opacity: 0;

  transform: translateY(-50%);

  transition:
    height
    var(--envia-transition),
    opacity
    var(--envia-transition-fast);
}

.envia-envios-metric-card:hover::before {
  height: 20px;

  opacity: 0.4;
}

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

.envia-envios-metric-card__icon {
  display: grid;

  width: 36px;
  height: 36px;

  min-width: 36px;

  place-items: center;

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

  border-radius: 9px;

  color: var(--envia-text);

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

  transition:
    border-color
    var(--envia-transition-fast),
    transform
    var(--envia-transition);
}

.envia-envios-metric-card:hover
.envia-envios-metric-card__icon {
  border-color: var(--envia-border-strong);

  transform: translateY(-1px);
}

.envia-envios-metric-card__icon svg {
  width: 16px;
  height: 16px;

  stroke-width: 1.9;
}

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

.envia-envios-metric-card__content {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.envia-envios-metric-card__label {
  min-width: 0;

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

  font-size: 8.5px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.065em;

  text-transform: uppercase;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-envios-metric-card__value {
  display: block;

  min-width: 0;

  margin: 0;

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

  font-size: 20px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: -0.035em;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-envios-metric-card__value--currency {
  font-size: 16px;
}

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

.envia-envios-metric-card[data-metric-card="transito"]
.envia-envios-metric-card__icon,
.envia-envios-metric-card[data-metric-card="generados"]
.envia-envios-metric-card__icon,
.envia-envios-metric-card[data-metric-card="etiquetas"]
.envia-envios-metric-card__icon {
  border-color: var(--envia-info-line);

  color: var(--envia-info);

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

.envia-envios-metric-card[data-metric-card="entregados"]
.envia-envios-metric-card__icon {
  border-color: var(--envia-success-line);

  color: var(--envia-success);

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

.envia-envios-metric-card[data-metric-card="incidencias"]
.envia-envios-metric-card__icon,
.envia-envios-metric-card[data-metric-card="pendientes"]
.envia-envios-metric-card__icon {
  border-color: var(--envia-warning-line);

  color: var(--envia-warning);

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

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

.envia-envios-metric-card.is-loading {
  position: relative;

  overflow: hidden;
}

.envia-envios-metric-card.is-loading::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      100deg,
      transparent 20%,
      rgba(128, 128, 128, 0.08) 50%,
      transparent 80%
    );

  transform: translateX(-100%);

  animation:
    enviaEnviosSkeleton
    1.2s
    ease
    infinite;
}

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

.envia-envios-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;

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

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

  background: var(--envia-surface);

  overflow: hidden;

  box-shadow: none;
}

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

.envia-envios-toolbar {
  display: grid;

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

  align-items: center;

  gap: 8px;

  width: 100%;
  min-width: 0;

  min-height: 54px;

  padding: 8px;

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

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

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

.envia-envios-toolbar__search {
  position: relative;

  display: flex;

  align-items: center;

  width: 100%;
  max-width: 680px;
  min-width: 0;
}

.envia-envios-toolbar__search > svg {
  position: absolute;

  top: 50%;
  left: 10px;

  width: 13px;
  height: 13px;

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

  transform: translateY(-50%);

  pointer-events: none;
}

.envia-envios-toolbar__search
.envia-envios-input {
  padding-left: 32px;
  padding-right: 38px;
}

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

.envia-envios-toolbar__clear-search {
  position: absolute;

  top: 50%;
  right: 4px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 28px;
  height: 28px;

  padding: 0;

  border:
    1px
    solid
    transparent;

  border-radius: 7px;

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

  background: transparent;

  cursor: pointer;

  transform: translateY(-50%);

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

.envia-envios-toolbar__clear-search:hover {
  border-color: var(--envia-border);

  color: var(--envia-text);

  background: var(--envia-surface-muted);
}

.envia-envios-toolbar__clear-search svg {
  width: 12px;
  height: 12px;
}

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

.envia-envios-toolbar__actions {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 6px;

  min-width: 0;
}

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

.envia-envios-input,
.envia-envios-select,
.envia-envios-textarea {
  width: 100%;
  min-width: 0;

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

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

  outline: 0;

  color: var(--envia-text);

  background: var(--envia-surface);

  font-size: 10px;
  font-weight: 700;

  box-shadow: none;

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

.envia-envios-input,
.envia-envios-select {
  height: 36px;

  min-height: 36px;

  padding:
    0
    8px;
}

.envia-envios-textarea {
  min-height: 70px;

  padding: 8px;

  line-height: 1.45;

  resize: vertical;
}

.envia-envios-input::placeholder,
.envia-envios-textarea::placeholder {
  color: var(--envia-text-faint);
}

.envia-envios-input:hover,
.envia-envios-select:hover,
.envia-envios-textarea:hover,
.envia-envios-input:focus,
.envia-envios-select:focus,
.envia-envios-textarea:focus {
  border-color: var(--envia-text);

  background: var(--envia-surface-elevated);
}

.envia-envios-select {
  cursor: pointer;
}

html[data-theme="dark"]
.envia-envios-input,
html[data-theme="dark"]
.envia-envios-select,
html[data-theme="dark"]
.envia-envios-textarea {
  color-scheme: dark;
}

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

.envia-envios-filters {
  display: grid;

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

  gap: 6px;

  min-width: 0;

  padding: 8px;

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

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

.envia-envios-filters[hidden] {
  display: none !important;
}

.envia-envios-filters.is-open {
  animation:
    enviaEnviosFiltersEnter
    220ms
    var(--envia-ease)
    both;
}

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

.envia-envios-filter {
  display: grid;

  gap: 4px;

  min-width: 0;
}

.envia-envios-filter label,
.envia-envios-form-field label {
  min-width: 0;

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

  font-size: 8px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.065em;

  text-transform: uppercase;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

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

.envia-envios-filters__actions {
  grid-column: 1 / -1;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 6px;

  padding-top: 1px;
}

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

.envia-envios-filter-count {
  display: inline-grid;

  min-width: 18px;
  height: 18px;

  place-items: center;

  padding:
    0
    5px;

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

  border-radius: 999px;

  color: inherit;

  background: var(--envia-surface);

  font-size: 8px;
  font-weight: 900;
}

.envia-envios-button--primary
.envia-envios-filter-count {
  border-color:
    color-mix(
      in srgb,
      var(--envia-accent-text) 22%,
      transparent
    );

  color: var(--envia-accent-text);

  background:
    color-mix(
      in srgb,
      var(--envia-accent-text) 9%,
      transparent
    );
}

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

.envia-envios-selection-bar {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  min-width: 0;

  min-height: 50px;

  padding:
    7px
    9px;

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

  background: var(--envia-surface-muted);
}

.envia-envios-selection-bar[hidden] {
  display: none !important;
}

.envia-envios-selection-bar.is-visible {
  animation:
    enviaEnviosSelectionEnter
    180ms
    var(--envia-ease)
    both;
}

.envia-envios-selection-bar__summary {
  display: flex;

  align-items: baseline;

  gap: 5px;

  min-width: 0;

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

  font-size: 9px;
  font-weight: 700;
}

.envia-envios-selection-bar__summary strong {
  color: var(--envia-text-strong);

  font-size: 15px;
  font-weight: 900;
}

.envia-envios-selection-bar__actions {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 5px;

  min-width: 0;
}

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

.envia-envios-table-wrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow-x: auto;
  overflow-y: visible;

  overscroll-behavior-x: contain;

  scrollbar-width: thin;

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

.envia-envios-table-wrapper::-webkit-scrollbar {
  height: 6px;
}

.envia-envios-table-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.envia-envios-table-wrapper::-webkit-scrollbar-thumb {
  border-radius: 999px;

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

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

.envia-envios-table {
  width: 100%;

  min-width: 1280px;

  border-collapse: collapse;

  table-layout: auto;

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

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

.envia-envios-table th,
.envia-envios-table td {
  min-width: 0;

  padding:
    8px
    9px;

  border-right:
    1px
    solid
    var(--envia-border);

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

  vertical-align: middle;
}

.envia-envios-table th:last-child,
.envia-envios-table td:last-child {
  border-right: 0;
}

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

.envia-envios-table th {
  height: 38px;

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

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

  font-size: 8.5px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.065em;

  text-align: left;

  text-transform: uppercase;

  white-space: nowrap;
}

.envia-envios-table td {
  color: var(--envia-text-soft);

  background: var(--envia-surface);

  font-size: 9.5px;
  font-weight: 650;

  line-height: 1.35;
}

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

.envia-envios-table__row {
  position: relative;

  transition:
    background
    var(--envia-transition-fast),
    opacity
    var(--envia-transition-fast);
}

.envia-envios-table__row:hover td {
  background: var(--envia-surface-hover);
}

.envia-envios-table__row.is-selected td {
  background: var(--envia-surface-muted);
}

.envia-envios-table__row.is-selected
td:first-child {
  box-shadow:
    inset
    2px
    0
    0
    var(--envia-text);
}

.envia-envios-table__row.has-incident
td:first-child {
  box-shadow:
    inset
    2px
    0
    0
    var(--envia-warning);
}

/* =========================================================
   TABLE SPECIAL COLS
   ========================================================= */

.envia-envios-table__selection {
  width: 42px;

  text-align: center;
}

.envia-envios-table__actions-column {
  min-width: 230px;

  text-align: right;
}

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

.envia-envios-checkbox {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 20px;
  height: 20px;

  cursor: pointer;
}

.envia-envios-checkbox input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}

.envia-envios-checkbox__control {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 17px;
  height: 17px;

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

  border-radius: 5px;

  background: var(--envia-surface);

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

.envia-envios-checkbox input:checked +
.envia-envios-checkbox__control,
.envia-envios-checkbox input:indeterminate +
.envia-envios-checkbox__control {
  border-color: var(--envia-accent);

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

.envia-envios-checkbox input:checked +
.envia-envios-checkbox__control::after {
  content: "";

  width: 7px;
  height: 4px;

  margin-top: -2px;

  border-left:
    2px
    solid
    var(--envia-accent-text);

  border-bottom:
    2px
    solid
    var(--envia-accent-text);

  transform: rotate(-45deg);
}

.envia-envios-checkbox input:indeterminate +
.envia-envios-checkbox__control::after {
  content: "";

  width: 7px;
  height: 2px;

  border-radius: 999px;

  background: var(--envia-accent-text);
}

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

.envia-envios-tracking-cell,
.envia-envios-person-cell,
.envia-envios-destination-cell,
.envia-envios-carrier-cell,
.envia-envios-value-cell,
.envia-envios-date-cell {
  display: grid;

  gap: 3px;

  min-width: 0;
}

/* =========================================================
   TRACKING
   ========================================================= */

.envia-envios-tracking-cell__number {
  display: inline-flex;

  align-items: center;

  width: fit-content;
  max-width: 220px;

  padding: 0;

  border: 0;

  outline: 0;

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

  background: transparent;

  font-size: 10px;
  font-weight: 850;

  text-align: left;

  text-decoration: none;

  cursor: pointer;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-envios-tracking-cell__number:hover {
  text-decoration: underline;
}

.envia-envios-tracking-cell__meta {
  display: grid;

  gap: 2px;

  min-width: 0;

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

  font-size: 8px;
  font-weight: 650;
}

/* =========================================================
   CELL STRONG / SECONDARY
   ========================================================= */

.envia-envios-person-cell strong,
.envia-envios-destination-cell strong,
.envia-envios-carrier-cell strong,
.envia-envios-value-cell strong,
.envia-envios-date-cell strong {
  min-width: 0;

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

  font-size: 9.5px;
  font-weight: 800;

  line-height: 1.2;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-envios-person-cell span,
.envia-envios-destination-cell span,
.envia-envios-carrier-cell span,
.envia-envios-value-cell span,
.envia-envios-date-cell span {
  min-width: 0;

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

  font-size: 8px;
  font-weight: 650;

  line-height: 1.35;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

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

.envia-envios-status-wrapper {
  display: grid;

  justify-items: start;

  gap: 4px;

  min-width: 0;
}

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

.envia-envios-status {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

  width: fit-content;
  max-width: 100%;

  min-height: 24px;

  padding:
    0
    7px;

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

  border-radius: 999px;

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

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

  font-size: 8px;
  font-weight: 820;

  line-height: 1;

  white-space: nowrap;
}

.envia-envios-status__dot {
  width: 5px;
  height: 5px;

  min-width: 5px;

  border-radius: 50%;

  background: currentColor;
}

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

.envia-envios-status--entregado,
.envia-envios-status--recolectado {
  border-color: var(--envia-success-line);

  color: var(--envia-success);

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

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

.envia-envios-status--en_transito,
.envia-envios-status--en_reparto,
.envia-envios-status--generado,
.envia-envios-status--etiqueta_generada,
.envia-envios-status--listo_para_retiro,
.envia-envios-status--recoleccion_pendiente,
.envia-envios-status--generando,
.envia-envios-status--cotizado {
  border-color: var(--envia-info-line);

  color: var(--envia-info);

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

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

.envia-envios-status--incidencia,
.envia-envios-status--intento_entrega,
.envia-envios-status--retenido {
  border-color: var(--envia-warning-line);

  color: var(--envia-warning);

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

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

.envia-envios-status--cancelado,
.envia-envios-status--error,
.envia-envios-status--devuelto {
  border-color: var(--envia-danger-line);

  color: var(--envia-danger);

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

/* =========================================================
   INCIDENT BADGE
   ========================================================= */

.envia-envios-incident-badge {
  display: inline-flex;

  align-items: center;

  gap: 4px;

  color: var(--envia-warning);

  font-size: 7.5px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.05em;

  text-transform: uppercase;
}

.envia-envios-incident-badge svg {
  width: 11px;
  height: 11px;
}

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

.envia-envios-label-status {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  width: fit-content;

  font-size: 8px;
  font-weight: 800;

  white-space: nowrap;
}

.envia-envios-label-status svg {
  width: 12px;
  height: 12px;
}

.envia-envios-label-status--available {
  color: var(--envia-success);
}

.envia-envios-label-status--pending {
  color: var(--envia-text-muted);
}

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

.envia-envios-row-actions {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 4px;
}

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

.envia-envios-icon-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 29px;
  height: 29px;

  min-width: 29px;

  padding: 0;

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

  border-radius: 7px;

  outline: 0;

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

  background: var(--envia-surface);

  cursor: pointer;

  box-shadow: none;

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

.envia-envios-icon-button:hover:not(:disabled) {
  border-color: var(--envia-text);

  color: var(--envia-surface);

  background: var(--envia-text);

  transform: translateY(-1px);
}

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

.envia-envios-icon-button:disabled {
  opacity: 0.35;

  cursor: not-allowed;

  transform: none;
}

.envia-envios-icon-button svg {
  width: 12px;
  height: 12px;

  stroke-width: 1.9;
}

.envia-envios-icon-button--danger {
  border-color: var(--envia-danger-line);

  color: var(--envia-danger);

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

.envia-envios-icon-button--danger:hover:not(:disabled) {
  border-color: var(--envia-danger);

  color: #ffffff;

  background: var(--envia-danger);
}

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

.envia-envios-pagination {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  min-width: 0;

  min-height: 50px;

  padding:
    7px
    9px;

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

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

.envia-envios-pagination__summary {
  min-width: 0;

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

  font-size: 9px;
  font-weight: 650;
}

.envia-envios-pagination__controls {
  display: flex;

  align-items: center;

  gap: 6px;
}

.envia-envios-pagination__button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 30px;
  height: 30px;

  padding: 0;

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

  border-radius: 7px;

  outline: 0;

  color: var(--envia-text);

  background: var(--envia-surface);

  cursor: pointer;

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

.envia-envios-pagination__button:hover:not(:disabled) {
  border-color: var(--envia-text);

  color: var(--envia-surface);

  background: var(--envia-text);
}

.envia-envios-pagination__button:disabled {
  opacity: 0.38;

  cursor: not-allowed;
}

.envia-envios-pagination__button svg {
  width: 12px;
  height: 12px;
}

.envia-envios-pagination__page {
  min-width: 100px;

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

  font-size: 9px;
  font-weight: 750;

  text-align: center;

  white-space: nowrap;
}

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

.envia-envios-loading-state,
.envia-envios-empty-state {
  display: grid;

  place-items: center;

  align-content: center;

  gap: 7px;

  min-height: 230px;

  padding: 24px;

  text-align: center;
}

.envia-envios-loading-state {
  grid-template-columns:
    auto
    auto;

  min-height: 170px;

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

  font-size: 10px;
  font-weight: 650;
}

.envia-envios-empty-state__icon {
  display: grid;

  width: 44px;
  height: 44px;

  place-items: center;

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

  border-radius: 10px;

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

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

.envia-envios-empty-state__icon svg {
  width: 19px;
  height: 19px;

  stroke-width: 1.7;
}

.envia-envios-empty-state h3 {
  margin: 2px 0 0;

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

  font-size: 12px;
  font-weight: 850;
}

.envia-envios-empty-state p {
  max-width: 420px;

  margin: 0;

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

  font-size: 9px;
  font-weight: 650;

  line-height: 1.45;
}

.envia-envios-empty-state--error
.envia-envios-empty-state__icon {
  border-color: var(--envia-danger-line);

  color: var(--envia-danger);

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

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

.envia-envios-spinner {
  display: inline-block;

  width: 19px;
  height: 19px;

  border:
    2px
    solid
    var(--envia-border-strong);

  border-right-color: var(--envia-text);

  border-radius: 50%;

  animation:
    enviaEnviosSpin
    700ms
    linear
    infinite;
}

.is-spinning {
  animation:
    enviaEnviosSpin
    700ms
    linear
    infinite;
}

/* =========================================================
   FOCUS
   ========================================================= */

.envia-envios-shell button:focus-visible,
.envia-envios-shell input:focus-visible,
.envia-envios-shell select:focus-visible,
.envia-envios-shell textarea:focus-visible {
  outline:
    2px
    solid
    color-mix(
      in srgb,
      var(--envia-text) 18%,
      transparent
    );

  outline-offset: 2px;
}

/* =========================================================
   CONTINÚA EN PARTE 2

   INCLUYE:
   - Modales
   - Formularios
   - Switch
   - Warning box
   - Detalle completo
   - Paquetes
   - Timeline
   - Toast
   - Responsive 1500 / 1180 / 860 / 620 / 420
   - Tabla convertida a cards en móvil
   - Cero scroll horizontal
   - Animaciones
   ========================================================= *//* =========================================================
   MODAL LAYER
   ========================================================= */

.envia-envios-modal-layer {
  position: fixed;

  inset: 0;

  z-index: 9998;

  display: none;

  width: 100%;
  height: 100%;

  pointer-events: none;
}

.envia-envios-modal-layer.is-open {
  display: block;

  pointer-events: auto;
}

body.envia-envios-modal-open {
  overflow: hidden;
}

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

.envia-envios-modal-backdrop {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  width: 100%;
  height: 100%;

  padding:
    76px
    10px
    10px;

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

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;

  animation:
    enviaEnviosBackdropEnter
    180ms
    ease
    both;
}

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

.envia-envios-modal {
  display: flex;

  flex-direction: column;

  width:
    min(
      760px,
      100%
    );

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

  min-width: 0;

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

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

  color: var(--envia-text);

  background: var(--envia-surface);

  box-shadow: none;

  opacity: 0;

  transform:
    translateY(7px)
    scale(0.99);

  transition:
    opacity
    var(--envia-transition),
    transform
    var(--envia-transition);

  overflow: hidden;
}

.envia-envios-modal.is-visible {
  opacity: 1;

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

.envia-envios-modal--small {
  width:
    min(
      520px,
      100%
    );
}

.envia-envios-modal--medium {
  width:
    min(
      760px,
      100%
    );
}

.envia-envios-modal--large {
  width:
    min(
      1180px,
      100%
    );
}

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

.envia-envios-modal__header {
  position: relative;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 12px;

  flex: 0 0 auto;

  min-width: 0;

  min-height: 60px;

  padding:
    9px
    10px;

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

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

.envia-envios-modal__header::before {
  content: "";

  position: absolute;

  top: 0;
  left: 10px;

  width: 26px;
  height: 1px;

  background: var(--envia-text);

  opacity: 0.25;
}

.envia-envios-modal__header > div {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.envia-envios-modal__eyebrow {
  display: block;

  margin: 0;

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

  font-size: 8.5px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.085em;

  text-transform: uppercase;
}

.envia-envios-modal__header h2 {
  min-width: 0;

  margin: 0;

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

  font-size: 15px;
  font-weight: 900;

  line-height: 1.15;

  letter-spacing: -0.025em;

  overflow-wrap: anywhere;
}

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

.envia-envios-modal__header-meta {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 3px;

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

  font-size: 8.5px;
  font-weight: 650;
}

.envia-envios-modal__header-meta strong {
  color: var(--envia-text-strong);

  font-weight: 800;
}

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

.envia-envios-modal__close {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 30px;
  height: 30px;

  min-width: 30px;

  padding: 0;

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

  border-radius: 7px;

  outline: 0;

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

  background: var(--envia-surface);

  cursor: pointer;

  box-shadow: none;

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

.envia-envios-modal__close:hover {
  border-color: var(--envia-text);

  color: var(--envia-surface);

  background: var(--envia-text);
}

.envia-envios-modal__close svg {
  width: 13px;
  height: 13px;
}

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

.envia-envios-modal__body {
  flex:
    1
    1 auto;

  min-width: 0;
  min-height: 0;

  padding: 8px;

  background: var(--envia-bg);

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;

  scrollbar-width: thin;

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

.envia-envios-modal__body::-webkit-scrollbar {
  width: 6px;
}

.envia-envios-modal__body::-webkit-scrollbar-thumb {
  border-radius: 999px;

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

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

.envia-envios-modal__footer {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 6px;

  flex: 0 0 auto;

  min-width: 0;

  min-height: 48px;

  padding:
    6px
    8px;

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

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

.envia-envios-modal__footer--spread {
  justify-content: space-between;
}

.envia-envios-modal__footer-group {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 5px;

  min-width: 0;
}

.envia-envios-modal__footer
.envia-envios-button {
  min-height: 31px;

  padding:
    0
    8px;

  font-size: 9px;
}

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

.envia-envios-modal-loading {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  min-height: 260px;

  padding: 24px;

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

  font-size: 10px;
  font-weight: 650;
}

/* =========================================================
   FORMS
   ========================================================= */

.envia-envios-form-grid {
  display: grid;

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

  gap: 7px;

  width: 100%;
  min-width: 0;
}

.envia-envios-form-field {
  display: grid;

  gap: 4px;

  min-width: 0;

  margin-bottom: 10px;
}

.envia-envios-form-grid
.envia-envios-form-field {
  margin-bottom: 0;
}

.envia-envios-form-field label {
  color: var(--envia-text-muted);

  font-size: 8.5px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.065em;

  text-transform: uppercase;
}

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

  font-size: 8.5px;
  font-weight: 650;

  line-height: 1.4;
}

/* =========================================================
   INPUT GROUP
   ========================================================= */

.envia-envios-input-group {
  position: relative;

  display: flex;

  align-items: center;

  width: 100%;
  min-width: 0;
}

.envia-envios-input-group > svg {
  position: absolute;

  top: 50%;
  left: 10px;

  width: 13px;
  height: 13px;

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

  transform: translateY(-50%);

  pointer-events: none;
}

.envia-envios-input-group
.envia-envios-input {
  padding-left: 32px;
}

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

.envia-envios-switch-card {
  display: grid;

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

  align-items: center;

  gap: 10px;

  width: 100%;
  min-width: 0;

  margin-top: 8px;

  padding: 9px;

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

  border-radius: 9px;

  background: var(--envia-surface);

  cursor: pointer;

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

.envia-envios-switch-card:hover {
  border-color: var(--envia-border-strong);

  background: var(--envia-surface-hover);
}

.envia-envios-switch-card__content {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.envia-envios-switch-card__content strong {
  color: var(--envia-text-strong);

  font-size: 10px;
  font-weight: 800;
}

.envia-envios-switch-card__content small {
  color: var(--envia-text-muted);

  font-size: 8.5px;
  font-weight: 650;

  line-height: 1.4;
}

.envia-envios-switch-card input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}

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

.envia-envios-switch {
  position: relative;

  display: inline-flex;

  width: 36px;
  height: 20px;

  min-width: 36px;

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

  border-radius: 999px;

  background: var(--envia-surface-muted);

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

.envia-envios-switch::after {
  content: "";

  position: absolute;

  top: 3px;
  left: 3px;

  width: 12px;
  height: 12px;

  border-radius: 50%;

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

  transition:
    transform
    var(--envia-transition),
    background
    var(--envia-transition-fast);
}

.envia-envios-switch-card
input:checked +
.envia-envios-switch {
  border-color: var(--envia-text);

  background: var(--envia-text);
}

.envia-envios-switch-card
input:checked +
.envia-envios-switch::after {
  background: var(--envia-surface);

  transform: translateX(16px);
}

/* =========================================================
   WARNING BOX
   ========================================================= */

.envia-envios-warning-box {
  display: grid;

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

  align-items: start;

  gap: 7px;

  width: 100%;
  min-width: 0;

  margin-bottom: 8px;

  padding: 8px;

  border:
    1px
    solid
    var(--envia-warning-line);

  border-radius: 9px;

  color: var(--envia-warning);

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

.envia-envios-warning-box > svg {
  width: 14px;
  height: 14px;

  margin-top: 1px;
}

.envia-envios-warning-box div {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.envia-envios-warning-box strong {
  color: currentColor;

  font-size: 9.5px;
  font-weight: 850;
}

.envia-envios-warning-box p {
  margin: 0;

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

  font-size: 8.5px;
  font-weight: 650;

  line-height: 1.4;

  overflow-wrap: anywhere;
}

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

.envia-envios-detail {
  display: grid;

  align-content: start;

  gap: 7px;

  min-width: 0;
}

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

.envia-envios-detail-section {
  width: 100%;
  min-width: 0;

  padding: 0;

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

  border-radius: 9px;

  background: var(--envia-surface);

  overflow: hidden;

  transition:
    border-color
    var(--envia-transition-fast);
}

.envia-envios-detail-section:hover {
  border-color: var(--envia-border-strong);
}

.envia-envios-detail-section__header {
  display: flex;

  align-items: center;

  gap: 7px;

  min-width: 0;

  min-height: 44px;

  margin: 0;

  padding:
    7px
    8px;

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

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

.envia-envios-detail-section__header > svg {
  width: 13px;
  height: 13px;

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

.envia-envios-detail-section__header h3 {
  min-width: 0;

  margin: 0;

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

  font-size: 10.5px;
  font-weight: 850;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

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

.envia-envios-detail-section__count {
  display: inline-grid;

  min-width: 22px;
  height: 22px;

  place-items: center;

  margin-left: auto;

  padding:
    0
    6px;

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

  border-radius: 999px;

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

  background: var(--envia-surface);

  font-size: 8px;
  font-weight: 900;
}

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

.envia-envios-detail-grid,
.envia-envios-tracking-summary {
  display: grid;

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

  min-width: 0;
}

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

.envia-envios-detail-item {
  display: grid;

  align-content: center;

  gap: 4px;

  min-width: 0;

  min-height: 58px;

  padding:
    7px
    8px;

  border-right:
    1px
    solid
    var(--envia-border);

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

  border-radius: 0;

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

.envia-envios-detail-item:nth-child(4n) {
  border-right: 0;
}

.envia-envios-detail-item--full {
  grid-column: 1 / -1;

  border-right: 0;
}

.envia-envios-detail-item span {
  min-width: 0;

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

  font-size: 8px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.055em;

  text-transform: uppercase;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-envios-detail-item strong {
  min-width: 0;

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

  font-size: 9.5px;
  font-weight: 800;

  line-height: 1.35;

  overflow-wrap: anywhere;
}

/* =========================================================
   PACKAGES GRID
   ========================================================= */

.envia-envios-packages-grid {
  display: grid;

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

  gap: 7px;

  padding: 7px;

  min-width: 0;
}

/* =========================================================
   PACKAGE CARD
   ========================================================= */

.envia-envios-package-card {
  min-width: 0;

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

  border-radius: 8px;

  background: var(--envia-surface);

  overflow: hidden;

  transition:
    border-color
    var(--envia-transition-fast),
    transform
    var(--envia-transition);
}

.envia-envios-package-card:hover {
  border-color: var(--envia-border-strong);

  transform: translateY(-1px);
}

.envia-envios-package-card__header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 7px;

  min-width: 0;

  min-height: 40px;

  padding:
    6px
    7px;

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

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

.envia-envios-package-card__header strong {
  min-width: 0;

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

  font-size: 9.5px;
  font-weight: 800;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-envios-package-card__header span {
  color: var(--envia-text-muted);

  font-size: 8px;
  font-weight: 650;

  white-space: nowrap;
}

.envia-envios-package-card__body {
  display: grid;

  min-width: 0;

  padding: 0;
}

.envia-envios-package-card__body > div {
  display: grid;

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

  gap: 7px;

  min-width: 0;

  min-height: 38px;

  padding:
    6px
    7px;

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

.envia-envios-package-card__body > div:last-child {
  border-bottom: 0;
}

.envia-envios-package-card__body span {
  color: var(--envia-text-muted);

  font-size: 8px;
  font-weight: 650;
}

.envia-envios-package-card__body strong {
  min-width: 0;

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

  font-size: 8.5px;
  font-weight: 800;

  text-align: right;

  overflow-wrap: anywhere;
}

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

.envia-envios-detail-empty {
  display: grid;

  place-items: center;

  min-height: 90px;

  margin: 7px;

  padding: 14px;

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

  border-radius: 8px;

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

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

  font-size: 9px;
  font-weight: 650;

  text-align: center;
}

/* =========================================================
   TIMELINE
   ========================================================= */

.envia-envios-timeline {
  position: relative;

  display: grid;

  min-width: 0;

  padding:
    7px
    7px
    0;
}

.envia-envios-timeline__item {
  position: relative;

  display: grid;

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

  gap: 7px;

  min-width: 0;

  padding-bottom: 7px;
}

.envia-envios-timeline__item::before {
  content: "";

  position: absolute;

  top: 13px;
  bottom: -2px;
  left: 6px;

  width: 1px;

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

.envia-envios-timeline__item:last-child::before {
  display: none;
}

/* =========================================================
   TIMELINE DOT
   ========================================================= */

.envia-envios-timeline__dot {
  position: relative;

  z-index: 1;

  display: block;

  width: 13px;
  height: 13px;

  margin-top: 6px;

  border:
    3px
    solid
    var(--envia-surface);

  border-radius: 50%;

  background: var(--envia-text);

  outline:
    1px
    solid
    var(--envia-border-strong);
}

/* =========================================================
   TIMELINE CONTENT
   ========================================================= */

.envia-envios-timeline__content {
  min-width: 0;

  padding: 8px;

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

  border-radius: 8px;

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

.envia-envios-timeline__header {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 8px;

  min-width: 0;
}

.envia-envios-timeline__header strong {
  min-width: 0;

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

  font-size: 9px;
  font-weight: 800;

  overflow-wrap: anywhere;
}

.envia-envios-timeline__header time {
  flex: 0 0 auto;

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

  font-size: 8px;
  font-weight: 650;

  white-space: nowrap;
}

.envia-envios-timeline__content p {
  margin:
    5px
    0
    0;

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

  font-size: 8.5px;
  font-weight: 650;

  line-height: 1.4;
}

.envia-envios-timeline__location {
  display: inline-flex;

  align-items: center;

  gap: 4px;

  margin-top: 5px;

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

  font-size: 8px;
  font-weight: 650;
}

.envia-envios-timeline__location svg {
  width: 11px;
  height: 11px;
}

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

.envia-envios-toast-container {
  position: fixed;

  top: 72px;
  right: 12px;

  z-index: 10050;

  display: flex;

  flex-direction: column;

  gap: 6px;

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

  pointer-events: none;
}

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

.envia-envios-toast {
  display: grid;

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

  align-items: center;

  gap: 7px;

  width: 100%;

  min-height: 48px;

  padding:
    6px
    7px;

  border:
    1px
    solid
    var(--envia-border-strong, #bfbfbf);

  border-radius: 9px;

  color:
    var(--envia-text, #0a0a0a);

  background:
    var(--envia-surface, #ffffff);

  box-shadow: none;

  opacity: 0;

  transform: translateX(12px);

  transition:
    opacity
    var(--envia-transition, 220ms ease),
    transform
    var(--envia-transition, 220ms ease);

  pointer-events: auto;
}

.envia-envios-toast.is-visible {
  opacity: 1;

  transform: translateX(0);
}

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

.envia-envios-toast__icon {
  display: grid;

  width: 30px;
  height: 30px;

  place-items: center;

  border:
    1px
    solid
    var(--envia-border, #dddddd);

  border-radius: 7px;

  color:
    var(--envia-text-muted, #737373);

  background:
    var(--envia-surface-soft, #f7f7f7);
}

.envia-envios-toast__icon svg {
  width: 13px;
  height: 13px;
}

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

.envia-envios-toast__message {
  min-width: 0;

  color:
    var(--envia-text, #0a0a0a);

  font-size: 9px;
  font-weight: 700;

  line-height: 1.4;

  overflow-wrap: anywhere;
}

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

.envia-envios-toast__close {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 28px;
  height: 28px;

  padding: 0;

  border: 0;

  border-radius: 7px;

  color:
    var(--envia-text-muted, #737373);

  background: transparent;

  cursor: pointer;
}

.envia-envios-toast__close:hover {
  color:
    var(--envia-text, #0a0a0a);

  background:
    var(--envia-surface-muted, #eeeeee);
}

.envia-envios-toast__close svg {
  width: 12px;
  height: 12px;
}

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

.envia-envios-toast--success {
  border-color:
    var(--envia-success-line, rgba(21, 128, 61, 0.28));
}

.envia-envios-toast--success
.envia-envios-toast__icon {
  border-color:
    var(--envia-success-line, rgba(21, 128, 61, 0.28));

  color:
    var(--envia-success, #15803d);

  background:
    var(--envia-success-soft, rgba(21, 128, 61, 0.065));
}

.envia-envios-toast--error {
  border-color:
    var(--envia-danger-line, rgba(220, 38, 38, 0.28));
}

.envia-envios-toast--error
.envia-envios-toast__icon {
  border-color:
    var(--envia-danger-line, rgba(220, 38, 38, 0.28));

  color:
    var(--envia-danger, #dc2626);

  background:
    var(--envia-danger-soft, rgba(220, 38, 38, 0.065));
}

.envia-envios-toast--warning {
  border-color:
    var(--envia-warning-line, rgba(180, 83, 9, 0.28));
}

.envia-envios-toast--warning
.envia-envios-toast__icon {
  border-color:
    var(--envia-warning-line, rgba(180, 83, 9, 0.28));

  color:
    var(--envia-warning, #b45309);

  background:
    var(--envia-warning-soft, rgba(180, 83, 9, 0.065));
}

.envia-envios-toast--info
.envia-envios-toast__icon {
  border-color:
    var(--envia-info-line, rgba(0, 0, 0, 0.18));

  color:
    var(--envia-info, #404040);

  background:
    var(--envia-info-soft, rgba(0, 0, 0, 0.045));
}

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

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

  .envia-envios-filters {
    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      );
  }

  .envia-envios-detail-grid,
  .envia-envios-tracking-summary {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .envia-envios-detail-item:nth-child(4n) {
    border-right:
      1px
      solid
      var(--envia-border);
  }

  .envia-envios-detail-item:nth-child(3n) {
    border-right: 0;
  }
}

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

@media (
  max-width: 1180px
) {
  .envia-envios-filters {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

  .envia-envios-detail-grid,
  .envia-envios-tracking-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .envia-envios-detail-item:nth-child(3n) {
    border-right:
      1px
      solid
      var(--envia-border);
  }

  .envia-envios-detail-item:nth-child(2n) {
    border-right: 0;
  }

  .envia-envios-packages-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

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

@media (
  max-width: 860px
) {
  .envia-envios-hero {
    grid-template-columns: 1fr;

    align-items: start;

    min-height: 0;
  }

  .envia-envios-hero__actions {
    justify-content: flex-start;
  }

  .envia-envios-toolbar {
    grid-template-columns: 1fr;
  }

  .envia-envios-toolbar__search {
    max-width: none;
  }

  .envia-envios-toolbar__actions {
    justify-content: flex-start;
  }

  .envia-envios-filters {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .envia-envios-selection-bar {
    align-items: flex-start;

    flex-direction: column;
  }

  .envia-envios-selection-bar__actions {
    justify-content: flex-start;
  }

  .envia-envios-pagination {
    flex-direction: column;

    align-items: stretch;
  }

  .envia-envios-pagination__summary {
    text-align: center;
  }

  .envia-envios-pagination__controls {
    justify-content: center;
  }

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

  .envia-envios-modal__footer--spread {
    align-items: stretch;

    flex-direction: column;
  }

  .envia-envios-modal__footer-group {
    width: 100%;
  }

  .envia-envios-modal__footer-group
  .envia-envios-button {
    flex: 1;
  }
}

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

@media (
  max-width: 620px
) {
  html,
  body,
  .app-shell,
  .app-main,
  .app-content,
  .envia-envios-shell,
  .envia-envios-main,
  .envia-envios-page {
    max-width: 100%;

    overflow-x: hidden;
  }

  .envia-envios-page {
    gap: 6px;

    padding: 5px;
  }

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

  .envia-envios-hero {
    gap: 8px;

    padding: 8px;
  }

  .envia-envios-hero__content {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    column-gap: 8px;
  }

  .envia-envios-hero__eyebrow-icon {
    width: 40px;
    height: 40px;

    min-width: 40px;

    border-radius: 10px;
  }

  .envia-envios-hero__eyebrow-icon svg {
    width: 17px;
    height: 17px;
  }

  .envia-envios-hero__eyebrow > span:last-child {
    font-size: 8px;
  }

  .envia-envios-hero__title {
    font-size: 23px;
  }

  .envia-envios-hero__description {
    font-size: 10px;

    white-space: normal;
  }

  .envia-envios-hero__actions {
    display: grid;

    grid-template-columns: 1fr;

    width: 100%;
  }

  .envia-envios-hero__actions
  .envia-envios-button {
    width: 100%;
  }

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

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

  .envia-envios-metric-card {
    min-height: 68px;
  }

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

  .envia-envios-toolbar {
    padding: 6px;
  }

  .envia-envios-toolbar__actions {
    display: grid;

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

    width: 100%;
  }

  .envia-envios-toolbar__actions
  .envia-envios-button {
    width: 100%;
  }

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

  .envia-envios-filters {
    grid-template-columns: 1fr;

    padding: 6px;
  }

  .envia-envios-filters__actions {
    display: grid;

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

  .envia-envios-filters__actions
  .envia-envios-button {
    width: 100%;
  }

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

  .envia-envios-selection-bar {
    padding: 7px;
  }

  .envia-envios-selection-bar__actions {
    display: grid;

    grid-template-columns: 1fr;

    width: 100%;
  }

  .envia-envios-selection-bar__actions
  .envia-envios-button {
    width: 100%;
  }

  /* =======================================================
     TABLE -> CARDS
     ======================================================= */

  .envia-envios-table-wrapper {
    overflow-x: hidden;
  }

  .envia-envios-table {
    display: block;

    width: 100%;

    min-width: 0;
  }

  .envia-envios-table thead {
    display: none;
  }

  .envia-envios-table tbody {
    display: grid;

    gap: 6px;

    width: 100%;

    padding: 6px;
  }

  .envia-envios-table tbody tr {
    display: grid;

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

    gap: 0;

    width: 100%;
    min-width: 0;

    padding: 0;

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

    border-radius: 9px;

    background: var(--envia-surface);

    overflow: hidden;
  }

  .envia-envios-table tbody tr:hover {
    background: var(--envia-surface);
  }

  .envia-envios-table td {
    display: grid;

    align-content: center;

    gap: 4px;

    min-width: 0;

    min-height: 50px;

    padding: 7px;

    border-right:
      1px
      solid
      var(--envia-border);

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

    text-align: left;
  }

  .envia-envios-table td::before {
    content: attr(data-label);

    display: block;

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

    font-size: 7.5px;
    font-weight: 900;

    line-height: 1;

    letter-spacing: 0.06em;

    text-transform: uppercase;
  }

  .envia-envios-table td:nth-child(2n) {
    border-right: 0;
  }

  .envia-envios-table__selection {
    width: auto;

    text-align: left;
  }

  .envia-envios-table__selection::before {
    content: "Seleccionar";
  }

  .envia-envios-table__actions-column {
    grid-column: 1 / -1;

    min-width: 0;

    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  .envia-envios-table__actions-column::before {
    content: "Acciones";
  }

  .envia-envios-row-actions {
    justify-content: flex-start;
  }

  .envia-envios-tracking-cell__number {
    max-width: 100%;

    white-space: normal;

    overflow-wrap: anywhere;
  }

  .envia-envios-person-cell strong,
  .envia-envios-destination-cell strong,
  .envia-envios-carrier-cell strong,
  .envia-envios-value-cell strong,
  .envia-envios-date-cell strong,
  .envia-envios-person-cell span,
  .envia-envios-destination-cell span,
  .envia-envios-carrier-cell span,
  .envia-envios-value-cell span,
  .envia-envios-date-cell span {
    white-space: normal;

    overflow-wrap: anywhere;
  }

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

  .envia-envios-modal-backdrop {
    align-items: flex-end;

    padding: 0;
  }

  .envia-envios-modal,
  .envia-envios-modal--small,
  .envia-envios-modal--medium,
  .envia-envios-modal--large {
    width: 100%;

    max-height: 97dvh;

    border-right: 0;
    border-bottom: 0;
    border-left: 0;

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

  .envia-envios-modal__header {
    min-height: 54px;

    padding:
      7px
      8px;
  }

  .envia-envios-modal__header h2 {
    font-size: 14px;
  }

  .envia-envios-modal__body {
    padding: 6px;
  }

  .envia-envios-modal__footer {
    display: grid;

    grid-template-columns: 1fr;

    padding: 6px;
  }

  .envia-envios-modal__footer
  .envia-envios-button {
    width: 100%;
  }

  .envia-envios-modal__footer-group {
    display: grid;

    grid-template-columns: 1fr;

    width: 100%;
  }

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

  .envia-envios-detail-grid,
  .envia-envios-tracking-summary {
    grid-template-columns: 1fr;
  }

  .envia-envios-detail-item,
  .envia-envios-detail-item:nth-child(2n),
  .envia-envios-detail-item:nth-child(3n),
  .envia-envios-detail-item:nth-child(4n) {
    border-right: 0;
  }

  .envia-envios-packages-grid {
    grid-template-columns: 1fr;
  }

  .envia-envios-package-card__body > div {
    grid-template-columns: 1fr;

    gap: 3px;
  }

  .envia-envios-package-card__body strong {
    text-align: left;
  }

  .envia-envios-timeline__header {
    flex-direction: column;

    gap: 4px;
  }

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

  .envia-envios-toast-container {
    top: 66px;

    right: 7px;
    left: 7px;

    width: auto;
  }
}

/* =========================================================
   MOBILE SMALL
   ========================================================= */

@media (
  max-width: 420px
) {
  .envia-envios-page {
    padding: 4px;
  }

  .envia-envios-hero__title {
    font-size: 21px;
  }

  .envia-envios-hero__description {
    display: none;
  }

  .envia-envios-metrics {
    grid-template-columns: 1fr;
  }

  .envia-envios-metric-card {
    min-height: 62px;
  }

  .envia-envios-toolbar__actions,
  .envia-envios-filters__actions {
    grid-template-columns: 1fr;
  }

  .envia-envios-table tbody tr {
    grid-template-columns: 1fr;
  }

  .envia-envios-table td,
  .envia-envios-table td:nth-child(2n),
  .envia-envios-table__selection,
  .envia-envios-table__actions-column {
    grid-column: 1;

    border-right: 0;
  }

  .envia-envios-pagination__controls {
    width: 100%;
  }

  .envia-envios-pagination__page {
    flex: 1;
  }

  .envia-envios-switch-card {
    align-items: flex-start;
  }
}

/* =========================================================
   SHORT HEIGHT
   ========================================================= */

@media (
  max-height: 760px
) {
  .envia-envios-modal-backdrop {
    padding-top: 56px;
  }

  .envia-envios-modal {
    max-height:
      calc(
        100dvh -
        66px
      );
  }
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes enviaEnviosPageEnter {
  from {
    opacity: 0;

    transform: translateY(5px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

@keyframes enviaEnviosFiltersEnter {
  from {
    opacity: 0;

    transform: translateY(-4px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

@keyframes enviaEnviosSelectionEnter {
  from {
    opacity: 0;

    transform: translateY(-4px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

@keyframes enviaEnviosBackdropEnter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

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

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

@media (
  prefers-reduced-motion: reduce
) {
  .envia-envios-page,
  .envia-envios-page *,
  .envia-envios-page *::before,
  .envia-envios-page *::after,
  .envia-envios-modal,
  .envia-envios-modal *,
  .envia-envios-toast,
  .envia-envios-toast *,
  .envia-envios-spinner,
  .envia-envios-button__spinner,
  .is-spinning,
  .envia-envios-metric-card.is-loading::after {
    animation: none !important;

    transition: none !important;

    scroll-behavior: auto !important;
  }
}

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

.envia-envios-shell,
.envia-envios-main,
.envia-envios-page,
.envia-envios-hero,
.envia-envios-hero__content,
.envia-envios-hero__actions,
.envia-envios-metrics,
.envia-envios-panel,
.envia-envios-toolbar,
.envia-envios-toolbar__search,
.envia-envios-toolbar__actions,
.envia-envios-filters,
.envia-envios-filter,
.envia-envios-selection-bar,
.envia-envios-selection-bar__actions,
.envia-envios-table-wrapper,
.envia-envios-pagination,
.envia-envios-modal,
.envia-envios-modal__header,
.envia-envios-modal__body,
.envia-envios-modal__footer,
.envia-envios-modal__footer-group,
.envia-envios-form-grid,
.envia-envios-form-field,
.envia-envios-switch-card,
.envia-envios-warning-box,
.envia-envios-detail,
.envia-envios-detail-section,
.envia-envios-detail-grid,
.envia-envios-tracking-summary,
.envia-envios-detail-item,
.envia-envios-packages-grid,
.envia-envios-package-card,
.envia-envios-timeline,
.envia-envios-timeline__item,
.envia-envios-timeline__content {
  max-width: 100%;
  min-width: 0;
}