/* Lissa Organization - estilos base (paleta neutra/minimalista) */
:root {
    --cor-fundo: #FFFFFF;
    --cor-texto: #022B39;      /* azul-marinho da marca */
    --cor-primaria: #988455;   /* dourado/bronze da marca - accent */
    --cor-primaria-escura: #7A6941;
    --cor-secundaria: #F1EDE3; /* tom claro derivado do dourado, para fundos alternados */
    --cor-branco: #FFFFFF;
    --cor-borda: #E4DFD0;
    --cor-marinho: #022B39;
    --fonte-titulo: 'Poppins', sans-serif;
    --fonte-texto: 'Lora', serif;
    --radius: 10px;
    --transicao: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    /* build v68: cores "em RGB" para poder usar transparência e trocar no modo escuro */
    --texto-rgb: 2, 43, 57;
    --sombra-rgb: 2, 43, 57;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
    margin: 0;
    font-family: var(--fonte-texto);
    color: var(--cor-texto);
    background: var(--cor-fundo);
    line-height: 1.6;
}

h1, h2, h3, h4, .logo { font-family: var(--fonte-titulo); }

a { color: var(--cor-primaria-escura); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* Header */
.site-header {
    background: var(--cor-branco);
    border-bottom: 1px solid var(--cor-borda);
    position: sticky; top: 0; z-index: 50;
    transition: box-shadow var(--transicao), padding var(--transicao);
}
.site-header.com-sombra { box-shadow: 0 6px 20px rgba(var(--sombra-rgb), 0.08); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 14px 24px; transition: padding var(--transicao); max-width: 1280px; }
.logo { display: flex; align-items: center; gap: 12px; font-size: 1.3rem; font-weight: 700; color: var(--cor-texto); flex: 0 0 auto; }
.logo span { color: var(--cor-primaria); }
.logo-img { height: 48px; width: auto; display: block; transition: transform var(--transicao); }
.logo:hover .logo-img { transform: scale(1.06) rotate(-2deg); }
.main-nav { flex: 1 1 auto; min-width: 0; }
.main-nav ul { list-style: none; display: flex; flex-wrap: nowrap; gap: 18px; margin: 0; padding: 0; white-space: nowrap; }
.main-nav a { position: relative; color: var(--cor-texto); font-weight: 500; font-size: 0.95rem; transition: color var(--transicao); }
.main-nav a::after {
    content: ''; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
    background: var(--cor-primaria); transition: width var(--transicao);
}
.main-nav a.ativo::after, .main-nav a:hover::after { width: 100%; }
.main-nav a.ativo, .main-nav a:hover { color: var(--cor-primaria-escura); text-decoration: none; }
.botao-nav::after { display: none; }
.botao-nav { background: var(--cor-primaria); color: var(--cor-branco) !important; padding: 8px 18px; border-radius: 30px; transition: background var(--transicao), transform var(--transicao); }
.botao-nav:hover { background: var(--cor-primaria-escura); transform: translateY(-2px); }
.menu-toggle { display: none; background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--cor-texto); }

/* Botões */
.botao { display: inline-block; padding: 12px 28px; border-radius: 30px; font-weight: 600; font-family: var(--fonte-titulo); font-size: 0.95rem; cursor: pointer; border: 2px solid transparent; transition: background var(--transicao), transform var(--transicao), box-shadow var(--transicao), color var(--transicao); }
.botao-primario { background: var(--cor-primaria); color: var(--cor-branco); }
.botao-primario:hover { background: var(--cor-primaria-escura); text-decoration: none; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(152, 132, 85, 0.35); }
.botao-secundario { border-color: var(--cor-primaria); color: var(--cor-primaria-escura); background: transparent; }
.botao-secundario:hover { background: var(--cor-secundaria); text-decoration: none; transform: translateY(-3px); }

/* Hero */
.hero { padding: 72px 0; }
.hero-inner { display: flex; align-items: center; gap: 48px; }
.hero-texto { flex: 1; }
.hero-texto h1 { font-size: 2.4rem; margin-bottom: 16px; }
.hero-botoes { display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.hero-imagem { flex: 1; overflow: hidden; border-radius: var(--radius); }
.hero-imagem img { width: 100%; display: block; border-radius: var(--radius); transition: transform 0.6s ease; }
.hero-imagem:hover img { transform: scale(1.05); }

/* Seções genéricas */
.secao { padding: 64px 0; }
.secao-sobre { background: var(--cor-branco); }
.sobre-inner { display: flex; align-items: center; gap: 48px; }
.sobre-imagem, .sobre-texto { flex: 1; }
.sobre-imagem { overflow: hidden; border-radius: var(--radius); }
.sobre-imagem img { width: 100%; display: block; border-radius: var(--radius); transition: transform 0.6s ease; }
.sobre-imagem:hover img { transform: scale(1.05); }
.etiqueta { display: inline-block; background: var(--cor-secundaria); color: var(--cor-primaria-escura); padding: 4px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; margin-bottom: 12px; }
.etiqueta-centro { display: block; text-align: center; margin: 0 auto 8px; width: fit-content; }
.titulo-centro { text-align: center; margin-bottom: 40px; }
.texto-centro { text-align: center; margin-top: 32px; }

/* Serviços */
.grid-servicos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.card-servico {
    background: var(--cor-branco); border: 1px solid var(--cor-borda); border-radius: var(--radius); padding: 24px;
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.card-servico:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(var(--sombra-rgb), 0.1); border-color: var(--cor-primaria); }
.card-servico h3 { margin: 0 0 8px; font-size: 1.05rem; }

/* Pacotes */
.grid-pacotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 24px; }
.card-pacote {
    background: var(--cor-branco); border: 1px solid var(--cor-borda); border-radius: var(--radius); padding: 32px 24px; text-align: center;
    transition: transform var(--transicao), box-shadow var(--transicao);
}
.card-pacote:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(var(--sombra-rgb), 0.1); }
.card-pacote-destaque { border-color: var(--cor-primaria); box-shadow: 0 8px 24px rgba(152,132,85,0.2); transform: translateY(-4px); }
.card-pacote-destaque:hover { transform: translateY(-9px); }
.subtitulo-pacote { color: var(--cor-primaria-escura); font-style: italic; }
.card-pacote ul { text-align: left; padding-left: 20px; }

/* Contato */
.secao-contato { background: var(--cor-branco); }
.contato-inner { display: flex; gap: 48px; align-items: flex-start; }
.contato-texto, .contato-form { flex: 1; }
.contato-form form { background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--radius); padding: 28px; }
.campo { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.campo label { font-weight: 600; font-size: 0.9rem; }
.campo input, .campo select, .campo textarea {
    padding: 10px 12px; border: 1px solid var(--cor-borda); border-radius: 6px;
    font-family: var(--fonte-texto); font-size: 1rem; background: var(--cor-branco);
}
.campo-honeypot { position: absolute; left: -9999px; top: -9999px; }
.alerta { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 0.9rem; }
.alerta-sucesso { background: #E4F3E4; color: #2B6B2B; border: 1px solid #B7DDB7; }
.alerta-erro { background: #FBE7E7; color: #8A2B2B; border: 1px solid #EEB9B9; }

/* Páginas internas (sobre, serviços, pacotes, faq, login) */
.pagina-interna { background: var(--cor-branco); }
.lista-faq { max-width: 760px; margin: 0 auto; }
.item-faq { border-bottom: 1px solid var(--cor-borda); padding: 16px 0; }
.item-faq summary { cursor: pointer; font-weight: 600; }

/* Footer */
.site-footer { background: var(--cor-texto); color: #F1EBE1; padding: 48px 0 0; margin-top: 64px; }
.footer-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; padding-bottom: 32px; }
.footer-inner h3, .footer-inner h4 { color: #fff; }
.footer-inner a { color: #E9E2D8; }
.footer-bottom { text-align: center; border-top: 1px solid rgba(255,255,255,0.15); padding: 16px 0; font-size: 0.85rem; }

/* Login / painel */
.form-login { max-width: 420px; margin: 40px auto; background: var(--cor-branco); border: 1px solid var(--cor-borda); border-radius: var(--radius); padding: 32px; }

/* Área logada ("sistema"): coluna lateral de navegação nas páginas de
   Dashboard/Painel/Usuários/Níveis de Acesso/Relatórios/Perguntas
   Frequentes/Portal Financeiro. O menu de cima continua igual (só com o
   link único de "Minha Área").
   Build v31: a pedido do cliente, a coluna passou a ficar TRAVADA na
   borda esquerda da janela (position: fixed) em vez de rolar dentro de
   uma coluna centralizada — assim o conteúdo principal (tabelas,
   gráficos do Portal Financeiro etc.) ganha mais espaço horizontal de
   verdade, em vez de ficar preso a um bloco central de 1200px com sobra
   de tela dos dois lados. Em telas estreitas (celular) ela volta a ficar
   empilhada em cima do conteúdo, como sempre foi. */
:root { --largura-sidebar-app: 230px; }

.app-shell { display: block; }
.app-conteudo {
    margin-left: var(--largura-sidebar-app);
    padding: 0 32px;
    min-width: 0;
}
/* Dentro da área logada, o conteúdo pode usar bem mais largura do que o
   .container padrão do site público (pensado pra texto de marketing) —
   é isso que dá "mais espaço livre" pras tabelas e gráficos do Portal
   Financeiro, por exemplo. */
.app-conteudo .container { max-width: 1400px; }

.app-sidebar {
    position: fixed; top: 0; left: 0; width: var(--largura-sidebar-app); height: 100vh;
    overflow-y: auto;
    background: var(--cor-secundaria);
    border-right: 1px solid var(--cor-borda);
    /* padding-top dá espaço pro cabeçalho do site (que fica por cima,
       sticky, com z-index maior) não tampar o primeiro link do menu. */
    padding: 96px 22px 24px;
    z-index: 40;
}
/* Build v43: menu mais compacto (fonte menor, menos espaço entre itens e
   grupos) — a pedido do Gelson, porque a lista de páginas internas só
   tende a crescer e o menu já estava precisando de barra de rolagem numa
   tela comum. */
.app-sidebar-nav, .app-sidebar-rodape { display: flex; flex-direction: column; }
.app-sidebar-nav a, .app-sidebar-rodape a {
    padding: 5px 0 5px 12px; margin-left: -12px; color: var(--cor-texto); font-size: 0.88rem;
    line-height: 1.3;
    border-left: 2px solid transparent; transition: color var(--transicao), border-color var(--transicao);
}
.app-sidebar-nav a:hover, .app-sidebar-rodape a:hover { color: var(--cor-primaria-escura); text-decoration: none; }
.app-sidebar-nav a.ativo, .app-sidebar-rodape a.ativo {
    color: var(--cor-primaria-escura); font-weight: 700; border-left-color: var(--cor-primaria);
}
.app-grupo-titulo {
    font-family: var(--fonte-titulo); font-weight: 700; font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--cor-texto); margin: 14px 0 3px;
}
.app-sidebar-nav .app-grupo-titulo:first-child { margin-top: 0; }
.app-sidebar-rodape { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--cor-borda); }

/* Build v55 — menu em "gaveta" no celular, a pedido do Gelson (mesma ideia
   do outro site dele): um botão "Menu Financeiro" no topo do conteúdo abre
   o menu como uma coluna vertical por cima da tela, com o fundo escurecido.
   No computador (> 900px) nada disso aparece: continua a coluna lateral. */
.app-menu-botao, .app-menu-topo, .app-menu-fundo, .app-grupo-titulo-usuario { display: none; }

@media (max-width: 900px) {
    .app-conteudo { margin-left: 0; padding: 0 6% 40px; }

    .app-menu-botao {
        /* largura deixa espaço, à direita, para a bandeira de idioma (fica fixa nesse canto no celular) */
        display: block; width: calc(100% - 68px); margin: 14px 0 6px; padding: 11px 14px;
        background: var(--cor-marinho); color: var(--cor-branco); border: none; border-radius: 6px;
        font-family: var(--fonte-titulo); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em;
        text-align: center; cursor: pointer;
    }
    .app-menu-fundo {
        display: block; position: fixed; inset: 0; z-index: 110;
        background: rgba(var(--sombra-rgb), 0.55); opacity: 0; transition: opacity 0.25s ease;
    }
    .app-menu-fundo[hidden] { display: none; }
    .app-menu-fundo.aberto { opacity: 1; }

    .app-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; width: 78vw; max-width: 320px; height: 100%;
        padding: 0 20px 28px; margin: 0;
        background: var(--cor-marinho); border: none; overflow-y: auto; -webkit-overflow-scrolling: touch;
        z-index: 120; transform: translateX(-102%); transition: transform 0.28s ease, visibility 0s linear 0.28s;
        box-shadow: none; visibility: hidden;
    }
    .app-sidebar.aberto { transform: translateX(0); visibility: visible; transition: transform 0.28s ease, visibility 0s; box-shadow: 8px 0 30px rgba(0,0,0,0.35); }

    .app-menu-topo {
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: 0; padding: 18px 0 10px; background: var(--cor-marinho); z-index: 1;
    }
    .app-menu-topo-titulo { color: var(--cor-primaria); font-family: var(--fonte-titulo); font-weight: 700; font-size: 0.95rem; }
    .app-menu-fechar { background: none; border: none; color: var(--cor-branco); font-size: 1.9rem; line-height: 1; cursor: pointer; padding: 0 4px; }

    .app-sidebar-nav, .app-sidebar-rodape { flex-direction: column; flex-wrap: nowrap; gap: 0; }
    .app-sidebar-nav a, .app-sidebar-rodape a {
        margin-left: 0; padding: 9px 0 9px 4px; border-left: none; color: rgba(255,255,255,0.88); font-size: 0.95rem;
    }
    .app-sidebar-nav a:hover, .app-sidebar-rodape a:hover { color: var(--cor-branco); }
    .app-sidebar-nav a.ativo, .app-sidebar-rodape a.ativo { color: var(--cor-primaria); border-left: none; text-decoration: none; font-weight: 700; }
    .app-grupo-titulo, .app-grupo-titulo-usuario {
        display: block; width: auto; color: var(--cor-branco); margin: 20px 0 4px; padding-bottom: 5px;
        border-bottom: 1px solid rgba(255,255,255,0.35); font-size: 0.74rem;
    }
    .app-sidebar-nav .app-grupo-titulo:first-child { margin-top: 6px; }
    .app-sidebar-rodape { margin-top: 0; padding-top: 0; border-top: none; }
}
body.app-menu-aberto { overflow: hidden; }

/* Menu vira "hambúrguer" um pouco antes do ponto de quebra geral do
   conteúdo, porque o menu (Sobre, Serviços, Monte seu Plano, Perguntas
   Frequentes, Pacotes, Contato, Login) precisa de mais espaço numa única
   linha do que o restante do conteúdo da página. */
@media (max-width: 1040px) {
    .menu-toggle { display: block; }
    .main-nav { display: none; width: 100%; }
    .main-nav.aberto { display: block; animation: nav-abre 0.3s ease; }
    .main-nav ul { flex-direction: column; flex-wrap: nowrap; white-space: normal; gap: 4px; padding: 16px 0; }
    .header-inner { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
    .logo-img { height: 40px; }
    .logo-texto { font-size: 0.98rem; }
}

@media (max-width: 860px) {
    .hero-inner, .sobre-inner, .contato-inner { flex-direction: column; }
}

/* ---------- Animações de entrada ao rolar a tela ---------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}
.reveal.reveal-visivel { opacity: 1; transform: translateY(0); }

.reveal-grupo .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-grupo .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-grupo .reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal-grupo .reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal-grupo .reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal-grupo .reveal:nth-child(6) { transition-delay: 0.4s; }
.reveal-grupo .reveal:nth-child(7) { transition-delay: 0.48s; }
.reveal-grupo .reveal:nth-child(8) { transition-delay: 0.56s; }

@keyframes nav-abre {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   Layout novo da Home (réplica da estrutura do site original)
   ========================================================= */

/* Nav extra: ícone de login */
.main-nav .link-icone { display: inline-flex; align-items: center; gap: 6px; }
.main-nav .link-icone svg { width: 18px; height: 18px; }

/* Seletor de idioma: widget flutuante fixo no canto superior direito
   (mesmo princípio do botão do WhatsApp, só que no topo da página). Abre
   uma lista com as 3 bandeiras. */
.bandeira-icone { width: 20px; height: 14px; border-radius: 3px; display: block; box-shadow: 0 0 0 1px rgba(var(--sombra-rgb), 0.15); }
.idioma-flutuante { position: fixed; top: 18px; right: 20px; z-index: 95; }
.seletor-idioma {
    display: flex; align-items: center; gap: 8px; border: 1px solid var(--cor-borda); border-radius: 20px;
    padding: 8px 14px; font-size: 0.85rem; background: var(--cor-branco); cursor: pointer;
    color: var(--cor-texto); box-shadow: 0 6px 18px rgba(var(--sombra-rgb), 0.12);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.seletor-idioma:hover { border-color: var(--cor-primaria); }
.seletor-idioma .seta-idioma { width: 10px; height: 7px; color: var(--cor-primaria-escura); transition: transform var(--transicao); }
.idioma-flutuante.aberto .seletor-idioma .seta-idioma { transform: rotate(180deg); }
.submenu-idioma {
    list-style: none; margin: 0; padding: 8px 0; position: absolute; top: calc(100% + 10px); right: 0;
    background: var(--cor-branco); border: 1px solid var(--cor-borda); border-radius: 10px;
    min-width: 170px; box-shadow: 0 14px 34px rgba(var(--sombra-rgb), 0.15); z-index: 60;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
.idioma-flutuante.aberto .submenu-idioma { opacity: 1; visibility: visible; transform: translateY(0); }
.opcao-idioma {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 16px; border: none; background: none;
    font-family: var(--fonte-texto); font-size: 0.92rem; color: var(--cor-texto); cursor: pointer; text-align: left;
    transition: background var(--transicao);
}
.opcao-idioma:hover, .opcao-idioma.ativo { background: var(--cor-secundaria); }

/* build v56: no celular/tablet (onde o menu vira "hambúrguer") a bandeira de
   idioma deixa de flutuar sobre o conteúdo e fica DENTRO da barra do topo,
   ao lado das 3 linhas do menu. */
@media (max-width: 1040px) {
    .idioma-flutuante { position: relative; top: auto; right: auto; margin-left: auto; z-index: 5; }
    .seletor-idioma { padding: 6px 10px; gap: 6px; box-shadow: none; }
    .menu-toggle { margin-left: 2px; }
}

/* Hero cheio, com foto de fundo e texto sobreposto (como o site original) */
.hero-full { position: relative; overflow: hidden; background: var(--cor-secundaria); }
.hero-full-img { width: 100%; height: clamp(360px, 58vw, 620px); object-fit: cover; object-position: 30% 8%; display: block; }
.hero-full-conteudo {
    position: absolute; left: 0; top: 0; height: 100%; width: 100%;
    display: flex; align-items: center; justify-content: flex-end; padding: 0 6vw;
}
.hero-full-conteudo h1 {
    font-size: clamp(1.7rem, 3.2vw, 2.6rem); color: var(--cor-texto); max-width: 520px; margin: 0;
    text-align: right;
    text-shadow: 0 2px 18px rgba(255,255,255,0.35);
}
.hero-full-botao {
    position: absolute; right: 5%; bottom: 32px;
    z-index: 5;
}
.hero-full-botao .botao-primario { box-shadow: 0 12px 30px rgba(var(--sombra-rgb), 0.25); }

/* Blocos "split" com foto de um lado e conteúdo do outro */
.bloco-split { display: flex; align-items: stretch; }
.bloco-split .lado-imagem { flex: 0 0 42%; overflow: hidden; }
.bloco-split .lado-imagem img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.bloco-split .lado-imagem:hover img { transform: scale(1.04); }
.bloco-split .lado-conteudo { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 56px 6%; }

/* Sobre: cartão marinho sobreposto à foto */
.bloco-sobre { position: relative; padding-top: 60px; justify-content: center; }
.bloco-sobre .lado-imagem { flex: 0 0 34%; margin-left: 0; border-radius: var(--radius); }
.bloco-sobre .lado-conteudo {
    background: var(--cor-marinho); color: #EFEFE9; margin-left: -4%; margin-top: 40px; margin-bottom: 40px;
    border-radius: var(--radius); box-shadow: 0 20px 50px rgba(var(--sombra-rgb), 0.25);
    flex: 0 1 620px; max-width: 620px;
}
.bloco-sobre .lado-conteudo h2 { color: var(--cor-branco); font-size: 2rem; margin: 0 0 20px; text-align: center; }
.bloco-sobre .lado-conteudo p { margin: 0 0 14px; text-align: justify; }
.bloco-sobre .lado-conteudo p:last-child { margin-bottom: 0; }

/* Serviços: foto + caixa clara com lista de ícones */
/* padding-top igual ao usado em .bloco-sobre, para abrir o mesmo respiro
   visual entre este bloco e o bloco "Sobre" logo acima (que antes ficavam
   colados um no outro). */
.bloco-servicos { padding-top: 60px; }
.bloco-servicos .lado-imagem { flex: 0 0 38%; }
.bloco-servicos .lado-conteudo { background: var(--cor-secundaria); padding: 56px 6%; }
.bloco-servicos .lado-conteudo h2 { font-size: 2rem; margin: 0 0 28px; }
.lista-icones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.lista-icones li { display: flex; align-items: center; gap: 14px; }
.lista-icones .icone-servico {
    flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    color: var(--cor-primaria-escura);
}
.lista-icones .icone-servico svg { width: 24px; height: 24px; }

/* Pacotes: faixa azul-marinho com 3 cards */
.faixa-pacotes { background: var(--cor-marinho); padding: 72px 0; color: #EFEFE9; }
.faixa-pacotes .titulo-centro { color: var(--cor-branco); font-size: 2rem; }
.faixa-pacotes .subtitulo-faixa { color: #EFEFE9; }
.subtitulo-faixa { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.cards-pacotes-v2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.card-pacote-v2 {
    background: var(--cor-branco); color: var(--cor-texto); border-radius: var(--radius); overflow: hidden; text-align: center;
    display: flex; flex-direction: column; transition: transform var(--transicao), box-shadow var(--transicao);
}
.card-pacote-v2:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(var(--sombra-rgb), 0.2); }
.card-pacote-v2 .topo-pacote { position: relative; }
.card-pacote-v2 .foto-pacote {
    display: block; width: 100%; height: 240px; object-fit: cover;
}
.card-pacote-v2 .selo-pacote {
    background: var(--cor-marinho); color: var(--cor-branco); font-family: var(--fonte-titulo); font-weight: 700;
    font-size: 0.82rem; letter-spacing: 0.04em; padding: 10px 20px; border-radius: 6px;
    position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); white-space: nowrap;
    box-shadow: 0 8px 18px rgba(var(--sombra-rgb), 0.3);
    /* Virou <button> na build v42 (era <span>) — clicar leva ao formulário
       de contato com os itens deste pacote já marcados. Reseta a
       aparência padrão de botão do navegador, mantendo o visual de antes. */
    border: none; cursor: pointer; transition: background var(--transicao), transform var(--transicao);
}
.card-pacote-v2 .selo-pacote:hover,
.card-pacote-v2 .selo-pacote:focus-visible {
    background: var(--cor-primaria-escura); transform: translateX(-50%) scale(1.05);
}
.card-pacote-v2 .corpo-pacote { padding: 36px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.card-pacote-v2 h3 { font-size: 1.15rem; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 4px; }
.card-pacote-v2 .tagline-pacote { color: var(--cor-primaria-escura); font-style: italic; font-weight: 600; margin: 0 0 18px; }
.card-pacote-v2 .objetivo-pacote { font-weight: 600; margin-bottom: 16px; }
.card-pacote-v2 .rotulo-inclui { font-weight: 700; text-align: left; margin-bottom: 8px; }
.card-pacote-v2 ul { text-align: left; padding-left: 20px; margin: 0 0 16px; }
.card-pacote-v2 ul li { margin-bottom: 6px; }
.card-pacote-v2 .bonus-pacote { text-align: left; font-size: 0.9rem; border-top: 1px dashed var(--cor-borda); padding-top: 14px; margin-top: auto; }
.card-pacote-v2--destaque { box-shadow: 0 16px 36px rgba(var(--sombra-rgb), 0.2); }

/* Personalize (CTA split, texto + foto) */
.bloco-personalize .lado-conteudo { flex: 0 0 46%; padding: 64px 6%; }
.bloco-personalize .lado-conteudo h2 { font-size: 2rem; margin: 0 0 18px; }
.bloco-personalize .lado-imagem { flex: 1; }

/* "Nossa Missão" saiu da Home na build v35 (virou o bloco "Nossa
   Estrutura" logo abaixo) — CSS removido junto. O texto continua
   traduzido em lang/*.php (chave 'missao'), sem uso no momento, só pra
   não perder o conteúdo caso o bloco volte um dia. */

/* ---------- "Nossa Estrutura" (build v35, ajustado na v37/v39) ----------
   3 cartões lado a lado (Diretora, Gerente Administrativa, Gerente de
   TI). Na v35/v36 o cargo aparecia em uma etiqueta sobre a foto; a
   cliente pediu (via esboço) para o cargo virar um título centralizado
   logo abaixo da foto. Na v39 entrou o nome de cada pessoa acima do
   cargo: .equipe-card-nome (nome, mais destaque) + .equipe-card-cargo
   (cargo, agora um subtítulo menor). Substituiu o carrossel da build
   v34 (não fazia mais sentido girar 1 pessoa por vez já que as 3 cabem
   lado a lado). */
.secao-equipe { background: var(--cor-secundaria); padding: 72px 0; }
.secao-equipe .titulo-centro { font-size: 2rem; }
.equipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 8px; }
.equipe-card {
    background: var(--cor-branco); border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 10px 26px rgba(var(--sombra-rgb), 0.07); display: flex; flex-direction: column;
}
.equipe-card-foto { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.equipe-card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.equipe-card:hover .equipe-card-foto img { transform: scale(1.04); }
.equipe-card-corpo { padding: 22px 22px 26px; text-align: center; }
.equipe-card-nome {
    color: var(--cor-marinho); font-family: var(--fonte-titulo); font-size: 1.1rem; font-weight: 700;
    margin: 0 0 2px;
}
.equipe-card-cargo {
    color: var(--cor-primaria-escura); font-weight: 600; font-size: 0.82rem; text-transform: uppercase;
    letter-spacing: 0.04em; margin: 0 0 12px;
}
.equipe-card-corpo p:last-child { margin-bottom: 0; font-size: 0.95rem; text-align: left; }

/* Perguntas Frequentes (âncora dentro da Home) */
.faixa-faq { background: var(--cor-branco); padding: 72px 0; }

/* Contato v2: split navy / dourado */
.bloco-contato-v2 { display: flex; }
.contato-v2-navy, .contato-v2-gold { flex: 1; padding: 56px 6%; }
.contato-v2-navy { background: var(--cor-marinho); color: #EFEFE9; }
.contato-v2-navy h2 { color: var(--cor-branco); font-size: 2.2rem; margin: 0 0 8px; }
.contato-v2-navy .endereco { margin: 24px 0; line-height: 1.7; }
.contato-v2-navy a { color: #EFEFE9; }
.icones-sociais { display: flex; gap: 14px; margin-bottom: 28px; }
.icones-sociais a {
    width: 40px; height: 40px; border: 1.5px solid #EFEFE9; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; transition: background var(--transicao), transform var(--transicao);
}
.icones-sociais a:hover { background: rgba(255,255,255,0.12); transform: translateY(-3px); }
.icones-sociais svg { width: 18px; height: 18px; }
.contato-v2-gold { background: var(--cor-primaria); }
.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.campo-v2 { margin-bottom: 22px; }
.campo-v2 label { display: block; font-size: 0.85rem; margin-bottom: 4px; color: var(--cor-texto); }
.campo-v2 input, .campo-v2 textarea {
    width: 100%; background: transparent; border: none; border-bottom: 1.5px solid var(--cor-texto);
    padding: 6px 2px; font-family: var(--fonte-texto); font-size: 1rem; color: var(--cor-texto);
}
.campo-v2 input::placeholder, .campo-v2 textarea::placeholder { color: rgba(var(--texto-rgb), 0.55); }
.campo-v2 input:focus, .campo-v2 textarea:focus { outline: none; border-bottom-color: var(--cor-marinho); }
/* Telefone: seletor de país (código) + campo do número, lado a lado,
   mantendo o mesmo visual "sublinhado" dos outros campos do formulário. */
.grupo-telefone { display: flex; gap: 10px; }
.grupo-telefone select {
    flex: 0 0 auto; background: transparent; border: none; border-bottom: 1.5px solid var(--cor-texto);
    padding: 6px 2px; font-family: var(--fonte-texto); font-size: 0.95rem; color: var(--cor-texto); cursor: pointer;
}
.grupo-telefone select:focus { outline: none; border-bottom-color: var(--cor-marinho); }
.grupo-telefone input { flex: 1; min-width: 0; }
/* "Serviços desejados" no formulário de contato (build v42, ponto 6):
   clicar em "Selecionar Serviços" num Pacote marca os itens dele aqui;
   a pessoa também pode marcar/desmarcar na mão. Fica dentro da coluna
   dourada (.contato-v2-gold), por isso usa tons de azul-marinho pro
   conteúdo se destacar do fundo, mesmo espírito da confirmação de envio
   logo abaixo. */
.campo-servicos-desejados { margin-bottom: 26px; }
.campo-servicos-ajuda { font-size: 0.82rem; color: rgba(var(--texto-rgb), 0.65); margin: 0 0 12px; }
.chips-servicos-selecionados {
    display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; margin-bottom: 12px;
}
.chip-servico {
    background: var(--cor-marinho); color: var(--cor-branco); font-size: 0.76rem;
    padding: 5px 12px; border-radius: 20px; white-space: nowrap;
}
.chip-servico-vazio { font-size: 0.82rem; font-style: italic; color: rgba(var(--texto-rgb), 0.55); }
.lista-servicos-check {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px;
    max-height: 260px; overflow-y: auto; background: rgba(255,255,255,0.55);
    border: 1px solid rgba(var(--texto-rgb), 0.15); border-radius: var(--radius); padding: 14px 16px;
}
.item-servico-check {
    display: flex; align-items: flex-start; gap: 8px; font-size: 0.88rem; font-weight: 400;
    padding: 4px 6px; border-radius: 6px; cursor: pointer; transition: background var(--transicao);
}
.item-servico-check.marcado { background: rgba(var(--texto-rgb), 0.1); }
.item-servico-check input[type="checkbox"] { width: auto; margin: 3px 0 0; cursor: pointer; accent-color: var(--cor-marinho); }
.botao-enviar-v2 {
    display: block; margin: 0 auto; background: none; border: none; font-family: var(--fonte-titulo);
    font-weight: 700; color: var(--cor-marinho); font-size: 1.05rem; cursor: pointer; letter-spacing: 0.03em;
    transition: transform var(--transicao);
}
.botao-enviar-v2:hover { transform: translateY(-2px); }

/* Confirmação de envio do formulário de contato (substitui o form no lugar,
   sem popup — evita bloqueio de popup pelo navegador). O fundo da coluna
   é dourado sólido (.contato-v2-gold), então usamos tons de azul-marinho
   pra manter contraste e legibilidade. */
.contato-confirmacao { text-align: center; padding: 24px 0; color: var(--cor-texto); }
.contato-confirmacao-icone {
    display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
    border-radius: 50%; background: rgba(var(--texto-rgb), 0.12); color: var(--cor-marinho); margin-bottom: 18px;
}
.contato-confirmacao-icone svg { width: 30px; height: 30px; }
.contato-confirmacao h3 { font-size: 1.3rem; margin: 0 0 10px; color: var(--cor-marinho); }
.contato-confirmacao p { margin: 0 0 22px; }
.contato-confirmacao .botao { border-color: var(--cor-marinho); color: var(--cor-marinho); background: transparent; }
.contato-confirmacao .botao:hover { background: rgba(var(--texto-rgb), 0.1); text-decoration: none; }

/* Rodapé mínimo (como o site original) */
.rodape-minimo { background: var(--cor-secundaria); text-align: center; padding: 18px 0; font-size: 0.85rem; }

/* Botão flutuante do WhatsApp */
.whatsapp-flutuante { position: fixed; right: 22px; bottom: 22px; z-index: 90; }
.whatsapp-botao {
    width: 58px; height: 58px; border-radius: 50%; background: #25D366; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(0,0,0,0.25);
    transition: transform var(--transicao);
}
.whatsapp-botao:hover { transform: scale(1.08); }
.whatsapp-botao svg { width: 30px; height: 30px; fill: #fff; }
.whatsapp-popup {
    position: absolute; bottom: 72px; right: 0; width: 280px; background: var(--cor-branco);
    border-radius: 12px; box-shadow: 0 18px 44px rgba(var(--sombra-rgb), 0.25); padding: 18px;
    opacity: 0; visibility: hidden; transform: translateY(12px) scale(0.96); transform-origin: bottom right;
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
.whatsapp-flutuante.aberto .whatsapp-popup { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.whatsapp-popup p { margin: 0 0 14px; font-size: 0.92rem; }
.whatsapp-popup .botao-whatsapp-ir {
    display: flex; align-items: center; justify-content: center; gap: 8px; background: #25D366; color: #fff;
    padding: 10px 16px; border-radius: 30px; font-weight: 600; font-size: 0.9rem;
}
.whatsapp-popup .botao-whatsapp-ir svg { width: 18px; height: 18px; fill: #fff; }
.whatsapp-popup .fechar-popup {
    position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: 1.1rem; cursor: pointer;
    color: var(--cor-texto); line-height: 1;
}

@media (max-width: 900px) {
    .bloco-split { flex-direction: column; }
    .bloco-split .lado-imagem, .bloco-servicos .lado-imagem, .bloco-personalize .lado-conteudo, .bloco-personalize .lado-imagem { flex: 1 1 auto; }
    .bloco-sobre .lado-imagem { margin-left: 0; width: 86%; align-self: center; }
    .bloco-sobre .lado-conteudo { margin-left: 0; margin-top: -40px; width: 86%; max-width: none; align-self: center; }
    .bloco-personalize { flex-direction: column-reverse; }
    .hero-full-conteudo { padding: 0 6vw; background: linear-gradient(to top, rgba(255,255,255,0.55), rgba(255,255,255,0)); }
    .hero-full-botao { right: 50%; bottom: 20px; transform: translateX(50%); }
    .bloco-contato-v2 { flex-direction: column; }
    .linha-campos { grid-template-columns: 1fr; }
    .equipe-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   Painel administrativo (Minha Área, Usuários, Níveis de Acesso)
   ========================================================= */

/* Links de atalho para as áreas de administração, na tela "Minha Área" */
.bloco-admin-painel { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--cor-borda); }
.bloco-admin-painel h2 { font-size: 1.3rem; margin-bottom: 16px; }
.links-admin-painel { display: flex; flex-wrap: wrap; gap: 14px; }

/* Barra de ações no topo das telas de administração (botão "Novo...") */
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 28px 0 20px; }
.admin-toolbar h2 { margin: 0; font-size: 1.4rem; }

/* Cartão de formulário (criar/editar usuário, criar/editar nível) */
.admin-form-card {
    background: var(--cor-branco); border: 1px solid var(--cor-borda); border-radius: var(--radius);
    padding: 28px; margin-bottom: 32px;
}
.admin-form-card h3 { margin: 0 0 20px; font-size: 1.15rem; }
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.admin-form-grid .campo-largura-total { grid-column: 1 / -1; }
.admin-form-ajuda { font-size: 0.82rem; color: rgba(var(--texto-rgb), 0.65); margin: -2px 0 0; }
.admin-form-acoes { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.campo input[type="checkbox"] { width: auto; }
.campo-checkbox { flex-direction: row !important; align-items: center; gap: 10px !important; }

/* Layout de colunas por cliente (Portal Financeiro) — build v44. */
.admin-form-subtitulo { margin: 4px 0 6px; font-size: 0.95rem; color: var(--cor-marinho); }
.admin-form-grid-colunas {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 10px; margin-top: 10px;
}
.campo-coluna label { font-size: 0.78rem; }
.campo-coluna input {
    text-align: center; text-transform: uppercase; font-weight: 600;
    letter-spacing: 0.04em;
}

/* Lista de caixinhas de seleção (ex.: "Clientes vinculados" em Gerenciar
   Usuários, "Categorias no Dashboard") — build v40. */
.lista-checkboxes {
    display: flex; flex-wrap: wrap; gap: 8px 20px; max-height: 220px; overflow-y: auto;
    border: 1px solid var(--cor-borda); border-radius: var(--radius); padding: 14px 16px;
    background: var(--cor-branco); margin-bottom: 6px;
}
.lista-checkboxes-item { display: flex; align-items: center; gap: 8px; font-weight: 400; white-space: nowrap; }
.lista-checkboxes-item input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; }

/* Lista de metas por subcategoria (metas_subcategoria.php, build v41) —
   mesma caixa com rolagem do .lista-checkboxes, mas em coluna (um campo
   numérico por linha, em vez de checkboxes lado a lado). */
.lista-metas {
    display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto;
    border: 1px solid var(--cor-borda); border-radius: var(--radius); padding: 14px 16px;
    background: var(--cor-branco); margin-bottom: 6px;
}
.lista-metas-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.lista-metas-item label { font-weight: 400; }
.lista-metas-item input[type="number"] { width: 140px; margin: 0; }

/* Lista de blocos do Dashboard Financeiro (grafico_cliente.php, build
   v47) — cada linha tem um checkbox de visibilidade e um campo numérico
   de ordem, lado a lado (mistura o espírito de .lista-checkboxes com o
   campo numérico de .lista-metas). */
.lista-blocos {
    display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto;
    border: 1px solid var(--cor-borda); border-radius: var(--radius); padding: 14px 16px;
    background: var(--cor-branco); margin-bottom: 6px;
}
.lista-blocos-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.lista-blocos-visivel { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.lista-blocos-visivel input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; }
.lista-blocos-ordem { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 0.85rem; color: rgba(var(--texto-rgb), 0.65); white-space: nowrap; }
.lista-blocos-ordem input[type="number"] { width: 70px; margin: 0; }

/* Tabelas de listagem (usuários, níveis de acesso) */
/* max-height + overflow: auto faz a PRÓPRIA caixa da tabela rolar (na
   vertical e na horizontal) quando tem muita linha/coluna — em vez de a
   barra de rolar horizontal só aparecer lá embaixo, depois de rolar a
   página inteira. Como é max-height (não height fixo), uma tabela
   curtinha (poucos usuários, poucos clientes) não fica com espaço vazio
   sobrando: só entra em modo "caixa com rolagem" quando o conteúdo é
   realmente maior que isso. */
.admin-tabela-wrap { max-height: 62vh; overflow: auto; border: 1px solid var(--cor-borda); border-radius: var(--radius); }
.admin-tabela { width: 100%; border-collapse: collapse; font-size: 0.92rem; background: var(--cor-branco); }
.admin-tabela th, .admin-tabela td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--cor-borda); white-space: nowrap; }
.admin-tabela th {
    background: var(--cor-secundaria); font-family: var(--fonte-titulo); font-weight: 600; font-size: 0.82rem;
    text-transform: uppercase; letter-spacing: 0.03em;
    /* Cabeçalho fica colado no topo da caixa (não da página) enquanto
       rola a lista — sempre dá pra ver o nome de cada coluna. */
    position: sticky; top: 0; z-index: 1;
}
.admin-tabela tbody tr:last-child td { border-bottom: none; }
.admin-tabela tbody tr:hover { background: rgba(152,132,85,0.06); }

/* Modificador "compacta": tabelas com MUITO dado (relatório financeiro,
   por exemplo) ficam ainda mais densas — linhas mais baixas, fonte um
   pouco menor — pra caber mais lançamento na tela sem precisar rolar
   tanto. Some 'class="admin-tabela admin-tabela--compacta"' na tabela. */
.admin-tabela--compacta { font-size: 0.85rem; }
.admin-tabela--compacta th, .admin-tabela--compacta td { padding: 6px 12px; }

/* Coluna de descrição: permite quebrar linha em vez de empurrar a
   tabela pra largura absurda (era o principal motivo da coluna "Valor"
   ficar cortada, fora da tela). Um teto de largura mantém a coluna
   legível mesmo com descrições bem longas. */
.financeiro-col-descricao { white-space: normal; max-width: 360px; }

/* Coluna de valor: alinhada à direita (padrão pra números/dinheiro) e
   sempre numa linha só. */
.financeiro-col-valor { text-align: right; }
td.financeiro-valor-receita, td.financeiro-valor-despesa { text-align: right; }
.admin-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* Cartões de mensagem (tela "Formulários de Contato"). Usa cartões em vez
   de tabela porque a mensagem em si costuma ser longa e novos campos podem
   ser adicionados no futuro sem quebrar o layout. */
.lista-mensagens-contato { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.cartao-mensagem-contato {
    background: var(--cor-branco); border: 1px solid var(--cor-borda); border-radius: var(--radius);
    padding: 22px 26px;
}
.cartao-mensagem-topo {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--cor-borda);
}
.cartao-mensagem-topo h3 { margin: 0; font-size: 1.1rem; }
.cartao-mensagem-data { font-size: 0.82rem; color: rgba(var(--texto-rgb), 0.6); white-space: nowrap; }
.cartao-mensagem-campos {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 24px;
    margin: 0 0 16px;
}
.campo-mensagem-contato dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(var(--texto-rgb), 0.55); margin: 0 0 2px; }
.campo-mensagem-contato dd { margin: 0; font-size: 0.95rem; }
.cartao-mensagem-texto {
    background: var(--cor-secundaria); border-radius: 10px; padding: 14px 18px; font-size: 0.95rem;
    line-height: 1.6; white-space: pre-wrap; margin: 0 0 16px;
}
.cartao-mensagem-rodape { display: flex; justify-content: flex-end; }

/* Serviços desejados dentro de cada mensagem (build v42, ponto 6) —
   mostra os itens que a pessoa marcou no formulário, pra equipe usar na
   hora de montar o orçamento. */
.cartao-mensagem-servicos { margin: 0 0 16px; }
.rotulo-servicos-mensagem {
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: rgba(var(--texto-rgb), 0.55); margin: 0 0 8px;
}
.lista-servicos-mensagem { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lista-servicos-mensagem li {
    background: var(--cor-secundaria); border: 1px solid var(--cor-borda); border-radius: 20px;
    padding: 5px 12px; font-size: 0.85rem; color: var(--cor-marinho);
}

/* Emblemas de status */
.badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }
.badge-ativo { background: #E4F3E4; color: #2B6B2B; }
.badge-inativo { background: #F1EDE3; color: #7A6941; }

/* Status de leitura das mensagens de contato (build v43) — "caixa de
   entrada" simples pra equipe: não lido (se destaca, cor sólida escura),
   lido (neutro) e respondido (verde, mesma cor de "ativo" acima). */
.badge-nao-lido { background: var(--cor-marinho); color: #fff; }
.badge-lido { background: var(--cor-secundaria); color: var(--cor-primaria-escura); border: 1px solid var(--cor-borda); }
.badge-respondido { background: #E4F3E4; color: #2B6B2B; }

.filtro-status-mensagens { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.filtro-status-mensagens label { font-weight: 600; font-size: 0.9rem; }
.filtro-status-mensagens select {
    padding: 8px 14px; border-radius: 20px; border: 1px solid var(--cor-borda);
    background: var(--cor-branco); color: var(--cor-texto); font-size: 0.9rem; font-family: inherit;
}

/* Mensagem "não lida" ganha uma borda à esquerda pra chamar atenção na
   lista, igual uma caixa de e-mail. */
.cartao-mensagem-contato.status-nao_lido { border-left: 4px solid var(--cor-marinho); }

.cartao-mensagem-rodape { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.cartao-mensagem-status-acoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* Indicadores do Dashboard (Gerencial > Dashboard, build v43) — grade
   simples de cartões, pensada pra ir recebendo mais itens com o tempo
   (o Gelson comentou que vai colocar mais informações aqui). O primeiro
   é o total de mensagens de contato "não lidas". */
.dashboard-indicadores {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px;
    margin-top: 32px; max-width: 900px; margin-left: auto; margin-right: auto;
}
.dashboard-indicador-card {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
    background: var(--cor-branco); border: 1px solid var(--cor-borda); border-radius: var(--radius);
    padding: 24px 18px; color: var(--cor-texto); transition: transform var(--transicao), box-shadow var(--transicao);
}
.dashboard-indicador-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(var(--sombra-rgb), 0.1); text-decoration: none; }
.dashboard-indicador-numero { font-family: var(--fonte-titulo); font-size: 2.4rem; font-weight: 700; color: var(--cor-primaria-escura); line-height: 1; }
.dashboard-indicador-rotulo { font-size: 0.9rem; color: var(--cor-texto); }
.dashboard-indicador-card.dashboard-indicador-alerta .dashboard-indicador-numero { color: var(--cor-marinho); }
.dashboard-indicador-card.dashboard-indicador-alerta { border-color: var(--cor-marinho); }
.badge-admin { background: var(--cor-marinho); color: #fff; }

/* Botões pequenos usados dentro das tabelas */
.botao-mini { padding: 6px 14px; font-size: 0.82rem; border-radius: 20px; }
.botao-perigo { border-color: #C24444; color: #C24444; background: transparent; }
.botao-perigo:hover { background: #FBE7E7; text-decoration: none; }

/* Matriz de permissões (páginas x níveis de acesso) */
.matriz-permissoes-wrap { overflow-x: auto; border: 1px solid var(--cor-borda); border-radius: var(--radius); margin-bottom: 20px; }
.matriz-permissoes { width: 100%; border-collapse: collapse; background: var(--cor-branco); font-size: 0.9rem; }
.matriz-permissoes th, .matriz-permissoes td { padding: 12px 16px; border-bottom: 1px solid var(--cor-borda); text-align: center; }
.matriz-permissoes th { background: var(--cor-secundaria); font-family: var(--fonte-titulo); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.matriz-permissoes td:first-child, .matriz-permissoes th:first-child { text-align: left; font-weight: 600; white-space: nowrap; }
.matriz-permissoes input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.matriz-permissoes .coluna-admin-fixa { color: rgba(var(--texto-rgb), 0.5); font-size: 0.8rem; font-style: italic; }
.admin-form-intro { max-width: 720px; color: rgba(var(--texto-rgb), 0.75); margin-bottom: 24px; }

/* Seletor de ícone (tela "Gerenciar Serviços"): cartõezinhos clicáveis
   com o ícone e o nome dele, em vez de uma lista <select> comum — assim
   dá pra ver o desenho de cada ícone antes de escolher. Cada opção é um
   <label> com um <input type="radio"> escondido dentro; o navegador
   marca o cartão escolhido sozinho com :has(). */
.seletor-icones-servico { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.opcao-icone-servico {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 96px; padding: 12px 8px; border: 1.5px solid var(--cor-borda); border-radius: 8px;
    cursor: pointer; text-align: center; transition: border-color var(--transicao), background var(--transicao);
}
.opcao-icone-servico input { position: absolute; opacity: 0; pointer-events: none; }
.opcao-icone-servico svg { width: 26px; height: 26px; color: var(--cor-primaria-escura); }
.opcao-icone-servico span { font-size: 0.78rem; line-height: 1.3; }
.opcao-icone-servico:hover { border-color: var(--cor-primaria); }
.opcao-icone-servico:has(input:checked) { border-color: var(--cor-primaria); background: var(--cor-secundaria); font-weight: 600; }

/* Ícone pequeno mostrado na coluna "Ícone" da tabela de serviços */
.icone-tabela-servico { display: inline-flex; width: 22px; height: 22px; color: var(--cor-primaria-escura); vertical-align: middle; }
.icone-tabela-servico svg { width: 100%; height: 100%; }

/* Texto auxiliar pequeno (usado em várias tabelas admin: e-mail de
   contato abaixo do nome, nome da aba/moeda da planilha, etc.) */
.texto-auxiliar { font-size: 0.82rem; color: rgba(var(--texto-rgb), 0.6); white-space: normal; }
.texto-erro { color: #C24444; cursor: help; }

/* ---------- Portal Financeiro do Cliente (build v29) ---------- */

/* Páginas do Portal Financeiro (Dashboard e Relatórios) usam esta classe
   extra na <section>, junto de "secao pagina-interna", para ganhar um
   topo bem mais enxuto que o padrão do site institucional (que é uma
   página de marketing, com bastante respiro). A pedido do cliente
   (build v33): título, filtros e cards de KPI ocupavam espaço demais
   antes da tabela/gráficos aparecerem na tela. */
.secao-financeiro { padding: 26px 0 56px; }
.secao-financeiro .titulo-centro { margin-bottom: 16px; }

.financeiro-atualizado-em {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px;
    text-align: center; color: rgba(var(--texto-rgb), 0.65); margin: -6px 0 20px; font-size: 0.92rem;
}
.financeiro-atualizado-em form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.financeiro-atualizado-em label { font-weight: 600; color: var(--cor-texto); }
.financeiro-atualizado-em select {
    padding: 6px 10px; border: 1px solid var(--cor-borda); border-radius: 6px;
    font-family: inherit; font-size: 0.9rem; color: var(--cor-texto); background: var(--cor-branco);
}
.financeiro-form-atualizar { margin: 0; }
/* build v56: barra única de filtros (Cliente, Mês, "Atualizado em", botão). No
   computador o Cliente fica numa linha só dele, como antes. */
.financeiro-barra { margin-top: 0; }
.financeiro-barra-cliente { flex-basis: 100%; justify-content: center; margin-bottom: 4px; }
.financeiro-barra .rotulo-curto { display: none; }

.financeiro-aviso-sem-categoria {
    background: #FBF3E1; border: 1px solid #EAD9AE; color: #6B5216;
    padding: 10px 16px; border-radius: var(--radius); font-size: 0.88rem; margin-bottom: 18px;
}
.financeiro-aviso-sem-categoria a { color: inherit; text-decoration: underline; font-weight: 600; }

.financeiro-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 24px; }
.financeiro-kpis-compacto { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 14px; }
/* build v74: grupo com poucos cartões (ex.: só "Reservas acumuladas") não estica na largura toda. */
.financeiro-kpis-poucos { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.financeiro-kpi-card {
    background: var(--cor-branco); border: 1px solid var(--cor-borda); border-radius: var(--radius);
    padding: 14px 18px; display: flex; flex-direction: column; gap: 6px;
    border-top: 4px solid var(--cor-primaria);
}
.financeiro-kpis-compacto .financeiro-kpi-card { padding: 11px 16px; gap: 3px; }
.financeiro-kpi-rotulo { font-family: var(--fonte-titulo); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(var(--texto-rgb), 0.6); }
.financeiro-kpi-valor { font-family: var(--fonte-titulo); font-size: 1.45rem; font-weight: 600; color: var(--cor-marinho); }
.financeiro-kpis-compacto .financeiro-kpi-valor { font-size: 1.2rem; }
.financeiro-kpi-receita { border-top-color: #2B6B2B; }
.financeiro-kpi-despesa { border-top-color: #C24444; }
.financeiro-kpi-saldo-positivo { border-top-color: var(--cor-primaria); }
.financeiro-kpi-saldo-negativo { border-top-color: #C24444; }
.financeiro-kpi-reserva { border-top-color: #4a3aa7; }
.financeiro-kpi-investimento { border-top-color: #2a78d6; }

.financeiro-kpis-titulo {
    font-family: var(--fonte-titulo); font-size: 0.85rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.03em; color: rgba(var(--texto-rgb), 0.55); margin: 22px 0 10px;
}
.financeiro-kpis-titulo:first-child { margin-top: 0; }

.financeiro-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-bottom: 28px; align-items: start; }
.financeiro-grafico-card {
    background: var(--cor-branco); border: 1px solid var(--cor-borda); border-radius: var(--radius);
    padding: 20px 22px;
}
.financeiro-grafico-card h2 { margin: 0 0 14px; font-size: 1.02rem; }
.financeiro-grafico-card--largo { grid-column: 1 / -1; }
/* build v52: card "médio" = ocupa 2 colunas só quando há espaço (>=1000px);
   a pizza fica maior e a legenda vai para a lateral. Abaixo disso volta a
   ser um card normal (legenda embaixo, como antes). */
@media (min-width: 1000px) {
    .financeiro-grafico-card--medio { grid-column: span 2; }
    .financeiro-grafico-card--medio .financeiro-svg-donut-wrap { flex-wrap: nowrap; gap: 32px; }
    .financeiro-grafico-card--medio .financeiro-svg-donut { width: 230px; height: 230px; }
    .financeiro-grafico-card--medio .financeiro-svg-legenda { min-width: 0; font-size: 0.9rem; gap: 9px; }
}

.financeiro-filtros { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.financeiro-filtros .campo { min-width: 220px; margin-bottom: 0; }
.financeiro-filtros .campo select { padding: 7px 10px; }

.financeiro-valor-receita { color: #2B6B2B; font-weight: 600; white-space: nowrap; }
.financeiro-valor-despesa { color: #C24444; font-weight: 600; white-space: nowrap; }

/* ---------- Gráficos em SVG inline (build v33) ----------
   Sem dependência de script externo (ver includes/graficos_svg.php) —
   por isso não há <canvas> nem CDN aqui, só formas SVG estilizadas. */
.financeiro-svg-vazio { text-align: center; color: rgba(var(--texto-rgb), 0.55); padding: 44px 0; margin: 0; }

.financeiro-svg-donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.financeiro-svg-donut { width: 168px; height: 168px; flex-shrink: 0; }
.financeiro-svg-donut-total-rotulo { font-family: var(--fonte-titulo); font-size: 9px; fill: rgba(var(--texto-rgb), 0.55); text-transform: uppercase; letter-spacing: 0.04em; }
.financeiro-svg-donut-total-valor { font-family: var(--fonte-titulo); font-size: 12.5px; font-weight: 700; fill: var(--cor-marinho); }

.financeiro-svg-legenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 170px; display: flex; flex-direction: column; gap: 7px; font-size: 0.84rem; }
.financeiro-svg-legenda li { display: flex; align-items: center; gap: 8px; }
.financeiro-svg-legenda-rotulo { flex: 1; color: var(--cor-texto); }
.financeiro-svg-legenda-valor { color: rgba(var(--texto-rgb), 0.65); white-space: nowrap; }
.financeiro-svg-legenda-valor em { font-style: normal; color: rgba(var(--texto-rgb), 0.45); }
.financeiro-svg-ponto { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
.financeiro-svg-legenda-linha { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 8px; }

.financeiro-svg-bloco { display: flex; flex-direction: column; }
.financeiro-svg-barras, .financeiro-svg-barras-simples { width: 100%; height: auto; max-height: 300px; }
.financeiro-svg-grade { stroke: rgba(var(--texto-rgb), 0.08); stroke-width: 1; }
.financeiro-svg-eixo-base { stroke: rgba(var(--texto-rgb), 0.25); stroke-width: 1; }
.financeiro-svg-eixo-x { font-size: 11.5px; fill: rgba(var(--texto-rgb), 0.6); font-family: var(--fonte-texto); }
.financeiro-svg-valor-topo { font-size: 11px; fill: var(--cor-marinho); font-weight: 600; font-family: var(--fonte-texto); }

/* Barras horizontais (Renda Total, Gastos x Orçamento) — build v41 */
.financeiro-svg-barras-horizontais { width: 100%; height: auto; }
.financeiro-svg-rotulo-linha { font-size: 11px; fill: rgba(var(--texto-rgb), 0.7); font-family: var(--fonte-texto); }
.financeiro-svg-valor-linha { font-size: 10.5px; fill: var(--cor-marinho); font-family: var(--fonte-texto); }

/* Tipos de gráfico novos no catálogo (linha, área, radar, mapa de calor,
   funil, gauge, dispersão) — build v46, ver includes/graficos_catalogo_svg.php */
.financeiro-svg-linha, .financeiro-svg-dispersao { width: 100%; height: auto; max-height: 300px; }
.financeiro-svg-eixo-y { font-size: 10.5px; fill: rgba(var(--texto-rgb), 0.55); font-family: var(--fonte-texto); }
/* build v53: legenda do "Gastos x Orçamento" no rodapé e menor */
.financeiro-svg-legenda-rodape { font-size: 0.72rem; margin: 10px 0 0; gap: 4px 14px; }
.financeiro-svg-legenda-rodape .financeiro-svg-ponto { width: 9px; height: 9px; }
.financeiro-svg-radar { width: 100%; max-width: 240px; height: auto; display: block; margin: 0 auto; }
.financeiro-svg-mapa-calor { width: 100%; height: auto; }
.financeiro-svg-funil { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto; }
.financeiro-svg-funil-texto { font-size: 10.5px; fill: #fff; font-family: var(--fonte-texto); font-weight: 600; }
.financeiro-svg-gauge { width: 100%; max-width: 200px; height: auto; display: block; margin: 0 auto; }
.financeiro-svg-gauge-valor { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; fill: var(--cor-marinho); }

/* Página "Tipo de Gráfico" (catálogo de referência) — build v46 */
.resumo-biblioteca { background: #F1EDE3; border-radius: var(--radius); padding: 16px 20px; margin: 18px 0 28px; font-size: 0.92rem; line-height: 1.55; }
.grade-catalogo-graficos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cartao-catalogo-grafico { background: var(--cor-branco); border: 1px solid var(--cor-borda); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; }
.cartao-catalogo-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cartao-catalogo-cabecalho h2 { font-size: 1.02rem; margin: 0; }
.cartao-catalogo-quando { font-size: 0.86rem; color: rgba(var(--texto-rgb), 0.72); margin: 0 0 14px; line-height: 1.5; }
.badge-catalogo { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
.badge-catalogo-pronto { background: #E2F3E2; color: #2B6B2B; }
.badge-catalogo-novo-facil { background: #E7F0FB; color: #1c5cab; }
.badge-catalogo-novo-medio { background: #FFF3CD; color: #8A6D1A; }

@media (max-width: 900px) {
    .grade-catalogo-graficos { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .admin-form-grid { grid-template-columns: 1fr; }
    .admin-tabela th, .admin-tabela td { padding: 10px 12px; }
    .financeiro-kpis, .financeiro-kpis-compacto { grid-template-columns: 1fr; }
    .financeiro-graficos { grid-template-columns: 1fr; }
    .financeiro-svg-donut-wrap { justify-content: center; }
    .equipe-grid { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; }
}

/* ---- Segmentos de clientes / Dashboard Guincho (build v48) ---- */
.badge-segmento { background: #E8EEF3; color: #022B39; }
.badge-segmento-guinchos { background: #FDEBDD; color: #A04A1A; }
.badge-segmento-financeiro { background: #E4F3E4; color: #2B6B2B; }
.badge-segmento-mecanicas { background: #E6E9F7; color: #3A3F8F; }
.guincho-tabela-caixas th, .guincho-tabela-caixas td { white-space: nowrap; }
.guincho-linha-total td { border-top: 2px solid rgba(var(--texto-rgb), 0.25); background: rgba(var(--texto-rgb), 0.04); }
.guincho-nota { margin: 0.6rem 0 0; font-size: 0.82rem; color: rgba(var(--texto-rgb), 0.65); }
.guincho-tabela-lancamentos th, .guincho-tabela-lancamentos td { font-size: 0.82rem; }
.guincho-tabela-lancamentos td.financeiro-col-descricao { min-width: 180px; }
.segmento-layout[hidden] { display: none; }
.financeiro-grafico-card { min-width: 0; }
.financeiro-grafico-card .admin-tabela-wrap { max-height: none; overflow-x: auto; }
.guincho-tabela-caixas th.financeiro-col-valor, .guincho-tabela-caixas td.financeiro-col-valor,
.guincho-tabela-lancamentos th.financeiro-col-valor, .guincho-tabela-lancamentos td.financeiro-col-valor { text-align: right; }

/* ---- Clientes x Usuários (build v49): duas listas com botões para mover ---- */
.duas-listas { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-bottom: 8px; }
.duas-listas-coluna { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.duas-listas-coluna select[multiple] { width: 100%; min-height: 250px; padding: 6px; border: 1px solid var(--cor-borda); border-radius: var(--radius); background: var(--cor-branco); }
.duas-listas-filtro { width: 100%; }
.duas-listas-botoes { display: flex; flex-direction: column; gap: 8px; }
.admin-subtitulo-lista { margin: 28px 0 12px; }
@media (max-width: 720px) {
    .duas-listas { grid-template-columns: 1fr; }
    .duas-listas-botoes { flex-direction: row; justify-content: center; }
}

/* ---- Gerenciar Usuários (build v50): linha inteira clicável + ações dentro da edição ---- */
.admin-tabela--linhas-clicaveis tbody tr.linha-clicavel { cursor: pointer; }
.admin-tabela--linhas-clicaveis tbody tr.linha-clicavel:hover { background: rgba(152,132,85,0.14); }
.linha-clicavel-link { color: inherit; font-weight: 600; text-decoration: none; }
.linha-clicavel-link:hover, .linha-clicavel-link:focus-visible { text-decoration: underline; }
.usuario-acoes-extras { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--cor-borda); }

/* =========================================================
   Build v56 — telas do sistema (dashboards/relatórios) mais compactas no
   celular, a pedido do Gelson: título menor, menos espaço em branco,
   Cliente e Mês lado a lado e "Atualizado em" discreto. No computador
   (> 900px) nada disso muda.
   ========================================================= */
@media (max-width: 900px) {
    .app-menu-botao { width: 100%; margin: 10px 0 2px; }
    .app-conteudo .secao-financeiro { padding: 8px 0 40px; }
    .secao-financeiro .titulo-centro { font-size: clamp(0.85rem, 4vw, 1.05rem); line-height: 1.25; margin: 8px 0 10px; }

    .financeiro-barra {
        display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); align-items: center; gap: 8px 6px;
        margin: 0 0 12px; text-align: left;
    }
    .financeiro-barra .rotulo-longo { display: none; }
    .financeiro-barra .rotulo-curto { display: inline; }
    .financeiro-barra form { display: flex; min-width: 0; gap: 5px; align-items: center; }
    .financeiro-barra label { font-size: 0.78rem; }
    .financeiro-barra select { flex: 1; min-width: 0; max-width: 100%; padding: 4px 1px 4px 4px; font-size: 0.76rem; }
    .financeiro-barra label { white-space: nowrap; }
    .financeiro-barra-cliente { grid-column: span 9; flex-basis: auto; justify-content: flex-start; margin-bottom: 0; }
    .financeiro-barra-mes { grid-column: span 11; justify-content: flex-end; }
    .financeiro-barra--sem-cliente .financeiro-barra-mes { grid-column: 1 / -1; justify-content: center; }
    .financeiro-barra--sem-cliente .financeiro-barra-mes select { flex: 0 1 220px; }
    .financeiro-barra-atualizado { grid-column: span 12; font-size: 0.72rem; color: rgba(var(--texto-rgb), 0.85); text-align: left; line-height: 1.25; }
    .financeiro-barra .financeiro-form-atualizar { grid-column: span 8; justify-content: flex-end; }
    .financeiro-barra .financeiro-form-atualizar .botao-mini { padding: 4px 12px; font-size: 0.76rem; white-space: nowrap; }
    /* sem botão (nível sem permissão), o "Atualizado em" ocupa a linha toda */
    .financeiro-barra-atualizado:last-child { grid-column: 1 / -1; text-align: center; }
}

/* build v56: telas bem estreitas (<= 380px) — logo, bandeira e menu precisam caber numa linha só */
@media (max-width: 380px) {
    .header-inner { gap: 6px; padding: 10px 12px; }
    .logo { gap: 8px; }
    .logo-img { height: 34px; }
    .logo-texto { font-size: 0.8rem; }
    .seletor-idioma { padding: 5px 8px; gap: 4px; }
}

/* ==========================================================================
   Metas (build v57) — menu "Metas" do cliente e tela "Cadastro de Metas"
   ========================================================================== */
.badge-rascunho { background: #F6EBCB; color: #7A5A12; }

.metas-titulo { margin-bottom: 4px; }
.metas-subtitulo { text-align: center; color: rgba(var(--texto-rgb), 0.65); margin: 0 0 18px; font-size: 0.95rem; }

/* Barra: cliente + seletor de mês */
.metas-barra {
    max-width: 800px; margin: 0 auto 14px; display: flex; flex-wrap: wrap;
    gap: 10px 14px; align-items: center; justify-content: space-between;
}
.metas-barra-cliente { display: flex; align-items: center; gap: 8px; flex-basis: 100%; }
.metas-barra-cliente label, .metas-rotulo {
    font-family: var(--fonte-titulo); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.04em;
    text-transform: uppercase; color: rgba(var(--texto-rgb), 0.65);
}
.metas-barra-cliente select { padding: 8px 12px; border: 1px solid var(--cor-borda); border-radius: 8px; font: inherit; background: #fff; min-width: 0; max-width: 100%; }
.metas-publicado-em { font-size: 0.85rem; color: rgba(var(--texto-rgb), 0.65); }

.metas-seletor { position: relative; }
.metas-seletor > button {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff;
    border: 1.5px solid var(--cor-primaria); border-radius: 30px; padding: 9px 16px;
    font-family: var(--fonte-titulo); font-weight: 600; font-size: 0.92rem; color: var(--cor-marinho); cursor: pointer;
}
.metas-seletor > button:hover { background: var(--cor-secundaria); }
.metas-seta { width: 10px; height: 7px; flex: 0 0 auto; transition: transform 0.2s; }
.metas-seletor.aberto .metas-seta { transform: rotate(180deg); }
.metas-lista-meses {
    display: none; position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; min-width: 260px; max-height: 60vh; overflow-y: auto;
    background: #fff; border: 1px solid var(--cor-borda); border-radius: 12px; box-shadow: 0 16px 38px rgba(var(--sombra-rgb), 0.18);
    padding: 6px; list-style: none; margin: 0;
}
.metas-seletor.aberto .metas-lista-meses { display: block; }
.metas-lista-meses a {
    display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 8px;
    font-family: var(--fonte-titulo); font-size: 0.9rem; color: var(--cor-marinho); text-decoration: none; white-space: nowrap;
}
.metas-lista-meses a:hover, .metas-lista-meses a.sel { background: var(--cor-secundaria); text-decoration: none; }
.metas-lista-meses a.sel { font-weight: 700; }
.metas-lista-meses small { color: rgba(var(--texto-rgb), 0.55); font-family: var(--fonte-texto); font-size: 0.78rem; }

.metas-aviso {
    max-width: 800px; margin: 0 auto 14px; background: #FBF3E1; border: 1px solid #EAD9AE; color: #6B5216;
    border-radius: 10px; padding: 11px 16px; font-size: 0.9rem;
}
.metas-vazio {
    max-width: 800px; margin: 20px auto; text-align: center; background: var(--cor-secundaria); border: 1px solid var(--cor-borda);
    border-radius: 12px; padding: 28px 20px;
}
.metas-rodape { max-width: 800px; margin: 12px auto 0; font-size: 0.82rem; color: rgba(var(--texto-rgb), 0.55); text-align: center; }

/* O documento: o MESMO estilo vale para o que o cliente lê e para o editor da equipe */
.metas-doc {
    max-width: 800px; margin: 0 auto; background: #fff; border: 1px solid var(--cor-borda); border-radius: 14px;
    padding: 34px 40px 40px; box-shadow: 0 10px 30px rgba(var(--sombra-rgb), 0.06); font-size: 1.04rem; line-height: 1.6;
    overflow-wrap: anywhere; color: var(--cor-texto);
}
.metas-doc h2 {
    font-family: var(--fonte-titulo); font-size: 1.55rem; line-height: 1.25; margin: 0 0 18px; padding-bottom: 12px;
    border-bottom: 3px solid var(--cor-primaria);
}
.metas-doc * + h2, .metas-doc hr + h2 { margin-top: 30px; }
.metas-doc h3 {
    font-family: var(--fonte-titulo); font-size: 1.12rem; line-height: 1.3; margin: 30px 0 10px; color: var(--cor-marinho);
    display: flex; gap: 8px; align-items: baseline;
}
.metas-doc h3::before { content: ''; flex: 0 0 5px; align-self: stretch; background: var(--cor-primaria); border-radius: 3px; }
.metas-doc p { margin: 0 0 12px; }
.metas-doc strong { font-family: var(--fonte-titulo); font-weight: 600; font-size: 0.96em; }
.metas-doc a { color: var(--cor-primaria-escura); text-decoration: underline; }
.metas-doc ul, .metas-doc ol { margin: 0 0 14px; padding-left: 22px; }
.metas-doc li { margin-bottom: 4px; }
.metas-doc li > p { margin-bottom: 4px; }
.metas-doc li::marker { color: var(--cor-primaria); }
.metas-doc hr { border: 0; border-top: 1px solid var(--cor-borda); margin: 30px 0 22px; }
.metas-doc blockquote {
    margin: 14px 0 16px; padding: 14px 18px; background: #F8F6F0; border-left: 4px solid var(--cor-primaria);
    border-radius: 0 10px 10px 0; font-style: italic;
}
.metas-doc blockquote p:last-child { margin-bottom: 0; }
.metas-doc .tabela-rolagem { overflow-x: auto; margin: 4px 0 22px; border: 1px solid var(--cor-borda); border-radius: 10px; }
.metas-doc table { border-collapse: collapse; width: 100%; font-size: 0.96rem; }
.metas-doc th {
    background: var(--cor-secundaria); font-family: var(--fonte-titulo); font-size: 0.78rem; text-transform: uppercase;
    letter-spacing: 0.05em; text-align: left; padding: 10px 14px;
}
.metas-doc td { padding: 10px 14px; border-top: 1px solid var(--cor-borda); vertical-align: top; }
.metas-doc td:nth-child(2) { font-family: var(--fonte-titulo); font-weight: 600; font-size: 0.92rem; }
.metas-doc tbody tr:nth-child(even) td { background: #F8F6F0; }
.metas-doc .fluxo {
    text-align: center; font-family: var(--fonte-titulo); font-weight: 600; color: var(--cor-primaria-escura); font-size: 1.05rem;
    background: #F8F6F0; border-radius: 10px; padding: 14px 10px; margin: 16px 0;
}

/* Telas estreitas (celular/tablet) */
@media (max-width: 900px) {
    .app-conteudo .secao-metas { padding: 8px 0 40px; }
    .secao-metas .titulo-centro { font-size: clamp(1.05rem, 5vw, 1.3rem); line-height: 1.25; margin: 8px 0 4px; }
}
@media (max-width: 700px) {
    .metas-subtitulo { margin-bottom: 10px; font-size: 0.85rem; }
    .metas-lista-meses a { flex-direction: column; align-items: flex-start; gap: 0; white-space: normal; }
    .metas-barra { flex-direction: column; align-items: stretch; margin-bottom: 10px; }
    .metas-barra-cliente select { flex: 1; }
    .metas-seletor { width: 100%; }
    .metas-seletor > button { width: 100%; }
    .metas-lista-meses { width: 100%; min-width: 0; }
    .metas-publicado-em { text-align: right; }
    .metas-doc { padding: 20px 16px 24px; font-size: 1rem; border-radius: 12px; }
    .metas-doc h2 { font-size: 1.22rem; }
    .metas-doc h3 { font-size: 1.02rem; margin-top: 24px; }
    .metas-doc td, .metas-doc th { padding: 9px 9px; font-size: 0.88rem; overflow-wrap: break-word; }
    .metas-doc td:nth-child(2) { font-size: 0.84rem; }
    .metas-doc th:first-child, .metas-doc td:first-child { width: 52%; }
}

/* ---------- Cadastro de Metas (equipe) ---------- */
.metas-adm-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.metas-adm-cartao { margin-bottom: 0; }
.metas-adm-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.metas-adm-campos select { width: 100%; }
.metas-adm-situacao { margin: 0 0 14px; font-family: var(--fonte-titulo); font-weight: 600; }
.metas-adm-situacao small { font-family: var(--fonte-texto); font-weight: 400; color: rgba(var(--texto-rgb), 0.65); margin-left: 6px; }
.metas-adm-lateral { margin-bottom: 0; }
.metas-adm-lateral h3 { font-size: 1rem; }
.metas-adm-lista { margin-bottom: 12px; }
.metas-adm-linha-atual td { background: rgba(152, 132, 85, 0.1); }
.metas-adm-acoes { margin-top: 16px; }

.metas-ferramentas {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; background: var(--cor-secundaria); border: 1px solid var(--cor-borda);
    border-bottom: 0; border-radius: 10px 10px 0 0; position: sticky; top: 70px; z-index: 20;
}
.metas-ferramentas button {
    border: 1px solid var(--cor-borda); background: #fff; border-radius: 6px; padding: 6px 10px; font-family: var(--fonte-titulo);
    font-size: 0.8rem; cursor: pointer; color: var(--cor-marinho);
}
.metas-ferramentas button:hover { border-color: var(--cor-primaria); }
.metas-ferramentas .sep { width: 1px; background: var(--cor-borda); margin: 2px; }
.metas-emojis { flex-wrap: wrap; gap: 4px; padding: 8px; background: #fff; border: 1px solid var(--cor-borda); border-bottom: 0; }
.metas-emojis:not([hidden]) { display: flex; }
.metas-emojis button { border: 0; background: none; font-size: 1.3rem; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.metas-emojis button:hover { background: var(--cor-secundaria); }
.metas-editor {
    max-width: none; border-radius: 0 0 12px 12px; box-shadow: none; min-height: 380px; max-height: 70vh; overflow-y: auto; outline: none;
}
.metas-editor:focus { border-color: var(--cor-primaria); box-shadow: 0 0 0 2px rgba(152, 132, 85, 0.25); }
.metas-editor:empty::before { content: attr(data-placeholder); color: rgba(var(--texto-rgb), 0.4); font-style: italic; }
.metas-editor td, .metas-editor th { min-width: 60px; }
.metas-dica { background: #EEF4F7; border: 1px solid #CFE0E8; color: #1f4a5c; border-radius: 10px; padding: 10px 14px; font-size: 0.86rem; margin: 12px 0 0; }

.metas-previa-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.metas-previa-formatos { display: inline-flex; background: var(--cor-secundaria); border-radius: 8px; padding: 3px; gap: 3px; }
.metas-previa-formatos button { border: 0; background: transparent; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-family: var(--fonte-titulo); font-size: 0.8rem; color: var(--cor-marinho); }
.metas-previa-formatos button.ativo { background: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(var(--sombra-rgb), 0.15); }
.metas-previa-moldura { background: #EFEBE0; border-radius: 12px; padding: 16px; transition: padding 0.2s; }
.metas-previa-moldura.celular .metas-doc { max-width: 380px; padding: 20px 16px 24px; font-size: 1rem; border-radius: 12px; }
.metas-previa-moldura.celular .metas-doc h2 { font-size: 1.22rem; }
.metas-previa-moldura.celular .metas-doc h3 { font-size: 1.02rem; margin-top: 24px; }
.metas-previa-moldura.celular .metas-doc td, .metas-previa-moldura.celular .metas-doc th { padding: 9px 9px; font-size: 0.88rem; overflow-wrap: break-word; }
.metas-previa-moldura.celular .metas-doc td:nth-child(2) { font-size: 0.84rem; }
.metas-previa-moldura.celular .metas-doc th:first-child, .metas-previa-moldura.celular .metas-doc td:first-child { width: 52%; }

.metas-adm-principal, .metas-adm-lateral { min-width: 0; }
@media (max-width: 1100px) {
    .metas-adm-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .metas-ferramentas { top: 58px; }
}
@media (max-width: 600px) {
    .metas-adm-cartao, .metas-adm-lateral { padding: 14px; }
    .metas-adm-campos { grid-template-columns: minmax(0, 1fr); }
    .metas-adm-acoes .botao { flex: 1 1 100%; text-align: center; }
    .metas-editor { min-height: 300px; }
    .metas-previa-moldura { padding: 8px; }
}


/* ---- Build v58: seletor de moeda (US$ | R$) e página Investimentos ---- */
.financeiro-moeda-seletor {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
    margin: -6px 0 20px;
}
.financeiro-moeda-rotulo { font-size: 0.86rem; font-weight: 600; color: rgba(var(--texto-rgb), 0.6); margin-right: 2px; }
.financeiro-moeda-seletor a {
    display: inline-block; padding: 6px 16px; border-radius: 999px; font-size: 0.88rem; font-weight: 600;
    border: 1px solid var(--cor-borda); color: var(--cor-marinho); background: var(--cor-branco); text-decoration: none;
}
.financeiro-moeda-seletor a:hover { border-color: var(--cor-primaria); }
.financeiro-moeda-seletor a.ativa { background: var(--cor-marinho); border-color: var(--cor-marinho); color: #fff; }

.financeiro-kpi-sub { font-size: 0.76rem; color: rgba(var(--texto-rgb), 0.6); line-height: 1.35; }
.invest-barra-aviso { font-size: 0.85rem; }
.invest-card-tabela { margin-bottom: 24px; min-width: 0; }
.invest-tabela td { vertical-align: top; }
.invest-tabela .financeiro-col-valor { text-align: right; white-space: nowrap; }
.invest-tipo {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 600;
    background: #E8EEF3; color: #022B39; vertical-align: middle;
}
.invest-tipo-acao { background: #E4F3E4; color: #2B6B2B; }
.invest-tipo-fii { background: #E1EEF8; color: #1c5cab; }
.invest-tipo-tesouro { background: #F1EDE3; color: #6B5216; }
.invest-tipo-renda_fixa { background: #ECE7F7; color: #4a3aa7; }
.invest-tipo-caixinha { background: #FDEBDD; color: #A04A1A; }
.invest-precisao { white-space: normal; display: inline-block; max-width: 210px; }
.invest-precisao-aplicado, .invest-precisao-parcial { color: #8A6D1A; }
.invest-encerradas { margin-top: 14px; font-size: 0.88rem; }
.invest-encerradas summary { cursor: pointer; font-weight: 600; color: rgba(var(--texto-rgb), 0.7); }
.invest-encerradas ul { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.invest-cabecalho-mov { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.invest-cabecalho-mov h2 { margin: 0; }
.invest-form-mes { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.invest-form-mes label { font-weight: 600; font-size: 0.9rem; }
.invest-form-mes select { padding: 6px 10px; border: 1px solid var(--cor-borda); border-radius: 6px; font-family: inherit; font-size: 0.9rem; background: var(--cor-branco); }
.invest-nota { margin: 4px 0 0; text-align: center; }
.financeiro-svg-valor-topo[style] { font-size: 10.5px; }
.admin-form-acoes-mini { margin: 4px 0 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.admin-form-detalhes summary { cursor: pointer; font-weight: 600; margin: 6px 0 10px; }
.segmento-layout-sec[hidden], .segmento-investimentos[hidden] { display: none; }
@media (max-width: 640px) {
    .invest-precisao { max-width: 150px; }
    .invest-cabecalho-mov { flex-direction: column; align-items: flex-start; }
}
.invest-periodo { font-family: var(--fonte-texto); font-size: 0.78rem; font-weight: 500; color: rgba(var(--texto-rgb), 0.55); margin-left: 6px; }
.financeiro-grafico-card--largo .financeiro-svg-linha { max-height: 330px; }

/* Página Investimentos: linha larga no computador, estreita no celular; tabelas viram "cartões" no celular */
.invest-linha-estreita { display: none; }
@media (max-width: 700px) {
    .invest-linha-larga { display: none; }
    .invest-linha-estreita { display: block; }
}
@media (max-width: 640px) {
    .invest-tabela, .invest-tabela tbody, .invest-tabela tr, .invest-tabela td { display: block; width: 100%; }
    .invest-tabela thead { display: none; }
    .invest-tabela { min-width: 0; border: 0; }
    .invest-tabela tr { border: 1px solid var(--cor-borda); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 12px; background: var(--cor-branco); }
    .invest-tabela td { border: 0; padding: 4px 0; text-align: right; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; white-space: normal; }
    .invest-tabela td::before { content: attr(data-label); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(var(--texto-rgb), 0.55); font-weight: 600; text-align: left; flex-shrink: 0; }
    .invest-tabela td:not([data-label])::before { content: none; }
    .invest-tabela td:not([data-label]) { display: block; text-align: left; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--cor-borda); }
    .invest-tabela .financeiro-col-valor { white-space: normal; }
    .invest-precisao { max-width: none; display: block; text-align: right; }
    .invest-tabela td[colspan] { display: block; text-align: left; }
    .invest-tabela td[colspan]::before { content: none; }
    .invest-card-tabela .admin-tabela-wrap { overflow: visible; border: 0; background: none; }
}
.invest-celula { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
@media (max-width: 640px) {
    .invest-tabela td.invest-vazio { display: none; }
    .invest-celula { align-items: flex-end; text-align: right; }
    .invest-precisao { text-align: right; max-width: 190px; }
}

/* ---- v59: Gráfico x Cliente por moeda ---- */
.lista-blocos-moedas { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-left: auto; }
.lista-blocos-moeda {
    display: inline-flex; align-items: center; gap: 6px; font-weight: 400; font-size: 0.85rem;
    padding: 4px 10px; border: 1px solid var(--cor-borda); border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.lista-blocos-moeda input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; }
.lista-blocos-moeda:has(input:checked) { background: rgba(var(--texto-rgb), 0.07); border-color: rgba(var(--texto-rgb), 0.35); }
@media (max-width: 640px) {
    .lista-blocos-item > .lista-blocos-visivel { flex: 1 1 100%; }
    .lista-blocos-moedas { margin-left: 0; flex-wrap: nowrap; }
    .lista-blocos-moeda-nome { display: none; }
    .lista-blocos { max-height: none; }
}

/* ---- v62: gráficos personalizados (Gráfico x Cliente + Dashboard) ---- */
.lista-blocos-selo {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 0.7rem;
    background: rgba(152,132,85,0.18); color: var(--cor-primaria-escura); vertical-align: middle; white-space: nowrap;
}
.botao-pequeno { padding: 7px 16px; font-size: 0.82rem; }
.graficos-pers-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; margin-bottom: 26px; }
.graficos-pers-item { border: 1px solid var(--cor-borda); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.graficos-pers-topo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.graficos-pers-topo > div:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 180px; }
.graficos-pers-acoes { display: flex; gap: 8px; align-items: flex-start; }
.graficos-pers-acoes form { margin: 0; }
.graficos-pers-previa.financeiro-grafico-card { border-style: dashed; padding: 14px; }
.graficos-pers-previa p.texto-auxiliar { margin: 0 0 8px; }
.graficos-pers-form { border-top: 1px solid var(--cor-borda); padding-top: 20px; }
.graficos-pers-form h4 { margin: 0 0 14px; font-size: 1rem; }
.graficos-pers-check { margin: 4px 0 16px; }
.graficos-pers-rotulo { font-weight: 600; font-size: 0.9rem; display: block; margin-bottom: 8px; }
.graficos-pers-moedas { margin-left: 0; }
@media (max-width: 640px) {
    .graficos-pers-lista { grid-template-columns: 1fr; }
}

/* Dashboard: subtítulo do card e lista de valores logo abaixo do gráfico */
.financeiro-grafico-sub { margin: -8px 0 10px; font-size: 0.8rem; color: rgba(var(--texto-rgb), 0.6); }
.financeiro-valores-lista { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--cor-borda); display: flex; flex-direction: column; gap: 7px; font-size: 0.86rem; }
.financeiro-valores-lista li { display: flex; align-items: center; gap: 8px; }
.financeiro-valores-rotulo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.financeiro-valores-valor { white-space: nowrap; color: var(--cor-marinho); }
.financeiro-valores-pct { font-style: normal; color: rgba(var(--texto-rgb), 0.5); min-width: 46px; text-align: right; white-space: nowrap; }
.financeiro-valores-total { margin: 10px 0 0; font-size: 0.8rem; color: rgba(var(--texto-rgb), 0.65); }
.financeiro-valores-total strong { color: var(--cor-marinho); }
.financeiro-valores-total span { display: block; margin-top: 2px; }
.financeiro-svg-barras-horizontais-valores { width: 100%; height: auto; display: block; }

/* ---------- Registro de Alterações (build v67) ---------- */
.registro-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 16px; align-items: end; margin: 6px 0 14px; padding: 14px 16px; background: var(--cor-secundaria); border: 1px solid var(--cor-borda); border-radius: var(--radius); }
.registro-filtros .campo { margin: 0; }
.registro-filtros-botoes { display: flex; gap: 8px; }
.registro-resumo { margin: 0 0 10px; font-size: 0.9rem; color: rgba(var(--texto-rgb), 0.7); }
.registro-tabela-wrap { max-height: none; }
.registro-tabela td { vertical-align: top; }
.registro-tabela td.registro-descricao { white-space: normal; min-width: 340px; max-width: 620px; line-height: 1.45; }
.registro-acao { font-family: var(--fonte-titulo); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; margin-right: 4px; color: var(--cor-primaria-escura); }
.registro-acao-criou, .registro-acao-publicou { color: #2B6B2B; }
.registro-acao-excluiu { color: #C24444; }
.registro-area { background: var(--cor-secundaria); color: var(--cor-marinho); border: 1px solid var(--cor-borda); white-space: nowrap; }
.registro-paginacao { display: flex; gap: 10px; justify-content: center; margin: 16px 0 4px; }
@media (max-width: 640px) {
    .registro-tabela td.registro-descricao { min-width: 240px; }
}

/* =========================================================
   Build v68 — tema escuro (só na área logada) + tour de boas-vindas
   O tema escuro só vale em <html data-app data-tema="escuro">: o site
   público (Home, Login...) continua sempre claro. A maior parte da
   troca é feita redefinindo as variáveis de cor; abaixo ficam só os
   trechos que têm cor "fixa" no CSS (avisos, selos, campos, gráficos).
   ========================================================= */

/* Botões do menu lateral (tema / tour): parecem os links do menu. */
.app-menu-acao {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    background: none; border: 0; border-left: 2px solid transparent; cursor: pointer;
    padding: 5px 0 5px 12px; margin-left: -12px; font: inherit; font-size: 0.88rem; line-height: 1.3;
    color: var(--cor-texto); transition: color var(--transicao);
}
.app-menu-acao[hidden] { display: none; }
.app-menu-acao:hover { color: var(--cor-primaria-escura); }
.app-menu-acao-icone { width: 15px; height: 15px; flex: 0 0 auto; }
@media (max-width: 900px) {
    .app-menu-acao { margin-left: 0; padding: 9px 0 9px 4px; border-left: none; color: rgba(255,255,255,0.88); font-size: 0.95rem; }
    .app-menu-acao:hover { color: var(--cor-branco); }
}

/* ---------- Tour ---------- */
body.tour-aberto { overflow-x: hidden; }
.tour-fundo { position: fixed; inset: 0; z-index: 900; background: transparent; }
.tour-foco {
    position: fixed; z-index: 901; border-radius: 12px; pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(3, 12, 16, 0.66), 0 0 0 3px #C4AB6C;
    transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.tour-balao {
    position: fixed; z-index: 902; width: min(380px, calc(100vw - 24px));
    background: #FFFFFF; color: #022B39; border-radius: 14px; padding: 18px 20px 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); font-family: var(--fonte-texto);
}
.tour-balao--fixo { top: auto !important; left: 50% !important; bottom: 14px; transform: translateX(-50%); }
.tour-contador { margin: 0 0 4px; font-family: var(--fonte-titulo); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #7A6941; }
.tour-titulo { margin: 0 0 6px; font-size: 1.1rem; line-height: 1.3; color: #022B39; }
.tour-texto { margin: 0 0 12px; font-size: 0.92rem; line-height: 1.5; color: #1c3a46; }
.tour-pontos { display: flex; gap: 6px; margin-bottom: 14px; }
.tour-ponto { width: 8px; height: 8px; border-radius: 50%; background: #D9D3C2; }
.tour-ponto.ativo { background: #988455; width: 22px; border-radius: 6px; }
.tour-acoes { display: flex; align-items: center; gap: 8px; }
.tour-acoes button { font-family: var(--fonte-titulo); font-size: 0.85rem; font-weight: 600; border-radius: 24px; padding: 9px 18px; cursor: pointer; border: 2px solid transparent; }
.tour-acoes button[hidden] { display: none; }
.tour-pular { background: none; color: #5d6d73; margin-right: auto; padding-left: 0 !important; }
.tour-pular:hover { text-decoration: underline; }
.tour-anterior { background: transparent; border-color: #988455 !important; color: #5f4f2b; }
.tour-proximo { background: #022B39; color: #FFFFFF; }
.tour-proximo:hover { background: #0a4256; }
.tour-acoes button:focus-visible { outline: 3px solid #C4AB6C; outline-offset: 2px; }

/* ---------- Variáveis do tema escuro ---------- */
html[data-app][data-tema="escuro"] {
    color-scheme: dark;
    --cor-fundo: #0e181d;
    --cor-texto: #E6E1D6;
    --cor-primaria: #C4AB6C;
    --cor-primaria-escura: #D9C48F;
    --cor-secundaria: #1a2a32;
    --cor-branco: #14222a;
    --cor-borda: #2c3f48;
    --cor-marinho: #E6E1D6;       /* no escuro, "marinho" é usado como cor de texto forte */
    --texto-rgb: 230, 225, 214;
    --sombra-rgb: 0, 0, 0;
}
html[data-app][data-tema="escuro"] body { background: var(--cor-fundo); color: var(--cor-texto); }
html[data-app][data-tema="escuro"] .pagina-interna { background: var(--cor-fundo); }
html[data-app][data-tema="escuro"] .site-header { background: var(--cor-branco); }
html[data-app][data-tema="escuro"] .rodape-minimo { background: var(--cor-branco); border-top: 1px solid var(--cor-borda); }
html[data-app][data-tema="escuro"] .logo-img { background: #FFFFFF; border-radius: 8px; padding: 2px; }
html[data-app][data-tema="escuro"] .menu-toggle { color: var(--cor-texto); }
html[data-app][data-tema="escuro"] .main-nav a { color: var(--cor-texto); }
html[data-app][data-tema="escuro"] .main-nav a.botao-nav { color: #0e181d !important; }

/* campos de formulário */
html[data-app][data-tema="escuro"] input,
html[data-app][data-tema="escuro"] select,
html[data-app][data-tema="escuro"] textarea {
    background-color: #0e181d; color: var(--cor-texto); border-color: var(--cor-borda);
}
html[data-app][data-tema="escuro"] ::placeholder { color: rgba(var(--texto-rgb), 0.45); }
html[data-app][data-tema="escuro"] input:disabled, html[data-app][data-tema="escuro"] select:disabled { opacity: 0.6; }

/* botões */
html[data-app][data-tema="escuro"] .botao-primario,
html[data-app][data-tema="escuro"] .botao-nav { color: #0e181d !important; }
html[data-app][data-tema="escuro"] .botao-primario:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); }
html[data-app][data-tema="escuro"] .botao-secundario { color: var(--cor-primaria-escura); border-color: var(--cor-primaria); }
html[data-app][data-tema="escuro"] .botao-perigo { color: #F08A8A; border-color: #F08A8A; }
html[data-app][data-tema="escuro"] .botao-perigo:hover { background: rgba(240, 138, 138, 0.14); }
html[data-app][data-tema="escuro"] .texto-erro { color: #F08A8A; }

/* celular: botão e gaveta do menu (na versão clara usam o azul-marinho) */
@media (max-width: 900px) {
    html[data-app][data-tema="escuro"] .app-menu-botao { background: #223742; color: #E6E1D6; }
    html[data-app][data-tema="escuro"] .app-sidebar,
    html[data-app][data-tema="escuro"] .app-menu-topo { background: #0b1418; }
    html[data-app][data-tema="escuro"] .app-menu-fechar,
    html[data-app][data-tema="escuro"] .app-grupo-titulo,
    html[data-app][data-tema="escuro"] .app-grupo-titulo-usuario { color: #E6E1D6; }
}

/* avisos e selos (cores "fixas" claras → versões escuras) */
html[data-app][data-tema="escuro"] .alerta-sucesso,
html[data-app][data-tema="escuro"] .badge-ativo,
html[data-app][data-tema="escuro"] .badge-respondido,
html[data-app][data-tema="escuro"] .badge-segmento-financeiro,
html[data-app][data-tema="escuro"] .badge-catalogo-pronto,
html[data-app][data-tema="escuro"] .invest-tipo-acao { background: #16341f; color: #8FD8A5; border-color: #24502f; }
html[data-app][data-tema="escuro"] .alerta-erro { background: #3a1b1d; color: #F4A3A3; border-color: #5c2c2f; }
html[data-app][data-tema="escuro"] .financeiro-aviso-sem-categoria,
html[data-app][data-tema="escuro"] .metas-aviso { background: #3a3014; border-color: #5c4b1d; color: #EBD79A; }
html[data-app][data-tema="escuro"] .badge-inativo,
html[data-app][data-tema="escuro"] .invest-tipo-tesouro,
html[data-app][data-tema="escuro"] .resumo-biblioteca { background: #25323a; color: #D9C48F; }
html[data-app][data-tema="escuro"] .badge-segmento,
html[data-app][data-tema="escuro"] .invest-tipo { background: #22333c; color: #E6E1D6; }
html[data-app][data-tema="escuro"] .badge-segmento-guinchos,
html[data-app][data-tema="escuro"] .invest-tipo-caixinha { background: #402a1a; color: #F3B27E; }
html[data-app][data-tema="escuro"] .badge-catalogo-novo-facil,
html[data-app][data-tema="escuro"] .invest-tipo-fii { background: #16304a; color: #9CC6F2; }
html[data-app][data-tema="escuro"] .badge-catalogo-novo-medio,
html[data-app][data-tema="escuro"] .badge-rascunho { background: #3a3014; color: #EBD79A; }
html[data-app][data-tema="escuro"] .invest-tipo-renda_fixa { background: #2a2447; color: #BDB0F5; }
html[data-app][data-tema="escuro"] .invest-precisao-aplicado,
html[data-app][data-tema="escuro"] .invest-precisao-parcial { color: #EBD79A; }
html[data-app][data-tema="escuro"] .badge-nao-lido,
html[data-app][data-tema="escuro"] .badge-admin { background: #3d5a69; color: #FFFFFF; }
html[data-app][data-tema="escuro"] .financeiro-moeda-seletor a.ativa { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #0e181d; }

/* valores e indicadores: verde/vermelho/roxo mais claros para ler sobre fundo escuro */
html[data-app][data-tema="escuro"] .financeiro-valor-receita,
html[data-app][data-tema="escuro"] .registro-acao-criou,
html[data-app][data-tema="escuro"] .registro-acao-publicou { color: #6CCB88; }
html[data-app][data-tema="escuro"] .financeiro-valor-despesa,
html[data-app][data-tema="escuro"] .registro-acao-excluiu { color: #F08A8A; }
html[data-app][data-tema="escuro"] .financeiro-kpi-receita { border-top-color: #4FB36B; }
html[data-app][data-tema="escuro"] .financeiro-kpi-despesa,
html[data-app][data-tema="escuro"] .financeiro-kpi-saldo-negativo { border-top-color: #EF7B7B; }
html[data-app][data-tema="escuro"] .financeiro-kpi-reserva { border-top-color: #9A8CF0; }
html[data-app][data-tema="escuro"] .financeiro-kpi-investimento { border-top-color: #5B9FE8; }

/* Metas: o "documento" e as ferramentas de edição eram brancos */
html[data-app][data-tema="escuro"] .metas-barra-cliente select,
html[data-app][data-tema="escuro"] .metas-seletor > button,
html[data-app][data-tema="escuro"] .metas-lista-meses,
html[data-app][data-tema="escuro"] .metas-doc,
html[data-app][data-tema="escuro"] .metas-ferramentas button,
html[data-app][data-tema="escuro"] .metas-emojis,
html[data-app][data-tema="escuro"] .metas-previa-formatos button.ativo { background: var(--cor-branco); }
html[data-app][data-tema="escuro"] .metas-doc blockquote,
html[data-app][data-tema="escuro"] .metas-doc tbody tr:nth-child(even) td,
html[data-app][data-tema="escuro"] .metas-doc .fluxo { background: #1a2a32; }
html[data-app][data-tema="escuro"] .metas-dica { background: #172a35; border-color: #2c4656; color: #A9CBDB; }
html[data-app][data-tema="escuro"] .metas-previa-moldura { background: #0b1418; }

/* gráficos SVG: o PHP escreve as cores direto no desenho; aqui trocamos
   as que ficam fracas sobre fundo escuro e o contorno branco dos pontos */
html[data-app][data-tema="escuro"] .financeiro-svg circle[stroke="#fff"] { stroke: var(--cor-branco); }
html[data-app][data-tema="escuro"] svg [fill="#2B6B2B"] { fill: #4FB36B; }
html[data-app][data-tema="escuro"] svg [stroke="#2B6B2B"] { stroke: #4FB36B; }
html[data-app][data-tema="escuro"] svg [fill="#C24444"] { fill: #EF7B7B; }
html[data-app][data-tema="escuro"] svg [stroke="#C24444"] { stroke: #EF7B7B; }
html[data-app][data-tema="escuro"] svg [fill="#6a4fb5"] { fill: #A18AE6; }
html[data-app][data-tema="escuro"] svg [stroke="#6a4fb5"] { stroke: #A18AE6; }
html[data-app][data-tema="escuro"] svg [fill="#4a3aa7"] { fill: #9A8CF0; }
html[data-app][data-tema="escuro"] svg [stroke="#4a3aa7"] { stroke: #9A8CF0; }
html[data-app][data-tema="escuro"] svg [fill="#2a78b5"] { fill: #5B9FE8; }
html[data-app][data-tema="escuro"] svg [stroke="#2a78b5"] { stroke: #5B9FE8; }
html[data-app][data-tema="escuro"] svg [fill="#988455"] { fill: #C4AB6C; }
html[data-app][data-tema="escuro"] svg [stroke="#988455"] { stroke: #C4AB6C; }
html[data-app][data-tema="escuro"] svg [fill="#6b7a80"] { fill: #9AA8AE; }
html[data-app][data-tema="escuro"] svg [fill="#EDEAE0"] { fill: #26373f; }
html[data-app][data-tema="escuro"] svg [fill="#e1e0d9"], html[data-app][data-tema="escuro"] svg [stroke="#e1e0d9"] { fill: #26373f; }
html[data-app][data-tema="escuro"] .financeiro-svg-ponto[style*="#2B6B2B"] { background: #4FB36B !important; }
html[data-app][data-tema="escuro"] .financeiro-svg-ponto[style*="#C24444"] { background: #EF7B7B !important; }
html[data-app][data-tema="escuro"] .financeiro-svg-ponto[style*="#6a4fb5"] { background: #A18AE6 !important; }
html[data-app][data-tema="escuro"] .financeiro-svg-ponto[style*="#4a3aa7"] { background: #9A8CF0 !important; }
html[data-app][data-tema="escuro"] .financeiro-svg-ponto[style*="#2a78b5"] { background: #5B9FE8 !important; }
html[data-app][data-tema="escuro"] .financeiro-svg-ponto[style*="#988455"] { background: #C4AB6C !important; }
html[data-app][data-tema="escuro"] .financeiro-svg-ponto[style*="#6b7a80"] { background: #9AA8AE !important; }
html[data-app][data-tema="escuro"] .financeiro-svg-ponto[style*="#EDEAE0"] { background: #26373f !important; }

/* Atalho do tema (ícone ao lado da bandeira de idioma) */
.idioma-flutuante--app { display: flex; align-items: flex-start; gap: 8px; }
.tema-icone {
    display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 auto;
    border: 1px solid var(--cor-borda); border-radius: 50%; background: var(--cor-branco); color: var(--cor-texto);
    cursor: pointer; box-shadow: 0 6px 18px rgba(var(--sombra-rgb), 0.12);
    transition: border-color var(--transicao);
}
.tema-icone:hover { border-color: var(--cor-primaria); }
.tema-icone svg { width: 18px; height: 18px; }
.tema-icone-sol { display: none; }
html[data-tema="escuro"] .tema-icone-sol { display: block; }
html[data-tema="escuro"] .tema-icone-lua { display: none; }
@media (max-width: 1040px) {
    .idioma-flutuante--app { align-items: center; }
    .tema-icone { width: 32px; height: 32px; box-shadow: none; }
}

/* ---------- Backups (build v69) ---------- */
.backup-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 8px 0 12px; }
.backup-cartao {
    display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--cor-branco);
    border: 1px solid var(--cor-borda); border-top: 4px solid var(--cor-borda); border-radius: var(--radius);
}
.backup-cartao--ok { border-top-color: #2B8A5B; }
.backup-cartao--alerta { border-top-color: #D08A1E; }
.backup-cartao-rotulo { font-family: var(--fonte-titulo); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(var(--texto-rgb), 0.6); }
.backup-cartao-valor { font-family: var(--fonte-titulo); font-size: 1.15rem; font-weight: 600; color: var(--cor-marinho); }
.backup-cartao-sub { font-size: 0.82rem; color: rgba(var(--texto-rgb), 0.7); line-height: 1.4; }
.backup-cartao-aviso { font-size: 0.82rem; color: #9A5B00; line-height: 1.4; }
.backup-pasta-info { font-size: 0.84rem; color: rgba(var(--texto-rgb), 0.65); margin: 0 0 6px; }
.backup-titulo { margin: 28px 0 10px; }
.backup-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0; }
.backup-aguarde { font-size: 0.85rem; color: rgba(var(--texto-rgb), 0.7); }
.backup-aguarde[hidden] { display: none; }
.backup-tabela td { vertical-align: top; }
.backup-tabela td.texto-auxiliar { white-space: normal; min-width: 220px; }
.backup-caixa { padding: 16px 18px; background: var(--cor-branco); border: 1px solid var(--cor-borda); border-radius: var(--radius); }
.backup-caixa p { margin: 0 0 10px; }
.backup-caixa p:last-child { margin-bottom: 0; }
.backup-codigo { display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: 4px 8px; border-radius: 6px; background: var(--cor-secundaria); font-size: 0.82rem; }
.backup-passos { margin: 8px 0 14px; }
.backup-passos summary { cursor: pointer; font-weight: 600; color: var(--cor-primaria-escura); }
.backup-passos ol { margin: 10px 0 0; padding-left: 20px; line-height: 1.55; }
.backup-passos li { margin-bottom: 8px; }
.backup-form-drive { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 16px; align-items: end; margin-top: 10px; }
.backup-form-drive .campo { margin: 0; }
.backup-form-drive .backup-botoes { margin: 0; }
.backup-status-ok, .backup-drive-ok { background: #E4F3E4; color: #2B6B2B; }
.backup-status-erro, .backup-drive-erro, .backup-status-interrompido { background: #FBE7E7; color: #8A2B2B; }
.backup-status-rodando { background: #FFF3CD; color: #8A6D1A; }
.backup-drive-nao { background: transparent; color: rgba(var(--texto-rgb), 0.5); padding-left: 0; }
html[data-app][data-tema="escuro"] .backup-aviso, html[data-app][data-tema="escuro"] .backup-cartao-aviso { color: #EBD79A; }
html[data-app][data-tema="escuro"] .backup-status-ok, html[data-app][data-tema="escuro"] .backup-drive-ok { background: #16341f; color: #8FD8A5; }
html[data-app][data-tema="escuro"] .backup-status-erro, html[data-app][data-tema="escuro"] .backup-drive-erro, html[data-app][data-tema="escuro"] .backup-status-interrompido { background: #3a1b1d; color: #F4A3A3; }
html[data-app][data-tema="escuro"] .backup-status-rodando { background: #3a3014; color: #EBD79A; }
@media (max-width: 640px) {
    .backup-botoes .botao { flex: 1 1 100%; text-align: center; }
}
.backup-diag { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--cor-borda); font-size: 0.76rem; opacity: 0.85; }

/* build v69: página pública de Política de Privacidade */
.secao-privacidade { background: var(--cor-branco); }
.privacidade-texto { max-width: 820px; }
.privacidade-texto h1 { margin-bottom: 4px; }
.privacidade-texto h2 { font-size: 1.15rem; margin: 28px 0 8px; }
.privacidade-texto p, .privacidade-texto li { line-height: 1.65; }
.privacidade-texto ul { padding-left: 22px; margin: 8px 0 12px; }
.privacidade-data { font-size: 0.85rem; opacity: 0.7; margin-bottom: 18px; }

/* build v70: Lançamentos pendentes (WhatsApp -> IA -> revisão) */
.app-badge { display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 4px; border-radius: 999px; background: #C24444; color: #fff; font-size: 0.72rem; font-weight: 700; line-height: 1.5; text-align: center; vertical-align: middle; }
.pend-abas { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 10px; border-bottom: 1px solid var(--cor-borda); }
.pend-abas a { padding: 9px 16px; border-radius: 10px 10px 0 0; font-family: var(--fonte-titulo); font-weight: 600; font-size: 0.9rem; color: rgba(var(--texto-rgb), 0.75); text-decoration: none; border: 1px solid transparent; border-bottom: none; margin-bottom: -1px; }
.pend-abas a:hover { background: rgba(152,132,85,0.08); }
.pend-abas a.ativo { background: var(--cor-branco); color: var(--cor-primaria-escura); border-color: var(--cor-borda); }
.pend-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 6px 0 10px; }
.pend-filtro label { font-size: 0.85rem; font-weight: 600; }
.pend-opcao { font-weight: 400 !important; }
.pend-vazio { padding: 22px 4px; }
.pend-lote { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; margin: 6px 0 12px; background: var(--cor-branco); border: 1px solid var(--cor-borda); border-radius: var(--radius); }
.pend-marcar-todos { font-size: 0.85rem; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.pend-item { display: grid; grid-template-columns: auto minmax(180px, 260px) 1fr; gap: 14px; padding: 14px; margin-bottom: 12px; background: var(--cor-branco); border: 1px solid var(--cor-borda); border-radius: var(--radius); }
.pend-sel { padding-top: 4px; }
.pend-origem { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pend-foto { display: block; width: 100%; max-height: 260px; object-fit: contain; background: rgba(var(--texto-rgb), 0.05); border-radius: 8px; border: 1px solid var(--cor-borda); }
.pend-pdf { display: flex; align-items: center; justify-content: center; text-align: center; height: 90px; border-radius: 8px; border: 1px dashed var(--cor-borda); font-weight: 700; color: var(--cor-primaria-escura); text-decoration: none; }
.pend-balao { padding: 8px 10px; border-radius: 10px; background: rgba(var(--texto-rgb), 0.06); font-size: 0.85rem; line-height: 1.4; overflow-wrap: anywhere; }
.pend-balao--vazio { font-style: italic; color: rgba(var(--texto-rgb), 0.6); }
.pend-meta { font-size: 0.76rem; color: rgba(var(--texto-rgb), 0.6); }
.pend-campos { min-width: 0; }
.pend-avisos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pend-conf { padding: 2px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; }
.pend-conf--alta { background: #DDF1E6; color: #1E6B45; }
.pend-conf--media { background: #FBEBC8; color: #8A5A00; }
.pend-conf--baixa { background: #F8D9D9; color: #A02828; }
.pend-conf--na { background: rgba(var(--texto-rgb), 0.1); color: rgba(var(--texto-rgb), 0.7); }
.pend-aviso { padding: 2px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; background: #FBEBC8; color: #8A5A00; }
.pend-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; }
.pend-grade label { display: flex; flex-direction: column; gap: 3px; font-size: 0.74rem; font-weight: 600; color: rgba(var(--texto-rgb), 0.7); }
.pend-grade input { width: 100%; padding: 7px 9px; border: 1px solid var(--cor-borda); border-radius: 8px; font: inherit; font-size: 0.9rem; font-weight: 400; background: var(--cor-branco); color: var(--cor-texto); }
.pend-grade .pend-larga { grid-column: span 2; }
.pend-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pend-bloco { margin-bottom: 12px; }
.pend-copiar { margin: 8px 0 12px; }
.pend-copiar-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 0.9rem; }
.pend-textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--cor-borda); border-radius: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; background: var(--cor-secundaria); color: var(--cor-texto); resize: vertical; white-space: pre; overflow: auto; }
.pend-form-grupo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 8px 0; }
.pend-form-grupo label { display: flex; flex-direction: column; gap: 3px; font-size: 0.78rem; font-weight: 600; min-width: 200px; }
.pend-form-grupo input, .pend-form-grupo select { padding: 8px 10px; border: 1px solid var(--cor-borda); border-radius: 8px; font: inherit; background: var(--cor-branco); color: var(--cor-texto); }
.pend-grupo { margin-bottom: 12px; }
.pend-grupo--ignorado { opacity: 0.65; }
.pend-lista { margin: 0 0 8px; padding-left: 20px; line-height: 1.6; }
.pend-st-processada { background: #DDF1E6; color: #1E6B45; }
.pend-st-erro { background: #F8D9D9; color: #A02828; }
.pend-st-pendente, .pend-st-processando, .pend-st-sem_grupo { background: #FBEBC8; color: #8A5A00; }
.pend-st-ignorada { background: rgba(var(--texto-rgb), 0.1); color: rgba(var(--texto-rgb), 0.7); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
@media (max-width: 760px) {
    .pend-item { grid-template-columns: auto 1fr; }
    .pend-campos { grid-column: 1 / -1; }
    .pend-grade .pend-larga { grid-column: 1 / -1; }
}
html[data-app][data-tema="escuro"] .pend-conf--alta { background: #173a2a; color: #9AD9B6; }
html[data-app][data-tema="escuro"] .pend-conf--media, html[data-app][data-tema="escuro"] .pend-aviso, html[data-app][data-tema="escuro"] .pend-st-pendente, html[data-app][data-tema="escuro"] .pend-st-processando, html[data-app][data-tema="escuro"] .pend-st-sem_grupo { background: #3a3014; color: #EBD79A; }
html[data-app][data-tema="escuro"] .pend-conf--baixa, html[data-app][data-tema="escuro"] .pend-st-erro { background: #3d1a1a; color: #F0A6A6; }
html[data-app][data-tema="escuro"] .pend-st-processada { background: #173a2a; color: #9AD9B6; }
/* build v70: endereços longos dentro de <code> não alargam a página no celular */
.backup-passos code, .backup-caixa code, .pend-lista code { overflow-wrap: anywhere; }

/* ---- DRE do segmento Mecânicas (build v73) ---- */
.dre-wrap { max-height: none; }
.dre-tabela td, .dre-tabela th { white-space: nowrap; }
.dre-tabela td.financeiro-col-valor, .dre-tabela th.financeiro-col-valor { text-align: right; }
.dre-tabela td:first-child { white-space: normal; }
.dre-secao td { font-weight: 700; background: rgba(var(--texto-rgb), 0.05); }
.dre-subtotal td { font-weight: 700; border-top: 1px solid rgba(var(--texto-rgb), 0.25); }
.dre-total td { font-weight: 800; border-top: 2px solid rgba(var(--texto-rgb), 0.35); background: rgba(var(--texto-rgb), 0.08); }
.dre-item td { font-weight: 400; }
.dre-recuo { padding-left: 1.6rem !important; color: rgba(var(--texto-rgb), 0.85); }
.dre-negativo { color: #C24444; }
.dre-vazio { color: rgba(var(--texto-rgb), 0.4); }
.dre-filtros { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.dre-fora { margin-top: 1rem; }
.dre-fora summary { cursor: pointer; font-weight: 600; margin-bottom: 0.6rem; }
@media (max-width: 640px) {
    .dre-tabela th, .dre-tabela td { padding: 6px 5px; font-size: 0.72rem; }
    .dre-recuo { padding-left: 0.8rem !important; }
}