/* Tráfego Pago VIPs — aba do admin (C3, QA 03/10).
   No celular (390 px) as tabelas viram cartões (regra geral de esteira.css e style.css), mas o nome da caixa e o
   e-mail são uma palavra só e muito longa: a célula (flex) não encolhe abaixo dela e o texto sumia à direita
   (auditoria de tela, MÉDIO). Aqui:
   - .tv-quebra: o que é chave do vínculo (nome da caixa com o e-mail, e-mail da pessoa) QUEBRA a linha — no celular
     não há title para ler o resto;
   - .tv-corte: nome longo de campanha/caixa no resumo corta com reticências; o nome inteiro está no title;
   - ≤ 480 px: cada célula vira rótulo em cima e conteúdo embaixo, sem nada que force largura. */

.tv-corte { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.tv-quebra { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

.tv-leituras-lista { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.tv-leituras-lista li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; min-width: 0; }
.tv-erro { color: var(--de-erro, var(--red, #B42318)); font-weight: 600; overflow-wrap: anywhere; }
.tv-lido-em { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.tv-falta, .tv-fora { margin: 0; padding-left: 18px; }

.tv-tabela td { min-width: 0; }
.tv-tabela td > * { min-width: 0; max-width: 100%; }

@media (max-width: 760px) {
  .tv-admin .tv-tabela td > b, .tv-admin .tv-tabela td > small, .tv-admin .tv-tabela td > ul { flex: 1 1 auto; }
  .tv-admin .tv-tabela td small.tv-quebra { display: block; }
}

@media (max-width: 480px) {
  .tv-admin .card.table-scroll .tv-tabela td,
  .tv-admin .tv-tabela td { display: block !important; text-align: left !important; width: 100%; }
  .tv-admin .tv-tabela td::before { display: block; margin-bottom: 4px; }
  .tv-admin .tv-tabela td small { margin: 2px 0 0 !important; }
  .tv-admin .tv-tabela td .tv-corte { max-width: 100%; }
  /* Revisão C (I-2): o selo da esteira é nowrap (esteira.css); selo longo ("Nome da caixa com e-mail de outra pessoa",
     "Licença na Vende AI: … (atrasada)") passava da largura do cartão. Só dentro da aba do tráfego, quebra a linha. */
  .tv-admin .esteira-sit { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
}

/* V2 (SPEC-VIP-V2 §3.2): botão fixo no topo da área VIP que rola até as aulas; 44 px de altura para o dedo.
   .vip-wrap é flex em coluna (vip.css): quem alinha à direita é align-self (float ali não faz nada). O top passa da
   barra do topo do app, que também é sticky (shell.css) e ficaria por cima de um top menor. */
.vip-ir-aulas { position: sticky; top: 92px; z-index: 5; align-self: flex-end; min-height: 44px; padding: 0 18px;
  border-radius: 999px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 6px 18px rgba(24,24,24,.18); }
/* Rolagem do botão: a barra do topo (≈76 px) e o próprio botão (44 px) ficam por cima; a seção para abaixo deles. */
.vip-aulas { scroll-margin-top: 130px; }
/* V3 (SPEC-VIP-V3 §3.2): na célula Cliente, CPF e telefone embaixo do nome, cada um na sua linha; quebram, nunca cortam. */
/* A6 (auditoria V3): alinhados com o nome — à esquerda na tabela; no cartão do celular (td com o valor à direita), à direita. */
.vip-cliente-dados { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.vip-cliente-dados small { display: block; margin: 0; }
/* V4: "Conversa #…" (sem botão) quebra sem cortar. Adendo 2 (§6): o botão "Abrir conversa #<id>" cabe na célula. */
.vip-conversa { overflow-wrap: anywhere; }
/* O .button da casa (telas.css) é inline-flex com 54 px fixos: aqui continua flex (texto centrado) e a altura se ajusta. */
/* F3 (Lupa): numa tabela larga (organização, 8 colunas) o botão ficava com o texto em quatro linhas; uma linha só, a tabela rola. */
.vip-conversa-botao { display: inline-flex; height: auto; min-height: 40px; padding: 8px 16px; margin-top: 6px; white-space: nowrap; }

@media (max-width: 480px) {
  .vip-ir-aulas { top: 80px; align-self: stretch; width: 100%; }
  .vip-cliente-dados { flex: 1 1 auto; align-items: flex-end; text-align: right; }
  /* §6: no cartão, o botão vai de lado a lado, com 44 px de altura para o dedo. */
  .vip-conversa-botao { display: flex; width: 100%; min-height: 44px; box-sizing: border-box; text-align: center; white-space: normal; }
  /* D1 (Lupa): vence ".card.table-scroll td .button{min-height:40px}" do style.css (mesma especificidade, carrega depois). */
  .card.table-scroll td .vip-conversa-botao { min-height: 44px; }
}

/* Adendo 3 da V4 (SPEC-VIP-V4 §7.2): em Minha operação, a proposta da I.A em dourado. Texto continua o da casa; o selo
   é branco sobre #8A6508 (contraste ≥ 4.5). Borda esquerda por sombra interna, para não mexer na largura da tabela. */
:root { --tv-ouro-fundo: #FFF4D6; --tv-ouro-borda: #D4A017; }
/* F1 (Lupa): telas.css pinta toda td de branco com !important; aqui também precisa de !important (e vence por ser mais específica). */
tr.esteira-linha-ia td { background: var(--tv-ouro-fundo) !important; }
tr.esteira-linha-ia td:first-child { box-shadow: inset 4px 0 0 var(--tv-ouro-borda); }
.esteira-selo-ia { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #8A6508; color: #FFFFFF; font-size: 12px; font-weight: 700; line-height: 1.4; }

/* No ponto em que a esteira vira cartão (esteira.css): o cartão inteiro dourado, sem a sombra da primeira célula.
   style.css e telas.css (com !important, até 600 px, inclusive "#admin-body .card.table-scroll tr", 1,2,1) pintam o cartão
   de branco: a regra leva !important e a variante com #admin-body. */
@media (max-width: 760px) {
  .card.table-scroll tr.esteira-linha-ia, #admin-body .card.table-scroll tr.esteira-linha-ia {
    border-color: var(--tv-ouro-borda) !important; border-width: 2px !important; background: var(--tv-ouro-fundo) !important; }
  tr.esteira-linha-ia td:first-child { box-shadow: none; }
}

/* Recarga Pix (L6): bloco "Recarregue seu saldo" da área VIP. Celular primeiro (390 px): campos e botões de 44 px, a
   imagem e o código para pagar nunca passam da largura do cartão (sem rolagem lateral), o histórico quebra a linha. */
.vip-recarga { min-width: 0; max-width: 100%; }
.vip-saldo { min-width: 0; }
.vip-diario { min-width: 0; max-width: 100%; }
.vip-diario p { overflow-wrap: anywhere; }
.vip-diario .note { overflow-wrap: anywhere; }
.vip-diario input { min-height: 44px; box-sizing: border-box; width: 100%; }
.vip-diario button { min-height: 44px; }
.vip-recarga p { overflow-wrap: anywhere; }
.vip-recarga .note { overflow-wrap: anywhere; }
.vip-saldo p { overflow-wrap: anywhere; }
.vip-recarga input { min-height: 44px; box-sizing: border-box; width: 100%; }
.vip-saldo input { min-height: 44px; box-sizing: border-box; width: 100%; }
.vip-recarga button { min-height: 44px; }
.vip-saldo button { min-height: 44px; }
.vip-recarga .pix-aberto { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vip-recarga .pix-imagem { display: block; max-width: 100%; height: auto; width: 240px; align-self: center; background: #fff; padding: 8px; border-radius: 12px; box-sizing: border-box; }
.vip-recarga .pix-codigo { width: 100%; box-sizing: border-box; min-height: 88px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; word-break: break-all; resize: none; }
.vip-recarga .pix-valor { margin: 0; font-size: 18px; }
.vip-recarga .pix-historico { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vip-recarga .pix-historico li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-width: 0; }
.vip-recarga .pix-historico-titulo { margin: 8px 0 0; font-size: 15px; }
.vip-recarga .pix-situacao { margin: 0; font-weight: 600; }

/* Recarga Pix (L6) a 390 px (o ponto é 440 px, e não 480, para o último @media de 480 px do arquivo continuar sendo o de antes — testes antigos o procuram): botões de lado a lado com 44 px de altura (dedo), a imagem do código e o código nunca passam da tela. */
@media (max-width: 440px) {
  .vip-recarga .pix-gerar, .vip-recarga .pix-copiar, .vip-diario [data-salvar-diario] { width: 100%; min-height: 44px; }
  .vip-recarga .pix-imagem { width: min(240px, 100%); }
  .vip-recarga .pix-codigo { font-size: 12px; }
}

/* LOTE-11: área VIP — campanha e saldo/recarga num cartão só (.vip-junto). Celular primeiro: uma coluna, saldo/recarga e depois
   a campanha; a partir de 900 px, lado a lado. Coluna sozinha (bloco ausente) ocupa a largura toda. As seções de dentro seguem
   com a classe card (testes e recarregar contam com ela), mas não desenham cartão de novo: nem borda, fundo, sombra ou padding
   (o padding dobrado roubaria largura a 360 px). min-width: 0 em tudo para nada empurrar a página de lado. */
.vip-junto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
.vip-junto-coluna { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.vip-junto-coluna > * { min-width: 0; }
.vip-junto-coluna:only-child { grid-column: 1 / -1; }
.vip-junto [data-bloco-vip] { display: flex; flex-direction: column; gap: 24px; }
/* !important: design-system.css (l.1309, ".card" do bloco T8) põe borda, fundo, sombra e padding com !important; margin: o
   margin-bottom de 20 px do style.css somaria ao gap da coluna. */
.vip-junto .card { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0; }
@media (min-width: 900px) {
  .vip-junto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Recarga Pix (L6C): bloco "Pix" do admin. A página nunca rola de lado: o bloco não passa da largura e só a tabela rola, por
   dentro dela. Botões e campo com 44 px. As linhas já viram cartões a ≤ 480 px pelas regras de .tv-admin .tv-tabela. */
.tv-pix { min-width: 0; max-width: 100%; }
.tv-pix p { overflow-wrap: anywhere; }
.tv-pix .table-scroll { overflow-x: auto; max-width: 100%; }
.tv-pix button { min-height: 44px; }
/* 7B: `#admin-body td button` (telas.css) fixa 42 px e nowrap com !important; aqui o botão da tabela cresce com o texto. */
#admin-body .tv-pix td button { height: auto !important; min-height: 44px !important; padding: 10px 16px !important; white-space: normal !important; line-height: 1.25; }
.tv-pix input { min-height: 44px; box-sizing: border-box; }
.tv-pix .tv-avisos-pix { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tv-pix .tv-avisos-pix li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.tv-pix .esteira-sit { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.tv-pix .tv-conferir-numero { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.tv-pix .tv-conferir-numero .field { flex: 1 1 260px; min-width: 0; }
@media (max-width: 440px) {
  .tv-pix .tv-avisos-pix button { width: 100%; }
  .tv-pix .tv-conferir-numero { flex-direction: column; align-items: stretch; }
  .tv-pix .tv-conferir-numero input { width: 100%; }
  .tv-pix .tv-conferir-numero button { width: 100%; }
  .tv-pix td button { width: 100%; }
  .tv-pix .esteira-sit { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
}

/* LOTE 12 T6: vínculo manual da campanha e "Atualizar gasto agora" no cabeçalho de Campanhas. Sem rolagem lateral a 360 px. */
.tv-vinculo { min-width: 0; max-width: 100%; margin-top: 6px; }
.tv-vinculo select { max-width: 100%; min-height: 44px; box-sizing: border-box; }
.tv-vinculo button, .tv-admin [data-atualizar-meta] { min-height: 44px; }
.tv-vinculo summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.tv-admin .card > header.heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px !important; min-width: 0; }
.tv-admin .card > header.heading h2 { margin: 0; }
.tv-alerta-saldo ul { margin: .4em 0 0 1.2em; }