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

   UBICACIÓN:
   frontend/src/pages/mi-gestion/disponibilidad-pedidos/
   disponibilidad-pedidos.css

   WIRTZ HUB · MI GESTIÓN
   DISPONIBILIDAD DE PEDIDOS

   DISEÑO:
   - Premium.
   - Minimalista.
   - Responsive.
   - Animaciones sutiles.
   - Sin glow.
   - Divisiones marcadas.
   - Tipografía con mayor peso.
   - Modo oscuro NEGRO REAL.
   - Sin negro azulado.
   - Compatible con Sidebar / Topbar / Rightbar / Footer.
   ========================================================= */


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

:root {
  --dp-font:
    "DM Sans",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --dp-bg:
    #f6f6f6;

  --dp-bg-elevated:
    #ffffff;

  --dp-bg-soft:
    #f1f1f1;

  --dp-bg-muted:
    #e9e9e9;

  --dp-bg-hover:
    #f3f3f3;

  --dp-border:
    #d4d4d4;

  --dp-border-strong:
    #b8b8b8;

  --dp-border-dark:
    #949494;

  --dp-text:
    #111111;

  --dp-text-strong:
    #000000;

  --dp-text-secondary:
    #454545;

  --dp-text-muted:
    #6d6d6d;

  --dp-text-faint:
    #8b8b8b;

  --dp-primary:
    #111111;

  --dp-primary-hover:
    #000000;

  --dp-primary-text:
    #ffffff;

  --dp-success:
    #157347;

  --dp-success-bg:
    #ecf7f0;

  --dp-success-border:
    #b9dec8;

  --dp-warning:
    #9a6700;

  --dp-warning-bg:
    #fff7df;

  --dp-warning-border:
    #ead59b;

  --dp-danger:
    #b42318;

  --dp-danger-bg:
    #fff0ee;

  --dp-danger-border:
    #e7b8b4;

  --dp-info:
    #31578f;

  --dp-info-bg:
    #eef3fa;

  --dp-info-border:
    #c8d4e8;

  --dp-radius-xs:
    6px;

  --dp-radius-sm:
    8px;

  --dp-radius-md:
    10px;

  --dp-radius-lg:
    12px;

  --dp-radius-xl:
    16px;

  --dp-transition:
    160ms ease;

  --dp-shadow-xs:
    0 1px 2px rgba(0, 0, 0, 0.04);

  --dp-shadow-sm:
    0 4px 12px rgba(0, 0, 0, 0.06);

  --dp-shadow-md:
    0 10px 28px rgba(0, 0, 0, 0.09);
}


/* =========================================================
   MODO OSCURO · NEGRO REAL
   ========================================================= */

html[data-theme="dark"],
body[data-theme="dark"],
[data-theme="dark"] {
  --dp-bg:
    #000000;

  --dp-bg-elevated:
    #050505;

  --dp-bg-soft:
    #0a0a0a;

  --dp-bg-muted:
    #101010;

  --dp-bg-hover:
    #141414;

  --dp-border:
    #242424;

  --dp-border-strong:
    #383838;

  --dp-border-dark:
    #4b4b4b;

  --dp-text:
    #f2f2f2;

  --dp-text-strong:
    #ffffff;

  --dp-text-secondary:
    #c5c5c5;

  --dp-text-muted:
    #9c9c9c;

  --dp-text-faint:
    #747474;

  --dp-primary:
    #ffffff;

  --dp-primary-hover:
    #e8e8e8;

  --dp-primary-text:
    #000000;

  --dp-success:
    #52c788;

  --dp-success-bg:
    #07140c;

  --dp-success-border:
    #1d5334;

  --dp-warning:
    #e5b94c;

  --dp-warning-bg:
    #171205;

  --dp-warning-border:
    #5a4615;

  --dp-danger:
    #ff8178;

  --dp-danger-bg:
    #190807;

  --dp-danger-border:
    #67231f;

  --dp-info:
    #8eb6ef;

  --dp-info-bg:
    #080d14;

  --dp-info-border:
    #25374f;

  --dp-shadow-xs:
    none;

  --dp-shadow-sm:
    none;

  --dp-shadow-md:
    none;
}


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

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


.dp-page {
  width:
    100%;

  min-width:
    0;

  font-family:
    var(--dp-font);

  color:
    var(--dp-text);

  background:
    var(--dp-bg);

  padding:
    18px 18px 28px;

  overflow-x:
    hidden;
}


.dp-page__inner {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  margin:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;
}


/* =========================================================
   TIPOGRAFÍA GENERAL
   ========================================================= */

.dp-page h1,
.dp-page h2,
.dp-page h3,
.dp-page strong,
.dp-page button,
.dp-page input,
.dp-page select {
  font-family:
    var(--dp-font);
}


.dp-page h1,
.dp-page h2,
.dp-page h3 {
  margin:
    0;

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

  letter-spacing:
    -0.025em;
}


.dp-page p {
  margin:
    0;

  color:
    var(--dp-text-secondary);
}


.dp-page button,
.dp-page input,
.dp-page select {
  font-size:
    13px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.dp-eyebrow {
  display:
    inline-flex;

  align-items:
    center;

  min-width:
    0;

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;

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


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

.dp-page-head {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  padding:
    18px 20px;

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

  border-radius:
    var(--dp-radius-xl);

  background:
    var(--dp-bg-elevated);

  box-shadow:
    var(--dp-shadow-xs);

  animation:
    dpFadeUp 280ms ease both;
}


.dp-page-head__main {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}


.dp-page-head__icon {
  width:
    42px;

  height:
    42px;

  flex:
    0 0 42px;

  display:
    grid;

  place-items:
    center;

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

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

  border-radius:
    11px;

  background:
    var(--dp-bg-soft);
}


.dp-page-head__icon svg {
  width:
    19px;

  height:
    19px;

  stroke-width:
    2;
}


.dp-page-head__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.dp-page-head__meta {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;
}


.dp-meta-divider {
  width:
    1px;

  height:
    12px;

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


.dp-date-context {
  min-width:
    0;

  font-size:
    11px;

  line-height:
    1;

  font-weight:
    700;

  color:
    var(--dp-text-secondary);
}


.dp-page-head h1 {
  font-size:
    clamp(
      21px,
      2vw,
      26px
    );

  line-height:
    1.14;

  font-weight:
    850;
}


.dp-page-head p {
  max-width:
    720px;

  font-size:
    12px;

  line-height:
    1.5;

  font-weight:
    600;

  color:
    var(--dp-text-secondary);
}


.dp-page-head__actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;
}


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

.dp-btn {
  min-height:
    36px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    0 13px;

  border:
    1px solid transparent;

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

  outline:
    none;

  cursor:
    pointer;

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    800;

  white-space:
    nowrap;

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


.dp-btn svg {
  width:
    15px;

  height:
    15px;

  flex:
    0 0 15px;

  stroke-width:
    2.15;
}


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


.dp-btn:disabled {
  opacity:
    0.45;

  cursor:
    not-allowed;
}


.dp-btn--primary {
  color:
    var(--dp-primary-text);

  background:
    var(--dp-primary);

  border-color:
    var(--dp-primary);
}


.dp-btn--primary:not(:disabled):hover {
  background:
    var(--dp-primary-hover);

  border-color:
    var(--dp-primary-hover);
}


.dp-btn--secondary {
  color:
    var(--dp-text-strong);

  background:
    var(--dp-bg-elevated);

  border-color:
    var(--dp-border-strong);
}


.dp-btn--secondary:not(:disabled):hover {
  background:
    var(--dp-bg-hover);

  border-color:
    var(--dp-border-dark);
}


.dp-btn--small {
  min-height:
    31px;

  padding:
    0 10px;

  font-size:
    11px;
}


.dp-btn.is-loading svg {
  animation:
    dpSpin 800ms linear infinite;
}


/* =========================================================
   ICON BUTTON
   ========================================================= */

.dp-icon-btn {
  width:
    36px;

  height:
    36px;

  flex:
    0 0 36px;

  display:
    inline-grid;

  place-items:
    center;

  padding:
    0;

  color:
    var(--dp-text-secondary);

  background:
    var(--dp-bg-elevated);

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

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

  cursor:
    pointer;

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


.dp-icon-btn svg {
  width:
    16px;

  height:
    16px;

  stroke-width:
    2;
}


.dp-icon-btn:not(:disabled):hover {
  color:
    var(--dp-text-strong);

  background:
    var(--dp-bg-hover);

  border-color:
    var(--dp-border-dark);
}


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


.dp-icon-btn:disabled {
  opacity:
    0.38;

  cursor:
    not-allowed;
}


/* =========================================================
   KPI GRID
   ========================================================= */

.dp-kpis {
  width:
    100%;

  display:
    grid;

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

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

  border-radius:
    var(--dp-radius-xl);

  overflow:
    hidden;

  background:
    var(--dp-bg-elevated);

  animation:
    dpFadeUp 320ms ease both;
}


/* =========================================================
   KPI
   ========================================================= */

.dp-kpi {
  position:
    relative;

  min-width:
    0;

  min-height:
    124px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    stretch;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    16px;

  text-align:
    left;

  border:
    0;

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

  background:
    var(--dp-bg-elevated);

  color:
    var(--dp-text);

  cursor:
    pointer;

  transition:
    background var(--dp-transition);
}


.dp-kpi:last-child {
  border-right:
    0;
}


.dp-kpi:hover {
  background:
    var(--dp-bg-hover);
}


.dp-kpi__head {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.dp-kpi__icon {
  width:
    28px;

  height:
    28px;

  display:
    grid;

  place-items:
    center;

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

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

  background:
    var(--dp-bg-soft);

  color:
    var(--dp-text-strong);
}


.dp-kpi__icon svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2.1;
}


.dp-kpi__label {
  min-width:
    0;

  font-size:
    11px;

  line-height:
    1.2;

  font-weight:
    800;

  color:
    var(--dp-text-secondary);
}


.dp-kpi__body {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.dp-kpi__value {
  font-size:
    clamp(
      26px,
      3vw,
      34px
    );

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    -0.045em;

  color:
    var(--dp-text-strong);
}


.dp-kpi__detail {
  font-size:
    10px;

  line-height:
    1.35;

  font-weight:
    700;

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


.dp-kpi__arrow {
  position:
    absolute;

  top:
    15px;

  right:
    15px;

  color:
    var(--dp-text-faint);

  transition:
    color var(--dp-transition),
    transform var(--dp-transition);
}


.dp-kpi__arrow svg {
  width:
    14px;

  height:
    14px;
}


.dp-kpi:hover .dp-kpi__arrow {
  color:
    var(--dp-text-strong);

  transform:
    translate(
      1px,
      -1px
    );
}


/* =========================================================
   KPI · FALTANTES
   ========================================================= */

.dp-kpi[data-metric="faltantes"] {
  border-left:
    3px solid var(--dp-danger);
}


.dp-kpi[data-metric="faltantes"]
.dp-kpi__icon {
  color:
    var(--dp-danger);

  border-color:
    var(--dp-danger-border);

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


/* =========================================================
   KPI · DISPONIBLES
   ========================================================= */

.dp-kpi[data-metric="disponibles"]
.dp-kpi__icon {
  color:
    var(--dp-success);

  border-color:
    var(--dp-success-border);

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


/* =========================================================
   OPERACIONES
   ========================================================= */

.dp-operations {
  width:
    100%;

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

  border-radius:
    var(--dp-radius-xl);

  background:
    var(--dp-bg-elevated);

  overflow:
    hidden;

  animation:
    dpFadeUp 360ms ease both;
}


.dp-operations__top {
  min-height:
    58px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    12px 14px;

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


.dp-operations__title {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.dp-operations__title > strong {
  font-size:
    14px;

  line-height:
    1.2;

  font-weight:
    850;

  color:
    var(--dp-text-strong);
}


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

.dp-view-tabs {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  padding:
    3px;

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

  border-radius:
    var(--dp-radius-md);

  background:
    var(--dp-bg-soft);
}


.dp-view-tab {
  min-height:
    31px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  padding:
    0 10px;

  border:
    1px solid transparent;

  border-radius:
    7px;

  background:
    transparent;

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

  cursor:
    pointer;

  font-size:
    11px;

  font-weight:
    800;

  white-space:
    nowrap;

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


.dp-view-tab svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2;
}


.dp-view-tab:hover {
  color:
    var(--dp-text-strong);

  background:
    var(--dp-bg-hover);
}


.dp-view-tab.is-active {
  color:
    var(--dp-text-strong);

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

  background:
    var(--dp-bg-elevated);
}


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

.dp-operations__filters {
  padding:
    12px 14px;
}


.dp-filters {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    minmax(
      260px,
      1fr
    )
    minmax(
      150px,
      180px
    )
    minmax(
      150px,
      170px
    )
    minmax(
      150px,
      170px
    )
    36px;

  align-items:
    end;

  gap:
    9px;
}


/* =========================================================
   BUSCADOR
   ========================================================= */

.dp-search {
  position:
    relative;

  min-width:
    0;

  height:
    38px;

  display:
    flex;

  align-items:
    center;

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

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

  background:
    var(--dp-bg-elevated);

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


.dp-search:focus-within {
  border-color:
    var(--dp-text-secondary);
}


.dp-search > svg {
  position:
    absolute;

  left:
    11px;

  width:
    15px;

  height:
    15px;

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

  pointer-events:
    none;
}


.dp-search input {
  width:
    100%;

  min-width:
    0;

  height:
    100%;

  padding:
    0 38px 0 34px;

  border:
    0;

  outline:
    none;

  background:
    transparent;

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

  font-size:
    12px;

  font-weight:
    700;
}


.dp-search input::placeholder {
  color:
    var(--dp-text-faint);

  font-weight:
    600;
}


.dp-search input::-webkit-search-cancel-button {
  display:
    none;
}


.dp-search__clear {
  position:
    absolute;

  right:
    7px;

  width:
    25px;

  height:
    25px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

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

  background:
    transparent;

  border:
    0;

  border-radius:
    6px;

  cursor:
    pointer;
}


.dp-search__clear:hover {
  color:
    var(--dp-text-strong);

  background:
    var(--dp-bg-hover);
}


.dp-search__clear svg {
  width:
    14px;

  height:
    14px;
}


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

.dp-filter-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.dp-filter-field__label {
  padding-left:
    1px;

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    850;

  text-transform:
    uppercase;

  letter-spacing:
    0.07em;

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


.dp-filter-field__control {
  position:
    relative;

  min-width:
    0;

  height:
    38px;

  display:
    flex;

  align-items:
    center;
}


.dp-filter-field__control > svg {
  position:
    absolute;

  left:
    10px;

  width:
    14px;

  height:
    14px;

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

  pointer-events:
    none;

  z-index:
    2;
}


.dp-filter-field select,
.dp-filter-field input {
  width:
    100%;

  min-width:
    0;

  height:
    38px;

  padding:
    0 10px 0 32px;

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

  background:
    var(--dp-bg-elevated);

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

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

  outline:
    none;

  font-size:
    11px;

  font-weight:
    750;

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


.dp-filter-field select:focus,
.dp-filter-field input:focus {
  border-color:
    var(--dp-text-secondary);
}


.dp-filter-field select {
  appearance:
    auto;

  cursor:
    pointer;
}


.dp-filter-field input[type="date"] {
  color-scheme:
    light;
}


html[data-theme="dark"]
.dp-filter-field input[type="date"],
body[data-theme="dark"]
.dp-filter-field input[type="date"],
[data-theme="dark"]
.dp-filter-field input[type="date"] {
  color-scheme:
    dark;
}


.dp-filter-reset {
  align-self:
    end;
}


/* =========================================================
   PRIORIDAD
   ========================================================= */

.dp-priority-notice {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  padding:
    10px 12px;

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

  border-left:
    3px solid var(--dp-warning);

  border-radius:
    var(--dp-radius-md);

  background:
    var(--dp-bg-elevated);

  animation:
    dpFadeUp 390ms ease both;
}


.dp-priority-notice__icon {
  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--dp-warning-border);

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

  color:
    var(--dp-warning);

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


.dp-priority-notice__icon svg {
  width:
    14px;

  height:
    14px;
}


.dp-priority-notice__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.dp-priority-notice__content strong {
  font-size:
    11px;

  line-height:
    1.2;

  font-weight:
    850;

  color:
    var(--dp-text-strong);
}


.dp-priority-notice__content span {
  font-size:
    10px;

  line-height:
    1.4;

  font-weight:
    650;

  color:
    var(--dp-text-secondary);
}


.dp-priority-notice__badge {
  padding:
    5px 8px;

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

  border-radius:
    999px;

  color:
    var(--dp-text-secondary);

  background:
    var(--dp-bg-soft);

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    850;

  text-transform:
    uppercase;

  letter-spacing:
    0.05em;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.dp-main-layout {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    14px;
}


.dp-main-layout__primary {
  min-width:
    0;
}


/* =========================================================
   ORDERS CARD
   ========================================================= */

.dp-orders-card {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

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

  border-radius:
    var(--dp-radius-xl);

  background:
    var(--dp-bg-elevated);

  overflow:
    visible;

  animation:
    dpFadeUp 420ms ease both;
}


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

.dp-orders-head {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    15px 16px;

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


.dp-orders-head__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.dp-orders-head h2 {
  font-size:
    17px;

  line-height:
    1.2;

  font-weight:
    880;
}


.dp-orders-head p {
  max-width:
    740px;

  font-size:
    10.5px;

  line-height:
    1.45;

  font-weight:
    650;

  color:
    var(--dp-text-secondary);
}


.dp-orders-head__right {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;
}


/* =========================================================
   LIVE
   ========================================================= */

.dp-live {
  min-height:
    29px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    0 9px;

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

  border-radius:
    999px;

  background:
    var(--dp-bg-soft);

  color:
    var(--dp-text-secondary);

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    800;

  white-space:
    nowrap;
}


.dp-live__dot {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--dp-success);
}


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

.dp-orders-head__range {
  min-height:
    29px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    0 9px;

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

  border-radius:
    999px;

  background:
    var(--dp-bg-elevated);

  color:
    var(--dp-text-secondary);

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    800;

  white-space:
    nowrap;
}


.dp-orders-head__range svg {
  width:
    13px;

  height:
    13px;
}


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

.dp-table-wrapper {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    visible;

  scrollbar-width:
    thin;

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


.dp-table-wrapper::-webkit-scrollbar {
  height:
    7px;
}


.dp-table-wrapper::-webkit-scrollbar-track {
  background:
    transparent;
}


.dp-table-wrapper::-webkit-scrollbar-thumb {
  background:
    var(--dp-border-strong);

  border-radius:
    999px;
}


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

.dp-table {
  width:
    100%;

  min-width:
    980px;

  border-collapse:
    separate;

  border-spacing:
    0;

  table-layout:
    auto;
}


.dp-table thead th {
  position:
    relative;

  height:
    38px;

  padding:
    0 12px;

  text-align:
    left;

  vertical-align:
    middle;

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

  background:
    var(--dp-bg-soft);

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

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    900;

  text-transform:
    uppercase;

  letter-spacing:
    0.07em;

  white-space:
    nowrap;
}


.dp-table thead th:not(:last-child)::after {
  content:
    "";

  position:
    absolute;

  top:
    9px;

  right:
    0;

  width:
    1px;

  height:
    20px;

  background:
    var(--dp-border);
}


.dp-table thead th.is-actions {
  text-align:
    right;
}


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

.dp-table-row {
  position:
    relative;

  transition:
    background var(--dp-transition);
}


.dp-table-row td {
  height:
    64px;

  padding:
    9px 12px;

  vertical-align:
    middle;

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

  background:
    var(--dp-bg-elevated);

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


.dp-table-row td:not(:last-child) {
  border-right:
    1px solid color-mix(
      in srgb,
      var(--dp-border)
      55%,
      transparent
    );
}


.dp-table-row:hover td {
  background:
    var(--dp-bg-hover);
}


.dp-table-row:last-child td {
  border-bottom:
    0;
}


.dp-table-row.is-missing td:first-child {
  box-shadow:
    inset 3px 0 0 var(--dp-danger);
}


.dp-table-row.is-available td:first-child {
  box-shadow:
    inset 3px 0 0 var(--dp-success);
}


.dp-table-row.is-closed {
  opacity:
    0.74;
}


/* =========================================================
   CHANNEL
   ========================================================= */

.dp-channel {
  max-width:
    180px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    5px 8px;

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

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

  background:
    var(--dp-bg-soft);

  color:
    var(--dp-text-strong);
}


.dp-channel__icon {
  width:
    22px;

  height:
    22px;

  flex:
    0 0 22px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    6px;

  background:
    var(--dp-bg-elevated);
}


.dp-channel__icon svg {
  width:
    12px;

  height:
    12px;
}


.dp-channel__text {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    850;
}


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

   CONTINÚA:
   - Celdas tabla
   - Badges
   - Menú gestión
   - Paginación
   - FULL
   ========================================================= *//* =========================================================
   PARTE 2 DE 3

   UBICACIÓN:
   frontend/src/pages/mi-gestion/disponibilidad-pedidos/
   disponibilidad-pedidos.css

   CONTINÚA:
   - Celdas tabla
   - Badges
   - Menú gestión
   - Paginación
   - FULL
   ========================================================= */


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

.dp-order {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.dp-order__main {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.dp-order__main strong {
  max-width:
    220px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px;

  line-height:
    1.2;

  font-weight:
    900;

  color:
    var(--dp-text-strong);
}


.dp-order__main span {
  font-size:
    9px;

  line-height:
    1;

  font-weight:
    700;

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


.dp-order__priority {
  flex:
    0 0 auto;

  min-height:
    21px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 7px;

  border:
    1px solid var(--dp-danger-border);

  border-radius:
    999px;

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

  color:
    var(--dp-danger);

  font-size:
    8px;

  line-height:
    1;

  font-weight:
    900;

  text-transform:
    uppercase;

  letter-spacing:
    0.05em;
}


/* =========================================================
   FECHA
   ========================================================= */

.dp-date-cell {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.dp-date-cell span {
  font-size:
    10px;

  line-height:
    1.3;

  font-weight:
    750;

  color:
    var(--dp-text-secondary);

  white-space:
    nowrap;
}


/* =========================================================
   NÚMERO
   ========================================================= */

.dp-number {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.dp-number strong {
  font-size:
    13px;

  line-height:
    1;

  font-weight:
    900;

  color:
    var(--dp-text-strong);
}


.dp-number span {
  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    650;

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


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

.dp-stock-cell {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    4px;
}


.dp-stock-cell__detail {
  font-size:
    9px;

  line-height:
    1.25;

  font-weight:
    700;

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

  white-space:
    nowrap;
}


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

.dp-status {
  min-height:
    25px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  padding:
    0 8px;

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

  border-radius:
    999px;

  background:
    var(--dp-bg-soft);

  color:
    var(--dp-text-secondary);

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    850;

  white-space:
    nowrap;
}


.dp-status svg {
  width:
    12px;

  height:
    12px;

  flex:
    0 0 12px;

  stroke-width:
    2.2;
}


/* =========================================================
   STATUS · STOCK
   ========================================================= */

.dp-status--stock.is-available,
.dp-status--item.is-available {
  color:
    var(--dp-success);

  border-color:
    var(--dp-success-border);

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


.dp-status--stock.is-missing,
.dp-status--item.is-missing {
  color:
    var(--dp-danger);

  border-color:
    var(--dp-danger-border);

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


/* =========================================================
   STATUS · GESTIÓN
   ========================================================= */

.dp-status--management.is-pendiente {
  color:
    var(--dp-warning);

  border-color:
    var(--dp-warning-border);

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


.dp-status--management.is-completado {
  color:
    var(--dp-success);

  border-color:
    var(--dp-success-border);

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


.dp-status--management.is-enviado {
  color:
    var(--dp-info);

  border-color:
    var(--dp-info-border);

  background:
    var(--dp-info-bg);
}


.dp-status--management.is-cerrado {
  color:
    var(--dp-text-secondary);

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

  background:
    var(--dp-bg-muted);
}


/* =========================================================
   STATUS · FULL
   ========================================================= */

.dp-status--full.is-active {
  color:
    var(--dp-warning);

  border-color:
    var(--dp-warning-border);

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


.dp-status--full.is-finished {
  color:
    var(--dp-success);

  border-color:
    var(--dp-success-border);

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


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

.dp-table__actions {
  text-align:
    right;
}


.dp-row-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;
}


/* =========================================================
   MANAGEMENT
   ========================================================= */

.dp-management {
  position:
    relative;

  flex:
    0 0 auto;
}


.dp-management__trigger {
  width:
    31px;

  height:
    31px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  color:
    var(--dp-text-secondary);

  background:
    var(--dp-bg-elevated);

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

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

  cursor:
    pointer;

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


.dp-management__trigger:hover,
.dp-management.is-open
.dp-management__trigger {
  color:
    var(--dp-text-strong);

  background:
    var(--dp-bg-hover);

  border-color:
    var(--dp-border-dark);
}


.dp-management__trigger svg {
  width:
    15px;

  height:
    15px;
}


/* =========================================================
   MANAGEMENT MENU
   ========================================================= */

.dp-management__menu {
  position:
    absolute;

  top:
    calc(100% + 6px);

  right:
    0;

  z-index:
    4000;

  width:
    190px;

  padding:
    5px;

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

  border-radius:
    var(--dp-radius-md);

  background:
    var(--dp-bg-elevated);

  box-shadow:
    var(--dp-shadow-md);

  animation:
    dpMenuIn 140ms ease both;
}


.dp-management.is-drop-up
.dp-management__menu {
  top:
    auto;

  bottom:
    calc(100% + 6px);

  transform-origin:
    bottom right;
}


.dp-management__menu[hidden] {
  display:
    none !important;
}


.dp-management__menu-head {
  padding:
    7px 8px 8px;

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

  margin-bottom:
    4px;
}


.dp-management__menu-head span {
  font-size:
    9px;

  line-height:
    1;

  font-weight:
    900;

  text-transform:
    uppercase;

  letter-spacing:
    0.06em;

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


.dp-management__menu button {
  width:
    100%;

  min-height:
    34px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 8px;

  color:
    var(--dp-text-secondary);

  background:
    transparent;

  border:
    0;

  border-radius:
    7px;

  cursor:
    pointer;

  text-align:
    left;

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    800;

  transition:
    background var(--dp-transition),
    color var(--dp-transition);
}


.dp-management__menu button svg {
  width:
    14px;

  height:
    14px;
}


.dp-management__menu button:not(:disabled):hover {
  color:
    var(--dp-text-strong);

  background:
    var(--dp-bg-hover);
}


.dp-management__menu button:disabled {
  opacity:
    0.38;

  cursor:
    default;
}


.dp-management__menu button.is-close-action:not(:disabled):hover {
  color:
    var(--dp-danger);

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


.dp-management__separator {
  height:
    1px;

  margin:
    4px 0;

  background:
    var(--dp-border);
}


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

.dp-pagination {
  min-height:
    54px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    10px 14px;

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

  background:
    var(--dp-bg-elevated);
}


.dp-pagination__info {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    10px;
}


.dp-pagination__info > div {
  display:
    inline-flex;

  align-items:
    baseline;

  gap:
    4px;
}


.dp-pagination__info strong {
  font-size:
    12px;

  line-height:
    1;

  font-weight:
    900;

  color:
    var(--dp-text-strong);
}


.dp-pagination__info span {
  font-size:
    9px;

  line-height:
    1;

  font-weight:
    700;

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


.dp-pagination__range {
  padding-left:
    10px;

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


.dp-pagination__controls {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;
}


.dp-pagination__page {
  min-height:
    36px;

  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  padding:
    0 10px;

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

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

  background:
    var(--dp-bg-soft);
}


.dp-pagination__page span {
  font-size:
    9px;

  font-weight:
    700;

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


.dp-pagination__page strong {
  font-size:
    10px;

  font-weight:
    900;

  color:
    var(--dp-text-strong);
}


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

.dp-empty-cell {
  padding:
    0 !important;
}


.dp-empty {
  min-height:
    250px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    28px;

  text-align:
    center;

  background:
    var(--dp-bg-elevated);
}


.dp-empty__icon {
  width:
    42px;

  height:
    42px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    3px;

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

  border-radius:
    11px;

  background:
    var(--dp-bg-soft);

  color:
    var(--dp-text-secondary);
}


.dp-empty__icon svg {
  width:
    18px;

  height:
    18px;
}


.dp-empty strong {
  font-size:
    13px;

  line-height:
    1.2;

  font-weight:
    900;

  color:
    var(--dp-text-strong);
}


.dp-empty p {
  max-width:
    440px;

  font-size:
    10px;

  line-height:
    1.45;

  font-weight:
    650;

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


/* =========================================================
   SKELETON
   ========================================================= */

.dp-skeleton {
  display:
    block;

  border-radius:
    5px;

  background:
    linear-gradient(
      90deg,
      var(--dp-bg-muted) 0%,
      var(--dp-bg-soft) 50%,
      var(--dp-bg-muted) 100%
    );

  background-size:
    200% 100%;

  animation:
    dpSkeleton 1200ms ease infinite;
}


.dp-skeleton--sm {
  width:
    54px;

  height:
    10px;
}


.dp-skeleton--md {
  width:
    92px;

  height:
    10px;
}


.dp-skeleton--lg {
  width:
    128px;

  height:
    11px;
}


.dp-skeleton-row {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.dp-table-row--skeleton td {
  height:
    62px;
}


/* =========================================================
   SECTION BASE
   ========================================================= */

.dp-section {
  width:
    100%;

  min-width:
    0;

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

  border-radius:
    var(--dp-radius-xl);

  background:
    var(--dp-bg-elevated);

  overflow:
    hidden;
}


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

.dp-section__head {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    15px 16px;

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


.dp-section__title-group {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;
}


.dp-section__icon {
  width:
    38px;

  height:
    38px;

  flex:
    0 0 38px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    var(--dp-radius-md);

  background:
    var(--dp-bg-soft);

  color:
    var(--dp-text-strong);
}


.dp-section__icon svg {
  width:
    17px;

  height:
    17px;
}


.dp-section__title-group > div:last-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.dp-section__title-group h2 {
  font-size:
    16px;

  line-height:
    1.2;

  font-weight:
    880;
}


.dp-section__title-group p {
  max-width:
    620px;

  font-size:
    10px;

  line-height:
    1.4;

  font-weight:
    650;

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


.dp-section__stats {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    stretch;

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

  border-radius:
    var(--dp-radius-md);

  overflow:
    hidden;

  background:
    var(--dp-bg-soft);
}


.dp-section__stats > div {
  min-width:
    72px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    center;

  gap:
    2px;

  padding:
    7px 10px;

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


.dp-section__stats > div:last-child {
  border-right:
    0;
}


.dp-section__stats span {
  font-size:
    8px;

  line-height:
    1;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.05em;

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


.dp-section__stats strong {
  font-size:
    13px;

  line-height:
    1;

  font-weight:
    900;

  color:
    var(--dp-text-strong);
}


/* =========================================================
   FULL SECTION
   ========================================================= */

.dp-full-section {
  animation:
    dpFadeUp 460ms ease both;
}


.dp-section__icon--full {
  color:
    var(--dp-text-strong);
}


/* =========================================================
   FULL BODY
   ========================================================= */

.dp-full-body {
  width:
    100%;

  min-width:
    0;

  padding:
    14px;
}


/* =========================================================
   FULL GRID
   ========================================================= */

.dp-full-grid {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    10px;
}


/* =========================================================
   FULL CARD
   ========================================================= */

.dp-full-card {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  padding:
    12px;

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

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

  background:
    var(--dp-bg-elevated);

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


.dp-full-card:not(.is-skeleton):hover {
  border-color:
    var(--dp-border-strong);

  background:
    var(--dp-bg-hover);

  transform:
    translateY(
      -1px
    );
}


.dp-full-card__head {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    8px;
}


.dp-full-card__identity {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.dp-full-card__icon {
  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

  display:
    grid;

  place-items:
    center;

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

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

  background:
    var(--dp-bg-soft);

  color:
    var(--dp-text-strong);
}


.dp-full-card__icon svg {
  width:
    14px;

  height:
    14px;
}


.dp-full-card__name {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.dp-full-card__name > span {
  font-size:
    8px;

  line-height:
    1;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.05em;

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


.dp-full-card__name strong {
  max-width:
    190px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px;

  line-height:
    1.2;

  font-weight:
    900;

  color:
    var(--dp-text-strong);
}


/* =========================================================
   FULL DATE
   ========================================================= */

.dp-full-card__date {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;

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

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    700;
}


.dp-full-card__date svg {
  width:
    12px;

  height:
    12px;
}


/* =========================================================
   FULL STATS
   ========================================================= */

.dp-full-card__stats {
  display:
    grid;

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

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

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

  overflow:
    hidden;

  background:
    var(--dp-bg-soft);
}


.dp-full-card__stat {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  padding:
    8px;

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


.dp-full-card__stat:last-child {
  border-right:
    0;
}


.dp-full-card__stat span {
  font-size:
    8px;

  line-height:
    1;

  font-weight:
    800;

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


.dp-full-card__stat strong {
  font-size:
    13px;

  line-height:
    1;

  font-weight:
    900;

  color:
    var(--dp-text-strong);
}


/* =========================================================
   FULL FOOTER
   ========================================================= */

.dp-full-card__footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  padding-top:
    9px;

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


.dp-full-card__origin {
  min-width:
    0;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

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

  font-size:
    8px;

  font-weight:
    750;

  white-space:
    nowrap;
}


.dp-full-card__origin svg {
  width:
    11px;

  height:
    11px;
}


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

.dp-full-empty {
  min-height:
    140px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  padding:
    20px;

  border:
    1px dashed var(--dp-border-strong);

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

  background:
    var(--dp-bg-soft);
}


.dp-full-empty__icon {
  width:
    40px;

  height:
    40px;

  flex:
    0 0 40px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    var(--dp-radius-md);

  background:
    var(--dp-bg-elevated);

  color:
    var(--dp-text-secondary);
}


.dp-full-empty__icon svg {
  width:
    17px;

  height:
    17px;
}


.dp-full-empty__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.dp-full-empty__content strong {
  font-size:
    12px;

  font-weight:
    900;

  color:
    var(--dp-text-strong);
}


.dp-full-empty__content span {
  font-size:
    9px;

  line-height:
    1.4;

  font-weight:
    650;

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


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

.dp-toast {
  position:
    fixed;

  right:
    18px;

  bottom:
    18px;

  z-index:
    10000;

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

  min-height:
    44px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    9px 12px;

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

  border-radius:
    var(--dp-radius-md);

  background:
    var(--dp-bg-elevated);

  box-shadow:
    var(--dp-shadow-md);

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

  opacity:
    0;

  transform:
    translateY(
      8px
    );

  pointer-events:
    none;

  transition:
    opacity 180ms ease,
    transform 180ms ease;
}


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

  transform:
    translateY(
      0
    );
}


.dp-toast__icon {
  width:
    28px;

  height:
    28px;

  flex:
    0 0 28px;

  display:
    grid;

  place-items:
    center;

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

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

  background:
    var(--dp-bg-soft);
}


.dp-toast__icon svg {
  width:
    14px;

  height:
    14px;
}


.dp-toast__message {
  min-width:
    0;

  font-size:
    10px;

  line-height:
    1.4;

  font-weight:
    750;
}


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


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

  border-color:
    var(--dp-success-border);

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


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


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

  border-color:
    var(--dp-danger-border);

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


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

   CONTINÚA:
   - Modal
   - Detalle
   - FULL detalle
   - Responsive
   - Animaciones
   ========================================================= *//* =========================================================
   PARTE 3 DE 3

   UBICACIÓN:
   frontend/src/pages/mi-gestion/disponibilidad-pedidos/
   disponibilidad-pedidos.css

   CONTINÚA:
   - Modal
   - Detalle
   - FULL detalle
   - Responsive
   - Animaciones
   ========================================================= */


/* =========================================================
   BODY MODAL
   ========================================================= */

body.disponibilidad-modal-open {
  overflow:
    hidden;
}


/* =========================================================
   MODAL ROOT
   ========================================================= */

.dp-modal-root {
  position:
    relative;

  z-index:
    9999;
}


/* =========================================================
   MODAL BACKDROP
   ========================================================= */

.dp-modal-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    9999;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    22px;

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

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;

  animation:
    dpBackdropIn
    160ms
    ease
    both;
}


/* =========================================================
   MODAL
   ========================================================= */

.dp-modal {
  width:
    min(
      1180px,
      100%
    );

  max-height:
    calc(
      100vh -
      44px
    );

  display:
    flex;

  flex-direction:
    column;

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

  border-radius:
    var(--dp-radius-xl);

  background:
    var(--dp-bg-elevated);

  box-shadow:
    var(--dp-shadow-md);

  overflow:
    hidden;

  animation:
    dpModalIn
    180ms
    ease
    both;
}


.dp-modal--detail {
  width:
    min(
      1220px,
      100%
    );
}


.dp-modal--full {
  width:
    min(
      1320px,
      100%
    );
}


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

.dp-modal__head {
  min-height:
    68px;

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    14px 16px;

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

  background:
    var(--dp-bg-elevated);
}


.dp-modal__head-content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.dp-modal__head h2 {
  max-width:
    900px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    19px;

  line-height:
    1.2;

  font-weight:
    900;

  color:
    var(--dp-text-strong);
}


/* =========================================================
   MODAL BODY
   ========================================================= */

.dp-modal__body {
  min-height:
    0;

  flex:
    1 1 auto;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  padding:
    14px;

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


/* =========================================================
   MODAL FOOTER
   ========================================================= */

.dp-modal__footer {
  min-height:
    58px;

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  padding:
    10px 14px;

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

  background:
    var(--dp-bg-elevated);
}


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

.dp-detail-loading {
  min-height:
    280px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    13px;

  padding:
    30px;

  text-align:
    left;
}


.dp-detail-loading > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.dp-detail-loading strong {
  font-size:
    13px;

  line-height:
    1.2;

  font-weight:
    900;

  color:
    var(--dp-text-strong);
}


.dp-detail-loading p {
  font-size:
    10px;

  line-height:
    1.4;

  font-weight:
    650;

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


/* =========================================================
   SPINNER
   ========================================================= */

.dp-spinner {
  width:
    25px;

  height:
    25px;

  flex:
    0 0 25px;

  border:
    2px solid var(--dp-border);

  border-top-color:
    var(--dp-text-strong);

  border-radius:
    50%;

  animation:
    dpSpin
    700ms
    linear
    infinite;
}


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

.dp-detail-summary {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  padding:
    14px;

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

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

  background:
    var(--dp-bg-elevated);
}


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

.dp-detail-summary__identity {
  min-width:
    0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    12px;
}


.dp-detail-summary__channel {
  min-width:
    0;
}


.dp-detail-summary__title {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.dp-detail-summary__title > span {
  font-size:
    9px;

  line-height:
    1;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.05em;

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


.dp-detail-summary__title h3 {
  max-width:
    520px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    19px;

  line-height:
    1.15;

  font-weight:
    900;

  color:
    var(--dp-text-strong);
}


.dp-detail-summary__date {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  color:
    var(--dp-text-secondary);

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    750;
}


.dp-detail-summary__date svg {
  width:
    12px;

  height:
    12px;
}


.dp-detail-summary__badges {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    6px;
}


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

.dp-detail-summary__divider {
  height:
    1px;

  background:
    var(--dp-border);
}


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

.dp-detail-summary__status {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.dp-detail-summary__status-icon {
  width:
    33px;

  height:
    33px;

  flex:
    0 0 33px;

  display:
    grid;

  place-items:
    center;

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

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

  background:
    var(--dp-bg-soft);

  color:
    var(--dp-text-strong);
}


.dp-detail-summary__status-icon svg {
  width:
    15px;

  height:
    15px;
}


.dp-detail-summary__status > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.dp-detail-summary__status strong {
  font-size:
    11px;

  line-height:
    1.2;

  font-weight:
    900;

  color:
    var(--dp-text-strong);
}


.dp-detail-summary__status span {
  font-size:
    9px;

  line-height:
    1.35;

  font-weight:
    650;

  color:
    var(--dp-text-secondary);
}


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

.dp-detail-kpis {
  display:
    grid;

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

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

  border-radius:
    var(--dp-radius-md);

  overflow:
    hidden;

  background:
    var(--dp-bg-soft);
}


.dp-detail-kpis article {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  padding:
    10px 12px;

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


.dp-detail-kpis article:last-child {
  border-right:
    0;
}


.dp-detail-kpis span {
  font-size:
    8px;

  line-height:
    1;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.04em;

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


.dp-detail-kpis strong {
  font-size:
    16px;

  line-height:
    1;

  font-weight:
    900;

  color:
    var(--dp-text-strong);
}


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

.dp-detail-management {
  width:
    100%;

  min-width:
    0;

  margin-top:
    12px;

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

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

  background:
    var(--dp-bg-elevated);

  overflow:
    hidden;
}


.dp-detail-management__head {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    12px 14px;

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


.dp-detail-management__head > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.dp-detail-management__head h3 {
  font-size:
    14px;

  line-height:
    1.2;

  font-weight:
    900;
}


.dp-detail-management__head p {
  max-width:
    640px;

  font-size:
    9px;

  line-height:
    1.4;

  font-weight:
    650;

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


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

.dp-detail-management__actions {
  display:
    grid;

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

  gap:
    0;
}


/* =========================================================
   MANAGEMENT ACTION
   ========================================================= */

.dp-management-action {
  min-width:
    0;

  min-height:
    74px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    10px 12px;

  border:
    0;

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

  background:
    var(--dp-bg-elevated);

  color:
    var(--dp-text);

  cursor:
    pointer;

  text-align:
    left;

  transition:
    background var(--dp-transition),
    color var(--dp-transition);
}


.dp-management-action:last-child {
  border-right:
    0;
}


.dp-management-action:not(:disabled):hover {
  background:
    var(--dp-bg-hover);
}


.dp-management-action:disabled {
  cursor:
    default;
}


.dp-management-action.is-active {
  background:
    var(--dp-bg-soft);
}


.dp-management-action--close:not(:disabled):hover {
  background:
    var(--dp-danger-bg);
}


.dp-management-action__icon {
  width:
    30px;

  height:
    30px;

  flex:
    0 0 30px;

  display:
    grid;

  place-items:
    center;

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

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

  background:
    var(--dp-bg-soft);

  color:
    var(--dp-text-strong);
}


.dp-management-action__icon svg {
  width:
    14px;

  height:
    14px;
}


.dp-management-action__text {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.dp-management-action__text strong {
  font-size:
    10px;

  line-height:
    1.2;

  font-weight:
    900;

  color:
    var(--dp-text-strong);
}


.dp-management-action__text span {
  font-size:
    8px;

  line-height:
    1.3;

  font-weight:
    650;

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


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

.dp-detail-products {
  width:
    100%;

  min-width:
    0;

  margin-top:
    12px;

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

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

  background:
    var(--dp-bg-elevated);

  overflow:
    hidden;
}


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

.dp-detail-section-head {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    12px 14px;

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


.dp-detail-section-head > div:first-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.dp-detail-section-head h3 {
  font-size:
    14px;

  line-height:
    1.2;

  font-weight:
    900;
}


.dp-detail-section-head p {
  font-size:
    9px;

  line-height:
    1.4;

  font-weight:
    650;

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


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

.dp-detail-table-wrapper {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  scrollbar-width:
    thin;

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


.dp-detail-table {
  width:
    100%;

  min-width:
    760px;

  border-collapse:
    separate;

  border-spacing:
    0;
}


.dp-detail-table thead th {
  height:
    36px;

  padding:
    0 11px;

  text-align:
    left;

  vertical-align:
    middle;

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

  background:
    var(--dp-bg-soft);

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

  font-size:
    8px;

  line-height:
    1;

  font-weight:
    900;

  text-transform:
    uppercase;

  letter-spacing:
    0.06em;

  white-space:
    nowrap;
}


.dp-detail-table th.is-number,
.dp-detail-table td.is-number {
  text-align:
    right;
}


.dp-detail-table tbody td {
  min-height:
    54px;

  padding:
    9px 11px;

  vertical-align:
    middle;

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

  color:
    var(--dp-text);

  background:
    var(--dp-bg-elevated);

  font-size:
    10px;

  font-weight:
    700;
}


.dp-detail-table tbody tr:last-child td {
  border-bottom:
    0;
}


.dp-detail-row.is-missing td:first-child {
  box-shadow:
    inset 3px 0 0 var(--dp-danger);
}


.dp-detail-row.is-available td:first-child {
  box-shadow:
    inset 3px 0 0 var(--dp-success);
}


.dp-detail-row:hover td {
  background:
    var(--dp-bg-hover);
}


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

.dp-product-cell {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.dp-product-cell strong {
  max-width:
    360px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10px;

  line-height:
    1.25;

  font-weight:
    900;

  color:
    var(--dp-text-strong);
}


.dp-product-cell span {
  font-size:
    8px;

  line-height:
    1.2;

  font-weight:
    650;

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


/* =========================================================
   SKU
   ========================================================= */

.dp-sku {
  display:
    inline-block;

  max-width:
    180px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  padding:
    4px 6px;

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

  border-radius:
    5px;

  background:
    var(--dp-bg-soft);

  color:
    var(--dp-text-secondary);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:
    8px;

  font-weight:
    700;
}


/* =========================================================
   DANGER NUMBER
   ========================================================= */

.is-danger {
  color:
    var(--dp-danger) !important;
}


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

.dp-detail-empty {
  min-height:
    190px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  padding:
    22px;

  text-align:
    center;
}


.dp-detail-empty__icon {
  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    var(--dp-radius-md);

  background:
    var(--dp-bg-soft);

  color:
    var(--dp-text-secondary);
}


.dp-detail-empty__icon svg {
  width:
    17px;

  height:
    17px;
}


.dp-detail-empty strong {
  font-size:
    11px;

  font-weight:
    900;

  color:
    var(--dp-text-strong);
}


.dp-detail-empty > span:last-child {
  font-size:
    9px;

  line-height:
    1.4;

  font-weight:
    650;

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


/* =========================================================
   FULL DETAIL SUMMARY
   ========================================================= */

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

  min-width:
    0;

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

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

  background:
    var(--dp-bg-elevated);

  overflow:
    hidden;
}


.dp-full-detail-summary__identity {
  min-width:
    0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    12px;

  padding:
    14px;
}


.dp-full-detail-summary__icon {
  width:
    40px;

  height:
    40px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    var(--dp-radius-md);

  background:
    var(--dp-bg-soft);

  color:
    var(--dp-text-strong);
}


.dp-full-detail-summary__icon svg {
  width:
    18px;

  height:
    18px;
}


.dp-full-detail-summary__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.dp-full-detail-summary__content h3 {
  max-width:
    560px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    18px;

  line-height:
    1.2;

  font-weight:
    900;
}


.dp-full-detail-summary__date {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;

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

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    700;
}


.dp-full-detail-summary__date svg {
  width:
    12px;

  height:
    12px;
}


/* =========================================================
   FULL DETAIL STATS
   ========================================================= */

.dp-full-detail-stats {
  display:
    grid;

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

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


.dp-full-detail-stats article {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  padding:
    10px 12px;

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

  background:
    var(--dp-bg-soft);
}


.dp-full-detail-stats article:last-child {
  border-right:
    0;
}


.dp-full-detail-stats span {
  font-size:
    8px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.04em;

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


.dp-full-detail-stats strong {
  font-size:
    15px;

  line-height:
    1;

  font-weight:
    900;

  color:
    var(--dp-text-strong);
}


/* =========================================================
   FULL DETAIL GRID
   ========================================================= */

.dp-full-detail-grid {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1.7fr
    )
    minmax(
      280px,
      0.8fr
    );

  gap:
    12px;

  margin-top:
    12px;
}


/* =========================================================
   FULL DOCUMENTS
   ========================================================= */

.dp-full-documents {
  min-width:
    0;

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

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

  background:
    var(--dp-bg-elevated);

  overflow:
    hidden;
}


.dp-full-documents__body {
  padding:
    10px;
}


/* =========================================================
   COUNT BADGE
   ========================================================= */

.dp-count-badge {
  min-width:
    27px;

  height:
    27px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 7px;

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

  border-radius:
    999px;

  background:
    var(--dp-bg-soft);

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

  font-size:
    9px;

  font-weight:
    900;
}


/* =========================================================
   FULL FILES
   ========================================================= */

.dp-full-files {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.dp-full-file {
  min-width:
    0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  padding:
    8px;

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

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

  background:
    var(--dp-bg-elevated);
}


.dp-full-file__icon {
  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    7px;

  background:
    var(--dp-bg-soft);

  color:
    var(--dp-text-secondary);
}


.dp-full-file__icon svg {
  width:
    14px;

  height:
    14px;
}


.dp-full-file__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.dp-full-file__content strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    900;

  color:
    var(--dp-text-strong);
}


.dp-full-file__content span {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    8px;

  line-height:
    1.2;

  font-weight:
    650;

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


.dp-full-file__id {
  font-size:
    8px;

  line-height:
    1;

  font-weight:
    800;

  color:
    var(--dp-text-faint);
}


/* =========================================================
   FULL FILES EMPTY
   ========================================================= */

.dp-full-files-empty {
  min-height:
    130px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  padding:
    14px;

  text-align:
    left;
}


.dp-full-files-empty__icon {
  width:
    35px;

  height:
    35px;

  flex:
    0 0 35px;

  display:
    grid;

  place-items:
    center;

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

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

  background:
    var(--dp-bg-soft);

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


.dp-full-files-empty__icon svg {
  width:
    15px;

  height:
    15px;
}


.dp-full-files-empty > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.dp-full-files-empty strong {
  font-size:
    10px;

  font-weight:
    900;

  color:
    var(--dp-text-strong);
}


.dp-full-files-empty span {
  font-size:
    8px;

  line-height:
    1.35;

  font-weight:
    650;

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


/* =========================================================
   DARK MODE · NEGRO REAL · REFUERZO
   ========================================================= */

html[data-theme="dark"] .dp-page,
body[data-theme="dark"] .dp-page,
[data-theme="dark"] .dp-page {
  background:
    #000000 !important;
}


html[data-theme="dark"] .dp-page-head,
html[data-theme="dark"] .dp-kpis,
html[data-theme="dark"] .dp-kpi,
html[data-theme="dark"] .dp-operations,
html[data-theme="dark"] .dp-orders-card,
html[data-theme="dark"] .dp-section,
html[data-theme="dark"] .dp-full-card,
html[data-theme="dark"] .dp-modal,
html[data-theme="dark"] .dp-modal__head,
html[data-theme="dark"] .dp-modal__footer,
html[data-theme="dark"] .dp-detail-summary,
html[data-theme="dark"] .dp-detail-management,
html[data-theme="dark"] .dp-detail-products,
html[data-theme="dark"] .dp-full-detail-summary,
html[data-theme="dark"] .dp-full-documents,
html[data-theme="dark"] .dp-full-file,
body[data-theme="dark"] .dp-page-head,
body[data-theme="dark"] .dp-kpis,
body[data-theme="dark"] .dp-kpi,
body[data-theme="dark"] .dp-operations,
body[data-theme="dark"] .dp-orders-card,
body[data-theme="dark"] .dp-section,
body[data-theme="dark"] .dp-full-card,
body[data-theme="dark"] .dp-modal,
body[data-theme="dark"] .dp-modal__head,
body[data-theme="dark"] .dp-modal__footer,
body[data-theme="dark"] .dp-detail-summary,
body[data-theme="dark"] .dp-detail-management,
body[data-theme="dark"] .dp-detail-products,
body[data-theme="dark"] .dp-full-detail-summary,
body[data-theme="dark"] .dp-full-documents,
body[data-theme="dark"] .dp-full-file,
[data-theme="dark"] .dp-page-head,
[data-theme="dark"] .dp-kpis,
[data-theme="dark"] .dp-kpi,
[data-theme="dark"] .dp-operations,
[data-theme="dark"] .dp-orders-card,
[data-theme="dark"] .dp-section,
[data-theme="dark"] .dp-full-card,
[data-theme="dark"] .dp-modal,
[data-theme="dark"] .dp-modal__head,
[data-theme="dark"] .dp-modal__footer,
[data-theme="dark"] .dp-detail-summary,
[data-theme="dark"] .dp-detail-management,
[data-theme="dark"] .dp-detail-products,
[data-theme="dark"] .dp-full-detail-summary,
[data-theme="dark"] .dp-full-documents,
[data-theme="dark"] .dp-full-file {
  background:
    #050505;
}


html[data-theme="dark"] .dp-modal__body,
body[data-theme="dark"] .dp-modal__body,
[data-theme="dark"] .dp-modal__body {
  background:
    #000000;
}


html[data-theme="dark"] .dp-table-row td,
html[data-theme="dark"] .dp-detail-table tbody td,
body[data-theme="dark"] .dp-table-row td,
body[data-theme="dark"] .dp-detail-table tbody td,
[data-theme="dark"] .dp-table-row td,
[data-theme="dark"] .dp-detail-table tbody td {
  background:
    #050505;
}


html[data-theme="dark"] .dp-table-row:hover td,
html[data-theme="dark"] .dp-detail-row:hover td,
body[data-theme="dark"] .dp-table-row:hover td,
body[data-theme="dark"] .dp-detail-row:hover td,
[data-theme="dark"] .dp-table-row:hover td,
[data-theme="dark"] .dp-detail-row:hover td {
  background:
    #111111;
}


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

@media (
  max-width:
  1280px
) {
  .dp-full-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


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


/* =========================================================
   RESPONSIVE · 1100
   ========================================================= */

@media (
  max-width:
  1100px
) {
  .dp-page {
    padding:
      14px;
  }


  .dp-page-head {
    align-items:
      flex-start;
  }


  .dp-filters {
    grid-template-columns:
      minmax(
        220px,
        1fr
      )
      minmax(
        140px,
        170px
      )
      minmax(
        145px,
        160px
      )
      minmax(
        145px,
        160px
      )
      36px;
  }


  .dp-detail-management__actions {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .dp-management-action:nth-child(2) {
    border-right:
      0;
  }


  .dp-management-action:nth-child(1),
  .dp-management-action:nth-child(2) {
    border-bottom:
      1px solid var(--dp-border);
  }
}


/* =========================================================
   RESPONSIVE · 900
   ========================================================= */

@media (
  max-width:
  900px
) {
  .dp-page-head {
    flex-direction:
      column;
  }


  .dp-page-head__actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


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


  .dp-kpi:nth-child(2) {
    border-right:
      0;
  }


  .dp-kpi:nth-child(1),
  .dp-kpi:nth-child(2) {
    border-bottom:
      1px solid var(--dp-border);
  }


  .dp-operations__top {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .dp-view-tabs {
    width:
      100%;

    overflow-x:
      auto;

    justify-content:
      flex-start;
  }


  .dp-view-tab {
    flex:
      0 0 auto;
  }


  .dp-filters {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      minmax(
        0,
        1fr
      );
  }


  .dp-search {
    grid-column:
      1 /
      -1;
  }


  .dp-filter-reset {
    width:
      100%;

    grid-column:
      1 /
      -1;
  }


  .dp-orders-head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .dp-orders-head__right {
    width:
      100%;

    justify-content:
      flex-start;

    flex-wrap:
      wrap;
  }


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


  .dp-detail-summary__identity {
    grid-template-columns:
      1fr;
  }


  .dp-detail-summary__badges {
    justify-content:
      flex-start;
  }


  .dp-detail-kpis {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .dp-detail-kpis article:nth-child(2) {
    border-right:
      0;
  }


  .dp-detail-kpis article:nth-child(1),
  .dp-detail-kpis article:nth-child(2) {
    border-bottom:
      1px solid var(--dp-border);
  }


  .dp-full-detail-summary__identity {
    grid-template-columns:
      1fr;
  }


  .dp-full-detail-summary__status {
    justify-self:
      start;
  }


  .dp-full-detail-stats {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .dp-full-detail-stats article:nth-child(2) {
    border-right:
      0;
  }


  .dp-full-detail-stats article:nth-child(1),
  .dp-full-detail-stats article:nth-child(2) {
    border-bottom:
      1px solid var(--dp-border);
  }
}


/* =========================================================
   RESPONSIVE · 680
   ========================================================= */

@media (
  max-width:
  680px
) {
  .dp-page {
    padding:
      10px;
  }


  .dp-page__inner {
    gap:
      10px;
  }


  .dp-page-head {
    padding:
      14px;
  }


  .dp-page-head__main {
    align-items:
      flex-start;
  }


  .dp-page-head__icon {
    width:
      36px;

    height:
      36px;

    flex-basis:
      36px;
  }


  .dp-page-head h1 {
    font-size:
      19px;
  }


  .dp-page-head p {
    font-size:
      10px;
  }


  .dp-page-head__actions {
    display:
      grid;

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


  .dp-page-head__actions .dp-btn {
    width:
      100%;
  }


  .dp-kpis {
    grid-template-columns:
      1fr;
  }


  .dp-kpi {
    min-height:
      98px;

    border-right:
      0;

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


  .dp-kpi:last-child {
    border-bottom:
      0;
  }


  .dp-kpi__value {
    font-size:
      27px;
  }


  .dp-operations__filters {
    padding:
      10px;
  }


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


  .dp-search,
  .dp-filter-reset {
    grid-column:
      auto;
  }


  .dp-filter-reset {
    width:
      100%;

    height:
      38px;
  }


  .dp-priority-notice {
    grid-template-columns:
      32px
      minmax(
        0,
        1fr
      );
  }


  .dp-priority-notice__badge {
    display:
      none;
  }


  .dp-section__head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .dp-section__stats {
    width:
      100%;
  }


  .dp-section__stats > div {
    flex:
      1 1 0;
  }


  .dp-full-card__footer {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .dp-full-card__footer .dp-btn {
    width:
      100%;
  }


  .dp-pagination {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .dp-pagination__controls {
    justify-content:
      space-between;
  }


  .dp-pagination__page {
    flex:
      1 1 auto;

    justify-content:
      center;
  }


  .dp-modal-backdrop {
    align-items:
      stretch;

    padding:
      0;
  }


  .dp-modal {
    width:
      100%;

    max-height:
      100vh;

    height:
      100vh;

    border:
      0;

    border-radius:
      0;
  }


  .dp-modal__head {
    min-height:
      60px;

    padding:
      11px 12px;
  }


  .dp-modal__head h2 {
    font-size:
      16px;
  }


  .dp-modal__body {
    padding:
      10px;
  }


  .dp-modal__footer {
    padding:
      9px 10px;
  }


  .dp-detail-summary,
  .dp-detail-management {
    border-radius:
      var(--dp-radius-md);
  }


  .dp-detail-kpis,
  .dp-full-detail-stats {
    grid-template-columns:
      1fr;
  }


  .dp-detail-kpis article,
  .dp-full-detail-stats article {
    border-right:
      0;

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


  .dp-detail-kpis article:last-child,
  .dp-full-detail-stats article:last-child {
    border-bottom:
      0;
  }


  .dp-detail-management__head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .dp-detail-management__actions {
    grid-template-columns:
      1fr;
  }


  .dp-management-action {
    border-right:
      0;

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


  .dp-management-action:last-child {
    border-bottom:
      0;
  }


  .dp-detail-section-head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }
}


/* =========================================================
   RESPONSIVE · 440
   ========================================================= */

@media (
  max-width:
  440px
) {
  .dp-page {
    padding:
      8px;
  }


  .dp-page-head {
    border-radius:
      var(--dp-radius-lg);
  }


  .dp-page-head__main {
    gap:
      9px;
  }


  .dp-page-head__meta {
    gap:
      5px;
  }


  .dp-page-head h1 {
    font-size:
      17px;
  }


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


  .dp-btn {
    min-height:
      35px;
  }


  .dp-operations,
  .dp-orders-card,
  .dp-section {
    border-radius:
      var(--dp-radius-lg);
  }


  .dp-operations__top,
  .dp-orders-head,
  .dp-section__head {
    padding:
      11px;
  }


  .dp-view-tabs {
    padding:
      2px;
  }


  .dp-view-tab {
    min-height:
      30px;

    padding:
      0 8px;
  }


  .dp-priority-notice {
    padding:
      9px;
  }


  .dp-full-body {
    padding:
      10px;
  }


  .dp-full-card {
    padding:
      10px;
  }


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


  .dp-full-card__stat {
    border-right:
      0;

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


  .dp-full-card__stat:last-child {
    border-bottom:
      0;
  }


  .dp-toast {
    right:
      8px;

    bottom:
      8px;

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


/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes dpFadeUp {
  from {
    opacity:
      0;

    transform:
      translateY(
        6px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


@keyframes dpMenuIn {
  from {
    opacity:
      0;

    transform:
      translateY(
        -4px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


@keyframes dpModalIn {
  from {
    opacity:
      0;

    transform:
      translateY(
        8px
      )
      scale(
        0.995
      );
  }

  to {
    opacity:
      1;

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


@keyframes dpBackdropIn {
  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}


@keyframes dpSkeleton {
  0% {
    background-position:
      200%
      0;
  }

  100% {
    background-position:
      -200%
      0;
  }
}


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


/* =========================================================
   ACCESIBILIDAD · REDUCIR MOVIMIENTO
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {
  .dp-page *,
  .dp-page *::before,
  .dp-page *::after,
  .dp-modal,
  .dp-modal-backdrop,
  .dp-toast {
    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}


/* =========================================================
   FIN · PARTE 3 DE 3
   ========================================================= *//* =========================================================
   DISPONIBILIDAD DE PEDIDOS · ESCALA MÁS COMPACTA
   ========================================================= */

.dp-page {
  padding: 12px 12px 20px;
}

.dp-page__inner {
  gap: 10px;
}

.dp-page-head {
  gap: 14px;
  padding: 14px 16px;
  border-radius: 13px;
}

.dp-page-head__main {
  gap: 11px;
}

.dp-page-head__icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 9px;
}

.dp-page-head__icon svg {
  width: 17px;
  height: 17px;
}

.dp-eyebrow {
  font-size: 9px;
}

.dp-date-context {
  font-size: 10px;
}

.dp-page-head h1 {
  font-size: clamp(19px, 1.8vw, 23px);
}

.dp-page-head p {
  font-size: 10.5px;
}

.dp-page-head__actions {
  gap: 6px;
}

.dp-btn {
  min-height: 32px;
  gap: 6px;
  padding: 0 10px;
  font-size: 10.5px;
}

.dp-btn svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

.dp-btn--small {
  min-height: 28px;
  padding: 0 8px;
  font-size: 9.5px;
}

.dp-icon-btn {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

.dp-icon-btn svg {
  width: 14px;
  height: 14px;
}

.dp-kpis {
  border-radius: 13px;
}

.dp-kpi {
  min-height: 98px;
  gap: 9px;
  padding: 12px;
}

.dp-kpi__head {
  gap: 7px;
}

.dp-kpi__icon {
  width: 25px;
  height: 25px;
}

.dp-kpi__icon svg {
  width: 12px;
  height: 12px;
}

.dp-kpi__label {
  font-size: 10px;
}

.dp-kpi__value {
  font-size: clamp(23px, 2.5vw, 29px);
}

.dp-kpi__detail {
  font-size: 9px;
}

.dp-kpi__arrow {
  top: 12px;
  right: 12px;
}

.dp-kpi__arrow svg {
  width: 12px;
  height: 12px;
}

.dp-operations {
  border-radius: 13px;
}

.dp-operations__top {
  min-height: 50px;
  gap: 12px;
  padding: 9px 11px;
}

.dp-operations__title {
  gap: 2px;
}

.dp-operations__title > strong {
  font-size: 12.5px;
}

.dp-view-tabs {
  gap: 3px;
  padding: 2px;
}

.dp-view-tab {
  min-height: 28px;
  gap: 5px;
  padding: 0 8px;
  font-size: 9.5px;
}

.dp-view-tab svg {
  width: 12px;
  height: 12px;
}

.dp-operations__filters {
  padding: 9px 11px;
}

.dp-filters {
  grid-template-columns:
    minmax(240px, 1fr)
    minmax(135px, 165px)
    minmax(135px, 155px)
    minmax(135px, 155px)
    32px;

  gap: 7px;
}

.dp-search {
  height: 34px;
}

.dp-search > svg {
  left: 9px;
  width: 13px;
  height: 13px;
}

.dp-search input {
  padding: 0 34px 0 30px;
  font-size: 10.5px;
}

.dp-search__clear {
  width: 22px;
  height: 22px;
  right: 6px;
}

.dp-search__clear svg {
  width: 12px;
  height: 12px;
}

.dp-filter-field {
  gap: 4px;
}

.dp-filter-field__label {
  font-size: 8px;
}

.dp-filter-field__control {
  height: 34px;
}

.dp-filter-field__control > svg {
  left: 9px;
  width: 12px;
  height: 12px;
}

.dp-filter-field select,
.dp-filter-field input {
  height: 34px;
  padding: 0 8px 0 28px;
  font-size: 10px;
}

.dp-priority-notice {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px 10px;
}

.dp-priority-notice__icon {
  width: 27px;
  height: 27px;
}

.dp-priority-notice__icon svg {
  width: 12px;
  height: 12px;
}

.dp-priority-notice__content strong {
  font-size: 10px;
}

.dp-priority-notice__content span {
  font-size: 9px;
}

.dp-priority-notice__badge {
  padding: 4px 7px;
  font-size: 8px;
}

.dp-orders-card {
  border-radius: 13px;
}

.dp-orders-head {
  gap: 12px;
  padding: 11px 13px;
}

.dp-orders-head h2 {
  font-size: 15px;
}

.dp-orders-head p {
  font-size: 9.5px;
}

.dp-live,
.dp-orders-head__range {
  min-height: 26px;
  gap: 5px;
  padding: 0 7px;
  font-size: 8px;
}

.dp-table {
  min-width: 900px;
}

.dp-table thead th {
  height: 33px;
  padding: 0 10px;
  font-size: 8px;
}

.dp-table-row td {
  height: 54px;
  padding: 7px 10px;
}

.dp-channel {
  gap: 6px;
  padding: 4px 6px;
}

.dp-channel__icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}

.dp-channel__icon svg {
  width: 10px;
  height: 10px;
}

.dp-channel__text {
  font-size: 9px;
}

.dp-order {
  gap: 8px;
}

.dp-order__main strong {
  font-size: 10px;
}

.dp-order__main span {
  font-size: 8px;
}

.dp-order__priority {
  min-height: 19px;
  padding: 0 6px;
  font-size: 7px;
}

.dp-date-cell span {
  font-size: 9px;
}

.dp-number strong {
  font-size: 11.5px;
}

.dp-number span {
  font-size: 8px;
}

.dp-stock-cell {
  gap: 3px;
}

.dp-stock-cell__detail {
  font-size: 8px;
}

.dp-status {
  min-height: 22px;
  gap: 4px;
  padding: 0 7px;
  font-size: 8px;
}

.dp-status svg {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
}

.dp-row-actions {
  gap: 5px;
}

.dp-management__trigger {
  width: 28px;
  height: 28px;
}

.dp-management__trigger svg {
  width: 13px;
  height: 13px;
}

.dp-management__menu {
  width: 175px;
  padding: 4px;
}

.dp-management__menu-head {
  padding: 6px 7px;
}

.dp-management__menu-head span {
  font-size: 8px;
}

.dp-management__menu button {
  min-height: 30px;
  gap: 7px;
  padding: 0 7px;
  font-size: 9px;
}

.dp-pagination {
  min-height: 46px;
  gap: 9px;
  padding: 8px 11px;
}

.dp-pagination__info {
  gap: 8px;
}

.dp-pagination__info strong {
  font-size: 11px;
}

.dp-pagination__info span {
  font-size: 8px;
}

.dp-pagination__page {
  min-height: 32px;
  padding: 0 8px;
}

.dp-pagination__page span {
  font-size: 8px;
}

.dp-pagination__page strong {
  font-size: 9px;
}

.dp-section {
  border-radius: 13px;
}

.dp-section__head {
  gap: 12px;
  padding: 11px 13px;
}

.dp-section__title-group {
  gap: 9px;
}

.dp-section__icon {
  width: 33px;
  height: 33px;
  flex: 0 0 33px;
}

.dp-section__icon svg {
  width: 15px;
  height: 15px;
}

.dp-section__title-group h2 {
  font-size: 14px;
}

.dp-section__title-group p {
  font-size: 9px;
}

.dp-section__stats > div {
  min-width: 64px;
  padding: 6px 8px;
}

.dp-section__stats span {
  font-size: 7px;
}

.dp-section__stats strong {
  font-size: 11.5px;
}

.dp-full-body {
  padding: 10px;
}

.dp-full-grid {
  gap: 8px;
}

.dp-full-card {
  gap: 8px;
  padding: 10px;
}

.dp-full-card__icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.dp-full-card__icon svg {
  width: 12px;
  height: 12px;
}

.dp-full-card__name > span {
  font-size: 7px;
}

.dp-full-card__name strong {
  font-size: 10px;
}

.dp-full-card__date {
  font-size: 8px;
}

.dp-full-card__stat {
  padding: 6px;
}

.dp-full-card__stat span {
  font-size: 7px;
}

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

.dp-full-card__footer {
  padding-top: 7px;
}

.dp-full-card__origin {
  font-size: 7px;
}

.dp-modal-backdrop {
  padding: 18px;
}

.dp-modal__head {
  min-height: 58px;
  gap: 12px;
  padding: 11px 13px;
}

.dp-modal__head h2 {
  font-size: 17px;
}

.dp-modal__body {
  padding: 11px;
}

.dp-modal__footer {
  min-height: 50px;
  padding: 8px 11px;
}

.dp-detail-summary {
  gap: 9px;
  padding: 11px;
}

.dp-detail-summary__identity {
  gap: 9px;
}

.dp-detail-summary__title > span {
  font-size: 8px;
}

.dp-detail-summary__title h3 {
  font-size: 16px;
}

.dp-detail-summary__date {
  font-size: 8px;
}

.dp-detail-summary__status {
  gap: 7px;
}

.dp-detail-summary__status-icon {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
}

.dp-detail-summary__status-icon svg {
  width: 13px;
  height: 13px;
}

.dp-detail-summary__status strong {
  font-size: 10px;
}

.dp-detail-summary__status span {
  font-size: 8px;
}

.dp-detail-kpis article {
  gap: 3px;
  padding: 8px 10px;
}

.dp-detail-kpis span {
  font-size: 7px;
}

.dp-detail-kpis strong {
  font-size: 14px;
}

.dp-detail-management {
  margin-top: 9px;
}

.dp-detail-management__head {
  gap: 10px;
  padding: 9px 11px;
}

.dp-detail-management__head h3 {
  font-size: 12px;
}

.dp-detail-management__head p {
  font-size: 8px;
}

.dp-management-action {
  min-height: 62px;
  gap: 7px;
  padding: 8px 10px;
}

.dp-management-action__icon {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
}

.dp-management-action__icon svg {
  width: 12px;
  height: 12px;
}

.dp-management-action__text strong {
  font-size: 9px;
}

.dp-management-action__text span {
  font-size: 7px;
}

.dp-detail-products {
  margin-top: 9px;
}

.dp-detail-section-head {
  gap: 9px;
  padding: 9px 11px;
}

.dp-detail-section-head h3 {
  font-size: 12px;
}

.dp-detail-section-head p {
  font-size: 8px;
}

.dp-detail-table {
  min-width: 700px;
}

.dp-detail-table thead th {
  height: 32px;
  padding: 0 9px;
  font-size: 7px;
}

.dp-detail-table tbody td {
  min-height: 48px;
  padding: 7px 9px;
  font-size: 9px;
}

.dp-product-cell strong {
  font-size: 9px;
}

.dp-product-cell span {
  font-size: 7px;
}

.dp-sku {
  padding: 3px 5px;
  font-size: 7px;
}

.dp-full-detail-summary__identity {
  gap: 9px;
  padding: 11px;
}

.dp-full-detail-summary__icon {
  width: 34px;
  height: 34px;
}

.dp-full-detail-summary__icon svg {
  width: 15px;
  height: 15px;
}

.dp-full-detail-summary__content h3 {
  font-size: 16px;
}

.dp-full-detail-summary__date {
  font-size: 8px;
}

.dp-full-detail-stats article {
  gap: 3px;
  padding: 8px 10px;
}

.dp-full-detail-stats span {
  font-size: 7px;
}

.dp-full-detail-stats strong {
  font-size: 13px;
}

.dp-full-detail-grid {
  gap: 9px;
  margin-top: 9px;
}

.dp-full-documents__body {
  padding: 8px;
}

.dp-full-files {
  gap: 5px;
}

.dp-full-file {
  grid-template-columns: 27px minmax(0, 1fr) auto;
  gap: 6px;
  padding: 6px;
}

.dp-full-file__icon {
  width: 27px;
  height: 27px;
}

.dp-full-file__icon svg {
  width: 12px;
  height: 12px;
}

.dp-full-file__content strong {
  font-size: 8px;
}

.dp-full-file__content span,
.dp-full-file__id {
  font-size: 7px;
}

.dp-empty {
  min-height: 200px;
  gap: 7px;
  padding: 22px;
}

.dp-empty__icon {
  width: 36px;
  height: 36px;
}

.dp-empty strong {
  font-size: 11px;
}

.dp-empty p {
  font-size: 9px;
}

.dp-toast {
  min-height: 40px;
  gap: 7px;
  padding: 7px 10px;
}

.dp-toast__icon {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
}

.dp-toast__message {
  font-size: 9px;
}@media (max-width: 680px) {
  .dp-table-wrapper {
    overflow-x: hidden;
  }

  .dp-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  .dp-table thead {
    display: none;
  }

  .dp-table tbody,
  .dp-table tr,
  .dp-table td {
    display: block;
    width: 100%;
  }

  .dp-table-row {
    padding: 10px 0;
    border-bottom: 1px solid var(--dp-border);
  }

  .dp-table-row td {
    height: auto;
    min-height: 0;
    padding: 6px 10px;
    border-right: 0 !important;
    border-bottom: 0;
  }

  .dp-table-row.is-missing td:first-child,
  .dp-table-row.is-available td:first-child {
    box-shadow: none;
  }

  .dp-table__channel,
  .dp-table__order,
  .dp-table__actions {
    text-align: left;
  }

  .dp-row-actions {
    justify-content: flex-start;
  }

  .dp-orders-head {
    padding: 10px 12px;
  }

  .dp-orders-head__right {
    gap: 6px;
  }

  .dp-empty-cell {
    width: 100%;
  }

  .dp-empty {
    min-height: 180px;
    width: 100%;
    padding: 18px;
  }

  .dp-pagination {
    width: 100%;
    overflow: hidden;
  }
}