:root {
    --navy: #0b1120;
    --navy-light: #111a2e;
    --teal: #10b981;
    --teal-dark: #059669;
    --teal-soft: #d1fae5;

    --red: #ef4444;
    --red-soft: #fee2e2;
    --blue: #3b82f6;
    --amber: #f59e0b;

    /* Cor de marca do usuário logado — só nos elementos decorativos
       (marcadores, linhas de título/subtítulo, hover, sidebar ativo).
       Nunca usada em badges/indicadores de status (esses continuam
       fixos: verde=ok, vermelho=problema, sempre). Injetada por
       usuário via <style> inline no base.html — esses valores aqui
       são só o padrão de fallback. */
    --cor-primaria: #10b981;
    --cor-primaria-escura: #059669;
    --cor-primaria-suave: #d1fae5;
    --cor-primaria-rgb: 16, 185, 129;

    --text-dark: #111827;
    --text-muted: #6b7280;
    --border: #e5e7eb;
    --bg: #f3f4f6;

    --radius: 14px;
    --radius-pill: 999px;
    --shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

/* ================= TEMAS ================= */

[data-theme="azul"] {
    --navy: #0b1120;
    --navy-light: #111a2e;
    --teal: #3b82f6;
    --teal-dark: #2563eb;
    --teal-soft: #dbeafe;
}

[data-theme="verde"] {
    --navy: #09261c;
    --navy-light: #103b2c;
    --teal: #10b981;
    --teal-dark: #059669;
    --teal-soft: #d1fae5;
}

[data-theme="vermelho"] {
    --navy: #2b0b0b;
    --navy-light: #431313;
    --teal: #ef4444;
    --teal-dark: #dc2626;
    --teal-soft: #fee2e2;
}

[data-theme="roxo"] {
    --navy: #1c1233;
    --navy-light: #2b1b4a;
    --teal: #8b5cf6;
    --teal-dark: #7c3aed;
    --teal-soft: #ede9fe;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Manrope", "Segoe UI", "Inter", -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text-dark);
}

@media (max-width: 800px) {
    /* Pedido do usuário (02/10/2026): no mobile, dar zoom manual pra
       75% no navegador "fica perfeito" -- CSS "zoom" reproduz
       EXATAMENTE isso (é a mesma mecânica do zoom de página de
       verdade: reflow com mais px CSS efetivos cabendo na tela, tudo
       escalado junto -- texto, ícone, padding, até elementos
       "position:fixed" como o header/sidebar, que continuam fixos na
       tela mas renderizam no tamanho menor). Diferente de
       "transform:scale()", que NÃO re-flui o layout (ia exigir
       compensar largura/altura manualmente e ainda desalinhava
       position:fixed). Confirmado comparando com uma renderização
       simulando o viewport 1/0.75 mais largo (efeito real de zoom
       75%) -- bateu pixel a pixel com essa regra. Só em
       "body.painel-pagina" (ver {% block body_class %} em
       painel.html) pra não afetar nenhuma outra tela ainda não
       revisada pro mobile (home/relatório/FAP/gestão de clientes/CRM
       etc.). */
    body.painel-pagina {
        zoom: 0.75;
    }

    /* "height: calc(100vh - 72px)" (regra base do .sidebar) não
       combina com zoom: "100vh" resolve contra o viewport DE VERDADE
       (não é reescalado), mas a caixa final do elemento É reescalada
       pelo zoom de novo -- o resultado "perde" altura, deixando um
       vão embaixo do sidebar em vez de ir até o fim da tela (reportado
       pelo usuário, 02/10/2026). Troca por "bottom: 0" -- com "top" E
       "bottom" definidos (sem "height"), a altura vira a distância
       entre os dois, sem precisar de "vh" nenhum, e os offsets "top"/
       "bottom" são reescalados pelo zoom de forma consistente (mesmo
       mecanismo que já alinha o "top:72px" certinho com o rodapé do
       header, visível nas capturas de tela). */
    body.painel-pagina .sidebar {
        height: auto;
        bottom: 0;
    }
}

/* ---------- SIDEBAR ---------- */

.main-wrapper.sem-sidebar {
    margin-left: 0 !important;
}

.sidebar {
    position: fixed;
    top: 72px;
    left: 0;
    height: calc(100vh - 72px);
    width: 64px;
    background: var(--navy);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 14px;
    transition: width 0.2s ease;
    z-index: 100;
    overflow: hidden;
}

.sidebar.expandido {
    width: 220px;
    align-items: stretch;
    box-shadow: 4px 0 24px rgba(0,0,0,0.25);
}

.sidebar-nav-rodape {
    margin-top: auto;
    margin-bottom: 14px;
}

.sidebar-usuario-info {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-bottom: 0;
    border-bottom: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.15s, max-height 0.15s, padding 0.15s;
}

.sidebar.expandido .sidebar-usuario-info {
    opacity: 1;
    max-height: 98px;
    padding: 0 16px 10px 16px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-usuario-empresa {
    display: block;
    font-size: 14.5px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.sidebar-usuario-linha {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.sidebar-usuario-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.02em;
}

.sidebar-usuario-nome {
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.sidebar-usuario-status {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 4px;
}

.sidebar-usuario-status strong {
    color: var(--cor-primaria);
    font-weight: 700;
}

.sidebar-item-sair {
    text-decoration: none;
    color: #fca5a5;
}

.sidebar-item-sair:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #fecaca;
}

/* Mesmo box model dos .sidebar-item logo abaixo (10px de margem +
   12px de padding = 22px até o ícone) -- ANTES ficava centralizado
   via margin:auto, então o ícone "pulava" de posição ao expandir (do
   centro dos 64px pro centro dos 220px). Agora fica ancorado na
   borda esquerda igual aos outros itens, sem deslocamento nenhum
   (pedido do usuário, 21/09/2026) -- "MENU" (reaproveita .sidebar-label,
   mesmo fade dos outros rótulos) e a seta de recuar aparecem do lado
   direito só quando expandido, sem empurrar o ícone. */
.sidebar-toggle {
    background: none;
    border: none;
    width: calc(100% - 20px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    margin: 0 10px 18px 10px;
    cursor: pointer;
    border-radius: 10px;
    color: #cbd5e1;
    transition: background 0.15s, color 0.15s;
}

.sidebar-toggle:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

/* Empurra a seta pro fim da linha (depois do "MENU") -- some junto
   com o rótulo quando recolhido, clicável em qualquer ponto do botão
   (ícone, "MENU" ou a seta -- é tudo o mesmo <button>). */
.sidebar-toggle .sidebar-label {
    font-weight: 800;
}

.sidebar-toggle-seta {
    margin-left: auto;
    color: var(--cor-primaria);
    opacity: 0;
    transition: opacity 0.15s;
}

.sidebar-toggle-seta svg {
    stroke-width: 3;
}

.sidebar.expandido .sidebar-toggle-seta {
    opacity: 1;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 0 10px;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: none;
    border: none;
    color: #cbd5e1;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.15s, color 0.15s;
}

.sidebar-item:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}

.sidebar-item.active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--cor-primaria);
}

.sidebar-icon {
    font-size: 18px;
    min-width: 20px;
    text-align: center;
}

.sidebar-item-sair .sidebar-icon,
.sidebar-icon-svg {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Bolinha de "tem mensagem não lida" (Suporte/Gestão de Suporte, ver
   checarSuporteNaoLido em app.js) -- borda na cor do fundo da sidebar
   pra parecer um "recorte", em vez de simplesmente sobrepor o ícone. */
.sidebar-icon-ponto {
    position: absolute;
    top: -2px;
    right: -3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--red);
    border: 2px solid var(--navy);
}

.sidebar-item-sair .sidebar-icon svg,
.sidebar-icon-svg svg {
    width: 18px;
    height: 18px;
}

.sidebar-label {
    opacity: 0;
    transition: opacity 0.15s;
}

.sidebar.expandido .sidebar-label {
    opacity: 1;
}

/* ---------- HERO (faixa escura, badge, título, subtítulo) ---------- */

.main-header {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
}

.hero-content {
    max-width: 720px;
    margin: 0 auto;
    padding-top: 44px;
    padding-bottom: 90px;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* ---------- CTAs do hero (home.html) ---------- */

.hero-cta-linha {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.hero-cta-btn svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

/* .btn.hero-cta-outline (2 classes) de propósito -- o .btn base (mais
   abaixo no arquivo) também define "border: none", e como as duas
   regras têm a mesma especificidade de 1 classe, a que vem depois no
   arquivo vencia e apagava essa borda. Com 2 classes no seletor essa
   regra passa a ganhar sempre, não importa a ordem. */
.btn.hero-cta-outline {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.btn.hero-cta-outline:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Linha do topo do hero (badge+título de um lado, botão de ação do
   outro) -- fluxo normal (flex), não position:absolute. Isso garante
   que a borda direita do botão sempre bate exatamente com a borda do
   #hero-content (que, na variante clara usada aqui, tem o MESMO
   max-width/padding de .container logo abaixo -- então também bate
   com a borda do card branco), sem depender de nenhum valor "mágico"
   pra imitar o padding de outro elemento. */
.hero-topo-linha {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.hero-acao-topo {
    flex-shrink: 0;
    margin-top: 6px;
}

@keyframes hero-entrada {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-content.animar-entrada {
    animation: hero-entrada 0.5s ease-out;
}

.hero-badge {
    display: inline-block;
    background: rgba(90, 94, 92, 0.377);
    color: var(--cor-primaria);
    border: 1px solid rgba(var(--cor-primaria-rgb), 0.35);
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 35px;
}

.hero-titulo {
    color: #fff;
    font-weight: 700;
    font-size: 36px;
    margin: 0 0 12px 0;
}

.hero-divisor {
    width: 60px;
    height: 3px;
    background: var(--cor-primaria);
    border-radius: var(--radius-pill);
    margin: 0 auto 20px auto;
}

.hero-subtitulo {
    color: #cbd5e1;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 800px) {
    /* Só o subtítulo do painel ("Escolha uma das opções abaixo para
       iniciar.") -- usa o id (só existe em painel.html) de propósito,
       pra NÃO afetar ".hero-subtitulo" de home.html/relatorio.html/
       diagnostico_fap.html, que são páginas diferentes e continuam
       mostrando o subtítulo normalmente. Sem execução real no mobile
       (ver bloquearExecucaoSeMobile em app.js), "iniciar" não faz
       sentido como instrução por lá. */
    #hero-subtitulo {
        display: none;
    }
}

/* ---------- HEADER (topo branco) ---------- */

.header {
    background: #fff;
    padding: 16px 50px;
    border-bottom: 1px solid var(--border);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 150;
    height: 72px;
    box-sizing: border-box;
}

/* Alvo de um scrollIntoView (ver scrollParaElementoComOffset em
   app.js) -- sem isso o elemento fica escondido atrás do .header
   (fixo, sempre por cima). 16px de respiro depois da altura do header. */
.scroll-alvo-header {
    scroll-margin-top: 88px;
}

.header-content {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.header-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 800px) {
    /* Sem execução real no mobile (ver bloqueio em app.js), "Último
       status" nunca muda sozinho aqui -- fica parado em "Pronto" e só
       confunde, então some do cabeçalho. O botão de Suporte ao lado
       continua (".header-direita" tem os dois, ".header-status" é só
       esse badge). */
    .header-status {
        display: none;
    }
}

.header-status-label {
    font-size: 13px;
    color: var(--text-muted);
}

/* Envolve "Último status" + ícone de Suporte (painel.html) -- só
   existe pra dar aos dois um espaçamento entre si sem quebrar o
   justify-content:space-between de 2 pontas do .header-content (ver
   comentário em painel.html). */
.header-direita {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-suporte {
    position: relative;
}

.header-suporte-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-dark);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.header-suporte-btn:hover {
    background: var(--bg);
    border-color: var(--cor-primaria);
}

.header-suporte-btn svg {
    width: 18px;
    height: 18px;
}

/* Borda branca (não a var(--navy) usada na mesma bolinha da sidebar,
   ver .sidebar-icon-ponto) -- aqui o fundo por trás é o header branco,
   não a sidebar escura. */
.header-suporte-ponto {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--red);
    border: 2px solid #fff;
}

.header-suporte-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 8px;
    min-width: 190px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header-suporte-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    border: none;
    background: none;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-dark);
    cursor: pointer;
    transition: background 0.15s;
}

.header-suporte-menu-item:hover {
    background: var(--bg);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.brand-logo {
    display: block;
    height: 44px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

.logo-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.badge {
    background: var(--teal-soft);
    color: var(--teal-dark);
    border: 1px solid rgba(16, 185, 129, 0.35);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
}

.badge.rodando {
    background: #fef3c7;
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.35);
}

/* ---------- MAIN WRAPPER (reserva espaço da sidebar, empurra quando expande,
   e cuida da transição de entrada/saída de página) ---------- */

.main-wrapper {
    margin-top: 72px;
    margin-left: 64px;
    min-height: 100vh;
    transition: margin-left 0.2s ease, opacity 0.35s ease, transform 0.35s ease;
    animation: pagina-entrada 0.4s ease-out;
}

@keyframes pagina-entrada {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-wrapper.saindo-fade {
    animation: none;
    opacity: 0;
    transform: translateY(-10px);
}

.main-wrapper.empurrado {
    margin-left: 220px;
}

/* ---------- FAIXA ESCURA (decorativa, abaixo do header) ---------- */

.hero-band {
    background: linear-gradient(135deg, var(--navy) 100%, var(--navy-light) 0%);
    min-height: 340px;
    position: relative;
}

/* Variante clara — usada no painel, sem o fundo escuro (a home
   continua com o hero-band escuro original, sem essa classe).
   Precisa cancelar o min-height de cima (senão o painel, que tem
   pouco conteúdo aqui, ganha um espaço vazio enorme forçado a 340px
   antes dos cards). */
.hero-band.hero-band-claro {
    min-height: 0;
    background: transparent;
    height: auto;
    padding: 32px 0 0 0;
}

.hero-band-claro .hero-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
    text-align: left;
}

.hero-band-claro .hero-badge {
    display: none;
}

.hero-band-claro .hero-titulo {
    color: var(--text-dark);
    font-size: 28px;
    margin: 0 0 6px 0;
}

.hero-band-claro .hero-subtitulo {
    color: var(--text-muted);
    font-size: 14px;
}

/* Sem hero escuro alto pra sobrepor, o .container não precisa mais
   subir por cima dele — cancela a margem negativa só nessa página. */
.pagina-clara .container {
    margin-top: 16px;
}

/* ---------- LAYOUT ---------- */

.container {
    max-width: 1400px;
    margin: -50px auto 32px auto;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    z-index: 2;
}

/* ---------- CARDS ---------- */

.card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px 28px;
    border: 1px solid var(--border);
}

.card-title {
    margin: 0 0 18px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
}

.gc-titulo-com-icone {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gc-titulo-com-icone svg {
    width: 22px;
    height: 22px;
    color: var(--cor-primaria);
    flex-shrink: 0;
}

/* ---------- FIELDS ---------- */

.field-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.field-row:last-child { margin-bottom: 0; }

.field-row label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.label-linha {
    display: flex;
    align-items: center;
    gap: 8px;
}

.label-separador {
    font-size: 13px;
    color: var(--border);
}

.link-modelo {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 7px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    color: var(--cor-primaria);
    text-decoration: none;
    transition: background 0.15s;
}

.link-modelo:hover {
    background: #eceef1;
}

/* Modificador pra usar .link-modelo num <button> (ex: "Criar tabela")
   em vez de só <a> -- reseta os defaults de botão nativo que a classe
   base não cobre. */
.link-modelo-botao {
    font-family: inherit;
    cursor: pointer;
}

/* Grade editável do modal "Criar tabela" -- 4 colunas (CNPJ/CPF/
   Admissão/remover), cada linha um CSS Grid próprio, mesmo espírito
   das listas .gc-lista-linha do resto do painel. 03/10/2026. */
.criar-tabela-grade-wrap {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.criar-tabela-cabecalho,
.criar-tabela-linha {
    display: grid;
    grid-template-columns: 1.3fr 1.3fr 1.3fr 32px;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
}

.criar-tabela-cabecalho {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    background: var(--bg);
    position: sticky;
    top: 0;
}

.criar-tabela-linha {
    border-top: 1px solid var(--border);
}

.criar-tabela-linha input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
}

.criar-tabela-remover-linha {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
}

.criar-tabela-remover-linha:hover {
    background: var(--red-soft);
    color: var(--red);
}

.field-row input[type="text"],
.field-row input[type="number"],
.field-row input[type="date"],
.field-row input[type="email"],
.field-row select,
.field-row textarea {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
    background: #fff;
    font-family: inherit;
}

.field-row textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
}

/* Campo calculado automaticamente (ex: Usuários (atual), contagem ao
   vivo -- ver obter_permissoes_padrao_cliente/usuarios_atual em
   banco_usuarios.py), não editável -- visual acinzentado avisa isso
   antes mesmo de tentar clicar. */
.field-row input[readonly] {
    background: var(--bg-light, #f4f5f7);
    color: var(--text-muted);
    cursor: not-allowed;
}

.field-row input[type="password"] {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
    max-width: 200px;
}

.field-row input.campo-estreito {
    max-width: 280px;
}

.admin-criar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.admin-criar-coluna {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-criar-coluna:last-child {
    border-left: 1px solid var(--border);
    padding-left: 24px;
}

/* Cartão próprio pra cada "Usuário extra"/"Consumo extra" (Gestão de
   Clientes → cliente → Itens adicionais) -- ícone + título + descrição
   no topo, dentro de uma caixa com borda em volta (em vez de só um
   traço entre as 2 colunas, como o resto dos forms 2-colunas do site
   que reusam .admin-criar-coluna). Pedido do usuário em 14/09/2026,
   com referência visual -- só o botão continua pequeno (.btn-sm), que
   foi a exceção explicitamente pedida. */
.item-adicional-card {
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}
.item-adicional-card:last-child {
    /* Sobrescreve o traço herdado de .admin-criar-coluna:last-child --
       aqui os dois cartões já têm borda própria em volta, não precisa
       do traço extra colado na esquerda do segundo. */
    border-left: 1px solid var(--border);
    padding-left: 18px;
}

.item-adicional-card-cabecalho {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.item-adicional-card-icone {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cor-primaria-suave);
    color: var(--cor-primaria-escura);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.item-adicional-card-icone svg {
    width: 18px;
    height: 18px;
}

.admin-criar-coluna input,
.admin-criar-coluna input[type="password"] {
    max-width: none;
}

.admin-criar-acao {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: auto;
}

.field-row-dupla {
    display: flex;
    gap: 14px;
}

.field-row-dupla .field-row {
    /* flex-basis explícito e POSITIVO (não "0%"/"0", que é o mesmo
       problema) pelo mesmo motivo do comentário logo abaixo, em
       .admin-catalogo-novo input -- os dois lados dessa linha (Valor
       e Vencimento da cobrança) têm padding diferente entre si (o de
       Valor tem o prefixo "R$"), e isso desequilibra a divisão 50/50
       quando o flex-basis é zero. */
    flex: 1 1 100px;
    min-width: 100px;
}

/* "Preço padrão do consumo extra (a cada 100 consultas)" -- rótulo
   comprido, quebrava linha na coluna estreita (50/50 com "usuário
   extra"); mais espaço pra caber numa linha só + deslocado 50px pra
   direita, afastando visualmente dos dois campos (pedido do usuário,
   22/09/2026). */
.campo-consumo-extra-deslocado {
    flex: 0 0 420px;
    margin-left: 50px;
}

.campo-consumo-extra-deslocado label {
    white-space: nowrap;
}

/* Em telas estreitas a largura fixa (420px) + deslocamento (50px)
   estourariam a tela -- volta a ser flexível/quebra pra baixo do
   campo "usuário extra" em vez de forçar rolagem horizontal. */
@media (max-width: 900px) {
    .field-row-dupla { flex-wrap: wrap; }
    .campo-consumo-extra-deslocado {
        flex: 1 1 240px;
        margin-left: 0;
    }
    .campo-consumo-extra-deslocado label {
        white-space: normal;
    }
}

/* Prefixo "R$" nos campos de valor -- de propósito SEM nenhum wrapper
   <div> em volta do input (um wrapper flex/bloco em volta faz o
   próprio input encolher/desalinhar em relação aos campos vizinhos
   dentro da mesma linha flex -- efeito colateral real de layout
   testado e confirmado, não só teórico). O "R$" vira um background-
   image (SVG inline) no próprio <input>, que continua sendo um item
   direto do flex/grid de fora, exatamente igual aos outros campos. */
.campo-moeda {
    /* !important em tudo aqui -- ".field-row input[type=text]" define
       "background: #fff" (shorthand), que por si só já zera
       background-image/position/repeat pro valor inicial (é
       shorthand, não só background-color), e tem mais especificidade
       que ".campo-moeda" sozinho. Sem !important o "R$" simplesmente
       não aparece nesse contexto (aparecia só no de Planos, que não
       tem nenhum "background" competindo). */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='16'%3E%3Ctext x='0' y='12' font-family='Arial, sans-serif' font-size='12.5' fill='%236b7280'%3ER%24%3C/text%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    padding-left: 36px !important;
}

@media (max-width: 700px) {
    .admin-criar-grid {
        grid-template-columns: 1fr;
    }
}

.field-row input:focus,
.field-row select:focus,
.field-row textarea:focus {
    border-color: var(--cor-primaria);
}

.field-inline {
    display: flex;
    align-items: center;
    gap: 10px;
}

.field-inline input {
    flex: 1;
}

/* ---------- UPLOAD DA PLANILHA (nuvem) — cartão com ícone + nome do
   arquivo + botão "Escolher arquivo" (o <input type="file"> real fica
   escondido, disparado pelo <label for=...> estilizado), e o botão
   "Enviar" ao lado — mesma linha, mesmo formato de antes. ---------- */

.upload-excel-linha {
    display: flex;
    align-items: center;
    gap: 10px;
}

.upload-excel-card {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.upload-excel-info {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.upload-excel-icone {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cor-primaria-suave);
    color: var(--cor-primaria-escura);
}

.upload-excel-icone svg {
    width: 22px;
    height: 22px;
}

.upload-excel-textos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.upload-excel-titulo {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-excel-subtitulo {
    font-size: 12px;
    color: var(--text-muted);
}

.upload-excel-botao {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #fff;
    color: var(--text-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.upload-excel-botao:hover {
    background: var(--bg);
}

.upload-excel-botao svg {
    width: 16px;
    height: 16px;
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 190px));
    gap: 12px;
    max-width: 810px;
}

.field-grid input {
    padding: 8px 12px;
    font-size: 13px;
}

@media (max-width: 900px) {
    .field-grid { grid-template-columns: repeat(2, minmax(0, 190px)); max-width: none; }
}

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

/* Sem "Salvar" ao lado (removido, 22/09/2026) -- mudar o select já
   pede confirmação num popup (ver abrirModalConfirmarPeriodicidade em
   app.js), tela mais limpa/padrão igual os outros 3 campos da linha.
   Só a largura (140px, tamanho já aprovado antes) continua custom --
   sem isso o select ficaria justo no tamanho do texto "12 meses". */
.campo-periodicidade-padrao {
    width: 140px;
}

.toggle-row {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.toggle-row span {
    font-size: 14px;
    color: var(--text-dark);
}

/* Recurso que o plano do cliente não inclui (ver abrirEditorUsuarioME
   em app.js) -- o toggle continua clicável (precisa continuar
   permitindo DESLIGAR), só fica visualmente apagado + um aviso curto,
   o bloqueio de fato (impedir ligar + a mensagem) é o onclick do
   próprio input. */
.toggle-row-bloqueada .toggle { opacity: 0.45; cursor: not-allowed; }
/* ">" (filho direto) importa aqui -- sem ele, o seletor também bate no
   <span class="toggle-track"> de DENTRO do .toggle (é um <span> também),
   grudando o aviso ali dentro em vez de só no texto descritivo do
   recurso, que é o único <span> filho direto de .toggle-row. */
.toggle-row-bloqueada > span::after {
    content: " 🔒 fora do plano atual";
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
}

/* Administração de usuários (busca + edição de permissões) */

.admin-busca-usuario {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

/* Filtro de status da Tela Comercial -- multi-seleção (checkboxes num
   painel flutuante), em vez de um <select> de escolha única, pra dar
   pra ver "Em atendimento" + "Em negociação" juntos, por exemplo
   (20/09/2026). */
.comercial-filtro-status-wrap {
    position: relative;
}

/* Mesmo visual de um <select> de filtro comum (ver .admin-busca-usuario
   select) -- não o pill grande padrão de .btn, já que aqui é só um
   filtro, não uma ação principal de tela. */
#comercial-filtro-status-btn {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
}

.comercial-filtro-status-wrap .btn svg {
    width: 14px;
    height: 14px;
}

.comercial-filtro-status-painel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    min-width: 210px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.comercial-filtro-status-painel label {
    display: grid;
    grid-template-columns: 15px 1fr;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-dark);
    cursor: pointer;
    text-align: left;
}

.comercial-filtro-status-painel input {
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
}

.admin-busca-usuario input {
    flex: 1;
    height: 42px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
}

/* Filtros extras (Status/Início/Vencimento em Assinaturas) na mesma
   linha da busca -- ao contrário do campo de texto (flex:1, ocupa o
   espaço que sobrar), esses têm largura fixa, do tamanho do próprio
   conteúdo (não fazia sentido um <select> ou uma data esticarem). */
.admin-busca-usuario select,
.admin-busca-usuario input[type="date"],
.admin-busca-usuario input[type="month"] {
    flex: 0 0 auto;
    height: 42px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
}

#cobrancas-filtro-plano {
    min-width: 170px;
}

/* Rótulo visível em cima de um filtro (ex: Plano/Competência/Vencimento
   em Cobranças) -- sem isso um <input type="date"/"month"> vazio não diz
   pra que serve (só dá pra saber passando o mouse no title). O
   align-items:flex-end acima do .admin-busca-usuario garante que esses
   campos (mais altos, por causa do rótulo) fiquem alinhados por baixo
   com o campo de busca principal (sem rótulo, mais baixo). */
.gc-filtro-grupo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 auto;
}

.gc-filtro-grupo label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Filtro de busca (1º campo) com título como os demais, mas ainda
   ocupando o espaço que sobrar na linha (Agenda de Tarefas,
   21/09/2026) -- quem cresce é o WRAPPER (.gc-filtro-grupo), não o
   <input> direto: dentro de um flex-column, o flex:1 herdado de
   .admin-busca-usuario input vira flex-basis:0% no eixo VERTICAL
   (altura), zerando a altura antes de crescer -- por isso o campo
   ficava mais baixo que os outros filtros. */
.gc-filtro-grupo-crescer {
    flex: 1;
    min-width: 200px;
}

.gc-filtro-grupo-crescer input {
    flex: 0 0 auto;
    width: 100%;
}

/* Variante da Agenda de Tarefas -- "Limpar filtros" fica embaixo do
   campo Empresa (3º item empilhado no .gc-filtro-grupo-crescer), então
   esse grupo fica mais alto que os outros (só label+input). Alinhar
   pelo TOPO em vez de flex-end (padrão de .admin-busca-usuario, pensado
   pra alinhar um campo de busca SEM rótulo com os outros COM rótulo)
   é o que faz os campos Responsável/De/Até subirem e ficarem no mesmo
   nível do campo Empresa, em vez de descerem pra acompanhar o link.
   Corrigido a pedido do usuário, 24/09/2026 -- o "Limpar filtros" já
   estava no lugar certo, o problema era só o alinhamento dos outros. */
.admin-busca-usuario-topo {
    align-items: flex-start;
}

#tarefas-limpar-filtros {
    margin-left: 4px;
}

.admin-busca-resultados {
    margin-top: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    max-height: 220px;
    overflow-y: auto;
}

.admin-busca-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    background: #fff;
    border: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: 13.5px;
}

.admin-busca-item:last-child {
    border-bottom: none;
}

.admin-busca-item:hover {
    background: var(--bg);
}

.admin-busca-item span {
    color: var(--text-muted);
    margin-left: 6px;
}

.admin-busca-vazio {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* Linha clicável do card "Negócios" (tela do Cliente) -- mesmo botão
   de .admin-busca-item, só com o nome do negócio à esquerda e a badge
   de status à direita numa linha só. */
.cliente-negocio-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* Destaca o negócio que está sendo visualizado agora nessa lista --
   sem isso, os vários negócios de um mesmo cliente ficavam visualmente
   idênticos, sem indicar qual já está aberto. Pedido do usuário,
   28/09/2026. */
.cliente-negocio-item-ativo {
    border: 1px solid var(--cor-primaria);
    border-radius: var(--radius);
    background: var(--bg);
}

.admin-sistemas-titulo {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 4px 0;
}

.admin-sistema-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    flex-wrap: wrap;
}


/* Form de contratar (Itens adicionais, detalhe do cliente/admin) --
   afasta da borda esquerda/direita do card (mesmo respiro que a lista
   de Usuários logo abaixo já tem, via o padding 14px de .gc-lista-
   linha/.gc-lista-cabecalho). A LISTA em si (#cliente-itens-
   adicionais-lista) não precisa desse padding aqui -- .me-plano-item-
   linha já tem os 14px certos, dobraria o respiro se os dois
   somassem. */
#cliente-item-adicional-form {
    padding: 0 14px;
}

/* Título ("Usuário extra"/"Consumo extra") e descrição de cada
   coluna, e o rótulo dos campos (Qtd./Valor unitário) -- menores que
   o padrão do resto da tela, só pra esse form compacto. */
#cliente-item-adicional-form strong {
    font-size: 13px;
}
#cliente-item-adicional-form .processo-desc {
    font-size: 13px;
}
#cliente-item-adicional-form .field-row label {
    font-size: 11px;
}

/* Menos espaço entre os campos e o botão "+ Usuário/Consumo extra"
   (o padrão de .field-row, 16px de margin-bottom, era pensado pra
   separar campos empilhados, não pra ficar colado num botão logo
   abaixo) -- e os botões um pouco mais compactos que o .btn-sm normal. */
#cliente-item-adicional-form .field-row-dupla .field-row {
    margin-bottom: 6px;
}
#cliente-item-usuario-adicionar,
#cliente-item-consumo-adicionar {
    padding: 6px 14px;
    font-size: 12px;
}

.admin-sistema-nome {
    font-size: 13.5px;
    font-weight: 600;
    min-width: 90px;
}

.admin-sistema-chave {
    flex: 1;
    min-width: 180px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
}

.admin-sistema-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 999px;
    text-align: center;
}

/* Nas listas em grid (Empresas/Assinaturas/Cobranças/Planos), o
   badge é o próprio item de grid da coluna -- sem isso ele fica
   esticado pra largura inteira da coluna (grid estica os itens por
   padrão), com o "pill" ocupando a coluna toda em vez de só o
   tamanho do texto. justify-self:start deixa o "pill" do tamanho
   certo do texto, encostado na esquerda da coluna (mesmo alinhamento
   das outras colunas da tabela). */
.gc-grade-clientes .admin-sistema-badge,
.gc-grade-assinaturas .admin-sistema-badge,
.gc-grade-assinaturas-cliente .admin-sistema-badge,
.gc-grade-meu-plano .admin-sistema-badge,
.gc-grade-cobrancas .admin-sistema-badge,
.gc-grade-planos .admin-sistema-badge,
.gc-grade-usuarios-cliente .admin-sistema-badge,
.gc-grade-usuarios-empresa .admin-sistema-badge,
.gc-grade-itens-adicionais .admin-sistema-badge,
.gc-grade-logs .admin-sistema-badge,
.gc-grade-tickets .admin-sistema-badge,
.gc-grade-meus-tickets .admin-sistema-badge,
.gc-grade-tickets .suporte-prioridade-badge,
.gc-grade-meus-tickets .suporte-prioridade-badge {
    justify-self: start;
}

.admin-sistema-badge-ativo {
    background: #d1fae5;
    color: var(--teal-dark);
}

.admin-sistema-badge-inativo {
    background: var(--red-soft);
    color: var(--red);
}

.admin-sistema-badge-pendente {
    background: #fef3c7;
    color: var(--amber);
}

/* Status "aguardando retorno do cliente" (tickets_suporte) -- roxo,
   distinto de "aguardando suporte" (amber/pendente) e "finalizado"
   (verde/ativo), pra diferenciar de quem depende a próxima ação. */
.admin-sistema-badge-aguardando {
    background: #ede9fe;
    color: #7c3aed;
}

/* "Em implantação" (etapa_implantacao) -- azul, pra não ficar igual
   "Aguardando implantação" (as duas usavam -pendente/amber antes,
   difíceis de distinguir rápido numa lista). Pedido do usuário,
   02/10/2026. */
.admin-sistema-badge-info {
    background: #dbeafe;
    color: var(--blue);
}

/* Gestão de Clientes: hub de cards-resumo (Clientes/Assinaturas/
   Planos/Cobranças) e o botão "← Voltar" das telas que abrem a
   partir dele -- antes tudo ficava empilhado num card só, cada
   seção agora é uma tela própria, navegada a partir daqui. */
.gc-cards-resumo {
    display: grid;
    /* Fixo em 4 colunas (não auto-fit) -- os 4 cards de "Visão geral"
       (Clientes/Assinaturas/Planos/Cobranças) cabem numa linha só, em
       vez do navegador decidir quantos cabem sozinho. O bloco
       "Comercial" (20/09/2026) é uma seção própria agora, com sua
       própria contagem de colunas -- ver .gc-cards-resumo-comercial. */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Bloco "Comercial" -- 4 cards (Aguardando atendimento/Em atendimento
   ou negociação/Trials ativos/Tarefas, 21/09/2026), mesma contagem e
   tamanho de "Visão geral" logo acima -- antes era 3 colunas (de
   quando só existiam 3 cards aqui), o 4º card (Tarefas) quebrava pra
   uma 2ª linha sozinho. */
.gc-cards-resumo-comercial {
    grid-template-columns: repeat(4, 1fr);
}

/* Título menor pra caber nas 3 colunas do bloco Comercial sem quebrar
   feio (20/09/2026). */
.gc-card-resumo-titulo-sm {
    font-size: 14px;
}

@media (max-width: 900px) {
    .gc-cards-resumo {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .gc-cards-resumo,
    .gc-cards-resumo-comercial {
        grid-template-columns: 1fr;
    }
}

/* Mesma referência visual dos cards de processo (Início > "Relatório
   de Auditoria" etc: .card.processo-card, ícone colorido) + o layout
   passado pelo usuário como referência: ícone no topo esquerdo,
   título + descrição abaixo (esquerda), divisor, número/lista
   centralizados no meio, e um botão "Ver X →" (fundo suave na cor do
   ícone) fixo embaixo. Usada junto de "card processo-card" no HTML,
   não substitui essas classes -- só ".processo-card-topo"/".processo-
   seta" (ícone+seta lado a lado) não entram aqui, o ícone fica sozinho. */
.gc-card-resumo {
    min-height: 260px;
    font-family: inherit;
    text-align: left;
}

.gc-card-resumo .processo-icone {
    margin-bottom: 14px;
}

.gc-card-resumo-titulo {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.gc-card-resumo-desc {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-muted);
}

.gc-card-resumo-divisor {
    width: 100%;
    border: none;
    border-top: 1px solid var(--border);
    margin: 16px 0;
}

.gc-card-resumo-centro {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
}

.gc-card-resumo-numero {
    font-size: 34px;
    font-weight: 700;
    color: var(--cor-primaria);
    line-height: 1.1;
}

.gc-card-resumo-label {
    font-size: 13.5px;
    color: var(--text-muted);
}

/* 2 números lado a lado com divisor no meio (ex: "Aguardando
   atendimento" -- Leads/Trials) -- mesmo tamanho de fonte de
   .gc-card-resumo-numero/-label, só que 2 colunas em vez de 1
   (20/09/2026). */
.gc-card-resumo-centro-duplo {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.gc-card-resumo-centro-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.gc-card-resumo-centro-divisor {
    width: 1px;
    align-self: stretch;
    background: var(--border);
}

.gc-card-resumo-detalhe {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    width: 100%;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
}

.gc-card-resumo-detalhe span {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.gc-card-resumo-detalhe-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Verde quando o plano já tem assinatura, um tom mais neutro/vermelho
   quando ainda tem 0 -- destaca de relance quais planos "pegaram",
   igual na referência que o usuário mandou. */
.gc-card-resumo-detalhe span b {
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 700;
}

.gc-card-resumo-detalhe span b.gc-contagem-positiva {
    color: var(--cor-primaria);
}

.gc-card-resumo-detalhe span b.gc-contagem-zero {
    color: var(--red);
}

.gc-card-resumo-detalhe-vazio {
    font-weight: 400;
    color: var(--text-muted);
}

.gc-card-resumo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 16px;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.15s;
}

.gc-card-resumo-btn:hover {
    filter: brightness(0.96);
}

.gc-card-resumo-btn .seta-acao {
    transition: transform 0.15s ease;
}

.gc-card-resumo-btn:hover .seta-acao {
    transform: translateX(3px);
}

.gc-card-resumo-btn-info { background: #dbeafe; color: var(--blue); }
.gc-card-resumo-btn-success { background: #d1fae5; color: var(--teal-dark); }
.gc-card-resumo-btn-warning { background: #fed7aa; color: #c2410c; }
.gc-card-resumo-btn-purple { background: #ede9fe; color: #7c3aed; }

/* Cards de status da Gestão de Suporte (admin) -- versão mais simples
   dos cards de resumo acima (só ícone + número grande colorido +
   rótulo, sem descrição/botão): cada um clicável, filtra a tabela de
   tickets abaixo pelo status correspondente (ver suporteStatusCards
   em app.js); "Todos" (data-status="") limpa o filtro de status. */
.suporte-status-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

/* Tela Comercial (CRM) tem 5 cards reduzidos (Todos/Aguardando
   atendimento/Negociação/Trials ativos/Aguardando pagamento) -- minmax
   menor aqui, só nessa tela, pra caber os 5 numa linha só em telas de
   desktop comuns sem afetar Tarefas/Suporte (4 cards cada, continuam
   com o minmax padrão acima). Pedido do usuário, 28/09/2026. */
#gc-tela-comercial .suporte-status-grade {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Ícone alinhado pelo topo com o número (não centralizado com o bloco
   número+rótulo inteiro, que fica mais baixo por causa do rótulo
   embaixo) -- só nesta tela. Pedido do usuário, 28/09/2026. */
#gc-tela-comercial .suporte-status-card {
    align-items: flex-start;
}

.suporte-status-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.suporte-status-card:hover {
    border-color: var(--cor-primaria);
    box-shadow: var(--shadow);
}

.suporte-status-card.suporte-status-ativo {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 2px var(--cor-primaria-suave);
}

.suporte-status-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.suporte-status-numero {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}

.suporte-status-numero-info { color: var(--blue); }
.suporte-status-numero-success { color: var(--teal-dark); }
.suporte-status-numero-warning { color: #c2410c; }
.suporte-status-numero-purple { color: #7c3aed; }
.suporte-status-numero-danger { color: var(--red); }
.suporte-status-numero-amber { color: var(--amber); }

.suporte-status-label {
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 600;
}

/* Tela Comercial = tela do CRM geral (21/09/2026) -- título + atalho
   "Tarefas" na mesma linha; quebra pra baixo em telas estreitas (mesmo
   espírito responsivo do resto do painel). */
.gc-titulo-com-acao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.gc-titulo-com-acao .card-title {
    margin: 0;
}

/* "levemente arredondado, mais quadrado" (pedido do usuário) -- os
   outros .btn do sistema são todos pílula (--radius-pill); este
   atalho usa o raio "de card" (--radius) em vez disso, pra destacar
   visualmente que é uma AÇÃO DE NAVEGAÇÃO, não um botão de formulário
   comum. Precisa de .btn.crm-btn-tarefas (2 classes) pra empatar em
   especificidade com a regra ".btn" (que vem DEPOIS no arquivo e por
   isso venceria no empate se fosse só 1 classe aqui). */
.btn.crm-btn-tarefas {
    border-radius: var(--radius);
    white-space: nowrap;
}

/* "Fazer upgrade" -- mesma ideia (mais quadrado, leve arredondamento em
   vez da pílula padrão), pedido do usuário, 22/09/2026. */
.btn.crm-btn-upgrade {
    border-radius: var(--radius);
    white-space: nowrap;
}

/* Modal "Fazer upgrade" -- valores calculados só de LEITURA (Plano
   Atual, Diferença Mensal) são <p>; Cobrança do Upgrade e Próxima
   renovação/cobrança viram <input> editável pro admin (pedido do
   usuário, 22/09/2026 -- os dois são independentes, editar um não
   mexe no outro, ver upgradeRecalcular/upgradeAoTrocarPlano em
   app.js), mas continuam <p> read-only pro cliente. O modal é
   compartilhado entre admin e cliente -- .upgrade-modal-somente-admin/
   -cliente escondem/mostram os campos que só fazem sentido num dos
   dois lados, alternando a classe "modo-cliente" na raiz do modal. */
.upgrade-modal-texto {
    margin: 0;
    font-weight: 600;
}

#upgrade-modal-overlay.modo-cliente .upgrade-modal-somente-admin {
    display: none;
}

#upgrade-modal-overlay:not(.modo-cliente) .upgrade-modal-somente-cliente {
    display: none;
}

/* "Cobrança única" ao lado do valor (não embaixo, numa linha à parte
   -- ficava longe demais do número, pedido do usuário) -- valor e
   legenda na mesma linha, coladinhos. */
.upgrade-linha-valor-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.upgrade-linha-valor-inline .campo-moeda {
    max-width: 160px;
}

.upgrade-linha-valor-inline .logo-ajuda {
    white-space: nowrap;
}

/* Cartão "↑ Upgrade realizado em..." -- aparece no form de editar
   assinatura (admin) e logo abaixo da tabela de "Meu Plano" (cliente)
   quando a assinatura já passou por um upgrade (ver
   obter_ultimo_upgrade_assinatura em banco_usuarios.py), 22/09/2026. */
.upgrade-historico-card {
    margin-top: 4px;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 13px;
    line-height: 1.5;
}

/* "Resumo financeiro" (Valor tabela / Desconto / Valor contratado /
   Parcelamento) no form de editar assinatura (admin) -- ver
   preencherResumoFinanceiroAssinatura em app.js, 22/09/2026. Mesma
   caixa do cartão de histórico de upgrade, só que com várias linhas
   rótulo/valor em vez de um parágrafo só. */
.resumo-financeiro-card {
    margin-top: 4px;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 13px;
}

.resumo-financeiro-linha {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

.resumo-financeiro-linha:not(:last-child) {
    border-bottom: 1px dashed var(--border);
}

.resumo-financeiro-linha strong {
    font-weight: 600;
}

/* Variante com upgrade: dois blocos (plano antigo / plano novo)
   separados por um divisor + rótulo "UPGRADE EM ..." -- ver
   preencherResumoFinanceiroAssinatura em app.js, 25/09/2026. */
.resumo-financeiro-plano-titulo {
    font-weight: 600;
    font-size: 13px;
    color: var(--texto-secundario, #666);
    padding: 4px 0;
}

.resumo-financeiro-plano-titulo:not(:first-child) {
    padding-top: 2px;
}

.resumo-financeiro-divisor {
    margin: 10px 0 8px;
    border-top: 1px solid var(--border);
}

.resumo-financeiro-upgrade-marca {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--cor-primaria);
    margin-bottom: 8px;
}

/* Card de detalhes financeiros (link "Ver detalhes" na tabela de
   Assinaturas do Cliente) -- próxima cobrança + forma de pagamento lado
   a lado (empilha no mobile) + histórico de cobranças do negócio
   inteiro abaixo. Pedido do usuário, 24/09/2026. */
.detalhes-financeiros-card {
    margin: 14px 0 22px;
    padding: 16px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.detalhes-financeiros-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.detalhes-financeiros-cabecalho h4 {
    margin: 0;
    font-size: 14px;
}

.detalhes-financeiros-grade {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
}

.detalhes-financeiros-bloco {
    flex: 1 1 240px;
    min-width: 0;
}

.detalhes-financeiros-bloco .lead-detalhe-mini-titulo {
    margin-bottom: 0;
}

/* Divisória vertical entre "Próxima cobrança" e "Forma de pagamento" --
   só faz sentido lado a lado; no mobile (quando .detalhes-financeiros-
   grade empilha, ver flex-wrap acima) vira só espaço em branco normal,
   sem borda solta em cima do bloco. Pedido do usuário, 25/09/2026. */
@media (min-width: 520px) {
    .detalhes-financeiros-bloco-divisor {
        border-left: 1px solid var(--border);
        padding-left: 16px;
    }
}

/* Conteúdo alinhado com o TEXTO do título (não com o ícone) -- mesmo
   recuo do ícone + gap (15px + 6px, ver .lead-detalhe-mini-titulo svg)
   -- com um respiro abaixo do título. Pedido do usuário, 25/09/2026. */
#cliente-detalhes-ultima-cobranca,
#cliente-detalhes-proxima-cobranca,
#me-detalhes-ultima-cobranca,
#me-detalhes-proxima-cobranca {
    font-size: 14px;
    padding-left: 21px;
    margin-top: 10px;
}

.detalhes-financeiros-sublinha {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.forma-pagamento-linha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 10px;
    padding-left: 21px;
}

/* Cartão genérico (sem bandeira/validade -- não temos esse dado, só os
   últimos dígitos e, quando o Stripe tiver, o nome do titular, ver
   obter_forma_pagamento_stripe) -- proporção real de cartão físico
   (~1.7:1), degradê com mais contraste (o anterior ficava quase liso).
   Pedido do usuário, 25/09/2026. */
.cartao-generico-visual {
    width: 260px;
    max-width: 100%;
    height: 153px;
    padding: 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, #4b5568 0%, #2b3140 50%, #101319 100%);
    color: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.cartao-generico-numero {
    font-family: "Courier New", monospace;
    font-size: 16px;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.cartao-generico-nome {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

.forma-pagamento-icone {
    display: block;
    max-width: 140px;
    max-height: 56px;
    object-fit: contain;
}

.forma-pagamento-cadastrado {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
}

.forma-pagamento-cadastrado svg {
    width: 17px;
    height: 17px;
    color: var(--cor-primaria);
    flex-shrink: 0;
}

.gc-grade-historico-financeiro {
    display: grid;
    /* fr (não px fixo) -- pra ocupar a largura TOTAL do card, como uma
       tabela de verdade, em vez de colunas grudadas à esquerda com
       espaço vazio sobrando à direita. Pesos proporcionais ao conteúdo
       típico de cada coluna (Referência/Forma são as mais longas).
       Pedido do usuário, 25/09/2026. */
    grid-template-columns: 1fr 1.8fr 0.8fr 0.8fr 1.6fr;
    gap: 14px;
    min-width: 610px;
}

#cliente-detalhes-historico,
#cliente-detalhes-outros-negocios {
    overflow-x: auto;
    margin-top: 8px;
}

/* Tabela de tickets -- zebrada (pedido do usuário, 17/09/2026), única
   lista do painel com esse tratamento (as outras -- Logs/Clientes/
   Cobranças -- continuam sem, de propósito, pra não mudar tela que não
   foi pedida). */
.gc-grade-tickets {
    display: grid;
    /* Coluna "Status" em 225px (era 140px) -- mesmo problema do badge
       de Etapa (ver .gc-grade-clientes): "Aguardando retorno do
       cliente" precisa de ~218px numa linha só; com menos que isso
       quebrava em 2 linhas e o badge (justify-self:start) ficava do
       tamanho da coluna inteira, sobrando espaço vazio nas laterais
       do texto. Pedido do usuário, 02/10/2026 -- só o tamanho, sem
       mudar cor nenhuma. */
    grid-template-columns: 80px minmax(160px, 1fr) minmax(160px, 1fr) 110px 100px 225px 100px;
    gap: 14px;
}

#suporte-lista .gc-lista-linha:nth-child(even) {
    background: var(--bg);
}

.suporte-prioridade-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
}

.suporte-prioridade-baixa { background: #dbeafe; color: var(--blue); }
.suporte-prioridade-media { background: #fed7aa; color: #c2410c; }
.suporte-prioridade-alta { background: #fee2e2; color: var(--red); }

.gc-voltar {
    background: none;
    border: none;
    color: var(--cor-primaria);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
}

.gc-voltar:hover {
    text-decoration: underline;
}

/* Link de texto pra ações leves dentro de uma lista (ex: alternar
   "Exibir todas as assinaturas" / "Mostrar só ativas/agendadas") --
   mesma cara/cor do ".gc-voltar", sem o espaçamento pensado pra ficar
   no topo de uma tela. */
.gc-link-acao {
    background: none;
    border: none;
    color: var(--cor-primaria);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.gc-link-acao:hover {
    text-decoration: underline;
}

/* Listas em grid (Clientes/Assinaturas/Cobranças) -- cabeçalho e
   linhas usam a MESMA classe de grid-template-columns (uma por
   lista), garantindo que as colunas fiquem sempre alinhadas entre
   header e corpo sem precisar acertar larguras em dois lugares. */
.gc-lista-cabecalho {
    margin: 22px 0 8px;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* Cabeçalho clicável (ordenação) -- reseta o botão pra parecer texto
   normal do cabeçalho, só ganha destaque (cor da marca) na coluna
   ativa (ver ordenarLista/renderizarSeta em app.js). */
.gc-th-ordenavel {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.gc-th-ordenavel:hover {
    color: var(--text-dark);
}

.gc-th-ordenavel.gc-th-ativo {
    color: var(--cor-primaria);
}

.gc-th-seta {
    font-size: 9px;
}

.gc-lista-linha {
    /* Mesmo padding horizontal de .gc-lista-cabecalho (14px) de
       propósito -- diferente daquele, o "auto" da 1ª coluna (fr)
       calcula a largura em cima da largura ÚTIL (sem o padding) de
       CADA um (são grids/linhas separadas, não uma <table> só) --
       com paddings diferentes, essa coluna saía com uma largura em
       cada, e a partir da 2ª coluna em diante tudo ficava desalinhado
       (efeito cumulativo, cada coluna fixa "herdando" o desvio da
       coluna flexível antes dela). */
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

/* Barra "Anterior · Página X de Y · Próxima" no fim das listas
   paginadas (Empresas, Logs -- ver paginar()/criarBarraPaginacao() em
   app.js). Fica vazia (sem CSS pra mostrar) quando só tem 1 página. */
.gc-paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 0 4px;
}

.gc-paginacao-btn {
    padding: 6px 16px !important;
    font-size: 12.5px !important;
}

.gc-paginacao-info {
    font-size: 12.5px;
    color: var(--text-muted);
}

.gc-lista-linha:last-child {
    border-bottom: none;
}

/* Larguras de coluna SEMPRE em px fixo (nunca "auto") -- cada linha é
   o seu próprio grid (uma <div> por linha, não uma tabela HTML de
   verdade), então "auto" faz cada linha calcular a largura da coluna
   com base no PRÓPRIO conteúdo dela (ex: uma linha com 2 botões de
   ação vs. uma linha sem nenhum) -- colunas de linhas diferentes (e
   do cabeçalho) ficavam com larguras diferentes uma da outra, dando
   a impressão de tabela desalinhada/torta. Só a 1ª coluna usa fr
   (com piso em px), que é seguro (distribuição de espaço livre não
   depende do conteúdo, só da largura do container inteiro). */
.gc-grade-clientes {
    display: grid;
    /* Coluna "Etapa" em 190px (era 160px) -- "Aguardando implantação"
       (02/10/2026) precisa de ~177px numa linha só com o padding do
       badge; com menos que isso o texto quebra em 2 linhas e o badge
       (justify-self:start, tamanho calculado a partir do max-content
       ANTES de quebrar) ficava largo igual a coluna inteira, com muito
       mais espaço sobrando nas laterais do texto que os outros badges
       dessa mesma lista -- confirmado medindo a largura real do texto
       renderizado (176.75px). */
    grid-template-columns: minmax(160px, 1.3fr) 140px 140px 120px 190px 130px 100px;
    gap: 14px;
}

/* Histórico de assinaturas dentro do detalhe de 1 cliente (admin) --
   Plano | Valor | Ciclo | Início | Fim | Usuários extra | Consumo
   extra | Status | Opções (Editar, nas ativas/agendadas, ou
   Visualizar, nas encerradas -- por isso essa coluna é um pouco mais
   larga que as outras curtas, "Visualizar" não cabe em 90px) | Upgrade
   (coluna própria, separada de Opções -- só a assinatura ATIVA tem
   botão, as demais mostram "—", 22/09/2026, pedido do usuário). Soma
   das colunas fixas passa de 950px -- numa tela/zoom mais estreito
   isso não cabe, e sem rolagem própria a tabela empurrava a PÁGINA
   inteira pra ficar mais larga que a tela (bug relatado pelo usuário,
   23/09/2026: coluna "Upgrade" ficava cortada pra fora, só dava pra
   ver dando zoom out). #cliente-assinatura-atual (onde essa grid é
   montada, ver renderizarAssinaturasCliente em app.js) ganha rolagem
   horizontal PRÓPRIA em vez disso -- mesmo padrão já usado em
   .planos-tabela-wrap. */
#cliente-assinatura-atual,
#me-plano-resumo {
    overflow-x: auto;
}

.gc-grade-assinaturas-cliente {
    display: grid;
    grid-template-columns: minmax(140px, 1.2fr) 90px 90px 100px 100px 110px 110px 100px 105px 150px;
    gap: 14px;
    /* Soma exata das colunas fixas (955px) + mínimo da 1ª (140px) +
       9 gaps de 14px -- trava a grid nesse tamanho pra ela nunca
       espremer o conteúdo, só rolar (ver overflow-x em
       #cliente-assinatura-atual acima). */
    min-width: 1221px;
}

/* "Meu Plano" (master, Configurações) -- só 1 linha (o plano atual),
   mas tabela igual as outras: Plano | Valor | Início | Fim | Usuários
   | Consumo | Status. Mesmo motivo de min-width + rolagem própria da
   grid acima (ver #me-plano-resumo). */
.gc-grade-meu-plano {
    display: grid;
    /* Coluna "Ações" a mais (130px) pro botão "Fazer upgrade", 22/09/2026. */
    grid-template-columns: minmax(140px, 1.2fr) 110px 100px 100px 150px 150px 100px 130px;
    gap: 14px;
    /* Soma exata das colunas fixas (840px) + mínimo da 1ª (140px) + 7
       gaps de 14px. */
    min-width: 1078px;
}

/* Itens adicionais (usuário/consumo extra) de uma assinatura -- mesma
   tabela usada no detalhe do cliente (admin) e em "Meu Plano" (master):
   Item | Valor | Contratado por | Data | Status | Ações. */
.gc-grade-itens-adicionais {
    display: grid;
    grid-template-columns: minmax(170px, 1.3fr) 110px 150px 100px 170px 100px;
    gap: 14px;
}

.gc-grade-assinaturas {
    display: grid;
    grid-template-columns: minmax(160px, 1.1fr) 150px 90px 100px 100px 110px 110px;
    gap: 14px;
}

.gc-grade-cobrancas {
    display: grid;
    /* Cliente é a única coluna flexível agora -- Plano tinha fr
       também antes (0.9fr) e ficava competindo espaço com o nome do
       cliente, apertando-o (nome de empresa longo quebrava em 2
       linhas toda hora); com largura fixa, Plano só usa o que
       precisa e sobra mais espaço de verdade pro nome do cliente. */
    grid-template-columns: minmax(200px, 1fr) 160px 90px 100px 100px 100px 235px;
    gap: 14px;
}

.gc-grade-planos {
    display: grid;
    grid-template-columns: minmax(160px, 1.3fr) 110px 120px 110px 110px 90px 100px 190px;
    gap: 14px;
}

/* Lista de usuários dentro do detalhe de 1 cliente (Gestão de
   Clientes) -- mais simples que as outras (só 1 cliente por vez, não
   precisa de coluna "Cliente"). */
.gc-grade-usuarios-cliente {
    display: grid;
    grid-template-columns: minmax(160px, 1.3fr) 150px 100px 90px 150px;
    gap: 14px;
}

/* Mesma lista, mas dentro de Configurações (self-service de um
   usuário master pros colegas da própria empresa) -- sem coluna
   "Master" (só o admin decide quem é master, ver
   .gc-grade-usuarios-cliente). */
.gc-grade-usuarios-empresa {
    display: grid;
    grid-template-columns: minmax(160px, 1.3fr) 150px 100px 150px;
    gap: 14px;
}

/* Tela Comercial (leads + trials pendentes) -- Empresa/CNPJ | Contato |
   Plano | Status | Responsável | Ação. */
.gc-grade-comercial {
    display: grid;
    grid-template-columns: minmax(180px, 1.3fr) 170px 130px 160px 130px 150px;
    gap: 14px;
}

/* Agenda de Tarefas -- checkbox | Tarefa | Data e hora | Empresa |
   Contato. */
.gc-grade-tarefas {
    display: grid;
    grid-template-columns: 30px minmax(140px, 1fr) 220px 220px 220px 110px;
    gap: 14px;
}

.gc-tarefa-titulo {
    font-weight: 700;
    color: var(--cor-primaria);
}

.tarefas-acoes-selecao {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--teal-soft);
    border-radius: var(--radius);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dark);
}

.tarefas-acoes-selecao .lead-link-marca {
    align-self: center;
    font-size: 13px;
}

.tarefas-acoes-selecao #tarefas-btn-excluir-selecionadas {
    color: var(--red);
}

/* Detalhe de 1 Lead -- topo (voltar + badge de status), cabeçalho
   (ícone + nome + CNPJ) e grid de 2 colunas (dados à esquerda,
   Atividades à direita). Mesmos tokens de cor do resto do app (sem
   copiar as cores azuis da referência que o usuário mandou, 19/09/2026). */
.lead-detalhe-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.lead-detalhe-cabecalho {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.lead-detalhe-avatar {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    background: var(--teal-soft);
    color: var(--teal-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lead-detalhe-avatar svg {
    width: 26px;
    height: 26px;
}

.lead-detalhe-cabecalho-info h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
}

.lead-detalhe-cabecalho-sub {
    margin: 2px 0 0;
    font-size: 13.5px;
    color: var(--text-muted);
}

.lead-detalhe-grid {
    display: grid;
    grid-template-columns: minmax(280px, 480px) 1fr;
    align-items: start;
    gap: 20px;
}

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

.lead-detalhe-coluna {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lead-detalhe-card {
    padding: 18px 20px;
}

.lead-detalhe-campos {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.lead-detalhe-campo label {
    display: block;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.lead-detalhe-campo p {
    margin: 0;
    font-size: 14.5px;
    color: var(--text-dark);
    word-break: break-word;
}

.lead-detalhe-campos-grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

/* Coluna do botão "Assinatura ativa" ao lado do Contato -- alinha o
   botão com o TEXTO do campo vizinho (não com o label), já que essa
   coluna não tem label nenhum. Pedido do usuário, 24/09/2026. */
.lead-detalhe-campo-acao {
    display: flex;
    align-items: flex-end;
}

/* Aviso de contexto do status atual (ex: "Lead cadastrado -- ainda não
   foi qualificado...") -- mesmo espírito do banner azul da referência,
   só que com --teal-soft/--teal-dark (tema do app) em vez de azul fixo. */
.lead-detalhe-aviso {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: var(--teal-soft);
    border-radius: var(--radius);
    color: var(--teal-dark);
}

.lead-detalhe-aviso svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.lead-detalhe-aviso strong {
    display: block;
    font-size: 14px;
    color: var(--text-dark);
}

.lead-detalhe-aviso p {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* "Responsável" / "Alterar status" -- 1 linha compacta dentro de 1
   card só (não mais 2 cards grandes, 20/09/2026), lado a lado; cada
   bloco tem seu próprio "mini título" acima do controle, então os
   controles (botão Assumir / select de status) acabam alinhados na
   mesma altura visual mesmo sem estar no mesmo <div> de linha. */
.lead-detalhe-resp-status-linha {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .lead-detalhe-resp-status-linha {
        gap: 16px;
    }
}

.lead-detalhe-resp-bloco,
.lead-detalhe-status-bloco {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lead-detalhe-resp-bloco {
    flex: 1 1 160px;
}

.lead-detalhe-status-bloco {
    flex: 1 1 220px;
}

/* Botão "Confirmar pagamento" sozinho no bloco (só título + texto de
   ajuda acima dele) -- centralizado fica melhor que grudado na
   esquerda, diferente do bloco de link (input + botão lado a lado,
   esses continuam esticando a linha toda). Pedido do usuário,
   24/09/2026. */
#lead-btn-confirmar-pagamento-manual {
    align-self: center;
}

.lead-detalhe-mini-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.lead-detalhe-mini-titulo svg {
    width: 15px;
    height: 15px;
    /* Cor de marca (não fixa) -- é só um marcador decorativo ao lado
       do título, nunca um indicador de status (ver comentário de
       --cor-primaria no :root). Corrigido, 25/09/2026: estava em
       --teal-dark fixo, não acompanhava a cor de marca do usuário. */
    color: var(--cor-primaria);
    flex-shrink: 0;
}

.lead-detalhe-resp-controle {
    display: flex;
    align-items: center;
}

.lead-detalhe-resp-controle .btn svg {
    width: 14px;
    height: 14px;
}

/* Link "Alterar responsável" -- cor da marca, sem fundo/borda (texto
   simples que age como link), abre o select de reatribuição embaixo. */
.lead-link-marca {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--teal-dark);
    cursor: pointer;
}

.lead-link-marca:hover {
    text-decoration: underline;
}

.lead-detalhe-resp-select-linha {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lead-detalhe-resp-select-linha select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-dark);
}

.lead-detalhe-status-controle {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Link de pagamento (Stripe) -- input readonly só pra poder selecionar/
   copiar o texto, botão "Copiar link" ao lado. 22/09/2026. */
.lead-link-pagamento-linha {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lead-link-pagamento-linha input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12.5px;
    color: var(--text-muted);
    background: var(--bg);
}

.lead-detalhe-status-controle .lead-status-select-wrap {
    flex: 1 1 auto;
}

/* Sem o botão "Salvar" do lado (removido -- mudar o select já dispara
   a ação, ver criarControladorStatusNegocio em app.js, 22/09/2026), o
   select ganha o espaço todo pra caber a opção mais comprida
   ("Aguardando contato") sem cortar -- min-width garante isso mesmo
   quando o container ainda está meio apertado. */
.lead-status-select-wrap-largo select {
    min-width: 190px;
}

/* "Converter em lead"/"Novo negócio" ficavam grandes ao lado do badge
   "Trial"/"Expirado" (.admin-sistema-badge, 11px/padding 2px 8px) --
   mesmo tamanho do badge agora, só um pouco mais de padding horizontal
   pra continuar clicável como botão (pedido do usuário, 21/09/2026). */
#cliente-negocio-btn-acao {
    font-size: 11px;
    padding: 3px 10px;
    height: auto;
}

.btn-xs {
    padding: 6px 14px;
    font-size: 12.5px;
}

/* Botões (Assumir/Salvar/Cancelar/Criar assinatura) da tela de
   detalhe do Lead -- altura fixa ~31px, estavam muito altos
   (20/09/2026). Escopado só nessa tela pra não afetar .btn-sm/.btn-xs
   usados em outras telas do app. */
#gc-tela-comercial-detalhe .btn {
    height: 31.2px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Botão "Novo negócio" no canto superior direito do card de Negócios
   do cliente (dentro do detalhe de um lead/cliente) -- cantos
   levemente arredondados, preto/branco (pedido do usuário, 01/10/2026).
   Mesma função (criarNovoNegocioEAbrirAssinatura) dos outros botões
   "Novo negócio" já existentes -- ver app.js. */
.lead-negocios-card-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.lead-negocios-btn-novo {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--text-dark);
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.lead-negocios-btn-novo:hover {
    background: #000;
}

.lead-detalhe-card-titulo {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.lead-detalhe-card-titulo svg {
    width: 16px;
    height: 16px;
    color: var(--teal-dark);
    flex-shrink: 0;
}

/* Select de status com bolinha colorida (cor conforme o status, ver
   CORES_DOT_STATUS_LEAD em app.js) + seta customizada, no lugar da
   seta padrão do navegador -- visual pedido pelo usuário, 19/09/2026,
   com os tons que já usamos (sem copiar as cores da referência). */
.lead-status-select-wrap {
    position: relative;
}

.lead-status-select-dot {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
}

.lead-status-select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 10px 34px 10px 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 400;
    color: var(--text-dark);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
}

.lead-detalhe-responsavel-texto {
    margin: 0;
    font-size: 14px;
    color: var(--text-dark);
}

.lead-detalhe-rodape {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0 4px;
}

.lead-detalhe-rodape svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Caixa de "+ Nova atividade" -- textarea sempre visível (sem popup),
   contador de caracteres + Cancelar/Salvar alinhados embaixo. */
.lead-nova-atividade {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    margin: 12px 0 20px;
}

.lead-nova-atividade textarea {
    width: 100%;
    min-height: 70px;
    border: none;
    resize: vertical;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-dark);
    outline: none;
    box-sizing: border-box;
}

.lead-nova-atividade-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.lead-nova-atividade-rodape span {
    font-size: 12px;
    color: var(--text-muted);
}

.lead-nova-atividade-botoes {
    display: flex;
    gap: 8px;
}

/* Data + "Marcar como realizada" -- combinado com o usuário,
   19/09/2026: base pro futuro fluxo de agenda/tarefas vencidas, por
   enquanto só guarda os 2 campos. */
.lead-nova-atividade-opcoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.lead-nova-atividade-datahora {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lead-nova-atividade-data {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lead-nova-atividade-data label {
    font-size: 12.5px;
    color: var(--text-muted);
}

.lead-nova-atividade-data input[type="date"],
.lead-nova-atividade-data input[type="time"] {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-dark);
    background: #fff;
}

.lead-nova-atividade-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
}

.lead-nova-atividade-check input {
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* Timeline de atividades -- ícone colorido (reaproveita .processo-icone-*)
   + título/descrição/data, com uma linha conectando um item ao próximo. */
.lead-timeline-item {
    display: flex;
    gap: 14px;
    position: relative;
    padding-bottom: 22px;
}

.lead-timeline-item:last-child {
    padding-bottom: 0;
}

.lead-timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 36px;
    bottom: 0;
    width: 2px;
    background: var(--border);
}

.lead-timeline-icone {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

.lead-timeline-icone svg {
    width: 18px;
    height: 18px;
}

.lead-timeline-conteudo {
    padding-top: 6px;
    /* Sem isso, uma descrição com uma URL longa sem espaços (ex: link
       de pagamento do Stripe) força esse item do flex a crescer pra
       caber o texto inteiro numa linha só, empurrando a coluna inteira
       (e a de "Responsável"/"Dados do Lead" ao lado) pra fora da tela.
       Bug real, 25/09/2026. */
    min-width: 0;
    flex: 1;
}

.lead-timeline-titulo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.lead-timeline-titulo strong {
    font-size: 14px;
    color: var(--text-dark);
}

.lead-timeline-data {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.lead-timeline-descricao {
    margin: 2px 0 0;
    font-size: 13.5px;
    color: var(--text-muted);
    /* Atividades automáticas podem vir com \n (ex: "negocio_fechado"
       com plano/preço padrão/preço fechado/desconto, 22/09/2026) --
       sem isso os \n eram engolidos e tudo virava uma linha só. */
    white-space: pre-line;
    /* Link de pagamento (URL longa e sem espaço) tem que quebrar
       dentro do card, nunca estourar a largura -- ver
       .lead-timeline-conteudo acima. */
    overflow-wrap: anywhere;
}

/* Link de pagamento dentro de uma atividade -- colapsado atrás de "Ver
   link" por padrão (ver formatarDescricaoAtividade em app.js), só
   expande a URL enorme quando alguém realmente precisa dela. */
.lead-atividade-link-expandido {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
}

.lead-atividade-link-expandido a {
    word-break: break-all;
    color: var(--teal-dark);
}

/* Atividade manual "a ser realizada" (pendente/vencida) -- selo +
   botão Editar (só essas voltam pra caixa de novo, 19/09/2026). */
.lead-timeline-selo {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.lead-timeline-selo-pendente {
    background: #fef3c7;
    color: var(--amber);
}

.lead-timeline-selo-vencida {
    background: var(--red-soft);
    color: var(--red);
}

.lead-timeline-editar {
    background: none;
    border: none;
    color: var(--teal-dark);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-top: 4px;
}

.lead-timeline-editar:hover {
    text-decoration: underline;
}

.lead-timeline-excluir {
    color: var(--red);
    margin-left: 14px;
}

.lead-timeline-ver-todas {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px;
    background: none;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--teal-dark);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.lead-timeline-ver-todas:hover {
    background: var(--teal-soft);
}

/* Tela "Logs" (admin, menu lateral próprio -- não é dentro de Gestão
   de Clientes, mas reaproveita a mesma família de classes de lista). */
.gc-grade-logs {
    display: grid;
    grid-template-columns: minmax(160px, 1.2fr) 170px 110px 150px 110px 100px;
    gap: 14px;
}

.gc-lista-linha-principal {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 13.5px;
}

.gc-lista-linha-sub {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
}

.gc-lista-linha-coluna {
    font-size: 13px;
    color: var(--text-muted);
}

.gc-lista-linha-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Botões dentro das listas (Marcar como paga/Cancelar/Editar/
   Desativar/Acessar) -- .btn-sm já é "pequeno" pro resto do site, mas
   ainda grande pra caber 2 numa coluna de tabela sem quebrar linha. */
.gc-btn-lista {
    /* !important nos dois -- SEM isso, ".btn" (padding:12px 22px,
       especificidade igual e declarado DEPOIS desta regra no
       arquivo) ganhava a "queda de braço" do CSS pra botões
       "btn btn-success gc-btn-lista" (ex: "Marcar como paga"), MAS
       NÃO pra "btn btn-desativar gc-btn-lista" (ex: "Cancelar"), já
       que ".btn-desativar" tem seu próprio padding pequeno -- por
       isso só o botão verde ficava visivelmente mais alto que o
       vermelho ao lado, mesmo os dois tendo essa mesma classe. */
    padding: 5px 10px !important;
    font-size: 11.5px !important;
    /* Largura mínima igual pra todo mundo -- sem isso "Pagar" (curto)
       e "Cancelar"/"Desativar" (mais longos) ficam com tamanhos bem
       diferentes um do outro, mesmo com o mesmo padding/fonte (botão
       sempre encolhe/cresce até caber o texto). */
    min-width: 74px;
    text-align: center;
    /* .btn é display:inline-flex (ver embaixo) -- text-align não tem
       efeito nenhum num flex container, precisa de justify-content
       pra centralizar de verdade. Sem isso, um texto mais curto que
       os 74px de largura mínima (ex: "Acessar") ficava encostado à
       esquerda em vez de centralizado -- só não aparecia nos botões
       cujo próprio texto já preenche a largura toda (ex: "Cancelar"). */
    justify-content: center;
}

/* Variante só-ícone de .gc-btn-lista (ex: "Gerar link" na tela de
   Cobranças) -- sem o min-width/padding largo pensado pra texto, só o
   suficiente pra caber o SVG centralizado; usa `title` no <button> pro
   navegador mostrar o texto completo num tooltip nativo ao passar o
   mouse. Pedido do usuário, 28/09/2026. */
.gc-btn-lista-icone {
    min-width: 0 !important;
    padding: 5px 8px !important;
}

.gc-btn-lista-icone svg {
    width: 15px;
    height: 15px;
}

/* Usuários/Consumo (lista de Empresas): "usado / limite" + barrinha
   de progresso com cor progressiva (verde -> vermelho, ver
   corBarraProgresso() em app.js, que define a cor via style inline). */
.gc-uso {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gc-uso-numeros {
    font-size: 12.5px;
    color: var(--text-dark);
}

.gc-uso-barra {
    width: 100%;
    max-width: 120px;
    height: 6px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}

.gc-uso-barra-preenchida {
    height: 100%;
    border-radius: 999px;
    transition: width 0.2s;
}

.gc-uso-vazio {
    font-size: 12.5px;
    color: var(--text-muted);
}

.admin-catalogo-novo {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* Só no form de Planos (reaproveita .admin-catalogo-novo, mas o
   catálogo de Sistemas e o de cancelar assinatura também usam essa
   classe e não pediram esse respiro) -- sem isso, o formulário
   (criar OU editar) ficava colado na última linha da lista de planos
   logo acima, difícil de perceber onde uma coisa termina e a outra
   começa. */
#planos-form {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

/* Força o item a ocupar a linha toda dentro do flex-wrap de
   .admin-catalogo-novo -- usado no título do formulário e nos textos
   "Permissões padrão"/"Limites padrão", pra sempre começarem (e
   empurrarem o que vem depois pra) uma linha nova, em vez de flutuar
   no meio dos inputs/checkboxes vizinhos. */
.admin-catalogo-quebra {
    flex-basis: 100%;
}

.admin-catalogo-form-titulo {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
}

/* Os 2 campos de limite padrão (usuários/consumo) -- bem mais
   estreitos que os outros campos do form (140px), só cabe um número
   curto mesmo. Só WIDTH -- "flex: 0 0 70px" (flex-basis) aqui foi bug:
   o pai (.admin-catalogo-limite-grupo) é flex-direction:column, então
   flex-basis controla ALTURA nesse eixo, não largura -- resultava num
   quadrado 70x70 em vez de manter a altura padrão dos outros campos. */
.admin-catalogo-limite-input {
    flex: 0 0 auto !important;
    width: 70px !important;
    min-width: 70px !important;
}

/* Mesma ideia, só mais larga -- pros campos de "Valor unitário"
   (.campo-moeda) dos itens adicionais: 70px não sobra espaço pro "R$"
   + os dígitos (ver .campo-moeda, padding-left:36px reservado pro
   prefixo). */
.admin-catalogo-valor-input {
    flex: 0 0 auto !important;
    width: 100px !important;
    min-width: 100px !important;
}

/* Rótulo ("Usuários"/"Consumo") em cima de cada input de limite --
   sem isso os dois campos de 70px ficavam só com número, sem dar pra
   saber qual é qual de relance. */
.admin-catalogo-limite-grupo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-catalogo-limite-grupo label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

/* "Salvar"/"Cancelar" alinhados à direita, numa linha só deles (ver
   .admin-catalogo-quebra) -- antes ficavam grudados nos campos de
   limite, alinhados à esquerda junto com o resto do form. */
.admin-catalogo-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

.admin-catalogo-novo input,
.admin-catalogo-novo select {
    /* "flex: 1 1 140px" (não "flex: 1", que é flex-basis:0%) --
       confirmado em teste isolado que flex-basis:0% faz um item com
       padding/conteúdo diferente dos outros (ex: o campo de valor,
       com padding-left maior pro prefixo "R$") ficar com uma largura
       final BEM menor que os campos vizinhos, mesmo todos tendo o
       mesmo flex-grow e o mesmo min-width explícito. Com flex-basis
       igual ao min-width, os 4 campos ficam sempre do mesmo tamanho. */
    flex: 1 1 140px;
    min-width: 140px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13.5px;
}

.admin-catalogo-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

.admin-catalogo-checkbox input[type="checkbox"],
.admin-catalogo-checkbox input[type="radio"] {
    /* Sem isso, a regra geral ".admin-catalogo-novo input" (flex:1 +
       min-width:140px + padding) também pega o checkbox/radio aqui
       dentro (é descendente), esticando a caixinha de marcar e
       empurrando o texto do label bem longe dela. */
    width: auto;
    flex: none;
    min-width: 0;
    padding: 0;
}

.admin-usuario-editor {
    margin-top: 20px;
    padding: 20px;
    background: var(--bg);
    border-radius: 10px;
}

/* Detalhe de Cliente é conteúdo principal da tela (não um sub-form
   dentro de outro card, como os demais usos de .admin-usuario-editor)
   -- fica em branco, como o resto das telas do hub. */
#cliente-editor {
    background: #fff;
}

/* Card único com 2 metades separadas por uma linha vertical (Dados de
   contato | Status/Etapa/Observações) -- Atividades fica FORA desse
   card, logo abaixo, ocupando a largura toda (20/09/2026). */
.cliente-detalhe-duas-colunas-card {
    display: flex;
    gap: 24px;
}

.cliente-detalhe-coluna-interna {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cliente-detalhe-coluna-interna .field-row {
    margin-bottom: 0;
}

.cliente-detalhe-divisor-vertical {
    width: 1px;
    align-self: stretch;
    background: var(--border);
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .cliente-detalhe-duas-colunas-card {
        flex-direction: column;
        gap: 16px;
    }
    .cliente-detalhe-divisor-vertical {
        width: 100%;
        height: 1px;
    }
}

/* "Usuários" é a última seção da tela de detalhe do Cliente -- quando
   "Gerar acesso" (Tela Comercial) abre o formulário de novo usuário e
   rola até lá (ver scrollParaElementoComOffset em app.js), sem um
   respiro embaixo não sobra conteúdo suficiente pra permitir rolar o
   título até o topo da viewport (o navegador trava no fim do
   documento antes de chegar lá, sem poder "estourar" o fim da
   página). Fica sempre presente (não só na hora do scroll) -- ligar
   e desligar isso bem na hora do scroll faria o navegador encolher a
   página de novo e derrubar a posição rolada assim que a classe saísse. */
#gc-tela-cliente-detalhe {
    padding-bottom: 420px;
}

.admin-usuario-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.admin-usuario-nome {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-dark);
}

.admin-usuario-login {
    font-size: 13px;
    color: var(--text-muted);
    margin-left: 8px;
}

.admin-usuario-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-usuario-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 10px;
    border-radius: 999px;
    background: #dbeafe;
    color: var(--blue);
}

.admin-usuario-salvo {
    margin: 10px 0 0 0;
    font-size: 13px;
    color: var(--teal-dark);
    font-weight: 600;
}

/* toggle switch */
.toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    /* Sem isso, um texto longo ao lado (ver .toggle-row span) espreme
       o switch pra caber no container -- flex-shrink:0 mantém o
       tamanho fixo e deixa só o texto quebrar linha se precisar. */
    flex-shrink: 0;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-track {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.2s;
}

.toggle-track::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.toggle input:checked + .toggle-track {
    background: var(--cor-primaria);
}

.toggle input:checked + .toggle-track::before {
    transform: translateX(20px);
}

/* Versão compacta do toggle, pra caber dentro de uma célula de lista
   (ex: coluna "Master" em Usuários do cliente) sem dominar a linha. */
.toggle-inline-lista {
    width: 34px;
    height: 19px;
}

.toggle-inline-lista .toggle-track::before {
    width: 13px;
    height: 13px;
}

.toggle-inline-lista input:checked + .toggle-track::before {
    transform: translateX(15px);
}

/* ---------- BUTTONS ---------- */

.oculto {
    display: none !important;
}

/* ================= HOME — VITRINE (seções alternadas, tipo landing page) ================= */

.boas-vindas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

/* Fundo escuro por trás de toda a vitrine — os cards brancos (seções
   1 e 3) e o card já escuro (seção 2) flutuam por cima dele. Estende
   um pouco além do fim da última seção (padding-bottom). Usa um
   pseudo-elemento (não box-shadow) porque precisa do MESMO gradiente
   do hero-band — box-shadow só aceita cor sólida. */
.vitrine-fundo-escuro {
    position: relative;
    padding: 16px 0 32px 0;
}

.vitrine-fundo-escuro::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    background: var(--navy);
    z-index: -1;
}

.vitrine {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.vitrine-secao {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
}

.vitrine-secao:last-child {
    border-bottom: none;
}

.vitrine-secao.invertida {
    flex-direction: row-reverse;
}

/* Seção de destaque escuro (ex: Relatório de Auditoria) — o fundo
   "estoura" até a borda da tela usando box-shadow + clip-path, sem
   mudar a largura/posição real da div. O conteúdo continua exatamente
   alinhado com o resto da página (mesmo max-width do .container). */
/* O fundo escuro dessa seção agora vem do wrapper .vitrine-fundo-escuro
   (que envolve as 3 seções) — aqui só ajusta o espaçamento interno. */
.vitrine-secao-destaque {
    padding: 32px 0;
    border-bottom: none;
}

.vitrine-secao-destaque .vitrine-conteudo p {
    color: #fff;
}

.vitrine-secao-destaque .vitrine-imagem {
    color: #cbd5e1;
}

/* Só mostra a caixinha tracejada com fundo enquanto NÃO tem imagem de
   verdade (placeholder "Imagem em breve") — some completamente assim
   que uma <img> real for colocada dentro. */
.vitrine-secao-destaque .vitrine-imagem:not(:has(img)) {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.05);
}

.vitrine-conteudo {
    flex: 1;
    min-width: 0;
}

/* Afasta o texto da borda externa do container, aumentando o vão em
   relação à imagem — a direção do respiro depende de qual lado o
   texto está: esquerda numa seção normal, direita numa invertida. */
.vitrine-secao:not(.invertida) .vitrine-conteudo {
    padding-left: 32px;
}

.vitrine-secao.invertida .vitrine-conteudo {
    padding-right: 32px;
}

.vitrine-barra {
    width: 80px;
    height: 4px;
    background: var(--cor-primaria);
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
}

.vitrine-conteudo h3 {
    margin: 0 0 12px 0;
    font-size: 30px;
    font-weight: 700;
    color: var(--text-dark);
}

.destaque-verde {
    color: var(--cor-primaria);
}

/* dentro da seção escura, o título fica branco por padrão — só a
   palavra destacada (.destaque-verde) continua verde */
.vitrine-secao-destaque .vitrine-conteudo h3 {
    color: #fff;
}

.vitrine-secao-destaque .vitrine-conteudo h3 .destaque-verde {
    color: var(--cor-primaria);
}

/* Card branco com cantos arredondados — usado nas seções sobre fundo
   claro (não na seção escura, que já tem seu próprio destaque). */
.vitrine-secao-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.10);
    padding: 8px 40px;
    border-bottom: none;
    margin: 12px 0;
    /* Distância fixa da borda REAL da tela (24px), não do container —
       assim fica igual em qualquer tamanho de monitor, não só relativa
       ao max-width do container. */
    position: relative;
    left: 50%;
    width: calc(100vw - 48px);
    margin-left: calc(-50vw + 24px);
}

.vitrine-conteudo p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-muted);
}

.vitrine-imagem {
    flex: 1;
    aspect-ratio: 8 / 3;
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 13px;
}

.vitrine-imagem img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    border-radius: var(--radius);
}

/* Variante pra imagens mais "quadradas" (ex: mockup de card), que não
   cabem bem na proporção larga padrão (12:3) — usa uma proporção mais
   próxima de 4:3 e aproveita mais espaço dentro do container. */
.vitrine-imagem-alta {
    aspect-ratio: 8 / 3;
}

.vitrine-imagem-alta img {
    width: 95%;
    height: 95%;
}

/* Proporção 16:9 — pra imagens que já nascem nesse formato (ex: mockups
   gerados por IA), evitando que a caixa force um formato diferente do
   real e acabe encolhendo a imagem (com perda de nitidez) */
.vitrine-imagem-larga {
    aspect-ratio: 16 / 9;
}

.vitrine-imagem-larga img {
    width: 98%;
    height: 98%;
}

/* Deixa a imagem menor DENTRO da mesma caixa (não muda a proporção
   do container, só o tamanho da imagem dentro dele). */
.vitrine-imagem-compacta img {
    width: 50%;
    height: 50%;
}

.vitrine-imagem-85 img {
    width: 85%;
    height: 85%;
}

/* placeholder visual enquanto não há imagem real — some sozinho quando
   você colocar uma <img> de verdade dentro de .vitrine-imagem */
.vitrine-imagem:empty::before {
    content: "Imagem em breve";
}

.vitrine-imagem:has(img) {
    border: none;
    background: transparent;
}

/* =========================================================
   ANIMAÇÃO — FLUXO DE DADOS
   ========================================================= */

.vitrine-fluxo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-shrink: 0;
    width: auto;
    margin-top: 24px;
}

.vitrine-fluxo span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cor-primaria);
    opacity: 0.25;
}

.vitrine-fluxo span:nth-child(1) { animation: dot-fluxo-1 1.9s ease-in-out infinite; }
.vitrine-fluxo span:nth-child(2) { animation: dot-fluxo-2 1.9s ease-in-out infinite; }
.vitrine-fluxo span:nth-child(3) { animation: dot-fluxo-3 1.9s ease-in-out infinite; }
.vitrine-fluxo span:nth-child(4) { animation: dot-fluxo-4 1.9s ease-in-out infinite; }
.vitrine-fluxo span:nth-child(5) { animation: dot-fluxo-5 1.9s ease-in-out infinite; }

@keyframes dot-fluxo-1 {
    0%, 100% { opacity: 1; transform: scale(1.3); }
    8%, 92%  { opacity: 0.25; transform: scale(1); }
}

@keyframes dot-fluxo-2 {
    0%, 100% { opacity: 0.25; transform: scale(1); }
    12%      { opacity: 1; transform: scale(1.3); }
    20%, 80% { opacity: 0.25; transform: scale(1); }
    88%      { opacity: 1; transform: scale(1.3); }
}

@keyframes dot-fluxo-3 {
    0%, 100% { opacity: 0.25; transform: scale(1); }
    24%      { opacity: 1; transform: scale(1.3); }
    32%, 68% { opacity: 0.25; transform: scale(1); }
    76%      { opacity: 1; transform: scale(1.3); }
}

@keyframes dot-fluxo-4 {
    0%, 100% { opacity: 0.25; transform: scale(1); }
    36%      { opacity: 1; transform: scale(1.3); }
    44%, 56% { opacity: 0.25; transform: scale(1); }
    64%      { opacity: 1; transform: scale(1.3); }
}

@keyframes dot-fluxo-5 {
    0%, 100%   { opacity: 0.25; transform: scale(1); }
    48%, 52%   { opacity: 1; transform: scale(1.3); }
}

@media (max-width: 800px) {
    .vitrine-secao,
    .vitrine-secao.invertida {
        flex-direction: column;
        gap: 24px;
        padding: 32px 0;
    }

    /* O card branco (.vitrine-secao-card) usa a largura da tela inteira
       (não depende mais do .container pra respiro lateral) -- sem
       padding horizontal próprio aqui, o texto colava na borda direita
       da tela, já que a regra acima zera o padding herdado de
       .vitrine-secao (mesma especificidade, .vitrine-secao-card vem
       antes no arquivo). */
    .vitrine-secao-card {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Nesse layout empilhado (coluna), o respiro assimétrico
       esquerda/direita do texto (pensado pro gap com a imagem ao lado,
       no layout de desktop) não faz sentido -- some, ficando só o
       padding do card acima, igual dos dois lados. */
    .vitrine-secao:not(.invertida) .vitrine-conteudo,
    .vitrine-secao.invertida .vitrine-conteudo {
        padding-left: 0;
        padding-right: 0;
    }

    /* Só os cards brancos não-invertidos (Automação, Relatório) --
       empurra o texto um pouco pra direita, pra não ficar tão longe
       da imagem (que fica embaixo, ou da imagem do próximo card),
       pedido do usuário, 18/09/2026. Não precisa alinhar exato, só
       aproximar um pouco. */
    .vitrine-secao-card:not(.invertida) .vitrine-conteudo {
        padding-left: 16px;
    }
}

/* Envolve barrinha+título+subtítulo+cards num filho SÓ do
   .boas-vindas (flex column, gap:32px entre CADA filho direto) --
   sem isso, cada um desses 4 elementos separados ganhava mais 32px de
   gap vindo do pai, por cima da margem própria, e reduzir a margem
   dos elementos não tinha efeito visível nenhum (bug real, achado
   16/09/2026). Com o wrapper, só sobra 1 gap (antes/depois de toda
   essa seção), e o espaçamento interno passa a ser só o das margens
   abaixo mesmo. width:100% pelo mesmo motivo do .vitrine-stats-
   divisor (hr) -- filho bloco sem largura própria encolhe pro
   conteúdo num pai com align-items:center. */
.vitrine-stats-secao {
    width: 100%;
}

.vitrine-stats-titulo {
    text-align: center;
    font-size: 34px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 8px 0 6px;
}

.vitrine-stats-subtitulo {
    text-align: center;
    font-size: 15px;
    color: var(--text-muted);
    max-width: 460px;
    line-height: 1.4;
    margin: 0 auto 16px;
}

.vitrine-stats {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
    flex-wrap: wrap;
}

.vitrine-stat {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 18px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px 34px;
    box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.12);
    width: 340px;
}

/* Blob decorativo sutil, sangrando por um canto do card (referência
   que o usuário mandou, 16/09/2026) -- puro CSS, sem imagem. */
.vitrine-stat::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--cor-primaria-suave);
    opacity: 0.6;
    bottom: -60px;
    right: -60px;
    z-index: 0;
}

.vitrine-stat-icone,
.vitrine-stat-texto {
    position: relative;
    z-index: 1;
}

.vitrine-stat-icone {
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cor-primaria-suave);
    border-radius: 50%;
    color: var(--cor-primaria);
}

.vitrine-stat-icone svg {
    width: 30px;
    height: 30px;
}

.vitrine-stat-texto {
    display: flex;
    flex-direction: column;
}

.vitrine-stat-numero {
    font-size: 36px;
    font-weight: 900;
    color: var(--cor-primaria);
    line-height: 1.2;
}

.vitrine-stat-label {
    font-size: 15px;
    color: var(--text-muted);
}

@media (max-width: 720px) {
    .vitrine-stats {
        gap: 16px;
    }
    .vitrine-stat {
        width: 100%;
        max-width: 340px;
    }
}

/* Faixa clara entre a vitrine de recursos (fundo escuro) e a vitrine
   de planos (fundo escuro) -- ícone + texto de um lado, divisor, botão
   do outro, tudo centralizado como um grupo só (sem esticar até as
   bordas do container -- pedido explícito do usuário). Substituiu o
   antigo botão solto "Já é cliente? Acesse →" -- combinado com o
   usuário em 14/09/2026. */
.ja-cliente-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 100%;
    max-width: 760px;
    padding: 32px 40px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.ja-cliente-cta-icone {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--teal-soft);
    color: var(--teal-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ja-cliente-cta-icone svg {
    width: 24px;
    height: 24px;
}

.ja-cliente-cta-principal {
    display: flex;
    align-items: center;
    gap: 24px;
}

.ja-cliente-cta-texto {
    text-align: left;
}

.ja-cliente-cta-titulo {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 2px;
}

.ja-cliente-cta-subtitulo {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0;
}

.ja-cliente-cta-divisor {
    width: 1px;
    align-self: stretch;
    background: var(--border);
}

.ja-cliente-cta-btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 14px 28px;
    font-size: 15px;
    box-shadow: 0 8px 20px -4px rgba(5, 150, 105, 0.35);
}

/* No mobile empilha: ícone+texto numa linha em cima, botão embaixo
   (ocupando a largura inteira) -- pedido explícito do usuário em
   16/09/2026, revendo o comportamento anterior de manter tudo numa
   linha só (que ficava espremido demais, ver captura de tela). */
@media (max-width: 480px) {
    .ja-cliente-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 20px;
    }
    .ja-cliente-cta-principal {
        gap: 14px;
    }
    .ja-cliente-cta-icone {
        width: 40px;
        height: 40px;
    }
    .ja-cliente-cta-icone svg {
        width: 20px;
        height: 20px;
    }
    .ja-cliente-cta-texto {
        flex: 1;
        min-width: 0;
    }
    .ja-cliente-cta-titulo {
        font-size: 14.5px;
    }
    .ja-cliente-cta-subtitulo {
        font-size: 12px;
    }
    .ja-cliente-cta-divisor {
        display: none;
    }
    .ja-cliente-cta-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
        font-size: 13.5px;
    }
}

/* ================= VITRINE DE PLANOS (home) ================= */
/* Catálogo real (mesmos planos/preços/limites de Gestão de Clientes →
   Planos, ver home() em app_web_nuvem.py) -- cores só as já definidas
   em :root (nenhuma cor nova só pra essa seção), mesma fonte/tipografia
   do resto do site. */

/* Fundo escuro de ponta a ponta (mesma técnica/cor já usada em
   .rodape-home e nas seções invertidas da vitrine acima -- box-shadow
   gigante + clip-path, não muda a largura/posição real da div, só
   "estoura" o fundo até a borda da tela). Nada de card/borda
   arredondada aqui -- é uma faixa, não uma caixa flutuando no cinza. */
.planos-vitrine {
    /* Sem margin-top próprio -- só o gap:32px do .boas-vindas (flex),
       igual ao espaço entre a seção escura de cima e o botão "Começar
       a usar". Com os dois lados iguais, o botão fica centralizado na
       faixa clara entre os dois fundos escuros. */
    text-align: center;
    max-width: 1180px;
    width: 100%;
    padding: 48px 24px 40px;
    box-shadow: 0 0 0 100vmax var(--navy);
    clip-path: inset(0 -100vmax);
    background: var(--navy);
    font-family: "Manrope", "Segoe UI", "Inter", -apple-system, sans-serif;
}

.planos-vitrine-titulo {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
}

.planos-vitrine-subtitulo {
    font-size: 15px;
    color: #94a3b8;
    margin: 0 0 20px;
}

/* Só um informativo agora (16/09/2026) -- não tem mais toggle
   funcional trocando mensal/anual (a vitrine parou de mostrar valor
   nenhum, então não tem preço pra comparar entre os dois ciclos). */
.planos-toggle-info {
    display: inline-block;
    background: var(--navy-light);
    color: var(--teal);
    font-size: 13.5px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    margin: 0 0 20px;
}

/* Tabela comparativa (recursos à esquerda, um "check" ou "–" por
   plano em cada linha) -- grid só, sem <table> de verdade (mais fácil
   de destacar a coluna do PRO com borda contínua). Um grid SÓ (não um
   por coluna) é o que mantém as linhas alinhadas entre a coluna de
   recursos e as 4 de planos -- os filhos entram em ordem "de linha"
   (rótulo, depois os 4 valores), o grid quebra sozinho a cada 5.
   padding-top dá espaço pro selo "Mais escolhido" (que fica pra fora
   do cabeçalho do plano, via position:absolute) e pra leve elevação
   do hover -- sem isso, overflow-x:auto força overflow-y:auto junto
   (regra do CSS: só um eixo "visible" não é permitido) e os dois
   acabavam cortados na borda de cima do quadro rolável. */
.planos-tabela-wrap {
    overflow-x: auto;
    padding-top: 26px;
}

.planos-tabela {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(150px, 1fr));
    text-align: left;
    min-width: 900px;
}

.planos-tabela-celula {
    padding: 14px 16px;
    border-bottom: 1px solid var(--navy-light);
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    display: flex;
    align-items: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

/* Coluna de recursos -- caixa própria com borda clara envolvendo o
   rótulo "RECURSOS" + as linhas, igual às colunas de plano (mesmo
   truque de borda contínua colando célula com célula). O topo da
   caixa fica um pouco mais baixo que o topo dos cabeçalhos de plano
   (align-self:end encolhe só a célula do rótulo pro tamanho do
   conteúdo e ela desce até a base da linha 1, que é alta por causa
   do cabeçalho dos planos). */
.planos-tabela-recurso,
.planos-tabela-recursos-header,
.planos-tabela-recursos-rodape {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.planos-tabela-recurso {
    gap: 10px;
    font-size: 14px;
    color: #fff;
    background: transparent;
}
.planos-tabela-recurso svg { flex-shrink: 0; color: #64748b; }

/* Ao passar o mouse num plano, os recursos que ELE tem incluso
   realçam também na coluna da esquerda (JS decide quais, comparando
   data-recurso do rótulo com os campos booleanos daquele plano). */
.planos-tabela-recurso.recurso-hover {
    background: rgba(var(--cor-primaria-rgb), 0.12);
    color: var(--teal);
}
.planos-tabela-recurso.recurso-hover svg { color: var(--teal); }
.planos-tabela-recursos-header,
.planos-tabela-recursos-rodape {
    background: transparent;
    border-bottom: none;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.planos-tabela-recursos-header {
    align-self: end;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    padding-top: 14px;
    padding-bottom: 14px;
}
.planos-tabela-recursos-rodape {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

/* Valor de um plano numa linha (check/–, ou o número de usuários/
   consumo) -- sempre centralizado na coluna, seja ícone ou texto.
   flex-direction:column é o que empilha o número e o "por mês" do
   consumo em 2 linhas (sem isso, texto solto + <span> viram 2 itens
   flex lado a lado em vez de um embaixo do outro) -- nas linhas com
   um item só (ícone, usuários) não muda nada visualmente. */
.plano-valor {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    color: #e2e8f0;
    border-left-color: rgba(255, 255, 255, 0.14);
    border-right-color: rgba(255, 255, 255, 0.14);
}

.plano-valor-sub {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    color: #64748b;
    margin-top: 2px;
}

.plano-valor-icone {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}
.plano-valor-icone.check { background: var(--teal); color: #fff; }
.plano-valor-icone.dash { background: var(--navy-light); color: #64748b; }

/* Cabeçalho de cada plano (nome + preço) -- em fundo escuro o nome
   fica neutro pra todos, só o plano em destaque (PRO) ganha a cor de
   marca -- evita 4 cores competindo num cartão só. */
.plano-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 24px;
    position: relative;
    border-left-color: rgba(255, 255, 255, 0.14);
    border-right-color: rgba(255, 255, 255, 0.14);
    border-top: 2px solid rgba(255, 255, 255, 0.14);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}
.plano-header-nome { color: #cbd5e1; }
.plano-coluna-destaque .plano-header-nome { color: var(--teal); }

.plano-header-badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--teal);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.plano-header-nome {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 6px 0 6px;
}

/* Frase curta complementando o nome do plano -- teste, 18/09/2026.
   max-width força a quebra em ~2 linhas mesmo em colunas mais largas
   (sem isso, ficava tudo numa linha só em telas grandes). */
.plano-header-tagline {
    font-size: 12px;
    line-height: 1.4;
    color: #94a3b8;
    margin: 0 0 10px;
}

.plano-header-valor {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.plano-header-valor-numero { font-size: 22px; font-weight: 800; color: #fff; }
.plano-header-valor-ciclo { font-size: 12px; color: #64748b; }

.plano-header-ciclo-pill {
    margin-top: 8px;
    font-size: 10.5px;
    font-weight: 700;
    color: #94a3b8;
    background: var(--navy-light);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}

.plano-acoes {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: 18px;
    padding-bottom: 24px;
    border-left-color: rgba(255, 255, 255, 0.14);
    border-right-color: rgba(255, 255, 255, 0.14);
    border-bottom: 2px solid rgba(255, 255, 255, 0.14);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}
.plano-acoes-btn { width: 100%; justify-content: center; }
.plano-acoes-detalhes {
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: #94a3b8;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    padding: 2px;
}

/* Coluna em destaque (PRO, "Mais escolhido") -- borda contínua em
   volta das 8 linhas dessa coluna (row-gap:0 no grid inteiro é o que
   permite as bordas de cada célula encostarem sem costura visível). */
.plano-coluna-destaque {
    background: rgba(var(--cor-primaria-rgb), 0.08);
    border-left: 2px solid var(--teal);
    border-right: 2px solid var(--teal);
}
.plano-coluna-destaque.plano-header {
    border-top: 2px solid var(--teal);
    border-radius: var(--radius) var(--radius) 0 0;
}
.plano-coluna-destaque.plano-acoes {
    border-bottom: 2px solid var(--teal);
    border-radius: 0 0 var(--radius) var(--radius);
}

/* Hover -- passar o mouse em qualquer célula de um plano realça a
   coluna inteira (JS alterna essa classe em todas as células daquele
   data-plano de uma vez, ver home.js -- CSS :hover sozinho não
   alcança as OUTRAS células da mesma coluna, só a que está sob o
   mouse): borda verde mais evidente, leve elevação, brilho verde
   discreto (o box-shadow em CADA célula da coluna "emenda" visualmente
   num halo contínuo, já que elas ficam coladas sem espaço entre si).
   Na coluna já destacada (PRO) tudo fica um pouco mais forte, pra
   continuar se diferenciando mesmo já tendo destaque em repouso. */
.planos-tabela-celula.plano-hover {
    border-left-color: var(--teal);
    border-right-color: var(--teal);
    background: var(--navy-light);
    transform: translateY(-3px);
    box-shadow: 0 0 18px rgba(var(--cor-primaria-rgb), 0.25);
    z-index: 1;
}
.plano-coluna-destaque.plano-hover {
    background: rgba(var(--cor-primaria-rgb), 0.16);
    border-color: var(--teal);
    box-shadow: 0 0 26px rgba(var(--cor-primaria-rgb), 0.4);
    transform: translateY(-5px);
}
.plano-acoes.plano-hover .plano-acoes-btn {
    filter: brightness(1.12);
    box-shadow: 0 6px 18px rgba(var(--cor-primaria-rgb), 0.5);
}

/* Lista "acordeão" -- substitui a tabela larga (que só rolava de lado)
   em telas estreitas: 1 plano expandido (card cheio) + os outros como
   linhas resumidas que abrem ao tocar (ver MOBILE_BREAKPOINT em
   home.js). Trocado de vez em vez com .planos-tabela-wrap -- só um
   dos dois fica visível por vez. Combinado com o usuário em 14/09/2026. */
.planos-mobile-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    padding-top: 10px;
}

.planos-mobile-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}
.planos-mobile-linha-destaque {
    border-color: rgba(var(--cor-primaria-rgb), 0.4);
}

/* Preenche o espaço que sobrou do lado esquerdo depois que o preço
   saiu da linha (16/09/2026) -- mesmo espírito do ícone do "Plano
   escolhido" no cadastro (.cadastro-plano-escolhido-icone), só que
   pro fundo escuro da tabela mobile. */
.planos-mobile-linha-icone {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cor-primaria);
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1;
}

.planos-mobile-linha-nome {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #e2e8f0;
    flex-shrink: 0;
}

.planos-mobile-linha-valor {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex: 1;
    white-space: nowrap;
}
.planos-mobile-linha-valor small {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

.planos-mobile-linha-pill {
    flex-shrink: 0;
    white-space: nowrap;
}

.planos-mobile-linha-chevron {
    margin-left: auto;
    color: var(--cor-primaria);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.planos-mobile-card {
    position: relative;
    padding: 28px 20px 20px;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: var(--navy-light);
    text-align: center;
}
.planos-mobile-card-destaque {
    border-color: var(--teal);
    background: rgba(var(--cor-primaria-rgb), 0.1);
}

.planos-mobile-nome {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--teal);
    margin: 4px 0 8px;
}

.planos-mobile-valor {
    justify-content: center;
}

.planos-mobile-capacidade {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: #cbd5e1;
}
.planos-mobile-capacidade span:not(.planos-mobile-capacidade-divisor) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.planos-mobile-capacidade svg { flex-shrink: 0; color: var(--teal); }
.planos-mobile-capacidade small { color: #64748b; font-weight: 500; }
.planos-mobile-capacidade-divisor {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.14);
}

.planos-mobile-divisor {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    margin: 18px 0;
}

.planos-mobile-recursos-titulo {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--teal);
    text-align: left;
    margin: 0 0 10px;
}

.planos-mobile-recursos-lista {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}
.planos-mobile-recursos-lista li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: #e2e8f0;
}
.planos-mobile-recursos-lista .plano-valor-icone {
    flex-shrink: 0;
}

.planos-mobile-btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
}

.planos-mobile-ver-menos {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px;
    font-family: inherit;
}
.planos-mobile-ver-menos:hover { color: #fff; }

/* CTA no rodapé da vitrine de planos -- "Ainda em dúvida? / Teste o
   Flow SST grátis por N dias. / [Começar teste grátis]", só aparece
   quando há trial configurado (ver {% if trial_dias %} em home.html).
   Substituiu o antigo selo "Todos os planos incluem suporte e N dias
   grátis" -- combinado com o usuário em 14/09/2026. */
.planos-vitrine-cta {
    /* Mesmo tom do selo antigo ("Todos os planos incluem suporte...")
       que esse CTA substituiu -- fundo --navy-light, como card (cantos
       no --radius padrão). Layout em linha (ícone + texto à esquerda,
       botão à direita) -- combinado com o usuário em 14/09/2026. */
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    max-width: 680px;
    margin: 32px auto 0;
    padding: 20px 28px;
    border-radius: var(--radius);
    background: var(--navy-light);
    text-align: left;
}

.planos-vitrine-cta-icone {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(var(--cor-primaria-rgb), 0.16);
    color: var(--teal);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.planos-vitrine-cta-icone svg {
    width: 22px;
    height: 22px;
}

.planos-vitrine-cta-texto {
    flex: 1;
}

.planos-vitrine-cta-duvida {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 2px;
}

.planos-vitrine-cta-teste {
    font-size: 13.5px;
    color: #94a3b8;
    margin: 0;
}

.planos-vitrine-cta-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .planos-vitrine-cta {
        flex-direction: column;
        text-align: center;
    }
    .planos-vitrine-cta-texto {
        text-align: center;
    }
}

/* ================= CADASTRO (vitrine) =================
   Aparece logo abaixo do fundo escuro dos planos, só depois que a
   pessoa clica em "Escolher esse plano"/"Começar teste grátis" (ver
   abrirCadastro em home.js -- fica com .oculto até lá). Fundo claro
   (a seção de planos é que é escura) -- card estreito e coluna única,
   inspirado numa referência escura que o usuário mandou (16/09/2026):
   mantivemos só o estilo de inputs/cards dela, no claro. */
.cadastro-vitrine {
    width: 100%;
    max-width: 620px;
    text-align: center;
    padding: 40px 24px 8px;
}

.cadastro-vitrine-eyebrow {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--teal);
    margin: 0 0 8px;
}

.cadastro-vitrine-titulo {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 10px;
}

.cadastro-vitrine-subtitulo {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 420px;
    margin: 0 auto 28px;
}

.cadastro-card {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
    text-align: left;
}

.cadastro-plano-escolhido-rotulo {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.cadastro-plano-escolhido {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--teal-soft);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 24px;
}

.cadastro-plano-escolhido-icone {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--teal);
    color: #fff;
    border-radius: 9px;
    font-size: 15px;
    line-height: 1;
}

.cadastro-plano-escolhido-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cadastro-plano-escolhido-nome {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-dark);
}

/* "Ver detalhes" -- mesmo comportamento (irParaPainel) do "Ver
   detalhes" que já existe embaixo de "Escolher esse plano" na
   tabela/mobile (.plano-acoes-detalhes), só que adaptado ao fundo
   claro deste card (lá é #94a3b8 pro fundo escuro). É um link
   temporário -- "logo vamos configurar esse link e tela" (usuário,
   16/09/2026) -- uma tela de detalhes de verdade fica pra depois. */
.cadastro-plano-escolhido-detalhes {
    align-self: flex-start;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--teal-dark);
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}

.cadastro-plano-escolhido-detalhes:hover {
    text-decoration: underline;
}

.cadastro-plano-escolhido-alterar {
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-dark);
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.15s;
}

.cadastro-plano-escolhido-alterar:hover {
    background: var(--bg);
}

.cadastro-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cadastro-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cadastro-campo label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.cadastro-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.cadastro-input-icone {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    display: block;
    flex-shrink: 0;
    color: var(--text-muted);
    pointer-events: none;
}

.cadastro-campo input {
    width: 100%;
    padding: 11px 14px 11px 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}

.cadastro-campo input:focus {
    border-color: var(--teal);
}

.cadastro-mensagem {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0;
}

.cadastro-mensagem.erro { color: var(--red); }
.cadastro-mensagem.sucesso { color: var(--teal-dark); }

/* Status da busca automática de razão social por CNPJ (ver
   buscarRazaoSocialPorCnpj em home.js) -- não bloqueia o cadastro,
   só avisa (ex: CNPJ genérico/inexistente não confirma nada aqui). */
.cadastro-cnpj-status {
    font-size: 12px;
    margin: -6px 0 0;
}

.cadastro-cnpj-status.carregando { color: var(--text-muted); }
.cadastro-cnpj-status.encontrado { color: var(--teal-dark); }
.cadastro-cnpj-status.nao-encontrado { color: var(--red); }

.cadastro-btn {
    align-self: flex-end;
    justify-content: center;
    padding: 11px 26px;
    font-size: 14px;
    border-radius: var(--radius-pill);
}

@media (max-width: 640px) {
    .cadastro-card {
        padding: 20px;
    }
    /* No celular, largura toda + centralizado é mais fácil de tocar
       do que um botão pequeno grudado na direita. */
    .cadastro-btn {
        align-self: stretch;
        justify-content: center;
    }

    /* Só no celular: grid de 2 colunas x 2 linhas -- ícone preso na
       linha 1 (junto do nome); nome+"Ver detalhes" ficam juntos na
       MESMA linha; o botão "Alterar", menor, desce pra linha 2,
       alinhado à direita -- não cabe tudo (ícone+nome+detalhes+
       alterar) numa linha só em telas estreitas (~360px, o card real
       tem só ~178px de espaço interno ali), então "Alterar" é o que
       sobra pra segunda linha, sempre alinhado sob "Ver detalhes"/
       nome, nunca sobrepondo nada (pedido do usuário, 16/09/2026: nome
       +detalhes na mesma linha, alterar menor e mais à direita, tudo
       alinhado -- só no mobile, o desktop mantém o layout de sempre). */
    .cadastro-plano-escolhido {
        display: grid;
        grid-template-columns: 32px 1fr;
        column-gap: 12px;
        row-gap: 8px;
        align-items: unset;
    }

    .cadastro-plano-escolhido-icone {
        grid-row: 1;
        grid-column: 1;
    }

    .cadastro-plano-escolhido-info {
        grid-row: 1;
        grid-column: 2;
        flex-direction: row;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 4px 10px;
    }

    /* Nome do plano só encolhe/trunca com reticências (overflow:hidden
       zera o min-width automático do item flex) quando realmente
       precisa -- nomes curtos como "PRO" continuam do tamanho natural,
       do lado de "Ver detalhes" na mesma linha; só nomes bem compridos
       encolhem, e nos celulares mais antigos/estreitos (raro, <340px)
       "Ver detalhes" quebra pra linha debaixo (flex-wrap acima) em vez
       de espremer o nome a 1 letra só. */
    .cadastro-plano-escolhido-nome {
        min-width: 0;
        flex-shrink: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cadastro-plano-escolhido-detalhes {
        align-self: baseline;
        flex-shrink: 0;
    }

    .cadastro-plano-escolhido-alterar {
        grid-row: 2;
        grid-column: 2;
        justify-self: end;
        font-size: 11.5px;
        padding: 6px 12px;
    }
}

.rodape-home {
    box-shadow: 0 0 0 100vmax var(--navy);
    clip-path: inset(0 -100vmax);
    background: var(--navy);
    color: #cbd5e1;
    font-size: 14px;
    padding: 24px 32px;
    margin-top: 48px;
    text-align: left;
}

/* Botão flutuante do WhatsApp (home) -- fixo no canto, sempre visível
   enquanto rola a página. 03/10/2026. */
.whatsapp-flutuante {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 999;
    transition: transform 0.15s ease;
}

.whatsapp-flutuante:hover {
    transform: scale(1.08);
}

.whatsapp-flutuante svg {
    width: 30px;
    height: 30px;
}

@media (max-width: 800px) {
    .whatsapp-flutuante {
        right: 16px;
        bottom: 16px;
        width: 50px;
        height: 50px;
    }
    .whatsapp-flutuante svg {
        width: 26px;
        height: 26px;
    }
}

/* ================= PAINEL (execução) — cards de ação ================= */

.cards-processos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    scroll-margin-top: 90px;
}

/* Quando nem todos os cards estão visíveis (permissões desligadas),
   o JS aplica uma dessas classes pra reajustar o layout — evitando
   colunas vazias e mantendo os cards centralizados e bem dimensionados.
   As 3 variantes usam a MESMA largura de card (o usuário reparou que
   com 1 ou 2 cards eles ficavam menores que com 4, e queria do mesmo
   tamanho sempre): cards-4 e cards-2 enchem width 100% em 2 colunas de
   1fr (perfeitamente iguais, 2 ou 4 cards sempre fecham linhas
   inteiras); cards-1 usa uma coluna só, mas do tamanho exato que UMA
   coluna teria nesse grid de 2 (calc(50% - metade do gap)), só que
   centralizada -- em vez de um max-width solto (620px) sem relação
   com a largura real da coluna. */
.cards-processos.cards-1 {
    grid-template-columns: minmax(0, calc(50% - 10px));
    justify-content: center;
}

.cards-processos.cards-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cards-processos.cards-4 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 800px) {
    /* Precisa repetir os seletores com ".cards-1/.cards-2/.cards-4" --
       são 2 classes (especificidade 0-0-2-0), mais específicos que só
       ".cards-processos" (0-0-1-0) sozinho, então SEMPRE ganhavam da
       regra de empilhar em 1 coluna no mobile, independente de ordem
       no arquivo ou media query (especificidade vence ordem de
       declaração). Resultado real visto antes desse fix: grid de 2
       colunas continuava renderizando em ~390px de largura, cortando
       texto dos cards na borda direita da tela. */
    .cards-processos,
    .cards-processos.cards-1,
    .cards-processos.cards-2,
    .cards-processos.cards-4 {
        grid-template-columns: 1fr;
    }
}

.processo-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 32px 36px;
}

.fap-login-card {
    padding: 22px 28px;
}

.processo-card-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 16px;
}

.processo-seta {
    font-size: 24px;
    color: var(--text-muted);
    opacity: 0.45;
    line-height: 1;
}

.processo-icone {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 0;
}

.processo-icone svg {
    width: 22px;
    height: 22px;
}

.processo-icone-success {
    background: #d1fae5;
    color: var(--teal-dark);
}

.processo-icone-info {
    background: #dbeafe;
    color: var(--blue);
}

.processo-icone-warning {
    background: #fed7aa;
    color: #c2410c;
}

.processo-icone-purple {
    background: #ede9fe;
    color: #7c3aed;
}

.processo-icone-amber {
    background: #fef3c7;
    color: var(--amber);
}

.processo-icone-danger {
    background: var(--red-soft);
    color: var(--red);
}

.processo-titulo {
    margin: 0 0 8px 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--text-dark);
}

/* Wrapper duplo (".processo-card-corpo" > div) em volta de
   ".processo-desc" + ".processo-acoes" -- existe só pra viabilizar o
   accordion no mobile (técnica "grid-template-rows: 0fr -> 1fr", que
   precisa de um contêiner grid com UM filho só). No desktop os dois
   ficam como "display:flex;flex-direction:column;flex:1" pra repassar
   o "flex-grow" do ".processo-desc" (empurra ".processo-acoes" pro
   fim do card) exatamente como quando eram filhos diretos do card --
   zero mudança visual no desktop. */
.processo-card-corpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}

.processo-card-corpo > div {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}

@media (max-width: 800px) {
    /* Accordion dos cards de processo no mobile: cada card nasce
       fechado (só o topo com ícone+título visível) e expande no toque,
       empurrando o conteúdo abaixo (sem position:absolute/overlap) --
       técnica "grid-template-rows: 0fr -> 1fr" com transição suave de
       altura, sem precisar medir altura via JS. Precisa vir DEPOIS da
       regra base ".processo-card-corpo" (acima) no arquivo -- mesma
       especificidade (0-0-1-0) nos dois casos, então quem vier depois
       no CSS é quem vale; dentro de uma media query ANTES da base
       perdia sempre, mesmo estando "mais embaixo" na tela. O item do
       grid (".processo-card-corpo > div") precisa de "min-height:0"
       porque por padrão um item de grid não encolhe abaixo do tamanho
       do seu conteúdo, o que impediria o "0fr" de colapsar de verdade. */
    .processo-card-corpo {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.25s ease;
        flex: none;
        width: 100%;
    }

    .processo-card-corpo > div {
        display: block;
        min-height: 0;
        overflow: hidden;
        flex: none;
    }

    .processo-card.processo-card-expandido .processo-card-corpo {
        grid-template-rows: 1fr;
    }

    .processo-card-topo,
    .processo-titulo {
        cursor: pointer;
    }

    .processo-seta {
        transition: transform 0.2s ease;
    }

    .processo-card.processo-card-expandido .processo-seta {
        transform: rotate(90deg);
    }

    /* Ícone + título na MESMA linha (referência enviada pelo usuário,
       02/10/2026) -- no desktop o título fica abaixo do ícone, numa
       linha própria (".processo-card-topo" só tem ícone+seta); aqui
       vira uma grade de 3 colunas (ícone | título | seta) com
       ".processo-card-topo" "desaparecendo" via "display:contents"
       (não gera caixa própria, só expõe ícone/seta como se fossem
       filhos diretos do card -- o clique continua funcionando igual,
       "display:contents" não tira os elementos do DOM, só da árvore
       de layout, então o listener em ".processo-card-topo" (app.js)
       continua recebendo o clique por bubbling normal). O corpo
       (desc+ações, accordion) ocupa sozinho a 2ª linha, largura
       inteira. */
    .processo-card {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        column-gap: 14px;
        padding: 18px 20px;
    }

    .processo-card-topo {
        display: contents;
    }

    .processo-icone {
        grid-column: 1;
        grid-row: 1;
    }

    .processo-titulo {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        font-size: 16px;
        line-height: 1.3;
    }

    .processo-seta {
        grid-column: 3;
        grid-row: 1;
    }

    .processo-card-corpo {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .processo-card-corpo > div {
        padding-top: 14px;
    }
}

/* ================= CONFIGURAÇÕES -- accordion por seção no mobile =================
   Mesma técnica dos cards de processo (grid-template-rows: 0fr -> 1fr),
   adaptada pra "#painel-config": aqui as seções (Configuração
   Automação, Configuração Geral, Minhas configurações, Meu Plano,
   Usuários da minha empresa, Permissões de usuários, Sistemas
   integrados) não são cards separados -- são só h2.card-title + corpo,
   um atrás do outro, dentro do MESMO card grande. Por isso
   ".config-secao-topo"/".config-secao-corpo" são IRMÃOS (não um
   dentro do outro como ".processo-card" era) -- o estado "aberta" fica
   numa classe no próprio ".config-secao-topo", e o corpo é alcançado
   via seletor de irmão adjacente ("+"), que exige os dois ficarem
   exatamente um ao lado do outro no HTML (sem nada no meio). No
   desktop os dois viram "display:contents" -- não geram caixa própria
   nenhuma, o h2 renderiza exatamente como antes (sem wrapper nenhum
   percebido), zero mudança visual. Pedido do usuário, 02/10/2026:
   "Configuração Automação" nasce aberta (única), todo o resto nasce
   fechado -- pra todo mundo (usuário e admin), ver "config-secao-
   aberta" só no primeiro h2 em painel.html. */
.config-secao-topo,
.config-secao-corpo {
    display: contents;
}

.config-secao-seta {
    display: none;
}

@media (max-width: 800px) {
    .config-secao-topo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        cursor: pointer;
        /* Espaço antes de CADA cabeçalho de seção -- sem isso, o fim
           do conteúdo da seção anterior (ex: "Informação para
           auditoria.") encostava direto no próximo título ("Configuração
           Geral"), sem respiro nenhum entre os dois. Pedido do
           usuário, 02/10/2026. Sobra um pouco de espaço extra ANTES do
           primeiro título também (topo do card) -- inofensivo. */
        margin-top: 20px;
    }

    .config-secao-seta {
        display: inline-block;
        font-size: 22px;
        color: var(--text-muted);
        opacity: 0.45;
        line-height: 1;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    .config-secao-topo.config-secao-aberta .config-secao-seta {
        transform: rotate(90deg);
    }

    .config-secao-corpo {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.25s ease;
    }

    .config-secao-topo.config-secao-aberta + .config-secao-corpo {
        grid-template-rows: 1fr;
    }

    .config-secao-corpo > div {
        min-height: 0;
        overflow: hidden;
        padding-top: 14px;
    }

    /* Linhas que hoje ficam lado a lado (imagem/arquivo + controles,
       cor + texto de ajuda + botão) e espremiam/cortavam texto em
       telas estreitas (ex: "Escolher arquivo" cortado) -- empilham
       verticalmente, mesmo critério já usado no resto do painel. */
    .logo-config {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .logo-upload-row {
        flex-wrap: wrap;
    }

    .cor-config-linha {
        flex-wrap: wrap;
    }

    /* ".admin-criar-grid" já vira 1 coluna em telas estreitas (ver
       "@media (max-width: 700px)" logo acima no arquivo) -- só falta
       tirar o traço vertical entre as 2 colunas (".admin-criar-coluna:
       last-child"), que não faz sentido mais com elas empilhadas. */
    .admin-criar-coluna:last-child {
        border-left: none;
        padding-left: 0;
    }

    /* Upload da Planilha Excel (Configuração Automação) -- ícone+textos
       de um lado e botão "Escolher arquivo" do outro (".upload-excel-
       card", "justify-content:space-between") brigavam pelo mesmo
       espaço numa tela estreita: nenhum dos dois reduzia de verdade
       (botão tem "flex-shrink:0"), o texto ("Importação atual: N
       colaborador(es).") quebrava espremido por baixo do ícone, dando
       a impressão de sobreposição. Empilha tudo em coluna, cada parte
       com a largura inteira disponível. Pedido do usuário, 02/10/2026. */
    .upload-excel-card {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .upload-excel-botao {
        justify-content: center;
    }

    .upload-excel-linha {
        flex-direction: column;
        align-items: stretch;
    }

    /* Listas em grid com várias colunas fixas (Usuários da minha
       empresa, Itens adicionais contratados, Tickets de suporte --
       ".lista-rolavel-mobile" em painel.html) -- cada uma soma bem
       mais que a largura de uma tela de celular (ver ".gc-grade-*" em
       style.css). Diferente do resto do painel (que empilha em 1
       coluna), aqui o pedido do usuário foi MANTER a tabela como
       tabela e rolar só ela, na horizontal -- senão "come" as colunas
       da direita (Status/Ações). Pedido do usuário, 02/10/2026.

       Precisa de DOIS níveis (".lista-rolavel-mobile" > a div com o
       id de verdade, onde o JS dá appendChild no cabeçalho + cada
       linha): cabeçalho e linhas não são uma <table> só, são grids
       SEPARADOS (um por linha, mesmo grid-template-columns repetido
       em cada -- ver comentário mais antigo sobre ".gc-grade-*").
       Dar "width: max-content" em CADA linha direto (1ª versão deste
       fix) fazia cada uma calcular seu PRÓPRIO max-content, baseado
       no conteúdo DELA -- cabeçalho (texto curto) e linhas com
       conteúdo mais longo chegavam a larguras TOTAIS diferentes, e
       como as colunas "1fr"/"minmax(..,1fr)" dividem o espaço em
       cima dessa largura total, as colunas do cabeçalho ficavam
       desalinhadas das colunas de baixo (reportado pelo usuário,
       02/10/2026). Corrigido botando o "max-content" só UMA vez, no
       nível de fora (que soma o conteúdo de TODAS as linhas juntas,
       via o algoritmo padrão de "shrink-to-fit" do navegador) -- o
       nível de dentro (onde o JS continua dando appendChild, sem
       mudar nada lá) e cada linha individual (".gc-lista-cabecalho"/
       ".gc-lista-linha") só preenchem 100% dessa largura já
       calculada, garantindo que todo mundo meça a MESMA largura. */
    .lista-rolavel-mobile {
        overflow-x: auto;
    }

    .lista-rolavel-mobile > div {
        width: max-content;
        min-width: 100%;
    }

    .lista-rolavel-mobile .gc-lista-cabecalho,
    .lista-rolavel-mobile .gc-lista-linha {
        width: 100%;
    }
}

.processo-desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-muted);
    flex-grow: 1;
}

.processo-aviso {
    margin: 12px 0 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 8px 10px;
}

.processo-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    width: 100%;
}

.processo-acoes .btn {
    justify-content: center;
}

#btn-parar {
    width: auto;
    margin-left: auto;
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--red);
    box-shadow: none;
}

#btn-parar:hover:not(:disabled) {
    text-decoration: underline;
    filter: none;
}


/* Ação principal — link colorido com seta, não mais um botão cheio */
.btn-acao {
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.seta-acao {
    transition: transform 0.15s ease;
}

.btn-acao:hover .seta-acao {
    transform: translateX(3px);
}

.btn-acao:hover {
    text-decoration: underline;
}

.btn-acao-success { color: var(--teal-dark); }
.btn-acao-info { color: var(--blue); }
.btn-acao-warning { color: #c2410c; }
.btn-acao-purple { color: #7c3aed; }

/* ---------- FAIXA "SOBRE O SISTEMA" ---------- */

.sobre-sistema-card {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 24px;
    align-items: flex-start;
}

.sobre-sistema-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sobre-sistema-icone {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--cor-primaria-suave);
    color: var(--cor-primaria-escura);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sobre-sistema-icone svg {
    width: 22px;
    height: 22px;
}

.sobre-sistema-principal .sobre-sistema-item-titulo {
    font-size: 16px;
}

.sobre-sistema-item-icone {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cor-primaria-suave);
    color: var(--cor-primaria-escura);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.sobre-sistema-item-icone svg {
    width: 13px;
    height: 13px;
}

.sobre-sistema-item-titulo {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 2px;
}

.sobre-sistema-item-desc {
    display: block;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .sobre-sistema-card { grid-template-columns: 1fr; }
}

#painel-inicio {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.log-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.log-card-header-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-fechar-log {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 6px;
}

.btn-fechar-log:hover {
    background: var(--bg);
    color: var(--text-dark);
}

.log-card-header .card-title {
    margin: 0;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s, transform 0.05s;
    text-decoration: none;
}

.agente-ausente-ajuda {
    font-size: 12px;
    margin-top: 14px !important;
}

/* "Baixar Agente" + "Cancelar" lado a lado -- aparece quando "Abrir
   Agente" não conecta depois do tempo limite (provavelmente o Agente
   nunca foi instalado nesta máquina, ver agente_prompt.js). */
.agente-ausente-download-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

/* Estado "carregando" do botão "Abrir Agente" -- ver agente_prompt.js
   (abrir o protocolo agenteautomacao:// não é instantâneo, essa é a
   janela sem feedback nenhum em que dava pra clicar de novo à toa). */
#agente-ausente-abrir.carregando {
    pointer-events: none;
    opacity: 0.75;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#agente-ausente-abrir.carregando::before {
    content: "";
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: overlay-espera-girar 0.8s linear infinite;
}

.agente-ausente-detalhes {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.agente-ausente-detalhes summary {
    cursor: pointer;
    color: inherit;
}

.agente-ausente-detalhes p {
    margin: 8px 0 4px;
}

.agente-ausente-detalhes ul {
    margin: 0;
    padding-left: 18px;
}

.agente-ausente-detalhes li {
    margin-bottom: 4px;
}

.btn:active { transform: scale(0.98); }

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-icon {
    font-size: 13px;
}

.btn-success { background: var(--teal); color: #fff; }
.btn-success:hover:not(:disabled) { filter: brightness(1.08); }

.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(1.08); }

.btn-info { background: var(--blue); color: #fff; }
.btn-info:hover:not(:disabled) { filter: brightness(1.08); }

.btn-warning { background: var(--amber); color: #fff; }
.btn-warning:hover:not(:disabled) { filter: brightness(1.08); }

.btn-outline {
    background: #fff;
    color: var(--text-dark);
    border: 1px solid var(--border);
}
.btn-outline:hover:not(:disabled) { background: var(--bg); }

.btn-preto { background: var(--text-dark); color: #fff; transition: background 0.15s, filter 0.15s, transform 0.05s; }
.btn-preto:hover:not(:disabled) { background: var(--teal); }

/* Botão "Desativar" do catálogo de sistemas — bem menor que os
   outros, vermelho claro (mesmo tom do badge "inativo"), pra não
   competir visualmente com o resto da linha. */
.btn-desativar {
    padding: 4px 10px;
    font-size: 11px;
    background: var(--red-soft);
    color: var(--red);
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.btn-desativar:hover:not(:disabled) { filter: brightness(0.97); }

/* Botão "Editar" do catálogo de sistemas — mesmo tamanho pequeno do
   "Desativar", cor padrão de edição (azul claro). */
.btn-editar-sistema {
    padding: 4px 10px;
    font-size: 11px;
    background: #dbeafe;
    color: var(--blue);
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.btn-editar-sistema:hover:not(:disabled) { filter: brightness(0.97); }

.admin-sistema-aviso {
    font-size: 11px;
    font-weight: 700;
    color: var(--amber);
    background: #fef3c7;
    padding: 2px 8px;
    border-radius: 999px;
}

.btn-entrar {
    background: var(--navy);
    color: #fff;
    border-radius: 10px;
}
.btn-entrar:hover:not(:disabled) { filter: brightness(1.15); }
.btn-outline:hover:not(:disabled) { background: var(--bg); }

/* ---------- LOG ---------- */

.log-card {
    padding-bottom: 12px;
}

@media (max-width: 800px) {
    /* Sem execução real no mobile (ver bloquearExecucaoSeMobile em
       app.js), esse card (log/barra de progresso) nunca tem motivo
       pra aparecer por lá -- usa "#log-card" (id, especificidade
       1-0-0-0) pra garantir que vence mesmo com ".oculto" sendo
       removida via JS num clique que, no mobile, nunca chega a
       disparar de verdade (o bloqueio corta antes do fetch). */
    #log-card {
        display: none;
    }
}

/* ---------- BARRA DE PROGRESSO ---------- */

.progresso-wrap {
    margin-bottom: 16px;
    /* Sem log de execução na tela (ver {% if eh_admin %} em
       painel.html), essa barra passa a ser o conteúdo PRINCIPAL do
       card pra quem não é admin -- maior e com mais respiro em volta,
       pra preencher o espaço em vez de sobrar vazio embaixo dela. */
    padding: 8px 0 16px;
}

.progresso-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 15px;
    color: var(--text-muted);
}

#progresso-percentual {
    font-weight: 700;
    color: var(--teal-dark);
}

.progresso-barra {
    width: 100%;
    height: 18px;
    background: var(--bg);
    border-radius: var(--radius-pill);
    overflow: hidden;
    position: relative;
}

.progresso-preenchido {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--cor-primaria) 0%, var(--cor-primaria-escura) 100%);
    border-radius: var(--radius-pill);
    /* a duração da transição agora é controlada dinamicamente pelo JS
       (7s por linha, com "trava" instantânea quando necessário) */
}

/* Estado indeterminado: sem linha final definida, mostra uma animação
   de "onda" correndo pela barra em vez de porcentagem fixa */
.progresso-barra.indeterminado .progresso-preenchido {
    width: 35% !important;
    animation: progresso-onda 1.4s ease-in-out infinite;
}

@keyframes progresso-onda {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(385%); }
}

.log-aviso-truncado {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 10px 0;
}

.log-output {
    background: var(--navy);
    color: #d1fae5;
    border-radius: 10px;
    padding: 16px;
    height: 360px;
    overflow-y: auto;
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

/* ---------- MODAL ---------- */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11, 17, 32, 0.55);
    justify-content: center;
    z-index: 1000;
    /* Sem isso, um modal alto (ex: popup de "Ver detalhes" com imagem)
       centralizava contando o viewport inteiro, sem saber que o header
       fixo (72px) já toma uma fatia -- o topo do modal acabava
       nascendo por baixo do header em telas mais baixas. padding-top
       maior que a altura do header garante que nunca nasce ali; o
       padding nos outros lados só dá uma folga mínima quando a tela é
       bem apertada. */
    padding: 88px 20px 20px;
    box-sizing: border-box;
    overflow-y: auto;
}

/* Centralização vertical "segura" -- align-items:center sozinho
   "centraliza de verdade" mesmo quando o conteúdo não cabe, empurrando
   o topo do modal PARA CIMA do início da área útil (por baixo do
   header de novo, ou até cortado, sem dar pra rolar até ele). margin:
   auto nos filhos, sem align-items, só centraliza quando sobra espaço
   -- quando não sobra, vira alinhado no topo da área útil (logo abaixo
   do padding-top acima), sempre visível e com scroll (overflow-y:auto
   no pai) pra ver o resto. */
.modal-overlay > * {
    margin: auto 0;
}

.modal-overlay.aberto {
    display: flex;
}

/* ---------- "+ Abrir chamado" (Suporte, usuário) ---------- */

.suporte-usuario-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.suporte-usuario-cabecalho .card-title,
.suporte-usuario-cabecalho .processo-desc {
    margin-bottom: 0;
}

.suporte-usuario-cabecalho .processo-desc {
    margin-top: 4px;
}

.modal-chamado {
    position: relative;
    max-width: 480px;
}

.modal-chamado h3 {
    margin: 0 0 18px;
    padding-right: 24px;
}

.chamado-anexos {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

.chamado-anexos-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.chamado-anexo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-dark);
}

.chamado-anexo-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chamado-anexo-remover {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

.chamado-anexo-remover:hover {
    color: var(--red);
}

/* Tabela "meus tickets" (Suporte, usuário) -- sem coluna de
   Empresa/Opções (é só da própria empresa, sem tela de atendimento
   ainda). */
.gc-grade-meus-tickets {
    display: grid;
    /* Coluna "Status" em 225px -- mesmo ajuste de .gc-grade-tickets
       (ver comentário lá), pro badge "Aguardando retorno do cliente"
       caber numa linha só. */
    grid-template-columns: 80px minmax(140px, 1fr) minmax(160px, 1.3fr) 110px 100px 225px 100px;
    gap: 14px;
}

/* ---------- Tela de atendimento de 1 ticket (chat) ---------- */

.ticket-detalhe-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0 20px;
}

.ticket-detalhe-cabecalho .card-title,
.ticket-detalhe-cabecalho .processo-desc {
    margin-bottom: 0;
}

.ticket-detalhe-cabecalho .processo-desc {
    margin-top: 4px;
}

.ticket-detalhe-controles {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ticket-detalhe-controles select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
}

.ticket-chat {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 480px;
    overflow-y: auto;
    padding: 4px 4px 4px 0;
    margin-bottom: 20px;
}

.ticket-mensagem {
    padding: 12px 16px;
    border-radius: 10px;
    border-left: 3px solid var(--border);
    background: var(--bg);
}

.ticket-mensagem-suporte {
    border-left-color: var(--cor-primaria);
    background: var(--cor-primaria-suave);
}

.ticket-mensagem-cabecalho {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.ticket-mensagem-cabecalho strong {
    font-size: 13.5px;
    color: var(--text-dark);
}

.ticket-mensagem-data {
    font-size: 11.5px;
    color: var(--text-muted);
}

.ticket-mensagem-texto {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-dark);
    white-space: pre-wrap;
    word-break: break-word;
}

.ticket-mensagem-anexos {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
}

.ticket-mensagem-anexo {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--teal-dark);
    text-decoration: none;
}

.ticket-mensagem-anexo:hover {
    text-decoration: underline;
}

.ticket-mensagem-divisor {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0;
}

.ticket-chat-composer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Borda embaixo (era em cima) -- composer agora vem ANTES da
       conversa (pedido do usuário, 02/10/2026), então quem separa um
       do outro é o espaço abaixo do composer, não mais acima dele. */
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.ticket-chat-composer textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    resize: vertical;
    min-height: 70px;
    transition: border-color 0.15s;
}

.ticket-chat-composer textarea:focus {
    border-color: var(--cor-primaria);
}

.ticket-chat-composer-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* ".chamado-anexos" (reaproveitada do modal "Abrir chamado", que tem
   seu próprio layout em coluna) ganha "margin-bottom:0" só aqui dentro
   -- nesse contexto ela é só o botão "Anexar arquivo" lado a lado com
   "Enviar", não sobra espaço embaixo pra tirar os dois do alinhamento
   vertical. Pedido do usuário, 02/10/2026. */
.ticket-chat-composer-rodape .chamado-anexos {
    margin-bottom: 0;
}

.ticket-encerrado-aviso {
    margin-top: 14px;
    padding: 12px 16px;
    background: var(--teal-soft);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 13.5px;
    text-align: center;
}

/* ---------- OVERLAY DE ESPERA (nuvem) ----------
   Cobre a tela nos intervalos entre um clique e o próximo popup —
   iniciar automação, abrir o Chrome etc. — enquanto o agente local
   ainda não respondeu, pra não parecer que travou. */
.overlay-espera {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11, 17, 32, 0.55);
    align-items: center;
    justify-content: center;
    z-index: 999;
    flex-direction: column;
    gap: 16px;
}

.overlay-espera.aberto {
    display: flex;
}

.overlay-espera-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    animation: overlay-espera-girar 0.8s linear infinite;
}

.overlay-espera-texto {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

@keyframes overlay-espera-girar {
    to { transform: rotate(360deg); }
}

.modal {
    background: #fff;
    border-radius: var(--radius);
    padding: 28px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.modal h3 {
    margin: 0 0 12px 0;
    font-size: 17px;
}

.modal p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 20px 0;
    white-space: pre-line;
}

.modal-botoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

/* Modal "Alterar status do ticket?" -- mais largo que o padrão (420px)
   de propósito, pra caber os 3 botões numa linha só (pedido do
   usuário, 17/09/2026). */
.modal-status-ticket {
    max-width: 560px;
}

.modal-botoes-linha-unica {
    flex-wrap: nowrap;
}

.modal-botoes-linha-unica .btn {
    white-space: nowrap;
}

/* "Cancelar" (sempre o 1º botão nesses casos) fica preso na ponta
   esquerda, os demais agrupados na direita -- truque de flexbox
   (margin-right: auto no 1º item absorve o espaço livre, empurra só
   os irmãos DEPOIS dele). Modificador à parte (não em .modal-botoes-
   linha-unica direto) porque essa classe também é usada em modal com
   só 1 botão, onde esse empurrão ficaria errado. Pedido do usuário,
   25/09/2026. */
.modal-botoes-cancelar-esquerda > .btn:first-child {
    margin-right: auto;
}

/* Modais "Fechar negócio", "Fazer upgrade", "Adicionar usuário extra"
   e "Adicionar consumo extra" -- 3 botões (Cancelar/Cobrança manual/
   Gerar link) precisam de um pouco mais de largura que o padrão
   (420px) pra caber numa linha só sem espremer/vazar pra fora do
   modal (bug relatado pelo usuário, 02/10/2026, nos 2 últimos). */
#criar-assinatura-modal-overlay .modal,
#upgrade-modal-overlay .modal,
#adicionar-usuario-extra-modal-overlay .modal,
#adicionar-consumo-extra-modal-overlay .modal {
    max-width: 480px;
}

/* ---------- "Saiba mais" de um recurso (home.js: RECURSOS_DETALHES /
   abrirRecursoModal) ---------- Modal grande com rolagem (texto longo)
   -- só o "X" fica fixo fora da área que rola; título, legenda, corpo
   e o botão "Voltar aos planos" (fim do conteúdo) rolam juntos. */
.modal-recurso {
    position: relative;
    background: #fff;
    border-radius: var(--radius);
    max-width: 1000px;
    width: 92%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

.modal-recurso-fechar {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--bg);
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.modal-recurso-fechar:hover {
    background: var(--border);
}

.modal-recurso-scroll {
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px 40px 32px;
}

.modal-recurso-titulo {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 6px;
}

/* Ícone ao lado do título -- só nos recursos com "icone" em
   RECURSOS_DETALHES (layout mais completo, ver Automação do eSocial). */
.modal-recurso-titulo-linha {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
}

/* Título "largo" (dados.tituloLarga) -- só no desktop, quando não
   tem nada à direita do título dentro da coluna de texto (a imagem
   começa mais abaixo, ver imagemTopo): deixa o título numa linha só,
   mesmo "vazando" a largura normal da coluna (não tem nada ali pra
   colidir). No mobile a coluna já é 100% da largura e o texto volta
   a quebrar normalmente -- ver reset dentro do @media 640px. */
.modal-recurso-titulo-linha-larga .modal-recurso-titulo {
    white-space: nowrap;
}

/* Título numa linha só fica meio "colado" no subtítulo (a margem de
   6px de .modal-recurso-titulo-linha foi pensada pra um título de
   2-3 linhas, mais alto) -- um pouco mais de respiro aqui. */
.modal-recurso-titulo-linha-larga {
    margin-bottom: 14px;
}

.modal-recurso-titulo-linha .modal-recurso-titulo {
    margin: 0;
}

.modal-recurso-titulo-icone {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--teal-soft);
    color: var(--teal-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-recurso-titulo-icone svg {
    width: 22px;
    height: 22px;
}

/* Variante "em cima" do título (não do lado) -- automacao_relatorio,
   ver iconeAcimaTitulo em abrirRecursoModal. Maior que a versão ao
   lado do título, com espaço embaixo antes do <h2>. */
.modal-recurso-titulo-icone-topo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    margin: 0 0 16px;
}

.modal-recurso-titulo-icone-topo svg {
    width: 26px;
    height: 26px;
}

/* Especificidade extra (.modal-recurso-corpo + p + classe) de propósito
   -- ".modal-recurso-corpo p" (mais abaixo) tem "p" na composição e
   por isso vence uma classe sozinha na cascata; sem isso o subtítulo
   saía cinza (cor de texto normal) em vez de verde. */
.modal-recurso-corpo p.modal-recurso-subtitulo {
    font-size: 15px;
    font-weight: 700;
    color: var(--teal);
    margin: 0 0 22px;
}

.modal-recurso-corpo {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-dark);
}

.modal-recurso-corpo > *:first-child {
    margin-top: 0;
}

.modal-recurso-corpo h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 28px 0 10px;
}

.modal-recurso-corpo p {
    margin: 0 0 14px;
    color: var(--text-muted);
}

/* Resumo dos blocos combinados (automacao_relatorio,
   automacao_relatorio_fap) no mesmo tamanho de fonte do resto do
   bloco (pontosLista/destaques, 13px) -- sem essa classe herdava os
   14,5px de .modal-recurso-corpo e ficava maior que o resto. */
.modal-recurso-corpo p.modal-recurso-resumo-combo {
    font-size: 13px;
}

.modal-recurso-corpo ul {
    margin: 0 0 14px;
    padding-left: 22px;
}

.modal-recurso-corpo li {
    margin-bottom: 6px;
    color: var(--text-muted);
}

.modal-recurso-subitem {
    background: var(--bg);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.modal-recurso-subitem strong {
    display: block;
    font-size: 14px;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.modal-recurso-subitem p {
    margin: 0;
    font-size: 13.5px;
}

/* Recurso com imagem própria (RECURSOS_DETALHES[chave].imagem, ex:
   automacao_detalhes.png) -- texto reduzido à esquerda, imagem à
   direita; empilha em coluna no celular. */
.modal-recurso-bloco-com-imagem {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

/* Largura fixa (não "flex:1") de propósito -- se o texto crescesse
   pra ocupar o espaço sobrando quando a imagem é redimensionada, a
   altura dele mudava junto (menos linha quebrada) e o alinhamento
   entre altura do texto x altura da imagem (ver .modal-recurso-
   bloco-imagem, calculado pra não sobrar espaço abaixo do texto)
   ia por água abaixo. */
.modal-recurso-bloco-texto {
    flex: 0 0 428px;
    min-width: 0;
}

/* Largura calculada pra a imagem (proporção 1900x1450 do arquivo)
   não passar muito da altura do texto ao lado -- senão a linha vira
   mais alta que o texto e sobra espaço vazio embaixo do texto até o
   card "O que a automação entrega" começar. */
/* display:flex column pra empilhar 2 imagens (dados.imagemSegunda,
   ver combo do PREMIUM) com espaço entre elas -- com 1 imagem só não
   muda nada visualmente. */
.modal-recurso-bloco-imagem {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: var(--recurso-img-largura, 390px);
    margin: var(--recurso-img-topo, 46px) -18px 0 0;
}

.modal-recurso-bloco-imagem img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 640px) {
    .modal-recurso-bloco-com-imagem {
        flex-direction: column;
    }
    .modal-recurso-bloco-texto {
        flex-basis: auto;
        width: 100%;
    }
    .modal-recurso-bloco-imagem {
        width: 100%;
        margin: 0;
        order: -1;
    }
}

/* Divisor entre 2 recursos empilhados no mesmo popup (plano que inclui
   mais de um, ex: BUSINESS = automação + relatório -- ver
   recursosDoPlano em home.js). */
.modal-recurso-divisor {
    border: none;
    border-top: 1px solid var(--border);
    margin: 36px 0;
}

/* "Ver mais sobre automação"/"Ver menos" -- só o bloco de automação
   nasce recolhido (ver RECURSOS_DETALHES.automacao em home.js); os
   outros recursos aparecem inteiros direto. */
.modal-recurso-expandir,
.modal-recurso-recolher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 14px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--teal-dark);
    cursor: pointer;
}

.modal-recurso-expandir:hover,
.modal-recurso-recolher:hover {
    text-decoration: underline;
}

.modal-recurso-recolher {
    margin: 4px 0 0;
}

/* Frase de fechamento do "Resultado" do Relatório de Auditoria --
   mais curta e direta que os outros parágrafos, ganha um pouco mais
   de destaque (sem virar cor nova: só peso e cor do texto normal). */
.modal-recurso-corpo p.modal-recurso-resultado-final {
    font-weight: 700;
    color: var(--text-dark);
}

/* Aviso do trial (ver abrirRecursoModal em home.js) -- só aparece
   quando o popup foi aberto a partir do plano trial, no fim de tudo,
   como uma linha à parte (o trial usa o mesmo conjunto de recursos do
   PRO, exceto edição no sistema de gestão). */
.modal-recurso-corpo p.modal-recurso-trial-aviso {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
    font-size: 13px;
    font-weight: 600;
    color: var(--amber);
}

/* "O que [recurso] entrega" -- 1 card único (fundo cinza claro),
   título + 3 colunas separadas por linha divisora (não são cards
   separados) -- RECURSOS_DETALHES[chave].destaques, ver Automação
   do eSocial. */
.modal-recurso-destaques-secao {
    margin-top: 6px;
    background: var(--bg);
    border-radius: 12px;
    padding: 20px 22px;
}

.modal-recurso-destaques-secao .modal-recurso-destaques-titulo {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 16px;
}

.modal-recurso-destaques {
    display: grid;
    grid-template-columns: repeat(var(--recurso-destaques-cols, 3), 1fr);
}

/* Padding/divisória só fazem sentido dentro do card de 3 colunas
   (automacao) -- escopado em ".modal-recurso-destaques" de propósito,
   pra não vazar pra ".modal-recurso-lista-pontos" (lista vertical
   simples, automacao_relatorio), que reusa a mesma classe
   ".modal-recurso-destaque" pro item mas com layout bem diferente. */
.modal-recurso-destaques .modal-recurso-destaque {
    padding: 0 18px;
}

.modal-recurso-destaques .modal-recurso-destaque:first-child {
    padding-left: 0;
}

.modal-recurso-destaques .modal-recurso-destaque:last-child {
    padding-right: 0;
}

.modal-recurso-destaques .modal-recurso-destaque:not(:first-child) {
    border-left: 1px solid var(--border);
}

/* Lista vertical simples (não é card, sem fundo/divisórias) --
   RECURSOS_DETALHES[chave].pontosLista, ver Automação + Relatório
   (plano BUSINESS). Fica dentro da coluna de texto, ao lado da
   imagem, não abaixo/fora dela como o card de destaques. */
.modal-recurso-lista-pontos {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Ícone ao lado do título (não mais em cima) -- coluna ficou larga
   o bastante com o popup maior pra caber os 2 lado a lado, deixando
   o card mais baixo/achatado. */
.modal-recurso-destaque-cabecalho {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.modal-recurso-destaque-icone {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--teal-soft);
    color: var(--teal-dark);
}

.modal-recurso-destaque-icone svg {
    width: 18px;
    height: 18px;
}

.modal-recurso-destaque-titulo {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
}

.modal-recurso-destaque .modal-recurso-destaque-texto {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .modal-recurso-destaques {
        grid-template-columns: 1fr;
    }
    .modal-recurso-destaques .modal-recurso-destaque {
        padding-left: 0;
        padding-right: 0;
    }
    .modal-recurso-destaques .modal-recurso-destaque:not(:first-child) {
        border-left: none;
        border-top: 1px solid var(--border);
        padding-top: 16px;
        margin-top: 16px;
    }
}

/* Barra de destaque no rodapé do bloco -- mesmo tom de fundo do card
   de destaques acima, só com a cor da fonte em verde --
   RECURSOS_DETALHES[chave].rodapeTexto. Não confundir com
   .modal-recurso-rodape logo abaixo, que é o botão "Voltar aos
   planos" fora do loop de recursos. */
.modal-recurso-rodape-destaque {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding: 16px 18px;
    background: var(--bg);
    border-radius: 12px;
}

.modal-recurso-rodape-destaque-icone {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--teal-dark);
}

.modal-recurso-rodape-destaque-icone svg {
    width: 20px;
    height: 20px;
}

.modal-recurso-rodape-destaque .modal-recurso-rodape-destaque-texto {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--teal-dark);
}

.modal-recurso-rodape {
    margin-top: 28px;
    text-align: center;
}

@media (max-width: 640px) {
    .modal-recurso-scroll {
        padding: 32px 22px 26px;
    }
    .modal-recurso-titulo {
        font-size: 21px;
    }
    /* Títulos com ícone do lado (automacao_relatorio,
       automacao_relatorio_fap) são mais compridos (2-3 palavras
       extras) -- um pouco menor aqui pra caber em 2 linhas, não 3
       (pedido do usuário, 18/09/2026, no combo do PRO). */
    .modal-recurso-titulo-linha .modal-recurso-titulo {
        font-size: 18px;
    }
    /* Reset do "título largo" (ver .modal-recurso-titulo-linha-larga,
       desktop only) -- no mobile a coluna já é 100% da largura, então
       nowrap faria o título vazar pra fora da tela; volta a quebrar
       normal, mesmo comportamento dos outros títulos com ícone. */
    .modal-recurso-titulo-linha-larga .modal-recurso-titulo {
        white-space: normal;
    }
}

/* ---------- Aviso "Limite de consultas insuficiente" ----------
   (ver static/js/consumo_extra_prompt.js) -- modal maior que o padrão
   (cards de preço lado a lado precisam de espaço), ícone circular "i"
   ao lado do título, cartões de quantidade com selo + preço, caixa de
   dica com ícone própria. Só cores já existentes (--blue/--navy). */
.modal-consumo-insuficiente {
    max-width: 560px;
    padding: 32px;
}

.consumo-insuficiente-cabecalho {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.consumo-insuficiente-cabecalho h3 {
    margin: 0;
    font-size: 21px;
    color: var(--navy);
}

/* Ícone "i" de informação -- SVG (ver svgInfo em consumo_extra_prompt.js),
   não mais um glifo "i" de texto (vinha meio itálico/torto dependendo
   da fonte). O <span> só centraliza o SVG dentro do círculo. */
.consumo-insuficiente-icone {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
}
.consumo-insuficiente-icone svg { width: 19px; height: 19px; }

.modal-consumo-insuficiente p {
    font-size: 13.5px;
}

/* Cartões de quantidade (+100/+200/+300 consultas) -- selo, preço e
   um divisor fino entre os dois, tudo centralizado. */
.consumo-extra-opcoes {
    display: flex;
    gap: 14px;
    margin: 4px 0 20px;
}
.consumo-extra-opcao {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 16px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.consumo-extra-opcao:hover:not(:disabled) {
    border-color: var(--blue);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.18);
}
.consumo-extra-opcao:disabled {
    opacity: 0.6;
    cursor: default;
}
.consumo-extra-opcao-badge {
    background: rgba(59, 130, 246, 0.12);
    color: var(--blue);
    font-size: 18px;
    font-weight: 800;
    padding: 6px 18px;
    border-radius: var(--radius-pill);
}
.consumo-extra-opcao-unidade {
    font-size: 12px;
    color: var(--text-muted);
}
.consumo-extra-opcao-divisor {
    width: 100%;
    height: 1px;
    background: var(--border);
    margin: 5px 0;
}
.consumo-extra-opcao-preco {
    font-size: 20px;
    font-weight: 800;
    color: var(--navy);
}
.consumo-extra-opcao-periodo {
    font-size: 11.5px;
    color: var(--text-muted);
}

.consumo-insuficiente-dica-caixa {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(59, 130, 246, 0.08);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 20px;
}
.consumo-insuficiente-dica-icone {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1.5px solid var(--blue);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.consumo-insuficiente-dica-icone svg { width: 11px; height: 11px; }
.consumo-insuficiente-dica-caixa p {
    margin: 0;
    font-size: 12.5px;
    color: var(--navy);
}

.consumo-insuficiente-fechar-btn {
    background: var(--blue);
    color: #fff;
}
.consumo-insuficiente-fechar-btn:hover { filter: brightness(1.1); }

/* ---------- TOAST ---------- */

/* Pilha de toasts -- cada chamada de mostrarToast() cria um .toast
   novo dentro deste container (nunca mais reaproveita um elemento só),
   pra dar pra ter mais de um ao mesmo tempo (ex: "mensagem não lida no
   suporte" + "agente desatualizado") sem um substituir o outro --
   empilham (o mais novo entra perto do canto, os anteriores sobem),
   nunca sobrepõem. */
.toast-stack {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}

.toast {
    position: relative;
    background: var(--text-dark);
    color: #fff;
    /* padding-right maior -- dá espaço pro "x" de fechar, que agora
       fica POSICIONADO (position:absolute, ver .toast-fechar) fixo na
       quina, fora do fluxo do texto -- sem isso ele ficava "preso" na
       altura da 1ª linha da mensagem, descendo junto se o texto
       quebrasse em mais linhas. Pedido do usuário, 01/10/2026. */
    padding: 14px 36px 14px 20px;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    max-width: 360px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
}

.toast.visivel {
    opacity: 1;
    transform: translateY(0);
}

/* Toast "fechável" (quem não é admin, ver mostrarToast em app.js) --
   fica na tela até a pessoa clicar em fechar, então precisa aceitar
   clique (o toast normal, que some sozinho, continua com
   pointer-events:none pra nunca atrapalhar um clique em algo atrás dele). */
.toast.fechavel {
    pointer-events: auto;
}

.toast-mensagem {
    flex: 1;
    /* pre-line preserva \n como quebra de linha de verdade (senão
       vira espaço, igual "normal") -- continua quebrando linhas
       longas normalmente, só usado pelo toast de "negócio fechado"
       hoje (várias linhas: plano/preço padrão/preço fechado/desconto,
       22/09/2026), sem efeito nos toasts de 1 linha só. */
    white-space: pre-line;
}

/* Link de download dentro do toast (ex.: aviso de nova versão do Agente,
   ver checarAtualizacaoAgente em agente_prompt.js) -- fica oculto (.oculto)
   quando mostrarToast() é chamado sem link, então não aparece um espaço
   vazio clicável à toa nos outros avisos do sistema. pointer-events:auto
   é necessário aqui porque o .toast em si fica com pointer-events:none
   pra admin (some sozinho em 4s, não pode "roubar" clique de nada atrás
   dele) -- sem isso o link aparecia mas não era clicável pra quem é admin. */
.toast-link {
    /* flex-basis 100% -- força o link pra UMA LINHA PRÓPRIA, sempre,
       abaixo da mensagem. Não precisa mais de "order" aqui -- o "x" de
       fechar saiu do fluxo flex de vez (position:absolute, ver
       .toast-fechar), então não compete mais por posição com a
       mensagem/link. Pedido do usuário, 01/10/2026.*/
    flex: 1 1 100%;
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
}

.toast-link:hover {
    color: var(--teal);
}

.toast-fechar {
    /* position:absolute -- fixo na quina superior direita de verdade,
       fora do fluxo flex da mensagem/link (antes ficava preso na
       altura da 1ª linha da mensagem via flexbox, descendo se o texto
       quebrasse em mais linhas). Pedido do usuário, 01/10/2026. */
    position: absolute;
    top: 10px;
    right: 10px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.toast-fechar:hover {
    background: rgba(255, 255, 255, 0.3);
}

.toast.erro { background: var(--red); }
.toast.sucesso { background: var(--teal-dark); }

/* ---------- CONFIGURAÇÃO DE LOGO ---------- */

.divisor {
    border: none;
    border-top: 1px solid var(--border);
    margin: 8px 0 20px 0;
}

.logo-config {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cor-config-linha {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cor-config-linha input[type="color"] {
    width: 44px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    background: none;
}

.cor-config-linha .logo-ajuda {
    flex: 1;
    margin: 0;
}

.logo-preview {
    width: 128px;
    height: 64px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
    background: var(--bg);
    flex-shrink: 0;
}

.logo-config-controles {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.logo-ajuda {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.logo-erro {
    margin: 0;
    font-size: 12px;
    color: var(--red);
    display: none;
}

.logo-erro.visivel {
    display: block;
}

/* ================= RELATÓRIO DE AUDITORIA ================= */

.relatorio-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.relatorio-resumo {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

@media screen and (max-width: 900px) {
    .relatorio-resumo { grid-template-columns: repeat(2, 1fr); }
}

.relatorio-resumo-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
}

.resumo-icone {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 26px;
    height: 26px;
    color: var(--text-muted);
    opacity: 0.35;
}

.resumo-regular .resumo-icone { color: var(--teal-dark); }
.resumo-vencido .resumo-icone { color: #b45309; }
.resumo-irregular .resumo-icone { color: var(--red); }
.resumo-afastado .resumo-icone { color: #8b5cf6; }

.relatorio-resumo-numero {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-dark);
}

.relatorio-resumo-label {
    font-size: 15px;
    color: var(--text-muted);
}

.resumo-regular .relatorio-resumo-numero { color: var(--teal-dark); }
.resumo-vencido .relatorio-resumo-numero { color: #b45309; }
.resumo-irregular .relatorio-resumo-numero { color: var(--red); }
.resumo-afastado .relatorio-resumo-numero { color: #8b5cf6; }

/* ---------- PERCENTUAIS (Status Geral + indicadores) ---------- */

.relatorio-percentuais {
    display: grid;
    grid-template-columns: 1fr 1.3fr 0.8fr;
    gap: 16px;
    margin-top: 16px;
    align-items: stretch;
}

@media screen and (max-width: 1100px) {
    .relatorio-percentuais { grid-template-columns: 1fr 1fr; }
    .percentual-afastados { grid-column: span 2; }
}

@media screen and (max-width: 900px) {
    .relatorio-percentuais { grid-template-columns: 1fr; }
    .percentual-afastados { grid-column: span 1; }
}

.percentual-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.percentual-card .card-title {
    margin-bottom: 0;
}

.percentual-barra {
    background: var(--bg);
    border-radius: 999px;
    height: 7px;
    overflow: hidden;
    flex: 1;
}

.percentual-barra-preenchida {
    height: 100%;
    border-radius: 999px;
}

/* Status Geral */
.percentual-status-geral-corpo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex: 1;
}

.percentual-donut {
    --pct: 0;
    --cor: var(--teal);
    width: 116px;
    height: 116px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(
        var(--cor) calc(var(--pct) * 1%),
        var(--bg) 0
    );
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10) inset;
}

.percentual-donut-numero {
    background: #fff;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    font-weight: 800;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.percentual-donut-legenda {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

.legenda-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
}

.legenda-irregular { background: var(--red); }

/* Afastados / Aguardando — card 3, donut mais compacto (é só
   informativo, não tem "regular/irregular") */
.percentual-afastados-corpo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1;
}

.percentual-donut-pequeno {
    width: 84px;
    height: 84px;
}

.percentual-donut-numero-pequeno {
    width: 58px;
    height: 58px;
    font-size: 15px;
}

.percentual-afastados-legenda {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

/* Indicadores — 1 card só, 3 linhas compactas */
.percentual-card-indicadores {
    justify-content: flex-start;
    gap: 12px;
}

.percentual-indicador-linha {
    display: flex;
    align-items: center;
    gap: 12px;
}

.percentual-indicador-linha:first-of-type {
    margin-top: 16px;
}

.percentual-indicador-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
    width: 90px;
    flex-shrink: 0;
}

.percentual-indicador-numero {
    font-size: 14px;
    font-weight: 800;
    width: 40px;
    text-align: right;
    flex-shrink: 0;
}

/* Coluna à direita — os 3 indicadores empilhados */
.percentual-coluna-indicadores {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.percentual-card-mini {
    padding: 16px 20px;
}


.relatorio-tabela-card {
    padding: 20px;
}

.relatorio-busca {
    margin-bottom: 6px !important;
}

.relatorio-tabela-wrap {
    overflow-x: auto;
}

.relatorio-tabela {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 13.5px;
}

.relatorio-tabela th {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 2px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.relatorio-tabela th.th-centralizado {
    text-align: center;
}

.relatorio-tabela td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    white-space: normal;
    word-break: break-word;
}

.relatorio-tabela tbody tr:nth-child(even) {
    background: #f9fafb;
}

.badge-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.badge-celula {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.relatorio-legenda .legenda-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.relatorio-legenda .legenda-colunas {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Separador vertical sutil entre as duas colunas -- só nesse
       breakpoint, quando as duas ficam lado a lado de verdade. */
    border-right: 1px solid var(--border);
    padding-right: 24px;
}

.relatorio-legenda .legenda-colunas p {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.relatorio-legenda .legenda-colunas strong {
    color: var(--text-dark);
}

.legenda-cores {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.legenda-cores-explicacao {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

@media (max-width: 700px) {
    .relatorio-legenda .legenda-grid { grid-template-columns: 1fr; }
    .relatorio-legenda .legenda-colunas {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid var(--border);
        padding-bottom: 16px;
    }
}

.badge-data {
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--text-muted);
}

.badge-regular,
.badge-em_dia {
    background: var(--teal-soft);
    color: var(--teal-dark);
}

.badge-a_vencer,
.badge-aguardando_envio,
.badge-divergencia_consulta {
    background: #fef3c7;
    color: #b45309;
}

.badge-pendente,
.badge-vencido,
.badge-irregular {
    background: var(--red-soft);
    color: var(--red);
}

.badge-afastado {
    background: #ede9fe;
    color: #7c3aed;
}

.badge-indefinido,
.badge-sem_exame,
.badge-nao_verificado,
.badge-nao_aplicavel {
    background: var(--bg);
    color: var(--text-muted);
}

/* ================= IMPRESSÃO (Exportar PDF via Ctrl+P) ================= */

.only-print {
    display: none;
}

.print-cabecalho {
    display: none;
    flex-direction: column;
    margin-bottom: 14px;
}

.print-cabecalho-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
}

.print-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.print-data-analise {
    font-size: 11px;
    color: var(--text-muted);
}

.print-data-analise strong {
    color: var(--text-dark);
}

.print-linha-teal {
    width: 70px;
    height: 2.5px;
    background: var(--red);
    border-radius: var(--radius-pill);
    margin: 0 auto 14px auto;
}

.print-titulo-bloco {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    margin-bottom: 12px;
}

.print-titulo-bloco h1 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--navy);
}

.print-subtitulo {
    font-size: 12px;
    font-weight: 700;
    color: var(--red);
}

.print-empresa-bar {
    display: flex;
    justify-content: space-between;
    background: #f9fafb;
    border-radius: 8px;
    padding: 8px 14px;
    padding-right: 60px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.print-empresa-bar strong {
    color: var(--text-dark);
}

.print-rodape {
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    break-before: avoid;
    page-break-before: avoid;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 12mm;
    }

    .no-print,
    .header,
    .sidebar,
    .hero-band,
    #busca-colaborador {
        display: none !important;
    }

    .print-cabecalho {
        display: flex;
    }

    .print-rodape {
        display: block;
    }

    body {
        font-size: 11px;
    }

    .main-wrapper,
    .main-wrapper.sem-sidebar,
    .main-wrapper.empurrado {
        margin: 0 !important;
        animation: none !important;
    }

    .container {
        margin: 0 !important;
        padding: 0 !important;
        gap: 10px !important;
        max-width: 100% !important;
    }

    .card,
    .relatorio-tabela-card {
        box-shadow: none !important;
        border: 1px solid var(--border) !important;
        padding: 10px !important;
    }

    /* Resumo: força os 5 cards a caberem numa linha só, compactos */
    .relatorio-resumo {
        gap: 8px !important;
    }

    .relatorio-resumo-card {
        box-shadow: none !important;
        border: 1px solid var(--border) !important;
        padding: 16px 14px !important;
        gap: 4px !important;
    }

    .relatorio-resumo-numero {
        font-size: 22px !important;
    }

    .relatorio-resumo-label {
        font-size: 9.5px !important;
    }

    /* Tabela: fonte e espaçamento reduzidos pra caber dentro da margem */
    .relatorio-tabela {
        font-size: 8.5px !important;
    }

    .relatorio-tabela th,
    .relatorio-tabela td {
        padding: 3px 4px !important;
    }

    .relatorio-tabela th {
        font-size: 7.5px !important;
    }

    .badge-status {
        padding: 1px 5px !important;
        font-size: 7.5px !important;
    }

    .badge-data {
        font-size: 7.5px !important;
        margin-top: 1px !important;
    }

    .relatorio-tabela tbody tr {
        page-break-inside: avoid;
    }

    /* repete o cabeçalho das colunas em toda página nova, quando a
       tabela precisa quebrar em mais de uma página */
    .relatorio-tabela thead {
        display: table-header-group;
    }

    /* o overflow-x:auto do wrap (usado pra rolagem em tela pequena)
       "prende" a tabela e impede a paginação/repetição de cabeçalho
       ao imprimir — desligado aqui */
    .relatorio-tabela-wrap {
        overflow: visible !important;
    }

    /* força o navegador a imprimir as cores de fundo dos badges
       (por padrão, muitos navegadores removem cor de fundo ao imprimir
       pra economizar tinta) */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ---------- DIAGNÓSTICO DO FAP — parâmetros e resultados ---------- */

.fap-parametros-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
}

@media (max-width: 800px) {
    .fap-parametros-grid { grid-template-columns: 1fr; }
    .fap-parametros-linha2 { flex-direction: column; }
    .fap-parametros-trio { flex-direction: column; }
}

.fap-parametros-linha2 {
    display: flex;
    gap: 24px;
    margin-top: 16px;
}

.fap-cnae-campo {
    flex: 1;
    min-width: 0;
}

/* CNAE pode ter descrição longa — corta com "..." em vez de estourar
   a caixa (o valor completo continua acessível passando o mouse). */
.fap-cnae-campo input {
    text-overflow: ellipsis;
}

.fap-parametros-trio {
    flex: 1;
    display: flex;
    gap: 12px;
    min-width: 0;
}

.fap-parametros-trio .field-row {
    flex: 1;
    min-width: 0;
}

.fap-obs {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

.fap-toggle-salarial {
    background: none;
    border: none;
    color: var(--blue);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
}

.fap-toggle-salarial:hover {
    text-decoration: underline;
}

.fap-info-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    margin-left: 6px;
    cursor: help;
    vertical-align: middle;
}

/* ---------- Abas de ano (Resultado do FAP) ---------- */

.fap-resultado-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 20px;
}

.fap-resultado-header .card-title.fap-titulo-grande {
    margin: 0;
    margin-right: auto;
}

.fap-anos-abas {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.fap-ano-aba {
    padding: 8px 18px;
    border-radius: 999px;
    border: none;
    background: var(--bg);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.fap-ano-aba:hover {
    background: var(--border);
}

.fap-ano-aba.ativa {
    background: var(--teal-dark);
    color: #fff;
}

.fap-anos-obs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

.fap-anos-obs svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.fap-resultado-principal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
    margin-bottom: 20px;
}

.fap-ano-vigente-selo {
    position: absolute;
    top: 18px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #d1fae5;
    color: var(--teal-dark);
    font-size: 12.5px;
    font-weight: 700;
}

.fap-ano-vigente-selo svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .fap-ano-vigente-selo {
        position: static;
        margin-bottom: 4px;
    }
}

.fap-resultado-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
}

.fap-resultado-valor {
    font-size: 42px;
    font-weight: 800;
    color: var(--teal-dark);
}

/* Vigência sem nenhum registro pra esse estabelecimento (ver
   _procurar_mensagem_sem_registro_fap em diagnostico_fap.py) -- vira
   uma frase, não um número, então o tamanho gigante do valor normal
   não cabe/não faz sentido aqui. Ainda centralizado e em negrito
   (herda de .fap-resultado-principal), só um tamanho mais contido.
   30/09/2026. */
.fap-resultado-valor-sem-registros {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-muted);
    max-width: 480px;
    text-align: center;
}

.fap-indicadores-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

@media (max-width: 900px) {
    .fap-indicadores-grid { grid-template-columns: repeat(2, 1fr); }
}

.fap-indicador-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.fap-indicador-numero {
    font-size: 30px;
    font-weight: 800;
    color: var(--teal-dark);
}

/* ---------- Termômetro do FAP (0,5 a 2,0) ---------- */

.fap-termometro {
    width: 100%;
    max-width: 420px;
    margin-top: 20px;
}

.fap-termometro-barra {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #10B981 0%, #EAB308 50%, #EF4444 100%);
}

.fap-termometro-marcador {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--text-dark);
    transform: translate(-50%, -50%);
    transition: left 0.4s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.fap-termometro-legendas {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--text-muted);
}

.fap-indicador-label {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.3;
}

/* ---------- Calculadora de economia (Cenário Atual x Projetado) ---------- */

#parametros-card,
#resultado-fap-card,
#fap-evolucao-card {
    padding: 32px 36px;
}

/* "Evolução do FAP" -- mesmo espírito visual do resto do card de
   resultado (título grande + subtítulo discreto), gráfico em SVG
   desenhado à mão (sem biblioteca nova). 04/10/2026. */
.fap-evolucao-subtitulo {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: -10px;
    margin-bottom: 18px;
}

.fap-evolucao-grafico-wrap {
    width: 100%;
    height: 260px;
}

#fap-evolucao-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    /* SVG <text> não herda o font-family do body sozinho em todo
       navegador -- fixa explicitamente a mesma fonte do resto do
       site, pra não destoar (pedido do usuário, 04/10/2026). */
    font-family: "Manrope", "Segoe UI", "Inter", -apple-system, sans-serif;
}

.fap-evolucao-grade-linha {
    stroke: var(--border);
    stroke-width: 1;
    opacity: 0.6;
}

.fap-evolucao-eixo-y {
    font-size: 11px;
    fill: var(--text-muted);
}

.fap-evolucao-linha {
    fill: none;
    stroke: var(--teal);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fap-evolucao-ponto {
    fill: #fff;
    stroke: var(--teal);
    stroke-width: 2;
}

.fap-evolucao-ponto.selecionado {
    fill: var(--teal);
    stroke: #fff;
    stroke-width: 2;
}

.fap-evolucao-ponto-halo {
    fill: var(--teal);
    opacity: 0.15;
}

.fap-evolucao-valor-rotulo {
    font-size: 13px;
    font-weight: 600;
    fill: var(--text-dark);
}

.fap-evolucao-valor-rotulo.selecionado {
    fill: var(--teal-dark);
    font-weight: 700;
}

.fap-evolucao-ano-rotulo {
    font-size: 12px;
    fill: var(--text-muted);
}

.fap-evolucao-ano-rotulo.selecionado {
    fill: #fff;
    font-weight: 700;
}

.fap-evolucao-ano-selo {
    /* Mesmo verde das abas de ano ativas (.fap-ano-aba.ativa) --
       --teal-dark, não --teal (mais vivo demais, destoava). */
    fill: var(--teal-dark);
}

.fap-sim-titulo-bloco {
    margin-bottom: 20px;
}

.fap-sim-titulo-principal {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-dark);
}

/* Classe direta no próprio h2 — mais confiável que depender de
   aninhamento dentro de #parametros-card/#resultado-fap-card.
   Combinar as 2 classes no seletor garante que vence o .card-title
   sozinho, não importa a ordem no arquivo. */
.card-title.fap-titulo-grande {
    font-size: 18px;
}

.fap-sim-titulo-sub {
    font-size: 16px;
    font-weight: 700;
    color: var(--teal-dark);
}

.fap-sim-calculo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.fap-sim-calculo-icone {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #d1fae5;
    color: var(--teal-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fap-sim-calculo-icone svg {
    width: 20px;
    height: 20px;
}

.fap-sim-calculo-texto {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* "X meses." + lápis sempre juntos, nunca quebrando linha entre os
   dois (senão o botão isolado ia parar sozinho no início da linha de
   baixo). */
.fap-periodo-linha-final {
    white-space: nowrap;
}

/* Lápis pra abrir "Período da simulação", ao lado de "Totalizado em X
   meses" -- inline com o texto do parágrafo. */
.fap-periodo-editar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 6px;
    background: var(--bg);
    color: var(--text-muted);
    cursor: pointer;
    vertical-align: middle;
    margin-left: 4px;
    transition: background 0.15s, color 0.15s;
}

.fap-periodo-editar-btn:hover {
    background: var(--teal-soft);
    color: var(--teal-dark);
}

.fap-periodo-editar-btn svg {
    width: 13px;
    height: 13px;
}

.fap-periodo-opcoes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 14px;
}

.fap-periodo-opcao {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
}

.fap-periodo-opcao input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--cor-primaria);
    cursor: pointer;
}

.fap-periodo-opcao-nota {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Período sem dado histórico suficiente pro ano selecionado nas abas
   (ex: pediria o FAP de um ano que o diagnóstico não trouxe) --
   impedido de escolher, igual pedido do usuário (29/09/2026). */
.fap-periodo-opcao-desabilitada {
    cursor: not-allowed;
    color: var(--text-muted);
}

.fap-periodo-opcao-desabilitada input[type="radio"] {
    cursor: not-allowed;
}

.fap-periodo-opcao-desabilitada .fap-periodo-opcao-nota {
    color: var(--red);
}

/* "Período analisado: 2022–2024" -- deixa claro quais anos de verdade
   entraram na soma do Cenário Atual. */
.fap-periodo-analisado {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.fap-periodo-aviso-insuficiente {
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--red);
}

.fap-toggle-rat-grupo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
    padding-left: 16px;
}

.fap-toggle-rat-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

@media (max-width: 700px) {
    .fap-sim-calculo { flex-wrap: wrap; }
    .fap-toggle-rat-grupo { margin-left: 0; padding-left: 54px; }
}

.fap-cenarios-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

@media (max-width: 800px) {
    .fap-cenarios-grid { grid-template-columns: 1fr; }
}

.fap-cenario-coluna {
    background: #fafbfc;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
}

.fap-cenario-topo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.fap-cenario-icone {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fap-cenario-icone svg {
    width: 18px;
    height: 18px;
}

.fap-cenario-icone-atual,
.fap-cenario-icone-projetado {
    background: var(--bg);
    color: var(--text-muted);
}


.fap-cenario-titulo {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
}

/* Mini-card do RAT, dentro da área de campos do cenário — ícone e
   rótulo lado a lado (centralizados um com o outro) numa linha, e o
   número numa linha logo abaixo, deslocado pra alinhar com o início
   do texto "RAT" (não com o ícone). */
.fap-rat-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    margin: 10px 0;
    width: fit-content;
    min-width: 100px;
}

.fap-rat-card-topo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fap-rat-card-icone {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fap-rat-card-icone svg {
    width: 15px;
    height: 15px;
}

.fap-rat-card-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

/* 26px do ícone + 8px do gap — desloca o número pra começar na mesma
   posição horizontal que o texto do rótulo, não embaixo do ícone. */
.fap-rat-card-numero-wrap {
    margin-left: 34px;
}

/* Variante do input do RAT dentro do mini-card — número em destaque,
   sem a borda "pílula" (o card em volta já dá o contorno). */
.fap-rat-card .fap-cenario-input-wrap-pequeno {
    padding: 0;
    max-width: none;
    background: transparent !important;
    border: none;
    justify-content: flex-start;
}

.fap-rat-card .fap-cenario-input-wrap-pequeno input {
    font-size: 14px;
    font-weight: 800;
    width: 24px;
    line-height: 1.2;
    text-align: left !important;
    padding: 0;
}

/* Alinha o rótulo/campo/selo/resultado com o TÍTULO (não com o
   ícone) — mesma indentação de "Cenário Atual"/"Cenário Projetado". */
.fap-cenario-corpo {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
}


.fap-cenario-campos {
    padding-left: 48px; /* 36px do ícone + 12px do gap do topo */
    flex: 0 1 auto;
    min-width: 165px;
}


.fap-cenario-label {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.fap-cenario-valor-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.fap-economia-estimada {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-left: 14px;
    border-left: 1px solid var(--border);
    margin-left: 4px;
}

.fap-economia-estimada-label {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 2px;
}

.fap-economia-estimada-valor {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--teal-dark);
    font-size: 15px;
    font-weight: 800;
}

.fap-economia-estimada.quebra-linha {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
}

.fap-info-fap-valor {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fap-info-fap-valor svg {
    width: 14px;
    height: 14px;
    color: #ef4444;
}

.fap-info-fap-valor svg.info-fap-ampulheta {
    color: var(--text-muted);
}

.fap-info-fap-valor svg.info-fap-check {
    color: var(--teal-dark);
}

.fap-economia-estimada-valor svg {
    width: 14px;
    height: 14px;
}

.fap-cenario-input-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border-radius: 999px;
    /* Direito menor que o resto (era 8px 16px simétrico) -- dá mais
       espaço pra setinha nativa de subir/descer sem alargar o "pill"
       inteiro (com 4 casas decimais, ex: "1,6368", a setinha ficava
       sobrepondo o número). */
    padding: 8px 8px 8px 16px;
    max-width: 100px;
}

.fap-cenario-input-wrap input {
    border: none;
    outline: none;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-dark);
    width: 100%;
    background: transparent;
    text-align: center;
}

/* Cor do "pill" do FAP conforme o status — igual à prancheta.
   Os mesmos seletores valem pro RAT (fap-rat-input-wrap-*), que usa
   a mesma classe pra ficar com a cor do card sincronizada. */
#fap-input-wrap-atual.fap-input-bonus,
#fap-input-wrap-projetado.fap-input-bonus,
#fap-rat-input-wrap-atual.fap-input-bonus,
#fap-rat-input-wrap-projetado.fap-input-bonus { background: #d1fae5; }
#fap-input-wrap-atual.fap-input-bonus input,
#fap-input-wrap-projetado.fap-input-bonus input,
#fap-rat-input-wrap-atual.fap-input-bonus input,
#fap-rat-input-wrap-projetado.fap-input-bonus input { color: var(--teal-dark); }

#fap-input-wrap-atual.fap-input-neutro,
#fap-input-wrap-projetado.fap-input-neutro,
#fap-rat-input-wrap-atual.fap-input-neutro,
#fap-rat-input-wrap-projetado.fap-input-neutro { background: #dbeafe; }
#fap-input-wrap-atual.fap-input-neutro input,
#fap-input-wrap-projetado.fap-input-neutro input,
#fap-rat-input-wrap-atual.fap-input-neutro input,
#fap-rat-input-wrap-projetado.fap-input-neutro input { color: var(--blue); }

#fap-input-wrap-atual.fap-input-malus,
#fap-input-wrap-projetado.fap-input-malus,
#fap-rat-input-wrap-atual.fap-input-malus,
#fap-rat-input-wrap-projetado.fap-input-malus { background: var(--red-soft); }
#fap-input-wrap-atual.fap-input-malus input,
#fap-input-wrap-projetado.fap-input-malus input,
#fap-rat-input-wrap-atual.fap-input-malus input,
#fap-rat-input-wrap-projetado.fap-input-malus input { color: var(--red); }

.fap-cenario-selo {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.fap-cenario-titulo-linha {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

/* Chips do histórico por período no Cenário Atual -- só leitura, uma
   pílula por ano com o FAP (cor = selo daquele ano) e o ano embaixo. */
.fap-periodo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.fap-periodo-chip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.fap-periodo-chip {
    width: 68px;
    padding: 4px 0;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    box-sizing: border-box;
}

.fap-periodo-chip.bonus { background: #d1fae5; color: var(--teal-dark); }
.fap-periodo-chip.neutro { background: #dbeafe; color: var(--blue); }
.fap-periodo-chip.malus { background: var(--red-soft); color: var(--red); }

.fap-periodo-chip-ano {
    font-size: 11px;
    color: var(--text-muted);
}

.fap-selo-bonus { background: #d1fae5; color: var(--teal-dark); }
.fap-selo-neutro { background: #dbeafe; color: var(--blue); }
.fap-selo-malus { background: var(--red-soft); color: var(--red); }

/* Card "Consulta do FAP" -- ícone + título/descrição (texto muda entre
   30/09 e 31/12, ver atualizarTextoLoginFap em diagnostico_fap.html)
   + botão sólido, todos numa linha. */
.fap-login-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.fap-login-icone {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #ede9fe;
    color: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fap-login-icone svg {
    width: 26px;
    height: 26px;
}

.fap-login-texto {
    flex: 1 1 260px;
    min-width: 0;
}

.fap-login-titulo {
    margin: 0 0 4px 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
}

.fap-login-titulo.fap-login-titulo-destaque {
    color: #7c3aed;
}

.fap-login-desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--text-muted);
}

.btn-fap-consultar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #7c3aed;
    color: #fff;
    border: none;
    padding: 13px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-fap-consultar:hover {
    background: #6d28d9;
}

.btn-fap-consultar .seta-acao {
    transition: transform 0.15s ease;
}

.btn-fap-consultar:hover .seta-acao {
    transform: translateX(3px);
}

.fap-cenario-resultado {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.fap-cenario-resultado-label {
    font-size: 12px;
    color: var(--text-muted);
}

.fap-cenario-resultado-valor {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-dark);
}

/* Detalhes extras — afastamentos considerados (malus) ou nota de
   FAP mínimo (bônus) */
.fap-cenario-extra {
    display: flex;
    flex-direction: row;
    gap: 24px;
    margin-top: 20px;
    padding-top: 18px;
    padding-bottom: 4px;
    border-top: 1px solid var(--border);
}

.fap-cenario-extra-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.fap-cenario-extra-icone {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fap-cenario-extra-icone svg {
    width: 17px;
    height: 17px;
}

.fap-cenario-extra-icone-verde {
    background: #d1fae5;
    color: var(--teal-dark);
}

.fap-cenario-extra-icone-vermelho {
    background: var(--red-soft);
    color: var(--red);
}

.fap-cenario-extra-titulo {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
}

.fap-cenario-extra-titulo-normal {
    font-weight: 400;
    color: var(--text-muted);
}

.fap-cenario-extra-valor {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-dark);
    margin-top: 1px;
}

.fap-cenario-extra-sub {
    display: block;
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 1px;
}

.fap-cenario-extra-bonus {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.fap-cenario-extra-neutro {
    flex-direction: column;
    gap: 6px;
}

.fap-cenario-extra-cabecalho {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fap-cenario-extra-icone-azul {
    background: #dbeafe;
    color: var(--blue);
}

.fap-cenario-extra-lista {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 20px;
    row-gap: 2px;
}

/* Posição explícita — 1 item na 1ª coluna, 2 na 2ª — em vez de deixar
   o navegador decidir a distribuição sozinho. */
.fap-cenario-extra-lista li:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
}

.fap-cenario-extra-lista li:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.fap-cenario-extra-lista li:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}

.fap-cenario-extra-lista li {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.4;
    position: relative;
    padding-left: 14px;
}

.fap-cenario-extra-lista li::before {
    content: "•";
    position: absolute;
    left: 2px;
}

/* Só o primeiro item recua até alinhar com a palavra "Motivos" (34px
   do ícone + 10px do gap) — a divisão entre as colunas continua no
   meio do card, já que as colunas têm largura fixa (1fr 1fr). */
.fap-cenario-extra-lista li:first-child {
    padding-left: 44px;
}

.fap-cenario-extra-lista li:first-child::before {
    left: 32px;
}

/* Ilustração de "prancheta" decorativa, à direita de cada card */
.fap-ilustracao-wrap {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 4px;
    margin-top: 4px;
    opacity: 0.6;
}

.fap-cenario-ilustracao {
    width: 52px;
    height: auto;
}

/* Cor conforme o status do FAP daquele cenário (bônus/neutro/malus) —
   calculada dinamicamente, não fixa por card. */
.fap-ilustracao-bonus { background: #dddede5e; }
.fap-ilustracao-bonus .prancheta-fundo { fill: #ecfdf5; stroke: #d8e3e0; }
.fap-ilustracao-bonus .prancheta-clip,
.fap-ilustracao-bonus .prancheta-linha { fill: #99f0d8; }
.fap-ilustracao-bonus .prancheta-linha-clara { fill: #c5f5e6; }
.fap-ilustracao-bonus .prancheta-selo { fill: var(--teal-dark); }

.fap-ilustracao-neutro { background: #dddede5e; }
.fap-ilustracao-neutro .prancheta-fundo { fill: #eef2ff; stroke: #eeeeef; }
.fap-ilustracao-neutro .prancheta-clip,
.fap-ilustracao-neutro .prancheta-linha { fill: #c7d2fe; }
.fap-ilustracao-neutro .prancheta-linha-clara { fill: #dbe3fb; }
.fap-ilustracao-neutro .prancheta-selo { fill: var(--blue); }

.fap-ilustracao-malus { background: #dddede5e; }
.fap-ilustracao-malus .prancheta-fundo { fill: #fef2f2; stroke: #fecaca; }
.fap-ilustracao-malus .prancheta-clip,
.fap-ilustracao-malus .prancheta-linha { fill: #fecaca; }
.fap-ilustracao-malus .prancheta-linha-clara { fill: #fee2e2; }
.fap-ilustracao-malus .prancheta-selo { fill: var(--red); }

@media (max-width: 900px) {
    .fap-ilustracao-wrap { display: none; }
}

.fap-economia-destaque {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 24px;
    padding: 24px 28px;
    background: linear-gradient(135deg, var(--navy) 100%, var(--navy-light) 0%);
    border-radius: var(--radius);
}

.fap-pdf-acoes {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

@media (max-width: 800px) {
    .fap-economia-destaque {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

.fap-economia-metade {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    padding-right: 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.fap-economia-divisor {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.15);
    margin-left: 8px;
}

@media (max-width: 800px) {
    .fap-economia-metade {
        padding-right: 0;
        border-right: none;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        width: 100%;
        justify-content: center;
    }
}

.fap-economia-icone {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: var(--teal-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fap-economia-icone.fap-economia-icone-cinza {
    background: #64748b;
}

.fap-economia-icone svg {
    width: 50px;
    height: 50px;
}

.fap-economia-principal {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 50px;
}

.fap-economia-label {
    font-size: 12.5px;
    color: #cbd5e1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.fap-economia-valor {
    font-size: 40px;
    font-weight: 800;
    color: var(--teal);
}

.fap-economia-valor.fap-economia-prejuizo {
    color: #f87171;
}

.fap-destaque-verde {
    color: #10b981;
    font-weight: 700;
}

.fap-desc-linha2 {
    display: block;
    margin-top: 2px;
}

.fap-desc-espaco {
    margin-top: 10px;
}

.fap-economia-desc-linha {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.fap-economia-desc-icone {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fap-economia-desc-icone svg {
    width: 21px;
    height: 21px;
}

.fap-economia-desc {
    font-size: 13px;
    line-height: 1.5;
    color: #cbd5e1;
}