/* =========================================================
   HUB NEURO APRENDIZAJE INFANTIL
   VENTAS · CUENTAS CORRIENTES

   UBICACIÓN:
   frontend/src/pages/ventas/cuentas-corrientes/
   cuentas-corrientes.css

   PARTE 1 DE 4

   - TOKENS
   - BASE
   - PAGE
   - HEADER
   - BOTONES
   - TABS PRINCIPALES
   - MÉTRICAS
   - TOOLBAR
   - FILTROS
   - TABLA PRINCIPAL
   - PAGINACIÓN
   ========================================================= */


/* =========================================================
   TOKENS · MODO CLARO
   ========================================================= */

.cc-page {
  --cc-bg:
    #f6f7f5;

  --cc-surface:
    #ffffff;

  --cc-surface-2:
    #f2f3f1;

  --cc-surface-3:
    #e9ece7;

  --cc-surface-hover:
    #f7f8f6;

  --cc-surface-active:
    #ecefea;

  --cc-border:
    #d8ddd5;

  --cc-border-strong:
    #c5cbc2;

  --cc-border-dark:
    #aeb6aa;

  --cc-text:
    #1b1e1a;

  --cc-text-strong:
    #090b09;

  --cc-text-soft:
    #464c44;

  --cc-muted:
    #6a7267;

  --cc-muted-2:
    #879083;

  --cc-black:
    #080908;

  --cc-white:
    #ffffff;

  --cc-success:
    #166534;

  --cc-success-bg:
    #ecfdf3;

  --cc-success-border:
    #bbf7d0;

  --cc-warning:
    #92400e;

  --cc-warning-bg:
    #fff7ed;

  --cc-warning-border:
    #fed7aa;

  --cc-danger:
    #b42318;

  --cc-danger-dark:
    #8f1710;

  --cc-danger-bg:
    #fff1f0;

  --cc-danger-border:
    #fecaca;

  --cc-info:
    #374151;

  --cc-info-bg:
    #f3f4f6;

  --cc-info-border:
    #d1d5db;

  --cc-credit:
    #166534;

  --cc-credit-bg:
    #eefbf2;

  --cc-debit:
    #9f1239;

  --cc-debit-bg:
    #fff1f4;

  --cc-radius-sm:
    8px;

  --cc-radius-md:
    12px;

  --cc-radius-lg:
    16px;

  --cc-radius-xl:
    20px;

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

  --cc-shadow-panel:
    0 10px 30px rgba(0, 0, 0, 0.08);

  width:
    100%;

  min-width:
    0;

  max-width:
    none;

  margin:
    0;

  padding:
    0;

  display:
    grid;

  gap:
    18px;

  color:
    var(--cc-text);

  overflow-x:
    hidden;
}


/* =========================================================
   TOKENS · MODO OSCURO
   ========================================================= */

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

  --cc-surface:
    #0b0b0b;

  --cc-surface-2:
    #101010;

  --cc-surface-3:
    #151515;

  --cc-surface-hover:
    #121212;

  --cc-surface-active:
    #181818;

  --cc-border:
    #242424;

  --cc-border-strong:
    #323232;

  --cc-border-dark:
    #424242;

  --cc-text:
    #e9e9e9;

  --cc-text-strong:
    #ffffff;

  --cc-text-soft:
    #c4c4c4;

  --cc-muted:
    #949494;

  --cc-muted-2:
    #747474;

  --cc-black:
    #000000;

  --cc-white:
    #ffffff;

  --cc-success:
    #86efac;

  --cc-success-bg:
    #0d1a11;

  --cc-success-border:
    #204c2c;

  --cc-warning:
    #fdba74;

  --cc-warning-bg:
    #1d1309;

  --cc-warning-border:
    #543515;

  --cc-danger:
    #fca5a5;

  --cc-danger-dark:
    #fecaca;

  --cc-danger-bg:
    #1d0b0b;

  --cc-danger-border:
    #572323;

  --cc-info:
    #d1d5db;

  --cc-info-bg:
    #111111;

  --cc-info-border:
    #303030;

  --cc-credit:
    #86efac;

  --cc-credit-bg:
    #0b1810;

  --cc-debit:
    #fda4af;

  --cc-debit-bg:
    #1a0c10;

  --cc-shadow:
    none;

  --cc-shadow-panel:
    0 18px 42px rgba(0, 0, 0, 0.42);
}


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

.cc-page,
.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 button,
.cc-page select {
  cursor:
    pointer;
}


.cc-page input,
.cc-page textarea,
.cc-page select {
  color:
    var(--cc-text-strong);
}


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

  opacity:
    1;
}


.cc-page button:focus-visible,
.cc-page input:focus-visible,
.cc-page select:focus-visible,
.cc-page textarea:focus-visible {
  outline:
    2px solid var(--cc-text-strong);

  outline-offset:
    2px;
}


.cc-page svg {
  display:
    block;

  flex:
    0 0 auto;
}


/* =========================================================
   MOUNTS
   ========================================================= */

.cuentas-corrientes-page-mount,
.ventas-cuentas-corrientes-page-mount {
  width:
    100%;

  min-width:
    0;

  max-width:
    none;
}


.cc-metrics-mount,
.cc-accounts-mount,
.cc-drawer-mount,
.cc-modal-mount {
  width:
    100%;

  min-width:
    0;
}


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

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

  min-width:
    0;

  padding:
    4px 0 20px;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    24px;

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


.cc-page-header__copy {
  min-width:
    0;

  display:
    grid;

  gap:
    5px;
}


.cc-page-header__eyebrow {
  display:
    block;

  color:
    var(--cc-muted);

  font-size:
    10px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    1.1px;

  text-transform:
    uppercase;
}


.cc-page-header__title {
  margin:
    0;

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

  font-size:
    clamp(
      25px,
      2vw,
      31px
    );

  line-height:
    1.08;

  font-weight:
    800;

  letter-spacing:
    -1px;
}


.cc-page-header__description {
  max-width:
    720px;

  margin:
    3px 0 0;

  color:
    var(--cc-muted);

  font-size:
    13px;

  line-height:
    1.55;

  font-weight:
    550;
}


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

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;
}


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

.cc-button {
  min-height:
    40px;

  padding:
    0 14px;

  border:
    1px solid transparent;

  border-radius:
    9px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    750;

  white-space:
    nowrap;

  text-decoration:
    none;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}


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


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


.cc-button:disabled {
  opacity:
    0.55;

  cursor:
    not-allowed;
}


.cc-button--primary {
  color:
    #ffffff;

  background:
    #0a0a0a;

  border-color:
    #0a0a0a;
}


.cc-button--primary:hover:not(:disabled) {
  color:
    #ffffff;

  background:
    #202020;

  border-color:
    #202020;
}


html[data-theme="dark"] .cc-button--primary,
body[data-theme="dark"] .cc-button--primary,
[data-theme="dark"] .cc-button--primary {
  color:
    #050505;

  background:
    #f5f5f5;

  border-color:
    #f5f5f5;
}


html[data-theme="dark"] .cc-button--primary:hover:not(:disabled),
body[data-theme="dark"] .cc-button--primary:hover:not(:disabled),
[data-theme="dark"] .cc-button--primary:hover:not(:disabled) {
  color:
    #000000;

  background:
    #ffffff;

  border-color:
    #ffffff;
}


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

  background:
    var(--cc-surface);

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


.cc-button--secondary:hover:not(:disabled) {
  color:
    var(--cc-text-strong);

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

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


.cc-button--compact {
  min-height:
    34px;

  padding:
    0 11px;

  font-size:
    11px;
}


.cc-icon-button {
  width:
    34px;

  height:
    34px;

  padding:
    0;

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

  border-radius:
    8px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

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

  background:
    var(--cc-surface);

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}


.cc-icon-button:hover:not(:disabled) {
  color:
    var(--cc-text-strong);

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

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

  transform:
    translateY(-1px);
}


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


.cc-icon-button:disabled {
  opacity:
    0.4;

  cursor:
    not-allowed;
}


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

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

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


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

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

  min-width:
    0;

  padding:
    4px;

  display:
    grid;

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

  gap:
    4px;

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

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

  border-radius:
    11px;
}


.cc-type-tab {
  min-width:
    0;

  min-height:
    43px;

  padding:
    0 16px;

  border:
    1px solid transparent;

  border-radius:
    8px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  color:
    var(--cc-muted);

  background:
    transparent;

  font-size:
    12px;

  font-weight:
    750;

  transition:
    color 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease,
    transform 140ms ease;
}


.cc-type-tab:hover {
  color:
    var(--cc-text-strong);

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


.cc-type-tab.is-active {
  color:
    var(--cc-text-strong);

  background:
    var(--cc-surface);

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

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


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

.cc-metrics {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    10px;
}


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

  min-height:
    122px;

  padding:
    16px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    9px;

  background:
    var(--cc-surface);

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

  border-radius:
    12px;

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

  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background-color 140ms ease;
}


.cc-metric-card:hover {
  transform:
    translateY(-1px);

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


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


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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


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

  color:
    var(--cc-muted);

  font-size:
    10px;

  line-height:
    1.25;

  font-weight:
    800;

  letter-spacing:
    0.55px;

  text-transform:
    uppercase;
}


.cc-metric-card__icon {
  width:
    30px;

  height:
    30px;

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

  border-radius:
    8px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

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

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


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

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

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


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

  overflow-wrap:
    anywhere;

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

  font-size:
    clamp(
      20px,
      1.8vw,
      26px
    );

  line-height:
    1.08;

  font-weight:
    800;

  letter-spacing:
    -0.7px;
}


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


.cc-metric-card__detail {
  color:
    var(--cc-muted);

  font-size:
    11px;

  line-height:
    1.35;

  font-weight:
    600;
}


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

.cc-toolbar {
  width:
    100%;

  min-width:
    0;

  padding:
    12px;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    12px;

  background:
    var(--cc-surface);

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

  border-radius:
    12px;
}


.cc-toolbar__search {
  position:
    relative;

  width:
    min(100%, 420px);

  min-width:
    220px;

  flex:
    1 1 340px;
}


.cc-toolbar__search-icon {
  position:
    absolute;

  top:
    50%;

  left:
    12px;

  z-index:
    1;

  color:
    var(--cc-muted);

  pointer-events:
    none;

  transform:
    translateY(-50%);
}


.cc-toolbar__search-input {
  width:
    100%;

  height:
    40px;

  padding:
    0 38px;

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

  border-radius:
    9px;

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

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

  font-size:
    12px;

  font-weight:
    600;

  transition:
    border-color 140ms ease,
    background-color 140ms ease;
}


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


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

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


.cc-toolbar__search-clear {
  position:
    absolute;

  top:
    50%;

  right:
    8px;

  width:
    27px;

  height:
    27px;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--cc-muted);

  background:
    transparent;

  transform:
    translateY(-50%);
}


.cc-toolbar__search-clear:hover {
  color:
    var(--cc-text-strong);

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


.cc-toolbar__filters {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;
}


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

.cc-field {
  min-width:
    0;

  display:
    grid;

  gap:
    6px;
}


.cc-field--compact {
  min-width:
    118px;
}


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

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    0.55px;

  text-transform:
    uppercase;
}


.cc-field__control {
  width:
    100%;

  min-width:
    0;

  min-height:
    40px;

  padding:
    0 11px;

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

  border-radius:
    8px;

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

  background:
    var(--cc-surface);

  font-size:
    12px;

  line-height:
    1.4;

  font-weight:
    600;

  transition:
    border-color 140ms ease,
    background-color 140ms ease;
}


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


.cc-field__control:focus {
  border-color:
    var(--cc-border-dark);
}


.cc-field__control--with-icon {
  padding-left:
    36px;
}


.cc-field__textarea {
  min-height:
    100px;

  padding:
    10px 11px;

  resize:
    vertical;
}


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

.cc-field select.cc-field__control {
  appearance:
    none;

  -webkit-appearance:
    none;

  padding-right:
    34px;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--cc-muted) 50%
    ),
    linear-gradient(
      135deg,
      var(--cc-muted) 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 15px) 17px,
    calc(100% - 11px) 17px;

  background-size:
    4px 4px,
    4px 4px;

  background-repeat:
    no-repeat;
}


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

.cc-list-card {
  width:
    100%;

  min-width:
    0;

  overflow:
    hidden;

  background:
    var(--cc-surface);

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

  border-radius:
    12px;
}


.cc-list-card__header {
  min-height:
    70px;

  padding:
    14px 16px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

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


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

  display:
    grid;

  gap:
    3px;
}


.cc-list-card__eyebrow {
  color:
    var(--cc-muted);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.8px;

  text-transform:
    uppercase;
}


.cc-list-card__title {
  margin:
    0;

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

  font-size:
    18px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    -0.35px;
}


.cc-list-card__count {
  flex:
    0 0 auto;

  color:
    var(--cc-muted);

  font-size:
    11px;

  font-weight:
    650;
}


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

.cc-table-wrap {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    visible;

  scrollbar-width:
    thin;

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


.cc-table-wrap::-webkit-scrollbar {
  height:
    6px;
}


.cc-table-wrap::-webkit-scrollbar-track {
  background:
    transparent;
}


.cc-table-wrap::-webkit-scrollbar-thumb {
  background:
    var(--cc-border-strong);

  border-radius:
    999px;
}


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

.cc-table {
  width:
    100%;

  min-width:
    850px;

  border-collapse:
    collapse;

  border-spacing:
    0;

  table-layout:
    auto;
}


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


.cc-table th {
  height:
    39px;

  padding:
    0 14px;

  color:
    var(--cc-muted);

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

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    0.55px;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


.cc-table td {
  min-width:
    0;

  padding:
    11px 14px;

  color:
    var(--cc-text);

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

  font-size:
    12px;

  line-height:
    1.4;

  font-weight:
    550;

  vertical-align:
    middle;
}


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


.cc-table__row {
  transition:
    background-color 120ms ease;
}


.cc-table__row:hover {
  background:
    var(--cc-surface-hover);
}


.cc-table__money {
  text-align:
    right;

  white-space:
    nowrap;
}


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

  font-weight:
    750;
}


/* =========================================================
   ACCOUNT CELL
   ========================================================= */

.cc-account-cell {
  width:
    100%;

  min-width:
    0;

  padding:
    0;

  border:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  color:
    inherit;

  background:
    transparent;

  text-align:
    left;
}


.cc-account-cell__avatar {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

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

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

  border-radius:
    9px;
}


.cc-account-cell__content {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.cc-account-cell__name {
  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    12px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.cc-account-cell__meta {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  overflow:
    hidden;

  color:
    var(--cc-muted);

  font-size:
    10px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

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

  padding:
    0 8px;

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

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--cc-muted);

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

  font-size:
    9px;

  line-height:
    1;

  font-weight:
    800;

  letter-spacing:
    0.25px;

  white-space:
    nowrap;
}


.cc-status.is-active,
.cc-status.is-ok {
  color:
    var(--cc-success);

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

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


.cc-status.is-warning,
.cc-status.is-pending {
  color:
    var(--cc-warning);

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

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


.cc-status.is-overdue {
  color:
    var(--cc-danger);

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

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


.cc-status.is-credit {
  color:
    var(--cc-credit);

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

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


.cc-status.is-neutral,
.cc-status.is-draft {
  color:
    var(--cc-muted);

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

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


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

.cc-row-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    5px;

  white-space:
    nowrap;
}


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

.cc-money-danger {
  color:
    var(--cc-danger);

  font-weight:
    750;
}


.cc-money-positive {
  color:
    var(--cc-success);

  font-weight:
    750;
}


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

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

  padding:
    36px 20px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


.cc-empty__icon {
  width:
    46px;

  height:
    46px;

  margin-bottom:
    12px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--cc-muted);

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

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

  border-radius:
    12px;
}


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

  font-size:
    14px;

  line-height:
    1.3;

  font-weight:
    800;
}


.cc-empty__text {
  max-width:
    400px;

  margin:
    6px 0 16px;

  color:
    var(--cc-muted);

  font-size:
    12px;

  line-height:
    1.55;

  font-weight:
    550;
}


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

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

  padding:
    10px 14px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

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


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

  font-size:
    11px;

  font-weight:
    600;
}


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

  font-weight:
    800;
}


.cc-pagination__actions {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}


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

.cc-skeleton {
  position:
    relative;

  display:
    block;

  overflow:
    hidden;

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

  border-radius:
    6px;
}


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

  position:
    absolute;

  inset:
    0;

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

  transform:
    translateX(-100%);

  animation:
    cc-skeleton-slide
    1.25s
    ease-in-out
    infinite;
}


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


.cc-skeleton--metric {
  width:
    118px;

  height:
    26px;
}


.cc-skeleton--line {
  width:
    82px;

  height:
    10px;
}


.cc-skeleton--wide {
  width:
    150px;
}


.cc-skeleton--small {
  width:
    54px;
}


.cc-skeleton--title {
  width:
    220px;

  height:
    22px;
}


@keyframes cc-skeleton-slide {

  100% {
    transform:
      translateX(100%);
  }

}


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

@media (
  max-width: 1200px
) {

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


  .cc-toolbar {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .cc-toolbar__search {
    width:
      100%;

    max-width:
      none;
  }


  .cc-toolbar__filters {
    justify-content:
      flex-start;
  }

}


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

@media (
  max-width: 820px
) {

  .cc-page {
    gap:
      14px;
  }


  .cc-page-header {
    align-items:
      stretch;

    flex-direction:
      column;

    gap:
      15px;
  }


  .cc-page-header__actions {
    justify-content:
      flex-start;
  }


  .cc-page-header__actions .cc-button {
    flex:
      1 1 150px;
  }


  .cc-toolbar__filters {
    display:
      grid;

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


  .cc-toolbar__filters .cc-button {
    width:
      100%;
  }


  .cc-field--compact {
    min-width:
      0;
  }

}


/* =========================================================
   RESPONSIVE · 560
   ========================================================= */

@media (
  max-width: 560px
) {

  .cc-page-header__title {
    font-size:
      24px;
  }


  .cc-page-header__description {
    font-size:
      12px;
  }


  .cc-type-tab {
    min-height:
      40px;

    padding:
      0 10px;

    font-size:
      11px;
  }


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


  .cc-metric-card {
    min-height:
      108px;
  }


  .cc-toolbar {
    padding:
      10px;
  }


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


  .cc-list-card__header {
    min-height:
      auto;

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      5px;
  }


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


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

    flex-direction:
      column;
  }

}


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

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

  .cc-page *,
  .cc-page *::before,
  .cc-page *::after {
    scroll-behavior:
      auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }

}


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

   PARTE 2:
   - DRAWER
   - HEADER DETALLE
   - MÉTRICAS DETALLE
   - INFORMACIÓN CUENTA
   - TABS INTERNOS
   - MOVIMIENTOS
   - PAGOS
   - FACTURAS
   ========================================================= *//* =========================================================
   HUB NEURO APRENDIZAJE INFANTIL
   VENTAS · CUENTAS CORRIENTES

   PARTE 2 DE 4

   - DRAWER
   - HEADER DETALLE
   - MÉTRICAS DETALLE
   - INFORMACIÓN CUENTA
   - TABS INTERNOS
   - SECCIONES DETALLE
   - MOVIMIENTOS
   - PAGOS
   - FACTURAS
   ========================================================= */


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

.cc-drawer {
  position:
    fixed;

  inset:
    0;

  z-index:
    2200;

  display:
    grid;

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

  pointer-events:
    none;
}


.cc-drawer.is-open {
  pointer-events:
    auto;
}


.cc-drawer__backdrop {
  position:
    absolute;

  inset:
    0;

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

  opacity:
    0;

  transition:
    opacity 160ms ease;
}


.cc-drawer.is-open .cc-drawer__backdrop {
  opacity:
    1;
}


.cc-drawer__panel {
  position:
    relative;

  grid-column:
    2;

  width:
    100%;

  height:
    100dvh;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  color:
    var(--cc-text);

  background:
    var(--cc-surface);

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

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

  transform:
    translateX(100%);

  transition:
    transform 180ms ease;
}


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


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

.cc-drawer__header {
  flex:
    0 0 auto;

  min-width:
    0;

  padding:
    16px 18px;

  background:
    var(--cc-surface);

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


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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;
}


.cc-drawer__header-copy {
  min-width:
    0;

  flex:
    1 1 auto;

  display:
    grid;

  gap:
    6px;
}


.cc-drawer__identity {
  min-width:
    0;

  flex:
    1 1 auto;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;
}


.cc-drawer__avatar {
  width:
    42px;

  height:
    42px;

  flex:
    0 0 42px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

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

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

  border-radius:
    11px;
}


.cc-drawer__identity-copy {
  min-width:
    0;

  display:
    grid;

  gap:
    3px;
}


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

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    0.7px;

  text-transform:
    uppercase;
}


.cc-drawer__title {
  min-width:
    0;

  margin:
    0;

  overflow:
    hidden;

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

  font-size:
    19px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    -0.4px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.cc-drawer__meta {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;

  color:
    var(--cc-muted);

  font-size:
    10px;

  line-height:
    1.35;

  font-weight:
    600;
}


.cc-drawer__header-actions {
  min-width:
    0;

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;
}


.cc-drawer__close {
  margin-left:
    2px;
}


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

.cc-drawer__body {
  flex:
    1 1 auto;

  min-width:
    0;

  min-height:
    0;

  padding:
    16px 18px 24px;

  display:
    grid;

  align-content:
    start;

  gap:
    14px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  background:
    var(--cc-bg);

  scrollbar-width:
    thin;

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


.cc-drawer__body::-webkit-scrollbar {
  width:
    7px;
}


.cc-drawer__body::-webkit-scrollbar-track {
  background:
    transparent;
}


.cc-drawer__body::-webkit-scrollbar-thumb {
  background:
    var(--cc-border-strong);

  border-radius:
    999px;
}


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

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

  min-width:
    0;

  display:
    grid;

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

  gap:
    8px;
}


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

  min-height:
    94px;

  padding:
    13px 14px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    7px;

  background:
    var(--cc-surface);

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

  border-radius:
    10px;
}


.cc-detail-metric__label {
  color:
    var(--cc-muted);

  font-size:
    9px;

  line-height:
    1.25;

  font-weight:
    800;

  letter-spacing:
    0.45px;

  text-transform:
    uppercase;
}


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

  overflow-wrap:
    anywhere;

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

  font-size:
    18px;

  line-height:
    1.15;

  font-weight:
    800;

  letter-spacing:
    -0.45px;
}


.cc-detail-metric__value.is-danger {
  color:
    var(--cc-danger);
}


/* =========================================================
   ACCOUNT INFO STRIP
   ========================================================= */

.cc-account-info-strip {
  width:
    100%;

  min-width:
    0;

  padding:
    11px 12px;

  display:
    grid;

  grid-template-columns:
    1.5fr
    1.1fr
    .8fr
    1fr
    .75fr;

  gap:
    0;

  background:
    var(--cc-surface);

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

  border-radius:
    10px;
}


.cc-account-info-item {
  min-width:
    0;

  padding:
    3px 12px;

  display:
    grid;

  align-content:
    center;

  gap:
    4px;

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


.cc-account-info-item:first-child {
  padding-left:
    2px;
}


.cc-account-info-item:last-child {
  padding-right:
    2px;

  border-right:
    0;
}


.cc-account-info-item__label {
  color:
    var(--cc-muted);

  font-size:
    8px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    0.45px;

  text-transform:
    uppercase;
}


.cc-account-info-item__value {
  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    11px;

  line-height:
    1.3;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

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

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  overflow-x:
    auto;

  overflow-y:
    hidden;

  padding:
    4px;

  background:
    var(--cc-surface);

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

  border-radius:
    10px;

  scrollbar-width:
    none;
}


.cc-detail-tabs::-webkit-scrollbar {
  display:
    none;
}


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

  padding:
    0 10px;

  flex:
    0 0 auto;

  border:
    1px solid transparent;

  border-radius:
    7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  color:
    var(--cc-muted);

  background:
    transparent;

  font-size:
    10px;

  font-weight:
    750;

  white-space:
    nowrap;

  transition:
    color 130ms ease,
    background-color 130ms ease,
    border-color 130ms ease;
}


.cc-detail-tab:hover {
  color:
    var(--cc-text-strong);

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


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

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

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


.cc-detail-tab__count {
  min-width:
    19px;

  height:
    19px;

  padding:
    0 5px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--cc-muted);

  background:
    var(--cc-surface);

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

  border-radius:
    999px;

  font-size:
    8px;

  line-height:
    1;

  font-weight:
    800;
}


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

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


/* =========================================================
   DETAIL TAB MOUNT
   ========================================================= */

.cc-detail-tab-mount {
  width:
    100%;

  min-width:
    0;
}


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

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

  min-width:
    0;

  overflow:
    hidden;

  background:
    var(--cc-surface);

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

  border-radius:
    11px;
}


.cc-detail-section__header {
  min-height:
    62px;

  padding:
    12px 14px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

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


.cc-detail-section__header > div:first-child {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.cc-detail-section__eyebrow {
  color:
    var(--cc-muted);

  font-size:
    8px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    0.7px;

  text-transform:
    uppercase;
}


.cc-detail-section__title {
  margin:
    0;

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

  font-size:
    15px;

  line-height:
    1.25;

  font-weight:
    800;

  letter-spacing:
    -0.2px;
}


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

.cc-table-wrap--detail {
  overflow-x:
    auto;
}


.cc-table--detail {
  min-width:
    860px;
}


.cc-table--detail th {
  padding:
    0 11px;

  font-size:
    8px;
}


.cc-table--detail td {
  padding:
    10px 11px;

  font-size:
    11px;
}


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

.cc-table-main,
.cc-table-date {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.cc-table-main strong,
.cc-table-date strong {
  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    11px;

  line-height:
    1.3;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.cc-table-main span,
.cc-table-date span {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--cc-muted);

  font-size:
    9px;

  line-height:
    1.3;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   MOVEMENT IMPACT
   ========================================================= */

.cc-impact {
  min-height:
    24px;

  padding:
    0 7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    7px;

  color:
    var(--cc-muted);

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

  font-size:
    8px;

  line-height:
    1;

  font-weight:
    800;

  white-space:
    nowrap;
}


.cc-impact.is-debit {
  color:
    var(--cc-debit);

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

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


.cc-impact.is-credit {
  color:
    var(--cc-credit);

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

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


.cc-movement-amount {
  font-weight:
    800;
}


.cc-movement-amount.is-debit {
  color:
    var(--cc-debit);
}


.cc-movement-amount.is-credit {
  color:
    var(--cc-credit);
}


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

.cc-detail-empty {
  min-height:
    250px;

  padding:
    34px 20px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


.cc-detail-empty__icon {
  width:
    44px;

  height:
    44px;

  margin-bottom:
    11px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--cc-muted);

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

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

  border-radius:
    11px;
}


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

  font-size:
    13px;

  line-height:
    1.3;

  font-weight:
    800;
}


.cc-detail-empty__text {
  max-width:
    390px;

  margin:
    5px 0 15px;

  color:
    var(--cc-muted);

  font-size:
    11px;

  line-height:
    1.5;

  font-weight:
    550;
}


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

.cc-detail-loading-list {
  width:
    100%;

  min-width:
    0;

  overflow:
    hidden;

  background:
    var(--cc-surface);

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

  border-radius:
    11px;
}


.cc-detail-loading-row {
  min-height:
    53px;

  padding:
    12px 14px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

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


.cc-detail-loading-row:last-child {
  border-bottom:
    0;
}


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

.cc-table--detail td:nth-child(3),
.cc-table--detail td:nth-child(4),
.cc-table--detail td:nth-child(5) {
  white-space:
    nowrap;
}


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

.cc-table--detail .cc-row-actions {
  gap:
    4px;
}


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

@media (
  max-width: 1100px
) {

  .cc-drawer {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(620px, 82vw);
  }


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


  .cc-account-info-strip {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap:
      0;
  }


  .cc-account-info-item:nth-child(3) {
    border-right:
      0;
  }


  .cc-account-info-item:nth-child(n + 4) {
    margin-top:
      8px;

    padding-top:
      10px;

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


  .cc-account-info-item:nth-child(4) {
    padding-left:
      2px;
  }

}


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

@media (
  max-width: 820px
) {

  .cc-drawer {
    display:
      block;
  }


  .cc-drawer__panel {
    position:
      absolute;

    inset:
      0 0 0 auto;

    width:
      min(100%, 720px);

    max-width:
      100%;

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


  .cc-drawer__header {
    padding:
      13px 14px;
  }


  .cc-drawer__header-main {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .cc-drawer__identity {
    width:
      100%;
  }


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

    justify-content:
      flex-start;
  }


  .cc-drawer__header-actions .cc-button {
    flex:
      1 1 135px;
  }


  .cc-drawer__close {
    position:
      absolute;

    top:
      13px;

    right:
      13px;
  }


  .cc-drawer__identity-copy {
    padding-right:
      42px;
  }


  .cc-drawer__body {
    padding:
      13px;
  }


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


  .cc-account-info-item {
    border-right:
      1px solid var(--cc-border);
  }


  .cc-account-info-item:nth-child(even) {
    border-right:
      0;
  }


  .cc-account-info-item:nth-child(n + 3) {
    margin-top:
      8px;

    padding-top:
      10px;

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


  .cc-account-info-item:nth-child(3),
  .cc-account-info-item:nth-child(5) {
    padding-left:
      2px;
  }

}


/* =========================================================
   DRAWER RESPONSIVE · 560
   ========================================================= */

@media (
  max-width: 560px
) {

  .cc-drawer__panel {
    width:
      100%;

    border-left:
      0;
  }


  .cc-drawer__header {
    padding:
      12px;
  }


  .cc-drawer__avatar {
    width:
      38px;

    height:
      38px;

    flex-basis:
      38px;
  }


  .cc-drawer__title {
    font-size:
      16px;
  }


  .cc-drawer__meta {
    font-size:
      9px;
  }


  .cc-drawer__header-actions {
    display:
      grid;

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

    padding-right:
      0;
  }


  .cc-drawer__header-actions .cc-button {
    width:
      100%;

    flex:
      none;
  }


  .cc-drawer__header-actions .cc-drawer__close {
    display:
      flex;

    width:
      34px;
  }


  .cc-drawer__body {
    padding:
      10px;

    gap:
      10px;
  }


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

    gap:
      6px;
  }


  .cc-detail-metric {
    min-height:
      82px;

    padding:
      10px;
  }


  .cc-detail-metric__value {
    font-size:
      15px;
  }


  .cc-account-info-strip {
    grid-template-columns:
      1fr;
  }


  .cc-account-info-item,
  .cc-account-info-item:nth-child(even),
  .cc-account-info-item:nth-child(3),
  .cc-account-info-item:nth-child(4),
  .cc-account-info-item:nth-child(5) {
    margin:
      0;

    padding:
      9px 2px;

    border-right:
      0;

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


  .cc-account-info-item:first-child {
    padding-top:
      2px;

    border-top:
      0;
  }


  .cc-account-info-item:last-child {
    padding-bottom:
      2px;
  }


  .cc-detail-section__header {
    min-height:
      auto;

    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .cc-detail-section__header .cc-button {
    width:
      100%;
  }


  .cc-table--detail {
    min-width:
      790px;
  }

}


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

   PARTE 3:
   - DOCUMENTOS
   - EMAILS
   - NOTAS
   - ACTIVIDAD
   - MODALES
   - FORMULARIOS
   - BUSCADOR ENTIDADES
   - FACTURA ITEMS
   - IMPUTACIONES
   - VENCIMIENTOS
   ========================================================= *//* =========================================================
   HUB NEURO APRENDIZAJE INFANTIL
   VENTAS · CUENTAS CORRIENTES

   PARTE 3 DE 4

   - DOCUMENTOS
   - EMAILS
   - NOTAS
   - ACTIVIDAD
   - MODALES
   - FORMULARIOS
   - BUSCADOR ENTIDADES
   - FACTURA ITEMS
   - IMPUTACIONES
   - VENCIMIENTOS
   ========================================================= */


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

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

  min-width:
    0;

  padding:
    12px;

  display:
    grid;

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

  gap:
    8px;
}


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

  min-height:
    68px;

  padding:
    10px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

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

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

  border-radius:
    9px;

  transition:
    background-color 130ms ease,
    border-color 130ms ease,
    transform 130ms ease;
}


.cc-document-card:hover {
  background:
    var(--cc-surface-hover);

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

  transform:
    translateY(-1px);
}


.cc-document-card__icon {
  width:
    36px;

  height:
    36px;

  flex:
    0 0 36px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  background:
    var(--cc-surface);

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

  border-radius:
    9px;
}


.cc-document-card__content {
  min-width:
    0;

  display:
    grid;

  gap:
    3px;
}


.cc-document-card__name {
  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    11px;

  line-height:
    1.3;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.cc-document-card__meta {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--cc-muted);

  font-size:
    9px;

  line-height:
    1.3;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.cc-document-card__actions {
  display:
    flex;

  align-items:
    center;

  gap:
    4px;
}


/* =========================================================
   EMAIL LIST
   ========================================================= */

.cc-email-list {
  width:
    100%;

  min-width:
    0;

  display:
    grid;
}


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

  padding:
    12px 14px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

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

  transition:
    background-color 120ms ease;
}


.cc-email-row:last-child {
  border-bottom:
    0;
}


.cc-email-row:hover {
  background:
    var(--cc-surface-hover);
}


.cc-email-row__icon {
  width:
    34px;

  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

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

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

  border-radius:
    8px;
}


.cc-email-row__content {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.cc-email-row__subject {
  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    11px;

  line-height:
    1.3;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.cc-email-row__recipients,
.cc-email-row__meta {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--cc-muted);

  font-size:
    9px;

  line-height:
    1.35;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.cc-email-row__status {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;
}


/* =========================================================
   NOTE LIST
   ========================================================= */

.cc-note-list {
  width:
    100%;

  min-width:
    0;

  padding:
    12px;

  display:
    grid;

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

  gap:
    8px;
}


.cc-note-card {
  min-width:
    0;

  padding:
    12px;

  display:
    grid;

  gap:
    9px;

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

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

  border-radius:
    9px;
}


.cc-note-card__header {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    8px;
}


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

  display:
    grid;

  gap:
    2px;
}


.cc-note-card__author {
  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    10px;

  line-height:
    1.3;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.cc-note-card__date {
  color:
    var(--cc-muted);

  font-size:
    8px;

  font-weight:
    600;
}


.cc-note-card__text {
  margin:
    0;

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

  font-size:
    11px;

  line-height:
    1.55;

  font-weight:
    550;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   ACTIVITY
   ========================================================= */

.cc-activity-list {
  width:
    100%;

  min-width:
    0;

  padding:
    8px 14px 14px;

  display:
    grid;
}


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

  display:
    grid;

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

  gap:
    8px;
}


.cc-activity-row__line {
  position:
    relative;

  min-height:
    66px;

  display:
    flex;

  justify-content:
    center;
}


.cc-activity-row__line::after {
  content:
    "";

  position:
    absolute;

  top:
    18px;

  bottom:
    -6px;

  width:
    1px;

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


.cc-activity-row:last-child
.cc-activity-row__line::after {
  display:
    none;
}


.cc-activity-row__dot {
  position:
    relative;

  z-index:
    1;

  width:
    8px;

  height:
    8px;

  margin-top:
    10px;

  border:
    2px solid var(--cc-surface);

  border-radius:
    50%;

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


.cc-activity-row__content {
  min-width:
    0;

  padding:
    7px 0 14px;

  display:
    grid;

  gap:
    5px;
}


.cc-activity-row__header {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;
}


.cc-activity-row__header strong {
  min-width:
    0;

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

  font-size:
    10px;

  line-height:
    1.35;

  font-weight:
    750;
}


.cc-activity-row__header span {
  flex:
    0 0 auto;

  color:
    var(--cc-muted);

  font-size:
    8px;

  font-weight:
    600;

  white-space:
    nowrap;
}


.cc-activity-row__content p {
  margin:
    0;

  color:
    var(--cc-muted);

  font-size:
    10px;

  line-height:
    1.5;

  font-weight:
    550;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;
}


.cc-activity-row__user {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  color:
    var(--cc-muted);

  font-size:
    8px;

  line-height:
    1;

  font-weight:
    650;
}


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

.cc-modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    3000;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    22px;

  pointer-events:
    none;
}


.cc-modal.is-open {
  pointer-events:
    auto;
}


.cc-modal__backdrop {
  position:
    absolute;

  inset:
    0;

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

  opacity:
    0;

  transition:
    opacity 150ms ease;
}


.cc-modal.is-open
.cc-modal__backdrop {
  opacity:
    1;
}


.cc-modal__panel {
  position:
    relative;

  z-index:
    1;

  width:
    min(100%, 560px);

  max-height:
    min(90dvh, 900px);

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  color:
    var(--cc-text);

  background:
    var(--cc-surface);

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

  border-radius:
    14px;

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

  opacity:
    0;

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

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


.cc-modal.is-open
.cc-modal__panel {
  opacity:
    1;

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


.cc-modal__panel--md {
  width:
    min(100%, 560px);
}


.cc-modal__panel--lg {
  width:
    min(100%, 820px);
}


.cc-modal__header {
  flex:
    0 0 auto;

  min-height:
    65px;

  padding:
    13px 15px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

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


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

  display:
    grid;

  gap:
    2px;
}


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

  font-size:
    8px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    .7px;

  text-transform:
    uppercase;
}


.cc-modal__title {
  margin:
    0;

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

  font-size:
    16px;

  line-height:
    1.25;

  font-weight:
    800;

  letter-spacing:
    -.25px;
}


.cc-modal__body {
  flex:
    1 1 auto;

  min-width:
    0;

  min-height:
    0;

  padding:
    15px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  scrollbar-width:
    thin;

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


.cc-modal__body::-webkit-scrollbar {
  width:
    6px;
}


.cc-modal__body::-webkit-scrollbar-thumb {
  background:
    var(--cc-border-strong);

  border-radius:
    999px;
}


.cc-modal__footer {
  flex:
    0 0 auto;

  padding:
    12px 15px;

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

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


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

.cc-form {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

  gap:
    14px;
}


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

  display:
    grid;

  gap:
    11px;
}


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


.cc-form-actions {
  padding-top:
    3px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;
}


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

  padding:
    11px 12px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

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

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

  border-radius:
    9px;
}


.cc-form-summary > div {
  display:
    grid;

  gap:
    3px;
}


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

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .45px;

  text-transform:
    uppercase;
}


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

  font-size:
    16px;

  line-height:
    1.2;

  font-weight:
    800;
}


/* =========================================================
   CHECK
   ========================================================= */

.cc-check {
  min-width:
    0;

  padding:
    10px 11px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    9px;

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

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

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

  border-radius:
    8px;

  font-size:
    10px;

  line-height:
    1.45;

  font-weight:
    650;

  cursor:
    pointer;
}


.cc-check input {
  width:
    15px;

  height:
    15px;

  margin:
    1px 0 0;

  flex:
    0 0 15px;

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


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

.cc-entity-search {
  position:
    relative;

  width:
    100%;

  min-width:
    0;
}


.cc-entity-search__icon {
  position:
    absolute;

  top:
    50%;

  left:
    11px;

  z-index:
    1;

  color:
    var(--cc-muted);

  pointer-events:
    none;

  transform:
    translateY(-50%);
}


.cc-search-results {
  width:
    100%;

  min-width:
    0;

  max-height:
    250px;

  margin-top:
    5px;

  overflow-y:
    auto;

  background:
    var(--cc-surface);

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

  border-radius:
    9px;
}


.cc-search-results:empty {
  display:
    none;
}


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

  min-width:
    0;

  min-height:
    50px;

  padding:
    8px 10px;

  border:
    0;

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

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  color:
    var(--cc-text);

  background:
    transparent;

  text-align:
    left;

  transition:
    background-color 120ms ease;
}


.cc-search-result:last-child {
  border-bottom:
    0;
}


.cc-search-result:hover {
  background:
    var(--cc-surface-hover);
}


.cc-search-result__icon {
  width:
    30px;

  height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

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

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

  border-radius:
    7px;
}


.cc-search-result__content {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.cc-search-result__content strong {
  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.cc-search-result__content span {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--cc-muted);

  font-size:
    9px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.cc-search-results__loading,
.cc-search-results__empty {
  min-height:
    46px;

  padding:
    10px 12px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  color:
    var(--cc-muted);

  font-size:
    10px;

  line-height:
    1.4;

  font-weight:
    650;

  text-align:
    center;
}


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

.cc-invoice-items-editor {
  min-width:
    0;

  overflow:
    hidden;

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

  border-radius:
    10px;
}


.cc-invoice-items-editor__header {
  min-height:
    56px;

  padding:
    10px 12px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

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

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


.cc-invoice-items-editor__header > div:first-child {
  display:
    grid;

  gap:
    2px;
}


.cc-invoice-items-editor__header strong {
  color:
    var(--cc-text-strong);

  font-size:
    12px;

  font-weight:
    800;
}


.cc-invoice-items {
  min-width:
    0;

  padding:
    10px;

  display:
    grid;

  gap:
    8px;

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


.cc-invoice-item {
  min-width:
    0;

  padding:
    10px;

  display:
    grid;

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

  align-items:
    end;

  gap:
    8px;

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

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

  border-radius:
    8px;
}


.cc-invoice-item__main {
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    minmax(180px, 2.2fr)
    minmax(80px, .7fr)
    minmax(110px, 1fr)
    minmax(90px, .8fr);

  gap:
    8px;
}


.cc-invoice-item__description {
  min-width:
    0;
}


.cc-invoice-item__remove {
  margin-bottom:
    1px;
}


/* =========================================================
   ALLOCATION LIST
   ========================================================= */

.cc-allocation-list {
  width:
    100%;

  min-width:
    0;

  max-height:
    360px;

  overflow-y:
    auto;

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

  border-radius:
    9px;

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


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

  min-height:
    62px;

  padding:
    9px 10px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

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


.cc-allocation-row:last-child {
  border-bottom:
    0;
}


.cc-allocation-row__content {
  min-width:
    0;

  display:
    grid;

  gap:
    3px;
}


.cc-allocation-row__content strong {
  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    10px;

  line-height:
    1.3;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.cc-allocation-row__content span {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--cc-muted);

  font-size:
    9px;

  line-height:
    1.3;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.cc-allocation-row__input {
  min-height:
    35px;

  text-align:
    right;
}


/* =========================================================
   DUE LIST
   ========================================================= */

.cc-due-list {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  border-radius:
    9px;

  overflow:
    hidden;
}


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

  min-height:
    60px;

  padding:
    9px 11px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    12px;

  background:
    var(--cc-surface);

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


.cc-due-row:last-child {
  border-bottom:
    0;
}


.cc-due-row:hover {
  background:
    var(--cc-surface-hover);
}


.cc-due-row__date {
  color:
    var(--cc-muted);

  font-size:
    9px;

  font-weight:
    700;

  white-space:
    nowrap;
}


.cc-due-row__main {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.cc-due-row__main strong {
  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.cc-due-row__main span {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--cc-muted);

  font-size:
    9px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.cc-due-row__amount {
  color:
    var(--cc-danger);

  font-size:
    11px;

  font-weight:
    800;

  text-align:
    right;

  white-space:
    nowrap;
}


/* =========================================================
   MODAL RESPONSIVE · 760
   ========================================================= */

@media (
  max-width: 760px
) {

  .cc-modal {
    padding:
      12px;
  }


  .cc-modal__panel,
  .cc-modal__panel--md,
  .cc-modal__panel--lg {
    width:
      100%;
  }


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


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


  .cc-invoice-item__description {
    grid-column:
      1 / -1;
  }


  .cc-document-grid,
  .cc-note-list {
    grid-template-columns:
      1fr;
  }

}


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

@media (
  max-width: 520px
) {

  .cc-modal {
    padding:
      0;

    align-items:
      flex-end;
  }


  .cc-modal__panel,
  .cc-modal__panel--md,
  .cc-modal__panel--lg {
    max-height:
      96dvh;

    border-right:
      0;

    border-bottom:
      0;

    border-left:
      0;

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


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

    padding:
      11px 12px;
  }


  .cc-modal__body {
    padding:
      12px;
  }


  .cc-modal__title {
    font-size:
      15px;
  }


  .cc-form {
    gap:
      11px;
  }


  .cc-form-actions {
    display:
      grid;

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


  .cc-form-actions .cc-button {
    width:
      100%;
  }


  .cc-invoice-items-editor__header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .cc-invoice-items-editor__header
  .cc-button {
    width:
      100%;
  }


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


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


  .cc-invoice-item__description {
    grid-column:
      auto;
  }


  .cc-invoice-item__remove {
    width:
      100%;

    height:
      34px;

    margin:
      0;
  }


  .cc-allocation-row {
    grid-template-columns:
      1fr;

    align-items:
      stretch;
  }


  .cc-allocation-row__input {
    width:
      100%;
  }


  .cc-due-row {
    grid-template-columns:
      1fr;

    gap:
      5px;
  }


  .cc-due-row__amount {
    text-align:
      left;
  }


  .cc-email-row {
    grid-template-columns:
      auto
      minmax(0, 1fr);

    align-items:
      flex-start;
  }


  .cc-email-row__status {
    grid-column:
      1 / -1;

    justify-content:
      flex-start;

    padding-left:
      44px;
  }


  .cc-activity-row__header {
    flex-direction:
      column;

    gap:
      3px;
  }

}


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

   PARTE 4:
   - TOASTS
   - ESTADOS
   - LOADING
   - DARK MODE AJUSTES
   - FULL WIDTH
   - NO SCROLL HORIZONTAL
   - RESPONSIVE FINAL
   - ANIMACIONES
   - FIXES DE INTEGRACIÓN
   ========================================================= *//* =========================================================
   HUB NEURO APRENDIZAJE INFANTIL
   VENTAS · CUENTAS CORRIENTES

   PARTE 4 DE 4

   - TOASTS
   - ESTADOS
   - LOADING
   - DARK MODE AJUSTES
   - FULL WIDTH
   - NO SCROLL HORIZONTAL
   - RESPONSIVE FINAL
   - ANIMACIONES
   - FIXES DE INTEGRACIÓN
   ========================================================= */


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

.cc-toast-stack {
  position:
    fixed;

  top:
    18px;

  right:
    18px;

  z-index:
    5000;

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

  display:
    grid;

  gap:
    8px;

  pointer-events:
    none;
}


.cc-toast {
  width:
    100%;

  min-width:
    0;

  padding:
    11px 12px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

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

  background:
    var(--cc-surface);

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

  border-radius:
    10px;

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

  pointer-events:
    auto;

  animation:
    cc-toast-in
    170ms
    ease;
}


.cc-toast__icon {
  width:
    30px;

  height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    8px;

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


.cc-toast__content {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.cc-toast__content strong {
  min-width:
    0;

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

  font-size:
    10px;

  line-height:
    1.25;

  font-weight:
    800;
}


.cc-toast__content span,
.cc-toast__message {
  min-width:
    0;

  color:
    var(--cc-muted);

  font-size:
    10px;

  line-height:
    1.45;

  font-weight:
    600;

  overflow-wrap:
    anywhere;
}


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


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

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

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


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


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

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

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


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


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

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

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


.cc-toast--info
.cc-toast__icon {
  color:
    var(--cc-info);

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

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


/* =========================================================
   STATE BLOCKS
   ========================================================= */

.cc-state {
  width:
    100%;

  min-height:
    180px;

  padding:
    26px 18px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  text-align:
    center;

  background:
    var(--cc-surface);

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

  border-radius:
    11px;
}


.cc-state__icon {
  width:
    42px;

  height:
    42px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--cc-muted);

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

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

  border-radius:
    10px;
}


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

  font-size:
    13px;

  font-weight:
    800;
}


.cc-state__text {
  max-width:
    420px;

  margin:
    0;

  color:
    var(--cc-muted);

  font-size:
    11px;

  line-height:
    1.5;

  font-weight:
    550;
}


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

.cc-spin,
.cc-page [data-lucide="loader-circle"] {
  animation:
    cc-spin
    .9s
    linear
    infinite;
}


@keyframes cc-spin {

  to {
    transform:
      rotate(360deg);
  }

}


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

@keyframes cc-toast-in {

  from {
    opacity:
      0;

    transform:
      translateY(-6px)
      scale(.985);
  }

  to {
    opacity:
      1;

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

}


/* =========================================================
   BASE PAGE INTEGRATION
   ========================================================= */

#pageContent:has(.cc-page) {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;
}


#pageContent
.cuentas-corrientes-page-mount {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;
}


.app-content:has(.cc-page) {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;
}


/* =========================================================
   FORCE FULL WIDTH
   ========================================================= */

.ventas-cuentas-corrientes-page-mount,
.cuentas-corrientes-page-mount,
.ventas-cuentas-corrientes-page-mount > *,
.cuentas-corrientes-page-mount > * {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;
}


/* =========================================================
   PREVENCIÓN SCROLL HORIZONTAL PÁGINA
   ========================================================= */

html:has(.cc-page),
body:has(.cc-page) {
  max-width:
    100%;

  overflow-x:
    hidden;
}


.cc-page {
  max-width:
    100%;

  min-width:
    0;

  overflow-x:
    hidden;
}


.cc-page > * {
  min-width:
    0;

  max-width:
    100%;
}


/* =========================================================
   TABLAS RESPONSIVE SIN ROMPER PÁGINA
   ========================================================= */

.cc-table-wrap {
  max-width:
    100%;

  overscroll-behavior-x:
    contain;
}


.cc-table {
  margin:
    0;
}


/* =========================================================
   INPUT DATE DARK MODE
   ========================================================= */

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


html[data-theme="light"]
.cc-page
input[type="date"],
body[data-theme="light"]
.cc-page
input[type="date"],
[data-theme="light"]
.cc-page
input[type="date"] {
  color-scheme:
    light;
}


/* =========================================================
   AUTOFILL
   ========================================================= */

.cc-page input:-webkit-autofill,
.cc-page input:-webkit-autofill:hover,
.cc-page input:-webkit-autofill:focus,
.cc-page textarea:-webkit-autofill,
.cc-page select:-webkit-autofill {
  -webkit-text-fill-color:
    var(--cc-text-strong);

  -webkit-box-shadow:
    0 0 0 1000px
    var(--cc-surface)
    inset;

  transition:
    background-color
    9999s
    ease-out;
}


/* =========================================================
   SELECTION
   ========================================================= */

.cc-page ::selection {
  color:
    var(--cc-white);

  background:
    #222222;
}


html[data-theme="dark"]
.cc-page ::selection,
body[data-theme="dark"]
.cc-page ::selection,
[data-theme="dark"]
.cc-page ::selection {
  color:
    #000000;

  background:
    #eeeeee;
}


/* =========================================================
   DISABLED CONTROLS
   ========================================================= */

.cc-page input:disabled,
.cc-page select:disabled,
.cc-page textarea:disabled {
  color:
    var(--cc-muted);

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

  opacity:
    .7;

  cursor:
    not-allowed;
}


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

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


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

.cc-table__money,
.cc-detail-metric__value,
.cc-metric-card__value,
.cc-form-summary strong,
.cc-due-row__amount {
  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   BUTTON ACTIVE FEEDBACK
   ========================================================= */

.cc-button.is-loading,
.cc-icon-button.is-loading {
  pointer-events:
    none;

  opacity:
    .7;
}


/* =========================================================
   DARK MODE · SURFACES
   ========================================================= */

html[data-theme="dark"]
.cc-page,
body[data-theme="dark"]
.cc-page,
[data-theme="dark"]
.cc-page {
  color:
    #ededed;
}


html[data-theme="dark"]
.cc-list-card,
html[data-theme="dark"]
.cc-detail-section,
html[data-theme="dark"]
.cc-modal__panel,
html[data-theme="dark"]
.cc-drawer__panel,
body[data-theme="dark"]
.cc-list-card,
body[data-theme="dark"]
.cc-detail-section,
body[data-theme="dark"]
.cc-modal__panel,
body[data-theme="dark"]
.cc-drawer__panel,
[data-theme="dark"]
.cc-list-card,
[data-theme="dark"]
.cc-detail-section,
[data-theme="dark"]
.cc-modal__panel,
[data-theme="dark"]
.cc-drawer__panel {
  background:
    #090909;
}


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


/* =========================================================
   DARK MODE · TABLE HEADER
   ========================================================= */

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


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

html[data-theme="dark"]
.cc-field__control,
html[data-theme="dark"]
.cc-toolbar__search-input,
body[data-theme="dark"]
.cc-field__control,
body[data-theme="dark"]
.cc-toolbar__search-input,
[data-theme="dark"]
.cc-field__control,
[data-theme="dark"]
.cc-toolbar__search-input {
  color:
    #ffffff;

  background-color:
    #090909;

  border-color:
    #292929;
}


html[data-theme="dark"]
.cc-field__control:hover,
html[data-theme="dark"]
.cc-toolbar__search-input:hover,
body[data-theme="dark"]
.cc-field__control:hover,
body[data-theme="dark"]
.cc-toolbar__search-input:hover,
[data-theme="dark"]
.cc-field__control:hover,
[data-theme="dark"]
.cc-toolbar__search-input:hover {
  border-color:
    #3b3b3b;
}


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

  border-color:
    #525252;
}


/* =========================================================
   DARK MODE · BUTTONS
   ========================================================= */

html[data-theme="dark"]
.cc-button--secondary,
html[data-theme="dark"]
.cc-icon-button,
body[data-theme="dark"]
.cc-button--secondary,
body[data-theme="dark"]
.cc-icon-button,
[data-theme="dark"]
.cc-button--secondary,
[data-theme="dark"]
.cc-icon-button {
  color:
    #e7e7e7;

  background:
    #0c0c0c;

  border-color:
    #292929;
}


html[data-theme="dark"]
.cc-button--secondary:hover:not(:disabled),
html[data-theme="dark"]
.cc-icon-button:hover:not(:disabled),
body[data-theme="dark"]
.cc-button--secondary:hover:not(:disabled),
body[data-theme="dark"]
.cc-icon-button:hover:not(:disabled),
[data-theme="dark"]
.cc-button--secondary:hover:not(:disabled),
[data-theme="dark"]
.cc-icon-button:hover:not(:disabled) {
  color:
    #ffffff;

  background:
    #151515;

  border-color:
    #3b3b3b;
}


/* =========================================================
   DARK MODE · SEARCH RESULTS
   ========================================================= */

html[data-theme="dark"]
.cc-search-results,
body[data-theme="dark"]
.cc-search-results,
[data-theme="dark"]
.cc-search-results {
  background:
    #090909;

  border-color:
    #292929;
}


html[data-theme="dark"]
.cc-search-result:hover,
body[data-theme="dark"]
.cc-search-result:hover,
[data-theme="dark"]
.cc-search-result:hover {
  background:
    #111111;
}


/* =========================================================
   DARK MODE · MODAL BACKDROP
   ========================================================= */

html[data-theme="dark"]
.cc-modal__backdrop,
body[data-theme="dark"]
.cc-modal__backdrop,
[data-theme="dark"]
.cc-modal__backdrop {
  background:
    rgba(0, 0, 0, .72);
}


html[data-theme="dark"]
.cc-drawer__backdrop,
body[data-theme="dark"]
.cc-drawer__backdrop,
[data-theme="dark"]
.cc-drawer__backdrop {
  background:
    rgba(0, 0, 0, .64);
}


/* =========================================================
   DARK MODE · NO GLOW
   ========================================================= */

html[data-theme="dark"]
.cc-page *,
body[data-theme="dark"]
.cc-page *,
[data-theme="dark"]
.cc-page * {
  text-shadow:
    none;
}


html[data-theme="dark"]
.cc-button,
html[data-theme="dark"]
.cc-icon-button,
html[data-theme="dark"]
.cc-field__control,
html[data-theme="dark"]
.cc-toolbar__search-input,
body[data-theme="dark"]
.cc-button,
body[data-theme="dark"]
.cc-icon-button,
body[data-theme="dark"]
.cc-field__control,
body[data-theme="dark"]
.cc-toolbar__search-input,
[data-theme="dark"]
.cc-button,
[data-theme="dark"]
.cc-icon-button,
[data-theme="dark"]
.cc-field__control,
[data-theme="dark"]
.cc-toolbar__search-input {
  box-shadow:
    none;
}


/* =========================================================
   LIGHT MODE · CONTRASTE
   ========================================================= */

html[data-theme="light"]
.cc-page,
body[data-theme="light"]
.cc-page,
[data-theme="light"]
.cc-page {
  color:
    #171a16;
}


html[data-theme="light"]
.cc-page strong,
html[data-theme="light"]
.cc-page h1,
html[data-theme="light"]
.cc-page h2,
html[data-theme="light"]
.cc-page h3,
html[data-theme="light"]
.cc-page h4,
body[data-theme="light"]
.cc-page strong,
body[data-theme="light"]
.cc-page h1,
body[data-theme="light"]
.cc-page h2,
body[data-theme="light"]
.cc-page h3,
body[data-theme="light"]
.cc-page h4,
[data-theme="light"]
.cc-page strong,
[data-theme="light"]
.cc-page h1,
[data-theme="light"]
.cc-page h2,
[data-theme="light"]
.cc-page h3,
[data-theme="light"]
.cc-page h4 {
  color:
    #090b09;
}


/* =========================================================
   HOVER ROW POINTER
   ========================================================= */

.cc-table__row[data-action],
.cc-table__row:has([data-action="open-account"]) {
  cursor:
    pointer;
}


/* =========================================================
   DRAWER ABOVE SIDEBAR / TOPBAR
   ========================================================= */

.cc-drawer,
.cc-modal {
  isolation:
    isolate;
}


/* =========================================================
   BODY LOCK VISUAL
   ========================================================= */

body:has(.cc-modal.is-open),
body:has(.cc-drawer.is-open) {
  overscroll-behavior:
    none;
}


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

.cc-table-wrap--detail
.cc-table thead {
  position:
    sticky;

  top:
    0;

  z-index:
    2;
}


/* =========================================================
   DETAIL TAB STICKY
   ========================================================= */

.cc-detail-tabs {
  position:
    sticky;

  top:
    -1px;

  z-index:
    10;
}


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

.cc-row-actions
.cc-icon-button {
  width:
    30px;

  height:
    30px;

  border-radius:
    7px;
}


.cc-row-actions
.cc-icon-button svg {
  width:
    14px;

  height:
    14px;
}


/* =========================================================
   DRAWER HEADER ACTIONS · COMPACT
   ========================================================= */

.cc-drawer__header-actions
.cc-button {
  min-height:
    34px;

  padding:
    0 10px;

  font-size:
    10px;
}


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

.cc-table-empty-row td {
  padding:
    0;

  border:
    0;
}


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

.cc-loading-row td {
  height:
    55px;
}


.cc-loading-row:hover {
  background:
    transparent;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.cc-page [aria-disabled="true"] {
  pointer-events:
    none;

  opacity:
    .55;
}


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

@media (
  max-width: 1280px
) {

  .cc-page-header {
    gap:
      16px;
  }


  .cc-page-header__actions {
    max-width:
      52%;
  }

}


/* =========================================================
   RESPONSIVE FINAL · 1000
   ========================================================= */

@media (
  max-width: 1000px
) {

  .cc-page-header__actions {
    max-width:
      none;
  }


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


  .cc-document-grid,
  .cc-note-list {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   RESPONSIVE FINAL · 720
   ========================================================= */

@media (
  max-width: 720px
) {

  .cc-page {
    padding-bottom:
      16px;
  }


  .cc-page-header {
    padding-bottom:
      15px;
  }


  .cc-page-header__actions {
    display:
      grid;

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

    width:
      100%;
  }


  .cc-page-header__actions
  .cc-button {
    width:
      100%;
  }


  .cc-type-tabs {
    width:
      100%;
  }


  .cc-metrics {
    gap:
      8px;
  }


  .cc-toolbar__filters {
    width:
      100%;
  }


  .cc-pagination__actions {
    width:
      100%;
  }


  .cc-pagination__actions
  .cc-button {
    flex:
      1 1 0;
  }


  .cc-toast-stack {
    top:
      10px;

    right:
      10px;

    left:
      10px;

    width:
      auto;
  }

}


/* =========================================================
   RESPONSIVE FINAL · 480
   ========================================================= */

@media (
  max-width: 480px
) {

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


  .cc-page-header__actions
  .cc-button {
    min-height:
      38px;
  }


  .cc-type-tab {
    padding:
      0 7px;
  }


  .cc-type-tab svg {
    width:
      14px;

    height:
      14px;
  }


  .cc-metric-card {
    padding:
      13px;
  }


  .cc-toolbar__search-input {
    height:
      38px;
  }


  .cc-detail-tabs {
    border-radius:
      8px;
  }


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

    padding:
      0 8px;
  }


  .cc-toast {
    padding:
      9px 10px;
  }

}


/* =========================================================
   VERY SMALL
   ========================================================= */

@media (
  max-width: 360px
) {

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


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


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

}


/* =========================================================
   PRINT
   ========================================================= */

@media print {

  .cc-page-header__actions,
  .cc-toolbar,
  .cc-pagination,
  .cc-row-actions,
  .cc-detail-tabs,
  .cc-drawer__header-actions,
  .cc-modal,
  .cc-toast-stack {
    display:
      none !important;
  }


  .cc-page {
    color:
      #000000;

    background:
      #ffffff;

    overflow:
      visible;
  }


  .cc-list-card,
  .cc-detail-section,
  .cc-detail-metric,
  .cc-account-info-strip {
    color:
      #000000;

    background:
      #ffffff;

    border-color:
      #bdbdbd;

    box-shadow:
      none;
  }


  .cc-table-wrap {
    overflow:
      visible;
  }


  .cc-table,
  .cc-table--detail {
    min-width:
      0;
  }

}


/* =========================================================
   FIN CUENTAS CORRIENTES
   ========================================================= *//* =========================================================
   CUENTAS CORRIENTES
   DRAWER GLOBAL · FULL VIEWPORT
   ========================================================= */

.cc-global-drawer-mount {
  position:
    static;

  width:
    0;

  height:
    0;
}


.cc-global-drawer-mount .cc-drawer {
  position:
    fixed !important;

  inset:
    0 !important;

  width:
    100vw !important;

  height:
    100dvh !important;

  z-index:
    99999 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


.cc-global-drawer-mount .cc-drawer__backdrop {
  position:
    absolute !important;

  inset:
    0 !important;

  width:
    100%;

  height:
    100%;

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


.cc-global-drawer-mount .cc-drawer__panel {
  position:
    relative;

  z-index:
    2;

  height:
    100dvh !important;

  max-height:
    100dvh !important;
}


body.cc-drawer-open {
  overflow:
    hidden !important;
}/* =========================================================
   CUENTAS CORRIENTES
   REFUERZO DE DIVISIONES · MODO OSCURO
   ========================================================= */

html[data-theme="dark"] .cc-global-drawer-mount .cc-drawer__panel,
body[data-theme="dark"] .cc-global-drawer-mount .cc-drawer__panel,
[data-theme="dark"] .cc-global-drawer-mount .cc-drawer__panel {
  --cc-border:
    #303030;

  --cc-border-strong:
    #454545;

  --cc-border-dark:
    #5a5a5a;

  background:
    #050505;
}


/* HEADER */

html[data-theme="dark"] .cc-global-drawer-mount .cc-drawer__header,
body[data-theme="dark"] .cc-global-drawer-mount .cc-drawer__header,
[data-theme="dark"] .cc-global-drawer-mount .cc-drawer__header {
  background:
    #090909;

  border-bottom:
    1px solid #343434;
}


/* BODY */

html[data-theme="dark"] .cc-global-drawer-mount .cc-drawer__body,
body[data-theme="dark"] .cc-global-drawer-mount .cc-drawer__body,
[data-theme="dark"] .cc-global-drawer-mount .cc-drawer__body {
  background:
    #050505;
}


/* MÉTRICAS */

html[data-theme="dark"] .cc-global-drawer-mount .cc-detail-metric,
body[data-theme="dark"] .cc-global-drawer-mount .cc-detail-metric,
[data-theme="dark"] .cc-global-drawer-mount .cc-detail-metric {
  background:
    #0a0a0a;

  border:
    1px solid #343434;
}


/* INFORMACIÓN DE CUENTA */

html[data-theme="dark"] .cc-global-drawer-mount .cc-account-info-strip,
body[data-theme="dark"] .cc-global-drawer-mount .cc-account-info-strip,
[data-theme="dark"] .cc-global-drawer-mount .cc-account-info-strip {
  background:
    #090909;

  border:
    1px solid #343434;
}


html[data-theme="dark"] .cc-global-drawer-mount .cc-account-info-item,
body[data-theme="dark"] .cc-global-drawer-mount .cc-account-info-item,
[data-theme="dark"] .cc-global-drawer-mount .cc-account-info-item {
  border-right-color:
    #343434;
}


/* TABS */

html[data-theme="dark"] .cc-global-drawer-mount .cc-detail-tabs,
body[data-theme="dark"] .cc-global-drawer-mount .cc-detail-tabs,
[data-theme="dark"] .cc-global-drawer-mount .cc-detail-tabs {
  background:
    #090909;

  border:
    1px solid #343434;
}


html[data-theme="dark"] .cc-global-drawer-mount .cc-detail-tab,
body[data-theme="dark"] .cc-global-drawer-mount .cc-detail-tab,
[data-theme="dark"] .cc-global-drawer-mount .cc-detail-tab {
  color:
    #a9a9a9;
}


html[data-theme="dark"] .cc-global-drawer-mount .cc-detail-tab:hover,
body[data-theme="dark"] .cc-global-drawer-mount .cc-detail-tab:hover,
[data-theme="dark"] .cc-global-drawer-mount .cc-detail-tab:hover {
  color:
    #ffffff;

  background:
    #121212;
}


html[data-theme="dark"] .cc-global-drawer-mount .cc-detail-tab.is-active,
body[data-theme="dark"] .cc-global-drawer-mount .cc-detail-tab.is-active,
[data-theme="dark"] .cc-global-drawer-mount .cc-detail-tab.is-active {
  color:
    #ffffff;

  background:
    #111111;

  border-color:
    #555555;
}


/* SECCIONES INTERNAS */

html[data-theme="dark"] .cc-global-drawer-mount .cc-detail-section,
body[data-theme="dark"] .cc-global-drawer-mount .cc-detail-section,
[data-theme="dark"] .cc-global-drawer-mount .cc-detail-section {
  background:
    #080808;

  border:
    1px solid #343434;
}


html[data-theme="dark"] .cc-global-drawer-mount .cc-detail-section__header,
body[data-theme="dark"] .cc-global-drawer-mount .cc-detail-section__header,
[data-theme="dark"] .cc-global-drawer-mount .cc-detail-section__header {
  border-bottom:
    1px solid #343434;
}


/* TABLAS */

html[data-theme="dark"] .cc-global-drawer-mount .cc-table thead,
body[data-theme="dark"] .cc-global-drawer-mount .cc-table thead,
[data-theme="dark"] .cc-global-drawer-mount .cc-table thead {
  background:
    #0d0d0d;
}


html[data-theme="dark"] .cc-global-drawer-mount .cc-table th,
body[data-theme="dark"] .cc-global-drawer-mount .cc-table th,
[data-theme="dark"] .cc-global-drawer-mount .cc-table th {
  border-bottom-color:
    #3a3a3a;
}


html[data-theme="dark"] .cc-global-drawer-mount .cc-table td,
body[data-theme="dark"] .cc-global-drawer-mount .cc-table td,
[data-theme="dark"] .cc-global-drawer-mount .cc-table td {
  border-bottom-color:
    #2c2c2c;
}


/* BOTONES */

html[data-theme="dark"] .cc-global-drawer-mount .cc-button--secondary,
body[data-theme="dark"] .cc-global-drawer-mount .cc-button--secondary,
[data-theme="dark"] .cc-global-drawer-mount .cc-button--secondary {
  background:
    #0b0b0b;

  border-color:
    #3a3a3a;
}


html[data-theme="dark"] .cc-global-drawer-mount .cc-button--secondary:hover,
body[data-theme="dark"] .cc-global-drawer-mount .cc-button--secondary:hover,
[data-theme="dark"] .cc-global-drawer-mount .cc-button--secondary:hover {
  background:
    #141414;

  border-color:
    #555555;
}


/* ICON BUTTONS */

html[data-theme="dark"] .cc-global-drawer-mount .cc-icon-button,
body[data-theme="dark"] .cc-global-drawer-mount .cc-icon-button,
[data-theme="dark"] .cc-global-drawer-mount .cc-icon-button {
  background:
    #0b0b0b;

  border-color:
    #3a3a3a;
}


/* EMPTY STATE */

html[data-theme="dark"] .cc-global-drawer-mount .cc-detail-empty__icon,
body[data-theme="dark"] .cc-global-drawer-mount .cc-detail-empty__icon,
[data-theme="dark"] .cc-global-drawer-mount .cc-detail-empty__icon {
  background:
    #0d0d0d;

  border-color:
    #3a3a3a;
}