/* ========================================================================== Sites by Bairro.app — folha de estilos da aplicação (área do cliente + admin) -------------------------------------------------------------------------- Mobile-first, gutter lateral de 16px, sem scroll horizontal. Tokens em :root. Tema escuro: automático por prefers-color-scheme (exceto ) ou forçado com . Fonte (Google Fonts, carregada em base.html): Inter 400-900, a mesma do bairro.app. Classes disponíveis (mantenha esta lista atualizada ao criar classes novas): .cabecalho .marca .marca__logo header navy com a logo clara (base.html) .rodape (+ __grade __marca __logo __coluna __titulo --mostarda/--teal/--coral __ponto __base __assinatura) .container largura máxima + gutter lateral .pilha / .linha empilhar verticalmente / alinhar em linha com quebra .texto-suave .texto-centro .texto-pequeno .visualmente-oculto .botao (+ --primario --secundario --perigo --largo) .campo (+ __rotulo __entrada __ajuda __erro; modificador --invalido) .alerta (+ --sucesso --erro --aviso --info; __icone __texto __fechar) e .flashes .cartao (+ __titulo) .tabela dentro de .tabela-rolavel (rola no mobile) .badge (+ --coletando --produzindo --preview --publicado --recusado --erro; --neutro) .app-projeto (+ __chat __paineis) grid chat + painéis; empilha no mobile .chat (+ __cabecalho __mensagens __formulario) .mensagem (+ --cliente --agente --sistema; __meta) .digitando .painel (+ __titulo __corpo rolável; modificador --alto) .progresso-etapas > .etapa (+ --concluida --ativa --erro; __detalhe) .grade-imagens > .grade-imagens__item (+ --pendente) .admin-layout (+ .admin-nav .admin-nav__sair .admin-conteudo) .hero (+ __titulo __destaque __texto __acoes) .passos > .passo página inicial .pagina-erro (+ __codigo) página de erro .paineis-producao .painel-preview .painel-qa ... painéis de produção (seção no fim) .cartao-site-no-ar (+ __capa __texto __titulo __endereco) .site-no-ar__ilustracao site no ar (fim) ========================================================================== */ /* --- Tokens ---------------------------------------------------------------- */ :root { color-scheme: light; /* Paleta da logo do Bairro.app (u82: docs/REDESIGN_PLAYBOOK.md, secao 1). A marca entra como cor de superficie (header navy, CTA mostarda); texto e link usam tons derivados escuros porque o teal puro #3DB39E sobre branco da 2.6:1 (reprova WCAG AA). Contrastes medidos em 2026-09-29: texto #0F2E32 sobre #F4F6F8 13.3:1; texto-suave 6.3:1; primaria #1A6E60 5.6:1; navy sobre mostarda (botao principal) 6.7:1; branco sobre navy (header, bolha) 14.4:1. */ --marca-navy: #0F2E32; --marca-navy-claro: #1D4548; --marca-teal: #3DB39E; --marca-mostarda: #F0A030; --marca-mostarda-hover: #E89020; --marca-coral: #E85D5A; --marca-lima: #A8C734; --marca-lilas: #9B7BC4; --cor-fundo: #F4F6F8; --cor-superficie: #ffffff; --cor-superficie-2: #EEF3F2; --cor-texto: #0F2E32; --cor-texto-suave: #4A5E61; --cor-borda: #D9E2E2; --cor-primaria: #1A6E60; --cor-primaria-hover: #0F2E32; --cor-primaria-suave: #E3F4F0; --cor-primaria-contraste: #ffffff; --cor-cta: var(--marca-mostarda); --cor-cta-hover: var(--marca-mostarda-hover); --cor-cta-texto: var(--marca-navy); --cor-cabecalho: var(--marca-navy); --cor-cabecalho-texto: #ffffff; --cor-bolha-cliente: var(--marca-navy); --cor-bolha-cliente-texto: #ffffff; --cor-destaque: #B8431F; --cor-sucesso: #5A6E1A; --cor-sucesso-suave: #F1F6DF; --cor-erro: #A83A33; --cor-erro-suave: #FCEBEA; --cor-aviso: #8A5A12; --cor-aviso-suave: #FDF0DC; --cor-info: #1D4548; --cor-info-suave: #E4EEEF; --cor-preview: #6B4FA0; --cor-preview-suave: #EFEAF7; --cor-perigo-botao: #A83A33; /* igual nos dois temas: texto branco 6.4:1 */ --cor-foco: #1A6E60; /* Tipografia: Inter em tudo, titulos em peso 800-900 como no bairro.app (playbook secao 4). */ --fonte-titulo: "Inter", "Segoe UI", system-ui, sans-serif; --fonte-texto: "Inter", "Segoe UI", system-ui, sans-serif; --tam-pequeno: 0.875rem; --tam-grande: 1.125rem; --tam-titulo-1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); --tam-titulo-2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); --tam-titulo-3: 1.25rem; /* Espaçamento (escala de 4px) */ --esp-1: 0.25rem; --esp-2: 0.5rem; --esp-3: 0.75rem; --esp-4: 1rem; --esp-5: 1.5rem; --esp-6: 2rem; --esp-7: 3rem; --esp-8: 4rem; /* Raios do bairro.app: botao e campo rounded-xl (12px), cartao rounded-2xl (16px), modal 24px. */ --raio-s: 8px; --raio-m: 12px; --raio-g: 16px; --raio-xg: 24px; --raio-redondo: 999px; --sombra-1: 0 1px 2px rgba(15, 46, 50, 0.06), 0 2px 8px rgba(15, 46, 50, 0.06); --sombra-2: 0 6px 24px rgba(15, 46, 50, 0.12); --z-cabecalho: 20; --z-flash: 30; --z-modal: 40; --largura-container: 1120px; --gutter: 16px; /* gutter lateral mínimo exigido no mobile */ --altura-cabecalho: 64px; --alvo-minimo: 44px; /* alvo de toque mínimo (WCAG 2.5.5 / Apple HIG) */ --transicao: 160ms ease; } /* Tema escuro: fundo navy da marca; teal e mostarda puros passam de 5:1 sobre ele. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --cor-fundo: #0A1F22; --cor-superficie: #0F2E32; --cor-superficie-2: #1D4548; --cor-texto: #EEF4F3; --cor-texto-suave: #A9BDBF; --cor-borda: #2A5256; --cor-primaria: #3DB39E; --cor-primaria-hover: #6CCBB9; --cor-primaria-suave: #16403B; --cor-primaria-contraste: #0A1F22; --cor-destaque: #F0A030; --cor-cabecalho: #081A1D; --cor-bolha-cliente: #3DB39E; --cor-bolha-cliente-texto: #0A1F22; --cor-sucesso: #C5DE6A; --cor-sucesso-suave: #26330F; --cor-erro: #F5A8A6; --cor-erro-suave: #3A1C1C; --cor-aviso: #F6C77A; --cor-aviso-suave: #3B2A10; --cor-info: #9FD9CD; --cor-info-suave: #16403B; --cor-preview: #C9B6E8; --cor-preview-suave: #2D2346; --cor-foco: #F0A030; --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3); --sombra-2: 0 6px 24px rgba(0, 0, 0, 0.5); } } :root[data-theme="dark"] { color-scheme: dark; --cor-fundo: #0A1F22; --cor-superficie: #0F2E32; --cor-superficie-2: #1D4548; --cor-texto: #EEF4F3; --cor-texto-suave: #A9BDBF; --cor-borda: #2A5256; --cor-primaria: #3DB39E; --cor-primaria-hover: #6CCBB9; --cor-primaria-suave: #16403B; --cor-primaria-contraste: #0A1F22; --cor-destaque: #F0A030; --cor-cabecalho: #081A1D; --cor-bolha-cliente: #3DB39E; --cor-bolha-cliente-texto: #0A1F22; --cor-sucesso: #C5DE6A; --cor-sucesso-suave: #26330F; --cor-erro: #F5A8A6; --cor-erro-suave: #3A1C1C; --cor-aviso: #F6C77A; --cor-aviso-suave: #3B2A10; --cor-info: #9FD9CD; --cor-info-suave: #16403B; --cor-preview: #C9B6E8; --cor-preview-suave: #2D2346; --cor-foco: #F0A030; --sombra-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3); --sombra-2: 0 6px 24px rgba(0, 0, 0, 0.5); } /* --- Base ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--cor-fundo); color: var(--cor-texto); font-family: var(--fonte-texto); font-size: 1rem; line-height: 1.6; overflow-x: hidden; overflow-wrap: break-word; } img, svg, video, iframe { max-width: 100%; display: block; } img, video { height: auto; } h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--esp-3); } h1 { font-size: var(--tam-titulo-1); } /* Chave de parâmetro/prompt em no título ("Histórico de sistema.nome_agente_coleta") não tem onde quebrar: sem isso o h1 passava da tela no celular (473 px em 390). */ h1 code, h2 code { overflow-wrap: anywhere; } h2 { font-size: var(--tam-titulo-2); } h3 { font-size: var(--tam-titulo-3); } p, ul, ol { margin: 0 0 var(--esp-4); } a { color: var(--cor-primaria); text-underline-offset: 0.15em; } a:hover { color: var(--cor-primaria-hover); } button, input, select, textarea { font: inherit; color: inherit; } [hidden] { display: none !important; } :focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 2px; } .visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .pular-conteudo { position: absolute; top: -100px; left: var(--gutter); z-index: calc(var(--z-cabecalho) + 1); padding: var(--esp-2) var(--esp-4); border-radius: var(--raio-s); background: var(--cor-primaria); color: var(--cor-primaria-contraste); } .pular-conteudo:focus { top: var(--esp-2); } /* --- Layout geral ---------------------------------------------------------- */ .container { width: 100%; max-width: var(--largura-container); margin-inline: auto; padding-inline: var(--gutter); } .pilha { display: grid; gap: var(--esp-4); } .linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); } .texto-suave { color: var(--cor-texto-suave); } .texto-centro { text-align: center; } .texto-pequeno { font-size: var(--tam-pequeno); } /* Header navy com a logo clara, como em todas as telas do bairro.app (playbook secao 4). */ .cabecalho { position: sticky; top: 0; z-index: var(--z-cabecalho); background: var(--cor-cabecalho); color: var(--cor-cabecalho-texto); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .cabecalho :focus-visible { outline-color: var(--marca-mostarda); } .cabecalho .botao { background: rgba(255, 255, 255, 0.1); color: var(--cor-cabecalho-texto); } .cabecalho .botao:hover { background: rgba(255, 255, 255, 0.2); color: var(--cor-cabecalho-texto); } .cabecalho .botao--secundario { background: transparent; border-color: rgba(255, 255, 255, 0.55); } .cabecalho .botao--primario { background: var(--cor-cta); color: var(--cor-cta-texto); } .cabecalho .badge { background: rgba(255, 255, 255, 0.12); color: var(--cor-cabecalho-texto); } .cabecalho__interno { min-height: var(--altura-cabecalho); padding-block: var(--esp-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2) var(--esp-4); } .marca { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--alvo-minimo); white-space: nowrap; color: var(--cor-cabecalho-texto); text-decoration: none; } /* 40px de altura: "by Bairro.app" (45% da linha "Sites") fica com ~9px de x-height, legivel. */ .marca__logo { height: 40px; width: auto; flex: none; } .cabecalho__acoes { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-2); } .principal { flex: 1; width: 100%; padding-block: var(--esp-5); } /* Rodapé do bairro.app (landing: .cockpit-gradient + .footer-link): navy nos dois temas. Contraste medido no ponto mais claro do gradiente (#1D4548): texto branco a 72% 6.3:1, links a 78% 7.1:1, base a 60% 5:1; títulos em tons claros da marca (mostarda 4.9, teal claro 5.5, coral claro 5.5), porque teal e coral puros ficam em 4.1 e 3.1. */ .rodape { background: linear-gradient(135deg, var(--marca-navy) 0%, var(--marca-navy-claro) 50%, var(--marca-navy) 100%); color: rgba(255, 255, 255, 0.72); font-size: var(--tam-pequeno); padding-block: var(--esp-7) var(--esp-5); } .rodape :focus-visible { outline-color: var(--marca-mostarda); } .rodape a { color: rgba(255, 255, 255, 0.78); font-weight: 500; text-decoration: none; transition: color var(--transicao); } .rodape a:hover { color: #ffffff; text-decoration: underline; } .rodape__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-6) var(--esp-5); margin-bottom: var(--esp-6); } .rodape__marca { grid-column: 1 / -1; } @media (min-width: 768px) { /* 768px: md do Tailwind, o mesmo ponto em que a landing do bairro.app passa para 4 colunas */ .rodape__grade { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } .rodape__marca { grid-column: auto; } } .rodape__logo { height: 48px; width: auto; margin-bottom: var(--esp-3); } .rodape__marca p { max-width: 28ch; margin: 0; line-height: 1.6; } .rodape__titulo { margin: 0 0 var(--esp-3); font-family: var(--fonte-texto); font-size: var(--tam-pequeno); font-weight: 800; letter-spacing: 0; } .rodape__titulo--mostarda { color: var(--marca-mostarda); } .rodape__titulo--teal { color: #6CCBB9; } .rodape__titulo--coral { color: #F5A8A6; } .rodape__coluna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-1); } .rodape__coluna a { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: 32px; } .rodape__ponto { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--cor-ponto); flex: none; } .rodape__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3) var(--esp-5); padding-top: var(--esp-5); border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); } .rodape__base p { margin: 0; } .rodape__assinatura { display: inline-flex; align-items: center; gap: var(--esp-2); } .rodape__assinatura img { height: 20px; width: auto; } /* --- Botões ---------------------------------------------------------------- */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); min-height: var(--alvo-minimo); padding: var(--esp-2) var(--esp-5); border: 1px solid transparent; border-radius: var(--raio-m); background: var(--cor-superficie-2); color: var(--cor-texto); font-weight: 700; text-decoration: none; cursor: pointer; text-align: center; transition: background-color var(--transicao), color var(--transicao), transform var(--transicao); } .botao:hover { background: var(--cor-borda); color: var(--cor-texto); } .botao:active { transform: translateY(1px); } .botao:disabled, .botao[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } /* CTA principal do bairro.app: mostarda com texto navy (6.7:1), igual nos dois temas. */ .botao--primario { background: var(--cor-cta); color: var(--cor-cta-texto); box-shadow: var(--sombra-1); font-weight: 800; } .botao--primario:hover { background: var(--cor-cta-hover); color: var(--cor-cta-texto); } .botao--secundario { background: transparent; border-color: var(--cor-primaria); color: var(--cor-primaria); } .botao--secundario:hover { background: var(--cor-primaria-suave); color: var(--cor-primaria); } .botao--perigo { background: var(--cor-perigo-botao); color: #ffffff; } .botao--perigo:hover { background: #8A2F29; color: #ffffff; } .botao--largo { width: 100%; } .botao svg { width: 1.25em; height: 1.25em; flex: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-flex; } /* --- Campos de formulário -------------------------------------------------- */ .campo { display: flex; flex-direction: column; gap: var(--esp-1); margin-bottom: var(--esp-4); } .campo__rotulo { font-weight: 700; } .campo__entrada { width: 100%; min-height: var(--alvo-minimo); padding: var(--esp-2) var(--esp-3); border: 1px solid var(--cor-borda); border-radius: var(--raio-m); background: var(--cor-superficie); color: var(--cor-texto); } /* Mantém o anel de foco global (outline 3px --cor-foco); só reforça a borda (WCAG 2.2, 2.4.11). */ .campo__entrada:focus-visible { border-color: var(--cor-primaria); } textarea.campo__entrada { min-height: 6rem; resize: vertical; } .campo__ajuda { margin: 0; font-size: var(--tam-pequeno); color: var(--cor-texto-suave); } .campo__acao { align-self: flex-start; } .campo__erro { margin: 0; font-size: var(--tam-pequeno); font-weight: 600; color: var(--cor-erro); } .campo--invalido .campo__entrada { border-color: var(--cor-erro); } /* --- Alertas e mensagens flash --------------------------------------------- */ .flashes { display: grid; gap: var(--esp-2); margin-bottom: var(--esp-4); } .alerta { display: flex; align-items: flex-start; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-4); border: 1px solid var(--cor-borda); border-left-width: 4px; border-radius: var(--raio-m); background: var(--cor-superficie); color: var(--cor-texto); } .alerta__icone { flex: none; width: 20px; height: 20px; margin-top: 0.2em; } .alerta__texto { flex: 1; margin: 0; } .alerta__fechar { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: var(--alvo-minimo); min-height: var(--alvo-minimo); margin: calc(-1 * var(--esp-3)) calc(-1 * var(--esp-3)) calc(-1 * var(--esp-3)) 0; border: 0; border-radius: var(--raio-m); background: none; color: inherit; cursor: pointer; } .alerta__fechar svg { width: 18px; height: 18px; } .alerta__fechar:hover { background: rgba(127, 127, 127, 0.15); } .alerta--sucesso { border-left-color: var(--cor-sucesso); background: var(--cor-sucesso-suave); } .alerta--sucesso .alerta__icone { color: var(--cor-sucesso); } .alerta--erro { border-left-color: var(--cor-erro); background: var(--cor-erro-suave); } .alerta--erro .alerta__icone { color: var(--cor-erro); } .alerta--aviso { border-left-color: var(--cor-aviso); background: var(--cor-aviso-suave); } .alerta--aviso .alerta__icone { color: var(--cor-aviso); } .alerta--info { border-left-color: var(--cor-info); background: var(--cor-info-suave); } .alerta--info .alerta__icone { color: var(--cor-info); } /* --- Cartão e tabela ------------------------------------------------------- */ .cartao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-g); padding: var(--esp-5); box-shadow: var(--sombra-1); } .cartao__titulo { font-size: var(--tam-titulo-3); margin-bottom: var(--esp-3); } /* position: relative faz da caixa rolável o bloco de contenção dos .visualmente-oculto (position: absolute) das tabelas, como no .app-projeto: sem isso o Ações da última coluna escapava do overflow e alargava a página no celular (545 px em 390 no editor de prompt, 682 na lista). */ .tabela-rolavel { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--cor-borda); border-radius: var(--raio-m); background: var(--cor-superficie); } .tabela { width: 100%; border-collapse: collapse; font-size: var(--tam-pequeno); } .tabela th, .tabela td { padding: var(--esp-3) var(--esp-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--cor-borda); } .tabela th { background: var(--cor-superficie-2); font-weight: 700; white-space: nowrap; } .tabela tbody tr:last-child td { border-bottom: 0; } .tabela tbody tr:hover { background: var(--cor-primaria-suave); } /* --- Badge de status do projeto ------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: var(--esp-1); padding: 0.15em 0.7em; border-radius: var(--raio-redondo); font-size: 0.8rem; font-weight: 700; line-height: 1.6; background: var(--cor-superficie-2); color: var(--cor-texto-suave); white-space: nowrap; } .badge::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; } .badge--coletando { background: var(--cor-info-suave); color: var(--cor-info); } .badge--produzindo { background: var(--cor-aviso-suave); color: var(--cor-aviso); } .badge--produzindo::before { animation: pulsar 1.4s ease-in-out infinite; } .badge--preview { background: var(--cor-preview-suave); color: var(--cor-preview); } .badge--publicado { background: var(--cor-sucesso-suave); color: var(--cor-sucesso); } .badge--recusado { background: var(--cor-texto); color: var(--cor-fundo); } .badge--erro { background: var(--cor-erro-suave); color: var(--cor-erro); } /* --- Tela do projeto: chat + painéis -------------------------------------- */ .app-projeto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); align-items: start; } .app-projeto__paineis { display: grid; gap: var(--esp-4); align-content: start; min-width: 0; } /* position: relative faz de chat e painéis o bloco de contenção dos .visualmente-oculto (position: absolute): sem isso eles escapavam do overflow-y e criavam ~2.400 px de rolagem vazia abaixo do rodapé no desktop (integração geral, jornada 2d). */ .app-projeto__chat, .app-projeto__paineis { position: relative; } @media (min-width: 960px) { /* 960px: a partir daqui cabem chat (~55%) e painéis (~45%) lado a lado com leitura confortável */ .app-projeto { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); height: calc(100dvh - var(--altura-cabecalho) - 2 * var(--esp-5)); } .app-projeto__chat, .app-projeto__paineis { height: 100%; min-height: 0; } .app-projeto__paineis { overflow-y: auto; padding-right: var(--esp-1); } } .chat { display: flex; flex-direction: column; height: 100%; min-height: 60dvh; overflow: hidden; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-g); } .chat__cabecalho { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--cor-borda); } .chat__mensagens { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-4); } .mensagem { max-width: min(85%, 60ch); padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-g); line-height: 1.5; overflow-wrap: anywhere; } .mensagem p:last-child { margin-bottom: 0; } .mensagem--cliente { align-self: flex-end; background: var(--cor-bolha-cliente); color: var(--cor-bolha-cliente-texto); border-bottom-right-radius: var(--raio-s); } .mensagem--cliente a { color: inherit; } .mensagem--agente { align-self: flex-start; background: var(--cor-superficie-2); border-bottom-left-radius: var(--raio-s); } .mensagem--sistema { align-self: center; max-width: 100%; padding-block: var(--esp-1); background: transparent; color: var(--cor-texto-suave); font-size: var(--tam-pequeno); text-align: center; } .mensagem__meta { display: block; margin-top: var(--esp-1); font-size: 0.75rem; opacity: 0.75; } /* ADR 0095: "Editar" na bolha do cliente; o formulario abre num painel claro dentro da bolha. */ .edicao-mensagem { margin-top: var(--esp-1); } /* Alvo de toque maior que o texto (padding) sem engordar a bolha (margem negativa). */ .edicao-mensagem__abrir { cursor: pointer; font-size: 0.75rem; opacity: 0.85; text-decoration: underline; width: fit-content; margin: calc(-1 * var(--esp-2)) 0 calc(-1 * var(--esp-2)) auto; padding: var(--esp-2) var(--esp-1); list-style: none; } .edicao-mensagem__abrir::-webkit-details-marker { display: none; } .edicao-mensagem__form { display: flex; flex-direction: column; gap: var(--esp-2); margin-top: var(--esp-2); padding: var(--esp-3); border-radius: var(--raio-m); background: var(--cor-superficie); color: var(--cor-texto); } .edicao-mensagem__anexos { display: flex; flex-direction: column; gap: var(--esp-1); margin: 0; padding: var(--esp-2); border: 1px solid var(--cor-borda); border-radius: var(--raio-s); } .edicao-mensagem__aviso { margin: 0; color: var(--cor-texto-suave); } .edicao-mensagem__form .botao { align-self: flex-end; } /* Markdown do atendente (negrito, listas): blocos coladinhos para a bolha nao virar documento. */ .mensagem__texto > :first-child { margin-top: 0; } .mensagem__texto > :last-child { margin-bottom: 0; } .mensagem__texto p { margin: 0 0 var(--esp-2); } .mensagem__texto ul, .mensagem__texto ol { margin: 0 0 var(--esp-2); padding-left: var(--esp-4); } .mensagem__texto li { margin-bottom: var(--esp-1); } .mensagem__texto li:last-child { margin-bottom: 0; } .mensagem__texto code { padding: 0 0.25em; border-radius: var(--raio-s); background: rgb(0 0 0 / 0.06); font-size: 0.95em; } .chat__formulario { display: flex; align-items: flex-end; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4); border-top: 1px solid var(--cor-borda); background: var(--cor-superficie); } .chat__formulario .campo { flex: 1; margin: 0; } .chat__formulario textarea.campo__entrada { min-height: var(--alvo-minimo); max-height: 10rem; } .digitando { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: var(--esp-3) var(--esp-4); background: var(--cor-superficie-2); border-radius: var(--raio-g); } .digitando span { width: 8px; height: 8px; border-radius: 50%; background: var(--cor-texto-suave); animation: pulsar 1.2s ease-in-out infinite; } .digitando span:nth-child(2) { animation-delay: 0.2s; } .digitando span:nth-child(3) { animation-delay: 0.4s; } @keyframes pulsar { 0%, 80%, 100% { opacity: 0.35; transform: scale(0.85); } 40% { opacity: 1; transform: scale(1); } } /* --- Painel (título + corpo rolável) --------------------------------------- */ .painel { display: flex; flex-direction: column; overflow: hidden; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-g); } .painel__titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); margin: 0; padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--cor-borda); background: var(--cor-superficie-2); font-family: var(--fonte-texto); font-size: 1rem; font-weight: 700; } .painel__corpo { padding: var(--esp-4); overflow-y: auto; max-height: 24rem; } .painel--alto .painel__corpo { max-height: 40rem; } .painel__corpo pre { margin: 0; padding: var(--esp-3); border-radius: var(--raio-s); background: var(--cor-fundo); font-size: 0.8rem; white-space: pre-wrap; overflow-wrap: anywhere; } /* --- Progresso por etapas --------------------------------------------------- */ .progresso-etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--esp-2); } .etapa { display: flex; align-items: flex-start; gap: var(--esp-3); color: var(--cor-texto-suave); } .etapa::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.2em; border-radius: 50%; border: 2px solid var(--cor-borda); background: var(--cor-superficie); } .etapa--concluida { color: var(--cor-texto); } .etapa--concluida::before { border-color: var(--cor-sucesso); background: var(--cor-sucesso); box-shadow: inset 0 0 0 3px var(--cor-superficie); } .etapa--ativa { color: var(--cor-texto); font-weight: 700; } .etapa--ativa::before { border-color: var(--cor-primaria); background: var(--cor-primaria); animation: pulsar 1.4s ease-in-out infinite; } .etapa--erro { color: var(--cor-erro); } .etapa--erro::before { border-color: var(--cor-erro); background: var(--cor-erro); } .etapa__detalhe { display: block; font-size: var(--tam-pequeno); font-weight: 400; color: var(--cor-texto-suave); } /* --- Grade de miniaturas ---------------------------------------------------- */ .grade-imagens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--esp-3); } .grade-imagens__item { margin: 0; overflow: hidden; border: 1px solid var(--cor-borda); border-radius: var(--raio-m); background: var(--cor-superficie-2); } .grade-imagens__item img { width: 100%; aspect-ratio: 1; object-fit: cover; } .grade-imagens__item figcaption { padding: var(--esp-1) var(--esp-2); font-size: 0.75rem; color: var(--cor-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grade-imagens__item--pendente { aspect-ratio: 1; background: linear-gradient(100deg, var(--cor-superficie-2) 40%, var(--cor-borda) 50%, var(--cor-superficie-2) 60%); background-size: 200% 100%; animation: brilho 1.6s linear infinite; } @keyframes brilho { to { background-position: -200% 0; } } /* --- Admin: navegação lateral + conteúdo ---------------------------------- */ .admin-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-5); align-items: start; } .admin-nav { display: flex; gap: var(--esp-1); overflow-x: auto; scrollbar-width: thin; padding-bottom: var(--esp-2); border-bottom: 1px solid var(--cor-borda); } .admin-nav form { display: contents; } .admin-nav a, .admin-nav button { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--alvo-minimo); padding: var(--esp-2) var(--esp-3); border: 0; border-radius: var(--raio-m); background: none; color: var(--cor-texto); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; } .admin-nav a:hover, .admin-nav button:hover { background: var(--cor-superficie-2); color: var(--cor-texto); } .admin-nav a[aria-current="page"] { background: var(--cor-primaria-suave); color: var(--cor-primaria); } .admin-nav svg { width: 20px; height: 20px; flex: none; } .admin-nav__sair { margin-left: auto; } .admin-conteudo { min-width: 0; } @media (min-width: 900px) { /* 900px: a coluna de 15rem para o menu deixa >= 41rem para tabelas do admin */ .admin-layout { grid-template-columns: 15rem minmax(0, 1fr); } .admin-nav { position: sticky; top: calc(var(--altura-cabecalho) + var(--esp-4)); flex-direction: column; overflow: visible; padding: 0 var(--esp-3) 0 0; border-bottom: 0; border-right: 1px solid var(--cor-borda); } .admin-nav__sair { margin: var(--esp-4) 0 0; } } /* --- Página inicial (hero + passos) --------------------------------------- */ .hero { display: grid; gap: var(--esp-5); padding-block: var(--esp-7) var(--esp-6); } .hero__titulo { max-width: 18ch; font-weight: 900; } .hero__destaque { color: var(--cor-primaria); } .hero__texto { max-width: 55ch; font-size: var(--tam-grande); color: var(--cor-texto-suave); } .hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3) var(--esp-5); } .link-discreto { color: var(--cor-texto-suave); font-size: var(--tam-pequeno); } .passos { list-style: none; margin: 0 0 var(--esp-7); padding: 0; display: grid; gap: var(--esp-4); counter-reset: passo; } @media (min-width: 720px) { .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* esp-8: o circulo de 2.25rem no topo nao encosta no titulo em Inter 800 */ .passo { counter-increment: passo; padding-top: var(--esp-8); position: relative; } .passo::before { content: counter(passo); position: absolute; top: var(--esp-4); left: var(--esp-5); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--cor-primaria-suave); color: var(--cor-primaria); font-family: var(--fonte-titulo); font-weight: 900; } .passo p:last-child { margin-bottom: 0; } /* --- Página de erro ---------------------------------------------------------- */ .pagina-erro { max-width: 40rem; margin-inline: auto; padding-block: var(--esp-8); text-align: center; } .pagina-erro__codigo { margin: 0; font-family: var(--fonte-titulo); font-weight: 900; font-size: clamp(4rem, 12vw, 7rem); line-height: 1; color: var(--cor-primaria); } /* --- Movimento reduzido ----------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --- Imagens do produto (3D clay na paleta do bairro.app; ver static/img/produto/LEIAME.md) --- */ .hero--com-ilustracao { align-items: center; } .hero__conteudo { display: grid; gap: var(--esp-5); } .hero__ilustracao { width: 100%; height: auto; max-width: 560px; justify-self: center; } @media (min-width: 960px) { /* 960px: mesmo ponto em que .app-projeto vira duas colunas */ .hero--com-ilustracao { grid-template-columns: 1.1fr 1fr; gap: var(--esp-6); } } .ilustracao-spot { display: block; height: auto; margin-inline: auto; margin-bottom: var(--esp-3); } .estado-vazio { text-align: center; padding-block: var(--esp-4); } .chat__cabecalho { display: flex; align-items: center; gap: var(--esp-3); } .chat__avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; } .mensagem__avatar { width: 28px; height: 28px; border-radius: 50%; float: left; margin: 0 var(--esp-2) 0 0; } .painel__ilustracao { display: block; width: 100%; max-width: 360px; height: auto; margin: var(--esp-3) auto; } /* --- Paineis de producao (fase 3b: projetos/paineis_producao.html e painel_*.html) ------------------ So leitura: o cliente acompanha plano, etapas, imagens, codigo, revisao e previa. .paineis-producao (+ __receptor) contêiner estável com aria-live (nunca trocado pelo SSE) .painel__corpo--livre corpo sem altura máxima (a coluna de painéis já rola) .etapa--aguardando .etapa-producao (+ __conteudo __nome) .subetapas > .subetapa (+ --) .painel-producao__demora (+ --adiada) aviso de etapa demorada (ADR 0057) .grade-cartoes > .cartao-imagem (+ --pendente --trabalhando --revisao --pronta --simples --falhou --contida; __figura __miniatura __vazio __legenda __tipo __uso __status __motivo) .plano-site (__resumo __subtitulo __lista __nota __perguntas __detalhes) .amostras-cor > .amostra-cor .lista-arquivos (+ __item --escrevendo; __caminho __papel __tamanho) .codigo-parcial (__legenda __rolagem) .qa-resumo .notas-qualidade > .nota-qualidade (+ --boa --media --baixa; __valor __texto) .alternador-largura (__legenda __opcoes __opcao __rotulo) .previa__moldura .previa__quadro .previa__prints > .previa__print (+ --desktop --mobile; __print-legenda) ------------------------------------------------------------------------------------------------ */ .paineis-producao { display: grid; gap: var(--esp-4); min-width: 0; } .painel__corpo--livre { max-height: none; } .paineis-producao .pilha > p { margin-bottom: 0; } /* o gap da .pilha já espaça */ /* Etapas da produção (estende .progresso-etapas/.etapa) */ .etapa--aguardando { color: var(--cor-texto); font-weight: 700; } .etapa--aguardando::before { border-color: var(--cor-aviso); background: var(--cor-aviso-suave); } .etapa-producao__conteudo { flex: 1; min-width: 0; display: grid; gap: 2px; } .subetapas { list-style: none; margin: var(--esp-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-2); font-size: var(--tam-pequeno); font-weight: 400; } .subetapa { display: inline-flex; align-items: center; gap: var(--esp-1); padding: 0.1em 0.65em; border-radius: var(--raio-redondo); background: var(--cor-superficie-2); color: var(--cor-texto-suave); } .subetapa::before { content: ""; flex: none; width: 0.55em; height: 0.55em; border-radius: 50%; border: 1.5px solid currentColor; } .subetapa--concluida { background: var(--cor-sucesso-suave); color: var(--cor-sucesso); } .subetapa--concluida::before { background: currentColor; } .subetapa--atual { background: var(--cor-primaria-suave); color: var(--cor-primaria); font-weight: 700; } .subetapa--atual::before { background: currentColor; animation: pulsar 1.4s ease-in-out infinite; } .subetapa--aguardando { background: var(--cor-aviso-suave); color: var(--cor-aviso); font-weight: 700; } .subetapa--erro { background: var(--cor-erro-suave); color: var(--cor-erro); } /* Aviso de etapa demorada (ADR 0057): com --adiada o servidor manda `animation-delay` = segundos que faltam para `pipeline.aviso_demora_etapa_s`; até lá o aviso fica escondido e sem ocupar espaço, e aparece sozinho mesmo sem o SSE redesenhar o painel. O movimento reduzido não mexe no atraso. */ .painel-producao__demora { margin: var(--esp-3) 0 0; padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-m); background: var(--cor-aviso-suave); color: var(--cor-texto); font-size: var(--tam-pequeno); } .painel-producao__demora--adiada { animation: revelar-aviso-demora 0s linear both; } @keyframes revelar-aviso-demora { from { visibility: hidden; max-height: 0; margin: 0; padding: 0; overflow: hidden; } } /* Cartões de imagem (miniaturas surgindo) */ /* 7rem (112px): cabem 2 cartões na coluna de etapas de um celular de 360-375px (~280px úteis). */ .grade-cartoes { list-style: none; margin: var(--esp-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 7rem), 1fr)); gap: var(--esp-2); font-weight: 400; } .cartao-imagem { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--cor-borda); border-radius: var(--raio-m); background: var(--cor-superficie); color: var(--cor-texto); } .cartao-imagem--trabalhando { border-color: var(--cor-primaria); } .cartao-imagem__figura { margin: 0; } .cartao-imagem__miniatura, .cartao-imagem__vazio { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--cor-superficie-2); } .cartao-imagem--contida .cartao-imagem__miniatura { object-fit: contain; padding: var(--esp-2); background: repeating-conic-gradient(var(--cor-superficie-2) 0 25%, var(--cor-superficie) 0 50%) 0 0 / 16px 16px; } .cartao-imagem__vazio { background: linear-gradient(100deg, var(--cor-superficie-2) 40%, var(--cor-borda) 50%, var(--cor-superficie-2) 60%); background-size: 200% 100%; animation: brilho 1.6s linear infinite; } .cartao-imagem__legenda { display: grid; gap: 2px; padding: var(--esp-2); font-size: 0.8rem; line-height: 1.35; } .cartao-imagem__tipo { font-weight: 700; } .cartao-imagem__uso { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--cor-texto-suave); } .cartao-imagem__status, .cartao-imagem__motivo { color: var(--cor-texto-suave); } .cartao-imagem--trabalhando .cartao-imagem__status { color: var(--cor-primaria); font-weight: 700; } .cartao-imagem--pronta .cartao-imagem__status { color: var(--cor-sucesso); font-weight: 700; } .cartao-imagem--revisao .cartao-imagem__status, .cartao-imagem--simples .cartao-imagem__status { color: var(--cor-aviso); font-weight: 700; } .cartao-imagem--falhou .cartao-imagem__status { color: var(--cor-erro); font-weight: 700; } /* Plano do site */ .plano-site__resumo { display: grid; gap: var(--esp-2); margin: 0; } .plano-site__resumo dt { font-size: var(--tam-pequeno); font-weight: 700; color: var(--cor-texto-suave); } .plano-site__resumo dd { margin: 0; } .plano-site__subtitulo { margin-bottom: var(--esp-2); font-family: var(--fonte-texto); font-size: 1rem; font-weight: 700; } .plano-site__lista { display: grid; gap: var(--esp-1); margin: 0; padding-left: 1.25rem; } .plano-site__nota { display: block; } .plano-site__perguntas { margin: 0; } .plano-site__perguntas p { margin-bottom: var(--esp-2); } .plano-site__detalhes summary { padding-block: 0.625rem; font-weight: 700; cursor: pointer; } .amostras-cor { list-style: none; margin: 0 0 var(--esp-2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-3); font-size: var(--tam-pequeno); } .amostra-cor { display: inline-flex; align-items: center; gap: var(--esp-1); } .amostra-cor__cor { flex: none; width: 1.25rem; height: 1.25rem; border: 1px solid var(--cor-borda); border-radius: 50%; } /* Código do site: lista de arquivos + trecho escapado com rolagem (começa no fim) */ .lista-arquivos { list-style: none; margin: 0; padding: 0; display: grid; } .lista-arquivos__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-1) var(--esp-2); padding-block: var(--esp-1); border-bottom: 1px solid var(--cor-borda); } .lista-arquivos__item:last-child { border-bottom: 0; } .lista-arquivos__caminho { font-size: 0.85rem; overflow-wrap: anywhere; } .lista-arquivos__papel { flex: 1; min-width: 8rem; font-size: var(--tam-pequeno); } .lista-arquivos__tamanho { font-variant-numeric: tabular-nums; } .lista-arquivos code, .codigo-parcial code { font-family: ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace; } .codigo-parcial:not(:has(*)) { display: none; } .codigo-parcial__legenda { margin: 0 0 var(--esp-1); } .codigo-parcial__rolagem { display: flex; flex-direction: column-reverse; max-height: 16rem; overflow: auto; border-radius: var(--raio-s); background: var(--cor-fundo); } .codigo-parcial__rolagem pre { margin: 0; background: transparent; font-size: 0.75rem; line-height: 1.5; } /* Revisão de qualidade */ .qa-resumo { margin: 0; padding: var(--esp-3) var(--esp-4); border-left: 4px solid var(--cor-primaria); border-radius: var(--raio-s); background: var(--cor-primaria-suave); } .qa-resumo p { margin: 0; } .notas-qualidade { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); } .nota-qualidade { display: flex; align-items: center; gap: var(--esp-3); } .nota-qualidade__valor { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 3px solid currentColor; border-radius: 50%; font-weight: 700; font-variant-numeric: tabular-nums; } .nota-qualidade--boa .nota-qualidade__valor { background: var(--cor-sucesso-suave); color: var(--cor-sucesso); } .nota-qualidade--media .nota-qualidade__valor { background: var(--cor-aviso-suave); color: var(--cor-aviso); } .nota-qualidade--baixa .nota-qualidade__valor { background: var(--cor-erro-suave); color: var(--cor-erro); } .nota-qualidade__texto { min-width: 0; } /* Prévia: alternância computador/celular só por largura (rádios + :has, sem JS) */ .alternador-largura { min-width: 0; margin: 0; padding: 0; border: 0; } .alternador-largura__legenda { margin-bottom: var(--esp-1); padding: 0; color: var(--cor-texto-suave); } .alternador-largura__opcoes { position: relative; display: inline-flex; flex-wrap: wrap; padding: 3px; border: 1px solid var(--cor-borda); border-radius: var(--raio-redondo); background: var(--cor-superficie-2); } .alternador-largura__opcao { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; } .alternador-largura__rotulo { display: inline-flex; align-items: center; min-height: var(--alvo-minimo); padding: 0 var(--esp-4); border-radius: var(--raio-redondo); color: var(--cor-texto-suave); font-weight: 700; cursor: pointer; } .alternador-largura__opcao:checked + .alternador-largura__rotulo { background: var(--cor-superficie); color: var(--cor-primaria); box-shadow: var(--sombra-1); } .alternador-largura__opcao:focus-visible + .alternador-largura__rotulo { outline: 3px solid var(--cor-foco); outline-offset: 2px; } .previa__moldura { display: flex; justify-content: center; padding: var(--esp-2); border: 1px solid var(--cor-borda); border-radius: var(--raio-m); background: var(--cor-superficie-2); } .previa__quadro { width: 100%; height: min(70vh, 40rem); border: 0; border-radius: var(--raio-s); background: #ffffff; box-shadow: var(--sombra-1); transition: width var(--transicao); } /* 390px: largura do print mobile (sites/prints.py, iPhone 12-15). */ .painel-preview:has(#previa-largura-celular:checked) .previa__quadro { width: min(100%, 390px); } .previa__prints { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--esp-3); align-items: start; } .previa__print a { display: grid; gap: var(--esp-1); color: inherit; text-decoration: none; } .previa__print img { width: 100%; height: auto; object-fit: cover; object-position: top; border: 1px solid var(--cor-borda); border-radius: var(--raio-s); background: var(--cor-superficie-2); } .previa__print a:hover img { border-color: var(--cor-primaria); } .previa__print--desktop img { aspect-ratio: 1280 / 800; } .previa__print--mobile img { aspect-ratio: 390 / 844; } .previa__print-legenda { font-size: var(--tam-pequeno); font-weight: 700; } /* Site no ar (painel de ações, fase 6): capa = og.jpg gerada pelo pipeline para o próprio site; ilustração do produto site-no-ar-*.webp na publicação (ou sem capa). */ .site-no-ar__ilustracao { display: block; width: 160px; max-width: 60%; height: auto; margin-inline: auto; } .cartao-site-no-ar { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--cor-borda); border-radius: var(--raio-m); background: var(--cor-superficie); color: var(--cor-texto); text-decoration: none; box-shadow: var(--sombra-1); transition: border-color var(--transicao); } .cartao-site-no-ar:hover { border-color: var(--cor-primaria); color: var(--cor-texto); } .cartao-site-no-ar .site-no-ar__ilustracao { margin-block: var(--esp-3) 0; } .cartao-site-no-ar__capa { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--cor-superficie-2); } .cartao-site-no-ar__texto { display: grid; gap: var(--esp-1); padding: var(--esp-3) var(--esp-4); } .cartao-site-no-ar__titulo { font-weight: 700; } .cartao-site-no-ar__endereco { font-size: var(--tam-pequeno); color: var(--cor-primaria); overflow-wrap: anywhere; } /* Coluna de painéis com altura fixa (desktop, 960px+): linhas do tamanho do conteúdo. Com linhas `auto`, o grid encolhia até a borda os painéis com `overflow: hidden` (status, ações) quando a prévia (iframe alto) entrou na página na integração geral; a coluna já rola (overflow-y: auto). */ .app-projeto__paineis, .paineis-producao { grid-auto-rows: max-content; }