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

   WIRTZ HUB · FACTURACIÓN Y COBRANZAS
   FACTURAS / REMITOS

   REDISEÑO COMPLETO

   ESTILO:
   - Premium
   - Minimalista
   - Ejecutivo
   - Compacto
   - Bordes visibles
   - Divisiones firmes
   - Dark mode negro real
   - Responsive completo
   - Animaciones rápidas
   - Sin glow
   ========================================================= */


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

.facturacion-page {
  --fac-bg: #f4f5f7;
  --fac-bg-soft: #f7f8fa;

  --fac-surface: #ffffff;
  --fac-surface-2: #f8f9fa;
  --fac-surface-3: #f1f3f5;
  --fac-surface-4: #e9ecef;

  --fac-border: #d9dde3;
  --fac-border-strong: #c4c9d1;
  --fac-border-extra: #aeb5bf;

  --fac-text: #24282e;
  --fac-text-strong: #0b0d10;
  --fac-muted: #626a75;
  --fac-muted-2: #858d98;

  --fac-primary: #111318;
  --fac-primary-hover: #262a30;
  --fac-primary-text: #ffffff;

  --fac-success: #087443;
  --fac-success-bg: #f0faf5;
  --fac-success-border: #abdcc4;

  --fac-warning: #9c5400;
  --fac-warning-bg: #fff8e8;
  --fac-warning-border: #e8c98a;

  --fac-danger: #bd2626;
  --fac-danger-bg: #fff3f3;
  --fac-danger-border: #efb5b5;

  --fac-info: #165ab6;
  --fac-info-bg: #f1f6fd;
  --fac-info-border: #b7cde9;

  --fac-radius-xs: 4px;
  --fac-radius-sm: 6px;
  --fac-radius-md: 8px;
  --fac-radius-lg: 10px;
  --fac-radius-xl: 12px;

  --fac-shadow-popover:
    0 12px 32px rgba(
      0,
      0,
      0,
      0.11
    );

  --fac-shadow-panel:
    0 20px 60px rgba(
      0,
      0,
      0,
      0.15
    );

  --fac-fast:
    110ms cubic-bezier(
      0.2,
      0,
      0,
      1
    );

  --fac-normal:
    150ms cubic-bezier(
      0.2,
      0,
      0,
      1
    );

  width: 100%;
  min-width: 0;

  min-height:
    calc(
      100dvh -
      56px
    );

  padding:
    18px;

  overflow-x:
    hidden;

  background:
    var(
      --fac-bg
    );

  color:
    var(
      --fac-text
    );

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

  font-size:
    13px;
}


/* =========================================================
   RESET LOCAL
   ========================================================= */

.facturacion-page *,
.facturacion-page *::before,
.facturacion-page *::after,
.facturacion-drawer *,
.facturacion-drawer *::before,
.facturacion-drawer *::after,
.facturacion-document-panel *,
.facturacion-document-panel *::before,
.facturacion-document-panel *::after,
.facturacion-modal *,
.facturacion-modal *::before,
.facturacion-modal *::after {
  box-sizing:
    border-box;
}


.facturacion-page button,
.facturacion-page input,
.facturacion-page select,
.facturacion-page textarea,
.facturacion-drawer button,
.facturacion-drawer input,
.facturacion-drawer select,
.facturacion-drawer textarea,
.facturacion-document-panel button,
.facturacion-document-panel input,
.facturacion-document-panel select,
.facturacion-document-panel textarea,
.facturacion-modal button,
.facturacion-modal input,
.facturacion-modal select,
.facturacion-modal textarea {
  font:
    inherit;
}


.facturacion-page button,
.facturacion-drawer button,
.facturacion-document-panel button,
.facturacion-modal button {
  -webkit-tap-highlight-color:
    transparent;
}


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

.facturacion-layout {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    15px;
}


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

.facturacion-page-header {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    24px;

  padding:
    2px 1px;
}


.facturacion-page-header__left {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}


.facturacion-page-header__icon {
  width:
    40px;

  height:
    40px;

  flex:
    0 0 40px;

  display:
    grid;

  place-items:
    center;

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

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

  background:
    var(
      --fac-surface
    );

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

  box-shadow:
    none;
}


.facturacion-page-header__icon svg {
  width:
    18px;

  height:
    18px;

  stroke-width:
    2;
}


.facturacion-page-header__copy {
  min-width:
    0;
}


.facturacion-page-header__eyebrow {
  margin-bottom:
    3px;

  color:
    var(
      --fac-muted
    );

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    850;

  letter-spacing:
    0.085em;

  text-transform:
    uppercase;
}


.facturacion-page-header__copy h1 {
  margin:
    0;

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

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

  line-height:
    1.06;

  font-weight:
    850;

  letter-spacing:
    -0.04em;
}


.facturacion-page-header__copy p {
  max-width:
    720px;

  margin:
    6px 0 0;

  color:
    var(
      --fac-muted
    );

  font-size:
    11px;

  line-height:
    1.45;

  font-weight:
    650;
}


.facturacion-page-header__actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    6px;
}


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

.facturacion-btn {
  appearance:
    none;

  min-height:
    36px;

  padding:
    7px 12px;

  border:
    1px solid transparent;

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

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  background:
    transparent;

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

  font-size:
    11px;

  line-height:
    1;

  font-weight:
    800;

  white-space:
    nowrap;

  cursor:
    pointer;

  box-shadow:
    none;

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


.facturacion-btn:hover:not(:disabled) {
  transform:
    translateY(
      -1px
    );
}


.facturacion-btn:active:not(:disabled) {
  transform:
    translateY(
      0
    );

  transition-duration:
    60ms;
}


.facturacion-btn:disabled {
  opacity:
    0.45;

  cursor:
    not-allowed;
}


.facturacion-btn svg {
  width:
    15px;

  height:
    15px;

  flex:
    0 0 15px;

  stroke-width:
    2.1;
}


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

  background:
    var(
      --fac-primary
    );

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


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

  background:
    var(
      --fac-primary-hover
    );
}


.facturacion-btn--ghost {
  border-color:
    var(
      --fac-border-strong
    );

  background:
    var(
      --fac-surface
    );

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


.facturacion-btn--ghost:hover:not(:disabled) {
  border-color:
    var(
      --fac-border-extra
    );

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


.facturacion-btn--danger {
  border-color:
    var(
      --fac-danger
    );

  background:
    var(
      --fac-danger
    );

  color:
    #ffffff;
}


.facturacion-btn--danger:hover:not(:disabled) {
  border-color:
    #a91e1e;

  background:
    #a91e1e;
}


.facturacion-btn--danger-ghost {
  border-color:
    var(
      --fac-danger-border
    );

  background:
    var(
      --fac-surface
    );

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


.facturacion-btn--danger-ghost:hover:not(:disabled) {
  background:
    var(
      --fac-danger-bg
    );
}


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

  min-width:
    36px;

  padding:
    0;

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

  background:
    var(
      --fac-surface
    );

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


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

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


.facturacion-btn--full {
  width:
    100%;

  flex:
    1 1 auto;
}


.facturacion-btn:focus-visible,
.facturacion-icon-btn:focus-visible,
.facturacion-order-link:focus-visible,
.facturacion-doc-cell:focus-visible,
.facturacion-pending-order:focus-visible,
.facturacion-pagination__button:focus-visible,
.facturacion-document-tab:focus-visible {
  outline:
    2px solid var(
      --fac-text-strong
    );

  outline-offset:
    2px;

  box-shadow:
    none;
}


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

.facturacion-icon-btn {
  width:
    31px;

  height:
    31px;

  flex:
    0 0 31px;

  padding:
    0;

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

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

  display:
    inline-grid;

  place-items:
    center;

  background:
    var(
      --fac-surface
    );

  color:
    var(
      --fac-muted
    );

  cursor:
    pointer;

  box-shadow:
    none;

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


.facturacion-icon-btn:hover:not(:disabled) {
  border-color:
    var(
      --fac-border-strong
    );

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

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

  transform:
    translateY(
      -1px
    );
}


.facturacion-icon-btn:active:not(:disabled) {
  transform:
    none;
}


.facturacion-icon-btn svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2.1;
}


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

.facturacion-metrics {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    8px;
}


.facturacion-metric-card {
  position:
    relative;

  min-width:
    0;

  min-height:
    88px;

  padding:
    12px 13px;

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

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

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  overflow:
    hidden;

  background:
    var(
      --fac-surface
    );

  box-shadow:
    none;

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


.facturacion-metric-card:hover {
  border-color:
    var(
      --fac-border-strong
    );

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

  transform:
    translateY(
      -1px
    );
}


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

  height:
    34px;

  flex:
    0 0 34px;

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

  border-radius:
    7px;

  display:
    grid;

  place-items:
    center;

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


.facturacion-metric-card__icon svg {
  width:
    16px;

  height:
    16px;

  stroke-width:
    2;
}


.facturacion-metric-card__icon.is-blue {
  border-color:
    #c6d5e8;

  background:
    #f2f6fb;

  color:
    #245d9e;
}


.facturacion-metric-card__icon.is-amber {
  border-color:
    #e1cfac;

  background:
    #fbf7ee;

  color:
    #9a5b09;
}


.facturacion-metric-card__icon.is-green {
  border-color:
    #bcd8ca;

  background:
    #f1f8f4;

  color:
    #087443;
}


.facturacion-metric-card__icon.is-violet {
  border-color:
    #d0c5df;

  background:
    #f7f4fa;

  color:
    #62458c;
}


.facturacion-metric-card__content {
  min-width:
    0;

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.facturacion-metric-card__content >
span {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(
      --fac-muted
    );

  font-size:
    10px;

  line-height:
    1.2;

  font-weight:
    750;
}


.facturacion-metric-card__content >
strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

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

  font-size:
    19px;

  line-height:
    1.12;

  font-weight:
    850;

  letter-spacing:
    -0.035em;

  font-variant-numeric:
    tabular-nums;
}


.facturacion-metric-card__content >
small {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(
      --fac-muted-2
    );

  font-size:
    9px;

  line-height:
    1.25;

  font-weight:
    650;
}


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

.facturacion-skeleton {
  position:
    relative;

  overflow:
    hidden;

  border-radius:
    5px;

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


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

  position:
    absolute;

  inset:
    0;

  transform:
    translateX(
      -100%
    );

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

  animation:
    facturacion-skeleton
    1.15s
    linear
    infinite;
}


@keyframes facturacion-skeleton {
  to {
    transform:
      translateX(
        100%
      );
  }
}


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

  height:
    34px;

  flex:
    0 0 34px;
}


.facturacion-skeleton--label {
  width:
    72px;

  height:
    8px;
}


.facturacion-skeleton--value {
  width:
    110px;

  height:
    17px;

  margin-top:
    7px;
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.facturacion-workspace {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


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

.facturacion-toolbar {
  width:
    100%;

  min-width:
    0;

  padding:
    10px;

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

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

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

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


.facturacion-toolbar__search {
  position:
    relative;

  flex:
    1 1 420px;

  min-width:
    220px;
}


.facturacion-toolbar__search >
svg {
  position:
    absolute;

  top:
    50%;

  left:
    11px;

  width:
    15px;

  height:
    15px;

  transform:
    translateY(
      -50%
    );

  color:
    var(
      --fac-muted
    );

  pointer-events:
    none;
}


.facturacion-toolbar__search input {
  width:
    100%;

  min-height:
    37px;

  padding:
    7px 37px 7px 35px;

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

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

  outline:
    none;

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

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

  font-size:
    11px;

  font-weight:
    700;

  box-shadow:
    none;

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


.facturacion-toolbar__search input::placeholder {
  color:
    var(
      --fac-muted-2
    );

  opacity:
    1;
}


.facturacion-toolbar__search input:hover {
  border-color:
    var(
      --fac-border-strong
    );
}


.facturacion-toolbar__search input:focus {
  border-color:
    var(
      --fac-text-strong
    );

  background:
    var(
      --fac-surface
    );

  box-shadow:
    none;
}


.facturacion-toolbar__search-clear {
  position:
    absolute;

  top:
    50%;

  right:
    7px;

  width:
    25px;

  height:
    25px;

  padding:
    0;

  border:
    1px solid transparent;

  border-radius:
    5px;

  display:
    grid;

  place-items:
    center;

  transform:
    translateY(
      -50%
    );

  background:
    transparent;

  color:
    var(
      --fac-muted
    );

  cursor:
    pointer;

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


.facturacion-toolbar__search-clear:hover {
  border-color:
    var(
      --fac-border
    );

  background:
    var(
      --fac-surface-3
    );

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


.facturacion-toolbar__search-clear svg {
  width:
    13px;

  height:
    13px;
}


.facturacion-toolbar__filters {
  flex:
    0 1 auto;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    5px;
}


/* =========================================================
   CONTROLES
   ========================================================= */

.facturacion-control {
  min-height:
    36px;

  max-width:
    100%;

  padding:
    7px 9px;

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

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

  outline:
    none;

  background:
    var(
      --fac-surface
    );

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

  font-size:
    11px;

  line-height:
    1.2;

  font-weight:
    700;

  box-shadow:
    none;

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


.facturacion-control:hover {
  border-color:
    var(
      --fac-border-strong
    );
}


.facturacion-control:focus {
  border-color:
    var(
      --fac-text-strong
    );

  box-shadow:
    none;
}


select.facturacion-control {
  min-width:
    132px;

  cursor:
    pointer;
}


.facturacion-textarea {
  min-height:
    86px;

  padding-top:
    9px;

  padding-bottom:
    9px;

  line-height:
    1.45;

  resize:
    vertical;
}


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

.facturacion-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.facturacion-field label {
  padding-left:
    1px;

  color:
    var(
      --fac-text
    );

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    800;
}


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

.facturacion-advanced-filters {
  width:
    100%;

  padding:
    11px;

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

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

  display:
    flex;

  align-items:
    flex-end;

  gap:
    9px;

  background:
    var(
      --fac-surface
    );

  animation:
    facturacion-panel-in
    120ms
    ease-out;
}


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


.facturacion-advanced-filters
.facturacion-field {
  min-width:
    160px;
}


.facturacion-advanced-filters__actions {
  margin-left:
    auto;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}


@keyframes facturacion-panel-in {
  from {
    opacity:
      0;

    transform:
      translateY(
        -3px
      );
  }

  to {
    opacity:
      1;

    transform:
      none;
  }
}


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

.facturacion-table-card {
  width:
    100%;

  min-width:
    0;

  overflow:
    hidden;

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

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

  background:
    var(
      --fac-surface
    );

  box-shadow:
    none;
}


.facturacion-table-card__header {
  min-height:
    55px;

  padding:
    10px 12px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

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


.facturacion-table-card__header h2 {
  margin:
    0;

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

  font-size:
    13px;

  line-height:
    1.2;

  font-weight:
    850;
}


.facturacion-table-card__header p {
  margin:
    3px 0 0;

  color:
    var(
      --fac-muted
    );

  font-size:
    9px;

  font-weight:
    700;
}


.facturacion-table-card__legend {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    6px;
}


.facturacion-table-card__legend span {
  min-height:
    25px;

  padding:
    4px 7px;

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

  border-radius:
    5px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

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

  color:
    var(
      --fac-text
    );

  font-size:
    9px;

  font-weight:
    800;
}


.facturacion-table-card__legend svg {
  width:
    12px;

  height:
    12px;
}


/* =========================================================
   TABLA PRINCIPAL
   ========================================================= */

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

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    visible;

  scrollbar-width:
    thin;
}


.facturacion-table {
  width:
    100%;

  min-width:
    1080px;

  border-collapse:
    separate;

  border-spacing:
    0;

  table-layout:
    auto;

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


.facturacion-table thead {
  background:
    var(
      --fac-surface-2
    );
}


.facturacion-table th {
  height:
    38px;

  padding:
    0 10px;

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

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

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

  color:
    var(
      --fac-muted
    );

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    850;

  text-align:
    left;

  text-transform:
    uppercase;

  letter-spacing:
    0.035em;

  white-space:
    nowrap;
}


.facturacion-table th:last-child {
  border-right:
    0;
}


.facturacion-table td {
  padding:
    9px 10px;

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

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

  background:
    var(
      --fac-surface
    );

  color:
    var(
      --fac-text
    );

  font-size:
    10.5px;

  line-height:
    1.3;

  font-weight:
    650;

  vertical-align:
    middle;

  transition:
    background-color
      var(
        --fac-fast
      );
}


.facturacion-table td:last-child {
  border-right:
    0;
}


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


.facturacion-table__row:hover
td {
  background:
    var(
      --fac-surface-2
    );
}


.facturacion-col-order {
  width:
    118px;
}


.facturacion-col-client {
  min-width:
    190px;
}


.facturacion-col-date {
  width:
    118px;
}


.facturacion-col-doc {
  min-width:
    145px;
}


.facturacion-col-total {
  width:
    130px;
}


.facturacion-col-status {
  width:
    115px;
}


.facturacion-col-actions {
  width:
    76px;
}


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

.facturacion-order-link {
  max-width:
    100%;

  padding:
    0;

  border:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    2px;

  background:
    transparent;

  color:
    inherit;

  text-align:
    left;

  cursor:
    pointer;
}


.facturacion-order-link strong {
  color:
    var(
      --fac-text-strong
    );

  font-size:
    10.5px;

  font-weight:
    850;
}


.facturacion-order-link small {
  max-width:
    110px;

  overflow:
    hidden;

  color:
    var(
      --fac-muted
    );

  font-size:
    8.5px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   CLIENTE
   ========================================================= */

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

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.facturacion-client-cell__avatar {
  width:
    29px;

  height:
    29px;

  flex:
    0 0 29px;

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

  border-radius:
    6px;

  display:
    grid;

  place-items:
    center;

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

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

  font-size:
    10px;

  font-weight:
    850;
}


.facturacion-client-cell__text {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.facturacion-client-cell__text strong {
  max-width:
    190px;

  overflow:
    hidden;

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

  font-size:
    10.5px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.facturacion-client-cell__text small {
  max-width:
    190px;

  overflow:
    hidden;

  color:
    var(
      --fac-muted
    );

  font-size:
    8.5px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.facturacion-date-cell,
.facturacion-money-cell {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.facturacion-date-cell strong,
.facturacion-money-cell strong {
  color:
    var(
      --fac-text-strong
    );

  font-size:
    10.5px;

  font-weight:
    800;

  font-variant-numeric:
    tabular-nums;
}


.facturacion-date-cell small,
.facturacion-money-cell small {
  color:
    var(
      --fac-muted
    );

  font-size:
    8.5px;

  font-weight:
    650;
}


.facturacion-money-cell {
  align-items:
    flex-end;

  text-align:
    right;
}


/* =========================================================
   DOCUMENT CELL
   ========================================================= */

.facturacion-doc-cell {
  width:
    100%;

  min-width:
    126px;

  min-height:
    40px;

  padding:
    5px 7px;

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

  border-radius:
    6px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  background:
    var(
      --fac-surface
    );

  color:
    var(
      --fac-text
    );

  text-align:
    left;

  box-shadow:
    none;
}


button.facturacion-doc-cell {
  cursor:
    pointer;

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


button.facturacion-doc-cell:hover {
  transform:
    translateY(
      -1px
    );
}


.facturacion-doc-cell__icon {
  width:
    25px;

  height:
    25px;

  flex:
    0 0 25px;

  border:
    1px solid currentColor;

  border-color:
    rgba(
      127,
      127,
      127,
      0.18
    );

  border-radius:
    5px;

  display:
    grid;

  place-items:
    center;

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


.facturacion-doc-cell__icon svg {
  width:
    12px;

  height:
    12px;
}


.facturacion-doc-cell__body {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}


.facturacion-doc-cell__body strong {
  color:
    var(
      --fac-text-strong
    );

  font-size:
    9.5px;

  font-weight:
    850;
}


.facturacion-doc-cell__body small {
  max-width:
    100px;

  overflow:
    hidden;

  color:
    var(
      --fac-muted
    );

  font-size:
    8px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.facturacion-doc-cell.is-pending {
  border-color:
    var(
      --fac-info-border
    );

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


.facturacion-doc-cell.is-pending
.facturacion-doc-cell__icon {
  color:
    var(
      --fac-info
    );
}


.facturacion-doc-cell.is-draft {
  border-color:
    var(
      --fac-warning-border
    );

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


.facturacion-doc-cell.is-draft
.facturacion-doc-cell__icon {
  color:
    var(
      --fac-warning
    );
}


.facturacion-doc-cell.is-emitted {
  border-color:
    var(
      --fac-success-border
    );

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


.facturacion-doc-cell.is-emitted
.facturacion-doc-cell__icon {
  color:
    var(
      --fac-success
    );
}


.facturacion-doc-cell.is-cancelled {
  border-color:
    var(
      --fac-danger-border
    );

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


.facturacion-doc-cell.is-cancelled
.facturacion-doc-cell__icon {
  color:
    var(
      --fac-danger
    );
}


.facturacion-doc-cell.is-disabled {
  justify-content:
    center;

  border-color:
    transparent;

  background:
    transparent;

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


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

.facturacion-badge {
  width:
    fit-content;

  max-width:
    100%;

  min-height:
    21px;

  padding:
    3px 7px;

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

  border-radius:
    5px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

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

  color:
    var(
      --fac-muted
    );

  font-size:
    8.5px;

  line-height:
    1;

  font-weight:
    850;

  white-space:
    nowrap;
}


.facturacion-badge__dot {
  width:
    5px;

  height:
    5px;

  flex:
    0 0 5px;

  border-radius:
    999px;

  background:
    currentColor;
}


.facturacion-badge.is-success {
  border-color:
    var(
      --fac-success-border
    );

  background:
    var(
      --fac-success-bg
    );

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


.facturacion-badge.is-warning {
  border-color:
    var(
      --fac-warning-border
    );

  background:
    var(
      --fac-warning-bg
    );

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


.facturacion-badge.is-danger {
  border-color:
    var(
      --fac-danger-border
    );

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

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


.facturacion-badge.is-info {
  border-color:
    var(
      --fac-info-border
    );

  background:
    var(
      --fac-info-bg
    );

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


.facturacion-badge.is-neutral {
  border-color:
    var(
      --fac-border
    );

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

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


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

.facturacion-row-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    4px;
}


/* =========================================================
   PAGINACIÓN
   ========================================================= */

.facturacion-pagination {
  min-height:
    48px;

  padding:
    8px 11px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

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


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


.facturacion-pagination__info {
  color:
    var(
      --fac-muted
    );

  font-size:
    9px;

  font-weight:
    700;
}


.facturacion-pagination__info strong {
  color:
    var(
      --fac-text-strong
    );

  font-weight:
    850;
}


.facturacion-pagination__actions {
  display:
    flex;

  align-items:
    center;

  gap:
    3px;
}


.facturacion-pagination__button {
  min-width:
    29px;

  height:
    29px;

  padding:
    0 7px;

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

  border-radius:
    5px;

  display:
    grid;

  place-items:
    center;

  background:
    var(
      --fac-surface
    );

  color:
    var(
      --fac-muted
    );

  font-size:
    9px;

  font-weight:
    850;

  cursor:
    pointer;

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


.facturacion-pagination__button:hover:not(:disabled) {
  border-color:
    var(
      --fac-border-strong
    );

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

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


.facturacion-pagination__button.is-active {
  border-color:
    var(
      --fac-primary
    );

  background:
    var(
      --fac-primary
    );

  color:
    #ffffff;
}


.facturacion-pagination__button:disabled {
  opacity:
    0.35;

  cursor:
    not-allowed;
}


.facturacion-pagination__button svg {
  width:
    13px;

  height:
    13px;
}


.facturacion-pagination__dots {
  width:
    22px;

  text-align:
    center;

  color:
    var(
      --fac-muted-2
    );

  font-size:
    10px;
}


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

.facturacion-state {
  min-height:
    230px;

  padding:
    28px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

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


.facturacion-state strong {
  font-size:
    11px;

  font-weight:
    750;
}


.facturacion-state__spinner,
.facturacion-btn__spinner {
  width:
    15px;

  height:
    15px;

  flex:
    0 0 15px;

  border:
    2px solid currentColor;

  border-right-color:
    transparent;

  border-radius:
    999px;

  animation:
    facturacion-spin
    0.65s
    linear
    infinite;
}


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


.facturacion-empty {
  min-height:
    240px;

  padding:
    28px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


.facturacion-empty__icon {
  width:
    40px;

  height:
    40px;

  margin-bottom:
    9px;

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

  border-radius:
    8px;

  display:
    grid;

  place-items:
    center;

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

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


.facturacion-empty__icon svg {
  width:
    18px;

  height:
    18px;
}


.facturacion-empty h3 {
  margin:
    0;

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

  font-size:
    13px;

  font-weight:
    850;
}


.facturacion-empty p {
  max-width:
    430px;

  margin:
    5px 0 13px;

  color:
    var(
      --fac-muted
    );

  font-size:
    10px;

  line-height:
    1.5;

  font-weight:
    650;
}


/* =========================================================
   INLINE ERROR
   ========================================================= */

.facturacion-inline-error {
  grid-column:
    1 /
    -1;

  min-height:
    66px;

  padding:
    11px 12px;

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

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

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

  color:
    var(
      --fac-danger
    );

  font-size:
    10px;

  font-weight:
    750;
}


.facturacion-inline-error svg {
  width:
    15px;

  height:
    15px;
}


.facturacion-inline-error button {
  padding:
    5px 8px;

  border:
    1px solid currentColor;

  border-radius:
    5px;

  background:
    transparent;

  color:
    inherit;

  font-size:
    9px;

  font-weight:
    850;

  cursor:
    pointer;
}


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

.facturacion-page.is-table-loading
.facturacion-table-card {
  position:
    relative;
}


.facturacion-page.is-table-loading
.facturacion-table-card::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    5;

  pointer-events:
    none;

  background:
    rgba(
      255,
      255,
      255,
      0.45
    );
}


/* =========================================================
   TOASTS
   ========================================================= */

.facturacion-toast-container {
  position:
    fixed;

  top:
    68px;

  right:
    14px;

  z-index:
    10050;

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

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  pointer-events:
    none;
}


.facturacion-toast {
  min-height:
    45px;

  padding:
    9px 9px 9px 10px;

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

  border-radius:
    7px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  background:
    var(
      --fac-surface
    );

  color:
    var(
      --fac-text
    );

  box-shadow:
    var(
      --fac-shadow-popover
    );

  pointer-events:
    auto;

  animation:
    facturacion-toast-in
    140ms
    ease-out;
}


@keyframes facturacion-toast-in {
  from {
    opacity:
      0;

    transform:
      translateY(
        -5px
      );
  }

  to {
    opacity:
      1;

    transform:
      none;
  }
}


.facturacion-toast--leaving {
  opacity:
    0;

  transform:
    translateY(
      -4px
    );

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


.facturacion-toast__icon {
  width:
    25px;

  height:
    25px;

  flex:
    0 0 25px;

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

  border-radius:
    5px;

  display:
    grid;

  place-items:
    center;

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


.facturacion-toast__icon svg {
  width:
    14px;

  height:
    14px;
}


.facturacion-toast__message {
  min-width:
    0;

  flex:
    1;

  color:
    var(
      --fac-text
    );

  font-size:
    10px;

  line-height:
    1.4;

  font-weight:
    700;
}


.facturacion-toast__close {
  width:
    25px;

  height:
    25px;

  flex:
    0 0 25px;

  padding:
    0;

  border:
    1px solid transparent;

  border-radius:
    5px;

  display:
    grid;

  place-items:
    center;

  background:
    transparent;

  color:
    var(
      --fac-muted
    );

  cursor:
    pointer;
}


.facturacion-toast__close:hover {
  border-color:
    var(
      --fac-border
    );

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

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


.facturacion-toast--success {
  border-color:
    var(
      --fac-success-border
    );
}


.facturacion-toast--success
.facturacion-toast__icon {
  background:
    var(
      --fac-success-bg
    );

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


.facturacion-toast--error {
  border-color:
    var(
      --fac-danger-border
    );
}


.facturacion-toast--error
.facturacion-toast__icon {
  background:
    var(
      --fac-danger-bg
    );

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


.facturacion-toast--warning {
  border-color:
    var(
      --fac-warning-border
    );
}


.facturacion-toast--warning
.facturacion-toast__icon {
  background:
    var(
      --fac-warning-bg
    );

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


.facturacion-toast--info {
  border-color:
    var(
      --fac-info-border
    );
}


.facturacion-toast--info
.facturacion-toast__icon {
  background:
    var(
      --fac-info-bg
    );

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


/* =========================================================
   OVERLAYS
   ========================================================= */

.facturacion-drawer-overlay,
.facturacion-document-overlay {
  position:
    fixed;

  top:
    52px;

  right:
    0;

  bottom:
    0;

  left:
    0;

  z-index:
    900;

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

  backdrop-filter:
    none;
}


.facturacion-drawer-overlay[hidden],
.facturacion-document-overlay[hidden] {
  display:
    none !important;
}


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

.facturacion-drawer {
  position:
    fixed;

  top:
    52px;

  right:
    0;

  bottom:
    0;

  z-index:
    910;

  width:
    min(
      760px,
      94vw
    );

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

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

  background:
    var(
      --fac-surface
    );

  color:
    var(
      --fac-text
    );

  box-shadow:
    -14px 0 40px rgba(
      0,
      0,
      0,
      0.14
    );

  transform:
    translateX(
      102%
    );

  transition:
    transform
      170ms
      cubic-bezier(
        0.2,
        0,
        0,
        1
      );
}


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


.facturacion-drawer__header {
  min-height:
    70px;

  padding:
    13px 14px;

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

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;

  background:
    var(
      --fac-surface
    );

  flex:
    0 0 auto;
}


.facturacion-drawer__heading {
  min-width:
    0;

  flex:
    1;
}


.facturacion-drawer__eyebrow {
  margin-bottom:
    3px;

  color:
    var(
      --fac-muted
    );

  font-size:
    8px;

  line-height:
    1;

  font-weight:
    850;

  letter-spacing:
    0.08em;
}


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

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    7px;
}


.facturacion-drawer__title-row h2 {
  min-width:
    0;

  margin:
    0;

  overflow:
    hidden;

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

  font-size:
    18px;

  line-height:
    1.15;

  font-weight:
    850;

  letter-spacing:
    -0.025em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.facturacion-drawer__heading >
p {
  margin:
    4px 0 0;

  color:
    var(
      --fac-muted
    );

  font-size:
    10px;

  font-weight:
    650;
}


.facturacion-drawer__content {
  flex:
    1;

  min-height:
    0;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  padding:
    13px 14px 22px;

  background:
    var(
      --fac-bg
    );

  scrollbar-width:
    thin;
}


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

.facturacion-order-summary {
  width:
    100%;
}


.facturacion-summary-grid {
  display:
    grid;

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

  gap:
    7px;
}


.facturacion-summary-item {
  min-width:
    0;

  padding:
    9px;

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

  border-radius:
    6px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

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


.facturacion-summary-item >
span {
  color:
    var(
      --fac-muted
    );

  font-size:
    8px;

  font-weight:
    800;
}


.facturacion-summary-item >
strong {
  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.facturacion-summary-item >
small {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(
      --fac-muted
    );

  font-size:
    7.5px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.facturacion-order-documents,
.facturacion-order-items-section,
.facturacion-order-info-section,
.facturacion-document-section {
  margin-top:
    11px;

  padding:
    11px;

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

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

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


.facturacion-section-header {
  min-width:
    0;

  margin-bottom:
    9px;

  padding-bottom:
    9px;

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

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;
}


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


.facturacion-section-header h3 {
  margin:
    0;

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

  font-size:
    11px;

  line-height:
    1.2;

  font-weight:
    850;
}


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

  color:
    var(
      --fac-muted
    );

  font-size:
    9px;

  line-height:
    1.4;

  font-weight:
    650;
}


/* =========================================================
   DOCUMENT CARDS
   ========================================================= */

.facturacion-document-cards {
  display:
    grid;

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

  gap:
    7px;
}


.facturacion-document-card {
  min-width:
    0;

  overflow:
    hidden;

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

  border-radius:
    7px;

  display:
    flex;

  flex-direction:
    column;

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


.facturacion-document-card.is-pending {
  border-color:
    var(
      --fac-info-border
    );
}


.facturacion-document-card.is-draft {
  border-color:
    var(
      --fac-warning-border
    );
}


.facturacion-document-card.is-emitted {
  border-color:
    var(
      --fac-success-border
    );
}


.facturacion-document-card.is-cancelled {
  border-color:
    var(
      --fac-danger-border
    );
}


.facturacion-document-card.is-disabled {
  opacity:
    0.58;
}


.facturacion-document-card__header {
  min-height:
    54px;

  padding:
    8px;

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

  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


.facturacion-document-card__header >
div:not(
  .facturacion-document-card__icon
) {
  min-width:
    0;

  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.facturacion-document-card__header span {
  color:
    var(
      --fac-muted
    );

  font-size:
    7.5px;

  font-weight:
    800;
}


.facturacion-document-card__header strong {
  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    9.5px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.facturacion-document-card__icon {
  width:
    29px;

  height:
    29px;

  flex:
    0 0 29px;

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

  border-radius:
    5px;

  display:
    grid;

  place-items:
    center;

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

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


.facturacion-document-card__icon svg {
  width:
    13px;

  height:
    13px;
}


.facturacion-document-card.is-pending
.facturacion-document-card__icon {
  color:
    var(
      --fac-info
    );
}


.facturacion-document-card.is-draft
.facturacion-document-card__icon {
  color:
    var(
      --fac-warning
    );
}


.facturacion-document-card.is-emitted
.facturacion-document-card__icon {
  color:
    var(
      --fac-success
    );
}


.facturacion-document-card.is-cancelled
.facturacion-document-card__icon {
  color:
    var(
      --fac-danger
    );
}


.facturacion-document-card__body {
  flex:
    1;

  padding:
    8px;

  display:
    grid;

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

  gap:
    6px;
}


.facturacion-document-card__body >
p {
  grid-column:
    1 /
    -1;

  margin:
    0;

  color:
    var(
      --fac-muted
    );

  font-size:
    8.5px;

  line-height:
    1.45;

  font-weight:
    650;
}


.facturacion-document-card__metric {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.facturacion-document-card__metric span {
  color:
    var(
      --fac-muted
    );

  font-size:
    7.5px;

  font-weight:
    750;
}


.facturacion-document-card__metric strong {
  overflow:
    hidden;

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

  font-size:
    9.5px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.facturacion-document-card__footer {
  padding:
    7px 8px;

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

  display:
    flex;

  align-items:
    center;

  gap:
    5px;
}


/* =========================================================
   GRUPOS DE PRODUCTOS
   ========================================================= */

.facturacion-order-groups {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.facturacion-order-group {
  overflow:
    hidden;

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

  border-radius:
    6px;

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


.facturacion-order-group__header {
  min-height:
    44px;

  padding:
    7px 9px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

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


.facturacion-order-group__title {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


.facturacion-order-group__title >
div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}


.facturacion-order-group__title strong {
  color:
    var(
      --fac-text-strong
    );

  font-size:
    9.5px;

  font-weight:
    850;
}


.facturacion-order-group__title small {
  color:
    var(
      --fac-muted
    );

  font-size:
    7.5px;

  font-weight:
    650;
}


.facturacion-order-group__icon {
  width:
    26px;

  height:
    26px;

  flex:
    0 0 26px;

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

  border-radius:
    5px;

  display:
    grid;

  place-items:
    center;

  background:
    var(
      --fac-surface
    );

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


.facturacion-order-group__icon svg {
  width:
    12px;

  height:
    12px;
}


.facturacion-order-group__total {
  color:
    var(
      --fac-text-strong
    );

  font-size:
    9.5px;

  font-weight:
    850;

  white-space:
    nowrap;
}


.facturacion-order-group__items {
  display:
    flex;

  flex-direction:
    column;
}


.facturacion-order-item-row {
  min-width:
    0;

  padding:
    7px 9px;

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

  display:
    grid;

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

  gap:
    8px;

  align-items:
    center;
}


.facturacion-order-item-row:last-child {
  border-bottom:
    0;
}


.facturacion-order-item-row__product {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.facturacion-order-item-row__product strong {
  overflow:
    hidden;

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

  font-size:
    9.5px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.facturacion-order-item-row__product small {
  overflow:
    hidden;

  color:
    var(
      --fac-muted
    );

  font-size:
    7.5px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.facturacion-order-item-row__quantity,
.facturacion-order-item-row__price,
.facturacion-order-item-row__discount,
.facturacion-order-item-row__iva,
.facturacion-order-item-row__total {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  text-align:
    right;
}


.facturacion-order-item-row__quantity span,
.facturacion-order-item-row__price span,
.facturacion-order-item-row__discount span,
.facturacion-order-item-row__iva span,
.facturacion-order-item-row__total span {
  color:
    var(
      --fac-muted
    );

  font-size:
    7px;

  font-weight:
    700;
}


.facturacion-order-item-row__quantity strong,
.facturacion-order-item-row__price strong,
.facturacion-order-item-row__discount strong,
.facturacion-order-item-row__iva strong,
.facturacion-order-item-row__total strong {
  color:
    var(
      --fac-text-strong
    );

  font-size:
    8.5px;

  font-weight:
    800;
}


/* =========================================================
   INFORMACIÓN PEDIDO
   ========================================================= */

.facturacion-order-info-grid {
  display:
    grid;

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

  gap:
    6px;
}


.facturacion-order-info-grid >
div {
  min-width:
    0;

  padding:
    8px;

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

  border-radius:
    5px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

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


.facturacion-order-info-grid span {
  color:
    var(
      --fac-muted
    );

  font-size:
    7.5px;

  font-weight:
    750;
}


.facturacion-order-info-grid strong {
  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    8.5px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.facturacion-order-note,
.facturacion-document-note {
  margin-top:
    8px;

  padding:
    8px 9px;

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

  border-radius:
    5px;

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


.facturacion-order-note >
span,
.facturacion-document-note >
span {
  display:
    block;

  margin-bottom:
    4px;

  color:
    var(
      --fac-muted
    );

  font-size:
    7.5px;

  font-weight:
    800;
}


.facturacion-order-note p,
.facturacion-document-note p {
  margin:
    0;

  color:
    var(
      --fac-text
    );

  font-size:
    8.5px;

  line-height:
    1.5;

  font-weight:
    650;

  white-space:
    pre-wrap;
}


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

.facturacion-document-panel {
  position:
    fixed;

  top:
    64px;

  right:
    14px;

  bottom:
    14px;

  left:
    14px;

  z-index:
    930;

  min-width:
    0;

  max-width:
    1700px;

  margin:
    0 auto;

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

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

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  background:
    var(
      --fac-surface
    );

  color:
    var(
      --fac-text
    );

  box-shadow:
    var(
      --fac-shadow-panel
    );

  opacity:
    0;

  transform:
    translateY(
      7px
    );

  pointer-events:
    none;

  transition:
    opacity
      140ms
      ease,
    transform
      150ms
      cubic-bezier(
        0.2,
        0,
        0,
        1
      );
}


.facturacion-document-panel.is-open {
  opacity:
    1;

  transform:
    none;

  pointer-events:
    auto;
}


.facturacion-document-panel__header {
  min-height:
    64px;

  padding:
    10px 13px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  background:
    var(
      --fac-surface
    );

  flex:
    0 0 auto;
}


.facturacion-document-panel__heading {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.facturacion-document-panel__type {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.facturacion-document-panel__type >
div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}


.facturacion-document-panel__type >
div >
span {
  color:
    var(
      --fac-muted
    );

  font-size:
    7.5px;

  font-weight:
    850;

  text-transform:
    uppercase;

  letter-spacing:
    0.06em;
}


.facturacion-document-panel__type h2 {
  min-width:
    0;

  max-width:
    420px;

  margin:
    0;

  overflow:
    hidden;

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

  font-size:
    15px;

  line-height:
    1.2;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.facturacion-document-panel__type-icon {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

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

  border-radius:
    6px;

  display:
    grid;

  place-items:
    center;

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

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


.facturacion-document-panel__type-icon svg {
  width:
    15px;

  height:
    15px;
}


.facturacion-document-panel__header-actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    5px;
}


.facturacion-document-panel__content {
  flex:
    1;

  min-height:
    0;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  padding:
    11px 13px 22px;

  background:
    var(
      --fac-bg
    );

  scrollbar-width:
    thin;
}


/* =========================================================
   DOCUMENT HERO
   ========================================================= */

.facturacion-document-hero {
  width:
    100%;

  overflow:
    hidden;

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

  border-radius:
    7px;

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


.facturacion-document-hero__main {
  display:
    grid;

  grid-template-columns:
    minmax(
      120px,
      0.8fr
    )
    minmax(
      210px,
      1.8fr
    )
    minmax(
      120px,
      0.8fr
    )
    minmax(
      150px,
      1fr
    );
}


.facturacion-document-hero__main >
div {
  min-width:
    0;

  padding:
    10px 11px;

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

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.facturacion-document-hero__main >
div:last-child {
  border-right:
    0;
}


.facturacion-document-hero__main span {
  color:
    var(
      --fac-muted
    );

  font-size:
    7.5px;

  font-weight:
    800;
}


.facturacion-document-hero__main strong {
  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    10.5px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.facturacion-document-hero__main small {
  color:
    var(
      --fac-muted
    );

  font-size:
    7.5px;

  font-weight:
    650;
}


.facturacion-document-hero__total {
  text-align:
    right;
}


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

.facturacion-document-tabs {
  width:
    100%;

  margin-top:
    9px;

  padding:
    4px;

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

  border-radius:
    7px;

  display:
    flex;

  align-items:
    center;

  gap:
    3px;

  overflow-x:
    auto;

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

  scrollbar-width:
    thin;
}


.facturacion-document-tab {
  flex:
    0 0 auto;

  min-height:
    31px;

  padding:
    0 10px;

  border:
    1px solid transparent;

  border-radius:
    5px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  background:
    transparent;

  color:
    var(
      --fac-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  cursor:
    pointer;

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


.facturacion-document-tab:hover {
  background:
    var(
      --fac-surface
    );

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


.facturacion-document-tab.is-active {
  border-color:
    var(
      --fac-border-strong
    );

  background:
    var(
      --fac-surface
    );

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


.facturacion-document-tab >
span {
  min-width:
    18px;

  height:
    17px;

  padding:
    0 4px;

  border-radius:
    999px;

  display:
    inline-grid;

  place-items:
    center;

  background:
    var(
      --fac-surface-3
    );

  color:
    var(
      --fac-muted
    );

  font-size:
    7.5px;

  font-weight:
    850;
}


.facturacion-document-tab-content {
  min-width:
    0;
}


/* =========================================================
   DOCUMENT GRID
   ========================================================= */

.facturacion-document-grid {
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1.45fr
    )
    minmax(
      290px,
      0.75fr
    );

  gap:
    9px;
}


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

.facturacion-form-grid {
  display:
    grid;

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

  gap:
    8px;
}


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


.facturacion-form-grid
.facturacion-control {
  width:
    100%;
}


.facturacion-form-actions {
  padding-top:
    4px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;
}


.facturacion-checkbox {
  min-height:
    34px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    var(
      --fac-text
    );

  font-size:
    9px;

  font-weight:
    700;

  cursor:
    pointer;
}


.facturacion-checkbox input {
  width:
    15px;

  height:
    15px;

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


/* =========================================================
   DATA LIST
   ========================================================= */

.facturacion-data-list {
  display:
    grid;

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

  gap:
    6px;
}


.facturacion-data-list--two {
  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );
}


.facturacion-data-list >
div {
  min-width:
    0;

  padding:
    8px;

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

  border-radius:
    5px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

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


.facturacion-data-list span {
  color:
    var(
      --fac-muted
    );

  font-size:
    7.5px;

  font-weight:
    800;
}


.facturacion-data-list strong {
  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    8.5px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.facturacion-totals-card {
  overflow:
    hidden;

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

  border-radius:
    6px;

  display:
    flex;

  flex-direction:
    column;

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


.facturacion-totals-card >
div {
  min-height:
    36px;

  padding:
    0 9px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.facturacion-totals-card >
div:last-child {
  border-bottom:
    0;
}


.facturacion-totals-card span {
  color:
    var(
      --fac-muted
    );

  font-size:
    8.5px;

  font-weight:
    700;
}


.facturacion-totals-card strong {
  color:
    var(
      --fac-text-strong
    );

  font-size:
    9.5px;

  font-weight:
    850;

  font-variant-numeric:
    tabular-nums;
}


.facturacion-totals-card__total {
  min-height:
    43px !important;

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


.facturacion-totals-card__total span {
  color:
    var(
      --fac-text-strong
    );

  font-weight:
    850;
}


.facturacion-totals-card__total strong {
  font-size:
    13px;
}


/* =========================================================
   ITEMS DOCUMENTO
   ========================================================= */

.facturacion-document-items-table-wrap {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

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

  border-radius:
    6px;
}


.facturacion-document-items-table {
  width:
    100%;

  min-width:
    760px;

  border-collapse:
    separate;

  border-spacing:
    0;

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


.facturacion-document-items-table thead {
  background:
    var(
      --fac-surface-2
    );
}


.facturacion-document-items-table th {
  height:
    35px;

  padding:
    0 8px;

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

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

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

  color:
    var(
      --fac-muted
    );

  font-size:
    8px;

  font-weight:
    850;

  text-align:
    left;

  white-space:
    nowrap;
}


.facturacion-document-items-table th:last-child {
  border-right:
    0;
}


.facturacion-document-items-table td {
  padding:
    7px 8px;

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

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

  color:
    var(
      --fac-text
    );

  font-size:
    8.5px;

  font-weight:
    650;

  vertical-align:
    middle;
}


.facturacion-document-items-table td:last-child {
  border-right:
    0;
}


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


.facturacion-product-cell {
  min-width:
    220px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.facturacion-product-cell strong {
  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    9.5px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.facturacion-product-cell small {
  color:
    var(
      --fac-muted
    );

  font-size:
    7.5px;

  font-weight:
    650;
}


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

  margin-top:
    2px;

  padding:
    2px 5px;

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

  border-radius:
    4px;

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

  color:
    var(
      --fac-muted
    );

  font-size:
    7px;

  font-weight:
    800;
}


.facturacion-inline-input {
  width:
    74px;

  height:
    29px;

  padding:
    0 7px;

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

  border-radius:
    5px;

  outline:
    none;

  background:
    var(
      --fac-surface
    );

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

  font-size:
    8.5px;

  font-weight:
    750;

  text-align:
    right;

  box-shadow:
    none;
}


.facturacion-inline-input--money {
  width:
    96px;
}


.facturacion-inline-input:focus {
  border-color:
    var(
      --fac-text-strong
    );

  box-shadow:
    none;
}


.facturacion-item-total {
  color:
    var(
      --fac-text-strong
    );

  font-size:
    9.5px;

  font-weight:
    850;

  white-space:
    nowrap;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.facturacion-timeline {
  display:
    flex;

  flex-direction:
    column;
}


.facturacion-timeline__item {
  position:
    relative;

  padding:
    7px 0;

  display:
    flex;

  gap:
    8px;
}


.facturacion-timeline__item:not(
  :last-child
)::after {
  content:
    "";

  position:
    absolute;

  top:
    33px;

  bottom:
    -1px;

  left:
    13px;

  width:
    1px;

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


.facturacion-timeline__icon {
  position:
    relative;

  z-index:
    1;

  width:
    27px;

  height:
    27px;

  flex:
    0 0 27px;

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

  border-radius:
    5px;

  display:
    grid;

  place-items:
    center;

  background:
    var(
      --fac-surface
    );

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


.facturacion-timeline__icon svg {
  width:
    12px;

  height:
    12px;
}


.facturacion-timeline__content {
  min-width:
    0;

  flex:
    1;

  padding-top:
    1px;
}


.facturacion-timeline__header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;
}


.facturacion-timeline__header strong {
  color:
    var(
      --fac-text-strong
    );

  font-size:
    9px;

  font-weight:
    850;
}


.facturacion-timeline__content p {
  margin:
    3px 0 0;

  color:
    var(
      --fac-text
    );

  font-size:
    8.5px;

  line-height:
    1.4;

  font-weight:
    650;
}


.facturacion-timeline__content small {
  color:
    var(
      --fac-muted
    );

  font-size:
    7.5px;

  font-weight:
    650;
}


.facturacion-timeline__subject {
  margin-top:
    5px;

  padding:
    6px 7px;

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

  border-radius:
    5px;

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

  color:
    var(
      --fac-text
    );

  font-size:
    8px;

  font-weight:
    700;
}


.facturacion-timeline__error {
  color:
    var(
      --fac-danger
    ) !important;
}


/* =========================================================
   HISTORIAL
   ========================================================= */

.facturacion-history-change {
  margin-top:
    5px;

  padding:
    6px 7px;

  border-left:
    2px solid var(
      --fac-border-strong
    );

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

  color:
    var(
      --fac-text
    );

  font-size:
    8px;

  line-height:
    1.4;

  font-weight:
    650;
}


/* =========================================================
   VALIDACIONES
   ========================================================= */

.facturacion-validation-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.facturacion-validation-list__item {
  min-height:
    34px;

  padding:
    7px 8px;

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

  border-radius:
    5px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

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

  color:
    var(
      --fac-text
    );

  font-size:
    8.5px;

  font-weight:
    700;
}


.facturacion-validation-list__item.is-success {
  border-color:
    var(
      --fac-success-border
    );

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


.facturacion-validation-list__item.is-danger {
  border-color:
    var(
      --fac-danger-border
    );

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


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

.facturacion-modal-root {
  position:
    relative;

  z-index:
    10000;
}


.facturacion-modal-root:empty {
  display:
    none;
}


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

.facturacion-modal-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    10000;

  padding:
    68px 14px 14px;

  overflow-y:
    auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

  backdrop-filter:
    none;
}


.facturacion-modal-overlay--document {
  align-items:
    flex-start;
}


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

.facturacion-modal {
  width:
    min(
      680px,
      100%
    );

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

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

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

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  background:
    var(
      --fac-surface
    );

  color:
    var(
      --fac-text
    );

  box-shadow:
    var(
      --fac-shadow-panel
    );

  animation:
    facturacion-modal-in
    140ms
    ease-out;
}


.facturacion-modal--small {
  width:
    min(
      460px,
      100%
    );
}


.facturacion-modal--wide {
  width:
    min(
      920px,
      100%
    );
}


.facturacion-modal--document-preview {
  width:
    min(
      1000px,
      100%
    );
}


@keyframes facturacion-modal-in {
  from {
    opacity:
      0;

    transform:
      translateY(
        6px
      );
  }

  to {
    opacity:
      1;

    transform:
      none;
  }
}


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

.facturacion-modal__header {
  min-height:
    62px;

  padding:
    11px 13px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  background:
    var(
      --fac-surface
    );

  flex:
    0 0 auto;
}


.facturacion-modal__header >
div:first-child {
  min-width:
    0;
}


.facturacion-modal__header h3 {
  margin:
    0;

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

  font-size:
    13px;

  line-height:
    1.2;

  font-weight:
    850;
}


.facturacion-modal__header p {
  margin:
    3px 0 0;

  color:
    var(
      --fac-muted
    );

  font-size:
    9px;

  line-height:
    1.4;

  font-weight:
    650;
}


.facturacion-modal__header-actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    5px;
}


.facturacion-modal__icon {
  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

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

  border-radius:
    6px;

  display:
    grid;

  place-items:
    center;

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

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


.facturacion-modal__icon svg {
  width:
    15px;

  height:
    15px;
}


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

.facturacion-modal__body {
  min-height:
    0;

  flex:
    1;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  padding:
    12px 13px;

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


.facturacion-modal__footer {
  min-height:
    56px;

  padding:
    9px 13px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;

  background:
    var(
      --fac-surface
    );

  flex:
    0 0 auto;
}


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

.facturacion-modal-search {
  position:
    relative;

  margin-bottom:
    9px;
}


.facturacion-modal-search input {
  width:
    100%;

  min-height:
    37px;

  padding:
    7px 10px;

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

  border-radius:
    6px;

  outline:
    none;

  background:
    var(
      --fac-surface
    );

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

  font-size:
    10px;

  font-weight:
    700;

  box-shadow:
    none;
}


.facturacion-modal-search input:focus {
  border-color:
    var(
      --fac-text-strong
    );
}


/* =========================================================
   PEDIDOS PENDIENTES
   ========================================================= */

.facturacion-pending-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


.facturacion-pending-order {
  width:
    100%;

  min-width:
    0;

  padding:
    9px;

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

  border-radius:
    6px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  background:
    var(
      --fac-surface
    );

  color:
    var(
      --fac-text
    );

  text-align:
    left;

  cursor:
    pointer;

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


.facturacion-pending-order:hover {
  border-color:
    var(
      --fac-border-strong
    );

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


.facturacion-pending-order__main {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.facturacion-pending-order__main strong {
  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.facturacion-pending-order__main span,
.facturacion-pending-order__main small {
  overflow:
    hidden;

  color:
    var(
      --fac-muted
    );

  font-size:
    8px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.facturacion-pending-order__documents {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    4px;
}


.facturacion-pending-order__documents span {
  min-height:
    22px;

  padding:
    3px 6px;

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

  border-radius:
    4px;

  display:
    inline-flex;

  align-items:
    center;

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

  color:
    var(
      --fac-text
    );

  font-size:
    7.5px;

  font-weight:
    800;
}


.facturacion-pending-order__total {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    2px;

  text-align:
    right;
}


.facturacion-pending-order__total span {
  color:
    var(
      --fac-muted
    );

  font-size:
    7.5px;

  font-weight:
    700;
}


.facturacion-pending-order__total strong {
  color:
    var(
      --fac-text-strong
    );

  font-size:
    10px;

  font-weight:
    850;
}


/* =========================================================
   ENVÍO DOCUMENTO
   ========================================================= */

.facturacion-send-attachment {
  min-width:
    0;

  padding:
    9px;

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

  border-radius:
    6px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

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


.facturacion-send-attachment__icon {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

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

  border-radius:
    5px;

  display:
    grid;

  place-items:
    center;

  background:
    var(
      --fac-surface
    );

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


.facturacion-send-attachment__icon svg {
  width:
    15px;

  height:
    15px;
}


.facturacion-send-attachment >
div:not(
  .facturacion-send-attachment__icon
) {
  min-width:
    0;

  flex:
    1;
}


.facturacion-send-attachment strong {
  display:
    block;

  overflow:
    hidden;

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

  font-size:
    9px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.facturacion-send-attachment small {
  display:
    block;

  margin-top:
    2px;

  color:
    var(
      --fac-muted
    );

  font-size:
    8px;

  font-weight:
    650;
}


/* =========================================================
   PDF PREVIEW
   ========================================================= */

.facturacion-pdf-preview {
  width:
    100%;

  max-width:
    900px;

  margin:
    0 auto;

  padding:
    24px;

  border:
    1px solid #cfd4db;

  border-radius:
    6px;

  background:
    #ffffff;

  color:
    #17191d;

  font-family:
    "DM Sans",
    system-ui,
    sans-serif;

  box-shadow:
    none;
}


.facturacion-pdf-preview__header {
  padding-bottom:
    14px;

  border-bottom:
    2px solid #1b1d20;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;
}


.facturacion-pdf-preview__brand {
  min-width:
    0;
}


.facturacion-pdf-preview__brand strong {
  display:
    block;

  color:
    #111111;

  font-size:
    20px;

  font-weight:
    850;

  letter-spacing:
    -0.025em;
}


.facturacion-pdf-preview__brand span {
  display:
    block;

  margin-top:
    3px;

  color:
    #555b63;

  font-size:
    9px;

  font-weight:
    650;
}


.facturacion-pdf-preview__document-type {
  min-width:
    170px;

  padding:
    10px;

  border:
    1px solid #222222;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.facturacion-pdf-preview__letter {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  border:
    1px solid #111111;

  display:
    grid;

  place-items:
    center;

  color:
    #111111;

  font-size:
    18px;

  font-weight:
    900;
}


.facturacion-pdf-preview__document-type strong {
  color:
    #111111;

  font-size:
    12px;

  font-weight:
    850;
}


.facturacion-pdf-preview__document-type small {
  color:
    #666666;

  font-size:
    8px;

  font-weight:
    650;
}


.facturacion-pdf-preview__client {
  margin-top:
    14px;

  padding:
    11px;

  border:
    1px solid #cbd0d6;
}


.facturacion-pdf-preview__client span {
  display:
    block;

  margin-bottom:
    3px;

  color:
    #686e76;

  font-size:
    8px;

  font-weight:
    800;

  text-transform:
    uppercase;
}


.facturacion-pdf-preview__client strong {
  color:
    #111111;

  font-size:
    11px;

  font-weight:
    850;
}


.facturacion-pdf-preview__meta {
  margin-top:
    10px;

  border:
    1px solid #cbd0d6;

  display:
    grid;

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


.facturacion-pdf-preview__meta >
div {
  min-width:
    0;

  padding:
    9px;

  border-right:
    1px solid #cbd0d6;
}


.facturacion-pdf-preview__meta >
div:last-child {
  border-right:
    0;
}


.facturacion-pdf-preview__meta span {
  display:
    block;

  color:
    #696f77;

  font-size:
    7px;

  font-weight:
    800;

  text-transform:
    uppercase;
}


.facturacion-pdf-preview__meta strong {
  display:
    block;

  margin-top:
    2px;

  color:
    #111111;

  font-size:
    9px;

  font-weight:
    800;
}


.facturacion-pdf-preview__items {
  margin-top:
    12px;

  overflow-x:
    auto;
}


.facturacion-pdf-preview__items table {
  width:
    100%;

  min-width:
    620px;

  border-collapse:
    collapse;
}


.facturacion-pdf-preview__items th {
  padding:
    7px;

  border:
    1px solid #c6cbd1;

  background:
    #f1f2f4;

  color:
    #292c31;

  font-size:
    7px;

  font-weight:
    850;

  text-align:
    left;

  text-transform:
    uppercase;
}


.facturacion-pdf-preview__items td {
  padding:
    7px;

  border:
    1px solid #d1d5da;

  color:
    #222222;

  font-size:
    8px;

  font-weight:
    650;
}


.facturacion-pdf-preview__totals {
  width:
    min(
      100%,
      350px
    );

  margin:
    12px 0 0 auto;

  border:
    1px solid #c6cbd1;
}


.facturacion-pdf-preview__totals >
div {
  min-height:
    32px;

  padding:
    0 9px;

  border-bottom:
    1px solid #d1d5da;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.facturacion-pdf-preview__totals >
div:last-child {
  border-bottom:
    0;

  background:
    #f0f1f2;
}


.facturacion-pdf-preview__totals span {
  color:
    #555b63;

  font-size:
    8px;

  font-weight:
    700;
}


.facturacion-pdf-preview__totals strong {
  color:
    #111111;

  font-size:
    9px;

  font-weight:
    850;
}


.facturacion-pdf-preview__note {
  margin-top:
    12px;

  padding:
    9px;

  border:
    1px solid #cbd0d6;

  color:
    #35393e;

  font-size:
    8px;

  line-height:
    1.45;

  font-weight:
    650;
}


/* =========================================================
   BODY STATES
   ========================================================= */

body.facturacion-drawer-open,
body.facturacion-document-open {
  overflow:
    hidden;
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

.facturacion-page *,
.facturacion-drawer *,
.facturacion-document-panel *,
.facturacion-modal * {
  scrollbar-width:
    thin;

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


.facturacion-page *::-webkit-scrollbar,
.facturacion-drawer *::-webkit-scrollbar,
.facturacion-document-panel *::-webkit-scrollbar,
.facturacion-modal *::-webkit-scrollbar {
  width:
    7px;

  height:
    7px;
}


.facturacion-page *::-webkit-scrollbar-track,
.facturacion-drawer *::-webkit-scrollbar-track,
.facturacion-document-panel *::-webkit-scrollbar-track,
.facturacion-modal *::-webkit-scrollbar-track {
  background:
    transparent;
}


.facturacion-page *::-webkit-scrollbar-thumb,
.facturacion-drawer *::-webkit-scrollbar-thumb,
.facturacion-document-panel *::-webkit-scrollbar-thumb,
.facturacion-modal *::-webkit-scrollbar-thumb {
  border:
    2px solid transparent;

  border-radius:
    999px;

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

  background-clip:
    padding-box;
}


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

html[data-theme="dark"]
.facturacion-page,
body[data-theme="dark"]
.facturacion-page,
body.dark
.facturacion-page {
  --fac-bg: #050505;
  --fac-bg-soft: #070707;

  --fac-surface: #0a0a0a;
  --fac-surface-2: #101010;
  --fac-surface-3: #161616;
  --fac-surface-4: #1c1c1c;

  --fac-border: #292929;
  --fac-border-strong: #383838;
  --fac-border-extra: #4a4a4a;

  --fac-text: #dedede;
  --fac-text-strong: #ffffff;
  --fac-muted: #aaaaaa;
  --fac-muted-2: #7e7e7e;

  --fac-primary: #ffffff;
  --fac-primary-hover: #e6e6e6;
  --fac-primary-text: #000000;

  --fac-success: #52b788;
  --fac-success-bg: #0b1811;
  --fac-success-border: #28563d;

  --fac-warning: #d99a45;
  --fac-warning-bg: #1b1308;
  --fac-warning-border: #5a431e;

  --fac-danger: #ef7070;
  --fac-danger-bg: #1b0b0b;
  --fac-danger-border: #5b2626;

  --fac-info: #73a7e6;
  --fac-info-bg: #091421;
  --fac-info-border: #29496c;

  --fac-shadow-popover:
    0 14px 38px rgba(
      0,
      0,
      0,
      0.62
    );

  --fac-shadow-panel:
    0 24px 80px rgba(
      0,
      0,
      0,
      0.78
    );

  background:
    #050505;

  color:
    #dedede;
}


/* =========================================================
   DARK · OVERLAYS
   ========================================================= */

html[data-theme="dark"]
.facturacion-drawer-overlay,
html[data-theme="dark"]
.facturacion-document-overlay,
html[data-theme="dark"]
.facturacion-modal-overlay,
body[data-theme="dark"]
.facturacion-drawer-overlay,
body[data-theme="dark"]
.facturacion-document-overlay,
body[data-theme="dark"]
.facturacion-modal-overlay,
body.dark
.facturacion-drawer-overlay,
body.dark
.facturacion-document-overlay,
body.dark
.facturacion-modal-overlay {
  background:
    rgba(
      0,
      0,
      0,
      0.68
    );
}


/* =========================================================
   DARK · HEADER / CARDS
   ========================================================= */

html[data-theme="dark"]
.facturacion-page-header__icon,
body[data-theme="dark"]
.facturacion-page-header__icon,
body.dark
.facturacion-page-header__icon,
html[data-theme="dark"]
.facturacion-metric-card,
body[data-theme="dark"]
.facturacion-metric-card,
body.dark
.facturacion-metric-card,
html[data-theme="dark"]
.facturacion-toolbar,
body[data-theme="dark"]
.facturacion-toolbar,
body.dark
.facturacion-toolbar,
html[data-theme="dark"]
.facturacion-table-card,
body[data-theme="dark"]
.facturacion-table-card,
body.dark
.facturacion-table-card,
html[data-theme="dark"]
.facturacion-advanced-filters,
body[data-theme="dark"]
.facturacion-advanced-filters,
body.dark
.facturacion-advanced-filters {
  background:
    #0a0a0a;

  border-color:
    #383838;
}


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

html[data-theme="dark"]
.facturacion-table,
body[data-theme="dark"]
.facturacion-table,
body.dark
.facturacion-table {
  background:
    #090909;
}


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

  color:
    #b1b1b1;

  border-color:
    #343434;
}


html[data-theme="dark"]
.facturacion-table td,
body[data-theme="dark"]
.facturacion-table td,
body.dark
.facturacion-table td {
  background:
    #090909;

  color:
    #dddddd;

  border-color:
    #292929;
}


html[data-theme="dark"]
.facturacion-table__row:hover
td,
body[data-theme="dark"]
.facturacion-table__row:hover
td,
body.dark
.facturacion-table__row:hover
td {
  background:
    #111111;
}


/* =========================================================
   DARK · BOTONES
   ========================================================= */

html[data-theme="dark"]
.facturacion-btn--primary,
body[data-theme="dark"]
.facturacion-btn--primary,
body.dark
.facturacion-btn--primary {
  border-color:
    #ffffff;

  background:
    #ffffff;

  color:
    #000000;
}


html[data-theme="dark"]
.facturacion-btn--primary:hover:not(:disabled),
body[data-theme="dark"]
.facturacion-btn--primary:hover:not(:disabled),
body.dark
.facturacion-btn--primary:hover:not(:disabled) {
  border-color:
    #e6e6e6;

  background:
    #e6e6e6;

  color:
    #000000;
}


html[data-theme="dark"]
.facturacion-btn--ghost,
html[data-theme="dark"]
.facturacion-btn--icon,
html[data-theme="dark"]
.facturacion-icon-btn,
body[data-theme="dark"]
.facturacion-btn--ghost,
body[data-theme="dark"]
.facturacion-btn--icon,
body[data-theme="dark"]
.facturacion-icon-btn,
body.dark
.facturacion-btn--ghost,
body.dark
.facturacion-btn--icon,
body.dark
.facturacion-icon-btn {
  border-color:
    #363636;

  background:
    #0d0d0d;

  color:
    #e2e2e2;
}


html[data-theme="dark"]
.facturacion-btn--ghost:hover:not(:disabled),
html[data-theme="dark"]
.facturacion-btn--icon:hover:not(:disabled),
html[data-theme="dark"]
.facturacion-icon-btn:hover:not(:disabled),
body[data-theme="dark"]
.facturacion-btn--ghost:hover:not(:disabled),
body[data-theme="dark"]
.facturacion-btn--icon:hover:not(:disabled),
body[data-theme="dark"]
.facturacion-icon-btn:hover:not(:disabled),
body.dark
.facturacion-btn--ghost:hover:not(:disabled),
body.dark
.facturacion-btn--icon:hover:not(:disabled),
body.dark
.facturacion-icon-btn:hover:not(:disabled) {
  border-color:
    #4a4a4a;

  background:
    #151515;

  color:
    #ffffff;
}


/* =========================================================
   DARK · INPUTS
   ========================================================= */

html[data-theme="dark"]
.facturacion-control,
html[data-theme="dark"]
.facturacion-toolbar__search input,
html[data-theme="dark"]
.facturacion-modal-search input,
html[data-theme="dark"]
.facturacion-inline-input,
body[data-theme="dark"]
.facturacion-control,
body[data-theme="dark"]
.facturacion-toolbar__search input,
body[data-theme="dark"]
.facturacion-modal-search input,
body[data-theme="dark"]
.facturacion-inline-input,
body.dark
.facturacion-control,
body.dark
.facturacion-toolbar__search input,
body.dark
.facturacion-modal-search input,
body.dark
.facturacion-inline-input {
  border-color:
    #303030;

  background:
    #0d0d0d;

  color:
    #ffffff;

  box-shadow:
    none;
}


html[data-theme="dark"]
.facturacion-control:focus,
html[data-theme="dark"]
.facturacion-toolbar__search input:focus,
html[data-theme="dark"]
.facturacion-modal-search input:focus,
html[data-theme="dark"]
.facturacion-inline-input:focus,
body[data-theme="dark"]
.facturacion-control:focus,
body[data-theme="dark"]
.facturacion-toolbar__search input:focus,
body[data-theme="dark"]
.facturacion-modal-search input:focus,
body[data-theme="dark"]
.facturacion-inline-input:focus,
body.dark
.facturacion-control:focus,
body.dark
.facturacion-toolbar__search input:focus,
body.dark
.facturacion-modal-search input:focus,
body.dark
.facturacion-inline-input:focus {
  border-color:
    #666666;

  background:
    #0a0a0a;

  box-shadow:
    none;
}


/* =========================================================
   DARK · DOCUMENT CELLS
   ========================================================= */

html[data-theme="dark"]
.facturacion-doc-cell,
body[data-theme="dark"]
.facturacion-doc-cell,
body.dark
.facturacion-doc-cell {
  background:
    #0c0c0c;

  border-color:
    #303030;
}


html[data-theme="dark"]
.facturacion-doc-cell.is-pending,
body[data-theme="dark"]
.facturacion-doc-cell.is-pending,
body.dark
.facturacion-doc-cell.is-pending {
  border-color:
    #29496c;

  background:
    #091421;
}


html[data-theme="dark"]
.facturacion-doc-cell.is-draft,
body[data-theme="dark"]
.facturacion-doc-cell.is-draft,
body.dark
.facturacion-doc-cell.is-draft {
  border-color:
    #5a431e;

  background:
    #1b1308;
}


html[data-theme="dark"]
.facturacion-doc-cell.is-emitted,
body[data-theme="dark"]
.facturacion-doc-cell.is-emitted,
body.dark
.facturacion-doc-cell.is-emitted {
  border-color:
    #28563d;

  background:
    #0b1811;
}


html[data-theme="dark"]
.facturacion-doc-cell.is-cancelled,
body[data-theme="dark"]
.facturacion-doc-cell.is-cancelled,
body.dark
.facturacion-doc-cell.is-cancelled {
  border-color:
    #5b2626;

  background:
    #1b0b0b;
}


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

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

  color:
    #dedede;

  border-color:
    #383838;

  box-shadow:
    -16px 0 46px rgba(
      0,
      0,
      0,
      0.75
    );
}


html[data-theme="dark"]
.facturacion-drawer__header,
body[data-theme="dark"]
.facturacion-drawer__header,
body.dark
.facturacion-drawer__header {
  background:
    #080808;

  border-color:
    #383838;
}


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


/* =========================================================
   DARK · PEDIDO
   ========================================================= */

html[data-theme="dark"]
.facturacion-summary-item,
html[data-theme="dark"]
.facturacion-order-documents,
html[data-theme="dark"]
.facturacion-order-items-section,
html[data-theme="dark"]
.facturacion-order-info-section,
html[data-theme="dark"]
.facturacion-document-card,
html[data-theme="dark"]
.facturacion-order-group,
html[data-theme="dark"]
.facturacion-order-info-grid >
div,
html[data-theme="dark"]
.facturacion-order-note,
html[data-theme="dark"]
.facturacion-document-note,
body[data-theme="dark"]
.facturacion-summary-item,
body[data-theme="dark"]
.facturacion-order-documents,
body[data-theme="dark"]
.facturacion-order-items-section,
body[data-theme="dark"]
.facturacion-order-info-section,
body[data-theme="dark"]
.facturacion-document-card,
body[data-theme="dark"]
.facturacion-order-group,
body[data-theme="dark"]
.facturacion-order-info-grid >
div,
body[data-theme="dark"]
.facturacion-order-note,
body[data-theme="dark"]
.facturacion-document-note,
body.dark
.facturacion-summary-item,
body.dark
.facturacion-order-documents,
body.dark
.facturacion-order-items-section,
body.dark
.facturacion-order-info-section,
body.dark
.facturacion-document-card,
body.dark
.facturacion-order-group,
body.dark
.facturacion-order-info-grid >
div,
body.dark
.facturacion-order-note,
body.dark
.facturacion-document-note {
  background:
    #0b0b0b;

  border-color:
    #303030;
}


html[data-theme="dark"]
.facturacion-order-group__header,
body[data-theme="dark"]
.facturacion-order-group__header,
body.dark
.facturacion-order-group__header {
  background:
    #111111;

  border-color:
    #303030;
}


/* =========================================================
   DARK · DOCUMENT PANEL
   ========================================================= */

html[data-theme="dark"]
.facturacion-document-panel,
body[data-theme="dark"]
.facturacion-document-panel,
body.dark
.facturacion-document-panel {
  background:
    #080808;

  border-color:
    #3b3b3b;

  color:
    #dedede;

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


html[data-theme="dark"]
.facturacion-document-panel__header,
body[data-theme="dark"]
.facturacion-document-panel__header,
body.dark
.facturacion-document-panel__header {
  background:
    #080808;

  border-color:
    #383838;
}


html[data-theme="dark"]
.facturacion-document-panel__content,
body[data-theme="dark"]
.facturacion-document-panel__content,
body.dark
.facturacion-document-panel__content {
  background:
    #050505;
}


html[data-theme="dark"]
.facturacion-document-hero,
html[data-theme="dark"]
.facturacion-document-tabs,
html[data-theme="dark"]
.facturacion-document-section,
html[data-theme="dark"]
.facturacion-data-list >
div,
html[data-theme="dark"]
.facturacion-totals-card,
html[data-theme="dark"]
.facturacion-document-items-table,
body[data-theme="dark"]
.facturacion-document-hero,
body[data-theme="dark"]
.facturacion-document-tabs,
body[data-theme="dark"]
.facturacion-document-section,
body[data-theme="dark"]
.facturacion-data-list >
div,
body[data-theme="dark"]
.facturacion-totals-card,
body[data-theme="dark"]
.facturacion-document-items-table,
body.dark
.facturacion-document-hero,
body.dark
.facturacion-document-tabs,
body.dark
.facturacion-document-section,
body.dark
.facturacion-data-list >
div,
body.dark
.facturacion-totals-card,
body.dark
.facturacion-document-items-table {
  background:
    #0b0b0b;

  border-color:
    #303030;
}


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

  color:
    #b2b2b2;

  border-color:
    #323232;
}


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

  color:
    #dddddd;

  border-color:
    #292929;
}


/* =========================================================
   DARK · MODALES
   ========================================================= */

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

  border-color:
    #3a3a3a;

  color:
    #dedede;

  box-shadow:
    0 24px 80px rgba(
      0,
      0,
      0,
      0.82
    );
}


html[data-theme="dark"]
.facturacion-modal__header,
html[data-theme="dark"]
.facturacion-modal__footer,
body[data-theme="dark"]
.facturacion-modal__header,
body[data-theme="dark"]
.facturacion-modal__footer,
body.dark
.facturacion-modal__header,
body.dark
.facturacion-modal__footer {
  background:
    #090909;

  border-color:
    #383838;
}


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


html[data-theme="dark"]
.facturacion-pending-order,
html[data-theme="dark"]
.facturacion-send-attachment,
html[data-theme="dark"]
.facturacion-timeline__subject,
html[data-theme="dark"]
.facturacion-validation-list__item,
body[data-theme="dark"]
.facturacion-pending-order,
body[data-theme="dark"]
.facturacion-send-attachment,
body[data-theme="dark"]
.facturacion-timeline__subject,
body[data-theme="dark"]
.facturacion-validation-list__item,
body.dark
.facturacion-pending-order,
body.dark
.facturacion-send-attachment,
body.dark
.facturacion-timeline__subject,
body.dark
.facturacion-validation-list__item {
  background:
    #0d0d0d;

  border-color:
    #303030;

  color:
    #dedede;
}


html[data-theme="dark"]
.facturacion-pending-order:hover,
body[data-theme="dark"]
.facturacion-pending-order:hover,
body.dark
.facturacion-pending-order:hover {
  background:
    #141414;

  border-color:
    #414141;
}


/* =========================================================
   DARK · PDF SIEMPRE BLANCO
   ========================================================= */

html[data-theme="dark"]
.facturacion-pdf-preview,
body[data-theme="dark"]
.facturacion-pdf-preview,
body.dark
.facturacion-pdf-preview {
  background:
    #ffffff;

  color:
    #17191d;
}


/* =========================================================
   DARK · SKELETON / LOADING
   ========================================================= */

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


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


html[data-theme="dark"]
.facturacion-page.is-table-loading
.facturacion-table-card::after,
body[data-theme="dark"]
.facturacion-page.is-table-loading
.facturacion-table-card::after,
body.dark
.facturacion-page.is-table-loading
.facturacion-table-card::after {
  background:
    rgba(
      0,
      0,
      0,
      0.48
    );
}


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

@media (
  max-width:
    1400px
) {
  .facturacion-toolbar {
    align-items:
      stretch;

    flex-wrap:
      wrap;
  }


  .facturacion-toolbar__search {
    flex:
      1 1 100%;

    width:
      100%;
  }


  .facturacion-toolbar__filters {
    width:
      100%;

    justify-content:
      flex-start;

    flex-wrap:
      wrap;
  }


  .facturacion-toolbar__filters
  .facturacion-control {
    flex:
      1 1 150px;
  }
}


/* =========================================================
   RESPONSIVE · 1200
   ========================================================= */

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


  .facturacion-document-grid {
    grid-template-columns:
      1fr;
  }


  .facturacion-document-hero__main {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .facturacion-document-hero__main >
  div:nth-child(
    2
  ) {
    border-right:
      0;
  }


  .facturacion-document-hero__main >
  div:nth-child(
    -n + 2
  ) {
    border-bottom:
      1px solid var(
        --fac-border
      );
  }


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


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

@media (
  max-width:
    960px
) {
  .facturacion-page-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .facturacion-page-header__actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .facturacion-document-cards {
    grid-template-columns:
      1fr;
  }


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


  .facturacion-data-list {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .facturacion-document-panel__header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .facturacion-document-panel__header-actions {
    width:
      100%;

    justify-content:
      flex-start;
  }
}


/* =========================================================
   RESPONSIVE · 820
   ========================================================= */

@media (
  max-width:
    820px
) {
  .facturacion-page {
    padding:
      11px;
  }


  .facturacion-layout {
    gap:
      11px;
  }


  .facturacion-page-header__actions {
    display:
      grid;

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

    gap:
      5px;
  }


  .facturacion-page-header__actions
  .facturacion-btn {
    width:
      100%;
  }


  .facturacion-toolbar__filters {
    display:
      grid;

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


  .facturacion-toolbar__filters
  .facturacion-control,
  .facturacion-toolbar__filters
  .facturacion-btn {
    width:
      100%;

    min-width:
      0;
  }


  .facturacion-advanced-filters {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .facturacion-advanced-filters
  .facturacion-field {
    width:
      100%;
  }


  .facturacion-advanced-filters__actions {
    width:
      100%;

    margin-left:
      0;

    justify-content:
      flex-end;
  }


  .facturacion-table-card__header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .facturacion-table-card__legend {
    width:
      100%;
  }


  .facturacion-drawer {
    width:
      100vw;

    max-width:
      none;

    border-left:
      0;
  }


  .facturacion-document-panel {
    top:
      58px;

    right:
      7px;

    bottom:
      7px;

    left:
      7px;

    border-radius:
      8px;
  }


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


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


  .facturacion-modal-overlay {
    padding:
      58px
      7px
      7px;
  }


  .facturacion-modal,
  .facturacion-modal--small,
  .facturacion-modal--wide,
  .facturacion-modal--document-preview {
    width:
      100%;

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

    border-radius:
      8px;
  }


  .facturacion-pdf-preview {
    padding:
      16px;
  }


  .facturacion-pending-order {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      auto
      105px;
  }
}


/* =========================================================
   RESPONSIVE · 640
   ========================================================= */

@media (
  max-width:
    640px
) {
  .facturacion-page-header__left {
    align-items:
      flex-start;
  }


  .facturacion-page-header__icon {
    width:
      36px;

    height:
      36px;

    flex-basis:
      36px;
  }


  .facturacion-page-header__copy h1 {
    font-size:
      22px;
  }


  .facturacion-page-header__copy p {
    font-size:
      10px;
  }


  .facturacion-metrics {
    gap:
      6px;
  }


  .facturacion-metric-card {
    min-height:
      76px;

    padding:
      10px;
  }


  .facturacion-metric-card__icon {
    width:
      31px;

    height:
      31px;

    flex-basis:
      31px;
  }


  .facturacion-metric-card__content >
  strong {
    font-size:
      16px;
  }


  .facturacion-summary-grid,
  .facturacion-order-info-grid,
  .facturacion-data-list,
  .facturacion-data-list--two {
    grid-template-columns:
      1fr;
  }


  .facturacion-order-item-row {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      60px
      85px;
  }


  .facturacion-order-item-row__price {
    display:
      none;
  }


  .facturacion-document-hero__main {
    grid-template-columns:
      1fr;
  }


  .facturacion-document-hero__main >
  div {
    border-right:
      0;

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


  .facturacion-document-hero__main >
  div:last-child {
    border-bottom:
      0;
  }


  .facturacion-document-hero__total {
    text-align:
      left;
  }


  .facturacion-modal__header {
    align-items:
      flex-start;
  }


  .facturacion-modal__header-actions {
    max-width:
      55%;

    overflow-x:
      auto;
  }


  .facturacion-modal__footer {
    flex-wrap:
      wrap;
  }


  .facturacion-modal__footer
  .facturacion-btn {
    flex:
      1 1 auto;
  }


  .facturacion-pending-order {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      auto;
  }


  .facturacion-pending-order__total {
    grid-column:
      1 /
      -1;

    padding-top:
      7px;

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

    flex-direction:
      row;

    align-items:
      center;

    justify-content:
      space-between;
  }


  .facturacion-pdf-preview__header {
    flex-direction:
      column;
  }


  .facturacion-pdf-preview__document-type {
    width:
      100%;
  }


  .facturacion-pdf-preview__meta {
    grid-template-columns:
      1fr;
  }


  .facturacion-pdf-preview__meta >
  div {
    border-right:
      0;

    border-bottom:
      1px solid #cbd0d6;
  }


  .facturacion-pdf-preview__meta >
  div:last-child {
    border-bottom:
      0;
  }


  #facturacionSendDocumentForm
  .facturacion-form-grid {
    grid-template-columns:
      1fr;
  }


  .facturacion-send-attachment {
    align-items:
      flex-start;

    flex-wrap:
      wrap;
  }


  #facturacionSendDocumentForm
  .facturacion-modal__footer {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      1fr 1fr;

    gap:
      6px;
  }


  #facturacionSendDocumentForm
  .facturacion-modal__footer
  .facturacion-btn {
    width:
      100%;

    min-width:
      0;
  }
}


/* =========================================================
   RESPONSIVE · 520
   ========================================================= */

@media (
  max-width:
    520px
) {
  .facturacion-page {
    padding:
      8px;
  }


  .facturacion-page-header__actions {
    grid-template-columns:
      1fr;
  }


  .facturacion-page-header__actions
  .facturacion-btn {
    min-height:
      38px;
  }


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


  .facturacion-toolbar {
    padding:
      7px;
  }


  .facturacion-toolbar__filters {
    grid-template-columns:
      1fr;
  }


  .facturacion-table-card {
    border-radius:
      6px;
  }


  .facturacion-pagination {
    align-items:
      stretch;

    flex-direction:
      column;

    gap:
      8px;
  }


  .facturacion-pagination__actions {
    width:
      100%;

    overflow-x:
      auto;
  }


  .facturacion-drawer__header {
    padding:
      10px;
  }


  .facturacion-drawer__content {
    padding:
      9px;
  }


  .facturacion-document-panel {
    top:
      54px;

    right:
      4px;

    bottom:
      4px;

    left:
      4px;

    border-radius:
      6px;
  }


  .facturacion-document-panel__header {
    padding:
      9px;
  }


  .facturacion-document-panel__content {
    padding:
      8px;
  }


  .facturacion-document-panel__header-actions {
    display:
      grid;

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


  .facturacion-document-panel__header-actions
  .facturacion-btn {
    width:
      100%;
  }


  .facturacion-document-panel__header-actions
  .facturacion-icon-btn {
    width:
      100%;
  }


  .facturacion-document-tabs {
    border-radius:
      5px;
  }


  .facturacion-section-header {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .facturacion-section-header >
  .facturacion-btn {
    width:
      100%;
  }


  .facturacion-order-item-row {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      54px
      80px;

    gap:
      5px;
  }


  .facturacion-modal-overlay {
    padding:
      53px
      4px
      4px;
  }


  .facturacion-modal {
    max-height:
      calc(
        100dvh -
        57px
      );

    border-radius:
      6px;
  }


  .facturacion-modal__header,
  .facturacion-modal__body,
  .facturacion-modal__footer {
    padding-left:
      9px;

    padding-right:
      9px;
  }


  .facturacion-modal__header-actions {
    max-width:
      48%;
  }


  .facturacion-pdf-preview {
    padding:
      10px;
  }


  #facturacionSendDocumentForm
  .facturacion-modal__footer {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   VERY SMALL
   ========================================================= */

@media (
  max-width:
    380px
) {
  .facturacion-page-header__icon {
    display:
      none;
  }


  .facturacion-page-header__copy h1 {
    font-size:
      21px;
  }


  .facturacion-toolbar,
  .facturacion-advanced-filters {
    padding-left:
      6px;

    padding-right:
      6px;
  }


  .facturacion-document-panel__header-actions {
    grid-template-columns:
      1fr;
  }


  .facturacion-order-item-row {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      50px;
  }


  .facturacion-order-item-row__price,
  .facturacion-order-item-row__total {
    display:
      none;
  }
}


/* =========================================================
   UTILIDADES
   ========================================================= */

.facturacion-hidden {
  display:
    none !important;
}


.facturacion-text-right {
  text-align:
    right !important;
}


.facturacion-text-center {
  text-align:
    center !important;
}


.facturacion-nowrap {
  white-space:
    nowrap !important;
}


.facturacion-muted {
  color:
    var(
      --fac-muted
    ) !important;
}


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

@media (
  prefers-reduced-motion:
    reduce
) {
  .facturacion-page *,
  .facturacion-page *::before,
  .facturacion-page *::after,
  .facturacion-drawer *,
  .facturacion-drawer *::before,
  .facturacion-drawer *::after,
  .facturacion-document-panel *,
  .facturacion-document-panel *::before,
  .facturacion-document-panel *::after,
  .facturacion-modal *,
  .facturacion-modal *::before,
  .facturacion-modal *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;
  }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {
  body * {
    visibility:
      hidden !important;
  }


  .facturacion-pdf-preview,
  .facturacion-pdf-preview * {
    visibility:
      visible !important;
  }


  .facturacion-pdf-preview {
    position:
      absolute;

    top:
      0;

    left:
      0;

    width:
      100%;

    max-width:
      none;

    margin:
      0;

    padding:
      14mm;

    border:
      0;

    border-radius:
      0;

    box-shadow:
      none;
  }
}


/* =========================================================
   FIN
   frontend/src/pages/facturacion-cobranzas/facturas/facturas.css
   ========================================================= *//* =========================================================
   WIRTZ HUB · FACTURACIÓN Y COBRANZAS · FACTURAS

   MOBILE RESPONSIVE REAL
   AGREGAR AL FINAL DE:

   frontend/src/pages/facturacion-cobranzas/facturas/facturas.css

   OBJETIVOS:
   - CERO scroll horizontal
   - CERO barras horizontales
   - Tabla convertida en tarjetas
   - Texto sin superposición
   - Toolbar responsive
   - Filtros responsive
   - Métricas responsive
   - Drawer responsive
   - Panel documento responsive
   - Modales responsive
   ========================================================= */


/* =========================================================
   PROTECCIÓN GLOBAL CONTRA OVERFLOW
   ========================================================= */

html,
body {
  max-width:
    100%;

  overflow-x:
    hidden !important;
}


.app-shell,
.app-shell__main,
.app-main,
.app-content,
.facturacion-page,
.facturacion-layout {
  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  overflow-x:
    hidden;
}


.facturacion-page *,
.facturacion-page *::before,
.facturacion-page *::after,
.facturacion-drawer *,
.facturacion-drawer *::before,
.facturacion-drawer *::after,
.facturacion-document-panel *,
.facturacion-document-panel *::before,
.facturacion-document-panel *::after,
.facturacion-modal *,
.facturacion-modal *::before,
.facturacion-modal *::after {
  box-sizing:
    border-box;

  min-width:
    0;
}


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

@media (
  max-width:
    820px
) {

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

  .facturacion-page {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    min-height:
      auto;

    padding:
      10px !important;

    overflow-x:
      hidden !important;
  }


  .facturacion-layout {
    width:
      100%;

    max-width:
      100%;

    gap:
      10px;
  }


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

  .facturacion-page-header {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      10px;

    padding:
      0;
  }


  .facturacion-page-header__left {
    width:
      100%;

    min-width:
      0;

    align-items:
      flex-start;

    gap:
      9px;
  }


  .facturacion-page-header__icon {
    width:
      34px;

    height:
      34px;

    flex:
      0 0 34px;

    border-radius:
      7px;
  }


  .facturacion-page-header__icon svg {
    width:
      16px;

    height:
      16px;
  }


  .facturacion-page-header__copy {
    width:
      calc(
        100% -
        43px
      );

    min-width:
      0;
  }


  .facturacion-page-header__eyebrow {
    margin-bottom:
      3px;

    font-size:
      8px;
  }


  .facturacion-page-header__copy h1 {
    font-size:
      23px;

    line-height:
      1.05;
  }


  .facturacion-page-header__copy p {
    width:
      100%;

    max-width:
      100%;

    margin-top:
      4px;

    font-size:
      10px;

    line-height:
      1.4;

    overflow-wrap:
      anywhere;
  }


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

  .facturacion-page-header__actions {
    width:
      100%;

    display:
      grid;

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

    gap:
      6px;
  }


  .facturacion-page-header__actions
  .facturacion-btn {
    width:
      100%;

    min-width:
      0;

    min-height:
      38px;

    padding:
      7px 6px;

    gap:
      5px;

    font-size:
      9px;

    overflow:
      hidden;
  }


  .facturacion-page-header__actions
  .facturacion-btn span {
    min-width:
      0;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  .facturacion-page-header__actions
  .facturacion-btn svg {
    width:
      14px;

    height:
      14px;

    flex:
      0 0 14px;
  }


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

  .facturacion-metrics {
    width:
      100%;

    max-width:
      100%;

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

    gap:
      7px;
  }


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

    min-width:
      0;

    min-height:
      78px;

    padding:
      9px;

    gap:
      8px;

    border-radius:
      8px;
  }


  .facturacion-metric-card__icon {
    width:
      30px;

    height:
      30px;

    flex:
      0 0 30px;
  }


  .facturacion-metric-card__icon svg {
    width:
      14px;

    height:
      14px;
  }


  .facturacion-metric-card__content {
    width:
      calc(
        100% -
        38px
      );

    min-width:
      0;
  }


  .facturacion-metric-card__content >
  span {
    width:
      100%;

    max-width:
      100%;

    font-size:
      8.5px;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  .facturacion-metric-card__content >
  strong {
    width:
      100%;

    max-width:
      100%;

    font-size:
      clamp(
        13px,
        4vw,
        17px
      );

    line-height:
      1.15;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  .facturacion-metric-card__content >
  small {
    width:
      100%;

    max-width:
      100%;

    font-size:
      7.5px;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  /* =======================================================
     WORKSPACE
     ======================================================= */

  .facturacion-workspace {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    gap:
      7px;
  }


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

  .facturacion-toolbar {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    padding:
      8px;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      7px;

    overflow:
      hidden;
  }


  .facturacion-toolbar__search {
    width:
      100%;

    max-width:
      none;

    min-width:
      0;

    flex:
      none;
  }


  .facturacion-toolbar__search input {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    min-height:
      39px;

    padding:
      8px 35px 8px 34px;

    font-size:
      11px;
  }


  .facturacion-toolbar__filters {
    width:
      100%;

    min-width:
      0;

    display:
      grid;

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

    gap:
      5px;
  }


  .facturacion-toolbar__filters
  .facturacion-control {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0 !important;
  }


  .facturacion-toolbar__filters
  .facturacion-btn {
    width:
      100%;

    min-width:
      0;
  }


  select.facturacion-control {
    width:
      100%;

    min-width:
      0 !important;

    max-width:
      100%;

    font-size:
      9px;
  }


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

  .facturacion-advanced-filters {
    width:
      100%;

    max-width:
      100%;

    padding:
      9px;

    display:
      grid;

    grid-template-columns:
      1fr;

    align-items:
      stretch;

    gap:
      8px;

    overflow:
      hidden;
  }


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


  .facturacion-advanced-filters
  .facturacion-field {
    width:
      100%;

    min-width:
      0;
  }


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

    max-width:
      100%;

    min-width:
      0;
  }


  .facturacion-advanced-filters__actions {
    width:
      100%;

    margin-left:
      0;

    display:
      grid;

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

    gap:
      6px;
  }


  .facturacion-advanced-filters__actions
  .facturacion-btn {
    width:
      100%;

    min-width:
      0;
  }


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

  .facturacion-table-card {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    overflow:
      hidden;

    border-radius:
      9px;
  }


  .facturacion-table-card__header {
    width:
      100%;

    min-width:
      0;

    min-height:
      auto;

    padding:
      9px;

    display:
      flex;

    align-items:
      flex-start;

    gap:
      8px;
  }


  .facturacion-table-card__header >
  div:first-child {
    min-width:
      0;

    flex:
      1;
  }


  .facturacion-table-card__header h2 {
    font-size:
      11px;
  }


  .facturacion-table-card__header p {
    font-size:
      8px;
  }


  .facturacion-table-card__legend {
    flex:
      0 0 auto;

    gap:
      3px;
  }


  .facturacion-table-card__legend span {
    min-height:
      23px;

    padding:
      3px 5px;

    gap:
      3px;

    font-size:
      8px;
  }


  .facturacion-table-card__legend svg {
    width:
      10px;

    height:
      10px;
  }


  /* =======================================================
     QUITAMOS TODO SCROLL HORIZONTAL
     ======================================================= */

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

    max-width:
      100%;

    min-width:
      0;

    overflow-x:
      hidden !important;

    overflow-y:
      visible;

    scrollbar-width:
      none !important;
  }


  .facturacion-table-container::-webkit-scrollbar {
    display:
      none !important;

    width:
      0 !important;

    height:
      0 !important;
  }


  /* =======================================================
     TABLA -> TARJETAS
     ======================================================= */

  .facturacion-table {
    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    display:
      block;

    border-collapse:
      separate;

    border-spacing:
      0;

    table-layout:
      fixed;

    background:
      transparent;
  }


  .facturacion-table thead {
    display:
      none;
  }


  .facturacion-table tbody {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    display:
      flex;

    flex-direction:
      column;

    gap:
      8px;

    padding:
      8px;

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


  .facturacion-table__row {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    display:
      grid;

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

    overflow:
      hidden;

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

    border-radius:
      8px;

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


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

  .facturacion-table__row >
  td {
    position:
      relative;

    width:
      auto;

    max-width:
      100%;

    min-width:
      0;

    min-height:
      64px;

    padding:
      29px 9px 9px !important;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      flex-start;

    gap:
      3px;

    overflow:
      hidden;

    border-right:
      1px solid var(
        --fac-border
      ) !important;

    border-bottom:
      1px solid var(
        --fac-border
      ) !important;

    background:
      var(
        --fac-surface
      );

    text-align:
      left !important;

    white-space:
      normal !important;

    vertical-align:
      top;
  }


  .facturacion-table__row >
  td:nth-child(
    even
  ) {
    border-right:
      0 !important;
  }


  /* =======================================================
     LABEL SUPERIOR DE CADA CELDA
     ======================================================= */

  .facturacion-table__row >
  td::before {
    position:
      absolute;

    top:
      8px;

    left:
      9px;

    right:
      9px;

    height:
      11px;

    display:
      block;

    overflow:
      hidden;

    color:
      var(
        --fac-muted
      );

    font-size:
      7px;

    line-height:
      11px;

    font-weight:
      900;

    letter-spacing:
      0.06em;

    text-transform:
      uppercase;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;

    pointer-events:
      none;
  }


  .facturacion-table__row >
  td:nth-child(
    1
  )::before {
    content:
      "Pedido";
  }


  .facturacion-table__row >
  td:nth-child(
    2
  )::before {
    content:
      "Cliente";
  }


  .facturacion-table__row >
  td:nth-child(
    3
  )::before {
    content:
      "Fecha";
  }


  .facturacion-table__row >
  td:nth-child(
    4
  )::before {
    content:
      "Factura A";
  }


  .facturacion-table__row >
  td:nth-child(
    5
  )::before {
    content:
      "Factura B";
  }


  .facturacion-table__row >
  td:nth-child(
    6
  )::before {
    content:
      "Remito";
  }


  .facturacion-table__row >
  td:nth-child(
    7
  )::before {
    content:
      "Total";
  }


  .facturacion-table__row >
  td:nth-child(
    8
  )::before {
    content:
      "Estado";
  }


  .facturacion-table__row >
  td:nth-child(
    9
  )::before {
    content:
      "Acciones";
  }


  /* =======================================================
     CONTENIDO INTERNO DE CELDA
     ======================================================= */

  .facturacion-table__row >
  td >
  * {
    position:
      relative;

    z-index:
      1;

    max-width:
      100%;

    min-width:
      0;
  }


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

  .facturacion-order-link {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    margin:
      0;

    display:
      flex;

    flex-direction:
      column;

    gap:
      2px;
  }


  .facturacion-order-link strong {
    display:
      block;

    width:
      100%;

    max-width:
      100%;

    margin:
      0;

    font-size:
      10px;

    line-height:
      1.25;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  .facturacion-order-link small {
    display:
      block;

    width:
      100%;

    max-width:
      100%;

    margin:
      0;

    font-size:
      8px;

    line-height:
      1.2;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  /* =======================================================
     CLIENTE
     ======================================================= */

  .facturacion-table__row >
  td:nth-child(
    2
  ) {
    grid-column:
      1 /
      -1;

    min-height:
      70px;

    border-right:
      0 !important;
  }


  .facturacion-client-cell {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    display:
      flex;

    flex-direction:
      row;

    align-items:
      center;

    gap:
      7px;
  }


  .facturacion-client-cell__avatar {
    width:
      29px;

    height:
      29px;

    min-width:
      29px;

    flex:
      0 0 29px;

    font-size:
      9px;
  }


  .facturacion-client-cell__text {
    min-width:
      0;

    max-width:
      calc(
        100% -
        36px
      );

    flex:
      1;
  }


  .facturacion-client-cell__text strong,
  .facturacion-client-cell__text small {
    display:
      block;

    width:
      100%;

    max-width:
      100%;

    margin:
      0;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  .facturacion-client-cell__text strong {
    font-size:
      10px;

    line-height:
      1.3;
  }


  .facturacion-client-cell__text small {
    font-size:
      8px;

    line-height:
      1.2;
  }


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

  .facturacion-date-cell {
    width:
      100%;

    min-width:
      0;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      2px;

    text-align:
      left;
  }


  .facturacion-date-cell strong {
    margin:
      0;

    font-size:
      10px;

    line-height:
      1.2;
  }


  .facturacion-date-cell small {
    margin:
      0;

    font-size:
      8px;

    line-height:
      1.2;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }


  /* =======================================================
     DOCUMENTOS
     ======================================================= */

  .facturacion-table__row >
  td:nth-child(
    4
  ),
  .facturacion-table__row >
  td:nth-child(
    5
  ),
  .facturacion-table__row >
  td:nth-child(
    6
  ) {
    min-height:
      83px;
  }


  .facturacion-doc-cell {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    min-height:
      42px;

    margin:
      0;

    padding:
      5px 6px;

    gap:
      6px;

    overflow:
      hidden;
  }


  .facturacion-doc-cell__icon {
    width:
      24px;

    height:
      24px;

    min-width:
      24px;

    flex:
      0 0 24px;
  }


  .facturacion-doc-cell__body {
    min-width:
      0;

    max-width:
      calc(
        100% -
        30px
      );

    flex:
      1;
  }


  .facturacion-doc-cell__body strong {
    display:
      block;

    width:
      100%;

    max-width:
      100%;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;

    font-size:
      8.5px;
  }


  .facturacion-doc-cell__body small {
    display:
      block;

    width:
      100%;

    max-width:
      100%;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;

    font-size:
      7px;
  }


  /* =======================================================
     TOTAL
     ======================================================= */

  .facturacion-money-cell {
    width:
      100%;

    min-width:
      0;

    align-items:
      flex-start;

    text-align:
      left;
  }


  .facturacion-money-cell strong {
    display:
      block;

    width:
      100%;

    max-width:
      100%;

    margin:
      0;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;

    font-size:
      10.5px;

    line-height:
      1.2;
  }


  .facturacion-money-cell small {
    margin:
      0;

    font-size:
      8px;
  }


  /* =======================================================
     ESTADO
     ======================================================= */

  .facturacion-table__row >
  td:nth-child(
    8
  ) {
    align-items:
      flex-start;
  }


  .facturacion-badge {
    width:
      auto;

    max-width:
      100%;

    min-height:
      21px;

    margin:
      0;

    padding:
      3px 6px;

    font-size:
      7.5px;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  /* =======================================================
     ACCIONES
     ======================================================= */

  .facturacion-table__row >
  td:nth-child(
    9
  ) {
    min-height:
      64px;

    align-items:
      flex-start;

    justify-content:
      flex-start;
  }


  .facturacion-row-actions {
    width:
      100%;

    display:
      flex;

    align-items:
      center;

    justify-content:
      flex-start;

    gap:
      5px;
  }


  .facturacion-row-actions
  .facturacion-icon-btn {
    width:
      30px;

    height:
      30px;

    min-width:
      30px;

    flex:
      0 0 30px;
  }


  /* =======================================================
     EVITA HOVER EXTRAÑO EN TOUCH
     ======================================================= */

  .facturacion-table__row:hover
  td {
    background:
      var(
        --fac-surface
      );
  }


  /* =======================================================
     PAGINACIÓN
     ======================================================= */

  .facturacion-pagination {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    min-height:
      46px;

    padding:
      7px 8px;

    gap:
      6px;

    overflow:
      hidden;
  }


  .facturacion-pagination__info {
    min-width:
      0;

    flex:
      1;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;

    font-size:
      8px;
  }


  .facturacion-pagination__actions {
    min-width:
      0;

    flex:
      0 0 auto;

    gap:
      2px;
  }


  .facturacion-pagination__button {
    min-width:
      27px;

    width:
      27px;

    height:
      27px;

    padding:
      0;

    font-size:
      8px;
  }


  .facturacion-pagination__dots {
    width:
      14px;

    font-size:
      8px;
  }


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

  .facturacion-drawer-overlay {
    right:
      0;

    left:
      0;

    width:
      100%;

    overflow:
      hidden;
  }


  .facturacion-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;
  }


  .facturacion-drawer__header {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    min-height:
      62px;

    padding:
      10px;

    gap:
      8px;
  }


  .facturacion-drawer__heading {
    min-width:
      0;

    max-width:
      calc(
        100% -
        38px
      );
  }


  .facturacion-drawer__title-row {
    width:
      100%;

    min-width:
      0;
  }


  .facturacion-drawer__title-row h2 {
    max-width:
      100%;

    font-size:
      15px;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  .facturacion-drawer__heading >
  p {
    max-width:
      100%;

    font-size:
      9px;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }


  .facturacion-drawer__content {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    padding:
      9px 9px 18px;

    overflow-x:
      hidden !important;
  }


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

  .facturacion-summary-grid {
    width:
      100%;

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

    gap:
      6px;
  }


  .facturacion-summary-item {
    min-width:
      0;

    padding:
      8px;
  }


  .facturacion-summary-item >
  strong,
  .facturacion-summary-item >
  small {
    width:
      100%;

    max-width:
      100%;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


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

  .facturacion-order-documents,
  .facturacion-order-items-section,
  .facturacion-order-info-section,
  .facturacion-document-section {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    margin-top:
      8px;

    padding:
      9px;

    overflow:
      hidden;
  }


  .facturacion-section-header {
    width:
      100%;

    min-width:
      0;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      7px;
  }


  .facturacion-section-header >
  div {
    width:
      100%;

    min-width:
      0;
  }


  .facturacion-section-header p {
    width:
      100%;

    max-width:
      100%;

    overflow-wrap:
      anywhere;
  }


  .facturacion-section-header
  .facturacion-btn {
    width:
      100%;
  }


  /* =======================================================
     DOCUMENT CARDS
     ======================================================= */

  .facturacion-document-cards {
    width:
      100%;

    grid-template-columns:
      1fr;

    gap:
      6px;
  }


  .facturacion-document-card {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;
  }


  .facturacion-document-card__header {
    min-width:
      0;

    padding:
      8px;
  }


  .facturacion-document-card__header
  strong {
    max-width:
      100%;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  .facturacion-document-card__body {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .facturacion-document-card__metric
  strong {
    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }


  .facturacion-document-card__footer {
    width:
      100%;

    flex-wrap:
      wrap;
  }


  .facturacion-document-card__footer
  .facturacion-btn--full {
    min-width:
      0;

    flex:
      1;
  }


  /* =======================================================
     GRUPOS PRODUCTOS
     ======================================================= */

  .facturacion-order-groups,
  .facturacion-order-group {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;
  }


  .facturacion-order-group__header {
    width:
      100%;

    min-width:
      0;

    gap:
      7px;
  }


  .facturacion-order-group__title {
    min-width:
      0;

    flex:
      1;
  }


  .facturacion-order-group__title
  strong,
  .facturacion-order-group__title
  small {
    max-width:
      100%;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }


  .facturacion-order-group__total {
    flex:
      0 0 auto;

    font-size:
      8px;

    white-space:
      nowrap;
  }


  /* =======================================================
     PRODUCTOS DEL PEDIDO
     PASAR DE 4 COLUMNAS A TARJETAS
     ======================================================= */

  .facturacion-order-item-row {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    padding:
      8px;

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

    gap:
      8px;
  }


  .facturacion-order-item-row__product {
    grid-column:
      1 /
      -1;

    width:
      100%;

    min-width:
      0;
  }


  .facturacion-order-item-row__product
  strong,
  .facturacion-order-item-row__product
  small {
    width:
      100%;

    max-width:
      100%;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  .facturacion-order-item-row__quantity,
  .facturacion-order-item-row__price,
  .facturacion-order-item-row__discount,
  .facturacion-order-item-row__iva,
  .facturacion-order-item-row__total {
    min-width:
      0;

    text-align:
      left;

    align-items:
      flex-start;
  }


  /* =======================================================
     INFORMACIÓN PEDIDO
     ======================================================= */

  .facturacion-order-info-grid {
    width:
      100%;

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

    gap:
      6px;
  }


  .facturacion-order-info-grid >
  div {
    min-width:
      0;
  }


  .facturacion-order-info-grid
  strong {
    width:
      100%;

    max-width:
      100%;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


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

  .facturacion-document-overlay {
    right:
      0;

    left:
      0;

    width:
      100%;

    overflow:
      hidden;
  }


  .facturacion-document-panel {
    top:
      56px !important;

    right:
      6px !important;

    bottom:
      6px !important;

    left:
      6px !important;

    width:
      auto !important;

    max-width:
      calc(
        100% -
        12px
      ) !important;

    min-width:
      0 !important;

    margin:
      0 !important;

    overflow:
      hidden !important;

    border-radius:
      9px;
  }


  .facturacion-document-panel__header {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    padding:
      9px;

    gap:
      7px;
  }


  .facturacion-document-panel__body,
  .facturacion-document-panel__content {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    overflow-x:
      hidden !important;
  }


  /* =======================================================
     MODALES
     ======================================================= */

  .facturacion-modal-root {
    max-width:
      100%;

    overflow-x:
      hidden;
  }


  .facturacion-modal {
    width:
      calc(
        100% -
        12px
      ) !important;

    max-width:
      calc(
        100% -
        12px
      ) !important;

    min-width:
      0 !important;

    margin:
      6px !important;

    overflow-x:
      hidden !important;
  }


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

  .facturacion-toast-container {
    top:
      58px;

    right:
      7px;

    left:
      7px;

    width:
      auto;

    max-width:
      none;
  }


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

  .facturacion-page input,
  .facturacion-page select,
  .facturacion-page textarea,
  .facturacion-drawer input,
  .facturacion-drawer select,
  .facturacion-drawer textarea,
  .facturacion-document-panel input,
  .facturacion-document-panel select,
  .facturacion-document-panel textarea,
  .facturacion-modal input,
  .facturacion-modal select,
  .facturacion-modal textarea {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;
  }
}


/* =========================================================
   TELÉFONOS
   ========================================================= */

@media (
  max-width:
    560px
) {

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

  .facturacion-page {
    padding:
      7px !important;
  }


  .facturacion-layout {
    gap:
      8px;
  }


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

  .facturacion-page-header__copy h1 {
    font-size:
      21px;
  }


  .facturacion-page-header__copy p {
    font-size:
      9px;
  }


  .facturacion-page-header__actions
  .facturacion-btn {
    min-height:
      36px;

    padding:
      6px 4px;

    font-size:
      8.5px;
  }


  /* =======================================================
     MÉTRICAS UNA POR FILA
     ======================================================= */

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


  .facturacion-metric-card {
    min-height:
      65px;

    padding:
      8px;
  }


  .facturacion-metric-card__content {
    display:
      grid;

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

    grid-template-rows:
      auto
      auto;

    column-gap:
      8px;

    row-gap:
      2px;

    align-items:
      center;
  }


  .facturacion-metric-card__content >
  span {
    grid-column:
      1;

    grid-row:
      1;
  }


  .facturacion-metric-card__content >
  strong {
    grid-column:
      2;

    grid-row:
      1 /
      3;

    max-width:
      170px;

    text-align:
      right;

    font-size:
      14px;
  }


  .facturacion-metric-card__content >
  small {
    grid-column:
      1;

    grid-row:
      2;
  }


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

  .facturacion-toolbar {
    padding:
      7px;
  }


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


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

  .facturacion-table-card__header {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .facturacion-table-card__legend {
    width:
      100%;

    justify-content:
      flex-start;
  }


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

  .facturacion-table tbody {
    gap:
      7px;

    padding:
      7px;
  }


  .facturacion-table__row {
    border-radius:
      7px;
  }


  .facturacion-table__row >
  td {
    min-height:
      62px;

    padding:
      28px 8px 8px !important;
  }


  .facturacion-table__row >
  td::before {
    top:
      8px;

    left:
      8px;

    right:
      8px;

    font-size:
      6.5px;
  }


  .facturacion-table__row >
  td:nth-child(
    2
  ) {
    min-height:
      68px;
  }


  .facturacion-table__row >
  td:nth-child(
    4
  ),
  .facturacion-table__row >
  td:nth-child(
    5
  ),
  .facturacion-table__row >
  td:nth-child(
    6
  ) {
    min-height:
      80px;
  }


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

  .facturacion-summary-grid {
    grid-template-columns:
      1fr;
  }


  .facturacion-order-info-grid {
    grid-template-columns:
      1fr;
  }


  .facturacion-document-card__body {
    grid-template-columns:
      1fr
      1fr;
  }


  /* =======================================================
     PRODUCTOS
     ======================================================= */

  .facturacion-order-item-row {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


/* =========================================================
   TELÉFONOS MUY CHICOS
   ========================================================= */

@media (
  max-width:
    390px
) {

  .facturacion-page {
    padding:
      5px !important;
  }


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

  .facturacion-page-header__actions
  .facturacion-btn span {
    display:
      none;
  }


  .facturacion-page-header__actions
  .facturacion-btn {
    min-height:
      38px;
  }


  .facturacion-page-header__actions
  .facturacion-btn svg {
    width:
      16px;

    height:
      16px;

    flex:
      0 0 16px;
  }


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

  .facturacion-toolbar__filters {
    grid-template-columns:
      1fr;
  }


  /* =======================================================
     CARDS UNA SOLA COLUMNA
     ======================================================= */

  .facturacion-table__row {
    grid-template-columns:
      1fr;
  }


  .facturacion-table__row >
  td,
  .facturacion-table__row >
  td:nth-child(
    odd
  ),
  .facturacion-table__row >
  td:nth-child(
    even
  ) {
    grid-column:
      1 /
      -1;

    border-right:
      0 !important;
  }


  .facturacion-table__row >
  td:last-child {
    border-bottom:
      0 !important;
  }


  .facturacion-metric-card__content >
  strong {
    max-width:
      145px;

    font-size:
      12px;
  }


  /* =======================================================
     DOCUMENT CARDS
     ======================================================= */

  .facturacion-document-card__body {
    grid-template-columns:
      1fr;
  }


  /* =======================================================
     PRODUCTOS
     ======================================================= */

  .facturacion-order-item-row {
    grid-template-columns:
      1fr;
  }


  .facturacion-order-item-row__product {
    grid-column:
      1;
  }
}


/* =========================================================
   ÚLTIMA PROTECCIÓN
   NINGÚN ELEMENTO PUEDE AGRANDAR EL VIEWPORT
   ========================================================= */

@media (
  max-width:
    820px
) {

  .facturacion-page,
  .facturacion-page section,
  .facturacion-page article,
  .facturacion-page div,
  .facturacion-page form,
  .facturacion-page header,
  .facturacion-page footer,
  .facturacion-page aside,
  .facturacion-drawer,
  .facturacion-drawer section,
  .facturacion-drawer article,
  .facturacion-drawer div,
  .facturacion-document-panel,
  .facturacion-document-panel section,
  .facturacion-document-panel article,
  .facturacion-document-panel div {
    max-width:
      100%;
  }


  .facturacion-page img,
  .facturacion-drawer img,
  .facturacion-document-panel img {
    max-width:
      100%;

    height:
      auto;
  }


  .facturacion-page svg,
  .facturacion-drawer svg,
  .facturacion-document-panel svg {
    max-width:
      100%;
  }


  .facturacion-page table,
  .facturacion-drawer table,
  .facturacion-document-panel table {
    max-width:
      100%;
  }


  .facturacion-page pre,
  .facturacion-page code,
  .facturacion-drawer pre,
  .facturacion-drawer code,
  .facturacion-document-panel pre,
  .facturacion-document-panel code {
    max-width:
      100%;

    white-space:
      pre-wrap;

    overflow-wrap:
      anywhere;
  }


  .facturacion-table-container {
    scrollbar-width:
      none !important;
  }


  .facturacion-table-container::-webkit-scrollbar {
    width:
      0 !important;

    height:
      0 !important;

    display:
      none !important;
  }
}/* =========================================================
   WIRTZ HUB · FACTURACIÓN
   MOBILE FIX FINAL · PANEL DOCUMENTO

   AGREGAR AL FINAL DE:
   frontend/src/pages/facturacion-cobranzas/facturas/facturas.css

   CORRIGE:
   - Tabs sin scroll horizontal
   - Tabs sin quedar cortados
   - Productos documentados responsive
   - Tabla sin barra horizontal
   - Tabla convertida en cards
   - Hero responsive
   - Cero overflow horizontal
   ========================================================= */


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

@media (
  max-width:
    820px
) {

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

  .facturacion-document-panel {
    overflow-x:
      hidden !important;
  }


  .facturacion-document-panel__content {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    overflow-x:
      hidden !important;
  }


  /* =======================================================
     HERO
     Pedido / Cliente / Fecha / Total
     ======================================================= */

  .facturacion-document-hero {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    overflow:
      hidden;
  }


  .facturacion-document-hero__main {
    width:
      100%;

    min-width:
      0;

    display:
      grid;

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


  .facturacion-document-hero__main >
  div {
    min-width:
      0;

    padding:
      10px;

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

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


  .facturacion-document-hero__main >
  div:nth-child(
    2n
  ) {
    border-right:
      0;
  }


  .facturacion-document-hero__main >
  div:nth-last-child(
    -n + 2
  ) {
    border-bottom:
      0;
  }


  .facturacion-document-hero__main strong {
    width:
      100%;

    max-width:
      100%;

    overflow:
      visible;

    text-overflow:
      clip;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }


  .facturacion-document-hero__main small {
    width:
      100%;

    max-width:
      100%;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }


  .facturacion-document-hero__total {
    text-align:
      left;
  }


  /* =======================================================
     TABS
     SIN BARRA HORIZONTAL
     ======================================================= */

  .facturacion-document-tabs {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    margin-top:
      9px;

    padding:
      4px;

    display:
      grid;

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

    align-items:
      stretch;

    gap:
      3px;

    overflow-x:
      hidden !important;

    overflow-y:
      visible;

    scrollbar-width:
      none !important;
  }


  .facturacion-document-tabs::-webkit-scrollbar {
    display:
      none !important;

    width:
      0 !important;

    height:
      0 !important;
  }


  .facturacion-document-tab {
    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

    min-height:
      34px;

    padding:
      0 5px;

    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    gap:
      4px;

    overflow:
      hidden;

    font-size:
      8px;

    white-space:
      nowrap;
  }


  .facturacion-document-tab >
  span {
    min-width:
      16px;

    width:
      auto;

    height:
      16px;

    padding:
      0 4px;

    flex:
      0 0 auto;

    font-size:
      7px;
  }


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

  .facturacion-document-tab-content {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    overflow-x:
      hidden !important;
  }


  /* =======================================================
     DOCUMENT GRID
     ======================================================= */

  .facturacion-document-grid {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    grid-template-columns:
      1fr;

    gap:
      8px;
  }


  /* =======================================================
     SECCIONES
     ======================================================= */

  .facturacion-document-section {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    padding:
      9px;

    overflow:
      hidden;
  }


  /* =======================================================
     PRODUCTOS DOCUMENTADOS
     TABLA -> CARDS
     ======================================================= */

  .facturacion-document-items-table {
    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    display:
      block;

    overflow:
      hidden !important;

    border:
      0;

    background:
      transparent;
  }


  .facturacion-document-items-table thead {
    display:
      none;
  }


  .facturacion-document-items-table tbody {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    display:
      flex;

    flex-direction:
      column;

    gap:
      7px;
  }


  .facturacion-document-items-table tr {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    display:
      grid;

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

    overflow:
      hidden;

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

    border-radius:
      7px;

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


  /* =======================================================
     CELDAS PRODUCTOS
     ======================================================= */

  .facturacion-document-items-table td {
    position:
      relative;

    width:
      auto;

    max-width:
      100%;

    min-width:
      0;

    min-height:
      58px;

    padding:
      27px 8px 8px !important;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      flex-start;

    gap:
      3px;

    overflow:
      hidden;

    border-right:
      1px solid var(
        --fac-border
      ) !important;

    border-bottom:
      1px solid var(
        --fac-border
      ) !important;

    background:
      var(
        --fac-surface
      );

    text-align:
      left !important;

    white-space:
      normal !important;

    font-size:
      9px;
  }


  .facturacion-document-items-table td:nth-child(
    even
  ) {
    border-right:
      0 !important;
  }


  /* =======================================================
     LABELS
     ======================================================= */

  .facturacion-document-items-table td::before {
    position:
      absolute;

    top:
      8px;

    left:
      8px;

    right:
      8px;

    display:
      block;

    overflow:
      hidden;

    color:
      var(
        --fac-muted
      );

    font-size:
      6.5px;

    line-height:
      1;

    font-weight:
      900;

    letter-spacing:
      0.055em;

    text-transform:
      uppercase;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  .facturacion-document-items-table td:nth-child(
    1
  )::before {
    content:
      "Producto";
  }


  .facturacion-document-items-table td:nth-child(
    2
  )::before {
    content:
      "Cantidad";
  }


  .facturacion-document-items-table td:nth-child(
    3
  )::before {
    content:
      "Precio";
  }


  .facturacion-document-items-table td:nth-child(
    4
  )::before {
    content:
      "Desc.";
  }


  .facturacion-document-items-table td:nth-child(
    5
  )::before {
    content:
      "IVA";
  }


  .facturacion-document-items-table td:nth-child(
    6
  )::before {
    content:
      "Total";
  }


  /* =======================================================
     PRODUCTO OCUPA TODO EL ANCHO
     ======================================================= */

  .facturacion-document-items-table td:nth-child(
    1
  ) {
    grid-column:
      1 /
      -1;

    min-height:
      72px;

    border-right:
      0 !important;
  }


  /* =======================================================
     CONTENIDO INTERNO
     ======================================================= */

  .facturacion-document-items-table td >
  * {
    max-width:
      100%;

    min-width:
      0;
  }


  .facturacion-document-items-table td strong,
  .facturacion-document-items-table td span,
  .facturacion-document-items-table td small {
    max-width:
      100%;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }


  /* =======================================================
     ÚLTIMA CELDA
     ======================================================= */

  .facturacion-document-items-table tr
  td:last-child {
    border-bottom:
      0 !important;
  }


  /* =======================================================
     DATA LIST
     ======================================================= */

  .facturacion-data-list,
  .facturacion-data-list--two {
    width:
      100%;

    max-width:
      100%;

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

    gap:
      6px;
  }


  .facturacion-data-list >
  div {
    min-width:
      0;
  }


  .facturacion-data-list strong {
    width:
      100%;

    max-width:
      100%;

    overflow:
      visible;

    text-overflow:
      clip;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }


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

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

    max-width:
      100%;

    grid-template-columns:
      1fr;

    gap:
      7px;
  }


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


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

  .facturacion-totals-card {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;
  }


  /* =======================================================
     CERO SCROLL HORIZONTAL DENTRO DEL PANEL
     ======================================================= */

  .facturacion-document-panel
  * {
    max-width:
      100%;
  }


  .facturacion-document-panel
  table {
    max-width:
      100%;
  }
}


/* =========================================================
   TELÉFONO
   ========================================================= */

@media (
  max-width:
    560px
) {

  /* =======================================================
     HERO
     ======================================================= */

  .facturacion-document-hero__main {
    grid-template-columns:
      1fr;
  }


  .facturacion-document-hero__main >
  div {
    border-right:
      0;

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


  .facturacion-document-hero__main >
  div:nth-last-child(
    -n + 2
  ) {
    border-bottom:
      1px solid var(
        --fac-border
      );
  }


  .facturacion-document-hero__main >
  div:last-child {
    border-bottom:
      0;
  }


  /* =======================================================
     TABS MOBILE
     3 ARRIBA / 2 ABAJO
     ======================================================= */

  .facturacion-document-tabs {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );

    gap:
      4px;
  }


  .facturacion-document-tab {
    min-height:
      35px;

    padding:
      0 4px;

    font-size:
      8px;
  }


  /* =======================================================
     LOS DOS ÚLTIMOS TABS
     ======================================================= */

  .facturacion-document-tab:nth-child(
    4
  ),
  .facturacion-document-tab:nth-child(
    5
  ) {
    grid-column:
      auto;
  }


  /* =======================================================
     PRODUCTOS
     ======================================================= */

  .facturacion-document-items-table tr {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .facturacion-document-items-table td {
    min-height:
      56px;

    padding:
      26px 8px 8px !important;
  }


  .facturacion-document-items-table td:nth-child(
    1
  ) {
    min-height:
      70px;
  }


  /* =======================================================
     DATA LIST
     ======================================================= */

  .facturacion-data-list,
  .facturacion-data-list--two {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   390PX O MENOS
   ========================================================= */

@media (
  max-width:
    390px
) {

  /* =======================================================
     TABS
     DOS COLUMNAS
     ======================================================= */

  .facturacion-document-tabs {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .facturacion-document-tab:last-child:nth-child(
    odd
  ) {
    grid-column:
      1 /
      -1;
  }


  /* =======================================================
     PRODUCTOS UNA COLUMNA
     ======================================================= */

  .facturacion-document-items-table tr {
    grid-template-columns:
      1fr;
  }


  .facturacion-document-items-table td,
  .facturacion-document-items-table td:nth-child(
    odd
  ),
  .facturacion-document-items-table td:nth-child(
    even
  ) {
    grid-column:
      1 /
      -1;

    border-right:
      0 !important;
  }


  .facturacion-document-items-table td:last-child {
    border-bottom:
      0 !important;
  }
}


/* =========================================================
   ELIMINAR BARRAS HORIZONTALES DEL PANEL
   ========================================================= */

@media (
  max-width:
    820px
) {

  .facturacion-document-tabs,
  .facturacion-document-panel__content,
  .facturacion-document-tab-content,
  .facturacion-document-section,
  .facturacion-document-items-table {
    scrollbar-width:
      none !important;
  }


  .facturacion-document-tabs::-webkit-scrollbar,
  .facturacion-document-panel__content::-webkit-scrollbar,
  .facturacion-document-tab-content::-webkit-scrollbar,
  .facturacion-document-section::-webkit-scrollbar,
  .facturacion-document-items-table::-webkit-scrollbar {
    display:
      none !important;

    width:
      0 !important;

    height:
      0 !important;
  }
}/* =========================================================
   WIRTZ HUB · FACTURACIÓN
   TIPOGRAFÍA MÁS GRANDE / MÁS FIRME
   AGREGAR AL FINAL DE:
   frontend/src/pages/facturacion-cobranzas/facturas/facturas.css
   ========================================================= */


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

.facturacion-page,
.facturacion-drawer,
.facturacion-document-panel,
.facturacion-modal {
  --fac-text:
    #1b1f24;

  --fac-text-strong:
    #050608;

  --fac-muted:
    #444b55;

  --fac-muted-2:
    #626a75;
}


/* =========================================================
   TEXTO GENERAL
   ========================================================= */

.facturacion-page,
.facturacion-drawer,
.facturacion-document-panel,
.facturacion-modal {
  font-weight:
    650;
}


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

.facturacion-page-header__eyebrow {
  font-size:
    10px;

  font-weight:
    900;
}


.facturacion-page-header__copy h1 {
  font-weight:
    900;
}


.facturacion-page-header__copy p {
  font-size:
    12px;

  font-weight:
    700;

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


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

.facturacion-btn {
  font-size:
    12px;

  font-weight:
    850;
}


.facturacion-icon-btn {
  color:
    var(
      --fac-text
    );
}


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

.facturacion-metric-card__content >
span {
  font-size:
    11px;

  font-weight:
    850;

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


.facturacion-metric-card__content >
strong {
  font-size:
    20px;

  font-weight:
    900;

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


.facturacion-metric-card__content >
small {
  font-size:
    10px;

  font-weight:
    750;

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


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

.facturacion-toolbar__search input {
  font-size:
    12px;

  font-weight:
    750;

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


.facturacion-control {
  font-size:
    12px;

  font-weight:
    750;

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


.facturacion-field label {
  font-size:
    10px;

  font-weight:
    900;

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


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

.facturacion-table-card__header h2 {
  font-size:
    14px;

  font-weight:
    900;
}


.facturacion-table-card__header p {
  font-size:
    10px;

  font-weight:
    750;

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


.facturacion-table-card__legend span {
  font-size:
    10px;

  font-weight:
    850;

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


/* =========================================================
   TABLA DESKTOP
   ========================================================= */

.facturacion-table th {
  font-size:
    10px;

  font-weight:
    900;

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


.facturacion-table td {
  font-size:
    11.5px;

  font-weight:
    700;

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


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

.facturacion-order-link strong {
  font-size:
    11.5px;

  font-weight:
    900;
}


.facturacion-order-link small {
  font-size:
    9.5px;

  font-weight:
    700;

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


/* =========================================================
   CLIENTE
   ========================================================= */

.facturacion-client-cell__text strong {
  font-size:
    11.5px;

  font-weight:
    900;

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


.facturacion-client-cell__text small {
  font-size:
    9.5px;

  font-weight:
    700;

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


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

.facturacion-date-cell strong,
.facturacion-money-cell strong {
  font-size:
    11.5px;

  font-weight:
    900;
}


.facturacion-date-cell small,
.facturacion-money-cell small {
  font-size:
    9.5px;

  font-weight:
    700;

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


/* =========================================================
   DOCUMENT CELL
   ========================================================= */

.facturacion-doc-cell__body strong {
  font-size:
    10.5px;

  font-weight:
    900;
}


.facturacion-doc-cell__body small {
  font-size:
    9px;

  font-weight:
    700;

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


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

.facturacion-badge {
  font-size:
    9.5px;

  font-weight:
    900;
}


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

.facturacion-drawer__eyebrow {
  font-size:
    9px;

  font-weight:
    900;
}


.facturacion-drawer__title-row h2 {
  font-size:
    19px;

  font-weight:
    900;
}


.facturacion-drawer__heading >
p {
  font-size:
    11px;

  font-weight:
    750;

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


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

.facturacion-summary-item >
span {
  font-size:
    9px;

  font-weight:
    900;

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


.facturacion-summary-item >
strong {
  font-size:
    11px;

  font-weight:
    900;
}


.facturacion-summary-item >
small {
  font-size:
    8.5px;

  font-weight:
    700;

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


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

.facturacion-section-header h3 {
  font-size:
    12px;

  font-weight:
    900;
}


.facturacion-section-header p {
  font-size:
    10px;

  font-weight:
    700;

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


/* =========================================================
   DOCUMENT CARDS
   ========================================================= */

.facturacion-document-card__header span {
  font-size:
    8.5px;

  font-weight:
    900;

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


.facturacion-document-card__header strong {
  font-size:
    10.5px;

  font-weight:
    900;
}


.facturacion-document-card__metric span {
  font-size:
    8.5px;

  font-weight:
    850;

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


.facturacion-document-card__metric strong {
  font-size:
    10.5px;

  font-weight:
    900;
}


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

.facturacion-order-group__title strong {
  font-size:
    10.5px;

  font-weight:
    900;
}


.facturacion-order-group__title small {
  font-size:
    8.5px;

  font-weight:
    700;

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


.facturacion-order-group__total {
  font-size:
    10.5px;

  font-weight:
    900;
}


.facturacion-order-item-row__product strong {
  font-size:
    10.5px;

  font-weight:
    900;
}


.facturacion-order-item-row__product small {
  font-size:
    8.5px;

  font-weight:
    700;

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


.facturacion-order-item-row__quantity span,
.facturacion-order-item-row__price span,
.facturacion-order-item-row__discount span,
.facturacion-order-item-row__iva span,
.facturacion-order-item-row__total span {
  font-size:
    8px;

  font-weight:
    850;

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


.facturacion-order-item-row__quantity strong,
.facturacion-order-item-row__price strong,
.facturacion-order-item-row__discount strong,
.facturacion-order-item-row__iva strong,
.facturacion-order-item-row__total strong {
  font-size:
    9.5px;

  font-weight:
    900;
}


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

.facturacion-order-info-grid span {
  font-size:
    8.5px;

  font-weight:
    850;

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


.facturacion-order-info-grid strong {
  font-size:
    9.5px;

  font-weight:
    900;
}


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

.facturacion-document-hero__main span {
  font-size:
    8.5px;

  font-weight:
    900;

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


.facturacion-document-hero__main strong {
  font-size:
    11.5px;

  font-weight:
    900;
}


.facturacion-document-hero__main small {
  font-size:
    8.5px;

  font-weight:
    700;

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


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

.facturacion-document-tab {
  font-size:
    10px;

  font-weight:
    850;

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


.facturacion-document-tab.is-active {
  color:
    var(
      --fac-text-strong
    );

  font-weight:
    900;
}


.facturacion-document-tab >
span {
  font-size:
    8px;

  font-weight:
    900;
}


/* =========================================================
   DATA LIST
   ========================================================= */

.facturacion-data-list span {
  font-size:
    8.5px;

  font-weight:
    850;

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


.facturacion-data-list strong {
  font-size:
    9.5px;

  font-weight:
    900;
}


/* =========================================================
   PRODUCTOS DOCUMENTADOS
   ========================================================= */

.facturacion-document-items-table th {
  font-size:
    8.5px;

  font-weight:
    900;

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


.facturacion-document-items-table td {
  font-size:
    10px;

  font-weight:
    750;

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


.facturacion-document-items-table td strong {
  font-weight:
    900;

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


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

@media (
  max-width:
    820px
) {

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

  .facturacion-page {
    font-size:
      14px;
  }


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

  .facturacion-page-header__eyebrow {
    font-size:
      9px;
  }


  .facturacion-page-header__copy h1 {
    font-size:
      24px;

    font-weight:
      900;
  }


  .facturacion-page-header__copy p {
    font-size:
      11px;

    font-weight:
      750;
  }


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

  .facturacion-page-header__actions
  .facturacion-btn,
  .facturacion-toolbar
  .facturacion-btn {
    font-size:
      10px;

    font-weight:
      900;
  }


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

  .facturacion-metric-card__content >
  span {
    font-size:
      9.5px;

    font-weight:
      900;
  }


  .facturacion-metric-card__content >
  strong {
    font-size:
      16px;

    font-weight:
      900;
  }


  .facturacion-metric-card__content >
  small {
    font-size:
      8.5px;

    font-weight:
      750;
  }


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

  .facturacion-toolbar__search input {
    font-size:
      12px;

    font-weight:
      800;
  }


  .facturacion-toolbar__filters
  .facturacion-control {
    font-size:
      10px;

    font-weight:
      800;
  }


  /* =======================================================
     MOBILE CARD LABELS
     ======================================================= */

  .facturacion-table__row >
  td::before {
    font-size:
      7.5px !important;

    font-weight:
      900 !important;

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


  /* =======================================================
     MOBILE TABLE TEXT
     ======================================================= */

  .facturacion-table__row >
  td {
    font-size:
      11px !important;

    font-weight:
      750 !important;
  }


  .facturacion-order-link strong,
  .facturacion-client-cell__text strong,
  .facturacion-date-cell strong,
  .facturacion-money-cell strong {
    font-size:
      11px !important;

    font-weight:
      900 !important;
  }


  .facturacion-order-link small,
  .facturacion-client-cell__text small,
  .facturacion-date-cell small,
  .facturacion-money-cell small {
    font-size:
      8.5px !important;

    font-weight:
      750 !important;
  }


  .facturacion-doc-cell__body strong {
    font-size:
      9.5px !important;

    font-weight:
      900 !important;
  }


  .facturacion-doc-cell__body small {
    font-size:
      8px !important;

    font-weight:
      750 !important;
  }


  .facturacion-badge {
    font-size:
      8.5px !important;

    font-weight:
      900 !important;
  }


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

  .facturacion-drawer__title-row h2 {
    font-size:
      17px;

    font-weight:
      900;
  }


  .facturacion-drawer__heading >
  p {
    font-size:
      10px;

    font-weight:
      750;
  }


  .facturacion-summary-item >
  span {
    font-size:
      8.5px;
  }


  .facturacion-summary-item >
  strong {
    font-size:
      10.5px;

    font-weight:
      900;
  }


  .facturacion-summary-item >
  small {
    font-size:
      8px;

    font-weight:
      700;
  }


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

  .facturacion-document-hero__main span {
    font-size:
      8px;

    font-weight:
      900;
  }


  .facturacion-document-hero__main strong {
    font-size:
      11px;

    font-weight:
      900;
  }


  .facturacion-document-hero__main small {
    font-size:
      8px;

    font-weight:
      700;
  }


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

  .facturacion-document-tab {
    font-size:
      9px !important;

    font-weight:
      850 !important;
  }


  .facturacion-document-tab.is-active {
    font-weight:
      900 !important;
  }


  /* =======================================================
     PRODUCTOS DOCUMENTADOS
     ======================================================= */

  .facturacion-document-items-table td::before {
    font-size:
      7px !important;

    font-weight:
      900 !important;

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


  .facturacion-document-items-table td {
    font-size:
      10px !important;

    font-weight:
      750 !important;
  }


  .facturacion-document-items-table td strong {
    font-size:
      10.5px;

    font-weight:
      900;
  }
}


/* =========================================================
   DARK MODE
   MENOS BLANCO PURO / MÁS CONTRASTE ELEGANTE
   ========================================================= */

html[data-theme="dark"]
.facturacion-page,
body[data-theme="dark"]
.facturacion-page,
html.dark
.facturacion-page,
body.dark
.facturacion-page {
  --fac-text:
    #d5d5d5;

  --fac-text-strong:
    #f2f2f2;

  --fac-muted:
    #b0b0b0;

  --fac-muted-2:
    #8d8d8d;
}


html[data-theme="dark"]
.facturacion-drawer,
html[data-theme="dark"]
.facturacion-document-panel,
html[data-theme="dark"]
.facturacion-modal,
body[data-theme="dark"]
.facturacion-drawer,
body[data-theme="dark"]
.facturacion-document-panel,
body[data-theme="dark"]
.facturacion-modal,
body.dark
.facturacion-drawer,
body.dark
.facturacion-document-panel,
body.dark
.facturacion-modal {
  --fac-text:
    #d5d5d5;

  --fac-text-strong:
    #f2f2f2;

  --fac-muted:
    #b0b0b0;

  --fac-muted-2:
    #8d8d8d;
}