/*
 * Tema do micoempresa (módulo de NFS-e) — novo visual de 11/2026.
 *
 * Mesma estratégia de antes: em vez de classes paralelas, as classes do
 * Bootstrap já usadas em TODAS as views (.card, .btn, .badge, .table,
 * .form-control, .nav-tabs, .modal, select2, DataTables) são restilizadas
 * aqui — o visual novo chega a todas as telas sem reescrever as views.
 *
 * Regras do guia visual (ver o mockup "NfseSaaS — Novo visual"):
 * - Inter; fundo claro e frio; azul (#2563EB) é a ÚNICA cor de ação.
 * - Status sempre em pílula de fundo suave + texto escuro + ponto (nunca
 *   texto branco sobre cor viva, nunca só cor).
 * - Todo texto com contraste ≥ 4,5:1 (WCAG AA): secundário #475569,
 *   terciário #64748B — nada mais claro que isso sobre branco.
 * - Campos de 40px, rótulo 13px semibold, ajuda 12px; asterisco
 *   automático em campo obrigatório (:has, sem mexer nas views).
 * - Ações de linha lado a lado, em botões-ícone de 32px.
 */

:root {
    --bg: #f4f6fa;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #f1f5f9;
    --text: #0f172a;
    --text-2: #334155;
    --muted: #475569;
    --subtle: #64748b;
    --line: #e2e8f0;
    --line-2: #eef2f6;
    --field-line: #cbd5e1;
    --primary: #2563eb;
    --primary-2: #1d4ed8;
    --primary-ink: #1e40af;
    --primary-soft: #eef4ff;
    --primary-ring: rgba(37, 99, 235, .16);
    --success: #16a34a;
    --success-ink: #166534;
    --success-soft: #e7f6ec;
    --warning: #d97706;
    --warning-ink: #92400e;
    --warning-soft: #fef3c7;
    --danger: #dc2626;
    --danger-ink: #b42318;
    --danger-soft: #fee4e2;
    --info-ink: #1e40af;
    --info-soft: #e0eaff;
    --neutral-ink: #344054;
    --neutral-soft: #eef2f6;
    --sidebar: #0b1220;
    --sidebar-hover: #141d33;
    --sidebar-active: #1a2440;
    --sidebar-text: #c3cedd;
    --sidebar-muted: #8a99ae;
    --shadow: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-lg: 0 24px 64px rgba(15, 23, 42, .24);
    --radius: 14px;
    --radius-field: 9px;
    --sidebar-width: 248px;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: calc(14px * var(--escala-fonte));
    line-height: 1.45;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover);
}

.text-muted {
    color: var(--muted) !important;
}

/* =============== Shell (sidebar + topbar + conteúdo) =============== */

.app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    background: var(--sidebar);
    color: var(--sidebar-text);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    z-index: 40;
    overflow-y: auto;
}

.sidebar a {
    color: inherit;
}

.sidebar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    padding: 2px 8px 20px;
}

.sidebar .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: calc(17px * var(--escala-fonte));
    letter-spacing: -.02em;
    flex: 0 0 auto;
}

.sidebar .brand strong {
    display: block;
    font-size: calc(15px * var(--escala-fonte));
    font-weight: 700;
    letter-spacing: -.01em;
}

.sidebar .brand strong small {
    font-weight: 500;
    color: var(--sidebar-muted);
    font-size: calc(12px * var(--escala-fonte));
}

.sidebar .brand span {
    display: block;
    font-size: calc(12px * var(--escala-fonte));
    color: var(--sidebar-muted);
    margin-top: 1px;
}

.sidebar .nav-label {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: calc(11px * var(--escala-fonte));
    font-weight: 600;
    color: var(--sidebar-muted);
    margin: 14px 10px 6px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--sidebar-text);
    font-size: calc(14px * var(--escala-fonte));
    transition: background .15s ease, color .15s ease;
}

.sidebar-nav a:hover {
    background: var(--sidebar-hover);
    color: #fff;
}

.sidebar-nav a.active {
    background: var(--sidebar-active);
    color: #fff;
    font-weight: 500;
    box-shadow: inset 3px 0 0 var(--sidebar-marca);
}

.sidebar-nav .nav-icon {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    font-size: calc(16px * var(--escala-fonte));
}

.sidebar-nav .nav-contador {
    margin-left: auto;
    background: #f59e0b;
    color: #1f1300;
    font-size: calc(11px * var(--escala-fonte));
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 7px;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 16px;
}

.sidebar-footer .support {
    border: 1px solid #1f2a44;
    border-radius: 12px;
    padding: 12px 14px;
}

.sidebar-footer .support strong {
    color: #fff;
    font-size: calc(13px * var(--escala-fonte));
    font-weight: 600;
}

.sidebar-footer .support p {
    font-size: calc(12px * var(--escala-fonte));
    line-height: 1.5;
    color: var(--sidebar-muted);
    margin: 4px 0 0;
}

.main {
    min-width: 0;
}

.topbar {
    height: 64px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 30;
}

.topbar .top-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.topbar #seletor-empresa-topo {
    height: 38px;
    max-width: 340px;
    font-weight: 500;
}

.chip-ambiente {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: calc(12px * var(--escala-fonte));
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.chip-ambiente::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

.chip-ambiente-homologacao {
    background: var(--warning-soft);
    color: var(--warning-ink);
    border-color: #fcd34d;
}

.chip-ambiente-producao {
    background: var(--success-soft);
    color: var(--success-ink);
    border-color: #a6e9c0;
}

.menu-btn {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    background: var(--surface);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--text-2);
    font-size: 1.05rem;
}

.menu-btn:hover {
    background: var(--surface-3);
}

.breadcrumb {
    margin: 0;
    font-size: calc(13px * var(--escala-fonte));
    color: var(--muted);
}

.breadcrumb strong {
    color: var(--text);
    font-weight: 600;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    border-radius: 10px;
    cursor: pointer;
}

.user-menu:hover {
    background: var(--surface-2);
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #dbeafe;
    color: var(--primary-ink);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: calc(13px * var(--escala-fonte));
    flex: 0 0 auto;
}

.user-meta {
    line-height: 1.25;
}

.user-meta strong {
    display: block;
    font-size: calc(13px * var(--escala-fonte));
    font-weight: 600;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-meta span {
    font-size: calc(12px * var(--escala-fonte));
    color: var(--muted);
}

.content {
    padding: 28px;
    max-width: 1400px;
    margin: 0 auto;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.page-head h1 {
    margin: 0;
    font-size: calc(26px * var(--escala-fonte));
    letter-spacing: -.02em;
    font-weight: 700;
}

.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 35;
}

@media (max-width: 992px) {
    .app {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        width: var(--sidebar-width);
        transition: left .25s ease;
    }

    .sidebar.open {
        left: 0;
    }

    .mobile-overlay.show {
        display: block;
    }

    .topbar {
        padding: 0 16px;
    }

    .content {
        padding: 20px 16px;
    }

    .user-meta {
        display: none;
    }
}

@media (max-width: 640px) {
    .breadcrumb,
    .chip-ambiente {
        display: none;
    }

    .topbar #seletor-empresa-topo {
        max-width: 190px;
    }
}

/* =============== Menu recolhido (só ícones) — computador =============== */

@media (min-width: 993px) {
    .sidebar {
        transition: padding .2s ease;
    }

    html.menu-recolhido .app {
        grid-template-columns: 72px 1fr;
    }

    html.menu-recolhido .sidebar {
        padding: 20px 12px;
        overflow-x: hidden;
    }

    html.menu-recolhido .sidebar .brand {
        justify-content: center;
        padding: 2px 0 20px;
    }

    html.menu-recolhido .sidebar .brand > div:not(.brand-mark),
    html.menu-recolhido .sidebar-footer {
        display: none;
    }

    /* Rótulo de grupo vira uma linha divisória. */
    html.menu-recolhido .sidebar .nav-label {
        font-size: 0;
        height: 1px;
        margin: 12px 6px;
        background: #1f2a44;
    }

    html.menu-recolhido .sidebar-nav a {
        justify-content: center;
        font-size: 0;
        gap: 0;
        padding: 10px 0;
    }

    html.menu-recolhido .sidebar-nav .nav-icon {
        font-size: calc(18px * var(--escala-fonte));
        width: 22px;
        height: 22px;
    }

    html.menu-recolhido .sidebar-nav .nav-contador {
        display: none;
    }
}

/* =============== Responsivo: cabeçalhos de card, tabelas, topo =============== */

.card-header.d-flex {
    flex-wrap: wrap;
    gap: 10px;
}

.card-header .d-flex {
    flex-wrap: wrap;
}

/* Tabela larga rola dentro do card, sem estourar a página no celular. */
div.dt-container .dt-layout-table > .dt-layout-cell,
div.dt-container [class*="col"]:has(> table.dataTable),
.card-body > .table-responsive {
    overflow-x: auto;
}

@media (max-width: 768px) {
    div.dt-container .dt-layout-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    div.dt-container .dt-search,
    div.dt-container .dt-search input {
        width: 100%;
        min-width: 0;
        margin-left: 0;
    }

    .page-head h1 {
        font-size: calc(22px * var(--escala-fonte));
    }

    .modal-footer .modal-rodape-info {
        display: none;
    }
}

/* =============== KPI (stat) cards =============== */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease;
}

a.stat:hover {
    color: var(--text);
    border-color: #c7d7fe;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 8%, transparent);
}

.stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.stat-label {
    font-size: calc(13px * var(--escala-fonte));
    color: var(--muted);
    font-weight: 500;
}

.stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
    display: grid;
    place-items: center;
    font-size: 1rem;
    flex: 0 0 auto;
}

.stat strong {
    font-size: calc(28px * var(--escala-fonte));
    font-weight: 700;
    letter-spacing: -.02em;
    display: block;
    font-variant-numeric: tabular-nums;
}

.stat small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: calc(12px * var(--escala-fonte));
}

/* =============== Cards =============== */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--text);
}

.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    border-top-left-radius: var(--radius) !important;
    border-top-right-radius: var(--radius) !important;
    padding: 14px 18px;
    font-weight: 600;
    font-size: calc(15px * var(--escala-fonte));
    min-height: 60px;
}

.card-body {
    padding: 18px;
}

.card-footer {
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom-left-radius: var(--radius) !important;
    border-bottom-right-radius: var(--radius) !important;
}

/* =============== Botões =============== */

.btn {
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: calc(16px * var(--escala-controle));
    --bs-btn-font-size: calc(14px * var(--escala-fonte));
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 10px;
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--primary-ring);
    min-height: calc(40px * var(--escala-controle));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn .bi {
    font-size: 1em;
}

.btn-sm {
    --bs-btn-padding-x: calc(12px * var(--escala-controle));
    --bs-btn-font-size: calc(13px * var(--escala-fonte));
    --bs-btn-border-radius: 8px;
    min-height: calc(34px * var(--escala-controle));
}

.btn-lg {
    min-height: calc(46px * var(--escala-controle));
}

.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary-2);
    --bs-btn-hover-bg: var(--primary-2);
    --bs-btn-hover-border-color: var(--primary-ink);
    --bs-btn-active-bg: var(--primary-ink);
    --bs-btn-active-border-color: var(--primary-ink);
    --bs-btn-disabled-bg: #93b4f5;
    --bs-btn-disabled-border-color: #93b4f5;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}

.btn-success {
    --bs-btn-bg: var(--success);
    --bs-btn-border-color: #15803d;
    --bs-btn-hover-bg: #15803d;
    --bs-btn-hover-border-color: #166534;
}

.btn-danger {
    --bs-btn-bg: #d92d20;
    --bs-btn-border-color: var(--danger-ink);
    --bs-btn-hover-bg: var(--danger-ink);
    --bs-btn-hover-border-color: #912018;
}

/* Secundários: fundo branco, borda de campo, texto escuro — legíveis. */
.btn-secondary,
.btn-outline-secondary,
.btn-light {
    --bs-btn-bg: var(--surface);
    --bs-btn-color: var(--text);
    --bs-btn-border-color: var(--field-line);
    --bs-btn-hover-bg: var(--surface-2);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-border-color: #94a3b8;
    --bs-btn-active-bg: var(--surface-3);
    --bs-btn-active-color: var(--text);
    --bs-btn-active-border-color: #94a3b8;
    --bs-btn-disabled-color: #94a3b8;
    --bs-btn-disabled-bg: var(--surface-3);
    --bs-btn-disabled-border-color: var(--line);
}

.btn-outline-primary {
    --bs-btn-bg: var(--surface);
    --bs-btn-color: var(--primary-2);
    --bs-btn-border-color: var(--field-line);
    --bs-btn-hover-bg: var(--primary-soft);
    --bs-btn-hover-color: var(--primary-ink);
    --bs-btn-hover-border-color: #a4bcfd;
    --bs-btn-active-bg: var(--info-soft);
    --bs-btn-active-color: var(--primary-ink);
    --bs-btn-active-border-color: #a4bcfd;
}

.btn-outline-danger {
    --bs-btn-bg: var(--surface);
    --bs-btn-color: var(--danger-ink);
    --bs-btn-border-color: var(--field-line);
    --bs-btn-hover-bg: #fef3f2;
    --bs-btn-hover-color: var(--danger-ink);
    --bs-btn-hover-border-color: #fda29b;
    --bs-btn-active-bg: var(--danger-soft);
    --bs-btn-active-color: var(--danger-ink);
    --bs-btn-active-border-color: #fda29b;
}

.btn-outline-warning {
    --bs-btn-bg: var(--surface);
    --bs-btn-color: var(--warning-ink);
    --bs-btn-border-color: var(--field-line);
    --bs-btn-hover-bg: #fffbeb;
    --bs-btn-hover-color: var(--warning-ink);
    --bs-btn-hover-border-color: #fcd34d;
}

.btn-outline-info,
.btn-outline-dark {
    --bs-btn-bg: var(--surface);
    --bs-btn-color: var(--text-2);
    --bs-btn-border-color: var(--field-line);
    --bs-btn-hover-bg: var(--surface-2);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-border-color: #94a3b8;
}

.btn-outline-success {
    --bs-btn-bg: var(--surface);
    --bs-btn-color: var(--success-ink);
    --bs-btn-border-color: var(--field-line);
    --bs-btn-hover-bg: #ecfdf3;
    --bs-btn-hover-color: var(--success-ink);
    --bs-btn-hover-border-color: #a6e9c0;
}

.btn-link {
    --bs-btn-color: var(--primary-2);
    --bs-btn-hover-color: var(--primary-ink);
    text-decoration: none;
}

.btn-close:focus {
    box-shadow: 0 0 0 3px var(--primary-ring);
}

/* Botões-ícone nas tabelas (ações de linha): 32px, lado a lado. */
table td .btn-sm {
    min-height: calc(32px * var(--escala-controle));
    min-width: calc(32px * var(--escala-controle));
    --bs-btn-padding-x: calc(8px * var(--escala-controle));
    margin: 2px 1px;
}

/* =============== Badges (status em pílula suave) =============== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: calc(12px * var(--escala-fonte));
    line-height: 1.3;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0;
}

.badge[class*="text-bg-"]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    opacity: .8;
    flex: 0 0 auto;
}

.badge.text-bg-success { background-color: var(--success-soft) !important; color: var(--success-ink) !important; }
.badge.text-bg-warning { background-color: var(--warning-soft) !important; color: var(--warning-ink) !important; }
.badge.text-bg-danger { background-color: var(--danger-soft) !important; color: var(--danger-ink) !important; }
.badge.text-bg-primary,
.badge.text-bg-info { background-color: var(--info-soft) !important; color: var(--info-ink) !important; }
.badge.text-bg-secondary,
.badge.text-bg-light { background-color: var(--neutral-soft) !important; color: var(--neutral-ink) !important; }
.badge.text-bg-dark { background-color: #e2e8f0 !important; color: #1e293b !important; }

/* =============== Avisos (alert) =============== */

.alert {
    border-radius: 12px;
    padding: 12px 14px;
    font-size: calc(13.5px * var(--escala-fonte));
}

.alert-success { background: #ecfdf3; border-color: #a6e9c0; color: #14532d; }
.alert-warning { background: #fffbeb; border-color: #fcd34d; color: #78350f; }
.alert-danger { background: #fef3f2; border-color: #fda29b; color: #7a271a; }
.alert-info,
.alert-primary { background: var(--info-soft); border-color: #c7d7fe; color: #1e3a8a; } /* informação é sempre azul, em qualquer paleta */
.alert-secondary { background: var(--surface-2); border-color: var(--line); color: var(--text-2); }

/* =============== Tabelas / DataTables =============== */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: var(--surface-2);
    --bs-table-border-color: var(--line-2);
    margin-bottom: 0;
}

/* Listras desligadas (do Bootstrap e do DataTables, que usa box-shadow):
   linhas separadas só por borda, hover suave. */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: transparent;
    --bs-table-color-type: var(--text);
}

table.dataTable > tbody > tr > *,
table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > *,
table.table.dataTable > tbody > tr.selected > * {
    box-shadow: none !important;
}

table.dataTable thead th,
.table thead th {
    background: var(--surface-2) !important;
    color: var(--muted);
    font-size: calc(12px * var(--escala-fonte));
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    border-bottom: 1px solid var(--line) !important;
    padding: 10px 12px;
    white-space: nowrap;
}

table.dataTable tbody td,
.table tbody td {
    font-size: calc(13.5px * var(--escala-fonte));
    padding: 11px 12px;
    vertical-align: middle;
    border-bottom-color: var(--line-2);
}

table.dataTable tbody tr:hover > *,
.table tbody tr:hover > * {
    background: var(--surface-2);
}

/* Coluna de ações (última): nunca quebra os botões em pilha. */
table.dataTable tbody td:last-child:has(.btn),
.table tbody td:last-child:has(.btn) {
    white-space: nowrap;
    width: 1%;
    text-align: right;
}

.table-bordered > :not(caption) > * > * {
    border-width: 0 0 1px;
}

.table-bordered {
    border: 1px solid var(--line);
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

/* Controles do DataTables (busca, itens por página, paginação). */
div.dt-container {
    font-size: calc(13px * var(--escala-fonte));
    color: var(--muted);
}

div.dt-container .dt-search input,
div.dt-container .dt-length select {
    height: calc(36px * var(--escala-controle));
    border: 1px solid var(--field-line);
    border-radius: 9px;
    padding: 0 calc(10px * var(--escala-controle));
    font-size: calc(13px * var(--escala-fonte));
    color: var(--text);
    background-color: var(--surface);
}

div.dt-container .dt-length select {
    padding-right: 30px;
    margin-right: 6px;
}

div.dt-container .dt-search input {
    min-width: 240px;
    margin-left: 8px;
}

div.dt-container .dt-search input:focus,
div.dt-container .dt-length select:focus {
    outline: 0;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}

div.dt-container .dt-paging .pagination {
    gap: 4px;
}

div.dt-container .dt-paging .page-link {
    min-width: calc(34px * var(--escala-controle));
    height: calc(34px * var(--escala-controle));
    display: grid;
    place-items: center;
    border-radius: 8px !important;
    border: 1px solid var(--line);
    color: var(--text-2);
    font-size: calc(13px * var(--escala-fonte));
    padding: 0 calc(8px * var(--escala-controle));
}

div.dt-container .dt-paging .page-item.active .page-link {
    background: var(--text);
    border-color: var(--text);
    color: #fff;
}

div.dt-container .dt-paging .page-item.disabled .page-link {
    color: #94a3b8;
    background: var(--surface);
}

.dt-buttons.btn-group {
    gap: 6px;
}

.dt-buttons .btn {
    border-radius: 8px !important;
    min-height: calc(34px * var(--escala-controle));
    font-size: calc(13px * var(--escala-fonte));
    --bs-btn-padding-x: calc(10px * var(--escala-controle));
}

/* =============== Formulários =============== */

.form-label {
    font-weight: 600;
    font-size: calc(13px * var(--escala-fonte));
    color: #1e293b;
    margin-bottom: 6px;
}

/* Asterisco automático em todo campo obrigatório. */
.form-label:has(+ [required])::after,
.form-label:has(+ .input-group [required])::after,
.form-label:has(+ select[required])::after {
    content: " *";
    color: var(--danger-ink);
    font-weight: 600;
}

.form-control,
.form-select {
    min-height: calc(40px * var(--escala-controle));
    border-radius: var(--radius-field);
    border-color: var(--field-line);
    font-size: calc(14px * var(--escala-fonte));
    color: var(--text);
}

textarea.form-control {
    min-height: calc(80px * var(--escala-controle));
}

.form-control-sm,
.form-select-sm {
    min-height: calc(34px * var(--escala-controle));
    font-size: calc(13px * var(--escala-fonte));
    border-radius: 8px;
}

.form-control::placeholder {
    color: #8592a6;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}

.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
    background-color: var(--surface-3);
    color: var(--text-2);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--danger);
}

.form-text {
    font-size: calc(12px * var(--escala-fonte));
    color: var(--muted);
    margin-top: 5px;
}

.form-check-input {
    width: 1.1em;
    height: 1.1em;
    border-color: #94a3b8;
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--primary-ring);
}

.form-switch .form-check-input {
    width: 2.3em;
    height: 1.3em;
}

.form-check-label {
    color: var(--text);
}

.input-group > .btn {
    border-color: var(--field-line);
}

/* select2 com a mesma cara (e altura) dos outros campos. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 40px;
    border: 1px solid var(--field-line);
    border-radius: var(--radius-field);
    background-color: var(--surface);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
    padding-left: 12px;
    color: var(--text);
    font-size: calc(14px * var(--escala-fonte));
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #8592a6;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
    right: 6px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--surface-3);
}

.select2-dropdown {
    border-color: var(--field-line);
    border-radius: var(--radius-field);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
    overflow: hidden;
    font-size: calc(14px * var(--escala-fonte));
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--primary);
}

.select2-search--dropdown .select2-search__field {
    border-radius: 8px;
    border-color: var(--field-line) !important;
    min-height: 34px;
}

/* =============== Abas (nav-tabs) — sublinhado, como no mockup =============== */

.nav-tabs {
    border-bottom: 1px solid var(--line);
    column-gap: 22px;
    row-gap: 4px;
    flex-wrap: wrap;
}

/* No celular as abas não quebram linha: rolam de lado. */
@media (max-width: 768px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        column-gap: 18px;
        scrollbar-width: none;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
    }
}

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    padding: 4px 0 11px;
    color: var(--muted);
    font-size: calc(14px * var(--escala-fonte));
    font-weight: 500;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.nav-tabs .nav-link:hover {
    color: var(--text);
    border-bottom-color: var(--field-line);
}

.nav-tabs .nav-link.active {
    color: var(--text);
    font-weight: 600;
    background: transparent;
    border-bottom-color: var(--primary);
}

.nav-tabs .nav-link .bi {
    color: inherit;
    font-size: calc(15px * var(--escala-fonte));
}

/* =============== Modais =============== */

.modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    padding: 18px 22px;
    border-bottom-color: var(--line);
}

.modal-title {
    font-size: calc(18px * var(--escala-fonte));
    font-weight: 600;
    letter-spacing: -.01em;
}

.modal-body {
    padding: 20px 22px;
}

.modal-footer {
    padding: 14px 22px;
    border-top-color: var(--line);
    gap: 8px;
}

.modal-footer > * {
    margin: 0;
}

/* Título de seção dentro de modal/card (os <h6 class="text-muted"> das views). */
.modal-body h6,
.card-body h6 {
    font-size: calc(14px * var(--escala-fonte));
    font-weight: 600;
    color: var(--text) !important;
    margin: 6px 0 12px;
}

.modal-body h6:not(:first-child) {
    padding-top: 16px;
    border-top: 1px solid var(--line-2);
}

/*
 * Todo modal centralizado verticalmente, sem precisar da classe
 * modal-dialog-centered em cada view.
 */
.modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - var(--bs-modal-margin-y, .5rem) * 2);
}

/* Corpo do modal nunca cresce além da tela — só o meio rola. */
.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

.modal-backdrop.show {
    opacity: .55;
    background-color: #0f172a;
}

.dropdown-menu {
    border-color: var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
    padding: 6px;
    font-size: calc(14px * var(--escala-fonte));
}

.dropdown-item {
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--text);
}

.dropdown-item:active {
    background: var(--primary);
}

.list-group-item {
    border-color: var(--line-2);
    color: var(--text);
}

/* =============== Modais: cabeçalho de entidade, seções, resumo =============== */

.modal-cabecalho-entidade {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.entidade-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary-2);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: calc(15px * var(--escala-fonte));
    flex: 0 0 auto;
}

.entidade-avatar-redondo {
    border-radius: 999px;
    background: var(--success-soft);
    color: var(--success-ink);
}

.modal-subtitulo {
    font-size: calc(13px * var(--escala-fonte));
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
}

.modal-rodape-info {
    margin-right: auto !important;
    font-size: calc(12px * var(--escala-fonte));
    color: var(--muted);
}

/* Empresa: menu de seções à esquerda + conteúdo que rola. */
.modal-body-secoes {
    display: flex;
    padding: 0;
    overflow: hidden;
    max-height: calc(100vh - 200px);
    min-height: 460px;
}

.modal-secoes {
    width: 240px;
    flex: 0 0 auto;
    background: var(--surface-2);
    border-right: 1px solid var(--line);
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.modal-secoes .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-2);
    font-size: calc(14px * var(--escala-fonte));
    font-weight: 500;
}

.modal-secoes .nav-link:hover {
    background: var(--surface);
    color: var(--text);
}

.modal-secoes .nav-link.active {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--shadow);
}

.modal-secoes .nav-link .bi {
    font-size: calc(16px * var(--escala-fonte));
    color: var(--subtle);
}

.modal-secoes .nav-link.active .bi {
    color: var(--primary);
}

.modal-secoes .nav-link > span:first-of-type {
    flex: 1;
}

.secao-status {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: calc(11px * var(--escala-fonte));
    font-weight: 700;
    flex: 0 0 auto;
}

.secao-status.pendente {
    background: #f59e0b;
    color: #1f1300;
}

.secao-status.ok::before {
    content: "";
    width: 10px;
    height: 6px;
    border-left: 2.4px solid var(--success);
    border-bottom: 2.4px solid var(--success);
    transform: rotate(-45deg) translate(1px, -1px);
}

.modal-secoes-conteudo {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 20px 24px 8px;
}

.secao-cabecalho {
    margin-bottom: 16px;
}

.secao-cabecalho h3,
.form-secao-titulo h3 {
    margin: 0;
    font-size: calc(16px * var(--escala-fonte));
    font-weight: 600;
    color: var(--text);
}

.secao-cabecalho p,
.form-secao-titulo p {
    margin: 3px 0 0;
    font-size: calc(13px * var(--escala-fonte));
    color: var(--muted);
}

/* Cliente: seções com título à esquerda e campos à direita. */
.form-secao {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 20px;
    padding: 16px 0 4px;
    border-bottom: 1px solid var(--line-2);
}

.form-secao:first-of-type {
    padding-top: 2px;
}

.form-secao:last-of-type {
    border-bottom: 0;
}

.form-secao-titulo h3 {
    font-size: calc(14px * var(--escala-fonte));
}

/* Opção com explicação (interruptor + texto), clicável inteira. */
.cartao-opcao {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    background: var(--surface);
    margin-bottom: 12px;
}

.cartao-opcao:has(input:checked) {
    border-color: #a4bcfd;
    background: var(--primary-soft);
}

.cartao-opcao strong {
    font-weight: 600;
    color: var(--text);
}

.cartao-opcao .form-check-input {
    margin-top: 2px;
}

/* Contrato: conteúdo + resumo fixo à direita. */
.modal-body-com-resumo {
    display: flex;
    gap: 0;
    padding: 0;
    overflow: hidden;
    max-height: calc(100vh - 200px);
}

.modal-coluna-principal {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 18px 22px;
}

.modal-resumo {
    width: 280px;
    flex: 0 0 auto;
    background: var(--surface-2);
    border-left: 1px solid var(--line);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

.modal-resumo.d-none {
    display: none !important;
}

.resumo-rotulo {
    font-size: calc(12px * var(--escala-fonte));
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.resumo-valor {
    font-size: calc(26px * var(--escala-fonte));
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.resumo-detalhe {
    font-size: calc(13px * var(--escala-fonte));
    color: var(--muted);
}

.resumo-alerta {
    border: 1px solid #fcd34d;
    background: #fffbeb;
    color: #78350f;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: calc(13px * var(--escala-fonte));
}

.resumo-alerta.d-none {
    display: none !important;
}

.resumo-alerta .btn {
    align-self: flex-start;
}

.resumo-lista {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    font-size: calc(13px * var(--escala-fonte));
}

.resumo-lista dt {
    color: var(--muted);
    font-weight: 500;
}

.resumo-lista dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--text);
}

html[data-theme="dark"] .resumo-alerta {
    background: rgba(217, 119, 6, .14);
    border-color: rgba(217, 119, 6, .45);
    color: #fde68a;
}

@media (max-width: 992px) {
    .modal-body-secoes,
    .modal-body-com-resumo {
        flex-direction: column;
        overflow-y: auto;
        min-height: 0;
    }

    .modal-secoes {
        width: auto;
        flex-direction: row;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 8px;
    }

    .modal-secoes .nav-link {
        width: auto;
        white-space: nowrap;
    }

    .modal-secoes-conteudo,
    .modal-coluna-principal {
        overflow: visible;
    }

    .modal-resumo {
        width: auto;
        border-left: 0;
        border-top: 1px solid var(--line);
        overflow: visible;
    }

    .form-secao {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* =============== Autenticação (login/registro/convite) =============== */

.auth-page {
    background: var(--bg);
    min-height: 100vh;
    margin: 0;
}

.auth-split {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.auth-marca {
    background: var(--sidebar);
    color: var(--sidebar-text);
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.auth-marca .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.auth-marca .brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--primary);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: calc(20px * var(--escala-fonte));
}

.auth-marca .brand strong {
    font-size: calc(18px * var(--escala-fonte));
    font-weight: 700;
}

.auth-marca h2 {
    color: #fff;
    font-size: calc(32px * var(--escala-fonte));
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: auto 0 0;
    max-width: 460px;
}

.auth-marca ul {
    list-style: none;
    padding: 0;
    margin: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 460px;
}

.auth-marca li {
    display: flex;
    gap: 12px;
    font-size: calc(15px * var(--escala-fonte));
}

.auth-marca li .bi {
    color: #60a5fa;
    font-size: calc(18px * var(--escala-fonte));
}

.auth-marca small {
    color: var(--sidebar-muted);
    font-size: calc(12px * var(--escala-fonte));
}

.auth-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.auth-form-inner {
    width: 100%;
    max-width: 400px;
}

.auth-card {
    border-radius: 16px;
}

.auth-form .card-title {
    font-size: calc(22px * var(--escala-fonte));
    font-weight: 700;
    letter-spacing: -.01em;
}

@media (max-width: 900px) {
    .auth-split {
        grid-template-columns: 1fr;
    }

    .auth-marca {
        padding: 24px;
        gap: 12px;
    }

    .auth-marca h2,
    .auth-marca ul,
    .auth-marca small {
        display: none;
    }
}

.auth-legal {
    margin: 16px 0 0;
    text-align: center;
    font-size: calc(12px * var(--escala-fonte));
    color: var(--subtle);
}

.auth-legal a {
    color: var(--muted);
}

.auth-legal span {
    margin: 0 6px;
}

/* Tela de aceite dos termos (/Legal/Aceitar) */
.lista-documentos-legais {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lista-documentos-legais a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    color: var(--text);
    text-decoration: none;
}

.lista-documentos-legais a:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.lista-documentos-legais a span {
    flex: 1;
    font-weight: 600;
}

.lista-documentos-legais small {
    display: block;
    font-weight: 400;
    color: var(--subtle);
}

/* =============== Termos de uso e Política de privacidade (páginas públicas) =============== */

.legal-page {
    background: var(--bg);
    min-height: 100vh;
    margin: 0;
}

.legal-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 24px;
    background: var(--sidebar);
}

.legal-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
}

.legal-marca:hover {
    color: #fff;
}

.legal-marca-mark {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--primary);
    display: grid;
    place-items: center;
    font-weight: 700;
}

.legal-nav {
    display: flex;
    gap: 16px;
}

.legal-nav a {
    color: var(--sidebar-text);
    text-decoration: none;
    font-weight: 500;
}

.legal-nav a.ativo,
.legal-nav a:hover {
    color: #fff;
}

.legal-doc {
    max-width: 800px;
    margin: 32px auto;
    padding: 40px 48px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: calc(15px * var(--escala-fonte));
    line-height: 1.65;
    color: var(--text-2);
}

.legal-doc h1 {
    font-size: calc(28px * var(--escala-fonte));
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
    margin-bottom: 4px;
}

.legal-doc h2 {
    font-size: calc(18px * var(--escala-fonte));
    font-weight: 700;
    color: var(--text);
    margin: 32px 0 10px;
}

.legal-doc h3 {
    font-size: calc(15px * var(--escala-fonte));
    font-weight: 700;
    color: var(--text);
    margin: 18px 0 8px;
}

.legal-versao {
    color: var(--subtle);
    font-size: calc(13px * var(--escala-fonte));
    margin-bottom: 24px;
}

.legal-resumo {
    background: var(--primary-soft);
    border-radius: var(--radius-field);
    padding: 14px 16px;
    color: var(--text);
}

.legal-doc ul {
    padding-left: 20px;
}

.legal-doc li {
    margin-bottom: 6px;
}

.legal-tabela {
    font-size: calc(14px * var(--escala-fonte));
}

.legal-tabela th {
    white-space: nowrap;
}

.legal-rodape {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 800px;
    margin: 0 auto 32px;
    padding: 0 8px;
    font-size: calc(13px * var(--escala-fonte));
    color: var(--subtle);
}

@media (max-width: 700px) {
    .legal-doc {
        margin: 16px;
        padding: 24px 16px;
    }

    .legal-rodape {
        margin: 0 16px 24px;
        padding: 0;
    }
}

/* Detalhe da nota e resumo da emissão */
.detalhe-bloco {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.detalhe-bloco:first-child {
    padding-top: 0;
}

.detalhe-bloco h6 {
    font-size: calc(12px * var(--escala-fonte));
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--subtle);
    margin-bottom: 8px;
}

.detalhe-bloco dd,
.resumo-emissao dd {
    margin-bottom: 4px;
}

.descricao-nota {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    background: var(--surface-2);
    color: var(--text);
}

/* Rejeição da SEFIN explicada (detalhe da nota) */
.rejeicao-explicada {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-field);
    background: var(--warning-soft);
    color: var(--warning-ink);
    font-size: calc(13px * var(--escala-fonte));
}

.rejeicao-explicada a {
    color: inherit;
    font-weight: 600;
}

/* =============== Toast de feedback (substitui alert() nativo) =============== */

.toast-container-nfse {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast-nfse {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0f172a;
    color: #fff;
    padding: 12px 34px 12px 14px;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .2);
    font-size: calc(13.5px * var(--escala-fonte));
    max-width: 380px;
    overflow: hidden;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: auto;
}

.toast-nfse.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-nfse.hide {
    opacity: 0;
    transform: translateX(24px);
}

.toast-nfse.toast-erro {
    background: #7a271a;
}

.toast-nfse-icone {
    font-size: calc(16px * var(--escala-fonte));
    flex-shrink: 0;
}

.toast-nfse-texto {
    flex: 1;
}

.toast-nfse-fechar {
    position: absolute;
    top: 6px;
    right: 6px;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .75);
    font-size: calc(12px * var(--escala-fonte));
    line-height: 1;
    padding: 5px;
    cursor: pointer;
    border-radius: 6px;
}

.toast-nfse-fechar:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.toast-nfse-barra {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, .35);
    transform: scaleX(1);
    transform-origin: left;
    animation-name: toast-nfse-progresso;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes toast-nfse-progresso {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* Quadro de resultado com fechamento automático (mostrarQuadroResultado em site.js). */
.quadro-resultado {
    overflow: hidden;
}

.quadro-resultado-barra {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: currentColor;
    opacity: .35;
    transition: width .1s linear;
}

/* =============== Rodapé de auditoria injetado na impressão =============== */

.rodape-exportacao {
    margin-top: 1.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid #ccc;
    font-size: 0.75rem;
    color: #666;
}

/* Botão de alternar tema — sol/lua conforme o tema ativo (ver JS) */
.btn-tema {
    border: 1px solid var(--line);
    background: var(--surface);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--text-2);
    font-size: 1.05rem;
    display: grid;
    place-items: center;
}

.btn-tema:hover {
    background: var(--surface-2);
}

/* Tela Sobre — visualizador do CHANGELOG.md */
.changelog-viewer {
    max-height: 65vh;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 0.875rem;
}

/* Tela Logs — visualizador dos logs de erro */
.log-viewer {
    max-height: 70vh;
    overflow-y: auto;
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 1rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.log-viewer .linha-erro { color: #f47174; }
.log-viewer .linha-aviso { color: #dcdcaa; }

/* =============== Tema escuro =============== */
/*
 * data-theme="dark" no <html> (botão no topo). Redefine as variáveis —
 * quase tudo acima lê delas — e cobre o que usa cor fixa.
 */
html[data-theme="dark"] {
    --bg: #0b1220;
    --surface: #131c2e;
    --surface-2: #182236;
    --surface-3: #1d2840;
    --text: #e2e8f0;
    --text-2: #cbd5e1;
    --muted: #a3b1c6;
    --subtle: #8a99ae;
    --line: #26324a;
    --line-2: #1f2a40;
    --field-line: #33415c;
    --primary-soft: rgba(37, 99, 235, .18);
    --success-soft: rgba(22, 163, 74, .18);
    --success-ink: #86efac;
    --warning-soft: rgba(217, 119, 6, .2);
    --warning-ink: #fcd34d;
    --danger-soft: rgba(220, 38, 38, .2);
    --danger-ink: #fca5a5;
    --info-soft: rgba(37, 99, 235, .22);
    --info-ink: #93c5fd;
    --neutral-soft: rgba(148, 163, 184, .16);
    --neutral-ink: #cbd5e1;
    --sidebar: #070c17;
    color-scheme: dark;
}

html[data-theme="dark"] .form-label,
html[data-theme="dark"] .modal-body h6,
html[data-theme="dark"] .card-body h6 {
    color: var(--text) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] div.dt-container .dt-search input,
html[data-theme="dark"] div.dt-container .dt-length select {
    background-color: var(--surface-2);
    border-color: var(--field-line);
    color: var(--text);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text);
}

html[data-theme="dark"] .select2-dropdown {
    background: var(--surface);
    color: var(--text);
}

html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--surface);
    color: var(--text);
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html[data-theme="dark"] .alert-success { background: rgba(22, 163, 74, .14); border-color: rgba(22, 163, 74, .4); color: #bbf7d0; }
html[data-theme="dark"] .alert-warning { background: rgba(217, 119, 6, .14); border-color: rgba(217, 119, 6, .45); color: #fde68a; }
html[data-theme="dark"] .alert-danger { background: rgba(220, 38, 38, .14); border-color: rgba(220, 38, 38, .45); color: #fecaca; }
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-primary { background: var(--info-soft); border-color: rgba(37, 99, 235, .45); color: var(--info-ink); }

html[data-theme="dark"] .badge.text-bg-dark { background-color: var(--neutral-soft) !important; color: var(--neutral-ink) !important; }

html[data-theme="dark"] .chip-ambiente-homologacao { border-color: rgba(217, 119, 6, .5); }
html[data-theme="dark"] .chip-ambiente-producao { border-color: rgba(22, 163, 74, .5); }

html[data-theme="dark"] .avatar {
    background: color-mix(in srgb, var(--primary) 25%, transparent);
    color: var(--link);
}

html[data-theme="dark"] div.dt-container .dt-paging .page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
}

html[data-theme="dark"] div.dt-container .dt-paging .page-link {
    background: var(--surface);
    color: var(--text-2);
}

html[data-theme="dark"] .list-group-item {
    background: var(--surface);
}

/* =============== Site público: página inicial e erros da NFS-e (_SiteLayout) =============== */

.site-page {
    background: var(--surface);
    min-height: 100vh;
    margin: 0;
    font-size: calc(15px * var(--escala-fonte));
    color: var(--text-2);
}

.site-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.site-topo {
    background: var(--sidebar);
    position: sticky;
    top: 0;
    z-index: 10;
}

.site-topo-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

.site-nav a:not(.btn) {
    color: var(--sidebar-text);
    text-decoration: none;
    font-weight: 500;
}

.site-nav a:not(.btn):hover,
.site-nav a.ativo {
    color: #fff;
}

.site-hero {
    background: linear-gradient(180deg, var(--primary-soft) 0%, var(--surface) 100%);
    padding: 72px 0 56px;
}

.site-hero-inner {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 48px;
    align-items: center;
}

.site-selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: calc(13px * var(--escala-fonte));
    font-weight: 500;
    color: var(--primary-ink);
}

.site-hero h1 {
    font-size: calc(44px * var(--escala-fonte));
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--text);
    margin: 20px 0 16px;
}

.site-hero-sub {
    font-size: calc(18px * var(--escala-fonte));
    line-height: 1.6;
    color: var(--muted);
    max-width: 560px;
}

.site-hero-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.site-hero-nota {
    margin-top: 14px;
    font-size: calc(13px * var(--escala-fonte));
    color: var(--subtle);
}

.site-hero-cartao {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 20px 48px rgba(15, 23, 42, .10);
    padding: 20px;
}

.site-demo-linha,
.site-demo-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
}

.site-demo-linha {
    font-weight: 600;
    color: var(--text);
    border-bottom: 1px solid var(--line);
}

.site-demo-ok {
    color: var(--success-ink);
    font-weight: 500;
    font-size: calc(13px * var(--escala-fonte));
}

.site-demo-item {
    border-bottom: 1px solid var(--line-2);
}

.site-demo-item strong {
    font-weight: 500;
    color: var(--text);
}

.site-demo-rodape {
    padding-top: 12px;
    font-size: calc(13px * var(--escala-fonte));
    color: var(--muted);
}

.site-secao {
    padding: 72px 0;
}

.site-secao-alt {
    background: var(--bg);
}

.site-secao h2 {
    font-size: calc(30px * var(--escala-fonte));
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
    margin-bottom: 8px;
}

.site-secao-sub {
    font-size: calc(17px * var(--escala-fonte));
    color: var(--muted);
    margin-bottom: 36px;
}

.site-grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.site-recurso {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    background: var(--surface);
}

.site-recurso > i {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: calc(20px * var(--escala-fonte));
}

.site-recurso h3 {
    font-size: calc(17px * var(--escala-fonte));
    font-weight: 600;
    color: var(--text);
    margin: 14px 0 6px;
}

.site-recurso p {
    margin: 0;
    color: var(--muted);
}

.site-passos {
    list-style: none;
    counter-reset: passo;
    padding: 0;
    margin: 28px 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.site-passos li {
    counter-increment: passo;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.site-passos li::before {
    content: counter(passo);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    margin-bottom: 6px;
}

.site-passos strong {
    color: var(--text);
}

.site-passos span {
    color: var(--muted);
    font-size: calc(14px * var(--escala-fonte));
}

.site-planos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 360px));
    gap: 24px;
}

.site-plano {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    display: flex;
    flex-direction: column;
}

.site-plano-destaque {
    border: 2px solid var(--primary);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--primary) 12%, transparent);
}

.site-plano h3 {
    font-size: calc(20px * var(--escala-fonte));
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.site-plano-para {
    color: var(--muted);
    margin: 4px 0 16px;
}

.site-plano-preco {
    margin: 0;
    color: var(--text);
}

.site-plano-preco strong {
    font-size: calc(36px * var(--escala-fonte));
    font-weight: 700;
    letter-spacing: -.02em;
}

.site-plano-preco small {
    color: var(--muted);
}

.site-preco-de {
    color: var(--subtle);
    text-decoration: line-through;
    margin-right: 4px;
}

.site-plano-fundador {
    font-size: calc(13px * var(--escala-fonte));
    font-weight: 600;
    color: var(--success-ink);
    margin: 2px 0 16px;
}

.site-plano ul {
    padding-left: 20px;
    margin-bottom: 24px;
    flex: 1;
}

.site-plano li {
    margin-bottom: 6px;
}

.site-planos-3 {
    grid-template-columns: repeat(3, minmax(0, 320px));
}

.site-precos-grupo {
    font-size: calc(20px * var(--escala-fonte));
    font-weight: 700;
    color: var(--text);
    margin: 32px 0 8px;
}

.site-titulo-pagina {
    font-size: calc(32px * var(--escala-fonte));
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
    margin-bottom: 8px;
}

.site-regras-teste {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 8px 0 24px;
    max-width: 1100px;
}

.site-regras-teste > div {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    padding: 14px 16px;
    font-size: calc(14px * var(--escala-fonte));
    color: var(--muted);
}

.site-regras-teste i {
    color: var(--primary);
    font-size: calc(18px * var(--escala-fonte));
    line-height: 1.2;
}

.site-regras-teste strong {
    color: var(--text);
}

.site-comparacao {
    max-width: 960px;
    background: var(--surface);
}

.site-comparacao th[scope="row"] {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.site-comparacao td:last-child {
    color: var(--text);
}

.site-comparacao td:last-child i {
    color: var(--success-ink);
    margin-right: 4px;
}

.site-planos-nota {
    margin-top: 20px;
    font-size: calc(13px * var(--escala-fonte));
    color: var(--subtle);
    max-width: 744px;
}

.site-faq details {
    max-width: 800px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    padding: 16px 20px;
    margin-bottom: 12px;
}

.site-faq summary {
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}

.site-faq details p {
    margin: 10px 0 0;
    color: var(--muted);
}

.site-cta {
    background: var(--primary);
    color: #fff;
    padding: 56px 0;
}

.site-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.site-cta h2 {
    color: #fff;
    font-size: calc(26px * var(--escala-fonte));
    font-weight: 700;
    margin: 0;
    max-width: 720px;
}

.site-rodape {
    background: var(--sidebar);
    color: var(--sidebar-muted);
    padding: 40px 0 24px;
    font-size: calc(14px * var(--escala-fonte));
}

.site-rodape-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}

.site-rodape-inner p {
    margin: 10px 0 0;
    max-width: 360px;
}

.site-rodape-inner nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.site-rodape a:not(.site-marca) {
    color: var(--sidebar-text);
    text-decoration: none;
}

.site-rodape a:not(.site-marca):hover {
    color: #fff;
}

.site-rodape-final {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--sidebar-active);
    font-size: calc(12px * var(--escala-fonte));
}

/* Erros da NFS-e */

.site-trilha {
    font-size: calc(13px * var(--escala-fonte));
    color: var(--subtle);
    margin-bottom: 16px;
}

.site-trilha a {
    color: var(--muted);
}

.site-erros h1,
.site-erro h1 {
    font-size: calc(32px * var(--escala-fonte));
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
}

.site-erros-sub {
    max-width: 760px;
}

.site-busca {
    position: relative;
    max-width: 640px;
    margin-bottom: 8px;
}

.site-busca > i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--subtle);
}

.site-busca input {
    padding-left: 44px;
}

.site-busca-vazia {
    color: var(--muted);
}

.site-erros-grupo {
    margin-top: 36px;
}

.site-erros-grupo h2 {
    font-size: calc(20px * var(--escala-fonte));
}

.site-erros-grupo h2 small {
    font-size: calc(14px * var(--escala-fonte));
    color: var(--subtle);
    font-weight: 500;
}

.site-erros-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--line);
}

.site-erros-lista li a {
    display: flex;
    gap: 16px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--line-2);
    text-decoration: none;
    color: var(--text-2);
}

.site-erros-lista li a:hover {
    background: var(--surface-2);
}

.site-erros-lista strong {
    color: var(--primary-ink);
    min-width: 56px;
}

.site-erro-inner {
    max-width: 800px;
}

.site-erro-codigo {
    display: inline-block;
    background: var(--danger-soft);
    color: var(--danger-ink);
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: 12px;
}

.site-erro-bloco {
    margin-top: 32px;
}

.site-erro-bloco h2 {
    font-size: calc(20px * var(--escala-fonte));
}

.site-erro-oficial {
    border-left: 4px solid var(--line);
    padding: 8px 16px;
    margin: 12px 0 20px;
    color: var(--text);
    background: var(--surface-2);
}

.site-erro-dados {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 20px;
    margin: 0;
}

.site-erro-dados dt {
    font-weight: 600;
    color: var(--text);
}

.site-erro-dados dd {
    margin: 0;
}

.site-erro-obs {
    font-size: calc(13px * var(--escala-fonte));
    color: var(--subtle);
}

.site-erro-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
    padding: 20px 24px;
    background: var(--primary-soft);
    border-radius: var(--radius);
}

.site-erro-cta p {
    margin: 4px 0 0;
    color: var(--muted);
}

@media (max-width: 900px) {
    .site-hero-inner,
    .site-grade,
    .site-passos {
        grid-template-columns: 1fr;
    }

    .site-hero-cartao {
        display: none;
    }

    .site-planos,
    .site-planos-3,
    .site-regras-teste {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .site-container {
        padding: 0 16px;
    }

    .site-nav {
        gap: 12px;
    }

    .site-nav-opcional {
        display: none;
    }

    .site-hero {
        padding: 40px 0 32px;
    }

    .site-hero h1 {
        font-size: calc(32px * var(--escala-fonte));
    }

    .site-secao {
        padding: 48px 0;
    }

    .site-secao h2 {
        font-size: calc(24px * var(--escala-fonte));
    }

    .site-erros h1,
    .site-erro h1 {
        font-size: calc(24px * var(--escala-fonte));
    }

    .site-erros-lista li a {
        flex-direction: column;
        gap: 2px;
    }

    .site-erro-dados {
        grid-template-columns: 1fr;
    }

    .site-erro-dados dd {
        margin-bottom: 8px;
    }
}

/* "Primeiros passos" do painel (Home) */

.onboarding {
    margin-bottom: 20px;
    border-color: var(--primary);
}

.onboarding-progresso {
    height: 6px;
    margin-bottom: 16px;
}

.onboarding-passos {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.onboarding-passos li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--muted);
}

.onboarding-passos li > i {
    font-size: calc(18px * var(--escala-fonte));
    line-height: 1.2;
}

.onboarding-passos li.concluido strong {
    color: var(--subtle);
    text-decoration: line-through;
    font-weight: 500;
}

.onboarding-passos li.atual {
    background: var(--primary-soft);
    border-radius: var(--radius-field);
    padding: 12px;
    color: var(--text-2);
}

.onboarding-passos li.atual strong {
    color: var(--text);
}

.onboarding-passos li p {
    margin: 4px 0 8px;
}

.onboarding-ok {
    color: var(--success);
}

.onboarding-proximo {
    color: var(--primary);
}

.onboarding-pendente {
    color: var(--field-line);
}

.onboarding-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* Páginas de ajuda do site público */

.site-ajuda ul,
.site-ajuda ol {
    padding-left: 22px;
}

.site-ajuda li {
    margin-bottom: 8px;
}

.site-ajuda-sub {
    font-size: calc(16px * var(--escala-fonte));
    font-weight: 600;
    color: var(--text);
    margin: 20px 0 8px;
}

.site-ajuda kbd {
    background: var(--surface-3);
    color: var(--text);
    border: 1px solid var(--line);
    font-size: calc(12px * var(--escala-fonte));
}

.sidebar-footer .support a {
    color: var(--sidebar-text);
    text-decoration: none;
}

.sidebar-footer .support a:hover {
    color: #fff;
    text-decoration: underline;
}


/* =============== Aparência (painel do topo) =============== */
/*
 * O <html> traz data-paleta (cores da conta, escolhidas pelo administrador),
 * data-fonte e data-densidade (de cada usuário) — ver _Layout e aparencia.js.
 * Tamanhos: todo font-size do arquivo é "Npx * --escala-fonte"; altura e
 * espaçamento de botões e campos são "Npx * --escala-controle".
 * Paletas: só redefinem variáveis; todas passam no contraste WCAG 4,5:1
 * (texto branco no botão, link no fundo claro e no escuro).
 */
:root {
    --escala-fonte: 1;
    --escala-controle: 1;
    --link: var(--primary-2);
    --link-hover: var(--primary-ink);
    --sidebar-marca: #60a5fa;
}

/* Bootstrap mede em rem: a raiz acompanha a escala do texto. */
html { font-size: calc(16px * var(--escala-fonte)); }

html[data-fonte="p"] { --escala-fonte: .92; }
html[data-fonte="g"] { --escala-fonte: 1.08; }
html[data-fonte="gg"] { --escala-fonte: 1.16; }

html[data-densidade="compacto"] { --escala-controle: .86; }
html[data-densidade="confortavel"] { --escala-controle: 1.14; }

/* Link legível no escuro (antes usava o mesmo azul do claro). */
html[data-theme="dark"] { --link: #93c5fd; --link-hover: #bfdbfe; --bs-link-color: #93c5fd; --bs-link-hover-color: #bfdbfe; }

html[data-paleta="marinho"] {
    --sidebar-marca: #a5b4fc;
    --primary: #1e3a8a; --primary-2: #1e3a8a; --primary-ink: #172554; --primary-soft: #e8edf8;
    --primary-ring: rgba(30, 58, 138, .18);
    --sidebar: #0a1630; --sidebar-hover: #12224a; --sidebar-active: #1a2d5e;
    --link: #1e3a8a; --link-hover: #172554;
    --bs-primary: #1e3a8a; --bs-primary-rgb: 30, 58, 138; --bs-link-color: #1e3a8a; --bs-link-hover-color: #172554;
}
html[data-paleta="marinho"][data-theme="dark"] {
    --primary: #3b5bdb; --primary-2: #2f4bbf; --primary-ink: #a5b4fc;
    --primary-soft: color-mix(in srgb, #3b5bdb 20%, transparent);
    --primary-ring: color-mix(in srgb, #3b5bdb 35%, transparent);
    --sidebar: #060e20; --sidebar-hover: #0d1a38; --sidebar-active: #14254a;
    --link: #a5b4fc; --link-hover: #a5b4fc;
    --bs-primary: #3b5bdb; --bs-link-color: #a5b4fc; --bs-link-hover-color: #a5b4fc;
}
html[data-paleta="oceano"] {
    --sidebar-marca: #67e8f9;
    --primary: #0e7490; --primary-2: #155e75; --primary-ink: #164e63; --primary-soft: #e6f4f7;
    --primary-ring: rgba(14, 116, 144, .18);
    --sidebar: #082a33; --sidebar-hover: #0d3742; --sidebar-active: #12434f;
    --link: #155e75; --link-hover: #164e63;
    --bs-primary: #0e7490; --bs-primary-rgb: 14, 116, 144; --bs-link-color: #155e75; --bs-link-hover-color: #164e63;
}
html[data-paleta="oceano"][data-theme="dark"] {
    --primary: #0e7490; --primary-2: #155e75; --primary-ink: #67e8f9;
    --primary-soft: color-mix(in srgb, #0e7490 20%, transparent);
    --primary-ring: color-mix(in srgb, #0e7490 35%, transparent);
    --sidebar: #051c22; --sidebar-hover: #0a2a33; --sidebar-active: #0f3640;
    --link: #67e8f9; --link-hover: #67e8f9;
    --bs-primary: #0e7490; --bs-link-color: #67e8f9; --bs-link-hover-color: #67e8f9;
}
html[data-paleta="floresta"] {
    --sidebar-marca: #86efac;
    --primary: #15803d; --primary-2: #166534; --primary-ink: #14532d; --primary-soft: #e8f5ec;
    --primary-ring: rgba(21, 128, 61, .18);
    --sidebar: #0b2416; --sidebar-hover: #113220; --sidebar-active: #17402a;
    --link: #166534; --link-hover: #14532d;
    --bs-primary: #15803d; --bs-primary-rgb: 21, 128, 61; --bs-link-color: #166534; --bs-link-hover-color: #14532d;
}
html[data-paleta="floresta"][data-theme="dark"] {
    --primary: #15803d; --primary-2: #166534; --primary-ink: #86efac;
    --primary-soft: color-mix(in srgb, #15803d 20%, transparent);
    --primary-ring: color-mix(in srgb, #15803d 35%, transparent);
    --sidebar: #06170d; --sidebar-hover: #0c2416; --sidebar-active: #12301e;
    --link: #86efac; --link-hover: #86efac;
    --bs-primary: #15803d; --bs-link-color: #86efac; --bs-link-hover-color: #86efac;
}
html[data-paleta="grafite"] {
    --sidebar-marca: #cbd5e1;
    --primary: #334155; --primary-2: #1e293b; --primary-ink: #0f172a; --primary-soft: #eef1f5;
    --primary-ring: rgba(51, 65, 85, .18);
    --sidebar: #111827; --sidebar-hover: #1b2433; --sidebar-active: #243041;
    --link: #1e293b; --link-hover: #0f172a;
    --bs-primary: #334155; --bs-primary-rgb: 51, 65, 85; --bs-link-color: #1e293b; --bs-link-hover-color: #0f172a;
}
html[data-paleta="grafite"][data-theme="dark"] {
    --primary: #475569; --primary-2: #334155; --primary-ink: #cbd5e1;
    --primary-soft: color-mix(in srgb, #475569 20%, transparent);
    --primary-ring: color-mix(in srgb, #475569 35%, transparent);
    --sidebar: #0a0f19; --sidebar-hover: #141b28; --sidebar-active: #1c2535;
    --link: #cbd5e1; --link-hover: #cbd5e1;
    --bs-primary: #475569; --bs-link-color: #cbd5e1; --bs-link-hover-color: #cbd5e1;
}
html[data-paleta="vinho"] {
    --sidebar-marca: #fda4af;
    --primary: #9f1239; --primary-2: #881337; --primary-ink: #881337; --primary-soft: #fbecef;
    --primary-ring: rgba(159, 18, 57, .18);
    --sidebar: #2a0a14; --sidebar-hover: #3a1220; --sidebar-active: #4a192b;
    --link: #881337; --link-hover: #881337;
    --bs-primary: #9f1239; --bs-primary-rgb: 159, 18, 57; --bs-link-color: #881337; --bs-link-hover-color: #881337;
}
html[data-paleta="vinho"][data-theme="dark"] {
    --primary: #be123c; --primary-2: #9f1239; --primary-ink: #fda4af;
    --primary-soft: color-mix(in srgb, #be123c 20%, transparent);
    --primary-ring: color-mix(in srgb, #be123c 35%, transparent);
    --sidebar: #1a0610; --sidebar-hover: #280c18; --sidebar-active: #361222;
    --link: #fda4af; --link-hover: #fda4af;
    --bs-primary: #be123c; --bs-link-color: #fda4af; --bs-link-hover-color: #fda4af;
}

/* Componentes do Bootstrap com azul fixo passam a seguir a paleta. */
.btn-outline-primary {
    --bs-btn-color: var(--primary-2);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--primary-2);
    --bs-btn-active-border-color: var(--primary-2);
    --bs-btn-active-color: #fff;
}
html[data-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--link); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--primary); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--primary); }
.text-primary { color: var(--primary-2) !important; }
html[data-theme="dark"] .text-primary { color: var(--link) !important; }

/* Painel lateral */
.painel-aparencia {
    --bs-offcanvas-width: 380px;
    --bs-offcanvas-bg: var(--surface);
    --bs-offcanvas-color: var(--text);
    border-left: 1px solid var(--line);
}
.painel-aparencia .offcanvas-header { border-bottom: 1px solid var(--line); align-items: flex-start; }
.painel-aparencia .offcanvas-title { font-weight: 700; display: flex; gap: 8px; align-items: center; }
.painel-aparencia .offcanvas-footer {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 14px 16px; border-top: 1px solid var(--line); background: var(--surface-2);
}
html[data-theme="dark"] .painel-aparencia .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.aparencia-secao + .aparencia-secao { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.aparencia-secao h6 { font-weight: 700; margin-bottom: 2px; color: var(--text); }
.aparencia-ajuda { color: var(--subtle); font-size: calc(12px * var(--escala-fonte)); margin-bottom: 12px; }

.aparencia-paletas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.aparencia-paleta {
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
    padding: 8px; display: grid; gap: 6px; text-align: center; color: var(--text-2);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.aparencia-paleta:hover:not(:disabled) { border-color: var(--field-line); }
.aparencia-paleta.selecionada { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); color: var(--text); }
.aparencia-paleta:disabled { cursor: default; opacity: .55; }
.aparencia-paleta.selecionada:disabled { opacity: 1; }
.aparencia-paleta .nome { font-size: calc(12px * var(--escala-fonte)); font-weight: 600; }
.amostra { display: grid; grid-template-columns: 26% 1fr; height: 46px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-2); }
.amostra-tela { background: var(--surface-3); padding: 7px; display: grid; align-content: space-between; justify-items: start; }
.amostra-linha { width: 80%; height: 5px; border-radius: 3px; background: var(--line); }
.amostra-botao { width: 48%; height: 10px; border-radius: 4px; }

.aparencia-opcoes .btn { --bs-btn-padding-x: 6px; font-weight: 500; }
.aparencia-opcoes .btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.aparencia-letra { font-weight: 700; line-height: 1; }
.aparencia-letra-p { font-size: 12px; }
.aparencia-letra-m { font-size: 14px; }
.aparencia-letra-g { font-size: 17px; }
.aparencia-letra-gg { font-size: 20px; }

@media (max-width: 576px) {
    .painel-aparencia { --bs-offcanvas-width: 100%; }
}