/*
 * Financeiro Pro — Design System
 * Identidade visual inspirada no tema Gentelella 2026 (Colorlib):
 *   - tipografia Inter (400/500/600), base 14px, line-height 1.43;
 *   - sidebar fixa escura #1A2332 com destaque teal #1ABB9C;
 *   - topbar branca translúcida com blur, altura 56px;
 *   - fundo #F5F7FB, cards brancos com borda #E6E7EB e sombra sutil;
 *   - raios 4/6/8px, tabelas compactas (13px) e cabeçalhos em `bg-surface-secondary`;
 *   - paleta de acentos: green #2FB344, yellow #F59F00, red #D63939,
 *     blue #066FD1, azure #4299E1, purple #AE3EC9, cyan #17A2B8.
 * Sem dependências externas obrigatórias (a fonte tem fallback de sistema).
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    color-scheme: light;

    /* Escalas de apoio (usadas em ícones/estados inline nas views) */
    --green-50: #F0F9F2;  --green-100: #D9F2DF;  --green-200: #B4E5C1;
    --green-400: #51C46B; --green-500: #2FB344;  --green-600: #26953A; --green-700: #1D7A2F;

    --blue-50: #EBF5FE;   --blue-100: #D3E9FC;   --blue-200: #A9D4F8;
    --blue-400: #3D9BE5;  --blue-500: #066FD1;   --blue-600: #055CB0;  --blue-700: #044A8E;

    --rose-50: #FDF1F1;   --rose-100: #FADBDB;   --rose-200: #F5B9B9;
    --rose-400: #E46969;  --rose-500: #D63939;   --rose-600: #B62F2F;  --rose-700: #932626;

    --amber-50: #FFF8EC;  --amber-100: #FEEDD1;  --amber-200: #FDDBA3;
    --amber-400: #F9B23C; --amber-500: #F59F00;  --amber-600: #D08700; --amber-700: #A66A00;

    --violet-50: #FAF1FC; --violet-100: #F3DDF7; --violet-200: #E7BBEF;
    --violet-400: #C561D6; --violet-500: #AE3EC9; --violet-600: #9230AB; --violet-700: #77278C;

    --slate-50: #F9FAFB;  --slate-100: #EFF0F3;  --slate-200: #E6E7EB;
    --slate-300: #D5D8DE; --slate-400: #C0C7CF;  --slate-500: #9AA2AE;
    --slate-600: #7E8896; --slate-700: #626D7D;  --slate-800: #3D4756; --slate-900: #1E2633;

    /* Paleta Gentelella */
    --primaria: #1ABB9C;
    --primaria-escura: #169F85;
    --primaria-clara: #1ABB9C;
    --sucesso: #2FB344;
    --perigo: #D63939;
    --aviso: #F59F00;
    --info: #4299E1;
    --roxo: #AE3EC9;
    --navy: #1E2633;
    --azul: #066FD1;
    --ciano: #17A2B8;

    /* Semântica */
    --chrome: #F5F7FB;              /* fundo da aplicação */
    --fundo: #F5F7FB;               /* área de conteúdo */
    --superficie: #FFFFFF;
    --borda: #E6E7EB;
    --borda-suave: #EFF0F3;
    --texto: #1E2633;
    --texto-suave: #626D7D;
    --texto-fraco: #7E8896;

    /* Sidebar escura */
    --sidebar-fundo: #1A2332;
    --sidebar-texto: #7B8FA3;
    --sidebar-texto-hover: #C5D0DC;
    --sidebar-borda: rgba(255, 255, 255, 0.06);
    --sidebar-hover: rgba(255, 255, 255, 0.04);
    --sidebar-ativo: rgba(26, 187, 156, 0.10);

    /* Sombras discretas */
    --sombra-sm: 0 2px 4px rgba(30, 38, 51, 0.04);
    --sombra-md: 0 2px 4px rgba(30, 38, 51, 0.06), 0 6px 16px rgba(30, 38, 51, 0.06);
    --sombra-lg: 0 12px 32px rgba(30, 38, 51, 0.16);

    --raio-sm: 6px;
    --raio: 6px;
    --raio-card: 8px;
    --raio-full: 999px;

    --sidebar-largura: 252px;
    --sidebar-recolhida: 76px;
    --topbar-altura: 56px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.43;
    color: var(--texto);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--texto); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.14); border-radius: 3px; }

:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; border-radius: var(--raio-sm); }

/* ---------- Shell ---------- */
.app-shell { display: flex; min-height: 100vh; background: var(--fundo); }

.sidebar {
    width: var(--sidebar-largura);
    flex-shrink: 0;
    background: var(--sidebar-fundo);
    color: var(--sidebar-texto);
    display: flex;
    flex-direction: column;
    padding: 0 0 8px;
    position: sticky;
    top: 0;
    height: 100vh;
    transition: width 0.22s cubic-bezier(0.2, 0, 0, 1);
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.sidebar__marca {
    display: flex; align-items: center; gap: 10px;
    padding: 0 16px; margin-bottom: 4px;
    height: var(--topbar-altura); flex-shrink: 0;
    border-bottom: 1px solid var(--sidebar-borda);
}
.sidebar__logo {
    width: 32px; height: 32px; border-radius: var(--raio-sm);
    background: var(--primaria);
    display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; flex-shrink: 0;
}

.sidebar__grupo { margin-bottom: 4px; padding: 0 8px; }
.sidebar__rotulo {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
    color: rgba(123, 143, 163, 0.55); padding: 16px 12px 6px; white-space: nowrap; font-weight: 600;
}
.sidebar__link {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px; margin: 0 0 1px;
    border-radius: var(--raio-sm);
    color: var(--sidebar-texto); font-size: 13px; font-weight: 400;
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
}
.sidebar__link:hover { background: var(--sidebar-hover); color: var(--sidebar-texto-hover); }
.sidebar__link--ativo {
    background: var(--sidebar-ativo); color: #fff; font-weight: 500;
    box-shadow: none;
}
.sidebar__link svg { flex-shrink: 0; opacity: 0.75; }
.sidebar__link:hover svg, .sidebar__link--ativo svg { opacity: 1; }
.sidebar__link--ativo svg { color: var(--primaria); }
/* Aviso discreto de backup com problema — aparece ao lado de Configurações. */
.sidebar__alerta {
    width: 7px; height: 7px; margin-left: auto; flex-shrink: 0; border-radius: 50%;
    background: #E0533F; box-shadow: 0 0 0 3px rgba(224, 83, 63, 0.18);
}
/* Rodapé do usuário — padrão Gentelella (.sidebar-footer > .sidebar-user) */
.sidebar-footer {
    margin-top: auto; flex-shrink: 0;
    border-top: 1px solid var(--sidebar-borda); padding: 8px;
}
.sidebar-user {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; border-radius: var(--raio-sm);
    cursor: pointer; transition: background 0.12s ease;
}
.sidebar-user:hover { background: var(--sidebar-hover); }
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-info .name {
    display: block; color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-decoration: none; transition: color 0.12s ease;
}
.sidebar-user-info .name:hover { color: var(--primaria); }
.sidebar-user-info .role {
    color: var(--sidebar-texto); font-size: 11px; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user .more-btn {
    display: flex; justify-content: center; align-items: center;
    width: 24px; height: 24px; padding: 0; flex-shrink: 0;
    color: var(--sidebar-texto); background: transparent; border: 0;
    border-radius: var(--raio-sm); cursor: pointer;
    opacity: 0; transition: opacity 0.12s ease, color 0.12s ease;
}
.sidebar-user:hover .more-btn,
.sidebar-user .more-btn:focus-visible { opacity: 1; }
.sidebar-user .more-btn:hover { color: var(--rose-400); }
.sidebar-user .more-btn svg { width: 14px; height: 14px; }
/* Touch não tem hover: o gatilho do menu fica sempre visível e com alvo maior. */
@media (hover: none) {
    .sidebar-user .more-btn { opacity: 1; width: 32px; height: 32px; }
    .sidebar-user .more-btn svg { width: 16px; height: 16px; }
}

/* ---------- Popover do menu da conta (padrão Gentelella .menu-popover) ---------- */
.menu-popover {
    display: flex; flex-direction: column;
    min-width: 160px; padding: 4px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-lg);
    z-index: 1100;
}
.menu-popover[hidden] { display: none; }
/* Sem JS o menu rende como lista simples dentro do rodapé da sidebar. */
html:not(.js) .menu-popover[hidden] {
    display: flex; position: static;
    margin-top: 6px; padding: 0;
    background: transparent; border: 0; box-shadow: none;
}
.menu-popover.is-aberto { position: fixed; animation: menu-in 0.14s cubic-bezier(0.2, 0, 0, 1); }
@keyframes menu-in {
    0% { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.menu-item {
    appearance: none; text-align: start; font: inherit;
    color: var(--texto); background: transparent; border: 0;
    border-radius: var(--raio-sm); cursor: pointer;
    padding: 7px 10px; font-size: 13px; text-decoration: none;
    display: block; width: 100%; box-sizing: border-box;
    transition: background 0.1s ease;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--fundo); }
.menu-separator { background: var(--borda-suave); height: 1px; margin: 4px 2px; }
.menu-popover form { margin: 0; }
/* Sem JS a lista fica estática no rodapé: itens em tom de texto da sidebar. */
html:not(.js) .menu-popover[hidden] .menu-item { color: var(--sidebar-texto-hover); }
html:not(.js) .menu-popover[hidden] .menu-item:hover { background: var(--sidebar-hover); }
html:not(.js) .menu-popover[hidden] .menu-separator { background: var(--sidebar-borda); }

/* Sidebar recolhida */
.app-shell--recolhido .sidebar { width: var(--sidebar-recolhida); }
.app-shell--recolhido .sidebar__texto,
.app-shell--recolhido .sidebar__rotulo,
.app-shell--recolhido .sidebar-user-info,
.app-shell--recolhido .sidebar-user .more-btn { display: none; }
.app-shell--recolhido .sidebar-user { justify-content: center; padding: 8px; }
/* Sem JS a lista estática não cabe no menu recolhido. */
.app-shell--recolhido .menu-popover { display: none; }
.app-shell--recolhido .sidebar__link { justify-content: center; margin-right: 0; padding: 9px; }
.app-shell--recolhido .sidebar__marca { justify-content: center; padding: 0; }
.app-shell--recolhido .sidebar__logo,
.app-shell--recolhido .sidebar__logo[data-logo] { max-width: 44px; }
.app-shell--recolhido .sidebar__logo[data-logo] img { max-width: 44px; height: 24px; }

/* ---------- Área principal ---------- */
.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--fundo); }

.topbar {
    height: var(--topbar-altura);
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--borda);
    display: flex; align-items: center; gap: 16px;
    padding: 0 24px;
    position: sticky; top: 0; z-index: 90;
}
.topbar__toggle {
    border: 0; background: transparent; border-radius: var(--raio-sm);
    width: 34px; height: 34px; display: grid; place-items: center; color: var(--texto-suave);
    transition: background 0.12s ease, color 0.12s ease;
}
.topbar__toggle:hover { background: var(--fundo); color: var(--texto); }
.topbar__busca {
    flex: 1; max-width: 340px; display: flex; align-items: center; gap: 8px;
    background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio);
    padding: 0 10px; height: 34px; color: var(--texto-fraco);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.topbar__busca:focus-within { border-color: var(--primaria); box-shadow: 0 0 0 3px rgba(26, 187, 156, 0.10); }
.topbar__busca input { border: 0; background: transparent; outline: none; width: 100%; font-size: 13px; color: var(--texto); }
.topbar__busca input::placeholder { color: var(--texto-fraco); }
.topbar__acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar__icone {
    position: relative; width: 34px; height: 34px; border-radius: var(--raio-sm);
    border: 0; background: transparent; display: grid; place-items: center; color: var(--texto-suave);
    transition: background 0.12s ease, color 0.12s ease;
}
.topbar__icone:hover { color: var(--primaria); background: var(--fundo); }
.topbar__badge {
    position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: var(--raio-full); background: var(--perigo); color: #fff;
    font-size: 10px; font-weight: 600; display: grid; place-items: center;
}

/* Alternância de tema (sol/lua) — o ícone visível indica o modo para o qual se vai. */
.topbar__tema { cursor: pointer; }
.topbar__tema-icone { display: grid; place-items: center; transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), color 0.15s ease; }
.topbar__tema:hover .topbar__tema-icone { transform: rotate(20deg); }
[data-tema-icone="sol"] { display: none; }
:root[data-tema="escuro"] [data-tema-icone="lua"] { display: none; }
:root[data-tema="escuro"] [data-tema-icone="sol"] { display: grid; color: #F9B23C; }
:root[data-tema="escuro"] .topbar__tema:hover .topbar__tema-icone { color: #FFC861; }

.pagina { padding: 20px 24px 40px; width: 100%; max-width: 1440px; margin: 0 auto; }

.breadcrumb { font-size: 13px; color: var(--texto-fraco); margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
.breadcrumb a { color: inherit; transition: color 0.1s ease; }
.breadcrumb a:hover { color: var(--primaria); text-decoration: underline; text-underline-offset: 2px; }

.cabecalho-pagina {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.cabecalho-pagina h1 { font-size: 18px; font-weight: 600; color: var(--texto); }
.cabecalho-pagina p { color: var(--texto-fraco); font-size: 13px; margin-top: 3px; }
.cabecalho-pagina__acoes { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Grid ---------- */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
.pilha { display: flex; flex-direction: column; gap: 20px; }
.linha { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* O reset torna svg em bloco, então texto seguido de ícone precisa de um
   contêiner flex para não quebrar a linha nem desalinhar o rótulo. */
.linha--compacta { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Cards ---------- */
.card {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-card);
    box-shadow: var(--sombra-sm);
    transition: box-shadow 0.15s ease;
}
.card__cabecalho {
    padding: 12px 16px; border-bottom: 1px solid var(--borda-suave);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    /* Títulos longos e botões de ação dividem a mesma linha: em telas estreitas
       o conteúdo quebra para baixo em vez de estourar a largura do cartão. */
    flex-wrap: wrap; row-gap: 8px;
    min-height: 44px;
}
.card__titulo { font-size: 13px; font-weight: 600; color: var(--texto); }
.card__subtitulo { font-size: 11.5px; color: var(--texto-fraco); font-weight: 400; margin-top: 1px; }
.card__corpo { padding: 16px; }
.card__rodape { padding: 10px 16px; border-top: 1px solid var(--borda-suave); }

/* Stat cards */
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat__topo { display: flex; align-items: center; justify-content: space-between; }
.stat__rotulo {
    font-size: 11.5px; color: var(--texto-fraco); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.stat__icone {
    width: 40px; height: 40px; border-radius: var(--raio-sm); display: grid; place-items: center; flex-shrink: 0;
}
.stat__valor { font-size: 22px; font-weight: 600; letter-spacing: -0.5px; color: var(--texto); line-height: 1.2; }
.stat__rodape { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-fraco); }
.tendencia { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 12.5px; }
.tendencia--alta { color: var(--sucesso); }
.tendencia--baixa { color: var(--perigo); }
.tendencia--neutra { color: var(--texto-suave); }

/* Indicador em linha (ícone à esquerda) — usado no topo da lista de contas. */
.stat--linha { flex-direction: row; align-items: center; gap: 14px; padding: 16px; }
.stat__conteudo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat__icone--teal  { background: rgba(26, 187, 156, 0.14); color: var(--primaria-escura); }
.stat__icone--azul  { background: var(--blue-100); color: var(--blue-600); }
.stat__icone--ambar { background: var(--amber-100); color: var(--amber-700); }

/* ---------- Botões ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 0 14px; height: 34px; border-radius: var(--raio); border: 1px solid transparent;
    font-size: 12.5px; font-weight: 500; transition: all 0.12s ease; white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; }
.btn--primario { background: var(--primaria); color: #fff; border-color: var(--primaria-escura); box-shadow: var(--sombra-sm); }
.btn--primario:hover { background: var(--primaria-escura); }
.btn--secundario { background: var(--superficie); color: var(--texto-suave); border-color: var(--borda); box-shadow: var(--sombra-sm); }
.btn--secundario:hover { background: var(--slate-50); color: var(--texto); }
.btn--fantasma { background: transparent; color: var(--texto-suave); box-shadow: none; }
.btn--fantasma:hover { background: var(--fundo); color: var(--primaria); }
.btn--perigo { background: var(--perigo); color: #fff; border-color: #A82B2B; }
.btn--perigo:hover { background: #A82B2B; }
.btn--sucesso { background: var(--sucesso); color: #fff; border-color: #1A8A32; }
.btn--sucesso:hover { background: #1A8A32; }
.btn--pequeno { height: 28px; padding: 0 10px; font-size: 12.5px; }
.btn--icone { padding: 0; width: 34px; }
.btn--pequeno.btn--icone { width: 28px; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- Badges ---------- */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px; border-radius: 4px;
    font-size: 11.5px; font-weight: 500; line-height: 1.5;
}
.badge--success { background: rgba(47, 179, 68, 0.10); color: #1D7A2F; }
.badge--warning { background: rgba(245, 159, 0, 0.12); color: #A66A00; }
.badge--danger  { background: rgba(214, 57, 57, 0.10); color: #932626; }
.badge--info    { background: rgba(66, 153, 225, 0.12); color: #055CB0; }
.badge--neutral { background: var(--slate-100); color: var(--texto-suave); }
.badge--violet  { background: rgba(174, 62, 201, 0.10); color: #77278C; }
.badge__ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Tabelas ---------- */
.tabela-wrapper { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th {
    text-align: left; padding: 8px 16px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.3px; color: var(--texto-fraco);
    background: var(--slate-50); border-bottom: 1px solid var(--borda); white-space: nowrap;
}
.tabela td { padding: 10px 16px; border-bottom: 1px solid var(--borda-suave); vertical-align: middle; color: var(--texto-suave); }
.tabela tbody tr { transition: background 80ms ease; }
.tabela tbody tr:hover { background: var(--slate-50); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela__valor { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; color: var(--texto); }
/* Entradas em verde e saídas em vermelho. Assim como nas duas regras abaixo,
   o seletor qualificado é necessário para vencer a regra geral
   `.tabela td { color: … }` — sem ele, os valores dentro das tabelas ficavam
   na cor cinza padrão. */
.valor--entrada, .tabela__valor.valor--entrada { color: var(--sucesso); }
.valor--saida, .tabela__valor.valor--saida { color: var(--perigo); }
/* Sinal do valor: positivo em azul e negativo em vermelho (tabela de lançamentos).
   O seletor qualificado vence a regra geral `.tabela td { color: … }`. */
.valor--positivo, .tabela__valor.valor--positivo { color: var(--blue-500); }
.valor--negativo, .tabela__valor.valor--negativo { color: var(--rose-500); }
.tabela__acoes { display: flex; gap: 4px; justify-content: center; }
/* Caixas de seleção das listas: mesmo tamanho e cor dos demais controles,
   com alvo de toque melhor no celular. */
.tabela input[type="checkbox"] {
    width: 16px; height: 16px; margin: 0;
    accent-color: var(--primaria); cursor: pointer;
}

/* ---------- Paginação: << < 1 2 3 > >> ---------- */
.paginacao {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--borda-suave);
}
.paginacao__setas { display: inline-flex; align-items: center; gap: 4px; }
.paginacao__item {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: 32px; padding: 0 8px; height: 32px; border-radius: var(--raio-sm);
    border: 1px solid var(--borda); background: var(--superficie);
    color: var(--texto-suave); font-size: 13px; font-weight: 600; line-height: 1;
    transition: all 0.1s ease;
}
.paginacao__item:hover { background: var(--slate-50); color: var(--texto); border-color: var(--slate-300); }
.paginacao__item--desabilitado { opacity: 0.4; pointer-events: none; }
.paginacao__numeros { display: flex; align-items: center; gap: 4px; }
.paginacao__numero {
    min-width: 32px; height: 32px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--raio-sm); border: 1px solid transparent;
    color: var(--texto-suave); font-size: 13px; font-weight: 500;
    transition: background 0.1s ease, color 0.1s ease;
}
.paginacao__numero:hover { background: var(--slate-100); color: var(--texto); }
.paginacao__numero--ativo { background: var(--primaria); color: #fff; border-color: var(--primaria-escura); }
.paginacao__reticencias { color: var(--texto-fraco); padding: 0 4px; }
.paginacao__resumo { padding: 12px 16px 0; font-size: 12.5px; color: var(--texto-suave); }

/* ---------- Formulários ---------- */
.form-grupo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-linha { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.form-rotulo { font-size: 12px; font-weight: 500; color: var(--texto); }
.form-rotulo .obrigatorio { color: var(--perigo); }
.form-controle {
    width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--borda);
    border-radius: var(--raio); font-size: 13px; background: var(--superficie); color: var(--texto);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.form-controle:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px rgba(26, 187, 156, 0.12); }
.form-controle--erro { border-color: var(--perigo); }
.form-ajuda { font-size: 11.5px; color: var(--texto-fraco); }
.form-erro { font-size: 11.5px; color: var(--perigo); font-weight: 500; }
textarea.form-controle { resize: vertical; min-height: 88px; height: auto; padding: 8px 10px; line-height: 1.5; }
.form-check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.form-check input { width: 16px; height: 16px; accent-color: var(--primaria); }

/* ---------- Alertas / Flash ---------- */
.alertas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.alerta {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
    border-radius: var(--raio); border: 1px solid; font-size: 12.5px; line-height: 1.45;
}
.alerta--sucesso { background: rgba(47, 179, 68, 0.10); border-color: rgba(47, 179, 68, 0.33); color: #1D7A2F; }
.alerta--erro    { background: rgba(214, 57, 57, 0.10); border-color: rgba(214, 57, 57, 0.33); color: #932626; }
.alerta--aviso   { background: rgba(245, 159, 0, 0.12); border-color: rgba(245, 159, 0, 0.33); color: #A66A00; }
.alerta--info    { background: rgba(66, 153, 225, 0.12); border-color: rgba(66, 153, 225, 0.33); color: #055CB0; }
.alerta__lista { margin: 6px 0 0; padding-left: 18px; }
.alerta__lista li { margin-bottom: 2px; }

/* ---------- Empty state ---------- */
.vazio { text-align: center; padding: 48px 24px; color: var(--texto-suave); }
.vazio__icone {
    width: 60px; height: 60px; margin: 0 auto 16px; border-radius: var(--raio-card);
    background: var(--slate-50); border: 1px solid var(--borda-suave);
    display: grid; place-items: center; color: var(--texto-fraco);
}
.vazio h3 { color: var(--texto); margin-bottom: 4px; font-size: 15px; font-weight: 600; }

/* ---------- Filtros / Tabs ---------- */
.tabs {
    display: flex; gap: 2px; border-bottom: 1px solid var(--borda); margin-bottom: 20px;
    background: var(--fundo); border-radius: var(--raio); padding: 3px; width: fit-content;
}
.tab {
    padding: 6px 12px; font-size: 12.5px; font-weight: 500; color: var(--texto-fraco);
    border-bottom: 0; margin-bottom: 0; border-radius: 4px;
    transition: background 0.12s ease, color 0.12s ease;
}
.tab:hover { color: var(--texto); }
.tab--ativo {
    color: var(--texto); border-bottom-color: transparent;
    background: var(--superficie); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.tab__contagem { font-size: 11px; background: var(--slate-100); padding: 1px 7px; border-radius: var(--raio-full); margin-left: 6px; color: var(--texto-suave); }

.filtros { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; }

/* Barra de filtros da lista de contas, dentro do cabeçalho do cartão. */
.usuarios-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.usuarios-filtros select.form-controle { width: auto; min-width: 150px; }
.campo-busca { position: relative; display: flex; align-items: center; flex: 1 1 200px; max-width: 320px; }
.campo-busca > svg { position: absolute; left: 10px; color: var(--texto-fraco); pointer-events: none; }
.campo-busca .form-controle { padding-left: 32px; }
.conta-celula { display: flex; align-items: center; gap: 12px; }
.conta-celula .negrito { color: var(--texto); }
.situacao { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; }
.situacao::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.situacao--ativa { color: var(--green-700); }
.situacao--bloqueada { color: var(--rose-700); }

/* Tom do avatar por conta: mesma cor sempre, derivada do e-mail. */
.avatar--teal    { background: linear-gradient(135deg, #1AB89C, #0E8A76); }
.avatar--azul    { background: linear-gradient(135deg, #4C9FF0, #2B6CB0); }
.avatar--violeta { background: linear-gradient(135deg, #B44AD0, #7B2C8F); }
.avatar--ambar   { background: linear-gradient(135deg, #F2A72D, #B26A00); }
.avatar--rosa    { background: linear-gradient(135deg, #E858A0, #AF2C6E); }
.avatar--verde   { background: linear-gradient(135deg, #40C057, #2B8A3E); }
.avatar--indigo  { background: linear-gradient(135deg, #6C8CFF, #3B5BDB); }
.avatar--ciano   { background: linear-gradient(135deg, #22B8CF, #0C8599); }

/* Ações em lote: a barra só aparece quando há contas marcadas. */
.lote-barra {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; padding: 10px 16px;
    background: var(--slate-50); border-bottom: 1px solid var(--borda-suave);
}
.lote-barra[hidden] { display: none; }
.lote-barra__contagem { font-size: 12.5px; font-weight: 600; color: var(--texto); }
.lote-barra__acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Menu de ações por linha. Fica em posição fixa (definida por JS) para não ser
   cortado pela rolagem horizontal do contêiner da tabela. */
.menu-acoes {
    position: fixed; z-index: 60; min-width: 190px; padding: 4px;
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio-sm); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    display: grid; gap: 2px; text-align: left;
}
.menu-acoes[hidden] { display: none; }
.menu-acoes__item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 7px 10px; border: 0; border-radius: 4px; background: transparent;
    color: var(--texto); font-size: 12.5px; font-weight: 500; text-align: left; cursor: pointer;
}
.menu-acoes__item:hover { background: var(--slate-100); }
.menu-acoes__item--perigo { color: var(--rose-600); }
.menu-acoes__item--perigo:hover { background: rgba(214, 57, 57, 0.08); }
.menu-acoes__item:disabled { opacity: 0.5; cursor: not-allowed; }
.menu-acoes__item:disabled:hover { background: transparent; }

/* ---------- Barra de progresso ---------- */
.progresso { height: 6px; background: var(--slate-100); border-radius: 3px; overflow: hidden; }
.progresso__barra { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
.progresso__barra--ok { background: var(--sucesso); }
.progresso__barra--atencao { background: var(--aviso); }
.progresso__barra--critico { background: var(--perigo); }

/* ---------- Heatmap ---------- */
.heatmap { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 12px); gap: 3px; overflow-x: auto; padding-bottom: 8px; }
.heatmap__dia { width: 12px; height: 12px; border-radius: 3px; background: var(--slate-100); }
.heatmap__dia--1 { background: rgba(26, 187, 156, 0.22); }
.heatmap__dia--2 { background: rgba(26, 187, 156, 0.42); }
.heatmap__dia--3 { background: rgba(26, 187, 156, 0.66); }
.heatmap__dia--4 { background: var(--primaria); }
.heatmap__legenda { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--texto-fraco); }

/* ---------- Gráficos SVG ---------- */
.grafico { width: 100%; height: auto; overflow: visible; }
.grafico text { font-size: 10px; fill: #7E8896; font-family: inherit; }
.grafico .grade { stroke: #EFF0F3; stroke-dasharray: none; }
.grafico .eixo { stroke: #EFF0F3; }

/* Datas do eixo X: menores que os demais textos do gráfico. */
.grafico .rotulo-eixo { font-size: 7.5px; }

/* Categorias das barras horizontais: um degrau acima do eixo, como no modelo. */
.grafico .rotulo-categoria { font-size: 9px; }

/* Grade tracejada das barras horizontais (estilo Gentelella). */
.grafico .grade--tracejada { stroke-dasharray: 4 3; }

@media (max-width: 820px) {
    /* Em telas estreitas o SVG é comprimido: a fonte precisa crescer para continuar legível. */
    .grafico .rotulo-eixo { font-size: 13px; }
    .grafico .rotulo-categoria { font-size: 14px; }
}

.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--texto-fraco); }
.legenda__item { display: flex; align-items: center; gap: 6px; }
.legenda__cor { width: 10px; height: 10px; border-radius: 3px; }

/* ---------- Rosca com legenda lateral (Traffic sources) ---------- */
.donut { display: flex; align-items: center; gap: 16px; width: 100%; }
.donut__rosca { position: relative; flex-shrink: 0; width: 160px; height: 160px; }
.donut__rosca .grafico { display: block; }
.donut__centro {
    position: absolute; inset: 0; display: grid; place-content: center;
    text-align: center; pointer-events: none;
}
.donut__num {
    font-size: 16px; font-weight: 600; line-height: 1.1; color: var(--texto);
    white-space: nowrap;
}
.donut__sub { font-size: 10px; color: var(--texto-fraco); margin-top: 2px; }
.donut__legenda { flex: 1; min-width: 0; }
.donut__item {
    display: flex; align-items: center; gap: 6px; padding: 3px 0;
    font-size: 12px; color: var(--texto-suave);
}
.donut__ponto { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.donut__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut__pct {
    margin-inline-start: auto; flex-shrink: 0;
    font-size: 11.5px; font-weight: 600; color: var(--texto);
}

@media (max-width: 560px) {
    .donut { flex-wrap: wrap; justify-content: center; }
    .donut__rosca { width: 132px; height: 132px; }
    .donut__num { font-size: 14px; }
    .donut__legenda { flex-basis: 100%; }
}

/* ---------- Modal ---------- */
dialog.modal {
    border: 1px solid var(--borda); border-radius: var(--raio-card); padding: 0; width: min(560px, 92vw);
    box-shadow: var(--sombra-lg); background: var(--superficie); color: var(--texto);
}
dialog.modal::backdrop { background: rgba(30, 38, 51, 0.45); backdrop-filter: blur(2px); }
.modal__cabecalho { padding: 14px 18px; border-bottom: 1px solid var(--borda-suave); display: flex; justify-content: space-between; align-items: center; }
.modal__corpo { padding: 18px; max-height: 70vh; overflow-y: auto; }
.modal__rodape { padding: 12px 18px; border-top: 1px solid var(--borda-suave); display: flex; justify-content: flex-end; gap: 8px; }
.modal__fechar { border: 0; background: transparent; color: var(--texto-fraco); font-size: 20px; line-height: 1; }
.modal__fechar:hover { color: var(--texto); }

/* ---------- Avatar ---------- */
.avatar {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--primaria), var(--primaria-escura));
    color: #fff; font-weight: 600; font-size: 12px; flex-shrink: 0;
}
.avatar--sm { width: 26px; height: 26px; font-size: 10.5px; }
.avatar--lg { width: 52px; height: 52px; font-size: 17px; }

/* ---------- Utilitários ---------- */
.texto-suave { color: var(--texto-suave); }
.texto-pequeno { font-size: 12.5px; }
.texto-menor { font-size: 11.5px; }
.negrito { font-weight: 600; }
.direita { text-align: right; }
.centro { text-align: center; }
.tabela th.centro { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.esconder { display: none; }
.agorarap { white-space: nowrap; }
.flex-1 { flex: 1; }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
    .col-3 { grid-column: span 6; }
    .col-4 { grid-column: span 6; }
    .col-5, .col-7 { grid-column: span 12; }
}

@media (max-width: 820px) {
    .sidebar {
        position: fixed; z-index: 100; transform: translateX(-100%);
        transition: transform 0.2s ease; width: var(--sidebar-largura);
    }
    .app-shell--menu-aberto .sidebar { transform: translateX(0); }

    .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11 { grid-column: span 12; }
    .pagina { padding: 16px 16px 40px; }
    .topbar { padding: 0 16px; }
    .topbar__busca { display: none; }
}

@media (max-width: 620px) {
    .esconder-sm { display: none; }
    /* Abas (Todos / Créditos / Débitos) rolam na horizontal em vez de quebrar
       o rótulo e a contagem em várias linhas. */
    .tabs { overflow-x: auto; max-width: 100%; scrollbar-width: thin; }
    .tab { white-space: nowrap; }
}

@media print {
    .sidebar, .topbar, .cabecalho-pagina__acoes, .menu-popover, .no-print { display: none !important; }
    .pagina { padding: 0; max-width: none; }
    body { background: #fff; }
    .card { box-shadow: none; break-inside: avoid; }
    .tabela th { background: #F9FAFB; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Página de configurações (layout do settings do Gentelella) ---------- */
.settings-layout {
    display: grid; grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px; align-items: flex-start;
}

.settings-nav {
    position: sticky; top: calc(var(--topbar-altura) + 16px);
    display: flex; flex-direction: column; gap: 1px; padding: 6px;
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio-card); box-shadow: var(--sombra-sm);
}
.settings-nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: var(--raio-sm);
    color: var(--texto-suave); font-size: 13px; font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
}
.settings-nav-link:hover { background: var(--slate-50); color: var(--texto); }
.settings-nav-link--ativo { background: rgba(26, 187, 156, 0.10); color: var(--primaria); }
.settings-nav-link svg { width: 14px; height: 14px; opacity: 0.7; flex-shrink: 0; }
.settings-nav-link:hover svg, .settings-nav-link--ativo svg { opacity: 1; }
.settings-nav-link .badge { margin-left: auto; }
.settings-nav-sep { height: 1px; background: var(--borda-suave); margin: 6px 4px; }

.settings-content { display: flex; flex-direction: column; gap: 20px; }
.settings-section {
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio-card); box-shadow: var(--sombra-sm);
    padding: 24px; scroll-margin-top: calc(var(--topbar-altura) + 16px);
}
.settings-section-title { font-size: 16px; font-weight: 600; color: var(--texto); margin-bottom: 4px; }
.settings-section-desc { font-size: 13px; color: var(--texto-fraco); margin-bottom: 20px; }
.settings-form { display: flex; flex-direction: column; gap: 14px; }

.settings-row {
    display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px;
    align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--borda-suave);
}
.settings-row:last-of-type { border-bottom: 0; }
.settings-row > label { font-size: 13px; font-weight: 500; color: var(--texto); padding-top: 8px; }
.settings-row .form-controle { max-width: 360px; }
.settings-control { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.settings-hint { font-size: 11.5px; color: var(--texto-fraco); line-height: 1.5; }
.settings-actions {
    display: flex; justify-content: flex-end; align-items: center; gap: 8px;
    border-top: 1px solid var(--borda-suave); padding-top: 14px; flex-wrap: wrap;
}
/* Comando de recuperação do backup (somente leitura) */
.settings-codigo {
    margin: 2px 0 0; padding: 10px 12px; overflow-x: auto;
    background: var(--slate-50); border: 1px solid var(--borda-suave); border-radius: var(--raio-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px; line-height: 1.6; color: var(--texto);
}

/* Credenciais SMTP: status do envio e opção de descartar a senha gravada */
.settings-row--topo { align-items: center; }
.settings-check {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--texto-suave); cursor: pointer; user-select: none;
}
.settings-check input { accent-color: var(--primaria); cursor: pointer; }
[data-smtp-status] { margin-right: auto; font-size: 12.5px; font-weight: 500; }
[data-smtp-status][data-estado="ok"] { color: var(--sucesso); }
[data-smtp-status][data-estado="erro"] { color: var(--perigo); }

/* ---------- Importação de extrato bancário ---------- */
.import__form { display: flex; flex-direction: column; gap: 4px; }
.import__form .settings-actions { border-top: 0; }

.import__previa {
    display: flex; flex-direction: column; gap: 14px;
    margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--borda);
}
.import__cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.import__cabecalho strong { font-size: 13.5px; color: var(--texto); word-break: break-all; }
.import__cabecalho .badge { margin-left: 8px; vertical-align: middle; }
.import__resumo { display: flex; flex-wrap: wrap; gap: 8px; }

.import__saldo {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
    padding: 14px 16px; background: var(--slate-50);
    border: 1px solid var(--borda-suave); border-radius: var(--raio-card);
}
.import__saldo--divergente { background: rgba(214, 57, 57, 0.07); border-color: rgba(214, 57, 57, 0.35); }
.import__saldo-item { display: flex; flex-direction: column; gap: 3px; }
.import__saldo-item > span:first-child { font-size: 11px; color: var(--texto-fraco); }
.import__saldo-item strong { font-size: 14px; color: var(--texto); font-variant-numeric: tabular-nums; }
.import__alerta { display: flex; align-items: center; gap: 6px; }

.import__tabela-wrapper {
    max-height: 340px; overflow: auto;
    border: 1px solid var(--borda-suave); border-radius: var(--raio-card);
}
.import__tabela thead th { position: sticky; top: 0; background: var(--superficie); z-index: 1; }
.import__data { white-space: nowrap; }
.import__tabela .meta { display: block; font-size: 11px; color: var(--texto-fraco); }
.import__sem-cat { color: var(--perigo); font-size: 12px; font-weight: 500; }
.import__linha--dup td { opacity: 0.55; }

.import__previa .settings-actions .settings-hint { margin-right: auto; }
.import__previa .settings-actions form { display: flex; }
.import__titulo-hist { font-size: 13px; font-weight: 600; color: var(--texto-suave); margin-top: 24px; }

@media (max-width: 600px) {
    .import__previa .settings-actions { justify-content: stretch; }
    .import__previa .settings-actions .settings-hint { width: 100%; margin-right: 0; }
}
[data-smtp-status][data-estado="enviando"] { color: var(--texto-fraco); }

.settings-toggle-list { display: flex; flex-direction: column; }
.settings-toggle-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 0; border-bottom: 1px solid var(--borda-suave);
}
.settings-toggle-row:last-child { border-bottom: 0; }
.settings-toggle-row .label { font-size: 13px; font-weight: 500; color: var(--texto); }
.settings-toggle-row .desc { font-size: 12px; color: var(--texto-fraco); margin-top: 2px; }

.toggle {
    position: relative; width: 36px; height: 20px; flex-shrink: 0;
    border: 0; padding: 0; border-radius: 10px; cursor: pointer;
    background: var(--slate-300); transition: background 0.15s ease;
}
.toggle::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); transition: transform 0.15s ease;
}
.toggle--on { background: var(--primaria); }
.toggle--on::after { transform: translateX(16px); }

/* ---------- Mensagens de cobrança ---------- */
/* Interruptor alternável em cima de um checkbox (progressive enhancement). */
.switch {
    appearance: none; -webkit-appearance: none;
    width: 36px; height: 20px; margin: 0; border: 0; border-radius: 10px;
    background: var(--slate-300); position: relative; cursor: pointer;
    flex-shrink: 0; transition: background 0.15s ease;
}
.switch::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); transition: transform 0.15s ease;
}
.switch:checked { background: var(--primaria); }
.switch:checked::after { transform: translateX(16px); }
.switch:focus-visible { outline: 2px solid var(--primaria); outline-offset: 2px; }

.cobranca-momentos { display: flex; flex-direction: column; }
.cobranca-momento {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--borda-suave);
}
.cobranca-momento:last-child { border-bottom: 0; }
.cobranca-momento__texto { flex: 1; min-width: 0; }
.cobranca-momento__texto .label { font-size: 13px; font-weight: 500; color: var(--texto); }
.cobranca-momento__texto .desc { font-size: 11.5px; color: var(--texto-fraco); }
.cobranca-momento__dias {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--texto-suave);
}
.cobranca-momento__dias .form-controle { width: 68px; max-width: 68px; text-align: center; }

.cobranca-textos {
    border: 1px solid var(--borda-suave); border-radius: var(--raio-card);
    padding: 0 14px; margin-top: 12px;
}
.cobranca-textos > summary {
    cursor: pointer; list-style: none; padding: 12px 0;
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--texto);
}
.cobranca-textos > summary::-webkit-details-marker { display: none; }
.cobranca-texto { padding: 12px 0; border-top: 1px solid var(--borda-suave); }
.cobranca-texto__titulo { font-size: 12.5px; font-weight: 600; color: var(--texto-suave); margin-bottom: 8px; }
.cobranca-texto .form-controle { max-width: 100%; }
.cobranca-texto textarea.form-controle { min-height: 120px; }

.cobranca-variaveis { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; list-style: none; }
.cobranca-variaveis li { font-size: 12px; color: var(--texto-fraco); }
.cobranca-variaveis code {
    background: var(--slate-100); padding: 2px 6px; border-radius: 6px;
    font-size: 12px; color: var(--texto-suave);
}

.cobranca-cron {
    margin-top: 12px; padding: 16px;
    border: 1px dashed var(--borda); border-radius: var(--raio-card); background: var(--slate-50);
}
.cobranca-cron__cabecalho { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto); }
.cobranca-cron__url { display: flex; align-items: center; margin: 10px 0 4px; }
.cobranca-cron__url code {
    flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-sm);
    padding: 8px 10px; font-size: 12.5px; color: var(--texto);
}
.cobranca-cron__passos { margin: 8px 0 0; padding-left: 18px; }
.cobranca-cron__passos li { font-size: 12px; color: var(--texto-fraco); line-height: 1.6; }

/* ---------- Meu perfil ---------- */
.perfil-cabecalho {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--borda-suave);
}
.perfil-cabecalho__dados { min-width: 0; flex: 1; }
.perfil-cabecalho__nome { font-size: 15px; font-weight: 600; color: var(--texto); }
.perfil-cabecalho__email {
    font-size: 12.5px; color: var(--texto-fraco); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.perfil-telefone { display: flex; gap: 8px; flex-wrap: wrap; max-width: 520px; }
.perfil-telefone__pais { flex: 1 1 200px; min-width: 170px; max-width: none; }
.perfil-telefone__ddd { flex: 0 0 76px; width: 76px; max-width: none; text-align: center; }
.perfil-telefone__numero { flex: 1 1 150px; max-width: none; }

.perfil-senha { position: relative; display: flex; align-items: center; max-width: 360px; }
.perfil-senha .form-controle { width: 100%; padding-right: 40px; }
.perfil-senha__olho {
    position: absolute; right: 6px; display: inline-flex; align-items: center;
    justify-content: center; width: 28px; height: 28px; padding: 0;
    border: 0; border-radius: var(--raio-sm); background: transparent;
    color: var(--texto-fraco); cursor: pointer; transition: color 0.12s ease, background 0.12s ease;
}
.perfil-senha__olho:hover { color: var(--primaria); background: var(--slate-50); }

.perfil-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.perfil-info__item {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 14px; background: var(--slate-50);
    border: 1px solid var(--borda-suave); border-radius: var(--raio);
}
.perfil-info__item dt {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 500; color: var(--texto-fraco);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.perfil-info__item dd { font-size: 13.5px; font-weight: 500; color: var(--texto); word-break: break-word; }

@media (max-width: 600px) {
    .perfil-info { grid-template-columns: minmax(0, 1fr); }
    .perfil-senha { max-width: none; }
}

.session-list { display: flex; flex-direction: column; gap: 6px; }
.session-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--slate-50); border: 1px solid var(--borda-suave);
    border-radius: var(--raio); padding: 10px 12px;
}
.session-row .device { font-size: 13px; font-weight: 500; color: var(--texto); }
.session-row .meta { font-size: 11.5px; color: var(--texto-fraco); margin-top: 1px; }

@media (max-width: 900px) {
    .settings-layout { grid-template-columns: minmax(0, 1fr); }
    .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; }
    .settings-nav-sep { display: none; }
}

@media (max-width: 600px) {
    /* minmax(0, 1fr): sem o mínimo automático, um <pre> largo (comando de
       restauração do backup) esticava a coluna e criava rolagem horizontal. */
    .settings-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .settings-section { padding: 18px 16px; }
    .settings-row > label { padding-top: 0; }
}

/* ---------- Uploads de imagem (logo e favicon) ---------- */
.upload { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; }
.upload__preview {
    width: 64px; height: 64px; flex-shrink: 0;
    display: grid; place-items: center; overflow: hidden;
    /* Simula o fundo claro onde a imagem será usada — branco nos dois temas. */
    background: #FFFFFF; border: 1px dashed var(--borda);
    border-radius: var(--raio); color: var(--texto-fraco);
    font-size: 10.5px; line-height: 1.2; text-align: center;
}
.upload__preview--escuro { background: var(--sidebar-fundo); border-color: rgba(255, 255, 255, 0.18); color: var(--sidebar-texto); }
.upload__preview--mini { width: 40px; height: 40px; font-size: 9.5px; }
.upload__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.upload__acoes { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.upload__botao { cursor: pointer; }
.upload__input {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; border: 0; opacity: 0; overflow: hidden;
}
.upload__input:focus-visible + .upload__botao { outline: 2px solid var(--primaria); outline-offset: 2px; }
.upload--enviando { opacity: 0.6; pointer-events: none; }
.upload__status--ok { color: var(--sucesso); font-weight: 500; }
.upload__status--erro { color: var(--perigo); font-weight: 500; }

/* Registro persistido no banco ({campo}_nome e {campo}_caminho) */
.upload__salvo { display: block; color: var(--texto-fraco); }
.upload__salvo[hidden] { display: none; }
.upload__salvo strong { color: var(--texto); font-weight: 600; }
.upload__salvo code {
    display: block; margin-top: 3px; padding: 3px 7px;
    background: var(--fundo); border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 11.5px; color: var(--texto); word-break: break-all;
}

.sidebar__logo img { width: auto; height: 100%; object-fit: contain; border-radius: var(--raio-sm); }

/* Com imagem enviada, a marca vira um logotipo em vez do quadradinho com inicial */
.sidebar__logo[data-logo="dark"],
.sidebar__logo[data-logo="light"] {
    background: transparent;
    width: auto;
    max-width: 148px;
    border-radius: 0;
    padding: 0;
}
.sidebar__logo[data-logo="dark"] img,
.sidebar__logo[data-logo="light"] img { height: 30px; max-width: 148px; border-radius: 0; }

@media (max-width: 600px) {
    .upload { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   ---------- Modo escuro (sol/lua na barra superior) ----------
   Ativado por <html data-tema="escuro">, gravado em localStorage pelo botão
   [data-tema-toggle] (com fallback para a preferência do sistema).
   Mudam só superfícies, texto e acentos usados como texto/fundo: identidade
   (teal, tipografia, raios, layouts) permanece a mesma.
   ========================================================================== */
:root[data-tema="escuro"] {
    color-scheme: dark;

    /* Superfícies */
    --chrome: #0E141F;
    --fundo: #0E141F;
    --superficie: #161E2D;
    --borda: #263143;
    --borda-suave: #1F2938;

    /* Texto */
    --texto: #E7ECF4;
    --texto-suave: #AEB9C9;
    --texto-fraco: #8D99AD;

    /* Neutros: viram degraus escuros (fundos sutis, hovers, controles) */
    --slate-50: #1A2231;  --slate-100: #222C3D;  --slate-200: #2C374A;
    --slate-300: #3D4A5F; --slate-400: #55637A;  --slate-500: #6E7C93;
    --slate-600: #8C99AE; --slate-700: #A9B4C6;  --slate-800: #C6CFDC;
    --slate-900: #E7ECF4; --navy: #E7ECF4;

    /* Acentos: os fundos viram "óleos" translúcidos e os tons de texto ganham
       luminosidade, porque texto escuro sobre fundo escuro não é legível. */
    --green-50: rgba(47,179,68,0.10);   --green-100: rgba(47,179,68,0.18);   --green-200: rgba(47,179,68,0.28);
    --green-400: #52CB6E; --green-500: #3BBE57; --green-600: #63DD80; --green-700: #8CE9A5;

    --blue-50: rgba(6,111,209,0.12);    --blue-100: rgba(6,111,209,0.20);    --blue-200: rgba(6,111,209,0.30);
    --blue-400: #4FA9EC; --blue-500: #3D9BE5; --blue-600: #6EB6F5; --blue-700: #93CBF8;

    --rose-50: rgba(214,57,57,0.12);    --rose-100: rgba(214,57,57,0.20);    --rose-200: rgba(214,57,57,0.30);
    --rose-400: #EC7C7C; --rose-500: #E46969; --rose-600: #F09494; --rose-700: #F5B3B3;

    --amber-50: rgba(245,159,0,0.12);   --amber-100: rgba(245,159,0,0.20);   --amber-200: rgba(245,159,0,0.30);
    --amber-400: #F9B23C; --amber-500: #F59F00; --amber-600: #F5B44A; --amber-700: #F7CC7A;

    --violet-50: rgba(174,62,201,0.12); --violet-100: rgba(174,62,201,0.20); --violet-200: rgba(174,62,201,0.30);
    --violet-400: #C561D6; --violet-500: #C166D8; --violet-600: #D68AE6; --violet-700: #E6A9F2;

    /* Sombras mais profundas (o fundo já é escuro) */
    --sombra-sm: 0 2px 4px rgba(0, 0, 0, 0.34);
    --sombra-md: 0 2px 4px rgba(0, 0, 0, 0.40), 0 6px 16px rgba(0, 0, 0, 0.34);
    --sombra-lg: 0 12px 32px rgba(0, 0, 0, 0.58);
}

/* Topbar translúcida e limites da sidebar (antes escuros demais para o fundo) */
:root[data-tema="escuro"] .topbar { background: rgba(14, 20, 31, 0.85); }
:root[data-tema="escuro"] .sidebar { border-right-color: rgba(255, 255, 255, 0.07); }
:root[data-tema="escuro"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }

/* Badges e alertas: os rótulos vinham em tons escuros de cada cor */
:root[data-tema="escuro"] .badge--success { color: #7FE79A; }
:root[data-tema="escuro"] .badge--warning { color: #F7C46A; }
:root[data-tema="escuro"] .badge--danger  { color: #F59898; }
:root[data-tema="escuro"] .badge--info    { color: #86C4F7; }
:root[data-tema="escuro"] .badge--violet  { color: #E2A3F0; }

:root[data-tema="escuro"] .alerta--sucesso { color: #7FE79A; border-color: rgba(47, 179, 68, 0.42); }
:root[data-tema="escuro"] .alerta--erro    { color: #F59898; border-color: rgba(214, 57, 57, 0.42); }
:root[data-tema="escuro"] .alerta--aviso   { color: #F7C46A; border-color: rgba(245, 159, 0, 0.42); }
:root[data-tema="escuro"] .alerta--info    { color: #86C4F7; border-color: rgba(66, 153, 225, 0.42); }

/* Gráficos SVG gerados no servidor (grade, eixos e rótulos) */
:root[data-tema="escuro"] .grafico text { fill: #93A0B2; }
:root[data-tema="escuro"] .grafico .grade,
:root[data-tema="escuro"] .grafico .eixo { stroke: #263143; }

/* Opções de <select> nativo acompanham o fundo do campo */
:root[data-tema="escuro"] .form-controle option { background-color: var(--superficie); color: var(--texto); }

/* A impressão continua saindo em papel branco */
@media print {
    :root[data-tema="escuro"] {
        color-scheme: light;
        --fundo: #fff; --chrome: #fff; --superficie: #fff;
        --borda: #E6E7EB; --borda-suave: #EFF0F3;
        --texto: #1E2633; --texto-suave: #626D7D; --texto-fraco: #7E8896;
        --slate-50: #F9FAFB; --slate-100: #EFF0F3; --slate-200: #E6E7EB; --slate-300: #D5D8DE;
        --green-50: #F0F9F2; --green-100: #D9F2DF; --green-600: #26953A; --green-700: #1D7A2F;
        --blue-50: #EBF5FE;  --blue-100: #D3E9FC;  --blue-600: #055CB0;  --blue-700: #044A8E;
        --rose-50: #FDF1F1;  --rose-100: #FADBDB;  --rose-600: #B62F2F;  --rose-700: #932626;
        --amber-50: #FFF8EC; --amber-100: #FEEDD1; --amber-600: #D08700; --amber-700: #A66A00;
        --violet-50: #FAF1FC; --violet-100: #F3DDF7; --violet-600: #9230AB; --violet-700: #77278C;
        --sombra-sm: none; --sombra-md: none; --sombra-lg: none;
    }
    :root[data-tema="escuro"] .topbar { background: #fff; }
    :root[data-tema="escuro"] .grafico text { fill: #7E8896; }
    :root[data-tema="escuro"] .grafico .grade,
    :root[data-tema="escuro"] .grafico .eixo { stroke: #EFF0F3; }
    :root[data-tema="escuro"] .badge--success { color: #1D7A2F; }
    :root[data-tema="escuro"] .badge--warning { color: #A66A00; }
    :root[data-tema="escuro"] .badge--danger  { color: #932626; }
    :root[data-tema="escuro"] .badge--info    { color: #055CB0; }
    :root[data-tema="escuro"] .badge--violet  { color: #77278C; }
    :root[data-tema="escuro"] .alerta--sucesso { color: #1D7A2F; border-color: rgba(47, 179, 68, 0.33); }
    :root[data-tema="escuro"] .alerta--erro    { color: #932626; border-color: rgba(214, 57, 57, 0.33); }
    :root[data-tema="escuro"] .alerta--aviso   { color: #A66A00; border-color: rgba(245, 159, 0, 0.33); }
    :root[data-tema="escuro"] .alerta--info    { color: #055CB0; border-color: rgba(66, 153, 225, 0.33); }
}

/* ---------- Central de ajuda e documentação (/ajuda) ---------- */

/* Abertura: painel com gradiente suave, busca e atalhos para os tópicos. */
.ajuda-hero {
    position: relative; overflow: hidden; isolation: isolate;
    padding: 30px 32px 28px; margin-bottom: 22px;
    background:
        radial-gradient(720px 300px at 4% -30%, rgba(26, 187, 156, 0.16), transparent 72%),
        radial-gradient(620px 280px at 96% -24%, rgba(66, 153, 225, 0.14), transparent 70%),
        var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 12px;
    box-shadow: var(--sombra-md);
}
.ajuda-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(currentColor 1px, transparent 1px);
    background-size: 20px 20px; opacity: 0.09; color: var(--primaria);
    -webkit-mask-image: linear-gradient(105deg, #000 0%, transparent 62%);
    mask-image: linear-gradient(105deg, #000 0%, transparent 62%);
}
.ajuda-hero__selo {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 14px;
    padding: 5px 12px; border-radius: var(--raio-full);
    font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--primaria-escura);
    background: rgba(26, 187, 156, 0.10); border: 1px solid rgba(26, 187, 156, 0.30);
}
.ajuda-hero__selo .badge__ponto { background: var(--primaria); }
.ajuda-hero h1 {
    font-size: 27px; font-weight: 700; letter-spacing: -0.7px;
    color: var(--texto); margin-top: 14px; line-height: 1.2;
}
.ajuda-hero h1 em { font-style: normal; color: var(--primaria); }
.ajuda-hero__sub { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--texto-suave); max-width: 66ch; }

.ajuda-busca {
    display: flex; align-items: center; gap: 10px; max-width: 620px;
    margin-top: 20px; padding: 0 14px; height: 48px;
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio-full); box-shadow: var(--sombra-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ajuda-busca:focus-within { border-color: var(--primaria); box-shadow: 0 0 0 4px rgba(26, 187, 156, 0.16); }
.ajuda-busca svg { color: var(--texto-fraco); flex-shrink: 0; }
.ajuda-busca input {
    flex: 1; min-width: 0; height: 100%; border: 0; outline: 0;
    background: transparent; color: var(--texto); font: inherit; font-size: 14px;
}
.ajuda-busca input::placeholder { color: var(--texto-fraco); }
.ajuda-tecla {
    flex-shrink: 0; padding: 2px 8px; border-radius: 5px;
    font-size: 11px; font-weight: 600; color: var(--texto-fraco);
    background: var(--slate-100); border: 1px solid var(--borda); border-bottom-width: 2px;
}

.ajuda-busca__estado {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 10px; font-size: 12.5px; color: var(--texto-fraco);
}
.ajuda-busca__limpar {
    border: 0; background: transparent; color: var(--primaria-escura);
    font: inherit; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline;
    text-underline-offset: 2px;
}
.ajuda-busca__limpar[hidden] { display: none; }

/* Dica de teclado que aparece quando há o que percorrer. */
.ajuda-busca__dica { display: inline-flex; align-items: center; gap: 6px; }
.ajuda-busca__dica[hidden] { display: none; }

.ajuda-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ajuda-chip {
    padding: 6px 13px; border-radius: var(--raio-full); cursor: pointer;
    font: inherit; font-size: 12.5px; color: var(--texto-suave);
    background: var(--superficie); border: 1px solid var(--borda);
    transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.ajuda-chip:hover {
    color: var(--primaria-escura); border-color: var(--primaria);
    background: rgba(26, 187, 156, 0.08); transform: translateY(-1px);
}

.ajuda-vazio {
    display: none; margin-top: 18px; padding: 18px 20px; text-align: center;
    background: var(--superficie); border: 1px dashed var(--borda);
    border-radius: var(--raio-card); color: var(--texto-suave); font-size: 13.5px;
}
.ajuda-vazio--visivel { display: block; }
.ajuda-vazio strong { display: block; color: var(--texto); font-size: 14px; margin-bottom: 4px; }

/* Trilha de primeiros passos. */
.ajuda-trilha { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.ajuda-trilha__titulo { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--texto-fraco); white-space: nowrap; margin: 0; }
.ajuda-trilha__linha { flex: 1; height: 1px; background: var(--borda); }

.ajuda-passos {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px; margin-bottom: 26px;
}
.ajuda-passo {
    position: relative; padding: 16px 16px 18px;
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio-card); box-shadow: var(--sombra-sm);
}
.ajuda-passo::after {
    content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 2px;
    background: linear-gradient(90deg, var(--primaria), rgba(26, 187, 156, 0.15));
    border-radius: 0 0 3px 3px;
}
.ajuda-passo__num {
    display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: var(--raio-full); color: #fff; font-size: 13px; font-weight: 700;
    background: var(--primaria); box-shadow: 0 5px 12px rgba(26, 187, 156, 0.34);
}
.ajuda-passo h3 { font-size: 13.5px; font-weight: 600; color: var(--texto); margin-top: 12px; margin-bottom: 0; }
.ajuda-passo p { font-size: 12.5px; line-height: 1.6; color: var(--texto-fraco); margin-top: 5px; }

/* Índice visual dos módulos. */
.ajuda-modulos {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 12px; margin-bottom: 8px;
}
.ajuda-modulo {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px;
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio-card); text-decoration: none;
    transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.ajuda-modulo:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); border-color: var(--primaria); }
.ajuda-modulo__icone {
    display: grid; place-items: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 9px;
}
.ajuda-modulo__icone--teal   { background: rgba(26, 187, 156, 0.12);  color: var(--primaria-escura); }
.ajuda-modulo__icone--azul   { background: rgba(6, 111, 209, 0.11);   color: var(--blue-600); }
.ajuda-modulo__icone--violeta{ background: rgba(174, 62, 201, 0.11);  color: var(--violet-600); }
.ajuda-modulo__icone--ambar  { background: rgba(245, 159, 0, 0.13);   color: var(--amber-600); }
.ajuda-modulo__icone--verde  { background: rgba(47, 179, 68, 0.12);   color: var(--green-600); }
.ajuda-modulo__icone--rosa   { background: rgba(214, 57, 57, 0.11);   color: var(--rose-600); }
.ajuda-modulo__corpo { min-width: 0; flex: 1; }
.ajuda-modulo__nome { display: block; font-size: 13.5px; font-weight: 600; color: var(--texto); }
.ajuda-modulo__desc { display: block; font-size: 12px; line-height: 1.55; color: var(--texto-fraco); margin-top: 3px; }
.ajuda-modulo__seta { flex-shrink: 0; color: var(--slate-400); margin-top: 2px; transition: transform 0.14s ease, color 0.14s ease; }
.ajuda-modulo:hover .ajuda-modulo__seta { color: var(--primaria); transform: translateX(3px); }

/* Documentação: sumário fixo + artigo. */
.ajuda-doc {
    --ajuda-cabecalho: 0px;
    display: grid; grid-template-columns: 236px minmax(0, 1fr);
    gap: 24px; align-items: start; margin-top: 26px;
}
.ajuda-indice {
    position: sticky;
    top: calc(var(--topbar-altura) + var(--ajuda-cabecalho) + 16px);
    max-height: calc(100vh - var(--topbar-altura) - var(--ajuda-cabecalho) - 36px);
    overflow: auto;
    padding: 12px; background: var(--superficie);
    border: 1px solid var(--borda); border-radius: var(--raio-card); box-shadow: var(--sombra-sm);
}
.ajuda-indice__titulo {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--texto-fraco); padding: 2px 10px 8px;
}
.ajuda-indice__lista { display: flex; flex-direction: column; gap: 2px; }
.ajuda-indice__rodape {
    margin-top: 10px; padding: 10px; border-radius: var(--raio-sm);
    background: var(--slate-50); border: 1px solid var(--borda-suave);
    font-size: 11.5px; line-height: 1.6; color: var(--texto-fraco);
}
.ajuda-indice__rodape strong { color: var(--texto-suave); }
/* Sem nenhum resultado, some o sumário e a coluna estreita junto. */
.ajuda-doc--vazio { grid-template-columns: minmax(0, 1fr); }
.ajuda-doc--vazio .ajuda-indice { display: none; }

/* O sumário reaproveita o destaque de rolagem já usado em Configurações
   (classe + data-settings-link), que é o que marca o tópico visível. */
.ajuda-indice .settings-nav-link { padding: 8px 10px; font-size: 12.8px; }
.ajuda-indice .settings-nav-link--ativo {
    background: rgba(26, 187, 156, 0.12); color: var(--primaria-escura); font-weight: 600;
    box-shadow: inset 2px 0 0 var(--primaria);
}

.ajuda-conteudo { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.ajuda-secao {
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio-card); box-shadow: var(--sombra-sm);
    padding: 24px 26px 26px; scroll-margin-top: calc(var(--topbar-altura) + 16px);
}
.ajuda-secao[hidden], .ajuda-faq__item[hidden],
.ajuda-indice .settings-nav-link[hidden], .ajuda-topo[hidden] { display: none; }
/* Com uma busca ativa, some a navegação auxiliar (passos e grade de módulos)
   para que só os resultados fiquem à vista. */
.ajuda-busca-ativada .ajuda-navegacao { display: none; }

/* Com busca ativa, o cabeçalho encolhe e acompanha a rolagem: a pessoa segue
   vendo o termo, o contador e o que foi destacado, sem perder o fio. */
.ajuda-busca-ativada .ajuda-hero {
    position: sticky; top: calc(var(--topbar-altura) + 12px); z-index: 70;
    padding: 14px 18px 12px; margin-bottom: 18px;
}
.ajuda-busca-ativada .ajuda-hero h1,
.ajuda-busca-ativada .ajuda-hero__sub,
.ajuda-busca-ativada .ajuda-hero__selo,
.ajuda-busca-ativada .ajuda-chips { display: none; }
.ajuda-busca-ativada .ajuda-busca { margin-top: 0; max-width: none; }

/* Palavra buscada, destacada dentro dos tópicos. */
.ajuda-marca {
    padding: 0 2px; border-radius: 3px; color: inherit;
    background: rgba(250, 204, 21, 0.42);
    box-shadow: inset 0 -2px 0 rgba(245, 185, 20, 0.85);
}
.ajuda-marca--ativa {
    background: rgba(250, 204, 21, 0.86);
    box-shadow: 0 0 0 2px var(--primaria);
}
.ajuda-secao__topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ajuda-secao__numero {
    display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 9px; font-size: 12.5px; font-weight: 700;
    background: var(--slate-100); color: var(--texto-suave);
}
.ajuda-secao h2 { font-size: 17px; font-weight: 600; color: var(--texto); letter-spacing: -0.2px; margin: 0; }
.ajuda-secao p.ajuda-secao__resumo { margin-top: 8px; font-size: 13.5px; line-height: 1.65; color: var(--texto-fraco); }
.ajuda-secao h3 {
    font-size: 13.5px; font-weight: 600; color: var(--texto);
    margin-top: 24px; margin-bottom: 10px; padding-bottom: 8px;
    border-bottom: 1px solid var(--borda-suave);
}
.ajuda-secao h3:first-of-type { margin-top: 20px; }
.ajuda-secao p { margin-top: 12px; font-size: 13.5px; line-height: 1.72; color: var(--texto-suave); }
.ajuda-secao ul, .ajuda-secao ol { margin-top: 12px; padding-left: 20px; }
.ajuda-secao li { font-size: 13.5px; line-height: 1.72; color: var(--texto-suave); margin-top: 6px; }
.ajuda-secao li::marker { color: var(--primaria); font-weight: 600; }
.ajuda-secao li > strong { color: var(--texto); }
.ajuda-secao a { color: var(--primaria-escura); text-decoration: underline; text-underline-offset: 2px; }
.ajuda-secao a:hover { color: var(--primaria); }
.ajuda-secao code, .ajuda-secao kbd {
    font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    font-size: 12.5px; padding: 2px 7px; border-radius: 5px;
    background: var(--slate-100); border: 1px solid var(--borda-suave);
    color: var(--texto); white-space: nowrap;
}
.ajuda-secao kbd { border-bottom-width: 2px; font-weight: 600; color: var(--texto-suave); }
.ajuda-secao .rota {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px;
    color: var(--primaria-escura); background: rgba(26, 187, 156, 0.09);
    border: 1px solid rgba(26, 187, 156, 0.24); border-radius: 5px; padding: 2px 7px;
}

.ajuda-tabela { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
.ajuda-tabela th {
    text-align: left; padding: 9px 12px; font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.4px; text-transform: uppercase; color: var(--texto-fraco);
    background: var(--slate-50); border-bottom: 1px solid var(--borda);
}
.ajuda-tabela td {
    padding: 10px 12px; vertical-align: top; line-height: 1.6;
    color: var(--texto-suave); border-bottom: 1px solid var(--borda-suave);
}
.ajuda-tabela tbody tr:last-child td { border-bottom: 0; }
.ajuda-tabela td:first-child { color: var(--texto); font-weight: 500; }
.ajuda-tabela--meio td, .ajuda-tabela--meio th { text-align: center; }
.ajuda-tabela--meio td:first-child { text-align: left; }
.ajuda-tabela__sim { color: var(--sucesso); font-weight: 700; }
.ajuda-tabela__parcial { color: var(--blue-500); font-weight: 600; }
.ajuda-tabela__nao { color: var(--slate-400); }
.ajuda-tabela--envolta { display: block; overflow-x: auto; }

/* Notas destacadas dentro do artigo. */
.ajuda-nota {
    display: flex; gap: 10px; margin-top: 16px; padding: 13px 15px;
    border: 1px solid; border-radius: var(--raio-sm);
    font-size: 13px; line-height: 1.65;
}
.ajuda-nota svg { flex-shrink: 0; margin-top: 1px; }
.ajuda-nota--dica     { background: rgba(66, 153, 225, 0.10);  border-color: rgba(66, 153, 225, 0.30);  color: #055CB0; }
.ajuda-nota--atencao  { background: rgba(245, 159, 0, 0.11);   border-color: rgba(245, 159, 0, 0.32);   color: #A66A00; }
.ajuda-nota--ok       { background: rgba(47, 179, 68, 0.10);   border-color: rgba(47, 179, 68, 0.30);   color: #1D7A2F; }
.ajuda-nota strong { font-weight: 600; }

/* Perguntas frequentes: sem JavaScript, com <details>. */
.ajuda-faq { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.ajuda-faq__item {
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ajuda-faq__item:hover { border-color: var(--slate-300); }
.ajuda-faq__item[open] { border-color: rgba(26, 187, 156, 0.45); box-shadow: var(--sombra-sm); }
.ajuda-faq__item summary {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    list-style: none; padding: 13px 16px;
    font-size: 13.5px; font-weight: 600; color: var(--texto);
}
.ajuda-faq__item summary::-webkit-details-marker { display: none; }
.ajuda-faq__item summary:hover { color: var(--primaria-escura); }
.ajuda-faq__item summary::after {
    content: "+"; margin-left: auto; font-size: 18px; line-height: 1;
    color: var(--texto-fraco); transition: transform 0.18s ease;
}
.ajuda-faq__item[open] summary::after { content: "–"; color: var(--primaria); }
.ajuda-faq__resposta { padding: 0 16px 15px; font-size: 13.3px; line-height: 1.7; color: var(--texto-suave); }
.ajuda-faq__resposta p { margin-top: 8px; }
.ajuda-faq__resposta p:first-child { margin-top: 0; }
.ajuda-faq__resposta a { color: var(--primaria-escura); text-decoration: underline; text-underline-offset: 2px; }

/* Encerramento. */
.ajuda-fim {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px; margin-top: 4px;
}
.ajuda-fim__cartao {
    display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px;
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio-card); text-decoration: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.ajuda-fim__cartao:hover { border-color: var(--primaria); box-shadow: var(--sombra-md); }
.ajuda-fim__cartao strong { display: block; font-size: 13.5px; color: var(--texto); }
.ajuda-fim__cartao span { display: block; font-size: 12.5px; line-height: 1.55; color: var(--texto-fraco); margin-top: 3px; }
.ajuda-fim__cartao svg { flex-shrink: 0; color: var(--primaria-escura); }

.ajuda-topo {
    position: fixed; right: 22px; bottom: 22px; z-index: 60;
    display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: var(--raio-full); cursor: pointer;
    background: var(--superficie); border: 1px solid var(--borda);
    color: var(--texto-suave); box-shadow: var(--sombra-lg);
    opacity: 0; transform: translateY(10px); pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.15s ease, color 0.15s ease;
}
.ajuda-topo--visivel { opacity: 1; transform: none; pointer-events: auto; }
.ajuda-topo:hover { background: var(--primaria); border-color: var(--primaria); color: #fff; }

@media (max-width: 1100px) {
    .ajuda-doc { grid-template-columns: minmax(0, 1fr); }
    .ajuda-indice { position: static; max-height: none; overflow: visible; }
    .ajuda-indice__lista { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .ajuda-indice .settings-nav-link {
        border: 1px solid var(--borda); border-radius: var(--raio-full); padding: 5px 12px;
    }
    .ajuda-indice .settings-nav-link--ativo { box-shadow: none; border-color: var(--primaria); }
}

@media (max-width: 820px) {
    .ajuda-hero { padding: 24px 20px; }
    .ajuda-hero h1 { font-size: 23px; }
    .ajuda-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ajuda-trilha__titulo { display: none; }
    .ajuda-secao { padding: 20px 18px 22px; }
}

@media (max-width: 620px) {
    .ajuda-passos { grid-template-columns: minmax(0, 1fr); }
    .ajuda-modulos { grid-template-columns: minmax(0, 1fr); }
    .ajuda-hero h1 { font-size: 21px; }
    .ajuda-topo { right: 14px; bottom: 14px; }
}

@media print {
    .ajuda-indice, .ajuda-busca, .ajuda-busca__estado, .ajuda-chips, .ajuda-topo, .ajuda-trilha { display: none !important; }
    .ajuda-doc { grid-template-columns: minmax(0, 1fr); }
    .ajuda-hero, .ajuda-secao, .ajuda-passo, .ajuda-modulo { box-shadow: none; break-inside: avoid; }
    .ajuda-secao a { color: inherit; }
}

/* Contraste dos destaques sobre o fundo escuro (o mesmo cuidado dos .alerta). */
:root[data-tema="escuro"] .ajuda-hero__selo { color: var(--green-600); }
:root[data-tema="escuro"] .ajuda-marca {
    background: rgba(250, 204, 21, 0.24);
    box-shadow: inset 0 -2px 0 rgba(250, 204, 21, 0.55);
}
:root[data-tema="escuro"] .ajuda-marca--ativa {
    background: rgba(250, 204, 21, 0.45);
    box-shadow: 0 0 0 2px var(--primaria);
}
:root[data-tema="escuro"] .ajuda-nota--dica    { color: var(--blue-400); }
:root[data-tema="escuro"] .ajuda-nota--atencao { color: var(--amber-400); }
:root[data-tema="escuro"] .ajuda-nota--ok      { color: var(--green-400); }
:root[data-tema="escuro"] .ajuda-secao .rota { color: var(--green-600); }
:root[data-tema="escuro"] .ajuda-modulo__icone--teal { color: var(--green-600); }
:root[data-tema="escuro"] .ajuda-tabela__parcial { color: var(--blue-400); }