/* =========================================================================
Posts do Instagram - Talkline
Painel interno (registro PRODUCT: o desenho serve a tarefa, nao e peca de marca).
Comentarios em pt-BR sem acento, como o resto do kit.
ONDE ISTO PERTENCE -- e o que o DONO mudou em 2026-08-16
Ate esta data o painel inteiro era da familia teal-petroleo ESCURA, herdada
do Fechamento. O dono viu o painel em producao, mandou uma referencia de
SaaS claro e escreveu: "ficar que nem a segunda imagem, mas com as cores da
talk NOS FILTROS E BARRA QUE FICA NA PARTE DE CIMA"; depois, vendo que o
redesenho tinha entregue a estrutura e mantido o escuro: "ta branco como eu
te pedi? por que eu nao quero esse verde na tela toda".
O ESCOPO, decidido com ele e registrado em
docs/superpowers/specs/2026-08-11-painel-direcao-visual.md (secao 2026-08-16):
BARRA DO TOPO (cabecalho + linha do modo) -> continua TEAL ESCURA
FAIXA DE FILTROS / ABAS -> continua TEAL
TODO O RESTO (lateral, conteudo, cartoes,
formularios, grade do mes, login) -> CLARO
E A ESTRUTURA NAO MUDOU: os tres destinos da lateral, as tres abas de tempo
e os quatro passos de Criar post sao os mesmos de antes. Isto foi troca de
TEMA, nao de layout.
POR QUE ISTO NAO E "TROCAR DUAS VARIAVEIS DE FUNDO"
Os tres tokens de estado foram escolhidos para brilhar sobre petroleo. Sobre
branco eles dao 1.86:1 (--verde-log #4fd2c0), 1.62:1 (--amarelo-log #e8c95a)
e 2.67:1 (--vermelho-log #e08585): invisiveis. E sao exatamente as cores que
carregam a ASSINATURA do painel -- o chip que diz de quem e a vez. Entao
eles mudaram de VALOR, e nao de SIGNIFICADO: verde = terminou bem, amarelo =
precisa de voce, vermelho = deu errado.
O TEAL DA MARCA NAO MUDOU UM DIGITO. --marca #1B606E e --marca-hover #247780
sao os mesmos de producao, e continuam pintando a pilula da aba ativa, o
item ativo da lateral, o "hoje" do mes e todo botao primario. A paleta
escura inteira tambem nao foi jogada fora: ela virou a familia --barra-*,
com os valores IDENTICOS aos de producao, escopada as duas superficies que
continuam escuras. O que o olho encontra primeiro (masthead + abas) e
literalmente a mesma tinta do Fechamento.
=========================================================================
CONTRASTE (calculado, nao presumido -- WCAG 2.x, formula de luminancia
relativa). Ha pytest que RECALCULA cada par abaixo lendo os tokens e os
seletores desta folha; nenhum destes numeros esta so escrito aqui.
--- TEXTO DE CORPO SOBRE AS CINCO SUPERFICIES CLARAS (piso 4.5:1) ---
--painel --fundo --log --campo --neutro
#FFFFFF #EFF3F5 #E7EDEF #DDEAEE #D3DDE0
--texto 15.72 14.08 13.30 12.79 11.37
--dim 6.34 5.68 5.36 5.16 4.59 <- folga mais fina
--verde-log 7.63 6.83 6.45 6.20 5.52
--amarelo-log 6.85 6.13 5.79 5.57 4.95
--vermelho-log 10.20 9.14 8.63 8.30 7.38
--ok 6.29 5.64 5.32 5.12 4.55
A folga mais fina do painel continua sendo a do DESABILITADO (--dim sobre
--neutro, 4.59:1) -- era 4.81:1 no escuro, pelo mesmo motivo: e o unico par
em que os dois lados sao superficie e texto apagados de proposito. Ela e
medida por `test_o_DESABILITADO_do_painel_tem_a_MARGEM_mais_fina`.
--- E A TABELA QUE FALTAVA: MARCA CONTRA MARCA ---
Contraste contra o FUNDO diz se uma marca se le. Ele nao diz nada sobre se
uma marca se distingue DA OUTRA -- e e disso que o painel vive, porque o
chip existe para ser lido de relance no meio de uma lista. A primeira versao
clara passou em todos os pares de fundo e reprovou aqui, sem que nenhum
teste percebesse. Os numeros sao dE2000, e o segundo e sob DEUTERANOPIA
(transformacao de Vienot 1999 -- cerca de 8% dos homens):
antes (1a versao clara) agora
amarelo x vermelho (a sua vez x deu errado) 23.9 / 2.7 23.9 / 8.2
verde x --ok (no ar x aprovado) 15.1 / 18.6 19.1 / 25.4
--dim x --ok (cancelado x aprovado) 8.8 / 5.8 9.4 / 7.9
verde x amarelo 33.4 / 20.2 33.4 / 16.4
amplitude de L* das cinco marcas 5.6 13.2
E ESTE E O TETO, e vale dizer por que: num painel claro TODA marca precisa
ser escura (4.5:1 sobre --campo, a superficie tingida, ja exige L* <= 44), e
entao a claridade -- que no tema escuro separava as marcas sozinha -- deixa
de estar disponivel como eixo principal. O que carrega a discriminacao aqui
e, na ordem: a SILHUETA (o peso do chip: cheio, contorno, borda grossa, sem
caixa), a TINTA DE FUNDO (so o peso `vez` tem fundo colorido), e so entao a
cor. As tres marcas que sobram apertadas em L* -- verde, amarelo e --ok --
nunca aparecem com a MESMA silhueta.
--- CHIP DE "VEZ": fundo na TINTA, rotulo e contorno na cor cheia ---
--amarelo-log sobre --amarelo-fundo (#F7E39A) 5.35:1
--vermelho-log sobre --vermelho-fundo (#EFC0B9) 6.27:1
contorno (2px, cor cheia) sobre as superficies: >= 4.95:1, piso 3:1
A OPOSICAO DE SILHUETA SOBREVIVEU, e agora ela e a de sempre: `vez` e o
chip CHEIO (unica superficie colorida do painel), `voo` e o chip de
CONTORNO (fundo transparente). E o que separa `recusado` de
`falha_publicacao`, que tem a MESMA cor e acoes opostas.
O que NAO sobreviveu foi a inversao escura da primeira versao (fundo
#9C2620, rotulo claro): medida na coluna da Semana, ela punha o chip a
1.09:1 do botao `Reenviar ao grupo` -- mesma forma, mesmo peso, mesma
claridade. Um chip que parece botao deixa de dizer de quem e a vez.
A tinta amarela esta a 5.57:1 do teal do botao e a vermelha a 4.38:1: as
duas familias voltaram a ser dois objetos diferentes de longe.
--- PLACEHOLDER, e ele nao e caso a parte ---
--dim sobre --campo 5.16:1 (`.input::placeholder`, opacity: 1)
Cinza claro "por elegancia" e o defeito de legibilidade mais comum que
existe, e no tema claro ele e mais tentador ainda. O placeholder usa o
MESMO --dim do resto do painel. Medido por teste.
--- PRESSIONADO (:active), que no celular aparece SEM hover por baixo ---
As camadas de realce sao rgba do proprio --dim sobre o fundo real, e o que
se le depois disso nao e nem a camada nem o fundo: e a mistura.
lateral, hover (8% de --dim sobre --painel) = #F0F3F3
--texto 14.09:1 --dim 5.68:1
lateral, active (16% de --dim sobre --painel) = #E2E6E7
--dim 5.05:1 <- num toque, e ESTA cor que se le
.btn-neutro:active (fundo --painel-borda) --texto 9.94:1
(e por isso o :active dele tambem declara `color: var(--texto)`: com o
--dim de repouso a mesma caixa daria 4.01:1, e no dedo nao ha hover
por baixo para ter trocado a cor antes)
.btn-perigo, sobre o fundo mais escuro em que ele aparece (--campo, a
coluna de HOJE da Semana): hover 5.53:1, active 4.87:1
--- CONTORNO DE CONTROLE: a reprovacao herdada QUE ESTE TEMA CONSERTA ---
No escuro ficava registrado que a borda de repouso de um NAO
alcancava os 3:1 de WCAG 1.4.11 (--painel-borda sobre --painel 1.49:1; o
melhor token disponivel, --ok, dava 2.65:1) e a mitigacao era rotulo
visivel + anel de foco. No claro ha para onde ir sem inventar cor de marca,
e por isso nasceu UM token: --campo-borda #6B858C, o contorno de controle.
--campo-borda sobre --painel 3.92:1 sobre --fundo 3.51:1
sobre --log 3.31:1 sobre --campo 3.19:1
Ele veste `.input`, `.btn-neutro` e o chip de contorno neutro. O fio de
separacao continua sendo --painel-borda (1.58:1 sobre --painel) porque ele
e DECORATIVO -- separa linhas de uma lista, nao delimita controle nenhum, e
1.4.11 nao se aplica a ele. Sao dois tokens porque sao dois trabalhos: um
fio de livro-razao com 3:1 seria uma grade de chumbo.
E a segunda reprovacao herdada tambem caiu: --ok sobre --painel era 2.65:1
e agora e 8.25:1, entao a borda da opcao de tipo escolhida (`.tipo-opcao`) e
a borda do chip `sancao` passam a 1.4.11 por conta propria.
--- MARCA DO MES (WCAG 1.4.11, piso 3:1) ---
As cinco cores sobre os TRES fundos de celula, todas acima de 5:1 (ver a
tabela de texto acima: --log repouso, --fundo dia de fora, --campo dia com
a sua vez). No escuro a menor era 3.18:1; aqui a menor e 5.16:1 (--dim
sobre --campo).
O TAMANHO dela e 12px (0.75rem), e nao os 8,8px da primeira versao: o
comentario dizia "forma de meio centimetro" e desenhava metade disso, numa
grade de 42 celulas onde a marca e a unica informacao. 12px e o que cabe em
duas fileiras dentro de uma celula de 5.5rem sem empurrar o numero do dia.
=========================================================================
A BARRA ESCURA -- as duas superficies que o dono mandou manter
Nada aqui e cor nova: a familia --barra-* sao os valores da paleta escura
de producao, renomeados para deixar de ser o TEMA e passar a ser o ESCOPO.
--barra-base #0B2E34 = o antigo --fundo (base do gradiente do topo)
--barra-borda #23606B = o antigo --painel-borda
--barra-texto #F3F2EF = o antigo --texto
--barra-dim #9FCDD7 = o antigo --dim
--barra-neutro #25555D = o antigo --neutro
--barra-atencao #E8C95A = o antigo --amarelo-log
--barra-perigo #E08585 = o antigo --vermelho-log
--masthead-topo #062B35 nao mudou de nome nem de valor.
MEDIDO SOBRE --masthead-topo / --barra-base
--barra-texto 13.35 / 12.90 --barra-dim 8.68 / 8.38
--barra-atencao 9.21 / 8.89 --barra-perigo 5.60 / 5.41
--barra-dim sobre --barra-neutro (aba desabilitada) 4.81
aba sob o mouse (8% de --barra-dim sobre --masthead-topo = #123842)
--barra-texto 11.23
aba pressionada (16% = #1E454F, e no toque ela aparece sozinha)
--barra-dim 6.04
#fff sobre --marca 7.13 #fff sobre --marca-hover 5.22 (a pilula ativa,
que atravessa os dois pontos do gradiente)
A REPROVACAO que fica registrada aqui e a mesma de sempre, e ela e do
ESCURO: --barra-borda sobre --masthead-topo da 2.11:1. E fio de separacao
entre elos do masthead e moldura do rotulo de perfil -- nao contorno de
controle.
E ESTA LINHA JA FOI FALSA. Ate a critica de 2026-08-16 ela afirmava que
"os controles que moram la dentro ('Sair', as abas) usam --barra-dim", e o
botao Sair usava --barra-borda na BORDA: 2.11:1, um contorno que existe no
DOM e nao no olho -- exatamente o defeito que --campo-borda foi criado para
consertar no lado claro, com 1.42:1. O hover era pior: --barra-neutro sobre
o masthead da 1.81:1, e o botao "cheio" quase nao se destacava da barra.
Agora Sair veste --barra-dim na borda (8.68:1) e o hover e o proprio
--barra-dim como PREENCHIMENTO, com o rotulo em --masthead-topo (8.68:1):
a mesma gramatica de repouso/hover/pressionado do lado claro, com a
inversao que uma barra escura pede.
========================================================================= */
:root {
/* ------------------------------- O PAINEL, CLARO -------------------------------
Cinco superficies, e cada uma tem UM trabalho. A escada de elevacao do tema
escuro foi invertida, nao redesenhada: o que era o fundo mais claro (--painel)
continua sendo a superficie ELEVADA, e o que era o mais escuro (--log)
continua sendo a REBAIXADA. Nenhum seletor precisou trocar de token por isso.
A matriz de contraste par a par esta no cabecalho desta folha. */
--fundo: #EFF3F5; /* a pagina */
--painel: #FFFFFF; /* elevado: cartao, editor, login */
--log: #E7EDEF; /* rebaixado: chip, caixa de recado, celula do mes */
--campo: #DDEAEE; /* campo de formulario E realce de atencao (ver abaixo) */
--neutro: #D3DDE0; /* desabilitado e esqueleto -- nunca carrega dado */
/* PAPEL, E NAO BEGE. A primeira versao desta rampa foi longe demais no
quente: R-B = 21 no fundo e no desabilitado, o que le como mostarda em
vez do quase-branco dos mockups -- o dono viu na tela e recusou, com
razao. Esta fica em R-B = 10, metade do amarelamento, e ainda passa
MELHOR no contraste (pior par 4.90 contra 4.68).
A licao: clarear a rampa para caber no piso de contraste NAO e o mesmo
que reduzir o croma dela, e eu tinha feito so a primeira coisa. */
/* O PISO DESTA RAMPA E O AMARELO, e o numero explica por que ela nao desce
mais. Com --neutro em #D5CFBD (a primeira tentativa) o --amarelo-log dava
4.40:1 e reprovava. A saida obvia -- escurecer o amarelo -- e a ERRADA, e
foi medida: de #7E5104 para #664002 ele passa no WCAG (5.87:1) e o dE2000
contra o vermelho SOB DEUTERANOPIA despenca de 8.2 para 1.3. Ou seja
"precisa de voce" e "deu errado" viram a mesma cor para cerca de 8% dos
homens -- num painel cujo sinal principal e um chip colorido, isso e pior
que o problema que se queria consertar.
Entao quem cedeu foi a SUPERFICIE do desabilitado, e as cinco marcas
ficaram nos valores em que ja estavam afinadas.
E A RAMPA CLARA SUBIU DE NOVO depois disso, por uma segunda medicao: com
--neutro em #DCD6C4 a AMPLITUDE DE L* das cinco marcas caiu para 10.9 e
reprovou o piso de 11.0 -- as quatro marcas fixas sozinhas ocupam 10.9, e
e o --dim que abre a faixa por ser o mais claro dos cinco. Mas --dim mais
claro precisa de superficie mais clara embaixo para manter 4.5:1.
A CAUSA e da propria formula, e vale escrever porque nao e obvia: creme
QUENTE tem luminancia MENOR que cinza FRIO na mesma claridade aparente,
porque a luminancia relativa pesa o verde em 0.7152 e o azul em 0.0722.
#D3DDE0 (o desabilitado antigo) e #DCD6C4 parecem igualmente claros e nao
sao. Trocar a familia da superficie apertou a paleta inteira, e a rampa
teve de subir para devolver o espaco. */
/* DOIS tokens de borda, porque sao dois trabalhos. --painel-borda e o FIO de
livro-razao (separa linhas, nao delimita controle: 1.4.11 nao se aplica);
--campo-borda e o CONTORNO DE CONTROLE, e ele existe para consertar a
reprovacao de 1.4.11 que o tema escuro carregava registrada desde a Task 1. */
--painel-borda: #C2D0D5; /* fio 1.58:1 sobre --painel -- o MESMO
numero do fio anterior, de proposito: um fio de
livro-razao separa linhas sem chamar atencao, e
mudar o peso dele mudaria a densidade da tela
sem ninguem ter pedido. */
--campo-borda: #6B858C; /* controle 5.19:1 sobre --painel, 4.19:1 sobre
--campo. TROCADO POR REPROVACAO MEDIDA: o valor
anterior (#6B858C) da 2.92:1 sobre o --campo
creme -- abaixo do piso NAO-TEXTUAL de 3:1 da
1.4.11. Ele passava sobre o campo azulado
antigo; a superficie mudou e levou a borda
junto. */
--texto: #10262C; /* 15.94:1 sobre --painel */
--dim: #48646B; /* 6.08:1 sobre --painel, 4.68:1 sobre --neutro.
E O MAIS CLARO DAS CINCO MARCAS, e e por isso
que ele nao pode escurecer: as outras quatro
ocupam 10.9 pontos de L* sozinhas, e o piso de
amplitude e 11.0. E o --dim que abre a faixa
(L* 40.5, amplitude 13.0). */
/* --- as cores de estado: MESMO significado, valor novo ---
verde = terminou bem | amarelo = precisa de voce | vermelho = deu errado.
Os valores do escuro (#4fd2c0 / #e8c95a / #e08585) dao 1.86:1, 1.62:1 e
2.67:1 sobre branco: nao ha como manter o digito e manter o sentido.
A SEGUNDA VIRADA (2026-08-16, depois da critica): a primeira versao clara
apertou as cinco marcas numa faixa de 5,6 pontos de L* (35,1 a 40,7). Elas
passavam TODAS contra o fundo -- e nenhum par tinha sido medido ENTRE DUAS
MARCAS, que e a propriedade que faz um chip ser distinguivel do outro.
Medido: `precisa de voce` x `deu errado` dava dE2000 23,9 e, sob
deuteranopia (Vienot, ~8% dos homens), 2,7 -- a mesma cor. Os valores
abaixo abrem a faixa para 13,2 pontos de L* (27,5 a 40,7) SEM que nenhuma
saia dos 4,5:1 em superficie alguma. Cada par medido esta no ledger. */
--verde-log: #1A5F3F; /* 7.63:1 sobre --painel, 5.52:1 sobre --neutro.
Era #0A6851, um verde-teal a dE 15,1 de --ok:
`no ar` e `aprovado` quase a mesma tinta. Agora
dE 19,1 (25,4 sob deuteranopia). */
--amarelo-log: #7E5104; /* 6.85:1 sobre --painel. NAO mudou: 4.95:1 sobre
--neutro e o teto da paleta -- ele e a marca
mais clara que ainda passa nas cinco. */
--vermelho-log: #801813; /* 10.20:1 sobre --painel. Era #9C2620 (L* 35,1),
a 3,3 pontos de L* do amarelo; agora 10,9. E e
o unico eixo que sobrou: no claro TODA marca
tem de ser escura, e so o vermelho podia descer
sem cruzar o piso de contraste de outra. */
--ok: #075761; /* 5.97:1 sobre --neutro (era 4.55:1, a folga mais
fina da folha inteira). Continua sendo a voz da
MARCA -- `aprovado` fala teal de proposito --,
e por isso ele fica a dE 3,8 de --marca. O que
mudou e a distancia para --dim: L* 0,2 -> 7,1 */
/* --- AS DUAS TINTAS: a superficie que diz "e a sua vez" ---
Elas nasceram para consertar dois defeitos medidos de uma vez so.
1) O CHIP TINHA VIRADO BOTAO. No escuro o chip `vez` era fundo CLARO com
rotulo escuro e o botao primario era fundo ESCURO com rotulo claro:
silhuetas opostas, impossivel confundir. A primeira versao clara
inverteu o chip (fundo #9C2620 escuro, rotulo claro) e o botao continuou
teal escuro -- medido na coluna da Semana, `Recusado pelo grupo`,
`O horario passou` e `Reenviar ao grupo` eram tres blocos escuros de
mesma forma, mesmo peso e mesma claridade (1.09:1 e 1.04:1 entre eles).
Dois diziam o que aconteceu e um dizia clique aqui.
2) A DISCRIMINACAO ENTRE OS DOIS CHIPS DE "VEZ". Como superficie, as duas
tintas ficam a dE2000 25,4 uma da outra e 14,1 sob deuteranopia --
contra 8,2 do par de tinta cheia.
Nenhuma superficie do painel alem destas duas e colorida: quando o olho
acha cor de fundo, e porque alguem esta esperando por ele. */
--amarelo-fundo: #F7E39A; /* --amarelo-log 5.35:1 | --texto 12.29:1 */
--vermelho-fundo: #EFC0B9; /* --vermelho-log 6.27:1 | --texto 9.67:1 */
/* --- A MARCA, agora VERDE-FLORESTA ---
Veio dos mockups do dono (25/08/2026). Mudou de VALOR e de NOME: um token
chamado `--marca` guardando #16382C seria uma mentira que todo leitor
futuro pagaria, e esta folha ja tem o habito de nomes que dizem a verdade
(ver --barra-*, que existe porque `--texto` nao podia valer #F3F2EF).
O rename foi seguro de conferir: `--marca` aparecia em 35 lugares, TODOS
nesta folha -- zero no app.js, zero no HTML, zero nos testes.
--menta e o ACENTO, e so vive sobre o escuro: 8.25:1 sobre --barra-base.
Sobre o creme ele daria 1.9:1 e sumiria. */
--marca: #1B606E; /* branco em cima: 12.83:1 */
--marca-hover: #247780; /* branco em cima: 10.02:1 */
--menta: #4FD2C0;
--radius: 10px;
--radius-sm: 7px;
/* ---------------- A BARRA ESCURA: o que o dono mandou manter ----------------
A paleta do Fechamento inteira, com os valores de producao, escopada as
duas superficies que continuam teal: o masthead (cabecalho + linha do modo)
e a pilula de abas. Ela deixou de ser o TEMA e passou a ser o ESCOPO -- e e
por isso que os nomes mudaram: `--texto` num painel claro nao pode ser
#F3F2EF, mas `--barra-texto` pode, porque o nome diz onde ele vale. */
--masthead-topo: #062b35; /* o mais escuro: masthead e LATERAL */
--barra-base: #0B2E34; /* a mesma tinta: nos mockups o topo e a lateral
sao uma superficie so, contínua, e o gradiente
que existia entre elas sumiu junto */
--barra-topo: #114550; /* elevado DENTRO do escuro: item ativo da lateral */
--barra-borda: #23606B;
--barra-texto: #F3F2EF; /* 14.03:1 sobre --barra-base */
--barra-dim: #9FCDD7; /* 7.56:1 */
--barra-neutro: #25555D; /* esqueleto e aba travada */
--barra-atencao: #E8C95A; /* 9.43:1 -- NAO mudou de valor */
--barra-perigo: #E08585; /* 6.71:1 -- clareado de #E08585, que sobre o
verde novo caia para 4.5 e encostava no piso */
/* --- tipografia: UMA familia (a pilha de sistema do kit), escala FIXA em rem,
razao exata 1.2. Nada de clamp(): em painel a fonte fluida e pior, porque
o usuario abre sempre no mesmo DPI e o rotulo muda de tamanho sem motivo. */
--fonte: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
/* O DISPLAY SERIF, e ele vive em DOIS lugares e mais nenhum: o titulo da aba
(Hoje / Semana / Mes) e o numeral do dia no cartao. Rotulo, botao e dado
continuam na pilha sans -- serif em rotulo de painel e ruido, nao voz.
A PILHA SO TEM FONTE DE ALGARISMO ALINHADO, e isso foi MEDIDO abrindo os
arquivos: Georgia e Constantia trazem algarismo ANTIGO (old-style), em que
o 2 fica na altura-x e o 5 desce abaixo da linha de base -- o "25" do
cartao sairia torto em relacao ao mockup. Palatino, Cambria e Times New
Roman tem figura alinhada, e sao as tres que ficaram. */
--fonte-titulo: "Palatino Linotype", Palatino, Cambria, "Times New Roman", serif;
--t-xs: 0.78125rem; /* 12.5px - rotulo miudo, perfil */
--t-sm: 0.9375rem; /* 15px - CORPO */
--t-md: 1.125rem; /* 18px - titulo de secao */
--t-lg: 1.35rem; /* 21.6px - titulo de tela */
--t-xl: 1.62rem; /* 25.9px - wordmark */
--t-display: 3.25rem; /* 52px - o titulo da aba, em serif */
--t-numeral: 3.5rem; /* 56px - o dia no bloco de data, em serif */
/* --- espaco --- */
--e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem;
--e4: 1rem; --e5: 1.5rem; --e6: 2rem;
/* --- medida e goteira ---
O masthead sangra de ponta a ponta, mas o CONTEUDO dele para na mesma linha
do conteudo da pagina: sem isto a marca comeca em 24px e o titulo da aba em
104px numa tela de 1440, e a moldura parece torta sem que se saiba por que.
A pagina deixou de ser UMA coluna quando a lateral de destinos entrou. A
goteira continua sendo a mesma para o masthead e para a armacao, e por isso
ela passou a se medir pela ARMACAO inteira (lateral + goteira interna +
conteudo): assim a borda esquerda da lateral cai na mesma linha do wordmark
e a borda direita do conteudo, na mesma linha do botao Sair. Medir pela
`--medida` sozinha teria empurrado o conteudo 272px para dentro e a
moldura voltaria a parecer torta -- pelo motivo oposto ao de antes.
`--medida` NAO mudou de valor: ela continua sendo a medida do conteudo. */
--medida: 1280px;
--lateral: 15rem; /* 240px */
--armacao: calc(var(--medida) + var(--lateral) + var(--e6));
--goteira: max(var(--e5), (100% - var(--armacao)) / 2);
/* --- masthead encadeado: as alturas sao TOKEN porque o `top` do elo seguinte
se ancora nelas. Numero solto no `top` e o jeito classico de a barra de
baixo cobrir a de cima depois de um ajuste de padding. --- */
--h-cabecalho: 3.5rem; /* 56px */
/* O modo de publicacao (Task 5b) entrou ENTRE o cabecalho e as abas: uma
linha so, altura fixa como as demais -- o texto tem de caber SEM QUEBRAR
nos tres modos (o mais longo tem 74 caracteres), e `.masthead-modo` leva
`white-space: nowrap` + ellipsis como rede de seguranca. Sem a altura
fixa, um texto que quebrasse duas linhas empurraria as abas por baixo do
proprio conteudo -- o "jeito classico" que o comentario acima ja avisa. */
--h-modo: 2.25rem; /* 36px */
--h-abas: 3.25rem; /* 52px */
/* No celular a lateral vira BARRA INFERIOR (ver o comentario de `.lateral`),
e a altura dela e token pelo mesmo motivo que as do masthead sao: e dela
que o `padding-bottom` do conteudo se ancora. Sem isso, o ultimo post da
lista nasce debaixo da barra e ninguem descobre rolando -- a rolagem
simplesmente termina em cima dele. */
--h-barra-baixo: 3.75rem; /* 60px */
/* O respiro entre o topo de uma tela e o conteudo dela. E token porque DUAS
pecas o gastam e elas nao podem discordar: a barra de abas (que da o
respiro do Calendario com o proprio `margin-bottom`) e o `padding-top`
das outras duas telas. Ver o comentario de `.conteudo`. */
--respiro-tela: var(--e5);
/* --- z-index semantico e DECRESCENTE ao longo da cadeia --- */
--z-cabecalho: 700;
/* O modo fica ENTRE o cabecalho e as abas, no z-index tambem. */
--z-modo: 650;
--z-abas: 600;
/* A lateral e o ULTIMO elo grudado da tela: ela para embaixo das abas, que
param embaixo do modo, que para embaixo do cabecalho. No desktop os dois
nunca se cruzam (sao colunas irmas); no celular a barra inferior sobe para
`--z-abas + 1`, porque la ela flutua SOBRE o conteudo -- e la o valor esta
escrito na media query, junto do motivo. */
--z-lateral: 500;
/* Havia um quarto elo aqui -- `--z-filtros` e `--z-ms-painel`, do filtro de
loja. Sairam com o campo. As tres alturas acima continuam sendo TOKEN, e
nao numero solto, porque e delas que o `top` de cada elo se ancora. */
--transicao: 160ms ease-out; /* dentro da faixa 150-250ms */
/* A altura do palco da vitrine. Mora AQUI, e nao em `.vitrine`,
porque o esqueleto que ocupa o lugar dela enquanto a rede responde
nao e descendente dela -- e as duas alturas tem de ser a MESMA, ou
a tira de dias salta quando os posts chegam. */
--vitrine-palco-altura: clamp(19rem, 52vh, 30rem);
/* A fileira de setas e pontos. Ela existe nos quatro estados da vitrine
(peca, um post so, esqueleto, vazio) para o que vem DEPOIS dela nao subir
e descer conforme o dia tem um ou dois posts. */
--vitrine-controles-altura: 2.5rem;
--vitrine-altura-total: calc(var(--vitrine-palco-altura)
+ var(--vitrine-controles-altura) + var(--e4));
}
* { box-sizing: border-box; }
/* a familia vai no para que NENHUM elemento do documento caia no serif
padrao do navegador -- posta so no , o ja escapava */
html { font-family: var(--fonte); }
html, body { margin: 0; padding: 0; }
body {
min-height: 100vh;
background: var(--fundo);
color: var(--texto);
font-size: var(--t-sm);
line-height: 1.45;
-webkit-font-smoothing: antialiased;
color-scheme: light; /* controles nativos (input, scrollbar) acompanham o tema */
}
[hidden] { display: none !important; }
/* datas e contadores nao dancam ao atualizar */
time, .num { font-variant-numeric: tabular-nums; }
/* Texto so para leitor de tela. Usado no estado "carregando" do bloco de sessao:
o esqueleto e visual, e quem nao ve o esqueleto precisa ouvir o que ele diz. */
.so-leitor {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ============================ FOCO ============================
Um anel unico para o painel inteiro. O `outline-offset` poe o anel FORA do
controle, sobre o fundo da pagina -- que e onde o contraste dele foi medido
(--dim sobre --fundo 5.68:1, sobre --painel 6.34:1). O anel NAO e medido
sobre o teal: com o painel claro, --dim sobre --marca da 1.12:1, e e por isso
que o anel de dentro da barra escura e reescopado logo abaixo em vez de
contar com o `outline-offset` para escapar. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--dim);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* DENTRO DA BARRA ESCURA o anel troca de cor, e nao de desenho. --dim (#556358)
sobre o teal do masthead da 1.55:1 -- um anel que existe no DOM e nao no olho,
e o anel de foco e justamente o estado que decide para quem navega por
teclado. --barra-dim da 8.68:1 sobre o mesmo fundo. E o mesmo anel de sempre:
2px, com o mesmo `outline-offset`, so que legivel onde ele mora. */
.cabecalho :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.masthead-modo :where(a, button, [tabindex]):focus-visible,
.abas :where(a, button, [tabindex]):focus-visible {
outline-color: var(--barra-dim);
}
.pular {
position: absolute; left: var(--e3); top: -3rem;
z-index: 900;
background: var(--marca); color: #fff;
padding: var(--e2) var(--e4);
border-radius: var(--radius-sm);
text-decoration: none; font-weight: 600;
transition: top var(--transicao);
}
/* Ele pousa SOBRE o masthead escuro, entao o anel dele segue a mesma regra. */
.pular:focus-visible { top: var(--e3); outline: 2px solid var(--barra-dim); }
/* ========================= WORDMARK =========================
Igual ao do Fechamento: e o mesmo produto, e o reconhecimento e o ponto. */
.wordmark { display: inline-flex; align-items: baseline; gap: 4px; letter-spacing: -0.5px; }
.wordmark-text { font-size: var(--t-xl); font-weight: 700; color: var(--texto); }
.wordmark-dot {
width: 9px; height: 9px; border-radius: 50%;
background: var(--marca); display: inline-block;
}
/* O wordmark vive em DOIS fundos: o cartao claro do login e a barra escura do
topo. Ele nao ganhou uma segunda versao -- ganhou o mesmo desenho nas cores da
superficie em que esta.
O PONTO E O UNICO ATOMO DE MARCA DA TELA DE LOGIN, e a primeira versao clara
o pintou com --dim -- a MESMA tinta de "Feed · 1 foto" -- mais um halo de
8px que, sobre branco, nao e brilho: e borrao. --marca estava disponivel e
intocado. Sobre a barra escura o ponto continua em --barra-dim com halo,
porque la o teal sobre teal desapareceria e o halo tem o que iluminar. */
.cabecalho .wordmark-text { color: var(--barra-texto); }
.cabecalho .wordmark-dot {
background: var(--barra-dim);
box-shadow: 0 0 10px rgba(159, 205, 215, 0.55);
}
/* =================== MASTHEAD ENCADEADO ===================
Tres elos (cabecalho -> modo de publicacao -> abas), z-index decrescente, e
o `top` de cada elo ancorado na soma das alturas dos de cima. E o padrao do
painel irmao, e existe por um motivo concreto: quem esta rolando uma lista
longa de posts nao pode perder as abas nem saber quem esta logado -- e a
partir da Task 5b, tambem nao pode perder de vista se o proximo Publicar
sai de verdade. */
.cabecalho {
position: sticky; top: 0; z-index: var(--z-cabecalho);
height: var(--h-cabecalho);
display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
padding: 0 var(--goteira);
/* O GRADIENTE CONTINUA SENDO O DO FECHAMENTO, ponto a ponto: #062b35 ->
#0B2E34. Antes o segundo ponto era `var(--fundo)`, o fundo da pagina, e a
barra descia ate encontrar o documento; agora o documento e claro e a barra
e uma faixa com fim proprio, entao o ponto de baixo virou token seu
(--barra-base) com o MESMO valor. Nada mudou na tela; o que mudou e que a
barra parou de depender de uma cor que nao pertence mais a ela. */
background: linear-gradient(180deg, var(--masthead-topo) 0%, var(--barra-base) 100%);
border-bottom: 1px solid var(--barra-borda);
}
.cabecalho-marca { display: flex; align-items: center; gap: var(--e5); min-width: 0; }
.cabecalho-titulos {
display: flex; flex-direction: column; min-width: 0;
border-left: 1px solid var(--barra-borda);
padding-left: var(--e4);
}
.cabecalho-titulo {
font-size: var(--t-sm); font-weight: 600; color: var(--barra-texto); /* 12.90:1 */
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cabecalho-sub {
font-size: var(--t-xs); color: var(--barra-dim); /* 8.38:1 */
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cabecalho-acoes { display: flex; align-items: center; gap: var(--e3); flex: none; }
/* SAIR e o unico controle do painel que mora sobre a barra escura, e `.btn-neutro`
e escrito para o claro. Ele nao ganhou variante nova: ganhou as cores da
superficie, nos tres estados, com a MESMA gramatica (repouso de contorno,
hover cheio, pressionado mais cheio).
A BORDA DELE ERA --barra-borda: 2.11:1 sobre o masthead. Num recorte 5x o
contorno do botao era um fantasma -- via-se o texto e o anel de foco, nao o
botao. E o argumento que esta folha usa para ter criado --campo-borda no
lado claro ("um botao de contorno cuja borda da 1.42:1 contra a pagina e um
botao que so se ve pelo texto") vale palavra por palavra aqui. --barra-dim
da 8.68:1 e ja estava na paleta. */
.cabecalho .btn-neutro {
color: var(--barra-texto); /* 13.35:1 */
border-color: var(--barra-dim); /* 8.68:1 */
}
/* O hover PREENCHE, e numa barra escura preencher e clarear: --barra-dim como
fundo, com o rotulo no teal mais escuro. 8.68:1, e o botao deixa de ser uma
silhueta e vira uma peca. Antes ele preenchia com --barra-neutro, que da
1.81:1 contra a propria barra -- um "cheio" que nao se via. */
.cabecalho .btn-neutro:hover {
background: var(--barra-dim); color: var(--masthead-topo); /* 8.68:1 */
border-color: var(--barra-dim);
}
/* No dedo nao ha hover por baixo: o :active precisa carregar sozinho a cor que
se le. --barra-texto sobre --marca da 6.79:1, e a borda --barra-dim mantem a
silhueta contra a barra (o teal sozinho da 1.90:1 contra ela). */
.cabecalho .btn-neutro:active {
background: var(--marca); color: var(--barra-texto);
border-color: var(--barra-dim);
}
/* --- quem esta logado: tres estados reais (carregando / pronto / erro) --- */
.sessao { display: flex; align-items: center; gap: var(--e2); margin: 0; min-width: 0; }
.sessao-nome {
font-size: var(--t-sm); color: var(--barra-texto); /* 12.90:1 */
max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sessao-perfil {
font-size: var(--t-xs); color: var(--barra-dim); /* 8.38:1 */
border: 1px solid var(--barra-borda); border-radius: 999px;
padding: 1px var(--e2);
}
/* carregando = esqueleto com a altura ja reservada, nunca spinner */
/* O DISCO com a inicial -- o mesmo do CRM. Nao e foto: o painel nao tem
avatar de ninguem, e inventar um seria mais um dado que ele nao possui. */
.sessao-disco {
width: 2rem; height: 2rem;
flex: 0 0 auto;
display: grid; place-items: center;
border-radius: 999px;
background: var(--marca);
color: var(--barra-texto);
font-size: var(--t-xs); font-weight: 700;
border: 1px solid var(--barra-borda);
}
.sessao-linhas { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* A conta do Instagram: a linha de cima, e a unica coisa do masthead que diz
PARA ONDE o post vai. */
.sessao-conta {
font-size: var(--t-xs); font-weight: 700;
color: var(--barra-texto);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sessao-quem { display: flex; align-items: center; gap: var(--e2); min-width: 0; }
.sessao-esqueleto {
display: block; width: 9rem; height: 1rem;
border-radius: var(--radius-sm);
background: var(--barra-neutro);
}
.sessao-erro { font-size: var(--t-xs); color: var(--barra-atencao); } /* 8.89:1 */
/* --- elo 2: o modo de publicacao (Task 5b) ---
Fundo --barra-base e as tres cores da familia --barra-*, ja auditadas no
cabecalho desta folha: --barra-dim 8.38:1, --barra-atencao 8.89:1,
--barra-perigo 5.41:1, todas sobre --barra-base. Nenhuma cor NOVA nasceu
aqui nem quando o painel virou claro: sao os MESMOS tres valores de sempre
(#9FCDD7 / #E8C95A / #E08585), na mesma escada que o resto do painel usa
para informacao/atencao/perigo -- so que aqui eles continuam pintando sobre
teal, porque este elo continua sendo barra do topo.
O peso visual SOBE com o risco, e nao e so cor:
simulado -- --barra-dim, peso normal, borda fina: e informativo.
ensaio -- --barra-atencao, peso 600, mesma borda: e uma cautela, como o
resto do painel ja usa amarelo para.
graph_api -- --barra-perigo, peso 700, borda mais grossa: e a MESMA escada
que `.confirmar-titulo` usa para a acao irreversivel -- este
elo e o aviso do MESMO risco, so que antes do clique.
Nada anima ao trocar de modo: o valor nao muda durante uma sessao aberta
(trocar exige subir o servico de novo), e esta folha ja so paga movimento
onde o operador esta observando uma mudanca em tempo real (o chip que
assenta) -- isto aqui pinta uma vez, na carga. */
.masthead-modo {
/* SOLTA do topo em 21/08. Ela era a ultima barra grudada depois da lateral e
das abas, e medindo: escondia 64px dos 251 da arte ao rolar -- um quarto da
peca atras de um aviso que se le UMA vez, na carga. O que ela diz continua
igual e continua no mesmo lugar da pagina; ela so nao persegue mais quem
rolou para ver a imagem. */
height: var(--h-modo);
display: flex; align-items: center;
padding: 0 var(--goteira);
margin: 0;
/* Ele e o SEGUNDO ELO DA BARRA DO TOPO, e por isso continua escuro: --barra-base
e exatamente onde o gradiente do cabecalho termina, entao os dois elos se
leem como uma faixa so. Ele usava --log, que agora e uma superficie clara --
e um aviso de "isto publica de verdade" pintado em cinza claro no meio de um
painel claro seria o oposto do que ele existe para fazer. */
background: var(--barra-base);
border-bottom: 1px solid var(--barra-borda);
font-size: var(--t-sm);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.masthead-modo[data-modo="simulado"] {
color: var(--barra-dim); /* 8.38:1 sobre --barra-base */
border-bottom-color: var(--barra-borda);
}
.masthead-modo[data-modo="ensaio"] {
color: var(--barra-atencao); /* 8.89:1 sobre --barra-base */
font-weight: 600;
border-bottom: 2px solid var(--barra-atencao); /* 9.21:1 -- era um lavado
de 55%, que sobre teal escuro devolve um fio a 3.6:1 e some no zoom */
}
.masthead-modo[data-modo="graph_api"] {
color: var(--barra-perigo); /* 5.41:1 sobre --barra-base */
font-weight: 700;
border-bottom: 2px solid var(--barra-perigo);
}
/* =====================================================================
A ARMACAO: a lateral de destinos e o palco
O painel ganhou DOIS niveis de navegacao, e eles nao sao a mesma coisa:
DESTINO e um lugar do produto -- onde os posts estao (Calendario), onde
se faz um (Criar post), o que ja foi ao ar (Publicados). Mora na
lateral, porque e a pergunta "onde eu estou".
ABA e um recorte de TEMPO do mesmo lugar -- Hoje, Semana, Mes. Mora
dentro do Calendario, porque e a pergunta "que pedaco do
calendario eu estou olhando".
Misturar os dois (pendurar Hoje/Semana/Mes na lateral ao lado de Criar post)
seria oferecer quatro coisas do mesmo tamanho das quais tres respondem a
mesma pergunta.
A armacao carrega a goteira, e nao os filhos: as duas colunas nascem dentro
dela, e por isso a lateral comeca exatamente onde o wordmark comeca.
A DOBRA DA LATERAL -- 1000px, e o numero sai de uma conta, nao de gosto.
A lateral custa `--lateral + --e6` = 272px da coluna de trabalho, sempre.
O palco vale entao `100vw - 2*--goteira - 272`, e com a goteira minima
(24px) isso e `100vw - 320`. A SEMANA e quem cobra: sete colunas com foto
dentro, e a largura de palco em que ela ja era aceita antes desta tarefa e
a de 701px numa pagina de UMA coluna -- 701 - 48 = 653px. Entao:
100vw - 320 >= 653 -> 100vw >= 973
e a lateral de coluna so pode existir de 1000px para cima (27px de folga).
Sem esta conta a faixa de 701 a 900px ficava com a lateral E o desktop
ligados ao mesmo tempo: MEDIDO, a coluna de dia da Semana caia para 52px e
o documento rolava de lado 22px numa viewport de 701px -- uma "miniatura
numa celula", que e exatamente o que a direcao proibe, ao lado de 240px de
navegacao quase vazia. Um pixel de viewport valia 287px de coluna de
trabalho. De 1000px para baixo a lateral vira FILEIRA (ver `.lateral`).
===================================================================== */
.armacao {
display: grid;
grid-template-columns: var(--lateral) minmax(0, 1fr);
gap: var(--e4);
/* `start` NAO serve mais: com ele a lateral para na altura do proprio
conteudo e sobra um buraco claro embaixo dela. `stretch` faz as duas
colunas terem a altura da mais alta. */
align-items: stretch;
/* A GOTEIRA DA ESQUERDA SAI, e o pe tambem. A lateral e uma coluna da
MOLDURA, e moldura encosta na borda -- pedido do dono em 25/08/2026:
"a barra de navegacao fica 0px colado no canto e vai ate o fim e nao
fica um buraco branco embaixo dela". O respiro do lado direito e de
baixo continua, so que aplicado a area de trabalho. */
padding: 0 var(--goteira) 0 0;
}
/* A AREA DE TRABALHO, flutuando dentro da moldura escura (ver o comentario da
armacao dos mockups, em `body.tela-painel`). Raio maior que o do cartao
(--radius, 10px) de proposito: quem CONTEM tem de ler como recipiente, e
nao como mais um cartao do mesmo tamanho. */
.palco {
min-width: 0;
background: var(--fundo);
border-radius: 18px;
padding: var(--e5) var(--e5) var(--e6);
/* O respiro de baixo saiu da armacao e veio para ca: assim a AREA DE
TRABALHO tem folga ate o fim da janela e a lateral, que e moldura,
continua encostando. */
margin-bottom: var(--e5);
min-height: calc(100vh - var(--h-cabecalho) - var(--h-modo) - var(--e6));
}
/* ---- A LATERAL ----
ELA E CLARA -- foi decisao expressa do dono (2026-08-16). Ela era o unico
lugar do painel fora do masthead que usava `--masthead-topo`, e o argumento
escrito aqui era bom: "a continuacao do masthead descendo pela esquerda". Mas
o dono pediu o teal NO TOPO E NOS FILTROS, e nomeou a barra lateral entre o
que devia ficar claro. Uma faixa teal de 240px descendo a pagina inteira e
justamente "esse verde na tela toda" que ele recusou.
O que ela NAO perdeu: o item ativo continua sendo a pilula teal das abas, com
o gradiente e o #fff intactos. A marca continua na lateral -- deixou de ser o
fundo dela e passou a ser o estado dela, que e onde a cor de marca informa em
vez de decorar. Ela e --painel (branco) com o fio --painel-borda, e o que a
separa da pagina e a elevacao, como qualquer outra superficie elevada daqui.
CONTRASTE MEDIDO SOBRE --painel (#FFFFFF)
--texto 15.72:1 --dim 6.34:1 --amarelo-log 6.85:1 --verde-log 7.63:1
--vermelho-log 10.20:1
O repouso do item usa --dim (6.34:1); o hover troca para --texto sobre o mesmo
fundo escurecido em 8% de --dim (#F0F3F3): --texto 14.09:1, --dim 5.68:1. O
:active usa a camada de 16% (#E2E6E7), e ELA APARECE SOZINHA no toque -- sem
hover por baixo, o que se le e --dim, 5.05:1. A camada e do proprio --dim:
continua nao havendo cor nova para realcar controle.
O ITEM ATIVO e a pilula teal das abas, sem inventar nada: o mesmo gradiente
(--marca-hover -> --marca) e o mesmo #fff (7.13:1 sobre --marca, 5.22:1 sobre
--marca-hover). E por isso que a linha de ajuda do item ativo tambem sai em
#fff e nao em --dim: --dim sobre --marca da 1.12:1 e sobre --marca-hover 1.36:1
-- no claro elas reprovam pior do que reprovavam no escuro. A hierarquia entre
o nome e a ajuda continua sendo tamanho e peso, que e onde ela devia estar.
ELA TEM A ALTURA DO QUE HA NELA -- e este e o segundo conserto do mesmo
lugar. Primeiro ela era um `max-height` que desenhava um retangulo de 240x205
preso no topo de uma coluna de 2943px, e o argumento contra isso era bom
ENQUANTO ELA ERA TEAL: um bloco escuro de 205px com 2738px de vazio embaixo
e um "segundo painel colado". Ai ela virou `height: 100vh` menos os elos
grudados, e com o fundo CLARO o defeito trocou de lado: medido, 240x760 de
cartao branco para 187px de conteudo -- 573px (73%) de retangulo branco
vazio, que e o mesmo vazio de antes com a cor invertida.
Agora a altura e a do conteudo (`height: auto`) com um `max-height` que e o
teto do que se ve, e o `overflow-y` para a janela baixa: num notebook de
768px com zoom em 150% os tres itens de fato passam do teto.
E O TOPO DELA ALINHA COM A FAIXA DE FILTROS. Os dois nascem no topo do palco
(ela perdeu o `margin-top`, que a empurrava 24px abaixo da faixa): a borda de
cima da lateral e a borda de cima da faixa teal caem na mesma linha, como a
coluna e a barra de ferramentas de qualquer painel com lateral.
E ela NAO sangra ate a borda esquerda da viewport, embora o masthead sangre:
numa tela de 2000px a goteira vale 224px, e uma faixa teal de 464px colada
na quina nao pertenceria a nada. Ela comeca onde o wordmark comeca -- o
mesmo eixo do resto da pagina. */
/* NAO E MAIS GRUDADA. Ela era `sticky` e ACOMPANHAVA a rolagem -- o dono
descreveu com a palavra certa, "fica descendo" -- e o efeito colateral era o
que ele reclamou depois: descendo junto, ela e as abas COBRIAM a peca. Numa
tela onde o que se veio fazer e olhar a arte, barra grudada e furto de
altura duas vezes: come o topo parada e tapa a imagem em movimento.
O cabecalho continua preso, e so ele: e a identidade e o botao Sair. */
/* A LATERAL ENTROU NO ESCURO em 25/08/2026, pelos mockups do dono.
Ela ja tinha sido escura antes e foi clareada em 16/08 -- "por que eu nao
quero esse verde na tela toda". O que os mockups pedem NAO e a volta
daquilo: la o verde tomava conteudo, cartao e formulario; aqui ele fica
restrito a MOLDURA (topo + lateral + folhinha do cartao) e a area de
trabalho inteira segue clara. E a mesma frase dele de 16/08 -- as cores da
marca na barra e nos filtros --, com a lateral contada como barra. */
.lateral {
/* ELA ESTICA COM A LINHA DA GRADE, e e so isso que fecha o vao.
NAO gruda: a ordem de 21/08/2026 -- "hoje semana e mes nao desce mais,
fica preso la no topo mesmo" -- tirou o sticky de tudo que nao fosse o
cabecalho, porque as barras desciam junto e TAPAVAM a peca (64px dos 251
da arte, medido). Grudar a lateral resolveria o vao e reabriria aquilo na
largura estreita, onde a grade vira uma coluna so e ela passa a ficar POR
CIMA do cartao.
`min-height` garante a janela cheia quando o conteudo e curto; sem
`max-height`, quando o conteudo e longo ela acompanha o palco ate o fim. */
align-self: stretch;
height: auto;
min-height: calc(100vh - var(--h-cabecalho) - var(--h-modo));
padding: var(--e4) 0 0;
/* --barra-base, e nao `transparent`: e a MESMA tinta do fundo da pagina, e
por isso ela nao desenha caixa nenhuma -- mas fica DECLARADA. Superficie
herdada por acidente e o que faz ninguem saber, meses depois, de que cor
a lateral e feita. */
background: var(--barra-base);
border: 0;
display: flex;
flex-direction: column;
}
/* 6px, e nao 2px: o anel de foco do painel tem 2px com `outline-offset: 2px`,
ou seja, ele ocupa de +2px a +4px fora da caixa do item. Com a goteira em
2px a aresta que da para o vizinho ficava por baixo dele -- medido: o anel
do item do meio sumia nos dois lados que encostam. A goteira agora e maior
que o anel. */
/* O TETO DE ROLAGEM MORA AQUI, e nao na coluna -- mudou em 25/08/2026.
Ele existe para uma coisa so: uma lista de destinos maior que a janela nao
pode empurrar a rolagem para o DOCUMENTO inteiro, senao a moldura rola junto
com a area de trabalho. Isso e problema da LISTA, que e o que pode crescer;
na coluna, o mesmo teto tambem a impedia de esticar ate o fim da pagina e
deixava um vao embaixo dela. */
.lateral-lista {
display: flex; flex-direction: column; gap: 6px;
margin: 0; padding: 0; list-style: none;
max-height: calc(100vh - var(--h-cabecalho) - var(--h-modo) - 9rem);
overflow-y: auto;
}
/* DUAS COLUNAS: o icone a esquerda, o par nome+ajuda a direita -- o arranjo
do CRM Talkline, que o dono mandou como referencia em 25/08/2026. O icone
atravessa as duas linhas para ficar centrado no par, e nao alinhado com a
primeira. */
.lateral-item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: var(--e3);
row-gap: 1px;
align-items: center;
padding: 9px var(--e3);
border: 1px solid transparent; border-radius: var(--radius-sm);
color: var(--barra-dim); text-decoration: none;
transition: background var(--transicao), color var(--transicao);
}
/* O ICONE DO DESTINO: SVG inline, sem CDN e sem fonte de icone -- ha teste
que reprova qualquer coisa puxada de fora. `currentColor` no traco e o que
faz ele acompanhar os quatro estados do item (repouso, hover, ativo, foco)
sem uma regra por estado. */
.lateral-icone {
grid-row: 1 / span 2;
width: 18px; height: 18px;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.lateral-nome { font-size: var(--t-sm); font-weight: 600; }
/* A segunda linha nao e enfeite: "Calendario" e "Publicados" sao ambiguos numa
lista de tres, e a ajuda diz o que a pessoa vai encontrar antes do clique --
o mesmo raciocinio do `.tipo-ajuda` no seletor de tipo do post. */
.lateral-ajuda { font-size: var(--t-xs); color: var(--barra-dim); }
/* As duas camadas sao rgba do PROPRIO --dim (#556358 = 85,99,88) -- ha pytest
que confere que a cor da camada e o token, e nao um cinza escolhido a mao. */
/* Os lavados sao do --barra-dim (#A3BCB0 = 163,188,176), como os da faixa de
abas -- a lateral e a mesma superficie que elas agora. */
.lateral-item:hover { background: rgba(159, 205, 215, 0.08); color: var(--barra-texto); }
.lateral-item:hover .lateral-ajuda { color: var(--barra-texto); }
.lateral-item:active { background: rgba(159, 205, 215, 0.16); }
/* `aria-current="page"` e o estado, e nao uma classe: quem usa leitor de tela
ouve "pagina atual" pelo MESMO atributo que pinta a pilula, entao os dois
nunca podem discordar. */
.lateral-item[aria-current="page"] {
color: #ffffff;
background: linear-gradient(180deg, var(--marca-hover) 0%, var(--marca) 100%);
/* Sobre branco, um halo teal de 12px vira uma mancha esverdeada em volta da
pilula -- o "brilho" que o fundo escuro absorvia. Aqui a elevacao e uma
sombra curta e neutra, que e o que uma pilula pousada sobre papel faz. */
box-shadow: 0 1px 3px rgba(6, 43, 53, 0.28);
}
.lateral-item[aria-current="page"] .lateral-ajuda { color: #ffffff; }
/* ---- POR QUE O CABECALHO DE TELA NAO E UM CARTAO ----
O dono pediu a composicao em cartoes e o respiro da referencia, e o
redesenho comecou pondo todo cabecalho de tela dentro de um `.folha`
(`--painel` + borda + raio). Medi os fundos: `--painel` (#114550) e a
superficie MAIS CLARA da pagina, e a celula do mes e a linha do dia vivem
direto sobre `--fundo` (#0b2e34). O resultado era a hierarquia ao contrario
-- o retangulo mais claro e mais contido da tela segurava a unica coisa que
ninguem le duas vezes (o titulo da aba que a pessoa acabou de clicar),
enquanto o DADO ficava no valor do fundo. Em Publicados era pior: um cartao
de 1105px de largura para ~420px de tinta e nada a direita.
Entao o cartao ficou onde ele CONTEM alguma coisa: os quatro passos de
Criar post (`.passo`). Cabecalho de tela e cabecalho -- tipografia e
espaco, sobre o fundo da pagina, como era antes deste redesenho e como a
direcao ja mandava ("o dia e um LIVRO-RAZAO", nao um mosaico de cartoes).
Foi assim tambem que os DOIS chromes de cabecalho de tela viraram um so:
Criar e Publicados abriam com desenhos diferentes sem nenhuma razao. */
/* `width: fit-content` porque este <h1> e o alvo do foco ao trocar de rota
(`tabindex="-1"`, ver o comentario no index.html). Como bloco ele media a
coluna inteira: medido em 1440, o anel de foco de "Criar post" saia 1120x31
para ~140px de tinta -- 92% dele contornando nada, e lia-se como um <input>
vazio. O anel agora tem o tamanho da palavra que ele marca. */
.tela-cabeca h1 {
font-size: var(--t-lg); font-weight: 600; margin: 0;
width: fit-content; max-width: 100%; text-wrap: balance;
}
.tela-cabeca { margin: 0 0 var(--e5); }
.tela-espera { margin: 0 0 var(--e5); max-width: 62ch; color: var(--amarelo-log); }
/* --- elo 3: as abas ---
Ela mora DENTRO do destino Calendario (ver o comentario no index.html): as
abas pertencem a ele, e uma barra de periodo grudada no topo de um
formulario de criacao ofereceria um recorte de tempo que aquela tela nao
tem. Sendo filha do destino, ela some com ele pelo `hidden` que ja esta no
HTML -- e nao por JavaScript depois da primeira pintura, que era o que
produzia 52px de salto ao abrir um favorito em `#criar`.
E ela ENCOSTA A ESQUERDA em vez de se centrar. Centrar era o certo enquanto
a pagina era uma coluna so e a barra era o terceiro elo de um masthead
simetrico; com a lateral, "centro da pagina" e "centro do conteudo" viraram
dois pontos a 136px um do outro (medido em 1440 e em 1920 -- o mesmo
numero, porque e metade de `--lateral + --e6`). Encostada, ela compartilha o
eixo esquerdo de tudo que vem abaixo: o titulo do dia, a hora de cada linha,
a grade do mes. A goteira saiu daqui -- quem a carrega e `.armacao`.
ELA E UMA FAIXA, E NAO UMA PILULA COLADA -- este e o conserto que a critica
cobrou, com tres medidas:
1) A CUNHA. A pilula tinha raio de 999px e encostava rasante na borda de
baixo da linha do modo. Amostrando a linha de pixels: em y=91 os 40px
varridos eram todos a borda escura; em y=92, 29 de 40 ja eram o fundo
claro da pagina. Os cantos arredondados arrancavam uma cunha de ~14px
de altura de dentro da barra do topo -- lia-se como header lascado.
2) O ADESIVO. Em 390px de viewport a pilula ficava em x=16 com 358px de
largura: um retangulo escuro flutuando, com cinza em cima, a esquerda e
a direita. Nao encostava em borda nenhuma da tela.
3) A GUILHOTINA. A barra media 1120x52 com o fundo da PAGINA, sem borda e
sem sombra, e a pilula ocupava 246px: 874px (78%) de faixa opaca e sem
marca nenhuma. O conteudo deslizava por baixo e era cortado a seco.
Agora a faixa E a superficie escura: ela ocupa a largura do palco, sem raio,
com o mesmo --barra-base da linha do modo logo acima -- quando ela gruda, os
dois elos escuros se leem como uma coisa so DE VERDADE (mesma tinta, sem
canto, sem fresta), e o corte do conteudo por baixo dela acontece contra uma
borda visivel em vez de contra o nada. */
/* A FAIXA DE ABAS SAIU DO ESCURO em 25/08/2026, e vale explicar por que isso
NAO contraria a ordem de 16/08.
Naquele dia o dono escreveu "as cores da talk NOS FILTROS E BARRA QUE FICA
NA PARTE DE CIMA", e desde entao esta faixa era teal por conta dessa frase.
Os mockups dele de 25/08 resolvem a ambiguidade: neles a LATERAL leva o
rotulo "FILTRO" e e ela que esta escura, junto com a barra de cima. A faixa
de periodo aparece clara, dentro da area de trabalho.
Ou seja: os dois lugares que ele nomeou continuam com a cor da marca. O que
mudou foi a leitura de qual elemento e "os filtros" -- e quem resolveu foi
ele, desenhando. */
.abas-bar {
/* solta junto com a lateral, pela mesma razao -- ver o comentario dela */
height: var(--h-abas);
display: flex; align-items: center; justify-content: flex-start;
/* --fundo, e nao `transparent`: a faixa E a pagina, e dizer isso por token
deixa a superficie declarada em vez de herdada por acidente. */
background: var(--fundo);
border-bottom: 0;
padding: 0;
margin-bottom: var(--respiro-tela);
}
/* A FAIXA DE FILTROS CONTINUA TEAL -- e a segunda das duas superficies que o
dono nomeou. Quem carrega a cor agora e `.abas-bar`; `.abas` e so a fileira
de botoes dentro dela. */
/* O CONTROLE SEGMENTADO: a fileira e uma calha rebaixada e a aba ativa e uma
pastilha ELEVADA dentro dela. E a mesma escada de elevacao do resto da folha
-- --log e a superficie rebaixada, --painel a elevada --, aplicada a um
controle em vez de a um cartao. `width: fit-content` porque uma calha que
atravessa a tela inteira para tres palavras vira barra, e nao controle. */
.abas {
display: flex; gap: 4px; padding: 4px; margin: 0;
width: fit-content; max-width: 100%;
background: var(--log);
border: 1px solid var(--painel-borda);
border-radius: var(--radius);
overflow-x: auto;
}
.aba {
background: transparent; border: none; border-radius: var(--radius-sm);
color: var(--dim); /* 5.69:1 sobre --log */
font-family: inherit; font-size: var(--t-sm); font-weight: 600;
padding: 8px 18px; cursor: pointer; white-space: nowrap;
transition: color var(--transicao), background var(--transicao),
box-shadow var(--transicao);
}
/* Os lavados sao do proprio --dim, que e a tinta de repouso da aba -- a mesma
regra da lateral, agora do lado claro da folha. */
.aba:hover { color: var(--texto); background: rgba(72, 100, 107, 0.08); }
/* 0.12, e nao 0.16 como no lado escuro. MEDIDO: sobre a calha clara a camada
de 16% leva a superficie a #D6D7D1 e o rotulo em repouso cai para 4.38:1 --
abaixo do piso. Lavado escuro sobre superficie clara custa contraste; sobre
superficie escura ele devolvia. A porcentagem nao atravessa a virada de
regime de graca. */
.aba:active { background: rgba(72, 100, 107, 0.12); }
/* A pilula ativa: o gradiente da marca, sem halo. O halo era
`rgba(30, 140, 153, 0.45)` -- #1E8C99, o --ok do tema ESCURO, escrito a mao e
sobrevivente da paleta antiga: uma sombra pintada numa cor que nao existe
mais na folha, e a UNICA sombra colorida dela. O comentario de
`.lateral-item[aria-current]`, nesta mesma folha, ja explica por que o halo
teal saiu de la ("vira uma mancha esverdeada"); a regra tinha sido aplicada
num seletor e esquecida no vizinho. */
/* A PASTILHA ATIVA e PAPEL, e nao tinta cheia. Nos mockups a aba escolhida e
branca sobre a calha, e a distincao vem da ELEVACAO -- superficie mais
clara, sombra curta -- em vez de um bloco de cor. Isso tambem afasta a aba
do botao primario, que continua sendo o unico bloco cheio da tela: dois
controles do mesmo peso disputando "clique aqui" foi exatamente o defeito
que a folha ja registra na secao do chip. */
.aba[aria-selected="true"] {
color: var(--texto);
background: var(--painel);
box-shadow: 0 1px 2px rgba(6, 43, 53, 0.14);
}
.aba[aria-selected="true"]:hover { color: var(--texto); background: var(--painel); }
.aba:disabled, .aba[aria-disabled="true"] {
color: var(--dim); background: var(--neutro); /* 4.68:1 */
cursor: not-allowed;
}
/* O QUARTO ELO -- o filtro de loja -- e o kit `.ms` (multi-select do painel
de Fechamento) moravam aqui e sairam com o campo. Nao ha outro filtro nem
outro multi-select no painel; os tokens `--z-filtros` e `--z-ms-painel`
sairam do `:root` junto. A cadeia de sticky voltou a ter tres elos. */
/* ---- O FOCO NAO PODE NASCER DEBAIXO DO MASTHEAD (WCAG 2.2, SC 2.4.11) ----
A cadeia grudada come 144px do topo. Quem chega num controle pelo TAB e
levado ate ele pela rolagem do navegador, que para com o alvo encostado no
topo da viewport -- ou seja, atras do cabecalho. Medido com
`elementFromPoint` no pixel do topo de cada focavel: "Novo post" ficava a
25px e era pintado pelo bloco de sessao; as setas da Semana, idem; as do
Mes ficavam a 68px, debaixo da linha do modo de publicacao.
Isto era declarado num lugar so -- `.editor`, com 160px -- e por isso as
telas novas saiam limpas enquanto o Calendario tinha quatro casos. A guarda
agora e do CONTEUDO inteiro, e a conta e a mesma soma de tokens de que o
`top` de cada elo ja depende. `:where()` para nao subir a especificidade de
nada: e um piso, e qualquer regra propria de um componente continua
vencendo. */
.conteudo :where(a, button, input, select, textarea, [tabindex]) {
scroll-margin-top: calc(var(--h-cabecalho) + var(--h-modo) + var(--h-abas) + var(--e3));
}
/* ========================= CONTEUDO =========================
A goteira lateral saiu: quem a carrega e `.armacao`, uma camada acima, para
a lateral e o conteudo nascerem dentro da MESMA margem.
O RESPIRO DE CIMA saiu daqui e foi para os destinos, um a um. Motivo: a
barra de abas passou a ser filha do Calendario, e um `padding-top` no
<main> abriria uma fresta de 24px ACIMA dela -- por onde a lista rolaria
enquanto a barra estivesse grudada. No Calendario quem da o respiro e a
propria barra (`margin-bottom`); nas outras duas telas, o padding delas. */
.conteudo {
padding: 0 0 var(--e6);
}
#destino-criar, #destino-publicados { padding-top: var(--respiro-tela); }
/* O DISPLAY SERIF, e a folha inteira so o usa aqui e no numeral do dia.
Por que aqui: este h1 e a unica palavra da tela que diz QUE RECORTE DE TEMPO
se esta olhando -- Hoje, Semana, Mes. Tudo em volta e rotulo, dado ou acao, e
rotulo de painel em serif e ruido, nao voz.
`font-weight: 400`: serif de display em 600 fica pastoso nesta escala. O
tamanho ja da a hierarquia; o peso so engrossaria o traco.
O piso de tracking da direcao e -.04em e este fica bem acima dele. */
.painel-aba h1 {
font-family: var(--fonte-titulo);
font-size: var(--t-display);
font-weight: 400;
line-height: 1.02;
letter-spacing: -.015em;
margin: 0 0 var(--e2);
text-wrap: balance;
}
/* Aviso de moldura: continua na Semana e no Mes, que ainda nao existem. Ele
existe pelo mesmo motivo que a raiz nunca devolveu 404 -- um painel que abre
vazio faz quem entra concluir que quebrou. */
.em-obra {
margin: 0; max-width: 62ch; color: var(--dim);
background: var(--painel);
border: 1px solid var(--painel-borda); border-radius: var(--radius);
padding: var(--e4) var(--e5);
}
/* =====================================================================
A ABA HOJE -- "a foto e a linha"
O reflexo desta categoria e uma GRADE DE CARTOES iguais: miniatura,
titulo, badge, tres pontinhos. Esta barrado, e nao por gosto: um cartao
trata o post como um registro de tabela, e quem abre este painel esta
JULGANDO O QUE VAI AO AR. Entao aqui nao ha cartao nenhum -- nem fundo,
nem borda em volta, nem raio. O dia e um LIVRO-RAZAO: uma coluna de
linhas separadas por um fio, e a coluna da esquerda e a HORA, que faz o
dia se ler como linha do tempo em vez de mosaico. A unica massa visual
da linha e a propria foto, que e o que se veio ver.
E as linhas NAO sao iguais entre si -- que e a segunda metade da regra.
O que ja acabou (publicado, cancelado) encolhe a foto: ninguem precisa
julgar de novo o que ja foi ao ar. O que espera decisao fica grande.
A geometria da linha responde a de quem e a vez.
===================================================================== */
/* ---- a cabeca do dia ---- */
.dia-cabeca { margin: 0 0 var(--e5); }
.dia-quando {
display: flex; flex-wrap: wrap; align-items: baseline;
gap: 0 var(--e3); margin: 0;
}
.dia-data {
display: inline-block; /* para o ::first-letter valer */
color: var(--dim); font-size: var(--t-sm);
}
.dia-data::first-letter { text-transform: uppercase; } /* pt-BR devolve "quarta-feira" */
/* Quem abre de Manaus tem outro relogio na parede. O painel diz de qual
relogio ele fala, em vez de deixar a pessoa descobrir por um post que
"sumiu" na virada da meia-noite. Fica colado na data porque as duas coisas
respondem a mesma pergunta: QUANDO e este dia. */
.dia-fuso { color: var(--dim); font-size: var(--t-xs); }
/* O separador vai no ITEM ANTERIOR, nunca como ::before do seguinte: como cada
item e um flex item indivisivel, um ::before viaja com ele para a linha de
baixo e a segunda linha comeca com um ponto orfao. Medido no celular. */
.dia-quando .dia-data:not(:empty)::after { content: " ·"; }
/* A tese do painel escrita em cima da lista: de quem e a vez, hoje. */
.dia-resumo {
display: flex; flex-wrap: wrap; align-items: baseline;
gap: var(--e1) var(--e3);
margin: var(--e3) 0 0; font-size: var(--t-sm);
}
.dia-resumo:empty { display: none; } /* dia vazio nao deixa buraco */
.resumo-parte { color: var(--dim); }
.resumo-parte:not(:last-child)::after { content: " ·"; color: var(--dim); }
.resumo-voce { color: var(--amarelo-log); font-weight: 700; } /* 6.13:1 */
/* ---- a linha ---- */
.lista { min-height: 14rem; }
.post {
--foto-lado: 14rem;
display: grid;
grid-template-columns: 3.5rem auto minmax(0, 1fr);
gap: var(--e4);
align-items: start;
padding: var(--e5) 0;
border-bottom: 1px solid var(--painel-borda);
}
.post:first-child { padding-top: var(--e2); }
/* acabou: a foto encolhe, o texto esfria. Nao ha o que julgar aqui. */
.post[data-turno="fim"] { --foto-lado: 6rem; }
.post-hora { padding-top: 2px; }
.post-hora-valor {
font-size: var(--t-md); font-weight: 600; color: var(--texto);
font-variant-numeric: tabular-nums;
}
.post[data-turno="fim"] .post-hora-valor { color: var(--dim); font-weight: 400; }
.post[data-riscado] .post-hora-valor { text-decoration: line-through; }
/* A altura reservada. `aspect-ratio: 1 / 1` NAO e chute: o backend grava um
derivado 1080x1080 (fotos.LADO, recorte central quadrado), e ha um teste
em pytest que roda o proprio pipeline de imagem e confere que a razao
escrita aqui e a que sai de la. Sem a reserva, a lista salta enquanto as
fotos chegam -- e e assim que o MASTER clica no post errado. */
.post-foto {
width: var(--foto-lado);
aspect-ratio: 1 / 1;
background: var(--campo);
border: 1px solid var(--painel-borda);
border-radius: var(--radius-sm);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.post-foto img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.post-sem-foto {
color: var(--dim); font-size: var(--t-xs); text-align: center; padding: var(--e2);
}
.post-corpo { min-width: 0; }
.post-topo {
display: flex; flex-wrap: wrap; align-items: flex-start;
gap: var(--e2) var(--e3);
margin-bottom: var(--e2);
}
/* O QUE este post e -- e quantas fotos. Texto, e nao pilula: o chip ao lado ja
e a unica forma pilula desta tela, e uma segunda ao lado dele faria o olho
comparar duas coisas que respondem perguntas diferentes (de quem e a vez x o
que vai ao ar). --dim sobre --fundo, 5.68:1 -- o par continua sendo o
mesmo depois da virada de tema; o que mudou foi o valor dos dois lados. */
.post-tipo { color: var(--dim); font-size: var(--t-xs); align-self: center; }
/* QUEM FEZ. Texto tambem, e pela regra escrita logo acima: uma segunda pilula
nesta linha faria o olho comparar autoria com estado, que sao perguntas
diferentes -- e o estado e o que importa primeiro.
`margin-left:auto` joga para a PONTA DIREITA: descendo uma lista de dias, os
nomes ficam alinhados numa coluna e da para varrer "quem fez o que" sem ler
o resto do cartao. Com `flex-wrap` ele cai sozinho para a linha de baixo em
tela estreita, ainda alinhado a direita.
PESSOA em --texto, ROBO em --dim, e a diferenca e de informacao e nao de
enfeite: a rotina cria tres posts por dia e e o fundo da tela; post de
gente e a excecao, e e ela que alguem esta procurando. Sem negrito -- a
distincao de cor ja resolve, e negrito aqui gritaria mais que o chip. */
.post-autor {
color: var(--dim); font-size: var(--t-xs); align-self: center;
margin-left: auto;
}
.post-autor[data-agente="nao"] { color: var(--texto); }
/* A legenda inteira e o que vai ao ar; quem revisa precisa dela, nao de um
resumo. Ela abre NO LUGAR -- sem modal, porque a foto tem de continuar
visivel enquanto se le. */
.post-legenda-caixa { max-width: 68ch; }
.post-legenda {
margin: 0; color: var(--texto);
white-space: pre-wrap; /* a quebra de linha da legenda e conteudo */
overflow-wrap: anywhere; /* hashtag de 60 chars nao estoura a coluna */
}
/* Quatro linhas, e nao tres, porque a legenda real comeca com um gancho e um
paragrafo em branco: com tres, a previa mostrava o gancho e meia frase. */
.post-legenda[data-recolhida="sim"] {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
overflow: hidden;
}
.post-legenda-vazia { color: var(--dim); font-style: italic; }
/* A causa tecnica da falha, numa caixa propria. O que separa
`falha_publicacao` de `recusado` NAO e mais "tem bloco" x "nao tem bloco"
-- o motivo da recusa ganhou o bloco irmao logo abaixo (Task 2b) -- e sim
o PESO do chip (voo x vez, contorno x invertido, maquina x pessoa) e o
contador de tentativas, que so a falha tem. */
.post-causa {
margin: var(--e3) 0 0; max-width: 68ch;
background: var(--log); border-radius: var(--radius-sm);
padding: var(--e2) var(--e3);
font-size: var(--t-xs); color: var(--dim); /* 5.36:1 */
overflow-wrap: anywhere;
}
.post-causa-rotulo { color: var(--vermelho-log); font-weight: 600; } /* 8.63:1 */
/* O motivo que quem recusou escreveu (Task 2b) -- mesma moldura da causa
tecnica acima (e a mesma razao: um bloco que explica o vermelho), com
`white-space: pre-wrap` a mais porque `motivo` e texto livre digitado por
gente e pode trazer quebra de linha que e conteudo, nao acidente -- a
mesma regra que `post-legenda` ja segue. Sem truncar: `motivo` ja chega
cortado em 300 chars da gravacao (store.consumir_token), e cortar nao
deixaria quem vai consertar ler o resto. */
.post-motivo {
margin: var(--e3) 0 0; max-width: 68ch;
background: var(--log); border-radius: var(--radius-sm);
padding: var(--e2) var(--e3);
font-size: var(--t-xs); color: var(--texto); /* 13.30:1 -- e TEXTO DE
GENTE: o que quem recusou escreveu. Estava em --dim, a tinta de rotulo. */
overflow-wrap: anywhere; white-space: pre-wrap;
}
.post-motivo-rotulo { color: var(--vermelho-log); font-weight: 600; } /* 8.63:1 */
/* O proximo passo, em portugues. `recusado` e `falha_publicacao` levam
verbos OPOSTOS aqui de proposito: a cor e a mesma (a direcao manda), e a
acao nao pode ser confundida.
ELA NAO E CINZA. "Ainda nao foi para o grupo -- ninguem viu este post" e a
frase que diz de quem e a vez, que e a assinatura no1 desta folha; ela estava
na mesma tinta secundaria de "Feed · 1 foto". --texto, 14.08:1. */
.post-nota {
margin: var(--e2) 0 0; max-width: 68ch;
color: var(--texto); font-size: var(--t-xs);
}
.post-permalink {
display: inline-block; margin-top: var(--e2);
color: var(--verde-log); font-size: var(--t-xs); font-weight: 600; /* 6.83:1 */
text-decoration: underline; text-underline-offset: 3px;
}
.post-permalink:hover { color: var(--texto); }
/* ---- publicado SEM link do Instagram ----
A frase mais importante do painel: com a trava de publicacao ligada o post
vira `publicado` e NADA foi ao ar. Ela e um AVISO (amarelo), nao um erro
vermelho -- ninguem errou; o sistema esta travado de proposito --, e nao e
uma nota cinza, porque cinza se le como rodape e este e o unico lugar onde o
painel poderia deixar o MASTER acreditar numa publicacao que nao existe. */
.post-alerta {
margin: var(--e3) 0 0; max-width: 72ch;
padding: var(--e2) var(--e3);
/* A caixa usa a TINTA de atencao, a mesma do chip `vez`: as duas dizem a
mesma coisa ("alguem precisa olhar isto") e ficam na mesma tela. A borda e
o token cheio -- no escuro ela era um lavado de 45%, que no claro ESCURECE
o fundo em vez de clarea-lo e da 1.90:1 sobre a caixa. */
background: var(--amarelo-fundo);
border: 1px solid var(--amarelo-log);
border-radius: var(--radius-sm);
font-size: var(--t-sm);
}
.post-alerta-rotulo { color: var(--amarelo-log); font-weight: 700; } /* 5.35:1 */
.post-alerta-texto { color: var(--texto); } /* 12.29:1 */
/* =====================================================================
AS ACOES -- O QUE TIRA O POST DAQUI
Ate a Task 5 o post nascia no painel e nao tinha como sair dele. Este bloco
e o fim do ciclo, e por isso ele fica no PE da linha: depois de olhar a
foto, ler a legenda e ver de quem e a vez, o que resta e o passo seguinte.
Nao ha barra de ferramentas nem tres-pontinhos: os botoes ficam escritos,
com o verbo inteiro. "Enviar para aprovação" e o caminho que o painel
inteiro existe para servir -- esconde-lo atras de um icone seria esconder o
produto. So a acao que EMPURRA o post adiante e teal; Cancelar e contorno
vermelho, e nunca divide o peso visual com ela.
===================================================================== */
.acoes { margin: var(--e4) 0 0; }
.acoes-botoes { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
/* "Vai para o Instagram. E a unica acao que nao da para desfazer." Isto e o
aviso de irreversibilidade do sistema inteiro, e ele estava no mesmo cinza
de "Feed · 1 foto" -- hierarquia invertida. --texto, 14.08:1. */
.acoes-promessa {
margin: var(--e2) 0 0; max-width: 62ch;
color: var(--texto); font-size: var(--t-xs);
}
.acoes-erro { margin-top: var(--e3); max-width: 62ch; }
/* ---- o motivo de um botao DESABILITADO ----
Botao apagado sem explicacao e a forma mais cara de esconder informacao: a
pessoa conclui que o painel quebrou. O motivo fica ESCRITO logo abaixo, na
cor de aviso e nao na cor apagada de `.acoes-promessa` -- ele nao e nota de
rodape, e o que precisa acontecer para o botao voltar a funcionar.
--amarelo-log sobre --fundo e o mesmo par ja usado em `.aviso-box`. */
.acoes-impedimento {
margin: var(--e2) 0 0; max-width: 62ch;
color: var(--amarelo-log); font-size: var(--t-xs);
}
.acoes-impedimento + .acoes-promessa { margin-top: var(--e1); }
/* ---- o aviso de um botao que CONTINUA vivo ----
A janela curta ate a publicacao: o link vence na hora do post, entao mandar
ao grupo tres minutos antes da ao grupo tres minutos. MESMA cor e mesmo
tamanho do impedimento de proposito -- as duas frases falam do mesmo relogio,
e o que as distingue ja esta dito pelo botao logo acima, vivo ou apagado.
Inventar uma terceira cor aqui pediria ao MASTER que aprendesse uma escala de
gravidade em vez de olhar o botao. */
.acoes-aviso {
margin: var(--e2) 0 0; max-width: 62ch;
color: var(--amarelo-log); font-size: var(--t-xs);
}
.acoes-aviso + .acoes-promessa { margin-top: var(--e1); }
/* ---- a confirmacao, NO LUGAR ----
A direcao bane modal como primeiro pensamento e o motivo se mantem aqui:
quem decide cancelar precisa continuar vendo a foto e a legenda que vai
jogar fora. Ela toma o lugar da fileira de botoes -- nao fica ao lado dela,
ou "Cancelar" e "Sim, cancelar" apareceriam juntos na mesma linha. */
.confirmar {
max-width: 62ch;
padding: var(--e3) var(--e4);
background: var(--vermelho-fundo);
border: 1px solid var(--vermelho-log);
border-radius: var(--radius-sm);
}
.confirmar-titulo {
margin: 0 0 var(--e2);
color: var(--vermelho-log); font-weight: 700; /* 6.27:1 sobre a tinta */
}
.confirmar-texto {
margin: 0 0 var(--e3);
color: var(--texto); font-size: var(--t-sm); /* 9.67:1 sobre a tinta */
}
/* O botao que consuma: preenchido, porque agora o gesto e irreversivel -- e e
o UNICO lugar da folha onde o vermelho preenche. Ele mora dentro da caixa de
confirmacao, entao ele nao concorre com chip nenhum: o que esta ao lado dele
e "Voltar", e o que esta acima e a frase que explica o que se perde.
--painel sobre --vermelho-log da 10.20:1. O hover ESCURECE (no escuro ele
clareava): #5E110D, 13.55:1 com o mesmo rotulo. */
.confirmar .btn-perigo {
background: var(--vermelho-log); color: var(--painel);
border-color: var(--vermelho-log);
}
.confirmar .btn-perigo:hover { background: #5E110D; border-color: #5E110D; }
.confirmar .btn-perigo:active { background: var(--vermelho-log); }
/* =====================================================================
O CHIP -- a assinatura deste painel
Ele nao diz o que o post e; diz DE QUEM E A VEZ. A cor vem da direcao
visual e nao se inventa. O que este painel acrescenta e um segundo eixo,
o PESO, e e ele que carrega o sentido:
vez CHEIO (fundo na tinta da cor, rotulo e contorno na cor cheia) --
uma PESSOA travou o post, e a proxima pessoa e voce. E a unica
superficie colorida do painel inteiro;
voo CONTORNO (fundo transparente, so o fio e o rotulo na cor) -- esta
em andamento, gente ou maquina;
sancao contorno grosso --ok + marca -- aprovado, na voz da marca;
fim sem caixa nenhuma -- acabou.
`recusado` (vermelho + vez) e `falha_publicacao` (vermelho + voo) tem a
MESMA cor, como a direcao manda, e silhuetas opostas. Isso importa porque
as acoes sao opostas: um pede edicao do conteudo, o outro pede nova
tentativa. Cor igual + forma igual faria o operador tomar a acao errada.
E quando `aguardando_aprovacao` vence, o chip vira de voo para vez: de
contorno amarelo para amarelo cheio, "Esperando o grupo" para "O link
venceu". Muda de CARATER, nao so de cor -- o modo de falhar deste sistema
inteiro e um link que morreu sem ninguem perceber.
POR QUE O `vez` NAO E MAIS ESCURO (2026-08-16, segunda passada)
A primeira versao clara inverteu o chip para fundo na cor CHEIA (#9C2620,
#7E5104) com rotulo claro. Medido na coluna da Semana, mesma largura, mesmo
raio, mesma fonte: `Recusado pelo grupo` (#9C2620), `O horario passou`
(#7E5104) e o BOTAO `Reenviar ao grupo` (#1B606E) davam 1.09:1 e 1.04:1
entre si -- tres blocos escuros de mesma forma e mesma claridade empilhados
na mesma coluna, dos quais dois dizem o que aconteceu e um diz clique aqui.
O chip so diz de quem e a vez enquanto ele nao parece uma acao. Com a tinta
ele volta a 5.57:1 (amarelo) e 4.38:1 (vermelho) do botao, e volta a ser a
unica coisa colorida por dentro numa tela de superficies neutras.
===================================================================== */
.chip {
display: inline-flex; flex-direction: column; align-items: flex-start;
gap: 1px;
padding: 5px 10px;
border: 1px solid transparent; border-radius: var(--radius-sm);
font-size: var(--t-xs); line-height: 1.3;
max-width: 100%;
}
/* `anywhere` porque o chip e a peca mais estreita do painel e a coluna mais
estreita e a da Semana: "Esperando o grupo" numa coluna de 91px nao tem
onde quebrar entre palavras, e sem isto a palavra saia 5px para fora da
borda arredondada. Quebrar dentro da palavra e feio; texto pintado fora da
propria caixa e ilegivel. */
.chip-rotulo { font-weight: 700; overflow-wrap: anywhere; }
.chip-medida { font-variant-numeric: tabular-nums; }
/* voo -- CONTORNO: fundo transparente, so o fio e o rotulo na cor. Ele era
`background: var(--log)`, e com o `vez` deixando de ser escuro os dois pesos
passariam a ser dois retangulos preenchidos que so diferem de tom. Sem fundo
proprio, a oposicao volta a ser a de sempre -- cheio x vazado -- e ela se le
antes de qualquer cor. */
.chip[data-peso="voo"] { background: transparent; }
/* O contorno do chip carrega o PESO, e peso e estado: a borda e componente, e
nao enfeite. Por isso o neutro sai do fio (--painel-borda, 1.34:1 sobre --log)
e passa para o contorno de controle, e os dois coloridos deixam de ser lavados
e viram o token cheio. Os tres passam os 3:1 de WCAG 1.4.11. */
.chip[data-peso="voo"][data-cor="dim"] {
border-color: var(--campo-borda); color: var(--dim); /* 5.36:1 */
}
.chip[data-peso="voo"][data-cor="amarelo"] {
border-color: var(--amarelo-log); color: var(--amarelo-log); /* 5.79:1 */
}
.chip[data-peso="voo"][data-cor="vermelho"] {
border-color: var(--vermelho-log); color: var(--vermelho-log); /* 9.14:1 */
}
/* vez -- CHEIO. Fundo na TINTA, contorno de 2px e rotulo na cor cheia. O
padding compensa o segundo pixel de borda para a altura nao mudar, como no
`sancao`. E a unica superficie colorida do painel: quando o olho acha cor de
fundo, e porque alguem esta esperando por ele. */
.chip[data-peso="vez"] { border-width: 2px; padding: 4px 9px; }
.chip[data-peso="vez"][data-cor="amarelo"] {
background: var(--amarelo-fundo); border-color: var(--amarelo-log);
color: var(--amarelo-log); /* 5.35:1 */
}
.chip[data-peso="vez"][data-cor="vermelho"] {
background: var(--vermelho-fundo); border-color: var(--vermelho-log);
color: var(--vermelho-log); /* 6.27:1 */
}
/* sancao -- no escuro --ok reprovava para texto (4.02:1 no melhor par) e por
isso ele so podia ser borda e marca. No claro ele passa (6.98:1 sobre --log),
e mesmo assim o rotulo continua em --texto: o desenho do chip nunca foi uma
consequencia do numero, e sim a hierarquia -- a cor de `aprovado` marca a
BORDA, e o que se le e a palavra. O padding compensa a borda de 2px para a
altura nao mudar. */
.chip[data-peso="sancao"] {
background: var(--log); border: 2px solid var(--ok); padding: 4px 9px;
color: var(--texto); /* 13.30:1 */
}
/* As tres silhuetas lado a lado, que e como elas aparecem numa lista:
vez tinta colorida + fio 2px na cor -> CHEIO E QUENTE
voo transparente + fio 1px na cor -> VAZADO
sancao --log (cinza) + fio 2px em --ok -> CHEIO E NEUTRO, com marca
Nenhuma das tres depende da cor para ser reconhecida de longe, e nenhuma
delas se parece com um botao (que e sempre teal cheio, com rotulo branco). */
.chip[data-peso="sancao"] .chip-rotulo::before {
content: ""; display: inline-block;
width: 0.5rem; height: 0.5rem; margin-right: 0.4rem;
border-radius: 2px; background: var(--ok); /* 6.98:1 sobre --log, >=3:1 */
}
/* fim -- sem caixa */
.chip[data-peso="fim"] {
background: transparent; border-color: transparent; padding-left: 0; padding-right: 0;
}
.chip[data-peso="fim"][data-cor="verde"] { color: var(--verde-log); } /* 6.83:1 */
.chip[data-peso="fim"][data-cor="dim"] {
color: var(--dim); text-decoration: line-through; /* 5.68:1 */
}
/* ---- carregando: esqueleto com a MESMA grade da linha real ----
Nunca spinner. Um spinner no meio do conteudo nao reserva altura nenhuma,
e a lista salta quando as fotos chegam. */
.post-esqueleto .post-foto,
.esq-bloco { background: var(--neutro); border-color: transparent; }
.esq-linha {
height: 0.85rem; margin-bottom: var(--e2);
background: var(--neutro); border-radius: var(--radius-sm);
}
.esq-linha-curta { width: 34%; }
.esq-linha-media { width: 62%; }
/* ---- o vazio que ensina ----
"Nenhum post hoje" nao serve para nada. O vazio do dia E a chamada para
criar: diz o que e um post e o que acontece depois que ele sai daqui. */
.vazio { max-width: 58ch; padding: var(--e5) 0; }
.vazio-titulo { margin: 0 0 var(--e2); font-size: var(--t-md); font-weight: 600; }
.vazio-texto { margin: 0 0 var(--e4); color: var(--dim); }
.vazio-nota { margin: var(--e3) 0 0; color: var(--dim); font-size: var(--t-xs); }
/* ---- botao de texto (abrir/recolher a legenda) ---- */
.btn-texto {
background: none; border: 1px solid transparent; padding: 4px 0;
margin-top: var(--e2);
font-family: inherit; font-size: var(--t-xs); font-weight: 600;
color: var(--dim); cursor: pointer;
text-decoration: underline; text-underline-offset: 3px;
transition: color var(--transicao);
}
.btn-texto:hover { color: var(--texto); }
.btn-texto:active { color: var(--dim); }
.btn-texto:disabled {
background: var(--neutro); color: var(--dim); /* 4.59:1, sem opacity */
cursor: not-allowed; text-decoration: none; padding: 4px 8px;
}
/* a caixa de erro da lista tem um botao dentro, e o texto precisa de espaco.
A largura para na medida do texto: uma faixa de 1280px para uma frase de
oito palavras faz o erro parecer um banner, e nao um recado. */
.erro-texto { margin: 0 0 var(--e3); }
#hoje-lista .erro-box { max-width: 62ch; margin-top: 0; }
/* =====================================================================
CRIAR E EDITAR -- O EDITOR DE EDICAO MORA NA LISTA
A direcao bane modal como primeiro pensamento, e aqui o motivo nao e
estilistico: a legenda DESCREVE aquela foto, e o grupo julga as duas
juntas. Um dialogo que cobre a foto para pedir a legenda separa o par que
o produto inteiro existe para manter junto. Entao o editor nasce DENTRO da
lista, no lugar da linha que esta sendo editada -- com a mesma silhueta
dela: foto a esquerda, texto a direita.
CRIAR saiu daqui e virou tela inteira (o bloco "CRIAR POST EM TELA
INTEIRA", mais abaixo). Isso NAO e uma excecao a regra acima -- e a regra
aplicada: criar nao tem foto para manter a vista, ela ainda vai ser
escolhida; editar tem. Os dois layouts usam as MESMAS pecas de formulario,
e por isso tudo o que esta escrito daqui para baixo (o campo, o contador, a
faixa de previas, o erro de campo) vale nos dois -- nao ha duas folhas para
manter em sincronia, so dois arranjos das mesmas pecas.
O editor e a UNICA superficie elevada da aba (fundo --painel sobre a lista
transparente). Isso nao e um card: e um so, existe enquanto se edita, e a
elevacao diz exatamente isto -- esta linha esta em modo de escrita.
CONTRASTE MEDIDO NESTE BLOCO (sobre --painel, o fundo do editor)
--texto 15.72:1 --dim 6.34:1 --amarelo-log 6.85:1 --verde-log 7.63:1
--vermelho-log 10.20:1
AS DUAS REPROVACOES QUE MANDAVAM NO DESENHO DAQUI CAIRAM COM O TEMA CLARO,
e as duas decisoes que elas produziram FICAM -- por outro motivo:
--vermelho-log sobre --painel era 3.95:1 e reprovava; agora da 10.20:1.
Mesmo assim o erro de campo continua com fundo proprio (a tinta, 6.27:1):
um erro precisa de CAIXA, nao so de cor, e uma frase vermelha solta no
meio do formulario e a forma mais barata de nao ser vista.
--painel-borda sobre --painel era 1.49:1 e a borda de repouso de um
<input> nao alcancava os 3:1 de 1.4.11. Agora ha um token para isso:
--campo-borda, 3.92:1 sobre --painel e 3.19:1 sobre o proprio --campo.
O rotulo visivel em TODO campo e o anel de foco em --dim (6.34:1 sobre
--painel) continuam -- eles nunca foram remendo da borda, sao o que
decide para quem navega por teclado.
===================================================================== */
/* ---- a cabeca do dia ganhou a acao primaria ---- */
.dia-linha {
display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--e4); flex-wrap: wrap;
}
.dia-titulos { min-width: 0; }
.dia-nota { margin: var(--e2) 0 0; font-size: var(--t-xs); color: var(--amarelo-log); }
/* ---- o recado do ultimo salvamento ----
Neutro de proposito. Verde de "sucesso" mentiria: "o post voltou a rascunho"
e "o grupo foi acordado de novo" sao consequencias, nao comemoracoes. */
.recado {
margin: 0 0 var(--e4);
padding: var(--e3) var(--e4);
background: var(--log); /* --texto sobre --log 13.30:1 */
border: 1px solid var(--painel-borda);
border-radius: var(--radius-sm);
}
.recado-texto { margin: 0; max-width: 72ch; }
/* O tom nao e enfeite: "publicado, mas sem link do Instagram" e um aviso, nao
uma boa noticia, e um 409 e um erro. A borda muda; o texto continua em
--texto sobre --log (13.30:1), que e onde a legibilidade mora. */
.recado[data-tom="ok"] { border-color: var(--ok); } /* 6.98:1 nao-textual */
.recado[data-tom="aviso"] { border-color: var(--amarelo-log); }
.recado[data-tom="erro"] { border-color: var(--vermelho-log); }
/* ---- o editor ---- */
.editor {
background: var(--painel);
border: 1px solid var(--painel-borda);
border-radius: var(--radius);
padding: var(--e5);
margin: var(--e4) 0;
/* A largura para na medida do texto: a legenda e prosa, e uma linha de 110ch
num monitor de 1440 e desconfortavel de escrever (e de reler antes de
mandar para o grupo). 20rem de foto + 40rem de texto + goteiras. */
max-width: 65rem;
}
.editor:focus-visible { outline: 2px solid var(--dim); outline-offset: 2px; }
.editor-titulo { margin: 0 0 var(--e1); font-size: var(--t-md); font-weight: 600; }
.editor-sub { margin: 0 0 var(--e5); max-width: 72ch; color: var(--dim); }
/* A foto e a legenda lado a lado, do tamanho que cada uma precisa: a foto no
quadrado exato do derivado, o texto no resto. Nao e um formulario de duas
colunas por simetria -- e o par que o post e. */
.editor-grade {
display: grid;
grid-template-columns: minmax(0, 20rem) minmax(0, 40rem);
gap: var(--e5);
align-items: start;
}
.editor-foto { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.editor-campos { min-width: 0; }
/* ---- o TIPO do post: tres opcoes, e cada uma muda o formulario inteiro ----
Radios de verdade, e nao um <select>: sao tres, a escolha e exclusiva, e a
diferenca entre carrossel e story precisa estar LIDA antes da escolha -- um
<select> esconde duas das tres atras de um clique. Nao ha cartao aqui (a
direcao bane grade de cartoes iguais): o que separa uma opcao da outra e o
espaco e o peso do nome, e o unico realce e o do escolhido.
--dim sobre --painel 6.34:1; --texto sobre --painel 15.72:1. */
.tipo-escolha { margin-bottom: var(--e4); }
.tipo-opcoes { display: flex; flex-direction: column; gap: var(--e2); margin-top: var(--e2); }
.tipo-opcao {
display: flex; align-items: flex-start; gap: var(--e3);
padding: var(--e2) var(--e3);
border: 1px solid transparent; border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--transicao), border-color var(--transicao);
}
.tipo-opcao:hover { background: var(--campo); }
/* O escolhido: fundo proprio E borda. Cor sozinha nunca e o unico sinal -- o
radio nativo continua marcado ao lado, e e ele que o leitor de tela anuncia.
A REPROVACAO QUE ESTAVA REGISTRADA AQUI CAIU com o tema claro: --ok sobre
--painel era 2.65:1 e agora e 8.25:1, entao a borda da opcao escolhida passa
os 3:1 de 1.4.11 por conta propria. Ela continua sendo SUPLEMENTAR de
proposito -- quem decide o estado sao o radio nativo e a troca de fundo
(--log sobre --painel) --, so que agora ela tambem se ve. */
.tipo-opcao:has(.tipo-radio:checked) { background: var(--log); border-color: var(--ok); }
/* desabilitado durante o envio: sem opacity, que derruba o contraste de tudo
junto -- o nome perde o --texto e fica em --dim (6.34:1, ainda legivel). */
.tipo-opcao:has(.tipo-radio:disabled) { cursor: not-allowed; }
.tipo-opcao:has(.tipo-radio:disabled) .tipo-nome { color: var(--dim); }
.tipo-opcao:focus-within { outline: 2px solid var(--dim); outline-offset: 2px; }
.tipo-radio { margin: 3px 0 0; flex: none; accent-color: var(--ok); }
.tipo-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tipo-nome { font-weight: 600; color: var(--texto); }
.tipo-ajuda { font-size: var(--t-xs); color: var(--dim); }
/* O tipo na EDICAO: dito, nao oferecido. Ele nao entra em _CAMPOS_EDITAVEIS --
quem quer outro tipo cria outro post. */
.editor-tipo { margin: 0 0 var(--e5); font-size: var(--t-sm); }
.editor-tipo-valor { color: var(--texto); }
.editor-tipo-nota { color: var(--dim); }
/* ---- a FAIXA de previas: a sequencia, e o enquadramento que vai acontecer ----
Uma foto so: a previa ocupa a coluna inteira -- e a silhueta que o editor de
feed ja tem, e ela nao muda um pixel. Varias: uma faixa que se le da esquerda
para a direita, porque a ORDEM e o post (a foto 1 e a capa, a unica que o
grupo do WhatsApp ve).
O enquadramento e o do DERIVADO, e nao um retrato livre: feed e carrossel sao
1080x1080 com recorte central (`object-fit: cover` numa caixa quadrada, que e
exatamente o que `fotos._crop_quadrado` faz); o story e 1080x1920 com a foto
INTEIRA sobre o fundo desfocado dela mesma (`contain` sobre a copia borrada,
que e o que `fotos._ajustar_story` grava). Ha teste em pytest conferindo as
duas razoes contra `fotos.dimensoes_do_tipo`. */
.previas { display: grid; gap: var(--e3); }
.previas[data-quantas="muitas"] {
grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
gap: var(--e4) var(--e3);
}
.previa-item { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
/* `.post-foto` dimensiona por --foto-lado, que so existe dentro de .post: aqui
a largura e a da celula da faixa. */
.previa { width: 100%; }
/* Vazio com afordancia: a propria caixa e o <label> do input de arquivo, entao
o alvo de clique e a area inteira da foto -- que e onde a mao vai primeiro
num formulario cuja unidade e a imagem. O botao abaixo continua sendo o
caminho de teclado, com o anel de foco. */
.previa[data-vazia] { border-style: dashed; }
.previa[data-vazia]:hover { border-color: var(--dim); }
.previa-escolher { cursor: pointer; }
/* o outro lado do botao: a foto inteira, com o que sobra por fora em --log */
.previa[data-inteira="sim"] img { object-fit: contain; background: var(--log); }
/* 9:16 -- a razao do derivado do story. Sem isto a previa mentiria sobre o
enquadramento, e o MASTER so descobriria depois de o grupo aprovar. */
.previa[data-tipo="story"] { aspect-ratio: 1080 / 1920; position: relative; }
.previa-fundo { position: absolute; inset: 0; }
/* o fundo desfocado do story: a MESMA foto em cover, borrada. 14px aqui e o
analogo visual de `fotos.DESFOQUE_FUNDO` (40px sobre 1080) na largura em que
a previa e desenhada; o `scale` cobre a borda transparente que o blur come. */
.previa[data-tipo="story"] .previa-fundo {
object-fit: cover; filter: blur(14px); transform: scale(1.15);
}
.previa[data-tipo="story"] > img + img { position: relative; object-fit: contain; }
/* a ordem, dita em numero e em palavra. A capa leva --amarelo-log (6.85:1
sobre --painel) porque ela e a unica que o grupo ve: as outras N-1 so
existem na pagina de aprovacao. */
.previa-ordem {
margin: 0; display: flex; align-items: baseline; gap: var(--e2);
font-size: var(--t-xs); color: var(--dim); min-width: 0;
}
.previa-numero {
flex: none; min-width: 1.35rem; padding: 1px 5px;
background: var(--log); color: var(--texto); /* 13.30:1 */
border-radius: var(--radius-sm); font-weight: 700; text-align: center;
font-variant-numeric: tabular-nums;
}
.previa-papel { min-width: 0; overflow-wrap: anywhere; }
.previa-item:first-child .previa-papel { color: var(--amarelo-log); }
/* A fileira de acoes cai no PE da celula, e nao logo depois do texto que a
antecede. Medido: o rotulo da capa ("capa -- e a unica que o grupo ve no
WhatsApp") quebra em quatro linhas e empurrava os `< > Remover` da foto 1
para 35px abaixo dos das outras quatro, nas tres larguras. A afordancia que
mais se usa no passo 2 nao tinha linha de base comum. `margin-top: auto`
numa celula de grade que ja estica resolve sem medir nada a mao. */
.previa-acoes {
display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
margin-top: auto;
}
/* Mesmo vocabulario do resto do painel (.btn-texto, com os sete estados e o
desabilitado sem opacity); o que muda e a area de toque, que aqui e alvo de
dedo numa faixa densa. */
.previa-botao { margin-top: 0; min-height: 1.75rem; }
.previa-antes, .previa-depois {
min-width: 1.75rem; font-size: var(--t-md); line-height: 1;
text-decoration: none; text-align: center;
}
.previa-conta { margin: 0; font-size: var(--t-xs); color: var(--dim); }
/* O aviso que a Task 10 nomeia: reordenar E edicao, e edicao mata a aprovacao
viva. --amarelo-log sobre --painel, 6.85:1. */
.previa-aviso { margin: 0; font-size: var(--t-xs); color: var(--amarelo-log); max-width: 46ch; }
.previa-corte { margin: 0; font-size: var(--t-xs); color: var(--dim); }
.editor-foto .btn-texto { align-self: flex-start; margin-top: 0; }
/* Fora do feed a faixa de fotos deixa de ser uma coluna estreita ao lado do
texto: dez previas numeradas em 20rem seriam selos de 5rem, e a sequencia e
o que se veio conferir. O par foto+legenda continua junto -- so passa a ser
vertical, e o feed (a esmagadora maioria dos posts) nao muda nada. */
.editor:not([data-tipo="feed"]) .editor-grade { grid-template-columns: minmax(0, 1fr); }
/* ---- o controle de arquivo ----
Continua sendo um <input type="file"> de verdade: ele so sai de vista (com
a mesma tecnica de .so-leitor, que MANTEM o foco) e o <label> vira o alvo.
Reinventar o controle era o caminho proibido; escondido, ele ainda e o
controle nativo, com teclado, leitor de tela e o seletor do sistema. */
.campo-arquivo { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.arquivo-botao { cursor: pointer; }
/* o anel de foco do input escondido tem de aparecer no botao que o representa */
.campo-arquivo:focus-within .arquivo-botao {
outline: 2px solid var(--dim); outline-offset: 2px;
}
/* ---- campos ---- */
.campo-grupo { border: 0; margin: 0 0 var(--e4); padding: 0; min-width: 0; }
.campo-grupo legend { padding: 0; }
.campo-par { display: flex; gap: var(--e3); flex-wrap: wrap; }
.campo-par .campo { flex: 1 1 9rem; margin-bottom: 0; }
.campo-nota { color: var(--amarelo-log); } /* 6.85:1 sobre --painel */
.textarea {
min-height: 11rem; resize: vertical; line-height: 1.5;
display: block;
}
.input-hora { font-variant-numeric: tabular-nums; }
select.input { cursor: pointer; }
/* ---- o contador ----
Ele nao decora: e o limite do Instagram a vista enquanto se escreve. Muda de
cor duas vezes -- perto do teto e passado o teto --, e passado o teto ganha
fundo proprio. No escuro isso era obrigacao (--vermelho-log sobre --painel
dava 3.95:1); no claro os dois passam, e o fundo fica porque o contador
ESTOURADO deixa de ser uma nota e vira um bloqueio -- ele muda de forma, e
nao so de cor, exatamente como o chip que vence muda de carater. */
.contador { margin: var(--e1) 0 0; font-size: var(--t-xs); color: var(--dim); }
.contador[data-nivel="perto"] { color: var(--amarelo-log); } /* 6.85:1 */
.contador[data-nivel="passou"] {
display: inline-block;
color: var(--vermelho-log); background: var(--vermelho-fundo); /* 6.27:1 */
padding: 3px 8px; border-radius: var(--radius-sm); font-weight: 600;
}
/* ---- erro de campo ----
Cor nunca e o unico sinal: a borda do campo muda (aria-invalid) E a frase
aparece do lado, ligada por aria-describedby. Sobre a tinta, 6.27:1. */
.campo-erro {
margin: var(--e1) 0 0;
max-width: 60ch; /* recado, nao faixa de banner */
padding: 5px 9px;
font-size: var(--t-xs);
color: var(--vermelho-log); background: var(--vermelho-fundo); /* 6.27:1 */
border-radius: var(--radius-sm);
}
/* ---- o aviso que evita o susto ----
Fica visivel o tempo TODO enquanto se edita, e nao num dialogo depois do
clique: quem digita precisa saber o que vai acontecer enquanto decide o que
escrever. --amarelo-log sobre --log, 5.79:1. */
.editor-aviso { max-width: 74ch; margin: 0 0 var(--e5); }
.aviso-titulo { font-weight: 700; }
/* a dica de "o que fazer agora" mora na mesma caixa do erro do servidor: o que
aconteceu em vermelho, o que fazer em voz normal. A voz normal e --texto, e
nao --dim: sobre a tinta vermelha da caixa o --dim daria 3.81:1 -- este e
exatamente o par que uma troca de fundo leva embora sem avisar. 9.67:1. */
.erro-dica { margin: var(--e2) 0 0; color: var(--texto); }
.editor .erro-box { max-width: 74ch; }
.editor .erro-box .btn { margin-top: var(--e3); }
.editor-acoes { display: flex; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e5); }
/* =====================================================================
CRIAR POST EM TELA INTEIRA -- e a unica numeracao permitida no painel
Ate aqui criar era um formulario embutido na linha do dia. Ele saiu de la
por uma razao que nao e espaco: criar e uma SEQUENCIA REAL, e o passo 1
RESTRINGE o passo 2 -- o tipo escolhido decide quantas fotos o formulario
aceita (1 no feed, 2 a 10 no carrossel, 1 a 10 no story) e em que
enquadramento elas vao ao ar (1:1 ou 9:16). Dentro de uma linha de lista
essa dependencia ficava implicita, e quem escolhia story depois de subir as
fotos so descobria o 9:16 na previa redesenhada.
E POR ISSO A NUMERACAO EXISTE AQUI, E SO AQUI. A regra da casa bane
"marcador numerado 01/02/03 como andaime", e a palavra que importa e
ANDAIME: numero que so serve para fingir ordem onde a ordem nao existe. Aqui
a ordem existe e e obrigatoria. Por isso tambem o marcador e "1", e nao
"01" -- o zero a esquerda e o traco decorativo do andaime, nao da sequencia.
Nenhuma outra tela do painel ganhou numero, e nenhuma pode ganhar.
A EDICAO NAO MUDOU DE LUGAR: ela continua acontecendo dentro da lista, com
a foto a vista, porque la a legenda descreve AQUELA foto. Criar nao tem foto
para manter a vista -- ela ainda vai ser escolhida --, e e essa diferenca
que autoriza a tela inteira num caso e a proibe no outro.
CONTRASTE: nada novo. O cartao do passo e --painel (ja auditado: --texto
15.72:1, --dim 6.34:1) e o numero e o mesmo par de `.previa-numero`,
que ja vive sobre --painel desde a Task 10: --texto sobre --log, 13.30:1.
===================================================================== */
.editor[data-layout="tela"] {
background: transparent; border: 0; border-radius: 0;
padding: 0; margin: 0;
/* O CARTAO TEM A LARGURA DA COISA MAIS LARGA QUE ELE PODE CONTER, e nada
alem disso. Ele estava em 54rem (864px) enquanto `.editor-campos` para em
40rem: 200px de cartao vazio a direita, em CADA um dos quatro -- a pilula
"Feed" morria em x=960 e a borda seguia ate x=1160. Largura que existe
para o cartao parecer substancial e o retangulo mandando no conteudo, que
e o avesso do registro product. 40rem de conteudo + os dois paddings + as
duas bordas: o cartao para exatamente onde o conteudo para. */
max-width: calc(40rem + 2 * var(--e5) + 2px);
}
/* A prosa continua sendo prosa: 40rem e a MESMA medida da coluna de texto do
editor de linha (`minmax(0, 40rem)`), e ela nao muda porque a tela ficou
maior -- uma legenda de 110ch e desconfortavel de escrever (e de reler antes
de mandar ao grupo) em qualquer layout. */
.editor[data-layout="tela"] .editor-campos { max-width: 40rem; }
/* Dia e hora sao dois campos curtos: esticados a 40rem eles viram duas caixas
de 320px para escrever "15/08/2026" e "14:30", e o tamanho da caixa passa a
mentir sobre o tamanho do dado. */
.editor[data-layout="tela"] .campo-par { max-width: 26rem; }
.editor[data-layout="tela"] .editor-sub {
margin: 0 0 var(--e5); font-size: var(--t-sm);
}
.editor[data-layout="tela"] .editor-grade {
display: flex; flex-direction: column; gap: var(--e4);
/* `align-items: start` vem do `.editor-grade` de cima, onde ele e a coisa
certa: numa GRADE de duas colunas ele impede a coluna curta de esticar ate
a altura da longa. Numa COLUNA flex ele muda de eixo e vira largura: os
quatro cartoes encolhiam para o tamanho do proprio texto e a tela virava
uma escada de retangulos de larguras diferentes. Visto na captura antes de
virar codigo. */
align-items: stretch;
/* O respiro entre cartoes e o MESMO de dentro deles (24px). Estava em 16px
contra 24px de padding: dois espacos parecidos e diferentes na mesma
tela, que e como um ritmo se le como descuido em vez de como intencao. */
gap: var(--e5);
/* A GOTEIRA DO MARCADOR. Ver o comentario de `.passo-numero` logo abaixo: o
numero sai de dentro do cartao e vira o marcador de uma sequencia, na
margem. 2.75rem e a largura do marcador (1.75rem) mais o respiro. */
padding-left: 2.75rem;
}
/* A previa de UMA foto para em 22rem, e nao na largura do cartao: 1:1 num
cartao de 1024px e um quadrado de mil pixels de altura -- o formulario
comecaria com uma tela inteira de nada antes do primeiro campo. A faixa de
VARIAS continua ocupando a largura toda, porque ali a largura e o que deixa
a sequencia caber lado a lado, que e o que se veio conferir. */
.editor[data-layout="tela"] .previas:not([data-quantas="muitas"]) { max-width: 22rem; }
/* O CARTAO DO PASSO -- e por que quatro deles nao sao a "grade de cartoes
identicos" que a regra da casa bane.
A critica anti-default mediu e acusou: quatro `.passo` na mesma largura, com
o mesmo fundo, a mesma borda, o mesmo raio e o mesmo padding, cada um com
marcador + <h2> + paragrafo. Isso E a forma do ban. O que a regra bane, no
entanto, e o USO: uma GRADE de cartoes intercambiaveis, cada um com um icone
decorativo, um titulo e um paragrafo, posta no lugar de conteudo. Aqui os
quatro sao SECOES DE UM FORMULARIO em sequencia obrigatoria -- o passo 1
restringe o passo 2 --, o conteudo de cada um e diferente (tres radios, uma
faixa de fotos, um textarea com contador, dois campos curtos), nao ha icone
nenhum, e o dono pediu explicitamente a composicao em cartoes da referencia.
O que MUDOU para a forma parar de se ler como grade: o marcador saiu de
dentro do cartao e foi para a margem esquerda, onde os quatro se alinham numa
coluna. Quatro cartoes com um numero dentro sao quatro cartoes; quatro
cartoes com o numero FORA, alinhados, sao uma sequencia numerada -- que e o
que eles de fato sao, e a unica coisa do painel que pode ser numerada. */
.passo {
position: relative;
background: var(--painel);
border: 1px solid var(--painel-borda);
border-radius: var(--radius);
padding: var(--e5);
}
/* UM EIXO SO DENTRO DO CARTAO. A cabeca era um flex de duas colunas (marca |
titulos), e o efeito medido era este:
.passo x=296
numero x=321 legenda do fieldset x=321 textarea x=321
titulo x=359 ajuda x=359
o titulo pendurado 38px a direita de TUDO que vem abaixo dele, porque so
ele era indentado pelo marcador. Agora o numero e o primeiro pedaco INLINE
do proprio <h2>: ele comeca no eixo do cartao, o titulo continua a mesma
linha, e a ajuda e o corpo caem no mesmo x. */
.passo-cabeca {
margin-bottom: var(--e3);
}
/* O numero e o MESMO desenho da ordem da foto na faixa de previas (mesmo
fundo, mesmo peso, mesma tabular): as duas coisas sao sequencia, e uma
segunda forma de numerar na mesma tela faria o olho perguntar se elas
contam a mesma coisa. Em linha ele continua sendo o primeiro pedaco do
proprio <h2> -- e assim que ele se comporta no celular, onde nao ha margem
para gastar. */
.passo-numero {
display: inline-block; min-width: 1.6rem;
margin-right: var(--e2);
padding: 2px 6px;
background: var(--log); color: var(--texto); /* 13.30:1 */
border-radius: var(--radius-sm);
font-size: var(--t-sm); font-weight: 700; text-align: center;
font-variant-numeric: tabular-nums;
}
/* NA TELA INTEIRA ele vira o MARCADOR DA SEQUENCIA, na margem. Ele sai do
cartao (`position: absolute` contra o `.passo`, que por isso e `relative`) e
os quatro passam a cair na mesma coluna de 1.75rem a esquerda das quatro
caixas. O <h2> volta a comecar no mesmo x do resto do cartao. */
.editor[data-layout="tela"] .passo-numero {
position: absolute;
left: -2.5rem; top: var(--e5);
min-width: 1.75rem; width: 1.75rem;
margin-right: 0;
padding: 3px 0;
line-height: 1.3;
}
.passo-titulo { margin: 0; font-size: var(--t-md); font-weight: 600; }
/* A ajuda so existe quando ela tem o que dizer. Ela nasceu como "o que este
passo decide sobre o SEGUINTE" e isso era verdade em 2 dos 4 -- no passo 3
ela dizia "O texto que acompanha a foto no Instagram", que e o titulo do
passo de novo, para um MASTER que escreve legenda todo dia. Slot de
subtitulo aberto pelo cartao e preenchido com qualquer coisa e a assinatura
do desenho dirigido por template; os quatro textos foram reescritos para
dizer uma restricao real ou nao aparecer. */
.passo-ajuda { margin: var(--e1) 0 0; max-width: 68ch; color: var(--dim); font-size: var(--t-xs); }
/* O corpo do passo NAO ganhou classe propria: ele E `.editor-foto` ou
`.editor-campos`, os mesmos dois contineres que o editor de linha ja usa. E
por isso que a faixa de previas, o contador da legenda e o erro de campo se
comportam identicamente nos dois layouts -- ha um desenho de formulario, e
nao dois que precisam ser mantidos em sincronia. O que muda e o arranjo:
duas colunas na linha do dia, quatro cartoes empilhados na tela inteira.
Dentro do cartao, o ultimo campo nao precisa da margem que separa campos. */
.passo .editor-campos > :last-child { margin-bottom: 0; }
/* As acoes fecham a tela, e nao um cartao: elas valem para os quatro passos
juntos. Fio em cima, do mesmo tom dos fios da lista do dia. */
.editor[data-layout="tela"] .editor-acoes {
margin-top: var(--e5); padding-top: var(--e5);
border-top: 1px solid var(--painel-borda);
}
.editor[data-layout="tela"] .erro-box { max-width: 74ch; margin-top: var(--e4); }
/* =====================================================================
PUBLICADOS -- o historico do que ja foi ao ar
Mesma linha de livro-razao das outras telas: o post continua sendo a foto.
O que muda e o eixo do agrupamento -- por DIA, do mais recente para o mais
antigo, que e a ordem em que se procura "o que a gente postou". A linha ja
nasce comprimida sozinha (`data-turno="fim"` encolhe a foto), porque nao ha
nada a julgar num post que ja esta no ar -- e essa e a mesma regra da aba
Hoje, nao uma segunda regra escrita para esta tela.
===================================================================== */
.publicados-dia {
margin: var(--e5) 0 0;
padding-bottom: var(--e2);
border-bottom: 1px solid var(--painel-borda);
font-size: var(--t-sm); font-weight: 600; color: var(--dim); /* 5.68:1 */
}
.publicados-dia:first-child { margin-top: 0; }
.publicados-mais { margin-top: var(--e5); }
/* A janela e finita de proposito: pedir "tudo" a uma rota que so conhece `de`
e `ate` seria pedir o banco inteiro para mostrar as dez primeiras linhas. O
texto ao lado do botao diz ATE ONDE a tela ja olhou, para ninguem concluir
que um post sumiu quando ele so esta fora da janela. */
.publicados-nota { margin: var(--e2) 0 0; max-width: 62ch; color: var(--dim); font-size: var(--t-xs); }
/* ---- A FOTO NO HISTORICO ----
`data-turno="fim"` encolhe a foto para 6rem em toda a casa, e no Calendario
isso e a regra certa: ao lado de um post que espera decisao, o que ja
acabou nao precisa ser julgado de novo. Em PUBLICADOS nao ha nada ao lado
-- todas as linhas acabaram --, entao a regra deixa de discriminar e passa
a so encolher. Medido: 94px em 1440 e 78px em 390, numa tela onde a foto e
a unica coisa que se veio olhar. Aqui ela volta ao tamanho da linha viva.
E O CHIP SAI. Medido nas oito linhas do historico: `chips: ['No ar']` -- um
valor unico, repetido oito vezes, na posicao mais forte do corpo. O chip
desta casa diz DE QUEM E A VEZ; nesta tela, por definicao, nao e a vez de
ninguem, e o titulo "Publicados" ja disse isso uma vez. Repetir a mesma
palavra por linha nao e informacao, e ruido com cor quente. */
#destino-publicados .post { --foto-lado: 14rem; }
#destino-publicados .chip { display: none; }
/* ---- a acao da linha ---- */
.post-editar { margin-top: var(--e3); }
/* ========================== BOTOES ==========================
Um vocabulario so, com os sete estados: repouso, hover, foco, ativo,
desabilitado, carregando e erro (o erro do botao mora na caixa .erro-box
que ele revela, nao no proprio botao). */
.btn {
font-family: inherit; font-size: var(--t-sm); font-weight: 600;
line-height: 1.2;
padding: 10px 16px;
border-radius: var(--radius-sm);
border: 1px solid transparent;
cursor: pointer;
transition: background var(--transicao), border-color var(--transicao),
color var(--transicao);
}
.btn-pequeno { padding: 7px 12px; font-size: var(--t-xs); }
.btn-bloco { display: block; width: 100%; }
.btn-marca { background: var(--marca); color: #ffffff; border-color: var(--marca); }
.btn-marca:hover { background: var(--marca-hover); border-color: var(--marca-hover); }
.btn-marca:active { background: var(--marca); }
/* A borda dele deixou de ser o FIO e passou a ser o contorno de controle: um
botao de contorno cuja borda da 1.42:1 contra a pagina e um botao que so se
ve pelo texto. --campo-borda da 3.51:1 sobre --fundo.
E O ROTULO DELE DEIXOU DE SER --dim. Medida a tela de Hoje inteira: 1664 dos
2040 caracteres visiveis do conteudo (81,6%) estavam na tinta secundaria --
e quando oito de cada dez caracteres sao secundarios, nada e primario. Um
botao e uma ACAO, nao uma nota de rodape; ele volta para --texto (15.72:1) e
o cinza fica para o que e mesmo secundario (a ajuda da lateral, o fuso, o
tipo do post). O hover e o :active ja usavam --texto. */
.btn-neutro { background: transparent; color: var(--texto); border-color: var(--campo-borda); }
.btn-neutro:hover { background: var(--neutro); color: var(--texto); }
/* O :active PRECISA declarar a cor junto do fundo. No escuro ele so trocava o
fundo porque o hover ja tinha promovido o texto para --texto -- e no dedo nao
ha hover: o :active aparece sozinho, com o --dim de repouso, e --dim sobre
--painel-borda da 4.01:1, que reprova. Com --texto da 9.94:1. */
.btn-neutro:active { background: var(--painel-borda); color: var(--texto); }
/* A terceira variante, destrutiva. ELA MORA AQUI, junto das outras, e nao la
em cima com o resto do bloco de acoes: `.btn` declara `border: 1px solid
transparent` e tem a MESMA especificidade, entao quem vier depois no arquivo
ganha o `border-color`. Com `.btn-perigo` escrito antes de `.btn`, o botao
Cancelar renderizava sem borda nenhuma -- texto vermelho solto onde devia
haver um botao. Achado do checklist visual desta tarefa, num recorte 2x.
Contorno, nao preenchimento: --vermelho-log sobre --fundo da 9.14:1 e passa
para texto de corpo (sobre --campo, o fundo da coluna de hoje na Semana,
8.30:1 -- tambem passa). O preenchido fica reservado para a CONFIRMACAO,
onde o gesto ja e irreversivel.
AS CAMADAS SAO DO PROPRIO VERMELHO, e a conta decide o tamanho delas. No
escuro um lavado da cor CLAREAVA o fundo e afastava o rotulo dele; no claro o
mesmo lavado ESCURECE o fundo e aproxima os dois. Com o #9C2620 da primeira
versao clara, 12%/20% derrubavam o pressionado sobre --campo (a coluna de
HOJE da Semana, o fundo mais escuro em que este botao aparece) para 4.06:1, e
as camadas tiveram de encolher para 8%/16%. Com --vermelho-log em #801813 ha
folga de novo: 10%/20% dao hover 6.95:1 e pressionado 5.75:1 sobre --campo
(7.63 e 6.29 sobre a pagina), e o pressionado -- que no dedo aparece SOZINHO,
sem hover por baixo -- volta a se ver como pressionado. A borda tambem nao e
lavado (55% de vermelho sobre --fundo dava 2.57:1, abaixo dos 3:1 de 1.4.11):
e o token cheio, 9.14:1. */
.btn-perigo {
background: transparent; color: var(--vermelho-log);
border-color: var(--vermelho-log);
}
.btn-perigo:hover {
background: rgba(128, 24, 19, 0.10);
border-color: var(--vermelho-log);
}
.btn-perigo:active { background: rgba(128, 24, 19, 0.20); }
/* desabilitado sem opacity: opacity derruba o contraste de tudo junto e vira um
estado ilegivel. --dim sobre --neutro da 4.59:1, entao continua legivel -- e
continua sendo a folga mais fina do painel, agora como era antes. */
.btn:disabled {
background: var(--neutro); color: var(--dim); border-color: var(--painel-borda);
cursor: not-allowed;
}
.btn[aria-busy="true"] { cursor: progress; }
/* ===================== CAIXAS DE MENSAGEM =====================
O fundo --log continua, mas por outro motivo. No escuro ele era obrigatorio:
--vermelho-log sobre --painel dava 3.95:1 e reprovava, e so sobre --log o erro
se lia. No claro os dois passam (10.20:1 sobre --painel, 8.63:1 sobre --log), e
o fundo proprio fica porque uma CAIXA precisa de caixa -- um recado sem
superficie propria vira um paragrafo vermelho no meio do formulario.
As bordas deixaram de ser lavados da cor: 45% de #9C2620 sobre --log dava
2.09:1. O token cheio da 8.63:1, e a caixa volta a ter contorno.
E O FUNDO DELAS PASSOU A SER A TINTA DA PROPRIA COR. --log e a superficie
REBAIXADA do painel, e ela ja carrega a caixa neutra (`.recado`, `.post-causa`,
`.post-motivo`): tres caixas com o mesmo fundo cinza, uma delas dizendo que
deu errado. Com a tinta, o erro e o aviso passam a ter superficie propria --
a mesma dos dois chips de "e a sua vez", que e a familia a que eles
pertencem. Fundo neutro fica para o que e neutro. */
.erro-box, .aviso-box {
margin: var(--e4) 0 0;
padding: var(--e3) var(--e4);
border-radius: var(--radius-sm);
font-size: var(--t-sm);
}
.erro-box {
color: var(--vermelho-log); background: var(--vermelho-fundo); /* 6.27:1 */
border: 1px solid var(--vermelho-log);
}
.aviso-box {
color: var(--amarelo-log); background: var(--amarelo-fundo); /* 5.35:1 */
border: 1px solid var(--amarelo-log);
}
/* ========================== ENTRAR ==========================
Tela de login. Uma coluna centrada, sem video e sem split-screen.
ELA GANHOU A ARTE DA MARCA em 24/08/2026, por pedido do dono -- e este
comentario dizia o contrario ("nao e uma peca de marca"), entao ele mudou
junto. O que continua valendo da decisao antiga e a FORMA: uma coluna
centrada, sem split-screen. O que mudou e o fundo atras dela.
O CARTAO NAO FICOU TRANSPARENTE. A arte e cheia -- iPhone, PS5, JBL,
grafite -- e um cartao de vidro por cima dela poria texto de formulario
sobre desenho, que e onde legibilidade morre. O cartao segue opaco
(`--painel`), e o contraste dele com o fundo escuro so aumentou.
A CAMADA ESCURA sobre a imagem (o `linear-gradient` na frente) nao e
enfeite: ela e o que impede a arte de disputar atencao com o unico
objetivo desta tela, que e entrar.
Ela comecou em 78% no centro e FICOU CLARA DEMAIS -- pesada demais, na
verdade: a arte sumia, e a arte e o motivo do pedido. Medida a olho na
captura e refeita para 58% no centro, 26% nas bordas. O cartao e opaco,
entao a legibilidade nunca dependeu dessa camada; ela so decide quanto da
arte aparece.
===================================================================== */
body.tela-entrar {
display: grid; place-items: center;
padding: var(--e5);
background-color: var(--texto);
background-image:
radial-gradient(ellipse at center,
rgba(9, 22, 26, 0.58) 0%,
rgba(9, 22, 26, 0.38) 45%,
rgba(9, 22, 26, 0.26) 100%),
url("/fundo-login.webp");
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
/* `fixed` de fora de proposito: no iOS ele custa repintura a cada rolagem
e o ganho seria zero numa tela que nao rola. */
min-height: 100vh;
}
.entrar-cartao {
width: 100%; max-width: 24rem;
background: var(--painel);
border: 1px solid var(--painel-borda);
border-radius: var(--radius);
padding: var(--e6) var(--e5);
}
.entrar-marca { display: flex; justify-content: center; margin-bottom: var(--e5); }
.entrar-titulo { font-size: var(--t-lg); font-weight: 600; margin: 0 0 var(--e1); }
.entrar-sub { font-size: var(--t-sm); color: var(--dim); margin: 0 0 var(--e5); }
/* A faixa do `?expirou=1`. Sobe para antes do formulario (o `.aviso-box` base
tem margem SUPERIOR, porque nasceu embaixo dos campos do editor) e ganha o
mesmo respiro do `.editor-aviso`. */
.entrar-aviso { margin: 0 0 var(--e5); text-align: left; }
.campo { display: block; margin-bottom: var(--e4); }
.campo-rotulo {
display: block; font-size: var(--t-xs); font-weight: 600;
color: var(--dim); margin-bottom: var(--e1);
}
/* A BORDA DO CAMPO E O CONSERTO QUE ESTE TEMA TROUXE. Ficava registrado nesta
folha, desde a tela de login, que a borda de repouso de um <input> nao
alcancava os 3:1 de WCAG 1.4.11 no escuro (--painel-borda sobre --painel
1.49:1; o melhor token disponivel dava 2.65:1) e que a mitigacao era rotulo
visivel em todo campo mais o anel de foco. No claro ha para onde ir sem
inventar cor de marca: --campo-borda da 3.92:1 sobre --painel (o cartao do
passo e o do login), 3.51:1 sobre --fundo e 3.19:1 sobre o proprio --campo.
O rotulo visivel e o anel de foco continuam -- eles nunca foram so remendo. */
.input {
width: 100%;
font-family: inherit; font-size: var(--t-sm);
color: var(--texto);
background: var(--campo);
border: 1px solid var(--campo-borda);
border-radius: var(--radius-sm);
padding: 10px 12px;
transition: border-color var(--transicao);
}
/* placeholder tambem passa em 4.5:1 (--dim sobre --campo, 5.16:1). Cinza claro
"por elegancia" e o defeito de legibilidade mais comum que existe -- e num
tema claro ele e mais tentador ainda. Ha pytest que mede este par. */
.input::placeholder { color: var(--dim); opacity: 1; }
/* No escuro o hover CLAREAVA a borda (--neutro). No claro clarear e apagar: o
hover escurece, para --dim (6.34:1 sobre --painel). */
.input:hover { border-color: var(--dim); }
.input:focus { border-color: var(--marca); }
.input:disabled { background: var(--neutro); color: var(--dim); cursor: not-allowed; }
/* erro do campo: a borda muda, e a caixa .erro-box diz o que aconteceu. Cor
sozinha nao pode ser o unico sinal -- por isso as duas coisas juntas. */
.input[aria-invalid="true"] { border-color: var(--vermelho-log); }
.input[aria-invalid="true"]:focus { border-color: var(--vermelho-log); }
.input-codigo { letter-spacing: 0.35em; font-variant-numeric: tabular-nums; }
.campo-apoio { font-size: var(--t-xs); color: var(--dim); margin: var(--e1) 0 0; }
/* =====================================================================
SEMANA E MES
CONTRASTE MEDIDO NESTA SECAO (mesma formula do topo da folha)
O calendario e onde o contraste NAO-TEXTUAL decide o desenho, porque a
marca do mes e uma forma de meio centimetro colorida por estado -- WCAG
1.4.11 pede 3:1, e a paleta tem uma cor que reprova em quase todo fundo.
sobre --log (#E7EDEF) ok 6.98 | verde 6.45 | amarelo 5.79 | vermelho 8.63 | dim 5.36
sobre --campo (#DDEAEE) ok 6.71 | verde 6.20 | amarelo 5.57 | vermelho 8.30 | dim 5.16
sobre --fundo (#EFF3F5) ok 7.39 | verde 6.83 | amarelo 6.13 | vermelho 9.14 | dim 5.68
sobre --painel (#FFFFFF) ok 8.25 | verde 7.63 | amarelo 6.85 | vermelho 10.20 | dim 6.34
sobre --neutro (#D3DDE0) ok 5.97 | verde 5.52 | amarelo 4.95 | vermelho 7.38 | dim 4.59
A CELULA DO MES CONTINUA NAO SENDO `--painel`, e agora por outra razao. No
escuro a razao era aritmetica: `aprovado` e `--ok` pela direcao visual e
`--ok` sobre `--painel` dava 2.65:1 -- uma marca de post aprovado seria uma
mancha que quase nao se ve. No claro os cinco tons passam em TODA superficie
(a menor da tabela e 4.59:1), entao a escolha deixou de ser forcada e passa a
ser hierarquia: o mes e uma FOLHA continua de 42 celulas, e uma folha inteira
em branco puro apagaria a diferenca entre "dentro do mes" e "fora do mes",
que e o unico contraste de fundo que esta grade carrega. --neutro continua so
como fundo de esqueleto, onde nao ha dado nenhum para ler.
E o hover NAO troca o fundo: nao ha um quarto fundo que passe nas cinco
cores, entao o hover e um anel interno em `--dim` (>= 7:1 nos tres fundos).
Mudar o fundo no hover teria derrubado a marca justamente na celula que a
pessoa esta olhando.
TEXTO dentro da marca (quando ela conta posts) muda de regra -- 4.5:1, nao
3:1. Medidos: --amarelo-log sobre --amarelo-fundo 5.35 e --vermelho-log
sobre --vermelho-fundo 6.27 (marca `vez`, com a tinta, como o chip);
--amarelo-log/--vermelho-log/--dim sobre os tres fundos >= 5.16. `--ok` continua NAO escrevendo numero: a marca
`sancao` leva o numero em --texto e o --ok fica na borda. No claro isso
deixou de ser obrigacao (--ok passa 6.71:1 em todo fundo de celula) e virou
consistencia -- a mesma decisao ja registrada no topo desta folha para o
chip, e trocar so aqui faria a mesma cor querer dizer duas coisas.
O BAN QUE MAIS AMEACA ESTA TELA e "grade de cards identicos", e um mes e o
lugar onde ele escorrega sozinho: 42 retangulos com raio, sombra e a mesma
altura. Entao as celulas NAO sao cards -- sao celulas: `border-collapse`, fio
de 1px compartilhado, zero raio, zero sombra. O que da textura a grade e o
DADO: a celula com algo esperando por voce clareia, a de outro mes escurece,
e a altura da linha cresce com o que ha nela.
===================================================================== */
/* ---- a navegacao do periodo ---- */
.periodo-nav { display: flex; gap: var(--e2); flex-wrap: wrap; flex: none; }
/* O aviso de post sem data legivel: ele nao tem celula, e sumir em silencio
seria o defeito. Aparece logo abaixo da grade, com a contagem. */
.periodo-aviso {
margin: var(--e3) 0 0; max-width: 62ch;
color: var(--amarelo-log); /* 6.13:1 sobre --fundo */
font-size: var(--t-xs);
}
/* =====================================================================
A SEMANA -- a peca do dia aberto em cima, os sete dias embaixo
---------------------------------------------------------------------
Ate 21/08/2026 esta tela era sete colunas de posts. Nao mostrava peca: uma
foto de 100px nao e uma peca, e a peca e o produto desta tela. O dono cortou
a duplicidade -- "embaixo vai aparecer apenas os dias e quantas publicacoes
tem no dia e status, assim como fica o mes".
Entao a tira embaixo e NAVEGACAO, e fala o vocabulario do Mes: uma marca por
post, o total a direita, e o mesmo amarelo para "esperando por voce". O mesmo
dia se le igual nas duas telas -- que e o unico jeito de a marca significar
alguma coisa.
===================================================================== */
.semana-grade {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
}
/* A celula da semana E a celula do mes, com o nome do dia no lugar do nome do
mes -- mesma grade de 3 colunas x 2 linhas, para `.mes-marcas` (que vem do
MESMO montador) cair na linha 2 nas duas telas sem regra propria. */
.semana-dia {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-rows: auto minmax(0, 1fr);
gap: 3px var(--e1);
align-content: start;
width: 100%; min-height: 4.75rem;
padding: var(--e2) var(--e2) var(--e3);
background: var(--log);
border: 0; border-left: 1px solid var(--painel-borda); border-radius: 0;
font-family: inherit; font-size: var(--t-xs); color: var(--texto);
text-align: left; cursor: pointer;
transition: box-shadow var(--transicao);
}
.semana-dia:first-child { border-left: none; }
.semana-dia[data-vez="sim"] { background: var(--campo); }
.semana-dia:hover { box-shadow: inset 0 0 0 1px var(--dim); }
.semana-dia:active { box-shadow: inset 0 0 0 2px var(--dim); }
.semana-dia:focus-visible { outline: 2px solid var(--dim); outline-offset: -3px; }
.semana-dia-nome {
grid-column: 1; grid-row: 1;
color: var(--dim); font-size: var(--t-xs); font-weight: 600;
text-transform: uppercase; letter-spacing: 0.02em;
}
.semana-dia-num {
grid-column: 2; grid-row: 1;
color: var(--texto); font-size: var(--t-sm); font-weight: 600; line-height: 1.2;
}
/* hoje: a MESMA pilula teal da celula do mes. #fff sobre --marca = 7.13:1 */
.semana-dia[data-hoje] .semana-dia-num {
background: var(--marca); color: #ffffff;
border-radius: 999px; padding: 0 7px;
justify-self: start;
}
.semana-dia-total {
grid-column: 3; grid-row: 1; justify-self: end; align-self: center;
color: var(--dim); font-size: var(--t-xs);
}
.semana-dia[data-vez="sim"] .semana-dia-total { color: var(--amarelo-log); font-weight: 700; }
/* dia sem post continua clicavel (e o caminho de volta), so mais quieto */
.semana-dia[data-vazio="sim"] .semana-dia-num { color: var(--dim); font-weight: 400; }
.semana-dia-esqueleto {
grid-column: 1 / -1; grid-row: 2;
height: 0.55rem; width: 55%; align-self: start;
background: var(--neutro); border-radius: 2px;
}
/* ---- O DIA ABERTO, nas DUAS telas ----
Anel teal, cheio, por dentro. Nao pode ser `--campo` (esse fundo ja quer
dizer "esperando por voce") nem `--dim` (esse anel ja e hover e foco): seriam
tres coisas diferentes com a mesma cara. O teal ja e o acento do kit -- e a
pilula de hoje -- entao nao entra cor nova na folha. */
.semana-dia[data-aberto="sim"] { box-shadow: inset 0 0 0 2px var(--marca); }
.mes-dia[data-aberto="sim"] { box-shadow: inset 0 0 0 2px var(--marca); }
/* ---- A VITRINE HOSPEDADA na Semana e no Mes ---- */
.vitrine-hospede { margin: 0 0 var(--e4); }
.vitrine-hospede:empty { display: none; }
/* A MESMA ALTURA DA VITRINE CHEIA. Sem isto ela nascia com ~95px contra os
~470px da peca, e clicar num dia sem post fazia a tira dos sete SALTAR 375px
para cima -- e voltar ao clicar no dia seguinte. A fileira que a pessoa esta
usando para escolher nao pode se mexer debaixo do dedo dela. E a mesma razao
do esqueleto, e por isso a mesma altura. */
.vitrine-vazia {
display: flex; flex-direction: column; gap: var(--e1);
justify-content: center;
min-height: var(--vitrine-altura-total);
padding: var(--e5) var(--e4);
background: var(--log); border: 1px solid var(--painel-borda);
text-align: center;
}
.vitrine-vazia-dia {
margin: 0; color: var(--dim);
font-size: var(--t-xs); font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
}
.vitrine-vazia-texto { margin: 0; color: var(--texto); font-size: var(--t-md); }
/* o esqueleto ocupa a MESMA altura do palco: sem isso a tira de dias salta
para cima quando os posts chegam, e o clique da pessoa erra o dia */
.vitrine-esqueleto {
height: var(--vitrine-altura-total);
background: var(--neutro);
border: 1px solid var(--painel-borda);
}
/* =====================================================================
O MES -- a unica tela onde o post comprime para MARCA
===================================================================== */
.mes-grade { min-height: 22rem; }
.mes-tabela {
width: 100%;
table-layout: fixed; /* 7 colunas iguais, e zero rolagem lateral */
border-collapse: collapse; /* fio compartilhado: e uma grade, nao 42 cards */
}
.mes-tabela th {
padding: var(--e2) var(--e2) var(--e2) 6px;
text-align: left; font-size: var(--t-xs); font-weight: 600;
color: var(--dim); /* 5.68:1 */
}
.mes-tabela th abbr { text-decoration: none; }
.mes-tabela td { padding: 0; border: 1px solid var(--painel-borda); }
/* A celula. Botao, porque clicar leva ao dia -- mas sem nada de botao: nem
raio, nem sombra, nem fundo proprio. Ela e uma celula de grade. */
.mes-dia {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-rows: auto minmax(0, 1fr);
gap: 3px var(--e1);
align-content: start;
width: 100%; min-height: 5.5rem;
padding: 5px 6px 6px;
background: var(--log);
border: 0; border-radius: 0;
font-family: inherit; font-size: var(--t-xs); color: var(--texto);
text-align: left; cursor: pointer;
transition: box-shadow var(--transicao);
}
/* A celula que invade o mes vizinho CONTINUA na tela, com os posts dela: o
pedido a API vai do primeiro dia visivel ao ultimo, e esconder o que ele
trouxe seria pedir o dado e mentir sobre ele.
O que a separa e que ela recebe o fundo da PAGINA (--fundo) em vez do fundo
da folha do mes (--log): as celulas do mes formam um bloco continuo e as de
fora ficam do lado de fora dele, o que e literalmente o que elas sao. O
numero do dia tambem esfria para --dim. Medido: --fundo #EFF3F5, e as cinco
cores de marca passam nele (a menor e --dim, 5.68:1). */
.mes-dia[data-fora="sim"] { background: var(--fundo); }
.mes-dia[data-fora="sim"] .mes-dia-num { color: var(--dim); font-weight: 400; }
/* O dia com algo esperando POR VOCE muda de tom -- e o que se ve de longe. No
escuro ele CLAREAVA; no claro, clarear seria desaparecer contra a pagina, e
entao ele ganha o tom do campo (--campo, o unico fundo tingido do tema). O
token nao mudou, e o sinal continua sendo "esta celula nao e igual as outras".
As cinco cores de marca passam sobre ele (a menor e --dim, 5.16:1). */
.mes-dia[data-vez="sim"] { background: var(--campo); }
.mes-dia:hover { box-shadow: inset 0 0 0 1px var(--dim); }
.mes-dia:active { box-shadow: inset 0 0 0 2px var(--dim); }
/* o anel de foco fica DENTRO da celula: com outline-offset ele seria coberto
pelo fio da celula vizinha, que e o unico lugar da folha onde isso acontece */
.mes-dia:focus-visible { outline: 2px solid var(--dim); outline-offset: -3px; }
.mes-dia-num {
grid-column: 1; grid-row: 1;
font-size: var(--t-sm); font-weight: 600; line-height: 1.2;
}
/* hoje: a pilula teal do kit. #fff sobre --marca = 7.13:1 */
.mes-dia[data-hoje="sim"] .mes-dia-num {
background: var(--marca); color: #ffffff;
border-radius: 999px; padding: 0 7px; margin-left: -2px;
}
.mes-dia-mes {
grid-column: 2; grid-row: 1; align-self: center;
color: var(--dim); font-size: var(--t-xs);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mes-dia-total {
grid-column: 3; grid-row: 1; justify-self: end; align-self: center;
color: var(--dim); font-size: var(--t-xs);
}
.mes-dia[data-vez="sim"] .mes-dia-total { color: var(--amarelo-log); font-weight: 700; }
.mes-marcas, .mes-dia-esqueleto { grid-column: 1 / -1; grid-row: 2; }
.mes-marcas {
display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px;
}
.mes-dia-esqueleto {
height: 0.55rem; width: 55%; align-self: start;
background: var(--neutro); border-radius: 2px;
}
/* ---- A MARCA DO MES: o chip comprimido ----
O nome e `.mes-marca`, e nao `.marca`, porque `.marca` JA EXISTE nesta folha
desde o editor (a linha do checkbox "Tenho a autorizacao de uso da imagem do
cliente", la em cima). As duas tinham a mesma especificidade e esta, por vir
depois, vencia: a linha da autorizacao virava uma caixa de 8,8 px com o texto
espremido a zero -- o campo que registra a autorizacao de uso da imagem,
ilegivel, num sistema cuja unica acao irreversivel e publicar essa imagem.
Nenhum teste pegou (os de contraste olham `.mes-marca[data-cor=...]`, nunca o
bloco puro), entao a folha ganhou uma guarda: `test_nenhuma_classe_abre_dois
_blocos_no_css` reprova qualquer seletor de classe unica repetido aqui.
Ela nao herda so a COR do chip; herda tambem o PESO, que e o eixo que separa
`recusado` de `falha_publicacao` -- mesma cor, silhuetas opostas, porque as
acoes sao opostas. Sao as mesmas quatro silhuetas do chip:
vez quadrado CHEIO uma pessoa travou, e a proxima e voce
voo quadrado VAZADO esta em andamento (gente ou maquina)
sancao quadrado de BORDA GROSSA em --ok sancionado
fim BARRA fina acabou
Sem o peso, `publicado` e `cancelado` seriam dois quadrados que so diferem
em cor, e `recusado` e `falha_publicacao` seriam identicos. */
/* 0.75rem = 12px, e nao os 0.55rem (8,8px) da primeira versao. O cabecalho
desta secao promete "forma de meio centimetro" e desenhava metade disso, em
duas cores que um em cada doze homens nao separa. 12px e o maior quadrado que
cabe em duas fileiras dentro da celula de 5.5rem sem empurrar o numero do
dia, e e o tamanho em que a diferenca entre CHEIO e VAZADO se ve de longe --
que e o eixo que carrega o estado aqui, antes da cor. */
.mes-marca {
display: inline-flex; align-items: center; justify-content: center;
min-width: 0.75rem; width: 0.75rem; height: 0.75rem;
border: 1.5px solid var(--marca-cor);
background: var(--marca-cor);
border-radius: 2px;
align-self: flex-start;
margin-top: 2px;
}
.mes-marca[data-cor="dim"] { --marca-cor: var(--dim); }
.mes-marca[data-cor="amarelo"] { --marca-cor: var(--amarelo-log); }
.mes-marca[data-cor="verde"] { --marca-cor: var(--verde-log); }
.mes-marca[data-cor="vermelho"] { --marca-cor: var(--vermelho-log); }
.mes-marca[data-cor="ok"] { --marca-cor: var(--ok); }
.mes-marca[data-peso="voo"] { background: transparent; }
.mes-marca[data-peso="sancao"] { background: transparent; border-width: 2px; }
.mes-marca[data-peso="fim"] {
height: 4px; border: 0; border-radius: 1px;
background: var(--marca-cor); margin-top: 6px;
}
/* Mais de um post no mesmo estado: a marca vira pilula e leva o numero. Agora
ha TEXTO dentro dela, e a regra passa a ser 4.5:1 -- ver a tabela no topo
desta secao. `sancao` continua escrevendo o numero em --texto: no escuro
porque --ok reprovava (4.02:1 no melhor fundo), no claro porque a cor de
`aprovado` marca a BORDA e nunca o rotulo -- exatamente como no chip. */
.mes-marca[data-contado="sim"] {
width: auto; min-width: 1.1rem; height: auto;
padding: 0 4px; margin-top: 0;
border-radius: var(--radius-sm);
font-size: var(--t-xs); line-height: 1.35; font-weight: 700;
color: var(--marca-cor);
}
/* A pilula contada de "e a sua vez" segue o CHIP, porque ela e o chip
comprimido: tinta no fundo, cor cheia no fio e no numero. A primeira versao
escrevia o numero em --log sobre a cor cheia, e essa era a mesma inversao
escura que fazia o chip parecer botao. A marca de 12px sem numero continua
sendo a cor CHEIA: naquele tamanho uma tinta clara com fio de 1,5px nao
chega a ser uma forma -- e la o que carrega o peso e cheio x vazado. */
.mes-marca[data-contado="sim"][data-peso="vez"] {
background: var(--marca-tinta); border-color: var(--marca-cor);
border-width: 1px; color: var(--marca-cor);
}
.mes-marca[data-contado="sim"][data-cor="amarelo"] { --marca-tinta: var(--amarelo-fundo); }
.mes-marca[data-contado="sim"][data-cor="vermelho"] { --marca-tinta: var(--vermelho-fundo); }
.mes-marca[data-contado="sim"][data-peso="sancao"] { color: var(--texto); } /* 13.30:1 */
.mes-marca[data-contado="sim"][data-peso="fim"] {
height: auto; border: 1px solid transparent; background: transparent;
padding: 0 2px;
}
/* ---- o vazio e a chave de cores ---- */
.mes-vazio { margin-top: var(--e4); }
.mes-rodape {
display: flex; flex-wrap: wrap; align-items: flex-start;
gap: var(--e3) var(--e5);
margin-top: var(--e4);
}
.mes-ajuda { margin: 0; max-width: 58ch; color: var(--dim); font-size: var(--t-xs); }
.mes-chave {
display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4);
margin: 0; padding: 0; list-style: none;
}
.mes-chave-item { display: inline-flex; align-items: center; gap: var(--e2); }
.mes-chave-rotulo { color: var(--dim); font-size: var(--t-xs); }
/* ======================== MOTION ========================
Nada anima na carga e nada anima na troca de aba: o painel abre DENTRO de uma
tarefa e ninguem quer assistir. As transicoes de feedback de controle (cor de
hover/foco) ficam na faixa 150-250ms.
E HA UM UNICO LUGAR ONDE SE PAGA MOVIMENTO: o chip que MUDOU de estado desde
a pintura anterior assenta. E exatamente o instante que o operador estava
esperando -- o post saiu de "esperando o grupo" e virou outra coisa. Nada
mais anima nesta folha. O JS marca `data-mudou="sim"` so nos chips cujo
status mudou desde a ultima pintura (a linha e recriada, entao e keyframe e
nao transition -- transition nao dispara em no recem-inserido). */
@keyframes chip-assenta {
from { transform: translateY(4px); }
to { transform: none; }
}
.chip[data-mudou="sim"] { animation: chip-assenta 200ms ease-out; }
@media (prefers-reduced-motion: reduce) {
/* `.mes-dia` entrou aqui na Task 4: a celula do calendario transiciona o anel
de hover, e sem esta linha ela continuava com 160ms sob `reduce`. Achado do
checklist visual -- a lista de seletores acima e do tipo que envelhece
calada, porque nada falha quando alguem esquece de acrescentar o proximo.
Os quatro seletores do multi-select do filtro de loja (`.ms-botao`,
`.ms-seta`, `.ms-todos`, `.ms-limpar`) sairam desta lista junto com o
campo -- os elementos nao existem mais. Os que ficaram sao os mesmos de
antes, e valem pela mesma razao: cosmetica de controle para, sinal de
estado do sistema continua. */
/* `.tipo-opcao` entrou aqui com o seletor de tipo: a opcao transiciona o
fundo e a borda ao passar o mouse, e e cosmetica de controle -- para. */
/* `.lateral-item` entrou com a barra de destinos, pela mesma razao de todos
os outros: ele transiciona fundo e cor no hover, e isso e cosmetica de
controle. A lista inteira foi relida item a item ao acrescenta-lo -- e o
jeito de esta lista envelhecer calada e alguem so acrescentar o proprio. */
/* A virada para o tema claro (2026-08-16) NAO acrescentou seletor animado
nenhum: o que ela trocou foram valores de cor e de fundo, e as regras que
ganharam bloco proprio (`.cabecalho .btn-neutro`, o anel de foco escopado,
o wordmark da barra) nao declaram `transition`. A lista foi relida item a
item mesmo assim, que e a unica forma de ela nao envelhecer calada. */
/* `.semana-dia` entrou aqui em 21/08/2026, quando a Semana virou tira de
dias: a celula nova transiciona o anel de hover exatamente como a do Mes,
e nasceu fora desta lista. Foi o teste que apontou -- que e o unico jeito
de esta lista nao envelhecer calada, e desta vez ela nao envelheceu. */
/* `.vcorte-play` entrou nesta lista em 25/08/2026 e SAIU no mesmo dia, com
o editor de corte inteiro -- o dono mandou tirar o corte. O elemento nao
existe mais; deixar o seletor aqui seria a lista guardando um fantasma. */
.aba, .btn, .btn-texto, .input, .pular, .mes-dia, .semana-dia, .tipo-opcao,
.lateral-item { transition: none; }
.chip[data-mudou="sim"] { animation: none; } /* corte seco */
/* a Vitrine: seta e ponto tem `transition`, entao entram aqui.
Eu tinha posto um SEGUNDO bloco de reduce mais abaixo, e o teste nao o
enxerga -- ele le so o PRIMEIRO, de proposito: duas listas divergem. */
.vitrine-seta, .vitrine-ponto { transition: none; }
}
/* ============ DE 1000px PARA BAIXO: A LATERAL VIRA FILEIRA ============
O numero sai da conta escrita no comentario de `.armacao`: abaixo de 973px
de viewport a lateral de coluna passa a custar mais coluna de trabalho do
que a Semana consegue pagar, e o documento comeca a rolar de lado. Aqui ela
deixa de ser coluna e vira uma FILEIRA de tres destinos, largura inteira,
acima do conteudo -- os mesmos tres links, o mesmo estado ativo, a mesma
pilula; o que muda e o eixo.
Ela NAO fica grudada nesta faixa. Quem fica e a barra de abas, que e o
controle que se usa ENQUANTO se rola uma lista longa; trocar de destino e
um gesto de comeco de tarefa, e nao vale mais 60px permanentes de altura
numa janela que ja esta estreita. No celular a decisao se inverte, e o
porque esta escrito la embaixo (a barra fica onde o polegar ja esta, e o
cabecalho perde o sticky junto). */
@media (max-width: 1000px) {
/* A armacao voltou a ser UMA coluna: a goteira nao pode continuar
descontando uma lateral que nao existe mais nesta largura. */
:root { --armacao: var(--medida); }
.armacao { grid-template-columns: minmax(0, 1fr); gap: 0; }
.lateral {
position: static; height: auto; overflow: visible;
margin-top: var(--e5);
}
.lateral-lista { flex-direction: row; gap: var(--e1); }
.lateral-lista > li { flex: 1 1 0; min-width: 0; }
.lateral-item {
align-items: center; justify-content: center; text-align: center;
min-height: 2.75rem;
}
}
/* ==================== CELULAR (<= 700px) ====================
Responsivo aqui e ESTRUTURAL, nao tipografia fluida: a escala continua a
mesma, o que muda e o arranjo.
A cadeia sticky se DESFAZ, e o elo que sobra e o util. Dois elos grudados comem
108px de uma viewport de 844px antes de qualquer post aparecer -- num painel
cuja unidade e uma FOTO, isso e caro demais. Entao o cabecalho (marca, nome,
Sair: nada que se use enquanto se rola) sai do sticky e vai embora com a
rolagem, e as ABAS assumem o topo sozinhas, ancoradas em 0. Devolve 56px e
mantem a navegacao ao alcance -- soltar as duas obrigaria a rolar a lista
inteira de volta so para trocar de periodo. */
@media (max-width: 700px) {
:root {
--goteira: var(--e4); /* 16px: 24px come tela demais em 390px */
--respiro-tela: var(--e4); /* o mesmo aperto, no eixo vertical */
}
.cabecalho { position: static; }
.masthead-modo { position: static; }
.abas-bar { top: 0; }
.cabecalho {
height: auto; flex-wrap: wrap; gap: var(--e2);
padding: var(--e3) var(--goteira);
}
.cabecalho-marca { gap: var(--e3); }
.cabecalho-titulos { display: none; } /* a marca ja diz onde a pessoa esta */
.wordmark-text { font-size: var(--t-md); }
/* Sem o sticky, a linha nao precisa mais da altura fixa que o `top` do
elo seguinte exigia -- e o telefone e ONDE o texto inteiro mais importa
(e onde alguem de fato aperta Publicar). A ellipsis do desktop sai; o
texto quebra em ate duas linhas, sem cortar nada. */
.masthead-modo {
height: auto; min-height: var(--h-modo);
padding: var(--e2) var(--goteira);
white-space: normal; overflow: visible; text-overflow: clip;
}
/* ---- A LATERAL NO CELULAR: BARRA INFERIOR ----
A decisao, e por que ela nao e gaveta nem colapso para icones:
GAVETA foi recusada porque o destino passaria a ser invisivel. Esta e a
unica navegacao do painel que responde "onde eu estou", e escondida atras
de um botao ela custa um toque para SABER, nao so para ir. Pior: o
cabecalho perde o sticky no celular (a linha logo acima desta media query),
entao o botao da gaveta iria embora com a rolagem e a navegacao ficaria
ilhada no topo de uma lista de dez fotos.
COLAPSO PARA ICONES foi recusado porque este kit nao tem biblioteca de
icone nenhuma e nao vai ganhar uma para tres itens -- e tres pictogramas
inventados para "Calendario", "Criar post" e "Publicados" seriam tres
charadas. Sem legenda, icone e adivinhacao; com legenda, e a barra abaixo.
COLUNA ESPREMIDA esta fora por ordem expressa: 240px de lateral numa
viewport de 390px deixariam 150px para uma tela cuja unidade e a FOTO.
Entao: BARRA INFERIOR fixa. Sao tres destinos -- cabem lado a lado, ficam
todos visiveis o tempo todo, e a barra fica onde o polegar ja esta. Custa
60px de altura fixa, que o conteudo devolve em `padding-bottom` (o token
`--h-barra-baixo` existe para os dois lados nao poderem discordar). A
segunda linha de cada item sai: em 1/3 de 390px ela viraria duas linhas de
texto miudo, e o nome sozinho ja diz. */
.armacao { grid-template-columns: minmax(0, 1fr); gap: 0; }
.lateral {
position: fixed; left: 0; right: 0; bottom: 0; top: auto;
/* Aqui ela FLUTUA sobre o conteudo, e por isso sobe acima das abas -- que
e a unica coisa grudada que ela pode cruzar nesta largura. */
z-index: calc(var(--z-abas) + 1);
margin-top: 0; height: auto; overflow: visible;
padding: var(--e1) var(--e2) calc(var(--e1) + env(safe-area-inset-bottom, 0px));
/* A barra flutua SOBRE o conteudo: o fio de livro-razao (1.42:1) nao
separaria as duas camadas. Aqui ela ganha o contorno de controle mais
uma sombra curta, que e o que uma barra pousada sobre a lista faz. */
border: 0; border-top: 1px solid var(--campo-borda); border-radius: 0;
box-shadow: 0 -2px 10px rgba(6, 43, 53, 0.12);
}
.lateral-lista { flex-direction: row; gap: var(--e1); }
.lateral-lista > li { flex: 1 1 0; min-width: 0; }
.lateral-item {
align-items: center; justify-content: center;
min-height: 2.75rem; /* alvo de polegar */
padding: var(--e2) 4px; text-align: center;
}
.lateral-ajuda { display: none; }
/* A FAIXA SANGRA ATE AS DUAS BORDAS DA TELA. Sem isto ela ficava em x=16 com
358px de largura: um retangulo escuro flutuando, com o fundo claro em cima,
a esquerda e a direita -- a definicao de adesivo, e o defeito que a critica
mediu em 390px. Ela e a unica coisa grudada no topo do celular, e uma barra
grudada que nao encosta nas bordas nao se le como barra. */
.abas-bar {
margin-inline: calc(-1 * var(--goteira));
padding: 0 var(--goteira);
}
.abas {
width: 100%; max-width: 100%;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }
.aba { scroll-snap-align: center; padding: 11px 16px; } /* alvo de toque */
/* Havia aqui o quarto elo (a barra do filtro de loja), que tambem saia do
sticky no celular e virava controle de largura inteira. Saiu com o campo,
e com ele os 108px que esta secao existia para disputar. */
/* As acoes viram fileira de alvos de polegar, como o editor. Cancelar cai
para a linha de baixo sozinha: e a acao que nao pode ser tocada por
engano ao mirar na de cima. */
.acoes-botoes .btn { flex: 1 1 11rem; padding: 11px 12px; }
.acoes-botoes .btn-perigo { flex: 1 1 100%; }
.acoes-promessa, .confirmar { max-width: none; }
/* A goteira sai (quem a carrega e `.armacao`) e o rodape ganha a altura da
barra inferior: sem isso o ultimo post da lista nasce debaixo dela e a
rolagem simplesmente termina em cima dele. O respiro de CIMA continua
sendo dos destinos, pelo motivo escrito la em cima. */
.conteudo { padding: 0 0 calc(var(--h-barra-baixo) + var(--e6)); }
/* No celular so as abas ficam grudadas -- o cabecalho e a linha do modo
saem do sticky logo acima --, entao o piso que impede o foco de nascer
debaixo do masthead encolhe na mesma proporcao. */
.conteudo :where(a, button, input, select, textarea, [tabindex]) {
scroll-margin-top: calc(var(--h-abas) + var(--e3));
}
.sessao-nome { max-width: 14ch; }
/* A linha empilha: hora, foto, corpo. A foto continua sendo a linha -- a
versao de telefone disso e a largura toda, com um teto de 18rem para uma
lista de dez posts nao virar dez telas de rolagem. O que ja acabou
continua encolhido, pelo mesmo motivo de sempre. */
.post {
--foto-lado: min(100%, 18rem);
grid-template-columns: minmax(0, 1fr);
gap: var(--e3);
padding: var(--e4) 0;
}
.post[data-turno="fim"] { --foto-lado: 5rem; }
/* O historico continua sendo a foto, e no telefone a foto da linha viva e a
largura toda com teto de 18rem -- a mesma que a lista de Hoje usa. */
#destino-publicados .post { --foto-lado: min(100%, 18rem); }
.post-hora { padding-top: 0; }
.post-legenda-caixa, .post-causa, .post-motivo, .post-nota { max-width: none; }
/* A goteira do marcador sai: 44px de margem numa viewport de 390px sao 11% da
largura para um numero de um digito. Ele volta a ser o primeiro pedaco
inline do <h2>, que e o desenho que a folha ja tem escrito acima. */
.editor[data-layout="tela"] .editor-grade { padding-left: 0; }
.editor[data-layout="tela"] .passo-numero {
position: static; width: auto; min-width: 1.6rem;
margin-right: var(--e2); padding: 2px 6px;
}
/* O editor empilha: foto em cima, texto embaixo -- a mesma ordem da linha do
dia no telefone, e a mesma razao. A foto para em 22rem para o formulario
nao comecar com uma tela inteira de imagem antes do primeiro campo. */
.editor { padding: var(--e4); }
.editor-grade { grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
.previa { max-width: 22rem; }
/* Alvo de polegar na faixa: os ‹ › e o Remover sao os controles mais densos
do formulario, e sao os que a mao mais usa quando ha dez fotos. */
.previa-botao { min-height: 2.5rem; padding: 4px 10px; }
.previa-antes, .previa-depois { min-width: 2.5rem; }
.editor-acoes .btn { flex: 1 1 11rem; } /* alvo de toque, nao botao miudo */
/* A acao primaria vai para a linha de baixo, do tamanho do polegar. */
.dia-linha { gap: var(--e3); }
#btn-novo { width: 100%; }
/* Data, fuso e resumo empilham; sem os separadores, que numa coluna de 390px
so produzem pontos no fim das linhas. */
.dia-quando { display: block; }
/* o :not(:empty) tem de ser repetido aqui: sem ele a regra de cima vence por
especificidade mesmo dentro da media query, e o ponto sobra no fim da data */
.dia-quando .dia-data:not(:empty)::after { content: none; }
.dia-fuso { display: block; }
.resumo-parte:not(:last-child)::after { content: none; }
.dia-resumo { gap: var(--e1) var(--e4); }
/* A navegacao de periodo vira uma fileira de alvos de polegar. */
.periodo-nav { width: 100%; }
.periodo-nav .btn { flex: 1 1 8rem; padding: 11px 10px; }
/* A SEMANA empilha. Sete colunas de 50px num telefone nao mostram foto
nenhuma -- e a foto e a unidade. Entao a semana vira sete blocos de dia,
um abaixo do outro, com a foto do tamanho que o polegar alcanca. Cada dia
continua sendo um dia; o que muda e o eixo. */
.semana-grade { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.semana-dia {
padding: 0 0 var(--e4);
border-left: none; border-top: 1px solid var(--painel-borda);
}
.semana-dia:first-child { border-top: none; }
.semana-dia[data-hoje] { padding: 0 var(--e3) var(--e4); }
.semana-dia-cabeca {
flex-direction: row; align-items: baseline; gap: var(--e2);
border-bottom: none; padding-bottom: 0;
}
.semana-post { --foto-lado: min(100%, 16rem); }
/* O MES continua uma grade de 7 colunas -- e a unica leitura possivel de um
mes --, mas encolhe para caber SEM ROLAGEM LATERAL: `table-layout: fixed`
ja garante as sete colunas dentro da largura, e aqui cai a altura minima da
celula, o respiro e o tamanho do numero. */
.mes-tabela th { padding: var(--e1) 3px; font-size: var(--t-xs); }
.mes-dia { min-height: 3.6rem; padding: 3px 4px 4px; gap: 2px 3px; }
.mes-dia-num { font-size: var(--t-xs); }
.mes-dia[data-hoje="sim"] .mes-dia-num { padding: 0 5px; margin-left: -1px; }
/* O nome do mes na celula que invade o vizinho FICA -- so encolhe. Some-lo
faria o "1" do fim de agosto se ler como o dia 1 de agosto, e a diferenca
de fundo sozinha nao carrega isso. Quando nao couber, o ellipsis corta e o
`aria-label` do botao continua dizendo a data inteira. */
.mes-dia-mes { font-size: 0.7rem; }
.mes-rodape { flex-direction: column; gap: var(--e3); }
}
@media (max-width: 900px) and (min-width: 701px) {
.cabecalho-sub { display: none; }
}
/* ===================================================================
A VITRINE DO HOJE (21/08/2026)
Um post por vez, grande. Pedido do dono, com mockup. A lista de linhas
continua sendo a forma da Semana e do Mes -- ver `montarVitrine` no app.js
para o porque de as duas telas divergirem.
NENHUMA COR NOVA, que era a restricao dura. O bloco de data usa `--texto`
como SUPERFICIE: papel novo para cor que ja existia. Branco sobre #10262C da
15,72:1, numero que ja estava medido no cabecalho desta folha. Todo o resto
sai de --painel, --painel-borda, --campo, --dim e --marca, sem excecao.
=================================================================== */
.vitrine {
/* O corpo da data. A escala de tipo da folha para em --t-xl (25,9px) porque
ela foi feita para ROTULO, e este numero e uma ancora que se le de longe.
Fica no escopo do componente, e nao em :root, para nao virar um degrau
solto que a proxima tela usa sem razao. */
--vitrine-dia: 3.25rem;
/* Altura FIXA do palco. Feed e 1:1 e story e 9:16: sem altura fixa o cartao
mudaria de tamanho a cada troca de slide, e o botao que a pessoa ia clicar
andaria debaixo do cursor. */
/* A ALTURA DA PECA SEGUE A JANELA, e nao um numero fixo.
Historico curto, porque as duas pontas ja foram erradas: 26rem ficou
PEQUENA ("fica feio") e 34rem fixos ficaram GRANDES -- o dono teve de por
o navegador em 67% para o cartao caber. Num 1366x768, que e a tela dele, a
area util tem ~570px de altura: 34rem (544px) nao cabe com cabecalho,
abas, titulo e os controles embaixo.
resolve os dois: 44vh acompanha a janela, o piso de 14rem impede
que uma janela baixa reduza a peca a um selo, e o teto de 30rem impede que
um monitor grande a estique alem do util. */
}
.vitrine-slide {
display: grid;
/* A coluna da arte e `auto`: ela pega a largura que a PECA pede (ver
.vitrine-arte), e nao uma fracao do cartao. Com `1fr` a arte ficava
centrada num palco largo demais e sobravam duas faixas de --campo dos dois
lados, que se leem como erro e nao como moldura. */
/* `max-content` e nao `auto`: coluna `auto` ABSORVE o espaco livre da grade,
e o story (9:16) ficava com 182px de palco vazio de cada lado. Com
max-content a trilha tem exatamente a largura da peca. */
grid-template-columns: 8.5rem max-content minmax(17rem, 1fr);
background: var(--painel);
border: 1px solid var(--painel-borda);
border-radius: var(--radius);
overflow: hidden;
}
/* A TROCA. Com 50s entre pecas a transicao nao e enfeite: ela e o aviso de
que a tela mudou sozinha, para quem estava olhando de longe nao achar que
leu errado. 320ms com curva de saida exponencial -- sem quique, sem
elastico. Quem pediu reduced-motion nao ve nada disso e tambem nao ve o
giro automatico, que `ligarVitrine` desliga na mesma condicao. */
@media (prefers-reduced-motion: no-preference) {
.vitrine-slide {
animation: vitrine-entra 320ms cubic-bezier(.22, 1, .36, 1);
}
.vitrine-slide .vitrine-arte img {
animation: vitrine-arte-entra 420ms cubic-bezier(.22, 1, .36, 1);
}
}
@keyframes vitrine-entra {
from { opacity: 0; transform: translateX(1.25rem); }
to { opacity: 1; transform: none; }
}
@keyframes vitrine-arte-entra {
from { opacity: 0; transform: scale(.985); }
to { opacity: 1; transform: none; }
}
/* --- a folhinha --- */
/* A FOLHINHA passa a ser da MARCA, e nao mais o --texto.
Nos mockups ela e o mesmo verde da lateral e do topo: o escuro do painel
aparece em tres lugares e nos tres e a mesma tinta, o que faz a moldura da
tela ler como uma coisa so. Branco sobre --marca da 12.83:1. */
.vitrine-data {
background: var(--marca);
color: var(--barra-texto);
padding: var(--e5) var(--e4);
display: flex;
flex-direction: column;
gap: var(--e1);
align-items: flex-start;
justify-content: flex-start;
}
.vitrine-data-rotulo {
font-size: var(--t-xs);
letter-spacing: .08em;
text-transform: uppercase;
opacity: .82; /* 12,9:1 -- continua muito acima de 4.5 */
}
.vitrine-data-mes {
font-size: var(--t-md);
text-transform: uppercase;
letter-spacing: .04em;
}
/* O numeral em serif, irmao do titulo da aba -- e a segunda e ULTIMA aparicao
do display na folha.
`tabular-nums` FICA: os dias trocam no carrossel, e algarismo de largura
variavel faria o bloco pular entre 11 e 25. `font-weight` cai de 700 para
500 pelo mesmo motivo do h1: serif pesado nesta escala fecha os contornos.
A PILHA SO TEM FONTE DE ALGARISMO ALINHADO, e isso decide o desenho deste
numero: Georgia e Constantia trazem figura ANTIGA -- o 2 na altura-x e o 5
descendo abaixo da linha --, e "25" sairia desalinhado. Ver --fonte-titulo. */
.vitrine-data-dia {
font-family: var(--fonte-titulo);
font-size: var(--vitrine-dia);
font-weight: 500;
line-height: .95;
font-variant-numeric: tabular-nums;
letter-spacing: -.02em; /* piso da direcao e -.04em */
}
.vitrine-data-hora {
margin-top: auto; /* desce para o pe do bloco: a folhinha fica ancorada
em cima e a hora fecha embaixo, sem vao morto */
padding-top: var(--e4);
font-size: var(--t-sm);
font-variant-numeric: tabular-nums;
opacity: .82;
}
/* Post encerrado esfria aqui tambem -- a mesma regra da lista, mesmo sinal. */
.vitrine-slide[data-turno="fim"] .vitrine-data { background: var(--dim); }
.vitrine-slide[data-riscado] .vitrine-data-hora { text-decoration: line-through; }
/* --- a arte --- */
/* O PALCO ABRACA A PECA, nos dois eixos. A imagem toma a ALTURA da linha da
grade e a largura vem dela; a coluna e `auto`, entao ela se ajusta.
Duas versoes erradas ficam registradas porque sao o mesmo erro espelhado:
com largura em `1fr` sobrava faixa de --campo a ESQUERDA e a DIREITA; com
altura fixa e cartao crescendo pela ficha, sobrava EM CIMA e EMBAIXO. Faixa
vazia em volta da peca le-se como erro, nao como moldura. */
/* ALTURA FIXA, e a escolha e deliberada. Com a arte esticando ate a altura da
linha, o cartao media 482px num feed e 853px num story -- ele mudava de
tamanho a cada troca de slide, e o botao que a pessoa ia clicar andava
debaixo do cursor. Altura fixa mantem o cartao no mesmo lugar; a faixa de
--campo que sobra em volta e passe-partout, simetrica de proposito. */
.vitrine-arte {
/* A ARTE PREENCHE O CARTAO, e a largura vem da propria imagem.
Antes a altura era fixa e a ficha, mais alta, deixava faixa de --campo em
volta -- com a legenda ABERTA eram 267px de vazio em torno de 251px de
peca. `--vitrine-palco-altura` deixou de ser a altura e virou o PISO: em
janela baixa ela garante um minimo, e quando a ficha pede mais o palco
acompanha em vez de boiar. A largura sai do `width:auto` da imagem com
`height:100%`, entao a proporcao nunca distorce. */
/* O PALCO preenche a altura do cartao; a PECA tem tamanho proprio e fica
centrada nele. Antes a altura estava no palco, e com a ficha mais alta a
coluna simplesmente ACABAVA no meio do cartao -- sobrava um retangulo
branco embaixo da arte que se lia como bug. Agora o que sobra e faixa de
--campo em cima e embaixo, simetrica: passe-partout, nao buraco. */
align-self: stretch;
min-height: var(--vitrine-palco-altura);
width: var(--vitrine-palco-altura);
background: var(--campo);
border-left: 1px solid var(--painel-borda);
border-right: 1px solid var(--painel-borda);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* `contain` e nao `cover`: quem aprova precisa ver a peca INTEIRA. Cortar para
preencher esconderia justamente a borda, que e onde o recorte falha. */
.vitrine-arte img {
/* a altura vive AQUI, e nao no palco -- ver o comentario acima */
height: var(--vitrine-palco-altura);
width: auto;
object-fit: contain;
display: block;
}
.vitrine-arte[data-formato="story"] {
width: calc(var(--vitrine-palco-altura) * 0.5625); /* 9/16 exato */
}
.vitrine-sem-arte { color: var(--dim); font-size: var(--t-xs); }
/* --- a ficha --- */
/* A ficha NAO rola e NAO tem teto. A primeira versao tinha
`overflow-y:auto; max-height`, e o resultado foi o pior defeito possivel
nesta tela: os BOTOES DE ACAO ficavam cortados no rodape do cartao. O que a
pessoa veio fazer aqui e clicar num deles. Agora o cartao CRESCE para caber
a ficha, e a arte e que tem altura fixa. */
.vitrine-ficha {
padding: var(--e5);
display: flex;
flex-direction: column;
/* CENTRADA na vertical: com a arte a 34rem o cartao ficou alto, e a ficha
alinhada ao topo deixava um vao morto de ~160px embaixo. Centrar equilibra
sem mexer em estrutura -- e quando a ficha e alta ela simplesmente cresce e
o centro deixa de importar. */
justify-content: center;
gap: var(--e3);
min-height: var(--vitrine-palco-altura);
}
.vitrine-quando {
margin: 0;
color: var(--dim);
font-size: var(--t-xs);
}
.vitrine-ficha .post-corpo { display: flex; flex-direction: column; gap: var(--e3); }
/* A LEGENDA ABERTA ROLA NO LUGAR, e nao empurra o cartao.
O dono abriu uma legenda inteira e a tela "ficou toda cagada": o texto
esticava a ficha, a ficha esticava o cartao, e sobravam tres colunas de
densidades muito diferentes puxadas para a mesma altura -- a folhinha virava
uma faixa vazia comprida e a arte ficava boiando no meio de --campo.
Limitar AQUI, e nao na ficha inteira, e o que importa: quem rola e o texto;
o chip, o prazo e os BOTOES continuam onde estavam, sempre visiveis. Ja
houve uma versao com `overflow` na ficha toda e ela cortava as acoes -- o
contrario do que esta tela existe para fazer. */
.vitrine-ficha .post-legenda-caixa {
max-height: 8rem;
overflow-y: auto;
overscroll-behavior: contain;
padding-right: var(--e2);
}
.vitrine-ficha .post-topo { margin-bottom: 0; }
/* --- os controles --- */
.vitrine-controles {
display: flex;
align-items: center;
justify-content: center;
gap: var(--e3);
margin-top: var(--e4);
min-height: var(--vitrine-controles-altura); /* vazia, ainda ocupa lugar */
}
.vitrine-seta {
width: 2.5rem; height: 2.5rem;
border-radius: 50%;
border: 1px solid var(--campo-borda);
background: var(--painel);
color: var(--texto);
font-size: var(--t-md);
line-height: 1;
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease;
}
.vitrine-seta:hover { background: var(--campo); }
.vitrine-seta:active { background: var(--neutro); }
.vitrine-seta:disabled { color: var(--dim); border-color: var(--painel-borda); cursor: default; }
.vitrine-pontos { display: flex; align-items: center; gap: var(--e2); }
.vitrine-ponto {
width: .85rem; height: .85rem;
padding: 0;
border-radius: 50%;
border: 1px solid var(--campo-borda);
background: var(--painel);
cursor: pointer;
transition: background 160ms ease, transform 160ms ease;
}
.vitrine-ponto:hover { background: var(--campo); }
.vitrine-ponto[aria-selected="true"] {
background: var(--marca);
border-color: var(--marca);
}
.vitrine-seta:focus-visible,
.vitrine-ponto:focus-visible {
outline: 2px solid var(--marca);
outline-offset: 2px;
}
/* --- estreito: a folhinha vira faixa e tudo empilha --- */
@media (max-width: 62rem) {
.vitrine-slide { grid-template-columns: 1fr; }
.vitrine-data {
flex-direction: row;
align-items: baseline;
gap: var(--e3);
padding: var(--e3) var(--e4);
}
.vitrine-data-dia { font-size: var(--t-xl); line-height: 1; }
.vitrine-data-hora { margin-top: 0; margin-left: auto; }
/* No estreito quem manda e a LARGURA da tela, nao a altura da linha. A
regra do largo (`height:100%; width:auto; max-width:30rem`) deixava 480px
de peca dentro de 390px de tela: a arte saia CORTADA na esquerda, visto na
captura de 390. */
.vitrine-arte,
.vitrine-arte[data-formato="story"] {
width: auto;
height: auto;
min-height: 0;
max-height: 70vh;
align-self: auto;
border-left: 0; border-right: 0;
border-top: 1px solid var(--painel-borda);
border-bottom: 1px solid var(--painel-borda);
}
.vitrine-arte img {
width: 100%;
height: auto;
max-width: 100%;
max-height: 70vh;
object-fit: contain;
}
.vitrine-ficha { max-height: none; overflow-y: visible; }
}
/* =====================================================================
O EDITOR DE CORTE DE VIDEO
---------------------------------------------------------------------
A peca de identidade daqui e a TIRA DE QUADROS, e ela e funcional antes
de ser bonita: cortar por dois campos de numero e escolher no escuro.
Com a tira, o trecho descartado APAGA a vista -- ve-se o que sai, nao so
o que fica.
As alcas sao FIOS VERTICAIS, e nao pilulas arredondadas. O painel inteiro
e feito de fios de 1px (a grade do mes, a tira da semana, a regua da
placa); uma alca de raio grande seria a unica peca redonda da tela, e
pareceria colada de outro produto. A area de PEGAR e maior que o fio --
44px, o alvo de toque -- mas o que se VE e o fio.
Sem cor nova: --marca e o acento que ja marca hoje e o dia aberto.
===================================================================== */
.vcorte {
display: flex; flex-direction: column; gap: var(--e3);
margin: 0 0 var(--e4);
}
.vcorte-palco {
position: relative; /* o play pousa em cima do video */
display: flex; justify-content: center;
background: var(--texto);
border: 1px solid var(--painel-borda);
}
/* O video inteiro, sem cortar: quem esta escolhendo o trecho precisa ver o
enquadramento REAL. `contain` e nao `cover` -- `cover` esconderia
justamente a borda que a pessoa quer conferir. */
.vcorte-video {
display: block;
max-height: clamp(14rem, 42vh, 24rem);
max-width: 100%;
object-fit: contain;
}
.vcorte-conta {
margin: 0 0 0 auto;
color: var(--dim); font-size: var(--t-sm);
font-variant-numeric: tabular-nums;
}
/* O numero muda de cor E a frase aparece embaixo. Cor sozinha nunca e o
unico sinal -- e a mesma regra do contador da legenda. */
.vcorte-conta[data-passou="sim"] { color: var(--vermelho-log); font-weight: 700; }
.vcorte-recado {
margin: 0; font-size: var(--t-sm); color: var(--dim);
}
.vcorte-recado[data-nivel="erro"] { color: var(--vermelho-log); }
.vcorte-recado:empty { display: none; }
@media (max-width: 640px) {
/* No telefone a conta desce para a propria linha: espremida ao lado do
botao ela quebrava no meio do numero. */
.vcorte-conta { margin-left: 0; flex-basis: 100%; }
}
/* =====================================================================
TELA BAIXA -- o painel aperta o CHROME, nunca o conteudo
---------------------------------------------------------------------
O notebook da operacao tem 768px. A aba Hoje fechava em 786 (18px de
estouro) e a Semana em 878 (110), porque a Semana carrega a vitrine E a
tira dos sete dias.
A PRIMEIRA VERSAO DISTO FOI REVERTIDA, e a licao esta escrita aqui para
nao se repetir: eu apertei a caixa da legenda de 8rem para 4rem. Medida
depois, ela ocupava 78px -- ou seja, ja estava MENOR que o teto de 128, e
apertar o teto nao devolveu um pixel. O unico efeito foi ligar uma barra
de rolagem dentro de uma caixa de duas linhas. Dano pontual, ganho zero.
A regra que ficou: aqui so encolhe ESPACO ENTRE COISAS. Conteudo -- letra,
legenda, botao -- nao entra, porque o preco de um layout mal calibrado nao
pode ser cobrado de quem le.
===================================================================== */
@media (max-height: 860px) {
/* -8px cada. O vao entre as barras e o conteudo foi calibrado num monitor
de 1080, onde sobra; aqui ele e o que falta. */
.abas-bar { margin-bottom: var(--e3); }
.dia-cabeca { margin-bottom: var(--e3); }
.vitrine-controles { margin-top: var(--e2); }
.armacao { gap: var(--e4); }
/* -16px na altura do cartao: as colunas perdem respiro vertical, e o texto
nao muda de tamanho nem de quantidade. */
.vitrine-data, .vitrine-ficha { padding-top: var(--e3); padding-bottom: var(--e3); }
}
/* A VITRINE HOSPEDADA E IGUAL A DA ABA HOJE, e isto ja custou duas tentativas.
A ideia era encolhe-la na Semana e no Mes, para a navegacao de baixo nao
cair abaixo da dobra. As duas formas de fazer isso deram errado, e as duas
o dono viu em producao:
1. Palco menor com a imagem no tamanho do palco -> a peca virou MINIATURA
num cartao alto, boiando com vazio em cima e embaixo. Quem manda na
altura do cartao e a FICHA (a coluna da legenda), e a imagem seguia um
numero paralelo.
2. Palco menor com `img { height: 100% }` para a imagem seguir o cartao ->
a imagem ESTOUROU para a altura intrinseca (1920px) e o documento foi a
2357px. E o caso que o comentario de `.vitrine-arte` ja descrevia:
`100%` de uma altura INDEFINIDA nao e 100% de nada, e o navegador cai no
tamanho natural do arquivo. Eu li o aviso e cometi o erro assim mesmo.
O que se aprende: a altura da imagem e a altura do cartao so ficam iguais
quando o PALCO e a FICHA pedem o mesmo -- que e o que acontece na aba Hoje,
por calibragem. Forcar uma a seguir a outra exige altura definida em algum
lugar, e nenhum dos dois lados tem.
Entao a vitrine e UMA SO. Na Semana e no Mes a tira de dias fica logo
abaixo, e ver os sete exige rolar um pouco -- que e um preco honesto perto
de uma peca deformada ou estourada.
===================================================================== */
/* =====================================================================
VIEWPORT CURTO DE VERDADE (<=700px)
---------------------------------------------------------------------
ERRO DE MEDICAO MEU, corrigido em 25/08/2026. Eu vinha calibrando para
768px porque era a altura da TELA do notebook. Mas o navegador come abas,
barra de endereco e favoritos, e o Windows come a barra de tarefas: a
janela util do dono e ~600px. Cento e sessenta e oito pixels que eu estava
dando de presente para uma tela que nao existe.
Aqui o aperto e maior, e continua sendo SO ESPACO ENTRE COISAS:
gap da ficha ....... 12 -> 6 (~42px, e o maior ganho isolado)
padding do cartao ... 12 -> 8 (~8px)
bloco do titulo ..... o fuso sai (~34px)
resumo do dia ....... sobe (~12px)
Nada de fonte, nada de legenda, nada de botao. Ja tentei apertar a legenda
uma vez: ela media 78px contra um teto de 128, entao o aperto nao devolveu
um pixel e ainda cortou o texto -- esta escrito no teste que guarda isso.
===================================================================== */
@media (max-height: 700px) {
/* `img { height: 100% }` NAO ENTRA AQUI, e ja foi tentado DUAS vezes.
A coluna nao tem altura DEFINIDA -- `min-height` nao serve para
porcentagem resolver --, entao o navegador cai no tamanho natural do
arquivo: 1920px de imagem, cartao de 1922, documento de 2241. Medido nas
duas tentativas.
A arte preenche por outro caminho: fazendo a FICHA caber dentro do palco,
e nao mandando a imagem esticar. */
.vitrine-ficha { gap: var(--e1); }
.vitrine-data, .vitrine-ficha { padding-top: var(--e2); padding-bottom: var(--e2); }
.dia-cabeca { margin-bottom: var(--e2); }
.abas-bar { margin-bottom: var(--e2); }
.dia-resumo { margin-top: 0; }
/* O fuso e uma nota de rodape permanente ("Horarios de Fortaleza, o relogio
do painel"). Ela ensina UMA vez; numa janela de 600px ela custa uma linha
inteira todo dia. O horario de cada post continua escrito em cada post. */
.dia-fuso { display: none; }
.vitrine-controles { margin-top: var(--e1); }
/* A PROMESSA sai daqui, e e a unica coisa que NAO e espaco nesta lista.
Ela e a frase abaixo dos botoes que explica o que a acao faz ("o grupo
recebe a foto, a legenda e um link com prazo"). Ela ensina, e o botao ja
diz o que faz -- e a caixa de confirmacao repete a promessa inteira no
instante do clique, que e onde ela importa.
Numa janela de 600px ela custa ~40px do cartao. Sai daqui, e continua
onde decide. */
.acoes-promessa { display: none; }
}
/* =========================================================================
O VISOR -- a peca grande, com a legenda ao lado
O arranjo e o do proprio Instagram, e nao invencao: peca a esquerda, quem
assina e o texto a direita, um X no canto. E onde a peca vai viver, entao e
nesse arranjo que ela tem de ser julgada.
TUDO EM TOKEN, nenhum literal de cor fora do preto do palco. O painel vai
trocar de pele; um `#fff` escrito aqui seria a unica coisa da tela que nao
acompanharia.
O PALCO E PRETO DE VERDADE, e esse e o unico literal. Ele nao e "a cor
escura do tema": e ausencia de cor atras de uma peca que precisa ser vista
sem nada por perto interferindo no julgamento -- uma superficie tingida
mudaria a percepcao do fundo azul-escuro das pecas da TIM.
========================================================================= */
.visor {
width: 100vw;
max-width: 100vw;
height: 100vh;
max-height: 100vh;
margin: 0;
padding: 0;
border: 0;
background: transparent;
overflow: hidden;
}
/* O backdrop e do <dialog>, e nao uma div: ele so existe enquanto o modal
esta aberto e some sozinho, sem estado nosso para desencontrar. */
.visor::backdrop { background: rgb(6 14 12 / 0.86); }
.visor-quadro {
display: flex;
/* ABRACA A PECA, e nao reserva largura. Medido: com `width` fixa, um story
9:16 de 397px ficava num palco de 825px -- 428px de preto morto dos dois
lados da peca. `fit-content` deixa a ALTURA mandar (a peca cabe em 92vh) e
a largura sair da propria razao dela, entao feed quadrado e story alto
ganham cada um o seu quadro. */
width: fit-content;
max-width: 94vw;
max-height: 92vh;
margin: auto;
border-radius: var(--radius);
overflow: hidden;
background: var(--painel);
box-shadow: 0 24px 64px rgb(0 0 0 / 0.45);
}
.visor-midia {
flex: 0 1 auto;
min-width: 0;
display: grid;
place-items: center;
background: #000;
}
.visor-midia img,
.visor-midia video {
display: block;
max-width: 100%;
/* `contain` e nao `cover`: cortar a peca no visor seria mostrar uma peca
que nao existe. Um story 9:16 numa janela baixa encolhe; ele nao perde
as bordas. */
max-height: 92vh;
object-fit: contain;
}
.visor-lado {
flex: 0 0 clamp(17rem, 26vw, 23rem);
display: flex;
flex-direction: column;
min-height: 0;
padding: var(--e4);
gap: var(--e3);
}
.visor-conta {
margin: 0;
padding-bottom: var(--e3);
border-bottom: 1px solid var(--painel-borda);
font-weight: 600;
color: var(--texto);
}
.visor-conta[hidden] { display: none; }
.visor-legenda {
min-height: 0;
overflow-y: auto;
/* A legenda INTEIRA vive aqui -- ate 2.200 caracteres. Ela rola dentro do
lado, e nao estica o quadro: esticar poria a peca para fora da tela, que
e o contrario do que este visor existe para fazer. */
overscroll-behavior: contain;
}
.visor-legenda-texto {
margin: 0;
white-space: pre-wrap;
color: var(--texto);
font-size: var(--t-sm);
line-height: 1.55;
}
.visor-legenda-vazia { margin: 0; color: var(--dim); font-style: italic; }
.visor-fechar {
position: fixed;
top: var(--e4);
right: var(--e4);
width: 2.5rem;
height: 2.5rem;
display: grid;
place-items: center;
border: 1px solid rgb(255 255 255 / 0.28);
border-radius: 999px;
background: rgb(0 0 0 / 0.55);
color: #fff;
font-size: 1rem;
line-height: 1;
cursor: pointer;
}
.visor-fechar:hover { background: rgb(0 0 0 / 0.75); }
/* Numa janela estreita o lado a lado vira empilhado: a peca em cima, o texto
embaixo. Um lado de 17rem ao lado de uma peca de 9:16 num celular deixaria
as duas coisas ilegiveis. */
@media (max-width: 52rem) {
.visor-quadro { flex-direction: column; width: 96vw; }
.visor-midia img, .visor-midia video { max-height: 58vh; }
.visor-lado { flex: 1 1 auto; }
}
/* Os gatilhos. Botao de verdade, sem cara de botao: o alvo e a propria peca. */
.abre-visor,
.previa-abrir {
padding: 0;
border: 0;
background: none;
cursor: zoom-in;
color: inherit;
font: inherit;
}
.abre-visor { display: block; width: 100%; }
.abre-visor img { display: block; width: 100%; }
.previa-abrir { position: absolute; inset: 0; width: 100%; }
.post-foto.previa { position: relative; }
/* O foco tem de aparecer -- estes dois botoes sao transparentes, entao sem
isto o teclado atravessa a tela sem deixar rastro. */
.abre-visor:focus-visible,
.previa-abrir:focus-visible {
outline: 3px solid var(--marca);
outline-offset: -3px;
}
@media (prefers-reduced-motion: no-preference) {
.visor[open] { animation: visor-entra 180ms ease-out; }
@keyframes visor-entra {
from { opacity: 0; transform: scale(0.985); }
to { opacity: 1; transform: none; }
}
}
/* =========================================================================
A ARMACAO DOS MOCKUPS (25/08/2026)
O dono mandou tres mockups e disse, depois de eu ter entregue so a troca de
cor: "eu queria layout como nas imagens que te mandei, deixei bem claro
isso". Ele estava certo -- o que eu tinha feito era pele. Isto e a
estrutura.
O QUE MUDA: a pagina era CLARA com uma barra escura grudada no topo. Passa
a ser uma MOLDURA escura -- topo e lateral sao a mesma superficie continua
-- com a area de trabalho flutuando dentro dela, clara e de cantos
arredondados.
Por que isso muda tanto a leitura: com a moldura, o olho separa "onde eu
navego" de "onde eu trabalho" antes de ler uma palavra. Antes os dois
moravam no mesmo plano e a unica pista era a cor da barra.
========================================================================= */
/* O ROTULO DA LATERAL -- "FILTRO" nos mockups. Ele nomeia a coluna, que ate
aqui comecava direto no primeiro destino. */
.lateral-rotulo {
margin: 0 0 var(--e3);
padding: 0 var(--e3);
font-size: var(--t-xs);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--barra-dim);
}
/* O PE DA LATERAL: o estado da conexao com a conta, que nos mockups fecha a
coluna. Ele fica colado embaixo, e nao logo depois do ultimo destino. */
/* O PE DA LATERAL: qual conta, e se ela esta conectada -- nesta ordem.
Duas linhas, e nao uma, porque sao duas informacoes: a de cima diz QUEM
(o @ que vem do servidor), a de baixo diz COMO ESTA. Numa linha so, o @
passaria a parecer parte do estado. */
.lateral-pe {
margin: auto 0 0;
padding: var(--e4) var(--e3);
border-top: 1px solid var(--barra-borda);
font-size: var(--t-xs);
color: var(--barra-dim);
display: flex; flex-direction: column; gap: 3px;
}
/* O @ e a unica coisa do pe que e um NOME, entao ele carrega a tinta cheia. */
.lateral-conta {
color: var(--barra-texto);
font-weight: 700;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lateral-conta[hidden] { display: none; }
.lateral-estado { display: flex; align-items: center; gap: var(--e2); }
.lateral-estado::before {
content: "";
width: 7px; height: 7px; border-radius: 999px;
background: var(--menta);
flex: 0 0 auto;
}
/* OS PONTOS DO RESUMO: cada contagem ganha a marca da sua cor, que e a mesma
do chip daquele estado. Nos mockups eles sao o que faz a linha de resumo
ler como legenda em vez de frase corrida. */
.resumo-parte::before {
content: "";
display: inline-block;
width: 7px; height: 7px; border-radius: 999px;
margin-right: 6px;
background: currentColor;
vertical-align: middle;
}
/* O + do botao primario, como nos mockups. `aria-hidden` porque ele nao
acrescenta nada ao rotulo lido em voz alta -- "mais Novo post" seria pior
que "Novo post". */
.btn-mais {
font-size: 1.15em;
line-height: 1;
margin-right: .45em;
font-weight: 400;
}
#btn-novo { border-radius: 999px; padding-left: var(--e5); padding-right: var(--e5); }
/* =========================================================================
O CARTAO DO VIDEO, no formulario
Ele mostra UM quadro parado e convida a abrir -- o corte inteiro mora no
visor. Pedido do dono em 25/08/2026, com as palavras dele: "vai pegar so um
frame inicial do video, mas so vai rodar quando clicar".
Quem pinta o primeiro quadro e o proprio <video> com `preload="metadata"` e
sem controles: o navegador desenha o frame de abertura sem baixar o filme.
Nao ha imagem de capa separada aqui -- gerar uma exigiria decodificar o
video no cliente, e o arquivo ja esta na mao.
========================================================================= */
.vcartao { margin: 0 0 var(--e3); }
.vcartao-abrir {
display: block;
width: 100%;
max-width: 22rem;
padding: 0;
border: 1px solid var(--painel-borda);
border-radius: var(--radius);
background: var(--log);
color: inherit;
font: inherit;
cursor: zoom-in;
overflow: hidden;
position: relative;
}
.vcartao-abrir:hover { border-color: var(--campo-borda); }
.vcartao-abrir:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }
.vcartao-quadro {
display: block;
width: 100%;
/* 9:16 -- video de post e vertical nos dois destinos que o painel oferece
(story e reels). A reserva evita o salto quando os metadados chegam. */
aspect-ratio: 9 / 16;
max-height: 16rem;
object-fit: contain;
background: #000;
pointer-events: none; /* o clique e do BOTAO, nao do player */
}
.vcartao-convite {
display: block;
padding: var(--e2) var(--e3);
font-size: var(--t-sm);
font-weight: 600;
color: var(--texto);
text-align: left;
}
.vcartao-ajuda {
margin: var(--e2) 0 0;
max-width: 34ch;
font-size: var(--t-xs);
color: var(--dim);
}
/* O VISOR ABRIGANDO O EDITOR.
Com o editor dentro, o palco deixa de ser uma peca com razao fixa e passa a
ser uma coluna de controles: o filme em cima, a tira e os botoes embaixo.
Por isso ele ganha largura propria e fundo de painel -- preto atras de
controles esconderia os rotulos. */
.visor-midia[data-editor="sim"] {
background: var(--painel);
padding: var(--e4);
width: min(30rem, 60vw);
align-content: start;
}
/* COM O EDITOR NA TELA o lado encolhe. Ele continua ali -- saber para qual
conta vai e reler a legenda enquanto se escolhe o trecho e util --, mas
quem manda na largura passa a ser o editor. Com a largura de leitura cheia,
uma legenda curta (ou nenhuma) deixava uma coluna branca de 368px do
tamanho do video ao lado dela. */
.visor-quadro:has(.visor-midia[data-editor="sim"]) .visor-lado {
flex-basis: clamp(12rem, 18vw, 16rem);
}
.visor-midia[data-editor="sim"] .vcorte { width: 100%; }
@media (max-width: 52rem) {
.visor-midia[data-editor="sim"] { width: auto; }
}
/* =========================================================================
A FAIXA DE BOAS-VINDAS e a ABA GUIA
========================================================================= */
/* Ela mora ENTRE o masthead e a armacao, largura inteira, e empurra o resto
para baixo em vez de flutuar por cima: quem chega ve a mensagem e continua
vendo o painel. Um aviso que cobre o trabalho e um modal com outro nome. */
.boas-vindas {
display: flex; flex-wrap: wrap; align-items: center;
gap: var(--e3) var(--e5);
margin: 0 var(--goteira) var(--e4) 0;
padding: var(--e3) var(--e5);
background: var(--barra-topo);
border-bottom: 1px solid var(--barra-borda);
color: var(--barra-texto);
}
.boas-vindas[hidden] { display: none; }
.boas-vindas-texto {
margin: 0; flex: 1 1 28ch; min-width: 0;
font-size: var(--t-sm); color: var(--barra-dim);
}
.boas-vindas-texto strong { color: var(--barra-texto); }
.boas-vindas-acoes { display: flex; gap: var(--e2); flex: 0 0 auto; }
/* O secundario mora sobre o ESCURO aqui, e nao sobre o papel -- ele precisa da
mesma tinta que o Sair do masthead usa, e nao da tinta clara do conteudo. */
.boas-vindas .btn-neutro {
color: var(--barra-texto); border-color: var(--barra-dim);
}
.boas-vindas .btn-neutro:hover {
background: var(--barra-dim); color: var(--masthead-topo);
}
/* ---- a aba Guia ---- */
.guia-abertura {
margin: 0 0 var(--e5); max-width: 62ch;
font-size: var(--t-md); color: var(--dim);
}
.guia-video { margin: 0 0 var(--e6); max-width: 52rem; }
.guia-video video {
display: block; width: 100%; height: auto;
background: #000;
border-radius: var(--radius);
border: 1px solid var(--painel-borda);
}
.guia-video video[hidden] { display: none; }
.guia-video-recado {
margin: 0; padding: var(--e5);
background: var(--log); border: 1px solid var(--painel-borda);
border-radius: var(--radius);
color: var(--dim); font-size: var(--t-sm);
}
.guia-video-recado[hidden] { display: none; }
/* Os passos: uma coluna de leitura, e nao cartoes. Sao SETE, e sete cartoes
iguais viram uma grade que ninguem le -- aqui o que importa e a ordem, e
ordem se le em lista. */
.guia-passos {
margin: 0 0 var(--e6); padding: 0; list-style: none;
max-width: 62ch;
display: flex; flex-direction: column; gap: var(--e5);
}
.guia-passos h2 {
margin: 0 0 var(--e2);
font-size: var(--t-md); font-weight: 600; color: var(--texto);
}
.guia-passos p { margin: 0; color: var(--texto); line-height: 1.55; }
.guia-passos strong { font-weight: 600; }
.guia-fecho {
margin: 0; max-width: 62ch;
padding: var(--e4) var(--e5);
background: var(--log);
border-left: 0; /* nada de tarja lateral: fio inteiro */
border: 1px solid var(--painel-borda);
border-radius: var(--radius);
color: var(--texto); font-size: var(--t-sm); font-style: italic;
}