/* =============================================================
 * app.css — tema único NSWEB Extranet (Bootstrap 5 + compat)
 *
 * Carregado após Bootstrap, FontAwesome e jQuery UI.
 * Substitui totalmente os antigos forms.css, geral.css,
 * skin.css e typography.css (aposentados).
 *
 * Paleta oficial: azul ciano + preto da logo NSWEB.
 * ============================================================= */

/* =============================================================
 * 1. PALETA + RESET DE VARS DO BOOTSTRAP
 * ============================================================= */
:root {
    --ns-cyan:       #1BACE0;
    --ns-cyan-50:    #F0FAFE;
    --ns-cyan-100:   #D4F0FA;
    --ns-cyan-200:   #A8E1F5;
    --ns-cyan-400:   #4EBEE6;
    --ns-cyan-500:   #1BACE0;
    --ns-cyan-600:   #1792BF;
    --ns-cyan-700:   #127BA2;
    --ns-cyan-800:   #0D6484;

    --ns-dark:       #1A1A1A;
    --ns-dark-2:     #2A2A2A;
    --ns-dark-soft:  #3A3A3A;

    --ns-surface:    #ffffff;
    --ns-bg:         #f5f7fa;
    --ns-border:     #e3e7ed;
    --ns-muted:      #6c757d;
    --ns-text:       #212529;

    --ns-shadow-sm:  0 1px 2px rgba(20, 30, 50, 0.05);
    --ns-shadow:     0 2px 8px rgba(20, 30, 50, 0.08);
    --ns-shadow-lg:  0 8px 24px rgba(20, 30, 50, 0.10);

    --ns-radius:     0.5rem;
    --ns-radius-sm:  0.375rem;
    --ns-radius-lg:  0.75rem;

    /* Overrides Bootstrap */
    --bs-primary:           var(--ns-cyan);
    --bs-primary-rgb:       27, 172, 224;
    --bs-primary-bg-subtle: var(--ns-cyan-50);
    --bs-link-color:        var(--ns-cyan-600);
    --bs-link-hover-color:  var(--ns-cyan-700);
    --bs-link-color-rgb:    23, 146, 191;
    --bs-dark:              var(--ns-dark);
    --bs-dark-rgb:          26, 26, 26;
    --bs-border-color:      var(--ns-border);
    --bs-body-bg:           var(--ns-bg);
    /* --bs-body-color e --bs-body-font-family: usar defaults do Bootstrap 5 */
}

/* =============================================================
 * 2. BOOTSTRAP COLOR OVERRIDES
 * ============================================================= */
.btn-primary {
    --bs-btn-bg:                    var(--ns-cyan);
    --bs-btn-border-color:          var(--ns-cyan);
    --bs-btn-hover-bg:              var(--ns-cyan-600);
    --bs-btn-hover-border-color:    var(--ns-cyan-600);
    --bs-btn-active-bg:             var(--ns-cyan-700);
    --bs-btn-active-border-color:   var(--ns-cyan-700);
    --bs-btn-disabled-bg:           var(--ns-cyan);
    --bs-btn-disabled-border-color: var(--ns-cyan);
}
.btn-outline-primary {
    --bs-btn-color:                  var(--ns-cyan-600);
    --bs-btn-border-color:           var(--ns-cyan);
    --bs-btn-hover-color:            #fff;
    --bs-btn-hover-bg:               var(--ns-cyan);
    --bs-btn-hover-border-color:     var(--ns-cyan);
    --bs-btn-active-bg:              var(--ns-cyan-600);
    --bs-btn-active-border-color:    var(--ns-cyan-600);
}
.bg-primary        { background-color: var(--ns-cyan) !important; }
.text-primary      { color: var(--ns-cyan-600) !important; }
.border-primary    { border-color: var(--ns-cyan) !important; }
.bg-primary-subtle { background-color: var(--ns-cyan-50) !important; }
.bg-dark           { background-color: var(--ns-dark) !important; }
a                  { color: var(--ns-cyan-600); text-decoration: none; }
a:hover            { color: var(--ns-cyan-700); text-decoration: underline; }

/* =============================================================
 * 3. BODY — Bootstrap 5 gerencia a tipografia (reboot + defaults).
 *    Só ajustamos o necessário: fundo e font-smoothing.
 * ============================================================= */
body {
    background: var(--ns-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { color: var(--ns-dark); }
a img { border: 0; vertical-align: middle; }

/* =============================================================
 * 4. NAVBAR NSWEB
 * ============================================================= */
.navbar.bg-dark {
    background: linear-gradient(180deg, #1A1A1A 0%, #111 100%) !important;
    border-bottom: 3px solid var(--ns-cyan);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
.navbar-brand img { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.navbar-dark .navbar-nav .nav-link {
    color: #dfe3ea;
    font-weight: 500;
    padding: 0.5rem 0.85rem;
    border-radius: var(--ns-radius-sm);
    transition: background-color .15s, color .15s;
}
.navbar-dark .navbar-nav .nav-link:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show > .nav-link {
    color: var(--ns-cyan) !important;
    background: rgba(27, 172, 224, 0.08);
}
.navbar .dropdown-menu-dark {
    background: #222;
    border: 1px solid #333;
    border-radius: var(--ns-radius);
    box-shadow: var(--ns-shadow-lg);
    padding: 0.5rem;
    min-width: 220px;
}
.navbar .dropdown-menu-dark .dropdown-item {
    border-radius: var(--ns-radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}
.navbar .dropdown-menu-dark .dropdown-item:hover,
.navbar .dropdown-menu-dark .dropdown-item:focus {
    background: var(--ns-cyan);
    color: #fff;
}

.offcanvas.text-bg-dark {
    background: #1A1A1A;
    border-right: 3px solid var(--ns-cyan);
    box-shadow: var(--ns-shadow-lg);
    max-width: 85vw;
}
.offcanvas .nav-link { font-size: 0.95rem; }

/* =============================================================
 * 5. CARDS / SURFACES
 * ============================================================= */
main.container-fluid {
    padding-top: 1.25rem;
    padding-bottom: 2rem;
}
.card {
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    box-shadow: var(--ns-shadow-sm);
    background: var(--ns-surface);
}
.card-header {
    background: var(--ns-surface);
    border-bottom: 1px solid var(--ns-border);
    font-weight: 600;
    padding: 0.875rem 1rem;
}
.surface {
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    box-shadow: var(--ns-shadow-sm);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

/* =============================================================
 * 6. FORMULÁRIOS (Bootstrap 5 + compat com Zend decorators)
 * ============================================================= */
/* input type=image NUNCA deve virar form-control (esticava pra 100% da viewport) */
input[type="image"] {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    vertical-align: middle;
}
/* Hidden inputs ficam inline como filhos de <dl> em forms Zend — nunca devem ocupar
 * espaço em grid/flex, nunca virar form-control */
input[type="hidden"],
.inputHidden,
input.inputHidden {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Foco cyan em todos inputs */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--ns-cyan);
    box-shadow: 0 0 0 .2rem rgba(27, 172, 224, .2);
}
.form-check-input:checked {
    background-color: var(--ns-cyan);
    border-color: var(--ns-cyan);
}
.form-control, .form-select {
    border-radius: var(--ns-radius-sm);
    border-color: var(--ns-border);
}
.form-label, label { font-weight: 500; color: var(--ns-text); }

/* Compat com forms gerados por Zend_Form (dl/dt/dd) */
form dl,
.zend_form {
    margin: 0;
    padding: 0;
    display: block;
}
form dl dt,
.zend_form dt {
    display: block;
    font-weight: 500;
    color: var(--ns-text);
    margin: 0 0 0.25rem 0;
    font-size: 0.9rem;
}
form dl dd,
.zend_form dd {
    margin: 0 0 0.75rem 0;
    padding: 0;
    display: block;
}
.zend_form dd.element {
    display: block;
    margin: 0 0 0.85rem 0;
    max-width: 100%;
}
.zend_form dd.element label {
    display: block;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    color: var(--ns-text);
}
/* Campos sem classes BS5 (fallback para forms que não passam por setDefaultRSDecorators) */
.zend_form dd.element input[type=text],
.zend_form dd.element input[type=password],
.zend_form dd.element input[type=email],
.zend_form dd.element input[type=number],
.zend_form dd.element input[type=date],
.zend_form dd.element textarea,
.zend_form dd.element select,
form dl dd input[type=text]:not(.form-control):not(.form-check-input),
form dl dd input[type=password]:not(.form-control),
form dl dd input[type=email]:not(.form-control),
form dl dd textarea:not(.form-control),
form dl dd select:not(.form-select):not(.form-check-input) {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ns-text);
    background-color: #fff;
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius-sm);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.zend_form dd.element input[type=text]:focus,
.zend_form dd.element input[type=password]:focus,
.zend_form dd.element select:focus,
.zend_form dd.element textarea:focus,
form dl dd input[type=text]:focus,
form dl dd select:focus,
form dl dd textarea:focus {
    border-color: var(--ns-cyan);
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(27, 172, 224, .2);
}
/* Classes legadas .size1–5 viram max-width responsivo (largura natural = 100%).
 * Em mobile, anulam para 100% total (ignora style inline também). */
.zend_form input.size1,
.zend_form select.size1,
.zend_form textarea.size1,
.zend_form input.size2,
.zend_form select.size2,
.zend_form textarea.size2,
.zend_form input.size3,
.zend_form select.size3,
.zend_form textarea.size3,
.zend_form input.size4,
.zend_form select.size4,
.zend_form textarea.size4,
.zend_form input.size5,
.zend_form select.size5,
.zend_form textarea.size5,
.zend_form input.data,
.zend_form input.telefone,
.zend_form input.ddd {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
/* Desktop: cada classe recebe um max-width confortável */
.zend_form input.size1, .zend_form select.size1, .zend_form textarea.size1 { max-width: 100%; }
.zend_form input.size2, .zend_form select.size2, .zend_form textarea.size2 { max-width: 360px; }
.zend_form input.size3, .zend_form select.size3, .zend_form textarea.size3 { max-width: 260px; }
.zend_form input.size4, .zend_form select.size4, .zend_form textarea.size4 { max-width: 160px; }
.zend_form input.size5, .zend_form select.size5, .zend_form textarea.size5 { max-width: 90px; }
.zend_form input.data     { max-width: 150px; }
.zend_form input.telefone { max-width: 180px; }
.zend_form input.ddd      { max-width: 70px; }

/* Style inline legado (style="width: Xpx"): anulamos em forms de cadastro/edição
 * em qualquer viewport. O tamanho do campo vem do flex do <dd> pai (flex: 1 1 180px etc).
 * Filtros ainda podem ter widths inline pontuais — preservados. */
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) input[style*="width"]:not([type=checkbox]):not([type=radio]):not([type=image]),
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) select[style*="width"],
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) textarea[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
}

/* Mobile: mesmo os filtros e demais forms passam a ser full-width */
@media (max-width: 767.98px) {
    main form input[style*="width"]:not([type=checkbox]):not([type=radio]):not([type=image]),
    main form select[style*="width"],
    main form textarea[style*="width"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    .zend_form .size1,
    .zend_form .size2,
    .zend_form .size3,
    .zend_form .size4,
    .zend_form .size5,
    .zend_form input.data,
    .zend_form input.telefone {
        max-width: 100% !important;
        width: 100% !important;
    }
    /* DDD mantém compacto (2 dígitos) mesmo em mobile */
    .zend_form input.ddd { max-width: 70px !important; }
}
.zend_form dd.element input.inputDisabled { background: #f1f3f5; color: #6c757d; }
.zend_form dd.element p.hint,
.zend_form dd.element .description {
    font-size: 0.8rem;
    color: var(--ns-muted);
    margin-top: 0.25rem;
}
.zend_form dd.element br { display: none; }

/* Forms de cadastro/edição (não filtros, não login, não datepicker): ganham card wrapper */
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter):not(#form-login):not(#formlogin):has(> dl.zend_form),
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter):not(#form-login):not(#formlogin):has(> fieldset > dl.zend_form) {
    display: block;
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    box-shadow: var(--ns-shadow-sm);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 575.98px) {
    main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):has(> dl.zend_form),
    main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):has(> fieldset > dl.zend_form) {
        padding: 1rem;
    }
}

/* Display groups em forms de cadastro: fieldset interno limpo, campos em flex row com wrap */
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) {
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
}
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > legend {
    display: block;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ns-muted);
    font-weight: 600;
    margin: 0.75rem 0 0.5rem 0;
    padding: 0;
    border-bottom: 1px solid var(--ns-border);
    padding-bottom: 0.3rem;
    width: 100%;
}
/* DL interno do display group: flex wrap para múltiplos campos inline */
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
    margin: 0;
    padding: 0;
}
/* DDs: cada campo cresce naturalmente, mínimo 180px */
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd {
    flex: 1 1 180px;
    min-width: 0;
    margin: 0 0 0.85rem 0;
    display: block;
    padding: 0;
}
/* DDs especiais que devem ocupar linha inteira (razao, email, observacao, nfe_descricao, etc.) */
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.nome,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.razao_social,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.email,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.email_alt,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.observacao,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.descricao,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.nfe_descricao,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.titulo,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.endereco,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.dominio {
    flex: 1 1 100%;
}
/* DDs compactos (UF, DDD, IE, número): pequenos */
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.uf,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.fone1_ddd,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.fone1_ramal,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.fone2_ddd,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.fone2_ramal,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.fax_ddd,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.numero,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.ie,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.dia_vencimento,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.data_nascimento,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.data_pagamento,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.valor,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.desconto,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.valor_representante,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd.cep {
    flex: 0 1 140px;
}
/* Labels uppercase pequenos em form de cadastro (consistência com filtros) */
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) > dl.zend_form > dd > fieldset:not(.botoes) > dl > dd > label {
    display: block;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.035em;
    color: var(--ns-muted);
    font-weight: 600;
    margin: 0 0 0.2rem 0;
    padding: 0;
}

/* Checkboxes em form de cadastro (dentro ou fora de fieldset): alinhamento correto —
 * checkbox à esquerda, label em texto normal, description abaixo do par */
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) dd.checkbox,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) dd.form-check {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    flex: 1 1 100% !important;
    margin: 0.35rem 0 0.6rem 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) dd.checkbox > input[type=checkbox],
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) dd.form-check > input[type=checkbox] {
    order: 0 !important;
    margin: 0 !important;
    flex-shrink: 0;
}
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) dd.checkbox > label,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) dd.form-check > label {
    order: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: var(--ns-text) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    display: inline !important;
}
/* Description (p.hint ou div.form-text) abaixo, ocupando linha inteira, indent do checkbox */
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) dd.checkbox > p.hint,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) dd.form-check > p.hint,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) dd.checkbox > .form-text,
main form:not(.form-filter):not(.form-filtro):not(.form-filter-avancado):not(.date-filter) dd.form-check > .form-text {
    order: 2 !important;
    flex: 1 1 100%;
    margin: 0.15rem 0 0 1.55rem !important;
    padding: 0 !important;
    font-size: 0.82rem !important;
    color: var(--ns-muted) !important;
    line-height: 1.35;
}

/* Fieldsets */
fieldset {
    border: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}
fieldset legend {
    font-weight: 600;
    font-size: 1rem;
    color: var(--ns-dark);
    padding: 0;
    margin: 0 0 0.75rem 0;
    border-bottom: 2px solid var(--ns-cyan);
    padding-bottom: 0.375rem;
    width: auto;
}
fieldset.botoes {
    border: none;
    border-top: 1px solid var(--ns-border);
    padding-top: 1rem;
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
fieldset.botoes dt { display: none; }
fieldset.botoes dd { margin: 0 !important; display: inline-block; }
fieldset.botoes dd.element { float: none !important; }
/* O DL interno do fieldset.botoes herdava estilos dl.zend_form e ficava block —
 * força inline row para os botões ficarem lado a lado em QUALQUER form Zend */
fieldset.botoes > dl,
form fieldset.botoes > dl {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
}
fieldset.botoes > dl > dt { display: none !important; }
fieldset.botoes > dl > dd {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    float: none !important;
}

/* Checkbox / radio compat */
.zend_form dd.checkbox,
.zend_form dd.radio,
.zend_form dd.multicheckbox,
.zend_form dd.multiradio {
    margin: 0 0 0.75rem 0;
}
.zend_form dd.checkbox label,
.zend_form dd.radio label {
    display: inline-block;
    margin-right: 0.75rem;
    font-weight: normal;
    cursor: pointer;
}
.zend_form dd.checkbox label.checkbox-label,
.zend_form dd.checkbox label.form-check-label,
.zend_form dd.radio label.radio-label,
.zend_form dd.radio label.form-check-label {
    font-weight: 500;
    display: block;
    margin-bottom: 0.25rem;
}
.zend_form dd.multicheckbox,
.zend_form dd.multiradio {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    align-items: center;
}
.zend_form dd.multicheckbox label,
.zend_form dd.multiradio label {
    display: inline-flex !important;
    align-items: center;
    gap: 0.25rem;
    margin: 0 !important;
    font-weight: normal;
    cursor: pointer;
    white-space: nowrap;
}
.zend_form dd.multicheckbox label.checkbox-label,
.zend_form dd.multicheckbox label.form-check-label,
.zend_form dd.multiradio label.radio-label,
.zend_form dd.multiradio label.form-check-label {
    display: block !important;
    width: 100%;
    margin-bottom: 0.25rem !important;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ns-muted);
    font-weight: 600;
}
.zend_form dd input[type=checkbox],
.zend_form dd input[type=radio] {
    margin-right: 0.35rem;
    vertical-align: middle;
    width: 1rem;
    height: 1rem;
    accent-color: var(--ns-cyan);
}

/* Erros Zend */
ul.errors, ul.error {
    list-style: none;
    padding: 0.375rem 0.75rem;
    margin: 0.25rem 0;
    background: #fde6e9;
    color: #842029;
    border-radius: var(--ns-radius-sm);
    font-size: 0.85rem;
}
ul.errors li, ul.error li { display: inline; margin-right: 0.5rem; }

/* Botão legado .button (fallback) */
input.button, button.button, a.button {
    display: inline-block;
    padding: 0.375rem 0.95rem;
    font-size: 0.95rem;
    line-height: 1.5;
    background: var(--ns-cyan);
    color: #fff;
    border: 1px solid var(--ns-cyan);
    border-radius: var(--ns-radius-sm);
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, transform .05s;
}
input.button:hover, button.button:hover, a.button:hover {
    background: var(--ns-cyan-600);
    border-color: var(--ns-cyan-600);
    color: #fff;
    text-decoration: none;
}
input.button:active, button.button:active, a.button:active { transform: translateY(1px); }

/* =============================================================
 * 7. BOTÕES LEGADOS COM ÍCONE (bt-add, bt-back, bt-edit, bt-cobranca, etc)
 * Cada .bt-* mapeia para uma variante semântica de BS5:
 *   bt-add / bt-adicionar → primary sólido (cyan)
 *   bt-cobranca / bt-check / bt-conffat → success sólido
 *   bt-back → outline-secondary (navegação)
 *   bt-edit → outline-primary
 *   bt-goto → outline-primary
 *   bt-relat → outline-secondary (impressão/relatório)
 * ============================================================= */
a.bt-add, a.bt-adicionar, a.bt-back, a.bt-edit, a.bt-check,
a.bt-cobranca, a.bt-goto, a.bt-conffat, a.bt-relat {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.95rem;
    border-radius: var(--ns-radius-sm);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.25;
    transition: background-color .15s, border-color .15s, color .15s, transform .05s;
    margin: 0;
    border: 1px solid transparent;
    white-space: nowrap;
}
a.bt-add:hover, a.bt-adicionar:hover, a.bt-back:hover, a.bt-edit:hover,
a.bt-check:hover, a.bt-cobranca:hover, a.bt-goto:hover, a.bt-conffat:hover, a.bt-relat:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

/* Primary sólido */
a.bt-add, a.bt-adicionar {
    background: var(--ns-cyan); color: #fff; border-color: var(--ns-cyan);
}
a.bt-add:hover, a.bt-adicionar:hover {
    background: var(--ns-cyan-600); border-color: var(--ns-cyan-600); color: #fff;
}

/* Success sólido (confirmação / barcode / conferência) */
a.bt-cobranca, a.bt-check, a.bt-conffat {
    background: #198754; color: #fff; border-color: #198754;
}
a.bt-cobranca:hover, a.bt-check:hover, a.bt-conffat:hover {
    background: #146c43; border-color: #146c43; color: #fff;
}

/* Outline secundário (navegação / impressão) */
a.bt-back, a.bt-relat {
    background: transparent; color: var(--ns-text); border-color: var(--ns-border);
}
a.bt-back:hover, a.bt-relat:hover {
    background: var(--ns-gray-100); border-color: var(--ns-muted); color: var(--ns-dark);
}

/* Outline primary (edit / goto externo) */
a.bt-edit, a.bt-goto {
    background: transparent; color: var(--ns-cyan-600); border-color: var(--ns-cyan);
}
a.bt-edit:hover, a.bt-goto:hover {
    background: var(--ns-cyan); border-color: var(--ns-cyan); color: #fff;
}

/* Ícones ::before (FontAwesome) */
a.bt-add::before, a.bt-adicionar::before {
    content: "\2b"; font-family: "Font Awesome 6 Free"; font-weight: 900;
}
a.bt-back::before {
    content: "\f060"; font-family: "Font Awesome 6 Free"; font-weight: 900;
}
a.bt-edit::before {
    content: "\f304"; font-family: "Font Awesome 6 Free"; font-weight: 900;
}
a.bt-check::before, a.bt-conffat::before {
    content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
}
a.bt-cobranca::before {
    content: "\f02a"; font-family: "Font Awesome 6 Free"; font-weight: 900;
}
a.bt-goto::before {
    content: "\f08e"; font-family: "Font Awesome 6 Free"; font-weight: 900;
}
a.bt-relat::before {
    content: "\f02f"; font-family: "Font Awesome 6 Free"; font-weight: 900;
}

/* ---------------------------------------------------------------
 * Variantes de botões em FORMS (por ID/name convencional)
 * Limpar/Reset → outline-secondary
 * Busca avançada → outline-primary pequeno
 * Cancel/Remover → outline-danger
 * ---------------------------------------------------------------- */
button#btnReset, input#btnReset,
button[name="btnReset"], input[name="btnReset"],
button#btnLimpar, input#btnLimpar,
button[name="btnLimpar"], input[name="btnLimpar"] {
    background: transparent !important;
    border: 1px solid var(--ns-border) !important;
    color: var(--ns-text) !important;
    font-weight: 500;
}
button#btnReset:hover, input#btnReset:hover,
button[name="btnReset"]:hover, input[name="btnReset"]:hover,
button#btnLimpar:hover, input#btnLimpar:hover,
button[name="btnLimpar"]:hover, input[name="btnLimpar"]:hover {
    background: var(--ns-gray-200) !important;
    border-color: var(--ns-muted) !important;
    color: var(--ns-dark) !important;
}

button#btnAvancada, input#btnAvancada,
button[name="btnAvancada"], input[name="btnAvancada"] {
    background: transparent !important;
    border: 1px solid var(--ns-cyan) !important;
    color: var(--ns-cyan-700) !important;
    font-weight: 500;
}
button#btnAvancada:hover, input#btnAvancada:hover,
button[name="btnAvancada"]:hover, input[name="btnAvancada"]:hover {
    background: var(--ns-cyan) !important;
    color: #fff !important;
}

button#btnCancel, input#btnCancel,
button[name="btnCancel"], input[name="btnCancel"],
button[id*="Remov"], input[id*="Remov"],
button[id*="Delete"], input[id*="Delete"],
button[name*="Remov"], button[name*="Delete"] {
    background: transparent !important;
    border: 1px solid #dc3545 !important;
    color: #dc3545 !important;
    font-weight: 500;
}
button#btnCancel:hover, input#btnCancel:hover,
button[name="btnCancel"]:hover, input[name="btnCancel"]:hover,
button[id*="Remov"]:hover, button[id*="Delete"]:hover,
button[name*="Remov"]:hover, button[name*="Delete"]:hover {
    background: #dc3545 !important;
    color: #fff !important;
}

/* =============================================================
 * 8. TABELAS
 * ============================================================= */
table.tabelaDados,
table.list,
table.listing,
table.tabela,
main table:not(.ui-datepicker-calendar):not(.noreset) {
    width: 100%;
    border-collapse: collapse;
    background: var(--ns-surface);
    border-radius: var(--ns-radius);
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: var(--ns-shadow-sm);
}
table.tabelaDados thead th,
table.list thead th,
table.listing thead th,
table.tabela thead th,
main table:not(.ui-datepicker-calendar):not(.noreset) thead th {
    background: #f8fafc;
    color: #495057;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.625rem 0.75rem;
    border-bottom: 2px solid var(--ns-border);
    text-align: left;
    line-height: 1.3;
    vertical-align: middle;
}
table.tabelaDados tbody td,
table.list tbody td,
table.listing tbody td,
table.tabela tbody td,
main table:not(.ui-datepicker-calendar):not(.noreset) tbody td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--ns-border);
    vertical-align: middle;
    font-size: 0.92rem;
    line-height: 1.35;
}
table.tabelaDados tbody tr:hover,
table.list tbody tr:hover,
table.listing tbody tr:hover,
table.tabela tbody tr:hover,
main table:not(.ui-datepicker-calendar):not(.noreset) tbody tr:hover {
    background: #f8fafc;
}
table.tabelaDados tbody td small,
table.list tbody td small,
table.listing tbody td small,
main table tbody td small {
    color: var(--ns-muted);
    font-size: 0.78rem;
}
td.icone, th.icone { width: 40px; text-align: center; }
td.icone a, th.icone a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--ns-radius-sm);
    color: var(--ns-muted);
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
td.icone a:hover, th.icone a:hover {
    background: var(--ns-cyan-50);
    color: var(--ns-cyan-600);
}
td.icone img, th.icone img {
    max-width: 18px;
    max-height: 18px;
    opacity: 0.7;
    transition: opacity .15s;
}
td.icone a:hover img { opacity: 1; }

/* Linhas editadas/estado */
.tabelaDados tbody tr.edit-hidden,
.tabelaDados tbody tr.edit-hidden:hover { background: #fff3cd; }

.table-options {
    font-size: 0.88rem;
    background: #f8fafc;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius-sm);
    margin: 0.5rem 0;
}

/* Scroll horizontal automático para tabelas soltas em mobile */
.table-responsive {
    border-radius: var(--ns-radius);
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 767.98px) {
    main > table,
    main > form > table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =============================================================
 * 9. ALERTS / MENSAGENS (compat messageXxx → alert)
 * ============================================================= */
p.messageAlert, p.messageWarning,
p.messageError,
p.messageInfo,
p.messageSuccess {
    display: block;
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
    border: 1px solid transparent;
    border-radius: var(--ns-radius-sm);
    font-size: 0.95rem;
    background-image: none !important;
    border-left-width: 4px;
    border-left-style: solid;
}
p.messageInfo    { background: #cfe6f3; color: #084c6a; border-color: #b5d9ec; border-left-color: var(--ns-cyan); }
p.messageAlert,
p.messageWarning { background: #fff3cd; color: #664d03; border-color: #ffecb5; border-left-color: #ffc107; }
p.messageError   { background: #f8d7da; color: #842029; border-color: #f5c2c7; border-left-color: #dc3545; }
p.messageSuccess { background: #d1e7dd; color: #0f5132; border-color: #badbcc; border-left-color: #198754; }

.msgClose { cursor: pointer; }
.msgClose:empty { display: none !important; }

/* =============================================================
 * 10. LOGIN
 * ============================================================= */
body.body-login {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(27,172,224,0.22) 0%, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(27,172,224,0.15) 0%, transparent 40%),
        linear-gradient(135deg, #0a0a0a 0%, #1A1A1A 50%, #0d2431 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.login-wrapper {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}
.login-inner > .card.login-card {
    border-radius: 1rem;
    border: 0;
    overflow: hidden;
    background: #ffffff;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    position: relative;
}
.login-inner > .card.login-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ns-cyan) 0%, var(--ns-cyan-600) 100%);
}
.login-logo {
    height: 48px;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(27,172,224,0.2));
}
body.body-login .form-control-lg {
    font-size: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
}
body.body-login .btn-lg {
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    letter-spacing: 0.01em;
}

/* =============================================================
 * 11. BOX TOTAIS (financeiro balanço)
 * ============================================================= */
#boxBalancos, #boxTotaisFinanc {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0;
}
.boxtotais {
    flex: 1 1 260px;
    min-width: 260px;
    float: none !important;
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    box-shadow: var(--ns-shadow-sm);
    padding: 1rem 1.25rem;
    width: auto;
    margin: 0;
    border-top: 4px solid var(--ns-cyan);
}
.boxtotais h5 {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ns-dark);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--ns-border);
}
.boxtotais p {
    font-size: 0.92rem;
    margin: 0 0 0.4rem 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.boxtotais p strong,
.boxtotais p span {
    width: auto;
    float: none;
    display: inline;
    text-align: right;
    font-weight: normal;
    font-size: 0.92rem;
}
.boxtotais p strong {
    color: var(--ns-muted);
    text-align: left;
    font-weight: 500;
}
.boxtotais p.result {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--ns-border);
    font-weight: 600;
}
.boxtotais p.result strong {
    color: var(--ns-dark);
    font-weight: 600;
}
a#infototais, a#infobalanco {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ns-cyan-700);
    background: var(--ns-cyan-50);
    border: 1px solid var(--ns-cyan-100);
    border-radius: var(--ns-radius-sm);
    margin: 0.75rem 0;
    cursor: pointer;
    width: auto;
    text-decoration: none;
    transition: background-color .15s, color .15s;
    user-select: none;
}
a#infototais:hover, a#infobalanco:hover {
    background: var(--ns-cyan);
    border-color: var(--ns-cyan);
    color: #fff;
    text-decoration: none;
}
a#infototais:hover i, a#infobalanco:hover i { color: #fff !important; }
a#infototais::after, a#infobalanco::after {
    content: "\f107"; /* fa-chevron-down */
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    margin-left: 0.35rem;
    font-size: 0.85em;
    transition: transform .2s;
}
a#infototais.open::after, a#infobalanco.open::after {
    transform: rotate(180deg);
}

/* =============================================================
 * 12. AJAX LOADER
 * ============================================================= */
#ajaxMsg {
    position: fixed !important;
    top: 1rem !important;
    right: 1rem !important;
    left: auto !important;
    z-index: 1080;
    background: rgba(26, 26, 26, 0.92);
    color: #fff;
    padding: 0.5rem 1rem 0.5rem 2rem;
    border-radius: var(--ns-radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: var(--ns-shadow);
    display: none;
    text-transform: none;
    font-family: inherit;
}
#ajaxMsg::before {
    content: "\f110"; /* fa-spinner */
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    animation: spin 0.8s linear infinite;
    color: var(--ns-cyan);
}
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }

/* =============================================================
 * 13. MODAIS (thickbox-compat)
 * ============================================================= */
.modal-content {
    border-radius: var(--ns-radius);
    border: 1px solid var(--ns-border);
    box-shadow: var(--ns-shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--ns-border);
    background: var(--ns-surface);
    padding: 0.875rem 1rem;
}
.modal-title { font-size: 1rem; font-weight: 600; }
.modal.tb-compat .modal-body { overflow-x: auto; }
.modal.tb-compat .modal-body form dl dd input[type=text],
.modal.tb-compat .modal-body form dl dd select,
.modal.tb-compat .modal-body form dl dd textarea,
.modal.tb-compat .modal-body .form-control,
.modal.tb-compat .modal-body .form-select {
    max-width: 100%;
}

/* ---- Modal: form avançado em 2 colunas + rodapé sticky ---- */
.modal-body form.form-filter-avancado {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
    padding-bottom: 0.5rem;
}
.modal-body form.form-filter-avancado > .mb-3 {
    margin-bottom: 0.75rem !important;
}
/* Campos que quebram a grade (cabeçalhos de grupo, botões, campos largos) */
.modal-body form.form-filter-avancado > .mb-3:has(> label[for="data_campo"]),
.modal-body form.form-filter-avancado > .mb-3:has(> label[for="pesquisar"]),
.modal-body form.form-filter-avancado > .form-check,
.modal-body form.form-filter-avancado > .d-flex {
    grid-column: 1 / -1;
}
/* "Filtrar por data" vira um header visual do grupo de datas */
.modal-body form.form-filter-avancado > .mb-3:has(> label[for="data_campo"]) {
    border-top: 1px solid var(--ns-border);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
}
/* Checkboxes em modal: mais visíveis, com pílula igual ao dos filtros */
.modal-body form .form-check,
.modal-body form .mb-3.form-check {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: var(--ns-gray-100);
    border: 1px solid var(--ns-border);
    border-radius: 999px;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem !important;
}
.modal-body form .form-check input.form-check-input {
    margin: 0;
    width: 1rem; height: 1rem;
    accent-color: var(--ns-cyan);
    flex-shrink: 0;
}
.modal-body form .form-check label.form-check-label {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ns-text);
    white-space: nowrap;
    cursor: pointer;
}
/* Linha de botões (display group) vira rodapé sticky no modal */
.modal-body form.form-filter-avancado > .d-flex.gap-2.mt-3,
.modal-body form.form-filter-avancado fieldset.botoes,
.modal-body form.form-filter-avancado > fieldset.botoes {
    grid-column: 1 / -1;
    position: sticky;
    bottom: -1rem;
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.7), var(--ns-surface) 30%);
    border-top: 1px solid var(--ns-border);
    justify-content: flex-end;
    z-index: 5;
}
/* Responsive: 1 coluna em telas pequenas */
@media (max-width: 575.98px) {
    .modal-body form.form-filter-avancado {
        grid-template-columns: 1fr;
    }
}

/* ---- Padronização GLOBAL: todos os formulários dentro de modal ----
 * (inclui modais thickbox-compat e qualquer outro modal Bootstrap)
 * Botões do display group 'botoes' ficam num rodapé sticky, alinhados à direita. */
.modal-body form fieldset.botoes,
.modal-body form > .d-flex.gap-2.mt-3 {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px solid var(--ns-border);
    margin: 1rem -1rem -1rem -1rem;
    padding: 0.875rem 1rem;
    background: var(--ns-surface);
    position: sticky;
    bottom: -1rem;
    z-index: 5;
    box-shadow: 0 -2px 6px rgba(0,0,0,.04);
}
.modal-body form fieldset.botoes > dl {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    width: 100%;
    align-items: center;
}
.modal-body form fieldset.botoes > dl > dd {
    margin: 0;
    display: inline-block;
}
/* Inputs dentro de modal sempre full-width (sem style="width:Xpx" legado) */
.modal-body input[type="text"]:not(.form-check-input),
.modal-body input[type="password"]:not(.form-check-input),
.modal-body input[type="email"]:not(.form-check-input),
.modal-body input[type="number"]:not(.form-check-input),
.modal-body input[type="date"]:not(.form-check-input),
.modal-body select:not(.form-check-input),
.modal-body textarea {
    max-width: 100%;
}
/* Checkbox/radio em QUALQUER form (modal ou não): tamanho mínimo visível + cor da marca */
input[type="checkbox"]:not(.noreset),
input[type="radio"]:not(.noreset) {
    accent-color: var(--ns-cyan);
    width: 1.05rem;
    height: 1.05rem;
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
}
/* Labels seguindo checkbox/radio: cursor pointer e alinhamento */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

/* =============================================================
 * 14. BLOQUEAR (overlay $.fn.bloquear)
 * ============================================================= */
.blockPage {
    background: rgba(255,255,255,.65) !important;
    backdrop-filter: blur(2px);
}

/* =============================================================
 * 15. ICON BUTTON
 * ============================================================= */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--ns-radius-sm);
    color: var(--ns-muted);
    text-decoration: none;
    transition: background-color .15s, color .15s;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    font-size: 0.95rem;
}
.icon-btn:hover {
    background: var(--ns-cyan-50);
    color: var(--ns-cyan-600);
}
.icon-btn.text-danger:hover { background: #fde6e9; color: #dc3545; }
.icon-btn.text-success:hover { background: #d1e7dd; color: #198754; }

/* =============================================================
 * 16. TREE (<details>/<summary> nativos) — centro de custos/receitas
 * ============================================================= */
ul.tree,
ul.tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.tree {
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    padding: 0.5rem 0.75rem;
    box-shadow: var(--ns-shadow-sm);
}
ul.tree ul {
    padding-left: 1.1rem;
    border-left: 1px dashed var(--ns-border);
    margin-left: 0.6rem;
}
ul.tree li {
    position: relative;
    padding: 0.1rem 0;
}
/* Chevron customizado (remove triângulo default do <summary>) */
ul.tree details > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    user-select: none;
}
ul.tree details > summary::-webkit-details-marker,
ul.tree details > summary::marker { display: none; content: ''; }
ul.tree details > summary::before {
    content: "\f105"; /* fa-chevron-right */
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    color: var(--ns-muted);
    transition: transform 0.15s;
    font-size: 0.8rem;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
ul.tree details[open] > summary::before {
    transform: rotate(90deg);
    color: var(--ns-cyan-600);
}
/* Item (linha com label + botões) */
ul.tree .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    padding: 0.3rem 0.5rem;
    border-radius: var(--ns-radius-sm);
    transition: background-color 0.12s;
    min-width: 0;
}
ul.tree .item.leaf {
    margin-left: 18px; /* alinha com os que têm chevron */
}
ul.tree .item:hover {
    background: var(--ns-cyan-50);
}
ul.tree .item .name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
ul.tree .item .menu {
    display: flex;
    gap: 0.15rem;
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.15s;
}
ul.tree li:hover > details > summary > .item .menu,
ul.tree li:hover > .item .menu {
    opacity: 1;
}
/* Foco acessível */
ul.tree details > summary:focus {
    outline: 2px solid var(--ns-cyan);
    outline-offset: 2px;
    border-radius: var(--ns-radius-sm);
}

/* =============================================================
 * 17. TAREFAS / COMENTÁRIOS (refresh visual)
 * ============================================================= */
.menu-tarefas div.tarefa {
    border-bottom: 1px solid var(--ns-border);
    padding: 0.75rem 0;
}
.menu-tarefas div.tarefa h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    line-height: 1.35;
}
.menu-tarefas div.tarefa h4 small {
    font-size: 0.78rem;
    color: var(--ns-muted);
}
.menu-tarefas div.tarefa a { color: var(--ns-text); }
.menu-tarefas div.tarefa a:hover { color: var(--ns-cyan-600); }
.menu-tarefas div.tarefa .cliente-nome { font-size: 0.85rem; font-weight: 600; color: var(--ns-text); }
.menu-tarefas div.tarefa .desc {
    padding: 0.5rem 0 0 0;
    margin-top: 0.5rem;
    display: none;
    color: var(--ns-muted);
    font-size: 0.9rem;
}
.menu-tarefas div.tarefa div.menu-tarefa { float: right; }
.menu-tarefas div.tarefa div.menu-tarefa a.projeto-nome {
    display: inline-block;
    background: var(--ns-cyan-50);
    color: var(--ns-cyan-700);
    padding: 0.125rem 0.5rem;
    border-radius: var(--ns-radius-sm);
    font-size: 0.75rem;
    text-decoration: none;
}

/* Status pills */
a.status, a.status:hover {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    margin: 0 0.25rem;
    text-decoration: none;
    vertical-align: middle;
}
a.statusA { background: #f0ad4e; }
a.statusP { background: #dc3545; }
a.statusF { background: #198754; }

/* Comentários */
.comentario-list { margin: 1rem 0 0 0; }
.comentario-list h2 {
    margin: 0 0 0.75rem 0;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--ns-border);
    font-size: 1.1rem;
}
.comentario-list h2 a, .comentario-list h2 a:hover { color: var(--ns-text); }
.comentario-list p.descricao {
    padding: 0.875rem 1rem;
    background: var(--ns-bg);
    border-left: 3px solid var(--ns-cyan);
    border-radius: var(--ns-radius-sm);
    margin-top: 1rem;
    font-size: 0.95rem;
}
.comentario-list .comentario-item {
    border-bottom: 1px solid var(--ns-border);
    padding: 0.75rem 0;
    margin-top: 0;
}
.comentario-list .comentario-item h4 {
    margin: 0;
    font-size: 0.95rem;
}
.comentario-list .comentario-item h4 span {
    font-size: 0.78rem;
    color: var(--ns-muted);
    font-weight: normal;
}
.comentario-list .comentario-item p { margin: 0.375rem 0; }
.comentario-list .last { border-bottom: none; }
.comentario-list .menu-acoes {
    background: var(--ns-dark);
    border-radius: var(--ns-radius-sm);
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0;
}
.comentario-list .menu-acoes ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.comentario-list .menu-acoes ul li { margin: 0; }
.comentario-list .menu-acoes ul li a { color: #fff; font-size: 0.85rem; }
.comentario-list .menu-acoes ul li a:hover { color: var(--ns-cyan); text-decoration: none; }
.comentario-list .menu-flutuante { position: sticky; top: 4rem; z-index: 100; }

.comentario-list ul.filelist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.comentario-list ul.filelist li {
    display: inline-block;
    padding: 0.5rem;
    margin: 0;
    text-align: center;
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius-sm);
}
.comentario-list ul.filelist li img.img-file {
    display: block;
    margin: 0 auto 0.25rem;
    height: 48px;
}
.comentario-list ul.filelist li img.img-thumb {
    display: block;
    margin: 0 auto 0.25rem;
    max-width: 120px;
    max-height: 120px;
    border-radius: var(--ns-radius-sm);
}

.comentario-form { margin: 1rem 0 0 0; }
.comentario-form .zend_form .element textarea { width: 100%; min-height: 100px; }

/* =============================================================
 * 18. UPLOAD ÁREA
 * ============================================================= */
.uploadArea {
    min-height: 200px;
    border: 2px dashed var(--ns-border);
    padding: 1rem;
    cursor: move;
    margin-bottom: 1rem;
    position: relative;
    background: var(--ns-bg);
    border-radius: var(--ns-radius);
    transition: border-color .15s, background-color .15s;
}
.uploadArea:hover {
    border-color: var(--ns-cyan);
    background: var(--ns-cyan-50);
}
.uploadArea h1 {
    color: var(--ns-muted);
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-size: 1.25rem;
    pointer-events: none;
}
.dfiles {
    clear: both;
    border: 1px solid var(--ns-border);
    background: var(--ns-surface);
    padding: 0.375rem 0.75rem;
    position: relative;
    margin: 0.25rem 0;
    border-radius: var(--ns-radius-sm);
    font-size: 0.9rem;
}
.invalid { border-color: #dc3545 !important; background: #fde6e9 !important; }
.buttonUpload {
    display: inline-block;
    padding: 0.375rem 0.95rem;
    background: var(--ns-cyan);
    color: #fff;
    border: 1px solid var(--ns-cyan);
    border-radius: var(--ns-radius-sm);
    cursor: pointer;
    font-weight: 500;
}
.buttonUpload:hover { background: var(--ns-cyan-600); border-color: var(--ns-cyan-600); }
#fileBox {
    padding: 1rem;
    border: 1px dashed var(--ns-border);
    margin: 1rem 0;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: var(--ns-radius);
    background: var(--ns-bg);
}

/* =============================================================
 * 19. HELPERS ANTIGOS (retidos por compat)
 * ============================================================= */
.clear { clear: both; }
.hide { display: none !important; }
.red { color: #dc3545; }
.orange { color: #fd7e14; }
.green { color: #198754; }
.bold { font-weight: 600; }
.quiet { color: var(--ns-muted); }
.loud { color: var(--ns-dark); }

.link-reverter,
.link-remover {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    color: var(--ns-muted);
    background: none;
    text-decoration: none;
    border-radius: var(--ns-radius-sm);
}
.link-reverter:hover { color: var(--ns-cyan-600); background: var(--ns-cyan-50); }
.link-remover:hover { color: #dc3545; background: #fde6e9; }
.link-reverter::before {
    content: "\f362"; /* fa-arrow-right-arrow-left */
    font-family: "Font Awesome 6 Free"; font-weight: 900;
}
.link-remover::before {
    content: "\f1f8"; /* fa-trash */
    font-family: "Font Awesome 6 Free"; font-weight: 900;
}

img.icon-nfe-emitida, img.icon-nfe-cancelada { opacity: 0.55; }

/* Multicheckbox inline */
ul.inline-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.875rem;
}
ul.inline-checks li {
    display: inline-block;
    margin: 0;
    white-space: nowrap;
}
ul.inline-checks li label { font-weight: normal; cursor: pointer; }

/* Filtros legados — agora no formato flex moderno */
.filtro-item, .filtro-item-sel, .filtro-usuario {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
    border: 0;
    line-height: normal;
    float: none;
}

/* Ícones CSS antigos que tentavam sobrepor thickbox */
#TB_title { display: none; }

/* =============================================================
 * 20. FORM FILTRO — grid horizontal (desktop) / stack (mobile)
 * ============================================================= */
form.form-filter, form.form-filtro {
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    padding: 0.875rem 1rem;
    margin: 0 0 1rem 0;
}
/* DL externo: flex vertical — cada DD (fieldset ou checkbox solto) em linha própria */
form.form-filter > .zend_form,
form.form-filtro > .zend_form,
form.form-filter > dl.zend_form,
form.form-filtro > dl.zend_form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
}
form.form-filter > .zend_form > dd,
form.form-filtro > .zend_form > dd {
    margin: 0;
    padding: 0;
}
/* Fieldset externo (.zend_form > dd > fieldset): sem borda legada */
form.form-filter > .zend_form > dd > fieldset,
form.form-filtro > .zend_form > dd > fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}
/* DL interno (dentro do fieldset): grid dos filtros em colunas */
form.form-filter > .zend_form > dd > fieldset > dl,
form.form-filtro > .zend_form > dd > fieldset > dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 200px));
    gap: 0.5rem 1rem;
    align-items: end;
    margin: 0;
    padding: 0;
}
form.form-filter > .zend_form > dd > fieldset > dl > dd,
form.form-filtro > .zend_form > dd > fieldset > dl > dd {
    margin: 0;
    padding: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
form.form-filter > .zend_form > dd > fieldset > dl > dd > label,
form.form-filtro > .zend_form > dd > fieldset > dl > dd > label {
    margin: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ns-muted);
    font-weight: 600;
    line-height: 1.3;
    order: -1;
}
form.form-filter > .zend_form > dd > fieldset > dl > dd > select,
form.form-filter > .zend_form > dd > fieldset > dl > dd > input:not([type=checkbox]):not([type=radio]):not([type=image]),
form.form-filter > .zend_form > dd > fieldset > dl > dd > textarea,
form.form-filtro > .zend_form > dd > fieldset > dl > dd > select,
form.form-filtro > .zend_form > dd > fieldset > dl > dd > input:not([type=checkbox]):not([type=radio]):not([type=image]),
form.form-filtro > .zend_form > dd > fieldset > dl > dd > textarea {
    width: 100%;
    min-width: 0;
}
/* DD.checkbox dentro do filtro: label inline ao lado do checkbox (não empilha) */
form.form-filter > .zend_form > dd > fieldset > dl > dd.checkbox,
form.form-filter > .zend_form > dd > fieldset > dl > dd.form-check,
form.form-filtro > .zend_form > dd > fieldset > dl > dd.checkbox,
form.form-filtro > .zend_form > dd > fieldset > dl > dd.form-check {
    flex-direction: row !important;
    align-items: center;
    gap: 0.4rem;
    flex: 0 1 auto;
    padding-top: 1.45rem;   /* alinha base com os selects/inputs adjacentes (que têm label em cima) */
}
form.form-filter > .zend_form > dd > fieldset > dl > dd.checkbox > label,
form.form-filter > .zend_form > dd > fieldset > dl > dd.form-check > label,
form.form-filtro > .zend_form > dd > fieldset > dl > dd.checkbox > label,
form.form-filtro > .zend_form > dd > fieldset > dl > dd.form-check > label {
    order: 0 !important;
    font-size: 0.9rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--ns-text) !important;
    font-weight: 400 !important;
    cursor: pointer;
    margin: 0 !important;
    white-space: nowrap;
}
/* Bootstrap 5 aplica margin-left:-1.5em + float:left no .form-check-input dentro de
 * .form-check. Em flex/grid esse negativo joga o checkbox por cima da célula vizinha. */
form.form-filter dd.checkbox > input[type=checkbox],
form.form-filter dd.form-check > input[type=checkbox],
form.form-filter dd.checkbox > input.form-check-input,
form.form-filter dd.form-check > input.form-check-input,
form.form-filtro dd.checkbox > input[type=checkbox],
form.form-filtro dd.form-check > input[type=checkbox],
form.form-filtro dd.checkbox > input.form-check-input,
form.form-filtro dd.form-check > input.form-check-input {
    float: none !important;
    margin: 0 !important;
    flex-shrink: 0;
}
/* Multicheckbox/multiradio em filtros ocupam toda a largura do grid —
 * caso contrário ficam espremidos em 1 coluna e os labels longos quebram. */
form.form-filter > .zend_form > dd > fieldset > dl > dd.multicheckbox,
form.form-filter > .zend_form > dd > fieldset > dl > dd.multiradio,
form.form-filtro > .zend_form > dd > fieldset > dl > dd.multicheckbox,
form.form-filtro > .zend_form > dd > fieldset > dl > dd.multiradio {
    grid-column: 1 / -1;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0.35rem 0.6rem !important;
    align-items: center;
    padding: 0 !important;
}
form.form-filter dd.multicheckbox > label:not(.form-check-label):not(.checkbox-label):not(.radio-label),
form.form-filter dd.multiradio > label:not(.form-check-label):not(.checkbox-label):not(.radio-label),
form.form-filtro dd.multicheckbox > label:not(.form-check-label):not(.checkbox-label):not(.radio-label),
form.form-filtro dd.multiradio > label:not(.form-check-label):not(.checkbox-label):not(.radio-label) {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    margin: 0 !important;
    padding: 0.25rem 0.75rem !important;
    background: var(--ns-gray-100) !important;
    border: 1px solid var(--ns-border) !important;
    border-radius: 999px !important;
    font-weight: 400 !important;
    font-size: 0.85rem !important;
    cursor: pointer;
    user-select: none;
    transition: all .15s;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--ns-text) !important;
    white-space: nowrap;
    flex: 0 0 auto;
}
form.form-filter dd.multicheckbox > label:not(.form-check-label):has(input:checked),
form.form-filter dd.multiradio > label:not(.form-check-label):has(input:checked),
form.form-filtro dd.multicheckbox > label:not(.form-check-label):has(input:checked),
form.form-filtro dd.multiradio > label:not(.form-check-label):has(input:checked) {
    background: var(--ns-cyan);
    color: #fff;
    border-color: var(--ns-cyan);
    box-shadow: 0 1px 2px rgba(27,172,224,.3);
}
form.form-filter dd.multicheckbox > label:not(.form-check-label):has(input:checked) input,
form.form-filtro dd.multicheckbox > label:not(.form-check-label):has(input:checked) input {
    accent-color: #fff;
}
form.form-filter dd.multicheckbox > label.form-check-label,
form.form-filter dd.multiradio > label.form-check-label,
form.form-filtro dd.multicheckbox > label.form-check-label,
form.form-filtro dd.multiradio > label.form-check-label {
    flex-basis: 100%;
    margin: 0 0 0.15rem 0;
    padding: 0;
    background: transparent;
    border: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ns-muted);
    font-weight: 600;
    cursor: default;
}

/* Checkbox "Não paginar" e similares no nível externo — inline compact */
form.form-filter > .zend_form > dd.checkbox,
form.form-filtro > .zend_form > dd.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0;
    white-space: nowrap;
}
form.form-filter > .zend_form > dd.checkbox > label,
form.form-filtro > .zend_form > dd.checkbox > label {
    font-size: 0.85rem;
    color: var(--ns-text);
    font-weight: 500;
    margin: 0;
}

/* Fieldset.botoes externo: linha horizontal de botões */
form.form-filter > .zend_form fieldset.botoes,
form.form-filtro > .zend_form fieldset.botoes {
    border: 0;
    padding: 0;
    margin: 0;
}
form.form-filter > .zend_form fieldset.botoes > dl,
form.form-filtro > .zend_form fieldset.botoes > dl {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
    margin: 0;
    padding: 0;
    grid-template-columns: none !important;
}
form.form-filter > .zend_form fieldset.botoes dd,
form.form-filtro > .zend_form fieldset.botoes dd {
    margin: 0;
    padding: 0;
    display: inline-block;
    float: none !important;
    flex-direction: row;
}

/* Sobrescreve widths inline nos selects/inputs legados */
form.form-filter select[style*="width"],
form.form-filtro select[style*="width"],
form.form-filter input[style*="width"],
form.form-filtro input[style*="width"] {
    width: 100% !important;
}

/* Mobile: stack vertical */
@media (max-width: 767.98px) {
    form.form-filter > .zend_form > dd > fieldset > dl,
    form.form-filtro > .zend_form > dd > fieldset > dl {
        grid-template-columns: 1fr;
    }
}
h4.form-filter-title {
    display: block;
    background: var(--ns-dark);
    color: #fff;
    padding: 0.5rem 0.875rem;
    margin: 0 0 0 0;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: var(--ns-radius) var(--ns-radius) 0 0;
}
h4.form-filter-title + .form-filter,
h4.form-filter-title + .form-filtro {
    border-top: 0;
    border-radius: 0 0 var(--ns-radius) var(--ns-radius);
}

/* date-filter (input-group com prev/next): respira */
form.date-filter {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 1rem;
}

/* =============================================================
 * 20c. PAGE ACTIONS + ACTION BAR
 * ============================================================= */
/* .page-actions: linha com botão "Filtros" (mobile) + date-filter.
 * Em desktop, o filter-offcanvas é full-width e empurra o date-filter
 * para a linha debaixo naturalmente. Em mobile, filter-toggle vai pra
 * esquerda e date-filter pra direita (space-between). */
.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.page-actions form.date-filter {
    margin-bottom: 0;
}
@media (max-width: 767.98px) {
    .page-actions {
        justify-content: space-between;
    }
    .page-actions > button.filter-toggle {
        order: 0;
    }
    .page-actions > form.date-filter {
        order: 2;
        margin-left: auto;
    }
}

/* .action-bar: barra de botões (Adicionar, Cobrança, Relatórios...) lado a lado.
 * Em desktop, flex-wrap normal. Em mobile, scroll horizontal pra não empilhar. */
.action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.action-bar > * {
    flex-shrink: 0;
    margin: 0 !important;           /* anula margens legadas dos .bt-* */
    white-space: nowrap;
}
@media (max-width: 767.98px) {
    .action-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;     /* espaço pra scrollbar */
        /* esconde scrollbar em iOS; no desktop deixa visível */
        scrollbar-width: thin;
    }
    .action-bar::-webkit-scrollbar { height: 4px; }
    .action-bar::-webkit-scrollbar-thumb {
        background: var(--ns-border);
        border-radius: 2px;
    }
}

/* =============================================================
 * 20a. PAGE TOOLBAR (header de página: título + botão primário)
 * Legado: <div class="breadcrumb breadcrumb-toolbar"><a.btn>...</a><h3>Título</h3></div>
 * BS5 moderno: .breadcrumb é componente próprio, então forçamos overrides.
 * ============================================================= */
div.breadcrumb-toolbar,
div.breadcrumb.breadcrumb-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    background: transparent;
    padding: 0;
    margin: 0 0 1rem 0;
    border-radius: 0;
    list-style: none;
    font-size: 1rem;
}
div.breadcrumb-toolbar::before,
div.breadcrumb.breadcrumb-toolbar::before {
    content: none;     /* remove separador ::before do .breadcrumb do BS5 se herdar */
}
div.breadcrumb-toolbar h3,
div.breadcrumb.breadcrumb-toolbar h3,
div.breadcrumb-toolbar h2,
div.breadcrumb.breadcrumb-toolbar h2 {
    margin: 0;
    order: -1;                  /* título à esquerda */
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ns-dark);
    padding-right: 0.5rem;
}
div.breadcrumb-toolbar .btn,
div.breadcrumb.breadcrumb-toolbar .btn,
div.breadcrumb-toolbar a.bt-add,
div.breadcrumb.breadcrumb-toolbar a.bt-add {
    order: 1;                   /* botão à direita */
    margin: 0;
    flex-shrink: 0;
}
@media (max-width: 575.98px) {
    div.breadcrumb-toolbar,
    div.breadcrumb.breadcrumb-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    div.breadcrumb-toolbar h3,
    div.breadcrumb.breadcrumb-toolbar h3,
    div.breadcrumb-toolbar h2,
    div.breadcrumb.breadcrumb-toolbar h2 {
        order: 1;                /* título primeiro (topo) */
        font-size: 1.2rem;
    }
    div.breadcrumb-toolbar .btn,
    div.breadcrumb.breadcrumb-toolbar .btn {
        order: 2;                /* botão abaixo do título */
        align-self: flex-start;
    }
}

/* =============================================================
 * 20b. FILTER OFFCANVAS (gerado via app/filter-offcanvas.js)
 * Em mobile vira drawer; em md+ renderiza inline.
 * ============================================================= */
button.filter-toggle {
    display: inline-flex;
    align-items: center;
}
/* Desktop (>=md): wrapper inline transparente — o form ocupa 100% da largura */
@media (min-width: 768px) {
    .filter-offcanvas.offcanvas-md {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    .filter-offcanvas.offcanvas-md > .offcanvas-body {
        padding: 0 !important;
        width: 100% !important;
        display: block !important;
    }
}
/* Mobile (<md): drawer à direita com surface branca e sombra */
@media (max-width: 767.98px) {
    .filter-offcanvas.offcanvas-md {
        width: 88vw;
        max-width: 420px;
        background: var(--ns-surface);
        box-shadow: var(--ns-shadow-lg);
    }
    .filter-offcanvas .offcanvas-body {
        padding: 1rem;
    }
    /* Dentro do drawer, o form usa toda a largura sem border duplicada */
    .filter-offcanvas form.form-filter,
    .filter-offcanvas form.form-filtro {
        border: 0;
        padding: 0;
        margin: 0;
        background: transparent;
    }
    /* Botões de ação do form dentro do drawer ficam full-width stack */
    .filter-offcanvas form.form-filter fieldset.botoes > dl,
    .filter-offcanvas form.form-filtro fieldset.botoes > dl {
        flex-direction: column !important;
        gap: 0.5rem;
    }
    .filter-offcanvas form.form-filter fieldset.botoes .btn,
    .filter-offcanvas form.form-filtro fieldset.botoes .btn,
    .filter-offcanvas form.form-filter fieldset.botoes input.button,
    .filter-offcanvas form.form-filtro fieldset.botoes input.button,
    .filter-offcanvas form.form-filter fieldset.botoes button.button,
    .filter-offcanvas form.form-filtro fieldset.botoes button.button {
        width: 100%;
    }
}

/* =============================================================
 * 21. RESPONSIVE TWEAKS
 * ============================================================= */
@media (max-width: 575.98px) {
    main.container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.1rem; }

    fieldset.botoes {
        flex-direction: column;
        align-items: stretch;
    }
    fieldset.botoes dd,
    fieldset.botoes .btn,
    fieldset.botoes input.button,
    fieldset.botoes button.button {
        width: 100%;
    }
    .boxtotais { flex: 1 1 100%; }

    .form-filter, .form-filtro {
        flex-direction: column;
        align-items: stretch;
    }

    a.bt-add, a.bt-adicionar, a.bt-back, a.bt-edit, a.bt-check,
    a.bt-cobranca, a.bt-goto, a.bt-conffat, a.bt-relat {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .navbar-brand img { height: 28px; }

    /* Tabelas em mobile: fontes um pouco menores */
    main table th, main table td { font-size: 0.85rem; padding: 0.45rem 0.5rem; }
}

/* =============================================================
 * 22. FLATPICKR + AUTOCOMPLETE (jQuery UI aposentado)
 * ============================================================= */
/* Flatpickr: tema NSWEB */
.flatpickr-calendar {
    box-shadow: var(--ns-shadow-lg) !important;
    border-radius: var(--ns-radius) !important;
    border: 1px solid var(--ns-border) !important;
    font-family: var(--bs-body-font-family) !important;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--ns-cyan) !important; }
.flatpickr-months {
    background: var(--ns-cyan) !important;
    border-radius: var(--ns-radius) var(--ns-radius) 0 0;
    padding: .35rem 0;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-current-month input.cur-year,
.flatpickr-monthDropdown-months,
.flatpickr-weekday { color: #fff !important; fill: #fff !important; }
.flatpickr-monthDropdown-months { background: transparent !important; }
.flatpickr-prev-month, .flatpickr-next-month { fill: #fff !important; color: #fff !important; }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: #fff !important; }

.flatpickr-day.today {
    border-color: var(--ns-cyan) !important;
    color: var(--ns-cyan-700) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--ns-cyan) !important;
    border-color: var(--ns-cyan) !important;
    color: #fff !important;
}
.flatpickr-day:hover {
    background: var(--ns-cyan-50) !important;
    color: var(--ns-cyan-700) !important;
}

/* Inputs do Flatpickr herdam form-control naturalmente (campo já tinha a classe).
 * Não precisa override extra. */

/* Autocomplete legado (plugin Jörn Zaefferer) — tema simples compatível BS5 */
.ac_results {
    z-index: 1090 !important;
    background: var(--ns-surface) !important;
    border: 1px solid var(--ns-border) !important;
    border-radius: var(--ns-radius-sm) !important;
    box-shadow: var(--ns-shadow-lg) !important;
    font-family: var(--bs-body-font-family) !important;
    padding: 0.25rem !important;
}
.ac_results li {
    padding: 0.375rem 0.625rem !important;
    border-radius: var(--ns-radius-sm) !important;
    cursor: pointer;
}
.ac_results .ac_over {
    background: var(--ns-cyan) !important;
    color: #fff !important;
}

/* =============================================================
 * 23. TEMA RICO — Metric Cards, Status Badges, Hover Lifts
 * ============================================================= */

/* --- Metric cards (usados no dashboard SaaS / relatórios / financeiro) ---
 * .metric-card com borda superior colorida por variante. */
.metric-card {
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    box-shadow: var(--ns-shadow-sm);
    padding: 1rem 1.25rem;
    position: relative;
    overflow: hidden;
    transition: box-shadow .18s, transform .18s;
}
.metric-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--ns-cyan);
}
.metric-card:hover {
    box-shadow: var(--ns-shadow);
    transform: translateY(-2px);
}
.metric-card .metric-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ns-muted);
    font-weight: 600;
    margin-bottom: 0.35rem;
}
.metric-card .metric-value {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--ns-dark);
    line-height: 1.1;
    margin-bottom: 0.35rem;
    letter-spacing: -0.02em;
}
.metric-card .metric-hint {
    font-size: 0.78rem;
    color: var(--ns-muted);
    line-height: 1.3;
}
.metric-card.metric-success::before  { background: linear-gradient(90deg, #198754, #20c997); }
.metric-card.metric-info::before     { background: linear-gradient(90deg, var(--ns-cyan), var(--ns-cyan-400)); }
.metric-card.metric-warning::before  { background: linear-gradient(90deg, #fd7e14, #ffc107); }
.metric-card.metric-danger::before   { background: linear-gradient(90deg, #dc3545, #e06474); }
.metric-card.metric-purple::before   { background: linear-gradient(90deg, #6f42c1, #9966d4); }
.metric-card.metric-success .metric-value  { color: #146c43; }
.metric-card.metric-danger  .metric-value  { color: #b02a37; }

/* --- Cards ricos (card-hover para listagens/dashboards) --- */
.card.card-hover {
    transition: box-shadow .18s, transform .18s, border-color .18s;
}
.card.card-hover:hover {
    box-shadow: var(--ns-shadow);
    transform: translateY(-2px);
    border-color: var(--ns-cyan-100);
}
.card.card-accent {
    border-left: 3px solid var(--ns-cyan);
}

/* --- Status badges --- */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.badge-status::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.badge-status-success { background: #d1e7dd; color: #0a6e3d; }
.badge-status-danger  { background: #f8d7da; color: #a12734; }
.badge-status-warning { background: #fff3cd; color: #6d4a04; }
.badge-status-info    { background: var(--ns-cyan-50); color: var(--ns-cyan-700); }
.badge-status-neutral { background: var(--ns-gray-200); color: var(--ns-muted); }

/* --- Table polish: zebra stripes sutis + linha ativa destacada --- */
table.tabelaDados tbody tr:nth-child(even),
main table:not(.ui-datepicker-calendar):not(.noreset) tbody tr:nth-child(even) {
    background: var(--ns-gray-100);
}
table.tabelaDados tbody tr:hover,
main table:not(.ui-datepicker-calendar):not(.noreset) tbody tr:hover {
    background: var(--ns-cyan-50) !important;
}

/* --- Links de células de tabela --- */
main table a:not(.icon-btn):not(.btn):not(.page-link) {
    color: var(--ns-cyan-700);
    font-weight: 500;
}

/* --- Botões primary com hover refinado --- */
.btn {
    transition: background-color .15s, border-color .15s, color .15s, transform .05s, box-shadow .15s !important;
    font-weight: 500;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.06); }
.btn:active { transform: translateY(0); }

.btn-primary {
    box-shadow: 0 1px 2px rgba(27,172,224,.15);
}
.btn-primary:hover {
    box-shadow: 0 4px 10px rgba(27,172,224,.25) !important;
}

/* --- Card header com background tint sutil --- */
.card-header.card-header-cyan {
    background: linear-gradient(180deg, var(--ns-cyan-50), var(--ns-surface));
    border-bottom: 2px solid var(--ns-cyan);
    color: var(--ns-cyan-800);
    font-weight: 600;
}

/* --- Navbar: polish adicional --- */
.navbar.bg-dark .navbar-nav .nav-link {
    position: relative;
}
.navbar.bg-dark .navbar-nav .nav-link.active::after,
.navbar.bg-dark .navbar-nav .show > .nav-link::after {
    content: "";
    position: absolute;
    bottom: -0.6rem;
    left: 20%; right: 20%;
    height: 3px;
    background: var(--ns-cyan);
    border-radius: 3px 3px 0 0;
}

/* --- Nav Tabs NSWEB (alto contraste + active-state evidente) --- */
.nav-tabs {
    border-bottom: 2px solid var(--ns-border);
    gap: 0.25rem;
    margin-bottom: 0 !important;
    padding: 0 0.25rem;
}
.nav-tabs .nav-link,
.nav-tabs .nav-item > .nav-link,
.nav-tabs button.nav-link {
    color: var(--ns-muted);
    font-weight: 500;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--ns-radius-sm) var(--ns-radius-sm) 0 0;
    padding: 0.6rem 1.1rem;
    margin-bottom: -2px;
    transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
.nav-tabs .nav-link .fa-solid,
.nav-tabs .nav-link .fa-regular,
.nav-tabs .nav-link i { opacity: 0.75; }
.nav-tabs .nav-link:hover:not(.active):not(.disabled) {
    color: var(--ns-cyan-700);
    background: var(--ns-cyan-50);
    border-color: var(--ns-cyan-100) var(--ns-cyan-100) transparent;
}
.nav-tabs .nav-link:hover:not(.active):not(.disabled) i { opacity: 1; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--ns-cyan-700) !important;
    background: var(--ns-surface);
    border-color: var(--ns-border) var(--ns-border) var(--ns-cyan);
    border-bottom: 2px solid var(--ns-cyan);
    font-weight: 600;
    box-shadow: 0 -2px 0 var(--ns-cyan) inset, 0 -1px 4px rgba(27,172,224,0.08);
}
.nav-tabs .nav-link.active i { opacity: 1; color: var(--ns-cyan); }
.nav-tabs .nav-link.disabled,
.nav-tabs .nav-link[aria-disabled="true"] {
    color: var(--ns-muted);
    opacity: 0.55;
    cursor: not-allowed;
    background: transparent;
}

/* --- Tab content: superfície que continua a partir da aba ativa --- */
.tab-content {
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-top: none;
    border-radius: 0 var(--ns-radius) var(--ns-radius) var(--ns-radius);
    padding: 1.25rem;
    box-shadow: var(--ns-shadow-sm);
    margin-bottom: 1rem;
}
.tab-content > .tab-pane { outline: none; }

/* =============================================================
 * Dashboard (index.index) — cards de atalho mobile-first
 * ============================================================= */
.dashboard {
    max-width: 1400px;
    margin: 0 auto;
}
.dash-header {
    margin-bottom: 1.5rem;
}
.dash-section { margin-bottom: 1.75rem; }
.dash-section-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ns-dark);
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--ns-border);
    display: flex;
    align-items: center;
}

.dash-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    padding: 0.9rem 1rem;
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    box-shadow: var(--ns-shadow-sm);
    color: var(--ns-text);
    text-decoration: none;
    transition: box-shadow .18s, transform .18s, border-color .18s, background-color .18s;
    position: relative;
    overflow: hidden;
    min-height: 100%;
}
.dash-card:hover,
.dash-card:focus-visible {
    text-decoration: none;
    color: var(--ns-text);
    border-color: var(--ns-cyan-200);
    box-shadow: var(--ns-shadow);
    transform: translateY(-2px);
    background: var(--ns-cyan-50);
}
.dash-card-icon {
    font-size: 1.4rem;
    color: var(--ns-cyan-600);
    margin-bottom: 0.55rem;
    line-height: 1;
}
.dash-card:hover .dash-card-icon { color: var(--ns-cyan-700); }
.dash-card-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ns-dark);
    margin: 0;
}
.dash-card-sub {
    display: block;
    font-size: 0.78rem;
    color: var(--ns-muted);
    margin-top: 0.2rem;
    line-height: 1.3;
}

/* Accent variants — faixa colorida à esquerda */
.dash-card-accent { border-left: 3px solid var(--ns-cyan); }
.dash-card-accent .dash-card-icon { color: var(--ns-cyan); }

.dash-card-danger { border-left: 3px solid #dc3545; }
.dash-card-danger .dash-card-icon { color: #b02a37; }
.dash-card-danger:hover { background: #fff5f6; border-color: #f5c2c7; }

.dash-card-warning { border-left: 3px solid #f0ad4e; }
.dash-card-warning .dash-card-icon { color: #b07019; }
.dash-card-warning:hover { background: #fff8eb; border-color: #ffe69c; }

.dash-card-success { border-left: 3px solid #198754; }
.dash-card-success .dash-card-icon { color: #0f6c44; }
.dash-card-success:hover { background: #eefaf3; border-color: #badbcc; }

/* Mobile polish: mais compacto em telas pequenas */
@media (max-width: 575.98px) {
    .dash-card {
        padding: 0.75rem 0.85rem;
    }
    .dash-card-icon { font-size: 1.2rem; margin-bottom: 0.4rem; }
    .dash-card-title { font-size: 0.88rem; }
    .dash-card-sub { font-size: 0.72rem; }
    .dash-section-title { font-size: 0.95rem; }
}

/* --- Painel genérico para listagens (cliente-list, etc.) --- */
.list-panel,
.cliente-list {
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    box-shadow: var(--ns-shadow-sm);
    padding: 1rem;
    margin-bottom: 1rem;
}
.list-panel > .table-responsive,
.cliente-list > .table-responsive {
    margin-bottom: 0.5rem;
}
.list-panel table.tabelaDados,
.cliente-list table.tabelaDados {
    box-shadow: none;
    margin-bottom: 0;
}

/* --- Scrollbar customizada (WebKit) --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ns-gray-100); }
::-webkit-scrollbar-thumb { background: var(--ns-border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--ns-muted); }

/* --- Focus outline global mais moderno --- */
*:focus-visible {
    outline: 2px solid var(--ns-cyan);
    outline-offset: 2px;
    border-radius: var(--ns-radius-sm);
}

/* =============================================================
 * 24. UTILITÁRIOS EXTRAS NSWEB
 * ============================================================= */
.text-cyan { color: var(--ns-cyan) !important; }
.bg-cyan { background-color: var(--ns-cyan) !important; color: #fff; }
.border-cyan { border-color: var(--ns-cyan) !important; }
.shadow-ns { box-shadow: var(--ns-shadow) !important; }
.shadow-ns-lg { box-shadow: var(--ns-shadow-lg) !important; }
.rounded-ns { border-radius: var(--ns-radius) !important; }

/* =============================================================
 * 25. PAGINADOR (ns-pager)
 * ============================================================= */
.ns-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin: 1rem 0;
    padding: 0.5rem 0.75rem;
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
}
.ns-pager-nav {
    align-items: center;
    gap: 2px;
}
.ns-pager-nav .page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: var(--ns-radius-sm);
    border: 1px solid var(--ns-border);
    color: var(--ns-cyan-700);
    transition: background-color .15s, border-color .15s, color .15s;
}
.ns-pager-nav .page-item .page-link:hover {
    background: var(--ns-cyan-50);
    border-color: var(--ns-cyan-200);
    color: var(--ns-cyan-700);
}
.ns-pager-nav .page-item.disabled .page-link {
    color: #b8bfc8;
    background: transparent;
    border-color: transparent;
}
.ns-pager-nav .page-item.ns-pager-select .page-link {
    padding: 0 0.25rem;
    border: 1px solid var(--ns-border);
    background: #f8fafc;
}
.ns-pager-combo {
    display: inline-block;
    width: auto;
    min-width: 4.5rem;
    border: 0;
    background: transparent;
    padding: 0.15rem 1.75rem 0.15rem 0.5rem;
    box-shadow: none;
    font-weight: 600;
    color: var(--ns-dark);
}
.ns-pager-combo:focus {
    outline: 0;
    box-shadow: none;
}
.ns-pager-info {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--ns-muted);
    flex-wrap: wrap;
}
.ns-pager-info strong { color: var(--ns-text); font-weight: 600; }
.ns-pager-sep { opacity: 0.6; }

@media (max-width: 575.98px) {
    .ns-pager {
        justify-content: center;
        flex-direction: column-reverse;
        padding: 0.5rem;
    }
    .ns-pager-info { justify-content: center; font-size: 0.8rem; }
    .ns-pager-nav .page-item .page-link { min-width: 1.9rem; height: 1.9rem; }
}

/* =============================================================
 * 26. LISTAGEM DUAL (tabela + card) — entity-list
 * ============================================================= */

/* Toggle visualização */
.view-toggle {
    display: inline-flex;
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius-sm);
    overflow: hidden;
    background: var(--ns-surface);
    margin-left: auto;
}
.view-toggle button {
    border: 0;
    background: transparent;
    color: var(--ns-muted);
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color .15s, color .15s;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.view-toggle button + button { border-left: 1px solid var(--ns-border); }
.view-toggle button:hover { background: var(--ns-cyan-50); color: var(--ns-cyan-700); }
.view-toggle button.active {
    background: var(--ns-cyan);
    color: #fff;
}
.view-toggle button.active:hover { background: var(--ns-cyan-600); color: #fff; }

/* Container com os dois modos */
.entity-list .view-table { display: block; }
.entity-list .view-cards { display: none; }

/* Modo card forçado */
.entity-list.is-cards .view-table { display: none; }
.entity-list.is-cards .view-cards { display: grid; }

/* Modo tabela forçado */
.entity-list.is-table .view-table { display: block; }
.entity-list.is-table .view-cards { display: none; }

/* Default responsivo (sem preferência salva): mobile vira card */
@media (max-width: 767.98px) {
    .entity-list:not(.is-table):not(.is-cards) .view-table { display: none; }
    .entity-list:not(.is-table):not(.is-cards) .view-cards { display: grid; }
}

/* Grid dos cards */
.view-cards {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

/* Card genérico de entidade */
.entity-card {
    background: var(--ns-surface);
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    box-shadow: var(--ns-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: box-shadow .18s, border-color .18s, transform .18s;
}
.entity-card:hover {
    box-shadow: var(--ns-shadow);
    border-color: var(--ns-cyan-100);
}
.entity-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--ns-border);
    background: #f8fafc;
    border-top-left-radius: var(--ns-radius);
    border-top-right-radius: var(--ns-radius);
}
.entity-card-header .ec-id {
    font-size: 0.72rem;
    color: var(--ns-muted);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.entity-card-header .ec-title {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--ns-dark);
    line-height: 1.25;
    word-break: break-word;
}
.entity-card-header .ec-title small { font-weight: 400; color: var(--ns-muted); font-size: 0.78rem; display: block; }
.entity-card-body {
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 0.85rem;
    align-items: start;
}
.entity-card-body .ec-row {
    display: block;
    min-width: 0;
    line-height: 1.3;
}
.entity-card-body .ec-row.ec-row-wide { grid-column: 1 / -1; }
.entity-card-body .ec-row .ec-label {
    display: block;
    color: var(--ns-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 0.05rem;
}
.entity-card-body .ec-row .ec-value { word-break: break-word; }
.entity-card-body .ec-row .ec-value a { color: var(--ns-cyan-700); }
.entity-card-body .ec-row .ec-value small { display: block; color: var(--ns-muted); }
.entity-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border-top: 1px solid var(--ns-border);
    background: #fbfcfd;
    border-bottom-left-radius: var(--ns-radius);
    border-bottom-right-radius: var(--ns-radius);
}
.entity-card-footer .ec-actions {
    display: inline-flex;
    gap: 0.15rem;
    flex-wrap: wrap;
}
.entity-card-footer .ec-actions .icon-btn {
    width: 2rem;
    height: 2rem;
}

/* Badges do card */
.ec-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}
.ec-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.3;
    background: #eef2f7;
    color: var(--ns-muted);
    white-space: nowrap;
}
.ec-badge i { font-size: 0.75rem; }
.ec-badge-success { background: #d1e7dd; color: #0a6e3d; }
.ec-badge-danger  { background: #f8d7da; color: #a12734; }
.ec-badge-warning { background: #fff3cd; color: #6d4a04; }
.ec-badge-info    { background: var(--ns-cyan-50); color: var(--ns-cyan-700); }
.ec-badge-muted   { background: #eef2f7; color: var(--ns-muted); }
.ec-badge-primary { background: #dbeafe; color: #1d4ed8; }

/* Estado externo no card */
.entity-card.is-externo .entity-card-header { background: #dbeafe; }

/* Menu dropdown dentro do card */
.entity-card .ec-menu .btn {
    padding: 0.25rem 0.55rem;
    line-height: 1;
    border: 1px solid var(--ns-border);
    background: #fff;
    color: var(--ns-muted);
}
.entity-card .ec-menu .btn:hover {
    background: var(--ns-cyan-50);
    color: var(--ns-cyan-700);
    border-color: var(--ns-cyan-200);
}
.entity-card .ec-menu .dropdown-menu {
    font-size: 0.88rem;
    min-width: 13rem;
    box-shadow: var(--ns-shadow-lg);
    border-color: var(--ns-border);
}
.entity-card .ec-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.8rem;
}
.entity-card .ec-menu .dropdown-item i { width: 1rem; text-align: center; color: var(--ns-muted); }
.entity-card .ec-menu .dropdown-item:hover { background: var(--ns-cyan-50); color: var(--ns-cyan-700); }
.entity-card .ec-menu .dropdown-item.text-danger i { color: #a12734; }
.entity-card .ec-menu .dropdown-item.text-danger:hover { background: #fde6e9; color: #a12734; }

/* Em telas pequenas deixa 1 card por linha (mantém grid 2 col dentro do card) */
@media (max-width: 480px) {
    .view-cards { grid-template-columns: 1fr; }
    .entity-card-body { gap: 0.35rem 0.6rem; }
}