/*
 * Portal Cliente — auth pages (Registo, Login, Recuperar/Reset password)
 *
 * Card-on-soft-bg layout shared by all anonymous auth pages. Tokens come
 * from portal-theme.css — never hardcode hex/font-family here.
 */

.portal-auth {
    min-height: calc(100vh - 200px);
    padding: 48px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: var(--bg);
}

.portal-auth-card {
    width: 100%;
    max-width: 480px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.06);
    padding: 40px 36px;
}

.portal-auth-card.is-wide {
    max-width: 560px;
}

.portal-auth-header {
    margin-bottom: 28px;
    text-align: center;
}

.portal-auth-title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--text-primary);
}

.portal-auth-subtitle {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.portal-auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.portal-auth-field label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.portal-auth-field .rz-textbox,
.portal-auth-field .rz-password {
    width: 100%;
    min-height: 44px;
}

.portal-auth-hint {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.portal-auth-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.portal-auth-actions .rz-button {
    width: 100%;
    min-height: 48px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.portal-auth-links {
    margin-top: 22px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-secondary);
}

.portal-auth-links a {
    color: var(--gold-dark);
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
}

.portal-auth-links a:hover {
    color: var(--gold);
    text-decoration: underline;
}

.portal-auth-secondary-link {
    display: block;
    margin-top: 14px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--gold-dark);
    text-decoration: none;
}

.portal-auth-secondary-link:hover {
    color: var(--gold);
    text-decoration: underline;
}

.portal-auth-forgot {
    text-align: right;
    margin: -10px 0 14px 0;
    font-family: var(--font-body);
    font-size: 13px;
}

.portal-auth-forgot a {
    color: var(--gold-dark);
    text-decoration: none;
}

.portal-auth-forgot a:hover {
    color: var(--gold);
    text-decoration: underline;
}

.portal-auth-alert {
    border-radius: 10px;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 18px;
}

.portal-auth-alert-error {
    background: rgba(229, 57, 53, 0.08);
    border: 1px solid rgba(229, 57, 53, 0.25);
    color: var(--error);
}

.portal-auth-alert-success {
    background: rgba(67, 160, 71, 0.08);
    border: 1px solid rgba(67, 160, 71, 0.25);
    color: var(--success);
}

.portal-auth-alert-recoverable {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.portal-auth-alert-recoverable .recover-cta {
    align-self: flex-start;
    font-weight: 600;
    color: var(--gold-dark);
    text-decoration: none;
}

.portal-auth-alert-recoverable .recover-cta:hover {
    color: var(--gold);
    text-decoration: underline;
}

.portal-auth-validator {
    color: var(--error);
    font-family: var(--font-body);
    font-size: 12px;
    margin-top: 2px;
}

@media (max-width: 540px) {
    .portal-auth {
        padding: 24px 12px;
    }

    .portal-auth-card {
        padding: 28px 22px;
        border-radius: 12px;
    }

    .portal-auth-title {
        font-size: 24px;
    }
}

/*
 * /perfil — authenticated profile page. Wider container that stacks two
 * cards (personal data + password change). Inherits the same form
 * styling as the auth pages above so visual consistency is automatic.
 */
.portal-profile {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.portal-profile-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.06);
    padding: 36px 36px;
}

.portal-profile-section-title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 24px 0;
    color: var(--text-primary);
}

.portal-profile-hint {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-secondary);
    margin: 4px 0 0 0;
}

.portal-profile-meta {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-secondary);
    margin: 8px 0 16px 0;
}

.portal-profile-loading {
    font-family: var(--font-body);
    color: var(--text-secondary);
    text-align: center;
    padding: 24px 0;
}

@media (max-width: 540px) {
    .portal-profile-card {
        padding: 24px 22px;
        border-radius: 12px;
    }
}

/*
 * /pedidos — order list with filter row, Radzen DataGrid, paging.
 */
.portal-orders {
    padding: 48px 20px 64px;
    background: var(--bg);
}

.portal-orders-container {
    max-width: 1080px;
    margin: 0 auto;
}

.portal-orders-header {
    margin-bottom: 28px;
}

.portal-orders-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.portal-orders-subtitle {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.portal-orders-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 16px;
    align-items: end;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

.portal-orders-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.portal-orders-filter label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.portal-orders-filter-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.portal-orders-alert {
    background: #fdecea;
    border: 1px solid #f3c7c2;
    color: #7a1f1a;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-family: var(--font-body);
    font-size: 14px;
}

.portal-orders-grid .rz-data-row {
    cursor: pointer;
}

@media (max-width: 720px) {
    .portal-orders-filters {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/*
 * /pedidos/{id} — detail page with header, items table and history timeline.
 */
.portal-order-detail {
    padding: 48px 20px 64px;
    background: var(--bg);
}

.portal-order-detail-container {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.portal-order-detail-back {
    align-self: flex-start;
}

.portal-order-detail-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 32px;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.06);
}

.portal-order-detail-header {
    margin-bottom: 24px;
}

.portal-order-detail-title {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.portal-order-detail-meta {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.portal-order-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 32px;
    margin: 0;
}

.portal-order-detail-pair {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.portal-order-detail-pair-wide {
    grid-column: 1 / -1;
}

.portal-order-detail-pair dt {
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: var(--text-secondary);
}

.portal-order-detail-pair dd {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-primary);
    margin: 0;
}

.portal-order-detail-section-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 20px 0;
}

.portal-order-detail-items {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 14px;
}

.portal-order-detail-items th,
.portal-order-detail-items td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.portal-order-detail-items th {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}

.portal-order-detail-items .portal-order-detail-num {
    text-align: right;
    white-space: nowrap;
}

.portal-order-detail-empty {
    font-family: var(--font-body);
    color: var(--text-secondary);
    margin: 0;
}

.portal-order-detail-state,
.portal-order-detail-alert {
    padding: 16px 20px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 14px;
}

.portal-order-detail-state {
    background: var(--surface);
    color: var(--text-secondary);
    text-align: center;
}

.portal-order-detail-alert {
    background: #fdecea;
    border: 1px solid #f3c7c2;
    color: #7a1f1a;
}

.portal-order-detail-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.portal-order-detail-timeline-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 14px;
    border-left: 2px solid var(--gold);
}

.portal-order-detail-timeline-date {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}

.portal-order-detail-timeline-text {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-primary);
}

@media (max-width: 720px) {
    .portal-order-detail-card {
        padding: 24px 20px;
        border-radius: 12px;
    }

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

    .portal-order-detail-items th,
    .portal-order-detail-items td {
        padding: 8px;
        font-size: 13px;
    }
}

/*
 * /pacotes — package list as cards with progress bar.
 */
.portal-packages {
    padding: 48px 20px 64px;
    background: var(--bg);
}

.portal-packages-container {
    max-width: 1080px;
    margin: 0 auto;
}

.portal-packages-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.portal-packages-header-text {
    flex: 1;
    min-width: 240px;
}

.portal-packages-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.portal-packages-subtitle {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.portal-packages-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-primary);
}

.portal-packages-buy-cta {
    min-height: 44px;
}

.portal-packages-state,
.portal-packages-alert,
.portal-packages-empty {
    padding: 24px;
    border-radius: 12px;
    font-family: var(--font-body);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
}

.portal-packages-alert {
    background: #fdecea;
    border-color: #f3c7c2;
    color: #7a1f1a;
}

.portal-packages-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: var(--text-secondary);
}

.portal-packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.portal-package-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 28px 24px;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.portal-package-card-low {
    border-color: var(--gold);
    box-shadow: 0 6px 32px rgba(212, 175, 55, 0.18);
}

.portal-package-card-exhausted {
    opacity: 0.7;
}

.portal-package-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
}

.portal-package-card-name {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.portal-package-card-badge {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(212, 175, 55, 0.12);
    color: var(--gold);
    border: 1px solid rgba(212, 175, 55, 0.3);
    white-space: nowrap;
}

.portal-package-card-exhausted .portal-package-card-badge {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-secondary);
    border-color: var(--border);
}

.portal-package-card-balance {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 4px 0 0 0;
    flex-wrap: wrap;
}

.portal-package-card-balance-value {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
}

.portal-package-card-balance-sep {
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--text-secondary);
}

.portal-package-card-balance-total {
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--text-secondary);
}

.portal-package-card-balance-label {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-secondary);
}

.portal-package-card-progress {
    margin: 4px 0;
}

.portal-package-card-warning {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--gold);
    margin: 0;
}

.portal-package-card-meta {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

.portal-package-card-link {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
    margin-top: auto;
}

.portal-package-card-link:hover {
    text-decoration: underline;
}

@media (max-width: 880px) {
    .portal-packages-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/*
 * /pacotes/{id} — package detail with summary + movements table.
 */
.portal-package-detail {
    padding: 48px 20px 64px;
    background: var(--bg);
}

.portal-package-detail-container {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.portal-package-detail-back {
    align-self: flex-start;
}

.portal-package-detail-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 32px;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.06);
}

.portal-package-detail-header {
    margin-bottom: 24px;
}

.portal-package-detail-title {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.portal-package-detail-meta {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.portal-package-detail-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 32px;
    margin: 0;
}

.portal-package-detail-summary-pair {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.portal-package-detail-summary-pair dt {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.portal-package-detail-summary-pair dd {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.portal-package-detail-section-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 20px 0;
}

.portal-package-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 14px;
}

.portal-package-detail-table th,
.portal-package-detail-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.portal-package-detail-table th {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}

.portal-package-detail-num {
    text-align: right;
    white-space: nowrap;
}

.portal-package-detail-debit {
    color: #b3261e;
    font-weight: 600;
}

.portal-package-detail-credit {
    color: #1f7a1f;
    font-weight: 600;
}

.portal-package-detail-state,
.portal-package-detail-alert {
    padding: 16px 20px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 14px;
}

.portal-package-detail-state {
    background: var(--surface);
    color: var(--text-secondary);
    text-align: center;
}

.portal-package-detail-alert {
    background: #fdecea;
    border: 1px solid #f3c7c2;
    color: #7a1f1a;
}

@media (max-width: 720px) {
    .portal-package-detail-card {
        padding: 24px 20px;
        border-radius: 12px;
    }

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

    .portal-package-detail-table th,
    .portal-package-detail-table td {
        padding: 8px;
        font-size: 13px;
    }
}

/*
 * /entregas — delivery calendar with side panel + mobile list view.
 */
.portal-deliveries {
    padding: 48px 20px 64px;
    background: var(--bg);
}

.portal-deliveries-container {
    max-width: 1200px;
    margin: 0 auto;
}

.portal-deliveries-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.portal-deliveries-header-text {
    flex: 1;
    min-width: 240px;
}

.portal-deliveries-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.portal-deliveries-subtitle {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.portal-deliveries-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-primary);
}

.portal-deliveries-alert {
    background: #fdecea;
    border: 1px solid #f3c7c2;
    color: #7a1f1a;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-family: var(--font-body);
    font-size: 14px;
}

.portal-deliveries-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: stretch;
}

.portal-deliveries-calendar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.06);
    min-height: 640px;
}

.portal-deliveries-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 24px;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.portal-deliveries-panel-empty {
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 14px;
    text-align: center;
    margin: auto 0;
}

.portal-deliveries-panel-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.portal-deliveries-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.portal-deliveries-panel-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.portal-deliveries-panel-badge {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.portal-deliveries-panel-badge.is-pending {
    background: rgba(212, 175, 55, 0.12);
    color: var(--gold);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.portal-deliveries-panel-badge.is-completed {
    background: rgba(31, 122, 31, 0.10);
    color: #1f7a1f;
    border: 1px solid rgba(31, 122, 31, 0.3);
}

.portal-deliveries-panel-store {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.portal-deliveries-panel-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.portal-deliveries-panel-value {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text-primary);
}

.portal-deliveries-panel-section {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.portal-deliveries-panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.portal-deliveries-panel-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: var(--bg);
    border-radius: 8px;
}

.portal-deliveries-panel-ticket {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
}

.portal-deliveries-panel-ticket:hover {
    text-decoration: underline;
}

.portal-deliveries-panel-meta {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-secondary);
}

/* Mobile list view — scheduler hidden, cards-on-top layout shown. */
.portal-deliveries-list {
    display: none;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.portal-deliveries-list-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 20px;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.portal-deliveries-list-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.portal-deliveries-list-card-date {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.portal-deliveries-list-card-store {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.portal-deliveries-empty {
    font-family: var(--font-body);
    color: var(--text-secondary);
    text-align: center;
    margin: 32px 0;
}

@media (max-width: 880px) {
    .portal-deliveries-layout {
        display: none;
    }

    .portal-deliveries-list {
        display: flex;
    }
}

/*
 * /pacotes/loja — package store catalog with cards + service-type filter.
 */
.portal-shop {
    padding: 48px 20px 64px;
    background: var(--bg);
}

.portal-shop-container {
    max-width: 1080px;
    margin: 0 auto;
}

.portal-shop-header {
    margin-bottom: 24px;
}

.portal-shop-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.portal-shop-subtitle {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.portal-shop-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 320px;
    margin-bottom: 24px;
}

.portal-shop-filter label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.portal-shop-state,
.portal-shop-empty {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    font-family: var(--font-body);
    color: var(--text-secondary);
}

.portal-shop-alert {
    background: #fdecea;
    border: 1px solid #f3c7c2;
    color: #7a1f1a;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-family: var(--font-body);
    font-size: 14px;
}

.portal-shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.portal-shop-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 28px 24px;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 280px;
}

.portal-shop-card-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.portal-shop-card-name {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.portal-shop-card-description {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.portal-shop-card-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.portal-shop-card-price-value {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
}

.portal-shop-card-price-meta {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-secondary);
}

.portal-shop-card-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.portal-shop-card-chip {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.10);
    color: var(--gold);
    border: 1px solid rgba(212, 175, 55, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.portal-shop-card-cta {
    margin-top: auto;
    align-self: stretch;
}

@media (max-width: 880px) {
    .portal-shop-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/*
 * Package buy dialog — opened via DialogService from /pacotes/loja.
 */
.portal-buy-dialog {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: var(--font-body);
}

.portal-buy-dialog-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.portal-buy-dialog-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.portal-buy-dialog-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.portal-buy-dialog-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 0;
}

.portal-buy-dialog-pair {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.portal-buy-dialog-pair dt {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.portal-buy-dialog-pair dd {
    font-size: 16px;
    color: var(--text-primary);
    margin: 0;
}

.portal-buy-dialog-quantity {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.portal-buy-dialog-quantity label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.portal-buy-dialog-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 16px;
    background: var(--bg);
    border-radius: 8px;
}

.portal-buy-dialog-total-label {
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.portal-buy-dialog-total-value {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--gold);
}

.portal-buy-dialog-note {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

.portal-buy-dialog-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

/*
 * /pacotes/loja — sticky-ish mini-summary bar that appears when the cart
 * has at least one item. Sits between the page header and the filter row.
 */
.portal-shop-cart-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 20px;
    margin-bottom: 20px;
    background: var(--surface);
    border: 1px solid var(--gold);
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(212, 175, 55, 0.18);
    font-family: var(--font-body);
}

.portal-shop-cart-summary-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--text-primary);
    font-size: 14px;
}

.portal-shop-cart-summary-total {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--gold);
}

.portal-shop-cart-summary-cta {
    min-height: 40px;
}

@media (max-width: 540px) {
    .portal-shop-cart-summary {
        flex-direction: column;
        align-items: stretch;
    }

    .portal-shop-cart-summary-cta {
        width: 100%;
    }
}

/*
 * /carrinho — review-and-edit page before the customer hits checkout.
 */
.portal-cart {
    padding: 48px 20px 64px;
    background: var(--bg);
}

.portal-cart-container {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.portal-cart-header {
    margin-bottom: 8px;
}

.portal-cart-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.portal-cart-subtitle {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.portal-cart-state,
.portal-cart-empty {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    font-family: var(--font-body);
    color: var(--text-secondary);
}

.portal-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.portal-cart-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.portal-cart-item {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    font-family: var(--font-body);
}

.portal-cart-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.portal-cart-item-name {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.portal-cart-item-meta {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.portal-cart-item-sep {
    margin: 0 6px;
    color: var(--text-muted);
}

.portal-cart-item-chips {
    list-style: none;
    margin: 6px 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.portal-cart-item-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.10);
    color: var(--gold);
    border: 1px solid rgba(212, 175, 55, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.portal-cart-item-quantity {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.portal-cart-item-quantity label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.portal-cart-item-line-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 100px;
}

.portal-cart-item-line-total-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.portal-cart-item-line-total-value {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--gold);
}

.portal-cart-item-remove {
    min-height: 40px;
}

.portal-cart-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
    font-family: var(--font-body);
}

.portal-cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
    color: var(--text-secondary);
}

.portal-cart-summary-total {
    padding-top: 10px;
    border-top: 1px solid var(--border);
    color: var(--text-primary);
    font-weight: 600;
}

.portal-cart-summary-total-value {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--gold);
}

.portal-cart-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 720px) {
    .portal-cart-item {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 12px;
    }

    .portal-cart-item-line-total {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
    }

    .portal-cart-item-quantity,
    .portal-cart-item-line-total {
        min-width: 0;
    }

    .portal-cart-actions {
        justify-content: stretch;
    }

    .portal-cart-actions > * {
        width: 100%;
    }
}

/*
 * /checkout/{orderId} — order summary + payment method picker.
 */
.portal-checkout {
    padding: 48px 20px 64px;
    background: var(--bg);
}

.portal-checkout-container {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.portal-checkout-header {
    margin-bottom: 8px;
}

.portal-checkout-back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: -4px 0 4px 0;
    padding: 8px 10px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--gold-dark);
    text-decoration: none;
    transition: color 120ms ease, background-color 120ms ease;
}

.portal-checkout-back:hover {
    color: var(--gold);
    background: var(--border-light);
    text-decoration: none;
}

.portal-checkout-back:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.portal-checkout-back .rzi {
    font-size: 18px;
}

/*
 * Shared "Voltar ao menu principal" link (BackToHomeButton component, #439).
 * Same visual language as .portal-checkout-back but reusable across the Portal.
 */
.portal-back-to-home {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px 0;
    padding: 8px 10px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--gold-dark);
    text-decoration: none;
    transition: color 120ms ease, background-color 120ms ease;
}

.portal-back-to-home:hover {
    color: var(--gold);
    background: var(--border-light);
    text-decoration: none;
}

.portal-back-to-home:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.portal-back-to-home .rzi {
    font-size: 18px;
}

.portal-checkout-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.portal-checkout-subtitle {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.portal-checkout-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 28px;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.06);
    font-family: var(--font-body);
}

.portal-checkout-card-success {
    border-color: rgba(31, 122, 31, 0.4);
    background: rgba(31, 122, 31, 0.04);
}

.portal-checkout-card-warning {
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(212, 175, 55, 0.04);
}

.portal-checkout-section-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.portal-checkout-section-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
}

.portal-checkout-state,
.portal-checkout-alert {
    padding: 16px 20px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 14px;
}

.portal-checkout-state {
    background: var(--surface);
    color: var(--text-secondary);
    text-align: center;
    border: 1px solid var(--border);
}

.portal-checkout-alert {
    background: #fdecea;
    border: 1px solid #f3c7c2;
    color: #7a1f1a;
}

.portal-checkout-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
    margin: 0;
}

.portal-checkout-pair {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.portal-checkout-pair dt {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.portal-checkout-pair dd {
    font-size: 16px;
    color: var(--text-primary);
    margin: 0;
}

.portal-checkout-pair-total {
    grid-column: 1 / -1;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.portal-checkout-pair-total dd {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--gold);
}

.portal-checkout-method-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.portal-checkout-method-card {
    text-align: left;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.portal-checkout-method-card:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.18);
}

.portal-checkout-method-name {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.portal-checkout-method-desc {
    font-size: 13px;
    color: var(--text-secondary);
}

.portal-checkout-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.portal-checkout-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.portal-checkout-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 0;
}

.portal-checkout-spinner-text {
    font-size: 14px;
    color: var(--text-primary);
    margin: 0;
}

.portal-checkout-stub-note {
    font-size: 12px;
    font-style: italic;
    color: var(--text-secondary);
    margin: 8px 0 16px 0;
}

.portal-checkout-multibanco {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    background: var(--bg);
    border-radius: 10px;
    padding: 20px;
    margin: 0 0 12px 0;
}

.portal-checkout-multibanco-pair {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.portal-checkout-multibanco-pair dt {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.portal-checkout-multibanco-value {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 1px;
}

.portal-checkout-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/*
 * Multibanco screen (#284) — activation notice + "Ver estado" link +
 * print layout for an A6 receipt. The print rules hide the whole page
 * chrome and re-show only the multibanco data list inside the dedicated
 * print frame so the user can give the printout to a teller or stick
 * it on the fridge.
 */
.portal-checkout-activation-note {
    background: rgba(184, 134, 11, 0.08);
    border-left: 3px solid var(--gold, #b8860b);
    border-radius: 4px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 13px;
    margin: 0 0 16px 0;
}

.portal-checkout-status-link {
    margin: 16px 0 0 0;
    text-align: center;
    font-size: 13px;
}

.portal-checkout-status-link a {
    color: var(--text-secondary);
    text-decoration: underline;
}

.portal-checkout-status-link a:hover {
    color: var(--text-primary);
}

@media print {
    @page {
        size: A6;
        margin: 8mm;
    }

    /* Hide everything, then re-show only the multibanco card. The classic
       "visibility + absolute positioning" trick keeps the layout flow of
       the hidden ancestors intact so the card can be lifted to the top
       left of the printed page without breaking the live DOM. */
    body * {
        visibility: hidden !important;
    }

    .portal-checkout-multibanco-card,
    .portal-checkout-multibanco-card * {
        visibility: visible !important;
    }

    .portal-checkout-multibanco-card {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        background: white !important;
        box-shadow: none !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .portal-checkout-multibanco-card .portal-checkout-actions,
    .portal-checkout-multibanco-card .portal-checkout-status-link {
        display: none !important;
    }

    .portal-checkout-multibanco {
        background: transparent !important;
        padding: 0 !important;
    }

    .portal-checkout-multibanco-value {
        font-size: 16px !important;
    }
}

/*
 * Order summary — list of items (#398). One row per package line, with a
 * footer row that holds the aggregate total. The label/value pair styling
 * for paid/cancelled cards (.portal-checkout-pair*) lives above and is
 * still used by status messaging.
 */
.portal-checkout-items-meta {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
}

.portal-checkout-items {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 14px;
}

.portal-checkout-items thead th {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}

.portal-checkout-items tbody td {
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
}

.portal-checkout-items-num {
    text-align: right !important;
    white-space: nowrap;
}

.portal-checkout-items tfoot th,
.portal-checkout-items tfoot td {
    padding: 14px 12px;
    border-top: 2px solid var(--border);
}

.portal-checkout-items-total-label {
    text-align: right;
    font-family: var(--font-body);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: var(--text-secondary);
}

.portal-checkout-items-total-value {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--gold);
}

@media (max-width: 640px) {
    .portal-checkout-items th,
    .portal-checkout-items td {
        padding: 8px;
        font-size: 13px;
    }

    .portal-checkout-items-total-value {
        font-size: 18px;
    }
}

@media (max-width: 720px) {
    .portal-checkout-card {
        padding: 24px 20px;
        border-radius: 12px;
    }

    .portal-checkout-summary {
        grid-template-columns: 1fr;
    }

    .portal-checkout-method-grid {
        grid-template-columns: 1fr;
    }
}

/*
 * PortalPasswordBox — password input with eye-toggle. Wraps a Radzen
 * input so .portal-auth-field .rz-textbox / .rz-password rules apply,
 * and overlays an absolute-positioned button on the right edge.
 */
.portal-password-box {
    position: relative;
    display: block;
    width: 100%;
}

.portal-password-box__input,
.portal-password-box__input.rz-textbox {
    width: 100%;
    padding-right: 44px;
}

.portal-password-box__toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease;
}

.portal-password-box__toggle:hover:not(:disabled) {
    color: var(--gold-dark);
    background: var(--border-light);
}

.portal-password-box__toggle:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.portal-password-box__toggle:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}

.portal-password-box__toggle .rzi {
    font-size: 20px;
}

/* ---------------------------------------------------------------------
 * Saldo de peças em dívida (#598)
 *
 * O cliente vê o estado de dívida em três sítios — Home (card de saldo),
 * Perfil (secção dedicada) e Pacotes (banner por cima da grid). Todos
 * usam a mesma paleta: tom de alerta institucional (var(--error))
 * sobre um fundo levemente tingido para manter o contraste WCAG AA sem
 * inventar cores fora dos tokens da ADR-011.
 * ------------------------------------------------------------------ */

/* Home — variante do card de saldo quando há dívida. */
.portal-dashboard-balance-debt .portal-dashboard-balance-value {
    color: var(--error);
}

.portal-dashboard-balance-debt .portal-dashboard-balance-label {
    color: var(--error);
    font-weight: 600;
}

/* Perfil — card dedicado ao saldo. */
.portal-profile-balance-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
}

.portal-profile-balance-card-debt {
    border-color: var(--error);
    background: color-mix(in srgb, var(--error) 6%, var(--surface));
}

.portal-profile-balance-value {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 4px 0 8px 0;
}

.portal-profile-balance-value-debt {
    color: var(--error);
}

.portal-profile-balance-hint {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0 0 16px 0;
}

/* Pacotes — banner por cima da grid quando há dívida. */
.portal-debt-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    margin: 0 0 20px 0;
    border-radius: 12px;
    border-left: 4px solid var(--error);
    background: color-mix(in srgb, var(--error) 6%, var(--surface));
    color: var(--text-primary);
}

.portal-debt-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.portal-debt-banner-text strong {
    color: var(--error);
    font-size: 16px;
}

.portal-debt-banner-text span {
    color: var(--text-secondary);
    font-size: 14px;
}

/* /pagamentos — header da coluna Acções. TextAlign="Right" da Radzen
   alinha tanto o header como as células à direita; sem padding, o
   texto "Acções" cola na margem direita da célula (#630). */
.portal-actions-header {
    padding-right: 12px;
}