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

   WIRTZ HUB · ENVIA · ETIQUETAS
   ESTILO UNIFICADO CON MI PERFIL + SIDEBAR

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

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

.envia-labels-page,
.envia-labels-page *,
.envia-labels-page *::before,
.envia-labels-page *::after,
.envia-labels-drawer,
.envia-labels-drawer *,
.envia-labels-drawer *::before,
.envia-labels-drawer *::after,
.envia-labels-selection-bar,
.envia-labels-selection-bar *,
.envia-labels-toast,
.envia-labels-toast * {
  box-sizing: border-box;

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

.envia-labels-page button,
.envia-labels-page input,
.envia-labels-page select,
.envia-labels-drawer button,
.envia-labels-drawer input,
.envia-labels-drawer select {
  font: inherit;
}

.envia-labels-page button,
.envia-labels-drawer button,
.envia-labels-selection-bar button {
  appearance: none;
  -webkit-appearance: none;

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

.envia-labels-page .icon,
.envia-labels-page svg,
.envia-labels-drawer .icon,
.envia-labels-drawer svg,
.envia-labels-selection-bar .icon,
.envia-labels-selection-bar svg,
.envia-labels-toast .icon,
.envia-labels-toast svg {
  display: block;

  flex: 0 0 auto;

  color: currentColor;

  stroke: currentColor;
  fill: none;

  pointer-events: none;
}

/* =========================================================
   VARIABLES
   ========================================================= */

.envia-labels-page,
.envia-labels-drawer,
.envia-labels-selection-bar,
.envia-labels-toast {
  --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:
    #d2d2d2;

  --envia-border-soft:
    #e8e8e8;

  --envia-border-strong:
    #aaaaaa;

  --envia-text:
    #0a0a0a;

  --envia-text-strong:
    #000000;

  --envia-text-soft:
    #404040;

  --envia-muted:
    #737373;

  --envia-muted-2:
    #a3a3a3;

  --envia-primary:
    #0a0a0a;

  --envia-primary-hover:
    #252525;

  --envia-primary-text:
    #ffffff;

  --envia-green:
    #15803d;

  --envia-green-soft:
    rgba(
      21,
      128,
      61,
      0.065
    );

  --envia-green-line:
    rgba(
      21,
      128,
      61,
      0.28
    );

  --envia-red:
    #dc2626;

  --envia-red-soft:
    rgba(
      220,
      38,
      38,
      0.065
    );

  --envia-red-line:
    rgba(
      220,
      38,
      38,
      0.28
    );

  --envia-orange:
    #b45309;

  --envia-orange-soft:
    rgba(
      180,
      83,
      9,
      0.065
    );

  --envia-orange-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
    );
}

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

html[data-theme="dark"]
.envia-labels-page,
html[data-theme="dark"]
.envia-labels-drawer,
html[data-theme="dark"]
.envia-labels-selection-bar,
html[data-theme="dark"]
.envia-labels-toast,
body.dark
.envia-labels-page,
body.dark
.envia-labels-drawer,
body.dark
.envia-labels-selection-bar,
body.dark
.envia-labels-toast,
body.theme-dark
.envia-labels-page,
body.theme-dark
.envia-labels-drawer,
body.theme-dark
.envia-labels-selection-bar,
body.theme-dark
.envia-labels-toast {
  --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:
    #303030;

  --envia-border-soft:
    #1c1c1c;

  --envia-border-strong:
    #4d4d4d;

  --envia-text:
    #f5f5f5;

  --envia-text-strong:
    #ffffff;

  --envia-text-soft:
    #cccccc;

  --envia-muted:
    #8a8a8a;

  --envia-muted-2:
    #5f5f5f;

  --envia-primary:
    #f5f5f5;

  --envia-primary-hover:
    #ffffff;

  --envia-primary-text:
    #080808;

  --envia-green:
    #4ade80;

  --envia-green-soft:
    rgba(
      74,
      222,
      128,
      0.075
    );

  --envia-green-line:
    rgba(
      74,
      222,
      128,
      0.28
    );

  --envia-red:
    #f87171;

  --envia-red-soft:
    rgba(
      248,
      113,
      113,
      0.075
    );

  --envia-red-line:
    rgba(
      248,
      113,
      113,
      0.28
    );

  --envia-orange:
    #fbbf24;

  --envia-orange-soft:
    rgba(
      251,
      191,
      36,
      0.075
    );

  --envia-orange-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
    );
}

/* =========================================================
   APP CONTENT
   ========================================================= */

.app-content:has(
  .envia-labels-page
) {
  display: block !important;

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

  height: auto !important;
  min-height: 0 !important;

  padding: 0 !important;

  background:
    var(
      --envia-bg
    ) !important;

  overflow-x: hidden !important;
  overflow-y: visible !important;
}

body:has(
  .envia-labels-page
),
body:has(
  .envia-labels-page
)
.app-shell,
body:has(
  .envia-labels-page
)
.app-main {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  min-height: 100vh;

  overflow-x: hidden;
}

body.envia-labels-drawer-open {
  overflow: hidden !important;
}

body.envia-labels-has-selection {
  padding-bottom: 80px;
}

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

.envia-labels-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:
    enviaLabelsPageIn
    300ms
    var(
      --envia-ease
    )
    both;
}

/* =========================================================
   BASE SURFACES
   ========================================================= */

.envia-labels-head,
.envia-labels-metrics,
.envia-labels-list-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;

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

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

  background:
    var(
      --envia-surface
    );

  box-shadow: none;
}

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

.envia-labels-head {
  position: relative;

  display: grid;

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

  align-items: center;

  gap: 12px;

  min-height: 108px;

  padding: 12px;

  overflow: hidden;

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

.envia-labels-head::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-labels-head::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-labels-head:hover {
  border-color:
    var(
      --envia-text
    );
}

/* =========================================================
   BRAND
   ========================================================= */

.envia-labels-brand {
  position: relative;

  z-index: 1;

  display: grid;

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

  align-items: center;

  gap: 11px;

  min-width: 0;
}

.envia-labels-brand__icon {
  position: relative;

  display: grid;

  width: 52px;
  height: 52px;

  min-width: 52px;

  place-items: center;

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

  border-radius: 13px;

  color:
    var(
      --envia-text
    );

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

  overflow: hidden;

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

.envia-labels-brand__icon::before,
.envia-labels-brand__icon::after {
  content: "";

  position: absolute;

  width: 5px;
  height: 5px;

  opacity: 0.65;
}

.envia-labels-brand__icon::before {
  top: 5px;
  left: 5px;

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

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

.envia-labels-brand__icon::after {
  right: 5px;
  bottom: 5px;

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

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

.envia-labels-head:hover
.envia-labels-brand__icon {
  border-color:
    var(
      --envia-text
    );

  transform:
    translateY(
      -1px
    );
}

.envia-labels-brand__icon .icon,
.envia-labels-brand__icon svg {
  width: 21px;
  height: 21px;

  stroke-width: 1.9;
}

/* =========================================================
   BRAND BODY
   ========================================================= */

.envia-labels-brand__body {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.envia-labels-eyebrow {
  color:
    var(
      --envia-muted
    );

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

  line-height: 1;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}

.envia-labels-brand h2 {
  min-width: 0;

  margin: 2px 0 0;

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

  font-size:
    clamp(
      27px,
      2.2vw,
      33px
    );

  font-weight: 900;

  line-height: 1;

  letter-spacing: -0.045em;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-labels-brand p {
  min-width: 0;

  max-width: 760px;

  margin: 2px 0 0;

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

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

  line-height: 1.35;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

/* =========================================================
   HEAD ACTIONS
   ========================================================= */

.envia-labels-head-actions {
  position: relative;

  z-index: 1;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 6px;

  min-width: 0;
}

/* =========================================================
   LAST UPDATE
   ========================================================= */

.envia-labels-update-meta {
  display: grid;

  gap: 3px;

  min-width: 150px;

  padding-right: 8px;

  text-align: right;
}

.envia-labels-update-meta span {
  color:
    var(
      --envia-muted
    );

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

  line-height: 1;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}

.envia-labels-update-meta strong {
  color:
    var(
      --envia-text
    );

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

  line-height: 1.15;
}

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

.envia-labels-btn,
.envia-labels-icon-btn,
.envia-labels-detail-tab {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  min-width: 0;

  min-height: 36px;

  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;

  text-decoration: none;

  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-labels-icon-btn {
  width: 34px;
  height: 34px;

  min-width: 34px;
  min-height: 34px;

  flex:
    0 0 34px;

  padding: 0;
}

.envia-labels-btn:hover:not(
  :disabled
),
.envia-labels-icon-btn:hover:not(
  :disabled
),
.envia-labels-detail-tab:hover:not(
  :disabled
) {
  border-color:
    var(
      --envia-text
    );

  color:
    var(
      --envia-surface
    );

  background:
    var(
      --envia-text
    );

  transform:
    translateY(
      -1px
    );
}

.envia-labels-btn:active:not(
  :disabled
),
.envia-labels-icon-btn:active:not(
  :disabled
),
.envia-labels-detail-tab:active:not(
  :disabled
) {
  transform:
    scale(
      0.97
    );
}

.envia-labels-btn:disabled,
.envia-labels-icon-btn:disabled,
.envia-labels-detail-tab:disabled {
  opacity: 0.42;

  cursor: not-allowed;

  transform: none;
}

.envia-labels-btn .icon,
.envia-labels-btn svg,
.envia-labels-icon-btn .icon,
.envia-labels-icon-btn svg,
.envia-labels-detail-tab .icon,
.envia-labels-detail-tab svg {
  width: 13px;
  height: 13px;

  min-width: 13px;

  stroke-width: 1.9;
}

.envia-labels-btn--primary {
  border-color:
    var(
      --envia-primary
    );

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

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

.envia-labels-btn--primary:hover:not(
  :disabled
) {
  border-color:
    var(
      --envia-primary
    );

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

  background:
    var(
      --envia-primary
    );

  opacity: 0.86;
}

.envia-labels-btn--quiet {
  border-color: transparent;

  color:
    var(
      --envia-muted
    );

  background: transparent;
}

.envia-labels-btn--quiet:hover:not(
  :disabled
) {
  border-color:
    var(
      --envia-border
    );

  color:
    var(
      --envia-text
    );

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

.envia-labels-btn:focus-visible,
.envia-labels-icon-btn:focus-visible,
.envia-labels-detail-tab:focus-visible,
.envia-labels-search input:focus-visible,
.envia-labels-toolbar select:focus-visible,
.envia-labels-field input:focus-visible,
.envia-labels-field select:focus-visible {
  outline:
    2px
    solid
    color-mix(
      in srgb,
      var(
        --envia-text
      )
      18%,
      transparent
    );

  outline-offset: 2px;
}

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

.envia-labels-btn.is-loading .icon,
.envia-labels-btn.is-loading svg,
.envia-labels-table-state__icon.is-loading .icon,
.envia-labels-table-state__icon.is-loading svg,
.envia-labels-detail-state__icon.is-loading .icon,
.envia-labels-detail-state__icon.is-loading svg,
.envia-labels-operation-item__icon
.icon[data-lucide="loader-circle"],
.envia-labels-sync-item__icon
.icon[data-lucide="loader-circle"] {
  animation:
    enviaLabelsSpin
    0.8s
    linear
    infinite;
}

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

.envia-labels-metrics {
  display: grid;

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

  gap: 1px;

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

  background:
    var(
      --envia-border
    );

  overflow: hidden;
}

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

.envia-labels-metric {
  position: relative;

  display: grid;

  align-content: center;

  gap: 4px;

  min-width: 0;

  min-height: 78px;

  padding:
    9px
    11px
    9px
    13px;

  background:
    var(
      --envia-surface
    );

  overflow: hidden;

  animation:
    enviaLabelsMetricIn
    280ms
    var(
      --envia-ease
    )
    both;

  animation-delay:
    calc(
      var(
        --metric-index,
        0
      ) *
      35ms
    );

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

.envia-labels-metric::before {
  content: "";

  position: absolute;

  top: 13px;
  bottom: 13px;
  left: 0;

  width: 2px;

  border-radius:
    0
    999px
    999px
    0;

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

.envia-labels-metric:hover {
  background:
    var(
      --envia-surface-hover
    );
}

.envia-labels-metric__label {
  min-width: 0;

  color:
    var(
      --envia-muted
    );

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

  line-height: 1;

  letter-spacing: 0.07em;

  text-transform: uppercase;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-labels-metric strong {
  min-width: 0;

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

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

  line-height: 1;

  letter-spacing: -0.035em;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-labels-metric small {
  min-width: 0;

  color:
    var(
      --envia-muted
    );

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

  line-height: 1.2;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

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

.envia-labels-metric.is-total::before {
  background:
    var(
      --envia-info
    );
}

.envia-labels-metric.is-pending::before {
  background:
    var(
      --envia-orange
    );
}

.envia-labels-metric.is-generated::before {
  background:
    var(
      --envia-green
    );
}

.envia-labels-metric.is-downloaded::before {
  background:
    var(
      --envia-info
    );
}

.envia-labels-metric.is-printed::before {
  background:
    var(
      --envia-info
    );
}

.envia-labels-metric.is-error::before {
  background:
    var(
      --envia-red
    );
}

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

.envia-labels-metric.is-loading span,
.envia-labels-metric.is-loading strong,
.envia-labels-metric.is-loading small {
  display: block;

  border-radius: 5px;

  color: transparent;

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

  animation:
    enviaLabelsPulse
    1.25s
    ease-in-out
    infinite;
}

.envia-labels-metric.is-loading span {
  width: 65px;
  height: 10px;
}

.envia-labels-metric.is-loading strong {
  width: 52px;
  height: 22px;
}

.envia-labels-metric.is-loading small {
  width: 86px;
  height: 9px;
}

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

.envia-labels-list-panel {
  position: relative;

  display: grid;

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

  overflow: visible;
}

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

.envia-labels-toolbar {
  display: grid;

  min-width: 0;

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

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

.envia-labels-toolbar__primary {
  display: grid;

  grid-template-columns:
    minmax(
      280px,
      1fr
    )
    minmax(
      150px,
      190px
    )
    minmax(
      140px,
      170px
    )
    auto
    auto;

  align-items: center;

  gap: 6px;

  min-width: 0;

  padding: 8px;
}

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

.envia-labels-search {
  display: grid;

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

  align-items: center;

  gap: 6px;

  min-width: 0;

  height: 36px;

  padding:
    0
    4px
    0
    9px;

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

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

  color:
    var(
      --envia-muted
    );

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

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

.envia-labels-search:focus-within {
  border-color:
    var(
      --envia-text
    );

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

.envia-labels-search > .icon,
.envia-labels-search > svg {
  width: 13px;
  height: 13px;

  min-width: 13px;
}

.envia-labels-search input {
  width: 100%;
  min-width: 0;

  height: 34px;

  padding: 0;

  border: 0;

  outline: 0;

  color:
    var(
      --envia-text
    );

  background: transparent;

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

.envia-labels-search input::placeholder {
  color:
    var(
      --envia-muted-2
    );
}

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

.envia-labels-search button {
  display: grid;

  width: 28px;
  height: 28px;

  min-width: 28px;

  place-items: center;

  padding: 0;

  border:
    1px
    solid
    transparent;

  border-radius: 7px;

  color:
    var(
      --envia-muted
    );

  background: transparent;

  cursor: pointer;

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

.envia-labels-search button:hover {
  border-color:
    var(
      --envia-border
    );

  color:
    var(
      --envia-text
    );

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

.envia-labels-search button .icon,
.envia-labels-search button svg {
  width: 12px;
  height: 12px;
}

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

.envia-labels-toolbar select,
.envia-labels-field select,
.envia-labels-field input {
  width: 100%;
  min-width: 0;

  height: 36px;

  padding:
    0
    8px;

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

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

  outline: 0;

  color:
    var(
      --envia-text
    );

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

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

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

.envia-labels-toolbar select:hover,
.envia-labels-field select:hover,
.envia-labels-field input:hover,
.envia-labels-toolbar select:focus,
.envia-labels-field select:focus,
.envia-labels-field input:focus {
  border-color:
    var(
      --envia-text
    );

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

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

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

.envia-labels-filter-toggle {
  position: relative;
}

.envia-labels-filter-toggle.is-active {
  border-color:
    var(
      --envia-primary
    );

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

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

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

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

  place-items: center;

  padding:
    0
    5px;

  border:
    1px
    solid
    currentColor;

  border-radius: 999px;

  color: inherit;

  background:
    color-mix(
      in srgb,
      currentColor
      8%,
      transparent
    );

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

  line-height: 1;
}

.envia-labels-filter-count[hidden] {
  display: none;
}

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

.envia-labels-advanced-filters {
  display: grid;

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

  gap: 7px;

  min-width: 0;

  max-height: 0;

  padding:
    0
    8px;

  border-top:
    1px
    solid
    transparent;

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

  opacity: 0;

  overflow: hidden;

  visibility: hidden;

  transform:
    translateY(
      -4px
    );

  transition:
    max-height
      var(
        --envia-transition
      ),
    padding
      var(
        --envia-transition
      ),
    opacity
      var(
        --envia-transition-fast
      ),
    transform
      var(
        --envia-transition-fast
      ),
    border-color
      var(
        --envia-transition-fast
      ),
    visibility
      0s
      linear
      220ms;
}

.envia-labels-advanced-filters.is-open {
  max-height: 370px;

  padding: 8px;

  border-top-color:
    var(
      --envia-border
    );

  opacity: 1;

  visibility: visible;

  transform:
    translateY(
      0
    );

  transition:
    max-height
      var(
        --envia-transition
      ),
    padding
      var(
        --envia-transition
      ),
    opacity
      var(
        --envia-transition-fast
      ),
    transform
      var(
        --envia-transition-fast
      ),
    border-color
      var(
        --envia-transition-fast
      ),
    visibility
      0s
      linear
      0s;
}

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

.envia-labels-field {
  display: grid;

  gap: 4px;

  min-width: 0;
}

.envia-labels-field > span {
  min-width: 0;

  color:
    var(
      --envia-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;
}

.envia-labels-advanced-filters__apply {
  align-self: end;

  width: 100%;
}

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

.envia-labels-table {
  position: relative;

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

  background:
    var(
      --envia-surface
    );

  overflow: visible;
}

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

.envia-labels-table-head,
.envia-labels-row {
  display: grid;

  grid-template-columns:
    44px
    minmax(
      220px,
      1.35fr
    )
    minmax(
      185px,
      1.05fr
    )
    minmax(
      180px,
      1fr
    )
    minmax(
      120px,
      0.68fr
    )
    minmax(
      135px,
      0.75fr
    )
    minmax(
      150px,
      0.82fr
    )
    54px;

  align-items: stretch;

  min-width: 1090px;
}

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

.envia-labels-table-head {
  position: sticky;

  top: 0;

  z-index: 10;

  min-height: 40px;

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

  color:
    var(
      --envia-muted
    );

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

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

  line-height: 1;

  letter-spacing: 0.065em;

  text-transform: uppercase;
}

.envia-labels-table-body {
  display: grid;

  width: 100%;
  min-width: 1090px;

  overflow: visible;
}

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

.envia-labels-row {
  position: relative;

  z-index: 1;

  min-height: 82px;

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

  background:
    var(
      --envia-surface
    );

  overflow: visible;

  animation:
    enviaLabelsRowIn
    240ms
    var(
      --envia-ease
    )
    both;

  animation-delay:
    calc(
      min(
        var(
          --row-index,
          0
        ),
        12
      ) *
      22ms
    );

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

.envia-labels-row:last-child {
  border-bottom: 0;
}

.envia-labels-row:hover {
  background:
    var(
      --envia-surface-hover
    );
}

.envia-labels-row.is-selected {
  background:
    var(
      --envia-surface-muted
    );
}

.envia-labels-row.is-active::before {
  content: "";

  position: absolute;

  top: 10px;
  bottom: 10px;
  left: 0;

  width: 2px;

  border-radius:
    0
    999px
    999px
    0;

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

.envia-labels-row:has(
  .envia-labels-row-menu.is-open
) {
  z-index: 100;
}

/* =========================================================
   CELL
   ========================================================= */

.envia-labels-cell {
  display: grid;

  align-content: center;

  gap: 4px;

  min-width: 0;

  padding:
    10px
    11px;

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

  overflow: hidden;
}

.envia-labels-cell:last-child {
  border-right: 0;
}

.envia-labels-table-head
.envia-labels-cell {
  display: flex;

  align-items: center;

  padding-top: 0;
  padding-bottom: 0;
}

.envia-labels-cell--check {
  display: grid;

  place-items: center;

  padding: 0;
}

.envia-labels-cell strong {
  min-width: 0;

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

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

  line-height: 1.2;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.envia-labels-cell small {
  min-width: 0;

  color:
    var(
      --envia-muted
    );

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

  line-height: 1.25;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.envia-labels-cell >
span:not(
  .envia-labels-status
):not(
  .envia-labels-shipment-icon
):not(
  .envia-labels-shipment-body
) {
  min-width: 0;

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

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

  line-height: 1.25;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

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

.envia-labels-check {
  position: relative;

  display: grid;

  width: 22px;
  height: 22px;

  place-items: center;

  cursor: pointer;
}

.envia-labels-check input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}

.envia-labels-check > span {
  position: relative;

  display: block;

  width: 17px;
  height: 17px;

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

  border-radius: 5px;

  background:
    var(
      --envia-surface
    );

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

.envia-labels-check input:checked +
span {
  border-color:
    var(
      --envia-primary
    );

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

.envia-labels-check input:checked +
span::after {
  content: "";

  position: absolute;

  top: 2px;
  left: 5px;

  width: 4px;
  height: 8px;

  border-right:
    2px
    solid
    var(
      --envia-primary-text
    );

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

  transform:
    rotate(
      45deg
    );
}

/* =========================================================
   SHIPMENT CELL
   ========================================================= */

button.envia-labels-cell--shipment {
  grid-template-columns:
    36px
    minmax(
      0,
      1fr
    );

  align-items: center;

  gap: 8px;

  width: 100%;
  min-width: 0;

  border-top: 0;
  border-bottom: 0;
  border-left: 0;

  outline: 0;

  color: inherit;

  background: transparent;

  text-align: left;

  cursor: pointer;

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

button.envia-labels-cell--shipment:hover {
  background:
    var(
      --envia-surface-hover
    );
}

.envia-labels-shipment-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-soft
    );

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

.envia-labels-shipment-icon .icon,
.envia-labels-shipment-icon svg {
  width: 15px;
  height: 15px;

  stroke-width: 1.9;
}

.envia-labels-shipment-body {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.envia-labels-shipment-body strong {
  min-width: 0;

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

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

  line-height: 1.2;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.envia-labels-shipment-body small {
  min-width: 0;

  color:
    var(
      --envia-muted
    );

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

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.envia-labels-shipment-body span {
  min-width: 0;

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

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

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

/* =========================================================
   FORMATS
   ========================================================= */

.envia-labels-formats {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 4px;
}

.envia-labels-format {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 23px;

  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: 850;

  line-height: 1;

  white-space: nowrap;
}

.envia-labels-format.is-pdf,
.envia-labels-format.is-zpl {
  color:
    var(
      --envia-text
    );
}

.envia-labels-format.is-empty {
  color:
    var(
      --envia-muted
    );
}

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

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

  align-items: center;

  justify-content: center;

  gap: 5px;

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

  min-height: 25px;

  padding:
    0
    8px;

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

  border-radius: 999px;

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

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

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

  line-height: 1;

  white-space: nowrap;
}

.envia-labels-status .icon,
.envia-labels-status svg {
  width: 11px;
  height: 11px;

  stroke-width: 2;
}

.envia-labels-status.is-pending {
  border-color:
    var(
      --envia-orange-line
    );

  color:
    var(
      --envia-orange
    );

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

.envia-labels-status.is-processing {
  border-color:
    var(
      --envia-info-line
    );

  color:
    var(
      --envia-info
    );

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

.envia-labels-status.is-generated,
.envia-labels-status.is-downloaded,
.envia-labels-status.is-printed {
  border-color:
    var(
      --envia-green-line
    );

  color:
    var(
      --envia-green
    );

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

.envia-labels-status.is-error,
.envia-labels-status.is-cancelled {
  border-color:
    var(
      --envia-red-line
    );

  color:
    var(
      --envia-red
    );

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

.envia-labels-status.is-neutral {
  color:
    var(
      --envia-muted
    );
}

/* =========================================================
   ACTION CELL
   ========================================================= */

.envia-labels-cell--actions {
  position: relative;

  z-index: 5;

  display: grid;

  width: 54px;
  min-width: 54px;
  max-width: 54px;

  place-items: center;

  padding: 0;

  overflow: visible;
}

.envia-labels-table-head
.envia-labels-cell--actions {
  justify-content: center;

  font-size: 0;
}

.envia-labels-table-head
.envia-labels-cell--actions::after {
  content: "•••";

  color:
    var(
      --envia-muted
    );

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

  letter-spacing: 1px;
}

.envia-labels-row-menu-btn {
  width: 32px;
  height: 32px;

  min-width: 32px;
  min-height: 32px;

  padding: 0;
}

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

.envia-labels-row-menu {
  position: absolute;

  top:
    calc(
      50% +
      18px
    );

  right: 6px;

  z-index: 120;

  display: grid;

  width: 218px;

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

  padding: 5px;

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

  border-radius: 9px;

  color:
    var(
      --envia-text
    );

  background:
    var(
      --envia-surface
    );

  box-shadow: none;

  opacity: 0;

  pointer-events: none;

  visibility: hidden;

  transform:
    translateY(
      -5px
    )
    scale(
      0.985
    );

  transform-origin:
    top
    right;

  transition:
    opacity
      var(
        --envia-transition-fast
      ),
    transform
      var(
        --envia-transition-fast
      ),
    visibility
      0s
      linear
      130ms;
}

.envia-labels-row-menu.is-open {
  opacity: 1;

  pointer-events: auto;

  visibility: visible;

  transform:
    translateY(
      0
    )
    scale(
      1
    );

  transition:
    opacity
      var(
        --envia-transition-fast
      ),
    transform
      var(
        --envia-transition-fast
      ),
    visibility
      0s
      linear
      0s;
}

.envia-labels-row-menu button {
  display: flex;

  align-items: center;

  gap: 8px;

  width: 100%;

  min-height: 38px;

  padding:
    0
    9px;

  border: 0;

  border-radius: 7px;

  outline: 0;

  color:
    var(
      --envia-text
    );

  background: transparent;

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

  text-align: left;

  cursor: pointer;

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

.envia-labels-row-menu button:hover {
  background:
    var(
      --envia-surface-hover
    );
}

.envia-labels-row-menu button .icon,
.envia-labels-row-menu button svg {
  width: 13px;
  height: 13px;

  min-width: 13px;

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

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

.envia-labels-table-state {
  display: grid;

  place-items: center;

  align-content: center;

  gap: 8px;

  width: 100%;
  min-width: 100%;

  min-height: 300px;

  padding: 28px;

  color:
    var(
      --envia-text
    );

  background:
    var(
      --envia-surface
    );

  text-align: center;
}

.envia-labels-table-state__icon {
  display: grid;

  width: 44px;
  height: 44px;

  place-items: center;

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

  border-radius: 10px;

  color:
    var(
      --envia-muted
    );

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

.envia-labels-table-state__icon .icon,
.envia-labels-table-state__icon svg {
  width: 19px;
  height: 19px;
}

.envia-labels-table-state strong {
  color:
    var(
      --envia-text-strong
    );

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

  line-height: 1.15;
}

.envia-labels-table-state p {
  max-width: 440px;

  margin: 0;

  color:
    var(
      --envia-muted
    );

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

  line-height: 1.45;
}

.envia-labels-table-state.is-error
.envia-labels-table-state__icon {
  border-color:
    var(
      --envia-red-line
    );

  color:
    var(
      --envia-red
    );

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

.envia-labels-table-state.is-error strong {
  color:
    var(
      --envia-red
    );
}

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

.envia-labels-pagination {
  display: grid;

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

  align-items: center;

  gap: 10px;

  min-width: 0;

  min-height: 50px;

  padding:
    6px
    8px;

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

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

.envia-labels-pagination__summary,
.envia-labels-pagination__actions {
  display: flex;

  align-items: center;

  gap: 5px;

  min-width: 0;
}

.envia-labels-pagination__summary strong {
  color:
    var(
      --envia-text-strong
    );

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

.envia-labels-pagination__summary span {
  color:
    var(
      --envia-muted
    );

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

.envia-labels-pagination__actions {
  justify-content: flex-end;
}

.envia-labels-pagination__page {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 4px;

  min-height: 30px;

  padding:
    0
    9px;

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

  border-radius: 7px;

  color:
    var(
      --envia-muted
    );

  background:
    var(
      --envia-surface
    );

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

  white-space: nowrap;
}

.envia-labels-pagination__page strong {
  color:
    var(
      --envia-text-strong
    );

  font-weight: 850;
}

/* =========================================================
   DRAWER BACKDROP
   ========================================================= */

.envia-labels-drawer-backdrop {
  position: fixed;

  inset: 0;

  z-index: 9990;

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

  opacity: 0;

  pointer-events: none;

  visibility: hidden;

  transition:
    opacity
      var(
        --envia-transition
      ),
    visibility
      0s
      linear
      220ms;
}

.envia-labels-drawer-backdrop.is-visible {
  opacity: 1;

  pointer-events: auto;

  visibility: visible;

  transition:
    opacity
      var(
        --envia-transition
      ),
    visibility
      0s
      linear
      0s;
}

/* =========================================================
   DRAWER
   ========================================================= */

.envia-labels-drawer {
  position: fixed;

  top: 0;
  right: 0;
  bottom: 0;

  z-index: 9995;

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

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

  color:
    var(
      --envia-text
    );

  background:
    var(
      --envia-surface
    );

  visibility: hidden;

  transform:
    translateX(
      100%
    );

  transition:
    transform
      var(
        --envia-transition
      ),
    visibility
      0s
      linear
      220ms;
}

.envia-labels-drawer.is-open {
  visibility: visible;

  transform:
    translateX(
      0
    );

  transition:
    transform
      var(
        --envia-transition
      ),
    visibility
      0s
      linear
      0s;
}

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

.envia-labels-detail-panel {
  width: 100%;
  height: 100%;

  min-width: 0;

  color:
    var(
      --envia-text
    );

  background:
    var(
      --envia-surface
    );

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

  overscroll-behavior: contain;

  scrollbar-width: thin;

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

.envia-labels-detail-panel::-webkit-scrollbar {
  width: 6px;
}

.envia-labels-detail-panel::-webkit-scrollbar-thumb {
  border-radius: 999px;

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

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

   INCLUYE:
   - Drawer completo
   - Header del detalle
   - Tabs
   - Datos
   - Resumen
   - Timeline
   - Archivos PDF / ZPL
   - Impresión
   - Operaciones
   - Sincronizaciones
   - Barra selección múltiple
   - Toast
   - Responsive desktop / tablet / móvil
   - Menú de acciones móvil
   - Animaciones
   - Overflow safety
   ========================================================= *//* =========================================================
   DETAIL BASE
   ========================================================= */

.envia-labels-detail {
  display: grid;

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

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

  color:
    var(
      --envia-text
    );

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

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

.envia-labels-detail-empty,
.envia-labels-detail-state {
  display: grid;

  place-items: center;

  align-content: center;

  gap: 8px;

  width: 100%;
  min-width: 0;

  min-height: 100%;

  padding: 28px;

  color:
    var(
      --envia-text
    );

  background:
    var(
      --envia-surface
    );

  text-align: center;
}

.envia-labels-detail-empty > .icon,
.envia-labels-detail-empty > svg,
.envia-labels-detail-state__icon {
  color:
    var(
      --envia-muted
    );
}

.envia-labels-detail-empty > .icon,
.envia-labels-detail-empty > svg {
  width: 34px;
  height: 34px;

  stroke-width: 1.7;
}

.envia-labels-detail-empty strong,
.envia-labels-detail-state strong {
  color:
    var(
      --envia-text-strong
    );

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

  line-height: 1.2;
}

.envia-labels-detail-empty p,
.envia-labels-detail-state p {
  max-width: 360px;

  margin: 0;

  color:
    var(
      --envia-muted
    );

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

  line-height: 1.45;
}

.envia-labels-detail-state__icon {
  display: grid;

  width: 44px;
  height: 44px;

  place-items: center;

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

  border-radius: 10px;

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

.envia-labels-detail-state__icon .icon,
.envia-labels-detail-state__icon svg {
  width: 19px;
  height: 19px;

  stroke-width: 1.9;
}

.envia-labels-detail-state.is-error
.envia-labels-detail-state__icon {
  border-color:
    var(
      --envia-red-line
    );

  color:
    var(
      --envia-red
    );

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

.envia-labels-detail-state.is-error strong {
  color:
    var(
      --envia-red
    );
}

.envia-labels-detail-state__actions {
  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 6px;
}

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

.envia-labels-detail-head {
  position: sticky;

  top: 0;

  z-index: 12;

  display: grid;

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

  align-items: start;

  gap: 8px;

  min-width: 0;

  padding:
    12px
    14px;

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

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

/* =========================================================
   DETAIL HEADER MAIN
   ========================================================= */

.envia-labels-detail-head__main {
  display: grid;

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

  align-items: center;

  gap: 9px;

  min-width: 0;
}

.envia-labels-detail-head__icon {
  display: grid;

  width: 42px;
  height: 42px;

  min-width: 42px;

  place-items: center;

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

  border-radius: 10px;

  color:
    var(
      --envia-text
    );

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

.envia-labels-detail-head__icon .icon,
.envia-labels-detail-head__icon svg {
  width: 17px;
  height: 17px;

  stroke-width: 1.9;
}

.envia-labels-detail-head__body {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.envia-labels-detail-head__body > span {
  color:
    var(
      --envia-muted
    );

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

  line-height: 1;

  letter-spacing: 0.075em;

  text-transform: uppercase;
}

.envia-labels-detail-head__body h3 {
  min-width: 0;

  margin: 0;

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

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

  line-height: 1.1;

  letter-spacing: -0.035em;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.envia-labels-detail-head__body p {
  min-width: 0;

  margin: 0;

  color:
    var(
      --envia-muted
    );

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

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

/* =========================================================
   DETAIL HEADER STATUS / ACTIONS
   ========================================================= */

.envia-labels-detail-head__status,
.envia-labels-detail-head__actions {
  grid-column:
    1 /
    -1;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 5px;

  min-width: 0;
}

.envia-labels-detail-head__actions {
  padding-top: 1px;
}

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

.envia-labels-detail-tabs {
  position: sticky;

  top: 132px;

  z-index: 11;

  display: grid;

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

  gap: 4px;

  min-width: 0;

  padding: 7px;

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

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

.envia-labels-detail-tab {
  width: 100%;

  min-width: 0;

  min-height: 32px;

  padding:
    0
    7px;

  border-color: transparent;

  color:
    var(
      --envia-muted
    );

  background: transparent;

  font-size: 8.5px;
}

.envia-labels-detail-tab:hover:not(
  :disabled
) {
  border-color:
    var(
      --envia-border
    );

  color:
    var(
      --envia-text
    );

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

  transform: none;
}

.envia-labels-detail-tab span {
  min-width: 0;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.envia-labels-detail-tab.is-active {
  border-color:
    var(
      --envia-primary
    );

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

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

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

.envia-labels-detail-content {
  display: grid;

  align-content: start;

  gap: 10px;

  min-width: 0;

  padding:
    10px
    12px
    20px;

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

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

.envia-labels-detail-section {
  display: grid;

  gap: 7px;

  min-width: 0;
}

.envia-labels-detail-section__title {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  min-width: 0;

  min-height: 50px;

  padding:
    8px
    9px;

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

  border-radius: 9px;

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

.envia-labels-detail-section__title > div {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.envia-labels-detail-section__title span {
  color:
    var(
      --envia-muted
    );

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

  line-height: 1;

  letter-spacing: 0.075em;

  text-transform: uppercase;
}

.envia-labels-detail-section__title strong {
  min-width: 0;

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

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

  line-height: 1.15;

  overflow-wrap: anywhere;
}

/* =========================================================
   DATA GRID
   ========================================================= */

.envia-labels-data-grid {
  display: grid;

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

  min-width: 0;

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

  border-radius: 9px;

  background:
    var(
      --envia-surface
    );

  overflow: hidden;
}

.envia-labels-data-item {
  display: grid;

  align-content: center;

  gap: 4px;

  min-width: 0;

  min-height: 66px;

  padding:
    9px
    10px;

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

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

  background:
    var(
      --envia-surface
    );

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

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

.envia-labels-data-item:nth-last-child(
  -n + 2
) {
  border-bottom: 0;
}

.envia-labels-data-item:hover {
  background:
    var(
      --envia-surface-hover
    );
}

.envia-labels-data-item span {
  color:
    var(
      --envia-muted
    );

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

  line-height: 1;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}

.envia-labels-data-item strong {
  min-width: 0;

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

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

  line-height: 1.3;

  overflow-wrap: anywhere;
}

/* =========================================================
   SUMMARY GRID
   ========================================================= */

.envia-labels-summary-grid {
  display: grid;

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

  gap: 6px;

  min-width: 0;
}

.envia-labels-summary-card {
  display: grid;

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

  align-items: center;

  gap: 7px;

  min-width: 0;

  min-height: 68px;

  padding: 8px;

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

  border-radius: 9px;

  background:
    var(
      --envia-surface
    );

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

.envia-labels-summary-card:hover {
  border-color:
    var(
      --envia-text
    );

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

.envia-labels-summary-card__icon {
  display: grid;

  width: 32px;
  height: 32px;

  place-items: center;

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

  border-radius: 8px;

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

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

.envia-labels-summary-card__icon .icon,
.envia-labels-summary-card__icon svg {
  width: 14px;
  height: 14px;

  stroke-width: 1.9;
}

.envia-labels-summary-card > div {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.envia-labels-summary-card > div span {
  min-width: 0;

  color:
    var(
      --envia-muted
    );

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

  text-transform: uppercase;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-labels-summary-card > div strong {
  color:
    var(
      --envia-text-strong
    );

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

  line-height: 1;
}

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

.envia-labels-timeline {
  display: grid;

  min-width: 0;

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

  border-radius: 9px;

  background:
    var(
      --envia-surface
    );

  overflow: hidden;
}

.envia-labels-timeline__item {
  display: grid;

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

  align-items: center;

  gap: 7px;

  min-width: 0;

  min-height: 54px;

  padding:
    7px
    8px;

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

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

.envia-labels-timeline__item:last-child {
  border-bottom: 0;
}

.envia-labels-timeline__item:hover {
  background:
    var(
      --envia-surface-hover
    );
}

.envia-labels-timeline__icon {
  display: grid;

  width: 30px;
  height: 30px;

  place-items: center;

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

  border-radius: 8px;

  color:
    var(
      --envia-muted
    );

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

.envia-labels-timeline__icon .icon,
.envia-labels-timeline__icon svg {
  width: 13px;
  height: 13px;

  stroke-width: 1.9;
}

.envia-labels-timeline__item > div {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.envia-labels-timeline__item > div span {
  color:
    var(
      --envia-muted
    );

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

  text-transform: uppercase;
}

.envia-labels-timeline__item > div strong {
  color:
    var(
      --envia-text-strong
    );

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

/* =========================================================
   ERROR CARD
   ========================================================= */

.envia-labels-error-card {
  display: grid;

  gap: 7px;

  min-width: 0;

  padding:
    9px
    10px;

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

  border-radius: 9px;

  color:
    var(
      --envia-text
    );

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

.envia-labels-error-card__head {
  display: flex;

  align-items: center;

  gap: 6px;

  color:
    var(
      --envia-red
    );
}

.envia-labels-error-card__head .icon,
.envia-labels-error-card__head svg {
  width: 14px;
  height: 14px;
}

.envia-labels-error-card__head strong {
  font-size: 10px;
  font-weight: 850;
}

.envia-labels-error-card p {
  margin: 0;

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

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

  line-height: 1.4;

  overflow-wrap: anywhere;
}

.envia-labels-error-card__meta {
  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 5px;

  color:
    var(
      --envia-muted
    );

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

/* =========================================================
   FILES GRID
   ========================================================= */

.envia-labels-files-grid {
  display: grid;

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

  gap: 7px;

  min-width: 0;
}

.envia-labels-file-card {
  display: grid;

  align-content: start;

  min-width: 0;

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

  border-radius: 9px;

  background:
    var(
      --envia-surface
    );

  overflow: hidden;

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

.envia-labels-file-card:hover {
  border-color:
    var(
      --envia-text
    );
}

.envia-labels-file-card.is-unavailable {
  opacity: 0.72;
}

/* =========================================================
   FILE HEAD
   ========================================================= */

.envia-labels-file-card__head {
  display: grid;

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

  align-items: center;

  gap: 7px;

  min-width: 0;

  min-height: 52px;

  padding: 8px;

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

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

.envia-labels-file-card__icon {
  display: grid;

  width: 34px;
  height: 34px;

  min-width: 34px;

  place-items: center;

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

  border-radius: 8px;

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

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

.envia-labels-file-card__icon .icon,
.envia-labels-file-card__icon svg {
  width: 14px;
  height: 14px;
}

.envia-labels-file-card__head > div {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.envia-labels-file-card__head > div span {
  color:
    var(
      --envia-muted
    );

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

  text-transform: uppercase;
}

.envia-labels-file-card__head > div strong {
  min-width: 0;

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

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

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

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

.envia-labels-file-card__status {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 23px;

  padding:
    0
    7px;

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

  border-radius: 999px;

  color:
    var(
      --envia-muted
    );

  background:
    var(
      --envia-surface
    );

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

  white-space: nowrap;
}

.envia-labels-file-card__status.is-ready {
  border-color:
    var(
      --envia-green-line
    );

  color:
    var(
      --envia-green
    );

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

.envia-labels-file-card__status.is-pending {
  border-color:
    var(
      --envia-orange-line
    );

  color:
    var(
      --envia-orange
    );

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

/* =========================================================
   FILE BODY
   ========================================================= */

.envia-labels-file-card__body {
  display: grid;

  min-width: 0;
}

.envia-labels-file-card__body > div {
  display: grid;

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

  align-items: center;

  gap: 7px;

  min-width: 0;

  min-height: 38px;

  padding:
    6px
    8px;

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

.envia-labels-file-card__body > div:last-child {
  border-bottom: 0;
}

.envia-labels-file-card__body span {
  color:
    var(
      --envia-muted
    );

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

  text-transform: uppercase;
}

.envia-labels-file-card__body strong {
  min-width: 0;

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

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

  text-align: right;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

/* =========================================================
   FILE ACTIONS
   ========================================================= */

.envia-labels-file-card__actions {
  display: grid;

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

  gap: 5px;

  padding: 7px;

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

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

.envia-labels-file-card__actions
.envia-labels-btn {
  width: 100%;
}

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

.envia-labels-print-form {
  display: grid;

  grid-template-columns:
    minmax(
      110px,
      0.7fr
    )
    minmax(
      90px,
      0.5fr
    )
    minmax(
      160px,
      1fr
    );

  gap: 6px;

  min-width: 0;

  padding: 8px;

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

  border-radius: 9px;

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

.envia-labels-print-form >
.envia-labels-btn {
  grid-column:
    1 /
    -1;

  width: 100%;
}

/* =========================================================
   OPERATIONS / SYNCS
   ========================================================= */

.envia-labels-operations-list,
.envia-labels-sync-list {
  display: grid;

  gap: 6px;

  min-width: 0;
}

/* =========================================================
   OPERATION
   ========================================================= */

.envia-labels-operation-item {
  display: grid;

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

  align-items: start;

  gap: 7px;

  min-width: 0;

  padding: 8px;

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

  border-radius: 9px;

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

.envia-labels-operation-item.is-error {
  border-color:
    var(
      --envia-red-line
    );
}

.envia-labels-operation-item__icon {
  display: grid;

  width: 32px;
  height: 32px;

  place-items: center;

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

  border-radius: 8px;

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

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

.envia-labels-operation-item.is-error
.envia-labels-operation-item__icon {
  border-color:
    var(
      --envia-red-line
    );

  color:
    var(
      --envia-red
    );

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

.envia-labels-operation-item__icon .icon,
.envia-labels-operation-item__icon svg {
  width: 14px;
  height: 14px;
}

.envia-labels-operation-item__body {
  display: grid;

  gap: 5px;

  min-width: 0;
}

.envia-labels-operation-item__body > div {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 7px;

  min-width: 0;
}

.envia-labels-operation-item__body > div strong {
  min-width: 0;

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

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

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-labels-operation-item__body p {
  margin: 0;

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

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

  line-height: 1.35;
}

.envia-labels-operation-item__body footer {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 6px;

  color:
    var(
      --envia-muted
    );

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

/* =========================================================
   OPERATION STATE
   ========================================================= */

.envia-labels-operation-state {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 22px;

  padding:
    0
    6px;

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

  border-radius: 999px;

  color:
    var(
      --envia-muted
    );

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

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

  white-space: nowrap;
}

.envia-labels-operation-state.is-success {
  border-color:
    var(
      --envia-green-line
    );

  color:
    var(
      --envia-green
    );

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

.envia-labels-operation-state.is-error {
  border-color:
    var(
      --envia-red-line
    );

  color:
    var(
      --envia-red
    );

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

/* =========================================================
   SYNC
   ========================================================= */

.envia-labels-sync-item {
  display: grid;

  gap: 7px;

  min-width: 0;

  padding: 8px;

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

  border-radius: 9px;

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

.envia-labels-sync-item.is-error {
  border-color:
    var(
      --envia-red-line
    );
}

.envia-labels-sync-item__head {
  display: grid;

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

  align-items: center;

  gap: 7px;

  min-width: 0;
}

.envia-labels-sync-item__icon {
  display: grid;

  width: 32px;
  height: 32px;

  place-items: center;

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

  border-radius: 8px;

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

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

.envia-labels-sync-item.is-error
.envia-labels-sync-item__icon {
  border-color:
    var(
      --envia-red-line
    );

  color:
    var(
      --envia-red
    );

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

.envia-labels-sync-item__icon .icon,
.envia-labels-sync-item__icon svg {
  width: 14px;
  height: 14px;
}

.envia-labels-sync-item__head > div {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.envia-labels-sync-item__head > div span {
  color:
    var(
      --envia-muted
    );

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

  text-transform: uppercase;
}

.envia-labels-sync-item__head > div strong {
  min-width: 0;

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

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

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-labels-sync-item__format {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 22px;

  padding:
    0
    7px;

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

  border-radius: 999px;

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

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

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

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

.envia-labels-sync-item__metrics {
  display: grid;

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

  min-width: 0;

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

  border-radius: 8px;

  background:
    var(
      --envia-surface
    );

  overflow: hidden;
}

.envia-labels-sync-item__metrics span {
  display: grid;

  gap: 3px;

  min-width: 0;

  padding: 7px;

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

  color:
    var(
      --envia-muted
    );

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

  text-transform: uppercase;
}

.envia-labels-sync-item__metrics span:last-child {
  border-right: 0;
}

.envia-labels-sync-item__metrics strong {
  color:
    var(
      --envia-text-strong
    );

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

.envia-labels-sync-item p {
  margin: 0;

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

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

  line-height: 1.35;
}

.envia-labels-sync-item footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 5px;

  color:
    var(
      --envia-muted
    );

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

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

.envia-labels-selection-bar {
  position: fixed;

  left: 50%;
  bottom: 14px;

  z-index: 9980;

  display: grid;

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

  align-items: center;

  gap: 10px;

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

  min-height: 58px;

  padding:
    8px
    9px;

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

  border-radius: 10px;

  color:
    var(
      --envia-text
    );

  background:
    var(
      --envia-surface
    );

  box-shadow: none;

  opacity: 0;

  pointer-events: none;

  visibility: hidden;

  transform:
    translateX(
      -50%
    )
    translateY(
      12px
    );

  transition:
    opacity
      var(
        --envia-transition-fast
      ),
    transform
      var(
        --envia-transition
      ),
    visibility
      0s
      linear
      220ms;
}

.envia-labels-selection-bar.is-visible {
  opacity: 1;

  pointer-events: auto;

  visibility: visible;

  transform:
    translateX(
      -50%
    )
    translateY(
      0
    );

  transition:
    opacity
      var(
        --envia-transition-fast
      ),
    transform
      var(
        --envia-transition
      ),
    visibility
      0s
      linear
      0s;
}

.envia-labels-selection-bar__summary,
.envia-labels-selection-bar__actions {
  display: flex;

  align-items: center;

  gap: 6px;

  min-width: 0;
}

.envia-labels-selection-bar__summary {
  color:
    var(
      --envia-text
    );
}

.envia-labels-selection-bar__summary .icon,
.envia-labels-selection-bar__summary svg {
  width: 15px;
  height: 15px;
}

.envia-labels-selection-bar__summary strong {
  min-width: 0;

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

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

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.envia-labels-selection-bar__actions {
  justify-content: flex-end;

  flex-wrap: wrap;
}

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

.envia-labels-toast {
  position: fixed;

  right: 10px;
  bottom: 10px;

  z-index: 10020;

  display: grid;

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

  align-items: center;

  gap: 7px;

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

  min-height: 50px;

  padding:
    7px
    8px;

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

  border-radius: 9px;

  color:
    var(
      --envia-text
    );

  background:
    var(
      --envia-surface
    );

  box-shadow: none;

  opacity: 0;

  pointer-events: none;

  transform:
    translateY(
      7px
    );

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

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

  transform:
    translateY(
      0
    );
}

.envia-labels-toast__icon {
  display: grid;

  width: 30px;
  height: 30px;

  place-items: center;

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

  border-radius: 7px;

  color:
    var(
      --envia-muted
    );

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

.envia-labels-toast__icon .icon,
.envia-labels-toast__icon svg {
  width: 13px;
  height: 13px;
}

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

  color:
    var(
      --envia-text
    );

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

  line-height: 1.35;

  overflow-wrap: anywhere;
}

.envia-labels-toast.is-success {
  border-color:
    var(
      --envia-green-line
    );
}

.envia-labels-toast.is-success
.envia-labels-toast__icon {
  border-color:
    var(
      --envia-green-line
    );

  color:
    var(
      --envia-green
    );

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

.envia-labels-toast.is-error {
  border-color:
    var(
      --envia-red-line
    );
}

.envia-labels-toast.is-error
.envia-labels-toast__icon {
  border-color:
    var(
      --envia-red-line
    );

  color:
    var(
      --envia-red
    );

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

.envia-labels-toast.is-warning {
  border-color:
    var(
      --envia-orange-line
    );
}

.envia-labels-toast.is-warning
.envia-labels-toast__icon {
  border-color:
    var(
      --envia-orange-line
    );

  color:
    var(
      --envia-orange
    );

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

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

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

  .envia-labels-toolbar__primary {
    grid-template-columns:
      minmax(
        240px,
        1fr
      )
      minmax(
        140px,
        180px
      )
      minmax(
        130px,
        160px
      )
      auto
      auto;
  }

  .envia-labels-advanced-filters {
    grid-template-columns:
      repeat(
        3,
        minmax(
          145px,
          1fr
        )
      );
  }
}

/* =========================================================
   RESPONSIVE · 1080
   ========================================================= */

@media (
  max-width:
  1080px
) {
  .envia-labels-head {
    align-items: start;
  }

  .envia-labels-head-actions {
    justify-content: flex-start;
  }

  .envia-labels-toolbar__primary {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }

  .envia-labels-search {
    grid-column:
      1 /
      -1;
  }

  .envia-labels-filter-toggle,
  .envia-labels-btn--quiet {
    width: 100%;
  }

  .envia-labels-table {
    overflow-x: auto;
    overflow-y: visible;

    scrollbar-width: thin;

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

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

/* =========================================================
   RESPONSIVE · TABLET
   ========================================================= */

@media (
  max-width:
  820px
) {
  .envia-labels-page {
    gap: 7px;

    padding: 5px;
  }

  .envia-labels-head {
    grid-template-columns: 1fr;

    min-height: 0;

    padding: 9px;
  }

  .envia-labels-head-actions {
    display: grid;

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

    width: 100%;
  }

  .envia-labels-update-meta {
    min-width: 0;

    text-align: left;
  }

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

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

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

  .envia-labels-drawer {
    width:
      min(
        620px,
        calc(
          100vw -
          14px
        )
      );
  }

  .envia-labels-detail-tabs {
    grid-template-columns:
      repeat(
        5,
        minmax(
          0,
          1fr
        )
      );
  }

  .envia-labels-data-grid {
    grid-template-columns: 1fr;
  }

  .envia-labels-data-item,
  .envia-labels-data-item:nth-child(
    2n
  ) {
    border-right: 0;
  }

  .envia-labels-data-item:nth-last-child(
    -n + 2
  ) {
    border-bottom:
      1px
      solid
      var(
        --envia-border
      );
  }

  .envia-labels-data-item:last-child {
    border-bottom: 0;
  }

  .envia-labels-files-grid {
    grid-template-columns: 1fr;
  }

  .envia-labels-print-form {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .envia-labels-print-form
  .envia-labels-field:last-of-type {
    grid-column:
      1 /
      -1;
  }

  .envia-labels-sync-item__metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .envia-labels-sync-item__metrics span:nth-child(
    2n
  ) {
    border-right: 0;
  }

  .envia-labels-sync-item__metrics span:nth-child(
    n + 3
  ) {
    border-top:
      1px
      solid
      var(
        --envia-border
      );
  }

  .envia-labels-selection-bar {
    grid-template-columns: 1fr;

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

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

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

@media (
  max-width:
  640px
) {
  body.envia-labels-has-selection {
    padding-bottom: 130px;
  }

  .envia-labels-page {
    padding: 4px;
  }

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

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

    gap: 8px;
  }

  .envia-labels-brand__icon {
    width: 40px;
    height: 40px;

    min-width: 40px;

    border-radius: 10px;
  }

  .envia-labels-brand__icon .icon,
  .envia-labels-brand__icon svg {
    width: 17px;
    height: 17px;
  }

  .envia-labels-brand h2 {
    font-size: 23px;
  }

  .envia-labels-brand p {
    font-size: 10px;

    white-space: normal;
  }

  .envia-labels-head-actions {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .envia-labels-update-meta {
    grid-column:
      1 /
      -1;
  }

  .envia-labels-head-actions
  .envia-labels-btn {
    width: 100%;
  }

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

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

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

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

  .envia-labels-toolbar__primary,
  .envia-labels-advanced-filters {
    grid-template-columns: 1fr;
  }

  .envia-labels-search {
    grid-column: auto;
  }

  .envia-labels-filter-toggle,
  .envia-labels-btn--quiet {
    width: 100%;
  }

  .envia-labels-advanced-filters.is-open {
    max-height: 780px;
  }

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

  .envia-labels-table {
    overflow-x: hidden;
  }

  .envia-labels-table-head {
    display: none;
  }

  .envia-labels-table-body {
    min-width: 0;

    gap: 6px;

    padding: 6px;
  }

  .envia-labels-row {
    display: grid;

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

    min-width: 0;

    min-height: 0;

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

    border-radius: 9px;

    background:
      var(
        --envia-surface
      );

    overflow: visible;
  }

  .envia-labels-row.is-active::before {
    top: 7px;
    bottom: 7px;
  }

  .envia-labels-cell {
    border-right: 0;

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

  .envia-labels-cell--check {
    grid-column: 1;
    grid-row: 1;

    border-bottom: 0;
  }

  button.envia-labels-cell--shipment {
    grid-column: 2;
    grid-row: 1;

    min-height: 64px;

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

  .envia-labels-cell--actions {
    grid-column: 3;
    grid-row: 1;

    width: 44px;
    min-width: 44px;
    max-width: 44px;

    border-bottom: 0;
  }

  .envia-labels-cell--recipient,
  .envia-labels-cell--logistics,
  .envia-labels-cell--files,
  .envia-labels-cell--status,
  .envia-labels-cell--activity {
    grid-column:
      1 /
      -1;

    min-height: 58px;

    padding:
      8px
      9px;
  }

  .envia-labels-cell--recipient::before,
  .envia-labels-cell--logistics::before,
  .envia-labels-cell--files::before,
  .envia-labels-cell--status::before,
  .envia-labels-cell--activity::before {
    color:
      var(
        --envia-muted
      );

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

    letter-spacing: 0.065em;

    text-transform: uppercase;
  }

  .envia-labels-cell--recipient::before {
    content: "Destinatario";
  }

  .envia-labels-cell--logistics::before {
    content: "Logística";
  }

  .envia-labels-cell--files::before {
    content: "Archivos";
  }

  .envia-labels-cell--status::before {
    content: "Estado";
  }

  .envia-labels-cell--activity::before {
    content: "Actualización";
  }

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

  .envia-labels-row-menu {
    position: fixed;

    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;

    z-index: 10040;

    width: auto;

    max-width: none;

    padding: 6px;

    border-radius: 10px;

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

    transform-origin:
      bottom
      center;
  }

  .envia-labels-row-menu.is-open {
    transform:
      translateY(
        0
      )
      scale(
        1
      );
  }

  .envia-labels-row-menu button {
    min-height: 42px;

    font-size: 10.5px;
  }

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

  .envia-labels-pagination {
    grid-template-columns: 1fr;
  }

  .envia-labels-pagination__summary {
    justify-content: center;
  }

  .envia-labels-pagination__actions {
    display: grid;

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

    width: 100%;
  }

  .envia-labels-pagination__page {
    width: 100%;
  }

  /* =======================================================
     DRAWER
     ======================================================= */

  .envia-labels-drawer {
    width: 100%;

    border-left: 0;
  }

  .envia-labels-detail-head {
    padding:
      10px
      9px;
  }

  .envia-labels-detail-head__body h3 {
    font-size: 17px;
  }

  .envia-labels-detail-tabs {
    top: 124px;

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

    padding: 5px;
  }

  .envia-labels-detail-tab {
    min-height: 34px;

    padding:
      0
      5px;
  }

  .envia-labels-detail-tab span {
    display: none;
  }

  .envia-labels-detail-content {
    gap: 8px;

    padding:
      8px
      7px
      18px;
  }

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

  .envia-labels-detail-section__title {
    align-items: flex-start;

    flex-direction: column;
  }

  .envia-labels-detail-section__title
  .envia-labels-btn {
    width: 100%;
  }

  .envia-labels-file-card__head {
    grid-template-columns:
      34px
      minmax(
        0,
        1fr
      );
  }

  .envia-labels-file-card__status {
    grid-column:
      1 /
      -1;

    justify-self: start;
  }

  .envia-labels-file-card__body > div {
    grid-template-columns: 1fr;

    gap: 3px;
  }

  .envia-labels-file-card__body strong {
    text-align: left;
  }

  .envia-labels-file-card__actions {
    grid-template-columns: 1fr;
  }

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

  .envia-labels-print-form
  .envia-labels-field:last-of-type {
    grid-column: auto;
  }

  .envia-labels-operation-item__body > div {
    align-items: flex-start;

    flex-direction: column;
  }

  .envia-labels-sync-item__head {
    grid-template-columns:
      34px
      minmax(
        0,
        1fr
      );
  }

  .envia-labels-sync-item__format {
    grid-column:
      1 /
      -1;

    justify-self: start;
  }

  .envia-labels-sync-item__metrics {
    grid-template-columns: 1fr;
  }

  .envia-labels-sync-item__metrics span,
  .envia-labels-sync-item__metrics span:nth-child(
    2n
  ) {
    border-right: 0;

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

  .envia-labels-sync-item__metrics span:first-child {
    border-top: 0;
  }

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

  .envia-labels-selection-bar {
    right: 7px;
    bottom: 7px;
    left: 7px;

    width: auto;

    transform:
      translateY(
        12px
      );
  }

  .envia-labels-selection-bar.is-visible {
    transform:
      translateY(
        0
      );
  }

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

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

    width: 100%;
  }

  .envia-labels-selection-bar__actions
  .envia-labels-btn,
  .envia-labels-selection-bar__actions
  .envia-labels-icon-btn {
    width: 100%;
  }

  .envia-labels-selection-bar__actions
  #enviaLabelsBulkPrintBtn {
    grid-column:
      1 /
      -1;
  }

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

  .envia-labels-toast {
    right: 7px;
    bottom: 7px;
    left: 7px;

    width: auto;
  }
}

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

@media (
  max-width:
  430px
) {
  .envia-labels-brand h2 {
    font-size: 21px;
  }

  .envia-labels-brand p {
    display: none;
  }

  .envia-labels-head-actions {
    grid-template-columns: 1fr;
  }

  .envia-labels-update-meta {
    grid-column: auto;
  }

  .envia-labels-summary-grid {
    grid-template-columns: 1fr;
  }

  .envia-labels-pagination__actions {
    grid-template-columns:
      32px
      32px
      minmax(
        0,
        1fr
      )
      32px
      32px;
  }

  .envia-labels-detail-head__main {
    grid-template-columns:
      38px
      minmax(
        0,
        1fr
      );
  }

  .envia-labels-detail-head__icon {
    width: 36px;
    height: 36px;

    min-width: 36px;
  }

  .envia-labels-detail-head__body h3 {
    font-size: 16px;
  }

  .envia-labels-selection-bar__actions {
    grid-template-columns: 1fr;
  }

  .envia-labels-selection-bar__actions
  #enviaLabelsBulkPrintBtn {
    grid-column: auto;
  }
}

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

@media (
  max-height:
  760px
) {
  .envia-labels-detail-head {
    padding:
      8px
      10px;
  }

  .envia-labels-detail-tabs {
    top: 118px;
  }

  .envia-labels-detail-content {
    padding-top: 7px;
  }
}

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

@keyframes enviaLabelsPageIn {
  from {
    opacity: 0;

    transform:
      translateY(
        5px
      );
  }

  to {
    opacity: 1;

    transform:
      translateY(
        0
      );
  }
}

@keyframes enviaLabelsMetricIn {
  from {
    opacity: 0;

    transform:
      translateY(
        4px
      );
  }

  to {
    opacity: 1;

    transform:
      translateY(
        0
      );
  }
}

@keyframes enviaLabelsRowIn {
  from {
    opacity: 0;

    transform:
      translateY(
        4px
      );
  }

  to {
    opacity: 1;

    transform:
      translateY(
        0
      );
  }
}

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

@keyframes enviaLabelsPulse {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

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

@media (
  prefers-reduced-motion:
  reduce
) {
  .envia-labels-page,
  .envia-labels-page *,
  .envia-labels-page *::before,
  .envia-labels-page *::after,
  .envia-labels-drawer,
  .envia-labels-drawer *,
  .envia-labels-drawer-backdrop,
  .envia-labels-selection-bar,
  .envia-labels-toast {
    animation: none !important;

    transition: none !important;

    scroll-behavior: auto !important;
  }
}

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

.envia-labels-page,
.envia-labels-head,
.envia-labels-brand,
.envia-labels-brand__body,
.envia-labels-head-actions,
.envia-labels-metrics,
.envia-labels-list-panel,
.envia-labels-toolbar,
.envia-labels-toolbar__primary,
.envia-labels-search,
.envia-labels-advanced-filters,
.envia-labels-field,
.envia-labels-table,
.envia-labels-table-body,
.envia-labels-row,
.envia-labels-shipment-body,
.envia-labels-pagination,
.envia-labels-drawer,
.envia-labels-detail-panel,
.envia-labels-detail,
.envia-labels-detail-head,
.envia-labels-detail-head__main,
.envia-labels-detail-head__body,
.envia-labels-detail-tabs,
.envia-labels-detail-content,
.envia-labels-detail-section,
.envia-labels-detail-section__title,
.envia-labels-data-grid,
.envia-labels-data-item,
.envia-labels-summary-grid,
.envia-labels-summary-card,
.envia-labels-timeline,
.envia-labels-files-grid,
.envia-labels-file-card,
.envia-labels-print-form,
.envia-labels-operation-item,
.envia-labels-operation-item__body,
.envia-labels-sync-item,
.envia-labels-sync-item__head,
.envia-labels-sync-item__metrics,
.envia-labels-selection-bar {
  max-width: 100%;
  min-width: 0;
}