/* =========================================================
   HUB NAI
   RENDICIONES

   UBICACIÓN:
   frontend/src/pages/rendiciones/rendiciones.css

   PARTE 1 DE 3

   DISEÑO:
   - Premium
   - Minimalista
   - Compacto
   - Responsive
   - Sin glow
   - Sin blur
   - Sin scroll horizontal global
   - DM Sans
   - Bordes claros y marcados
   ========================================================= */


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

.rendiciones-page {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  padding:
    0;

  color:
    var(--text-primary, #151713);
}


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


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

.rendiciones-header {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  padding:
    16px 18px;

  border:
    1px solid
    var(--border-color, #d9d9d3);

  border-radius:
    14px;

  background:
    var(--surface-primary, #ffffff);
}


.rendiciones-header__main {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;
}


.rendiciones-header__icon {
  width:
    40px;

  height:
    40px;

  flex:
    0 0
    40px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--border-color-strong, #c9c9c2);

  border-radius:
    11px;

  background:
    var(--surface-secondary, #f4f4f1);

  color:
    var(--text-primary, #151713);
}


.rendiciones-header__copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.rendiciones-header__eyebrow {
  font-size:
    11px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

  color:
    var(--text-muted, #77776f);
}


.rendiciones-header__copy h1 {
  margin:
    0;

  font-size:
    22px;

  line-height:
    1.15;

  font-weight:
    800;

  letter-spacing:
    -0.03em;

  color:
    var(--text-primary, #151713);
}


.rendiciones-header__copy p {
  margin:
    2px 0 0;

  font-size:
    13px;

  line-height:
    1.4;

  font-weight:
    500;

  color:
    var(--text-secondary, #5f615a);
}


.rendiciones-header__actions {
  flex:
    0 0
    auto;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


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

.rendiciones-btn {
  min-height:
    36px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    0 13px;

  border:
    1px solid
    transparent;

  border-radius:
    10px;

  font-family:
    inherit;

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    750;

  white-space:
    nowrap;

  cursor:
    pointer;

  user-select:
    none;

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


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


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


.rendiciones-btn:disabled {
  opacity:
    0.52;

  cursor:
    not-allowed;

  transform:
    none;
}


.rendiciones-btn svg {
  flex:
    0 0
    auto;
}


.rendiciones-btn--primary {
  border-color:
    #1c1f1a;

  background:
    #1c1f1a;

  color:
    #ffffff;
}


.rendiciones-btn--primary:hover:not(:disabled) {
  border-color:
    #0e100d;

  background:
    #0e100d;
}


.rendiciones-btn--secondary {
  border-color:
    var(--border-color-strong, #c9c9c2);

  background:
    var(--surface-primary, #ffffff);

  color:
    var(--text-primary, #151713);
}


.rendiciones-btn--secondary:hover:not(:disabled) {
  border-color:
    #aeb0a7;

  background:
    var(--surface-secondary, #f4f4f1);
}


.rendiciones-btn--ghost {
  border-color:
    transparent;

  background:
    transparent;

  color:
    var(--text-secondary, #5f615a);
}


.rendiciones-btn--ghost:hover:not(:disabled) {
  background:
    var(--surface-secondary, #f4f4f1);

  color:
    var(--text-primary, #151713);
}


.rendiciones-btn--danger {
  border-color:
    #a73d3d;

  background:
    #a73d3d;

  color:
    #ffffff;
}


.rendiciones-btn--danger:hover:not(:disabled) {
  border-color:
    #8d3030;

  background:
    #8d3030;
}


.rendiciones-btn--compact {
  min-height:
    32px;

  padding:
    0 10px;

  font-size:
    11.5px;

  border-radius:
    9px;
}


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

  min-width:
    36px;

  padding:
    0;
}


.rendiciones-btn.is-loading svg,
.rendiciones-btn.is-loading [data-lucide="loader-circle"] {
  animation:
    rendiciones-spin 700ms linear infinite;
}


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

.rendiciones-metrics {
  width:
    100%;

  display:
    grid;

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

  gap:
    10px;
}


.rendiciones-metric {
  min-width:
    0;

  min-height:
    106px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    11px;

  padding:
    14px;

  border:
    1px solid
    var(--border-color, #d9d9d3);

  border-radius:
    13px;

  background:
    var(--surface-primary, #ffffff);

  text-align:
    left;

  color:
    inherit;

  cursor:
    pointer;

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


.rendiciones-metric:hover {
  border-color:
    var(--border-color-strong, #bcbeb6);

  background:
    var(--surface-secondary, #f7f7f4);

  transform:
    translateY(-1px);
}


.rendiciones-metric__icon {
  width:
    34px;

  height:
    34px;

  flex:
    0 0
    34px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--border-color, #d8d8d2);

  border-radius:
    10px;

  background:
    var(--surface-secondary, #f4f4f1);

  color:
    var(--text-primary, #151713);
}


.rendiciones-metric__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.rendiciones-metric__label {
  font-size:
    11px;

  line-height:
    1.2;

  font-weight:
    750;

  color:
    var(--text-secondary, #61635c);
}


.rendiciones-metric__value {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  font-size:
    21px;

  line-height:
    1.2;

  font-weight:
    850;

  letter-spacing:
    -0.035em;

  color:
    var(--text-primary, #151713);
}


.rendiciones-metric__meta {
  margin-top:
    2px;

  font-size:
    11px;

  line-height:
    1.35;

  font-weight:
    600;

  color:
    var(--text-muted, #777970);
}


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

.rendiciones-toolbar {
  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  border:
    1px solid
    var(--border-color, #d9d9d3);

  border-radius:
    13px;

  background:
    var(--surface-primary, #ffffff);

  overflow:
    hidden;
}


.rendiciones-toolbar__top {
  min-height:
    56px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    10px 12px;
}


.rendiciones-toolbar__buttons {
  flex:
    0 0
    auto;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


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

.rendiciones-search {
  width:
    min(
      520px,
      100%
    );

  min-width:
    220px;

  height:
    36px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 10px;

  border:
    1px solid
    var(--border-color, #d8d8d2);

  border-radius:
    10px;

  background:
    var(--surface-secondary, #f8f8f5);

  color:
    var(--text-muted, #74766d);

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


.rendiciones-search:focus-within {
  border-color:
    var(--text-primary, #34362f);

  background:
    var(--surface-primary, #ffffff);
}


.rendiciones-search > svg {
  flex:
    0 0
    auto;
}


.rendiciones-search input {
  min-width:
    0;

  flex:
    1 1
    auto;

  height:
    100%;

  padding:
    0;

  border:
    0;

  outline:
    none;

  background:
    transparent;

  font-family:
    inherit;

  font-size:
    12.5px;

  font-weight:
    600;

  color:
    var(--text-primary, #151713);
}


.rendiciones-search input::placeholder {
  color:
    var(--text-muted, #8a8c84);
}


.rendiciones-search__clear {
  width:
    24px;

  height:
    24px;

  flex:
    0 0
    24px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(--text-muted, #74766d);

  cursor:
    pointer;
}


.rendiciones-search__clear:hover {
  background:
    var(--surface-tertiary, #ecece7);

  color:
    var(--text-primary, #151713);
}


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

.rendiciones-filters {
  display:
    grid;

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

  gap:
    9px;

  max-height:
    0;

  padding:
    0 12px;

  border-top:
    0 solid
    transparent;

  overflow:
    hidden;

  opacity:
    0;

  transition:
    max-height 180ms ease,
    padding 180ms ease,
    opacity 140ms ease,
    border-color 140ms ease;
}


.rendiciones-filters.is-open {
  max-height:
    220px;

  padding:
    12px;

  border-top-width:
    1px;

  border-top-color:
    var(--border-color, #d9d9d3);

  opacity:
    1;
}


.rendiciones-filter {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.rendiciones-filter label {
  font-size:
    10.5px;

  line-height:
    1.2;

  font-weight:
    750;

  color:
    var(--text-secondary, #5f615a);
}


.rendiciones-filter select,
.rendiciones-filter input {
  width:
    100%;

  height:
    34px;

  min-width:
    0;

  padding:
    0 9px;

  border:
    1px solid
    var(--border-color, #d8d8d2);

  border-radius:
    9px;

  outline:
    none;

  background:
    var(--surface-secondary, #f8f8f5);

  font-family:
    inherit;

  font-size:
    11.5px;

  font-weight:
    650;

  color:
    var(--text-primary, #151713);

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


.rendiciones-filter select:focus,
.rendiciones-filter input:focus {
  border-color:
    var(--text-primary, #34362f);

  background:
    var(--surface-primary, #ffffff);
}


.rendiciones-filter-actions {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    flex-end;
}


.rendiciones-filter-count {
  min-width:
    18px;

  height:
    18px;

  display:
    inline-grid;

  place-items:
    center;

  padding:
    0 5px;

  border-radius:
    999px;

  background:
    #1c1f1a;

  font-size:
    10px;

  font-weight:
    800;

  color:
    #ffffff;
}


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

.rendiciones-content {
  width:
    100%;

  min-width:
    0;
}


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

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

  min-width:
    0;

  border:
    1px solid
    var(--border-color, #d9d9d3);

  border-radius:
    13px;

  background:
    var(--surface-primary, #ffffff);

  overflow:
    visible;
}


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

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    visible;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--border-color-strong, #c5c6bf)
    transparent;
}


.rendiciones-table {
  width:
    100%;

  min-width:
    1040px;

  border-collapse:
    separate;

  border-spacing:
    0;

  table-layout:
    auto;
}


.rendiciones-table thead {
  background:
    var(--surface-secondary, #f4f4f1);
}


.rendiciones-table th {
  height:
    41px;

  padding:
    0 12px;

  border-bottom:
    1px solid
    var(--border-color-strong, #cfcfc8);

  font-size:
    10.5px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    0.035em;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;

  color:
    var(--text-secondary, #5b5d56);
}


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

  padding:
    11px 12px;

  border-bottom:
    1px solid
    var(--border-color, #e0e0da);

  vertical-align:
    middle;

  font-size:
    12px;

  font-weight:
    600;

  color:
    var(--text-primary, #151713);
}


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


.rendiciones-table tbody tr {
  position:
    relative;

  background:
    var(--surface-primary, #ffffff);

  cursor:
    pointer;

  transition:
    background-color 110ms ease;
}


.rendiciones-table tbody tr:hover {
  background:
    var(--surface-secondary, #f8f8f5);
}


.rendiciones-table tbody tr:focus-visible {
  outline:
    2px solid
    var(--text-primary, #34362f);

  outline-offset:
    -2px;
}


.rendiciones-table .is-number {
  text-align:
    right;
}


.rendiciones-table .is-action {
  width:
    48px;

  min-width:
    48px;

  max-width:
    48px;

  padding-left:
    4px;

  padding-right:
    8px;

  text-align:
    right;
}


.rendiciones-table__action-head {
  width:
    48px;
}


/* =========================================================
   CODE CELL
   ========================================================= */

.rendiciones-code-cell {
  min-width:
    155px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;
}


.rendiciones-code-cell__icon {
  width:
    30px;

  height:
    30px;

  flex:
    0 0
    30px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--border-color, #d8d8d2);

  border-radius:
    8px;

  background:
    var(--surface-secondary, #f4f4f1);

  color:
    var(--text-primary, #151713);
}


.rendiciones-code-cell > div:last-child,
.rendiciones-client-cell,
.rendiciones-date-cell,
.rendiciones-number-cell {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.rendiciones-code-cell strong,
.rendiciones-client-cell strong,
.rendiciones-date-cell strong,
.rendiciones-number-cell strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    12px;

  font-weight:
    800;

  color:
    var(--text-primary, #151713);
}


.rendiciones-code-cell span,
.rendiciones-client-cell span,
.rendiciones-date-cell span,
.rendiciones-number-cell span {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10.5px;

  font-weight:
    600;

  color:
    var(--text-muted, #7b7c75);
}


.rendiciones-client-cell {
  min-width:
    165px;
}


.rendiciones-date-cell {
  min-width:
    145px;
}


.rendiciones-number-cell {
  align-items:
    flex-end;
}


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

.rendiciones-money {
  font-weight:
    800;

  white-space:
    nowrap;

  color:
    var(--text-primary, #151713);
}


.rendiciones-money.is-pending,
.is-pending {
  color:
    #a45f17;
}


.rendiciones-money.is-zero {
  color:
    var(--text-muted, #75776f);
}


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

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

  max-width:
    max-content;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    0 8px;

  border:
    1px solid
    var(--border-color, #d6d6d0);

  border-radius:
    999px;

  background:
    var(--surface-secondary, #f5f5f2);

  font-size:
    10.5px;

  line-height:
    1;

  font-weight:
    750;

  white-space:
    nowrap;

  color:
    var(--text-secondary, #5c5e57);
}


.rendiciones-status__dot {
  width:
    6px;

  height:
    6px;

  flex:
    0 0
    6px;

  border-radius:
    50%;

  background:
    currentColor;
}


.rendiciones-status--borrador {
  border-color:
    #cfd0ca;

  background:
    #f3f3f0;

  color:
    #666860;
}


.rendiciones-status--revisando {
  border-color:
    #d9c9a6;

  background:
    #fbf6e9;

  color:
    #8b6722;
}


.rendiciones-status--procesada {
  border-color:
    #afcbb5;

  background:
    #eef7f0;

  color:
    #3f774b;
}


.rendiciones-status--pendiente_reposicion,
.rendiciones-status--pendiente-reposicion {
  border-color:
    #e0bf9f;

  background:
    #fbf0e4;

  color:
    #99591c;
}


.rendiciones-status--repuesta {
  border-color:
    #9fbfc9;

  background:
    #edf6f8;

  color:
    #376d7b;
}


.rendiciones-status--pagada {
  border-color:
    #9ebfa8;

  background:
    #edf6f0;

  color:
    #356b43;
}


.rendiciones-status--anulada {
  border-color:
    #d3aaaa;

  background:
    #faeeee;

  color:
    #9a4040;
}


/* =========================================================
   PAYMENT BADGE
   ========================================================= */

.rendiciones-payment-badge {
  min-height:
    25px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  padding:
    0 8px;

  border:
    1px solid
    var(--border-color, #d8d8d2);

  border-radius:
    999px;

  font-size:
    10.5px;

  font-weight:
    750;

  white-space:
    nowrap;
}


.rendiciones-payment-badge--paid {
  border-color:
    #a8c7b0;

  background:
    #eef7f0;

  color:
    #3e754b;
}


.rendiciones-payment-badge--partial {
  border-color:
    #d5c39f;

  background:
    #fbf5e8;

  color:
    #8d6926;
}


.rendiciones-payment-badge--pending {
  border-color:
    #d6b3a6;

  background:
    #faf0eb;

  color:
    #975d43;
}


/* =========================================================
   REPLENISH VALUE
   ========================================================= */

.rendiciones-replenish-value {
  min-width:
    28px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    flex-end;

  font-weight:
    800;

  color:
    #8e591f;
}


.rendiciones-muted-value {
  color:
    var(--text-muted, #85877f);
}


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

.rendiciones-row-actions {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    flex-end;
}


.rendiciones-action-trigger {
  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    transparent;

  border-radius:
    8px;

  background:
    transparent;

  color:
    var(--text-secondary, #5d5f58);

  cursor:
    pointer;

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


.rendiciones-action-trigger:hover,
.rendiciones-action-trigger[aria-expanded="true"] {
  border-color:
    var(--border-color, #d1d2cb);

  background:
    var(--surface-secondary, #efefeb);

  color:
    var(--text-primary, #151713);
}


.rendiciones-action-menu {
  position:
    absolute;

  top:
    calc(100% + 6px);

  right:
    0;

  z-index:
    80;

  width:
    202px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  padding:
    6px;

  border:
    1px solid
    var(--border-color-strong, #c5c6bf);

  border-radius:
    11px;

  background:
    var(--surface-primary, #ffffff);

  box-shadow:
    0 10px 26px
    rgba(17, 19, 15, 0.12);
}


.rendiciones-action-menu button {
  width:
    100%;

  min-height:
    33px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 9px;

  border:
    0;

  border-radius:
    8px;

  background:
    transparent;

  font-family:
    inherit;

  font-size:
    11.5px;

  font-weight:
    700;

  text-align:
    left;

  color:
    var(--text-primary, #151713);

  cursor:
    pointer;
}


.rendiciones-action-menu button:hover {
  background:
    var(--surface-secondary, #f1f1ed);
}


.rendiciones-action-menu button.is-danger {
  color:
    #a43d3d;
}


.rendiciones-action-menu button.is-danger:hover {
  background:
    #faeeee;
}


.rendiciones-action-menu__separator {
  height:
    1px;

  margin:
    4px 3px;

  background:
    var(--border-color, #deded8);
}


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

.rendiciones-pagination {
  min-height:
    54px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    9px 12px;

  border-top:
    1px solid
    var(--border-color, #d9d9d3);

  background:
    var(--surface-secondary, #fafaf7);
}


.rendiciones-pagination__summary {
  font-size:
    11px;

  font-weight:
    600;

  color:
    var(--text-secondary, #64665f);
}


.rendiciones-pagination__summary strong {
  font-weight:
    800;

  color:
    var(--text-primary, #151713);
}


.rendiciones-pagination__controls {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}


.rendiciones-pagination__controls select {
  height:
    31px;

  padding:
    0 8px;

  border:
    1px solid
    var(--border-color, #d3d4cd);

  border-radius:
    8px;

  outline:
    none;

  background:
    var(--surface-primary, #ffffff);

  font-family:
    inherit;

  font-size:
    10.5px;

  font-weight:
    700;

  color:
    var(--text-primary, #151713);
}


.rendiciones-pagination__button {
  width:
    31px;

  height:
    31px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    var(--border-color, #d3d4cd);

  border-radius:
    8px;

  background:
    var(--surface-primary, #ffffff);

  color:
    var(--text-primary, #151713);

  cursor:
    pointer;
}


.rendiciones-pagination__button:hover:not(:disabled) {
  background:
    var(--surface-secondary, #f0f0ec);
}


.rendiciones-pagination__button:disabled {
  opacity:
    0.42;

  cursor:
    default;
}


.rendiciones-pagination__page {
  min-width:
    106px;

  padding:
    0 5px;

  text-align:
    center;

  font-size:
    10.5px;

  font-weight:
    600;

  color:
    var(--text-secondary, #64665f);
}


.rendiciones-pagination__page strong {
  font-weight:
    800;

  color:
    var(--text-primary, #151713);
}


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

.rendiciones-state {
  min-height:
    320px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    28px;

  border:
    1px solid
    var(--border-color, #d9d9d3);

  border-radius:
    13px;

  background:
    var(--surface-primary, #ffffff);

  text-align:
    center;
}


.rendiciones-state__icon {
  width:
    44px;

  height:
    44px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    3px;

  border:
    1px solid
    var(--border-color, #d7d7d1);

  border-radius:
    12px;

  background:
    var(--surface-secondary, #f4f4f1);

  color:
    var(--text-primary, #151713);
}


.rendiciones-state__icon.is-loading svg {
  animation:
    rendiciones-spin 750ms linear infinite;
}


.rendiciones-state strong {
  font-size:
    14px;

  font-weight:
    800;

  color:
    var(--text-primary, #151713);
}


.rendiciones-state span {
  max-width:
    440px;

  font-size:
    11.5px;

  line-height:
    1.5;

  font-weight:
    550;

  color:
    var(--text-secondary, #686a63);
}


.rendiciones-state .rendiciones-btn {
  margin-top:
    5px;
}


.rendiciones-state--error
.rendiciones-state__icon {
  border-color:
    #d7adad;

  background:
    #faeeee;

  color:
    #a33f3f;
}


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

.rendiciones-toast-layer {
  position:
    fixed;

  top:
    76px;

  right:
    18px;

  z-index:
    500;

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

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  pointer-events:
    none;
}


.rendiciones-toast {
  width:
    100%;

  min-height:
    48px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  padding:
    8px 9px;

  border:
    1px solid
    var(--border-color-strong, #c7c8c1);

  border-radius:
    11px;

  background:
    var(--surface-primary, #ffffff);

  box-shadow:
    0 8px 24px
    rgba(18, 20, 16, 0.12);

  pointer-events:
    auto;

  animation:
    rendiciones-toast-in 160ms ease;
}


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

  transform:
    translateX(10px);

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


.rendiciones-toast__icon {
  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    8px;

  background:
    var(--surface-secondary, #f2f2ef);

  color:
    var(--text-primary, #151713);
}


.rendiciones-toast__message {
  min-width:
    0;

  font-size:
    11.5px;

  line-height:
    1.4;

  font-weight:
    650;

  color:
    var(--text-primary, #151713);
}


.rendiciones-toast__close {
  width:
    26px;

  height:
    26px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(--text-muted, #777970);

  cursor:
    pointer;
}


.rendiciones-toast__close:hover {
  background:
    var(--surface-secondary, #f1f1ed);

  color:
    var(--text-primary, #151713);
}


.rendiciones-toast--success {
  border-color:
    #aac8b2;
}


.rendiciones-toast--success
.rendiciones-toast__icon {
  background:
    #edf6f0;

  color:
    #397148;
}


.rendiciones-toast--error {
  border-color:
    #d7aaaa;
}


.rendiciones-toast--error
.rendiciones-toast__icon {
  background:
    #faeeee;

  color:
    #a43d3d;
}


.rendiciones-toast--warning {
  border-color:
    #d8c19c;
}


.rendiciones-toast--warning
.rendiciones-toast__icon {
  background:
    #fbf5e8;

  color:
    #8d6926;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes rendiciones-spin {

  to {
    transform:
      rotate(360deg);
  }

}


@keyframes rendiciones-toast-in {

  from {
    opacity:
      0;

    transform:
      translateX(10px);
  }

  to {
    opacity:
      1;

    transform:
      translateX(0);
  }

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width:
    1280px
) {

  .rendiciones-filters {
    grid-template-columns:
      repeat(4, minmax(130px, 1fr));
  }


  .rendiciones-filters.is-open {
    max-height:
      310px;
  }

}


@media (
  max-width:
    1040px
) {

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


  .rendiciones-header {
    align-items:
      flex-start;
  }


  .rendiciones-header__actions {
    flex-wrap:
      wrap;

    justify-content:
      flex-end;
  }

}


@media (
  max-width:
    820px
) {

  .rendiciones-page {
    gap:
      10px;
  }


  .rendiciones-header {
    flex-direction:
      column;

    gap:
      13px;

    padding:
      14px;
  }


  .rendiciones-header__actions {
    width:
      100%;

    display:
      grid;

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


  .rendiciones-header__actions
  .rendiciones-btn {
    width:
      100%;
  }


  .rendiciones-toolbar__top {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .rendiciones-search {
    width:
      100%;

    min-width:
      0;
  }


  .rendiciones-toolbar__buttons {
    justify-content:
      flex-end;
  }


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


  .rendiciones-filters.is-open {
    max-height:
      520px;
  }


  .rendiciones-filter-actions {
    grid-column:
      1 / -1;
  }


  .rendiciones-pagination {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .rendiciones-pagination__summary {
    text-align:
      center;
  }


  .rendiciones-pagination__controls {
    justify-content:
      center;

    flex-wrap:
      wrap;
  }

}


@media (
  max-width:
    560px
) {

  .rendiciones-header__copy h1 {
    font-size:
      19px;
  }


  .rendiciones-header__copy p {
    font-size:
      11.5px;
  }


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


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


  .rendiciones-metric {
    min-height:
      88px;
  }


  .rendiciones-filters {
    grid-template-columns:
      1fr;
  }


  .rendiciones-filters.is-open {
    max-height:
      820px;
  }


  .rendiciones-filter-actions {
    grid-column:
      auto;
  }


  .rendiciones-toolbar__buttons {
    width:
      100%;
  }


  .rendiciones-toolbar__buttons
  .rendiciones-btn:first-child {
    flex:
      1;
  }


  .rendiciones-toast-layer {
    top:
      66px;

    right:
      12px;

    width:
      calc(100vw - 24px);
  }

}


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

[data-theme="dark"]
.rendiciones-header,
[data-theme="dark"]
.rendiciones-metric,
[data-theme="dark"]
.rendiciones-toolbar,
[data-theme="dark"]
.rendiciones-table-card,
[data-theme="dark"]
.rendiciones-state,
[data-theme="dark"]
.rendiciones-action-menu,
[data-theme="dark"]
.rendiciones-toast {
  background:
    #10110f;

  border-color:
    #2d2f2b;
}


[data-theme="dark"]
.rendiciones-header__icon,
[data-theme="dark"]
.rendiciones-metric__icon,
[data-theme="dark"]
.rendiciones-code-cell__icon,
[data-theme="dark"]
.rendiciones-state__icon,
[data-theme="dark"]
.rendiciones-toast__icon,
[data-theme="dark"]
.rendiciones-search,
[data-theme="dark"]
.rendiciones-filter select,
[data-theme="dark"]
.rendiciones-filter input,
[data-theme="dark"]
.rendiciones-pagination__controls select,
[data-theme="dark"]
.rendiciones-pagination__button {
  background:
    #171916;

  border-color:
    #343631;
}


[data-theme="dark"]
.rendiciones-table thead,
[data-theme="dark"]
.rendiciones-pagination,
[data-theme="dark"]
.rendiciones-table tbody tr:hover {
  background:
    #151714;
}


[data-theme="dark"]
.rendiciones-table th,
[data-theme="dark"]
.rendiciones-table td,
[data-theme="dark"]
.rendiciones-pagination,
[data-theme="dark"]
.rendiciones-filters.is-open {
  border-color:
    #2d302b;
}


[data-theme="dark"]
.rendiciones-action-menu button:hover,
[data-theme="dark"]
.rendiciones-search__clear:hover,
[data-theme="dark"]
.rendiciones-toast__close:hover {
  background:
    #1b1d19;
}


[data-theme="dark"]
.rendiciones-header__copy h1,
[data-theme="dark"]
.rendiciones-metric__value,
[data-theme="dark"]
.rendiciones-table td,
[data-theme="dark"]
.rendiciones-code-cell strong,
[data-theme="dark"]
.rendiciones-client-cell strong,
[data-theme="dark"]
.rendiciones-date-cell strong,
[data-theme="dark"]
.rendiciones-number-cell strong,
[data-theme="dark"]
.rendiciones-money,
[data-theme="dark"]
.rendiciones-action-menu button,
[data-theme="dark"]
.rendiciones-pagination__summary strong,
[data-theme="dark"]
.rendiciones-pagination__page strong,
[data-theme="dark"]
.rendiciones-state strong,
[data-theme="dark"]
.rendiciones-toast__message,
[data-theme="dark"]
.rendiciones-search input,
[data-theme="dark"]
.rendiciones-filter select,
[data-theme="dark"]
.rendiciones-filter input {
  color:
    #f2f3ef;
}


[data-theme="dark"]
.rendiciones-header__copy p,
[data-theme="dark"]
.rendiciones-header__eyebrow,
[data-theme="dark"]
.rendiciones-metric__label,
[data-theme="dark"]
.rendiciones-metric__meta,
[data-theme="dark"]
.rendiciones-table th,
[data-theme="dark"]
.rendiciones-code-cell span,
[data-theme="dark"]
.rendiciones-client-cell span,
[data-theme="dark"]
.rendiciones-date-cell span,
[data-theme="dark"]
.rendiciones-number-cell span,
[data-theme="dark"]
.rendiciones-pagination__summary,
[data-theme="dark"]
.rendiciones-pagination__page,
[data-theme="dark"]
.rendiciones-state span {
  color:
    #9da098;
}


/* =========================================================
   FIN PARTE 1 DE 3
   ========================================================= *//* =========================================================
   PARTE 2 DE 3

   INCLUYE:
   - MODALES
   - FORMULARIOS
   - CLIENT PICKER
   - BOOK PICKER
   - DETALLE
   - TABS
   - PANELES
   - TABLAS DE DETALLE
   - PAGOS
   - HISTORIAL
   ========================================================= */


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

.rendiciones-modal-root {
  position:
    fixed;

  inset:
    0;

  z-index:
    400;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    center;

  padding:
    78px 18px 22px;

  pointer-events:
    none;
}


body.rendiciones-modal-open {
  overflow:
    hidden;
}


.rendiciones-modal-backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(15, 16, 14, 0.42);

  pointer-events:
    auto;
}


.rendiciones-modal {
  position:
    relative;

  z-index:
    2;

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

  max-height:
    calc(100vh - 100px);

  display:
    flex;

  flex-direction:
    column;

  border:
    1px solid
    var(--border-color-strong, #c7c8c1);

  border-radius:
    16px;

  background:
    var(--surface-primary, #ffffff);

  box-shadow:
    0 18px 50px
    rgba(15, 17, 13, 0.16);

  overflow:
    hidden;

  pointer-events:
    auto;
}


.rendiciones-modal--form {
  width:
    min(
      920px,
      calc(100vw - 36px)
    );
}


.rendiciones-modal--item {
  width:
    min(
      820px,
      calc(100vw - 36px)
    );
}


.rendiciones-modal--confirm {
  width:
    min(
      620px,
      calc(100vw - 36px)
    );
}


.rendiciones-modal--payment {
  width:
    min(
      720px,
      calc(100vw - 36px)
    );
}


.rendiciones-modal--import {
  width:
    min(
      1080px,
      calc(100vw - 36px)
    );
}


.rendiciones-modal--reposition {
  width:
    min(
      980px,
      calc(100vw - 36px)
    );
}


.rendiciones-modal--detail {
  width:
    min(
      1180px,
      calc(100vw - 36px)
    );
}


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

.rendiciones-modal__header {
  min-height:
    74px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    14px 16px;

  border-bottom:
    1px solid
    var(--border-color, #d9d9d3);

  background:
    var(--surface-primary, #ffffff);
}


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


.rendiciones-modal__eyebrow {
  display:
    block;

  margin-bottom:
    3px;

  font-size:
    10.5px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

  color:
    var(--text-muted, #777970);
}


.rendiciones-modal__header h2 {
  margin:
    0;

  font-size:
    18px;

  line-height:
    1.2;

  font-weight:
    850;

  letter-spacing:
    -0.025em;

  color:
    var(--text-primary, #151713);
}


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

  font-size:
    11.5px;

  line-height:
    1.4;

  font-weight:
    550;

  color:
    var(--text-secondary, #666860);
}


.rendiciones-modal__header-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.rendiciones-modal__close {
  width:
    34px;

  height:
    34px;

  flex:
    0 0
    34px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    var(--border-color, #d6d7d0);

  border-radius:
    9px;

  background:
    var(--surface-secondary, #f5f5f2);

  color:
    var(--text-secondary, #62645d);

  cursor:
    pointer;

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


.rendiciones-modal__close:hover {
  border-color:
    var(--border-color-strong, #bfc0b8);

  background:
    var(--surface-tertiary, #ecece7);

  color:
    var(--text-primary, #151713);
}


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

.rendiciones-modal__body {
  min-height:
    0;

  flex:
    1 1
    auto;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  padding:
    16px;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--border-color-strong, #c8c9c2)
    transparent;
}


.rendiciones-detail-body {
  padding:
    14px;
}


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

.rendiciones-modal__footer {
  min-height:
    62px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  padding:
    11px 16px;

  border-top:
    1px solid
    var(--border-color, #d9d9d3);

  background:
    var(--surface-secondary, #fafaf7);
}


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

.rendiciones-modal-loading {
  min-height:
    280px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    28px;

  text-align:
    center;
}


.rendiciones-modal-loading strong {
  font-size:
    13.5px;

  font-weight:
    800;

  color:
    var(--text-primary, #151713);
}


.rendiciones-modal-loading span {
  font-size:
    11.5px;

  font-weight:
    550;

  color:
    var(--text-secondary, #666860);
}


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

.rendiciones-form {
  min-height:
    0;

  display:
    flex;

  flex-direction:
    column;

  flex:
    1;
}


.rendiciones-form-section {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  padding:
    0 0 16px;

  margin-bottom:
    16px;

  border-bottom:
    1px solid
    var(--border-color, #dfdfd9);
}


.rendiciones-form-section:last-child {
  margin-bottom:
    0;

  padding-bottom:
    0;

  border-bottom:
    0;
}


.rendiciones-form-section__heading {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.rendiciones-form-section__heading h3 {
  margin:
    0;

  font-size:
    13px;

  line-height:
    1.3;

  font-weight:
    800;

  color:
    var(--text-primary, #151713);
}


.rendiciones-form-section__heading p {
  margin:
    2px 0 0;

  font-size:
    10.8px;

  line-height:
    1.45;

  font-weight:
    550;

  color:
    var(--text-muted, #777970);
}


.rendiciones-form-grid {
  display:
    grid;

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

  gap:
    11px;
}


.rendiciones-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


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


.rendiciones-field > span {
  font-size:
    10.5px;

  line-height:
    1.25;

  font-weight:
    750;

  color:
    var(--text-secondary, #5f615a);
}


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

  min-width:
    0;

  border:
    1px solid
    var(--border-color, #d5d6cf);

  border-radius:
    9px;

  outline:
    none;

  background:
    var(--surface-secondary, #f8f8f5);

  font-family:
    inherit;

  font-size:
    12px;

  font-weight:
    620;

  color:
    var(--text-primary, #151713);

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


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

  padding:
    0 10px;
}


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

  padding:
    9px 10px;

  resize:
    vertical;

  line-height:
    1.45;
}


.rendiciones-field input:focus,
.rendiciones-field select:focus,
.rendiciones-field textarea:focus {
  border-color:
    var(--text-primary, #34362f);

  background:
    var(--surface-primary, #ffffff);
}


.rendiciones-field input::placeholder,
.rendiciones-field textarea::placeholder {
  color:
    var(--text-muted, #8a8c84);
}


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

.rendiciones-check-row {
  min-height:
    38px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    8px 10px;

  border:
    1px solid
    var(--border-color, #d9d9d3);

  border-radius:
    9px;

  background:
    var(--surface-secondary, #f8f8f5);

  cursor:
    pointer;
}


.rendiciones-check-row input {
  width:
    15px;

  height:
    15px;

  margin:
    0;

  accent-color:
    #1c1f1a;
}


.rendiciones-check-row span {
  font-size:
    11.5px;

  font-weight:
    700;

  color:
    var(--text-primary, #151713);
}


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

.rendiciones-client-picker,
.rendiciones-client-search-wrap,
.rendiciones-book-picker {
  width:
    100%;

  min-width:
    0;
}


.rendiciones-client-search {
  height:
    38px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 10px;

  border:
    1px solid
    var(--border-color, #d5d6cf);

  border-radius:
    9px;

  background:
    var(--surface-secondary, #f8f8f5);

  color:
    var(--text-muted, #777970);
}


.rendiciones-client-search:focus-within {
  border-color:
    var(--text-primary, #34362f);

  background:
    var(--surface-primary, #ffffff);
}


.rendiciones-client-search input {
  min-width:
    0;

  flex:
    1;

  height:
    100%;

  padding:
    0;

  border:
    0;

  outline:
    none;

  background:
    transparent;

  font-family:
    inherit;

  font-size:
    12px;

  font-weight:
    650;

  color:
    var(--text-primary, #151713);
}


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

.rendiciones-client-results {
  width:
    100%;

  max-height:
    240px;

  display:
    flex;

  flex-direction:
    column;

  margin-top:
    7px;

  border:
    1px solid
    var(--border-color, #d8d8d2);

  border-radius:
    10px;

  background:
    var(--surface-primary, #ffffff);

  overflow-y:
    auto;

  overflow-x:
    hidden;
}


.rendiciones-client-results__empty,
.rendiciones-client-results__loading {
  min-height:
    52px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    12px;

  font-size:
    11px;

  font-weight:
    600;

  text-align:
    center;

  color:
    var(--text-muted, #777970);
}


.rendiciones-client-results__loading svg {
  animation:
    rendiciones-spin 750ms linear infinite;
}


.rendiciones-client-results__empty.is-error {
  color:
    #a23f3f;
}


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

  min-height:
    56px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  padding:
    8px 9px;

  border:
    0;

  border-bottom:
    1px solid
    var(--border-color, #e1e1db);

  background:
    transparent;

  font-family:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background-color 110ms ease;
}


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


.rendiciones-client-result:hover {
  background:
    var(--surface-secondary, #f5f5f2);
}


.rendiciones-client-result__icon {
  width:
    32px;

  height:
    32px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--border-color, #d7d8d1);

  border-radius:
    8px;

  background:
    var(--surface-secondary, #f4f4f1);

  color:
    var(--text-primary, #151713);
}


.rendiciones-client-result__copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.rendiciones-client-result__copy strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11.8px;

  font-weight:
    800;

  color:
    var(--text-primary, #151713);
}


.rendiciones-client-result__copy small {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10.2px;

  font-weight:
    600;

  color:
    var(--text-muted, #777970);
}


.rendiciones-client-result__arrow {
  display:
    grid;

  place-items:
    center;

  color:
    var(--text-muted, #81837b);
}


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

.rendiciones-selected-client {
  width:
    100%;

  min-height:
    58px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  padding:
    9px 10px;

  border:
    1px solid
    var(--border-color-strong, #c9cac3);

  border-radius:
    10px;

  background:
    var(--surface-secondary, #f5f5f2);
}


.rendiciones-selected-client__icon {
  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--border-color, #d5d6cf);

  border-radius:
    9px;

  background:
    var(--surface-primary, #ffffff);

  color:
    var(--text-primary, #151713);
}


.rendiciones-selected-client__copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.rendiciones-selected-client__copy strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    12.5px;

  font-weight:
    800;

  color:
    var(--text-primary, #151713);
}


.rendiciones-selected-client__copy span {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10.5px;

  font-weight:
    600;

  color:
    var(--text-muted, #777970);
}


.rendiciones-selected-client__clear {
  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    0;

  border-radius:
    8px;

  background:
    transparent;

  color:
    var(--text-muted, #777970);

  cursor:
    pointer;
}


.rendiciones-selected-client__clear:hover {
  background:
    var(--surface-tertiary, #e8e8e3);

  color:
    var(--text-primary, #151713);
}


/* =========================================================
   DETAIL HEADING
   ========================================================= */

.rendiciones-detail-heading {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;
}


.rendiciones-detail-heading__icon {
  width:
    39px;

  height:
    39px;

  flex:
    0 0
    39px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--border-color, #d5d6cf);

  border-radius:
    10px;

  background:
    var(--surface-secondary, #f4f4f1);

  color:
    var(--text-primary, #151713);
}


.rendiciones-detail-heading__top {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  margin-bottom:
    2px;
}


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

.rendiciones-detail-tabs {
  min-height:
    46px;

  display:
    flex;

  align-items:
    stretch;

  gap:
    2px;

  padding:
    0 12px;

  border-bottom:
    1px solid
    var(--border-color, #d9d9d3);

  background:
    var(--surface-secondary, #fafaf7);

  overflow-x:
    auto;

  overflow-y:
    hidden;

  scrollbar-width:
    none;
}


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


.rendiciones-detail-tab {
  position:
    relative;

  min-width:
    max-content;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    0 11px;

  border:
    0;

  background:
    transparent;

  font-family:
    inherit;

  font-size:
    11px;

  font-weight:
    700;

  color:
    var(--text-secondary, #62645d);

  cursor:
    pointer;
}


.rendiciones-detail-tab::after {
  content:
    "";

  position:
    absolute;

  left:
    10px;

  right:
    10px;

  bottom:
    0;

  height:
    2px;

  border-radius:
    2px 2px 0 0;

  background:
    transparent;
}


.rendiciones-detail-tab:hover {
  color:
    var(--text-primary, #151713);
}


.rendiciones-detail-tab.is-active {
  color:
    var(--text-primary, #151713);
}


.rendiciones-detail-tab.is-active::after {
  background:
    var(--text-primary, #1c1f1a);
}


.rendiciones-detail-tab small {
  min-width:
    18px;

  height:
    18px;

  display:
    inline-grid;

  place-items:
    center;

  padding:
    0 5px;

  border-radius:
    999px;

  background:
    var(--surface-tertiary, #e9e9e4);

  font-size:
    9.5px;

  font-weight:
    800;

  color:
    var(--text-secondary, #64665f);
}


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

.rendiciones-detail-grid {
  display:
    grid;

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

  gap:
    12px;

  margin-bottom:
    12px;
}


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

.rendiciones-detail-panel {
  width:
    100%;

  min-width:
    0;

  margin-bottom:
    12px;

  border:
    1px solid
    var(--border-color, #d9d9d3);

  border-radius:
    12px;

  background:
    var(--surface-primary, #ffffff);

  overflow:
    hidden;
}


.rendiciones-detail-panel:last-child {
  margin-bottom:
    0;
}


.rendiciones-detail-panel__header {
  min-height:
    54px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    10px 12px;

  border-bottom:
    1px solid
    var(--border-color, #ddddda);

  background:
    var(--surface-secondary, #fafaf7);
}


.rendiciones-detail-panel__header h3 {
  margin:
    0;

  font-size:
    12.5px;

  font-weight:
    800;

  color:
    var(--text-primary, #151713);
}


.rendiciones-detail-panel__header p {
  margin:
    2px 0 0;

  font-size:
    10.5px;

  line-height:
    1.35;

  font-weight:
    550;

  color:
    var(--text-muted, #777970);
}


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

.rendiciones-info-grid {
  display:
    grid;

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

  gap:
    0;

  padding:
    4px 12px;
}


.rendiciones-info-item {
  min-width:
    0;

  min-height:
    58px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  padding:
    8px 4px;

  border-bottom:
    1px solid
    var(--border-color, #e3e3de);
}


.rendiciones-info-item:nth-last-child(-n + 2) {
  border-bottom:
    0;
}


.rendiciones-info-item__icon {
  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--border-color, #d8d9d2);

  border-radius:
    8px;

  background:
    var(--surface-secondary, #f5f5f2);

  color:
    var(--text-secondary, #5f615a);
}


.rendiciones-info-item > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.rendiciones-info-item span {
  font-size:
    10px;

  font-weight:
    650;

  color:
    var(--text-muted, #777970);
}


.rendiciones-info-item strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11.5px;

  font-weight:
    800;

  color:
    var(--text-primary, #151713);
}


/* =========================================================
   FINANCIAL SUMMARY
   ========================================================= */

.rendiciones-financial-summary {
  display:
    grid;

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

  gap:
    8px;

  padding:
    12px;
}


.rendiciones-financial-summary article {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  padding:
    10px;

  border:
    1px solid
    var(--border-color, #d9d9d3);

  border-radius:
    10px;

  background:
    var(--surface-secondary, #f8f8f5);
}


.rendiciones-financial-summary article span {
  font-size:
    10px;

  font-weight:
    650;

  color:
    var(--text-muted, #777970);
}


.rendiciones-financial-summary article strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  font-size:
    15px;

  font-weight:
    850;

  color:
    var(--text-primary, #151713);
}


.rendiciones-financial-summary article.is-pending {
  border-color:
    #dac29e;

  background:
    #fbf5e8;
}


.rendiciones-financial-summary article.is-paid {
  border-color:
    #afc9b5;

  background:
    #eef7f0;
}


/* =========================================================
   CLIENT SUMMARY
   ========================================================= */

.rendiciones-client-summary {
  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  padding:
    12px;
}


.rendiciones-client-summary__icon {
  width:
    42px;

  height:
    42px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--border-color, #d6d7d0);

  border-radius:
    10px;

  background:
    var(--surface-secondary, #f4f4f1);

  color:
    var(--text-primary, #151713);
}


.rendiciones-client-summary__copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.rendiciones-client-summary__copy strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    12.5px;

  font-weight:
    800;

  color:
    var(--text-primary, #151713);
}


.rendiciones-client-summary__copy span {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10.5px;

  font-weight:
    600;

  color:
    var(--text-muted, #777970);
}


/* =========================================================
   OBSERVATIONS
   ========================================================= */

.rendiciones-observations {
  padding:
    12px;

  font-size:
    11.5px;

  line-height:
    1.55;

  font-weight:
    550;

  white-space:
    pre-wrap;

  color:
    var(--text-secondary, #5f615a);
}


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

.rendiciones-detail-table-wrap {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    visible;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--border-color-strong, #c8c9c2)
    transparent;
}


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

  min-width:
    760px;

  border-collapse:
    separate;

  border-spacing:
    0;
}


.rendiciones-detail-table th {
  height:
    38px;

  padding:
    0 10px;

  border-bottom:
    1px solid
    var(--border-color-strong, #cfcfc9);

  background:
    var(--surface-secondary, #f4f4f1);

  font-size:
    9.8px;

  font-weight:
    800;

  letter-spacing:
    0.035em;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;

  color:
    var(--text-secondary, #5f615a);
}


.rendiciones-detail-table td {
  padding:
    9px 10px;

  border-bottom:
    1px solid
    var(--border-color, #e1e1dc);

  vertical-align:
    middle;

  font-size:
    11px;

  font-weight:
    620;

  color:
    var(--text-primary, #151713);
}


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


.rendiciones-detail-table .is-number {
  text-align:
    right;
}


.rendiciones-detail-table .is-action {
  width:
    70px;

  text-align:
    right;
}


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

.rendiciones-product-cell {
  min-width:
    190px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;
}


.rendiciones-product-cell__icon {
  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--border-color, #d6d7d0);

  border-radius:
    8px;

  background:
    var(--surface-secondary, #f4f4f1);

  color:
    var(--text-secondary, #5f615a);
}


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

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.rendiciones-product-cell strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11.3px;

  font-weight:
    800;

  color:
    var(--text-primary, #151713);
}


.rendiciones-product-cell span {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    9.8px;

  font-weight:
    600;

  color:
    var(--text-muted, #777970);
}


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

.rendiciones-inline-actions {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;
}


.rendiciones-inline-actions button,
.rendiciones-icon-button {
  width:
    29px;

  height:
    29px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    var(--border-color, #d4d5ce);

  border-radius:
    8px;

  background:
    var(--surface-primary, #ffffff);

  color:
    var(--text-secondary, #62645d);

  cursor:
    pointer;
}


.rendiciones-inline-actions button:hover,
.rendiciones-icon-button:hover {
  background:
    var(--surface-secondary, #f2f2ef);

  color:
    var(--text-primary, #151713);
}


.rendiciones-inline-actions button.is-danger,
.rendiciones-icon-button.is-danger {
  color:
    #a33f3f;
}


.rendiciones-inline-actions button.is-danger:hover,
.rendiciones-icon-button.is-danger:hover {
  border-color:
    #d5adad;

  background:
    #faeeee;
}


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

.rendiciones-detail-empty {
  min-height:
    180px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    24px;

  text-align:
    center;

  color:
    var(--text-muted, #777970);
}


.rendiciones-detail-empty > svg {
  margin-bottom:
    3px;
}


.rendiciones-detail-empty strong {
  font-size:
    12.5px;

  font-weight:
    800;

  color:
    var(--text-primary, #151713);
}


.rendiciones-detail-empty span {
  max-width:
    420px;

  font-size:
    10.8px;

  line-height:
    1.45;

  font-weight:
    550;

  color:
    var(--text-muted, #777970);
}


.rendiciones-detail-empty .rendiciones-btn {
  margin-top:
    5px;
}


/* =========================================================
   PAYMENT SUMMARY
   ========================================================= */

.rendiciones-payment-summary {
  display:
    grid;

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

  gap:
    8px;

  padding:
    12px;

  border-bottom:
    1px solid
    var(--border-color, #dfdfd9);
}


.rendiciones-payment-summary > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  padding:
    9px 10px;

  border:
    1px solid
    var(--border-color, #d8d9d2);

  border-radius:
    9px;

  background:
    var(--surface-secondary, #f7f7f4);
}


.rendiciones-payment-summary span {
  font-size:
    9.8px;

  font-weight:
    650;

  color:
    var(--text-muted, #777970);
}


.rendiciones-payment-summary strong {
  font-size:
    14px;

  font-weight:
    850;

  color:
    var(--text-primary, #151713);
}


.rendiciones-payment-summary .is-pending {
  border-color:
    #d9c09c;

  background:
    #fbf5e8;
}


.rendiciones-payment-summary .is-paid {
  border-color:
    #abc6b1;

  background:
    #edf6f0;
}


/* =========================================================
   PAYMENT LIST
   ========================================================= */

.rendiciones-payment-list {
  display:
    flex;

  flex-direction:
    column;
}


.rendiciones-payment-row {
  min-height:
    58px;

  display:
    grid;

  grid-template-columns:
    34px minmax(150px, 1fr)
    minmax(120px, 1fr)
    auto;

  align-items:
    center;

  gap:
    9px;

  padding:
    9px 12px;

  border-bottom:
    1px solid
    var(--border-color, #e1e1dc);
}


.rendiciones-payment-row:last-child {
  border-bottom:
    0;
}


.rendiciones-payment-row.is-cancelled {
  opacity:
    0.62;
}


.rendiciones-payment-row__icon {
  width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--border-color, #d6d7d0);

  border-radius:
    9px;

  background:
    var(--surface-secondary, #f4f4f1);

  color:
    var(--text-primary, #151713);
}


.rendiciones-payment-row__main {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.rendiciones-payment-row__main strong {
  font-size:
    12px;

  font-weight:
    850;

  color:
    var(--text-primary, #151713);
}


.rendiciones-payment-row__main span {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10px;

  font-weight:
    600;

  color:
    var(--text-muted, #777970);
}


.rendiciones-payment-row__observation {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10.5px;

  font-weight:
    600;

  color:
    var(--text-secondary, #62645d);
}


.rendiciones-payment-row__cancelled {
  padding:
    5px 7px;

  border:
    1px solid
    #d4aaaa;

  border-radius:
    999px;

  background:
    #faeeee;

  font-size:
    9.5px;

  font-weight:
    800;

  color:
    #a13e3e;
}


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

.rendiciones-timeline {
  display:
    flex;

  flex-direction:
    column;

  padding:
    4px 12px 12px;
}


.rendiciones-timeline-item {
  position:
    relative;

  display:
    grid;

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

  gap:
    9px;

  padding:
    10px 0;
}


.rendiciones-timeline-item:not(:last-child)::before {
  content:
    "";

  position:
    absolute;

  top:
    40px;

  bottom:
    -2px;

  left:
    14px;

  width:
    1px;

  background:
    var(--border-color, #d9d9d3);
}


.rendiciones-timeline-item__marker {
  width:
    30px;

  height:
    30px;

  z-index:
    1;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--border-color, #d5d6cf);

  border-radius:
    9px;

  background:
    var(--surface-secondary, #f4f4f1);

  color:
    var(--text-secondary, #62645d);
}


.rendiciones-timeline-item__content {
  min-width:
    0;

  padding-top:
    1px;
}


.rendiciones-timeline-item__heading {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.rendiciones-timeline-item__heading strong {
  font-size:
    11.3px;

  font-weight:
    800;

  color:
    var(--text-primary, #151713);
}


.rendiciones-timeline-item__heading time {
  flex:
    0 0
    auto;

  font-size:
    9.5px;

  font-weight:
    600;

  color:
    var(--text-muted, #7c7e76);
}


.rendiciones-timeline-item__content p {
  margin:
    4px 0 0;

  font-size:
    10.5px;

  line-height:
    1.45;

  font-weight:
    550;

  color:
    var(--text-secondary, #62645d);
}


.rendiciones-history-state-change {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  margin-top:
    6px;
}


.rendiciones-history-state-change span,
.rendiciones-history-state-change strong {
  padding:
    4px 6px;

  border:
    1px solid
    var(--border-color, #d8d8d2);

  border-radius:
    7px;

  background:
    var(--surface-secondary, #f5f5f2);

  font-size:
    9.5px;

  font-weight:
    700;

  color:
    var(--text-secondary, #62645d);
}


.rendiciones-history-state-change strong {
  color:
    var(--text-primary, #151713);
}


/* =========================================================
   DETAIL FOOTER
   ========================================================= */

.rendiciones-detail-footer {
  justify-content:
    space-between;
}


.rendiciones-detail-footer__left,
.rendiciones-detail-footer__right {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


/* =========================================================
   WARNING BOX
   ========================================================= */

.rendiciones-warning-box {
  display:
    grid;

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

  gap:
    9px;

  padding:
    10px;

  margin-bottom:
    12px;

  border:
    1px solid
    #d9c19b;

  border-radius:
    10px;

  background:
    #fbf5e8;

  color:
    #8c6825;
}


.rendiciones-warning-box > svg {
  margin:
    3px auto 0;
}


.rendiciones-warning-box strong {
  font-size:
    11.5px;

  font-weight:
    800;
}


.rendiciones-warning-box p {
  margin:
    2px 0 0;

  font-size:
    10.5px;

  line-height:
    1.45;

  font-weight:
    600;
}


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

[data-theme="dark"]
.rendiciones-modal,
[data-theme="dark"]
.rendiciones-detail-panel,
[data-theme="dark"]
.rendiciones-client-results,
[data-theme="dark"]
.rendiciones-selected-client,
[data-theme="dark"]
.rendiciones-client-search,
[data-theme="dark"]
.rendiciones-field input,
[data-theme="dark"]
.rendiciones-field select,
[data-theme="dark"]
.rendiciones-field textarea,
[data-theme="dark"]
.rendiciones-inline-actions button,
[data-theme="dark"]
.rendiciones-icon-button {
  background:
    #10110f;

  border-color:
    #2f312d;
}


[data-theme="dark"]
.rendiciones-modal__header,
[data-theme="dark"]
.rendiciones-modal__footer,
[data-theme="dark"]
.rendiciones-detail-tabs,
[data-theme="dark"]
.rendiciones-detail-panel__header,
[data-theme="dark"]
.rendiciones-detail-table th,
[data-theme="dark"]
.rendiciones-check-row,
[data-theme="dark"]
.rendiciones-info-item__icon,
[data-theme="dark"]
.rendiciones-client-summary__icon,
[data-theme="dark"]
.rendiciones-product-cell__icon,
[data-theme="dark"]
.rendiciones-payment-row__icon,
[data-theme="dark"]
.rendiciones-timeline-item__marker,
[data-theme="dark"]
.rendiciones-client-result__icon,
[data-theme="dark"]
.rendiciones-selected-client__icon {
  background:
    #171916;

  border-color:
    #343631;
}


[data-theme="dark"]
.rendiciones-modal__header,
[data-theme="dark"]
.rendiciones-modal__footer,
[data-theme="dark"]
.rendiciones-detail-tabs,
[data-theme="dark"]
.rendiciones-detail-panel__header,
[data-theme="dark"]
.rendiciones-form-section,
[data-theme="dark"]
.rendiciones-payment-summary,
[data-theme="dark"]
.rendiciones-detail-table th,
[data-theme="dark"]
.rendiciones-detail-table td,
[data-theme="dark"]
.rendiciones-payment-row,
[data-theme="dark"]
.rendiciones-client-result,
[data-theme="dark"]
.rendiciones-timeline-item:not(:last-child)::before {
  border-color:
    #2e302c;
}


[data-theme="dark"]
.rendiciones-modal__header h2,
[data-theme="dark"]
.rendiciones-form-section__heading h3,
[data-theme="dark"]
.rendiciones-field > span,
[data-theme="dark"]
.rendiciones-field input,
[data-theme="dark"]
.rendiciones-field select,
[data-theme="dark"]
.rendiciones-field textarea,
[data-theme="dark"]
.rendiciones-check-row span,
[data-theme="dark"]
.rendiciones-client-result__copy strong,
[data-theme="dark"]
.rendiciones-selected-client__copy strong,
[data-theme="dark"]
.rendiciones-detail-panel__header h3,
[data-theme="dark"]
.rendiciones-info-item strong,
[data-theme="dark"]
.rendiciones-financial-summary article strong,
[data-theme="dark"]
.rendiciones-client-summary__copy strong,
[data-theme="dark"]
.rendiciones-detail-table td,
[data-theme="dark"]
.rendiciones-product-cell strong,
[data-theme="dark"]
.rendiciones-detail-empty strong,
[data-theme="dark"]
.rendiciones-payment-summary strong,
[data-theme="dark"]
.rendiciones-payment-row__main strong,
[data-theme="dark"]
.rendiciones-timeline-item__heading strong,
[data-theme="dark"]
.rendiciones-history-state-change strong {
  color:
    #f1f2ee;
}


[data-theme="dark"]
.rendiciones-modal__header p,
[data-theme="dark"]
.rendiciones-modal__eyebrow,
[data-theme="dark"]
.rendiciones-form-section__heading p,
[data-theme="dark"]
.rendiciones-client-result__copy small,
[data-theme="dark"]
.rendiciones-selected-client__copy span,
[data-theme="dark"]
.rendiciones-detail-panel__header p,
[data-theme="dark"]
.rendiciones-info-item span,
[data-theme="dark"]
.rendiciones-client-summary__copy span,
[data-theme="dark"]
.rendiciones-observations,
[data-theme="dark"]
.rendiciones-detail-table th,
[data-theme="dark"]
.rendiciones-product-cell span,
[data-theme="dark"]
.rendiciones-detail-empty span,
[data-theme="dark"]
.rendiciones-payment-row__main span,
[data-theme="dark"]
.rendiciones-payment-row__observation,
[data-theme="dark"]
.rendiciones-timeline-item__heading time,
[data-theme="dark"]
.rendiciones-timeline-item__content p {
  color:
    #9da098;
}


/* =========================================================
   RESPONSIVE MODALS
   ========================================================= */

@media (
  max-width:
    900px
) {

  .rendiciones-modal-root {
    padding:
      68px 12px 14px;
  }


  .rendiciones-modal,
  .rendiciones-modal--form,
  .rendiciones-modal--item,
  .rendiciones-modal--confirm,
  .rendiciones-modal--payment,
  .rendiciones-modal--import,
  .rendiciones-modal--reposition,
  .rendiciones-modal--detail {
    width:
      calc(100vw - 24px);

    max-height:
      calc(100vh - 82px);
  }


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


  .rendiciones-payment-row {
    grid-template-columns:
      34px minmax(0, 1fr) auto;
  }


  .rendiciones-payment-row__observation {
    grid-column:
      2 / -1;
  }

}


@media (
  max-width:
    640px
) {

  .rendiciones-modal-root {
    padding:
      58px 8px 8px;
  }


  .rendiciones-modal,
  .rendiciones-modal--form,
  .rendiciones-modal--item,
  .rendiciones-modal--confirm,
  .rendiciones-modal--payment,
  .rendiciones-modal--import,
  .rendiciones-modal--reposition,
  .rendiciones-modal--detail {
    width:
      calc(100vw - 16px);

    max-height:
      calc(100vh - 66px);

    border-radius:
      13px;
  }


  .rendiciones-modal__header {
    min-height:
      66px;

    padding:
      11px 12px;
  }


  .rendiciones-modal__header h2 {
    font-size:
      16px;
  }


  .rendiciones-modal__header p {
    font-size:
      10.5px;
  }


  .rendiciones-modal__body {
    padding:
      12px;
  }


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


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


  .rendiciones-info-grid {
    grid-template-columns:
      1fr;
  }


  .rendiciones-info-item:nth-last-child(-n + 2) {
    border-bottom:
      1px solid
      var(--border-color, #e3e3de);
  }


  .rendiciones-info-item:last-child {
    border-bottom:
      0;
  }


  .rendiciones-financial-summary,
  .rendiciones-payment-summary {
    grid-template-columns:
      1fr;
  }


  .rendiciones-detail-footer {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .rendiciones-detail-footer__left,
  .rendiciones-detail-footer__right {
    width:
      100%;

    flex-wrap:
      wrap;
  }


  .rendiciones-detail-footer__right
  .rendiciones-btn,
  .rendiciones-detail-footer__left
  .rendiciones-btn {
    flex:
      1 1
      auto;
  }


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


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


  .rendiciones-payment-row {
    grid-template-columns:
      32px minmax(0, 1fr) auto;
  }


  .rendiciones-payment-row__observation {
    grid-column:
      1 / -1;
  }


  .rendiciones-timeline-item__heading {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      2px;
  }

}


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

   INCLUYE:
   - REPOSICIONES
   - PREPARACIÓN
   - IMPORTACIÓN
   - FILE DROP
   - RESÚMENES
   - ESTADOS DE REPOSICIÓN
   - AJUSTES MOBILE
   - DARK COMPLETO
   - CORRECCIONES DE OVERFLOW
   - CORRECCIÓN DE MENÚ DE ACCIONES
   ========================================================= */


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

.rendiciones-reposicion-card {
  width:
    100%;

  margin:
    10px 12px;

  width:
    calc(100% - 24px);

  border:
    1px solid
    var(--border-color, #d9d9d3);

  border-radius:
    11px;

  background:
    var(--surface-primary, #ffffff);

  overflow:
    hidden;
}


.rendiciones-reposicion-card__header {
  min-height:
    58px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    10px 11px;

  border-bottom:
    1px solid
    var(--border-color, #ddddda);

  background:
    var(--surface-secondary, #fafaf7);
}


.rendiciones-reposicion-card__header > div:first-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.rendiciones-reposicion-card__header > div:first-child > span {
  font-size:
    10px;

  font-weight:
    600;

  color:
    var(--text-muted, #777970);
}


.rendiciones-reposicion-card__title {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  flex-wrap:
    wrap;
}


.rendiciones-reposicion-card__title strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    12px;

  font-weight:
    800;

  color:
    var(--text-primary, #151713);
}


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

.rendiciones-reposicion-card__metrics {
  display:
    grid;

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

  gap:
    8px;

  padding:
    10px 11px;
}


.rendiciones-reposicion-card__metrics > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  padding:
    8px 9px;

  border:
    1px solid
    var(--border-color, #ddddda);

  border-radius:
    8px;

  background:
    var(--surface-secondary, #f8f8f5);
}


.rendiciones-reposicion-card__metrics span {
  font-size:
    9.5px;

  font-weight:
    650;

  color:
    var(--text-muted, #777970);
}


.rendiciones-reposicion-card__metrics strong {
  font-size:
    13px;

  font-weight:
    850;

  color:
    var(--text-primary, #151713);
}


/* =========================================================
   REPOSITION PRODUCTS
   ========================================================= */

.rendiciones-reposicion-products {
  display:
    flex;

  flex-direction:
    column;

  padding:
    0 11px 10px;
}


.rendiciones-reposicion-products > div {
  min-height:
    32px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    5px 0;

  border-bottom:
    1px solid
    var(--border-color, #e4e4df);
}


.rendiciones-reposicion-products > div:last-of-type {
  border-bottom:
    0;
}


.rendiciones-reposicion-products span {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10.5px;

  font-weight:
    600;

  color:
    var(--text-secondary, #62645d);
}


.rendiciones-reposicion-products strong {
  flex:
    0 0
    auto;

  font-size:
    10.5px;

  font-weight:
    800;

  color:
    var(--text-primary, #151713);
}


.rendiciones-reposicion-products small {
  display:
    block;

  padding-top:
    6px;

  font-size:
    9.5px;

  font-weight:
    650;

  color:
    var(--text-muted, #777970);
}


/* =========================================================
   REPOSITION SUMMARY
   ========================================================= */

.rendiciones-reposition-summary {
  display:
    grid;

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

  gap:
    8px;

  margin-bottom:
    12px;
}


.rendiciones-reposition-summary article {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  padding:
    10px;

  border:
    1px solid
    var(--border-color, #d9d9d3);

  border-radius:
    9px;

  background:
    var(--surface-secondary, #f8f8f5);
}


.rendiciones-reposition-summary article span {
  font-size:
    9.8px;

  font-weight:
    650;

  color:
    var(--text-muted, #777970);
}


.rendiciones-reposition-summary article strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  font-size:
    15px;

  font-weight:
    850;

  color:
    var(--text-primary, #151713);
}


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

.rendiciones-status--reposicion-borrador {
  border-color:
    #cfd0ca;

  background:
    #f3f3f0;

  color:
    #666860;
}


.rendiciones-status--reposicion-pendiente {
  border-color:
    #dcc49c;

  background:
    #fbf5e8;

  color:
    #8d6926;
}


.rendiciones-status--reposicion-preparando {
  border-color:
    #c2b5d7;

  background:
    #f4f0fa;

  color:
    #6c5791;
}


.rendiciones-status--reposicion-preparada {
  border-color:
    #aec8b5;

  background:
    #eef7f0;

  color:
    #3f774b;
}


.rendiciones-status--reposicion-despachada {
  border-color:
    #a9c3cf;

  background:
    #eef6fa;

  color:
    #3e6f82;
}


.rendiciones-status--reposicion-recibida {
  border-color:
    #9dc3aa;

  background:
    #edf7f0;

  color:
    #356d44;
}


.rendiciones-status--reposicion-cancelada {
  border-color:
    #d5aaaa;

  background:
    #faeeee;

  color:
    #9d4141;
}


/* =========================================================
   PREPARATION LIST
   ========================================================= */

.rendiciones-preparation-list {
  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

  margin-top:
    12px;
}


.rendiciones-preparation-item {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  align-items:
    end;

  gap:
    12px;

  padding:
    9px 10px;

  border:
    1px solid
    var(--border-color, #d9d9d3);

  border-radius:
    9px;

  background:
    var(--surface-secondary, #fafaf7);
}


.rendiciones-preparation-item__book {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.rendiciones-preparation-item__book strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11.5px;

  font-weight:
    800;

  color:
    var(--text-primary, #151713);
}


.rendiciones-preparation-item__book span {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    9.8px;

  font-weight:
    600;

  color:
    var(--text-muted, #777970);
}


/* =========================================================
   FILE DROP
   ========================================================= */

.rendiciones-file-drop {
  position:
    relative;

  width:
    100%;

  min-height:
    118px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  padding:
    18px;

  border:
    1px dashed
    var(--border-color-strong, #bfc0b8);

  border-radius:
    11px;

  background:
    var(--surface-secondary, #fafaf7);

  color:
    var(--text-secondary, #62645d);

  cursor:
    pointer;

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


.rendiciones-file-drop:hover {
  border-color:
    var(--text-primary, #454740);

  background:
    var(--surface-tertiary, #f1f1ed);

  color:
    var(--text-primary, #151713);
}


.rendiciones-file-drop input {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  opacity:
    0;

  cursor:
    pointer;
}


.rendiciones-file-drop strong {
  margin-top:
    3px;

  font-size:
    12px;

  font-weight:
    800;

  color:
    var(--text-primary, #151713);
}


.rendiciones-file-drop span {
  font-size:
    10px;

  font-weight:
    600;

  color:
    var(--text-muted, #777970);
}


/* =========================================================
   IMPORT FILE INFO
   ========================================================= */

.rendiciones-import-file-info {
  width:
    100%;

  min-height:
    50px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  margin-top:
    8px;

  padding:
    8px 10px;

  border:
    1px solid
    var(--border-color, #d9d9d3);

  border-radius:
    9px;

  background:
    var(--surface-secondary, #f8f8f5);

  color:
    var(--text-secondary, #62645d);
}


.rendiciones-import-file-info > svg {
  margin:
    auto;
}


.rendiciones-import-file-info > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.rendiciones-import-file-info strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11.5px;

  font-weight:
    800;

  color:
    var(--text-primary, #151713);
}


.rendiciones-import-file-info span {
  font-size:
    9.8px;

  font-weight:
    600;

  color:
    var(--text-muted, #777970);
}


/* =========================================================
   SPECIAL VALUES
   ========================================================= */

.rendiciones-detail-table td .is-pending,
.rendiciones-reposition-summary .is-pending,
.rendiciones-preparation-item .is-pending {
  font-weight:
    800;

  color:
    #a15d18;
}


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

.rendiciones-page,
.rendiciones-header,
.rendiciones-metrics,
.rendiciones-toolbar,
.rendiciones-content,
.rendiciones-table-card,
.rendiciones-detail-panel,
.rendiciones-modal,
.rendiciones-modal__body,
.rendiciones-form,
.rendiciones-form-section,
.rendiciones-detail-grid {
  min-width:
    0;

  max-width:
    100%;
}


.rendiciones-page img,
.rendiciones-modal img {
  max-width:
    100%;
}


/* =========================================================
   ACTION MENU OVERFLOW FIX

   EVITA QUE EL MENÚ QUEDE ATRAPADO
   DENTRO DE LA TABLA
   ========================================================= */

.rendiciones-table-card,
.rendiciones-table-scroll,
.rendiciones-table,
.rendiciones-table tbody,
.rendiciones-table tr,
.rendiciones-table td {
  overflow:
    visible;
}


.rendiciones-table-scroll {
  overflow-x:
    auto;

  overflow-y:
    visible;
}


.rendiciones-table__action-cell {
  position:
    relative;

  overflow:
    visible !important;
}


.rendiciones-row-actions {
  position:
    static;
}


.rendiciones-action-trigger {
  position:
    relative;

  z-index:
    5;
}


.rendiciones-action-menu {
  position:
    absolute;

  top:
    calc(100% - 6px);

  right:
    8px;

  z-index:
    120;

  margin-top:
    0;
}


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

.rendiciones-table tbody tr:nth-last-child(-n + 2)
.rendiciones-action-menu {
  top:
    auto;

  bottom:
    calc(100% - 6px);
}


/* =========================================================
   PERO EN TABLAS CORTAS ABRIR HACIA ABAJO
   ========================================================= */

.rendiciones-table tbody tr:only-child
.rendiciones-action-menu,
.rendiciones-table tbody tr:first-child:nth-last-child(2)
.rendiciones-action-menu {
  top:
    calc(100% - 6px);

  bottom:
    auto;
}


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

.rendiciones-modal__body::-webkit-scrollbar,
.rendiciones-table-scroll::-webkit-scrollbar,
.rendiciones-detail-table-wrap::-webkit-scrollbar,
.rendiciones-client-results::-webkit-scrollbar {
  width:
    8px;

  height:
    8px;
}


.rendiciones-modal__body::-webkit-scrollbar-track,
.rendiciones-table-scroll::-webkit-scrollbar-track,
.rendiciones-detail-table-wrap::-webkit-scrollbar-track,
.rendiciones-client-results::-webkit-scrollbar-track {
  background:
    transparent;
}


.rendiciones-modal__body::-webkit-scrollbar-thumb,
.rendiciones-table-scroll::-webkit-scrollbar-thumb,
.rendiciones-detail-table-wrap::-webkit-scrollbar-thumb,
.rendiciones-client-results::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    var(--border-color-strong, #c4c5be);
}


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

.rendiciones-btn:focus-visible,
.rendiciones-action-trigger:focus-visible,
.rendiciones-pagination__button:focus-visible,
.rendiciones-modal__close:focus-visible,
.rendiciones-inline-actions button:focus-visible,
.rendiciones-icon-button:focus-visible,
.rendiciones-client-result:focus-visible,
.rendiciones-detail-tab:focus-visible {
  outline:
    2px solid
    var(--text-primary, #252722);

  outline-offset:
    2px;
}


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

[data-theme="dark"]
.rendiciones-reposicion-card,
[data-theme="dark"]
.rendiciones-preparation-item,
[data-theme="dark"]
.rendiciones-file-drop,
[data-theme="dark"]
.rendiciones-import-file-info,
[data-theme="dark"]
.rendiciones-reposition-summary article,
[data-theme="dark"]
.rendiciones-reposicion-card__metrics > div {
  background:
    #10110f;

  border-color:
    #30322e;
}


[data-theme="dark"]
.rendiciones-reposicion-card__header {
  background:
    #171916;

  border-color:
    #30322e;
}


[data-theme="dark"]
.rendiciones-reposicion-products > div {
  border-color:
    #2c2e2a;
}


[data-theme="dark"]
.rendiciones-file-drop:hover {
  background:
    #171916;

  border-color:
    #555850;
}


[data-theme="dark"]
.rendiciones-reposicion-card__title strong,
[data-theme="dark"]
.rendiciones-reposicion-card__metrics strong,
[data-theme="dark"]
.rendiciones-reposition-summary article strong,
[data-theme="dark"]
.rendiciones-preparation-item__book strong,
[data-theme="dark"]
.rendiciones-file-drop strong,
[data-theme="dark"]
.rendiciones-import-file-info strong {
  color:
    #f1f2ee;
}


[data-theme="dark"]
.rendiciones-reposicion-card__header > div:first-child > span,
[data-theme="dark"]
.rendiciones-reposicion-card__metrics span,
[data-theme="dark"]
.rendiciones-reposicion-products span,
[data-theme="dark"]
.rendiciones-reposicion-products small,
[data-theme="dark"]
.rendiciones-reposition-summary article span,
[data-theme="dark"]
.rendiciones-preparation-item__book span,
[data-theme="dark"]
.rendiciones-file-drop span,
[data-theme="dark"]
.rendiciones-import-file-info span {
  color:
    #9da098;
}


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

[data-theme="dark"]
.rendiciones-status--borrador,
[data-theme="dark"]
.rendiciones-status--reposicion-borrador {
  border-color:
    #474a43;

  background:
    #1c1e1a;

  color:
    #babdb5;
}


[data-theme="dark"]
.rendiciones-status--revisando,
[data-theme="dark"]
.rendiciones-status--reposicion-pendiente {
  border-color:
    #66552f;

  background:
    #251f13;

  color:
    #d4b467;
}


[data-theme="dark"]
.rendiciones-status--procesada,
[data-theme="dark"]
.rendiciones-status--pagada,
[data-theme="dark"]
.rendiciones-status--reposicion-preparada,
[data-theme="dark"]
.rendiciones-status--reposicion-recibida {
  border-color:
    #385842;

  background:
    #162219;

  color:
    #7fc28e;
}


[data-theme="dark"]
.rendiciones-status--pendiente_reposicion,
[data-theme="dark"]
.rendiciones-status--pendiente-reposicion {
  border-color:
    #6d492b;

  background:
    #281b12;

  color:
    #d59758;
}


[data-theme="dark"]
.rendiciones-status--repuesta,
[data-theme="dark"]
.rendiciones-status--reposicion-despachada {
  border-color:
    #355966;

  background:
    #142127;

  color:
    #76b2c5;
}


[data-theme="dark"]
.rendiciones-status--reposicion-preparando {
  border-color:
    #50416c;

  background:
    #1e1828;

  color:
    #a791cf;
}


[data-theme="dark"]
.rendiciones-status--anulada,
[data-theme="dark"]
.rendiciones-status--reposicion-cancelada {
  border-color:
    #673a3a;

  background:
    #281616;

  color:
    #d47c7c;
}


/* =========================================================
   DARK PAYMENT BADGES
   ========================================================= */

[data-theme="dark"]
.rendiciones-payment-badge--paid {
  border-color:
    #385842;

  background:
    #162219;

  color:
    #7fc28e;
}


[data-theme="dark"]
.rendiciones-payment-badge--partial {
  border-color:
    #66552f;

  background:
    #251f13;

  color:
    #d4b467;
}


[data-theme="dark"]
.rendiciones-payment-badge--pending {
  border-color:
    #694536;

  background:
    #281b15;

  color:
    #d38a69;
}


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

[data-theme="dark"]
.rendiciones-financial-summary article,
[data-theme="dark"]
.rendiciones-payment-summary > div {
  background:
    #171916;

  border-color:
    #343631;
}


[data-theme="dark"]
.rendiciones-financial-summary article.is-pending,
[data-theme="dark"]
.rendiciones-payment-summary .is-pending {
  border-color:
    #66552f;

  background:
    #251f13;
}


[data-theme="dark"]
.rendiciones-financial-summary article.is-paid,
[data-theme="dark"]
.rendiciones-payment-summary .is-paid {
  border-color:
    #385842;

  background:
    #162219;
}


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

[data-theme="dark"]
.rendiciones-warning-box {
  border-color:
    #66552f;

  background:
    #251f13;

  color:
    #d4b467;
}


/* =========================================================
   DARK DANGER ACTIONS
   ========================================================= */

[data-theme="dark"]
.rendiciones-action-menu button.is-danger:hover,
[data-theme="dark"]
.rendiciones-inline-actions button.is-danger:hover,
[data-theme="dark"]
.rendiciones-icon-button.is-danger:hover {
  border-color:
    #653939;

  background:
    #281616;

  color:
    #dc7c7c;
}


/* =========================================================
   RESPONSIVE REPOSITION
   ========================================================= */

@media (
  max-width:
    900px
) {

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


  .rendiciones-reposicion-card__metrics {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .rendiciones-preparation-item {
    grid-template-columns:
      minmax(0, 1fr)
      130px;
  }

}


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

@media (
  max-width:
    760px
) {

  .rendiciones-reposicion-card__header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .rendiciones-reposicion-card__header
  .rendiciones-btn {
    width:
      100%;
  }


  .rendiciones-preparation-item {
    grid-template-columns:
      1fr;
  }


  .rendiciones-preparation-item
  .rendiciones-field {
    width:
      100%;
  }


  .rendiciones-detail-table {
    min-width:
      680px;
  }

}


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

@media (
  max-width:
    560px
) {

  .rendiciones-reposition-summary {
    grid-template-columns:
      1fr 1fr;
  }


  .rendiciones-reposicion-card {
    width:
      calc(100% - 16px);

    margin:
      8px;
  }


  .rendiciones-reposicion-card__metrics {
    grid-template-columns:
      1fr 1fr;

    padding:
      8px;
  }


  .rendiciones-reposicion-card__header {
    padding:
      9px;
  }


  .rendiciones-reposicion-products {
    padding:
      0 9px 9px;
  }


  .rendiciones-file-drop {
    min-height:
      102px;

    padding:
      14px;
  }


  .rendiciones-preparation-item {
    padding:
      8px;
  }


  .rendiciones-detail-table-wrap {
    margin:
      0;

    width:
      100%;
  }


  .rendiciones-detail-table {
    min-width:
      640px;
  }

}


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

@media (
  max-width:
    390px
) {

  .rendiciones-reposition-summary {
    grid-template-columns:
      1fr;
  }


  .rendiciones-reposicion-card__metrics {
    grid-template-columns:
      1fr;
  }

}


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

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

  .rendiciones-page *,
  .rendiciones-page *::before,
  .rendiciones-page *::after,
  .rendiciones-modal-root *,
  .rendiciones-modal-root *::before,
  .rendiciones-modal-root *::after {
    scroll-behavior:
      auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }

}


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

@media print {

  .rendiciones-header__actions,
  .rendiciones-toolbar,
  .rendiciones-row-actions,
  .rendiciones-pagination,
  .rendiciones-modal-root,
  .rendiciones-toast-layer {
    display:
      none !important;
  }


  .rendiciones-page {
    display:
      block;

    color:
      #000000;
  }


  .rendiciones-table-card {
    border:
      1px solid
      #bdbdbd;

    box-shadow:
      none;
  }


  .rendiciones-table {
    min-width:
      0;
  }

}


/* =========================================================
   FIN RENDICIONES.CSS
   ========================================================= *//* =========================================================
   RENDICIONES
   FIX MODO CLARO
   ICONOS + BOTONES

   AGREGAR AL FINAL DE:
   frontend/src/pages/rendiciones/rendiciones.css
   ========================================================= */


/* =========================================================
   ICONOS GENERALES · LIGHT
   ========================================================= */

html:not([data-theme="dark"])
.rendiciones-page [data-lucide],
html:not([data-theme="dark"])
.rendiciones-modal-root [data-lucide],
body:not([data-theme="dark"])
.rendiciones-page [data-lucide],
body:not([data-theme="dark"])
.rendiciones-modal-root [data-lucide] {
  color:
    #242720 !important;

  stroke:
    #242720 !important;
}


/* =========================================================
   CONTENEDORES DE ICONOS · LIGHT
   ========================================================= */

html:not([data-theme="dark"])
.rendiciones-header__icon,
html:not([data-theme="dark"])
.rendiciones-metric__icon,
html:not([data-theme="dark"])
.rendiciones-code-cell__icon,
html:not([data-theme="dark"])
.rendiciones-state__icon,
html:not([data-theme="dark"])
.rendiciones-detail-heading__icon,
html:not([data-theme="dark"])
.rendiciones-info-item__icon,
html:not([data-theme="dark"])
.rendiciones-client-summary__icon,
html:not([data-theme="dark"])
.rendiciones-product-cell__icon,
html:not([data-theme="dark"])
.rendiciones-payment-row__icon,
html:not([data-theme="dark"])
.rendiciones-timeline-item__marker,
html:not([data-theme="dark"])
.rendiciones-client-result__icon,
html:not([data-theme="dark"])
.rendiciones-selected-client__icon {
  background:
    #f2f2ee !important;

  border-color:
    #c7c8c0 !important;

  color:
    #20231d !important;
}


html:not([data-theme="dark"])
.rendiciones-header__icon svg,
html:not([data-theme="dark"])
.rendiciones-metric__icon svg,
html:not([data-theme="dark"])
.rendiciones-code-cell__icon svg,
html:not([data-theme="dark"])
.rendiciones-state__icon svg,
html:not([data-theme="dark"])
.rendiciones-detail-heading__icon svg,
html:not([data-theme="dark"])
.rendiciones-info-item__icon svg,
html:not([data-theme="dark"])
.rendiciones-client-summary__icon svg,
html:not([data-theme="dark"])
.rendiciones-product-cell__icon svg,
html:not([data-theme="dark"])
.rendiciones-payment-row__icon svg,
html:not([data-theme="dark"])
.rendiciones-timeline-item__marker svg,
html:not([data-theme="dark"])
.rendiciones-client-result__icon svg,
html:not([data-theme="dark"])
.rendiciones-selected-client__icon svg {
  color:
    #20231d !important;

  stroke:
    #20231d !important;
}


/* =========================================================
   BOTÓN PRIMARY
   TEXTO E ICONO BLANCOS SOLO AQUÍ
   ========================================================= */

.rendiciones-btn--primary {
  background:
    #171a15 !important;

  border-color:
    #171a15 !important;

  color:
    #ffffff !important;
}


.rendiciones-btn--primary span,
.rendiciones-btn--primary svg,
.rendiciones-btn--primary [data-lucide] {
  color:
    #ffffff !important;

  stroke:
    #ffffff !important;
}


.rendiciones-btn--primary:hover:not(:disabled) {
  background:
    #090b08 !important;

  border-color:
    #090b08 !important;

  color:
    #ffffff !important;
}


/* =========================================================
   BOTÓN SECONDARY · LIGHT
   ========================================================= */

html:not([data-theme="dark"])
.rendiciones-btn--secondary {
  background:
    #ffffff !important;

  border-color:
    #c8c9c1 !important;

  color:
    #20231d !important;
}


html:not([data-theme="dark"])
.rendiciones-btn--secondary span,
html:not([data-theme="dark"])
.rendiciones-btn--secondary svg,
html:not([data-theme="dark"])
.rendiciones-btn--secondary [data-lucide] {
  color:
    #20231d !important;

  stroke:
    #20231d !important;
}


html:not([data-theme="dark"])
.rendiciones-btn--secondary:hover:not(:disabled) {
  background:
    #f0f0ec !important;

  border-color:
    #aeb0a7 !important;

  color:
    #11130f !important;
}


/* =========================================================
   BOTÓN GHOST · LIGHT
   ========================================================= */

html:not([data-theme="dark"])
.rendiciones-btn--ghost {
  background:
    transparent !important;

  color:
    #383b34 !important;
}


html:not([data-theme="dark"])
.rendiciones-btn--ghost svg,
html:not([data-theme="dark"])
.rendiciones-btn--ghost [data-lucide] {
  color:
    #383b34 !important;

  stroke:
    #383b34 !important;
}


html:not([data-theme="dark"])
.rendiciones-btn--ghost:hover:not(:disabled) {
  background:
    #ecece7 !important;

  color:
    #11130f !important;
}


/* =========================================================
   BOTÓN ICONO · LIGHT
   ========================================================= */

html:not([data-theme="dark"])
.rendiciones-btn--icon {
  background:
    #f0f0ec !important;

  border-color:
    #c7c8c0 !important;

  color:
    #20231d !important;
}


html:not([data-theme="dark"])
.rendiciones-btn--icon svg,
html:not([data-theme="dark"])
.rendiciones-btn--icon [data-lucide] {
  color:
    #20231d !important;

  stroke:
    #20231d !important;
}


html:not([data-theme="dark"])
.rendiciones-btn--icon:hover:not(:disabled) {
  background:
    #dedfd8 !important;

  border-color:
    #aaaCA3 !important;
}


/* =========================================================
   BOTÓN DANGER
   ========================================================= */

.rendiciones-btn--danger,
.rendiciones-btn--danger span,
.rendiciones-btn--danger svg,
.rendiciones-btn--danger [data-lucide] {
  color:
    #ffffff !important;

  stroke:
    #ffffff !important;
}


/* =========================================================
   ACTION TRIGGER · LIGHT
   ========================================================= */

html:not([data-theme="dark"])
.rendiciones-action-trigger {
  color:
    #30332c !important;
}


html:not([data-theme="dark"])
.rendiciones-action-trigger svg,
html:not([data-theme="dark"])
.rendiciones-action-trigger [data-lucide] {
  color:
    #30332c !important;

  stroke:
    #30332c !important;
}


/* =========================================================
   SEARCH · LIGHT
   ========================================================= */

html:not([data-theme="dark"])
.rendiciones-search {
  background:
    #f6f6f2 !important;

  border-color:
    #c9cac2 !important;

  color:
    #3c3f37 !important;
}


html:not([data-theme="dark"])
.rendiciones-search svg,
html:not([data-theme="dark"])
.rendiciones-search [data-lucide] {
  color:
    #4e5149 !important;

  stroke:
    #4e5149 !important;
}


html:not([data-theme="dark"])
.rendiciones-search input {
  color:
    #1d201a !important;
}


html:not([data-theme="dark"])
.rendiciones-search input::placeholder {
  color:
    #62655d !important;

  opacity:
    1 !important;
}


/* =========================================================
   MÉTRICAS · LIGHT
   ========================================================= */

html:not([data-theme="dark"])
.rendiciones-metric {
  color:
    #1c1f19 !important;
}


html:not([data-theme="dark"])
.rendiciones-metric__label {
  color:
    #5a5d54 !important;
}


html:not([data-theme="dark"])
.rendiciones-metric__value {
  color:
    #171a15 !important;
}


html:not([data-theme="dark"])
.rendiciones-metric__meta {
  color:
    #5e6158 !important;
}


/* =========================================================
   HEADER · LIGHT
   ========================================================= */

html:not([data-theme="dark"])
.rendiciones-header__eyebrow {
  color:
    #565951 !important;
}


html:not([data-theme="dark"])
.rendiciones-header__copy h1 {
  color:
    #171a15 !important;
}


html:not([data-theme="dark"])
.rendiciones-header__copy p {
  color:
    #5b5e56 !important;
}


/* =========================================================
   EMPTY STATE · LIGHT
   ========================================================= */

html:not([data-theme="dark"])
.rendiciones-state strong {
  color:
    #1b1e18 !important;
}


html:not([data-theme="dark"])
.rendiciones-state span {
  color:
    #5d6058 !important;
}


html:not([data-theme="dark"])
.rendiciones-state__icon {
  background:
    #f1f1ed !important;

  border-color:
    #c7c8c0 !important;

  color:
    #242720 !important;
}


html:not([data-theme="dark"])
.rendiciones-state__icon svg,
html:not([data-theme="dark"])
.rendiciones-state__icon [data-lucide] {
  color:
    #242720 !important;

  stroke:
    #242720 !important;
}


/* =========================================================
   FILTROS · LIGHT
   ========================================================= */

html:not([data-theme="dark"])
.rendiciones-filter label {
  color:
    #4f524a !important;
}


html:not([data-theme="dark"])
.rendiciones-filter input,
html:not([data-theme="dark"])
.rendiciones-filter select {
  color:
    #1d201a !important;

  background:
    #f7f7f3 !important;

  border-color:
    #c9cac2 !important;
}


/* =========================================================
   MODALES · LIGHT
   ========================================================= */

html:not([data-theme="dark"])
.rendiciones-modal__header h2,
html:not([data-theme="dark"])
.rendiciones-form-section__heading h3,
html:not([data-theme="dark"])
.rendiciones-detail-panel__header h3,
html:not([data-theme="dark"])
.rendiciones-selected-client__copy strong,
html:not([data-theme="dark"])
.rendiciones-client-result__copy strong,
html:not([data-theme="dark"])
.rendiciones-product-cell strong {
  color:
    #171a15 !important;
}


html:not([data-theme="dark"])
.rendiciones-modal__eyebrow,
html:not([data-theme="dark"])
.rendiciones-modal__header p,
html:not([data-theme="dark"])
.rendiciones-form-section__heading p,
html:not([data-theme="dark"])
.rendiciones-detail-panel__header p,
html:not([data-theme="dark"])
.rendiciones-selected-client__copy span,
html:not([data-theme="dark"])
.rendiciones-client-result__copy small,
html:not([data-theme="dark"])
.rendiciones-product-cell span {
  color:
    #5d6058 !important;
}


/* =========================================================
   DARK
   SECUNDARIOS OSCUROS, PRIMARY BLANCO
   ========================================================= */

[data-theme="dark"]
.rendiciones-btn--secondary {
  background:
    #151714 !important;

  border-color:
    #3b3e38 !important;

  color:
    #e8eae4 !important;
}


[data-theme="dark"]
.rendiciones-btn--secondary span,
[data-theme="dark"]
.rendiciones-btn--secondary svg,
[data-theme="dark"]
.rendiciones-btn--secondary [data-lucide] {
  color:
    #e8eae4 !important;

  stroke:
    #e8eae4 !important;
}


[data-theme="dark"]
.rendiciones-btn--secondary:hover:not(:disabled) {
  background:
    #20221e !important;

  border-color:
    #50534b !important;
}


[data-theme="dark"]
.rendiciones-btn--icon {
  background:
    #171916 !important;

  border-color:
    #3a3d37 !important;

  color:
    #e9ebe5 !important;
}


[data-theme="dark"]
.rendiciones-btn--icon svg,
[data-theme="dark"]
.rendiciones-btn--icon [data-lucide] {
  color:
    #e9ebe5 !important;

  stroke:
    #e9ebe5 !important;
}


/* =========================================================
   DISABLED
   EVITA BOTONES BLANCOS CON TEXTO BLANCO
   ========================================================= */

html:not([data-theme="dark"])
.rendiciones-btn--secondary:disabled,
html:not([data-theme="dark"])
.rendiciones-btn--icon:disabled {
  background:
    #f4f4f1 !important;

  border-color:
    #d4d5ce !important;

  color:
    #7a7d74 !important;

  opacity:
    0.68 !important;
}


html:not([data-theme="dark"])
.rendiciones-btn--secondary:disabled span,
html:not([data-theme="dark"])
.rendiciones-btn--secondary:disabled svg,
html:not([data-theme="dark"])
.rendiciones-btn--secondary:disabled [data-lucide],
html:not([data-theme="dark"])
.rendiciones-btn--icon:disabled svg,
html:not([data-theme="dark"])
.rendiciones-btn--icon:disabled [data-lucide] {
  color:
    #7a7d74 !important;

  stroke:
    #7a7d74 !important;
}


[data-theme="dark"]
.rendiciones-btn--secondary:disabled,
[data-theme="dark"]
.rendiciones-btn--icon:disabled {
  background:
    #171916 !important;

  border-color:
    #343631 !important;

  color:
    #777b72 !important;

  opacity:
    0.7 !important;
}


[data-theme="dark"]
.rendiciones-btn--secondary:disabled span,
[data-theme="dark"]
.rendiciones-btn--secondary:disabled svg,
[data-theme="dark"]
.rendiciones-btn--secondary:disabled [data-lucide],
[data-theme="dark"]
.rendiciones-btn--icon:disabled svg,
[data-theme="dark"]
.rendiciones-btn--icon:disabled [data-lucide] {
  color:
    #777b72 !important;

  stroke:
    #777b72 !important;
}/* =========================================================
   RENDICIONES
   FIX DEFINITIVO ICONOS MODO OSCURO

   SOPORTA:
   - data-theme="dark" en <html>
   - data-theme="dark" en <body>
   ========================================================= */


/* =========================================================
   ICONOS GENERALES
   ========================================================= */

html[data-theme="dark"]
.rendiciones-page [data-lucide],
html[data-theme="dark"]
.rendiciones-modal-root [data-lucide],
body[data-theme="dark"]
.rendiciones-page [data-lucide],
body[data-theme="dark"]
.rendiciones-modal-root [data-lucide] {
  color:
    #e9ebe5 !important;

  stroke:
    #e9ebe5 !important;
}


/* =========================================================
   CONTENEDORES DE ICONOS
   ========================================================= */

html[data-theme="dark"]
.rendiciones-header__icon,
html[data-theme="dark"]
.rendiciones-metric__icon,
html[data-theme="dark"]
.rendiciones-code-cell__icon,
html[data-theme="dark"]
.rendiciones-state__icon,
html[data-theme="dark"]
.rendiciones-detail-heading__icon,
html[data-theme="dark"]
.rendiciones-info-item__icon,
html[data-theme="dark"]
.rendiciones-client-summary__icon,
html[data-theme="dark"]
.rendiciones-product-cell__icon,
html[data-theme="dark"]
.rendiciones-payment-row__icon,
html[data-theme="dark"]
.rendiciones-timeline-item__marker,
html[data-theme="dark"]
.rendiciones-client-result__icon,
html[data-theme="dark"]
.rendiciones-selected-client__icon,

body[data-theme="dark"]
.rendiciones-header__icon,
body[data-theme="dark"]
.rendiciones-metric__icon,
body[data-theme="dark"]
.rendiciones-code-cell__icon,
body[data-theme="dark"]
.rendiciones-state__icon,
body[data-theme="dark"]
.rendiciones-detail-heading__icon,
body[data-theme="dark"]
.rendiciones-info-item__icon,
body[data-theme="dark"]
.rendiciones-client-summary__icon,
body[data-theme="dark"]
.rendiciones-product-cell__icon,
body[data-theme="dark"]
.rendiciones-payment-row__icon,
body[data-theme="dark"]
.rendiciones-timeline-item__marker,
body[data-theme="dark"]
.rendiciones-client-result__icon,
body[data-theme="dark"]
.rendiciones-selected-client__icon {
  background:
    #171916 !important;

  border-color:
    #353832 !important;

  color:
    #e9ebe5 !important;
}


/* =========================================================
   SVG DENTRO DE CONTENEDORES
   ========================================================= */

html[data-theme="dark"]
.rendiciones-header__icon svg,
html[data-theme="dark"]
.rendiciones-metric__icon svg,
html[data-theme="dark"]
.rendiciones-code-cell__icon svg,
html[data-theme="dark"]
.rendiciones-state__icon svg,
html[data-theme="dark"]
.rendiciones-detail-heading__icon svg,
html[data-theme="dark"]
.rendiciones-info-item__icon svg,
html[data-theme="dark"]
.rendiciones-client-summary__icon svg,
html[data-theme="dark"]
.rendiciones-product-cell__icon svg,
html[data-theme="dark"]
.rendiciones-payment-row__icon svg,
html[data-theme="dark"]
.rendiciones-timeline-item__marker svg,
html[data-theme="dark"]
.rendiciones-client-result__icon svg,
html[data-theme="dark"]
.rendiciones-selected-client__icon svg,

body[data-theme="dark"]
.rendiciones-header__icon svg,
body[data-theme="dark"]
.rendiciones-metric__icon svg,
body[data-theme="dark"]
.rendiciones-code-cell__icon svg,
body[data-theme="dark"]
.rendiciones-state__icon svg,
body[data-theme="dark"]
.rendiciones-detail-heading__icon svg,
body[data-theme="dark"]
.rendiciones-info-item__icon svg,
body[data-theme="dark"]
.rendiciones-client-summary__icon svg,
body[data-theme="dark"]
.rendiciones-product-cell__icon svg,
body[data-theme="dark"]
.rendiciones-payment-row__icon svg,
body[data-theme="dark"]
.rendiciones-timeline-item__marker svg,
body[data-theme="dark"]
.rendiciones-client-result__icon svg,
body[data-theme="dark"]
.rendiciones-selected-client__icon svg {
  color:
    #e9ebe5 !important;

  stroke:
    #e9ebe5 !important;
}


/* =========================================================
   BOTONES SECONDARY DARK
   ========================================================= */

html[data-theme="dark"]
.rendiciones-btn--secondary,
body[data-theme="dark"]
.rendiciones-btn--secondary {
  background:
    #151714 !important;

  border-color:
    #3b3e38 !important;

  color:
    #e9ebe5 !important;
}


html[data-theme="dark"]
.rendiciones-btn--secondary svg,
html[data-theme="dark"]
.rendiciones-btn--secondary [data-lucide],
body[data-theme="dark"]
.rendiciones-btn--secondary svg,
body[data-theme="dark"]
.rendiciones-btn--secondary [data-lucide] {
  color:
    #e9ebe5 !important;

  stroke:
    #e9ebe5 !important;
}


/* =========================================================
   BOTÓN ICON DARK
   ========================================================= */

html[data-theme="dark"]
.rendiciones-btn--icon,
body[data-theme="dark"]
.rendiciones-btn--icon {
  background:
    #171916 !important;

  border-color:
    #3b3e38 !important;

  color:
    #e9ebe5 !important;
}


html[data-theme="dark"]
.rendiciones-btn--icon svg,
html[data-theme="dark"]
.rendiciones-btn--icon [data-lucide],
body[data-theme="dark"]
.rendiciones-btn--icon svg,
body[data-theme="dark"]
.rendiciones-btn--icon [data-lucide] {
  color:
    #e9ebe5 !important;

  stroke:
    #e9ebe5 !important;
}


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

html[data-theme="dark"]
.rendiciones-search,
body[data-theme="dark"]
.rendiciones-search {
  background:
    #151714 !important;

  border-color:
    #373a34 !important;

  color:
    #aeb2a8 !important;
}


html[data-theme="dark"]
.rendiciones-search svg,
html[data-theme="dark"]
.rendiciones-search [data-lucide],
body[data-theme="dark"]
.rendiciones-search svg,
body[data-theme="dark"]
.rendiciones-search [data-lucide] {
  color:
    #aeb2a8 !important;

  stroke:
    #aeb2a8 !important;
}


html[data-theme="dark"]
.rendiciones-search input,
body[data-theme="dark"]
.rendiciones-search input {
  color:
    #f1f2ee !important;
}


html[data-theme="dark"]
.rendiciones-search input::placeholder,
body[data-theme="dark"]
.rendiciones-search input::placeholder {
  color:
    #8f9389 !important;

  opacity:
    1 !important;
}


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

html[data-theme="dark"]
.rendiciones-btn--primary,
body[data-theme="dark"]
.rendiciones-btn--primary {
  background:
    #1d211b !important;

  border-color:
    #2e332b !important;

  color:
    #ffffff !important;
}


html[data-theme="dark"]
.rendiciones-btn--primary span,
html[data-theme="dark"]
.rendiciones-btn--primary svg,
html[data-theme="dark"]
.rendiciones-btn--primary [data-lucide],
body[data-theme="dark"]
.rendiciones-btn--primary span,
body[data-theme="dark"]
.rendiciones-btn--primary svg,
body[data-theme="dark"]
.rendiciones-btn--primary [data-lucide] {
  color:
    #ffffff !important;

  stroke:
    #ffffff !important;
}


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

html[data-theme="dark"]
.rendiciones-filter-count,
body[data-theme="dark"]
.rendiciones-filter-count {
  background:
    #f0f1ed !important;

  color:
    #11130f !important;
}


/* =========================================================
   MENU ACCIONES DARK
   ========================================================= */

html[data-theme="dark"]
.rendiciones-action-trigger,
body[data-theme="dark"]
.rendiciones-action-trigger {
  color:
    #d7dad2 !important;
}


html[data-theme="dark"]
.rendiciones-action-trigger svg,
html[data-theme="dark"]
.rendiciones-action-trigger [data-lucide],
body[data-theme="dark"]
.rendiciones-action-trigger svg,
body[data-theme="dark"]
.rendiciones-action-trigger [data-lucide] {
  color:
    #d7dad2 !important;

  stroke:
    #d7dad2 !important;
}


/* =========================================================
   TABS / INLINE ACTIONS DARK
   ========================================================= */

html[data-theme="dark"]
.rendiciones-detail-tab svg,
html[data-theme="dark"]
.rendiciones-inline-actions svg,
html[data-theme="dark"]
.rendiciones-icon-button svg,
body[data-theme="dark"]
.rendiciones-detail-tab svg,
body[data-theme="dark"]
.rendiciones-inline-actions svg,
body[data-theme="dark"]
.rendiciones-icon-button svg {
  color:
    #d9dcd4 !important;

  stroke:
    #d9dcd4 !important;
}


/* =========================================================
   FIX LIGHT SELECTOR CUANDO EL THEME ESTÁ EN BODY

   LAS REGLAS ANTERIORES:
   html:not([data-theme="dark"])
   SE CUMPLEN AUNQUE BODY SEA DARK.

   ESTE BLOQUE LAS SOBRESCRIBE.
   ========================================================= */

html:not([data-theme="dark"])
body[data-theme="dark"]
.rendiciones-page [data-lucide],
html:not([data-theme="dark"])
body[data-theme="dark"]
.rendiciones-modal-root [data-lucide] {
  color:
    #e9ebe5 !important;

  stroke:
    #e9ebe5 !important;
}


html:not([data-theme="dark"])
body[data-theme="dark"]
.rendiciones-header__icon,
html:not([data-theme="dark"])
body[data-theme="dark"]
.rendiciones-metric__icon,
html:not([data-theme="dark"])
body[data-theme="dark"]
.rendiciones-state__icon {
  background:
    #171916 !important;

  border-color:
    #353832 !important;

  color:
    #e9ebe5 !important;
}


html:not([data-theme="dark"])
body[data-theme="dark"]
.rendiciones-header__icon svg,
html:not([data-theme="dark"])
body[data-theme="dark"]
.rendiciones-metric__icon svg,
html:not([data-theme="dark"])
body[data-theme="dark"]
.rendiciones-state__icon svg {
  color:
    #e9ebe5 !important;

  stroke:
    #e9ebe5 !important;
}/* =========================================================
   RENDICIONES
   FIX BOTÓN CERRAR MODAL
   ========================================================= */

.rendiciones-modal__close {
  background:
    transparent !important;

  border-color:
    var(--border-color-strong, #c7c8c1) !important;

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


.rendiciones-modal__close svg,
.rendiciones-modal__close [data-lucide] {
  color:
    currentColor !important;

  stroke:
    currentColor !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

html:not([data-theme="dark"])
.rendiciones-modal__close,
body:not([data-theme="dark"])
.rendiciones-modal__close {
  background:
    #f3f3ef !important;

  border-color:
    #c8c9c1 !important;

  color:
    #20231d !important;
}


html:not([data-theme="dark"])
.rendiciones-modal__close svg,
html:not([data-theme="dark"])
.rendiciones-modal__close [data-lucide],
body:not([data-theme="dark"])
.rendiciones-modal__close svg,
body:not([data-theme="dark"])
.rendiciones-modal__close [data-lucide] {
  color:
    #20231d !important;

  stroke:
    #20231d !important;
}


html:not([data-theme="dark"])
.rendiciones-modal__close:hover,
body:not([data-theme="dark"])
.rendiciones-modal__close:hover {
  background:
    #e6e7e1 !important;

  border-color:
    #aeb0a7 !important;

  color:
    #11130f !important;
}


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

html[data-theme="dark"]
.rendiciones-modal__close,
body[data-theme="dark"]
.rendiciones-modal__close {
  background:
    #171916 !important;

  border-color:
    #3b3e38 !important;

  color:
    #f0f2ec !important;
}


html[data-theme="dark"]
.rendiciones-modal__close svg,
html[data-theme="dark"]
.rendiciones-modal__close [data-lucide],
body[data-theme="dark"]
.rendiciones-modal__close svg,
body[data-theme="dark"]
.rendiciones-modal__close [data-lucide] {
  color:
    #f0f2ec !important;

  stroke:
    #f0f2ec !important;
}


html[data-theme="dark"]
.rendiciones-modal__close:hover,
body[data-theme="dark"]
.rendiciones-modal__close:hover {
  background:
    #232620 !important;

  border-color:
    #565a51 !important;

  color:
    #ffffff !important;
}/* =========================================================
   RENDICIONES · FULL WIDTH / FULL HEIGHT
   DARK MODE NEGRO REAL
   AGREGAR AL FINAL
   ========================================================= */


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

.app-content:has(.rendiciones-page) {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  min-height:
    100%;

  margin:
    0 !important;

  padding:
    10px 12px !important;
}


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

#rendicionesPageMount {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  min-height:
    100%;

  margin:
    0 !important;

  padding:
    0 !important;

  flex:
    1 1 auto !important;

  align-self:
    stretch !important;

  justify-self:
    stretch !important;

  overflow-x:
    clip !important;

  overflow-y:
    visible !important;
}


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

.rendiciones-page {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  min-height:
    calc(
      100dvh -
      var(--topbar-height, 68px) -
      20px
    );

  margin:
    0 !important;

  padding:
    0 !important;

  overflow-x:
    clip !important;

  overflow-y:
    visible !important;
}


/* =========================================================
   MAIN BLOCKS
   ========================================================= */

.rendiciones-header,
.rendiciones-metrics,
.rendiciones-toolbar,
.rendiciones-content,
.rendiciones-table-card {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;
}


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

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

  max-width:
    none;

  min-width:
    0;
}


.rendiciones-table {
  width:
    100%;

  min-width:
    100%;

  max-width:
    none;
}


/* =========================================================
   DARK MODE · NEGRO REAL
   ========================================================= */

html[data-theme="dark"]
.rendiciones-page,

body.dark
.rendiciones-page {
  color:
    #ffffff !important;

  background:
    #000000 !important;
}


/* =========================================================
   DARK · APP CONTENT
   ========================================================= */

html[data-theme="dark"]
.app-content:has(.rendiciones-page),

body.dark
.app-content:has(.rendiciones-page) {
  background:
    #000000 !important;
}


/* =========================================================
   DARK · MOUNT
   ========================================================= */

html[data-theme="dark"]
#rendicionesPageMount,

body.dark
#rendicionesPageMount {
  background:
    #000000 !important;
}


/* =========================================================
   DARK · PRINCIPAL SURFACES
   ========================================================= */

html[data-theme="dark"]
.rendiciones-header,

html[data-theme="dark"]
.rendiciones-metric,

html[data-theme="dark"]
.rendiciones-toolbar,

html[data-theme="dark"]
.rendiciones-table-card,

html[data-theme="dark"]
.rendiciones-state,

html[data-theme="dark"]
.rendiciones-action-menu,

html[data-theme="dark"]
.rendiciones-toast,

body.dark
.rendiciones-header,

body.dark
.rendiciones-metric,

body.dark
.rendiciones-toolbar,

body.dark
.rendiciones-table-card,

body.dark
.rendiciones-state,

body.dark
.rendiciones-action-menu,

body.dark
.rendiciones-toast {
  background:
    #050505 !important;

  border-color:
    #242424 !important;
}


/* =========================================================
   DARK · SECONDARY SURFACES
   ========================================================= */

html[data-theme="dark"]
.rendiciones-header__icon,

html[data-theme="dark"]
.rendiciones-metric__icon,

html[data-theme="dark"]
.rendiciones-code-cell__icon,

html[data-theme="dark"]
.rendiciones-state__icon,

html[data-theme="dark"]
.rendiciones-toast__icon,

html[data-theme="dark"]
.rendiciones-search,

html[data-theme="dark"]
.rendiciones-filter select,

html[data-theme="dark"]
.rendiciones-filter input,

html[data-theme="dark"]
.rendiciones-pagination__controls select,

html[data-theme="dark"]
.rendiciones-pagination__button,

body.dark
.rendiciones-header__icon,

body.dark
.rendiciones-metric__icon,

body.dark
.rendiciones-code-cell__icon,

body.dark
.rendiciones-state__icon,

body.dark
.rendiciones-toast__icon,

body.dark
.rendiciones-search,

body.dark
.rendiciones-filter select,

body.dark
.rendiciones-filter input,

body.dark
.rendiciones-pagination__controls select,

body.dark
.rendiciones-pagination__button {
  background:
    #0a0a0a !important;

  border-color:
    #2b2b2b !important;
}


/* =========================================================
   DARK · TABLE HEADER / PAGINATION
   ========================================================= */

html[data-theme="dark"]
.rendiciones-table thead,

html[data-theme="dark"]
.rendiciones-pagination,

html[data-theme="dark"]
.rendiciones-table tbody tr:hover,

body.dark
.rendiciones-table thead,

body.dark
.rendiciones-pagination,

body.dark
.rendiciones-table tbody tr:hover {
  background:
    #0a0a0a !important;
}


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

html[data-theme="dark"]
.rendiciones-table tbody tr,

body.dark
.rendiciones-table tbody tr {
  background:
    #050505 !important;
}


/* =========================================================
   DARK · BORDERS
   ========================================================= */

html[data-theme="dark"]
.rendiciones-table th,

html[data-theme="dark"]
.rendiciones-table td,

html[data-theme="dark"]
.rendiciones-pagination,

html[data-theme="dark"]
.rendiciones-filters.is-open,

body.dark
.rendiciones-table th,

body.dark
.rendiciones-table td,

body.dark
.rendiciones-pagination,

body.dark
.rendiciones-filters.is-open {
  border-color:
    #242424 !important;
}


/* =========================================================
   DARK · MAIN TEXT
   ========================================================= */

html[data-theme="dark"]
.rendiciones-header__copy h1,

html[data-theme="dark"]
.rendiciones-metric__value,

html[data-theme="dark"]
.rendiciones-table td,

html[data-theme="dark"]
.rendiciones-code-cell strong,

html[data-theme="dark"]
.rendiciones-client-cell strong,

html[data-theme="dark"]
.rendiciones-date-cell strong,

html[data-theme="dark"]
.rendiciones-number-cell strong,

html[data-theme="dark"]
.rendiciones-money,

html[data-theme="dark"]
.rendiciones-action-menu button,

html[data-theme="dark"]
.rendiciones-pagination__summary strong,

html[data-theme="dark"]
.rendiciones-pagination__page strong,

html[data-theme="dark"]
.rendiciones-state strong,

html[data-theme="dark"]
.rendiciones-toast__message,

html[data-theme="dark"]
.rendiciones-search input,

html[data-theme="dark"]
.rendiciones-filter select,

html[data-theme="dark"]
.rendiciones-filter input,

body.dark
.rendiciones-header__copy h1,

body.dark
.rendiciones-metric__value,

body.dark
.rendiciones-table td,

body.dark
.rendiciones-code-cell strong,

body.dark
.rendiciones-client-cell strong,

body.dark
.rendiciones-date-cell strong,

body.dark
.rendiciones-number-cell strong,

body.dark
.rendiciones-money,

body.dark
.rendiciones-action-menu button,

body.dark
.rendiciones-pagination__summary strong,

body.dark
.rendiciones-pagination__page strong,

body.dark
.rendiciones-state strong,

body.dark
.rendiciones-toast__message,

body.dark
.rendiciones-search input,

body.dark
.rendiciones-filter select,

body.dark
.rendiciones-filter input {
  color:
    #ffffff !important;
}


/* =========================================================
   DARK · SECONDARY TEXT
   ========================================================= */

html[data-theme="dark"]
.rendiciones-header__copy p,

html[data-theme="dark"]
.rendiciones-header__eyebrow,

html[data-theme="dark"]
.rendiciones-metric__label,

html[data-theme="dark"]
.rendiciones-metric__meta,

html[data-theme="dark"]
.rendiciones-table th,

html[data-theme="dark"]
.rendiciones-code-cell span,

html[data-theme="dark"]
.rendiciones-client-cell span,

html[data-theme="dark"]
.rendiciones-date-cell span,

html[data-theme="dark"]
.rendiciones-number-cell span,

html[data-theme="dark"]
.rendiciones-pagination__summary,

html[data-theme="dark"]
.rendiciones-pagination__page,

html[data-theme="dark"]
.rendiciones-state span,

body.dark
.rendiciones-header__copy p,

body.dark
.rendiciones-header__eyebrow,

body.dark
.rendiciones-metric__label,

body.dark
.rendiciones-metric__meta,

body.dark
.rendiciones-table th,

body.dark
.rendiciones-code-cell span,

body.dark
.rendiciones-client-cell span,

body.dark
.rendiciones-date-cell span,

body.dark
.rendiciones-number-cell span,

body.dark
.rendiciones-pagination__summary,

body.dark
.rendiciones-pagination__page,

body.dark
.rendiciones-state span {
  color:
    #d0d0d0 !important;
}


/* =========================================================
   DARK · SEARCH
   ========================================================= */

html[data-theme="dark"]
.rendiciones-search:focus-within,

body.dark
.rendiciones-search:focus-within {
  background:
    #111111 !important;

  border-color:
    #484848 !important;
}


/* =========================================================
   DARK · FILTERS
   ========================================================= */

html[data-theme="dark"]
.rendiciones-filter select:focus,

html[data-theme="dark"]
.rendiciones-filter input:focus,

body.dark
.rendiciones-filter select:focus,

body.dark
.rendiciones-filter input:focus {
  background:
    #111111 !important;

  border-color:
    #484848 !important;
}


/* =========================================================
   DARK · ACTION MENU
   ========================================================= */

html[data-theme="dark"]
.rendiciones-action-menu,

body.dark
.rendiciones-action-menu {
  background:
    #050505 !important;

  border-color:
    #333333 !important;

  color:
    #ffffff !important;
}


html[data-theme="dark"]
.rendiciones-action-menu button:hover,

body.dark
.rendiciones-action-menu button:hover {
  background:
    #111111 !important;
}


/* =========================================================
   DARK · MODAL
   ========================================================= */

html[data-theme="dark"]
.rendiciones-modal,

body.dark
.rendiciones-modal {
  background:
    #050505 !important;

  border-color:
    #333333 !important;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK · MODAL HEADER / FOOTER
   ========================================================= */

html[data-theme="dark"]
.rendiciones-modal__header,

html[data-theme="dark"]
.rendiciones-modal__footer,

html[data-theme="dark"]
.rendiciones-detail-tabs,

html[data-theme="dark"]
.rendiciones-detail-panel__header,

body.dark
.rendiciones-modal__header,

body.dark
.rendiciones-modal__footer,

body.dark
.rendiciones-detail-tabs,

body.dark
.rendiciones-detail-panel__header {
  background:
    #0a0a0a !important;

  border-color:
    #242424 !important;
}


/* =========================================================
   DARK · MODAL BODY
   ========================================================= */

html[data-theme="dark"]
.rendiciones-modal__body,

body.dark
.rendiciones-modal__body {
  background:
    #050505 !important;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK · MODAL PANELS
   ========================================================= */

html[data-theme="dark"]
.rendiciones-detail-panel,

html[data-theme="dark"]
.rendiciones-client-results,

html[data-theme="dark"]
.rendiciones-selected-client,

html[data-theme="dark"]
.rendiciones-client-search,

html[data-theme="dark"]
.rendiciones-field input,

html[data-theme="dark"]
.rendiciones-field select,

html[data-theme="dark"]
.rendiciones-field textarea,

html[data-theme="dark"]
.rendiciones-inline-actions button,

html[data-theme="dark"]
.rendiciones-icon-button,

body.dark
.rendiciones-detail-panel,

body.dark
.rendiciones-client-results,

body.dark
.rendiciones-selected-client,

body.dark
.rendiciones-client-search,

body.dark
.rendiciones-field input,

body.dark
.rendiciones-field select,

body.dark
.rendiciones-field textarea,

body.dark
.rendiciones-inline-actions button,

body.dark
.rendiciones-icon-button {
  background:
    #050505 !important;

  border-color:
    #2b2b2b !important;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK · MODAL SECONDARY ITEMS
   ========================================================= */

html[data-theme="dark"]
.rendiciones-check-row,

html[data-theme="dark"]
.rendiciones-info-item__icon,

html[data-theme="dark"]
.rendiciones-client-summary__icon,

html[data-theme="dark"]
.rendiciones-product-cell__icon,

html[data-theme="dark"]
.rendiciones-payment-row__icon,

html[data-theme="dark"]
.rendiciones-timeline-item__marker,

html[data-theme="dark"]
.rendiciones-client-result__icon,

html[data-theme="dark"]
.rendiciones-selected-client__icon,

body.dark
.rendiciones-check-row,

body.dark
.rendiciones-info-item__icon,

body.dark
.rendiciones-client-summary__icon,

body.dark
.rendiciones-product-cell__icon,

body.dark
.rendiciones-payment-row__icon,

body.dark
.rendiciones-timeline-item__marker,

body.dark
.rendiciones-client-result__icon,

body.dark
.rendiciones-selected-client__icon {
  background:
    #0a0a0a !important;

  border-color:
    #2b2b2b !important;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK · MODAL TEXT
   ========================================================= */

html[data-theme="dark"]
.rendiciones-modal__header h2,

html[data-theme="dark"]
.rendiciones-form-section__heading h3,

html[data-theme="dark"]
.rendiciones-field > span,

html[data-theme="dark"]
.rendiciones-field input,

html[data-theme="dark"]
.rendiciones-field select,

html[data-theme="dark"]
.rendiciones-field textarea,

html[data-theme="dark"]
.rendiciones-check-row span,

html[data-theme="dark"]
.rendiciones-client-result__copy strong,

html[data-theme="dark"]
.rendiciones-selected-client__copy strong,

html[data-theme="dark"]
.rendiciones-detail-panel__header h3,

html[data-theme="dark"]
.rendiciones-info-item strong,

html[data-theme="dark"]
.rendiciones-financial-summary article strong,

html[data-theme="dark"]
.rendiciones-client-summary__copy strong,

html[data-theme="dark"]
.rendiciones-detail-table td,

html[data-theme="dark"]
.rendiciones-product-cell strong,

html[data-theme="dark"]
.rendiciones-detail-empty strong,

html[data-theme="dark"]
.rendiciones-payment-summary strong,

html[data-theme="dark"]
.rendiciones-payment-row__main strong,

html[data-theme="dark"]
.rendiciones-timeline-item__heading strong,

html[data-theme="dark"]
.rendiciones-history-state-change strong,

body.dark
.rendiciones-modal__header h2,

body.dark
.rendiciones-form-section__heading h3,

body.dark
.rendiciones-field > span,

body.dark
.rendiciones-field input,

body.dark
.rendiciones-field select,

body.dark
.rendiciones-field textarea,

body.dark
.rendiciones-check-row span,

body.dark
.rendiciones-client-result__copy strong,

body.dark
.rendiciones-selected-client__copy strong,

body.dark
.rendiciones-detail-panel__header h3,

body.dark
.rendiciones-info-item strong,

body.dark
.rendiciones-financial-summary article strong,

body.dark
.rendiciones-client-summary__copy strong,

body.dark
.rendiciones-detail-table td,

body.dark
.rendiciones-product-cell strong,

body.dark
.rendiciones-detail-empty strong,

body.dark
.rendiciones-payment-summary strong,

body.dark
.rendiciones-payment-row__main strong,

body.dark
.rendiciones-timeline-item__heading strong,

body.dark
.rendiciones-history-state-change strong {
  color:
    #ffffff !important;
}


/* =========================================================
   DARK · MODAL SECONDARY TEXT
   ========================================================= */

html[data-theme="dark"]
.rendiciones-modal__header p,

html[data-theme="dark"]
.rendiciones-modal__eyebrow,

html[data-theme="dark"]
.rendiciones-form-section__heading p,

html[data-theme="dark"]
.rendiciones-client-result__copy small,

html[data-theme="dark"]
.rendiciones-selected-client__copy span,

html[data-theme="dark"]
.rendiciones-detail-panel__header p,

html[data-theme="dark"]
.rendiciones-info-item span,

html[data-theme="dark"]
.rendiciones-client-summary__copy span,

html[data-theme="dark"]
.rendiciones-observations,

html[data-theme="dark"]
.rendiciones-detail-table th,

html[data-theme="dark"]
.rendiciones-product-cell span,

html[data-theme="dark"]
.rendiciones-detail-empty span,

html[data-theme="dark"]
.rendiciones-payment-row__main span,

html[data-theme="dark"]
.rendiciones-payment-row__observation,

html[data-theme="dark"]
.rendiciones-timeline-item__heading time,

html[data-theme="dark"]
.rendiciones-timeline-item__content p,

body.dark
.rendiciones-modal__header p,

body.dark
.rendiciones-modal__eyebrow,

body.dark
.rendiciones-form-section__heading p,

body.dark
.rendiciones-client-result__copy small,

body.dark
.rendiciones-selected-client__copy span,

body.dark
.rendiciones-detail-panel__header p,

body.dark
.rendiciones-info-item span,

body.dark
.rendiciones-client-summary__copy span,

body.dark
.rendiciones-observations,

body.dark
.rendiciones-detail-table th,

body.dark
.rendiciones-product-cell span,

body.dark
.rendiciones-detail-empty span,

body.dark
.rendiciones-payment-row__main span,

body.dark
.rendiciones-payment-row__observation,

body.dark
.rendiciones-timeline-item__heading time,

body.dark
.rendiciones-timeline-item__content p {
  color:
    #d0d0d0 !important;
}


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

html[data-theme="dark"]
.rendiciones-detail-table th,

body.dark
.rendiciones-detail-table th {
  background:
    #0a0a0a !important;

  border-color:
    #242424 !important;
}


html[data-theme="dark"]
.rendiciones-detail-table td,

body.dark
.rendiciones-detail-table td {
  background:
    #050505 !important;

  border-color:
    #242424 !important;
}


/* =========================================================
   DARK · FINANCIAL CARDS
   ========================================================= */

html[data-theme="dark"]
.rendiciones-financial-summary article,

html[data-theme="dark"]
.rendiciones-payment-summary > div,

body.dark
.rendiciones-financial-summary article,

body.dark
.rendiciones-payment-summary > div {
  background:
    #0a0a0a !important;

  border-color:
    #242424 !important;
}


/* =========================================================
   DARK · REPOSITION
   ========================================================= */

html[data-theme="dark"]
.rendiciones-reposicion-card,

html[data-theme="dark"]
.rendiciones-preparation-item,

html[data-theme="dark"]
.rendiciones-file-drop,

html[data-theme="dark"]
.rendiciones-import-file-info,

html[data-theme="dark"]
.rendiciones-reposition-summary article,

html[data-theme="dark"]
.rendiciones-reposicion-card__metrics > div,

body.dark
.rendiciones-reposicion-card,

body.dark
.rendiciones-preparation-item,

body.dark
.rendiciones-file-drop,

body.dark
.rendiciones-import-file-info,

body.dark
.rendiciones-reposition-summary article,

body.dark
.rendiciones-reposicion-card__metrics > div {
  background:
    #050505 !important;

  border-color:
    #2b2b2b !important;
}


/* =========================================================
   DARK · REPOSITION HEADER
   ========================================================= */

html[data-theme="dark"]
.rendiciones-reposicion-card__header,

body.dark
.rendiciones-reposicion-card__header {
  background:
    #0a0a0a !important;

  border-color:
    #242424 !important;
}


/* =========================================================
   DARK · REPOSITION TEXT
   ========================================================= */

html[data-theme="dark"]
.rendiciones-reposicion-card__title strong,

html[data-theme="dark"]
.rendiciones-reposicion-card__metrics strong,

html[data-theme="dark"]
.rendiciones-reposition-summary article strong,

html[data-theme="dark"]
.rendiciones-preparation-item__book strong,

html[data-theme="dark"]
.rendiciones-file-drop strong,

html[data-theme="dark"]
.rendiciones-import-file-info strong,

body.dark
.rendiciones-reposicion-card__title strong,

body.dark
.rendiciones-reposicion-card__metrics strong,

body.dark
.rendiciones-reposition-summary article strong,

body.dark
.rendiciones-preparation-item__book strong,

body.dark
.rendiciones-file-drop strong,

body.dark
.rendiciones-import-file-info strong {
  color:
    #ffffff !important;
}


/* =========================================================
   DARK · REPOSITION SECONDARY TEXT
   ========================================================= */

html[data-theme="dark"]
.rendiciones-reposicion-card__header > div:first-child > span,

html[data-theme="dark"]
.rendiciones-reposicion-card__metrics span,

html[data-theme="dark"]
.rendiciones-reposicion-products span,

html[data-theme="dark"]
.rendiciones-reposicion-products small,

html[data-theme="dark"]
.rendiciones-reposition-summary article span,

html[data-theme="dark"]
.rendiciones-preparation-item__book span,

html[data-theme="dark"]
.rendiciones-file-drop span,

html[data-theme="dark"]
.rendiciones-import-file-info span,

body.dark
.rendiciones-reposicion-card__header > div:first-child > span,

body.dark
.rendiciones-reposicion-card__metrics span,

body.dark
.rendiciones-reposicion-products span,

body.dark
.rendiciones-reposicion-products small,

body.dark
.rendiciones-reposition-summary article span,

body.dark
.rendiciones-preparation-item__book span,

body.dark
.rendiciones-file-drop span,

body.dark
.rendiciones-import-file-info span {
  color:
    #d0d0d0 !important;
}


/* =========================================================
   DARK · HOVER
   ========================================================= */

html[data-theme="dark"]
.rendiciones-metric:hover,

body.dark
.rendiciones-metric:hover {
  background:
    #0d0d0d !important;

  border-color:
    #3a3a3a !important;
}


/* =========================================================
   DARK · SECONDARY BUTTON
   ========================================================= */

html[data-theme="dark"]
.rendiciones-btn--secondary,

body.dark
.rendiciones-btn--secondary {
  background:
    #0a0a0a !important;

  border-color:
    #2b2b2b !important;

  color:
    #ffffff !important;
}


html[data-theme="dark"]
.rendiciones-btn--secondary:hover:not(:disabled),

body.dark
.rendiciones-btn--secondary:hover:not(:disabled) {
  background:
    #111111 !important;

  border-color:
    #444444 !important;
}


/* =========================================================
   DARK · PRIMARY BUTTON
   ========================================================= */

html[data-theme="dark"]
.rendiciones-btn--primary,

body.dark
.rendiciones-btn--primary {
  border-color:
    #ffffff;

  background:
    #ffffff;

  color:
    #050505;
}


html[data-theme="dark"]
.rendiciones-btn--primary:hover:not(:disabled),

body.dark
.rendiciones-btn--primary:hover:not(:disabled) {
  border-color:
    #d6d6d6;

  background:
    #d6d6d6;

  color:
    #050505;
}


/* =========================================================
   DARK · ICON BUTTONS
   ========================================================= */

html[data-theme="dark"]
.rendiciones-action-trigger,

html[data-theme="dark"]
.rendiciones-modal__close,

html[data-theme="dark"]
.rendiciones-pagination__button,

body.dark
.rendiciones-action-trigger,

body.dark
.rendiciones-modal__close,

body.dark
.rendiciones-pagination__button {
  color:
    #ffffff;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width: 900px
) {

  .app-content:has(.rendiciones-page) {
    padding:
      8px !important;
  }


  .rendiciones-page {
    min-height:
      calc(
        100dvh -
        var(--topbar-height, 68px) -
        16px
      );
  }

}


@media (
  max-width: 620px
) {

  .app-content:has(.rendiciones-page) {
    padding:
      6px !important;
  }


  .rendiciones-page {
    min-height:
      calc(
        100dvh -
        var(--topbar-height, 68px) -
        12px
      );
  }

}