/* ============================================================================
   Portal 4Fin — Portal do Cliente (/portal/)
   ============================================================================

   Carregado depois de p4f-tokens.css e p4f-components.css (ver
   templates/portal/base.html). Aqui mora SÓ o que é layout desta interface:
   casco, barra lateral em modo gaveta e as duas telas com arranjo próprio
   (editor de template e login).

   Tudo que é componente -- botão, campo, cartão, tabela, selo, alerta, KPI,
   estado vazio, prévia de celular -- vem de p4f-components.css, o mesmo
   arquivo que o admin usa. Era esse o ponto do refactor: antes existiam
   `.portal-btn`, `.portal-card`, `.portal-badge`, `.portal-table`... uma
   segunda implementação de cada componente, sem modo escuro e com os quatro
   selos reprovando em contraste (2,1:1 a 3,4:1). Não existem mais.

   Este arquivo não está sozinho na cascata: p4f-tokens.css declara a ordem
   das camadas e tudo abaixo mora em @layer p4f.
   ========================================================================= */

@layer p4f-base {
    body.portal-cliente {
        margin: 0;
        min-height: 100vh;
        background: var(--p4f-canvas);
        color: var(--p4f-text);
        font-family: var(--p4f-font);
        font-size: var(--p4f-text-base);
        line-height: var(--p4f-leading);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body.portal-cliente a { color: var(--p4f-primary-700); }
    body.portal-cliente a:hover { color: var(--p4f-primary-800); }
    html.dark body.portal-cliente a { color: var(--p4f-primary-300); }
    html.dark body.portal-cliente a:hover { color: var(--p4f-primary-200); }

    body.portal-cliente h1,
    body.portal-cliente h2,
    body.portal-cliente h3 { color: var(--p4f-text); }
}

@layer p4f {

/* ==========================================================================
   1. TELAS DE LISTAGEM
   O casco (barra lateral, cabeçalho, área de conteúdo) saiu daqui: passou a
   ser usado por DUAS interfaces -- o Portal do Cliente (/portal/) e o Portal
   do Sacado (<subdominio>.4fin.com.br) -- e a regra do CLAUDE.md é que
   componente compartilhado mora em p4f-shell.css. Ver "5. CASCO DOS PORTAIS"
   lá. Foi por violar essa regra que a barra lateral do portal já apareceu
   uma vez sem estilo nenhum.
   ========================================================================== */

/* Campo de busca (?q=) das telas de listagem do /portal/ -- "Clientes
   com Acesso" e "Clientes (Protheus)" compartilham a mesma UI. */
.portal-busca__campo {
    flex: 1 1 24rem;
}


/* ==========================================================================
   2. EDITOR DE TEMPLATE (formulário + prévia)
   ========================================================================== */

.portal-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--p4f-space-6);
    align-items: start;
}

.portal-editor__form { min-width: 0; }

.portal-editor__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--p4f-space-3);
}

.portal-editor__nota { max-width: 68ch; font-size: var(--p4f-text-xs); }

/* A prévia acompanha a rolagem: em formulário longo, o ponto todo é ver a
   mensagem mudando enquanto se digita lá embaixo. */
@media (min-width: 1100px) {
    .portal-editor { grid-template-columns: minmax(0, 1fr) 340px; }

    .portal-editor__previa {
        position: sticky;
        top: calc(var(--p4f-header-height) + var(--p4f-space-4));
    }
}

/* ==========================================================================
   Busca de cliente Protheus (autocomplete) -- "Clientes com Acesso"
   (templates/portal/sacado_form.html + static/js/portal_sacado_busca_
   cliente.js). Lista de sugestões flutuando sobre o campo de busca.
   ========================================================================== */

.p4f-autocomplete { position: relative; }

.p4f-autocomplete__lista {
    position: absolute;
    /* Vence KPI/cartão vizinhos (que são `position: relative` sem
       z-index) e fica abaixo de sticky/cabeçalho. Só funciona se o
       cartão que a contém tiver .p4f-card--transbordo -- sem isso o
       `overflow: hidden` do cartão recorta a lista antes de qualquer
       disputa de camada. */
    z-index: var(--p4f-z-dropdown);
    top: 100%;
    left: 0;
    right: 0;
    margin: var(--p4f-space-1) 0 0;
    padding: var(--p4f-space-1);
    list-style: none;
    background: var(--p4f-surface);
    border: 1px solid var(--p4f-border);
    border-radius: var(--p4f-radius-sm);
    box-shadow: var(--p4f-shadow-md);
    max-height: 260px;
    overflow-y: auto;
}

.p4f-autocomplete__item {
    padding: var(--p4f-space-2) var(--p4f-space-3);
    border-radius: var(--p4f-radius-xs);
    font-size: var(--p4f-text-sm);
    color: var(--p4f-text);
    cursor: pointer;
}

.p4f-autocomplete__item:hover,
.p4f-autocomplete__item:focus {
    background: var(--p4f-surface-3);
}

.p4f-autocomplete__selecionado {
    margin-top: var(--p4f-space-2);
    font-size: var(--p4f-text-sm);
    color: var(--p4f-text-2);
}

/* ==========================================================================
   Marca do portal do sacado -- tela "Configurações" (templates/portal/
   configuracoes.html). Só a prévia mostrada AQUI, pro gerente; o efeito
   real fica em templates/sacado/* (ver clientes/context_processors.py).
   ========================================================================== */

.p4f-marca-preview__logo {
    max-height: 48px;
    max-width: 240px;
    display: block;
}

.p4f-marca-preview__paleta {
    display: flex;
    gap: var(--p4f-space-1);
}

.p4f-marca-preview__tom {
    width: 28px;
    height: 28px;
    border-radius: var(--p4f-radius-xs);
    border: 1px solid var(--p4f-border);
}

/* <input type="color"> não deve esticar como um campo de texto comum. */
.p4f-input--cor {
    width: 72px;
    min-height: 40px;
    padding: var(--p4f-space-1);
    cursor: pointer;
}


/* --- Avisos de vencimento (/portal/avisos/) ---------------------------
   A régua desenhada: uma faixa horizontal com um marco por aviso e o
   vencimento no meio. É rolável no eixo x de propósito -- régua longa
   não pode empurrar a página inteira pro lado (mesma regra das tabelas
   largas, que vivem dentro de .p4f-table-wrap). */
.portal-regua {
    display: flex;
    align-items: flex-start;
    /* Sem gap de propósito: o trilho é desenhado DENTRO de cada marco
       (::before até o meio, ::after do meio em diante), então qualquer
       espaço entre os itens vira um furo branco no meio do intervalo --
       o flex não pinta o gap. O respiro entre os rótulos vem do padding
       lateral do próprio marco, que o trilho acompanha. */
    gap: 0;
    margin: 0;
    padding: var(--p4f-space-4) 0 var(--p4f-space-2);
    list-style: none;
    overflow-x: auto;
}

.portal-regua__marco {
    position: relative;
    flex: 1 0 auto;
    min-width: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--p4f-space-1);
    text-align: center;
    padding: var(--p4f-space-4) var(--p4f-space-2) 0;
}

/* O trilho que liga um marco ao outro. Metade da largura pra cada lado
   do ponto, então as pontas da régua não ficam com linha sobrando. */
.portal-regua__marco::before,
.portal-regua__marco::after {
    content: "";
    position: absolute;
    top: 9px;
    width: 50%;
    height: 2px;
    background: var(--p4f-border);
}

.portal-regua__marco::before { left: 0; }
.portal-regua__marco::after { right: 0; }
.portal-regua__marco:first-child::before,
.portal-regua__marco:last-child::after { background: transparent; }

.portal-regua__ponto {
    width: 12px;
    height: 12px;
    border-radius: var(--p4f-radius-full);
    background: var(--p4f-primary-600);
    box-shadow: 0 0 0 4px var(--p4f-surface);
    position: absolute;
    top: 4px;
    /* O ::after do trilho é o último na ordem de pintura e cobria o
       lado direito do ponto (efeito "Pac-Man", visível em todos os
       marcos menos no último, cujo ::after é transparente). Os dois são
       position:absolute com z-index:auto, então empatam e vence quem
       vem depois -- este z-index é o desempate. */
    z-index: 1;
}

.portal-regua__rotulo {
    font-size: var(--p4f-text-sm);
    font-weight: var(--p4f-weight-semibold);
    color: var(--p4f-text);
}

.portal-regua__nota {
    font-size: var(--p4f-text-2xs);
    color: var(--p4f-text-3);
    line-height: var(--p4f-leading-tight);
    max-width: 13ch;
}

/* O vencimento é o eixo da régua, não mais um aviso -- losango e tom de
   texto em vez de bolinha colorida, pra ler como marco de referência. */
.portal-regua__marco--vencimento .portal-regua__ponto {
    width: 14px;
    height: 14px;
    /* 2px, não --p4f-radius-xs (6px): com raio de 6 num lado de 14 os
       cantos somem e o "losango" fica idêntico às bolinhas -- só a cor
       mudava, e cor sozinha não distingue forma. */
    border-radius: 2px;
    background: var(--p4f-text);
    transform: rotate(45deg);
    top: 3px;
}

.portal-regua__marco--depois .portal-regua__ponto {
    background: var(--p4f-warning);
}

/* Pausado some da cor mas não some da régua: o buraco na cadência é
   exatamente o que a pessoa precisa enxergar. O texto embaixo escreve
   "pausado" -- cor nunca vem sozinha. */
.portal-regua__marco--pausado .portal-regua__ponto {
    /* Anel sólido e mais grosso: tracejado de 2px num círculo de 12px
       vira quatro arcos que somem em 100%, e o trilho parecia
       simplesmente terminar ali. Vazado lê como "desligado"; o rótulo
       embaixo escreve "pausado", então a forma não está sozinha. */
    background: var(--p4f-surface);
    border: 3px solid var(--p4f-border-strong);
    box-shadow: 0 0 0 4px var(--p4f-surface);
}

.portal-regua__marco--pausado .portal-regua__rotulo {
    color: var(--p4f-text-3);
}

/* --- Barra de filtro do histórico -----------------------------------
   Substitui a fileira de .p4f-kpi clicáveis que existia aqui.

   O KPI é um cartão de PAINEL: 232px de largura mínima, sombra, número
   gigante, elevação no hover. Cinco deles ocupavam duas fileiras inteiras
   e empurravam a tabela -- que é o dado -- pra fora da primeira tela; e
   como cartão não parece controle, ninguém descobria que era clicável.
   Aqui o filtro é um filtro: pílula compacta, rótulo e contagem na mesma
   linha, o selecionado marcado por preenchimento E por aria-pressed. */
.portal-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--p4f-space-2);
}

.portal-filtro {
    display: inline-flex;
    align-items: center;
    gap: var(--p4f-space-2);
    padding: 6px 12px;
    border: 1px solid var(--p4f-border);
    border-radius: var(--p4f-radius-full);
    background: var(--p4f-surface);
    color: var(--p4f-text-2);
    font-size: var(--p4f-text-sm);
    font-weight: var(--p4f-weight-medium);
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--p4f-duration-fast) var(--p4f-ease),
                border-color var(--p4f-duration-fast) var(--p4f-ease),
                color var(--p4f-duration-fast) var(--p4f-ease);
}

.portal-filtro:hover {
    border-color: var(--p4f-primary-400);
    background: var(--p4f-primary-50);
    color: var(--p4f-primary-800);
}

.portal-filtro:focus-visible {
    outline: var(--p4f-focus-ring);
    outline-offset: 2px;
}

/* Bolinha da cor do resultado. Nunca vem sozinha -- o rótulo escrito
   está do lado, e a contagem depois dele. */
.portal-filtro__ponto {
    width: 8px;
    height: 8px;
    border-radius: var(--p4f-radius-full);
    background: var(--p4f-filtro-cor, var(--p4f-text-3));
    flex-shrink: 0;
}

.portal-filtro__contagem {
    font-variant-numeric: tabular-nums;
    font-weight: var(--p4f-weight-semibold);
    color: var(--p4f-text-3);
}

/* Selecionado: fundo sólido, não só borda. Borda de 1px de destaque numa
   pílula clara é diferença que não sobrevive a uma olhada rápida. */
.portal-filtro[aria-current="true"] {
    background: var(--p4f-primary-600);
    border-color: var(--p4f-primary-600);
    color: #ffffff;
}

.portal-filtro[aria-current="true"] .portal-filtro__contagem { color: #ffffff; }
.portal-filtro[aria-current="true"] .portal-filtro__ponto { background: #ffffff; }

.portal-filtro--verde    { --p4f-filtro-cor: var(--p4f-success); }
.portal-filtro--ambar    { --p4f-filtro-cor: var(--p4f-warning); }
.portal-filtro--vermelho { --p4f-filtro-cor: var(--p4f-danger); }
.portal-filtro--ciano    { --p4f-filtro-cor: var(--p4f-accent-600); }

/* Linha única: filtros à esquerda, busca à direita, uma coisa só.
   Empilha no estreito. */
.portal-barra-filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--p4f-space-3);
}

.portal-barra-filtro__busca {
    display: flex;
    align-items: center;
    gap: var(--p4f-space-2);
    flex: 1 1 260px;
    max-width: 380px;
    margin-left: auto;
}


/* --- Formulário do aviso --------------------------------------------
   Duas colunas de MESMA largura (editor | prévia) e, embaixo, o cartão de
   teste ocupando a linha inteira. Antes a prévia e o teste dividiam a
   coluna da direita empilhados: o cartão de teste é uma linha de campo só,
   então ele ficava franzino embaixo de um iframe de 720px e a coluna
   direita terminava muito depois da esquerda.

   Uma coluna só abaixo de 1100px -- o e-mail é uma tabela de 600px e não
   sobrevive a meia tela estreita. */
.portal-aviso {
    display: grid;
    gap: var(--p4f-space-5);
    /* `stretch` (o padrão), não `start`: os dois cartões da linha têm a
       MESMA altura, terminam na mesma horizontal e o rodapé de teste
       encosta reto nos dois. O vazio que `start` evitava foi resolvido na
       origem -- a prévia agora rola por dentro em vez de esticar a linha
       (ver .portal-aviso__previa). */
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1100px) {
    .portal-aviso {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* A faixa inteira, debaixo das duas colunas. */
    .portal-aviso__rodape {
        grid-column: 1 / -1;
    }
}

/* Cartão que preenche a altura da linha do grid -- é isso que faz os dois
   terminarem juntos. Coluna de flex pra o corpo poder crescer e empurrar
   o rodapé (Salvar) pro pé do cartão. */
.portal-aviso__coluna {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.portal-aviso__coluna > .p4f-card__body {
    flex: 1;
    /* min-height:auto de item de flex faria o corpo nunca encolher abaixo
       do conteúdo; sem isto a rolagem interna da prévia não acontece. */
    min-height: 0;
}

/* O corpo do cartão da prévia vira o contêiner de rolagem do e-mail. */
.portal-aviso__coluna--previa > .p4f-card__body {
    display: flex;
    flex-direction: column;
}

/* Piso da linha: com pouca coisa nos campos, o formulário sozinho seria
   baixo demais e o e-mail apareceria só pela metade. */
@media (min-width: 1100px) {
    .portal-aviso__coluna { min-height: 720px; }
}

/* A prévia ROLA por dentro em vez de esticar a linha.

   O e-mail passa de 1400px com o bloco do Pix ligado e muda de tamanho a
   cada tecla. Deixar a moldura crescer junto era escolher entre cortar o
   QR ou abrir um vazio de centenas de pixels no cartão ao lado -- as duas
   coisas que estavam erradas aqui. Rolando, a altura é a da LINHA (a
   mesma dos dois cartões) e o e-mail inteiro continua alcançável. */
.portal-aviso__previa {
    width: 100%;
    flex: 1;
    height: auto;
    min-height: 420px;
    border: 1px solid var(--p4f-border);
    border-radius: var(--p4f-radius-md);
    /* O e-mail tem fundo próprio e é HTML de outro contexto -- branco fixo
       impede o modo escuro do portal de vazar pra dentro e mostrar uma
       prévia que não é o que o cliente recebe. */
    background: #ffffff;
    display: block;
}


/* --- Campos do formulário do aviso ----------------------------------
   `.p4f-field` já tem `margin-bottom: --p4f-space-4`. Dentro de um
   `.p4f-stack` (gap: --p4f-space-5) os dois se SOMAM: 36px entre um campo
   e o outro, e cada `<p class="p4f-field__help">` solto no meio ganhava
   mais um gap inteiro só pra ele. Era o "espaço que vai crescendo" ao
   montar o corpo do e-mail.

   Aqui o espaçamento vem de um lugar só: a coluna define o gap e as
   margens de dentro são zeradas. */
.portal-aviso__campos {
    display: flex;
    flex-direction: column;
    gap: var(--p4f-space-4);
}

.portal-aviso__campos > .p4f-field { margin-bottom: 0; }

/* Grupo = rótulo + controle + ajuda colados, um bloco só na coluna.
   A ajuda anda com o campo dela em vez de virar um item de pilha. */
.portal-aviso__grupo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.portal-aviso__grupo > .p4f-field { margin-bottom: 0; }
.portal-aviso__grupo > .p4f-field__help { margin-top: 0; }

/* "Enviar [2] [dias antes do vencimento]" -- lê como frase, então os dois
   controles ficam na mesma linha, número primeiro. */
.portal-aviso__quando {
    display: grid;
    gap: var(--p4f-space-3);
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: end;
}

@media (max-width: 480px) {
    .portal-aviso__quando { grid-template-columns: minmax(0, 1fr); }
}

/* O corpo do e-mail é o campo principal da tela: nasce alto. */
.portal-aviso__campos #id_corpo {
    min-height: 200px;
    resize: vertical;
}

/* Caixa das variáveis, encostada no campo de corpo: é ferramenta DELE,
   não mais uma seção do formulário. */
.portal-aviso__vars {
    padding: var(--p4f-space-3);
    border: 1px dashed var(--p4f-border-strong);
    border-radius: var(--p4f-radius);
    background: var(--p4f-surface-3);
}

.portal-aviso__vars-titulo {
    margin: 0 0 var(--p4f-space-2);
    font-size: var(--p4f-text-xs);
    font-weight: var(--p4f-weight-semibold);
    color: var(--p4f-text-2);
}

/* Chips de variável.

   NÃO reusar `.p4f-vars__token`: apesar do nome, ela declara só
   `flex-shrink: 0` -- no editor de template do WhatsApp o visual de chip
   vem de `.p4f-code` num `<code>`. Num `<button>` sem classe visual sobra
   a folha do NAVEGADOR (borda outset, Arial 13px, cursor default). */
.portal-aviso__tokens {
    display: flex;
    flex-wrap: wrap;
    gap: var(--p4f-space-2);
}

/* Rótulo em português, o token nunca aparece: quem escreve o e-mail pensa
   "nome do cliente", não "{{sacado}}". O exemplo vai no title. */
.portal-aviso__token {
    display: inline-flex;
    align-items: center;
    gap: var(--p4f-space-1);
    padding: 5px 11px;
    border: 1px solid var(--p4f-border);
    border-radius: var(--p4f-radius-full);
    background: var(--p4f-surface);
    color: var(--p4f-text-2);
    font-family: var(--p4f-font);
    font-size: var(--p4f-text-xs);
    font-weight: var(--p4f-weight-medium);
    line-height: 1.4;
    cursor: pointer;
    transition: background var(--p4f-duration-fast) var(--p4f-ease),
                border-color var(--p4f-duration-fast) var(--p4f-ease),
                color var(--p4f-duration-fast) var(--p4f-ease);
}

.portal-aviso__token::before {
    content: "+";
    font-weight: var(--p4f-weight-bold);
    color: var(--p4f-text-3);
}

.portal-aviso__token:hover {
    border-color: var(--p4f-primary-400);
    background: var(--p4f-primary-50);
    color: var(--p4f-primary-800);
}

.portal-aviso__token:hover::before { color: var(--p4f-primary-600); }

.portal-aviso__token:focus-visible {
    outline: var(--p4f-focus-ring);
    outline-offset: 2px;
}

/* Rodapé do formulário: vem logo depois do último campo. */
.portal-aviso__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--p4f-space-3);
    padding: var(--p4f-space-4) var(--p4f-space-5);
    border-top: 1px solid var(--p4f-border);
    background: var(--p4f-surface-2);
}

.portal-aviso__acoes-dica {
    margin: 0;
    margin-right: auto;
    font-size: var(--p4f-text-xs);
    color: var(--p4f-text-3);
}

/* Linha do cartão de teste: campo + botão, sem estourar a largura toda
   agora que ele ocupa a página inteira. É <fieldset> quando desabilitado,
   daí o reset de borda/margem/padding que o elemento traz do navegador. */
.portal-aviso__teste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--p4f-space-3);
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.portal-aviso__teste .p4f-input { flex: 1 1 260px; max-width: 420px; }

/* Desabilitado: os controles continuam à vista (mostram o que a função
   é) mas apagados, e o aviso ao lado diz o que falta. `[disabled]` no
   fieldset já bloqueia teclado e submit -- isto é só a leitura visual. */
.portal-aviso__teste[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.portal-aviso__teste[disabled] .p4f-input,
.portal-aviso__teste[disabled] .p4f-btn {
    pointer-events: none;
}

/* Cartão de teste bloqueado: fundo rebaixado pra ler como "ainda não" sem
   parecer erro (erro é vermelho, e não há nada errado aqui). */
.portal-aviso__rodape--bloqueado {
    background: var(--p4f-surface-2);
    border-style: dashed;
}

/* O aviso do que falta, acima dos controles apagados. */
.portal-aviso__bloqueio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--p4f-space-3);
    margin-bottom: var(--p4f-space-4);
}

.portal-aviso__bloqueio-icone {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--p4f-text-3);
    align-self: flex-start;
    margin-top: 2px;
}

.portal-aviso__bloqueio-texto {
    flex: 1 1 32ch;
    min-width: 0;
    font-size: var(--p4f-text-sm);
    color: var(--p4f-text-3);
}

.portal-aviso__bloqueio-texto p { margin: 0; }

.portal-aviso__bloqueio-titulo {
    font-weight: var(--p4f-weight-semibold);
    color: var(--p4f-text-2);
}

.portal-aviso__corpo {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow: auto;
}



/* --- Call center -----------------------------------------------------
   O terceiro diálogo que abre sobre a linha da tabela de faturas, depois
   dos de Pix e código de barras -- e por isso o cabeçalho dele NÃO é
   escrito aqui: vem de `.p4f-pagar__*` (p4f-components.css), classe por
   classe. Aqueles dois já argumentam no próprio CSS que desenho
   diferente faz o segundo diálogo parecer outra fatura; um terceiro com
   cabeçalho próprio quebraria isso na hora.

   O que este arquivo acrescenta é só o que os outros dois não têm: uma
   conversa com N entradas e um formulário. A gramática é a mesma dos
   três -- contexto sem moldura, UMA caixa colorida, dica miúda. Lá a
   caixa é o código que se copia; aqui é o formulário que se preenche.

   Largura maior que os 27rem de `.p4f-pagar`: aqueles mostram uma linha
   de número, este tem prosa e dois campos lado a lado. A identidade vem
   do cabeçalho e da gramática, não da medida -- e a 27rem os campos
   ficariam em coluna única, o que é pior de preencher no meio de uma
   ligação. */

.portal-cc__caixa {
    max-width: 34rem;
    display: flex;
    flex-direction: column;
    /* Âncora do botão de fechar, que fica no canto da CAIXA e não na
       linha do título -- ver .portal-cc__fechar. */
    position: relative;
    /* O diálogo nunca passa da tela: o histórico cresce sem teto (N
       negociações por título) e sem isto o formulário sai pela borda de
       baixo, sem rolagem que o alcance. */
    max-height: min(88vh, 900px);
}

/* Rola só o conteúdo: o título do diálogo e o botão de fechar ficam
   parados, que é o que se procura quando a conversa é longa. */
.portal-cc__corpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Espaço pro anel de foco dos campos não ser cortado pela rolagem. */
    padding: 2px;
    margin: -2px;
}

/* Fechar no canto da caixa, acima de tudo (o histórico rola por baixo).
   Não usa `.p4f-btn--icon` porque não é um botão de ação: sem moldura e
   sem fundo parado, ele fica discreto ao lado do título e só ganha corpo
   no hover/foco. A área de toque é 40px mesmo com o X desenhado a 16 --
   alvo pequeno num canto é o que faz a pessoa clicar fora e fechar sem
   querer. */
.portal-cc__fechar {
    position: absolute;
    top: var(--p4f-space-2);
    right: var(--p4f-space-2);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--p4f-radius-full);
    background: none;
    color: var(--p4f-text-3);
    cursor: pointer;
    transition: background-color var(--p4f-duration-fast) var(--p4f-ease),
                color var(--p4f-duration-fast) var(--p4f-ease);
}

.portal-cc__fechar svg { width: 16px; height: 16px; }

.portal-cc__fechar:hover {
    background-color: var(--p4f-surface-3);
    color: var(--p4f-text);
}

.portal-cc__fechar:focus-visible {
    outline: var(--p4f-focus-ring);
    outline-offset: 2px;
    color: var(--p4f-text);
}

/* O X mora numa faixa própria ACIMA do título, não ao lado dele: assim a
   linha do título fica inteira (e um título mais longo, noutro idioma,
   não passa por baixo do botão), e o fechar cai exatamente onde a mão
   procura -- o canto, não a meia altura do cabeçalho. O padding aqui é o
   que abre essa faixa; sem ele o título subiria por baixo do X, que está
   fora do fluxo. */
.portal-cc__caixa .p4f-pagar__topo { padding-top: var(--p4f-space-6); }

.portal-cc__carregando[hidden],
.portal-cc__falha[hidden] { display: none; }

.portal-cc__carregando {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--p4f-space-2);
    padding: var(--p4f-space-8) 0;
    text-align: center;
}

.portal-cc__falha { display: flex; margin-top: var(--p4f-space-4); }

/* O cabeçalho fecha com um fio, separando "de quem é este título" de "o
   que já se conversou". */
.portal-cc__cabeca {
    padding-bottom: var(--p4f-space-4);
    border-bottom: 1px solid var(--p4f-border);
}

/* Empresa e situação na mesma linha, alinhadas pela base do texto: o
   selo é a resposta de "por que estou ligando", não um campo da grade
   abaixo. `baseline` e não `center` -- com `center` o selo flutua acima
   da linha de base do nome e os dois parecem desencontrados. */
.portal-cc__quem {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--p4f-space-3);
}

.portal-cc__quem .p4f-pagar__empresa { margin: 0; }

/* Três colunas que COMEÇAM no mesmo lugar e quebram juntas. O
   `.p4f-pagar__resumo` dos diálogos de pagamento usa `space-between`,
   que numa caixa de 27rem aproxima os campos e aqui, a 34rem, jogaria o
   vencimento sozinho contra a borda oposta -- longe do valor, que é
   justamente o dado com que ele se lê em par.

   `auto-fit` com mínimo de 9rem: em tela estreita viram duas colunas e
   depois uma, sempre alinhadas à esquerda, sem nenhum campo órfão
   pendurado na direita. */
.portal-cc__resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--p4f-space-4);
    margin: var(--p4f-space-4) 0 0;
}

.portal-cc__resumo > div { margin: 0; }
.portal-cc__resumo dd { margin: 2px 0 0; }

/* O maior corpo do cabeçalho. É o número em torno do qual a conversa
   inteira acontece ("consigo pagar metade este mês") -- estava do mesmo
   tamanho da data de vencimento, que ninguém negocia. */
.portal-cc__valor {
    font-size: var(--p4f-text-lg);
    font-weight: var(--p4f-weight-semibold);
    line-height: var(--p4f-leading-tight);
    color: var(--p4f-text);
    font-variant-numeric: tabular-nums;
}

/* --- Histórico: linha do tempo --- */

.portal-cc__secao { margin-top: var(--p4f-space-5); }

.portal-cc__secao-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--p4f-space-3);
    margin-bottom: var(--p4f-space-4);
}

.portal-cc__secao-topo h3 { margin: 0; }

/* Link, não botão: imprimir é navegação (abre uma página), e um botão
   sólido aqui competiria com o de registrar, que é a ação do diálogo. */
.portal-cc__imprimir {
    display: inline-flex;
    align-items: center;
    gap: var(--p4f-space-2);
    color: var(--p4f-info-text);
    font-size: var(--p4f-text-sm);
    font-weight: var(--p4f-weight-medium);
    text-decoration: none;
}

.portal-cc__imprimir:hover { text-decoration: underline; }

.portal-cc__imprimir:focus-visible {
    outline: var(--p4f-focus-ring);
    outline-offset: 3px;
    border-radius: var(--p4f-radius-sm);
}

.portal-cc__linha {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Duas colunas: o marcador do canal e o que foi dito. A largura do
   marcador é fixa pra que a linha vertical caia no mesmo lugar em todos
   os eventos -- é ela que faz isto ser uma sequência e não uma pilha. */
.portal-cc__evento {
    position: relative;
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: var(--p4f-space-3);
    padding-bottom: var(--p4f-space-5);
}

.portal-cc__evento:last-child { padding-bottom: 0; }

/* O fio que liga um contato ao seguinte. No último não existe: a
   conversa acabou ali, e um fio para o nada sugere que falta algo. */
.portal-cc__evento:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 32px;
    bottom: 4px;
    width: 2px;
    border-radius: 1px;
    background: var(--p4f-border);
}

/* O marcador É o canal -- ícone e cor dizem por onde foi a conversa. A
   cor vem do par tokenizado do canal (definido por evento, abaixo), que
   é o mesmo par usado pelos selos do design system e já tem contraste
   conferido nos dois temas. */
.portal-cc__marco {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--p4f-cc-borda, var(--p4f-border));
    border-radius: var(--p4f-radius-full);
    background: var(--p4f-cc-fundo, var(--p4f-surface-2));
    color: var(--p4f-cc-cor, var(--p4f-text-3));
}

.portal-cc__marco svg { width: 15px; height: 15px; }

.portal-cc__evento--whatsapp {
    --p4f-cc-fundo: var(--p4f-success-bg);
    --p4f-cc-borda: var(--p4f-success-border);
    --p4f-cc-cor: var(--p4f-success-text);
}

.portal-cc__evento--telefone {
    --p4f-cc-fundo: var(--p4f-info-bg);
    --p4f-cc-borda: var(--p4f-info-border);
    --p4f-cc-cor: var(--p4f-info-text);
}

.portal-cc__evento--email {
    --p4f-cc-fundo: var(--p4f-warning-bg);
    --p4f-cc-borda: var(--p4f-warning-border);
    --p4f-cc-cor: var(--p4f-warning-text);
}

/* "Outros" fica no neutro de propósito: é o canal que quer dizer "não
   foi nenhum dos três", e uma quarta cor forte na régua faria a tela
   parecer um gráfico. */

.portal-cc__evento-corpo { min-width: 0; }

.portal-cc__evento-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--p4f-space-2);
    margin: 0 0 var(--p4f-space-1);
}

/* Nome do canal escrito, sempre ao lado do marcador colorido: cor nunca
   vem sozinha, e no papel (impressão sem fundos) é o que sobra. */
.portal-cc__canal {
    font-size: var(--p4f-text-2xs);
    font-weight: var(--p4f-weight-semibold);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--p4f-cc-cor, var(--p4f-text-3));
}

.portal-cc__quando {
    font-size: var(--p4f-text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--p4f-text-3);
}

.portal-cc__contato {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--p4f-space-2);
    margin: 0 0 var(--p4f-space-2);
    font-size: var(--p4f-text-sm);
    color: var(--p4f-text);
}

.portal-cc__telefone {
    font-variant-numeric: tabular-nums;
    /* Na coluna estreita da tabela o número quebrava em "(11) 98765-" /
       "4321" -- telefone partido no meio é telefone que ninguém disca. */
    white-space: nowrap;
    color: var(--p4f-text-3);
}

/* O que foi dito é o conteúdo do evento -- corpo de texto normal, sem
   moldura. A moldura está reservada pra peça de registrar; duas caixas
   competindo era o que deixava o diálogo pesado. */
.portal-cc__descricao {
    font-size: var(--p4f-text-sm);
    line-height: var(--p4f-leading);
    color: var(--p4f-text-2);
    /* Colado de outro lugar, o texto pode trazer uma URL sem espaço --
       sem isto ela empurra a largura do diálogo inteiro. */
    overflow-wrap: anywhere;
}

.portal-cc__descricao p { margin: 0 0 var(--p4f-space-2); }
.portal-cc__descricao p:last-child { margin-bottom: 0; }

.portal-cc__anexos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--p4f-space-2);
    margin: var(--p4f-space-3) 0 0;
    padding: 0;
    list-style: none;
}

.portal-cc__anexo {
    display: inline-flex;
    align-items: center;
    gap: var(--p4f-space-2);
    max-width: 100%;
    padding: 3px 9px;
    border: 1px solid var(--p4f-border);
    border-radius: var(--p4f-radius-full);
    background: var(--p4f-surface-2);
    color: var(--p4f-text-2);
    font-size: var(--p4f-text-xs);
    text-decoration: none;
}

.portal-cc__anexo:hover {
    border-color: var(--p4f-primary-400);
    color: var(--p4f-primary-800);
}

.portal-cc__anexo:focus-visible {
    outline: var(--p4f-focus-ring);
    outline-offset: 2px;
}

.portal-cc__anexo-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 24ch;
}

.portal-cc__anexo-tamanho {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--p4f-text-3);
}

.portal-cc__evento-pe {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--p4f-space-2);
    margin-top: var(--p4f-space-2);
    font-size: var(--p4f-text-xs);
    color: var(--p4f-text-3);
}

/* `margin-left:auto` e não `justify-content` no pai: quando não há autor
   (usuário apagado), o Excluir tem que continuar na direita em vez de
   escorregar pra esquerda sozinho. */
.portal-cc__excluir { margin-left: auto; }

/* Link de texto, não botão: é a ação menos usada do diálogo e a única
   destrutiva. Um botão a mais aqui puxaria o olho pra ela. Vermelho só
   no hover -- parado, ela não precisa gritar. */
.portal-cc__excluir-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--p4f-text-3);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.portal-cc__excluir-btn:hover { color: var(--p4f-danger); }

.portal-cc__excluir-btn:focus-visible {
    outline: var(--p4f-focus-ring);
    outline-offset: 2px;
    border-radius: var(--p4f-radius-sm);
}

/* --- A peça: registrar --- */

.portal-cc__form { margin-top: var(--p4f-space-5); }

/* Herda a moldura, o fundo e o botão colado na base de
   `.p4f-pagar__peca`. O que muda é o miolo: lá é um código, aqui são
   campos, então precisa de respiro interno. */
.portal-cc__campos {
    display: flex;
    flex-direction: column;
    gap: var(--p4f-space-3);
    /* Fundo menor que os lados: o botão de registrar fecha a peça
       encostado no último campo, como o de copiar encosta no código lá
       no Pix. Com o padding igual em volta sobrava uma faixa vazia que
       fazia o botão parecer solto da moldura. */
    padding: var(--p4f-space-3) var(--p4f-space-4) var(--p4f-space-3);
}

.portal-cc__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--p4f-space-3);
}

/* --- Lista do menu Call center --- */

.portal-cc__previa {
    max-width: 46ch;
    font-size: var(--p4f-text-sm);
    color: var(--p4f-text-2);
    overflow-wrap: anywhere;
}

/* Na TABELA o canal continua sendo selo, não marcador: ali ele é uma
   coluna entre outras, e a coluna ao lado (Situação) já é selo -- duas
   gramáticas na mesma linha seria o estranho. Os pares são os mesmos. */
.portal-cc__canal--whatsapp {
    background: var(--p4f-success-bg);
    border-color: var(--p4f-success-border);
    color: var(--p4f-success-text);
}

.portal-cc__canal--telefone {
    background: var(--p4f-info-bg);
    border-color: var(--p4f-info-border);
    color: var(--p4f-info-text);
}

.portal-cc__canal--email {
    background: var(--p4f-warning-bg);
    border-color: var(--p4f-warning-border);
    color: var(--p4f-warning-text);
}

/* Pílula de filtro azul -- as outras quatro cores já existem acima. */
.portal-filtro--azul { --p4f-filtro-cor: var(--p4f-primary-600); }

/* Contador no botão da linha da tabela ("Call center · 2"). Escondido
   quando é zero: um "0" ao lado do rótulo em toda linha seria ruído, e o
   que interessa é justamente onde JÁ houve conversa. */
.portal-cc__contagem[hidden] { display: none; }

.portal-cc__contagem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--p4f-radius-full);
    background: var(--p4f-primary-600);
    color: #ffffff;
    font-size: 11px;
    font-weight: var(--p4f-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* --- Folha de impressão --- */

.portal-cc-folha__cabecalho {
    padding-bottom: var(--p4f-space-4);
    margin-bottom: var(--p4f-space-5);
    border-bottom: 2px solid var(--p4f-border);
}

.portal-cc-folha__marca {
    margin: 0 0 2px;
    font-size: var(--p4f-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--p4f-text-3);
}

.portal-cc-folha__empresa {
    margin: 0 0 var(--p4f-space-4);
    font-size: var(--p4f-text-lg);
    font-weight: var(--p4f-weight-semibold);
    color: var(--p4f-text);
}

.portal-cc-folha__pe {
    margin-top: var(--p4f-space-5);
    padding-top: var(--p4f-space-3);
    border-top: 1px solid var(--p4f-border);
    font-size: var(--p4f-text-xs);
    color: var(--p4f-text-3);
}

/* --- Diálogos de "Clientes com Acesso" --------------------------------
   Dois, gêmeos: EXCLUIR (`_modal_sacado_excluir.html` + `portal_sacado_
   excluir.js`, na lista) e REATIVAR (`_modal_sacado_reativar.html` +
   `_corpo.html` + `portal_sacado_reativar.js`, no cadastro). São os dois
   lados da mesma moeda -- um tira o cliente da lista, o outro o traz de
   volta -- e por isso dividem o casco `.portal-dialogo__*`: caixa,
   fechar, contexto, quadro, ficha e rodapé. Mexeu num, mexa no outro.

   `.portal-reativar__*` é só o que o de reativação tem a mais: o corpo
   buscado por fetch (o outro não busca nada -- os dados vêm do botão
   clicado, como nos diálogos de Pix e código de barras) e a escolha
   entre várias fichas.

   Mora aqui e não em p4f-components.css porque só o portal do gerente
   gerencia sacado -- o casco compartilhado (.p4f-modal, .p4f-pagar__topo/
   __titulo/__rotulo/__dica) continua vindo de lá, como no diálogo de call
   center. A gramática é a dos diálogos de pagamento: contexto sem
   moldura, UMA caixa (a ficha), instrução miúda. A caixa aqui não é
   colorida como a peça do Pix de propósito: lá ela é o que a pessoa vai
   copiar; aqui é o que ela vai CONFERIR antes de decidir, e destaque de
   cor num dado que talvez não sirva empurra pro "sim" sem leitura.
   --------------------------------------------------------------------- */

.portal-dialogo__caixa {
    max-width: 34rem;
    display: flex;
    flex-direction: column;
    /* Âncora do fechar, no canto da CAIXA -- ver .portal-cc__fechar, de
       onde este desenho vem inteiro. */
    position: relative;
    max-height: min(88vh, 900px);
}

.portal-dialogo__fechar {
    position: absolute;
    top: var(--p4f-space-2);
    right: var(--p4f-space-2);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--p4f-radius-full);
    background: none;
    color: var(--p4f-text-3);
    cursor: pointer;
    transition: background-color var(--p4f-duration-fast) var(--p4f-ease),
                color var(--p4f-duration-fast) var(--p4f-ease);
}

.portal-dialogo__fechar svg { width: 16px; height: 16px; }

.portal-dialogo__fechar:hover {
    background-color: var(--p4f-surface-3);
    color: var(--p4f-text);
}

.portal-dialogo__fechar:focus-visible {
    outline: var(--p4f-focus-ring);
    outline-offset: 2px;
    color: var(--p4f-text);
}

/* Faixa própria pro X acima do título, como no call center: sem ela o
   título passa por baixo do botão, que está fora do fluxo. */
.portal-dialogo__caixa .p4f-pagar__topo { padding-top: var(--p4f-space-6); }

.portal-reativar__corpo {
    flex: 1 1 auto;
    min-height: 0;
    /* O corpo inteiro rola quando a tela é curta; o quadro das fichas
       rola por dentro quando são muitas. Um sem o outro deixa o rodapé
       (onde estão Cancelar/Reativar) fora de alcance em telas baixas. */
    overflow-y: auto;
    padding: 2px;
    margin: -2px;
}

.portal-reativar__carregando[hidden],
.portal-reativar__falha[hidden] { display: none; }

.portal-reativar__carregando {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--p4f-space-2);
    padding: var(--p4f-space-8) 0;
    text-align: center;
}

.portal-reativar__falha { display: flex; margin-top: var(--p4f-space-4); }

/* Contexto: prosa solta, sem moldura -- é o primeiro dos três degraus. */
.portal-dialogo__contexto {
    margin: var(--p4f-space-2) 0 var(--p4f-space-5);
    font-size: var(--p4f-text-sm);
    line-height: var(--p4f-leading);
    color: var(--p4f-text-3);
}

/* Rótulo do quadro e o "Editar" na mesma linha: o botão age sobre o que
   está logo abaixo, então fica encostado nele, não no rodapé (que decide
   o diálogo inteiro). */
.portal-reativar__quadro-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--p4f-space-3);
    margin-bottom: var(--p4f-space-2);
}

/* A caixa: uma só. Com rolagem PRÓPRIA porque na reativação o CNPJ pode
   ter vários cadastros excluídos -- sem o teto, uma lista longa empurra
   o rodapé de decisão pra fora da tela. No diálogo de excluir há sempre
   uma ficha só e o teto nunca chega a valer. */
.portal-dialogo__quadro {
    max-height: 20rem;
    overflow-y: auto;
    border: 1px solid var(--p4f-border);
    border-radius: var(--p4f-radius-md);
    background: var(--p4f-surface-2);
}

.portal-dialogo__item {
    display: flex;
    /* Topo, não centro: o radio pertence à ficha inteira, mas quem o
       lê procura por ele na altura do NOME -- centralizado numa ficha
       de seis campos ele flutua no meio do nada. */
    align-items: flex-start;
    gap: var(--p4f-space-3);
    padding: var(--p4f-space-4);
}

/* Só a ficha que É uma escolha (a etiqueta do radio, na reativação) tem
   mão de clique -- no diálogo de excluir a ficha é leitura, e um cursor
   de clique ali promete uma ação que não existe. */
label.portal-dialogo__item { cursor: pointer; }

/* Fio entre fichas, nunca antes da primeira. */
.portal-dialogo__item + .portal-dialogo__item {
    border-top: 1px solid var(--p4f-border);
}

.portal-reativar__escolha {
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--p4f-primary-600);
}

.portal-dialogo__ficha { min-width: 0; flex: 1 1 auto; }

.portal-dialogo__nome {
    margin: 0 0 var(--p4f-space-3);
    font-size: var(--p4f-text-md);
    font-weight: var(--p4f-weight-semibold);
    line-height: var(--p4f-leading-tight);
    color: var(--p4f-text);
    overflow-wrap: anywhere;
}

/* Duas colunas em tela larga, uma em telas estreitas: são rótulos curtos
   com dados curtos, e uma coluna só faria a ficha ficar mais alta que a
   caixa por nada. */
.portal-dialogo__dados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--p4f-space-3) var(--p4f-space-4);
    margin: 0;
}

.portal-dialogo__dado {
    margin: 2px 0 0;
    font-size: var(--p4f-text-sm);
    line-height: var(--p4f-leading);
    color: var(--p4f-text);
    overflow-wrap: anywhere;
}

.portal-reativar__excluido-em {
    margin: var(--p4f-space-3) 0 0;
    font-size: var(--p4f-text-xs);
    color: var(--p4f-text-3);
}

/* Rodapé: cancelar à esquerda do confirmar, o padrão do resto do portal
   (ver o par Cancelar/Salvar dos formulários). */
.portal-dialogo__rodape {
    display: flex;
    justify-content: flex-end;
    gap: var(--p4f-space-2);
    margin-top: var(--p4f-space-5);
}

/* --- Só do diálogo de excluir ---------------------------------------- */

/* Mais estreito que o de reativação (34rem): aqui a ficha é sempre UMA e
   não há lista pra escolher nem prosa longa -- na largura do outro, o
   conteúdo boiaria no meio de uma caixa vazia. Os dois não abrem sobre a
   mesma linha (um é a lista, o outro é o cadastro), então a diferença de
   medida não confunde uma tela com a outra. */
.portal-excluir__caixa {
    max-width: 30rem;
}

/* --- Impressão -------------------------------------------------------
   Só o que é DESTA interface. O casco (barra lateral, cabeçalho, largura
   da página) é impresso igual no portal do sacado, então as regras dele
   moram em p4f-shell.css -- mesma razão de o casco em si morar lá: aquele
   subdomínio não carrega este arquivo. Ver SacadoTelaIgualAoPainelTests,
   que trava isso. */
@media print {
    /* Cada negociação inteira na mesma página: uma conversa partida ao
       meio pela quebra é justamente o que ninguém consegue ler depois. */
    .portal-cc__evento {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

} /* @layer p4f */