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

   Carregado pelas DUAS interfaces: pelo admin via UNFOLD["STYLES"]
   (settings.py) e pelo Portal do Cliente via templates/portal/base.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 portal.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
   portal.css (admin/Unfold) ou portal_cliente.css (portal).
   ========================================================================= */

@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-wrap--collapsed {
    width: var(--p4f-sidebar-width-collapsed);
}

.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; }
.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). */
.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: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 da barra lateral
       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--btn { cursor: pointer; }
.p4f-nav__heading--btn:hover { color: var(--p4f-primary-600); }
.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);
}

.p4f-nav__heading-caret--open { transform: rotate(90deg); }

.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 .material-symbols-outlined { font-size: 20px; }
.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 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); }
.p4f-nav__account-link .material-symbols-outlined { font-size: 18px; }

/* 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. O admin não via o problema
   porque lá os ícones são fonte (material-symbols), não SVG. */
.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);
}

.p4f-nav-wrap--collapsed .p4f-nav__toggle-icon { transform: rotate(180deg); }

/* --- Modo trilho ---------------------------------------------------------- */

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

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

.p4f-nav-wrap--collapsed .p4f-nav__brand-link { flex-grow: 0; }
.p4f-nav-wrap--collapsed .p4f-nav__scroll { padding-inline: var(--p4f-space-2); }
.p4f-nav-wrap--collapsed .p4f-nav__foot { padding-inline: var(--p4f-space-2); }
.p4f-nav-wrap--collapsed .p4f-nav__theme-input { margin-inline-start: 0; }
.p4f-nav-wrap--collapsed .p4f-nav__sep { margin-inline: var(--p4f-space-1); }

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

.p4f-nav-wrap--collapsed .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 CASCO
   Só o que vale para as DUAS interfaces. Os pontos de corte da barra
   lateral são diferentes em cada uma (o admin acompanha o 1280px do
   `sidebarOpen` do tema; o portal usa 1024px porque tem menos colunas) e
   por isso ficam em portal.css e portal_cliente.css, respectivamente.
   ========================================================================== */

@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. Ela NÃO carrega
   portal_cliente.css nem portal_sacado.css (é servida fora de qualquer
   um dos dois portais), então precisa da própria -- 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. CASCO DOS PORTAIS (/portal/ da empresa e <subdominio>.4fin.com.br do
   sacado)
   Este casco nasceu em portal_cliente.css, quando só o Portal do Cliente o
   usava. Passou a valer para as DUAS interfaces com login humano fora do
   admin (o Portal do Sacado é uma cópia da mesma tela, com o menu recortado
   ao que aquele ator pode ver), então mudou-se para cá: a regra do CLAUDE.md
   é que componente usado por mais de uma UI mora num dos três arquivos
   compartilhados. O admin NÃO usa estas classes -- ele monta o mesmo visual
   com .p4f-nav-wrap e o ponto de corte de 1280px do tema, em portal.css.
   ========================================================================== */

/* Bloco, não flex: a barra lateral é `position: fixed` (vem de
   p4f-shell.css), portanto está fora do fluxo. Como flex container, o casco
   dava a largura TOTAL da janela ao .portal-main e a margem de 268px vinha
   por cima -- o conteúdo ficava 268px mais largo que a tela e a última coluna
   da grade de KPIs saía cortada pela direita. Em bloco, a largura automática
   do .portal-main já desconta a própria margem. */
.portal-shell {
    /* `svh`, não `dvh` -- ver o comentário em .p4f-auth__page (p4f-shell.css):
       `dvh` pode reportar um valor maior que a área visível de fato,
       criando folga de rolagem indevida. `svh` é o menor valor possível,
       então nunca estoura o viewport real. */
    min-height: 100vh;
    min-height: 100svh;
}

/* A barra lateral reusa .p4f-nav / .p4f-nav__* do admin. O que muda aqui é
   só o posicionamento (fixa) e QUEM guarda o modo trilho: no admin é o
   Alpine do tema; aqui é a classe `p4f-menu-recolhido` no <html>, posta no
   <head> antes do primeiro paint (ver portal/base.html e sacado/base.html)
   e trocada pelo botão de seta (portal_cliente.js). As telas de fatura têm
   tabela de nove colunas -- recolher devolve a largura que elas precisam. */
.portal-nav {
    width: var(--p4f-sidebar-width);
    z-index: var(--p4f-z-sidebar);
}

.portal-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
    margin-inline-start: var(--p4f-sidebar-width);
    transition: margin-inline-start var(--p4f-duration-slow) var(--p4f-ease-out);
}

/* Modo trilho do portal -- mesmas regras de .p4f-nav-wrap--collapsed (seção
   "Modo trilho", acima), só com outro gatilho. Só no desktop: abaixo de
   1024px a barra é gaveta e abre sempre inteira, como no admin. */
@media (min-width: 1024px) {
    .p4f-menu-recolhido .portal-nav { width: var(--p4f-sidebar-width-collapsed); }
    .p4f-menu-recolhido .portal-main { margin-inline-start: var(--p4f-sidebar-width-collapsed); }

    .p4f-menu-recolhido .portal-nav .p4f-nav__brand-text,
    .p4f-menu-recolhido .portal-nav .p4f-nav__heading,
    .p4f-menu-recolhido .portal-nav .p4f-nav__item-text,
    .p4f-menu-recolhido .portal-nav .p4f-nav__theme-label,
    .p4f-menu-recolhido .portal-nav .p4f-nav__account-id {
        display: none;
    }

    .p4f-menu-recolhido .portal-nav .p4f-nav__brand,
    .p4f-menu-recolhido .portal-nav .p4f-nav__item,
    .p4f-menu-recolhido .portal-nav .p4f-nav__theme,
    .p4f-menu-recolhido .portal-nav .p4f-nav__account-link,
    .p4f-menu-recolhido .portal-nav .portal-conta {
        justify-content: center;
        padding-inline: 0;
    }

    .p4f-menu-recolhido .portal-nav .p4f-nav__brand-link { flex-grow: 0; }
    .p4f-menu-recolhido .portal-nav .p4f-nav__scroll { padding-inline: var(--p4f-space-2); }
    .p4f-menu-recolhido .portal-nav .p4f-nav__foot { padding-inline: var(--p4f-space-2); }
    .p4f-menu-recolhido .portal-nav .p4f-nav__theme-input { margin-inline-start: 0; }
    .p4f-menu-recolhido .portal-nav .p4f-nav__item--active::before { display: none; }
    .p4f-menu-recolhido .portal-nav .p4f-nav__toggle-icon { transform: rotate(180deg); }
}

.portal-head {
    background: var(--p4f-surface);
    background: color-mix(in srgb, var(--p4f-surface) 88%, transparent);
}

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

/* Telas com tabela de muitas colunas (ex.: Clientes com Acesso) --
   opt-in via {% block classe_conteudo %}, não o padrão pra manter
   texto/formulário confortável de ler nas demais telas. */
.portal-content--full {
    max-width: none;
}

.portal-mensagens {
    display: flex;
    flex-direction: column;
    gap: var(--p4f-space-2);
    margin-bottom: var(--p4f-space-5);
}

/* Bloco da conta no rodapé da barra (sem menu suspenso: o portal só tem
   "Sair", que fica logo abaixo, visível). */
.portal-conta {
    display: flex;
    align-items: center;
    gap: var(--p4f-space-3);
    padding: var(--p4f-space-2) var(--p4f-space-3);
}

.portal-sair { margin: 0; }
.portal-sair button { width: 100%; }

.portal-acoes form { margin: 0; }

/* --- Responsivo do casco -------------------------------------------------
   Abaixo de 1024px a barra lateral vira gaveta. Os portais usam 1024 (e não
   os 1280 do admin) porque têm menos colunas: em 1100px o conteúdo ainda
   respira com a barra fixa.
   ------------------------------------------------------------------------ */

@media (max-width: 1023.98px) {
    .portal-nav {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        width: min(300px, 86vw);
        box-shadow: var(--p4f-shadow-xl);
        /* Fora de tela por padrão. `transform` (e não `display`) pra que a
           gaveta deslize e o leitor de tela receba aria-hidden explícito --
           ver portal_cliente.js. */
        transform: translateX(-100%);
        transition: transform var(--p4f-duration-slow) var(--p4f-ease-out);
    }

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

    .portal-shell--menu-aberto .portal-nav { transform: none; }

    .portal-main { margin-inline-start: 0; }

    .portal-shell .p4f-nav-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: calc(var(--p4f-z-sidebar) - 1);
        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);
    }

    .portal-shell--menu-aberto .p4f-nav-scrim { opacity: 1; visibility: visible; }

    /* Escopadas sob .portal-shell de propósito: o admin carrega este
       arquivo e usa as MESMAS duas classes, mas com o ponto de corte de
       1280px do tema (portal.css). Sem o escopo, o casco do portal
       passaria a mandar no do admin entre 1024px e 1280px. */
    .portal-shell .p4f-nav__close { display: flex; }
    .portal-shell .p4f-head__burger { display: flex; }
    .portal-shell .p4f-nav__toggle { display: none; }
}

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



/* --- Impressão do casco ----------------------------------------------
   Vale pras DUAS interfaces com casco (portal do cliente e portal do
   sacado) -- por isso mora aqui e não em portal_cliente.css, que o
   subdomínio do sacado não carrega. Mesma razão pela qual .portal-shell/
   .portal-main/.portal-content moram neste arquivo; ver
   SacadoTelaIgualAoPainelTests.

   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 é outra história --
   ele não é conteúdo, e o `background` do `body` é propagado pelo CSS
   para a folha inteira (não para na altura do body), então some aqui em
   vez de depender de o leitor ter desmarcado "imprimir fundos". Fora
   isso, só some o que não faz nada no papel e some a
   margem que existia pra abrir espaço a uma barra lateral que acabou de
   ser escondida -- sem zerá-la, 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,
    .p4f-nav-scrim,
    .p4f-head,
    .portal-mensagens {
        display: none;
    }

    /* `min-height:100vh` faz o casco esticar até o fim da JANELA. No
       papel isso vira uma faixa da cor do fundo ocupando metade da
       folha depois do conteúdo -- some com "imprimir fundos"
       desligado (o padrão), mas aparece inteira em quem liga a opção
       pra não perder os selos coloridos. */
    body,
    .portal-main {
        min-height: 0;
    }

    body { background: none; }

    .portal-main { margin-inline-start: 0; }

    .portal-content {
        max-width: none;
        padding: 0;
    }
}

} /* @layer p4f */