/* ============================================================================
   Portal 4Fin — Casco compartilhado (barra lateral, cabeçalho, telas de login)
   ============================================================================

   Carregado pelas TRÊS interfaces: pelo admin via UNFOLD["STYLES"]
   (settings.py) e pelo Portal do Cliente e do Sacado via
   templates/casco/_head.html.

   Por que existe: as duas UIs passaram a usar o mesmo casco -- mesma barra
   lateral, mesmo cabeçalho de página, mesma tela de login. Enquanto essas
   regras moravam no p4f-admin.css (que só o admin carrega), o portal renderizava
   o markup certo sem estilo nenhum: ícone SVG em tamanho natural, menu
   empilhado, avatar solto. Componente compartilhado tem que morar em arquivo
   compartilhado.

   Depende de p4f-tokens.css (variáveis + ordem de camadas) e de
   p4f-components.css (átomos). O que é específico de uma interface fica em
   p4f-admin.css (admin/Unfold) ou portal_cliente.css (portal).
   ========================================================================= */

/* Normalização do elemento nu nas páginas FORA do admin (portal, sacado).
   Eram duas cópias idênticas (portal_cliente.css e portal_sacado.css). Em
   @layer p4f-base: normalização de elemento vem antes de utilities e nunca
   atropela um componente. O admin tem a dele em p4f-admin.css (#main). */
@layer p4f-base {
    body.portal-cliente,
    body.portal-sacado {
        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;
    }

    /* Rampa primária e não --p4f-link: no sacado a cor de marca do Cliente
       (context_processors.marca_sacado) sobrescreve --p4f-primary-*, e o
       link tem que acompanhar. */
    :is(body.portal-cliente, body.portal-sacado) a { color: var(--p4f-primary-700); }
    :is(body.portal-cliente, body.portal-sacado) a:hover { color: var(--p4f-primary-800); }
    html.dark :is(body.portal-cliente, body.portal-sacado) a { color: var(--p4f-primary-300); }
    html.dark :is(body.portal-cliente, body.portal-sacado) a:hover { color: var(--p4f-primary-200); }

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

@layer p4f {

/* ==========================================================================
   1. BARRA LATERAL
   ========================================================================== */

.p4f-nav-wrap {
    position: relative;
    z-index: var(--p4f-z-sidebar);
    flex-shrink: 0;
    width: var(--p4f-sidebar-width);
    transition: width var(--p4f-duration-slow) var(--p4f-ease-out);
}

.p4f-nav {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    display: flex;
    flex-direction: column;
    width: inherit;
    background: var(--p4f-nav-bg);
    border-inline-end: 1px solid var(--p4f-nav-border);
    /* Visível porque o botão de recolher fica pendurado sobre a divisória. */
    overflow: visible;
    transition: width var(--p4f-duration-slow) var(--p4f-ease-out);
}

.p4f-nav__inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.p4f-nav-scrim {
    display: none;
}

/* --- Marca ---------------------------------------------------------------- */

.p4f-nav__brand {
    display: flex;
    align-items: center;
    gap: var(--p4f-space-2);
    height: var(--p4f-header-height);
    flex-shrink: 0;
    padding-inline: var(--p4f-space-4);
    border-bottom: 1px solid var(--p4f-nav-border);
}

.p4f-nav__brand-link {
    display: flex;
    align-items: center;
    gap: var(--p4f-space-3);
    min-width: 0;
    flex-grow: 1;
    text-decoration: none;
    color: inherit;
}

.p4f-brandmark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--p4f-radius);
    background: var(--p4f-gradient-brand);
    color: #ffffff;
    box-shadow: var(--p4f-shadow-sm);
}

.p4f-brandmark .material-symbols-outlined { font-size: 20px; }
/* SVG sem largura/altura ocupa a caixa inteira (ver .p4f-nav__account-link
   svg). O ícone vem de clientes/icones.py nas três interfaces. */
.p4f-brandmark svg { width: 20px; height: 20px; }
.p4f-brandmark img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }

/* Logo da empresa no selo (Cliente.sacado_logo): círculo PREENCHIDO. A
   imagem cobre o círculo inteiro e é centralizada -- o que não couber na
   proporção é cortado nas bordas, em vez de sobrar faixa vazia em volta de
   uma logo larga (que com `contain` virava um risco no meio do selo).
   casco/_nav.html põe a classe quando a marca tem logo; a prévia em
   portal/configuracoes.html usa a mesma. */
.p4f-brandmark--foto {
    overflow: hidden;
    border-radius: var(--p4f-radius-full);
    background: var(--p4f-surface);
}

.p4f-brandmark--foto img {
    object-fit: cover;
    object-position: center;
}

.p4f-nav__brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.p4f-nav__brand-title {
    font-size: var(--p4f-text-md);
    font-weight: var(--p4f-weight-semibold);
    letter-spacing: -0.01em;
    color: var(--p4f-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p4f-nav__brand-sub {
    font-size: var(--p4f-text-xs);
    color: var(--p4f-nav-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p4f-nav__close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 0;
    border-radius: var(--p4f-radius-sm);
    background: transparent;
    color: var(--p4f-nav-text-muted);
    cursor: pointer;
}

.p4f-nav__close:hover { background: var(--p4f-nav-hover-bg); color: var(--p4f-text); }
.p4f-nav__close svg { width: 19px; height: 19px; }

/* --- Busca embutida ------------------------------------------------------- */

.p4f-nav__search {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: var(--p4f-space-3) var(--p4f-space-3) var(--p4f-space-2);
}

.p4f-nav__search-icon {
    position: absolute;
    inset-inline-start: 10px;
    display: flex;
    color: var(--p4f-text-3);
    pointer-events: none;
}

.p4f-nav__search-icon svg { width: 16px; height: 16px; }

.p4f-nav__search-input {
    width: 100%;
    min-height: 36px;
    padding: 7px var(--p4f-space-8) 7px 32px;
    border: 1px solid var(--p4f-nav-border);
    border-radius: var(--p4f-radius);
    background: var(--p4f-surface-inset);
    color: var(--p4f-text);
    font-family: inherit;
    font-size: var(--p4f-text-sm);
    box-sizing: border-box;
    transition: border-color var(--p4f-duration) var(--p4f-ease),
        background-color var(--p4f-duration) var(--p4f-ease),
        box-shadow var(--p4f-duration) var(--p4f-ease);
}

.p4f-nav__search-input::placeholder { color: var(--p4f-text-3); }
.p4f-nav__search-input::-webkit-search-cancel-button { display: none; }

.p4f-nav__search-input:focus {
    outline: none;
    background: var(--p4f-surface);
    border-color: var(--p4f-primary-500);
    box-shadow: var(--p4f-focus-ring);
}

.p4f-nav__search-clear {
    position: absolute;
    inset-inline-end: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: var(--p4f-radius-full);
    background: transparent;
    color: var(--p4f-text-3);
    cursor: pointer;
}

.p4f-nav__search-clear[hidden] { display: none; }

.p4f-nav__search-clear:hover { background: var(--p4f-surface-3); color: var(--p4f-text); }
.p4f-nav__search-clear svg { width: 14px; height: 14px; }

/* --- Itens ---------------------------------------------------------------- */

.p4f-nav__scroll {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--p4f-space-1) var(--p4f-space-3) var(--p4f-space-3);
    /* Barra de rolagem discreta -- a barra nativa grossa dentro de 268px
       come espaço do rótulo. */
    scrollbar-width: thin;
    scrollbar-color: var(--p4f-border-strong) transparent;
}

/* Grupo cujos itens foram todos filtrados por permissão não pode deixar o
   cabeçalho e a divisória órfãos sobre uma lista vazia -- o original do tema
   resolvia isso com `has-[ol]:has-[li]:block`. */
.p4f-nav__group { margin-bottom: var(--p4f-space-1); }
.p4f-nav__group:not(:has(.p4f-nav__list li)) { display: none; }

.p4f-nav__sep {
    height: 1px;
    margin: var(--p4f-space-3) var(--p4f-space-2);
    border: 0;
    background: var(--p4f-nav-border);
}

.p4f-nav__heading {
    display: flex;
    align-items: center;
    gap: var(--p4f-space-2);
    margin: 0 0 var(--p4f-space-1);
    padding: var(--p4f-space-2) var(--p4f-space-3) 5px;
    color: var(--p4f-nav-heading);
    font-size: var(--p4f-text-2xs);
    font-weight: var(--p4f-weight-bold);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    user-select: none;
}

.p4f-nav__heading-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.p4f-nav__heading-caret {
    width: 14px;
    height: 14px;
    margin-inline-start: auto;
    transition: transform var(--p4f-duration) var(--p4f-ease);
}

/* --- Seções sanfonadas (admin) --------------------------------------------
   Cada seção é uma LINHA: ícone, nome e a prévia do que tem dentro. A prévia
   é o que faz a seção fechada dizer alguma coisa; ela recolhe quando a seção
   abre, porque aí os itens de verdade estão logo abaixo. O corpo abre por
   grid 0fr -> 1fr (anima a altura real; height:auto não anima), e as seções
   de baixo descem junto. Transição só com .p4f-nav--animar, que p4f-casco.js
   liga depois do primeiro desenho -- sem isso cada página nova animaria as
   seções que a pessoa deixou abertas. */

.p4f-nav__group--secao { margin-bottom: 2px; }

/* A divisória entre seções sobra quando cada seção já é uma linha com
   ícone; no trilho (sem os nomes) ela volta a ser o senso de seção -- ver o
   bloco "Modo trilho". */
.p4f-nav__group--secao > .p4f-nav__sep { display: none; }

.p4f-nav__heading--secao {
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.p4f-nav__secao-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 7px var(--p4f-space-2);
    border: 0;
    border-radius: var(--p4f-radius);
    background: none;
    color: var(--p4f-nav-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--p4f-duration-fast) var(--p4f-ease);
}

.p4f-nav__secao-btn:hover { background: var(--p4f-nav-hover-bg); }

.p4f-nav__secao-btn:focus-visible {
    outline: 2px solid var(--p4f-primary-500);
    outline-offset: -2px;
}

.p4f-nav__secao-icone {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--p4f-nav-border);
    border-radius: var(--p4f-radius-sm);
    background: var(--p4f-surface-inset);
    color: var(--p4f-nav-text-muted);
    transition: background-color var(--p4f-duration) var(--p4f-ease),
        color var(--p4f-duration) var(--p4f-ease),
        border-color var(--p4f-duration) var(--p4f-ease);
}

.p4f-nav__secao-icone svg { width: 18px; height: 18px; }

/* Seção da página atual: o ícone assume a cor do item ativo, e é o que
   mostra "você está aqui" mesmo com a seção fechada. */
.p4f-nav__secao-btn--ativa .p4f-nav__secao-icone {
    border-color: transparent;
    background: var(--p4f-nav-active-bg);
    color: var(--p4f-nav-active-text);
}

.p4f-nav__secao-btn:hover .p4f-nav__secao-icone { color: var(--p4f-nav-text); }
.p4f-nav__secao-btn--ativa:hover .p4f-nav__secao-icone { color: var(--p4f-nav-active-text); }

.p4f-nav__secao-textos {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.p4f-nav__secao-titulo {
    overflow: hidden;
    color: var(--p4f-nav-text);
    font-size: var(--p4f-text-sm);
    font-weight: var(--p4f-weight-semibold);
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p4f-nav__secao-resumo {
    max-height: 17px;
    overflow: hidden;
    color: var(--p4f-nav-text-muted);
    font-size: var(--p4f-text-xs);
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p4f-nav__secao-resumo-item + .p4f-nav__secao-resumo-item::before { content: " · "; }

.p4f-nav__secao-btn[aria-expanded="true"] .p4f-nav__secao-resumo {
    max-height: 0;
    opacity: 0;
}

.p4f-nav__secao-btn[aria-expanded="true"] .p4f-nav__heading-caret { transform: rotate(90deg); }

.p4f-nav__secao-btn .p4f-nav__heading-caret {
    flex: none;
    color: var(--p4f-nav-text-muted);
}

.p4f-nav__secao-corpo {
    display: grid;
    grid-template-rows: 0fr;
}

.p4f-nav__secao-corpo--aberta { grid-template-rows: 1fr; }

.p4f-nav__secao-dentro {
    min-height: 0;
    overflow: hidden;
    /* Fechado não é só baixo: sem `visibility`, os links recolhidos
       continuariam recebendo Tab e sendo lidos pelo leitor de tela. */
    visibility: hidden;
}

.p4f-nav__secao-corpo--aberta > .p4f-nav__secao-dentro { visibility: visible; }

/* Os itens ficam presos à seção por uma linha-guia que sai do centro do
   ícone -- é o que diz "estes são de Cobrança" quando várias estão abertas. */
.p4f-nav__secao-dentro > .p4f-nav__list {
    margin: 2px 0 var(--p4f-space-2) 24px;
    padding-inline-start: var(--p4f-space-2);
    border-inline-start: 1px solid var(--p4f-nav-border);
    opacity: 0;
    transform: translateY(-4px);
}

.p4f-nav__secao-corpo--aberta > .p4f-nav__secao-dentro > .p4f-nav__list {
    opacity: 1;
    transform: none;
}

/* O recuo da linha-guia come 32px de largura: sem compactar o item, nome
   comprido ("Templates de mensagem") saía cortado. Corpo um ponto menor que
   o título da seção também é o que marca a hierarquia. As regras do trilho,
   mais abaixo no arquivo, desfazem isto lá. */
.p4f-nav__secao-dentro .p4f-nav__item {
    gap: 10px;
    min-height: 36px;
    padding-inline: var(--p4f-space-2);
    font-size: var(--p4f-text-sm);
}

.p4f-nav--animar .p4f-nav__secao-corpo {
    transition: grid-template-rows var(--p4f-duration-slow) var(--p4f-ease-out);
}

/* Fechando, o `visibility` só muda quando a altura já chegou a zero; abrindo,
   muda na hora (senão a lista subiria invisível). */
.p4f-nav--animar .p4f-nav__secao-dentro {
    transition: visibility 0s linear var(--p4f-duration-slow);
}

.p4f-nav--animar .p4f-nav__secao-corpo--aberta > .p4f-nav__secao-dentro { transition-delay: 0s; }

.p4f-nav--animar .p4f-nav__secao-dentro > .p4f-nav__list {
    transition: opacity var(--p4f-duration) var(--p4f-ease),
        transform var(--p4f-duration-slow) var(--p4f-ease-out);
}

.p4f-nav--animar .p4f-nav__secao-resumo {
    transition: max-height var(--p4f-duration) var(--p4f-ease),
        opacity var(--p4f-duration-fast) var(--p4f-ease);
}

.p4f-nav--animar .p4f-nav__secao-btn .p4f-nav__heading-caret {
    transition: transform var(--p4f-duration) var(--p4f-ease);
}

.p4f-nav__list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.p4f-nav__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--p4f-space-3);
    /* 40px de altura: confortável no toque sem inchar a lista. */
    min-height: 40px;
    padding: 0 var(--p4f-space-3);
    border-radius: var(--p4f-radius);
    color: var(--p4f-nav-text);
    font-size: var(--p4f-text-base);
    font-weight: var(--p4f-weight-medium);
    text-decoration: none;
    transition: background-color var(--p4f-duration-fast) var(--p4f-ease),
        color var(--p4f-duration-fast) var(--p4f-ease);
}

.p4f-nav__item:hover {
    background: var(--p4f-nav-hover-bg);
    color: var(--p4f-text);
}

/* Item selecionado: fundo tingido da marca + traço na borda inicial + peso
   maior. Três sinais em vez de só a cor -- pedido de "melhore o background
   quando selecionamos uma opção no sidebar", e também o que faz o estado
   sobreviver a daltonismo. */
.p4f-nav__item--active {
    background: var(--p4f-nav-active-bg);
    color: var(--p4f-nav-active-text);
    font-weight: var(--p4f-weight-semibold);
}

.p4f-nav__item--active::before {
    content: "";
    position: absolute;
    inset-block: 8px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 0 var(--p4f-radius-full) var(--p4f-radius-full) 0;
    background: var(--p4f-nav-active-bar);
}

.p4f-nav__item--active:hover {
    background: var(--p4f-nav-active-bg);
    color: var(--p4f-nav-active-text);
}

.p4f-nav__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.p4f-nav__item-icon svg { width: 19px; height: 19px; }

.p4f-nav__item-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p4f-nav__empty {
    padding: var(--p4f-space-5) var(--p4f-space-3);
    color: var(--p4f-text-3);
    font-size: var(--p4f-text-sm);
    text-align: center;
}

/* --- Rodapé: tema + conta ------------------------------------------------- */

.p4f-nav__foot {
    flex-shrink: 0;
    padding: var(--p4f-space-2) var(--p4f-space-3) var(--p4f-space-3);
    border-top: 1px solid var(--p4f-nav-border);
    background: var(--p4f-nav-bg-2);
}

.p4f-nav__theme {
    display: flex;
    align-items: center;
    gap: var(--p4f-space-3);
    min-height: 40px;
    margin-bottom: var(--p4f-space-2);
    padding: 0 var(--p4f-space-3);
    border-radius: var(--p4f-radius);
    color: var(--p4f-nav-text);
    font-size: var(--p4f-text-sm);
    font-weight: var(--p4f-weight-medium);
    cursor: pointer;
    transition: background-color var(--p4f-duration-fast) var(--p4f-ease);
}

.p4f-nav__theme:hover { background: var(--p4f-nav-hover-bg); }

.p4f-nav__theme-icon { display: flex; flex-shrink: 0; color: var(--p4f-nav-text-muted); }
.p4f-nav__theme-icon svg { width: 18px; height: 18px; }
.p4f-nav__theme-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p4f-nav__theme-input { margin-inline-start: auto; }

.p4f-nav__account { position: relative; }

.p4f-nav__account-btn {
    display: flex;
    align-items: center;
    gap: var(--p4f-space-3);
    width: 100%;
    min-height: 48px;
    padding: var(--p4f-space-2) var(--p4f-space-3);
    border: 0;
    border-radius: var(--p4f-radius);
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--p4f-duration-fast) var(--p4f-ease);
}

.p4f-nav__account-btn:hover,
.p4f-nav__account-btn--open { background: var(--p4f-nav-hover-bg); }

.p4f-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--p4f-radius-full);
    background: var(--p4f-gradient-brand);
    color: #ffffff;
    font-size: var(--p4f-text-sm);
    font-weight: var(--p4f-weight-semibold);
    text-transform: uppercase;
}

.p4f-nav__account-id {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.p4f-nav__account-name {
    font-size: var(--p4f-text-sm);
    font-weight: var(--p4f-weight-semibold);
    color: var(--p4f-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p4f-nav__account-mail {
    font-size: var(--p4f-text-xs);
    color: var(--p4f-nav-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.p4f-nav__account-caret {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-inline-start: auto;
    color: var(--p4f-nav-text-muted);
}

.p4f-nav__account-menu {
    position: absolute;
    inset-inline: 0;
    bottom: calc(100% + 6px);
    z-index: var(--p4f-z-overlay);
    display: flex;
    flex-direction: column;
    padding: var(--p4f-space-1);
    border: 1px solid var(--p4f-border);
    border-radius: var(--p4f-radius-md);
    background: var(--p4f-surface);
    box-shadow: var(--p4f-shadow-lg);
}

.p4f-nav__account-menu[hidden] { display: none; }
.p4f-nav__account-menu form { margin: 0; }

.p4f-nav__account-link {
    display: flex;
    align-items: center;
    gap: var(--p4f-space-2);
    width: 100%;
    min-height: 36px;
    padding: 0 var(--p4f-space-3);
    border: 0;
    border-radius: var(--p4f-radius-sm);
    background: transparent;
    color: var(--p4f-text-2);
    font-family: inherit;
    font-size: var(--p4f-text-sm);
    font-weight: var(--p4f-weight-medium);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

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

/* Um <svg> sem largura/altura declaradas ocupa o tamanho natural do viewBox
   esticado pelo contêiner -- no rodapé do portal isso rendia um ícone de
   "Sair" gigante ao lado de um rótulo minúsculo. */
.p4f-nav__account-link svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.p4f-nav__account-link--danger { color: var(--p4f-danger); }
.p4f-nav__account-link--danger:hover { background: var(--p4f-danger-bg); color: var(--p4f-danger-text); }

/* --- Botão de recolher, centrado na divisória ----------------------------- */

.p4f-nav__toggle {
    position: absolute;
    top: 50%;
    inset-inline-end: -13px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--p4f-nav-border);
    border-radius: var(--p4f-radius-full);
    background: var(--p4f-surface);
    color: var(--p4f-text-3);
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: var(--p4f-shadow-sm);
    transition: color var(--p4f-duration) var(--p4f-ease),
        border-color var(--p4f-duration) var(--p4f-ease),
        background-color var(--p4f-duration) var(--p4f-ease);
}

/* O círculo tem 26px por desenho; a área clicável precisa de 44x44 pra
   valer como alvo de toque. Este pseudo estende a área sem inchar o visual. */
.p4f-nav__toggle::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: inherit;
}

.p4f-nav__toggle:hover {
    background: var(--p4f-primary-600);
    border-color: var(--p4f-primary-600);
    color: #ffffff;
}

.p4f-nav__toggle-icon {
    width: 15px;
    height: 15px;
    transition: transform var(--p4f-duration-slow) var(--p4f-ease-out);
}

/* --- Modo trilho ------------------------------------------------------------
   Só existe no desktop: abaixo de 1024px a barra é gaveta, e no toque um
   menu só de ícones (sem rótulo nem hover pra dica) vira adivinhação. O
   estado é a classe `p4f-trilho` no <html>, que p4f-casco.js aplica ANTES
   do primeiro paint -- estado no próprio .p4f-nav-wrap só existiria depois
   do script ler o markup, e a barra "pularia" de largura a cada página. */
@media (min-width: 1024px) {
    .p4f-trilho .p4f-nav-wrap { width: var(--p4f-sidebar-width-collapsed); }

    .p4f-trilho .p4f-nav__toggle-icon { transform: rotate(180deg); }

    .p4f-trilho .p4f-nav__brand-text,
    .p4f-trilho .p4f-nav__search,
    .p4f-trilho .p4f-nav__heading,
    .p4f-trilho .p4f-nav__item-text,
    .p4f-trilho .p4f-nav__theme-label,
    .p4f-trilho .p4f-nav__account-id,
    .p4f-trilho .p4f-nav__account-caret,
    .p4f-trilho .p4f-nav__badge {
        display: none;
    }

    .p4f-trilho .p4f-nav__brand,
    .p4f-trilho .p4f-nav__item,
    .p4f-trilho .p4f-nav__theme,
    .p4f-trilho .p4f-nav__account-btn {
        justify-content: center;
        padding-inline: 0;
    }

    .p4f-trilho .p4f-nav__brand-link { flex-grow: 0; }
    .p4f-trilho .p4f-nav__scroll { padding-inline: var(--p4f-space-2); }
    .p4f-trilho .p4f-nav__foot { padding-inline: var(--p4f-space-2); }
    .p4f-trilho .p4f-nav__theme-input { margin-inline-start: 0; }
    .p4f-trilho .p4f-nav__sep { margin-inline: var(--p4f-space-1); }
    .p4f-trilho .p4f-nav__group--secao > .p4f-nav__sep { display: block; }

    /* Sem nomes nem linha-guia: só a coluna de ícones de sempre. */
    .p4f-trilho .p4f-nav__secao-dentro > .p4f-nav__list {
        margin: 0;
        padding: 0;
        border: 0;
    }

    /* No trilho o traço lateral do item ativo não cabe; o fundo cheio assume. */
    .p4f-trilho .p4f-nav__item--active::before { display: none; }

    .p4f-trilho .p4f-nav__account-menu {
        inset-inline: auto;
        inset-inline-start: 0;
        width: 208px;
    }
}

/* ==========================================================================
   2. CABEÇALHO DE PÁGINA
   ========================================================================== */

.p4f-head {
    position: sticky;
    top: 0;
    z-index: var(--p4f-z-header);
    /* Sólido primeiro: se o motor não suportar color-mix(), a declaração
       seguinte é descartada e sobra este fundo -- sem ele, a barra fica
       transparente com o conteúdo rolando visível por baixo. */
    background: var(--p4f-surface);
    background: color-mix(in srgb, var(--p4f-surface) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--p4f-border-soft);
}

.p4f-head__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--p4f-space-2) var(--p4f-space-4);
    /* Altura FIXA, não mínima.

       A divisória do cabeçalho tem que cair exatamente na mesma linha da
       divisória da marca, na barra lateral. Com `min-height` isso valia
       enquanto o título coubesse numa linha -- bastava um nome de cliente
       comprido, ou uma janela mais estreita, para o título quebrar, a barra
       crescer e as duas linhas se separarem.

       Menos 1px porque a divisória do cabeçalho é um `border-bottom` NO
       .p4f-head, que soma altura por fora; a da barra lateral fica dentro
       do bloco da marca (mesma --p4f-header-height dos dois).

       O título passa a truncar com reticências em vez de quebrar -- e leva
       `title` com o texto completo, então nada fica inalcançável (ver
       unfold/helpers/header_title.html).

       `min-height`, não `height`: o título nunca quebra (ellipsis acima),
       mas as AÇÕES à direita (.p4f-head__right) quebram linha quando não
       cabem -- em tela estreita ou com vários botões. Com `height` fixa
       essa segunda linha ficava espremida contra a borda inferior, sem
       respiro. `min-height` preserva a mesma altura no caso comum (uma
       linha só, sempre menor que o mínimo) e só cresce quando a segunda
       linha realmente aparece.

       `padding` vertical (space-3): título e botões têm até 38px de altura;
       com o mínimo de 63px sobra respiro de verdade nos dois lados, em vez
       de ficarem espremidos contra a borda inferior. */
    min-height: calc(var(--p4f-header-height) - 1px);
    padding: var(--p4f-space-3) var(--p4f-space-6);
}

.p4f-head__inner--boxed {
    max-width: var(--p4f-content-max);
    margin-inline: auto;
    width: 100%;
}

.p4f-head__left {
    display: flex;
    /* Uma linha só. Antes a migalha de pão ficava empilhada sobre o título
       dentro de .p4f-head__titles: o bloco ganhava altura, e tudo que era
       centralizado ao lado (botão de voltar, selo de registros) apontava
       para o meio do conjunto em vez de para a linha do título -- o
       desalinhamento relatado nos dois. */
    align-items: center;
    gap: var(--p4f-space-2);
    min-width: 0;
    flex-grow: 1;
}

/* header_title.html marca o contêiner com `display: contents`, então a
   migalha e o <h1> viram filhos diretos de .p4f-head__left e participam
   deste mesmo flex. */
.p4f-head__titles { display: contents; }

.p4f-head__right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--p4f-space-2);
    margin-inline-start: auto;
}

.p4f-head__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--p4f-space-2);
}

.p4f-head__acao-menu { position: relative; }

.p4f-head__acao-lista {
    inset-inline: auto 0;
    top: calc(100% + 6px);
    bottom: auto;
    min-width: 208px;
}

.p4f-head__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: 1px solid var(--p4f-border);
    border-radius: var(--p4f-radius);
    background: var(--p4f-surface);
    color: var(--p4f-text-2);
    cursor: pointer;
}

.p4f-head__burger svg { width: 19px; height: 19px; }

.p4f-head__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--p4f-radius-full);
    color: var(--p4f-text-2);
    text-decoration: none;
    transition: background-color var(--p4f-duration-fast) var(--p4f-ease),
        color var(--p4f-duration-fast) var(--p4f-ease);
}

.p4f-head__back:hover { background: var(--p4f-surface-3); color: var(--p4f-primary-700); }
.p4f-head__back svg { width: 18px; height: 18px; }

.p4f-head__titles { min-width: 0; }

/* Migalha EM LINHA com o título, não empilhada acima dele.

   Empilhada, ela somava altura ao cabeçalho (que precisa fechar em
   --p4f-header-height para a divisória bater com a da barra lateral) e
   puxava para cima o centro do bloco, desalinhando o botão de voltar e o
   selo de registros que ficam ao lado. Em linha, tudo fica na mesma altura
   e o cabeçalho fica mais baixo -- que era o pedido. */
.p4f-crumbs {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    margin: 0;
    font-size: var(--p4f-text-sm);
    line-height: 1.3;
    color: var(--p4f-text-3);
}

/* Em tela estreita a migalha sai: entre saber o caminho e ler o nome do
   registro, o nome ganha. O botão de voltar continua ali. */
@media (max-width: 1023.98px) {
    .p4f-crumbs { display: none; }
}

.p4f-crumbs__item { color: inherit; text-decoration: none; }
.p4f-crumbs__item:hover { color: var(--p4f-primary-600); text-decoration: underline; }
.p4f-crumbs__sep { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.6; }

.p4f-head__title {
    margin: 0;
    min-width: 0;
    font-size: var(--p4f-text-lg);
    font-weight: var(--p4f-weight-semibold);
    line-height: var(--p4f-leading-tight);
    letter-spacing: -0.015em;
    color: var(--p4f-text);
    /* Uma linha, com reticências. É o preço de manter a barra com altura
       fixa (ver .p4f-head__inner) -- e é seguro porque o elemento leva
       `title` com o texto inteiro. O bug antigo de título cortado era outro:
       lá cada PEDAÇO da trilha truncava dentro de um h1 `nowrap`, sobrando
       reticências no meio da frase; aqui trunca uma frase só, no fim. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p4f-head__add-text { display: inline; }

/* ==========================================================================
   3. TELAS SEM SESSÃO (login, pós-logout, recuperação/troca de senha)
   Estrutura em templates/unfold/layouts/unauthenticated.html.

   ESTAS TELAS NÃO SEGUEM O TEMA. O bloco de tokens logo abaixo fixa
   superfície, texto e borda nos valores do modo claro dentro de
   .p4f-auth__page -- valendo inclusive com `html.dark`.

   Motivo: é a primeira tela do produto e a única que aparece antes de haver
   qualquer preferência gravada. Deixá-la seguir o tema criava dois desenhos
   diferentes para a mesma tela e, pior, misturava os dois: as mensagens do
   Django e os widgets do Unfold trazem as próprias variantes `dark:`, então
   um cartão claro podia receber um aviso pintado para fundo escuro (e
   vice-versa) -- texto ilegível sem que nenhuma regra estivesse "errada".
   Com o tema fixo aqui, esse caso deixa de existir.

   O painel colorido é escuro nos dois casos; o formulário, claro nos dois.
   É esse o "meio termo": a tela é a mesma, o tema vale do login para dentro.
   ========================================================================== */

.p4f-auth__page {
    /* Âncora de posicionamento para .p4f-auth__topbar. Sem ela, a barra
       resolve contra o bloco inicial e some ao rolar -- o que acontece numa
       tela de login alta o bastante (vários erros de validação empilhados),
       levando junto o "Voltar ao site". */
    position: relative;
    display: flex;
    /* `svh` (small viewport height), não `dvh` (dynamic): `dvh` pode
       reportar um valor MAIOR que a área realmente visível dependendo de
       como o navegador mede a barra de ferramentas naquele instante --
       nessa tela isso vira folga de rolagem que não deveria existir, e o
       cartão (centralizado dentro de uma página agora mais alta que a
       viewport) aparece empurrado pra cima do que se vê. `svh` é sempre o
       MENOR valor possível, então min-height nunca estoura o viewport real. */
    min-height: 100vh;
    min-height: 100svh;

    /* Tokens fixos -- ver o comentário acima. */
    --p4f-surface: #ffffff;
    --p4f-surface-2: #f8fafd;
    --p4f-surface-3: #edf3fa;
    --p4f-surface-inset: #f1f5fa;
    --p4f-border: #dbe5f1;
    --p4f-border-soft: #e8eef7;
    --p4f-border-strong: #c3d2e6;
    --p4f-text: #0b1727;
    --p4f-text-2: #35455c;
    --p4f-text-3: #566275;
    --p4f-success-bg: #e9f9ef;
    --p4f-success-border: #b7e7c9;
    --p4f-success-text: #14532d;
    --p4f-warning-bg: #fef5e3;
    --p4f-warning-border: #f5d9a4;
    --p4f-warning-text: #7c3d0a;
    --p4f-danger-bg: #fdecec;
    --p4f-danger-border: #f6c2c2;
    --p4f-danger-text: #911c1c;
    --p4f-info-bg: #e8f1fe;
    --p4f-info-border: #bcd6fb;
    --p4f-info-text: #1c3f8f;
    --p4f-neutral-bg: #eef2f7;
    --p4f-neutral-border: #d5deea;
    --p4f-neutral-text: #35455c;
    /* Sombra também entra na lista: no tema escuro ela é preta e pesada, o
       que sobre o cartão claro desta tela viraria uma mancha suja em volta. */
    --p4f-shadow-xs: 0 1px 2px rgba(11, 23, 39, 0.05);
    --p4f-shadow-sm: 0 1px 3px rgba(11, 23, 39, 0.07), 0 1px 2px rgba(11, 23, 39, 0.04);
    --p4f-shadow-md: 0 4px 12px rgba(11, 23, 39, 0.07), 0 2px 4px rgba(11, 23, 39, 0.04);
    --p4f-shadow-lg: 0 12px 28px rgba(11, 23, 39, 0.10), 0 4px 8px rgba(11, 23, 39, 0.05);
    /* E a cor da ação primária: o botão "Entrar"/"Entrar de novo" é o único
       elemento sólido da tela, então nada que dependa de tema pode chegar
       perto dele. Fixando aqui, ele é azul com texto branco sempre. */
    --p4f-primary-600: #2563eb;
    --p4f-primary-700: #1d4ed8;
    --p4f-primary-800: #1e40af;
    --p4f-text-on-brand: #ffffff;

    background: var(--p4f-surface-2);
    color: var(--p4f-text);
    color-scheme: light;
}

/* --- Painel do formulário (ESQUERDA) -------------------------------------- */

.p4f-auth__panel {
    position: relative;
    display: flex;
    /* O cartão é UM bloco só (sobrelinha, título, formulário e rodapé lá
       dentro), então centralizá-lo no eixo vertical basta: o centro óptico do
       cartão coincide com o centro da tela e com o do painel de marca ao
       lado, que usa o mesmo alinhamento. */
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    padding: var(--p4f-space-10) var(--p4f-space-6);
    /* A mancha decorativa abaixo é posicionada além da borda; sem recorte
       ela conta como conteúdo e a página ganha rolagem horizontal. */
    overflow: hidden;
}

/* Eco discreto do gradiente atrás do formulário: sem isso o painel do
   formulário fica um bloco chapado colado num painel muito colorido, e a
   emenda entre os dois vira uma linha dura no meio da tela. */
.p4f-auth__panel::before {
    content: "";
    position: absolute;
    inset-block-start: -140px;
    inset-inline-start: -160px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(18, 74, 143, 0.13), transparent 70%);
    filter: blur(60px);
    pointer-events: none;
}

.p4f-auth__panel > * { position: relative; z-index: 1; }

/* O CARTÃO É A TELA INTEIRA -- sobrelinha, título, erros, formulário e
   rodapé moram todos aqui dentro.

   Antes o título ficava fora do cartão e cada coluna era uma grade de três
   linhas para fazer os dois títulos caírem na mesma altura. Alinhava os
   títulos, mas jogava a massa visual do formulário toda para BAIXO do meio da
   tela -- o cartão "parecia mais para baixo" porque estava mesmo. Com uma
   caixa só, centralizar é sem ambiguidade: o bloco que a pessoa veio usar
   fica no centro, e o painel de marca ao lado é centralizado do mesmo jeito. */
.p4f-auth__card {
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
    padding: var(--p4f-space-8);
    border: 1px solid var(--p4f-border);
    border-radius: var(--p4f-radius-xl);
    background: var(--p4f-surface);
    box-shadow: var(--p4f-shadow-lg);
}

.p4f-auth__head {
    text-align: center;
    margin-bottom: var(--p4f-space-6);
}

.p4f-auth__eyebrow {
    margin: 0 0 var(--p4f-space-2);
    font-size: var(--p4f-text-xs);
    font-weight: var(--p4f-weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--p4f-primary-600);
}

.p4f-auth__title {
    margin: 0;
    font-size: var(--p4f-text-2xl);
    font-weight: var(--p4f-weight-bold);
    letter-spacing: -0.03em;
    line-height: var(--p4f-leading-tight);
    color: var(--p4f-text);
}

/* Só a tela pós-logout usa isto: um parágrafo e um botão. Centralizado para
   acompanhar o título logo acima -- o cartão inteiro é um aviso curto, não um
   formulário com rótulos à esquerda. */
.p4f-auth__texto {
    margin: 0;
    font-size: var(--p4f-text-base);
    line-height: var(--p4f-leading-relaxed);
    color: var(--p4f-text-2);
    text-align: center;
}

.p4f-auth__errors { margin-bottom: var(--p4f-space-5); }

/* Neutraliza as variantes `dark:` dos widgets do tema DENTRO destas telas.

   Fixar os tokens em .p4f-auth__page resolve tudo que lê variável nossa,
   mas os campos do Unfold trazem utilitárias próprias (`dark:bg-base-900`,
   `dark:text-font-default-dark`, `dark:border-base-700`) que respondem à
   classe `dark` no <html>, não ao contexto. Com o tema escuro ligado, o
   cartão continuava claro e os campos dentro dele vinham pretos -- texto
   escuro sobre fundo escuro dentro de uma caixa branca.

   Estas regras estão na camada `p4f`, que roda depois de `utilities`, então
   vencem aquelas variantes por construção. O escopo é o casco das telas sem
   sessão e nada mais; o `:not()` preserva caixas de seleção, que aqui não
   existem mas cujo estado marcado não pode ser pintado por engano. */
.p4f-auth__page input:not([type="checkbox"]):not([type="radio"]),
.p4f-auth__page select,
.p4f-auth__page textarea {
    background-color: var(--p4f-surface-inset);
    border-color: var(--p4f-border-strong);
    color: var(--p4f-text);
}

.p4f-auth__page input::placeholder,
.p4f-auth__page textarea::placeholder { color: var(--p4f-text-3); }

.p4f-auth__page label { color: var(--p4f-text-2); }

/* Mesmo motivo do bloco acima, agora pro botão "Entrar de novo" da tela
   pós-logout: reforça fundo e texto com um seletor mais específico
   (.p4f-auth__page .p4f-btn) que qualquer variante `dark:` do tema não
   tem como vencer, mesmo que ela por algum motivo alcance esse elemento.

   Cor em hexadecimal fixo, NÃO `var(--p4f-primary-*)`: essas variáveis
   dependem de onde são lidas, e esse botão precisa do mesmo tom em
   qualquer cenário -- ele usa o mesmo azul-marinho do painel de marca ao
   lado (--p4f-gradient-auth, também fixo em p4f-tokens.css), não a cor de
   ação padrão do resto do produto. */
.p4f-auth__page .p4f-btn {
    background-color: #0d2a5c;
    border-color: transparent;
    color: #ffffff;
}

.p4f-auth__page .p4f-btn:hover { background-color: #0a2149; }
.p4f-auth__page .p4f-btn:active { background-color: #081a39; }

.p4f-auth__actions {
    display: flex;
    flex-direction: column;
    gap: var(--p4f-space-2);
    margin-top: var(--p4f-space-5);
}

.p4f-auth__foot {
    margin: var(--p4f-space-5) 0 0;
    font-size: var(--p4f-text-xs);
    line-height: var(--p4f-leading-relaxed);
    color: var(--p4f-text-3);
    text-align: center;
}

/* O link precisa se distinguir do texto ao redor: aqui ele leva pra a OUTRA
   porta de entrada do produto (admin <-> portal do cliente), e chegar na
   errada é um erro comum de suporte. */
.p4f-auth__foot a {
    color: var(--p4f-primary-700);
    font-weight: var(--p4f-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.p4f-auth__foot a:hover { color: var(--p4f-primary-800); }

/* --- Painel de marca (DIREITA) -------------------------------------------- */

.p4f-auth__brand {
    position: relative;
    display: flex;
    /* Mesmo alinhamento do painel do formulário: os dois blocos centralizados
       verticalmente compartilham o centro da tela. */
    align-items: center;
    flex: 1 1 0;
    padding: var(--p4f-space-10) var(--p4f-space-12);
    background: var(--p4f-gradient-auth);
    background-size: cover;
    background-position: center;
    color: #ffffff;
    overflow: hidden;
}

/* Os dois "blushes": manchas desfocadas que dão profundidade ao gradiente
   chapado. Puramente decorativas -- não capturam clique nem entram na ordem
   de leitura. */
.p4f-auth__brand::before,
.p4f-auth__brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.p4f-auth__brand::before {
    top: -160px;
    inset-inline-end: -120px;
    width: 480px;
    height: 480px;
    background: rgba(56, 189, 248, 0.28);
}

.p4f-auth__brand::after {
    bottom: -200px;
    inset-inline-start: -160px;
    width: 520px;
    height: 520px;
    background: rgba(37, 99, 235, 0.34);
}

.p4f-auth__brand-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
}

/* O selo fica NA MESMA LINHA da sobrelinha, não empilhado acima dela.

   Empilhado, ele somava ~80px acima do título da marca enquanto o lado do
   formulário só tinha a sobrelinha (~25px). Os dois blocos ficavam
   centralizados na tela, mas os TÍTULOS caíam em alturas bem diferentes --
   que é o desencontro relatado ("o formulário no mesmo centro que o Portal
   4Fin ao lado"). Em linha, o que existe acima do título passa a ter a
   mesma altura dos dois lados e as duas colunas se alinham. */
.p4f-auth__marca-linha {
    display: flex;
    align-items: center;
    gap: var(--p4f-space-3);
    margin-bottom: var(--p4f-space-3);
}

.p4f-auth__marca-linha .p4f-auth__brand-eyebrow { margin: 0; }

.p4f-brandmark--lg {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--p4f-radius-md);
    /* Vidro sobre o gradiente: o selo sólido da barra lateral sumiria por
       ser da mesma família de cor do fundo aqui. */
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(6px);
}

.p4f-brandmark--lg .material-symbols-outlined { font-size: 22px; }

.p4f-auth__brand-eyebrow {
    margin: 0;
    font-size: var(--p4f-text-xs);
    font-weight: var(--p4f-weight-semibold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

/* Tipografia do painel: peso 700, corpo grande e entreletra negativa -- é o
   único texto do produto que existe para ser lido de longe, e no tamanho
   anterior ele competia em peso com o formulário em vez de emoldurá-lo. */
.p4f-auth__brand-title {
    margin: 0 0 var(--p4f-space-4);
    font-size: clamp(2rem, 1.2rem + 2.2vw, 2.9rem);
    font-weight: var(--p4f-weight-bold);
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: #ffffff;
}

.p4f-auth__brand-text {
    max-width: 34ch;
    margin: 0 0 var(--p4f-space-8);
    font-size: var(--p4f-text-lg);
    font-weight: var(--p4f-weight-normal);
    line-height: 1.55;
    letter-spacing: -0.005em;
    color: rgba(255, 255, 255, 0.82);
}

.p4f-auth__brand-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--p4f-space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-top: var(--p4f-space-6);
}

.p4f-auth__brand-list li {
    position: relative;
    padding-inline-start: var(--p4f-space-6);
    font-size: var(--p4f-text-base);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
}

.p4f-auth__brand-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--p4f-accent-400);
}

/* --- Faixa flutuante do topo ---------------------------------------------- */

.p4f-auth__topbar {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--p4f-space-4) var(--p4f-space-5);
    pointer-events: none;
}

.p4f-auth__topbar > * { pointer-events: auto; }

.p4f-auth__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px var(--p4f-space-3);
    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);
    text-decoration: none;
}

.p4f-auth__back:hover { border-color: var(--p4f-primary-400); color: var(--p4f-primary-700); }
.p4f-auth__back svg { width: 15px; height: 15px; }

/* Abaixo de 1024px o painel de marca sai: manter os dois espremeria o
   formulário, que é o que a pessoa veio fazer aqui. */
@media (max-width: 1023.98px) {
    .p4f-auth__brand { display: none; }
    .p4f-auth__panel { padding-inline: var(--p4f-space-5); }
}

/* ==========================================================================
   4. RESPONSIVO DO CABEÇALHO
   A gaveta da barra lateral (1024px, igual nas três interfaces) mora na
   seção 5.
   ========================================================================== */

@media (max-width: 767.98px) {
    .p4f-head__inner { padding-inline: var(--p4f-space-4); }
    .p4f-head__right { width: 100%; margin-inline-start: 0; }

    /* Botão "Adicionar" volta a ser só ícone quando o espaço acaba -- o
       rótulo continua no title e no leitor de tela. */
    .p4f-head__add-text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .p4f-head__add { width: 38px; padding: 0; }
}

/* ---------------------------------------------------------------
   PÁGINA DE ERRO DAS PONTES PÚBLICAS (templates/ponte_erro.html)
   Carrega só os três CSS compartilhados -- é servida fora de qualquer
   layout (nem admin, nem portal, nem sacado logado), pra alguém que
   clicou um link de e-mail/WhatsApp.
   --------------------------------------------------------------- */

/* Normalização do elemento nu desta página (é servida fora de qualquer
   portal, com body.p4f-ponte) -- sem isso o navegador cai na fonte
   serifada e no fundo branco padrão dele, que foi exatamente o que
   apareceu na primeira tentativa. */
body.p4f-ponte {
    margin: 0;
    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;
}

.ponte-erro {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    padding: var(--p4f-space-6);
}

.ponte-erro .p4f-card {
    max-width: 30rem;
    text-align: center;
}

.ponte-erro__icone {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--p4f-space-4);
    color: var(--p4f-warning);
}

.ponte-erro__icone svg { width: 100%; height: 100%; }

.ponte-erro__titulo {
    margin: 0 0 var(--p4f-space-2);
    font-size: var(--p4f-text-lg);
    font-weight: var(--p4f-weight-semibold);
    color: var(--p4f-text);
}

.ponte-erro__texto {
    margin: 0;
    color: var(--p4f-text-2);
    line-height: var(--p4f-leading-relaxed);
}

.ponte-erro__detalhe {
    margin: var(--p4f-space-4) 0 0;
    font-size: var(--p4f-text-sm);
    color: var(--p4f-text-3);
}

/* Saída possível quando existe uma (hoje só a ponte de NFS-e manda) --
   o cartão é centralizado, então o botão vem em linha própria e com o
   mesmo respiro do detalhe acima. */
.ponte-erro__acao {
    margin: var(--p4f-space-5) 0 0;
}


/* ==========================================================================
   5. LAYOUT DO CASCO E GAVETA -- as TRÊS interfaces
   Antes eram dois cascos: o admin reservava a largura da barra num flex
   (.p4f-nav-wrap dentro do #page do Unfold) e virava gaveta em 1280px pelo
   Alpine do tema; portal e sacado usavam .portal-shell/.portal-nav com
   margem fixa e gaveta própria em 1024px. Dois mecanismos pra mesma barra
   eram a maior fonte de "lá funciona diferente daqui".

   Agora portal e sacado usam o MESMO modelo do admin -- .p4f-app é o #page
   deles -- e a gaveta é uma só, em 1024px, comandada por p4f-casco.js. Com
   isso o modo trilho do admin passou a existir nos portais sem uma linha a
   mais.
   ========================================================================== */

.p4f-app {
    display: flex;
    /* `svh`, não `dvh`: `dvh` pode reportar mais que a área visível e criar
       folga de rolagem indevida (ver .p4f-auth__page). */
    min-height: 100vh;
    min-height: 100svh;
}

.p4f-app__main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.p4f-app__content {
    width: 100%;
    max-width: var(--p4f-content-max);
    margin-inline: auto;
    padding: var(--p4f-space-6);
    box-sizing: border-box;
}

/* Telas com tabela de muitas colunas (ex.: Clientes com Acesso) -- opt-in
   via {% block classe_conteudo %}; o padrão mantém texto e formulário
   confortáveis de ler. */
.p4f-app__content--full {
    max-width: none;
}

/* --- Gaveta (abaixo de 1024px, nas três interfaces) ------------------------
   A barra sai do fluxo (o .p4f-nav-wrap não reserva mais largura) e desliza
   por cima do conteúdo. `transform`, não `display`: desliza, e quem tira os
   links da ordem de Tab quando fechada é o `inert` que p4f-casco.js põe. */
@media (max-width: 1023.98px) {
    .p4f-nav-wrap { width: 0; }

    .p4f-nav {
        width: min(304px, 86vw);
        box-shadow: var(--p4f-shadow-xl);
        transform: translateX(-100%);
    }

    [dir="rtl"] .p4f-nav { transform: translateX(100%); }

    .p4f-nav--animar .p4f-nav {
        transition: transform var(--p4f-duration-slow) var(--p4f-ease-out);
    }

    .p4f-nav-wrap--aberta .p4f-nav { transform: none; }

    .p4f-nav-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(7, 12, 23, 0.55);
        backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--p4f-duration) var(--p4f-ease),
            visibility var(--p4f-duration) var(--p4f-ease);
    }

    .p4f-nav-wrap--aberta .p4f-nav-scrim { opacity: 1; visibility: visible; }

    .p4f-nav__toggle { display: none; }
    .p4f-nav__close { display: flex; }
    .p4f-head__burger { display: flex; }
}

@media (max-width: 767.98px) {
    .p4f-app__content { padding: var(--p4f-space-4); }
}

/* --- Impressão do casco ------------------------------------------------
   Vale pras três interfaces. Nenhuma regra de cor de TEXTO: forçar preto
   quebraria o "Salvar como PDF" de quem usa o tema escuro. O fundo da
   página sai (o `background` do body se propaga pra folha inteira), e sai
   tudo que não faz nada no papel -- inclusive a LARGURA reservada pela
   barra lateral, senão a folha sai com um quarto de página em branco à
   esquerda e o conteúdo cortado à direita.

   Primeira tela a precisar disto: a folha de negociações de call center
   (templates/portal/call_center_imprimir.html), que é uma página normal do
   portal justamente pra ser conferida na tela antes de imprimir. */
@media print {
    .p4f-nav-wrap,
    .p4f-nav-scrim,
    .p4f-head,
    .p4f-mensagens {
        display: none;
    }

    /* `min-height:100vh` faria o casco esticar até o fim da JANELA -- no
       papel, uma faixa da cor do fundo ocupando meia folha. */
    body,
    .p4f-app,
    .p4f-app__main {
        min-height: 0;
    }

    body { background: none; }

    .p4f-app__content {
        max-width: none;
        padding: 0;
    }
}

/* O mesmo contador na linha da seção, visível só com ela fechada (ver
   casco/_nav.html). Aberta, o do item já está logo abaixo. */
.p4f-nav__secao-btn[aria-expanded="true"] .p4f-nav__badge--secao { display: none; }

/* Contador de itens novos ao lado de um item do menu (hoje: boletins nao
   lidos no portal do cliente). O numero E a informacao, a cor so chama o
   olho. Some no modo trilho, junto do texto do item. */
.p4f-nav__badge {
    flex: none;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0 6px;
    border-radius: var(--p4f-radius-full);
    background: var(--p4f-primary-600);
    color: #ffffff;
    font-size: var(--p4f-text-2xs);
    font-weight: var(--p4f-weight-bold);
    line-height: 20px;
    text-align: center;
}


/* Logo opcional da empresa do SACADO (Cliente.sacado_logo) no lugar do texto
"eyebrow" acima do título nas telas de autenticação -- ver
clientes/context_processors.py::marca_sacado pra cor. `height` fixo
(não `max-height`): o gerente sobe arquivo de qualquer resolução, e
`max-height` só ENCOLHE imagem grande -- um arquivo pequeno (ícone de
app, print de baixa resolução) ficava minúsculo mesmo com o teto alto.
`width: auto` mantém a proporção; `max-width` só existe pra logo muito
larga não estourar o cartão (~26rem). 48px: legível como "marca
principal" sem competir com o título imediatamente abaixo. */
.p4f-auth__logo {
    /* `display:block` tira a logo do fluxo inline, então o
    `text-align:center` de .p4f-auth__head (que centralizaria uma <img>
    inline por padrão) não tem mais efeito nela -- precisa centralizar
    o próprio bloco com margin-inline:auto. */
    display: block;
    height: 48px;
    width: auto;
    max-width: 240px;
    margin: 0 auto var(--p4f-space-3);
    object-fit: contain;
}


} /* @layer p4f */