/* =============================================================================
   VARIÁVEIS OFICIAIS M&A INTELIGÊNCIA CONTÁBIL
   Manual de Identidade Visual: Azul Marinho #1A2B4C, Dourado #C9A04B, Branco #FFF
   Todo o sistema referencia estas 3 raízes. Não usar hex diretos em outros lugares.
   ============================================================================= */
:root {
    /* NAVY */
    --mea-navy:        #1A2B4C;
    --mea-navy-esc:    #0F1B32;
    --mea-navy-hover:  #2A4270;
    --mea-navy-suave:  #E8ECF3;

    /* DOURADO */
    --mea-dourado:       #F0C020;
    --mea-dourado-esc:   #C99B15;
    --mea-azul-pos:      #1E5FCB;
    --mea-azul-pos-esc:  #164499;
    --mea-dourado-suave: rgba(240, 192, 32, 0.12);
    --mea-dourado-borda: rgba(240, 192, 32, 0.35);

    /* BRANCO / NEUTROS */
    --mea-branco:      #FFFFFF;
    --mea-cinza-1:     #F8FAFC;   /* fundo geral */
    --mea-cinza-2:     #F1F5F9;   /* fundo cards secundários */
    --mea-cinza-3:     #E5E7EB;   /* borda */
    --mea-cinza-4:     #CBD5E1;   /* borda forte */
    --mea-cinza-5:     #94A3B8;   /* texto fraco */
    --mea-cinza-6:     #64748B;   /* texto secundário */
    --mea-cinza-7:     #334155;   /* texto */
    --mea-cinza-8:     #0F172A;   /* texto forte */

    /* SEMÂNTICAS (para status) */
    --mea-sucesso:  #16a34a;
    --mea-erro:     #dc2626;
    --mea-alerta:   #f59e0b;
    --mea-info:     #0284c7;

    /* SOMBRAS (escala única) */
    --sh-1: 0 1px 2px rgba(26, 43, 76, 0.05);
    --sh-2: 0 2px 8px rgba(26, 43, 76, 0.06);
    --sh-3: 0 4px 16px rgba(26, 43, 76, 0.08);
    --sh-4: 0 8px 24px rgba(26, 43, 76, 0.10);

    /* RADIUS (escala única) */
    --r-1: 8px;    /* elementos pequenos */
    --r-2: 12px;   /* cards */
    --r-3: 999px;  /* pílulas */

    /* ESPAÇAMENTOS */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
}

/* Compatibilidade: --cor-primaria e amigas apontam pras vars oficiais */
:root {
    --cor-primaria:        var(--mea-navy);
    --cor-primaria-escura: var(--mea-navy-esc);
    --cor-primaria-hover:  var(--mea-navy-hover);
    --cor-primaria-suave:  var(--mea-navy-suave);
    --cor-marca-navy:      var(--mea-navy);
    --texto:               var(--mea-navy);
}

/* ============================================================
   M&A Inteligência Contábil - Design System
   Tema light. Paleta FIXA da M&A, igual para todos os clientes.

   A cor NAO vem mais do banco. Ate 2026-08-02 o base.html injetava
   empresa.cor_primaria num <style> e sobrescrevia este arquivo.
   Decisao do usuario: identidade unica da M&A. Registro completo em
   00_GENESIS/LASTRO.md, secao "A cor e da M&A, nao do cliente".

   PROIBIDO escrever hex de marca em template. Sempre var(--...).
   Prova: 00_GENESIS/CONFORMIDADE_VAULT.md, linhas 1 e 3.
   ============================================================ */

:root {
    /* --- Acao: o navy da marca age. Botao primario, link, foco. -----
       Escolha do usuario em 2026-08-02. O azul anterior (#046BD2) nao era
       da marca: era o --ast-global-color-0, o azul padrao do tema Astra do
       site. A identidade da M&A tem navy e ouro, nao tem azul medio.
       Contraste com texto branco: 17,39:1, AAA com folga.

       CONSEQUENCIA ACEITA: --cor-primaria e --texto sao a MESMA cor. O botao
       se destaca pela forma e pelo preenchimento, nao pela cor. Por isso o
       link ganhou sublinhado permanente (ver a regra de `a` mais abaixo):
       sem ele, link e texto ficam indistinguiveis, o que quebra a
       WCAG 1.4.1, que proibe usar SO cor para transmitir informacao. */
    --cor-primaria: #1A2B4C;

    /* Mais escura de verdade. Usada como COR DE TEXTO sobre fundo claro
       e nas pontas de gradiente. */
    --cor-primaria-escura: #0F1B32;

    /* Hover de botao preenchido. Com base quase preta, escurecer nao se
       percebe: o hover CLAREIA. Token proprio para o nome de
       --cor-primaria-escura nao passar a mentir. */
    --cor-primaria-hover: #2A4270;

    /* Tinta clara para fundo de item ativo e badge. */
    --cor-primaria-suave: #EAEDF4;

    /* --- Marca: o ouro assina, nunca age. ---------------------------
       Traco, nunca area: filete, borda, eyebrow, texto curto.
       PROIBIDO como fundo de botao, card, sidebar ou faixa larga. */
    --cor-marca-ouro: #C9A84C;
    --cor-marca-ouro-claro: #E8C87A;
    --cor-marca-ouro-borda: rgba(201, 168, 76, .22);

    /* Ouro para TEXTO sobre superficie clara. Existe porque o ouro da marca
       da 2,29:1 com branco e reprova os 4,5:1 da WCAG para texto normal.
       Este da 4,89:1. Regra: sobre fundo claro, ouro cheio so no que nao e
       texto (fio, aro, borda); texto dourado usa este tom. Sobre navy, o
       ouro cheio pode ser texto, e o que o Portal MEI faz. */
    --cor-marca-ouro-texto: #8A6D22;

    /* Navy da marca. So texto e detalhe.
       PROIBIDO como fundo de sidebar, topbar, card ou tela.
       Valor conferido em duas fontes independentes em 2026-08-02:
       o --navy declarado no CSS do site (#1A2B4C) e o fundo dos arquivos
       de logo (#011131 e #02153A). Minha primeira estimativa, feita a olho
       sobre o cartao renderizado, era #0F2B4D e estava clara demais. */
    --cor-marca-navy: #1A2B4C;

    /* --- Superficies ------------------------------------------------
       O fundo e branco NEUTRO, nao azulado: e o que o material
       impresso da M&A usa. Era #F6F7F9 (frio) ate 2026-08-02. */
    --branco: #FFFFFF;
    --fundo: #F4F4F2;
    --fundo-card: #FFFFFF;
    --borda: #E4E4E0;
    --borda-forte: #CFCFC9;

    /* Bege, o bloco secundario. Anda junto com o ouro, e so nos cinco
       lugares definidos no LASTRO: cabecalho de card com eyebrow, barra
       de filtros, estado vazio, rodape de modal, faixa de marca do login.
       PROIBIDO em linha de tabela, input, card de KPI e sidebar. */
    --cor-creme: #F8F5EF;

    /* --- Texto: o navy da marca e a cor do texto forte --------------
       Um navy so no sistema inteiro. Dois tons de navy e o jeito mais
       rapido de a tela parecer suja. */
    --texto: #1A2B4C;
    --texto-suave: #475569;
    --texto-secundario: #64748B;
    --texto-fraco: #94A3B8;

    --verde: #059669;
    --verde-escuro: #047857;
    --verde-suave: #ECFDF5;
    --ambar: #D97706;
    --ambar-suave: #FFFBEB;
    --vermelho: #DC2626;
    --vermelho-suave: #FEF2F2;
    --azul-info: #2563EB;
    --azul-suave: #EFF4FF;
    --roxo: #7C3AED;
    --roxo-suave: #F3EEFF;

    --sombra-sm: 0 1px 2px rgba(15,23,42,.06);
    --sombra: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
    --sombra-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
    --sombra-lg: 0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06);

    --raio-sm: 8px;
    --raio: 12px;
    --raio-lg: 18px;
    --raio-full: 999px;

    --transicao: 160ms cubic-bezier(.4,0,.2,1);

    /* Largura da sidebar (controlada via drag handle, persiste em localStorage) */
    --sidebar-width: 248px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--fundo);
    color: var(--texto);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--texto);
    line-height: 1.2;
}
/* Link SUBLINHADO por padrao, e isso nao e escolha estetica.
   Desde 2026-08-02 --cor-primaria e --texto sao a mesma cor (o navy da
   marca), entao link e texto comum ficam indistinguiveis pela cor. A
   WCAG 1.4.1 proibe usar SO cor para transmitir informacao, e o
   sublinhado e o segundo sinal.
   Componentes que nao sao link de leitura (.btn, .nav-item, .btn-home-side,
   card clicavel) ja zeram text-decoration nas regras deles. */
a {
    color: var(--cor-primaria);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--cor-marca-ouro);
}
a:hover { text-decoration-color: var(--cor-primaria); }

/* ============================================================
   LAYOUT APP
   ============================================================ */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-width);
    background: var(--branco);
    border-right: 1px solid var(--borda);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 40;
    transition: transform var(--transicao);
}

/* Handle de redimensionamento (lado direito da sidebar) */
.sidebar-resize {
    position: absolute;
    top: 0; right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 41;
    background: transparent;
    transition: background .12s ease;
}
.sidebar-resize:hover,
.sidebar-resize.arrastando {
    background: var(--cor-primaria);
    opacity: .35;
}
body.sidebar-arrastando { user-select: none; cursor: col-resize !important; }
body.sidebar-arrastando .sidebar,
body.sidebar-arrastando .conteudo,
body.sidebar-arrastando .topbar { transition: none !important; }

.sidebar-marca {
    padding: 22px 20px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--borda);
}
.sidebar-marca .logo-quadro {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--branco);
    border: 2px solid var(--cor-primaria);
    display: grid; place-items: center;
    color: var(--cor-primaria); flex-shrink: 0;
    overflow: hidden;
}
.sidebar-marca .logo-quadro i { font-size: 22px; }
.sidebar-marca .logo-quadro img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-marca .marca-nome {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.02em;
    line-height: 1.1;
}
.sidebar-marca .marca-sub {
    font-size: 11px;
    color: var(--texto-fraco);
    font-weight: 500;
}

.sidebar-nav { flex: 1; padding: 14px 12px; overflow-y: auto; }

/* Sanfona: container de cada grupo */
.sidebar-nav .grupo {
    margin-bottom: 2px;
}

/* Header clicavel do grupo */
.sidebar-nav .grupo-cab {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 10px 4px;
    font-family: inherit;
    text-align: left;
    border-radius: var(--raio-sm);
    transition: background var(--transicao);
}
.sidebar-nav .grupo-cab:hover {
    background: var(--fundo);
}
.sidebar-nav .grupo-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--texto-fraco);
    flex: 1;
}
.sidebar-nav .grupo-chevron {
    color: var(--texto-fraco);
    font-size: 12px;
    transition: transform .22s ease;
    flex-shrink: 0;
    opacity: .7;
}
.sidebar-nav .grupo.aberto .grupo-chevron {
    transform: rotate(90deg);
}

/* Corpo colapsavel: usa grid-template-rows pra transicao suave */
.sidebar-nav .grupo-corpo {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease;
}
.sidebar-nav .grupo.aberto .grupo-corpo {
    grid-template-rows: 1fr;
}
.sidebar-nav .grupo-corpo > .corpo-interno {
    overflow: hidden;
    min-height: 0;
}

/* Sub-grupo: tipografia bem diferente do grupo (minuscula, sem uppercase) */
.sidebar-nav .sub-grupo {
    margin: 0;
}
.sidebar-nav .sub-grupo-cab {
    /* Mesmo box-model dos .nav-item (que são <a>) - buttons têm margem/padding
       defaults do browser que precisam ser zerados pra alinhar verticalmente. */
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    background: transparent;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px 5px 14px;
    font: inherit;
    text-align: left;
    border-radius: var(--raio-sm);
    transition: background var(--transicao), color var(--transicao);
}
.sidebar-nav .sub-grupo-cab:hover {
    background: var(--fundo);
}
.sidebar-nav .sub-grupo-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--texto-secundario);
    flex: 1;
}
/* Sub-grupo COM icone (ex: "Avancado") = mesma cara dos itens do menu */
.sidebar-nav .sub-grupo.com-icone > .sub-grupo-cab {
    gap: 9px;
    padding: 6px 9px;
    color: var(--texto-suave);
}
.sidebar-nav .sub-grupo.com-icone > .sub-grupo-cab:hover {
    color: var(--texto);
}
.sidebar-nav .sub-grupo.com-icone > .sub-grupo-cab > .sub-grupo-icone {
    font-size: 16px;
    flex-shrink: 0;
    opacity: .85;
}
.sidebar-nav .sub-grupo.com-icone > .sub-grupo-cab > .sub-grupo-label {
    font-size: 13px;
    font-weight: 500;
    color: inherit;
}
.sidebar-nav .sub-grupo-chevron {
    color: var(--texto-fraco);
    font-size: 11px;
    opacity: .55;
    transition: transform .22s ease;
    flex-shrink: 0;
}
.sidebar-nav .sub-grupo.aberto .sub-grupo-chevron {
    transform: rotate(90deg);
}
.sidebar-nav .sub-grupo-corpo {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .22s ease;
}
.sidebar-nav .sub-grupo.aberto .sub-grupo-corpo {
    grid-template-rows: 1fr;
}
.sidebar-nav .sub-grupo[data-agrupador]:not(.aberto) .sub-grupo-corpo {
    display: none;
}
.sidebar-nav .sub-grupo[data-agrupador].aberto .sub-grupo-corpo {
    display: block;
}
/* Agrupador (3o nivel) usa mesmo tamanho/peso dos nav-items */
.sidebar-nav .sub-grupo[data-agrupador] > .sub-grupo-cab {
    padding: 8px 12px;
    gap: 10px;
}
.sidebar-nav .sub-grupo[data-agrupador] > .sub-grupo-cab .sub-grupo-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--texto);
    text-transform: none;
    letter-spacing: 0;
}
.sidebar-nav .sub-grupo[data-agrupador] > .sub-grupo-cab > i:first-child {
    font-size: 16px;
    color: var(--texto-secundario);
}
.sidebar-nav .sub-grupo-corpo > .corpo-interno {
    overflow: hidden;
    min-height: 0;
    /* Linha-guia vertical conectando os itens filhos ao sub-grupo */
    margin-left: 18px;
    padding-left: 10px;
    border-left: 1px solid var(--borda);
}

/* Itens diretos do grupo (sem sub-grupo) tambem ganham indentacao consistente */
.sidebar-nav .grupo-corpo > .corpo-interno > .nav-item {
    margin-left: 8px;
}
/* Sub-grupos diretos do grupo (ex: "Avancado") alinham com os nav-items
   irmaos - mesmo recuo de 8px, senao o cabecalho fica colado a esquerda. */
.sidebar-nav .grupo-corpo > .corpo-interno > .sub-grupo {
    margin-left: 8px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 9px;
    border-radius: var(--raio-sm);
    color: var(--texto-suave);
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 1px;
    transition: background var(--transicao), color var(--transicao);
    text-decoration: none;
}
.nav-item:hover {
    background: var(--fundo);
    color: var(--texto);
    text-decoration: none;
}
/* Item ativo: tinta navy no fundo, fio dourado na borda esquerda.
   E o mesmo gesto dos tracos que flanqueiam "CONTÁBIL" no logo: o ouro
   marca, nao preenche. O box-shadow inset desenha o fio sem mexer no
   padding, entao o texto nao pula ao ativar o item. */
.nav-item.ativo {
    background: var(--cor-primaria-suave);
    color: var(--cor-primaria-escura);
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--cor-marca-ouro);
}
.nav-item i { font-size: 16px; flex-shrink: 0; opacity: .85; }
.nav-item.ativo i { opacity: 1; }
.nav-item .nav-texto { flex: 1; }

/* item esmaecido (em breve) */
.nav-item.esmaecido {
    color: var(--texto-fraco);
    cursor: not-allowed;
    opacity: .65;
}
.nav-item.esmaecido:hover {
    background: transparent;
    color: var(--texto-fraco);
}
.tag-em-breve {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--fundo);
    color: var(--texto-fraco);
    padding: 2px 7px;
    border-radius: var(--raio-full);
    border: 1px solid var(--borda);
}

.sidebar-rodape { padding: 12px; border-top: 1px solid var(--borda); }
/* Botão Início: leva pro hub principal. Acima do bloco do usuário no rodapé. */
.btn-home-side {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    margin-bottom: 8px;
    border-radius: var(--raio-sm);
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura));
    border: 1px solid var(--cor-marca-ouro-borda);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: transform var(--transicao), box-shadow var(--transicao);
    box-shadow: 0 2px 8px rgba(1, 21, 74, .15);
}
.btn-home-side:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(1, 21, 74, .25);
}
.btn-home-side.ativo {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.4), 0 2px 8px rgba(1, 21, 74, .25);
}
.btn-home-side i { font-size: 17px; flex-shrink: 0; }

.usuario-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--raio-sm);
}
.avatar {
    width: 34px; height: 34px;
    border-radius: var(--raio-full);
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura));
    color: #fff;
    display: grid; place-items: center;
    font-weight: 700;
    font-size: 13px;
    font-family: 'Sora', sans-serif;
    flex-shrink: 0;
}
.usuario-box .info { min-width: 0; flex: 1; }
.usuario-box .info .nome {
    font-weight: 600; font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.usuario-box .info .papel { font-size: 11px; color: var(--texto-fraco); }

.conteudo { flex: 1; margin-left: var(--sidebar-width); min-width: 0; }

/* === Modo SEM SIDEBAR (tela Início) ===
   Esconde a aside e o handle de resize, e zera o margin-left do conteúdo
   pra que ele ocupe a tela inteira. */
body.sem-sidebar .sidebar,
body.sem-sidebar .sidebar-resize,
body.sem-sidebar .overlay-mob { display: none !important; }
body.sem-sidebar .conteudo { margin-left: 0; }
body.sem-sidebar .topbar .btn-menu { display: none; }
/* Anula o max-width e o padding do .pagina - assim o gradiente do .home-wrap
   ocupa de borda a borda, sem faixas brancas nas laterais. */
body.sem-sidebar .pagina { padding: 0; max-width: none; margin: 0; }

/* === Grupo ÚNICO (sidebar mostrando só a área onde estamos) ===
   Quando o sidebar mostra um único grupo, esconde o cabeçalho/sanfona - o
   próprio título da página no topbar já comunica onde estamos. Sub-grupos e
   itens ficam direto, sem precisar clicar pra abrir. */
.sidebar-nav .grupo.grupo-unico > .grupo-cab { display: none; }
/* Mantém o display:grid mas força grid-template-rows: 1fr pra não animar
   sanfona (já está sempre aberto). */
.sidebar-nav .grupo.grupo-unico > .grupo-corpo { grid-template-rows: 1fr; }
.sidebar-nav .grupo.grupo-unico > .grupo-corpo > .corpo-interno { padding-top: 4px; }

/* === Sub-grupo FIXO (nível 1 dentro de uma área) ===
   Quando estamos no modo "grupo único", os sub-grupos do nível 1 ficam sempre
   abertos - eles viram cabeçalhos de seção. Sem chevron, sem hover de botão,
   tipografia mais discreta. Os itens internos aparecem direto. */
.sidebar-nav .sub-grupo.fixo {
    margin-left: 0;     /* anula o margin-left: 8px da regra .grupo-corpo > .corpo-interno > .sub-grupo */
}
.sidebar-nav .sub-grupo.fixo > .sub-grupo-cab {
    cursor: default;
    pointer-events: none;       /* não dá pra clicar pra fechar */
    padding: 10px 8px 3px 8px;
}
/* Primeira seção: sem padding-top extra - economiza espaço no topo do menu */
.sidebar-nav .grupo-corpo > .corpo-interno > .sub-grupo.fixo:first-child > .sub-grupo-cab {
    padding-top: 2px;
}
.sidebar-nav .sub-grupo.fixo > .sub-grupo-cab:hover { background: transparent; }
.sidebar-nav .sub-grupo.fixo > .sub-grupo-cab .sub-grupo-chevron { display: none; }
.sidebar-nav .sub-grupo.fixo > .sub-grupo-cab .sub-grupo-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--texto-fraco);
    text-transform: uppercase;
    letter-spacing: .06em;
}
/* Garante grid-template-rows: 1fr (não animar sanfona) */
.sidebar-nav .sub-grupo.fixo > .sub-grupo-corpo { grid-template-rows: 1fr; }
/* Itens internos: alinhamento bem próximo do header, sem indentação extra */
.sidebar-nav .sub-grupo.fixo > .sub-grupo-corpo > .corpo-interno {
    margin-left: 0;
    padding-left: 0;
    border-left-color: transparent;  /* sem linha vertical no nível 1 fixo */
}

.topbar {
    height: 62px;
    background: var(--branco);
    border-bottom: 1px solid var(--borda);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 30;
}
.topbar .btn-menu {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--texto);
    cursor: pointer;
}
.topbar .titulo-pagina {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -.02em;
}
.topbar .topbar-dir {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pagina { padding: 26px 32px 60px; max-width: 1500px; margin: 0 auto; width: 100%; }

/* ============================================================
   BOTOES
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 16px;
    border-radius: var(--raio-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transicao);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
}
.btn i { font-size: 18px; }
.btn:hover { text-decoration: none; }

/* Botao primario: navy preenche, ouro contorna.
   O fio dourado de 1px e o gesto do material impresso da M&A, onde o ouro
   sempre aparece como linha e nunca como area. Cabe sem deslocar nada
   porque .btn ja declara border: 1px solid transparent.
   PROIBIDO preencher de ouro: botao de acao aparece dezenas de vezes por
   tela, e ouro em tudo deixa de ser assinatura e vira o padrao da interface. */
.btn-primario {
    background: var(--cor-primaria);
    border-color: var(--cor-marca-ouro);
    color: #fff;
    box-shadow: var(--sombra-sm);
}
.btn-primario:hover {
    background: var(--cor-primaria-hover);
    border-color: var(--cor-marca-ouro-claro);
    box-shadow: var(--sombra-md);
    transform: translateY(-1px);
    color: #fff;
}
.btn-secundario {
    background: var(--branco);
    color: var(--texto);
    border-color: var(--borda-forte);
}
.btn-secundario:hover { background: var(--fundo); border-color: var(--texto-fraco); color: var(--texto); }

.btn-perigo {
    background: var(--vermelho-suave);
    color: var(--vermelho);
    border-color: #FCA5A5;
}
.btn-perigo:hover { background: #FEE2E2; color: var(--vermelho); }

.btn-excel { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }
.btn-excel:hover { background: #A7F3D0; color: #064E3B; }

.btn-fantasma { background: transparent; color: var(--texto-suave); border: 1px solid transparent; }
.btn-fantasma:hover { background: var(--fundo); color: var(--texto); }

.btn-sm { padding: 7px 11px; font-size: 13px; }
.btn-sm i { font-size: 16px; }
.btn-bloco { width: 100%; }
.btn-lg { padding: 13px 22px; font-size: 15px; }

.btn-icone {
    background: transparent;
    border: 1px solid transparent;
    padding: 7px;
    border-radius: 6px;
    color: var(--texto-suave);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    text-decoration: none;
    transition: all var(--transicao);
}
.btn-icone i { font-size: 17px; display: block; }
.btn-icone:hover { background: var(--fundo); color: var(--cor-primaria); }
.btn-icone.perigo:hover { background: var(--vermelho-suave); color: var(--vermelho); }

/* botao + de cadastrar UTM inline */
.btn-add-inline {
    background: var(--cor-primaria-suave);
    color: var(--cor-primaria-escura);
    border: 1px solid var(--cor-primaria-suave);
    padding: 0 10px;
    height: 38px;
    border-radius: var(--raio-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 13px;
    transition: all var(--transicao);
}
.btn-add-inline:hover {
    background: var(--cor-primaria);
    color: #fff;
    border-color: var(--cor-primaria);
}
.btn-add-inline i { font-size: 16px; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
    background: var(--fundo-card);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-sm);
    margin-bottom: 18px;
}
.card-corpo { padding: 20px; }
.card-cabecalho {
    padding: 16px 20px;
    border-bottom: 1px solid var(--borda);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.card-cabecalho h3 { font-size: 15px; }
.card-cabecalho .esq {
    display: flex; align-items: center; gap: 10px;
}
.card-cabecalho .esq i { color: var(--cor-primaria); font-size: 18px; }

/* ============================================================
   KPIs
   ============================================================ */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.kpi {
    background: var(--fundo-card);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 18px;
    box-shadow: var(--sombra-sm);
}
.kpi-icone {
    width: 40px; height: 40px;
    border-radius: 11px;
    display: grid; place-items: center;
    margin-bottom: 14px;
}
.kpi-icone i { font-size: 22px; }
.kpi-icone.azul   { background: var(--azul-suave);    color: var(--azul-info); }
.kpi-icone.verde  { background: var(--verde-suave);   color: var(--verde); }
.kpi-icone.ambar  { background: var(--ambar-suave);   color: var(--ambar); }
.kpi-icone.roxo   { background: var(--roxo-suave);    color: var(--roxo); }
.kpi-icone.laranja{ background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }
.kpi-valor {
    font-family: 'Sora', sans-serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
}
.kpi-label {
    font-size: 13px;
    color: var(--texto-suave);
    margin-top: 5px;
    font-weight: 500;
}

/* ============================================================
   TABELAS
   ============================================================ */
.tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
table.tabela th {
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-fraco);
    padding: 11px 14px;
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
    background: var(--branco);
}
table.tabela td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--borda);
    vertical-align: middle;
}
table.tabela tbody tr:last-child td { border-bottom: none; }
table.tabela tbody tr:hover { background: var(--fundo); }
table.tabela.zebra tbody tr:nth-child(even) { background: #FAFBFC; }
table.tabela.zebra tbody tr:nth-child(even):hover { background: var(--fundo); }

.td-num { text-align: right; font-variant-numeric: tabular-nums; }
.td-acoes { white-space: nowrap; text-align: right; width: 1%; }
.td-acoes .btn-icone + .btn-icone { margin-left: 2px; }
.td-truncar {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--raio-full);
    line-height: 1.4;
}
.badge i { font-size: 13px; }
.badge.cinza   { background: var(--fundo); color: var(--texto-suave); }
.badge.verde   { background: var(--verde-suave);    color: var(--verde); }
.badge.ambar   { background: var(--ambar-suave);    color: var(--ambar); }
.badge.vermelho{ background: var(--vermelho-suave); color: var(--vermelho); }
.badge.azul    { background: var(--azul-suave);     color: var(--azul-info); }
.badge.laranja { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }

/* Badges de status: tokens semânticos (substituem hex inline nos templates) */
.badge.ativo      { background: var(--verde-suave);    color: var(--verde); }
.badge.inativo    { background: var(--fundo);           color: var(--texto-secundario); }
.badge.pendente   { background: var(--ambar-suave);     color: var(--ambar); }
.badge.baixado    { background: var(--fundo);           color: var(--texto-secundario); }
.badge.transferido{ background: var(--azul-suave);      color: var(--azul-info); }
.badge.pagar      { background: var(--vermelho-suave);  color: var(--vermelho); }
.badge.receber    { background: var(--ambar-suave);     color: var(--ambar); }
.badge.corrente   { background: var(--azul-suave);      color: var(--mea-navy); }
.badge.poupanca   { background: var(--ambar-suave);     color: var(--ambar); }
.badge.aplicacao  { background: #FEF3C7;                color: #78350F; }
.badge.cartao     { background: var(--vermelho-suave);  color: var(--vermelho); }
.badge.caixinha   { background: var(--fundo);           color: var(--texto-secundario); }
.badge.integrado  { background: #E0E7FF;                color: #3730A3; }
.badge.manual     { background: var(--fundo);           color: var(--texto-secundario); }
.badge.rascunho   { background: #FFEDD5;                color: #9A3412; }
.badge.efetivado  { background: var(--ambar-suave);     color: var(--ambar); }
.badge.aberto     { background: #FFEDD5;                color: #9A3412; }
.badge.cancelado  { background: var(--fundo);           color: var(--texto-secundario); }
.badge.nenhum     { background: var(--fundo);           color: var(--texto-secundario); }

/* ============================================================
   FORMULARIOS
   ============================================================ */
.campo { margin-bottom: 16px; }
.campo label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--texto);
}
.campo .ajuda {
    font-size: 12px;
    color: var(--texto-fraco);
    margin-top: 5px;
}
.input, .textarea, .select {
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--texto);
    background: var(--branco);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-sm);
    padding: 10px 12px;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-suave);
}
.textarea { resize: vertical; min-height: 90px; }
.linha-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.linha-campos-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.linha-campos-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}
.linha-campos-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 14px;
}
.check-linha {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    cursor: pointer;
}
.check-linha input { width: 17px; height: 17px; accent-color: var(--cor-primaria); }
.check-linha .txt { font-size: 13.5px; font-weight: 500; }

.input-cor {
    width: 100%;
    height: 42px;
    padding: 4px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-sm);
    cursor: pointer;
    background: var(--branco);
}

/* select com botao + ao lado */
.select-com-add {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    align-items: stretch;
}
.select-com-add .select { height: 38px; }

/* ============================================================
   SPINNER INLINE (substitui conteudo de um container durante load)
   ============================================================ */
.loading-inline {
    padding: 80px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    background: var(--branco);
}
.loading-inline .spinner-circle {
    width: 44px;
    height: 44px;
    border: 4px solid var(--borda);
    border-top-color: var(--cor-primaria);
    border-radius: 50%;
    animation: spinner-rotate .8s linear infinite;
}
.loading-inline .loading-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--texto);
}

/* ============================================================
   MENU SANDUICHE da TabelaAvancada
   ============================================================ */
.ta-menu-wrapper {
    position: relative;
    display: inline-block;
}
.ta-menu-btn {
    width: 36px;
    height: 36px;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--texto-suave);
    transition: all var(--transicao);
}
.ta-menu-btn:hover {
    background: var(--fundo);
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
}
.ta-menu-btn i { font-size: 18px; }

.ta-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 60;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-lg);
    min-width: 200px;
    padding: 4px 0;
    display: none;
    animation: modalSobe .15s ease;
}
.ta-menu.aberto { display: block; }
.ta-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 13.5px;
    color: var(--texto);
    cursor: pointer;
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: 'Inter', sans-serif;
    transition: all var(--transicao);
}
.ta-menu-item:hover { background: var(--fundo); color: var(--cor-primaria); }
.ta-menu-item i {
    color: var(--texto-fraco);
    font-size: 16px;
    width: 18px;
    text-align: center;
    transition: color var(--transicao);
}
.ta-menu-item:hover i { color: var(--cor-primaria); }
.ta-menu-divider {
    height: 1px;
    background: var(--borda);
    margin: 4px 0;
}

/* ============================================================
   CHIPS DE FILTROS SALVOS (Mautic e telas similares)
   ============================================================ */
.filtros-chips-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    margin-bottom: 16px;
}
.filtros-chips-bar .fc-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-fraco);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.filtros-chips-bar .fc-vazio {
    font-size: 12.5px;
    color: var(--texto-fraco);
    font-style: italic;
}
.fc-lista {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    align-items: center;
}
.filtro-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--branco);
    border: 1px solid var(--borda-forte);
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--texto);
    cursor: pointer;
    transition: all var(--transicao);
}
.filtro-chip:hover {
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
}
.filtro-chip.ativo {
    background: var(--cor-primaria);
    color: #fff;
    border-color: var(--cor-primaria);
}
.filtro-chip .chip-x {
    font-size: 14px;
    opacity: 0.5;
    padding: 1px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: all var(--transicao);
}
.filtro-chip .chip-x:hover { opacity: 1; background: rgba(0,0,0,0.1); }
.filtro-chip.ativo .chip-x:hover { background: rgba(255,255,255,0.3); }
.btn-novo-chip {
    width: 32px;
    height: 32px;
    background: var(--branco);
    border: 1px dashed var(--cor-primaria);
    color: var(--cor-primaria);
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all var(--transicao);
    flex-shrink: 0;
}
.btn-novo-chip:hover {
    background: var(--cor-primaria);
    color: #fff;
}

/* menu sanduiche de presets */
.preset-menu-wrap { position: relative; flex-shrink: 0; }
.btn-menu-preset {
    width: 36px;
    height: 36px;
    background: var(--branco);
    border: 1px solid var(--borda-forte);
    color: var(--texto-secundario);
    border-radius: var(--raio-sm);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 18px;
    transition: all var(--transicao);
}
.btn-menu-preset:hover {
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
    background: var(--cor-primaria-suave);
}
.preset-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 190px;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    box-shadow: var(--sombra-lg);
    padding: 6px;
    z-index: 50;
    display: none;
}
.preset-menu.aberto { display: block; }
.preset-menu button {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 9px 12px;
    border-radius: var(--raio-sm);
    cursor: pointer;
    font-size: 13.5px;
    color: var(--texto);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background var(--transicao);
}
.preset-menu button i { font-size: 16px; color: var(--texto-secundario); }
.preset-menu button:hover { background: var(--fundo); }
.preset-menu button.perigo { color: var(--vermelho); }
.preset-menu button.perigo i { color: var(--vermelho); }
.preset-menu button.perigo:hover { background: #FEE2E2; }
.preset-menu button:disabled { opacity: .4; cursor: not-allowed; }
.preset-menu button:disabled:hover { background: transparent; }
.preset-menu-divider { height: 1px; background: var(--borda); margin: 5px 0; }

/* lista de presets dentro dos modais */
.lista-presets { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.preset-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    transition: all var(--transicao);
}
.preset-item:hover { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); }
.preset-item.ativo { border-color: var(--cor-primaria); }
.preset-item-info { flex: 1; cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.preset-item-info strong { font-size: 14px; color: var(--texto); }
.preset-item-info small { font-size: 12px; color: var(--texto-secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preset-item-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cor-primaria);
    background: var(--cor-primaria-suave);
    padding: 2px 7px;
    border-radius: 10px;
    flex-shrink: 0;
}
.preset-item-del {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--borda);
    color: var(--vermelho);
    border-radius: var(--raio-sm);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 16px;
    transition: all var(--transicao);
}
.preset-item-del:hover { background: #FEE2E2; border-color: var(--vermelho); }
.modal-sub { font-size: 13px; color: var(--texto-secundario); margin-bottom: 14px; }

/* ============================================================
   SPINNER OVERLAY GLOBAL (loading)
   ============================================================ */
.loading-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(2px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}
.loading-overlay.aberto { display: flex; }
.loading-spinner {
    background: var(--branco);
    border-radius: var(--raio);
    padding: 28px 44px;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: modalSobe .2s ease;
}
.spinner-circle {
    width: 44px;
    height: 44px;
    border: 4px solid var(--borda);
    border-top-color: var(--cor-primaria);
    border-radius: 50%;
    animation: spinner-rotate .8s linear infinite;
}
@keyframes spinner-rotate { to { transform: rotate(360deg); } }
.loading-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--texto);
}

/* ============================================================
   POPUPS DA TOOLBAR (TabelaAvancada: Colunas, Ordenar)
   ============================================================ */
.ta-popup {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-lg);
    min-width: 300px;
    display: none;
    animation: modalSobe .15s ease;
}
.ta-popup.aberto { display: block; }
.ta-popup-cab {
    padding: 12px 14px;
    border-bottom: 1px solid var(--borda);
    font-weight: 700;
    font-size: 13px;
    color: var(--texto);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ta-popup-cab i { color: var(--cor-primaria); }
.ta-popup-rodape {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--borda);
    justify-content: space-between;
    align-items: center;
}
.ta-popup-rodape button {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--borda);
    background: var(--branco);
    color: var(--texto);
    transition: all var(--transicao);
}
.ta-popup-rodape button:hover { background: var(--fundo); }
.ta-popup-rodape .ta-aplicar {
    background: var(--cor-primaria);
    color: #fff;
    border-color: var(--cor-primaria);
}
.ta-popup-rodape .ta-aplicar:hover { background: var(--cor-primaria-escura); }

/* lista de colunas */
.ta-cols-lista { max-height: 280px; overflow-y: auto; padding: 6px 0; }
.ta-cols-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background var(--transicao);
}
.ta-cols-item:hover { background: var(--fundo); }
.ta-cols-item input { width: 15px; height: 15px; accent-color: var(--cor-primaria); cursor: pointer; }

/* regras de sort */
.ta-sort-regras { padding: 8px 14px; min-height: 50px; }
.ta-sort-vazio { padding: 14px 0; text-align: center; color: var(--texto-fraco); font-size: 13px; }
.ta-sort-regra {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
}
.ta-sort-num {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--cor-primaria-suave);
    color: var(--cor-primaria-escura);
    font-weight: 700;
    font-size: 11px;
    display: grid; place-items: center;
}
.ta-sort-regra select {
    font-size: 13px;
    padding: 5px 8px;
    border: 1px solid var(--borda-forte);
    border-radius: 6px;
    background: var(--branco);
    font-family: 'Inter', sans-serif;
}
.ta-sort-dir {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--borda-forte);
    background: var(--branco);
    font-weight: 600;
    transition: all var(--transicao);
}
.ta-sort-dir:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.ta-sort-remove {
    background: none; border: none; cursor: pointer;
    color: var(--texto-fraco);
    font-size: 14px;
    padding: 2px;
}
.ta-sort-remove:hover { color: var(--vermelho); }

/* ============================================================
   BARRA DE ACOES EM LOTE (selecao multipla)
   ============================================================ */
.barra-lote {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: var(--vermelho-suave);
    border: 1px solid #FCA5A5;
    border-radius: var(--raio);
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--vermelho);
}

/* ============================================================
   FILTRO DE COLUNA (estilo Excel)
   Cada <th> filtravel envolve texto + botao em .th-filtro.
   O popup .col-filtro-pop abre abaixo do header.
   ============================================================ */
.th-filtro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.th-filtro-texto { flex: 1; }
.col-filtro-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    padding: 2px 4px;
    color: var(--texto-fraco);
    display: inline-grid;
    place-items: center;
    transition: all var(--transicao);
    flex-shrink: 0;
}
.col-filtro-btn:hover { background: var(--fundo); color: var(--cor-primaria); }
.col-filtro-btn.filtro-ativo {
    color: var(--cor-primaria);
    background: var(--cor-primaria-suave);
    border-color: var(--cor-primaria);
}
.col-filtro-btn i { font-size: 14px; display: block; }

.col-filtro-wrap { position: relative; }

.col-filtro-pop {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 60;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-lg);
    min-width: 220px;
    max-width: 300px;
    padding: 0;
    display: none;
    animation: modalSobe .15s ease;
}
.col-filtro-pop.aberto { display: block; }
.col-filtro-pop .filtro-busca {
    width: 100%;
    padding: 9px 12px;
    font-size: 13px;
    border: none;
    border-bottom: 1px solid var(--borda);
    outline: none;
    font-family: 'Inter', sans-serif;
    border-radius: var(--raio) var(--raio) 0 0;
}
.col-filtro-pop .filtro-busca:focus {
    box-shadow: inset 0 -2px 0 var(--cor-primaria);
}
.col-filtro-pop .filtro-lista {
    max-height: 220px;
    overflow-y: auto;
    padding: 6px 0;
}
.col-filtro-pop .filtro-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: background var(--transicao);
}
.col-filtro-pop .filtro-item:hover { background: var(--fundo); }
.col-filtro-pop .filtro-item input {
    width: 15px; height: 15px;
    accent-color: var(--cor-primaria);
    cursor: pointer;
    flex-shrink: 0;
}
.col-filtro-pop .filtro-item.todos {
    font-weight: 600;
    border-bottom: 1px solid var(--borda);
    padding-bottom: 8px;
    margin-bottom: 2px;
}
.col-filtro-pop .filtro-rodape {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--borda);
    justify-content: flex-end;
}
.col-filtro-pop .filtro-rodape button {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--borda);
    background: var(--branco);
    color: var(--texto);
    transition: all var(--transicao);
}
.col-filtro-pop .filtro-rodape button:hover {
    background: var(--fundo);
}
.col-filtro-pop .filtro-rodape .filtro-aplicar {
    background: var(--cor-primaria);
    color: #fff;
    border-color: var(--cor-primaria);
}
.col-filtro-pop .filtro-rodape .filtro-aplicar:hover {
    background: var(--cor-primaria-escura);
}

/* ============================================================
   POPUP DE ORDENACAO MULTI-COLUNA
   ============================================================ */
.sort-popup {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-lg);
    min-width: 320px;
    padding: 0;
    display: none;
    animation: modalSobe .15s ease;
}
.sort-popup.aberto { display: block; }
.sort-popup-cab {
    padding: 12px 14px;
    border-bottom: 1px solid var(--borda);
    font-weight: 700;
    font-size: 13px;
    color: var(--texto);
    display: flex;
    align-items: center;
    gap: 6px;
}
.sort-popup-cab i { color: var(--cor-primaria); }
.sort-regras { padding: 8px 14px; }
.sort-regra {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
}
.sort-regra .sort-num {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--cor-primaria-suave);
    color: var(--cor-primaria-escura);
    font-weight: 700;
    font-size: 11px;
    display: grid; place-items: center;
}
.sort-regra select {
    font-size: 13px;
    padding: 5px 8px;
    border: 1px solid var(--borda-forte);
    border-radius: 6px;
    background: var(--branco);
    font-family: 'Inter', sans-serif;
}
.sort-regra .sort-dir {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--borda-forte);
    background: var(--branco);
    font-weight: 600;
    transition: all var(--transicao);
}
.sort-regra .sort-dir:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.sort-regra .sort-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--texto-fraco);
    font-size: 16px;
    padding: 2px;
}
.sort-regra .sort-remove:hover { color: var(--vermelho); }
.sort-vazio {
    padding: 12px 0;
    text-align: center;
    color: var(--texto-fraco);
    font-size: 13px;
}
.sort-popup-rodape {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--borda);
    justify-content: space-between;
    align-items: center;
}
.sort-popup-rodape button {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--borda);
    background: var(--branco);
    color: var(--texto);
    transition: all var(--transicao);
}
.sort-popup-rodape button:hover { background: var(--fundo); }
.sort-popup-rodape .sort-aplicar {
    background: var(--cor-primaria);
    color: #fff;
    border-color: var(--cor-primaria);
}
.sort-popup-rodape .sort-aplicar:hover { background: var(--cor-primaria-escura); }

/* ============================================================
   PREVIEW DE LINK NO ENCURTADOR
   Fica a esquerda do botao "Gerar link", em fonte discreta.
   ============================================================ */
.form-rodape {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.link-preview {
    flex: 1;
    min-width: 240px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    overflow: hidden;
}
.link-preview-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--texto-fraco);
    flex-shrink: 0;
    padding: 2px 7px;
    background: var(--branco);
    border-radius: var(--raio-full);
    border: 1px solid var(--borda);
}
.link-preview-url {
    flex: 1;
    min-width: 0;
    font-family: 'Inter', ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--texto-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: ltr;
}
.link-preview-url:empty::before {
    content: 'Informe o link base...';
    color: var(--texto-fraco);
    font-style: italic;
}

/* ============================================================
   TOGGLE SWITCH (versao definitiva)
   Estrutura HTML esperada:
     <label class="toggle-switch ativo">
        <input type="checkbox" ...>
        <span class="toggle-slider"></span>
        <span class="toggle-text">Label</span>
     </label>
   ============================================================ */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    padding: 0 14px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    background: var(--branco);
    height: 42px;
    width: 100%;
    transition: border-color var(--transicao), background var(--transicao);
}
.toggle-switch:hover { border-color: var(--borda-forte); }

/* esconde o checkbox nativo sem afetar o flex */
.toggle-switch input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* a pista (slider) */
.toggle-slider {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 42px;
    height: 24px;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background var(--transicao);
}
/* a bolinha eh um pseudo-elemento do slider, nunca colide com o label */
.toggle-slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.22);
    transition: transform var(--transicao);
}
.toggle-switch input:checked + .toggle-slider {
    background: var(--cor-primaria);
}
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(18px);
}

/* texto do toggle: sempre depois do slider, sem sobreposicao */
.toggle-text {
    font-weight: 500;
    font-size: 14px;
    color: var(--texto);
    line-height: 1.2;
}

/* estado "ativo": toggle ON tinge o card todo na cor primaria */
.toggle-switch.ativo {
    border-color: var(--cor-primaria);
    background: var(--cor-primaria-suave);
}
.toggle-switch.ativo .toggle-text {
    color: var(--cor-primaria-escura);
    font-weight: 600;
}

/* estado desabilitado */
.toggle-switch.desabilitado {
    opacity: .45;
    cursor: not-allowed;
    background: var(--fundo);
}
.toggle-switch.desabilitado:hover { border-color: var(--borda); }
.toggle-switch.desabilitado input { pointer-events: none; }

/* ============================================================
   FLASH MESSAGES
   ============================================================ */
.flash-area {
    position: fixed;
    top: 76px; right: 20px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
}
.flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border-radius: var(--raio-sm);
    box-shadow: var(--sombra-lg);
    font-size: 14px;
    font-weight: 500;
    background: #fff;
    border-left: 3px solid var(--cor-primaria);
    animation: flashEntra .3s ease;
}
@keyframes flashEntra {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
.flash.success, .flash.ok { border-left-color: var(--verde); }
.flash.success i, .flash.ok i { color: var(--verde); }
.flash.danger, .flash.erro  { border-left-color: var(--vermelho); }
.flash.danger i, .flash.erro i { color: var(--vermelho); }
.flash.warning { border-left-color: var(--ambar); }
.flash.warning i { color: var(--ambar); }
.flash.info i { color: var(--azul-info); }
.flash i { font-size: 20px; }

/* ============================================================
   ESTADO VAZIO
   ============================================================ */
.vazio {
    text-align: center;
    padding: 50px 20px;
    color: var(--texto-fraco);
}
.vazio i { font-size: 46px; opacity: .5; margin-bottom: 12px; display: block; }
.vazio h3 { color: var(--texto-suave); margin-bottom: 4px; font-size: 16px; }
.vazio p { font-size: 14px; margin-bottom: 16px; }

/* ============================================================
   CABECALHO DE PAGINA
   ============================================================ */
.pagina-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.pagina-cab h1 { font-size: 22px; }
.pagina-cab .sub {
    color: var(--texto-suave);
    font-size: 14px;
    margin-top: 3px;
}

/* ============================================================
   MODAIS
   ============================================================ */
.modal-bg {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.55);
    z-index: 200;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
    backdrop-filter: blur(2px);
}
.modal-bg.visivel { display: flex; }
.modal-caixa {
    background: var(--branco);
    border-radius: var(--raio-lg);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--sombra-lg);
    animation: modalSobe .2s ease;
}
.modal-caixa.modal-largo { max-width: 720px; }
@keyframes modalSobe {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}
.modal-cab {
    padding: 18px 22px;
    border-bottom: 1px solid var(--borda);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-cab h3 { font-size: 17px; }
.modal-x {
    background: none; border: none; cursor: pointer;
    font-size: 22px; color: var(--texto-fraco);
    display: grid; place-items: center;
}
.modal-x:hover { color: var(--texto); }
.modal-corpo { padding: 22px; }
.modal-rodape {
    padding: 16px 22px;
    border-top: 1px solid var(--borda);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.modal-caixa.modal-confirm {
    max-width: 440px;
    text-align: center;
}
.confirm-corpo { padding: 32px 28px 12px !important; }
.confirm-corpo h3 { font-size: 18px; margin-bottom: 8px; }
.confirm-corpo p { color: var(--texto-suave); font-size: 14px; line-height: 1.5; }
.confirm-icone {
    width: 68px; height: 68px;
    border-radius: 50%;
    display: grid; place-items: center;
    margin: 0 auto 18px;
}
.confirm-icone i { font-size: 36px; }
.confirm-icone.confirm-perigo { background: var(--vermelho-suave); color: var(--vermelho); }
.confirm-icone.confirm-aviso  { background: var(--ambar-suave);    color: var(--ambar); }
.confirm-icone.confirm-info   { background: var(--azul-suave);     color: var(--azul-info); }
.modal-confirm .modal-rodape { justify-content: center; }

/* ============================================================
   INPUT DE SENHA COM OLHINHO
   ============================================================ */
.input-senha { position: relative; }
.input-senha .input { padding-right: 42px; }
.input-senha .toggle-senha {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 7px 9px;
    color: var(--texto-fraco);
    border-radius: 6px;
    display: grid; place-items: center;
    transition: all var(--transicao);
}
.input-senha .toggle-senha:hover { color: var(--cor-primaria); background: var(--fundo); }
.input-senha .toggle-senha i { font-size: 17px; display: block; }

/* ============================================================
   AVISO INFO (banner discreto dentro de form)
   ============================================================ */
.aviso-info {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    background: var(--azul-suave);
    border-left: 3px solid var(--azul-info);
    border-radius: var(--raio-sm);
    font-size: 13px;
    color: var(--texto-suave);
    margin-bottom: 16px;
}
.aviso-info i { color: var(--azul-info); font-size: 16px; flex-shrink: 0; }

/* ============================================================
   EMPRESA / CONFIGURACOES (3 uploaders de imagem)
   ============================================================ */
.empresa-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}
@media (max-width: 980px) { .empresa-grid { grid-template-columns: 1fr; } }

.uploader-trio {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}
@media (max-width: 720px) { .uploader-trio { grid-template-columns: 1fr; } }

.uploader-card {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 14px;
    background: var(--branco);
}
.uploader-card h4 {
    font-size: 13px;
    color: var(--texto);
    margin-bottom: 4px;
}
.uploader-card .descricao {
    font-size: 11.5px;
    color: var(--texto-fraco);
    margin-bottom: 10px;
}
.uploader-preview {
    background: linear-gradient(135deg, var(--fundo), #F0F2F5);
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio-sm);
    aspect-ratio: 1;
    width: 100%;
    margin-bottom: 10px;
    display: grid; place-items: center;
    overflow: hidden;
    position: relative;
}
.uploader-preview img {
    max-width: 85%; max-height: 85%;
    object-fit: contain;
}
.uploader-preview .placeholder {
    text-align: center;
    color: var(--texto-fraco);
}
.uploader-preview .placeholder i {
    font-size: 38px; opacity: .4; display: block; margin-bottom: 4px;
}
.uploader-preview .placeholder span { font-size: 11px; }

input[type="file"].input-file {
    width: 100%;
    padding: 7px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-sm);
    font-size: 12px;
    background: var(--branco);
}

.uploader-acoes {
    display: flex; gap: 6px; margin-top: 8px;
    align-items: center;
}

/* ============================================================
   LOGIN
   ============================================================ */
.publico-bg {
    min-height: 100vh;
    display: grid; place-items: center;
    padding: 20px;
    background:
        radial-gradient(circle at 20% 30%, rgba(201, 168, 76, .10) 0%, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(204,92,0,.08) 0%, transparent 45%),
        var(--fundo);
}
.login-card {
    width: 100%; max-width: 420px;
    background: #fff;
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-lg);
    border: 1px solid var(--borda);
    padding: 38px 34px;
}
.login-marca {
    display: flex; align-items: center; justify-content: center;
    gap: 11px;
    margin-bottom: 28px;
}
.login-logo-grande {
    max-width: 100%;
    max-height: 110px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.login-marca-fallback {
    display: flex; align-items: center; gap: 11px;
}
.login-marca-fallback .pq {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--branco);
    border: 2px solid var(--cor-primaria);
    display: grid; place-items: center; color: var(--cor-primaria);
    overflow: hidden;
}
.login-marca-fallback .pq i { font-size: 26px; }
.login-marca-fallback .pq img { width: 100%; height: 100%; object-fit: cover; }
.login-marca-fallback .nm {
    font-family: 'Sora', sans-serif; font-weight: 800;
    font-size: 17px; letter-spacing: -.02em;
}
.login-marca-fallback .sb { font-size: 12px; color: var(--texto-fraco); }
.login-card h1 { font-size: 21px; margin-bottom: 4px; }
.login-card .intro { color: var(--texto-suave); font-size: 14px; margin-bottom: 24px; }

/* ============================================================
   PERMISSOES
   ============================================================ */
.perm-grupo h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cor-primaria);
    margin: 16px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--borda);
}
.perm-grupo:first-of-type h4 { margin-top: 0; }

/* ============================================================
   OVERLAY MOBILE
   ============================================================ */
.overlay-mob { display: none; }
.overlay-mob.visivel {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    z-index: 35;
}

/* ============================================================
   PAGINA DE ERRO
   ============================================================ */
.erro-box {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: var(--raio);
    border: 1px solid var(--borda);
}
.erro-box i { font-size: 60px; color: var(--vermelho); margin-bottom: 14px; display: block; }
.erro-box h2 { font-size: 48px; color: var(--texto); margin-bottom: 8px; }
.erro-box p { color: var(--texto-suave); margin-bottom: 20px; }

/* ============================================================
   ENCURTADOR: bloco de resultado e copiavel
   ============================================================ */
.bloco-resultado {
    background: var(--cor-primaria-suave);
    border: 1px solid var(--cor-primaria);
    border-radius: var(--raio);
    padding: 16px 18px;
    margin-top: 16px;
}
.bloco-resultado h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cor-primaria-escura);
    margin-bottom: 6px;
}
.bloco-resultado .url-mostra {
    display: flex;
    gap: 8px;
    align-items: center;
}
.bloco-resultado .url-mostra .url-text {
    flex: 1;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    padding: 9px 12px;
    font-family: 'Inter', monospace;
    font-size: 13px;
    color: var(--texto);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* botao copiar (variante de btn-icone) */
.btn-copiar {
    background: var(--branco);
    border: 1px solid var(--borda-forte);
    color: var(--texto-suave);
}
.btn-copiar:hover { color: var(--cor-primaria); border-color: var(--cor-primaria); }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 880px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.aberta { transform: translateX(0); box-shadow: var(--sombra-lg); }
    .conteudo { margin-left: 0; }
    .topbar .btn-menu { display: block; }
    .pagina { padding: 18px 16px 50px; }
    .linha-campos { grid-template-columns: 1fr; }
    .linha-campos-2 { grid-template-columns: 1fr; }
    .linha-campos-3 { grid-template-columns: 1fr; }
    .linha-campos-4 { grid-template-columns: 1fr 1fr; }
    .flash-area { left: 16px; right: 16px; max-width: none; }
    .pagina-cab h1 { font-size: 19px; }
}

@media (max-width: 520px) {
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .kpi { padding: 14px; }
    .kpi-valor { font-size: 22px; }
    .kpi-icone { width: 34px; height: 34px; margin-bottom: 10px; }
    .topbar { padding: 0 16px; }
    .linha-campos-4 { grid-template-columns: 1fr; }
}

/* =============================================================================
   COMPONENTES AUXILIARES (modulo Financeiro)
   ============================================================================= */

/* Toolbar de tabela com busca e acoes */
.tabela-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--borda);
    flex-wrap: wrap;
}

/* Caixa de busca com icone embutido */
.busca-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    padding: 6px 12px;
    flex: 1;
    max-width: 380px;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.busca-wrap:focus-within {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px var(--cor-primaria-suave);
}
.busca-wrap i { color: var(--texto-fraco); flex-shrink: 0; }
.busca-wrap .input {
    border: none;
    background: transparent;
    padding: 4px 0;
    flex: 1;
    box-shadow: none !important;
    outline: none;
}
.busca-wrap .input:focus { border: none; box-shadow: none !important; }

/* Modal grande (760px) */
.modal-lg { max-width: 760px; }

/* Botao link (acao discreta sem fundo) */
.btn-link {
    background: transparent;
    color: var(--texto-secundario);
    border: none;
    padding: 6px 8px;
    border-radius: var(--raio-sm);
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}
.btn-link:hover { background: var(--fundo); color: var(--cor-primaria); }

/* Texto ao lado do toggle */
.toggle-texto {
    font-size: 13px;
    color: var(--texto-suave);
    margin-left: 8px;
    vertical-align: middle;
}

/* =============================================================================
   SELECT BUSCA - dropdown moderno com pesquisa
   ============================================================================= */
.sb-control { position: relative; width: 100%; }
.sb-btn {
    width: 100%;
    padding: 6px 10px;
    background: white;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    text-align: left;
    color: var(--texto);
    transition: border-color var(--transicao);
    min-height: 30px;
}
.sb-btn:hover:not(:disabled) { border-color: var(--cor-primaria); }
.sb-btn:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 2px rgba(1, 21, 74, .14); }
.sb-btn:disabled,
.sb-control.sb-disabled .sb-btn {
    background: #F1F5F9;
    color: #94A3B8;
    cursor: not-allowed;
}
.sb-btn .sb-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sb-btn .sb-label.placeholder { color: var(--texto-fraco); font-style: italic; }
.sb-btn .sb-caret { color: var(--texto-secundario); font-size: 14px; flex-shrink: 0; line-height: 1; }

/* Popup */
.sb-popup {
    position: absolute;
    z-index: 10000;
    background: white;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: 0 12px 32px rgba(0,0,0,.16);
    max-height: 420px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: inherit;
    min-width: 480px;
    max-width: 720px;
}
.sb-popup .sb-list { overflow-x: hidden; }
.sb-popup .sb-item {
    white-space: normal;
    word-break: break-word;
}
/* Quando popup vive dentro de <dialog> (top-layer): position absolute
   relativo ao dialog, com coords calculadas pelo JS via originTop/originLeft */
.sb-popup.sb-in-dialog { position: absolute; }
/* Dialog precisa permitir overflow visível pra o popup escapar.
   popup-corpo mantém scroll vertical pra forms longos. */
dialog.popup-centrado { overflow: visible !important; }
.sb-popup-head {
    display: flex;
    gap: 6px;
    padding: 10px;
    border-bottom: 1px solid var(--borda);
    background: #F8FAFC;
}
.sb-popup .sb-search {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    background: white;
}
.sb-popup .sb-search:focus { border-color: var(--cor-primaria); box-shadow: 0 0 0 2px rgba(1, 21, 74, .14); }
.sb-popup .sb-close {
    background: white;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    padding: 6px 10px;
    cursor: pointer;
    color: var(--texto-secundario);
    font-size: 14px;
    font-family: inherit;
    transition: all var(--transicao);
}
.sb-popup .sb-close:hover { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }
.sb-popup .sb-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    min-height: 80px;
}
.sb-popup .sb-item {
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    color: var(--texto);
    transition: background var(--transicao);
    line-height: 1.4;
}
.sb-popup .sb-item:hover,
.sb-popup .sb-item.sb-item-ativo { background: #FFF7ED; color: var(--cor-primaria); }
.sb-popup .sb-item.hidden { display: none; }
.sb-popup .sb-empty {
    padding: 24px;
    text-align: center;
    color: var(--texto-fraco);
    font-size: 13px;
}

/* ==========================================================================
   BARRA DE FILTROS PADRAO (relatorios, listagens) - v51
   Garante alinhamento vertical perfeito entre inputs, selects e botoes.
   Uso: <form class="filtros-bar"> com <div class="campo"> em cada controle
   e <div class="acoes"> agrupando botoes finais.
   ========================================================================== */
.filtros-bar {
    background: white;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 12px 14px;
    margin-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.filtros-bar .campo {
    display: flex;
    flex-direction: column;
    min-width: 130px;
}
.filtros-bar .campo.flex {
    flex: 1;
    min-width: 200px;
}
.filtros-bar .campo label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-secundario);
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.2;
    height: 14px;
}
.filtros-bar .campo input,
.filtros-bar .campo select {
    padding: 0 10px;
    height: 36px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    font-family: inherit;
    font-size: 13.5px;
    background: white;
    box-sizing: border-box;
}
.filtros-bar .campo input:focus,
.filtros-bar .campo select:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(1, 21, 74, .14);
}
.filtros-bar .btn-filtro {
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.filtros-bar .acoes {
    margin-left: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.filtros-bar .acoes .btn {
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* Garante que botoes dentro do filtros-bar nao tenham margin extra */
.filtros-bar button,
.filtros-bar .btn {
    margin: 0;
}

/* Modal: ja existe, mas garantimos opcoes de relatorio bem dispostas */
.opcoes-relatorio {
    display: grid;
    gap: 14px;
}
.opcoes-relatorio .opcao-grupo {
    border: 1px solid var(--borda);
    border-radius: var(--raio-sm);
    padding: 12px 14px;
    background: var(--fundo);
}
.opcoes-relatorio .opcao-grupo > label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-secundario);
    font-weight: 700;
    margin-bottom: 8px;
}
.opcoes-relatorio .opcoes-radio {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.opcoes-relatorio .opcoes-radio label {
    flex: 1;
    min-width: 140px;
    border: 1.5px solid var(--borda);
    border-radius: var(--raio-sm);
    padding: 10px 12px;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all .15s;
}
.opcoes-relatorio .opcoes-radio label:hover {
    border-color: var(--cor-primaria);
    background: #FFFBEB;
}
.opcoes-relatorio .opcoes-radio input[type="radio"] {
    margin: 0;
    accent-color: var(--cor-primaria);
    width: 16px; height: 16px;
}
.opcoes-relatorio .opcoes-radio label.selecionado {
    border-color: var(--cor-primaria);
    background: #FFF7ED;
    box-shadow: 0 0 0 2px rgba(1, 21, 74, .12);
}
.opcoes-relatorio .opcoes-radio .desc {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--texto);
}
.opcoes-relatorio .opcoes-radio .sub {
    font-size: 11px;
    color: var(--texto-fraco);
}

/* =========================================================================
   Registros desativados (inativos) - esmaecidos e sobretachados
   Aplica em qualquer linha de tabela ou cartão que carregue data-ativo="0".
   ========================================================================= */
tr[data-ativo="0"] > td,
tr[data-ativo="0"] > td a,
tr[data-ativo="0"] > td span,
[data-ativo="0"].card-item,
[data-ativo="0"].linha-cadastro {
    color: var(--texto-fraco) !important;
    opacity: .55;
}
tr[data-ativo="0"] > td:not(:last-child),
tr[data-ativo="0"] > td:not(:last-child) > *:not(.btn):not(button):not(a),
[data-ativo="0"].card-item .titulo,
[data-ativo="0"].card-item .descricao,
[data-ativo="0"].linha-cadastro .titulo,
[data-ativo="0"].linha-cadastro .descricao {
    text-decoration: line-through;
    text-decoration-color: rgba(100,116,139,.6);
    text-decoration-thickness: 1px;
}
/* Ações (último td) NÃO ficam sobretachadas - só esmaecidas */
tr[data-ativo="0"] > td:last-child,
tr[data-ativo="0"] > td:last-child * {
    text-decoration: none !important;
}
/* Restaura clareza ao passar o mouse pra ficar legível antes de reativar */
tr[data-ativo="0"]:hover > td {
    opacity: .85;
}

/* =====================================================================
   UI MODAIS - alert / confirm / prompt customizados (ui-modais.js)
   Substitui os pop-ups nativos do browser por modais com o tema do app.
   ===================================================================== */
.ui-modal {
    /* Centralização explícita - alguns browsers não centralizam <dialog>
       automaticamente quando há width/max-width customizado. */
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    max-width: 460px;
    width: 96%;
    max-height: 90vh;
    border: 0;
    border-radius: var(--raio);
    padding: 0;
    background: var(--branco);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
    color: var(--texto);
    font-family: inherit;
    overflow: auto;
}
.ui-modal.lg { max-width: 560px; }
.ui-modal::backdrop {
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(2px);
}
.ui-modal-corpo { padding: 22px 26px 8px; }
.ui-modal-corpo h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--texto);
    display: flex; align-items: center; gap: 8px;
}
.ui-modal-corpo p {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--texto-secundario);
    line-height: 1.5;
}
.ui-modal-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--borda);
    border-radius: 6px;
    font-size: 13.5px;
    box-sizing: border-box;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
}
.ui-modal-input:focus { border-color: var(--cor-primaria); }
.ui-modal-rod {
    padding: 14px 22px 18px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}



/* ============================================================
   Badge "ADMIN" da topbar do painel administrativo.
   Veio de templates/base_admin.html em 2026-08-02, junto com a remocao
   do <style> que redeclarava --cor-primaria com o azul antigo.
   ============================================================ */
.marca-badge-admin {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: rgba(255, 255, 255, .16);
    color: var(--branco);
    padding: 2px 8px;
    border-radius: var(--raio-full);
    margin-top: 4px;
}

/* ============================================================
   SIDEBAR BRANCA COM OURO - identidade M&A
   Opcao B, escolhida pelo usuario em 2026-08-02 no comparador
   _ESCOLHER_SIDEBAR.html.

   Mantem `.sidebar { background: var(--branco) }` das regras originais,
   que e o que Padrao_Menu_Sidebar:209 manda. Este bloco so acrescenta o
   ouro e a marca.

   OS DOIS OUROS, E POR QUE SAO DOIS
   ---------------------------------
   --cor-marca-ouro       #C9A84C  contraste 2,29:1 com branco
   --cor-marca-ouro-texto #8A6D22  contraste 4,89:1 com branco

   Ouro da marca em TEXTO pequeno sobre branco reprova legibilidade: 2,29:1
   contra os 4,5:1 que a WCAG pede para texto normal (10.5px em peso 700 nao
   conta como texto grande, que so comeca em 18.66px). No Portal MEI o rotulo
   dourado funciona porque la o fundo e navy.

   Regra que sai disso: sobre superficie clara, ouro cheio so no que NAO e
   texto (fio, aro, borda, filete), onde contraste nao se aplica. Texto
   dourado usa o tom escurecido.
   ============================================================ */

/* --- Marca: o logo completo ocupa a faixa -------------------------
   O lockup ja traz "M&A INTELIGENCIA CONTABIL" desenhado, entao repetir
   o nome em texto ao lado seria dizer a mesma coisa duas vezes. Por isso
   .marca-nome e .marca-sub saem quando ha logo, e a faixa vira so a
   imagem. Isto se afasta de Padrao_Menu_Sidebar:19, que descreve o caso
   de icone generico + nome em Sora: aqui existe assinatura pronta. */
.sidebar-marca.tem-logo-completo {
    padding: 20px 18px 16px;
    display: block;
    border-bottom: 1px solid var(--cor-marca-ouro-borda);
}
.sidebar-marca.tem-logo-completo .logo-cheio {
    display: block;
    width: 100%;
    height: auto;
    max-height: 46px;
    object-fit: contain;
    object-position: left center;
}

/* Faixa da marca quando NAO ha logo carregado (fallback) */
.sidebar-marca {
    border-bottom: 1px solid var(--cor-marca-ouro-borda);
}
.sidebar-marca .logo-quadro {
    border-color: var(--cor-marca-ouro);
    color: var(--cor-marca-navy);
}
.sidebar-marca .marca-nome {
    color: var(--cor-marca-navy);
}
.sidebar-marca .marca-sub {
    color: var(--cor-marca-ouro-texto);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 9px;
    font-weight: 700;
}

/* --- Rotulo de grupo: ouro escurecido, maiuscula bem espacada ------
   O espacamento largo em maiuscula e a assinatura tipografica da marca,
   o mesmo gesto de "M & A  I N T E L I G E N C I A" no logo. */
.sidebar-nav .grupo-label,
.sidebar-nav .sub-grupo-label {
    color: var(--cor-marca-ouro-texto);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
}
.sidebar-nav .sub-grupo-label {
    font-size: 10px;
}
.sidebar-nav .grupo-chevron,
.sidebar-nav .sub-grupo-chevron {
    color: var(--cor-marca-ouro-texto);
    opacity: .6;
}

/* linha-guia que liga os filhos ao sub-grupo */
.sidebar-nav .sub-grupo-corpo > .corpo-interno {
    border-left-color: var(--cor-marca-ouro-borda);
}

/* --- Item ativo: tinta creme, texto navy, fio dourado a esquerda ---
   O fio de 3px e o mesmo gesto dos tracos que flanqueiam "CONTABIL" no
   logo: o ouro marca, nao preenche. Aqui ele e um FIO, nao texto, entao
   usa o ouro cheio. */
.sidebar .nav-item.ativo {
    background: #F3F0E7;
    color: var(--cor-marca-navy);
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--cor-marca-ouro);
}
.sidebar .nav-item.ativo i {
    color: var(--cor-marca-ouro-texto);
    opacity: 1;
}

/* --- Rodape --------------------------------------------------------- */
.sidebar-rodape {
    border-top: 1px solid var(--cor-marca-ouro-borda);
}
/* Botao Inicio: contornado em ouro, texto navy. Preenchido de navy ele
   competiria com o botao primario da area de conteudo. */
.sidebar .btn-home-side {
    background: var(--branco);
    border: 1px solid var(--cor-marca-ouro);
    color: var(--cor-marca-navy);
    box-shadow: none;
}
.sidebar .btn-home-side:hover {
    background: #F3F0E7;
    border-color: var(--cor-marca-ouro);
    color: var(--cor-marca-navy);
    box-shadow: none;
}
.sidebar .btn-home-side.ativo {
    background: #F3F0E7;
    box-shadow: inset 3px 0 0 0 var(--cor-marca-ouro);
}
.sidebar .btn-home-side i {
    color: var(--cor-marca-ouro-texto);
}

.sidebar .usuario-box .avatar {
    background: var(--cor-marca-navy);
    color: var(--branco);
    border: 1px solid var(--cor-marca-ouro);
}
.sidebar .usuario-box .papel {
    color: var(--cor-marca-ouro-texto);
}

/* --- Handle de redimensionar ---------------------------------------- */
.sidebar .sidebar-resize:hover,
.sidebar .sidebar-resize.arrastando {
    background: var(--cor-marca-ouro);
    opacity: .7;
}

/* ============================================================
   FASE 4 - O OURO ASSINA
   M&A Inteligencia Contabil, 2026-08-02.

   Regra que governa tudo aqui: o ouro e TRACO, nunca AREA.
   Filete, borda, rotulo curto e icone. Nunca preenchimento de botao,
   de card, de faixa larga ou de linha de tabela.

   Sobre fundo claro o ouro de texto e --cor-marca-ouro-texto (#8A6D22,
   4,89:1). O ouro cheio (#C9A84C, 2,29:1) so no que nao e texto.
   ============================================================ */

/* --- Filete dourado no topo da topbar -------------------------------
   Um fio de 2px atravessando a largura da area de conteudo. E o mesmo
   filete que separa as duas metades do cartao de visita. */
.topbar {
    border-top: 2px solid var(--cor-marca-ouro);
}

/* --- Cabecalho de tabela: fundo BRANCO, rotulo dourado --------------
   Padrao_Cabecalho_da_Tabela:51 manda o header de colunas ser branco, e
   :171 proibe header cinza. O fundo continua var(--branco): o que muda e
   so a cor do rotulo, que passa do cinza generico para o ouro da marca.

   Assim TODAS as tabelas do sistema ganham a marca sem nenhuma delas ser
   reestruturada, e sem violar a nota. O espacamento entre letras sobe de
   .04em para .12em, que e a assinatura tipografica do logo. */
table.tabela th {
    color: var(--cor-marca-ouro-texto);
    letter-spacing: .12em;
    font-weight: 700;
    border-bottom: 1px solid var(--cor-marca-ouro-borda);
}

/* --- Faixa de titulo dentro do card: navy com dourado ---------------
   Escolha do usuario em 2026-08-02. Vale nas 9 telas que ja tem a faixa.
   As demais usam <h2>/<h3> acima do card e seguem assim: migrar as 59
   telas para a faixa e a migracao de Padrao_Cabecalho_da_Tabela, que nao
   esta no escopo desta fase. Declarado no PLANO_FASEADO. */
.card-cabecalho,
.lfe-card-cab {
    background: var(--cor-marca-navy);
    border-bottom: none;
    border-radius: var(--raio) var(--raio) 0 0;
}
.card-cabecalho h3,
.card-cabecalho h2,
.lfe-card-cab h3,
.lfe-card-cab h2,
.card-cabecalho > .esq,
.lfe-card-cab > .esq {
    color: var(--branco);
}
.card-cabecalho i,
.lfe-card-cab i {
    color: var(--cor-marca-ouro-claro);
}
/* contagem e texto auxiliar da faixa ficam no ouro claro, que sobre navy
   tem contraste de sobra */
.card-cabecalho .muted,
.card-cabecalho small,
.lfe-card-cab .muted,
.lfe-card-cab small {
    color: var(--cor-marca-ouro-claro);
}

/* --- Eyebrow: rotulo de secao acima de um titulo --------------------
   Maiuscula, espacamento largo, ouro, com filete a esquerda. E o gesto
   dos tracos que flanqueiam "CONTABIL" no logo. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--cor-marca-ouro-texto);
    margin-bottom: 10px;
}
.eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--cor-marca-ouro-borda);
}

/* --- Card em destaque: borda dourada a 22% -------------------------- */
.card.destaque,
.cd.destaque {
    border-color: var(--cor-marca-ouro-borda);
}

/* --- Barra de filtros e estado vazio: superficie creme --------------
   Dois dos cinco lugares onde o bege entra, conforme a tabela de
   superficies do LASTRO. PROIBIDO bege em linha de tabela, input,
   card de KPI e sidebar. */
.barra-filtros,
.filtros-bar,
.ra-bar {
    background: var(--cor-creme);
    border: 1px solid var(--cor-marca-ouro-borda);
    border-radius: var(--raio);
}
.estado-vazio,
.tabela-vazia td,
.cd-vazio {
    background: var(--cor-creme);
}

/* --- Rodape de modal: creme, separando acao de conteudo ------------- */
.modal-rodape,
.md-rodape {
    background: var(--cor-creme);
    border-top: 1px solid var(--cor-marca-ouro-borda);
}

/* --- Menu de ferramentas da tabela: hover no navy da marca ---------- */
.ta-menu-btn:hover {
    border-color: var(--cor-marca-ouro);
    color: var(--cor-marca-ouro-texto);
}

/* --- Avatar e badges de marca --------------------------------------- */
.avatar {
    border: 1px solid var(--cor-marca-ouro);
}




/* =============================================================================
   ========================  M&A MASTER: TEMA OFICIAL========================
   Este bloco é o SISTEMA VISUAL definitivo. Sidebar/topbar/componentes.
   Todas as cores vêm das variáveis --mea-* declaradas no topo do arquivo.
   ============================================================================= */

/* Montserrat (fonte oficial do manual) e self-hosted: @font-face em static/fonts/fonts.css */

body, .app, html {
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    background: var(--mea-cinza-1) !important;
    color: var(--mea-cinza-8) !important;
}
/* Sem isto o navegador nao herda a fonte em form e cai pra Arial (Sistema_de_Estilos:69-73). */
button, input, select, textarea { font-family: inherit; }

/* ---------- SIDEBAR ---------- */
.sidebar {
    background: var(--mea-navy) !important;
    border-right: 1px solid var(--mea-navy-esc) !important;
    color: var(--mea-branco);
    box-shadow: var(--sh-3);
}

/* Marca (topo da sidebar) */
.sidebar-marca {
    padding: 22px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    justify-content: center;
}
.sidebar-marca .logo-quadro {
    background: transparent !important;
    border-color: var(--mea-dourado) !important;
    color: var(--mea-dourado) !important;
}
.sidebar-marca .marca-nome { color: var(--mea-branco); }
.sidebar-marca .marca-sub  { color: rgba(255,255,255,0.60); }
/* Logo image em versão branca */
.sidebar-marca.tem-logo-completo { padding: 20px !important; }
.sidebar-marca .logo-cheio {
    max-height: 42px;
    filter: brightness(0) invert(1); /* transforma logo colorido em branco */
    opacity: 0.95;
}

/* Nav */
.sidebar-nav {
    padding: 14px 10px !important;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color .2s ease;
}
.sidebar:hover .sidebar-nav { scrollbar-color: var(--mea-dourado-borda) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 5px; background: transparent; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; transition: background .2s; }
.sidebar:hover .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(240, 192, 32,0.45); }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(240, 192, 32,0.75) !important; }

/* Rótulos de sub-grupo (DASHBOARDS, CADASTROS...) */
.sidebar-nav .sub-grupo-cab,
.sidebar-nav .sub-grupo-label {
    color: var(--mea-dourado) !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
}
.sidebar-nav .sub-grupo-chevron { color: rgba(255,255,255,0.5); }
.sidebar-nav .sub-grupo { margin-bottom: 14px !important; }
.sidebar-nav .sub-grupo.fixo > .sub-grupo-cab { padding: 8px 12px 4px !important; }

/* Itens da nav */
.sidebar-nav .nav-item {
    color: rgba(255,255,255,0.82) !important;
    padding: 10px 12px !important;
    margin: 2px 4px !important;
    border-radius: var(--r-1) !important;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all .15s;
    position: relative;
    text-decoration: none;
}
.sidebar-nav .nav-item i {
    color: rgba(255,255,255,0.6);
    font-size: 17px;
    transition: color .15s;
    flex-shrink: 0;
}
.sidebar-nav .nav-item:hover {
    background: rgba(255,255,255,0.06) !important;
    color: var(--mea-branco) !important;
}
.sidebar-nav .nav-item:hover i { color: var(--mea-dourado); }
.sidebar-nav .nav-item.ativo {
    background: rgba(240, 192, 32,0.14) !important;
    color: var(--mea-branco) !important;
    font-weight: 600 !important;
}
.sidebar-nav .nav-item.ativo i { color: var(--mea-dourado); }
.sidebar-nav .nav-item.ativo::before {
    content: '';
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    background: var(--mea-dourado);
    border-radius: 0 3px 3px 0;
}

/* Rodapé da sidebar */
.sidebar-rodape {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding: 12px 10px !important;
    background: transparent !important;
}

/* Botão Início */
.btn-home-side {
    color: rgba(255,255,255,0.82) !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: var(--r-1) !important;
    padding: 10px 12px !important;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    transition: all .15s;
    text-decoration: none;
}
.btn-home-side i { color: rgba(255,255,255,0.6); font-size: 17px; }
.btn-home-side:hover {
    background: rgba(255,255,255,0.06) !important;
    color: var(--mea-branco) !important;
    border-color: rgba(255,255,255,0.14) !important;
}
.btn-home-side:hover i { color: var(--mea-dourado); }
.btn-home-side.ativo {
    background: rgba(240, 192, 32,0.14) !important;
    border-color: var(--mea-dourado-borda) !important;
    color: var(--mea-branco) !important;
    font-weight: 600 !important;
}
.btn-home-side.ativo i { color: var(--mea-dourado); }

/* Caixa do usuário */
.usuario-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px !important;
    background: rgba(255,255,255,0.04) !important;
    border-radius: var(--r-1) !important;
}
.usuario-box .avatar {
    width: 32px; height: 32px;
    background: var(--mea-dourado) !important;
    color: var(--mea-navy) !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    display: grid; place-items: center;
    font-size: 13px;
    flex-shrink: 0;
}
.usuario-box .info { flex: 1; min-width: 0; }
.usuario-box .nome  { color: var(--mea-branco) !important; font-size: 12px !important; font-weight: 600 !important; }
.usuario-box .papel { color: rgba(255,255,255,0.55) !important; font-size: 11px !important; }
.usuario-box .btn-fantasma { color: rgba(255,255,255,0.6) !important; padding: 6px !important; }
.usuario-box .btn-fantasma:hover { color: var(--mea-dourado) !important; background: rgba(255,255,255,0.06) !important; }

/* Toggle da sidebar (botão redondo) */
.sidebar-toggle {
    position: absolute;
    top: 20px; right: -12px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--mea-dourado) !important;
    border: 2px solid var(--mea-navy) !important;
    color: var(--mea-navy) !important;
    display: grid; place-items: center;
    cursor: pointer;
    box-shadow: var(--sh-2);
    transition: all .15s;
    z-index: 100;
    font-size: 11px;
}
.sidebar-toggle:hover {
    background: var(--mea-dourado-esc) !important;
    color: var(--mea-branco) !important;
    transform: scale(1.1);
}
.sidebar.colapsada .sidebar-toggle { transform: rotate(180deg); }
.sidebar.colapsada .sidebar-toggle:hover { transform: rotate(180deg) scale(1.1); }

/* Modo colapsado */
:root { --sidebar-colapsada-width: 68px; }
.sidebar.colapsada { width: var(--sidebar-colapsada-width) !important; min-width: var(--sidebar-colapsada-width) !important; }
.sidebar.colapsada .sidebar-marca .marca-nome,
.sidebar.colapsada .sidebar-marca .marca-sub,
.sidebar.colapsada .sidebar-marca .logo-cheio,
.sidebar.colapsada .sub-grupo-label,
.sidebar.colapsada .sub-grupo-chevron,
.sidebar.colapsada .nav-texto,
.sidebar.colapsada .btn-home-side span,
.sidebar.colapsada .usuario-box .info,
.sidebar.colapsada .usuario-box .btn-fantasma,
.sidebar.colapsada .sidebar-resize { display: none !important; }
.sidebar.colapsada .sidebar-marca { padding: 18px 8px !important; }
.sidebar.colapsada .sub-grupo-cab { display: none !important; }
.sidebar.colapsada .sub-grupo { margin-bottom: 6px !important; }
.sidebar.colapsada .nav-item {
    justify-content: center;
    padding: 12px 0 !important;
    margin: 3px 6px !important;
    gap: 0;
}
.sidebar.colapsada .nav-item i { font-size: 19px !important; }
.sidebar.colapsada .nav-item::after,
.sidebar.colapsada .btn-home-side::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%; transform: translateY(-50%);
    background: var(--mea-navy-esc);
    color: var(--mea-branco);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11.5px; font-weight: 600;
    white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity .15s;
    z-index: 999;
    box-shadow: var(--sh-3);
    border: 1px solid var(--mea-dourado-borda);
}
.sidebar.colapsada .nav-item:hover::after,
.sidebar.colapsada .btn-home-side:hover::after { opacity: 1; }
.sidebar.colapsada .btn-home-side { justify-content: center; padding: 12px 0 !important; gap: 0; }
.sidebar.colapsada .btn-home-side i { margin: 0; }
.sidebar.colapsada .usuario-box { justify-content: center; padding: 8px 4px !important; }
.sidebar.colapsada .usuario-box .avatar { margin: 0; }

/* ---------- TOPBAR ---------- */
.topbar {
    background: transparent !important;
    border-bottom: 1px solid var(--mea-cinza-3) !important;
    box-shadow: none !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 24px !important;
    display: flex;
    align-items: center;
    gap: 16px;
}
.topbar h1, .topbar h2, .topbar .titulo-pagina {
    color: var(--mea-navy) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
}
.topbar .btn-icone {
    color: var(--mea-cinza-6) !important;
    border-radius: var(--r-1) !important;
    padding: 8px !important;
    transition: all .15s;
}
.topbar .btn-icone:hover {
    background: var(--mea-dourado-suave) !important;
    color: var(--mea-dourado-esc) !important;
}
.topbar-logo-box { background: transparent !important; padding: 0 !important; border: 0 !important; }

/* ---------- CONTEÚDO / PÁGINA ---------- */
.conteudo { background: var(--mea-cinza-1) !important; }
.pagina { padding: 24px !important; max-width: 1440px; margin: 0 auto; }

/* ---------- BOTÕES ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: var(--r-1);
    font-size: 13px; font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer; text-decoration: none;
    transition: all .15s;
    line-height: 1;
}
.btn-primario, .btn.btn-primario {
    background: var(--mea-navy) !important;
    color: var(--mea-branco) !important;
    border-color: var(--mea-navy) !important;
}
.btn-primario:hover, .btn.btn-primario:hover {
    background: var(--mea-navy-hover) !important;
    border-color: var(--mea-navy-hover) !important;
}
.btn-secundario, .btn.btn-secundario {
    background: var(--mea-branco) !important;
    color: var(--mea-navy) !important;
    border-color: var(--mea-cinza-3) !important;
}
.btn-secundario:hover, .btn.btn-secundario:hover {
    border-color: var(--mea-navy) !important;
    background: var(--mea-cinza-1) !important;
}
.btn-dourado, .btn.btn-dourado {
    background: var(--mea-dourado) !important;
    color: var(--mea-navy) !important;
    border-color: var(--mea-dourado) !important;
}
.btn-dourado:hover, .btn.btn-dourado:hover {
    background: var(--mea-dourado-esc) !important;
    color: var(--mea-branco) !important;
}
/* Excluir fica suave nas listas e no cabecalho (decisao da usuaria, 2026-11-02):
   destaque cheio so ao passar o mouse e no botao que confirma dentro do modal */
.btn-perigo, .btn.btn-perigo {
    background: var(--vermelho-suave) !important;
    color: var(--mea-erro) !important;
    border-color: var(--vermelho-suave) !important;
}
.btn-perigo:hover, .btn.btn-perigo:hover,
.modal-confirm .btn-perigo, .modal-confirm .btn.btn-perigo {
    background: var(--mea-erro) !important;
    color: var(--mea-branco) !important;
    border-color: var(--mea-erro) !important;
}
.btn-sm { padding: 6px 12px !important; font-size: 12px !important; }
.btn-mini { padding: 4px 8px !important; font-size: 11px !important; }

/* ---------- INPUTS ---------- */
.input, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="search"], select, textarea {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--mea-cinza-3);
    border-radius: var(--r-1);
    background: var(--mea-branco);
    font-size: 13px;
    color: var(--mea-cinza-8);
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
textarea { height: auto; padding: 10px 12px; line-height: 1.5; }
.input:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--mea-dourado) !important;
    box-shadow: 0 0 0 3px var(--mea-dourado-suave) !important;
}
label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--mea-cinza-6); font-weight: 700; margin-bottom: 4px; }

/* ---------- CARDS PADRÃO ---------- */
.card {
    background: var(--mea-branco);
    border: 1px solid var(--mea-cinza-3);
    border-radius: var(--r-2);
    box-shadow: var(--sh-1);
}
.card-cab { padding: 16px 20px; border-bottom: 1px solid var(--mea-cinza-3); font-weight: 700; color: var(--mea-navy); }
.card-corpo { padding: 20px; }

/* ---------- TABELAS PADRÃO ---------- */
.tabela {
    width: 100%; border-collapse: collapse; background: var(--mea-branco);
    border: 1px solid var(--mea-cinza-3);
    border-radius: var(--r-2);
    overflow: hidden;
    font-size: 13px;
}
.tabela thead th {
    background: var(--mea-cinza-1);
    color: var(--mea-cinza-6);
    padding: 10px 14px;
    text-align: left;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--mea-cinza-3);
}
.tabela tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--mea-cinza-3);
    color: var(--mea-cinza-8);
}
.tabela tbody tr:hover td { background: var(--mea-dourado-suave); }
.tabela.zebra tbody tr:nth-child(even) td { background: var(--mea-cinza-1); }
.tabela.zebra tbody tr:nth-child(even):hover td { background: var(--mea-dourado-suave); }

/* ---------- KPI CARDS (padrão dashboards) ---------- */
.kpi-card {
    background: var(--mea-branco);
    border: 1px solid var(--mea-cinza-3);
    border-radius: var(--r-2);
    padding: 20px;
    position: relative;
    box-shadow: var(--sh-1);
    transition: box-shadow .2s, transform .2s;
}
.kpi-card:hover { box-shadow: var(--sh-3); transform: translateY(-1px); }
.kpi-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--mea-cinza-4);
    border-radius: var(--r-2) var(--r-2) 0 0;
}
/* Faixa de 3px e semantica (Padrao_KPI_Dashboard:28-35): ouro nao entra aqui. */
.kpi-card.receita::before { background: linear-gradient(90deg, #22c55e, #16a34a); }
.kpi-card.despesa::before { background: linear-gradient(90deg, #f87171, #dc2626); }
.kpi-card .lbl {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--mea-cinza-6); font-weight: 700; margin-bottom: 6px;
}
.kpi-card .val { font-size: 24px; font-weight: 800; color: var(--mea-navy); letter-spacing: -0.02em; }
.kpi-card .sub { font-size: 12px; color: var(--mea-cinza-6); margin-top: 4px; }

/* ---------- ALERTS / FLASH ---------- */
.alert, .flash {
    padding: 12px 16px;
    border-radius: var(--r-1);
    font-size: 13px;
    font-weight: 500;
    display: flex; align-items: center; gap: 10px;
    border: 1px solid;
    margin-bottom: 12px;
}
.alert-success, .flash.success { background: rgba(22,163,74,0.08); color: #166534; border-color: rgba(22,163,74,0.2); }
.alert-danger,  .flash.danger  { background: rgba(220,38,38,0.08); color: #991b1b; border-color: rgba(220,38,38,0.2); }
.alert-warning, .flash.warning { background: rgba(245,158,11,0.08); color: #92400e; border-color: rgba(245,158,11,0.2); }
.alert-info,    .flash.info    { background: rgba(2,132,199,0.08); color: #075985; border-color: rgba(2,132,199,0.2); }

/* ---------- BADGES / PÍLULAS ---------- */
.badge, .pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: var(--r-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: var(--mea-cinza-2);
    color: var(--mea-cinza-6);
}
.badge-navy   { background: var(--mea-navy-suave); color: var(--mea-navy); }
.badge-dourado{ background: var(--mea-dourado-suave); color: var(--mea-dourado-esc); }
.badge-verde  { background: rgba(22,163,74,0.10); color: #166534; }
.badge-erro   { background: rgba(220,38,38,0.10); color: #991b1b; }

/* Status "ativo" universal (não mais verde brigando com dourado) */
.icone-status.ativo   { color: var(--mea-dourado) !important; }
.icone-status.inativo { color: var(--mea-cinza-5) !important; }

/* Título de página comum */
.titulo-pagina, .pagina-titulo, .pagina h1 { color: var(--mea-navy); font-weight: 800; letter-spacing: -0.01em; }


/* Topbar OCULTA: título da página aparece dentro do conteúdo */
.topbar { display: none !important; }


/* Botão VOLTAR global (aparece no topo de todas as telas exceto home) */
.voltar-global-wrap {
    padding: 16px 24px 0;
    max-width: 1440px;
    margin: 0 auto;
}
.btn-voltar-global {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: white;
    border: 1px solid var(--mea-cinza-3);
    border-radius: var(--r-1);
    color: var(--mea-cinza-6);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}
.btn-voltar-global i { font-size: 15px; }
.btn-voltar-global:hover {
    background: var(--mea-navy);
    color: white;
    border-color: var(--mea-navy);
    transform: translateX(-2px);
}

/* Tamanho de icone Phosphor por classe, nunca por style= inline (Icones_Phosphor:142).
   !important reproduz a precedencia do style= que estas classes substituiram em 2026-11-02. */
.ph.ic-10 { font-size: 10px !important; }
.ph.ic-11 { font-size: 11px !important; }
.ph.ic-14 { font-size: 14px !important; }
.ph.ic-16 { font-size: 16px !important; }
.ph.ic-18 { font-size: 18px !important; }
.ph.ic-24 { font-size: 24px !important; }
.ph.ic-32 { font-size: 32px !important; }
.ph.ic-36 { font-size: 36px !important; }
.ph.ic-48 { font-size: 48px !important; }
.ph.ic-56 { font-size: 56px !important; }

/* Celular: a .topbar oculta levava junto o unico botao que abre a sidebar (#btnMenu).
   Abaixo de 880px ela volta so com o botao; titulo e acoes ja estao na .pagina-cab.
   Na tela Inicio (sem sidebar) segue oculta. Responsividade_Sempre, breakpoint 880. */
@media (max-width: 880px) {
    .topbar { display: flex !important; }
    .topbar .titulo-pagina,
    .topbar .topbar-dir { display: none; }
    .topbar .btn-menu { min-width: 44px; min-height: 44px; }
    body.sem-sidebar .topbar { display: none !important; }
}

/* <label> usado como botao (upload escondido) nao herda o maiusculo dos rotulos de formulario */
label.btn { text-transform: none; letter-spacing: normal; }

/* Estado vazio (Padrao_Estado_Vazio): bloco centrado, icone + titulo + frase, sem card e sem botao */
.vz { flex:1; min-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:32px 20px; }
.vz .vz-icone { font-size:40px; color:var(--texto-fraco); line-height:1; margin-bottom:16px; }
.vz-titulo { margin:0; font-family:var(--font-titulo, inherit); font-size:17px; font-weight:700; letter-spacing:-.02em; color:var(--texto); }
.vz-sub { margin:7px 0 0; font-size:13.5px; color:var(--texto-suave, var(--texto-secundario)); line-height:1.5; max-width:400px; }
.vz-inline { flex:none; min-height:150px; padding:22px 16px; }
.vz-inline .vz-icone { font-size:30px; margin-bottom:10px; }
.vz-inline .vz-titulo { font-size:14.5px; }
.vz-inline .vz-sub { font-size:12.5px; }

/* Dica abaixo de um grupo de campos de formulario */
.dica-campo { font-size: 12px; color: var(--texto-secundario); margin: -4px 0 14px; line-height: 1.45; }