/* ============================================================================= Área admin — auth (login/2FA/reset) + painel (sidebar/tabela/popover/modal). TEMA ---- O admin NÃO tem paleta própria: ele SEGUE o mesmo tema do site público. O :root abaixo repete os tokens do :root do site.css (o tema CREPÚSCULO, padrão); os theme-*.css (alta/nevoa) sobrescrevem esses MESMOS nomes quando o ganha data-theme. Nenhuma regra deste arquivo conhece uma cor: todas leem token. Trocar de tema = trocar o bloco de tokens. COLISÃO DE NOMES — como foi resolvida (era o risco do arquivo) -------------------------------------------------------------- O admin tinha tokens com os mesmos nomes dos compartilhados, mas com OUTRO sentido (--bg era o campo da página; no site --bg é a cor do cartão). Regra adotada: **o nome compartilhado é a fonte da verdade e vem do tema; todo token PRÓPRIO do admin ganhou o prefixo `--a-` e é DERIVADO dos de cima.** Nenhum nome tem dois sentidos. (Geometria/tipografia — --radius, --font-* — não colidem com nada e ficaram como estavam.) Três armadilhas que ditaram as escolhas abaixo: 1. O admin monta suas superfícies com --glass-bg/--glass-bg-2 e IGNORA --surface/--surface-2. Os cinco temas daqui definem os quatro, então hoje dá na mesma — a disciplina existe porque no projeto irmão um dos temas NÃO define --surface, e lá o token caía no valor claro do :root e o painel virava um bloco branco. Ao criar um tema novo, é fácil esquecer um par; consumir só o par que todo tema tem torna esse esquecimento inofensivo. 2. O vidro do tema é TRANSLÚCIDO (rgba). Popover, modal e cabeçalho de tabela não podem deixar o conteúdo atravessar: cada superfície é composta como `background-color:var(--a-base)` (opaca) + `background-image:var(--a-glass*)` (a tinta do vidro por cima). Resultado sempre opaco, em qualquer tema. 3. Borda, divisor e hover são CINZA NEUTRO a baixa opacidade (rgba(128,128,128,α)), e não --hairline. Os dois são visíveis nos 5 temas, mas fazem trabalhos diferentes: --hairline é calibrado para desenhar a SILHUETA do cartão contra a página (por isso é claro e translúcido), enquanto as linhas de uma tabela densa precisam de uma tinta que não dependa de haver página atrás. Misturar os dois é como usar a borda da janela para separar as colunas. Texto: o admin é UI densa (11-14px). --muted-2 (3,3:1 sobre o cartão) reprova AA, então o "fraco" do admin para em --muted, que os 5 temas calibram >=5,5:1. Acento de TEXTO nunca é --gold: o Ash preenche o botão, e usado como letra sobre o cartão Twilight ele dá só 6,7:1 — o --a-accent puxa mais claro — ótimo como fundo de botão, reprovado como letra de 11px. É --a-accent, o --accent do tema puxado 30% para o --text. ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap'); :root{ /* ===== TOKENS DO TEMA (mesmos nomes do site.css) — valores do CREPÚSCULO == Os theme-*.css sobrescrevem daqui para baixo. NÃO renomeie nada aqui. Estes valores são cópia fiel do :root do site.css: os dois arquivos têm que concordar, senão o painel e a página pública divergem de cor sem tema nenhum estar ativo (o caso do JS bloqueado). */ --page-rgb:29,35,56; --bg-rgb:46,56,91; /* TWILIGHT #2E385B */ --page:rgb(var(--page-rgb)); --bg:rgb(var(--bg-rgb)); --page-bg:var(--page); --card-bg:var(--bg); --sheen:none; --glass-bg:rgba(194,198,209,.09); /* painel */ --glass-bg-2:rgba(194,198,209,.15); /* campo / faixa */ --glass-border:rgba(194,198,209,.18); --glass-shadow:0 10px 24px -16px rgba(0,0,0,.8); --hairline:rgba(194,198,209,.18); --shadow-card:0 30px 70px -30px rgba(0,0,0,.8); --text:#C2C6D1; /* ASH — 6,7:1 */ --text-2:#B1B7C6; /* 5,7:1 */ --muted:#9DA5B8; /* MUTED — 4,6:1 */ --muted-2:#7D889D; /* STONE — o admin NAO usa (reprova AA) */ /* ---- Botão: BRASA (o padrão) — GERADO por gera-temas.mjs nome-exibido: Brasa -- */ --gold:#BF2737; /* Brasa — texto branco: 5,9:1 */ --gold-light:#D64D5B; --gold-dark:#A01D2B; --gold-grad:linear-gradient(135deg,#A01D2B 0%,#BF2737 45%,#D64D5B 100%); --gold-ring:rgba(191,39,55,.55); --gold-glow:rgba(191,39,55,.5); --on-gold:#FFFFFF; /* A barra separa do fundo preto por 3,6:1 — desenha-se sozinha. Sem contorno, como a barra chapada do link.me/hillerfit. */ --gold-border:transparent; --shine:#DA9BA1; /* Cor de TEXTO. NÃO é o --gold: sobre o preto ele dá 3,6:1. Esta é a cor clareada até cruzar 4,5:1 no pior fundo (o vidro #0D0E0E). */ --accent:#DA4959; /* 4,7:1 no vidro */ --accent-hover:#DB717C; /* Os --seal-* NÃO entram aqui. O selo de verificado é o do link.me/hillerfit e tem cor fixa (#C29AFF -> #4062FF, check branco), definida uma vez no :root do site.css. Selo é sinal reconhecível, não enfeite: recolorido a cada tema, deixaria de dizer o que diz. */ --ok:#5FD08A; --err:#F08A82; /* ------------------------------------------------------------------ SELO -- O selo de verificado é o do link.me/hillerfit, cor incluída. Estes valores saíram do arquivo deles (`/dummy/verify/default.svg`), não de um print: rampa #C29AFF -> #4062FF na diagonal, "check" branco. Ficam abaixo do --wa, e NÃO acima, por um motivo mecânico: o gera-temas.mjs reescreve tudo entre `/* ---- Botão:` e `--ok:`. Um token de selo colocado ali dentro sobrevive até a próxima vez que alguém rodar o gerador — e depois some sem aviso. Aqui embaixo ele está fora do alcance. E ficam fora dos theme-*.css de propósito: o selo é um sinal que a pessoa reconhece de outros lugares; mudando de cor a cada tema, deixaria de ser um selo e viraria um enfeite azul qualquer. É o único elemento colorido do site que não segue o tema. */ --seal-a:#0095F6; /* azul chapado do Instagram */ --seal-b:#0095F6; --seal-c:#0095F6; --seal-stroke:transparent; --seal-check:#FFFFFF; --wa:#25d366; /* ===== TOKENS DO ADMIN (--a-*) — todos DERIVADOS dos de cima ============== */ /* Tinta neutra: escurece o claro, clareia o escuro. Serve nos 5 temas. */ --a-line:rgba(128,128,128,.32); /* bordas (cartão, campo, botão) */ --a-line-2:rgba(128,128,128,.18); /* divisores internos (linhas da tabela) */ --a-hover:rgba(128,128,128,.14); /* hover de item de lista/nav */ --a-hover-soft:rgba(128,128,128,.07); /* hover de linha da tabela */ --a-raise:rgba(128,128,128,.16); /* +1 nível: foco/hover de campo */ /* Texto. --muted PURO reprova no admin: no branco ele é #767b82 → 4,0:1 sobre o cartão e 3,7:1 sobre a faixa (medido). Ele foi calibrado para o texto GRANDE do site público; aqui o texto fraco tem 10-13px. Então o "fraco" do admin é o --muted do tema puxado 22% para o --text: fica >=5,3:1 nos 5 temas, na pior superfície. */ --a-ink:var(--text); --a-ink-soft:var(--text-2); --a-muted:color-mix(in srgb, var(--muted) 78%, var(--text)); --a-faint:var(--a-muted); /* de propósito igual: ver cabeçalho */ --a-placeholder:var(--a-muted); /* Superfícies = vidro do tema sobre uma base OPACA (ver armadilha 2). Use sempre em par: background-color:var(--a-base); background-image:var(--a-glass); */ --a-base:var(--page); --a-glass:linear-gradient(var(--glass-bg),var(--glass-bg)); /* cartão */ --a-glass-2:linear-gradient(var(--glass-bg-2),var(--glass-bg-2)); /* campo */ --a-glass-3:linear-gradient(var(--a-raise),var(--a-raise)), linear-gradient(var(--glass-bg-2),var(--glass-bg-2)); /* +1 nível */ /* Acento de TEXTO: o --accent do tema, 30% puxado para o --text. O --accent puro dá 4,1:1 no branco (11px reprova); e o item ATIVO ainda pinta o fundo de --gold a 10%, o que come mais um pouco do contraste — daí os 30%. A tinta do item ativo é baixa (10%/18%) justamente para não estreitar o vão: no tema claro ela ESCURECE o fundo (o --gold é quase preto) e no escuro ela o CLAREIA — nos dois casos, quanto mais tinta, menos contraste com o texto. */ --a-accent:color-mix(in srgb, var(--accent) 70%, var(--text)); --a-gold-soft:color-mix(in srgb, var(--gold) 10%, transparent); /* fundo do item ativo */ --a-gold-soft-2:color-mix(in srgb, var(--gold) 18%, transparent); /* contador ativo / anel */ --a-gold-halo:color-mix(in srgb, var(--gold-ring) 45%, transparent); /* anel de foco */ /* Estado: o verde/vermelho do tema claro são os do Bootstrap (4,26:1 no branco — reprovam por pouco). Mesmo truque: 15% para o --text resolve nos 5. */ --a-ok:color-mix(in srgb, var(--ok) 85%, var(--text)); --a-err:color-mix(in srgb, var(--err) 85%, var(--text)); --a-shadow-pop:0 30px 70px -25px rgba(0,0,0,.45); --a-shadow-btn:0 8px 20px -12px rgba(0,0,0,.35); --radius:18px; --font-head:'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-body:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* DARK, e não light: os cinco temas deste projeto são escuros. Sem isto, um JS bloqueado deixaria a barra de rolagem e o popup do nativo e autofill seguem o tema. `data-bs-theme` é escrito pelo theme-preview.js no (é o mesmo sinal claro/escuro que o Bootstrap usa) — aqui ele é só um flag, não uma cor. */ :root[data-bs-theme="dark"]{ color-scheme:dark; } *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; } html,body{ margin:0; } body{ font-family:var(--font-body); color:var(--a-ink); /* --sheen é `none` no branco/preto → a camada some sozinha. */ background:var(--sheen), var(--page-bg); background-attachment:fixed; -webkit-font-smoothing:antialiased; line-height:1.5; } body[hidden]{ display:none !important; } a{ color:var(--a-accent); text-decoration:none; } /* Hover NUNCA muda a cor do link: quem sinaliza é o sublinhado. Trocar a cor no hover obriga o --accent-hover a passar contraste em toda superfície do painel, e é uma promessa fácil de quebrar ao criar um tema — o sublinhado não depende de cor nenhuma para ser visto. */ a:hover{ color:var(--a-accent); text-decoration:underline; } h1,h2,h3{ font-family:var(--font-head); margin:0; letter-spacing:-.02em; color:var(--a-ink); } :focus-visible{ outline:2px solid var(--a-accent); outline-offset:2px; border-radius:8px; } /* =========================================================== AUTH PAGES ===== */ .auth-wrap{ min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:clamp(1rem,4vw,2.5rem); } .auth-card{ width:100%; max-width:420px; background-color:var(--a-base); background-image:var(--a-glass); border:1px solid var(--a-line); border-radius:20px; box-shadow:var(--shadow-card); padding:clamp(1.6rem,5vw,2.6rem); } .auth-card .brand{ font-weight:700; font-size:1.05rem; letter-spacing:-.01em; color:var(--a-ink); font-family:var(--font-head); } .auth-card h1{ font-size:1.5rem; letter-spacing:-.02em; margin:.2rem 0 .4rem; } .auth-card .sub{ font-size:.9rem; color:var(--a-muted); margin-bottom:1.4rem; } .auth-card .form-label{ font-size:.82rem; font-weight:600; color:var(--a-ink-soft); } .auth-card ol{ margin:0 0 1rem; color:var(--a-ink-soft); } .auth-card ol li::marker{ color:var(--a-accent); } .auth-card .foot-links{ font-size:.85rem; margin-top:1rem; } .form-control{ width:100%; padding:.7rem .85rem; border-radius:12px; border:1px solid var(--a-line); background-color:var(--a-base); background-image:var(--a-glass-2); color:var(--a-ink); font-size:.95rem; font-family:var(--font-body); transition:border .15s, background .15s, box-shadow .15s; } .form-control:focus{ outline:none; background-image:var(--a-glass-3); border-color:var(--gold-ring); box-shadow:0 0 0 4px var(--a-gold-halo); } .form-control::placeholder{ color:var(--a-placeholder); opacity:1; } /* Botões do acento: liso por padrão, gradiente metálico só no hover */ .btn-brand{ background-color:var(--a-accent); background-image:var(--cta-bg,none); background-size:var(--cta-bg-size,auto); color:var(--on-gold); border:1px solid transparent; border-radius:13px; font-weight:600; padding:.75rem 1rem; cursor:pointer; font-family:var(--font-body); box-shadow:var(--a-shadow-btn); transition:background-image .25s ease, transform .12s ease, box-shadow .2s ease; } .btn-brand:hover{ background-image:var(--gold-grad); color:var(--on-gold); transform:translateY(-1px); box-shadow:0 10px 24px -12px var(--gold-glow); } .btn-brand:disabled{ opacity:.5; transform:none; background-image:none; } .btn-primary{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; background-color:var(--a-accent); background-image:var(--cta-bg,none); background-size:var(--cta-bg-size,auto); color:var(--on-gold); border:1px solid transparent; border-radius:13px; font-weight:650; font-size:14px; padding:11px 18px; cursor:pointer; font-family:var(--font-body); box-shadow:var(--a-shadow-btn); transition:background-image .25s ease, transform .12s ease, box-shadow .2s ease; } .btn-primary svg{ width:17px; height:17px; } .btn-primary:hover{ background-image:var(--gold-grad); transform:translateY(-1px); box-shadow:0 10px 24px -12px var(--gold-glow); } .form-msg{ font-size:.85rem; min-height:1.1rem; } .form-msg.err{ color:var(--a-err); } .form-msg.ok{ color:var(--a-ok); } /* olho de senha */ .pw-wrap{ position:relative; } .pw-wrap > input{ padding-right:2.7rem; } .pw-eye{ position:absolute; top:50%; right:.55rem; transform:translateY(-50%); background:none; border:none; color:var(--a-muted); padding:.15rem; line-height:0; cursor:pointer; display:flex; } .pw-eye:hover{ color:var(--a-ink); } /* QR do MFA — fundo BRANCO é obrigatório em QUALQUER tema (o leitor precisa do contraste do código; QR escuro/invertido não é lido). Não troque por token. */ .qr-box{ background:#fff; border:1px solid var(--a-line); border-radius:14px; padding:1rem; display:inline-block; } .qr-box img{ width:200px; height:200px; display:block; } .mfa-secret{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.85rem; background-color:var(--a-base); background-image:var(--a-glass-2); color:var(--a-ink-soft); border:1px solid var(--a-line); border-radius:.5rem; padding:.55rem .75rem; word-break:break-all; } .code-input{ letter-spacing:.5em; text-align:center; font-size:1.3rem; font-weight:600; } /* =============================================================== APP SHELL == */ .app{ display:flex; min-height:100vh; } /* Sidebar */ .side{ width:264px; flex:0 0 264px; background-color:var(--a-base); background-image:var(--a-glass); color:var(--a-ink-soft); padding:26px 18px; border-right:1px solid var(--a-line); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; } .side .brand{ display:flex; align-items:center; gap:12px; padding:6px 8px 22px; } .brand-mark{ width:42px; height:42px; border-radius:13px; flex:0 0 42px; background:var(--gold-grad); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:18px; color:var(--on-gold); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -8px var(--gold-glow); } .brand-txt{ display:flex; flex-direction:column; line-height:1.15; } .brand-name{ font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--a-ink); display:flex; align-items:center; gap:5px; } .brand-sub{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--a-accent); } .verified{ width:15px; height:15px; flex:0 0 15px; color:var(--a-accent); } /* O "check" do selo vem com fill="#0D0D0D" cravado no SVG do HTML: no tema branco o selo é quase preto e o check sumiria. Ele tem que ser a cor que lê SOBRE o preenchimento. CSS ganha do atributo de apresentação. */ .verified path + path{ fill:var(--on-gold); } .nav-label{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--a-faint); padding:14px 12px 8px; } .nav{ display:flex; flex-direction:column; gap:3px; } .nav a{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px; color:var(--a-ink-soft); font-size:14.5px; font-weight:500; transition:background .15s, color .15s; } .nav a svg{ width:19px; height:19px; flex:0 0 19px; opacity:.9; } .nav a:hover{ background:var(--a-hover); color:var(--a-ink); text-decoration:none; } .nav a.active{ background:var(--a-gold-soft); color:var(--a-accent); box-shadow:inset 0 0 0 1px var(--a-gold-soft-2); } .nav a.active svg{ opacity:1; } .nav a .count{ margin-left:auto; font-size:12px; background:var(--a-hover); color:var(--a-ink); padding:1px 8px; border-radius:999px; } .nav a.active .count{ background:var(--a-gold-soft-2); color:var(--a-accent); } .side-foot{ margin-top:auto; padding-top:16px; border-top:1px solid var(--a-line-2); } .side .user{ display:flex; align-items:center; gap:11px; padding:8px 8px 12px; } .side .avatar{ width:38px; height:38px; border-radius:50%; flex:0 0 38px; background:var(--gold-grad); display:flex; align-items:center; justify-content:center; color:var(--on-gold); font-weight:700; font-size:14px; font-family:var(--font-head); } .user-meta{ min-width:0; } .user-name{ font-size:13.5px; color:var(--a-ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .user-mail{ font-size:11.5px; color:var(--a-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .logout{ display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border-radius:12px; color:var(--a-ink-soft); font-size:14px; font-weight:500; background:transparent; border:1px solid var(--a-line); cursor:pointer; font-family:var(--font-body); transition:background .15s, color .15s, border-color .15s; } .logout svg{ width:18px; height:18px; } .logout:hover{ background:var(--a-hover); color:var(--a-accent); border-color:var(--gold-ring); } /* Main */ .main{ flex:1 1 auto; min-width:0; padding:34px 40px 48px; } .page-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:26px; } .eyebrow{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--a-accent); font-weight:700; margin-bottom:6px; } .page-title{ font-size:30px; font-weight:800; color:var(--a-ink); } /* --a-ink-soft, não --a-muted: este parágrafo mora na PÁGINA, não num cartão. A página é a superfície mais funda do tema (#1D2338 no crepúsculo) e não recebe a tinta do vidro, então o --muted, calibrado contra o cartão, chega aqui com menos folga do que o número da tabela de tokens sugere. */ .page-desc{ color:var(--a-ink-soft); font-size:14.5px; margin-top:5px; max-width:56ch; } .card{ --card-pad:18px; padding:var(--card-pad); background-color:var(--a-base); background-image:var(--a-glass); border-radius:var(--radius); box-shadow:var(--shadow-card); border:1px solid var(--a-line); } @media (min-width:600px){ .card{ --card-pad:26px; } } /* Respiro ENTRE cartões irmãos. Sem isto eles se encostam e a página vira uma parede de bordas: onde termina um bloco e começa o outro passa a ser adivinhação. Escopado em `.main >` de propósito — o cartão de KPI vive dentro de um grid que já tem `gap`, e a margem ali somaria em cima do gap. */ .main > .card{ margin-bottom:22px; } /* :last-child, não :last-of-type. `of-type` olha a TAG: com o glossário (
) no fim, o último
passou a ser o cartão de cliques e ele perdia a margem — os dois ficavam colados. Só zere a margem se o cartão for mesmo o último elemento. */ .main > .card:last-child{ margin-bottom:0; } /* Tabela larga sangra até a borda do cartão (o recuo do texto já vem do padding das células). Mobile-first: cada pixel conta na horizontal. */ .card > .table-wrap{ margin-left:calc(-1 * var(--card-pad)); margin-right:calc(-1 * var(--card-pad)); } /* Filter bar */ .filters{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px; margin-bottom:22px; position:relative; } .search{ position:relative; flex:1 1 280px; min-width:220px; } .search > svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--a-muted); } .search input{ width:100%; padding:12px 14px 12px 42px; border-radius:13px; border:1px solid var(--a-line); background-color:var(--a-base); background-image:var(--a-glass-2); color:var(--a-ink); font-size:14px; font-family:var(--font-body); transition:border .15s, background .15s, box-shadow .15s; } .search input::placeholder{ color:var(--a-placeholder); opacity:1; } .search input:focus{ outline:none; background-image:var(--a-glass-3); border-color:var(--gold-ring); box-shadow:0 0 0 4px var(--a-gold-halo); } .select{ position:relative; } .select > svg{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--a-muted); pointer-events:none; } .select select{ appearance:none; -webkit-appearance:none; padding:12px 38px 12px 14px; border-radius:13px; border:1px solid var(--a-line); background-color:var(--a-base); background-image:var(--a-glass-2); color:var(--a-ink-soft); font-size:14px; font-family:var(--font-body); cursor:pointer; transition:border .15s, box-shadow .15s; } .select select:focus{ outline:none; border-color:var(--gold-ring); box-shadow:0 0 0 4px var(--a-gold-halo); } .period-btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 15px; border-radius:13px; cursor:pointer; border:1px solid var(--a-line); background-color:var(--a-base); background-image:var(--a-glass-2); color:var(--a-ink); font-size:14px; font-weight:600; font-family:var(--font-body); transition:border .15s, box-shadow .15s, background .15s; } .period-btn:hover{ background-image:var(--a-glass-3); } .period-btn.is-open{ border-color:var(--gold-ring); box-shadow:0 0 0 4px var(--a-gold-halo); } .period-btn > svg{ width:17px; height:17px; color:var(--a-muted); } .period-btn .cal-ic{ color:var(--a-accent); } .period-btn .active-dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); } /* A âncora que o mountDateRange cria em volta do botão. É ela que faz o popover abrir COLADO no botão em vez de escapar para o topo da página. */ .period-anchor{ position:relative; display:inline-flex; } /* Popover */ .popover{ position:absolute; top:calc(100% + 10px); right:0; z-index:40; width:min(560px,calc(100vw - 40px)); background-color:var(--a-base); background-image:var(--a-glass); border-radius:20px; border:1px solid var(--a-line); box-shadow:var(--a-shadow-pop); overflow:hidden; } .popover[hidden]{ display:none; } .pop-body{ display:flex; } .shortcuts{ flex:0 0 168px; background-color:var(--a-base); background-image:var(--a-glass-2); border-right:1px solid var(--a-line-2); padding:14px 12px; display:flex; flex-direction:column; gap:3px; } .shortcuts .sc-label{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--a-faint); padding:6px 10px 8px; } .shortcuts button{ text-align:left; padding:10px 12px; border-radius:10px; border:none; cursor:pointer; background:transparent; color:var(--a-ink-soft); font-size:13.5px; font-weight:500; font-family:var(--font-body); transition:background .14s, color .14s; } .shortcuts button:hover{ background:var(--a-hover); color:var(--a-ink); } .shortcuts button.active{ background:var(--a-gold-soft); color:var(--a-accent); font-weight:600; box-shadow:inset 0 0 0 1px var(--a-gold-soft-2); } .cal{ flex:1 1 auto; padding:16px 18px; } .cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .cal-title{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-family:var(--font-head); font-weight:700; font-size:15px; color:var(--a-ink); background:transparent; border:none; padding:6px 10px; border-radius:10px; transition:background .14s; } .cal-title:hover{ background:var(--a-hover); } .cal-title svg{ width:14px; height:14px; color:var(--a-muted); } .cal-nav{ display:flex; gap:6px; } .cal-nav button{ width:32px; height:32px; border-radius:9px; border:1px solid var(--a-line); background-color:var(--a-base); background-image:var(--a-glass-2); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--a-ink-soft); transition:background .14s, border .14s, color .14s; } .cal-nav button:hover{ background-image:var(--a-glass-3); border-color:var(--gold-ring); color:var(--a-accent); } .cal-nav svg{ width:15px; height:15px; } .dow{ display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:4px; } .dow span{ text-align:center; font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--a-faint); padding:6px 0; text-transform:uppercase; } .grid{ display:grid; grid-template-columns:repeat(7,1fr); } .day{ position:relative; height:38px; display:flex; align-items:center; justify-content:center; font-size:13.5px; color:var(--a-ink-soft); cursor:pointer; font-variant-numeric:tabular-nums; } .day.empty{ cursor:default; } .day.muted{ color:var(--a-faint); } .day:not(.empty):not(.in-range):not(.edge) span{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background .14s; } .day:not(.empty):not(.in-range):not(.edge):hover span{ background:var(--a-hover); } .day.today:not(.edge) span{ box-shadow:inset 0 0 0 1.5px var(--gold); } .day.in-range{ background:var(--a-gold-soft); } .day.edge{ background:var(--a-gold-soft); } .day.edge.start{ border-top-left-radius:50%; border-bottom-left-radius:50%; } .day.edge.end{ border-top-right-radius:50%; border-bottom-right-radius:50%; } .day.edge.start.end{ background:transparent; } .day.edge span{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:var(--gold); color:var(--on-gold); border-radius:50%; font-weight:700; box-shadow:0 4px 12px -4px var(--gold-glow); } /* grade de meses/anos (drill-down) */ .grid-my{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:6px 0 2px; } .grid-my button{ padding:14px 6px; border-radius:12px; border:1px solid transparent; background:transparent; cursor:pointer; font-size:14px; font-weight:600; color:var(--a-ink-soft); font-family:var(--font-body); transition:background .14s, color .14s; } .grid-my button:hover{ background:var(--a-hover); color:var(--a-ink); } .grid-my button.sel{ background:var(--gold); color:var(--on-gold); } .pop-foot{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 18px; border-top:1px solid var(--a-line-2); background-color:var(--a-base); background-image:var(--a-glass-2); } .range-pill{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--a-ink); background-color:var(--a-base); background-image:var(--a-glass-3); border:1px solid var(--a-line); border-radius:11px; padding:8px 12px; font-variant-numeric:tabular-nums; } .range-pill .arrow{ color:var(--a-muted); } .pop-foot .clear{ margin-left:auto; color:var(--a-accent); font-size:13.5px; font-weight:600; cursor:pointer; background:none; border:none; font-family:var(--font-body); } .pop-foot .clear:hover{ text-decoration:underline; } .pop-foot .apply{ background-color:var(--a-accent); background-image:var(--cta-bg,none); background-size:var(--cta-bg-size,auto); color:var(--on-gold); border:none; cursor:pointer; font-family:var(--font-body); font-weight:600; font-size:13.5px; padding:10px 20px; border-radius:12px; box-shadow:var(--a-shadow-btn); transition:background-image .25s ease; } .pop-foot .apply:hover{ background-image:var(--gold-grad); } /* ------------------------------------------------------------------------- CELULAR — o popover vira folha inferior. Medido no aparelho: em 390px o layout de duas colunas produzia 566px de altura, com os atalhos empilhados EM CIMA do calendário e o botão "Aplicar" exigindo rolagem para ser alcançado. Um filtro cujo botão de confirmar não está visível não é um filtro — é uma armadilha. Ancorado na base, com os atalhos deitados numa faixa que rola na horizontal, o "Aplicar" fica sempre à vista e o polegar chega nele. ------------------------------------------------------------------------- */ @media (max-width:560px){ .popover{ position:fixed; left:8px; right:8px; bottom:8px; top:auto; width:auto; max-height:min(80vh, 620px); display:flex; flex-direction:column; border-radius:22px; } .pop-body{ flex-direction:column; min-height:0; overflow-y:auto; } .shortcuts{ flex:0 0 auto; flex-direction:row; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; border-right:0; border-bottom:1px solid var(--a-line-2); padding:10px 12px; } .shortcuts .sc-label{ display:none; } /* o rótulo rouba a faixa toda */ .shortcuts button{ white-space:nowrap; min-height:40px; padding:10px 14px; } .cal{ padding:14px 14px 6px; } .day{ height:44px; } /* alvo de toque de verdade */ .day:not(.empty):not(.in-range):not(.edge) span{ width:38px; height:38px; } .day.edge span{ width:38px; height:38px; } /* O "Aplicar" é a ação principal e no celular ela merece a largura toda: um botão do tamanho do polegar, na base, é o que se espera de uma folha. */ .pop-foot{ flex:0 0 auto; padding:12px 14px; gap:10px; } .range-pill{ order:1; } .pop-foot .clear{ order:2; margin-left:auto; } .pop-foot .apply{ order:3; width:100%; padding:13px 22px; min-height:46px; } } /* Tabela */ .table-wrap{ overflow-x:auto; border-radius:var(--radius); } table.data{ width:100%; border-collapse:collapse; min-width:860px; } table.data thead th{ text-align:left; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--a-faint); font-weight:700; padding:15px 11px; background-color:var(--a-base); background-image:var(--a-glass-2); border-bottom:1px solid var(--a-line); white-space:nowrap; } table.data thead th:first-child, table.data tbody td:first-child{ padding-left:20px; } table.data thead th:last-child, table.data tbody td:last-child{ padding-right:20px; } table.data tbody td{ padding:15px 11px; border-bottom:1px solid var(--a-line-2); font-size:14px; vertical-align:middle; white-space:nowrap; color:var(--a-ink-soft); } table.data tbody tr{ transition:background .13s; } table.data tbody tr:hover{ background:var(--a-hover-soft); } table.data tbody tr:last-child td{ border-bottom:none; } .cell-name{ display:flex; align-items:center; gap:12px; } /* Os gradientes vêm do AV_COLORS (admin.js): todos ESCUROS, com texto branco. Círculo escuro sobre cartão claro continua legível — não dependem do tema. */ .row-av{ width:36px; height:36px; border-radius:50%; flex:0 0 36px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; font-family:var(--font-head); } .nm{ font-weight:600; color:var(--a-ink); } .nm-sub{ font-size:12px; color:var(--a-faint); } .email{ color:var(--a-accent); font-weight:500; } .email:hover{ text-decoration:underline; } .wa{ display:inline-flex; align-items:center; gap:9px; color:var(--a-ink-soft); font-weight:500; font-variant-numeric:tabular-nums; } .wa .wa-ic{ width:26px; height:26px; border-radius:8px; flex:0 0 26px; background:color-mix(in srgb, var(--wa) 14%, transparent); display:flex; align-items:center; justify-content:center; } /* O verde puro (#25d366) some num cartão claro (1,9:1). Puxado 35% para o --text ele fica escuro no claro e claro no escuro. */ .wa .wa-ic svg{ width:15px; height:15px; color:color-mix(in srgb, var(--wa) 65%, var(--text)); } .wa:hover{ text-decoration:none; } .wa:hover .num{ color:var(--a-ink); text-decoration:underline; } /* Instagram — mesmo desenho do WhatsApp (ícone em quadrado + texto), para o olho varrer a linha achando o mesmo padrão em toda coluna de contato. */ /* Teto de largura: um @ real cabe em 30 caracteres, então quem estoura isto é justamente o texto errado — que não pode empurrar a tabela inteira. */ .ig{ display:inline-flex; align-items:center; gap:9px; color:var(--a-ink-soft); font-weight:500; max-width:14rem; } .ig .num{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ig .ig-ic{ width:26px; height:26px; border-radius:8px; flex:0 0 26px; background:color-mix(in srgb, var(--a-accent) 14%, transparent); display:flex; align-items:center; justify-content:center; } .ig .ig-ic svg{ width:15px; height:15px; color:color-mix(in srgb, var(--a-accent) 70%, var(--text)); } .ig:hover{ text-decoration:none; } .ig:hover .num{ color:var(--a-ink); text-decoration:underline; } /* Formato estranho: o link continua clicável (pode ser só um @ incomum), mas avisado. O tracejado diz "não confie de olhos fechados" sem gritar erro. */ .ig-suspeito .num{ text-decoration:underline dotted; text-underline-offset:3px; } /* Em linha própria: ao lado do @ o aviso dobrava a largura da coluna. */ .ig-alerta{ display:block; margin-top:2px; font-size:11.5px; font-weight:600; color:var(--serie-4,#c0392b); cursor:help; } /* Chips: a cor da categoria é só uma MATIZ (--a-chip). O fundo é ela a 13% e o texto é ela puxada para o --text do tema — no claro vira um tom escuro da matiz, no escuro um pastel. Assim o mesmo chip passa nos 5 temas. */ .chip{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 9px; border-radius:999px; font-size:12.5px; font-weight:600; border:1px solid color-mix(in srgb, var(--a-chip) 30%, transparent); background:color-mix(in srgb, var(--a-chip) 13%, transparent); color:color-mix(in srgb, var(--a-chip) 38%, var(--text)); } .chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--a-chip); } .chip.c-blue{ --a-chip:#6096ff; } .chip.c-green{ --a-chip:#34c778; } .chip.c-amber{ --a-chip:var(--gold); } .chip.c-pink{ --a-chip:#e266b2; } .chip.c-red{ --a-chip:#f06e69; } .chip.c-grey{ --a-chip:var(--muted); } .country{ display:inline-flex; align-items:center; gap:8px; color:var(--a-ink-soft); } .flag{ font-size:16px; line-height:1; } .date{ color:var(--a-muted); font-variant-numeric:tabular-nums; } .cell-clip{ max-width:11rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--a-muted); } /* Paginação */ .pager{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:16px 18px; border-top:1px solid var(--a-line-2); } .pager .info{ font-size:13.5px; color:var(--a-muted); } .pager .info b{ color:var(--a-ink); font-weight:700; } .pager-btns{ display:flex; gap:8px; align-items:center; } .pg{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:11px; border:1px solid var(--a-line); background-color:var(--a-base); background-image:var(--a-glass-2); font-size:13.5px; font-weight:600; color:var(--a-ink); cursor:pointer; font-family:var(--font-body); transition:background .14s, border .14s, color .14s; } .pg svg{ width:15px; height:15px; } .pg:hover:not(:disabled){ background-image:var(--a-glass-3); border-color:var(--gold-ring); color:var(--a-accent); } .pg:disabled{ color:var(--a-muted); cursor:not-allowed; opacity:.6; } .pg-num{ width:36px; height:36px; padding:0; justify-content:center; } .pg-num.cur{ background-color:var(--a-accent); background-image:var(--cta-bg,none); background-size:var(--cta-bg-size,auto); color:var(--on-gold); border-color:var(--a-accent); } .pg-num.cur:hover{ background-color:var(--a-accent); background-image:none; color:var(--on-gold); } .empty-state{ padding:3rem 1rem; text-align:center; color:var(--a-muted); font-size:14px; } /* Responsivo */ @media (max-width:940px){ .app{ flex-direction:column; } .side{ width:auto; flex:none; height:auto; position:static; flex-direction:row; align-items:center; gap:14px; padding:14px 16px; border-right:none; border-bottom:1px solid var(--a-line); } .side .brand{ padding:0; flex:1 1 auto; } .nav-label{ display:none; } .nav{ flex-direction:row; gap:4px; } .nav a .count{ display:none; } .side-foot{ margin-top:0; padding-top:0; border-top:none; display:flex; align-items:center; gap:10px; flex:0 0 auto; } .side .user{ display:none; } .logout{ width:auto; padding:10px 12px; } .logout span{ display:none; } .main{ padding:24px 18px 40px; } /* ===== MOBILE: dois ajustes que só existem por causa do aparelho ========= 1. FONTE 16px NOS CAMPOS. O Safari do iPhone dá ZOOM na página inteira quando o dedo toca um campo com fonte menor que 16px — e depois não volta sozinho. O painel usava 15,2px nos formulários e 14px nos filtros, então todo toque num campo empurrava o layout. Não é estética: é a diferença entre digitar e brigar com a tela. 2. ALVO DE TOQUE >= 44px. As abas do menu ficavam em 39x37 e o "Sair" em 40x38 — mira de mouse, não de polegar. 44px é o mínimo recomendado por Apple e Google, e aqui cabe sem apertar o layout. */ .form-control, .search input, .select select, input, select, textarea{ font-size:16px; } /* A barra virou uma linha: sem `min-width:0` os filhos flex se recusam a encolher abaixo do próprio conteúdo e a soma estoura a tela por alguns pixels — a página inteira passa a rolar de lado no celular. Some quase invisível, mas é o suficiente para a tela "tremer" ao arrastar. Com isto, a marca trunca e o menu se ajusta em vez de empurrar. */ .side{ max-width:100%; overflow:hidden; } .side > *{ min-width:0; } .side .brand{ min-width:0; } .brand-txt{ min-width:0; overflow:hidden; } .brand-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nav{ flex:0 1 auto; overflow-x:auto; scrollbar-width:none; } .nav::-webkit-scrollbar{ display:none; } } @media (max-width:560px){ .page-title{ font-size:25px; } .nav a span.lbl{ display:none; } /* topbar mais compacta: marca em 1 linha mesmo em ~360px */ .side{ padding:12px 14px; gap:10px; } .side .brand{ padding:0; gap:9px; } .brand-mark{ width:36px; height:36px; flex-basis:36px; border-radius:11px; font-size:15px; } .brand-name{ white-space:nowrap; font-size:13.5px; } .brand-sub{ display:none; } .nav a{ padding:9px 10px; } .logout{ padding:9px 10px; } .popover{ right:0; left:0; width:auto; } .pop-body{ flex-direction:column; } .shortcuts{ flex:none; border-right:none; border-bottom:1px solid var(--a-line-2); flex-direction:row; flex-wrap:wrap; gap:6px; } .shortcuts .sc-label{ width:100%; } } /* ============================================= Modal (novo atleta/parceria) = */ /* O véu é preto em todos os temas de propósito: escurecer o fundo é a convenção de modal também no claro (o Bootstrap usa rgba(0,0,0,.5)). */ .modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); z-index:60; /* Padding simétrico: com 5vh em cima e 3vh embaixo, o `margin:auto` do .modal-card centralizava dentro de uma caixa torta e o modal ficava alguns pixels acima do centro real. */ display:flex; align-items:flex-start; justify-content:center; padding:4vh 1rem; overflow-y:auto; } .modal-overlay[hidden]{ display:none; } /* `margin:auto` centraliza VERTICALMENTE, e não `align-items:center` no overlay acima — de propósito. Com `center`, um modal mais alto que a tela (o de editar parceria, com onze campos) tem o topo cortado para fora da área rolável: não dá para chegar nele nem rolando. A margem automática centraliza quando sobra espaço e vira zero quando não sobra, deixando o modal alto começar no topo e rolar inteiro. Serve aos dois tamanhos sem escolher um. */ .modal-card{ width:100%; max-width:540px; margin:auto; background-color:var(--a-base); background-image:var(--a-glass); border:1px solid var(--a-line); border-radius:20px; box-shadow:var(--a-shadow-pop); padding:clamp(1.5rem,4vw,2.1rem); } .modal-card .m-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; } .modal-card h2{ font-size:1.3rem; } .modal-card .m-sub{ font-size:.88rem; color:var(--a-muted); margin:.15rem 0 1.2rem; } .modal-x{ background:none; border:none; color:var(--a-muted); cursor:pointer; padding:.2rem; line-height:0; } .modal-x:hover{ color:var(--a-ink); } .modal-x svg{ width:22px; height:22px; } .fld{ margin-bottom:.85rem; } .fld label{ display:block; font-size:.8rem; font-weight:600; margin-bottom:.3rem; color:var(--a-ink-soft); } .fld-row{ display:flex; gap:.6rem; } .fld-row > .fld{ flex:1; margin-bottom:.85rem; } .wa-group{ display:flex; gap:.5rem; } .wa-group select{ flex:0 0 auto; width:auto; min-width:96px; } .wa-group .ddd{ flex:0 0 74px; text-align:center; } .input-at{ display:flex; } /* --a-ink-soft: o prefixo "@" fica sobre a superfície MAIS clara/rebaixada do admin (--a-glass-3); com --a-muted ele dava 3,1:1 no branco. */ .input-at .at{ display:flex; align-items:center; padding:0 .7rem; border:1px solid var(--a-line); border-right:none; border-radius:12px 0 0 12px; background-color:var(--a-base); background-image:var(--a-glass-3); color:var(--a-ink-soft); font-size:.9rem; } .input-at .form-control{ border-radius:0 12px 12px 0; } /* A seta do select é uma imagem de fundo: ela NÃO pode substituir a camada de vidro do .form-control (o campo cairia para a cor da página). Por isso as duas camadas são declaradas juntas — a seta primeiro, o vidro embaixo. O cinza 50% da seta (#808080) tem >=3:1 nos 5 temas, claros e escuros. */ /* ⚠️ CADA CAMADA PRECISA DA PRÓPRIA posição/repetição/tamanho. Antes havia `background-position:right .7rem center` com UM valor só, e o CSS o aplicava às DUAS camadas: a seta ficava no lugar certo, mas o gradiente do vidro era empurrado 0,7rem para a esquerda e deixava uma faixa sem pintar na direita, mostrando a cor da PÁGINA por baixo do campo. Nos temas escuros isso aparecia como uma tarja preta grudada na seta. O mesmo valia para `background-repeat:no-repeat`, que impedia o gradiente de cobrir a sobra. */ select.form-control{ appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"), var(--a-glass-2); background-repeat:no-repeat, repeat; background-position:right .7rem center, 0 0; background-size:16px 16px, auto; padding-right:2.2rem; } select.form-control:focus{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"), var(--a-glass-3); background-repeat:no-repeat, repeat; background-position:right .7rem center, 0 0; background-size:16px 16px, auto; } textarea.form-control{ resize:vertical; min-height:5rem; } .m-actions{ display:flex; gap:.6rem; margin-top:1.1rem; } .m-actions .btn-brand{ flex:1; } .btn-ghost{ background-color:var(--a-base); background-image:var(--a-glass-3); color:var(--a-ink); border:1px solid var(--a-line); border-radius:13px; font-weight:600; padding:.75rem 1rem; cursor:pointer; font-family:var(--font-body); transition:background .15s, color .15s, border-color .15s; } .btn-ghost:hover{ color:var(--a-accent); border-color:var(--gold-ring); } .consent-line{ font-size:.78rem; color:var(--a-muted); margin-top:.7rem; line-height:1.45; } /* Ações destrutivas. Vermelho é o único lugar do admin onde a cor carrega significado em vez de tema — e é de propósito: excluir não pode parecer com salvar. O --err vem do tema, então funciona nos cinco. */ .btn-perigo{ background:var(--a-err); color:#fff; border:1px solid transparent; border-radius:13px; font-weight:700; padding:.75rem 1rem; cursor:pointer; font-family:var(--font-body); transition:filter .15s, transform .12s; } .btn-perigo:hover{ filter:brightness(1.12); transform:translateY(-1px); } .btn-perigo:focus-visible{ outline:2px solid var(--a-err); outline-offset:2px; } .modal-perigo{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--a-err) 38%, transparent), var(--a-shadow-pop); } .m-perigo{ margin:.9rem 0 0; padding:12px 14px; border-radius:12px; font-size:12.8px; line-height:1.55; color:var(--a-err); background:color-mix(in srgb, var(--a-err) 9%, transparent); } /* Lista "de → para" da confirmação de edição. */ .dif{ list-style:none; margin:.9rem 0 0; padding:0; display:grid; gap:8px; } .dif li{ display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline; gap:6px 10px; padding:10px 12px; border-radius:11px; font-size:13px; background:var(--a-hover-soft); } .dif-lb{ grid-column:1 / -1; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--a-faint); } .dif-de{ color:var(--a-muted); text-decoration:line-through; overflow-wrap:anywhere; } .dif-seta{ color:var(--a-accent); font-weight:700; } .dif-para{ color:var(--a-ink); font-weight:600; overflow-wrap:anywhere; } .dif-vazio{ opacity:.65; font-style:italic; } .fld-dica{ display:block; margin-top:5px; font-size:11.8px; color:var(--a-muted); line-height:1.45; } /* Nota do que NÃO é editável — evita a pergunta "cadê o campo de data?". */ .m-nota{ margin:.9rem 0 0; padding:11px 13px; border-radius:11px; font-size:12.2px; line-height:1.5; color:var(--a-muted); background:var(--a-hover-soft); } /* A coluna de ações fica PRESA na borda direita enquanto o resto da tabela rola de lado. Sem isto ela é a última de nove colunas e cai fora da tela: os botões existiriam, mas ninguém os veria sem arrastar a tabela — que é o mesmo que não existirem. Fundo opaco (base + vidro, nunca só o vidro translúcido) para o conteúdo passar POR BAIXO em vez de atravessar. */ .col-acoes{ text-align:right; } th.col-acoes, td.cel-acoes{ position:sticky; right:0; z-index:2; background-color:var(--a-base); background-image:var(--a-glass); } th.col-acoes{ z-index:3; background-image:var(--a-glass-2); } /* Fio à esquerda: sinaliza que a coluna está ancorada e que há conteúdo por baixo. */ th.col-acoes::before, td.cel-acoes::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--a-line-2); } /* O hover da linha não alcança a célula presa (ela tem fundo próprio): repõe. */ table.data tbody tr:hover td.cel-acoes{ background-image:linear-gradient(var(--a-hover-soft),var(--a-hover-soft)),var(--a-glass); } /* Rodapé da ficha: Excluir à ESQUERDA e afastado do Editar. Botão destrutivo colado no primário é como se erra por reflexo. */ .ficha-acoes{ display:flex; align-items:center; justify-content:space-between; margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--a-line-2); } .ficha-acoes .btn-ic{ width:38px; height:38px; } /* Botões de ação na linha da tabela (editar / excluir). */ .acoes{ display:flex; gap:6px; justify-content:flex-end; } .btn-ic{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:9px; cursor:pointer; background:transparent; border:1px solid var(--a-line-2); color:var(--a-muted); transition:color .14s, border-color .14s, background .14s; } .btn-ic svg{ width:15px; height:15px; } .btn-ic:hover{ color:var(--a-accent); border-color:var(--gold-ring); background:var(--a-hover-soft); } .btn-ic.perigo:hover{ color:var(--a-err); border-color:color-mix(in srgb, var(--a-err) 45%, transparent); } /* "Expandir" já nasce aceso: é a ação principal da linha e a que precisava de um sinal — o `›` na coluna Detalhes marcava o corte do texto, mas não parecia um botão. Os outros dois só se acendem no hover, para não competir. */ .btn-ic.destaque{ color:var(--a-accent); border-color:var(--a-gold-soft-2); background:var(--a-gold-soft); } .btn-ic.destaque:hover{ background:var(--a-gold-soft-2); border-color:var(--gold-ring); } .btn-ic:focus-visible{ outline:2px solid var(--a-accent); outline-offset:1px; } /* ============================================== Ficha (parceria / futuro) === A proposta é a informação mais valiosa da tela e vinha CORTADA numa célula. Aqui cada campo aparece por inteiro. Só tokens — segue os 5 temas. */ .row-ficha{ cursor:pointer; } .row-ficha:focus-visible{ outline:2px solid var(--a-accent); outline-offset:-2px; } /* AFORDÂNCIA: a linha sempre abriu a ficha, mas nada dizia isso — e a proposta, que é a informação mais valiosa da tela, ficava cortada sem sinal de que havia mais. `cursor:pointer` não resolve: só aparece DEPOIS de passar o mouse, e no celular não existe passar o mouse. Por isso o sinal é permanente. */ .row-ficha .cell-clip{ position:relative; padding-right:1.5rem; } .row-ficha .cell-clip::after{ content:"›"; position:absolute; right:.3rem; top:50%; transform:translateY(-50%); font-size:1.15rem; line-height:1; color:var(--a-faint); transition:color .14s ease, transform .14s ease; } table.data tbody tr.row-ficha:hover{ background:var(--a-hover); } .row-ficha:hover .cell-clip::after, .row-ficha:focus-visible .cell-clip::after{ color:var(--a-accent); transform:translateY(-50%) translateX(3px); } /* Dica acima da tabela — o aviso que funciona antes do primeiro clique. */ .dica-clique{ display:flex; align-items:center; gap:8px; margin:0; padding:13px 18px; border-bottom:1px solid var(--a-line-2); font-size:13px; color:var(--a-muted); } .dica-clique svg{ width:15px; height:15px; flex:0 0 15px; color:var(--a-accent); } .ficha-card{ max-width:640px; } .ficha{ display:flex; flex-direction:column; gap:2px; margin-top:.4rem; } .f-row{ display:grid; grid-template-columns:150px 1fr; gap:1rem; align-items:start; padding:.7rem .2rem; border-bottom:1px solid var(--a-line-2); } .f-row:last-child{ border-bottom:none; } .f-lb{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--a-muted); padding-top:.15rem; } .f-vl{ font-size:14px; color:var(--a-ink); min-width:0; word-break:break-word; } .f-vl a{ color:var(--a-accent); } .f-vl a:hover{ text-decoration:underline; } /* O texto da proposta: preserva as quebras de linha que a pessoa escreveu. */ .f-texto{ white-space:pre-wrap; line-height:1.55; color:var(--a-ink-soft); background-color:var(--a-base); background-image:var(--a-glass-2); border:1px solid var(--a-line-2); border-radius:10px; padding:.7rem .85rem; } /* No celular a ficha vira uma coluna só (150px de rótulo não cabem). */ @media (max-width:560px){ .f-row{ grid-template-columns:1fr; gap:.3rem; } } /* ================================================== Dashboard de conversão === Três números e uma tabela. Sem gráfico: o dado que o Léo precisa (quantos entraram, quantos viraram contato, de qual banner) se lê melhor em número grande do que em barra. Só tokens — segue os 5 temas. */ .kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:22px; } .kpi{ padding:20px 22px; } .kpi-lb{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--a-muted); } .kpi-vl{ font-family:var(--font-head); font-weight:800; font-size:34px; line-height:1.1; letter-spacing:-.02em; color:var(--a-ink); margin:.35rem 0 .2rem; font-variant-numeric:tabular-nums; } .kpi-sub{ font-size:12.5px; color:var(--a-muted); } /* A conversão é O número da tela: ela ganha o acento. */ .kpi-destaque .kpi-vl{ color:var(--a-accent); } table.data th.num, table.data td.num{ text-align:right; font-variant-numeric:tabular-nums; } table.data td.soft{ color:var(--a-muted); } table.data td.destaque{ color:var(--a-accent); font-weight:700; } /* As origens são detalhe do "Meu Time": recuam e pesam menos. */ .linha-filha td{ color:var(--a-muted); } .linha-filha td:first-child{ padding-left:2rem; } .ramo{ color:var(--a-muted); margin-right:.3rem; } table.data tfoot td{ padding:15px 11px; border-top:1px solid var(--a-line); font-weight:700; color:var(--a-ink); } table.data tfoot td:first-child{ padding-left:20px; } table.data tfoot td:last-child{ padding-right:20px; } @media (max-width:940px){ .kpis{ grid-template-columns:1fr; gap:12px; } .kpi-vl{ font-size:30px; } } /* ============================================================================= DASHBOARD — cartões, cabeçalho de bloco e a lista de quem converteu. Tudo em token: cor cravada aqui reapareceria errada em algum dos 5 temas. ============================================================================= */ /* Mobile-first: 1 coluna no celular, cresce até 5 cartões no desktop. */ .kpis-4{ grid-template-columns:1fr; } @media (min-width:520px){ .kpis-4{ grid-template-columns:repeat(2,1fr); } } @media (min-width:860px){ .kpis-4{ grid-template-columns:repeat(3,1fr); } } @media (min-width:1180px){ .kpis-4{ grid-template-columns:repeat(5,1fr); } } /* Seis cartões. Mobile-first: um por linha, depois 2, depois 3 (duas fileiras certinhas) e só numa tela larga os seis lado a lado. Em 3 colunas os seis fecham dois blocos iguais — nunca sobra um órfão sozinho na última fileira. */ .kpis-6{ grid-template-columns:1fr; } @media (min-width:520px){ .kpis-6{ grid-template-columns:repeat(2,1fr); } } @media (min-width:860px){ .kpis-6{ grid-template-columns:repeat(3,1fr); } } @media (min-width:1320px){ .kpis-6{ grid-template-columns:repeat(6,1fr); } } /* Rótulo de URL. O maiúsculo com .14em de espaçamento — ótimo para "VISITANTES ÚNICOS" — inchava "leonicolazzitreinador.com.br" a ponto de quebrar em "ERICMATHEUS.COM.B / R". URL não é rótulo para gritar: aqui ela fica em caixa normal, sem espaçamento extra, e cabe inteira na coluna. */ .kpi-lb-url{ text-transform:none; letter-spacing:0; font-size:12px; /* `anywhere` quebrava no meio da palavra ("…com.br/lin / ks"). Aqui a quebra acontece só onde o HTML autoriza, com um antes da barra: ou a URL cabe inteira, ou parte exatamente em "leonicolazzitreinador.com.br" + "/links". */ overflow-wrap:normal; word-break:normal; } .card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; } .card-title{ font-family:var(--font-head); font-weight:700; font-size:16px; color:var(--a-ink); margin:0; } .card-hint{ font-size:12px; color:var(--a-faint); } /* Chip que aparece quando o usuário clica num dia do gráfico. Ele é a ÚNICA pista de que a lista abaixo está filtrada — sem ele, o dono veria 1 contato onde há 12 e acharia que perdeu dado. */ .chip-dia{ border:1px solid var(--gold-ring); background:var(--a-gold-soft); color:var(--a-accent); font-family:var(--font-body); font-weight:600; font-size:12.5px; padding:7px 12px; border-radius:999px; cursor:pointer; min-height:36px; transition:background .14s; } .chip-dia:hover{ background:var(--a-gold-soft-2); } /* O mesmo chip, mas dentro do cartão do gráfico (e não no cabeçalho de uma lista): precisa de respiro próprio e de ficar à esquerda, alinhado ao eixo. O `[hidden]` explícito é obrigatório: o atributo hidden do HTML só esconde porque a folha do navegador diz `[hidden]{display:none}` — e QUALQUER display declarado numa classe vence essa regra. Sem a linha abaixo, o botão continua na tela depois de `el.hidden = true`, e o "desfazer" não desfaz nada. */ .chip-no-grafico{ display:inline-block; margin:2px 0 14px; } .chip-no-grafico[hidden]{ display:none; } .tag{ display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap; } /* Etiqueta que também é atalho para o painel da pessoa. Sem o cursor e o realce ela pareceria só um rótulo — ninguém tentaria clicar. */ .tag-link{ cursor:pointer; text-decoration:none; transition:filter .13s, transform .13s; } .tag-link:hover{ filter:brightness(1.18); transform:translateY(-1px); text-decoration:none; } .tag-link:focus-visible{ outline:2px solid var(--a-accent); outline-offset:2px; } .tag-t{ background:var(--a-gold-soft); color:var(--a-accent); box-shadow:inset 0 0 0 1px var(--a-gold-soft-2); } .tag-p{ background:var(--a-hover); color:var(--a-ink-soft); box-shadow:inset 0 0 0 1px var(--a-line); } table.data.data-compacta{ min-width:640px; } table.data.data-compacta a{ color:var(--a-accent); text-decoration:none; } table.data.data-compacta a:hover{ text-decoration:underline; } .nota-privacidade{ margin-top:1rem; font-size:12.5px; } /* Seletor de modo do gráfico (Visão geral / Por país). Dois estados só — segmented control, não dropdown: com duas opções, o dropdown esconde metade da resposta atrás de um clique. */ .seg{ display:inline-flex; gap:2px; padding:3px; border-radius:999px; border:1px solid var(--a-line); background-color:var(--a-base); background-image:var(--a-glass-2); } .seg-b{ border:none; background:transparent; cursor:pointer; border-radius:999px; padding:7px 14px; min-height:34px; font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--a-muted); transition:background .14s, color .14s; } .seg-b:hover{ color:var(--a-ink); } .seg-b.is-on{ background:var(--a-gold-soft); color:var(--a-accent); box-shadow:inset 0 0 0 1px var(--a-gold-soft-2); } /* Período + filtro de país lado a lado no cabeçalho, quebrando juntos no celular em vez de um empurrar o outro para fora da tela. */ .head-acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; } /* A lista de cliques cresce com o catálogo de botões (hoje 21 eventos). Sem teto, ela empurra "Quem entrou em contato" para fora da primeira dobra e o dono deixa de ver os contatos — que são o que importa. O scroll é DA LISTA, não da página. */ /* Altura presa à JANELA, não em pixels fixos. 340px cravado ocupava 46% de um celular pequeno e 34% do desktop: o mesmo número dava experiências diferentes. O clamp segura os dois extremos — nunca tão curta que caibam duas linhas, nem tão alta que engula a tela do celular. */ .lista-rolavel{ max-height:clamp(220px, 44vh, 400px); overflow-y:auto; overscroll-behavior:contain; } /* Listas principais (contatos, Meu Time, Parcerias). As duas últimas paginam de 25 em 25, então precisam de fôlego para a paginação ficar alcançável sem rolar a página inteira — que é a razão de existir do scroll interno. */ .lista-rolavel-alta{ max-height:clamp(300px, 60vh, 620px); overflow-y:auto; overscroll-behavior:contain; } /* Cabeçalho preso no topo enquanto se rola: sem ele, a coluna "Pessoas-dia" perde o rótulo e vira um número sem nome. */ .lista-rolavel thead th, .lista-rolavel-alta thead th{ position:sticky; top:0; z-index:1; background-color:var(--a-base); background-image:var(--a-glass); } /* Glossário recolhível do dashboard. */ .glossario{ border-radius:var(--radius); background-color:var(--a-base); background-image:var(--a-glass); box-shadow:inset 0 0 0 1px var(--a-line-2); margin-bottom:22px; } .glossario > summary{ display:flex; align-items:center; gap:10px; cursor:pointer; padding:16px 18px; font-size:14px; font-weight:600; color:var(--a-ink); list-style:none; user-select:none; border-radius:var(--radius); } /* O triângulo padrão do navegador aparece nos dois motores por caminhos diferentes; a seta é nossa para girar junto com o estado. */ .glossario > summary::-webkit-details-marker{ display:none; } .glossario > summary::marker{ content:""; } .glossario > summary:hover{ color:var(--a-accent); } .glossario > summary:focus-visible{ outline:2px solid var(--a-accent); outline-offset:-2px; } .gl-seta{ width:17px; height:17px; flex:0 0 17px; color:var(--a-accent); transition:transform .18s ease; } .glossario[open] > summary .gl-seta{ transform:rotate(180deg); } .gl-corpo{ padding:0 18px 18px; } .glossario dl{ margin:0; display:grid; gap:14px; } .glossario dt{ font-size:13px; font-weight:700; color:var(--a-ink); letter-spacing:.01em; margin-bottom:3px; } .glossario dd{ margin:0; font-size:13px; line-height:1.62; color:var(--a-ink-soft); } @media (min-width:760px){ .glossario dl{ grid-template-columns:210px 1fr; gap:16px 22px; align-items:baseline; } .glossario dt{ margin-bottom:0; text-align:right; } } /* Aviso de falha de carregamento — precisa ser impossível de não ver: a alternativa é o dono ler um zero errado e tomar decisão em cima dele. */ .aviso-falha{ margin:0 0 22px; padding:14px 18px; border-radius:var(--radius); font-size:13.5px; line-height:1.5; font-weight:500; color:var(--serie-4,#c0392b); background:color-mix(in srgb, var(--serie-4,#c0392b) 10%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--serie-4,#c0392b) 34%, transparent); } .aviso-falha[hidden]{ display:none; } /* Alarme de medição parada — âmbar, não vermelho: é uma SUSPEITA que pede conferência, não um erro confirmado. Vermelho aqui competiria com a tarja de falha real e gastaria o alarme mais forte à toa. */ .aviso-medicao{ margin:0 0 22px; padding:14px 18px; border-radius:var(--radius); font-size:13.5px; line-height:1.55; color:color-mix(in srgb, var(--a-accent) 60%, var(--a-ink)); background:var(--a-gold-soft); box-shadow:inset 0 0 0 1px var(--a-gold-soft-2); } .aviso-medicao[hidden]{ display:none; } /* Resposta da verificação por e-mail, no Registro. Verde quando achou, neutro quando não — "não achei nada" costuma ser a resposta CERTA, não um erro. */ .aviso-verificacao{ margin:0 0 22px; padding:14px 18px; border-radius:var(--radius); font-size:13.5px; line-height:1.55; } .aviso-verificacao[hidden]{ display:none; } .aviso-verificacao.tem{ color:color-mix(in srgb, var(--a-ok) 72%, var(--a-ink)); background:color-mix(in srgb, var(--a-ok) 10%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--a-ok) 30%, transparent); } .aviso-verificacao.nada{ color:var(--a-ink-soft); background:var(--a-hover-soft); box-shadow:inset 0 0 0 1px var(--a-line-2); } /* Etiquetas dos campos alterados. */ .campos{ display:flex; flex-wrap:wrap; gap:4px; } .campo-tag{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; color:var(--a-ink-soft); background:var(--a-hover); } .autor{ font-size:12.5px; color:var(--a-muted); overflow-wrap:anywhere; } .vazio{ color:var(--a-faint); } /* Linha de origem das visitas (país) — sinaliza tráfego estrangeiro suspeito. */ .nota-origem{ margin:-6px 0 22px; font-size:13px; color:var(--a-ink-soft); } .nota-origem[hidden]{ display:none; } .nota-origem .alerta{ color:var(--serie-4,#c0392b); font-weight:600; } @media (max-width:560px){ .kpis{ grid-template-columns:1fr; gap:12px; } .kpi{ padding:16px 18px; } .kpi-vl{ font-size:28px; } } /* ============================================================================= MOBILE — alvos de toque. Fica NO FIM do arquivo de propósito: as regras base de .btn-ic, .seg-b e .pg são declaradas mais abaixo do que a media query de responsivo, e com a mesma especificidade quem vem depois vence. Escrito lá em cima, este bloco não fazia efeito nenhum. 44px é o mínimo recomendado por Apple e Google para o polegar; abaixo disso a pessoa erra o botão e, numa lista com "excluir", errar o botão é caro. ============================================================================= */ @media (max-width:940px){ .nav a{ min-height:44px; min-width:44px; justify-content:center; } .logout{ min-height:44px; min-width:44px; justify-content:center; } .seg-b{ min-height:44px; padding-top:10px; padding-bottom:10px; } .btn-ic{ width:44px; height:44px; } .pg{ min-height:44px; min-width:44px; } /* Com os botões em 44px a paginação não cabe numa linha em 320px. Deixar quebrar é melhor que encolher o alvo de volta — o objetivo era o polegar. */ .pager-btns{ flex-wrap:wrap; justify-content:flex-end; gap:6px; } .gr-chip{ min-height:44px; } /* Dedo é mais grosso que ponteiro: mais respiro entre ações vizinhas para o "editar" e o "excluir" não virarem o mesmo alvo. */ .acoes{ gap:10px; } } /* ============================================================================= PAINEL DE INSTAGRAM (/clientes/instagram) — layout dos 4 widgets. Reusa .card / .kpi / .seg / .glossario; aqui só o que é específico. Cores das séries são inline (lidas de token pelo JS), nunca aqui. ============================================================================= */ .ig-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; } .ig-head .card-title{ display:flex; align-items:center; gap:8px; } .ig-head-tools{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } /* Público: modo + audiência lado a lado */ .ig-sub{ font-size:12px; color:var(--a-muted); margin:.2rem 0 .9rem; } .ig-chart{ position:relative; width:100%; height:264px; } .ig-chart.tall{ height:320px; } /* Legenda clicável (chip com quadradinho de cor + rótulo). */ .ig-legend{ display:flex; flex-wrap:wrap; gap:6px; margin:.2rem 0 .9rem; } .ig-leg{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:1px solid var(--a-line); border-radius:10px; padding:5px 9px; background-color:var(--a-base); background-image:var(--a-glass-2); font-size:11.5px; font-weight:600; color:var(--a-ink-soft); transition:opacity .14s, color .14s; } .ig-leg:hover{ color:var(--a-ink); } .ig-leg .sw{ width:11px; height:11px; border-radius:3px; flex:0 0 11px; } .ig-leg.off{ color:var(--a-faint); text-decoration:line-through; } .ig-leg.off .sw{ opacity:.35; } /* Cartõezinhos de métrica sob cada gráfico. */ .ig-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:14px; } @media (min-width:560px){ .ig-cards.c3{ grid-template-columns:repeat(3,1fr); } .ig-cards.c4{ grid-template-columns:repeat(4,1fr); } } .ig-mc{ background:var(--a-hover-soft); border-radius:11px; padding:10px 12px; } .ig-mc .lb{ font-size:11px; color:var(--a-muted); margin-bottom:3px; } .ig-mc .vl{ font-size:17px; font-weight:700; color:var(--a-ink); line-height:1.15; font-variant-numeric:tabular-nums; } .ig-mc .sb{ font-size:10.5px; color:var(--a-faint); margin-top:2px; } /* Dropdown de objetivo (Widget 4). */ .ig-obj{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:1px solid var(--a-line); border-radius:10px; padding:5px 10px; min-height:34px; background-color:var(--a-base); background-image:var(--a-glass-2); font-size:12px; font-weight:600; color:var(--a-ink-soft); } .ig-obj .dot{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; } .ig-obj-pop{ position:absolute; z-index:20; margin-top:4px; min-width:190px; background-color:var(--a-base); background-image:var(--a-glass); border:1px solid var(--a-line); border-radius:12px; box-shadow:var(--a-shadow-pop); padding:5px; } .ig-obj-pop button{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:none; background:transparent; cursor:pointer; font-family:var(--font-body); font-size:12px; color:var(--a-ink-soft); padding:7px 9px; border-radius:8px; } .ig-obj-pop button:hover{ background:var(--a-hover); } .ig-obj-pop button.is-on{ background:var(--a-gold-soft); color:var(--a-accent); font-weight:700; } .ig-obj-pop .dot{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; } /* Faixa "Base: N posts · N anúncios · …" no cabeçalho da página. */ .ig-base{ font-size:12.5px; color:var(--a-muted); margin-top:6px; } /* Mobile estreito: o filtro de tipo (Consolidado/Carrossel/Imagem/Reel) e os toggles de granularidade são pílulas de largura fixa; em 320px estouram o cartão. Aqui eles rolam de lado em vez de empurrar a página. Só afeta a página do Instagram (só ela usa [data-seg]). */ @media (max-width:560px){ .seg[data-seg]{ max-width:100%; overflow-x:auto; scrollbar-width:none; } .seg[data-seg]::-webkit-scrollbar{ display:none; } .seg[data-seg] .seg-b{ flex:0 0 auto; } } /* ---- Listas sob os gráficos do Instagram (posts / anúncios) --------------- */ .ig-list{ margin-top:16px; border:1px solid var(--a-line-2); border-radius:14px; padding:12px; } .ig-list-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; } .ig-list-title{ font-size:13px; font-weight:600; color:var(--a-ink); } .ig-list-title .info{ font-weight:400; color:var(--a-faint); } .ig-list-title .info.azul{ color:var(--a-accent); } .ig-list-tools{ display:flex; align-items:center; gap:8px; } .ig-clear{ border:none; background:transparent; cursor:pointer; color:var(--a-accent); font-size:12px; font-family:var(--font-body); } .ig-clear:hover{ text-decoration:underline; } .ig-clear[hidden]{ display:none; } .ig-list-rows{ display:flex; flex-direction:column; gap:6px; max-height:420px; overflow-y:auto; overscroll-behavior:contain; } .ig-list-vazio{ text-align:center; padding:18px; font-size:12.5px; color:var(--a-faint); } .ig-row{ display:flex; gap:10px; align-items:flex-start; padding:8px; border-radius:11px; background:var(--a-hover-soft); } .ig-thumb{ position:relative; width:52px; height:52px; flex:0 0 52px; border-radius:10px; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--a-glass-2); color:var(--a-muted); } .ig-thumb:hover{ opacity:.9; } .ig-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .ig-thumb svg{ width:22px; height:22px; } .ig-thumb.t-car{ color:var(--serie-5); } .ig-thumb.t-img{ color:var(--serie-1); } .ig-thumb.t-reel{ color:var(--serie-6); } .ig-play{ position:absolute; right:3px; bottom:3px; width:15px; height:15px; border-radius:50%; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; } .ig-play svg{ width:8px; height:8px; color:#fff; } .ig-row-body{ flex:1; min-width:0; } .ig-row-top{ display:flex; align-items:center; gap:6px; margin-bottom:3px; } .ig-badge{ font-size:9.5px; font-weight:700; letter-spacing:.03em; padding:2px 6px; border-radius:5px; background:var(--a-glass-2); color:var(--a-muted); } .ig-badge.t-car{ color:var(--serie-5); } .ig-badge.t-img{ color:var(--serie-1); } .ig-badge.t-reel{ color:var(--serie-6); } .ig-date{ font-size:11px; color:var(--a-ink-soft); } .ig-id{ font-family:ui-monospace,Menlo,monospace; font-size:10px; border:none; background:transparent; color:var(--a-faint); cursor:pointer; padding:1px 4px; border-radius:4px; } .ig-id:hover{ background:var(--a-hover); color:var(--a-ink-soft); } .ig-id.ok{ color:var(--a-ok); } .ig-cap{ font-size:12px; color:var(--a-ink); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ig-mts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; } .ig-mt{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--a-ink-soft); } .ig-mt .mi{ color:var(--a-faint); } .ig-mt.verde{ color:var(--a-ok); } .ig-mt.verde .mi{ color:var(--a-ok); } .ig-mt.rose{ color:var(--serie-4); } .ig-mt.rose .mi{ color:var(--serie-4); } .ig-adcamp{ display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--a-muted); margin-bottom:2px; } .ig-adcamp .dot{ width:6px; height:6px; border-radius:50%; } .ig-adtitle{ font-size:12.5px; font-weight:600; color:var(--a-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ig-adchips{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:5px; } .ig-adchips.sub{ margin-top:3px; } .ig-adchip{ font-size:11px; color:var(--a-ink-soft); } .ig-adchip b{ color:var(--a-ink); font-weight:700; } .ig-adchip i{ color:var(--a-faint); font-style:normal; } .ig-adchip.on b, .ig-adchip.on{ color:var(--a-accent); } /* Dropdown de ordenação */ .ig-sort{ position:relative; } .ig-sortbtn{ display:inline-flex; align-items:center; gap:5px; border:1px solid var(--a-line); border-radius:9px; padding:5px 9px; background-color:var(--a-base); background-image:var(--a-glass-2); font-size:12px; color:var(--a-ink-soft); cursor:pointer; font-family:var(--font-body); } .ig-sortbtn svg:first-child, .ig-sortbtn svg:last-child{ color:var(--a-faint); } .ig-sort-pop{ position:absolute; right:0; z-index:20; margin-top:4px; min-width:210px; max-height:320px; overflow:auto; background-color:var(--a-base); background-image:var(--a-glass); border:1px solid var(--a-line); border-radius:12px; box-shadow:var(--a-shadow-pop); padding:5px; } .ig-sort-pop button{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:none; background:transparent; cursor:pointer; font-family:var(--font-body); font-size:12px; color:var(--a-ink-soft); padding:6px 9px; border-radius:8px; } .ig-sort-pop button:hover{ background:var(--a-hover); } .ig-sort-pop button.is-on{ background:var(--a-gold-soft); color:var(--a-accent); font-weight:700; } .ig-sort-pop button .l{ flex:1; } .ig-sort-pop button .d{ font-size:10px; color:var(--a-faint); } /* Modal de preview — ver o post na plataforma (cartão rico + embed opcional). */ .ig-pv-card{ max-width:420px; overflow:hidden; } .ig-pv-body{ margin-top:.8rem; overflow:hidden; } /* O bloco do embed do Instagram: preso à largura do modal, sem nunca vazar. */ .ig-embed-slot{ max-width:100%; overflow:hidden; } .ig-embed-slot:empty{ display:none; } .ig-embed-slot .instagram-media{ min-width:0 !important; max-width:100% !important; width:100% !important; margin:0 0 .5rem !important; box-shadow:none !important; } .ig-embed-slot iframe{ max-width:100% !important; } .ig-pv-media{ position:relative; width:100%; border-radius:12px; overflow:hidden; background:var(--a-glass-2); margin-bottom:.9rem; } .ig-pv-media.sem{ display:none; } /* sem imagem: só legenda + métricas */ .ig-pv-img{ display:block; width:100%; max-height:360px; object-fit:cover; } .ig-pv-badge{ position:absolute; left:10px; top:10px; font-size:10px; font-weight:700; letter-spacing:.03em; padding:3px 8px; border-radius:6px; background:rgba(0,0,0,.55); color:#fff; } .ig-pv-cap{ font-size:13px; color:var(--a-ink-soft); line-height:1.5; margin:0 0 1rem; overflow-wrap:anywhere; max-height:6.5em; overflow:auto; } .ig-pv-mets{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:1rem; } .ig-pv-m{ background:var(--a-hover-soft); border-radius:10px; padding:8px 10px; } .ig-pv-m span{ display:block; font-size:10.5px; color:var(--a-muted); margin-bottom:2px; } .ig-pv-m b{ font-size:14px; color:var(--a-ink); font-variant-numeric:tabular-nums; } .ig-pv-link{ font-size:12px; color:var(--a-accent); } .ig-pv-link:hover{ text-decoration:underline; } /* Palco de mídia do preview: vídeo do Reel (tocável) e galeria do carrossel. */ .ig-pv-stage{ display:flex; align-items:center; justify-content:center; background:#000; } .ig-pv-video{ display:block; width:100%; max-height:70vh; background:#000; } .ig-pv-slideimg{ display:block; width:100%; max-height:70vh; object-fit:contain; background:#000; } .ig-pv-nav{ position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; border:0; background:rgba(0,0,0,.55); color:#fff; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; } .ig-pv-nav:hover{ background:rgba(0,0,0,.82); } .ig-pv-nav.prev{ left:8px; } .ig-pv-nav.next{ right:8px; } .ig-pv-count{ position:absolute; top:10px; right:10px; font-size:11px; font-weight:700; padding:3px 8px; border-radius:10px; background:rgba(0,0,0,.6); color:#fff; } .ig-pv-expirada{ display:flex; align-items:center; justify-content:center; width:100%; min-height:220px; padding:2rem 1.2rem; text-align:center; color:#c8c8c8; font-size:13px; background:#000; } /* Métrica não fornecida pela Meta para o tipo do post (ex.: pv/follows em Reel). */ .ig-mt.na{ opacity:.45; } /* "Em breve" da Mídia paga — cobre o widget enquanto não há dado de anúncio. */ #card-ads{ position:relative; } #card-ads .ig-head{ position:relative; z-index:6; } /* título fica visível sobre o véu */ .ig-soon{ position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; padding:2rem; border-radius:inherit; background:var(--a-glass-2); backdrop-filter:blur(6px); } .ig-soon-box{ text-align:center; max-width:340px; } .ig-soon-box svg{ color:var(--a-accent); margin-bottom:.4rem; } .ig-soon-t{ font-size:17px; font-weight:800; letter-spacing:.02em; color:var(--a-ink); } .ig-soon-d{ font-size:12.5px; color:var(--a-muted); line-height:1.5; margin-top:.35rem; } /* Widget Público — grade de demografia (idade/gênero/cidades/países). */ .ig-demo{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.6rem; margin-top:.6rem; } .ig-demo-block h3{ font-size:12px; font-weight:700; color:var(--a-ink-soft); margin:0 0 .5rem; letter-spacing:.02em; } .ig-demo-chart{ position:relative; height:150px; } .ig-demo-chart.tall{ height:220px; } @media (max-width:720px){ .ig-demo{ grid-template-columns:1fr; } }