/* Overrides on top of the Falcon design system (design-system/falcon/assets/css/theme.css + user.css). */

/* ===================== Modo compacto (porte de /mvp: assets/css/app.css) =====================
   /mvp roda o Falcon inteiro num root font-size de 14px (não os 16px padrão do navegador) e
   redefine as variáveis de padding de botão/card/menu pros valores compactos — é essa
   combinação, não uma classe por componente, que faz cada card/botão/tabela sair ~14% maior
   aqui sem ela (16/14). Em style.css (não em dashboard.css) pra valer em toda página do
   sistema — Clientes, Usuários, Ajuda e a tela de login incluídos, não só o Painel Executivo.
   Só no desktop (>= 1200px, com mouse e o menu lateral fixo): no celular e no tablet vale a escala
   padrão do Falcon (16px — a documentada em design-system/falcon/design-system.html), com textos
   legíveis e alvos de toque confortáveis (ver mobile.css). */
@media (min-width: 1200px) {
    html {
        font-size: 14px;
    }
    :root {
        --falcon-btn-padding-y: 0.1875rem;
        --falcon-btn-padding-x: 0.75rem;
        --falcon-btn-font-size: 0.875rem;

        --falcon-card-spacer-y: 0.75rem;
        --falcon-card-spacer-x: 0.875rem;
        --falcon-card-cap-padding-y: 0.625rem;
        --falcon-card-cap-padding-x: 0.875rem;

        --falcon-nav-link-padding-y: 0.4rem;
        --falcon-nav-link-padding-x: 0.75rem;
        --falcon-dropdown-item-padding-y: 0.3rem;
        --falcon-dropdown-item-padding-x: 0.875rem;
    }
}

:root {
    --bn-navy: #03192e;
    --bn-navy-deep: #021326;
    --bn-green: #5b9b4d;
    --bn-green-bright: #68a035;
    --bn-green-light: #75a938;
}

.hidden {
    display: none !important;
}

/* Painel Executivo (Geral) — porte literal das regras de overflow-wrap do /mvp
   (assets/css/dashboard.css) para os cards "KPI counter row"/"Monthly Revenue Target" do
   Falcon: sem isso, um valor de moeda por extenso quebra o número ao meio (ex.: "R$ 1.219./
   960,00") em vez de só na quebra natural entre palavras. */
.kpi-counter-row h4 {
    overflow-wrap: normal;
    word-break: normal;
}
@media (max-width: 767.98px) {
    .kpi-counter-row h4 {
        font-size: 1.05rem;
    }
}

/* "KPI counter row" (util/card-estatistica.js: desenharLinhaKpi) em vermelho — a linha de KPIs da tela
   Despesas; o tema só traz .icon-circle-primary/-success/-info/-warning. */
.icon-circle-danger {
    color: var(--falcon-danger);
    border-color: var(--falcon-danger);
}

/* Cards de indicador que também são índice (tela Integração): cada card leva à sua seção */
.kpi-mini[data-secao] {
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.kpi-mini[data-secao]:hover,
.kpi-mini[data-secao]:focus-visible {
    border-color: var(--falcon-primary);
    box-shadow: 0 0 0 0.15rem rgba(var(--falcon-primary-rgb), 0.15);
    outline: none;
}

/* Wordmark "BPO"+"Nexo" bicolor usado no navbar-brand — mesmo padrão do /mvp (assets/css/app.css). */
.bn-navbar-wordmark {
    font-weight: 600;
    letter-spacing: -0.01em;
}
.bn-navbar-wordmark__bpo {
    color: var(--bn-wordmark-bpo);
}
.bn-navbar-wordmark__nexo {
    color: var(--bn-green-bright);
}
/* cores que mudam com o tema em VARIÁVEIS (e não "[data-bs-theme=dark] .x"): o menu, a barra superior e o
   rodapé fixam o tema claro nos estilos Card/Inverted/Vibrant (layout.js: o tema não muda o estilo do
   menu) — a variável vale pelo tema mais próximo, a regra com o ancestral escuro não */
:root,
[data-bs-theme='light'] {
    --bn-wordmark-bpo: var(--bn-navy);
    --bn-menu-nexo: #68a035;
    --bn-topo-acao: var(--bn-green-bright);
    --bn-topo-acao-hover: #4f8a2a;
}
[data-bs-theme='dark'] {
    --bn-wordmark-bpo: #fff;
    --bn-menu-nexo: #75a938;
    --bn-topo-acao: #8fd47f;
    --bn-topo-acao-hover: #b3e6a6;
}

/* Destaque de linha (cliente/usuário MASTER) na cor "Nexo" da marca — #68A035, a mesma do
   wordmark acima (--bn-green-bright) — usa as variáveis do Bootstrap table-* pra herdar
   hover/listras automáticos, mais uma borda sólida na cor exata pra ficar bem visível. */
.table-master {
    --bs-table-bg: rgba(104, 160, 53, 0.16);
    --bs-table-color: var(--bn-navy);
    --bs-table-striped-bg: rgba(104, 160, 53, 0.22);
    --bs-table-hover-bg: rgba(104, 160, 53, 0.24);
}
.table-master td:first-child {
    box-shadow: inset 3px 0 0 #68A035;
}
[data-bs-theme='dark'] .table-master {
    --bs-table-color: #fff;
}

/* Tela Clientes: bloco do cliente do próprio MASTER com a mesma cor #68A035 na borda esquerda. */
.bloco-cliente-master::before {
    /* faixa sobreposta (não ocupa espaço): uma borda de verdade deslocaria as colunas deste card */
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: #68a035;
    border-radius: var(--bs-card-border-radius) 0 0 var(--bs-card-border-radius);
    z-index: 2;
}
/* ...e um toque discreto da mesma cor no card: contorno verde suave (via sombra, sem deslocar as
   colunas) e cabeçalho com fundo verde bem claro. A tabela de usuários continua neutra. */
.bloco-cliente-master {
    box-shadow: 0 0 0 1px rgba(104, 160, 53, 0.3), var(--falcon-box-shadow);
}
.cabecalho-cliente-master {
    background-color: rgba(104, 160, 53, 0.08);
    border-bottom-color: rgba(104, 160, 53, 0.2);
}
[data-bs-theme='dark'] .cabecalho-cliente-master {
    background-color: rgba(104, 160, 53, 0.14);
}

/* Cabeçalho de cada cliente em grade de colunas FIXAS (CNPJ | Nome | Status | Conta Azul | Ações),
   iguais em todos os cards, para as informações ficarem alinhadas de um cliente para o outro.
   O nome é a única coluna flexível e quebra linha (nunca corta). */
.cabecalho-cliente {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 64px 172px 400px;
    column-gap: 1rem;
    row-gap: 0.5rem;
    align-items: center;
}
.cabecalho-cliente .cc-cnpj {
    white-space: nowrap;
}
.cabecalho-cliente .cc-nome-texto {
    overflow-wrap: anywhere;
}
.cabecalho-cliente .cc-acoes {
    text-align: right;
}
.cabecalho-cliente .cc-acoes .btn {
    white-space: nowrap;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}
/* "Ativar" e "Desativar" com a mesma largura: os botões ficam na mesma posição em todos os cards */
.cabecalho-cliente .cc-acoes .btn-ativo-inativo {
    min-width: 7.2rem;
}
/* telas médias: as ações descem para uma linha própria (à direita); as colunas de cima continuam alinhadas */
@media (max-width: 1439.98px) {
    .cabecalho-cliente {
        grid-template-columns: 150px minmax(0, 1fr) 64px 172px;
    }
    .cabecalho-cliente .cc-acoes {
        grid-column: 1 / -1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 0.5rem;
    }
    .cabecalho-cliente .cc-acoes > .fs-11 {
        margin-bottom: 0 !important;
    }
}
/* telas estreitas: empilha tudo */
@media (max-width: 991.98px) {
    .cabecalho-cliente {
        grid-template-columns: 1fr;
    }
    .cabecalho-cliente .cc-acoes {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .cabecalho-cliente .cc-acoes .d-flex {
        flex-wrap: wrap;
    }
}

/* Tabela de usuários de cada bloco: larguras FIXAS e iguais em todos os blocos, para as colunas
   ficarem alinhadas de um card para o outro (sem isso cada tabela se ajusta ao próprio conteúdo).
   A largura mínima evita espremer as colunas em telas estreitas (a .table-responsive rola). */
.tabela-usuarios {
    table-layout: fixed;
    min-width: 1100px;
}
.tabela-usuarios .col-nome { width: 16%; }
.tabela-usuarios .col-email { width: 19%; }
.tabela-usuarios .col-tipo { width: 11%; }
.tabela-usuarios .col-status { width: 7%; }
.tabela-usuarios .col-principal { width: 7%; }
.tabela-usuarios .col-ultimo-acesso { width: 12%; }
.tabela-usuarios .col-acoes { width: 28%; }
.tabela-usuarios td,
.tabela-usuarios th {
    vertical-align: middle;
}

/* Célula Nome: nome (encolhe com reticências) + estrela "Tornar principal" logo depois, sempre visível. */
.celula-nome-usuario {
    display: flex;
    align-items: center;
    min-width: 0;
}
.celula-nome-usuario > .text-truncate {
    min-width: 0;
}

/* "Tornar principal" depois do nome: estrela vazada que fica amarela ao passar o mouse. */
.btn-tornar-principal {
    flex-shrink: 0;
    font-size: inherit;
    line-height: 1;
    vertical-align: baseline;
    color: var(--falcon-tertiary-color);
}
.btn-tornar-principal:hover,
.btn-tornar-principal:focus-visible {
    color: var(--falcon-warning);
}

/* Presença: ponto verde "online" na frente do nome; o nome vira botão que abre os acessos. */
.presenca-nome {
    font-size: inherit;
    color: inherit;
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: baseline;
    border: 0;
}
.presenca-nome:hover,
.presenca-nome:focus-visible {
    color: var(--falcon-primary);
    text-decoration: underline dotted;
}
.presenca-nome.online {
    font-weight: 600;
}
.presenca-ponto {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-right: 0.4rem;
    border-radius: 50%;
    background: var(--falcon-success);
    vertical-align: 0.05em;
    box-shadow: 0 0 0 0 rgba(var(--falcon-success-rgb), 0.55);
    animation: presenca-pulso 2s ease-out infinite;
}
@keyframes presenca-pulso {
    0% { box-shadow: 0 0 0 0 rgba(var(--falcon-success-rgb), 0.55); }
    70%, 100% { box-shadow: 0 0 0 0.35rem rgba(var(--falcon-success-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
    .presenca-ponto { animation: none; }
}


/* Falcon's vertical navbar assumes a full app shell with search/notifications; our topbar is
   simpler, so the leftover flex space needs an explicit spacer to push the user menu right. */
.navbar-top .topbar-spacer {
    flex: 1 1 auto;
}

/* Tela Ajuda (como-funciona-permissoes.html): 3 tabelas em cards separados, cada uma com
   table-layout automático por padrão — como o texto da coluna "Menu" varia de tamanho entre
   elas (ex.: "Clientes" vs. "Baixar Contas a Pagar/Receber"), as colunas Master/Administrador/
   Usuário Comum ficavam em posições X diferentes de card pra card. Largura fixa e igual nas 3
   alinha as colunas verticalmente entre os cards. */
.tabela-permissoes {
    table-layout: fixed;
}
.tabela-permissoes col:first-child {
    width: 40%;
}
.tabela-permissoes col:not(:first-child) {
    width: 20%;
}

.actions-cell {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Identidade visual BPO Nexo aplicada à tela de login — mesmo padrão visual do /mvp
   (assets/css/auth.css), isolado em .bponexo-auth para não afetar outras telas. */
.bponexo-auth .card {
    border-radius: 1rem;
    box-shadow: 0 1.5rem 3rem rgba(3, 25, 46, 0.14);
}

/* Chegada vindo do "Área do cliente" do site (js/paginas/transicao-chegada.js): a saída do site termina na
   cor de fundo desta tela, e o card continua o zoom, saindo do foco até assentar. */
.chegando-do-site .bponexo-auth .card {
    animation: bn-chegada-card 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.chegando-do-site .bponexo-auth #theme-toggle {
    animation: bn-chegada-fade 0.5s ease-out 0.25s both;
}
@keyframes bn-chegada-card {
    from { opacity: 0; transform: scale(1.08); filter: blur(8px); }
    to   { opacity: 1; transform: none; filter: none; }
}
@keyframes bn-chegada-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .chegando-do-site .bponexo-auth .card { animation: bn-chegada-fade 0.2s ease-out both; }
}

.bponexo-panel {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    padding: 2.25rem 1.75rem 1.75rem;
    /* Sólido na cor exata do círculo navy da logo (logo.png/.webp):
       com degradê, o círculo aparecia como um disco mais claro. */
    background: #031e35;
}

.bponexo-panel__curve {
    position: absolute;
    right: -8%;
    bottom: -6%;
    width: 65%;
    height: auto;
    pointer-events: none;
}

.bponexo-panel__curve path {
    fill: none;
    stroke: var(--bn-green-bright);
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: 0.9;
}

.bponexo-panel__body {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 1.75rem;
}

.bponexo-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    max-width: 240px;
}

.bponexo-brand__icon {
    width: 128px;
    height: 128px;
    flex: none;
    display: block;
}

.bponexo-brand__icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.bponexo-brand__text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.bponexo-brand__word {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.625rem;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.bponexo-brand__bpo {
    color: #ffffff;
}

.bponexo-brand__nexo {
    color: var(--bn-green-bright);
}

.bponexo-brand__tagline {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.bponexo-brand__tagline-line1 {
    display: block;
    color: rgba(255, 255, 255, 0.92);
}

.bponexo-brand__tagline-line2 {
    display: block;
    color: var(--bn-green-bright);
}

.bponexo-panel__footer {
    position: relative;
    z-index: 1;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.85);
}

.bponexo-panel__footer a {
    color: var(--bn-green-bright);
    font-weight: 500;
    text-decoration: underline;
    transition: color 0.15s ease-in-out;
}

.bponexo-panel__footer a:hover,
.bponexo-panel__footer a:focus-visible {
    color: var(--bn-green-light);
}

@media (max-width: 767.98px) {
    .bponexo-panel {
        padding: 1.75rem 1.5rem;
    }

    .bponexo-panel__body {
        padding-block: 0.25rem;
    }

    .bponexo-brand {
        flex-direction: row;
        align-items: center;
        text-align: left;
        max-width: none;
        gap: 0.9rem;
    }

    .bponexo-brand__icon {
        width: 84px;
        height: 84px;
    }
}

.bponexo-auth h3,
.bponexo-auth h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--bn-navy);
}

.bponexo-auth .form-label {
    color: var(--bn-navy);
}

.bponexo-auth .form-control:focus {
    border-color: var(--bn-green);
    box-shadow: 0 0 0 0.25rem rgba(91, 155, 77, 0.2);
}

.bponexo-auth .btn-primary {
    --falcon-btn-bg: var(--bn-navy);
    --falcon-btn-border-color: var(--bn-navy);
    --falcon-btn-hover-bg: #052239;
    --falcon-btn-hover-border-color: #052239;
    --falcon-btn-focus-shadow-rgb: 91, 155, 77;
    --falcon-btn-active-bg: #010d18;
    --falcon-btn-active-border-color: #010d18;
    --falcon-btn-disabled-bg: var(--bn-navy);
    --falcon-btn-disabled-border-color: var(--bn-navy);
}

.bponexo-auth .col-md-7 a {
    color: var(--bn-green);
    transition: color 0.15s ease-in-out;
}

.bponexo-auth .col-md-7 a:hover,
.bponexo-auth .col-md-7 a:focus-visible {
    color: var(--bn-green-bright);
}

/* Categoria Genérica — hierarquia do "Plano de contas". Cada nível tem peso visual próprio:
   raiz = faixa colorida pela natureza (receitas verde / despesas vermelho), grupo e subgrupo em
   negrito decrescente, conta em texto normal. O recuo vem do aninhamento (.arvore-filhos), que
   desenha a linha-guia vertical do ramo — dá para seguir de uma conta até o grupo dela. */
.arvore-categoria-generica {
    --cg-cor: var(--falcon-secondary);
    --cg-cor-rgb: var(--falcon-secondary-rgb);
}
.arvore-categoria-generica [data-natureza='receita'] { --cg-cor: var(--falcon-success); --cg-cor-rgb: var(--falcon-success-rgb); }
.arvore-categoria-generica [data-natureza='despesa'] { --cg-cor: var(--falcon-danger); --cg-cor-rgb: var(--falcon-danger-rgb); }

.arvore-categoria-generica .arvore-linha {
    padding: 0.3rem 0.5rem;
    border-radius: 0.375rem;
    min-height: 2.25rem;
}
.arvore-categoria-generica .arvore-linha:hover {
    background: var(--falcon-tertiary-bg);
}
.arvore-categoria-generica .arvore-toggle {
    width: 20px;
    flex: 0 0 20px;
}
.arvore-categoria-generica .arvore-icone {
    width: 16px;
    text-align: center;
    color: var(--falcon-tertiary-color);
}
.arvore-categoria-generica .arvore-codigo {
    min-width: 76px;
    font-size: 0.75rem;
    color: var(--falcon-tertiary-color);
}

/* ramo: recuo + linha-guia alinhada ao chevron do pai */
.arvore-categoria-generica .arvore-filhos {
    margin-left: 1.05rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--falcon-border-color);
}
.arvore-categoria-generica .nivel-1 > .arvore-filhos {
    border-left-color: rgba(var(--cg-cor-rgb), 0.35);
}

/* nível 1 — raiz */
.arvore-categoria-generica .nivel-1 + .nivel-1 {
    margin-top: 1rem;
}
.arvore-categoria-generica .nivel-1 > .arvore-linha {
    background: rgba(var(--cg-cor-rgb), 0.1);
    box-shadow: inset 4px 0 0 var(--cg-cor);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
}
.arvore-categoria-generica .nivel-1 > .arvore-linha .arvore-descricao {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--cg-cor);
}
.arvore-categoria-generica .nivel-1 > .arvore-linha .arvore-icone,
.arvore-categoria-generica .nivel-1 > .arvore-linha .arvore-codigo {
    color: var(--cg-cor);
}

/* nível 2 — grupo */
.arvore-categoria-generica .nivel-2 {
    margin-top: 0.35rem;
}
.arvore-categoria-generica .nivel-2 > .arvore-linha {
    border-bottom: 1px solid var(--falcon-border-color);
    border-radius: 0.375rem 0.375rem 0 0;
}
.arvore-categoria-generica .nivel-2 > .arvore-linha .arvore-descricao {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--falcon-emphasis-color);
}
.arvore-categoria-generica .nivel-2 > .arvore-linha .arvore-icone {
    color: var(--cg-cor);
}

/* nível 3 — subgrupo */
.arvore-categoria-generica .nivel-3 > .arvore-linha .arvore-descricao {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--falcon-body-color);
}

/* 1.01.001 RECEITAS DE SERVIÇOS em destaque (contas que vêm da Categoria Específica / do nicho) */
.arvore-categoria-generica .arvore-linha.arvore-destaque {
    background-color: rgba(var(--falcon-success-rgb), 0.1);
    box-shadow: inset 3px 0 0 var(--falcon-success);
    border-radius: 0.375rem;
}
.arvore-categoria-generica .arvore-linha.arvore-destaque:hover {
    background-color: rgba(var(--falcon-success-rgb), 0.16);
}
.arvore-categoria-generica .arvore-linha.arvore-destaque .arvore-descricao,
.arvore-categoria-generica .arvore-linha.arvore-destaque .arvore-icone,
.arvore-categoria-generica .arvore-linha.arvore-destaque .arvore-codigo {
    color: var(--falcon-success);
    font-weight: 700;
}

/* nível 4 — conta de lançamento */
.arvore-categoria-generica .nivel-4 > .arvore-linha {
    min-height: 2rem;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}
.arvore-categoria-generica .nivel-4 > .arvore-linha .arvore-descricao {
    font-size: 0.8125rem;
    color: var(--falcon-secondary-color);
}
.arvore-categoria-generica .nivel-4 > .arvore-linha .arvore-badge-nivel {
    display: none; /* o ícone e o texto normal já dizem que é conta; o selo só polui as linhas mais numerosas */
}

/* ações: em telas com mouse só aparecem ao passar/focar a linha (sempre visíveis no toque) */
@media (hover: hover) {
    .arvore-categoria-generica .arvore-acoes {
        opacity: 0;
        transition: opacity 0.15s;
    }
    .arvore-categoria-generica .arvore-linha:hover .arvore-acoes,
    .arvore-categoria-generica .arvore-linha:focus-within .arvore-acoes {
        opacity: 1;
    }
}

@media (max-width: 575.98px) {
    .arvore-categoria-generica .arvore-filhos {
        margin-left: 0.55rem;
        padding-left: 0.4rem;
    }
    .arvore-categoria-generica .arvore-codigo {
        min-width: 0;
    }
}

/* Barra superior: botões de tema e tela cheia no mesmo visual do site (assets/css/style.css,
   .tema-toggle) e botão da conta (avatar + nome + seta) que abre o menu com o "Sair". */
:root,
[data-bs-theme="light"] {
    --bn-toggle-bg: #ffffff;
    --bn-toggle-bg-hover: #eef2f8;
    --bn-toggle-borda: #cdd9e8;
    --bn-toggle-borda-hover: rgba(91, 155, 77, 0.5);
    --bn-toggle-cor: #748194;
    --bn-toggle-cor-hover: #0b1727;
    --bn-toggle-anel: rgba(91, 155, 77, 0.35);
}
[data-bs-theme="dark"] {
    --bn-toggle-bg: rgba(255, 255, 255, 0.045);
    --bn-toggle-bg-hover: rgba(255, 255, 255, 0.08);
    --bn-toggle-borda: rgba(255, 255, 255, 0.12);
    --bn-toggle-borda-hover: rgba(117, 169, 56, 0.5);
    --bn-toggle-cor: #8b97a8;
    --bn-toggle-cor-hover: #f5f7fa;
    --bn-toggle-anel: rgba(117, 169, 56, 0.4);
}
.bn-icone-toggle,
.bn-usuario-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border-radius: 8px;
    background-color: var(--bn-toggle-bg);
    border: 1px solid var(--bn-toggle-borda);
    color: var(--bn-toggle-cor);
    cursor: pointer;
    transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}
.bn-icone-toggle {
    width: 36px;
    padding: 0;
}
/* Barra superior como a do dashboard do Portal do Cliente no site: "● Sincronizado há N min", sino e
   usuário com nome e empresa (layout.js + auth.js) */
/* à direita da barra, em duas linhas: os ícones (tema, tela cheia, sino e usuário) em cima e a
   sincronização embaixo, alinhados à direita (layout.js: montarTopbarHtml) */
.bn-topo-direita { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; padding: 4px 0; }
.bn-topo-sinc { display: inline-flex; align-items: center; font-size: 0.75rem; line-height: 1.2; color: var(--falcon-gray-700); white-space: nowrap; margin-right: 0.5rem; }
.bn-topo-sinc[hidden] { display: none; }
/* abaixo de 992px a linha da sincronização não cabe: só os ícones */
@media (max-width: 991.98px) { .bn-topo-sinc { display: none; } }
/* as etiquetas Completa / Parcial (renderizarUltimaSincronizacao), em linha, separadas por "/" */
.bn-topo-sinc .sync-etiquetas,
#topo-sinc-texto { display: inline-flex; align-items: center; gap: 6px; }
/* "Parcial (…)" clicável = Sync Parcial (auth.js: ligarParcialNoTopo) */
/* aparência de link: verde "Nexo", sublinhado; ao passar o mouse, o sublinhado firma */
.bn-topo-sinc__acao {
    padding: 2px 6px; margin: -2px -6px; border-radius: 6px; cursor: pointer;
    color: var(--bn-topo-acao); text-decoration: underline; text-decoration-color: rgba(104, 160, 53, 0.45); text-underline-offset: 3px;
    transition: background-color 0.2s, color 0.2s, text-decoration-color 0.2s;
}
.bn-topo-sinc__acao .fw-semi-bold { color: inherit; }
/* mãozinha (o cabeçalho das telas põe cursor "help" nas etiquetas: .sync-etiquetas .sync-etiqueta) */
#topo-sinc-texto .bn-topo-sinc__acao,
#topo-sinc-texto .bn-topo-sinc__acao * { cursor: pointer; }
.bn-topo-sinc__acao:hover { background: rgba(104, 160, 53, 0.1); color: var(--bn-topo-acao-hover); text-decoration-color: currentColor; }
.bn-topo-sinc__acao:focus-visible { outline: 2px solid var(--bn-green-bright); outline-offset: 1px; }
.bn-topo-sinc__acao.is-sincronizando { opacity: 0.6; pointer-events: none; }
.bn-topo-sinc__acao.is-sincronizando svg { animation: fa-spin 1s linear infinite; }
.bn-topo-sino { position: relative; text-decoration: none; }
.bn-topo-sino__aviso { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #fa3b1d; box-shadow: 0 0 0 2px var(--falcon-card-bg, #fff); }
.bn-topo-sino__aviso[hidden] { display: none; }
.bn-usuario-botao.bn-usuario-botao--nome { gap: 10px; width: auto; padding: 0; border-radius: 999px; }
@media (min-width: 768px) { .bn-usuario-botao.bn-usuario-botao--nome { padding-right: 14px; } }
.bn-usuario-botao__nome { flex-direction: column; align-items: flex-start; min-width: 0; max-width: 220px; line-height: 1.2; text-align: left; }
.bn-usuario-botao__nome b { font-size: 0.78rem; font-weight: 600; color: var(--falcon-gray-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bn-usuario-botao__nome small { font-size: 0.68rem; color: var(--falcon-gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bn-usuario-botao__nome b:empty + small:empty { display: none; }
.bn-icone-toggle[hidden] {
    display: none;
}
.bn-icone-toggle svg {
    width: 16px;
    height: 16px;
}
.bn-icone-toggle:hover,
.bn-usuario-botao:hover,
.bn-usuario-botao[aria-expanded="true"] {
    background-color: var(--bn-toggle-bg-hover);
    border-color: var(--bn-toggle-borda-hover);
    color: var(--bn-toggle-cor-hover);
}
.bn-icone-toggle:focus-visible,
.bn-usuario-botao:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--bn-toggle-anel);
}

/* Botão da conta: só o avatar redondo, como na Phoenix (design-system/phoenix/apps/chat.html) */
.bn-usuario-botao {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border-color: transparent;
    background-color: transparent;
}
.bn-usuario-botao .bn-avatar {
    width: 40px;
    height: 40px;
    font-size: 0.8rem;
}
.bn-usuario-botao:hover,
.bn-usuario-botao[aria-expanded="true"] {
    background-color: transparent;
    border-color: transparent;
    box-shadow: 0 0 0 3px var(--bn-toggle-anel);
}

/* Avatar: iniciais em círculo; MASTER mostra a logo */
.bn-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--bn-navy, #0b2a4a);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    overflow: hidden;
}
.bn-avatar--grande {
    width: 64px;
    height: 64px;
    font-size: 1.25rem;
}
/* a logo já é um círculo: ocupa o avatar inteiro, sem moldura branca em volta */
.bn-avatar--logo {
    background-color: transparent;
}
.bn-avatar--logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* logo.png tem ~26% de margem transparente de cada lado (o círculo ocupa 47% da imagem):
       amplia para o círculo preencher o avatar */
    transform: scale(2.1);
}

/* Menu da conta (desenho do "dropdown-profile" da Phoenix) */
.bn-usuario-menu {
    width: 280px;
}
.bn-usuario-menu .min-w-0 {
    min-width: 0;
}
.bn-usuario-menu .bn-menu-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 1rem;
    font-size: 0.8125rem;
}
.bn-usuario-menu .bn-menu-icone {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--falcon-gray-600);
}
.bn-usuario-menu .bn-sair {
    gap: 0.5rem;
    font-weight: 600;
}
.bn-usuario-menu .bn-sair .bn-menu-icone {
    color: inherit;
}
.bn-usuario-menu .bn-sair:hover {
    color: var(--falcon-danger);
    border-color: rgba(var(--falcon-danger-rgb), 0.5);
}
.bn-usuario-menu .bn-menu-valor {
    color: var(--falcon-gray-800);
    font-weight: 600;
}

/* Seletor de empresa (à esquerda na barra superior): mais largo, seta encostada na direita */
@media (min-width: 768px) {
    #empresa-global-toggle {
        min-width: 300px;
    }
    #empresa-global-nome {
        max-width: 360px;
    }
}
#empresa-global-toggle .fa-chevron-down {
    margin-left: auto;
}

/* Logo da marca no topo do menu: logo.png tem ~26% de margem transparente de cada lado, então
   recorta num círculo e amplia — o símbolo passa a ocupar os 34px inteiros. */
.bn-navbar-logo {
    display: inline-flex;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.bn-navbar-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(2.1);
}

/* =========================================================
   COMPARTILHAR TELA AO VIVO E LINK COMPARTILHADO (ver js/comum/apresentacao-ao-vivo.js e js/paginas/apresentacao-espectador.js)
   ========================================================= */

/* Ponto vermelho pulsando: "ao vivo" */
.apresentacao-ao-vivo__ponto {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e63757;
    box-shadow: 0 0 0 0 rgba(230, 55, 87, 0.6);
    animation: bn-ao-vivo 1.6s ease-out infinite;
    flex-shrink: 0;
}
@keyframes bn-ao-vivo {
    0% { box-shadow: 0 0 0 0 rgba(230, 55, 87, 0.6); }
    80%, 100% { box-shadow: 0 0 0 8px rgba(230, 55, 87, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .apresentacao-ao-vivo__ponto { animation: none; }
}

/* "Ao vivo" de quem transmite: no topo do menu lateral direito do modo chamada (apresentacao-audio) */
.ao-vivo-painel {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--falcon-card-bg, #fff);
    border: 1px solid rgba(230, 55, 87, 0.35);
    box-shadow: 0 0 0 3px rgba(230, 55, 87, 0.08);
}
.ao-vivo-painel[hidden] { display: none; }
.ao-vivo-painel__linha { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; min-width: 0; }
.ao-vivo-painel__linha b { color: #e63757; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; }
.ao-vivo-painel__aviso { margin: 0; font-size: 0.75rem; line-height: 1.4; color: #c47d06; }
.ao-vivo-painel__acoes { display: flex; flex-wrap: wrap; gap: 6px; }
/* link de acesso à vista: temporário, sem cliente vinculado */
.ao-vivo-painel__link { display: grid; gap: 6px; min-width: 0; }
.ao-vivo-painel__link input { font-size: 0.72rem; color: var(--falcon-gray-700); background: var(--falcon-gray-100); }
.ao-vivo-painel__tipo { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; background: rgba(39, 188, 253, 0.14); color: #0b6aa2; }
.ao-vivo-painel__tipo--tela { background: rgba(104, 160, 53, 0.14); color: #4f8a2a; }
.ao-vivo-painel__validade { font-size: 0.7rem; color: var(--falcon-gray-600); }
/* "Ao vivo" no menu da direita (sem link neste navegador): os "Compartilhar tela" no ar */
.ao-vivo-lista__descricao { margin: 0; font-size: 0.75rem; color: var(--falcon-gray-600); }
.ao-vivo-lista__dica { margin: 0; font-size: 0.7rem; line-height: 1.45; color: var(--falcon-gray-600); }
.ao-vivo-lista .list-group-item { padding-left: 0.75rem; padding-right: 0.75rem; }
.ao-vivo-painel__acoes[hidden],
.ao-vivo-painel__confirmar[hidden] { display: none; }
.ao-vivo-painel__confirmar p { font-size: 0.78rem; line-height: 1.45; }
/* outro MASTER assumiu a transmissão (o "Assumir" à vista) */
.ao-vivo-painel.pausada { border-color: rgba(245, 176, 65, 0.6); box-shadow: 0 0 0 3px rgba(245, 176, 65, 0.12); }
.ao-vivo-painel.pausada .apresentacao-ao-vivo__ponto { background: #f5b041; animation: none; }

/* Quem assiste um link do "Compartilhar tela": o vídeo da tela vira o palco (sem telas do sistema) */
.apresentacao-espectador.so-tela .video-palco { position: absolute; inset: 16px; width: auto; max-width: none; z-index: 4; align-content: start; }
.apresentacao-espectador.so-tela .video-palco__recolher { display: none; }
.apresentacao-espectador.so-tela .video-palco__grade { max-height: none; height: 100%; overflow: hidden; grid-template-columns: minmax(0, 1fr) 220px; align-items: start; }
.apresentacao-espectador.so-tela .video-bloco--tela { grid-column: 1; grid-row: 1 / span 4; height: calc(100vh - 120px); aspect-ratio: auto; }
.apresentacao-espectador.so-tela .video-bloco:not(.video-bloco--tela) { grid-column: 2; }
.apresentacao-espectador.so-tela .audio-dock { z-index: 1110; }
@media (max-width: 767.98px) {
    .apresentacao-espectador.so-tela .video-palco__grade { grid-template-columns: minmax(0, 1fr); }
    .apresentacao-espectador.so-tela .video-bloco--tela { grid-row: auto; height: auto; aspect-ratio: 16 / 9; }
    .apresentacao-espectador.so-tela .video-bloco:not(.video-bloco--tela) { grid-column: 1; }
}

/* Tela do Painel dentro do link compartilhado (iframe): sem menu, sem barra, sem botões de ação */
.modo-espectador .navbar-vertical,
.modo-espectador .navbar-top,
.modo-espectador #sync-status,
.modo-espectador #aviso-beta-sistema { display: none !important; }
/* mesmo respiro da tela original: à esquerda, o recuo que o menu dava (igual ao da direita, do container
   do Falcon); no topo, o espaço que fica entre a barra do topo e o cabeçalho da tela */
.modo-espectador .content { margin-left: 0 !important; padding-top: 0.75rem; }
.modo-espectador .container-fluid[data-layout] { padding-left: calc(var(--falcon-gutter-x) * 0.5) !important; }
.modo-espectador body { overflow-x: hidden; }

/* Página de quem assiste: barra fina no topo e a tela apresentada ocupando o resto */
.apresentacao-espectador { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.apresentacao-espectador__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--falcon-border-color);
    background: var(--falcon-card-bg, #fff);
}
.apresentacao-espectador__info { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; line-height: 1.25; }
.apresentacao-espectador__empresa { font-weight: 600; font-size: 0.9rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apresentacao-espectador__tela { font-size: 0.72rem; color: var(--falcon-gray-600); letter-spacing: 0.08em; text-transform: uppercase; }
.apresentacao-espectador__selo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(230, 55, 87, 0.1);
    color: #e63757;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.apresentacao-espectador__selo.hidden { display: none; }
.apresentacao-espectador__palco { position: relative; flex: 1; min-width: 0; min-height: 0; background: var(--falcon-body-bg, #edf2f9); }
/* a tela apresentada + o MENU LATERAL fixo à direita (áudio e vídeo — antes um quadro flutuante no canto) */
.apresentacao-espectador__area { flex: 1; min-height: 0; display: flex; }
.apresentacao-espectador__lateral.audio-dock {
    position: relative; left: auto; bottom: auto; z-index: 5;
    flex: none; width: 340px; max-width: none; height: 100%; min-height: 0; max-height: none;
    border: 0; border-left: 1px solid var(--falcon-border-color); border-radius: 0;
    background: var(--falcon-card-bg, #fff);
    box-shadow: -12px 0 32px -24px rgba(3, 25, 46, 0.45);
    overflow-x: hidden; overflow-y: auto;
}
.apresentacao-espectador__lateral.audio-dock.falando { border-left-color: #68a035; box-shadow: inset 3px 0 0 #68a035, -12px 0 32px -24px rgba(3, 25, 46, 0.45); }
.apresentacao-espectador__lateral .audio-janela__topo { position: sticky; top: 0; z-index: 2; padding: 12px 14px; }
.apresentacao-espectador__lateral .audio-janela__titulo { font-size: 0.95rem; }
.apresentacao-espectador__lateral .audio-dock__contagem { display: block; margin: 0; }
.apresentacao-espectador__lateral .audio-janela__corpo { padding: 16px; gap: 12px; }
.apresentacao-espectador__lateral .flex-1 { flex: 1; }
/* recolhido: o menu some e fica a aba na borda (a chamada continua) */
.lateral-recolhido .apresentacao-espectador__lateral { display: none; }
@media (max-width: 767.98px) {
    /* celular: o menu vai para baixo da tela apresentada */
    .apresentacao-espectador__area { flex-direction: column; }
    .apresentacao-espectador__lateral.audio-dock { width: 100%; height: 45vh; border-left: 0; border-top: 1px solid var(--falcon-border-color); }
}
.apresentacao-espectador__palco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.apresentacao-espectador__mensagem { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 16px; }
.apresentacao-espectador__mensagem.hidden { display: none; }
/* Carregando do link ("Abrindo a apresentação…"): a logo do BPO Nexo respirando, com um halo verde, e o anel
   verde da marca girando em volta */
.bn-carregando-logo { position: relative; display: inline-grid; place-items: center; width: 80px; height: 80px; }
.bn-carregando-logo__circulo {
    display: inline-flex;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 50%;
    animation: bn-logo-respira 1.8s ease-in-out infinite;
}
/* a mesma logo da barra do topo (.bn-navbar-logo): o PNG tem margem, então ele cresce dentro do círculo */
.bn-carregando-logo__circulo img { width: 100%; height: 100%; object-fit: cover; transform: scale(2.1); }
.bn-carregando-logo__anel {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 45%, rgba(104, 160, 53, 0.25) 60%, #68a035 92%, transparent 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    animation: bn-logo-giro 1.1s linear infinite;
}
@keyframes bn-logo-giro { to { transform: rotate(360deg); } }
@keyframes bn-logo-respira {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(104, 160, 53, 0.45); }
    50% { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(104, 160, 53, 0); }
}
/* a abertura do link: a área inteira na cor da marca (azul-marinho), a logo grande com o anel, o nome
   BPO Nexo, o título em branco e uma barra verde correndo embaixo */
.apresentacao-espectador__marca,
.apresentacao-espectador__progresso { display: none; }
.apresentacao-espectador__mensagem.abrindo {
    background: radial-gradient(circle at 50% 42%, #0d2f52 0%, #03192e 58%, #010c17 100%);
}
.apresentacao-espectador__mensagem.abrindo .card { max-width: 40rem !important; border: 0; background: transparent; box-shadow: none; }
.apresentacao-espectador__mensagem.abrindo #mensagem-icone { margin-bottom: 1.25rem !important; }
.apresentacao-espectador__mensagem.abrindo .bn-carregando-logo { width: 168px; height: 168px; }
.apresentacao-espectador__mensagem.abrindo .bn-carregando-logo__circulo { width: 124px; height: 124px; }
.apresentacao-espectador__mensagem.abrindo .bn-carregando-logo__anel {
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
}
.apresentacao-espectador__mensagem.abrindo .apresentacao-espectador__marca {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 2.25rem;
    line-height: 1.1;
    animation: bn-abrindo-surgir 0.8s ease-out both;
}
.apresentacao-espectador__mensagem.abrindo .bn-navbar-wordmark__bpo { color: #ffffff; }
.apresentacao-espectador__mensagem.abrindo .bn-navbar-wordmark__nexo { color: #7cc242; }
.apresentacao-espectador__mensagem.abrindo #mensagem-titulo {
    margin-bottom: 0.35rem;
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 500;
    animation: bn-abrindo-surgir 0.8s 0.15s ease-out both;
}
.apresentacao-espectador__mensagem.abrindo #mensagem-texto { color: rgba(255, 255, 255, 0.7) !important; }
.apresentacao-espectador__mensagem.abrindo .apresentacao-espectador__progresso {
    display: block;
    position: relative;
    width: 240px;
    height: 4px;
    margin: 1.5rem auto 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}
.apresentacao-espectador__progresso span {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, #68a035, #9bd65a);
    animation: bn-abrindo-barra 1.4s ease-in-out infinite;
}
@keyframes bn-abrindo-barra { from { left: -40%; } to { left: 100%; } }
@keyframes bn-abrindo-surgir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .bn-carregando-logo__circulo,
    .bn-carregando-logo__anel,
    .apresentacao-espectador__progresso span,
    .apresentacao-espectador__mensagem.abrindo .apresentacao-espectador__marca,
    .apresentacao-espectador__mensagem.abrindo #mensagem-titulo { animation: none; }
}
@media (max-width: 575.98px) {
    .apresentacao-espectador__barra { padding: 8px 12px; }
    .apresentacao-espectador__barra .bn-navbar-wordmark { display: none; }
    .apresentacao-espectador__selo { font-size: 0; gap: 0; padding: 8px; }
}

/* Linha separadora entre itens do menu lateral (ex.: abaixo de "Visão Detalhada") */
.navbar-vertical .menu-separador { margin: 0.4rem 0; }

/* Logo da empresa selecionada no seletor do topo (no lugar do ícone de prédio — ver mostrarLogo em
   dashboard/shared.js): quadradinho arredondado, a imagem inteira dentro (contain) sobre fundo branco */
/* (o mesmo quadradinho em cada empresa da lista de sugestões — .bn-empresa-logo--lista) */
#empresa-global-toggle .bn-empresa-logo,
.bn-empresa-logo--lista {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; overflow: hidden;
    background: #fff; border: 1px solid var(--falcon-border-color);
}
#empresa-global-toggle .bn-empresa-logo img,
.bn-empresa-logo--lista img { width: 100%; height: 100%; object-fit: contain; }
.bn-empresa-logo--lista { width: 2rem; height: 2rem; }
/* com logo, some o ícone de prédio (classe no botão: o Font Awesome troca o elemento do ícone) */
#empresa-global-toggle.bn-com-logo #empresa-global-icone { display: none; }
/* cliente (ADMIN/COMUM): a empresa dele, só para ver — sem a seta e sem abrir a busca (preencherEmpresaFixaNoTopo, auth.js) */
#empresa-global-nav-item.bn-empresa-fixa #empresa-global-toggle { cursor: default; pointer-events: none; }
#empresa-global-nav-item.bn-empresa-fixa .fa-chevron-down { display: none; }

/* Consolidação de empresas, ao lado da empresa no topo (ligarConsolidacao em dashboard/shared.js):
   a lista das empresas do grupo rola dentro do painel quando o grupo é grande. A cor é a dos itens de
   menu: herdada da barra do topo, ficava clara sobre o fundo claro (estilos Inverted/Vibrant/Card) */
#consolidacao-painel { color: var(--falcon-dropdown-link-color); }
.bn-consolidacao-lista { max-height: 14rem; overflow-y: auto; }
.bn-consolidacao-lista label { cursor: pointer; }
.bn-consolidacao-lista li:last-child { border-bottom: 0 !important; }

/* Títulos de grupo do menu lateral ("Painel Executivo", "Ferramentas BPO"…) em destaque: caixa alta,
   negrito e na cor do "BPO" do logo (--bn-wordmark-bpo: azul-marinho no claro, branco no escuro), com a
   linha ao lado no mesmo tom. Seletores mais específicos que os do Falcon
   (.navbar-vertical[.navbar-inverted…] .navbar-nav .nav-item .navbar-vertical-label) para valer nos 4
   estilos do menu; Inverted e Vibrant (fundo escuro/verde) usam branco, como o "BPO" do logo neles. */
.navbar-vertical .navbar-nav .nav-item .navbar-vertical-label.bn-menu-grupo {
    color: var(--bn-wordmark-bpo);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.navbar-vertical .bn-menu-grupo-wrapper .navbar-vertical-divider {
    border-color: var(--bn-wordmark-bpo);
    opacity: 0.25;
}
/* ícone depois do título do grupo (ex.: o do Asaas em "Painel Operacional" — `icone` do grupo em auth.js) */
.navbar-vertical .bn-menu-grupo .bn-menu-grupo-icone {
    width: 0.95rem;
    height: 0.95rem;
    margin-left: 0.3rem;
    border-radius: 0.2rem;
    vertical-align: -0.25rem;
}
.navbar-vertical.navbar-inverted .navbar-nav .nav-item .navbar-vertical-label.bn-menu-grupo,
.navbar-vertical.navbar-vibrant .navbar-nav .nav-item .navbar-vertical-label.bn-menu-grupo { color: #ffffff; }
.navbar-vertical.navbar-inverted .bn-menu-grupo-wrapper .navbar-vertical-divider,
.navbar-vertical.navbar-vibrant .bn-menu-grupo-wrapper .navbar-vertical-divider { border-color: #ffffff; }

/* Rodapé fixo: "Estilo do menu" no canto esquerdo — os 4 estilos do Falcon (js/layout.js). O botão usa as
   cores dos links do rodapé (as do menu em cada estilo); as opções abrem acima dele, em grade 2×2, num
   painel no <body> (dentro do rodapé seriam cortadas pelo clip-path dele) */
.bn-menu-estilo { position: relative; z-index: 1; flex-shrink: 0; }
.bn-menu-estilo__titulo {
    display: inline-flex; align-items: center; height: 1.75rem; padding: 0 0.5rem; border: 0; border-radius: 0.375rem; background: none; white-space: nowrap;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bn-rodape-link); cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}
.bn-menu-estilo__titulo:hover,
.bn-menu-estilo__titulo[aria-expanded="true"] { color: var(--bn-rodape-link-hover); background-color: rgba(0, 0, 0, 0.05); }
.bn-rodape--inverted .bn-menu-estilo__titulo:hover, .bn-rodape--inverted .bn-menu-estilo__titulo[aria-expanded="true"],
.bn-rodape--vibrant .bn-menu-estilo__titulo:hover, .bn-rodape--vibrant .bn-menu-estilo__titulo[aria-expanded="true"] { background-color: rgba(255, 255, 255, 0.12); }
.bn-menu-estilo__titulo:focus-visible { outline: 2px solid var(--bn-green-bright); outline-offset: 1px; }
.bn-menu-estilo__atual { margin: 0 0.4rem 0 0.5rem; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.75; }
.bn-menu-estilo__seta { font-size: 0.6rem; transition: transform 0.2s; }
.bn-menu-estilo__titulo[aria-expanded="true"] .bn-menu-estilo__seta { transform: rotate(180deg); }
.bn-menu-estilo__opcoes {
    position: fixed; z-index: 1030; width: 15rem;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.625rem; padding: 0.75rem;
    background-color: var(--falcon-emphasis-bg); border: 1px solid var(--falcon-border-color); border-radius: 0.5rem;
    box-shadow: var(--falcon-box-shadow);
}
.bn-menu-estilo__opcoes[hidden] { display: none; }
.btn-group-navbar-style .btn-check + .btn-navbar-style.bn-menu-estilo__opcao { margin-bottom: 0; font-size: 0.6875rem; line-height: 1.2; color: var(--falcon-gray-700); }
.bn-menu-estilo__opcao .img-prototype { margin-bottom: 0.3rem !important; }
/* miniatura do Vibrant na cor "Nexo" (a imagem do Falcon é azul): gira o matiz do azul para o verde da marca */
/* a borda de seleção fica no invólucro (.img-prototype), fora do filtro, e continua verde */
.bn-menu-estilo__miniatura { display: block; overflow: hidden; }
.bn-menu-estilo__miniatura img { display: block; width: 100%; }
.bn-menu-estilo__opcao[for="bn-estilo-menu-vibrant"] .bn-menu-estilo__miniatura img { filter: hue-rotate(-115deg) saturate(0.85); }
.bn-menu-estilo__opcao .label-text { padding-left: 1.1rem !important; white-space: nowrap; }
.bn-menu-estilo__opcao .label-text::after { width: 0.75rem !important; height: 0.75rem !important; }
/* Card/Vibrant/Inverted: o Falcon desloca o botão ☰ (e com ele a marca) 1rem para a direita, e o "o" de
   "BPONexo" era cortado — a marca fica no mesmo lugar do Transparente */
@media (min-width: 1200px) {
    .navbar-vertical.navbar-expand-xl.navbar-card .toggle-icon-wrapper,
    .navbar-vertical.navbar-expand-xl.navbar-vibrant .toggle-icon-wrapper,
    .navbar-vertical.navbar-expand-xl.navbar-inverted .toggle-icon-wrapper { margin-left: -0.75rem; margin-right: 1.25rem; }
}
/* Vibrant na cor primária "Nexo": o degradê azul do Falcon vira o verde da marca (do verde ao navy do
   "BPO"), sobre a mesma textura (bg-navbar.png) */
:root {
    --bn-menu-vibrant-bg: linear-gradient(-45deg, rgba(104, 160, 53, 0.92), rgba(3, 25, 46, 0.95)), url(/design-system/falcon/assets/img/generic/bg-navbar.png);
}
.navbar-vertical.navbar-vibrant {
    --falcon-navbar-vertical-vibrant-bg-image: var(--bn-menu-vibrant-bg);
}
/* o item ativo e os destaques verdes do menu precisam contrastar com o fundo verde */
.navbar-vertical.navbar-vibrant .nav-link.menu-nexo,
.navbar-vertical.navbar-vibrant .nav-link.menu-nexo .nav-link-icon { color: #c8f0a8 !important; }
.navbar-vertical.navbar-vibrant .nav-link.active { color: #ffffff !important; }
/* Sem barra de rolagem horizontal na página: o que passar da largura é cortado. "clip" (e não
   "hidden"): hidden faria do body um contêiner de rolagem e a barra do topo deixaria de ficar fixa. */
html, body { overflow-x: clip; }
/* A margem de cima da barra do topo (estilos com card) "vazava" para fora de .content, que já tem a
   altura da tela (min-height: 100vh do Falcon): a página rolava 0.5rem à toa. flow-root a mantém dentro. */
.content { display: flow-root; }
/* O menu rola só na vertical (o rodapé e os rótulos longos não abrem rolagem horizontal) */
.navbar-vertical .navbar-vertical-content { overflow-x: hidden; }
/* Barra superior no mesmo "Estilo do menu" (layout.js: bn-topo--<estilo>). Transparente: como sempre
   (vidro do Falcon). Card, Inverted e Vibrant: um card na mesma cor do menu lateral, com o mesmo raio. */
.navbar-top.bn-topo--card,
.navbar-top.bn-topo--inverted,
.navbar-top.bn-topo--vibrant {
    top: 0;
    margin: 0 0 0.75rem;
    padding: 0 1rem;
    border-radius: 0.375rem;
    box-shadow: var(--falcon-box-shadow, 0 7px 14px 0 rgba(65, 69, 88, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07));
}
.navbar-top.bn-topo--card { background-color: var(--falcon-navbar-vertical-card-bg-color); }
.navbar-top.bn-topo--inverted { background-color: var(--falcon-navbar-vertical-inverted-bg-color); }
.navbar-top.bn-topo--vibrant { background-color: #1d3a2a; background-image: var(--bn-menu-vibrant-bg); background-size: cover; background-position: center; }

/* Menu fixo (≥ 1200px): o card do topo vai até o começo do menu — a linha da marca (☰ + BPONexo, que
   fica no menu, acima do card dele) ganha o mesmo fundo e encosta no card da barra: um card só, de ponta
   a ponta. No Vibrant o degradê é preso à janela (background-attachment: fixed) nas duas partes, para
   continuar sem emenda. */
@media (min-width: 1200px) {
    .navbar-vertical.navbar-expand-xl.navbar-card > .d-flex,
    .navbar-vertical.navbar-expand-xl.navbar-inverted > .d-flex,
    .navbar-vertical.navbar-expand-xl.navbar-vibrant > .d-flex {
        position: relative;
        /* mesma altura da barra e emendada no card do menu, sem folga: barra + menu formam um "L" só */
        height: var(--falcon-top-nav-height);
        margin: 0;
        border-radius: 0;
        /* a mesma sombra das outras partes do "L", só nos lados de fora (em cima e à esquerda) */
        box-shadow: var(--falcon-box-shadow, 0 7px 14px 0 rgba(65, 69, 88, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07));
        clip-path: inset(-40px 0 0 -40px);
    }
    .navbar-vertical.navbar-expand-xl.navbar-card > .d-flex { background-color: var(--falcon-navbar-vertical-card-bg-color); }
    .navbar-vertical.navbar-expand-xl.navbar-inverted > .d-flex { background-color: var(--falcon-navbar-vertical-inverted-bg-color); }
    .navbar-vertical.navbar-expand-xl.navbar-vibrant > .d-flex,
    .navbar-vertical.navbar-expand-xl.navbar-vibrant .navbar-collapse,
    .navbar-top.bn-topo--vibrant { background-image: var(--bn-menu-vibrant-bg); background-size: cover; background-attachment: fixed; }
    /* o card do menu vai até a base da tela (o Falcon deixava 0.5rem de folga embaixo): a altura é a
       tela menos a barra do topo; encostado na base, sem os cantos de baixo */
    .navbar-vertical.navbar-expand-xl.navbar-card .navbar-collapse,
    .navbar-vertical.navbar-expand-xl.navbar-card .navbar-vertical-content,
    .navbar-vertical.navbar-expand-xl.navbar-inverted .navbar-collapse,
    .navbar-vertical.navbar-expand-xl.navbar-inverted .navbar-vertical-content,
    .navbar-vertical.navbar-expand-xl.navbar-vibrant .navbar-collapse,
    .navbar-vertical.navbar-expand-xl.navbar-vibrant .navbar-vertical-content {
        max-height: calc(100vh - var(--falcon-top-nav-height)) !important;
    }
    .navbar-vertical.navbar-expand-xl.navbar-card .navbar-vertical-content,
    .navbar-vertical.navbar-expand-xl.navbar-inverted .navbar-vertical-content,
    .navbar-vertical.navbar-expand-xl.navbar-vibrant .navbar-vertical-content { height: calc(100vh - var(--falcon-top-nav-height)); }
    .navbar-vertical.navbar-expand-xl.navbar-card .navbar-collapse,
    .navbar-vertical.navbar-expand-xl.navbar-inverted .navbar-collapse,
    .navbar-vertical.navbar-expand-xl.navbar-vibrant .navbar-collapse { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    /* com o rodapé emendado (auth.js: html.bn-rodape-junto), o card do menu termina em cima dele */
    html.bn-rodape-junto .navbar-vertical.navbar-expand-xl.navbar-card .navbar-collapse,
    html.bn-rodape-junto .navbar-vertical.navbar-expand-xl.navbar-card .navbar-vertical-content,
    html.bn-rodape-junto .navbar-vertical.navbar-expand-xl.navbar-inverted .navbar-collapse,
    html.bn-rodape-junto .navbar-vertical.navbar-expand-xl.navbar-inverted .navbar-vertical-content,
    html.bn-rodape-junto .navbar-vertical.navbar-expand-xl.navbar-vibrant .navbar-collapse,
    html.bn-rodape-junto .navbar-vertical.navbar-expand-xl.navbar-vibrant .navbar-vertical-content {
        max-height: calc(100vh - var(--falcon-top-nav-height) - var(--bn-rodape-altura, 3rem)) !important;
    }
    html.bn-rodape-junto .navbar-vertical.navbar-expand-xl.navbar-card .navbar-vertical-content,
    html.bn-rodape-junto .navbar-vertical.navbar-expand-xl.navbar-inverted .navbar-vertical-content,
    html.bn-rodape-junto .navbar-vertical.navbar-expand-xl.navbar-vibrant .navbar-vertical-content { height: calc(100vh - var(--falcon-top-nav-height) - var(--bn-rodape-altura, 3rem)); }
    /* Transparente (sem card): o menu também termina em cima do rodapé, onde fica o "Estilo do menu" */
    html.bn-rodape-junto .navbar-vertical.navbar-expand-xl:not(.navbar-card):not(.navbar-inverted):not(.navbar-vibrant) .navbar-vertical-content {
        max-height: calc(100vh - var(--falcon-top-nav-height) - var(--bn-rodape-altura, 3rem)) !important;
    }
    /* o card do menu continua a linha da marca: sem os cantos de cima (a junção do "L") e sem a sombra
       de cima, que vazava sobre a marca e marcava uma risca horizontal na emenda */
    .navbar-vertical.navbar-expand-xl.navbar-card .navbar-collapse,
    .navbar-vertical.navbar-expand-xl.navbar-inverted .navbar-collapse,
    .navbar-vertical.navbar-expand-xl.navbar-vibrant .navbar-collapse { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; clip-path: inset(0 -40px -40px -40px); }
    .navbar-vertical.navbar-expand-xl.navbar-card > .d-flex .navbar-brand > div,
    .navbar-vertical.navbar-expand-xl.navbar-inverted > .d-flex .navbar-brand > div,
    .navbar-vertical.navbar-expand-xl.navbar-vibrant > .d-flex .navbar-brand > div { padding-top: 0 !important; padding-bottom: 0 !important; }
    /* o ☰ entra no card (ficava 0.75rem para fora) e a marca continua no mesmo lugar */
    .navbar-vertical.navbar-expand-xl.navbar-card > .d-flex .toggle-icon-wrapper,
    .navbar-vertical.navbar-expand-xl.navbar-inverted > .d-flex .toggle-icon-wrapper,
    .navbar-vertical.navbar-expand-xl.navbar-vibrant > .d-flex .toggle-icon-wrapper { margin-left: 0.45rem; margin-right: 0.07rem; }
    /* a barra encosta na linha da marca: sem o raio do lado esquerdo e sem a folga entre os dois */
    .navbar-top.bn-topo--card,
    .navbar-top.bn-topo--inverted,
    .navbar-top.bn-topo--vibrant {
        margin-left: -1rem; border-top-left-radius: 0; border-bottom-left-radius: 0;
        /* a sombra da barra (que fica por cima) vazava para a esquerda sobre a marca e marcava uma risca
           vertical na emenda: ela passa para o ::after, recortado só do lado esquerdo (recortar a própria
           barra cortaria os menus suspensos dela — usuário, empresa) */
        box-shadow: none !important;
    }
    .navbar-top.bn-topo--card::after,
    .navbar-top.bn-topo--inverted::after,
    .navbar-top.bn-topo--vibrant::after {
        content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
        box-shadow: var(--falcon-box-shadow, 0 7px 14px 0 rgba(65, 69, 88, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07));
        clip-path: inset(-40px -40px -40px 0);
    }
    /* fixa ao rolar, encostada no topo da tela na MESMA altura da linha da marca: o canto de cima à
       direita também encosta (sem raio) */
    .navbar-vertical.navbar-expand-xl + .content .navbar-top.bn-topo--card,
    .navbar-vertical.navbar-expand-xl + .content .navbar-top.bn-topo--inverted,
    .navbar-vertical.navbar-expand-xl + .content .navbar-top.bn-topo--vibrant { top: 0; border-top-right-radius: 0; }
    /* o card do menu encosta na borda esquerda da tela: sem o recuo do container do Falcon (o conteúdo
       anda junto, então a emenda do "L" com a barra do topo continua no mesmo lugar) */
    .container-fluid[data-layout]:has(> .navbar-vertical.navbar-expand-xl.navbar-card),
    .container-fluid[data-layout]:has(> .navbar-vertical.navbar-expand-xl.navbar-inverted),
    .container-fluid[data-layout]:has(> .navbar-vertical.navbar-expand-xl.navbar-vibrant) { padding-left: 0; }
    /* marca e ☰ claros nos estilos escuros */
    .navbar-vertical.navbar-inverted > .d-flex .bn-navbar-wordmark__bpo,
    .navbar-vertical.navbar-vibrant > .d-flex .bn-navbar-wordmark__bpo { color: #ffffff; }
    .navbar-vertical.navbar-vibrant > .d-flex .bn-navbar-wordmark__nexo { color: #c8f0a8; }
    .navbar-vertical.navbar-inverted > .d-flex .toggle-line,
    .navbar-vertical.navbar-vibrant > .d-flex .toggle-line { background-color: rgba(255, 255, 255, 0.85); }
}
/* Inverted e Vibrant são escuros: textos, ícones e botões da barra em tons claros */
.navbar-top.bn-topo--inverted,
.navbar-top.bn-topo--vibrant {
    --bn-toggle-bg: rgba(255, 255, 255, 0.08);
    --bn-toggle-bg-hover: rgba(255, 255, 255, 0.16);
    --bn-toggle-borda: rgba(255, 255, 255, 0.18);
    --bn-toggle-borda-hover: rgba(255, 255, 255, 0.4);
    --bn-toggle-cor: rgba(255, 255, 255, 0.8);
    --bn-toggle-cor-hover: #ffffff;
}
.navbar-top.bn-topo--inverted .toggle-line,
.navbar-top.bn-topo--vibrant .toggle-line { background-color: rgba(255, 255, 255, 0.85); }
.navbar-top.bn-topo--inverted .bn-topo-sinc,
.navbar-top.bn-topo--vibrant .bn-topo-sinc,
.navbar-top.bn-topo--inverted .bn-topo-sinc .text-body-tertiary,
.navbar-top.bn-topo--vibrant .bn-topo-sinc .text-body-tertiary { color: rgba(255, 255, 255, 0.78) !important; }
.navbar-top.bn-topo--inverted .bn-topo-sinc__acao,
.navbar-top.bn-topo--vibrant .bn-topo-sinc__acao { color: #c8f0a8; text-decoration-color: rgba(200, 240, 168, 0.5); }
.navbar-top.bn-topo--inverted .bn-topo-sinc__acao:hover,
.navbar-top.bn-topo--vibrant .bn-topo-sinc__acao:hover { color: #ffffff; background: rgba(255, 255, 255, 0.12); }
.navbar-top.bn-topo--inverted .bn-usuario-botao__nome b,
.navbar-top.bn-topo--vibrant .bn-usuario-botao__nome b { color: #ffffff; }
.navbar-top.bn-topo--inverted .bn-usuario-botao__nome small,
.navbar-top.bn-topo--vibrant .bn-usuario-botao__nome small { color: rgba(255, 255, 255, 0.68); }
.navbar-top.bn-topo--inverted .bn-topo-sino__aviso,
.navbar-top.bn-topo--vibrant .bn-topo-sino__aviso { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35); }

/* Menu oculto (☰, só ícones — "navbar-vertical-collapsed"): a logo + "BPONexo" continuam à mostra.
   O menu fica com ~58px e a marca passa da largura dele: ela fica por cima da barra do topo (sem o recorte
   de sombra da linha da marca) e o conteúdo da barra começa depois dela. */
@media (min-width: 1200px) {
    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl > .d-flex { position: relative; z-index: 1031; clip-path: none !important; box-shadow: none !important; }
    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl .navbar-brand { display: block !important; opacity: 1 !important; }
    .navbar-vertical-collapsed .navbar-vertical.navbar-expand-xl + .content .navbar-top { padding-left: 11.25rem; }
    /* passando o mouse o menu abre por inteiro e a marca volta ao lugar de sempre */
    .navbar-vertical-collapsed.navbar-vertical-collapsed-hover .navbar-vertical.navbar-expand-xl + .content .navbar-top { padding-left: 11.25rem; }
}
/* ================= RODAPÉ FIXO (auth.js: montarRodape) — no mesmo "Estilo do menu" =================
   Menu + rodapé numa peça só (Card/Inverted/Vibrant): fixo na base da tela, com as bordas do topo (o JS calcula);
   usa o espaço que o Falcon reserva no fim de .content (padding-bottom ~4rem), então não cobre o conteúdo.
   O texto usa as mesmas cores dos links do menu em cada estilo. */
.bn-rodape {
    --bn-rodape-link: var(--falcon-navbar-vertical-default-link-color);
    --bn-rodape-link-hover: var(--falcon-navbar-vertical-default-link-hover-color);
    --bn-rodape-link-ativo: var(--falcon-navbar-vertical-default-link-active-color);
    position: fixed; bottom: 0; z-index: 1019;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 3rem; padding: 0.375rem 1rem;
    background-color: var(--falcon-bg-navbar-glass);
    /* vai até a base e a borda direita da tela: só os cantos de cima arredondados */
    border: 1px solid var(--falcon-border-color); border-right: 0; border-bottom: 0; border-radius: 0.375rem 0 0 0;
    font-size: 0.8125rem; font-weight: 600;
}
/* ícone do login da Conta Azul (só MASTER), no canto direito: na cor dos links do menu */
.bn-rodape__link {
    margin-left: auto; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    border-radius: 50%; color: var(--bn-rodape-link); transition: color 0.15s, background-color 0.15s;
}
/* versão publicada (só MASTER), à esquerda do ícone da Conta Azul: discreta, na cor dos links do menu */
.bn-rodape__versao {
    margin-left: auto; flex-shrink: 0;
    font-family: var(--falcon-font-family-monospace, monospace); font-size: 0.6875rem; font-weight: 500;
    color: var(--bn-rodape-link); opacity: 0.75; white-space: nowrap;
}
.bn-rodape__versao + .bn-rodape__link { margin-left: 0; }
.bn-rodape__link:hover, .bn-rodape__link:focus-visible { color: var(--bn-rodape-link-hover); background-color: rgba(0, 0, 0, 0.05); }
.bn-rodape--inverted .bn-rodape__link:hover, .bn-rodape--vibrant .bn-rodape__link:hover { background-color: rgba(255, 255, 255, 0.12); }
/* o bordão do site ("Simplificamos o financeiro. Você cuida do negócio.", como na abertura e no rodapé
   de index.html: a segunda oração em verde), no centro da barra */
.bn-rodape__bordao {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
    white-space: nowrap; pointer-events: none;
    font-family: var(--falcon-font-sans-serif, Poppins, sans-serif); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em;
    color: var(--falcon-gray-900);
}
.bn-rodape__bordao span { color: var(--bn-green-bright); }
.bn-rodape--inverted .bn-rodape__bordao, .bn-rodape--vibrant .bn-rodape__bordao { color: #ffffff; }
.bn-rodape--inverted .bn-rodape__bordao span, .bn-rodape--vibrant .bn-rodape__bordao span { color: #c8f0a8; }
/* telas estreitas: o bordão some */
@media (max-width: 991.98px) { .bn-rodape__bordao { display: none; } }
/* Card, Inverted e Vibrant: na cor do menu, emendado no card dele */
.bn-rodape--card, .bn-rodape--inverted, .bn-rodape--vibrant {
    border: 0;
    box-shadow: var(--falcon-box-shadow, 0 7px 14px 0 rgba(65, 69, 88, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07));
}
/* menu + rodapé numa peça só (o JS liga bn-rodape--junto): o rodapé vai da borda esquerda do menu até
   onde o topo termina, com o canto de cima à direita arredondado como o do topo. A sombra de cima só
   aparece depois do menu (por cima dele marcaria a emenda); --bn-menu-largura vem do JS. */
.bn-rodape--junto {
    border-radius: 0 0.375rem 0 0;
    clip-path: polygon(-40px 0, var(--bn-menu-largura, 0px) 0, var(--bn-menu-largura, 0px) -40px,
        calc(100% + 40px) -40px, calc(100% + 40px) 100%, -40px 100%);
}
.bn-rodape--card {
    background: var(--falcon-navbar-vertical-card-bg-color);
    --bn-rodape-link: var(--falcon-navbar-vertical-card-link-color);
    --bn-rodape-link-hover: var(--falcon-navbar-vertical-card-link-hover-color);
    --bn-rodape-link-ativo: var(--falcon-navbar-vertical-card-link-active-color);
}
.bn-rodape--inverted {
    background: var(--falcon-navbar-vertical-inverted-bg-color);
    --bn-rodape-link: var(--falcon-navbar-vertical-inverted-link-color);
    --bn-rodape-link-hover: var(--falcon-navbar-vertical-inverted-link-hover-color);
    --bn-rodape-link-ativo: var(--falcon-navbar-vertical-inverted-link-active-color);
}
.bn-rodape--vibrant {
    background-color: #1d3a2a; background-image: var(--bn-menu-vibrant-bg); background-size: cover; background-attachment: fixed;
    --bn-rodape-link: var(--falcon-navbar-vertical-vibrant-link-color);
    --bn-rodape-link-hover: var(--falcon-navbar-vertical-vibrant-link-hover-color);
    --bn-rodape-link-ativo: var(--falcon-navbar-vertical-vibrant-link-active-color);
}
.modo-espectador .bn-rodape { display: none; }


/* Apresentação: o deck institucional (iframe) ocupa o espaço da tela, em 16:9 quando cabe */
.slides-moldura {
    position: relative;
    width: 100%;
    height: calc(100vh - 170px);
    min-height: 420px;
    border: 1px solid var(--falcon-border-color);
    background: #0b1727;
    overflow: hidden;
}
.slides-moldura iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Item do menu riscado (taxado: true em auth.js): só o rótulo, o link funciona como sempre */
.navbar-vertical .nav-link.bn-menu-taxado .nav-link-text { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Item do menu em verde "Nexo" (destaque: 'verde' em auth.js) — o mesmo verde da marca */
.menu-nexo,
.navbar-vertical .nav-link.menu-nexo,
.navbar-vertical .nav-link.menu-nexo .nav-link-icon { color: var(--bn-menu-nexo) !important; }
.navbar-vertical .nav-link.menu-nexo:hover { color: #5b9b4d !important; }

/* Tela "Compartilhar": as telas do link em colunas */
.compartilhar-telas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem 1.5rem; }
.compartilhar-telas .form-check-label { font-size: 0.875rem; }

/* Página do link compartilhado: abas com as telas do link (quem recebe navega por elas) — barra
   segmentada centralizada, ícone + nome como no menu do Painel; a aberta fica "em relevo". Muitas
   abas: o trilho rola de lado e a borda com abas escondidas esmaece (.tem-antes / .tem-depois). */
.apresentacao-espectador__abas {
    display: flex;
    justify-content: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--falcon-border-color);
    background: var(--falcon-card-bg, #fff);
}
.apresentacao-espectador__abas.hidden { display: none; }
.apresentacao-espectador__abas-trilho {
    display: flex;
    gap: 4px;
    max-width: 100%;
    padding: 4px;
    overflow-x: auto;
    border-radius: 12px;
    background: var(--falcon-gray-100);
    box-shadow: inset 0 0 0 1px var(--falcon-border-color);
    scrollbar-width: none;
    scroll-padding-inline: 32px;
}
.apresentacao-espectador__abas-trilho::-webkit-scrollbar { display: none; }
.tem-antes .apresentacao-espectador__abas-trilho { mask-image: linear-gradient(to right, transparent, #000 40px); }
.tem-depois .apresentacao-espectador__abas-trilho { mask-image: linear-gradient(to left, transparent, #000 40px); }
.tem-antes.tem-depois .apresentacao-espectador__abas-trilho { mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.apresentacao-espectador__aba {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 7px 14px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--falcon-gray-700);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.apresentacao-espectador__aba-icone { width: 14px; font-size: 0.8rem; color: var(--falcon-gray-500); transition: color 0.15s; }
.apresentacao-espectador__aba:hover { color: var(--falcon-gray-1000); background: rgba(3, 25, 46, 0.05); }
.apresentacao-espectador__aba:hover .apresentacao-espectador__aba-icone { color: var(--falcon-gray-700); }
.apresentacao-espectador__aba:focus-visible { outline: 2px solid #68a035; outline-offset: 1px; }
.apresentacao-espectador__aba.ativa {
    color: var(--falcon-gray-1100, #03192e);
    background: var(--falcon-card-bg, #fff);
    box-shadow: 0 1px 2px rgba(3, 25, 46, 0.08), 0 4px 10px -4px rgba(3, 25, 46, 0.18);
}
.apresentacao-espectador__aba.ativa .apresentacao-espectador__aba-icone { color: #68a035; }

/* tempo de acesso do link (cabeçalho): "Acesso até 18:00 · resta 3 h 20 min"; na reta final, laranja */
.apresentacao-espectador__prazo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(3, 25, 46, 0.06);
    color: var(--falcon-gray-900);
    font-size: 0.75rem;
    white-space: nowrap;
}
.apresentacao-espectador__prazo.hidden { display: none; }
.apresentacao-espectador__prazo .fa-clock { color: #68a035; }
.apresentacao-espectador__prazo-ate { font-weight: 600; }
.apresentacao-espectador__prazo-resta { color: var(--falcon-gray-600); }
.apresentacao-espectador__prazo-resta::before { content: '·'; margin-right: 6px; }
.apresentacao-espectador__prazo.acabando { background: rgba(245, 128, 62, 0.14); color: #c0560a; }
.apresentacao-espectador__prazo.acabando .fa-clock,
.apresentacao-espectador__prazo.acabando .apresentacao-espectador__prazo-resta { color: #c0560a; }

@media (max-width: 767.98px) {
    /* celular: a barra ocupa a largura e as abas não abertas mostram só o ícone (o nome fica no title) */
    .apresentacao-espectador__abas { padding: 8px 12px; justify-content: flex-start; }
    .apresentacao-espectador__abas-trilho { width: 100%; }
    .apresentacao-espectador__aba:not(.ativa) { padding: 7px 11px; }
    .apresentacao-espectador__aba:not(.ativa) span:not(.apresentacao-espectador__aba-icone) { display: none; }
    .apresentacao-espectador__prazo-ate { display: none; }
    .apresentacao-espectador__prazo-resta::before { display: none; }
}

/* =========================================================
   ÁUDIO DA APRESENTAÇÃO (js/comum/audio-apresentacao.js)
   ========================================================= */
/* painel de quem assiste: canto inferior esquerdo */
.audio-dock {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 1100;
    width: 280px;
    max-width: calc(100vw - 32px);
    border: 1px solid var(--falcon-border-color);
    border-radius: 12px;
    background: var(--falcon-card-bg, #fff);
    box-shadow: 0 16px 40px -18px rgba(3, 25, 46, 0.55);
    /* com o QR Code da câmera aberto o painel cresce: rola por dentro, sem sair da tela */
    max-height: calc(100vh - 32px);
    overflow-x: hidden;
    overflow-y: auto;
}
.audio-dock.hidden { display: none; }
.audio-dock.falando { border-color: #68a035; box-shadow: 0 0 0 3px rgba(104, 160, 53, 0.25), 0 16px 40px -18px rgba(3, 25, 46, 0.55); }
.audio-dock__icone { display: inline-flex; color: #68a035; }
.audio-dock__icone svg { width: 18px; height: 18px; }
.audio-dock__contagem { margin-left: auto; font-weight: 400; font-size: 0.75rem; color: var(--falcon-gray-600); }
.audio-dock__corpo { padding: 0 14px 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.audio-dock__entrar { display: grid; gap: 8px; }
.audio-dock__controles { display: flex; flex-wrap: wrap; gap: 8px; }
.audio-dock__aviso { font-size: 0.75rem; color: var(--falcon-gray-700); background: var(--falcon-gray-100); padding: 6px 8px; border-radius: 6px; }
.audio-dock__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; max-height: 180px; overflow-y: auto; overflow-x: hidden; }

/* botões redondos de microfone / sair */
.audio-btn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #68a035;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
}
.audio-btn svg { width: 18px; height: 18px; }
.audio-btn:hover { background: #5b9b4d; }
.audio-btn.desligado { background: var(--falcon-gray-200); color: var(--falcon-gray-800); }
.audio-btn.desligado:hover { background: var(--falcon-gray-300); }
.audio-btn:disabled { opacity: 0.5; cursor: default; }
.audio-btn--sair { background: #e63757; }
.audio-btn--sair:hover { background: #c92a47; }
.audio-btn--grande { width: 56px; height: 56px; }
/* "⋯" ao lado da câmera: opções (trocar computador ↔ celular) */
.audio-btn--opcoes { width: 30px; height: 30px; align-self: center; }
.audio-btn--opcoes svg { width: 16px; height: 16px; }
.audio-btn--opcoes[hidden] { display: none; }
.audio-btn[hidden] { display: none; }
/* compartilhando a tela: o botão fica azul enquanto a tela está no ar */
.audio-btn.compartilhando { background: #2c7be5; }
.audio-btn.compartilhando:hover { background: #1f63c0; }
.audio-btn--grande svg { width: 24px; height: 24px; }

/* lista de participantes */
.audio-participante { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.8125rem; padding: 4px 2px; }
/* o nome encurta com "…" (nome longo não empurra a linha para fora do card) */
.audio-participante__icone, .audio-participante__camera, .audio-participante > .btn { flex: none; }
.audio-participante__icone { display: inline-flex; color: #68a035; }
.audio-participante__icone svg { width: 15px; height: 15px; }
.audio-participante.mudo .audio-participante__icone { color: var(--falcon-gray-500); }
.audio-participante__nome { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-vazio { margin: 0; font-size: 0.75rem; color: var(--falcon-gray-600); }

/* janela "Áudio da apresentação" do apresentador */
.audio-janela { min-height: 100vh; background: var(--falcon-body-bg, #edf2f9); }
.audio-janela__topo { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--falcon-card-bg, #fff); border-bottom: 1px solid var(--falcon-border-color); }
.audio-janela__titulo { margin: 0; font-size: 1rem; font-weight: 600; }
.audio-janela__corpo { padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.audio-janela__estado { margin: 0; font-size: 0.875rem; }
.audio-janela__estado:empty { display: none; } /* sem texto: não ocupa espaço */
.audio-janela__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
/* "Entrar na chamada" na largura toda do painel */
.audio-janela__acoes > #btn-entrar { flex: 1 1 100%; }
.audio-janela__subtitulo { margin: 6px 0 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--falcon-gray-600); }
.audio-janela__lista { max-height: none; background: var(--falcon-card-bg, #fff); border: 1px solid var(--falcon-border-color); border-radius: 10px; padding: 8px 12px; }
.audio-janela .video-palco { margin-top: 2px; }

/* MODO CHAMADA (pages/apresentacao-audio): o sistema à esquerda, num quadro, e a chamada fixa no
   menu lateral direito; recolhida, vira uma aba na borda */
.chamada-painel { display: flex; height: 100vh; height: 100dvh; overflow: hidden; background: var(--falcon-body-bg, #edf2f9); }
.chamada-painel__sistema { position: relative; flex: 1; min-width: 0; }
.chamada-painel__sistema { overflow: hidden; }
.chamada-painel__sistema iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; transform-origin: 0 0; background: var(--falcon-body-bg, #edf2f9); }
/* troca de tela no quadro: reduzido (transform), ele vira uma camada própria da placa de vídeo e, até a
   página nova pintar, aparecia preto — fica oculto nesse intervalo (aparece o fundo claro do sistema) */
.chamada-painel__sistema iframe.trocando-tela { visibility: hidden; }
.chamada-painel__lateral.audio-janela {
    flex: none;
    width: 380px;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden; /* só rola na vertical */
    border-left: 1px solid var(--falcon-border-color);
    box-shadow: -12px 0 32px -24px rgba(3, 25, 46, 0.45);
}
.chamada-painel__lateral .audio-janela__topo { position: sticky; top: 0; z-index: 2; padding: 12px 14px; }
.chamada-painel__lateral .audio-janela__corpo { padding: 16px; }
.chamada-painel__lateral .flex-1 { flex: 1; }
.chamada-painel__icone {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--falcon-gray-700);
    cursor: pointer;
}
.chamada-painel__icone svg { width: 18px; height: 18px; }
.chamada-painel__icone:hover { background: var(--falcon-gray-200); color: var(--falcon-gray-900); }
.chamada-painel.recolhido .chamada-painel__lateral { display: none; }
.chamada-painel__aba {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border: 1px solid var(--falcon-border-color);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    background: var(--falcon-card-bg, #fff);
    color: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
    box-shadow: 0 8px 24px -14px rgba(3, 25, 46, 0.55);
    cursor: pointer;
}
.chamada-painel__aba[hidden] { display: none; }
.chamada-painel__aba-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--falcon-gray-400); }
.chamada-painel__aba-ponto.no-ar { background: #e63757; animation: pulso-camera 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .chamada-painel__aba-ponto.no-ar { animation: none; } }
@media (max-width: 767.98px) {
    /* tela estreita: o painel passa por cima do sistema */
    .chamada-painel__lateral.audio-janela { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1200; width: min(380px, 100vw); }
}
/* Painel da direita no "Estilo do menu" (apresentacao-audio.js: bn-lateral--<estilo>). Card, Inverted e
   Vibrant: um card na cor do menu, alinhado ao card da barra superior — encostado no topo da tela como
   ela, com o cabeçalho da mesma altura da barra. Transparente: como sempre. */
@media (min-width: 768px) {
    .chamada-painel__lateral.audio-janela.bn-lateral--card,
    .chamada-painel__lateral.audio-janela.bn-lateral--inverted,
    .chamada-painel__lateral.audio-janela.bn-lateral--vibrant {
        /* do topo até a base da tela, como a barra superior (top: 0) e o rodapé (bottom: 0) do sistema ao
           lado: sem cantos arredondados nas pontas que encostam nas bordas */
        height: 100%;
        margin: 0 0.5rem 0 0;
        border-left: 0;
        border-radius: 0;
        box-shadow: var(--falcon-box-shadow, 0 7px 14px 0 rgba(65, 69, 88, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07));
    }
    .chamada-painel__lateral.bn-lateral--card { background: var(--falcon-navbar-vertical-card-bg-color); }
    .chamada-painel__lateral.bn-lateral--inverted { background: var(--falcon-navbar-vertical-inverted-bg-color); }
    .chamada-painel__lateral.bn-lateral--vibrant { background-color: #1d3a2a; background-image: var(--bn-menu-vibrant-bg); background-size: cover; background-attachment: fixed; }
    /* cabeçalho: a altura da barra superior; fixo ao rolar, com o mesmo fundo do card (sem emenda) */
    .chamada-painel__lateral.bn-lateral--card .audio-janela__topo,
    .chamada-painel__lateral.bn-lateral--inverted .audio-janela__topo,
    .chamada-painel__lateral.bn-lateral--vibrant .audio-janela__topo {
        min-height: var(--falcon-top-nav-height); padding-top: 0; padding-bottom: 0; background: inherit; border-top-left-radius: inherit; border-top-right-radius: inherit;
    }
    .chamada-painel__lateral.bn-lateral--inverted .audio-janela__topo,
    .chamada-painel__lateral.bn-lateral--vibrant .audio-janela__topo { border-bottom-color: rgba(255, 255, 255, 0.14); }
    /* estilos escuros: títulos, textos e ícones claros (os blocos internos continuam cards claros) */
    .chamada-painel__lateral.bn-lateral--inverted .audio-janela__titulo,
    .chamada-painel__lateral.bn-lateral--vibrant .audio-janela__titulo,
    .chamada-painel__lateral.bn-lateral--inverted .audio-janela__estado,
    .chamada-painel__lateral.bn-lateral--vibrant .audio-janela__estado { color: #ffffff; }
    .chamada-painel__lateral.bn-lateral--inverted .audio-janela__subtitulo,
    .chamada-painel__lateral.bn-lateral--vibrant .audio-janela__subtitulo { color: rgba(255, 255, 255, 0.72); }
    .chamada-painel__lateral.bn-lateral--inverted .chamada-painel__icone,
    .chamada-painel__lateral.bn-lateral--vibrant .chamada-painel__icone { color: rgba(255, 255, 255, 0.8); }
    .chamada-painel__lateral.bn-lateral--inverted .chamada-painel__icone:hover,
    .chamada-painel__lateral.bn-lateral--vibrant .chamada-painel__icone:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
}

/* =========================================================
   VÍDEO DA APRESENTAÇÃO (js/comum/camera-apresentacao.js)
   ========================================================= */
/* "Câmera ligada": aviso em vermelho enquanto a câmera está em uso */
.audio-dock__selo-camera {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(230, 55, 87, 0.12);
    color: #e63757;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.audio-dock__selo-camera[hidden] { display: none; }
/* com o selo, a contagem sai do cabeçalho (quem está na chamada aparece na lista) */
.audio-dock__selo-camera:not([hidden]) + .audio-dock__contagem { display: none; }
.audio-dock__selo-camera::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulso-camera 1.6s ease-in-out infinite; }
@keyframes pulso-camera { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .audio-dock__selo-camera::before { animation: none; } }
.audio-participante__camera { display: inline-flex; color: #e63757; }
.audio-participante__camera svg { width: 14px; height: 14px; }

/* painel "Câmera": de onde vem a imagem */
.camera-painel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--falcon-border-color); border-radius: 10px; background: var(--falcon-gray-100); }
.camera-painel[hidden] { display: none; }
.camera-painel__estado { margin: 0; font-size: 0.78rem; line-height: 1.4; overflow-wrap: anywhere; }
.camera-painel__estado.ativo { color: #4d8a2a; font-weight: 600; }
.camera-painel__opcoes { display: grid; gap: 6px; }
.camera-opcao {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--falcon-border-color);
    border-radius: 8px;
    background: var(--falcon-card-bg, #fff);
    color: inherit;
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.camera-opcao > svg { flex: none; width: 20px; height: 20px; color: #68a035; }
.camera-opcao__texto { display: grid; min-width: 0; }
.camera-opcao__nome { font-weight: 600; }
.camera-opcao small { color: var(--falcon-gray-600); font-size: 0.7rem; line-height: 1.3; }
.camera-opcao:hover:not(:disabled) { border-color: #68a035; }
.camera-opcao[aria-pressed="true"], .camera-opcao.sugerida { border-color: #68a035; box-shadow: 0 0 0 2px rgba(104, 160, 53, 0.25); }
.camera-opcao:disabled { opacity: 0.55; cursor: not-allowed; }
.camera-painel__aviso { font-size: 0.75rem; line-height: 1.4; padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(245, 128, 62, 0.45); background: rgba(245, 128, 62, 0.1); }
.camera-painel__aviso[hidden] { display: none; }
.camera-painel__qr { display: grid; justify-items: center; gap: 8px; text-align: center; }
.camera-painel__qr[hidden], .camera-painel__qr [hidden] { display: none; }
.camera-painel__qr canvas { width: 176px; height: 176px; border-radius: 8px; background: #fff; image-rendering: pixelated; }
.camera-painel__passos { margin: 0; padding-left: 1.1rem; text-align: left; font-size: 0.72rem; line-height: 1.45; color: var(--falcon-gray-700); }
.camera-painel__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 0.75rem; }
.camera-painel__desligar { justify-self: start; font-size: 0.75rem; }
.camera-painel__desligar[hidden] { display: none; }

/* quadros de vídeo: no canto inferior direito de quem assiste (o painel de áudio fica à esquerda) */
/* padding: 0 — o tema põe 4rem em cima e embaixo de toda <section> */
.video-palco { position: fixed; right: 16px; bottom: 16px; z-index: 1100; width: 260px; max-width: calc(100vw - 32px); display: grid; gap: 6px; padding: 0; }
.video-palco.hidden { display: none; }
.video-palco__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(11, 23, 39, 0.72); color: #fff; font-size: 0.72rem; font-weight: 600; }
.video-palco__recolher { border: 0; background: none; color: inherit; font-size: 0.7rem; text-decoration: underline; cursor: pointer; padding: 0; }
.video-palco__recolher[hidden] { display: none; }
.video-palco__grade { display: grid; gap: 6px; max-height: calc(100vh - 140px); overflow-y: auto; }
.video-palco.recolhido .video-palco__grade { display: none; }
.video-bloco { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0b1727; box-shadow: 0 12px 30px -16px rgba(3, 25, 46, 0.7); }
/* contain: a câmera do celular em pé não corta a cabeça de ninguém */
/* o vídeo não dá tamanho ao quadro (a altura natural dele esticava a grade): só a proporção 16:9 */
.video-bloco video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.video-bloco.espelhado video { transform: scaleX(-1); }
.video-bloco__nome {
    position: absolute;
    left: 6px;
    bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: calc(100% - 12px);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.7rem;
}
.video-bloco__nome svg { flex: none; width: 12px; height: 12px; }
.video-bloco__nome span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* janela do apresentador: em grade, no fluxo da página */
.video-palco--janela { position: static; width: auto; max-width: none; z-index: auto; }
.video-palco--janela .video-palco__grade { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); max-height: none; overflow: visible; }
.video-palco--janela .video-palco__topo { justify-self: start; }
/* tela compartilhada: quadro largo (ocupa a linha toda) e botão de tela cheia */
.video-palco.com-tela { width: min(560px, calc(100vw - 32px)); }
.video-palco--janela .video-bloco--tela { grid-column: 1 / -1; }
/* alguém compartilhando a tela (criarPalcoVideo: areaCentral): o palco ("Vídeo · N") cobre a área
   central — a tela compartilhada grande e as câmeras numa coluna ao lado (como no link "só a tela") */
.video-palco.video-palco--central {
    position: absolute; inset: 0; z-index: 4; width: auto; max-width: none; margin: 0; padding: 16px;
    align-content: start; background: var(--falcon-body-bg, #edf2f9);
}
.video-palco--central .video-palco__topo { justify-self: start; }
.video-palco--central .video-palco__grade { max-height: none; height: 100%; overflow: hidden; grid-template-columns: minmax(0, 1fr) 220px; align-items: start; }
.video-palco--central .video-bloco--tela { grid-column: 1; grid-row: 1 / span 4; height: calc(100vh - 90px); aspect-ratio: auto; }
.video-palco--central .video-bloco:not(.video-bloco--tela) { grid-column: 2; }
@media (max-width: 767.98px) {
    .video-palco--central .video-palco__grade { grid-template-columns: minmax(0, 1fr); }
    .video-palco--central .video-bloco--tela { grid-row: auto; height: auto; aspect-ratio: 16 / 9; }
    .video-palco--central .video-bloco:not(.video-bloco--tela) { grid-column: 1; }
}
.video-bloco__ampliar {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
}
.video-bloco__ampliar svg { width: 14px; height: 14px; }
.video-bloco--tela .video-bloco__ampliar { display: grid; }
.video-bloco:fullscreen { border-radius: 0; aspect-ratio: auto; }
@media (max-width: 575.98px) {
    /* celular de quem assiste: os vídeos sobem para o topo, longe do painel de áudio */
    .video-palco:not(.video-palco--janela) { width: 150px; right: 10px; bottom: auto; top: 64px; }
}

/* =========================================================
   CELULAR COMO CÂMERA (camera-celular.html, js/paginas/camera-celular.js)
   ========================================================= */
.camera-celular { min-height: 100vh; min-height: 100dvh; background: var(--falcon-body-bg, #edf2f9); padding-bottom: env(safe-area-inset-bottom); }
.camera-celular__topo { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--falcon-card-bg, #fff); border-bottom: 1px solid var(--falcon-border-color); }
.camera-celular__titulo { margin: 0; font-size: 1rem; font-weight: 600; }
.camera-celular__dono { margin: 0; font-size: 0.78rem; color: var(--falcon-gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camera-celular__dono:empty { display: none; }
.camera-celular__no-ar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; background: #e63757; color: #fff; font-size: 0.85rem; font-weight: 600; }
.camera-celular__no-ar[hidden] { display: none; }
.camera-celular__ponto { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: pulso-camera 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .camera-celular__ponto { animation: none; } }
.camera-celular__corpo { max-width: 34rem; margin: 0 auto; padding: 16px; display: grid; gap: 14px; }
.camera-celular__cartao { display: grid; gap: 14px; justify-items: stretch; padding: 22px 18px; border-radius: 14px; background: var(--falcon-card-bg, #fff); border: 1px solid var(--falcon-border-color); text-align: center; }
.camera-celular__cartao[hidden], .camera-celular__ao-vivo[hidden] { display: none; }
.camera-celular__cartao .spinner-border { justify-self: center; }
.camera-celular__cartao .spinner-border[hidden] { display: none; }
.camera-celular__subtitulo { margin: 0; font-size: 1.1rem; font-weight: 600; }
.camera-celular__texto { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--falcon-gray-700); }
.camera-celular__texto:empty { display: none; }
.camera-celular__opcao { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 0.95rem; padding: 10px; border-radius: 10px; background: var(--falcon-gray-100); cursor: pointer; }
.camera-celular__opcao input { width: 1.25rem; height: 1.25rem; }
.camera-celular__dica { margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--falcon-gray-600); text-align: center; }
.camera-celular__erro { margin: 0; padding: 10px 12px; border-radius: 8px; font-size: 0.85rem; line-height: 1.45; color: #e63757; background: rgba(230, 55, 87, 0.1); }
.camera-celular__erro[hidden] { display: none; }
.camera-celular__ao-vivo { display: grid; gap: 14px; }
.camera-celular__previa { position: relative; border-radius: 14px; overflow: hidden; background: #0b1727; aspect-ratio: 3 / 4; max-height: 62vh; }
.camera-celular__previa video { display: block; width: 100%; height: 100%; object-fit: cover; }
.camera-celular__previa video.espelhado { transform: scaleX(-1); }
.camera-celular__conexao { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.8rem; text-align: center; }
.camera-celular__conexao.ok { background: rgba(77, 138, 42, 0.9); }
.camera-celular__controles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.camera-celular__btn {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-height: 64px;
    padding: 10px 6px;
    border: 1px solid var(--falcon-border-color);
    border-radius: 12px;
    background: var(--falcon-card-bg, #fff);
    color: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.camera-celular__btn svg { width: 22px; height: 22px; }
.camera-celular__btn:disabled { opacity: 0.55; }
.camera-celular__btn.desligado { color: var(--falcon-gray-600); }
.camera-celular__btn--parar { color: #e63757; border-color: rgba(230, 55, 87, 0.45); }

/* =========================================================
   FLUXO DE CAIXA (js/fluxo-de-caixa/index.js, js/fluxo-de-caixa/*.js)
   ========================================================= */
/* extrato de cada conta no modelo "Table Example" (criarTabelaExemplo): o mesmo respiro do card-body
   onde a tabela fica em Despesas */
.extrato-tabela-exemplo { padding: 1.25rem; }
/* "Contas e extratos" (fluxo-de-caixa/contas-extratos.js): cada conta numa caixa clicável (abre o extrato
   num modal), com o saldo e o % em destaque — valor maior e em negrito, % num selo da cor da faixa */
.contas-extratos .contas-extratos__conta {
    padding: .75rem .75rem .75rem .5rem;
    border: 1px solid var(--falcon-border-color);
    border-radius: .375rem;
    background-color: var(--falcon-card-bg, var(--falcon-body-bg));
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s;
}
.contas-extratos .contas-extratos__conta:hover { border-color: var(--falcon-gray-400); box-shadow: 0 6px 16px -12px rgba(3, 25, 46, .35); }
.contas-extratos .contas-extratos__conta:focus-visible { outline: 2px solid var(--falcon-primary); outline-offset: 2px; }
/* o ícone do banco maior aqui (o padrão, em dashboard.css, é 26px): logo/sigla com 40px */
.contas-extratos .contas-extratos__conta .icone-banco { flex-shrink: 0; width: 40px; height: 40px; margin-right: 0; font-size: 14px; }
.contas-extratos .contas-extratos__conta .icone-banco.sigla-longa { font-size: 11px; }
.contas-extratos .contas-extratos__conta .icone-banco-generico { font-size: 16px; }
.contas-extratos .contas-extratos__conta .icone-banco-logo img { padding: 3px; }
.contas-extratos .contas-extratos__valor {
    font-family: var(--falcon-font-sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--falcon-gray-900);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.contas-extratos .contas-extratos__valor--alerta { color: var(--falcon-warning-text-emphasis); }
.contas-extratos .contas-extratos__valor--sem-saldo { font-size: .8333333333rem; font-weight: 600; color: var(--falcon-gray-600); }
.contas-extratos .contas-extratos__pct { font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.extrato-linha-saldo td { background: var(--falcon-gray-100, rgba(0,0,0,.03)); font-weight: 600; }
/* "Saldo atual na Conta Azul (sincronizado em …)": a linha em destaque, na cor do sistema */
.extrato-linha-saldo.extrato-atual td {
    border-top: 2px solid var(--falcon-primary-border-subtle);
    background: var(--falcon-primary-bg-subtle);
    color: var(--falcon-primary-text-emphasis);
    font-weight: 700;
}
.extrato-linha-saldo.extrato-posterior td { font-weight: 500; font-style: italic; }
/* linha de transferência: clique abre o modal com origem e destino */
.extrato-linha-clicavel { cursor: pointer; }
.extrato-linha-clicavel:hover td, .extrato-linha-clicavel:focus-visible td { background: var(--falcon-gray-100, rgba(0,0,0,.04)); }
.extrato-linha-clicavel td:nth-child(2) { text-decoration: underline dotted; text-underline-offset: 3px; }
.transferencia-lados { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.transferencia-lado { border: 1px solid var(--falcon-border-color); padding: .85rem 1rem; min-width: 0; }
.transferencia-lado__titulo { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--falcon-secondary-color); margin-bottom: .35rem; }
.transferencia-lado__conta { font-weight: 600; display: flex; align-items: center; gap: .35rem; overflow-wrap: anywhere; }
.transferencia-lado__dados { font-size: .75rem; color: var(--falcon-secondary-color); margin: .15rem 0 .6rem; }
.transferencia-lado__linhas { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; margin: 0; font-size: .85rem; }
.transferencia-lado__linhas dt { font-weight: 400; color: var(--falcon-secondary-color); }
.transferencia-lado__linhas dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.transferencia-seta { display: flex; align-items: center; color: var(--falcon-secondary-color); }
@media (max-width: 575.98px) {
    .transferencia-lados { grid-template-columns: 1fr; }
    .transferencia-seta { justify-content: center; transform: rotate(90deg); }
}


/* Modal "Clientes — <estado>" (Receitas): nome do cliente sem espremer em várias linhas */
.tabela-modal__nome {
    min-width: 16rem;
}

/* ---------------- Tipografia padrão dos cards e gráficos (tela Receitas) ----------------
 * Uma família só (Poppins, a dos títulos do Falcon) e um tamanho/peso por papel na hierarquia. Os
 * gráficos (ECharts) usam as mesmas medidas — ver tipografiaGraficos() em js/dashboard/painel-crm.js.
 *   título do card ........ 1rem      600   cor de título   (no card-header, à esquerda, py-2 + borda)
 *   subtítulo / auxiliar .. 0,833rem  400   gray-600        (descrições, "1 a 10 de N", comparações)
 *   legenda / rótulo ...... 0,833rem  500   gray-700        (legendas, nome de indicador)
 *   cabeçalho de tabela ... 0,833rem  600   gray-700
 *   valor em linha ........ 0,833rem  600                   (valores de tabelas, listas e barras)
 *   valor secundário ...... 1,2rem    500
 *   valor principal ....... 1,728rem  500                   (o número de destaque do card)
 * Papéis para telas de texto (IA-NEXO), na mesma família:
 *   título de destaque .... 1,2rem    600   (1,44rem a partir do tablet) — o título do conteúdo da tela
 *   título de item ........ 0,875rem  600   cor de título   (o título de cada item de uma lista ou linha do tempo)
 *   texto corrido ......... 0,875rem  400   cor do corpo, entrelinha 1,6 (parágrafos longos: legível no celular)
 *   rótulo ................ 0,694rem  600   MAIÚSCULAS, espaçado (etiquetas curtas: "PRIORIDADE ALTA")
 */
.tipografia-padrao .card { font-family: var(--falcon-font-sans-serif); }
.tipografia-padrao .card table { font-size: 0.8333333333rem; }
.tp-titulo { font-family: var(--falcon-font-sans-serif); font-size: 1rem; font-weight: 600; line-height: 1.2; margin-bottom: 0; }
.tp-subtitulo { font-family: var(--falcon-font-sans-serif); font-size: 0.8333333333rem; font-weight: 400; color: var(--falcon-gray-600); }
.tp-legenda { font-family: var(--falcon-font-sans-serif); font-size: 0.8333333333rem; font-weight: 500; color: var(--falcon-gray-700); }
.tp-cabecalho { font-family: var(--falcon-font-sans-serif); font-size: 0.8333333333rem; font-weight: 600; color: var(--falcon-gray-700); }
.tp-valor-linha { font-family: var(--falcon-font-sans-serif); font-size: 0.8333333333rem; font-weight: 600; }
.tp-valor-secundario { font-family: var(--falcon-font-sans-serif); font-size: 1.2rem; font-weight: 500; line-height: 1.2; }
.tp-valor { font-family: var(--falcon-font-sans-serif); font-size: 1.728rem; font-weight: 500; line-height: 1.2; }
.tp-destaque { font-family: var(--falcon-font-sans-serif); font-size: 1.2rem; font-weight: 600; line-height: 1.25; margin-bottom: 0; color: var(--falcon-emphasis-color); }
.tp-item { font-family: var(--falcon-font-sans-serif); font-size: 0.875rem; font-weight: 600; line-height: 1.35; margin-bottom: 0; color: var(--falcon-emphasis-color); }
.tp-texto { font-family: var(--falcon-font-sans-serif); font-size: 0.875rem; font-weight: 400; line-height: 1.6; color: var(--falcon-body-color); overflow-wrap: break-word; }
.tp-rotulo { font-family: var(--falcon-font-sans-serif); font-size: 0.6944444444rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; }
@media (min-width: 768px) {
    .tp-destaque { font-size: 1.44rem; }
}

/* ---------------- Modal de usuário (Clientes e Usuários): perfil de acesso + preview ---------------- */
/* o <form> envolve corpo e rodapé: precisa encolher para o corpo rolar (modal-dialog-scrollable) */
#form-usuario { min-height: 0; overflow: hidden; }
.bn-avatar--medio { width: 40px; height: 40px; font-size: 0.85rem; }

/* Quadro com o que o perfil escolhido pode fazer (cor/ícone por perfil — NIVEIS_ACESSO em clientes.js) */
.nivel-acesso {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: var(--falcon-border-width) solid var(--falcon-border-color);
    border-left-width: 3px;
    border-radius: var(--falcon-border-radius);
    background-color: var(--falcon-tertiary-bg);
    font-size: 0.8333333333rem;
}
.nivel-acesso:empty { display: none; }
.nivel-acesso .fas { margin-top: 0.15rem; }
.nivel-acesso--primary { border-left-color: var(--falcon-primary); }
.nivel-acesso--info { border-left-color: var(--falcon-info); }
.nivel-acesso--secondary { border-left-color: var(--falcon-gray-500); }

/* Preview: rótulo à esquerda e valor à direita; no celular, um embaixo do outro (col-sm) */
.preview-usuario dt { font-weight: 600; color: var(--falcon-gray-700); }
.preview-usuario dd { overflow-wrap: anywhere; }
.preview-usuario .valor-anterior { display: block; color: var(--falcon-tertiary-color); text-decoration: line-through; }

/* ---------------- Logo do cliente (Clientes e Usuários) ---------------- */
/* moldura redonda e clara (logos costumam ter fundo branco ou transparente); a imagem cabe inteira */
.logo-cliente {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: var(--falcon-border-width) solid var(--falcon-border-color);
    border-radius: 50%;
    background-color: #fff;
    overflow: hidden;
}
/* redonda: a imagem preenche o círculo todo, sem borda branca em volta e sem esticar (cover). O
   enquadramento é escolhido no recorte do preview (criarRecorteLogo), que mostra a área redonda. */
.logo-cliente img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.logo-cliente--grande { width: 72px; height: 72px; }
.logo-cliente--vazia,
.logo-cliente--erro {
    background-color: var(--falcon-tertiary-bg);
    color: var(--falcon-tertiary-color);
    font-size: 1.4rem;
}
/* sem logo (ou a imagem não carregou): as iniciais do nome, no "avatar-name" do Falcon
   (bg-primary-subtle + text-primary, Poppins); com logo, a imagem fica por cima delas */
.logo-cliente__iniciais {
    font-family: var(--falcon-font-sans-serif);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--falcon-primary);
}
.logo-cliente--vazia,
.logo-cliente--erro { background-color: var(--falcon-primary-bg-subtle); border-color: var(--falcon-primary-border-subtle); }
.logo-cliente--grande .logo-cliente__iniciais { font-size: 1.5rem; }
/* a imagem cobre as iniciais (logo com fundo transparente também) e só aparece depois de carregada */
.logo-cliente img { background-color: #fff; }
.logo-cliente img:not([src]) { visibility: hidden; }
.logo-cliente--erro img { display: none; }
.editor-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Avatar do menu da conta com a logo da empresa (ver avatarUsuarioHtml em auth.js): redondo, fundo
   branco e a logo inteira dentro do círculo */
.bn-avatar--empresa {
    background-color: #fff;
    border: var(--falcon-border-width) solid var(--falcon-border-color);
}
.bn-avatar--empresa img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* preenche o círculo, sem borda branca (igual à .logo-cliente) */
}

/* Preview da logo antes de gravar (mostrarPreviewLogo em clientes.js): a imagem grande e nos
   tamanhos em que aparece no sistema. Tamanhos fixos: a imagem nunca passa da moldura. */
.preview-logo {
    padding: 0.9rem 1rem;
    border: var(--falcon-border-width) solid var(--falcon-border-color);
    border-radius: var(--falcon-border-radius);
    background-color: var(--falcon-tertiary-bg);
}
.preview-logo__imagens {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem;
}
.preview-logo__usos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.25rem;
}
.preview-logo__uso {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}
.logo-cliente--preview { width: 128px; height: 128px; font-size: 2.5rem; }
/* miniaturas do preview (canvas): mesmo encaixe da imagem — preenchem o círculo */
.logo-cliente canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Recorte da logo (criarRecorteLogo): quadrado = a logo gravada. Fundo xadrez mostra o que fica
   transparente. touch-action: none para arrastar com o dedo sem rolar a página. */
.recorte-logo { width: min(260px, 100%); }
.recorte-logo__area {
    position: relative;
    aspect-ratio: 1 / 1;
    border: var(--falcon-border-width) solid var(--falcon-border-color);
    border-radius: var(--falcon-border-radius);
    overflow: hidden;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #e9ecef 25%, transparent 25%, transparent 75%, #e9ecef 75%),
        linear-gradient(45deg, #e9ecef 25%, transparent 25%, transparent 75%, #e9ecef 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}
.recorte-logo__canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
}
.recorte-logo__canvas.arrastando { cursor: grabbing; }
/* guia redonda: escurece o que fica fora do círculo (a logo aparece sempre redonda no sistema) */
.recorte-logo__area::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle closest-side, transparent 98%, rgba(0, 0, 0, 0.45) 100%);
}
.recorte-logo__canvas:focus-visible { outline: 2px solid var(--falcon-primary); outline-offset: -2px; }
.recorte-logo__controles {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0.25rem;
}
.logo-cliente--menu { width: 64px; height: 64px; }
.preview-logo__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}
@media (max-width: 575.98px) {
    .preview-logo { padding: 0.75rem; }
    .preview-logo__imagens { justify-content: center; }
    .preview-logo__usos { justify-content: center; }
    .recorte-logo { width: 100%; max-width: 320px; }
    .logo-cliente--preview { width: 112px; height: 112px; }
    .preview-logo__acoes > .btn { flex: 1 1 auto; }
    .editor-logo { align-items: flex-start; }
}

/* Importação via Excel (aba Integração do cliente): a lista de erros da planilha rola dentro do aviso */
.lista-erros-planilha {
    max-height: 16rem;
    overflow-y: auto;
}

/* Tela Integração: as tabelas do modelo da planilha (uma por aba) com as mesmas larguras, para as
   colunas ficarem alinhadas de uma tabela para a outra */
.tabela-modelo-excel {
    table-layout: fixed;
    width: 100%;
}
.tabela-modelo-excel td,
.tabela-modelo-excel th {
    overflow-wrap: anywhere;
}
.tabela-modelo-excel .col-coluna { width: 22%; }
.tabela-modelo-excel .col-obrigatoria { width: 11%; }
.tabela-modelo-excel .col-formato { width: 42%; }
.tabela-modelo-excel .col-exemplo { width: 25%; }
.tabela-modelo-excel .col-endpoint { width: 40%; }

/* Tela Integração: setinha das seções recolhíveis (Bootstrap collapse) — aponta para o lado quando recolhida */
.seta-secao .seta-secao__icone {
    transition: transform 0.2s ease;
}
.seta-secao.collapsed .seta-secao__icone {
    transform: rotate(-90deg);
}
.seta-secao {
    font-size: inherit;
    font-weight: inherit;
}

/* ---------------- Modais: botão "Expandir" (ui.js — ligarExpandirModais) ----------------
   No cabeçalho, antes do X (o X perde o "margin-left: auto" do Bootstrap: quem empurra é o botão). Modal
   sem cabeçalho: no canto, à esquerda do X. */
.modal-expandir {
    padding: 0.25rem 0.5rem;
    color: var(--falcon-gray-600);
    line-height: 1;
}
.modal-expandir:hover,
.modal-expandir:focus-visible { color: var(--falcon-primary); }
.modal-header .modal-expandir { margin-left: auto; }
/* "Excel" no topo de todo modal com tabela (util/modal-excel.js): à esquerda do "Expandir" */
.modal-header .modal-excel { margin-left: auto; flex-shrink: 0; white-space: nowrap; }
.modal-header .modal-excel:not([hidden]) + .modal-expandir { margin-left: 0.25rem; }
.modal-header .modal-excel:not([hidden]) + .btn-close { margin-left: 0.5rem; }
.modal-header .modal-expandir + .btn-close { margin-left: 0.25rem; }
.modal-expandir--canto {
    position: absolute;
    top: 0.5rem;
    right: 2.75rem;
    z-index: 2;
}
@media (pointer: coarse) {
    .modal-expandir { min-width: 2.75rem; min-height: 2.75rem; }
}

/* ---------------- Cabeçalho das tabelas fixo ao rolar (todo o sistema) ----------------
   Tabela que rola para o lado (.table-responsive) não consegue prender o cabeçalho na rolagem da página:
   ela passa a rolar também por dentro, até a altura da tela, e o cabeçalho (thead inteiro — vale para
   cabeçalho de duas linhas) fica preso no topo dela. Tabela curta não muda nada. Quem já tem altura
   própria (style="max-height" — modais, listas) mantém a sua: o estilo da linha vence. */
.table-responsive { max-height: calc(100vh - 6rem); }
.table-responsive > table > thead {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: var(--falcon-card-bg);
    /* com border-collapse a borda do th não acompanha o cabeçalho preso: a linha vai como sombra */
    box-shadow: inset 0 -1px 0 var(--falcon-border-color);
}
.modal .table-responsive > table > thead { background-color: var(--falcon-modal-bg, var(--falcon-card-bg)); }

/* =========================================================
   CARD AMPLIADO (js/util/card-ampliado.js): o "Expandir" dos cards do Painel — a cópia idêntica do card,
   com o mesmo tamanho em pixels, só escalada (transform), num modal (baixa visão): pela metade (o modal
   largo, a área numa altura fixa) ou em tela cheia (a área ocupa o resto do modal)
   ========================================================= */
.card-ampliado { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.card-ampliado__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding-bottom: 12px; }
.card-ampliado__valor { min-width: 3.5rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.card-ampliado__area { height: min(62vh, 640px); min-height: 0; overflow: auto; }
/* tela cheia: a área ocupa a altura da tela menos o cabeçalho, a barra do zoom e o rodapé do modal */
.card-ampliado--cheia .card-ampliado__area { height: calc(100vh - 11.5rem); }
/* o palco tem o tamanho da cópia JÁ ampliada (o scroll da área acompanha); a cópia fica no canto e cresce
   a partir dele */
.card-ampliado__palco { position: relative; margin: 0 auto; }
.card-ampliado__palco.card-ampliado__palco { display: block; gap: 0; }
.card-ampliado__palco > * { position: absolute; top: 0; left: 0; }