/* ==========================================================================
   NEGOCIAÇÃO DE DÉBITO — DESIGN SYSTEM
   Padrão visual reutilizável para Metronic 4.1 + Bootstrap 3
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. VARIÁVEIS (via custom properties para fácil manutenção)
   -------------------------------------------------------------------------- */
:root {
    --nd-spacing-xs: 4px;
    --nd-spacing-sm: 8px;
    --nd-spacing-md: 12px;
    --nd-spacing-lg: 16px;
    --nd-spacing-xl: 24px;
    --nd-spacing-2xl: 32px;

    --nd-btn-height: 34px;
    --nd-btn-padding: 8px 16px;
    --nd-btn-font-size: 13px;
    --nd-btn-border-radius: 4px;

    --nd-input-height: 34px;
    --nd-input-font-size: 13px;

    --nd-color-primary: #3598dc;
    --nd-color-success: #26C281;
    --nd-color-warning: #c49f47;
    --nd-color-danger: #e7505a;
    --nd-color-info: #659be0;
    --nd-color-muted: #999;
    --nd-color-border: #e5e5e5;
    --nd-color-bg-light: #f9fafb;
    --nd-color-bg-section: #fafbfc;

    --nd-radius-sm: 3px;
    --nd-radius-md: 4px;
    --nd-radius-lg: 6px;
}


/* --------------------------------------------------------------------------
   2. UTILITÁRIOS DE ESPAÇAMENTO
   Padrão: .nd-m-{dir}-{size} e .nd-p-{dir}-{size}
   dir: t(top), b(bottom), l(left), r(right), x(horizontal), y(vertical)
   -------------------------------------------------------------------------- */

/* Margins */
.nd-m-0  { margin: 0 !important; }
.nd-m-5  { margin: 5px !important; }
.nd-m-10 { margin: 10px !important; }
.nd-m-15 { margin: 15px !important; }
.nd-m-20 { margin: 20px !important; }

.nd-m-t-0  { margin-top: 0 !important; }
.nd-m-t-5  { margin-top: 5px !important; }
.nd-m-t-8  { margin-top: 8px !important; }
.nd-m-t-10 { margin-top: 10px !important; }
.nd-m-t-15 { margin-top: 15px !important; }
.nd-m-t-20 { margin-top: 20px !important; }
.nd-m-t-24 { margin-top: 24px !important; }

.nd-m-b-0  { margin-bottom: 0 !important; }
.nd-m-b-5  { margin-bottom: 5px !important; }
.nd-m-b-8  { margin-bottom: 8px !important; }
.nd-m-b-10 { margin-bottom: 10px !important; }
.nd-m-b-15 { margin-bottom: 15px !important; }
.nd-m-b-20 { margin-bottom: 20px !important; }
.nd-m-b-24 { margin-bottom: 24px !important; }

.nd-m-r-0  { margin-right: 0 !important; }
.nd-m-r-5  { margin-right: 5px !important; }
.nd-m-r-8  { margin-right: 8px !important; }
.nd-m-r-10 { margin-right: 10px !important; }
.nd-m-r-15 { margin-right: 15px !important; }

.nd-m-l-0  { margin-left: 0 !important; }
.nd-m-l-5  { margin-left: 5px !important; }
.nd-m-l-8  { margin-left: 8px !important; }
.nd-m-l-10 { margin-left: 10px !important; }

/* Paddings */
.nd-p-0  { padding: 0 !important; }
.nd-p-5  { padding: 5px !important; }
.nd-p-10 { padding: 10px !important; }
.nd-p-15 { padding: 15px !important; }
.nd-p-20 { padding: 20px !important; }

.nd-p-t-0  { padding-top: 0 !important; }
.nd-p-t-5  { padding-top: 5px !important; }
.nd-p-t-10 { padding-top: 10px !important; }
.nd-p-t-15 { padding-top: 15px !important; }
.nd-p-t-20 { padding-top: 20px !important; }

.nd-p-b-0  { padding-bottom: 0 !important; }
.nd-p-b-5  { padding-bottom: 5px !important; }
.nd-p-b-10 { padding-bottom: 10px !important; }
.nd-p-b-15 { padding-bottom: 15px !important; }
.nd-p-b-20 { padding-bottom: 20px !important; }

.nd-p-x-10 { padding-left: 10px !important; padding-right: 10px !important; }
.nd-p-x-15 { padding-left: 15px !important; padding-right: 15px !important; }
.nd-p-x-20 { padding-left: 20px !important; padding-right: 20px !important; }

.nd-p-y-10 { padding-top: 10px !important; padding-bottom: 10px !important; }
.nd-p-y-15 { padding-top: 15px !important; padding-bottom: 15px !important; }
.nd-p-y-20 { padding-top: 20px !important; padding-bottom: 20px !important; }


/* --------------------------------------------------------------------------
   3. BOTÕES — Padrão consistente
   -------------------------------------------------------------------------- */

.nd-btn-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.nd-btn-group-lg {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.nd-btn-group-sm {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Padronização de altura e padding dos botões dentro do módulo */
.nd-page .btn {
    min-height: var(--nd-btn-height);
    padding: var(--nd-btn-padding);
    font-size: var(--nd-btn-font-size);
    border-radius: var(--nd-btn-border-radius);
    line-height: 1.42857;
    white-space: nowrap;
    transition: all 0.15s ease-in-out;
}

.nd-page .btn-xs {
    min-height: 26px;
    padding: 4px 10px;
    font-size: 12px;
}

.nd-page .btn-sm {
    min-height: 30px;
    padding: 6px 12px;
    font-size: 12px;
}

.nd-page .btn-lg {
    min-height: 42px;
    padding: 10px 20px;
    font-size: 15px;
}

.nd-page .btn + .btn {
    margin-left: 8px;
}

.nd-page .btn i + span,
.nd-page .btn i:first-child {
    margin-right: 4px;
}

/* Hierarquia visual dos botões */
.nd-page .btn-primary-action {
    font-weight: 600;
    min-width: 140px;
}

.nd-page .btn.nd-btn-icon {
    min-width: 34px;
    padding: 6px 8px;
    text-align: center;
}

/* Botões em table actions: espaçamento lateral */
.nd-page td .btn + .btn {
    margin-left: 4px;
}

.nd-page td .nd-action-btns {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}


/* --------------------------------------------------------------------------
   4. FORMULÁRIOS — Inputs, labels, form-groups
   -------------------------------------------------------------------------- */

.nd-page .form-group {
    margin-bottom: var(--nd-spacing-lg);
}

.nd-page .form-group > label,
.nd-page .form-group > .control-label {
    margin-bottom: var(--nd-spacing-xs);
    font-weight: 600;
    font-size: 12.5px;
    color: #555;
}

.nd-page .form-control {
    height: var(--nd-input-height);
    font-size: var(--nd-input-font-size);
    border-radius: var(--nd-radius-sm);
    border-color: var(--nd-color-border);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.nd-page .form-control:focus {
    border-color: var(--nd-color-primary);
    box-shadow: 0 0 0 2px rgba(53, 152, 220, 0.12);
}

.nd-page .form-control[disabled],
.nd-page .form-control[readonly] {
    background-color: var(--nd-color-bg-light);
    cursor: default;
}

/* Form body com espaçamento interno */
.nd-form-body {
    padding: 20px;
}

.nd-form-body .row + .row {
    margin-top: var(--nd-spacing-md);
}

/* Form actions (footer de formulário) */
.nd-form-actions {
    padding: 15px 20px;
    background-color: var(--nd-color-bg-section);
    border-top: 1px solid var(--nd-color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.nd-form-actions.nd-right {
    justify-content: flex-end;
}

.nd-form-actions.nd-between {
    justify-content: space-between;
}


/* --------------------------------------------------------------------------
   5. PORTLETS / CARDS — Containers com respiro
   -------------------------------------------------------------------------- */

.nd-page .portlet {
    margin-bottom: var(--nd-spacing-xl);
    border-radius: var(--nd-radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.nd-page .portlet > .portlet-title {
    padding: 10px 15px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nd-page .portlet > .portlet-title > .caption {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.nd-page .portlet > .portlet-title > .caption > i {
    margin-right: 6px;
}

.nd-page .portlet > .portlet-body {
    padding: 20px;
}

.nd-page .portlet > .portlet-body.nd-compact {
    padding: 15px;
}

.nd-page .portlet > .portlet-body.nd-flush {
    padding: 0;
}


/* --------------------------------------------------------------------------
   6. TABELAS — Espaçamento interno e legibilidade
   -------------------------------------------------------------------------- */

.nd-page .table {
    margin-bottom: 0;
}

.nd-page .table > thead > tr > th {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #555;
    background-color: var(--nd-color-bg-section);
    border-bottom: 2px solid #ddd;
    white-space: nowrap;
}

.nd-page .table > tbody > tr > td {
    padding: 8px 12px;
    vertical-align: middle;
    font-size: 13px;
    line-height: 1.5;
}

.nd-page .table > tfoot > tr > td {
    padding: 10px 12px;
    font-weight: 700;
    background-color: var(--nd-color-bg-section);
    border-top: 2px solid #ddd;
}

.nd-page .table-hover > tbody > tr:hover {
    background-color: #f0f6ff;
}

.nd-page .table .nd-col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

.nd-page .table .nd-col-currency {
    text-align: right;
    font-family: 'Segoe UI', Tahoma, monospace;
    white-space: nowrap;
}

.nd-page .table .nd-col-center {
    text-align: center;
}

.nd-page .table .nd-col-date {
    white-space: nowrap;
    width: 110px;
}

.nd-page .table .nd-col-number {
    text-align: right;
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   7. MODAIS — Respiro e z-index correto
   -------------------------------------------------------------------------- */

.nd-page .modal .modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--nd-color-border);
}

.nd-page .modal .modal-header .modal-title {
    font-size: 16px;
    font-weight: 600;
}

.nd-page .modal .modal-header .modal-title > i {
    margin-right: 6px;
    color: var(--nd-color-info);
}

.nd-page .modal .modal-body {
    padding: 20px;
}

.nd-page .modal .modal-footer {
    padding: 15px 20px;
    background-color: var(--nd-color-bg-section);
    border-top: 1px solid var(--nd-color-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.nd-page .modal .modal-footer .btn + .btn {
    margin-left: 0;
}


/* --------------------------------------------------------------------------
   8. ALERTAS / AVISOS — Padding adequado
   -------------------------------------------------------------------------- */

.nd-page .alert {
    padding: 12px 16px;
    margin-bottom: var(--nd-spacing-lg);
    border-radius: var(--nd-radius-md);
    font-size: 13px;
    line-height: 1.5;
}

.nd-page .alert > i:first-child {
    margin-right: 6px;
}

.nd-page .alert strong {
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   9. SEÇÕES / SEPARADORES
   -------------------------------------------------------------------------- */

.nd-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin: 0 0 var(--nd-spacing-md) 0;
    padding-bottom: var(--nd-spacing-sm);
    border-bottom: 2px solid var(--nd-color-border);
}

.nd-section-title > i {
    margin-right: 6px;
    color: var(--nd-color-info);
}

.nd-divider {
    border: none;
    border-top: 1px solid var(--nd-color-border);
    margin: var(--nd-spacing-lg) 0;
}

.nd-divider-lg {
    margin: var(--nd-spacing-xl) 0;
}


/* --------------------------------------------------------------------------
   10. STATS / KPIs — Cards de resumo
   -------------------------------------------------------------------------- */

.nd-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nd-spacing-lg);
    margin-bottom: var(--nd-spacing-lg);
}

.nd-stat-card {
    flex: 1;
    min-width: 140px;
    text-align: center;
    padding: var(--nd-spacing-lg);
    background-color: var(--nd-color-bg-section);
    border-radius: var(--nd-radius-md);
    border: 1px solid var(--nd-color-border);
}

.nd-stat-card .nd-stat-value {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 2px;
}

.nd-stat-card .nd-stat-label {
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--nd-color-muted);
}

.nd-stat-card.nd-primary .nd-stat-value { color: var(--nd-color-primary); }
.nd-stat-card.nd-success .nd-stat-value { color: var(--nd-color-success); }
.nd-stat-card.nd-warning .nd-stat-value { color: var(--nd-color-warning); }
.nd-stat-card.nd-danger  .nd-stat-value { color: var(--nd-color-danger); }


/* --------------------------------------------------------------------------
   11. BADGES / LABELS — Melhor legibilidade
   -------------------------------------------------------------------------- */

.nd-page .label {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 3px;
    letter-spacing: 0.2px;
}

.nd-page .badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 10px;
}


/* --------------------------------------------------------------------------
   12. LAYOUT HELPERS
   -------------------------------------------------------------------------- */

.nd-page {
    /* Wrapper que garante respiro global da página */
}

.nd-flex {
    display: flex;
    align-items: center;
}

.nd-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nd-flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.nd-flex-wrap {
    flex-wrap: wrap;
}

.nd-gap-4  { gap: 4px; }
.nd-gap-8  { gap: 8px; }
.nd-gap-10 { gap: 10px; }
.nd-gap-12 { gap: 12px; }
.nd-gap-16 { gap: 16px; }

.nd-text-right { text-align: right !important; }
.nd-text-center { text-align: center !important; }
.nd-text-muted { color: var(--nd-color-muted) !important; }
.nd-text-bold { font-weight: 700 !important; }
.nd-text-sm { font-size: 12px !important; }
.nd-text-xs { font-size: 11px !important; }

.nd-hidden { display: none !important; }
.nd-visible { display: block !important; }

/* Row com gap vertical entre colunas */
.nd-row-gap > [class*="col-"] {
    margin-bottom: var(--nd-spacing-md);
}

.nd-row-gap-lg > [class*="col-"] {
    margin-bottom: var(--nd-spacing-lg);
}


/* --------------------------------------------------------------------------
   13. DATATABLES — Integração com plugin (paginação, busca, info)
   -------------------------------------------------------------------------- */

.nd-page .dataTables_wrapper {
    padding: 0;
}

.nd-page .dataTables_wrapper .dataTables_filter {
    margin-bottom: var(--nd-spacing-md);
    padding-right: 4px;
}

.nd-page .dataTables_wrapper .dataTables_filter input {
    height: var(--nd-input-height);
    font-size: var(--nd-input-font-size);
    border-radius: var(--nd-radius-sm);
    border: 1px solid var(--nd-color-border);
    padding: 6px 12px;
    margin-left: 8px;
    transition: border-color 0.15s ease-in-out;
}

.nd-page .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--nd-color-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(53, 152, 220, 0.12);
}

.nd-page .dataTables_wrapper .dataTables_length {
    margin-bottom: var(--nd-spacing-md);
}

.nd-page .dataTables_wrapper .dataTables_length select {
    height: var(--nd-input-height);
    padding: 4px 8px;
    border-radius: var(--nd-radius-sm);
    border: 1px solid var(--nd-color-border);
    margin: 0 6px;
}

.nd-page .dataTables_wrapper .dataTables_info {
    padding-top: var(--nd-spacing-md);
    font-size: 12px;
    color: var(--nd-color-muted);
}

.nd-page .dataTables_wrapper .dataTables_paginate {
    padding-top: var(--nd-spacing-md);
    margin-top: var(--nd-spacing-sm);
}

.nd-page .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 12px !important;
    margin-left: 4px !important;
    border-radius: var(--nd-radius-sm) !important;
    font-size: 12px !important;
    min-height: 30px;
}

.nd-page .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    font-weight: 700;
}

.nd-page .dataTables_wrapper .row:last-child {
    margin-top: var(--nd-spacing-md);
    padding-top: var(--nd-spacing-md);
    border-top: 1px solid #f0f0f0;
}


/* --------------------------------------------------------------------------
   14. MODAIS COM TABELA — Respiro entre conteúdo, paginação e footer
   -------------------------------------------------------------------------- */

.nd-page .modal .modal-body .table-responsive {
    margin-bottom: var(--nd-spacing-lg);
}

.nd-page .modal .modal-body .dataTables_wrapper {
    padding: 0;
}

.nd-page .modal .modal-body .dataTables_filter {
    margin-bottom: var(--nd-spacing-md);
}

.nd-page .modal .modal-body .dataTables_paginate {
    margin-top: var(--nd-spacing-md);
    margin-bottom: var(--nd-spacing-sm);
}

.nd-page .modal .modal-body > .nd-form-body:first-child {
    padding: 0;
}

.nd-page .modal .modal-content {
    border-radius: var(--nd-radius-lg);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
}


/* --------------------------------------------------------------------------
   15. ÁREA DE AÇÕES FINAIS — Container separado para botões de ação
   -------------------------------------------------------------------------- */

.nd-actions-container {
    padding: 20px;
    margin-top: var(--nd-spacing-xl);
    background-color: var(--nd-color-bg-section);
    border: 1px solid var(--nd-color-border);
    border-radius: var(--nd-radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--nd-spacing-lg);
}

.nd-actions-container .nd-actions-info {
    flex: 1;
    min-width: 280px;
}

.nd-actions-container .nd-actions-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.nd-actions-container .nd-actions-buttons .btn {
    min-width: 160px;
}


/* --------------------------------------------------------------------------
   16. PAGE TITLE — Respiro do título
   -------------------------------------------------------------------------- */

.nd-page .page-title {
    margin-bottom: var(--nd-spacing-lg);
}

.nd-page .page-bar {
    margin-bottom: var(--nd-spacing-xl);
}


/* --------------------------------------------------------------------------
   17. FLEX-1 helper
   -------------------------------------------------------------------------- */

.nd-flex-1 {
    flex: 1;
    min-width: 0;
}


/* --------------------------------------------------------------------------
   18. RESPONSIVIDADE — Ajustes mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .nd-page .portlet > .portlet-body {
        padding: 15px;
    }

    .nd-form-body {
        padding: 15px;
    }

    .nd-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .nd-stat-row {
        flex-direction: column;
    }

    .nd-btn-group,
    .nd-btn-group-lg {
        flex-direction: column;
        width: 100%;
    }

    .nd-btn-group .btn,
    .nd-btn-group-lg .btn {
        width: 100%;
    }

    .nd-actions-container {
        flex-direction: column;
        align-items: stretch;
    }

    .nd-actions-container .nd-actions-buttons {
        flex-direction: column;
    }

    .nd-actions-container .nd-actions-buttons .btn {
        width: 100%;
    }

    .nd-page .modal .modal-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .nd-page .modal .modal-footer .btn {
        width: 100%;
    }

    .nd-nav-tabs > li > a {
        font-size: 12px !important;
        padding: 10px 12px !important;
    }

    .nd-tab-content {
        padding: 15px 10px !important;
    }
}


/* ==========================================================================
   TABS / ABAS — Metronic 4.1 Compatible
   ========================================================================== */

.nd-nav-tabs {
    border-bottom: 2px solid var(--nd-border-color, #e7ecf1);
    margin: 0;
    padding: 0 15px;
    background: #f9fafb;
}

.nd-nav-tabs > li {
    margin-bottom: -2px;
}

.nd-nav-tabs > li > a {
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: #7b8a9e;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 20px;
    transition: all 0.2s ease;
}

.nd-nav-tabs > li > a:hover,
.nd-nav-tabs > li > a:focus {
    background: transparent;
    border-bottom-color: #c8d1dc;
    color: #555;
}

.nd-nav-tabs > li.active > a,
.nd-nav-tabs > li.active > a:hover,
.nd-nav-tabs > li.active > a:focus {
    background: transparent;
    border: none;
    border-bottom: 3px solid #3598dc;
    color: #3598dc;
}

.nd-nav-tabs > li > a > .badge {
    background: #e0e5ec;
    color: #5c6b7a;
    font-size: 11px;
    margin-left: 6px;
    padding: 3px 7px;
    border-radius: 10px;
    font-weight: 600;
    vertical-align: middle;
}

.nd-nav-tabs > li.active > a > .badge {
    background: #3598dc;
    color: #fff;
}

.nd-nav-tabs > li > a > i {
    margin-right: 5px;
}

.nd-tab-content {
    padding: 20px;
}

.nd-p-0 { padding: 0 !important; }
.nd-p-x-5 { padding-left: 5px !important; padding-right: 5px !important; }
.nd-p-x-20 { padding-left: 20px !important; padding-right: 20px !important; }
.nd-p-b-15 { padding-bottom: 15px !important; }
.nd-p-t-0 { padding-top: 0 !important; }
.nd-m-x-20 { margin-left: 20px !important; margin-right: 20px !important; }
.nd-m-b-20 { margin-bottom: 20px !important; }

.nd-badge-tab {
    background: rgba(255,255,255,0.25);
    border-radius: 3px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
    padding: 2px 8px;
}

.nd-badge-sm {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 8px;
}

.nd-tfoot-totals td {
    background: #f5f7fa !important;
    border-top: 2px solid #ddd !important;
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   19. VARIANTES COMPACTAS — Barras e containers mais enxutos
   Usados na tela de inclusão de negociação para reduzir espaço vertical.
   Aplicar via classe no elemento desejado sem efeito colateral global.
   -------------------------------------------------------------------------- */

.nd-page .portlet > .portlet-title.nd-title-sm {
    padding: 5px 15px;
    min-height: 34px;
}

.nd-page .portlet > .portlet-title.nd-title-sm > .caption {
    font-size: 13px;
}

.nd-page .portlet > .portlet-title.nd-title-sm > .tools .btn {
    margin-top: 0;
    margin-bottom: 0;
}

.nd-page .portlet > .portlet-body.nd-body-sm {
    padding: 10px 15px;
}

.nd-page .portlet > .portlet-body.nd-body-sm .nd-form-body {
    padding: 0;
}


/* --------------------------------------------------------------------------
   20. STICKY HEADER — Barra fixa de stats + acoes no topo (tela Incluir)
   -------------------------------------------------------------------------- */

.nd-sticky-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
    border: 1px solid var(--nd-color-border);
    border-radius: var(--nd-radius-md);
    padding: 12px 15px;
    margin-bottom: var(--nd-spacing-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nd-spacing-md);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.nd-sticky-header .nd-sticky-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nd-spacing-sm);
    flex: 1;
    min-width: 280px;
}

.nd-sticky-header .nd-sticky-stats .nd-stat-card {
    flex: 0 1 140px;
    min-width: 110px;
    padding: 8px 12px;
}

.nd-sticky-header .nd-sticky-stats .nd-stat-card .nd-stat-value,
.nd-sticky-header .nd-sticky-stats .nd-stat-card .nd-stat-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.nd-sticky-header .nd-sticky-stats .nd-stat-card .nd-stat-value {
    margin-bottom: 2px;
}

.nd-sticky-header .nd-sticky-stats .nd-stat-card .nd-stat-label {
    text-transform: none;
    letter-spacing: normal;
    color: var(--nd-color-muted);
}

.nd-sticky-header .nd-sticky-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* --------------------------------------------------------------------------
   21. RESPONSAVEL BAR — Bloco compacto com avatar + dropdown
   -------------------------------------------------------------------------- */

.nd-responsavel-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nd-spacing-md);
    padding: 10px 15px;
    background: var(--nd-color-bg-section);
    border: 1px solid var(--nd-color-border);
    border-radius: var(--nd-radius-md);
    margin-bottom: var(--nd-spacing-lg);
}

.nd-responsavel-bar .nd-responsavel-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.nd-responsavel-bar .nd-responsavel-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--nd-color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   22. FILTRO CHIPS — Chips de categoria para o grid unificado
   -------------------------------------------------------------------------- */

.nd-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0;
}

.nd-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #fff;
    border: 1px solid var(--nd-color-border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    user-select: none;
}

.nd-chip:hover {
    background: var(--nd-color-bg-light);
    border-color: var(--nd-color-primary);
}

.nd-chip.active {
    background: var(--nd-color-primary);
    border-color: var(--nd-color-primary);
    color: #fff;
}

.nd-chip.nd-chip-danger.active {
    background: var(--nd-color-danger);
    border-color: var(--nd-color-danger);
}

.nd-chip .nd-chip-counter {
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
}

.nd-chip.active .nd-chip-counter {
    background: rgba(255, 255, 255, 0.25);
}

.nd-page .table tr.nd-row-blocked {
    background: #fdf2f2 !important;
    color: #999;
}

.nd-page .table tr.nd-row-blocked > td {
    border-color: #f5d5d5;
}


/* --------------------------------------------------------------------------
   23. HERO FINANCEIRO — Card de destaque do valor principal
   -------------------------------------------------------------------------- */

.nd-hero-card {
    background: linear-gradient(135deg, #3598dc 0%, #2e86c1 100%);
    color: #fff;
    border-radius: var(--nd-radius-lg);
    padding: 24px 28px;
    box-shadow: 0 2px 10px rgba(53, 152, 220, 0.20);
}

.nd-hero-card.nd-hero-refis {
    background: linear-gradient(135deg, #36c6d3 0%, #2bb4c2 100%);
}

.nd-hero-card.nd-hero-success {
    background: linear-gradient(135deg, #26C281 0%, #1ea66c 100%);
}

.nd-hero-card.nd-hero-warning {
    background: linear-gradient(135deg, #f1c40f 0%, #d4ac0d 100%);
    color: #333;
}

.nd-hero-card .nd-hero-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.85;
    margin-bottom: 6px;
}

.nd-hero-card .nd-hero-value {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.nd-hero-card .nd-hero-sub {
    font-size: 14px;
    margin-top: 8px;
    opacity: 0.95;
}

.nd-hero-card .nd-hero-sub strong {
    color: #fff;
    font-weight: 700;
}

.nd-hero-card.nd-hero-warning .nd-hero-sub strong {
    color: #333;
}


/* --------------------------------------------------------------------------
   24. WIZARD PILLS — Passos numerados (nav-pills custom)
   -------------------------------------------------------------------------- */

.nd-wizard-pills {
    border-bottom: 1px solid var(--nd-color-border);
    margin: 0;
    padding: 0;
    background: var(--nd-color-bg-section);
}

.nd-wizard-pills > li > a {
    background: transparent !important;
    color: #888 !important;
    font-size: 13px;
    font-weight: 600;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    padding: 12px 16px;
}

.nd-wizard-pills > li.active > a,
.nd-wizard-pills > li.active > a:hover,
.nd-wizard-pills > li.active > a:focus {
    background: transparent !important;
    color: var(--nd-color-primary) !important;
    border-bottom-color: var(--nd-color-primary) !important;
}

.nd-wizard-pills > li.disabled > a {
    color: #ccc !important;
    cursor: not-allowed;
}

.nd-wizard-pills .nd-wizard-step {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    background: #e0e5ec;
    color: #5c6b7a;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    margin-right: 8px;
    vertical-align: middle;
}

.nd-wizard-pills > li.active > a > .nd-wizard-step {
    background: var(--nd-color-primary);
    color: #fff;
}


/* --------------------------------------------------------------------------
   25. SHEET BAR — Barra fixa inferior (Confirmar simulação)
   -------------------------------------------------------------------------- */

.nd-sheet-bar {
    position: sticky;
    bottom: 0;
    z-index: 40;
    background: #fff;
    border-top: 1px solid var(--nd-color-border);
    padding: 12px 20px;
    margin: var(--nd-spacing-lg) -20px 0 -20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nd-spacing-md);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
}

.nd-sheet-bar .nd-sheet-info {
    flex: 1;
    min-width: 200px;
}


/* --------------------------------------------------------------------------
   26. ACOES GRUPO — Botoes agrupados por intencao (Detalhes)
   -------------------------------------------------------------------------- */

.nd-acoes-grupos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nd-spacing-lg);
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: var(--nd-color-bg-section);
    border: 1px solid var(--nd-color-border);
    border-radius: var(--nd-radius-md);
}

.nd-acoes-grupo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}

.nd-acoes-grupo .nd-acoes-grupo-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--nd-color-muted);
    margin-bottom: 2px;
}

.nd-acoes-grupo .nd-acoes-grupo-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nd-acoes-grupo.nd-acoes-grupo-encerrar .nd-acoes-grupo-label {
    color: var(--nd-color-danger);
}