/* estilo.css — interface do Caplyx. Sem framework de propósito: são duas telas, e um bundle de CSS custaria uma etapa de build na imagem sem entregar nada que o cliente veja. */ /* Paleta oficial da marca (brand/README): meia-noite, violeta elétrico, lima neon. Os NOMES dos tokens não mudaram — todo componente já escrito continua valendo; só os valores e a possibilidade de tema claro entraram. O tema escuro fica no :root (padrão). Se o JS falhar, a interface permanece como sempre foi, em vez de nascer sem cor nenhuma. */ :root { --marca: #7B5CFF; --marca-suave: #9d85ff; --lima: #C8FF48; /* destaque da marca — gráficos, realces */ --ok: #3ecf8e; /* "publicado" continua verde: é convenção */ --aviso: #f5a623; --erro: #ff6b6b; --raio: 14px; /* Largura do card de vídeo/clipe. FIXA de propósito: com `1fr` a largura seguia a janela e, mais estreita, o rótulo do botão partia em duas linhas. 264px = o rótulo mais largo ("Enfileirando…", 114px medidos) nos DOIS botões lado a lado, mais o vão de 7px e o respiro de 13px de cada lado. */ --card-l: 264px; --fonte-titulo: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* A sidebar tem tokens PRÓPRIOS: ela acompanha o tema, mas com contraste calculado para o painel dela, que é uma peça flutuante sobre o fundo. (Até 2026-09-04 ela era escura nos dois temas — o tema claro pela metade dava a impressão de que a barra não tinha carregado.) */ --barra-bg1: #171634; --barra-bg2: #0B1020; --barra-texto: #cbc9de; /* Carrega TEXTO DE LEITURA desde os títulos de grupo e o e-mail do rodapé; #7f7ba0 dava 4,37 sobre o painel, abaixo do mínimo de 4,5. */ --barra-texto-fraco: #8f8bb2; --barra-realce: #ffffff; /* item ativo, marca, hover forte */ --barra-hover: rgba(255,255,255,.05); --barra-ativo: rgba(123,92,255,.22); --barra-borda: rgba(255,255,255,.07); --fundo: #0B1020; --superficie: #141a2e; --superficie-alta: #1b2137; --borda: #232a41; --borda-forte: #313a56; --texto: #F6F8FC; --texto-suave: #8E97A8; --texto-fraco: #626b80; --sombra: 0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.34); } :root[data-theme="light"] { /* A barra também clareia. O branco puro no painel e o fundo levemente acinzentado da página fazem a barra FLUTUAR — sem isso os dois brancos se encostariam e a peça sumiria. */ --barra-bg1: #ffffff; --barra-bg2: #fbfbfe; --barra-texto: #454b5e; /* #8b91a4 dava 3,14 de contraste no branco — abaixo do mínimo de 4,5 para texto normal, e o título de grupo tem 10,5px. */ --barra-texto-fraco: #676d80; --barra-realce: #0B1020; --barra-hover: rgba(11,16,32,.05); --barra-ativo: rgba(123,92,255,.13); --barra-borda: #e7e8f0; --fundo: #f1f2f7; --superficie: #ffffff; --superficie-alta: #f8f8fc; --borda: #e7e8f0; --borda-forte: #d6d8e4; --texto: #0B1020; --texto-suave: #63697a; --texto-fraco: #989eb0; --sombra: 0 1px 2px rgba(11,16,32,.05), 0 12px 34px rgba(11,16,32,.07); } * { box-sizing: border-box; } /* O atributo `hidden` do navegador vale `display: none` sem classe nenhuma — qualquer regra nossa com `display` o vence por especificidade. `.campo` fazia exatamente isso, e um `el.hidden = true` não escondia nada. O `!` aqui é o certo: `hidden` é declaração de intenção, não sugestão de estilo. */ [hidden] { display: none !important; } body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.55 var(--fonte); -webkit-font-smoothing: antialiased; } a { color: var(--marca-suave); } h1, h2, h3, .valor, .barra-marca { font-family: var(--fonte-titulo); } /* ------------------------------------------------------------------ marca */ .marca { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; letter-spacing: -.02em; } .marca-ponto { width: 22px; height: 22px; border-radius: 7px; flex: none; background: linear-gradient(140deg, var(--marca), #4dd0e1); } /* ---------------------------------------------------------------- entrada */ .entrada { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(900px 500px at 50% -10%, rgba(124,92,255,.16), transparent 70%), var(--fundo); } .entrada-caixa { width: 100%; max-width: 420px; text-align: center; } .entrada h1 { margin: 26px 0 10px; font-size: 30px; line-height: 1.2; letter-spacing: -.03em; } .entrada p { margin: 0 0 28px; color: var(--texto-suave); } .entrada .marca { justify-content: center; } /* ---------------------------------------------------------------- botões */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 10px; border: 1px solid transparent; background: var(--marca); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: filter .15s, background .15s; } .botao:hover:not(:disabled) { filter: brightness(1.12); } .botao:disabled { opacity: .5; cursor: not-allowed; } .botao.largo { width: 100%; padding: 13px 20px; } .botao.discreto { background: var(--superficie-alta); color: var(--texto); border-color: var(--borda-forte); } .botao.mini { padding: 6px 12px; font-size: 13px; border-radius: 8px; } /* Ação secundária ao lado de uma primária. Um contorno aqui faria duas caixas disputando o olho onde só uma é o caminho esperado. */ .botao.texto { background: none; border-color: transparent; color: var(--texto-suave); padding-left: 8px; padding-right: 8px; font-weight: 500; } .botao.texto:hover:not(:disabled) { color: var(--texto); background: var(--superficie-alta); filter: none; } /* --------------------------------------------------------------- topo */ .topo { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 13px 22px; background: rgba(10,10,11,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borda); } .topo .espaco { flex: 1; } .topo-org { display: flex; align-items: center; gap: 7px; color: var(--texto-suave); font-size: 14px; } .topo-org button { background: none; border: 0; color: var(--texto-fraco); cursor: pointer; padding: 2px; font-size: 13px; } .topo-org button:hover { color: var(--texto); } /* ------------------------------------------------------------- estrutura */ .pagina { max-width: 1080px; margin: 0 auto; padding: 26px 22px 80px; } .secao { margin-top: 38px; } .secao:first-child { margin-top: 0; } .secao h2 { margin: 0 0 4px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; } .secao .sub { margin: 0 0 16px; color: var(--texto-fraco); font-size: 13px; } /* ----------------------------------------------------------------- envio */ .solta { border: 1.5px dashed var(--borda-forte); border-radius: var(--raio); padding: 34px 24px; text-align: center; background: var(--superficie); transition: border-color .15s, background .15s; cursor: pointer; } .solta:hover, .solta.ativa { border-color: var(--marca); background: rgba(124,92,255,.06); } .solta h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; } .solta p { margin: 0; color: var(--texto-fraco); font-size: 13px; } .progresso { height: 4px; border-radius: 999px; background: var(--superficie-alta); overflow: hidden; margin-top: 14px; } .progresso i { display: block; height: 100%; width: 0; background: var(--marca); transition: width .2s; } /* ----------------------------------------------------------------- cards */ .lista { display: grid; gap: 12px; } .card { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda); } /* Paisagem, não retrato: a miniatura agora é a ÁREA DETECTADA do vídeo, que nos reposts costuma ser larga (720×408 no caso real). Num card retrato o `cover` mostraria uma fatia vertical estreita do meio — justamente o que o recorte veio resolver. */ .card-mini { width: 132px; height: 88px; border-radius: 8px; flex: none; object-fit: cover; background: var(--superficie-alta); } .card-corpo { flex: 1; min-width: 0; } .card-titulo { margin: 0 0 5px; font-size: 14px; font-weight: 600; line-height: 1.4; word-break: break-word; } .card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--texto-fraco); font-size: 12.5px; } .card-acoes { display: flex; gap: 8px; align-items: center; margin-top: 11px; flex-wrap: wrap; } /* O hook é editável no lugar — é o texto que vai para o vídeo. */ .hook { width: 100%; resize: vertical; min-height: 54px; padding: 9px 11px; border-radius: 8px; background: var(--fundo); border: 1px solid var(--borda); color: var(--texto); font: inherit; font-size: 13.5px; line-height: 1.5; } .hook:focus { outline: none; border-color: var(--marca); } /* ---------------------------------------------------------------- selos */ .selo { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; background: var(--superficie-alta); color: var(--texto-suave); border: 1px solid var(--borda); } .selo.ok { color: var(--ok); border-color: rgba(62,207,142,.3); background: rgba(62,207,142,.1); } .selo.andamento { color: var(--marca-suave); border-color: rgba(124,92,255,.3); background: rgba(124,92,255,.1); } .selo.aviso { color: var(--aviso); border-color: rgba(245,166,35,.3); background: rgba(245,166,35,.1); } .selo.erro { color: var(--erro); border-color: rgba(255,107,107,.3); background: rgba(255,107,107,.1); } /* ----------------------------------------------------------------- cota */ .cota { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--texto-fraco); } .cota-barra { width: 120px; height: 5px; border-radius: 999px; background: var(--superficie-alta); overflow: hidden; } .cota-barra i { display: block; height: 100%; background: var(--ok); } .cota-barra i.cheio { background: var(--aviso); } .cota-barra i.estourado { background: var(--erro); } /* ---------------------------------------------------------------- vazio */ .vazio { padding: 30px; text-align: center; color: var(--texto-fraco); font-size: 13.5px; border: 1px dashed var(--borda); border-radius: var(--raio); } /* ---------------------------------------------------------------- avisos */ /* O aviso FLUTUA no canto: no fluxo da página ele empurrava o conteúdo para baixo a cada mensagem, e quem estava olhando para um card via tudo pular. */ .aviso-caixa { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: min(360px, calc(100vw - 36px)); display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; border: 1px solid rgba(245,166,35,.3); background: rgba(245,166,35,.08); color: #f0c36d; backdrop-filter: blur(8px); box-shadow: 0 16px 40px rgba(0,0,0,.28); animation: aviso-entra .18s ease-out; } /* Sobre o fundo do tema, translúcido puro ficaria ilegível; a camada opaca embaixo garante contraste nos dois temas. */ .aviso-caixa::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--superficie); } .aviso-txt { flex: 1; min-width: 0; } .aviso-x { flex: none; width: 20px; height: 20px; border: none; padding: 0; cursor: pointer; background: none; color: inherit; opacity: .6; border-radius: 6px; display: grid; place-items: center; } .aviso-x:hover { opacity: 1; } @keyframes aviso-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .aviso-caixa.erro { border-color: rgba(255,107,107,.3); background: rgba(255,107,107,.08); color: #ffa8a8; } /* Confirmação de ação destrutiva que deu certo: amarelo aqui leria como "algo deu errado" justamente quando não deu. */ .aviso-caixa.ok { border-color: rgba(62,207,142,.3); background: rgba(62,207,142,.08); color: #86e3bb; } /* CONTRASTE NO TEMA CLARO. As três cores acima foram escolhidas para o fundo escuro; sobre branco elas ficam lavadas — o aviso de erro virava um rosa quase ilegível. Aqui a mesma família de cor vem em tom escuro, e a borda ganha peso para o balão se destacar da página. */ :root[data-theme="light"] .aviso-caixa { border-color: rgba(180,120,10,.45); background: rgba(245,166,35,.14); color: #7a4e00; } :root[data-theme="light"] .aviso-caixa.erro { border-color: rgba(190,40,40,.45); background: rgba(255,107,107,.14); color: #931313; } :root[data-theme="light"] .aviso-caixa.ok { border-color: rgba(20,130,85,.45); background: rgba(62,207,142,.15); color: #0b6b45; } :root[data-theme="light"] .aviso-x { color: inherit; opacity: .75; } /* "medindo…": não é um número nem um erro. Itálico e apagado dizem isso sem ocupar mais espaço que o número que vai substituí-lo. */ .medindo { font-style: italic; color: var(--texto-fraco); } /* Botão que se lê como link — usado dentro de texto corrido, como no vazio da busca, onde um botão cheio pesaria mais que a própria frase. */ .link-botao { border: none; background: none; padding: 0; font: inherit; cursor: pointer; color: var(--marca); text-decoration: underline; text-underline-offset: 2px; } .link-botao:hover { filter: brightness(1.15); } /* ---------------------------------------------------------------- busca */ .busca { display: flex; align-items: center; gap: 7px; flex: none; padding: 7px 10px; border-radius: 10px; min-width: 200px; max-width: 300px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-fraco); transition: border-color .15s ease; } .busca:focus-within { border-color: var(--marca); color: var(--texto-suave); } .busca input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: inherit; font-size: 13px; color: var(--texto); } /* O "x" nativo do `type=search` some: ele muda de forma entre navegadores e ignora o tema. O nosso fica no mesmo lugar nos dois. */ .busca input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .busca-x { flex: none; width: 18px; height: 18px; padding: 0; border: none; cursor: pointer; background: none; color: var(--texto-fraco); border-radius: 5px; display: grid; place-items: center; } .busca-x:hover { color: var(--texto); background: var(--superficie-alta); } @media (max-width: 720px) { .busca { min-width: 0; max-width: 160px; } } /* ========================================================== CALENDÁRIO Uma lista responde "o que existe"; o mês responde "quando", que é a pergunta de quem publica. */ .agenda-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .agenda-resumo { display: flex; align-items: baseline; gap: 9px; padding: 10px 16px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); } .agenda-resumo strong { font-family: var(--fonte-titulo); font-size: 15px; } .agenda-resumo span { font-size: 12.5px; color: var(--texto-suave); } .agenda-contagens { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); } .agenda-conta { display: flex; align-items: center; gap: 6px; font-size: 13px; } .agenda-ic { display: grid; place-items: center; flex: none; } .agenda-ic svg { width: 15px; height: 15px; } .agenda-redes { display: flex; gap: 8px; flex-wrap: wrap; } .agenda-chip { display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 8px 13px; border-radius: 10px; font: inherit; font-size: 13px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); transition: border-color .15s ease, background-color .15s ease; } .agenda-chip:hover { border-color: var(--borda-forte); } /* Marcada = FILTRANDO por ela. Sem marca nenhuma, o mês mostra tudo — é o estado inicial, e o mais útil. */ .agenda-chip.ativa { border-color: var(--marca); background: rgba(123,92,255,.1); color: var(--marca-suave); } .agenda-chip:focus-visible { outline: 2px solid var(--marca-suave); outline-offset: 2px; } /* O Calendário ocupa a altura disponível: um mês que para no meio da tela deixa um vazio grande embaixo, e a grade é justamente o conteúdo da tela. */ /* `:not(.oculto)` é obrigatório: seletor de id vence `.tela.oculto` por especificidade, e sem isto o Calendário fica visível em TODAS as telas. */ #tela-calendario:not(.oculto) { flex: 1; min-height: 0; display: flex; flex-direction: column; } .agenda-quadro { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); padding: 14px; box-shadow: var(--sombra); flex: 1; min-height: 0; display: flex; flex-direction: column; } .agenda-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .agenda-nav strong { font-family: var(--fonte-titulo); font-size: 15px; min-width: 170px; } .agenda-seta { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-suave); cursor: pointer; } .agenda-seta:hover { border-color: var(--borda-forte); color: var(--texto); } .agenda-cabecalho, .agenda-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } /* As semanas REPARTEM o que sobra, com piso: numa janela baixa a página rola em vez de espremer o dia até ele não caber mais nada. */ .agenda-grade { flex: 1; min-height: 0; grid-auto-rows: minmax(96px, 1fr); align-content: stretch; } .agenda-dia-nome { text-align: center; font-size: 11px; letter-spacing: .04em; color: var(--texto-fraco); padding-bottom: 8px; } .agenda-grade .vazio { grid-column: 1 / -1; } .agenda-cel { min-height: 0; border-radius: 10px; padding: 7px; border: 1px solid var(--borda); background: var(--fundo); display: flex; flex-direction: column; gap: 5px; /* Com o dia expandido ("ver menos"), o excesso rola DENTRO da célula em vez de vazar por cima da semana seguinte. */ overflow-y: auto; } /* Dia de outro mês continua VISÍVEL, apagado: sumir quebraria a grade da semana, e é ali que se vê que o mês vira no meio dela. */ .agenda-cel.fora { opacity: .45; background: none; border-style: dashed; } .agenda-cel.hoje { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca) inset; } .agenda-num { display: flex; align-items: baseline; gap: 5px; font-size: 12px; color: var(--texto-suave); font-variant-numeric: tabular-nums; } .agenda-cel.hoje .agenda-num { color: var(--marca-suave); font-weight: 700; } .agenda-num small { font-size: 10px; letter-spacing: .04em; color: var(--texto-fraco); } .agenda-post { display: flex; align-items: center; gap: 6px; width: 100%; cursor: pointer; padding: 5px 7px; border-radius: 7px; font: inherit; font-size: 11.5px; text-align: left; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda); border-left: 3px solid var(--marca); /* a cor da REDE entra aqui pelo JS */ } .agenda-post:hover { border-color: var(--borda-forte); } .agenda-post:focus-visible { outline: 2px solid var(--marca-suave); outline-offset: 1px; } .agenda-post-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A HORA, com relógio. A cor dela é o ESTADO: âmbar enquanto espera, verde quando saiu, vermelho quando falhou. A borda continua sendo a rede — são duas informações diferentes e não podem disputar o mesmo lugar. */ .agenda-hora { display: inline-flex; align-items: center; gap: 3px; flex: none; font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--aviso); } .agenda-post.estado-ok .agenda-hora { color: var(--ok); } .agenda-post.estado-erro .agenda-hora { color: var(--erro); } .agenda-post.estado-neutro .agenda-hora { color: var(--texto-fraco); } /* Publicado: fundo verde de leve — o dia fica legível de relance. */ .agenda-post.estado-ok { border-color: rgba(62,207,142,.35); background: rgba(62,207,142,.07); } .agenda-post.estado-erro { border-color: rgba(255,107,107,.45); background: rgba(255,107,107,.07); } .agenda-post.estado-neutro { opacity: .6; } .agenda-post.estado-neutro .agenda-post-txt { text-decoration: line-through; } .agenda-mais { border: none; background: none; padding: 2px 4px; cursor: pointer; font: inherit; font-size: 11px; color: var(--marca); text-align: left; } .agenda-mais:hover { text-decoration: underline; } @media (max-width: 900px) { /* Sete colunas viram fatias ilegíveis; a lista por dia é mais honesta. */ .agenda-cabecalho { display: none; } /* Empilhado não há altura para repartir: a lista volta a ser do tamanho do que tem dentro. */ #tela-calendario:not(.oculto), .agenda-quadro, .agenda-grade { flex: none; display: block; } .agenda-grade { grid-template-columns: 1fr; display: grid; grid-auto-rows: auto; } .agenda-cel { min-height: 0; overflow: visible; } .agenda-cel.fora { display: none; } .agenda-cel:not(:has(.agenda-post)) { display: none; } } /* ------------------------------------------------ editar um agendamento Mesmo desenho do card flutuante da gaveta: logo da rede, @conta, a linha "rede · quando" e o VÍDEO ao lado. Um formulário sozinho não diz de qual publicação se trata. */ /* Precisa da dupla classe: a regra base de `.perguntar` vem depois no arquivo e venceria por ordem, deixando o diálogo com a largura do confirmar. */ .perguntar.editar-post { width: min(820px, calc(100vw - 32px)); } .editar-cab { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; } .editar-quem { flex: 1; min-width: 0; } .editar-quem strong { display: block; font-family: var(--fonte-titulo); font-size: 15px; } .editar-quem small { font-size: 11.5px; color: var(--texto-fraco); } .editar-rede { display: inline-flex; flex: none; } .editar-rede svg { width: 26px; height: 26px; } .editar-cab .drawer-x { margin-left: auto; flex: none; } /* Duas colunas: o vídeo à esquerda, o que se edita à direita. */ .editar-duas { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 18px; padding: 0 16px; } .editar-previa { position: relative; aspect-ratio: 9/16; border-radius: 10px; overflow: hidden; background: #0b0b0f; display: grid; place-items: center; align-self: start; } .editar-previa img, .editar-previa video { width: 100%; height: 100%; object-fit: contain; display: block; background: #0b0b0f; } /* O play fica sobre a miniatura e some quando o vídeo entra no lugar dela. */ .editar-previa .previa-play { position: absolute; } .editar-previa.sem-capa { background: radial-gradient(circle at 50% 42%, rgba(123,92,255,.2), transparent 62%), var(--superficie-alta); } @media (max-width: 760px) { /* Empilhado, o vídeo inteiro empurraria os campos para fora da tela. */ .editar-duas { grid-template-columns: 1fr; } .editar-previa { max-width: 170px; justify-self: center; } } /* Campo em LEITURA: parece texto, não formulário. Sem isto a caixa continua convidando ao clique e o "Editar publicação" fica sem sentido. */ .editar-post .travado { background: var(--fundo); border-color: var(--borda); color: var(--texto-suave); cursor: default; } .editar-post .travado:focus { outline: none; border-color: var(--borda); } /* O calendário em leitura: visível, mas sem convite ao clique. */ .editar-campo .cal-card { margin: 0; } .editar-campo .cal-grade button:disabled { cursor: default; } .editar-aviso { margin: 0 16px 12px; padding: 9px 11px; border-radius: 9px; font-size: 12.5px; border: 1px solid var(--borda); background: var(--fundo); color: var(--texto-suave); } .editar-aviso.erro { border-color: rgba(255,107,107,.3); background: rgba(255,107,107,.08); color: #ffa8a8; } .editar-corpo { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .editar-campo { display: flex; flex-direction: column; gap: 6px; } .editar-campo .titulo-yt { margin: 0; } .editar-campo .campo-texto, .editar-campo textarea { width: 100%; margin: 0; } /* `min-width: 0` deixava o campo nativo de data encolher até virar uma caixinha vazia. Piso + quebra de linha: em coluna estreita eles empilham. */ .editar-quando { display: flex; gap: 8px; flex-wrap: wrap; } .editar-quando .campo-texto { flex: 1 1 130px; min-width: 130px; } .editar-acoes { flex-wrap: wrap; padding: 16px; } .editar-acoes .espaco { flex: 1; } .editar-post [disabled] { opacity: .65; cursor: default; } /* ====================================================== perguntar / confirmar A caixa do navegador (`confirm`/`prompt`) tira a pessoa do produto: fonte do sistema, cor do sistema e o domínio escrito no topo. Estas duas fazem o mesmo trabalho dentro do painel. São `` de verdade — Esc, foco preso e camada de topo saem de graça e corretos, o que uma div nunca acerta por inteiro. */ .perguntar { border: 1px solid var(--borda); border-radius: var(--raio); padding: 0; background: var(--superficie); color: var(--texto); width: min(420px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(0,0,0,.32); } .perguntar::backdrop { background: rgba(6,8,18,.55); backdrop-filter: blur(2px); } .perguntar h3 { margin: 0; padding: 18px 20px 0; font-family: var(--fonte-titulo); font-size: 16px; letter-spacing: -.01em; } .perguntar-txt { margin: 8px 0 0; padding: 0 20px; font-size: 13.5px; line-height: 1.5; color: var(--texto-suave); } .perguntar-acoes { display: flex; justify-content: flex-end; gap: 8px; padding: 18px 20px 18px; } .perguntar-acoes .botao { white-space: nowrap; } /* Ação destrutiva em vermelho: a cor é parte do aviso. */ .perguntar.perigo #confirmar-sim { background: var(--erro); border-color: var(--erro); color: #fff; } .perguntar.perigo #confirmar-sim:hover { filter: brightness(1.08); } .perguntar .campo-texto { width: calc(100% - 40px); margin: 12px 20px 0; font: inherit; font-size: 13.5px; padding: 9px 11px; border-radius: 9px; background: var(--fundo); border: 1px solid var(--borda-forte); color: var(--texto); } .perguntar .campo-texto:focus { outline: none; border-color: var(--marca); } /* Entrada suave: aparecer de um quadro para o outro assusta mais que informa. */ .perguntar[open] { animation: perguntar-entra .16s ease-out; } @keyframes perguntar-entra { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } } .girando { width: 13px; height: 13px; flex: none; border: 2px solid var(--borda-forte); border-top-color: var(--marca); border-radius: 50%; animation: gira .7s linear infinite; } @keyframes gira { to { transform: rotate(360deg); } } /* Abaixo disto não cabe um card inteiro ao lado da barra recolhida: aí ele ocupa a largura disponível em vez de vazar para fora da tela. */ @media (max-width: 480px) { .grade-videos, .grade-clipes { grid-template-columns: 1fr; } } @media (max-width: 600px) { .pagina { padding: 20px 15px 60px; } .card { flex-direction: column; } .card-mini { width: 100%; height: 160px; } } /* ----------------------------------------------------------------- marca */ /* Dois lados, sempre lado a lado até a coluna apertar: eles existem para ser COMPARADOS (o mesmo logo em preto e em branco), e empilhados perdem isso. */ .marca-lados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 520px; } @media (max-width: 560px) { .marca-lados { grid-template-columns: minmax(0, 1fr); } } .marca-lado { padding: 12px; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie-alta); } .marca-lado-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .marca-rotulo { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--texto); } .marca-lado-acoes { display: flex; align-items: center; gap: 4px; margin-top: 10px; } .marca-lado-acoes .enviar { flex: 1; justify-content: center; } .marca-fundo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .marca-fundo-rot { font-size: 12.5px; font-weight: 600; color: var(--texto-suave); } /* Controle segmentado: duas opções que se excluem, lidas como UMA peça. Dois botões soltos pareceriam duas ações independentes. */ .segmento { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--superficie-alta); border: 1px solid var(--borda); } .segmento .botao { background: none; border-color: transparent; color: var(--texto-suave); padding: 6px 16px; font-size: 13px; border-radius: 7px; font-weight: 600; } .segmento .botao:hover:not(.ativo) { color: var(--texto); filter: none; } /* Cada prévia usa o FUNDO REAL do vídeo, com xadrez por baixo para mostrar o que é transparente. Sem isso um logo claro sobre card escuro pareceria upload falhado — e, pior, o cliente não veria que ele some no fundo branco. */ .marca-logo { width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--borda); background-size: 14px 14px; background-position: 0 0, 7px 7px; font-size: 12px; overflow: hidden; } .marca-logo.escuro { background-color: #000; background-image: linear-gradient(45deg, #141418 25%, transparent 25%, transparent 75%, #141418 75%), linear-gradient(45deg, #141418 25%, transparent 25%, transparent 75%, #141418 75%); color: var(--texto-fraco); } .marca-logo.claro { background-color: #fff; background-image: linear-gradient(45deg, #e6e6ea 25%, transparent 25%, transparent 75%, #e6e6ea 75%), linear-gradient(45deg, #e6e6ea 25%, transparent 25%, transparent 75%, #e6e6ea 75%); color: #8a8a96; } .marca-logo img { max-width: 82%; max-height: 72%; object-fit: contain; } /* O lado correspondente ao fundo escolhido ganha destaque — é o que vai sair. */ .marca-lado.ativo { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); } .segmento .botao.fundo.ativo { background: var(--marca); color: #fff; border-color: transparent; } /* ------------------------------------------------- como o vídeo vai sair MONTAGEM, não render: mostra o arranjo (faixa da marca em cima, texto, e o vídeo embaixo) com o fundo e o logo escolhidos AGORA. Render de verdade a cada clique custaria minutos de máquina para responder a uma pergunta de dois segundos. */ /* A prévia é 9:16 DE VERDADE — é o formato do que vai sair. Isso a deixa alta, então ela é estreita: uma coluna larga aqui abriria um vão de 300px ao lado dos cartões de logo, que são baixos. */ .marca-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 196px; gap: 26px; align-items: start; } .marca-esq { min-width: 0; } .marca-dir { display: grid; gap: 8px; } .marca-dir-rot { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--texto-suave); } .marca-dir .card-meta { margin: 0; } .marca-previa { width: 100%; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; border: 1px solid var(--borda); display: grid; grid-template-rows: auto 1fr auto; background: #000; color: #fff; } .marca-previa.claro { background: #fff; color: #0B1020; } .marca-previa-topo { padding: 14px 14px 12px; display: grid; gap: 9px; } .marca-previa-autor { display: flex; align-items: center; gap: 7px; min-width: 0; } .marca-previa-avatar { width: 20px; height: 20px; border-radius: 50%; flex: none; overflow: hidden; display: grid; place-items: center; font-size: 10px; font-weight: 700; background: rgba(255,255,255,.18); color: inherit; } .marca-previa.claro .marca-previa-avatar { background: rgba(11,16,32,.12); } .marca-previa-avatar img { width: 100%; height: 100%; object-fit: contain; } .marca-previa-nome { font-size: 11.5px; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .marca-previa-hook { margin: 0; font-size: 12px; line-height: 1.45; } /* Faixa listrada no lugar do vídeo: quadro de um render de verdade mudaria a cada visita e faria a prévia parecer um vídeo específico, não o arranjo. */ .marca-previa-video { background: repeating-linear-gradient(135deg, #4b5233 0 9px, #59613c 9px 18px); } .marca-previa-baixo { padding: 8px 12px; display: flex; justify-content: flex-end; font-size: 10.5px; opacity: .75; } /* ------------------------------------------------------- ajuste de área */ .dialogo { border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--superficie); color: var(--texto); padding: 20px; max-width: 92vw; box-shadow: var(--sombra); } .dialogo::backdrop { background: rgba(0,0,0,.72); } .dialogo-titulo { margin: 0 0 4px; font-size: 15px; font-weight: 650; } .dialogo-sub { margin: 0 0 14px; color: var(--texto-fraco); font-size: 13px; } .area-palco { position: relative; line-height: 0; background: #000; border-radius: 8px; overflow: hidden; /* Sem seleção de texto: arrastar sobre a imagem selecionaria a página e o cursor viraria "texto" no meio do gesto. */ user-select: none; -webkit-user-select: none; touch-action: none; } .area-palco img { display: block; max-height: 62vh; width: auto; } .area-caixa { position: absolute; cursor: move; border: 2px solid var(--marca); /* A sombra enorme escurece TUDO fora da caixa — é o que faz a área escolhida saltar aos olhos sem precisar de máscara ou segundo elemento. */ box-shadow: 0 0 0 9999px rgba(0,0,0,.55); } .area-caixa i { position: absolute; width: 14px; height: 14px; background: var(--marca); border-radius: 3px; } .area-caixa i[data-canto="nw"] { left: -8px; top: -8px; cursor: nwse-resize; } .area-caixa i[data-canto="ne"] { right: -8px; top: -8px; cursor: nesw-resize; } .area-caixa i[data-canto="sw"] { left: -8px; bottom: -8px; cursor: nesw-resize; } .area-caixa i[data-canto="se"] { right: -8px; bottom: -8px; cursor: nwse-resize; } /* ---------------------------------------------------------------- contas */ .conta-foto { width: 48px; height: 48px; border-radius: 50%; flex: none; object-fit: cover; background: var(--superficie-alta); border: 1px solid var(--borda); } /* Recuo quando não há foto: inicial no lugar de um círculo vazio, que o cliente lê como imagem quebrada. */ .conta-foto.vazia { display: grid; place-items: center; font-weight: 700; font-size: 18px; color: var(--texto-suave); background: linear-gradient(140deg, var(--superficie-alta), #2a2a33); } /* ------------------------------------------------------------ formulário */ .campo { display: block; margin-bottom: 14px; } .campo > span { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--texto-suave); } .campo > small { display: block; margin-top: 5px; font-size: 11.5px; color: var(--texto-fraco); } .campo select, .campo input, .campo textarea { width: 100%; padding: 9px 11px; border-radius: 8px; background: var(--fundo); border: 1px solid var(--borda); color: var(--texto); font: inherit; font-size: 13.5px; } .campo textarea { resize: vertical; line-height: 1.5; } .campo select:focus, .campo input:focus, .campo textarea:focus { outline: none; border-color: var(--marca); } .dialogo { min-width: min(440px, 92vw); } /* ------------------------------------------------------------ calendário */ .quando-campo { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border-radius: 8px; background: var(--fundo); border: 1px solid var(--borda); color: var(--texto); font: inherit; font-size: 13.5px; cursor: pointer; } .quando-campo:hover { border-color: var(--borda-forte); } .quando-campo[aria-expanded="true"] { border-color: var(--marca); } .quando-campo svg { color: var(--texto-fraco); flex: none; } .calendario { margin-top: 8px; padding: 12px; border-radius: 10px; border: 1px solid var(--borda-forte); background: var(--superficie-alta); } /* Os atalhos vêm primeiro porque cobrem quase todo caso real — navegar o mês é a exceção, não a regra. */ .cal-atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .cal-atalho { padding: 5px 10px; border-radius: 999px; cursor: pointer; background: var(--fundo); border: 1px solid var(--borda); color: var(--texto-suave); font: inherit; font-size: 12px; } .cal-atalho:hover { border-color: var(--marca); color: var(--texto); } .cal-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; font-weight: 600; } .cal-seta { width: 26px; height: 26px; border-radius: 7px; cursor: pointer; background: var(--fundo); border: 1px solid var(--borda); color: var(--texto); font-size: 15px; line-height: 1; } .cal-seta:hover:not(:disabled) { border-color: var(--marca); } .cal-seta:disabled { opacity: .35; cursor: not-allowed; } .cal-semana, .cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .cal-semana span { text-align: center; font-size: 11px; color: var(--texto-fraco); padding-bottom: 4px; } .cal-dia { aspect-ratio: 1; border-radius: 7px; cursor: pointer; background: none; border: 1px solid transparent; color: var(--texto); font: inherit; font-size: 12.5px; } .cal-dia:hover:not(:disabled) { background: var(--fundo); border-color: var(--borda-forte); } .cal-dia:disabled { color: var(--texto-fraco); opacity: .35; cursor: not-allowed; } .cal-dia.hoje { border-color: var(--borda-forte); } .cal-dia.escolhido { background: var(--marca); color: #fff; border-color: transparent; font-weight: 600; } .cal-dia.fora { visibility: hidden; } .cal-hora { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borda); font-size: 13px; color: var(--texto-suave); } .cal-hora select { padding: 6px 9px; border-radius: 7px; background: var(--fundo); border: 1px solid var(--borda); color: var(--texto); font: inherit; font-size: 13px; } .cal-hora .botao { margin-left: auto; } .campo-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 10px; } .campo-topo > span { font-size: 12.5px; font-weight: 600; color: var(--texto-suave); } /* ------------------------------------------------------------------ chave Interruptor liga/desliga. Nasceu para "Reescrever o texto com IA": é uma escolha de duas vias, e um checkbox de sistema destoaria do resto. */ .chave { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; cursor: pointer; user-select: none; font-size: 14px; } .chave input { position: absolute; opacity: 0; width: 0; height: 0; } .chave i { width: 38px; height: 22px; flex: none; border-radius: 999px; background: var(--borda-forte); position: relative; transition: background .15s ease; } .chave i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--texto); transition: transform .15s ease; } .chave input:checked + i { background: var(--marca); } .chave input:checked + i::after { transform: translateX(16px); } /* Foco visível pelo teclado: sem isso o interruptor some para quem navega por Tab. */ .chave input:focus-visible + i { outline: 2px solid var(--marca-suave); outline-offset: 2px; } .chave input:disabled + i { opacity: .45; } .chave input:disabled ~ span { color: var(--texto-fraco); } .chave:has(input:disabled) { cursor: not-allowed; } .nota-chave { margin: 6px 0 0; font-size: 13px; } /* ------------------------------------------------------------ recolhível Clipe que já virou vídeo sai da lista principal, mas não some: gerar de novo com outra marca ou área ajustada é uso legítimo. */ .recolhivel { margin-top: 14px; } .recolhivel > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px; color: var(--texto-suave); font-size: 14px; padding: 7px 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); } .recolhivel > summary::-webkit-details-marker { display: none; } .recolhivel > summary::before { content: '▸'; font-size: 11px; transition: transform .15s ease; } .recolhivel[open] > summary::before { transform: rotate(90deg); } .recolhivel > summary:hover { border-color: var(--borda-forte); color: var(--texto); } .recolhivel > summary:focus-visible { outline: 2px solid var(--marca-suave); outline-offset: 2px; } .recolhivel[open] > .lista { margin-top: 12px; } /* ---------------------------------------------- escolha de contas no agendar Várias redes de uma vez, cada uma podendo ter horário e legenda próprios. */ .contas-escolha { display: flex; flex-direction: column; gap: 6px; } .conta-opcao { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--borda); border-radius: 9px; background: var(--superficie); cursor: pointer; font-size: 14px; } .conta-opcao:hover { border-color: var(--borda-forte); } .conta-opcao.ativa { border-color: var(--marca); background: rgba(124,92,255,.07); } .conta-opcao input { accent-color: var(--marca); width: 15px; height: 15px; flex: none; } .conta-opcao small { color: var(--texto-suave); } .conta-foto.mini { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; } .legenda-conta .campo-topo { margin-bottom: 5px; font-size: 13px; color: var(--texto-suave); } .legenda-conta textarea { width: 100%; } /* As legendas DIVIDEM a altura da coluna em vez de empilhar: marcar as quatro redes não pode criar rolagem. Cada campo pega uma fatia igual do que sobra (uma rede = campo alto; quatro = um quarto cada), com piso para continuar legível e teto para um campo sozinho não virar uma folha em branco. */ #bloco-legendas { flex: 1; min-height: 0; display: flex; flex-direction: column; } #legendas-por-conta { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; } .legenda-conta { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; max-height: 210px; } .legenda-conta textarea { flex: 1; min-height: 76px; resize: none; } /* Título do YouTube: campo próprio acima da descrição, com o contador do teto de 100 caracteres — passar disso é recusa da API, não corte. */ .titulo-yt { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .titulo-yt input { flex: 1; min-width: 0; font: inherit; font-size: 12.5px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); } .titulo-yt input:focus { outline: 2px solid var(--marca-suave); outline-offset: 1px; } .titulo-conta { font-size: 10.5px; color: var(--texto-fraco); font-variant-numeric: tabular-nums; } .titulo-conta.perto { color: var(--aviso, #b8860b); } .horario-conta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 9px; font-size: 13.5px; color: var(--texto-suave); } /* Largura suficiente para o apelido mais longo: sem isto, cada linha começa o botão num x diferente e a coluna de horários fica torta. */ .horario-conta > span:first-child { min-width: 190px; } .quando-campo.mini { padding: 6px 11px; font-size: 13px; width: auto; } /* ------------------------------------------------------- selos por rede Um agendamento, várias redes. A cor é o estado DAQUELA rede: é assim que se vê num relance que o TikTok saiu e o YouTube falhou. */ .selos-rede { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; } .selo-rede { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; line-height: 1; border: 1px solid var(--borda-forte); background: var(--superficie-alta); color: var(--texto-suave); } .selo-rede strong { font-weight: 600; color: var(--texto); } .selo-rede small { font-size: 11.5px; opacity: .85; } .selo-rede:hover { border-color: var(--texto-fraco); } .selo-rede.aberto { box-shadow: 0 0 0 2px rgba(124,92,255,.35); } .selo-rede:focus-visible { outline: 2px solid var(--marca-suave); outline-offset: 2px; } /* Uma cor por estado — as mesmas do resto da interface, para não criar um segundo vocabulário de cores que o cliente teria de aprender. */ .selo-rede.andamento { border-color: rgba(124,92,255,.45); background: rgba(124,92,255,.12); } .selo-rede.andamento strong { color: var(--marca-suave); } .selo-rede.ok { border-color: rgba(62,207,142,.4); background: rgba(62,207,142,.12); } .selo-rede.ok strong { color: var(--ok); } .selo-rede.erro { border-color: rgba(255,107,107,.4); background: rgba(255,107,107,.12); } .selo-rede.erro strong { color: var(--erro); } .selo-rede.neutro { opacity: .75; } .post-detalhe { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--borda); } /* Aviso dentro de um campo do modal — o do YouTube/Content ID. Discreto de propósito: informa, não alarma, e não impede o agendamento. */ .aviso-inline { margin: 8px 0 0; padding: 8px 11px; border-radius: 8px; font-size: 12.5px; line-height: 1.45; color: #f0c36d; border: 1px solid rgba(245,166,35,.28); background: rgba(245,166,35,.07); } /* ============================================================ casca do painel Sidebar flutuante que recolhe para uma trilha de ícones, e o conteúdo em telas trocadas no cliente (sem recarregar a página). */ .app { display: flex; min-height: 100vh; } .barra { position: sticky; top: 0; align-self: flex-start; height: 100vh; padding: 14px; flex: none; width: 286px; transition: width .18s ease; } .app.recolhido .barra { width: 104px; } .barra-painel { height: 100%; background: linear-gradient(180deg, var(--barra-bg1), var(--barra-bg2)); border: 1px solid var(--barra-borda); border-radius: 22px; display: flex; flex-direction: column; padding: 16px 12px; box-shadow: var(--sombra); } .barra-marca { display: flex; align-items: center; gap: 10px; padding: 8px 6px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--barra-borda); color: var(--barra-realce); font-weight: 700; font-size: 21px; letter-spacing: -.02em; } .barra-marca img { height: 30px; width: auto; flex: none; } /* O logo "escuro" tem tinta branca; o "claro", tinta escura. Trocar no CSS faz ele nascer certo, antes de qualquer script rodar. */ .logo-claro { display: none; } :root[data-theme="light"] .logo-escuro { display: none; } :root[data-theme="light"] .logo-claro { display: block; } .marca-espaco { flex: 1; } .app.recolhido .barra-marca { justify-content: center; } .app.recolhido .barra-marca .rotulo, .app.recolhido .marca-espaco, .app.recolhido .barra-marca .colapsar { display: none; } .app.recolhido .barra-marca img { height: 34px; } .colapsar { background: none; border: none; color: var(--barra-texto-fraco); padding: 4px; border-radius: 7px; display: inline-flex; cursor: pointer; } .colapsar:hover { color: var(--barra-realce); background: var(--barra-hover); } .barra-nav { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; flex: 1; } .item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--barra-texto); background: none; border: none; width: 100%; text-align: left; font: inherit; font-size: 14.5px; cursor: pointer; text-decoration: none; } .item svg { flex: none; width: 20px; height: 20px; opacity: .85; } .item:hover { background: var(--barra-hover); } .item.ativo { background: var(--barra-ativo); color: var(--barra-realce); } .item.ativo svg { opacity: 1; color: var(--marca-suave); } .item:focus-visible { outline: 2px solid var(--marca-suave); outline-offset: -2px; } .app.recolhido .item { justify-content: center; padding: 12px 0; } .app.recolhido .item .rotulo { display: none; } /* Contador na ponta do item — hoje só a fila de cadastros. Fica na direita porque é informação SOBRE o destino, não o nome dele: lido depois do rótulo. Recolhida, o rótulo some mas o número FICA. É justamente quando a barra é só ícone que o operador não teria nenhum outro sinal de que há gente esperando; por isso ele encolhe e sobe para o canto do ícone, em vez de sumir junto. */ .item-selo { margin-left: auto; flex: none; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 11px; font-weight: 650; line-height: 1; background: var(--aviso); color: #241a02; } .app.recolhido .item-selo { position: absolute; margin-left: 0; transform: translate(11px, -10px); min-width: 16px; height: 16px; font-size: 10px; } .app.recolhido .item { position: relative; } /* Título do grupo. Recolhida ele vira um RISCO: o texto não caberia, mas a separação entre os grupos é o que a barra ganhou — perdê-la ao recolher desfaria a mudança. */ .barra-grupo { display: block; padding: 14px 12px 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--barra-texto-fraco); } .barra-grupo:first-child { padding-top: 4px; } .app.recolhido .barra-grupo { padding: 0; margin: 9px 14px 6px; height: 1px; overflow: hidden; background: var(--barra-borda); color: transparent; } .app.recolhido .barra-grupo:first-child { margin-top: 2px; } .barra-sep { height: 1px; background: var(--barra-borda); margin: 8px 6px; } .barra-rodape { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; } .tema-botao { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; width: 100%; background: none; border: none; color: var(--barra-texto); font: inherit; font-size: 13.5px; cursor: pointer; } .tema-botao:hover { background: var(--barra-hover); } .tema-botao svg { flex: none; } .app.recolhido .tema-botao { justify-content: center; } .app.recolhido .tema-botao .rotulo { display: none; } /* Tema e recolher vivem no TOPO quando expandida e DESCEM para o rodapé quando recolhida — a trilha estreita não comporta a linha da marca inteira. */ .so-recolhida { display: none; } .app.recolhido .so-recolhida { display: flex; } .app.recolhido .barra-marca #tema-topo { display: none; } /* ------------------------------------------------------ menu do usuário */ .usuario-caixa { position: relative; } .usuario { display: flex; align-items: center; gap: 10px; padding: 8px 9px; width: 100%; background: none; border: 1px solid transparent; border-radius: 12px; color: inherit; font: inherit; text-align: left; cursor: pointer; } .usuario:hover { background: var(--barra-hover); } .usuario.aberto { background: var(--barra-hover); border-color: var(--barra-borda); } .usuario:focus-visible { outline: 2px solid var(--marca-suave); outline-offset: -2px; } .usuario-seta { width: 15px; height: 15px; flex: none; color: var(--barra-texto-fraco); margin-left: auto; } .app.recolhido .usuario { justify-content: center; padding: 8px 0; } .app.recolhido .usuario .quem, .app.recolhido .usuario-seta { display: none; } /* Sobe a partir do chip. `bottom: 100%` e não `top`: a barra fica colada no pé da tela, e um menu para baixo sairia da janela. */ .usuario-menu { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; z-index: 40; padding: 6px; border-radius: 14px; background: var(--barra-bg1); border: 1px solid var(--barra-borda); box-shadow: 0 18px 44px rgba(0,0,0,.34); } /* Recolhida, o menu não cabe na trilha: abre ao LADO dela. E ele NÃO segue as regras do modo recolhido — é um popover, não parte da trilha. Sem estas três linhas os itens viravam ícones sem texto e os títulos de grupo viravam riscos, deixando o menu ilegível justamente onde ele é a única forma de chegar a essas ações. */ .app.recolhido .usuario-menu { left: 0; right: auto; width: 208px; } .app.recolhido .usuario-menu .item { justify-content: flex-start; padding: 9px 10px; } .app.recolhido .usuario-menu .rotulo { display: inline; } .app.recolhido .usuario-menu .barra-grupo { padding: 8px 10px 4px; margin: 0; height: auto; overflow: visible; background: none; color: var(--barra-texto-fraco); } .usuario-menu .barra-grupo { padding: 8px 10px 4px; } .usuario-menu .barra-grupo:first-child { padding-top: 4px; } .usuario-menu .barra-sep { margin: 5px 8px; } .item-menu { font-size: 13.5px; padding: 9px 10px; } .item-menu svg { width: 17px; height: 17px; } /* Sair é destrutivo o bastante para ter cor própria — é o único caminho de saída, e confundi-lo com os outros itens custaria uma sessão. */ .item-menu.perigo { color: var(--erro); } .item-menu.perigo:hover { background: rgba(255,107,107,.12); } .item-menu.perigo svg { color: var(--erro); } .usuario .avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; overflow: hidden; position: relative; background: linear-gradient(135deg, var(--marca), #b28bff); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; text-transform: uppercase; } /* A foto cobre a inicial quando existe — a inicial fica de recuo por baixo. */ #usuario-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #usuario-inicial { line-height: 1; } /* ------------------------------------------------------------- perfil */ .perfil-foto { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .perfil-avatar { width: 74px; height: 74px; border-radius: 50%; flex: none; overflow: hidden; position: relative; background: linear-gradient(135deg, var(--marca), #b28bff); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 26px; } .perfil-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Preparar e subir uma foto de celular leva alguns segundos. Sem sinal nenhum o clique parece não ter feito nada — foi exatamente o que aconteceu. */ .perfil-avatar.ocupado { opacity: .55; } .perfil-avatar.ocupado::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: girar .8s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } .perfil-foto-acoes { display: grid; gap: 7px; } .perfil-foto-botoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .perfil-foto-acoes .sub { margin: 0; font-size: 12px; } .perfil-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } /* `min-height` iguala as três colunas: sem isso o campo com a dica de duas linhas empurra só a sua coluna, e as caixas de texto param em alturas diferentes. */ .perfil-campos .campo { margin-bottom: 0; } .perfil-campos .campo > small { min-height: 2.6em; } .campo-texto:disabled { opacity: .7; cursor: default; } /* O e-mail não se edita aqui — é a identidade no login. O cadeado diz isso sem precisar da frase, que fica embaixo só para quem quiser o porquê. */ .campo-travado { display: block; position: relative; } .campo-travado svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--texto-fraco); pointer-events: none; } .campo-travado .campo-texto { padding-right: 32px; } .usuario .quem { overflow: hidden; flex: 1; min-width: 0; } .usuario .quem strong { display: block; color: var(--barra-realce); font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* O e-mail embaixo: quem está logado, sob o espaço em que está. */ .usuario .quem small { display: block; color: var(--barra-texto-fraco); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------------------- conteúdo */ /* Coluna em flex para que uma tela possa PEDIR a altura toda (o Calendário faz isso). As demais continuam do tamanho do conteúdo, alinhadas ao topo. */ .conteudo { flex: 1; min-width: 0; padding: 18px 26px 40px; display: flex; flex-direction: column; } .cabecalho { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .cabecalho h1 { margin: 0; font-size: 24px; letter-spacing: -.02em; } .cabecalho .data { margin: 2px 0 0; color: var(--texto-suave); font-size: 13.5px; } .cabecalho .espaco { flex: 1; } .tela.oculto { display: none; } /* ------------------------------------------------------------- dashboard */ .metricas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; } .metrica { border-radius: var(--raio); padding: 16px 18px; border: 1px solid var(--borda); background: var(--superficie); box-shadow: var(--sombra); } .metrica .rotulo { color: var(--texto-suave); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; } .metrica .valor { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-top: 8px; } .metrica .nota { color: var(--texto-fraco); font-size: 12px; margin-top: 2px; } .metrica.destaque { background: linear-gradient(135deg, rgba(123,92,255,.16), rgba(200,255,72,.06)); border-color: rgba(123,92,255,.3); } .painel { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px 22px; box-shadow: var(--sombra); } .painel-topo { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; } .painel-topo h2 { margin: 0; font-size: 17px; letter-spacing: -.01em; } .painel-topo .sub { margin: 3px 0 0; color: var(--texto-suave); font-size: 13px; } /* Meio a meio, com `minmax(0, …)`: item de grid tem `min-width: auto`, então uma linha longa sem quebra (a legenda de uma publicação) empurrava a coluna além da fração dela — o painel de "Próximas" ficava três vezes o de "Evolução", que é o oposto do que a proporção dizia. */ .dash-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .secao-titulo { font-family: var(--fonte-titulo); font-size: 15px; font-weight: 600; margin: 22px 2px 12px; } /* Gráfico de barras: sem biblioteca — são sete barras, e um bundle de chart custaria mais que o desenho inteiro. */ .grafico { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 10px; } .barra-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; } .barra-col .haste { width: 60%; max-width: 34px; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, var(--marca), #5a3fd6); min-height: 3px; } .barra-col.pico .haste { background: linear-gradient(180deg, var(--lima), #9bcc1f); } .barra-col small { color: var(--texto-fraco); font-size: 11.5px; } .proximo { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--borda); } .proximo:first-child { border-top: none; } .proximo img.thumb { width: 42px; height: 42px; border-radius: 9px; flex: none; object-fit: cover; border: 1px solid var(--borda); background: var(--superficie-alta); } .proximo .quem { flex: 1; min-width: 0; } .proximo .quem strong { font-size: 14px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .proximo .quem small { display: block; color: var(--texto-suave); font-size: 12.5px; } .publicacoes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: start; } .pub { border-radius: 13px; overflow: hidden; border: 1px solid var(--borda); background: #0c0c12; position: relative; display: block; aspect-ratio: 9/16; } .pub img { width: 100%; height: 100%; object-fit: contain; display: block; } .pub .rede-badge { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.65); border-radius: 7px; padding: 3px 7px; font-size: 11px; color: #fff; } /* Rodapé do card de publicação: a data em cima, os números em selos embaixo. Antes eram dois textos colados na mesma linha — saía "04 de set.45 views". */ .pub .rodape { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px; background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,.55) 55%, transparent); color: #fff; font-size: 11.5px; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; } .pub-data { font-size: 11px; opacity: .78; } .pub-numeros { display: flex; flex-wrap: wrap; gap: 5px; } .pub-num { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(255,255,255,.16); /* O vídeo por baixo pode ser claro; a borda garante o selo em qualquer um. */ border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(4px); font-variant-numeric: tabular-nums; } .pub-num-ic { display: grid; place-items: center; } .pub-num-ic svg { width: 12px; height: 12px; display: block; } /* Sem número medido, o rodapé volta ao texto que explica a espera. */ .pub .rodape .medindo { color: rgba(255,255,255,.75); } .contas-metricas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .conta-card { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); padding: 18px; box-shadow: var(--sombra); } .conta-card .cab { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; } .conta-card .cab img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; } .conta-card .cab strong { display: block; font-size: 15px; } .conta-card .cab small { color: var(--texto-suave); font-size: 12.5px; } .conta-card .numeros { display: flex; gap: 22px; flex-wrap: wrap; } .conta-card .num .n { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700; } .conta-card .num .l { color: var(--texto-suave); font-size: 12px; } /* A ressalva vem da própria API ("current snapshot", "lifetime statistics"). Mostrar o número sem ela faria o cliente ler como dado do período. */ @media (max-width: 1150px) { .metricas { grid-template-columns: repeat(3, 1fr); } .publicacoes { grid-template-columns: repeat(3, 1fr); } .dash-duas, .contas-metricas { grid-template-columns: 1fr; } } @media (max-width: 720px) { .barra { width: 104px; } .barra .rotulo, .marca-espaco { display: none; } .conteudo { padding: 14px; } .metricas { grid-template-columns: repeat(2, 1fr); } } /* ------------------------------------------------------------ prévia do vídeo O cliente revê o que foi publicado sem sair do painel. O link da rede segue disponível, mas como escolha — não como único caminho. */ /* Largura DEFINIDA, não `fit-content`: o vídeo usa `width:100%` e o diálogo media-se pelo conteúdo — um dependia do outro. Enquanto o vídeo não tem tamanho intrínseco (ainda carregando, ou falhou), os dois resolviam para ZERO: o modal abria com 0x0, invisível, e só o fundo escuro aparecia bloqueando a tela inteira. `min-width: 0` desarma o mínimo global. */ .dialogo.previa { width: min(420px, 92vw); min-width: 0; max-width: 92vw; } .previa-topo { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; } .previa-topo .espaco { flex: 1; } .previa-video { width: 100%; aspect-ratio: 9/16; max-height: 62vh; border-radius: 12px; background: #000; display: block; } .pub.tocavel { cursor: pointer; } .pub .play { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; font-size: 15px; pointer-events: none; backdrop-filter: blur(2px); } .pub.tocavel:hover .play { background: rgba(0,0,0,.75); } /* O número do dia acima da barra, como no painel de referência. */ .barra-col .valor-topo { color: var(--texto-suave); font-size: 11px; min-height: 14px; } /* ------------------------------------------------- nome do espaço na sidebar Saiu do cabeçalho: aparecia dos dois lados da tela ao mesmo tempo. */ /* `.org-linha` saiu com o lápis: renomear virou item do menu do usuário. */ /* A data do dia, à direita do cabeçalho. */ .cabecalho-data { color: var(--texto-suave); font-size: 13.5px; white-space: nowrap; } /* Telas de seção única: o

repetiria o título que já está no cabeçalho. A seção continua no DOM (a lógica depende dela) — some só o cabeçalho dela. */ /* `h2 + .sub` — só a legenda COLADA no título, não qualquer `.sub` da seção. A regra antiga (`> .sub`) escondia também o aviso de teto de clipes, que nasce com a mesma classe: ele ficava com `hidden=false` e invisível. */ #tela-biblioteca > .secao > h2, #tela-biblioteca > .secao > h2 + .sub, #tela-agendamentos > .secao > h2, #tela-agendamentos > .secao > h2 + .sub, #tela-contas > .secao > h2, #tela-contas > .secao > h2 + .sub, #tela-marca > .secao > h2, #tela-marca > .secao > h2 + .sub, /* Reciclar tem duas seções: só a primeira repete o cabeçalho da página. "Clipes" continua com título, porque ali ele separa duas coisas. */ #tela-reciclar > .secao:first-of-type > h2, #tela-reciclar > .secao:first-of-type > h2 + .sub { display: none; } /* ============================================================ grade de vídeos A Biblioteca mostra VÍDEO. Uma lista de linhas com nome de arquivo obriga a abrir para saber o que é; a miniatura 9:16 responde de relance. */ .grade-videos { display: grid; gap: 14px; align-items: start; justify-content: start; grid-template-columns: repeat(auto-fill, var(--card-l)); } .grade-videos .vazio { grid-column: 1 / -1; } .video-card { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column; } /* 9:16 — a proporção do vídeo. A miniatura agora É o quadro inteiro, então preenche exatamente: sem barras do contêiner e sem recorte. O card fica com a cara do vídeo, que é o que se reconhece de relance. */ .video-capa { position: relative; background: #0c0c12; aspect-ratio: 9/16; display: grid; place-items: center; overflow: hidden; } /* `contain`, não `cover`: a miniatura vem do enquadramento da marca+vídeo e não é 9:16. `cover` cortava as laterais e o texto do hook saía picotado. */ /* `contain`, nunca `cover`: `cover` preenche o quadro AMPLIANDO e cortando as laterais — o texto do hook saía picotado. Com `contain` a miniatura aparece inteira, na proporção real. A miniatura nova já é 9:16 e preenche exato; as antigas (recortadas) aparecem completas, que é melhor que cortadas. */ .video-capa img { width: 100%; height: 100%; object-fit: contain; display: block; } .video-capa.tocavel { cursor: pointer; } .video-capa .play { position: absolute; inset: 0; margin: auto; width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; font-size: 14px; pointer-events: none; } .video-capa.tocavel:hover .play { background: rgba(0,0,0,.78); } .video-capa .canto { position: absolute; top: 8px; left: 8px; } .video-capa .canto-dir { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,.6); color: #fff; padding: 2px 7px; border-radius: 6px; font-size: 11px; } .video-capa .capa-estado { position: absolute; inset: 0; background: rgba(0,0,0,.25); } .video-pe { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 9px; } .expira { font-size: 12px; color: var(--texto-fraco); } /* Perto do fim, o aviso muda de cor: descobrir a retenção pelo sumiço do arquivo seria a pior forma de aprender a regra. */ .expira.perto { color: var(--aviso); } /* As redes onde o vídeo já está marcado. Acesa = agendada; apagada = ainda dá para acrescentar (é só reabrir a gaveta). */ .video-redes { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; } .video-rede { display: grid; place-items: center; color: var(--texto-fraco); opacity: .32; } .video-rede svg { width: 15px; height: 15px; } .video-rede.acesa { opacity: 1; } .video-acoes { display: flex; gap: 7px; flex-wrap: wrap; } .video-acoes .botao { flex: 1; text-align: center; white-space: nowrap; } /* ---------------------------------------------------------- estado vazio Quem chega numa tela vazia é quem ainda não sabe o que fazer nela — é o melhor momento para dizer, e o pior para calar. */ .vazio-rico { text-align: center; padding: 34px 22px; border: 1px dashed var(--borda-forte); border-radius: var(--raio); background: var(--superficie); } .vazio-titulo { margin: 0; font-family: var(--fonte-titulo); font-size: 16px; font-weight: 600; } .vazio-texto { margin: 7px auto 0; max-width: 44ch; color: var(--texto-suave); font-size: 13.5px; } .vazio-rico .botao { margin-top: 15px; } /* --------------------------------------------------------- envio e passos */ .solta-icone { width: 34px; height: 34px; color: var(--marca-suave); margin-bottom: 6px; } /* Os três passos do fluxo. Sem eles, a espera depois de soltar o arquivo parece travamento em vez de trabalho. */ .passos { list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; } .passos li { flex: 1; min-width: 190px; border: 1px solid var(--borda); border-radius: 11px; padding: 10px 13px; background: var(--superficie-alta); color: var(--texto-suave); font-size: 13px; } .passos b { color: var(--marca-suave); margin-right: 5px; font-family: var(--fonte-titulo); } /* Capa sem miniatura: marcador discreto em vez de retângulo branco, que é indistinguível de defeito. */ .video-capa.sem-capa::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(123,92,255,.22), transparent 62%), var(--superficie-alta); } .video-capa.sem-capa::after { content: '▤'; position: relative; color: var(--texto-fraco); font-size: 24px; opacity: .5; } /* ------------------------------------------------------------ selo da rede Com o logo: a marca da rede se reconhece de relance, texto puro obriga a ler — e numa miniatura o relance é tudo que existe. */ .rede-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; line-height: 1; } .rede-icone { display: inline-flex; } .rede-icone svg { width: 14px; height: 14px; display: block; } .rede-tag.tiktok .rede-icone { color: #ff0050; } .rede-tag.instagram .rede-icone { color: #e1306c; } .rede-tag.youtube .rede-icone { color: #ff0000; } .rede-tag.facebook .rede-icone { color: #1877f2; } /* Sobre a miniatura: pastilha escura para o logo colorido não sumir na imagem. */ .rede-tag.canto { position: absolute; top: 8px; right: 8px; z-index: 1; background: rgba(0,0,0,.68); color: #fff; padding: 4px 9px; border-radius: 8px; backdrop-filter: blur(3px); } /* Status do vídeo no RODAPÉ do card, não sobre a imagem. */ .video-estado { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .video-estado .expira { margin-left: auto; } /* O selo por rede do agendamento agora carrega o logo. */ .selo-rede .rede-tag { color: inherit; } /* Cabeçalho da prévia: os botões não quebram em duas linhas num modal estreito. */ .previa-topo .botao { white-space: nowrap; } .previa-topo .dialogo-sub { margin-bottom: 0; } /* ------------------------------------------------------------- teto de clipes Cheio, a área de envio recusa ANTES de o cliente escolher o arquivo. Deixar arrastar para só então negar desperdiça o tempo (e a banda) dele. */ .solta.travada { opacity: .5; cursor: not-allowed; border-style: solid; border-color: var(--aviso); } .solta.travada:hover { border-color: var(--aviso); } .aviso-teto { color: var(--aviso); margin: 10px 0 0; font-size: 13px; line-height: 1.5; } #clipes-contagem.no-teto { color: var(--aviso); font-weight: 600; } /* ------------------------------------------------------- seletor segmentado Fundo do vídeo, escolhido na hora de gerar. Três opções visíveis de uma vez: um