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

   WIRTZ HUB
   FACTURACIÓN Y COBRANZAS
   CUENTA CORRIENTE

   REDISEÑO COMPLETO

   PARTE 1 DE 4

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


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

.cc-page {
  --cc-bg: #f4f5f7;
  --cc-bg-soft: #f7f8fa;

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

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

  --cc-text: #25292f;
  --cc-text-strong: #090b0e;

  --cc-muted: #626a75;
  --cc-muted-2: #858d98;

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

  --cc-success: #087443;
  --cc-success-bg: #eff9f4;
  --cc-success-border: #afdcc6;

  --cc-warning: #9b5b08;
  --cc-warning-bg: #fff8e9;
  --cc-warning-border: #e8cb93;

  --cc-danger: #bd2727;
  --cc-danger-bg: #fff3f3;
  --cc-danger-border: #edb4b4;

  --cc-info: #175aaf;
  --cc-info-bg: #f1f6fc;
  --cc-info-border: #b7cee9;

  --cc-purple: #704ea0;
  --cc-purple-bg: #f8f4fb;
  --cc-purple-border: #d8c8e5;

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

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

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

  --cc-shadow-popover:
    0 14px 36px rgba(
      0,
      0,
      0,
      0.12
    );

  --cc-shadow-overlay:
    0 24px 80px rgba(
      0,
      0,
      0,
      0.18
    );

  width: 100%;
  min-width: 0;

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

  overflow-x: hidden;

  background:
    var(
      --cc-bg
    );

  color:
    var(
      --cc-text
    );

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

  font-size: 13px;
}


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

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


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


.cc-page button {
  -webkit-tap-highlight-color: transparent;
}


.cc-page input,
.cc-page select,
.cc-page textarea {
  min-width: 0;
}


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

.cc-page__inner {
  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 14px;

  padding: 18px;
}


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

.cc-header {
  width: 100%;
  min-width: 0;
}


.cc-header__main {
  width: 100%;
  min-width: 0;
}


.cc-header__eyebrow {
  margin-bottom: 4px;

  color:
    var(
      --cc-muted
    );

  font-size: 9px;
  line-height: 1;

  font-weight: 850;

  letter-spacing: 0.085em;

  text-transform: uppercase;
}


.cc-header__title-row {
  min-width: 0;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;
}


.cc-header__title-row > div:first-child {
  min-width: 0;
}


.cc-header__title {
  margin: 0;

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

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

  line-height: 1.06;

  font-weight: 850;

  letter-spacing: -0.04em;
}


.cc-header__description {
  max-width: 760px;

  margin:
    6px
    0
    0;

  color:
    var(
      --cc-muted
    );

  font-size: 11px;
  line-height: 1.5;

  font-weight: 650;
}


.cc-header__actions {
  flex: 0 0 auto;

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

  flex-wrap: wrap;

  gap: 6px;
}


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

.cc-btn {
  appearance: none;

  min-height: 36px;

  padding:
    7px
    12px;

  border:
    1px
    solid
    transparent;

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

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

  gap: 7px;

  background: transparent;

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

  font-size: 11px;
  line-height: 1;

  font-weight: 800;

  white-space: nowrap;

  cursor: pointer;

  box-shadow: none;

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


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


.cc-btn:active:not(:disabled) {
  transform: none;

  transition-duration: 60ms;
}


.cc-btn:disabled {
  opacity: 0.42;

  cursor: not-allowed;
}


.cc-btn svg {
  width: 15px;
  height: 15px;

  flex: 0 0 15px;

  stroke-width: 2.1;
}


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

  background:
    var(
      --cc-primary
    );

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


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

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


.cc-btn--secondary {
  border-color:
    var(
      --cc-border-strong
    );

  background:
    var(
      --cc-surface
    );

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


.cc-btn--secondary:hover:not(:disabled) {
  border-color:
    var(
      --cc-border-extra
    );

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


.cc-btn--ghost {
  border-color:
    var(
      --cc-border
    );

  background:
    transparent;

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


.cc-btn--ghost:hover:not(:disabled) {
  border-color:
    var(
      --cc-border-strong
    );

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

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


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

  background:
    var(
      --cc-danger
    );

  color: #ffffff;
}


.cc-btn--danger:hover:not(:disabled) {
  border-color: #a61f1f;

  background: #a61f1f;
}


.cc-btn--xs {
  min-height: 27px;

  padding:
    4px
    8px;

  border-radius: 5px;

  font-size: 9px;
}


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

.cc-icon-btn {
  appearance: none;

  width: 32px;
  height: 32px;

  min-width: 32px;

  flex: 0 0 32px;

  padding: 0;

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

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

  display: inline-grid;

  place-items: center;

  background:
    var(
      --cc-surface
    );

  color:
    var(
      --cc-muted
    );

  cursor: pointer;

  box-shadow: none;

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


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

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

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

  transform:
    translateY(
      -1px
    );
}


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


.cc-icon-btn:disabled {
  opacity: 0.35;

  cursor: not-allowed;
}


.cc-icon-btn svg {
  width: 14px;
  height: 14px;

  stroke-width: 2.1;
}


.cc-icon-btn--row {
  width: 29px;
  height: 29px;

  min-width: 29px;

  flex-basis: 29px;
}


.cc-icon-btn--close {
  color:
    var(
      --cc-text
    );
}


.cc-icon-btn--danger {
  color:
    var(
      --cc-danger
    );
}


.cc-icon-btn--danger:hover:not(:disabled) {
  border-color:
    var(
      --cc-danger-border
    );

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

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


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

.cc-btn:focus-visible,
.cc-icon-btn:focus-visible,
.cc-currency-toggle__btn:focus-visible,
.cc-search input:focus-visible,
.cc-select-wrap select:focus-visible,
.cc-advanced-filters input:focus-visible {
  outline:
    2px
    solid
    var(
      --cc-text-strong
    );

  outline-offset: 2px;

  box-shadow: none;
}


/* =========================================================
   CURRENCY TOGGLE
   ========================================================= */

.cc-currency-toggle {
  height: 36px;

  padding: 3px;

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

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

  display: flex;
  align-items: center;

  gap: 2px;

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


.cc-currency-toggle__btn {
  appearance: none;

  min-width: 48px;

  height: 28px;

  padding:
    0
    9px;

  border:
    1px
    solid
    transparent;

  border-radius: 4px;

  background: transparent;

  color:
    var(
      --cc-muted
    );

  font-size: 9px;

  font-weight: 850;

  cursor: pointer;

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


.cc-currency-toggle__btn:hover {
  color:
    var(
      --cc-text-strong
    );
}


.cc-currency-toggle__btn.is-active {
  border-color:
    var(
      --cc-border-strong
    );

  background:
    var(
      --cc-surface
    );

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


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

.cc-metrics {
  width: 100%;
  min-width: 0;

  display: grid;

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

  gap: 7px;
}


.cc-metric-card {
  position: relative;

  min-width: 0;

  min-height: 92px;

  padding:
    12px
    12px;

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

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

  display: flex;
  align-items: center;

  gap: 10px;

  overflow: hidden;

  background:
    var(
      --cc-surface
    );

  box-shadow: none;

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


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

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

  transform:
    translateY(
      -1px
    );
}


.cc-metric-card__icon {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

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

  border-radius: 7px;

  display: grid;

  place-items: center;

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

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


.cc-metric-card__icon svg {
  width: 16px;
  height: 16px;

  stroke-width: 2;
}


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

  flex: 1;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.cc-metric-card__label {
  overflow: hidden;

  color:
    var(
      --cc-muted
    );

  font-size: 9px;
  line-height: 1.2;

  font-weight: 750;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.cc-metric-card__value {
  min-width: 0;

  overflow: hidden;

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

  font-size: 17px;
  line-height: 1.15;

  font-weight: 850;

  letter-spacing: -0.035em;

  font-variant-numeric:
    tabular-nums;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.cc-metric-card__meta {
  overflow: hidden;

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

  font-size: 8px;
  line-height: 1.25;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   MÉTRICA PRIMARY
   ========================================================= */

.cc-metric-card--primary
.cc-metric-card__icon {
  border-color:
    var(
      --cc-info-border
    );

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

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


/* =========================================================
   MÉTRICA DANGER
   ========================================================= */

.cc-metric-card--danger
.cc-metric-card__icon {
  border-color:
    var(
      --cc-danger-border
    );

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

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


.cc-metric-card--danger
.cc-metric-card__value {
  color:
    var(
      --cc-danger
    );
}


/* =========================================================
   MÉTRICA WARNING
   ========================================================= */

.cc-metric-card--warning
.cc-metric-card__icon {
  border-color:
    var(
      --cc-warning-border
    );

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

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


/* =========================================================
   MÉTRICA SUCCESS
   ========================================================= */

.cc-metric-card--success
.cc-metric-card__icon {
  border-color:
    var(
      --cc-success-border
    );

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

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


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

.cc-skeleton {
  position: relative;

  overflow: hidden;

  border-radius: 4px;

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


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

  position: absolute;

  inset: 0;

  transform:
    translateX(
      -100%
    );

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

  animation:
    cc-skeleton-loading
    1.15s
    linear
    infinite;
}


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


.cc-skeleton--icon {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  border-radius: 7px;
}


.cc-skeleton--label {
  width: 70px;
  height: 8px;
}


.cc-skeleton--value {
  width: 118px;
  height: 17px;

  margin-top: 6px;
}


.cc-skeleton--small {
  width: 92px;
  height: 7px;

  margin-top: 5px;
}


.cc-skeleton--avatar {
  width: 31px;
  height: 31px;

  flex: 0 0 31px;

  border-radius: 6px;
}


.cc-skeleton--line-lg {
  width: min(
    100%,
    180px
  );

  height: 9px;
}


.cc-skeleton--line-sm {
  width: min(
    72%,
    120px
  );

  height: 7px;

  margin-top: 5px;
}


.cc-skeleton--money {
  width: 94px;
  height: 11px;
}


.cc-skeleton--badge {
  width: 72px;
  height: 21px;

  border-radius: 5px;
}


.cc-skeleton--date {
  width: 76px;
  height: 9px;
}


.cc-skeleton--button {
  width: 29px;
  height: 29px;

  border-radius: 5px;
}


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

.cc-workspace {
  width: 100%;
  min-width: 0;
}


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

.cc-panel {
  width: 100%;
  min-width: 0;

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

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

  overflow: hidden;

  background:
    var(
      --cc-surface
    );

  box-shadow: none;
}


.cc-panel__header {
  min-height: 57px;

  padding:
    10px
    12px;

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

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

  gap: 14px;

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


.cc-panel__header > div:first-child {
  min-width: 0;
}


.cc-panel__title {
  margin: 0;

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

  font-size: 13px;
  line-height: 1.2;

  font-weight: 850;
}


.cc-panel__subtitle {
  margin:
    3px
    0
    0;

  color:
    var(
      --cc-muted
    );

  font-size: 9px;

  font-weight: 650;
}


.cc-panel__header-actions {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  gap: 5px;
}


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

.cc-toolbar {
  width: 100%;
  min-width: 0;

  padding:
    9px
    10px;

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

  display: flex;
  align-items: flex-end;

  gap: 8px;

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


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

.cc-search {
  position: relative;

  min-width: 230px;

  flex:
    1 1 420px;

  display: block;
}


.cc-search > svg {
  position: absolute;

  top: 50%;
  left: 11px;

  width: 14px;
  height: 14px;

  transform:
    translateY(
      -50%
    );

  color:
    var(
      --cc-muted
    );

  pointer-events: none;
}


.cc-search input {
  width: 100%;
  height: 37px;

  padding:
    0
    37px
    0
    34px;

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

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

  outline: none;

  background:
    var(
      --cc-surface
    );

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

  font-size: 10px;

  font-weight: 700;

  box-shadow: none;

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


.cc-search input::placeholder {
  color:
    var(
      --cc-muted-2
    );

  opacity: 1;
}


.cc-search input:hover {
  border-color:
    var(
      --cc-border-strong
    );
}


.cc-search input:focus {
  border-color:
    var(
      --cc-text-strong
    );

  box-shadow: none;
}


.cc-search__clear {
  position: absolute;

  top: 50%;
  right: 7px;

  width: 24px;
  height: 24px;

  padding: 0;

  border:
    1px
    solid
    transparent;

  border-radius: 4px;

  display: grid;

  place-items: center;

  transform:
    translateY(
      -50%
    );

  background: transparent;

  color:
    var(
      --cc-muted
    );

  cursor: pointer;

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


.cc-search__clear:hover {
  border-color:
    var(
      --cc-border
    );

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

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


.cc-search__clear svg {
  width: 12px;
  height: 12px;
}


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

.cc-toolbar__filters {
  min-width: 0;

  flex:
    0 1 auto;

  display: flex;
  align-items: flex-end;

  gap: 5px;
}


/* =========================================================
   SELECT WRAP
   ========================================================= */

.cc-select-wrap {
  min-width: 110px;

  display: flex;
  flex-direction: column;

  gap: 4px;
}


.cc-select-wrap > span {
  padding-left: 1px;

  color:
    var(
      --cc-muted
    );

  font-size: 8px;

  font-weight: 800;
}


.cc-select-wrap select {
  width: 100%;
  min-width: 0;

  height: 36px;

  padding:
    0
    28px
    0
    9px;

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

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

  outline: none;

  background:
    var(
      --cc-surface
    );

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

  font-size: 9px;

  font-weight: 700;

  cursor: pointer;

  box-shadow: none;

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


.cc-select-wrap select:hover {
  border-color:
    var(
      --cc-border-strong
    );
}


.cc-select-wrap select:focus {
  border-color:
    var(
      --cc-text-strong
    );

  box-shadow: none;
}


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

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

  padding: 10px;

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

  display: grid;

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

  gap: 7px;

  align-items: end;

  background:
    var(
      --cc-surface
    );

  animation:
    cc-filters-open
    120ms
    ease-out;
}


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


@keyframes cc-filters-open {
  from {
    opacity: 0;

    transform:
      translateY(
        -3px
      );
  }

  to {
    opacity: 1;

    transform: none;
  }
}


.cc-advanced-filters > label {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 4px;
}


.cc-advanced-filters > label > span {
  padding-left: 1px;

  color:
    var(
      --cc-muted
    );

  font-size: 8px;

  font-weight: 800;
}


.cc-advanced-filters input,
.cc-advanced-filters select {
  width: 100%;
  height: 36px;

  min-width: 0;

  padding:
    0
    9px;

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

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

  outline: none;

  background:
    var(
      --cc-surface
    );

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

  font-size: 9px;

  font-weight: 700;

  box-shadow: none;

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


.cc-advanced-filters input::placeholder {
  color:
    var(
      --cc-muted-2
    );

  opacity: 1;
}


.cc-advanced-filters input:hover,
.cc-advanced-filters select:hover {
  border-color:
    var(
      --cc-border-strong
    );
}


.cc-advanced-filters input:focus,
.cc-advanced-filters select:focus {
  border-color:
    var(
      --cc-text-strong
    );

  box-shadow: none;
}


.cc-advanced-filters__actions {
  display: flex;
  align-items: center;

  justify-content: flex-end;
}


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

.cc-table-shell {
  width: 100%;
  min-width: 0;

  overflow-x: auto;
  overflow-y: visible;

  background:
    var(
      --cc-surface
    );

  scrollbar-width: thin;
}


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

.cc-table {
  width: 100%;

  min-width: 860px;

  border-collapse: separate;
  border-spacing: 0;

  table-layout: auto;

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


.cc-table--clients {
  min-width: 920px;
}


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


.cc-table th {
  height: 38px;

  padding:
    0
    10px;

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

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

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

  color:
    var(
      --cc-muted
    );

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

  font-weight: 850;

  text-align: left;

  text-transform: uppercase;

  letter-spacing: 0.035em;

  white-space: nowrap;
}


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


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

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

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

  background:
    var(
      --cc-surface
    );

  color:
    var(
      --cc-text
    );

  font-size: 10px;
  line-height: 1.35;

  font-weight: 650;

  vertical-align: middle;

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


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


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


.cc-table tbody tr:not(.is-loading) {
  transition:
    background-color
      var(
        --cc-fast
      );
}


.cc-table tbody tr:not(.is-loading):hover td {
  background:
    var(
      --cc-surface-2
    );
}


.cc-table-row {
  cursor: pointer;
}


.cc-table th.is-numeric,
.cc-table td.is-numeric {
  text-align: right;
}


.cc-table td.is-numeric {
  font-variant-numeric:
    tabular-nums;
}


.cc-col-client {
  min-width: 245px;
}


.cc-col-actions {
  width: 66px;

  text-align: right !important;
}


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

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

  display: flex;
  align-items: center;

  gap: 9px;
}


.cc-client-avatar {
  width: 32px;
  height: 32px;

  flex:
    0
    0
    32px;

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

  border-radius: 6px;

  display: grid;

  place-items: center;

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

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

  font-size: 11px;

  font-weight: 850;
}


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

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.cc-client-cell__name {
  max-width: 260px;

  overflow: hidden;

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

  font-size: 10.5px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.cc-client-cell__legal {
  max-width: 260px;

  overflow: hidden;

  color:
    var(
      --cc-muted
    );

  font-size: 8.5px;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.cc-client-cell__meta {
  max-width: 280px;

  display: flex;
  align-items: center;

  gap: 5px;

  overflow: hidden;
}


.cc-client-cell__meta span {
  position: relative;

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

  font-size: 7.5px;

  font-weight: 650;

  white-space: nowrap;
}


.cc-client-cell__meta span:not(:last-child)::after {
  content: "·";

  margin-left: 5px;

  color:
    var(
      --cc-border-extra
    );
}


/* =========================================================
   MONEY
   ========================================================= */

.cc-money {
  color:
    var(
      --cc-text-strong
    );

  font-size: 10.5px;

  font-weight: 850;

  font-variant-numeric:
    tabular-nums;

  white-space: nowrap;
}


.cc-money.is-debt,
.cc-money.is-overdue {
  color:
    var(
      --cc-danger
    );
}


.cc-money.is-credit {
  color:
    var(
      --cc-success
    );
}


/* =========================================================
   VALUE STACK
   ========================================================= */

.cc-value-stack {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.cc-value-stack > strong,
.cc-value-stack > span {
  color:
    var(
      --cc-text-strong
    );

  font-size: 9.5px;

  font-weight: 800;
}


.cc-value-stack > small {
  color:
    var(
      --cc-muted
    );

  font-size: 8px;

  font-weight: 650;
}


/* =========================================================
   CREDIT CELL
   ========================================================= */

.cc-credit-cell {
  min-width: 115px;

  display: flex;
  flex-direction: column;

  gap: 5px;
}


.cc-credit-cell > strong {
  color:
    var(
      --cc-text-strong
    );

  font-size: 9.5px;

  font-weight: 850;

  font-variant-numeric:
    tabular-nums;
}


.cc-credit-cell > small {
  color:
    var(
      --cc-muted
    );

  font-size: 7.5px;

  font-weight: 650;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.cc-progress {
  width: 100%;
  height: 4px;

  overflow: hidden;

  border-radius: 999px;

  background:
    var(
      --cc-surface-4
    );
}


.cc-progress > span {
  display: block;

  width: 0;
  height: 100%;

  border-radius: inherit;

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

  transition:
    width
      220ms
      cubic-bezier(
        0.2,
        0,
        0,
        1
      );
}


.cc-progress-cell {
  min-width: 110px;

  display: flex;
  align-items: center;

  gap: 7px;
}


.cc-progress-cell .cc-progress {
  flex: 1;
}


.cc-progress-cell small {
  min-width: 38px;

  color:
    var(
      --cc-muted
    );

  font-size: 7.5px;

  font-weight: 700;

  text-align: right;
}


/* =========================================================
   STATUS STACK
   ========================================================= */

.cc-status-stack {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 4px;
}


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

.cc-badge {
  width: fit-content;

  max-width: 100%;

  min-height: 21px;

  padding:
    3px
    7px;

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

  border-radius: 5px;

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

  gap: 4px;

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

  color:
    var(
      --cc-muted
    );

  font-size: 8px;
  line-height: 1;

  font-weight: 850;

  white-space: nowrap;
}


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

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

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


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

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

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


.cc-badge.is-high {
  border-color: #e3b795;

  background: #fff6ef;

  color: #a1460e;
}


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

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

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


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

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

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


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

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

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


/* =========================================================
   TEXT COLORS
   ========================================================= */

.cc-text-danger {
  color:
    var(
      --cc-danger
    ) !important;
}


.cc-text-success {
  color:
    var(
      --cc-success
    ) !important;
}


.cc-text-muted {
  color:
    var(
      --cc-muted
    ) !important;
}


/* =========================================================
   TABLE EMPTY CELL
   ========================================================= */

.cc-table-empty-cell {
  padding: 0 !important;

  border-right: 0 !important;
}


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

.cc-empty {
  min-height: 225px;

  padding: 28px;

  display: flex;
  flex-direction: column;

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

  text-align: center;
}


.cc-empty__icon {
  width: 40px;
  height: 40px;

  margin-bottom: 9px;

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

  border-radius: 7px;

  display: grid;

  place-items: center;

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

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


.cc-empty__icon svg {
  width: 18px;
  height: 18px;

  stroke-width: 1.9;
}


.cc-empty > strong {
  color:
    var(
      --cc-text-strong
    );

  font-size: 12px;

  font-weight: 850;
}


.cc-empty > span {
  max-width: 440px;

  margin-top: 5px;

  color:
    var(
      --cc-muted
    );

  font-size: 9.5px;
  line-height: 1.5;

  font-weight: 650;
}


.cc-empty > .cc-btn {
  margin-top: 12px;
}


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

.cc-pagination {
  min-height: 50px;

  padding:
    8px
    11px;

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

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

  gap: 12px;

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


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


.cc-pagination__info {
  color:
    var(
      --cc-muted
    );

  font-size: 9px;

  font-weight: 700;
}


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

  font-weight: 850;
}


.cc-pagination__actions {
  display: flex;
  align-items: center;

  gap: 6px;
}


.cc-pagination__current {
  min-width: 100px;

  color:
    var(
      --cc-muted
    );

  font-size: 9px;

  font-weight: 700;

  text-align: center;
}


.cc-pagination__current strong {
  color:
    var(
      --cc-text-strong
    );

  font-weight: 850;
}


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

.cc-link-button {
  appearance: none;

  padding: 0;

  border: 0;

  background: transparent;

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

  font-size: inherit;

  font-weight: 850;

  text-decoration: none;

  cursor: pointer;

  transition:
    color
      var(
        --cc-fast
      );
}


.cc-link-button:hover {
  color:
    var(
      --cc-info
    );

  text-decoration: underline;

  text-underline-offset: 2px;
}


/* =========================================================
   DOCUMENT LINK
   ========================================================= */

.cc-document-link {
  width: fit-content;

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

  gap: 5px;

  color:
    var(
      --cc-text
    );

  font-size: 8.5px;

  font-weight: 750;

  text-decoration: none;

  transition:
    color
      var(
        --cc-fast
      );
}


.cc-document-link:hover {
  color:
    var(
      --cc-text-strong
    );

  text-decoration: underline;

  text-underline-offset: 2px;
}


.cc-document-link svg {
  width: 13px;
  height: 13px;
}


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

.cc-inline-actions {
  display: flex;
  align-items: center;

  gap: 5px;
}


.cc-inline-badges {
  display: flex;
  align-items: center;

  flex-wrap: wrap;

  gap: 4px;
}


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

.cc-toast-container {
  position: fixed;

  top: 68px;
  right: 14px;

  z-index: 12000;

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

  display: flex;
  flex-direction: column;

  gap: 6px;

  pointer-events: none;
}


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

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

  padding:
    9px
    9px
    9px
    10px;

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

  border-radius: 7px;

  display: flex;
  align-items: center;

  gap: 8px;

  background:
    var(
      --cc-surface
    );

  color:
    var(
      --cc-text
    );

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

  pointer-events: auto;

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


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

    transform:
      translateY(
        -5px
      );
  }

  to {
    opacity: 1;

    transform: none;
  }
}


.cc-toast.is-leaving {
  opacity: 0;

  transform:
    translateY(
      -4px
    );

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


.cc-toast__icon {
  width: 25px;
  height: 25px;

  flex:
    0
    0
    25px;

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

  border-radius: 5px;

  display: grid;

  place-items: center;

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

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


.cc-toast__icon svg {
  width: 14px;
  height: 14px;
}


.cc-toast__message {
  min-width: 0;

  flex: 1;

  color:
    var(
      --cc-text
    );

  font-size: 10px;
  line-height: 1.4;

  font-weight: 700;
}


.cc-toast__close {
  width: 25px;
  height: 25px;

  flex:
    0
    0
    25px;

  padding: 0;

  border:
    1px
    solid
    transparent;

  border-radius: 4px;

  display: grid;

  place-items: center;

  background: transparent;

  color:
    var(
      --cc-muted
    );

  cursor: pointer;

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


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

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

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


.cc-toast__close svg {
  width: 13px;
  height: 13px;
}


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


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

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


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


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

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


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


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

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


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

.cc-page *,
.cc-detail *,
.cc-drawer *,
.cc-modal * {
  scrollbar-width: thin;

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


.cc-page *::-webkit-scrollbar,
.cc-detail *::-webkit-scrollbar,
.cc-drawer *::-webkit-scrollbar,
.cc-modal *::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}


.cc-page *::-webkit-scrollbar-track,
.cc-detail *::-webkit-scrollbar-track,
.cc-drawer *::-webkit-scrollbar-track,
.cc-modal *::-webkit-scrollbar-track {
  background: transparent;
}


.cc-page *::-webkit-scrollbar-thumb,
.cc-detail *::-webkit-scrollbar-thumb,
.cc-drawer *::-webkit-scrollbar-thumb,
.cc-modal *::-webkit-scrollbar-thumb {
  border:
    2px
    solid
    transparent;

  border-radius: 999px;

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

  background-clip: padding-box;
}


/* =========================================================
   FIN PARTE 1 DE 4

   SIGUE:
   - Detalle completo del cliente
   - Header del detalle
   - Resumen financiero
   - Tabs
   - Cards
   - Aging
   - Perfil comercial
   - KV
   - Mini movimientos
   - Responsive del detalle
   ========================================================= *//* =========================================================
   CONTINÚA:
   frontend/src/pages/facturacion-cobranzas/cuenta-corriente/
   cuenta-corriente.css

   WIRTZ HUB
   FACTURACIÓN Y COBRANZAS
   CUENTA CORRIENTE

   PARTE 2 DE 4
   ========================================================= */


/* =========================================================
   DETAIL OVERLAY
   ========================================================= */

.cc-detail-overlay {
  position: fixed;

  top: 52px;
  right: 0;
  bottom: 0;
  left: 0;

  z-index: 9000;

  overflow: hidden;
}


.cc-detail-overlay[hidden] {
  display: none !important;
}


.cc-detail-backdrop {
  position: absolute;

  inset: 0;

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

  backdrop-filter: none;
}


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

.cc-detail {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;

  width:
    min(
      1180px,
      95vw
    );

  min-width: 0;

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

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background:
    var(
      --cc-bg
    );

  color:
    var(
      --cc-text
    );

  box-shadow:
    -18px
    0
    56px
    rgba(
      0,
      0,
      0,
      0.18
    );

  animation:
    cc-detail-open
    170ms
    cubic-bezier(
      0.2,
      0,
      0,
      1
    );
}


@keyframes cc-detail-open {
  from {
    transform:
      translateX(
        28px
      );

    opacity: 0;
  }

  to {
    transform: none;

    opacity: 1;
  }
}


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

.cc-detail__header {
  min-height: 76px;

  flex: 0 0 auto;

  padding:
    12px
    14px;

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

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

  gap: 16px;

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


.cc-detail__header-main {
  min-width: 0;

  flex: 1;
}


.cc-detail__header-actions {
  flex: 0 0 auto;

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

  flex-wrap: wrap;

  gap: 5px;
}


/* =========================================================
   DETAIL CLIENT
   ========================================================= */

.cc-detail-client {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 10px;
}


.cc-detail-client__avatar {
  width: 38px;
  height: 38px;

  flex:
    0
    0
    38px;

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

  border-radius: 7px;

  display: grid;

  place-items: center;

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

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

  font-size: 14px;

  font-weight: 900;
}


.cc-detail-client__text {
  min-width: 0;

  display: flex;
  flex-direction: column;
}


.cc-detail-client__eyebrow {
  margin-bottom: 2px;

  color:
    var(
      --cc-muted
    );

  font-size: 8px;

  font-weight: 850;

  text-transform: uppercase;

  letter-spacing: 0.07em;
}


.cc-detail-client__text h2 {
  max-width: 620px;

  margin: 0;

  overflow: hidden;

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

  font-size: 18px;
  line-height: 1.15;

  font-weight: 850;

  letter-spacing: -0.025em;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.cc-detail-client__meta {
  min-width: 0;

  margin-top: 4px;

  display: flex;
  align-items: center;

  flex-wrap: wrap;

  gap: 4px 8px;
}


.cc-detail-client__meta span {
  position: relative;

  max-width: 260px;

  overflow: hidden;

  color:
    var(
      --cc-muted
    );

  font-size: 8.5px;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.cc-detail-client__meta span:not(:last-child)::after {
  content: "·";

  margin-left: 8px;

  color:
    var(
      --cc-border-extra
    );
}


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

.cc-detail__summary {
  width: 100%;

  flex: 0 0 auto;

  padding: 9px 12px;

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

  display: grid;

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

  gap: 6px;

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


/* =========================================================
   DETAIL STAT
   ========================================================= */

.cc-detail-stat {
  min-width: 0;

  min-height: 76px;

  padding:
    9px 10px;

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

  border-radius: 6px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 2px;

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


.cc-detail-stat > span {
  color:
    var(
      --cc-muted
    );

  font-size: 8px;

  font-weight: 800;
}


.cc-detail-stat > strong {
  min-width: 0;

  overflow: hidden;

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

  font-size: 14px;

  line-height: 1.2;

  font-weight: 850;

  letter-spacing: -0.025em;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-variant-numeric:
    tabular-nums;
}


.cc-detail-stat > strong.is-debt {
  color:
    var(
      --cc-danger
    );
}


.cc-detail-stat > strong.is-credit {
  color:
    var(
      --cc-success
    );
}


.cc-detail-stat > small {
  overflow: hidden;

  color:
    var(
      --cc-muted
    );

  font-size: 7.5px;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.cc-detail-stat--primary {
  border-color:
    var(
      --cc-info-border
    );
}


.cc-detail-stat--danger {
  border-color:
    var(
      --cc-danger-border
    );
}


.cc-detail-stat--danger > strong {
  color:
    var(
      --cc-danger
    );
}


.cc-detail-stat__badges {
  min-height: 24px;

  display: flex;
  align-items: center;

  flex-wrap: wrap;

  gap: 4px;
}


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

.cc-detail-tabs {
  width: 100%;

  min-height: 47px;

  flex: 0 0 auto;

  padding:
    6px
    10px;

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

  display: flex;
  align-items: center;

  gap: 3px;

  overflow-x: auto;

  overflow-y: hidden;

  background:
    var(
      --cc-surface
    );

  scrollbar-width: thin;
}


.cc-detail-tab {
  appearance: none;

  flex: 0 0 auto;

  min-height: 33px;

  padding:
    0
    9px;

  border:
    1px
    solid
    transparent;

  border-radius: 5px;

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

  gap: 6px;

  background: transparent;

  color:
    var(
      --cc-muted
    );

  font-size: 9px;

  font-weight: 800;

  white-space: nowrap;

  cursor: pointer;

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


.cc-detail-tab:hover {
  background:
    var(
      --cc-surface-2
    );

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


.cc-detail-tab.is-active {
  border-color:
    var(
      --cc-border-strong
    );

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

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


.cc-detail-tab svg {
  width: 14px;
  height: 14px;

  stroke-width: 2;
}


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

.cc-detail__content {
  min-width: 0;
  min-height: 0;

  flex: 1;

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

  padding: 10px;

  background:
    var(
      --cc-bg
    );

  scrollbar-width: thin;
}


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

.cc-detail__loading {
  flex: 1;

  min-height: 0;

  padding: 12px;

  overflow-y: auto;

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


.cc-detail__loading-grid {
  display: grid;

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

  gap: 7px;
}


/* =========================================================
   TAB LOADING
   ========================================================= */

.cc-tab-loading {
  display: flex;
  flex-direction: column;

  gap: 6px;
}


.cc-tab-loading__row {
  min-height: 56px;

  padding: 10px;

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

  border-radius: 6px;

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


/* =========================================================
   TAB GRID
   ========================================================= */

.cc-tab-grid {
  width: 100%;

  min-width: 0;

  display: grid;

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

  gap: 8px;
}


.cc-tab-grid--summary {
  align-items: start;
}


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

.cc-card {
  min-width: 0;

  overflow: hidden;

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

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

  background:
    var(
      --cc-surface
    );

  box-shadow: none;
}


.cc-card--wide {
  grid-column:
    span
    1;
}


.cc-card--full {
  grid-column:
    1 /
    -1;
}


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

.cc-card__header {
  min-height: 55px;

  padding:
    10px
    11px;

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

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

  gap: 12px;

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


.cc-card__header > div:first-child {
  min-width: 0;
}


.cc-card__header h3 {
  margin: 0;

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

  font-size: 11px;

  line-height: 1.2;

  font-weight: 850;
}


.cc-card__header p {
  margin:
    3px
    0
    0;

  color:
    var(
      --cc-muted
    );

  font-size: 8.5px;

  line-height: 1.4;

  font-weight: 650;
}


.cc-card__header > svg {
  width: 17px;
  height: 17px;

  flex:
    0
    0
    17px;

  color:
    var(
      --cc-muted
    );

  stroke-width: 1.9;
}


.cc-card__actions {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  gap: 5px;
}


/* =========================================================
   AGING
   ========================================================= */

.cc-aging {
  padding: 8px;

  display: flex;
  flex-direction: column;

  gap: 5px;
}


.cc-aging__item {
  min-height: 36px;

  padding:
    7px
    8px;

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

  border-radius: 5px;

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

  gap: 12px;

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


.cc-aging__label {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 7px;

  color:
    var(
      --cc-text
    );

  font-size: 8.5px;

  font-weight: 750;
}


.cc-aging__label > span {
  width: 7px;
  height: 7px;

  flex:
    0
    0
    7px;

  border-radius: 2px;

  background:
    var(
      --cc-border-extra
    );
}


.cc-aging__item > strong {
  flex: 0 0 auto;

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

  font-size: 9px;

  font-weight: 850;

  font-variant-numeric:
    tabular-nums;
}


.cc-aging__item.is-current
.cc-aging__label > span {
  background:
    var(
      --cc-info
    );
}


.cc-aging__item.is-low
.cc-aging__label > span {
  background: #5f8f73;
}


.cc-aging__item.is-medium
.cc-aging__label > span {
  background: #82915a;
}


.cc-aging__item.is-warning
.cc-aging__label > span {
  background:
    var(
      --cc-warning
    );
}


.cc-aging__item.is-high
.cc-aging__label > span {
  background: #c46b2f;
}


.cc-aging__item.is-danger
.cc-aging__label > span {
  background:
    var(
      --cc-danger
    );
}


.cc-aging__item.is-critical {
  border-color:
    var(
      --cc-danger-border
    );

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


.cc-aging__item.is-critical
.cc-aging__label > span {
  background: #7e0f0f;
}


.cc-aging__item.is-critical > strong {
  color:
    var(
      --cc-danger
    );
}


/* =========================================================
   KV GRID
   ========================================================= */

.cc-kv-grid {
  padding: 8px;

  display: grid;

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

  gap: 5px;
}


/* =========================================================
   KV
   ========================================================= */

.cc-kv {
  min-width: 0;

  min-height: 52px;

  padding:
    8px
    9px;

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

  border-radius: 5px;

  display: flex;
  flex-direction: column;

  justify-content: center;

  gap: 3px;

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


.cc-kv > span {
  color:
    var(
      --cc-muted
    );

  font-size: 7.5px;

  font-weight: 800;
}


.cc-kv > strong {
  min-width: 0;

  overflow: hidden;

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

  font-size: 9px;

  line-height: 1.25;

  font-weight: 800;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   MINI LIST
   ========================================================= */

.cc-mini-list {
  display: flex;
  flex-direction: column;
}


.cc-mini-list__item {
  appearance: none;

  width: 100%;

  min-width: 0;

  min-height: 52px;

  padding:
    8px
    10px;

  border: 0;
  border-bottom:
    1px
    solid
    var(
      --cc-border
    );

  display: grid;

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

  align-items: center;

  gap: 8px;

  background:
    var(
      --cc-surface
    );

  color:
    var(
      --cc-text
    );

  text-align: left;

  cursor: pointer;

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


.cc-mini-list__item:last-child {
  border-bottom: 0;
}


.cc-mini-list__item:not(
  .cc-mini-list__item--static
):hover {
  background:
    var(
      --cc-surface-2
    );
}


.cc-mini-list__item--static {
  cursor: default;
}


/* =========================================================
   MINI LIST ICON
   ========================================================= */

.cc-mini-list__icon {
  width: 28px;
  height: 28px;

  flex:
    0
    0
    28px;

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

  border-radius: 5px;

  display: grid;

  place-items: center;

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

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


.cc-mini-list__icon svg {
  width: 13px;
  height: 13px;
}


.cc-mini-list__icon.is-debit {
  border-color:
    var(
      --cc-danger-border
    );

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

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


.cc-mini-list__icon.is-credit {
  border-color:
    var(
      --cc-success-border
    );

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

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


.cc-mini-list__icon.is-warning {
  border-color:
    var(
      --cc-warning-border
    );

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

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


.cc-mini-list__icon.is-success {
  border-color:
    var(
      --cc-success-border
    );

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

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


.cc-mini-list__icon.is-info {
  border-color:
    var(
      --cc-info-border
    );

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

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


.cc-mini-list__icon.is-danger {
  border-color:
    var(
      --cc-danger-border
    );

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

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


/* =========================================================
   MINI LIST CONTENT
   ========================================================= */

.cc-mini-list__content {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.cc-mini-list__content strong {
  overflow: hidden;

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

  font-size: 9px;

  font-weight: 800;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.cc-mini-list__content small {
  overflow: hidden;

  color:
    var(
      --cc-muted
    );

  font-size: 7.5px;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.cc-mini-list__value {
  color:
    var(
      --cc-text-strong
    );

  font-size: 9px;

  font-weight: 850;

  text-align: right;

  white-space: nowrap;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   MOVEMENT CELL
   ========================================================= */

.cc-movement-cell {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 8px;
}


.cc-movement-cell > div:last-child {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.cc-movement-cell strong {
  max-width: 220px;

  overflow: hidden;

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

  font-size: 9px;

  font-weight: 800;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.cc-movement-cell small {
  max-width: 220px;

  overflow: hidden;

  color:
    var(
      --cc-muted
    );

  font-size: 7.5px;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   MOVEMENT ICON
   ========================================================= */

.cc-movement-icon {
  width: 27px;
  height: 27px;

  flex:
    0
    0
    27px;

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

  border-radius: 5px;

  display: grid;

  place-items: center;

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

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


.cc-movement-icon svg {
  width: 12px;
  height: 12px;
}


.cc-movement-icon.is-debit {
  border-color:
    var(
      --cc-danger-border
    );

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

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


.cc-movement-icon.is-credit {
  border-color:
    var(
      --cc-success-border
    );

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

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


.cc-movement-icon.is-neutral {
  color:
    var(
      --cc-muted
    );
}


/* =========================================================
   DOCUMENTS GRID
   ========================================================= */

.cc-documents {
  padding: 8px;

  display: grid;

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

  gap: 6px;
}


/* =========================================================
   DOCUMENT CARD
   ========================================================= */

.cc-document {
  min-width: 0;

  min-height: 78px;

  padding: 8px;

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

  border-radius: 6px;

  display: grid;

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

  align-items: flex-start;

  gap: 8px;

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

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


.cc-document:hover {
  border-color:
    var(
      --cc-border-strong
    );

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


.cc-document__icon {
  width: 32px;
  height: 32px;

  flex:
    0
    0
    32px;

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

  border-radius: 5px;

  display: grid;

  place-items: center;

  background:
    var(
      --cc-surface
    );

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


.cc-document__icon svg {
  width: 14px;
  height: 14px;
}


.cc-document__body {
  min-width: 0;
}


.cc-document__title-row {
  min-width: 0;

  display: flex;
  align-items: center;

  flex-wrap: wrap;

  gap: 5px;
}


.cc-document__title-row > strong {
  max-width: 100%;

  overflow: hidden;

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

  font-size: 9px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.cc-document__type {
  display: block;

  margin-top: 3px;

  color:
    var(
      --cc-muted
    );

  font-size: 7.5px;

  font-weight: 700;
}


.cc-document__description {
  margin:
    5px
    0
    0;

  color:
    var(
      --cc-text
    );

  font-size: 8px;
  line-height: 1.4;

  font-weight: 650;
}


.cc-document__meta {
  margin-top: 5px;

  display: flex;
  align-items: center;

  flex-wrap: wrap;

  gap: 4px 8px;
}


.cc-document__meta span {
  position: relative;

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

  font-size: 7px;

  font-weight: 650;
}


.cc-document__meta span:not(:last-child)::after {
  content: "·";

  margin-left: 8px;

  color:
    var(
      --cc-border-extra
    );
}


.cc-document__actions {
  display: flex;
  align-items: center;

  gap: 4px;
}


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

.cc-timeline {
  padding:
    4px
    10px
    10px;

  display: flex;
  flex-direction: column;
}


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

.cc-timeline-item {
  position: relative;

  min-width: 0;

  padding:
    10px
    0;

  display: grid;

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

  gap: 9px;
}


.cc-timeline-item:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 40px;
  bottom: -1px;
  left: 14px;

  width: 1px;

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


.cc-timeline-item__marker {
  position: relative;

  z-index: 1;

  width: 29px;
  height: 29px;

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

  border-radius: 5px;

  display: grid;

  place-items: center;

  background:
    var(
      --cc-surface
    );

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


.cc-timeline-item__marker svg {
  width: 13px;
  height: 13px;
}


.cc-timeline-item__body {
  min-width: 0;

  padding:
    8px
    9px;

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

  border-radius: 6px;

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


.cc-timeline-item__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 10px;
}


.cc-timeline-item__header > div:first-child {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.cc-timeline-item__header strong {
  color:
    var(
      --cc-text-strong
    );

  font-size: 9px;

  font-weight: 850;
}


.cc-timeline-item__header span {
  color:
    var(
      --cc-muted
    );

  font-size: 7.5px;

  font-weight: 650;
}


.cc-timeline-item__body > p {
  margin:
    7px
    0
    0;

  color:
    var(
      --cc-text
    );

  font-size: 8.5px;
  line-height: 1.5;

  font-weight: 650;

  white-space: pre-wrap;
}


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

.cc-timeline-item__result {
  margin-top: 7px;

  padding:
    7px
    8px;

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

  border-radius: 5px;

  display: flex;
  flex-direction: column;

  gap: 2px;

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


.cc-timeline-item__result span {
  color:
    var(
      --cc-muted
    );

  font-size: 7px;

  font-weight: 800;
}


.cc-timeline-item__result strong {
  color:
    var(
      --cc-text-strong
    );

  font-size: 8.5px;

  font-weight: 750;
}


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

.cc-timeline-item__footer {
  margin-top: 7px;

  padding-top: 7px;

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

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

  gap: 10px;
}


.cc-timeline-item__footer > span {
  color:
    var(
      --cc-muted
    );

  font-size: 7.5px;

  font-weight: 650;
}


.cc-timeline-item__footer > span strong {
  color:
    var(
      --cc-text-strong
    );

  font-weight: 800;
}


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

@media (
  max-width:
    1200px
) {
  .cc-detail {
    width:
      min(
        1080px,
        97vw
      );
  }


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


  .cc-tab-grid {
    grid-template-columns:
      1fr;
  }


  .cc-card--wide,
  .cc-card--full {
    grid-column:
      auto;
  }
}


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

@media (
  max-width:
    960px
) {
  .cc-detail {
    width: 100vw;

    border-left: 0;
  }


  .cc-detail__header {
    align-items: flex-start;

    flex-direction: column;
  }


  .cc-detail__header-actions {
    width: 100%;

    justify-content: flex-start;
  }


  .cc-detail-client__text h2 {
    max-width:
      calc(
        100vw -
        100px
      );
  }


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


  .cc-documents {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   RESPONSIVE DETAIL · 760
   ========================================================= */

@media (
  max-width:
    760px
) {
  .cc-detail__header {
    min-height: auto;

    padding: 10px;
  }


  .cc-detail-client {
    align-items: flex-start;
  }


  .cc-detail-client__avatar {
    width: 34px;
    height: 34px;

    flex-basis: 34px;
  }


  .cc-detail-client__text h2 {
    font-size: 16px;
  }


  .cc-detail__summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    padding:
      7px
      8px;
  }


  .cc-detail-stat {
    min-height: 70px;
  }


  .cc-detail-tabs {
    padding:
      5px
      7px;
  }


  .cc-detail-tab {
    min-height: 31px;

    padding:
      0
      8px;
  }


  .cc-detail__content {
    padding: 7px;
  }


  .cc-card__header {
    align-items: flex-start;

    flex-direction: column;
  }


  .cc-card__actions {
    width: 100%;

    flex-wrap: wrap;
  }


  .cc-card__actions .cc-btn {
    flex:
      1
      1
      auto;
  }


  .cc-kv-grid {
    grid-template-columns:
      1fr;
  }


  .cc-timeline-item__header,
  .cc-timeline-item__footer {
    align-items: flex-start;

    flex-direction: column;
  }


  .cc-inline-badges {
    width: 100%;
  }
}


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

@media (
  max-width:
    520px
) {
  .cc-detail__header-actions {
    display: grid;

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

    gap: 5px;
  }


  .cc-detail__header-actions
  .cc-btn {
    width: 100%;
  }


  .cc-detail__header-actions
  .cc-icon-btn {
    width: 100%;
  }


  .cc-detail__summary {
    grid-template-columns:
      1fr;
  }


  .cc-detail-stat {
    min-height: 62px;
  }


  .cc-detail-tabs {
    gap: 2px;
  }


  .cc-detail-tab span {
    display: none;
  }


  .cc-detail-tab {
    width: 34px;

    min-width: 34px;

    padding: 0;

    justify-content: center;
  }


  .cc-detail-tab svg {
    width: 15px;
    height: 15px;
  }


  .cc-mini-list__item {
    grid-template-columns:
      27px
      minmax(
        0,
        1fr
      );

    gap: 7px;
  }


  .cc-mini-list__value {
    grid-column:
      2;

    text-align: left;
  }


  .cc-document {
    grid-template-columns:
      30px
      minmax(
        0,
        1fr
      );
  }


  .cc-document__actions {
    grid-column:
      2;

    justify-content: flex-start;
  }


  .cc-timeline {
    padding:
      4px
      7px
      8px;
  }


  .cc-timeline-item {
    grid-template-columns:
      27px
      minmax(
        0,
        1fr
      );

    gap: 7px;
  }


  .cc-timeline-item__marker {
    width: 27px;
    height: 27px;
  }


  .cc-timeline-item:not(:last-child)::after {
    left: 13px;
  }
}


/* =========================================================
   FIN PARTE 2 DE 4

   SIGUE PARTE 3:
   - Drawers
   - Modales
   - Formularios
   - Buscador de clientes
   - Cobranza
   - Aplicaciones
   - Recibos
   - Ajustes
   - Seguimientos
   - Compromisos
   - Archivos
   ========================================================= *//* =========================================================
   CONTINÚA:
   frontend/src/pages/facturacion-cobranzas/cuenta-corriente/
   cuenta-corriente.css

   WIRTZ HUB
   FACTURACIÓN Y COBRANZAS
   CUENTA CORRIENTE

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


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

.cc-drawer-overlay {
  position: fixed;

  top: 52px;
  right: 0;
  bottom: 0;
  left: 0;

  z-index: 10000;

  overflow: hidden;
}


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


.cc-drawer-backdrop {
  position: absolute;

  inset: 0;

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

  backdrop-filter: none;
}


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

.cc-drawer {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;

  width:
    min(
      560px,
      94vw
    );

  min-width: 0;

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

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background:
    var(
      --cc-bg
    );

  color:
    var(
      --cc-text
    );

  box-shadow:
    -18px
    0
    54px
    rgba(
      0,
      0,
      0,
      0.18
    );

  animation:
    cc-drawer-in
    160ms
    cubic-bezier(
      0.2,
      0,
      0,
      1
    );
}


@keyframes cc-drawer-in {
  from {
    opacity: 0;

    transform:
      translateX(
        24px
      );
  }

  to {
    opacity: 1;

    transform: none;
  }
}


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

.cc-drawer__header {
  min-height: 67px;

  flex: 0 0 auto;

  padding:
    11px
    12px;

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

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

  gap: 12px;

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


.cc-drawer__header > div:first-child {
  min-width: 0;
}


.cc-drawer__header h3 {
  margin: 0;

  overflow: hidden;

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

  font-size: 14px;
  line-height: 1.2;

  font-weight: 850;

  letter-spacing: -0.02em;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.cc-drawer__header p {
  margin:
    3px
    0
    0;

  overflow: hidden;

  color:
    var(
      --cc-muted
    );

  font-size: 8.5px;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


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

.cc-drawer__body {
  min-width: 0;
  min-height: 0;

  flex: 1;

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

  padding: 10px;

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


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

.cc-drawer__footer {
  margin-top: 9px;

  padding:
    9px;

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

  border-radius: 6px;

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

  flex-wrap: wrap;

  gap: 5px;

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


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

.cc-drawer-loading {
  display: flex;
  flex-direction: column;

  gap: 6px;
}


.cc-drawer-loading__row {
  min-height: 57px;

  padding: 10px;

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

  border-radius: 6px;

  display: flex;
  flex-direction: column;

  justify-content: center;

  gap: 7px;

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


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

.cc-drawer-summary {
  min-height: 92px;

  padding:
    12px;

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

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

  display: flex;
  flex-direction: column;

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

  gap: 5px;

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


.cc-drawer-summary > span {
  color:
    var(
      --cc-muted
    );

  font-size: 8px;

  font-weight: 700;
}


.cc-drawer-summary__value {
  max-width: 100%;

  overflow: hidden;

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

  font-size: 23px;
  line-height: 1.05;

  font-weight: 900;

  letter-spacing: -0.045em;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-variant-numeric:
    tabular-nums;
}


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

.cc-drawer-kv {
  margin-top: 7px;

  display: grid;

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

  gap: 5px;
}


.cc-drawer-kv .cc-kv {
  background:
    var(
      --cc-surface
    );
}


/* =========================================================
   COLLECTION PROGRESS
   ========================================================= */

.cc-collection-progress {
  margin-top: 7px;

  padding: 10px;

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

  border-radius: 6px;

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


.cc-collection-progress__header {
  margin-bottom: 7px;

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

  gap: 12px;
}


.cc-collection-progress__header span {
  color:
    var(
      --cc-muted
    );

  font-size: 8px;

  font-weight: 800;
}


.cc-collection-progress__header strong {
  color:
    var(
      --cc-text-strong
    );

  font-size: 9px;

  font-weight: 850;

  text-align: right;

  font-variant-numeric:
    tabular-nums;
}


.cc-collection-progress > small {
  display: block;

  margin-top: 6px;

  color:
    var(
      --cc-muted
    );

  font-size: 7.5px;

  font-weight: 700;
}


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

.cc-drawer-section {
  margin-top: 7px;

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

  border-radius: 6px;

  overflow: hidden;

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


.cc-drawer-section__header {
  min-height: 45px;

  padding:
    8px
    9px;

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

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

  gap: 9px;

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


.cc-drawer-section__header h4 {
  margin: 0;

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

  font-size: 9.5px;

  font-weight: 850;
}


.cc-drawer-section__header p {
  margin:
    2px
    0
    0;

  color:
    var(
      --cc-muted
    );

  font-size: 7.5px;

  font-weight: 650;
}


.cc-drawer-section__body {
  padding: 8px;
}


/* =========================================================
   APPLICATION LIST
   ========================================================= */

.cc-applications {
  display: flex;
  flex-direction: column;

  gap: 5px;
}


.cc-application {
  min-width: 0;

  padding:
    8px;

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

  border-radius: 5px;

  display: grid;

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

  align-items: center;

  gap: 9px;

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


.cc-application__main {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}


.cc-application__main strong {
  overflow: hidden;

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

  font-size: 9px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.cc-application__main span,
.cc-application__main small {
  color:
    var(
      --cc-muted
    );

  font-size: 7.5px;

  font-weight: 650;
}


.cc-application__amount {
  display: flex;
  flex-direction: column;

  align-items: flex-end;

  gap: 3px;
}


.cc-application__amount strong {
  color:
    var(
      --cc-text-strong
    );

  font-size: 9px;

  font-weight: 850;

  white-space: nowrap;

  font-variant-numeric:
    tabular-nums;
}


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

.cc-modal-overlay {
  position: fixed;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  z-index: 11000;

  padding:
    68px
    18px
    18px;

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

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


.cc-modal-overlay[hidden] {
  display: none !important;
}


.cc-modal-backdrop {
  position: fixed;

  inset: 0;

  z-index: -1;

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

  backdrop-filter: none;
}


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

.cc-modal {
  width: 100%;

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

  min-width: 0;

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

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

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background:
    var(
      --cc-surface
    );

  color:
    var(
      --cc-text
    );

  box-shadow:
    var(
      --cc-shadow-overlay
    );

  animation:
    cc-modal-in
    150ms
    cubic-bezier(
      0.2,
      0,
      0,
      1
    );
}


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

    transform:
      translateY(
        8px
      );
  }

  to {
    opacity: 1;

    transform: none;
  }
}


.cc-modal--sm {
  max-width: 480px;
}


.cc-modal--md {
  max-width: 680px;
}


.cc-modal--lg {
  max-width: 900px;
}


.cc-modal--xl {
  max-width: 1120px;
}


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

.cc-modal__header {
  min-height: 65px;

  flex: 0 0 auto;

  padding:
    11px
    12px;

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

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

  gap: 12px;

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


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


.cc-modal__header h3 {
  margin: 0;

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

  font-size: 14px;
  line-height: 1.2;

  font-weight: 850;

  letter-spacing: -0.025em;
}


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

  color:
    var(
      --cc-muted
    );

  font-size: 8.5px;
  line-height: 1.35;

  font-weight: 650;
}


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

.cc-modal__body {
  min-width: 0;
  min-height: 0;

  flex: 1;

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

  padding: 11px;

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


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

html.cc-modal-open,
body.cc-modal-open {
  overflow: hidden !important;
}


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

.cc-form {
  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 10px;
}


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

.cc-form-grid {
  width: 100%;
  min-width: 0;

  display: grid;

  gap: 7px;
}


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


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


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


.cc-form-grid--5 {
  grid-template-columns:
    repeat(
      5,
      minmax(
        0,
        1fr
      )
    );
}


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

.cc-form-field {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 4px;
}


.cc-form-field > label,
.cc-form-field > span,
.cc-form-label {
  padding-left: 1px;

  color:
    var(
      --cc-text
    );

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

  font-weight: 800;
}


.cc-form-field
.cc-required,
.cc-form-label
.cc-required {
  color:
    var(
      --cc-danger
    );
}


/* =========================================================
   INPUTS / SELECTS / TEXTAREA
   ========================================================= */

.cc-form-field input,
.cc-form-field select,
.cc-form-field textarea,
.cc-form input:not(
  [type="hidden"]
):not(
  [type="checkbox"]
):not(
  [type="radio"]
),
.cc-form select,
.cc-form textarea {
  width: 100%;
  min-width: 0;

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

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

  outline: none;

  background:
    var(
      --cc-surface
    );

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

  font-size: 10px;

  font-weight: 700;

  box-shadow: none;

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


.cc-form-field input,
.cc-form-field select,
.cc-form input:not(
  [type="hidden"]
):not(
  [type="checkbox"]
):not(
  [type="radio"]
),
.cc-form select {
  height: 37px;

  padding:
    0
    9px;
}


.cc-form-field textarea,
.cc-form textarea {
  min-height: 90px;

  padding:
    9px;

  resize: vertical;

  line-height: 1.45;
}


.cc-form input::placeholder,
.cc-form textarea::placeholder {
  color:
    var(
      --cc-muted-2
    );

  opacity: 1;
}


.cc-form-field input:hover,
.cc-form-field select:hover,
.cc-form-field textarea:hover,
.cc-form input:hover,
.cc-form select:hover,
.cc-form textarea:hover {
  border-color:
    var(
      --cc-border-strong
    );
}


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

  outline: none;

  box-shadow: none;
}


.cc-form input:disabled,
.cc-form select:disabled,
.cc-form textarea:disabled {
  background:
    var(
      --cc-surface-3
    );

  color:
    var(
      --cc-muted
    );

  cursor: not-allowed;
}


/* =========================================================
   NUMBER INPUT
   ========================================================= */

.cc-form input[type="number"] {
  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.cc-form-textarea {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 4px;
}


.cc-form-textarea > span {
  color:
    var(
      --cc-text
    );

  font-size: 8px;

  font-weight: 800;
}


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

.cc-form-help {
  color:
    var(
      --cc-muted
    );

  font-size: 7.5px;
  line-height: 1.4;

  font-weight: 650;
}


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

.cc-form-context {
  padding:
    8px
    9px;

  border:
    1px
    solid
    var(
      --cc-info-border
    );

  border-radius: 6px;

  display: flex;
  align-items: center;

  gap: 8px;

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

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


.cc-form-context > svg {
  width: 17px;
  height: 17px;

  flex:
    0
    0
    17px;
}


.cc-form-context > div {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.cc-form-context span {
  color:
    var(
      --cc-muted
    );

  font-size: 7.5px;

  font-weight: 700;
}


.cc-form-context strong {
  overflow: hidden;

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

  font-size: 9px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;
}


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

.cc-form-section {
  border:
    1px
    solid
    var(
      --cc-border-strong
    );

  border-radius: 6px;

  overflow: hidden;

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


.cc-form-section__header {
  min-height: 43px;

  padding:
    8px
    9px;

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

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

  gap: 10px;

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


.cc-form-section__header h4 {
  margin: 0;

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

  font-size: 9.5px;

  font-weight: 850;
}


.cc-form-section__header p {
  margin:
    2px
    0
    0;

  color:
    var(
      --cc-muted
    );

  font-size: 7.5px;

  font-weight: 650;
}


.cc-form-section__body {
  padding: 9px;
}


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

.cc-modal-footer {
  min-height: 54px;

  margin-top: 2px;

  padding-top: 10px;

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

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

  gap: 6px;
}


/* =========================================================
   CHECKBOX
   ========================================================= */

.cc-checkbox {
  min-height: 36px;

  display: flex;
  align-items: center;

  gap: 7px;

  color:
    var(
      --cc-text
    );

  font-size: 9px;

  font-weight: 700;

  cursor: pointer;
}


.cc-checkbox input {
  appearance: none;

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

  min-width: 16px;

  padding: 0 !important;

  border:
    1px
    solid
    var(
      --cc-border-strong
    ) !important;

  border-radius: 4px !important;

  display: grid;

  place-items: center;

  background:
    var(
      --cc-surface
    );

  cursor: pointer;
}


.cc-checkbox input::before {
  content: "";

  width: 8px;
  height: 8px;

  border-radius: 2px;

  transform:
    scale(
      0
    );

  background:
    var(
      --cc-primary
    );

  transition:
    transform
      var(
        --cc-fast
      );
}


.cc-checkbox input:checked::before {
  transform:
    scale(
      1
    );
}


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

.cc-client-picker {
  position: relative;

  width: 100%;

  min-width: 0;
}


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

.cc-client-picker__label {
  display: block;

  margin-bottom: 4px;

  color:
    var(
      --cc-text
    );

  font-size: 8px;

  font-weight: 800;
}


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

.cc-client-picker__search {
  position: relative;
}


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

  top: 50%;
  left: 10px;

  z-index: 1;

  width: 14px;
  height: 14px;

  transform:
    translateY(
      -50%
    );

  color:
    var(
      --cc-muted
    );

  pointer-events: none;
}


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

  height: 39px;

  padding:
    0
    10px
    0
    33px !important;

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

  border-radius: 6px;

  outline: none;

  background:
    var(
      --cc-surface
    );

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

  font-size: 10px;

  font-weight: 700;

  box-shadow: none;
}


.cc-client-picker__search input:focus {
  border-color:
    var(
      --cc-text-strong
    );

  box-shadow: none;
}


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

.cc-client-picker__results {
  position: absolute;

  top:
    calc(
      100% +
      4px
    );

  right: 0;
  left: 0;

  z-index: 50;

  max-height: 270px;

  overflow-y: auto;

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

  border-radius: 6px;

  background:
    var(
      --cc-surface
    );

  box-shadow:
    var(
      --cc-shadow-popover
    );
}


.cc-client-picker__results[hidden] {
  display: none !important;
}


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

.cc-client-picker__result {
  appearance: none;

  width: 100%;

  min-width: 0;

  min-height: 48px;

  padding:
    7px
    8px;

  border: 0;

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

  display: grid;

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

  align-items: center;

  gap: 8px;

  background:
    var(
      --cc-surface
    );

  color:
    var(
      --cc-text
    );

  text-align: left;

  cursor: pointer;

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


.cc-client-picker__result:last-child {
  border-bottom: 0;
}


.cc-client-picker__result:hover {
  background:
    var(
      --cc-surface-2
    );
}


.cc-client-picker__result > svg {
  width: 14px;
  height: 14px;

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


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

.cc-client-picker__avatar {
  width: 30px;
  height: 30px;

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

  border-radius: 5px;

  display: grid;

  place-items: center;

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

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

  font-size: 10px;

  font-weight: 850;
}


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

.cc-client-picker__text {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.cc-client-picker__text strong {
  overflow: hidden;

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

  font-size: 9px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.cc-client-picker__text small {
  overflow: hidden;

  color:
    var(
      --cc-muted
    );

  font-size: 7.5px;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   CLIENT PICKER LOADING / EMPTY
   ========================================================= */

.cc-client-picker__loading,
.cc-client-picker__empty {
  min-height: 50px;

  padding: 10px;

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

  gap: 6px;

  color:
    var(
      --cc-muted
    );

  font-size: 8.5px;

  font-weight: 700;

  text-align: center;
}


.cc-client-picker__loading svg {
  width: 14px;
  height: 14px;

  animation:
    cc-spin
    700ms
    linear
    infinite;
}


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

.cc-client-picker__selected {
  min-height: 58px;

  padding: 8px;

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

  border-radius: 6px;

  display: grid;

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

  align-items: center;

  gap: 8px;

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


.cc-client-picker__selected-avatar {
  width: 34px;
  height: 34px;

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

  border-radius: 6px;

  display: grid;

  place-items: center;

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

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

  font-size: 11px;

  font-weight: 900;
}


.cc-client-picker__selected-text {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}


.cc-client-picker__selected-text strong {
  overflow: hidden;

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

  font-size: 9.5px;

  font-weight: 850;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.cc-client-picker__selected-text small {
  overflow: hidden;

  color:
    var(
      --cc-muted
    );

  font-size: 7.5px;

  font-weight: 650;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   FILE INPUT
   ========================================================= */

.cc-file-field {
  display: flex;
  flex-direction: column;

  gap: 5px;
}


.cc-file-field input[type="file"] {
  width: 100%;

  min-height: 42px;

  padding: 5px;

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

  border-radius: 6px;

  background:
    var(
      --cc-surface
    );

  color:
    var(
      --cc-text
    );

  font-size: 8.5px;

  font-weight: 700;
}


.cc-file-field
input[type="file"]::file-selector-button {
  min-height: 29px;

  margin-right: 8px;

  padding:
    0
    9px;

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

  border-radius: 4px;

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

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

  font-size: 8px;

  font-weight: 800;

  cursor: pointer;
}


/* =========================================================
   ATTACHMENT MODE
   ========================================================= */

.cc-attachment-mode {
  display: flex;

  gap: 4px;

  padding: 3px;

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

  border-radius: 6px;

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


.cc-attachment-mode button {
  flex: 1;

  min-height: 31px;

  padding:
    0
    8px;

  border:
    1px
    solid
    transparent;

  border-radius: 4px;

  background: transparent;

  color:
    var(
      --cc-muted
    );

  font-size: 8.5px;

  font-weight: 800;

  cursor: pointer;

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


.cc-attachment-mode button.is-active {
  border-color:
    var(
      --cc-border-strong
    );

  background:
    var(
      --cc-surface
    );

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


/* =========================================================
   INFO BOX
   ========================================================= */

.cc-info-box {
  padding:
    8px
    9px;

  border:
    1px
    solid
    var(
      --cc-info-border
    );

  border-radius: 6px;

  display: flex;
  align-items: flex-start;

  gap: 7px;

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

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


.cc-info-box > svg {
  width: 15px;
  height: 15px;

  flex:
    0
    0
    15px;

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


.cc-info-box p {
  margin: 0;

  font-size: 8px;
  line-height: 1.45;

  font-weight: 650;
}


/* =========================================================
   WARNING BOX
   ========================================================= */

.cc-warning-box {
  padding:
    8px
    9px;

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

  border-radius: 6px;

  display: flex;
  align-items: flex-start;

  gap: 7px;

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

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


.cc-warning-box > svg {
  width: 15px;
  height: 15px;

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


/* =========================================================
   ERROR BOX
   ========================================================= */

.cc-error-box {
  padding:
    8px
    9px;

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

  border-radius: 6px;

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

  color:
    var(
      --cc-danger
    );

  font-size: 8.5px;

  font-weight: 700;
}


/* =========================================================
   SUMMARY ROW
   ========================================================= */

.cc-summary-row {
  min-height: 42px;

  padding:
    7px
    8px;

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

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

  gap: 12px;
}


.cc-summary-row:last-child {
  border-bottom: 0;
}


.cc-summary-row > span {
  color:
    var(
      --cc-muted
    );

  font-size: 8px;

  font-weight: 700;
}


.cc-summary-row > strong {
  color:
    var(
      --cc-text-strong
    );

  font-size: 9px;

  font-weight: 850;

  text-align: right;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   LOADER
   ========================================================= */

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


.cc-btn.is-loading svg,
.cc-icon-btn.is-loading svg {
  animation:
    cc-spin
    700ms
    linear
    infinite;
}


.cc-btn.is-loading,
.cc-icon-btn.is-loading {
  pointer-events: none;

  opacity: 0.65;
}


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

@media (
  max-width:
    640px
) {
  .cc-drawer {
    width: 100vw;

    border-left: 0;
  }


  .cc-drawer__body {
    padding: 7px;
  }


  .cc-drawer-kv {
    grid-template-columns:
      1fr;
  }


  .cc-drawer__footer {
    flex-direction: column;
  }


  .cc-drawer__footer .cc-btn {
    width: 100%;
  }


  .cc-application {
    grid-template-columns:
      1fr;
  }


  .cc-application__amount {
    align-items: flex-start;
  }
}


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

@media (
  max-width:
    900px
) {
  .cc-modal-overlay {
    padding:
      62px
      10px
      10px;
  }


  .cc-modal {
    max-height:
      calc(
        100dvh -
        72px
      );
  }


  .cc-form-grid--5 {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .cc-form-grid--4 {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


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

@media (
  max-width:
    680px
) {
  .cc-modal-overlay {
    padding:
      56px
      6px
      6px;
  }


  .cc-modal {
    max-height:
      calc(
        100dvh -
        62px
      );

    border-radius: 7px;
  }


  .cc-modal__header {
    min-height: 58px;

    padding:
      9px
      10px;
  }


  .cc-modal__body {
    padding: 8px;
  }


  .cc-form-grid--2,
  .cc-form-grid--3,
  .cc-form-grid--4,
  .cc-form-grid--5 {
    grid-template-columns:
      1fr;
  }


  .cc-modal-footer {
    flex-direction: column-reverse;

    align-items: stretch;
  }


  .cc-modal-footer .cc-btn {
    width: 100%;
  }


  .cc-client-picker__selected {
    grid-template-columns:
      32px
      minmax(
        0,
        1fr
      );
  }


  .cc-client-picker__selected
  > .cc-btn,
  .cc-client-picker__selected
  > .cc-icon-btn {
    grid-column:
      2;

    justify-self: start;
  }
}


/* =========================================================
   RESPONSIVE MODAL · 420
   ========================================================= */

@media (
  max-width:
    420px
) {
  .cc-modal-overlay {
    padding:
      53px
      4px
      4px;
  }


  .cc-modal {
    max-height:
      calc(
        100dvh -
        57px
      );

    border-radius: 6px;
  }


  .cc-modal__header h3 {
    font-size: 13px;
  }


  .cc-modal__body {
    padding: 6px;
  }


  .cc-form {
    gap: 8px;
  }


  .cc-client-picker__result {
    grid-template-columns:
      28px
      minmax(
        0,
        1fr
      )
      14px;

    padding:
      6px;
  }


  .cc-client-picker__avatar {
    width: 28px;
    height: 28px;
  }


  .cc-drawer-summary__value {
    font-size: 20px;
  }
}


/* =========================================================
   FIN PARTE 3 DE 4

   SIGUE PARTE 4:
   - Dark mode negro real
   - Responsive general completo
   - Header responsive
   - Métricas responsive
   - Toolbar responsive
   - Tabla responsive
   - Overlays mobile
   - Ajustes finales
   - Accesibilidad
   - Reduced motion
   - Print
   ========================================================= *//* =========================================================
   CONTINÚA:
   frontend/src/pages/facturacion-cobranzas/cuenta-corriente/
   cuenta-corriente.css

   WIRTZ HUB
   FACTURACIÓN Y COBRANZAS
   CUENTA CORRIENTE

   PARTE 4 DE 4

   DARK MODE
   RESPONSIVE GENERAL
   AJUSTES FINALES
   ========================================================= */


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

html.dark .cc-page,
body.dark .cc-page,
[data-theme="dark"] .cc-page,
.dark-mode .cc-page {
  --cc-bg: #050505;
  --cc-bg-soft: #080808;

  --cc-surface: #0a0a0a;
  --cc-surface-2: #101010;
  --cc-surface-3: #161616;
  --cc-surface-4: #1d1d1d;

  --cc-border: #282828;
  --cc-border-strong: #3a3a3a;
  --cc-border-extra: #4c4c4c;

  --cc-text: #dedede;
  --cc-text-strong: #ffffff;

  --cc-muted: #a0a0a0;
  --cc-muted-2: #777777;

  --cc-primary: #f4f4f4;
  --cc-primary-hover: #ffffff;
  --cc-primary-text: #090909;

  --cc-success: #65d89f;
  --cc-success-bg: #0d1d16;
  --cc-success-border: #24573d;

  --cc-warning: #e3b15f;
  --cc-warning-bg: #20190c;
  --cc-warning-border: #5b431a;

  --cc-danger: #f17777;
  --cc-danger-bg: #221010;
  --cc-danger-border: #602929;

  --cc-info: #79aef0;
  --cc-info-bg: #0d1723;
  --cc-info-border: #28496e;

  --cc-purple: #c69ce8;
  --cc-purple-bg: #1c1324;
  --cc-purple-border: #4f3264;

  --cc-shadow-popover:
    0 16px 42px rgba(
      0,
      0,
      0,
      0.58
    );

  --cc-shadow-overlay:
    0 28px 90px rgba(
      0,
      0,
      0,
      0.72
    );
}


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

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


/* =========================================================
   DARK · PRIMARY BUTTON
   ========================================================= */

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

  background: #f0f0f0;

  color: #080808;
}


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

  background: #ffffff;

  color: #000000;
}


/* =========================================================
   DARK · SECONDARY BUTTON
   ========================================================= */

html.dark .cc-btn--secondary,
body.dark .cc-btn--secondary,
[data-theme="dark"] .cc-btn--secondary,
.dark-mode .cc-btn--secondary {
  border-color:
    var(
      --cc-border-strong
    );

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

  color: #f4f4f4;
}


html.dark .cc-btn--secondary:hover:not(:disabled),
body.dark .cc-btn--secondary:hover:not(:disabled),
[data-theme="dark"]
.cc-btn--secondary:hover:not(:disabled),
.dark-mode
.cc-btn--secondary:hover:not(:disabled) {
  border-color:
    var(
      --cc-border-extra
    );

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

  color: #ffffff;
}


/* =========================================================
   DARK · GHOST BUTTON
   ========================================================= */

html.dark .cc-btn--ghost,
body.dark .cc-btn--ghost,
[data-theme="dark"] .cc-btn--ghost,
.dark-mode .cc-btn--ghost {
  color: #dedede;
}


html.dark .cc-btn--ghost:hover:not(:disabled),
body.dark .cc-btn--ghost:hover:not(:disabled),
[data-theme="dark"]
.cc-btn--ghost:hover:not(:disabled),
.dark-mode
.cc-btn--ghost:hover:not(:disabled) {
  color: #ffffff;
}


/* =========================================================
   DARK · ICON BUTTON
   ========================================================= */

html.dark .cc-icon-btn,
body.dark .cc-icon-btn,
[data-theme="dark"] .cc-icon-btn,
.dark-mode .cc-icon-btn {
  background:
    var(
      --cc-surface-2
    );

  color: #bdbdbd;
}


html.dark .cc-icon-btn:hover:not(:disabled),
body.dark .cc-icon-btn:hover:not(:disabled),
[data-theme="dark"]
.cc-icon-btn:hover:not(:disabled),
.dark-mode
.cc-icon-btn:hover:not(:disabled) {
  background:
    var(
      --cc-surface-3
    );

  color: #ffffff;
}


/* =========================================================
   DARK · INPUT AUTOFILL
   ========================================================= */

html.dark .cc-page input:-webkit-autofill,
html.dark .cc-page input:-webkit-autofill:hover,
html.dark .cc-page input:-webkit-autofill:focus,
body.dark .cc-page input:-webkit-autofill,
[data-theme="dark"]
.cc-page input:-webkit-autofill,
.dark-mode
.cc-page input:-webkit-autofill {
  -webkit-text-fill-color:
    #ffffff;

  -webkit-box-shadow:
    0
    0
    0
    1000px
    #0a0a0a
    inset;

  caret-color: #ffffff;

  transition:
    background-color
    9999s
    ease-in-out
    0s;
}


/* =========================================================
   DARK · SELECT OPTIONS
   ========================================================= */

html.dark .cc-page select option,
body.dark .cc-page select option,
[data-theme="dark"] .cc-page select option,
.dark-mode .cc-page select option {
  background: #111111;

  color: #f2f2f2;
}


/* =========================================================
   DARK · NATIVE DATE/TIME
   ========================================================= */

html.dark
.cc-page
input[type="date"],
html.dark
.cc-page
input[type="datetime-local"],
html.dark
.cc-page
input[type="time"],
body.dark
.cc-page
input[type="date"],
body.dark
.cc-page
input[type="datetime-local"],
[data-theme="dark"]
.cc-page
input[type="date"],
[data-theme="dark"]
.cc-page
input[type="datetime-local"],
.dark-mode
.cc-page
input[type="date"],
.dark-mode
.cc-page
input[type="datetime-local"] {
  color-scheme: dark;
}


/* =========================================================
   DARK · HIGH BADGE
   ========================================================= */

html.dark .cc-badge.is-high,
body.dark .cc-badge.is-high,
[data-theme="dark"] .cc-badge.is-high,
.dark-mode .cc-badge.is-high {
  border-color: #694421;

  background: #21150b;

  color: #eaa35e;
}


/* =========================================================
   DARK · DETAIL / DRAWER BACKDROP
   ========================================================= */

html.dark .cc-detail-backdrop,
body.dark .cc-detail-backdrop,
[data-theme="dark"] .cc-detail-backdrop,
.dark-mode .cc-detail-backdrop,
html.dark .cc-drawer-backdrop,
body.dark .cc-drawer-backdrop,
[data-theme="dark"] .cc-drawer-backdrop,
.dark-mode .cc-drawer-backdrop {
  background:
    rgba(
      0,
      0,
      0,
      0.68
    );
}


/* =========================================================
   DARK · MODAL BACKDROP
   ========================================================= */

html.dark .cc-modal-backdrop,
body.dark .cc-modal-backdrop,
[data-theme="dark"] .cc-modal-backdrop,
.dark-mode .cc-modal-backdrop {
  background:
    rgba(
      0,
      0,
      0,
      0.74
    );
}


/* =========================================================
   DARK · FILE BUTTON
   ========================================================= */

html.dark
.cc-file-field
input[type="file"]::file-selector-button,
body.dark
.cc-file-field
input[type="file"]::file-selector-button,
[data-theme="dark"]
.cc-file-field
input[type="file"]::file-selector-button,
.dark-mode
.cc-file-field
input[type="file"]::file-selector-button {
  background:
    var(
      --cc-surface-2
    );

  color: #ffffff;
}


/* =========================================================
   DARK · CHECKBOX
   ========================================================= */

html.dark
.cc-checkbox
input::before,
body.dark
.cc-checkbox
input::before,
[data-theme="dark"]
.cc-checkbox
input::before,
.dark-mode
.cc-checkbox
input::before {
  background: #ffffff;
}


/* =========================================================
   RESPONSIVE GENERAL · 1500
   ========================================================= */

@media (
  max-width:
    1500px
) {
  .cc-page__inner {
    padding: 16px;
  }


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


  .cc-toolbar {
    align-items: stretch;
  }


  .cc-search {
    flex:
      1 1 320px;
  }


  .cc-toolbar__filters {
    flex-wrap: wrap;
  }


  .cc-advanced-filters {
    grid-template-columns:
      repeat(
        4,
        minmax(
          130px,
          1fr
        )
      );
  }


  .cc-advanced-filters__actions {
    grid-column:
      span
      2;
  }
}


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

@media (
  max-width:
    1280px
) {
  .cc-header__title-row {
    align-items: flex-start;

    flex-direction: column;

    gap: 12px;
  }


  .cc-header__actions {
    width: 100%;

    justify-content: flex-start;
  }


  .cc-toolbar {
    flex-direction: column;

    align-items: stretch;
  }


  .cc-search {
    width: 100%;

    min-width: 0;

    flex: none;
  }


  .cc-toolbar__filters {
    width: 100%;

    display: grid;

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


  .cc-select-wrap {
    min-width: 0;
  }


  .cc-advanced-filters {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .cc-advanced-filters__actions {
    grid-column:
      auto;
  }
}


/* =========================================================
   RESPONSIVE GENERAL · 1024
   ========================================================= */

@media (
  max-width:
    1024px
) {
  .cc-page__inner {
    padding: 14px;

    gap: 11px;
  }


  .cc-metrics {
    gap: 6px;
  }


  .cc-metric-card {
    min-height: 84px;

    padding:
      10px;
  }


  .cc-metric-card__value {
    font-size: 15px;
  }


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


  .cc-advanced-filters {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .cc-table--clients {
    min-width: 850px;
  }
}


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

@media (
  max-width:
    820px
) {
  .cc-page {
    font-size: 12px;
  }


  .cc-page__inner {
    padding:
      11px;

    gap: 10px;
  }


  .cc-header__title {
    font-size: 24px;
  }


  .cc-header__description {
    max-width: 100%;
  }


  .cc-header__actions {
    display: grid;

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

    align-items: stretch;
  }


  .cc-currency-toggle {
    grid-column:
      1 /
      -1;

    width: fit-content;
  }


  .cc-header__actions .cc-btn {
    width: 100%;
  }


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


  .cc-panel__header {
    min-height: 54px;
  }


  .cc-table th {
    height: 36px;
  }


  .cc-table td {
    padding:
      8px
      9px;
  }


  .cc-pagination {
    flex-direction: column;

    align-items: stretch;
  }


  .cc-pagination__actions {
    justify-content: space-between;
  }


  .cc-pagination__current {
    flex: 1;
  }


  .cc-detail-overlay,
  .cc-drawer-overlay {
    top: 48px;
  }
}


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

@media (
  max-width:
    640px
) {
  .cc-page__inner {
    padding:
      8px;
  }


  .cc-header__eyebrow {
    font-size: 8px;
  }


  .cc-header__title {
    font-size: 21px;
  }


  .cc-header__description {
    font-size: 9px;
  }


  .cc-header__actions {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap: 5px;
  }


  .cc-currency-toggle {
    width: 100%;

    grid-column:
      1 /
      -1;
  }


  .cc-currency-toggle__btn {
    flex: 1;
  }


  .cc-header__actions
  .cc-btn:last-child {
    grid-column:
      1 /
      -1;
  }


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


  .cc-metric-card {
    min-height: 74px;

    padding:
      9px
      10px;
  }


  .cc-metric-card__icon {
    width: 31px;
    height: 31px;

    flex-basis: 31px;
  }


  .cc-metric-card__value {
    font-size: 14px;
  }


  .cc-panel {
    border-radius: 7px;
  }


  .cc-panel__header {
    padding:
      9px;
  }


  .cc-panel__title {
    font-size: 12px;
  }


  .cc-toolbar {
    padding: 7px;
  }


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


  .cc-advanced-filters {
    padding: 7px;

    grid-template-columns:
      1fr;
  }


  .cc-advanced-filters__actions {
    width: 100%;
  }


  .cc-advanced-filters__actions
  .cc-btn {
    width: 100%;
  }


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


  .cc-table--clients {
    min-width: 800px;
  }


  .cc-client-cell__name,
  .cc-client-cell__legal {
    max-width: 200px;
  }


  .cc-pagination {
    padding:
      8px;
  }


  .cc-pagination__info {
    text-align: center;
  }
}


/* =========================================================
   RESPONSIVE GENERAL · 480
   ========================================================= */

@media (
  max-width:
    480px
) {
  .cc-page__inner {
    padding:
      6px;
  }


  .cc-header__title-row {
    gap: 9px;
  }


  .cc-header__title {
    font-size: 20px;
  }


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


  .cc-currency-toggle,
  .cc-header__actions
  .cc-btn:last-child {
    grid-column: auto;
  }


  .cc-btn {
    min-height: 34px;

    padding:
      6px
      9px;
  }


  .cc-panel__header {
    align-items: flex-start;
  }


  .cc-panel__header-actions {
    padding-top: 1px;
  }


  .cc-search input {
    height: 35px;
  }


  .cc-select-wrap select,
  .cc-advanced-filters input,
  .cc-advanced-filters select {
    height: 35px;
  }


  .cc-client-avatar {
    width: 29px;
    height: 29px;

    flex-basis: 29px;
  }


  .cc-empty {
    min-height: 190px;

    padding: 20px;
  }


  .cc-detail-overlay,
  .cc-drawer-overlay {
    top: 46px;
  }
}


/* =========================================================
   MOBILE TABLE IMPROVEMENTS
   ========================================================= */

@media (
  max-width:
    820px
) {
  .cc-table-shell {
    position: relative;

    overscroll-behavior-x: contain;

    -webkit-overflow-scrolling: touch;
  }


  .cc-table th:first-child,
  .cc-table td:first-child {
    position: sticky;

    left: 0;

    z-index: 2;

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


  .cc-table thead
  th:first-child {
    z-index: 4;

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


  .cc-table tbody
  tr:hover
  td:first-child {
    background:
      var(
        --cc-surface-2
      );
  }


  .cc-table
  th:first-child::after,
  .cc-table
  td:first-child::after {
    content: "";

    position: absolute;

    top: 0;
    right: -1px;
    bottom: 0;

    width: 1px;

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


/* =========================================================
   PREVENIR SCROLL HORIZONTAL DE PÁGINA
   ========================================================= */

.cc-page,
.cc-page__inner,
.cc-workspace,
.cc-panel,
.cc-toolbar,
.cc-advanced-filters,
.cc-detail__content,
.cc-modal__body,
.cc-drawer__body {
  max-width: 100%;

  min-width: 0;
}


/* =========================================================
   WORD BREAKS
   ========================================================= */

.cc-card,
.cc-modal,
.cc-drawer,
.cc-detail {
  overflow-wrap: break-word;
}


.cc-card p,
.cc-modal p,
.cc-drawer p,
.cc-detail p {
  word-break: normal;
}


/* =========================================================
   STRONG TYPOGRAPHY
   ========================================================= */

.cc-page strong,
.cc-detail strong,
.cc-drawer strong,
.cc-modal strong {
  font-weight: 800;
}


.cc-page h1,
.cc-page h2,
.cc-page h3,
.cc-page h4,
.cc-detail h1,
.cc-detail h2,
.cc-detail h3,
.cc-detail h4,
.cc-drawer h1,
.cc-drawer h2,
.cc-drawer h3,
.cc-drawer h4,
.cc-modal h1,
.cc-modal h2,
.cc-modal h3,
.cc-modal h4 {
  text-rendering:
    optimizeLegibility;
}


/* =========================================================
   TABLA · NÚMEROS MÁS FIRMES
   ========================================================= */

.cc-table
td.is-numeric,
.cc-money,
.cc-drawer-summary__value,
.cc-detail-stat > strong,
.cc-metric-card__value {
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
}


/* =========================================================
   HOVER SOLO DONDE HAY MOUSE
   ========================================================= */

@media (
  hover:
    hover
) {
  .cc-table-row:hover {
    cursor: pointer;
  }
}


@media (
  hover:
    none
) {
  .cc-btn:hover:not(:disabled),
  .cc-icon-btn:hover:not(:disabled),
  .cc-metric-card:hover {
    transform: none;
  }
}


/* =========================================================
   SELECT TEXT
   ========================================================= */

.cc-page ::selection {
  background:
    var(
      --cc-text-strong
    );

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


/* =========================================================
   HIDDEN
   ========================================================= */

.cc-page [hidden],
.cc-detail-overlay[hidden],
.cc-drawer-overlay[hidden],
.cc-modal-overlay[hidden] {
  display: none !important;
}


/* =========================================================
   SVG GLOBAL
   ========================================================= */

.cc-page svg,
.cc-detail svg,
.cc-drawer svg,
.cc-modal svg {
  display: block;

  pointer-events: none;
}


/* =========================================================
   SPINNING REFRESH
   ========================================================= */

.cc-btn.is-loading
[data-lucide="refresh-cw"],
.cc-icon-btn.is-loading
[data-lucide="refresh-cw"] {
  animation:
    cc-spin
    700ms
    linear
    infinite;
}


/* =========================================================
   FOCUS VISIBLE COMPLETO
   ========================================================= */

.cc-page button:focus-visible,
.cc-page a:focus-visible,
.cc-page input:focus-visible,
.cc-page select:focus-visible,
.cc-page textarea:focus-visible,
.cc-detail button:focus-visible,
.cc-detail a:focus-visible,
.cc-drawer button:focus-visible,
.cc-drawer a:focus-visible,
.cc-modal button:focus-visible,
.cc-modal a:focus-visible,
.cc-modal input:focus-visible,
.cc-modal select:focus-visible,
.cc-modal textarea:focus-visible {
  outline:
    2px
    solid
    var(
      --cc-text-strong
    );

  outline-offset: 2px;

  box-shadow: none;
}


/* =========================================================
   DISABLED
   ========================================================= */

.cc-page button:disabled,
.cc-detail button:disabled,
.cc-drawer button:disabled,
.cc-modal button:disabled {
  cursor: not-allowed;

  opacity: 0.42;
}


/* =========================================================
   ANIMACIÓN GENERAL DE APARICIÓN
   ========================================================= */

.cc-metric-card,
.cc-panel,
.cc-card {
  animation:
    cc-surface-in
    150ms
    ease-out
    both;
}


@keyframes cc-surface-in {
  from {
    opacity: 0;

    transform:
      translateY(
        3px
      );
  }

  to {
    opacity: 1;

    transform: none;
  }
}


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

.cc-metrics
.cc-metric-card:nth-child(1) {
  animation-delay: 0ms;
}


.cc-metrics
.cc-metric-card:nth-child(2) {
  animation-delay: 15ms;
}


.cc-metrics
.cc-metric-card:nth-child(3) {
  animation-delay: 30ms;
}


.cc-metrics
.cc-metric-card:nth-child(4) {
  animation-delay: 45ms;
}


.cc-metrics
.cc-metric-card:nth-child(5) {
  animation-delay: 60ms;
}


.cc-metrics
.cc-metric-card:nth-child(6) {
  animation-delay: 75ms;
}


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

@media (
  prefers-reduced-motion:
    reduce
) {
  .cc-page *,
  .cc-page *::before,
  .cc-page *::after,
  .cc-detail *,
  .cc-detail *::before,
  .cc-detail *::after,
  .cc-drawer *,
  .cc-drawer *::before,
  .cc-drawer *::after,
  .cc-modal *,
  .cc-modal *::before,
  .cc-modal *::after {
    scroll-behavior: auto !important;

    animation-duration:
      0.001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.001ms !important;

    transition-delay:
      0ms !important;
  }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {
  .cc-page {
    --cc-bg: #ffffff;
    --cc-bg-soft: #ffffff;

    --cc-surface: #ffffff;
    --cc-surface-2: #ffffff;
    --cc-surface-3: #f4f4f4;

    --cc-border: #bcbcbc;
    --cc-border-strong: #8f8f8f;

    --cc-text: #111111;
    --cc-text-strong: #000000;

    --cc-muted: #444444;
    --cc-muted-2: #666666;

    background: #ffffff !important;

    color: #000000 !important;
  }


  .cc-header__actions,
  .cc-toolbar,
  .cc-advanced-filters,
  .cc-pagination,
  .cc-col-actions,
  .cc-detail-overlay,
  .cc-drawer-overlay,
  .cc-modal-overlay,
  .cc-toast-container {
    display: none !important;
  }


  .cc-page__inner {
    padding: 0;
  }


  .cc-panel,
  .cc-card,
  .cc-metric-card {
    break-inside: avoid;

    box-shadow: none !important;
  }


  .cc-table-shell {
    overflow: visible;
  }


  .cc-table {
    min-width: 0;

    width: 100%;

    font-size: 9px;
  }


  .cc-table th:first-child,
  .cc-table td:first-child {
    position: static;
  }


  .cc-table
  th:first-child::after,
  .cc-table
  td:first-child::after {
    display: none;
  }


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


/* =========================================================
   AJUSTE FINAL · TOPBAR
   ========================================================= */

.cc-detail-overlay,
.cc-drawer-overlay {
  max-height:
    calc(
      100dvh -
      52px
    );
}


/* =========================================================
   AJUSTE FINAL · MODAL SIEMPRE ARRIBA DE DETAIL/DRAWER
   ========================================================= */

.cc-modal-overlay {
  isolation: isolate;
}


/* =========================================================
   AJUSTE FINAL · TAB CONTENT
   ========================================================= */

.cc-detail__content
> .cc-card:only-child {
  width: 100%;
}


/* =========================================================
   AJUSTE FINAL · CARD TABLE
   ========================================================= */

.cc-card
> .cc-table-shell {
  border: 0;
}


/* =========================================================
   AJUSTE FINAL · TABLE HEAD FIJO EN DETALLE
   ========================================================= */

.cc-detail__content
.cc-table thead th {
  position: sticky;

  top: 0;

  z-index: 3;
}


/* =========================================================
   AJUSTE FINAL · TABLAS DENTRO DE CARD
   ========================================================= */

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


/* =========================================================
   AJUSTE FINAL · EMPTY EN CARDS
   ========================================================= */

.cc-card > .cc-empty {
  min-height: 190px;
}


/* =========================================================
   AJUSTE FINAL · BOTÓN CLOSE
   ========================================================= */

.cc-icon-btn--close {
  flex-shrink: 0;
}


/* =========================================================
   AJUSTE FINAL · CABECERAS SIN CORTE
   ========================================================= */

.cc-panel__title,
.cc-card__header h3,
.cc-drawer__header h3,
.cc-modal__header h3,
.cc-detail-client__text h2 {
  padding-top: 1px;
}


/* =========================================================
   AJUSTE FINAL · BOTONES CON TEXTO LEGIBLE
   ========================================================= */

.cc-btn span {
  color: inherit;

  font-weight: inherit;
}


/* =========================================================
   AJUSTE FINAL · DARK TEXT
   ========================================================= */

html.dark
.cc-btn--primary span,
body.dark
.cc-btn--primary span,
[data-theme="dark"]
.cc-btn--primary span,
.dark-mode
.cc-btn--primary span {
  color: #080808;
}


html.dark
.cc-btn--secondary span,
body.dark
.cc-btn--secondary span,
[data-theme="dark"]
.cc-btn--secondary span,
.dark-mode
.cc-btn--secondary span {
  color: #f4f4f4;
}


/* =========================================================
   AJUSTE FINAL · TABLE ROW ACTION
   ========================================================= */

.cc-col-actions
.cc-icon-btn {
  margin-left: auto;
}


/* =========================================================
   AJUSTE FINAL · TABLA CLIENTES
   ========================================================= */

.cc-table--clients
tbody
.cc-table-row {
  position: relative;
}


/* =========================================================
   AJUSTE FINAL · CLIENTE ACTIVO
   ========================================================= */

.cc-table-row.is-active td {
  background:
    var(
      --cc-surface-3
    );
}


/* =========================================================
   AJUSTE FINAL · DRAWER / MODAL Z-INDEX
   ========================================================= */

.cc-detail-overlay {
  z-index: 9000;
}


.cc-drawer-overlay {
  z-index: 10000;
}


.cc-modal-overlay {
  z-index: 11000;
}


.cc-toast-container {
  z-index: 12000;
}


/* =========================================================
   AJUSTE FINAL · TABS SIN SALTOS
   ========================================================= */

.cc-detail-tab {
  user-select: none;
}


/* =========================================================
   AJUSTE FINAL · PREVENIR COLOR GRIS LAVADO
   ========================================================= */

.cc-table td strong,
.cc-card strong,
.cc-drawer strong,
.cc-modal strong,
.cc-detail strong {
  color:
    var(
      --cc-text-strong
    );
}


/* =========================================================
   REAPLICAR COLORES SEMÁNTICOS DESPUÉS DEL STRONG GLOBAL
   ========================================================= */

.cc-text-danger,
strong.cc-text-danger,
.cc-money.is-debt,
.cc-money.is-overdue,
.cc-detail-stat--danger > strong,
.cc-detail-stat > strong.is-debt {
  color:
    var(
      --cc-danger
    ) !important;
}


.cc-text-success,
strong.cc-text-success,
.cc-money.is-credit,
.cc-detail-stat > strong.is-credit {
  color:
    var(
      --cc-success
    ) !important;
}


/* =========================================================
   AJUSTE FINAL · MOBILE DETAIL FULL HEIGHT
   ========================================================= */

@media (
  max-width:
    960px
) {
  .cc-detail {
    max-width: 100%;

    height: 100%;
  }
}


/* =========================================================
   AJUSTE FINAL · MOBILE DRAWER FULL HEIGHT
   ========================================================= */

@media (
  max-width:
    640px
) {
  .cc-drawer {
    height: 100%;
  }
}


/* =========================================================
   AJUSTE FINAL · ULTRA SMALL
   ========================================================= */

@media (
  max-width:
    360px
) {
  .cc-page__inner {
    padding: 5px;
  }


  .cc-header__title {
    font-size: 19px;
  }


  .cc-header__description {
    font-size: 8.5px;
  }


  .cc-metric-card {
    min-height: 70px;
  }


  .cc-metric-card__value {
    font-size: 13px;
  }


  .cc-panel__header {
    padding:
      8px;
  }


  .cc-toolbar {
    padding: 6px;
  }


  .cc-advanced-filters {
    padding: 6px;
  }


  .cc-detail__content {
    padding: 5px;
  }


  .cc-modal__body {
    padding: 5px;
  }


  .cc-drawer__body {
    padding: 5px;
  }
}


/* =========================================================
   FIN
   WIRTZ HUB
   FACTURACIÓN Y COBRANZAS
   CUENTA CORRIENTE

   CSS COMPLETO FINALIZADO
   PARTE 4 DE 4
   ========================================================= *//* =========================================================
   CUENTA CORRIENTE
   OVERLAYS POR ENCIMA DE TOPBAR + FOOTER

   OBJETIVO:
   - El detalle del cliente tapa el Topbar.
   - El detalle del cliente tapa el Footer.
   - Drawer queda encima del detalle.
   - Modal queda encima del Drawer.
   - Toast queda por encima de todo.
   ========================================================= */


/* =========================================================
   DETALLE CLIENTE
   CUBRE TODA LA VENTANA
   ========================================================= */

.cc-detail-overlay {
  position: fixed !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

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

  max-width: none !important;
  max-height: none !important;

  z-index: 200000 !important;

  overflow: hidden !important;
}


/* =========================================================
   BACKDROP DETALLE
   TAMBIÉN CUBRE TOPBAR Y FOOTER
   ========================================================= */

.cc-detail-backdrop {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  z-index: 0 !important;
}


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

.cc-detail {
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  height: 100% !important;
  max-height: 100% !important;

  z-index: 1 !important;
}


/* =========================================================
   DRAWER
   DEBE QUEDAR ARRIBA DEL DETALLE
   ========================================================= */

.cc-drawer-overlay {
  position: fixed !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

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

  max-width: none !important;
  max-height: none !important;

  z-index: 210000 !important;

  overflow: hidden !important;
}


.cc-drawer {
  top: 0 !important;
  bottom: 0 !important;

  height: 100% !important;
  max-height: 100% !important;
}


/* =========================================================
   MODAL
   SIEMPRE ARRIBA DEL DETALLE Y DRAWER
   ========================================================= */

.cc-modal-overlay {
  position: fixed !important;

  inset: 0 !important;

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

  z-index: 220000 !important;
}


/* =========================================================
   TOAST
   ARRIBA DE TODO
   ========================================================= */

.cc-toast-container {
  z-index: 230000 !important;
}


/* =========================================================
   ELIMINAR REGLAS RESPONSIVE QUE VOLVÍAN
   A BAJAR EL OVERLAY DEBAJO DEL TOPBAR
   ========================================================= */

@media (max-width: 820px) {
  .cc-detail-overlay,
  .cc-drawer-overlay {
    top: 0 !important;

    height: 100dvh !important;

    max-height: none !important;
  }
}


@media (max-width: 480px) {
  .cc-detail-overlay,
  .cc-drawer-overlay {
    top: 0 !important;

    height: 100dvh !important;

    max-height: none !important;
  }
}


/* =========================================================
   DETALLE FULL HEIGHT EN TODAS LAS RESOLUCIONES
   ========================================================= */

@media (max-width: 960px) {
  .cc-detail {
    top: 0 !important;
    bottom: 0 !important;

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

    max-width: 100vw !important;
    max-height: 100dvh !important;
  }
}


/* =========================================================
   DRAWER FULL HEIGHT MOBILE
   ========================================================= */

@media (max-width: 640px) {
  .cc-drawer {
    top: 0 !important;
    bottom: 0 !important;

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

    max-height: 100dvh !important;
  }
}/* =========================================================
   CUENTA CORRIENTE
   CORRECCIÓN FINAL DE OVERLAYS

   TOPBAR:
   - queda visible arriba

   FOOTER:
   - queda visible abajo

   DETAIL / DRAWER:
   - ocupan solamente el espacio central
   ========================================================= */


/* =========================================================
   ALTURAS DEL LAYOUT WIRTZ HUB
   ========================================================= */

.cc-page {
  --cc-app-topbar-height: 52px;
  --cc-app-footer-height: 40px;
}


/* =========================================================
   DETAIL OVERLAY
   ENTRE TOPBAR Y FOOTER
   ========================================================= */

.cc-detail-overlay {
  position: fixed !important;

  top:
    var(
      --cc-app-topbar-height
    ) !important;

  right: 0 !important;

  bottom:
    var(
      --cc-app-footer-height
    ) !important;

  left: 0 !important;

  width: auto !important;
  height: auto !important;

  max-width: none !important;
  max-height: none !important;

  z-index: 9000 !important;

  overflow: hidden !important;
}


/* =========================================================
   DETAIL BACKDROP
   ========================================================= */

.cc-detail-backdrop {
  position: absolute !important;

  inset: 0 !important;

  width: auto !important;
  height: auto !important;

  z-index: 0 !important;
}


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

.cc-detail {
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  height: auto !important;

  max-height: none !important;

  z-index: 1 !important;
}


/* =========================================================
   DRAWER OVERLAY
   TAMBIÉN ENTRE TOPBAR Y FOOTER
   ========================================================= */

.cc-drawer-overlay {
  position: fixed !important;

  top:
    var(
      --cc-app-topbar-height
    ) !important;

  right: 0 !important;

  bottom:
    var(
      --cc-app-footer-height
    ) !important;

  left: 0 !important;

  width: auto !important;
  height: auto !important;

  max-width: none !important;
  max-height: none !important;

  z-index: 10000 !important;

  overflow: hidden !important;
}


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

.cc-drawer {
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  height: auto !important;

  max-height: none !important;
}


/* =========================================================
   MODAL
   TAMBIÉN RESPETA TOPBAR Y FOOTER
   ========================================================= */

.cc-modal-overlay {
  position: fixed !important;

  top:
    var(
      --cc-app-topbar-height
    ) !important;

  right: 0 !important;

  bottom:
    var(
      --cc-app-footer-height
    ) !important;

  left: 0 !important;

  width: auto !important;
  height: auto !important;

  padding:
    14px
    18px !important;

  z-index: 11000 !important;

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


.cc-modal {
  max-height:
    calc(
      100dvh -
      var(
        --cc-app-topbar-height
      ) -
      var(
        --cc-app-footer-height
      ) -
      28px
    ) !important;
}


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

.cc-toast-container {
  top:
    calc(
      var(
        --cc-app-topbar-height
      ) +
      10px
    ) !important;

  bottom: auto !important;

  z-index: 12000 !important;
}


/* =========================================================
   BORRAR EFECTO DEL PATCH ANTERIOR
   QUE USABA 100DVH
   ========================================================= */

@media (max-width: 960px) {
  .cc-detail-overlay {
    top:
      var(
        --cc-app-topbar-height
      ) !important;

    bottom:
      var(
        --cc-app-footer-height
      ) !important;

    height: auto !important;

    max-height: none !important;
  }


  .cc-detail {
    top: 0 !important;
    bottom: 0 !important;

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

    max-width: 100vw !important;
    max-height: none !important;
  }
}


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

@media (max-width: 820px) {
  .cc-detail-overlay,
  .cc-drawer-overlay {
    top:
      var(
        --cc-app-topbar-height
      ) !important;

    bottom:
      var(
        --cc-app-footer-height
      ) !important;

    height: auto !important;

    max-height: none !important;
  }
}


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

@media (max-width: 640px) {
  .cc-drawer {
    top: 0 !important;
    bottom: 0 !important;

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

    max-height: none !important;
  }
}


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

@media (max-width: 480px) {
  .cc-detail-overlay,
  .cc-drawer-overlay {
    top:
      var(
        --cc-app-topbar-height
      ) !important;

    bottom:
      var(
        --cc-app-footer-height
      ) !important;

    height: auto !important;

    max-height: none !important;
  }


  .cc-modal-overlay {
    top:
      var(
        --cc-app-topbar-height
      ) !important;

    bottom:
      var(
        --cc-app-footer-height
      ) !important;

    height: auto !important;

    padding: 6px !important;
  }
}


/* =========================================================
   IMPORTANTE
   NO VOLVER A USAR ESTO EN ESTOS OVERLAYS:

   top: 0;
   bottom: 0;
   height: 100dvh;

   PORQUE ESO VUELVE A TAPAR
   TOPBAR + FOOTER
   ========================================================= *//* =========================================================
   CUENTA CORRIENTE
   OVERLAY FULLSCREEN REAL
   EL DETALLE TAPA TOPBAR + FOOTER
   ========================================================= */


/* =========================================================
   OVERLAY PRINCIPAL DEL DETALLE
   ========================================================= */

#ccClientDetail,
.cc-detail-overlay {
  position: fixed !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

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

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

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

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

  overflow: hidden !important;

  z-index: 200000 !important;
}


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

#ccClientDetail .cc-detail-backdrop,
.cc-detail-overlay .cc-detail-backdrop {
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
}


/* =========================================================
   PANEL DEL DETALLE
   ========================================================= */

#ccClientDetail .cc-detail,
.cc-detail-overlay .cc-detail {
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

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

  margin: 0 !important;

  z-index: 1 !important;
}


/* =========================================================
   CONTENIDO INTERNO DEL DETALLE
   ========================================================= */

#ccClientDetail .cc-detail__content,
.cc-detail-overlay .cc-detail__content {
  min-height: 0 !important;

  height: auto !important;

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


/* =========================================================
   DRAWER
   SI ABRÍS UN DRAWER DESDE EL DETALLE
   TAMBIÉN TIENE QUE TAPAR TODO
   ========================================================= */

.cc-drawer-overlay {
  position: fixed !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

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

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

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

  overflow: hidden !important;

  z-index: 210000 !important;
}


.cc-drawer {
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  height: 100dvh !important;
  max-height: 100dvh !important;
}


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

.cc-modal-overlay {
  position: fixed !important;

  inset: 0 !important;

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

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

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

  padding: 18px !important;

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

  z-index: 220000 !important;
}


.cc-modal {
  max-height: calc(100dvh - 36px) !important;
}


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

.cc-toast-container {
  z-index: 230000 !important;
}


/* =========================================================
   ANULA CUALQUIER REGLA VIEJA
   QUE LO DEJE DEBAJO DEL TOPBAR/FOOTER
   ========================================================= */

@media (max-width: 960px) {
  #ccClientDetail,
  .cc-detail-overlay,
  .cc-drawer-overlay,
  .cc-modal-overlay {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

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

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

    max-width: 100vw !important;
    max-height: 100dvh !important;
  }

  #ccClientDetail .cc-detail,
  .cc-detail-overlay .cc-detail,
  .cc-drawer {
    top: 0 !important;
    bottom: 0 !important;

    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}


@media (max-width: 820px) {
  #ccClientDetail,
  .cc-detail-overlay,
  .cc-drawer-overlay,
  .cc-modal-overlay {
    top: 0 !important;
    bottom: 0 !important;

    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}


@media (max-width: 640px) {
  .cc-drawer {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  .cc-modal-overlay {
    padding: 8px !important;
  }

  .cc-modal {
    max-height: calc(100dvh - 16px) !important;
  }
}


@media (max-width: 480px) {
  #ccClientDetail,
  .cc-detail-overlay,
  .cc-drawer-overlay,
  .cc-modal-overlay {
    top: 0 !important;
    bottom: 0 !important;

    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  #ccClientDetail .cc-detail,
  .cc-detail-overlay .cc-detail,
  .cc-drawer {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}/* =========================================================
   CUENTA CORRIENTE
   DETAIL FULL WIDTH DENTRO DE APP-CONTENT

   RESPETA:
   - TOPBAR
   - FOOTER

   PERO USA TODO EL ANCHO CENTRAL
   ========================================================= */


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

#ccClientDetail,
.cc-detail-overlay {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

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

  max-width: 100% !important;
  max-height: 100% !important;

  overflow: hidden !important;
}


/* =========================================================
   PANEL DETALLE
   FULL WIDTH REAL
   ========================================================= */

#ccClientDetail .cc-detail,
.cc-detail-overlay .cc-detail {
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: 100% !important;

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

  max-width: 100% !important;
  max-height: 100% !important;

  margin: 0 !important;

  border-left: 0 !important;

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

  overflow: hidden !important;

  box-shadow: none !important;
}


/* =========================================================
   BACKDROP
   YA NO NECESITA VERSE A LA IZQUIERDA
   PORQUE EL DETAIL OCUPA TODO
   ========================================================= */

#ccClientDetail .cc-detail-backdrop,
.cc-detail-overlay .cc-detail-backdrop {
  display: none !important;
}


/* =========================================================
   HEADER DEL DETAIL
   ========================================================= */

#ccClientDetail .cc-detail__header {
  width: 100% !important;

  flex:
    0
    0
    auto !important;
}


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

#ccClientDetail .cc-detail__summary {
  width: 100% !important;

  flex:
    0
    0
    auto !important;
}


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

#ccClientDetail .cc-detail-tabs {
  width: 100% !important;

  flex:
    0
    0
    auto !important;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

#ccClientDetail .cc-detail__content {
  width: 100% !important;

  flex:
    1
    1
    0 !important;

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

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


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

#ccClientDetail .cc-detail__loading {
  width: 100% !important;

  flex:
    1
    1
    0 !important;

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

  overflow-y: auto !important;
}


/* =========================================================
   EVITAR QUE REGLAS ANTERIORES
   LO VUELVAN A PONER COMO DRAWER LATERAL
   ========================================================= */

@media (max-width: 1500px) {
  #ccClientDetail .cc-detail,
  .cc-detail-overlay .cc-detail {
    width: 100% !important;
    max-width: 100% !important;

    left: 0 !important;
    right: 0 !important;
  }
}


@media (max-width: 1200px) {
  #ccClientDetail .cc-detail,
  .cc-detail-overlay .cc-detail {
    width: 100% !important;
    max-width: 100% !important;

    left: 0 !important;
    right: 0 !important;
  }
}


@media (max-width: 960px) {
  #ccClientDetail .cc-detail,
  .cc-detail-overlay .cc-detail {
    width: 100% !important;
    max-width: 100% !important;

    left: 0 !important;
    right: 0 !important;
  }
}


/* =========================================================
   FIN
   DETAIL = TODO EL APP CONTENT
   TOPBAR Y FOOTER SIGUEN VISIBLES
   ========================================================= *//* =========================================================
   CUENTA CORRIENTE
   FIX FINAL TOPBAR
   EL DETALLE ARRANCA DEBAJO DEL TOPBAR
   ========================================================= */


/* =========================================================
   ALTURA REAL TOPBAR
   ========================================================= */

body:has(#pageCuentaCorriente) {
  --cc-topbar-real-height: 58px;
}


/* =========================================================
   RESERVAR TOPBAR
   ========================================================= */

body:has(#pageCuentaCorriente)
.app-main {
  position: relative !important;

  height: 100dvh !important;

  min-height: 0 !important;

  overflow: hidden !important;
}


/* =========================================================
   TOPBAR
   SIEMPRE ARRIBA
   ========================================================= */

body:has(#pageCuentaCorriente)
.app-topbar {
  position: relative !important;

  top: 0 !important;

  flex:
    0
    0
    var(
      --cc-topbar-real-height
    ) !important;

  height:
    var(
      --cc-topbar-real-height
    ) !important;

  min-height:
    var(
      --cc-topbar-real-height
    ) !important;

  z-index: 300000 !important;
}


/* =========================================================
   APP CONTENT
   EMPIEZA DESPUÉS DEL TOPBAR
   ========================================================= */

body:has(#pageCuentaCorriente)
.app-content,
.app-content:has(#pageCuentaCorriente) {
  position: relative !important;

  flex:
    1
    1
    0 !important;

  width: 100% !important;

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

  height: auto !important;

  overflow: hidden !important;
}


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

#pageCuentaCorriente {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

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

  overflow: hidden !important;
}


/* =========================================================
   DETAIL OVERLAY
   SOLO DENTRO DEL APP CONTENT
   ========================================================= */

#ccClientDetail,
.cc-detail-overlay {
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: 100% !important;

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

  max-width: 100% !important;
  max-height: 100% !important;

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

  overflow: hidden !important;

  z-index: 9000 !important;
}


/* =========================================================
   PANEL FULL WIDTH
   ========================================================= */

#ccClientDetail
.cc-detail,
.cc-detail-overlay
.cc-detail {
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: 100% !important;

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

  max-width: 100% !important;
  max-height: 100% !important;

  margin: 0 !important;

  border-left: 0 !important;

  overflow: hidden !important;

  box-shadow: none !important;
}


/* =========================================================
   HEADER DEL DETALLE
   ========================================================= */

#ccClientDetail
.cc-detail__header {
  position: relative !important;

  top: 0 !important;

  width: 100% !important;

  flex:
    0
    0
    auto !important;

  z-index: 20 !important;
}


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

#ccClientDetail
.cc-detail__summary {
  flex:
    0
    0
    auto !important;
}


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

#ccClientDetail
.cc-detail-tabs {
  flex:
    0
    0
    auto !important;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

#ccClientDetail
.cc-detail__content {
  flex:
    1
    1
    0 !important;

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

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


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

body:has(#pageCuentaCorriente)
.app-main
> footer,
body:has(#pageCuentaCorriente)
.app-main
> .app-footer {
  position: relative !important;

  flex:
    0
    0
    auto !important;

  z-index: 300000 !important;
}


/* =========================================================
   ANULAR PARCHES VIEJOS QUE USABAN FIXED
   ========================================================= */

#ccClientDetail {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;
}


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

@media (max-width: 960px) {
  #ccClientDetail,
  .cc-detail-overlay {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;
  }


  #ccClientDetail
  .cc-detail {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;
  }
}/* =========================================================
   CUENTA CORRIENTE
   FIX FINAL FOOTER
   FOOTER SIEMPRE PEGADO ABAJO DEL VIEWPORT
   ========================================================= */


/* =========================================================
   APP SHELL
   ========================================================= */

body:has(#pageCuentaCorriente)
.app-shell {
  width: 100% !important;

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

  overflow: hidden !important;
}


/* =========================================================
   APP MAIN

   FILA 1 = TOPBAR
   FILA 2 = CONTENIDO
   FILA 3 = FOOTER
   ========================================================= */

body:has(#pageCuentaCorriente)
.app-main {
  display: grid !important;

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

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

  width: 100% !important;

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

  min-width: 0 !important;

  overflow: hidden !important;
}


/* =========================================================
   TOPBAR
   ========================================================= */

body:has(#pageCuentaCorriente)
.app-main
> .app-topbar {
  grid-row: 1 !important;

  width: 100% !important;

  min-width: 0 !important;

  align-self: start !important;

  flex: none !important;

  margin: 0 !important;
}


/* =========================================================
   APP CONTENT
   USA TODO EL ESPACIO ENTRE TOPBAR Y FOOTER
   ========================================================= */

body:has(#pageCuentaCorriente)
.app-main
> .app-content,
body:has(#pageCuentaCorriente)
.app-content:has(#pageCuentaCorriente) {
  grid-row: 2 !important;

  position: relative !important;

  width: 100% !important;
  height: 100% !important;

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

  max-height: 100% !important;

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

  overflow: hidden !important;

  align-self: stretch !important;

  flex: none !important;
}


/* =========================================================
   CUENTA CORRIENTE
   ========================================================= */

#pageCuentaCorriente {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

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

  max-height: 100% !important;

  margin: 0 !important;

  overflow: hidden !important;
}


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

body:has(#pageCuentaCorriente)
.app-main
> footer,
body:has(#pageCuentaCorriente)
.app-main
> .footer,
body:has(#pageCuentaCorriente)
.app-main
> .app-footer {
  grid-row: 3 !important;

  position: relative !important;

  width: 100% !important;

  min-width: 0 !important;

  height: auto !important;
  min-height: 38px !important;

  margin: 0 !important;
  margin-top: 0 !important;

  align-self: end !important;

  flex: none !important;
  flex-shrink: 0 !important;

  z-index: 300000 !important;
}


/* =========================================================
   EVITAR ESPACIO VACÍO DESPUÉS DEL FOOTER
   ========================================================= */

body:has(#pageCuentaCorriente) {
  height: 100dvh !important;
  min-height: 100dvh !important;

  overflow: hidden !important;
}


/* =========================================================
   HTML
   ========================================================= */

html:has(#pageCuentaCorriente) {
  height: 100% !important;

  overflow: hidden !important;
}


/* =========================================================
   DETAIL SIGUE LIMITADO AL APP CONTENT
   ========================================================= */

#ccClientDetail,
.cc-detail-overlay {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  min-height: 0 !important;
  max-height: 100% !important;
}


/* =========================================================
   FIN FIX FOOTER
   ========================================================= *//* =========================================================
   CUENTA CORRIENTE
   FIX SCROLL PÁGINA PRINCIPAL

   - Topbar fijo arriba
   - Footer fijo abajo
   - Página principal scrollea
   - Detail sigue limitado al área central
   ========================================================= */


/* =========================================================
   APP CONTENT
   NO SCROLLEA DIRECTAMENTE
   ========================================================= */

body:has(#pageCuentaCorriente)
.app-content,
.app-content:has(#pageCuentaCorriente) {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

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

  overflow: hidden !important;
}


/* =========================================================
   PAGE
   OCUPA TODO EL ESPACIO DISPONIBLE
   ========================================================= */

#pageCuentaCorriente {
  position: relative !important;

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

  width: 100% !important;
  height: 100% !important;

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

  max-width: 100% !important;
  max-height: 100% !important;

  overflow: hidden !important;
}


/* =========================================================
   PAGE INNER
   ESTE ES EL SCROLL REAL DE LA PÁGINA
   ========================================================= */

#pageCuentaCorriente
.cc-page__inner {
  position: relative !important;

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

  flex:
    1
    1
    auto !important;

  width: 100% !important;
  height: 100% !important;

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

  max-width: 100% !important;

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

  overscroll-behavior-y: contain;

  scrollbar-width: thin;

  -webkit-overflow-scrolling: touch;
}


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

#pageCuentaCorriente
.cc-page__inner::-webkit-scrollbar {
  width: 8px;
}


#pageCuentaCorriente
.cc-page__inner::-webkit-scrollbar-track {
  background: transparent;
}


#pageCuentaCorriente
.cc-page__inner::-webkit-scrollbar-thumb {
  border:
    2px
    solid
    transparent;

  border-radius: 999px;

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

  background-clip: padding-box;
}


/* =========================================================
   WORKSPACE
   NO LIMITAR ALTURA
   ========================================================= */

#pageCuentaCorriente
.cc-workspace {
  width: 100% !important;

  min-width: 0 !important;

  flex:
    0
    0
    auto !important;

  overflow: visible !important;
}


/* =========================================================
   PANEL CLIENTES
   DEJAR QUE CREZCA SEGÚN EL CONTENIDO
   ========================================================= */

#pageCuentaCorriente
.cc-panel--clients {
  width: 100% !important;

  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  overflow: visible !important;
}


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

   SOLO SCROLL HORIZONTAL SI HACE FALTA.
   EL VERTICAL LO MANEJA cc-page__inner.
   ========================================================= */

#pageCuentaCorriente
.cc-panel--clients
.cc-table-shell {
  width: 100% !important;

  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  overflow-x: auto !important;
  overflow-y: visible !important;
}


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

#pageCuentaCorriente
.cc-table--clients {
  height: auto !important;

  max-height: none !important;
}


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

#pageCuentaCorriente
.cc-pagination {
  flex:
    0
    0
    auto !important;
}


/* =========================================================
   DETAIL OVERLAY

   SIGUE OCUPANDO TODO EL ÁREA CENTRAL,
   PERO NO AFECTA EL SCROLL DEL LISTADO.
   ========================================================= */

#ccClientDetail,
.cc-detail-overlay {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

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

  max-width: 100% !important;
  max-height: 100% !important;

  overflow: hidden !important;

  z-index: 9000 !important;
}


/* =========================================================
   CUANDO EL DETAIL ESTÁ OCULTO
   NO INTERFIERE CON EL SCROLL
   ========================================================= */

#ccClientDetail[hidden],
.cc-detail-overlay[hidden] {
  display: none !important;

  pointer-events: none !important;
}


/* =========================================================
   DETAIL CONTENT
   TIENE SU PROPIO SCROLL
   ========================================================= */

#ccClientDetail
.cc-detail__content {
  flex:
    1
    1
    0 !important;

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

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


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

html[data-theme="dark"]
#pageCuentaCorriente
.cc-page__inner::-webkit-scrollbar-thumb {
  background:
    #3a3a3a;

  background-clip: padding-box;
}


/* =========================================================
   FIN FIX SCROLL
   ========================================================= *//* =========================================================
   CUENTA CORRIENTE
   TIPOGRAFÍA MÁS GRANDE + MÁS FIRME
   ========================================================= */


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

#pageCuentaCorriente,
#ccClientDetail,
#ccDrawer,
#ccModal {
  font-size: 14px !important;

  font-weight: 650 !important;

  letter-spacing: -0.005em;
}


/* =========================================================
   TÍTULO PRINCIPAL
   ========================================================= */

#pageCuentaCorriente
.cc-header__eyebrow {
  font-size: 10px !important;

  font-weight: 850 !important;

  letter-spacing: 0.075em !important;
}


#pageCuentaCorriente
.cc-header__title {
  font-size:
    clamp(
      28px,
      2.2vw,
      34px
    ) !important;

  font-weight: 900 !important;

  line-height: 1.05 !important;

  letter-spacing: -0.04em !important;
}


#pageCuentaCorriente
.cc-header__description {
  font-size: 13px !important;

  line-height: 1.45 !important;

  font-weight: 700 !important;
}


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

#pageCuentaCorriente
.cc-btn,
#ccClientDetail
.cc-btn,
#ccDrawer
.cc-btn,
#ccModal
.cc-btn {
  font-size: 12px !important;

  font-weight: 800 !important;
}


#pageCuentaCorriente
.cc-btn--xs,
#ccClientDetail
.cc-btn--xs {
  font-size: 10.5px !important;

  font-weight: 800 !important;
}


/* =========================================================
   TOGGLE ARS / USD
   ========================================================= */

#pageCuentaCorriente
.cc-currency-toggle__btn {
  font-size: 10.5px !important;

  font-weight: 850 !important;
}


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

#pageCuentaCorriente
.cc-metric-card__label {
  font-size: 10.5px !important;

  font-weight: 800 !important;
}


#pageCuentaCorriente
.cc-metric-card__value {
  font-size: 20px !important;

  font-weight: 900 !important;

  line-height: 1.1 !important;
}


#pageCuentaCorriente
.cc-metric-card__meta {
  font-size: 9.5px !important;

  font-weight: 700 !important;
}


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

#pageCuentaCorriente
.cc-panel__title {
  font-size: 15px !important;

  font-weight: 900 !important;
}


#pageCuentaCorriente
.cc-panel__subtitle {
  font-size: 10.5px !important;

  font-weight: 700 !important;
}


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

#pageCuentaCorriente
.cc-search input {
  font-size: 12px !important;

  font-weight: 700 !important;
}


#pageCuentaCorriente
.cc-search input::placeholder {
  font-size: 11.5px !important;

  font-weight: 650 !important;
}


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

#pageCuentaCorriente
.cc-select-wrap > span,
#pageCuentaCorriente
.cc-advanced-filters > label > span {
  font-size: 9.5px !important;

  font-weight: 850 !important;
}


#pageCuentaCorriente
.cc-select-wrap select,
#pageCuentaCorriente
.cc-advanced-filters input,
#pageCuentaCorriente
.cc-advanced-filters select {
  font-size: 11px !important;

  font-weight: 750 !important;
}


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

#pageCuentaCorriente
.cc-table th {
  font-size: 9.5px !important;

  font-weight: 900 !important;

  letter-spacing: 0.03em !important;
}


#pageCuentaCorriente
.cc-table td {
  font-size: 11.5px !important;

  font-weight: 700 !important;

  line-height: 1.4 !important;
}


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

#pageCuentaCorriente
.cc-client-cell__name {
  font-size: 12.5px !important;

  font-weight: 900 !important;
}


#pageCuentaCorriente
.cc-client-cell__legal {
  font-size: 10px !important;

  font-weight: 700 !important;
}


#pageCuentaCorriente
.cc-client-cell__meta span {
  font-size: 9px !important;

  font-weight: 700 !important;
}


/* =========================================================
   IMPORTES
   ========================================================= */

#pageCuentaCorriente
.cc-money,
#ccClientDetail
.cc-money {
  font-size: 12.5px !important;

  font-weight: 900 !important;
}


#pageCuentaCorriente
.cc-value-stack > strong,
#pageCuentaCorriente
.cc-value-stack > span {
  font-size: 11.5px !important;

  font-weight: 850 !important;
}


#pageCuentaCorriente
.cc-value-stack > small {
  font-size: 9.5px !important;

  font-weight: 700 !important;
}


/* =========================================================
   CRÉDITO
   ========================================================= */

#pageCuentaCorriente
.cc-credit-cell > strong {
  font-size: 11.5px !important;

  font-weight: 900 !important;
}


#pageCuentaCorriente
.cc-credit-cell > small {
  font-size: 9px !important;

  font-weight: 700 !important;
}


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

#pageCuentaCorriente
.cc-badge,
#ccClientDetail
.cc-badge,
#ccDrawer
.cc-badge,
#ccModal
.cc-badge {
  min-height: 23px !important;

  padding:
    4px
    8px !important;

  font-size: 9.5px !important;

  font-weight: 900 !important;
}


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

#pageCuentaCorriente
.cc-pagination__info,
#pageCuentaCorriente
.cc-pagination__current {
  font-size: 10.5px !important;

  font-weight: 750 !important;
}


/* =========================================================
   DETALLE · CLIENTE
   ========================================================= */

#ccClientDetail
.cc-detail-client__eyebrow {
  font-size: 9.5px !important;

  font-weight: 850 !important;
}


#ccClientDetail
.cc-detail-client__text h2 {
  font-size: 21px !important;

  font-weight: 900 !important;

  letter-spacing: -0.03em !important;
}


#ccClientDetail
.cc-detail-client__meta span {
  font-size: 10px !important;

  font-weight: 700 !important;
}


/* =========================================================
   DETALLE · RESUMEN
   ========================================================= */

#ccClientDetail
.cc-detail-stat > span {
  font-size: 9.5px !important;

  font-weight: 850 !important;
}


#ccClientDetail
.cc-detail-stat > strong {
  font-size: 16px !important;

  font-weight: 900 !important;
}


#ccClientDetail
.cc-detail-stat > small {
  font-size: 9px !important;

  font-weight: 700 !important;
}


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

#ccClientDetail
.cc-detail-tab {
  font-size: 11px !important;

  font-weight: 800 !important;
}


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

#ccClientDetail
.cc-card__header h3 {
  font-size: 13px !important;

  font-weight: 900 !important;
}


#ccClientDetail
.cc-card__header p {
  font-size: 9.5px !important;

  font-weight: 700 !important;
}


/* =========================================================
   AGING
   ========================================================= */

#ccClientDetail
.cc-aging__label {
  font-size: 10.5px !important;

  font-weight: 800 !important;
}


#ccClientDetail
.cc-aging__item > strong {
  font-size: 11px !important;

  font-weight: 900 !important;
}


/* =========================================================
   KV
   ========================================================= */

#ccClientDetail
.cc-kv > span {
  font-size: 9px !important;

  font-weight: 850 !important;
}


#ccClientDetail
.cc-kv > strong {
  font-size: 11px !important;

  font-weight: 850 !important;
}


/* =========================================================
   MINI LIST
   ========================================================= */

#ccClientDetail
.cc-mini-list__content strong {
  font-size: 11px !important;

  font-weight: 850 !important;
}


#ccClientDetail
.cc-mini-list__content small {
  font-size: 9px !important;

  font-weight: 700 !important;
}


#ccClientDetail
.cc-mini-list__value {
  font-size: 11px !important;

  font-weight: 900 !important;
}


/* =========================================================
   MOVIMIENTOS
   ========================================================= */

#ccClientDetail
.cc-movement-cell strong {
  font-size: 11px !important;

  font-weight: 850 !important;
}


#ccClientDetail
.cc-movement-cell small {
  font-size: 9px !important;

  font-weight: 700 !important;
}


/* =========================================================
   DOCUMENTOS
   ========================================================= */

#ccClientDetail
.cc-document__title-row > strong {
  font-size: 11px !important;

  font-weight: 900 !important;
}


#ccClientDetail
.cc-document__type {
  font-size: 9px !important;

  font-weight: 750 !important;
}


#ccClientDetail
.cc-document__description {
  font-size: 10px !important;

  font-weight: 700 !important;
}


#ccClientDetail
.cc-document__meta span {
  font-size: 8.5px !important;

  font-weight: 700 !important;
}


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

#ccClientDetail
.cc-timeline-item__header strong {
  font-size: 11px !important;

  font-weight: 900 !important;
}


#ccClientDetail
.cc-timeline-item__header span {
  font-size: 9px !important;

  font-weight: 700 !important;
}


#ccClientDetail
.cc-timeline-item__body > p {
  font-size: 10.5px !important;

  font-weight: 700 !important;

  line-height: 1.5 !important;
}


#ccClientDetail
.cc-timeline-item__result span {
  font-size: 8.5px !important;

  font-weight: 850 !important;
}


#ccClientDetail
.cc-timeline-item__result strong {
  font-size: 10px !important;

  font-weight: 800 !important;
}


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

#ccDrawer
.cc-drawer__header h3 {
  font-size: 16px !important;

  font-weight: 900 !important;
}


#ccDrawer
.cc-drawer__header p {
  font-size: 10px !important;

  font-weight: 700 !important;
}


#ccDrawer
.cc-drawer-summary > span {
  font-size: 9.5px !important;

  font-weight: 800 !important;
}


#ccDrawer
.cc-drawer-summary__value {
  font-size: 26px !important;

  font-weight: 900 !important;
}


/* =========================================================
   FORMULARIOS
   ========================================================= */

#ccDrawer
.cc-form-field > label,
#ccDrawer
.cc-form-field > span,
#ccModal
.cc-form-field > label,
#ccModal
.cc-form-field > span,
#ccModal
.cc-form-label {
  font-size: 9.5px !important;

  font-weight: 850 !important;
}


#ccDrawer
.cc-form input,
#ccDrawer
.cc-form select,
#ccDrawer
.cc-form textarea,
#ccModal
.cc-form input,
#ccModal
.cc-form select,
#ccModal
.cc-form textarea {
  font-size: 11.5px !important;

  font-weight: 700 !important;
}


#ccDrawer
.cc-form-help,
#ccModal
.cc-form-help {
  font-size: 9px !important;

  font-weight: 700 !important;
}


/* =========================================================
   MODALES
   ========================================================= */

#ccModal
.cc-modal__header h3 {
  font-size: 16px !important;

  font-weight: 900 !important;
}


#ccModal
.cc-modal__header p {
  font-size: 10px !important;

  font-weight: 700 !important;
}


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

#ccModal
.cc-client-picker__label,
#ccDrawer
.cc-client-picker__label {
  font-size: 9.5px !important;

  font-weight: 850 !important;
}


#ccModal
.cc-client-picker__search input,
#ccDrawer
.cc-client-picker__search input {
  font-size: 11.5px !important;

  font-weight: 700 !important;
}


#ccModal
.cc-client-picker__text strong,
#ccDrawer
.cc-client-picker__text strong {
  font-size: 11px !important;

  font-weight: 900 !important;
}


#ccModal
.cc-client-picker__text small,
#ccDrawer
.cc-client-picker__text small {
  font-size: 9px !important;

  font-weight: 700 !important;
}


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

#pageCuentaCorriente
.cc-empty > strong,
#ccClientDetail
.cc-empty > strong {
  font-size: 14px !important;

  font-weight: 900 !important;
}


#pageCuentaCorriente
.cc-empty > span,
#ccClientDetail
.cc-empty > span {
  font-size: 11px !important;

  font-weight: 700 !important;
}


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

#pageCuentaCorriente
.cc-toast__message {
  font-size: 11.5px !important;

  font-weight: 750 !important;
}


/* =========================================================
   MODO OSCURO
   MÁS CONTRASTE EN TEXTOS SECUNDARIOS
   ========================================================= */

html[data-theme="dark"]
#pageCuentaCorriente,
html[data-theme="dark"]
#ccClientDetail,
html[data-theme="dark"]
#ccDrawer,
html[data-theme="dark"]
#ccModal {
  --cc-muted: #b8b8b8 !important;
  --cc-muted-2: #969696 !important;
}


/* =========================================================
   EVITAR TEXTOS DEMASIADO FINOS
   ========================================================= */

#pageCuentaCorriente span,
#pageCuentaCorriente small,
#pageCuentaCorriente p,
#pageCuentaCorriente td,
#pageCuentaCorriente th,
#ccClientDetail span,
#ccClientDetail small,
#ccClientDetail p,
#ccClientDetail td,
#ccClientDetail th,
#ccDrawer span,
#ccDrawer small,
#ccDrawer p,
#ccModal span,
#ccModal small,
#ccModal p {
  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: auto;

  font-synthesis: none;
}


/* =========================================================
   MOBILE
   NO ACHICAR DEMASIADO
   ========================================================= */

@media (max-width: 640px) {
  #pageCuentaCorriente {
    font-size: 13px !important;
  }


  #pageCuentaCorriente
  .cc-header__title {
    font-size: 25px !important;
  }


  #pageCuentaCorriente
  .cc-table td {
    font-size: 11px !important;
  }


  #ccClientDetail
  .cc-detail-client__text h2 {
    font-size: 18px !important;
  }


  #ccClientDetail
  .cc-card__header h3 {
    font-size: 12.5px !important;
  }
}


/* =========================================================
   FIN
   TIPOGRAFÍA MÁS GRANDE + MÁS FIRME
   ========================================================= *//* =========================================================
   WIRTZ HUB · FACTURACIÓN Y COBRANZAS
   CUENTA CORRIENTE

   MOBILE RESPONSIVE REAL
   AGREGAR AL FINAL DE:

   frontend/src/pages/facturacion-cobranzas/cuenta-corriente/
   cuenta-corriente.css

   OBJETIVOS:
   - CERO scroll horizontal
   - Tabla principal convertida en cards
   - Texto más grande y firme
   - Toolbar responsive
   - Filtros responsive
   - Métricas responsive
   - Detail responsive
   - Tabs sin barra horizontal
   - Drawer responsive
   - Modal responsive
   ========================================================= */


/* =========================================================
   BASE · TIPOGRAFÍA MÁS FIRME
   ========================================================= */

.cc-page {
  --cc-text:
    #1b1f24;

  --cc-text-strong:
    #050608;

  --cc-muted:
    #434a54;

  --cc-muted-2:
    #626a75;

  font-size:
    14px;

  font-weight:
    650;
}


.cc-page strong,
.cc-detail strong,
.cc-drawer strong,
.cc-modal strong {
  font-weight:
    900;
}


/* =========================================================
   PROTECCIÓN GLOBAL CONTRA OVERFLOW
   ========================================================= */

html,
body {
  max-width:
    100%;

  overflow-x:
    hidden !important;
}


#pageCuentaCorriente,
.cc-page,
.cc-page__inner,
.cc-workspace,
.cc-panel {
  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  overflow-x:
    hidden;
}


#pageCuentaCorriente *,
#pageCuentaCorriente *::before,
#pageCuentaCorriente *::after,
.cc-detail *,
.cc-detail *::before,
.cc-detail *::after,
.cc-drawer *,
.cc-drawer *::before,
.cc-drawer *::after,
.cc-modal *,
.cc-modal *::before,
.cc-modal *::after {
  box-sizing:
    border-box;

  min-width:
    0;
}


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

@media (
  max-width:
    820px
) {

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

  #pageCuentaCorriente {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    overflow-x:
      hidden !important;
  }


  .cc-page__inner {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    gap:
      10px;

    padding:
      10px !important;

    overflow-x:
      hidden !important;
  }


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

  .cc-header {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;
  }


  .cc-header__title-row {
    width:
      100%;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      10px;
  }


  .cc-header__title-row >
  div:first-child {
    width:
      100%;

    min-width:
      0;
  }


  .cc-header__eyebrow {
    font-size:
      9px;

    font-weight:
      900;
  }


  .cc-header__title {
    font-size:
      24px;

    line-height:
      1.05;

    font-weight:
      900;
  }


  .cc-header__description {
    width:
      100%;

    max-width:
      100%;

    margin-top:
      5px;

    font-size:
      11px;

    line-height:
      1.4;

    font-weight:
      750;

    overflow-wrap:
      anywhere;
  }


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

  .cc-header__actions {
    width:
      100%;

    display:
      grid;

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

    gap:
      6px;
  }


  .cc-currency-toggle {
    width:
      100%;

    min-width:
      0;

    grid-column:
      1 /
      -1;

    display:
      grid;

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

    height:
      38px;
  }


  .cc-currency-toggle__btn {
    width:
      100%;

    min-width:
      0;

    font-size:
      10px;

    font-weight:
      900;
  }


  .cc-header__actions
  .cc-btn {
    width:
      100%;

    min-width:
      0;

    min-height:
      38px;

    padding:
      7px 6px;

    gap:
      5px;

    font-size:
      10px;

    font-weight:
      900;

    overflow:
      hidden;
  }


  .cc-header__actions
  .cc-btn span {
    min-width:
      0;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


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

  .cc-metrics {
    width:
      100%;

    max-width:
      100%;

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

    gap:
      7px;
  }


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

    min-width:
      0;

    min-height:
      78px;

    padding:
      9px;

    gap:
      8px;

    border-radius:
      8px;
  }


  .cc-metric-card__icon {
    width:
      30px;

    height:
      30px;

    flex:
      0 0 30px;
  }


  .cc-metric-card__icon svg {
    width:
      14px;

    height:
      14px;
  }


  .cc-metric-card__body {
    width:
      calc(
        100% -
        38px
      );

    min-width:
      0;
  }


  .cc-metric-card__label {
    font-size:
      9.5px;

    font-weight:
      900;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;
  }


  .cc-metric-card__value {
    width:
      100%;

    max-width:
      100%;

    font-size:
      15px;

    line-height:
      1.2;

    font-weight:
      900;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  .cc-metric-card__meta {
    font-size:
      8.5px;

    font-weight:
      750;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


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

  .cc-panel {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    overflow:
      hidden !important;
  }


  .cc-panel__header {
    min-height:
      52px;

    padding:
      9px;

    gap:
      8px;
  }


  .cc-panel__title {
    font-size:
      13px;

    font-weight:
      900;
  }


  .cc-panel__subtitle {
    font-size:
      9px;

    font-weight:
      750;
  }


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

  .cc-toolbar {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    padding:
      8px;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      7px;

    overflow:
      hidden;
  }


  .cc-search {
    width:
      100%;

    max-width:
      none;

    min-width:
      0;

    flex:
      none;
  }


  .cc-search input {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    height:
      39px;

    font-size:
      11px;

    font-weight:
      800;
  }


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

  .cc-toolbar__filters {
    width:
      100%;

    min-width:
      0;

    display:
      grid;

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

    gap:
      6px;
  }


  .cc-select-wrap {
    width:
      100%;

    min-width:
      0;
  }


  .cc-select-wrap >
  span {
    font-size:
      8.5px;

    font-weight:
      900;
  }


  .cc-select-wrap select {
    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

    height:
      37px;

    font-size:
      10px;

    font-weight:
      800;
  }


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

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

    max-width:
      100%;

    padding:
      8px;

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

    gap:
      7px;

    overflow:
      hidden;
  }


  .cc-advanced-filters >
  label {
    width:
      100%;

    min-width:
      0;
  }


  .cc-advanced-filters >
  label >
  span {
    font-size:
      8.5px;

    font-weight:
      900;
  }


  .cc-advanced-filters input,
  .cc-advanced-filters select {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    height:
      37px;

    font-size:
      10px;

    font-weight:
      800;
  }


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

    grid-column:
      1 /
      -1;
  }


  .cc-advanced-filters__actions
  .cc-btn {
    width:
      100%;
  }


  /* =======================================================
     QUITAR COMPLETAMENTE SCROLL HORIZONTAL
     ======================================================= */

  #pageCuentaCorriente
  .cc-panel--clients
  .cc-table-shell,
  .cc-table-shell {
    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    overflow-x:
      hidden !important;

    overflow-y:
      visible !important;

    scrollbar-width:
      none !important;

    overscroll-behavior-x:
      none;
  }


  .cc-table-shell::-webkit-scrollbar {
    display:
      none !important;

    width:
      0 !important;

    height:
      0 !important;
  }


  /* =======================================================
     TABLA PRINCIPAL -> CARDS
     ======================================================= */

  .cc-table--clients {
    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    display:
      block;

    table-layout:
      fixed;

    border-collapse:
      separate;

    border-spacing:
      0;

    background:
      transparent;
  }


  .cc-table--clients thead {
    display:
      none;
  }


  .cc-table--clients tbody {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    display:
      flex;

    flex-direction:
      column;

    gap:
      8px;

    padding:
      8px;

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


  .cc-table--clients
  .cc-table-row {
    position:
      relative;

    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    display:
      grid;

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

    overflow:
      hidden;

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

    border-radius:
      8px;

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


  /* =======================================================
     ANULAR STICKY VIEJO
     ======================================================= */

  .cc-table--clients
  th:first-child,
  .cc-table--clients
  td:first-child {
    position:
      relative !important;

    left:
      auto !important;

    z-index:
      auto !important;
  }


  .cc-table--clients
  th:first-child::after,
  .cc-table--clients
  td:first-child::after {
    display:
      none !important;
  }


  /* =======================================================
     CELDAS
     ======================================================= */

  .cc-table--clients
  .cc-table-row >
  td {
    position:
      relative !important;

    width:
      auto !important;

    max-width:
      100%;

    min-width:
      0;

    min-height:
      62px;

    padding:
      28px 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(
        --cc-border
      ) !important;

    border-bottom:
      1px solid var(
        --cc-border
      ) !important;

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

    text-align:
      left !important;

    white-space:
      normal !important;
  }


  .cc-table--clients
  .cc-table-row >
  td:nth-child(
    even
  ) {
    border-right:
      0 !important;
  }


  /* =======================================================
     LABELS
     ======================================================= */

  .cc-table--clients
  .cc-table-row >
  td::before {
    position:
      absolute;

    top:
      8px;

    left:
      9px;

    right:
      9px;

    height:
      11px;

    display:
      block;

    overflow:
      hidden;

    color:
      var(
        --cc-muted
      );

    font-size:
      7.5px;

    line-height:
      11px;

    font-weight:
      900;

    letter-spacing:
      0.06em;

    text-transform:
      uppercase;

    white-space:
      nowrap;

    text-overflow:
      ellipsis;

    pointer-events:
      none;
  }


  .cc-table--clients
  .cc-table-row >
  td:nth-child(
    1
  )::before {
    content:
      "Cliente";
  }


  .cc-table--clients
  .cc-table-row >
  td:nth-child(
    2
  )::before {
    content:
      "Deuda";
  }


  .cc-table--clients
  .cc-table-row >
  td:nth-child(
    3
  )::before {
    content:
      "Vencida";
  }


  .cc-table--clients
  .cc-table-row >
  td:nth-child(
    4
  )::before {
    content:
      "Crédito";
  }


  .cc-table--clients
  .cc-table-row >
  td:nth-child(
    5
  )::before {
    content:
      "Riesgo";
  }


  .cc-table--clients
  .cc-table-row >
  td:nth-child(
    6
  )::before {
    content:
      "Último pago";
  }


  .cc-table--clients
  .cc-table-row >
  td:nth-child(
    7
  )::before {
    content:
      "Acciones";
  }


  /* =======================================================
     CLIENTE · FULL WIDTH
     ======================================================= */

  .cc-table--clients
  .cc-table-row >
  td:nth-child(
    1
  ) {
    grid-column:
      1 /
      -1;

    min-height:
      76px;

    border-right:
      0 !important;
  }


  .cc-client-cell {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    gap:
      8px;
  }


  .cc-client-avatar {
    width:
      31px;

    height:
      31px;

    min-width:
      31px;

    flex:
      0 0 31px;

    font-size:
      11px;

    font-weight:
      900;
  }


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

    max-width:
      calc(
        100% -
        39px
      );

    flex:
      1;
  }


  .cc-client-cell__name {
    width:
      100%;

    max-width:
      100%;

    font-size:
      11px;

    line-height:
      1.25;

    font-weight:
      900;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  .cc-client-cell__legal {
    width:
      100%;

    max-width:
      100%;

    font-size:
      9px;

    font-weight:
      750;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  .cc-client-cell__meta {
    width:
      100%;

    max-width:
      100%;

    flex-wrap:
      wrap;

    overflow:
      visible;
  }


  .cc-client-cell__meta
  span {
    max-width:
      100%;

    font-size:
      8px;

    font-weight:
      750;

    white-space:
      normal;
  }


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

  .cc-money {
    width:
      100%;

    max-width:
      100%;

    font-size:
      11px;

    line-height:
      1.25;

    font-weight:
      900;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }


  .cc-value-stack {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;
  }


  .cc-value-stack >
  strong,
  .cc-value-stack >
  span {
    font-size:
      10.5px;

    font-weight:
      900;
  }


  .cc-value-stack >
  small {
    font-size:
      8.5px;

    font-weight:
      750;
  }


  /* =======================================================
     CRÉDITO
     ======================================================= */

  .cc-credit-cell {
    width:
      100%;

    min-width:
      0;
  }


  .cc-credit-cell >
  strong {
    width:
      100%;

    max-width:
      100%;

    font-size:
      10.5px;

    font-weight:
      900;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }


  .cc-credit-cell >
  small {
    font-size:
      8px;

    font-weight:
      750;
  }


  .cc-progress {
    width:
      100%;

    max-width:
      100%;
  }


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

  .cc-badge {
    max-width:
      100%;

    min-height:
      22px;

    padding:
      4px 7px;

    font-size:
      8.5px;

    font-weight:
      900;
  }


  /* =======================================================
     ACCIONES
     ======================================================= */

  .cc-table--clients
  .cc-table-row >
  td:nth-child(
    7
  ) {
    min-height:
      62px;

    align-items:
      flex-start;

    justify-content:
      flex-start;
  }


  .cc-table--clients
  .cc-col-actions {
    width:
      auto !important;

    text-align:
      left !important;
  }


  .cc-icon-btn--row {
    width:
      31px;

    height:
      31px;

    min-width:
      31px;

    flex:
      0 0 31px;
  }


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

  .cc-pagination {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    min-height:
      48px;

    padding:
      8px;

    gap:
      6px;

    overflow:
      hidden;
  }


  .cc-pagination__info {
    min-width:
      0;

    flex:
      1;

    font-size:
      9px;

    font-weight:
      750;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  .cc-pagination__current {
    min-width:
      76px;

    font-size:
      8.5px;

    font-weight:
      750;
  }


  .cc-pagination__actions {
    flex:
      0 0 auto;

    gap:
      4px;
  }


  .cc-pagination__actions
  .cc-icon-btn {
    width:
      30px;

    height:
      30px;

    min-width:
      30px;
  }


  /* =======================================================
     DETAIL OVERLAY
     ======================================================= */

  #ccClientDetail,
  .cc-detail-overlay {
    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    overflow-x:
      hidden !important;
  }


  #ccClientDetail
  .cc-detail,
  .cc-detail-overlay
  .cc-detail {
    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    left:
      0 !important;

    right:
      0 !important;

    overflow-x:
      hidden !important;
  }


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

  .cc-detail__header {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    padding:
      9px;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      8px;
  }


  .cc-detail__header-main {
    width:
      100%;

    min-width:
      0;
  }


  .cc-detail-client {
    width:
      100%;

    min-width:
      0;
  }


  .cc-detail-client__avatar {
    width:
      34px;

    height:
      34px;

    flex:
      0 0 34px;

    font-size:
      12px;
  }


  .cc-detail-client__text {
    min-width:
      0;

    flex:
      1;
  }


  .cc-detail-client__text
  h2 {
    width:
      100%;

    max-width:
      100%;

    font-size:
      16px;

    font-weight:
      900;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  .cc-detail-client__eyebrow {
    font-size:
      8px;

    font-weight:
      900;
  }


  .cc-detail-client__meta {
    width:
      100%;

    max-width:
      100%;

    flex-wrap:
      wrap;
  }


  .cc-detail-client__meta
  span {
    max-width:
      100%;

    font-size:
      8.5px;

    font-weight:
      750;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


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

  .cc-detail__header-actions {
    width:
      100%;

    display:
      grid;

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

    gap:
      5px;
  }


  .cc-detail__header-actions
  .cc-btn,
  .cc-detail__header-actions
  .cc-icon-btn {
    width:
      100%;

    min-width:
      0;
  }


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

  .cc-detail__summary {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    padding:
      8px;

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

    gap:
      6px;

    overflow:
      hidden;
  }


  .cc-detail-stat {
    width:
      100%;

    min-width:
      0;

    min-height:
      68px;

    padding:
      8px;
  }


  .cc-detail-stat >
  span {
    font-size:
      8.5px;

    font-weight:
      900;
  }


  .cc-detail-stat >
  strong {
    width:
      100%;

    max-width:
      100%;

    font-size:
      12px;

    line-height:
      1.2;

    font-weight:
      900;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  .cc-detail-stat >
  small {
    font-size:
      8px;

    font-weight:
      750;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  /* =======================================================
     DETAIL TABS
     SIN BARRA HORIZONTAL
     ======================================================= */

  .cc-detail-tabs {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    min-height:
      auto;

    padding:
      5px;

    display:
      grid;

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

    gap:
      4px;

    overflow-x:
      hidden !important;

    overflow-y:
      visible !important;

    scrollbar-width:
      none !important;
  }


  .cc-detail-tabs::-webkit-scrollbar {
    display:
      none !important;

    width:
      0 !important;

    height:
      0 !important;
  }


  .cc-detail-tab {
    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

    min-height:
      34px;

    padding:
      0 4px;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    gap:
      4px;

    overflow:
      hidden;

    font-size:
      8px;

    font-weight:
      850;

    white-space:
      nowrap;
  }


  .cc-detail-tab svg {
    width:
      13px;

    height:
      13px;

    flex:
      0 0 13px;
  }


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

  .cc-detail__content {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    padding:
      8px;

    overflow-x:
      hidden !important;
  }


  /* =======================================================
     TAB GRID
     ======================================================= */

  .cc-tab-grid {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    grid-template-columns:
      1fr;

    gap:
      7px;
  }


  .cc-card,
  .cc-card--wide,
  .cc-card--full {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    grid-column:
      1 /
      -1;
  }


  .cc-card__header {
    min-height:
      50px;

    padding:
      9px;

    gap:
      8px;
  }


  .cc-card__header
  h3 {
    font-size:
      11px;

    font-weight:
      900;
  }


  .cc-card__header
  p {
    font-size:
      9px;

    font-weight:
      750;

    overflow-wrap:
      anywhere;
  }


  /* =======================================================
     AGING
     ======================================================= */

  .cc-aging {
    padding:
      7px;
  }


  .cc-aging__item {
    min-height:
      38px;

    gap:
      8px;
  }


  .cc-aging__label {
    min-width:
      0;

    font-size:
      9px;

    font-weight:
      800;
  }


  .cc-aging__item >
  strong {
    font-size:
      9.5px;

    font-weight:
      900;

    white-space:
      normal;

    text-align:
      right;
  }


  /* =======================================================
     KV
     ======================================================= */

  .cc-kv-grid {
    width:
      100%;

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

    gap:
      5px;
  }


  .cc-kv {
    min-width:
      0;

    min-height:
      55px;
  }


  .cc-kv >
  span {
    font-size:
      8px;

    font-weight:
      900;
  }


  .cc-kv >
  strong {
    width:
      100%;

    max-width:
      100%;

    font-size:
      9.5px;

    font-weight:
      900;

    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      clip;

    overflow-wrap:
      anywhere;
  }


  /* =======================================================
     MINI LISTS
     ======================================================= */

  .cc-mini-list__item {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

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

    gap:
      7px;
  }


  .cc-mini-list__content
  strong {
    font-size:
      9.5px;

    font-weight:
      900;
  }


  .cc-mini-list__content
  small {
    font-size:
      8px;

    font-weight:
      750;
  }


  .cc-mini-list__value {
    max-width:
      120px;

    font-size:
      9.5px;

    font-weight:
      900;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }


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

  .cc-drawer-overlay {
    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    overflow-x:
      hidden !important;
  }


  .cc-drawer {
    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    right:
      0 !important;

    left:
      0 !important;

    overflow-x:
      hidden !important;
  }


  .cc-drawer__body {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    overflow-x:
      hidden !important;
  }


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

  .cc-modal-overlay {
    width:
      100%;

    max-width:
      100%;

    overflow-x:
      hidden !important;
  }


  .cc-modal {
    width:
      calc(
        100% -
        12px
      ) !important;

    max-width:
      calc(
        100% -
        12px
      ) !important;

    min-width:
      0 !important;

    margin:
      6px !important;

    overflow-x:
      hidden !important;
  }


  .cc-modal__body {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    overflow-x:
      hidden !important;
  }


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

  .cc-page input,
  .cc-page select,
  .cc-page textarea,
  .cc-detail input,
  .cc-detail select,
  .cc-detail textarea,
  .cc-drawer input,
  .cc-drawer select,
  .cc-drawer textarea,
  .cc-modal input,
  .cc-modal select,
  .cc-modal textarea {
    max-width:
      100%;

    min-width:
      0;

    font-size:
      11px;

    font-weight:
      750;
  }


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

  .cc-toast-container {
    top:
      58px;

    right:
      7px;

    left:
      7px;

    width:
      auto;

    max-width:
      none;
  }


  .cc-toast__message {
    font-size:
      10px;

    font-weight:
      800;
  }
}


/* =========================================================
   TELÉFONOS
   ========================================================= */

@media (
  max-width:
    560px
) {

  .cc-page__inner {
    padding:
      7px !important;
  }


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

  .cc-header__title {
    font-size:
      22px;
  }


  .cc-header__description {
    font-size:
      10px;
  }


  /* =======================================================
     MÉTRICAS UNA POR FILA
     ======================================================= */

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


  .cc-metric-card {
    min-height:
      66px;

    padding:
      8px;
  }


  .cc-metric-card__body {
    display:
      grid;

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

    grid-template-rows:
      auto
      auto;

    column-gap:
      8px;

    row-gap:
      2px;

    align-items:
      center;
  }


  .cc-metric-card__label {
    grid-column:
      1;

    grid-row:
      1;
  }


  .cc-metric-card__value {
    grid-column:
      2;

    grid-row:
      1 /
      3;

    max-width:
      170px;

    text-align:
      right;

    font-size:
      14px;
  }


  .cc-metric-card__meta {
    grid-column:
      1;

    grid-row:
      2;
  }


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

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


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


  .cc-advanced-filters__actions {
    grid-column:
      1;
  }


  /* =======================================================
     CARDS TABLA
     ======================================================= */

  .cc-table--clients
  tbody {
    padding:
      7px;

    gap:
      7px;
  }


  .cc-table--clients
  .cc-table-row >
  td {
    min-height:
      60px;

    padding:
      27px 8px 8px !important;
  }


  .cc-table--clients
  .cc-table-row >
  td::before {
    top:
      8px;

    left:
      8px;

    right:
      8px;

    font-size:
      7px;
  }


  .cc-table--clients
  .cc-table-row >
  td:nth-child(
    1
  ) {
    min-height:
      74px;
  }


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

  .cc-detail__summary {
    grid-template-columns:
      1fr;
  }


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

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


  .cc-detail-tab {
    min-height:
      35px;

    padding:
      0 5px;

    font-size:
      8.5px;
  }


  /* IMPORTANTE:
     anulamos la regla vieja que ocultaba
     el texto de los tabs */

  .cc-detail-tab span {
    display:
      inline !important;

    min-width:
      0;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  /* =======================================================
     KV
     ======================================================= */

  .cc-kv-grid {
    grid-template-columns:
      1fr;
  }


  /* =======================================================
     MINI LIST
     ======================================================= */

  .cc-mini-list__item {
    grid-template-columns:
      28px
      minmax(
        0,
        1fr
      );
  }


  .cc-mini-list__value {
    grid-column:
      2;

    max-width:
      100%;

    text-align:
      left;
  }


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

  .cc-pagination {
    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      7px;
  }


  .cc-pagination__info {
    width:
      100%;

    text-align:
      center;
  }


  .cc-pagination__actions {
    width:
      100%;

    justify-content:
      center;
  }
}


/* =========================================================
   TELÉFONOS MUY PEQUEÑOS
   ========================================================= */

@media (
  max-width:
    390px
) {

  .cc-page__inner {
    padding:
      5px !important;
  }


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

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


  .cc-header__actions
  .cc-btn span {
    display:
      none;
  }


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


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

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


  /* =======================================================
     TABLA UNA COLUMNA
     ======================================================= */

  .cc-table--clients
  .cc-table-row {
    grid-template-columns:
      1fr;
  }


  .cc-table--clients
  .cc-table-row >
  td,
  .cc-table--clients
  .cc-table-row >
  td:nth-child(
    odd
  ),
  .cc-table--clients
  .cc-table-row >
  td:nth-child(
    even
  ) {
    grid-column:
      1 /
      -1;

    border-right:
      0 !important;
  }


  .cc-table--clients
  .cc-table-row >
  td:last-child {
    border-bottom:
      0 !important;
  }


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

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


  .cc-detail-tab {
    justify-content:
      flex-start;

    padding:
      0 10px;
  }


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

  .cc-metric-card__value {
    max-width:
      145px;

    font-size:
      12px;
  }
}


/* =========================================================
   DARK MODE
   MENOS BLANCO PURO
   ========================================================= */

html.dark
.cc-page,
body.dark
.cc-page,
[data-theme="dark"]
.cc-page,
.dark-mode
.cc-page {
  --cc-text:
    #d5d5d5;

  --cc-text-strong:
    #f1f1f1;

  --cc-muted:
    #b0b0b0;

  --cc-muted-2:
    #8c8c8c;
}


html.dark
.cc-detail,
html.dark
.cc-drawer,
html.dark
.cc-modal,
body.dark
.cc-detail,
body.dark
.cc-drawer,
body.dark
.cc-modal,
[data-theme="dark"]
.cc-detail,
[data-theme="dark"]
.cc-drawer,
[data-theme="dark"]
.cc-modal {
  --cc-text:
    #d5d5d5;

  --cc-text-strong:
    #f1f1f1;

  --cc-muted:
    #b0b0b0;

  --cc-muted-2:
    #8c8c8c;
}


/* =========================================================
   ÚLTIMA PROTECCIÓN
   ========================================================= */

@media (
  max-width:
    820px
) {

  #pageCuentaCorriente,
  #pageCuentaCorriente section,
  #pageCuentaCorriente article,
  #pageCuentaCorriente div,
  #pageCuentaCorriente form,
  #pageCuentaCorriente header,
  #pageCuentaCorriente footer,
  #pageCuentaCorriente aside,
  .cc-detail,
  .cc-detail section,
  .cc-detail article,
  .cc-detail div,
  .cc-drawer,
  .cc-drawer section,
  .cc-drawer article,
  .cc-drawer div,
  .cc-modal,
  .cc-modal section,
  .cc-modal article,
  .cc-modal div {
    max-width:
      100%;
  }


  #pageCuentaCorriente img,
  .cc-detail img,
  .cc-drawer img,
  .cc-modal img {
    max-width:
      100%;

    height:
      auto;
  }


  .cc-table-shell,
  .cc-detail-tabs,
  .cc-detail__content,
  .cc-drawer__body,
  .cc-modal__body {
    scrollbar-width:
      none !important;
  }


  .cc-table-shell::-webkit-scrollbar,
  .cc-detail-tabs::-webkit-scrollbar,
  .cc-detail__content::-webkit-scrollbar,
  .cc-drawer__body::-webkit-scrollbar,
  .cc-modal__body::-webkit-scrollbar {
    width:
      0 !important;

    height:
      0 !important;

    display:
      none !important;
  }
}