/* Portal interno. Tokens e blocos comuns vêm do jacredita.css (carregado antes, cópia igual à do portal do parceiro); aqui só o que é deste portal. */

/* ---------- Estrutura: menu lateral escuro ---------- */
.portal { display: flex; min-height: 100vh; }
.menu {
    width: 228px; flex-shrink: 0; background: var(--panel); color: var(--panel-ink);
    padding: 1.1rem .65rem 1.5rem; display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.menu .marca { color: #fff; padding: 0 .5rem; font-size: 1.1rem; }
.menu .sistema {
    font-size: .6rem; font-weight: 500; line-height: 1; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
    padding: .7rem .5rem 1rem; border-bottom: 1px solid var(--panel-line); margin-bottom: .25rem;
}
.menu nav { display: flex; flex-direction: column; gap: 2px; }
.menu-secao { display: flex; flex-direction: column; }
.menu-grupo {
    display: flex; align-items: center; width: 100%; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left;
    font-size: .64rem; font-weight: 500; line-height: 1; letter-spacing: .24em; text-transform: uppercase; opacity: .7; padding: 1.1rem .5rem .45rem;
}
.menu-grupo:hover, .menu-grupo:focus-visible { opacity: 1; }
.menu-grupo::after { content: ""; margin-left: auto; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.menu-grupo[aria-expanded="false"]::after { transform: rotate(-45deg); }
.menu-itens { display: flex; flex-direction: column; gap: 2px; }
.menu nav a { display: flex; align-items: center; gap: 9px; color: var(--panel-ink); font-weight: 500; font-size: .93rem; padding: .45rem .55rem; border-radius: 9px; }
.menu nav a:hover { background: rgba(255, 255, 255, .05); color: #fff; text-decoration: none; }
.menu nav a.active { background: rgba(255, 255, 255, .08); color: #fff; font-weight: 600; }
.menu nav a.active::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.icone { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topo { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; padding: .6rem 1.5rem; background: var(--bg); border-bottom: 1px solid var(--line); }
.topo .usuario { font-weight: 500; }
.avatar { width: 28px; height: 28px; border-radius: 8px; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-size: .72rem; font-weight: 700; }
.avatar:empty { display: none; }
main { padding: 1.5rem 1.75rem 3rem; }

@media (max-width: 800px) {
    .portal { flex-direction: column; }
    .menu { width: 100%; height: auto; position: static; padding-bottom: .75rem; }
    .menu-itens { flex-direction: row; flex-wrap: wrap; }
    .menu-grupo { padding-top: .75rem; }
    main { padding: 1rem 1rem 2.5rem; }
}

/* ---------- Marca do portal do parceiro (aba na página do parceiro) ---------- */
.campo-cor { display: flex; flex-direction: column; gap: .25rem; font-weight: 500; }
.campo-cor-valores { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.campo-cor input[type=color] { width: 3rem; height: 2.2rem; padding: 2px; cursor: pointer; }
.campo-hex { width: 7.5rem; font-family: var(--fonte-mono); text-transform: uppercase; }
.contrastes { margin-top: .5rem; }
/* A pré-visualização recebe as variáveis da marca no style do quadro; tudo dentro dele usa as classes do jacredita.css. */
.previa-marca { background: var(--alt); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 1rem; }
.previa-topo { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .6rem 1rem; background: var(--bg); border-bottom: 1px solid var(--line); }
.previa-topo .logo { color: var(--ink); font-size: 1rem; }
.previa-logo { display: block; max-height: 32px; max-width: 160px; object-fit: contain; }
.previa-inicial { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--brand); color: var(--on-brand); font-weight: 800; }
.previa-menu { display: flex; gap: .9rem; color: var(--muted); font-weight: 500; }
.previa-menu .ativo { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.previa-corpo { padding: 1rem; }
.previa-corpo .painel { margin: 0; }
.previa-corpo h3 { margin: 0 0 .5rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.previa-arquivo { display: inline-block; padding: .5rem; border: 1px dashed var(--line); border-radius: var(--r-controle); margin-bottom: .5rem; background: var(--alt); }
.previa-arquivo img { display: block; max-height: 64px; max-width: 240px; }
/* Tela Liquidações: situação múltipla nos filtros. */
.situacoes { display: flex; flex-wrap: wrap; gap: .25rem 1rem; border: 1px solid var(--line); border-radius: var(--r-controle); padding: .35rem .75rem; margin: 0; }
.situacoes legend { font-weight: 500; padding: 0 .25rem; }
.filtros .situacoes label.opcao { flex-direction: row; align-items: center; gap: .35rem; font-weight: 400; }

/* ---------- Cobrança PIX ---------- */
.cartao-cobranca { border: 1px solid var(--line); border-radius: var(--r); padding: .75rem 1rem; margin-bottom: 1rem; }
.cartao-cobranca h3 { margin: 0 0 .5rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.qr-pix { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin: .5rem 0; }
.qr-pix img { background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--r-controle); padding: .25rem; max-width: 100%; height: auto; }
.qr-pix .copiavel code { word-break: break-all; }
/* Painel de cobrança PIX: abre por cima da tela (Liquidações e detalhe da operação). */
.modal-fundo { position: fixed; inset: 0; z-index: 50; background: rgba(15, 23, 42, .45); display: flex; justify-content: center; align-items: flex-start; padding: 2rem 1rem; overflow-y: auto; }
.modal { background: var(--bg); color: var(--ink); border-radius: var(--r); box-shadow: 0 20px 50px rgba(15, 23, 42, .25); width: min(960px, 100%); padding: 1.25rem 1.5rem; }
.modal-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.modal-topo h2 { margin: 0; }
.barra-selecao { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: .5rem 0; }

/* Jornadas do cliente no detalhe da operação: o link e o QR Code mostrados uma vez */
.jornada-link { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.jornada-link img { border: 1px solid var(--line); border-radius: 8px; background: #fff; }