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

   WIRTZ HUB · ENVIA · PEDIDOS A ENVIAR
   ESTILO UNIFICADO CON MI PERFIL + SIDEBAR

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

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

.envia-pedidos-page,
.envia-pedidos-page *,
.envia-pedidos-page *::before,
.envia-pedidos-page *::after,
.envia-pedidos-dialog-backdrop,
.envia-pedidos-dialog-backdrop *,
.envia-pedidos-dialog-backdrop *::before,
.envia-pedidos-dialog-backdrop *::after,
.envia-pedidos-toast,
.envia-pedidos-toast *,
.envia-pedidos-toast *::before,
.envia-pedidos-toast *::after {
  box-sizing: border-box;

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

.envia-pedidos-page button,
.envia-pedidos-page input,
.envia-pedidos-page select,
.envia-pedidos-page textarea,
.envia-pedidos-dialog-backdrop button,
.envia-pedidos-dialog-backdrop input,
.envia-pedidos-dialog-backdrop select,
.envia-pedidos-dialog-backdrop textarea {
  font: inherit;
}

.envia-pedidos-page button,
.envia-pedidos-dialog-backdrop button {
  appearance: none;
  -webkit-appearance: none;

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

.envia-pedidos-page .icon,
.envia-pedidos-page svg,
.envia-pedidos-dialog-backdrop .icon,
.envia-pedidos-dialog-backdrop svg {
  display: block;

  width: 14px;
  height: 14px;

  min-width: 14px;
  min-height: 14px;

  flex: 0 0 auto;

  color: currentColor;

  stroke: currentColor;
  fill: none;

  stroke-width: 1.9;

  pointer-events: none;
}

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

.envia-pedidos-page,
.envia-pedidos-dialog,
.envia-pedidos-toast {
  --envia-pedidos-bg:
    #f5f5f5;

  --envia-pedidos-surface:
    #ffffff;

  --envia-pedidos-surface-elevated:
    #ffffff;

  --envia-pedidos-surface-soft:
    #f7f7f7;

  --envia-pedidos-surface-muted:
    #eeeeee;

  --envia-pedidos-surface-hover:
    #f2f2f2;

  --envia-pedidos-surface-active:
    #e9e9e9;

  --envia-pedidos-border:
    #dddddd;

  --envia-pedidos-border-soft:
    #ebebeb;

  --envia-pedidos-border-strong:
    #bfbfbf;

  --envia-pedidos-text:
    #0a0a0a;

  --envia-pedidos-text-strong:
    #000000;

  --envia-pedidos-text-soft:
    #404040;

  --envia-pedidos-text-muted:
    #737373;

  --envia-pedidos-text-faint:
    #a3a3a3;

  --envia-pedidos-accent:
    #0a0a0a;

  --envia-pedidos-accent-text:
    #ffffff;

  --envia-pedidos-success:
    #15803d;

  --envia-pedidos-success-bg:
    rgba(
      21,
      128,
      61,
      0.065
    );

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

  --envia-pedidos-warning:
    #b45309;

  --envia-pedidos-warning-bg:
    rgba(
      180,
      83,
      9,
      0.065
    );

  --envia-pedidos-warning-line:
    rgba(
      180,
      83,
      9,
      0.28
    );

  --envia-pedidos-danger:
    #dc2626;

  --envia-pedidos-danger-bg:
    rgba(
      220,
      38,
      38,
      0.065
    );

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

  --envia-pedidos-info:
    #404040;

  --envia-pedidos-info-bg:
    rgba(
      0,
      0,
      0,
      0.045
    );

  --envia-pedidos-info-line:
    rgba(
      0,
      0,
      0,
      0.18
    );

  --envia-pedidos-radius-xs:
    6px;

  --envia-pedidos-radius-sm:
    8px;

  --envia-pedidos-radius-md:
    10px;

  --envia-pedidos-radius-lg:
    14px;

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

  --envia-pedidos-transition-fast:
    130ms ease;

  --envia-pedidos-transition:
    220ms var(
      --envia-pedidos-ease
    );

  --envia-pedidos-transition-slow:
    340ms var(
      --envia-pedidos-ease
    );
}

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

html[data-theme="dark"]
.envia-pedidos-page,
html[data-theme="dark"]
.envia-pedidos-dialog,
html[data-theme="dark"]
.envia-pedidos-toast,
body.dark
.envia-pedidos-page,
body.dark
.envia-pedidos-dialog,
body.dark
.envia-pedidos-toast,
body.theme-dark
.envia-pedidos-page,
body.theme-dark
.envia-pedidos-dialog,
body.theme-dark
.envia-pedidos-toast {
  --envia-pedidos-bg:
    #080808;

  --envia-pedidos-surface:
    #090909;

  --envia-pedidos-surface-elevated:
    #0d0d0d;

  --envia-pedidos-surface-soft:
    #111111;

  --envia-pedidos-surface-muted:
    #181818;

  --envia-pedidos-surface-hover:
    #151515;

  --envia-pedidos-surface-active:
    #1c1c1c;

  --envia-pedidos-border:
    #272727;

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

  --envia-pedidos-border-strong:
    #3f3f3f;

  --envia-pedidos-text:
    #f5f5f5;

  --envia-pedidos-text-strong:
    #ffffff;

  --envia-pedidos-text-soft:
    #cccccc;

  --envia-pedidos-text-muted:
    #8a8a8a;

  --envia-pedidos-text-faint:
    #5f5f5f;

  --envia-pedidos-accent:
    #f5f5f5;

  --envia-pedidos-accent-text:
    #080808;

  --envia-pedidos-success:
    #4ade80;

  --envia-pedidos-success-bg:
    rgba(
      74,
      222,
      128,
      0.075
    );

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

  --envia-pedidos-warning:
    #fbbf24;

  --envia-pedidos-warning-bg:
    rgba(
      251,
      191,
      36,
      0.075
    );

  --envia-pedidos-warning-line:
    rgba(
      251,
      191,
      36,
      0.28
    );

  --envia-pedidos-danger:
    #f87171;

  --envia-pedidos-danger-bg:
    rgba(
      248,
      113,
      113,
      0.075
    );

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

  --envia-pedidos-info:
    #d4d4d4;

  --envia-pedidos-info-bg:
    rgba(
      255,
      255,
      255,
      0.055
    );

  --envia-pedidos-info-line:
    rgba(
      255,
      255,
      255,
      0.18
    );
}

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

.app-content:has(
  .envia-pedidos-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-pedidos-bg
    ) !important;

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

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

  overflow-x: hidden;
}

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

.envia-pedidos-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-pedidos-text
    );

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

  overflow-x: hidden;

  isolation: isolate;

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

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

.envia-pedidos-head {
  position: relative;

  display: grid;

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

  align-items: center;

  gap: 12px;

  width: 100%;
  min-width: 0;

  min-height: 108px;

  padding: 12px;

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

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

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

  overflow: hidden;

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

.envia-pedidos-head::before {
  content: "";

  position: absolute;

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

  height: 1px;

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

  opacity: 0.7;

  pointer-events: none;
}

.envia-pedidos-head::after {
  content: "";

  position: absolute;

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

  width: 160px;
  height: 160px;

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

  border-radius: 50%;

  opacity: 0.65;

  pointer-events: none;
}

.envia-pedidos-head:hover {
  border-color:
    var(
      --envia-pedidos-border-strong
    );
}

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

.envia-pedidos-brand {
  position: relative;

  z-index: 1;

  display: grid;

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

  align-items: center;

  gap: 11px;

  min-width: 0;
}

.envia-pedidos-brand__icon {
  position: relative;

  display: grid;

  width: 52px;
  height: 52px;

  min-width: 52px;

  place-items: center;

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

  border-radius: 13px;

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

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

  overflow: hidden;

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

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

  position: absolute;

  width: 5px;
  height: 5px;

  opacity: 0.65;
}

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

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

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

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

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

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

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

.envia-pedidos-head:hover
.envia-pedidos-brand__icon {
  transform:
    translateY(
      -1px
    );

  border-color:
    var(
      --envia-pedidos-text
    );
}

.envia-pedidos-brand > div {
  display: grid;

  gap: 3px;

  min-width: 0;
}

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

  margin: 0;

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

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

  font-weight: 900;

  line-height: 1;

  letter-spacing: -0.045em;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

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

  max-width: 760px;

  margin: 4px 0 0;

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

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

  line-height: 1.4;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

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

.envia-pedidos-actions,
.envia-pedidos-detail-actions {
  position: relative;

  z-index: 1;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 6px;

  min-width: 0;
}

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

.envia-pedidos-btn,
.envia-pedidos-icon-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  min-width: 0;

  min-height: 34px;

  padding:
    0
    10px;

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

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

  outline: 0;

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

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

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

  line-height: 1;

  white-space: nowrap;

  cursor: pointer;

  box-shadow: none;

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

.envia-pedidos-icon-btn {
  width: 30px;
  height: 30px;

  min-width: 30px;
  min-height: 30px;

  flex:
    0 0 30px;

  padding: 0;
}

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

  color:
    var(
      --envia-pedidos-surface
    );

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

  transform:
    translateY(
      -1px
    );
}

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

.envia-pedidos-btn:disabled,
.envia-pedidos-icon-btn:disabled {
  opacity: 0.44;

  cursor: not-allowed;

  transform: none;
}

.envia-pedidos-btn--dark {
  border-color:
    var(
      --envia-pedidos-accent
    );

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

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

.envia-pedidos-btn--dark:hover:not(
  :disabled
) {
  border-color:
    var(
      --envia-pedidos-accent
    );

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

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

  opacity: 0.86;
}

.envia-pedidos-btn--danger,
.envia-pedidos-icon-btn--danger {
  border-color:
    var(
      --envia-pedidos-danger-line
    );

  color:
    var(
      --envia-pedidos-danger
    );

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

.envia-pedidos-btn--danger:hover:not(
  :disabled
),
.envia-pedidos-icon-btn--danger:hover:not(
  :disabled
) {
  border-color:
    var(
      --envia-pedidos-danger
    );

  color: #ffffff;

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

.envia-pedidos-btn:focus-visible,
.envia-pedidos-icon-btn:focus-visible,
.envia-pedidos-page input:focus-visible,
.envia-pedidos-page select:focus-visible,
.envia-pedidos-page textarea:focus-visible {
  outline:
    2px
    solid
    color-mix(
      in srgb,
      var(
        --envia-pedidos-text
      )
      18%,
      transparent
    );

  outline-offset: 2px;
}

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

.envia-pedidos-metrics {
  display: grid;

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

  gap: 1px;

  width: 100%;
  min-width: 0;

  margin: 0;

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

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

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

  overflow: hidden;
}

.envia-pedidos-metric {
  position: relative;

  display: grid;

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

  grid-template-rows:
    auto
    auto
    auto;

  align-content: center;

  column-gap: 8px;

  min-width: 0;

  min-height: 76px;

  padding:
    8px
    9px;

  border: 0;
  border-radius: 0;

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

  overflow: hidden;

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

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

  transform: none;
}

.envia-pedidos-metric__icon {
  grid-column: 1;
  grid-row:
    1 /
    4;

  display: grid;

  width: 36px;
  height: 36px;

  min-width: 36px;

  place-items: center;

  margin: 0;

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

  border-radius: 9px;

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

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

.envia-pedidos-metric__icon .icon,
.envia-pedidos-metric__icon svg {
  width: 16px;
  height: 16px;
}

.envia-pedidos-metric__label {
  grid-column: 2;

  margin: 0;

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

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

  line-height: 1;

  letter-spacing: 0.075em;

  text-transform: uppercase;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-pedidos-metric strong {
  grid-column: 2;

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

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

  line-height: 1;

  letter-spacing: -0.035em;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-pedidos-metric small {
  grid-column: 2;

  margin: 0;

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

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

  line-height: 1.2;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

/* =========================================================
   WORKSPACE
   ========================================================= */

.envia-pedidos-workspace {
  display: grid;

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

  align-items: start;

  gap: 10px;

  width: 100%;
  min-width: 0;

  min-height: 0;
}

.envia-pedidos-list-panel,
.envia-pedidos-detail-panel {
  min-width: 0;

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

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

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

  box-shadow: none;

  overflow: hidden;
}

.envia-pedidos-list-panel {
  display: grid;

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

  min-height: 640px;
}

.envia-pedidos-detail-panel {
  min-height: 640px;
}

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

.envia-pedidos-toolbar {
  display: grid;

  gap: 8px;

  min-width: 0;

  padding: 9px;

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

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

.envia-pedidos-toolbar__title {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 10px;

  min-width: 0;

  margin: 0;
}

.envia-pedidos-toolbar__title > span,
.envia-pedidos-panel-title span,
.envia-pedidos-form-section > header span,
.envia-pedidos-detail-title > div > span,
.envia-pedidos-dialog > header span {
  color:
    var(
      --envia-pedidos-text-muted
    );

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

  line-height: 1;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.envia-pedidos-toolbar__title strong {
  color:
    var(
      --envia-pedidos-text-strong
    );

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

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

.envia-pedidos-filters {
  display: grid;

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

  gap: 6px;

  min-width: 0;
}

.envia-pedidos-search {
  position: relative;

  grid-column:
    1 /
    -1;

  min-width: 0;
}

.envia-pedidos-search .icon,
.envia-pedidos-search svg {
  position: absolute;

  top: 50%;
  left: 10px;

  width: 13px;
  height: 13px;

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

  transform:
    translateY(
      -50%
    );
}

.envia-pedidos-filters input,
.envia-pedidos-filters select,
.envia-pedidos-field input,
.envia-pedidos-field select,
.envia-pedidos-field textarea {
  width: 100%;
  min-width: 0;

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

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

  outline: 0;

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

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

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

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

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

  padding:
    0
    8px;
}

.envia-pedidos-search input {
  padding-left: 32px;
}

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

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

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

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

.envia-pedidos-filters
.envia-pedidos-btn {
  width: 100%;
}

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

.envia-pedidos-list {
  display: grid;

  align-content: start;

  gap: 6px;

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

  max-height: 720px;

  padding: 7px;

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

  overscroll-behavior: contain;

  scrollbar-width: thin;

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

.envia-pedidos-list::-webkit-scrollbar {
  width: 6px;
}

.envia-pedidos-list::-webkit-scrollbar-thumb {
  border-radius: 999px;

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

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

.envia-pedidos-card {
  appearance: none;

  position: relative;

  display: grid;

  gap: 7px;

  width: 100%;
  min-width: 0;

  padding: 9px;

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

  border-radius: 9px;

  outline: 0;

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

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

  text-align: left;

  cursor: pointer;

  box-shadow: none;

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

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

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

  transform:
    translateY(
      -1px
    );
}

.envia-pedidos-card.is-selected {
  border-color:
    var(
      --envia-pedidos-text
    );

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

.envia-pedidos-card.is-selected::before {
  content: "";

  position: absolute;

  top: 10px;
  left: -1px;

  width: 2px;
  height: 24px;

  border-radius:
    0
    999px
    999px
    0;

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

.envia-pedidos-card__head,
.envia-pedidos-card__footer,
.envia-pedidos-card__meta {
  display: flex;

  align-items: center;

  min-width: 0;
}

.envia-pedidos-card__head,
.envia-pedidos-card__footer {
  justify-content: space-between;

  gap: 7px;
}

.envia-pedidos-card__origin {
  min-width: 0;

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

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

  letter-spacing: 0.075em;

  text-transform: uppercase;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-pedidos-card__body {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.envia-pedidos-card__body > strong {
  min-width: 0;

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

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

  line-height: 1.2;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-pedidos-card__body > small {
  min-width: 0;

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

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

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-pedidos-card__destination {
  display: flex;

  align-items: center;

  gap: 5px;

  min-width: 0;

  margin-top: 3px;

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

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

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-pedidos-card__destination .icon,
.envia-pedidos-card__destination svg {
  width: 12px;
  height: 12px;

  min-width: 12px;
}

.envia-pedidos-card__meta {
  flex-wrap: wrap;

  gap: 4px;
}

.envia-pedidos-card__meta > span {
  display: inline-flex;

  align-items: center;

  gap: 4px;

  min-height: 24px;

  padding:
    0
    6px;

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

  border-radius: 999px;

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

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

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

.envia-pedidos-card__meta .icon,
.envia-pedidos-card__meta svg {
  width: 11px;
  height: 11px;

  min-width: 11px;
}

.envia-pedidos-card__service {
  min-width: 0;

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

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

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-pedidos-card__footer time {
  color:
    var(
      --envia-pedidos-text-muted
    );

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

  white-space: nowrap;
}

/* =========================================================
   BADGES
   ========================================================= */

.envia-pedidos-status,
.envia-pedidos-priority,
.envia-pedidos-counter,
.envia-pedidos-quotation-selected,
.envia-pedidos-quotation-unavailable {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 4px;

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

  min-height: 24px;

  padding:
    0
    7px;

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

  border-radius: 999px;

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

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

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

  line-height: 1;

  white-space: nowrap;
}

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

  min-width: 11px;
}

/* =========================================================
   STATE · WARNING
   ========================================================= */

.envia-pedidos-status.is-pendiente,
.envia-pedidos-status.is-borrador,
.envia-pedidos-status.is-datos-incompletos {
  border-color:
    var(
      --envia-pedidos-warning-line
    );

  color:
    var(
      --envia-pedidos-warning
    );

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

/* =========================================================
   STATE · PROCESS
   ========================================================= */

.envia-pedidos-status.is-listo-para-cotizar,
.envia-pedidos-status.is-cotizando,
.envia-pedidos-status.is-cotizado,
.envia-pedidos-status.is-listo-para-generar,
.envia-pedidos-status.is-generando {
  border-color:
    var(
      --envia-pedidos-info-line
    );

  color:
    var(
      --envia-pedidos-info
    );

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

/* =========================================================
   STATE · SUCCESS
   ========================================================= */

.envia-pedidos-status.is-generado,
.envia-pedidos-status.is-etiqueta-generada {
  border-color:
    var(
      --envia-pedidos-success-line
    );

  color:
    var(
      --envia-pedidos-success
    );

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

/* =========================================================
   STATE · ERROR
   ========================================================= */

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

  color:
    var(
      --envia-pedidos-danger
    );

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

.envia-pedidos-priority.is-baja,
.envia-pedidos-priority.is-normal {
  color:
    var(
      --envia-pedidos-text-muted
    );
}

.envia-pedidos-priority.is-alta {
  border-color:
    var(
      --envia-pedidos-warning-line
    );

  color:
    var(
      --envia-pedidos-warning
    );

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

.envia-pedidos-priority.is-urgente {
  border-color:
    var(
      --envia-pedidos-danger-line
    );

  color:
    var(
      --envia-pedidos-danger
    );

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

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

.envia-pedidos-pagination {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  min-width: 0;

  min-height: 50px;

  padding:
    6px
    8px;

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

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

.envia-pedidos-pagination__summary,
.envia-pedidos-pagination__page {
  color:
    var(
      --envia-pedidos-text-muted
    );

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

  white-space: nowrap;
}

.envia-pedidos-pagination__actions {
  display: flex;

  align-items: center;

  gap: 5px;
}

.envia-pedidos-pagination
.envia-pedidos-btn {
  min-height: 30px;

  padding:
    0
    8px;

  font-size: 8.5px;
}

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

.envia-pedidos-empty,
.envia-pedidos-detail-empty {
  display: grid;

  place-items: center;

  align-content: center;

  gap: 7px;

  min-height: 240px;

  padding: 24px;

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

  text-align: center;
}

.envia-pedidos-detail-empty {
  min-height: 620px;
}

.envia-pedidos-empty > .icon,
.envia-pedidos-empty > svg,
.envia-pedidos-detail-empty > .icon,
.envia-pedidos-detail-empty > svg {
  width: 28px;
  height: 28px;

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

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

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

.envia-pedidos-empty p,
.envia-pedidos-detail-empty p {
  max-width: 390px;

  margin: 0;

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

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

  line-height: 1.45;
}

.envia-pedidos-empty.is-error > .icon,
.envia-pedidos-empty.is-error > svg {
  color:
    var(
      --envia-pedidos-danger
    );
}

.envia-pedidos-empty--inline {
  min-height: 180px;

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

  border-radius:
    var(
      --envia-pedidos-radius-md
    );

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

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

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

  min-height: 100%;

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

.envia-pedidos-detail-head {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  min-width: 0;

  min-height: 70px;

  padding:
    9px
    10px;

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

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

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

.envia-pedidos-detail-title {
  display: grid;

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

  align-items: center;

  gap: 8px;

  min-width: 0;
}

.envia-pedidos-detail-title__icon {
  display: grid;

  width: 40px;
  height: 40px;

  min-width: 40px;

  place-items: center;

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

  border-radius: 9px;

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

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

.envia-pedidos-detail-title__icon .icon,
.envia-pedidos-detail-title__icon svg {
  width: 17px;
  height: 17px;
}

.envia-pedidos-detail-title > div {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.envia-pedidos-detail-title > div > span {
  color:
    var(
      --envia-pedidos-text-muted
    );

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

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.envia-pedidos-detail-title h3 {
  min-width: 0;

  margin: 0;

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

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

  line-height: 1.1;

  letter-spacing: -0.035em;

  overflow-wrap: anywhere;
}

.envia-pedidos-detail-title p {
  min-width: 0;

  margin: 0;

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

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

  line-height: 1.3;

  overflow-wrap: anywhere;
}

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

.envia-pedidos-tabs {
  display: flex;

  align-items: center;

  gap: 4px;

  min-width: 0;

  padding: 6px;

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

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

  overflow-x: auto;

  scrollbar-width: none;
}

.envia-pedidos-tabs::-webkit-scrollbar {
  display: none;
}

.envia-pedidos-tab {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

  min-height: 32px;

  padding:
    0
    9px;

  border:
    1px
    solid
    transparent;

  border-radius: 7px;

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

  background:
    transparent;

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

  white-space: nowrap;

  cursor: pointer;

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

.envia-pedidos-tab:hover {
  color:
    var(
      --envia-pedidos-text
    );

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

.envia-pedidos-tab.is-active {
  border-color:
    var(
      --envia-pedidos-border-strong
    );

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

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

.envia-pedidos-tab .icon,
.envia-pedidos-tab svg {
  width: 12px;
  height: 12px;
}

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

.envia-pedidos-tab-panel {
  width: 100%;
  min-width: 0;

  padding: 9px;

  animation:
    enviaPedidosPanelEnter
    220ms
    var(
      --envia-pedidos-ease
    )
    both;
}

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

.envia-pedidos-panel-title {
  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 10px;

  min-width: 0;

  margin-bottom: 8px;
}

.envia-pedidos-panel-title > div {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.envia-pedidos-panel-title strong {
  color:
    var(
      --envia-pedidos-text-strong
    );

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

.envia-pedidos-panel-title__date {
  color:
    var(
      --envia-pedidos-text-muted
    );

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

/* =========================================================
   INFO GRID
   ========================================================= */

.envia-pedidos-info-grid {
  display: grid;

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

  gap: 6px;

  margin-bottom: 8px;
}

.envia-pedidos-info-card {
  display: grid;

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

  align-items: start;

  gap: 7px;

  min-width: 0;

  min-height: 76px;

  padding: 8px;

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

  border-radius: 9px;

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

.envia-pedidos-info-card__icon {
  display: grid;

  width: 31px;
  height: 31px;

  place-items: center;

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

  border-radius: 7px;

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

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

.envia-pedidos-info-card__icon .icon,
.envia-pedidos-info-card__icon svg {
  width: 13px;
  height: 13px;
}

.envia-pedidos-info-card__body {
  display: grid;

  gap: 3px;

  min-width: 0;
}

.envia-pedidos-info-card__body small {
  margin: 0;

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

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

  text-transform: uppercase;
}

.envia-pedidos-info-card__body strong {
  min-width: 0;

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

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

  line-height: 1.25;

  overflow-wrap: anywhere;
}

.envia-pedidos-info-card__body span {
  margin: 0;

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

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

  line-height: 1.3;

  overflow-wrap: anywhere;
}

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

.envia-pedidos-summary-columns {
  display: grid;

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

  gap: 7px;
}

.envia-pedidos-summary-card {
  min-width: 0;

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

  border-radius: 9px;

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

  overflow: hidden;
}

.envia-pedidos-summary-card > header {
  display: grid;

  gap: 2px;

  min-height: 43px;

  padding:
    6px
    8px;

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

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

.envia-pedidos-summary-card > header span {
  color:
    var(
      --envia-pedidos-text-muted
    );

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

  letter-spacing: 0.07em;

  text-transform: uppercase;
}

.envia-pedidos-summary-card > header strong {
  color:
    var(
      --envia-pedidos-text-strong
    );

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

.envia-pedidos-summary-list {
  display: grid;
}

.envia-pedidos-summary-list > div {
  display: grid;

  grid-template-columns:
    minmax(
      100px,
      0.75fr
    )
    minmax(
      0,
      1.25fr
    );

  gap: 8px;

  min-width: 0;

  min-height: 37px;

  padding:
    6px
    8px;

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

.envia-pedidos-summary-list > div:last-child {
  border-bottom: 0;
}

.envia-pedidos-summary-list span {
  color:
    var(
      --envia-pedidos-text-muted
    );

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

.envia-pedidos-summary-list strong {
  min-width: 0;

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

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

  text-align: right;

  overflow-wrap: anywhere;
}

/* =========================================================
   NOTE / ERROR
   ========================================================= */

.envia-pedidos-note,
.envia-pedidos-error-box {
  margin-top: 7px;

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

  border-radius: 9px;
}

.envia-pedidos-note {
  padding: 8px;

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

.envia-pedidos-note > span {
  color:
    var(
      --envia-pedidos-text-muted
    );

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

  letter-spacing: 0.07em;

  text-transform: uppercase;
}

.envia-pedidos-note p {
  margin:
    5px
    0
    0;

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

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

  line-height: 1.45;

  white-space: pre-wrap;
}

.envia-pedidos-error-box {
  display: grid;

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

  align-items: start;

  gap: 7px;

  padding: 8px;

  border-color:
    var(
      --envia-pedidos-danger-line
    );

  color:
    var(
      --envia-pedidos-danger
    );

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

.envia-pedidos-error-box > .icon,
.envia-pedidos-error-box > svg {
  width: 14px;
  height: 14px;

  margin-top: 1px;
}

.envia-pedidos-error-box strong {
  font-size: 9px;
  font-weight: 850;
}

.envia-pedidos-error-box p {
  margin:
    3px
    0
    0;

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

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

  line-height: 1.4;
}

.envia-pedidos-error-box small {
  display: inline-block;

  margin-top: 4px;

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

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

   INCLUYE:
   - Tablas
   - Productos
   - Paquetes
   - Cotizaciones
   - Actividad
   - Formularios
   - Productos del formulario
   - Paquetes del formulario
   - Diálogo de generación
   - Toast
   - Botón actualizar
   - Responsive completo
   - Vista móvil sin scroll horizontal
   - Animaciones
   ========================================================= *//* =========================================================
   TABLAS
   ========================================================= */

.envia-pedidos-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;

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

  border-radius: 9px;

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

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

  scrollbar-width: thin;

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

.envia-pedidos-table-wrap::-webkit-scrollbar {
  height: 6px;
}

.envia-pedidos-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.envia-pedidos-table-wrap::-webkit-scrollbar-thumb {
  border-radius: 999px;

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

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

  min-width: 760px;

  border-collapse: collapse;

  table-layout: auto;
}

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

  padding:
    8px
    9px;

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

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

  vertical-align: middle;
}

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

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

.envia-pedidos-table th {
  color:
    var(
      --envia-pedidos-text-muted
    );

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

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

  line-height: 1;

  letter-spacing: 0.07em;

  text-align: left;

  text-transform: uppercase;

  white-space: nowrap;
}

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

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

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

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

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

.envia-pedidos-table td > strong {
  display: block;

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

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

.envia-pedidos-table td > small {
  display: block;

  margin-top: 3px;

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

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

.envia-pedidos-table .is-center {
  text-align: center;
}

.envia-pedidos-table .is-right {
  text-align: right;
}

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

.envia-pedidos-product-cell {
  display: grid;

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

  align-items: center;

  gap: 7px;

  min-width: 220px;
}

.envia-pedidos-product-cell > img,
.envia-pedidos-product-cell > span {
  width: 38px;
  height: 38px;

  min-width: 38px;

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

  border-radius: 8px;

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

.envia-pedidos-product-cell > img {
  object-fit: cover;
}

.envia-pedidos-product-cell > span {
  display: grid;

  place-items: center;

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

.envia-pedidos-product-cell > span .icon,
.envia-pedidos-product-cell > span svg {
  width: 15px;
  height: 15px;
}

.envia-pedidos-product-cell > div {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.envia-pedidos-product-cell strong {
  min-width: 0;

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

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

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-pedidos-product-cell small {
  min-width: 0;

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

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

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

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

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

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

  gap: 7px;

  min-width: 0;
}

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

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

  border-radius: 9px;

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

  overflow: hidden;

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

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

  transform:
    translateY(
      -1px
    );
}

.envia-pedidos-package-card > header {
  display: grid;

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

  align-items: center;

  gap: 7px;

  min-height: 48px;

  padding:
    7px
    8px;

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

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

.envia-pedidos-package-card__icon {
  display: grid;

  width: 31px;
  height: 31px;

  place-items: center;

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

  border-radius: 7px;

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

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

.envia-pedidos-package-card__icon .icon,
.envia-pedidos-package-card__icon svg {
  width: 13px;
  height: 13px;
}

.envia-pedidos-package-card > header div {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.envia-pedidos-package-card > header span {
  color:
    var(
      --envia-pedidos-text-muted
    );

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

  text-transform: uppercase;
}

.envia-pedidos-package-card > header strong {
  min-width: 0;

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

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

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-pedidos-package-card__metrics {
  display: grid;

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

.envia-pedidos-package-card__metrics > div {
  min-width: 0;

  min-height: 55px;

  padding: 8px;

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

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

.envia-pedidos-package-card__metrics > div:nth-child(
  2n
) {
  border-right: 0;
}

.envia-pedidos-package-card__metrics > div:nth-last-child(
  -n + 2
) {
  border-bottom: 0;
}

.envia-pedidos-package-card__metrics span,
.envia-pedidos-package-card > footer span {
  display: block;

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

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

  text-transform: uppercase;
}

.envia-pedidos-package-card__metrics strong,
.envia-pedidos-package-card > footer strong {
  display: block;

  margin-top: 3px;

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

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

  overflow-wrap: anywhere;
}

.envia-pedidos-package-card > footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  min-height: 42px;

  padding:
    7px
    8px;

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

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

.envia-pedidos-package-card > footer strong {
  margin: 0;

  text-align: right;
}

.envia-pedidos-package-card > p {
  margin: 0;

  padding: 8px;

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

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

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

  line-height: 1.4;
}

/* =========================================================
   QUOTATIONS
   ========================================================= */

.envia-pedidos-quotations-grid {
  display: grid;

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

  gap: 7px;

  min-width: 0;
}

.envia-pedidos-quotation-card {
  display: grid;

  grid-template-rows:
    auto
    auto
    auto
    minmax(
      48px,
      auto
    );

  min-width: 0;

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

  border-radius: 9px;

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

  overflow: hidden;

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

.envia-pedidos-quotation-card:hover {
  border-color:
    var(
      --envia-pedidos-border-strong
    );

  transform:
    translateY(
      -1px
    );
}

.envia-pedidos-quotation-card.is-selected {
  border-color:
    var(
      --envia-pedidos-text
    );
}

.envia-pedidos-quotation-card.is-unavailable {
  opacity: 0.52;
}

.envia-pedidos-quotation-card > header {
  display: grid;

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

  align-items: center;

  gap: 7px;

  min-width: 0;

  min-height: 50px;

  padding:
    7px
    8px;

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

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

.envia-pedidos-quotation-card__logo {
  display: grid;

  width: 33px;
  height: 33px;

  place-items: center;

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

  border-radius: 7px;

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

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

.envia-pedidos-quotation-card__logo .icon,
.envia-pedidos-quotation-card__logo svg {
  width: 14px;
  height: 14px;
}

.envia-pedidos-quotation-card > header > div {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.envia-pedidos-quotation-card > header > div > span {
  min-width: 0;

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

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

  text-transform: uppercase;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-pedidos-quotation-card > header > div > strong {
  min-width: 0;

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

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

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-pedidos-quotation-selected {
  border-color:
    var(
      --envia-pedidos-success-line
    );

  color:
    var(
      --envia-pedidos-success
    );

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

.envia-pedidos-quotation-selected .icon,
.envia-pedidos-quotation-selected svg {
  width: 10px;
  height: 10px;
}

.envia-pedidos-quotation-card__price {
  display: grid;

  justify-items: center;

  gap: 3px;

  padding:
    14px
    10px;

  text-align: center;
}

.envia-pedidos-quotation-card__price strong {
  color:
    var(
      --envia-pedidos-text-strong
    );

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

  line-height: 1;

  letter-spacing: -0.035em;
}

.envia-pedidos-quotation-card__price span {
  color:
    var(
      --envia-pedidos-text-muted
    );

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

  text-transform: uppercase;
}

.envia-pedidos-quotation-card__details {
  display: grid;

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

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

.envia-pedidos-quotation-card__details > div {
  min-width: 0;

  min-height: 52px;

  padding: 7px;

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

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

.envia-pedidos-quotation-card__details > div:nth-child(
  2n
) {
  border-right: 0;
}

.envia-pedidos-quotation-card__details > div:nth-last-child(
  -n + 2
) {
  border-bottom: 0;
}

.envia-pedidos-quotation-card__details span {
  display: block;

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

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

  text-transform: uppercase;
}

.envia-pedidos-quotation-card__details strong {
  display: block;

  margin-top: 3px;

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

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

  overflow-wrap: anywhere;
}

.envia-pedidos-quotation-card > footer {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  min-height: 46px;

  padding:
    7px
    8px;

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

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

.envia-pedidos-quotation-card > footer
.envia-pedidos-btn {
  width: 100%;
}

.envia-pedidos-quotation-unavailable {
  border-color:
    var(
      --envia-pedidos-danger-line
    );

  color:
    var(
      --envia-pedidos-danger
    );

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

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

.envia-pedidos-timeline {
  display: grid;

  min-width: 0;
}

.envia-pedidos-timeline-item {
  position: relative;

  display: grid;

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

  gap: 7px;

  min-width: 0;
}

.envia-pedidos-timeline-item:not(
  :last-child
)::before {
  content: "";

  position: absolute;

  top: 30px;
  bottom: 0;
  left: 14px;

  width: 1px;

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

.envia-pedidos-timeline-item__marker {
  position: relative;

  z-index: 1;

  display: grid;

  width: 29px;
  height: 29px;

  place-items: center;

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

  border-radius: 999px;

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

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

.envia-pedidos-timeline-item__marker .icon,
.envia-pedidos-timeline-item__marker svg {
  width: 12px;
  height: 12px;
}

.envia-pedidos-timeline-item.is-success
.envia-pedidos-timeline-item__marker {
  border-color:
    var(
      --envia-pedidos-success-line
    );

  color:
    var(
      --envia-pedidos-success
    );

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

.envia-pedidos-timeline-item.is-error
.envia-pedidos-timeline-item__marker {
  border-color:
    var(
      --envia-pedidos-danger-line
    );

  color:
    var(
      --envia-pedidos-danger
    );

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

.envia-pedidos-timeline-item__body {
  min-width: 0;

  margin-bottom: 7px;

  padding: 8px;

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

  border-radius: 8px;

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

.envia-pedidos-timeline-item__body > header {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 8px;

  min-width: 0;
}

.envia-pedidos-timeline-item__body > header > div {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.envia-pedidos-timeline-item__body > header span {
  color:
    var(
      --envia-pedidos-text-muted
    );

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

  letter-spacing: 0.06em;

  text-transform: uppercase;
}

.envia-pedidos-timeline-item__body > header strong {
  min-width: 0;

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

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

  overflow-wrap: anywhere;
}

.envia-pedidos-timeline-item__body > header time {
  color:
    var(
      --envia-pedidos-text-muted
    );

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

  white-space: nowrap;
}

.envia-pedidos-timeline-item__meta {
  display: flex;

  flex-wrap: wrap;

  gap: 4px;

  margin-top: 6px;
}

.envia-pedidos-timeline-item__meta span {
  padding:
    3px
    6px;

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

  border-radius: 999px;

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

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

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

.envia-pedidos-timeline-item__body p {
  margin:
    6px
    0
    0;

  color:
    var(
      --envia-pedidos-danger
    );

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

  line-height: 1.4;
}

.envia-pedidos-timeline-item__body small {
  display: inline-block;

  margin-top: 5px;

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

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

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

.envia-pedidos-detail--form {
  background:
    var(
      --envia-pedidos-bg
    );
}

.envia-pedidos-form-content {
  display: grid;

  align-content: start;

  gap: 7px;

  min-width: 0;

  padding: 7px;
}

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

.envia-pedidos-form-section {
  min-width: 0;

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

  border-radius: 9px;

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

  overflow: hidden;

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

.envia-pedidos-form-section:hover {
  border-color:
    var(
      --envia-pedidos-border-strong
    );
}

.envia-pedidos-form-section > header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  min-width: 0;

  min-height: 46px;

  padding:
    6px
    8px;

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

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

.envia-pedidos-form-section > header > div {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.envia-pedidos-form-section > header strong {
  color:
    var(
      --envia-pedidos-text-strong
    );

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

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

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

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

  min-width: 0;
}

.envia-pedidos-field {
  display: grid;

  align-content: center;

  gap: 4px;

  min-width: 0;

  min-height: 58px;

  padding:
    7px
    8px;

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

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

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

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

.envia-pedidos-field:hover,
.envia-pedidos-field:focus-within {
  background:
    var(
      --envia-pedidos-surface-hover
    );
}

.envia-pedidos-field:nth-child(
  3n
) {
  border-right: 0;
}

.envia-pedidos-field.is-wide {
  grid-column:
    span
    2;
}

.envia-pedidos-field.is-full {
  grid-column:
    1 /
    -1;

  border-right: 0;
}

.envia-pedidos-field > span {
  color:
    var(
      --envia-pedidos-text-muted
    );

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

  line-height: 1;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}

.envia-pedidos-field > span b {
  color:
    var(
      --envia-pedidos-danger
    );
}

.envia-pedidos-field input,
.envia-pedidos-field select {
  height: 34px;

  padding:
    0
    7px;

  font-size: 10px;
}

.envia-pedidos-field textarea {
  min-height: 66px;

  padding: 7px;

  font-size: 10px;

  line-height: 1.4;

  resize: vertical;
}

/* =========================================================
   FORM ITEMS / PACKAGES
   ========================================================= */

.envia-pedidos-form-items,
.envia-pedidos-form-packages {
  display: grid;

  gap: 6px;

  min-width: 0;

  padding: 7px;
}

.envia-pedidos-form-item,
.envia-pedidos-form-package {
  min-width: 0;

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

  border-radius: 8px;

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

  overflow: hidden;
}

.envia-pedidos-form-item > header,
.envia-pedidos-form-package > header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  min-height: 42px;

  padding:
    6px
    7px;

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

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

.envia-pedidos-form-item > header > div,
.envia-pedidos-form-package > header > div {
  display: grid;

  gap: 2px;
}

.envia-pedidos-form-item > header span,
.envia-pedidos-form-package > header span {
  color:
    var(
      --envia-pedidos-text-muted
    );

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

  text-transform: uppercase;
}

.envia-pedidos-form-item > header strong,
.envia-pedidos-form-package > header strong {
  color:
    var(
      --envia-pedidos-text-strong
    );

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

.envia-pedidos-form-item__grid,
.envia-pedidos-form-package__grid {
  display: grid;

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

  min-width: 0;
}

.envia-pedidos-form-item__grid
.envia-pedidos-field,
.envia-pedidos-form-package__grid
.envia-pedidos-field {
  min-height: 56px;
}

.envia-pedidos-form-item__grid
.is-wide,
.envia-pedidos-form-package__grid
.is-wide {
  grid-column:
    span
    2;
}

/* =========================================================
   DIALOG BACKDROP
   ========================================================= */

.envia-pedidos-dialog-backdrop {
  position: fixed;

  inset: 0;

  z-index: 10000;

  display: grid;

  place-items: center;

  padding: 10px;

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

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

  animation:
    enviaPedidosBackdropEnter
    180ms
    ease
    both;
}

/* =========================================================
   DIALOG
   ========================================================= */

.envia-pedidos-dialog {
  width:
    min(
      520px,
      100%
    );

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

  min-width: 0;

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

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

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

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

  box-shadow: none;

  overflow: hidden;

  animation:
    enviaPedidosDialogEnter
    220ms
    var(
      --envia-pedidos-ease
    )
    both;
}

.envia-pedidos-dialog > header,
.envia-pedidos-dialog > footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  min-width: 0;

  padding:
    7px
    8px;
}

.envia-pedidos-dialog > header {
  min-height: 54px;

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

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

.envia-pedidos-dialog > header > div {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.envia-pedidos-dialog > header strong {
  min-width: 0;

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

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

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.envia-pedidos-dialog__body {
  display: grid;

  gap: 7px;

  min-width: 0;

  padding: 7px;

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

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

.envia-pedidos-dialog-summary {
  display: grid;

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

  border-radius: 8px;

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

  overflow: hidden;
}

.envia-pedidos-dialog-summary > div {
  display: grid;

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

  gap: 8px;

  min-height: 38px;

  padding:
    6px
    8px;

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

.envia-pedidos-dialog-summary > div:last-child {
  border-bottom: 0;
}

.envia-pedidos-dialog-summary span {
  color:
    var(
      --envia-pedidos-text-muted
    );

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

.envia-pedidos-dialog-summary strong {
  color:
    var(
      --envia-pedidos-text-strong
    );

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

  text-align: right;

  overflow-wrap: anywhere;
}

.envia-pedidos-dialog > footer {
  justify-content: flex-end;

  min-height: 48px;

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

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

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

.envia-pedidos-toast {
  position: fixed;

  right: 12px;
  bottom: 12px;

  z-index: 11000;

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

  min-width: 0;

  padding:
    9px
    11px;

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

  border-radius: 9px;

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

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

  font-family:
    "DM Sans",
    "Inter",
    system-ui,
    sans-serif;

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

  line-height: 1.4;

  box-shadow: none;

  opacity: 0;

  pointer-events: none;

  transform:
    translateY(
      8px
    );

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

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

  transform:
    translateY(
      0
    );
}

.envia-pedidos-toast.is-success {
  border-color:
    var(
      --envia-pedidos-success-line
    );

  color:
    var(
      --envia-pedidos-success
    );

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

.envia-pedidos-toast.is-error {
  border-color:
    var(
      --envia-pedidos-danger-line
    );

  color:
    var(
      --envia-pedidos-danger
    );

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

.envia-pedidos-toast.is-info {
  border-color:
    var(
      --envia-pedidos-info-line
    );

  color:
    var(
      --envia-pedidos-info
    );

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

/* =========================================================
   REFRESH BUTTON
   ========================================================= */

#enviaPedidosRefreshBtn {
  position: relative;

  min-width: 116px;

  overflow: hidden;
}

#enviaPedidosRefreshBtn:disabled {
  opacity: 1;

  cursor: wait;
}

#enviaPedidosRefreshBtn:disabled::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  height: 2px;

  background:
    currentColor;

  transform-origin:
    left
    center;

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

#enviaPedidosRefreshBtn:disabled
.icon,
#enviaPedidosRefreshBtn:disabled
svg {
  animation:
    enviaPedidosSpin
    850ms
    linear
    infinite;
}

/* =========================================================
   GENERIC SPIN
   ========================================================= */

.envia-pedidos-page
.is-spinning {
  animation:
    enviaPedidosSpin
    850ms
    linear
    infinite;
}

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

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

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

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

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

@media (
  max-width:
  1180px
) {
  .envia-pedidos-workspace {
    grid-template-columns:
      minmax(
        290px,
        340px
      )
      minmax(
        0,
        1fr
      );
  }

  .envia-pedidos-detail-head {
    align-items: flex-start;

    flex-direction: column;
  }

  .envia-pedidos-detail-actions {
    justify-content: flex-start;

    width: 100%;
  }

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

  .envia-pedidos-field:nth-child(
    3n
  ) {
    border-right:
      1px
      solid
      var(
        --envia-pedidos-border
      );
  }

  .envia-pedidos-field:nth-child(
    2n
  ) {
    border-right: 0;
  }

  .envia-pedidos-field.is-wide {
    grid-column:
      span
      1;
  }

  .envia-pedidos-field.is-full {
    grid-column:
      1 /
      -1;
  }
}

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

@media (
  max-width:
  960px
) {
  .envia-pedidos-head {
    grid-template-columns:
      1fr;

    min-height: 0;
  }

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

  .envia-pedidos-workspace {
    grid-template-columns:
      1fr;
  }

  .envia-pedidos-list-panel,
  .envia-pedidos-detail-panel {
    min-height: auto;
  }

  .envia-pedidos-list {
    max-height: 520px;
  }

  .envia-pedidos-detail-empty {
    min-height: 380px;
  }

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

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

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

    overflow-x: hidden;
  }

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

    padding: 5px;
  }

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

  .envia-pedidos-head {
    gap: 8px;

    padding: 8px;
  }

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

    gap: 8px;
  }

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

    min-width: 40px;

    border-radius: 10px;
  }

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

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

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

    white-space: normal;
  }

  .envia-pedidos-actions {
    display: grid;

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

    width: 100%;
  }

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

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

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

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

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

  .envia-pedidos-toolbar__title {
    align-items: flex-start;

    flex-direction: column;
  }

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

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

  /* =======================================================
     CARDS
     ======================================================= */

  .envia-pedidos-card__head,
  .envia-pedidos-card__footer {
    gap: 6px;
  }

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

  .envia-pedidos-pagination {
    display: grid;

    justify-items: center;
  }

  .envia-pedidos-pagination__actions {
    display: grid;

    grid-template-columns:
      1fr
      auto
      1fr;

    width: 100%;
  }

  .envia-pedidos-pagination__actions
  .envia-pedidos-btn {
    width: 100%;
  }

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

  .envia-pedidos-detail-head {
    gap: 9px;

    padding: 8px;
  }

  .envia-pedidos-detail-title {
    width: 100%;
  }

  .envia-pedidos-detail-title__icon {
    width: 36px;
    height: 36px;

    min-width: 36px;
  }

  .envia-pedidos-detail-title h3 {
    font-size: 17px;
  }

  .envia-pedidos-detail-actions {
    display: grid;

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

    width: 100%;
  }

  .envia-pedidos-detail-actions
  .envia-pedidos-btn {
    width: 100%;
  }

  .envia-pedidos-detail-actions
  .envia-pedidos-status,
  .envia-pedidos-detail-actions
  .envia-pedidos-priority {
    width: 100%;
  }

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

  .envia-pedidos-tabs {
    padding: 5px;
  }

  .envia-pedidos-tab-panel {
    padding: 6px;
  }

  .envia-pedidos-panel-title {
    align-items: flex-start;

    flex-direction: column;
  }

  .envia-pedidos-panel-title
  .envia-pedidos-btn {
    width: 100%;
  }

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

  .envia-pedidos-info-grid {
    grid-template-columns:
      1fr;
  }

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

  .envia-pedidos-summary-list > div,
  .envia-pedidos-dialog-summary > div {
    grid-template-columns:
      1fr;

    gap: 3px;
  }

  .envia-pedidos-summary-list strong,
  .envia-pedidos-dialog-summary strong {
    text-align: left;
  }

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

  .envia-pedidos-packages-grid,
  .envia-pedidos-quotations-grid {
    grid-template-columns:
      1fr;
  }

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

  .envia-pedidos-table-wrap {
    border: 0;

    background: transparent;

    overflow-x: hidden;
  }

  .envia-pedidos-table {
    display: block;

    width: 100%;

    min-width: 0;
  }

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

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

    gap: 6px;
  }

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

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

    min-width: 0;

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

    border-radius: 9px;

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

    overflow: hidden;
  }

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

    gap: 3px;

    min-width: 0;

    min-height: 48px;

    padding: 7px;

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

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

    text-align: left !important;
  }

  .envia-pedidos-table td::before {
    color:
      var(
        --envia-pedidos-text-muted
      );

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

    letter-spacing: 0.065em;

    text-transform: uppercase;
  }

  .envia-pedidos-table td:nth-child(
    1
  ) {
    grid-column:
      1 /
      -1;

    border-right: 0;
  }

  .envia-pedidos-table td:nth-child(
    1
  )::before {
    content: "Producto";
  }

  .envia-pedidos-table td:nth-child(
    2
  )::before {
    content: "SKU";
  }

  .envia-pedidos-table td:nth-child(
    3
  )::before {
    content: "Cantidad";
  }

  .envia-pedidos-table td:nth-child(
    4
  )::before {
    content: "Peso";
  }

  .envia-pedidos-table td:nth-child(
    5
  )::before {
    content: "Precio";
  }

  .envia-pedidos-table td:nth-child(
    6
  )::before {
    content: "Total";
  }

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

  .envia-pedidos-product-cell {
    min-width: 0;
  }

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

  .envia-pedidos-timeline-item__body > header {
    flex-direction: column;
  }

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

  .envia-pedidos-form-content {
    padding: 5px;
  }

  .envia-pedidos-form-section > header {
    align-items: stretch;

    flex-direction: column;
  }

  .envia-pedidos-form-section > header
  .envia-pedidos-btn {
    width: 100%;
  }

  .envia-pedidos-form-grid,
  .envia-pedidos-form-item__grid,
  .envia-pedidos-form-package__grid {
    grid-template-columns:
      1fr;
  }

  .envia-pedidos-field,
  .envia-pedidos-field:nth-child(
    2n
  ),
  .envia-pedidos-field:nth-child(
    3n
  ) {
    grid-column: auto;

    border-right: 0;
  }

  .envia-pedidos-field.is-wide,
  .envia-pedidos-field.is-full,
  .envia-pedidos-form-item__grid
  .is-wide,
  .envia-pedidos-form-package__grid
  .is-wide {
    grid-column: auto;
  }

  /* =======================================================
     DIALOG
     ======================================================= */

  .envia-pedidos-dialog-backdrop {
    place-items: end center;

    padding: 0;
  }

  .envia-pedidos-dialog {
    width: 100%;

    max-height: 97dvh;

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

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

  .envia-pedidos-dialog > footer {
    display: grid;

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

  .envia-pedidos-dialog > footer
  .envia-pedidos-btn {
    width: 100%;
  }

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

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

    width: auto;
    max-width: none;
  }
}

/* =========================================================
   RESPONSIVE · MOBILE PEQUEÑO
   ========================================================= */

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

  .envia-pedidos-brand h2 {
    font-size: 21px;
  }

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

  .envia-pedidos-actions,
  .envia-pedidos-detail-actions {
    grid-template-columns:
      1fr;
  }

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

  .envia-pedidos-metric {
    min-height: 64px;
  }

  .envia-pedidos-card__head,
  .envia-pedidos-card__footer {
    align-items: flex-start;

    flex-direction: column;
  }

  .envia-pedidos-pagination__actions {
    grid-template-columns:
      1fr;
  }

  .envia-pedidos-pagination__page {
    order: -1;

    text-align: center;
  }

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

  .envia-pedidos-table td,
  .envia-pedidos-table td:nth-child(
    2n
  ) {
    grid-column: auto;

    border-right: 0;
  }

  .envia-pedidos-detail-title {
    grid-template-columns:
      34px
      minmax(
        0,
        1fr
      );
  }

  .envia-pedidos-detail-title__icon {
    width: 33px;
    height: 33px;

    min-width: 33px;
  }

  .envia-pedidos-detail-title h3 {
    font-size: 16px;
  }

  .envia-pedidos-dialog > footer {
    grid-template-columns:
      1fr;
  }

  .envia-pedidos-package-card__metrics,
  .envia-pedidos-quotation-card__details {
    grid-template-columns:
      1fr;
  }

  .envia-pedidos-package-card__metrics > div,
  .envia-pedidos-package-card__metrics > div:nth-child(
    2n
  ),
  .envia-pedidos-quotation-card__details > div,
  .envia-pedidos-quotation-card__details > div:nth-child(
    2n
  ) {
    border-right: 0;

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

  .envia-pedidos-package-card__metrics > div:last-child,
  .envia-pedidos-quotation-card__details > div:last-child {
    border-bottom: 0;
  }
}

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

@media (
  max-height:
  780px
) {
  .envia-pedidos-list {
    max-height: 510px;
  }

  .envia-pedidos-dialog {
    max-height:
      calc(
        100dvh -
        10px
      );
  }
}

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

@keyframes enviaPedidosPageEnter {
  from {
    opacity: 0;

    transform:
      translateY(
        5px
      );
  }

  to {
    opacity: 1;

    transform:
      translateY(
        0
      );
  }
}

@keyframes enviaPedidosPanelEnter {
  from {
    opacity: 0;

    transform:
      translateY(
        4px
      );
  }

  to {
    opacity: 1;

    transform:
      translateY(
        0
      );
  }
}

@keyframes enviaPedidosBackdropEnter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes enviaPedidosDialogEnter {
  from {
    opacity: 0;

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

  to {
    opacity: 1;

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

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

@keyframes enviaPedidosSyncProgress {
  0% {
    transform:
      translateX(
        -100%
      )
      scaleX(
        0.35
      );
  }

  50% {
    transform:
      translateX(
        15%
      )
      scaleX(
        0.7
      );
  }

  100% {
    transform:
      translateX(
        100%
      )
      scaleX(
        0.35
      );
  }
}

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

@media (
  prefers-reduced-motion:
  reduce
) {
  .envia-pedidos-page,
  .envia-pedidos-page *,
  .envia-pedidos-page *::before,
  .envia-pedidos-page *::after,
  .envia-pedidos-dialog-backdrop,
  .envia-pedidos-dialog-backdrop *,
  .envia-pedidos-toast,
  #enviaPedidosRefreshBtn,
  #enviaPedidosRefreshBtn::after,
  #enviaPedidosRefreshBtn .icon {
    animation: none !important;

    transition: none !important;

    scroll-behavior: auto !important;
  }
}

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

.envia-pedidos-page,
.envia-pedidos-head,
.envia-pedidos-brand,
.envia-pedidos-actions,
.envia-pedidos-metrics,
.envia-pedidos-workspace,
.envia-pedidos-list-panel,
.envia-pedidos-detail-panel,
.envia-pedidos-toolbar,
.envia-pedidos-filters,
.envia-pedidos-list,
.envia-pedidos-card,
.envia-pedidos-card__body,
.envia-pedidos-card__meta,
.envia-pedidos-card__footer,
.envia-pedidos-detail,
.envia-pedidos-detail-head,
.envia-pedidos-detail-title,
.envia-pedidos-detail-actions,
.envia-pedidos-tabs,
.envia-pedidos-tab-panel,
.envia-pedidos-panel-title,
.envia-pedidos-info-grid,
.envia-pedidos-info-card,
.envia-pedidos-summary-columns,
.envia-pedidos-summary-card,
.envia-pedidos-packages-grid,
.envia-pedidos-package-card,
.envia-pedidos-quotations-grid,
.envia-pedidos-quotation-card,
.envia-pedidos-timeline,
.envia-pedidos-timeline-item,
.envia-pedidos-form-content,
.envia-pedidos-form-section,
.envia-pedidos-form-grid,
.envia-pedidos-field,
.envia-pedidos-form-items,
.envia-pedidos-form-packages,
.envia-pedidos-form-item,
.envia-pedidos-form-package,
.envia-pedidos-form-item__grid,
.envia-pedidos-form-package__grid,
.envia-pedidos-dialog,
.envia-pedidos-dialog__body,
.envia-pedidos-dialog-summary {
  max-width: 100%;
  min-width: 0;
}