/* =========================================================
   UBICACIÓN:
   frontend/src/pages/recursos/full-pedidos/full-pedidos.css

   WIRTZ HUB · RECURSOS · PEDIDOS FULL
   PREMIUM · COMPACTO · RESPONSIVE

   PARTE 1 DE 3

   CONTIENE:
   - Base
   - Variables
   - Header
   - Botones
   - Métricas
   - Nuevo pedido
   - Archivos
   - Campos
   - Preview
   - Borrador editable
   - Stock
   - Cantidades
   - Acciones del borrador
   ========================================================= */


/* =========================================================
   01. BASE
   ========================================================= */


.full-pedidos-page {
  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 18px;

  color:
    var(
      --color-text,
      #171717
    );

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


.full-pedidos-page *,
.full-pedidos-page *::before,
.full-pedidos-page *::after {
  box-sizing: border-box;
}


.full-pedidos-page button,
.full-pedidos-page input,
.full-pedidos-page select,
.full-pedidos-page textarea {
  font: inherit;
}


.full-pedidos-page button {
  -webkit-tap-highlight-color:
    transparent;
}


.full-pedidos-page .icon {
  width: 18px;
  height: 18px;

  flex: 0 0 auto;

  stroke-width: 1.8;
}


/* =========================================================
   02. VARIABLES
   ========================================================= */


.full-pedidos-page {
  --full-bg:
    var(
      --color-background,
      #f7f7f7
    );

  --full-surface:
    var(
      --color-surface,
      #ffffff
    );

  --full-surface-soft:
    var(
      --color-surface-soft,
      #fafafa
    );

  --full-surface-hover:
    #f5f5f5;

  --full-line:
    var(
      --color-line,
      #e7e7e7
    );

  --full-line-strong:
    var(
      --color-line-strong,
      #d6d6d6
    );

  --full-text:
    var(
      --color-text,
      #171717
    );

  --full-muted:
    var(
      --color-muted,
      #737373
    );

  --full-muted-soft:
    #a3a3a3;

  --full-black:
    #111111;

  --full-white:
    #ffffff;

  --full-success:
    #16734a;

  --full-success-strong:
    #0f5e3c;

  --full-success-bg:
    #eff8f3;

  --full-success-line:
    #cee7d8;

  --full-warning:
    #946200;

  --full-warning-strong:
    #725000;

  --full-warning-bg:
    #fff8e8;

  --full-warning-line:
    #ead7a8;

  --full-danger:
    #b42318;

  --full-danger-bg:
    #fff2f1;

  --full-danger-line:
    #edc8c5;

  --full-info:
    #245ea8;

  --full-info-bg:
    #eff5fc;

  --full-info-line:
    #cfdef1;

  --full-radius:
    12px;

  --full-radius-small:
    9px;

  --full-shadow:
    0
    1px
    2px
    rgba(
      0,
      0,
      0,
      0.03
    );
}


/* =========================================================
   03. SCROLL
   ========================================================= */


.full-pedidos-page,
.full-pedidos-page * {
  scrollbar-width: thin;

  scrollbar-color:
    var(
      --full-line-strong
    )
    transparent;
}


.full-pedidos-page *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}


.full-pedidos-page *::-webkit-scrollbar-track {
  background:
    transparent;
}


.full-pedidos-page *::-webkit-scrollbar-thumb {
  border:
    2px
    solid
    transparent;

  border-radius:
    999px;

  background:
    var(
      --full-line-strong
    );

  background-clip:
    padding-box;
}


/* =========================================================
   04. HEADER
   ========================================================= */


.full-pedidos-head {
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  padding:
    0
    1px;
}


.full-pedidos-head--compact {
  min-height: 72px;
}


.full-pedidos-brand {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 13px;
}


.full-pedidos-brand__icon {
  width: 43px;
  height: 43px;

  flex: 0 0 43px;

  display: grid;
  place-items: center;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    10px;

  background:
    var(
      --full-surface
    );

  color:
    var(
      --full-text
    );

  box-shadow:
    var(
      --full-shadow
    );
}


.full-pedidos-brand__icon .icon {
  width: 21px;
  height: 21px;
}


.full-pedidos-brand__body {
  min-width: 0;
}


.full-pedidos-brand__body > span {
  display: block;

  margin-bottom:
    5px;

  color:
    var(
      --full-muted
    );

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

  line-height: 1;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.full-pedidos-brand__body h2 {
  margin: 0;

  color:
    var(
      --full-text
    );

  font-size:
    clamp(
      27px,
      2.1vw,
      34px
    );

  font-weight: 800;

  line-height: 1;

  letter-spacing: -0.045em;
}


.full-pedidos-brand__body p {
  max-width: 760px;

  margin:
    7px
    0
    0;

  color:
    var(
      --full-muted
    );

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

  line-height: 1.4;
}


.full-pedidos-head__actions {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  gap: 8px;
}


/* =========================================================
   05. HEADER STATS
   ========================================================= */


.full-pedidos-head-stat {
  min-width: 82px;
  min-height: 43px;

  padding:
    7px
    11px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 3px;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    9px;

  background:
    var(
      --full-surface
    );

  box-shadow:
    var(
      --full-shadow
    );
}


.full-pedidos-head-stat span {
  color:
    var(
      --full-muted
    );

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

  line-height: 1;

  text-transform: uppercase;

  letter-spacing: 0.05em;
}


.full-pedidos-head-stat strong {
  color:
    var(
      --full-text
    );

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

  line-height: 1;
}


/* =========================================================
   06. BOTONES
   ========================================================= */


.full-pedidos-btn {
  min-width: 0;
  min-height: 39px;

  padding:
    0
    13px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    8px;

  outline: none;

  background:
    var(
      --full-surface
    );

  color:
    var(
      --full-text
    );

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

  line-height: 1;

  white-space: nowrap;

  text-decoration: none;

  cursor: pointer;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    opacity 140ms ease,
    transform 140ms ease;
}


.full-pedidos-btn:hover:not(:disabled) {
  border-color:
    var(
      --full-line-strong
    );

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


.full-pedidos-btn:active:not(:disabled) {
  transform:
    translateY(
      1px
    );
}


.full-pedidos-btn:focus-visible {
  outline:
    2px
    solid
    var(
      --full-text
    );

  outline-offset:
    2px;
}


.full-pedidos-btn:disabled,
.full-pedidos-btn.is-disabled {
  opacity: 0.42;

  pointer-events: none;

  cursor: not-allowed;
}


.full-pedidos-btn--primary {
  border-color:
    var(
      --full-black
    );

  background:
    var(
      --full-black
    );

  color:
    var(
      --full-white
    );
}


.full-pedidos-btn--primary:hover:not(:disabled) {
  border-color:
    #000000;

  background:
    #000000;

  color:
    #ffffff;
}


.full-pedidos-btn--warning {
  border-color:
    var(
      --full-warning
    );

  background:
    var(
      --full-warning
    );

  color:
    #ffffff;
}


.full-pedidos-btn--warning:hover:not(:disabled) {
  border-color:
    var(
      --full-warning-strong
    );

  background:
    var(
      --full-warning-strong
    );

  color:
    #ffffff;
}


.full-pedidos-btn--danger {
  border-color:
    var(
      --full-danger-line
    );

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

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


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

  background:
    var(
      --full-danger
    );

  color:
    #ffffff;
}


.full-pedidos-btn--view {
  min-height: 34px;

  padding:
    0
    11px;
}


/* =========================================================
   07. BOTÓN ICONO
   ========================================================= */


.full-pedidos-icon-btn {
  width: 35px;
  height: 35px;

  flex: 0 0 35px;

  padding: 0;

  display: inline-grid;
  place-items: center;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    8px;

  background:
    var(
      --full-surface
    );

  color:
    var(
      --full-text
    );

  cursor: pointer;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    opacity 140ms ease,
    transform 140ms ease;
}


.full-pedidos-icon-btn:hover:not(:disabled) {
  border-color:
    var(
      --full-line-strong
    );

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


.full-pedidos-icon-btn:active:not(:disabled) {
  transform:
    translateY(
      1px
    );
}


.full-pedidos-icon-btn.is-danger {
  color:
    var(
      --full-danger
    );
}


.full-pedidos-icon-btn.is-danger:hover:not(:disabled) {
  border-color:
    var(
      --full-danger-line
    );

  background:
    var(
      --full-danger-bg
    );
}


.full-pedidos-icon-btn:disabled {
  opacity: 0.35;

  pointer-events: none;

  cursor: not-allowed;
}


/* =========================================================
   08. SPINNER
   ========================================================= */


@keyframes full-pedidos-spin {
  to {
    transform:
      rotate(
        360deg
      );
  }
}


.full-pedidos-spin {
  animation:
    full-pedidos-spin
    0.75s
    linear
    infinite;
}


/* =========================================================
   09. MÉTRICAS
   ========================================================= */


.full-pedidos-metrics {
  width: 100%;
  min-width: 0;
}


.full-pedidos-metrics-strip {
  width: 100%;
  min-width: 0;

  display: grid;

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

  gap: 8px;
}


.full-pedidos-metric {
  min-width: 0;

  display: flex;

  border:
    1px
    solid
    var(
      --full-line
    );

  background:
    var(
      --full-surface
    );

  box-shadow:
    var(
      --full-shadow
    );
}


.full-pedidos-metric--compact {
  min-height: 80px;

  padding:
    12px;

  align-items: center;

  gap: 10px;

  border-radius:
    10px;
}


.full-pedidos-metric__icon {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: grid;
  place-items: center;

  border-radius:
    8px;

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

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


.full-pedidos-metric__icon .icon {
  width: 17px;
  height: 17px;
}


.full-pedidos-metric__body {
  min-width: 0;

  display: flex;
  flex-direction: column;
}


.full-pedidos-metric__body small {
  overflow: hidden;

  color:
    var(
      --full-muted
    );

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

  line-height: 1;

  letter-spacing: 0.045em;

  text-transform: uppercase;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.full-pedidos-metric__body strong {
  margin-top:
    5px;

  color:
    var(
      --full-text
    );

  font-size:
    clamp(
      21px,
      1.7vw,
      27px
    );

  font-weight: 800;

  line-height: 0.95;

  letter-spacing: -0.035em;
}


.full-pedidos-metric__body > span {
  margin-top:
    5px;

  overflow: hidden;

  color:
    var(
      --full-muted
    );

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

  line-height: 1.2;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.full-pedidos-metric.is-success
.full-pedidos-metric__icon {
  background:
    var(
      --full-success-bg
    );

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


.full-pedidos-metric.is-progress
.full-pedidos-metric__icon {
  background:
    var(
      --full-info-bg
    );

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


.full-pedidos-metric.is-warning
.full-pedidos-metric__icon {
  background:
    var(
      --full-warning-bg
    );

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


.full-pedidos-metric.is-pending
.full-pedidos-metric__icon {
  background:
    var(
      --full-surface-soft
    );

  color:
    var(
      --full-text
    );
}


/* =========================================================
   10. CREACIÓN · LAYOUT
   ========================================================= */


.full-pedidos-create-layout {
  width: 100%;
  min-width: 0;

  display: grid;
}


.full-pedidos-create-layout--new {
  grid-template-columns:
    minmax(
      390px,
      0.78fr
    )
    minmax(
      0,
      1.22fr
    );

  gap: 14px;

  align-items: stretch;
}


.full-pedidos-upload-mount,
.full-pedidos-preview-mount {
  width: 100%;
  min-width: 0;

  display: flex;
}


.full-pedidos-upload-mount > *,
.full-pedidos-preview-mount > * {
  width: 100%;
}


/* =========================================================
   11. PANEL HEAD
   ========================================================= */


.full-pedidos-panel-head {
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

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


.full-pedidos-panel-head--compact {
  min-height: 63px;

  padding:
    12px
    15px;
}


.full-pedidos-panel-head > div {
  min-width: 0;
}


.full-pedidos-panel-head > div > span {
  display: block;

  color:
    var(
      --full-muted
    );

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

  line-height: 1;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.full-pedidos-panel-head > div > strong {
  display: block;

  margin-top:
    4px;

  color:
    var(
      --full-text
    );

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

  line-height: 1.2;
}


.full-pedidos-panel-head > div > small {
  display: block;

  margin-top:
    4px;

  color:
    var(
      --full-muted
    );

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

  line-height: 1.35;
}


.full-pedidos-panel-badge {
  min-height: 26px;

  flex: 0 0 auto;

  padding:
    0
    9px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    999px;

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

  color:
    var(
      --full-muted
    );

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

  line-height: 1;
}


.full-pedidos-panel-badge.is-success {
  border-color:
    var(
      --full-success-line
    );

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

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


.full-pedidos-panel-badge.is-warning {
  border-color:
    var(
      --full-warning-line
    );

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

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


/* =========================================================
   12. PANEL DE CARGA
   ========================================================= */


.full-pedidos-upload-card {
  width: 100%;
  min-width: 0;

  overflow: hidden;

  border:
    1px
    solid
    var(
      --full-line
    );

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

  background:
    var(
      --full-surface
    );

  box-shadow:
    var(
      --full-shadow
    );
}


.full-pedidos-upload-card--new {
  height: 100%;
}


.full-pedidos-upload-body {
  min-width: 0;

  display: flex;
  flex-direction: column;
}


.full-pedidos-upload-body--new {
  padding:
    14px;

  gap: 13px;
}


/* =========================================================
   13. ARCHIVOS
   ========================================================= */


.full-pedidos-files-grid {
  width: 100%;
  min-width: 0;

  display: grid;
}


.full-pedidos-files-grid--compact {
  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap: 8px;
}


.full-pedidos-file-card {
  position: relative;

  min-width: 0;

  overflow: hidden;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    9px;

  background:
    var(
      --full-surface
    );

  transition:
    background-color 140ms ease,
    border-color 140ms ease;
}


.full-pedidos-file-card--compact {
  min-height: 89px;
}


.full-pedidos-file-card:hover {
  border-color:
    var(
      --full-line-strong
    );

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


.full-pedidos-file-card.has-file {
  border-color:
    var(
      --full-success-line
    );

  background:
    var(
      --full-success-bg
    );
}


.full-pedidos-file-card__select {
  width: 100%;
  min-width: 0;

  min-height: 89px;

  padding:
    11px;

  display: grid;

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

  align-items: center;

  gap: 9px;

  cursor: pointer;
}


.full-pedidos-file-card__select input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}


.full-pedidos-file-card__icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius:
    8px;

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

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


.full-pedidos-file-card__icon .icon {
  width: 17px;
  height: 17px;
}


.full-pedidos-file-card.has-file
.full-pedidos-file-card__icon {
  background:
    var(
      --full-surface
    );

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


.full-pedidos-file-card__body {
  min-width: 0;

  display: flex;
  flex-direction: column;
}


.full-pedidos-file-card__body small {
  color:
    var(
      --full-muted
    );

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

  line-height: 1.2;

  letter-spacing: 0.055em;
}


.full-pedidos-file-card__body strong {
  margin-top:
    4px;

  overflow: hidden;

  color:
    var(
      --full-text
    );

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

  line-height: 1.2;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.full-pedidos-file-card__body > span {
  margin-top:
    4px;

  display: -webkit-box;

  overflow: hidden;

  color:
    var(
      --full-muted
    );

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

  line-height: 1.3;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


.full-pedidos-file-card__action {
  align-self: center;

  color:
    var(
      --full-muted
    );

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

  white-space: nowrap;
}


.full-pedidos-file-card.has-file
.full-pedidos-file-card__action {
  color:
    var(
      --full-success
    );
}


.full-pedidos-file-card__remove {
  position: absolute;

  top: 5px;
  right: 5px;

  z-index: 2;

  width: 23px;
  height: 23px;

  padding: 0;

  display: grid;
  place-items: center;

  border:
    1px
    solid
    var(
      --full-success-line
    );

  border-radius:
    6px;

  background:
    var(
      --full-surface
    );

  color:
    var(
      --full-muted
    );

  cursor: pointer;
}


.full-pedidos-file-card__remove:hover {
  border-color:
    var(
      --full-danger-line
    );

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

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


.full-pedidos-file-card__remove .icon {
  width: 13px;
  height: 13px;
}


/* =========================================================
   14. CAMPOS
   ========================================================= */


.full-pedidos-upload-fields {
  width: 100%;
  min-width: 0;

  display: grid;
}


.full-pedidos-upload-fields--compact {
  grid-template-columns:
    minmax(
      165px,
      0.72fr
    )
    minmax(
      0,
      1.28fr
    );

  gap: 9px;
}


.full-pedidos-field {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 6px;
}


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

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

  line-height: 1.1;

  letter-spacing: 0.035em;

  text-transform: uppercase;
}


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

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    8px;

  outline: none;

  background:
    var(
      --full-surface
    );

  color:
    var(
      --full-text
    );

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

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}


.full-pedidos-field input,
.full-pedidos-field select {
  min-height: 39px;

  padding:
    0
    11px;
}


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

  padding:
    9px
    11px;

  line-height: 1.4;

  resize: vertical;
}


.full-pedidos-field input::placeholder,
.full-pedidos-field textarea::placeholder {
  color:
    var(
      --full-muted-soft
    );
}


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

  box-shadow:
    0
    0
    0
    2px
    rgba(
      17,
      17,
      17,
      0.05
    );
}


.full-pedidos-field select {
  cursor: pointer;
}


/* =========================================================
   15. INPUT ICONO
   ========================================================= */


.full-pedidos-input-icon {
  position: relative;

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


.full-pedidos-input-icon > .icon {
  position: absolute;

  top: 50%;
  left: 11px;

  width: 15px;
  height: 15px;

  color:
    var(
      --full-muted
    );

  pointer-events: none;

  transform:
    translateY(
      -50%
    );
}


.full-pedidos-input-icon input {
  padding-left:
    35px;
}


/* =========================================================
   16. ESTADO CREACIÓN
   ========================================================= */


.full-pedidos-create-status {
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: center;

  border:
    1px
    solid
    var(
      --full-line
    );

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

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


.full-pedidos-create-status--compact {
  min-height: 42px;

  padding:
    9px
    11px;

  gap: 8px;

  border-radius:
    8px;
}


.full-pedidos-create-status > .icon {
  width: 16px;
  height: 16px;

  flex: 0 0 16px;
}


.full-pedidos-create-status > span {
  min-width: 0;

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

  line-height: 1.4;
}


.full-pedidos-create-status.is-info {
  border-color:
    var(
      --full-info-line
    );

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

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


.full-pedidos-create-status.is-success {
  border-color:
    var(
      --full-success-line
    );

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

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


.full-pedidos-create-status.is-warning {
  border-color:
    var(
      --full-warning-line
    );

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

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


/* =========================================================
   17. ACCIONES CARGA
   ========================================================= */


.full-pedidos-upload-actions {
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
}


.full-pedidos-upload-actions--compact {
  padding-top:
    1px;
}


.full-pedidos-upload-actions > div {
  display: flex;
  align-items: center;

  gap: 7px;
}


/* =========================================================
   18. PREVIEW VACÍO
   ========================================================= */


.full-pedidos-preview-empty {
  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  border:
    1px
    dashed
    var(
      --full-line-strong
    );

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


.full-pedidos-preview-empty--new {
  min-height: 100%;

  padding:
    28px
    24px;

  border-radius:
    var(
      --full-radius
    );
}


.full-pedidos-preview-empty__icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    11px;

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

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


.full-pedidos-preview-empty__icon .icon {
  width: 22px;
  height: 22px;
}


.full-pedidos-preview-empty__body {
  max-width: 430px;

  margin-top:
    14px;
}


.full-pedidos-preview-empty__body small {
  display: block;

  color:
    var(
      --full-muted
    );

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

  line-height: 1;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.full-pedidos-preview-empty__body strong {
  display: block;

  margin-top:
    6px;

  color:
    var(
      --full-text
    );

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


.full-pedidos-preview-empty__body p {
  margin:
    7px
    0
    0;

  color:
    var(
      --full-muted
    );

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

  line-height: 1.5;
}


.full-pedidos-preview-empty__steps {
  width: 100%;
  max-width: 360px;

  margin-top:
    20px;

  display: grid;

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

  gap: 6px;
}


.full-pedidos-preview-empty__steps > span {
  min-height: 50px;

  padding:
    8px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    8px;

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

  color:
    var(
      --full-muted
    );

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


.full-pedidos-preview-empty__steps b {
  width: 21px;
  height: 21px;

  flex: 0 0 21px;

  display: grid;
  place-items: center;

  border-radius:
    50%;

  background:
    var(
      --full-black
    );

  color:
    var(
      --full-white
    );

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


/* =========================================================
   19. PREVIEW CARD
   ========================================================= */


.full-pedidos-preview-card {
  width: 100%;
  min-width: 0;

  overflow: hidden;

  border:
    1px
    solid
    var(
      --full-line
    );

  background:
    var(
      --full-surface
    );

  box-shadow:
    var(
      --full-shadow
    );
}


.full-pedidos-preview-card--new {
  height: 100%;

  border-radius:
    var(
      --full-radius
    );
}


.full-pedidos-preview-card.is-valid {
  border-color:
    var(
      --full-success-line
    );
}


.full-pedidos-preview-card.has-differences {
  border-color:
    var(
      --full-warning-line
    );
}


/* =========================================================
   20. PREVIEW HEAD EDITABLE
   ========================================================= */


.full-pedidos-preview-head {
  align-items: center;
}


.full-pedidos-preview-head__actions {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  gap: 8px;
}


.full-pedidos-preview-head__actions
.full-pedidos-btn {
  min-height: 34px;

  padding:
    0
    10px;

  font-size: 10px;
}


/* =========================================================
   21. PREVIEW STATUS
   ========================================================= */


.full-pedidos-preview-status {
  min-height: 27px;

  padding:
    0
    9px;

  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;

  gap: 5px;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    999px;

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

  color:
    var(
      --full-muted
    );

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

  white-space: nowrap;
}


.full-pedidos-preview-status .icon {
  width: 13px;
  height: 13px;
}


.full-pedidos-preview-status.is-success {
  border-color:
    var(
      --full-success-line
    );

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

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


.full-pedidos-preview-status.is-warning {
  border-color:
    var(
      --full-warning-line
    );

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

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


/* =========================================================
   22. PREVIEW RESUMEN
   ========================================================= */


.full-pedidos-preview-summary {
  width: auto;

  display: grid;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    9px;

  overflow: hidden;
}


.full-pedidos-preview-summary--compact {
  margin:
    12px
    13px
    0;

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


.full-pedidos-preview-summary--stock {
  grid-template-columns:
    repeat(
      6,
      minmax(
        0,
        1fr
      )
    );
}


.full-pedidos-preview-summary article {
  min-width: 0;
  min-height: 60px;

  padding:
    9px
    10px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 4px;

  border-right:
    1px
    solid
    var(
      --full-line
    );

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


.full-pedidos-preview-summary article:last-child {
  border-right: 0;
}


.full-pedidos-preview-summary article span {
  overflow: hidden;

  color:
    var(
      --full-muted
    );

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

  line-height: 1;

  text-transform: uppercase;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.full-pedidos-preview-summary article strong {
  overflow: hidden;

  color:
    var(
      --full-text
    );

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

  line-height: 1.1;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.full-pedidos-preview-summary article.is-success {
  background:
    var(
      --full-success-bg
    );
}


.full-pedidos-preview-summary article.is-success strong {
  color:
    var(
      --full-success
    );
}


.full-pedidos-preview-summary article.is-warning {
  background:
    var(
      --full-warning-bg
    );
}


.full-pedidos-preview-summary article.is-warning strong {
  color:
    var(
      --full-warning
    );
}


/* =========================================================
   23. ALERTAS
   ========================================================= */


.full-pedidos-preview-alert {
  margin:
    12px
    13px
    0;

  padding:
    10px
    11px;

  display: flex;
  align-items: flex-start;

  gap: 9px;

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

  border-radius:
    8px;

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

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


.full-pedidos-preview-alert > span:first-child {
  width: 28px;
  height: 28px;

  flex: 0 0 28px;

  display: grid;
  place-items: center;

  border-radius:
    7px;

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


.full-pedidos-preview-alert > span:first-child .icon {
  width: 15px;
  height: 15px;
}


.full-pedidos-preview-alert > div {
  min-width: 0;
}


.full-pedidos-preview-alert strong {
  display: block;

  color: inherit;

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

  line-height: 1.25;
}


.full-pedidos-preview-alert p {
  margin:
    3px
    0
    0;

  color: inherit;

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

  line-height: 1.45;
}


.full-pedidos-preview-alert.is-success {
  border-color:
    var(
      --full-success-line
    );

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

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


/* =========================================================
   24. PREVIEW TABLE
   ========================================================= */


.full-pedidos-preview-table {
  width: auto;
  min-width: 0;

  overflow: auto;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    9px;

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


.full-pedidos-preview-table--compact {
  max-height: 395px;

  margin:
    12px
    13px
    13px;
}


/* =========================================================
   25. FILA PREVIEW GENERAL
   ========================================================= */


.full-pedidos-preview-row {
  min-width: 720px;

  display: grid;

  align-items: center;

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


.full-pedidos-preview-row:last-child {
  border-bottom: 0;
}


.full-pedidos-preview-row > * {
  min-width: 0;

  padding:
    9px;

  overflow: hidden;

  color:
    var(
      --full-text
    );

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

  line-height: 1.25;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.full-pedidos-preview-row--head {
  position: sticky;

  top: 0;

  z-index: 3;

  min-height: 38px;

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


.full-pedidos-preview-row--head > span {
  color:
    var(
      --full-muted
    );

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

  letter-spacing: 0.045em;

  text-transform: uppercase;
}


.full-pedidos-preview-row.is-not-found {
  background:
    var(
      --full-warning-bg
    );
}


.full-pedidos-preview-row.is-found:hover {
  background:
    var(
      --full-surface-soft
    );
}


/* =========================================================
   26. FILA BORRADOR EDITABLE
   ========================================================= */


.full-pedidos-preview-table--draft {
  width:
    calc(
      100% -
      26px
    );
}


.full-pedidos-preview-row--draft {
  min-width: 1030px;

  grid-template-columns:
    minmax(
      115px,
      0.85fr
    )
    minmax(
      220px,
      1.7fr
    )
    minmax(
      120px,
      0.9fr
    )
    minmax(
      88px,
      0.65fr
    )
    minmax(
      80px,
      0.58fr
    )
    minmax(
      72px,
      0.52fr
    )
    minmax(
      130px,
      0.9fr
    )
    minmax(
      80px,
      0.56fr
    );
}


.full-pedidos-preview-row--draft:not(
  .full-pedidos-preview-row--head
) {
  min-height: 64px;
}


.full-pedidos-preview-row--draft.is-stock-ok {
  background:
    var(
      --full-surface
    );
}


.full-pedidos-preview-row--draft.is-stock-ok:hover {
  background:
    var(
      --full-success-bg
    );
}


.full-pedidos-preview-row--draft.is-stock-warning {
  background:
    var(
      --full-warning-bg
    );
}


.full-pedidos-preview-row--draft.is-stock-warning:hover {
  background:
    #fff3d4;
}


/* =========================================================
   27. PRODUCTO BORRADOR
   ========================================================= */


.full-pedidos-draft-product {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;

  white-space: normal;
}


.full-pedidos-draft-product > strong {
  overflow: hidden;

  color:
    var(
      --full-text
    );

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

  line-height: 1.25;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.full-pedidos-draft-product > small {
  overflow: hidden;

  color:
    var(
      --full-muted
    );

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

  line-height: 1.25;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   28. KIT
   ========================================================= */


.full-pedidos-draft-kit {
  min-height: 18px;

  margin-left:
    5px;

  padding:
    0
    5px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  vertical-align: middle;

  border:
    1px
    solid
    var(
      --full-info-line
    );

  border-radius:
    999px;

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

  color:
    var(
      --full-info
    );

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

  line-height: 1;

  letter-spacing: 0.04em;
}


/* =========================================================
   29. CANTIDAD BORRADOR
   ========================================================= */


.full-pedidos-draft-quantity {
  min-width: 0;

  padding:
    6px
    !important;

  display: grid;

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

  align-items: center;

  gap: 4px;
}


.full-pedidos-draft-quantity__btn {
  width: 30px;
  height: 30px;

  padding: 0;

  display: grid;
  place-items: center;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    7px;

  background:
    var(
      --full-surface
    );

  color:
    var(
      --full-text
    );

  cursor: pointer;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    opacity 140ms ease;
}


.full-pedidos-draft-quantity__btn:hover:not(:disabled) {
  border-color:
    var(
      --full-line-strong
    );

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


.full-pedidos-draft-quantity__btn:disabled {
  opacity: 0.35;

  cursor: not-allowed;
}


.full-pedidos-draft-quantity__btn .icon {
  width: 13px;
  height: 13px;
}


.full-pedidos-draft-quantity input {
  width: 100%;
  min-width: 0;
  height: 30px;

  padding:
    0
    5px;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    7px;

  outline: none;

  background:
    var(
      --full-surface
    );

  color:
    var(
      --full-text
    );

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

  text-align: center;
}


.full-pedidos-draft-quantity input:focus {
  border-color:
    var(
      --full-text
    );
}


.full-pedidos-draft-quantity input::-webkit-outer-spin-button,
.full-pedidos-draft-quantity input::-webkit-inner-spin-button {
  margin: 0;

  -webkit-appearance: none;
}


.full-pedidos-draft-quantity input[type="number"] {
  -moz-appearance: textfield;
}


/* =========================================================
   30. STOCK BORRADOR
   ========================================================= */


.full-pedidos-draft-stock,
.full-pedidos-draft-missing,
.full-pedidos-draft-full {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.full-pedidos-draft-stock strong,
.full-pedidos-draft-missing strong,
.full-pedidos-draft-full strong {
  color:
    var(
      --full-text
    );

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

  line-height: 1;
}


.full-pedidos-draft-stock small,
.full-pedidos-draft-missing small,
.full-pedidos-draft-full small {
  color:
    var(
      --full-muted
    );

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

  line-height: 1.1;

  text-transform: uppercase;
}


.full-pedidos-draft-stock.is-success strong,
.full-pedidos-draft-missing.is-success strong,
.is-stock-success {
  color:
    var(
      --full-success
    );
}


.full-pedidos-draft-stock.is-warning strong,
.full-pedidos-draft-missing.is-warning strong,
.is-stock-warning {
  color:
    var(
      --full-warning
    );
}


/* =========================================================
   31. ACCIONES BORRADOR
   ========================================================= */


.full-pedidos-draft-actions {
  min-width: 0;

  padding:
    5px
    7px
    !important;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 5px;
}


.full-pedidos-draft-actions
.full-pedidos-icon-btn {
  width: 31px;
  height: 31px;

  flex-basis:
    31px;

  border-radius:
    7px;
}


.full-pedidos-draft-actions
.full-pedidos-icon-btn
.icon {
  width: 14px;
  height: 14px;
}


/* =========================================================
   32. ESTADOS
   ========================================================= */


.full-pedidos-status {
  width: fit-content;
  max-width: 100%;

  min-height: 24px;

  padding:
    0
    8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 4px;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    999px;

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

  color:
    var(
      --full-muted
    );

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

  line-height: 1;

  white-space: nowrap;
}


.full-pedidos-status .icon {
  width: 11px;
  height: 11px;
}


.full-pedidos-status.is-complete {
  border-color:
    var(
      --full-success-line
    );

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

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


.full-pedidos-status.is-progress {
  border-color:
    var(
      --full-info-line
    );

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

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


.full-pedidos-status.is-warning {
  border-color:
    var(
      --full-warning-line
    );

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

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


.full-pedidos-status.is-cancelled {
  border-color:
    var(
      --full-danger-line
    );

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

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


.full-pedidos-status.is-pending {
  border-color:
    var(
      --full-line
    );

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

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


/* =========================================================
   33. INFO BORRADOR EN MODAL
   ========================================================= */


.full-pedidos-draft-modal-info {
  width: 100%;

  margin-bottom:
    12px;

  padding:
    9px
    10px;

  display: flex;
  align-items: center;

  gap: 8px;

  border:
    1px
    solid
    var(
      --full-info-line
    );

  border-radius:
    8px;

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

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


.full-pedidos-draft-modal-info .icon {
  width: 15px;
  height: 15px;

  flex: 0 0 15px;
}


.full-pedidos-draft-modal-info span {
  min-width: 0;

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

  line-height: 1.4;
}


/* =========================================================
   34. RESUMEN ELIMINAR BORRADOR
   ========================================================= */


.full-pedidos-draft-delete-summary {
  width: 100%;

  margin-top:
    12px;

  display: grid;

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

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    9px;

  overflow: hidden;
}


.full-pedidos-draft-delete-summary article {
  min-width: 0;

  padding:
    10px
    11px;

  display: flex;
  flex-direction: column;

  gap: 4px;

  border-right:
    1px
    solid
    var(
      --full-line
    );
}


.full-pedidos-draft-delete-summary article:last-child {
  border-right: 0;
}


.full-pedidos-draft-delete-summary small {
  color:
    var(
      --full-muted
    );

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

  letter-spacing: 0.05em;
}


.full-pedidos-draft-delete-summary strong {
  overflow: hidden;

  color:
    var(
      --full-text
    );

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

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   FIN PARTE 1 DE 3

   PARTE 2 CONTINÚA CON:
   - Gestión de pedidos
   - Filtros
   - Tabla
   - Paginación
   - Modal detalle
   - Productos del pedido
   - Stock en detalle
   - Documentación
   - Movimientos
   ========================================================= *//* =========================================================
   WIRTZ HUB · RECURSOS · PEDIDOS FULL

   CSS · PARTE 2 DE 3

   CONTIENE:
   - Gestión de pedidos
   - Filtros
   - Tabla historial
   - Progreso
   - Paginación
   - Modal detalle
   - Tabs
   - Resumen detalle
   - Productos del pedido
   - Stock en detalle
   - Documentación
   - Movimientos
   ========================================================= */


/* =========================================================
   35. GESTIÓN DE PEDIDOS
   ========================================================= */


.full-pedidos-management {
  width: 100%;
  min-width: 0;
}


.full-pedidos-list-card {
  width: 100%;
  min-width: 0;

  overflow: hidden;

  border:
    1px
    solid
    var(
      --full-line
    );

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

  background:
    var(
      --full-surface
    );

  box-shadow:
    var(
      --full-shadow
    );
}


.full-pedidos-list-card--wide {
  width: 100%;
}


.full-pedidos-panel-head--management {
  min-height: 64px;

  padding:
    13px
    15px;
}


/* =========================================================
   36. FILTROS
   ========================================================= */


.full-pedidos-filters-mount {
  width: 100%;
  min-width: 0;
}


.full-pedidos-filters {
  width: 100%;
  min-width: 0;

  display: grid;

  border-bottom:
    1px
    solid
    var(
      --full-line
    );

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


.full-pedidos-filters--toolbar {
  grid-template-columns:
    minmax(
      230px,
      1.65fr
    )
    minmax(
      140px,
      0.72fr
    )
    minmax(
      140px,
      0.68fr
    )
    minmax(
      140px,
      0.68fr
    )
    auto;

  align-items: end;

  gap: 8px;

  padding:
    11px
    14px;
}


.full-pedidos-field--search {
  min-width: 0;
}


.full-pedidos-filters__actions {
  display: flex;
  align-items: center;

  gap: 6px;
}


.full-pedidos-filters__actions
.full-pedidos-btn {
  min-height: 39px;
}


/* =========================================================
   37. LISTADO
   ========================================================= */


.full-pedidos-list-mount {
  width: 100%;
  min-width: 0;
}


.full-pedidos-table {
  width: 100%;
  min-width: 0;

  overflow-x: auto;

  overflow-y: hidden;
}


.full-pedidos-table--wide {
  width: 100%;
}


.full-pedidos-table__row {
  min-width: 1060px;

  display: grid;

  grid-template-columns:
    minmax(
      180px,
      1.35fr
    )
    minmax(
      110px,
      0.75fr
    )
    minmax(
      125px,
      0.82fr
    )
    minmax(
      78px,
      0.48fr
    )
    minmax(
      78px,
      0.48fr
    )
    minmax(
      160px,
      1fr
    )
    minmax(
      90px,
      0.58fr
    )
    minmax(
      130px,
      0.82fr
    )
    minmax(
      80px,
      0.48fr
    );

  align-items: center;

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


.full-pedidos-table__row:last-child {
  border-bottom: 0;
}


.full-pedidos-table__row > * {
  min-width: 0;

  padding:
    10px
    11px;
}


.full-pedidos-table__row--head {
  position: sticky;

  top: 0;

  z-index: 2;

  min-height: 38px;

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


.full-pedidos-table__row--head > span {
  color:
    var(
      --full-muted
    );

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

  line-height: 1;

  letter-spacing: 0.045em;

  text-transform: uppercase;
}


.full-pedidos-table__row--body {
  min-height: 58px;

  cursor: default;

  transition:
    background-color 130ms ease;
}


.full-pedidos-table__row--body:hover {
  background:
    var(
      --full-surface-soft
    );
}


.full-pedidos-table__row--body.is-selected {
  background:
    #f2f2f2;
}


.full-pedidos-table__row--body > span {
  overflow: hidden;

  color:
    var(
      --full-text
    );

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

  line-height: 1.3;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.full-pedidos-table__row--body > span:first-child {
  display: flex;
  flex-direction: column;

  gap: 3px;
}


.full-pedidos-table__row--body > span:first-child strong {
  overflow: hidden;

  color:
    var(
      --full-text
    );

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

  line-height: 1.2;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.full-pedidos-table__row--body > span:first-child small {
  overflow: hidden;

  color:
    var(
      --full-muted
    );

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

  line-height: 1.2;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   38. PROGRESO
   ========================================================= */


.full-pedidos-progress {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 7px;
}


.full-pedidos-progress__bar {
  position: relative;

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

  overflow: hidden;

  border-radius:
    999px;

  background:
    var(
      --full-line
    );
}


.full-pedidos-progress__bar > span {
  position: absolute;

  inset:
    0
    auto
    0
    0;

  display: block;

  border-radius:
    inherit;

  background:
    var(
      --full-black
    );
}


.full-pedidos-progress strong {
  flex: 0 0 auto;

  min-width: 30px;

  color:
    var(
      --full-text
    );

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

  text-align: right;
}


/* =========================================================
   39. CONTADOR DOCUMENTOS
   ========================================================= */


.full-pedidos-doc-count {
  display: inline-flex;
  align-items: center;

  gap: 4px;

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


.full-pedidos-doc-count .icon {
  width: 14px;
  height: 14px;
}


.full-pedidos-doc-count strong {
  color:
    var(
      --full-text
    );

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


.full-pedidos-doc-count small {
  color:
    var(
      --full-muted
    );

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


/* =========================================================
   40. PAGINACIÓN
   ========================================================= */


.full-pedidos-pagination {
  width: 100%;

  min-height: 54px;

  padding:
    9px
    14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  border-top:
    1px
    solid
    var(
      --full-line
    );

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


.full-pedidos-pagination > span {
  color:
    var(
      --full-muted
    );

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


.full-pedidos-pagination > span strong {
  color:
    var(
      --full-text
    );

  font-weight: 800;
}


.full-pedidos-pagination > div {
  display: flex;
  align-items: center;

  gap: 6px;
}


.full-pedidos-pagination
.full-pedidos-btn {
  min-height: 34px;

  padding:
    0
    10px;

  font-size: 10px;
}


/* =========================================================
   41. ESTADO VACÍO / LOADING
   ========================================================= */


.full-pedidos-state {
  width: 100%;
  min-height: 180px;

  padding:
    24px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 6px;

  text-align: center;

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


.full-pedidos-state--table {
  min-height: 200px;
}


.full-pedidos-state > .icon {
  width: 29px;
  height: 29px;

  margin-bottom:
    5px;

  color:
    var(
      --full-muted-soft
    );
}


.full-pedidos-state > strong {
  color:
    var(
      --full-text
    );

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


.full-pedidos-state > span {
  max-width: 420px;

  color:
    var(
      --full-muted
    );

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

  line-height: 1.45;
}


.full-pedidos-state
.full-pedidos-btn {
  margin-top:
    7px;
}


/* =========================================================
   42. MODAL DETALLE · DOCUMENTO
   ========================================================= */


html.full-pedidos-detail-modal-open,
html.full-pedidos-detail-modal-open body {
  overflow: hidden;
}


.full-pedidos-detail-modal {
  position: fixed;

  inset: 0;

  z-index: 9600;

  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}


.full-pedidos-detail-modal__backdrop {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  padding: 0;

  border: 0;

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

  cursor: default;
}


.full-pedidos-detail-modal__dialog {
  position: relative;

  z-index: 2;

  width:
    min(
      1120px,
      94vw
    );

  height: 100%;

  overflow: hidden;

  border-left:
    1px
    solid
    var(
      --full-line
    );

  background:
    var(
      --full-surface
    );

  box-shadow:
    -18px
    0
    42px
    rgba(
      0,
      0,
      0,
      0.12
    );
}


.full-pedidos-detail-mount {
  width: 100%;
  min-width: 0;
}


.full-pedidos-detail-mount--modal {
  height: 100%;
}


/* =========================================================
   43. DETALLE CARD
   ========================================================= */


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

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


.full-pedidos-detail-card--modal {
  height: 100%;

  display: flex;
  flex-direction: column;
}


/* =========================================================
   44. DETALLE HEAD
   ========================================================= */


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

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

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


.full-pedidos-detail-head--modal {
  min-height: 78px;

  padding:
    13px
    16px;
}


.full-pedidos-detail-head__identity {
  min-width: 0;
}


.full-pedidos-detail-head__identity > small {
  display: block;

  color:
    var(
      --full-muted
    );

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

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.full-pedidos-detail-head__identity h3 {
  margin:
    4px
    0
    7px;

  overflow: hidden;

  color:
    var(
      --full-text
    );

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

  line-height: 1;

  letter-spacing: -0.035em;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.full-pedidos-detail-head__identity > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 6px;
}


.full-pedidos-detail-head__identity > div > span:not(
  .full-pedidos-status
) {
  min-height: 24px;

  padding:
    0
    8px;

  display: inline-flex;
  align-items: center;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    999px;

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

  color:
    var(
      --full-muted
    );

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


.full-pedidos-detail-head__actions {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  gap: 7px;
}


.full-pedidos-detail-close {
  width: 38px;
  height: 38px;

  flex-basis:
    38px;
}


/* =========================================================
   45. DETALLE LOADING / EMPTY
   ========================================================= */


.full-pedidos-detail-loading,
.full-pedidos-detail-empty {
  width: 100%;
  height: 100%;
  min-height: 340px;

  padding:
    30px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 7px;

  text-align: center;
}


.full-pedidos-detail-loading .icon,
.full-pedidos-detail-empty > span {
  width: 42px;
  height: 42px;
}


.full-pedidos-detail-empty > span {
  display: grid;
  place-items: center;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    10px;

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

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


.full-pedidos-detail-empty > span .icon {
  width: 20px;
  height: 20px;
}


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

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


.full-pedidos-detail-loading span,
.full-pedidos-detail-empty p {
  margin: 0;

  max-width: 420px;

  color:
    var(
      --full-muted
    );

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

  line-height: 1.45;
}


/* =========================================================
   46. TABS DETALLE
   ========================================================= */


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

  min-height: 49px;

  padding:
    7px
    13px;

  display: flex;
  align-items: center;

  gap: 5px;

  overflow-x: auto;

  border-bottom:
    1px
    solid
    var(
      --full-line
    );

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


.full-pedidos-detail-tab {
  min-height: 34px;

  padding:
    0
    11px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  flex: 0 0 auto;

  border:
    1px
    solid
    transparent;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(
      --full-muted
    );

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

  cursor: pointer;
}


.full-pedidos-detail-tab .icon {
  width: 14px;
  height: 14px;
}


.full-pedidos-detail-tab:hover {
  background:
    var(
      --full-surface
    );

  color:
    var(
      --full-text
    );
}


.full-pedidos-detail-tab.is-active {
  border-color:
    var(
      --full-line
    );

  background:
    var(
      --full-surface
    );

  color:
    var(
      --full-text
    );

  box-shadow:
    var(
      --full-shadow
    );
}


/* =========================================================
   47. DETALLE BODY
   ========================================================= */


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

  overflow: auto;
}


.full-pedidos-detail-body--modal {
  flex: 1 1 auto;

  min-height: 0;

  padding:
    14px;
}


/* =========================================================
   48. RESUMEN DETALLE
   ========================================================= */


.full-pedidos-detail-summary {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 12px;
}


/* =========================================================
   49. HERO PROGRESO
   ========================================================= */


.full-pedidos-detail-hero {
  width: 100%;

  padding:
    14px;

  display: grid;

  grid-template-columns:
    minmax(
      210px,
      0.46fr
    )
    minmax(
      0,
      1.54fr
    );

  align-items: center;

  gap: 18px;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    10px;

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


.full-pedidos-detail-hero > div:first-child {
  display: flex;
  flex-direction: column;
}


.full-pedidos-detail-hero small {
  color:
    var(
      --full-muted
    );

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

  letter-spacing: 0.06em;
}


.full-pedidos-detail-hero strong {
  margin-top:
    4px;

  color:
    var(
      --full-text
    );

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

  line-height: 1;

  letter-spacing: -0.045em;
}


.full-pedidos-detail-hero > div:first-child > span {
  margin-top:
    5px;

  color:
    var(
      --full-muted
    );

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


.full-pedidos-detail-hero__bar > span {
  position: relative;

  width: 100%;
  height: 9px;

  display: block;

  overflow: hidden;

  border-radius:
    999px;

  background:
    var(
      --full-line
    );
}


.full-pedidos-detail-hero__bar b {
  position: absolute;

  inset:
    0
    auto
    0
    0;

  display: block;

  border-radius:
    inherit;

  background:
    var(
      --full-black
    );
}


/* =========================================================
   50. SUMMARY GRID
   ========================================================= */


.full-pedidos-detail-summary__grid {
  width: 100%;

  display: grid;

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

  overflow: hidden;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    10px;
}


.full-pedidos-detail-summary__grid article {
  min-width: 0;
  min-height: 66px;

  padding:
    10px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 5px;

  border-right:
    1px
    solid
    var(
      --full-line
    );

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


.full-pedidos-detail-summary__grid article:last-child {
  border-right: 0;
}


.full-pedidos-detail-summary__grid small {
  color:
    var(
      --full-muted
    );

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

  letter-spacing: 0.055em;
}


.full-pedidos-detail-summary__grid strong {
  overflow: hidden;

  color:
    var(
      --full-text
    );

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

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   51. DOCUMENT STATUS
   ========================================================= */


.full-pedidos-document-status {
  width: 100%;

  padding:
    11px
    12px;

  display: flex;
  align-items: flex-start;

  gap: 10px;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    10px;

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


.full-pedidos-document-status.is-success {
  border-color:
    var(
      --full-success-line
    );

  background:
    var(
      --full-success-bg
    );
}


.full-pedidos-document-status.is-warning {
  border-color:
    var(
      --full-warning-line
    );

  background:
    var(
      --full-warning-bg
    );
}


.full-pedidos-document-status__icon {
  width: 35px;
  height: 35px;

  flex: 0 0 35px;

  display: grid;
  place-items: center;

  border-radius:
    8px;

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


.full-pedidos-document-status__icon .icon {
  width: 17px;
  height: 17px;
}


.full-pedidos-document-status.is-success
.full-pedidos-document-status__icon {
  color:
    var(
      --full-success
    );
}


.full-pedidos-document-status.is-warning
.full-pedidos-document-status__icon {
  color:
    var(
      --full-warning
    );
}


.full-pedidos-document-status > div {
  min-width: 0;

  flex: 1 1 auto;
}


.full-pedidos-document-status small {
  display: block;

  color:
    var(
      --full-muted
    );

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

  letter-spacing: 0.055em;
}


.full-pedidos-document-status strong {
  display: block;

  margin-top:
    3px;

  color:
    var(
      --full-text
    );

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


.full-pedidos-document-status p {
  margin:
    3px
    0
    0;

  color:
    var(
      --full-muted
    );

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

  line-height: 1.4;
}


.full-pedidos-document-status
.full-pedidos-btn {
  margin-top:
    8px;

  min-height: 32px;

  font-size: 9px;
}


/* =========================================================
   52. DETALLE DATOS
   ========================================================= */


.full-pedidos-detail-data {
  width: 100%;

  display: grid;

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

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    10px;

  overflow: hidden;
}


.full-pedidos-detail-data article {
  min-width: 0;

  min-height: 67px;

  padding:
    10px
    11px;

  display: flex;
  flex-direction: column;

  gap: 5px;

  border-right:
    1px
    solid
    var(
      --full-line
    );

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


.full-pedidos-detail-data article:nth-child(
  4n
) {
  border-right: 0;
}


.full-pedidos-detail-data article.is-wide {
  grid-column:
    1 /
    -1;

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


.full-pedidos-detail-data small {
  color:
    var(
      --full-muted
    );

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

  letter-spacing: 0.055em;
}


.full-pedidos-detail-data strong {
  overflow: hidden;

  color:
    var(
      --full-text
    );

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

  line-height: 1.35;

  text-overflow: ellipsis;
}


/* =========================================================
   53. SECCIÓN DETALLE GENERAL
   ========================================================= */


.full-pedidos-detail-products,
.full-pedidos-detail-files,
.full-pedidos-detail-movements {
  width: 100%;
  min-width: 0;
}


.full-pedidos-detail-section-head {
  width: 100%;

  min-height: 50px;

  margin-bottom:
    10px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;
}


.full-pedidos-detail-section-head > div {
  min-width: 0;
}


.full-pedidos-detail-section-head > div > span {
  display: block;

  color:
    var(
      --full-muted
    );

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

  letter-spacing: 0.06em;
}


.full-pedidos-detail-section-head > div > strong {
  display: block;

  margin-top:
    4px;

  color:
    var(
      --full-text
    );

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


/* =========================================================
   54. PRODUCTOS DEL PEDIDO
   ========================================================= */


.full-pedidos-items-table {
  width: 100%;
  min-width: 0;

  overflow-x: auto;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    10px;

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


.full-pedidos-items-row {
  min-width: 1030px;

  display: grid;

  grid-template-columns:
    minmax(
      115px,
      0.85fr
    )
    minmax(
      210px,
      1.65fr
    )
    minmax(
      80px,
      0.52fr
    )
    minmax(
      90px,
      0.6fr
    )
    minmax(
      80px,
      0.52fr
    )
    minmax(
      82px,
      0.55fr
    )
    minmax(
      82px,
      0.55fr
    )
    minmax(
      125px,
      0.82fr
    )
    minmax(
      120px,
      0.75fr
    );

  align-items: center;

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


.full-pedidos-items-row:last-child {
  border-bottom: 0;
}


.full-pedidos-items-row > * {
  min-width: 0;

  padding:
    9px
    10px;

  overflow: hidden;

  color:
    var(
      --full-text
    );

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

  line-height: 1.3;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.full-pedidos-items-row--head {
  min-height: 37px;

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


.full-pedidos-items-row--head > span {
  color:
    var(
      --full-muted
    );

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

  letter-spacing: 0.045em;

  text-transform: uppercase;
}


.full-pedidos-items-row--stock:not(
  .full-pedidos-items-row--head
) {
  min-height: 59px;
}


.full-pedidos-items-row--stock.is-stock-ok:hover {
  background:
    var(
      --full-success-bg
    );
}


.full-pedidos-items-row--stock.is-stock-warning {
  background:
    var(
      --full-warning-bg
    );
}


.full-pedidos-items-row--stock.is-stock-warning:hover {
  background:
    #fff3d4;
}


/* =========================================================
   55. ACCIONES PRODUCTOS DETALLE
   ========================================================= */


.full-pedidos-items-actions {
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 5px;
}


.full-pedidos-items-actions
.full-pedidos-icon-btn {
  width: 31px;
  height: 31px;

  flex-basis:
    31px;

  border-radius:
    7px;
}


.full-pedidos-items-actions
.full-pedidos-icon-btn
.icon {
  width: 14px;
  height: 14px;
}


/* =========================================================
   56. DOCUMENTACIÓN GRID
   ========================================================= */


.full-pedidos-document-grid {
  width: 100%;

  display: grid;

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

  gap: 8px;
}


/* =========================================================
   57. DOCUMENT CARD
   ========================================================= */


.full-pedidos-document-card {
  min-width: 0;

  min-height: 104px;

  padding:
    11px;

  display: grid;

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

  align-items: center;

  gap: 10px;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    10px;

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


.full-pedidos-document-card.has-file {
  border-color:
    var(
      --full-success-line
    );
}


.full-pedidos-document-card.is-missing {
  border-style:
    dashed;
}


.full-pedidos-document-card__icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius:
    9px;

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

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


.full-pedidos-document-card.has-file
.full-pedidos-document-card__icon {
  background:
    var(
      --full-success-bg
    );

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


.full-pedidos-document-card__icon .icon {
  width: 18px;
  height: 18px;
}


.full-pedidos-document-card__body {
  min-width: 0;

  display: flex;
  flex-direction: column;
}


.full-pedidos-document-card__body small {
  overflow: hidden;

  color:
    var(
      --full-muted
    );

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

  line-height: 1.25;

  letter-spacing: 0.05em;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.full-pedidos-document-card__body strong {
  margin-top:
    4px;

  overflow: hidden;

  color:
    var(
      --full-text
    );

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

  line-height: 1.25;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.full-pedidos-document-card__body > span {
  margin-top:
    4px;

  overflow: hidden;

  color:
    var(
      --full-muted
    );

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

  line-height: 1.25;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.full-pedidos-document-card__body > small:last-child {
  margin-top:
    4px;

  color:
    var(
      --full-muted-soft
    );
}


.full-pedidos-document-card__actions {
  flex: 0 0 auto;

  display: flex;
  flex-direction: column;

  align-items: stretch;

  gap: 5px;
}


.full-pedidos-document-card__actions
.full-pedidos-btn {
  min-height: 31px;

  padding:
    0
    9px;

  font-size: 8px;
}


.full-pedidos-document-card__actions label {
  cursor: pointer;
}


.full-pedidos-document-card__actions label input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}


/* =========================================================
   58. MOVIMIENTOS
   ========================================================= */


.full-pedidos-movement-list {
  width: 100%;

  display: grid;

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

  gap: 7px;
}


.full-pedidos-movement-card {
  min-width: 0;

  min-height: 72px;

  padding:
    10px;

  display: flex;
  align-items: center;

  gap: 9px;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    9px;

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


.full-pedidos-movement-card__icon {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: grid;
  place-items: center;

  border-radius:
    8px;

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

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


.full-pedidos-movement-card__icon .icon {
  width: 16px;
  height: 16px;
}


.full-pedidos-movement-card > div {
  min-width: 0;

  display: flex;
  flex-direction: column;
}


.full-pedidos-movement-card strong {
  overflow: hidden;

  color:
    var(
      --full-text
    );

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

  line-height: 1.2;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.full-pedidos-movement-card span {
  margin-top:
    3px;

  overflow: hidden;

  color:
    var(
      --full-muted
    );

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

  text-overflow: ellipsis;

  white-space: nowrap;
}


.full-pedidos-movement-card small {
  margin-top:
    3px;

  overflow: hidden;

  color:
    var(
      --full-muted-soft
    );

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

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   59. RESUMEN STOCK MODAL CANTIDAD
   ========================================================= */


.full-pedidos-quantity-stock-summary {
  width: 100%;

  margin-bottom:
    12px;

  display: grid;

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

  overflow: hidden;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    9px;
}


.full-pedidos-quantity-stock-summary article {
  min-width: 0;

  min-height: 57px;

  padding:
    8px
    9px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 4px;

  border-right:
    1px
    solid
    var(
      --full-line
    );
}


.full-pedidos-quantity-stock-summary article:last-child {
  border-right: 0;
}


.full-pedidos-quantity-stock-summary small {
  color:
    var(
      --full-muted
    );

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

  letter-spacing: 0.045em;
}


.full-pedidos-quantity-stock-summary strong {
  color:
    var(
      --full-text
    );

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


/* =========================================================
   FIN PARTE 2 DE 3

   PARTE 3 CONTINÚA CON:
   - Modal general
   - Modal selector de productos
   - Resultados
   - Producto seleccionado
   - Toast
   - Dark mode
   - Responsive
   - Ajustes sin scroll horizontal
   ========================================================= *//* =========================================================
   WIRTZ HUB · RECURSOS · PEDIDOS FULL

   CSS · PARTE 3 DE 3

   CONTIENE:
   - Modal general
   - Selector de productos
   - Resultados de búsqueda
   - Producto seleccionado
   - Toast
   - Dark mode
   - Responsive
   - Ajustes móviles
   - Correcciones de overflow
   ========================================================= */


/* =========================================================
   60. MODAL GENERAL
   ========================================================= */


.full-pedidos-modal {
  position: fixed;

  inset: 0;

  z-index: 9800;

  display: none;

  align-items: center;
  justify-content: center;

  padding:
    18px;

  opacity: 0;

  pointer-events: none;
}


.full-pedidos-modal.is-open {
  display: flex;

  opacity: 1;

  pointer-events: auto;
}


.full-pedidos-modal__backdrop {
  position: absolute;

  inset: 0;

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

  backdrop-filter:
    blur(
      2px
    );
}


.full-pedidos-modal__dialog {
  position: relative;

  z-index: 2;

  width:
    min(
      760px,
      96vw
    );

  max-height:
    min(
      820px,
      92vh
    );

  overflow: hidden;

  display: flex;
  flex-direction: column;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    13px;

  background:
    var(
      --full-surface
    );

  box-shadow:
    0
    24px
    60px
    rgba(
      0,
      0,
      0,
      0.2
    );
}


.full-pedidos-modal__dialog--product {
  width:
    min(
      850px,
      96vw
    );
}


.full-pedidos-modal__dialog--small {
  width:
    min(
      520px,
      95vw
    );
}


/* =========================================================
   61. MODAL HEAD
   ========================================================= */


.full-pedidos-modal__head {
  min-height: 70px;

  padding:
    13px
    15px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  border-bottom:
    1px
    solid
    var(
      --full-line
    );

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


.full-pedidos-modal__head > div {
  min-width: 0;
}


.full-pedidos-modal__head small {
  display: block;

  color:
    var(
      --full-muted
    );

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

  letter-spacing: 0.07em;

  text-transform: uppercase;
}


.full-pedidos-modal__head strong {
  display: block;

  margin-top:
    4px;

  color:
    var(
      --full-text
    );

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

  line-height: 1.15;
}


.full-pedidos-modal__head span {
  display: block;

  margin-top:
    4px;

  overflow: hidden;

  color:
    var(
      --full-muted
    );

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

  line-height: 1.3;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   62. MODAL BODY
   ========================================================= */


.full-pedidos-modal__body {
  min-height: 0;

  padding:
    14px;

  overflow:
    auto;

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


/* =========================================================
   63. MODAL FOOTER
   ========================================================= */


.full-pedidos-modal__footer {
  min-height: 58px;

  padding:
    10px
    14px;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 7px;

  border-top:
    1px
    solid
    var(
      --full-line
    );

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


/* =========================================================
   64. BUSCADOR PRODUCTOS
   ========================================================= */


.full-pedidos-product-searchbar {
  width: 100%;

  display: grid;

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

  align-items: end;

  gap: 8px;
}


.full-pedidos-product-searchbar
.full-pedidos-btn {
  min-height: 39px;
}


/* =========================================================
   65. RESULTADOS PRODUCTOS
   ========================================================= */


.full-pedidos-product-results {
  width: 100%;

  min-height: 260px;
  max-height: 410px;

  margin-top:
    11px;

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

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    10px;

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


/* =========================================================
   66. OPCIÓN PRODUCTO
   ========================================================= */


.full-pedidos-product-option {
  width: 100%;
  min-width: 0;

  min-height: 67px;

  padding:
    9px
    10px;

  display: grid;

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

  align-items: center;

  gap: 8px;

  border: 0;
  border-bottom:
    1px
    solid
    var(
      --full-line
    );

  background:
    var(
      --full-surface
    );

  color:
    var(
      --full-text
    );

  text-align: left;

  cursor: pointer;

  transition:
    background-color 130ms ease,
    opacity 130ms ease;
}


.full-pedidos-product-option:last-child {
  border-bottom: 0;
}


.full-pedidos-product-option:hover:not(:disabled) {
  background:
    var(
      --full-surface-soft
    );
}


.full-pedidos-product-option.is-selected {
  background:
    var(
      --full-success-bg
    );
}


.full-pedidos-product-option.is-disabled {
  opacity: 0.52;

  cursor: not-allowed;
}


.full-pedidos-product-option > span {
  min-width: 0;
}


.full-pedidos-product-option > span:first-child {
  display: flex;
  flex-direction: column;

  gap: 3px;
}


.full-pedidos-product-option > span:first-child strong {
  overflow: hidden;

  color:
    var(
      --full-text
    );

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

  line-height: 1.2;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.full-pedidos-product-option > span:first-child > small {
  overflow: hidden;

  color:
    var(
      --full-muted
    );

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

  line-height: 1.25;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.full-pedidos-product-option__notice {
  color:
    var(
      --full-warning
    )
    !important;

  font-weight:
    800
    !important;
}


.full-pedidos-product-option > span:not(
  :first-child
) {
  display: flex;
  flex-direction: column;

  gap: 3px;

  text-align: right;
}


.full-pedidos-product-option > span:not(
  :first-child
) small {
  color:
    var(
      --full-muted
    );

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

  letter-spacing: 0.04em;
}


.full-pedidos-product-option > span:not(
  :first-child
) strong {
  color:
    var(
      --full-text
    );

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


.full-pedidos-product-option > .icon {
  width: 15px;
  height: 15px;

  justify-self: end;

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


/* =========================================================
   67. PRODUCTO SELECCIONADO
   ========================================================= */


.full-pedidos-product-selected {
  width: 100%;

  margin-top:
    11px;

  padding:
    11px;

  display: grid;

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

  align-items: end;

  gap: 12px;

  border:
    1px
    solid
    var(
      --full-success-line
    );

  border-radius:
    10px;

  background:
    var(
      --full-success-bg
    );
}


.full-pedidos-product-selected > div {
  min-width: 0;
}


.full-pedidos-product-selected > div > small {
  display: block;

  color:
    var(
      --full-success
    );

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

  letter-spacing: 0.05em;
}


.full-pedidos-product-selected > div > strong {
  display: block;

  margin-top:
    4px;

  overflow: hidden;

  color:
    var(
      --full-text
    );

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

  text-overflow: ellipsis;

  white-space: nowrap;
}


.full-pedidos-product-selected > div > span {
  display: block;

  margin-top:
    4px;

  overflow: hidden;

  color:
    var(
      --full-muted
    );

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

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   68. STOCK PRODUCTO SELECCIONADO
   ========================================================= */


.full-pedidos-product-selected__stock {
  margin-top:
    7px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 6px;
}


.full-pedidos-product-selected__stock span {
  min-height: 25px;

  padding:
    0
    7px;

  display: inline-flex;
  align-items: center;

  gap: 4px;

  border:
    1px
    solid
    var(
      --full-success-line
    );

  border-radius:
    999px;

  background:
    var(
      --full-surface
    );

  color:
    var(
      --full-muted
    );

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


.full-pedidos-product-selected__stock strong {
  color:
    var(
      --full-text
    );

  font-weight: 800;
}


/* =========================================================
   69. TOAST
   ========================================================= */


.full-pedidos-toast {
  position: fixed;

  right: 18px;
  bottom: 18px;

  z-index: 12000;

  width:
    min(
      390px,
      calc(
        100vw -
        36px
      )
    );

  min-height: 64px;

  padding:
    11px
    12px;

  display: flex;
  align-items: flex-start;

  gap: 10px;

  border:
    1px
    solid
    var(
      --full-line
    );

  border-radius:
    10px;

  background:
    var(
      --full-surface
    );

  box-shadow:
    0
    16px
    44px
    rgba(
      0,
      0,
      0,
      0.16
    );

  opacity: 0;

  visibility: hidden;

  transform:
    translateY(
      12px
    );

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


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

  visibility: visible;

  transform:
    translateY(
      0
    );
}


.full-pedidos-toast__icon {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: grid;
  place-items: center;

  border-radius:
    8px;

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

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


.full-pedidos-toast__icon .icon {
  width: 17px;
  height: 17px;
}


.full-pedidos-toast__body {
  min-width: 0;
}


.full-pedidos-toast__body strong {
  display: block;

  color:
    var(
      --full-text
    );

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

  line-height: 1.3;
}


.full-pedidos-toast__body p {
  margin:
    3px
    0
    0;

  color:
    var(
      --full-muted
    );

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

  line-height: 1.45;
}


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


.full-pedidos-toast.is-success
.full-pedidos-toast__icon {
  background:
    var(
      --full-success-bg
    );

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


.full-pedidos-toast.is-warning {
  border-color:
    var(
      --full-warning-line
    );
}


.full-pedidos-toast.is-warning
.full-pedidos-toast__icon {
  background:
    var(
      --full-warning-bg
    );

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


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


.full-pedidos-toast.is-error
.full-pedidos-toast__icon {
  background:
    var(
      --full-danger-bg
    );

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


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


.full-pedidos-toast.is-info
.full-pedidos-toast__icon {
  background:
    var(
      --full-info-bg
    );

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


/* =========================================================
   70. DARK MODE
   ========================================================= */


html[data-theme="dark"]
.full-pedidos-page,
body.dark
.full-pedidos-page,
.dark
.full-pedidos-page {
  --full-bg:
    #090909;

  --full-surface:
    #101010;

  --full-surface-soft:
    #151515;

  --full-surface-hover:
    #1a1a1a;

  --full-line:
    #252525;

  --full-line-strong:
    #343434;

  --full-text:
    #f3f3f3;

  --full-muted:
    #9d9d9d;

  --full-muted-soft:
    #6f6f6f;

  --full-black:
    #ffffff;

  --full-white:
    #080808;

  --full-success:
    #5ccf98;

  --full-success-strong:
    #72d9a9;

  --full-success-bg:
    rgba(
      36,
      146,
      96,
      0.11
    );

  --full-success-line:
    rgba(
      74,
      184,
      127,
      0.24
    );

  --full-warning:
    #e6b94e;

  --full-warning-strong:
    #f0c75c;

  --full-warning-bg:
    rgba(
      190,
      135,
      24,
      0.12
    );

  --full-warning-line:
    rgba(
      214,
      165,
      54,
      0.24
    );

  --full-danger:
    #ef8178;

  --full-danger-bg:
    rgba(
      204,
      67,
      56,
      0.12
    );

  --full-danger-line:
    rgba(
      220,
      91,
      81,
      0.24
    );

  --full-info:
    #7faeea;

  --full-info-bg:
    rgba(
      60,
      119,
      196,
      0.12
    );

  --full-info-line:
    rgba(
      92,
      142,
      208,
      0.24
    );

  --full-shadow:
    none;
}


/* =========================================================
   71. DARK · BODY MODALES
   ========================================================= */


html[data-theme="dark"]
.full-pedidos-modal__dialog,
body.dark
.full-pedidos-modal__dialog,
.dark
.full-pedidos-modal__dialog,
html[data-theme="dark"]
.full-pedidos-detail-modal__dialog,
body.dark
.full-pedidos-detail-modal__dialog,
.dark
.full-pedidos-detail-modal__dialog {
  background:
    #101010;

  border-color:
    #292929;
}


html[data-theme="dark"]
.full-pedidos-toast,
body.dark
.full-pedidos-toast,
.dark
.full-pedidos-toast {
  background:
    #101010;

  border-color:
    #292929;
}


/* =========================================================
   72. DARK · INPUTS
   ========================================================= */


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


/* =========================================================
   73. RESPONSIVE · 1450
   ========================================================= */


@media (
  max-width: 1450px
) {
  .full-pedidos-metrics-strip {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .full-pedidos-create-layout--new {
    grid-template-columns:
      minmax(
        350px,
        0.78fr
      )
      minmax(
        0,
        1.22fr
      );
  }


  .full-pedidos-preview-summary--stock {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .full-pedidos-preview-summary--stock article:nth-child(
    3n
  ) {
    border-right: 0;
  }


  .full-pedidos-preview-summary--stock article:nth-child(
    -n + 3
  ) {
    border-bottom:
      1px
      solid
      var(
        --full-line
      );
  }


  .full-pedidos-detail-summary__grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .full-pedidos-detail-summary__grid article:nth-child(
    3n
  ) {
    border-right: 0;
  }


  .full-pedidos-detail-summary__grid article:nth-child(
    -n + 3
  ) {
    border-bottom:
      1px
      solid
      var(
        --full-line
      );
  }
}


/* =========================================================
   74. RESPONSIVE · 1180
   ========================================================= */


@media (
  max-width: 1180px
) {
  .full-pedidos-create-layout--new {
    grid-template-columns:
      1fr;
  }


  .full-pedidos-preview-empty--new {
    min-height: 320px;
  }


  .full-pedidos-filters--toolbar {
    grid-template-columns:
      minmax(
        0,
        1.5fr
      )
      minmax(
        140px,
        0.8fr
      )
      minmax(
        140px,
        0.8fr
      )
      minmax(
        140px,
        0.8fr
      );

    align-items: end;
  }


  .full-pedidos-filters__actions {
    grid-column:
      1 /
      -1;

    justify-content:
      flex-end;
  }


  .full-pedidos-document-grid {
    grid-template-columns:
      1fr;
  }


  .full-pedidos-movement-list {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   75. RESPONSIVE · 920
   ========================================================= */


@media (
  max-width: 920px
) {
  .full-pedidos-head {
    align-items: flex-start;
    flex-direction: column;
  }


  .full-pedidos-head__actions {
    width: 100%;

    flex-wrap: wrap;
  }


  .full-pedidos-head-stat {
    flex:
      1
      1
      90px;
  }


  .full-pedidos-head__actions
  .full-pedidos-btn {
    flex:
      1
      1
      130px;
  }


  .full-pedidos-files-grid--compact {
    grid-template-columns:
      1fr;
  }


  .full-pedidos-upload-fields--compact {
    grid-template-columns:
      1fr;
  }


  .full-pedidos-upload-actions {
    align-items: stretch;
    flex-direction: column;
  }


  .full-pedidos-upload-actions > div {
    width: 100%;
  }


  .full-pedidos-upload-actions
  .full-pedidos-btn {
    flex: 1 1 0;
  }


  .full-pedidos-preview-head {
    align-items: flex-start;

    flex-direction: column;
  }


  .full-pedidos-preview-head__actions {
    width: 100%;

    justify-content:
      space-between;
  }


  .full-pedidos-detail-hero {
    grid-template-columns:
      1fr;
  }


  .full-pedidos-detail-data {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .full-pedidos-detail-data article:nth-child(
    4n
  ) {
    border-right:
      1px
      solid
      var(
        --full-line
      );
  }


  .full-pedidos-detail-data article:nth-child(
    2n
  ) {
    border-right: 0;
  }


  .full-pedidos-detail-modal__dialog {
    width:
      min(
        760px,
        96vw
      );
  }
}


/* =========================================================
   76. RESPONSIVE · 760
   ========================================================= */


@media (
  max-width: 760px
) {
  .full-pedidos-page {
    gap: 13px;
  }


  .full-pedidos-brand__icon {
    width: 39px;
    height: 39px;

    flex-basis:
      39px;
  }


  .full-pedidos-brand__body h2 {
    font-size: 25px;
  }


  .full-pedidos-brand__body p {
    font-size: 11px;
  }


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


  .full-pedidos-preview-summary--stock {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .full-pedidos-preview-summary--stock article {
    border-bottom:
      1px
      solid
      var(
        --full-line
      );
  }


  .full-pedidos-preview-summary--stock article:nth-child(
    2n
  ) {
    border-right: 0;
  }


  .full-pedidos-preview-summary--stock article:nth-last-child(
    -n + 2
  ) {
    border-bottom: 0;
  }


  .full-pedidos-preview-summary--stock article:nth-child(
    3n
  ) {
    border-right:
      1px
      solid
      var(
        --full-line
      );
  }


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


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


  .full-pedidos-filters__actions {
    grid-column:
      1 /
      -1;
  }


  .full-pedidos-detail-summary__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .full-pedidos-detail-summary__grid article {
    border-bottom:
      1px
      solid
      var(
        --full-line
      );
  }


  .full-pedidos-detail-summary__grid article:nth-child(
    3n
  ) {
    border-right:
      1px
      solid
      var(
        --full-line
      );
  }


  .full-pedidos-detail-summary__grid article:nth-child(
    2n
  ) {
    border-right: 0;
  }


  .full-pedidos-detail-summary__grid article:nth-last-child(
    -n + 2
  ) {
    border-bottom: 0;
  }


  .full-pedidos-modal {
    padding:
      10px;
  }


  .full-pedidos-modal__dialog {
    width: 100%;
    max-height: 95vh;
  }


  .full-pedidos-product-selected {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   77. RESPONSIVE · 620
   ========================================================= */


@media (
  max-width: 620px
) {
  .full-pedidos-head__actions {
    display: grid;

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


  .full-pedidos-head__actions
  .full-pedidos-btn {
    grid-column:
      1 /
      -1;
  }


  .full-pedidos-preview-empty__steps {
    grid-template-columns:
      1fr;
  }


  .full-pedidos-preview-head__actions {
    align-items: stretch;
    flex-direction: column;
  }


  .full-pedidos-preview-head__actions
  .full-pedidos-btn,
  .full-pedidos-preview-head__actions
  .full-pedidos-preview-status {
    width: 100%;
  }


  .full-pedidos-preview-head__actions
  .full-pedidos-preview-status {
    justify-content:
      center;
  }


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


  .full-pedidos-filters--toolbar > * {
    grid-column:
      1;
  }


  .full-pedidos-filters__actions {
    display: grid;

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


  .full-pedidos-pagination {
    align-items: stretch;

    flex-direction: column;
  }


  .full-pedidos-pagination > div {
    width: 100%;
  }


  .full-pedidos-pagination
  .full-pedidos-btn {
    flex: 1 1 0;
  }


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

    flex-direction: column;
  }


  .full-pedidos-detail-head__actions {
    width: 100%;

    justify-content:
      space-between;
  }


  .full-pedidos-detail-tabs {
    padding:
      6px;
  }


  .full-pedidos-detail-tab {
    padding:
      0
      8px;
  }


  .full-pedidos-detail-data {
    grid-template-columns:
      1fr;
  }


  .full-pedidos-detail-data article,
  .full-pedidos-detail-data article:nth-child(
    2n
  ),
  .full-pedidos-detail-data article:nth-child(
    4n
  ) {
    border-right: 0;
  }


  .full-pedidos-detail-data article:last-child {
    border-bottom: 0;
  }


  .full-pedidos-document-card {
    grid-template-columns:
      36px
      minmax(
        0,
        1fr
      );
  }


  .full-pedidos-document-card__actions {
    grid-column:
      1 /
      -1;

    flex-direction: row;
  }


  .full-pedidos-document-card__actions
  .full-pedidos-btn {
    flex: 1 1 0;
  }


  .full-pedidos-product-searchbar {
    grid-template-columns:
      1fr;
  }


  .full-pedidos-product-searchbar
  .full-pedidos-btn {
    width: 100%;
  }


  .full-pedidos-product-option {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      74px
      26px;
  }


  .full-pedidos-product-option > span:nth-child(
    3
  ) {
    display: none;
  }


  .full-pedidos-product-selected {
    grid-template-columns:
      1fr;
  }


  .full-pedidos-quantity-stock-summary {
    grid-template-columns:
      1fr;
  }


  .full-pedidos-quantity-stock-summary article {
    border-right: 0;
    border-bottom:
      1px
      solid
      var(
        --full-line
      );
  }


  .full-pedidos-quantity-stock-summary article:last-child {
    border-bottom: 0;
  }


  .full-pedidos-draft-delete-summary {
    grid-template-columns:
      1fr;
  }


  .full-pedidos-draft-delete-summary article {
    border-right: 0;
    border-bottom:
      1px
      solid
      var(
        --full-line
      );
  }


  .full-pedidos-draft-delete-summary article:last-child {
    border-bottom: 0;
  }
}


/* =========================================================
   78. RESPONSIVE · 460
   ========================================================= */


@media (
  max-width: 460px
) {
  .full-pedidos-metrics-strip {
    grid-template-columns:
      1fr;
  }


  .full-pedidos-upload-body--new {
    padding:
      10px;
  }


  .full-pedidos-panel-head--compact,
  .full-pedidos-panel-head--management {
    padding:
      10px
      11px;
  }


  .full-pedidos-preview-summary--compact {
    margin:
      10px
      10px
      0;
  }


  .full-pedidos-preview-alert {
    margin:
      10px
      10px
      0;
  }


  .full-pedidos-preview-table--compact {
    width:
      calc(
        100% -
        20px
      );

    margin:
      10px;
  }


  .full-pedidos-modal__head {
    padding:
      11px;
  }


  .full-pedidos-modal__body {
    padding:
      11px;
  }


  .full-pedidos-modal__footer {
    padding:
      9px
      11px;

    display: grid;

    grid-template-columns:
      1fr;
  }


  .full-pedidos-modal__footer
  .full-pedidos-btn {
    width: 100%;
  }


  .full-pedidos-toast {
    right: 10px;
    bottom: 10px;

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


/* =========================================================
   79. SIN SCROLL HORIZONTAL DE PÁGINA
   ========================================================= */


.full-pedidos-page {
  overflow-x: clip;
}


.full-pedidos-create-layout,
.full-pedidos-management,
.full-pedidos-list-card,
.full-pedidos-upload-card,
.full-pedidos-preview-card,
.full-pedidos-detail-card,
.full-pedidos-detail-summary,
.full-pedidos-detail-products,
.full-pedidos-detail-files,
.full-pedidos-detail-movements,
.full-pedidos-filters,
.full-pedidos-panel-head,
.full-pedidos-upload-body,
.full-pedidos-product-results,
.full-pedidos-product-selected {
  max-width: 100%;
}


/* =========================================================
   80. ELEMENTOS QUE SÍ PUEDEN SCROLLEAR INTERNAMENTE
   ========================================================= */


.full-pedidos-table,
.full-pedidos-preview-table,
.full-pedidos-items-table,
.full-pedidos-detail-tabs {
  overflow-x: auto;

  overscroll-behavior-inline:
    contain;
}


/* =========================================================
   81. EVITAR DESBORDES DE TEXTO
   ========================================================= */


.full-pedidos-page strong,
.full-pedidos-page span,
.full-pedidos-page small,
.full-pedidos-page p,
.full-pedidos-page h2,
.full-pedidos-page h3 {
  overflow-wrap:
    anywhere;
}


/* =========================================================
   82. SELECCIÓN DE TEXTO
   ========================================================= */


.full-pedidos-page ::selection {
  background:
    rgba(
      17,
      17,
      17,
      0.16
    );
}


/* =========================================================
   83. MOTION REDUCIDO
   ========================================================= */


@media (
  prefers-reduced-motion:
  reduce
) {
  .full-pedidos-page *,
  .full-pedidos-page *::before,
  .full-pedidos-page *::after,
  .full-pedidos-modal *,
  .full-pedidos-toast {
    scroll-behavior:
      auto
      !important;

    animation-duration:
      0.001ms
      !important;

    animation-iteration-count:
      1
      !important;

    transition-duration:
      0.001ms
      !important;
  }
}


/* =========================================================
   FIN DEL ARCHIVO
   ========================================================= */
   /* =========================================================
   FIX · MODAL VER PEDIDO
   CENTRADO · COMPACTO · RESPONSIVE
   ========================================================= */

.full-pedidos-detail-modal {
  position: fixed !important;

  inset: 0 !important;

  z-index: 12000 !important;

  width: 100vw !important;
  height: 100dvh !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 24px !important;

  overflow: hidden !important;

  isolation: isolate;
}


.full-pedidos-detail-modal__backdrop {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  border: 0 !important;

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

  backdrop-filter:
    blur(
      2px
    );
}


.full-pedidos-detail-modal__dialog {
  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  z-index: 2 !important;

  width:
    min(
      1180px,
      calc(
        100vw -
        48px
      )
    ) !important;

  height: auto !important;

  min-width: 0 !important;

  max-height:
    calc(
      100dvh -
      48px
    ) !important;

  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;

  border:
    1px
    solid
    var(
      --full-line
    ) !important;

  border-radius:
    14px !important;

  background:
    var(
      --full-surface
    ) !important;

  box-shadow:
    0
    28px
    80px
    rgba(
      0,
      0,
      0,
      0.28
    ) !important;

  transform: none !important;
}


.full-pedidos-detail-mount--modal {
  width: 100% !important;

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

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;

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


.full-pedidos-detail-card--modal {
  width: 100% !important;

  height: auto !important;

  min-height: 0 !important;

  max-height:
    calc(
      100dvh -
      48px
    ) !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;

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


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

.full-pedidos-detail-head--modal {
  flex: 0 0 auto !important;

  width: 100% !important;

  min-height: 76px !important;

  padding:
    12px
    16px !important;

  background:
    var(
      --full-surface
    ) !important;
}


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

.full-pedidos-detail-tabs {
  flex: 0 0 auto !important;

  width: 100% !important;

  min-height: 48px !important;

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

  background:
    var(
      --full-surface-soft
    ) !important;
}


/* =========================================================
   BODY CON SCROLL
   ========================================================= */

.full-pedidos-detail-body--modal {
  flex: 1 1 auto !important;

  width: 100% !important;

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

  max-height: none !important;

  padding:
    14px !important;

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

  overscroll-behavior:
    contain;

  scrollbar-gutter:
    stable;

  background:
    var(
      --full-surface
    ) !important;
}


/* =========================================================
   RESUMEN
   ========================================================= */

.full-pedidos-detail-summary {
  width: 100% !important;

  min-width: 0 !important;
}


.full-pedidos-detail-hero {
  width: 100% !important;

  min-width: 0 !important;
}


.full-pedidos-detail-summary__grid {
  width: 100% !important;

  min-width: 0 !important;
}


.full-pedidos-detail-data {
  width: 100% !important;

  min-width: 0 !important;
}


/* =========================================================
   EVITAR QUE TABLAS ROMPAN EL MODAL
   ========================================================= */

.full-pedidos-items-table,
.full-pedidos-preview-table {
  width: 100% !important;

  max-width: 100% !important;

  min-width: 0 !important;

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


/* =========================================================
   DESKTOP GRANDE
   ========================================================= */

@media (
  min-width: 1500px
) {
  .full-pedidos-detail-modal__dialog {
    width:
      min(
        1220px,
        calc(
          100vw -
          80px
        )
      ) !important;

    max-height:
      calc(
        100dvh -
        70px
      ) !important;
  }


  .full-pedidos-detail-card--modal {
    max-height:
      calc(
        100dvh -
        70px
      ) !important;
  }
}


/* =========================================================
   NOTEBOOK / PANTALLAS BAJAS
   ========================================================= */

@media (
  max-height: 850px
) {
  .full-pedidos-detail-modal {
    padding:
      14px !important;
  }


  .full-pedidos-detail-modal__dialog {
    max-height:
      calc(
        100dvh -
        28px
      ) !important;
  }


  .full-pedidos-detail-card--modal {
    max-height:
      calc(
        100dvh -
        28px
      ) !important;
  }


  .full-pedidos-detail-head--modal {
    min-height: 68px !important;

    padding:
      10px
      14px !important;
  }


  .full-pedidos-detail-tabs {
    min-height: 44px !important;

    padding:
      5px
      11px !important;
  }


  .full-pedidos-detail-body--modal {
    padding:
      11px !important;
  }


  .full-pedidos-detail-hero {
    padding:
      11px !important;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (
  max-width: 900px
) {
  .full-pedidos-detail-modal {
    padding:
      12px !important;
  }


  .full-pedidos-detail-modal__dialog {
    width:
      calc(
        100vw -
        24px
      ) !important;

    max-height:
      calc(
        100dvh -
        24px
      ) !important;

    border-radius:
      12px !important;
  }


  .full-pedidos-detail-card--modal {
    max-height:
      calc(
        100dvh -
        24px
      ) !important;
  }


  .full-pedidos-detail-summary__grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      ) !important;
  }


  .full-pedidos-detail-summary__grid article:nth-child(
    3n
  ) {
    border-right: 0;
  }


  .full-pedidos-detail-hero {
    grid-template-columns:
      180px
      minmax(
        0,
        1fr
      ) !important;
  }
}


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

@media (
  max-width: 640px
) {
  .full-pedidos-detail-modal {
    padding:
      0 !important;
  }


  .full-pedidos-detail-modal__dialog {
    width: 100vw !important;
    height: 100dvh !important;

    max-width: none !important;
    max-height: none !important;

    border: 0 !important;

    border-radius:
      0 !important;
  }


  .full-pedidos-detail-card--modal {
    height: 100dvh !important;

    max-height: none !important;
  }


  .full-pedidos-detail-head--modal {
    min-height: 72px !important;

    padding:
      10px
      12px !important;

    gap:
      10px !important;
  }


  .full-pedidos-detail-head__identity h3 {
    font-size:
      18px !important;
  }


  .full-pedidos-detail-head__identity > div {
    gap:
      4px !important;
  }


  .full-pedidos-detail-head__actions {
    gap:
      5px !important;
  }


  .full-pedidos-detail-head__actions
  .full-pedidos-btn--danger
  span {
    display: none;
  }


  .full-pedidos-detail-head__actions
  .full-pedidos-btn--danger {
    width:
      38px !important;

    min-width:
      38px !important;

    padding:
      0 !important;
  }


  .full-pedidos-detail-tabs {
    padding:
      6px
      8px !important;
  }


  .full-pedidos-detail-body--modal {
    padding:
      10px !important;
  }


  .full-pedidos-detail-hero {
    grid-template-columns:
      1fr !important;

    gap:
      10px !important;
  }


  .full-pedidos-detail-summary__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      ) !important;
  }


  .full-pedidos-detail-summary__grid article:nth-child(
    3n
  ) {
    border-right:
      1px
      solid
      var(
        --full-line
      );
  }


  .full-pedidos-detail-summary__grid article:nth-child(
    2n
  ) {
    border-right: 0;
  }


  .full-pedidos-detail-data {
    grid-template-columns:
      1fr !important;
  }


  .full-pedidos-detail-data article {
    border-right:
      0 !important;
  }
}


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

html[data-theme="dark"]
.full-pedidos-detail-modal__dialog,
body.dark
.full-pedidos-detail-modal__dialog,
.dark
.full-pedidos-detail-modal__dialog {
  background:
    #101010 !important;

  border-color:
    #292929 !important;

  box-shadow:
    0
    28px
    80px
    rgba(
      0,
      0,
      0,
      0.65
    ) !important;
}


html[data-theme="dark"]
.full-pedidos-detail-modal__backdrop,
body.dark
.full-pedidos-detail-modal__backdrop,
.dark
.full-pedidos-detail-modal__backdrop {
  background:
    rgba(
      0,
      0,
      0,
      0.76
    ) !important;
}/* =========================================================
   FIX · VARIABLES DEL MODAL FUERA DE .full-pedidos-page
   ========================================================= */

.full-pedidos-detail-modal {
  --full-bg: #f7f7f7;

  --full-surface: #ffffff;

  --full-surface-soft: #fafafa;

  --full-surface-hover: #f5f5f5;

  --full-line: #e7e7e7;

  --full-line-strong: #d6d6d6;

  --full-text: #171717;

  --full-muted: #737373;

  --full-muted-soft: #a3a3a3;

  --full-black: #111111;

  --full-white: #ffffff;

  --full-success: #16734a;

  --full-success-strong: #0f5e3c;

  --full-success-bg: #eff8f3;

  --full-success-line: #cee7d8;

  --full-warning: #946200;

  --full-warning-strong: #725000;

  --full-warning-bg: #fff8e8;

  --full-warning-line: #ead7a8;

  --full-danger: #b42318;

  --full-danger-bg: #fff2f1;

  --full-danger-line: #edc8c5;

  --full-info: #245ea8;

  --full-info-bg: #eff5fc;

  --full-info-line: #cfdef1;

  --full-shadow:
    0
    1px
    2px
    rgba(
      0,
      0,
      0,
      0.03
    );

  color:
    var(
      --full-text
    );

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


/* =========================================================
   SUPERFICIE REAL DEL MODAL
   ========================================================= */

.full-pedidos-detail-modal__dialog {
  background:
    #ffffff !important;

  color:
    #171717 !important;
}


.full-pedidos-detail-mount--modal,
.full-pedidos-detail-card--modal,
.full-pedidos-detail-head--modal,
.full-pedidos-detail-body--modal {
  background:
    #ffffff !important;

  color:
    #171717 !important;
}


.full-pedidos-detail-tabs {
  background:
    #fafafa !important;
}


/* =========================================================
   DARK MODE · VARIABLES DEL MODAL
   ========================================================= */

html[data-theme="dark"]
.full-pedidos-detail-modal,
body.dark
.full-pedidos-detail-modal,
.dark
.full-pedidos-detail-modal {
  --full-bg: #090909;

  --full-surface: #101010;

  --full-surface-soft: #151515;

  --full-surface-hover: #1a1a1a;

  --full-line: #252525;

  --full-line-strong: #343434;

  --full-text: #f3f3f3;

  --full-muted: #9d9d9d;

  --full-muted-soft: #6f6f6f;

  --full-black: #ffffff;

  --full-white: #080808;

  --full-success: #5ccf98;

  --full-success-strong: #72d9a9;

  --full-success-bg:
    rgba(
      36,
      146,
      96,
      0.11
    );

  --full-success-line:
    rgba(
      74,
      184,
      127,
      0.24
    );

  --full-warning: #e6b94e;

  --full-warning-strong: #f0c75c;

  --full-warning-bg:
    rgba(
      190,
      135,
      24,
      0.12
    );

  --full-warning-line:
    rgba(
      214,
      165,
      54,
      0.24
    );

  --full-danger: #ef8178;

  --full-danger-bg:
    rgba(
      204,
      67,
      56,
      0.12
    );

  --full-danger-line:
    rgba(
      220,
      91,
      81,
      0.24
    );

  --full-info: #7faeea;

  --full-info-bg:
    rgba(
      60,
      119,
      196,
      0.12
    );

  --full-info-line:
    rgba(
      92,
      142,
      208,
      0.24
    );

  --full-shadow: none;
}


/* =========================================================
   DARK MODE · SUPERFICIE REAL
   ========================================================= */

html[data-theme="dark"]
.full-pedidos-detail-modal__dialog,
html[data-theme="dark"]
.full-pedidos-detail-mount--modal,
html[data-theme="dark"]
.full-pedidos-detail-card--modal,
html[data-theme="dark"]
.full-pedidos-detail-head--modal,
html[data-theme="dark"]
.full-pedidos-detail-body--modal,
body.dark
.full-pedidos-detail-modal__dialog,
body.dark
.full-pedidos-detail-mount--modal,
body.dark
.full-pedidos-detail-card--modal,
body.dark
.full-pedidos-detail-head--modal,
body.dark
.full-pedidos-detail-body--modal,
.dark
.full-pedidos-detail-modal__dialog,
.dark
.full-pedidos-detail-mount--modal,
.dark
.full-pedidos-detail-card--modal,
.dark
.full-pedidos-detail-head--modal,
.dark
.full-pedidos-detail-body--modal {
  background:
    #101010 !important;

  color:
    #f3f3f3 !important;
}


html[data-theme="dark"]
.full-pedidos-detail-tabs,
body.dark
.full-pedidos-detail-tabs,
.dark
.full-pedidos-detail-tabs {
  background:
    #151515 !important;
}


/* =========================================================
   ASEGURAR FONDO EN TODOS LOS BLOQUES DEL RESUMEN
   ========================================================= */

.full-pedidos-detail-summary__grid article,
.full-pedidos-detail-data article,
.full-pedidos-detail-hero,
.full-pedidos-document-status,
.full-pedidos-items-table,
.full-pedidos-document-card,
.full-pedidos-movement-card {
  background-color:
    var(
      --full-surface
    );
}/* =========================================================
   UBICACIÓN:
   frontend/src/pages/recursos/full-pedidos/full-pedidos.css

   PEDIDOS FULL · AJUSTES FINALES
   PEGAR AL FINAL DEL CSS

   - MÁS RÁPIDO
   - RESPONSIVE FULL
   - SIN BARRAS HORIZONTALES
   - TABLAS EN CARDS EN MOBILE
   - LETRAS MÁS NEGRAS
   - DIVISIONES MÁS MARCADAS
   - DARK NEGRO REAL
   - MODALES RESPONSIVE
   ========================================================= */


/* =========================================================
   01. VARIABLES · MÁS CONTRASTE
   ========================================================= */

.full-pedidos-page,
.full-pedidos-modal,
.full-pedidos-detail-modal,
.full-pedidos-toast {
  --full-bg:
    #f5f6f7;

  --full-surface:
    #ffffff;

  --full-surface-soft:
    #f7f8f9;

  --full-surface-hover:
    #f0f2f4;

  --full-line:
    #c9cdd2;

  --full-line-strong:
    #9fa6ae;

  --full-text:
    #0b0c0e;

  --full-muted:
    #51565d;

  --full-muted-soft:
    #747a82;

  --full-black:
    #090909;

  --full-white:
    #ffffff;

  --full-shadow:
    none;
}


html[data-theme="dark"]
.full-pedidos-page,
html[data-theme="dark"]
.full-pedidos-modal,
html[data-theme="dark"]
.full-pedidos-detail-modal,
html[data-theme="dark"]
.full-pedidos-toast,
body.dark
.full-pedidos-page,
body.dark
.full-pedidos-modal,
body.dark
.full-pedidos-detail-modal,
body.dark
.full-pedidos-toast,
body[data-theme="dark"]
.full-pedidos-page,
body[data-theme="dark"]
.full-pedidos-modal,
body[data-theme="dark"]
.full-pedidos-detail-modal,
body[data-theme="dark"]
.full-pedidos-toast {
  --full-bg:
    #050505;

  --full-surface:
    #090909;

  --full-surface-soft:
    #111111;

  --full-surface-hover:
    #171717;

  --full-line:
    #393e43;

  --full-line-strong:
    #596068;

  --full-text:
    #f6f6f6;

  --full-muted:
    #adb2b8;

  --full-muted-soft:
    #858b92;

  --full-black:
    #f5f5f5;

  --full-white:
    #050505;

  --full-shadow:
    none;
}


/* =========================================================
   02. PROTECCIÓN GLOBAL · SIN SCROLL HORIZONTAL
   ========================================================= */

html,
body {
  width:
    100%;

  max-width:
    100vw;

  overflow-x:
    hidden !important;
}


body:has(
  .full-pedidos-page
),
body:has(
  .full-pedidos-page
)
.app-shell,
body:has(
  .full-pedidos-page
)
.app-main,
body:has(
  .full-pedidos-page
)
.app-content,
.app-content:has(
  .full-pedidos-page
) {
  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    100% !important;

  overflow-x:
    hidden !important;
}


.full-pedidos-page,
.full-pedidos-page *,
.full-pedidos-page *::before,
.full-pedidos-page *::after,
.full-pedidos-modal,
.full-pedidos-modal *,
.full-pedidos-modal *::before,
.full-pedidos-modal *::after,
.full-pedidos-detail-modal,
.full-pedidos-detail-modal *,
.full-pedidos-detail-modal *::before,
.full-pedidos-detail-modal *::after {
  box-sizing:
    border-box;

  min-width:
    0;
}


/* =========================================================
   03. MÁS RÁPIDO
   ========================================================= */

.full-pedidos-page *,
.full-pedidos-page *::before,
.full-pedidos-page *::after,
.full-pedidos-modal *,
.full-pedidos-modal *::before,
.full-pedidos-modal *::after,
.full-pedidos-detail-modal *,
.full-pedidos-detail-modal *::before,
.full-pedidos-detail-modal *::after,
.full-pedidos-toast {
  transition-duration:
    65ms !important;
}


.full-pedidos-btn,
.full-pedidos-icon-btn,
.full-pedidos-file-card,
.full-pedidos-product-option,
.full-pedidos-table__row--body,
.full-pedidos-detail-tab {
  transition:
    background-color
    55ms
    ease,
    border-color
    55ms
    ease,
    color
    55ms
    ease,
    opacity
    55ms
    ease !important;
}


.full-pedidos-btn:hover:not(
  :disabled
),
.full-pedidos-btn:active:not(
  :disabled
),
.full-pedidos-icon-btn:hover:not(
  :disabled
),
.full-pedidos-icon-btn:active:not(
  :disabled
) {
  transform:
    none !important;
}


.full-pedidos-spin {
  animation-duration:
    550ms !important;
}


.full-pedidos-toast {
  transition:
    opacity
    75ms
    ease,
    transform
    75ms
    ease,
    visibility
    75ms
    ease !important;
}


.full-pedidos-modal__backdrop,
.full-pedidos-detail-modal__backdrop {
  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;
}


/* =========================================================
   04. LETRAS MÁS MARCADAS
   ========================================================= */

.full-pedidos-page,
.full-pedidos-modal,
.full-pedidos-detail-modal {
  font-weight:
    650;
}


.full-pedidos-brand__body h2,
.full-pedidos-panel-head
> div
> strong,
.full-pedidos-detail-head__identity h3,
.full-pedidos-modal__head strong {
  font-weight:
    900 !important;
}


.full-pedidos-brand__body
> span,
.full-pedidos-head-stat span,
.full-pedidos-metric__body small,
.full-pedidos-panel-head
> div
> span,
.full-pedidos-field
> span,
.full-pedidos-preview-summary
article
span,
.full-pedidos-detail-head__identity
> small,
.full-pedidos-detail-summary__grid small,
.full-pedidos-detail-data small,
.full-pedidos-detail-section-head
> div
> span,
.full-pedidos-document-card__body small,
.full-pedidos-modal__head small {
  font-weight:
    900 !important;
}


.full-pedidos-brand__body p,
.full-pedidos-panel-head
> div
> small,
.full-pedidos-field input,
.full-pedidos-field select,
.full-pedidos-field textarea,
.full-pedidos-table__row--body
> span,
.full-pedidos-document-status p,
.full-pedidos-product-option
> span:first-child
> small {
  font-weight:
    700 !important;
}


.full-pedidos-btn,
.full-pedidos-status,
.full-pedidos-table__row--body
> span:first-child
strong,
.full-pedidos-preview-row
> *,
.full-pedidos-items-row
> *,
.full-pedidos-product-option
> span:first-child
strong {
  font-weight:
    800 !important;
}


/* =========================================================
   05. DIVISIONES MÁS MARCADAS
   ========================================================= */

.full-pedidos-brand__icon,
.full-pedidos-head-stat,
.full-pedidos-btn,
.full-pedidos-icon-btn,
.full-pedidos-metric,
.full-pedidos-upload-card,
.full-pedidos-file-card,
.full-pedidos-preview-card,
.full-pedidos-preview-empty,
.full-pedidos-preview-summary,
.full-pedidos-preview-table,
.full-pedidos-list-card,
.full-pedidos-items-table,
.full-pedidos-document-card,
.full-pedidos-movement-card,
.full-pedidos-product-results,
.full-pedidos-product-selected,
.full-pedidos-modal__dialog,
.full-pedidos-detail-modal__dialog,
.full-pedidos-detail-hero,
.full-pedidos-detail-summary__grid,
.full-pedidos-document-status,
.full-pedidos-detail-data,
.full-pedidos-quantity-stock-summary,
.full-pedidos-draft-delete-summary {
  border-color:
    var(
      --full-line-strong
    ) !important;
}


.full-pedidos-panel-head,
.full-pedidos-filters,
.full-pedidos-table__row,
.full-pedidos-preview-row,
.full-pedidos-items-row,
.full-pedidos-modal__head,
.full-pedidos-modal__footer,
.full-pedidos-detail-head,
.full-pedidos-detail-tabs,
.full-pedidos-product-option,
.full-pedidos-pagination {
  border-color:
    var(
      --full-line-strong
    ) !important;
}


/* =========================================================
   06. MÉTRICAS · BLOQUE ÚNICO
   ========================================================= */

.full-pedidos-metrics-strip {
  gap:
    0 !important;

  border:
    1px
    solid
    var(
      --full-line-strong
    );

  border-radius:
    10px;

  overflow:
    hidden;
}


.full-pedidos-metric,
.full-pedidos-metric--compact {
  border:
    0 !important;

  border-right:
    1px
    solid
    var(
      --full-line-strong
    ) !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}


.full-pedidos-metric:last-child {
  border-right:
    0 !important;
}


.full-pedidos-metric__icon {
  border:
    1px
    solid
    var(
      --full-line
    );
}


/* =========================================================
   07. LAYOUT PRINCIPAL
   ========================================================= */

.full-pedidos-page,
.full-pedidos-create-layout,
.full-pedidos-management,
.full-pedidos-list-card,
.full-pedidos-upload-card,
.full-pedidos-preview-card,
.full-pedidos-upload-mount,
.full-pedidos-preview-mount {
  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    100% !important;
}


/* =========================================================
   08. CAMPOS
   ========================================================= */

.full-pedidos-field input,
.full-pedidos-field select,
.full-pedidos-field textarea {
  border-color:
    var(
      --full-line-strong
    ) !important;
}


.full-pedidos-field input:hover,
.full-pedidos-field select:hover,
.full-pedidos-field textarea:hover {
  border-color:
    var(
      --full-text
    ) !important;
}


.full-pedidos-field input:focus,
.full-pedidos-field select:focus,
.full-pedidos-field textarea:focus {
  border-color:
    var(
      --full-text
    ) !important;

  box-shadow:
    none !important;
}


/* =========================================================
   09. PREVIEW · DESKTOP SIN SCROLL HORIZONTAL
   ========================================================= */

.full-pedidos-preview-table {
  width:
    calc(
      100% -
      26px
    ) !important;

  min-width:
    0 !important;

  max-width:
    calc(
      100% -
      26px
    ) !important;

  overflow-x:
    hidden !important;

  overflow-y:
    auto !important;
}


.full-pedidos-preview-row,
.full-pedidos-preview-row--draft {
  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    100% !important;
}


.full-pedidos-preview-row--draft {
  grid-template-columns:
    minmax(
      90px,
      0.8fr
    )
    minmax(
      150px,
      1.55fr
    )
    minmax(
      105px,
      0.85fr
    )
    minmax(
      70px,
      0.6fr
    )
    minmax(
      65px,
      0.55fr
    )
    minmax(
      62px,
      0.5fr
    )
    minmax(
      105px,
      0.85fr
    )
    minmax(
      70px,
      0.55fr
    ) !important;
}


/* =========================================================
   10. TABLA HISTORIAL · DESKTOP SIN SCROLL
   ========================================================= */

.full-pedidos-table {
  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    100% !important;

  overflow-x:
    hidden !important;
}


.full-pedidos-table__row {
  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    100% !important;

  grid-template-columns:
    minmax(
      125px,
      1.25fr
    )
    minmax(
      90px,
      0.72fr
    )
    minmax(
      105px,
      0.8fr
    )
    minmax(
      65px,
      0.45fr
    )
    minmax(
      65px,
      0.45fr
    )
    minmax(
      125px,
      0.95fr
    )
    minmax(
      70px,
      0.55fr
    )
    minmax(
      105px,
      0.8fr
    )
    minmax(
      68px,
      0.48fr
    ) !important;
}


/* =========================================================
   11. PRODUCTOS DETALLE · DESKTOP SIN SCROLL
   ========================================================= */

.full-pedidos-items-table {
  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    100% !important;

  overflow-x:
    hidden !important;
}


.full-pedidos-items-row {
  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    100% !important;

  grid-template-columns:
    minmax(
      90px,
      0.8fr
    )
    minmax(
      145px,
      1.45fr
    )
    repeat(
      5,
      minmax(
        60px,
        0.5fr
      )
    )
    minmax(
      95px,
      0.8fr
    )
    minmax(
      100px,
      0.75fr
    ) !important;
}


/* =========================================================
   12. TABS DETALLE · SIN BARRA HORIZONTAL
   ========================================================= */

.full-pedidos-detail-tabs {
  display:
    grid !important;

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

  gap:
    5px !important;

  overflow-x:
    hidden !important;
}


.full-pedidos-detail-tab {
  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    100% !important;

  flex:
    none !important;

  white-space:
    normal !important;
}


/* =========================================================
   13. MODAL DETALLE · CENTRADO
   ========================================================= */

.full-pedidos-detail-modal {
  position:
    fixed !important;

  inset:
    0 !important;

  z-index:
    12000 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    100vw !important;

  height:
    100dvh !important;

  padding:
    22px !important;

  overflow:
    hidden !important;

  isolation:
    isolate;
}


.full-pedidos-detail-modal__backdrop {
  position:
    absolute !important;

  inset:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  background:
    rgba(
      0,
      0,
      0,
      0.58
    ) !important;

  border:
    0 !important;
}


.full-pedidos-detail-modal__dialog {
  position:
    relative !important;

  z-index:
    2 !important;

  width:
    min(
      1180px,
      calc(
        100vw -
        44px
      )
    ) !important;

  max-width:
    min(
      1180px,
      calc(
        100vw -
        44px
      )
    ) !important;

  height:
    auto !important;

  max-height:
    calc(
      100dvh -
      44px
    ) !important;

  border:
    1px
    solid
    var(
      --full-line-strong
    ) !important;

  border-radius:
    13px !important;

  background:
    var(
      --full-surface
    ) !important;

  overflow:
    hidden !important;

  box-shadow:
    0
    24px
    70px
    rgba(
      0,
      0,
      0,
      0.28
    ) !important;
}


/* =========================================================
   14. MODAL GENERAL
   ========================================================= */

.full-pedidos-modal {
  width:
    100vw !important;

  max-width:
    100vw !important;

  height:
    100dvh !important;

  padding:
    18px !important;

  overflow:
    hidden !important;
}


.full-pedidos-modal__dialog,
.full-pedidos-modal__dialog--product,
.full-pedidos-modal__dialog--small {
  max-width:
    calc(
      100vw -
      36px
    ) !important;

  border-color:
    var(
      --full-line-strong
    ) !important;

  overflow-x:
    hidden !important;
}


.full-pedidos-modal__body {
  min-width:
    0 !important;

  max-width:
    100% !important;

  overflow-x:
    hidden !important;

  overflow-y:
    auto !important;
}


/* =========================================================
   15. DOCUMENTACIÓN
   ========================================================= */

.full-pedidos-document-card,
.full-pedidos-document-grid,
.full-pedidos-document-card__body,
.full-pedidos-document-card__actions {
  min-width:
    0 !important;

  max-width:
    100% !important;
}


/* =========================================================
   16. FILTROS RESPONSIVE
   ========================================================= */

@media (
  max-width:
  1180px
) {
  .full-pedidos-filters--toolbar {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      ) !important;
  }


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


  .full-pedidos-filters__actions {
    width:
      100%;

    grid-column:
      1
      /
      -1;
  }


  .full-pedidos-filters__actions
  .full-pedidos-btn {
    flex:
      1
      1
      0;
  }
}


/* =========================================================
   17. RESPONSIVE 1050
   ========================================================= */

@media (
  max-width:
  1050px
) {
  .full-pedidos-create-layout--new {
    grid-template-columns:
      1fr !important;
  }


  .full-pedidos-preview-empty--new {
    min-height:
      260px !important;
  }


  .full-pedidos-metrics-strip {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      ) !important;
  }


  .full-pedidos-metric,
  .full-pedidos-metric:last-child {
    border-right:
      1px
      solid
      var(
        --full-line-strong
      ) !important;

    border-bottom:
      1px
      solid
      var(
        --full-line-strong
      ) !important;
  }


  .full-pedidos-metric:nth-child(
    3n
  ) {
    border-right:
      0 !important;
  }


  .full-pedidos-metric:nth-last-child(
    -n + 3
  ) {
    border-bottom:
      0 !important;
  }


  .full-pedidos-preview-summary--stock {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      ) !important;
  }


  .full-pedidos-preview-summary
  article {
    border-bottom:
      1px
      solid
      var(
        --full-line-strong
      ) !important;
  }


  .full-pedidos-preview-summary
  article:nth-child(
    3n
  ) {
    border-right:
      0 !important;
  }


  .full-pedidos-preview-summary
  article:nth-last-child(
    -n + 3
  ) {
    border-bottom:
      0 !important;
  }
}


/* =========================================================
   18. TABLET 900 · TABLAS → CARDS
   ========================================================= */

@media (
  max-width:
  900px
) {
  .full-pedidos-page {
    gap:
      10px !important;

    overflow-x:
      hidden !important;
  }


  /* =======================================================
     HISTORIAL PEDIDOS
     ======================================================= */

  .full-pedidos-table {
    display:
      grid !important;

    gap:
      7px !important;

    padding:
      7px !important;

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

    overflow-x:
      hidden !important;
  }


  .full-pedidos-table__row--head {
    display:
      none !important;
  }


  .full-pedidos-table__row--body {
    display:
      grid !important;

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

    width:
      100% !important;

    min-width:
      0 !important;

    min-height:
      0 !important;

    border:
      1px
      solid
      var(
        --full-line-strong
      ) !important;

    border-radius:
      9px;

    background:
      var(
        --full-surface
      );

    overflow:
      hidden;
  }


  .full-pedidos-table__row--body
  > span {
    display:
      flex !important;

    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      center;

    min-width:
      0 !important;

    min-height:
      52px;

    padding:
      8px !important;

    border-right:
      1px
      solid
      var(
        --full-line
      );

    border-bottom:
      1px
      solid
      var(
        --full-line
      );

    white-space:
      normal !important;

    overflow:
      hidden;
  }


  .full-pedidos-table__row--body
  > span:nth-child(
    2n
  ) {
    border-right:
      0;
  }


  .full-pedidos-table__row--body
  > span::before {
    content:
      attr(
        data-label
      );

    display:
      block;

    margin-bottom:
      4px;

    color:
      var(
        --full-muted
      );

    font-size:
      7.5px;

    font-weight:
      900;

    letter-spacing:
      0.06em;

    text-transform:
      uppercase;
  }


  .full-pedidos-table__row--body
  > span:last-child {
    grid-column:
      1
      /
      -1;

    border-right:
      0;

    border-bottom:
      0;
  }


  .full-pedidos-table__row--body
  > span:last-child
  .full-pedidos-btn {
    width:
      100%;
  }


  /* =======================================================
     BORRADOR
     ======================================================= */

  .full-pedidos-preview-table,
  .full-pedidos-preview-table--draft {
    width:
      calc(
        100% -
        16px
      ) !important;

    max-width:
      calc(
        100% -
        16px
      ) !important;

    margin:
      8px !important;

    max-height:
      none !important;

    overflow-x:
      hidden !important;
  }


  .full-pedidos-preview-row--head {
    display:
      none !important;
  }


  .full-pedidos-preview-row--draft:not(
    .full-pedidos-preview-row--head
  ) {
    display:
      grid !important;

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

    width:
      100% !important;

    min-width:
      0 !important;

    min-height:
      0 !important;

    margin:
      0 !important;

    border-bottom:
      1px
      solid
      var(
        --full-line-strong
      ) !important;
  }


  .full-pedidos-preview-row--draft
  > * {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      center;

    min-width:
      0 !important;

    min-height:
      50px;

    padding:
      7px !important;

    border-right:
      1px
      solid
      var(
        --full-line
      );

    border-bottom:
      1px
      solid
      var(
        --full-line
      );

    white-space:
      normal !important;

    overflow:
      hidden !important;
  }


  .full-pedidos-preview-row--draft
  > *:nth-child(
    2n
  ) {
    border-right:
      0;
  }


  .full-pedidos-preview-row--draft
  > *
  [data-label],
  .full-pedidos-preview-row--draft
  > [data-label] {
    min-width:
      0;
  }


  .full-pedidos-preview-row--draft
  > [data-label]::before {
    content:
      attr(
        data-label
      );

    display:
      block;

    margin-bottom:
      4px;

    color:
      var(
        --full-muted
      );

    font-size:
      7.5px;

    font-weight:
      900;

    letter-spacing:
      0.05em;

    text-transform:
      uppercase;
  }


  .full-pedidos-draft-actions {
    width:
      100% !important;

    flex-direction:
      row !important;

    align-items:
      center !important;

    justify-content:
      flex-start !important;
  }


  .full-pedidos-draft-actions
  .full-pedidos-icon-btn {
    flex:
      1
      1
      0 !important;

    width:
      auto !important;
  }


  /* =======================================================
     PRODUCTOS DETALLE
     ======================================================= */

  .full-pedidos-items-table {
    display:
      grid !important;

    gap:
      7px;

    padding:
      7px;

    border:
      0 !important;

    background:
      var(
        --full-bg
      );

    overflow-x:
      hidden !important;
  }


  .full-pedidos-items-row--head {
    display:
      none !important;
  }


  .full-pedidos-items-row:not(
    .full-pedidos-items-row--head
  ) {
    display:
      grid !important;

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

    width:
      100% !important;

    min-width:
      0 !important;

    border:
      1px
      solid
      var(
        --full-line-strong
      ) !important;

    border-radius:
      9px;

    overflow:
      hidden;
  }


  .full-pedidos-items-row:not(
    .full-pedidos-items-row--head
  )
  > * {
    min-width:
      0;

    min-height:
      50px;

    padding:
      7px !important;

    border-right:
      1px
      solid
      var(
        --full-line
      );

    border-bottom:
      1px
      solid
      var(
        --full-line
      );

    white-space:
      normal !important;
  }


  .full-pedidos-items-row:not(
    .full-pedidos-items-row--head
  )
  > *:nth-child(
    2n
  ) {
    border-right:
      0;
  }


  .full-pedidos-items-row
  > [data-label]::before {
    content:
      attr(
        data-label
      );

    display:
      block;

    margin-bottom:
      4px;

    color:
      var(
        --full-muted
      );

    font-size:
      7.5px;

    font-weight:
      900;

    letter-spacing:
      0.05em;

    text-transform:
      uppercase;
  }


  .full-pedidos-items-actions {
    width:
      100%;

    justify-content:
      flex-start !important;
  }


  .full-pedidos-items-actions
  .full-pedidos-icon-btn {
    flex:
      1
      1
      0;

    width:
      auto;
  }


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

  .full-pedidos-detail-modal {
    padding:
      10px !important;
  }


  .full-pedidos-detail-modal__dialog {
    width:
      calc(
        100vw -
        20px
      ) !important;

    max-width:
      calc(
        100vw -
        20px
      ) !important;

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


  .full-pedidos-detail-body--modal {
    padding:
      10px !important;

    overflow-x:
      hidden !important;
  }


  .full-pedidos-detail-summary__grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      ) !important;
  }


  .full-pedidos-detail-data {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      ) !important;
  }


  .full-pedidos-document-grid,
  .full-pedidos-movement-list {
    grid-template-columns:
      1fr !important;
  }
}


/* =========================================================
   19. MOBILE 700
   ========================================================= */

@media (
  max-width:
  700px
) {
  .full-pedidos-page {
    gap:
      8px !important;
  }


  .full-pedidos-head {
    align-items:
      flex-start !important;

    flex-direction:
      column !important;

    gap:
      8px !important;
  }


  .full-pedidos-head__actions {
    width:
      100% !important;

    display:
      grid !important;

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


  .full-pedidos-head-stat,
  .full-pedidos-head__actions
  .full-pedidos-btn {
    width:
      100% !important;
  }


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


  .full-pedidos-metric,
  .full-pedidos-metric:nth-child(
    3n
  ),
  .full-pedidos-metric:nth-last-child(
    -n + 3
  ) {
    border-right:
      1px
      solid
      var(
        --full-line-strong
      ) !important;

    border-bottom:
      1px
      solid
      var(
        --full-line-strong
      ) !important;
  }


  .full-pedidos-metric:nth-child(
    2n
  ) {
    border-right:
      0 !important;
  }


  .full-pedidos-metric:nth-last-child(
    -n + 2
  ) {
    border-bottom:
      0 !important;
  }


  .full-pedidos-files-grid--compact,
  .full-pedidos-upload-fields--compact {
    grid-template-columns:
      1fr !important;
  }


  .full-pedidos-upload-actions {
    align-items:
      stretch !important;

    flex-direction:
      column !important;
  }


  .full-pedidos-upload-actions
  > div {
    display:
      grid !important;

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


  .full-pedidos-upload-actions
  .full-pedidos-btn {
    width:
      100% !important;
  }


  .full-pedidos-preview-head {
    align-items:
      flex-start !important;

    flex-direction:
      column !important;
  }


  .full-pedidos-preview-head__actions {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      1fr
      auto;
  }


  .full-pedidos-preview-summary--stock {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      ) !important;
  }


  .full-pedidos-preview-summary
  article,
  .full-pedidos-preview-summary
  article:nth-child(
    3n
  ),
  .full-pedidos-preview-summary
  article:nth-last-child(
    -n + 3
  ) {
    border-right:
      1px
      solid
      var(
        --full-line-strong
      ) !important;

    border-bottom:
      1px
      solid
      var(
        --full-line-strong
      ) !important;
  }


  .full-pedidos-preview-summary
  article:nth-child(
    2n
  ) {
    border-right:
      0 !important;
  }


  .full-pedidos-preview-summary
  article:nth-last-child(
    -n + 2
  ) {
    border-bottom:
      0 !important;
  }


  .full-pedidos-filters--toolbar {
    grid-template-columns:
      1fr !important;
  }


  .full-pedidos-field--search,
  .full-pedidos-filters__actions {
    grid-column:
      auto !important;
  }


  .full-pedidos-filters__actions {
    display:
      grid !important;

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


  .full-pedidos-pagination {
    align-items:
      stretch !important;

    flex-direction:
      column !important;
  }


  .full-pedidos-pagination
  > div {
    width:
      100%;

    display:
      grid;

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


  .full-pedidos-pagination
  .full-pedidos-btn {
    width:
      100%;
  }


  .full-pedidos-detail-head {
    align-items:
      flex-start !important;

    flex-direction:
      column !important;
  }


  .full-pedidos-detail-head__actions {
    width:
      100% !important;

    justify-content:
      space-between !important;
  }


  .full-pedidos-detail-tabs {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      ) !important;

    padding:
      6px !important;
  }


  .full-pedidos-detail-summary__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      ) !important;
  }


  .full-pedidos-detail-hero {
    grid-template-columns:
      1fr !important;
  }


  .full-pedidos-detail-data {
    grid-template-columns:
      1fr !important;
  }


  .full-pedidos-document-card {
    grid-template-columns:
      34px
      minmax(
        0,
        1fr
      ) !important;
  }


  .full-pedidos-document-card__actions {
    grid-column:
      1
      /
      -1;

    flex-direction:
      row !important;
  }


  .full-pedidos-document-card__actions
  .full-pedidos-btn {
    flex:
      1
      1
      0;
  }


  .full-pedidos-product-searchbar {
    grid-template-columns:
      1fr !important;
  }


  .full-pedidos-product-searchbar
  .full-pedidos-btn {
    width:
      100%;
  }


  .full-pedidos-product-option {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      72px
      26px !important;
  }


  .full-pedidos-product-option
  > span:nth-child(
    3
  ) {
    display:
      none !important;
  }


  .full-pedidos-product-selected {
    grid-template-columns:
      1fr !important;
  }


  .full-pedidos-modal {
    padding:
      7px !important;
  }


  .full-pedidos-modal__dialog,
  .full-pedidos-modal__dialog--product,
  .full-pedidos-modal__dialog--small {
    width:
      calc(
        100vw -
        14px
      ) !important;

    max-width:
      calc(
        100vw -
        14px
      ) !important;

    max-height:
      calc(
        100dvh -
        14px
      ) !important;
  }


  .full-pedidos-modal__body {
    padding:
      10px !important;
  }
}


/* =========================================================
   20. MOBILE 480
   ========================================================= */

@media (
  max-width:
  480px
) {
  .full-pedidos-head__actions {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      ) !important;
  }


  .full-pedidos-head__actions
  .full-pedidos-btn {
    grid-column:
      1
      /
      -1;
  }


  .full-pedidos-metrics-strip {
    grid-template-columns:
      1fr !important;
  }


  .full-pedidos-metric,
  .full-pedidos-metric:nth-child(
    2n
  ),
  .full-pedidos-metric:nth-child(
    3n
  ),
  .full-pedidos-metric:nth-last-child(
    -n + 2
  ),
  .full-pedidos-metric:nth-last-child(
    -n + 3
  ) {
    border-right:
      0 !important;

    border-bottom:
      1px
      solid
      var(
        --full-line-strong
      ) !important;
  }


  .full-pedidos-metric:last-child {
    border-bottom:
      0 !important;
  }


  .full-pedidos-upload-actions
  > div,
  .full-pedidos-filters__actions,
  .full-pedidos-pagination
  > div {
    grid-template-columns:
      1fr !important;
  }


  .full-pedidos-preview-summary--stock {
    grid-template-columns:
      1fr !important;
  }


  .full-pedidos-preview-summary
  article,
  .full-pedidos-preview-summary
  article:nth-child(
    2n
  ),
  .full-pedidos-preview-summary
  article:nth-last-child(
    -n + 2
  ) {
    border-right:
      0 !important;

    border-bottom:
      1px
      solid
      var(
        --full-line-strong
      ) !important;
  }


  .full-pedidos-preview-summary
  article:last-child {
    border-bottom:
      0 !important;
  }


  .full-pedidos-table__row--body,
  .full-pedidos-preview-row--draft:not(
    .full-pedidos-preview-row--head
  ),
  .full-pedidos-items-row:not(
    .full-pedidos-items-row--head
  ) {
    grid-template-columns:
      1fr !important;
  }


  .full-pedidos-table__row--body
  > span,
  .full-pedidos-preview-row--draft
  > *,
  .full-pedidos-items-row:not(
    .full-pedidos-items-row--head
  )
  > * {
    border-right:
      0 !important;
  }


  .full-pedidos-detail-tabs {
    grid-template-columns:
      1fr !important;
  }


  .full-pedidos-detail-summary__grid {
    grid-template-columns:
      1fr !important;
  }


  .full-pedidos-document-card__actions {
    flex-direction:
      column !important;
  }


  .full-pedidos-product-option {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      26px !important;
  }


  .full-pedidos-product-option
  > span:nth-child(
    2
  ),
  .full-pedidos-product-option
  > span:nth-child(
    3
  ) {
    display:
      none !important;
  }


  .full-pedidos-quantity-stock-summary,
  .full-pedidos-draft-delete-summary {
    grid-template-columns:
      1fr !important;
  }


  .full-pedidos-detail-modal {
    padding:
      5px !important;
  }


  .full-pedidos-detail-modal__dialog {
    width:
      calc(
        100vw -
        10px
      ) !important;

    max-width:
      calc(
        100vw -
        10px
      ) !important;

    max-height:
      calc(
        100dvh -
        10px
      ) !important;
  }
}


/* =========================================================
   21. DARK · FONDOS
   ========================================================= */

html[data-theme="dark"]
.full-pedidos-table__row--body.is-selected,
body.dark
.full-pedidos-table__row--body.is-selected,
body[data-theme="dark"]
.full-pedidos-table__row--body.is-selected {
  background:
    #171717 !important;
}


html[data-theme="dark"]
.full-pedidos-preview-row--draft.is-stock-warning:hover,
html[data-theme="dark"]
.full-pedidos-items-row--stock.is-stock-warning:hover,
body.dark
.full-pedidos-preview-row--draft.is-stock-warning:hover,
body.dark
.full-pedidos-items-row--stock.is-stock-warning:hover,
body[data-theme="dark"]
.full-pedidos-preview-row--draft.is-stock-warning:hover,
body[data-theme="dark"]
.full-pedidos-items-row--stock.is-stock-warning:hover {
  background:
    rgba(
      190,
      135,
      24,
      0.16
    ) !important;
}


/* =========================================================
   22. PROTECCIÓN FINAL · NADA HORIZONTAL
   ========================================================= */

.full-pedidos-page,
.full-pedidos-head,
.full-pedidos-metrics,
.full-pedidos-metrics-strip,
.full-pedidos-create-layout,
.full-pedidos-upload-mount,
.full-pedidos-preview-mount,
.full-pedidos-upload-card,
.full-pedidos-upload-body,
.full-pedidos-files-grid,
.full-pedidos-upload-fields,
.full-pedidos-preview-card,
.full-pedidos-preview-summary,
.full-pedidos-preview-table,
.full-pedidos-management,
.full-pedidos-list-card,
.full-pedidos-filters,
.full-pedidos-list-mount,
.full-pedidos-table,
.full-pedidos-detail-modal,
.full-pedidos-detail-modal__dialog,
.full-pedidos-detail-mount,
.full-pedidos-detail-card,
.full-pedidos-detail-head,
.full-pedidos-detail-tabs,
.full-pedidos-detail-body,
.full-pedidos-detail-summary,
.full-pedidos-detail-products,
.full-pedidos-detail-files,
.full-pedidos-detail-movements,
.full-pedidos-items-table,
.full-pedidos-document-grid,
.full-pedidos-movement-list,
.full-pedidos-modal,
.full-pedidos-modal__dialog,
.full-pedidos-modal__body,
.full-pedidos-product-searchbar,
.full-pedidos-product-results,
.full-pedidos-product-selected {
  min-width:
    0 !important;

  max-width:
    100% !important;

  overflow-x:
    hidden !important;
}


.full-pedidos-page img,
.full-pedidos-page svg,
.full-pedidos-modal img,
.full-pedidos-modal svg,
.full-pedidos-detail-modal img,
.full-pedidos-detail-modal svg {
  max-width:
    100%;
}


.full-pedidos-page input,
.full-pedidos-page select,
.full-pedidos-page textarea,
.full-pedidos-page button,
.full-pedidos-modal input,
.full-pedidos-modal select,
.full-pedidos-modal textarea,
.full-pedidos-modal button,
.full-pedidos-detail-modal input,
.full-pedidos-detail-modal select,
.full-pedidos-detail-modal textarea,
.full-pedidos-detail-modal button {
  min-width:
    0;

  max-width:
    100%;
}


/* =========================================================
   23. MOTION REDUCIDO
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {
  .full-pedidos-page *,
  .full-pedidos-page *::before,
  .full-pedidos-page *::after,
  .full-pedidos-modal *,
  .full-pedidos-detail-modal *,
  .full-pedidos-toast {
    animation:
      none !important;

    transition:
      none !important;

    scroll-behavior:
      auto !important;
  }
}.full-pedidos-detail-modal__dialog {
  width: min(1260px, calc(100vw - 28px)) !important;
  max-width: min(1260px, calc(100vw - 28px)) !important;
  max-height: calc(100dvh - 28px) !important;
  border-radius: 16px !important;
}

.full-pedidos-detail-head {
  padding: 18px 18px 14px !important;
}

.full-pedidos-detail-head__identity h3 {
  font-size: 18px !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
}

.full-pedidos-detail-head__identity > small {
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

.full-pedidos-detail-head__actions .full-pedidos-btn,
.full-pedidos-detail-head__actions .full-pedidos-icon-btn {
  min-height: 40px !important;
  font-size: 13px !important;
}

.full-pedidos-detail-tabs {
  padding: 8px 10px !important;
}

.full-pedidos-detail-tab {
  min-height: 42px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.full-pedidos-detail-body--modal {
  padding: 18px !important;
}

.full-pedidos-detail-section-head > div > span {
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.07em !important;
}

.full-pedidos-detail-section-head > div > strong,
.full-pedidos-detail-section-head > div > h4 {
  font-size: 14px !important;
  font-weight: 900 !important;
}

.full-pedidos-detail-summary__grid small,
.full-pedidos-detail-data small {
  font-size: 9px !important;
  font-weight: 900 !important;
}

.full-pedidos-detail-summary__grid strong,
.full-pedidos-detail-data strong {
  font-size: 13px !important;
  font-weight: 800 !important;
}

.full-pedidos-document-card {
  min-height: 104px !important;
  padding: 14px !important;
  border-radius: 14px !important;
}

.full-pedidos-document-card__body small {
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
}

.full-pedidos-document-card__body strong {
  font-size: 18px !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
}

.full-pedidos-document-card__body p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
}

.full-pedidos-document-card__meta,
.full-pedidos-document-card__body .full-pedidos-meta,
.full-pedidos-document-card__body .full-pedidos-file-meta {
  font-size: 11px !important;
  font-weight: 700 !important;
}

.full-pedidos-document-card__actions {
  gap: 10px !important;
}

.full-pedidos-document-card__actions .full-pedidos-btn {
  min-height: 38px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.full-pedidos-status {
  min-height: 30px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

@media (max-width: 900px) {
  .full-pedidos-detail-modal {
    padding: 10px !important;
  }

  .full-pedidos-detail-modal__dialog {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
  }

  .full-pedidos-detail-head__identity h3 {
    font-size: 17px !important;
  }

  .full-pedidos-detail-tab {
    font-size: 12px !important;
  }

  .full-pedidos-document-card__body strong {
    font-size: 16px !important;
  }

  .full-pedidos-document-card__body p {
    font-size: 12px !important;
  }
}

@media (max-width: 640px) {
  .full-pedidos-detail-modal {
    padding: 6px !important;
  }

  .full-pedidos-detail-modal__dialog {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 12px !important;
  }

  .full-pedidos-detail-head {
    padding: 14px 14px 12px !important;
  }

  .full-pedidos-detail-body--modal {
    padding: 14px !important;
  }

  .full-pedidos-detail-tab {
    min-height: 40px !important;
    font-size: 11px !important;
  }

  .full-pedidos-document-card {
    min-height: 96px !important;
    padding: 12px !important;
  }

  .full-pedidos-document-card__body strong {
    font-size: 15px !important;
  }

  .full-pedidos-document-card__body p {
    font-size: 11px !important;
  }

  .full-pedidos-document-card__actions .full-pedidos-btn {
    min-height: 36px !important;
    font-size: 11px !important;
  }
}.full-pedidos-detail-modal__dialog {
  width: min(1210px, calc(100vw - 36px)) !important;
  max-width: min(1210px, calc(100vw - 36px)) !important;
}

.full-pedidos-detail-head__identity h3 {
  font-size: 16px !important;
}

.full-pedidos-detail-head__identity > small {
  font-size: 9px !important;
}

.full-pedidos-detail-tab {
  font-size: 11px !important;
}

.full-pedidos-document-card__body small {
  font-size: 9px !important;
}

.full-pedidos-document-card__body strong {
  font-size: 14px !important;
}

.full-pedidos-document-card__body p {
  font-size: 10.5px !important;
}

.full-pedidos-document-card__actions .full-pedidos-btn {
  font-size: 10.5px !important;
}