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

   WIRTZ HUB · RECURSOS · FULL
   CSS COMPLETO
   PARTE 1 DE 2
   ========================================================= */

/* =========================================================
   01. RESET LOCAL
   ========================================================= */

.full-page,
.full-page *,
.full-page *::before,
.full-page *::after,
.full-toast,
.full-toast *,
.full-boxes-modal,
.full-boxes-modal *,
.full-camera-modal,
.full-camera-modal *,
.full-camera-modal *::before,
.full-camera-modal *::after {
  box-sizing: border-box;

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

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

.full-page button,
.full-page input,
.full-page select,
.full-page textarea,
.full-boxes-modal button,
.full-boxes-modal input,
.full-camera-modal button,
.full-camera-modal select {
  font: inherit;
}

.full-page button,
.full-boxes-modal button,
.full-camera-modal button {
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.full-page .icon,
.full-page svg,
.full-toast .icon,
.full-toast svg,
.full-boxes-modal .icon,
.full-boxes-modal svg,
.full-camera-modal .icon,
.full-camera-modal svg {
  display: block;

  flex: 0 0 auto;

  width: 14px;
  height: 14px;

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

  stroke: currentColor;
  stroke-width: 1.9;

  fill: none;

  pointer-events: none;
}

/* =========================================================
   02. VARIABLES · CLARO
   ========================================================= */

.full-page,
.full-boxes-modal,
.full-camera-modal {
  --full-page-bg: #f5f5f5;

  --full-surface: #ffffff;
  --full-surface-soft: #f7f7f7;
  --full-surface-muted: #eeeeee;
  --full-surface-strong: #e6e6e6;

  --full-hover: #f2f2f2;
  --full-active: #e9e9e9;

  --full-text: #0a0a0a;
  --full-text-strong: #000000;
  --full-text-soft: #404040;
  --full-text-muted: #737373;
  --full-text-muted-2: #a3a3a3;

  --full-border: #dddddd;
  --full-border-soft: #ebebeb;
  --full-border-strong: #bfbfbf;
  --full-border-dark: #989898;

  --full-primary: #0a0a0a;
  --full-primary-hover: #202020;
  --full-primary-text: #ffffff;

  --full-success: #15803d;
  --full-success-soft: rgba(21, 128, 61, 0.07);
  --full-success-border: rgba(21, 128, 61, 0.3);

  --full-warning: #b45309;
  --full-warning-soft: rgba(180, 83, 9, 0.07);
  --full-warning-border: rgba(180, 83, 9, 0.3);

  --full-danger: #dc2626;
  --full-danger-soft: rgba(220, 38, 38, 0.07);
  --full-danger-border: rgba(220, 38, 38, 0.3);

  --full-info: #404040;
  --full-info-soft: rgba(0, 0, 0, 0.045);
  --full-info-border: rgba(0, 0, 0, 0.2);

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

  --full-transition-fast: 130ms ease;

  --full-transition:
    220ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}

/* =========================================================
   03. VARIABLES · OSCURO
   ========================================================= */

html[data-theme="dark"] .full-page,
html[data-theme="dark"] .full-boxes-modal,
html[data-theme="dark"] .full-camera-modal,
body.dark .full-page,
body.dark .full-boxes-modal,
body.dark .full-camera-modal,
.dark .full-page,
.dark .full-boxes-modal,
.dark .full-camera-modal {
  --full-page-bg: #080808;

  --full-surface: #090909;
  --full-surface-soft: #111111;
  --full-surface-muted: #181818;
  --full-surface-strong: #1d1d1d;

  --full-hover: #151515;
  --full-active: #1b1b1b;

  --full-text: #f5f5f5;
  --full-text-strong: #ffffff;
  --full-text-soft: #cccccc;
  --full-text-muted: #8a8a8a;
  --full-text-muted-2: #606060;

  --full-border: #272727;
  --full-border-soft: #1c1c1c;
  --full-border-strong: #404040;
  --full-border-dark: #555555;

  --full-primary: #f5f5f5;
  --full-primary-hover: #ffffff;
  --full-primary-text: #080808;

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

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

  --full-danger: #f87171;
  --full-danger-soft: rgba(248, 113, 113, 0.075);
  --full-danger-border: rgba(248, 113, 113, 0.28);

  --full-info: #d4d4d4;
  --full-info-soft: rgba(255, 255, 255, 0.05);
  --full-info-border: rgba(255, 255, 255, 0.18);
}

/* =========================================================
   04. APP CONTENT
   ========================================================= */

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

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

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

  padding: 0 !important;

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

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

body:has(.full-page),
body:has(.full-page) .app-shell,
body:has(.full-page) .app-main {
  min-width: 0 !important;

  overflow-x: hidden !important;
}

/* =========================================================
   05. PAGE
   ========================================================= */

.full-page {
  display: grid;

  grid-auto-rows: max-content;

  align-content: start;

  gap: 8px;

  width: 100%;
  min-width: 0;

  padding: 8px;

  color:
    var(
      --full-text
    );

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

  overflow-x: hidden;

  animation:
    fullPageEnter
    240ms
    ease
    both;
}

/* =========================================================
   06. SUPERFICIES
   ========================================================= */

.full-head,
.full-operation-banner,
.full-orders-panel,
.full-active-order-card,
.full-documents-panel,
.full-scanner-card,
.full-scan-result,
.full-products-panel,
.full-history-panel,
.full-active-order-empty {
  width: 100%;
  min-width: 0;

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

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

  background:
    var(
      --full-surface
    );

  box-shadow: none;

  overflow: hidden;
}

/* =========================================================
   07. HEADER
   ========================================================= */

.full-head {
  position: relative;

  display: grid;

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

  align-items: center;

  gap: 14px;

  min-height: 72px;

  padding:
    10px
    12px;
}

.full-head::before {
  content: "";

  position: absolute;

  top: 0;
  right: 12px;
  left: 12px;

  height: 1px;

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

  opacity: 0.8;
}

/* =========================================================
   08. BRAND
   ========================================================= */

.full-brand {
  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;
}

.full-brand__icon {
  position: relative;

  display: inline-flex;

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

  flex:
    0
    0
    38px;

  width: 38px;
  height: 38px;

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

  border-radius: 10px;

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

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

.full-brand__icon::before,
.full-brand__icon::after {
  content: "";

  position: absolute;

  width: 5px;
  height: 5px;

  opacity: 0.6;
}

.full-brand__icon::before {
  top: 4px;
  left: 4px;

  border-top:
    1px
    solid
    currentColor;

  border-left:
    1px
    solid
    currentColor;
}

.full-brand__icon::after {
  right: 4px;
  bottom: 4px;

  border-right:
    1px
    solid
    currentColor;

  border-bottom:
    1px
    solid
    currentColor;
}

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

/* =========================================================
   09. TITULACIÓN
   ========================================================= */

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

.full-brand__body > span {
  display: block;

  margin-bottom: 3px;

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

  font-size: 9px;

  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}

.full-brand__body h2 {
  margin: 0;

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

  font-size:
    clamp(
      22px,
      1.8vw,
      27px
    );

  font-weight: 900;

  line-height: 1;

  letter-spacing: -0.04em;
}

.full-brand__body p {
  max-width: 820px;

  margin:
    5px
    0
    0;

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

  font-size: 11.5px;

  font-weight: 620;

  line-height: 1.4;
}

/* =========================================================
   10. ACCIONES HEADER
   ========================================================= */

.full-head__actions {
  display: flex;

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

  flex-wrap: wrap;

  gap: 6px;

  min-width: 0;
}

/* =========================================================
   11. RESUMEN HEADER
   ========================================================= */

.full-source {
  display: grid;

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

  align-items: center;

  gap: 7px;

  min-height: 38px;

  padding:
    5px
    8px;

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

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

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

.full-source__icon {
  display: inline-flex;

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

  width: 30px;
  height: 30px;

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

  border-radius: 7px;

  background:
    var(
      --full-surface
    );

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

.full-source__icon .icon,
.full-source__icon svg {
  width: 12px;
  height: 12px;
}

.full-source small,
.full-update span {
  display: block;

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

  font-size: 7.8px;

  font-weight: 900;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}

.full-source strong,
.full-update strong {
  display: block;

  margin-top: 2px;

  color:
    var(
      --full-text
    );

  font-size: 11px;

  font-weight: 850;
}

.full-update {
  min-width: 108px;

  padding:
    4px
    6px;

  text-align: right;
}

/* =========================================================
   12. BOTONES
   ========================================================= */

.full-btn {
  display: inline-flex;

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

  gap: 5px;

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

  padding:
    0
    9px;

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

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

  outline: none;

  background:
    var(
      --full-surface
    );

  color:
    var(
      --full-text
    );

  font-size: 10px;

  font-weight: 780;

  line-height: 1;

  white-space: nowrap;

  cursor: pointer;

  box-shadow: none;

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

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

  background:
    var(
      --full-text
    );

  color:
    var(
      --full-surface
    );

  transform:
    translateY(
      -1px
    );
}

.full-btn:active:not(:disabled) {
  transform:
    scale(
      0.97
    );
}

.full-btn:disabled {
  opacity: 0.45;

  cursor: not-allowed;

  transform: none;
}

.full-btn .icon,
.full-btn svg {
  width: 12px;
  height: 12px;

  min-width: 12px;
}

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

  background:
    var(
      --full-primary
    );

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

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

  background:
    var(
      --full-primary-hover
    );

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

/* =========================================================
   13. ESTADO OPERATIVO
   ========================================================= */

.full-operation-status {
  width: 100%;
  min-width: 0;
}

.full-operation-status:empty {
  display: none;
}

.full-operation-banner {
  display: grid;

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

  align-items: center;

  gap: 8px;

  min-height: 52px;

  padding:
    7px
    9px;
}

.full-operation-banner__icon {
  display: inline-flex;

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

  width: 34px;
  height: 34px;

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

  border-radius: 8px;

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

.full-operation-banner__icon .icon,
.full-operation-banner__icon svg {
  width: 14px;
  height: 14px;
}

.full-operation-banner > div {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.full-operation-banner > div > span {
  font-size: 8px;

  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.full-operation-banner > div > strong {
  min-width: 0;

  color:
    var(
      --full-text
    );

  font-size: 10px;

  font-weight: 700;

  line-height: 1.35;

  overflow-wrap: anywhere;
}

.full-operation-banner.is-loading {
  border-color:
    var(
      --full-info-border
    );

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

.full-operation-banner.is-loading
.full-operation-banner__icon,
.full-operation-banner.is-loading
> div
> span {
  color:
    var(
      --full-info
    );
}

.full-operation-banner.is-warning {
  border-color:
    var(
      --full-warning-border
    );

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

.full-operation-banner.is-warning
.full-operation-banner__icon,
.full-operation-banner.is-warning
> div
> span {
  color:
    var(
      --full-warning
    );
}

.full-operation-banner.is-success {
  border-color:
    var(
      --full-success-border
    );

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

.full-operation-banner.is-success
.full-operation-banner__icon,
.full-operation-banner.is-success
> div
> span {
  color:
    var(
      --full-success
    );
}

.full-operation-banner.is-error {
  border-color:
    var(
      --full-danger-border
    );

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

.full-operation-banner.is-error
.full-operation-banner__icon,
.full-operation-banner.is-error
> div
> span {
  color:
    var(
      --full-danger
    );
}

/* =========================================================
   14. CENTRO OPERATIVO
   ========================================================= */

.full-command-center {
  display: grid;

  grid-template-columns:
    minmax(
      280px,
      0.68fr
    )
    minmax(
      0,
      1.32fr
    );

  align-items: start;

  gap: 8px;

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

.full-orders-panel {
  display: grid;

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

  min-height: 100%;
}

.full-operation-column {
  display: grid;

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

  gap: 8px;

  min-width: 0;
}

/* =========================================================
   15. CABECERAS DE SECCIÓN
   ========================================================= */

.full-section-head {
  display: grid;

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

  align-items: center;

  gap: 8px;

  min-height: 50px;

  padding:
    7px
    9px;

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

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

.full-section-head > div:first-child {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.full-section-head > div:first-child > span {
  color:
    var(
      --full-text-muted
    );

  font-size: 8px;

  font-weight: 900;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.full-section-head > div:first-child > strong {
  overflow: hidden;

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

  font-size: 11px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.full-section-counter,
.full-route-badge {
  display: inline-flex;

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

  gap: 4px;

  min-height: 25px;

  padding:
    0
    7px;

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

  border-radius: 999px;

  background:
    var(
      --full-surface
    );

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

  font-size: 8px;

  font-weight: 800;

  white-space: nowrap;
}

.full-section-counter.is-success {
  border-color:
    var(
      --full-success-border
    );

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

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

.full-section-counter.is-warning {
  border-color:
    var(
      --full-warning-border
    );

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

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

.full-route-badge {
  color:
    var(
      --full-text
    );
}

.full-route-badge .icon,
.full-route-badge svg {
  width: 10px;
  height: 10px;
}

/* =========================================================
   16. LISTA DE PEDIDOS
   ========================================================= */

.full-orders-open-list {
  display: grid;

  align-content: start;

  gap: 6px;

  width: 100%;
  min-width: 0;

  max-height: 670px;

  padding: 7px;

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

  scrollbar-width: thin;

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

.full-orders-open-list::-webkit-scrollbar {
  width: 6px;
}

.full-orders-open-list::-webkit-scrollbar-thumb {
  border:
    2px
    solid
    transparent;

  border-radius: 999px;

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

  background-clip: padding-box;
}

/* =========================================================
   17. CARD PEDIDO
   ========================================================= */

.full-order-card {
  position: relative;

  display: grid;

  gap: 7px;

  width: 100%;
  min-width: 0;

  padding:
    8px
    9px;

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

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

  outline: none;

  background:
    var(
      --full-surface
    );

  color:
    var(
      --full-text
    );

  text-align: left;

  cursor: pointer;

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

.full-order-card:hover {
  border-color:
    var(
      --full-border-dark
    );

  background:
    var(
      --full-hover
    );

  transform:
    translateY(
      -1px
    );
}

.full-order-card.is-selected {
  border-color:
    var(
      --full-text
    );

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

.full-order-card.is-selected::before {
  content: "";

  position: absolute;

  top: 7px;
  bottom: 7px;
  left: 0;

  width: 2px;

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

/* =========================================================
   18. CARD PEDIDO · TOP
   ========================================================= */

.full-order-card__top {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 7px;

  min-width: 0;
}

.full-order-card__identity {
  display: grid;

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

  align-items: center;

  gap: 7px;

  min-width: 0;
}

.full-order-card__identity > span:last-child {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.full-order-card__identity strong {
  overflow: hidden;

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

  font-size: 10px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.full-order-card__identity small {
  overflow: hidden;

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

  font-size: 8px;

  font-weight: 620;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.full-order-card__icon {
  display: inline-flex;

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

  width: 32px;
  height: 32px;

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

  border-radius: 7px;

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

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

.full-order-card__icon .icon,
.full-order-card__icon svg {
  width: 13px;
  height: 13px;
}

/* =========================================================
   19. CARD PEDIDO · ESTADÍSTICAS
   ========================================================= */

.full-order-card__stats {
  display: grid;

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

  gap: 4px;
}

.full-order-card__stats > span {
  min-width: 0;

  padding: 6px;

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

  border-radius: 6px;

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

.full-order-card__stats small {
  display: block;

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

  font-size: 7px;

  font-weight: 800;

  text-transform: uppercase;
}

.full-order-card__stats strong {
  display: block;

  margin-top: 2px;

  color:
    var(
      --full-text
    );

  font-size: 10px;

  font-weight: 900;
}

/* =========================================================
   20. PROGRESO PEDIDO
   ========================================================= */

.full-order-card__progress {
  display: grid;

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

  align-items: center;

  gap: 6px;
}

.full-order-card__progress > span {
  display: block;

  height: 5px;

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

  border-radius: 999px;

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

  overflow: hidden;
}

.full-order-card__progress > span > b {
  display: block;

  height: 100%;

  border-radius: inherit;

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

.full-order-card__progress > strong {
  color:
    var(
      --full-text-muted
    );

  font-size: 8px;

  font-weight: 850;

  text-align: right;
}

.full-order-card__footer {
  display: flex;

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

  gap: 6px;

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

  font-size: 8px;

  font-weight: 620;
}

.full-order-card__footer b {
  color:
    var(
      --full-text
    );

  font-weight: 850;
}

/* =========================================================
   21. BADGES
   ========================================================= */

.full-order-status,
.full-document-state {
  display: inline-flex;

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

  min-height: 22px;

  padding:
    0
    7px;

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

  border-radius: 999px;

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

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

  font-size: 7.5px;

  font-weight: 850;

  line-height: 1;

  white-space: nowrap;
}

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

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

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

.full-order-status.is-complete,
.full-document-state.is-available {
  border-color:
    var(
      --full-success-border
    );

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

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

.full-order-status.is-warning,
.full-order-status.is-pending,
.full-document-state.is-missing {
  border-color:
    var(
      --full-warning-border
    );

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

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

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

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

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

/* =========================================================
   22. PEDIDO ACTIVO
   ========================================================= */

.full-active-order {
  width: 100%;
  min-width: 0;
}

.full-active-order-card {
  display: grid;
}

.full-active-order-card__head {
  display: flex;

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

  gap: 10px;

  min-width: 0;

  padding:
    9px
    10px;

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

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

.full-active-order-card__identity {
  min-width: 0;
}

.full-active-order-card__identity > span {
  display: block;

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

  font-size: 8px;

  font-weight: 900;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.full-active-order-card__identity h3 {
  margin:
    3px
    0
    0;

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

  font-size: 15px;

  font-weight: 900;

  line-height: 1.05;

  letter-spacing: -0.03em;
}

.full-active-order-card__identity p {
  margin:
    4px
    0
    0;

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

  font-size: 8.5px;

  font-weight: 620;

  line-height: 1.35;
}

/* =========================================================
   23. PEDIDO ACTIVO · MÉTRICAS
   ========================================================= */

.full-active-order-card__metrics {
  display: grid;

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

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

.full-active-order-card__metrics article {
  position: relative;

  display: grid;

  align-content: center;

  gap: 3px;

  min-width: 0;
  min-height: 58px;

  padding:
    7px
    8px;

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

.full-active-order-card__metrics article:last-child {
  border-right: 0;
}

.full-active-order-card__metrics article::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;
  left: 0;

  height: 2px;

  background:
    var(
      --full-text
    );

  opacity: 0.14;
}

.full-active-order-card__metrics article.is-pending::before {
  background:
    var(
      --full-warning
    );

  opacity: 1;
}

.full-active-order-card__metrics span {
  color:
    var(
      --full-text-muted
    );

  font-size: 7px;

  font-weight: 850;

  text-transform: uppercase;
}

.full-active-order-card__metrics strong {
  color:
    var(
      --full-text-strong
    );

  font-size: 15px;

  font-weight: 900;
}

.full-active-order-card__metrics
article.is-pending
strong {
  color:
    var(
      --full-warning
    );
}

/* =========================================================
   24. PEDIDO ACTIVO · PROGRESO
   ========================================================= */

.full-active-order-card__progress {
  display: grid;

  gap: 6px;

  padding:
    8px
    10px;
}

.full-active-order-card__progress > div {
  display: flex;

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

  gap: 8px;
}

.full-active-order-card__progress > div > span {
  color:
    var(
      --full-text-muted
    );

  font-size: 8px;

  font-weight: 700;
}

.full-active-order-card__progress > div > strong {
  color:
    var(
      --full-text
    );

  font-size: 8.5px;

  font-weight: 900;
}

.full-active-order-card__progress > span {
  display: block;

  height: 6px;

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

  border-radius: 999px;

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

  overflow: hidden;
}

.full-active-order-card__progress > span > b {
  display: block;

  height: 100%;

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

/* =========================================================
   25. PEDIDO ACTIVO · VACÍO
   ========================================================= */

.full-active-order-empty {
  display: grid;

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

  align-items: center;

  gap: 9px;

  min-height: 100px;

  padding: 10px;

  border-style: dashed;

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

.full-active-order-empty > span {
  display: inline-flex;

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

  width: 38px;
  height: 38px;

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

  border-radius: 9px;

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

.full-active-order-empty .icon,
.full-active-order-empty svg {
  width: 15px;
  height: 15px;
}

.full-active-order-empty > div {
  display: grid;

  gap: 3px;
}

.full-active-order-empty strong {
  color:
    var(
      --full-text
    );

  font-size: 10px;

  font-weight: 850;
}

.full-active-order-empty p {
  margin: 0;

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

  font-size: 8.5px;

  font-weight: 620;

  line-height: 1.4;
}

/* =========================================================
   26. DOCUMENTOS
   ========================================================= */

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

.full-documents-panel {
  display: grid;
}

.full-documents-grid {
  display: grid;

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

  gap: 6px;

  padding: 7px;
}

.full-document-card {
  display: grid;

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

  align-items: center;

  gap: 7px;

  min-width: 0;

  padding: 7px;

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

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

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

.full-document-card.is-available {
  border-color:
    var(
      --full-success-border
    );
}

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

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

.full-document-card__icon {
  display: inline-flex;

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

  width: 34px;
  height: 34px;

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

  border-radius: 7px;

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

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

.full-document-card.is-available
.full-document-card__icon {
  border-color:
    var(
      --full-success-border
    );

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

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

.full-document-card__icon .icon,
.full-document-card__icon svg {
  width: 13px;
  height: 13px;
}

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

.full-document-card__body > span {
  display: block;

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

  font-size: 7px;

  font-weight: 900;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}

.full-document-card__body > strong {
  display: block;

  margin-top: 2px;

  overflow: hidden;

  color:
    var(
      --full-text
    );

  font-size: 9.5px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.full-document-card__body > p {
  margin:
    3px
    0
    0;

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

  font-size: 8px;

  line-height: 1.35;
}

.full-document-card__meta {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 4px;

  margin-top: 5px;
}

.full-document-card__meta > span {
  display: inline-flex;

  align-items: center;

  min-height: 20px;

  padding:
    0
    6px;

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

  border-radius: 999px;

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

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

  font-size: 7px;

  font-weight: 700;
}

.full-document-card__status {
  align-self: start;
}

.full-document-card > .full-btn {
  grid-column:
    1 /
    -1;

  width: 100%;
}

.full-document-card__download {
  border-color:
    var(
      --full-success-border
    );

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

.full-document-card__download:hover:not(:disabled) {
  border-color:
    var(
      --full-success
    );

  background:
    var(
      --full-success
    );

  color: #ffffff;
}

/* =========================================================
   27. SCANNER
   ========================================================= */

.full-scanner-mount,
.full-last-result {
  width: 100%;
  min-width: 0;
}

.full-scanner-card {
  display: grid;
}

.full-scanner-card__body {
  padding: 8px;
}

.full-scanner-form {
  display: grid;

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

  align-items: stretch;

  gap: 6px;
}

/* =========================================================
   28. INPUT SCANNER
   ========================================================= */

.full-scanner-input {
  display: grid;

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

  align-items: center;

  min-width: 0;

  height: 42px;

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

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

  background:
    var(
      --full-surface
    );

  overflow: hidden;
}

.full-scanner-input:focus-within {
  border-color:
    var(
      --full-text
    );

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

.full-scanner-input__icon {
  display: inline-flex;

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

  width: 36px;
  height: 100%;

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

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

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

.full-scanner-input__icon .icon,
.full-scanner-input__icon svg {
  width: 14px;
  height: 14px;
}

.full-scanner-input input {
  width: 100%;
  min-width: 0;

  height: 100%;

  padding:
    0
    9px;

  border: 0;

  outline: none;

  background: transparent;

  color:
    var(
      --full-text
    );

  font-size: 11px;

  font-weight: 750;
}

.full-scanner-input input::placeholder {
  color:
    var(
      --full-text-muted-2
    );

  font-weight: 600;
}

.full-scanner-input__key {
  display: inline-flex;

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

  min-height: 22px;

  margin-right: 7px;

  padding:
    0
    6px;

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

  border-radius: 5px;

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

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

  font-size: 7px;

  font-weight: 850;
}

.full-scanner-form > .full-btn,
.full-camera-button {
  width: 100%;

  min-width: 0;

  height: 42px;
  min-height: 42px;

  padding:
    0
    8px;

  font-size: 9.5px;
}

/* =========================================================
   29. BOTÓN CÁMARA
   ========================================================= */

.full-camera-button {
  border-color:
    var(
      --full-border-strong
    ) !important;

  background:
    var(
      --full-surface
    ) !important;

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

.full-camera-button:hover:not(:disabled) {
  border-color:
    var(
      --full-text
    ) !important;

  background:
    var(
      --full-text
    ) !important;

  color:
    var(
      --full-surface
    ) !important;
}

/* =========================================================
   30. AYUDA SCANNER
   ========================================================= */

.full-scanner-help {
  display: flex;

  align-items: flex-start;

  gap: 6px;

  margin-top: 6px;

  padding:
    7px
    8px;

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

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

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

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

  font-size: 8px;

  font-weight: 620;

  line-height: 1.4;
}

.full-scanner-help .icon,
.full-scanner-help svg {
  width: 11px;
  height: 11px;

  min-width: 11px;

  margin-top: 1px;
}

/* =========================================================
   31. RESULTADO ESCANEO
   ========================================================= */

.full-scan-result {
  display: grid;

  gap: 8px;

  min-height: 82px;

  padding: 8px;
}

.full-scan-result__main {
  display: grid;

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

  align-items: center;

  gap: 8px;
}

.full-scan-result__icon {
  display: inline-flex;

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

  width: 38px;
  height: 38px;

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

  border-radius: 9px;

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

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

.full-scan-result__icon .icon,
.full-scan-result__icon svg {
  width: 15px;
  height: 15px;
}

.full-scan-result__content {
  display: grid;

  gap: 2px;

  min-width: 0;
}

.full-scan-result__content > span {
  color:
    var(
      --full-text-muted
    );

  font-size: 7.5px;

  font-weight: 900;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.full-scan-result__content > strong {
  color:
    var(
      --full-text
    );

  font-size: 10.5px;

  font-weight: 850;

  line-height: 1.25;

  overflow-wrap: anywhere;
}

.full-scan-result__content > p {
  margin: 0;

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

  font-size: 8px;

  font-weight: 620;

  line-height: 1.35;
}

/* =========================================================
   32. RESULTADO · ESTADOS
   ========================================================= */

.full-scan-result.is-ready,
.full-scan-result.is-loading {
  border-color:
    var(
      --full-info-border
    );

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

.full-scan-result.is-ready
.full-scan-result__icon,
.full-scan-result.is-loading
.full-scan-result__icon {
  color:
    var(
      --full-info
    );
}

.full-scan-result.is-warning {
  border-color:
    var(
      --full-warning-border
    );

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

.full-scan-result.is-warning
.full-scan-result__icon {
  color:
    var(
      --full-warning
    );
}

.full-scan-result.is-error {
  border-color:
    var(
      --full-danger-border
    );

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

.full-scan-result.is-error
.full-scan-result__icon {
  color:
    var(
      --full-danger
    );
}

.full-scan-result.is-success {
  border-color:
    var(
      --full-success-border
    );

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

.full-scan-result.is-success
.full-scan-result__icon {
  color:
    var(
      --full-success
    );
}

/* =========================================================
   33. RESULTADO · DETALLES
   ========================================================= */

.full-scan-result__details {
  display: grid;

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

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

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

  background:
    var(
      --full-surface
    );

  overflow: hidden;
}

.full-scan-result__details > div {
  display: grid;

  gap: 3px;

  min-width: 0;
  min-height: 48px;

  padding:
    6px
    7px;

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

.full-scan-result__details > div:last-child {
  border-right: 0;
}

.full-scan-result__details span {
  color:
    var(
      --full-text-muted
    );

  font-size: 7px;

  font-weight: 850;

  text-transform: uppercase;
}

.full-scan-result__details strong {
  overflow: hidden;

  color:
    var(
      --full-text
    );

  font-size: 8.5px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;
}

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

   PARTE 2 CONTINÚA DESDE:
   .full-products-mount
   ========================================================= *//* =========================================================
   UBICACIÓN:
   frontend/src/pages/recursos/full/full.css

   WIRTZ HUB · RECURSOS · FULL
   CSS COMPLETO
   PARTE 2 DE 2

   CONTINÚA DESPUÉS DE:
   .full-scan-result__details strong
   ========================================================= */

/* =========================================================
   34. PRODUCTOS
   ========================================================= */

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

.full-products-panel {
  display: grid;
}

.full-section-head--products {
  grid-template-columns:
    minmax(
      170px,
      0.45fr
    )
    minmax(
      0,
      1fr
    )
    auto;
}

.full-product-filters {
  display: flex;

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

  flex-wrap: wrap;

  gap: 5px;

  min-width: 0;
}

/* =========================================================
   35. FILTROS PRODUCTOS
   ========================================================= */

.full-filter-chip {
  display: inline-flex;

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

  gap: 5px;

  min-height: 27px;

  padding:
    0
    7px;

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

  border-radius: 999px;

  outline: none;

  background:
    var(
      --full-surface
    );

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

  font-size: 8px;

  font-weight: 800;

  cursor: pointer;

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

.full-filter-chip:hover {
  border-color:
    var(
      --full-text
    );

  background:
    var(
      --full-hover
    );

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

.full-filter-chip.is-active {
  border-color:
    var(
      --full-text
    );

  background:
    var(
      --full-text
    );

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

.full-filter-chip strong {
  display: inline-flex;

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

  min-width: 18px;

  height: 18px;

  padding:
    0
    5px;

  border-radius: 999px;

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

  color:
    var(
      --full-text
    );

  font-size: 7px;

  font-weight: 900;
}

.full-filter-chip.is-active strong {
  background:
    rgba(
      255,
      255,
      255,
      0.16
    );

  color: #ffffff;
}

html[data-theme="dark"]
.full-filter-chip.is-active strong,
body.dark
.full-filter-chip.is-active strong,
.dark
.full-filter-chip.is-active strong {
  background:
    rgba(
      0,
      0,
      0,
      0.18
    );

  color: #080808;
}

/* =========================================================
   36. PRODUCTOS · TABLA
   ========================================================= */

.full-products-panel__body {
  width: 100%;
  min-width: 0;
}

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

  overflow-x: auto;

  scrollbar-width: thin;

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

.full-products-table::-webkit-scrollbar {
  height: 7px;
}

.full-products-table::-webkit-scrollbar-thumb {
  border:
    2px
    solid
    transparent;

  border-radius: 999px;

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

  background-clip: padding-box;
}

.full-product-row {
  display: grid;

  grid-template-columns:
    minmax(
      130px,
      0.95fr
    )
    minmax(
      250px,
      1.8fr
    )
    88px
    88px
    88px
    115px;

  align-items: center;

  min-width: 900px;

  min-height: 45px;

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

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

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

.full-product-row--head {
  position: sticky;

  top: 0;

  z-index: 2;

  min-height: 34px;

  border-bottom-color:
    var(
      --full-border-strong
    );

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

.full-product-row.is-complete {
  background:
    var(
      --full-success-soft
    );
}

.full-product-row > span,
.full-product-row > strong {
  display: flex;

  align-items: center;

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

  padding:
    0
    8px;

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

  color:
    var(
      --full-text
    );

  font-size: 8.8px;

  font-weight: 650;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.full-product-row > *:last-child {
  border-right: 0;
}

.full-product-row > strong {
  font-weight: 850;
}

.full-product-row--head > span {
  color:
    var(
      --full-text-muted
    );

  font-size: 7px;

  font-weight: 900;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}

.full-product-row .is-pending-value {
  color:
    var(
      --full-warning
    );

  font-weight: 900;
}

/* =========================================================
   37. HISTORIAL
   ========================================================= */

.full-history-panel {
  display: grid;

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

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

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

  overflow-x: auto;

  scrollbar-width: thin;

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

.full-history-table::-webkit-scrollbar {
  height: 7px;
}

.full-history-table::-webkit-scrollbar-thumb {
  border:
    2px
    solid
    transparent;

  border-radius: 999px;

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

  background-clip: padding-box;
}

.full-history-row {
  display: grid;

  grid-template-columns:
    105px
    minmax(
      120px,
      0.85fr
    )
    minmax(
      135px,
      1fr
    )
    minmax(
      110px,
      0.85fr
    )
    minmax(
      220px,
      1.65fr
    )
    90px
    72px
    minmax(
      125px,
      0.95fr
    );

  align-items: center;

  min-width: 1030px;

  min-height: 45px;

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

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

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

.full-history-row--head {
  min-height: 34px;

  border-bottom-color:
    var(
      --full-border-strong
    );

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

.full-history-row > span,
.full-history-row > strong {
  display: flex;

  align-items: center;

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

  padding:
    0
    8px;

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

  color:
    var(
      --full-text
    );

  font-size: 8.8px;

  font-weight: 650;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.full-history-row > *:last-child {
  border-right: 0;
}

.full-history-row > strong {
  font-weight: 850;
}

.full-history-row--head > span {
  color:
    var(
      --full-text-muted
    );

  font-size: 7px;

  font-weight: 900;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}

/* =========================================================
   38. PAGINACIÓN
   ========================================================= */

.full-pagination {
  display: flex;

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

  gap: 8px;

  min-height: 46px;

  padding:
    7px
    8px;

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

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

.full-pagination:empty {
  display: none;
}

.full-pagination__summary {
  color:
    var(
      --full-text-muted
    );

  font-size: 8px;

  font-weight: 700;
}

.full-pagination__actions {
  display: flex;

  align-items: center;

  gap: 5px;
}

/* =========================================================
   39. ESTADOS VACÍOS
   ========================================================= */

.full-empty {
  display: grid;

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

  gap: 5px;

  min-height: 150px;

  padding: 18px;

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

  text-align: center;
}

.full-empty--compact {
  min-height: 125px;
}

.full-empty .icon,
.full-empty svg {
  width: 22px;
  height: 22px;

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

.full-empty strong {
  color:
    var(
      --full-text
    );

  font-size: 10.5px;

  font-weight: 850;
}

.full-empty span {
  max-width: 380px;

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

  font-size: 8.5px;

  font-weight: 620;

  line-height: 1.4;
}

/* =========================================================
   40. TOAST
   ========================================================= */

.full-toast {
  --full-surface: #ffffff;
  --full-surface-soft: #f7f7f7;

  --full-text: #0a0a0a;
  --full-text-soft: #404040;

  --full-border: #dddddd;
  --full-border-strong: #bfbfbf;

  --full-success: #15803d;
  --full-success-soft: rgba(21, 128, 61, 0.08);
  --full-success-border: rgba(21, 128, 61, 0.3);

  --full-warning: #b45309;
  --full-warning-soft: rgba(180, 83, 9, 0.08);
  --full-warning-border: rgba(180, 83, 9, 0.3);

  --full-danger: #dc2626;
  --full-danger-soft: rgba(220, 38, 38, 0.08);
  --full-danger-border: rgba(220, 38, 38, 0.3);

  --full-info: #404040;
  --full-info-soft: rgba(0, 0, 0, 0.05);
  --full-info-border: rgba(0, 0, 0, 0.2);

  position: fixed;

  right: 14px;
  bottom: 18px;

  z-index: 13000;

  display: grid;

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

  align-items: start;

  gap: 7px;

  width:
    min(
      380px,
      calc(
        100vw -
        28px
      )
    );

  padding: 9px;

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

  border-radius: 9px;

  background:
    var(
      --full-surface
    );

  color:
    var(
      --full-text
    );

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translateY(
      7px
    );

  transition:
    opacity
      170ms
      ease,
    visibility
      170ms
      ease,
    transform
      170ms
      ease;
}

html[data-theme="dark"] .full-toast,
body.dark .full-toast,
.dark .full-toast {
  --full-surface: #090909;
  --full-surface-soft: #111111;

  --full-text: #f5f5f5;
  --full-text-soft: #cccccc;

  --full-border: #272727;
  --full-border-strong: #404040;

  --full-success: #4ade80;
  --full-success-soft: rgba(74, 222, 128, 0.08);
  --full-success-border: rgba(74, 222, 128, 0.28);

  --full-warning: #fbbf24;
  --full-warning-soft: rgba(251, 191, 36, 0.08);
  --full-warning-border: rgba(251, 191, 36, 0.28);

  --full-danger: #f87171;
  --full-danger-soft: rgba(248, 113, 113, 0.08);
  --full-danger-border: rgba(248, 113, 113, 0.28);

  --full-info: #d4d4d4;
  --full-info-soft: rgba(255, 255, 255, 0.05);
  --full-info-border: rgba(255, 255, 255, 0.18);
}

.full-toast.is-visible {
  opacity: 1;

  visibility: visible;

  transform:
    translateY(
      0
    );
}

.full-toast__icon {
  display: inline-flex;

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

  width: 30px;
  height: 30px;

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

  border-radius: 7px;

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

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

.full-toast__body {
  min-width: 0;
}

.full-toast__body strong {
  display: block;

  color:
    var(
      --full-text
    );

  font-size: 10px;

  font-weight: 850;
}

.full-toast__body p {
  margin:
    3px
    0
    0;

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

  font-size: 8.5px;

  font-weight: 620;

  line-height: 1.35;
}

.full-toast.is-success {
  border-color:
    var(
      --full-success-border
    );
}

.full-toast.is-success
.full-toast__icon {
  border-color:
    var(
      --full-success-border
    );

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

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

.full-toast.is-warning {
  border-color:
    var(
      --full-warning-border
    );
}

.full-toast.is-warning
.full-toast__icon {
  border-color:
    var(
      --full-warning-border
    );

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

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

.full-toast.is-error {
  border-color:
    var(
      --full-danger-border
    );
}

.full-toast.is-error
.full-toast__icon {
  border-color:
    var(
      --full-danger-border
    );

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

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

.full-toast.is-info {
  border-color:
    var(
      --full-info-border
    );
}

.full-toast.is-info
.full-toast__icon {
  border-color:
    var(
      --full-info-border
    );

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

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

/* =========================================================
   41. MODAL CAJAS
   ========================================================= */

html.full-boxes-modal-open,
html.full-boxes-modal-open body {
  overflow: hidden !important;
}

.full-boxes-modal {
  position: fixed;

  inset: 0;

  z-index: 14000;

  display: grid;

  place-items: center;

  padding: 12px;
}

.full-boxes-modal__backdrop {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  padding: 0;

  border: 0;

  background:
    rgba(
      0,
      0,
      0,
      0.7
    );
}

.full-boxes-modal__card {
  position: relative;

  z-index: 1;

  width:
    min(
      450px,
      100%
    );

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

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

  background:
    var(
      --full-surface
    );

  color:
    var(
      --full-text
    );

  overflow: hidden;

  animation:
    fullModalEnter
    180ms
    ease
    both;
}

.full-boxes-modal__head {
  display: grid;

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

  align-items: start;

  gap: 8px;

  padding:
    9px
    10px;

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

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

.full-boxes-modal__icon {
  display: inline-flex;

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

  width: 36px;
  height: 36px;

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

  border-radius: 8px;

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

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

.full-boxes-modal__icon .icon,
.full-boxes-modal__icon svg {
  width: 14px;
  height: 14px;
}

.full-boxes-modal__title {
  min-width: 0;
}

.full-boxes-modal__title > span {
  display: block;

  color:
    var(
      --full-success
    );

  font-size: 7.5px;

  font-weight: 900;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.full-boxes-modal__title > strong {
  display: block;

  margin-top: 3px;

  color:
    var(
      --full-text
    );

  font-size: 11.5px;

  font-weight: 850;
}

.full-boxes-modal__title > p {
  margin:
    3px
    0
    0;

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

  font-size: 8px;

  line-height: 1.35;
}

.full-boxes-modal__close {
  display: inline-flex;

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

  width: 30px;
  height: 30px;

  padding: 0;

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

  border-radius: 7px;

  background:
    var(
      --full-surface
    );

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

  cursor: pointer;
}

.full-boxes-modal__close:hover {
  border-color:
    var(
      --full-danger
    );

  background:
    var(
      --full-danger
    );

  color: #ffffff;
}

.full-boxes-modal__body {
  display: grid;

  gap: 9px;

  padding: 10px;
}

.full-boxes-modal__order {
  display: grid;

  gap: 3px;

  padding: 8px;

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

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

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

.full-boxes-modal__order > span {
  color:
    var(
      --full-text-muted
    );

  font-size: 7px;

  font-weight: 850;

  letter-spacing: 0.06em;
}

.full-boxes-modal__order > strong {
  color:
    var(
      --full-text
    );

  font-size: 10.5px;

  font-weight: 850;
}

.full-boxes-modal__order > small {
  color:
    var(
      --full-text-muted
    );

  font-size: 8px;
}

.full-boxes-modal__body > p {
  margin: 0;

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

  font-size: 8.5px;

  line-height: 1.4;
}

.full-boxes-modal__field {
  display: grid;

  gap: 5px;
}

.full-boxes-modal__field > span {
  color:
    var(
      --full-text-muted
    );

  font-size: 7.5px;

  font-weight: 850;

  text-transform: uppercase;
}

.full-boxes-modal__field input {
  width: 100%;

  min-height: 48px;

  padding:
    0
    10px;

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

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

  outline: none;

  background:
    var(
      --full-surface
    );

  color:
    var(
      --full-text
    );

  font-size: 18px;

  font-weight: 900;

  text-align: center;
}

.full-boxes-modal__field input:focus {
  border-color:
    var(
      --full-text
    );

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

.full-boxes-modal__error {
  min-height: 15px;

  color:
    var(
      --full-danger
    );

  font-size: 8px;

  font-weight: 700;
}

.full-boxes-modal__actions {
  display: grid;

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

  gap: 6px;

  padding:
    8px
    10px
    10px;

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

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

.full-boxes-modal__actions
.full-btn {
  width: 100%;
}

/* =========================================================
   42. CÁMARA · MODAL
   ========================================================= */

html.full-camera-open,
html.full-camera-open body,
body.full-camera-open {
  overflow: hidden !important;
}

.full-camera-modal {
  position: fixed;

  inset: 0;

  z-index: 15000;

  display: grid;

  place-items: center;

  width: 100vw;
  height: 100dvh;

  padding: 10px;
}

.full-camera-modal__backdrop {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  border: 0;

  background:
    rgba(
      0,
      0,
      0,
      0.76
    );
}

.full-camera-dialog {
  position: relative;

  z-index: 1;

  display: grid;

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

  width:
    min(
      560px,
      100%
    );

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

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

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

  background:
    var(
      --full-surface
    );

  color:
    var(
      --full-text
    );

  overflow: hidden;

  box-shadow: none;

  animation:
    fullModalEnter
    180ms
    ease
    both;
}

/* =========================================================
   43. CÁMARA · HEADER
   ========================================================= */

.full-camera-dialog__header {
  display: flex;

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

  gap: 8px;

  min-height: 58px;

  padding:
    8px
    9px;

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

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

.full-camera-dialog__header > div:first-child {
  display: grid;

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

  align-items: center;

  gap:
    2px
    6px;

  min-width: 0;
}

.full-camera-dialog__header >
div:first-child >
.icon,
.full-camera-dialog__header >
div:first-child >
svg {
  grid-row:
    1 /
    3;

  width: 14px;
  height: 14px;

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

.full-camera-dialog__header >
div:first-child >
span:nth-of-type(1) {
  color:
    var(
      --full-text
    );

  font-size: 10px;

  font-weight: 850;
}

.full-camera-dialog__header >
div:first-child >
span:nth-of-type(2) {
  overflow: hidden;

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

  font-size: 8px;

  font-weight: 620;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.full-camera-dialog__actions {
  display: flex;

  align-items: center;

  gap: 4px;
}

.full-camera-action {
  display: inline-flex;

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

  gap: 5px;

  min-width: 30px;

  height: 30px;

  padding:
    0
    7px;

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

  border-radius: 7px;

  background:
    var(
      --full-surface
    );

  color:
    var(
      --full-text
    );

  font-size: 8px;

  font-weight: 800;

  cursor: pointer;
}

.full-camera-action:hover:not(:disabled) {
  border-color:
    var(
      --full-text
    );

  background:
    var(
      --full-text
    );

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

.full-camera-action:disabled {
  opacity: 0.4;

  cursor: not-allowed;
}

.full-camera-action .icon,
.full-camera-action svg {
  width: 12px;
  height: 12px;
}

.full-camera-action--torch
.icon.is-active {
  color:
    var(
      --full-warning
    );
}

/* =========================================================
   44. CÁMARA · BODY
   ========================================================= */

.full-camera-dialog__body {
  display: grid;

  align-content: start;

  gap: 7px;

  min-height: 0;

  padding: 8px;

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

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

.full-camera-view {
  position: relative;

  width: 100%;

  min-height: 290px;

  aspect-ratio:
    4 /
    3;

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

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

  background: #000000;

  overflow: hidden;
}

.full-camera-view video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  background: #000000;
}

/* =========================================================
   45. CÁMARA · MARCO
   ========================================================= */

.full-camera-frame {
  position: absolute;

  inset: 16%;

  border:
    1px
    solid
    rgba(
      255,
      255,
      255,
      0.76
    );

  border-radius: 10px;

  pointer-events: none;
}

.full-camera-frame::before,
.full-camera-frame::after {
  content: "";

  position: absolute;

  width: 28px;
  height: 28px;
}

.full-camera-frame::before {
  top: -2px;
  left: -2px;

  border-top:
    3px
    solid
    #ffffff;

  border-left:
    3px
    solid
    #ffffff;

  border-radius:
    8px
    0
    0
    0;
}

.full-camera-frame::after {
  right: -2px;
  bottom: -2px;

  border-right:
    3px
    solid
    #ffffff;

  border-bottom:
    3px
    solid
    #ffffff;

  border-radius:
    0
    0
    8px
    0;
}

/* =========================================================
   46. CÁMARA · STATUS
   ========================================================= */

.full-camera-status:empty {
  display: none;
}

.full-camera-status {
  min-width: 0;
}

.full-camera-status >
.full-camera-status {
  display: flex;

  align-items: center;

  gap: 6px;

  min-height: 38px;

  padding:
    6px
    7px;

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

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

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

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

  font-size: 8.5px;

  font-weight: 700;
}

.full-camera-status >
.full-camera-status >
.icon,
.full-camera-status >
.full-camera-status >
svg {
  width: 12px;
  height: 12px;
}

.full-camera-status >
.full-camera-status--loading {
  border-color:
    var(
      --full-warning-border
    );

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

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

.full-camera-status >
.full-camera-status--active {
  border-color:
    var(
      --full-success-border
    );

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

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

.full-camera-status >
.full-camera-status--error {
  border-color:
    var(
      --full-danger-border
    );

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

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

/* =========================================================
   47. CÁMARA · SELECTOR
   ========================================================= */

.full-camera-device {
  display: grid;

  gap: 4px;
}

.full-camera-device select {
  width: 100%;

  height: 34px;

  padding:
    0
    8px;

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

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

  outline: none;

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

  color:
    var(
      --full-text
    );

  font-size: 8.8px;

  font-weight: 700;
}

.full-camera-device select:focus {
  border-color:
    var(
      --full-text
    );
}

/* =========================================================
   48. CÁMARA · FOOTER
   ========================================================= */

.full-camera-dialog__footer {
  display: flex;

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

  gap: 6px;

  min-height: 48px;

  padding:
    7px
    8px;

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

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

/* =========================================================
   49. RESPONSIVE · 1180
   ========================================================= */

@media (
  max-width:
  1180px
) {
  .full-command-center {
    grid-template-columns:
      minmax(
        270px,
        0.75fr
      )
      minmax(
        0,
        1.25fr
      );
  }

  .full-orders-open-list {
    max-height: 620px;
  }

  .full-section-head--products {
    grid-template-columns:
      minmax(
        150px,
        0.4fr
      )
      minmax(
        0,
        1fr
      )
      auto;
  }

  .full-active-order-card__metrics {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }

  .full-active-order-card__metrics article:nth-child(
    3n
  ) {
    border-right: 0;
  }

  .full-active-order-card__metrics article:nth-child(
    n + 4
  ) {
    border-top:
      1px
      solid
      var(
        --full-border
      );
  }
}

/* =========================================================
   50. RESPONSIVE · 980
   ========================================================= */

@media (
  max-width:
  980px
) {
  .full-head {
    grid-template-columns: 1fr;

    align-items: start;
  }

  .full-head__actions {
    justify-content: flex-start;

    width: 100%;
  }

  .full-update {
    text-align: left;
  }

  .full-command-center {
    grid-template-columns: 1fr;
  }

  .full-orders-open-list {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    max-height: 390px;
  }

  .full-section-head--products {
    grid-template-columns:
      1fr
      auto;
  }

  .full-product-filters {
    grid-column:
      1 /
      -1;

    grid-row: 2;

    justify-content: flex-start;
  }

  .full-documents-grid {
    grid-template-columns: 1fr;
  }

  .full-scan-result__details {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .full-scan-result__details > div:nth-child(
    2n
  ) {
    border-right: 0;
  }

  .full-scan-result__details > div:nth-child(
    n + 3
  ) {
    border-top:
      1px
      solid
      var(
        --full-border
      );
  }
}

/* =========================================================
   51. RESPONSIVE · MÓVIL
   ========================================================= */

@media (
  max-width:
  760px
) {
  body:has(.full-page),
  body:has(.full-page) .app-shell,
  body:has(.full-page) .app-main,
  body:has(.full-page) .app-content,
  .full-page,
  .full-command-center,
  .full-operation-column,
  .full-orders-panel,
  .full-active-order,
  .full-documents-mount,
  .full-scanner-mount,
  .full-last-result,
  .full-products-mount,
  .full-history-panel,
  .full-products-table,
  .full-history-table {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    overflow-x: hidden !important;
  }

  .full-page {
    gap: 6px;

    padding: 5px;
  }

  .full-head,
  .full-operation-banner,
  .full-orders-panel,
  .full-active-order-card,
  .full-documents-panel,
  .full-scanner-card,
  .full-scan-result,
  .full-products-panel,
  .full-history-panel,
  .full-active-order-empty {
    border-radius: 10px;
  }

  .full-head {
    grid-template-columns: 1fr;

    min-height: 0;

    padding: 8px;
  }

  .full-brand {
    align-items: flex-start;
  }

  .full-brand__icon {
    flex-basis: 36px;

    width: 36px;
    height: 36px;
  }

  .full-brand__body h2 {
    font-size: 21px;
  }

  .full-brand__body p {
    font-size: 10px;
  }

  .full-head__actions {
    display: grid;

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

    width: 100%;
  }

  .full-source,
  .full-update {
    grid-column:
      1 /
      -1;
  }

  .full-head__actions
  .full-btn {
    width: 100%;
  }

  .full-operation-banner {
    grid-template-columns:
      32px
      minmax(
        0,
        1fr
      );

    min-height: 48px;

    padding: 7px;
  }

  .full-operation-banner__icon {
    width: 32px;
    height: 32px;
  }

  .full-section-head {
    grid-template-columns: 1fr;

    min-height: 48px;

    padding: 7px;
  }

  .full-section-head >
  div:first-child >
  strong {
    white-space: normal;
  }

  .full-section-counter,
  .full-route-badge {
    justify-self: start;
  }

  .full-orders-open-list {
    grid-template-columns: 1fr;

    max-height: 340px;

    padding: 6px;
  }

  .full-order-card {
    padding: 7px;
  }

  .full-active-order-card__head {
    align-items: flex-start;

    flex-direction: column;

    padding: 8px;
  }

  .full-active-order-card__metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .full-active-order-card__metrics article,
  .full-active-order-card__metrics article:nth-child(
    3n
  ) {
    border-right:
      1px
      solid
      var(
        --full-border
      );

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

  .full-active-order-card__metrics article:nth-child(
    -n + 2
  ) {
    border-top: 0;
  }

  .full-active-order-card__metrics article:nth-child(
    2n
  ) {
    border-right: 0;
  }

  .full-active-order-card__metrics article:last-child {
    grid-column:
      1 /
      -1;

    border-right: 0;
  }

  .full-documents-grid {
    grid-template-columns: 1fr;

    padding: 6px;
  }

  .full-document-card {
    grid-template-columns:
      34px
      minmax(
        0,
        1fr
      );

    padding: 7px;
  }

  .full-document-card__status {
    grid-column:
      1 /
      -1;

    justify-self: start;
  }

  .full-document-card >
  .full-btn {
    grid-column:
      1 /
      -1;
  }

  /* =======================================================
     SCANNER MÓVIL
     ======================================================= */

  .full-scanner-card__body {
    padding: 7px;
  }

  .full-scanner-form {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  .full-scanner-input {
    grid-column:
      1 /
      -1;
  }

  .full-scanner-form >
  .full-btn,
  .full-camera-button {
    width: 100%;
  }

  .full-scanner-input {
    grid-template-columns:
      34px
      minmax(
        0,
        1fr
      );
  }

  .full-scanner-input__icon {
    width: 34px;
  }

  .full-scanner-input__key {
    display: none;
  }

  .full-scan-result__main {
    grid-template-columns:
      34px
      minmax(
        0,
        1fr
      );

    gap: 7px;
  }

  .full-scan-result__icon {
    width: 34px;
    height: 34px;
  }

  .full-scan-result__details {
    grid-template-columns: 1fr;
  }

  .full-scan-result__details > div,
  .full-scan-result__details >
  div:nth-child(
    2n
  ) {
    border-right: 0;

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

  .full-scan-result__details >
  div:first-child {
    border-top: 0;
  }

  .full-section-head--products {
    grid-template-columns: 1fr;
  }

  .full-product-filters {
    grid-column: auto;
    grid-row: auto;

    justify-content: flex-start;
  }

  /* =======================================================
     PRODUCTOS MÓVIL
     ======================================================= */

  .full-products-table {
    display: grid;

    gap: 6px;

    padding: 6px;

    overflow: visible;
  }

  .full-product-row--head {
    display: none;
  }

  .full-product-row {
    display: grid;

    grid-template-columns: 1fr;

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

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

    border-radius: 8px;

    overflow: hidden;
  }

  .full-product-row > span,
  .full-product-row > strong {
    display: grid;

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

    align-items: center;

    gap: 7px;

    width: 100%;

    min-width: 0;
    min-height: 40px;

    padding:
      6px
      8px;

    border-right: 0;

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

    overflow: visible;

    text-overflow: initial;

    white-space: normal;

    overflow-wrap: anywhere;
  }

  .full-product-row >
  *:last-child {
    border-bottom: 0;
  }

  .full-product-row > span::before,
  .full-product-row > strong::before {
    content:
      attr(
        data-label
      );

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

    font-size: 7px;

    font-weight: 900;

    text-transform: uppercase;
  }

  /* =======================================================
     HISTORIAL MÓVIL
     ======================================================= */

  .full-history-table {
    display: grid;

    gap: 6px;

    padding: 6px;

    overflow: visible;
  }

  .full-history-row--head {
    display: none;
  }

  .full-history-row {
    display: grid;

    grid-template-columns: 1fr;

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

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

    border-radius: 8px;

    overflow: hidden;
  }

  .full-history-row > span,
  .full-history-row > strong {
    display: grid;

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

    align-items: center;

    gap: 7px;

    width: 100%;

    min-width: 0;
    min-height: 40px;

    padding:
      6px
      8px;

    border-right: 0;

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

    overflow: visible;

    text-overflow: initial;

    white-space: normal;

    overflow-wrap: anywhere;
  }

  .full-history-row >
  *:last-child {
    border-bottom: 0;
  }

  .full-history-row > span::before,
  .full-history-row > strong::before {
    content:
      attr(
        data-label
      );

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

    font-size: 7px;

    font-weight: 900;

    text-transform: uppercase;
  }

  .full-pagination {
    align-items: stretch;

    flex-direction: column;
  }

  .full-pagination__actions {
    display: grid;

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

  .full-pagination__actions
  .full-btn {
    width: 100%;
  }

  /* =======================================================
     MODAL CAJAS MÓVIL
     ======================================================= */

  .full-boxes-modal {
    padding: 6px;
  }

  .full-boxes-modal__card {
    width: 100%;
  }

  /* =======================================================
     CÁMARA MÓVIL
     ======================================================= */

  .full-camera-modal {
    padding: 5px;
  }

  .full-camera-dialog {
    width: 100%;

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

    border-radius: 10px;
  }

  .full-camera-dialog__header {
    min-height: 52px;

    padding: 7px;
  }

  .full-camera-dialog__body {
    padding: 6px;
  }

  .full-camera-view {
    min-height: 260px;

    aspect-ratio:
      3 /
      4;
  }

  .full-camera-frame {
    inset:
      17%
      10%;
  }

  .full-camera-dialog__footer {
    display: grid;

    grid-template-columns: 1fr;
  }

  .full-camera-dialog__footer
  .full-btn {
    width: 100%;
  }

  .full-toast {
    right: 8px;
    bottom: 12px;
    left: 8px;

    width: auto;
  }
}

/* =========================================================
   52. RESPONSIVE · 480
   ========================================================= */

@media (
  max-width:
  480px
) {
  .full-brand__body p {
    display: none;
  }

  .full-head__actions {
    grid-template-columns: 1fr;
  }

  .full-source,
  .full-update {
    grid-column: auto;
  }

  .full-active-order-card__metrics {
    grid-template-columns: 1fr;
  }

  .full-active-order-card__metrics article,
  .full-active-order-card__metrics article:nth-child(
    2n
  ),
  .full-active-order-card__metrics article:nth-child(
    3n
  ),
  .full-active-order-card__metrics article:last-child {
    grid-column: auto;

    border-right: 0;

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

  .full-active-order-card__metrics article:first-child {
    border-top: 0;
  }

  .full-order-card__stats {
    grid-template-columns: 1fr;
  }

  .full-order-card__footer {
    align-items: flex-start;

    flex-direction: column;
  }

  .full-product-filters {
    display: grid;

    grid-template-columns: 1fr;

    width: 100%;
  }

  .full-filter-chip {
    width: 100%;

    justify-content: space-between;
  }

  .full-product-row > span,
  .full-product-row > strong,
  .full-history-row > span,
  .full-history-row > strong {
    grid-template-columns:
      74px
      minmax(
        0,
        1fr
      );
  }

  .full-boxes-modal {
    align-items: end;
  }

  .full-boxes-modal__actions {
    grid-template-columns: 1fr;
  }

  .full-camera-view {
    min-height: 230px;
  }

  .full-camera-frame {
    inset:
      19%
      9%;
  }
}

/* =========================================================
   53. FOCUS
   ========================================================= */

.full-page button:focus-visible,
.full-page input:focus-visible,
.full-page select:focus-visible,
.full-page textarea:focus-visible,
.full-boxes-modal button:focus-visible,
.full-boxes-modal input:focus-visible,
.full-camera-modal button:focus-visible,
.full-camera-modal select:focus-visible {
  outline:
    2px
    solid
    var(
      --full-text
    );

  outline-offset: 2px;
}

/* =========================================================
   54. ANIMACIONES
   ========================================================= */

.full-spin {
  animation:
    fullSpin
    700ms
    linear
    infinite;
}

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

@keyframes fullPageEnter {
  from {
    opacity: 0;

    transform:
      translateY(
        5px
      );
  }

  to {
    opacity: 1;

    transform:
      translateY(
        0
      );
  }
}

@keyframes fullModalEnter {
  from {
    opacity: 0;

    transform:
      translateY(
        6px
      )
      scale(
        0.99
      );
  }

  to {
    opacity: 1;

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

/* =========================================================
   55. MOVIMIENTO REDUCIDO
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {
  .full-page,
  .full-page *,
  .full-page *::before,
  .full-page *::after,
  .full-toast,
  .full-toast *,
  .full-boxes-modal,
  .full-boxes-modal *,
  .full-camera-modal,
  .full-camera-modal *,
  .full-camera-modal *::before,
  .full-camera-modal *::after {
    animation: none !important;

    transition: none !important;

    scroll-behavior: auto !important;
  }
}

/* =========================================================
   FIN CSS COMPLETO
   ========================================================= *//* =========================================================
   FULL · TIPOGRAFÍA UN POCO MÁS GRANDE
   ========================================================= */

.full-page {
  font-size: 13px;
}

.full-brand__body > span {
  font-size: 10px;
}

.full-brand__body p {
  font-size: 12.5px;
}

.full-section-head > div:first-child > span {
  font-size: 9px;
}

.full-section-head > div:first-child > strong {
  font-size: 12px;
}

.full-source small,
.full-update span {
  font-size: 8.5px;
}

.full-source strong,
.full-update strong {
  font-size: 12px;
}

.full-btn {
  font-size: 11px;
}

.full-operation-banner > div > span {
  font-size: 9px;
}

.full-operation-banner > div > strong {
  font-size: 11px;
}

.full-section-counter,
.full-route-badge {
  font-size: 9px;
}

.full-order-card__identity strong {
  font-size: 11px;
}

.full-order-card__identity small {
  font-size: 9px;
}

.full-order-card__stats small {
  font-size: 8px;
}

.full-order-card__stats strong {
  font-size: 11px;
}

.full-order-card__progress > strong,
.full-order-card__footer {
  font-size: 9px;
}

.full-order-status,
.full-document-state {
  font-size: 8.5px;
}

.full-active-order-card__identity > span {
  font-size: 9px;
}

.full-active-order-card__identity h3 {
  font-size: 17px;
}

.full-active-order-card__identity p {
  font-size: 9.5px;
}

.full-active-order-card__metrics span {
  font-size: 8px;
}

.full-active-order-card__metrics strong {
  font-size: 17px;
}

.full-active-order-card__progress > div > span {
  font-size: 9px;
}

.full-active-order-card__progress > div > strong {
  font-size: 9.5px;
}

.full-document-card__body > span {
  font-size: 8px;
}

.full-document-card__body > strong {
  font-size: 10.5px;
}

.full-document-card__body > p {
  font-size: 9px;
}

.full-document-card__meta > span {
  font-size: 8px;
}

.full-scanner-input input {
  font-size: 12px;
}

.full-scanner-input__key {
  font-size: 8px;
}

.full-scanner-help {
  font-size: 9px;
}

.full-scan-result__content > span {
  font-size: 8.5px;
}

.full-scan-result__content > strong {
  font-size: 11.5px;
}

.full-scan-result__content > p {
  font-size: 9px;
}

.full-scan-result__details span {
  font-size: 8px;
}

.full-scan-result__details strong {
  font-size: 9.5px;
}

.full-filter-chip {
  font-size: 9px;
}

.full-product-row > span,
.full-product-row > strong,
.full-history-row > span,
.full-history-row > strong {
  font-size: 9.8px;
}

.full-product-row--head > span,
.full-history-row--head > span {
  font-size: 8px;
}

.full-pagination__summary {
  font-size: 9px;
}

.full-empty strong {
  font-size: 11.5px;
}

.full-empty span {
  font-size: 9.5px;
}

.full-toast__body strong {
  font-size: 11px;
}

.full-toast__body p {
  font-size: 9.5px;
}

.full-boxes-modal__title > span {
  font-size: 8.5px;
}

.full-boxes-modal__title > strong {
  font-size: 12.5px;
}

.full-boxes-modal__title > p,
.full-boxes-modal__order > span,
.full-boxes-modal__order > small,
.full-boxes-modal__body > p,
.full-boxes-modal__field > span,
.full-boxes-modal__error {
  font-size: 9px;
}

.full-boxes-modal__order > strong {
  font-size: 11.5px;
}

.full-camera-dialog__header > div:first-child > span:nth-of-type(1) {
  font-size: 11px;
}

.full-camera-dialog__header > div:first-child > span:nth-of-type(2) {
  font-size: 9px;
}

.full-camera-action {
  font-size: 9px;
}

.full-camera-status > .full-camera-status {
  font-size: 9.5px;
}

.full-camera-device select {
  font-size: 9.8px;
}

@media (max-width: 760px) {
  .full-brand__body p {
    font-size: 11px;
  }

  .full-product-row > span,
  .full-product-row > strong,
  .full-history-row > span,
  .full-history-row > strong {
    font-size: 10px;
  }

  .full-product-row > span::before,
  .full-product-row > strong::before,
  .full-history-row > span::before,
  .full-history-row > strong::before {
    font-size: 8px;
  }
}