.page-visualizar {
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    min-height: 80vh;
    padding-bottom: 3rem;
    font-family: 'Segoe UI',Tahoma,Geneva,Verdana,sans-serif
}

.header-visualizar {
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-divider);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
    margin-top: -19px
}

.header-left-visualizar {
    display: flex;
    align-items: center;
    gap: 1rem
}

.title-visualizar {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin: 0
}

.header-actions-visualizar {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap
}

.content-visualizar {
    max-width: 1260px;
    margin: 2rem auto 0;
    padding: 0 2rem
}

.gap-visualizar {
    gap: 1.5rem
}

.grid-2-visualizar {
    display: grid;
    grid-template-columns: repeat(1,minmax(0,1fr));
    gap: 1.5rem
}

@media(min-width:768px) {
    .grid-2-visualizar {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

.full-visualizar {
    grid-column: span 1/span 1
}

@media(min-width:768px) {
    .full-visualizar {
        grid-column: span 2/span 2
    }
}

.alert-error-visualizar {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: rgba(239,68,68,0.08);
    border: 1px solid #ef4444;
    border-left: 4px solid #ef4444;
    border-radius: .75rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.icon-alert-error {
    font-size: 28px;
    color: #dc2626;
}

.alert-error-visualizar b {
    display: block;
    font-size: .9rem;
    color: #b91c1c;
    margin-bottom: .25rem;
}

.alert-error-visualizar p {
    margin: 0;
    font-size: .85rem;
    color: #ef4444;
}

.alert-success-visualizar {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: rgba(34,197,94,0.08);
    border: 1px solid #22c55e;
    border-left: 4px solid #22c55e;
    border-radius: .75rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.icon-alert-success {
    font-size: 28px;
    color: #16a34a;
}

.alert-success-visualizar b {
    display: block;
    font-size: .9rem;
    color: #15803d;
    margin-bottom: .25rem;
}

.alert-success-visualizar p {
    margin: 0;
    font-size: .85rem;
    color: #22c55e;
}

.card-visualizar {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: .75rem;
    overflow: hidden;
    margin-top: 15px;
}

.card-header-visualizar {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mud-palette-text-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.card-body-visualizar {
    padding: 1.5rem;
    width: 100%
}

.label-visualizar {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: .025em;
    margin-bottom: .25rem;
    text-align: start;
}

.text-visualizar {
    font-size: .875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin-bottom: 1rem;
    word-break: break-word
}

.desc-visualizar {
    font-size: .875rem;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-background);
    padding: 1rem;
    border-radius: .5rem;
    border: 1px solid var(--mud-palette-divider);
    line-height: 1.5;
    word-break: break-word
}

.badge-visualizar {
    padding: .25rem .75rem;
    border-radius: 9999px;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid transparent
}

    .badge-visualizar.assinado {
        background-color: rgba(34,197,94,.1);
        color: #22c55e;
        border-color: #22c55e
    }

    .badge-visualizar.vencido {
        background-color: rgba(var(--mud-palette-error-rgb),.1);
        color: var(--mud-palette-error);
        border-color: var(--mud-palette-error)
    }

    .badge-visualizar.inativo {
        background-color: rgba(249,115,22,.1);
        color: #f97316;
        border-color: #f97316
    }

    .badge-visualizar.rascunho {
        background-color: var(--mud-palette-background);
        color: var(--mud-palette-text-secondary);
        border-color: var(--mud-palette-divider)
    }

.card-dark-visualizar {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: .75rem;
    padding: 1.5rem;
}

.title-small-visualizar {
    font-size: .75rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    letter-spacing: .05em
}

.row-visualizar {
    display: flex;
    justify-content: space-between;
    margin-bottom: .75rem;
    font-size: .875rem
}

.red-visualizar {
    color: var(--mud-palette-error)
}

.divider-visualizar {
    border-top: 1px dashed var(--mud-palette-divider);
    margin: 1rem 0
}

.total-visualizar {
    align-items: flex-end
}

    .total-visualizar span:first-child {
        font-size: .75rem;
        font-weight: 700;
        color: var(--mud-palette-text-secondary);
        text-transform: uppercase
    }

    .total-visualizar span:last-child {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--mud-palette-primary)
    }

.city-wrapper-visualizar {
    display: flex;
    align-items: center;
    gap: 1rem
}

.city-icon-visualizar {
    padding: .75rem;
    background-color: rgba(var(--mud-palette-primary-rgb),.1);
    color: var(--mud-palette-primary);
    border-radius: .5rem
}

.city-visualizar {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin: 0
}

.text-muted-visualizar {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary)
}

.btn-primary-visualizar {
    background-color: var(--mud-palette-primary) !important;
    color: #fff !important
}

.btn-danger-visualizar {
    background-color: rgba(var(--mud-palette-error-rgb),.1) !important;
    color: var(--mud-palette-error) !important;
    border: 1px solid var(--mud-palette-error) !important
}

/* RESPONSIVO */

* {
    box-sizing: border-box
}

@media(min-width:1600px) {
    .content-visualizar {
        max-width: 1000px
    }
}

@media(min-width:2000px) {
    .content-visualizar {
        max-width: 1200px
    }
}

@media(max-width:768px) {
    .header-visualizar {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem
    }

    .content-visualizar {
        padding: 0 1rem
    }

    .timeline-item-visualizar {
        width: 100%
    }
}

/* SPIN */
.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


.grid-3-visualizar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

    .grid-3-visualizar > div {
        width: 100%;
    }


/* ==================
GRID DO VISUALIZAR 
=================== */

.table-visualizar {
    width: 100%;
    border-collapse: collapse;
}

    .table-visualizar thead tr,
    .table-visualizar tbody tr {
        display: grid;
        grid-template-columns: 1fr 3fr 2fr 2fr 2fr;
        align-items: center;
    }

    /* HEADER */
    .table-visualizar thead tr {
        padding: .75rem 1rem;
        border-bottom: 1px solid var(--mud-palette-divider);
    }

    .table-visualizar th {
        font-size: .7rem;
        text-transform: uppercase;
        color: var(--mud-palette-text-secondary);
        text-align: left;
    }

    /* BODY */
    .table-visualizar tbody tr {
        padding: .85rem 1rem;
        border-bottom: 1px solid var(--mud-palette-divider);
        transition: background .2s;
    }

        .table-visualizar tbody tr:last-child {
            border-bottom: none;
        }

        .table-visualizar tbody tr:hover {
            background-color: var(--mud-palette-action-hover);
        }

    .table-visualizar td {
        font-size: .85rem;
        color: var(--mud-palette-text-primary);
        text-align: left;
    }

    /* Coluna Valor — alinhada à direita */
    .col-valor-th {
        text-align: right !important;
    }

    .col-valor-td {
        text-align: right;
        font-weight: 600;
    }

    /* Coluna Status — centralizada */
    .col-status-th {
        text-align: center !important;
    }

    .col-status-td {
        display: flex;
        justify-content: center;
    }

/* ── Badges de status da tabela de notas ─────────────── */
.badge-nota-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 7px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.status-dot-nota {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.badge-nota-status.status-pendente {
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    color: var(--mud-palette-warning-darken);
    border-color: color-mix(in srgb, var(--mud-palette-warning) 30%, transparent);
}
.badge-nota-status.status-pendente .status-dot-nota { background: var(--mud-palette-warning); }

.badge-nota-status.status-aprovada {
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: var(--mud-palette-success-darken);
    border-color: color-mix(in srgb, var(--mud-palette-success) 30%, transparent);
}
.badge-nota-status.status-aprovada .status-dot-nota { background: var(--mud-palette-success); }

.badge-nota-status.status-enviada {
    background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent);
    color: var(--mud-palette-info-darken);
    border-color: color-mix(in srgb, var(--mud-palette-info) 30%, transparent);
}
.badge-nota-status.status-enviada .status-dot-nota { background: var(--mud-palette-info); }

.badge-nota-status.status-rejeitada {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    color: var(--mud-palette-error-darken);
    border-color: color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
}
.badge-nota-status.status-rejeitada .status-dot-nota { background: var(--mud-palette-error); }

/* Icons */

.with-icon {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.icon-visualizar {
    font-size: 18px;
    color: var(--mud-palette-text-secondary);
}

.spin-icon {
    animation: spin 1s linear infinite;
}

.btn-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mud-button-start-icon {
    display: none !important;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.btn-loading-visualizar {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.4) !important;
    color: #fff !important;
    cursor: not-allowed;
    box-shadow: none !important;
}


/* ===============================
    Volume Remessas Visualizar
 ================================ */

.volume-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.volume-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: rgba(0,0,0,0.03);
    padding: 1rem;
    border-radius: .75rem;
}

.volume-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: .5rem;
    font-size: 20px;
}

    .volume-icon.notas {
        background-color: rgba(59,130,246,0.15);
        color: #3b82f6;
    }

    .volume-icon.prestadores {
        background-color: rgba(249,115,22,0.15);
        color: #f97316;
    }

.volume-number {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.volume-label {
    font-size: .7rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
}


/* ==============================
    Botões de aprovar e excluir 
================================= */

.actions-visualizar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.btn-pago-visualizar {
    width: 100%;
    height: 48px;
    border-radius: .75rem !important;
    border: 1px solid #22c55e !important;
    background-color: rgba(34,197,94,0.1) !important;
    color: #16a34a !important;
    font-weight: 600;
    letter-spacing: .03em;
}

    .btn-pago-visualizar:hover {
        background-color: rgba(34,197,94,0.2) !important;
    }

.btn-cancelar-visualizar {
    width: 100%;
    height: 40px;
    background: transparent !important;
    color: #ef4444 !important;
    font-weight: 500;
    border: 1px solid #ef4444 !important;
    border-radius: .5rem !important;
    transition: all .2s ease;
}
    .btn-cancelar-visualizar:hover {
        background-color: rgba(239,68,68,0.1) !important;
    }

    .btn-cancelar-visualizar:active {
        background-color: rgba(239,68,68,0.2) !important;
    }

.btn-pago-visualizar,
.btn-cancelar-visualizar {
    box-shadow: none !important;
}
/* =========================
   RESPONSIVIDADE VISUALIZAR
========================= */
@media (max-width: 640px) {
    .grid-3-visualizar { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .content-visualizar { padding: 0 0.75rem; }
}

@media (max-width: 480px) {
    .grid-3-visualizar { grid-template-columns: 1fr; }
    .btn-pago-visualizar, .btn-cancelar-visualizar { width: 100%; justify-content: center; }
}