/* ContaBase Faturas Styles */

.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

.btn-tactile { transition: all 0.15s ease; }
.btn-tactile:active { transform: scale(0.97); }

.emblem-wrap-solid { background-color: var(--ic, #8b5cf6); }
.icon-colored { color: var(--ic, #8b5cf6); }

.cb-invoice-limit-progress {
    display: block;
    width: 100%;
    height: 5px;
    margin: 0;
    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-progress-track);
    --cb-invoice-limit-value: color-mix(in srgb, var(--ui-success) 60%, transparent);
}

.cb-invoice-limit-progress::-webkit-progress-bar {
    background: var(--ui-progress-track);
    border-radius: inherit;
}

.cb-invoice-limit-progress::-webkit-progress-value {
    background: var(--cb-invoice-limit-value);
    border-radius: inherit;
    transition: width 0.5s ease-out;
}

.cb-invoice-limit-progress::-moz-progress-bar {
    background: var(--cb-invoice-limit-value);
    border-radius: inherit;
    transition: width 0.5s ease-out;
}

.cb-invoice-limit-progress.is-danger { --cb-invoice-limit-value: color-mix(in srgb, var(--ui-danger) 60%, transparent); }
.cb-invoice-limit-progress.is-warning { --cb-invoice-limit-value: color-mix(in srgb, var(--ui-warning) 60%, transparent); }
.cb-invoice-limit-progress.is-success { --cb-invoice-limit-value: color-mix(in srgb, var(--ui-success) 60%, transparent); }

[data-swipe-row="true"] { position: relative; overflow: hidden; }

/* Fat card items — visual match with /lancamentos, no icons */
[data-swipe-content] { -webkit-user-select: none; user-select: none; }

/* Date separator line between transaction date groups */
.cb-date-separator-line {
    background: linear-gradient(90deg, var(--cb-border-subtle) 0%, transparent 100%);
}

/* Faturas inside the global V2 shell. Canonical --cb-* bridge tokens are
   defined once in ui-tokens.css and inherited by .cb-v2-faturas-main; this
   page must not redefine them. */

.cb-v2-faturas-content {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 30px 0 28px;
}

/* Page-specific composition only: the header chrome, type scale and action
   come from premium.css (ui-page-header/ui-*). */
.cb-v2-faturas-header {
    flex-wrap: wrap;
}

.cb-v2-faturas-header-action {
    flex: 0 0 auto;
}

.cb-v2-faturas-panels .cb-card-dense {
    border-color: var(--v2-border);
    background: var(--v2-surface);
}

.cb-v2-faturas-panels .cb-card-dense { border-radius: 12px; }

.cb-v2-faturas-empty {
    display: grid;
    justify-items: start;
    gap: 12px;
    max-width: 560px;
    padding: 28px;
    border: 1px solid var(--v2-border);
    border-radius: 12px;
    background: var(--v2-surface);
}

.cb-v2-faturas-empty-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 10px;
    background: var(--v2-accent-soft);
    color: var(--v2-accent-strong);
}

.cb-v2-faturas-empty-icon svg { width: 19px; height: 19px; }
.cb-v2-faturas-empty .cb-v2-eyebrow { margin: 2px 0 0; }
.cb-v2-faturas-empty h2 {
    margin: 0;
    color: var(--v2-text);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.025em;
}
.cb-v2-faturas-empty > p:not(.cb-v2-eyebrow) {
    max-width: 50ch;
    margin: -4px 0 4px;
    color: var(--v2-muted);
    font-size: 13px;
    line-height: 1.55;
}
.cb-v2-faturas-empty > p strong { color: var(--v2-text); }

.cb-v2-faturas-empty-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cb-v2-faturas-empty-navigation a,
.cb-v2-faturas-empty-create {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 11px;
    border: 1px solid var(--v2-border);
    border-radius: 9px;
    background: var(--v2-surface-raised);
    color: var(--v2-muted);
    font-size: 12px;
    font-weight: 650;
    transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}
.cb-v2-faturas-empty-navigation a:hover {
    border-color: var(--v2-border-strong);
    background: var(--v2-surface-hover);
    color: var(--v2-text);
}
.cb-v2-faturas-empty-navigation svg,
.cb-v2-faturas-empty-create svg { width: 15px; height: 15px; }
.cb-v2-faturas-empty-create {
    border-color: var(--v2-fab-border);
    background: var(--v2-accent);
    color: #fff;
}
.cb-v2-faturas-empty-create:hover { background: var(--v2-fab-hover); }

@media (max-width: 767px) {
    .cb-v2-faturas-content { padding-top: 20px; }
    .cb-v2-faturas-header { align-items: flex-start; }
}
/* --- Invoice financial summary (Etapa C) ---------------------------------
   Presentation only: one main panel + one actions panel. Values, states,
   thresholds and HTMX contracts are unchanged; separators replace nested
   bordered cards. Tokens are canonical (--ui-*). */

.cb-invoice-summary { display: grid; gap: 18px; }

/* Identity (direct invoice links only; the hub shows the selected card). */
.cb-invoice-identity { display: grid; gap: 14px; padding: 18px 20px; }
.cb-invoice-identity-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cb-invoice-identity-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cb-invoice-identity-logo {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border-radius: var(--ui-radius-control);
    background: var(--ic, var(--ui-accent));
    color: var(--ui-action-fg);
}
.cb-invoice-identity-logo img { width: 100%; height: 100%; object-fit: contain; }
.cb-invoice-identity-logo svg { width: 18px; height: 18px; }
.cb-invoice-identity-mark { font-size: 11px; font-weight: 700; letter-spacing: -.02em; }
.cb-invoice-identity-copy { min-width: 0; }
.cb-invoice-identity-name {
    margin: 0;
    overflow: hidden;
    color: var(--ui-text);
    font-size: 18px;
    font-weight: 640;
    letter-spacing: -.02em;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cb-invoice-identity-reference { margin: 3px 0 0; color: var(--ui-text-muted); font-size: 12px; }
.cb-invoice-identity-dates { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--ui-text-muted); font-size: 12px; }
.cb-invoice-identity-dates span { display: inline-flex; align-items: center; gap: 6px; }
.cb-invoice-identity-dates svg { width: 14px; height: 14px; color: var(--ui-text-subtle); }
.cb-invoice-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--ui-border); }
.cb-invoice-filter-label { color: var(--ui-text-subtle); font-size: 10.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.cb-invoice-filter-clear { min-height: 26px; gap: 4px; padding-inline: 9px; font-size: 11px; text-decoration: none; }
.cb-invoice-filter-clear svg { width: 12px; height: 12px; }

/* Sensitive-data warning: semantic warning surface, no decorative color. */
.cb-invoice-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--ui-warning) 30%, var(--ui-border));
    border-radius: var(--ui-radius-card);
    background: color-mix(in srgb, var(--ui-warning) 9%, var(--ui-surface));
    color: var(--ui-text-muted);
    font-size: 12px;
    line-height: 1.5;
}
.cb-invoice-warning svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; color: var(--ui-warning); }
.cb-invoice-warning p { margin: 0; }

/* Two surfaces only: financial summary and actions. */
.cb-invoice-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 18px; }
.cb-invoice-main { padding: 20px 22px; }
.cb-invoice-main-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.cb-invoice-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Main value: the strongest indicator, moderate weight. */
.cb-invoice-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--ui-border); }
.cb-invoice-hero-label { margin: 0; color: var(--ui-text-muted); font-size: 10.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.cb-invoice-hero-value {
    margin: 4px 0 0;
    color: var(--ui-text);
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 660;
    letter-spacing: -.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cb-invoice-hero-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 3px; color: var(--ui-text-muted); font-size: 12px; }
.cb-invoice-hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.cb-invoice-hero-meta svg { width: 14px; height: 14px; color: var(--ui-text-subtle); }

/* Paid vs pending: no nested cards, one hairline between groups. */
.cb-invoice-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--ui-border); }
.cb-invoice-figure { display: grid; gap: 2px; min-width: 0; }
.cb-invoice-figure-label { color: var(--ui-text-muted); font-size: 10.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.cb-invoice-figure-value { color: var(--ui-text); font-size: 18px; font-weight: 640; letter-spacing: -.02em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.cb-invoice-figure-value.is-success { color: var(--ui-success); }
.cb-invoice-figure-value.is-warning { color: var(--ui-warning); }
.cb-invoice-figure-note { color: var(--ui-text-subtle); font-size: 11.5px; }

/* Credit limit: semantics and thresholds stay in cb-invoice-limit-progress. */
.cb-invoice-limit { display: grid; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--ui-border); }
.cb-invoice-limit-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cb-invoice-limit-title { display: inline-flex; align-items: center; gap: 7px; color: var(--ui-text); font-size: 12px; font-weight: 600; }
.cb-invoice-limit-title svg { width: 14px; height: 14px; color: var(--ui-text-subtle); }
.cb-invoice-limit-percent { font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-invoice-limit-percent.is-danger { color: var(--ui-danger); }
.cb-invoice-limit-percent.is-warning { color: var(--ui-warning); }
.cb-invoice-limit-percent.is-neutral { color: var(--ui-text-subtle); }
.cb-invoice-limit-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cb-invoice-limit-figure { min-width: 0; }
.cb-invoice-limit-figure span { display: block; color: var(--ui-text-subtle); font-size: 10.5px; font-weight: 550; }
.cb-invoice-limit-figure strong {
    display: block;
    overflow: hidden;
    color: var(--ui-text-muted);
    font-size: 13px;
    font-weight: 620;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cb-invoice-limit-note { margin: 0; color: var(--ui-text-subtle); font-size: 11.5px; line-height: 1.45; }

/* Payments and refunds: financial rows, not boxes. */
.cb-invoice-section { padding-top: 16px; }
.cb-invoice-section + .cb-invoice-section { margin-top: 16px; border-top: 1px solid var(--ui-border); }
.cb-invoice-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.cb-invoice-section-head h3 { margin: 0; color: var(--ui-text); font-size: 13px; font-weight: 620; letter-spacing: -.01em; }
.cb-invoice-list { border-top: 1px solid var(--ui-border); }
.cb-invoice-list .ui-row { padding: 12px 10px; margin-inline: -10px; border-bottom: 1px solid var(--ui-border); border-radius: var(--ui-radius-tile); }
.cb-invoice-list .ui-row:last-child { border-bottom: 0; }
.cb-invoice-empty-row { display: flex; align-items: center; gap: 8px; padding: 12px 0; color: var(--ui-text-muted); }
.cb-invoice-empty-row svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--ui-text-subtle); }
.cb-invoice-empty-row p { margin: 0; font-size: 12px; }
.cb-invoice-refund-side { display: flex; align-items: center; gap: 6px; }
.cb-invoice-refund-remove:hover { color: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger) 10%, transparent); }

/* Actions panel. */
.cb-invoice-actions { display: grid; gap: 14px; align-content: start; padding: 20px 22px; }
.cb-invoice-actions .ui-section-title { align-items: flex-start; }
.cb-invoice-actions-list { display: grid; gap: 8px; }
.cb-invoice-action-btn { width: 100%; min-height: 42px; justify-content: flex-start; gap: 8px; }
.cb-invoice-action-btn svg { width: 16px; height: 16px; }
.cb-invoice-actions-info { display: grid; margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--ui-border); }
.cb-invoice-actions-info summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--ui-text-muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .03em;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
}
.cb-invoice-actions-info summary::-webkit-details-marker { display: none; }
.cb-invoice-actions-info summary span { display: inline-flex; align-items: center; gap: 6px; }
.cb-invoice-actions-info summary svg { width: 13px; height: 13px; }
.cb-invoice-actions-notes { display: grid; gap: 10px; margin-top: 12px; color: var(--ui-text-muted); font-size: 11.5px; line-height: 1.5; }
.cb-invoice-actions-notes > div { display: flex; align-items: flex-start; gap: 7px; }
.cb-invoice-actions-notes svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 2px; color: var(--ui-text-subtle); }
.cb-invoice-actions-notes p { margin: 0; }
.cb-invoice-actions-notes strong { color: var(--ui-text); font-weight: 620; }
.cb-invoice-paid { display: grid; justify-items: center; gap: 8px; padding: 26px 10px 18px; text-align: center; }
.cb-invoice-paid-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: var(--ui-radius-card);
    background: color-mix(in srgb, var(--ui-success) 13%, transparent);
    color: var(--ui-success);
}
.cb-invoice-paid-icon svg { width: 22px; height: 22px; }
.cb-invoice-paid h2 { margin: 0; color: var(--ui-text); font-size: 15px; font-weight: 620; }
.cb-invoice-paid p { margin: 0; max-width: 28ch; color: var(--ui-text-muted); font-size: 12px; line-height: 1.5; }

@media (max-width: 1199px) {
    .cb-invoice-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
    .cb-invoice-main,
    .cb-invoice-actions { padding: 16px; }
    .cb-invoice-identity { padding: 16px; }
    .cb-invoice-hero { align-items: flex-start; }
    .cb-invoice-hero-value { font-size: clamp(24px, 7vw, 28px); }
    .cb-invoice-hero-meta { gap: 12px; }
    .cb-invoice-figures { gap: 12px; }
    .cb-invoice-figure-value { font-size: 16px; }
    .cb-invoice-limit-figures { gap: 8px; }
    .cb-invoice-limit-figure strong { font-size: 12px; }
    .cb-invoice-identity-row { align-items: flex-start; }
    .cb-invoice-identity-dates { gap: 12px; }
    .cb-invoice-list .ui-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding: 12px 8px; margin-inline: -8px; }
    .cb-invoice-list .ui-row__status { width: 32px; height: 32px; }
    .cb-invoice-refund-side { flex-direction: column; align-items: flex-end; gap: 2px; }
}

@media (max-width: 389px) {
    .cb-invoice-hero-value { white-space: normal; overflow-wrap: anywhere; }
    .cb-invoice-limit-figures { gap: 6px; }
    .cb-invoice-limit-figure strong { font-size: 11.5px; }
    .cb-invoice-action-btn { font-size: 12px; }
}
/* --- Invoice transaction list (Etapa D) ----------------------------------
   One panel, date groups and financial rows. Row layout is the canonical
   .ui-row--invoice variant (premium.css); this block composes the list,
   swipe surfaces and invoice-only states. */

.cb-invoice-transactions { margin-top: 18px; }

.cb-invoice-transactions-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--ui-border);
}

.cb-invoice-sort { width: auto; margin: 0; flex: 0 0 auto; }
.cb-invoice-sort .ui-tab { min-height: 34px; padding-inline: 12px; white-space: nowrap; }
.cb-invoice-sort-full { display: none; }
.cb-invoice-sort-short { display: inline; }

.cb-invoice-groups { padding-bottom: 2px; }

.cb-invoice-group { position: relative; }

.cb-invoice-day {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 18px 6px;
    background: var(--ui-surface);
    color: var(--ui-text-subtle);
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cb-invoice-day-label { white-space: nowrap; }
.cb-invoice-day-line { flex: 1 1 auto; height: 1px; }

/* Each invoice transaction is a card. Date group headers stay outside the
   cards and the show-more wrapper keeps its original index contract. */
.cb-invoice-group-rows {
    gap: 7px;
    padding: 10px 10px 12px;
}

.cb-invoice-group-rows > div[data-show-more-item] {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-card);
    background: var(--ui-surface-raised);
}

.cb-invoice-group-rows > div[data-show-more-item] .ui-row {
    border-bottom: 0;
    background: var(--ui-surface-raised);
}

.cb-invoice-group-rows > div[data-show-more-item] .ui-row:hover {
    background: var(--ui-surface-hover);
}

/* The neutral icon tile needs its own surface now that the row is raised. */
.cb-invoice-group-rows > div[data-show-more-item] .ui-row:not(.is-projected) .ui-row__status {
    background: var(--ui-surface);
}

.cb-invoice-group-rows > div[data-show-more-item] .cb-invoice-row.is-projected {
    background: color-mix(in srgb, var(--ui-accent) 4%, var(--ui-surface-raised));
}

.cb-invoice-group-rows > div[data-show-more-item] .cb-invoice-row.is-projected:hover {
    background: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-surface-raised));
}

.cb-invoice-row .ui-row__title { white-space: nowrap; text-overflow: ellipsis; }
.cb-invoice-row .ui-row__meta { gap: 4px 8px; }
.cb-invoice-row .ui-row__amount.is-expense { color: var(--ui-danger); }
.cb-invoice-row .ui-row__amount.is-income { color: var(--ui-success); }
.cb-invoice-row .ui-row__amount.is-projected { color: var(--ui-accent-strong); }

.cb-invoice-row.is-projected .ui-row__status {
    background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
    color: var(--ui-accent-strong);
}

.cb-invoice-row .ui-row__actions { flex: 0 0 auto; }
.cb-invoice-row-action { width: 32px; height: 32px; }
.cb-invoice-row-action.is-success { color: var(--ui-success); }
.cb-invoice-row-action.is-accent { color: var(--ui-accent-strong); }

/* Swipe surfaces: same gestures/geometry, token colors. */
.invoice-transaction-row { position: relative; overflow: hidden; }

.cb-invoice-swipe-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
}

.cb-invoice-swipe-bg--delete {
    left: 0;
    width: 112px;
    justify-content: flex-start;
    padding-inline: 20px;
    background: var(--ui-danger);
    color: var(--ui-action-fg);
    transform-origin: left center;
}

.cb-invoice-swipe-bg--move {
    right: 0;
    width: 128px;
    justify-content: flex-end;
    padding-inline: 20px;
    background: var(--ui-accent);
    color: var(--ui-action-fg);
    transform-origin: right center;
}

.cb-invoice-swipe-bg--move span { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; }
.cb-invoice-swipe-bg svg { width: 18px; height: 18px; }

/* Expansion footer. */
.cb-invoice-more {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 16px 20px;
    border-top: 1px solid var(--ui-border);
    text-align: center;
}
.cb-invoice-more-count { margin: 0; color: var(--ui-text); font-size: 13px; font-weight: 600; }
.cb-invoice-more-hint { margin: 0; color: var(--ui-text-muted); font-size: 11.5px; }
.cb-invoice-more-btn { margin-top: 8px; }

/* Empty state inside the panel: canonical content, no extra frame. */
.cb-invoice-empty {
    margin: 18px;
    padding: 30px 16px;
    border: 0;
    background: transparent;
}

/* Touch swipe hint: display is owned by the shared shell rule. */
.cb-invoice-swipe-hint {
    align-items: flex-start;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface-raised);
    color: var(--ui-text-muted);
    font-size: 11.5px;
    line-height: 1.5;
}
.cb-invoice-swipe-hint-icon { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; color: var(--ui-text-subtle); }
.cb-invoice-swipe-hint strong { color: var(--ui-text); font-weight: 620; }

@media (min-width: 640px) {
    .cb-invoice-sort-short { display: none; }
    .cb-invoice-sort-full { display: inline; }
}

@media (min-width: 768px) {
    .cb-invoice-day { top: 8.25rem; }
}

@media (max-width: 767px) {
    .cb-invoice-transactions-head { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
    .cb-invoice-sort { width: 100%; }
    .cb-invoice-sort .ui-tab { flex: 1 1 0; min-height: 38px; }
    .cb-invoice-day { padding: 12px 14px 6px; }
    .cb-invoice-row-action { width: 40px; height: 40px; }
    .cb-invoice-more { padding: 14px 16px; }
    .cb-invoice-empty { margin: 12px; }
    .cb-invoice-swipe-hint { padding: 12px 16px; }
}
/* --- Payment dialogs and refund sheet (Etapa E) --------------------------
   Faturas-owned overlays. overlay-stack.js keeps history/back/ESC; faturas.js
   provides local focus containment and partial-payment feedback. Contracts
   (IDs, data-*, hx-*) are unchanged. */

.cb-invoice-overlay:not(.hidden) {
    display: grid;
    height: 100dvh;
    max-height: 100dvh;
    place-items: center;
    overflow: hidden;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.cb-invoice-modal {
    display: flex;
    width: 100%;
    max-width: 460px;
    max-height: min(90dvh, 720px);
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-panel);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-floating);
}

.cb-invoice-modal-head {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 0;
    margin-bottom: 14px;
}

.cb-invoice-modal-heading { min-width: 0; }
.cb-invoice-modal-kicker {
    color: var(--ui-text-subtle);
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.cb-invoice-modal h3 {
    margin: 4px 0 0;
    color: var(--ui-text);
    font-size: 17px;
    font-weight: 640;
    letter-spacing: -.02em;
    line-height: 1.25;
}
.cb-invoice-modal-head p {
    max-width: 42ch;
    margin: 5px 0 0;
    color: var(--ui-text-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

.cb-invoice-modal-close {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-control);
    background: var(--ui-surface-raised);
    color: var(--ui-text-muted);
    cursor: pointer;
    transition: background-color var(--ui-transition), color var(--ui-transition), border-color var(--ui-transition);
}
.cb-invoice-modal-close:hover { background: var(--ui-surface-hover); color: var(--ui-text); border-color: var(--ui-border-strong); }
.cb-invoice-modal-close:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.cb-invoice-modal-close svg { width: 16px; height: 16px; }

.cb-invoice-modal-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ui-border);
    margin-bottom: 16px;
}
.cb-invoice-modal-figure { min-width: 0; }
.cb-invoice-modal-label {
    display: block;
    color: var(--ui-text-muted);
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.cb-invoice-modal-value {
    display: block;
    margin-top: 3px;
    color: var(--ui-text);
    font-size: 16px;
    font-weight: 640;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}
.cb-invoice-modal-figure.is-attention .cb-invoice-modal-value { color: var(--ui-warning); }

.cb-invoice-modal-form { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.cb-invoice-modal-body {
    display: grid;
    gap: 14px;
    min-height: 0;
    padding: 0 20px 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.cb-invoice-field { display: grid; min-width: 0; }
.cb-invoice-field .ui-label { margin-bottom: 6px; }
.cb-invoice-field input[name="payment_amount"] {
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.cb-invoice-modal-error {
    margin: 6px 0 0;
    color: var(--ui-danger);
    font-size: 11.5px;
    line-height: 1.4;
}
.cb-invoice-modal-error[hidden] { display: none; }

.cb-invoice-modal-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--ui-radius-control);
    background: var(--ui-surface-raised);
    color: var(--ui-text-muted);
    font-size: 12px;
    line-height: 1.45;
}
.cb-invoice-modal-note svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; color: var(--ui-text-subtle); }
.cb-invoice-modal-note strong { color: var(--ui-text); font-weight: 620; font-variant-numeric: tabular-nums; }
.cb-invoice-modal-note.is-attention { background: color-mix(in srgb, var(--ui-warning) 8%, var(--ui-surface)); }
.cb-invoice-modal-note.is-attention svg { color: var(--ui-warning); }

.cb-invoice-modal-actions,
.cb-invoice-sheet-actions {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface);
}
.cb-invoice-modal-btn {
    flex: 0 0 auto;
    min-width: 88px;
    min-height: var(--ui-control-height);
    padding-inline: 16px;
}

/* General refund bottom sheet (Faturas-owned; sheet-* stays shared).
   Same Header → Body → Footer contract as the payment dialogs, and the same
   desktop surface/backdrop so the three read as one family. */
.sheet-shell.cb-invoice-refund-dialog {
    border-color: var(--ui-border);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html[data-theme] .sheet-shell.cb-invoice-refund-dialog,
html.dark .sheet-shell.cb-invoice-refund-dialog {
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-floating);
}

.cb-invoice-refund-dialog .sheet-topbar {
    gap: 12px;
    padding: 20px 20px 0;
}

.cb-invoice-refund-dialog .sheet-close-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--ui-radius-control);
}

.cb-invoice-refund-dialog .sheet-close-btn svg {
    width: 16px;
    height: 16px;
}

.cb-invoice-refund-dialog .cb-invoice-sheet-body {
    padding: 14px 20px 8px;
    overscroll-behavior: contain;
}

.cb-invoice-refund-dialog .cb-invoice-sheet-title { font-size: 17px; }
.cb-invoice-refund-dialog .cb-invoice-sheet-subtitle { font-size: 12.5px; line-height: 1.45; }

.cb-invoice-sheet-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--ui-radius-control);
    background: color-mix(in srgb, var(--ui-success) 12%, transparent);
    color: var(--ui-success);
}
.cb-invoice-sheet-icon svg { width: 19px; height: 19px; }
.cb-invoice-sheet-title {
    margin: 0;
    color: var(--ui-text);
    font-size: 16px;
    font-weight: 640;
    letter-spacing: -.02em;
    line-height: 1.25;
}
.cb-invoice-sheet-subtitle {
    margin: 3px 0 0;
    overflow: hidden;
    color: var(--ui-text-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cb-invoice-sheet-summary {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ui-border);
}
.cb-invoice-sheet-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: var(--ui-text-muted);
    font-size: 12px;
}
.cb-invoice-sheet-summary-row strong {
    color: var(--ui-text);
    font-weight: 620;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cb-invoice-sheet-summary-row strong.is-success { color: var(--ui-success); }
.cb-invoice-sheet-note {
    margin: 0;
    color: var(--ui-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .cb-invoice-refund-layer {
        display: grid;
        place-items: center;
        padding: 16px;
    }
    .sheet-shell.cb-invoice-refund-dialog {
        max-width: 460px;
        max-height: min(90dvh, 720px);
        border-radius: var(--ui-radius-panel);
    }
}

@media (max-width: 767px) {
    .cb-invoice-overlay:not(.hidden) {
        place-items: end center;
    }
    .cb-invoice-modal {
        max-width: 100%;
        max-height: 92dvh;
        padding: 0;
    }
    .cb-invoice-modal-head { padding: 18px 18px 0; }
    .cb-invoice-modal-body { padding: 0 18px 8px; }
    .cb-invoice-modal-close { width: 44px; height: 44px; }
    .cb-invoice-modal-actions,
    .cb-invoice-sheet-actions {
        flex-direction: column-reverse;
        gap: 8px;
        padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
    }
    .cb-invoice-modal-btn {
        width: 100%;
        min-width: 0;
    }
    .cb-invoice-field input[name="payment_amount"] { font-size: 16px; }
    .cb-invoice-refund-dialog .sheet-topbar { padding: 18px 18px 0; }
    .cb-invoice-refund-dialog .sheet-close-btn { width: 44px; height: 44px; }
    .cb-invoice-refund-dialog .cb-invoice-sheet-body { padding: 14px 18px 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .cb-invoice-modal-close { transition: none; }
}

/* === PRIVACY ===
   Reuses the global privacy state (sessionStorage contabasePrivacy + body
   .privacy-enabled owned by privacy.js). The scope covers both /faturas and
   direct invoice routes because both render .cb-v2-faturas-main; HTMX and OOB
   replacements inherit the mask without any second state or listener. */
.privacy-enabled .cb-v2-faturas-main [data-sensitive] {
    visibility: hidden;
    user-select: none;
}

.privacy-enabled .cb-v2-faturas-main :is(strong, span, p, small, div, dd)[data-sensitive] {
    position: relative;
}

.privacy-enabled .cb-v2-faturas-main :is(strong, span, p, small, div, dd)[data-sensitive]::after {
    content: "••••";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    visibility: visible;
    color: var(--ui-text-muted);
    font-variant-numeric: normal;
    letter-spacing: .12em;
    pointer-events: none;
}

.privacy-enabled .cb-v2-faturas-main .ui-row__amount[data-sensitive]::after,
.privacy-enabled .cb-v2-faturas-main .cb-invoice-refund-side [data-sensitive]::after {
    justify-content: flex-end;
}

.privacy-enabled .cb-v2-faturas-main .cb-v2-credit-card [data-sensitive]::after {
    color: var(--card-fg-muted);
}

.privacy-enabled .cb-v2-faturas-main input[data-partial-payment-amount]::placeholder {
    color: transparent;
}