/* =========================================================
   UBICACIÓN:
   frontend/src/pages/facturacion-cobranzas/pedidos/pedidos.css

   WIRTZ HUB · FACTURACIÓN Y COBRANZAS
   PEDIDOS

   ESTILO:
   - Premium
   - Compacto
   - Minimalista
   - Responsive
   - Dark mode real
   - Sin scroll horizontal de página
   ========================================================= */


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

#pedidosPage {
  --pedidos-bg:
    var(
      --app-bg,
      #f6f7f9
    );

  --pedidos-surface:
    var(
      --surface,
      #ffffff
    );

  --pedidos-surface-2:
    var(
      --surface-2,
      #f8f9fb
    );

  --pedidos-surface-3:
    var(
      --surface-3,
      #f2f4f7
    );

  --pedidos-border:
    var(
      --border-color,
      #e5e7eb
    );

  --pedidos-border-strong:
    var(
      --border-strong,
      #d7dbe2
    );

  --pedidos-text:
    var(
      --text-color,
      #17191d
    );

  --pedidos-text-strong:
    var(
      --text-strong,
      #0d0f12
    );

  --pedidos-muted:
    var(
      --text-muted,
      #6f7681
    );

  --pedidos-muted-2:
    var(
      --text-muted-2,
      #9299a3
    );

  --pedidos-primary:
    var(
      --accent-color,
      #17191d
    );

  --pedidos-primary-contrast:
    #ffffff;

  --pedidos-danger:
    #d92d20;

  --pedidos-warning:
    #b54708;

  --pedidos-success:
    #067647;

  --pedidos-info:
    #175cd3;

  --pedidos-radius-xs:
    7px;

  --pedidos-radius-sm:
    9px;

  --pedidos-radius-md:
    12px;

  --pedidos-radius-lg:
    15px;

  --pedidos-radius-xl:
    18px;

  --pedidos-shadow-sm:
    0 1px 2px rgba(
      16,
      24,
      40,
      0.04
    );

  --pedidos-shadow-md:
    0 12px 32px rgba(
      16,
      24,
      40,
      0.08
    );

  --pedidos-shadow-lg:
    0 24px 60px rgba(
      16,
      24,
      40,
      0.14
    );

  --pedidos-transition:
    170ms cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  width:
    100%;

  min-width:
    0;

  max-width:
    none;

  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  color:
    var(
      --pedidos-text
    );

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


/* =========================================================
   GLOBAL FIX
   ========================================================= */

#pedidosPage,
#pedidosPage *,
#pedidosPage *::before,
#pedidosPage *::after {
  box-sizing:
    border-box;
}


#pedidosPage button,
#pedidosPage input,
#pedidosPage select,
#pedidosPage textarea {
  font:
    inherit;
}


#pedidosPage button {
  -webkit-tap-highlight-color:
    transparent;
}


#pedidosPage input,
#pedidosPage select,
#pedidosPage textarea {
  min-width:
    0;
}


body.pedidos-overlay-open {
  overflow:
    hidden;
}


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

.pedidos-page__header {
  width:
    100%;

  min-width:
    0;
}


.pedidos-page__heading {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


.pedidos-page__eyebrow {
  font-size:
    11px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

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


.pedidos-page__title-row {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    18px;
}


.pedidos-page__title {
  margin:
    0;

  font-size:
    clamp(
      24px,
      2vw,
      30px
    );

  line-height:
    1.05;

  font-weight:
    800;

  letter-spacing:
    -0.035em;

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


.pedidos-page__subtitle {
  margin:
    6px 0 0;

  max-width:
    760px;

  font-size:
    13px;

  line-height:
    1.5;

  font-weight:
    600;

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


.pedidos-page__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;
}


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

.pedidos-button {
  appearance:
    none;

  border:
    1px solid transparent;

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

  min-height:
    36px;

  padding:
    8px 12px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  background:
    transparent;

  color:
    var(
      --pedidos-text
    );

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    800;

  white-space:
    nowrap;

  cursor:
    pointer;

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


.pedidos-button svg {
  width:
    16px;

  height:
    16px;

  stroke-width:
    2.1;
}


.pedidos-button:hover:not(:disabled) {
  transform:
    translateY(
      -1px
    );
}


.pedidos-button:active:not(:disabled) {
  transform:
    translateY(
      0
    );
}


.pedidos-button:disabled {
  cursor:
    not-allowed;

  opacity:
    0.48;
}


.pedidos-button--primary {
  background:
    var(
      --pedidos-primary
    );

  color:
    var(
      --pedidos-primary-contrast
    );

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


.pedidos-button--primary:hover:not(:disabled) {
  filter:
    brightness(
      1.06
    );
}


.pedidos-button--secondary {
  background:
    var(
      --pedidos-surface
    );

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

  border-color:
    var(
      --pedidos-border
    );

  box-shadow:
    var(
      --pedidos-shadow-sm
    );
}


.pedidos-button--secondary:hover:not(:disabled) {
  background:
    var(
      --pedidos-surface-2
    );

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


.pedidos-button--ghost {
  background:
    transparent;

  border-color:
    transparent;

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


.pedidos-button--ghost:hover:not(:disabled) {
  background:
    var(
      --pedidos-surface-3
    );
}


.pedidos-button--danger {
  background:
    var(
      --pedidos-danger
    );

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

  color:
    #ffffff;
}


.pedidos-button--small {
  min-height:
    31px;

  padding:
    6px 9px;

  font-size:
    11px;
}


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

.pedidos-icon-button {
  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

  padding:
    0;

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

  border-radius:
    8px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(
      --pedidos-surface
    );

  color:
    var(
      --pedidos-muted
    );

  cursor:
    pointer;

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


.pedidos-icon-button svg {
  width:
    15px;

  height:
    15px;
}


.pedidos-icon-button:hover:not(:disabled) {
  background:
    var(
      --pedidos-surface-2
    );

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

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


.pedidos-icon-button--danger {
  color:
    var(
      --pedidos-danger
    );
}


.pedidos-icon-button:disabled {
  opacity:
    0.45;

  cursor:
    not-allowed;
}


/* =========================================================
   LINK BUTTON
   ========================================================= */

.pedidos-link-button {
  border:
    0;

  padding:
    3px 0;

  background:
    transparent;

  color:
    var(
      --pedidos-text
    );

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;
}


.pedidos-link-button:hover {
  text-decoration:
    underline;
}


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

.pedidos-metrics {
  display:
    grid;

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

  gap:
    10px;

  width:
    100%;

  min-width:
    0;
}


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

  min-height:
    94px;

  padding:
    13px;

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

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

  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  background:
    var(
      --pedidos-surface
    );

  box-shadow:
    var(
      --pedidos-shadow-sm
    );
}


.pedidos-metric-card__icon {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

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

  border-radius:
    9px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

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


.pedidos-metric-card__icon svg {
  width:
    17px;

  height:
    17px;

  stroke-width:
    2;
}


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

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.pedidos-metric-card__label {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px;

  line-height:
    1.25;

  font-weight:
    750;

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


.pedidos-metric-card__value {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    20px;

  line-height:
    1.15;

  font-weight:
    850;

  letter-spacing:
    -0.03em;

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


.pedidos-metric-card__hint {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10px;

  line-height:
    1.3;

  font-weight:
    650;

  color:
    var(
      --pedidos-muted-2
    );
}


.pedidos-metrics-error {
  grid-column:
    1 /
    -1;

  min-height:
    64px;

  padding:
    14px;

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

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  background:
    var(
      --pedidos-surface
    );

  color:
    var(
      --pedidos-muted
    );

  font-size:
    12px;

  font-weight:
    700;
}


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

.pedidos-panel {
  width:
    100%;

  min-width:
    0;

  overflow:
    visible;

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

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

  background:
    var(
      --pedidos-surface
    );

  box-shadow:
    var(
      --pedidos-shadow-sm
    );
}


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

.pedidos-toolbar {
  min-width:
    0;

  padding:
    11px 12px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.pedidos-toolbar__search {
  position:
    relative;

  flex:
    1 1 440px;

  min-width:
    220px;

  max-width:
    720px;
}


.pedidos-toolbar__search >
svg {
  position:
    absolute;

  top:
    50%;

  left:
    11px;

  width:
    15px;

  height:
    15px;

  color:
    var(
      --pedidos-muted
    );

  transform:
    translateY(
      -50%
    );

  pointer-events:
    none;
}


.pedidos-toolbar__search input {
  width:
    100%;

  min-height:
    37px;

  padding:
    8px 38px 8px 34px;

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

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

  outline:
    none;

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

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

  font-size:
    12px;

  font-weight:
    650;

  transition:
    border-color
      var(
        --pedidos-transition
      ),
    background
      var(
        --pedidos-transition
      ),
    box-shadow
      var(
        --pedidos-transition
      );
}


.pedidos-toolbar__search input::placeholder {
  color:
    var(
      --pedidos-muted-2
    );
}


.pedidos-toolbar__search input:focus {
  background:
    var(
      --pedidos-surface
    );

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

  box-shadow:
    0 0 0 3px rgba(
      127,
      127,
      127,
      0.08
    );
}


.pedidos-toolbar__search-clear {
  position:
    absolute;

  top:
    50%;

  right:
    8px;

  width:
    26px;

  height:
    26px;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    transparent;

  color:
    var(
      --pedidos-muted
    );

  cursor:
    pointer;

  transform:
    translateY(
      -50%
    );
}


.pedidos-toolbar__search-clear:hover {
  background:
    var(
      --pedidos-surface-3
    );

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


.pedidos-toolbar__search-clear svg {
  width:
    14px;

  height:
    14px;
}


.pedidos-toolbar__actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    4px;
}


.pedidos-toolbar__counter {
  min-width:
    18px;

  height:
    18px;

  padding:
    0 5px;

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  color:
    var(
      --pedidos-surface
    );

  font-size:
    9px;

  font-weight:
    850;
}


.pedidos-toolbar-menu {
  position:
    relative;
}


/* =========================================================
   POPOVERS
   ========================================================= */

.pedidos-popover {
  position:
    absolute;

  top:
    calc(
      100% +
      8px
    );

  right:
    0;

  z-index:
    90;

  width:
    260px;

  max-height:
    min(
      520px,
      calc(
        100vh -
        150px
      )
    );

  overflow:
    auto;

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

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

  background:
    var(
      --pedidos-surface
    );

  box-shadow:
    var(
      --pedidos-shadow-md
    );
}


.pedidos-popover[hidden] {
  display:
    none !important;
}


.pedidos-popover__header {
  padding:
    11px 12px 9px;

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


.pedidos-popover__header div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.pedidos-popover__header strong {
  font-size:
    12px;

  font-weight:
    850;

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


.pedidos-popover__header small {
  font-size:
    10px;

  line-height:
    1.35;

  font-weight:
    600;

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


.pedidos-popover__footer {
  padding:
    9px 12px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


/* =========================================================
   COLUMNS POPOVER
   ========================================================= */

.pedidos-columns-list {
  padding:
    6px;
}


.pedidos-column-option {
  min-height:
    34px;

  padding:
    6px 8px;

  border-radius:
    7px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  cursor:
    pointer;

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


.pedidos-column-option:hover {
  background:
    var(
      --pedidos-surface-2
    );
}


.pedidos-column-option.is-locked {
  cursor:
    default;
}


.pedidos-column-option input {
  width:
    15px;

  height:
    15px;

  margin:
    0;

  accent-color:
    var(
      --pedidos-primary
    );
}


.pedidos-column-option span {
  font-size:
    11px;

  font-weight:
    700;

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


/* =========================================================
   DENSITY POPOVER
   ========================================================= */

.pedidos-density-list {
  padding:
    6px;
}


.pedidos-density-option {
  width:
    100%;

  padding:
    8px;

  border:
    0;

  border-radius:
    8px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    9px;

  background:
    transparent;

  color:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

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


.pedidos-density-option:hover,
.pedidos-density-option.is-active {
  background:
    var(
      --pedidos-surface-2
    );
}


.pedidos-density-option__check {
  width:
    17px;

  height:
    17px;

  flex:
    0 0 17px;

  margin-top:
    1px;

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


.pedidos-density-option__check svg {
  width:
    16px;

  height:
    16px;
}


.pedidos-density-option__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.pedidos-density-option__content strong {
  font-size:
    11px;

  font-weight:
    800;

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


.pedidos-density-option__content small {
  font-size:
    10px;

  line-height:
    1.35;

  font-weight:
    600;

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


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

.pedidos-filters {
  padding:
    12px;

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

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


.pedidos-filters[hidden] {
  display:
    none !important;
}


.pedidos-filters__grid {
  display:
    grid;

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

  gap:
    10px;
}


.pedidos-filters__footer {
  margin-top:
    10px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;
}


/* =========================================================
   FIELDS
   ========================================================= */

.pedidos-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.pedidos-field__label {
  font-size:
    10px;

  line-height:
    1.2;

  font-weight:
    800;

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


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

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

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

  outline:
    none;

  background:
    var(
      --pedidos-surface
    );

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

  font-size:
    12px;

  font-weight:
    650;

  transition:
    border-color
      var(
        --pedidos-transition
      ),
    box-shadow
      var(
        --pedidos-transition
      ),
    background
      var(
        --pedidos-transition
      );
}


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

  padding:
    7px 9px;
}


.pedidos-field textarea {
  min-height:
    88px;

  padding:
    9px;

  resize:
    vertical;

  line-height:
    1.45;
}


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

  box-shadow:
    0 0 0 3px rgba(
      127,
      127,
      127,
      0.08
    );
}


.pedidos-field input:disabled,
.pedidos-field select:disabled,
.pedidos-field textarea:disabled {
  opacity:
    0.55;

  cursor:
    not-allowed;

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


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

.pedidos-table-header {
  min-height:
    42px;

  padding:
    7px 12px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.pedidos-table-header__left,
.pedidos-table-header__right {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;
}


.pedidos-results-text {
  font-size:
    11px;

  font-weight:
    700;

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


.pedidos-limit {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  font-size:
    10px;

  font-weight:
    700;

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


.pedidos-limit select {
  min-width:
    62px;

  min-height:
    30px;

  padding:
    4px 7px;

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

  border-radius:
    7px;

  outline:
    none;

  background:
    var(
      --pedidos-surface
    );

  color:
    var(
      --pedidos-text
    );

  font-size:
    11px;

  font-weight:
    700;
}


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

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

  min-width:
    0;

  overflow:
    hidden;
}


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

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    visible;

  scrollbar-width:
    thin;
}


.pedidos-table {
  width:
    100%;

  min-width:
    1180px;

  border-collapse:
    separate;

  border-spacing:
    0;

  table-layout:
    auto;

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


.pedidos-table__th {
  position:
    sticky;

  top:
    0;

  z-index:
    3;

  padding:
    9px 10px;

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

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

  color:
    var(
      --pedidos-muted
    );

  font-size:
    10px;

  line-height:
    1.2;

  font-weight:
    850;

  text-align:
    left;

  white-space:
    nowrap;
}


.pedidos-table__th--number,
.pedidos-table__th--money {
  text-align:
    right;
}


.pedidos-table__th--actions {
  width:
    58px;

  text-align:
    center;
}


.pedidos-table__th--pedido {
  min-width:
    130px;
}


.pedidos-table__th--cliente {
  min-width:
    210px;
}


.pedidos-table__td {
  padding:
    10px;

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

  color:
    var(
      --pedidos-text
    );

  font-size:
    11px;

  line-height:
    1.3;

  font-weight:
    650;

  vertical-align:
    middle;

  background:
    var(
      --pedidos-surface
    );

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


.pedidos-table__row {
  cursor:
    pointer;
}


.pedidos-table__row:hover
.pedidos-table__td {
  background:
    var(
      --pedidos-surface-2
    );
}


.pedidos-table__row.is-cancelled
.pedidos-table__td {
  opacity:
    0.6;
}


.pedidos-table__td--number,
.pedidos-table__td--money {
  text-align:
    right;

  white-space:
    nowrap;
}


.pedidos-table__td--total strong {
  font-weight:
    850;

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


.pedidos-table__td--actions {
  text-align:
    center;
}


/* =========================================================
   DENSITY
   ========================================================= */

.pedidos-density-compact
.pedidos-table__td {
  padding-top:
    7px;

  padding-bottom:
    7px;
}


.pedidos-density-compact
.pedidos-table__th {
  padding-top:
    7px;

  padding-bottom:
    7px;
}


.pedidos-density-normal
.pedidos-table__td {
  padding-top:
    10px;

  padding-bottom:
    10px;
}


.pedidos-density-comfortable
.pedidos-table__td {
  padding-top:
    14px;

  padding-bottom:
    14px;
}


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

.pedidos-order-number {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.pedidos-order-number__main {
  font-size:
    11px;

  font-weight:
    850;

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


.pedidos-order-number__secondary {
  max-width:
    150px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    9px;

  font-weight:
    650;

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


.pedidos-date-cell {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.pedidos-date-cell >
span {
  font-weight:
    750;

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


.pedidos-date-cell small {
  font-size:
    9px;

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


.pedidos-client-cell {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.pedidos-client-cell__avatar {
  width:
    30px;

  height:
    30px;

  flex:
    0 0 30px;

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

  border-radius:
    8px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

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

  font-size:
    11px;

  font-weight:
    850;
}


.pedidos-client-cell__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.pedidos-client-cell__content strong {
  max-width:
    190px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px;

  font-weight:
    800;

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


.pedidos-client-cell__content small {
  max-width:
    190px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    9px;

  font-weight:
    600;

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


.pedidos-list-cell {
  max-width:
    180px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.pedidos-list-cell strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10px;

  font-weight:
    800;

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


.pedidos-list-cell small {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    9px;

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


.pedidos-money {
  font-variant-numeric:
    tabular-nums;

  font-weight:
    800;
}


.pedidos-currency-badge {
  min-height:
    21px;

  padding:
    3px 7px;

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

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  font-size:
    9px;

  font-weight:
    850;

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


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

.pedidos-badge {
  min-height:
    22px;

  padding:
    3px 7px;

  border:
    1px solid transparent;

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    850;

  white-space:
    nowrap;
}


.pedidos-badge--borrador {
  background:
    rgba(
      102,
      112,
      133,
      0.10
    );

  color:
    #667085;

  border-color:
    rgba(
      102,
      112,
      133,
      0.18
    );
}


.pedidos-badge--pendiente {
  background:
    rgba(
      181,
      71,
      8,
      0.10
    );

  color:
    #b54708;

  border-color:
    rgba(
      181,
      71,
      8,
      0.18
    );
}


.pedidos-badge--confirmado,
.pedidos-badge--preparado,
.pedidos-badge--facturado,
.pedidos-badge--entregado {
  background:
    rgba(
      6,
      118,
      71,
      0.10
    );

  color:
    #067647;

  border-color:
    rgba(
      6,
      118,
      71,
      0.18
    );
}


.pedidos-badge--en-preparacion,
.pedidos-badge--parcial {
  background:
    rgba(
      23,
      92,
      211,
      0.10
    );

  color:
    #175cd3;

  border-color:
    rgba(
      23,
      92,
      211,
      0.18
    );
}


.pedidos-badge--cancelado {
  background:
    rgba(
      217,
      45,
      32,
      0.10
    );

  color:
    #d92d20;

  border-color:
    rgba(
      217,
      45,
      32,
      0.18
    );
}


.pedidos-badge--no-aplica {
  background:
    rgba(
      102,
      112,
      133,
      0.10
    );

  color:
    #667085;

  border-color:
    rgba(
      102,
      112,
      133,
      0.18
    );
}


.pedidos-badge--baja {
  background:
    rgba(
      102,
      112,
      133,
      0.10
    );

  color:
    #667085;

  border-color:
    rgba(
      102,
      112,
      133,
      0.18
    );
}


.pedidos-badge--normal {
  background:
    rgba(
      23,
      92,
      211,
      0.09
    );

  color:
    #175cd3;

  border-color:
    rgba(
      23,
      92,
      211,
      0.16
    );
}


.pedidos-badge--alta {
  background:
    rgba(
      181,
      71,
      8,
      0.10
    );

  color:
    #b54708;

  border-color:
    rgba(
      181,
      71,
      8,
      0.18
    );
}


.pedidos-badge--urgente {
  background:
    rgba(
      217,
      45,
      32,
      0.10
    );

  color:
    #d92d20;

  border-color:
    rgba(
      217,
      45,
      32,
      0.18
    );
}


.pedidos-badge--factura-a {
  background:
    rgba(
      23,
      92,
      211,
      0.10
    );

  color:
    #175cd3;

  border-color:
    rgba(
      23,
      92,
      211,
      0.18
    );
}


.pedidos-badge--factura-c {
  background:
    rgba(
      105,
      65,
      198,
      0.10
    );

  color:
    #6941c6;

  border-color:
    rgba(
      105,
      65,
      198,
      0.18
    );
}


.pedidos-badge--remito {
  background:
    rgba(
      2,
      122,
      72,
      0.10
    );

  color:
    #027a48;

  border-color:
    rgba(
      2,
      122,
      72,
      0.18
    );
}


/* =========================================================
   ROW ACTION
   ========================================================= */

.pedidos-row-action {
  width:
    30px;

  height:
    30px;

  padding:
    0;

  border:
    0;

  border-radius:
    8px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    transparent;

  color:
    var(
      --pedidos-muted
    );

  cursor:
    pointer;

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


.pedidos-row-action:hover {
  background:
    var(
      --pedidos-surface-3
    );

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


.pedidos-row-action svg {
  width:
    16px;

  height:
    16px;
}


/* =========================================================
   ROW MENU
   ========================================================= */

.pedidos-row-menu {
  position:
    fixed;

  z-index:
    150;

  width:
    210px;

  padding:
    5px;

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

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

  background:
    var(
      --pedidos-surface
    );

  box-shadow:
    var(
      --pedidos-shadow-lg
    );
}


.pedidos-row-menu[hidden] {
  display:
    none !important;
}


.pedidos-row-menu__item {
  width:
    100%;

  min-height:
    34px;

  padding:
    7px 8px;

  border:
    0;

  border-radius:
    7px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  background:
    transparent;

  color:
    var(
      --pedidos-text
    );

  font-size:
    11px;

  font-weight:
    750;

  text-align:
    left;

  cursor:
    pointer;
}


.pedidos-row-menu__item:hover {
  background:
    var(
      --pedidos-surface-2
    );
}


.pedidos-row-menu__item svg {
  width:
    15px;

  height:
    15px;

  flex:
    0 0 15px;
}


.pedidos-row-menu__item--danger {
  color:
    var(
      --pedidos-danger
    );
}


.pedidos-row-menu__separator {
  height:
    1px;

  margin:
    4px 2px;

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


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

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

  padding:
    6px 0;
}


.pedidos-table-loading__row {
  min-height:
    48px;

  padding:
    8px 12px;

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

  display:
    grid;

  grid-template-columns:
    120px
    minmax(
      180px,
      1.4fr
    )
    minmax(
      150px,
      1fr
    )
    110px
    100px;

  align-items:
    center;

  gap:
    14px;
}


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

.pedidos-skeleton {
  position:
    relative;

  overflow:
    hidden;

  height:
    10px;

  border-radius:
    999px;

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


.pedidos-skeleton::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  transform:
    translateX(
      -100%
    );

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        255,
        255,
        0.42
      ),
      transparent
    );

  animation:
    pedidosSkeleton
    1.35s
    infinite;
}


.pedidos-skeleton--icon {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  border-radius:
    9px;
}


.pedidos-skeleton--label {
  width:
    52%;

  height:
    8px;
}


.pedidos-skeleton--value {
  width:
    78%;

  height:
    17px;
}


@keyframes pedidosSkeleton {
  100% {
    transform:
      translateX(
        100%
      );
  }
}


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

.pedidos-empty-state {
  min-height:
    260px;

  padding:
    34px 20px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  text-align:
    center;
}


.pedidos-empty-state__icon {
  width:
    42px;

  height:
    42px;

  margin-bottom:
    4px;

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

  border-radius:
    12px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

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


.pedidos-empty-state__icon svg {
  width:
    20px;

  height:
    20px;
}


.pedidos-empty-state h3 {
  margin:
    0;

  font-size:
    14px;

  font-weight:
    850;

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


.pedidos-empty-state p {
  max-width:
    520px;

  margin:
    0;

  font-size:
    11px;

  line-height:
    1.5;

  font-weight:
    600;

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


.pedidos-empty-state__actions {
  margin-top:
    6px;

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;
}


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

.pedidos-pagination {
  min-height:
    52px;

  padding:
    9px 12px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.pedidos-pagination__pages {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    3px;
}


.pedidos-pagination__button {
  min-width:
    31px;

  height:
    31px;

  padding:
    0 8px;

  border:
    1px solid transparent;

  border-radius:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  background:
    transparent;

  color:
    var(
      --pedidos-muted
    );

  font-size:
    10px;

  font-weight:
    800;

  cursor:
    pointer;
}


.pedidos-pagination__button:hover:not(:disabled) {
  background:
    var(
      --pedidos-surface-2
    );

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


.pedidos-pagination__button.is-active {
  background:
    var(
      --pedidos-text-strong
    );

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


.pedidos-pagination__button:disabled {
  opacity:
    0.35;

  cursor:
    not-allowed;
}


.pedidos-pagination__button svg {
  width:
    13px;

  height:
    13px;
}


.pedidos-pagination__button--nav {
  min-width:
    86px;
}


.pedidos-pagination__ellipsis {
  min-width:
    24px;

  text-align:
    center;

  color:
    var(
      --pedidos-muted
    );

  font-size:
    11px;
}


/* =========================================================
   NOTIFICATION
   ========================================================= */

.pedidos-notification {
  position:
    fixed;

  top:
    76px;

  right:
    22px;

  z-index:
    400;

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

  min-height:
    48px;

  padding:
    10px;

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

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

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  background:
    var(
      --pedidos-surface
    );

  color:
    var(
      --pedidos-text
    );

  box-shadow:
    var(
      --pedidos-shadow-lg
    );

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(
      -8px
    );

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


.pedidos-notification.is-visible {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(
      0
    );
}


.pedidos-notification__icon {
  width:
    28px;

  height:
    28px;

  flex:
    0 0 28px;

  border-radius:
    8px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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


.pedidos-notification__icon svg {
  width:
    16px;

  height:
    16px;
}


.pedidos-notification__message {
  min-width:
    0;

  flex:
    1;

  font-size:
    11px;

  line-height:
    1.4;

  font-weight:
    700;
}


.pedidos-notification__close {
  width:
    26px;

  height:
    26px;

  flex:
    0 0 26px;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    transparent;

  color:
    var(
      --pedidos-muted
    );

  cursor:
    pointer;
}


.pedidos-notification__close:hover {
  background:
    var(
      --pedidos-surface-2
    );
}


.pedidos-notification__close svg {
  width:
    14px;

  height:
    14px;
}


.pedidos-notification--success
.pedidos-notification__icon {
  color:
    var(
      --pedidos-success
    );

  background:
    rgba(
      6,
      118,
      71,
      0.09
    );
}


.pedidos-notification--error
.pedidos-notification__icon {
  color:
    var(
      --pedidos-danger
    );

  background:
    rgba(
      217,
      45,
      32,
      0.09
    );
}


.pedidos-notification--warning
.pedidos-notification__icon {
  color:
    var(
      --pedidos-warning
    );

  background:
    rgba(
      181,
      71,
      8,
      0.09
    );
}


/* =========================================================
   FIN PARTE 1 DE 3
   ========================================================= *//* =========================================================
   UBICACIÓN:
   frontend/src/pages/facturacion-cobranzas/pedidos/pedidos.css

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


/* =========================================================
   DRAWER OVERLAY
   ========================================================= */

.pedido-drawer-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    210;

  background:
    rgba(
      15,
      23,
      42,
      0.34
    );

  backdrop-filter:
    blur(
      2px
    );

  opacity:
    0;

  visibility:
    hidden;

  transition:
    opacity
      var(
        --pedidos-transition
      ),
    visibility
      var(
        --pedidos-transition
      );
}


.pedido-drawer-overlay.is-visible {
  opacity:
    1;

  visibility:
    visible;
}


.pedido-drawer-overlay[hidden] {
  display:
    none !important;
}


/* =========================================================
   DRAWER
   ========================================================= */

.pedido-drawer {
  position:
    fixed;

  top:
    0;

  right:
    0;

  bottom:
    0;

  z-index:
    220;

  width:
    min(
      860px,
      calc(
        100vw -
        42px
      )
    );

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  background:
    var(
      --pedidos-surface
    );

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

  box-shadow:
    -24px 0 60px rgba(
      15,
      23,
      42,
      0.14
    );

  transform:
    translateX(
      105%
    );

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

  overflow:
    hidden;
}


.pedido-drawer.is-open {
  transform:
    translateX(
      0
    );
}


.pedido-drawer__header {
  min-height:
    76px;

  padding:
    14px 16px;

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

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;

  background:
    var(
      --pedidos-surface
    );

  flex:
    0 0 auto;
}


.pedido-drawer__heading {
  min-width:
    0;

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.pedido-drawer__eyebrow {
  font-size:
    10px;

  line-height:
    1;

  font-weight:
    850;

  text-transform:
    uppercase;

  letter-spacing:
    0.08em;

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


.pedido-drawer__title-row {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;
}


.pedido-drawer__title-row h2 {
  margin:
    0;

  max-width:
    100%;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    19px;

  line-height:
    1.15;

  font-weight:
    850;

  letter-spacing:
    -0.025em;

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


.pedido-drawer__subtitle {
  max-width:
    100%;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px;

  line-height:
    1.35;

  font-weight:
    650;

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


.pedido-drawer__header-actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}


.pedido-drawer__close {
  width:
    32px;

  height:
    32px;

  padding:
    0;

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

  border-radius:
    9px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(
      --pedidos-surface
    );

  color:
    var(
      --pedidos-muted
    );

  cursor:
    pointer;

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


.pedido-drawer__close:hover {
  background:
    var(
      --pedidos-surface-2
    );

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

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


.pedido-drawer__close svg {
  width:
    16px;

  height:
    16px;
}


.pedido-drawer__body {
  min-width:
    0;

  min-height:
    0;

  flex:
    1;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  padding:
    14px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  scrollbar-width:
    thin;
}


.pedido-drawer__footer {
  min-height:
    64px;

  padding:
    10px 14px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  background:
    var(
      --pedidos-surface
    );

  flex:
    0 0 auto;
}


.pedido-drawer__footer-info {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  font-size:
    10px;

  font-weight:
    750;

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


.pedido-drawer__footer-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;
}


/* =========================================================
   DRAWER LOADING
   ========================================================= */

.pedido-drawer-loading-card {
  padding:
    13px;

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

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

  display:
    flex;

  flex-direction:
    column;

  gap:
    9px;

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


.pedido-drawer-loading-card
.pedidos-skeleton:nth-child(
  1
) {
  width:
    28%;
}


.pedido-drawer-loading-card
.pedidos-skeleton:nth-child(
  2
) {
  width:
    72%;
}


.pedido-drawer-loading-card
.pedidos-skeleton:nth-child(
  3
) {
  width:
    52%;
}


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

.pedido-detail-summary {
  display:
    grid;

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

  gap:
    8px;
}


.pedido-detail-summary__card {
  min-width:
    0;

  padding:
    11px;

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

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

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

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


.pedido-detail-summary__card >
span {
  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    800;

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


.pedido-detail-summary__card >
strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    15px;

  line-height:
    1.2;

  font-weight:
    850;

  letter-spacing:
    -0.02em;

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


.pedido-detail-summary__card >
small {
  font-size:
    9px;

  line-height:
    1.3;

  font-weight:
    650;

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


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

.pedido-detail-section {
  padding:
    12px;

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

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

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


.pedido-detail-section__header {
  min-width:
    0;

  margin-bottom:
    10px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;
}


.pedido-detail-section__header >
div {
  min-width:
    0;
}


.pedido-detail-section__header h3 {
  margin:
    0;

  font-size:
    12px;

  line-height:
    1.3;

  font-weight:
    850;

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


.pedido-detail-section__header p {
  margin:
    2px 0 0;

  font-size:
    10px;

  line-height:
    1.4;

  font-weight:
    600;

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


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

.pedido-detail-info-grid {
  display:
    grid;

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

  gap:
    8px;
}


.pedido-detail-info {
  min-width:
    0;

  padding:
    9px;

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

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

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

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


.pedido-detail-info >
span {
  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    750;

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


.pedido-detail-info >
strong {
  min-width:
    0;

  overflow-wrap:
    anywhere;

  font-size:
    11px;

  line-height:
    1.35;

  font-weight:
    800;

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


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

.pedido-detail-section--items {
  padding:
    0;

  overflow:
    hidden;
}


.pedido-detail-section--items
.pedido-detail-section__header {
  margin:
    0;

  padding:
    11px 12px;

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


.pedido-detail-items-scroll {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  scrollbar-width:
    thin;
}


.pedido-detail-items {
  width:
    100%;

  min-width:
    760px;

  border-collapse:
    collapse;

  table-layout:
    auto;
}


.pedido-detail-items th {
  padding:
    8px 9px;

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

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

  color:
    var(
      --pedidos-muted
    );

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    850;

  text-align:
    left;

  white-space:
    nowrap;
}


.pedido-detail-items td {
  padding:
    9px;

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

  font-size:
    10px;

  line-height:
    1.3;

  font-weight:
    650;

  color:
    var(
      --pedidos-text
    );

  vertical-align:
    middle;
}


.pedido-detail-items tbody tr:last-child td {
  border-bottom:
    0;
}


.pedido-detail-items
.is-number,
.pedido-detail-items
.is-money {
  text-align:
    right;

  white-space:
    nowrap;
}


.pedido-detail-items__checkbox {
  width:
    34px;

  text-align:
    center;
}


.pedido-detail-items__checkbox input {
  width:
    14px;

  height:
    14px;

  margin:
    0;

  accent-color:
    var(
      --pedidos-primary
    );
}


.pedido-detail-items__actions {
  width:
    82px;

  white-space:
    nowrap;

  text-align:
    right;
}


.pedido-detail-items__row.is-inactive {
  opacity:
    0.45;
}


.pedido-detail-items__empty {
  padding:
    28px !important;

  text-align:
    center !important;

  color:
    var(
      --pedidos-muted
    ) !important;

  font-size:
    10px !important;
}


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

.pedido-detail-product {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.pedido-detail-product__main {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.pedido-detail-product__main strong {
  max-width:
    300px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10px;

  font-weight:
    800;

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


.pedido-detail-product__main small {
  max-width:
    300px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    9px;

  font-weight:
    600;

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


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

.pedido-bulk-actions {
  min-height:
    42px;

  padding:
    6px 10px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

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


.pedido-bulk-actions[hidden] {
  display:
    none !important;
}


.pedido-bulk-actions__count {
  font-size:
    10px;

  font-weight:
    700;

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


.pedido-bulk-actions__count strong {
  color:
    var(
      --pedidos-text-strong
    );

  font-weight:
    850;
}


.pedido-bulk-actions__buttons {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;
}


/* =========================================================
   TOTALS
   ========================================================= */

.pedido-totals {
  margin-left:
    auto;

  width:
    min(
      100%,
      390px
    );

  display:
    flex;

  flex-direction:
    column;
}


.pedido-totals__row {
  min-height:
    34px;

  padding:
    7px 0;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;
}


.pedido-totals__row:last-child {
  border-bottom:
    0;
}


.pedido-totals__row span {
  font-size:
    10px;

  font-weight:
    700;

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


.pedido-totals__row strong {
  font-size:
    11px;

  font-weight:
    800;

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

  white-space:
    nowrap;
}


.pedido-totals__row--total {
  padding-top:
    10px;
}


.pedido-totals__row--total span,
.pedido-totals__row--total strong {
  font-size:
    13px;

  font-weight:
    850;
}


/* =========================================================
   NOTES
   ========================================================= */

.pedido-detail-note {
  padding:
    9px;

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

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

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


.pedido-detail-note +
.pedido-detail-note {
  margin-top:
    8px;
}


.pedido-detail-note span {
  display:
    block;

  margin-bottom:
    4px;

  font-size:
    9px;

  font-weight:
    800;

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


.pedido-detail-note p {
  margin:
    0;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;

  font-size:
    10px;

  line-height:
    1.45;

  font-weight:
    650;

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


/* =========================================================
   EDITOR OVERLAY
   ========================================================= */

.pedido-editor-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    300;

  background:
    rgba(
      15,
      23,
      42,
      0.48
    );

  backdrop-filter:
    blur(
      3px
    );

  opacity:
    0;

  visibility:
    hidden;

  transition:
    opacity
      var(
        --pedidos-transition
      ),
    visibility
      var(
        --pedidos-transition
      );
}


.pedido-editor-overlay.is-visible {
  opacity:
    1;

  visibility:
    visible;
}


.pedido-editor-overlay[hidden] {
  display:
    none !important;
}


/* =========================================================
   EDITOR
   ========================================================= */

.pedido-editor {
  position:
    fixed;

  inset:
    18px;

  z-index:
    310;

  min-width:
    0;

  max-width:
    1480px;

  margin:
    0 auto;

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

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

  display:
    flex;

  flex-direction:
    column;

  background:
    var(
      --pedidos-surface
    );

  box-shadow:
    var(
      --pedidos-shadow-lg
    );

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(
      12px
    )
    scale(
      0.992
    );

  transition:
    opacity
      190ms ease,
    transform
      190ms ease,
    visibility
      190ms ease;

  overflow:
    hidden;
}


.pedido-editor.is-open {
  opacity:
    1;

  visibility:
    visible;

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


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

.pedido-editor__header {
  min-height:
    76px;

  padding:
    14px 16px;

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

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  background:
    var(
      --pedidos-surface
    );

  flex:
    0 0 auto;
}


.pedido-editor__heading {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.pedido-editor__eyebrow {
  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

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


.pedido-editor__title-row {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;
}


.pedido-editor__title-row h2 {
  margin:
    0;

  font-size:
    20px;

  line-height:
    1.15;

  font-weight:
    850;

  letter-spacing:
    -0.025em;

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


.pedido-editor__heading p {
  margin:
    0;

  max-width:
    760px;

  font-size:
    10px;

  line-height:
    1.4;

  font-weight:
    600;

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


.pedido-editor__close {
  width:
    33px;

  height:
    33px;

  flex:
    0 0 33px;

  padding:
    0;

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

  border-radius:
    9px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(
      --pedidos-surface
    );

  color:
    var(
      --pedidos-muted
    );

  cursor:
    pointer;
}


.pedido-editor__close:hover {
  background:
    var(
      --pedidos-surface-2
    );

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


.pedido-editor__close svg {
  width:
    16px;

  height:
    16px;
}


/* =========================================================
   EDITOR BODY
   ========================================================= */

.pedido-editor__body {
  min-width:
    0;

  min-height:
    0;

  flex:
    1;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  padding:
    14px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

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

  scrollbar-width:
    thin;
}


/* =========================================================
   EDITOR SECTION
   ========================================================= */

.pedido-editor-section {
  min-width:
    0;

  padding:
    12px;

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

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

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


.pedido-editor-section.is-disabled {
  opacity:
    0.62;
}


.pedido-editor-section__header {
  min-width:
    0;

  margin-bottom:
    10px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;
}


.pedido-editor-section__header >
div:first-child {
  min-width:
    0;
}


.pedido-editor-section__header h3 {
  margin:
    0;

  font-size:
    12px;

  line-height:
    1.3;

  font-weight:
    850;

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


.pedido-editor-section__header p {
  margin:
    2px 0 0;

  font-size:
    10px;

  line-height:
    1.4;

  font-weight:
    600;

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


/* =========================================================
   CLIENT PICKER
   ========================================================= */

.pedido-client-picker {
  position:
    relative;

  width:
    100%;
}


.pedido-client-picker__search {
  position:
    relative;

  width:
    100%;
}


.pedido-client-picker__search >
svg {
  position:
    absolute;

  left:
    11px;

  top:
    50%;

  width:
    15px;

  height:
    15px;

  color:
    var(
      --pedidos-muted
    );

  transform:
    translateY(
      -50%
    );

  pointer-events:
    none;
}


.pedido-client-picker__search input {
  width:
    100%;

  min-height:
    39px;

  padding:
    8px 40px 8px 34px;

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

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

  outline:
    none;

  background:
    var(
      --pedidos-surface
    );

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

  font-size:
    12px;

  font-weight:
    650;
}


.pedido-client-picker__search input:focus {
  border-color:
    var(
      --pedidos-border-strong
    );

  box-shadow:
    0 0 0 3px rgba(
      127,
      127,
      127,
      0.08
    );
}


.pedido-client-picker__clear {
  position:
    absolute;

  top:
    50%;

  right:
    8px;

  width:
    25px;

  height:
    25px;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    transparent;

  color:
    var(
      --pedidos-muted
    );

  transform:
    translateY(
      -50%
    );

  cursor:
    pointer;
}


.pedido-client-picker__clear:hover {
  background:
    var(
      --pedidos-surface-2
    );
}


.pedido-client-picker__clear svg {
  width:
    13px;

  height:
    13px;
}


/* =========================================================
   CLIENT RESULTS
   ========================================================= */

.pedido-client-picker__results {
  width:
    100%;

  max-height:
    330px;

  margin-top:
    7px;

  overflow-y:
    auto;

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

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

  background:
    var(
      --pedidos-surface
    );

  scrollbar-width:
    thin;
}


.pedido-client-picker__empty,
.pedido-client-picker__loading {
  min-height:
    62px;

  padding:
    14px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  color:
    var(
      --pedidos-muted
    );

  font-size:
    10px;

  line-height:
    1.4;

  font-weight:
    650;

  text-align:
    center;
}


.pedido-client-picker__empty.is-error {
  color:
    var(
      --pedidos-danger
    );
}


.pedido-client-picker__loading svg {
  width:
    15px;

  height:
    15px;
}


/* =========================================================
   CLIENT RESULT ITEM
   ========================================================= */

.pedido-client-result {
  width:
    100%;

  min-width:
    0;

  padding:
    9px 10px;

  border:
    0;

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

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  background:
    var(
      --pedidos-surface
    );

  color:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

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


.pedido-client-result:last-child {
  border-bottom:
    0;
}


.pedido-client-result:hover {
  background:
    var(
      --pedidos-surface-2
    );
}


.pedido-client-result >
svg {
  width:
    15px;

  height:
    15px;

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


.pedido-client-result__avatar {
  width:
    34px;

  height:
    34px;

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

  border-radius:
    9px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

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

  font-size:
    11px;

  font-weight:
    850;
}


.pedido-client-result__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.pedido-client-result__top {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


.pedido-client-result__top strong {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px;

  font-weight:
    850;

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


.pedido-client-result__top span {
  flex:
    0 0 auto;

  font-size:
    9px;

  font-weight:
    750;

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


.pedido-client-result__meta {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    4px 10px;
}


.pedido-client-result__meta span {
  max-width:
    260px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    9px;

  font-weight:
    600;

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


.pedido-client-result__price {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  font-size:
    9px;
}


.pedido-client-result__price span {
  max-width:
    240px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(
      --pedidos-muted
    );

  font-weight:
    650;
}


.pedido-client-result__price strong {
  color:
    var(
      --pedidos-text
    );

  font-weight:
    800;
}


.pedido-client-result__price
.is-warning {
  color:
    var(
      --pedidos-warning
    );

  font-weight:
    800;
}


/* =========================================================
   SELECTED CLIENT
   ========================================================= */

.pedido-selected-client {
  min-width:
    0;

  padding:
    11px;

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

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

  display:
    grid;

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

  align-items:
    start;

  gap:
    10px;

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


.pedido-selected-client__avatar {
  width:
    38px;

  height:
    38px;

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

  border-radius:
    10px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(
      --pedidos-surface
    );

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

  font-size:
    13px;

  font-weight:
    850;
}


.pedido-selected-client__main {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


.pedido-selected-client__top {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;
}


.pedido-selected-client__top >
div {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    7px;
}


.pedido-selected-client__top strong {
  font-size:
    12px;

  font-weight:
    850;

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


.pedido-selected-client__top span {
  padding:
    2px 6px;

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

  border-radius:
    999px;

  background:
    var(
      --pedidos-surface
    );

  color:
    var(
      --pedidos-muted
    );

  font-size:
    8px;

  font-weight:
    800;
}


.pedido-selected-client__meta {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px 12px;
}


.pedido-selected-client__meta span {
  min-width:
    0;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  font-size:
    9px;

  font-weight:
    650;

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


.pedido-selected-client__meta svg {
  width:
    12px;

  height:
    12px;
}


.pedido-selected-client__financial {
  display:
    grid;

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

  gap:
    7px;
}


.pedido-selected-client__financial >
div {
  min-width:
    0;

  padding:
    7px 8px;

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

  border-radius:
    8px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

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


.pedido-selected-client__financial span {
  font-size:
    8px;

  font-weight:
    750;

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


.pedido-selected-client__financial strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10px;

  font-weight:
    850;

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


/* =========================================================
   COMMERCIAL GRID
   ========================================================= */

.pedido-editor-commercial-grid {
  display:
    grid;

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

  gap:
    9px;
}


.pedido-editor-readonly-value {
  min-height:
    36px;

  padding:
    7px 9px;

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

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

  display:
    flex;

  align-items:
    center;

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

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

  font-size:
    12px;

  font-weight:
    800;
}


/* =========================================================
   DOCUMENT BULK ACTIONS
   ========================================================= */

.pedido-editor-document-actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  justify-content:
    flex-end;

  gap:
    4px;
}


.pedido-editor-document-actions >
span {
  margin-right:
    3px;

  font-size:
    9px;

  font-weight:
    700;

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


/* =========================================================
   PRODUCT PICKER
   ========================================================= */

.pedido-product-picker {
  width:
    100%;

  min-width:
    0;

  margin-bottom:
    10px;

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

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

  overflow:
    hidden;

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


.pedido-product-picker__search {
  position:
    relative;

  padding:
    8px;

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

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


.pedido-product-picker__search >
svg {
  position:
    absolute;

  left:
    19px;

  top:
    50%;

  width:
    15px;

  height:
    15px;

  color:
    var(
      --pedidos-muted
    );

  transform:
    translateY(
      -50%
    );

  pointer-events:
    none;
}


.pedido-product-picker__search input {
  width:
    100%;

  min-height:
    37px;

  padding:
    8px 40px 8px 34px;

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

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

  outline:
    none;

  background:
    var(
      --pedidos-surface
    );

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

  font-size:
    11px;

  font-weight:
    650;
}


.pedido-product-picker__search input:focus {
  border-color:
    var(
      --pedidos-border-strong
    );

  box-shadow:
    0 0 0 3px rgba(
      127,
      127,
      127,
      0.08
    );
}


.pedido-product-picker__search input:disabled {
  opacity:
    0.5;

  cursor:
    not-allowed;
}


.pedido-product-picker__clear {
  position:
    absolute;

  top:
    50%;

  right:
    17px;

  width:
    24px;

  height:
    24px;

  padding:
    0;

  border:
    0;

  border-radius:
    6px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    transparent;

  color:
    var(
      --pedidos-muted
    );

  transform:
    translateY(
      -50%
    );

  cursor:
    pointer;
}


.pedido-product-picker__clear:hover {
  background:
    var(
      --pedidos-surface-3
    );
}


.pedido-product-picker__clear svg {
  width:
    13px;

  height:
    13px;
}


/* =========================================================
   PRODUCT RESULTS
   ========================================================= */

.pedido-product-picker__results {
  max-height:
    330px;

  overflow-y:
    auto;

  scrollbar-width:
    thin;
}


.pedido-product-picker__empty,
.pedido-product-picker__loading {
  min-height:
    64px;

  padding:
    14px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  text-align:
    center;

  font-size:
    10px;

  line-height:
    1.4;

  font-weight:
    650;

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


.pedido-product-picker__empty.is-error {
  color:
    var(
      --pedidos-danger
    );
}


.pedido-product-picker__loading svg {
  width:
    15px;

  height:
    15px;
}


/* =========================================================
   PRODUCT RESULT
   ========================================================= */

.pedido-product-result {
  min-width:
    0;

  padding:
    9px 10px;

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

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  background:
    var(
      --pedidos-surface
    );

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


.pedido-product-result:last-child {
  border-bottom:
    0;
}


.pedido-product-result:hover {
  background:
    var(
      --pedidos-surface-2
    );
}


.pedido-product-result__main {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.pedido-product-result__title {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;
}


.pedido-product-result__title strong {
  min-width:
    0;

  max-width:
    100%;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10px;

  font-weight:
    850;

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


.pedido-product-result__title span {
  flex:
    0 0 auto;

  padding:
    2px 5px;

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

  border-radius:
    999px;

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

  color:
    var(
      --pedidos-muted
    );

  font-size:
    8px;

  font-weight:
    750;
}


.pedido-product-result__meta {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    4px 10px;
}


.pedido-product-result__meta span {
  max-width:
    280px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    9px;

  font-weight:
    600;

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


.pedido-product-result__price {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    1px;

  text-align:
    right;
}


.pedido-product-result__price >
span {
  font-size:
    8px;

  font-weight:
    700;

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


.pedido-product-result__price >
strong {
  max-width:
    100%;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px;

  font-weight:
    850;

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


.pedido-product-result__price >
small {
  font-size:
    8px;

  font-weight:
    650;

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


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

.pedido-product-picker__pagination {
  min-height:
    38px;

  padding:
    6px 8px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

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


.pedido-product-picker__pagination[hidden] {
  display:
    none !important;
}


.pedido-product-picker__pagination >
span {
  min-width:
    110px;

  text-align:
    center;

  font-size:
    9px;

  font-weight:
    750;

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


/* =========================================================
   EDITOR ITEMS
   ========================================================= */

.pedido-editor-items {
  width:
    100%;

  min-width:
    0;

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

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

  overflow:
    hidden;

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


.pedido-editor-items__scroll {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  scrollbar-width:
    thin;
}


.pedido-editor-items-table {
  width:
    100%;

  min-width:
    980px;

  border-collapse:
    collapse;

  table-layout:
    auto;
}


.pedido-editor-items-table th {
  padding:
    8px 9px;

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

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

  color:
    var(
      --pedidos-muted
    );

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    850;

  text-align:
    left;

  white-space:
    nowrap;
}


.pedido-editor-items-table td {
  padding:
    8px 9px;

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

  background:
    var(
      --pedidos-surface
    );

  color:
    var(
      --pedidos-text
    );

  font-size:
    10px;

  line-height:
    1.3;

  font-weight:
    650;

  vertical-align:
    middle;
}


.pedido-editor-items-table tbody tr:last-child td {
  border-bottom:
    0;
}


.pedido-editor-items-table tr.is-locked td {
  opacity:
    0.62;

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


.pedido-editor-items-table
.is-number,
.pedido-editor-items-table
.is-money {
  text-align:
    right;
}


.pedido-editor-items-table input,
.pedido-editor-items-table select {
  height:
    31px;

  min-width:
    72px;

  max-width:
    130px;

  padding:
    4px 6px;

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

  border-radius:
    7px;

  outline:
    none;

  background:
    var(
      --pedidos-surface
    );

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

  font-size:
    10px;

  font-weight:
    700;
}


.pedido-editor-items-table input:focus,
.pedido-editor-items-table select:focus {
  border-color:
    var(
      --pedidos-border-strong
    );

  box-shadow:
    0 0 0 2px rgba(
      127,
      127,
      127,
      0.08
    );
}


.pedido-editor-items-table input:disabled,
.pedido-editor-items-table select:disabled {
  opacity:
    0.55;

  cursor:
    not-allowed;
}


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

.pedido-editor-product-cell {
  min-width:
    190px;

  max-width:
    360px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.pedido-editor-product-cell strong {
  max-width:
    100%;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10px;

  font-weight:
    850;

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


.pedido-editor-product-cell small {
  max-width:
    100%;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    8px;

  font-weight:
    650;

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


.pedido-editor-product-cell >
span {
  width:
    fit-content;

  max-width:
    100%;

  padding:
    2px 5px;

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

  border-radius:
    999px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

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

  color:
    var(
      --pedidos-muted
    );

  font-size:
    8px;

  font-weight:
    750;
}


/* =========================================================
   PRICE INPUT
   ========================================================= */

.pedido-editor-price-input {
  min-width:
    110px;

  height:
    31px;

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

  border-radius:
    7px;

  display:
    flex;

  align-items:
    center;

  background:
    var(
      --pedidos-surface
    );

  overflow:
    hidden;
}


.pedido-editor-price-input >
span {
  padding-left:
    7px;

  color:
    var(
      --pedidos-muted
    );

  font-size:
    9px;

  font-weight:
    800;
}


.pedido-editor-price-input input {
  min-width:
    0;

  width:
    100%;

  max-width:
    none;

  height:
    29px;

  border:
    0;

  border-radius:
    0;

  box-shadow:
    none !important;

  text-align:
    right;
}


.pedido-editor-price-input:focus-within {
  border-color:
    var(
      --pedidos-border-strong
    );

  box-shadow:
    0 0 0 2px rgba(
      127,
      127,
      127,
      0.08
    );
}


/* =========================================================
   ITEM LOCK
   ========================================================= */

.pedido-editor-item-lock {
  width:
    30px;

  height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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


.pedido-editor-item-lock svg {
  width:
    14px;

  height:
    14px;
}


/* =========================================================
   EDITOR ITEMS EMPTY
   ========================================================= */

.pedido-editor-items__empty {
  min-height:
    150px;

  padding:
    24px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  text-align:
    center;

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


.pedido-editor-items__empty-icon {
  width:
    38px;

  height:
    38px;

  margin-bottom:
    3px;

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

  border-radius:
    10px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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


.pedido-editor-items__empty-icon svg {
  width:
    18px;

  height:
    18px;
}


.pedido-editor-items__empty strong {
  font-size:
    11px;

  font-weight:
    850;

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


.pedido-editor-items__empty span {
  font-size:
    9px;

  line-height:
    1.4;

  font-weight:
    600;

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


/* =========================================================
   NOTES GRID
   ========================================================= */

.pedido-editor-notes-grid {
  display:
    grid;

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

  gap:
    10px;
}


/* =========================================================
   EDITOR FOOTER
   ========================================================= */

.pedido-editor__footer {
  min-height:
    76px;

  padding:
    10px 14px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  background:
    var(
      --pedidos-surface
    );

  flex:
    0 0 auto;
}


.pedido-editor-summary {
  min-width:
    0;

  flex:
    1;

  display:
    grid;

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

  gap:
    6px;
}


.pedido-editor-summary__item {
  min-width:
    0;

  padding:
    6px 8px;

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

  border-radius:
    8px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;

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


.pedido-editor-summary__item span {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    8px;

  font-weight:
    750;

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


.pedido-editor-summary__item strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10px;

  font-weight:
    850;

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


.pedido-editor-summary__item--total {
  background:
    var(
      --pedidos-text-strong
    );

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


.pedido-editor-summary__item--total span {
  color:
    rgba(
      255,
      255,
      255,
      0.7
    );
}


.pedido-editor-summary__item--total strong {
  color:
    #ffffff;
}


.pedido-editor__footer-actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;
}


/* =========================================================
   EDITOR LOADING
   ========================================================= */

.pedido-editor-loading {
  display:
    grid;

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

  gap:
    10px;
}


.pedido-editor-loading__card {
  min-height:
    110px;

  padding:
    14px;

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

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

  display:
    flex;

  flex-direction:
    column;

  gap:
    9px;

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


.pedido-editor-loading__card
.pedidos-skeleton:first-child {
  width:
    32%;
}


.pedido-editor-loading__card
.pedidos-skeleton:last-child {
  width:
    75%;
}


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

.is-spin {
  animation:
    pedidosSpin
    0.8s
    linear
    infinite;
}


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


/* =========================================================
   SCROLLBAR
   ========================================================= */

.pedido-drawer__body::-webkit-scrollbar,
.pedido-editor__body::-webkit-scrollbar,
.pedido-client-picker__results::-webkit-scrollbar,
.pedido-product-picker__results::-webkit-scrollbar,
.pedidos-popover::-webkit-scrollbar,
.pedidos-table-scroll::-webkit-scrollbar,
.pedido-detail-items-scroll::-webkit-scrollbar,
.pedido-editor-items__scroll::-webkit-scrollbar {
  width:
    8px;

  height:
    8px;
}


.pedido-drawer__body::-webkit-scrollbar-track,
.pedido-editor__body::-webkit-scrollbar-track,
.pedido-client-picker__results::-webkit-scrollbar-track,
.pedido-product-picker__results::-webkit-scrollbar-track,
.pedidos-popover::-webkit-scrollbar-track,
.pedidos-table-scroll::-webkit-scrollbar-track,
.pedido-detail-items-scroll::-webkit-scrollbar-track,
.pedido-editor-items__scroll::-webkit-scrollbar-track {
  background:
    transparent;
}


.pedido-drawer__body::-webkit-scrollbar-thumb,
.pedido-editor__body::-webkit-scrollbar-thumb,
.pedido-client-picker__results::-webkit-scrollbar-thumb,
.pedido-product-picker__results::-webkit-scrollbar-thumb,
.pedidos-popover::-webkit-scrollbar-thumb,
.pedidos-table-scroll::-webkit-scrollbar-thumb,
.pedido-detail-items-scroll::-webkit-scrollbar-thumb,
.pedido-editor-items__scroll::-webkit-scrollbar-thumb {
  border:
    2px solid transparent;

  border-radius:
    999px;

  background:
    rgba(
      127,
      127,
      127,
      0.35
    );

  background-clip:
    padding-box;
}


/* =========================================================
   FIN PARTE 2 DE 3
   ========================================================= */
   /* =========================================================
   UBICACIÓN:
   frontend/src/pages/facturacion-cobranzas/pedidos/pedidos.css

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


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

html[data-theme="dark"]
#pedidosPage,
body[data-theme="dark"]
#pedidosPage,
html.dark
#pedidosPage,
body.dark
#pedidosPage {
  --pedidos-bg:
    #050505;

  --pedidos-surface:
    #0a0a0a;

  --pedidos-surface-2:
    #101010;

  --pedidos-surface-3:
    #161616;

  --pedidos-border:
    #232323;

  --pedidos-border-strong:
    #343434;

  --pedidos-text:
    #d8d8d8;

  --pedidos-text-strong:
    #ffffff;

  --pedidos-muted:
    #a0a0a0;

  --pedidos-muted-2:
    #747474;

  --pedidos-primary:
    #ffffff;

  --pedidos-primary-contrast:
    #000000;

  --pedidos-shadow-sm:
    0 1px 2px rgba(
      0,
      0,
      0,
      0.48
    );

  --pedidos-shadow-md:
    0 14px 34px rgba(
      0,
      0,
      0,
      0.62
    );

  --pedidos-shadow-lg:
    0 28px 80px rgba(
      0,
      0,
      0,
      0.72
    );
}


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

html[data-theme="dark"]
.pedidos-panel,
body[data-theme="dark"]
.pedidos-panel,
html.dark
.pedidos-panel,
body.dark
.pedidos-panel {
  background:
    #0a0a0a;
}


html[data-theme="dark"]
.pedidos-button--primary,
body[data-theme="dark"]
.pedidos-button--primary,
html.dark
.pedidos-button--primary,
body.dark
.pedidos-button--primary {
  background:
    #ffffff;

  border-color:
    #ffffff;

  color:
    #000000;
}


html[data-theme="dark"]
.pedidos-button--secondary,
body[data-theme="dark"]
.pedidos-button--secondary,
html.dark
.pedidos-button--secondary,
body.dark
.pedidos-button--secondary {
  background:
    #0d0d0d;

  color:
    #f2f2f2;

  border-color:
    #292929;
}


html[data-theme="dark"]
.pedidos-button--secondary:hover:not(:disabled),
body[data-theme="dark"]
.pedidos-button--secondary:hover:not(:disabled),
html.dark
.pedidos-button--secondary:hover:not(:disabled),
body.dark
.pedidos-button--secondary:hover:not(:disabled) {
  background:
    #151515;

  border-color:
    #3b3b3b;
}


html[data-theme="dark"]
.pedidos-toolbar__search input,
body[data-theme="dark"]
.pedidos-toolbar__search input,
html.dark
.pedidos-toolbar__search input,
body.dark
.pedidos-toolbar__search input {
  background:
    #101010;

  border-color:
    #242424;

  color:
    #ffffff;
}


html[data-theme="dark"]
.pedidos-toolbar__search input:focus,
body[data-theme="dark"]
.pedidos-toolbar__search input:focus,
html.dark
.pedidos-toolbar__search input:focus,
body.dark
.pedidos-toolbar__search input:focus {
  background:
    #0c0c0c;

  border-color:
    #3d3d3d;

  box-shadow:
    0 0 0 3px rgba(
      255,
      255,
      255,
      0.055
    );
}


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

html[data-theme="dark"]
.pedidos-table,
body[data-theme="dark"]
.pedidos-table,
html.dark
.pedidos-table,
body.dark
.pedidos-table {
  background:
    #0a0a0a;
}


html[data-theme="dark"]
.pedidos-table__th,
body[data-theme="dark"]
.pedidos-table__th,
html.dark
.pedidos-table__th,
body.dark
.pedidos-table__th {
  background:
    #101010;

  color:
    #a7a7a7;

  border-color:
    #232323;
}


html[data-theme="dark"]
.pedidos-table__td,
body[data-theme="dark"]
.pedidos-table__td,
html.dark
.pedidos-table__td,
body.dark
.pedidos-table__td {
  background:
    #0a0a0a;

  color:
    #d9d9d9;

  border-color:
    #202020;
}


html[data-theme="dark"]
.pedidos-table__row:hover
.pedidos-table__td,
body[data-theme="dark"]
.pedidos-table__row:hover
.pedidos-table__td,
html.dark
.pedidos-table__row:hover
.pedidos-table__td,
body.dark
.pedidos-table__row:hover
.pedidos-table__td {
  background:
    #101010;
}


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

html[data-theme="dark"]
.pedidos-popover,
body[data-theme="dark"]
.pedidos-popover,
html.dark
.pedidos-popover,
body.dark
.pedidos-popover,
html[data-theme="dark"]
.pedidos-row-menu,
body[data-theme="dark"]
.pedidos-row-menu,
html.dark
.pedidos-row-menu,
body.dark
.pedidos-row-menu {
  background:
    #0b0b0b;

  border-color:
    #292929;

  box-shadow:
    0 18px 48px rgba(
      0,
      0,
      0,
      0.68
    );
}


html[data-theme="dark"]
.pedidos-column-option:hover,
body[data-theme="dark"]
.pedidos-column-option:hover,
html.dark
.pedidos-column-option:hover,
body.dark
.pedidos-column-option:hover,
html[data-theme="dark"]
.pedidos-density-option:hover,
body[data-theme="dark"]
.pedidos-density-option:hover,
html.dark
.pedidos-density-option:hover,
body.dark
.pedidos-density-option:hover,
html[data-theme="dark"]
.pedidos-density-option.is-active,
body[data-theme="dark"]
.pedidos-density-option.is-active,
html.dark
.pedidos-density-option.is-active,
body.dark
.pedidos-density-option.is-active,
html[data-theme="dark"]
.pedidos-row-menu__item:hover,
body[data-theme="dark"]
.pedidos-row-menu__item:hover,
html.dark
.pedidos-row-menu__item:hover,
body.dark
.pedidos-row-menu__item:hover {
  background:
    #151515;
}


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

html[data-theme="dark"]
.pedidos-field input,
html[data-theme="dark"]
.pedidos-field select,
html[data-theme="dark"]
.pedidos-field textarea,
body[data-theme="dark"]
.pedidos-field input,
body[data-theme="dark"]
.pedidos-field select,
body[data-theme="dark"]
.pedidos-field textarea,
html.dark
.pedidos-field input,
html.dark
.pedidos-field select,
html.dark
.pedidos-field textarea,
body.dark
.pedidos-field input,
body.dark
.pedidos-field select,
body.dark
.pedidos-field textarea {
  background:
    #0d0d0d;

  border-color:
    #292929;

  color:
    #ffffff;
}


html[data-theme="dark"]
.pedidos-field input:focus,
html[data-theme="dark"]
.pedidos-field select:focus,
html[data-theme="dark"]
.pedidos-field textarea:focus,
body[data-theme="dark"]
.pedidos-field input:focus,
body[data-theme="dark"]
.pedidos-field select:focus,
body[data-theme="dark"]
.pedidos-field textarea:focus,
html.dark
.pedidos-field input:focus,
html.dark
.pedidos-field select:focus,
html.dark
.pedidos-field textarea:focus,
body.dark
.pedidos-field input:focus,
body.dark
.pedidos-field select:focus,
body.dark
.pedidos-field textarea:focus {
  border-color:
    #444444;

  box-shadow:
    0 0 0 3px rgba(
      255,
      255,
      255,
      0.055
    );
}


html[data-theme="dark"]
.pedidos-field input:disabled,
html[data-theme="dark"]
.pedidos-field select:disabled,
html[data-theme="dark"]
.pedidos-field textarea:disabled,
body[data-theme="dark"]
.pedidos-field input:disabled,
body[data-theme="dark"]
.pedidos-field select:disabled,
body[data-theme="dark"]
.pedidos-field textarea:disabled,
html.dark
.pedidos-field input:disabled,
html.dark
.pedidos-field select:disabled,
html.dark
.pedidos-field textarea:disabled,
body.dark
.pedidos-field input:disabled,
body.dark
.pedidos-field select:disabled,
body.dark
.pedidos-field textarea:disabled {
  background:
    #131313;

  color:
    #777777;
}


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

html[data-theme="dark"]
.pedido-drawer,
body[data-theme="dark"]
.pedido-drawer,
html.dark
.pedido-drawer,
body.dark
.pedido-drawer {
  background:
    #090909;

  border-color:
    #252525;

  box-shadow:
    -30px 0 70px rgba(
      0,
      0,
      0,
      0.74
    );
}


html[data-theme="dark"]
.pedido-drawer__header,
html[data-theme="dark"]
.pedido-drawer__footer,
body[data-theme="dark"]
.pedido-drawer__header,
body[data-theme="dark"]
.pedido-drawer__footer,
html.dark
.pedido-drawer__header,
html.dark
.pedido-drawer__footer,
body.dark
.pedido-drawer__header,
body.dark
.pedido-drawer__footer {
  background:
    #090909;

  border-color:
    #232323;
}


html[data-theme="dark"]
.pedido-drawer__body,
body[data-theme="dark"]
.pedido-drawer__body,
html.dark
.pedido-drawer__body,
body.dark
.pedido-drawer__body {
  background:
    #070707;
}


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

html[data-theme="dark"]
.pedido-detail-section,
body[data-theme="dark"]
.pedido-detail-section,
html.dark
.pedido-detail-section,
body.dark
.pedido-detail-section,
html[data-theme="dark"]
.pedido-detail-summary__card,
body[data-theme="dark"]
.pedido-detail-summary__card,
html.dark
.pedido-detail-summary__card,
body.dark
.pedido-detail-summary__card {
  background:
    #0d0d0d;

  border-color:
    #242424;
}


html[data-theme="dark"]
.pedido-detail-info,
body[data-theme="dark"]
.pedido-detail-info,
html.dark
.pedido-detail-info,
body.dark
.pedido-detail-info,
html[data-theme="dark"]
.pedido-detail-note,
body[data-theme="dark"]
.pedido-detail-note,
html.dark
.pedido-detail-note,
body.dark
.pedido-detail-note {
  background:
    #111111;

  border-color:
    #262626;
}


html[data-theme="dark"]
.pedido-detail-items th,
body[data-theme="dark"]
.pedido-detail-items th,
html.dark
.pedido-detail-items th,
body.dark
.pedido-detail-items th {
  background:
    #111111;

  border-color:
    #242424;

  color:
    #999999;
}


html[data-theme="dark"]
.pedido-detail-items td,
body[data-theme="dark"]
.pedido-detail-items td,
html.dark
.pedido-detail-items td,
body.dark
.pedido-detail-items td {
  border-color:
    #202020;

  color:
    #d8d8d8;
}


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

html[data-theme="dark"]
.pedido-editor,
body[data-theme="dark"]
.pedido-editor,
html.dark
.pedido-editor,
body.dark
.pedido-editor {
  background:
    #090909;

  border-color:
    #262626;

  box-shadow:
    0 30px 90px rgba(
      0,
      0,
      0,
      0.82
    );
}


html[data-theme="dark"]
.pedido-editor__header,
html[data-theme="dark"]
.pedido-editor__footer,
body[data-theme="dark"]
.pedido-editor__header,
body[data-theme="dark"]
.pedido-editor__footer,
html.dark
.pedido-editor__header,
html.dark
.pedido-editor__footer,
body.dark
.pedido-editor__header,
body.dark
.pedido-editor__footer {
  background:
    #090909;

  border-color:
    #242424;
}


html[data-theme="dark"]
.pedido-editor__body,
body[data-theme="dark"]
.pedido-editor__body,
html.dark
.pedido-editor__body,
body.dark
.pedido-editor__body {
  background:
    #050505;
}


html[data-theme="dark"]
.pedido-editor-section,
body[data-theme="dark"]
.pedido-editor-section,
html.dark
.pedido-editor-section,
body.dark
.pedido-editor-section {
  background:
    #0c0c0c;

  border-color:
    #232323;
}


/* =========================================================
   DARK CLIENT PICKER
   ========================================================= */

html[data-theme="dark"]
.pedido-client-picker__search input,
body[data-theme="dark"]
.pedido-client-picker__search input,
html.dark
.pedido-client-picker__search input,
body.dark
.pedido-client-picker__search input,
html[data-theme="dark"]
.pedido-product-picker__search input,
body[data-theme="dark"]
.pedido-product-picker__search input,
html.dark
.pedido-product-picker__search input,
body.dark
.pedido-product-picker__search input {
  background:
    #0d0d0d;

  border-color:
    #292929;

  color:
    #ffffff;
}


html[data-theme="dark"]
.pedido-client-picker__results,
body[data-theme="dark"]
.pedido-client-picker__results,
html.dark
.pedido-client-picker__results,
body.dark
.pedido-client-picker__results,
html[data-theme="dark"]
.pedido-product-picker,
body[data-theme="dark"]
.pedido-product-picker,
html.dark
.pedido-product-picker,
body.dark
.pedido-product-picker {
  background:
    #0b0b0b;

  border-color:
    #292929;
}


html[data-theme="dark"]
.pedido-client-result,
body[data-theme="dark"]
.pedido-client-result,
html.dark
.pedido-client-result,
body.dark
.pedido-client-result,
html[data-theme="dark"]
.pedido-product-result,
body[data-theme="dark"]
.pedido-product-result,
html.dark
.pedido-product-result,
body.dark
.pedido-product-result {
  background:
    #0b0b0b;

  border-color:
    #232323;
}


html[data-theme="dark"]
.pedido-client-result:hover,
body[data-theme="dark"]
.pedido-client-result:hover,
html.dark
.pedido-client-result:hover,
body.dark
.pedido-client-result:hover,
html[data-theme="dark"]
.pedido-product-result:hover,
body[data-theme="dark"]
.pedido-product-result:hover,
html.dark
.pedido-product-result:hover,
body.dark
.pedido-product-result:hover {
  background:
    #121212;
}


/* =========================================================
   DARK SELECTED CLIENT
   ========================================================= */

html[data-theme="dark"]
.pedido-selected-client,
body[data-theme="dark"]
.pedido-selected-client,
html.dark
.pedido-selected-client,
body.dark
.pedido-selected-client {
  background:
    #111111;

  border-color:
    #292929;
}


html[data-theme="dark"]
.pedido-selected-client__avatar,
body[data-theme="dark"]
.pedido-selected-client__avatar,
html.dark
.pedido-selected-client__avatar,
body.dark
.pedido-selected-client__avatar,
html[data-theme="dark"]
.pedido-selected-client__financial > div,
body[data-theme="dark"]
.pedido-selected-client__financial > div,
html.dark
.pedido-selected-client__financial > div,
body.dark
.pedido-selected-client__financial > div {
  background:
    #0b0b0b;

  border-color:
    #292929;
}


/* =========================================================
   DARK PRODUCT PICKER
   ========================================================= */

html[data-theme="dark"]
.pedido-product-picker__search,
body[data-theme="dark"]
.pedido-product-picker__search,
html.dark
.pedido-product-picker__search,
body.dark
.pedido-product-picker__search,
html[data-theme="dark"]
.pedido-product-picker__pagination,
body[data-theme="dark"]
.pedido-product-picker__pagination,
html.dark
.pedido-product-picker__pagination,
body.dark
.pedido-product-picker__pagination {
  background:
    #101010;

  border-color:
    #242424;
}


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

html[data-theme="dark"]
.pedido-editor-items,
body[data-theme="dark"]
.pedido-editor-items,
html.dark
.pedido-editor-items,
body.dark
.pedido-editor-items {
  background:
    #0a0a0a;

  border-color:
    #252525;
}


html[data-theme="dark"]
.pedido-editor-items-table th,
body[data-theme="dark"]
.pedido-editor-items-table th,
html.dark
.pedido-editor-items-table th,
body.dark
.pedido-editor-items-table th {
  background:
    #111111;

  color:
    #989898;

  border-color:
    #242424;
}


html[data-theme="dark"]
.pedido-editor-items-table td,
body[data-theme="dark"]
.pedido-editor-items-table td,
html.dark
.pedido-editor-items-table td,
body.dark
.pedido-editor-items-table td {
  background:
    #0a0a0a;

  border-color:
    #202020;

  color:
    #d8d8d8;
}


html[data-theme="dark"]
.pedido-editor-items-table tr.is-locked td,
body[data-theme="dark"]
.pedido-editor-items-table tr.is-locked td,
html.dark
.pedido-editor-items-table tr.is-locked td,
body.dark
.pedido-editor-items-table tr.is-locked td {
  background:
    #101010;
}


html[data-theme="dark"]
.pedido-editor-items-table input,
html[data-theme="dark"]
.pedido-editor-items-table select,
body[data-theme="dark"]
.pedido-editor-items-table input,
body[data-theme="dark"]
.pedido-editor-items-table select,
html.dark
.pedido-editor-items-table input,
html.dark
.pedido-editor-items-table select,
body.dark
.pedido-editor-items-table input,
body.dark
.pedido-editor-items-table select {
  background:
    #0d0d0d;

  border-color:
    #2b2b2b;

  color:
    #ffffff;
}


html[data-theme="dark"]
.pedido-editor-price-input,
body[data-theme="dark"]
.pedido-editor-price-input,
html.dark
.pedido-editor-price-input,
body.dark
.pedido-editor-price-input {
  background:
    #0d0d0d;

  border-color:
    #2b2b2b;
}


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

html[data-theme="dark"]
.pedido-editor-summary__item,
body[data-theme="dark"]
.pedido-editor-summary__item,
html.dark
.pedido-editor-summary__item,
body.dark
.pedido-editor-summary__item {
  background:
    #111111;

  border-color:
    #262626;
}


html[data-theme="dark"]
.pedido-editor-summary__item--total,
body[data-theme="dark"]
.pedido-editor-summary__item--total,
html.dark
.pedido-editor-summary__item--total,
body.dark
.pedido-editor-summary__item--total {
  background:
    #ffffff;

  border-color:
    #ffffff;
}


html[data-theme="dark"]
.pedido-editor-summary__item--total span,
body[data-theme="dark"]
.pedido-editor-summary__item--total span,
html.dark
.pedido-editor-summary__item--total span,
body.dark
.pedido-editor-summary__item--total span {
  color:
    #5e5e5e;
}


html[data-theme="dark"]
.pedido-editor-summary__item--total strong,
body[data-theme="dark"]
.pedido-editor-summary__item--total strong,
html.dark
.pedido-editor-summary__item--total strong,
body.dark
.pedido-editor-summary__item--total strong {
  color:
    #000000;
}


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

html[data-theme="dark"]
.pedidos-skeleton,
body[data-theme="dark"]
.pedidos-skeleton,
html.dark
.pedidos-skeleton,
body.dark
.pedidos-skeleton {
  background:
    #181818;
}


html[data-theme="dark"]
.pedidos-skeleton::after,
body[data-theme="dark"]
.pedidos-skeleton::after,
html.dark
.pedidos-skeleton::after,
body.dark
.pedidos-skeleton::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        255,
        255,
        0.055
      ),
      transparent
    );
}


/* =========================================================
   RESPONSIVE · 1400
   ========================================================= */

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


  .pedido-editor-commercial-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .pedido-editor-summary {
    grid-template-columns:
      repeat(
        3,
        minmax(
          100px,
          1fr
        )
      );
  }
}


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

@media (
  max-width:
    1180px
) {
  .pedidos-page__title-row {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .pedidos-page__actions {
    justify-content:
      flex-start;
  }


  .pedidos-filters__grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


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


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


  .pedido-selected-client__financial {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .pedido-editor-commercial-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


/* =========================================================
   RESPONSIVE · 960
   ========================================================= */

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


  .pedidos-toolbar {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .pedidos-toolbar__search {
    flex:
      none;

    width:
      100%;

    max-width:
      none;

    min-width:
      0;
  }


  .pedidos-toolbar__actions {
    justify-content:
      flex-start;

    flex-wrap:
      wrap;
  }


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


  .pedido-drawer {
    width:
      min(
        760px,
        calc(
          100vw -
          18px
        )
      );
  }


  .pedido-editor {
    inset:
      10px;
  }


  .pedido-product-result {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      135px
      86px;
  }


  .pedido-editor__footer {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .pedido-editor-summary {
    width:
      100%;

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


  .pedido-editor__footer-actions {
    width:
      100%;
  }


  .pedido-editor__footer-actions
  .pedidos-button {
    flex:
      1;
  }
}


/* =========================================================
   RESPONSIVE · 760
   ========================================================= */

@media (
  max-width:
    760px
) {
  #pedidosPage {
    gap:
      10px;
  }


  .pedidos-page__title {
    font-size:
      23px;
  }


  .pedidos-page__subtitle {
    font-size:
      11px;
  }


  .pedidos-page__actions {
    display:
      grid;

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

    width:
      100%;
  }


  .pedidos-page__actions
  .pedidos-button {
    width:
      100%;
  }


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

    gap:
      7px;
  }


  .pedidos-metric-card {
    min-height:
      82px;

    padding:
      10px;
  }


  .pedidos-metric-card__value {
    font-size:
      17px;
  }


  .pedidos-panel {
    border-radius:
      12px;
  }


  .pedidos-toolbar__actions {
    display:
      grid;

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

    width:
      100%;
  }


  .pedidos-toolbar__actions >
  .pedidos-button,
  .pedidos-toolbar-menu,
  .pedidos-toolbar-menu >
  .pedidos-button {
    width:
      100%;
  }


  .pedidos-popover {
    right:
      auto;

    left:
      0;

    width:
      min(
        300px,
        calc(
          100vw -
          30px
        )
      );
  }


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


  .pedidos-filters__footer {
    align-items:
      stretch;

    flex-direction:
      column-reverse;
  }


  .pedidos-filters__footer
  .pedidos-button {
    width:
      100%;
  }


  .pedidos-table-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .pedidos-pagination {
    align-items:
      stretch;

    flex-wrap:
      wrap;

    justify-content:
      center;
  }


  .pedidos-pagination__pages {
    order:
      -1;

    width:
      100%;

    overflow-x:
      auto;

    justify-content:
      flex-start;

    padding-bottom:
      2px;
  }


  .pedidos-pagination__button--nav {
    flex:
      1;

    min-width:
      0;
  }


  .pedido-drawer {
    width:
      100vw;

    max-width:
      none;

    border-left:
      0;
  }


  .pedido-drawer__header {
    padding:
      12px;
  }


  .pedido-drawer__body {
    padding:
      10px;
  }


  .pedido-drawer__footer {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .pedido-drawer__footer-actions {
    width:
      100%;
  }


  .pedido-drawer__footer-actions
  .pedidos-button {
    flex:
      1;
  }


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


  .pedido-detail-info-grid {
    grid-template-columns:
      1fr;
  }


  .pedido-detail-section__header {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .pedido-bulk-actions {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .pedido-bulk-actions__buttons {
    width:
      100%;
  }


  .pedido-bulk-actions__buttons
  .pedidos-button {
    flex:
      1;
  }


  .pedido-editor {
    inset:
      0;

    max-width:
      none;

    border:
      0;

    border-radius:
      0;
  }


  .pedido-editor__header {
    min-height:
      68px;

    padding:
      11px 12px;
  }


  .pedido-editor__title-row h2 {
    font-size:
      18px;
  }


  .pedido-editor__body {
    padding:
      9px;
  }


  .pedido-editor-section {
    padding:
      10px;
  }


  .pedido-selected-client {
    grid-template-columns:
      34px
      minmax(
        0,
        1fr
      );

    padding:
      9px;
  }


  .pedido-selected-client__avatar {
    width:
      34px;

    height:
      34px;
  }


  .pedido-selected-client__top {
    flex-direction:
      column;
  }


  .pedido-selected-client__financial {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .pedido-editor-commercial-grid {
    grid-template-columns:
      1fr;
  }


  .pedido-editor-section__header {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .pedido-editor-document-actions {
    justify-content:
      flex-start;
  }


  .pedido-product-result {
    grid-template-columns:
      minmax(
        0,
        1fr
      );

    gap:
      7px;
  }


  .pedido-product-result__price {
    align-items:
      flex-start;

    text-align:
      left;
  }


  .pedido-product-result
  .pedidos-button {
    width:
      100%;
  }


  .pedido-editor-notes-grid {
    grid-template-columns:
      1fr;
  }


  .pedido-editor__footer {
    padding:
      8px;
  }


  .pedido-editor-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .pedido-editor__footer-actions {
    display:
      grid;

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


/* =========================================================
   RESPONSIVE · 520
   ========================================================= */

@media (
  max-width:
    520px
) {
  .pedidos-page__actions {
    grid-template-columns:
      1fr;
  }


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


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


  .pedidos-metric-card {
    min-height:
      72px;
  }


  .pedidos-metric-card__icon {
    width:
      31px;

    height:
      31px;

    flex-basis:
      31px;
  }


  .pedidos-metric-card__value {
    font-size:
      16px;
  }


  .pedidos-notification {
    top:
      12px;

    right:
      12px;

    left:
      12px;

    width:
      auto;
  }


  .pedido-drawer__header {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .pedido-drawer__header-actions {
    justify-content:
      space-between;
  }


  .pedido-detail-summary {
    grid-template-columns:
      1fr;
  }


  .pedido-selected-client__financial {
    grid-template-columns:
      1fr;
  }


  .pedido-editor-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .pedido-editor-summary__item--total {
    grid-column:
      1 /
      -1;
  }


  .pedido-editor__footer-actions {
    grid-template-columns:
      1fr;
  }


  .pedido-editor__footer-actions
  .pedidos-button {
    width:
      100%;
  }


  .pedido-product-picker__pagination {
    justify-content:
      space-between;
  }


  .pedido-product-picker__pagination >
  span {
    min-width:
      0;

    flex:
      1;
  }


  .pedido-totals {
    width:
      100%;
  }
}


/* =========================================================
   VERY SMALL
   ========================================================= */

@media (
  max-width:
    380px
) {
  .pedidos-page__title {
    font-size:
      21px;
  }


  .pedidos-toolbar,
  .pedidos-filters {
    padding-left:
      8px;

    padding-right:
      8px;
  }


  .pedido-editor-summary {
    grid-template-columns:
      1fr;
  }


  .pedido-editor-summary__item--total {
    grid-column:
      auto;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {
  #pedidosPage *,
  #pedidosPage *::before,
  #pedidosPage *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }


  .pedido-drawer,
  .pedido-editor,
  .pedido-drawer-overlay,
  .pedido-editor-overlay {
    transition:
      none !important;
  }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {
  .pedidos-page__actions,
  .pedidos-toolbar,
  .pedidos-filters,
  .pedidos-pagination,
  .pedidos-row-action,
  .pedidos-row-menu,
  .pedidos-notification,
  .pedido-drawer-overlay,
  .pedido-drawer,
  .pedido-editor-overlay,
  .pedido-editor {
    display:
      none !important;
  }


  #pedidosPage {
    display:
      block;

    color:
      #000000;
  }


  .pedidos-panel {
    border:
      0;

    box-shadow:
      none;
  }


  .pedidos-table-container,
  .pedidos-table-scroll {
    overflow:
      visible;
  }


  .pedidos-table {
    min-width:
      0;

    font-size:
      9px;
  }


  .pedidos-table__th,
  .pedidos-table__td {
    padding:
      4px;

    color:
      #000000;

    background:
      #ffffff;

    border-color:
      #d7d7d7;
  }
}


/* =========================================================
   FIN DEL ARCHIVO
   frontend/src/pages/facturacion-cobranzas/pedidos/pedidos.css
   ========================================================= */
   /* =========================================================
   UBICACIÓN:
   frontend/src/pages/facturacion-cobranzas/pedidos/pedidos.css

   AGREGAR AL FINAL
   ========================================================= */

.pedido-status-control {
  min-width:
    160px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.pedido-status-control__label {
  padding-left:
    2px;

  font-size:
    8px;

  line-height:
    1;

  font-weight:
    850;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;

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


.pedido-status-control__select {
  width:
    100%;

  min-width:
    160px;

  height:
    32px;

  padding:
    5px 30px 5px 9px;

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

  border-radius:
    8px;

  outline:
    none;

  background:
    var(
      --pedidos-surface
    );

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

  font-size:
    10px;

  line-height:
    1;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    border-color
      var(
        --pedidos-transition
      ),
    background
      var(
        --pedidos-transition
      ),
    box-shadow
      var(
        --pedidos-transition
      );
}


.pedido-status-control__select:hover {
  border-color:
    var(
      --pedidos-border-strong
    );

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


.pedido-status-control__select:focus {
  border-color:
    var(
      --pedidos-border-strong
    );

  box-shadow:
    0 0 0 3px rgba(
      127,
      127,
      127,
      0.08
    );
}


.pedido-status-control__select:disabled {
  opacity:
    0.55;

  cursor:
    wait;
}


html[data-theme="dark"]
.pedido-status-control__select,
body[data-theme="dark"]
.pedido-status-control__select,
html.dark
.pedido-status-control__select,
body.dark
.pedido-status-control__select {
  background:
    #0d0d0d;

  color:
    #f5f5f5;

  border-color:
    #2a2a2a;
}


html[data-theme="dark"]
.pedido-status-control__select:hover,
body[data-theme="dark"]
.pedido-status-control__select:hover,
html.dark
.pedido-status-control__select:hover,
body.dark
.pedido-status-control__select:hover {
  background:
    #151515;

  border-color:
    #3a3a3a;
}


@media (
  max-width:
    720px
) {
  .pedido-drawer__header-actions {
    flex-wrap:
      wrap;
  }


  .pedido-status-control {
    width:
      100%;

    min-width:
      0;
  }


  .pedido-status-control__select {
    width:
      100%;

    min-width:
      0;
  }
}/* =========================================================
   UBICACIÓN:
   frontend/src/pages/facturacion-cobranzas/pedidos/pedidos.css

   AGREGAR AL FINAL
   ========================================================= */


/* =========================================================
   FIX TOPBAR
   DRAWER + EDITOR SIEMPRE DEBAJO DEL TOPBAR
   ========================================================= */

.pedido-drawer-overlay {
  top:
    52px !important;

  right:
    0 !important;

  bottom:
    0 !important;

  left:
    0 !important;

  height:
    calc(
      100dvh -
      52px
    ) !important;
}


.pedido-drawer {
  top:
    52px !important;

  right:
    0 !important;

  bottom:
    0 !important;

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

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


.pedido-editor-overlay {
  top:
    52px !important;

  right:
    0 !important;

  bottom:
    0 !important;

  left:
    0 !important;

  height:
    calc(
      100dvh -
      52px
    ) !important;
}


.pedido-editor {
  top:
    64px !important;

  right:
    14px !important;

  bottom:
    14px !important;

  left:
    14px !important;

  height:
    auto !important;

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


.pedido-drawer__body,
.pedido-editor__body {
  min-height:
    0;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;
}


/* =========================================================
   TOPBAR SIEMPRE POR ENCIMA
   ========================================================= */

.app-topbar,
.topbar,
#topbar {
  position:
    relative;

  z-index:
    500 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
  max-width:
    820px
) {
  .pedido-drawer-overlay,
  .pedido-editor-overlay {
    top:
      48px !important;

    height:
      calc(
        100dvh -
        48px
      ) !important;
  }


  .pedido-drawer {
    top:
      48px !important;

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

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


  .pedido-editor {
    top:
      56px !important;

    right:
      8px !important;

    bottom:
      8px !important;

    left:
      8px !important;

    max-height:
      calc(
        100dvh -
        64px
      ) !important;
  }
}/* =========================================================
   WIRTZ HUB · FACTURACIÓN Y COBRANZAS · PEDIDOS

   REDISEÑO UI PREMIUM / MINIMAL
   UBICACIÓN:
   frontend/src/pages/facturacion-cobranzas/pedidos/pedidos.css

   AGREGAR AL FINAL DEL ARCHIVO

   OBJETIVOS:
   - Minimalista
   - Premium
   - Elegante
   - Bordes definidos
   - Divisiones visibles
   - Tipografía firme
   - Responsive real
   - Animaciones rápidas
   - Sin glow
   - Dark mode negro real
   ========================================================= */


/* =========================================================
   DESIGN TOKENS
   ========================================================= */

#pedidosPage {
  --pedidos-bg:
    #f4f5f7;

  --pedidos-surface:
    #ffffff;

  --pedidos-surface-2:
    #f8f9fa;

  --pedidos-surface-3:
    #f1f3f5;

  --pedidos-surface-4:
    #e9ecef;

  --pedidos-border:
    #d6d9de;

  --pedidos-border-strong:
    #bfc4cb;

  --pedidos-border-extra:
    #aeb4bd;

  --pedidos-text:
    #1f2328;

  --pedidos-text-strong:
    #090b0e;

  --pedidos-muted:
    #626973;

  --pedidos-muted-2:
    #7b838e;

  --pedidos-primary:
    #111318;

  --pedidos-primary-hover:
    #262a31;

  --pedidos-primary-contrast:
    #ffffff;

  --pedidos-danger:
    #c62828;

  --pedidos-warning:
    #a85300;

  --pedidos-success:
    #087443;

  --pedidos-info:
    #175cc5;

  --pedidos-radius-xs:
    5px;

  --pedidos-radius-sm:
    7px;

  --pedidos-radius-md:
    9px;

  --pedidos-radius-lg:
    11px;

  --pedidos-radius-xl:
    13px;

  --pedidos-shadow-sm:
    0 1px 2px rgba(
      0,
      0,
      0,
      0.035
    );

  --pedidos-shadow-md:
    0 10px 24px rgba(
      0,
      0,
      0,
      0.08
    );

  --pedidos-shadow-lg:
    0 18px 44px rgba(
      0,
      0,
      0,
      0.13
    );

  --pedidos-transition-fast:
    110ms cubic-bezier(
      0.2,
      0,
      0,
      1
    );

  --pedidos-transition:
    145ms cubic-bezier(
      0.2,
      0,
      0,
      1
    );

  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    16px;

  color:
    var(
      --pedidos-text
    );

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

  font-size:
    13px;
}


/* =========================================================
   BOX SIZING
   ========================================================= */

#pedidosPage,
#pedidosPage *,
#pedidosPage *::before,
#pedidosPage *::after {
  box-sizing:
    border-box;
}


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

.pedidos-page__header {
  width:
    100%;

  min-width:
    0;

  padding:
    4px 2px 2px;
}


.pedidos-page__heading {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.pedidos-page__eyebrow {
  font-size:
    10px;

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;

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


.pedidos-page__title-row {
  width:
    100%;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    24px;
}


.pedidos-page__title {
  margin:
    0;

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

  font-size:
    clamp(
      25px,
      2vw,
      31px
    );

  line-height:
    1.05;

  font-weight:
    850;

  letter-spacing:
    -0.04em;
}


.pedidos-page__subtitle {
  margin:
    7px 0 0;

  max-width:
    720px;

  color:
    var(
      --pedidos-muted
    );

  font-size:
    12px;

  line-height:
    1.5;

  font-weight:
    650;
}


.pedidos-page__actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;
}


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

.pedidos-button {
  min-height:
    36px;

  padding:
    7px 12px;

  border:
    1px solid transparent;

  border-radius:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

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

  background:
    transparent;

  font-size:
    11px;

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    -0.005em;

  white-space:
    nowrap;

  cursor:
    pointer;

  box-shadow:
    none;

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


.pedidos-button svg {
  width:
    15px;

  height:
    15px;

  stroke-width:
    2;
}


.pedidos-button:hover:not(:disabled) {
  transform:
    translateY(
      -1px
    );
}


.pedidos-button:active:not(:disabled) {
  transform:
    translateY(
      0
    );

  transition-duration:
    60ms;
}


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

  outline-offset:
    2px;

  box-shadow:
    none;
}


.pedidos-button--primary {
  border-color:
    var(
      --pedidos-primary
    );

  background:
    var(
      --pedidos-primary
    );

  color:
    var(
      --pedidos-primary-contrast
    );

  box-shadow:
    none;
}


.pedidos-button--primary:hover:not(:disabled) {
  border-color:
    var(
      --pedidos-primary-hover
    );

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

  filter:
    none;
}


.pedidos-button--secondary {
  border-color:
    var(
      --pedidos-border-strong
    );

  background:
    var(
      --pedidos-surface
    );

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

  box-shadow:
    none;
}


.pedidos-button--secondary:hover:not(:disabled) {
  border-color:
    var(
      --pedidos-border-extra
    );

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


.pedidos-button--ghost {
  border-color:
    transparent;

  background:
    transparent;

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


.pedidos-button--ghost:hover:not(:disabled) {
  border-color:
    var(
      --pedidos-border
    );

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

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


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

.pedidos-metrics {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    8px;
}


.pedidos-metric-card {
  position:
    relative;

  min-width:
    0;

  min-height:
    91px;

  padding:
    13px 14px;

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

  border-radius:
    9px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    11px;

  overflow:
    hidden;

  background:
    var(
      --pedidos-surface
    );

  box-shadow:
    none;

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


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

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

  transform:
    translateY(
      -1px
    );
}


.pedidos-metric-card__icon {
  width:
    33px;

  height:
    33px;

  flex:
    0 0 33px;

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

  border-radius:
    7px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

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

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


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

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


.pedidos-metric-card__icon svg {
  width:
    16px;

  height:
    16px;

  stroke-width:
    2;
}


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

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.pedidos-metric-card__label {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(
      --pedidos-muted
    );

  font-size:
    10px;

  line-height:
    1.25;

  font-weight:
    750;
}


.pedidos-metric-card__value {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  margin-top:
    1px;

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

  font-size:
    19px;

  line-height:
    1.1;

  font-weight:
    850;

  letter-spacing:
    -0.035em;

  font-variant-numeric:
    tabular-nums;
}


.pedidos-metric-card__hint {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  margin-top:
    1px;

  color:
    var(
      --pedidos-muted-2
    );

  font-size:
    9px;

  line-height:
    1.3;

  font-weight:
    650;
}


/* =========================================================
   MAIN PANEL
   ========================================================= */

.pedidos-panel {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  overflow:
    visible;

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

  border-radius:
    10px;

  background:
    var(
      --pedidos-surface
    );

  box-shadow:
    none;
}


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

.pedidos-toolbar {
  min-width:
    0;

  min-height:
    58px;

  padding:
    10px 11px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

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


.pedidos-toolbar__search {
  position:
    relative;

  flex:
    1 1 520px;

  min-width:
    220px;

  max-width:
    760px;
}


.pedidos-toolbar__search >
svg {
  position:
    absolute;

  top:
    50%;

  left:
    11px;

  width:
    15px;

  height:
    15px;

  color:
    var(
      --pedidos-muted
    );

  transform:
    translateY(
      -50%
    );

  pointer-events:
    none;
}


.pedidos-toolbar__search input {
  width:
    100%;

  min-height:
    37px;

  padding:
    8px 38px 8px 35px;

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

  border-radius:
    7px;

  outline:
    none;

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

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

  font-size:
    11px;

  line-height:
    1;

  font-weight:
    700;

  box-shadow:
    none;

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


.pedidos-toolbar__search input:hover {
  border-color:
    var(
      --pedidos-border-strong
    );
}


.pedidos-toolbar__search input:focus {
  border-color:
    var(
      --pedidos-text-strong
    );

  background:
    var(
      --pedidos-surface
    );

  box-shadow:
    none;
}


.pedidos-toolbar__search input::placeholder {
  color:
    var(
      --pedidos-muted-2
    );

  opacity:
    1;
}


.pedidos-toolbar__search-clear {
  position:
    absolute;

  top:
    50%;

  right:
    7px;

  width:
    26px;

  height:
    26px;

  padding:
    0;

  border:
    1px solid transparent;

  border-radius:
    6px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    transparent;

  color:
    var(
      --pedidos-muted
    );

  cursor:
    pointer;

  transform:
    translateY(
      -50%
    );

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


.pedidos-toolbar__search-clear:hover {
  border-color:
    var(
      --pedidos-border
    );

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

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


.pedidos-toolbar__actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    4px;
}


/* =========================================================
   FILTER COUNTER
   ========================================================= */

.pedidos-toolbar__counter {
  min-width:
    18px;

  height:
    18px;

  padding:
    0 5px;

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

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  color:
    var(
      --pedidos-surface
    );

  font-size:
    9px;

  font-weight:
    850;
}


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

.pedidos-filters {
  padding:
    14px;

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

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

  animation:
    pedidosPanelOpen
    130ms
    ease-out;
}


@keyframes pedidosPanelOpen {
  from {
    opacity:
      0;

    transform:
      translateY(
        -3px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


.pedidos-filters__grid {
  display:
    grid;

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

  gap:
    11px;
}


.pedidos-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.pedidos-field__label {
  padding-left:
    1px;

  color:
    var(
      --pedidos-text
    );

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    0.015em;
}


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

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

  border-radius:
    6px;

  outline:
    none;

  background:
    var(
      --pedidos-surface
    );

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

  font-size:
    11px;

  font-weight:
    700;

  box-shadow:
    none;

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


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

  padding:
    7px 9px;
}


.pedidos-field textarea {
  min-height:
    84px;

  padding:
    9px;

  resize:
    vertical;
}


.pedidos-field input:hover,
.pedidos-field select:hover,
.pedidos-field textarea:hover {
  border-color:
    var(
      --pedidos-border-strong
    );
}


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

  box-shadow:
    none;
}


.pedidos-filters__footer {
  margin-top:
    12px;

  padding-top:
    11px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;
}


/* =========================================================
   POPOVERS
   ========================================================= */

.pedidos-popover {
  position:
    absolute;

  top:
    calc(
      100% +
      6px
    );

  right:
    0;

  z-index:
    180;

  width:
    270px;

  max-height:
    min(
      520px,
      calc(
        100vh -
        140px
      )
    );

  overflow:
    auto;

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

  border-radius:
    8px;

  background:
    var(
      --pedidos-surface
    );

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

  animation:
    pedidosPopoverOpen
    110ms
    ease-out;
}


@keyframes pedidosPopoverOpen {
  from {
    opacity:
      0;

    transform:
      translateY(
        -3px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


.pedidos-popover__header {
  padding:
    11px 12px;

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

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


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

  font-size:
    11px;

  font-weight:
    850;
}


.pedidos-popover__header small {
  margin-top:
    2px;

  color:
    var(
      --pedidos-muted
    );

  font-size:
    9px;

  line-height:
    1.35;

  font-weight:
    650;
}


.pedidos-popover__footer {
  padding:
    9px 11px;

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

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


/* =========================================================
   COLUMN OPTIONS
   ========================================================= */

.pedidos-columns-list,
.pedidos-density-list {
  padding:
    5px;
}


.pedidos-column-option,
.pedidos-density-option {
  border:
    1px solid transparent;

  border-radius:
    6px;

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


.pedidos-column-option:hover,
.pedidos-density-option:hover,
.pedidos-density-option.is-active {
  border-color:
    var(
      --pedidos-border
    );

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


/* =========================================================
   TABLE TOP HEADER
   ========================================================= */

.pedidos-table-header {
  min-height:
    43px;

  padding:
    7px 11px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

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


.pedidos-results-text {
  color:
    var(
      --pedidos-text
    );

  font-size:
    10px;

  font-weight:
    750;
}


.pedidos-limit {
  color:
    var(
      --pedidos-muted
    );

  font-size:
    9px;

  font-weight:
    750;
}


.pedidos-limit select {
  min-width:
    64px;

  min-height:
    29px;

  padding:
    4px 7px;

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

  border-radius:
    6px;

  outline:
    none;

  background:
    var(
      --pedidos-surface
    );

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

  font-size:
    10px;

  font-weight:
    800;

  box-shadow:
    none;
}


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

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

  min-width:
    0;

  overflow:
    hidden;

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


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

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    visible;

  scrollbar-width:
    thin;
}


.pedidos-table {
  width:
    100%;

  min-width:
    1120px;

  border-collapse:
    separate;

  border-spacing:
    0;

  table-layout:
    auto;

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


.pedidos-table__th {
  position:
    sticky;

  top:
    0;

  z-index:
    4;

  padding:
    9px 10px;

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

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

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

  color:
    var(
      --pedidos-text
    );

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    850;

  letter-spacing:
    0.015em;

  text-align:
    left;

  white-space:
    nowrap;
}


.pedidos-table__th:last-child {
  border-right:
    0;
}


.pedidos-table__td {
  padding:
    10px;

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

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

  background:
    var(
      --pedidos-surface
    );

  color:
    var(
      --pedidos-text
    );

  font-size:
    10.5px;

  line-height:
    1.35;

  font-weight:
    650;

  vertical-align:
    middle;

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


.pedidos-table__td:last-child {
  border-right:
    0;
}


.pedidos-table__row {
  cursor:
    pointer;
}


.pedidos-table__row:hover
.pedidos-table__td {
  background:
    var(
      --pedidos-surface-2
    );
}


.pedidos-table__row:active
.pedidos-table__td {
  background:
    var(
      --pedidos-surface-3
    );
}


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


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

.pedidos-order-number__main {
  color:
    var(
      --pedidos-text-strong
    );

  font-size:
    10.5px;

  font-weight:
    850;
}


.pedidos-order-number__secondary {
  color:
    var(
      --pedidos-muted
    );

  font-size:
    9px;

  font-weight:
    650;
}


.pedidos-date-cell >
span {
  color:
    var(
      --pedidos-text-strong
    );

  font-weight:
    750;
}


.pedidos-date-cell small {
  color:
    var(
      --pedidos-muted
    );

  font-size:
    8.5px;

  font-weight:
    650;
}


.pedidos-client-cell__avatar {
  width:
    29px;

  height:
    29px;

  flex:
    0 0 29px;

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

  border-radius:
    6px;

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

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

  font-size:
    10px;

  font-weight:
    850;
}


.pedidos-client-cell__content strong {
  color:
    var(
      --pedidos-text-strong
    );

  font-size:
    10.5px;

  font-weight:
    800;
}


.pedidos-client-cell__content small {
  color:
    var(
      --pedidos-muted
    );

  font-size:
    8.5px;

  font-weight:
    650;
}


.pedidos-list-cell strong {
  color:
    var(
      --pedidos-text-strong
    );

  font-size:
    10px;

  font-weight:
    800;
}


.pedidos-list-cell small {
  color:
    var(
      --pedidos-muted
    );

  font-size:
    8.5px;

  font-weight:
    650;
}


.pedidos-money,
.pedidos-table__td--total strong {
  color:
    var(
      --pedidos-text-strong
    );

  font-weight:
    850;

  font-variant-numeric:
    tabular-nums;
}


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

.pedidos-badge,
.pedidos-currency-badge {
  min-height:
    21px;

  padding:
    3px 7px;

  border-radius:
    5px;

  font-size:
    8.5px;

  line-height:
    1;

  font-weight:
    850;

  letter-spacing:
    0.01em;

  white-space:
    nowrap;
}


.pedidos-currency-badge {
  border:
    1px solid var(
      --pedidos-border-strong
    );

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

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


/* =========================================================
   ROW ACTION
   ========================================================= */

.pedidos-row-action {
  width:
    29px;

  height:
    29px;

  padding:
    0;

  border:
    1px solid transparent;

  border-radius:
    6px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    transparent;

  color:
    var(
      --pedidos-muted
    );

  cursor:
    pointer;

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


.pedidos-row-action:hover {
  border-color:
    var(
      --pedidos-border
    );

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

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


/* =========================================================
   ROW MENU
   ========================================================= */

.pedidos-row-menu {
  z-index:
    800;

  width:
    218px;

  padding:
    5px;

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

  border-radius:
    8px;

  background:
    var(
      --pedidos-surface
    );

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

  animation:
    pedidosRowMenuOpen
    100ms
    ease-out;
}


@keyframes pedidosRowMenuOpen {
  from {
    opacity:
      0;

    transform:
      translateY(
        -3px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


.pedidos-row-menu__item {
  width:
    100%;

  min-height:
    34px;

  padding:
    7px 8px;

  border:
    1px solid transparent;

  border-radius:
    5px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  background:
    transparent;

  color:
    var(
      --pedidos-text
    );

  font-size:
    10px;

  font-weight:
    750;

  text-align:
    left;

  cursor:
    pointer;

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


.pedidos-row-menu__item:hover {
  border-color:
    var(
      --pedidos-border
    );

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

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


.pedidos-row-menu__separator {
  height:
    1px;

  margin:
    5px 3px;

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


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

.pedidos-pagination {
  min-height:
    53px;

  padding:
    9px 11px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

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


.pedidos-pagination__button {
  min-width:
    31px;

  height:
    31px;

  padding:
    0 8px;

  border:
    1px solid transparent;

  border-radius:
    6px;

  background:
    transparent;

  color:
    var(
      --pedidos-muted
    );

  font-size:
    10px;

  font-weight:
    800;

  cursor:
    pointer;

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


.pedidos-pagination__button:hover:not(:disabled) {
  border-color:
    var(
      --pedidos-border
    );

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

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


.pedidos-pagination__button.is-active {
  border-color:
    var(
      --pedidos-text-strong
    );

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

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


/* =========================================================
   DRAWER
   ========================================================= */

.pedido-drawer-overlay {
  background:
    rgba(
      0,
      0,
      0,
      0.34
    );

  backdrop-filter:
    none;

  transition:
    opacity
      130ms
      ease,
    visibility
      130ms
      ease;
}


.pedido-drawer {
  width:
    min(
      850px,
      calc(
        100vw -
        48px
      )
    );

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

  background:
    var(
      --pedidos-surface
    );

  box-shadow:
    -14px 0 36px rgba(
      0,
      0,
      0,
      0.12
    );

  transition:
    transform
      170ms
      cubic-bezier(
        0.2,
        0,
        0,
        1
      );
}


.pedido-drawer__header {
  min-height:
    72px;

  padding:
    13px 15px;

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

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


.pedido-drawer__eyebrow {
  color:
    var(
      --pedidos-muted
    );

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.08em;
}


.pedido-drawer__title-row h2 {
  color:
    var(
      --pedidos-text-strong
    );

  font-size:
    18px;

  font-weight:
    850;
}


.pedido-drawer__subtitle {
  color:
    var(
      --pedidos-muted
    );

  font-size:
    10px;

  font-weight:
    650;
}


.pedido-drawer__close {
  width:
    31px;

  height:
    31px;

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

  border-radius:
    6px;

  background:
    var(
      --pedidos-surface
    );

  color:
    var(
      --pedidos-muted
    );

  box-shadow:
    none;
}


.pedido-drawer__close:hover {
  border-color:
    var(
      --pedidos-border-strong
    );

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

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


.pedido-drawer__body {
  padding:
    13px;

  gap:
    10px;

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


.pedido-drawer__footer {
  min-height:
    61px;

  padding:
    9px 13px;

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

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


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

.pedido-detail-summary {
  gap:
    7px;
}


.pedido-detail-summary__card {
  padding:
    10px;

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

  border-radius:
    7px;

  background:
    var(
      --pedidos-surface
    );

  box-shadow:
    none;

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


.pedido-detail-summary__card:hover {
  border-color:
    var(
      --pedidos-border-strong
    );

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


.pedido-detail-summary__card >
span {
  color:
    var(
      --pedidos-muted
    );

  font-size:
    8.5px;

  font-weight:
    800;
}


.pedido-detail-summary__card >
strong {
  color:
    var(
      --pedidos-text-strong
    );

  font-size:
    14px;

  font-weight:
    850;
}


.pedido-detail-section {
  padding:
    11px;

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

  border-radius:
    8px;

  background:
    var(
      --pedidos-surface
    );

  box-shadow:
    none;
}


.pedido-detail-section__header {
  margin-bottom:
    10px;

  padding-bottom:
    9px;

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


.pedido-detail-section__header h3 {
  color:
    var(
      --pedidos-text-strong
    );

  font-size:
    11px;

  font-weight:
    850;
}


.pedido-detail-section__header p {
  color:
    var(
      --pedidos-muted
    );

  font-size:
    9px;

  font-weight:
    650;
}


.pedido-detail-info-grid {
  gap:
    7px;
}


.pedido-detail-info {
  padding:
    8px 9px;

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

  border-radius:
    6px;

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


.pedido-detail-info >
span {
  color:
    var(
      --pedidos-muted
    );

  font-size:
    8.5px;

  font-weight:
    750;
}


.pedido-detail-info >
strong {
  color:
    var(
      --pedidos-text-strong
    );

  font-size:
    10.5px;

  font-weight:
    800;
}


/* =========================================================
   EDITOR
   ========================================================= */

.pedido-editor-overlay {
  background:
    rgba(
      0,
      0,
      0,
      0.42
    );

  backdrop-filter:
    none;

  transition:
    opacity
      130ms
      ease,
    visibility
      130ms
      ease;
}


.pedido-editor {
  border:
    1px solid var(
      --pedidos-border-strong
    );

  border-radius:
    11px;

  background:
    var(
      --pedidos-surface
    );

  box-shadow:
    0 16px 48px rgba(
      0,
      0,
      0,
      0.14
    );

  transition:
    opacity
      130ms
      ease,
    transform
      150ms
      cubic-bezier(
        0.2,
        0,
        0,
        1
      );
}


.pedido-editor__header {
  border-bottom:
    1px solid var(
      --pedidos-border-strong
    );

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


.pedido-editor__body {
  background:
    var(
      --pedidos-bg
    );
}


.pedido-editor__footer {
  border-top:
    1px solid var(
      --pedidos-border-strong
    );

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


.pedido-editor-section {
  border:
    1px solid var(
      --pedidos-border-strong
    );

  border-radius:
    8px;

  background:
    var(
      --pedidos-surface
    );

  box-shadow:
    none;
}


/* =========================================================
   SELECTED CLIENT / SEARCH RESULTS
   ========================================================= */

.pedido-client-picker__results,
.pedido-product-picker {
  border:
    1px solid var(
      --pedidos-border-strong
    );

  border-radius:
    7px;

  background:
    var(
      --pedidos-surface
    );

  box-shadow:
    none;
}


.pedido-client-result,
.pedido-product-result {
  border-color:
    var(
      --pedidos-border
    );

  background:
    var(
      --pedidos-surface
    );

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


.pedido-client-result:hover,
.pedido-product-result:hover {
  border-color:
    var(
      --pedidos-border-strong
    );

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


/* =========================================================
   INPUTS GENERALES DEL EDITOR
   ========================================================= */

.pedido-editor input,
.pedido-editor select,
.pedido-editor textarea,
.pedido-drawer input,
.pedido-drawer select,
.pedido-drawer textarea {
  border-radius:
    6px;

  box-shadow:
    none;
}


.pedido-editor input:focus,
.pedido-editor select:focus,
.pedido-editor textarea:focus,
.pedido-drawer input:focus,
.pedido-drawer select:focus,
.pedido-drawer textarea:focus {
  box-shadow:
    none !important;
}


/* =========================================================
   NOTIFICATION
   ========================================================= */

.pedidos-notification {
  border:
    1px solid var(
      --pedidos-border-strong
    );

  border-radius:
    8px;

  background:
    var(
      --pedidos-surface
    );

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

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


/* =========================================================
   SCROLLBARS
   ========================================================= */

.pedidos-table-scroll,
.pedido-drawer__body,
.pedido-editor__body,
.pedido-client-picker__results,
.pedido-product-picker__results,
.pedidos-popover,
.pedido-detail-items-scroll,
.pedido-editor-items__scroll {
  scrollbar-width:
    thin;

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


.pedidos-table-scroll::-webkit-scrollbar,
.pedido-drawer__body::-webkit-scrollbar,
.pedido-editor__body::-webkit-scrollbar,
.pedido-client-picker__results::-webkit-scrollbar,
.pedido-product-picker__results::-webkit-scrollbar,
.pedidos-popover::-webkit-scrollbar,
.pedido-detail-items-scroll::-webkit-scrollbar,
.pedido-editor-items__scroll::-webkit-scrollbar {
  width:
    7px;

  height:
    7px;
}


.pedidos-table-scroll::-webkit-scrollbar-track,
.pedido-drawer__body::-webkit-scrollbar-track,
.pedido-editor__body::-webkit-scrollbar-track,
.pedido-client-picker__results::-webkit-scrollbar-track,
.pedido-product-picker__results::-webkit-scrollbar-track,
.pedidos-popover::-webkit-scrollbar-track,
.pedido-detail-items-scroll::-webkit-scrollbar-track,
.pedido-editor-items__scroll::-webkit-scrollbar-track {
  background:
    transparent;
}


.pedidos-table-scroll::-webkit-scrollbar-thumb,
.pedido-drawer__body::-webkit-scrollbar-thumb,
.pedido-editor__body::-webkit-scrollbar-thumb,
.pedido-client-picker__results::-webkit-scrollbar-thumb,
.pedido-product-picker__results::-webkit-scrollbar-thumb,
.pedidos-popover::-webkit-scrollbar-thumb,
.pedido-detail-items-scroll::-webkit-scrollbar-thumb,
.pedido-editor-items__scroll::-webkit-scrollbar-thumb {
  border:
    2px solid transparent;

  border-radius:
    999px;

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

  background-clip:
    padding-box;
}


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

html[data-theme="dark"]
#pedidosPage,
body[data-theme="dark"]
#pedidosPage,
html.dark
#pedidosPage,
body.dark
#pedidosPage {
  --pedidos-bg:
    #050505;

  --pedidos-surface:
    #090909;

  --pedidos-surface-2:
    #0e0e0e;

  --pedidos-surface-3:
    #141414;

  --pedidos-surface-4:
    #1a1a1a;

  --pedidos-border:
    #272727;

  --pedidos-border-strong:
    #363636;

  --pedidos-border-extra:
    #484848;

  --pedidos-text:
    #e2e2e2;

  --pedidos-text-strong:
    #ffffff;

  --pedidos-muted:
    #a9a9a9;

  --pedidos-muted-2:
    #838383;

  --pedidos-primary:
    #ffffff;

  --pedidos-primary-hover:
    #e7e7e7;

  --pedidos-primary-contrast:
    #000000;

  --pedidos-shadow-sm:
    none;

  --pedidos-shadow-md:
    0 12px 34px rgba(
      0,
      0,
      0,
      0.55
    );

  --pedidos-shadow-lg:
    0 20px 60px rgba(
      0,
      0,
      0,
      0.7
    );
}


/* =========================================================
   DARK PAGE BACKGROUNDS
   ========================================================= */

html[data-theme="dark"]
.pedidos-panel,
body[data-theme="dark"]
.pedidos-panel,
html.dark
.pedidos-panel,
body.dark
.pedidos-panel {
  background:
    #090909;

  border-color:
    #363636;
}


html[data-theme="dark"]
.pedidos-toolbar,
body[data-theme="dark"]
.pedidos-toolbar,
html.dark
.pedidos-toolbar,
body.dark
.pedidos-toolbar,
html[data-theme="dark"]
.pedidos-table-header,
body[data-theme="dark"]
.pedidos-table-header,
html.dark
.pedidos-table-header,
body.dark
.pedidos-table-header,
html[data-theme="dark"]
.pedidos-pagination,
body[data-theme="dark"]
.pedidos-pagination,
html.dark
.pedidos-pagination,
body.dark
.pedidos-pagination {
  background:
    #090909;

  border-color:
    #363636;
}


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

html[data-theme="dark"]
.pedidos-table,
body[data-theme="dark"]
.pedidos-table,
html.dark
.pedidos-table,
body.dark
.pedidos-table {
  background:
    #090909;
}


html[data-theme="dark"]
.pedidos-table__th,
body[data-theme="dark"]
.pedidos-table__th,
html.dark
.pedidos-table__th,
body.dark
.pedidos-table__th {
  background:
    #101010;

  color:
    #bdbdbd;

  border-color:
    #303030;
}


html[data-theme="dark"]
.pedidos-table__td,
body[data-theme="dark"]
.pedidos-table__td,
html.dark
.pedidos-table__td,
body.dark
.pedidos-table__td {
  background:
    #090909;

  color:
    #dedede;

  border-color:
    #282828;
}


html[data-theme="dark"]
.pedidos-table__row:hover
.pedidos-table__td,
body[data-theme="dark"]
.pedidos-table__row:hover
.pedidos-table__td,
html.dark
.pedidos-table__row:hover
.pedidos-table__td,
body.dark
.pedidos-table__row:hover
.pedidos-table__td {
  background:
    #111111;
}


/* =========================================================
   DARK METRIC CARDS
   ========================================================= */

html[data-theme="dark"]
.pedidos-metric-card,
body[data-theme="dark"]
.pedidos-metric-card,
html.dark
.pedidos-metric-card,
body.dark
.pedidos-metric-card {
  background:
    #090909;

  border-color:
    #303030;
}


html[data-theme="dark"]
.pedidos-metric-card:hover,
body[data-theme="dark"]
.pedidos-metric-card:hover,
html.dark
.pedidos-metric-card:hover,
body.dark
.pedidos-metric-card:hover {
  background:
    #0e0e0e;

  border-color:
    #414141;
}


html[data-theme="dark"]
.pedidos-metric-card__icon,
body[data-theme="dark"]
.pedidos-metric-card__icon,
html.dark
.pedidos-metric-card__icon,
body.dark
.pedidos-metric-card__icon {
  background:
    #111111;

  border-color:
    #303030;

  color:
    #ffffff;
}


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

html[data-theme="dark"]
.pedidos-toolbar__search input,
body[data-theme="dark"]
.pedidos-toolbar__search input,
html.dark
.pedidos-toolbar__search input,
body.dark
.pedidos-toolbar__search input,
html[data-theme="dark"]
.pedidos-field input,
html[data-theme="dark"]
.pedidos-field select,
html[data-theme="dark"]
.pedidos-field textarea,
body[data-theme="dark"]
.pedidos-field input,
body[data-theme="dark"]
.pedidos-field select,
body[data-theme="dark"]
.pedidos-field textarea,
html.dark
.pedidos-field input,
html.dark
.pedidos-field select,
html.dark
.pedidos-field textarea,
body.dark
.pedidos-field input,
body.dark
.pedidos-field select,
body.dark
.pedidos-field textarea {
  background:
    #0d0d0d;

  color:
    #ffffff;

  border-color:
    #303030;

  box-shadow:
    none;
}


html[data-theme="dark"]
.pedidos-toolbar__search input:focus,
body[data-theme="dark"]
.pedidos-toolbar__search input:focus,
html.dark
.pedidos-toolbar__search input:focus,
body.dark
.pedidos-toolbar__search input:focus,
html[data-theme="dark"]
.pedidos-field input:focus,
html[data-theme="dark"]
.pedidos-field select:focus,
html[data-theme="dark"]
.pedidos-field textarea:focus,
body[data-theme="dark"]
.pedidos-field input:focus,
body[data-theme="dark"]
.pedidos-field select:focus,
body[data-theme="dark"]
.pedidos-field textarea:focus,
html.dark
.pedidos-field input:focus,
html.dark
.pedidos-field select:focus,
html.dark
.pedidos-field textarea:focus,
body.dark
.pedidos-field input:focus,
body.dark
.pedidos-field select:focus,
body.dark
.pedidos-field textarea:focus {
  background:
    #0a0a0a;

  border-color:
    #666666;

  box-shadow:
    none;
}


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

html[data-theme="dark"]
.pedidos-button--secondary,
body[data-theme="dark"]
.pedidos-button--secondary,
html.dark
.pedidos-button--secondary,
body.dark
.pedidos-button--secondary {
  background:
    #0d0d0d;

  border-color:
    #363636;

  color:
    #ffffff;
}


html[data-theme="dark"]
.pedidos-button--secondary:hover,
body[data-theme="dark"]
.pedidos-button--secondary:hover,
html.dark
.pedidos-button--secondary:hover,
body.dark
.pedidos-button--secondary:hover {
  background:
    #151515;

  border-color:
    #4a4a4a;
}


html[data-theme="dark"]
.pedidos-button--ghost,
body[data-theme="dark"]
.pedidos-button--ghost,
html.dark
.pedidos-button--ghost,
body.dark
.pedidos-button--ghost {
  color:
    #e4e4e4;
}


html[data-theme="dark"]
.pedidos-button--ghost:hover,
body[data-theme="dark"]
.pedidos-button--ghost:hover,
html.dark
.pedidos-button--ghost:hover,
body.dark
.pedidos-button--ghost:hover {
  background:
    #131313;

  border-color:
    #303030;

  color:
    #ffffff;
}


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

html[data-theme="dark"]
.pedidos-filters,
body[data-theme="dark"]
.pedidos-filters,
html.dark
.pedidos-filters,
body.dark
.pedidos-filters {
  background:
    #0c0c0c;

  border-color:
    #363636;
}


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

html[data-theme="dark"]
.pedidos-popover,
body[data-theme="dark"]
.pedidos-popover,
html.dark
.pedidos-popover,
body.dark
.pedidos-popover,
html[data-theme="dark"]
.pedidos-row-menu,
body[data-theme="dark"]
.pedidos-row-menu,
html.dark
.pedidos-row-menu,
body.dark
.pedidos-row-menu {
  background:
    #0b0b0b;

  border-color:
    #363636;
}


html[data-theme="dark"]
.pedidos-popover__header,
html[data-theme="dark"]
.pedidos-popover__footer,
body[data-theme="dark"]
.pedidos-popover__header,
body[data-theme="dark"]
.pedidos-popover__footer,
html.dark
.pedidos-popover__header,
html.dark
.pedidos-popover__footer,
body.dark
.pedidos-popover__header,
body.dark
.pedidos-popover__footer {
  background:
    #101010;

  border-color:
    #303030;
}


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

html[data-theme="dark"]
.pedido-drawer,
body[data-theme="dark"]
.pedido-drawer,
html.dark
.pedido-drawer,
body.dark
.pedido-drawer {
  background:
    #090909;

  border-color:
    #343434;

  box-shadow:
    -16px 0 44px rgba(
      0,
      0,
      0,
      0.68
    );
}


html[data-theme="dark"]
.pedido-drawer__header,
html[data-theme="dark"]
.pedido-drawer__footer,
body[data-theme="dark"]
.pedido-drawer__header,
body[data-theme="dark"]
.pedido-drawer__footer,
html.dark
.pedido-drawer__header,
html.dark
.pedido-drawer__footer,
body.dark
.pedido-drawer__header,
body.dark
.pedido-drawer__footer {
  background:
    #090909;

  border-color:
    #343434;
}


html[data-theme="dark"]
.pedido-drawer__body,
body[data-theme="dark"]
.pedido-drawer__body,
html.dark
.pedido-drawer__body,
body.dark
.pedido-drawer__body {
  background:
    #050505;
}


html[data-theme="dark"]
.pedido-detail-summary__card,
html[data-theme="dark"]
.pedido-detail-section,
html[data-theme="dark"]
.pedido-detail-info,
body[data-theme="dark"]
.pedido-detail-summary__card,
body[data-theme="dark"]
.pedido-detail-section,
body[data-theme="dark"]
.pedido-detail-info,
html.dark
.pedido-detail-summary__card,
html.dark
.pedido-detail-section,
html.dark
.pedido-detail-info,
body.dark
.pedido-detail-summary__card,
body.dark
.pedido-detail-section,
body.dark
.pedido-detail-info {
  background:
    #0c0c0c;

  border-color:
    #303030;
}


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

html[data-theme="dark"]
.pedido-editor,
body[data-theme="dark"]
.pedido-editor,
html.dark
.pedido-editor,
body.dark
.pedido-editor {
  background:
    #080808;

  border-color:
    #383838;

  box-shadow:
    0 20px 70px rgba(
      0,
      0,
      0,
      0.75
    );
}


html[data-theme="dark"]
.pedido-editor__header,
html[data-theme="dark"]
.pedido-editor__footer,
body[data-theme="dark"]
.pedido-editor__header,
body[data-theme="dark"]
.pedido-editor__footer,
html.dark
.pedido-editor__header,
html.dark
.pedido-editor__footer,
body.dark
.pedido-editor__header,
body.dark
.pedido-editor__footer {
  background:
    #080808;

  border-color:
    #343434;
}


html[data-theme="dark"]
.pedido-editor__body,
body[data-theme="dark"]
.pedido-editor__body,
html.dark
.pedido-editor__body,
body.dark
.pedido-editor__body {
  background:
    #050505;
}


html[data-theme="dark"]
.pedido-editor-section,
body[data-theme="dark"]
.pedido-editor-section,
html.dark
.pedido-editor-section,
body.dark
.pedido-editor-section {
  background:
    #0b0b0b;

  border-color:
    #303030;
}


/* =========================================================
   RESPONSIVE · 1440
   ========================================================= */

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


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


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

@media (
  max-width:
    1180px
) {
  .pedidos-page__title-row {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .pedidos-page__actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .pedidos-filters__grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


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


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


/* =========================================================
   RESPONSIVE · 960
   ========================================================= */

@media (
  max-width:
    960px
) {
  #pedidosPage {
    gap:
      13px;
  }


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


  .pedidos-toolbar {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .pedidos-toolbar__search {
    flex:
      none;

    width:
      100%;

    min-width:
      0;

    max-width:
      none;
  }


  .pedidos-toolbar__actions {
    width:
      100%;

    justify-content:
      flex-start;

    flex-wrap:
      wrap;
  }


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


  .pedido-drawer {
    width:
      min(
        760px,
        calc(
          100vw -
          16px
        )
      );
  }
}


/* =========================================================
   RESPONSIVE · 760
   ========================================================= */

@media (
  max-width:
    760px
) {
  #pedidosPage {
    gap:
      10px;
  }


  .pedidos-page__header {
    padding:
      1px 0;
  }


  .pedidos-page__title {
    font-size:
      23px;
  }


  .pedidos-page__subtitle {
    font-size:
      10.5px;
  }


  .pedidos-page__actions {
    display:
      grid;

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

    gap:
      5px;
  }


  .pedidos-page__actions
  .pedidos-button {
    width:
      100%;

    padding-left:
      8px;

    padding-right:
      8px;
  }


  .pedidos-metrics {
    gap:
      6px;
  }


  .pedidos-metric-card {
    min-height:
      78px;

    padding:
      10px;

    gap:
      8px;
  }


  .pedidos-metric-card__icon {
    width:
      30px;

    height:
      30px;

    flex-basis:
      30px;
  }


  .pedidos-metric-card__value {
    font-size:
      16px;
  }


  .pedidos-panel {
    border-radius:
      8px;
  }


  .pedidos-toolbar {
    min-height:
      0;

    padding:
      8px;
  }


  .pedidos-toolbar__actions {
    display:
      grid;

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

    gap:
      4px;
  }


  .pedidos-toolbar__actions >
  .pedidos-button,
  .pedidos-toolbar-menu,
  .pedidos-toolbar-menu >
  .pedidos-button {
    width:
      100%;
  }


  .pedidos-popover {
    right:
      auto;

    left:
      0;

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


  .pedidos-filters {
    padding:
      10px;
  }


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


  .pedidos-filters__footer {
    align-items:
      stretch;

    flex-direction:
      column-reverse;
  }


  .pedidos-filters__footer
  .pedidos-button {
    width:
      100%;
  }


  .pedidos-table-header {
    align-items:
      flex-start;

    flex-direction:
      column;

    padding:
      8px;
  }


  .pedidos-table {
    min-width:
      1040px;
  }


  .pedidos-pagination {
    align-items:
      stretch;

    flex-wrap:
      wrap;

    justify-content:
      center;

    padding:
      8px;
  }


  .pedidos-pagination__pages {
    order:
      -1;

    width:
      100%;

    overflow-x:
      auto;

    justify-content:
      flex-start;

    padding-bottom:
      3px;
  }


  .pedidos-pagination__button--nav {
    flex:
      1;

    min-width:
      0;
  }


  .pedido-drawer {
    width:
      100vw;

    max-width:
      none;

    border-left:
      0;
  }


  .pedido-drawer__header {
    padding:
      11px;

    gap:
      9px;
  }


  .pedido-drawer__body {
    padding:
      9px;
  }


  .pedido-drawer__footer {
    padding:
      8px 9px;
  }


  .pedido-detail-info-grid {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   RESPONSIVE · 520
   ========================================================= */

@media (
  max-width:
    520px
) {
  .pedidos-page__actions {
    grid-template-columns:
      1fr;
  }


  .pedidos-page__actions
  .pedidos-button {
    min-height:
      38px;
  }


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


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


  .pedidos-metric-card {
    min-height:
      69px;

    align-items:
      center;
  }


  .pedidos-metric-card__value {
    font-size:
      15px;
  }


  .pedidos-table-header__left,
  .pedidos-table-header__right {
    width:
      100%;
  }


  .pedidos-table-header__right {
    justify-content:
      flex-end;
  }


  .pedido-drawer__header {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .pedido-drawer__header-actions {
    width:
      100%;

    justify-content:
      space-between;

    flex-wrap:
      wrap;
  }


  .pedido-detail-summary {
    grid-template-columns:
      1fr;
  }


  .pedido-drawer__footer {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .pedido-drawer__footer-actions {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .pedido-drawer__footer-actions
  .pedidos-button {
    width:
      100%;
  }


  .pedido-editor {
    right:
      5px !important;

    left:
      5px !important;

    bottom:
      5px !important;

    border-radius:
      8px;
  }


  .pedido-editor__footer-actions {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .pedido-editor__footer-actions
  .pedidos-button {
    width:
      100%;
  }
}


/* =========================================================
   VERY SMALL
   ========================================================= */

@media (
  max-width:
    380px
) {
  .pedidos-page__title {
    font-size:
      21px;
  }


  .pedidos-page__subtitle {
    font-size:
      10px;
  }


  .pedidos-toolbar,
  .pedidos-filters {
    padding-left:
      7px;

    padding-right:
      7px;
  }


  .pedidos-metric-card {
    min-height:
      66px;
  }


  .pedidos-table-header {
    padding-left:
      7px;

    padding-right:
      7px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {
  #pedidosPage *,
  #pedidosPage *::before,
  #pedidosPage *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}


/* =========================================================
   FIN REDISEÑO PREMIUM
   ========================================================= *//* =========================================================
   WIRTZ HUB · PEDIDOS
   MOBILE RESPONSIVE REAL
   AGREGAR AL FINAL DE:
   frontend/src/pages/facturacion-cobranzas/pedidos/pedidos.css

   OBJETIVOS:
   - CERO scroll horizontal
   - CERO barras horizontales
   - Tabla convertida en tarjetas en móvil
   - Toolbar responsive
   - Métricas responsive
   - Header responsive
   - Filtros responsive
   - Drawer responsive
   - Editor responsive
   ========================================================= */


/* =========================================================
   PROTECCIÓN GLOBAL CONTRA OVERFLOW HORIZONTAL
   ========================================================= */

html,
body {
  max-width:
    100%;

  overflow-x:
    hidden !important;
}


.app-shell,
.app-main,
.app-content,
#pedidosPage {
  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  overflow-x:
    hidden;
}


#pedidosPage *,
#pedidosPage *::before,
#pedidosPage *::after {
  min-width:
    0;
}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (
  max-width:
    820px
) {

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

  #pedidosPage {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    gap:
      10px;

    padding:
      0;

    overflow:
      hidden;
  }


  .app-content {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    padding-left:
      10px !important;

    padding-right:
      10px !important;

    overflow-x:
      hidden !important;
  }


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

  .pedidos-page__header {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;
  }


  .pedidos-page__heading {
    width:
      100%;

    min-width:
      0;
  }


  .pedidos-page__title-row {
    width:
      100%;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      10px;
  }


  .pedidos-page__title-row >
  div:first-child {
    width:
      100%;

    min-width:
      0;
  }


  .pedidos-page__eyebrow {
    font-size:
      9px;

    letter-spacing:
      0.07em;
  }


  .pedidos-page__title {
    font-size:
      23px;

    line-height:
      1.05;
  }


  .pedidos-page__subtitle {
    width:
      100%;

    max-width:
      100%;

    margin-top:
      5px;

    font-size:
      11px;

    line-height:
      1.4;

    overflow-wrap:
      anywhere;
  }


  /* =======================================================
     ACCIONES DEL HEADER
     ======================================================= */

  .pedidos-page__actions {
    width:
      100%;

    display:
      grid;

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

    gap:
      6px;
  }


  .pedidos-page__actions
  .pedidos-button {
    width:
      100%;

    min-width:
      0;

    min-height:
      38px;

    padding:
      7px 7px;

    gap:
      5px;

    font-size:
      10px;

    overflow:
      hidden;
  }


  .pedidos-page__actions
  .pedidos-button span {
    min-width:
      0;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  .pedidos-page__actions
  .pedidos-button svg {
    width:
      14px;

    height:
      14px;

    flex:
      0 0 14px;
  }


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

  .pedidos-metrics {
    width:
      100%;

    max-width:
      100%;

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

    gap:
      7px;
  }


  .pedidos-metric-card {
    width:
      100%;

    min-width:
      0;

    min-height:
      82px;

    padding:
      10px;

    gap:
      8px;

    border-radius:
      9px;
  }


  .pedidos-metric-card:last-child:nth-child(
    odd
  ) {
    grid-column:
      1 /
      -1;
  }


  .pedidos-metric-card__icon {
    width:
      30px;

    height:
      30px;

    flex:
      0 0 30px;

    border-radius:
      7px;
  }


  .pedidos-metric-card__icon svg {
    width:
      15px;

    height:
      15px;
  }


  .pedidos-metric-card__body {
    width:
      calc(
        100% -
        38px
      );

    min-width:
      0;
  }


  .pedidos-metric-card__label {
    width:
      100%;

    font-size:
      9px;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }


  .pedidos-metric-card__value {
    width:
      100%;

    max-width:
      100%;

    font-size:
      clamp(
        13px,
        4vw,
        17px
      );

    line-height:
      1.2;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;

    word-break:
      break-word;
  }


  .pedidos-metric-card__hint {
    width:
      100%;

    max-width:
      100%;

    font-size:
      8px;

    line-height:
      1.3;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }


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

  .pedidos-panel {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    overflow:
      hidden;

    border-radius:
      10px;
  }


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

  .pedidos-toolbar {
    width:
      100%;

    min-width:
      0;

    padding:
      9px;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      7px;

    overflow:
      visible;
  }


  .pedidos-toolbar__search {
    width:
      100%;

    max-width:
      none;

    min-width:
      0;

    flex:
      none;
  }


  .pedidos-toolbar__search input {
    width:
      100%;

    min-width:
      0;

    height:
      39px;

    min-height:
      39px;

    padding-left:
      34px;

    padding-right:
      35px;

    font-size:
      11px;
  }


  .pedidos-toolbar__search input::placeholder {
    text-overflow:
      ellipsis;
  }


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

  .pedidos-toolbar__actions {
    width:
      100%;

    min-width:
      0;

    display:
      grid;

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

    align-items:
      stretch;

    gap:
      4px;
  }


  .pedidos-toolbar__actions >
  .pedidos-button,
  .pedidos-toolbar-menu {
    width:
      100%;

    min-width:
      0;
  }


  .pedidos-toolbar-menu >
  .pedidos-button {
    width:
      100%;

    min-width:
      0;

    height:
      36px;

    min-height:
      36px;

    padding:
      6px;

    font-size:
      10px;
  }


  .pedidos-toolbar__actions >
  .pedidos-button {
    width:
      100%;

    min-width:
      0;

    height:
      36px;

    min-height:
      36px;

    padding:
      6px;

    font-size:
      10px;
  }


  .pedidos-toolbar__actions
  .pedidos-button span:not(
    .pedidos-toolbar__counter
  ) {
    min-width:
      0;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  /* =======================================================
     POPOVERS
     ======================================================= */

  .pedidos-toolbar-menu {
    position:
      static;
  }


  .pedidos-popover {
    position:
      fixed;

    top:
      auto;

    right:
      10px;

    bottom:
      10px;

    left:
      10px;

    z-index:
      600;

    width:
      auto;

    max-width:
      none;

    max-height:
      min(
        70dvh,
        520px
      );

    overflow-x:
      hidden;

    overflow-y:
      auto;

    border-radius:
      12px;
  }


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

  .pedidos-filters {
    width:
      100%;

    min-width:
      0;

    padding:
      9px;

    overflow:
      hidden;
  }


  .pedidos-filters__grid {
    width:
      100%;

    min-width:
      0;

    grid-template-columns:
      1fr;

    gap:
      8px;
  }


  .pedidos-field {
    width:
      100%;

    min-width:
      0;
  }


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

    max-width:
      100%;

    min-width:
      0;
  }


  .pedidos-filters__footer {
    width:
      100%;

    display:
      grid;

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

    gap:
      6px;
  }


  .pedidos-filters__footer
  .pedidos-button {
    width:
      100%;

    min-width:
      0;
  }


  /* =======================================================
     CABECERA DE RESULTADOS
     ======================================================= */

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

    min-width:
      0;

    min-height:
      40px;

    padding:
      7px 9px;

    gap:
      7px;
  }


  .pedidos-table-header__left {
    min-width:
      0;

    flex:
      1;
  }


  .pedidos-table-header__right {
    flex:
      0 0 auto;
  }


  .pedidos-results-text {
    display:
      block;

    max-width:
      100%;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;

    font-size:
      9px;
  }


  .pedidos-limit {
    gap:
      4px;

    font-size:
      8px;
  }


  .pedidos-limit select {
    min-width:
      52px;

    width:
      52px;

    min-height:
      29px;

    padding:
      3px 4px;

    font-size:
      9px;
  }


  /* =======================================================
     IMPORTANTE
     ELIMINAMOS COMPLETAMENTE EL SCROLL HORIZONTAL
     ======================================================= */

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

    max-width:
      100%;

    min-width:
      0;

    overflow:
      hidden !important;
  }


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

    max-width:
      100%;

    min-width:
      0;

    overflow-x:
      hidden !important;

    overflow-y:
      visible;

    scrollbar-width:
      none;
  }


  .pedidos-table-scroll::-webkit-scrollbar {
    display:
      none !important;

    width:
      0 !important;

    height:
      0 !important;
  }


  /* =======================================================
     TABLA -> TARJETAS
     ======================================================= */

  .pedidos-table {
    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    display:
      block;

    table-layout:
      fixed;

    border-collapse:
      separate;

    border-spacing:
      0;

    background:
      transparent;
  }


  .pedidos-table thead {
    display:
      none;
  }


  .pedidos-table tbody {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    display:
      flex;

    flex-direction:
      column;

    gap:
      8px;

    padding:
      8px;

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


  .pedidos-table__row {
    position:
      relative;

    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    display:
      grid;

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

    overflow:
      hidden;

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

    border-radius:
      9px;

    background:
      var(
        --pedidos-surface
      );

    box-shadow:
      0 1px 2px rgba(
        0,
        0,
        0,
        0.025
      );

    cursor:
      pointer;
  }


  .pedidos-table__td {
    position:
      relative;

    width:
      auto;

    min-width:
      0;

    max-width:
      100%;

    min-height:
      52px;

    padding:
      22px 9px 8px;

    display:
      block;

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

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

    background:
      var(
        --pedidos-surface
      );

    text-align:
      left !important;

    white-space:
      normal !important;

    overflow:
      hidden;

    font-size:
      10px;
  }


  .pedidos-table__td:nth-child(
    even
  ) {
    border-right:
      0 !important;
  }


  .pedidos-table__td::before {
    content:
      "";

    position:
      absolute;

    top:
      7px;

    left:
      9px;

    right:
      9px;

    display:
      block;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;

    color:
      var(
        --pedidos-muted
      );

    font-size:
      7.5px;

    line-height:
      1;

    font-weight:
      850;

    letter-spacing:
      0.055em;

    text-transform:
      uppercase;
  }


  /* =======================================================
     LABELS DE CADA CAMPO
     ======================================================= */

  .pedidos-table__td[
    data-column="numero_pedido"
  ]::before {
    content:
      "Pedido";
  }


  .pedidos-table__td[
    data-column="fecha_pedido"
  ]::before {
    content:
      "Fecha";
  }


  .pedidos-table__td[
    data-column="cliente"
  ]::before {
    content:
      "Cliente";
  }


  .pedidos-table__td[
    data-column="lista_precio"
  ]::before {
    content:
      "Lista";
  }


  .pedidos-table__td[
    data-column="productos"
  ]::before {
    content:
      "Productos";
  }


  .pedidos-table__td[
    data-column="unidades"
  ]::before {
    content:
      "Unidades";
  }


  .pedidos-table__td[
    data-column="factura_a"
  ]::before {
    content:
      "Factura A";
  }


  .pedidos-table__td[
    data-column="factura_b"
  ]::before {
    content:
      "Factura B";
  }


  .pedidos-table__td[
    data-column="remito"
  ]::before {
    content:
      "Remito";
  }


  .pedidos-table__td[
    data-column="total"
  ]::before {
    content:
      "Total";
  }


  .pedidos-table__td[
    data-column="estado"
  ]::before {
    content:
      "Estado";
  }


  .pedidos-table__td[
    data-column="facturacion"
  ]::before {
    content:
      "Facturación";
  }


  .pedidos-table__td[
    data-column="prioridad"
  ]::before {
    content:
      "Prioridad";
  }


  .pedidos-table__td[
    data-column="responsable"
  ]::before {
    content:
      "Responsable";
  }


  .pedidos-table__td[
    data-column="moneda"
  ]::before {
    content:
      "Moneda";
  }


  .pedidos-table__td[
    data-column="actualizado"
  ]::before {
    content:
      "Actualizado";
  }


  .pedidos-table__td[
    data-column="acciones"
  ]::before {
    content:
      "Acciones";
  }


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

  .pedidos-table__td[
    data-column="numero_pedido"
  ] {
    grid-column:
      span 1;
  }


  .pedidos-order-number {
    width:
      100%;

    min-width:
      0;
  }


  .pedidos-order-number__main {
    max-width:
      100%;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;

    font-size:
      10px;
  }


  .pedidos-order-number__secondary {
    max-width:
      100%;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


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

  .pedidos-date-cell {
    width:
      100%;

    min-width:
      0;
  }


  .pedidos-date-cell span,
  .pedidos-date-cell small {
    max-width:
      100%;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  /* =======================================================
     CLIENTE OCUPA TODO EL ANCHO
     ======================================================= */

  .pedidos-table__td[
    data-column="cliente"
  ] {
    grid-column:
      1 /
      -1;

    border-right:
      0 !important;
  }


  .pedidos-client-cell {
    width:
      100%;

    min-width:
      0;

    gap:
      7px;
  }


  .pedidos-client-cell__avatar {
    width:
      28px;

    height:
      28px;

    flex:
      0 0 28px;

    border-radius:
      7px;
  }


  .pedidos-client-cell__content {
    min-width:
      0;

    max-width:
      calc(
        100% -
        35px
      );

    flex:
      1;
  }


  .pedidos-client-cell__content strong,
  .pedidos-client-cell__content small {
    display:
      block;

    width:
      100%;

    max-width:
      100%;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  /* =======================================================
     LISTA
     ======================================================= */

  .pedidos-list-cell {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;
  }


  .pedidos-list-cell strong,
  .pedidos-list-cell small {
    width:
      100%;

    max-width:
      100%;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  /* =======================================================
     IMPORTES
     ======================================================= */

  .pedidos-table__td--money,
  .pedidos-table__td--number {
    text-align:
      left !important;

    white-space:
      normal !important;
  }


  .pedidos-money,
  .pedidos-table__td--total strong {
    display:
      block;

    width:
      100%;

    max-width:
      100%;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;

    font-size:
      10px;
  }


  /* =======================================================
     TOTAL DESTACADO
     ======================================================= */

  .pedidos-table__td[
    data-column="total"
  ] {
    background:
      var(
        --pedidos-surface-2
      );
  }


  .pedidos-table__td[
    data-column="total"
  ]
  strong {
    font-size:
      11px;

    font-weight:
      900;
  }


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

  .pedidos-badge,
  .pedidos-currency-badge {
    max-width:
      100%;

    min-height:
      20px;

    padding:
      3px 6px;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;

    font-size:
      8px;
  }


  /* =======================================================
     ACCIONES
     ======================================================= */

  .pedidos-table__td[
    data-column="acciones"
  ] {
    display:
      flex;

    align-items:
      center;

    justify-content:
      flex-start;

    padding-top:
      22px;
  }


  .pedidos-row-action {
    width:
      30px;

    height:
      30px;

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

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


  /* =======================================================
     EVITAR DOBLE BORDE FINAL
     ======================================================= */

  .pedidos-table__row
  .pedidos-table__td:last-child {
    border-bottom:
      0 !important;
  }


  /* =======================================================
     MENÚ DE ACCIONES
     ======================================================= */

  .pedidos-row-menu {
    width:
      min(
        210px,
        calc(
          100vw -
          24px
        )
      );

    max-width:
      calc(
        100vw -
        24px
      );

    overflow-x:
      hidden;
  }


  /* =======================================================
     PAGINACIÓN
     ======================================================= */

  .pedidos-pagination {
    width:
      100%;

    min-width:
      0;

    min-height:
      48px;

    padding:
      8px;

    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    gap:
      5px;

    overflow:
      hidden;
  }


  .pedidos-pagination__pages {
    min-width:
      0;

    flex:
      1;

    overflow:
      hidden;

    gap:
      2px;
  }


  .pedidos-pagination__button {
    min-width:
      29px;

    height:
      29px;

    padding:
      0 5px;

    font-size:
      9px;
  }


  .pedidos-pagination__button--nav {
    min-width:
      34px;

    width:
      34px;

    padding:
      0;
  }


  .pedidos-pagination__button--nav
  span {
    display:
      none;
  }


  .pedidos-pagination__ellipsis {
    min-width:
      16px;

    width:
      16px;

    font-size:
      9px;
  }


  /* =======================================================
     NOTIFICACIONES
     ======================================================= */

  .pedidos-notification {
    top:
      58px;

    right:
      8px;

    left:
      8px;

    width:
      auto;

    max-width:
      none;
  }


  /* =======================================================
     DRAWER
     ======================================================= */

  .pedido-drawer {
    right:
      0 !important;

    left:
      0 !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    border-left:
      0;

    overflow-x:
      hidden !important;
  }


  .pedido-drawer__header {
    width:
      100%;

    min-width:
      0;

    padding:
      11px;

    gap:
      8px;
  }


  .pedido-drawer__heading {
    min-width:
      0;

    max-width:
      calc(
        100% -
        40px
      );
  }


  .pedido-drawer__title-row {
    width:
      100%;

    min-width:
      0;
  }


  .pedido-drawer__title-row h2 {
    max-width:
      100%;

    font-size:
      16px;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }


  .pedido-drawer__subtitle {
    max-width:
      100%;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }


  .pedido-drawer__body {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    padding:
      9px;

    overflow-x:
      hidden !important;
  }


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

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

    gap:
      6px;
  }


  .pedido-detail-info-grid {
    width:
      100%;

    grid-template-columns:
      1fr;

    gap:
      6px;
  }


  /* =======================================================
     TABLA DETALLE -> SIN SCROLL HORIZONTAL
     ======================================================= */

  .pedido-detail-items-scroll {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    overflow-x:
      hidden !important;

    scrollbar-width:
      none;
  }


  .pedido-detail-items-scroll::-webkit-scrollbar {
    display:
      none !important;
  }


  .pedido-detail-items {
    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;
  }


  /* =======================================================
     FOOTER DRAWER
     ======================================================= */

  .pedido-drawer__footer {
    width:
      100%;

    min-width:
      0;

    padding:
      8px;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      7px;
  }


  .pedido-drawer__footer-info {
    width:
      100%;
  }


  .pedido-drawer__footer-actions {
    width:
      100%;

    display:
      grid;

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

    gap:
      5px;
  }


  .pedido-drawer__footer-actions
  .pedidos-button {
    width:
      100%;

    min-width:
      0;
  }


  /* =======================================================
     EDITOR
     ======================================================= */

  .pedido-editor {
    right:
      6px !important;

    left:
      6px !important;

    width:
      auto !important;

    max-width:
      calc(
        100% -
        12px
      ) !important;

    min-width:
      0 !important;

    overflow-x:
      hidden !important;
  }


  .pedido-editor__body {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    overflow-x:
      hidden !important;
  }


  /* =======================================================
     INPUTS EN IPHONE / ANDROID
     EVITA ZOOM Y DESBORDES
     ======================================================= */

  #pedidosPage input,
  #pedidosPage select,
  #pedidosPage textarea {
    max-width:
      100%;
  }
}


/* =========================================================
   TELÉFONOS
   ========================================================= */

@media (
  max-width:
    560px
) {

  .app-content {
    padding-left:
      7px !important;

    padding-right:
      7px !important;
  }


  #pedidosPage {
    gap:
      8px;
  }


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

  .pedidos-page__actions {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .pedidos-page__actions
  .pedidos-button {
    min-height:
      36px;

    padding:
      6px 4px;

    font-size:
      9px;
  }


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

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


  .pedidos-metric-card,
  .pedidos-metric-card:last-child:nth-child(
    odd
  ) {
    grid-column:
      auto;
  }


  .pedidos-metric-card {
    min-height:
      68px;

    padding:
      9px;
  }


  .pedidos-metric-card__body {
    display:
      grid;

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

    grid-template-rows:
      auto
      auto;

    column-gap:
      8px;

    row-gap:
      2px;

    align-items:
      center;
  }


  .pedidos-metric-card__label {
    grid-column:
      1;

    grid-row:
      1;

    align-self:
      end;
  }


  .pedidos-metric-card__value {
    grid-column:
      2;

    grid-row:
      1 /
      3;

    align-self:
      center;

    max-width:
      170px;

    text-align:
      right;

    font-size:
      14px;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }


  .pedidos-metric-card__hint {
    grid-column:
      1;

    grid-row:
      2;

    align-self:
      start;
  }


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

  .pedidos-toolbar {
    padding:
      7px;
  }


  .pedidos-toolbar__actions {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .pedidos-toolbar__actions
  .pedidos-button {
    gap:
      4px;

    padding:
      5px 3px;

    font-size:
      9px;
  }


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

  .pedidos-table tbody {
    gap:
      7px;

    padding:
      7px;
  }


  .pedidos-table__row {
    border-radius:
      8px;
  }


  .pedidos-table__td {
    min-height:
      49px;

    padding:
      21px 8px 7px;

    font-size:
      9.5px;
  }


  .pedidos-table__td::before {
    top:
      7px;

    left:
      8px;

    right:
      8px;

    font-size:
      7px;
  }


  /* =======================================================
     CAMPOS IMPORTANTES DE ANCHO COMPLETO
     ======================================================= */

  .pedidos-table__td[
    data-column="cliente"
  ],
  .pedidos-table__td[
    data-column="lista_precio"
  ] {
    grid-column:
      1 /
      -1;

    border-right:
      0 !important;
  }


  /* =======================================================
     DRAWER
     ======================================================= */

  .pedido-detail-summary {
    grid-template-columns:
      1fr;
  }


  .pedido-drawer__footer-actions {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   TELÉFONOS MUY PEQUEÑOS
   ========================================================= */

@media (
  max-width:
    390px
) {

  .app-content {
    padding-left:
      5px !important;

    padding-right:
      5px !important;
  }


  .pedidos-page__title {
    font-size:
      21px;
  }


  .pedidos-page__subtitle {
    font-size:
      10px;
  }


  .pedidos-page__actions
  .pedidos-button span {
    display:
      none;
  }


  .pedidos-page__actions
  .pedidos-button {
    min-height:
      38px;
  }


  .pedidos-page__actions
  .pedidos-button svg {
    width:
      16px;

    height:
      16px;

    flex-basis:
      16px;
  }


  .pedidos-toolbar__actions
  .pedidos-button {
    font-size:
      8.5px;
  }


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


  .pedidos-table__td,
  .pedidos-table__td:nth-child(
    even
  ),
  .pedidos-table__td:nth-child(
    odd
  ) {
    grid-column:
      1 !important;

    border-right:
      0 !important;
  }


  .pedidos-table__td:last-child {
    border-bottom:
      0 !important;
  }


  .pedidos-metric-card__value {
    max-width:
      145px;

    font-size:
      12px;
  }
}


/* =========================================================
   ÚLTIMA PROTECCIÓN
   ABSOLUTAMENTE NADA PUEDE ENSANCHAR LA PÁGINA
   ========================================================= */

@media (
  max-width:
    820px
) {

  #pedidosPage,
  #pedidosPage section,
  #pedidosPage article,
  #pedidosPage div,
  #pedidosPage form,
  #pedidosPage header,
  #pedidosPage footer,
  #pedidosPage aside {
    max-width:
      100%;
  }


  #pedidosPage img,
  #pedidosPage svg {
    max-width:
      100%;
  }


  #pedidosPage table {
    max-width:
      100%;
  }


  #pedidosPage pre,
  #pedidosPage code {
    max-width:
      100%;

    white-space:
      pre-wrap;

    overflow-wrap:
      anywhere;
  }


  .pedidos-table-scroll,
  .pedido-detail-items-scroll,
  .pedido-editor-items__scroll {
    scrollbar-width:
      none !important;
  }


  .pedidos-table-scroll::-webkit-scrollbar,
  .pedido-detail-items-scroll::-webkit-scrollbar,
  .pedido-editor-items__scroll::-webkit-scrollbar {
    width:
      0 !important;

    height:
      0 !important;

    display:
      none !important;
  }
}/* =========================================================
   WIRTZ HUB · PEDIDOS
   FIX MOBILE · TEXTO SUPERPUESTO EN TARJETAS
   AGREGAR AL FINAL DE:
   frontend/src/pages/facturacion-cobranzas/pedidos/pedidos.css
   ========================================================= */

@media (
  max-width:
    820px
) {

  /* =======================================================
     CELDAS
     MÁS ESPACIO ENTRE LABEL Y CONTENIDO
     ======================================================= */

  .pedidos-table__td {
    position:
      relative !important;

    min-height:
      64px !important;

    padding:
      29px 10px 10px !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      flex-start !important;

    justify-content:
      flex-start !important;

    gap:
      3px !important;

    line-height:
      1.3 !important;

    overflow:
      hidden !important;
  }


  /* =======================================================
     LABEL SUPERIOR
     ======================================================= */

  .pedidos-table__td::before {
    position:
      absolute !important;

    top:
      9px !important;

    left:
      10px !important;

    right:
      10px !important;

    height:
      11px !important;

    margin:
      0 !important;

    padding:
      0 !important;

    display:
      block !important;

    font-size:
      7px !important;

    line-height:
      11px !important;

    font-weight:
      900 !important;

    letter-spacing:
      0.07em !important;

    text-transform:
      uppercase !important;

    white-space:
      nowrap !important;

    overflow:
      hidden !important;

    text-overflow:
      ellipsis !important;

    color:
      var(
        --pedidos-muted
      ) !important;

    pointer-events:
      none;
  }


  /* =======================================================
     TODO EL CONTENIDO INTERNO
     ======================================================= */

  .pedidos-table__td >
  * {
    position:
      relative;

    z-index:
      1;

    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    margin-top:
      0 !important;
  }


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

  .pedidos-order-number {
    width:
      100%;

    min-width:
      0;

    display:
      flex;

    flex-direction:
      column;

    gap:
      2px;
  }


  .pedidos-order-number__main {
    display:
      block;

    width:
      100%;

    max-width:
      100%;

    margin:
      0;

    font-size:
      10px !important;

    line-height:
      1.25 !important;

    font-weight:
      900;

    white-space:
      nowrap;

    overflow:
      hidden;

    text-overflow:
      ellipsis;
  }


  .pedidos-order-number__secondary {
    display:
      block;

    width:
      100%;

    max-width:
      100%;

    margin:
      0;

    font-size:
      8px !important;

    line-height:
      1.2 !important;

    white-space:
      nowrap;

    overflow:
      hidden;

    text-overflow:
      ellipsis;
  }


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

  .pedidos-date-cell {
    width:
      100%;

    min-width:
      0;

    display:
      flex;

    flex-direction:
      column;

    gap:
      2px;
  }


  .pedidos-date-cell span {
    display:
      block;

    margin:
      0 !important;

    font-size:
      10px !important;

    line-height:
      1.25 !important;

    font-weight:
      800;
  }


  .pedidos-date-cell small {
    display:
      block;

    margin:
      0 !important;

    font-size:
      8px !important;

    line-height:
      1.2 !important;
  }


  /* =======================================================
     CLIENTE
     ======================================================= */

  .pedidos-table__td[
    data-column="cliente"
  ] {
    min-height:
      70px !important;
  }


  .pedidos-client-cell {
    width:
      100%;

    min-width:
      0;

    display:
      flex;

    flex-direction:
      row !important;

    align-items:
      center !important;

    gap:
      8px !important;
  }


  .pedidos-client-cell__avatar {
    width:
      30px !important;

    height:
      30px !important;

    min-width:
      30px !important;

    flex:
      0 0 30px !important;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    margin:
      0 !important;

    font-size:
      10px;

    line-height:
      1;
  }


  .pedidos-client-cell__content {
    min-width:
      0;

    flex:
      1;

    display:
      flex;

    flex-direction:
      column;

    gap:
      2px;
  }


  .pedidos-client-cell__content strong {
    display:
      block;

    width:
      100%;

    max-width:
      100%;

    margin:
      0 !important;

    font-size:
      10px !important;

    line-height:
      1.25 !important;

    white-space:
      normal !important;

    overflow:
      visible !important;

    text-overflow:
      clip !important;

    overflow-wrap:
      anywhere;
  }


  .pedidos-client-cell__content small {
    display:
      block;

    width:
      100%;

    max-width:
      100%;

    margin:
      0 !important;

    font-size:
      8px !important;

    line-height:
      1.2 !important;

    white-space:
      normal !important;

    overflow-wrap:
      anywhere;
  }


  /* =======================================================
     LISTA DE PRECIOS
     ======================================================= */

  .pedidos-table__td[
    data-column="lista_precio"
  ] {
    min-height:
      68px !important;
  }


  .pedidos-list-cell {
    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

    display:
      flex;

    flex-direction:
      column;

    gap:
      3px;
  }


  .pedidos-list-cell strong {
    width:
      100%;

    max-width:
      100%;

    margin:
      0 !important;

    font-size:
      10px !important;

    line-height:
      1.25 !important;

    white-space:
      normal !important;

    overflow:
      visible !important;

    text-overflow:
      clip !important;

    overflow-wrap:
      anywhere;
  }


  .pedidos-list-cell small {
    width:
      100%;

    max-width:
      100%;

    margin:
      0 !important;

    font-size:
      8px !important;

    line-height:
      1.25 !important;

    white-space:
      normal !important;

    overflow-wrap:
      anywhere;
  }


  /* =======================================================
     PRODUCTOS / UNIDADES
     ======================================================= */

  .pedidos-table__td[
    data-column="productos"
  ],
  .pedidos-table__td[
    data-column="unidades"
  ] {
    min-height:
      58px !important;

    justify-content:
      flex-start !important;

    text-align:
      left !important;

    font-size:
      11px !important;

    line-height:
      1.2 !important;

    font-weight:
      850 !important;
  }


  /* =======================================================
     DINERO
     ======================================================= */

  .pedidos-table__td[
    data-column="factura_a"
  ],
  .pedidos-table__td[
    data-column="factura_b"
  ],
  .pedidos-table__td[
    data-column="remito"
  ],
  .pedidos-table__td[
    data-column="total"
  ] {
    min-height:
      60px !important;
  }


  .pedidos-money,
  .pedidos-table__td[
    data-column="total"
  ]
  strong {
    display:
      block;

    width:
      100%;

    max-width:
      100%;

    margin:
      0 !important;

    font-size:
      11px !important;

    line-height:
      1.25 !important;

    font-weight:
      900 !important;

    white-space:
      nowrap !important;

    overflow:
      hidden;

    text-overflow:
      ellipsis;
  }


  /* =======================================================
     ESTADO
     ======================================================= */

  .pedidos-table__td[
    data-column="estado"
  ],
  .pedidos-table__td[
    data-column="facturacion"
  ],
  .pedidos-table__td[
    data-column="prioridad"
  ],
  .pedidos-table__td[
    data-column="moneda"
  ] {
    min-height:
      62px !important;
  }


  .pedidos-badge,
  .pedidos-currency-badge {
    width:
      auto !important;

    max-width:
      100%;

    min-height:
      21px;

    margin:
      0 !important;

    padding:
      4px 7px;

    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    font-size:
      8px !important;

    line-height:
      1 !important;
  }


  /* =======================================================
     ACCIONES
     ======================================================= */

  .pedidos-table__td[
    data-column="acciones"
  ] {
    min-height:
      62px !important;

    padding-top:
      27px !important;

    align-items:
      flex-start !important;

    justify-content:
      flex-start !important;
  }


  .pedidos-row-action {
    width:
      30px !important;

    height:
      30px !important;

    min-width:
      30px !important;

    flex:
      0 0 30px !important;

    margin:
      0 !important;

    padding:
      0 !important;
  }


  /* =======================================================
     RESPONSABLE / ACTUALIZADO
     ======================================================= */

  .pedidos-table__td[
    data-column="responsable"
  ],
  .pedidos-table__td[
    data-column="actualizado"
  ] {
    min-height:
      60px !important;

    overflow-wrap:
      anywhere;
  }


  /* =======================================================
     EVITAR QUE HOVER CAMBIE LAYOUT
     ======================================================= */

  .pedidos-table__row:hover
  .pedidos-table__td {
    transform:
      none !important;
  }
}


/* =========================================================
   MOBILE MÁS CHICO
   ========================================================= */

@media (
  max-width:
    560px
) {

  .pedidos-table__td {
    min-height:
      62px !important;

    padding:
      28px 9px 9px !important;
  }


  .pedidos-table__td::before {
    top:
      8px !important;

    left:
      9px !important;

    right:
      9px !important;
  }


  .pedidos-table__td[
    data-column="cliente"
  ],
  .pedidos-table__td[
    data-column="lista_precio"
  ] {
    min-height:
      72px !important;
  }
}


/* =========================================================
   390 PX O MENOS
   ========================================================= */

@media (
  max-width:
    390px
) {

  .pedidos-table__td {
    min-height:
      58px !important;
  }


  .pedidos-table__td[
    data-column="cliente"
  ],
  .pedidos-table__td[
    data-column="lista_precio"
  ] {
    min-height:
      68px !important;
  }
}