/* =========================================================
   HUB NEURO APRENDIZAJE INFANTIL
   VENTAS · REMITOS OPERATIVOS

   UBICACIÓN:
   frontend/src/pages/ventas/remitos/remitos.css

   PARTE 1 DE 2

   INCLUYE:
   - VARIABLES
   - BASE
   - HEADER
   - BOTONES
   - MÉTRICAS
   - PANEL
   - FILTROS
   - TABLA
   - BADGES
   - PRODUCTOS
   - PAGINACIÓN
   - EMPTY / SKELETON
   - OVERLAY GLOBAL
   - MODAL BASE
   - DRAWER BASE
   ========================================================= */


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

.ventas-remitos-page {
  --rem-bg:
    var(
      --global-bg,
      #efefeb
    );

  --rem-surface:
    var(
      --global-surface,
      #ffffff
    );

  --rem-surface-hover:
    var(
      --global-surface-hover,
      #f6f6f3
    );

  --rem-surface-active:
    #eceee9;

  --rem-border:
    var(
      --global-border,
      #dadbd6
    );

  --rem-border-strong:
    var(
      --global-border-strong,
      #c7cac2
    );

  --rem-text:
    var(
      --global-text,
      #171a16
    );

  --rem-text-strong:
    var(
      --global-text-strong,
      #10120f
    );

  --rem-text-secondary:
    var(
      --global-text-secondary,
      #5e635a
    );

  --rem-text-muted:
    var(
      --global-text-muted,
      #858a82
    );

  --rem-success:
    #39865f;

  --rem-warning:
    #a87b2e;

  --rem-danger:
    #b54f4f;

  --rem-info:
    #52758e;

  --rem-radius:
    12px;

  --rem-radius-sm:
    9px;

  --rem-radius-xs:
    7px;

  --rem-transition:
    180ms
    cubic-bezier(
      .22,
      1,
      .36,
      1
    );

  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  margin:
    0;

  padding:
    0;

  color:
    var(--rem-text);

  font-size:
    13px;

  font-weight:
    600;

  overflow-x:
    hidden;
}


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

html[data-theme="dark"]
.ventas-remitos-page {
  --rem-bg:
    #08090a;

  --rem-surface:
    #0f1012;

  --rem-surface-hover:
    #151719;

  --rem-surface-active:
    #1c1e21;

  --rem-border:
    #202226;

  --rem-border-strong:
    #32353a;

  --rem-text:
    #f4f4f5;

  --rem-text-strong:
    #ffffff;

  --rem-text-secondary:
    #b7bac0;

  --rem-text-muted:
    #80848b;
}


/* =========================================================
   BOX MODEL
   ========================================================= */

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


.ventas-remitos-page button,
.ventas-remitos-page input,
.ventas-remitos-page select,
.ventas-remitos-page textarea {
  font:
    inherit;
}


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

#ventasRemitosPage {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    16px;
}


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

#ventasRemitosPage
.ventas-header {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    24px;

  padding:
    4px 0 18px;

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


/* =========================================================
   HEADER COPY
   ========================================================= */

#ventasRemitosPage
.ventas-header-copy {
  min-width:
    0;

  flex:
    1;
}


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

.ventas-remitos-page
.ventas-eyebrow {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  margin-bottom:
    7px;

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

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}


.ventas-remitos-page
.ventas-eyebrow::before {
  content:
    "";

  width:
    5px;

  height:
    5px;

  flex:
    0 0 5px;

  border-radius:
    50%;

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


/* =========================================================
   TITLE
   ========================================================= */

#ventasRemitosPage
.ventas-title {
  margin:
    0;

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

  font-size:
    clamp(
      28px,
      2.2vw,
      36px
    );

  font-weight:
    820;

  line-height:
    1.05;

  letter-spacing:
    -.04em;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

#ventasRemitosPage
.ventas-description {
  max-width:
    760px;

  margin:
    9px 0 0;

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

  font-size:
    13px;

  font-weight:
    620;

  line-height:
    1.55;
}


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

#ventasRemitosPage
.ventas-header-actions {
  min-width:
    0;

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;
}


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

.ventas-remitos-page
.ventas-btn {
  min-height:
    39px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    0 13px;

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

  border-radius:
    9px;

  outline:
    0;

  background:
    transparent;

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

  font-size:
    12px;

  font-weight:
    760;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;

  user-select:
    none;

  transition:
    background-color
      var(--rem-transition),
    border-color
      var(--rem-transition),
    color
      var(--rem-transition),
    transform
      120ms ease;
}


.ventas-remitos-page
.ventas-btn svg {
  width:
    15px;

  height:
    15px;

  flex:
    0 0 15px;
}


.ventas-remitos-page
.ventas-btn:hover:not(:disabled) {
  border-color:
    var(--rem-border-strong);

  background:
    var(--rem-surface-hover);

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


.ventas-remitos-page
.ventas-btn:active:not(:disabled) {
  transform:
    scale(
      .97
    );
}


.ventas-remitos-page
.ventas-btn:disabled {
  opacity:
    .42;

  cursor:
    not-allowed;

  transform:
    none;
}


/* =========================================================
   PRIMARY
   ========================================================= */

.ventas-remitos-page
.ventas-btn-primary {
  border-color:
    #171a16;

  background:
    #171a16;

  color:
    #ffffff;
}


.ventas-remitos-page
.ventas-btn-primary:hover:not(:disabled) {
  border-color:
    #252923;

  background:
    #252923;

  color:
    #ffffff;
}


html[data-theme="dark"]
.ventas-remitos-page
.ventas-btn-primary {
  border-color:
    #f4f4f5;

  background:
    #f4f4f5;

  color:
    #08090a;
}


html[data-theme="dark"]
.ventas-remitos-page
.ventas-btn-primary:hover:not(:disabled) {
  border-color:
    #ffffff;

  background:
    #ffffff;

  color:
    #08090a;
}


/* =========================================================
   SECONDARY
   ========================================================= */

.ventas-remitos-page
.ventas-btn-secondary {
  background:
    var(--rem-surface);

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


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

.ventas-remitos-page
.ventas-btn-danger {
  border-color:
    color-mix(
      in srgb,
      var(--rem-danger) 40%,
      var(--rem-border)
    );

  background:
    transparent;

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


.ventas-remitos-page
.ventas-btn-danger:hover:not(:disabled) {
  border-color:
    var(--rem-danger);

  background:
    color-mix(
      in srgb,
      var(--rem-danger) 7%,
      var(--rem-surface)
    );

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


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

.ventas-remitos-page
.ventas-icon-btn {
  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

  display:
    inline-grid;

  place-items:
    center;

  padding:
    0;

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

  border-radius:
    7px;

  outline:
    0;

  background:
    transparent;

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

  cursor:
    pointer;

  transition:
    background-color
      var(--rem-transition),
    border-color
      var(--rem-transition),
    color
      var(--rem-transition),
    transform
      120ms ease;
}


.ventas-remitos-page
.ventas-icon-btn:hover:not(:disabled) {
  border-color:
    var(--rem-border-strong);

  background:
    var(--rem-surface-hover);

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


.ventas-remitos-page
.ventas-icon-btn:active:not(:disabled) {
  transform:
    scale(
      .94
    );
}


.ventas-remitos-page
.ventas-icon-btn:disabled {
  opacity:
    .38;

  cursor:
    not-allowed;
}


.ventas-remitos-page
.ventas-icon-btn svg {
  width:
    14px;

  height:
    14px;
}


/* =========================================================
   ICON DANGER
   ========================================================= */

.ventas-remitos-page
.ventas-icon-btn.is-danger {
  color:
    var(--rem-danger);
}


.ventas-remitos-page
.ventas-icon-btn.is-danger:hover {
  border-color:
    color-mix(
      in srgb,
      var(--rem-danger) 42%,
      var(--rem-border)
    );

  background:
    color-mix(
      in srgb,
      var(--rem-danger) 6%,
      var(--rem-surface)
    );

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


/* =========================================================
   CONTENT
   ========================================================= */

#ventasRemitosPage
.ventas-content {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  position:
    relative;
}


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

.remitos-page-content {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}


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

.remitos-metrics {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    9px;
}


/* =========================================================
   METRIC CARD
   ========================================================= */

.remitos-metric-card {
  width:
    100%;

  min-width:
    0;

  min-height:
    94px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  padding:
    12px;

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

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

  background:
    var(--rem-surface);

  color:
    var(--rem-text);

  text-align:
    left;

  cursor:
    pointer;

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


.remitos-metric-card:hover {
  border-color:
    var(--rem-border-strong);

  background:
    var(--rem-surface-hover);

  transform:
    translateY(
      -1px
    );
}


/* =========================================================
   METRIC ICON
   ========================================================= */

.remitos-metric-card
.ventas-metric-icon {
  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    9px;

  background:
    var(--rem-surface-hover);

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


.remitos-metric-card
.ventas-metric-icon svg {
  width:
    17px;

  height:
    17px;
}


/* =========================================================
   METRIC COPY
   ========================================================= */

.remitos-metric-card
.ventas-metric-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.remitos-metric-card
.ventas-metric-label {
  overflow:
    hidden;

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

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .05em;

  text-overflow:
    ellipsis;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


.remitos-metric-card
.ventas-metric-value {
  overflow:
    hidden;

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

  font-size:
    22px;

  font-weight:
    820;

  line-height:
    1.05;

  letter-spacing:
    -.035em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.remitos-list-panel {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;

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

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

  background:
    var(--rem-surface);

  overflow:
    visible;
}


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

.remitos-list-panel
.ventas-panel-header {
  width:
    100%;

  min-width:
    0;

  min-height:
    64px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    11px 13px;

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


.remitos-list-panel
.ventas-panel-header > div:first-child {
  min-width:
    0;
}


.remitos-list-panel
.ventas-panel-header h2 {
  margin:
    0;

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

  font-size:
    14px;

  font-weight:
    800;

  line-height:
    1.2;
}


.remitos-list-panel
.ventas-panel-header p {
  margin:
    4px 0 0;

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

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.45;
}


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

.remitos-list-panel
.ventas-panel-header-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


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

.remitos-toolbar {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    8px;

  align-items:
    center;

  padding:
    10px 11px;

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

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


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

.remitos-toolbar
.ventas-toolbar-search {
  width:
    100%;

  min-width:
    0;

  height:
    41px;

  position:
    relative;

  display:
    flex;

  align-items:
    center;

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

  border-radius:
    8px;

  background:
    var(--rem-surface-hover);

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


.remitos-toolbar
.ventas-toolbar-search:focus-within {
  border-color:
    var(--rem-border-strong);

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


.remitos-toolbar
.ventas-toolbar-search > svg {
  width:
    15px;

  height:
    15px;

  position:
    absolute;

  left:
    11px;

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

  pointer-events:
    none;
}


.remitos-toolbar
.ventas-toolbar-search input {
  width:
    100%;

  min-width:
    0;

  height:
    100%;

  padding:
    0 10px 0 36px;

  border:
    0;

  outline:
    0;

  background:
    transparent;

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

  font-size:
    11px;

  font-weight:
    650;
}


.remitos-toolbar
.ventas-toolbar-search input::placeholder {
  color:
    var(--rem-text-muted);

  opacity:
    1;
}


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

.remitos-toolbar
.ventas-toolbar-filters {
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        145px,
        1fr
      )
    )
    40px;

  gap:
    6px;
}


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

.remitos-toolbar
select {
  width:
    100%;

  min-width:
    0;

  height:
    41px;

  padding:
    0 9px;

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

  border-radius:
    8px;

  outline:
    0;

  background:
    var(--rem-surface);

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

  font-size:
    10px;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    border-color
      var(--rem-transition),
    color
      var(--rem-transition);
}


.remitos-toolbar
select:hover,
.remitos-toolbar
select:focus {
  border-color:
    var(--rem-border-strong);

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


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

.remitos-table-shell {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  overflow:
    visible;
}


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

.remitos-table {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  table-layout:
    fixed;

  border-collapse:
    collapse;

  border-spacing:
    0;
}


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

.remitos-table thead th {
  height:
    42px;

  padding:
    0 9px;

  overflow:
    hidden;

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

  background:
    var(--rem-surface-hover);

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

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .045em;

  text-align:
    left;

  text-overflow:
    ellipsis;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


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

.remitos-table tbody tr {
  transition:
    background-color
      var(--rem-transition);
}


.remitos-table tbody tr:hover {
  background:
    var(--rem-surface-hover);
}


.remitos-table tbody td {
  min-width:
    0;

  height:
    64px;

  padding:
    9px;

  overflow:
    hidden;

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

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

  font-size:
    10px;

  font-weight:
    620;

  line-height:
    1.4;

  vertical-align:
    middle;
}


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


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

.remitos-table th:nth-child(1),
.remitos-table td:nth-child(1) {
  width:
    13%;
}


.remitos-table th:nth-child(2),
.remitos-table td:nth-child(2) {
  width:
    22%;
}


.remitos-table th:nth-child(3),
.remitos-table td:nth-child(3) {
  width:
    10%;
}


.remitos-table th:nth-child(4),
.remitos-table td:nth-child(4) {
  width:
    9%;
}


.remitos-table th:nth-child(5),
.remitos-table td:nth-child(5) {
  width:
    10%;
}


.remitos-table th:nth-child(6),
.remitos-table td:nth-child(6) {
  width:
    8%;
}


.remitos-table th:nth-child(7),
.remitos-table td:nth-child(7) {
  width:
    8%;
}


.remitos-table th:nth-child(8),
.remitos-table td:nth-child(8) {
  width:
    14%;
}


.remitos-table th:nth-child(9),
.remitos-table td:nth-child(9) {
  width:
    6%;
}


/* =========================================================
   CODE BUTTON
   ========================================================= */

.remitos-code-button {
  max-width:
    100%;

  display:
    block;

  padding:
    0;

  overflow:
    hidden;

  border:
    0;

  outline:
    0;

  background:
    transparent;

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

  font-size:
    11px;

  font-weight:
    780;

  text-align:
    left;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  cursor:
    pointer;
}


.remitos-code-button:hover {
  text-decoration:
    underline;

  text-underline-offset:
    3px;
}


/* =========================================================
   REFERENCE
   ========================================================= */

.remitos-reference {
  display:
    block;

  max-width:
    100%;

  margin-top:
    3px;

  overflow:
    hidden;

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

  font-size:
    8px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   CLIENT CELL
   ========================================================= */

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

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.remitos-client-cell strong {
  overflow:
    hidden;

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

  font-size:
    11px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.remitos-client-cell small {
  overflow:
    hidden;

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

  font-size:
    9px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   TYPE BADGE
   ========================================================= */

.remitos-type-badge {
  min-height:
    27px;

  display:
    inline-flex;

  align-items:
    center;

  padding:
    0 8px;

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

  border-radius:
    999px;

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

  font-size:
    9px;

  font-weight:
    750;

  white-space:
    nowrap;
}


.remitos-type-badge.is-reposicion {
  border-color:
    color-mix(
      in srgb,
      var(--rem-info) 35%,
      var(--rem-border)
    );

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


.remitos-type-badge.is-manual {
  color:
    var(--rem-text-secondary);
}


/* =========================================================
   STATUS BADGE
   ========================================================= */

.remitos-status-badge {
  min-height:
    27px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 8px;

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

  border-radius:
    999px;

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

  font-size:
    9px;

  font-weight:
    760;

  white-space:
    nowrap;
}


/* =========================================================
   BORRADOR
   ========================================================= */

.remitos-status-badge.is-draft {
  color:
    var(--rem-text-secondary);
}


/* =========================================================
   GENERADO
   ========================================================= */

.remitos-status-badge.is-generated {
  border-color:
    color-mix(
      in srgb,
      var(--rem-info) 38%,
      var(--rem-border)
    );

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


/* =========================================================
   ENVIADO
   ========================================================= */

.remitos-status-badge.is-sent {
  border-color:
    color-mix(
      in srgb,
      var(--rem-warning) 38%,
      var(--rem-border)
    );

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


/* =========================================================
   DESPACHADO
   ========================================================= */

.remitos-status-badge.is-dispatched {
  border-color:
    color-mix(
      in srgb,
      var(--rem-success) 38%,
      var(--rem-border)
    );

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


/* =========================================================
   ANULADO
   ========================================================= */

.remitos-status-badge.is-cancelled {
  border-color:
    color-mix(
      in srgb,
      var(--rem-danger) 38%,
      var(--rem-border)
    );

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


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

.remitos-table
.ventas-table-actions {
  overflow:
    visible !important;

  text-align:
    center;
}


.remitos-table td.ventas-table-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;
}


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

.remitos-pagination {
  width:
    100%;

  min-width:
    0;

  min-height:
    56px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    9px 11px;

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


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

.remitos-pagination
.ventas-pagination-copy {
  color:
    var(--rem-text-muted);

  font-size:
    10px;

  font-weight:
    650;
}


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

.remitos-pagination
.ventas-pagination-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


.remitos-pagination
.ventas-pagination-actions > span {
  color:
    var(--rem-text-muted);

  font-size:
    10px;

  font-weight:
    650;

  white-space:
    nowrap;
}


.remitos-pagination
.ventas-pagination-actions strong {
  color:
    var(--rem-text-strong);

  font-weight:
    800;
}


/* =========================================================
   LOADING BAR
   ========================================================= */

#ventasRemitosPage
.ventas-loading-bar {
  width:
    100%;

  height:
    2px;

  position:
    absolute;

  top:
    0;

  left:
    0;

  z-index:
    50;

  overflow:
    hidden;

  background:
    transparent;
}


#ventasRemitosPage
.ventas-loading-bar[hidden] {
  display:
    none;
}


#ventasRemitosPage
.ventas-loading-bar > span {
  width:
    34%;

  height:
    100%;

  display:
    block;

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

  animation:
    remitosLoadingBar
    1s
    ease-in-out
    infinite;
}


@keyframes remitosLoadingBar {

  from {
    transform:
      translateX(
        -120%
      );
  }

  to {
    transform:
      translateX(
        320%
      );
  }

}


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

.ventas-remitos-page
.ventas-section-skeleton {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}


.ventas-remitos-page
.ventas-section-skeleton-top {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.ventas-remitos-page
.ventas-section-skeleton-cards {
  display:
    grid;

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

  gap:
    9px;
}


.ventas-remitos-page
.ventas-skeleton-card {
  min-height:
    94px;

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

  border-radius:
    10px;

  background:
    var(--rem-surface-hover);

  animation:
    remitosSkeleton
    1.2s
    ease-in-out
    infinite;
}


.ventas-remitos-page
.ventas-skeleton-table {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  padding:
    12px;

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

  border-radius:
    10px;

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


.ventas-remitos-page
.ventas-skeleton-line {
  height:
    12px;

  border-radius:
    5px;

  background:
    var(--rem-surface-active);

  animation:
    remitosSkeleton
    1.2s
    ease-in-out
    infinite;
}


.ventas-remitos-page
.ventas-skeleton-line.is-title {
  width:
    180px;

  height:
    22px;
}


.ventas-remitos-page
.ventas-skeleton-line.is-button {
  width:
    110px;

  height:
    39px;
}


@keyframes remitosSkeleton {

  0%,
  100% {
    opacity:
      .45;
  }

  50% {
    opacity:
      .82;
  }

}


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

.ventas-remitos-page
.ventas-empty-state {
  min-height:
    260px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    24px;

  text-align:
    center;
}


.ventas-remitos-page
.ventas-empty-icon {
  width:
    44px;

  height:
    44px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    3px;

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

  border-radius:
    10px;

  background:
    var(--rem-surface-hover);

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


.ventas-remitos-page
.ventas-empty-state h3,
.ventas-remitos-page
.ventas-empty-state h4 {
  margin:
    0;

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

  font-size:
    12px;

  font-weight:
    780;
}


.ventas-remitos-page
.ventas-empty-state p {
  max-width:
    440px;

  margin:
    0;

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

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.5;
}


.ventas-remitos-page
.ventas-empty-state-error
.ventas-empty-icon {
  color:
    var(--rem-danger);
}


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

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

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;
}


.remitos-product-cell img,
.remitos-product-placeholder {
  width:
    38px;

  height:
    46px;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

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

  border-radius:
    6px;

  background:
    var(--rem-surface-hover);

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

  object-fit:
    cover;
}


.remitos-product-cell > div:last-child {
  min-width:
    0;
}


.remitos-product-cell strong {
  display:
    block;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.remitos-product-cell small {
  display:
    block;

  margin-top:
    2px;

  overflow:
    hidden;

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

  font-size:
    8px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   GLOBAL OVERLAY ROOT

   ESTE ROOT ESTÁ MONTADO DIRECTAMENTE EN BODY.
   ========================================================= */

.remitos-global-overlay-root {
  --rem-bg:
    var(
      --global-bg,
      #efefeb
    );

  --rem-surface:
    var(
      --global-surface,
      #ffffff
    );

  --rem-surface-hover:
    var(
      --global-surface-hover,
      #f6f6f3
    );

  --rem-surface-active:
    #eceee9;

  --rem-border:
    var(
      --global-border,
      #dadbd6
    );

  --rem-border-strong:
    var(
      --global-border-strong,
      #c7cac2
    );

  --rem-text:
    var(
      --global-text,
      #171a16
    );

  --rem-text-strong:
    var(
      --global-text-strong,
      #10120f
    );

  --rem-text-secondary:
    var(
      --global-text-secondary,
      #5e635a
    );

  --rem-text-muted:
    var(
      --global-text-muted,
      #858a82
    );

  --rem-success:
    #39865f;

  --rem-warning:
    #a87b2e;

  --rem-danger:
    #b54f4f;

  --rem-info:
    #52758e;

  position:
    fixed;

  inset:
    0;

  z-index:
    2147483000;

  width:
    100vw;

  height:
    100dvh;

  pointer-events:
    none;
}


.remitos-global-overlay-root:empty {
  display:
    none;
}


html[data-theme="dark"]
.remitos-global-overlay-root {
  --rem-bg:
    #08090a;

  --rem-surface:
    #0f1012;

  --rem-surface-hover:
    #151719;

  --rem-surface-active:
    #1c1e21;

  --rem-border:
    #202226;

  --rem-border-strong:
    #32353a;

  --rem-text:
    #f4f4f5;

  --rem-text-strong:
    #ffffff;

  --rem-text-secondary:
    #b7bac0;

  --rem-text-muted:
    #80848b;
}


/* =========================================================
   BODY WHEN OVERLAY OPEN
   ========================================================= */

body.remitos-overlay-open {
  overflow:
    hidden !important;
}


/* =========================================================
   NATIVE DIALOG
   ========================================================= */

dialog.remitos-modal {
  width:
    min(
      calc(
        100vw - 36px
      ),
      760px
    );

  max-width:
    none;

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

  min-width:
    0;

  margin:
    auto;

  padding:
    0;

  overflow:
    hidden;

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

  border-radius:
    13px;

  outline:
    0;

  background:
    var(--rem-surface);

  color:
    var(--rem-text);

  box-shadow:
    0 28px 90px
    rgba(
      0,
      0,
      0,
      .42
    );

  pointer-events:
    auto;

  animation:
    remitosModalIn
    190ms
    cubic-bezier(
      .22,
      1,
      .36,
      1
    );
}


/* =========================================================
   DIALOG BACKDROP
   ========================================================= */

dialog.remitos-modal::backdrop {
  background:
    rgba(
      0,
      0,
      0,
      .64
    );

  backdrop-filter:
    blur(
      2px
    );

  -webkit-backdrop-filter:
    blur(
      2px
    );

  animation:
    remitosBackdropIn
    150ms
    ease;
}


@keyframes remitosBackdropIn {

  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }

}


@keyframes remitosModalIn {

  from {
    opacity:
      0;

    transform:
      translateY(
        8px
      )
      scale(
        .99
      );
  }

  to {
    opacity:
      1;

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

}


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

dialog.remitos-modal-sm {
  width:
    min(
      calc(
        100vw - 36px
      ),
      470px
    );
}


dialog.remitos-modal-md {
  width:
    min(
      calc(
        100vw - 36px
      ),
      640px
    );
}


dialog.remitos-modal-lg {
  width:
    min(
      calc(
        100vw - 36px
      ),
      820px
    );
}


dialog.remitos-modal-xl {
  width:
    min(
      calc(
        100vw - 36px
      ),
      1160px
    );
}


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

.remitos-modal-header {
  width:
    100%;

  min-width:
    0;

  min-height:
    66px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    11px 13px;

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

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


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

.remitos-modal-header
.ventas-modal-header-copy {
  min-width:
    0;

  flex:
    1;
}


.remitos-modal-header
.ventas-eyebrow {
  margin-bottom:
    3px;

  font-size:
    8px;
}


.remitos-modal-header h2 {
  margin:
    0;

  overflow:
    hidden;

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

  font-size:
    15px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    -.02em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.remitos-modal-header p {
  margin:
    3px 0 0;

  overflow:
    hidden;

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

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.4;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.remitos-global-overlay-root
.ventas-modal-body {
  width:
    100%;

  min-width:
    0;

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

  padding:
    13px;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;

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


.remitos-global-overlay-root
.ventas-modal-body::-webkit-scrollbar {
  width:
    5px;
}


.remitos-global-overlay-root
.ventas-modal-body::-webkit-scrollbar-thumb {
  border-radius:
    999px;

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


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

.remitos-global-overlay-root
.ventas-modal-footer {
  width:
    100%;

  min-width:
    0;

  min-height:
    58px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;

  padding:
    9px 13px;

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

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


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

.remitos-drawer-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    2147483000;

  display:
    flex;

  justify-content:
    flex-end;

  width:
    100vw;

  height:
    100dvh;

  background:
    rgba(
      0,
      0,
      0,
      .58
    );

  pointer-events:
    auto;

  animation:
    remitosBackdropIn
    150ms
    ease;
}


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

.remitos-drawer {
  width:
    min(
      390px,
      calc(
        100vw - 20px
      )
    );

  height:
    100dvh;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  border-left:
    1px solid
    var(--rem-border-strong);

  outline:
    0;

  background:
    var(--rem-surface);

  color:
    var(--rem-text);

  box-shadow:
    -24px 0 70px
    rgba(
      0,
      0,
      0,
      .30
    );

  animation:
    remitosDrawerIn
    190ms
    cubic-bezier(
      .22,
      1,
      .36,
      1
    );
}


@keyframes remitosDrawerIn {

  from {
    opacity:
      0;

    transform:
      translateX(
        30px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateX(
        0
      );
  }

}


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

.remitos-drawer-header {
  width:
    100%;

  min-width:
    0;

  min-height:
    74px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    12px;

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


.remitos-drawer-header > div:first-child {
  min-width:
    0;
}


.remitos-drawer-header h2 {
  margin:
    0;

  overflow:
    hidden;

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

  font-size:
    15px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.remitos-drawer-header p {
  margin:
    3px 0 0;

  overflow:
    hidden;

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

  font-size:
    9px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.remitos-global-overlay-root
.ventas-drawer-body {
  width:
    100%;

  min-width:
    0;

  flex:
    1;

  padding:
    10px;

  overflow-x:
    hidden;

  overflow-y:
    auto;
}


/* =========================================================
   ACTION GROUP
   ========================================================= */

.remitos-action-group {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  padding:
    8px 0;

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


.remitos-action-group:first-child {
  padding-top:
    0;
}


.remitos-action-group:last-child {
  padding-bottom:
    0;

  border-bottom:
    0;
}


/* =========================================================
   ACTION GROUP TITLE
   ========================================================= */

.remitos-action-group-title {
  display:
    block;

  padding:
    4px 7px 6px;

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

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .09em;

  text-transform:
    uppercase;
}


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

.remitos-action-row {
  width:
    100%;

  min-width:
    0;

  min-height:
    45px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  padding:
    0 9px;

  border:
    1px solid
    transparent;

  border-radius:
    8px;

  background:
    transparent;

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

  font-size:
    11px;

  font-weight:
    700;

  text-align:
    left;

  cursor:
    pointer;

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


.remitos-action-row:hover {
  border-color:
    var(--rem-border);

  background:
    var(--rem-surface-hover);

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


.remitos-action-row > svg:first-child {
  width:
    15px;

  height:
    15px;

  justify-self:
    center;
}


.remitos-action-row > svg:last-child {
  width:
    13px;

  height:
    13px;

  justify-self:
    end;

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


.remitos-action-row span {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   ACTION DANGER
   ========================================================= */

.remitos-action-row.is-danger {
  color:
    var(--rem-danger);
}


.remitos-action-row.is-danger:hover {
  border-color:
    color-mix(
      in srgb,
      var(--rem-danger) 35%,
      var(--rem-border)
    );

  background:
    color-mix(
      in srgb,
      var(--rem-danger) 6%,
      var(--rem-surface)
    );

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


/* =========================================================
   FOCUS
   ========================================================= */

.ventas-remitos-page
button:focus-visible,
.ventas-remitos-page
input:focus-visible,
.ventas-remitos-page
select:focus-visible,
.ventas-remitos-page
textarea:focus-visible {
  outline:
    2px solid
    var(--rem-border-strong);

  outline-offset:
    2px;
}


/* =========================================================
   DESKTOP MEDIUM
   ========================================================= */

@media (
  max-width:
  1250px
) {

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


  .remitos-toolbar {
    grid-template-columns:
      1fr;
  }


  .remitos-toolbar
  .ventas-toolbar-filters {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      )
      40px;
  }


  .remitos-table th:nth-child(8),
  .remitos-table td:nth-child(8) {
    display:
      none;
  }


  .remitos-table th:nth-child(2),
  .remitos-table td:nth-child(2) {
    width:
      28%;
  }


  .remitos-table th:nth-child(9),
  .remitos-table td:nth-child(9) {
    width:
      8%;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (
  max-width:
  900px
) {

  #ventasRemitosPage
  .ventas-header {
    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      14px;
  }


  #ventasRemitosPage
  .ventas-header-actions {
    justify-content:
      flex-start;
  }


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


  .remitos-toolbar
  .ventas-toolbar-filters {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .remitos-toolbar
  .ventas-toolbar-filters
  .ventas-btn-icon {
    width:
      100%;
  }


  .remitos-table th:nth-child(4),
  .remitos-table td:nth-child(4),
  .remitos-table th:nth-child(6),
  .remitos-table td:nth-child(6) {
    display:
      none;
  }

}


/* =========================================================
   PARTE 1 DE 2 TERMINA ACÁ

   PARTE 2:
   - DETALLE COMPLETO
   - TARJETAS CLIENTE / DOCUMENTO
   - TABLA DE LIBROS
   - OBSERVACIONES
   - EDITOR
   - CLIENTE SELECCIONADO
   - BUSCADOR CLIENTES
   - BUSCADOR LIBROS
   - ITEMS DEL EDITOR
   - HISTORIAL
   - DOCUMENTOS
   - CONFIRMACIONES
   - FILTRO FECHAS
   - RESPONSIVE MOBILE COMPLETO
   - DARK FINAL
   - SIN SCROLL HORIZONTAL
   ========================================================= *//* =========================================================
   HUB NEURO APRENDIZAJE INFANTIL
   VENTAS · REMITOS OPERATIVOS

   PARTE 2 DE 2

   CONTINÚA DIRECTAMENTE DEBAJO
   DE LA PARTE 1

   INCLUYE:
   - DETALLE
   - TARJETAS
   - LIBROS
   - OBSERVACIONES
   - EDITOR
   - CAMPOS
   - CLIENTE
   - BÚSQUEDAS
   - ITEMS
   - HISTORIAL
   - DOCUMENTOS
   - CONFIRMACIONES
   - MOBILE
   - DARK FINAL
   - NO HORIZONTAL SCROLL
   ========================================================= */


/* =========================================================
   DETAIL BODY
   ========================================================= */

.remitos-detail-body {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;
}


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

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

  min-width:
    0;

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

  border-radius:
    10px;

  background:
    var(--rem-surface-hover);

  overflow:
    hidden;
}


.remitos-detail-summary-main {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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


.remitos-detail-summary-main > div {
  min-width:
    0;

  min-height:
    64px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    3px;

  padding:
    10px 11px;

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


.remitos-detail-summary-main > div:last-child {
  border-right:
    0;
}


.remitos-detail-summary-main span {
  overflow:
    hidden;

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

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .07em;

  text-overflow:
    ellipsis;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


.remitos-detail-summary-main strong {
  overflow:
    hidden;

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

  font-size:
    11px;

  font-weight:
    780;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.remitos-detail-grid {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    8px;
}


/* =========================================================
   DETAIL CARD
   ========================================================= */

.remitos-detail-card {
  min-width:
    0;

  overflow:
    hidden;

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

  border-radius:
    9px;

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


.remitos-detail-card h3 {
  margin:
    0;

  padding:
    10px 11px;

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

  background:
    var(--rem-surface-hover);

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

  font-size:
    11px;

  font-weight:
    780;
}


/* =========================================================
   DETAIL DL
   ========================================================= */

.remitos-detail-card dl {
  margin:
    0;
}


.remitos-detail-card dl > div {
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    minmax(
      110px,
      .7fr
    )
    minmax(
      0,
      1.3fr
    );

  gap:
    10px;

  padding:
    9px 11px;

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


.remitos-detail-card dl > div:last-child {
  border-bottom:
    0;
}


.remitos-detail-card dt {
  color:
    var(--rem-text-muted);

  font-size:
    9px;

  font-weight:
    700;
}


.remitos-detail-card dd {
  min-width:
    0;

  margin:
    0;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    700;

  text-align:
    right;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.remitos-detail-section {
  width:
    100%;

  min-width:
    0;

  overflow:
    hidden;

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

  border-radius:
    10px;

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


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

.remitos-detail-section-header {
  width:
    100%;

  min-width:
    0;

  min-height:
    54px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    9px 11px;

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

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


.remitos-detail-section-header > div {
  min-width:
    0;
}


.remitos-detail-section-header h3 {
  margin:
    0;

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

  font-size:
    11px;

  font-weight:
    780;
}


.remitos-detail-section-header p {
  margin:
    3px 0 0;

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

  font-size:
    9px;

  font-weight:
    600;
}


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

.remitos-detail-table-shell {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;
}


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

  min-width:
    760px;

  border-collapse:
    collapse;
}


.remitos-detail-table thead th {
  height:
    38px;

  padding:
    0 8px;

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

  background:
    var(--rem-surface-hover);

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

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .04em;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


.remitos-detail-table tbody td {
  min-width:
    0;

  padding:
    8px;

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

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

  font-size:
    9px;

  font-weight:
    620;

  vertical-align:
    middle;
}


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


/* =========================================================
   DETAIL NOTE
   ========================================================= */

.remitos-note {
  margin:
    9px;

  padding:
    9px 10px;

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

  border-radius:
    8px;

  background:
    var(--rem-surface-hover);

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

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.5;

  overflow-wrap:
    anywhere;
}


.remitos-note.is-internal {
  border-style:
    dashed;
}


.remitos-note.is-internal strong {
  display:
    block;

  margin-bottom:
    4px;

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

  font-size:
    9px;

  font-weight:
    800;

  text-transform:
    uppercase;
}


.remitos-note.is-internal p {
  margin:
    0;
}


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

.remitos-empty-inline {
  min-height:
    90px !important;
}


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

.remitos-editor-form {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

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


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

.remitos-editor-body {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;
}


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

.remitos-editor-section {
  width:
    100%;

  min-width:
    0;

  overflow:
    visible;

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

  border-radius:
    10px;

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


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

.remitos-editor-section-heading {
  width:
    100%;

  min-width:
    0;

  min-height:
    50px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    9px 11px;

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

  background:
    var(--rem-surface-hover);

  border-radius:
    10px 10px 0 0;
}


.remitos-editor-section-heading h3 {
  margin:
    0;

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

  font-size:
    11px;

  font-weight:
    780;
}


.remitos-editor-section-heading p {
  margin:
    3px 0 0;

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

  font-size:
    9px;

  font-weight:
    600;
}


/* =========================================================
   FORM GRID
   ========================================================= */

.remitos-form-grid {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    8px;

  padding:
    10px;
}


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

.remitos-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.remitos-field-full {
  grid-column:
    1 / -1;
}


.remitos-field > span {
  color:
    var(--rem-text-secondary);

  font-size:
    9px;

  font-weight:
    750;
}


/* =========================================================
   INPUTS
   ========================================================= */

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

  min-width:
    0;

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

  border-radius:
    8px;

  outline:
    0;

  background:
    var(--rem-surface-hover);

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

  font-size:
    10px;

  font-weight:
    650;

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


.remitos-field input,
.remitos-field select {
  height:
    40px;

  padding:
    0 10px;
}


.remitos-field textarea {
  min-height:
    86px;

  padding:
    9px 10px;

  resize:
    vertical;

  line-height:
    1.45;
}


.remitos-field input:hover,
.remitos-field select:hover,
.remitos-field textarea:hover,
.remitos-field input:focus,
.remitos-field select:focus,
.remitos-field textarea:focus {
  border-color:
    var(--rem-border-strong);
}


.remitos-field input:focus,
.remitos-field select:focus,
.remitos-field textarea:focus {
  background:
    var(--rem-surface);
}


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

  opacity:
    1;
}


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

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


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


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

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

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  margin:
    10px;

  padding:
    8px;

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

  border-radius:
    8px;

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


.remitos-selected-client.is-empty {
  display:
    flex;

  align-items:
    center;

  min-height:
    54px;

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

  font-size:
    9px;

  font-weight:
    650;
}


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

.remitos-selected-client-icon {
  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    8px;

  background:
    var(--rem-surface);

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


.remitos-selected-client-icon svg {
  width:
    16px;

  height:
    16px;
}


.remitos-selected-client > div:nth-child(2) {
  min-width:
    0;
}


.remitos-selected-client strong {
  display:
    block;

  overflow:
    hidden;

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

  font-size:
    11px;

  font-weight:
    760;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.remitos-selected-client small {
  display:
    block;

  margin-top:
    2px;

  overflow:
    hidden;

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

  font-size:
    8px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   SEARCH BOX
   ========================================================= */

.remitos-search-box {
  width:
    calc(
      100% - 20px
    );

  min-width:
    0;

  height:
    41px;

  position:
    relative;

  display:
    flex;

  align-items:
    center;

  margin:
    10px;

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

  border-radius:
    8px;

  background:
    var(--rem-surface-hover);

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


.remitos-search-box:focus-within {
  border-color:
    var(--rem-border-strong);

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


.remitos-search-box > svg {
  width:
    15px;

  height:
    15px;

  position:
    absolute;

  left:
    11px;

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

  pointer-events:
    none;
}


.remitos-search-box input {
  width:
    100%;

  min-width:
    0;

  height:
    100%;

  padding:
    0 10px 0 36px;

  border:
    0;

  outline:
    0;

  background:
    transparent;

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

  font-size:
    10px;

  font-weight:
    650;
}


.remitos-search-box input::placeholder {
  color:
    var(--rem-text-muted);

  opacity:
    1;
}


/* =========================================================
   SEARCH RESULTS
   ========================================================= */

.remitos-search-results {
  width:
    calc(
      100% - 20px
    );

  max-height:
    300px;

  position:
    relative;

  z-index:
    50;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  margin:
    -4px 10px 10px;

  padding:
    5px;

  overflow-x:
    hidden;

  overflow-y:
    auto;

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

  border-radius:
    8px;

  background:
    var(--rem-surface);

  box-shadow:
    0 16px 38px
    rgba(
      0,
      0,
      0,
      .18
    );
}


/* =========================================================
   SEARCH RESULT
   ========================================================= */

.remitos-search-result {
  width:
    100%;

  min-width:
    0;

  min-height:
    52px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  padding:
    7px 8px;

  border:
    1px solid
    transparent;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(--rem-text);

  text-align:
    left;

  cursor:
    pointer;

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


.remitos-search-result:hover {
  border-color:
    var(--rem-border);

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


.remitos-search-result > div {
  min-width:
    0;
}


.remitos-search-result strong {
  display:
    block;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.remitos-search-result small {
  display:
    block;

  margin-top:
    2px;

  overflow:
    hidden;

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

  font-size:
    8px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.remitos-search-result > svg:last-child {
  width:
    13px;

  height:
    13px;

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


/* =========================================================
   BOOK SEARCH RESULT
   ========================================================= */

.remitos-book-search-result {
  grid-template-columns:
    38px
    minmax(
      0,
      1fr
    )
    18px;
}


.remitos-book-search-result > img,
.remitos-book-search-result
.remitos-product-placeholder {
  width:
    38px;

  height:
    46px;
}


/* =========================================================
   SEARCH LOADING / EMPTY
   ========================================================= */

.remitos-search-loading,
.remitos-search-empty {
  min-height:
    56px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  margin:
    0 10px 10px;

  padding:
    10px;

  border:
    1px dashed
    var(--rem-border);

  border-radius:
    8px;

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

  font-size:
    9px;

  font-weight:
    650;

  text-align:
    center;
}


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

.remitos-editor-items-list {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

  padding:
    0 10px 10px;
}


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

.remitos-editor-item {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    minmax(
      210px,
      1fr
    )
    minmax(
      360px,
      1.7fr
    )
    32px;

  align-items:
    center;

  gap:
    8px;

  padding:
    8px;

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

  border-radius:
    8px;

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


/* =========================================================
   EDITOR ITEM MAIN
   ========================================================= */

.remitos-editor-item-main {
  min-width:
    0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;
}


.remitos-editor-item-main > img,
.remitos-editor-item-main
.remitos-product-placeholder {
  width:
    38px;

  height:
    46px;
}


.remitos-editor-item-main > div:last-child {
  min-width:
    0;
}


.remitos-editor-item-main strong {
  display:
    block;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.remitos-editor-item-main small {
  display:
    block;

  margin-top:
    2px;

  overflow:
    hidden;

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

  font-size:
    8px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   EDITOR ITEM FIELDS
   ========================================================= */

.remitos-editor-item-fields {
  min-width:
    0;

  display:
    grid;

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

  gap:
    6px;
}


.remitos-editor-item-fields label {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.remitos-editor-item-fields label > span {
  color:
    var(--rem-text-muted);

  font-size:
    8px;

  font-weight:
    700;
}


.remitos-editor-item-fields input {
  width:
    100%;

  min-width:
    0;

  height:
    36px;

  padding:
    0 7px;

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

  border-radius:
    7px;

  outline:
    0;

  background:
    var(--rem-surface);

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

  font-size:
    9px;

  font-weight:
    650;
}


.remitos-editor-item-fields input:focus {
  border-color:
    var(--rem-border-strong);
}


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

.remitos-editor-empty {
  min-height:
    120px !important;

  margin:
    0 10px 10px;

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

  border-radius:
    8px;

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


/* =========================================================
   HISTORY BODY
   ========================================================= */

.remitos-history-body {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


/* =========================================================
   HISTORY ROW
   ========================================================= */

.remitos-history-row {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  align-items:
    start;

  gap:
    8px;

  padding:
    9px;

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

  border-radius:
    8px;

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


/* =========================================================
   HISTORY ICON
   ========================================================= */

.remitos-history-icon {
  width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    7px;

  background:
    var(--rem-surface);

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


.remitos-history-icon svg {
  width:
    14px;

  height:
    14px;
}


.remitos-history-row > div:last-child {
  min-width:
    0;
}


.remitos-history-row strong {
  display:
    block;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.remitos-history-row span {
  display:
    block;

  margin-top:
    2px;

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

  font-size:
    8px;

  font-weight:
    600;
}


.remitos-history-row small {
  display:
    block;

  margin-top:
    4px;

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

  font-size:
    8px;

  font-weight:
    650;
}


/* =========================================================
   DOCUMENT BODY
   ========================================================= */

.remitos-documents-body {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;
}


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

.remitos-documents-toolbar {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;
}


/* =========================================================
   DOCUMENT LIST
   ========================================================= */

.remitos-documents-list {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


/* =========================================================
   DOCUMENT ROW
   ========================================================= */

.remitos-document-row {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  padding:
    8px;

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

  border-radius:
    8px;

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


/* =========================================================
   DOCUMENT ICON
   ========================================================= */

.remitos-document-icon {
  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    8px;

  background:
    var(--rem-surface);

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


.remitos-document-copy {
  min-width:
    0;
}


.remitos-document-copy strong {
  display:
    block;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.remitos-document-copy small {
  display:
    block;

  margin-top:
    2px;

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

  font-size:
    8px;

  font-weight:
    600;
}


/* =========================================================
   ACTIVE DOCUMENT
   ========================================================= */

.remitos-document-active {
  min-height:
    25px;

  display:
    inline-flex;

  align-items:
    center;

  padding:
    0 8px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--rem-success) 38%,
      var(--rem-border)
    );

  border-radius:
    999px;

  color:
    var(--rem-success);

  font-size:
    8px;

  font-weight:
    760;

  white-space:
    nowrap;
}


/* =========================================================
   CONFIRM BODY
   ========================================================= */

.remitos-confirm-body {
  min-height:
    150px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


/* =========================================================
   CONFIRM ICON
   ========================================================= */

.remitos-confirm-icon {
  width:
    54px;

  height:
    54px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    12px;

  background:
    var(--rem-surface-hover);

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


.remitos-confirm-icon svg {
  width:
    22px;

  height:
    22px;
}


.remitos-confirm-icon.is-danger {
  border-color:
    color-mix(
      in srgb,
      var(--rem-danger) 35%,
      var(--rem-border)
    );

  background:
    color-mix(
      in srgb,
      var(--rem-danger) 6%,
      var(--rem-surface)
    );

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


/* =========================================================
   DARK SURFACES
   ========================================================= */

html[data-theme="dark"]
.remitos-detail-card,

html[data-theme="dark"]
.remitos-detail-section,

html[data-theme="dark"]
.remitos-editor-section {
  background:
    #0f1012;
}


html[data-theme="dark"]
.remitos-editor-item,

html[data-theme="dark"]
.remitos-history-row,

html[data-theme="dark"]
.remitos-document-row,

html[data-theme="dark"]
.remitos-note {
  background:
    #151719;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (
  max-width:
  900px
) {

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


  .remitos-detail-summary-main > div:nth-child(2) {
    border-right:
      0;
  }


  .remitos-detail-summary-main > div:nth-child(-n + 2) {
    border-bottom:
      1px solid
      var(--rem-border);
  }


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


  .remitos-editor-item {
    grid-template-columns:
      1fr;
  }


  .remitos-editor-item-fields {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .remitos-editor-item
  > .ventas-icon-btn {
    justify-self:
      flex-end;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
  max-width:
  720px
) {

  #ventasRemitosPage
  .ventas-header-actions {
    width:
      100%;

    display:
      grid;

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


  #ventasRemitosPage
  .ventas-header-actions
  .ventas-btn {
    width:
      100%;
  }


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


  .remitos-toolbar {
    grid-template-columns:
      1fr;
  }


  .remitos-toolbar
  .ventas-toolbar-filters {
    grid-template-columns:
      1fr;
  }


  .remitos-toolbar
  .ventas-toolbar-filters
  .ventas-btn-icon {
    width:
      100%;
  }


  .remitos-list-panel
  .ventas-panel-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .remitos-table-shell {
    overflow-x:
      auto;
  }


  .remitos-table {
    min-width:
      760px;
  }


  dialog.remitos-modal,
  dialog.remitos-modal-sm,
  dialog.remitos-modal-md,
  dialog.remitos-modal-lg,
  dialog.remitos-modal-xl {
    width:
      calc(
        100vw - 16px
      );

    max-width:
      calc(
        100vw - 16px
      );

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

    border-radius:
      10px;
  }


  .remitos-global-overlay-root
  .ventas-modal-body {
    max-height:
      calc(
        100dvh - 132px
      );

    padding:
      9px;
  }


  .remitos-modal-header {
    min-height:
      58px;

    padding:
      9px 10px;
  }


  .remitos-modal-header h2 {
    font-size:
      14px;
  }


  .remitos-global-overlay-root
  .ventas-modal-footer {
    display:
      grid;

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

    padding:
      8px 9px;
  }


  .remitos-global-overlay-root
  .ventas-modal-footer
  .ventas-btn {
    width:
      100%;
  }


  .remitos-detail-summary-main {
    grid-template-columns:
      1fr;
  }


  .remitos-detail-summary-main > div,
  .remitos-detail-summary-main > div:nth-child(2) {
    border-right:
      0;

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


  .remitos-detail-summary-main > div:last-child {
    border-bottom:
      0;
  }


  .remitos-detail-card dl > div {
    grid-template-columns:
      1fr;

    gap:
      3px;
  }


  .remitos-detail-card dd {
    text-align:
      left;
  }


  .remitos-detail-table-shell {
    overflow-x:
      hidden;
  }


  .remitos-detail-table {
    min-width:
      0;

    display:
      block;
  }


  .remitos-detail-table thead {
    display:
      none;
  }


  .remitos-detail-table tbody {
    display:
      flex;

    flex-direction:
      column;

    gap:
      7px;

    padding:
      8px;
  }


  .remitos-detail-table tbody tr {
    display:
      grid;

    grid-template-columns:
      1fr
      1fr;

    overflow:
      hidden;

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

    border-radius:
      8px;

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


  .remitos-detail-table tbody td {
    height:
      auto;

    min-height:
      52px;

    display:
      flex;

    align-items:
      center;

    padding:
      8px;

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

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


  .remitos-detail-table tbody td:first-child {
    grid-column:
      1 / -1;
  }


  .remitos-detail-table tbody td:nth-child(2n + 1) {
    border-right:
      0;
  }


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


  .remitos-form-grid {
    grid-template-columns:
      1fr;
  }


  .remitos-field-full {
    grid-column:
      auto;
  }


  .remitos-editor-item-fields {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .remitos-editor-item-fields
  label:last-child {
    grid-column:
      1 / -1;
  }


  .remitos-drawer {
    width:
      min(
        360px,
        100vw
      );
  }

}


/* =========================================================
   MOBILE SMALL
   ========================================================= */

@media (
  max-width:
  480px
) {

  #ventasRemitosPage
  .ventas-title {
    font-size:
      24px;
  }


  #ventasRemitosPage
  .ventas-header-actions {
    grid-template-columns:
      1fr;
  }


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


  .remitos-metric-card {
    min-height:
      82px;
  }


  .remitos-global-overlay-root
  .ventas-modal-footer {
    grid-template-columns:
      1fr;
  }


  .remitos-editor-item-fields {
    grid-template-columns:
      1fr;
  }


  .remitos-editor-item-fields
  label:last-child {
    grid-column:
      auto;
  }


  .remitos-selected-client {
    grid-template-columns:
      34px
      minmax(
        0,
        1fr
      )
      30px;
  }


  .remitos-selected-client-icon {
    width:
      34px;

    height:
      34px;
  }


  .remitos-document-row {
    grid-template-columns:
      34px
      minmax(
        0,
        1fr
      );
  }


  .remitos-document-icon {
    width:
      34px;

    height:
      34px;
  }


  .remitos-document-active {
    grid-column:
      2;

    justify-self:
      flex-start;
  }


  .remitos-drawer {
    width:
      100vw;
  }

}


/* =========================================================
   NO HORIZONTAL SCROLL
   ========================================================= */

.ventas-remitos-page,
.ventas-remitos-page section,
.ventas-remitos-page article,
.ventas-remitos-page header,
.ventas-remitos-page footer,
.ventas-remitos-page main,
.ventas-remitos-page form,
.ventas-remitos-page div,
.ventas-remitos-page label,

.remitos-global-overlay-root,
.remitos-global-overlay-root section,
.remitos-global-overlay-root article,
.remitos-global-overlay-root header,
.remitos-global-overlay-root footer,
.remitos-global-overlay-root form,
.remitos-global-overlay-root div,
.remitos-global-overlay-root label {
  min-width:
    0;
}


.ventas-remitos-page img,
.remitos-global-overlay-root img,
.ventas-remitos-page video,
.remitos-global-overlay-root video {
  max-width:
    100%;
}


/* =========================================================
   OVERLAY SIEMPRE SOBRE TOPBAR
   ========================================================= */

.remitos-global-overlay-root,
.remitos-global-overlay-root
.remitos-drawer-backdrop {
  z-index:
    2147483000 !important;
}


dialog.remitos-modal {
  z-index:
    2147483001 !important;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  .ventas-remitos-page *,
  .ventas-remitos-page *::before,
  .ventas-remitos-page *::after,

  .remitos-global-overlay-root *,
  .remitos-global-overlay-root *::before,
  .remitos-global-overlay-root *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

    scroll-behavior:
      auto !important;
  }

}


/* =========================================================
   FIN
   frontend/src/pages/ventas/remitos/remitos.css
   ========================================================= *//* =========================================================
   REMITOS · FIX DRAWER ACCIONES
   AGREGAR AL FINAL DE:

   frontend/src/pages/ventas/remitos/remitos.css
   ========================================================= */

#remitosGlobalOverlayRoot {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  width: 100vw !important;
  height: 100dvh !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

#remitosGlobalOverlayRoot
.remitos-drawer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483001 !important;
  width: 100vw !important;
  height: 100dvh !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, .58) !important;
}

#remitosGlobalOverlayRoot
.remitos-drawer {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  z-index: 2147483002 !important;

  width: min(
    390px,
    calc(100vw - 20px)
  ) !important;

  min-width: 320px !important;
  max-width: 100vw !important;

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

  display: flex !important;
  flex-direction: column !important;

  visibility: visible !important;
  opacity: 1 !important;

  pointer-events: auto !important;

  transform: translateX(0) !important;

  overflow: hidden !important;

  border-left:
    1px solid
    var(--rem-border-strong, #cdd0c8) !important;

  background:
    var(--rem-surface, #ffffff) !important;

  color:
    var(--rem-text, #151713) !important;

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

#remitosGlobalOverlayRoot
.remitos-drawer-header {
  width: 100% !important;

  flex: 0 0 auto !important;

  display: flex !important;

  visibility: visible !important;
  opacity: 1 !important;

  background:
    var(--rem-surface, #ffffff) !important;
}

#remitosGlobalOverlayRoot
.ventas-drawer-body {
  width: 100% !important;

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

  flex: 1 1 auto !important;

  display: block !important;

  visibility: visible !important;
  opacity: 1 !important;

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

  background:
    var(--rem-surface, #ffffff) !important;
}

#remitosGlobalOverlayRoot
.remitos-action-group {
  display: flex !important;
  flex-direction: column !important;

  visibility: visible !important;
  opacity: 1 !important;
}

#remitosGlobalOverlayRoot
.remitos-action-row {
  width: 100% !important;

  display: grid !important;

  visibility: visible !important;
  opacity: 1 !important;

  pointer-events: auto !important;
}

html[data-theme="dark"]
#remitosGlobalOverlayRoot
.remitos-drawer,

html[data-theme="dark"]
#remitosGlobalOverlayRoot
.ventas-drawer-body,

html[data-theme="dark"]
#remitosGlobalOverlayRoot
.remitos-drawer-header {
  background: #0f1012 !important;
  color: #f4f4f5 !important;
}

@media (max-width: 480px) {
  #remitosGlobalOverlayRoot
  .remitos-drawer {
    width: 100vw !important;
    min-width: 0 !important;
  }
}