/* =========================================================================
   ProtegeDoc — sistema visual dos dois painéis (equipe e área do cliente)
   -------------------------------------------------------------------------
   Injetado pelo render hook HEAD_END dos PanelProviders, DEPOIS do CSS do
   Filament: um seletor de mesma especificidade aqui vence o de lá.

   Base = o dashboard "Organizado", escolhido em 2026-09-10: superfícies
   brancas com borda fina, cantos de .5rem, sem sombra, fundo slate-100,
   azul-royal só nos acentos e títulos em tinta escura.

   REGRAS DESTE ARQUIVO
   · As cores do Filament vêm como "R, G, B" (com vírgulas). Use rgb(var(--x))
     ou rgba(var(--x), alfa). NUNCA rgb(var(--x) / alfa): com vírgulas é
     inválido e o navegador descarta a declaração sem avisar.
   · A cor primária mora na paleta PHP dos PanelProviders. Não sobrescrever
     --primary-* aqui (o Filament injeta a cor dos botões por conta própria).
   · Nada de `transform` persistente em ancestral de conteúdo: cria um
     containing block e desloca o position:fixed dos modais.
   · Não zerar `box-shadow` de campos e botões cinza do Filament: a borda deles
     É um box-shadow (ring). Foi assim que os campos ficaram sem contorno.
   · Blade próprio usa o kit .cp-* (seção 9), não utilitárias Tailwind: o CSS
     compilado do Filament só contém as classes que ele mesmo usa.
   ========================================================================= */


/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root {
    --cp-bg: #f1f5f9;
    --cp-surface: #fff;
    --cp-border: #e7eaed;
    --cp-border-strong: #d5dbe3;
    --cp-hair: #eef0f3;
    --cp-soft: #f5f7fb;
    --cp-ink: #1d2230;
    --cp-text: #454b5a;
    --cp-muted: #707889;
    --cp-primary: rgb(var(--primary-600));
    --cp-primary-soft: rgba(var(--primary-500), 0.1);
    /* item ativo do menu e da aba: o lavanda do sistema antigo */
    --cp-active: #e1e6fa;
    /* séries dos gráficos: escritório × empresas */
    --cp-esc: rgb(var(--primary-500));
    --cp-emp: #f59e0b;
    --cp-radius: 0.5rem;
    --cp-radius-sm: 0.375rem;
}

.dark {
    --cp-bg: rgb(var(--gray-950));
    --cp-surface: rgb(var(--gray-900));
    --cp-border: rgb(var(--gray-800));
    --cp-border-strong: rgb(var(--gray-700));
    --cp-hair: rgb(var(--gray-800));
    --cp-soft: rgba(var(--gray-800), 0.6);
    --cp-ink: rgb(var(--gray-100));
    --cp-text: rgb(var(--gray-300));
    --cp-muted: rgb(var(--gray-400));
    --cp-primary: rgb(var(--primary-400));
    --cp-primary-soft: rgba(var(--primary-400), 0.14);
    --cp-active: rgba(var(--primary-400), 0.16);
    --cp-esc: rgb(var(--primary-400));
}


/* =========================================================================
   2. BASE
   ========================================================================= */

/* Densidade do sistema antigo (html 14px): encolhe a UI inteira ~12,5%. */
html {
    font-size: 14px;
}
/* No celular e no tablet em pé, o portal usa uma base MAIOR (17px): com os
   14px do computador o texto das listas saía com 12px e o da barra de baixo
   com 9,5px — pequeno demais para ler no telefone (16px, o padrão da web,
   ainda ficou pequeno para o usuário). Tudo cresce junto (texto e espaços),
   então as proporções continuam as mesmas. */
@media (max-width: 899px) {
    html:has(> body.fi-panel-area-cliente) {
        font-size: 17px;
    }
}

.fi-body {
    background-color: var(--cp-bg);
    background-image: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--gray-300)) transparent;
}
.dark * {
    scrollbar-color: rgb(var(--gray-700)) transparent;
}

/* Entrada suave do conteúdo. SÓ opacity (ver regras do topo), e "backwards",
   não "both": com o fim da animação preso, a página vira um contexto de
   empilhamento e prende os popups e painéis laterais ABAIXO da barra do topo
   e do menu (o topo cobria o título do painel e o menu ficava sem escurecer). */
@keyframes cp-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
    .fi-main > * {
        animation: cp-fade-in 0.25s ease backwards;
    }
}


/* =========================================================================
   3. MENU LATERAL
   Uma coluna só: a marca, os ícones dos itens e os títulos dos grupos
   começam no mesmo x (1,5rem da borda, o recuo que o Filament já dá ao
   cabeçalho). O botão e as pílulas dos itens ocupam a mesma largura, e cada
   grupo abre com um filete, como os <hr> do menu antigo.
   ========================================================================= */
.fi-sidebar {
    --cp-menu-x: 0.75rem;     /* da borda do menu até a pílula */
    --cp-menu-pad: 0.75rem;   /* da pílula até o ícone (0,75 + 0,75 = 1,5rem) */
    --cp-menu-icone: 1.3rem;
    --cp-menu-item: 2.75rem;
}
.fi-sidebar,
.dark .fi-sidebar {
    background-color: var(--cp-surface);
    border-right: 1px solid var(--cp-border);
}

.fi-sidebar-header,
.dark .fi-sidebar-header {
    background-color: var(--cp-surface);
    border-bottom: 1px solid var(--cp-border);
    box-shadow: none;
}

.fi-sidebar-nav {
    padding: 1rem var(--cp-menu-x);
    row-gap: 1rem;
    /* O Filament reserva a calha da barra de rolagem só à direita (style
       inline, daí o !important): o menu ficava com 12px de um lado e 23px do
       outro. Sem a reserva, a barra só ocupa espaço quando existe. */
    scrollbar-gutter: auto !important;
}
/* O Filament puxa a lista 0,5rem para fora com margem negativa, e ela ficava
   mais larga que o botão "Enviar documento" logo acima. */
.fi-sidebar-nav-groups,
.fi-sidebar-nav-tenant-menu-ctn {
    margin-inline: 0;
}
.fi-sidebar-nav-groups {
    row-gap: 0.75rem;
}
.fi-sidebar-group + .fi-sidebar-group {
    padding-top: 0.75rem;
    border-top: 1px solid var(--cp-hair);
}

/* Título do grupo: o mesmo estilo do cabeçalho das tabelas. */
.fi-sidebar-group-button {
    padding: 0.35rem var(--cp-menu-pad);
}
.fi-sidebar-group-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cp-muted);
}
.fi-sidebar-group-collapse-button {
    color: var(--cp-muted);
}

.fi-sidebar-group-items,
.fi-sidebar-sub-group-items {
    row-gap: 0.2rem;
}
.fi-sidebar-item-button {
    min-height: var(--cp-menu-item);
    gap: 0.75rem;
    padding: 0.4rem var(--cp-menu-pad);
    border-radius: var(--cp-radius-sm);
    transition: background-color 0.15s ease;
}
.fi-sidebar-item-button:hover,
.fi-sidebar-item-button:focus-visible {
    background-color: var(--cp-soft);
}
.fi-sidebar-item-icon {
    width: var(--cp-menu-icone);
    height: var(--cp-menu-icone);
    color: var(--cp-muted);
}
.fi-sidebar-item-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--cp-text);
}
.fi-sidebar-item-button .fi-badge {
    min-width: 1.6rem;
    justify-content: center;
}

/* Só o ITEM ativo, e só o botão dele (`>`). O Filament também põe .fi-active
   no GRUPO que contém o item, e os atalhos de "Documentos" moram DENTRO do
   <li> do pai: sem o `>`, a pílula pintava todos os atalhos. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background-color: var(--cp-active);
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon {
    color: var(--cp-primary);
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-label {
    font-weight: 600;
}
/* Com um atalho ativo, a pílula fica só nele; o pai mantém a cor. */
.fi-sidebar-item.fi-active:has(.fi-sidebar-sub-group-items .fi-active) > .fi-sidebar-item-button {
    background-color: transparent;
}

/* Atalhos de "Documentos": o texto alinha com o do pai e um fio sai do
   centro do ícone dele, no lugar da árvore de pontinhos do Filament. */
.fi-sidebar-sub-group-items {
    margin-left: calc(var(--cp-menu-pad) + var(--cp-menu-icone) / 2);
    padding-left: 0.4rem;
    border-left: 1px solid var(--cp-border);
}
.fi-sidebar-sub-group-items .fi-sidebar-item-grouped-border {
    display: none;
}
.fi-sidebar-sub-group-items .fi-sidebar-item-button {
    min-height: 2.35rem;
    padding-left: calc(var(--cp-menu-icone) / 2 + 0.75rem - 0.4rem);
}
.fi-sidebar-sub-group-items .fi-sidebar-item-label {
    font-size: 0.9rem;
}
/* Recolhido, o atalho não tem ícone para mostrar. */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-sub-group-items {
    display: none;
}

/* Ação principal no topo do menu ("Enviar documento", abre o popup). Com o
   menu recolhido no desktop, fica só o ícone. */
.cp-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: var(--cp-menu-item);
    padding: 0.5rem var(--cp-menu-pad);
    border-radius: var(--cp-radius-sm);
    background-color: rgb(var(--primary-600));
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    transition: background-color 0.15s ease;
}
.cp-cta:hover,
.cp-cta:focus-visible {
    background-color: rgb(var(--primary-700));
}
.cp-cta svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}
.fi-sidebar:not(.fi-sidebar-open) .cp-cta {
    padding-inline: 0;
}
.fi-sidebar:not(.fi-sidebar-open) .cp-cta-texto {
    display: none;
}

/* Área do cliente: a empresa atual, no topo do menu, num quadro do tamanho
   das pílulas, com o avatar na coluna dos ícones. */
.fi-sidebar .fi-tenant-menu-trigger {
    justify-content: flex-start;
    gap: 0.65rem;
    padding: 0.45rem calc(var(--cp-menu-pad) - 1px);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--cp-ink);
}
.fi-sidebar:not(.fi-sidebar-open) .fi-tenant-menu-trigger {
    justify-content: center;
    padding-inline: 0;
    border-color: transparent;
}
/* Imagem que não carrega (ex.: sem internet para o avatar padrão) vira um
   quadrado claro em vez de mostrar o texto alternativo cortado. */
.fi-tenant-menu-trigger .fi-avatar {
    overflow: hidden;
    color: transparent;
    background-color: var(--cp-primary-soft);
}

/* ---- Marca (resources/views/filament/logo.blade.php) ---- */
.cp-marca {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
/* viewBox recortado no contorno do escudo (24×28): a borda dele cai na
   coluna dos ícones do menu. */
.cp-marca-simbolo {
    flex-shrink: 0;
    width: 1.72rem;
    height: 2rem;
    color: var(--cp-primary);
}
.cp-marca-nome {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--cp-ink);
}
.cp-marca-nome b {
    font-weight: inherit;
    color: var(--cp-primary);
}
/* Logo enviada pelo master (Configurações → Marca): altura do símbolo padrão,
   largura acompanha a proporção, sem passar da largura do menu. */
.cp-marca-imagem {
    display: block;
    height: 2.4rem;
    width: auto;
    max-width: 13rem;
    object-fit: contain;
    object-position: left center;
}
.cp-marca-imagem-escura {
    display: none;
}
/* Tema escuro: troca para a versão escura, quando o master enviou uma. */
.dark .cp-marca-com-imagem:has(.cp-marca-imagem-escura) .cp-marca-imagem-clara {
    display: none;
}
.dark .cp-marca-imagem-escura {
    display: block;
}
/* As telas de entrada são sempre claras: logo clara mesmo no tema escuro (o
   :has deixa a regra com o mesmo peso da de cima, e esta vem depois). */
.cp-entrada-marca .cp-marca-com-imagem:has(.cp-marca-imagem-escura) .cp-marca-imagem-clara {
    display: block;
}
.cp-entrada-marca .cp-marca-com-imagem .cp-marca-imagem-escura {
    display: none;
}


/* =========================================================================
   4. BARRA SUPERIOR E MENUS SUSPENSOS
   ========================================================================= */
.fi-topbar > nav,
.dark .fi-topbar > nav {
    background-color: var(--cp-surface);
    border-bottom: 1px solid var(--cp-border);
    box-shadow: none;
}

/* Acima de qualquer cartão da página (menu do usuário, ações ⋯ da tabela). */
.fi-dropdown-panel {
    z-index: 50;
    border-radius: var(--cp-radius);
}

/* ---- Busca global: a frase de exemplo é maior que o campo ----
   "Buscar empresa, documento ou pessoa" não cabe, e o navegador corta o fim
   sem avisar. Ao passar o mouse (ou ao focar o campo pelo Ctrl+K) a frase anda
   para a esquerda como um letreiro e, quando o fim aparece, o começo já vem
   emendado logo atrás: o giro é infinito, sempre no mesmo sentido, sem pulo e
   sem o campo ficar vazio.
   Como funciona: o texto de exemplo de verdade fica invisível e quem aparece é
   esta faixa (o ::after do quadro em volta do campo), que traz a MESMA frase
   DUAS vezes. Andar exatamente meia faixa (-50%) põe a segunda cópia no ponto
   em que a primeira começou — o instante da virada é idêntico ao começo, e é
   daí que vem a continuidade.
   ATENÇÃO: a frase está escrita aqui e em
   lang/vendor/filament-panels/pt_BR/global-search.php; se mudar lá, mude aqui.
   Ao digitar, a faixa some. Em tela de toque, e para quem pede menos animação
   no sistema, ela fica parada no começo da frase. */
.fi-global-search-field .fi-input-wrp-input {
    position: relative;
    overflow: hidden;
    /* mesma folga da direita que o campo já tinha */
    clip-path: inset(0 0.75rem 0 0);
}

/* O !important é para vencer as classes do próprio Filament no input
   (placeholder:text-gray-400 e dark:placeholder:text-gray-500). */
.fi-global-search-field input::placeholder {
    color: transparent !important;
}

.fi-global-search-field .fi-input-wrp-input::after {
    content: "Buscar empresa, documento ou pessoa  ·  "
        "Buscar empresa, documento ou pessoa  ·  ";
    position: absolute;
    inset-block: 0;
    left: 0;
    display: flex;
    width: max-content;
    align-items: center;
    white-space: pre;
    font-size: 1rem;
    line-height: 1.5rem;
    color: rgb(148 163 184);
    pointer-events: none;
}
/* Portal do cliente: a pessoa já está dentro da empresa (a frase real vem do
   AreaClientePanelProvider, bootUsing). */
.fi-panel-area-cliente .fi-global-search-field .fi-input-wrp-input::after {
    content: "Buscar documento ou colaborador  ·  "
        "Buscar documento ou colaborador  ·  ";
}
/* Painel master: a busca acha contas (MasterPanelProvider, bootUsing). */
.fi-panel-master .fi-global-search-field .fi-input-wrp-input::after {
    content: "Buscar conta (nome, e-mail, CNPJ)  ·  "
        "Buscar conta (nome, e-mail, CNPJ)  ·  ";
}
@media (min-width: 640px) {
    .fi-global-search-field .fi-input-wrp-input::after {
        font-size: 0.875rem;
    }
}
.dark .fi-global-search-field .fi-input-wrp-input::after {
    color: rgb(100 116 139);
}

/* Com algo digitado, a faixa sai da frente do que se está escrevendo. */
.fi-global-search-field:has(input:not(:placeholder-shown)) .fi-input-wrp-input::after {
    content: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .fi-global-search-field:hover .fi-input-wrp-input::after,
    .fi-global-search-field:focus-within .fi-input-wrp-input::after {
        animation: cp-busca-letreiro 5.1s linear infinite;
    }
}

@keyframes cp-busca-letreiro {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}


/* =========================================================================
   5. PÁGINA: cabeçalho e espaçamento
   ========================================================================= */
.fi-page > section {
    row-gap: 1.25rem;
}

.fi-header {
    row-gap: 0.75rem;
}
.fi-header-heading {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--cp-ink);
}
.fi-header-subheading {
    margin-top: 0.3rem;
    font-size: 0.95rem;
    color: var(--cp-muted);
}

/* "Empresas > Listar" não acrescenta nada numa lista. Nas páginas internas
   (Central, Timeline) o caminho continua, porque ali é navegação. */
.fi-resource-list-records-page .fi-breadcrumbs {
    display: none;
}


/* =========================================================================
   6. CARTÕES (seções do Filament)
   ========================================================================= */
.fi-section,
.dark .fi-section {
    background-color: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    box-shadow: none;
}
.fi-section-header {
    padding: 1rem 1.25rem;
}
.fi-section-header-heading {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cp-ink);
}
.fi-section-header-description {
    font-size: 0.85rem;
    color: var(--cp-muted);
}
.fi-section-content-ctn {
    border-color: var(--cp-hair);
}
.fi-section-content {
    padding: 1.25rem;
}

/* Seção sem título dentro de popup é só agrupamento de campos: sem
   "cartão dentro de cartão". */
.fi-modal .fi-section:not(:has(.fi-section-header)) {
    border: 0;
    background: transparent;
}
.fi-modal .fi-section:not(:has(.fi-section-header)) .fi-section-content {
    padding: 0;
}


/* =========================================================================
   7. TABELAS, ABAS, BADGES E PAGINAÇÃO
   ========================================================================= */
.fi-ta-ctn,
.dark .fi-ta-ctn {
    background-color: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    box-shadow: none;
}
.fi-ta-ctn.divide-y > :not([hidden]) ~ :not([hidden]),
.fi-ta-ctn .divide-y > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--cp-hair);
}

.fi-ta-header-toolbar {
    padding: 0.75rem 1.25rem;
    /* Com documentos marcados entram botões ("Baixar selecionados"...): em
       tabela estreita a busca desce para outra linha em vez de virar um "F". */
    flex-wrap: wrap;
    row-gap: 0.75rem;
}
.fi-ta-header-toolbar .fi-ta-search-field {
    min-width: 12rem;
}
/* No celular os botões das ações quebram linha em vez de sair pela borda. */
.fi-ta-header-toolbar > div:first-of-type,
.fi-ta-header-toolbar .fi-ta-actions {
    flex-shrink: 1;
    flex-wrap: wrap;
    justify-content: flex-start;
    min-width: 0;
    row-gap: 0.5rem;
}
/* Enquanto há algo marcado, os botões das ações ocupam o lugar do "Agrupar por". */
.fi-ta-header-toolbar .fi-ta-actions:not([style*="display: none"]):not([x-cloak]) ~ [x-data*="tableGrouping"] {
    display: none;
}

.fi-ta-table thead tr,
.dark .fi-ta-table thead tr {
    background-color: transparent;
}
.fi-ta-header-cell {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.fi-ta-header-cell-label,
.dark .fi-ta-header-cell-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cp-muted);
}

.fi-ta-cell {
    vertical-align: middle;
}
.fi-ta-row {
    transition: background-color 0.12s ease;
}
.fi-ta-row:hover {
    background-color: var(--cp-soft);
}

/* Coluna "Título" da lista de documentos (TabelaDocumento): título + dono ·
   tipo empilhados precisam de uma largura mínima para não virar uma torre. */
.cp-col-titulo {
    min-width: 15rem;
}

/* TABELA QUE CABE NA TELA — regra do painel da equipe (25/09): texto que pode
   ser longo (nome, registro, alterações) quebra linha (`->wrap()`) com uma
   largura mínima, para não virar torre; sem `wrap` só o que tem tamanho fixo
   (data, CNPJ, selo). Foi um nome de empresa numa linha só + duas colunas de
   data que empurraram o "Opções" para fora da tela em Empresas. */
.cp-col-principal {
    min-width: 13rem;
    overflow-wrap: anywhere;
}
.cp-col-texto {
    min-width: 10rem;
    overflow-wrap: anywhere;
}
.cp-col-situacao {
    min-width: 9rem;
}

/* Rede de segurança: se ainda assim a tabela não couber (tela estreita, nome
   enorme), a coluna dos botões fica PRESA à direita — a tabela rola por baixo
   dela e "Gerenciar"/"Opções"/baixar nunca saem da tela. Sem rolagem, nada
   muda. O fundo é opaco (senão o texto rolado aparece por trás) e repete o
   tom da linha (passar o mouse, linha marcada). */
.fi-panel-painel .fi-ta-table > thead > tr > th.fi-ta-actions-header-cell:last-child,
.fi-panel-painel .fi-ta-row > td.fi-ta-actions-cell:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    background-color: var(--cp-surface);
    background-image: linear-gradient(var(--cp-linha, transparent), var(--cp-linha, transparent));
}
.fi-panel-painel .fi-ta-row:hover {
    --cp-linha: var(--cp-soft);
}
.fi-panel-painel .fi-ta-row.bg-gray-50 {
    --cp-linha: rgb(var(--gray-50));
}
.dark .fi-panel-painel .fi-ta-row.bg-gray-50 {
    --cp-linha: rgba(255, 255, 255, 0.05);
}
/* O menu "⋯" aberto mora dentro da célula presa: sobe acima das células
   presas das linhas de baixo, senão elas cobririam o menu. */
.fi-panel-painel .fi-ta-row > td.fi-ta-actions-cell:last-child:focus-within,
.fi-panel-painel .fi-ta-row > td.fi-ta-actions-cell:last-child:has(.fi-dropdown-panel:not([style*="display: none"])) {
    z-index: 3;
}
/* Sombra à esquerda da coluna presa só enquanto há conteúdo rolando por baixo
   (linha do tempo de rolagem: sem rolagem, a animação nem roda; no fim da
   rolagem, some). Navegador sem suporte fica só com o fundo opaco. */
@supports (animation-timeline: scroll()) {
    .fi-panel-painel .fi-ta-content {
        scroll-timeline: --cp-rolagem-tabela x;
    }
    .fi-panel-painel .fi-ta-table > thead > tr > th.fi-ta-actions-header-cell:last-child,
    .fi-panel-painel .fi-ta-row > td.fi-ta-actions-cell:last-child {
        animation: cp-sombra-acoes linear both;
        animation-timeline: --cp-rolagem-tabela;
    }
}
.fi-panel-painel {
    --cp-sombra-presa: rgba(15, 23, 42, 0.28);
}
.dark .fi-panel-painel {
    --cp-sombra-presa: rgba(0, 0, 0, 0.7);
}
@keyframes cp-sombra-acoes {
    0%, 96% {
        box-shadow: -10px 0 10px -8px var(--cp-sombra-presa);
    }
    100% {
        box-shadow: none;
    }
}

/* PORTAL DO CLIENTE no computador (a partir de 900px; abaixo disso as listas
   viram cartões — seção 14 — e a célula presa quebraria o "⋮" do cartão, que
   se posiciona pela linha). Mesma rede de segurança do escritório. Com o menu
   aberto, Documentos pedia 176px a mais em 1024px e 20px em 1180px, e o
   Baixar/⋯ ficava fora da tela. */
@media (min-width: 900px) {
    .fi-panel-area-cliente .fi-ta-table > thead > tr > th.fi-ta-actions-header-cell:last-child,
    .fi-panel-area-cliente .fi-ta-row > td.fi-ta-actions-cell:last-child {
        position: sticky;
        right: 0;
        z-index: 1;
        background-color: var(--cp-surface);
        background-image: linear-gradient(var(--cp-linha, transparent), var(--cp-linha, transparent));
    }
    .fi-panel-area-cliente .fi-ta-row:hover {
        --cp-linha: var(--cp-soft);
    }
    .fi-panel-area-cliente .fi-ta-row.bg-gray-50 {
        --cp-linha: rgb(var(--gray-50));
    }
    .dark .fi-panel-area-cliente .fi-ta-row.bg-gray-50 {
        --cp-linha: rgba(255, 255, 255, 0.05);
    }
    .fi-panel-area-cliente .fi-ta-row > td.fi-ta-actions-cell:last-child:focus-within,
    .fi-panel-area-cliente .fi-ta-row > td.fi-ta-actions-cell:last-child:has(.fi-dropdown-panel:not([style*="display: none"])) {
        z-index: 3;
    }
    .fi-panel-area-cliente {
        --cp-sombra-presa: rgba(15, 23, 42, 0.28);
    }
    .dark .fi-panel-area-cliente {
        --cp-sombra-presa: rgba(0, 0, 0, 0.7);
    }
    @supports (animation-timeline: scroll()) {
        .fi-panel-area-cliente .fi-ta-content {
            scroll-timeline: --cp-rolagem-tabela x;
        }
        .fi-panel-area-cliente .fi-ta-table > thead > tr > th.fi-ta-actions-header-cell:last-child,
        .fi-panel-area-cliente .fi-ta-row > td.fi-ta-actions-cell:last-child {
            animation: cp-sombra-acoes linear both;
            animation-timeline: --cp-rolagem-tabela;
        }
    }

    /* A explicação embaixo do selo da Situação ("aberto em 23/09/2026") quebra
       linha quando falta espaço, em vez de alargar a tabela. */
    .fi-panel-area-cliente .fi-ta-row > td.fi-table-cell-situacao .fi-ta-text,
    .fi-panel-area-cliente .fi-ta-row > td.fi-table-cell-situacao .fi-ta-text > p {
        white-space: normal;
    }
    .fi-panel-area-cliente .fi-ta-row > td.fi-table-cell-situacao .fi-ta-text {
        min-width: 8rem;
    }
}

/* Portal entre 900 e 1279px (menu aberto): sai a coluna "Enviado por", que as
   abas Todos / Enviados pelo escritório / Enviados por mim já separam — é o
   que faz a lista caber sem rolar. */
@media (min-width: 900px) and (max-width: 1279px) {
    .fi-panel-area-cliente .fi-ta-table > thead > tr > th.fi-table-header-cell-categoria,
    .fi-panel-area-cliente .fi-ta-row > td.fi-table-cell-categoria {
        display: none;
    }

    /* Boletos (a tabela com a coluna Situação do boleto): saem Pasta e
       Competência — o vencimento é o que importa ali — e o título quebra
       linha. Era a lista mais larga do portal (+176px em 1024px). */
    .fi-panel-area-cliente .fi-ta-table:has(th.fi-table-header-cell-status-boleto) :is(th.fi-table-header-cell-pasta\.nome, td.fi-table-cell-pasta\.nome, th.fi-table-header-cell-competencia, td.fi-table-cell-competencia) {
        display: none;
    }
    .fi-panel-area-cliente .fi-ta-table:has(th.fi-table-header-cell-status-boleto) td.fi-table-cell-titulo :is(.fi-ta-text, .fi-ta-text-item, .fi-ta-text > p) {
        white-space: normal;
    }
    .fi-panel-area-cliente .fi-ta-table:has(th.fi-table-header-cell-status-boleto) td.fi-table-cell-titulo .fi-ta-text {
        min-width: 11rem;
    }

    /* Colaboradores (a tabela com Desligamento): sai a Matrícula. */
    .fi-panel-area-cliente .fi-ta-table:has(th.fi-table-header-cell-data-desligamento) :is(th.fi-table-header-cell-matricula, td.fi-table-cell-matricula) {
        display: none;
    }
}

/* Listas de documentos do portal entre 900 e 1099px: sai também "Recebido em"
   (a data continua no painel de detalhes, e o "Novo" diz o que chegou). */
@media (min-width: 900px) and (max-width: 1099px) {
    .fi-panel-area-cliente .fi-ta-table > thead > tr > th.fi-table-header-cell-created-at,
    .fi-panel-area-cliente .fi-ta-row > td.fi-table-cell-created-at {
        display: none;
    }
}

.fi-ta-empty-state-icon-ctn {
    background-color: var(--cp-primary-soft);
    color: var(--cp-primary);
}
.fi-ta-empty-state-heading {
    color: var(--cp-ink);
}

.fi-pagination-overview {
    font-size: 0.85rem;
    color: var(--cp-muted);
}
.fi-pagination-items {
    border-radius: var(--cp-radius-sm);
}

/* Abas: controle segmentado alinhado à esquerda, ativo em lavanda. */
.fi-tabs,
.dark .fi-tabs {
    width: fit-content;
    margin-inline: 0;
    gap: 0.25rem;
    padding: 0.3rem;
    background-color: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    box-shadow: none;
}
.fi-tabs-item {
    padding: 0.45rem 0.85rem;
    border-radius: var(--cp-radius-sm);
    transition: background-color 0.15s ease;
}
.fi-tabs-item:hover {
    background-color: var(--cp-soft);
}
.fi-tabs-item-label {
    font-weight: 500;
    color: var(--cp-text);
}
.fi-tabs-item-icon {
    color: var(--cp-muted);
}
.fi-tabs-item.fi-active,
.dark .fi-tabs-item.fi-active {
    background-color: var(--cp-active);
}
.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-tabs-item-icon {
    color: var(--cp-primary);
}
.fi-tabs-item.fi-active .fi-tabs-item-label {
    font-weight: 600;
}

/* Badges em pílula, sem o anel interno. */
.fi-badge {
    border-radius: 999px;
    font-weight: 600;
    box-shadow: none;
}


/* =========================================================================
   8. BOTÕES, CAMPOS, POPUPS, NOTIFICAÇÕES E LOGIN
   ========================================================================= */
.fi-btn,
.fi-icon-btn,
.fi-input-wrp {
    border-radius: var(--cp-radius-sm);
}

/* Área de soltar arquivos com cara de área de soltar. */
.fi-fo-file-upload .filepond--panel-root,
.dark .fi-fo-file-upload .filepond--panel-root {
    background-color: var(--cp-soft);
    border: 1px dashed var(--cp-border-strong);
    box-shadow: none;
}

.fi-modal-window {
    border-radius: 0.75rem;
}
.fi-modal-heading {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--cp-ink);
}
.dark .fi-modal-heading {
    color: var(--cp-ink);
}
.fi-modal-description {
    color: var(--cp-muted);
}
/* Rodapé à direita com o botão principal por último: o Filament entrega
   [Salvar, Cancelar] e o row-reverse mostra [Cancelar][Salvar]. Popups de
   confirmação (flex-col-reverse/grid, centralizados) ficam como estão. */
.fi-modal-footer-actions:not(.flex-col-reverse) {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

/* Lista longa de caixas num popup (as empresas do "Enviar documento"): rola
   numa caixa própria em vez de esticar o popup inteiro. */
.cp-lista-rolavel {
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.75rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    background-color: var(--cp-surface);
}

.fi-no-notification {
    border-radius: var(--cp-radius);
}

.fi-simple-layout,
.dark .fi-simple-layout {
    background-color: var(--cp-bg);
}
.fi-simple-main {
    border-radius: 0.75rem;
    box-shadow: 0 0 0 1px var(--cp-border), 0 18px 40px -26px rgba(15, 23, 42, 0.35);
}
.fi-simple-header-heading {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cp-ink);
}
.dark .fi-simple-header-heading {
    color: var(--cp-ink);
}


/* =========================================================================
   9. KIT .cp-* — blocos dos Blades próprios
   ========================================================================= */
.cp-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- Grade de 12 colunas: cartões de uma mesma linha ficam da mesma altura */
.cp-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}
.cp-grid > * {
    grid-column: span 12;
    min-width: 0;
}
/* Cada cartão na altura do próprio conteúdo (cartões de boletos do portal: o
   vazio ficava do tamanho do mais cheio, um bloco enorme dizendo "nenhum"). */
.cp-grid.cp-grid-topo {
    align-items: start;
}
@media (min-width: 768px) {
    .cp-grid > .cp-md-4 { grid-column: span 4; }
    .cp-grid > .cp-md-6 { grid-column: span 6; }
}
@media (min-width: 1280px) {
    .cp-grid > .cp-xl-3 { grid-column: span 3; }
    .cp-grid > .cp-xl-4 { grid-column: span 4; }
    .cp-grid > .cp-xl-6 { grid-column: span 6; }
    .cp-grid > .cp-xl-8 { grid-column: span 8; }
}

/* ---- Cartão e cabeçalho padrão (ícone + título + link) ---- */
.cp-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.25rem;
    background-color: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    color: var(--cp-text);
}
a.cp-card {
    transition: border-color 0.15s ease;
}
a.cp-card:hover {
    border-color: rgba(var(--primary-500), 0.5);
}
.cp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 1.75rem;
    margin-bottom: 1rem;
}
.cp-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cp-ink);
}
.cp-card-title > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cp-card-title > svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--cp-primary);
}
.cp-card-foot {
    margin-top: auto;
    padding-top: 1rem;
}

.cp-link {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--cp-primary);
}
.cp-link:hover {
    text-decoration: underline;
}
.cp-muted {
    font-size: 0.85rem;
    color: var(--cp-muted);
}
.cp-muted b {
    font-weight: 600;
    color: var(--cp-ink);
}
.cp-vazio {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--cp-muted);
}
.cp-vazio.cp-vazio-curto {
    justify-content: flex-start;
    padding: 0;
    text-align: left;
}
.cp-trunc {
    display: block;
    min-width: 0;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cp-texto-danger {
    color: rgb(var(--danger-600));
}
.dark .cp-texto-danger {
    color: rgb(var(--danger-400));
}

/* ---- Cartão de número (dashboard e faixas das listas) ---- */
.cp-kpi {
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
}
.cp-kpi-icone {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.6rem;
    background-color: var(--cp-primary-soft);
    color: var(--cp-primary);
}
.cp-kpi-icone svg {
    width: 1.4rem;
    height: 1.4rem;
}
.cp-kpi-textos {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
/* Até 2 linhas (antes cortava em 1: "Documentos das empre…" a 1366 px). */
.cp-kpi-rotulo,
.cp-kpi-legenda {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
}
.cp-kpi-rotulo {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--cp-ink);
}
.cp-kpi-valor {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--cp-primary);
}
.cp-kpi-legenda {
    font-size: 0.8rem;
    color: var(--cp-muted);
}
/* Tons de alerta: só quando há algo a fazer (número > 0). */
.cp-kpi-warning .cp-kpi-icone { background-color: rgba(var(--warning-500), 0.16); color: rgb(var(--warning-600)); }
.cp-kpi-warning .cp-kpi-valor { color: rgb(var(--warning-600)); }
.cp-kpi-danger .cp-kpi-icone { background-color: rgba(var(--danger-500), 0.12); color: rgb(var(--danger-600)); }
.cp-kpi-danger .cp-kpi-valor { color: rgb(var(--danger-600)); }
.dark .cp-kpi-warning .cp-kpi-icone,
.dark .cp-kpi-warning .cp-kpi-valor { color: rgb(var(--warning-400)); }
.dark .cp-kpi-danger .cp-kpi-icone,
.dark .cp-kpi-danger .cp-kpi-valor { color: rgb(var(--danger-400)); }

/* ---- Listas ---- */
.cp-lista {
    display: flex;
    flex-direction: column;
}
.cp-lista > li + li {
    border-top: 1px solid var(--cp-hair);
}
.cp-lista-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.5rem;
    margin: 0 -0.5rem;
    border-radius: 0.4rem;
}
a.cp-lista-item:hover {
    background-color: var(--cp-soft);
}
.cp-lista-textos {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cp-lista-titulo,
.cp-lista-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cp-lista-titulo {
    font-size: 0.93rem;
    font-weight: 500;
    color: var(--cp-ink);
}
.cp-lista-sub {
    font-size: 0.8rem;
    color: var(--cp-muted);
}
/* Histórico do painel de detalhes: "Baixou · cliente · IP …" quebra a linha
   em vez de cortar (no celular de 360 px o IP sumia). */
.cp-detalhe-bloco .cp-lista-sub {
    white-space: normal;
    overflow-wrap: anywhere;
}
.cp-lista-fim {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.8rem;
    color: var(--cp-muted);
}
.cp-lista-data {
    font-weight: 500;
    color: var(--cp-ink);
}
.cp-prazo {
    font-size: 0.75rem;
    color: rgb(var(--warning-600));
}
.cp-prazo.is-vencido {
    font-weight: 600;
    color: rgb(var(--danger-600));
}
.dark .cp-prazo { color: rgb(var(--warning-400)); }
.dark .cp-prazo.is-vencido { color: rgb(var(--danger-400)); }
.cp-marcador {
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background-color: rgb(var(--warning-500));
}
.cp-marcador.is-vencido {
    background-color: rgb(var(--danger-500));
}

/* ---- Avatar de iniciais e ícone em círculo ---- */
.cp-avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background-color: var(--cp-primary-soft);
    color: var(--cp-primary);
}
.cp-circulo {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--cp-soft);
    color: var(--cp-muted);
}
.cp-circulo svg {
    width: 1rem;
    height: 1rem;
}
.cp-circulo.is-primary { background-color: var(--cp-primary-soft); color: var(--cp-primary); }
.cp-circulo.is-info { background-color: rgba(var(--info-500), 0.14); color: rgb(var(--info-600)); }
.cp-circulo.is-success { background-color: rgba(var(--success-500), 0.14); color: rgb(var(--success-600)); }
.cp-circulo.is-warning { background-color: rgba(var(--warning-500), 0.16); color: rgb(var(--warning-600)); }
.cp-circulo.is-danger { background-color: rgba(var(--danger-500), 0.12); color: rgb(var(--danger-600)); }

/* ---- Portal: RESUMO do Início (App\Filament\AreaCliente\Widgets\ResumoCliente) ----
   Quatro números clicáveis lado a lado — documentos novos, boletos vencidos,
   a vencer e pagos —, divididos por um fio. O número vem na cor do assunto,
   com um filete da mesma cor no alto, quando há algo; zero fica apagado.
   Substituiu o bloco de avisos e os três cartões de boletos (24/09). */
.cp-resumo {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
}
.cp-resumo-item {
    --cp-resumo-cor: var(--cp-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 0;
    padding: 1.1rem 0.5rem 1rem;
    color: var(--cp-ink);
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.cp-resumo-item + .cp-resumo-item {
    border-left: 1px solid var(--cp-border);
}
.cp-resumo-item:not(.is-zero) {
    box-shadow: inset 0 3px 0 var(--cp-resumo-cor);
}
.cp-resumo-item:hover,
.cp-resumo-item:focus-visible {
    background-color: var(--cp-soft);
}
.cp-resumo-item.is-danger { --cp-resumo-cor: rgb(var(--danger-600)); }
.cp-resumo-item.is-warning { --cp-resumo-cor: rgb(var(--warning-500)); }
.cp-resumo-item.is-success { --cp-resumo-cor: rgb(var(--success-600)); }
.dark .cp-resumo-item.is-danger { --cp-resumo-cor: rgb(var(--danger-400)); }
.dark .cp-resumo-item.is-success { --cp-resumo-cor: rgb(var(--success-400)); }
.cp-resumo-valor {
    color: var(--cp-resumo-cor);
    font-size: 1.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}
.cp-resumo-item.is-zero .cp-resumo-valor {
    color: var(--cp-muted);
    opacity: 0.55;
}
.cp-resumo-rotulo {
    color: var(--cp-muted);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.25;
}

/* ---- Pílulas e pontos de legenda ---- */
.cp-pilula {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    background-color: var(--cp-soft);
    color: var(--cp-muted);
}
.cp-pilula svg {
    width: 0.8rem;
    height: 0.8rem;
}
.cp-pilula-primary { background-color: rgba(var(--primary-500), 0.12); color: rgb(var(--primary-700)); }
.cp-pilula-success { background-color: rgba(var(--success-500), 0.14); color: rgb(var(--success-700)); }
.cp-pilula-warning { background-color: rgba(var(--warning-500), 0.16); color: rgb(var(--warning-700)); }
.cp-pilula-danger { background-color: rgba(var(--danger-500), 0.12); color: rgb(var(--danger-700)); }
.cp-pilula-info { background-color: rgba(var(--info-500), 0.14); color: rgb(var(--info-700)); }
.dark .cp-pilula-primary { color: rgb(var(--primary-300)); }
.dark .cp-pilula-success { color: rgb(var(--success-400)); }
.dark .cp-pilula-warning { color: rgb(var(--warning-400)); }
.dark .cp-pilula-danger { color: rgb(var(--danger-400)); }
.dark .cp-pilula-info { color: rgb(var(--info-400)); }

.cp-ponto {
    flex-shrink: 0;
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: var(--cp-muted);
}
.cp-ponto-esc { background-color: var(--cp-esc); }
.cp-ponto-emp { background-color: var(--cp-emp); }
.cp-ponto-info { background-color: rgb(var(--info-500)); }
.cp-ponto-cinza { background-color: rgb(var(--gray-300)); }
.dark .cp-ponto-cinza { background-color: rgb(var(--gray-600)); }

.cp-legenda-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.8rem;
    color: var(--cp-muted);
}
.cp-legenda-inline > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* ---- Anel de progresso (SVG) + legenda ao lado ---- */
.cp-anel {
    position: relative;
    flex-shrink: 0;
    width: var(--cp-anel-tam, 9.5rem);
    aspect-ratio: 1;
}
.cp-anel svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.cp-anel circle {
    fill: none;
    stroke-width: 10;
}
.cp-anel-fundo { stroke: rgb(var(--gray-200)); }
.dark .cp-anel-fundo { stroke: rgb(var(--gray-800)); }
.cp-anel-valor {
    stroke: var(--cp-primary);
    stroke-linecap: round;
}
.cp-anel-centro {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cp-anel-centro strong {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--cp-ink);
}
.cp-anel-centro span {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--cp-muted);
}
.cp-taxa {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem 1.75rem;
}
.cp-legenda {
    display: flex;
    flex-direction: column;
    min-width: 10rem;
}
.cp-legenda li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    font-size: 0.88rem;
}
.cp-legenda b {
    margin-left: auto;
    padding-left: 1rem;
    font-weight: 600;
    color: var(--cp-ink);
}

/* ---- Barras horizontais em HTML ---- */
.cp-barras {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.cp-barras-item {
    display: block;
    padding: 0.35rem 0.5rem;
    margin: 0 -0.5rem;
    border-radius: 0.4rem;
}
a.cp-barras-item:hover {
    background-color: var(--cp-soft);
}
.cp-barras-topo {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 0.88rem;
    color: var(--cp-ink);
}
.cp-barra {
    display: block;
    height: 0.4rem;
    border-radius: 999px;
    overflow: hidden;
    background-color: var(--cp-soft);
}
.cp-barra + .cp-barra {
    margin-top: 0.2rem;
}
.cp-barra > span {
    display: block;
    height: 100%;
    border-radius: inherit;
}
.cp-barra-esc { background-color: var(--cp-esc); }
.cp-barra-emp { background-color: var(--cp-emp); }

/* ---- Gráfico do Filament dentro de um .cp-card ----
       O widget traz o próprio "section" (borda, padding). Aqui ele fica
       transparente e o cartão de fora manda. Altura fixa por cartão
       (--cp-chart-h); o Chart.js só preenche. */
.cp-chart {
    min-height: var(--cp-chart-h, 16rem);
}
.cp-chart [wire\:ignore] {
    position: relative;
    height: var(--cp-chart-h, 16rem);
}
.cp-chart .fi-section,
.dark .cp-chart .fi-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.cp-chart .fi-section-content-ctn {
    border: 0;
}
.cp-chart .fi-section-content {
    padding: 0;
}

/* ---- Linha do tempo ---- */
.cp-feed li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.85rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--cp-hair);
}
.cp-feed li:first-child {
    border-top: 0;
    padding-top: 0.2rem;
}
.cp-feed-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.93rem;
    color: var(--cp-text);
}
.cp-feed-tipo {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cp-muted);
}
.cp-feed-texto strong {
    font-weight: 600;
    color: var(--cp-ink);
    overflow-wrap: anywhere;
}
.cp-feed-sub {
    font-size: 0.82rem;
    color: var(--cp-muted);
}
.cp-feed-quando {
    padding-top: 0.1rem;
    font-size: 0.8rem;
    white-space: nowrap;
    color: var(--cp-muted);
}

/* ---- Aviso em destaque ---- */
.cp-aviso {
    padding: 1rem 1.25rem;
    border: 1px solid;
    border-radius: var(--cp-radius);
    font-size: 0.9rem;
    color: var(--cp-text);
}
.cp-aviso-warning {
    background-color: rgba(var(--warning-500), 0.08);
    border-color: rgba(var(--warning-500), 0.4);
}
/* As cores de "informação", "deu certo" e "falhou" — até 16/09 só o amarelo
   existia, e as outras caixas saíam com a borda na cor do texto. */
.cp-aviso-info {
    background-color: rgba(var(--info-500), 0.07);
    border-color: rgba(var(--info-500), 0.35);
}
.cp-aviso-success {
    background-color: rgba(var(--success-500), 0.07);
    border-color: rgba(var(--success-500), 0.4);
}
.cp-aviso-danger {
    background-color: rgba(var(--danger-500), 0.06);
    border-color: rgba(var(--danger-500), 0.4);
}
.cp-aviso-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-weight: 600;
    color: var(--cp-ink);
}
.cp-aviso-titulo svg {
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
    color: rgb(var(--warning-600));
}
.cp-aviso-info .cp-aviso-titulo svg { color: rgb(var(--info-600)); }
.cp-aviso-success .cp-aviso-titulo svg { color: rgb(var(--success-600)); }
.cp-aviso-danger .cp-aviso-titulo svg { color: rgb(var(--danger-600)); }
.cp-aviso-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

/* Configuração de e-mail: o "testando…" ao lado do botão e o que foi tentado. */
.cp-testando {
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--cp-muted);
}
.cp-tentativas {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: var(--cp-muted);
}
.cp-tentativas summary {
    cursor: pointer;
    width: fit-content;
}
.cp-tentativas ul {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    overflow-wrap: anywhere;
}
.cp-tentativa-ok { color: rgb(var(--success-600)); font-weight: 700; }
.cp-tentativa-falha { color: rgb(var(--danger-600)); font-weight: 700; }
.cp-codigos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.85rem;
}
@media (min-width: 640px) {
    .cp-codigos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cp-codigos code {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    background-color: var(--cp-surface);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.85rem;
    text-align: center;
}

/* ---- Botões pequenos e grupo de ações ---- */
.cp-form-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.cp-acoes {
    display: inline-flex;
    flex-shrink: 0;
    gap: 0.4rem;
}
.cp-btn-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--cp-radius-sm);
    background-color: rgb(var(--primary-600));
    color: #fff;
    transition: background-color 0.15s ease;
}
.cp-btn-icone:hover {
    background-color: rgb(var(--primary-700));
}
.cp-btn-icone.is-claro {
    background-color: var(--cp-primary-soft);
    color: var(--cp-primary);
}
.cp-btn-icone.is-claro:hover {
    background-color: rgba(var(--primary-500), 0.18);
}
.cp-btn-icone svg {
    width: 1rem;
    height: 1rem;
}
/* TODO botão de download do sistema no mesmo desenho do .cp-btn-icone acima
   (o dos cartões de boletos do Início, escolhido pelo usuário): quadrado azul
   sólido com o ícone branco. Vale para os "Baixar" em ícone das listas, nos
   dois painéis — pega pelo endereço (rotas /download/), então uma lista nova
   já nasce igual, sem precisar lembrar de nada. */
a.fi-icon-btn[href*="/download/"] {
    width: 2rem;
    height: 2rem;
    margin: 0;
    border-radius: var(--cp-radius-sm);
    background-color: rgb(var(--primary-600));
    color: #fff !important;
    transition: background-color 0.15s ease;
}
a.fi-icon-btn[href*="/download/"]:hover,
a.fi-icon-btn[href*="/download/"]:focus-visible {
    background-color: rgb(var(--primary-700));
}
/* A linha inteira abre o registro (view linha-inteira-clicavel): a mãozinha
   aparece na linha toda, não só em cima do texto. */
.fi-ta-row:has(.fi-ta-col-wrp > button, .fi-ta-col-wrp > a) {
    cursor: pointer;
}
a.fi-icon-btn[href*="/download/"] .fi-icon-btn-icon {
    width: 1rem;
    height: 1rem;
    color: #fff !important;
}


/* =========================================================================
   10. PASTAS DA EMPRESA — réplica do menu do sistema antigo (Central da
       empresa e área do cliente). Cada empresa tem as suas pastas; as 5
       padrão nascem com as cores do antigo, para o cliente sentir que é o
       mesmo sistema, e as criadas pela equipe usam a cor escolhida.
   ========================================================================= */
/* No máximo 5 pastas por fileira (as 5 padrão cabem numa linha só): a coluna
   nunca fica mais estreita que 1/5 da grade nem que 170px — em tela menor
   cabem menos por linha, e empresa com muitas pastas quebra para a linha de
   baixo (todas do mesmo tamanho) em vez de espremer os nomes. */
.cp-pasta-grid {
    --cp-pasta-gap: 0.75rem;
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(max(min(170px, 100%), calc((100% - 4 * var(--cp-pasta-gap)) / 5)), 1fr)
    );
    gap: var(--cp-pasta-gap);
}
/* A cor vem de cada pasta (style="--cp-pasta-bg: …; --cp-pasta-aba: …"),
   escolhida pelo escritório; o padrão é o grafite. */
.cp-pasta-wrap {
    --cp-pasta-bg: #475569;
    --cp-pasta-aba: #2e3744;
    position: relative;
    min-width: 0;
    display: block;
    color: #fff;
}
.cp-pasta-link {
    display: block;
    color: #fff;
}
/* A "aba" da pasta: barra escura com recorte diagonal à direita. O recorte é
   um clip-path (fica transparente de verdade); antes era uma faixa girada
   pintada na cor do fundo, cuja ponta subia uns 12px e marcava um "dente" na
   base da pasta da fileira de cima. */
.cp-pasta-aba {
    display: block;
    width: 60%;
    height: 22px;
    margin-bottom: -5px;
    border-radius: 5px 0 0 0;
    background: var(--cp-pasta-aba);
    clip-path: polygon(0 0, calc(100% - 22px) 0, calc(100% - 10px) 100%, 0 100%);
}
.cp-pasta {
    position: relative;
    overflow: hidden;
    padding: 0.7rem 0.75rem;
    border-radius: 0.5rem;
    border-bottom: 3px solid transparent;
    text-align: right;
    color: #fff;
    background: var(--cp-pasta-bg);
    transition: filter 0.15s ease-in-out;
}
.cp-pasta * {
    color: #fff;
}
.cp-pasta-link:hover .cp-pasta,
.cp-pasta-link:focus-visible .cp-pasta {
    filter: brightness(0.9);
}
.cp-pasta-ativo .cp-pasta {
    border-bottom-color: rgba(0, 0, 0, 0.55);
}
.cp-pasta-titulo {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
}
/* O ícone de pasta (celular e tablet, seção 14): aqui vale o cartão grande. */
.cp-pasta-app,
.cp-pasta-app-nome {
    display: none;
}
/* Nome de pasta criada pela equipe pode ser comprido: corta com reticências. */
.cp-pasta-nome {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cp-pasta-sino {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
}
/* O `.cp-pasta *` acima também pega o <path> do ícone, e o fill="currentColor"
   herdado resolveria para branco: o sino sumia no círculo branco. */
.cp-pasta-sino svg,
.cp-pasta-sino svg * {
    width: 12px;
    height: 12px;
    color: #dc2626;
}
.cp-pasta-sino svg * {
    width: auto;
    height: auto;
}
.cp-pasta-mid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.3rem;
}
.cp-pasta-icone {
    width: 44px;
    height: 44px;
    opacity: 0.9;
}
.cp-pasta-qtd {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}
/* Até duas linhas; o resto vira "…" e o texto inteiro aparece ao passar o
   mouse (o title é posto só quando corta, no mouseenter do blade). A altura
   das duas linhas fica sempre reservada, para as pastas da mesma fileira
   terem o mesmo tamanho com descrição curta ou longa.
   Com text-align: right o Chrome some com o "…" do line-clamp; por isso a
   caixa encolhe no texto e encosta à direita (margin-left: auto), com o
   texto alinhado à esquerda dentro dela. */
.cp-pasta-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    width: fit-content;
    max-width: 100%;
    min-height: 2.6em;
    margin-top: 0.35rem;
    margin-left: auto;
    text-align: left;
    font-size: 0.8rem;
    line-height: 1.3;
    opacity: 0.95;
}
/* Opções da pasta (Central da empresa): na "aba" da pasta, a alça natural,
   sem roubar largura do nome. Fora do <a> para o clique não abrir a lista. */
.cp-pasta-menu {
    position: absolute;
    top: 1px;
    left: 0.3rem;
    z-index: 2;
}
.cp-pasta-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.05rem;
    border-radius: 4px;
    color: #fff;
    background: transparent;
    transition: background-color 0.15s ease;
}
.cp-pasta-menu-btn:hover,
.cp-pasta-menu-btn:focus-visible {
    background: rgba(255, 255, 255, 0.25);
}
.cp-pasta-menu-btn svg {
    width: 1.1rem;
    height: 1.1rem;
}
/* Pasta arrastável (Central, só para a equipe; clique sem arrastar abre a
   lista): sem seleção de texto nem o menu de "abrir link" do toque longo no
   celular, que brigariam com o arraste. */
.cp-pasta-wrap[x-sortable-handle] {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
/* Enquanto arrasta: o lugar de destino fica marcado com a pasta "fantasma". */
.cp-pasta-wrap.fi-sortable-ghost {
    opacity: 0.35;
}
.cp-pasta-wrap.sortable-chosen .cp-pasta {
    box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.45);
}

/* Cor clara escolhida em "Outra cor…": texto e ícones escuros para continuar
   legível. As cores da paleta nunca caem aqui. */
.cp-pasta-clara,
.cp-pasta-clara .cp-pasta-link,
.cp-pasta-clara .cp-pasta,
.cp-pasta-clara .cp-pasta *,
.cp-pasta-clara .cp-pasta-menu-btn {
    color: #1e293b;
}
.cp-pasta-clara .cp-pasta-icone {
    filter: invert(1);
    opacity: 0.55;
}
.cp-pasta-clara .cp-pasta-menu-btn:hover,
.cp-pasta-clara .cp-pasta-menu-btn:focus-visible {
    background: rgba(15, 23, 42, 0.12);
}
.cp-pasta-clara .cp-pasta-sino svg,
.cp-pasta-clara .cp-pasta-sino svg * {
    color: #dc2626;
}

/* "Nova pasta": botão tracejado compacto no fim da grade, alinhado ao corpo
   das pastas (desce o que a aba ocupa). Baixo de propósito: quando cai
   sozinho numa linha nova, não vira um cartão vazio. */
.cp-pasta-nova {
    align-self: start;
    min-width: 0;
    min-height: 2.9rem;
    margin-top: 17px;
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 2px dashed var(--cp-border-strong);
    border-radius: 0.5rem;
    color: var(--cp-muted);
    font-size: 0.95rem;
    font-weight: 600;
    background: transparent;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.cp-pasta-nova:hover,
.cp-pasta-nova:focus-visible {
    border-color: var(--cp-primary);
    color: var(--cp-primary);
    background: var(--cp-primary-soft);
}
.cp-pasta-nova svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* ---- Página de uma pasta (equipe: pastas, Colaboradores e documentos de um
   colaborador; portal: pasta aberta e Colaboradores). O <body> ganha a classe
   cp-fundo-pasta e as cores da pasta (--cp-pasta-bg/--cp-pasta-aba, ver
   App\Support\TemaPasta): o fundo da página fica no tom da pasta e o
   cabeçalho em forma de pasta usa as mesmas variáveis. Textos, links e botões
   seguem nas cores do sistema. */

/* Fundo escolhido (18/09, entre 6 modelos): tinta leve da pasta na página
   inteira + pontilhado na mesma cor. No escuro, um pouco mais de cor, que o
   fundo quase preto engole. */
.fi-body.cp-fundo-pasta {
    background:
        radial-gradient(circle, color-mix(in srgb, var(--cp-pasta-bg) 30%, transparent) 1.2px, transparent 1.6px) 0 0 / 18px 18px,
        color-mix(in srgb, var(--cp-pasta-bg) 10%, var(--cp-bg));
}
.dark .fi-body.cp-fundo-pasta {
    background:
        radial-gradient(circle, color-mix(in srgb, var(--cp-pasta-bg) 38%, transparent) 1.2px, transparent 1.6px) 0 0 / 18px 18px,
        color-mix(in srgb, var(--cp-pasta-bg) 13%, var(--cp-bg));
}
/* A tabela da pasta: borda de cima na cor dela, cabeçalho e linha sob o
   mouse num tom leve — só fundos e bordas, nunca o texto. */
.cp-fundo-pasta .fi-ta-ctn {
    border-top: 3px solid var(--cp-pasta-bg);
}
.cp-fundo-pasta .fi-ta-table thead tr,
.dark .cp-fundo-pasta .fi-ta-table thead tr {
    background-color: color-mix(in srgb, var(--cp-pasta-bg) 7%, var(--cp-surface));
}
.cp-fundo-pasta .fi-ta-row:hover {
    background-color: color-mix(in srgb, var(--cp-pasta-bg) 6%, var(--cp-surface));
}

.cp-pasta-cabecalho {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
/* A própria pasta, grande: aba mais escura com o nome da empresa e o corpo na
   cor da pasta. */
.cp-pasta-hero {
    min-width: 0;
    color: #fff;
}
.cp-pasta-hero-aba {
    width: fit-content;
    max-width: min(75%, 32rem);
    padding: 0.4rem 2.4rem 0.35rem 1rem;
    border-radius: 0.5rem 0 0 0;
    background: var(--cp-pasta-aba);
    clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 100%, 0 100%);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cp-pasta-hero-aba a,
.cp-pasta-hero-aba span {
    color: inherit;
}
.cp-pasta-hero-aba a:hover,
.cp-pasta-hero-aba a:focus-visible {
    text-decoration: underline;
}
.cp-pasta-hero-corpo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    padding: 1.1rem 1.25rem;
    border-radius: 0 0.75rem 0.75rem 0.75rem;
    background: var(--cp-pasta-bg);
}
.cp-pasta-hero-icone {
    width: 56px;
    height: 56px;
    flex: none;
    opacity: 0.9;
}
.cp-pasta-hero-textos {
    flex: 1 1 16rem;
    min-width: 0;
}
/* Página dentro da pasta (documentos de um colaborador): as iniciais da
   pessoa no lugar do ícone e, acima do nome, o caminho de volta à pasta. */
.cp-pasta-hero-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.cp-pasta-hero-acima {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-bottom: 0.1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: inherit;
    opacity: 0.88;
}
.cp-pasta-hero-acima:hover,
.cp-pasta-hero-acima:focus-visible {
    opacity: 1;
    text-decoration: underline;
}
.cp-pasta-hero-acima svg {
    width: 1rem;
    height: 1rem;
}
.cp-pasta-hero-nome {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: inherit;
    overflow-wrap: anywhere;
}
.cp-pasta-hero-desc {
    margin-top: 0.2rem;
    font-size: 0.95rem;
    opacity: 0.92;
}
.cp-pasta-hero-numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.65rem 0 0;
    padding: 0;
    list-style: none;
}
.cp-pasta-hero-numeros li {
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.8125rem;
}
.cp-pasta-hero-numeros b {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.cp-pasta-hero-numeros li.is-destaque {
    background: #fff;
    color: var(--cp-pasta-aba);
}
.cp-pasta-hero-acoes {
    flex: none;
    margin-left: auto;
}
/* O botão principal ("Enviar documento") teria a cor da pasta sobre a própria
   pasta: vira branco com o texto na cor da aba. */
.cp-pasta-hero .fi-btn.fi-btn-color-primary,
.cp-pasta-hero .fi-btn.fi-btn-color-primary .fi-btn-icon {
    color: var(--cp-pasta-aba);
}
.cp-pasta-hero .fi-btn.fi-btn-color-primary {
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}
.cp-pasta-hero .fi-btn.fi-btn-color-primary:hover,
.cp-pasta-hero .fi-btn.fi-btn-color-primary:focus-visible {
    background-color: rgba(255, 255, 255, 0.88);
}
/* Botões cinza ("Mais ações", "Central da empresa", "Colaboradores"): no tema
   escuro o Filament os faz quase transparentes, e sobre a cor da pasta ficavam
   apagados e difíceis de ler. Brancos nos dois temas, como no claro. */
.dark .cp-pasta-hero .fi-btn.fi-btn-color-gray {
    background-color: #fff;
    color: #1e293b;
    --tw-ring-color: transparent;
}
.dark .cp-pasta-hero .fi-btn.fi-btn-color-gray .fi-btn-icon {
    color: #64748b;
}
.dark .cp-pasta-hero .fi-btn.fi-btn-color-gray:hover,
.dark .cp-pasta-hero .fi-btn.fi-btn-color-gray:focus-visible {
    background-color: rgba(255, 255, 255, 0.88);
}

/* Cor clara ("Outra cor…"): texto e ícone escuros, como no cartão. */
.cp-pasta-hero.cp-pasta-clara {
    color: #1e293b;
}
.cp-pasta-hero.cp-pasta-clara .cp-pasta-hero-icone {
    filter: invert(1);
    opacity: 0.55;
}
.cp-pasta-hero.cp-pasta-clara .cp-pasta-hero-numeros li,
.cp-pasta-hero.cp-pasta-clara .cp-pasta-hero-avatar {
    background: rgba(15, 23, 42, 0.1);
}
.cp-pasta-hero.cp-pasta-clara .cp-pasta-hero-numeros li.is-destaque,
.cp-pasta-hero.cp-pasta-clara .fi-btn.fi-btn-color-primary,
.cp-pasta-hero.cp-pasta-clara .fi-btn.fi-btn-color-primary .fi-btn-icon {
    color: #1e293b;
}
.cp-pasta-hero.cp-pasta-clara .cp-pasta-hero-numeros li.is-destaque {
    background: #fff;
}

/* As pastas da empresa em MINIATURA, para trocar sem voltar: o mesmo desenho
   dos cartões (aba escura com recorte + corpo na cor da pasta, ícone e
   número), em tamanho pequeno. A aberta fica levantada e contornada; "Todas
   as pastas" é uma pasta neutra, nas cores do sistema. Cada miniatura traz
   as suas --cp-pasta-bg/--cp-pasta-aba (as do <body> são as da pasta aberta). */
/* A folga em volta é para a pasta aberta (levantada e contornada) não ser
   cortada quando a fileira rola para o lado, no celular. */
.cp-mini-pastas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 -3px;
    padding: 6px 3px 0;
}
.cp-mini-pasta {
    --cp-pasta-bg: #475569;
    --cp-pasta-aba: #2e3744;
    --cp-mini-contorno: var(--cp-ink);
    display: block;
    /* Tamanho fixo e pequeno: esticadas até encher a fileira ficavam compridas. */
    flex: 0 0 7.5rem;
    min-width: 0;
    color: #fff;
    text-decoration: none;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.cp-mini-pasta-aba {
    display: block;
    width: 58%;
    height: 8px;
    margin-bottom: -2px;
    border-radius: 4px 0 0 0;
    background: var(--cp-pasta-aba);
    clip-path: polygon(0 0, calc(100% - 10px) 0, calc(100% - 4px) 100%, 0 100%);
}
.cp-mini-pasta-corpo {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.35rem 0.5rem 0.3rem;
    border-radius: 0.35rem;
    background: var(--cp-pasta-bg);
}
.cp-mini-pasta-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: right;
}
.cp-mini-pasta-base {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
    min-height: 1.3rem;
}
.cp-mini-pasta-icone {
    width: 18px;
    height: 18px;
    flex: none;
    opacity: 0.85;
}
.cp-mini-pasta-qtd {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.cp-mini-pasta:hover,
.cp-mini-pasta:focus-visible {
    transform: translateY(-2px);
    filter: brightness(0.95);
}
.cp-mini-pasta:focus-visible {
    outline: none;
    filter: drop-shadow(2px 0 0 var(--cp-primary)) drop-shadow(-2px 0 0 var(--cp-primary))
        drop-shadow(0 2px 0 var(--cp-primary)) drop-shadow(0 -2px 0 var(--cp-primary));
}
/* A pasta aberta: levantada, com um contorno que segue o recorte da aba. */
.cp-mini-pasta.is-ativo {
    transform: translateY(-3px);
    filter: drop-shadow(2px 0 0 var(--cp-mini-contorno)) drop-shadow(-2px 0 0 var(--cp-mini-contorno))
        drop-shadow(0 2px 0 var(--cp-mini-contorno)) drop-shadow(0 -2px 0 var(--cp-mini-contorno))
        drop-shadow(0 6px 8px rgba(15, 23, 42, 0.25));
}
.cp-mini-pasta.cp-pasta-clara {
    color: #1e293b;
}
.cp-mini-pasta.cp-pasta-clara .cp-mini-pasta-icone {
    filter: invert(1);
    opacity: 0.55;
}
/* "Todas as pastas": neutra, nas cores do sistema (claro e escuro). */
.cp-mini-pasta-todas {
    --cp-pasta-bg: var(--cp-surface);
    --cp-pasta-aba: var(--cp-border-strong);
    color: var(--cp-ink);
}
.cp-mini-pasta-todas .cp-mini-pasta-corpo {
    box-shadow: inset 0 0 0 1px var(--cp-border-strong);
}
.cp-mini-pasta-todas .cp-mini-pasta-icone {
    color: var(--cp-muted);
    opacity: 1;
}
/* No celular, uma fileira só, que rola para o lado (sem empurrar a página). */
@media (max-width: 640px) {
    .cp-mini-pastas {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        scroll-snap-type: x proximity;
    }
    .cp-mini-pasta {
        scroll-snap-align: start;
    }
}

@media (max-width: 640px) {
    .cp-pasta-hero-nome {
        font-size: 1.5rem;
    }
    .cp-pasta-hero-icone,
    .cp-pasta-hero-avatar {
        width: 44px;
        height: 44px;
    }
    /* Linha inteira embaixo do texto: os botões quebram dentro da pasta. */
    .cp-pasta-hero-acoes {
        flex: 1 1 100%;
        min-width: 0;
        margin-left: 0;
    }
}


/* =========================================================================
   11. POPUP "TIPOS DE DOCUMENTOS" (lista ⇄ formulário no mesmo popup)
   ========================================================================= */
.cp-tipos {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cp-tipos-topo {
    display: flex;
    justify-content: flex-end;
}
.cp-tipos-tabela {
    overflow-x: auto;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
}
.cp-tipos-tabela table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.cp-tipos-tabela th {
    padding: 0.65rem 1rem;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--cp-muted);
    border-bottom: 1px solid var(--cp-border);
}
.cp-tipos-tabela td {
    padding: 0.55rem 1rem;
    vertical-align: middle;
    color: var(--cp-text);
    border-top: 1px solid var(--cp-hair);
}
.cp-tipos-tabela tbody tr:first-child td {
    border-top: 0;
}
.cp-tipos-tabela tbody tr:hover td {
    background-color: var(--cp-soft);
}
.cp-tipos-tabela td:first-child {
    font-weight: 500;
    color: var(--cp-ink);
}
/* O identificador da pasta virou a 2ª linha do título: informação técnica não
   merece uma coluna inteira na frente de quem só quer o nome do tipo. */
.cp-tipos-code {
    display: block;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.72rem;
    color: var(--cp-muted);
}
.cp-tipos-acoes {
    width: 1%;
    white-space: nowrap;
}
.cp-tipos-botoes {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
}
.cp-tipos-tabela td.cp-tipos-vazio {
    padding: 1.5rem;
    text-align: center;
    color: var(--cp-muted);
}
.cp-tipos-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.cp-tipos-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cp-ink);
}
.cp-tipos-erro {
    font-size: 0.875rem;
    color: rgb(var(--danger-600));
}
.cp-tipos-dica {
    font-size: 0.85rem;
    color: var(--cp-muted);
}
.cp-tipos-rodape {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-top: 0.75rem;
}


/* =========================================================================
   12. DOCUMENTOS — EXPLORADOR (EMPRESAS À ESQUERDA) E PAINEL DE DETALHES
   ========================================================================= */

/* Painel lateral de detalhes do documento (clique na linha da lista). */
.cp-detalhe-doc {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.cp-detalhe-previa {
    width: 100%;
    height: 52vh;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    background: #fff;
}
.cp-detalhe-sem-previa {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 1rem 1.1rem;
    border: 1px dashed var(--cp-border-strong);
    border-radius: var(--cp-radius-sm);
    background: var(--cp-soft);
    color: var(--cp-muted);
}
.cp-detalhe-sem-previa svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
}
.cp-detalhe-situacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.cp-detalhe-explicacao {
    font-size: 0.875rem;
    color: var(--cp-muted);
}
.cp-detalhe-dados {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1.5rem;
    margin: 0;
}
.cp-detalhe-dados .is-largo {
    grid-column: 1 / -1;
}
.cp-detalhe-dados dt {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cp-muted);
}
.cp-detalhe-dados dd {
    margin: 0.15rem 0 0;
    color: var(--cp-ink);
    /* e-mail comprido quebra dentro da coluna, em vez de encostar na borda */
    overflow-wrap: anywhere;
}
.cp-detalhe-titulo {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cp-ink);
}
/* Detalhes de um usuário das empresas: cada empresa com as pastas que ele vê. */
.cp-detalhe-empresa + .cp-detalhe-empresa {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--cp-hair);
}
.cp-detalhe-empresa-nome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}
.cp-detalhe-pastas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.45rem;
    font-size: 0.8125rem;
}

/* Empresa dona em negrito acima do título (lista com todas as empresas). */
.cp-doc-dono {
    font-weight: 600;
    color: var(--cp-ink);
}
/* O título quebra linha no explorador; sem um mínimo, no celular a coluna
   espremia até uma palavra por linha (a tabela rola dentro da caixa dela). */
.cp-col-documento {
    min-width: 14rem;
}

/* Caixa de entrada: o que ninguém do escritório abriu fica em destaque (faixa
   à esquerda e título em negrito); em Boletos, o vencido ganha a faixa vermelha. */
.fi-ta-row.cp-linha-nova > td:first-child {
    box-shadow: inset 3px 0 0 rgb(var(--warning-500));
}
.fi-ta-row.cp-linha-nova .cp-col-documento .fi-ta-text-item-label {
    font-weight: 600;
}
.fi-ta-row.cp-linha-vencida > td:first-child {
    box-shadow: inset 3px 0 0 rgb(var(--danger-500));
}


/* =========================================================================
   13. ENVIO RÁPIDO (rodapé do menu) E ENGRENAGEM DE ADMINISTRAÇÃO (topo)
   ========================================================================= */

.cp-envio-rapido {
    padding: 0.75rem var(--cp-menu-x) 1rem;
    border-top: 1px solid var(--cp-border);
}
.cp-envio-rapido-zona {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem;
    border: 1.5px dashed var(--cp-border-strong);
    border-radius: var(--cp-radius);
    background: var(--cp-soft);
    color: var(--cp-muted);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.cp-envio-rapido-zona:hover,
.cp-envio-rapido-zona:focus-within,
body.cp-arrastando-arquivo .cp-envio-rapido-zona {
    border-color: rgb(var(--primary-500));
    background: var(--cp-primary-soft);
    color: var(--cp-primary);
}
/* Arquivo sendo arrastado sobre o painel: a área acende e pede para soltar
   (a classe no <body> vem do script do AcoesGlobaisPainel). */
body.cp-arrastando-arquivo .cp-envio-rapido-zona {
    box-shadow: 0 0 0 4px rgba(var(--primary-500), 0.18);
}
.cp-envio-rapido-solte {
    display: none;
    font-weight: 600;
}
/* Tela de toque (celular, tablet): não há arrastar, só tocar. */
.cp-envio-rapido-dica-toque {
    display: none;
}
@media (hover: none) and (pointer: coarse) {
    .cp-envio-rapido-dica {
        display: none;
    }
    .cp-envio-rapido-dica-toque {
        display: inline;
    }
}
body.cp-arrastando-arquivo .cp-envio-rapido-dica {
    display: none;
}
body.cp-arrastando-arquivo .cp-envio-rapido-solte,
body.cp-arrastando-arquivo .cp-envio-rapido-textos strong {
    display: inline;
    color: var(--cp-primary);
}
/* O campo de arquivo fica escondido: quem recebe o clique é a zona inteira. */
.cp-envio-rapido-zona input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.cp-envio-rapido-icone {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
}
.cp-envio-rapido-textos {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.35;
}
.cp-envio-rapido-textos strong {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cp-ink);
}
.cp-envio-rapido-zona:hover .cp-envio-rapido-textos strong,
.cp-envio-rapido-zona.is-arrastando .cp-envio-rapido-textos strong {
    color: var(--cp-primary);
}
/* Menu recolhido: só o ícone. */
.fi-sidebar:not(.fi-sidebar-open) .cp-envio-rapido {
    padding-inline: 0.5rem;
}
.fi-sidebar:not(.fi-sidebar-open) .cp-envio-rapido-zona {
    justify-content: center;
    padding-inline: 0;
}
.fi-sidebar:not(.fi-sidebar-open) .cp-envio-rapido-textos {
    display: none;
}

/* Engrenagem da barra do topo: acesa quando a tela aberta é uma das dela. */
.cp-menu-admin-botao.is-ativo {
    color: var(--cp-primary);
    background: var(--cp-primary-soft);
}
.cp-menu-admin-titulo {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


/* =========================================================================
   14. LINK DE CONVITE (popup do escritório em "Usuários das empresas")
   ========================================================================= */

.cp-link-convite {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--cp-text);
}
.cp-link-convite-campo {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}
.cp-link-convite-campo input {
    flex: 1;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--cp-border-strong);
    border-radius: var(--cp-radius-sm);
    background: var(--cp-soft);
    color: var(--cp-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}
.cp-link-convite-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.cp-link-convite-validade {
    font-size: 0.75rem;
    color: var(--cp-muted);
}
@media (max-width: 480px) {
    .cp-link-convite-campo {
        flex-direction: column;
    }
}

/* Explorador: empresas à esquerda, pastas e lista à direita. */
.cp-explorador {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.cp-explorador-conteudo {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}
.cp-explorador-empresas {
    position: sticky;
    top: 5rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-height: calc(100vh - 6.5rem);
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
}
.cp-explorador-busca {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    color: var(--cp-muted);
}
.cp-explorador-busca svg {
    width: 1rem;
    height: 1rem;
    flex: none;
}
.cp-explorador-busca input,
.cp-explorador-busca input:focus {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-size: 0.875rem;
    color: var(--cp-ink);
}
.cp-explorador-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.55rem;
    border-radius: var(--cp-radius-sm);
    color: var(--cp-ink);
    text-decoration: none;
}
.cp-explorador-item:hover {
    background: var(--cp-soft);
}
.cp-explorador-item.is-ativo {
    background: var(--cp-primary-soft);
}
.cp-explorador-item.is-ativo .cp-explorador-nome {
    font-weight: 600;
    color: var(--cp-primary);
}
.cp-explorador-item .cp-avatar {
    flex: none;
}
.cp-explorador-textos {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}
.cp-explorador-nome {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.875rem;
}
.cp-explorador-sinais {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.5rem;
    font-size: 0.72rem;
    color: var(--cp-muted);
}
.cp-explorador-sinais .is-novo {
    font-weight: 600;
    color: var(--cp-primary);
}
.cp-explorador-sinais .is-vencido {
    font-weight: 600;
    color: rgb(var(--danger-600));
}
.cp-explorador-total {
    flex: none;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--cp-muted);
}
.cp-explorador-pastas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.cp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--cp-border);
    border-radius: 999px;
    background: var(--cp-surface);
    font-size: 0.8125rem;
    color: var(--cp-ink);
    text-decoration: none;
}
.cp-chip:hover {
    border-color: var(--cp-border-strong);
}
.cp-chip b {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--cp-muted);
}
.cp-chip.is-ativo {
    border-color: transparent;
    background: var(--cp-primary-soft);
    font-weight: 600;
    color: var(--cp-primary);
}
.cp-chip.is-ativo b {
    color: var(--cp-primary);
}
.cp-chip-cor {
    width: 0.55rem;
    height: 0.55rem;
    flex: none;
    border-radius: 999px;
}

/* Até 1535px a coluna das empresas estreita e, abaixo de 1280px, vai para cima
   da lista: com o menu aberto, a tabela ao lado dela não cabia (rolava). */
@media (max-width: 1535px) {
    .cp-explorador {
        grid-template-columns: 14rem minmax(0, 1fr);
    }
}
@media (max-width: 1279px) {
    .cp-explorador {
        grid-template-columns: minmax(0, 1fr);
    }
    .cp-explorador-empresas {
        position: static;
        max-height: 16rem;
    }
}


/* =========================================================================
   15. MODELOS DE E-MAIL — cartões da lista e prévia do e-mail
   ========================================================================= */

/* Tabela em cartões (contentGrid do Filament): mesmo cartão do resto do
   painel — borda fina, sem sombra. O anel do Filament É um box-shadow. */
.fi-ta-content-grid > .fi-ta-record,
.dark .fi-ta-content-grid > .fi-ta-record {
    background-color: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    box-shadow: none;
    transition: border-color 0.15s ease;
}
.fi-ta-content-grid > .fi-ta-record:hover,
.dark .fi-ta-content-grid > .fi-ta-record:hover {
    background-color: var(--cp-surface);
    border-color: rgba(var(--primary-500), 0.5);
}

.cp-modelo {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    text-align: left;
}
.cp-modelo-topo {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}
.cp-modelo-icone {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--cp-radius);
    background-color: var(--cp-primary-soft);
    color: var(--cp-primary);
}
.cp-modelo-icone svg {
    width: 1.15rem;
    height: 1.15rem;
}
.cp-modelo-textos {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.cp-modelo-nome {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cp-ink);
    overflow-wrap: anywhere;
}
.cp-modelo-assunto {
    overflow: hidden;
    font-size: 0.8rem;
    color: var(--cp-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* Até 2 linhas com "…", altura das 2 sempre reservada: os cartões da mesma
   fileira ficam do mesmo tamanho, com ou sem texto curto. */
.cp-modelo-trecho {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    min-height: 2.9em;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--cp-text);
}
.cp-modelo-uso {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cp-primary);
}
.cp-modelo-uso svg {
    width: 0.9rem;
    height: 0.9rem;
}
.cp-modelo-uso.is-nunca {
    color: var(--cp-muted);
}
.cp-modelo-excluido {
    opacity: 0.65;
}

/* Prévia: cabeçalho de cliente de e-mail + o e-mail num quadro isolado. */
.cp-previa-email {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.cp-previa-cabecalho {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0.75rem 1rem;
    background-color: var(--cp-soft);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    font-size: 0.85rem;
}
.cp-previa-cabecalho > div {
    display: flex;
    gap: 0.5rem;
    min-width: 0;
}
.cp-previa-cabecalho dt {
    flex: none;
    width: 4.5rem;
    color: var(--cp-muted);
}
.cp-previa-cabecalho dd {
    min-width: 0;
    margin: 0;
    font-weight: 500;
    color: var(--cp-ink);
    overflow-wrap: anywhere;
}
/* O e-mail é sempre branco, também no modo escuro — é como ele chega. */
.cp-previa-quadro {
    display: block;
    width: 100%;
    height: 32rem;
    background-color: #fff;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
}


/* =========================================================================
   16. TAGS — pílulas na cor escolhida pelo escritório
   -------------------------------------------------------------------------
   O badge do Filament só aceita as cores registradas no tema; a cor da tag é
   um "#rrggbb" livre, então a pílula recebe a cor no próprio estilo (mesma
   ideia das pastas).
   ========================================================================= */
.cp-tags {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}
.cp-tag {
    display: inline-flex;
    align-items: center;
    max-width: 14rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Fundo claro: texto escuro, senão a tag fica ilegível. */
.cp-tag-clara {
    color: #1e293b;
}


/* =========================================================================
   14. PORTAL DO CLIENTE NO CELULAR
   As tabelas tinham 6 a 8 colunas numa tela de 390px: só "Documento" e
   "Competência" apareciam, e a Situação e o botão Baixar ficavam fora da
   tela (era preciso arrastar a tabela para o lado). Até 639px, cada linha
   vira um CARTÃO: marcação + título + botões em cima e, embaixo, as outras
   colunas em duas colunas, cada valor com o nome da coluna em cima (o
   cabeçalho da tabela some). Só no portal (.fi-panel-area-cliente).
   Vale até 899px: no tablet em pé (768–834px) a tabela também não cabia.
   ========================================================================= */
@media (max-width: 899px) {
    .fi-panel-area-cliente .fi-ta-table,
    .fi-panel-area-cliente .fi-ta-table > tbody {
        display: block;
        width: 100%;
    }
    .fi-panel-area-cliente .fi-ta-table > thead {
        display: none;
    }
    .fi-panel-area-cliente .fi-ta-table > tbody > tr.fi-ta-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.35rem 0.75rem;
        padding: 0.8rem 0.75rem;
    }
    .fi-panel-area-cliente .fi-ta-row > td.fi-ta-cell {
        display: block;
        min-width: 0;
        padding: 0 !important;
        overflow-wrap: anywhere;
    }
    /* Na tabela o texto não quebrava ("vence 20/09/2026 · baixado" saía pela
       borda do cartão); aqui quebra. */
    .fi-panel-area-cliente .fi-ta-row > td .fi-ta-text,
    .fi-panel-area-cliente .fi-ta-row > td .fi-ta-text * {
        white-space: normal !important;
    }
    /* Os espaços internos de cada célula (px-3 py-4) eram para a tabela. */
    .fi-panel-area-cliente .fi-ta-row > td .px-3 {
        padding-left: 0;
        padding-right: 0;
    }
    .fi-panel-area-cliente .fi-ta-row > td .py-4 {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* CARTÃO COM COLUNAS (escolhido pelo usuário, 24/09):
         1. caixinha + título (com pasta · tipo embaixo) e o menu ⋮ fixo no
            canto de cima, à direita;
         2. a situação (selo + detalhe) numa linha própria, com um fio embaixo;
         3. uma faixa com as outras informações em COLUNAS IGUAIS — o nome
            pequeno em cima, o valor embaixo (Competência · Recebido · Enviado
            por) — e o Baixar no fim.
       Cada informação fica sempre no mesmo lugar, em todos os cartões. Antes
       era uma linha corrida, que quebrava onde dava. */
    .fi-panel-area-cliente .fi-ta-table > tbody > tr.fi-ta-row {
        position: relative;
    }
    /* td.fi-ta-cell: para vencer o "padding: 0 !important" das células, acima. */
    .fi-panel-area-cliente .fi-ta-row > td.fi-ta-cell.fi-ta-selection-cell {
        order: 0;
        flex: none;
        width: 1.25rem;
        padding-top: 0.15rem !important;
    }
    .fi-panel-area-cliente .fi-ta-row > td.fi-ta-cell.fi-table-cell-titulo,
    .fi-panel-area-cliente .fi-ta-row > td.fi-ta-cell.fi-table-cell-nome {
        order: 1;
        flex: 1 1 0;
        /* espaço para o ⋮ no canto */
        padding-right: 2.25rem !important;
    }
    /* O menu ⋮ (mais ações) no canto de cima, à direita do cartão. */
    .fi-panel-area-cliente .fi-ta-row > .fi-ta-actions-cell .fi-dropdown {
        position: absolute;
        top: 0.45rem;
        right: 0.35rem;
    }
    /* Só ícones e sem menu ⋮ (listas curtas só com Baixar e
       Visualizar): sobem para o canto de cima, no lugar do ⋮ — na faixa não
       cabiam e abriam uma linha só para eles. */
    .fi-panel-area-cliente .fi-ta-row > .fi-ta-actions-cell:not(:has(.fi-dropdown, .fi-btn)) {
        position: absolute;
        top: 0.45rem;
        right: 0.35rem;
    }
    .fi-panel-area-cliente .fi-ta-row:has(> .fi-ta-actions-cell:not(:has(.fi-dropdown, .fi-btn))) > td.fi-ta-cell.fi-table-cell-titulo {
        padding-right: 5rem !important;
    }
    /* Os demais botões (Baixar em ícone) no fim da faixa de colunas. */
    .fi-panel-area-cliente .fi-ta-row > .fi-ta-actions-cell {
        order: 8;
        flex: none;
        align-self: center;
        margin-left: auto;
    }
    /* Com um botão com texto ("Enviar comprovante", "Docs."), os botões ficam
       numa última linha, inteira. */
    .fi-panel-area-cliente .fi-ta-row > .fi-ta-actions-cell:has(.fi-btn) {
        order: 9;
        flex-basis: 100%;
        margin-top: 0.1rem;
    }
    .fi-panel-area-cliente .fi-ta-row > .fi-ta-actions-cell:has(.fi-btn) .fi-ta-actions {
        justify-content: flex-start;
        width: 100%;
    }
    /* O botão com texto fica à esquerda e os ícones (Editar, Enviar, Baixar
       boleto) vão para a direita do cartão — no meio pareciam soltos. */
    .fi-panel-area-cliente .fi-ta-row > .fi-ta-actions-cell:has(.fi-btn) .fi-ta-actions > .fi-btn + .fi-icon-btn {
        margin-left: auto;
    }
    /* Quebra de linha depois do título: o resto desce. */
    .fi-panel-area-cliente .fi-ta-table > tbody > tr.fi-ta-row::after {
        content: "";
        order: 3;
        flex-basis: 100%;
        height: 0;
    }
    /* 2. A situação: linha própria, com o fio que separa a faixa de colunas. */
    .fi-panel-area-cliente .fi-ta-row > td.fi-ta-cell.fi-table-cell-situacao,
    .fi-panel-area-cliente .fi-ta-row > td.fi-ta-cell.fi-table-cell-status-boleto,
    .fi-panel-area-cliente .fi-ta-row > td.fi-ta-cell.fi-table-cell-ativo {
        order: 4;
        display: block;
        flex: 1 1 100%;
        padding-bottom: 0.6rem !important;
        border-bottom: 1px solid var(--cp-hair);
    }
    /* 3. A faixa: as outras colunas lado a lado, cada uma na largura do seu
       conteúdo e a sobra dividida por igual (em partes iguais, no celular de
       360px a data quebrava no meio: "06/09/20 / 26"). Como todo cartão tem o
       mesmo tipo de conteúdo, as colunas se alinham de um cartão para o outro.
       O valor não quebra; se não couber, a coluna desce inteira. */
    .fi-panel-area-cliente .fi-ta-row > td.fi-ta-cell:not(.fi-ta-selection-cell, .fi-ta-actions-cell, .fi-table-cell-titulo, .fi-table-cell-nome, .fi-table-cell-situacao, .fi-table-cell-status-boleto, .fi-table-cell-ativo) {
        order: 6;
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.85rem;
    }
    .fi-panel-area-cliente .fi-ta-row > td.fi-ta-cell:not(.fi-ta-selection-cell, .fi-ta-actions-cell, .fi-table-cell-titulo, .fi-table-cell-nome, .fi-table-cell-situacao, .fi-table-cell-status-boleto, .fi-table-cell-ativo) .fi-ta-text-item,
    .fi-panel-area-cliente .fi-ta-row > td.fi-ta-cell:not(.fi-ta-selection-cell, .fi-ta-actions-cell, .fi-table-cell-titulo, .fi-table-cell-nome, .fi-table-cell-situacao, .fi-table-cell-status-boleto, .fi-table-cell-ativo) .fi-ta-text-item * {
        white-space: nowrap !important;
    }
    /* O selo e o detalhe dele ("aberto em 23/09/2026") lado a lado. */
    .fi-panel-area-cliente .fi-ta-row > td:not(.fi-table-cell-titulo, .fi-table-cell-nome) .fi-ta-text {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.15rem 0.4rem;
    }
    /* Nas colunas da faixa, o detalhe ("venceu há 35 dias") fica EMBAIXO do
       valor: ao lado, a coluna do Vencimento ficava larga e descia sozinha. */
    .fi-panel-area-cliente .fi-ta-row > td.fi-ta-cell:not(.fi-ta-selection-cell, .fi-ta-actions-cell, .fi-table-cell-titulo, .fi-table-cell-nome, .fi-table-cell-situacao, .fi-table-cell-status-boleto, .fi-table-cell-ativo) .fi-ta-text {
        display: block;
    }
    .fi-panel-area-cliente .fi-ta-row > td.fi-ta-cell:not(.fi-ta-selection-cell, .fi-ta-actions-cell, .fi-table-cell-titulo, .fi-table-cell-nome, .fi-table-cell-situacao, .fi-table-cell-status-boleto, .fi-table-cell-ativo) .fi-ta-text > p {
        margin-top: 0.1rem;
        font-size: 0.72rem;
        line-height: 1.25;
    }
    /* O nome da coluna, pequeno, EM CIMA do valor (a tabela perdeu o cabeçalho). */
    .fi-panel-area-cliente .fi-ta-row > td::before {
        display: block;
        margin-bottom: 0.15rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.66rem;
        font-weight: 500;
        line-height: 1.2;
        color: var(--cp-muted);
    }
    .fi-panel-area-cliente .fi-ta-row > .fi-table-cell-competencia::before { content: "Competência"; }
    .fi-panel-area-cliente .fi-ta-row > .fi-table-cell-created-at::before { content: "Recebido"; }
    .fi-panel-area-cliente .fi-ta-row > .fi-table-cell-categoria::before { content: "Enviado por"; }
    .fi-panel-area-cliente .fi-ta-row > .fi-table-cell-vencimento::before { content: "Vencimento"; }
    .fi-panel-area-cliente .fi-ta-row > .fi-table-cell-pasta\.nome::before { content: "Pasta"; }
    .fi-panel-area-cliente .fi-ta-row > .fi-table-cell-data-pagamento::before { content: "Pago em"; }
    .fi-panel-area-cliente .fi-ta-row > .fi-table-cell-comprovante::before { content: "Comprovante"; }
    .fi-panel-area-cliente .fi-ta-row > .fi-table-cell-cpf::before { content: "CPF"; }
    .fi-panel-area-cliente .fi-ta-row > .fi-table-cell-matricula::before { content: "Matrícula"; }
    .fi-panel-area-cliente .fi-ta-row > .fi-table-cell-data-contratacao::before { content: "Admissão"; }
    .fi-panel-area-cliente .fi-ta-row > .fi-table-cell-data-desligamento::before { content: "Desligado em"; }
    /* A situação é um selo: o selo já diz o que é. */

    /* Boleto vencido: a faixa vermelha vai no cartão inteiro. */
    .fi-panel-area-cliente .fi-ta-row.cp-linha-vencida {
        box-shadow: inset 3px 0 0 rgb(var(--danger-500));
    }
    .fi-panel-area-cliente .fi-ta-row.cp-linha-vencida > td:first-child {
        box-shadow: none;
    }

    /* Cartões-pasta no celular e no tablet: GRADE DE ÍCONES, como os apps do
       telefone ou o Google Drive — cada pasta desenhada como uma pasta de
       verdade no desenho do cartão-pasta do painel (aba com o corte, corpo na
       cor da pasta, ícone redondo e número), o nome embaixo e, com novidade, o selo vermelho com
       quantos são. Três por linha no celular. O desenho vem do bloco
       .cp-pasta-app do blade; o cartão grande do computador fica escondido.
       (Antes: fileira que rolava para o lado; depois faixas em duas colunas.) */
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-pasta-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(5.9rem, 1fr));
        gap: 1.1rem 0.5rem;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-pasta-grid .cp-pasta-aba,
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-pasta-grid .cp-pasta {
        display: none;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-pasta-grid .cp-pasta-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
        -webkit-tap-highlight-color: transparent;
    }
    /* O mesmo desenho do cartão-pasta do painel, em miniatura: a aba escura
       com o corte na diagonal à direita (clip-path, como .cp-pasta-aba), o
       corpo liso na cor da pasta, o ícone redondo embaixo à esquerda e o
       número à direita. */
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-pasta-grid .cp-pasta-app {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 5.75rem;
        transition: transform 0.12s ease;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-pasta-grid .cp-pasta-link:active .cp-pasta-app {
        transform: scale(0.94);
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-pasta-grid .cp-pasta-app-aba {
        display: block;
        width: 60%;
        height: 0.8rem;
        margin-bottom: -3px;
        border-radius: 4px 0 0 0;
        background: var(--cp-pasta-aba);
        clip-path: polygon(0 0, calc(100% - 12px) 0, calc(100% - 5px) 100%, 0 100%);
    }
    /* position: relative põe o corpo NA FRENTE da aba: o clip-path da aba cria
       uma camada própria, que sem isto era pintada por cima dos 3px em que ela
       encosta no corpo (a dobra aparecia sobre a pasta). É o que o cartão do
       computador já faz. */
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-pasta-grid .cp-pasta-app-corpo {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 0.25rem;
        height: 3.5rem;
        padding: 0.4rem 0.5rem;
        border-radius: 0.45rem;
        background: var(--cp-pasta-bg);
        box-shadow: 0 8px 16px -12px rgba(15, 23, 42, 0.6);
        color: #fff;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-pasta-grid .cp-pasta-app-icone {
        width: 1.6rem;
        height: 1.6rem;
        flex: none;
        opacity: 0.9;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-pasta-grid .cp-pasta-app-qtd {
        font-size: 1.45rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        line-height: 1;
    }
    /* Pasta de cor clara: texto escuro e ícone escurecido, como no cartão. */
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-pasta-grid .cp-pasta-clara .cp-pasta-app-corpo {
        color: #1e293b;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-pasta-grid .cp-pasta-clara .cp-pasta-app-icone {
        filter: invert(1);
        opacity: 0.55;
    }
    /* Novos: selo vermelho no canto, como o número de notificações de um app. */
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-pasta-grid .cp-pasta-app-selo {
        position: absolute;
        top: 0.25rem;
        right: -0.45rem;
        z-index: 1;
        min-width: 1.35rem;
        height: 1.35rem;
        padding: 0 0.35rem;
        border-radius: 999px;
        background: #ef4444;
        box-shadow: 0 0 0 2px var(--cp-bg);
        color: #fff;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.35rem;
        text-align: center;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-pasta-grid .cp-pasta-app-nome {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--cp-ink);
        font-size: 0.8rem;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
    }
}


/* =========================================================================
   17. PORTAL DO CLIENTE NO CELULAR — USABILIDADE (24/09)
   Complementa a seção 14 (tabelas em cartões). O que se via num celular:
   abas escondidas para fora da tela, pastas cortadas, botões de 28px para o
   dedo, botões que não servem no celular (colunas, agrupar) e a prévia de
   PDF em branco no painel de detalhes. Só no portal (.fi-panel-area-cliente),
   exceto o botão "Ver o documento" do painel de detalhes, que é dos dois.
   ========================================================================= */

/* Painel de detalhes: no celular a prévia vira um botão (ver o blade
   documento-detalhes); na tela larga, o contrário. */
.cp-detalhe-abrir {
    display: none;
}
@media (max-width: 639px) {
    .cp-detalhe-previa {
        display: none;
    }
    .cp-detalhe-abrir {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 2.75rem;
        padding: 0.6rem 1rem;
        border: 1px solid var(--cp-border-strong);
        border-radius: var(--cp-radius-sm);
        background: var(--cp-soft);
        color: var(--cp-primary);
        font-weight: 600;
        text-decoration: none;
    }
    .cp-detalhe-abrir svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

@media (max-width: 639px) {
    /* Abas (Documentos, Boletos, Colaboradores, páginas de pasta): numa linha
       só, como um seletor — sem os ícones e com rótulo curto onde a aba traz
       data-curto ("Do escritório", "Meus envios", "A vencer"). Antes as
       últimas ficavam fora da tela (em Boletos, "Pagos" só arrastando). Se
       ainda assim não couber, quebram linha em vez de sumir. */
    :is(.fi-panel-area-cliente, .fi-panel-painel) .fi-tabs {
        flex-wrap: wrap;
        gap: 0.2rem;
        width: 100%;
        padding: 0.3rem;
        overflow-x: visible;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .fi-tabs-item {
        flex: 1 1 auto;
        gap: 0.35rem;
        padding: 0.5rem 0.45rem;
        font-size: 0.8rem;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .fi-tabs-item .fi-tabs-item-icon {
        display: none;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .fi-tabs-item[data-curto] .fi-tabs-item-label {
        display: none;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .fi-tabs-item[data-curto]::before {
        content: attr(data-curto);
        color: rgb(var(--gray-500));
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .fi-tabs-item.fi-active[data-curto]::before {
        color: rgb(var(--primary-600));
    }
    .dark :is(.fi-panel-area-cliente, .fi-panel-painel) .fi-tabs-item[data-curto]::before,
    :is(.fi-panel-area-cliente, .fi-panel-painel).dark .fi-tabs-item[data-curto]::before {
        color: rgb(var(--gray-400));
    }
    .dark :is(.fi-panel-area-cliente, .fi-panel-painel) .fi-tabs-item.fi-active[data-curto]::before,
    :is(.fi-panel-area-cliente, .fi-panel-painel).dark .fi-tabs-item.fi-active[data-curto]::before {
        color: rgb(var(--primary-400));
    }

    /* Cabeçalho enxuto: a frase de explicação embaixo do título (3 linhas em
       Boletos) empurrava a lista para baixo. Fica só a da empresa, no Início. */
    .fi-panel-area-cliente .fi-header-heading {
        font-size: 1.5rem;
    }
    .fi-panel-area-cliente .fi-header-subheading:not(:has(.cp-so-celular)) {
        display: none;
    }
    .fi-panel-area-cliente .fi-page > section {
        row-gap: 1.25rem;
        padding-top: 1.25rem;
    }

    /* Nas LISTAS (Documentos, Colaboradores) as pastas são um atalho, não o
       assunto: viram pílulas coloridas, duas linhas no máximo, e a lista
       começa logo. No Início são ícones (seção 14). */
    .fi-panel-area-cliente .fi-resource-list-records-page .cp-pasta-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
    }
    /* A que sobra sozinha na última linha ocupa a linha inteira. */
    .fi-panel-area-cliente .fi-resource-list-records-page .cp-pasta-grid > .cp-pasta-wrap:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
    .fi-panel-area-cliente .fi-resource-list-records-page .cp-pasta-grid .cp-pasta-link {
        display: block;
    }
    .fi-panel-area-cliente .fi-resource-list-records-page .cp-pasta-grid .cp-pasta-aba,
    .fi-panel-area-cliente .fi-resource-list-records-page .cp-pasta-grid .cp-pasta-app,
    .fi-panel-area-cliente .fi-resource-list-records-page .cp-pasta-grid .cp-pasta-app-nome,
    .fi-panel-area-cliente .fi-resource-list-records-page .cp-pasta-grid .cp-pasta-icone,
    .fi-panel-area-cliente .fi-resource-list-records-page .cp-pasta-grid .cp-pasta-desc {
        display: none;
    }
    .fi-panel-area-cliente .fi-resource-list-records-page .cp-pasta-grid .cp-pasta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.45rem;
        min-height: 0;
        padding: 0.5rem 0.8rem;
        border-bottom-width: 0;
        border-radius: 999px;
        text-align: left;
    }
    .fi-panel-area-cliente .fi-resource-list-records-page .cp-pasta-grid .cp-pasta-titulo {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-start;
        gap: 0.3rem;
        font-size: 0.8rem;
    }
    .fi-panel-area-cliente .fi-resource-list-records-page .cp-pasta-grid .cp-pasta-mid {
        margin-top: 0;
    }
    .fi-panel-area-cliente .fi-resource-list-records-page .cp-pasta-grid .cp-pasta-qtd {
        font-size: 0.85rem;
    }
    .fi-panel-area-cliente .fi-resource-list-records-page .cp-pasta-grid .cp-pasta-sino {
        width: 15px;
        height: 15px;
    }


    /* Página da pasta: o "Enviar" fica com a largura toda e cabe numa linha
       (quebrava em "Enviar documento ao / escritório"). */
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-pasta-hero-acoes .fi-ac > .fi-btn {
        flex: 1 1 auto;
    }

    /* Botões na largura toda, como o "Enviar" da pasta: os do topo das
       páginas (Meu perfil tinha três empilhados em larguras diferentes), o
       "Salvar" dos formulários e os da seleção em lote. */
    .fi-panel-area-cliente .fi-header .fi-ac > .fi-btn,
    .fi-panel-area-cliente .fi-form-actions .fi-btn,
    .fi-panel-area-cliente .cp-form-acoes > .fi-btn,
    .fi-panel-area-cliente .fi-ta-header-toolbar .fi-ta-actions > .fi-btn {
        flex: 1 1 100%;
    }
    /* O grupo de botões do topo tinha a largura do próprio botão. */
    .fi-panel-area-cliente .fi-header > div:has(> .fi-ac),
    .fi-panel-area-cliente .fi-header .fi-ac,
    .fi-panel-area-cliente .fi-form-actions .fi-ac {
        width: 100%;
    }
    /* Rodapé dos popups: os botões em partes iguais, na largura toda (eram
       dois botões pequenos no canto). */
    :is(.fi-panel-area-cliente, .fi-panel-painel) .fi-modal-footer-actions {
        flex-wrap: nowrap;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .fi-modal-footer-actions > .fi-btn,
    :is(.fi-panel-area-cliente, .fi-panel-painel) .fi-modal-footer-actions > * > .fi-btn {
        flex: 1 1 0;
        width: 100%;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .fi-modal-footer-actions > :not(.fi-btn) {
        flex: 1 1 0;
    }

    /* Busca da lista na largura toda (o filtro fica ao lado). */
    :is(.fi-panel-area-cliente, .fi-panel-painel) .fi-ta-header-toolbar > .ms-auto {
        flex: 1 1 auto;
        min-width: 0;
        margin-inline-start: 0;
    }

    /* Miniaturas de pasta (páginas de pasta e de colaborador): pílulas na cor
       de cada pasta, todas à vista, como nas listas — a pasta aberta já está
       no cabeçalho grande logo acima. Antes era uma fileira que rolava para
       o lado (e depois uma grade de três fileiras). */
    /* Em GRADE de duas colunas iguais (nome à esquerda, número à direita):
       soltas, cada linha terminava num ponto, conforme o tamanho dos nomes.
       A que sobra sozinha na última linha ocupa a linha inteira. */
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-mini-pastas {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
        overflow: visible;
        padding: 0.2rem 3px 0;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-mini-pasta {
        flex: none;
        min-width: 0;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-mini-pasta:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-mini-pasta-aba,
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-mini-pasta-icone {
        display: none;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-mini-pasta-corpo {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.45rem;
        padding: 0.5rem 0.8rem;
        border-radius: 999px;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-mini-pasta-nome {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.8rem;
        text-align: left;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-mini-pasta-base {
        min-height: 0;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-mini-pasta-qtd {
        font-size: 0.85rem;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-mini-pasta.is-ativo,
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-mini-pasta:hover {
        transform: none;
    }
    /* A pasta aberta: sem o contorno grosso por fora (branco no tema escuro,
       quase preto no claro — destoava do resto do sistema). Um anel fino e
       translúcido POR DENTRO da pílula, no tom dela, basta: a pasta aberta
       já está no cabeçalho grande logo acima. */
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-mini-pasta.is-ativo {
        filter: none;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-mini-pasta.is-ativo .cp-mini-pasta-corpo {
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .cp-mini-pasta.is-ativo.cp-pasta-clara .cp-mini-pasta-corpo {
        box-shadow: inset 0 0 0 2px rgba(15, 23, 42, 0.3);
    }

    :is(.fi-panel-area-cliente, .fi-panel-painel) .fi-ta-header-toolbar .fi-ta-search-field {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Área de toque: os botões de ícone tinham 28px (Baixar, ⋮, Editar,
       Enviar); 40px é o mínimo confortável para o dedo. */
    .fi-panel-area-cliente .fi-ta-actions .fi-icon-btn,
    .fi-panel-area-cliente .cp-btn-icone {
        width: 2.5rem;
        height: 2.5rem;
    }
    .fi-panel-area-cliente .fi-ta-actions .fi-btn {
        min-height: 2.5rem;
    }
    /* Botões com texto (Enviar documento, Mais ações, Adicionar...), o filtro
       e os ícones do topo também chegam a 40px. */
    .fi-panel-area-cliente .fi-btn {
        min-height: 2.5rem;
    }
    .fi-panel-area-cliente .fi-ta-header-toolbar .fi-icon-btn,
    .fi-panel-area-cliente .fi-topbar .fi-icon-btn {
        width: 2.5rem;
        height: 2.5rem;
    }
    .fi-panel-area-cliente .fi-topbar .fi-user-avatar {
        width: 2.25rem;
        height: 2.25rem;
    }
    /* Links de uma linha só ("Ver todos →", "Esqueceu sua senha?"): mais
       área de toque sem mudar o desenho (o recuo negativo desfaz o espaço). */
    .fi-panel-area-cliente .cp-card-foot .cp-link,
    .fi-panel-area-cliente .fi-ta-header .fi-link,
    .fi-panel-area-cliente .cp-pasta-hero-acima,
    .fi-panel-area-cliente .fi-simple-main a {
        padding-block: 0.5rem;
        margin-block: -0.5rem;
    }


    /* Início: o resumo em 4 números cabe numa linha — número e rótulo menores
       (o rótulo quebra em duas linhas: "Boletos / vencidos"). */
    .fi-panel-area-cliente .cp-resumo-item {
        gap: 0.2rem;
        padding: 0.85rem 0.25rem 0.8rem;
    }
    .fi-panel-area-cliente .cp-resumo-valor {
        font-size: 1.5rem;
    }
    .fi-panel-area-cliente .cp-resumo-rotulo {
        font-size: 0.7rem;
    }
    /* "Últimos documentos": só título e situação — sem o fio embaixo da
       situação (não há faixa de colunas depois dela), e o Baixar na mesma
       linha, à direita, em vez de uma linha só para ele. */
    .fi-panel-area-cliente .fi-dashboard-page .fi-ta-row > td.fi-ta-cell.fi-table-cell-situacao {
        flex: 1 1 0%;
        min-width: 0;
        padding-bottom: 0.25rem !important;
        border-bottom: 0;
        align-self: center;
    }

    /* A empresa em uso, embaixo de "Início" (o menu, onde ela fica, começa
       fechado no celular). */
    .fi-panel-area-cliente .fi-header-subheading .cp-so-celular {
        font-weight: 600;
        color: var(--cp-ink);
    }

    /* Busca do topo: a frase inteira não cabia ("Buscar documento ou co").
       Curta, cabe inteira — então sem o letreiro andando. */
    :is(.fi-panel-area-cliente, .fi-panel-painel) .fi-global-search-field .fi-input-wrp-input::after {
        content: "Buscar…";
        animation: none !important;
    }


    /* Login: o cartão encostava nas bordas da tela, com os cantos arredondados
       cortados. */
    .fi-panel-area-cliente .fi-simple-main {
        width: calc(100% - 1.5rem);
        margin-inline: auto;
    }
}
@media (min-width: 640px) {
    .fi-panel-area-cliente .fi-header-subheading:has(> .cp-so-celular) {
        display: none;
    }
}


/* Celulares comuns (até ~420px): as abas de Documentos (3) e de Boletos (4)
   continuam numa linha só com a fonte maior do celular. */
@media (max-width: 419px) {
    :is(.fi-panel-area-cliente, .fi-panel-painel) .fi-tabs-item {
        gap: 0.25rem;
        padding: 0.5rem 0.3rem;
        font-size: 0.75rem;
    }
}
@media (max-width: 379px) {
    /* Celular pequeno: a faixa de colunas + o Baixar ainda numa linha. */
    .fi-panel-area-cliente .fi-ta-table > tbody > tr.fi-ta-row {
        column-gap: 0.5rem;
    }
    .fi-panel-area-cliente .fi-ta-row > td.fi-ta-cell:not(.fi-ta-selection-cell, .fi-ta-actions-cell, .fi-table-cell-titulo, .fi-table-cell-nome, .fi-table-cell-situacao, .fi-table-cell-status-boleto, .fi-table-cell-ativo) {
        font-size: 0.8rem;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .fi-tabs {
        gap: 0.1rem;
        padding: 0.25rem;
    }
    :is(.fi-panel-area-cliente, .fi-panel-painel) .fi-tabs-item {
        gap: 0.2rem;
        padding: 0.5rem 0.2rem;
        font-size: 0.7rem;
    }
}

/* Acompanham os cartões da seção 14 (até 899px, celular e tablet em pé). */
@media (max-width: 899px) {
    /* Barra da lista: no cartão não há colunas para escolher, e "agrupar"
       era um ícone que ninguém entendia. Fica a busca e o filtro. */
    :is(.fi-panel-area-cliente, .fi-panel-painel) .fi-ta-col-toggle,
    :is(.fi-panel-area-cliente, .fi-panel-painel) .fi-ta-header-toolbar [x-data*="tableGrouping"] {
        display: none;
    }
    /* Caixinha de marcar maior, para o dedo. */
    .fi-panel-area-cliente .fi-ta-row .fi-checkbox-input {
        width: 1.25rem;
        height: 1.25rem;
    }
    /* Colaborador ativo: "Desligado em: Ativo" repetia a Situação. */
    .fi-panel-area-cliente .fi-ta-row > td.fi-ta-cell.fi-table-cell-data-desligamento:has(.fi-ta-placeholder) {
        display: none;
    }
    /* O detalhe ao lado do selo ("aberto em 23/09/2026") um pouco menor. */
    .fi-panel-area-cliente .fi-ta-row > td .fi-ta-text p.text-sm {
        font-size: 0.8rem;
    }
}


/* =========================================================================
   18. PORTAL — BARRA DE NAVEGAÇÃO DO CELULAR (view barra-inferior)
   Até 1023px o menu lateral é uma cortina atrás do ☰: navegar pedia dois
   toques e esconder a tela. A barra fica fixa embaixo, como num aplicativo,
   com as mesmas entradas e números do menu e o "Enviar" no meio (abre a
   câmera, a galeria ou os arquivos do aparelho).
   ========================================================================= */
.cp-barra-inferior {
    display: none;
}
@media (max-width: 1023px) {
    /* z-index 15: abaixo do cabeçalho do topo (20). O painel do sininho mora
       DENTRO do cabeçalho; com a barra em 25 ele ficava por baixo dela e o fim
       da lista de notificações sumia. Popups (40) e menu lateral (30) seguem
       por cima. */
    .cp-barra-inferior {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 15;
        display: flex;
        align-items: stretch;
        gap: 0.1rem;
        /* Embaixo, só a folga mínima. SEM env(safe-area-inset-bottom): o Chrome
           do Android informa a altura da barra de botões do sistema (~48px)
           mas não desenha a página embaixo dela — somar isso deixava uma sobra
           vazia embaixo dos rótulos (visto no celular do usuário). */
        padding: 0.4rem 0.3rem 0.15rem;
        border-top: 1px solid var(--cp-border);
        background: var(--cp-surface);
        box-shadow: 0 -8px 24px -18px rgba(15, 23, 42, 0.45);
    }
    /* O fundo da barra continua para baixo da tela. Em alguns celulares (iPhone,
       barra do navegador recolhida) sobra uma faixa abaixo da barra, e nela
       aparecia o conteúdo da página passando por trás. Fora dessa situação
       isto fica fora da tela. */
    .cp-barra-inferior::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 4rem;
        background: var(--cp-surface);
    }
    /* Largura que acompanha o texto ("Colaboradores" é bem mais longo que
       "Início"): com cinco partes iguais, ele era cortado. */
    .cp-barra-item {
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        min-height: 2.95rem;
        border-radius: 0.65rem;
        color: var(--cp-muted);
        font-size: 0.66rem;
        font-weight: 500;
        line-height: 1.1;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .cp-barra-item:active {
        background: var(--cp-soft);
    }
    .cp-barra-item.is-ativo {
        color: var(--cp-primary);
        font-weight: 600;
    }
    .cp-barra-icone {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .cp-barra-icone svg {
        width: 1.45rem;
        height: 1.45rem;
    }
    .cp-barra-rotulo {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* O número do menu (documentos novos...) no canto do ícone. */
    .cp-barra-numero {
        position: absolute;
        top: -0.35rem;
        left: calc(100% - 0.55rem);
        min-width: 1.1rem;
        height: 1.1rem;
        padding: 0 0.3rem;
        border-radius: 999px;
        background: rgb(var(--danger-600));
        box-shadow: 0 0 0 2px var(--cp-surface);
        color: #fff;
        font-size: 0.65rem;
        font-weight: 700;
        line-height: 1.1rem;
        text-align: center;
    }
    /* "Enviar": botão redondo, na cor do sistema, levantado sobre a barra. */
    .cp-barra-enviar {
        cursor: pointer;
        color: var(--cp-primary);
        font-weight: 600;
    }
    .cp-barra-enviar input[type="file"] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }
    .cp-barra-enviar .cp-barra-icone {
        width: 2.75rem;
        height: 2.75rem;
        margin-top: -1.2rem;
        border-radius: 999px;
        background: rgb(var(--primary-600));
        box-shadow: 0 0 0 4px var(--cp-surface), 0 8px 18px -8px rgba(var(--primary-600), 0.7);
        color: #fff;
    }
    .cp-barra-enviar .cp-barra-icone svg {
        width: 1.35rem;
        height: 1.35rem;
    }
    .cp-barra-enviar:active .cp-barra-icone {
        background: rgb(var(--primary-700));
    }
    .cp-barra-enviar:active {
        background: transparent;
    }
    /* Espaço no fim da página para a barra não cobrir o último item. */
    .fi-panel-area-cliente .fi-main {
        padding-bottom: 4.5rem;
    }
}

/* Selo do botão de filtros só quando há filtro ativo (o Filament mostrava "0"
   por cima do botão de colunas). A marca vem do AppServiceProvider. */
.cp-sem-filtros .fi-icon-btn-badge-ctn,
.cp-sem-filtros .fi-btn-badge-ctn {
    display: none;
}

/* ---- Popup "Importar" (Empresas e Colaboradores): colunas da planilha ---- */
.cp-importacao {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cp-colunas {
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    overflow: hidden;
}
.cp-colunas-cabeca,
.cp-colunas-linha {
    display: grid;
    /* Largura fixa: cada linha é uma grade própria, e com "auto" as colunas
       não se alinhavam de uma linha para a outra. */
    grid-template-columns: 13.5rem 1fr;
    gap: 0.35rem 1rem;
    padding: 0.6rem 0.9rem;
}
.cp-colunas-cabeca {
    background-color: var(--cp-soft);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cp-muted);
}
.cp-colunas-linha {
    border-top: 1px solid var(--cp-hair);
    align-items: start;
}
.cp-colunas-nome {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}
.cp-colunas-nome code {
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    background-color: var(--cp-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    color: var(--cp-ink);
}
.cp-colunas-descricao {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--cp-text);
}
.cp-colunas-exemplo {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.8rem;
    color: var(--cp-muted);
}
.cp-importacao-dicas {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-left: 1.1rem;
    list-style: disc;
}
.cp-importacao-dicas strong {
    color: var(--cp-ink);
}
@media (max-width: 639px) {
    .cp-colunas-cabeca {
        display: none;
    }
    .cp-colunas-linha {
        grid-template-columns: 1fr;
    }
    .cp-colunas-cabeca + .cp-colunas-linha {
        border-top: 0;
    }
}

/* =========================================================================
   19. PAINEL DA EQUIPE NO CELULAR (29/09)
   "No mesmo nível do portal" (seções 14, 17 e 18): o menu começa fechado
   (PainelPanelProvider), a letra cresce, a barra de navegação fica embaixo
   (view painel/barra-inferior; o estilo da barra é o da seção 18) e as
   listas viram CARTÕES. Antes, 10 das 14 telas tinham tabela rolando para o
   lado (até 310px além da tela). Genérico: o nome de cada coluna vem na
   própria célula (data-rotulo, AppServiceProvider), então vale para qualquer
   lista do painel, sem regra por coluna. O 1º dado da linha é o título do
   cartão; o menu ⋯ vai para o canto; botões com texto ("Gerenciar",
   "Documentos") numa última linha.
   ========================================================================= */
@media (max-width: 1023px) {
    .fi-panel-painel .fi-main {
        padding-bottom: 4.5rem;
    }
}
@media (max-width: 899px) {
    html:has(> body.fi-panel-painel) {
        font-size: 17px;
    }

    .fi-panel-painel .fi-ta-table,
    .fi-panel-painel .fi-ta-table > tbody {
        display: block;
        width: 100%;
    }
    .fi-panel-painel .fi-ta-table > thead {
        display: none;
    }
    .fi-panel-painel .fi-ta-table > tbody > tr:not(.fi-ta-row),
    .fi-panel-painel .fi-ta-table > tbody > tr:not(.fi-ta-row) > td {
        display: block;
    }
    .fi-panel-painel .fi-ta-table > tbody > tr.fi-ta-row {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.4rem 0.9rem;
        padding: 0.8rem 0.75rem;
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell {
        display: block;
        min-width: 0 !important;
        max-width: none;
        padding: 0 !important;
        overflow-wrap: anywhere;
    }
    .fi-panel-painel .fi-ta-row > td .fi-ta-text,
    .fi-panel-painel .fi-ta-row > td .fi-ta-text * {
        white-space: normal !important;
    }
    .fi-panel-painel .fi-ta-row > td .px-3 {
        padding-left: 0;
        padding-right: 0;
    }
    .fi-panel-painel .fi-ta-row > td .py-4 {
        padding-top: 0;
        padding-bottom: 0;
    }
    /* A coluna de botões "presa à direita" (seção 5) é para a tabela larga. */
    .fi-panel-painel .fi-ta-row > td.fi-ta-actions-cell:last-child {
        position: static;
        background: none;
        animation: none;
        box-shadow: none;
    }

    /* O desenho do cartão (quadrado, título, linhas de baixo, botões) está
       na seção 22. */
}
/* Área de toque no celular, como no portal (seção 17): ícones de 28px e
   caixinhas de 16px eram difíceis de acertar com o dedo. */
@media (max-width: 899px) {
    .fi-panel-painel .fi-ta-actions .fi-icon-btn,
    .fi-panel-painel .fi-ta-header-toolbar .fi-icon-btn,
    .fi-panel-painel .fi-topbar .fi-icon-btn {
        width: 2.5rem;
        height: 2.5rem;
    }
    .fi-panel-painel .fi-btn {
        min-height: 2.5rem;
    }
    .fi-panel-painel .fi-ta-row .fi-checkbox-input,
    .fi-panel-painel .fi-ta-header-toolbar .fi-checkbox-input {
        width: 1.25rem;
        height: 1.25rem;
    }
}
/* Cabeçalho enxuto nas listas, como no portal: a frase de explicação sob o
   título ocupava 2 ou 3 linhas antes de tudo. (Na Central fica: é o CNPJ.) */
@media (max-width: 639px) {
    .fi-panel-painel .fi-resource-list-records-page .fi-header-subheading {
        display: none;
    }
}
/* Cartões de números: no celular viram a faixa de 4 números do Início do
   portal (seção 20). */

/* =========================================================================
   20. PAINEL DA EQUIPE NO CELULAR — NO DESENHO DO PORTAL (29/09, tarde)
   A seção 19 fez tudo caber; o usuário achou que o painel continuava
   destoando do portal, que ficou "ótimo". Aqui o painel da equipe ganha o
   mesmo desenho: abas, pastas, busca e rodapé dos popups vêm das regras do
   portal (seções 14 e 17, agora para os dois painéis); o que é só da equipe
   fica abaixo:
     - cartão da lista como o do portal: título, a situação numa linha
       própria com o fio, e a faixa de colunas compacta;
     - botões do topo arrumados (o principal na largura toda, os outros
       dividindo a linha), no lugar de três botões soltos em larguras
       diferentes;
     - números do topo numa faixa de 4, como o "Resumo" do Início do portal;
     - Central da empresa com as pastas em ícones (grade da seção 14);
     - cabeçalho e espaçamentos no tamanho do portal.
   ========================================================================= */
@media (max-width: 899px) {
    /* (O cartão da lista foi para a seção 22.) */

    /* ---- Central da empresa: pastas em ícones (grade da seção 14) ---- */
    /* O ⋯ (opções da pasta) na aba do ícone, e não no canto da célula. */
    .fi-panel-painel .cp-pasta-grid .cp-pasta-wrap {
        position: relative;
    }
    .fi-panel-painel .cp-pasta-grid .cp-pasta-menu {
        top: -0.2rem;
        left: calc(50% - 2.875rem);
    }
    .fi-panel-painel .cp-pasta-grid .cp-pasta-menu-btn {
        width: 2rem;
        height: 1.25rem;
    }
    /* "Nova pasta": do tamanho de um ícone, tracejado, no fim da grade. */
    .fi-panel-painel .cp-pasta-grid .cp-pasta-nova {
        flex-direction: column;
        justify-self: center;
        gap: 0.2rem;
        width: 5.75rem;
        min-height: 3.5rem;
        margin-top: 0.55rem;
        padding: 0.35rem;
        font-size: 0.72rem;
        line-height: 1.15;
    }
}

/* (Os números do topo foram para a seção 22: quatro numa linha.) */

@media (max-width: 639px) {
    /* ---- Cabeçalho e espaçamentos no tamanho do portal ---- */
    .fi-panel-painel .fi-header-heading {
        font-size: 1.5rem;
    }
    /* Sem a frase de explicação embaixo do título (Meu perfil, ajustes),
       como no portal. Na Central ela é o CNPJ: fica. */
    .fi-panel-painel .fi-page:not(:has(.cp-pasta-grid)) .fi-header-subheading {
        display: none;
    }
    .fi-panel-painel .fi-page > section {
        row-gap: 1.25rem;
        padding-top: 1.25rem;
    }

    /* (Os botões do topo foram para a seção 22.) */
    /* O Salvar dos formulários e os botões da seleção em lote também. */
    .fi-panel-painel .fi-form-actions .fi-ac,
    .fi-panel-painel .fi-form-actions .fi-btn,
    .fi-panel-painel .fi-ta-header-toolbar .fi-ta-actions > .fi-btn {
        flex: 1 1 100%;
        width: 100%;
    }

    /* ---- Cartões com título e link (Início) ---- */
    /* "Empresas cadastr…" e "Últimos 12 meses" em duas linhas: o título
       inteiro em cima, o complemento embaixo. */
    .fi-panel-painel .cp-card-head {
        flex-wrap: wrap;
        row-gap: 0.2rem;
    }
    .fi-panel-painel .cp-card-title > span {
        white-space: normal;
    }
    .fi-panel-painel .cp-card {
        padding: 1rem;
    }
}

/* =========================================================================
   21. INÍCIO DO ESCRITÓRIO NO CELULAR — MODELO 2 "ATALHOS EM GRADE" (30/09)
   Escolhido entre cinco modelos desenhados com os dados reais. Até 767px:
   data e título; nove atalhos como ícones de aplicativo (quadrado na cor do
   assunto, ícone branco, nome embaixo e o selo vermelho de quantos pedem
   ação), três por linha, do jeito das pastas do portal; "Chegou por último",
   com os 3 documentos mais recentes das empresas; e a leitura numa rosca.
   Os totais, os gráficos e as listas do computador (.cp-inicio-computador)
   ficam só na tela larga.
   ========================================================================= */
.cp-inicio-celular {
    display: none;
}
@media (max-width: 767px) {
    .fi-panel-painel .cp-inicio-celular {
        display: flex;
        flex-direction: column;
        gap: 1.15rem;
    }
    .fi-panel-painel .cp-inicio-computador {
        display: none;
    }

    .cp-inicio-cabeca {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }
    .cp-inicio-data {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--cp-muted);
    }
    .cp-inicio-titulo {
        font-size: 1.55rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -0.02em;
        color: var(--cp-ink);
    }

    /* Os atalhos: três por linha, dentro de um cartão. (Com .cp-card no
       seletor para vencer o recuo de 1rem dos cartões no celular, seção 20.) */
    .fi-panel-painel .cp-card.cp-inicio-atalhos {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.1rem 0.5rem;
        padding: 1.1rem 0.5rem;
        border-radius: 1rem;
    }
    .cp-inicio-atalho {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
        color: var(--cp-ink);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .cp-inicio-atalho-icone {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 1.05rem;
        background: var(--cp-atalho-cor, rgb(var(--primary-600)));
        box-shadow: 0 10px 18px -14px rgba(15, 23, 42, 0.8);
        color: #fff;
        transition: transform 0.12s ease;
    }
    .cp-inicio-atalho:active .cp-inicio-atalho-icone {
        transform: scale(0.94);
    }
    .cp-inicio-atalho-icone svg {
        width: 1.65rem;
        height: 1.65rem;
    }
    /* Quantos pedem ação, como o número de notificações de um aplicativo. */
    .cp-inicio-atalho-selo {
        position: absolute;
        top: -0.4rem;
        right: -0.55rem;
        min-width: 1.4rem;
        height: 1.4rem;
        padding: 0 0.35rem;
        border-radius: 999px;
        background: #e11d48;
        box-shadow: 0 0 0 3px var(--cp-surface);
        color: #fff;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.4rem;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }
    .cp-inicio-atalho-nome {
        max-width: 100%;
        overflow: hidden;
        font-size: 0.74rem;
        font-weight: 600;
        line-height: 1.25;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* "Chegou por último". */
    .fi-panel-painel .cp-card.cp-inicio-recentes {
        padding: 0;
        overflow: hidden;
        border-radius: 1rem;
    }
    .cp-inicio-recentes-cabeca {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.85rem 1rem 0.6rem;
    }
    .cp-inicio-subtitulo {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--cp-ink);
    }
    .cp-inicio-recentes-cabeca .cp-link {
        flex-shrink: 0;
        font-size: 0.82rem;
    }
    .cp-inicio-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.7rem 1rem;
        border-top: 1px solid var(--cp-hair);
    }
    .cp-inicio-item-link {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        gap: 0.75rem;
        min-width: 0;
        color: inherit;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    /* As iniciais da empresa que enviou. */
    .cp-inicio-item-sigla {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.6rem;
        background: var(--cp-primary-soft);
        color: var(--cp-primary);
        font-size: 0.72rem;
        font-weight: 700;
    }
    .cp-inicio-item-textos {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 0.1rem;
        min-width: 0;
    }
    .cp-inicio-item-titulo {
        font-size: 0.88rem;
        font-weight: 600;
        line-height: 1.3;
        color: var(--cp-primary);
        overflow-wrap: anywhere;
    }
    /* Até duas linhas: numa só, razão social comprida cortava a data. */
    .cp-inicio-item-detalhe {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        font-size: 0.74rem;
        line-height: 1.35;
        color: var(--cp-muted);
    }
    .cp-inicio-item-acao {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        border: 1px solid var(--cp-border-strong);
        border-radius: 0.6rem;
        background: var(--cp-surface);
        color: var(--cp-primary);
    }
    .cp-inicio-item-acao svg {
        width: 1.25rem;
        height: 1.25rem;
    }
    .cp-inicio-vazio {
        padding: 0.9rem 1rem 1.1rem;
        border-top: 1px solid var(--cp-hair);
    }

    /* Leitura: a rosca com a porcentagem e o resumo ao lado. */
    .fi-panel-painel .cp-card.cp-inicio-leitura {
        flex-direction: row;
        align-items: center;
        gap: 0.85rem;
        padding: 0.85rem 1rem;
        border-radius: 1rem;
    }
    .cp-inicio-rosca {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 3.3rem;
        height: 3.3rem;
        border-radius: 999px;
        background: conic-gradient(
            rgb(var(--primary-600)) calc(var(--cp-rosca-pct, 0) * 1%),
            rgb(var(--gray-200)) 0
        );
    }
    .dark .cp-inicio-rosca {
        background: conic-gradient(
            rgb(var(--primary-400)) calc(var(--cp-rosca-pct, 0) * 1%),
            rgb(var(--gray-800)) 0
        );
    }
    .cp-inicio-rosca-miolo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.45rem;
        height: 2.45rem;
        border-radius: 999px;
        background: var(--cp-surface);
        color: var(--cp-ink);
        font-size: 0.75rem;
        font-weight: 700;
    }
    .cp-inicio-leitura-textos {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        min-width: 0;
    }
    .cp-inicio-leitura-textos strong {
        font-size: 0.84rem;
        font-weight: 600;
        line-height: 1.3;
        color: var(--cp-ink);
    }
    .cp-inicio-leitura-textos span {
        font-size: 0.76rem;
        color: var(--cp-muted);
    }
}

/* =========================================================================
   22. LISTAS DA EQUIPE NO CELULAR — NO DESENHO DO INÍCIO (30/09)
   O Início do escritório ganhou um desenho próprio (seção 21) e o resto do
   painel ficou para trás: cartão de documento diferente, cantos diferentes,
   três fileiras de botões no topo, quatro números em duas linhas, e a tela
   de Atividades com cara de tabela convertida. Aqui todas as listas passam
   a falar a mesma língua do Início (desenhos aprovados antes):
     - cartão: um quadrado à esquerda (as iniciais de quem é a linha, ou um
       ícone na cor do que aconteceu), o título, e o resto em linhas curtas;
       os botões no canto. O quadrado vem de data-sigla / data-icone na
       célula do título (App\Filament\Shared\CartaoDaLista). Onde a lista
       deixa marcar linhas, tocar no quadrado marca;
     - a busca e o filtro soltos em cima, e as linhas num cartão só;
     - abas como seletor (trilho cinza, a ativa em branco);
     - os números do topo numa linha só, com rótulo curto (data-curto);
     - no topo, o botão principal e os outros só com o ícone ao lado dele;
     - os mesmos cantos (1rem) em todo cartão;
     - Atividades e Eventos de autenticação agrupados por dia, só com a hora.
   Tudo daqui vale só para o painel da equipe; o portal não muda.
   ========================================================================= */
@media (max-width: 899px) {
    .fi-panel-painel {
        --cp-radius: 1rem;
    }

    /* ---- A lista: busca e filtro soltos, as linhas num cartão ---- */
    .fi-panel-painel .fi-ta-ctn,
    .dark .fi-panel-painel .fi-ta-ctn {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: none;
    }
    .fi-panel-painel .fi-ta-ctn.divide-y > :not([hidden]) ~ :not([hidden]):not(.fi-ta-content) {
        border-top-width: 0;
    }
    .fi-panel-painel .fi-ta-header-toolbar {
        gap: 0.5rem;
        padding: 0 0 0.75rem;
    }
    /* O lado dos botões da seleção: fora do caminho enquanto nada está
       marcado (vazio, ele ainda empurrava a busca 1rem para a direita). */
    .fi-panel-painel .fi-ta-header-toolbar > div:first-of-type:not(.ms-auto):not(:has(.fi-ta-actions:not([style*="display: none"]):not([x-cloak]))) {
        display: none;
    }
    .fi-panel-painel .fi-ta-header-toolbar > .ms-auto {
        gap: 0.5rem;
    }
    .fi-panel-painel .fi-ta-header-toolbar .fi-ta-search-field .fi-input-wrp {
        min-height: 2.6rem;
        border-radius: 0.75rem;
        background-color: var(--cp-surface);
    }
    .fi-panel-painel .fi-ta-header-toolbar .fi-ta-filters-dropdown > .fi-dropdown-trigger > .fi-icon-btn {
        width: 2.6rem;
        height: 2.6rem;
        margin: 0;
        border: 1px solid var(--cp-border-strong);
        border-radius: 0.75rem;
        background-color: var(--cp-surface);
    }
    .fi-panel-painel .fi-ta-header-toolbar .fi-ta-filters-dropdown {
        margin-left: auto;
    }
    .fi-panel-painel .fi-ta-selection-indicator {
        margin-bottom: 0.75rem;
        padding: 0.55rem 0.85rem;
        border: 1px solid var(--cp-border);
        border-radius: 0.75rem;
    }
    .fi-panel-painel .fi-ta-ctn > .fi-ta-content:has(> .fi-ta-table) {
        border: 1px solid var(--cp-border);
        border-radius: var(--cp-radius);
        background-color: var(--cp-surface);
    }
    /* A página de pasta marca a lista com a cor da pasta, em cima. */
    .fi-panel-painel.cp-fundo-pasta .fi-ta-ctn > .fi-ta-content:has(> .fi-ta-table) {
        border-top: 3px solid var(--cp-pasta-bg);
    }
    /* Lista em cartões soltos (Modelos de e-mail): na largura toda, como a busca. */
    .fi-panel-painel .fi-ta-content > .fi-ta-content-grid {
        padding: 0;
    }
    .fi-panel-painel .fi-ta-pagination {
        padding: 0.75rem 0.15rem 0;
    }

    /* ---- O cartão ---- */
    .fi-panel-painel .fi-ta-table > tbody > tr.fi-ta-row {
        gap: 0 0.5rem;
        padding: 0.8rem 0.85rem;
    }
    /* Novo e vencido: o selo do cartão já diz (a faixa na borda é da tabela). */
    .fi-panel-painel .fi-ta-row:is(.cp-linha-nova, .cp-linha-vencida) > td:first-child {
        box-shadow: none;
    }
    /* Quebra de linha depois do título e dos botões: o resto desce. */
    .fi-panel-painel .fi-ta-table > tbody > tr.fi-ta-row::after {
        content: "";
        order: 3;
        flex-basis: 100%;
        height: 0;
    }

    /* As larguras mínimas das colunas são da tabela: no cartão, o título
       tem de poder encolher ao lado dos botões. */
    .fi-panel-painel .fi-ta-row :is(.cp-col-documento, .cp-col-principal, .cp-col-texto, .cp-col-titulo, .cp-col-situacao) {
        min-width: 0;
    }
    /* Segunda quebra de linha: os selos ficam juntos, depois do resto. */
    .fi-panel-painel .fi-ta-table > tbody > tr.fi-ta-row::before {
        content: "";
        order: 7;
        flex-basis: 100%;
        height: 0;
    }

    /* O resto da linha: "Nome valor", lado a lado, em letra pequena. */
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell:not(.fi-ta-selection-cell, .fi-ta-actions-cell) {
        order: 6;
        display: flex;
        flex: 0 1 auto;
        align-items: baseline;
        gap: 0.3rem;
        max-width: 100%;
        margin-top: 0.2rem;
        margin-right: 0.4rem;
        font-size: 0.72rem;
        line-height: 1.4;
        color: var(--cp-text);
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell[data-rotulo]::before {
        content: attr(data-rotulo);
        flex: none;
        color: var(--cp-muted);
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell[data-rotulo=""]::before {
        content: none;
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell :is(.fi-ta-text-item-label, .fi-ta-text > p, .fi-ta-placeholder, .fi-ta-text li) {
        font-size: inherit;
        line-height: inherit;
    }

    /* O quadrado: iniciais ou ícone. */
    .fi-panel-painel .fi-ta-table > tbody > tr.fi-ta-row:has(> td:is([data-sigla], [data-icone])) {
        min-height: 3.95rem;
        padding-left: 3.8rem;
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell:is([data-sigla], [data-icone])::before {
        content: attr(data-sigla);
        position: absolute;
        top: 0.8rem;
        left: 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.35rem;
        height: 2.35rem;
        border-radius: 0.7rem;
        background: var(--cp-quadro-fundo, var(--cp-primary-soft));
        color: var(--cp-quadro-cor, var(--cp-primary));
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1;
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell[data-icone]::before {
        content: "";
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell[data-icone]::after {
        content: "";
        position: absolute;
        top: 1.375rem;
        left: 1.425rem;
        width: 1.2rem;
        height: 1.2rem;
        background: var(--cp-quadro-cor, var(--cp-primary));
        -webkit-mask: var(--cp-quadro-icone) center / contain no-repeat;
        mask: var(--cp-quadro-icone) center / contain no-repeat;
        pointer-events: none;
    }
    .fi-panel-painel .fi-ta-row > td[data-tom="verde"] {
        --cp-quadro-fundo: rgba(var(--success-500), 0.14);
        --cp-quadro-cor: rgb(var(--success-700));
    }
    .fi-panel-painel .fi-ta-row > td[data-tom="rosa"] {
        --cp-quadro-fundo: rgba(var(--danger-500), 0.12);
        --cp-quadro-cor: rgb(var(--danger-700));
    }
    .fi-panel-painel .fi-ta-row > td[data-tom="ambar"] {
        --cp-quadro-fundo: rgba(var(--warning-500), 0.18);
        --cp-quadro-cor: rgb(var(--warning-700));
    }
    .fi-panel-painel .fi-ta-row > td[data-tom="cinza"] {
        --cp-quadro-fundo: rgb(var(--gray-100));
        --cp-quadro-cor: rgb(var(--gray-600));
    }
    .dark .fi-panel-painel .fi-ta-row > td[data-tom="verde"],
    .fi-panel-painel.dark .fi-ta-row > td[data-tom="verde"] {
        --cp-quadro-cor: rgb(var(--success-400));
    }
    .dark .fi-panel-painel .fi-ta-row > td[data-tom="rosa"],
    .fi-panel-painel.dark .fi-ta-row > td[data-tom="rosa"] {
        --cp-quadro-cor: rgb(var(--danger-400));
    }
    .dark .fi-panel-painel .fi-ta-row > td[data-tom="ambar"],
    .fi-panel-painel.dark .fi-ta-row > td[data-tom="ambar"] {
        --cp-quadro-cor: rgb(var(--warning-400));
    }
    .dark .fi-panel-painel .fi-ta-row > td[data-tom="cinza"],
    .fi-panel-painel.dark .fi-ta-row > td[data-tom="cinza"] {
        --cp-quadro-fundo: rgba(255, 255, 255, 0.07);
        --cp-quadro-cor: rgb(var(--gray-300));
    }
    .fi-panel-painel .fi-ta-row > td[data-icone="envelope"] { --cp-quadro-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75'/%3E%3C/svg%3E"); }
    .fi-panel-painel .fi-ta-row > td[data-icone="criar"] { --cp-quadro-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E"); }
    .fi-panel-painel .fi-ta-row > td[data-icone="editar"] { --cp-quadro-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10'/%3E%3C/svg%3E"); }
    .fi-panel-painel .fi-ta-row > td[data-icone="excluir"] { --cp-quadro-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0'/%3E%3C/svg%3E"); }
    .fi-panel-painel .fi-ta-row > td[data-icone="restaurar"] { --cp-quadro-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3'/%3E%3C/svg%3E"); }
    .fi-panel-painel .fi-ta-row > td[data-icone="liberar"] { --cp-quadro-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 10.5V6.75a4.5 4.5 0 1 1 9 0v3.75M3.75 21.75h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H3.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z'/%3E%3C/svg%3E"); }
    .fi-panel-painel .fi-ta-row > td[data-icone="remover"] { --cp-quadro-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z'/%3E%3C/svg%3E"); }
    .fi-panel-painel .fi-ta-row > td[data-icone="trocar"] { --cp-quadro-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5'/%3E%3C/svg%3E"); }
    .fi-panel-painel .fi-ta-row > td[data-icone="relogio"] { --cp-quadro-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E"); }
    .fi-panel-painel .fi-ta-row > td[data-icone="entrar"] { --cp-quadro-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15M12 9l3 3m0 0-3 3m3-3H2.25'/%3E%3C/svg%3E"); }
    .fi-panel-painel .fi-ta-row > td[data-icone="sair"] { --cp-quadro-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15'/%3E%3C/svg%3E"); }
    .fi-panel-painel .fi-ta-row > td[data-icone="alerta"] { --cp-quadro-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z'/%3E%3C/svg%3E"); }
    .fi-panel-painel .fi-ta-row > td[data-icone="bloqueio"] { --cp-quadro-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.364 18.364A9 9 0 0 0 5.636 5.636m12.728 12.728A9 9 0 0 1 5.636 5.636m12.728 12.728L5.636 5.636'/%3E%3C/svg%3E"); }
    .fi-panel-painel .fi-ta-row > td[data-icone="chave"] { --cp-quadro-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z'/%3E%3C/svg%3E"); }
    .fi-panel-painel .fi-ta-row > td[data-icone="escudo"] { --cp-quadro-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z'/%3E%3C/svg%3E"); }
    .fi-panel-painel .fi-ta-row > td[data-icone="pasta"] { --cp-quadro-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z'/%3E%3C/svg%3E"); }
    .fi-panel-painel .fi-ta-row > td[data-icone="documento"] { --cp-quadro-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z'/%3E%3C/svg%3E"); }
    /* Marcar: a caixinha fica invisível em cima do quadrado; marcado, o
       quadrado fica azul com o "✓". */
    .fi-panel-painel .fi-ta-row:has(> td:is([data-sigla], [data-icone])) > td.fi-ta-cell.fi-ta-selection-cell {
        position: absolute;
        top: 0.8rem;
        left: 0.85rem;
        z-index: 1;
        width: 2.35rem;
        height: 2.35rem;
        padding: 0 !important;
        opacity: 0;
    }
    .fi-panel-painel .fi-ta-row:has(> td:is([data-sigla], [data-icone])) > td.fi-ta-selection-cell :is(div, label) {
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
    }
    .fi-panel-painel .fi-ta-row:has(> td:is([data-sigla], [data-icone])) > td.fi-ta-selection-cell .fi-checkbox-input {
        width: 100%;
        height: 100%;
        margin: 0;
        cursor: pointer;
    }
    .fi-panel-painel .fi-ta-row:has(> td.fi-ta-selection-cell .fi-checkbox-input:checked) > td.fi-ta-cell:is([data-sigla], [data-icone])::before {
        content: "\2713";
        background: var(--cp-primary);
        color: #fff;
        font-size: 1.15rem;
    }
    .fi-panel-painel .fi-ta-row:has(> td.fi-ta-selection-cell .fi-checkbox-input:checked) > td.fi-ta-cell[data-icone]::after {
        content: none;
    }
    .fi-panel-painel .fi-ta-row:has(> td.fi-ta-selection-cell .fi-checkbox-input:focus-visible) > td.fi-ta-cell:is([data-sigla], [data-icone])::before {
        outline: 2px solid var(--cp-primary);
        outline-offset: 2px;
    }

    /* O título: a célula que traz o quadrado — ou, numa lista que ainda não
       tem quadrado, o 1º dado da linha. */
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell:is([data-sigla], [data-icone]),
    .fi-panel-painel .fi-ta-row:not(:has(> td:is([data-sigla], [data-icone]))) > td.fi-ta-cell:is(:first-child:not(.fi-ta-selection-cell), .fi-ta-selection-cell + td) {
        order: 1;
        display: block;
        flex: 1 1 0;
        min-width: 0;
        margin-top: 0;
        margin-right: 0;
        font-size: 0.74rem;
    }
    .fi-panel-painel .fi-ta-row:not(:has(> td:is([data-sigla], [data-icone]))) > td.fi-ta-cell[data-rotulo]:is(:first-child:not(.fi-ta-selection-cell), .fi-ta-selection-cell + td)::before {
        content: none;
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell:is([data-sigla], [data-icone]) .fi-ta-text,
    .fi-panel-painel .fi-ta-row:not(:has(> td:is([data-sigla], [data-icone]))) > td.fi-ta-cell:is(:first-child:not(.fi-ta-selection-cell), .fi-ta-selection-cell + td) .fi-ta-text {
        gap: 0.12rem;
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell:is([data-sigla], [data-icone]) .fi-ta-text-item-label,
    .fi-panel-painel .fi-ta-row:not(:has(> td:is([data-sigla], [data-icone]))) > td.fi-ta-cell:is(:first-child:not(.fi-ta-selection-cell), .fi-ta-selection-cell + td) .fi-ta-text-item-label {
        font-size: 0.88rem;
        font-weight: 600;
        line-height: 1.3;
        color: var(--cp-ink);
    }
    /* Azul quando tocar abre alguma coisa, como o "Chegou por último". */
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell:is([data-sigla], [data-icone]) .fi-ta-col-wrp > :is(a, button) .fi-ta-text-item-label {
        color: var(--cp-primary);
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell:is([data-sigla], [data-icone]) .fi-ta-text > p {
        color: var(--cp-text);
    }
    /* O ícone do tipo de arquivo sai: o quadrado tomou o lugar dele. */
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell[data-sigla] .fi-ta-text-item-icon {
        display: none;
    }
    /* Documento: o título em cima, a empresa embaixo (na tabela é o
       contrário, como o remetente de uma caixa de entrada). */
    .fi-panel-painel .fi-ta-row .cp-col-documento > div {
        order: 1;
    }
    .fi-panel-painel .fi-ta-row .cp-col-documento > p {
        order: 2;
    }
    .fi-panel-painel .fi-ta-row .cp-col-documento .cp-doc-dono {
        font-weight: 500;
        color: inherit;
    }

    /* Botões: no canto de cima, ao lado do título. */
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell.fi-ta-actions-cell {
        order: 2;
        flex: none;
        align-self: flex-start;
        margin: 0;
    }
    .fi-panel-painel .fi-ta-row > .fi-ta-actions-cell .fi-ta-actions {
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 0.25rem;
    }
    .fi-panel-painel .fi-ta-row > .fi-ta-actions-cell .fi-icon-btn {
        width: 2.35rem;
        height: 2.35rem;
        margin: 0;
    }
    /* O "⋮": mais estreito e discreto. */
    .fi-panel-painel .fi-ta-row > .fi-ta-actions-cell .fi-dropdown-trigger > .fi-icon-btn {
        width: 1.6rem;
        margin-right: -0.35rem;
        color: var(--cp-muted);
    }
    /* Só o "⋮" (sem outro botão solto): não estica a linha do título —
       sem isto, título de uma linha ficava com um vão embaixo. */
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell.fi-ta-actions-cell:not(:has(.fi-ta-actions > .fi-icon-btn, .fi-ta-actions > button.fi-btn)) {
        margin-bottom: -1.2rem;
    }
    /* Baixar: contornado, como no "Chegou por último" do Início (na tabela
       do computador ele é o quadrado azul cheio). */
    .fi-panel-painel .fi-ta-row > .fi-ta-actions-cell a.fi-icon-btn[href*="/download/"] {
        border: 1px solid var(--cp-border-strong);
        border-radius: 0.7rem;
        background-color: var(--cp-surface);
        color: var(--cp-primary) !important;
    }
    .fi-panel-painel .fi-ta-row > .fi-ta-actions-cell a.fi-icon-btn[href*="/download/"] .fi-icon-btn-icon {
        width: 1.2rem;
        height: 1.2rem;
        color: var(--cp-primary) !important;
    }
    /* Tocar na linha já abre o registro: o botão que faz o mesmo ("Gerenciar",
       "Documentos") sai do cartão. */
    .fi-panel-painel .fi-ta-row:has(> td > .fi-ta-col-wrp > a) > .fi-ta-actions-cell .fi-ta-actions > a.fi-btn {
        display: none;
    }
    /* Dois ícones soltos ou mais (Editar, Excluir…): numa última linha, à
       direita — ao lado do título eles tomavam metade do cartão e o e-mail
       quebrava no meio da palavra. */
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell.fi-ta-actions-cell:has(.fi-ta-actions > .fi-icon-btn ~ .fi-icon-btn) {
        order: 10;
        align-self: center;
        margin-left: auto;
    }

    /* Texto comprido (a empresa do colaborador, as empresas do usuário, o
       registro da atividade): numa linha só dele, sem o nome na frente. */
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell:is(.fi-table-cell-empresa\.razao-social, .fi-table-cell-empresas\.razao-social, .fi-table-cell-subject-id) {
        order: 4;
        flex: 1 1 100%;
        margin-right: 0;
        overflow-wrap: break-word;
    }
    /* CNPJ e CPF se reconhecem pelo formato: sem o nome na frente. */
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell[data-rotulo]:is(.fi-table-cell-empresa\.razao-social, .fi-table-cell-empresas\.razao-social, .fi-table-cell-subject-id, .fi-table-cell-cnpj, .fi-table-cell-cpf)::before {
        content: none;
    }
    /* Listas (alterações da atividade, contexto do evento): no fim, a linha toda. */
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell:is(.fi-table-cell-properties, .fi-table-cell-contexto) {
        order: 9;
        display: block;
        flex: 1 1 100%;
        margin-right: 0;
        color: var(--cp-muted);
        overflow-wrap: break-word;
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell[data-rotulo]:is(.fi-table-cell-properties, .fi-table-cell-contexto)::before {
        content: none;
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell:is(.fi-table-cell-properties, .fi-table-cell-contexto) :is(ul, li, .fi-ta-text-item-label) {
        padding-left: 0;
        list-style: none;
        color: inherit;
    }
    /* Sem nada para mostrar ("—"): a célula sai. */
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell:is(.fi-table-cell-properties, .fi-table-cell-contexto, .fi-table-cell-pendencias, .fi-table-cell-agendado-para, .fi-table-cell-user-agent):has(.fi-ta-placeholder) {
        display: none;
    }

    /* Selos (situação, pendências, ativo/desligado, papel): a última linha,
       sem o nome na frente — o selo já diz o que é. */
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell:is(.fi-table-cell-situacao, .fi-table-cell-status-boleto, .fi-table-cell-ativo, .fi-table-cell-pendencias, .fi-table-cell-papel) {
        order: 8;
        display: block;
        flex: 0 1 auto;
        align-self: center;
        margin-top: 0.3rem;
        margin-right: 0;
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell[data-rotulo]:is(.fi-table-cell-situacao, .fi-table-cell-status-boleto, .fi-table-cell-ativo, .fi-table-cell-pendencias, .fi-table-cell-papel)::before {
        content: none;
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell:is(.fi-table-cell-situacao, .fi-table-cell-status-boleto, .fi-table-cell-ativo, .fi-table-cell-pendencias, .fi-table-cell-papel) .fi-ta-text {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.15rem 0.4rem;
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell .fi-badge {
        min-height: 0;
        padding: 0.1rem 0.5rem;
        font-size: 0.66rem;
        line-height: 1.35;
    }

    /* Documento: ao lado do selo, a linha do cartão que vem do servidor
       (data-resumo: "Fiscal · Balancete · 09/2026 · ontem") — no lugar das
       colunas Competência e Enviado em, e da frase embaixo do título. */
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell[data-resumo] {
        flex-basis: 100%;
        color: var(--cp-muted);
        white-space: normal;
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell[data-resumo] > .fi-ta-col-wrp {
        display: inline;
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell[data-resumo] > .fi-ta-col-wrp > * {
        display: inline-flex;
        width: auto;
        vertical-align: middle;
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell[data-resumo] .fi-ta-text > p {
        display: none;
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell[data-resumo]::after {
        content: attr(data-resumo);
        margin-left: 0.4rem;
        vertical-align: middle;
    }
    .fi-panel-painel .fi-ta-row:has(> td[data-resumo]) > td.fi-ta-cell:is(.fi-table-cell-competencia, .fi-table-cell-created-at),
    .fi-panel-painel .fi-ta-row:has(> td[data-resumo]) .cp-col-documento > p:not(:has(.cp-doc-dono)) {
        display: none;
    }

    /* Pastas padrão: a cor da pasta está no quadrado; a coluna da cor sai.
       O número de empresas e o aviso ("Falta em 2 empresas ativas") lado a
       lado, na linha toda. */
    .fi-panel-painel .fi-ta-row:has(> td[data-icone="pasta"]) > td.fi-ta-cell.fi-table-cell-cor {
        display: none;
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell.fi-table-cell-empresas {
        flex-basis: 100%;
        flex-wrap: wrap;
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell.fi-table-cell-empresas .fi-ta-text {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 0.4rem;
    }

    /* Empresas: tocar na linha abre a Central; marcar várias fica para o
       computador. A data de criação (que a tabela só mostra na tela larga)
       não entra no cartão. */
    .fi-panel-painel .fi-ta-row:has(> .fi-table-cell-razao-social) > td.fi-ta-cell:is(.fi-ta-selection-cell, .fi-table-cell-created-at) {
        display: none;
    }

    /* ---- Históricos (Atividades, Eventos de autenticação) ---- */
    /* A faixa do dia. */
    .fi-panel-painel .fi-ta-table > tbody > tr.fi-ta-row:has(> td > .fi-ta-group-header) {
        display: block;
        min-height: 0;
        padding: 0;
    }
    .fi-panel-painel .fi-ta-table > tbody > tr.fi-ta-row:has(> td > .fi-ta-group-header)::after {
        content: none;
    }
    .fi-panel-painel .fi-ta-row > td:has(> .fi-ta-group-header) {
        display: block;
    }
    .fi-panel-painel .fi-ta-group-header {
        padding: 0.45rem 0.85rem;
        background-color: var(--cp-soft);
    }
    .fi-panel-painel .fi-ta-group-header h4 {
        font-size: 0.74rem;
        font-weight: 600;
        color: var(--cp-text);
    }
    /* A hora, no canto do cartão (a data está na faixa do dia). */
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell[data-hora] {
        order: 2;
        flex: none;
        margin-top: 0.15rem;
        margin-right: 0;
        color: var(--cp-muted);
        font-variant-numeric: tabular-nums;
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell[data-hora] > .fi-ta-col-wrp {
        display: none;
    }
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell[data-hora]::before {
        content: attr(data-hora);
        color: inherit;
    }
    /* A ação (ou o evento) é o título: o selo vira texto. */
    .fi-panel-painel .fi-ta-row > td.fi-ta-cell[data-icone] .fi-badge {
        justify-content: flex-start;
        min-width: 0;
        padding: 0;
        background: none;
        color: var(--cp-ink);
        font-size: 0.88rem;
        line-height: 1.3;
    }
    /* O módulo já vem no "Registro" ("Documento: Balancete"). */
    .fi-panel-painel .cp-historico .fi-ta-row > td.fi-ta-cell.fi-table-cell-log-name {
        display: none;
    }

    /* ---- Abas: um seletor (trilho cinza, a ativa em branco) ---- */
    .fi-panel-painel .fi-tabs,
    .dark .fi-panel-painel .fi-tabs {
        border: 0;
        border-radius: 0.85rem;
        background-color: rgb(var(--gray-200));
    }
    .dark .fi-panel-painel .fi-tabs,
    .fi-panel-painel.dark .fi-tabs {
        background-color: rgb(var(--gray-800));
    }
    .fi-panel-painel .fi-tabs-item {
        border-radius: 0.6rem;
    }
    .fi-panel-painel .fi-tabs-item:not(.fi-active):hover {
        background-color: transparent;
    }
    .fi-panel-painel .fi-tabs-item.fi-active {
        background-color: var(--cp-surface);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14);
    }
    .dark .fi-panel-painel .fi-tabs-item.fi-active,
    .fi-panel-painel.dark .fi-tabs-item.fi-active {
        background-color: rgb(var(--gray-700));
    }
}
/* No computador a coluna "Quando" já traz a data: sem a faixa do dia. */
@media (min-width: 900px) {
    .fi-panel-painel .cp-historico .fi-ta-row:has(> td > .fi-ta-group-header) {
        display: none;
    }
}

@media (max-width: 767px) {
    /* ---- Números do topo: os quatro numa linha, com rótulo curto ---- */
    .fi-panel-painel .cp-grid:has(> .cp-kpi) {
        grid-template-columns: none;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        gap: 0;
        overflow: hidden;
        border: 1px solid var(--cp-border);
        border-radius: 1rem;
        background: var(--cp-surface);
    }
    .fi-panel-painel .cp-grid > .cp-kpi {
        grid-column: auto;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        padding: 0.65rem 0.2rem 0.6rem;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        text-align: center;
    }
    .fi-panel-painel .cp-grid > .cp-kpi + .cp-kpi {
        border-left: 1px solid var(--cp-hair);
    }
    .fi-panel-painel .cp-kpi-icone,
    .fi-panel-painel .cp-kpi-legenda,
    .fi-panel-painel .cp-kpi-rotulo > span {
        display: none;
    }
    .fi-panel-painel .cp-kpi-textos {
        align-items: center;
        gap: 0.1rem;
        min-width: 0;
    }
    /* O número em cima, o nome embaixo. */
    .fi-panel-painel .cp-kpi-valor {
        order: -1;
        font-size: 1.15rem;
        line-height: 1.15;
        color: var(--cp-ink);
    }
    .fi-panel-painel .cp-kpi-warning .cp-kpi-valor {
        color: rgb(var(--warning-600));
    }
    .fi-panel-painel .cp-kpi-danger .cp-kpi-valor {
        color: rgb(var(--danger-600));
    }
    .fi-panel-painel .cp-kpi-rotulo {
        overflow: visible;
        color: var(--cp-muted);
        font-size: 0.65rem;
        font-weight: 500;
        line-height: 1.25;
        white-space: normal;
    }
    .fi-panel-painel .cp-kpi-rotulo::before {
        content: attr(data-curto);
    }
}

@media (max-width: 639px) {
    /* ---- Botões do topo ---- */
    /* O principal (Adicionar, Enviar e-mail em massa) ocupa a linha; os
       outros (Importar, Pastas padrão, Ajustes, Timeline…) ficam ao lado
       dele só com o ícone. Antes eram duas ou três fileiras de botões. */
    .fi-panel-painel .fi-header > div:has(> .fi-ac),
    .fi-panel-painel .fi-header .fi-ac {
        width: 100%;
    }
    .fi-panel-painel .fi-header .fi-ac {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5rem;
    }
    .fi-panel-painel .fi-header .fi-ac > .fi-btn:not(.fi-color-gray) {
        order: -1;
        flex: 1 1 0;
        min-width: 0;
    }
    .fi-panel-painel .fi-header .fi-ac > .fi-btn:not(.fi-color-gray) .fi-btn-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Dois botões com nome ou mais (Meu perfil): um por linha, inteiros. */
    .fi-panel-painel .fi-header .fi-ac:has(> .fi-btn:not(.fi-color-gray) ~ .fi-btn:not(.fi-color-gray)) {
        flex-wrap: wrap;
    }
    .fi-panel-painel .fi-header .fi-ac:has(> .fi-btn:not(.fi-color-gray) ~ .fi-btn:not(.fi-color-gray)) > .fi-btn:not(.fi-color-gray) {
        flex: 1 1 100%;
    }
    .fi-panel-painel .fi-header .fi-ac > .fi-btn.fi-color-gray:has(.fi-btn-icon),
    .fi-panel-painel .fi-header .fi-ac > .fi-dropdown > .fi-dropdown-trigger > .fi-btn.fi-color-gray:has(.fi-btn-icon) {
        position: relative;
        flex: none;
        gap: 0;
        width: 2.6rem;
        height: 2.6rem;
        min-height: 0;
        padding: 0;
        border-radius: 0.75rem;
    }
    .fi-panel-painel .fi-header .fi-ac > .fi-dropdown {
        flex: none;
    }
    /* O nome continua lá para o leitor de tela. */
    .fi-panel-painel .fi-header .fi-ac > .fi-btn.fi-color-gray:has(.fi-btn-icon) .fi-btn-label,
    .fi-panel-painel .fi-header .fi-ac > .fi-dropdown > .fi-dropdown-trigger > .fi-btn.fi-color-gray:has(.fi-btn-icon) .fi-btn-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .fi-panel-painel .fi-header .fi-ac > .fi-btn.fi-color-gray .fi-btn-icon,
    .fi-panel-painel .fi-header .fi-ac > .fi-dropdown > .fi-dropdown-trigger > .fi-btn.fi-color-gray .fi-btn-icon {
        width: 1.2rem;
        height: 1.2rem;
        margin: 0;
        color: var(--cp-text);
    }
    /* "Enviar documento" das listas: a barra de baixo já tem o Enviar. */
    .fi-panel-painel .fi-header .fi-ac > .cp-enviar-da-lista {
        display: none;
    }
    /* Com um botão de ícone ao lado do principal (Central da empresa, 15/10),
       o "Ver como fazer" desce para a linha de baixo: o principal não corta.
       (Um :has dentro de outro não vale no CSS: a regra inteira seria ignorada.) */
    .fi-panel-painel .fi-header .fi-ac:has(> .fi-btn.fi-color-gray .fi-btn-icon):has(> .fi-link) {
        flex-wrap: wrap;
    }
    .fi-panel-painel .fi-header .fi-ac:has(> .fi-btn.fi-color-gray .fi-btn-icon) > .fi-link {
        order: 1;
        flex-basis: 100%;
    }
    /* Sem botão principal, os ícones sobem para a linha do título. */
    .fi-panel-painel .fi-header:not(:has(.fi-ac > .fi-btn:not(.fi-color-gray, .cp-enviar-da-lista))) {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }
    .fi-panel-painel .fi-header:not(:has(.fi-ac > .fi-btn:not(.fi-color-gray, .cp-enviar-da-lista))) > div:first-child {
        flex: 1 1 0;
        min-width: 0;
    }
    .fi-panel-painel .fi-header:not(:has(.fi-ac > .fi-btn:not(.fi-color-gray, .cp-enviar-da-lista))) > div:has(> .fi-ac),
    .fi-panel-painel .fi-header:not(:has(.fi-ac > .fi-btn:not(.fi-color-gray, .cp-enviar-da-lista))) .fi-ac {
        flex: none;
        width: auto;
    }
}
/* Celular pequeno: o botão principal do topo sem o ícone, para o nome caber
   inteiro ao lado dos outros ("Enviar documento" na Central). */
@media (max-width: 379px) {
    .fi-panel-painel .fi-header .fi-ac:has(> .fi-color-gray, > .fi-dropdown) > .fi-btn:not(.fi-color-gray) .fi-btn-icon {
        display: none;
    }
    .fi-panel-painel .fi-header .fi-ac:has(> .fi-color-gray, > .fi-dropdown) > .fi-btn:not(.fi-color-gray) {
        padding-inline: 0.6rem;
    }
}

/* MENU ABERTO PERTO DO FIM DA TELA (30/09): o "⋮" da última linha e o filtro
   abrem para baixo e os últimos itens ficavam atrás da barra de navegação,
   que é fixa. Com um menu da página aberto, a barra desce e sai da frente;
   fechou o menu, ela volta. Vale para os dois painéis. (O menu fechado tem
   display:none posto pelo Alpine, ou x-cloak antes de ele iniciar.) */
@media (max-width: 1023px) {
    .cp-barra-inferior {
        transition: transform 0.18s ease;
    }
    body:has(.fi-main .fi-dropdown-panel:not([style*="display: none"]):not([x-cloak])) .cp-barra-inferior {
        transform: translateY(115%);
    }
}


/* =========================================================================
   23. ASSINATURA DO ESCRITÓRIO (30/09) — a faixa de aviso no topo do painel
   ("Minha assinatura" foi refeita em 08/10: seção 30)
   ========================================================================= */
/* Faixa no topo do painel: teste acabando, atraso, cancelada, modo master. */
.cp-faixa-conta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.75rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    text-align: center;
    color: var(--cp-ink);
    background-color: rgba(var(--info-500), 0.12);
    border-bottom: 1px solid rgba(var(--info-500), 0.3);
}
.cp-faixa-conta a {
    font-weight: 600;
    color: var(--cp-primary);
    text-decoration: underline;
}
.cp-faixa-conta.cp-faixa-alerta {
    background-color: rgba(var(--warning-500), 0.16);
    border-bottom-color: rgba(var(--warning-500), 0.45);
}
.cp-faixa-conta.cp-faixa-perigo {
    background-color: rgba(var(--danger-500), 0.12);
    border-bottom-color: rgba(var(--danger-500), 0.4);
}
.cp-faixa-conta.cp-faixa-master {
    background-color: #1d2230;
    border-bottom-color: #1d2230;
    color: #fff;
}
.cp-faixa-conta.cp-faixa-master a,
.cp-faixa-conta.cp-faixa-master button {
    color: #fbbf24;
    font-weight: 600;
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: inherit;
}


/* =========================================================================
   24. PAINEL MASTER (30/09) — gráfico de colunas da receita
   (.cp-grafico-colunas, e não .cp-colunas: este nome é a tabela de colunas do
   popup "Importar", e as regras do gráfico a desmontavam — corrigido 05/10)
   ========================================================================= */
.cp-grafico-colunas {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: end;
    gap: 0.4rem;
    height: 15rem;
    padding-top: 0.5rem;
}
.cp-coluna {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    height: 100%;
    min-width: 0;
}
.cp-coluna-barra {
    width: 100%;
    max-width: 2.5rem;
    border-radius: 0.35rem 0.35rem 0 0;
    background-color: var(--cp-esc);
    opacity: 0.9;
}
.cp-coluna:hover .cp-coluna-barra { opacity: 1; }
.cp-coluna-valor {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cp-ink);
    white-space: nowrap;
}
.cp-coluna-rotulo {
    font-size: 0.7rem;
    color: var(--cp-muted);
    white-space: nowrap;
}
@media (max-width: 639px) {
    .cp-coluna-valor { display: none; }
    .cp-coluna-rotulo { font-size: 0.6rem; }
}
.cp-lista-item .cp-pilula { flex-shrink: 0; }

/* =========================================================================
   25. PAINEL MASTER — PÓS-VENDA (01/10): quadro de colunas por etapa
   ========================================================================= */
.cp-quadro-filtro {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--cp-text);
    cursor: pointer;
}
/* As etapas quebram em linhas (nada de rolar para o lado, como nas tabelas). */
.cp-quadro {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 0.85rem;
    align-items: start;
}
.cp-quadro-coluna {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.85rem;
    background-color: var(--cp-soft);
    border: 1px solid var(--cp-border);
    border-top: 3px solid var(--cp-etapa);
    border-radius: var(--cp-radius);
}
.cp-quadro-cabeca {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.cp-quadro-cabeca h2 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cp-ink);
}
.cp-quadro-cabeca p {
    font-size: 0.75rem;
    color: var(--cp-muted);
}
.cp-quadro-contagem {
    flex-shrink: 0;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background-color: var(--cp-etapa);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}
.cp-quadro-contagem small {
    font-weight: 500;
    opacity: 0.85;
}
.cp-quadro-fazer {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--cp-text);
}
.cp-quadro-cartoes {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.cp-quadro-cartao {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem;
    background-color: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-left: 3px solid var(--cp-etapa);
    border-radius: var(--cp-radius-sm);
}
.cp-quadro-cartao.cp-quadro-feito {
    border-left-color: rgb(var(--success-500));
    opacity: 0.8;
}
.cp-quadro-nome {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--cp-ink);
}
.cp-quadro-nome:hover { color: var(--cp-primary); text-decoration: underline; }
.cp-quadro-sub {
    font-size: 0.78rem;
    color: var(--cp-muted);
}
.cp-quadro-sinais {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.cp-quadro-sinais li {
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background-color: var(--cp-soft);
    font-size: 0.72rem;
    color: var(--cp-text);
}
.cp-quadro-sinais li.cp-quadro-alerta {
    background-color: rgba(var(--warning-500), 0.16);
    color: rgb(var(--warning-700));
}
.dark .cp-quadro-sinais li.cp-quadro-alerta { color: rgb(var(--warning-400)); }
.cp-quadro-contato {
    display: flex;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--cp-text);
}
.cp-quadro-contato svg {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: rgb(var(--success-600));
}
.cp-quadro-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
}
.cp-quadro-cartao > .cp-pilula { align-self: flex-start; }

/* =========================================================================
   26. PAINEL MASTER — o que faltava do master antigo (01/10): resumo e
   atalhos da lista de contas, quadro do pós-venda com filtros, conferência
   com a Pagar.me, prévia JSON da automação e as listas "top" da visão geral.
   ========================================================================= */
.cp-resumo-contas {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cp-atalhos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
.cp-atalhos-rotulo {
    margin-right: 0.15rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cp-muted);
}
.cp-atalho {
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--cp-border);
    border-radius: 999px;
    background-color: var(--cp-surface);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--cp-text);
    cursor: pointer;
}
.cp-atalho:hover {
    border-color: var(--cp-primary);
    color: var(--cp-primary);
}
.cp-atalho-limpar {
    border-style: dashed;
    color: rgb(var(--danger-600));
}
.cp-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.6rem;
}
.cp-numeros > div {
    padding: 0.6rem 0.75rem;
    border-radius: var(--cp-radius-sm);
    background-color: var(--cp-soft);
}
.cp-numeros dt {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--cp-muted);
}
.cp-numeros dd {
    display: flex;
    flex-direction: column;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cp-ink);
}
.cp-numeros dd small {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--cp-muted);
}
.cp-numeros > .cp-numeros-alerta {
    background-color: rgba(var(--danger-500), 0.08);
}
.cp-numeros > .cp-numeros-alerta dd { color: rgb(var(--danger-600)); }
.dark .cp-numeros > .cp-numeros-alerta dd { color: rgb(var(--danger-400)); }
.cp-resumo-graficos {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}
@media (min-width: 1280px) {
    .cp-resumo-graficos { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.cp-resumo-titulo {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cp-ink);
}
.cp-grafico-colunas.cp-grafico-colunas-baixas { height: 9rem; }
.cp-coluna:nth-child(even) .cp-coluna-rotulo-alterno { visibility: hidden; }
.cp-barra-situacao-success { background-color: rgb(var(--success-500)); }
.cp-barra-situacao-info { background-color: rgb(var(--info-500)); }
.cp-barra-situacao-warning { background-color: rgb(var(--warning-500)); }
.cp-barra-situacao-danger { background-color: rgb(var(--danger-500)); }
.cp-barra-situacao-primary { background-color: rgb(var(--primary-500)); }
.cp-barra-situacao-gray { background-color: rgb(var(--gray-400)); }

/* Avisos de uma linha (conferência com a Pagar.me) */
.cp-aviso-linha {
    padding: 0.55rem 0.8rem;
    border-radius: var(--cp-radius-sm);
    font-size: 0.85rem;
    line-height: 1.45;
}
.cp-aviso-linha-atencao { background-color: rgba(var(--warning-500), 0.14); color: rgb(var(--warning-800)); }
.cp-aviso-linha-perigo { background-color: rgba(var(--danger-500), 0.1); color: rgb(var(--danger-700)); }
.cp-aviso-linha-ok { background-color: rgba(var(--success-500), 0.12); color: rgb(var(--success-700)); }
.dark .cp-aviso-linha-atencao { color: rgb(var(--warning-300)); }
.dark .cp-aviso-linha-perigo { color: rgb(var(--danger-300)); }
.dark .cp-aviso-linha-ok { color: rgb(var(--success-300)); }

/* Tabela simples dentro de um popup (quebra em vez de alargar) */
.cp-tabela-simples-rolagem { overflow-x: auto; }
.cp-tabela-simples {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.cp-tabela-simples th {
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--cp-border);
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--cp-muted);
}
.cp-tabela-simples td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--cp-border);
    color: var(--cp-text);
    vertical-align: top;
}
.cp-tabela-simples code { font-size: 0.75rem; }

/* Prévia do evento da automação */
.cp-json {
    max-height: 22rem;
    overflow: auto;
    padding: 0.75rem;
    border-radius: var(--cp-radius-sm);
    background-color: rgb(var(--gray-900));
    color: rgb(var(--success-300));
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Pós-venda: barra de filtros, resumo do funil e o que o cartão ganhou */
.cp-quadro-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1.25rem;
}
.cp-quadro-campo {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cp-muted);
}
.cp-quadro-campo select {
    min-width: 11rem;
    padding: 0.35rem 2rem 0.35rem 0.6rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-sm);
    background-color: var(--cp-surface);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--cp-ink);
}
.cp-quadro-ocultas {
    padding: 0 0.45rem;
    border-radius: 999px;
    background-color: rgb(var(--danger-500));
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}
.cp-quadro-resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
.cp-quadro-resumo-etapa {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--cp-border);
    border-left: 3px solid var(--cp-etapa);
    border-radius: var(--cp-radius-sm);
    background-color: var(--cp-surface);
    font-size: 0.75rem;
    color: var(--cp-text);
}
.cp-quadro-resumo-etapa b { color: var(--cp-ink); }
.cp-quadro-cartao.cp-quadro-oculta {
    border-style: dashed;
    border-left-style: solid;
    border-left-color: rgb(var(--gray-400));
    opacity: 0.75;
}
.cp-quadro-selo-oculta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cp-muted);
}
.cp-quadro-selo-oculta svg { width: 0.85rem; height: 0.85rem; }
.cp-quadro-produtos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.cp-quadro-produtos li {
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background-color: rgba(var(--info-500), 0.14);
    font-size: 0.7rem;
    font-weight: 600;
    color: rgb(var(--info-700));
}
.dark .cp-quadro-produtos li { color: rgb(var(--info-300)); }
.cp-quadro-produtos li.cp-quadro-sem-produto {
    background-color: var(--cp-soft);
    font-weight: 400;
    font-style: italic;
    color: var(--cp-muted);
}
.cp-quadro-anotacao {
    padding: 0.4rem 0.55rem;
    border-left: 2px solid rgb(var(--warning-400));
    border-radius: 0 var(--cp-radius-sm) var(--cp-radius-sm) 0;
    background-color: rgba(var(--warning-500), 0.07);
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--cp-text);
}
.cp-quadro-acoes-2 { margin-top: -0.2rem; }

/* Uso das contas: ranking de engajamento */
.cp-ranking td:first-child { width: 2rem; color: var(--cp-muted); }
.cp-ranking .cp-quadro-nome { display: inline-block; }
.cp-ranking-pontos { min-width: 7rem; }
.cp-ranking-pontos .cp-barra { margin-top: 0.3rem; }

/* Tabelas do master: a mesma rede de segurança do painel da equipe (seção das
   tabelas que cabem) — se a tabela não couber, a coluna dos botões fica presa
   à direita e a tabela rola por baixo dela; os botões nunca saem da tela. */
.fi-panel-master .fi-ta-table > thead > tr > th.fi-ta-actions-header-cell:last-child,
.fi-panel-master .fi-ta-row > td.fi-ta-actions-cell:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    background-color: var(--cp-surface);
    background-image: linear-gradient(var(--cp-linha, transparent), var(--cp-linha, transparent));
}
.fi-panel-master .fi-ta-row:hover {
    --cp-linha: var(--cp-soft);
}
.fi-panel-master .fi-ta-row > td.fi-ta-actions-cell:last-child:focus-within,
.fi-panel-master .fi-ta-row > td.fi-ta-actions-cell:last-child:has(.fi-dropdown-panel:not([style*="display: none"])) {
    z-index: 3;
}
.fi-panel-master {
    --cp-sombra-presa: rgba(15, 23, 42, 0.28);
}
.dark .fi-panel-master {
    --cp-sombra-presa: rgba(0, 0, 0, 0.7);
}
@supports (animation-timeline: scroll()) {
    .fi-panel-master .fi-ta-content {
        scroll-timeline: --cp-rolagem-tabela x;
    }
    .fi-panel-master .fi-ta-table > thead > tr > th.fi-ta-actions-header-cell:last-child,
    .fi-panel-master .fi-ta-row > td.fi-ta-actions-cell:last-child {
        animation: cp-sombra-acoes linear both;
        animation-timeline: --cp-rolagem-tabela;
    }
}

/* =========================================================================
   27. PAINEL MASTER — VISÃO GERAL (02/10, opção 1 "Resumo financeiro" escolhida
   pelo usuário): quadro principal com MRR / recebido / assinantes ao lado da
   linha do recebido por mês; plano + "Pede atenção"; a receber / atrasados /
   testes; origem das contas e contas novas.
   ========================================================================= */
.cp-vg-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}
.cp-vg-hoje {
    font-size: 0.85rem;
    color: var(--cp-muted);
}
.cp-vg-filtro {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cp-muted);
}
.cp-vg-filtro select {
    min-width: 13rem;
    padding: 0.4rem 2rem 0.4rem 0.7rem;
    border: 1px solid var(--cp-border-strong);
    border-radius: var(--cp-radius-sm);
    background-color: var(--cp-surface);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cp-ink);
}

/* Títulos e textos dos cartões desta tela */
.cp-vg-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    margin-bottom: 1rem;
}
.cp-vg-titulo {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cp-ink);
}
.cp-vg-sub {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--cp-muted);
}
.cp-vg-sobe { font-weight: 600; color: rgb(var(--success-700)); }
.cp-vg-desce { font-weight: 600; color: rgb(var(--danger-700)); }
.dark .cp-vg-sobe { color: rgb(var(--success-400)); }
.dark .cp-vg-desce { color: rgb(var(--danger-400)); }
.cp-vg-delta {
    display: inline-block;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-weight: 700;
}
.cp-vg-delta-sobe { background-color: rgba(var(--success-500), 0.14); color: rgb(var(--success-700)); }
.cp-vg-delta-desce { background-color: rgba(var(--danger-500), 0.12); color: rgb(var(--danger-700)); }
.dark .cp-vg-delta-sobe { color: rgb(var(--success-400)); }
.dark .cp-vg-delta-desce { color: rgb(var(--danger-400)); }

/* Quadro principal: números à esquerda, linha à direita (empilha abaixo de 1280px) */
.cp-card.cp-vg-hero {
    display: grid;
    gap: 1.75rem;
    padding: 1.5rem;
}
.cp-vg-hero-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1.25rem 1.5rem;
}
.cp-vg-hero-bloco {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.cp-vg-hero-rotulo {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cp-muted);
}
.cp-vg-hero-valor {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--cp-ink);
    font-variant-numeric: tabular-nums;
}
.cp-vg-hero-valor-menor { font-size: 1.55rem; letter-spacing: -0.01em; }
.cp-vg-hero-nota {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--cp-muted);
}
.cp-vg-hero-graf {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}
.cp-vg-hero-graf .cp-vg-cab { margin-bottom: 0; }
@media (min-width: 1280px) {
    .cp-card.cp-vg-hero { grid-template-columns: 17.5rem minmax(0, 1fr); gap: 2rem; }
    .cp-vg-hero-numeros { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; }
    .cp-vg-hero-bloco + .cp-vg-hero-bloco { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--cp-hair); }
}
@media (max-width: 639px) {
    .cp-card.cp-vg-hero { padding: 1.1rem; }
    .cp-vg-hero-valor { font-size: 2.1rem; }
    .cp-vg-hero-valor-menor { font-size: 1.45rem; }
}

/* Linha do recebido por mês: grade discreta, escala à esquerda, média tracejada,
   mês atual tracejado; rótulo só no maior mês e no atual; dica ao passar o mouse */
.cp-vg-linha {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.6rem;
    padding-top: 1.25rem;
}
.cp-vg-linha-eixo {
    position: relative;
    height: 13.75rem;
    min-width: 3.6rem;
    font-size: 0.7rem;
    color: var(--cp-muted);
    font-variant-numeric: tabular-nums;
}
.cp-vg-linha-eixo span {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    white-space: nowrap;
}
.cp-vg-linha-plot {
    position: relative;
    height: 13.75rem;
}
.cp-vg-linha-plot svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.cp-vg-linha-grade { stroke: var(--cp-hair); stroke-width: 1; }
.cp-vg-linha-base { stroke: var(--cp-border-strong); stroke-width: 1; }
.cp-vg-linha-media { stroke: rgb(var(--gray-400)); stroke-width: 1.5; stroke-dasharray: 5 4; }
.cp-vg-linha-area { fill: var(--cp-esc); fill-opacity: 0.08; stroke: none; }
.cp-vg-linha-traco { fill: none; stroke: var(--cp-esc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cp-vg-linha-parcial { stroke-dasharray: 5 4; }
/* À esquerda: na ponta direita fica o mês em andamento e o rótulo dele */
.cp-vg-linha-media-rotulo {
    position: absolute;
    left: 0;
    z-index: 1;
    padding: 0 0.3rem;
    transform: translateY(-120%);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cp-muted);
    background-color: var(--cp-surface);
    pointer-events: none;
}
.cp-vg-linha-marca {
    position: absolute;
    z-index: 1;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border: 2px solid var(--cp-surface);
    border-radius: 50%;
    background-color: var(--cp-esc);
    pointer-events: none;
}
.cp-vg-linha-marca-parcial {
    border-color: var(--cp-esc);
    background-color: var(--cp-surface);
}
.cp-vg-linha-valor {
    position: absolute;
    z-index: 1;
    padding: 0 0.2rem;
    border-radius: 3px;
    background-color: var(--cp-surface);
    transform: translate(-50%, -170%);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--cp-ink);
    pointer-events: none;
}
.cp-vg-linha-valor-ini { transform: translate(0, -170%); }
.cp-vg-linha-valor-fim { transform: translate(-100%, -190%); }
.cp-vg-linha-zona {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    transform: translateX(-50%);
    outline: none;
    cursor: default;
}
.cp-vg-linha-zona::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 1px solid var(--cp-border-strong);
    opacity: 0;
}
.cp-vg-linha-zona-ponto {
    position: absolute;
    left: 50%;
    top: var(--y);
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border: 2px solid var(--cp-surface);
    border-radius: 50%;
    background-color: var(--cp-esc);
    opacity: 0;
}
.cp-vg-linha-dica {
    position: absolute;
    top: 0;
    left: calc(50% + 0.5rem);
    display: none;
    flex-direction: column;
    padding: 0.35rem 0.6rem;
    border-radius: var(--cp-radius-sm);
    background-color: rgb(var(--gray-900));
    color: #fff;
    font-size: 0.72rem;
    white-space: nowrap;
    pointer-events: none;
}
.cp-vg-linha-dica b { font-size: 0.85rem; }
.dark .cp-vg-linha-dica { background-color: rgb(var(--gray-100)); color: rgb(var(--gray-900)); }
.cp-vg-linha-zona-fim .cp-vg-linha-dica { left: auto; right: calc(50% + 0.5rem); }
.cp-vg-linha-zona:hover::before,
.cp-vg-linha-zona:focus-visible::before,
.cp-vg-linha-zona:hover .cp-vg-linha-zona-ponto,
.cp-vg-linha-zona:focus-visible .cp-vg-linha-zona-ponto { opacity: 1; }
.cp-vg-linha-zona:hover .cp-vg-linha-dica,
.cp-vg-linha-zona:focus-visible .cp-vg-linha-dica { display: flex; }
.cp-vg-linha-meses {
    grid-column: 2;
    position: relative;
    height: 1rem;
    font-size: 0.7rem;
    color: var(--cp-muted);
}
.cp-vg-linha-meses span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}
.cp-vg-linha-meses span:first-child { transform: none; }
.cp-vg-linha-meses span:last-child { transform: translateX(-100%); }
@media (max-width: 639px) {
    .cp-vg-linha-eixo,
    .cp-vg-linha-plot { height: 11rem; }
    /* No celular, só 4 meses na régua (o 1º, o 4º, o 7º e o atual) */
    .cp-vg-linha-meses span { display: none; }
    .cp-vg-linha-meses span:first-child,
    .cp-vg-linha-meses span:nth-child(4),
    .cp-vg-linha-meses span:nth-child(7),
    .cp-vg-linha-meses span:last-child { display: block; }
}

/* Fileiras: plano + atenção (3:2) e a receber / atrasados / testes (1:1:1) */
.cp-vg-dupla,
.cp-vg-trio {
    display: grid;
    gap: 1rem;
}
@media (min-width: 1280px) {
    .cp-vg-dupla { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .cp-vg-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Barrinhas (receita por plano, origem das contas) */
.cp-vg-barrinha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.35rem;
}
.cp-vg-barrinha + .cp-vg-barrinha { margin-top: 1rem; }
.cp-vg-barrinha-nome {
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--cp-ink);
}
.cp-vg-barrinha-pct { font-size: 0.75rem; color: var(--cp-muted); font-variant-numeric: tabular-nums; }
.cp-vg-barrinha-valor { font-size: 0.875rem; font-weight: 600; color: var(--cp-ink); font-variant-numeric: tabular-nums; }
.cp-vg-barrinha-trilho {
    grid-column: 1 / -1;
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--cp-hair);
}
.cp-vg-barrinha-trilho > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background-color: var(--cp-esc);
}

/* Pede atenção */
.cp-vg-atencao {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--cp-hair);
    font-size: 0.85rem;
    color: var(--cp-ink);
}
.cp-vg-atencao:last-child { border-bottom: 0; }
.cp-vg-atencao:hover .cp-vg-atencao-rotulo { color: var(--cp-primary); }
.cp-vg-atencao-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.65rem;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
}
.cp-vg-atencao-perigo { background-color: rgb(var(--danger-100)); color: rgb(var(--danger-700)); }
.cp-vg-atencao-atencao { background-color: rgb(var(--warning-100)); color: rgb(var(--warning-800)); }
.dark .cp-vg-atencao-perigo { background-color: rgba(var(--danger-500), 0.2); color: rgb(var(--danger-300)); }
.dark .cp-vg-atencao-atencao { background-color: rgba(var(--warning-500), 0.2); color: rgb(var(--warning-300)); }
.cp-vg-atencao-rotulo { flex: 1 1 auto; }
.cp-vg-atencao-seta { flex-shrink: 0; width: 1rem; height: 1rem; color: var(--cp-muted); }
.cp-vg-tudo-certo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--cp-text);
}
.cp-vg-tudo-certo svg { flex-shrink: 0; width: 1.15rem; height: 1.15rem; color: rgb(var(--success-600)); }

/* A receber / atrasados / testes / contas novas */
.cp-vg-total {
    margin-top: 0.3rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cp-ink);
    font-variant-numeric: tabular-nums;
}
.cp-vg-lista { margin-top: 0.6rem; }
.cp-vg-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--cp-hair);
}
.cp-vg-item-txt {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.cp-vg-item-nome {
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--cp-ink);
}
.cp-vg-item-nome:hover { color: var(--cp-primary); text-decoration: underline; }
.cp-vg-item-sub { font-size: 0.75rem; color: var(--cp-muted); }
.cp-vg-item-fim {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--cp-ink);
    font-variant-numeric: tabular-nums;
}
.cp-vg-item .cp-pilula { flex-shrink: 0; }
.cp-vg-whats {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    background-color: rgba(var(--success-500), 0.1);
    color: rgb(var(--success-700));
}
.cp-vg-whats:hover { background-color: rgba(var(--success-500), 0.2); }
.dark .cp-vg-whats { color: rgb(var(--success-400)); }
.cp-vg-whats svg { width: 1.15rem; height: 1.15rem; }

/* Abas da origem das contas */
.cp-vg-cab-abas { align-items: center; row-gap: 0.6rem; }
.cp-vg-abas {
    display: inline-flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 0.25rem;
    padding: 0.2rem;
    border-radius: var(--cp-radius-sm);
    background-color: var(--cp-soft);
}
.cp-vg-aba {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.25rem 0.6rem;
    border-radius: calc(var(--cp-radius-sm) - 2px);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cp-muted);
}
.cp-vg-aba-ativa {
    background-color: var(--cp-surface);
    color: var(--cp-ink);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* =========================================================================
   28. PAINEL MASTER — PÓS-VENDA NAS 5 ETAPAS DO MASTER ANTIGO (02/10): o foco
   do contato da etapa e a última atualização, no popup "Anotação e produtos".
   ========================================================================= */
.cp-crm-foco {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.4rem;
    padding: 0.65rem 0.85rem;
    border-left: 3px solid var(--cp-etapa, var(--cp-primary));
    border-radius: var(--cp-radius-sm);
    background-color: var(--cp-soft);
    text-align: left;
}
.cp-crm-foco small { font-size: 0.72rem; font-weight: 600; color: var(--cp-muted); }
.cp-crm-foco b { font-size: 0.85rem; font-weight: 600; color: var(--cp-ink); }
.cp-crm-foco span { font-size: 0.8rem; color: var(--cp-muted); }
.cp-crm-atualizado { font-size: 0.75rem; color: var(--cp-muted); }
/* As cinco etapas lado a lado em tela larga (no meio, o quadro quebra em linhas como antes). */
@media (min-width: 1280px) {
    .cp-quadro.cp-quadro-cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}


/* =========================================================================
   29. TELAS DE ENTRADA NO VISUAL DO SITE DE PLANOS (05/10) — login, "Esqueci
   minha senha" e nova senha, nos dois painéis: as cores, o topo, o cartão,
   os campos, os botões e o rodapé de resources/views/site/layout.blade.php.
   Sempre CLARAS, como o site (o "dark" sai na view entrada-cabeca). Tudo
   preso ao topo .cp-entrada-topo, que só estas telas recebem.
   ========================================================================= */
.cp-entrada-topo,
.cp-entrada-topo ~ .fi-simple-layout {
    --cp-site-fundo: #f4f6fb;
    --cp-site-borda: #e3e7ef;
    --cp-site-borda-forte: #cfd6e3;
    --cp-site-tinta: #151a2d;
    --cp-site-texto: #454b5a;
    --cp-site-suave: #6b7385;
    --cp-site-primaria: #0030c6;
    --cp-site-primaria-escura: #00249a;
    --cp-site-primaria-suave: #e8edfd;
}
/* O topo fica por cima do fundo (não empurra a página para baixo da tela). */
.cp-entrada-topo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 20px 16px;
}
.cp-entrada-marca {
    display: inline-flex;
    text-decoration: none;
}
.cp-entrada-marca .cp-marca-nome {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--cp-site-tinta);
}
.cp-entrada-marca .cp-marca-nome b,
.cp-entrada-marca .cp-marca-simbolo {
    color: var(--cp-site-primaria);
}
.cp-entrada-topo-link {
    padding: 8px 14px;
    border: 1px solid var(--cp-site-borda-forte);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    color: var(--cp-site-tinta);
}
.cp-entrada-topo-link:hover,
.cp-entrada-topo-link:focus-visible {
    border-color: var(--cp-site-primaria);
    color: var(--cp-site-primaria);
}

.cp-entrada-topo ~ .fi-simple-layout {
    padding-top: 80px; /* a altura do topo */
    background-color: var(--cp-site-fundo);
    color: var(--cp-site-texto);
}
/* O cartão: borda fina e cantos de 14px, como os cartões dos planos. */
.cp-entrada-topo ~ .fi-simple-layout .fi-simple-main {
    margin-block: 24px 40px;
    border: 1px solid var(--cp-site-borda);
    border-radius: 14px;
    box-shadow: 0 12px 32px -22px rgba(0, 48, 198, 0.35);
}
/* A marca já está no topo: no cartão, só o título. */
.cp-entrada-topo ~ .fi-simple-layout .fi-simple-header .fi-logo {
    display: none;
}
.cp-entrada-topo ~ .fi-simple-layout .fi-simple-header-heading {
    font-size: 26px;
    letter-spacing: -0.02em;
    color: var(--cp-site-tinta);
}
.cp-entrada-topo ~ .fi-simple-layout .fi-simple-header-subheading {
    color: var(--cp-site-suave);
}
.cp-entrada-topo ~ .fi-simple-layout .fi-fo-field-wrp-label span {
    color: var(--cp-site-tinta);
}
/* Campos e botões com as medidas do formulário de assinatura. */
.cp-entrada-topo ~ .fi-simple-layout .fi-input-wrp {
    border-radius: 10px;
}
.cp-entrada-topo ~ .fi-simple-layout .fi-input {
    padding-block: 0.7rem;
    font-size: 15px;
}
.cp-entrada-topo ~ .fi-simple-layout .fi-form-actions .fi-btn {
    padding-block: 13px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
}
.cp-entrada-topo ~ .fi-simple-layout .fi-form-actions .fi-btn.fi-color-primary {
    background-color: var(--cp-site-primaria);
}
.cp-entrada-topo ~ .fi-simple-layout .fi-form-actions .fi-btn.fi-color-primary:hover {
    background-color: var(--cp-site-primaria-escura);
}

/* Embaixo do login: o caminho para os planos de quem ainda não tem conta. */
.cp-entrada-topo ~ .fi-simple-layout .cp-entrada-sem-conta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}
.cp-entrada-topo ~ .fi-simple-layout .cp-entrada-divisor {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 14px;
    color: var(--cp-site-suave);
}
.cp-entrada-topo ~ .fi-simple-layout .cp-entrada-divisor::before,
.cp-entrada-topo ~ .fi-simple-layout .cp-entrada-divisor::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--cp-site-borda);
}
.cp-entrada-topo ~ .fi-simple-layout .cp-entrada-botao-claro {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 12px 18px;
    border-radius: 10px;
    background-color: var(--cp-site-primaria-suave);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    color: var(--cp-site-primaria);
}
.cp-entrada-topo ~ .fi-simple-layout .cp-entrada-botao-claro:hover,
.cp-entrada-topo ~ .fi-simple-layout .cp-entrada-botao-claro:focus-visible {
    filter: brightness(0.97);
}
.cp-entrada-topo ~ .fi-simple-layout .cp-entrada-nota {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cp-site-suave);
}

.cp-entrada-rodape {
    padding: 8px 16px 32px;
    text-align: center;
    font-size: 13px;
    color: var(--cp-site-suave);
}
.cp-entrada-rodape-links {
    margin-top: 6px;
}
.cp-entrada-rodape-links a {
    text-decoration: underline;
    color: inherit;
}
.cp-entrada-rodape-links a:hover {
    color: var(--cp-site-primaria);
}

/* Celular: o cartão com margem dos lados e cantos inteiros (o Filament o
   encosta nas bordas da tela). */
@media (max-width: 639px) {
    .cp-entrada-topo {
        padding-block: 16px;
    }
    .cp-entrada-topo ~ .fi-simple-layout {
        padding-top: 72px;
    }
    .cp-entrada-topo ~ .fi-simple-layout .fi-simple-main {
        width: calc(100% - 32px);
        margin-block: 12px 28px;
        padding: 32px 20px;
    }
    .cp-entrada-topo ~ .fi-simple-layout .fi-simple-header-heading {
        font-size: 22px;
    }
}


/* =========================================================================
   30. MINHA ASSINATURA E TROCAR DE PLANO (08/10) — no nível da página de
   pagamento: avisos no topo, o plano com o período e a próxima cobrança, o
   cartão, o uso, as faturas e os dados de cobrança; a troca de plano em
   cartões com o resumo ao lado. Tudo pelos tokens --cp-* (claro e escuro).
   ========================================================================= */
.ma {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    min-width: 0;
    --ma-raio: 14px;
    --ma-sucesso: rgb(var(--success-600));
    --ma-sucesso-fundo: rgba(var(--success-500), 0.12);
    --ma-alerta-cor: rgb(var(--warning-700));
    --ma-alerta-fundo: rgba(var(--warning-500), 0.12);
    --ma-perigo-cor: rgb(var(--danger-700));
    --ma-perigo-fundo: rgba(var(--danger-500), 0.09);
    --ma-cartao-cc: #1d2230;
}
.dark .ma {
    --ma-sucesso: rgb(var(--success-400));
    --ma-alerta-cor: rgb(var(--warning-300));
    --ma-perigo-cor: rgb(var(--danger-300));
    --ma-cartao-cc: #2a3350;
}
.ma .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ma-cartao {
    min-width: 0;
    padding: 1.375rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--ma-raio);
    background-color: var(--cp-surface);
}
.ma-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.875rem;
}
.ma-cab h2 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--cp-ink); }
.ma-rot {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cp-muted);
}
.ma-nota { margin: 0.875rem 0 0; font-size: 0.78rem; color: var(--cp-muted); }
.ma-centro { text-align: center; }
.ma-link { font-size: 0.85rem; font-weight: 600; color: var(--cp-primary); text-decoration: none; }
.ma-link:hover { text-decoration: underline; }
.ma-vazio { margin: 0; color: var(--cp-muted); }
.ma-voltar { align-self: flex-start; font-size: 0.85rem; font-weight: 500; color: var(--cp-primary); text-decoration: none; }
.ma-voltar:hover { text-decoration: underline; }

/* Botões próprios (links que levam a outra página) */
.ma-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.625rem;
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 10px;
    background-color: var(--cp-primary);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.ma-botao:hover { filter: brightness(0.92); }
.ma-botao[disabled] { cursor: not-allowed; opacity: 0.55; filter: none; }
.ma-botao-claro { border: 1px solid var(--cp-border-strong); background-color: var(--cp-surface); color: var(--cp-ink); }
.ma-botao-claro:hover { border-color: var(--cp-primary); color: var(--cp-primary); filter: none; }
.ma-botao-cheio { width: 100%; min-height: 3rem; font-size: 0.95rem; }

/* Pílulas de situação */
.ma-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    background-color: var(--cp-soft);
    color: var(--cp-text);
}
.ma-pill i { width: 7px; height: 7px; border-radius: 50%; background-color: currentColor; }
.ma-pill-success { background-color: var(--ma-sucesso-fundo); color: var(--ma-sucesso); }
.ma-pill-warning { background-color: var(--ma-alerta-fundo); color: var(--ma-alerta-cor); }
.ma-pill-danger { background-color: var(--ma-perigo-fundo); color: var(--ma-perigo-cor); }
.ma-pill-info, .ma-pill-primary { background-color: var(--cp-primary-soft); color: var(--cp-primary); }
.ma-pill-gray i { display: none; }

/* Avisos do topo */
.ma-alerta {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1.125rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--ma-raio);
}
@media (max-width: 899px) {
    .ma-alerta { grid-template-columns: 2.75rem minmax(0, 1fr); }
    .ma-alerta-acoes { grid-column: 1 / -1; }
}
.ma-alerta h2 { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--cp-ink); }
.ma-alerta p { margin: 0.15rem 0 0; font-size: 0.875rem; }
.ma-alerta-icone { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background-color: var(--cp-surface); }
.ma-alerta-icone svg { width: 1.375rem; height: 1.375rem; }
.ma-alerta-azul { border-color: rgba(var(--primary-500), 0.25); background-color: var(--cp-primary-soft); }
.ma-alerta-azul .ma-alerta-icone { color: var(--cp-primary); }
.ma-alerta-ambar { border-color: rgba(var(--warning-500), 0.35); background-color: var(--ma-alerta-fundo); }
.ma-alerta-ambar .ma-alerta-icone { color: var(--ma-alerta-cor); }
.ma-alerta-perigo { border-color: rgba(var(--danger-500), 0.3); background-color: var(--ma-perigo-fundo); }
.ma-alerta-perigo .ma-alerta-icone { color: var(--ma-perigo-cor); }
.ma-alerta-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ma-alerta-valor { margin-top: 0.5rem !important; font-size: 1.5rem !important; font-weight: 700; color: var(--cp-ink); }
.ma-alerta-valor span { margin-left: 0.375rem; font-size: 0.82rem; font-weight: 500; color: var(--cp-muted); }
.ma-alerta-nota { color: var(--cp-muted); }
.ma .ma-calma { color: var(--ma-sucesso); font-weight: 500; }

/* O plano, o período e a próxima cobrança */
.ma-plano { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.375rem; align-items: stretch; }
@media (max-width: 1023px) { .ma-plano { grid-template-columns: minmax(0, 1fr); } }
.ma-plano-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; margin: 0.25rem 0 0.125rem; }
.ma-plano-nome strong { font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--cp-ink); }
.ma-preco { margin: 0; font-size: 0.95rem; color: var(--cp-text); }
.ma-preco b { color: var(--cp-ink); }
.ma-periodo { margin-top: 1.125rem; }
.ma-periodo-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; margin-bottom: 0.375rem; font-size: 0.82rem; color: var(--cp-muted); }
.ma-periodo-topo b { font-weight: 600; color: var(--cp-ink); }
.ma-trilho { height: 8px; overflow: hidden; border-radius: 999px; background-color: var(--cp-hair); }
.ma-trilho span { display: block; height: 100%; border-radius: 999px; background-color: var(--cp-primary); }
.ma-trilho.ma-trilho-alerta span { background-color: rgb(var(--warning-500)); }
.ma-trilho.ma-trilho-perigo span { background-color: rgb(var(--danger-500)); }
.ma-explica { margin: 0.875rem 0 0; font-size: 0.85rem; color: var(--cp-muted); }
.ma-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; margin-top: 1.125rem; }
.ma-cancelar { margin-left: auto; }
.ma-proxima {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    padding: 1.25rem;
    border-radius: 12px;
    background-color: var(--cp-soft);
}
.ma-proxima strong { font-size: 1.6rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--cp-ink); }
.ma-proxima p { margin: 0; font-size: 0.875rem; }
.ma-proxima .ma-rot { margin: 0; }
.ma-auto { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.375rem; font-size: 0.82rem; font-weight: 500; color: var(--ma-sucesso); }
.ma-auto svg { width: 1rem; height: 1rem; }

/* Forma de pagamento e uso */
.ma-duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.125rem; }
@media (max-width: 1023px) { .ma-duas { grid-template-columns: minmax(0, 1fr); } }
.ma-forma { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.125rem; align-items: center; }
@media (max-width: 599px) { .ma-forma { grid-template-columns: minmax(0, 1fr); } }
.ma-forma p { margin: 0 0 0.625rem; font-size: 0.875rem; }
.ma-cc {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 12.5rem;
    height: 7.75rem;
    box-sizing: border-box;
    padding: 1rem;
    border-radius: 12px;
    background-color: var(--ma-cartao-cc);
    color: #fff;
}
.ma-cc-topo { display: flex; align-items: center; justify-content: space-between; }
.ma-chip { width: 1.875rem; height: 1.375rem; border-radius: 5px; background-color: #c9a54a; }
.ma-cc-bandeira { font-weight: 700; font-style: italic; letter-spacing: 0.04em; text-transform: uppercase; }
.ma-cc-numero { font-size: 0.95rem; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.ma-cc-nome { overflow: hidden; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: #c7cbd6; text-overflow: ellipsis; white-space: nowrap; }
.ma-barras { display: grid; gap: 0.875rem; }
.ma-barra-topo { display: flex; justify-content: space-between; gap: 0.625rem; margin-bottom: 0.3rem; font-size: 0.82rem; }
.ma-barra-topo span:first-child { font-weight: 500; color: var(--cp-ink); }
.ma-barra-topo b { color: var(--cp-ink); }

/* Faturas */
.ma-tabela-caixa { overflow-x: auto; }
.ma-tabela { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.85rem; }
.ma-tabela th { padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--cp-border); font-size: 0.75rem; font-weight: 600; text-align: left; color: var(--cp-muted); }
.ma-tabela td { padding: 0.75rem 0.625rem; border-bottom: 1px solid var(--cp-hair); color: var(--cp-ink); vertical-align: middle; }
.ma-tabela tr:last-child td { border-bottom: 0; }
.ma-tabela td small { display: block; font-size: 0.75rem; color: var(--cp-muted); }
.ma-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.ma-acao-linha { text-align: right; white-space: nowrap; }
@media (max-width: 639px) {
    /* No celular, cada fatura vira um cartão (rótulo e valor em linha). */
    .ma-tabela { min-width: 0; }
    .ma-tabela thead { display: none; }
    .ma-tabela tr { display: grid; gap: 0.25rem; padding: 0.75rem 0; border-bottom: 1px solid var(--cp-hair); }
    .ma-tabela td { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0; border: 0; text-align: right; }
    .ma-tabela td::before { content: attr(data-rotulo); font-size: 0.75rem; color: var(--cp-muted); text-align: left; }
    .ma-tabela td small { display: none; }
    .ma-acao-linha { justify-content: flex-end !important; }
}

/* Dados de cobrança */
.ma-dados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem 1.5rem; margin: 0; }
@media (max-width: 1023px) { .ma-dados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .ma-dados { grid-template-columns: minmax(0, 1fr); } }
.ma-dados dt { font-size: 0.75rem; color: var(--cp-muted); }
.ma-dados dd { margin: 0.125rem 0 0; font-weight: 500; color: var(--cp-ink); overflow-wrap: anywhere; }

/* Trocar de plano */
.ma-ciclos { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; border: 1px solid var(--cp-border); border-radius: 999px; background-color: var(--cp-surface); }
.ma-ciclo { min-height: 2.375rem; padding: 0 1.125rem; border: 0; border-radius: 999px; background: transparent; font-size: 0.875rem; font-weight: 500; color: var(--cp-muted); cursor: pointer; }
.ma-ciclo.ma-on { background-color: var(--cp-primary); color: #fff; }
.ma-ciclo small { margin-left: 0.25rem; font-size: 0.7rem; font-weight: 700; color: var(--ma-sucesso); }
.ma-ciclo.ma-on small { color: inherit; }
.ma-troca { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 1023px) { .ma-troca { grid-template-columns: minmax(0, 1fr); } }
.ma-planos { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem; }
.ma-plano-opcao {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding: 1.125rem 1rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--ma-raio);
    background-color: var(--cp-surface);
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.ma-plano-opcao:hover { border-color: rgba(var(--primary-500), 0.45); }
.ma-plano-opcao.ma-on { border-color: var(--cp-primary); box-shadow: inset 0 0 0 1px var(--cp-primary); background-color: var(--cp-primary-soft); }
.ma-plano-opcao:focus-visible, .ma-ciclo:focus-visible { outline: 2px solid var(--cp-primary); outline-offset: 2px; }
.ma-plano-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 1.5rem; }
.ma-marcador { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border: 1.5px solid var(--cp-border-strong); border-radius: 50%; color: transparent; }
.ma-marcador svg { width: 0.8rem; height: 0.8rem; }
.ma-plano-opcao.ma-on .ma-marcador { border-color: var(--cp-primary); background-color: var(--cp-primary); color: #fff; }
.ma-selo { padding: 0.125rem 0.5rem; border-radius: 999px; background-color: var(--cp-soft); font-size: 0.7rem; font-weight: 600; color: var(--cp-text); white-space: nowrap; }
.ma-selo-azul { background-color: var(--cp-primary); color: #fff; }
.ma-opcao-nome { font-size: 1.05rem; color: var(--cp-ink); }
.ma-opcao-preco { font-size: 0.82rem; color: var(--cp-muted); }
.ma-opcao-preco b { font-size: 1.4rem; letter-spacing: -0.01em; color: var(--cp-ink); }
.ma-opcao-equiv { min-height: 1.1rem; margin-top: -0.25rem; font-size: 0.75rem; color: var(--cp-muted); }
.ma-itens { display: grid; gap: 0.375rem; margin: 0.25rem 0 0; padding: 0.625rem 0 0; border-top: 1px solid var(--cp-hair); list-style: none; font-size: 0.82rem; }
.ma-itens li { display: flex; gap: 0.5rem; align-items: flex-start; }
.ma-itens svg { flex-shrink: 0; width: 1rem; height: 1rem; margin-top: 0.125rem; color: var(--ma-sucesso); }
.ma-resumo { position: sticky; top: 1rem; }
.ma-de-para { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; font-weight: 500; color: var(--cp-ink); }
.ma-de-para s { font-weight: 400; color: var(--cp-muted); }
.ma-de-para svg { width: 1rem; height: 1rem; color: var(--cp-muted); }
.ma-contas { display: grid; gap: 0.375rem; margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid var(--cp-border); font-size: 0.875rem; }
.ma-linha { display: flex; justify-content: space-between; gap: 0.75rem; }
.ma-total { margin-top: 0.25rem; padding-top: 0.625rem; border-top: 1px dashed var(--cp-border-strong); font-size: 1rem; font-weight: 600; color: var(--cp-ink); }
.ma-explica-caixa { margin: 0.875rem 0 0; padding: 0.75rem 0.875rem; border-radius: 10px; background-color: var(--cp-soft); font-size: 0.82rem; }
.ma-explica-caixa b { color: var(--cp-ink); }
.ma-formas { display: grid; gap: 0.5rem; margin-top: 1rem; }
.ma-forma-opcao { display: flex; align-items: center; gap: 0.625rem; padding: 0.7rem 0.75rem; border: 1px solid var(--cp-border); border-radius: 10px; font-size: 0.875rem; color: var(--cp-ink); cursor: pointer; }
.ma-forma-opcao.ma-on { border-color: var(--cp-primary); background-color: var(--cp-primary-soft); }
.ma-forma-opcao input { width: 1rem; height: 1rem; margin: 0; accent-color: rgb(var(--primary-600)); }
.ma-forma-opcao small { display: block; font-size: 0.75rem; color: var(--cp-muted); }
.ma-resumo .ma-botao-cheio { margin-top: 1rem; }


/* =========================================================================
   31. PRIMEIROS PASSOS NO INÍCIO (08/10) — o guia "Comece por aqui" de um
   escritório novo (opção A do canvas "Primeiro acesso do painel"): os 4
   passos em lista no lugar dos números ainda zerados; depois, uma faixa em
   cima deles com o próximo passo. Tudo pelos tokens --cp-* (claro e escuro).
   ========================================================================= */
.cp-guia {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
    --cp-guia-sucesso: rgb(var(--success-600));
    --cp-guia-sucesso-fundo: rgba(var(--success-500), 0.14);
}
.cp-guia-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
}
.cp-guia-cabeca-textos { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.cp-guia-ola { margin: 0; font-size: 1rem; font-weight: 600; color: var(--cp-primary); }
.cp-guia-titulo { margin: 0; font-size: 2.15rem; line-height: 1.2; font-weight: 700; color: var(--cp-ink); }
.cp-guia-sub { margin: 0; font-size: 1.1rem; color: var(--cp-text); }
.cp-guia-progresso { display: flex; flex-direction: column; gap: 0.5rem; min-width: 15rem; font-size: 1rem; font-weight: 600; color: var(--cp-text); }
.cp-guia-barra { display: block; height: 0.65rem; border-radius: 999px; background-color: var(--cp-hair); overflow: hidden; }
.cp-guia-barra > span { display: block; height: 100%; border-radius: 999px; background-color: var(--cp-primary); transition: width 0.4s ease; }

.cp-guia-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.cp-guia-passo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1rem 1.4rem;
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--cp-border);
    border-radius: 16px;
    background-color: var(--cp-surface);
}
.cp-guia-passo.is-atual { border: 2px solid var(--cp-primary); box-shadow: 0 10px 30px rgba(var(--primary-600), 0.1); }
.cp-guia-numero {
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    background-color: var(--cp-primary-soft);
    color: var(--cp-primary);
}
.cp-guia-numero svg { width: 1.5rem; height: 1.5rem; }
.cp-guia-passo.is-atual .cp-guia-numero { background-color: rgb(var(--primary-600)); color: #fff; }
.cp-guia-passo.is-feito .cp-guia-numero { background-color: var(--cp-guia-sucesso); color: #fff; }
.cp-guia-textos { flex: 1 1 22rem; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.cp-guia-passo-titulo { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 1.3rem; font-weight: 600; color: var(--cp-ink); }
.cp-guia-passo.is-feito .cp-guia-passo-titulo > span:first-child { color: var(--cp-muted); }
.cp-guia-textos p { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--cp-text); }
.cp-guia-selo { font-size: 0.85rem; font-weight: 600; padding: 0.2rem 0.7rem; border-radius: 999px; background-color: var(--cp-active); color: var(--cp-primary); }
.cp-guia-selo.is-feito { background-color: var(--cp-guia-sucesso-fundo); color: var(--cp-guia-sucesso); }
.cp-guia-acoes { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; min-width: 13rem; }
.cp-guia-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    border: 1px solid rgba(var(--primary-500), 0.35);
    background-color: var(--cp-surface);
    color: var(--cp-primary);
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.cp-guia-botao:hover { background-color: var(--cp-primary-soft); }
.cp-guia-botao.is-primario { border-color: transparent; background-color: rgb(var(--primary-600)); color: #fff; }
.cp-guia-botao.is-primario:hover { background-color: rgb(var(--primary-700)); }
.cp-guia-extra { text-align: center; padding: 0.35rem; font-size: 0.95rem; font-weight: 600; color: var(--cp-primary); text-decoration: none; }
.cp-guia-extra:hover { text-decoration: underline; }

.cp-guia-como { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1.6rem; border: 1px solid var(--cp-border); border-radius: 16px; background-color: var(--cp-surface); }
.cp-guia-como-titulo { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--cp-ink); }
.cp-guia-como-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.cp-guia-como-grade p { margin: 0.3rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--cp-text); }
.cp-guia-como-rot { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cp-primary); }
.cp-guia-rodape, .cp-guia-reabrir { margin: 0; text-align: center; font-size: 0.95rem; color: var(--cp-muted); }
.cp-guia-rodape .cp-link, .cp-guia-reabrir .cp-link { background: none; border: 0; padding: 0; margin-left: 0.35rem; font: inherit; font-weight: 600; cursor: pointer; }

/* A faixa: o próximo passo numa linha, em cima dos números. */
.cp-guia-faixa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.2rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(var(--primary-500), 0.35);
    border-radius: 16px;
    background-color: var(--cp-surface);
}
.cp-guia-anel {
    flex: none;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(rgb(var(--primary-600)) calc(var(--cp-guia-pct) * 1%), var(--cp-hair) 0);
}
.cp-guia-anel > span { width: 2.6rem; height: 2.6rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background-color: var(--cp-surface); font-size: 0.9rem; font-weight: 700; color: var(--cp-primary); }
.cp-guia-faixa-textos { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 16rem; }
.cp-guia-faixa-rot { font-size: 0.9rem; font-weight: 600; color: var(--cp-muted); }
.cp-guia-faixa-textos strong { font-size: 1.1rem; font-weight: 600; color: var(--cp-ink); }
.cp-guia-faixa-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-left: auto; }
.cp-guia-fechar { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid var(--cp-border); background-color: var(--cp-surface); color: var(--cp-muted); cursor: pointer; }
.cp-guia-fechar:hover { color: var(--cp-ink); background-color: var(--cp-soft); }
.cp-guia-fechar svg { width: 1.2rem; height: 1.2rem; }

@media (max-width: 767px) {
    .cp-guia-titulo { font-size: 1.6rem; }
    .cp-guia-passo { padding: 1.1rem; align-items: flex-start; }
    /* O número ao lado do título, e os botões embaixo, na largura toda. */
    .cp-guia-numero { width: 2.5rem; height: 2.5rem; font-size: 1.1rem; }
    .cp-guia-textos { flex: 1 1 0; }
    .cp-guia-acoes { flex: 1 1 100%; min-width: 0; }
    .cp-guia-como-grade { grid-template-columns: minmax(0, 1fr); }
    .cp-guia-faixa-acoes { margin-left: 0; width: 100%; }
    .cp-guia-faixa-acoes .cp-guia-botao { flex: 1 1 auto; }
}

/* "Enviar documento" sem nenhuma empresa: o que falta, no lugar do formulário. */
.cp-sem-empresa { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 0.5rem 0.25rem 0.25rem; text-align: center; }
.cp-sem-empresa-icone { display: inline-flex; align-items: center; justify-content: center; width: 4.25rem; height: 4.25rem; border-radius: 18px; background-color: var(--cp-primary-soft); color: var(--cp-primary); }
.cp-sem-empresa-icone svg { width: 2.1rem; height: 2.1rem; }
.cp-sem-empresa-titulo { margin: 0; font-size: 1.4rem; font-weight: 700; color: var(--cp-ink); }
.cp-sem-empresa p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--cp-text); }

/* "Pastas e tipos" na barra do topo: o botão dos ajustes dos documentos, com o nome escrito (08/10). */
.cp-menu-ajustes-botao { box-shadow: none; }
.cp-menu-ajustes-botao.is-ativo { color: var(--cp-primary); background-color: var(--cp-primary-soft); }

/* "Ver como fazer": o vídeo do passo numa janela por cima da página (08/10).
   Num notebook baixo, a janela encolhe para o vídeo caber inteiro na altura. */
.cp-video-fundo { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; background-color: rgba(7, 18, 61, 0.72); }
.cp-video-janela { width: min(68rem, 100%, calc((100vh - 9rem) * 16 / 9)); border-radius: 16px; overflow: hidden; background-color: var(--cp-surface); box-shadow: 0 30px 80px rgba(3, 8, 30, 0.45); }
.cp-video-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem 0.75rem 1.25rem; font-size: 1.05rem; color: var(--cp-ink); border-bottom: 1px solid var(--cp-border); }
.cp-video { display: block; width: 100%; aspect-ratio: 16 / 9; background-color: #000; }


/* =========================================================================
   32. TESTE GERAL (09/10) — ajustes achados no teste de todas as telas.
   ========================================================================= */

/* "Consultando a Receita…" por cima do popup da empresa enquanto a consulta
   do CNPJ não volta (o que se digitava nesse meio tempo se perdia). */
.cp-consultando-receita { display: none; position: fixed; inset: 0; z-index: 60; align-items: center; justify-content: center; padding: 1rem; background-color: rgba(255, 255, 255, 0.6); cursor: progress; }
.dark .cp-consultando-receita { background-color: rgba(3, 7, 18, 0.55); }
.cp-consultando-receita-caixa { display: flex; align-items: center; gap: 0.65rem; max-width: 26rem; padding: 0.9rem 1.2rem; border-radius: 0.75rem; border: 1px solid var(--cp-border); background-color: var(--cp-surface); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18); font-size: 0.95rem; font-weight: 500; line-height: 1.4; color: var(--cp-ink); }
.cp-consultando-receita-caixa svg { flex: none; color: var(--cp-primary); }


/* =========================================================================
   33. JANELA "CANCELAR A ASSINATURA" (13/10): o que muda numa linha do tempo
   (hoje, até o fim do período pago, depois), o que não muda (nada é apagado)
   e, conforme o motivo, um caminho para ficar.
   ========================================================================= */
.cp-cancela { display: grid; gap: 1rem; }
/* Sem o recuo do Filament ao lado do ícone (5,25rem): a linha do tempo, os motivos e os botões usam a largura toda. */
.fi-modal-window:has(.cp-cancela) :is(.fi-modal-content, .fi-modal-footer) { padding-inline-start: 1.5rem; }

/* As etapas lado a lado, do mesmo tamanho. O subgrid alinha marco, quando, título e texto entre os cartões,
   mesmo se um título quebrar a linha. */
.cp-cancela-linha { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: repeat(4, auto); column-gap: 1rem; margin: 0; padding: 0; list-style: none; }
.cp-cancela-etapa { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0.25rem; align-content: start; min-width: 0; padding: 1rem; border: 1px solid var(--cp-border); border-radius: 0.75rem; background-color: var(--cp-soft); }
/* A setinha entre uma etapa e a próxima, na altura do marco. */
.cp-cancela-etapa:not(:last-child)::after { content: ""; position: absolute; top: 1.78rem; right: -0.72rem; width: 0.45rem; height: 0.45rem; border-top: 2px solid var(--cp-border-strong); border-right: 2px solid var(--cp-border-strong); transform: rotate(45deg); }
.cp-cancela-marco { display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: 0.5rem; border-radius: 999px; background-color: var(--cp-primary-soft); color: var(--cp-primary); }
.cp-cancela-marco svg { width: 1.1rem; height: 1.1rem; }
.cp-cancela-etapa.is-ok .cp-cancela-marco { background-color: rgba(var(--success-500), 0.14); color: rgb(var(--success-600)); }
.cp-cancela-etapa.is-fim .cp-cancela-marco { background-color: rgba(var(--danger-500), 0.11); color: rgb(var(--danger-600)); }
.dark .cp-cancela-etapa.is-ok .cp-cancela-marco { color: rgb(var(--success-400)); }
.dark .cp-cancela-etapa.is-fim .cp-cancela-marco { color: rgb(var(--danger-400)); }
.cp-cancela-quando { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cp-muted); }
.cp-cancela-etapa strong { font-size: 0.95rem; font-weight: 600; line-height: 1.3; color: var(--cp-ink); }
.cp-cancela-etapa p { margin: 0.1rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--cp-text); }

.cp-cancela-nota { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.75rem 1rem; border-radius: 0.75rem; background-color: rgba(var(--success-500), 0.08); font-size: 0.8125rem; line-height: 1.5; color: var(--cp-text); }
.cp-cancela-nota svg { flex: none; width: 1.25rem; height: 1.25rem; color: rgb(var(--success-600)); }
.dark .cp-cancela-nota svg { color: rgb(var(--success-400)); }
.cp-cancela-nota p { margin: 0; }
.cp-cancela-nota strong { font-weight: 600; color: var(--cp-ink); }
.cp-cancela-nota a { font-weight: 500; color: var(--cp-primary); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* O formulário (motivo) começa separado da linha do tempo por um fio. */
.fi-modal-content:has(.cp-cancela) > form,
.fi-modal-content:has(.cp-cancela) > .cp-cancela + * { padding-top: 1rem; border-top: 1px solid var(--cp-hair); }

/* Os motivos numa fileira só, dividindo a largura (no celular, quebram e cada linha se completa). */
.cp-cancela-motivos { gap: 0.5rem; }
.cp-cancela-motivos > div { flex: 1 1 auto; }
.cp-cancela-motivos .fi-btn { width: 100%; }

/* Conforme o motivo: o plano mais barato ou o guia do Início. */
.cp-cancela-sugestao { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.875rem; padding: 0.75rem 1rem; border: 1px solid rgba(var(--primary-500), 0.22); border-radius: 0.75rem; background-color: var(--cp-primary-soft); font-size: 0.8125rem; line-height: 1.5; color: var(--cp-ink); }
.cp-cancela-sugestao > svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--cp-primary); }
.cp-cancela-sugestao p { flex: 1 1 14rem; margin: 0; }

/* Celular: as etapas uma embaixo da outra, o marco à esquerda do texto. */
@media (max-width: 639px) {
    .cp-cancela-linha { grid-auto-flow: row; grid-template-rows: none; row-gap: 0.5rem; }
    .cp-cancela-etapa { grid-row: auto; grid-template-rows: none; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.15rem; padding: 0.75rem; }
    .cp-cancela-etapa > * { grid-column: 2; }
    .cp-cancela-marco { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
    .cp-cancela-etapa:not(:last-child)::after { display: none; }
}

/* =========================================================================
   34. MASTER, AVISOS DA PAGAR.ME (13/10): o conteúdo técnico do aviso, legível
   (com quebra de linha e rolagem própria), e os links para a Pagar.me.
   ========================================================================= */
.cp-json { margin: 0; max-height: 24rem; overflow: auto; padding: 0.75rem 0.875rem; border: 1px solid var(--cp-border); border-radius: 0.5rem; background-color: var(--cp-soft); color: var(--cp-text); font: 0.75rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.cp-link-externo { font-weight: 500; color: var(--cp-primary); text-decoration: underline; text-underline-offset: 2px; }
.cp-quebra { overflow-wrap: anywhere; min-width: 0; }


/* =========================================================================
   35. VÍDEOS DE AJUDA (14/10): um cliente não viu o link pequeno "Ver como
   fazer". Agora cada vídeo tem uma CAPA (um quadro do próprio vídeo, com o
   botão de tocar e a duração) no guia do Início e na página "Vídeos de
   ajuda" do menu; o topo das telas de cada passo e o popup "Enviar
   documento" ganharam o "Ver como fazer"; a janela que toca é uma só
   (filament.painel.video-ajuda).
   ========================================================================= */
.cp-capa-video {
    position: relative;
    display: block;
    flex: none;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    background-color: #0b1a4d;
    text-decoration: none;
}
.cp-capa-video img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
/* Escurece embaixo para o rótulo branco ler em cima de qualquer tela. */
.cp-capa-video::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7, 18, 61, 0.08) 35%, rgba(7, 18, 61, 0.78) 100%); }
.cp-capa-video:hover img { transform: scale(1.04); }
.cp-capa-video:focus-visible { outline: 3px solid rgb(var(--primary-500)); outline-offset: 2px; }
.cp-capa-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 3.4rem;
    height: 3.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background-color: rgb(var(--primary-600));
    color: #fff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.4), 0 10px 26px rgba(3, 8, 30, 0.4);
    transform: translate(-50%, -58%);
    transition: transform 0.2s ease;
}
.cp-capa-video-play svg { width: 1.55rem; height: 1.55rem; margin-left: 0.18rem; }
.cp-capa-video:hover .cp-capa-video-play { transform: translate(-50%, -58%) scale(1.1); }
.cp-capa-video-rotulo {
    position: absolute;
    right: 0.65rem;
    bottom: 0.55rem;
    left: 0.75rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.cp-capa-video-rotulo b { padding: 0.1rem 0.45rem; border-radius: 6px; background-color: rgba(7, 18, 61, 0.8); font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: none; }

/* No guia do Início: a capa entre o texto do passo e o botão. */
.cp-guia-capa { width: 13.5rem; }
/* Na faixa (2 ou 3 passos feitos): o "Ver como fazer" virou botão. */
.cp-guia-botao-video { gap: 0.45rem; }
.cp-guia-botao-video svg { width: 1.4rem; height: 1.4rem; }

/* A janela que toca: embaixo, onde ficam todos os vídeos. */
.cp-video-rodape { margin: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.25rem; border-top: 1px solid var(--cp-border); font-size: 0.95rem; color: var(--cp-muted); }
.cp-video-rodape svg { flex: none; width: 1.2rem; height: 1.2rem; }
.cp-video-rodape .cp-link { font-weight: 600; }

/* No popup "Enviar documento", embaixo do título. */
.cp-video-link { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--cp-primary); text-decoration: none; }
.cp-video-link:hover { text-decoration: underline; }
.cp-video-link-icone { width: 1.3rem; height: 1.3rem; }

/* A página "Vídeos de ajuda": um cartão por vídeo, 2 por linha e 4 na tela grande. */
.cp-ajuda {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* As cores do selo "Feito", as mesmas do guia do Início. */
    --cp-guia-sucesso: rgb(var(--success-600));
    --cp-guia-sucesso-fundo: rgba(var(--success-500), 0.14);
}
.cp-ajuda-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.9rem; }
.cp-ajuda-grupo { margin: 0; font-size: 1.2rem; font-weight: 600; color: var(--cp-ink); }
.cp-ajuda-total { font-size: 0.95rem; color: var(--cp-muted); }
.cp-ajuda-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.cp-ajuda-cartao { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--cp-border); border-radius: 16px; background-color: var(--cp-surface); }
.cp-ajuda-cartao .cp-capa-video { border: 0; border-bottom: 1px solid var(--cp-border); border-radius: 0; }
.cp-ajuda-corpo { flex: 1; display: flex; flex-direction: column; gap: 0.45rem; padding: 1.1rem 1.25rem 1.25rem; }
.cp-ajuda-numero { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cp-primary); }
.cp-ajuda-numero .cp-guia-selo { font-size: 0.8rem; letter-spacing: 0; text-transform: none; }
.cp-ajuda-titulo { margin: 0; font-size: 1.2rem; font-weight: 600; line-height: 1.35; color: var(--cp-ink); }
.cp-ajuda-texto { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--cp-text); }
.cp-ajuda-onde { margin: 0; display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.92rem; line-height: 1.45; color: var(--cp-muted); }
.cp-ajuda-onde svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; }
.cp-ajuda-onde b { font-weight: 600; color: var(--cp-text); }
.cp-ajuda-acoes { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; padding-top: 0.6rem; }
.cp-ajuda-acoes .cp-guia-botao { flex: 1 1 auto; gap: 0.45rem; min-height: 2.6rem; padding: 0.5rem 1rem; font-size: 1rem; }
.cp-ajuda-acoes .cp-guia-botao svg { width: 1.3rem; height: 1.3rem; }
.cp-ajuda-suporte { margin: 0; text-align: center; font-size: 0.95rem; color: var(--cp-muted); }
.cp-ajuda-suporte .cp-link { font-weight: 600; }
/* O índice dos assuntos (16/10, o acervo completo): um atalho para cada bloco. */
.cp-ajuda-indice { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cp-ajuda-indice-item { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.35rem 0.5rem 0.35rem 1rem; border: 1px solid var(--cp-border); border-radius: 999px; background-color: var(--cp-surface); font-weight: 600; color: var(--cp-ink); text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; }
.cp-ajuda-indice-item:hover { border-color: var(--cp-primary); color: var(--cp-primary); }
.cp-ajuda-indice-item span { min-width: 1.6rem; padding: 0.1rem 0.45rem; border-radius: 999px; background-color: var(--cp-primary-soft); font-size: 0.85rem; text-align: center; color: var(--cp-primary); }
.cp-ajuda { scroll-margin-top: 5rem; }

@media (min-width: 640px) {
    .cp-ajuda-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
    .cp-ajuda-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    /* No celular, a capa do passo ocupa a largura toda, entre o texto e o botão. */
    .cp-guia-capa { flex: 1 1 100%; width: auto; }
}


/* =========================================================================
   36. MESES DE COMPETÊNCIA DENTRO DA PASTA (14/10): numa pasta com muitos
   documentos eles ficavam todos misturados. Embaixo das pastas da empresa,
   um cartão com uma pasta por mês (o mais novo primeiro) e "Todos os
   meses"; a aberta fica cheia, na cor da pasta (--cp-pasta-bg/--cp-pasta-aba
   vêm do <body>, ver TemaPasta). Com mais de um ano, um seletor de anos.
   ========================================================================= */
.cp-meses {
    margin-top: 0.9rem;
    padding: 0.75rem 0.9rem 0.85rem;
    border: 1px solid var(--cp-border);
    border-radius: 0.75rem;
    background-color: var(--cp-surface);
}
.cp-meses-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.55rem; }
.cp-meses-titulo { margin: 0; display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; font-weight: 600; color: var(--cp-ink); }
.cp-meses-titulo svg { flex: none; width: 1.15rem; height: 1.15rem; color: var(--cp-primary); }
.cp-meses-ano-unico { font-weight: 500; color: var(--cp-muted); }
.cp-meses-anos { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--cp-border); border-radius: 999px; background-color: var(--cp-soft); }
.cp-meses-ano { padding: 0.2rem 0.75rem; border: 0; border-radius: 999px; background: none; font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cp-muted); cursor: pointer; }
.cp-meses-ano:hover { color: var(--cp-ink); }
.cp-meses-ano.is-ativo { background-color: var(--cp-surface); color: var(--cp-primary); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14); }

.cp-meses-grade { display: flex; flex-wrap: wrap; gap: 0.55rem; padding-top: 4px; }
.cp-mes {
    position: relative;
    display: block;
    flex: 0 0 7.5rem;
    min-width: 0;
    color: var(--cp-ink);
    text-decoration: none;
    transition: transform 0.15s ease;
}
.cp-mes-aba {
    display: block;
    width: 55%;
    height: 7px;
    margin-bottom: -1px;
    border-radius: 4px 0 0 0;
    background: var(--cp-pasta-aba, var(--cp-border-strong));
    clip-path: polygon(0 0, calc(100% - 9px) 0, calc(100% - 3px) 100%, 0 100%);
}
.cp-mes-corpo {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0.55rem 0.35rem;
    border-radius: 0.35rem;
    background-color: var(--cp-surface);
    box-shadow: inset 0 0 0 1px var(--cp-border-strong);
}
.cp-mes-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; font-weight: 600; line-height: 1.25; }
.cp-mes-base { display: flex; align-items: center; justify-content: space-between; gap: 0.3rem; min-height: 1.35rem; }
.cp-mes-icone { flex: none; width: 16px; height: 16px; color: var(--cp-muted); }
.cp-mes-qtd { font-size: 1.1rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
/* Os não lidos do mês: um selinho laranja no canto da pasta. */
.cp-mes-selo {
    position: absolute;
    top: 1px;
    right: -5px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background-color: rgb(var(--warning-500));
    box-shadow: 0 0 0 2px var(--cp-surface);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.cp-mes:hover,
.cp-mes:focus-visible { transform: translateY(-2px); }
.cp-mes:hover .cp-mes-corpo { box-shadow: inset 0 0 0 1.5px var(--cp-pasta-bg, var(--cp-primary)); }
.cp-mes:focus-visible { outline: none; }
.cp-mes:focus-visible .cp-mes-corpo { box-shadow: 0 0 0 2px var(--cp-primary); }
/* "Todos os meses": a aba neutra, como "Todas as pastas", e da largura do nome. */
.cp-mes-todos { flex: 0 0 auto; min-width: 7.5rem; }
.cp-mes-todos .cp-mes-aba { background: var(--cp-border-strong); }
/* O mês aberto: cheio, na cor da pasta, levantado. */
.cp-mes.is-ativo { transform: translateY(-2px); }
.cp-mes.is-ativo .cp-mes-corpo { background-color: var(--cp-pasta-bg, rgb(var(--primary-600))); color: #fff; box-shadow: 0 6px 12px rgba(15, 23, 42, 0.18); }
.cp-mes.is-ativo .cp-mes-icone { color: rgba(255, 255, 255, 0.85); }
.cp-meses.cp-pasta-clara .cp-mes.is-ativo .cp-mes-corpo { color: #1e293b; }
.cp-meses.cp-pasta-clara .cp-mes.is-ativo .cp-mes-icone { color: rgba(30, 41, 59, 0.7); }

/* No celular, os meses numa fileira que rola para o lado (sem empurrar a página). */
@media (max-width: 640px) {
    .cp-meses { padding: 0.65rem 0.7rem 0.7rem; }
    .cp-meses-grade { flex-wrap: nowrap; overflow-x: auto; padding: 6px 6px 6px 0; scroll-snap-type: x proximity; }
    .cp-mes { flex-basis: 6.75rem; scroll-snap-align: start; }
    .cp-mes-todos { flex-basis: auto; }
}


/* =========================================================================
   37. NADA SAI POR E-MAIL (14/10): a caixa de MENSAGENS do portal (o
   comunicado do escritório chega aqui, com aviso no sino) e a tela
   "Esqueceu a senha?", que diz a quem pedir a senha nova.
   ========================================================================= */
.cp-msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--cp-border); border-radius: 0.9rem; background-color: var(--cp-surface); }
.cp-msgs > li + li { border-top: 1px solid var(--cp-hair); }
.cp-msg { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.95rem 1.15rem; color: var(--cp-text); text-decoration: none; }
.cp-msg:hover { background-color: var(--cp-soft); }
.cp-msg-ponto { flex: none; width: 0.6rem; height: 0.6rem; margin-top: 0.45rem; border-radius: 999px; background-color: transparent; }
.cp-msg.is-nao-lida .cp-msg-ponto { background-color: rgb(var(--primary-600)); }
.cp-msg-textos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.cp-msg-titulo { font-size: 1rem; font-weight: 500; color: var(--cp-ink); }
.cp-msg.is-nao-lida .cp-msg-titulo { font-weight: 700; }
.cp-msg-previa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; color: var(--cp-muted); }
.cp-msg-fim { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.cp-msg-data { font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--cp-muted); }
.cp-msg.is-nao-lida .cp-msg-data { font-weight: 600; color: var(--cp-primary); }
.cp-msg-clipe svg { width: 1rem; height: 1rem; color: var(--cp-muted); }

.cp-msg-aberta { display: flex; flex-direction: column; gap: 1.1rem; max-width: 52rem; padding: 1.4rem 1.6rem; border: 1px solid var(--cp-border); border-radius: 0.9rem; background-color: var(--cp-surface); }
.cp-msg-voltar { display: inline-flex; align-items: center; gap: 0.35rem; width: fit-content; font-size: 0.95rem; font-weight: 600; color: var(--cp-primary); text-decoration: none; }
.cp-msg-voltar:hover { text-decoration: underline; }
.cp-msg-voltar svg { width: 1.1rem; height: 1.1rem; }
.cp-msg-cabeca { display: flex; flex-direction: column; gap: 0.3rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--cp-hair); }
.cp-msg-assunto { margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.3; color: var(--cp-ink); }
.cp-msg-de { margin: 0; font-size: 0.92rem; color: var(--cp-muted); }
.cp-msg-de b { font-weight: 600; color: var(--cp-text); }
/* O texto do comunicado (HTML do editor, já limpo). */
.cp-msg-corpo { font-size: 1rem; line-height: 1.65; color: var(--cp-text); overflow-wrap: anywhere; }
.cp-msg-corpo > * + * { margin-top: 0.8rem; }
.cp-msg-corpo a { color: var(--cp-primary); text-decoration: underline; }
.cp-msg-corpo ul, .cp-msg-corpo ol { padding-left: 1.4rem; }
.cp-msg-corpo ul { list-style: disc; }
.cp-msg-corpo ol { list-style: decimal; }
.cp-msg-corpo h1, .cp-msg-corpo h2, .cp-msg-corpo h3 { font-weight: 700; color: var(--cp-ink); }
.cp-msg-corpo blockquote { padding-left: 0.9rem; border-left: 3px solid var(--cp-border-strong); color: var(--cp-muted); }
.cp-msg-anexos { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.9rem; border-top: 1px solid var(--cp-hair); }
.cp-msg-anexos-titulo { margin: 0; display: flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; color: var(--cp-text); }
.cp-msg-anexos-titulo svg { width: 1.05rem; height: 1.05rem; color: var(--cp-muted); }
.cp-msg-anexos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cp-msg-anexo { display: inline-flex; align-items: center; gap: 0.5rem; max-width: 100%; padding: 0.5rem 0.8rem; border: 1px solid var(--cp-border); border-radius: 0.6rem; background-color: var(--cp-soft); color: var(--cp-ink); text-decoration: none; }
.cp-msg-anexo:hover { border-color: rgba(var(--primary-500), 0.5); }
.cp-msg-anexo svg { flex: none; width: 1.2rem; height: 1.2rem; color: var(--cp-primary); }
.cp-msg-anexo-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; font-weight: 500; }
.cp-msg-anexo-tamanho { flex: none; font-size: 0.82rem; color: var(--cp-muted); }

.cp-msg-vazio { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2.5rem 1rem; text-align: center; border: 1px dashed var(--cp-border-strong); border-radius: 0.9rem; background-color: var(--cp-surface); }
.cp-msg-vazio-icone { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem; background-color: var(--cp-primary-soft); color: var(--cp-primary); }
.cp-msg-vazio-icone svg { width: 1.8rem; height: 1.8rem; }
.cp-msg-vazio h2 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--cp-ink); }
.cp-msg-vazio p { margin: 0; max-width: 28rem; color: var(--cp-muted); }

/* A prévia de um modelo, no popup "Ver como fica": sem a borda do cartão. */
.cp-msg-previa-modelo { max-width: none; padding: 0.25rem 0; border: 0; background: none; }

@media (max-width: 640px) {
    .cp-msg { padding: 0.85rem 0.9rem; }
    .cp-msg-aberta { padding: 1.1rem 1rem; }
}

/* "Esqueceu a senha?": a quem pedir, sem formulário. */
.cp-esqueci { display: flex; flex-direction: column; gap: 1rem; }
.cp-esqueci-intro { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--cp-text); }
.cp-esqueci-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.cp-esqueci-lista li { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.75rem 0.85rem; border: 1px solid var(--cp-border); border-radius: 0.75rem; background-color: var(--cp-soft); font-size: 0.93rem; line-height: 1.5; color: var(--cp-text); }
.cp-esqueci-lista svg { flex: none; width: 1.3rem; height: 1.3rem; margin-top: 0.05rem; color: var(--cp-primary); }
.cp-esqueci-lista b { font-weight: 600; color: var(--cp-ink); }


/* =========================================================================
   38. O "i" NO MENU LATERAL (15/10): ao lado de "Usuários do portal",
   "Funcionários" e "Usuários do painel", com a explicação de quem acessa o
   quê (App\Filament\Painel\ExplicacoesDoMenu). O nome continua cortando
   com "…" se faltar espaço; o "i" fica sempre à vista, logo depois dele.
   ========================================================================= */
.fi-sidebar-item-label.cp-menu-com-info { display: flex; align-items: center; gap: 0.35rem; min-width: 0; overflow: visible; }
.cp-menu-info { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 999px; color: var(--cp-muted); cursor: help; }
.cp-menu-info svg { width: 1.05rem; height: 1.05rem; }
.cp-menu-info:hover, .cp-menu-info:focus-visible { color: var(--cp-primary); outline: none; }
.cp-menu-info:focus-visible { box-shadow: 0 0 0 2px rgba(var(--primary-500), 0.45); }


/* =========================================================================
   39. LISTAS AGRUPADAS POR EMPRESA (15-16/10): Usuários do portal e
   Colaboradores, cada empresa um grupo (fechado ao abrir), e a PÁGINA DA
   EMPRESA (?empresa=ID). O cabeçalho do grupo é o do Filament
   (fi-ta-group-header); a descrição traz a sigla, o resumo e os atalhos
   (App\Filament\Painel\GruposPorEmpresa).

   Cada tela tem a sua cor, para uma não ser confundida com a outra (16/10):
   Usuários do portal em azul, Colaboradores em verde-azulado (o mesmo da
   pasta Colaboradores e do atalho do Início).
   ========================================================================= */
.cp-tema-portal {
    --cp-tema: rgb(var(--primary-600));
    --cp-tema-suave: rgba(var(--primary-500), 0.12);
    --cp-tema-fundo: rgba(var(--primary-500), 0.05);
}
.cp-tema-funcionarios {
    --cp-tema: #0b7d77;
    --cp-tema-suave: rgba(15, 154, 147, 0.14);
    --cp-tema-fundo: rgba(15, 154, 147, 0.06);
}
.dark .cp-tema-portal {
    --cp-tema: rgb(var(--primary-400));
}
.dark .cp-tema-funcionarios {
    --cp-tema: #2dd4bf;
    --cp-tema-suave: rgba(45, 212, 191, 0.14);
    --cp-tema-fundo: rgba(45, 212, 191, 0.06);
}
/* O ícone da tela na frente do título e o selo no começo do subtítulo. */
.cp-lista-por-empresa .fi-header-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.cp-titulo-tema {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.75rem;
    background: var(--cp-tema-suave);
    color: var(--cp-tema);
}
.cp-titulo-tema svg {
    width: 1.45rem;
    height: 1.45rem;
}
.cp-selo-tema {
    display: inline-block;
    margin-right: 0.35rem;
    padding: 0.05rem 0.6rem;
    border-radius: 999px;
    background: var(--cp-tema-suave);
    color: var(--cp-tema);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.cp-lista-por-empresa .fi-ta-group-header {
    gap: 0.75rem;
    box-shadow: inset 3px 0 0 var(--cp-tema);
    /* A tabela é "whitespace-nowrap": o nome comprido quebra em vez de sair da tela. */
    white-space: normal;
    padding: 0.7rem 1rem;
    background: var(--cp-tema-fundo);
}
.cp-lista-por-empresa .fi-ta-group-header > .grid {
    flex: 1;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    row-gap: 0.1rem;
    align-items: center;
}
.cp-lista-por-empresa .fi-ta-group-header > .grid > h4 {
    grid-column: 2;
    grid-row: 1;
    overflow-wrap: anywhere;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cp-ink);
}
.cp-lista-por-empresa .fi-ta-group-header > .grid > p {
    display: contents;
}
.cp-grupo-sigla {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.6rem;
    background: var(--cp-tema-suave);
    color: var(--cp-tema);
    font-size: 0.8rem;
    font-weight: 600;
}
.cp-grupo-resumo {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.8rem;
    color: var(--cp-muted);
}
.cp-grupo-pendente {
    font-weight: 600;
    color: rgb(var(--warning-600));
}
.dark .cp-grupo-pendente {
    color: rgb(var(--warning-400));
}
.cp-grupo-acoes {
    grid-column: 3;
    grid-row: 1 / span 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem 1rem;
}
.cp-grupo-acao {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.1rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cp-tema);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.cp-grupo-acao:hover {
    text-decoration: underline;
}
.cp-grupo-icone {
    width: 1rem;
    height: 1rem;
}
/* "Recolher todas" na mesma linha da busca, e não numa faixa só para ele. */
.cp-lista-por-empresa .fi-ta-header-ctn:has(> .fi-ta-header) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}
.cp-lista-por-empresa .fi-ta-header-ctn > .fi-ta-header {
    padding-inline-end: 0;
}
.cp-lista-por-empresa .fi-ta-header-ctn > .fi-ta-header-toolbar {
    border-top-width: 0;
}
.cp-lista-por-empresa .fi-ta-header-ctn > :not(.fi-ta-header, .fi-ta-header-toolbar) {
    grid-column: 1 / -1;
}
@media (max-width: 899px) {
    .cp-lista-por-empresa .fi-ta-group-header > .grid {
        grid-template-columns: auto minmax(0, 1fr);
    }
    /* A caixinha de marcar o grupo inteiro não cabe no cartão do celular
       (!important: a seção 22 trata a 1ª célula como título com seletores
       :not(:has(...)) que pesam mais que qualquer classe a mais). */
    .cp-lista-por-empresa .fi-ta-row > td.fi-ta-group-selection-cell {
        display: none !important;
    }
    .cp-grupo-acoes {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-content: flex-start;
        padding-top: 0.25rem;
    }
}
@media (max-width: 639px) {
    /* No celular o "Recolher todas" fica só com o ícone (o nome segue para o leitor de tela). */
    .cp-lista-por-empresa .fi-ta-header {
        padding-inline: 0.75rem 0;
    }
    .cp-lista-por-empresa .fi-ta-header .fi-btn {
        width: 2.6rem;
        height: 2.6rem;
        padding: 0;
    }
    .cp-lista-por-empresa .fi-ta-header .fi-btn-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Empresas sem ninguém no portal (embaixo da lista agrupada). */
.cp-sem-ninguem {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.1rem 1.25rem;
    border: 1px dashed var(--cp-border-strong);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
}
.cp-sem-ninguem h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cp-ink);
}
.cp-sem-ninguem h2 span {
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--cp-soft);
    font-size: 0.75rem;
    color: var(--cp-muted);
}
.cp-sem-ninguem p {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--cp-muted);
}
.cp-sem-ninguem-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.25rem;
}
.cp-sem-ninguem-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--cp-border);
    border-radius: 999px;
    background: var(--cp-surface);
    font: inherit;
    font-size: 0.8125rem;
    color: var(--cp-ink);
    cursor: pointer;
}
.cp-sem-ninguem-item:hover {
    border-color: var(--cp-tema);
    color: var(--cp-tema);
}
.cp-sem-ninguem-item svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--cp-tema);
}

/* Página da empresa: a ficha (dados + números) em cima. */
.cp-ficha-empresa {
    border-top: 3px solid var(--cp-tema) !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
}
.cp-ficha-identidade {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
}
.cp-ficha-logo {
    flex: none;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.85rem;
    object-fit: contain;
    background: var(--cp-soft);
}
.cp-ficha-sigla {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-tema-suave);
    color: var(--cp-tema);
    font-size: 1.05rem;
    font-weight: 700;
}
.cp-ficha-dados {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    margin: 0;
}
.cp-ficha-dados > div {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 0.75rem;
    font-size: 0.8125rem;
}
.cp-ficha-dados dt {
    color: var(--cp-muted);
}
.cp-ficha-dados dd {
    margin: 0;
    color: var(--cp-ink);
    overflow-wrap: anywhere;
}
.cp-ficha-encerrada {
    display: inline-block;
    padding: 0.05rem 0.55rem;
    border-radius: 999px;
    background: rgba(var(--danger-500), 0.12);
    color: rgb(var(--danger-600));
    font-weight: 600;
}
.cp-ficha-numeros {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    align-content: start;
}
.cp-ficha-numero {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--cp-radius-sm);
    background: var(--cp-soft);
}
.cp-ficha-numero strong {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--cp-ink);
}
.cp-ficha-numero span {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--cp-muted);
}
.cp-ficha-numero.is-alerta strong {
    color: rgb(var(--warning-600));
}
.dark .cp-ficha-numero.is-alerta strong {
    color: rgb(var(--warning-400));
}
.cp-ficha-ultimo {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--cp-muted);
}
.cp-ficha-ultimo b {
    font-weight: 600;
    color: var(--cp-ink);
}

/* Página da empresa: quem vê cada pasta e os últimos acessos, embaixo. */
.cp-ficha-blocos {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.cp-ficha-bloco {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
}
.cp-ficha-bloco h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cp-ink);
}
.cp-ficha-bloco-ajuda,
.cp-ficha-vazio {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--cp-muted);
}
.cp-ficha-vazio {
    padding-top: 0.5rem;
}
.cp-ficha-pastas,
.cp-ficha-acessos {
    display: flex;
    flex-direction: column;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}
.cp-ficha-pastas li {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.6rem 0;
    border-top: 1px solid var(--cp-hair);
}
.cp-ficha-pasta-nome {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cp-ink);
}
.cp-ficha-pasta-cor {
    flex: none;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0.2rem;
}
.cp-ficha-pasta-pessoas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.cp-ficha-pessoa {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--cp-soft);
    font-size: 0.78rem;
    color: var(--cp-ink);
}
.cp-ficha-envia {
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--cp-primary-soft);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--cp-primary);
}
.cp-ficha-ninguem {
    font-size: 0.78rem;
    color: var(--cp-muted);
}
.cp-ficha-acessos li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0;
    border-top: 1px solid var(--cp-hair);
    font-size: 0.8125rem;
}
.cp-ficha-acessos .cp-avatar {
    flex: none;
    background: var(--cp-tema-suave);
    color: var(--cp-tema);
}
.cp-ficha-acessos .cp-avatar svg {
    width: 1rem;
    height: 1rem;
}
.cp-ficha-acessos .cp-avatar.cp-ficha-saida {
    background: rgba(var(--danger-500), 0.1);
    color: rgb(var(--danger-600));
}
.cp-ficha-acesso-texto {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    color: var(--cp-text);
}
.cp-ficha-acesso-texto b {
    font-weight: 600;
    color: var(--cp-ink);
}
.cp-ficha-acesso-texto small {
    font-size: 0.72rem;
    color: var(--cp-muted);
}
.cp-ficha-acessos time {
    flex: none;
    font-size: 0.75rem;
    color: var(--cp-muted);
}
@media (max-width: 1279px) {
    .cp-ficha-empresa,
    .cp-ficha-blocos {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 639px) {
    .cp-ficha-numeros {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cp-ficha-dados > div,
    .cp-ficha-pastas li {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.2rem;
    }
}
/* As empresas recolhidas também no celular: o Filament esconde as linhas com
   a classe "hidden", que perdia para o "display: flex" dos cartões (seção 22). */
.cp-lista-por-empresa .fi-ta-table > tbody > tr.fi-ta-row.hidden {
    display: none !important;
}
/* Os números do topo de Colaboradores também verdes (os de Usuários do portal
   já são azuis), menos os que avisam algo (laranja, vermelho). */
.cp-tema-funcionarios .cp-kpi:not(.cp-kpi-warning, .cp-kpi-danger) .cp-kpi-icone {
    background-color: var(--cp-tema-suave);
    color: var(--cp-tema);
}
.cp-tema-funcionarios .cp-kpi:not(.cp-kpi-warning, .cp-kpi-danger) .cp-kpi-valor {
    color: var(--cp-tema);
}
/* No celular, os dois atalhos da empresa numa linha só, com o rótulo curto
   ("Convidar"/"Adicionar" e "Abrir"). */
.cp-grupo-curto {
    display: none;
}
@media (max-width: 639px) {
    .cp-lista-por-empresa .cp-grupo-acoes {
        gap: 0.2rem 1.25rem;
    }
    .cp-grupo-longo {
        display: none;
    }
    .cp-grupo-curto {
        display: inline;
    }
}
/* A página chega com as empresas fechadas (16/10: aparecia aberta e fechava
   em seguida). Até o cp-grupos.js assumir, as linhas das empresas ficam
   escondidas e a seta de cada uma, virada para baixo. Só com o script
   carregado (cp-grupos-js) e na lista agrupada sem busca, na aba "Todos". */
html.cp-grupos-js:not(.cp-grupos-prontos) .cp-grupos-fechados-ao-abrir .fi-ta-table > tbody > tr.fi-ta-row:not(:has(.fi-ta-group-header)) {
    display: none !important;
}
html.cp-grupos-js:not(.cp-grupos-prontos) .cp-grupos-fechados-ao-abrir .fi-ta-group-header .fi-icon-btn {
    transform: rotate(180deg);
}
/* "Quem vê cada pasta" (16/10): quadro com as pessoas nas linhas e as pastas
   nas colunas. Ocupa a largura toda; com muitas pastas, rola dentro do cartão. */
.cp-ficha-bloco-largo {
    grid-column: 1 / -1;
}
.cp-ficha-bloco-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
}
.cp-ficha-bloco-topo > div {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.cp-mapa-legenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    margin: 0;
    font-size: 0.75rem;
    color: var(--cp-muted);
}
.cp-mapa-rolagem {
    margin-top: 0.75rem;
    overflow-x: auto;
    border: 1px solid var(--cp-hair);
    border-radius: var(--cp-radius-sm);
}
.cp-mapa {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}
.cp-mapa th,
.cp-mapa td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--cp-hair);
    text-align: center;
    white-space: nowrap;
}
.cp-mapa tbody tr:last-child > * {
    border-bottom: 0;
}
.cp-mapa thead th {
    background: var(--cp-soft);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cp-text);
}
.cp-mapa th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 13rem;
    background: var(--cp-surface);
    text-align: left;
}
.cp-mapa thead th:first-child {
    background: var(--cp-soft);
}
.cp-mapa tbody tr:hover > * {
    background: var(--cp-tema-fundo);
}
.cp-mapa-pasta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.cp-mapa-pessoa {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.cp-mapa-pessoa span {
    font-weight: 600;
    color: var(--cp-ink);
}
.cp-mapa-pessoa small {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--cp-muted);
}
.cp-mapa-pessoa:hover span {
    color: var(--cp-tema);
    text-decoration: underline;
}
.cp-mapa-acesso {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.cp-mapa-acesso svg {
    width: 0.85rem;
    height: 0.85rem;
}
.cp-mapa-acesso.is-enviar {
    background: var(--cp-tema-suave);
    color: var(--cp-tema);
}
.cp-mapa-acesso.is-ver {
    background: var(--cp-soft);
    color: var(--cp-text);
}
.cp-mapa-acesso.is-nada {
    padding-inline: 0.35rem;
    color: var(--cp-muted);
    font-weight: 400;
}
/* Os últimos acessos também na largura toda, em duas colunas na tela larga. */
@media (min-width: 1024px) {
    .cp-ficha-bloco-largo .cp-ficha-acessos {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem;
    }
}
/* O quadro também muda o acesso (16/10): cada célula é um seletor em forma de
   pílula, na cor do que a pessoa tem ali ("Vê e envia" na cor da tela, "Vê"
   neutro, "Sem acesso" só com o contorno tracejado). */
.cp-mapa-escolha {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.cp-mapa-escolha select {
    -webkit-appearance: none;
    appearance: none;
    min-width: 7.2rem;
    margin: 0;
    padding: 0.25rem 1.7rem 0.25rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--cp-soft);
    box-shadow: none;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cp-text);
    cursor: pointer;
}
.cp-mapa-escolha select:focus {
    outline: none;
    box-shadow: none;
}
.cp-mapa-escolha select:focus-visible {
    outline: 2px solid var(--cp-tema);
    outline-offset: 1px;
}
.cp-mapa-escolha select:disabled {
    opacity: 0.6;
    cursor: progress;
}
.cp-mapa-escolha.is-enviar select {
    background: var(--cp-tema-suave);
    color: var(--cp-tema);
}
.cp-mapa-escolha.is-ver select {
    border-color: var(--cp-border);
    background: var(--cp-soft);
    color: var(--cp-text);
}
.cp-mapa-escolha.is-nada select {
    border: 1px dashed var(--cp-border-strong);
    background: transparent;
    font-weight: 400;
    color: var(--cp-muted);
}
.cp-mapa-escolha select:hover {
    border-color: var(--cp-tema);
}
.cp-mapa-escolha option {
    font-weight: 400;
    color: var(--cp-ink);
    background: var(--cp-surface);
}
.cp-mapa-seta {
    position: absolute;
    right: 0.5rem;
    width: 0.85rem;
    height: 0.85rem;
    color: currentColor;
    pointer-events: none;
}
.cp-mapa-escolha.is-enviar .cp-mapa-seta {
    color: var(--cp-tema);
}
.cp-mapa-escolha.is-ver .cp-mapa-seta,
.cp-mapa-escolha.is-nada .cp-mapa-seta {
    color: var(--cp-muted);
}


/* =========================================================================
   40. MENU DA EMPRESA (22/10): dentro de uma empresa, o menu lateral inteiro
   é o dela (App\Filament\Painel\MenuDaEmpresa): em cima, o cartão com o
   nome e o CNPJ; "Sair da empresa" no lugar do Início; e as pastas na cor de
   cada uma, como os cartões da Central.
   ========================================================================= */

/* Com mais itens que o menu do escritório, um pouco mais justo: numa tela Full
   HD o menu inteiro da empresa cabe sem rolar. */
.fi-sidebar:has(.cp-menu-empresa) {
    --cp-menu-item: 2.5rem;
}

/* O cartão: de qual empresa é o menu (view filament.painel.menu-empresa). */
.cp-menu-empresa {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.7rem 0.55rem 0.7rem 0.7rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-soft);
}
.cp-menu-empresa-sigla {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    overflow: hidden;
    border-radius: 0.5rem;
    background: var(--cp-primary-soft);
    color: var(--cp-primary);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.cp-menu-empresa-sigla img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #fff;
}
.cp-menu-empresa-textos {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.cp-menu-empresa-rotulo {
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--cp-muted);
}
/* Nome longo: até duas linhas, com "…" (o nome inteiro fica no title). */
.cp-menu-empresa-nome {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-size: 0.93rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cp-ink);
}
.cp-menu-empresa-cnpj {
    font-size: 0.78rem;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    color: var(--cp-muted);
}
.cp-menu-empresa-encerrada {
    align-self: flex-start;
    margin-top: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--warning-500), 0.16);
    color: rgb(var(--warning-700));
    font-size: 0.72rem;
    font-weight: 600;
}
.dark .cp-menu-empresa-encerrada {
    color: rgb(var(--warning-400));
}
.cp-menu-empresa-editar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    margin: -0.25rem -0.1rem 0 0;
    border-radius: var(--cp-radius-sm);
    color: var(--cp-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.cp-menu-empresa-editar:hover,
.cp-menu-empresa-editar:focus-visible {
    background: var(--cp-primary-soft);
    color: var(--cp-primary);
    outline: none;
}
.cp-menu-empresa-editar svg {
    width: 1.1rem;
    height: 1.1rem;
}
/* Menu recolhido no computador: só a sigla, na coluna dos ícones (o nome vai no balão). */
.fi-sidebar:not(.fi-sidebar-open) .cp-menu-empresa {
    justify-content: center;
    padding: 0.3rem 0;
    border-color: transparent;
    background: transparent;
}
.fi-sidebar:not(.fi-sidebar-open) .cp-menu-empresa-textos,
.fi-sidebar:not(.fi-sidebar-open) .cp-menu-empresa-editar {
    display: none;
}

/* As pastas: no lugar do ícone, uma pastinha na cor da pasta, com a aba mais
   escura atrás (as cores vêm no style do próprio desenho). */
.cp-menu-pasta {
    display: block;
    width: 100%;
    height: 100%;
}
.cp-menu-pasta-aba {
    fill: var(--cp-pasta-aba);
}
.cp-menu-pasta-corpo {
    fill: var(--cp-pasta-bg);
}
/* "Nova pasta": mais discreta que as pastas, como o botão tracejado da Central. */
.fi-sidebar-item-button[href$="#acao=criarPasta"] .fi-sidebar-item-label {
    font-weight: 400;
    color: var(--cp-muted);
}

/* "Todos os documentos" presa numa empresa: sem a coluna das empresas. */
.cp-explorador.cp-explorador-presa {
    grid-template-columns: minmax(0, 1fr);
}

/* As listas presas numa empresa (Todos, Recebidos, Enviados, Boletos) mostram
   o caminho Empresas › a empresa › a tela, que nas listas comuns fica escondido
   (seção 5). No celular o Filament não mostra o caminho. */
@media (min-width: 640px) {
    .cp-lista-na-empresa .fi-resource-list-records-page .fi-breadcrumbs {
        display: block;
    }
}

/* =========================================================================
   41. TOPO DA CENTRAL DA EMPRESA (22/10): "Novo usuário do portal" entrou e
   Timeline e Editar foram para o "Mais" (a página com .cp-pasta-grid).
   ========================================================================= */

/* Os botões do topo ficam À DIREITA do nome (pedido do usuário, 22/10). O
   nome fica com a largura dele, sem ser espremido (antes ele e o caminho
   quebravam em duas linhas numa tela de 1366); os botões (Ver como fazer,
   Enviar documento, Novo usuário do portal e Mais, onde moram Timeline e
   Editar) ocupam o resto. Se não sobrarem 42rem, a largura de todos numa
   fileira, eles descem para a linha de baixo, ainda à direita. */
@media (min-width: 640px) {
    .fi-page:has(.cp-pasta-grid) .fi-header {
        flex-wrap: wrap;
        row-gap: 1rem;
    }
    .fi-page:has(.cp-pasta-grid) .fi-header > div:first-child {
        flex: 0 1 auto;
    }
    .fi-page:has(.cp-pasta-grid) .fi-header > div:last-child {
        flex: 1 1 42rem;
        justify-content: flex-end;
        margin-top: 0;
    }
    .fi-page:has(.cp-pasta-grid) .fi-header .fi-ac {
        justify-content: flex-end;
        row-gap: 0.6rem;
    }
}