/* =========================================================
   NAI HUB · RENDICIONES
   PREMIUM · MINIMALISTA · RESPONSIVE
   PARTE 1 / 2
   ========================================================= */


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

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


.rendiciones-page {
  --ren-bg:
    #f5f6f7;

  --ren-surface:
    #ffffff;

  --ren-surface-soft:
    #f8f9f9;

  --ren-surface-muted:
    #f1f3f2;

  --ren-text:
    #121417;

  --ren-text-soft:
    #31363a;

  --ren-muted:
    #70777d;

  --ren-muted-2:
    #969da2;

  --ren-border:
    rgba(
      18,
      20,
      23,
      0.09
    );

  --ren-border-strong:
    rgba(
      18,
      20,
      23,
      0.16
    );

  --ren-accent:
    #2f6f4f;

  --ren-accent-soft:
    rgba(
      47,
      111,
      79,
      0.09
    );

  --ren-success:
    #2f6f4f;

  --ren-success-soft:
    rgba(
      47,
      111,
      79,
      0.1
    );

  --ren-warning:
    #a06a1d;

  --ren-warning-soft:
    rgba(
      160,
      106,
      29,
      0.1
    );

  --ren-danger:
    #b24646;

  --ren-danger-soft:
    rgba(
      178,
      70,
      70,
      0.09
    );

  --ren-info:
    #41658a;

  --ren-info-soft:
    rgba(
      65,
      101,
      138,
      0.1
    );

  --ren-shadow:
    0 10px 28px
    rgba(
      15,
      23,
      42,
      0.05
    );

  --ren-radius-sm:
    9px;

  --ren-radius-md:
    12px;

  --ren-radius-lg:
    15px;

  width:
    100%;

  min-width:
    0;

  padding:
    18px;

  display:
    grid;

  gap:
    14px;

  color:
    var(
      --ren-text
    );

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


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

html[data-theme="dark"]
.rendiciones-page,
body[data-theme="dark"]
.rendiciones-page {
  --ren-bg:
    #0d0e10;

  --ren-surface:
    #111214;

  --ren-surface-soft:
    #151719;

  --ren-surface-muted:
    #191b1d;

  --ren-text:
    #f4f5f7;

  --ren-text-soft:
    #d5d9dc;

  --ren-muted:
    #989fa5;

  --ren-muted-2:
    #767d83;

  --ren-border:
    rgba(
      255,
      255,
      255,
      0.08
    );

  --ren-border-strong:
    rgba(
      255,
      255,
      255,
      0.15
    );

  --ren-accent:
    #79b493;

  --ren-accent-soft:
    rgba(
      121,
      180,
      147,
      0.11
    );

  --ren-success:
    #79b493;

  --ren-success-soft:
    rgba(
      121,
      180,
      147,
      0.11
    );

  --ren-warning:
    #d1a05a;

  --ren-warning-soft:
    rgba(
      209,
      160,
      90,
      0.11
    );

  --ren-danger:
    #df7b7b;

  --ren-danger-soft:
    rgba(
      223,
      123,
      123,
      0.1
    );

  --ren-info:
    #8caed0;

  --ren-info-soft:
    rgba(
      140,
      174,
      208,
      0.11
    );

  --ren-shadow:
    none;
}


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

.rendiciones-heading {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    18px;

  padding:
    2px 0 4px;
}


.rendiciones-heading-copy {
  min-width:
    0;
}


.rendiciones-kicker {
  display:
    inline-flex;

  align-items:
    center;

  margin-bottom:
    4px;

  color:
    var(
      --ren-accent
    );

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    900;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}


.rendiciones-heading h1 {
  margin:
    0;

  color:
    var(
      --ren-text
    );

  font-size:
    clamp(
      22px,
      2.8vw,
      30px
    );

  line-height:
    1.05;

  font-weight:
    900;

  letter-spacing:
    -0.035em;
}


.rendiciones-heading p {
  margin:
    7px 0 0;

  max-width:
    760px;

  color:
    var(
      --ren-muted
    );

  font-size:
    11px;

  line-height:
    1.55;

  font-weight:
    600;
}


.rendiciones-heading-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  flex-wrap:
    wrap;
}


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

.rendiciones-button,
.rendiciones-icon-button,
.rendiciones-text-button,
.rendiciones-code-button,
.rendiciones-remito-button,
.rendiciones-feedback-close,
.rendiciones-file-remove {
  font:
    inherit;

  border:
    0;

  cursor:
    pointer;

  transition:
    170ms ease;
}


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

  padding:
    0 13px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  border-radius:
    10px;

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

  background:
    var(
      --ren-surface
    );

  color:
    var(
      --ren-text
    );

  font-size:
    10.5px;

  line-height:
    1;

  font-weight:
    850;

  white-space:
    nowrap;
}


.rendiciones-button svg {
  width:
    15px;

  height:
    15px;

  stroke-width:
    2.2;
}


.rendiciones-button:hover:not(:disabled) {
  border-color:
    var(
      --ren-border-strong
    );

  transform:
    translateY(
      -1px
    );
}


.rendiciones-button:disabled {
  opacity:
    0.45;

  cursor:
    not-allowed;

  transform:
    none;
}


.rendiciones-button-primary {
  background:
    var(
      --ren-accent
    );

  border-color:
    var(
      --ren-accent
    );

  color:
    #ffffff;
}


html[data-theme="dark"]
.rendiciones-button-primary,
body[data-theme="dark"]
.rendiciones-button-primary {
  color:
    #0d0e10;
}


.rendiciones-button-secondary {
  background:
    var(
      --ren-surface
    );
}


.rendiciones-button-danger {
  background:
    var(
      --ren-danger-soft
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --ren-danger
      ) 24%,
      transparent
    );

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


.rendiciones-icon-button {
  width:
    32px;

  height:
    32px;

  padding:
    0;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    9px;

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

  background:
    var(
      --ren-surface
    );

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


.rendiciones-icon-button svg {
  width:
    14px;

  height:
    14px;
}


.rendiciones-icon-button:hover:not(:disabled) {
  color:
    var(
      --ren-text
    );

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

  background:
    var(
      --ren-surface-soft
    );
}


.rendiciones-icon-button.is-primary {
  color:
    var(
      --ren-accent
    );

  background:
    var(
      --ren-accent-soft
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --ren-accent
      ) 24%,
      transparent
    );
}


/* =========================================================
   FEEDBACK
   ========================================================= */

.rendiciones-feedback {
  min-height:
    48px;

  padding:
    9px 11px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

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

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

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


.rendiciones-feedback.is-error {
  border-color:
    color-mix(
      in srgb,
      var(
        --ren-danger
      ) 22%,
      transparent
    );

  background:
    var(
      --ren-danger-soft
    );
}


.rendiciones-feedback.is-success {
  border-color:
    color-mix(
      in srgb,
      var(
        --ren-success
      ) 22%,
      transparent
    );

  background:
    var(
      --ren-success-soft
    );
}


.rendiciones-feedback-icon {
  width:
    30px;

  height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    9px;

  color:
    var(
      --ren-text
    );

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


.rendiciones-feedback-icon svg {
  width:
    15px;

  height:
    15px;
}


.rendiciones-feedback-copy {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.rendiciones-feedback-copy strong {
  color:
    var(
      --ren-text
    );

  font-size:
    10.5px;

  font-weight:
    900;
}


.rendiciones-feedback-copy span {
  color:
    var(
      --ren-muted
    );

  font-size:
    9.5px;

  line-height:
    1.4;

  font-weight:
    650;
}


.rendiciones-feedback-close {
  width:
    28px;

  height:
    28px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    8px;

  background:
    transparent;

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


.rendiciones-feedback-close:hover {
  background:
    var(
      --ren-surface
    );

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


/* =========================================================
   KPIs
   ========================================================= */

.rendiciones-kpis {
  display:
    grid;

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

  gap:
    9px;
}


.rendiciones-kpi {
  min-width:
    0;

  padding:
    11px;

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

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

  background:
    var(
      --ren-surface
    );

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


.rendiciones-kpi-head {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  min-width:
    0;
}


.rendiciones-kpi-icon {
  width:
    25px;

  height:
    25px;

  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    8px;

  background:
    var(
      --ren-surface-soft
    );

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


.rendiciones-kpi-icon svg {
  width:
    13px;

  height:
    13px;
}


.rendiciones-kpi-label {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(
      --ren-muted
    );

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    800;
}


.rendiciones-kpi-value {
  display:
    block;

  margin-top:
    9px;

  color:
    var(
      --ren-text
    );

  font-size:
    22px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    -0.04em;
}


.rendiciones-kpi-hint {
  display:
    block;

  margin-top:
    5px;

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

  font-size:
    8.5px;

  line-height:
    1.3;

  font-weight:
    700;
}


.rendiciones-kpi.is-warning
.rendiciones-kpi-icon {
  background:
    var(
      --ren-warning-soft
    );

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


.rendiciones-kpi.is-success
.rendiciones-kpi-icon {
  background:
    var(
      --ren-success-soft
    );

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


.rendiciones-kpi.is-info
.rendiciones-kpi-icon {
  background:
    var(
      --ren-info-soft
    );

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


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

.rendiciones-toolbar {
  padding:
    10px;

  display:
    grid;

  gap:
    9px;

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

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

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


.rendiciones-toolbar-main {
  display:
    grid;

  grid-template-columns:
    minmax(
      260px,
      1fr
    )
    180px
    150px
    150px;

  gap:
    8px;

  align-items:
    end;
}


.rendiciones-search {
  min-width:
    0;

  height:
    36px;

  padding:
    0 10px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

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

  border-radius:
    9px;

  background:
    var(
      --ren-surface-soft
    );
}


.rendiciones-search:focus-within {
  border-color:
    var(
      --ren-accent
    );
}


.rendiciones-search > svg {
  width:
    14px;

  height:
    14px;

  flex:
    0 0 auto;

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


.rendiciones-search input {
  width:
    100%;

  min-width:
    0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(
      --ren-text
    );

  font:
    inherit;

  font-size:
    10.5px;

  font-weight:
    700;
}


.rendiciones-search input::placeholder {
  color:
    var(
      --ren-muted-2
    );
}


.rendiciones-search button {
  width:
    22px;

  height:
    22px;

  padding:
    0;

  border:
    0;

  border-radius:
    6px;

  background:
    transparent;

  color:
    var(
      --ren-muted
    );

  cursor:
    pointer;
}


.rendiciones-search button:hover {
  background:
    var(
      --ren-surface-muted
    );
}


.rendiciones-search button svg {
  width:
    12px;

  height:
    12px;
}


.rendiciones-select-control,
.rendiciones-date-control {
  min-width:
    0;

  display:
    grid;

  gap:
    4px;
}


.rendiciones-select-control > span,
.rendiciones-date-control > span {
  color:
    var(
      --ren-muted
    );

  font-size:
    8.5px;

  line-height:
    1;

  font-weight:
    850;
}


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

  height:
    36px;

  padding:
    0 9px;

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

  border-radius:
    9px;

  outline:
    0;

  background:
    var(
      --ren-surface-soft
    );

  color:
    var(
      --ren-text
    );

  font:
    inherit;

  font-size:
    10px;

  font-weight:
    700;
}


.rendiciones-select-control select:focus,
.rendiciones-date-control input:focus {
  border-color:
    var(
      --ren-accent
    );
}


.rendiciones-toolbar-meta {
  min-height:
    26px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;
}


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

  padding:
    0 8px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

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

  border-radius:
    8px;

  background:
    var(
      --ren-surface-soft
    );

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

  font:
    inherit;

  font-size:
    8.5px;

  font-weight:
    850;

  cursor:
    pointer;
}


.rendiciones-filter-badge svg {
  width:
    11px;

  height:
    11px;
}


.rendiciones-result-count {
  color:
    var(
      --ren-muted
    );

  font-size:
    9px;

  font-weight:
    750;
}


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

.rendiciones-list-card {
  min-width:
    0;

  overflow:
    hidden;

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

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

  background:
    var(
      --ren-surface
    );

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


.rendiciones-list-head {
  min-height:
    54px;

  padding:
    10px 12px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

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


.rendiciones-list-head > div {
  min-width:
    0;
}


.rendiciones-section-kicker {
  display:
    block;

  margin-bottom:
    2px;

  color:
    var(
      --ren-accent
    );

  font-size:
    8px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.rendiciones-list-head h2 {
  margin:
    0;

  color:
    var(
      --ren-text
    );

  font-size:
    14px;

  line-height:
    1.15;

  font-weight:
    900;
}


.rendiciones-list-total {
  min-width:
    30px;

  height:
    26px;

  padding:
    0 8px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    8px;

  background:
    var(
      --ren-surface-soft
    );

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

  font-size:
    9px;

  font-weight:
    900;
}


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

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

  min-width:
    0;

  overflow-x:
    auto;
}


.rendiciones-table {
  width:
    100%;

  min-width:
    1040px;

  border-collapse:
    collapse;

  table-layout:
    auto;
}


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

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

  text-align:
    left;

  vertical-align:
    middle;
}


.rendiciones-table th {
  background:
    var(
      --ren-surface-soft
    );

  color:
    var(
      --ren-muted
    );

  font-size:
    8.5px;

  line-height:
    1.1;

  font-weight:
    900;

  letter-spacing:
    0.025em;

  white-space:
    nowrap;
}


.rendiciones-table td {
  color:
    var(
      --ren-text-soft
    );

  font-size:
    9.5px;

  line-height:
    1.3;

  font-weight:
    700;
}


.rendiciones-table tbody tr {
  transition:
    150ms ease;
}


.rendiciones-table tbody tr:hover {
  background:
    var(
      --ren-surface-soft
    );
}


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


.rendiciones-table th.is-number,
.rendiciones-table td.rendiciones-number-cell {
  text-align:
    right;
}


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


.rendiciones-date-cell {
  display:
    grid;

  gap:
    2px;
}


.rendiciones-date-cell strong {
  color:
    var(
      --ren-text
    );

  font-size:
    9.5px;

  font-weight:
    850;
}


.rendiciones-date-cell span {
  color:
    var(
      --ren-muted
    );

  font-size:
    8.5px;

  font-weight:
    650;
}


.rendiciones-code-button {
  padding:
    0;

  background:
    transparent;

  color:
    var(
      --ren-accent
    );

  font-size:
    9.5px;

  font-weight:
    900;
}


.rendiciones-code-button:hover {
  text-decoration:
    underline;
}


.rendiciones-client-cell {
  min-width:
    180px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.rendiciones-client-icon {
  width:
    29px;

  height:
    29px;

  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    8px;

  background:
    var(
      --ren-surface-soft
    );

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


.rendiciones-client-icon svg {
  width:
    13px;

  height:
    13px;
}


.rendiciones-client-cell > div {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


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

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(
      --ren-text
    );

  font-size:
    9.5px;

  font-weight:
    850;
}


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

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(
      --ren-muted
    );

  font-size:
    8.5px;

  font-weight:
    650;
}


.rendiciones-number-cell {
  color:
    var(
      --ren-text
    ) !important;

  font-variant-numeric:
    tabular-nums;

  font-weight:
    900 !important;
}


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

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

  padding:
    0 7px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

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

  border-radius:
    999px;

  background:
    var(
      --ren-surface-soft
    );

  color:
    var(
      --ren-muted
    );

  font-size:
    8.5px;

  line-height:
    1;

  font-weight:
    850;

  white-space:
    nowrap;
}


.rendiciones-status svg {
  width:
    11px;

  height:
    11px;
}


.rendiciones-status.is-success {
  color:
    var(
      --ren-success
    );

  background:
    var(
      --ren-success-soft
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --ren-success
      ) 18%,
      transparent
    );
}


.rendiciones-status.is-warning {
  color:
    var(
      --ren-warning
    );

  background:
    var(
      --ren-warning-soft
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --ren-warning
      ) 18%,
      transparent
    );
}


.rendiciones-status.is-danger {
  color:
    var(
      --ren-danger
    );

  background:
    var(
      --ren-danger-soft
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --ren-danger
      ) 18%,
      transparent
    );
}


.rendiciones-status.is-info {
  color:
    var(
      --ren-info
    );

  background:
    var(
      --ren-info-soft
    );

  border-color:
    color-mix(
      in srgb,
      var(
        --ren-info
      ) 18%,
      transparent
    );
}


/* =========================================================
   REMITO BUTTON
   ========================================================= */

.rendiciones-remito-button {
  min-height:
    27px;

  padding:
    0 8px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  border-radius:
    8px;

  background:
    var(
      --ren-accent-soft
    );

  color:
    var(
      --ren-accent
    );

  font-size:
    8.5px;

  font-weight:
    850;
}


.rendiciones-remito-button svg {
  width:
    12px;

  height:
    12px;
}


.rendiciones-remito-button:hover {
  background:
    color-mix(
      in srgb,
      var(
        --ren-accent
      ) 14%,
      transparent
    );
}


.rendiciones-muted {
  color:
    var(
      --ren-muted-2
    );
}


.rendiciones-row-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    5px;
}


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

.rendiciones-empty,
.rendiciones-state {
  min-height:
    300px;

  padding:
    28px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


.rendiciones-empty-icon,
.rendiciones-state-icon {
  width:
    42px;

  height:
    42px;

  margin-bottom:
    10px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    12px;

  background:
    var(
      --ren-surface-soft
    );

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


.rendiciones-empty-icon svg,
.rendiciones-state-icon svg {
  width:
    19px;

  height:
    19px;
}


.rendiciones-empty strong,
.rendiciones-state-copy strong {
  color:
    var(
      --ren-text
    );

  font-size:
    13px;

  font-weight:
    900;
}


.rendiciones-empty > span:not(
  .rendiciones-empty-icon
),
.rendiciones-state-copy span {
  margin-top:
    5px;

  max-width:
    420px;

  color:
    var(
      --ren-muted
    );

  font-size:
    9.5px;

  line-height:
    1.45;

  font-weight:
    650;
}


.rendiciones-empty .rendiciones-button {
  margin-top:
    14px;
}


.rendiciones-state-copy {
  display:
    grid;

  gap:
    3px;
}


.rendiciones-state-icon.is-loading svg,
.rendiciones-button [data-lucide="loader-circle"] {
  animation:
    rendiciones-spin
    0.8s
    linear
    infinite;
}


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


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

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

  padding:
    8px 11px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

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

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


.rendiciones-pagination-summary,
.rendiciones-page-label {
  color:
    var(
      --ren-muted
    );

  font-size:
    8.5px;

  font-weight:
    700;
}


.rendiciones-pagination-summary strong,
.rendiciones-page-label strong {
  color:
    var(
      --ren-text
    );

  font-weight:
    900;
}


.rendiciones-pagination-controls {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


.rendiciones-page-size {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;
}


.rendiciones-page-size span {
  color:
    var(
      --ren-muted
    );

  font-size:
    8.5px;

  font-weight:
    750;
}


.rendiciones-page-size select {
  height:
    30px;

  padding:
    0 7px;

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

  border-radius:
    8px;

  outline:
    0;

  background:
    var(
      --ren-surface-soft
    );

  color:
    var(
      --ren-text
    );

  font:
    inherit;

  font-size:
    8.5px;

  font-weight:
    800;
}


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

.rendiciones-mobile-list {
  display:
    none;
}


.rendiciones-mobile-card {
  padding:
    11px;

  display:
    grid;

  gap:
    10px;

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


.rendiciones-mobile-head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;
}


.rendiciones-mobile-head > div {
  display:
    grid;

  gap:
    3px;
}


.rendiciones-mobile-date {
  color:
    var(
      --ren-muted
    );

  font-size:
    8.5px;

  font-weight:
    700;
}


.rendiciones-mobile-code {
  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(
      --ren-accent
    );

  font:
    inherit;

  font-size:
    10px;

  font-weight:
    900;

  text-align:
    left;

  cursor:
    pointer;
}


.rendiciones-mobile-client {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.rendiciones-mobile-client > span {
  width:
    30px;

  height:
    30px;

  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    9px;

  background:
    var(
      --ren-surface-soft
    );

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


.rendiciones-mobile-client > span svg {
  width:
    13px;

  height:
    13px;
}


.rendiciones-mobile-client > div {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.rendiciones-mobile-client strong {
  color:
    var(
      --ren-text
    );

  font-size:
    10px;

  font-weight:
    850;
}


.rendiciones-mobile-client small {
  color:
    var(
      --ren-muted
    );

  font-size:
    8.5px;

  font-weight:
    650;
}


.rendiciones-mobile-metrics {
  display:
    grid;

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

  gap:
    6px;
}


.rendiciones-mobile-metrics > div {
  padding:
    8px;

  display:
    grid;

  gap:
    3px;

  border-radius:
    9px;

  background:
    var(
      --ren-surface-soft
    );
}


.rendiciones-mobile-metrics span,
.rendiciones-mobile-remito span {
  color:
    var(
      --ren-muted
    );

  font-size:
    8px;

  font-weight:
    750;
}


.rendiciones-mobile-metrics strong,
.rendiciones-mobile-remito strong {
  color:
    var(
      --ren-text
    );

  font-size:
    11px;

  font-weight:
    900;
}


.rendiciones-mobile-remito {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  padding:
    8px 9px;

  border-radius:
    9px;

  background:
    var(
      --ren-accent-soft
    );
}


.rendiciones-mobile-actions {
  display:
    flex;

  gap:
    6px;

  flex-wrap:
    wrap;
}/* =========================================================
   MODAL
   ========================================================= */

.rendiciones-modal-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    7000;

  padding:
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow-y:
    auto;

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


.rendiciones-modal {
  width:
    min(
      620px,
      100%
    );

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

  display:
    grid;

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

  overflow:
    hidden;

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

  border-radius:
    16px;

  background:
    var(
      --ren-surface
    );

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


html[data-theme="dark"]
.rendiciones-modal,
body[data-theme="dark"]
.rendiciones-modal {
  box-shadow:
    none;
}


.rendiciones-modal.is-small {
  width:
    min(
      470px,
      100%
    );
}


.rendiciones-modal.is-medium {
  width:
    min(
      620px,
      100%
    );
}


.rendiciones-modal.is-large {
  width:
    min(
      920px,
      100%
    );
}


.rendiciones-modal.is-xlarge {
  width:
    min(
      1160px,
      100%
    );
}


.rendiciones-modal-header {
  min-height:
    64px;

  padding:
    12px 14px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;

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


.rendiciones-modal-title-group {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    9px;
}


.rendiciones-modal-icon {
  width:
    32px;

  height:
    32px;

  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    9px;

  background:
    var(
      --ren-accent-soft
    );

  color:
    var(
      --ren-accent
    );
}


.rendiciones-modal-icon svg {
  width:
    15px;

  height:
    15px;
}


.rendiciones-modal-title-group h2 {
  margin:
    1px 0 0;

  color:
    var(
      --ren-text
    );

  font-size:
    16px;

  line-height:
    1.15;

  font-weight:
    900;

  letter-spacing:
    -0.02em;
}


.rendiciones-modal-title-group p {
  margin:
    4px 0 0;

  color:
    var(
      --ren-muted
    );

  font-size:
    9.5px;

  line-height:
    1.4;

  font-weight:
    650;
}


.rendiciones-modal-body {
  min-height:
    0;

  overflow-y:
    auto;

  padding:
    14px;
}


.rendiciones-modal-footer {
  min-height:
    58px;

  padding:
    10px 14px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

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

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


.rendiciones-modal-footer-spacer {
  flex:
    1 1 auto;
}


/* =========================================================
   FORMULARIOS
   ========================================================= */

.rendiciones-field {
  min-width:
    0;

  display:
    grid;

  gap:
    5px;
}


.rendiciones-field > span {
  color:
    var(
      --ren-text-soft
    );

  font-size:
    9px;

  line-height:
    1.2;

  font-weight:
    850;
}


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

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

  outline:
    none;

  border-radius:
    9px;

  background:
    var(
      --ren-surface-soft
    );

  color:
    var(
      --ren-text
    );

  font:
    inherit;

  font-size:
    10.5px;

  font-weight:
    700;

  transition:
    160ms ease;
}


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

  padding:
    0 10px;
}


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

  padding:
    9px 10px;

  resize:
    vertical;

  line-height:
    1.45;
}


.rendiciones-field input:focus,
.rendiciones-field select:focus,
.rendiciones-field textarea:focus,
.rendiciones-percentage-field input:focus,
.rendiciones-reposition-quantity input:focus {
  border-color:
    var(
      --ren-accent
    );
}


.rendiciones-field input::placeholder,
.rendiciones-field textarea::placeholder {
  color:
    var(
      --ren-muted-2
    );
}


.rendiciones-form-grid {
  display:
    grid;

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

  gap:
    9px;
}


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

  height:
    36px;

  padding:
    0 9px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

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

  border-radius:
    9px;

  background:
    var(
      --ren-surface-soft
    );

  transition:
    160ms ease;
}


.rendiciones-input-icon:focus-within {
  border-color:
    var(
      --ren-accent
    );
}


.rendiciones-input-icon svg {
  width:
    14px;

  height:
    14px;

  flex:
    0 0 auto;

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


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

  width:
    100%;

  height:
    auto;

  padding:
    0;

  border:
    0;

  outline:
    none;

  background:
    transparent;

  color:
    var(
      --ren-text
    );

  font:
    inherit;

  font-size:
    10.5px;

  font-weight:
    700;
}


/* =========================================================
   NUEVA RENDICIÓN
   ========================================================= */

.rendiciones-new-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1.7fr
    )
    minmax(
      240px,
      0.8fr
    );

  gap:
    12px;
}


.rendiciones-new-main {
  min-width:
    0;

  display:
    grid;

  gap:
    10px;
}


.rendiciones-new-side {
  min-width:
    0;
}


.rendiciones-form-section {
  padding:
    11px;

  display:
    grid;

  gap:
    10px;

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

  border-radius:
    12px;

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


.rendiciones-form-section-head {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    8px;
}


.rendiciones-form-section-head > span {
  width:
    25px;

  height:
    25px;

  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    8px;

  background:
    var(
      --ren-accent-soft
    );

  color:
    var(
      --ren-accent
    );

  font-size:
    9px;

  font-weight:
    900;
}


.rendiciones-form-section-head > div {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.rendiciones-form-section-head strong {
  color:
    var(
      --ren-text
    );

  font-size:
    10.5px;

  font-weight:
    900;
}


.rendiciones-form-section-head small {
  color:
    var(
      --ren-muted
    );

  font-size:
    8.5px;

  line-height:
    1.35;

  font-weight:
    650;
}


/* =========================================================
   CLIENT PREVIEW
   ========================================================= */

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

  padding:
    9px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(
        --ren-accent
      ) 18%,
      transparent
    );

  border-radius:
    10px;

  background:
    var(
      --ren-accent-soft
    );
}


.rendiciones-client-preview-icon {
  width:
    30px;

  height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    9px;

  background:
    var(
      --ren-surface
    );

  color:
    var(
      --ren-accent
    );
}


.rendiciones-client-preview-icon svg {
  width:
    14px;

  height:
    14px;
}


.rendiciones-client-preview-copy {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.rendiciones-client-preview-copy strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(
      --ren-text
    );

  font-size:
    10px;

  font-weight:
    900;
}


.rendiciones-client-preview-copy span,
.rendiciones-client-preview-copy small {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(
      --ren-muted
    );

  font-size:
    8.5px;

  font-weight:
    650;
}


.rendiciones-client-preview-status {
  min-height:
    23px;

  padding:
    0 7px;

  display:
    inline-flex;

  align-items:
    center;

  border-radius:
    999px;

  background:
    var(
      --ren-surface
    );

  color:
    var(
      --ren-accent
    );

  font-size:
    8px;

  font-weight:
    850;

  white-space:
    nowrap;
}


/* =========================================================
   FILE UPLOAD
   ========================================================= */

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

  padding:
    12px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  position:
    relative;

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

  border-radius:
    11px;

  background:
    var(
      --ren-surface-soft
    );

  cursor:
    pointer;

  transition:
    170ms ease;
}


.rendiciones-file-drop:hover {
  border-color:
    var(
      --ren-accent
    );

  background:
    var(
      --ren-accent-soft
    );
}


.rendiciones-file-drop.has-file {
  justify-content:
    flex-start;

  border-style:
    solid;

  border-color:
    color-mix(
      in srgb,
      var(
        --ren-accent
      ) 24%,
      transparent
    );

  background:
    var(
      --ren-accent-soft
    );
}


.rendiciones-file-icon {
  width:
    38px;

  height:
    38px;

  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    11px;

  background:
    var(
      --ren-surface
    );

  color:
    var(
      --ren-accent
    );
}


.rendiciones-file-icon svg {
  width:
    18px;

  height:
    18px;
}


.rendiciones-file-copy {
  min-width:
    0;

  display:
    grid;

  gap:
    3px;
}


.rendiciones-file-copy strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(
      --ren-text
    );

  font-size:
    10px;

  font-weight:
    900;
}


.rendiciones-file-copy span {
  color:
    var(
      --ren-muted
    );

  font-size:
    8.5px;

  font-weight:
    650;
}


.rendiciones-file-remove {
  width:
    26px;

  height:
    26px;

  margin-left:
    auto;

  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    8px;

  background:
    var(
      --ren-surface
    );

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


.rendiciones-file-remove:hover {
  color:
    var(
      --ren-danger
    );
}


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

.rendiciones-process-card {
  position:
    sticky;

  top:
    0;

  padding:
    12px;

  display:
    grid;

  gap:
    10px;

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

  border-radius:
    12px;

  background:
    var(
      --ren-surface-soft
    );
}


.rendiciones-process-icon {
  width:
    31px;

  height:
    31px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    9px;

  background:
    var(
      --ren-accent-soft
    );

  color:
    var(
      --ren-accent
    );
}


.rendiciones-process-icon svg {
  width:
    15px;

  height:
    15px;
}


.rendiciones-process-card > strong {
  color:
    var(
      --ren-text
    );

  font-size:
    11px;

  font-weight:
    900;
}


.rendiciones-process-list {
  display:
    grid;

  gap:
    8px;
}


.rendiciones-process-list > div {
  display:
    grid;

  grid-template-columns:
    auto
    1fr;

  align-items:
    flex-start;

  gap:
    7px;
}


.rendiciones-process-list > div > span {
  width:
    21px;

  height:
    21px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    7px;

  background:
    var(
      --ren-surface
    );

  color:
    var(
      --ren-text
    );

  font-size:
    8px;

  font-weight:
    900;
}


.rendiciones-process-list p {
  margin:
    2px 0 0;

  color:
    var(
      --ren-muted
    );

  font-size:
    8.5px;

  line-height:
    1.4;

  font-weight:
    650;
}


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

.rendiciones-detail {
  min-width:
    0;

  display:
    grid;

  gap:
    11px;
}


.rendiciones-detail-top {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;
}


.rendiciones-detail-top > div {
  min-width:
    0;
}


.rendiciones-detail-code {
  display:
    inline-block;

  margin-bottom:
    3px;

  color:
    var(
      --ren-accent
    );

  font-size:
    8.5px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    0.03em;
}


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

  color:
    var(
      --ren-text
    );

  font-size:
    17px;

  line-height:
    1.15;

  font-weight:
    900;

  letter-spacing:
    -0.02em;
}


.rendiciones-detail-meta {
  margin-top:
    6px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  flex-wrap:
    wrap;
}


.rendiciones-detail-meta span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  color:
    var(
      --ren-muted
    );

  font-size:
    8.5px;

  font-weight:
    650;
}


.rendiciones-detail-meta svg {
  width:
    11px;

  height:
    11px;
}


.rendiciones-detail-summary {
  display:
    grid;

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

  gap:
    7px;
}


.rendiciones-detail-summary article {
  padding:
    9px;

  display:
    grid;

  gap:
    4px;

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

  border-radius:
    10px;

  background:
    var(
      --ren-surface-soft
    );
}


.rendiciones-detail-summary span {
  color:
    var(
      --ren-muted
    );

  font-size:
    8px;

  font-weight:
    750;
}


.rendiciones-detail-summary strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  color:
    var(
      --ren-text
    );

  font-size:
    11px;

  font-weight:
    900;
}


.rendiciones-detail-summary strong.is-danger {
  color:
    var(
      --ren-danger
    );
}


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

.rendiciones-warning-panel {
  padding:
    10px;

  display:
    grid;

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

  gap:
    8px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(
        --ren-warning
      ) 22%,
      transparent
    );

  border-radius:
    10px;

  background:
    var(
      --ren-warning-soft
    );
}


.rendiciones-warning-panel > span {
  width:
    27px;

  height:
    27px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    8px;

  background:
    var(
      --ren-surface
    );

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


.rendiciones-warning-panel svg {
  width:
    13px;

  height:
    13px;
}


.rendiciones-warning-panel strong {
  color:
    var(
      --ren-text
    );

  font-size:
    9.5px;

  font-weight:
    900;
}


.rendiciones-warning-panel p {
  margin:
    3px 0 0;

  color:
    var(
      --ren-muted
    );

  font-size:
    8.5px;

  line-height:
    1.45;

  font-weight:
    650;
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.rendiciones-detail-section-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.rendiciones-detail-section-head > div {
  min-width:
    0;
}


.rendiciones-detail-section-head span {
  display:
    block;

  margin-bottom:
    2px;

  color:
    var(
      --ren-accent
    );

  font-size:
    8px;

  font-weight:
    900;

  text-transform:
    uppercase;

  letter-spacing:
    0.06em;
}


.rendiciones-detail-section-head h4 {
  margin:
    0;

  color:
    var(
      --ren-text
    );

  font-size:
    11px;

  font-weight:
    900;
}


.rendiciones-detail-section-head > strong {
  min-width:
    26px;

  height:
    24px;

  padding:
    0 7px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    8px;

  background:
    var(
      --ren-surface-soft
    );

  color:
    var(
      --ren-text
    );

  font-size:
    8.5px;

  font-weight:
    900;
}


/* =========================================================
   RENDICIÓN ITEMS
   ========================================================= */

.rendiciones-detail-products {
  display:
    grid;

  gap:
    8px;
}


.rendiciones-items-list {
  display:
    grid;

  gap:
    6px;
}


.rendiciones-item {
  padding:
    9px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

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

  border-radius:
    10px;

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


.rendiciones-item.has-error {
  border-color:
    color-mix(
      in srgb,
      var(
        --ren-danger
      ) 22%,
      transparent
    );

  background:
    var(
      --ren-danger-soft
    );
}


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

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;
}


.rendiciones-item-icon {
  width:
    30px;

  height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    9px;

  background:
    var(
      --ren-surface-soft
    );

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


.rendiciones-item-icon svg {
  width:
    14px;

  height:
    14px;
}


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

  display:
    grid;

  gap:
    4px;
}


.rendiciones-item-copy > strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(
      --ren-text
    );

  font-size:
    9.5px;

  font-weight:
    900;
}


.rendiciones-item-meta {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  flex-wrap:
    wrap;
}


.rendiciones-item-meta span {
  color:
    var(
      --ren-muted
    );

  font-size:
    8px;

  font-weight:
    650;
}


.rendiciones-item-meta strong {
  color:
    var(
      --ren-text-soft
    );

  font-weight:
    850;
}


.rendiciones-item-status {
  min-height:
    22px;

  padding:
    0 6px;

  display:
    inline-flex;

  align-items:
    center;

  border-radius:
    999px;

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

  background:
    var(
      --ren-surface-soft
    );

  color:
    var(
      --ren-muted
    );

  font-size:
    7.5px;

  font-weight:
    850;

  white-space:
    nowrap;
}


.rendiciones-item-status.is-success {
  color:
    var(
      --ren-success
    );

  background:
    var(
      --ren-success-soft
    );
}


.rendiciones-item-status.is-warning {
  color:
    var(
      --ren-warning
    );

  background:
    var(
      --ren-warning-soft
    );
}


.rendiciones-item-status.is-danger {
  color:
    var(
      --ren-danger
    );

  background:
    var(
      --ren-danger-soft
    );
}


.rendiciones-item-metrics {
  display:
    grid;

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

  gap:
    5px;
}


.rendiciones-item-metrics > div {
  min-width:
    68px;

  padding:
    6px 8px;

  display:
    grid;

  gap:
    2px;

  border-radius:
    8px;

  background:
    var(
      --ren-surface-soft
    );
}


.rendiciones-item-metrics span {
  color:
    var(
      --ren-muted
    );

  font-size:
    7.5px;

  font-weight:
    750;
}


.rendiciones-item-metrics strong {
  color:
    var(
      --ren-text
    );

  font-size:
    10px;

  font-weight:
    900;

  font-variant-numeric:
    tabular-nums;
}


.rendiciones-item-error {
  grid-column:
    1 /
    -1;

  padding:
    6px 8px;

  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  border-radius:
    8px;

  background:
    var(
      --ren-danger-soft
    );

  color:
    var(
      --ren-danger
    );

  font-size:
    8px;

  line-height:
    1.35;

  font-weight:
    750;
}


.rendiciones-item-error svg {
  width:
    11px;

  height:
    11px;

  flex:
    0 0 auto;
}


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

.rendiciones-inline-empty {
  min-height:
    100px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    14px;

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

  border-radius:
    10px;

  color:
    var(
      --ren-muted
    );

  font-size:
    9px;

  font-weight:
    700;

  text-align:
    center;
}


/* =========================================================
   RELATED BLOCKS
   ========================================================= */

.rendiciones-related-block {
  padding:
    10px;

  display:
    grid;

  gap:
    8px;

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

  border-radius:
    10px;

  background:
    var(
      --ren-surface-soft
    );
}


.rendiciones-related-head {
  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;
}


.rendiciones-related-icon {
  width:
    29px;

  height:
    29px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    8px;

  background:
    var(
      --ren-surface
    );

  color:
    var(
      --ren-accent
    );
}


.rendiciones-related-icon svg {
  width:
    13px;

  height:
    13px;
}


.rendiciones-related-head > div {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.rendiciones-related-head > div > span {
  color:
    var(
      --ren-muted
    );

  font-size:
    7.5px;

  font-weight:
    750;
}


.rendiciones-related-head > div > strong {
  color:
    var(
      --ren-text
    );

  font-size:
    9.5px;

  font-weight:
    900;
}


.rendiciones-related-metrics {
  display:
    grid;

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

  gap:
    6px;
}


.rendiciones-related-metrics > div {
  padding:
    7px;

  display:
    grid;

  gap:
    2px;

  border-radius:
    8px;

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


.rendiciones-related-metrics span {
  color:
    var(
      --ren-muted
    );

  font-size:
    7.5px;

  font-weight:
    750;
}


.rendiciones-related-metrics strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(
      --ren-text
    );

  font-size:
    9px;

  font-weight:
    900;
}


/* =========================================================
   CONFIRM RENDICIÓN
   ========================================================= */

.rendiciones-confirm,
.rendiciones-cancel,
.rendiciones-confirm-reposition {
  display:
    grid;

  gap:
    12px;
}


.rendiciones-confirm-icon,
.rendiciones-cancel-icon {
  width:
    42px;

  height:
    42px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    12px;

  background:
    var(
      --ren-accent-soft
    );

  color:
    var(
      --ren-accent
    );
}


.rendiciones-cancel-icon {
  background:
    var(
      --ren-danger-soft
    );

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


.rendiciones-confirm-icon svg,
.rendiciones-cancel-icon svg {
  width:
    19px;

  height:
    19px;
}


.rendiciones-confirm-copy h3,
.rendiciones-cancel h3,
.rendiciones-confirm-reposition-head h3 {
  margin:
    0;

  color:
    var(
      --ren-text
    );

  font-size:
    15px;

  font-weight:
    900;
}


.rendiciones-confirm-copy p,
.rendiciones-cancel p,
.rendiciones-confirm-reposition-head p {
  margin:
    5px 0 0;

  color:
    var(
      --ren-muted
    );

  font-size:
    9.5px;

  line-height:
    1.5;

  font-weight:
    650;
}


.rendiciones-confirm-copy p strong,
.rendiciones-cancel p strong,
.rendiciones-confirm-reposition-head p strong {
  color:
    var(
      --ren-text
    );

  font-weight:
    900;
}


.rendiciones-confirm-summary {
  display:
    grid;

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

  gap:
    7px;
}


.rendiciones-confirm-summary > div {
  padding:
    9px;

  display:
    grid;

  gap:
    3px;

  border-radius:
    9px;

  background:
    var(
      --ren-surface-soft
    );
}


.rendiciones-confirm-summary span {
  color:
    var(
      --ren-muted
    );

  font-size:
    8px;

  font-weight:
    750;
}


.rendiciones-confirm-summary strong {
  color:
    var(
      --ren-text
    );

  font-size:
    14px;

  font-weight:
    900;
}


/* =========================================================
   REPLENISH QUESTION
   ========================================================= */

.rendiciones-replenish-question {
  padding:
    10px;

  display:
    grid;

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

  gap:
    8px;

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

  border-radius:
    10px;

  background:
    var(
      --ren-surface-soft
    );
}


.rendiciones-replenish-question-icon {
  width:
    30px;

  height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    9px;

  background:
    var(
      --ren-accent-soft
    );

  color:
    var(
      --ren-accent
    );
}


.rendiciones-replenish-question-icon svg {
  width:
    14px;

  height:
    14px;
}


.rendiciones-replenish-question strong {
  color:
    var(
      --ren-text
    );

  font-size:
    9.5px;

  font-weight:
    900;
}


.rendiciones-replenish-question p {
  margin:
    3px 0 0;

  color:
    var(
      --ren-muted
    );

  font-size:
    8.5px;

  line-height:
    1.4;

  font-weight:
    650;
}


/* =========================================================
   CHOICE CARDS
   ========================================================= */

.rendiciones-choice-grid {
  display:
    grid;

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

  gap:
    7px;
}


.rendiciones-choice-card {
  position:
    relative;

  min-width:
    0;

  padding:
    10px;

  display:
    grid;

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

  gap:
    8px;

  align-items:
    flex-start;

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

  border-radius:
    10px;

  background:
    var(
      --ren-surface
    );

  cursor:
    pointer;

  transition:
    160ms ease;
}


.rendiciones-choice-card:hover,
.rendiciones-choice-card.is-selected {
  border-color:
    var(
      --ren-accent
    );

  background:
    var(
      --ren-accent-soft
    );
}


.rendiciones-choice-card input {
  position:
    absolute;

  opacity:
    0;

  pointer-events:
    none;
}


.rendiciones-choice-card > span {
  width:
    27px;

  height:
    27px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    8px;

  background:
    var(
      --ren-surface-soft
    );

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


.rendiciones-choice-card.is-selected > span {
  background:
    var(
      --ren-accent
    );

  color:
    #ffffff;
}


html[data-theme="dark"]
.rendiciones-choice-card.is-selected > span,
body[data-theme="dark"]
.rendiciones-choice-card.is-selected > span {
  color:
    #0d0e10;
}


.rendiciones-choice-card svg {
  width:
    13px;

  height:
    13px;
}


.rendiciones-choice-card > div {
  display:
    grid;

  gap:
    3px;
}


.rendiciones-choice-card strong {
  color:
    var(
      --ren-text
    );

  font-size:
    9.5px;

  font-weight:
    900;
}


.rendiciones-choice-card small {
  color:
    var(
      --ren-muted
    );

  font-size:
    8px;

  line-height:
    1.35;

  font-weight:
    650;
}


/* =========================================================
   REPOSICIÓN
   ========================================================= */

.rendiciones-reposition {
  min-width:
    0;

  display:
    grid;

  gap:
    11px;
}


.rendiciones-reposition-client {
  padding:
    9px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

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

  border-radius:
    10px;

  background:
    var(
      --ren-surface-soft
    );
}


.rendiciones-reposition-client > span {
  width:
    31px;

  height:
    31px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    9px;

  background:
    var(
      --ren-surface
    );

  color:
    var(
      --ren-accent
    );
}


.rendiciones-reposition-client > span svg {
  width:
    14px;

  height:
    14px;
}


.rendiciones-reposition-client > div {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.rendiciones-reposition-client small {
  color:
    var(
      --ren-muted
    );

  font-size:
    7.5px;

  font-weight:
    750;
}


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

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(
      --ren-text
    );

  font-size:
    9.5px;

  font-weight:
    900;
}


.rendiciones-reposition-config,
.rendiciones-reposition-products,
.rendiciones-remito-config {
  padding:
    10px;

  display:
    grid;

  gap:
    9px;

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

  border-radius:
    10px;

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


/* =========================================================
   MODE GRID
   ========================================================= */

.rendiciones-mode-grid {
  display:
    grid;

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

  gap:
    7px;
}


.rendiciones-mode-card {
  position:
    relative;

  min-width:
    0;

  padding:
    9px;

  display:
    grid;

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

  gap:
    8px;

  align-items:
    flex-start;

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

  border-radius:
    9px;

  background:
    var(
      --ren-surface-soft
    );

  cursor:
    pointer;

  transition:
    160ms ease;
}


.rendiciones-mode-card:hover,
.rendiciones-mode-card.is-selected {
  border-color:
    var(
      --ren-accent
    );

  background:
    var(
      --ren-accent-soft
    );
}


.rendiciones-mode-card input {
  position:
    absolute;

  opacity:
    0;

  pointer-events:
    none;
}


.rendiciones-mode-radio {
  width:
    17px;

  height:
    17px;

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

  border-radius:
    50%;

  background:
    var(
      --ren-surface
    );

  position:
    relative;
}


.rendiciones-mode-card.is-selected
.rendiciones-mode-radio {
  border-color:
    var(
      --ren-accent
    );
}


.rendiciones-mode-card.is-selected
.rendiciones-mode-radio::after {
  content:
    "";

  position:
    absolute;

  inset:
    4px;

  border-radius:
    50%;

  background:
    var(
      --ren-accent
    );
}


.rendiciones-mode-card > div {
  min-width:
    0;

  display:
    grid;

  gap:
    3px;
}


.rendiciones-mode-card strong {
  color:
    var(
      --ren-text
    );

  font-size:
    9px;

  line-height:
    1.25;

  font-weight:
    900;
}


.rendiciones-mode-card small {
  color:
    var(
      --ren-muted
    );

  font-size:
    7.5px;

  line-height:
    1.4;

  font-weight:
    650;
}


/* =========================================================
   PERCENTAGE
   ========================================================= */

.rendiciones-percentage-field {
  max-width:
    220px;

  display:
    grid;

  gap:
    5px;
}


.rendiciones-percentage-field > span {
  color:
    var(
      --ren-text-soft
    );

  font-size:
    8.5px;

  font-weight:
    850;
}


.rendiciones-percentage-field > div {
  display:
    grid;

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

  align-items:
    center;

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

  border-radius:
    9px;

  overflow:
    hidden;

  background:
    var(
      --ren-surface-soft
    );
}


.rendiciones-percentage-field input {
  height:
    36px;

  padding:
    0 10px;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;
}


.rendiciones-percentage-field > div > span {
  height:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

  color:
    var(
      --ren-muted
    );

  font-size:
    9px;

  font-weight:
    900;
}


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

.rendiciones-reposition-toolbar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.rendiciones-reposition-toolbar > div:first-child {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}


.rendiciones-reposition-toolbar > div:first-child span {
  color:
    var(
      --ren-accent
    );

  font-size:
    8px;

  font-weight:
    900;

  text-transform:
    uppercase;

  letter-spacing:
    0.05em;
}


.rendiciones-reposition-toolbar > div:first-child strong {
  color:
    var(
      --ren-text
    );

  font-size:
    10px;

  font-weight:
    900;
}


.rendiciones-reposition-toolbar-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  flex-wrap:
    wrap;

  justify-content:
    flex-end;
}


.rendiciones-text-button {
  min-height:
    27px;

  padding:
    0 7px;

  border-radius:
    7px;

  background:
    var(
      --ren-surface-soft
    );

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

  font-size:
    8px;

  font-weight:
    850;
}


.rendiciones-text-button:hover {
  background:
    var(
      --ren-accent-soft
    );

  color:
    var(
      --ren-accent
    );
}


/* =========================================================
   REPOSITION LIST
   ========================================================= */

.rendiciones-reposition-list {
  display:
    grid;

  gap:
    5px;
}


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

  padding:
    8px;

  display:
    grid;

  grid-template-columns:
    28px
    minmax(
      180px,
      1fr
    )
    74px
    74px
    74px
    92px;

  align-items:
    center;

  gap:
    6px;

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

  border-radius:
    9px;

  background:
    var(
      --ren-surface
    );

  transition:
    150ms ease;
}


.rendiciones-reposition-item.is-selected {
  border-color:
    color-mix(
      in srgb,
      var(
        --ren-accent
      ) 20%,
      transparent
    );
}


.rendiciones-reposition-item.has-error {
  border-color:
    color-mix(
      in srgb,
      var(
        --ren-danger
      ) 30%,
      transparent
    );

  background:
    var(
      --ren-danger-soft
    );
}


.rendiciones-reposition-check {
  width:
    22px;

  height:
    22px;

  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  cursor:
    pointer;
}


.rendiciones-reposition-check input {
  position:
    absolute;

  opacity:
    0;
}


.rendiciones-reposition-check > span {
  width:
    19px;

  height:
    19px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    6px;

  background:
    var(
      --ren-surface-soft
    );

  color:
    transparent;

  transition:
    150ms ease;
}


.rendiciones-reposition-check
input:checked
+
span {
  border-color:
    var(
      --ren-accent
    );

  background:
    var(
      --ren-accent
    );

  color:
    #ffffff;
}


html[data-theme="dark"]
.rendiciones-reposition-check
input:checked
+
span,
body[data-theme="dark"]
.rendiciones-reposition-check
input:checked
+
span {
  color:
    #0d0e10;
}


.rendiciones-reposition-check svg {
  width:
    11px;

  height:
    11px;
}


.rendiciones-reposition-product {
  min-width:
    0;

  display:
    grid;

  gap:
    3px;
}


.rendiciones-reposition-product > strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(
      --ren-text
    );

  font-size:
    9px;

  font-weight:
    900;
}


.rendiciones-reposition-product > div {
  display:
    flex;

  gap:
    6px;

  flex-wrap:
    wrap;
}


.rendiciones-reposition-product span {
  color:
    var(
      --ren-muted
    );

  font-size:
    7.5px;

  font-weight:
    650;
}


.rendiciones-reposition-stat {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;

  text-align:
    right;
}


.rendiciones-reposition-stat span,
.rendiciones-reposition-quantity > span {
  color:
    var(
      --ren-muted
    );

  font-size:
    7.5px;

  font-weight:
    750;
}


.rendiciones-reposition-stat strong {
  color:
    var(
      --ren-text
    );

  font-size:
    9.5px;

  font-weight:
    900;
}


.rendiciones-reposition-stat strong.is-danger {
  color:
    var(
      --ren-danger
    );
}


.rendiciones-reposition-quantity {
  display:
    grid;

  gap:
    3px;
}


.rendiciones-reposition-quantity input {
  height:
    31px;

  padding:
    0 7px;

  text-align:
    right;

  font-size:
    9px;
}


.rendiciones-reposition-error {
  grid-column:
    2 /
    -1;

  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  color:
    var(
      --ren-danger
    );

  font-size:
    7.5px;

  font-weight:
    850;
}


.rendiciones-reposition-error svg {
  width:
    11px;

  height:
    11px;
}


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

.rendiciones-reposition-summary {
  display:
    grid;

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

  gap:
    7px;
}


.rendiciones-reposition-summary > div {
  padding:
    9px;

  display:
    grid;

  gap:
    3px;

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

  border-radius:
    9px;

  background:
    var(
      --ren-surface-soft
    );
}


.rendiciones-reposition-summary span {
  color:
    var(
      --ren-muted
    );

  font-size:
    7.5px;

  font-weight:
    750;
}


.rendiciones-reposition-summary strong {
  color:
    var(
      --ren-text
    );

  font-size:
    11px;

  font-weight:
    900;
}


.rendiciones-reposition-summary strong.is-success {
  color:
    var(
      --ren-success
    );
}


.rendiciones-reposition-summary strong.is-danger {
  color:
    var(
      --ren-danger
    );
}


/* =========================================================
   CONFIRM REPOSITION
   ========================================================= */

.rendiciones-confirm-reposition-head {
  display:
    grid;

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

  gap:
    9px;

  align-items:
    flex-start;
}


.rendiciones-confirm-reposition-head > span {
  width:
    38px;

  height:
    38px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    11px;

  background:
    var(
      --ren-accent-soft
    );

  color:
    var(
      --ren-accent
    );
}


.rendiciones-confirm-reposition-head svg {
  width:
    18px;

  height:
    18px;
}


/* =========================================================
   FINAL FLOW
   ========================================================= */

.rendiciones-final-flow {
  display:
    grid;

  grid-template-columns:
    1fr
    auto
    1fr
    auto
    1fr;

  align-items:
    center;

  gap:
    6px;
}


.rendiciones-final-flow > div {
  min-height:
    62px;

  padding:
    8px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

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

  border-radius:
    9px;

  background:
    var(
      --ren-surface-soft
    );

  text-align:
    center;
}


.rendiciones-final-flow > div > span {
  width:
    20px;

  height:
    20px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    7px;

  background:
    var(
      --ren-accent-soft
    );

  color:
    var(
      --ren-accent
    );

  font-size:
    8px;

  font-weight:
    900;
}


.rendiciones-final-flow > div > strong {
  color:
    var(
      --ren-text
    );

  font-size:
    8px;

  line-height:
    1.3;

  font-weight:
    850;
}


.rendiciones-final-flow > svg {
  width:
    13px;

  height:
    13px;

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


/* =========================================================
   DARK FORM ELEMENTS
   ========================================================= */

html[data-theme="dark"]
.rendiciones-page input,
html[data-theme="dark"]
.rendiciones-page textarea,
html[data-theme="dark"]
.rendiciones-page select,
body[data-theme="dark"]
.rendiciones-page input,
body[data-theme="dark"]
.rendiciones-page textarea,
body[data-theme="dark"]
.rendiciones-page select {
  color-scheme:
    dark;
}


html[data-theme="dark"]
.rendiciones-page select option,
body[data-theme="dark"]
.rendiciones-page select option {
  background:
    #111214;

  color:
    #f4f5f7;
}


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

.rendiciones-modal-body,
.rendiciones-table-wrap {
  scrollbar-width:
    thin;

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


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

.rendiciones-button:focus-visible,
.rendiciones-icon-button:focus-visible,
.rendiciones-text-button:focus-visible,
.rendiciones-code-button:focus-visible,
.rendiciones-remito-button:focus-visible,
.rendiciones-file-drop:focus-within,
.rendiciones-choice-card:focus-within,
.rendiciones-mode-card:focus-within,
.rendiciones-reposition-check:focus-within {
  outline:
    2px solid
    var(
      --ren-accent
    );

  outline-offset:
    2px;
}


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

@media (
  max-width:
    1280px
) {
  .rendiciones-kpis {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .rendiciones-toolbar-main {
    grid-template-columns:
      minmax(
        240px,
        1fr
      )
      180px
      140px
      140px;
  }
}


/* =========================================================
   RESPONSIVE · 1080
   ========================================================= */

@media (
  max-width:
    1080px
) {
  .rendiciones-page {
    padding:
      14px;
  }


  .rendiciones-toolbar-main {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      minmax(
        160px,
        0.45fr
      );

    align-items:
      end;
  }


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


  .rendiciones-process-card {
    position:
      static;
  }


  .rendiciones-reposition-item {
    grid-template-columns:
      28px
      minmax(
        180px,
        1fr
      )
      repeat(
        3,
        70px
      )
      90px;
  }
}


/* =========================================================
   RESPONSIVE · 900
   ========================================================= */

@media (
  max-width:
    900px
) {
  .rendiciones-heading {
    flex-direction:
      column;
  }


  .rendiciones-heading-actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


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


  .rendiciones-table-wrap {
    display:
      none;
  }


  .rendiciones-mobile-list {
    display:
      block;
  }


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


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


  .rendiciones-item-metrics {
    grid-template-columns:
      repeat(
        3,
        1fr
      );
  }


  .rendiciones-reposition-item {
    grid-template-columns:
      28px
      minmax(
        0,
        1fr
      )
      84px;

    align-items:
      center;
  }


  .rendiciones-reposition-stat {
    display:
      none;
  }


  .rendiciones-reposition-quantity {
    grid-column:
      3;
  }


  .rendiciones-reposition-error {
    grid-column:
      2 /
      -1;
  }
}


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

@media (
  max-width:
    720px
) {
  .rendiciones-page {
    padding:
      10px;

    gap:
      10px;
  }


  .rendiciones-heading h1 {
    font-size:
      23px;
  }


  .rendiciones-heading-actions {
    display:
      grid;

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


  .rendiciones-heading-actions
  .rendiciones-button {
    width:
      100%;
  }


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


  .rendiciones-toolbar-meta {
    justify-content:
      space-between;
  }


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

    flex-direction:
      column;
  }


  .rendiciones-pagination-controls {
    width:
      100%;

    justify-content:
      space-between;
  }


  .rendiciones-modal-backdrop {
    padding:
      8px;

    align-items:
      flex-start;
  }


  .rendiciones-modal {
    width:
      100%;

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

    border-radius:
      13px;
  }


  .rendiciones-modal.is-small,
  .rendiciones-modal.is-medium,
  .rendiciones-modal.is-large,
  .rendiciones-modal.is-xlarge {
    width:
      100%;
  }


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

    padding:
      10px;
  }


  .rendiciones-modal-body {
    padding:
      10px;
  }


  .rendiciones-modal-footer {
    padding:
      9px 10px;

    flex-wrap:
      wrap;
  }


  .rendiciones-modal-footer-spacer {
    display:
      none;
  }


  .rendiciones-modal-footer
  .rendiciones-button {
    flex:
      1 1
      140px;
  }


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


  .rendiciones-choice-grid,
  .rendiciones-mode-grid {
    grid-template-columns:
      1fr;
  }


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


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


  .rendiciones-reposition-client
  > div:last-child {
    grid-column:
      2;
  }


  .rendiciones-reposition-toolbar {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .rendiciones-reposition-toolbar-actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


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


  .rendiciones-final-flow > svg {
    margin:
      0 auto;

    transform:
      rotate(
        90deg
      );
  }
}


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

@media (
  max-width:
    520px
) {
  .rendiciones-kpis {
    grid-template-columns:
      1fr
      1fr;
  }


  .rendiciones-kpi {
    padding:
      9px;
  }


  .rendiciones-kpi-value {
    font-size:
      19px;
  }


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


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


  .rendiciones-mobile-actions {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .rendiciones-mobile-actions
  .rendiciones-button {
    width:
      100%;
  }


  .rendiciones-detail-top {
    flex-direction:
      column;
  }


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


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


  .rendiciones-item-main
  .rendiciones-item-status {
    grid-column:
      1 /
      -1;

    justify-self:
      start;
  }


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


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


  .rendiciones-reposition-quantity {
    grid-column:
      2;
  }


  .rendiciones-reposition-error {
    grid-column:
      2;
  }


  .rendiciones-reposition-quantity input {
    max-width:
      120px;
  }


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


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

@media (
  prefers-reduced-motion:
    reduce
) {
  .rendiciones-page *,
  .rendiciones-page *::before,
  .rendiciones-page *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}