/* =========================================================
   ARCHIVO:
   frontend/src/pages/comercial-digital/pedidos-mayoristas/
   mis-asignados/mis-asignados.css

   WIRTZ HUB · PEDIDOS MAYORISTAS · MIS PEDIDOS ASIGNADOS

   Diseño:
   - Mismo tamaño visual que Gestión de Pedidos
   - Cola de trabajo + estación de armado
   - Scanner como acción principal
   - Panel lateral para ajustes
   - Líneas finas
   - Sin glow
   - Sin azul oscuro
   - Claro blanco
   - Oscuro negro
   - Responsive
   ========================================================= */

/* =========================================================
   01. VARIABLES
   ========================================================= */

.pm-page.pm-mis-page {
  --pm-bg: #f7f7f7;

  --pm-surface: #ffffff;
  --pm-surface-soft: #fafafa;
  --pm-surface-strong: #f1f1f1;
  --pm-surface-hover: #f6f6f6;

  --pm-text: #171717;
  --pm-text-soft: #525252;
  --pm-text-muted: #858585;

  --pm-line: rgba(0, 0, 0, 0.08);
  --pm-line-soft: rgba(0, 0, 0, 0.05);
  --pm-line-strong: rgba(0, 0, 0, 0.15);

  --pm-primary: #111111;
  --pm-primary-text: #ffffff;

  --pm-success: #177245;
  --pm-success-soft: rgba(23, 114, 69, 0.09);
  --pm-success-line: rgba(23, 114, 69, 0.22);

  --pm-warning: #946200;
  --pm-warning-soft: rgba(148, 98, 0, 0.09);
  --pm-warning-line: rgba(148, 98, 0, 0.22);

  --pm-danger: #b42318;
  --pm-danger-soft: rgba(180, 35, 24, 0.08);
  --pm-danger-line: rgba(180, 35, 24, 0.2);

  --pm-info: #365f91;
  --pm-info-soft: rgba(54, 95, 145, 0.08);
  --pm-info-line: rgba(54, 95, 145, 0.2);

  --pm-radius-xs: 7px;
  --pm-radius-sm: 9px;
  --pm-radius-md: 13px;
  --pm-radius-lg: 16px;

  --pm-transition: 150ms ease;

  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 12px;

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

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

  color: var(--pm-text);
  background: var(--pm-bg);

  overflow-x: hidden;
}

/* =========================================================
   02. MODO OSCURO
   ========================================================= */

html[data-theme="dark"] .pm-page.pm-mis-page,
body.dark .pm-page.pm-mis-page,
.dark .pm-page.pm-mis-page {
  --pm-bg: #000000;

  --pm-surface: #080808;
  --pm-surface-soft: #0d0d0d;
  --pm-surface-strong: #181818;
  --pm-surface-hover: #121212;

  --pm-text: #f5f5f5;
  --pm-text-soft: #bdbdbd;
  --pm-text-muted: #7d7d7d;

  --pm-line: rgba(255, 255, 255, 0.08);
  --pm-line-soft: rgba(255, 255, 255, 0.05);
  --pm-line-strong: rgba(255, 255, 255, 0.15);

  --pm-primary: #f5f5f5;
  --pm-primary-text: #000000;

  --pm-success: #6fd7a3;
  --pm-success-soft: rgba(111, 215, 163, 0.09);
  --pm-success-line: rgba(111, 215, 163, 0.2);

  --pm-warning: #e5c36a;
  --pm-warning-soft: rgba(229, 195, 106, 0.09);
  --pm-warning-line: rgba(229, 195, 106, 0.2);

  --pm-danger: #ff8a80;
  --pm-danger-soft: rgba(255, 138, 128, 0.08);
  --pm-danger-line: rgba(255, 138, 128, 0.2);

  --pm-info: #8db8e8;
  --pm-info-soft: rgba(141, 184, 232, 0.09);
  --pm-info-line: rgba(141, 184, 232, 0.2);

  color: var(--pm-text);
  background: #000000;
}

/* =========================================================
   03. RESET LOCAL
   ========================================================= */

.pm-page.pm-mis-page,
.pm-page.pm-mis-page *,
.pm-page.pm-mis-page *::before,
.pm-page.pm-mis-page *::after,
.pm-mis-adjust-overlay,
.pm-mis-adjust-overlay *,
.pm-mis-adjust-overlay *::before,
.pm-mis-adjust-overlay *::after,
#pmMisCloseModal,
#pmMisCloseModal *,
#pmMisCloseModal *::before,
#pmMisCloseModal *::after {
  box-sizing: border-box;
}

.pm-page.pm-mis-page button,
.pm-page.pm-mis-page input,
.pm-page.pm-mis-page select,
.pm-page.pm-mis-page textarea,
.pm-mis-adjust-overlay button,
.pm-mis-adjust-overlay input,
.pm-mis-adjust-overlay textarea,
#pmMisCloseModal button,
#pmMisCloseModal input,
#pmMisCloseModal textarea {
  font: inherit;
}

.pm-page.pm-mis-page button,
.pm-mis-adjust-overlay button,
#pmMisCloseModal button {
  -webkit-tap-highlight-color: transparent;
}

.pm-page.pm-mis-page img,
.pm-mis-adjust-overlay img,
#pmMisCloseModal img {
  display: block;
  max-width: 100%;
}

.pm-page.pm-mis-page .icon,
.pm-mis-adjust-overlay .icon,
#pmMisCloseModal .icon {
  display: block;

  width: 16px;
  height: 16px;
  min-width: 16px;

  margin: 0;
  padding: 0;

  stroke-width: 1.9;
}

/* =========================================================
   04. CABECERA PRINCIPAL
   ========================================================= */

.pm-mis-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  width: 100%;
  min-width: 0;
  min-height: 64px;
  padding: 11px 13px;

  background: var(--pm-surface);
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius-md);
}

.pm-mis-brand {
  display: flex;
  align-items: center;
  gap: 11px;

  min-width: 0;
}

.pm-mis-brand__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;
  flex: 0 0 36px;

  color: var(--pm-text);
  background: var(--pm-surface-soft);
  border: 1px solid var(--pm-line);
  border-radius: 10px;
}

.pm-mis-brand__icon .icon,
.pm-mis-brand__icon svg {
  width: 17px;
  height: 17px;

  margin: 0;
}

.pm-mis-brand > div {
  min-width: 0;
}

.pm-mis-brand h2 {
  margin: 0;

  color: var(--pm-text);

  font-size: 17px;
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.pm-mis-brand p {
  margin: 4px 0 0;

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

  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.pm-mis-head__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  flex-wrap: wrap;
}

/* =========================================================
   05. PANELES
   ========================================================= */

.pm-page.pm-mis-page .pm-panel {
  min-width: 0;

  overflow: hidden;

  background: var(--pm-surface);
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius-md);

  box-shadow: none;
  filter: none;
}

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

.pm-page.pm-mis-page .pm-btn,
.pm-mis-adjust-overlay .pm-btn,
#pmMisCloseModal .pm-btn {
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-height: 34px;
  padding: 0 12px;

  color: var(--pm-text);
  background: var(--pm-surface);
  border: 1px solid var(--pm-line-strong);
  border-radius: 9px;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  cursor: pointer;
  text-decoration: none;

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

.pm-page.pm-mis-page .pm-btn:hover:not(:disabled),
.pm-mis-adjust-overlay .pm-btn:hover:not(:disabled),
#pmMisCloseModal .pm-btn:hover:not(:disabled) {
  background: var(--pm-surface-soft);
  border-color: var(--pm-line-strong);
}

.pm-page.pm-mis-page .pm-btn:active:not(:disabled),
.pm-mis-adjust-overlay .pm-btn:active:not(:disabled),
#pmMisCloseModal .pm-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.pm-page.pm-mis-page .pm-btn:focus-visible,
.pm-mis-adjust-overlay .pm-btn:focus-visible,
#pmMisCloseModal .pm-btn:focus-visible {
  outline: 2px solid var(--pm-text);
  outline-offset: 2px;
}

.pm-page.pm-mis-page .pm-btn:disabled,
.pm-mis-adjust-overlay .pm-btn:disabled,
#pmMisCloseModal .pm-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pm-page.pm-mis-page .pm-btn--dark,
.pm-mis-adjust-overlay .pm-btn--dark,
#pmMisCloseModal .pm-btn--dark {
  color: var(--pm-primary-text);
  background: var(--pm-primary);
  border-color: var(--pm-primary);
}

.pm-page.pm-mis-page .pm-btn--dark:hover:not(:disabled),
.pm-mis-adjust-overlay .pm-btn--dark:hover:not(:disabled),
#pmMisCloseModal .pm-btn--dark:hover:not(:disabled) {
  color: var(--pm-primary-text);
  background: var(--pm-primary);
  border-color: var(--pm-primary);

  opacity: 0.9;
}

.pm-page.pm-mis-page .pm-btn--table {
  min-height: 30px;
  padding: 0 10px;

  border-radius: 8px;

  font-size: 10px;
}

/* =========================================================
   07. BOTONES DE ICONO
   ========================================================= */

.pm-page.pm-mis-page .pm-icon-btn,
.pm-mis-adjust-overlay .pm-icon-btn,
#pmMisCloseModal .pm-icon-btn {
  appearance: none;

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

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

  color: var(--pm-text-soft);
  background: transparent;
  border: 1px solid var(--pm-line);
  border-radius: 9px;

  cursor: pointer;

  line-height: 0;

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

.pm-page.pm-mis-page .pm-icon-btn:hover,
.pm-mis-adjust-overlay .pm-icon-btn:hover,
#pmMisCloseModal .pm-icon-btn:hover {
  color: var(--pm-text);
  background: var(--pm-surface-strong);
  border-color: var(--pm-line-strong);
}

.pm-page.pm-mis-page .pm-icon-btn:active,
.pm-mis-adjust-overlay .pm-icon-btn:active,
#pmMisCloseModal .pm-icon-btn:active {
  transform: translateY(1px);
}

.pm-page.pm-mis-page .pm-icon-btn .icon,
.pm-mis-adjust-overlay .pm-icon-btn .icon,
#pmMisCloseModal .pm-icon-btn .icon,
.pm-page.pm-mis-page .pm-icon-btn svg,
.pm-mis-adjust-overlay .pm-icon-btn svg,
#pmMisCloseModal .pm-icon-btn svg {
  display: block;

  width: 15px;
  height: 15px;

  margin: 0;
}

/* =========================================================
   08. MÉTRICAS SUPERIORES
   ========================================================= */

.pm-mis-metrics {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 1px;

  min-width: 0;

  overflow: hidden;

  background: var(--pm-line);
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-radius-md);

  box-shadow: none;
}

.pm-mis-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;
  min-height: 76px;
  padding: 11px 12px;

  background: var(--pm-surface);

  box-shadow: none;
}

.pm-mis-metric span {
  display: block;

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

  font-size: 9px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.07em;

  text-transform: uppercase;
}

.pm-mis-metric strong {
  display: block;

  margin-top: 5px;

  overflow: hidden;

  color: var(--pm-text);

  font-size: 19px;
  font-weight: 760;
  line-height: 1.05;
  letter-spacing: -0.025em;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-mis-metric small {
  display: block;

  margin-top: 5px;

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

  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.2;
}

/* =========================================================
   09. FILTROS
   ========================================================= */

.pm-mis-filterbar {
  display: grid;
  grid-template-columns:
    minmax(260px, 1fr)
    auto;
  gap: 10px;
  align-items: center;

  min-width: 0;
  padding: 11px 12px;
}

.pm-mis-search {
  position: relative;

  display: flex;
  align-items: center;

  min-width: 0;
}

.pm-mis-search > .icon {
  position: absolute;
  left: 11px;
  z-index: 1;

  width: 15px;
  height: 15px;

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

  pointer-events: none;
}

.pm-mis-search input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 12px 0 36px;

  color: var(--pm-text);
  background: var(--pm-surface-soft);
  border: 1px solid var(--pm-line);
  border-radius: 9px;

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

  outline: none;

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

.pm-mis-search input::placeholder {
  color: var(--pm-text-muted);
}

.pm-mis-search input:focus {
  background: var(--pm-surface);
  border-color: var(--pm-line-strong);
}

.pm-mis-filterbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  min-width: 0;

  flex-wrap: wrap;
}

.pm-mis-filterbar select {
  min-width: 160px;
  height: 36px;
  padding: 0 10px;

  color: var(--pm-text);
  background: var(--pm-surface-soft);
  border: 1px solid var(--pm-line);
  border-radius: 9px;

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

  outline: none;
  cursor: pointer;

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

.pm-mis-filterbar select:hover,
.pm-mis-filterbar select:focus {
  background: var(--pm-surface);
  border-color: var(--pm-line-strong);
}

.pm-mis-toggle-done.is-active {
  color: var(--pm-primary-text) !important;
  background: var(--pm-primary) !important;
  border-color: var(--pm-primary) !important;
}

html[data-theme="dark"] .pm-mis-filterbar select,
html[data-theme="dark"] .pm-mis-filterbar input {
  color-scheme: dark;
}

html[data-theme="dark"] .pm-mis-filterbar option {
  color: #f5f5f5;
  background: #080808;
}

/* =========================================================
   10. LAYOUT PRINCIPAL
   ========================================================= */

.pm-mis-layout {
  display: grid;
  grid-template-columns:
    310px
    minmax(0, 1fr);
  gap: 12px;

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

  align-items: start;
}

/* =========================================================
   11. COLA DE PEDIDOS
   ========================================================= */

.pm-mis-queue {
  display: grid;
  grid-template-rows:
    auto
    minmax(0, 1fr);

  min-width: 0;
  min-height: calc(
    100vh -
    var(--topbar-height, 72px) -
    282px
  );
  max-height: calc(
    100vh -
    var(--topbar-height, 72px) -
    282px
  );

  overflow: hidden;
}

.pm-mis-queue__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  min-height: 54px;
  padding: 10px 12px;

  background: var(--pm-surface-soft);
  border-bottom: 1px solid var(--pm-line);
}

.pm-mis-queue__head > div {
  min-width: 0;
}

.pm-mis-queue__head span:first-child {
  display: block;

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

  font-size: 8.5px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.07em;

  text-transform: uppercase;
}

.pm-mis-queue__head strong {
  display: block;

  margin-top: 3px;

  color: var(--pm-text);

  font-size: 12.5px;
  font-weight: 750;
  line-height: 1.2;
}

.pm-mis-queue__count {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  min-width: 28px;
  height: 26px;
  padding: 0 8px;

  color: var(--pm-text-soft) !important;
  background: var(--pm-surface-strong);
  border: 1px solid var(--pm-line);
  border-radius: 999px;

  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;

  text-transform: none !important;
}

.pm-mis-list {
  display: grid;
  align-content: start;
  gap: 7px;

  min-width: 0;
  min-height: 0;
  padding: 8px;

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

  scrollbar-width: thin;
  scrollbar-color:
    var(--pm-line-strong)
    transparent;
}

/* =========================================================
   12. PEDIDO DE LA COLA
   ========================================================= */

.pm-mis-order {
  min-width: 0;
}

.pm-mis-order__button {
  appearance: none;

  display: grid;
  gap: 7px;

  width: 100%;
  min-width: 0;
  padding: 10px;

  color: var(--pm-text);
  background: var(--pm-surface);
  border: 1px solid var(--pm-line);
  border-radius: 10px;

  text-align: left;

  cursor: pointer;
  outline: none;

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

.pm-mis-order__button:hover {
  background: var(--pm-surface-soft);
  border-color: var(--pm-line-strong);
}

.pm-mis-order.is-active .pm-mis-order__button {
  background: var(--pm-surface-strong);
  border-color: var(--pm-text);
}

.pm-mis-order__button:active {
  transform: translateY(1px);
}

.pm-mis-order__button:focus-visible {
  outline: 2px solid var(--pm-text);
  outline-offset: 2px;
}

.pm-mis-order__top,
.pm-mis-order__progress-row,
.pm-mis-order__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  min-width: 0;
}

.pm-mis-order__code {
  min-width: 0;

  overflow: hidden;

  color: var(--pm-text);

  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-mis-order__client {
  display: block;

  min-width: 0;

  overflow: hidden;

  color: var(--pm-text);

  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-mis-order__date {
  display: block;

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

  font-size: 9px;
  font-weight: 500;
  line-height: 1.2;
}

.pm-mis-order__progress-row {
  color: var(--pm-text-soft);

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

.pm-mis-order__progress-row strong {
  color: var(--pm-text);

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

.pm-mis-order__progress {
  position: relative;

  display: block;

  width: 100%;
  height: 5px;

  overflow: hidden;

  background: var(--pm-surface-strong);
  border-radius: 999px;
}

.pm-mis-order__progress > span {
  display: block;

  height: 100%;

  background: var(--pm-success);
  border-radius: inherit;
}

.pm-mis-order__bottom {
  color: var(--pm-text-muted);

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

.pm-mis-order__bottom .is-danger {
  color: var(--pm-danger);
}

/* =========================================================
   13. BADGES
   ========================================================= */

.pm-page.pm-mis-page .pm-badge,
.pm-mis-adjust-overlay .pm-badge,
#pmMisCloseModal .pm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 22px;
  max-width: 150px;
  padding: 0 8px;

  overflow: hidden;

  color: var(--pm-text-soft);
  background: var(--pm-surface-strong);
  border: 1px solid var(--pm-line);
  border-radius: 999px;

  font-size: 8.5px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.025em;

  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.pm-page.pm-mis-page .pm-badge.is-ok,
.pm-mis-adjust-overlay .pm-badge.is-ok,
#pmMisCloseModal .pm-badge.is-ok {
  color: var(--pm-success);
  background: var(--pm-success-soft);
  border-color: var(--pm-success-line);
}

.pm-page.pm-mis-page .pm-badge.is-warning,
.pm-mis-adjust-overlay .pm-badge.is-warning,
#pmMisCloseModal .pm-badge.is-warning {
  color: var(--pm-warning);
  background: var(--pm-warning-soft);
  border-color: var(--pm-warning-line);
}

.pm-page.pm-mis-page .pm-badge.is-danger,
.pm-mis-adjust-overlay .pm-badge.is-danger,
#pmMisCloseModal .pm-badge.is-danger {
  color: var(--pm-danger);
  background: var(--pm-danger-soft);
  border-color: var(--pm-danger-line);
}

.pm-page.pm-mis-page .pm-badge.is-info,
.pm-mis-adjust-overlay .pm-badge.is-info,
#pmMisCloseModal .pm-badge.is-info {
  color: var(--pm-info);
  background: var(--pm-info-soft);
  border-color: var(--pm-info-line);
}

.pm-page.pm-mis-page .pm-badge.is-muted,
.pm-mis-adjust-overlay .pm-badge.is-muted,
#pmMisCloseModal .pm-badge.is-muted {
  color: var(--pm-text-soft);
  background: var(--pm-surface-strong);
  border-color: var(--pm-line);
}

/* =========================================================
   14. WORKSPACE
   ========================================================= */

.pm-mis-workspace {
  display: grid;
  grid-template-rows:
    auto
    auto
    auto
    auto
    minmax(0, 1fr)
    auto;

  min-width: 0;
  min-height: calc(
    100vh -
    var(--topbar-height, 72px) -
    282px
  );
  max-height: calc(
    100vh -
    var(--topbar-height, 72px) -
    282px
  );

  overflow: hidden;
}

/* =========================================================
   15. CABECERA DEL PEDIDO ACTIVO
   ========================================================= */

.pm-mis-workspace__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  min-width: 0;
  min-height: 64px;
  padding: 10px 12px;

  background: var(--pm-surface);
  border-bottom: 1px solid var(--pm-line);
}

.pm-mis-workspace__identity {
  min-width: 0;
}

.pm-mis-workspace__identity > span {
  display: block;

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

  font-size: 8.5px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.07em;

  text-transform: uppercase;
}

.pm-mis-workspace__title {
  display: flex;
  align-items: center;
  gap: 8px;

  min-width: 0;
  margin-top: 4px;

  flex-wrap: wrap;
}

.pm-mis-workspace__title > div {
  min-width: 0;
}

.pm-mis-workspace__title h3 {
  margin: 0;

  overflow: hidden;

  color: var(--pm-text);

  font-size: 15px;
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: -0.02em;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-mis-workspace__title p {
  margin: 4px 0 0;

  overflow: hidden;

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

  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-mis-workspace__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  flex: 0 0 auto;

  flex-wrap: wrap;
}

/* =========================================================
   16. RESUMEN DEL PEDIDO
   ========================================================= */

.pm-mis-overview {
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  gap: 1px;

  min-width: 0;

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

.pm-mis-overview-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  min-width: 0;
  min-height: 58px;
  padding: 9px 10px;

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

.pm-mis-overview-item span {
  color: var(--pm-text-muted);

  font-size: 8.5px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.04em;

  text-transform: uppercase;
}

.pm-mis-overview-item strong {
  color: var(--pm-text);

  font-size: 17px;
  font-weight: 760;
  line-height: 1;
}

.pm-mis-overview-item.is-info strong {
  color: var(--pm-info);
}

.pm-mis-overview-item.is-ok strong {
  color: var(--pm-success);
}

.pm-mis-overview-item.is-warning strong {
  color: var(--pm-warning);
}

.pm-mis-overview-item.is-danger strong {
  color: var(--pm-danger);
}

/* =========================================================
   17. PROGRESO GENERAL
   ========================================================= */

.pm-mis-progress {
  padding: 10px 12px;

  background: var(--pm-surface);
  border-bottom: 1px solid var(--pm-line);
}

.pm-mis-progress__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;

  min-width: 0;
}

.pm-mis-progress__head > div {
  min-width: 0;
}

.pm-mis-progress__head span {
  display: block;

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

  font-size: 8.5px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.06em;

  text-transform: uppercase;
}

.pm-mis-progress__head > div > strong {
  display: block;

  margin-top: 3px;

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

  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}

.pm-mis-progress__value {
  color: var(--pm-text);

  font-size: 16px;
  font-weight: 760;
  line-height: 1;
}

.pm-mis-progress__bar {
  width: 100%;
  height: 7px;
  margin-top: 8px;

  overflow: hidden;

  background: var(--pm-surface-strong);
  border-radius: 999px;
}

.pm-mis-progress__bar > span {
  display: block;

  height: 100%;

  background: var(--pm-success);
  border-radius: inherit;
}

/* =========================================================
   18. SCANNER
   ========================================================= */

.pm-mis-scanner {
  display: grid;
  gap: 9px;

  min-width: 0;
  padding: 12px;

  background: var(--pm-surface-soft);
  border-bottom: 1px solid var(--pm-line);
}

.pm-mis-scanner__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  min-width: 0;
}

.pm-mis-scanner__head > div {
  min-width: 0;
}

.pm-mis-scanner__head > div > span {
  display: block;

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

  font-size: 8.5px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.07em;

  text-transform: uppercase;
}

.pm-mis-scanner__head > div > strong {
  display: block;

  margin-top: 3px;

  color: var(--pm-text);

  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
}

.pm-mis-scanner__ready,
.pm-mis-scanner__blocked {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  min-height: 26px;
  padding: 0 8px;

  border-radius: 999px;

  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.pm-mis-scanner__ready {
  color: var(--pm-success);
  background: var(--pm-success-soft);
  border: 1px solid var(--pm-success-line);
}

.pm-mis-scanner__blocked {
  color: var(--pm-warning);
  background: var(--pm-warning-soft);
  border: 1px solid var(--pm-warning-line);
}

.pm-mis-scanner__ready .icon,
.pm-mis-scanner__blocked .icon {
  width: 14px;
  height: 14px;
  min-width: 14px;
}

.pm-mis-scanner__field {
  display: grid;
  grid-template-columns:
    42px
    minmax(0, 1fr);
  align-items: center;

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

  overflow: hidden;

  background: var(--pm-surface);
  border: 1px solid var(--pm-line-strong);
  border-radius: 11px;

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

.pm-mis-scanner__field:focus-within {
  border-color: var(--pm-text);
}

.pm-mis-scanner__field-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 100%;

  color: var(--pm-text-soft);
  background: var(--pm-surface-strong);
  border-right: 1px solid var(--pm-line);
}

.pm-mis-scanner__field-icon .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
}

.pm-mis-scanner__field input {
  width: 100%;
  min-width: 0;
  height: 54px;
  padding: 0 14px;

  color: var(--pm-text);
  background: transparent;
  border: 0;

  font-size: 15px;
  font-weight: 700;
  line-height: 1;

  outline: none;
}

.pm-mis-scanner__field input::placeholder {
  color: var(--pm-text-muted);

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

.pm-mis-scanner__field input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pm-mis-scanner__notice {
  display: flex;
  align-items: center;
  gap: 7px;

  color: var(--pm-warning);

  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.25;
}

.pm-mis-scanner__notice .icon {
  width: 14px;
  height: 14px;
  min-width: 14px;
}

/* =========================================================
   19. RESULTADO DEL SCANNER
   ========================================================= */

.pm-mis-scan-feedback {
  display: grid;
  grid-template-columns:
    36px
    minmax(0, 1fr);
  align-items: center;
  gap: 10px;

  min-width: 0;
  min-height: 58px;
  padding: 9px 10px;

  color: var(--pm-text-soft);
  background: var(--pm-surface);
  border: 1px solid var(--pm-line);
  border-radius: 10px;
}

.pm-mis-scan-feedback__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  color: var(--pm-text-muted);
  background: var(--pm-surface-strong);
  border-radius: 9px;
}

.pm-mis-scan-feedback__icon .icon {
  width: 17px;
  height: 17px;
  min-width: 17px;
}

.pm-mis-scan-feedback > div {
  min-width: 0;
}

.pm-mis-scan-feedback > div > span {
  display: block;

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

  font-size: 8px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.06em;

  text-transform: uppercase;
}

.pm-mis-scan-feedback strong {
  display: block;

  margin-top: 3px;

  overflow: hidden;

  color: var(--pm-text);

  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-mis-scan-feedback small {
  display: block;

  margin-top: 3px;

  overflow: hidden;

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

  font-size: 9px;
  font-weight: 500;
  line-height: 1.3;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-mis-scan-feedback.is-ok {
  color: var(--pm-success);
  background: var(--pm-success-soft);
  border-color: var(--pm-success-line);
}

.pm-mis-scan-feedback.is-ok .pm-mis-scan-feedback__icon {
  color: var(--pm-success);
  background: var(--pm-success-soft);
}

.pm-mis-scan-feedback.is-ok strong {
  color: var(--pm-success);
}

.pm-mis-scan-feedback.is-warning {
  color: var(--pm-warning);
  background: var(--pm-warning-soft);
  border-color: var(--pm-warning-line);
}

.pm-mis-scan-feedback.is-warning .pm-mis-scan-feedback__icon {
  color: var(--pm-warning);
  background: var(--pm-warning-soft);
}

.pm-mis-scan-feedback.is-warning strong {
  color: var(--pm-warning);
}

.pm-mis-scan-feedback.is-error {
  color: var(--pm-danger);
  background: var(--pm-danger-soft);
  border-color: var(--pm-danger-line);
}

.pm-mis-scan-feedback.is-error .pm-mis-scan-feedback__icon {
  color: var(--pm-danger);
  background: var(--pm-danger-soft);
}

.pm-mis-scan-feedback.is-error strong {
  color: var(--pm-danger);
}

/* =========================================================
   20. PRODUCTOS
   ========================================================= */

.pm-mis-products {
  display: grid;
  grid-template-rows:
    auto
    minmax(0, 1fr);

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

  overflow: hidden;

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

.pm-mis-products__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  min-height: 50px;
  padding: 9px 12px;

  background: var(--pm-surface);
  border-bottom: 1px solid var(--pm-line);
}

.pm-mis-products__head > div:first-child {
  min-width: 0;
}

.pm-mis-products__head > div:first-child > span {
  display: block;

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

  font-size: 8.5px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.06em;

  text-transform: uppercase;
}

.pm-mis-products__head > div:first-child > strong {
  display: block;

  margin-top: 3px;

  color: var(--pm-text);

  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.2;
}

.pm-mis-products__summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  flex-wrap: wrap;
}

.pm-mis-products__summary span {
  display: inline-flex;
  align-items: center;

  min-height: 24px;
  padding: 0 8px;

  color: var(--pm-text-soft);
  background: var(--pm-surface-strong);
  border: 1px solid var(--pm-line);
  border-radius: 999px;

  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
}

.pm-mis-products__summary span.is-ok {
  color: var(--pm-success);
  background: var(--pm-success-soft);
  border-color: var(--pm-success-line);
}

.pm-mis-products__summary span.is-warning {
  color: var(--pm-warning);
  background: var(--pm-warning-soft);
  border-color: var(--pm-warning-line);
}

.pm-mis-products__summary span.is-danger {
  color: var(--pm-danger);
  background: var(--pm-danger-soft);
  border-color: var(--pm-danger-line);
}

/* =========================================================
   21. TABLA
   ========================================================= */

.pm-mis-table-wrap {
  width: 100%;
  min-width: 0;
  min-height: 0;

  overflow: auto;

  scrollbar-width: thin;
  scrollbar-color:
    var(--pm-line-strong)
    transparent;
}

.pm-mis-table {
  width: 100%;
  min-width: 1060px;

  border-collapse: collapse;
  table-layout: fixed;
}

.pm-mis-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;

  height: 36px;
  padding: 8px 9px;

  color: var(--pm-text-muted);
  background: var(--pm-surface-soft);
  border-bottom: 1px solid var(--pm-line);
  border-right: 1px solid var(--pm-line-soft);

  font-size: 8.5px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.06em;

  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.pm-mis-table tbody td {
  height: 48px;
  padding: 8px 9px;

  overflow: hidden;

  color: var(--pm-text-soft);
  background: var(--pm-surface);
  border-bottom: 1px solid var(--pm-line);
  border-right: 1px solid var(--pm-line-soft);

  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.25;
  vertical-align: middle;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-mis-table th:last-child,
.pm-mis-table td:last-child {
  border-right: 0;
}

.pm-mis-table tbody tr:last-child td {
  border-bottom: 0;
}

.pm-mis-table tbody tr:hover td {
  background: var(--pm-surface-soft);
}

.pm-mis-table tbody tr.is-complete td {
  background: var(--pm-success-soft);
}

.pm-mis-table tbody tr.has-diff td {
  background: var(--pm-warning-soft);
}

.pm-mis-table tbody tr.is-partial td {
  background: rgba(148, 98, 0, 0.04);
}

html[data-theme="dark"] .pm-mis-table tbody tr.is-partial td {
  background: rgba(229, 195, 106, 0.04);
}

.pm-mis-table th:nth-child(1),
.pm-mis-table td:nth-child(1) {
  width: 120px;
}

.pm-mis-table th:nth-child(2),
.pm-mis-table td:nth-child(2) {
  width: 130px;
}

.pm-mis-table th:nth-child(3),
.pm-mis-table td:nth-child(3) {
  width: 260px;
}

.pm-mis-table th:nth-child(4),
.pm-mis-table td:nth-child(4) {
  width: 145px;
}

.pm-mis-table th:nth-child(5),
.pm-mis-table td:nth-child(5),
.pm-mis-table th:nth-child(6),
.pm-mis-table td:nth-child(6),
.pm-mis-table th:nth-child(7),
.pm-mis-table td:nth-child(7),
.pm-mis-table th:nth-child(8),
.pm-mis-table td:nth-child(8) {
  width: 82px;

  text-align: center;
}

.pm-mis-table th:nth-child(9),
.pm-mis-table td:nth-child(9) {
  width: 105px;

  text-align: right;
}

.pm-mis-sku {
  display: block;

  overflow: hidden;

  color: var(--pm-text);

  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-mis-secondary-code {
  display: block;

  margin-top: 3px;

  overflow: hidden;

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

  font-size: 8.5px;
  font-weight: 500;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-mis-product-name {
  display: block;

  overflow: hidden;

  color: var(--pm-text);

  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-mis-table td small {
  display: block;

  margin-top: 3px;

  overflow: hidden;

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

  font-size: 8.5px;
  font-weight: 500;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-mis-location {
  display: flex;
  align-items: center;
  gap: 6px;

  min-width: 0;
}

.pm-mis-location .icon {
  width: 13px;
  height: 13px;
  min-width: 13px;

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

.pm-mis-location span {
  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-mis-table td.is-number {
  color: var(--pm-text);

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

  text-align: center;
}

.pm-mis-table td.is-armado {
  color: var(--pm-success);
}

.pm-mis-table td.is-pendiente {
  color: var(--pm-warning);
}

.pm-mis-table td.is-faltante {
  color: var(--pm-danger);
}

.pm-mis-table td.is-action {
  overflow: visible;

  text-align: right;
}

/* =========================================================
   22. ESTADO DE PRODUCTO
   ========================================================= */

.pm-mis-item-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  min-height: 24px;
  max-width: 100%;
  padding: 0 8px;

  overflow: hidden;

  color: var(--pm-text-soft);
  background: var(--pm-surface-strong);
  border: 1px solid var(--pm-line);
  border-radius: 999px;

  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-mis-item-status .icon {
  width: 13px;
  height: 13px;
  min-width: 13px;
}

.pm-mis-item-status.is-ok {
  color: var(--pm-success);
  background: var(--pm-success-soft);
  border-color: var(--pm-success-line);
}

.pm-mis-item-status.is-warning {
  color: var(--pm-warning);
  background: var(--pm-warning-soft);
  border-color: var(--pm-warning-line);
}

.pm-mis-item-status.is-danger {
  color: var(--pm-danger);
  background: var(--pm-danger-soft);
  border-color: var(--pm-danger-line);
}

.pm-mis-item-status.is-info {
  color: var(--pm-info);
  background: var(--pm-info-soft);
  border-color: var(--pm-info-line);
}

/* =========================================================
   23. FOOTER DEL WORKSPACE
   ========================================================= */

.pm-mis-finalize {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  min-width: 0;
  min-height: 58px;
  padding: 10px 12px;

  background: var(--pm-surface);
  border-top: 1px solid var(--pm-line);
}

.pm-mis-finalize__progress {
  min-width: 0;
}

.pm-mis-finalize__progress span {
  display: block;

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

  font-size: 8.5px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.06em;

  text-transform: uppercase;
}

.pm-mis-finalize__progress strong {
  display: block;

  margin-top: 3px;

  color: var(--pm-text);

  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.25;
}

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

.pm-mis-placeholder,
.pm-mis-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;

  min-height: 190px;
  padding: 24px;

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

  text-align: center;
}

.pm-mis-placeholder {
  min-height: calc(
    100vh -
    var(--topbar-height, 72px) -
    282px
  );
}

.pm-mis-placeholder__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  color: var(--pm-text-soft);
  background: var(--pm-surface-soft);
  border: 1px solid var(--pm-line);
  border-radius: 12px;
}

.pm-mis-placeholder__icon .icon,
.pm-mis-empty > .icon {
  width: 24px;
  height: 24px;
  min-width: 24px;

  stroke-width: 1.8;
}

.pm-mis-placeholder strong,
.pm-mis-empty strong {
  color: var(--pm-text);

  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
}

.pm-mis-placeholder > span:last-child,
.pm-mis-empty span {
  max-width: 340px;

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

  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
}

.pm-mis-empty.is-error > .icon,
.pm-mis-empty.is-error strong {
  color: var(--pm-danger);
}

/* =========================================================
   25. PANEL LATERAL DE AJUSTE
   ========================================================= */

.pm-mis-adjust-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;

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

  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(2px);
}

.pm-mis-adjust-overlay.is-open {
  display: flex;
}

.pm-mis-adjust-drawer {
  --pm-surface: #ffffff;
  --pm-surface-soft: #fafafa;
  --pm-surface-strong: #f1f1f1;

  --pm-text: #171717;
  --pm-text-soft: #525252;
  --pm-text-muted: #858585;

  --pm-line: rgba(0, 0, 0, 0.08);
  --pm-line-strong: rgba(0, 0, 0, 0.15);

  --pm-primary: #111111;
  --pm-primary-text: #ffffff;

  --pm-success: #177245;
  --pm-success-soft: rgba(23, 114, 69, 0.09);
  --pm-success-line: rgba(23, 114, 69, 0.22);

  --pm-warning: #946200;
  --pm-warning-soft: rgba(148, 98, 0, 0.09);
  --pm-warning-line: rgba(148, 98, 0, 0.22);

  --pm-danger: #b42318;
  --pm-danger-soft: rgba(180, 35, 24, 0.08);
  --pm-danger-line: rgba(180, 35, 24, 0.2);

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

  width: min(420px, 100vw);
  height: 100%;

  color: var(--pm-text);
  background: var(--pm-surface);
  border-left: 1px solid var(--pm-line-strong);

  box-shadow: none;
}

html[data-theme="dark"] .pm-mis-adjust-drawer,
body.dark .pm-mis-adjust-drawer,
.dark .pm-mis-adjust-drawer {
  --pm-surface: #080808;
  --pm-surface-soft: #0d0d0d;
  --pm-surface-strong: #181818;

  --pm-text: #f5f5f5;
  --pm-text-soft: #bdbdbd;
  --pm-text-muted: #7d7d7d;

  --pm-line: rgba(255, 255, 255, 0.08);
  --pm-line-strong: rgba(255, 255, 255, 0.15);

  --pm-primary: #f5f5f5;
  --pm-primary-text: #000000;

  --pm-success: #6fd7a3;
  --pm-success-soft: rgba(111, 215, 163, 0.09);
  --pm-success-line: rgba(111, 215, 163, 0.2);

  --pm-warning: #e5c36a;
  --pm-warning-soft: rgba(229, 195, 106, 0.09);
  --pm-warning-line: rgba(229, 195, 106, 0.2);

  --pm-danger: #ff8a80;
  --pm-danger-soft: rgba(255, 138, 128, 0.08);
  --pm-danger-line: rgba(255, 138, 128, 0.2);

  background: #080808;
}

.pm-mis-adjust-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;

  min-height: 76px;
  padding: 14px;

  background: var(--pm-surface);
  border-bottom: 1px solid var(--pm-line);
}

.pm-mis-adjust-drawer__head > div {
  min-width: 0;
}

.pm-mis-adjust-drawer__head > div > span {
  display: block;

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

  font-size: 8.5px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.07em;

  text-transform: uppercase;
}

.pm-mis-adjust-drawer__head strong {
  display: block;

  margin-top: 4px;

  color: var(--pm-text);

  font-size: 15px;
  font-weight: 760;
  line-height: 1.15;
}

.pm-mis-adjust-drawer__head small {
  display: block;

  margin-top: 4px;

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

  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
}

.pm-mis-adjust-drawer__body {
  display: grid;
  align-content: start;
  gap: 12px;

  min-height: 0;
  padding: 12px;

  overflow-y: auto;

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

.pm-mis-adjust-summary {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 1px;

  overflow: hidden;

  background: var(--pm-line);
  border: 1px solid var(--pm-line);
  border-radius: 10px;
}

.pm-mis-adjust-summary article {
  min-width: 0;
  padding: 9px;

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

.pm-mis-adjust-summary span {
  display: block;

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

  font-size: 7.5px;
  font-weight: 750;
  line-height: 1.2;

  text-transform: uppercase;
}

.pm-mis-adjust-summary strong {
  display: block;

  margin-top: 4px;

  color: var(--pm-text);

  font-size: 13px;
  font-weight: 760;
  line-height: 1;
}

.pm-mis-adjust-product {
  display: grid;
  grid-template-columns:
    38px
    minmax(0, 1fr);
  align-items: center;
  gap: 10px;

  min-width: 0;
  padding: 10px;

  background: var(--pm-surface);
  border: 1px solid var(--pm-line);
  border-radius: 10px;
}

.pm-mis-adjust-product__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  color: var(--pm-text-soft);
  background: var(--pm-surface-strong);
  border-radius: 9px;
}

.pm-mis-adjust-product__icon .icon {
  width: 18px;
  height: 18px;
}

.pm-mis-adjust-product > div {
  min-width: 0;
}

.pm-mis-adjust-product strong {
  display: block;

  overflow: hidden;

  color: var(--pm-text);

  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-mis-adjust-product > div > span {
  display: block;

  margin-top: 4px;

  overflow: hidden;

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

  font-size: 9px;
  font-weight: 500;
  line-height: 1.3;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-mis-adjust-form {
  display: grid;
  gap: 10px;

  padding: 11px;

  background: var(--pm-surface);
  border: 1px solid var(--pm-line);
  border-radius: 10px;
}

.pm-mis-adjust-form__numbers {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.pm-field {
  display: grid;
  gap: 6px;

  min-width: 0;
}

.pm-field > span {
  color: var(--pm-text-soft);

  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.2;
}

.pm-field input,
.pm-field textarea {
  width: 100%;
  min-width: 0;

  color: var(--pm-text);
  background: var(--pm-surface);
  border: 1px solid var(--pm-line-strong);
  border-radius: 9px;

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

  outline: none;

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

.pm-field input {
  height: 36px;
  padding: 0 10px;
}

.pm-field textarea {
  min-height: 92px;
  padding: 9px 10px;

  line-height: 1.4;

  resize: vertical;
}

.pm-field input:focus,
.pm-field textarea:focus {
  border-color: var(--pm-text);
}

.pm-field input::placeholder,
.pm-field textarea::placeholder {
  color: var(--pm-text-muted);
}

.pm-mis-adjust-warning {
  display: grid;
  grid-template-columns:
    28px
    minmax(0, 1fr);
  align-items: center;
  gap: 9px;

  min-width: 0;
  padding: 10px;

  color: var(--pm-warning);
  background: var(--pm-warning-soft);
  border: 1px solid var(--pm-warning-line);
  border-radius: 10px;
}

.pm-mis-adjust-warning > .icon {
  width: 17px;
  height: 17px;

  justify-self: center;
}

.pm-mis-adjust-warning strong {
  display: block;

  color: var(--pm-warning);

  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
}

.pm-mis-adjust-warning span {
  display: block;

  margin-top: 3px;

  color: var(--pm-warning);

  font-size: 8.8px;
  font-weight: 500;
  line-height: 1.35;
}

.pm-mis-adjust-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  min-height: 58px;
  padding: 10px 14px;

  background: var(--pm-surface);
  border-top: 1px solid var(--pm-line);
}

/* =========================================================
   26. MODAL DE CIERRE
   ========================================================= */

#pmMisCloseModal.pm-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;

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

  width: 100vw;
  height: 100vh;
  padding: 16px;

  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(2px);
}

.pm-mis-close-modal {
  --pm-surface: #ffffff;
  --pm-surface-soft: #fafafa;
  --pm-surface-strong: #f1f1f1;

  --pm-text: #171717;
  --pm-text-soft: #525252;
  --pm-text-muted: #858585;

  --pm-line: rgba(0, 0, 0, 0.08);
  --pm-line-strong: rgba(0, 0, 0, 0.15);

  --pm-primary: #111111;
  --pm-primary-text: #ffffff;

  --pm-success: #177245;
  --pm-success-soft: rgba(23, 114, 69, 0.09);
  --pm-success-line: rgba(23, 114, 69, 0.22);

  --pm-warning: #946200;
  --pm-warning-soft: rgba(148, 98, 0, 0.09);
  --pm-warning-line: rgba(148, 98, 0, 0.22);

  --pm-danger: #b42318;
  --pm-danger-soft: rgba(180, 35, 24, 0.08);
  --pm-danger-line: rgba(180, 35, 24, 0.2);

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

  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);

  overflow: hidden;

  color: var(--pm-text);
  background: var(--pm-surface);
  border: 1px solid var(--pm-line-strong);
  border-radius: 15px;

  box-shadow: none;
}

html[data-theme="dark"] .pm-mis-close-modal,
body.dark .pm-mis-close-modal,
.dark .pm-mis-close-modal {
  --pm-surface: #080808;
  --pm-surface-soft: #0d0d0d;
  --pm-surface-strong: #181818;

  --pm-text: #f5f5f5;
  --pm-text-soft: #bdbdbd;
  --pm-text-muted: #7d7d7d;

  --pm-line: rgba(255, 255, 255, 0.08);
  --pm-line-strong: rgba(255, 255, 255, 0.15);

  --pm-primary: #f5f5f5;
  --pm-primary-text: #000000;

  --pm-success: #6fd7a3;
  --pm-success-soft: rgba(111, 215, 163, 0.09);
  --pm-success-line: rgba(111, 215, 163, 0.2);

  --pm-warning: #e5c36a;
  --pm-warning-soft: rgba(229, 195, 106, 0.09);
  --pm-warning-line: rgba(229, 195, 106, 0.2);

  --pm-danger: #ff8a80;
  --pm-danger-soft: rgba(255, 138, 128, 0.08);
  --pm-danger-line: rgba(255, 138, 128, 0.2);

  background: #080808;
}

.pm-mis-close-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;

  min-height: 74px;
  padding: 13px 14px;

  background: var(--pm-surface);
  border-bottom: 1px solid var(--pm-line);
}

.pm-mis-close-modal__head > div {
  min-width: 0;
}

.pm-mis-close-modal__head > div > span {
  display: block;

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

  font-size: 8.5px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0.075em;

  text-transform: uppercase;
}

.pm-mis-close-modal__head h3 {
  margin: 4px 0 0;

  color: var(--pm-text);

  font-size: 15px;
  font-weight: 760;
  line-height: 1.15;
}

.pm-mis-close-modal__head p {
  margin: 4px 0 0;

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

  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
}

.pm-mis-close-modal__body {
  display: grid;
  align-content: start;
  gap: 12px;

  min-height: 0;
  padding: 12px;

  overflow-y: auto;

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

.pm-mis-close-summary {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 1px;

  overflow: hidden;

  background: var(--pm-line);
  border: 1px solid var(--pm-line);
  border-radius: 10px;
}

.pm-mis-close-summary article {
  min-width: 0;
  padding: 10px;

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

.pm-mis-close-summary span {
  display: block;

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

  font-size: 8px;
  font-weight: 750;
  line-height: 1.2;

  text-transform: uppercase;
}

.pm-mis-close-summary strong {
  display: block;

  margin-top: 4px;

  color: var(--pm-text);

  font-size: 14px;
  font-weight: 760;
  line-height: 1;
}

.pm-mis-close-form {
  display: grid;
  gap: 10px;

  padding: 11px;

  background: var(--pm-surface);
  border: 1px solid var(--pm-line);
  border-radius: 10px;
}

.pm-mis-stock-check {
  display: flex;
  align-items: center;
  gap: 9px;

  min-width: 0;
  min-height: 52px;
  padding: 9px 10px;

  background: var(--pm-surface-soft);
  border: 1px solid var(--pm-line);
  border-radius: 10px;

  cursor: pointer;
}

.pm-mis-stock-check > input {
  width: 17px;
  min-width: 17px;
  height: 17px;

  accent-color: var(--pm-primary);

  cursor: pointer;
}

.pm-mis-stock-check > span {
  min-width: 0;
}

.pm-mis-stock-check strong {
  display: block;

  color: var(--pm-text);

  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
}

.pm-mis-stock-check small {
  display: block;

  margin-top: 3px;

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

  font-size: 8.8px;
  font-weight: 500;
  line-height: 1.3;
}

.pm-mis-close-warning {
  display: grid;
  grid-template-columns:
    34px
    minmax(0, 1fr);
  align-items: center;
  gap: 10px;

  min-width: 0;
  padding: 10px;

  border-radius: 10px;
}

.pm-mis-close-warning__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border-radius: 9px;
}

.pm-mis-close-warning__icon .icon {
  width: 17px;
  height: 17px;
}

.pm-mis-close-warning strong {
  display: block;

  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
}

.pm-mis-close-warning > div > span {
  display: block;

  margin-top: 3px;

  font-size: 8.8px;
  font-weight: 500;
  line-height: 1.35;
}

.pm-mis-close-warning.is-warning {
  color: var(--pm-warning);
  background: var(--pm-warning-soft);
  border: 1px solid var(--pm-warning-line);
}

.pm-mis-close-warning.is-warning .pm-mis-close-warning__icon {
  color: var(--pm-warning);
  background: var(--pm-warning-soft);
}

.pm-mis-close-warning.is-ok {
  color: var(--pm-success);
  background: var(--pm-success-soft);
  border: 1px solid var(--pm-success-line);
}

.pm-mis-close-warning.is-ok .pm-mis-close-warning__icon {
  color: var(--pm-success);
  background: var(--pm-success-soft);
}

.pm-mis-close-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  min-height: 58px;
  padding: 10px 14px;

  background: var(--pm-surface);
  border-top: 1px solid var(--pm-line);
}

/* =========================================================
   27. BLOQUEO DE SCROLL
   ========================================================= */

html:has(#pmMisCloseModal.is-open),
body:has(#pmMisCloseModal.is-open),
html:has(.pm-mis-adjust-overlay.is-open),
body:has(.pm-mis-adjust-overlay.is-open) {
  overflow: hidden;
}

/* =========================================================
   28. SCROLLBARS
   ========================================================= */

.pm-page.pm-mis-page *,
.pm-mis-adjust-overlay *,
#pmMisCloseModal * {
  scrollbar-width: thin;
}

.pm-page.pm-mis-page *::-webkit-scrollbar,
.pm-mis-adjust-overlay *::-webkit-scrollbar,
#pmMisCloseModal *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.pm-page.pm-mis-page *::-webkit-scrollbar-track,
.pm-mis-adjust-overlay *::-webkit-scrollbar-track,
#pmMisCloseModal *::-webkit-scrollbar-track {
  background: transparent;
}

.pm-page.pm-mis-page *::-webkit-scrollbar-thumb,
.pm-mis-adjust-overlay *::-webkit-scrollbar-thumb,
#pmMisCloseModal *::-webkit-scrollbar-thumb {
  background: var(--pm-line-strong);
  border-radius: 999px;
}

/* =========================================================
   29. ANIMACIÓN DE CARGA
   ========================================================= */

.is-spinning {
  animation:
    pm-mis-spin
    0.8s
    linear
    infinite;
}

@keyframes pm-mis-spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   30. RESPONSIVE · 1350
   ========================================================= */

@media (max-width: 1350px) {
  .pm-mis-layout {
    grid-template-columns:
      290px
      minmax(0, 1fr);
  }

  .pm-mis-table {
    min-width: 1000px;
  }

  .pm-mis-workspace,
  .pm-mis-queue {
    min-height: calc(
      100vh -
      var(--topbar-height, 72px) -
      276px
    );

    max-height: calc(
      100vh -
      var(--topbar-height, 72px) -
      276px
    );
  }
}

/* =========================================================
   31. RESPONSIVE · 1180
   ========================================================= */

@media (max-width: 1180px) {
  .pm-mis-metrics {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .pm-mis-layout {
    grid-template-columns:
      270px
      minmax(0, 1fr);
  }

  .pm-mis-overview {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .pm-mis-overview-item:nth-child(n + 4) {
    border-top: 1px solid var(--pm-line);
  }

  .pm-mis-products__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .pm-mis-products__summary {
    justify-content: flex-start;
  }
}

/* =========================================================
   32. RESPONSIVE · 1024
   ========================================================= */

@media (max-width: 1024px) {
  .pm-mis-filterbar {
    grid-template-columns: 1fr;
  }

  .pm-mis-filterbar__actions {
    justify-content: flex-start;
  }

  .pm-mis-filterbar select {
    flex: 1 1 170px;
  }

  .pm-mis-layout {
    grid-template-columns: 1fr;
  }

  .pm-mis-queue,
  .pm-mis-workspace {
    min-height: auto;
    max-height: none;
  }

  .pm-mis-list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    max-height: 360px;
  }

  .pm-mis-workspace {
    min-height: 620px;
  }

  .pm-mis-placeholder {
    min-height: 360px;
  }
}

/* =========================================================
   33. RESPONSIVE · 820
   ========================================================= */

@media (max-width: 820px) {
  .pm-page.pm-mis-page {
    gap: 10px;
  }

  .pm-mis-head {
    align-items: stretch;
    flex-direction: column;
  }

  .pm-mis-head__actions {
    justify-content: flex-start;
  }

  .pm-mis-overview {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .pm-mis-overview-item:nth-child(n + 3) {
    border-top: 1px solid var(--pm-line);
  }

  .pm-mis-workspace__head {
    align-items: stretch;
    flex-direction: column;
  }

  .pm-mis-workspace__actions {
    justify-content: flex-start;
  }

  .pm-mis-scanner__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .pm-mis-close-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .pm-mis-adjust-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   34. RESPONSIVE · 640
   ========================================================= */

@media (max-width: 640px) {
  .pm-mis-brand {
    align-items: flex-start;
  }

  .pm-mis-brand__icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .pm-mis-brand h2 {
    font-size: 16px;
  }

  .pm-mis-brand p {
    font-size: 10px;
  }

  .pm-mis-head__actions,
  .pm-mis-filterbar__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .pm-mis-head__actions .pm-btn,
  .pm-mis-filterbar__actions .pm-btn,
  .pm-mis-filterbar__actions select {
    width: 100%;
  }

  .pm-mis-metrics {
    grid-template-columns: 1fr;
  }

  .pm-mis-metric {
    min-height: 64px;
  }

  .pm-mis-list {
    grid-template-columns: 1fr;
  }

  .pm-mis-overview {
    grid-template-columns: 1fr;
  }

  .pm-mis-overview-item {
    border-top: 1px solid var(--pm-line);
  }

  .pm-mis-overview-item:first-child {
    border-top: 0;
  }

  .pm-mis-workspace__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .pm-mis-workspace__actions .pm-btn {
    width: 100%;
  }

  .pm-mis-progress__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .pm-mis-scanner {
    padding: 10px;
  }

  .pm-mis-scanner__field {
    grid-template-columns:
      38px
      minmax(0, 1fr);
  }

  .pm-mis-scanner__field-icon {
    width: 38px;
  }

  .pm-mis-scanner__field input {
    font-size: 13px;
  }

  .pm-mis-products__summary {
    display: grid;
    grid-template-columns: 1fr;

    width: 100%;
  }

  .pm-mis-finalize {
    align-items: stretch;
    flex-direction: column;
  }

  .pm-mis-finalize .pm-btn {
    width: 100%;
  }

  .pm-mis-adjust-drawer {
    width: 100vw;
  }

  .pm-mis-adjust-form__numbers {
    grid-template-columns: 1fr;
  }

  .pm-mis-adjust-drawer__footer,
  .pm-mis-close-modal__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .pm-mis-adjust-drawer__footer .pm-btn,
  .pm-mis-close-modal__footer .pm-btn {
    width: 100%;
  }

  #pmMisCloseModal.pm-modal {
    padding: 8px;
  }

  .pm-mis-close-modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);

    border-radius: 12px;
  }

  .pm-mis-close-summary {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   35. RESPONSIVE · 420
   ========================================================= */

@media (max-width: 420px) {
  .pm-mis-head {
    padding: 10px;
  }

  .pm-mis-brand__icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .pm-mis-brand h2 {
    font-size: 15px;
  }

  .pm-mis-brand p {
    font-size: 9.5px;
  }

  .pm-mis-metric strong {
    font-size: 17px;
  }

  .pm-mis-order__top {
    align-items: flex-start;
    flex-direction: column;
  }

  .pm-mis-order__top .pm-badge {
    max-width: 100%;
  }

  .pm-mis-scanner__field input {
    padding-right: 9px;
    padding-left: 9px;

    font-size: 12px;
  }

  .pm-mis-scan-feedback {
    grid-template-columns: 1fr;
  }

  .pm-mis-scan-feedback__icon {
    width: 32px;
    height: 32px;
  }
}

/* =========================================================
   36. MOVIMIENTO REDUCIDO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .pm-page.pm-mis-page *,
  .pm-page.pm-mis-page *::before,
  .pm-page.pm-mis-page *::after,
  .pm-mis-adjust-overlay *,
  .pm-mis-adjust-overlay *::before,
  .pm-mis-adjust-overlay *::after,
  #pmMisCloseModal *,
  #pmMisCloseModal *::before,
  #pmMisCloseModal *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}/* =========================================================
   FIX · TOAST · ICONO PERFECTAMENTE CENTRADO
   ========================================================= */

.pm-mis-notice {
  align-items: center !important;
}

.pm-mis-notice__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

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

  padding: 0 !important;
  margin: 0 !important;

  line-height: 0 !important;
}

.pm-mis-notice__icon .icon,
.pm-mis-notice__icon svg {
  display: block !important;

  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;

  margin: 0 !important;
  padding: 0 !important;

  align-self: center !important;
  justify-self: center !important;

  vertical-align: middle !important;
  transform: none !important;
}

.pm-mis-notice__icon svg {
  overflow: visible !important;
}/* =========================================================
   FIX · MODAL CUBRE TODO EL VIEWPORT
   Topbar, sidebar, rightbar y footer quedan detrás
   ========================================================= */

html:has(#pmMisCloseModal.is-open),
body:has(#pmMisCloseModal.is-open) {
  overflow: hidden !important;
}

/* Evita que los contenedores limiten el position fixed */
body:has(#pmMisCloseModal.is-open) .app-shell,
body:has(#pmMisCloseModal.is-open) .app-main,
body:has(#pmMisCloseModal.is-open) .app-content,
body:has(#pmMisCloseModal.is-open) .pm-page,
body:has(#pmMisCloseModal.is-open) .pm-mis-page {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;

  filter: none !important;
  perspective: none !important;
  contain: none !important;

  overflow: visible !important;
}

/* Fondo completo sobre toda la aplicación */
#pmMisCloseModal.pm-modal {
  position: fixed !important;
  inset: 0 !important;

  z-index: 2147483646 !important;

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

  width: 100vw !important;
  height: 100dvh !important;
  min-width: 100vw !important;
  min-height: 100dvh !important;

  margin: 0 !important;
  padding: 16px !important;

  background: rgba(0, 0, 0, 0.78) !important;

  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;

  isolation: isolate !important;
}

/* Ventana por encima del fondo */
#pmMisCloseModal .pm-mis-close-modal {
  position: relative !important;
  z-index: 2147483647 !important;
}

/* Elementos generales siempre detrás del modal */
body:has(#pmMisCloseModal.is-open) .app-sidebar,
body:has(#pmMisCloseModal.is-open) .sidebar,
body:has(#pmMisCloseModal.is-open) .app-topbar,
body:has(#pmMisCloseModal.is-open) .topbar,
body:has(#pmMisCloseModal.is-open) .app-rightbar,
body:has(#pmMisCloseModal.is-open) .rightbar,
body:has(#pmMisCloseModal.is-open) .app-footer {
  z-index: 1 !important;
}

/* Corrige la altura en navegadores que no manejan bien dvh */
@supports not (height: 100dvh) {
  #pmMisCloseModal.pm-modal {
    height: 100vh !important;
    min-height: 100vh !important;
  }
}/* =========================================================
   MIS PEDIDOS ASIGNADOS
   MISMA ESCALA + TODO EL ANCHO + VENTANAS CORREGIDAS
   Agregar al FINAL de mis-asignados.css
   ========================================================= */

/* =========================================================
   TODO EL ANCHO HORIZONTAL
   ========================================================= */

.app-content:has(.pm-mis-page) {
  width: 100% !important;
  max-width: none !important;

  padding-left: 10px !important;
  padding-right: 10px !important;
}

.pm-page.pm-mis-page,
.pm-mis-head,
.pm-mis-metrics,
.pm-mis-filterbar,
.pm-mis-layout,
.pm-mis-queue,
.pm-mis-workspace,
.pm-mis-products,
.pm-mis-table-wrap {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* =========================================================
   ESCALA GENERAL
   ========================================================= */

.pm-page.pm-mis-page {
  gap: 12px !important;
}

/* =========================================================
   CABECERA
   ========================================================= */

.pm-mis-head {
  min-height: 92px !important;

  padding:
    15px
    17px !important;

  gap: 16px !important;
}

.pm-mis-brand {
  gap: 13px !important;
}

.pm-mis-brand__icon {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;

  border-radius: 11px !important;
}

.pm-mis-brand__icon .icon,
.pm-mis-brand__icon svg {
  width: 21px !important;
  height: 21px !important;
}

.pm-mis-brand h2 {
  font-size:
    clamp(
      24px,
      2.1vw,
      30px
    ) !important;

  font-weight: 950 !important;
  line-height: 1 !important;
}

.pm-mis-brand p {
  margin-top: 6px !important;

  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}

/* =========================================================
   BOTONES
   ========================================================= */

.pm-page.pm-mis-page .pm-btn,
.pm-mis-adjust-overlay .pm-btn,
#pmMisCloseModal .pm-btn {
  min-height: 36px !important;

  padding:
    0
    12px !important;

  gap: 7px !important;

  border-radius: 9px !important;

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

.pm-page.pm-mis-page .pm-btn .icon,
.pm-mis-adjust-overlay .pm-btn .icon,
#pmMisCloseModal .pm-btn .icon {
  width: 15px !important;
  height: 15px !important;

  min-width: 15px !important;
  min-height: 15px !important;
}

.pm-page.pm-mis-page .pm-icon-btn,
.pm-mis-adjust-overlay .pm-icon-btn,
#pmMisCloseModal .pm-icon-btn {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;

  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;

  padding: 0 !important;

  border-radius: 9px !important;
}

/* =========================================================
   MÉTRICAS
   ========================================================= */

.pm-mis-metric {
  min-height: 72px !important;

  padding:
    11px
    12px !important;
}

.pm-mis-metric span {
  font-size: 9px !important;
  font-weight: 900 !important;
}

.pm-mis-metric strong {
  font-size: 19px !important;
  font-weight: 950 !important;
}

.pm-mis-metric small {
  font-size: 9.5px !important;
}

/* =========================================================
   FILTROS
   ========================================================= */

.pm-mis-filterbar {
  grid-template-columns:
    minmax(300px, 1fr)
    auto !important;

  gap: 10px !important;

  padding:
    12px !important;
}

.pm-mis-search input,
.pm-mis-filterbar select {
  height: 38px !important;
  min-height: 38px !important;

  border-radius: 9px !important;

  font-size: 10.8px !important;
  font-weight: 800 !important;
}

.pm-mis-search input {
  padding-left: 36px !important;
}

.pm-mis-filterbar select {
  min-width: 170px !important;
}

/* =========================================================
   LAYOUT PRINCIPAL
   ========================================================= */

.pm-mis-layout {
  grid-template-columns:
    320px
    minmax(0, 1fr) !important;

  gap: 12px !important;
}

.pm-mis-queue,
.pm-mis-workspace {
  min-height:
    calc(
      100vh -
      var(--topbar-height, 72px) -
      305px
    ) !important;

  max-height:
    calc(
      100vh -
      var(--topbar-height, 72px) -
      305px
    ) !important;
}

/* =========================================================
   COLA DE PEDIDOS
   ========================================================= */

.pm-mis-queue__head {
  min-height: 60px !important;

  padding:
    10px
    12px !important;
}

.pm-mis-queue__head span:first-child {
  font-size: 9px !important;
}

.pm-mis-queue__head strong {
  font-size: 14px !important;
  font-weight: 950 !important;
}

.pm-mis-order__button {
  padding: 11px !important;

  gap: 7px !important;
}

.pm-mis-order__code {
  font-size: 11px !important;
  font-weight: 900 !important;
}

.pm-mis-order__client {
  font-size: 11.5px !important;
  font-weight: 900 !important;
}

/* =========================================================
   PEDIDO ACTIVO
   ========================================================= */

.pm-mis-workspace__head {
  min-height: 70px !important;

  padding:
    11px
    13px !important;
}

.pm-mis-workspace__identity > span {
  font-size: 9px !important;
}

.pm-mis-workspace__title h3 {
  font-size: 18px !important;
  font-weight: 950 !important;
}

.pm-mis-workspace__title p {
  font-size: 10.5px !important;
}

/* =========================================================
   RESUMEN
   ========================================================= */

.pm-mis-overview-item {
  min-height: 64px !important;

  padding:
    10px
    11px !important;
}

.pm-mis-overview-item span {
  font-size: 8.8px !important;
}

.pm-mis-overview-item strong {
  font-size: 18px !important;
}

/* =========================================================
   SCANNER
   ========================================================= */

.pm-mis-scanner {
  gap: 10px !important;

  padding:
    12px !important;
}

.pm-mis-scanner__head > div > span {
  font-size: 9px !important;
}

.pm-mis-scanner__head > div > strong {
  font-size: 13px !important;
}

.pm-mis-scanner__field {
  grid-template-columns:
    46px
    minmax(0, 1fr) !important;

  min-height: 58px !important;
}

.pm-mis-scanner__field-icon {
  width: 46px !important;
}

.pm-mis-scanner__field input {
  height: 56px !important;

  font-size: 16px !important;
}

/* =========================================================
   TABLA DE PRODUCTOS · TODO EL ANCHO
   ========================================================= */

.pm-mis-table {
  width: 100% !important;
  min-width: 0 !important;

  table-layout: fixed !important;
}

.pm-mis-table th:nth-child(1),
.pm-mis-table td:nth-child(1) {
  width: 12% !important;
}

.pm-mis-table th:nth-child(2),
.pm-mis-table td:nth-child(2) {
  width: 12% !important;
}

.pm-mis-table th:nth-child(3),
.pm-mis-table td:nth-child(3) {
  width: 23% !important;
}

.pm-mis-table th:nth-child(4),
.pm-mis-table td:nth-child(4) {
  width: 15% !important;
}

.pm-mis-table th:nth-child(5),
.pm-mis-table td:nth-child(5),
.pm-mis-table th:nth-child(6),
.pm-mis-table td:nth-child(6),
.pm-mis-table th:nth-child(7),
.pm-mis-table td:nth-child(7),
.pm-mis-table th:nth-child(8),
.pm-mis-table td:nth-child(8) {
  width: 7% !important;
}

.pm-mis-table th:nth-child(9),
.pm-mis-table td:nth-child(9) {
  width: 10% !important;

  text-align: left !important;
}

.pm-mis-table thead th {
  height: 42px !important;

  padding:
    0
    9px !important;

  font-size: 8.8px !important;
  font-weight: 950 !important;
}

.pm-mis-table tbody td {
  height: 52px !important;

  padding:
    8px
    9px !important;

  font-size: 10.5px !important;
}

.pm-mis-table td.is-action {
  overflow: visible !important;

  text-align: left !important;
}

.pm-mis-table td.is-action .pm-btn {
  min-width: 82px !important;
}

/* =========================================================
   PANEL LATERAL DE AJUSTE
   ========================================================= */

.pm-mis-adjust-overlay {
  z-index: 100100 !important;

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

  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.pm-mis-adjust-drawer {
  width:
    min(
      460px,
      100vw
    ) !important;

  background: #ffffff !important;

  border-left:
    1px solid
    rgba(
      0,
      0,
      0,
      0.16
    ) !important;

  box-shadow:
    -24px
    0
    70px
    rgba(
      0,
      0,
      0,
      0.24
    ) !important;
}

html[data-theme="dark"] .pm-mis-adjust-drawer,
body.dark .pm-mis-adjust-drawer,
.dark .pm-mis-adjust-drawer {
  background: #0b0b0b !important;

  border-left-color:
    rgba(
      255,
      255,
      255,
      0.15
    ) !important;
}

.pm-mis-adjust-drawer__head {
  min-height: 72px !important;

  padding:
    13px
    15px !important;
}

.pm-mis-adjust-drawer__head strong {
  font-size: 18px !important;
  font-weight: 950 !important;
}

.pm-mis-adjust-drawer__body {
  padding: 14px !important;

  background: #f5f6f8 !important;
}

html[data-theme="dark"] .pm-mis-adjust-drawer__body,
body.dark .pm-mis-adjust-drawer__body,
.dark .pm-mis-adjust-drawer__body {
  background: #080808 !important;
}

.pm-mis-adjust-drawer__footer {
  min-height: 64px !important;

  padding:
    12px
    15px !important;
}

/* =========================================================
   MODAL DE CIERRE
   ========================================================= */

#pmMisCloseModal.pm-modal {
  position: fixed !important;
  inset: 0 !important;

  z-index: 2147483646 !important;

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

  width: 100vw !important;
  height: 100dvh !important;

  padding: 18px !important;

  background:
    rgba(
      0,
      0,
      0,
      0.74
    ) !important;

  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;

  overflow: hidden !important;
}

#pmMisCloseModal .pm-mis-close-modal {
  position: relative !important;
  z-index: 2147483647 !important;

  width:
    min(
      620px,
      calc(100vw - 36px)
    ) !important;

  max-height:
    calc(
      100dvh -
      36px
    ) !important;

  color: #111111 !important;

  background: #ffffff !important;

  border:
    1px solid
    rgba(
      0,
      0,
      0,
      0.18
    ) !important;

  border-radius: 16px !important;

  box-shadow:
    0 30px 90px
    rgba(
      0,
      0,
      0,
      0.36
    ) !important;

  overflow: hidden !important;
}

html[data-theme="dark"]
#pmMisCloseModal
.pm-mis-close-modal,
body.dark
#pmMisCloseModal
.pm-mis-close-modal,
.dark
#pmMisCloseModal
.pm-mis-close-modal {
  color: #f5f5f5 !important;

  background: #0b0b0b !important;

  border-color:
    rgba(
      255,
      255,
      255,
      0.16
    ) !important;

  box-shadow:
    0 34px 100px
    rgba(
      0,
      0,
      0,
      0.86
    ) !important;
}

.pm-mis-close-modal__head {
  min-height: 72px !important;

  padding:
    13px
    15px !important;
}

.pm-mis-close-modal__head h3 {
  font-size: 18px !important;
  font-weight: 950 !important;
}

.pm-mis-close-modal__body {
  padding: 14px !important;

  background: #f5f6f8 !important;
}

html[data-theme="dark"] .pm-mis-close-modal__body,
body.dark .pm-mis-close-modal__body,
.dark .pm-mis-close-modal__body {
  background: #080808 !important;
}

.pm-mis-close-modal__footer {
  min-height: 64px !important;

  padding:
    12px
    15px !important;
}

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

@media (max-width: 1180px) {
  .pm-mis-layout {
    grid-template-columns:
      290px
      minmax(0, 1fr) !important;
  }

  .pm-mis-table {
    min-width: 1040px !important;
  }

  .pm-mis-table-wrap {
    overflow-x: auto !important;
  }
}

@media (max-width: 1024px) {
  .pm-mis-filterbar,
  .pm-mis-layout {
    grid-template-columns: 1fr !important;
  }

  .pm-mis-queue,
  .pm-mis-workspace {
    min-height: auto !important;
    max-height: none !important;
  }
}

@media (max-width: 760px) {
  .pm-page.pm-mis-page {
    gap: 10px !important;
  }

  .pm-mis-head {
    min-height: 0 !important;

    padding:
      12px !important;
  }

  .pm-mis-brand h2 {
    font-size: 22px !important;
  }

  .pm-mis-brand p {
    font-size: 11px !important;
  }

  #pmMisCloseModal.pm-modal {
    padding: 8px !important;
  }

  #pmMisCloseModal .pm-mis-close-modal {
    width:
      calc(
        100vw -
        16px
      ) !important;

    max-height:
      calc(
        100dvh -
        16px
      ) !important;

    border-radius: 13px !important;
  }
}/* =========================================================
   MIS PEDIDOS ASIGNADOS
   BORDES VISIBLES + CARDS Y TABLA CUADRICULADAS
   Agregar al FINAL de mis-asignados.css
   ========================================================= */

/* =========================================================
   CONTENEDOR GENERAL
   ========================================================= */

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

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

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

  padding: 10px !important;

  overflow: visible !important;
}

.pm-page.pm-mis-page {
  --pm-line: rgba(15, 23, 42, 0.16) !important;
  --pm-line-soft: rgba(15, 23, 42, 0.11) !important;
  --pm-line-strong: rgba(15, 23, 42, 0.27) !important;

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

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

  overflow: visible !important;
}

html[data-theme="dark"] .pm-page.pm-mis-page,
body.dark .pm-page.pm-mis-page,
.dark .pm-page.pm-mis-page {
  --pm-line: rgba(255, 255, 255, 0.16) !important;
  --pm-line-soft: rgba(255, 255, 255, 0.11) !important;
  --pm-line-strong: rgba(255, 255, 255, 0.27) !important;
}

/* =========================================================
   BORDES PRINCIPALES
   ========================================================= */

.pm-mis-head,
.pm-mis-metrics,
.pm-page.pm-mis-page .pm-panel,
.pm-mis-adjust-drawer,
.pm-mis-close-modal {
  border:
    1px solid
    rgba(15, 23, 42, 0.2) !important;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82) inset,
    0 5px 16px rgba(15, 23, 42, 0.05) !important;
}

.pm-mis-head:hover,
.pm-page.pm-mis-page .pm-panel:hover {
  border-color:
    rgba(15, 23, 42, 0.3) !important;
}

/* =========================================================
   MÉTRICAS SUPERIORES CUADRICULADAS
   ========================================================= */

.pm-mis-metrics {
  gap: 0 !important;

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

  overflow: hidden !important;
}

.pm-mis-metric {
  border-right:
    1px solid
    rgba(15, 23, 42, 0.16) !important;

  border-bottom: 0 !important;

  box-shadow: none !important;
}

.pm-mis-metric:last-child {
  border-right: 0 !important;
}

.pm-mis-metric:hover {
  background:
    rgba(15, 23, 42, 0.035) !important;
}

/* =========================================================
   FILTROS
   ========================================================= */

.pm-mis-filterbar {
  border:
    1px solid
    rgba(15, 23, 42, 0.2) !important;
}

.pm-mis-search input,
.pm-mis-filterbar select,
.pm-page.pm-mis-page .pm-btn,
.pm-page.pm-mis-page .pm-icon-btn {
  border-color:
    rgba(15, 23, 42, 0.2) !important;
}

.pm-mis-search input:hover,
.pm-mis-search input:focus,
.pm-mis-filterbar select:hover,
.pm-mis-filterbar select:focus,
.pm-page.pm-mis-page .pm-btn:hover:not(:disabled),
.pm-page.pm-mis-page .pm-icon-btn:hover {
  border-color:
    rgba(15, 23, 42, 0.32) !important;
}

/* =========================================================
   LAYOUT PRINCIPAL
   ========================================================= */

.pm-mis-layout {
  align-items: start !important;
}

.pm-mis-queue,
.pm-mis-workspace {
  height: auto !important;
  min-height: 640px !important;
  max-height: none !important;

  overflow: hidden !important;
}

/* =========================================================
   COLA DE PEDIDOS
   ========================================================= */

.pm-mis-queue__head {
  border-bottom:
    1px solid
    rgba(15, 23, 42, 0.19) !important;
}

.pm-mis-queue__count {
  border-color:
    rgba(15, 23, 42, 0.2) !important;
}

.pm-mis-list {
  gap: 0 !important;

  padding: 0 !important;

  overflow-y: visible !important;
}

.pm-mis-order {
  border-bottom:
    1px solid
    rgba(15, 23, 42, 0.15) !important;
}

.pm-mis-order:last-child {
  border-bottom: 0 !important;
}

.pm-mis-order__button {
  padding:
    12px !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: var(--pm-surface) !important;
}

.pm-mis-order__button:hover {
  background:
    rgba(15, 23, 42, 0.035) !important;
}

.pm-mis-order.is-active .pm-mis-order__button {
  background:
    rgba(15, 23, 42, 0.07) !important;

  box-shadow:
    inset 3px 0 0
    var(--pm-text) !important;
}

.pm-mis-order__progress {
  border:
    1px solid
    rgba(15, 23, 42, 0.12) !important;
}

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

.pm-mis-workspace {
  border:
    1px solid
    rgba(15, 23, 42, 0.2) !important;
}

.pm-mis-workspace__head,
.pm-mis-progress,
.pm-mis-scanner,
.pm-mis-products__head,
.pm-mis-finalize {
  border-bottom:
    1px solid
    rgba(15, 23, 42, 0.18) !important;
}

.pm-mis-finalize {
  border-top:
    1px solid
    rgba(15, 23, 42, 0.18) !important;

  border-bottom: 0 !important;
}

/* =========================================================
   RESUMEN DEL PEDIDO CUADRICULADO
   ========================================================= */

.pm-mis-overview {
  gap: 0 !important;

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

  border-bottom:
    1px solid
    rgba(15, 23, 42, 0.18) !important;
}

.pm-mis-overview-item {
  border-right:
    1px solid
    rgba(15, 23, 42, 0.15) !important;

  border-bottom: 0 !important;
}

.pm-mis-overview-item:last-child {
  border-right: 0 !important;
}

.pm-mis-overview-item:hover {
  background:
    rgba(15, 23, 42, 0.035) !important;
}

/* =========================================================
   PROGRESO
   ========================================================= */

.pm-mis-progress__bar,
.pm-mis-order__progress {
  background:
    rgba(15, 23, 42, 0.09) !important;
}

/* =========================================================
   SCANNER CUADRICULADO
   ========================================================= */

.pm-mis-scanner {
  gap: 0 !important;

  padding: 0 !important;

  background: var(--pm-surface) !important;
}

.pm-mis-scanner__head {
  min-height: 58px !important;

  padding:
    10px
    12px !important;

  border-bottom:
    1px solid
    rgba(15, 23, 42, 0.16) !important;
}

.pm-mis-scanner__field {
  margin:
    12px
    12px
    0 !important;

  border-color:
    rgba(15, 23, 42, 0.24) !important;
}

.pm-mis-scanner__field-icon {
  border-right:
    1px solid
    rgba(15, 23, 42, 0.18) !important;
}

.pm-mis-scanner__notice {
  margin:
    8px
    12px
    0 !important;
}

.pm-mis-scan-feedback {
  margin:
    10px
    12px
    12px !important;

  border-color:
    rgba(15, 23, 42, 0.2) !important;
}

.pm-mis-scan-feedback__icon {
  border:
    1px solid
    rgba(15, 23, 42, 0.16) !important;
}

/* =========================================================
   PRODUCTOS Y TABLA
   ========================================================= */

.pm-mis-products {
  overflow: visible !important;
}

.pm-mis-products__head {
  border-bottom:
    1px solid
    rgba(15, 23, 42, 0.19) !important;
}

.pm-mis-products__summary span,
.pm-mis-item-status,
.pm-page.pm-mis-page .pm-badge {
  border-color:
    rgba(15, 23, 42, 0.2) !important;
}

.pm-mis-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

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

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

.pm-mis-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;

  border:
    1px solid
    rgba(15, 23, 42, 0.2) !important;
}

.pm-mis-table th,
.pm-mis-table td {
  border-right:
    1px solid
    rgba(15, 23, 42, 0.15) !important;

  border-bottom:
    1px solid
    rgba(15, 23, 42, 0.15) !important;
}

.pm-mis-table th:last-child,
.pm-mis-table td:last-child {
  border-right: 0 !important;
}

.pm-mis-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

.pm-mis-table thead th {
  background:
    color-mix(
      in srgb,
      var(--pm-surface-soft) 90%,
      #e8eaed
    ) !important;

  border-bottom:
    1px solid
    rgba(15, 23, 42, 0.24) !important;
}

.pm-mis-table tbody tr:nth-child(even) td {
  background:
    rgba(15, 23, 42, 0.018) !important;
}

.pm-mis-table tbody tr:hover td {
  background:
    rgba(15, 23, 42, 0.05) !important;
}

/* =========================================================
   COLUMNA DE ACCIÓN INTEGRADA
   ========================================================= */

.pm-mis-table th:nth-child(9),
.pm-mis-table td:nth-child(9) {
  border-left:
    1px solid
    rgba(15, 23, 42, 0.2) !important;

  text-align: left !important;
}

.pm-mis-table td.is-action {
  overflow: visible !important;
}

.pm-mis-table td.is-action .pm-btn {
  min-width: 86px !important;
}

/* =========================================================
   ESTADOS DE FILA
   ========================================================= */

.pm-mis-table tbody tr.is-complete td {
  background:
    color-mix(
      in srgb,
      var(--pm-success-soft) 70%,
      var(--pm-surface)
    ) !important;
}

.pm-mis-table tbody tr.has-diff td {
  background:
    color-mix(
      in srgb,
      var(--pm-warning-soft) 72%,
      var(--pm-surface)
    ) !important;
}

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

.pm-mis-adjust-drawer {
  border-left:
    1px solid
    rgba(15, 23, 42, 0.24) !important;
}

.pm-mis-adjust-drawer__head,
.pm-mis-adjust-drawer__footer {
  border-color:
    rgba(15, 23, 42, 0.19) !important;
}

.pm-mis-adjust-drawer__body {
  gap: 12px !important;
}

.pm-mis-adjust-summary,
.pm-mis-adjust-product,
.pm-mis-adjust-form,
.pm-mis-adjust-warning {
  border-color:
    rgba(15, 23, 42, 0.2) !important;
}

/* =========================================================
   RESUMEN DEL AJUSTE CUADRICULADO
   ========================================================= */

.pm-mis-adjust-summary {
  gap: 0 !important;

  background: var(--pm-surface) !important;
}

.pm-mis-adjust-summary article {
  border-right:
    1px solid
    rgba(15, 23, 42, 0.15) !important;
}

.pm-mis-adjust-summary article:last-child {
  border-right: 0 !important;
}

.pm-mis-adjust-summary article:hover {
  background:
    rgba(15, 23, 42, 0.035) !important;
}

/* =========================================================
   FORMULARIO DEL AJUSTE CUADRICULADO
   ========================================================= */

.pm-mis-adjust-form {
  gap: 0 !important;

  padding: 0 !important;

  overflow: hidden !important;
}

.pm-mis-adjust-form > *,
.pm-mis-adjust-form__numbers {
  padding:
    11px !important;

  border-bottom:
    1px solid
    rgba(15, 23, 42, 0.14) !important;
}

.pm-mis-adjust-form > :last-child {
  border-bottom: 0 !important;
}

.pm-mis-adjust-form__numbers {
  gap: 0 !important;

  padding: 0 !important;
}

.pm-mis-adjust-form__numbers .pm-field {
  padding:
    11px !important;

  border-right:
    1px solid
    rgba(15, 23, 42, 0.14) !important;
}

.pm-mis-adjust-form__numbers .pm-field:last-child {
  border-right: 0 !important;
}

.pm-mis-adjust-form .pm-field input,
.pm-mis-adjust-form .pm-field textarea {
  border-color:
    rgba(15, 23, 42, 0.2) !important;
}

/* =========================================================
   MODAL DE CIERRE
   ========================================================= */

.pm-mis-close-modal {
  border:
    1px solid
    rgba(15, 23, 42, 0.22) !important;
}

.pm-mis-close-modal__head,
.pm-mis-close-modal__footer {
  border-color:
    rgba(15, 23, 42, 0.19) !important;
}

.pm-mis-close-summary,
.pm-mis-close-form,
.pm-mis-stock-check,
.pm-mis-close-warning {
  border-color:
    rgba(15, 23, 42, 0.2) !important;
}

/* =========================================================
   RESUMEN DEL CIERRE CUADRICULADO
   ========================================================= */

.pm-mis-close-summary {
  gap: 0 !important;

  background: var(--pm-surface) !important;
}

.pm-mis-close-summary article {
  border-right:
    1px solid
    rgba(15, 23, 42, 0.15) !important;
}

.pm-mis-close-summary article:last-child {
  border-right: 0 !important;
}

.pm-mis-close-summary article:hover {
  background:
    rgba(15, 23, 42, 0.035) !important;
}

/* =========================================================
   FORMULARIO DEL CIERRE CUADRICULADO
   ========================================================= */

.pm-mis-close-form {
  gap: 0 !important;

  padding: 0 !important;

  overflow: hidden !important;
}

.pm-mis-close-form > * {
  padding:
    11px !important;

  border-bottom:
    1px solid
    rgba(15, 23, 42, 0.14) !important;

  border-radius: 0 !important;
}

.pm-mis-close-form > :last-child {
  border-bottom: 0 !important;
}

.pm-mis-close-form .pm-field input,
.pm-mis-close-form .pm-field textarea {
  border-color:
    rgba(15, 23, 42, 0.2) !important;
}

/* =========================================================
   MODALES SEGUROS
   ========================================================= */

.pm-mis-adjust-overlay,
#pmMisCloseModal.pm-modal {
  position: fixed !important;
  inset: 0 !important;

  z-index: 2147483646 !important;

  width: 100vw !important;
  height: 100dvh !important;

  isolation: isolate !important;
}

.pm-mis-adjust-overlay[aria-hidden="true"],
#pmMisCloseModal[aria-hidden="true"] {
  display: none !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.pm-mis-adjust-overlay[aria-hidden="false"],
#pmMisCloseModal[aria-hidden="false"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* =========================================================
   SCROLL NORMAL Y FOOTER
   ========================================================= */

body:has(.pm-page.pm-mis-page) .app-shell,
body:has(.pm-page.pm-mis-page) .app-main {
  min-height: 100vh !important;
  height: auto !important;

  overflow: visible !important;
}

body:has(.pm-page.pm-mis-page) .app-footer,
body:has(.pm-page.pm-mis-page) #footerMount,
body:has(.pm-page.pm-mis-page) footer.app-footer {
  position: static !important;

  inset: auto !important;

  width: 100% !important;

  margin-top: 12px !important;

  transform: none !important;
}

/* =========================================================
   MODO OSCURO
   ========================================================= */

html[data-theme="dark"] .pm-mis-head,
html[data-theme="dark"] .pm-mis-metrics,
html[data-theme="dark"] .pm-page.pm-mis-page .pm-panel,
html[data-theme="dark"] .pm-mis-adjust-drawer,
html[data-theme="dark"] .pm-mis-close-modal {
  border-color:
    rgba(255, 255, 255, 0.2) !important;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .pm-mis-table {
  border-color:
    rgba(255, 255, 255, 0.2) !important;
}

html[data-theme="dark"] .pm-mis-metric,
html[data-theme="dark"] .pm-mis-overview-item,
html[data-theme="dark"] .pm-mis-order,
html[data-theme="dark"] .pm-mis-table th,
html[data-theme="dark"] .pm-mis-table td,
html[data-theme="dark"] .pm-mis-adjust-summary article,
html[data-theme="dark"] .pm-mis-adjust-form > *,
html[data-theme="dark"] .pm-mis-adjust-form__numbers .pm-field,
html[data-theme="dark"] .pm-mis-close-summary article,
html[data-theme="dark"] .pm-mis-close-form > * {
  border-right-color:
    rgba(255, 255, 255, 0.13) !important;

  border-bottom-color:
    rgba(255, 255, 255, 0.13) !important;
}

html[data-theme="dark"] .pm-mis-table thead th {
  background: #111111 !important;

  border-bottom-color:
    rgba(255, 255, 255, 0.22) !important;
}

html[data-theme="dark"] .pm-mis-table tbody tr:nth-child(even) td {
  background:
    rgba(255, 255, 255, 0.025) !important;
}

html[data-theme="dark"] .pm-mis-table tbody tr:hover td,
html[data-theme="dark"] .pm-mis-metric:hover,
html[data-theme="dark"] .pm-mis-overview-item:hover,
html[data-theme="dark"] .pm-mis-order__button:hover,
html[data-theme="dark"] .pm-mis-adjust-summary article:hover,
html[data-theme="dark"] .pm-mis-close-summary article:hover {
  background:
    rgba(255, 255, 255, 0.055) !important;
}

html[data-theme="dark"] .pm-mis-order.is-active .pm-mis-order__button {
  background:
    rgba(255, 255, 255, 0.08) !important;
}

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

@media (max-width: 1180px) {
  .pm-mis-metric {
    border-bottom:
      1px solid
      rgba(15, 23, 42, 0.14) !important;
  }

  .pm-mis-metric:nth-child(2n) {
    border-right: 0 !important;
  }

  .pm-mis-metric:nth-last-child(-n + 2) {
    border-bottom: 0 !important;
  }

  .pm-mis-overview-item {
    border-bottom:
      1px solid
      rgba(15, 23, 42, 0.14) !important;
  }

  .pm-mis-overview-item:nth-child(3n) {
    border-right: 0 !important;
  }
}

@media (max-width: 1024px) {
  .pm-mis-queue,
  .pm-mis-workspace {
    min-height: 0 !important;
  }

  .pm-mis-list {
    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 10px !important;

    padding: 10px !important;
  }

  .pm-mis-order {
    border:
      1px solid
      rgba(15, 23, 42, 0.18) !important;

    border-radius: 10px !important;

    overflow: hidden !important;
  }
}

@media (max-width: 820px) {
  .pm-mis-overview-item:nth-child(3n) {
    border-right:
      1px solid
      rgba(15, 23, 42, 0.14) !important;
  }

  .pm-mis-overview-item:nth-child(2n) {
    border-right: 0 !important;
  }

  .pm-mis-adjust-summary article,
  .pm-mis-close-summary article {
    border-bottom:
      1px solid
      rgba(15, 23, 42, 0.14) !important;
  }

  .pm-mis-adjust-summary article:nth-child(2n),
  .pm-mis-close-summary article:nth-child(2n) {
    border-right: 0 !important;
  }
}

@media (max-width: 640px) {
  .pm-mis-metric,
  .pm-mis-overview-item,
  .pm-mis-adjust-summary article,
  .pm-mis-close-summary article {
    border-right: 0 !important;

    border-bottom:
      1px solid
      rgba(15, 23, 42, 0.14) !important;
  }

  .pm-mis-metric:last-child,
  .pm-mis-overview-item:last-child,
  .pm-mis-adjust-summary article:last-child,
  .pm-mis-close-summary article:last-child {
    border-bottom: 0 !important;
  }

  .pm-mis-list {
    grid-template-columns: 1fr !important;
  }

  .pm-mis-adjust-form__numbers .pm-field {
    border-right: 0 !important;

    border-bottom:
      1px solid
      rgba(15, 23, 42, 0.14) !important;
  }

  .pm-mis-adjust-form__numbers .pm-field:last-child {
    border-bottom: 0 !important;
  }
}