/* Gerimos — único override sobre o Pico classless. Normativo: docs/ui-padroes.md (dimensões/comportamento) e docs/identidade-visual.md (tokens). */ @font-face { font-family: "IBM Plex Sans"; font-weight: 600; src: url("../fonts/ibm-plex-sans-600.196e3cbc5fee.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "IBM Plex Mono"; font-weight: 500; src: url("../fonts/ibm-plex-mono-500.b1c8a895f5fd.woff2") format("woff2"); font-display: swap; } /* :root:not(...) espelha a especificidade dos temas do Pico — :root puro perde a cascata */ :root:not([data-theme=dark]) { --bg: #f5f5f4; --surface: #ffffff; --ink: #1c1917; --ink-2: #44403c; --muted: #66605a; --line: #d6d3d0; --primary: #0f766e; --primary-soft: #e0f0ee; --chart-bar: #8ac3bd; /* primária do Pico = teal da marca (links, botões, focus) */ --pico-primary: var(--primary); --pico-primary-background: var(--primary); --pico-primary-border: var(--primary); --pico-primary-underline: var(--primary); --pico-primary-hover: #0c5f59; --pico-primary-hover-background: #0c5f59; --pico-primary-hover-border: #0c5f59; --pico-primary-hover-underline: #0c5f59; --pico-primary-inverse: #ffffff; --pico-primary-focus: rgba(15, 118, 110, 0.3); /* formulários nos neutros quentes da identidade (nada de azulado) */ --pico-background-color: var(--bg); --pico-form-element-background-color: var(--surface); --pico-form-element-border-color: var(--line); --pico-form-element-placeholder-color: var(--muted); --pico-form-element-active-border-color: var(--primary); --pico-form-element-focus-color: var(--pico-primary-focus); --pico-muted-color: var(--muted); --pico-muted-border-color: var(--line); } /* Light é o padrão (data-theme="light" no ); dark só via toggle dev. TODO: oferecer dark mode como opção do usuário em Minha conta. */ :root[data-theme=dark] { --bg: #171614; --surface: #201f1c; --ink: #ece9e4; --ink-2: #b8b3ad; --muted: #8a857d; --line: #35322d; --primary: #14b8a6; --primary-soft: #123b37; --chart-bar: #2f5f5b; /* botões sólidos mantêm petróleo com texto branco (identidade §Paleta dark) */ --pico-primary: var(--primary); --pico-primary-underline: var(--primary); --pico-primary-hover: #2dd4bf; --pico-primary-hover-underline: #2dd4bf; --pico-primary-background: #0f766e; --pico-primary-border: #0f766e; --pico-primary-hover-background: #0c5f59; --pico-primary-hover-border: #0c5f59; --pico-primary-inverse: #ffffff; --pico-primary-focus: rgba(20, 184, 166, 0.35); --pico-background-color: var(--bg); --pico-form-element-background-color: var(--bg); --pico-form-element-border-color: var(--line); --pico-form-element-placeholder-color: var(--muted); --pico-form-element-active-border-color: var(--primary); --pico-form-element-focus-color: var(--pico-primary-focus); --pico-muted-color: var(--muted); --pico-muted-border-color: var(--line); } /* ---------- base ---------- */ html { background: var(--bg); /* mata o escalonamento responsivo do Pico (§1 do ui-padroes): 1rem = 16px em qualquer viewport e em qualquer tema (o var --pico-font-size não cobre o dark) */ font-size: 16px; } body { background: var(--bg); color: var(--ink); font-size: 0.9375rem; } h1, h2, h3, .wordmark { font-family: "IBM Plex Sans", sans-serif; font-weight: 600; color: var(--ink); } h1 { font-size: 1.375rem; } h2 { font-size: 1rem; } td.num, .valor { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-variant-numeric: tabular-nums; } .wordmark { color: var(--ink); text-decoration: none; font-size: 1.375rem; } .wordmark .ponto { color: var(--primary); } footer { padding: 1rem 1.5rem; color: var(--muted); font-size: 0.9375rem; text-align: center; } /* divisória do footer recuada das bordas (§4) — mesmo tratamento em todas as telas */ footer small { display: block; max-width: 720px; margin: 0 auto; padding-top: 1rem; border-top: 1px solid var(--line); } .mensagens, ul.errorlist, .mensagens.erro { list-style: none; padding: 0; margin: 0 0 1rem; } /* mesmo padrão de notificação da app também para erros de formulário (allauth/Django) */ .mensagens li, ul.errorlist li, .mensagens.erro li { list-style: none; background: var(--primary-soft); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; font-size: 0.9375rem; } /* sucesso some sozinho após 6s (rascunho §3); erro/warning ficam até o usuário resolver */ .mensagens li.success { background: #ddf3dd; color: #086108; border-color: #0ca30c; animation: sumir-banner 0.4s ease 6s forwards; } .mensagens li.error { background: #fbe1e1; color: #a02020; border-color: #d03b3b; } .mensagens li.warning { background: #fdf3d7; color: #7a5a00; border-color: #fab219; } /* texto de erro avulso fora de .mensagens (verificador, aceite público) — mesmo tom de status */ .erro { color: #a02020; } /* botão de ação secundária (Cancelar, +Adicionar, Antecipar) — contorno, sem competir com o CTA primário */ .secundario { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); } .secundario:hover { border-color: var(--primary); color: var(--primary); } .banner-aviso { background: var(--primary-soft); border: 1px solid var(--line); border-radius: 6px; padding: 0.75rem 1rem; } /* confirmação de salvamento — some sozinha após alguns segundos (sem JS) */ .banner-ok { background: var(--primary-soft); border: 1px solid var(--line); border-radius: 6px; padding: 0.5rem 0.75rem; margin-bottom: 1rem; animation: sumir-banner 0.4s ease 4s forwards; } /* aviso de template salvo sem placeholders (§ templates de contrato) — fica até o próximo swap */ .banner-atencao { border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: 6px; padding: 0.5rem 0.75rem; margin-bottom: 1rem; color: var(--ink-2); } @keyframes sumir-banner { to { opacity: 0; height: 0; padding-block: 0; margin: 0; overflow: hidden; } } /* placeholders arrastáveis para o corpo do contrato (drag/click-to-insert) */ .ph-chip { cursor: grab; user-select: none; display: inline-block; background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary); border-radius: 999px; padding: 0.1rem 0.6rem; font-family: inherit; /* tira o monoespaçado herdado de */ font-size: 0.8125rem; } .ph-chip:hover { background: var(--primary); color: var(--pico-primary-inverse); } .ph-chip:active { cursor: grabbing; } /* ---------- formulários (§5) ---------- */ /* altura padrão de controle: input de texto, select e botão têm sempre 3.125rem (50px) — a altura natural do input do Pico. Garante linhas de filtro/ação alinhadas em qualquer browser (month/date/select variam de altura sem isso). Variante compacta sobrescreve com height. */ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"]), select, button { height: 3.125rem; } /* checkbox/radio sempre inline com o rótulo, nunca em linha própria */ form p:has(input[type="checkbox"]), form p:has(input[type="radio"]), label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } form p:has(input[type="checkbox"]) label, form p:has(input[type="radio"]) label { margin: 0; } form p:has(input[type="checkbox"]) input, form p:has(input[type="radio"]) input, label:has(input[type="checkbox"]) input { margin: 0; flex-shrink: 0; } /* ---------- esqueleto público (§4) ---------- */ body.publica { display: flex; flex-direction: column; min-height: 100dvh; } body.publica > main { flex: 1; } .topo-publico { text-align: center; padding: 2rem 0 0.5rem; } .topo-publico .wordmark { font-size: 1.75rem; } .card-publico { max-width: 420px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 2rem; } .card-publico h1 { font-size: 1.375rem; } .conteudo-publico > .mensagens { max-width: 420px; margin: 0 auto 1rem; } .prosa-publica { max-width: 720px; margin: 0 auto; } .prosa-publica h2 { font-size: 1.125rem; margin-top: 1.5rem; } /* ---------- olhinho de mostrar senha (login/telas públicas) ---------- */ .campo-senha { position: relative; display: block; margin-bottom: 1rem; } .campo-senha input { margin-bottom: 0; padding-right: 2.75rem; } .olho-senha { position: absolute; inset: 0 0 0 auto; width: auto; height: 100%; margin: 0; padding: 0 0.75rem; display: flex; align-items: center; background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; } /* ---------- esqueleto logado (§3) ---------- */ .layout { display: flex; min-height: 100dvh; } .sidebar { width: 220px; flex-shrink: 0; position: sticky; top: 0; height: 100dvh; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 1.25rem 1rem; } .sidebar nav ul, .sidebar-rodape { list-style: none; padding: 0; margin: 1.25rem 0 0; } /* espaço entre itens: hover de um item não encosta no highlight do item ativo (§3). align-items:stretch mata o `align-items:center` que o Pico põe em `nav ul` — sem isso os itens encolhem para a largura do texto e ficam centralizados na coluna. */ .sidebar nav ul { display: flex; flex-direction: column; align-items: stretch; gap: 0.625rem; } .sidebar li { list-style: none; margin: 0; padding: 0; } /* nav logo abaixo do wordmark; Ajuda/Sair empurrados ao pé */ .sidebar-rodape { margin-top: auto; padding-top: 0.5rem; } .sidebar a, .sidebar .em-breve, .menu-usuario ul a { display: block; padding: 0.4rem 0.75rem; border-radius: 4px; color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; } .sidebar a:hover, .menu-usuario ul a:hover { background: var(--bg); color: var(--ink); } .sidebar a.ativo { background: var(--primary-soft); color: var(--primary); } .sidebar .em-breve { color: var(--muted); } .sidebar .wordmark { padding: 0 0.75rem; font-size: 1.75rem; text-align: center; } .area-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; /* tooltips absolutos dos cards (::after) não geram scroll horizontal da página no mobile; clip não cria scroll-box nem força overflow-y (ao contrário de hidden). §9: sem scroll-x. */ overflow-x: clip; } .topo { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1.5rem; border-bottom: 1px solid var(--line); background: var(--surface); } .topo h1 { margin: 0; flex: 1; font-size: 1.125rem; } /* menu do usuário no header:
nativo, sem JS de posicionamento */ .menu-usuario { position: relative; margin: 0; padding: 0; border: 0; flex-shrink: 0; } .menu-usuario summary { color: var(--muted); font-size: 0.9375rem; cursor: pointer; padding: 0.25rem 0.5rem; border: 1px solid transparent; border-radius: 4px; } .menu-usuario summary:hover, .menu-usuario[open] summary { border-color: var(--line); color: var(--ink); } /* Pico dá margin-bottom ao summary aberto (estilo acordeão) — aqui o menu é um dropdown absoluto, então esse espaço só empurra a altura do header. Zerar. */ .menu-usuario[open] summary { margin-bottom: 0; } .menu-usuario ul { position: absolute; right: 0; top: calc(100% + 0.25rem); z-index: 20; min-width: 10rem; margin: 0; padding: 0.25rem; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; } .menu-usuario li { list-style: none; margin: 0; padding: 0; } .badge-status { background: var(--primary-soft); color: var(--primary); border-radius: 4px; padding: 0.125rem 0.5rem; font-size: 0.8125rem; } .conteudo { flex: 1; width: 100%; max-width: 960px; margin-inline: auto; padding: 1.5rem; } /* barra de ações do topo da lista (+ novo, templates…): some enquanto há um formulário aberto no #form-area — esses atalhos não têm a ver com editar/criar um registro (item rascunho §11) */ .acoes-topo { margin-bottom: 0.5rem; } body:has(#form-area:not(:empty)) .conteudo > .acoes-topo { display: none; } /* formulários usam a largura total do conteúdo — mesma da mensagem/tabela central (§2, §5). Inputs e textareas herdam essa largura; o botão de ação é que é limitado (abaixo). */ .conteudo form { max-width: 100%; } /* botão de ação padrão (Salvar, Gerar…): ocupa a linha mas com teto — nunca estica com a tela, encolhe no mobile. Mesmo teto do botão "Conectar". */ .conteudo form > button[type="submit"] { width: 100%; max-width: 14rem; } /* input + botão de ação na mesma linha (ex.: conectar Asaas): a linha toda ocupa a largura do conteúdo; o input estica, o botão fica no seu tamanho natural (encolhe com a tela, não cresce). */ .input-com-botao { display: flex; gap: 0.5rem; align-items: start; } .input-com-botao input { flex: 1; margin-bottom: 0; } .input-com-botao button { width: auto; max-width: 14rem; flex-shrink: 0; } /* legendas de seção do formulário de cliente — destaque como as seções da ficha (h2) */ .conteudo form legend { font-family: "IBM Plex Sans", sans-serif; font-weight: 600; font-size: 1rem; color: var(--ink); padding: 0; margin-bottom: 0.5rem; } /* pessoas vinculadas: cada pessoa gravada é um
recolhível (abre pra editar) */ .linha-vinculado { border: 1px solid var(--line); border-radius: 6px; padding: 0.75rem 1rem; margin-bottom: 0.75rem; background: var(--surface); } .linha-vinculado > summary { cursor: pointer; font-weight: 600; color: var(--ink); } .linha-vinculado[open] > summary { margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); } /* Modais (): cabeçalho e rodapé FIXOS, rolagem só no corpo (ui-padroes §5.1). Pico faz o
inteiro rolar (overflow:auto + max-height) — o header e o footer somem junto com os campos. Aqui o article vira coluna flex: header/footer travados, e o filho do meio (o corpo) é o único que rola. Vale para todo dialog do app. */ dialog article { display: flex; flex-direction: column; overflow: hidden; height: calc(100vh - var(--pico-spacing) * 2); } dialog article > header, dialog article > footer { flex: 0 0 auto; } dialog article > *:not(header):not(footer) { flex: 1 1 auto; overflow-y: auto; min-height: 0; /* deixa o corpo encolher e rolar dentro do flex */ } /* o primeiro campo do corpo já cola no cabeçalho (nenhum elemento tem margin-top); o último filho, porém, costuma trazer margin-bottom próprio (ex: .linha-vinculado,

), o que deixava a borda inferior maior que a superior. Zera essa margem final para igualar as duas — regra vale para todo dialog do app. */ dialog article > *:not(header):not(footer) > :last-child { margin-bottom: 0; } /* aviso "clique fora para fechar" ao abrir um dialog (avisarFecharModal, base.html) — canto superior direito, acima do dialog (z-index 999 no Pico), some sozinho depois de 5s (JS). */ #aviso-fechar-modal { position: fixed; top: 1rem; right: 1rem; z-index: 1000; padding: 0.5rem 0.875rem; border-radius: 6px; background: var(--primary-soft); color: var(--ink); border: 1px solid var(--line); font-size: 0.875rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); opacity: 1; transition: opacity 0.3s ease; } #aviso-fechar-modal.oculto { opacity: 0; pointer-events: none; } :root[data-theme=dark] #aviso-fechar-modal { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } /* Modal de template de contrato: com o modal em altura de página, o textarea "corpo" cresce proporcionalmente pra preencher o espaço em vez de sobrar vazio embaixo. */ .modal-corpo-template { display: flex; flex-direction: column; min-height: 0; } #modal-template-corpo { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } #modal-template-corpo form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } #modal-template-corpo form p:has(textarea) { display: flex; flex: 1 1 auto; min-height: 0; } #modal-template-corpo textarea { flex: 1 1 auto; resize: none; } /* "+ inserir": seletor de tipo + botão, alinhados numa linha compacta */ .inserir-pessoa { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .inserir-pessoa select { width: auto; margin: 0; } .inserir-pessoa button { width: auto; margin: 0; } /* antecipar cobrança(s): linha compacta com quantidade + botão */ .antecipar-form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0 0.5rem; } .antecipar-form label { display: flex; align-items: center; gap: 0.5rem; margin: 0; } .antecipar-form input[type="number"] { width: 4.5rem; margin: 0; } .antecipar-form button { width: auto; margin: 0; } /* cabeçalhos de coluna ordenáveis (lista de clientes) */ th a.ord { color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; } th a.ord:hover { text-decoration: underline; } th a.ord.ord-ativa { color: var(--primary); } /* ---------- indicadores e gráfico (§7) ---------- */ .cards-indicadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; } .card-indicador { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1rem; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; } .card-indicador .rotulo { color: var(--muted); font-size: 0.8125rem; } .card-indicador .valor { font-size: 1.5rem; color: var(--ink); } /* ---------- tooltip (hover/focus) ---------- */ [data-tooltip] { position: relative; cursor: help; border-bottom: 1px dotted var(--muted); } /* balão + caret: ::after é o balão, ::before vira a setinha (Pico usa ambos p/ o balão dele). Ancorado à esquerda (cresce p/ a direita) — não corta no card mais à esquerda nem no mobile. */ [data-tooltip]::after, [data-tooltip]::before { position: absolute; left: 0; z-index: 10; opacity: 0; pointer-events: none; transform: translateY(0.2rem); transition: opacity 0.15s ease, transform 0.15s ease; } [data-tooltip]::after { content: attr(data-tooltip); bottom: calc(100% + 0.5rem); width: max-content; max-width: 15rem; padding: 0.5rem 0.7rem; border-radius: 6px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--primary); font-size: 0.75rem; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); } /* caret triangular apontando pra baixo, junto à borda esquerda do balão */ [data-tooltip]::before { content: ""; left: 0.75rem; bottom: calc(100% + 0.15rem); border: 5px solid transparent; border-top-color: var(--line); } [data-tooltip]:hover::after, [data-tooltip]:hover::before, [data-tooltip]:focus::after, [data-tooltip]:focus::before { opacity: 1; transform: translateY(0); } :root[data-theme=dark] [data-tooltip]::after { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } .evolucao h2 { margin-bottom: 0.75rem; } /* marcador "?" de ajuda ao lado de um título (dispara o [data-tooltip]) */ .info-marca { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; border-bottom: 0; background: var(--line); color: var(--muted); font-size: 0.6875rem; font-weight: 600; vertical-align: middle; } /* form de novo cliente aberto inline: esconde a busca/tabela que ficavam logo abaixo (rascunho §4 — "abaixo de salvar/cancelar tem uma lista de buscar clientes, retirar") */ #form-area:not(:empty) ~ .secao-cabecalho, #form-area:not(:empty) ~ #tabela-clientes { display: none; } .grafico-evolucao { width: 100%; height: auto; display: block; } .grafico-evolucao .barra-evolucao { fill: var(--chart-bar); } /* mês corrente em andamento: barra mais clara + rótulo "parcial" — lê como parcial, não vazia */ .grafico-evolucao .barra-evolucao.parcial { fill: var(--chart-bar); opacity: 0.45; } .grafico-evolucao .marca-parcial { fill: var(--muted); font-size: 10px; } .grafico-evolucao .linha-max { stroke: var(--line); stroke-dasharray: 3 3; } .grafico-evolucao text { fill: var(--muted); font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; } /* valor do mês corrente só no hover — sempre visível ficava desproporcional ao gráfico */ .grafico-evolucao .rotulo-valor { fill: var(--ink); opacity: 0; transition: opacity 0.15s ease; } .grafico-evolucao:hover .rotulo-valor { opacity: 1; } /* ---------- tabelas (§6) ---------- */ .tabela-wrap { overflow-x: auto; } table { font-size: 0.9375rem; } /* Pico dá 1rem de padding lateral por célula — 32px por coluna, 192px numa tabela de 6 colunas, que saíam da única coluna de texto (Cliente). 0.5rem é o mesmo passo de espaçamento do resto. */ td, th { padding-inline: 0.5rem; } td.num, th.num { text-align: right; /* R$/datas nunca quebram em duas linhas (ex.: R$ 9.999,99) — a tabela rola no wrap se faltar espaço */ white-space: nowrap; /* width:1% + nowrap encolhe a coluna ao conteúdo; sem isso, width:100% da tabela (Pico) reparte o espaço sobrando de forma imprevisível e cria um vão que parece coluna vazia. */ width: 1%; } td.acoes, th.acoes { white-space: nowrap; text-align: right; width: 1%; } /* coluna que absorve toda a folga da tabela. Sem ela o navegador reparte a sobra entre as colunas width:1% e a única coluna de texto quebrável (Cliente) sai a mais estreita de todas — era a causa da quebra de linha feia no nome. Uma por tabela. */ td.principal, th.principal { width: 100%; } /* só as células (links de ação) usam a fonte miúda; o cabeçalho "Ações" acompanha a fonte dos demais cabeçalhos de coluna. */ td.acoes { font-size: 0.8125rem; } td.situacao, th.situacao { white-space: nowrap; width: 1%; } /* Pagamentos do cliente: Competência era a única coluna sem largura fixada e absorvia toda a folga da tabela (width:100%), ficando isolada à esquerda. Fixando-a como as demais, a folga se reparte por igual entre as colunas. */ .pagamentos-cliente th:first-child, .pagamentos-cliente td:first-child { width: 1%; white-space: nowrap; } td.acoes a { margin-left: 0.5rem; } /* coluna "Cobrar": rótulo centrado sobre o par WhatsApp/E-mail (não à direita). Fonte no tamanho de célula da tabela (0.9375rem) — é coluna de conteúdo, não de ações miúdas; herdar o 0.8125rem de .acoes a deixava com fonte menor que as demais colunas. */ .acoes.cobrar { text-align: center; font-size: 0.9375rem; } .acoes.cobrar a:first-child { margin-left: 0; } .pill { display: inline-block; border-radius: 999px; padding: 0.06rem 0.6rem; font-size: 0.8125rem; } /* pill que vira link (status "Pago" → comprovante do Asaas): mantém a cor do status, sem o sublinhado/azul de link do Pico. */ a.pill { text-decoration: none; cursor: pointer; } a.pill:hover { text-decoration: underline; } .pill-ativo { background: var(--primary-soft); color: var(--primary); } .pill-inativo { border: 1px solid var(--line); color: var(--muted); } /* status fixos da identidade visual (Pago/Pendente/Atrasado) — cor não muda com o tema, mesmo padrão hardcoded de .mensagens li.success/.error (contraste AA já conferido) */ .pill-pago { background: #ddf3dd; color: #086108; } .pill-pendente { background: #fdf3d7; color: #7a5a00; } .pill-atrasado { background: #fbe1e1; color: #a02020; } tr.inativo td { color: var(--muted); } /* ---------- toggle da sidebar ---------- */ /* ☰ só no mobile (abre o drawer); sem colapso de sidebar no desktop por enquanto */ .menu-btn { display: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); cursor: pointer; flex-shrink: 0; } .backdrop { display: none; } /* texto secundário (dica, rótulo auxiliar) — classe já usada nos templates */ .muted { color: var(--muted); } /* coluna Alunos da lista de clientes: um nome por linha, sem quebrar o nome */ .alunos span { display: block; white-space: nowrap; } /* cabeçalho de seção com controle à direita (por-página, período) */ .secao-cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .controle-listagem { margin: 0; font-size: 0.875rem; } .controle-listagem label { color: var(--muted); display: inline-flex; align-items: center; gap: 0.4rem; } .controle-listagem select { width: auto; height: auto; /* variante compacta — fora da altura padrão de controle (§5) */ margin: 0; padding: 0.15rem 1.75rem 0.15rem 0.5rem; } /* busca da lista de clientes: input estica, o seletor de "por página" fica no seu tamanho (§5) */ .secao-cabecalho form:has(input[type="search"]) { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; /* preenche a largura da seção: o input estica e "Mostrar" encosta na direita (§5) */ flex: 1; } .secao-cabecalho form:has(input[type="search"]) input[type="search"] { flex: 1; min-width: 12rem; margin: 0; } /* botão "Filtrar" (pagamentos): na mesma linha dos seletores, tamanho de controle — não o botão de ação padrão full-width (§5), que quebraria a linha por ser largo demais. */ .secao-cabecalho form:has(input[type="search"]) button[type="submit"] { width: auto; max-width: none; padding-inline: 1.25rem; flex-shrink: 0; margin: 0; } /* filtros de pagamentos: Situação/Competência têm rótulo em cima — alinhar tudo pela base deixa os quatro controles (busca, select, mês, Filtrar) na mesma linha e mesma altura */ /* o :has repete o do bloco genérico acima para ganhar dele na especificidade */ .secao-cabecalho form.filtros-pagamentos:has(input[type="search"]) { align-items: flex-end; } .filtros-pagamentos { margin-bottom: 1rem; /* respiro que os margins zerados dos controles davam antes */ } .filtros-pagamentos label { margin: 0; } .filtros-pagamentos label > select, .filtros-pagamentos label > input { margin-bottom: 0; } /* Situação/Competência não precisam esticar como o campo de busca — largura próxima do conteúdo devolve espaço pro input de busca (§5) */ .filtros-pagamentos label > select, .filtros-pagamentos label > input[type="month"] { display: block; /* select/input são inline-block por padrão; só o width:100% do Pico forçava a quebra pro rótulo ficar em cima — width menor perde isso */ } .filtros-pagamentos label > select { width: 9rem; } .filtros-pagamentos label > input[type="month"] { width: 8.5rem; } .paginacao { display: flex; align-items: center; gap: 1rem; margin-top: 0.75rem; font-size: 0.9375rem; } .paginacao span { color: var(--muted); } /* ficha de cadastro do cliente (rascunho §5) */ .dados-cadastro { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 0.35rem 1rem; margin: 0; } .dados-cadastro dt { color: var(--muted); } .dados-cadastro dd { margin: 0; overflow-wrap: anywhere; min-width: 0; } .recomendacoes-senha { font-size: 0.875rem; margin-bottom: 1rem; } /* ---------- mobile (§9) ---------- */ @media (max-width: 768px) { .menu-btn { display: flex; } .sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; height: 100dvh; z-index: 15; transform: translateX(-100%); transition: transform 0.2s ease; } body:has(.nav-toggle:checked) .sidebar { transform: translateX(0); } body:has(.nav-toggle:checked) .backdrop { display: block; position: fixed; inset: 0; z-index: 14; background: rgba(0, 0, 0, 0.4); } .topo { padding: 0.75rem 1rem; flex-wrap: wrap; } .conteudo, .conteudo-publico { padding: 1rem; } .card-publico { padding: 1.5rem; } .cards-indicadores { grid-template-columns: 1fr; } }