/*
 * Portal do parceiro.
 *
 * As cores vêm da Identidade Visual do estabelecimento, como na tela de login do
 * painel. Nenhuma cor fixa fora dos fallbacks: trocar a identidade muda o portal
 * junto, sem retrabalho.
 */

/* ==========================================================================
   IMUNIDADE AO TEMA — portal do parceiro e ativação
   ==========================================================================
   O que o kit do Elementor alcanca POR TIPO volta ao valor da tela sem tema.

   `revert` quer dizer "como se nenhuma regra de autor existisse para esta
   propriedade": o valor do navegador, ou a heranca quando o navegador nao
   declara. E o valor certo por construcao, e continua certo quando a tela
   mudar -- escrever um valor a mao seria adivinhar o da tela sem tema para
   cada elemento de cada tela.

   `:where()` NAO SOMA ESPECIFICIDADE. Estas regras pesam (1,0,0): ganham do
   kit (0,5,1) e perdem de QUALQUER regra do plugin prefixada com o id, que vale
   pelo menos (1,0,1). Perdem independente da ordem das folhas -- e isso e o que
   importa, porque as regras do plugin estao em 59 arquivos enfileirados em
   ordens diferentes por contexto.
   ========================================================================== */

#axp-portal :where(h1, h2, h3, h4, h5, h6) {
    font-family: revert;
    color: revert;
    text-transform: revert;
    letter-spacing: revert;
    line-height: revert;
}

#axp-portal :where(p) {
    margin: revert;
}

#axp-portal :where(label) {
    color: revert;
    font-weight: revert;
    font-size: revert;
    /* O reset do Hello põe `line-height: 1` no rótulo, e isso desce por herança
       para o `span`, o `small` e o campo dentro dele. */
    line-height: revert;
}

/* O kit pinta o campo parado e no foco; os dois voltam. */
#axp-portal :where(input, select, textarea),
#axp-portal :where(input, select, textarea):where(:hover, :focus, :focus-visible, :active, :disabled) {
    border: revert;
    border-radius: revert;
    padding: revert;
    font-size: revert;
    background-color: revert;
    color: revert;
}

#axp-portal :where(button, [type="button"], [type="submit"]),
#axp-portal :where(button, [type="button"], [type="submit"]):where(:hover, :focus, :focus-visible, :active, :disabled) {
    background-color: revert;
    color: revert;
    border: revert;
    border-radius: revert;
    padding: revert;
    text-transform: revert;
    letter-spacing: revert;
    font-family: revert;
    font-size: revert;
    font-weight: revert;
    line-height: revert;
}

#axp-portal :where(a),
#axp-portal :where(a):where(:hover, :focus, :focus-visible, :active) {
    color: revert;
    background-color: revert;
    text-decoration: revert;
}

#axp-portal :where(td, th) {
    border: revert;
    /* 1px, e nao `revert`: o respiro da celula e dica de apresentacao, que mora
       na origem do autor -- `revert` a descartaria (D214). */
    padding: 1px;
    line-height: revert;
    background-color: revert;
    vertical-align: revert;
}

/* A tabela listrada do tema (`tbody>tr:nth-child(odd)>td`) pinta a linha, nao a
   celula: a cor vem do `<tr>` e o `revert` da celula nao a alcanca. */
#axp-portal :where(table) :where(tbody) > :where(tr) {
    background-color: revert;
}


#axp-portal.axionpass-partner-portal {
    --pp-surface: var(--axp-panel-card, #fff);
    /* O painel nunca expôs --axp-panel-input-bg; a superfície de seção é o
       equivalente real de campo rebaixado. */
    --pp-sunk: var(--axp-panel-input-bg, var(--axp-panel-section-bg, #f6f8fb));
    --pp-border: var(--axp-panel-border, #dce4ee);
    --pp-text: var(--axp-panel-text, #0f172a);
    --pp-muted: var(--axp-panel-muted, #64748b);
    --pp-primary: var(--axp-panel-primary, #1f3a5f);
    --pp-primary-hover: var(--axp-panel-primary-hover, #172c49);
    --pp-button: var(--axp-panel-button-bg, var(--pp-primary));
    --pp-button-hover: var(--axp-panel-button-hover, var(--pp-primary-hover));
    --pp-button-text: var(--axp-panel-button-text, #fff);
    --pp-button-gradient: var(--axp-panel-gradient-button, var(--pp-button));
    /* Painel escuro da tela de acesso: os mesmos tokens da sidebar do painel. */
    --pp-sidebar: var(--axp-panel-sidebar-bg, #0f172a);
    --pp-sidebar-text: var(--axp-panel-sidebar-text, #ffffff);
    --pp-sidebar-muted: var(--axp-panel-sidebar-muted, #cbd5e1);
    --pp-sidebar-start: var(--axp-panel-sidebar-gradient-start, var(--pp-sidebar));
    --pp-sidebar-end: var(--axp-panel-sidebar-gradient-end, var(--pp-sidebar));
    --pp-danger: var(--axp-panel-danger, #b23a0e);
    --pp-ok: var(--axp-panel-success, #1a6b41);
    --pp-warn: var(--axp-panel-warning, #97600a);
    --pp-radius: 5px;

    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 16px 56px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: transparent;
    color: var(--pp-text);
    font-family: var(--axp-panel-font-body, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
    font-size: 14px;
    line-height: 1.55;
    /* O kit escreve `letter-spacing: .3px` no corpo, e isso é herdado. */
    letter-spacing: normal;
}

#axp-portal.axionpass-partner-portal, #axp-portal.axionpass-partner-portal * { box-sizing: border-box; }
#axp-portal.axionpass-partner-portal :is(h2, h3, p, strong, small, span) { margin: 0; text-shadow: none; }
#axp-portal.axionpass-partner-portal :is(button, input) { font-family: inherit; font-size: 14px; }
#axp-portal.axionpass-partner-portal :is(button, a):focus-visible {
    outline: 2px solid var(--pp-primary);
    outline-offset: 2px;
}

/* ---- avisos ---- */

#axp-portal .axp-partner-alert {
    padding: 12px 14px;
    border: 1px solid var(--pp-border);
    border-left: 3px solid var(--pp-muted);
    border-radius: var(--pp-radius);
    background: var(--pp-surface);
    font-size: 13.5px;
}
#axp-portal .axp-partner-alert.success { border-left-color: var(--pp-ok); }
#axp-portal .axp-partner-alert.error { border-left-color: var(--pp-danger); }
#axp-portal .axp-partner-alert.info { border-left-color: var(--pp-primary); }

/* ---- acesso ----
 *
 * Mesma gramática da tela de login do painel (assets/css/auth/admin-login.css):
 * painel escuro com a marca de um lado, formulário do outro.
 *
 * A diferença é o enquadramento, e ela é deliberada. O login do painel é um
 * documento inteiro e ocupa a viewport (`body.axp-panel-login-document`). O
 * portal do parceiro é um shortcode dentro de uma página do tema, com cabeçalho
 * e rodapé do site em volta: sangrar de ponta a ponta exigiria arrancar o
 * conteúdo do container do tema, o que quebra em tema desconhecido. O split
 * vive então dentro de um cartão contido — mesma leitura, sem brigar com o site.
 */

#axp-portal .axp-partner-access {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    width: 100%;
    max-width: 980px;
    margin: 12px auto;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: var(--pp-surface);
    overflow: hidden;
}

#axp-portal .axp-partner-access-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 470px;
    padding: 56px 44px 100px;
    background: var(--pp-sidebar);
    /* Quando a identidade não tem gradiente, os dois pontos são a mesma cor e o
       gradiente vira o próprio chapado. O PHP decide; o CSS não precisa saber. */
    background-image: linear-gradient(145deg, var(--pp-sidebar-start), var(--pp-sidebar-end));
    color: var(--pp-sidebar-text);
}

#axp-portal .axp-partner-access-brand { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; }
#axp-portal .axp-partner-access-brand .axionpass-logo-box {
    width: var(--axp-logo-desktop-width, 168px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: inline-flex;
    justify-content: center;
}
#axp-portal .axp-partner-access-brand :is(img, svg, picture) { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; margin: 0 auto; }
#axp-portal .axp-partner-access-brand-text { font-size: 25px; font-weight: 600; letter-spacing: -0.02em; text-align: center; }

#axp-portal .axp-partner-access-caption {
    position: absolute;
    left: 44px;
    right: 44px;
    bottom: 38px;
    max-width: 430px;
    color: var(--pp-sidebar-muted);
    font-size: 13px;
    line-height: 1.6;
}

#axp-portal .axp-partner-access-panel {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 48px;
    background: var(--pp-surface);
}

#axp-portal .axp-partner-access-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 24px; }

#axp-portal .axp-partner-access-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
#axp-portal .axp-partner-access-head h2 { font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; }
#axp-portal .axp-partner-access-head p { color: var(--pp-muted); font-size: 14.5px; line-height: 1.5; }

#axp-portal .axp-partner-login-form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
#axp-portal .axp-partner-login-form label { display: flex; flex-direction: column; gap: 9px; font-size: 14px; font-weight: 400; color: var(--pp-text); }
#axp-portal .axp-partner-login-form input {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: var(--pp-sunk);
    color: var(--pp-text);
    /* 16px é o piso que impede o iOS de dar zoom ao focar o campo. */
    font-size: 16px;
    line-height: 1.5;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#axp-portal .axp-partner-login-form input:focus {
    outline: none;
    border-color: var(--pp-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-primary) 22%, transparent);
}
#axp-portal .axp-partner-login-form button {
    width: 100%;
    min-height: 50px;
    margin-top: 4px;
    background: var(--pp-button-gradient);
}
#axp-portal .axp-partner-login-form button:hover { background: var(--pp-button-hover); }

#axp-portal .axp-partner-access-note { color: var(--pp-muted); font-size: 12px; line-height: 1.5; text-align: center; }

/* ---- botões ---- */

#axp-portal.axionpass-partner-portal button {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--pp-radius);
    background: var(--pp-button);
    color: var(--pp-button-text);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease;
}
#axp-portal.axionpass-partner-portal button:hover { background: var(--pp-button-hover); }

/* ---- o `hidden` tem de vencer, aqui também (B4 chega ao portal) ----
 *
 * `#axp-portal .axp-partner-panel{display:flex}` vence o
 * `[hidden]{display:none}` do navegador por especificidade. O convite de
 * instalar o app É um `.axp-partner-panel` e nasce `hidden`: sem esta regra ele
 * aparecia para todo mundo, sempre -- no computador, dentro do app já instalado,
 * e para quem já tinha dispensado. A captura a 375 px foi quem mostrou.
 *
 * O `!important` aqui é deliberado e é o uso certo dele: `[hidden]` é uma
 * afirmação sobre a existência do elemento na tela, não sobre o jeito de
 * apresentá-lo, e nenhuma regra de apresentação deveria poder contradizê-la.
 *
 * Escopado em `#axp-portal` para não valer na página onde o portal vive. É a
 * mesma decisão do B4 (1.4.1.5), que a folha da Rede tomou pelo mesmo motivo --
 * e que aqui existia só como remendo de um elemento.
 */

#axp-portal [hidden] {
    display: none !important;
}
#axp-portal.axionpass-partner-portal button.is-quiet {
    background: transparent;
    border-color: var(--pp-border);
    color: var(--pp-text);
    font-weight: 500;
}
#axp-portal.axionpass-partner-portal button.is-quiet:hover { background: var(--pp-sunk); }

#axp-portal .axp-partner-logout {
    background: transparent !important;
    border-color: var(--pp-border) !important;
    color: var(--pp-muted) !important;
    font-weight: 500 !important;
    min-height: 38px !important;
}

/* ---- blindagem contra o tema ----
 *
 * O portal vive dentro de uma página do Elementor, e o tema estiliza botão,
 * link e campo nos estados de hover, foco e ativo. No GV Pass isso aparecia
 * como um rosa que não existe em lugar nenhum da Identidade Visual.
 *
 * A folha do login do painel (assets/css/auth/admin-login.css) já resolve isso
 * do mesmo jeito, e é o padrão que funciona nesta base: declarar cada estado
 * explicitamente com !important, para que a última palavra seja da Identidade
 * e não do tema. Estado não declarado é estado que o tema assume.
 */

#axp-portal.axionpass-partner-portal :is(button, button:hover, button:focus, button:active, button:visited) {
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    text-shadow: none !important;
    transform: none !important;
    box-shadow: none !important;
    color: var(--pp-button-text) !important;
}
#axp-portal.axionpass-partner-portal :is(button, button:focus, button:active, button:visited) { background-color: var(--pp-button) !important; }
#axp-portal.axionpass-partner-portal button:hover { background-color: var(--pp-button-hover) !important; }

/* O botão de acesso é o único em gradiente; precisa dos estados próprios para
   que a blindagem genérica acima não o achate em cor chapada. */
#axp-portal.axionpass-partner-portal .axp-partner-login-form :is(button, button:focus, button:active) { background: var(--pp-button-gradient) !important; }
#axp-portal.axionpass-partner-portal .axp-partner-login-form button:hover { background: var(--pp-button-hover) !important; }

/* Secundários mantêm o tratamento discreto em todos os estados. */
#axp-portal.axionpass-partner-portal :is(button.is-quiet, button.is-quiet:focus, button.is-quiet:active) {
    background: transparent !important;
    border-color: var(--pp-border) !important;
    color: var(--pp-text) !important;
}
#axp-portal.axionpass-partner-portal button.is-quiet:hover { background: var(--pp-sunk) !important; color: var(--pp-text) !important; }
#axp-portal.axionpass-partner-portal :is(.axp-partner-logout:hover, .axp-partner-logout:focus, .axp-partner-logout:active) {
    background: var(--pp-sunk) !important;
    color: var(--pp-text) !important;
}

#axp-portal.axionpass-partner-portal :is(a, a:hover, a:focus, a:active, a:visited) {
    color: var(--pp-primary) !important;
    text-decoration: none;
    text-shadow: none !important;
}

/* O aviso é texto puro, escapado no PHP. Se alguma palavra dele aparecer
   colorida, é o tema pintando por dentro — herdar resolve seja qual for a tag. */
#axp-portal.axionpass-partner-portal .axp-partner-alert :is(a, span, strong, em, b, i) { color: inherit !important; }

#axp-portal.axionpass-partner-portal :is(input, input:hover, input:focus, input:active) {
    font-family: inherit !important;
    background-color: var(--pp-sunk) !important;
    color: var(--pp-text) !important;
    border-color: var(--pp-border) !important;
    box-shadow: none !important;
    outline: 0;
}
/* Classe repetida de propósito: sem ela esta regra empata em especificidade
   com a blindagem acima e a disputa passa a depender da ordem das linhas. */
#axp-portal.axionpass-partner-portal.axionpass-partner-portal input:focus {
    border-color: var(--pp-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-primary) 22%, transparent) !important;
}
/* O amarelo do autopreenchimento do Chrome não é do tema, mas quebra a tela
   pelo mesmo motivo: cor que não é da Identidade. */
#axp-portal.axionpass-partner-portal input:-webkit-autofill {
    -webkit-text-fill-color: var(--pp-text) !important;
    box-shadow: inset 0 0 0 100px var(--pp-sunk) !important;
    caret-color: var(--pp-text);
}

/* Última palavra do foco de teclado: a blindagem acima zera outline, e sem esta
   regra quem navega por Tab deixa de enxergar onde está. */
#axp-portal.axionpass-partner-portal :is(button, a, input):focus-visible {
    outline: 2px solid var(--pp-primary) !important;
    outline-offset: 2px;
}

/* ---- topo ---- */

#axp-portal .axp-partner-hero {
    padding: 24px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: var(--pp-surface);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#axp-portal .axp-partner-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
#axp-portal .axp-partner-header > div { display: flex; flex-direction: column; gap: 4px; }
#axp-portal .axp-partner-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pp-primary); }
#axp-portal .axp-partner-header h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
#axp-portal .axp-partner-header p { color: var(--pp-muted); font-size: 13.5px; }

#axp-portal .axp-partner-quick-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--pp-border);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    overflow: hidden;
}
#axp-portal .axp-partner-quick-meta > div { background: var(--pp-surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
#axp-portal .axp-partner-quick-meta small { font-size: 11px; color: var(--pp-muted); text-transform: uppercase; letter-spacing: 0.06em; }
#axp-portal .axp-partner-quick-meta strong { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- números ---- */

#axp-portal .axp-partner-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

#axp-portal .axp-partner-card {
    padding: 16px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: var(--pp-surface);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
#axp-portal .axp-partner-card span { font-size: 11.5px; color: var(--pp-muted); text-transform: uppercase; letter-spacing: 0.06em; }
#axp-portal .axp-partner-card strong { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
#axp-portal .axp-partner-card small { font-size: 12px; color: var(--pp-muted); }

/* ---- painéis ---- */

#axp-portal .axp-partner-grid { display: grid; gap: 12px; }
#axp-portal .axp-partner-grid-link { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
#axp-portal .axp-partner-grid-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }

#axp-portal .axp-partner-panel {
    padding: 20px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: var(--pp-surface);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#axp-portal .axp-partner-section-title { display: flex; flex-direction: column; gap: 3px; }
#axp-portal .axp-partner-section-title h3 { font-size: 15px; font-weight: 600; }
#axp-portal .axp-partner-section-title p { font-size: 12.5px; color: var(--pp-muted); }

/* ---- o convite de instalar o app, e o aviso de quem abriu pelo app (1.4.3.0) ----
 *
 * O convite nasce `hidden` na marcação: ele só aparece onde dá para instalar.
 * Nada aqui o mostra — quem mostra é o JavaScript, depois de perguntar ao
 * navegador. Uma regra de `display` aqui desfaria o `hidden` e poria na tela de
 * todo mundo um botão que não instala nada.
 */

#axp-portal .axp-partner-instalar-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Os passos do iPhone ocupam a linha inteira: são duas frases, não um controle. */

#axp-portal .axp-partner-instalar-passos {
    flex: 1 1 100%;
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pp-muted);
}

#axp-portal .axp-partner-instalar-passos strong { color: var(--pp-text); }

/* O aviso de quem abriu pelo app, acima de tudo. */

#axp-portal .axp-partner-foco-aviso {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--pp-muted);
}

#axp-portal .axp-partner-foco-aviso a { color: var(--pp-primary); }
/* ---- link de indicação ---- */

#axp-portal .axp-partner-link-box { display: flex; gap: 8px; }
#axp-portal .axp-partner-link-box input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: var(--pp-sunk);
    color: var(--pp-text);
    font-size: 13px;
}
#axp-portal .axp-partner-link-box button { flex: 0 0 auto; }

#axp-portal .axp-partner-share-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#axp-portal .axp-partner-share-info > div { display: flex; flex-direction: column; gap: 2px; }
#axp-portal .axp-partner-share-info small { font-size: 11px; color: var(--pp-muted); text-transform: uppercase; letter-spacing: 0.06em; }
#axp-portal .axp-partner-share-info strong { font-size: 13.5px; font-weight: 600; }

/* ---- QR Code ---- */

#axp-portal .axp-partner-qr-panel { align-items: stretch; }

#axp-portal .axp-partner-qr-box {
    display: grid;
    place-items: center;
    padding: 18px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: #fff;
    min-height: 210px;
}
#axp-portal .axp-partner-qr-box svg { display: block; width: 176px; height: 176px; }
#axp-portal .axp-partner-qr-box p { color: var(--pp-muted); font-size: 12.5px; text-align: center; }

#axp-portal .axp-partner-qr-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#axp-portal .axp-partner-qr-hint { font-size: 12px; color: var(--pp-muted); }

/* ---- cupons ---- */

#axp-portal .axp-partner-coupon-list { display: flex; flex-direction: column; gap: 10px; }

#axp-portal .axp-partner-coupon-card {
    padding: 14px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: var(--pp-sunk);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
#axp-portal .axp-partner-coupon-main { display: flex; flex-direction: column; gap: 2px; }
#axp-portal .axp-partner-coupon-main span { font-size: 11px; color: var(--pp-muted); text-transform: uppercase; letter-spacing: 0.06em; }
#axp-portal .axp-partner-coupon-main strong { font-size: 16px; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em; }
#axp-portal .axp-partner-coupon-main small { font-size: 12.5px; color: var(--pp-muted); }
#axp-portal .axp-partner-coupon-meta { display: flex; flex-wrap: wrap; gap: 16px; }
#axp-portal .axp-partner-coupon-meta > div { display: flex; flex-direction: column; gap: 1px; }
#axp-portal .axp-partner-coupon-meta small { font-size: 10.5px; color: var(--pp-muted); text-transform: uppercase; letter-spacing: 0.06em; }
#axp-portal .axp-partner-coupon-meta strong { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- histórico ---- */

#axp-portal .axp-partner-history-list { display: flex; flex-direction: column; }

#axp-portal .axp-partner-history-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--pp-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
#axp-portal .axp-partner-history-item:last-child { border-bottom: 0; }
#axp-portal .axp-partner-history-main { display: flex; flex-direction: column; gap: 2px; }
#axp-portal .axp-partner-history-main strong { font-size: 14px; font-weight: 600; }
#axp-portal .axp-partner-history-main small { font-size: 12px; color: var(--pp-muted); }
#axp-portal .axp-partner-history-metrics { display: flex; flex-wrap: wrap; gap: 16px; }
#axp-portal .axp-partner-history-metrics > div { display: flex; flex-direction: column; gap: 1px; }
#axp-portal .axp-partner-history-metrics small { font-size: 10.5px; color: var(--pp-muted); text-transform: uppercase; letter-spacing: 0.06em; }
#axp-portal .axp-partner-history-metrics strong { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
#axp-portal .axp-partner-history-footnote { font-size: 12px; color: var(--pp-muted); }

#axp-portal .axp-partner-status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--pp-sunk);
    color: var(--pp-muted);
    font-size: 11px;
    font-weight: 600;
}
#axp-portal .axp-partner-status.confirmed { background: color-mix(in srgb, var(--pp-ok) 12%, var(--pp-surface)); color: var(--pp-ok); }
#axp-portal .axp-partner-status.pending { background: color-mix(in srgb, var(--pp-warn) 14%, var(--pp-surface)); color: var(--pp-warn); }

/* ---- vazios e listas simples ---- */

#axp-portal .axp-partner-empty {
    padding: 20px;
    border: 1px dashed var(--pp-border);
    border-radius: var(--pp-radius);
    color: var(--pp-muted);
    font-size: 13px;
    text-align: center;
}

#axp-portal .axp-partner-info-list { display: flex; flex-direction: column; gap: 10px; }
#axp-portal .axp-partner-info-list > div { display: flex; flex-direction: column; gap: 2px; }
#axp-portal .axp-partner-info-list small { font-size: 11px; color: var(--pp-muted); text-transform: uppercase; letter-spacing: 0.06em; }
#axp-portal .axp-partner-info-list strong { font-size: 13.5px; font-weight: 600; }

/* ---- responsivo ---- */

@media (max-width: 900px) {
    /* Abaixo de 900px o split vira empilhado, igual ao login do painel: o painel
       escuro encolhe para uma faixa de marca e o formulário assume a largura. */
    #axp-portal .axp-partner-access { grid-template-columns: 1fr; max-width: 520px; }
    #axp-portal .axp-partner-access-visual { min-height: 168px; padding: 32px 28px; }
    #axp-portal .axp-partner-access-caption { display: none; }
    #axp-portal .axp-partner-access-panel { padding: 36px 28px; }
    #axp-portal .axp-partner-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #axp-portal .axp-partner-grid-link,
    #axp-portal .axp-partner-grid-secondary { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    #axp-portal.axionpass-partner-portal { padding: 20px 12px 40px; gap: 14px; }
    #axp-portal .axp-partner-access { margin: 4px auto; }
    #axp-portal .axp-partner-access-visual { min-height: 132px; padding: 26px 20px; }
    #axp-portal .axp-partner-access-brand .axionpass-logo-box { width: var(--axp-logo-mobile-width, 130px) !important; }
    #axp-portal .axp-partner-access-panel { padding: 28px 20px; }
    #axp-portal .axp-partner-access-card { gap: 20px; }
    #axp-portal .axp-partner-access-head h2 { font-size: 25px; }
    #axp-portal .axp-partner-access-head p { font-size: 14px; }
    #axp-portal .axp-partner-hero { padding: 18px; }
    #axp-portal .axp-partner-header h2 { font-size: 21px; }
    #axp-portal .axp-partner-quick-meta { grid-template-columns: 1fr; }
    #axp-portal .axp-partner-summary { grid-template-columns: 1fr; }
    #axp-portal .axp-partner-card strong { font-size: 21px; }
    #axp-portal .axp-partner-panel { padding: 16px; }
    #axp-portal .axp-partner-link-box { flex-direction: column; }
    #axp-portal .axp-partner-link-box button { width: 100%; }
    #axp-portal .axp-partner-share-info { grid-template-columns: 1fr 1fr; }
    #axp-portal .axp-partner-coupon-card,
    #axp-portal .axp-partner-history-item { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    #axp-portal.axionpass-partner-portal * { transition: none !important; }
}

/* ---- repasses do parceiro (1.0.5.6) ---- */

#axp-portal .axp-partner-payout-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: var(--pp-border);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    overflow: hidden;
}
#axp-portal .axp-partner-payout-totals > div { background: var(--pp-surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
#axp-portal .axp-partner-payout-totals small { font-size: 11px; color: var(--pp-muted); text-transform: uppercase; letter-spacing: 0.06em; }
#axp-portal .axp-partner-payout-totals strong { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
#axp-portal .axp-partner-payout-totals strong.negativo { color: var(--pp-danger); }
#axp-portal .axp-partner-payout-totals span { font-size: 12px; color: var(--pp-muted); }

/* ============================================================
   Ativação do parceiro (1.4.0.0)

   A tela que o parceiro abre pelo link que o vendedor mandou no WhatsApp, no
   celular dele, no pórtico. Ela não tinha folha nenhuma: os campos saíam crus.

   **TUDO EM TOKEN**, como o resto do portal: cor fixa aqui é regressão, e o
   arnês cobra. Com o token, o modo escuro vem de graça.
   ============================================================ */

#axp-portal.axp-partner-activation {
    max-width: 560px;
    margin: 0 auto;
    padding: 20px 16px 40px;
    color: var(--axp-panel-text, #111827);
    font-size: 16px;
    line-height: 1.5;
}

#axp-portal .axp-partner-activation-title {
    margin: 0 0 8px;
    font-size: 24px;
    line-height: 1.2;
    text-wrap: balance;
}

#axp-portal .axp-partner-activation-lead {
    margin: 0 0 20px;
    color: var(--axp-panel-text-muted, #374151);
}

/*
 * A CAIXA DE TERMOS ROLA SOZINHA. Sem teto, o texto empurra o botão de ativar
 * para três telas abaixo — e quem está no pórtico com o vendedor esperando não
 * rola até achar.
 */
#axp-portal .axp-partner-activation-terms {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--axp-panel-border, #d1d5db);
    border-radius: 10px;
    background: var(--axp-panel-card, #f9fafb);
}

#axp-portal .axp-partner-activation-terms h2,
#axp-portal .axp-partner-activation-pix h2 {
    margin: 0 0 8px;
    font-size: 17px;
}

#axp-portal .axp-partner-activation-terms-text {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
    font-size: 15px;
    color: var(--axp-panel-text-muted, #374151);
    -webkit-overflow-scrolling: touch;
}

#axp-portal .axp-partner-activation-terms-text p {
    margin: 0 0 10px;
}

/* O aceite é um alvo de toque inteiro, não um quadradinho de 13 px. */
#axp-portal .axp-partner-activation-accept {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    min-height: 44px;
    margin: 12px 0 0;
    padding: 8px 0;
    font-weight: 600;
    cursor: pointer;
}

#axp-portal .axp-partner-activation-accept input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
    flex: 0 0 auto;
}

#axp-portal .axp-partner-activation-pix {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--axp-panel-border, #d1d5db);
    border-radius: 10px;
}

#axp-portal .axp-partner-activation-pix fieldset {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}

#axp-portal .axp-partner-activation-pix legend {
    padding: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--axp-panel-text-muted, #374151);
}

/* Os tipos de chave em chips que cabem na largura do celular. */
#axp-portal .axp-partner-activation-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin: 0 8px 8px 0;
    padding: 8px 12px;
    border: 1px solid var(--axp-panel-border, #d1d5db);
    border-radius: 999px;
    font-size: 15px;
    cursor: pointer;
}

#axp-portal .axp-partner-activation-chip input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
}

#axp-portal .axp-partner-activation-pix label {
    display: block;
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--axp-panel-text-muted, #374151);
}

/*
 * **FONTE DE 16 px NOS CAMPOS.** Abaixo disso o iOS dá zoom ao focar e a tela sai
 * do lugar — e o parceiro perde o campo que estava preenchendo.
 */
#axp-portal .axp-partner-activation-pix input[type="text"],
#axp-portal .axp-partner-activation-pix input[type="email"],
#axp-portal .axp-partner-activation-pix input[type="tel"] {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--axp-panel-border-strong, #9ca3af);
    border-radius: 10px;
    background: var(--axp-panel-input-bg, transparent);
    color: var(--axp-panel-text, #111827);
    font-size: 16px;
    box-sizing: border-box;
}

#axp-portal .axp-partner-activation-hint {
    margin: -6px 0 12px;
    font-size: 13px;
    color: var(--axp-panel-text-muted, #6b7280);
}

#axp-portal .axp-partner-activation-submit {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 14px 20px;
    border: 0;
    border-radius: 12px;
    background: var(--axp-panel-button-bg, #1f3b73);
    color: var(--axp-panel-button-text, #fff);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

#axp-portal .axp-partner-activation-submit:hover {
    filter: brightness(0.94);
}

#axp-portal.axp-partner-activation :focus-visible {
    outline: 3px solid var(--axp-panel-primary, #1f3b73);
    outline-offset: 2px;
}
/* ---- a Rede Comercial no portal (I8) ----
 *
 * As catorze classes desta seção foram escritas na 1.4.1.0 e **nenhuma tinha
 * CSS**: o portal do parceiro da Rede saía com os cartões empilhados em texto
 * corrido, o Pix sem destaque e o botão de pedir troca parecendo um link. Elas
 * usam os mesmos tokens `--pp-*` do resto da folha, então a Identidade Visual do
 * estabelecimento vale aqui também.
 */

#axp-portal .axp-portal-rede {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#axp-portal .axp-portal-rede-regra {
    padding: 12px 14px;
    border: 1px solid var(--pp-border);
    border-left: 3px solid var(--pp-primary);
    border-radius: var(--pp-radius);
    background: var(--pp-sunk);
    font-size: 14.5px;
}

/* Os três números do mês. `auto-fit` com mínimo de 150px cai para uma coluna no
   celular sem precisar de media query, e não deixa cartão órfão numa linha. */
#axp-portal .axp-portal-rede-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

#axp-portal .axp-portal-rede-cartao {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: var(--pp-surface);
}

#axp-portal .axp-portal-rede-rotulo {
    color: var(--pp-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#axp-portal .axp-portal-rede-valor {
    font-size: 22px;
    line-height: 1.2;
    /* Os três valores ficam alinhados pela vírgula, como extrato de banco. */
    font-variant-numeric: tabular-nums;
}

#axp-portal .axp-portal-rede-cartao small {
    color: var(--pp-muted);
    font-size: 12.5px;
}

#axp-portal .axp-portal-rede-retido {
    padding: 12px 14px;
    border: 1px solid var(--pp-border);
    border-left: 3px solid var(--pp-warn);
    border-radius: var(--pp-radius);
    background: var(--pp-surface);
    font-size: 13.5px;
}

#axp-portal .axp-portal-rede-subtitulo {
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
}

#axp-portal .axp-portal-rede-pagamentos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#axp-portal .axp-portal-rede-pagamentos li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 10px 12px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: var(--pp-surface);
}

#axp-portal .axp-portal-rede-pagamentos strong {
    font-variant-numeric: tabular-nums;
}

#axp-portal .axp-portal-rede-pagamentos small {
    color: var(--pp-muted);
    font-size: 12.5px;
}

#axp-portal .axp-portal-rede-pix {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: var(--pp-surface);
}

/* A chave atual é o que o parceiro confere antes de pedir troca: ela é o
   destaque desta caixa, e vem em fonte de largura fixa para os dígitos não
   dançarem. */
#axp-portal .axp-portal-rede-pix-atual {
    font-family: var(--axp-panel-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 15px;
}

#axp-portal .axp-portal-rede-pix-pendente {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--pp-border);
    border-left: 3px solid var(--pp-warn);
    border-radius: var(--pp-radius);
    background: var(--pp-sunk);
    font-size: 13.5px;
}

#axp-portal .axp-portal-rede-pix-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--pp-border);
}

#axp-portal .axp-portal-rede-pix-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
}

#axp-portal .axp-portal-rede-pix-form :is(input, select) {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius);
    background: var(--pp-surface);
    color: var(--pp-text);
    font-weight: 400;
}

#axp-portal .axp-portal-rede-pix-form :is(input, select):focus-visible {
    outline: 2px solid var(--pp-primary);
    outline-offset: 1px;
}

#axp-portal .axp-portal-rede-ajuda {
    color: var(--pp-muted);
    font-size: 12.5px;
}

#axp-portal .axp-portal-botao {
    align-self: flex-start;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--pp-radius);
    background: var(--pp-button-gradient);
    color: var(--pp-button-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

#axp-portal .axp-portal-botao:hover {
    background: var(--pp-button-hover);
}

/* No celular o botão ocupa a largura: alvo de polegar, não de mouse. */
@media (max-width: 480px) {
    #axp-portal .axp-portal-botao {
        align-self: stretch;
        text-align: center;
    }
}

/* ---- a confirmação de e-mail da Rede (K1) ----
 *
 * Ela pede uma ação, então tem o peso de um aviso: a borda à esquerda na cor de
 * atenção, como os outros avisos desta folha.
 */

#axp-portal .axp-portal-rede-confirmar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--pp-border);
    border-left: 3px solid var(--pp-warn);
    border-radius: var(--pp-radius);
    background: var(--pp-sunk);
    font-size: 13.5px;
}

#axp-portal .axp-portal-rede-confirmar strong {
    font-family: var(--axp-panel-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    word-break: break-all;
}

/* ---- Compartilhar, ao lado de Copiar (telas) ----
 *
 * Ele é o segundo botão da caixa do link, e não compete com o primeiro: a
 * mesma altura, a borda do tema, sem preenchimento sólido. Quem está no
 * celular vê os dois; quem está no computador vê só o Copiar, porque o JS
 * não revela este.
 */

#axp-portal .axp-partner-link-box .axp-share-partner-link {
    border: 1px solid var(--pp-border);
    background: var(--pp-surface);
    color: var(--pp-text);
}


/* ---- a troca de Pix atrás de "Trocar chave" (telas) ----
 *
 * O `summary` é o botão: ele tem o alvo de toque de um botão (44 px de altura
 * útil) e o foco visível do teclado, porque é por ele que se abre o
 * formulário. O marcador padrão do navegador fica — ele é a única pista de que
 * aquilo abre.
 */

#axp-portal .axp-portal-rede-pix-trocar > summary {
    display: list-item;
    padding: 11px 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--pp-accent, inherit);
}

#axp-portal .axp-portal-rede-pix-trocar > summary:focus-visible {
    outline: 2px solid var(--pp-accent, currentColor);
    outline-offset: 2px;
    border-radius: 6px;
}

#axp-portal .axp-portal-rede-pix-trocar[open] > summary {
    margin-bottom: 4px;
}