/* ===========================================================================
   PAGAMENTOS — Mercado Pago e Asaas do próprio cliente (24/10/2026, issue #92)
   Direção "escuro técnico", a das telas irmãs de Cobranças e Campanhas: o contêiner
   leva `cob-shell` e herda de lá topo, botões, cartões, KPIs, gráfico de barras e
   filtros. Formulários (gaveta de Apps, cobrança, ajustes) usam o desenho `.itg-*`
   das gavetas de integração (b6-api-webhooks.css). Aqui só o que é do pagamento:
   chip de status, linha de cobrança (vira cartão no celular), recorrências, linha do
   tempo, o véu do modal e o que esconde a aba sem conta ligada.
   Escala: espaço em múltiplos de 4, raios 6/10/12, número tabular. Só variáveis; os
   dois temas; 1366 e 390.
   =========================================================================== */

/* ---- quando a aba aparece: ferramenta da conta, acesso da pessoa e conta ligada ---- */
html[data-off-pagamentos] [data-tab="pagamentos"],
html[data-off-pagamentos] [data-cw-aba="pagamentos"],
html[data-sem-acesso-pagamentos] [data-tab="pagamentos"],
html[data-sem-acesso-pagamentos] [data-cw-aba="pagamentos"],
html:not([data-pag-ativo]) .lateral-menu-item[data-tab="pagamentos"],
html:not([data-pag-ativo]) [data-cw-aba="pagamentos"] {
    display: none !important;
}
body.acesso-sem-pagamentos-cobrar #composer-cobranca { display: none !important; }

#pagamentos-view-container {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important;
    min-height: 0 !important;
    scrollbar-width: thin;
}
html.dark-theme #pagamentos-view-container { color-scheme: dark; }
html.light-theme #pagamentos-view-container { color-scheme: light; }

/* ---- cores de estado (o modal e a gaveta moram fora do .cob-shell: os tokens vêm daqui) ---- */
.pag-shell, .pag-veu, .pag-gaveta {
    --pag-ok: #22c55e;
    --pag-ok-bg: rgba(34, 197, 94, .12);
    --pag-espera: #f59e0b;
    --pag-espera-bg: rgba(245, 158, 11, .14);
    --pag-ruim: #fb7185;
    --pag-ruim-bg: rgba(244, 63, 94, .14);
    --pag-neutro: var(--text-secondary);
    --pag-neutro-bg: rgba(148, 163, 184, .16);
    --pag-info: #38bdf8;
    --pag-info-bg: rgba(56, 189, 248, .14);
}
html.light-theme .pag-shell, html.light-theme .pag-veu, html.light-theme .pag-gaveta {
    --pag-ok: #15803d;
    --pag-espera: #8a4d05;
    --pag-espera-bg: rgba(245, 158, 11, .16);
    --pag-ruim: #be123c;
    --pag-ruim-bg: rgba(244, 63, 94, .12);
    --pag-info: #0369a1;
    --pag-info-bg: rgba(56, 189, 248, .16);
}

.pag-num { font-variant-numeric: tabular-nums; }
.pag-mudo { color: var(--text-secondary); }
.pag-link { color: var(--pag-info); font-weight: 600; text-decoration: none; }
/* 30 colunas de dia: no celular a coluna tem ~6 px e o último rótulo vazava do cartão; ele cresce para a esquerda. */
.pag-shell .cob-barras-meses > span:last-child { justify-self: end; white-space: nowrap; }
.pag-link:hover, .pag-link:focus-visible { text-decoration: underline; }

/* ---- chip de status ---- */
.pag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font: 600 12px/1 var(--font-sans);
    white-space: nowrap;
    background: var(--pag-neutro-bg);
    color: var(--pag-neutro);
}
.pag-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pag-chip.is-pago { background: var(--pag-ok-bg); color: var(--pag-ok); }
.pag-chip.is-pendente { background: var(--pag-info-bg); color: var(--pag-info); }
.pag-chip.is-vencido { background: var(--pag-espera-bg); color: var(--pag-espera); }
.pag-chip.is-estornado, .pag-chip.is-falhou { background: var(--pag-ruim-bg); color: var(--pag-ruim); }

.pag-gws { display: inline-flex; gap: 6px; flex-wrap: wrap; vertical-align: middle; }
/* Busca e período na mesma linha: o select caía embaixo da busca. */
.pag-shell .cob-tabela-card .cob-acoes { flex: 0 1 400px; min-width: 0; flex-wrap: nowrap; align-items: center; justify-content: flex-end; }
.pag-shell .cob-tabela-card .cobrancas-search-wrap { flex: 0 1 300px; min-width: 0; }
.pag-shell .cob-tabela-card .cob-acoes select.cob-btn { flex: 0 0 auto; }
.pag-gw {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    font: 500 12px/1 var(--font-sans);
    color: var(--text-secondary);
    background: var(--bg-card);
}
.pag-gw-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--pag-neutro); flex: 0 0 auto; }
.pag-gw-ponto.is-mercadopago { background: #00b1ea; }
.pag-gw-ponto.is-asaas { background: #4f7cff; }

/* ---- visão: gráfico + próximos vencimentos ---- */
.pag-visao { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; }
.pag-barras-vazio {
    height: 190px;
    display: grid;
    place-items: center;
    font-size: 13px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}

/* ---- lista de cobranças: tabela no computador, cartão no celular ---- */
.pag-lista { display: flex; flex-direction: column; }
.pag-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px 128px 112px 104px;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    min-width: 0;
}
.pag-linha:last-child { border-bottom: 0; }
.pag-linha--cab {
    padding-top: 10px;
    padding-bottom: 10px;
    background: var(--bg-surface);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.pag-linha:not(.pag-linha--cab) { cursor: pointer; transition: background .12s ease; }
.pag-linha:not(.pag-linha--cab):hover { background: var(--bg-surface-hover); }
.pag-linha:not(.pag-linha--cab):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pag-quem { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pag-quem-nome {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pag-quem-sub {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pag-valor { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pag-venc { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pag-acoes-linha { display: flex; justify-content: flex-end; gap: 4px; }
.pag-icone-btn {
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.pag-icone-btn:hover { background: var(--bg-surface-active); color: var(--text-main); border-color: var(--border); }
.pag-icone-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pag-vazio-lista { padding: 32px 16px; text-align: center; color: var(--text-secondary); font-size: 13px; }
.pag-mais { display: flex; justify-content: center; padding: 12px; border-top: 1px solid var(--border); }

/* ---- recorrências ---- */
.pag-recs { display: flex; flex-direction: column; }
.pag-rec {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.pag-rec:last-child { border-bottom: 0; padding-bottom: 0; }
.pag-rec:first-child { padding-top: 0; }
/* Pausada: o selo diz e o texto fica na cor apagada do tema (a opacidade .6 dava 2,6:1 no "próxima vence" do claro). */
.pag-rec.is-pausada .pag-quem-nome, .pag-rec.is-pausada .pag-valor { color: var(--text-secondary); }
.pag-rec-acoes { display: flex; align-items: center; gap: 4px; }

/* ---- estado vazio (nenhuma conta ligada) ---- */
.pag-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 48px 24px;
}
.pag-vazio h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--text-primary); }
.pag-vazio p { margin: 0; max-width: 560px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.pag-vazio-gws { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.pag-gw-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    padding: 0 20px 0 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    font: 600 14px/1 var(--font-sans);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.pag-gw-btn:hover { border-color: var(--accent-border, var(--accent)); background: var(--bg-surface-hover); }
.pag-gw-btn img { width: 32px; height: 32px; border-radius: 8px; background: #fff; padding: 2px; box-sizing: border-box; object-fit: contain; }
.pag-passos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
    width: 100%;
    max-width: 840px;
    text-align: left;
}
.pag-passo { padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.pag-passo b { display: block; margin-bottom: 4px; font-size: 13px; color: var(--text-primary); }
.pag-passo span { font-size: 12px; line-height: 1.55; color: var(--text-secondary); }
.pag-passo i { color: var(--accent); margin-bottom: 8px; display: block; font-size: 14px; }

/* ---- aviso da conta (erro de webhook, token vencendo) ---- */
.pag-alerta {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--pag-espera-bg);
    background: var(--pag-espera-bg);
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.5;
}
.pag-alerta i { color: var(--pag-espera); margin-top: 2px; }

/* ---- ajustes (a tela da conta) ---- */
.pag-ajustes { max-width: 880px; width: 100%; }
.pag-ajustes .itg-form { background: var(--bg-card); }
.pag-ajustes .itg-section { margin-bottom: 16px; }
.pag-ajustes > .cob-topo { margin-bottom: 20px; }
/* O título da opção é texto de gente, não código (o mesmo acerto do b15-agentes-mcp). */
.pag-shell .itg-opt-txt code, .pag-veu .itg-opt-txt code, .pag-gaveta .itg-opt-txt code { font-family: inherit; font-weight: 600; }
.pag-textarea {
    width: 100%;
    min-height: 88px;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm, 8px);
    background: var(--bg-input);
    color: var(--text-main);
    font: 400 13px/1.5 var(--font-sans);
    resize: vertical;
}
.pag-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }

/* ---- o modal (no <body>: acima das gavetas 10060 e das notificações 12000, abaixo do SweetAlert 20000) ---- */
.pag-veu {
    position: fixed;
    inset: 0;
    z-index: 15000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .55);
}
.pag-modal {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    color: var(--text-main);
}
.pag-modal--largo { max-width: 680px; }
/* O modal nasce no <body>, fora do .cob-shell: sem isto herdava a fonte do body e destoava da aba. */
.pag-veu { font-family: var(--font-sans); }
.pag-modal-cab {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border);
}
.pag-modal-cab .itg-head-txt { flex: 1; min-width: 0; }
.pag-modal-corpo { padding: 20px; overflow-y: auto; min-height: 0; }
.pag-modal-pe {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
}
.pag-modal-erro { margin: 0 0 12px; font-size: 13px; color: var(--pag-ruim); }
.pag-modal-erro:empty { display: none; }
.pag-previa {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px dashed var(--border);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.pag-previa b { color: var(--text-main); }
.pag-valor-campo { position: relative; }
.pag-valor-campo span {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--text-secondary);
    pointer-events: none;
}
.itg-shell .pag-valor-campo .itg-input { padding-left: 36px; font-variant-numeric: tabular-nums; }
.pag-das-conversa { margin: 0 0 16px; }
.pag-das-conversa .pag-linha { padding: 8px 0; grid-template-columns: minmax(0, 1fr) auto auto; cursor: default; }
.pag-das-conversa .pag-linha:hover { background: transparent; }

/* ---- detalhe: dados + linha do tempo ---- */
.pag-detalhe-valor { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pag-detalhe-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 16px 0; }
.pag-detalhe-meta div { min-width: 0; }
.pag-detalhe-meta dt { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 4px; }
.pag-detalhe-meta dd { margin: 0; font-size: 13px; color: var(--text-main); overflow-wrap: anywhere; }
.pag-copiar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-input);
    margin-bottom: 8px;
    min-width: 0;
}
.pag-copiar code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-main); }
.pag-tempo { list-style: none; margin: 8px 0 0; padding: 0; }
.pag-tempo li { position: relative; padding: 0 0 12px 20px; font-size: 13px; color: var(--text-main); }
.pag-tempo li::before { content: ''; position: absolute; left: 3px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.pag-tempo li::after { content: ''; position: absolute; left: 6px; top: 18px; bottom: 0; width: 2px; background: var(--border); }
.pag-tempo li:last-child { padding-bottom: 0; }
.pag-tempo li:last-child::after { display: none; }
.pag-tempo small { display: block; font-size: 12px; color: var(--text-secondary); }

/* ---- gaveta de Apps (Mercado Pago e Asaas) ---- */
.pag-gaveta .itg-logo { background: #fff; padding: 4px; box-sizing: border-box; }
.pag-gaveta .itg-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.pag-gaveta .itg-content { padding: 20px var(--itg-pad) var(--itg-pad); }
.pag-gaveta ol { margin: 8px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.7; color: var(--text-secondary); }
.pag-gaveta ol b { color: var(--text-main); }

/* ---- largura ---- */
@media (max-width: 1100px) {
    .pag-visao { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
    #pagamentos-view-container {
        padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
        box-sizing: border-box;
        background: var(--cw-fundo, var(--bg-main)) !important;
    }
    body.cw-sem-barra #pagamentos-view-container { padding-bottom: env(safe-area-inset-bottom) !important; }
    #pagamentos-view-container h1.cob-titulo { display: none !important; }
}
@media (max-width: 720px) {
    .pag-shell .cob-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pag-shell .cob-tabela-card .cob-acoes { flex: 1 1 100%; }
    .pag-shell .cob-tabela-card .cobrancas-search-wrap { flex: 1 1 auto; }
    .pag-linha--cab { display: none; }
    .pag-linha:not(.pag-linha--cab) {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "quem valor" "venc status" "acoes acoes";
        row-gap: 8px;
        padding: 14px 16px;
    }
    .pag-linha .pag-quem { grid-area: quem; }
    .pag-linha .pag-valor { grid-area: valor; text-align: right; }
    .pag-linha .pag-venc { grid-area: venc; }
    .pag-linha .pag-status { grid-area: status; justify-self: end; }
    .pag-linha .pag-acoes-linha { grid-area: acoes; justify-content: flex-start; }
    .pag-das-conversa .pag-linha:not(.pag-linha--cab) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "quem valor" "venc status"; }
    .pag-passos { grid-template-columns: minmax(0, 1fr); }
    .pag-rec { grid-template-columns: minmax(0, 1fr) auto; }
    .pag-rec .pag-rec-acoes { grid-column: 1 / -1; }
    .pag-veu { align-items: flex-end; padding: 0; }
    .pag-modal { max-width: none; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0; border-bottom: 0; }
    .pag-modal-pe { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
    .pag-modal-pe .itg-btn { flex: 1 1 auto; }
    .pag-detalhe-meta { grid-template-columns: minmax(0, 1fr); }
    .pag-ajustes .itg-field.is-half, .pag-ajustes .itg-field.is-third,
    .pag-modal .itg-field.is-half, .pag-modal .itg-field.is-third { grid-column: span 12; }
}

/* ---- [hidden] perde para o `display` das classes de campo e de menu: aqui ele vence ---- */
#composer-cobranca[hidden],
.pag-veu [hidden],
.pag-gaveta [hidden] { display: none !important; }

/* ---- ícone da linha "Pagamentos" em Configurações no celular (a carteira) ---- */
.cw-i--pagamentos {
    --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");
}